/* DetailBook marketing site — shared stylesheet.
   Implements MARKETING-SITE-DESIGN-RULES.md: tokens, nav, buttons, footer,
   and the article system used by every blog post.
   Marketing site only — the app and the booking page have their own systems. */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --pu:#667eea;
  --pu2:#764ba2;
  --grad:linear-gradient(135deg,#667eea,#764ba2);
  --ink:#15131F;
  --body:#3F4451;
  --mute:#6B7280;
  --line:#E7E5EE;
  --tint:#F6F5FB;
  --amber:#F0A72A;
  --dark:#12101F;
  color-scheme:light only;
}

html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:#fff;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--pu);text-decoration:none}
a:hover{color:var(--pu2)}

.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:12px 18px;z-index:2000;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ===== Nav =====
   Scoped to `body > nav`. A bare `nav{position:fixed}` also matches nested
   <nav> elements — the hero priority rail, prev/next blocks, contents rails —
   and pins them to the viewport.
   Lifted verbatim from styles.css so the blog and the homepage render the same
   nav — same markup, same class names, same 768px breakpoint. When the homepage
   moves onto this stylesheet, delete its copy in styles.css rather than editing
   this one, or the two will drift apart again. */
body > nav{position:fixed;top:0;width:100%;background:#F7F8FD;z-index:1000;border-bottom:1px solid #E5E7EB;transition:transform .3s ease;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}
body > nav.nav-hidden{transform:translateY(-100%)}
.nav-container{max-width:1200px;margin:0 auto;padding:1.25rem 2rem;display:flex;justify-content:space-between;align-items:center}
/* Inline, not block. styles.css leaves images inline, so the homepage logo sits on
   the text baseline and its container picks up a few px of descender space. This
   stylesheet sets img{display:block} globally, which removes that space and made
   the blog nav render a few px shorter. Reproducing the same conditions — inline
   image, same font-size and line-height — makes both compute to the same height. */
.logo{font-size:16px;line-height:1.6}
.logo a{display:inline}
.logo img{height:60px;width:auto;display:inline;vertical-align:baseline}
.nav-links{display:flex;gap:2.5rem;align-items:center}
.nav-links a{text-decoration:none;color:#1f2937;font-weight:500;font-size:15px;transition:color .3s}
.nav-links a:hover{color:#667eea}
.nav-links a[aria-current]{color:#667eea;font-weight:600}
.social-icons{display:flex;align-items:center;gap:.75rem}
.social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#eef2ff;color:#667eea;transition:all .3s ease}
.social-link:hover{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff!important;transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.3)}
.social-link svg{width:18px;height:18px}
.nav-login-mobile{display:none}
.nav-login-desktop{display:inline;text-decoration:none;color:#1f2937;font-weight:500;font-size:15px}
.nav-login-desktop:hover{color:#667eea}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:10px;z-index:1001}
.hamburger span{width:25px;height:3px;background:#667eea;transition:all .3s ease;border-radius:3px}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}
body.menu-open::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:999}

@media (max-width:768px){
  .nav-login-mobile{display:inline!important}
  .nav-login-desktop{display:none!important}
  .nav-container{padding:1rem 1.5rem}
  .logo img{height:50px!important}
  .hamburger{display:flex!important}
  .nav-links{display:none;position:fixed;top:0;right:-100%;width:280px;height:100vh;background:#fff;flex-direction:column;padding:100px 2rem 2rem;box-shadow:-5px 0 20px rgba(0,0,0,.1);z-index:1000;transition:right .3s ease;gap:0}
  .nav-links.active{display:flex;right:0}
  .nav-links a:not(.social-link){font-size:1.1rem;width:100%;padding:.75rem 0;display:block}
  .nav-links .social-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#667eea;padding:0}
  .nav-links .social-link svg{width:20px;height:20px;fill:#fff;display:block}
  .nav-links .social-icons{display:flex;justify-content:center;width:100%;margin:1rem 0;gap:1.5rem}
}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:600;text-align:center;border-radius:11px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;cursor:pointer;border:0}
.btn-p{background:var(--grad);color:#fff;padding:.875rem 1.75rem;border-radius:10px;font-size:15px;box-shadow:0 4px 14px rgba(102,126,234,.3)}
.btn-p:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.4)}
.btn-lg{padding:16px 32px;font-size:16px;border-radius:13px}
.btn-w{background:#fff;color:#5B4FD6;box-shadow:0 10px 30px rgba(0,0,0,.26)}
.btn-w:hover{color:#4A3FC4;transform:translateY(-2px)}
.btn-o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-o:hover{color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}

/* ===== Reading progress ===== */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:1100;transition:width .1s linear}

/* ===== Article hero ===== */
.ahero{position:relative;padding:158px 0 190px;color:#fff;
  background:radial-gradient(820px 480px at 18% 0,rgba(118,75,162,.46) 0,transparent 64%),
             radial-gradient(640px 420px at 88% 12%,rgba(102,126,234,.3) 0,transparent 66%),
             linear-gradient(170deg,#171331,#0D0B18)}
.ahero .wrap{max-width:820px}
.crumb{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:22px}
.crumb a{color:rgba(255,255,255,.72)}
.crumb a:hover{color:#fff}
.kicker{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#D8D2FF;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.19);padding:8px 15px;border-radius:999px;margin-bottom:22px}
.ahero h1{font-size:47px;font-weight:800;letter-spacing:-.032em;line-height:1.08;text-wrap:balance}
.ameta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.ameta img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5)}
.ameta .who{font-size:14px;color:rgba(255,255,255,.82)}
.ameta .who a{color:#fff;font-weight:700}
.ameta .sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)}
.ameta .t{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55)}

/* Lead image lifted into the hero. Ratio locked so a portrait photo can't
   blow the layout out to two viewport heights. */
.lead-img{max-width:1140px;margin:-160px auto 0;padding:0 32px;position:relative;z-index:2}
.lead-img img{width:100%;aspect-ratio:1200/700;object-fit:cover;border-radius:20px;box-shadow:0 26px 60px rgba(18,16,31,.32)}

/* ===== Article shell: prose + sticky contents rail ===== */
.ashell{max-width:1140px;margin:0 auto;padding:56px 32px 96px;display:grid;grid-template-columns:minmax(0,720px) 232px;gap:64px;justify-content:center;align-items:start}
.acol{min-width:0;max-width:720px}
.prose{max-width:720px;min-width:0}

.toc{position:sticky;top:129px;font-size:13.5px}
.toc b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.toc ol{list-style:none}
.toc li{margin-bottom:2px}
.toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);color:var(--mute);line-height:1.45;font-weight:500}
.toc a:hover{color:var(--ink);border-left-color:#C9C4DC}
.toc a.on{color:var(--pu);border-left-color:var(--pu);font-weight:600}

/* ===== Prose ===== */
.prose h2{font-size:31px;font-weight:800;letter-spacing:-.028em;line-height:1.2;color:var(--ink);margin:56px 0 18px;text-wrap:balance;scroll-margin-top:129px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:24px;font-weight:700;letter-spacing:-.022em;line-height:1.25;color:var(--ink);margin:38px 0 14px;text-wrap:balance}
.prose h4{font-size:18.5px;font-weight:700;letter-spacing:-.018em;line-height:1.3;color:var(--ink);margin:28px 0 10px}
.prose p{font-size:18px;line-height:1.82;color:var(--body);margin-bottom:24px;text-wrap:pretty}
.prose p.speakable{font-size:19.5px;line-height:1.7;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 26px;padding-left:24px}
.prose li{font-size:18px;line-height:1.78;color:var(--body);margin-bottom:11px;text-wrap:pretty}
.prose li::marker{color:#B6B2C6}
/* Bold lead-ins are ink, not link-blue — only real links are blue. */
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--pu);font-weight:600}
.prose a:hover{color:var(--pu2);text-decoration:underline}
.prose img{border-radius:14px;margin:0 0 26px}
.prose hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:15.5px}
.prose th,.prose td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;color:var(--body)}
.prose thead th{background:var(--tint);color:var(--ink);font-weight:700}
.tablewrap{overflow-x:auto;margin:0 0 28px}

/* ===== Callouts ===== */
.prose .pro-tip{background:var(--tint);border-left:3px solid var(--pu);border-radius:0 14px 14px 0;padding:24px 28px;margin:0 0 30px}
.prose .pro-tip h4{margin:0 0 8px;color:var(--pu2);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.prose .pro-tip p{font-size:17.5px;margin-bottom:0}
.prose .pro-tip p+p{margin-top:14px}
.prose .pull-quote{border-left:3px solid var(--line);background:none;padding:6px 0 6px 26px;margin:34px 0;font-size:23px;font-weight:600;line-height:1.5;color:var(--ink);border-radius:0}
.prose .caution{background:#FEF6E7;border-left:3px solid var(--amber);border-radius:0 14px 14px 0;padding:24px 28px;margin:0 0 30px}
.prose blockquote{border-left:3px solid var(--line);padding-left:26px;margin:34px 0;font-size:23px;font-weight:600;line-height:1.5;color:var(--ink)}

/* ===== In-article CTA ===== */
.prose .cta-box{background:linear-gradient(150deg,#1B1733,#12101F);color:#fff;border-radius:20px;padding:40px;margin:44px 0;text-align:left;position:relative;overflow:hidden}
.prose .cta-box::before{content:"";position:absolute;top:-45%;right:-10%;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(169,155,255,.22),transparent 68%)}
.prose .cta-box>*{position:relative;z-index:1}
.prose .cta-box h3{color:#fff;font-size:25px;font-weight:800;letter-spacing:-.026em;margin:0 0 12px}
.prose .cta-box p{color:rgba(255,255,255,.74);font-size:16.5px;line-height:1.7;margin-bottom:22px}
.prose .cta-box a{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#5B4FD6;padding:15px 30px;border-radius:13px;font-weight:700;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.26);transition:transform .18s ease}
.prose .cta-box a:hover{color:#4A3FC4;transform:translateY(-2px);text-decoration:none}

/* ===== Author card / related / prev-next ===== */
.author{display:flex;gap:20px;align-items:flex-start;border:1px solid var(--line);border-radius:18px;padding:28px;margin:56px 0 0}
.author img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none}
.author b{display:block;font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.author p{font-size:15.5px;line-height:1.72;color:var(--body);margin:0}

.prose .related-guides{background:var(--tint);border-radius:18px;padding:32px;margin:40px 0 0}
.prose .related-guides h3{margin:0 0 16px;font-size:18.5px;letter-spacing:-.018em}
.prose .related-guides ul{padding-left:20px;margin-bottom:0}
.prose .related-guides li{font-size:15.5px;line-height:1.7;margin-bottom:9px}
.prose .related-guides a{font-weight:600}
.prose .about-detailbook{font-size:14.5px;line-height:1.72;color:var(--mute);border-top:1px solid var(--line);padding:22px 0 0;margin:40px 0 0;font-style:italic}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:40px 0 0}
.pn a{background:#fff;padding:24px 26px;display:flex;flex-direction:column;gap:7px;transition:background .18s}
.pn a:hover{background:var(--tint);text-decoration:none}
.pn span{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.pn b{font-size:16px;font-weight:700;letter-spacing:-.018em;line-height:1.34;color:var(--ink)}
.pn a:hover b{color:var(--pu)}
.pn a.next{text-align:right;align-items:flex-end}
.pn a.only{grid-column:1/-1}

/* ===== Footer =====
   Lives in css/footer.css, which every page loads. The homepage and the legacy
   pages do not load this file, so the footer cannot live here. */

/* ===== Breakpoints ===== */
@media (max-width:1024px){
  .ashell{grid-template-columns:minmax(0,720px);gap:0}
  .toc{display:none}
}
@media (max-width:980px){
  .ahero h1{font-size:38px}
}
@media (max-width:720px){
  .wrap,.navin{padding-left:20px;padding-right:20px}
  .ahero{padding:104px 0 150px}
  .ahero h1{font-size:30px}
  .lead-img{margin-top:-120px;padding:0 20px}
  .lead-img img{border-radius:14px}
  .ashell{padding:40px 20px 64px}
  .prose h2{font-size:24px;margin:44px 0 15px}
  .prose h3{font-size:20px}
  .prose p,.prose li{font-size:16.5px;line-height:1.78}
  .prose .pro-tip,.prose .caution{padding:20px 22px}
  .prose .cta-box{padding:28px;border-radius:16px}
  .prose .cta-box h3{font-size:21px}
  .prose .related-guides{padding:24px}
  .author{flex-direction:column;gap:14px;padding:24px}
  .pn{grid-template-columns:1fr}
  .pn a.next{text-align:left;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ===== Legacy article components =====
   These classes appear inside article bodies and were styled by each post's own
   inline <style> block before the restyle. Re-expressed on the design tokens:
   token colours, 18px radii, no drop shadows on content. */

/* Tables written before the shared .prose table styles existed. */
.prose .comparison-table,
.prose .cost-table,
.prose .compare-table{width:100%;min-width:520px;border-collapse:collapse;margin:0 0 28px;font-size:15.5px}
.prose .comparison-table th,
.prose .cost-table th,
.prose .compare-table th{background:var(--tint);color:var(--ink);font-weight:700;padding:12px 14px;text-align:left;border:1px solid var(--line)}
.prose .comparison-table td,
.prose .cost-table td,
.prose .compare-table td{padding:12px 14px;border:1px solid var(--line);color:var(--body);vertical-align:top}
.prose .comparison-table tbody th{background:var(--tint);white-space:nowrap}
.compare-wrap,.tablewrap{overflow-x:auto;margin:0 0 28px;-webkit-overflow-scrolling:touch}

/* Status marks inside comparison tables. */
.prose .check,.prose .yes{color:#0E7C50;font-weight:700}
.prose .cross,.prose .no{color:#C2410C;font-weight:700}
.prose .partial{color:#B45309;font-weight:700}

/* Key facts block — tint fill, purple left rule, definition list. */
.prose .key-facts{background:var(--tint);border-left:3px solid var(--pu);border-radius:0 14px 14px 0;padding:24px 28px;margin:0 0 30px}
.prose .key-facts h4{margin:0 0 12px;color:var(--pu2);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.prose .key-facts dl{margin:0}
.prose .key-facts dt{font-weight:700;color:var(--ink);font-size:16.5px;margin-top:12px}
.prose .key-facts dt:first-of-type{margin-top:0}
.prose .key-facts dd{margin:2px 0 0;color:var(--body);font-size:16.5px;line-height:1.7}

/* Worked example. Amber is reserved for caution, so this uses the purple family. */
.prose .scenario{background:var(--tint);border-left:3px solid var(--pu);border-radius:0 14px 14px 0;padding:24px 28px;margin:0 0 30px}
.prose .scenario h4{margin:0 0 10px;color:var(--pu2);font-size:17px;font-weight:700;letter-spacing:-.014em;text-transform:none}
.prose .scenario p{font-size:17.5px;margin-bottom:14px}
.prose .scenario p:last-child{margin-bottom:0}

/* Trailing italic note under an article. */
.prose .disclaimer{font-size:14.5px;line-height:1.72;color:var(--mute);border-top:1px solid var(--line);padding:22px 0 0;margin:40px 0 0;font-style:italic}

/* Monospace sample document. */
.prose .invoice-template{background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:28px;margin:0 0 30px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.7;white-space:pre-wrap;color:var(--body);overflow-x:auto}

/* Software review cards. */
.prose .software-card{border:1px solid var(--line);border-radius:18px;padding:28px;margin:0 0 24px;background:#fff}
.prose .software-card h3{margin-top:0}
.prose .rating{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--pu2)}

/* Checklist post: in-article contents block, numbered steps, summary card. */
.prose .post-contents{background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:26px 30px;margin:0 0 34px}
.prose .post-contents h4{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.prose .post-contents ol{margin-bottom:0;padding-left:22px}
.prose .post-contents li{font-size:16px;margin-bottom:6px}
.prose .post-contents a{font-weight:600}

.prose .checklist-card{background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:32px;margin:0 0 30px}
.prose .checklist-card h3{margin-top:0}
.prose .checklist-card ol{padding-left:22px;margin-bottom:18px}
.prose .checklist-card li{font-size:16.5px;margin-bottom:9px}

.prose .step-list{list-style:none;padding-left:0;counter-reset:step}
.prose .step-list li{counter-increment:step;position:relative;padding-left:56px;margin-bottom:26px}
.prose .step-list li::before{content:counter(step);position:absolute;left:0;top:1px;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}

@media (max-width:720px){
  .prose .key-facts,.prose .scenario,.prose .post-contents{padding:20px 22px}
  .prose .checklist-card,.prose .invoice-template,.prose .software-card{padding:22px}
  .prose .step-list li{padding-left:46px}
  .prose .step-list li::before{width:30px;height:30px;font-size:14px}
}

/* ===== Shared layout components =====
   Used by features.html and available to any marketing page.
   The hairline grid is one container with 1px dividers, not individually
   shadowed cards — a grid of floating boxes reads as widgets. */

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.grid>article{background:#fff;padding:30px 26px;display:flex;flex-direction:column;transition:background .18s ease}
.grid>article:hover{background:var(--tint)}
.grid h4{font-size:18.5px;font-weight:700;letter-spacing:-.018em;line-height:1.3;margin-bottom:9px}
.grid p{font-size:15.5px;line-height:1.72;color:var(--body);margin-bottom:20px;text-wrap:pretty}

/* Spec list — the alternative to a second card grid. */
.specs{border-top:1px solid var(--line)}
.spec{display:grid;grid-template-columns:200px 1fr auto;gap:44px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.spec-k{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--pu);padding-top:6px}
.spec h4{font-size:18.5px;font-weight:700;letter-spacing:-.018em;line-height:1.3;margin-bottom:7px}
.spec p{font-size:15.5px;line-height:1.72;color:var(--body);text-wrap:pretty;max-width:52ch}

/* Tier-3 chips. */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:15px;font-weight:600;color:var(--ink)}
.chip s{text-decoration:none;width:5px;height:5px;border-radius:50%;background:var(--pu);opacity:.45;flex:none}

@media (max-width:1024px){
  .grid{grid-template-columns:1fr 1fr}
  .spec{grid-template-columns:170px 1fr;gap:28px}
  .spec .seeit{grid-column:2}
}
@media (max-width:768px){
  .grid{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr;gap:8px}
  .spec-k{padding-top:0}
  .spec .seeit{margin-top:14px}
}

/* ===== Marketing page patterns =====
   Shared by the feature landing pages, and intended for pricing/about as they
   convert. Page-specific styling stays in that page's own stylesheet. */

/* Dark hero. Layer order, front to back:
     1-2  two off-centre purple glows — the depth
     3    a scrim, so text stays readable over any photo
     4    the optional photo, set per page via --hero-photo
     5    the base dark gradient, which shows when there is no photo
   Without --hero-photo the photo layer resolves to none and the hero is
   identical to before. */
.hero-dark{padding:158px 0 96px;color:#fff;
  background:radial-gradient(820px 480px at 18% 0,rgba(118,75,162,.46) 0,transparent 64%),
             radial-gradient(640px 420px at 88% 12%,rgba(102,126,234,.3) 0,transparent 66%),
             linear-gradient(100deg,rgba(13,11,24,.92) 0%,rgba(13,11,24,.82) 42%,rgba(13,11,24,.5) 78%,rgba(13,11,24,.4) 100%),
             var(--hero-photo,none) center 30%/cover no-repeat,
             linear-gradient(170deg,#171331,#0D0B18)}
.hero-dark .wrap{max-width:820px}
.crumb{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:20px}
.crumb a{color:rgba(255,255,255,.72)}
.crumb a:hover{color:#fff}
.eyebrow{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#D8D2FF;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.19);padding:8px 15px;border-radius:999px;margin-bottom:22px}
.hero-dark h1{font-size:47px;font-weight:800;letter-spacing:-.032em;line-height:1.08;text-wrap:balance}
.hero-dark .lead{font-size:17.5px;line-height:1.7;color:rgba(255,255,255,.74);max-width:62ch;margin-top:20px;text-wrap:pretty}
.hero-dark .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-dark .trust{margin-top:20px;font-size:13.5px;color:rgba(255,255,255,.58)}

/* Section shell + header: kicker -> h2 -> lead, in that order, every section. */
.s{padding:96px 0}
.s.tint{background:var(--tint)}
.sechead{margin-bottom:52px;max-width:740px}
.kicker{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pu);margin-bottom:14px}
.s h2{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.14;text-wrap:balance;color:var(--ink)}
.sechead .lead{font-size:17.5px;line-height:1.7;color:var(--body);margin-top:16px;text-wrap:pretty}

/* Prose block inside a marketing page — never full width. */
.narrow{max-width:720px}
.narrow p{font-size:17px;line-height:1.78;color:var(--body);margin-bottom:22px;text-wrap:pretty}
.narrow p:last-child{margin-bottom:0}
.narrow a{font-weight:600}

/* Numbered steps. Numbering is used because the content genuinely is a
   sequence — do not reach for it decoratively. */
.steps{display:flex;flex-direction:column;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.step{background:#fff;display:grid;grid-template-columns:auto 1fr;gap:22px;padding:28px 30px;align-items:start}
.step .num{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:15px;display:grid;place-items:center;flex:none}
.step h3{font-size:18.5px;font-weight:700;letter-spacing:-.018em;line-height:1.3;margin-bottom:7px;color:var(--ink)}
.step p{font-size:15.5px;line-height:1.72;color:var(--body);text-wrap:pretty}

/* FAQ — details/summary, first one open, plus rotates to a cross. */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 0;font-size:18px;font-weight:700;letter-spacing:-.018em;line-height:1.4;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--pu)}
.faq summary:focus-visible{outline:2px solid var(--pu);outline-offset:3px;border-radius:6px}
.faq .a{padding:0 0 24px;font-size:16.5px;line-height:1.75;color:var(--body);max-width:70ch;text-wrap:pretty}
.faq .a p{margin-bottom:14px}
.faq .a p:last-child{margin-bottom:0}

/* Closing CTA. */
.final{padding:0 0 96px}
.finalin{position:relative;overflow:hidden;border-radius:24px;padding:64px 48px;text-align:center;color:#fff;background:linear-gradient(150deg,#1B1733,#12101F)}
.finalin::before{content:"";position:absolute;top:-44%;right:-8%;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(169,155,255,.26),transparent 68%)}
.finalin>*{position:relative;z-index:1}
.finalin h2{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.14;max-width:22ch;margin:0 auto 24px;text-wrap:balance;color:#fff}
.finalin .trust{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.6)}

@media (max-width:980px){
  .hero-dark h1{font-size:38px}
  .s h2{font-size:32px}
  .finalin h2{font-size:29px}
}
@media (max-width:768px){
  .hero-dark{padding:118px 0 64px}
  .hero-dark h1{font-size:30px}
  .hero-dark .lead{font-size:16.5px}
  .hero-dark .cta .btn{width:100%}
  .s{padding:64px 0}
  .s h2{font-size:27px}
  .sechead{margin-bottom:36px}
  .step{grid-template-columns:auto 1fr;gap:16px;padding:22px}
  .faq summary{font-size:16.5px}
  .finalin{padding:40px 24px;border-radius:18px}
  .finalin h2{font-size:25px}
  .final{padding-bottom:64px}
}

/* Centred CTA below a section's content. */
.cta-center{display:flex;justify-content:center;margin-top:44px}
@media (max-width:768px){ .cta-center .btn{width:100%} }