/* Hallmark · macrostructure: Product Proof · genre: editorial · theme: custom moss
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 * contrast: pass (40–41) · nav: N9 · footer: Ft2 · slop: pass (42–49)
 * mobile: pass (34, 49–57)
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Libre+Franklin:wght@400;500;600&family=Shippori+Mincho:wght@600;700&display=swap');
@import url('/tokens.css');

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-md);line-height:1.65}
a{color:inherit}
button,input{font:inherit}
.skip-link{position:fixed;inset-block-start:-5rem;inset-inline-start:var(--space-sm);z-index:10;background:var(--color-accent);color:var(--color-accent-ink);padding:var(--space-xs) var(--space-sm)}
.skip-link:focus{inset-block-start:var(--space-sm)}

.site-header{min-height:4.5rem;display:flex;align-items:center;justify-content:space-between;padding-inline:clamp(var(--space-sm),4vw,var(--space-2xl));border-block-end:var(--rule-thin) solid var(--color-rule)}
.brand{font:600 clamp(1.4rem,2vw,1.8rem)/1 var(--font-display);text-decoration:none;letter-spacing:-.04em;white-space:nowrap}
.brand span{color:var(--color-focus)}
.site-header nav{display:flex;align-items:center;gap:clamp(var(--space-xs),2vw,var(--space-lg))}
.site-header nav a,.footer-links a{min-height:2.75rem;display:inline-flex;align-items:center;font-size:var(--text-sm);text-decoration-thickness:var(--rule-thin);text-underline-offset:var(--space-3xs);white-space:nowrap}
.language{min-height:2.75rem;border:var(--rule-thin) solid var(--color-ink);border-radius:var(--radius-pill);background:transparent;color:var(--color-ink);padding-inline:var(--space-sm);font:500 var(--text-xs)/1 var(--font-mono);cursor:pointer;white-space:nowrap}

.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);align-items:center;gap:clamp(var(--space-xl),6vw,var(--space-3xl));padding:clamp(var(--space-xl),6vw,var(--space-3xl)) clamp(var(--space-sm),6vw,var(--space-3xl)) clamp(var(--space-2xl),8vw,var(--space-4xl))}
.hero-copy,.section-heading,.product-shot{min-width:0}
.product-kind{margin:0;font:500 var(--text-xs)/1.3 var(--font-mono);letter-spacing:.08em}
.hero h1,.statement h2,.section-heading h2,.capabilities h2,.final-cta h2{font-family:var(--font-display);font-style:normal;font-weight:600;letter-spacing:-.045em;line-height:1.08;overflow-wrap:break-word;word-break:normal;min-width:0}
.hero h1{max-width:12ch;margin:var(--space-xs) 0 var(--space-md);font-size:var(--text-display)}
.lede{max-width:60ch;margin:0;font-size:clamp(var(--text-md),1.3vw,var(--text-lg))}
.waitlist{max-width:40rem;margin-block-start:var(--space-lg)}
.waitlist label{display:block;margin-block-end:var(--space-2xs);font-weight:600}
.form-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2xs)}
.form-row input,.form-row button{min-height:var(--control-height);border:var(--rule-thin) solid var(--color-ink);outline:var(--rule-strong) solid transparent;outline-offset:var(--rule-thin)}
.form-row input{min-width:0;background:var(--color-paper);color:var(--color-ink);padding-inline:var(--space-sm);font-family:var(--font-mono)}
.form-row input::placeholder{color:var(--color-ink-soft)}
.form-row input[aria-invalid="true"]{border-color:var(--color-error)}
.form-row input[data-state="success"]{border-color:var(--color-success)}
.form-row button{background:var(--color-ink);color:var(--color-paper);padding-inline:var(--space-md);font-weight:600;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.form-row button:active,.cta-link:active{transform:translateY(var(--rule-thin))}
.form-row button:disabled{opacity:.55;cursor:not-allowed}
.form-note,.form-status,.platforms{font-size:var(--text-xs)}
.form-note{min-height:1lh;margin-block:var(--space-2xs) 0}
.form-status{min-height:1.5lh;margin:0;font-weight:600}
.form-status.error{color:var(--color-error)}
.form-status.success{color:var(--color-success)}
.platforms{margin-block-start:var(--space-xs);font-family:var(--font-mono)}
.honey{position:absolute;inset-inline-start:-999rem}

.product-shot{margin:0;justify-self:center;width:min(21rem,100%)}
.product-shot img{display:block;width:100%;height:auto;max-height:36rem;object-fit:cover;object-position:top;border:var(--rule-thin) solid var(--color-rule);background:var(--color-screen)}
.product-shot figcaption{margin-block-start:var(--space-2xs);font:var(--text-xs)/1.4 var(--font-mono);color:var(--color-ink-soft)}

.statement{background:var(--color-ink);color:var(--color-paper);padding:clamp(var(--space-2xl),9vw,var(--space-4xl)) clamp(var(--space-sm),8vw,var(--space-4xl))}
.statement>p:first-child,.statement-detail{max-width:60ch}
.statement h2{max-width:13ch;margin:var(--space-sm) 0 var(--space-lg);font-size:var(--text-2xl)}
.statement-detail{margin:0;color:var(--color-paper-deep)}

.workflow{padding:clamp(var(--space-2xl),9vw,var(--space-4xl)) clamp(var(--space-sm),6vw,var(--space-3xl))}
.section-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:var(--space-xl);padding-block-end:var(--space-xl);border-block-end:var(--rule-strong) solid var(--color-ink)}
.section-heading h2,.capabilities h2,.final-cta h2{margin:0;font-size:var(--text-2xl)}
.section-heading p{max-width:52ch;margin:0}
.workflow-list{list-style:none;margin:0;padding:0}
.workflow-list li{display:grid;grid-template-columns:minmax(9rem,.4fr) minmax(0,1fr);gap:var(--space-xl);padding-block:var(--space-lg);border-block-end:var(--rule-thin) solid var(--color-rule)}
.workflow-list span{font:500 var(--text-sm)/1.4 var(--font-mono)}
.workflow-list p{max-width:60ch;margin:0}

.capabilities{margin-inline:clamp(var(--space-sm),6vw,var(--space-3xl));padding:clamp(var(--space-xl),6vw,var(--space-3xl));background:var(--color-paper-deep);color:var(--color-ink)}
.capabilities>p{max-width:60ch;margin-block:var(--space-md) var(--space-xl)}
.file-strip{display:flex;flex-wrap:wrap;gap:var(--space-2xs);font:var(--text-xs)/1.4 var(--font-mono)}
.file-strip span{border:var(--rule-thin) solid var(--color-ink);padding:var(--space-2xs) var(--space-xs)}

.final-cta{padding:clamp(var(--space-3xl),11vw,11rem) clamp(var(--space-sm),8vw,var(--space-4xl));text-align:start}
.final-cta p{margin-block:var(--space-md) 0}
.cta-link{display:inline-flex;align-items:center;min-height:var(--control-height);margin-block-start:var(--space-lg);background:var(--color-accent);color:var(--color-accent-ink);border:var(--rule-thin) solid var(--color-ink);padding-inline:var(--space-md);font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}

footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-lg) clamp(var(--space-sm),4vw,var(--space-2xl));border-block-start:var(--rule-thin) solid var(--color-rule);font-size:var(--text-xs)}
footer p{margin:0}
.footer-links{display:flex;align-items:center;gap:var(--space-md)}

:where(a,button,input):focus-visible{outline:var(--rule-strong) solid var(--color-focus);outline-offset:var(--space-3xs)}
@media (hover:hover) and (pointer:fine){
  .site-header nav a:hover,.footer-links a:hover{text-decoration-thickness:var(--rule-strong)}
  .language:hover,.form-row input:hover{background:var(--color-paper-deep)}
  .form-row button:hover{background:var(--color-ink-soft)}
  .cta-link:hover{background:var(--color-paper-deep)}
}

@media (max-width:53rem){
  .site-header nav a{display:none}
  .hero{grid-template-columns:minmax(0,1fr);padding-block-start:var(--space-xl)}
  .hero h1{font-size:clamp(3rem,12vw,5.5rem)}
  .product-shot{width:min(24rem,80vw)}
  .section-heading{grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--space-md)}
}
@media (max-width:32.5rem){
  .site-header{min-height:4.25rem}
  .language{padding-inline:var(--space-xs)}
  .hero{padding-inline:var(--space-sm)}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .workflow-list li{grid-template-columns:minmax(0,1fr);gap:var(--space-xs)}
  .capabilities{margin-inline:0;padding-inline:var(--space-sm)}
  footer{align-items:flex-start;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .form-row button,.cta-link{transition:none}
  .form-row button:active,.cta-link:active{transform:none}
}