/* Landing page — follows website/DESIGN.md. Typography-led, hard-edged, no external requests. */
:root{
  --page-bg:#f4f4ef;--surface:#fff;--text:#111;--text-muted:#5c5c56;
  --border:rgba(17,17,17,.18);--border-strong:#111;--accent:#d8ff3e;
  --container:1360px;--gutter:clamp(16px,4vw,48px);
  --radius-sm:4px;--radius-md:8px;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-ui:cubic-bezier(.2,.8,.2,1);
  --section-xl:clamp(96px,13vw,220px);--section-lg:clamp(80px,10vw,180px);--section-md:clamp(64px,8vw,128px);
  --font:"Inter Tight","Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono","SFMono-Regular",Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--page-bg);color:var(--text);font-family:var(--font);font-size:18px;line-height:1.35;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.2em}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;box-shadow:0 0 0 5px var(--accent)}
.skip{position:absolute;top:-6rem;left:1rem;background:var(--text);color:var(--page-bg);padding:1rem;z-index:10}
.skip:focus{top:1rem}

.wrap{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--text-muted);margin:0}
.display,.headline,.medium{margin:0;font-weight:600}
.display{font-size:clamp(2.9rem,8.4vw,8.25rem);line-height:.9;letter-spacing:-.055em}
.headline{font-size:clamp(2.9rem,7vw,7rem);line-height:.92;letter-spacing:-.045em}
.medium{font-size:clamp(2.4rem,4.5vw,4.5rem);line-height:.96;letter-spacing:-.035em}
.body{max-width:32rem;margin:0}
.body+.body{margin-top:1em}
.lead{font-size:clamp(1.375rem,2vw,2rem);line-height:1.18;max-width:40rem;margin:0}
.rule{border:0;border-top:1px solid var(--border);margin:0}
.section{padding-block:var(--section-lg)}

/* controls */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7rem 1.35rem;border:1.5px solid var(--text);border-radius:var(--radius-sm);background:var(--text);color:var(--page-bg);font:inherit;font-weight:550;text-decoration:none;transition:background 180ms var(--ease-ui),color 180ms var(--ease-ui),border-color 180ms var(--ease-ui)}
.button:hover{background:var(--accent);color:var(--text)}
.button.secondary{background:transparent;color:var(--text)}
.button.secondary:hover{background:var(--text);color:var(--page-bg)}
.arrow{display:inline-block;transition:transform 180ms var(--ease-ui)}
a:hover>.arrow,.button:hover .arrow,.index-row:hover .arrow{transform:translateX(6px)}
.text-link{font-weight:550}

/* header */
.site-header{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;border-bottom:1px solid var(--border)}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:1.05rem;letter-spacing:-.03em;text-decoration:none}
.brand img{width:28px;height:28px}
.site-header nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2.25rem)}
.site-header nav a{text-decoration:none;font-size:1rem;padding-block:.75rem;min-height:44px;display:inline-flex;align-items:center}
.site-header nav a:hover{text-decoration:underline}
.site-header nav a.nav-cta{border:1.5px solid var(--text);border-radius:var(--radius-sm);padding-inline:1rem;min-height:44px;font-weight:550;transition:background 180ms var(--ease-ui),color 180ms var(--ease-ui)}
.site-header nav a.nav-cta:hover{background:var(--text);color:var(--page-bg);text-decoration:none}

/* hero */
.hero{min-height:min(88vh,980px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(48px,8vw,96px);padding-block:clamp(48px,7vw,96px) clamp(32px,4vw,56px)}
.hero-meta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:1.5rem;align-items:end}
.hero-copy{grid-column:7/-1}
.hero-tool{display:flex;align-items:stretch;border:2px solid var(--text);border-radius:var(--radius-md);min-height:72px;background:var(--surface)}
.hero-tool .tool-text{flex:1;display:flex;align-items:center;gap:.75rem;padding:0 1.25rem;font-size:clamp(1rem,1.6vw,1.375rem);min-width:0}
.hero-tool .dot{flex:none;width:10px;height:10px;background:var(--accent);border:1.5px solid var(--text);border-radius:50%}
.hero-tool .button{border-radius:0;border-width:0 0 0 2px;border-left:2px solid var(--text);padding-inline:clamp(1.25rem,3vw,2.5rem);font-size:clamp(1rem,1.6vw,1.25rem)}

/* proof / statement */
.statement .headline{grid-column:1/10}
.statement .body{grid-column:7/-1;margin-top:clamp(32px,5vw,72px)}
.facts{margin:clamp(48px,7vw,96px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid var(--text)}
.facts li{padding:clamp(20px,2.5vw,32px);min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.facts li+li{border-left:1.5px solid var(--text)}
.facts strong{font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1;letter-spacing:-.04em;font-weight:600}
.facts p{margin:0;max-width:20rem}

/* showcase — typography as the product explanation */
.showcase{background:var(--text);color:var(--page-bg)}
.showcase .label{color:rgba(244,244,239,.62)}
.showcase .headline{grid-column:1/-1}
.showcase .lead{grid-column:1/6;margin-top:clamp(32px,5vw,72px)}
.sample{grid-column:6/-1;margin-top:clamp(32px,5vw,72px)}
.sample-note{margin-top:12px}
.spaced{margin-top:1.5em}
.m-only{display:none}
.transcript{border:1.5px solid var(--page-bg);font-family:var(--mono);font-size:clamp(13px,1.2vw,16px);line-height:1.5}
.transcript>div{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;padding:16px 20px;border-top:1px solid rgba(244,244,239,.28)}
.transcript>div:first-child{border-top:0}
.transcript .time{color:rgba(244,244,239,.62)}
.transcript .q{background:var(--accent);color:var(--text)}
.transcript .q .time{color:var(--text)}
.transcript .quote{padding:2px 6px;margin:-2px -6px;background:var(--accent);color:var(--text)}

/* use-case index */
.index-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-bottom:clamp(40px,6vw,80px)}
.index-head .headline{grid-column:1/9}
.index{margin:0;padding:0;list-style:none}
.index-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid var(--border);padding:clamp(16px,2vw,24px) 0;font-size:clamp(2rem,5vw,4.5rem);line-height:1;letter-spacing:-.04em;font-weight:500;cursor:default;transition:background 180ms var(--ease-ui),padding 180ms var(--ease-ui)}
.index li:last-child .index-row{border-bottom:1px solid var(--border)}
.index-row .name{display:inline-block;transition:transform 200ms var(--ease-out)}
.index-row:hover .name{transform:translateX(10px)}
.index-row:hover{background:var(--accent)}
.index-row .num{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--text-muted);font-weight:400}

/* workflow */
.steps{margin:0;padding:0;list-style:none}
.step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;border-top:1px solid var(--border);padding-block:clamp(32px,5vw,64px)}
.step:last-child{border-bottom:1px solid var(--border)}
.step .step-num{grid-column:1/5;font-size:clamp(5rem,14vw,13rem);line-height:.8;letter-spacing:-.06em;font-weight:600;color:transparent;-webkit-text-stroke:1.5px var(--text);margin:0}
.step h3{grid-column:5/10;margin:0;font-size:clamp(2rem,4vw,3.75rem);line-height:.96;letter-spacing:-.04em;font-weight:600}
.step p.body{grid-column:10/-1;margin:0;padding-top:.5rem}
.workflow-head{margin-bottom:clamp(40px,6vw,80px)}

/* control (privacy) */
.control{background:var(--accent)}
.control .grid{row-gap:clamp(32px,5vw,64px)}
.control .headline{grid-column:1/9}
.control .col{grid-column:7/-1}
.control .label{color:var(--text)}

/* faq */
.faq-head{margin-bottom:clamp(40px,6vw,80px)}
.faq details{border-top:1px solid var(--border)}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:clamp(20px,2.4vw,28px) 0;font-size:clamp(1.375rem,2.5vw,2.25rem);line-height:1.1;letter-spacing:-.03em;font-weight:500;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-weight:400;transition:transform 250ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--text-muted)}
.faq .answer{max-width:40rem;padding:0 0 clamp(24px,3vw,36px)}
.faq .answer p{margin:0}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size 300ms var(--ease-out),opacity 180ms linear,content-visibility 300ms allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}

/* closing */
.closing{min-height:70vh;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(48px,8vw,96px);background:var(--text);color:var(--page-bg);padding-block:var(--section-md)}
.closing .display{font-size:clamp(2.9rem,9vw,9rem)}
.closing .button{background:var(--accent);color:var(--text);border-color:var(--accent)}
.closing .button:hover{background:var(--page-bg);border-color:var(--page-bg)}
.closing .availability{margin:1.25rem 0 0;color:rgba(244,244,239,.62);font-size:1rem}
.closing :focus-visible{outline-color:var(--page-bg)}

/* footer */
.site-footer{background:var(--text);color:var(--page-bg);padding-block:0 32px;overflow:hidden}
.site-footer .wrap{border-top:1px solid rgba(244,244,239,.28);padding-top:32px}
.footer-cols{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer-cols nav{display:flex;gap:2rem;flex-wrap:wrap}
.footer-cols a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.footer-cols a:hover{text-decoration:underline}
.wordmark{margin:clamp(24px,4vw,56px) 0 0;font-size:clamp(3rem,13.2vw,12.5rem);line-height:.82;letter-spacing:-.06em;font-weight:600;white-space:nowrap}
.copyright{margin:24px 0 0;color:rgba(244,244,239,.62);font-size:14px}

/* motion */
.js .hero .display .line,.js .hero-copy,.js .hero-tool{opacity:0;transform:translateY(24px);animation:rise 750ms var(--ease-out) forwards}
.js .hero .display .line:nth-child(2){animation-delay:90ms}
.js .hero-copy{animation-delay:150ms}
.js .hero-tool{animation-delay:230ms}
@keyframes rise{to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.display .line{display:block}

/* tablet */
@media(max-width:1199px){
  .hero-copy{grid-column:5/-1}
  .statement .headline,.index-head .headline,.control .headline{grid-column:1/-1}
  .statement .body{grid-column:5/-1}
  .showcase .lead{grid-column:1/-1}
  .sample{grid-column:3/-1}
  .control .col{grid-column:5/-1}
  .step .step-num{grid-column:1/4}
  .step h3{grid-column:4/-1}
  .step p.body{grid-column:4/-1;margin-top:1rem;padding-top:0}
}
/* mobile */
@media(max-width:767px){
  body{font-size:17px}
  .site-header{min-height:64px}
  .site-header nav a:not(.nav-cta){display:none}
  .hero{min-height:auto}
  .m-only{display:inline}
  .hero-copy,.statement .body,.control .col{grid-column:1/-1}
  .hero-tool{flex-direction:column}
  .hero-tool .tool-text{padding:1.25rem 1rem}
  .hero-tool .button{border-left:0;border-top:2px solid var(--text);min-height:60px;width:100%}
  .facts{grid-template-columns:1fr}
  .facts li{min-height:0}
  .facts li+li{border-left:0;border-top:1.5px solid var(--text)}
  .sample{grid-column:1/-1}
  .transcript>div{grid-template-columns:1fr;gap:.25rem}
  .index-row{font-size:clamp(1.75rem,9vw,2.5rem)}
  .step .step-num,.step h3,.step p.body{grid-column:1/-1}
  .step .step-num{font-size:6rem;margin-bottom:1rem}
  .step h3{margin-bottom:.75rem}
  .step p.body{margin-top:0}
  .closing .button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero .display .line,.js .hero-copy,.js .hero-tool{opacity:1;transform:none;animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .arrow,.index-row .name,.faq summary::after{transition:none}
  .faq details::details-content{transition:none}
}