/* Glenti: glenti.co · Emerald Vapor, editorial-poster cut Fingerprinted stylesheet (landing-v2-20260718.css). v2 unifies /terms and /privacy under this design (site.css is no longer referenced, file kept), adds the waitlist capture form, and the footer wordmark motion. Campaign note: this web campaign is intentionally Emerald Night-only — a deliberate art-direction choice for the pre-launch site, not a claim that the product lacks a Day appearance (the app ships both via GlentiTheme). Palette (Emerald Vapor, DESIGN_SYSTEM.md): ink0/ink1/ink2, tealDeep, teal, seafoam, mintOnScrim, paper #F5F1EA. Secondary copy derives from paper opacity — no additional hex colors are invented here. */ :root{ --ink0:#04100E; --ink1:#08201B; --ink2:#0D2C25; --teal-deep:#19594C; --teal:#2E8570; --seafoam:#63C2A4; --mint:#9FE3CD; --paper:#F5F1EA; --paper-70:rgba(245,241,234,.70); /* secondary copy — AA on ink0 */ --paper-62:rgba(245,241,234,.62); /* fgMid analog — AA on ink0 */ --line:rgba(159,227,205,.14); /* hairline: mint 14% */ --line-soft:rgba(159,227,205,.25); --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --r-control:10px; /* approved control radius */ --r-card:20px; /* approved card radius */ } *{box-sizing:border-box} html{color-scheme:dark} body{margin:0;background:var(--ink0);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:var(--mint);text-underline-offset:3px;text-decoration-color:rgba(159,227,205,.4)} a:focus-visible,button:focus-visible{outline:2px solid var(--seafoam);outline-offset:3px} img{max-width:100%} ::selection{background:var(--teal-deep);color:var(--paper)} .skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--mint);color:var(--ink0);padding:12px 20px;font-weight:600;text-decoration:none} .skip:focus{left:0} .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)} .caps{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-70)} /* calm entrance motion only; fully removed under reduced motion */ @keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}} @keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}} .r1,.r2,.r3{animation:rise 1s cubic-bezier(.16,1,.3,1) both} .r2{animation-delay:.12s}.r3{animation-delay:.26s} /* PRE-LAUNCH: beta notice banner — remove with the banner markup at public launch */ .prelaunch{background:var(--ink1);border-bottom:1px solid var(--line)} .prelaunch p{margin:0 auto;max-width:1240px;padding:12px clamp(20px,4vw,48px);font-size:13.5px;line-height:1.55;color:var(--paper);text-align:center} /* header: hairline bar with coordinates */ .site-header{border-bottom:1px solid var(--line)} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px} .brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;color:var(--paper)} .brand img{width:30px;height:30px;border-radius:var(--r-control)} .brand span{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.01em} .brand .g{color:var(--seafoam)} .coords{display:flex;gap:28px;align-items:center} .coords .caps{white-space:nowrap} .site-nav{display:flex;gap:12px;align-items:center} .site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-70);text-decoration:none} .site-nav a[aria-current="page"]{color:var(--mint);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--line-soft)} /* hero: left-anchored poster over one restrained ambient glow */ .hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden} .hero::after{content:"";position:absolute;bottom:-55%;left:-10%;width:70%;height:100%;background:radial-gradient(closest-side,rgba(46,133,112,.30),transparent 70%);pointer-events:none} .hero .wrap{position:relative;display:flex;flex-direction:column;padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(48px,6vw,88px)} .hero .status{display:flex;align-items:center;gap:12px;margin-bottom:clamp(28px,4vw,52px)} .hero .status .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--seafoam);animation:breathe 2.6s ease-in-out infinite} .hero .status .caps{color:var(--mint)} .hero h1{font-family:var(--sans);font-weight:800;font-size:clamp(2.1rem,8.5vw,6.75rem);line-height:1.02;letter-spacing:-.015em;text-transform:uppercase;margin:0;overflow-wrap:break-word} .hero h1 .out{color:transparent;-webkit-text-stroke:2px var(--seafoam)} .hero h1 .ind{margin-left:clamp(40px,9vw,150px);white-space:nowrap} .hero .aside{margin-top:clamp(32px,4vw,56px);max-width:430px;align-self:flex-end;display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0} .hero .aside p{font-size:15.5px;line-height:1.7;color:var(--paper-70);margin:0;text-wrap:pretty} .hero .rail{position:absolute;right:clamp(8px,2vw,20px);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--sans);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--paper-62)} /* primary CTA: solid seafoam capsule, ink0 text (AA verified) — the one accent element in the hero. No gradient fill: the gradient's tealDeep stop fails AA under ink text. */ .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:16px 28px;text-decoration:none;cursor:pointer;border:1px solid transparent;border-radius:var(--r-control);transition:background-color .18s ease,border-color .18s ease,color .18s ease} .btn--primary{background:var(--seafoam);color:var(--ink0);border-radius:999px} .fine{margin:0} .note{font-size:13.5px;color:var(--paper-70);margin:18px 0 0} /* section head: number + h2 left, meta pushed to the right edge */ .sec-head{display:flex;align-items:center;gap:20px;padding:0 0 8px} .sec-head h2{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);flex:none;white-space:nowrap;margin:0} .sec-head .n{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--paper-70);flex:none} .sec-head .meta{flex:none;white-space:nowrap;margin-left:auto} .section{padding:clamp(56px,7vw,104px) 0} .section+.section{border-top:1px solid var(--line)} /* roster: giant type index — informational, not interactive: no hover states */ .roster{margin:36px 0 0;padding:0;list-style:none} .roster li{display:flex;align-items:baseline;gap:24px;border-top:1px solid var(--line);padding:6px 0} .roster li:last-child{border-bottom:1px solid var(--line)} .roster .name{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.6rem,5vw,4.2rem);line-height:1.12;color:var(--paper)} .roster .dots{flex:1;border-bottom:1px dotted var(--line-soft);transform:translateY(-10px)} .roster .idx{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--paper-70);white-space:nowrap} /* flow: oversized outlined numerals */ .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border-top:1px solid var(--line)} .flow>div{padding:36px clamp(20px,2.5vw,40px) 8px;border-left:1px solid var(--line)} .flow>div:first-child{border-left:none;padding-left:0} .flow .num{font-family:var(--sans);font-weight:700;font-size:clamp(4rem,7vw,6.5rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(159,227,205,.4)} .flow h3{font-family:var(--sans);font-size:21px;font-weight:700;letter-spacing:-.01em;margin:20px 0 10px} .flow p{font-size:14.5px;color:var(--paper-70);line-height:1.7;margin:0} /* sides: two wide rows */ .sides{margin-top:44px;border-top:1px solid var(--line)} .sides>div{display:grid;grid-template-columns:220px 1fr 1.2fr;gap:32px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line)} .sides .who{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--seafoam)} .sides h3{font-family:var(--sans);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.015em;margin:0} .sides p{font-size:15px;color:var(--paper-70);line-height:1.7;margin:0} /* prose (support / accessibility) */ .prose{max-width:68ch} .prose h2{font-family:var(--sans);font-size:24px;font-weight:700;letter-spacing:-.01em;margin:48px 0 12px} .prose p,.prose dd{color:var(--paper-70);line-height:1.7} .prose strong{color:var(--paper)} .page-head{padding:clamp(48px,6vw,88px) 0 40px;border-bottom:1px solid var(--line)} .page-head .kicker{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--mint);margin:0 0 16px} .page-head h1{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(2rem,6vw,4.2rem);line-height:1.04;margin:0;overflow-wrap:break-word} .page-head .updated{font-size:14.5px;color:var(--paper-70);margin:16px 0 0} .faq dt{font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:-.01em;margin:36px 0 8px;color:var(--paper)} .faq dd{margin:0} .contact-block{border:1px solid var(--line);border-radius:var(--r-card);padding:24px 28px;margin:36px 0 0;color:var(--paper-70);line-height:1.8} /* footer: legal line, then full-width decorative wordmark */ .site-footer{border-top:1px solid var(--line);margin-top:clamp(56px,7vw,96px)} .site-footer .cols{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:44px 0 0} .site-footer p{font-size:14px;color:var(--paper-70);margin:0 0 8px} .site-footer strong{color:var(--paper);text-transform:uppercase} .site-footer ul{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap} .site-footer ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-70);text-decoration:none} .site-footer .bar{margin-top:36px;padding:8px 0;border-top:1px solid var(--line);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-70);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .site-footer .bar span{white-space:nowrap} .site-footer .bar a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--paper-70);text-decoration:none;letter-spacing:.22em;text-transform:uppercase} .wordmark-xl{display:block;font-family:var(--sans);font-weight:800;text-transform:lowercase;letter-spacing:-.04em;font-size:clamp(5rem,19vw,17rem);line-height:.78;text-align:center;color:var(--ink2);-webkit-user-select:none;user-select:none;padding-top:20px;margin-bottom:-.06em;overflow:hidden} .wordmark-xl .g{color:var(--teal-deep)} /* hover states only where hover is real — never sticky on touch */ @media (hover:hover){ a:hover{color:var(--seafoam)} .skip:hover{color:var(--ink0)} .site-nav a:hover,.site-footer ul a:hover,.site-footer .bar a:hover{color:var(--mint)} .btn--primary:hover{background:var(--mint);color:var(--ink0)} } @media (max-width:1100px){ .hero .rail{display:none} } @media (max-width:820px){ .hero .aside{align-self:stretch;max-width:none} .hero h1 .ind{margin-left:0} .flow{grid-template-columns:1fr} .flow>div{border-left:none;padding-left:0;border-top:1px solid var(--line)} .flow>div:first-child{border-top:none} .sides>div{grid-template-columns:1fr;gap:10px} .coords{display:none} } @media (max-width:600px){ .sec-head{flex-wrap:wrap;row-gap:6px} } @media (max-width:480px){ /* keep the authored line breaks; long lines wrap naturally */ .hero h1 .ind{white-space:normal} .roster li{gap:14px} .site-header .wrap{gap:8px} .site-nav{gap:2px} .site-nav a{padding:0 8px} } /* reduced motion: no animation, no motion-implying transitions — page renders complete */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} } /* forced colors: outlined display text must stay visible */ @media (forced-colors:active){ .hero h1 .out{-webkit-text-stroke:0;color:CanvasText} .flow .num{-webkit-text-stroke:0;color:CanvasText} .hero .status .dot{background:CanvasText} .btn{border:1px solid ButtonText} .prelaunch,.site-header,.hero,.section+.section,.site-footer{border-color:CanvasText} } /* ===================== v2 additions (20260718) ===================== Legal pages, waitlist capture, wordmark motion. Same eight hexes; secondary tones remain paper-opacity derivations only. */ /* legal pages: the generated article (site/legal/sync_legal.py output) styled into the editorial system. Markup between the LEGAL CONTENT markers is generator-owned; styling hooks are its stable classes. */ .legal-wrap{max-width:72ch;padding-bottom:16px} .legal-kicker{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--mint);margin:clamp(48px,6vw,88px) 0 16px} .legal-content h1{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(2rem,6vw,4rem);line-height:1.04;margin:0;overflow-wrap:break-word;scroll-margin-top:24px} .legal-content h1+p{font-size:14.5px;color:var(--paper-70);margin:16px 0 0} .legal-content h1+p em{font-style:normal} .toc{border:1px solid var(--line);border-radius:var(--r-card);padding:24px 28px;margin:36px 0 0} .legal-content .toc h2{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin:0 0 14px;border:none;padding:0} .toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:44px;counter-reset:toc} .toc li{counter-increment:toc;padding:5px 0;break-inside:avoid;display:flex;align-items:baseline;gap:12px} .toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--paper-62);flex:none} .toc a{font-size:14px;line-height:1.5;color:var(--paper-70);text-decoration:none} .legal-content h2{font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--paper);margin:54px 0 14px;padding-top:26px;border-top:1px solid var(--line);scroll-margin-top:24px} .legal-content h3{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--paper);margin:32px 0 10px;scroll-margin-top:24px} .legal-content p{font-size:15px;color:var(--paper-70);line-height:1.75;margin:0 0 16px;text-wrap:pretty} .legal-content ul{margin:0 0 16px;padding-left:22px} .legal-content li{font-size:15px;color:var(--paper-70);line-height:1.7;margin:6px 0} .legal-content strong{color:var(--paper)} .legal-content code{font-family:var(--mono);font-size:.85em;color:var(--mint);background:var(--ink1);padding:2px 7px;border-radius:var(--r-control)} @media (max-width:700px){.toc ol{columns:1}} /* waitlist capture: first-party form in the hero aside. The form ships hidden and is revealed by the inline script;