/* =============================================================================
   InsuranceFAQ — shared site stylesheet
   The canonical implementation of Plans and Specs/INSURANCEONE-design-system.md.

   WHY THIS FILE EXISTS
   The content page had to be rebuilt four times before it looked like the same
   brand as the funnel. Each round the rules were re-derived by hand and drifted
   again. Tokens, header, nav, cards, icon tiles, footer and motion now live here
   ONCE and every page links it. Page-specific layout stays in the page.

   The build inlines this file, so a page is still a self-contained artifact.
   ============================================================================= */

:root{
  /* ---- canonical brand tokens (Brand/insuranceone-colors.css) ---- */
  --logo-navy:#091358;
  --navy:#011D46; --navy-deep:#011332; --navy-mid:#1A3A6B;
  --red:#E20212; --red-deep:#B00110;
  --gray:#887A8F; --ink:#1A2440; --muted:#5B6472; --line:#E6E3DC;
  --cream:#FAF7EF; --card:#FFFFFF; --pale-blue:#E1EAF4;
  --sage-deep:#296833; --orange:#E9785D;

  /* ---- two AA corrections. Both brand values were measured as failures. ----
     kicker  #8A93A6 → 3.09:1 white / 2.86:1 cream. Needs 4.5:1 at 11.5px.
     gray    #887A8F → 4.02:1 white.
     Replacements keep the original hue and clear on BOTH grounds.
     Owed as a sweep on funnel-v1.html — see INSURANCEFAQ-TASKS. */
  --kick:#616B80;        /* 5.35:1 white · 4.96:1 cream */
  --gray-text:#6C5478;   /* 6.6:1 — the logo's deeper mauve */

  /* ---- tone pairs: pastel drives the icon tile, deep drives the glyph ---- */
  --t-blue:#E8ECF4;   --d-blue:#091358;
  --t-sage:#ECF0E0;   --d-sage:#296833;
  --t-peach:#FCE8D8;  --d-peach:#9A3F1F;
  --t-lav:#F0E8F0;    --d-lav:#6A4B74;
  --t-creamy:#FBF3DE; --d-creamy:#8A6215;
  --t-redt:#FDECED;   --d-redt:#B00110;
  --t-teal:#E3EDEC;   --d-teal:#0E5C63;   /* proposed — pending Hunter */

  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Lora',Georgia,serif;   /* h1 ONLY */
  --hand:'Caveat',cursive;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#fff}
/* iPhone: Safari 26 paints the strip behind the notch from the body's background-COLOR, so the colour stays white and the ground rides on a background-image (audit 2026-10-16) */
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink);background-color:#fff;background-image:linear-gradient(var(--cream),var(--cream));-webkit-font-smoothing:antialiased}
a{color:var(--navy-mid)}
:focus-visible{outline:3px solid var(--navy-mid);outline-offset:2px;border-radius:4px}
img{max-width:100%}
svg{display:block}
.wrap{max-width:750px;margin:0 auto;padding:0 20px}
.wide{max-width:1140px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);padding:10px 16px;z-index:20;font-weight:700}
.skip:focus{left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Header — FULL BLEED, three-part flex ----------
   Brand and phone each take an equal share of the remaining space so the 430px
   search sits dead centre and the outer two reach the corners. Remove the search
   and that centring collapses. */
header{background:#fff;border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;max-width:none;padding:12px 28px;position:relative;gap:26px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{display:block;height:52px;width:auto}
.brand .word{font-weight:800;font-size:21px;letter-spacing:.01em;color:var(--logo-navy)}
.brand .word b{color:var(--red);font-weight:800}
.brand .tag{display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--gray-text);margin-top:1px}
.head-phone{text-align:right;font-size:13px;color:var(--muted)}
.head-phone .lbl{font-size:12px}
/* 44px minimum touch target (ui-ux-pro-max §2, CRITICAL). Measured at 122×39
   before this — under the minimum on a phone, for an audience that skews 65+. */
.head-phone a{display:inline-flex;align-items:center;min-height:44px;background:var(--navy);color:#fff;padding:11px 18px;border-radius:999px;font-size:15px;font-weight:800;margin-top:2px;text-decoration:none;white-space:nowrap;transition:background .3s}
.head-phone a:hover{background:var(--navy-mid)}
.isvg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;flex:0 0 auto}
.searchwrap{display:none;position:relative;flex:1;max-width:430px;margin:0 26px}
.searchwrap .s-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.searchwrap input{width:100%;height:44px;border:1.5px solid #E2DED4;background:#FCFAF5;border-radius:999px;padding:0 18px 0 44px;font-family:var(--sans);font-size:14.5px;color:var(--ink);transition:border-color .25s,box-shadow .25s,background .25s}
.searchwrap input::placeholder{color:var(--muted)}
.searchwrap input:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 4px rgba(1,29,70,.10)}

/* ---------- Nav — the menu floats on the cream, no band behind it ----------
   Decided and reversed twice. Read INSURANCEONE-design-decisions before
   putting a fill back. */
.navbar{background:transparent;border-bottom:0;position:relative;z-index:40}
.navbar .wrap{max-width:none;padding:0 28px;display:flex;justify-content:center}
.mainnav{display:flex;gap:30px;align-items:center}
.mn-item{position:relative}
.mn-link{font-family:var(--sans);font-weight:700;font-size:15.5px;color:var(--navy);background:none;border:none;cursor:pointer;padding:12px 2px;display:flex;gap:7px;align-items:center;border-bottom:2.5px solid transparent;transition:border-color .25s}
.mn-item:hover .mn-link,.mn-item.open .mn-link{border-bottom-color:var(--red)}
.mn-drop{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(6px);background:#fff;border:1px solid rgba(1,29,70,.08);border-radius:18px;box-shadow:0 28px 60px -20px rgba(1,29,70,.28);padding:10px;min-width:320px;opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.32,.72,0,1),transform .3s cubic-bezier(.32,.72,0,1),visibility .3s;z-index:80}
.mn-item.open .mn-drop,.mn-item:hover .mn-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mn-drop a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;transition:background .2s}
.mn-drop a:hover{background:var(--cream)}
.mn-drop b{display:block;font-size:15px;color:var(--navy);font-weight:700}
.mn-drop span{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:2px}
@media(min-width:900px){
  header .brand{flex:1 1 0;min-width:0}
  header .searchwrap{display:block;flex:0 1 430px;max-width:430px;margin:0}
  header .head-phone{flex:1 1 0;min-width:0}
}
@media(max-width:1119px){.navbar{display:none}}
@media(max-width:899px){
  header .wrap{padding:9px 14px;gap:12px}
  .brand img{height:46px}
  .brand .word{font-size:18px}
  .brand .tag{font-size:8px;letter-spacing:.1em}
  .head-phone a{font-size:13.5px;padding:0 14px;min-height:44px;margin-top:0;letter-spacing:-.01em}
}
@media(max-width:560px){.head-phone .lbl{display:none}}

/* ---------- Typography roles ----------
   Lora appears on h1 and NOWHERE else. A serif on a card heading is the
   fastest way to make a page look like it came from a different site. */
h1{font-family:var(--serif);font-size:clamp(1.8rem,5vw,2.7rem);font-weight:600;line-height:1.18;letter-spacing:-.017em;color:var(--navy);margin:0 0 14px;text-wrap:balance}
.kick{font-size:11.5px;font-weight:800;letter-spacing:.13em;color:var(--kick);margin:0 0 9px;line-height:1.4}
.sec{font-size:14.5px;color:var(--muted);line-height:1.65}
.crumb{font-size:12.5px;color:var(--muted);letter-spacing:.02em;margin:0 0 14px}
/* Inline nav links get a 44px hit area via padding, cancelled by an equal
   negative margin so the visual layout is unchanged. The tap target is bigger
   than the ink — which is exactly what the platform guidance asks for. */
.crumb a{display:inline-block;min-width:44px;text-align:center;padding:14px 7px;margin:-14px -3px;color:var(--muted);text-decoration:none;
  background-image:linear-gradient(#D9D5CB,#D9D5CB);background-size:calc(100% - 14px) 1px;
  background-position:7px calc(100% - 14px);background-repeat:no-repeat}
.crumb a:hover{color:var(--navy-mid)}

/* ---------- THE CONTENT CARD — white on cream, cream on a white band ----------
   NOT the .opt option-tile treatment. A pastel-filled card means "click me". */
.card{
  --tone-pastel:var(--t-blue);
  --tone-deep:var(--d-blue);
  background:#fff;
  border:.8px solid rgba(1,29,70,.07);
  border-radius:20px;
  padding:26px 24px;
}
.band-white{background:#fff;padding:var(--sec-y) 0 calc(var(--sec-y) + 6px);margin:var(--sec-y) 0}
.band-white .card{background:var(--cream);border-color:rgba(1,29,70,.06)}
.t-blue {--tone-pastel:var(--t-blue);  --tone-deep:var(--d-blue)}
.t-sage {--tone-pastel:var(--t-sage);  --tone-deep:var(--d-sage)}
.t-peach{--tone-pastel:var(--t-peach); --tone-deep:var(--d-peach)}
.t-lav  {--tone-pastel:var(--t-lav);   --tone-deep:var(--d-lav)}
.t-cream{--tone-pastel:var(--t-creamy);--tone-deep:var(--d-creamy)}
.t-red  {--tone-pastel:var(--t-redt);  --tone-deep:var(--d-redt)}
.t-teal {--tone-pastel:var(--t-teal);  --tone-deep:var(--d-teal)}

/* the icon tile — a rounded SQUARE at radius 14, never a circle */
.ictile{
  width:46px;height:46px;border-radius:14px;flex:0 0 46px;
  display:flex;align-items:center;justify-content:center;
  background:var(--tone-pastel);color:var(--tone-deep);margin:0 0 15px;
}
/* Specificity: `.card p` is 0-1-1 and would beat a bare `.kick` (0-1-0),
   rendering the kicker as body text. Keep these at 0-2-0 or higher. */
.card .kick,.feature .kick,.fbpanel .kick,.splitcopy .kick,.step .kick{color:var(--kick);font-size:11.5px;font-weight:800;letter-spacing:.13em;margin:0 0 9px}
.card h2{font-family:var(--sans);font-size:21px;font-weight:700;line-height:1.19;letter-spacing:-.012em;color:var(--ink);margin:0 0 11px;text-wrap:pretty}
.card p{margin:0 0 12px;font-size:15.8px;line-height:1.7;color:var(--ink)}
.card p:last-child{margin-bottom:0}
.card strong{font-weight:700;color:var(--ink)}
.card em{font-style:italic}
.nest{background:var(--tone-pastel);border:.8px solid rgba(1,29,70,.05);border-radius:14px;padding:15px 16px}
.nest p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.stackboxes{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.icorow{display:flex;align-items:flex-start;gap:12px}
.icorow .ico{color:var(--tone-deep);flex:0 0 auto;margin-top:2px}

/* ---------- Photography — mat only. NO decorative circles or rings. ----------
   The navy circle / red ring behind photos was rejected twice, and is
   off-pattern for "Trust & Authority": a shape carrying no meaning is
   decoration. The build fails if a ::before/::after circle reappears. */
.pframe{background:#fff;padding:9px;border-radius:30px;
  box-shadow:0 2px 3px rgba(1,29,70,.04),0 26px 62px -24px rgba(1,29,70,.18)}
.pframe img{width:100%;display:block;object-fit:cover;border-radius:22px 64px 22px 64px}
.pcap{font-family:var(--hand);font-size:22px;color:var(--sage-deep);text-align:center;margin:18px 0 0;transform:rotate(-2deg);display:block;line-height:1.3}

/* ---------- Buttons ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--red);color:#fff;text-decoration:none;font-weight:800;font-size:17px;
  padding:16px 32px;border-radius:999px;box-shadow:0 10px 26px rgba(200,16,46,.34);
  transition:background .2s ease,transform .12s ease,box-shadow .2s ease}
.cta:hover{background:var(--red-deep);box-shadow:0 14px 32px rgba(200,16,46,.42)}
.cta:active{transform:translateY(1px)}
.cta-2{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:#fff;color:var(--navy);text-decoration:none;font-weight:800;font-size:17px;
  padding:16px 30px;border-radius:999px;border:1.5px solid rgba(1,29,70,.18);
  transition:border-color .2s ease,background .2s ease,transform .12s ease}
.cta-2:hover{border-color:var(--navy);background:#fff}
.cta-2:active{transform:translateY(1px)}

/* ---------- Tokens and publication gates ---------- */
.tok{font-family:var(--mono);font-size:.82em;border:1px dashed #B9B3A6;border-radius:5px;padding:1px 6px;color:var(--muted);background:#FAF8F2;white-space:nowrap}
.tok.resolved{border:0;padding:0;background:none;color:inherit;font-family:inherit;font-size:inherit}
.gate{font-family:var(--mono);font-size:.86em;border:1px dashed var(--red);border-radius:5px;padding:1px 6px;color:var(--red-deep);background:#FEF3F4;white-space:nowrap}

/* ---------- Footer ---------- */
footer{margin-top:48px;background:#fff;border-top:1px solid var(--line);padding:26px 0 40px}
footer .wrap{max-width:820px}
.tpmo{font-size:13px;line-height:1.65;color:var(--muted);margin:0 0 14px}
.flinks{display:flex;flex-wrap:wrap;gap:0 14px;margin:-11px 0 8px;font-size:13px}
/* same 44px hit-area technique as the breadcrumb */
.flinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--muted);text-decoration:none}
.flinks a span{border-bottom:1px solid #E2DED4}
.flinks a:hover{color:var(--navy-mid)}
.flinks a:hover span{border-bottom-color:var(--navy-mid)}
.copy{font-size:12.5px;color:var(--gray-text);margin:0}

/* ---------- Motion — pacing, not decoration ----------
   Each block fades up as it enters the viewport. It enforces one idea per card
   and turns a wall of text into a sequence of beats. */
.rev{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .6s cubic-bezier(.32,.72,0,1)}
.rev.in{opacity:1;transform:none}
.no-js .rev{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

@media(max-width:640px){
  .wrap,.wide{padding:0 15px}
  .card{padding:22px 18px;border-radius:18px}
  .cta,.cta-2{display:flex;width:100%;padding:16px 20px}
}

/* =============================================================================
   AGENCY-TIER PASS — applied 2026-08-26 from taste-skill:soft-skill
   ("Principal UI/UX Architect", Editorial Luxury archetype — warm creams, muted
   sage, high-contrast serif headings, which is already our brand).

   Applied: macro-whitespace · film grain · button-in-button icon · entry blur
   REFUSED, with reasons, in Plans and Specs/INSURANCEONE-design-system.md — the brand system
   Hunter spent five rounds getting right outranks a generic taste guide.
   ============================================================================= */

/* ---------- 1 · Macro-whitespace ----------
   The skill calls for py-24→py-40 (96–160px). We measured 34–56px — about a
   third. This is the single biggest lever on "does it feel expensive," it costs
   nothing in brand terms, and it was the actual substance of "looks bland."
   Set below 160px deliberately: this audience reads dense information and an
   extra 100px of scroll between every idea is a cost, not a luxury. */
:root{
  --sec-y:92px;      /* between major sections */
  --sec-y-lg:112px;  /* around a hero or a closing moment */
}
@media(max-width:899px){:root{--sec-y:56px;--sec-y-lg:64px}}

/* ---------- 2 · Film grain ----------
   Editorial Luxury calls for a physical, paper-like surface. Fixed and
   pointer-events-none per the skill's own performance rule — never attached to
   a scrolling container, which would repaint the GPU continuously. */
body::after{
  content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){body::after{opacity:.02}}

/* ---------- 3 · Button-in-button trailing icon ----------
   The skill is right that a naked arrow beside label text reads cheap. The icon
   gets its own circular enclosure, flush with the button's inner padding, and
   carries the kinetic tension on hover. */
.cta{padding:15px 15px 15px 30px}
.cta-ic{
  width:32px;height:32px;border-radius:50%;flex:0 0 32px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);
  transition:transform .55s cubic-bezier(.32,.72,0,1),background .3s ease;
}
.cta:hover .cta-ic{transform:translate(3px,-1px) scale(1.06);background:rgba(255,255,255,.28)}
.cta-2{padding:15px 15px 15px 28px}
.cta-2 .cta-ic{background:rgba(1,29,70,.07)}
.cta-2:hover .cta-ic{background:rgba(1,29,70,.12)}
/* a CTA with no trailing icon keeps symmetric padding */
.cta.plain,.cta-2.plain{padding-right:30px}

/* ---------- 4 · Entry motion gains depth ----------
   The skill specifies blur resolving alongside the fade-up, which reads as
   focus-pulling rather than a flat slide. Kept at 5px, not the skill's heavier
   value: a large blurred surface is expensive to paint and this audience is
   often on older hardware. Resolves to 0, so nothing stays blurred. */
.rev{
  opacity:0;transform:translateY(22px);filter:blur(5px);
  transition:opacity .65s ease,transform .8s cubic-bezier(.32,.72,0,1),filter .65s ease;
}
.rev.in{opacity:1;transform:none;filter:blur(0)}
.no-js .rev{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}


/* ---------- mobile header: shrink, never force the page wide ----------
   .brand and .head-phone are flex children whose default min-width:auto forbids
   shrinking below min-content; the pill's nowrap made that the full string width, so a
   long phone string pushed the whole page sideways. min-width:0 lets them shrink;
   white-space:normal lets the pill wrap as a last resort. A real phone number fits on
   one line, so neither engages in the normal case. No overflow-x:hidden — that hides
   the symptom and every future instance of it. */
@media(max-width:899px){
  header .wrap{gap:10px}
  header .brand{min-width:0}
  header .head-phone{min-width:0}
  header .head-phone a{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}


/* ---------- mobile header sizing ----------
   Same three fixes already made on the funnel page, which shares this header but not
   this stylesheet:
     - logo shrinks on phones (it was pinned at desktop size)
     - phone pill sits at the 44px tap minimum on one line, never wrapping
     - tagline needed ~180px and had 176, so it wrapped; tighter tracking fits it */
@media(max-width:640px){
  .brand img{height:42px}
  .brand{gap:9px}
  .brand .word{font-size:16.5px}
  .brand .tag{letter-spacing:.05em;white-space:nowrap}
  .head-phone a{font-size:14px;padding:0 13px}
}


/* ---------- header: the phone number never shrinks ----------
   .brand and .head-phone split the row evenly, and on a 360px phone that share was
   narrower than the number, so it truncated with an ellipsis. The pill now takes its
   natural width and the brand yields; below 340px the tagline hides rather than clip
   mid-word. Mirrors v-pill-priority on the funnel page. */
@media(max-width:899px){
  header .head-phone{flex:0 0 auto}
  header .brand{flex:1 1 auto;min-width:0;overflow:hidden}
}
@media(max-width:339px){
  .brand .tag{display:none}
}


/* ---------- smaller phone pill ----------
   112x40 rather than 126x44. 40px still clears the WCAG AA target-size floor (24px)
   with room to spare. Mirrors v-pill-smaller on the funnel page. */
@media(max-width:899px){
    header .head-phone a{font-size:13px;padding:0 12px;min-height:40px}
}