/* =====================================================================
   InnovisLaw Design System  v1.0
   Reverse-engineered from the live Estate Administration hub and approved
   by Evan (June 2026). Reference implementation: ea-hub-replica.html
   --------------------------------------------------------------------- */

/* Self-hosted Montserrat (variable, latin subset, weights 300-700 in one 37KB file).
   Replaces the render-blocking fonts.googleapis.com round trip (audit P3, ~900ms mobile).
   The star glyph in .stars falls back to the system font exactly as it did on the
   Google-hosted latin subset. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/assets/montserrat-var.woff2') format('woff2')}

/* ---- 1. TOKENS ---- */
:root{
  --ink:#0C1115;        /* headings */
  --body:#6A6B6C;       /* body grey */
  --navy:#1A2959;       /* ready box, phone, hover outline, review names */
  --orange:#EA9423; --orange-deep:#d07f16;
  --orange-text:#A85A00;  /* orange for TEXT on light grounds: 5.09:1 on white, 4.79:1 on #f8f8f8
                             (WCAG AA). --orange itself is 2.40:1 as text — decorative use only. */
  --black:#0d0d0d;      /* footer — the only black on a page */
  --soft:#e9edf2;       /* icon circle */
  --band:#f6f7f8;       /* section/card wash grey — absorbed #f4f6f8/#f8f8f8/#f7f7f7/#f5f5f5 (Decision #42) */
  --blue-card:#eaf2fb;  /* light-blue card fill — absorbed #eff6fb */
  --line:#ededed;       /* card borders */
  --line2:#e3e3e3;      /* ghost button border */
  --shadow:0 8px 26px rgba(12,17,21,.07);  /* standard light box shadow */
  --f:'Montserrat',system-ui,-apple-system,sans-serif;
  --wrap:1180px;
}

/* Skip link + main landmark (audit A1/A3). Visually hidden until keyboard-focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:#fff;color:var(--navy);font-weight:600;padding:12px 22px;border-radius:0 0 8px 0;box-shadow:var(--shadow)}
.skip:focus{left:0}
main{display:block}
/* Keyboard focus is visible everywhere (audit A5); white ring on dark grounds. */
a:focus-visible,button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.hero a:focus-visible,.ready a:focus-visible,footer a:focus-visible{outline-color:#fff}

/* ---- 2. BASE ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--body);background:#fff;line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
h1,h2,h3,h4,h5,h6{font-family:var(--f);font-weight:400;color:var(--ink);text-transform:capitalize;line-height:1.2}
h2{font-size:42px;line-height:1.2}
h3{font-size:32px;line-height:1.4}
h4{font-size:24px}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
section{padding:96px 0}
.center{text-align:center}
.bold{font-weight:700}   /* for section H2s that are bold on the live site */

/* ---- 3. BUTTONS ---- */
/* Primary pill — orange, UPPERCASE, ink text (7.91:1; white was 2.40:1 — Decision #40).
   Hover = navy fill + thin orange outline. */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:var(--ink);font-size:21px;font-weight:600;line-height:1.2;
     padding:15px 30px;border-radius:30px;transition:.2s;cursor:pointer;border:1px solid transparent;text-transform:uppercase;letter-spacing:normal;text-align:center}
.btn:hover{background:var(--navy);border-color:var(--orange);color:#fff}
.btn svg{width:15px;height:15px;fill:currentColor}
/* Secondary pill — 2px ORANGE border, navy text, translucent-white fill, Title Case, 2px tracking.
   Hover FILLS ORANGE with white text (the outline fills in). Matches live Thrive secondary button
   (e.g. "Start Intake Questionnaire"). */
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:10px;
     background-color:transparent;background-image:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45));
     color:var(--navy);font-size:21px;font-weight:700;line-height:1.2;letter-spacing:2px;
     padding:15px 30px;border-radius:100px;border:2px solid var(--orange);transition:.2s;cursor:pointer;text-align:center}
.btn-outline:hover{background-color:var(--orange);background-image:none;color:var(--ink)}
/* Secondary ghost button — bold grey Title Case; navy outline on hover */
.btn-ghost{display:block;width:100%;text-align:center;background:transparent;color:var(--body);font-weight:600;
     border:1px solid var(--line2);border-radius:100px;padding:13px 15px;font-size:11px;letter-spacing:1px;transition:.2s}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}

/* ---- 4. HEADER (not sticky) ---- */
header{background:#fff;border-bottom:1px solid var(--line);position:relative}
.bar{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:30px}
.bar .logo img{height:62px}
.bar .mid{color:var(--body);font-size:15px}
.bar .mid a:hover{color:var(--orange)}
nav ul{display:flex;gap:34px;list-style:none;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--body);font-weight:300;align-items:center}
nav a{display:inline-flex;align-items:center;gap:6px}
nav a:hover{color:var(--orange)}
@media(max-width:900px){.bar .mid,nav{display:none}}

/* ---- 5. HERO ---- */
/* Set the image per page:  <section class="hero" style="--hero-image:url('...')"> */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 30px;
  background-color:#0C1115;
  background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)), var(--hero-image,#1a1a1a);
  background-size:cover,cover;background-position:center, var(--hero-pos,center);background-repeat:no-repeat,no-repeat;background-attachment:scroll,fixed}
.hero-inner{max-width:1040px;padding:0}
.hero h1{color:#fff;font-size:80px;line-height:1.15;font-weight:400;margin-bottom:26px}
.hero p{color:#f1f1f1;font-size:19px;max-width:62ch;margin:0 auto 36px;line-height:1.6}
.hero .eyebrow{color:#f1f1f1;margin-bottom:14px}  /* motto/eyebrow line above the H1; base .eyebrow grey is illegible on the dark hero */
@media(max-width:900px){.hero h1{font-size:44px}.hero{min-height:560px;background-attachment:scroll}}

/* ---- 6. TRIAD (3 icon concepts) ---- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:54px}
.triad .col{text-align:center}
.icoball{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 42% 38%,#fff 0%,var(--soft) 95%);
  box-shadow:0 6px 16px rgba(12,17,21,.05);display:grid;place-items:center;margin:0 auto 22px}
.icoball svg{width:34px;height:34px;stroke:var(--orange);fill:none;stroke-width:1.8;transform:translate(-2px,-2px)}
.triad h3{font-size:24px;margin-bottom:14px}
.triad h3 a:hover{color:var(--orange)}
/* Stretched link: when a triad heading is a link, the WHOLE card is the click target
   (audit U4 — heading-only targets were too small). Cards contain no other links
   (verified); do not add one without removing this overlay. */
.triad .col{position:relative}
.triad h3 a::after{content:"";position:absolute;inset:0}
.triad p{font-size:15px;max-width:34ch;margin:0 auto}
@media(max-width:900px){.triad{grid-template-columns:1fr;gap:42px}}

/* ---- 7. PROSE (left-aligned text block) ---- */
.prose{max-width:900px;margin:0 auto}
.prose h2{margin-bottom:20px;text-align:left}
.prose h2.center{text-align:center}  /* centered heading above left-aligned paragraphs (e.g. Subscribe "overwhelming" block) */
.prose p{font-size:16px;margin-bottom:1.1em}
.prose h3{font-size:24px;margin:28px 0 6px}  /* was h4; size kept (h3 base is 32px) */

/* ---- 8. BOX / CARD ---- */
/* Standard box: rounded + light shadow. Add .box to a CLICKABLE card for the navy hover outline. */
.box{background:#fff;border-radius:10px;box-shadow:var(--shadow);border:2px solid transparent;transition:.2s}
.box:hover{border-color:var(--navy)}

/* ---- 9. "START WITH THE RIGHT INFORMATION" cards (clickable) ---- */
.info h3{text-align:left;margin-bottom:40px}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.info-card{padding:38px 34px;display:flex;flex-direction:column}
.info-card h3{font-size:24px;margin-bottom:16px;line-height:1.35}  /* was h4; explicit size now that h3 base is 32px */
.info-card p{font-size:15px;flex:1;margin-bottom:28px}
@media(max-width:900px){.info-grid{grid-template-columns:1fr}}

/* ---- 10. "WHY" rows (static cards — NOT clickable, so no hover outline) ---- */
.why h2{margin-bottom:50px}
.reasons{display:flex;flex-direction:column;gap:24px;max-width:920px;margin:0 auto 46px}
.reason{display:flex;gap:26px;align-items:flex-start;padding:28px 32px;background:#fff;border-radius:10px;box-shadow:var(--shadow)}
.reason .ic{flex:none;width:64px;height:64px;border-radius:50%;background:var(--soft);display:grid;place-items:center}
.reason .ic svg{width:28px;height:28px;stroke:var(--orange);fill:none;stroke-width:1.8}
.reason h3{color:var(--navy);font-size:18px;margin-bottom:8px}
.reason h3 a{color:var(--orange-text)}
.reason p{font-size:15px;margin:0}

/* ---- 11. TESTIMONIALS (open, no boxes) ---- */
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:13px;color:var(--body);margin-bottom:8px}
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:46px;margin-top:44px}
.review{position:relative}
.review .top{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.review .avatar{width:78px;height:78px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-size:30px;font-weight:600;background:var(--navy)}
.review .src{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text);font-weight:600;margin-bottom:4px}
.review .name{color:var(--navy);font-size:18px}
.review .name a:hover{color:var(--orange)}
.review .qmark{position:absolute;top:-6px;right:0;font-size:80px;line-height:1;color:#eef1f6;font-family:Georgia,serif}
.stars{color:#f5b301;letter-spacing:3px;margin-bottom:14px;font-size:15px}
.review p{font-size:15px;margin:0;max-width:44ch}
@media(max-width:900px){.reviews{grid-template-columns:1fr;gap:36px}}

/* ---- 12. CALLOUT / "GUESS" BOX (outlined, 2-column: text left, CTA right) ---- */
.guessbox{border:2px solid #eee;border-radius:10px;padding:46px;max-width:1120px;margin:0 auto;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:48px}
.guessbox h3{margin-bottom:14px}
.guessbox p{font-size:17px;margin:0}
.guessbox .btn,.guessbox .btn-outline{flex:none}  /* NEVER let the flex row squeeze a button into wrapping — "Contact Us" shipped as two lines because only .btn was protected */
@media(max-width:900px){.guessbox{flex-direction:column;align-items:flex-start;gap:24px}}

/* ---- 13. FAQ — exclusive accordion (one open at a time; see site.js) ---- */
.faq h2{text-align:left;margin-bottom:36px}
.acc{}  /* FAQ accordion container — items carry their own borders; no wrapper style needed (catalogued for the drift linter) */
.acc-item{border-top:1px solid var(--line)}
.acc-item:last-child{border-bottom:1px solid var(--line)}
.acc-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--f);
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding:24px 6px;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:.2s}
.acc-q:hover,.acc-item.open .acc-q{color:var(--navy)}
.acc-q:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.acc-q .pm{color:var(--orange);font-size:24px;font-weight:300;line-height:1;flex:none;transition:.25s}
.acc-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-a p{font-size:16px;color:var(--body);padding:0 6px 24px;margin:0}
.acc-item.open .pm{transform:rotate(45deg)}

/* ---- 14. READY (navy CTA box) ---- */
.readywrap{padding:40px 0 80px}
.ready{background:var(--navy);border-radius:10px;text-align:center;padding:60px 40px;max-width:1120px;margin:0 auto}
.ready h2{color:#fff;font-size:42px;margin-bottom:16px}
.ready .sub{color:#fff;font-weight:400;font-size:16px;letter-spacing:.16em;text-transform:none;max-width:70ch;margin:0 auto 30px;line-height:1.6}

/* ---- 15. CONTACT (phone pill + form embed) ---- */
.contact{text-align:center}
.contact h2{margin-bottom:16px}
.contact .lead{max-width:600px;margin:0 auto 30px;font-size:16px;line-height:1.6;text-align:left}
.phonepill{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--navy);color:var(--navy);
  border-radius:30px;padding:14px 34px;margin-bottom:40px;transition:.2s}
.phonepill:hover{background:var(--navy);border-color:var(--orange);color:#fff}
.phonepill:hover svg{stroke:#fff}
.phonepill svg{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:1.8;transition:.2s}
.phonepill .num{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.phonepill b{font-size:21px;font-weight:500}
.phonepill span{font-size:12px}

/* ---- 16b. OWN FORMS (.ownform) — replaces the ClickUp iframe ----
   The iframe cost 11.13 MB / 126 requests to render four text fields
   (measured 2026-07-28); this is ~2 KB and inherits the design system.
   Posts to /api/submit, which creates the ClickUp task. Mobile-first:
   fields stack under 640px (61% of traffic is mobile). */
.ownform{max-width:640px;margin:0 auto;text-align:left;background:#fff;
     border-radius:16px;box-shadow:var(--shadow);padding:34px 32px}
.ownform .row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.ownform label{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.ownform input{width:100%;margin-top:7px;font-family:var(--f);font-size:16px; /* 16px stops iOS zooming on focus */
     color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:8px;padding:12px 14px;transition:.15s}
.ownform textarea{width:100%;margin-top:7px;font-family:var(--f);font-size:16px;color:var(--ink);background:#fff;
     border:1px solid var(--line2);border-radius:8px;padding:12px 14px;transition:.15s;min-height:120px;resize:vertical}
.ownform .full{margin-bottom:18px}
/* Select on the general form. Native control, restyled rather than replaced —
   a custom dropdown would cost keyboard and screen-reader behaviour we get free.
   appearance:none removes the OS chrome; the SVG caret is inlined so it needs no
   request and inherits no colour surprises. */
.ownform select{width:100%;margin-top:7px;font-family:var(--f);font-size:16px;color:var(--ink);
     border:1px solid var(--line2);border-radius:8px;padding:12px 40px 12px 14px;transition:.15s;cursor:pointer;
     appearance:none;-webkit-appearance:none;
     background-color:#fff;background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
     background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236A6B6C'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")}
.ownform select:invalid{color:var(--body)}   /* the disabled placeholder reads as placeholder, not as an answer */
.ownform input:focus,.ownform textarea:focus,.ownform select:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.ownform input:user-invalid{border-color:#b3261e}   /* only after the user has actually interacted */
.ownform .btn{width:100%;justify-content:center;margin-top:6px;border:0;font-family:var(--f)}
.ownform .formnote{font-size:13px;color:var(--body);margin:16px 0 0;text-align:center;max-width:none}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.ownform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:640px){
  .ownform{padding:26px 20px}
  .ownform .row{grid-template-columns:1fr;gap:16px;margin-bottom:16px}
}

/* ---- 17. PICTURE/TEXT — White (centered H2; text + rounded image 50/50; .pt.imgleft swaps) ---- */
.pt-wrap h2{text-align:center;margin-bottom:40px}
.ptl-wrap{}  /* image-left Picture/Text wrapper — H2 lives in the .ptl text column, so (unlike .pt-wrap) there is deliberately no wrapper h2 rule (catalogued for the drift linter) */
.pt{display:grid;grid-template-columns:1.55fr 1fr;gap:48px;align-items:center;max-width:1120px;margin:0 auto}
.pt .txt p{font-size:16px}
.pt img{width:100%;aspect-ratio:415/308;object-fit:cover;object-position:50% 50%;border-radius:10px;display:block}
.pt.imgleft .txt{order:2}
.pt.even{grid-template-columns:1fr 1fr;max-width:920px}  /* ~50/50 split (e.g. incorporation "Why We Start") */
.prose p a,.reason p a,.pt .txt p a{color:var(--orange-text);text-decoration:underline}
/* plain disc bullets for factual Picture/Text lists */
.pt .txt ul:not(.checklist),.ptl .txt ul:not(.checklist){margin:16px 0 0;padding-left:20px;font-size:16px}
.pt .txt ul:not(.checklist) li,.ptl .txt ul:not(.checklist) li{margin-bottom:8px}
/* numbered list (decimal) inside Picture/Text — e.g. "What To Think About" with bold lead-ins */
.pt .txt ol,.ptl .txt ol{margin:16px 0 0;padding-left:22px;font-size:16px;list-style:decimal}
.pt .txt ol li,.ptl .txt ol li{margin-bottom:10px;padding-left:4px}
@media(max-width:900px){.pt,.pt.even{grid-template-columns:1fr;gap:28px}.pt.imgleft .txt{order:0}}  /* .pt.even listed explicitly: its 50/50 rule otherwise out-specifies this collapse */
/* Picture/Text — image LEFT, text RIGHT; H2 inside text col, top-aligned, image fills column height */
.ptl{display:grid;grid-template-columns:416px 1fr;gap:80px;align-items:center;max-width:1120px;margin:0 auto}
.ptl img{width:100%;aspect-ratio:416/468;object-fit:cover;object-position:100% 50%;border-radius:40px;display:block}
.ptl .txt h2{text-align:left;margin-bottom:18px}
.ptl .txt p{font-size:16px}
.ptl .txt p a{color:var(--orange-text);text-decoration:underline}
@media(max-width:900px){.ptl{grid-template-columns:1fr;gap:24px}.ptl img{height:auto;aspect-ratio:416/360}}

/* ---- 18. SINGLE CARD — Short Text (white card, subtle shadow, H2 + para, left) ---- */
.shortcard{background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:40px 44px;max-width:1120px;margin:0 auto}
.shortcard h2{margin-bottom:12px}
.shortcard h3{margin-bottom:10px}
.shortcard p{font-size:16px;margin:0;max-width:90ch}
.shortcard ul{list-style:disc;margin:14px 0 0;padding-left:22px;font-size:16px}
.shortcard ul li{margin-bottom:8px}
.shortcard p + p{margin-top:1em}  /* multi-paragraph short card */
/* Soft panel on the grey pricing band — translucent 40% white fill (NOT solid #fff), no shadow, 12px radius. e.g. a-la-carte services */
.shortcard.on-band{background:rgba(255,255,255,.4);box-shadow:none;border-radius:12px}

/* ---- 19. PRICING — Tiered ICs (grey section, 3 white cards) ---- */
.pricing-wrap{background:var(--band)}
.pricing-wrap h2{text-align:center;margin-bottom:46px}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1120px;margin:0 auto;align-items:stretch}
.price-card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:34px 30px;display:flex;flex-direction:column}
.price-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.price-head .tier{font-size:20px;font-weight:600;color:var(--ink)}
.price{display:flex;align-items:flex-start;gap:3px;color:var(--ink);line-height:1}
.price .cur{font-size:16px;margin-top:6px}
.price .amt{font-size:40px;font-weight:400}
.price-card .desc{font-size:14px;margin-bottom:12px}
.price-card .inc{font-size:14px;margin:0 0 6px;color:var(--ink)}
.price-card ul{margin:0 0 26px 18px;padding:0;font-size:14px}
.price-card ul li{margin-bottom:7px}
/* Composition rule for buttons: never wrap by ACCIDENT (see the flex-squeeze guard on
   .guessbox above) — but a deliberate stack is fine where the container calls for it.
   These tall pricing cards carry a 40px price numeral; a substantial two-line CTA at
   18px with balanced halves ("BOOK INITIAL / CONSULTATION") suits the card's
   proportions better than a shrunken one-liner. Labels are GTM Click-Text-locked. */
.price-card .btn{margin-top:auto;align-self:center;justify-content:center;padding:12px 22px;font-size:18px;line-height:1.3;text-wrap:balance}
.pricing-note{max-width:1120px;margin:22px auto 0;font-size:13px}
@media(max-width:900px){.pricing{grid-template-columns:1fr}}

/* ---- 20. TEXT/PICTURE — Light Blue Card (bold H2 above; blue card 58/42, navy H3 + checklist + image) ---- */
.bluecard-wrap h2{text-align:center;margin-bottom:36px}
.bluecard{background:var(--blue-card);border-radius:10px;padding:48px;display:grid;grid-template-columns:58fr 42fr;gap:44px;align-items:start;max-width:1120px;margin:0 auto}
.bluecard h3{color:var(--navy);margin-bottom:16px}
.bluecard p{font-size:16px}
.bluecard img{width:100%;aspect-ratio:403/551;object-fit:cover;object-position:50% 50%;border-radius:10px;display:block} /* portrait crop matching live box */
/* Compact variant — lighter fill, tighter geometry, text-first 40/60 split. Was an
   inline-style copy-paste on two pages (audit G13/I15) whose inline grid could not be
   collapsed by any media query; catalogued as a class per Decision #20. */
.bluecard.compact{background:var(--blue-card);border-radius:16px;grid-template-columns:40fr 60fr;gap:32px;padding:36px}
@media(max-width:900px){.bluecard,.bluecard.compact{grid-template-columns:1fr;gap:28px;padding:32px}}

/* ---- 21b. RING-DOT LIST (grey target/ring-dot marker — multi-purpose text styled list) ---- */
.dotlist{list-style:none;margin:18px 0 0;padding:0}
.dotlist li{position:relative;padding-left:34px;margin-bottom:14px;font-size:16px}
.dotlist li::before{content:"";position:absolute;left:2px;top:6px;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle, var(--body) 0 2.3px, transparent 2.3px 4.6px, var(--body) 4.6px 6.2px, transparent 6.6px)}

/* ---- 21. STYLED CHECKLIST (orange outline checkmark, 20px) ---- */
.checklist{list-style:none;margin:16px 0 0;padding:0}
.checklist li{position:relative;padding-left:30px;margin-bottom:12px;font-size:15px}
.checklist li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:7px;border-left:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);transform:rotate(-45deg)} /* orange check, no circle */

/* Vertical Steps reuse .reasons/.reason; inter-step CTA = a .center wrapper holding a .btn */

/* ---- 22. SUBSCRIBE FORM BLOCK (centered H2 + short para + form card) ---- */
.formblock{text-align:center}
.formblock h2{margin-bottom:12px}
.formblock p{max-width:600px;margin:0 auto 28px;font-size:16px}

/* ---- 16. FOOTER (black) ---- */
footer{background:var(--black);color:#9a9a9c;font-size:14px;padding:64px 0 36px}
.frow{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start;padding-bottom:36px}
footer .logo img{height:64px;margin-bottom:20px;display:block;filter:brightness(0) invert(1)} /* force white */
.social{display:flex;gap:12px}
.social a{width:34px;height:34px;border-radius:50%;background:#2a2a2c;display:grid;place-items:center;color:#cfcfcf;transition:.2s}
.social a:hover{background:var(--orange);color:#fff}
.social svg{width:16px;height:16px;fill:currentColor}
.fcol{display:flex;gap:14px;align-items:flex-start}
.fcol .ic{flex:none;width:34px;height:34px;border-radius:50%;background:#2a2a2c;display:grid;place-items:center}
.fcol .ic svg{width:16px;height:16px;stroke:#cfcfcf;fill:none;stroke-width:1.8}
.fcol b{color:#fff;font-weight:600;display:block;margin-bottom:3px}
.fdiv{border-top:1px solid #2a2a2c;margin:0 0 26px}
.disc{font-size:14px;color:#8a8a8c;max-width:90ch;margin:0 auto 28px;line-height:1.7}
.legal{font-size:12.5px;color:#8a8a8c;line-height:1.9}  /* 5.64:1 on the footer black; #6f6f71 was 3.88:1 */
.legal a{color:#9a9a9c;text-decoration:underline}
@media(max-width:900px){.frow{grid-template-columns:1fr;gap:28px}}

/* ---- 24. HUB additions (Corporate hub) ---- */
/* Path selector — 2-column triad with orange title links */
.triad.two{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}
/* Collapse must live AFTER the base rule above: equal specificity means source order
   decides, and the shared .triad collapse in §6 is earlier in the sheet (that bug shipped). */
@media(max-width:900px){.triad.two{grid-template-columns:1fr}}
.triad.two h3 a{color:var(--orange)}
.triad.two h3 a:hover{color:var(--orange-deep)}
/* Path selector — 3-column triad with two-tone title links (ink base + orange lead word) */
.triad h3 a{color:var(--ink)}
.triad h3 a .hl{color:var(--orange-text)}
/* CTA-soft (guessbox) with two stacked buttons on the right — equal width, aligned */
.guessbox .btns{display:flex;flex-direction:column;gap:12px;flex:none;align-items:stretch}
.guessbox .btns .btn{width:100%;justify-content:center}
@media(max-width:900px){.guessbox .btns{width:100%}}
/* CTA-bottom (ready) navy box with two side-by-side buttons */
.ready .btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ---- 25. HERO dual-CTA (primary + secondary outline, side by side) ---- */
.hero-inner .hbtns{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:12px}

/* ---- 26. PRICING — 2-tier tabbed (Single / Couple toggle) ---- */
.pricingblock h2{text-align:center;margin-bottom:8px}
.pricetabs{display:flex;justify-content:center;margin:26px auto 46px}
.pricetabs button{font-family:inherit;font-size:12px;font-weight:500;letter-spacing:1px;color:var(--body);
  background:none;border:0;padding:10px 35px;cursor:pointer;border-radius:4px;transition:.15s}
.pricetabs button:first-child{border-right:1px solid var(--line)}
.pricetabs button.on{background:var(--blue-card);color:var(--navy);font-weight:600}
.pricecards{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:920px;margin:0 auto;align-items:stretch}
.pricecards[hidden]{display:none}
.pcard{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:44px 40px 40px;display:flex;flex-direction:column;text-align:center}
.pcard .icoball{margin:0 auto 26px}
.pcard .ptier{font-size:24px;color:var(--body);font-weight:400;text-transform:uppercase;margin-bottom:8px}
.pcard .pamt{color:var(--navy);font-size:40px;font-weight:400;line-height:1;margin-bottom:24px}
.pcard .pamt sup{font-size:20px;font-weight:400;top:-.55em;margin-right:1px}
.pcard .pwho{font-style:italic;font-size:15px;color:var(--body);line-height:1.6;margin-bottom:26px}
.pcard .checklist{text-align:left;margin:0}
.pctawrap{text-align:center;margin-top:44px}
@media(max-width:900px){.pricecards{grid-template-columns:1fr}}

/* ---- 27. BENEFIT GRID 2x2 (icon + rule + text, light-grey cards) ---- */
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px}
.benefit-card{background:var(--band);border-radius:10px;padding:26px 30px;
  display:grid;grid-template-columns:auto 1px 1fr;gap:24px;align-items:start}
.benefit-card .bic svg{width:30px;height:30px;stroke:var(--orange);fill:none;stroke-width:1.8;display:block}
.benefit-card .brule{background:var(--line);align-self:stretch;min-height:100%}
.benefit-card h3{font-size:19px;color:var(--ink);margin-bottom:8px;line-height:1.3}
.benefit-card p{font-size:14px;color:var(--body);margin:0;line-height:1.6}
@media(max-width:900px){.benefit-grid{grid-template-columns:1fr}}

/* ---- 23. v1.2 — INCORPORATION CONVERT additions ---- */
/* H3 sub-head inside a Picture/Text text column (e.g. membership credit block) */
.pt .txt h3{font-size:24px;margin:0 0 14px;line-height:1.3}
/* Pricing — No-CTA variant (questionnaire-based convert): no per-card button, so tighten card bottom */
.pricing.nocta .price-card ul{margin-bottom:0}
/* Pricing — Grey band, left-aligned head, white cards (4px radius, NO shadow), no per-card CTA — matches live incorporation pricing */
.pricing-band{background:var(--band)}
.pricing-band .eyebrow{text-align:left}
.pricing-band h2{text-align:left;margin-bottom:46px}
.pricing-band .price-card{background:#fff;border:0;box-shadow:none;border-radius:4px}
.price-pop{display:flex;align-items:center;height:24px;margin-bottom:14px}  /* reserved on all cards so tier rows align; star only on the featured one */
.price-pop svg{width:22px;height:22px;fill:#aebccf}
/* Plain disc bullets inside a prose text block */
.prose ul{margin:12px 0;padding-left:22px;font-size:16px}
.prose li{margin-bottom:8px}

/* ---- 28. v1.4 — Pricing note stack (multi-paragraph notes below a pricing band; e.g. divorce credit/retainer/disbursements) ---- */
.pricenotes{max-width:1120px;margin:40px auto 0}
.pricenotes p{font-size:15px;margin-bottom:14px}
.pricenotes h3{margin:32px 0 14px}

/* ---- 29. THANK-YOU / utility page (centered H1 over left-aligned prose body; noindex utility pages) ---- */
.thankyou{padding:110px 0 90px}
.thankyou h1{text-align:center;font-size:46px;line-height:1.2;margin-bottom:44px}
.thankyou .body{max-width:780px;margin:0 auto}
.thankyou .body p{font-size:17px;margin-bottom:1.2em;line-height:1.7}
.thankyou .body h3{font-size:22px;color:var(--ink);margin:1.5em 0 .35em}
.thankyou .body a{color:var(--orange-text);text-decoration:underline}
@media(max-width:900px){.thankyou h1{font-size:34px}}

/* ---- 30. AREAS OF LAW dropdown (two-level flyout; matches live Thrive menu) ---- */
nav .has-sub{position:relative}
nav .submenu,nav .flyout{display:block;position:absolute;list-style:none;margin:0;padding:0;background:#fff;border:1px solid #b4b4b4;box-shadow:0 0 9px 1px rgba(0,0,0,.15);min-width:204px;opacity:0;visibility:hidden;transition:opacity .14s;z-index:70;text-transform:none;letter-spacing:normal}
nav .submenu{top:100%;right:0}
nav .has-sub:hover>.submenu,nav .has-sub:focus-within>.submenu{opacity:1;visibility:visible}
nav .submenu li,nav .flyout li{position:relative;display:block}
nav .submenu a,nav .flyout a{display:block;font-size:13px;font-weight:400;line-height:26px;padding:2px 30px 2px 15px;color:#6A6B6C;white-space:nowrap}
nav .submenu>li>a{color:var(--navy)}
nav .submenu a:hover,nav .flyout a:hover{background:var(--band);color:var(--orange)}
nav .has-flyout>a::after{content:"\203A";position:absolute;right:14px;top:1px;color:#9a9a9a;font-size:15px}
nav .flyout{top:-1px;left:100%;min-width:236px}
nav .has-flyout:hover>.flyout,nav .has-flyout:focus-within>.flyout{opacity:1;visibility:visible}
@media(max-width:900px){nav .submenu,nav .flyout{display:none}}


/* ---- 31. MOBILE NAV (hamburger + accordion; <=900px) ---- */
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:6px;color:var(--navy)}
.mnav{display:none}
@media(max-width:900px){
 .navtoggle{display:block}
 .mnav{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 22px 30px rgba(0,0,0,.12);max-height:0;overflow:hidden;transition:max-height .28s ease;z-index:80}
 header.nav-open .mnav{max-height:86vh;overflow-y:auto}
 .mnav>ul{list-style:none;margin:0;padding:4px 0}
 .mnav>ul>li{border-bottom:1px solid var(--line)}
 .mnav .mcat,.mnav>ul>li>a{width:100%;text-align:left;background:none;border:0;font-family:Montserrat;font-weight:600;font-size:15px;color:var(--navy);padding:15px 22px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;text-transform:uppercase;letter-spacing:.03em;text-decoration:none}
 .mnav .mnav-phone{padding:0}
 .mnav .mnav-phone>span{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 22px;color:var(--orange)}
 .mnav .mnav-phone svg{width:18px;height:18px;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .mnav .mcat::after{content:"+";font-size:22px;font-weight:400;color:var(--orange);line-height:1}
 .mnav>ul>li.open .mcat::after{content:"\2013"}
 .mnav ul ul{list-style:none;margin:0;padding:0 0 10px;display:none}
 .mnav>ul>li.open>ul{display:block}
 .mnav ul ul a{display:block;font-size:14px;font-weight:400;color:var(--body);padding:9px 22px 9px 36px;text-transform:none;letter-spacing:normal}
 .mnav ul ul a:hover{color:var(--orange)}
}

/* ---- 32. TRUST: LAWYER BIO CARD + REVIEW RATING LINE (2026-07, Decision #41) ---- */
/* One face, one paragraph, one link. Sits directly after the reviews section on hubs
   and Convert pages. No credential badges by design (Evan: credentials persuade only
   when scarce); the service record lives in the sentence, not a chip. */
.biocard{display:flex;gap:30px;align-items:center;max-width:920px;margin:0 auto;background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:34px 38px}
.biocard img{width:132px;height:132px;border-radius:50%;object-fit:cover;flex:none}
.biocard h3{font-size:22px;color:var(--navy);margin-bottom:6px}
.biocard p{font-size:15px;margin:0 0 10px}
.biocard .more{font-weight:600;color:var(--orange-text)}
.biocard .more:hover{color:var(--navy)}
@media(max-width:900px){.biocard{flex-direction:column;text-align:center;padding:28px 22px}.biocard img{width:120px;height:120px}}
/* Heroless page opening (About page): give the h1 a real size (base h1 has none outside .hero).
   .prose.pagehead widens to 920px so its left edge ALIGNS with a following .pt.even block
   (900 vs 920, both centered, put the intro 10px further right — it read as a stray indent). */
.pagehead h1{font-size:46px;margin-bottom:14px}
.prose.pagehead{max-width:920px}
@media(max-width:900px){.pagehead h1{font-size:34px}}
/* Text-heavy Picture/Text: same 920px footprint as .pt.even but ~60/40 in the text's
   favour — for portrait/headshot images that shouldn't take half the row. */
.pt.wide-text{grid-template-columns:1.5fr 1fr}
/* Stack: several blocks flowing inside ONE section, 64px apart — instead of stacking
   whole 96px-padded sections, which doubles into ~200px voids between short blocks. */
.stack>*+*{margin-top:64px}
/* Aggregate rating line under the reviews H2. The star glyph is decorative. */
.ratingline{font-size:15px;color:var(--body);margin:-6px 0 0}
.ratingline b{color:var(--ink)}
.ratingline .star{color:var(--orange)}

/* ---- 33. v1.5 — PRICING BAND: featured tier, badge, unit suffix, kind label ---- */
/* §23's .pricing-band strips borders and shadows from .price-card so the three tiers read as
   ONE flat set of peers. A featured tier is not a peer, so it earns emphasis by being the only
   card that breaks the set. This matters more than it looks: the band is --band #f6f7f8 and the
   cards are #fff, roughly a 1.5% luminance step, so a card has almost no edge to begin with.
   Below 900px .pricing collapses to one column and there is no neighbour left to compare
   against, which is why the ring, not the size, is the load-bearing cue there (61% mobile). */
/* Recommendation badge. Height is EXACTLY the 24px .price-pop already reserves on every card,
   so adding it shifts nothing and the tier rows stay aligned across all three. Navy, not
   orange: orange is the ACTION colour on this site, and a pill that reads as a button collects
   clicks that navigate nowhere and fire no GA4 event. Never wrap this in an <a>. */
.price-badge{display:inline-flex;align-items:center;height:24px;padding:0 12px;border-radius:12px;
  background:var(--navy);color:#fff;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap}
/* Featured card. The ring is an inset shadow, not a border, so it overrides §23's
   box-shadow:none on the same property and adds nothing to the layout box. The 18px overhang
   is paid straight back as padding, so .price-pop and .price-head sit at the IDENTICAL page
   position on all three cards - the alignment .price-pop exists to protect. */
.pricing.nocta .price-card.featured{box-shadow:inset 0 0 0 2px var(--navy);margin:-18px 0;padding:52px 30px}
.pricing.nocta .price-card.featured .price{color:var(--navy)}
/* Kind label above the tier row (Existence / Judgment / Partnership). Reuses .eyebrow rather
   than adding a class; scoped down because the section-level "Pricing" eyebrow must stay the
   louder one. Set on every card so the internal alignment holds. */
.price-card .eyebrow{font-size:11px;letter-spacing:.18em;margin-bottom:10px}
/* Per-period suffix ($1,500/yr). .price is align-items:flex-start, so .per opts out and
   bottom-aligns to the 40px numeral. .price is a nowrap flex row, so it can never break. */
.price .per{align-self:flex-end;font-size:14px;font-weight:400;color:var(--body);margin-bottom:3px}
/* MOBILE. .pricing is already 1 column here, so -18px top and bottom eats 36px out of the 30px
   grid gap and visually welds the featured card to its neighbours. Null it; the ring and badge
   carry the emphasis alone. Placed AFTER the base rule: equal specificity, source order
   decides, the same trap documented on .triad.two in §24. */
@media(max-width:900px){.pricing.nocta .price-card.featured{margin:0;padding:34px 30px}}
/* VERY NARROW (<=360px). .pricing's columns are 1fr, and a 1fr track cannot shrink below its
   content's min-content width. .price-head is a nowrap flex row, so "Registered" + "$5,000/yr"
   sets a 235px floor that pushes the CARD wider than the .wrap it sits in - it visibly breaks
   out of the container. Letting the head wrap drops the floor to its widest single child.
   Scoped to 360px, not 900px, because at 375px (the mobile width that actually matters) the
   cards fit exactly and tier-beside-price is the intended look. Applies to every .price-head,
   which is right: the divorce Convert page has longer tier names and the same latent break. */
@media(max-width:360px){.price-head{flex-wrap:wrap;gap:4px 12px}}