/* Hallmark · genre: editorial · macrostructure: Long Document (content) / asymmetric editorial (marketing)
 * theme: custom (brand-anchored: paper oklch(97% .008 120) · ink oklch(24% .03 200) · accent lime oklch(66% .16 135))
 * fonts: Fraunces 600 display + Switzer body · nav: edge-hairline · footer: Ft1 masthead
 * design-system: design.md · designed-as-app
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 */
:root{
  --color-paper:   oklch(97% 0.008 120);
  --color-paper-2: oklch(94.5% 0.012 115);
  --color-rule:    oklch(87% 0.012 120);
  --color-neutral: oklch(52% 0.02 160);
  --color-muted:   oklch(40% 0.025 185);
  --color-ink:     oklch(24% 0.03 200);
  --color-ink-2:   oklch(31% 0.03 200);
  --color-accent:  oklch(66% 0.16 135);
  --color-accent-deep: oklch(52% 0.14 140);
  --color-focus:   oklch(60% 0.17 135);
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem; --space-md:1.5rem;
  --space-lg:2rem; --space-xl:3rem; --space-2xl:4.5rem; --space-3xl:7rem;
  --text-display: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --radius-img: 14px; --radius-btn: 10px;
}
html{overflow-x:clip}
body{overflow-x:clip;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:16.5px;line-height:1.6}
h1,h2,h3,.logo,.foot-brand,.of-h,.p-price,.price-big{font-family:var(--font-display);font-weight:600;font-style:normal;letter-spacing:-0.01em}
h2{font-size:clamp(1.9rem,2.6vw,2.6rem);line-height:1.12;color:var(--color-ink)}
h1{line-height:1.08}
em,i{font-style:italic}
h1 em,h2 em,h3 em{font-style:normal;color:var(--color-accent-deep)}

/* ── header: hairline, wordmark serif ── */
header{background:var(--color-paper);border-bottom:1px solid var(--color-rule);box-shadow:none}
.logo{font-size:21px;color:var(--color-ink);letter-spacing:-0.01em}
.logo b{color:var(--color-accent-deep);font-weight:600}
.nav-links{font-family:var(--font-body);font-weight:500;font-size:14.5px}
.nav-links a{color:var(--color-muted)}
.nav-links a:hover{color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:5px;text-decoration-thickness:2px}
.nav-call a{color:var(--color-ink)}
.lang{border-color:var(--color-rule);color:var(--color-muted)}

/* ── kickers: accent square, no shouting caps ── */
.sec-k{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--color-muted)}
.sec-k::before{content:"";display:inline-block;width:9px;height:9px;background:var(--color-accent);margin-right:9px;vertical-align:1px}

/* ── buttons: ink voice, accent as detail ── */
.btn{border-radius:var(--radius-btn);font-family:var(--font-body);font-weight:600;transition:background .18s var(--ease-out),transform .12s var(--ease-out)}
.btn-lime{background:var(--color-ink);color:var(--color-paper)}
.btn-lime:hover{background:var(--color-ink-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.btn-ghost{background:transparent;border:1px solid oklch(100% 0 0 / .55)}

/* ── hero ── */
.hero::after{background:linear-gradient(100deg,oklch(20% .04 200 / .92) 0%,oklch(20% .04 200 / .6) 45%,oklch(20% .04 200 / .12) 100%)}
.kicker{background:oklch(66% .16 135 / .18);border-color:oklch(66% .16 135 / .5);color:oklch(90% .07 130);font-weight:500}
.hero h1{font-weight:600}
.hero h1 em{color:oklch(80% .14 130)}
.hero-note{color:oklch(85% .03 140)}

/* ── dark bands: deep ink, not teal-flat ── */
.trust,.quote{background:oklch(26% .035 200)}
.trust b{font-family:var(--font-display);font-weight:600}
.of-teaser{background:oklch(26% .035 200);border-radius:var(--radius-img)}
.of-teaser .of-pill{background:var(--color-accent);color:oklch(18% .03 200);font-weight:700}
.of-teaser .btn{background:var(--color-paper);color:var(--color-ink)}
.of-teaser .btn:hover{background:var(--color-paper-2)}

/* ── cards → editorial tiles: hairlines, no gray boxes ── */
.cards{gap:26px 18px}
.card{background:transparent;border:0;border-top:1px solid var(--color-rule);border-radius:0;padding-top:14px;transition:none}
.card:hover{transform:none;box-shadow:none}
.card img{border-radius:var(--radius-img);transition:opacity .2s var(--ease-out)}
.card:hover img{opacity:.9}
.card div{padding:14px 2px 0}
.card h3{font-size:19px}
.card:hover h3{text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:2px;text-underline-offset:4px}
.card span{color:var(--color-accent-deep)}
.card p{color:var(--color-muted)}

/* ── steps / tiles / paths ── */
.step{background:transparent;border:0;border-top:1px solid var(--color-rule);border-radius:0;padding:18px 4px 0}
.step i{background:var(--color-ink);font-family:var(--font-display)}
.why{background:var(--color-paper-2)}
.checks li b{font-weight:650}
.tick{background:var(--color-accent);color:oklch(20% .04 200)}
.path{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-img)}
.path.best{border:2px solid var(--color-accent-deep);box-shadow:0 18px 46px oklch(24% .03 200 / .14)}
.path.best .p-chip{background:var(--color-accent);color:oklch(18% .03 200)}
.p-price{color:var(--color-ink)}
.path.best .p-price{color:var(--color-accent-deep)}
.p-5y{background:var(--color-paper-2);border-color:var(--color-rule)}
.path.best .p-5y{background:oklch(93% .04 130);border-color:oklch(80% .07 130)}
.verdict{border-left:3px solid var(--color-accent)}

/* ── tables: horizontal hairlines only ── */
.tbl,.prose2 table{border:0;border-radius:0;overflow:visible}
.tbl th{background:transparent;color:var(--color-ink);font-family:var(--font-body);font-weight:650;border-bottom:2px solid var(--color-ink);padding:12px 14px}
.tbl td,.prose2 td{border:0;border-bottom:1px solid var(--color-rule);padding:12px 14px}
.tbl tr td:nth-child(2){background:oklch(94% .03 130 / .5);font-weight:600}
.prose2 th{border:0;border-bottom:2px solid var(--color-ink);background:transparent;font-weight:650}

/* ── FAQ: rules, not boxes ── */
.faq details{border:0;border-top:1px solid var(--color-rule);border-radius:0;background:transparent;margin-bottom:0}
.faq details:last-child{border-bottom:1px solid var(--color-rule)}
.faq summary{font-family:var(--font-body);font-weight:600;font-size:16.5px;padding:18px 6px}
.faq summary::after{color:var(--color-accent-deep)}
.faq details p{padding:0 6px 20px;max-width:65ch}

/* ── forms ── */
.form{border-radius:var(--radius-img);box-shadow:0 24px 60px oklch(24% .03 200 / .25)}
.form input,.form select,.form textarea{border-color:var(--color-rule);background:var(--color-paper);border-radius:8px;font-family:var(--font-body)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--color-accent-deep)}
.f-note{color:var(--color-muted)}

/* ── hubs: index rows, not boxes ── */
.hub{display:block;max-width:840px}
.hub a{display:flex;align-items:baseline;justify-content:space-between;gap:18px;background:transparent;border:0;border-top:1px solid var(--color-rule);border-radius:0;padding:18px 4px;font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-0.01em;transition:none}
.hub a:hover{transform:none;box-shadow:none;color:var(--color-accent-deep)}
.hub a::after{content:"→";font-family:var(--font-body);font-weight:400;color:var(--color-accent-deep);flex:0 0 auto}
.hub a:last-child{border-bottom:1px solid var(--color-rule)}

/* ── projects grid ── */
.pfilters button{border-radius:8px;border-color:var(--color-rule);font-family:var(--font-body)}
.pfilters button.on{background:var(--color-ink);border-color:var(--color-ink)}
.pcard{background:transparent;border:0;border-radius:0}
.pcard img{border-radius:var(--radius-img)}
.pcard div{padding:10px 2px 0}
.pcard b{color:var(--color-accent-deep);font-weight:650;font-size:11.5px}

/* ── long-document content pages ── */
.doc-wrap{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:56px;align-items:start}
.doc-toc{position:sticky;top:92px;font-size:13.5px;border-top:1px solid var(--color-rule);padding-top:14px}
.doc-toc b{display:block;font-weight:650;margin-bottom:10px;color:var(--color-ink)}
.doc-toc a{display:block;color:var(--color-muted);text-decoration:none;padding:5px 0;line-height:1.4}
.doc-toc a:hover{color:var(--color-accent-deep)}
.prose2{max-width:none}
.prose2>*{max-width:65ch}
.prose2 h2{margin-top:var(--space-2xl);padding-top:var(--space-md);border-top:1px solid var(--color-rule)}
.prose2 h2::before{content:"";display:block;width:34px;height:3px;background:var(--color-accent);margin-bottom:14px}
.prose2 p,.prose2 li{color:var(--color-ink-2);font-size:16.5px;line-height:1.65}
.prose2 .lead{font-size:20px;line-height:1.55;color:var(--color-ink);max-width:34em}
.prose2 .lead::first-letter{font-family:var(--font-display);font-weight:600;font-size:3.1em;float:left;line-height:.82;padding:4px 10px 0 0;color:var(--color-accent-deep)}
.prose2 img{border-radius:var(--radius-img)}
.prose2 .fig-band{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:var(--space-xl) 0}
.prose2 .fig-band img{width:100%;height:300px;object-fit:cover;margin:0}
.prose2 .fig-wide{max-width:none;margin:var(--space-xl) 0}
.prose2 .fig-wide img{width:100%;height:420px;object-fit:cover;margin:0}
.prose2 ul li::marker{color:var(--color-accent-deep)}
.crumbs{color:var(--color-muted)}
.crumbs a:hover{color:var(--color-ink)}

/* ── footer: masthead band ── */
footer{background:oklch(22% .03 200);color:oklch(75% .02 150)}
footer h4{font-family:var(--font-body);font-weight:650;letter-spacing:.02em;color:oklch(92% .01 140)}
footer a{color:oklch(75% .02 150)}
footer a:hover{color:var(--color-paper);text-decoration:underline;text-decoration-color:var(--color-accent)}
.foot-brand{font-size:30px;font-weight:600;letter-spacing:-0.01em}
.foot-brand b{color:var(--color-accent)}
.legal{border-top:1px solid oklch(35% .02 180);color:oklch(58% .02 160)}

/* ── popup ── */
.of-card{border-radius:var(--radius-img)}
.of-pill2{background:var(--color-accent);color:oklch(18% .03 200)}
.of-btn{background:var(--color-ink);border-radius:var(--radius-btn);font-family:var(--font-body)}
.of-btn:hover{background:var(--color-ink-2)}
.of-tile{background:var(--color-paper-2);border-radius:10px}
.of-tile b{font-family:var(--font-display);font-weight:600}

/* ── mobile bar ── */
.mbar{border-top:1px solid var(--color-rule);background:var(--color-paper)}
.mbar .m-call{background:var(--color-ink)}
.mbar .m-quote{background:var(--color-accent);color:oklch(18% .03 200);font-weight:700}
.mbar .m-txt{background:var(--color-paper-2);color:var(--color-ink);border:1px solid var(--color-rule)}

/* burger */
.mnav{background:var(--color-paper)}
.mnav a{color:var(--color-ink);border-color:var(--color-rule)}
.mnav .mn-k{color:var(--color-accent-deep)}
.mnav .mn-call a{background:var(--color-ink)}
.mnav .mn-call a.lime{background:var(--color-accent);color:oklch(18% .03 200)}

@media(max-width:1100px){.doc-wrap{grid-template-columns:minmax(0,1fr)}.doc-toc{display:none}}
@media(max-width:600px){
  .prose2 .fig-band{grid-template-columns:minmax(0,1fr)}
  .prose2 .fig-band img,.prose2 .fig-wide img{height:230px}
  .foot-brand{font-size:24px}
}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* direct-answer block at top of guide and technology articles */
.prose2 .answer{
  background:#F4F7F2;
  border-left:3px solid var(--color-accent,#9BCB3B);
  border-radius:10px;
  padding:16px 20px;
  margin:0 0 22px;
}
.prose2 .answer p{
  margin:0 0 8px;
  font-size:17px;
  line-height:1.65;
  color:#2c3a30;
}
.prose2 .answer p:last-child{margin-bottom:0}
@media(max-width:600px){
  .prose2 .answer{padding:14px 16px;border-radius:8px}
  .prose2 .answer p{font-size:15.5px}
}