/* SafeNest marketing site — layout and component styles.
   Design tokens live in tokens.css. This file resolves the design-system
   components (Button, Icon, IconButton) into plain CSS. */

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:var(--pine-200);color:var(--ink-900)}
a{text-decoration:none}
img{max-width:100%}

/* ---------- shell ---------- */
.page{min-height:100vh;display:flex;flex-direction:column}
.wrap{max-width:1176px;margin:0 auto;padding-left:clamp(20px,5vw,48px);padding-right:clamp(20px,5vw,48px)}
main{flex:1}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface-page) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-hairline)}
.site-header .wrap{padding-top:14px;padding-bottom:14px;min-height:78px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.brand{display:flex;align-items:center;gap:12px}
.brand-word{display:grid;gap:5px}
.brand-name{font:300 22px/1 var(--font-display);letter-spacing:-0.01em;color:var(--text-strong)}
.brand-sub{font:500 9.5px/1 var(--font-text);letter-spacing:0.2em;text-transform:uppercase;color:var(--text-accent)}
.logo-dark{display:none}
[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:block}
.site-nav{display:flex;align-items:center;gap:28px;margin-left:auto;font:var(--text-small)}
.site-nav a{color:var(--text-muted);padding:6px 0;border-bottom:1px solid transparent;transition:var(--transition-control)}
.site-nav a:hover{color:var(--text-strong)}
.site-nav a[aria-current="page"]{color:var(--text-strong);border-bottom-color:var(--text-accent)}
@media (max-width:560px){
  .site-header .wrap{flex-wrap:nowrap;gap:12px;min-height:66px}
  .site-nav{gap:16px}
  .brand-name{font-size:19px}
  .brand img{width:28px;height:28px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h-lg);padding:0 20px;font:var(--weight-medium) var(--size-body)/1 var(--font-text);letter-spacing:0.01em;border-radius:var(--radius-sm);border:var(--border-width) solid var(--action-solid);background:var(--action-solid);color:var(--text-inverse);white-space:nowrap;cursor:pointer;transition:var(--transition-control)}
.btn:hover{background:var(--action-solid-hover);border-color:var(--action-solid-hover);color:var(--text-inverse)}
.btn:active{background:var(--action-solid-active);border-color:var(--action-solid-active)}
.btn-secondary{background:var(--surface-card);color:var(--text-body);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--action-quiet-hover);border-color:var(--pine-400);color:var(--text-body)}
.btn-inverse{background:var(--paper);color:var(--pine-900);border-color:var(--paper)}
.btn-inverse:hover{background:var(--paper-warm);border-color:var(--paper-warm);color:var(--pine-900)}
.btn svg{flex:none}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;transition:var(--transition-control)}
.icon-btn:hover{background:var(--action-quiet-hover);color:var(--text-body)}

.link-arrow{font:var(--weight-medium) 15px/1.4 var(--font-text);display:flex;align-items:center;gap:8px;width:max-content;border-bottom:1px solid var(--pine-200);padding-bottom:4px;color:var(--text-link);transition:var(--transition-control)}
.link-arrow:hover{border-bottom-color:currentColor;color:var(--text-link-hover)}

.email-plain{font:var(--text-small);color:var(--text-muted);user-select:text}

/* ---------- section scaffolding ---------- */
.band{border-top:1px solid var(--line-hairline)}
.band-sunken{background:var(--surface-sunken)}
.band-inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.sec{padding-top:clamp(64px,9vw,96px);padding-bottom:clamp(64px,9vw,96px)}
.sec-tall{padding-top:clamp(64px,9vw,104px);padding-bottom:clamp(64px,9vw,104px)}
.sec-hero{padding-top:clamp(56px,10vw,112px);padding-bottom:clamp(56px,8vw,88px)}
.sec-close{padding-top:clamp(56px,8vw,88px);padding-bottom:clamp(56px,8vw,88px)}

.sec-head{border-top:1px solid var(--line-emphasis);padding-top:20px;display:grid;gap:20px;margin-bottom:48px}
.sec-head-wide{margin-bottom:56px}
.band-inverse .sec-head{border-top-color:var(--line-inverse)}
.eyebrow{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-quiet)}
.eyebrow .num{color:var(--text-accent)}
.band-inverse .eyebrow{color:var(--text-inverse-muted)}
.band-inverse .eyebrow .num{color:var(--text-inverse)}
.eyebrow-plain{font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-quiet);margin:0 0 28px}

h1.display{font:300 clamp(40px,6vw,64px)/1.06 var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-strong);margin:0;max-width:21ch;text-wrap:balance}
h2.t1{font:300 clamp(30px,4vw,38px)/1.18 var(--font-display);letter-spacing:var(--tracking-title);color:var(--text-strong);margin:0;max-width:24ch;text-wrap:balance}
h2.t2{font:300 clamp(32px,4.4vw,48px)/1.12 var(--font-display);letter-spacing:var(--tracking-title);color:var(--text-strong);margin:0;max-width:22ch}
.band-inverse h2{color:var(--text-inverse)}
.lead{font:var(--text-lead);color:var(--text-body);margin:0;max-width:52ch;text-wrap:pretty}
.label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-quiet);margin:0}

/* ---------- hero ---------- */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:48px 72px;margin-top:56px;align-items:start}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}

.facts{margin:0;border-top:1px solid var(--line-emphasis)}
.facts > div{display:grid;grid-template-columns:9ch minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line-hairline)}
.facts dt{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-quiet);padding-top:3px}
.facts dd{margin:0;font:var(--text-small);color:var(--text-body)}

/* ---------- numbered problem list ---------- */
.numlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-hairline)}
.numlist li{display:grid;grid-template-columns:5ch minmax(0,1fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--line-hairline);align-items:baseline}
.numlist .n{font:300 21px/1 var(--font-display);color:var(--text-accent)}
.numlist p{font:300 clamp(20px,2.4vw,24px)/1.35 var(--font-display);color:var(--text-strong);margin:0;max-width:44ch;text-wrap:pretty}

/* ---------- capability grid ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:48px 64px}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px 64px}
.card{border-top:1px solid var(--line-strong);padding-top:20px;display:grid;gap:12px;align-content:start;min-width:0}
.card h3{font:var(--text-title-3);color:var(--text-strong);margin:0}
.card p{font:var(--text-default);color:var(--text-muted);margin:0;max-width:48ch;text-wrap:pretty}

/* ---------- principles (inverse) ---------- */
.principles{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-inverse)}
.principles li{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px 64px;padding:32px 0;border-bottom:1px solid var(--line-inverse)}
.principles h3{font:var(--text-title-3);color:var(--text-inverse);margin:0;max-width:30ch}
.principles p{font:var(--text-default);color:var(--text-inverse-muted);margin:0;max-width:52ch;text-wrap:pretty}

/* ---------- proof ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:48px 72px;align-items:start}
.proof-col{display:grid;gap:28px;align-content:start;min-width:0}
.figures{margin:0;border-top:1px solid var(--line-emphasis)}
.figures > div{display:grid;gap:10px;padding:24px 0;border-bottom:1px solid var(--line-hairline)}
.figures dd{margin:0;font:300 clamp(44px,5vw,56px)/1 var(--font-display);color:var(--text-strong)}
.figures dt{font:var(--text-small);color:var(--text-muted)}

/* ---------- results list (work page) ---------- */
.results{margin:0;border-top:1px solid var(--line-emphasis)}
.results > div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:8px 48px;padding:24px 0;border-bottom:1px solid var(--line-hairline);align-items:baseline}
.results dt{font:300 clamp(34px,4.2vw,46px)/1 var(--font-display);color:var(--text-strong)}
.results dd{margin:0;font:var(--text-default);color:var(--text-body);max-width:56ch}

/* ---------- misc blocks ---------- */
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:40px 72px}
.block{display:grid;gap:14px;align-content:start;min-width:0}
.block p{font:var(--text-default);color:var(--text-body);margin:0;max-width:56ch;text-wrap:pretty}
.pull{margin-top:64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px 48px;padding-top:32px;border-top:1px solid var(--line-strong)}
.pull p{font:300 clamp(22px,2.8vw,29px)/1.3 var(--font-display);color:var(--text-strong);margin:0;max-width:36ch;text-wrap:pretty}

.plainlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-emphasis);font:var(--text-default);color:var(--text-body)}
.plainlist li{padding:13px 0;border-bottom:1px solid var(--line-hairline)}
.flaglist li{display:flex;gap:16px;align-items:center;padding:16px 0}
.flaglist svg{color:var(--status-warn-fg);flex:none}

.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-emphasis);font:var(--text-small)}
.toc li{border-bottom:1px solid var(--line-hairline)}
.toc a{display:flex;gap:20px;padding:13px 0;color:var(--text-body)}
.toc a:hover{color:var(--text-accent)}
.toc .n{color:var(--text-accent)}

.econ{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:0 64px}
.econ > div{padding:24px 0;display:grid;gap:12px;align-content:start;min-width:0}
.econ .fig{font:300 clamp(40px,5vw,56px)/1 var(--font-display)}
.econ p{font:var(--text-small);margin:0;max-width:40ch}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{font:var(--text-small);color:var(--text-body);padding:8px 14px;border:1px solid var(--line-strong);border-radius:1px}

.close-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 64px}
.close-row .copy{display:grid;gap:16px;max-width:60ch}
.close-row .act{display:grid;gap:12px;justify-items:start}
.close-row p{font:var(--text-default);color:var(--text-muted);margin:0;text-wrap:pretty}

.contact-block{margin-top:56px;border-top:1px solid var(--line-emphasis);padding-top:28px;display:grid;gap:24px}
.contact-email{font:300 clamp(28px,4.4vw,48px)/1.1 var(--font-display);letter-spacing:-0.01em;color:var(--text-strong);user-select:text;overflow-wrap:anywhere}

/* ---------- footer ---------- */
.site-footer{background:var(--surface-inverse-deep);color:var(--text-inverse)}
.site-footer .wrap{padding-top:64px;padding-bottom:32px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:40px}
.foot-grid > div{display:grid;gap:12px;align-content:start;min-width:0}
.foot-brand{gap:16px!important}
.foot-brand .brand-name{color:var(--text-inverse)}
.foot-brand .brand-sub{color:var(--pine-200)}
.foot-brand p{font:var(--text-small);color:var(--text-inverse-muted);margin:0;max-width:32ch}
.foot-head{font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-inverse-muted)}
.site-footer a{font:var(--text-small);color:rgba(250,248,242,0.84);transition:var(--transition-control)}
.site-footer a:hover{color:var(--paper)}
.foot-note{font:var(--text-small);color:var(--text-inverse-muted)}
.foot-legal{margin-top:56px;padding-top:20px;border-top:1px solid var(--line-inverse);font:var(--text-caption);color:var(--text-inverse-muted)}