/* Opulent Home Concierge, prototype.
   Palette read from the live site and the app screenshots: near-black
   ground, warm off-white type, a single gold accent. Jost for display to
   match the geometric logo, Inter for reading. */

:root{
  --bg:#0a0a0b;
  --panel:#111113;
  --panel-2:#161618;
  --ink:#f3f1ee;
  --muted:#9c9791;
  --line:rgba(243,241,238,.12);
  --gold:#c9a24a;
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.7 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.wrap.narrow{max-width:760px}

h1,h2,h3{font-family:Jost,Inter,sans-serif;font-weight:400;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.6vw,4rem);line-height:1.08}
h2{font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.2}
h3{font-size:1.15rem;letter-spacing:.01em}
p{margin:0 0 1.15em;color:var(--muted)}
.kicker{
  font-family:Jost,sans-serif;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1em;
}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.brand img{width:168px;height:auto}
.mainnav{display:flex;align-items:center;gap:26px}
.mainnav a{
  font-family:Jost,sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);opacity:.82;
}
.mainnav a:hover,.mainnav a[aria-current]{opacity:1;color:var(--gold)}
.btn-app{border:1px solid var(--gold);padding:9px 16px;color:var(--gold)!important;opacity:1!important}
.btn-app:hover{background:var(--gold);color:#0a0a0b!important}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.navtoggle span{display:block;width:24px;height:1.5px;background:var(--ink);margin:5px 0}

@media(max-width:880px){
  .navtoggle{display:block}
  .mainnav{
    position:absolute;top:100%;left:0;right:0;background:var(--panel);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 26px 22px;
    border-bottom:1px solid var(--line);display:none;
  }
  .site-head.open .mainnav{display:flex}
  .mainnav a{padding:13px 0;width:100%}
}

/* hero */
.hero{position:relative;padding:120px 0 90px;overflow:hidden}
.hero-tall{padding:190px 0 150px}
/* Still-image heroes follow the same principle as the video one below: let the
   picture read, and buy legibility with a gradient weighted toward the copy
   rather than by dimming the whole frame. At opacity .34 under a flat 55-90%
   scrim the image composited to RGB 28 at the top and 14 at the bottom against
   a page background of 10, with detail spanning about 11 levels, so it looked
   like no image had loaded at all. */
.hero::before{
  content:"";position:absolute;inset:0;background-image:var(--hero);
  background-size:cover;background-position:center;opacity:.85;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.45),rgba(10,10,11,.72))}
/* Video sits above the still background but below the ::after scrim, so the
   copy keeps the same contrast whether the clip plays or not. */
/* Video hero, matching the live site: full-bleed footage at full brightness,
   headline centred over it, outlined button underneath. Stacking inside
   .hero is video 0, scrim 1, copy 2. The scrim must stay below .hero-inner
   (z-index 2) or it paints over the headline, since a later pseudo-element
   wins the tie at equal z-index. */
/* Fill the viewport below the header, the way the live site does: solid
   header bar on top, footage occupying everything under it. */
.hero.has-video{
  min-height:calc(100vh - 113px);display:flex;align-items:center;padding:0;
}
/* The source clip carries a baked-in compositing artifact: a hard-edged
   translucent rectangle whose top edge sits at a fixed ~68.5% of frame
   height for the whole 12 seconds. It is present in the client's own file
   on opulenthc.com, so it is theirs rather than something introduced by
   our copy. Until they supply a clean master, the video is scaled so only
   the clean upper portion fills the hero and the artifact falls outside
   the (overflow-hidden) section. 148% leaves a margin over the measured
   edge, and top anchoring keeps the house in frame. */
.hero-video{
  position:absolute;left:0;right:0;top:0;width:100%;height:148%;
  object-fit:cover;object-position:center top;z-index:0;
}
/* The footage stays undimmed like the original. Legibility comes from a
   soft radial pool behind the copy plus a text shadow, rather than from
   darkening the whole frame. */
.hero.has-video::before{display:none}
.hero.has-video::after{
  z-index:1;
  background:
    radial-gradient(ellipse 60% 42% at 50% 54%,rgba(10,10,11,.42) 0%,rgba(10,10,11,0) 100%),
    linear-gradient(180deg,rgba(10,10,11,.34) 0%,rgba(10,10,11,0) 22%);
}
.hero.has-video .hero-inner{max-width:none;width:100%;text-align:center}
.hero.has-video h1{
  font-style:italic;font-weight:300;
  font-size:clamp(2.2rem,5.2vw,4.5rem);
  letter-spacing:.005em;
  text-shadow:0 2px 34px rgba(0,0,0,.5);
  margin-bottom:0;
}
.hero-cta{
  /* Matches the breathing room the live site leaves under the headline. */
  display:inline-block;margin-top:clamp(2rem,7vw,7rem);
  font-family:Jost,sans-serif;font-size:.8rem;letter-spacing:.17em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:1px solid rgba(243,241,238,.75);padding:15px 34px;
  background:rgba(10,10,11,.16);backdrop-filter:blur(2px);transition:.2s;
}
.hero-cta:hover{background:var(--ink);color:#0a0a0b;border-color:var(--ink)}
@media(max-width:700px){
  .hero.has-video{min-height:88vh}
  .hero-cta{padding:13px 26px;font-size:.75rem}
}
/* Respect a reduced-motion preference: hold the poster frame instead. */
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-inner{position:relative;z-index:2;max-width:840px}
.hero .lede{font-size:1.2rem;color:var(--ink);opacity:.9;max-width:36ch}
.hero .sub{max-width:60ch}

/* intro + prose */
.intro{padding:84px 0}
.intro .wrap{max-width:820px}
.prose{padding:72px 0}
.prose .wrap{max-width:820px}
.pull{
  font-family:Jost,sans-serif;font-size:1.35rem;color:var(--ink);
  border-left:2px solid var(--gold);padding-left:22px;margin:1.6em 0;
}
.direct{color:var(--ink)}
.reqs{list-style:none;padding:0;margin:0 0 1.6em}
.reqs li{padding:12px 0 12px 26px;border-bottom:1px solid var(--line);color:var(--muted);position:relative}
.reqs li::before{content:"";position:absolute;left:0;top:22px;width:10px;height:1px;background:var(--gold)}

/* buttons */
.btn{
  display:inline-block;font-family:Jost,sans-serif;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;padding:14px 30px;border:1px solid var(--line);
  color:var(--ink);background:transparent;cursor:pointer;transition:.18s;
}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn-gold{border-color:var(--gold);color:var(--gold)}
.btn-gold:hover{background:var(--gold);color:#0a0a0b}
.link-more{
  font-family:Jost,sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,162,74,.4);
}

/* split */
.split{padding:20px 0 84px}
.split-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.split-inner{grid-template-columns:1fr;gap:32px}}

/* services */
.services{padding:60px 0 90px;border-top:1px solid var(--line)}
.service{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:34px 0;border-bottom:1px solid var(--line)}
.service .num{font-family:Jost,sans-serif;color:var(--gold);font-size:.85rem;letter-spacing:.12em;padding-top:4px}
.service p{margin:0}
@media(max-width:700px){.service{grid-template-columns:1fr;gap:10px}}

/* app block */
.appblock{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.appblock-inner{display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:center;padding:80px 26px}
.appshot{width:100%;max-width:340px;margin-left:auto}
.storebtns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:900px){.appblock-inner{grid-template-columns:1fr;gap:36px}.appshot{margin:0 auto}}

/* testimonials */
.quotes{padding:90px 0}
.quotegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:36px}
.quotes figure{margin:0;background:var(--panel-2);border:1px solid var(--line);padding:32px}
.quotes blockquote{margin:0 0 18px;color:var(--muted);font-size:1rem;line-height:1.75}
.quotes figcaption{font-family:Jost,sans-serif;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
@media(max-width:900px){.quotegrid{grid-template-columns:1fr}}

/* team */
.team{padding:20px 0 80px}
.team h2.mt{margin-top:70px}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px}
.people.small{grid-template-columns:repeat(2,1fr);max-width:660px}
.person{margin:0}
.person img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--panel-2);filter:grayscale(1);transition:.25s}
.person:hover img{filter:grayscale(0)}
.person figcaption{padding-top:14px;display:flex;flex-direction:column;gap:3px}
.person .bio{margin-top:12px}
.person .bio p{font-size:.94rem;line-height:1.65;margin:0 0 .9em}

/* Privacy policy: long legal text, so it gets a reading measure and clear
   section breaks rather than the marketing page's wider column. */
.legalbody{padding:10px 0 90px}
.legalbody .wrap{max-width:760px}
.legalbody h2{font-size:1.15rem;margin:2.2em 0 .7em;color:var(--ink)}
.legalbody h2:first-of-type{margin-top:0}
.legalbody p{font-size:.95rem;line-height:1.7}
.person strong{font-family:Jost,sans-serif;font-weight:400;letter-spacing:.04em}
.person span,.person a{font-size:.8rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.person a:hover{color:var(--gold)}
@media(max-width:800px){.people,.people.small{grid-template-columns:repeat(2,1fr)}}
/* Below roughly 620px two headshot columns plus the gap exceed the viewport
   and push the page sideways, so drop to one. */
@media(max-width:620px){
  .people,.people.small{grid-template-columns:1fr;gap:34px}
  .person img{max-width:340px}
}

/* service area */
.area{padding:20px 0 90px}
.area-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.area img{border:1px solid var(--line)}
@media(max-width:900px){.area-inner{grid-template-columns:1fr;gap:30px}}

/* cta band */
.cta-band{background:var(--panel);border-top:1px solid var(--line);padding:80px 0;text-align:center}
.cta-band .wrap{max-width:720px}
.cta-band .btn{margin-top:10px}

/* forms */
.formwrap{padding:10px 0 100px}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fld{display:flex;flex-direction:column;gap:8px;grid-column:1/-1}
.fld.half{grid-column:auto}
.fld label{font-family:Jost,sans-serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.req{color:var(--gold)}
.fld input,.fld select,.fld textarea{
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;font:400 16px/1.5 Inter,sans-serif;border-radius:0;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold)}
.sent{background:var(--panel-2);border:1px solid var(--gold);padding:38px}
.sent h3{color:var(--gold)}
@media(max-width:700px){.frm{grid-template-columns:1fr}.fld.half{grid-column:1/-1}}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:60px 0 46px;text-align:center}
.foot-mark{width:92px;margin:0 auto 26px;opacity:.85}
.footnav{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-bottom:26px}
.footnav a{font-family:Jost,sans-serif;font-size:.72rem;letter-spacing:.18em;text-decoration:none;color:var(--muted)}
.footnav a:hover{color:var(--gold)}
.legal{font-size:.78rem;color:#8f8a83;margin:0}
.legal a{color:#8f8a83}

/* Vendor form: heading above the form and the contact-block sub-heading,
   mirroring how the live page separates trade questions from contact. */
.formhead{font-size:1.3rem;margin:0 0 1.1em}
.fieldgroup{
  grid-column:1/-1;margin:1.4em 0 .2em;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);font-weight:400;
}

/* Paid-search landing pages */
/* Landing hero. The quote card sits beside the headline rather than below the
   fold, and is lifted off the page with a lighter ground, a gold edge and a
   real shadow. Previously it was #111113 on #0a0a0b, a two-level difference
   that made the one element the page exists for disappear into the copy. */
.lp-hero{position:relative;padding:86px 0 78px;overflow:hidden}
/* The photograph is allowed to read. Previously it sat at .5 opacity under a
   flat 92% scrim, which composited to near-black: the image was texture, not
   a picture, and the card floated on mud. Full opacity now, with the scrim
   turned horizontal so the weight falls on the left where the headline needs
   contrast and lifts across to the right, where the card has its own ground
   and shadow and reads as layered over a visible room. */
.lp-hero::before{content:"";position:absolute;inset:0;background-image:var(--hero);
  background-size:cover;background-position:center;opacity:1;
  /* the source interior is dim; lift it rather than accept a muddy frame */
  filter:brightness(1.22) contrast(1.06) saturate(1.05)}
/* Legibility comes from a pool behind the headline, not from dimming the
   frame. Same approach the video hero on the home page already uses. */
.lp-hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 58% 78% at 24% 52%,rgba(10,10,11,.93) 0%,rgba(10,10,11,.72) 45%,rgba(10,10,11,0) 100%),
  linear-gradient(180deg,rgba(10,10,11,.62) 0%,rgba(10,10,11,.12) 22%,
    rgba(10,10,11,.12) 72%,rgba(10,10,11,.6) 100%)}
.lp-hero-copy h1,.lp-hero-copy .lede{text-shadow:0 2px 28px rgba(0,0,0,.6)}
.lp-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.22fr .78fr;
  gap:56px;align-items:center}
.lp-hero-copy h1{font-size:clamp(2.3rem,4.2vw,3.35rem);line-height:1.08;margin:.12em 0 .4em}
.lp-hero-copy .lede{font-size:1.09rem;color:var(--ink);opacity:.9;max-width:30em}
.lp-proof{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px}
.lp-proof li{position:relative;padding-left:22px;font-size:.93rem;color:var(--muted)}
.lp-proof li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;
  border-radius:50%;border:1.5px solid var(--gold)}

.lp-card{background:#17171b;border:1px solid rgba(201,162,77,.3);border-radius:3px;
  padding:26px 26px 24px;box-shadow:0 30px 70px -28px rgba(0,0,0,.9);position:relative}
.lp-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--gold)}
.lp-card h2{font-size:1.2rem;margin:0 0 .3em;line-height:1.22}
.lp-card-sub{font-size:.88rem;line-height:1.55;color:var(--muted);margin:0 0 16px}
.lp-card-note{font-size:.76rem;color:var(--muted);margin:11px 0 0;text-align:center;line-height:1.45}

/* The primary action is solid, not outlined. An outlined gold button on a
   near-black page is the lowest-contrast treatment available, which is the
   wrong one for the only conversion on the page. */
.btn-solid{background:var(--gold);border-color:var(--gold);color:#0a0a0b;font-weight:600}
.btn-solid:hover{background:#dbb45e;border-color:#dbb45e;color:#0a0a0b}
.lp-card .btn{width:100%;padding:13px 28px;font-size:.78rem}
.lp-card .frm{gap:13px}
.lp-card .fld{gap:6px}
.lp-card .fld input{padding:11px 13px}
.lp-card .fld label{font-size:.68rem}

.lp-top{padding:76px 0 10px}
.lp-scope-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:start;margin-top:20px}
.frm-compact{grid-template-columns:1fr}
.frm-compact .fld.half{grid-column:1/-1}

/* The anti-lead-broker argument is the strongest thing on the page and was
   three paragraphs of grey text. Setting the two models against each other
   makes the point at a glance. */
.lp-trust{padding:64px 0 20px}
.lp-vs{display:grid;grid-template-columns:1fr 1.08fr;gap:26px;margin-top:30px;align-items:stretch}
.lp-vs-bad,.lp-vs-good{padding:30px 30px 28px;border:1px solid var(--line);border-radius:3px}
/* The Opulent side carries a list and so runs taller. Both cards stretch to
   match, so the shorter one centres rather than stranding its text at the top
   of a tall box. */
.lp-vs-bad{background:transparent;opacity:.85;display:flex;flex-direction:column;justify-content:center}
.lp-vs-good{background:var(--panel-2);border-color:rgba(201,162,77,.32)}
.lp-vs-tag{display:block;font-family:Jost,sans-serif;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:14px;color:var(--muted)}
.lp-vs-good .lp-vs-tag{color:var(--gold)}
.lp-vs p{margin:0;font-size:.97rem}
.lp-vs-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:9px}
.lp-vs-list li{position:relative;padding-left:24px;font-size:.93rem;color:var(--muted)}
.lp-vs-list li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}

/* The reason to keep the account after this one job. Sits between the trust
   argument and the steps, so the account reads as the thing you gain rather
   than the hoop before the quote. */
.lp-breadth{padding:76px 0 66px;border-bottom:1px solid var(--line)}
.lp-breadth-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.lp-breadth h2{margin-bottom:.5em}
/* Showing the app is the argument. Someone being asked to open an account
   should see what they are opening before they hand over an email. */
.lp-shot{position:relative;display:flex;justify-content:center}
.lp-shot::before{content:"";position:absolute;inset:8% 6% 4%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(201,162,74,.16),transparent 66%);filter:blur(26px)}
.lp-shot img{position:relative;width:100%;max-width:392px;height:auto;border-radius:10px;
  box-shadow:0 38px 80px -30px rgba(0,0,0,.95)}
.lp-breadth-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.lp-breadth-list li{position:relative;padding:15px 18px 15px 44px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:3px;color:var(--ink);font-size:.96rem}
.lp-breadth-list li::before{content:"";position:absolute;left:19px;top:50%;margin-top:-3px;
  width:7px;height:7px;border-radius:50%;background:var(--gold)}

.lp-close{text-align:center;padding:12px 0 4px}
.lp-close h3{font-size:1.5rem;margin-bottom:.25em}
.lp-close p{color:var(--muted);margin:0 0 22px}

/* Once the hero card scrolls away on a phone there is no way to convert
   without scrolling back, so the action follows the reader down. */
.lp-sticky{display:none}
@media(max-width:900px){
  .lp-sticky{display:block;position:fixed;left:14px;right:14px;bottom:14px;z-index:60;
    background:var(--gold);color:#0a0a0b;text-align:center;padding:16px;border-radius:3px;
    font-family:Jost,sans-serif;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
    font-weight:600;text-decoration:none;box-shadow:0 12px 34px -10px rgba(0,0,0,.85)}
  body{padding-bottom:78px}
}

.steps{padding:60px 0 100px;border-top:1px solid var(--line);margin-top:50px}
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:34px 0 44px}
.step .num{
  font-family:Jost,sans-serif;color:var(--gold);font-size:.85rem;
  letter-spacing:.12em;display:block;margin-bottom:12px;
}
.step h3{margin-bottom:.45em}
.step p{margin:0;font-size:.95rem}

@media(max-width:900px){
  .lp-hero-grid{grid-template-columns:1fr;gap:34px}
  .lp-hero{padding:56px 0 54px}
  .lp-scope-grid{grid-template-columns:1fr;gap:28px}
  .lp-vs{grid-template-columns:1fr;gap:16px}
  .lp-breadth-grid{grid-template-columns:1fr;gap:30px}
  .lp-breadth{padding:52px 0 6px}
  .stepgrid{grid-template-columns:1fr;gap:26px}
}

/* Mobile type sizing.
   Several display styles sit at 0.72rem (11.5px). That reads fine as a
   letterspaced label on a desktop monitor and is genuinely hard to read on
   a phone, which is where most of this traffic lands. Raise the smallest
   elements on narrow viewports and give the letterspacing back some room. */
@media(max-width:700px){
  .kicker{font-size:.82rem;letter-spacing:.18em}
  .footnav{gap:18px 22px}
  .footnav a{font-size:.8rem;letter-spacing:.14em}
  .fld label{font-size:.82rem;letter-spacing:.1em}
  .legal{font-size:.82rem}
  .person figcaption span,.person a{font-size:.85rem}
  .service .num,.step .num{font-size:.9rem}
  .quotes figcaption{font-size:.82rem}
  body{font-size:16px}
}

/* Phone shot reveal. Fires when the section enters view, which also covers
   the case where it is already on screen at load. */
.lp-shot img{opacity:0;transform:translateY(26px) scale(.975);
  transition:opacity .75s cubic-bezier(.22,.7,.3,1),transform .75s cubic-bezier(.22,.7,.3,1)}
.lp-shot.is-in img{opacity:1;transform:none}
.lp-shot::before{opacity:0;transition:opacity .9s ease .18s}
.lp-shot.is-in::before{opacity:1}
@media(prefers-reduced-motion:reduce){
  .lp-shot img,.lp-shot::before{opacity:1;transform:none;transition:none}
}

/* Step two of the landing form. Slightly taller card than step one because a
   textarea needs room, but the same width, so the hero does not jump when the
   card swaps. */
.lp-card-step2 .lp-card-sub{color:var(--ink);opacity:.8}
.lp-details textarea{
  width:100%;background:rgba(10,10,11,.45);border:1px solid var(--line);color:var(--ink);
  font:400 15px/1.55 Inter,-apple-system,sans-serif;padding:11px 13px;resize:vertical;min-height:96px;
}
.lp-details textarea:focus{outline:none;border-color:var(--gold)}
.lp-details textarea::placeholder{color:var(--muted);opacity:.62}
.lp-skip{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.lp-skip:hover{color:var(--gold)}


/* Footer nav links rendered 22px tall on a phone, under the 44px touch
   target guidance. Padding only, so the desktop footer is unchanged. */
@media(max-width:800px){
  .footnav a{display:inline-block;padding:15px 0;line-height:1.2}
  .legal a{display:inline-block;padding:11px 0}
  .navtoggle{min-height:44px;min-width:44px}
}
/* the address check in the quote card's second step: city, state and ZIP side by side */
.fld-row{display:grid;grid-template-columns:minmax(0,1fr) 4.5em 6.5em;gap:10px;grid-column:1/-1}
.fld-row .fld{grid-column:auto}
.lp-fixnote{grid-column:1/-1;margin:0;padding:10px 12px;border-left:3px solid var(--gold);background:rgba(0,0,0,.04);font-size:.92rem}
@media (max-width:420px){.fld-row{grid-template-columns:minmax(0,1fr) 4.5em}.fld-row .fld-zip{grid-column:1/-1}}