/* ============================================================
   PracticePA — design system (Blended two-tone: navy → green)
   ============================================================ */
:root{
  --navy:#0f2c47; --navy-2:#0c2338; --deep:#0a1f33;
  --green:#0e8a4f; --green-d:#0b6b3e; --green-lt:#4fd08a; --teal:#0e9c8e;
  --gold:#d8b24a; --gold-2:#e7c765;
  --ink:#14232f; --mut:#5a6b7a; --bg:#ffffff; --wash:#eef2f1; --wash-2:#f4f7f6; --line:#e4ebe8; --card:#fff;
  --grad:linear-gradient(120deg,#0e8a4f,#0e9c8e);
  --hero:linear-gradient(150deg,#0f2c47 0%,#0c4046 48%,#0a5c33 100%);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--sans); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; background:var(--bg); overflow-x:hidden; }
/* grid/flex children default to min-width:auto and refuse to shrink — this keeps every layout inside the viewport */
.hero-in > *, .split > *, .fgrid > *, .steps > *, .tgrid > *, .pgrid > *{ min-width:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; }
.wrap{ max-width:1140px; margin:0 auto; padding:0 24px; }
.tnum{ font-variant-numeric:tabular-nums; }
.gt{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.btn{ display:inline-block; font-size:14px; font-weight:700; padding:11px 20px; border-radius:12px; border:0; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s; }
.btn:active{ transform:translateY(1px); }
.btn-grad{ background:var(--grad); color:#fff; box-shadow:0 12px 24px -12px rgba(14,138,79,.6); }
.btn-grad:hover{ box-shadow:0 16px 30px -14px rgba(14,138,79,.7); }
.btn-white{ background:#fff; color:var(--green-d); }
.btn-green{ background:var(--green); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost-l{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.34); }
.btn-lg{ padding:13px 24px; font-size:15px; }

.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.03em; padding:5px 12px; border-radius:999px; }
/* statement headings: big, 2-clause, gradient accent on the second clause */
h2.sec{ font-size:clamp(29px,3.6vw,44px); font-weight:800; letter-spacing:-.03em; line-height:1.08; text-align:center; margin:0 0 12px; text-wrap:balance; }
h2.sec .gt, h2.sec .u{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub{ text-align:center; color:var(--mut); font-size:17px; line-height:1.6; max-width:58ch; margin:0 auto 30px; }

/* section header block (eyebrow + statement heading + sub) */
.sec-head{ margin-bottom:32px; }
.sec-head.center{ text-align:center; }
.sec-head h2{ font-size:clamp(29px,3.6vw,44px); font-weight:800; letter-spacing:-.03em; line-height:1.08; margin:14px 0 0; text-wrap:balance; }
.sec-head h2 .gt{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sec-head p{ color:var(--mut); font-size:17px; line-height:1.6; margin:14px 0 0; max-width:60ch; }
.sec-head.center p{ margin-left:auto; margin-right:auto; }

.util{ background:var(--navy-2); color:#c3d3e0; font-size:12.5px; }
.util-in{ display:flex; justify-content:space-between; align-items:center; height:38px; }
.util .l{ display:flex; gap:20px; } .util .l span{ display:inline-flex; align-items:center; gap:6px; }
.util svg{ width:14px; height:14px; }
.util .r{ display:flex; gap:10px; }
.util .r a{ width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,.08); display:grid; place-items:center; }
.util .r a:hover{ background:rgba(255,255,255,.16); }

.nav{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); }
.brand b{ color:var(--green); }
.brand .mark{ width:30px; height:30px; border-radius:9px; background:var(--hero); display:grid; place-items:center; color:#fff; font-size:15px; font-weight:800; }
.brand-img{ height:34px; width:auto; max-width:200px; display:block; object-fit:contain; }
.nav-links{ display:flex; gap:24px; font-size:14px; }
.nav-links a{ color:var(--mut); font-weight:500; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-act{ display:flex; gap:10px; align-items:center; }
/* compact CTA beside the logo — mobile only (desktop already has the full button) */
.nav-mini{ display:none; }
.hamburger{ display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }
.hamburger span{ display:block; width:18px; height:2px; background:var(--ink); margin:3px auto; border-radius:2px; }
.mobile-menu{ display:none; }

.hero{ background:var(--hero); position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; width:520px; height:520px; right:-120px; top:-160px; border-radius:50%; background:radial-gradient(circle, rgba(79,208,138,.22), transparent 62%); }
.hero::after{ content:""; position:absolute; width:420px; height:420px; left:-140px; bottom:-180px; border-radius:50%; background:radial-gradient(circle, rgba(216,178,74,.14), transparent 60%); }
/* NB: .wrap sits on this same element — keep the 24px side padding or content hits the screen edge */
.hero-in{ position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:36px; align-items:center; padding:42px 24px 46px; }
.hero .eyebrow{ color:#0e2350; background:rgba(255,255,255,.88); }

/* HERO MESSAGE SLIDER — rotates the value proposition, not just a picture */
.mslider{ display:grid; }
.mslide{ grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
.mslide.on{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.s-tag{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:#cdebdb; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); padding:6px 13px; border-radius:999px; }
.s-tag .dot{ width:7px; height:7px; border-radius:50%; background:var(--green-lt); box-shadow:0 0 0 3px rgba(79,208,138,.28); }
.mslide h1, .mslide h2{ color:#fff; font-size:clamp(32px,4.4vw,52px); font-weight:800; line-height:1.05; letter-spacing:-.032em; margin:20px 0 14px; text-wrap:balance; }
.mslide h1 .u, .mslide h2 .u{ background:linear-gradient(100deg,#8FE0C0,#5fdc9b,#e7c765); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mslide p{ color:#d6e8df; font-size:16.5px; line-height:1.6; max-width:48ch; margin:0; }
.hero-trust{ display:flex; gap:22px; margin-top:18px; flex-wrap:wrap; }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:#dbeae2; font-weight:600; }
.hero-trust svg{ width:16px; height:16px; color:var(--green-lt); flex-shrink:0; }
.m-dots{ display:flex; gap:7px; margin-top:24px; }
.m-dots button{ width:7px; height:7px; border-radius:50%; border:0; background:rgba(255,255,255,.30); cursor:pointer; padding:0; transition:width .3s, background .3s; }
.m-dots button.on{ width:22px; border-radius:5px; background:var(--green-lt); }

/* HIGHLIGHTS strip */
.highlights{ background:linear-gradient(180deg,#fff,var(--wash-2)); border-bottom:1px solid var(--line); }
.hl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:26px 24px; }
.hl{ display:flex; gap:13px; align-items:flex-start; min-width:0; }
.hl .hi{ width:44px; height:44px; border-radius:12px; background:var(--cg); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 9px 18px -7px var(--cshadow); }
.hl .hi svg{ width:22px; height:22px; }
.hl .ht{ font-weight:700; font-size:15px; letter-spacing:-.01em; }
.hl .hs{ font-size:13px; color:var(--mut); margin-top:4px; line-height:1.45; }
.hero h1{ color:#fff; font-size:clamp(31px,4.5vw,48px); font-weight:800; line-height:1.04; letter-spacing:-.03em; margin:16px 0 14px; text-wrap:balance; max-width:15ch; }
.hero h1 .hl{ color:var(--gold-2); }
.hero .lead{ color:#dbeae2; font-size:16.5px; line-height:1.6; max-width:46ch; margin:0; }
.ticks{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; }
.ticks span{ display:inline-flex; align-items:center; gap:7px; color:#eafaf3; font-size:13.5px; font-weight:600; }
.ticks .c{ width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:11px; }
.hero-cta{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.hero .fine{ color:#bcd6cc; font-size:13px; margin-top:14px; }

.dash{ background:#fff; border:1px solid #dcece5; border-radius:18px; padding:16px; box-shadow:0 44px 90px -44px rgba(6,40,44,.7); max-width:100%; min-width:0; }
.dtop{ display:flex; gap:12px; margin-bottom:14px; }
.kpi{ flex:1; border-radius:13px; padding:13px; color:#fff; }
.kpi.k1{ background:linear-gradient(135deg,#12a866,#0b7a45); } .kpi.k2{ background:linear-gradient(135deg,#1a4f78,#0f2c47); } .kpi.k3{ background:linear-gradient(135deg,#0e9c8e,#0b6f65); }
.kpi .k{ font-size:10.5px; opacity:.92; text-transform:uppercase; letter-spacing:.06em; }
.kpi .v{ font-size:23px; font-weight:800; margin-top:3px; }
.dpanel{ border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.dpanel .pt{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; }
.dpanel .pt span{ font-size:11px; font-weight:600; color:var(--mut); }
.drow{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line); font-size:13px; }
.drow:last-child{ border-bottom:0; }
.dot{ width:8px; height:8px; border-radius:50%; }
.dot.due{ background:var(--gold); } .dot.ok{ background:var(--green); } .dot.late{ background:#f2617a; }
.drow .cn{ font-weight:700; } .drow .cn small{ color:var(--mut); font-weight:500; display:block; font-size:11.5px; }
.drow .dt{ font-family:var(--mono); font-size:12px; color:var(--mut); }

.block{ padding:40px 0; }
.block.wash{ background:var(--wash); }

/* Hero SLIDER — auto-rotating carousel of distinct smart panels */
.hcard{ padding:18px; }
.hc-top{ display:flex; align-items:center; justify-content:space-between; }
.hc-title{ font-weight:800; font-size:15.5px; letter-spacing:-.01em; }
.hc-sub{ font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.06em; margin-top:1px; }
.hc-badge{ font-size:11px; font-weight:800; color:#0c2338; background:var(--gold-2); padding:4px 10px; border-radius:999px; }
.hslider{ position:relative; min-width:0; }
.hs-win{ overflow:hidden; min-width:0; }
.hs-track{ display:flex; transition:transform .55s cubic-bezier(.65,0,.2,1); }
.hs-slide{ flex:0 0 100%; max-width:100%; min-width:0; min-height:250px; }

/* Slide 1 — deadline calendar */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin:12px 0 6px; }
.cal-wd{ font-size:9px; text-transform:uppercase; color:var(--mut); text-align:center; font-weight:700; letter-spacing:.04em; padding-bottom:2px; }
.cal-d{ position:relative; height:32px; display:grid; place-items:center; font-size:11.5px; color:var(--ink); border-radius:8px; font-variant-numeric:tabular-nums; }
.cal-d.mut{ color:#c2ccd6; }
.cal-d.today{ background:var(--hero); color:#fff; font-weight:800; }
.cal-d .cd{ position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; }
.cal-d .cd.due{ background:var(--gold); } .cal-d .cd.ok{ background:var(--green); } .cal-d .cd.late{ background:#f2617a; }
.cal-legend{ display:flex; gap:14px; justify-content:center; font-size:10.5px; color:var(--mut); margin-top:4px; }
.cal-legend span{ display:inline-flex; align-items:center; gap:5px; }
.cal-legend i{ width:7px; height:7px; border-radius:50%; display:inline-block; }

/* Slide 2 — this-week agenda */
.agenda{ margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.agrow{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; }
.agrow .dot{ width:8px; height:8px; border-radius:50%; }
.agrow .cn{ font-weight:700; font-size:13px; } .agrow .cn small{ display:block; color:var(--mut); font-weight:500; font-size:11px; }
.chip{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.chip.due{ background:#faf3dd; color:#9a7b16; } .chip.ok{ background:#e2f3ec; color:var(--green-d); } .chip.late{ background:#fde7ec; color:#c4314b; }

/* Slide 3 — compliance ring */
.ringwrap{ margin-top:10px; text-align:center; }
.ring{ width:132px; height:132px; border-radius:50%; background:conic-gradient(var(--green) 0 353deg, #e4ebe8 353deg 360deg); display:grid; place-items:center; margin:6px auto 12px; }
.ring-in{ width:100px; height:100px; border-radius:50%; background:#fff; display:grid; place-items:center; }
.ring-in b{ font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1; } .ring-in span{ font-size:10px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.ring-stats{ display:flex; gap:10px; justify-content:center; }
.ring-stats div{ flex:1; border:1px solid var(--line); border-radius:12px; padding:9px; }
.ring-stats .v{ font-size:19px; font-weight:800; } .ring-stats .k{ font-size:10.5px; color:var(--mut); }

.hs-dots{ display:flex; gap:6px; justify-content:center; margin-top:14px; }
.hs-dots button{ width:7px; height:7px; border-radius:50%; border:0; background:var(--line); cursor:pointer; padding:0; transition:width .3s, background .3s; }
.hs-dots button.on{ width:20px; border-radius:5px; background:var(--grad); }

.features .eyebrow{ color:var(--green); background:#e2f3ec; margin:0 auto 14px; display:table; }
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fcard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 14px 30px -22px rgba(18,40,58,.3); transition:transform .18s, box-shadow .18s; }
.fcard:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -24px rgba(18,40,58,.4); }
.fcard .ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:20px; }
.fcard .ic svg{ width:23px; height:23px; }
.g1{ background:linear-gradient(135deg,#12a866,#0b7a45); } .g2{ background:linear-gradient(135deg,#1a4f78,#0f2c47); } .g3{ background:linear-gradient(135deg,#0e9c8e,#0b6f65); }
.g4{ background:linear-gradient(135deg,#f5b544,#ef8a4a); } .g5{ background:linear-gradient(135deg,#3a86c4,#2563a8); } .g6{ background:linear-gradient(135deg,#0e8a4f,#0e9c8e); }
.g7{ background:linear-gradient(135deg,#25c16a,#12a866); } .g8{ background:linear-gradient(135deg,#e0a53a,#c9822a); } .g9{ background:linear-gradient(135deg,#12507a,#0f2c47); }
.fcard h3{ margin:15px 0 6px; font-size:17px; letter-spacing:-.01em; }
.fcard p{ margin:0; font-size:13.5px; color:var(--mut); line-height:1.55; }

.pricing .eyebrow{ color:var(--gold); background:#faf3dd; margin:0 auto 14px; display:table; }
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.pcard{ border:1px solid var(--line); border-radius:20px; padding:26px; background:#fff; }
.pcard.fea{ border:0; background:linear-gradient(160deg,#0f2c47,#0a5c33); color:#e9f5ef; box-shadow:0 30px 60px -34px rgba(10,60,40,.6); transform:translateY(-6px); }
.pcard .pn{ font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--mut); }
.pcard.fea .pn{ color:var(--gold-2); }
.pcard .price{ font-size:34px; font-weight:800; letter-spacing:-.02em; margin:8px 0 2px; }
.pcard .pu{ font-size:13px; color:var(--mut); } .pcard.fea .pu{ color:#a9d0bd; }
.pcard ul{ list-style:none; padding:0; margin:18px 0; display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
.pcard li{ display:flex; gap:9px; align-items:flex-start; }
.pcard li .ck{ color:var(--green); font-weight:800; } .pcard.fea li .ck{ color:var(--gold-2); }
.pcard .btn{ width:100%; text-align:center; }
.pbadge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#0c2338; background:var(--gold-2); padding:3px 11px; border-radius:999px; margin-bottom:10px; }
.pnote{ text-align:center; color:var(--mut); font-size:13px; margin-top:22px; }

.clients{ text-align:center; }
.client-logos{ display:flex; gap:34px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:22px; opacity:.7; font-weight:800; font-size:20px; color:var(--navy); }

.firm-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 16px; margin-top:8px; }
.firm{ display:flex; flex-direction:column; width:88px; }
.firm .tile{ position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:12px; background:linear-gradient(160deg,#fff,#f5f9f7); display:grid; place-items:center; box-shadow:0 8px 18px -16px rgba(18,40,58,.35); transition:transform .16s, box-shadow .16s; }
.firm:hover .tile{ transform:translateY(-3px); box-shadow:0 12px 24px -16px rgba(18,40,58,.45); }
.firm .mono{ width:34px; height:34px; border-radius:10px; background:var(--hero); color:#fff; display:grid; place-items:center; font-weight:800; font-size:11.5px; letter-spacing:.02em; }
.firm .nm{ margin-top:7px; font-size:10px; line-height:1.28; font-weight:600; color:var(--ink); text-align:center; }

.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tcard{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
.tcard p{ font-size:14px; color:var(--ink); line-height:1.6; margin:0 0 16px; }
.tcard .who{ display:flex; align-items:center; gap:11px; }
.tcard .av{ width:38px; height:38px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:800; }
.tcard .who b{ font-size:14px; } .tcard .who span{ font-size:12.5px; color:var(--mut); display:block; }

.ctaband{ background:var(--hero); position:relative; overflow:hidden; }
.ctaband::after{ content:""; position:absolute; width:460px; height:460px; left:-120px; top:-160px; border-radius:50%; background:radial-gradient(circle, rgba(216,178,74,.16), transparent 62%); }
.ctaband-in{ position:relative; padding:38px 24px; text-align:center; }
.ctaband h2{ color:#fff; font-size:clamp(25px,3.4vw,34px); font-weight:800; letter-spacing:-.02em; margin:0 0 10px; }
.ctaband h2 .u{ color:var(--gold-2); }
.ctaband p{ color:#dbeae2; font-size:15.5px; margin:0 auto 22px; max-width:52ch; }

.page-hero{ background:var(--hero); position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; width:420px; height:420px; right:-120px; top:-160px; border-radius:50%; background:radial-gradient(circle, rgba(79,208,138,.2), transparent 62%); }
.ph-in{ position:relative; padding:34px 24px 36px; }
.ph-crumb{ color:#9fd0bb; font-size:13px; font-weight:600; margin-bottom:10px; }
.ph-crumb b{ color:#fff; }
.page-hero h1{ color:#fff; font-size:clamp(28px,4vw,42px); font-weight:800; letter-spacing:-.025em; margin:0 0 10px; text-wrap:balance; }
.page-hero h1 .u{ color:var(--gold-2); }
.page-hero p{ color:#cfe4d9; font-size:16px; max-width:60ch; margin:0; }

.faq-seo{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin-top:28px; border-bottom:1px solid var(--line); }
.fq{ border-top:1px solid var(--line); }
.fq summary{ list-style:none; cursor:pointer; padding:14px 2px; font-weight:600; font-size:15px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.fq summary::-webkit-details-marker{ display:none; }
.fq summary .pm{ width:22px; height:22px; border-radius:7px; background:#e2f3ec; color:var(--green); display:grid; place-items:center; flex-shrink:0; transition:transform .2s; }
.fq[open] summary .pm{ transform:rotate(45deg); }
.fq .a{ padding:0 2px 14px; font-size:13.5px; color:var(--mut); line-height:1.6; }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.bcard{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 12px 26px -20px rgba(18,40,58,.35); transition:transform .18s; display:flex; flex-direction:column; }
.bcard:hover{ transform:translateY(-4px); }
.bcard .thumb{ height:150px; }
.bcard .bcbody{ padding:20px; display:flex; flex-direction:column; flex:1; }
.bcard .cat{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--green); }
.bcard h3{ font-size:17px; margin:9px 0; }
.bcard p{ color:var(--mut); font-size:13.5px; margin:0; flex:1; }
.bcard .bmeta{ margin-top:14px; font-size:12.5px; color:var(--mut); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:6px; }
.step{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; position:relative; }
.step .n{ width:40px; height:40px; border-radius:12px; background:var(--hero); color:#fff; display:grid; place-items:center; font-weight:800; font-size:17px; }
.step h3{ margin:14px 0 6px; font-size:17px; letter-spacing:-.01em; }
.step p{ margin:0; font-size:13.5px; color:var(--mut); line-height:1.55; }
.step::after{ content:""; position:absolute; right:-13px; top:44px; width:22px; height:2px; background:var(--line); }
.steps .step:last-child::after{ display:none; }
.prose{ max-width:74ch; margin:0 auto; color:var(--ink); font-size:15px; line-height:1.75; }
.prose h2{ font-size:21px; font-weight:800; letter-spacing:-.01em; margin:30px 0 10px; }
.prose h3{ font-size:16px; font-weight:700; margin:22px 0 8px; }
.prose p{ margin:0 0 14px; color:var(--mut); }
.prose ul{ margin:0 0 14px; padding-left:20px; color:var(--mut); } .prose li{ margin-bottom:7px; }
.prose a{ color:var(--green-d); font-weight:600; }

.article.prose{ }
.article.prose h2{ font-size:23px; } .article.prose h3{ font-size:18px; }
.article.prose img{ border-radius:12px; margin:18px 0; }
.article.prose blockquote{ border-left:3px solid var(--green); margin:18px 0; padding:2px 0 2px 18px; color:var(--ink); font-style:italic; }

.pager{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.pg{ min-width:40px; text-align:center; padding:9px 14px; border-radius:11px; border:1px solid var(--line); background:#fff; font-size:14px; font-weight:600; color:var(--ink); }
.pg:hover{ border-color:var(--green); color:var(--green-d); }
.pg.active{ background:var(--grad); color:#fff; border:0; }
.pg.disabled, .pg.dots{ color:var(--mut); background:transparent; border-color:transparent; cursor:default; }

.card-soft{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:0 20px 44px -30px rgba(18,40,58,.3); }
.field{ margin-bottom:14px; } .field.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.field input, .field textarea, .field select{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:11px; font-size:14px; font-family:inherit; color:var(--ink); background:#fff; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--green); }
.form-ok{ background:#e2f3ec; color:var(--green-d); border:1px solid #c7e6d5; border-radius:11px; padding:12px 14px; font-size:14px; margin-bottom:16px; }
.err{ color:#c4314b; font-size:12.5px; margin-top:5px; }

.foot{ background:var(--deep); color:#9fb2c4; padding:40px 0 24px; font-size:14px; }
.foot .cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:28px; }
.foot .brand{ color:#fff; }
.foot p{ margin:12px 0 0; line-height:1.6; max-width:34ch; }
.foot h4{ color:#e7eef6; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px; }
.foot a{ color:#9fb2c4; display:block; margin-bottom:9px; } .foot a:hover{ color:#fff; }
.foot .soc{ display:flex; gap:10px; margin-top:14px; }
.foot .soc a{ width:32px; height:32px; border-radius:9px; background:#132b41; display:grid; place-items:center; margin:0; }
.foot .bar{ border-top:1px solid #17324a; margin-top:34px; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12.5px; color:#7890a6; }

@media (max-width:900px){
  .hero-in{ grid-template-columns:1fr; }
  .fgrid, .pgrid, .tgrid, .blog-grid, .faq-seo, .split, .steps{ grid-template-columns:1fr; }
  .hl-grid{ grid-template-columns:repeat(2,1fr); gap:18px 14px; }
  .step::after{ display:none; }
  .foot .cols{ grid-template-columns:1fr 1fr; }
  .dtop{ flex-direction:column; }
  .nav-links, .util{ display:none; }
  /* the bar keeps brand + a compact CTA + hamburger; the full CTAs move into the menu */
  .nav-act .btn{ display:none; }
  .nav-mini{ display:inline-block; margin-left:10px; margin-right:auto; padding:8px 13px; font-size:12.5px; border-radius:10px; white-space:nowrap; }
  .hamburger{ display:block; }
  .field.two{ grid-template-columns:1fr; }
  .mobile-menu.open{ display:block; background:#fff; border-bottom:1px solid var(--line); padding:8px 0 16px; box-shadow:0 18px 30px -22px rgba(18,40,58,.35); }
  .mobile-menu.open > a{ display:block; padding:13px 24px; color:var(--ink); font-weight:600; font-size:15.5px; border-bottom:1px solid var(--wash-2); }
  .mobile-menu.open > a:last-of-type{ border-bottom:0; }
  .mobile-menu.open > a.active{ color:var(--green-d); }
  .mm-cta{ display:flex; flex-direction:column; gap:10px; padding:14px 24px 4px; margin-top:6px; border-top:1px solid var(--line); }
  .mm-cta .btn{ display:block; width:100%; text-align:center; padding:13px 20px; font-size:15px; }
}
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto; } .fcard,.bcard,.btn{ transition:none; } }