:root { --ink:var(--ink); --muted:var(--muted); --line:var(--line); --paper:var(--paper); --white:var(--white); --radius:24px; --max:1200px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Figtree, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.container { width:min(calc(100% - 64px), var(--max)); margin-inline:auto; }
.site-header { border-bottom:1px solid var(--line); }
.nav { height:80px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.wordmark { font-size:24px; font-weight:700; letter-spacing:-.06em; }
.wordmark-dot, h1 em, h2 em, .tea-greeting span { color:var(--accent); font-style:normal; }
.nav-links, .footer-links { display:flex; gap:32px; color:var(--muted); font-size:14px; }
.nav-links a, .footer-links a, .text-link { transition:color .2s ease; }.nav-links a:hover, .footer-links a:hover, .text-link:hover { color:var(--ink); }
.nav-cta { font-size:14px; font-weight:600; }.nav-cta span, .text-link span { margin-left:8px; }
.hero { padding:120px 0 96px; min-height:560px; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow { margin:0; text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; }
h1, h2, p { margin-top:0; }.hero h1 { max-width:760px; margin:32px 0 64px; font-size:clamp(48px, 8vw, 88px); line-height:1.04; letter-spacing:-.07em; font-weight:600; }
.hero-bottom { display:flex; align-items:end; justify-content:space-between; gap:40px; }.hero-copy { max-width:360px; margin:0; color:var(--muted); font-size:18px; line-height:1.45; letter-spacing:-.02em; }.text-link { font-size:14px; font-weight:600; white-space:nowrap; }
.section { padding:96px 0; }.section-heading { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:16px; margin-bottom:32px; }.section-index { margin:0; color:var(--muted); font-size:12px; }
.app-list { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; }.app-card { min-height:520px; border-radius:var(--radius); overflow:hidden; position:relative; display:flex; flex-direction:column; justify-content:space-between; transition:transform .3s ease; }.app-card:hover { transform:translateY(-4px); }.app-card-featured { background:var(--surface-card); }.app-card-secondary { background:var(--surface-alt); }
.app-card-content { z-index:2; display:flex; justify-content:space-between; padding:32px; }.app-number { color:var(--muted); font-size:12px; margin-bottom:32px; }.app-card h2 { margin-bottom:12px; font-size:40px; line-height:1; letter-spacing:-.06em; font-weight:600; }.app-description { max-width:240px; color:var(--muted-strong); margin:0; line-height:1.45; }.circle-arrow { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--muted-light); border-radius:50%; font-size:18px; }.tea-preview { display:flex; justify-content:center; align-items:end; height:290px; }.tea-device { width:220px; height:320px; margin-bottom:-96px; padding:18px; border-radius:28px 28px 0 0; background:var(--white-soft); box-shadow:0 16px 48px var(--shadow); text-align:left; }.tea-status, .tea-meta, .tea-detail { display:flex; justify-content:space-between; color:var(--muted-light); font-size:10px; }.tea-greeting { margin-top:28px; font-size:20px; font-weight:600; letter-spacing:-.05em; }.tea-meta { margin-top:24px; }.tea-cup { width:100px; height:100px; margin:16px auto 12px; display:grid; place-items:center; border-radius:50%; background:var(--surface-orb); color:var(--accent-muted); font-size:32px; }.tea-name { text-align:center; font-size:16px; font-weight:600; }.tea-detail { justify-content:center; margin-top:4px; }.tea-button { margin-top:24px; padding:10px; border-radius:8px; background:var(--ink); color:var(--white); text-align:center; font-size:10px; }.coming-soon-mark { position:absolute; right:16px; bottom:-44px; color:var(--surface-orb); font-size:300px; line-height:1; letter-spacing:-.1em; font-weight:700; }
.statement { display:grid; grid-template-columns:1fr 2fr; column-gap:32px; }.statement h2 { grid-column:2; margin:32px 0 48px; font-size:64px; line-height:1.05; letter-spacing:-.07em; font-weight:600; }.statement-copy { grid-column:2; max-width:420px; color:var(--muted); font-size:18px; }
.contact-band { background:var(--ink); color:var(--white); }.contact-inner { min-height:400px; padding:80px 0; display:flex; align-items:end; justify-content:space-between; gap:40px; }.contact-band .eyebrow { color:var(--accent); }.contact-band h2 { margin:32px 0 0; font-size:56px; line-height:1; letter-spacing:-.07em; font-weight:600; }.button { display:inline-flex; align-items:center; gap:24px; padding:16px 20px; border-radius:999px; font-size:14px; font-weight:600; }.button-light { background:var(--white); color:var(--ink); }.button span { font-size:18px; }
.footer { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:12px; }.footer p { margin:0; }
@media (max-width:720px) { .container { width:min(calc(100% - 40px), var(--max)); }.nav { height:64px; }.nav-links { display:none; }.nav-cta { font-size:12px; }.hero { padding:80px 0 64px; min-height:560px; }.hero h1 { margin:24px 0 48px; font-size:56px; }.hero-bottom, .contact-inner { align-items:start; flex-direction:column; }.hero-copy { font-size:16px; }.section { padding:64px 0; }.app-list { grid-template-columns:1fr; }.app-card { min-height:440px; }.app-card h2 { font-size:32px; }.tea-preview { height:210px; }.tea-device { transform:scale(.82); transform-origin:bottom; }.statement { display:block; }.statement h2 { margin:24px 0 32px; font-size:48px; }.contact-inner { min-height:440px; padding:64px 0; justify-content:end; }.contact-band h2 { font-size:48px; }.footer { padding:24px 0; flex-wrap:wrap; }.footer p { order:3; width:100%; } }

/* Homepage composition refinements */
.hero { align-items:center; justify-content:center; min-height:0; padding-block:80px; text-align:center; }
.hero h1 { max-width:none; margin:0 0 48px; }
.hero-bottom { flex-direction:column; align-items:center; gap:32px; }
.hero-copy { max-width:520px; }
.contact-inner { min-height:400px; padding:96px 0; align-items:center; justify-content:center; flex-direction:column; text-align:center; gap:32px; }
.contact-inner > div { display:flex; flex-direction:column; align-items:center; }
.contact-copy { margin:24px 0 0; color:var(--accent); font-size:18px; }
@media (max-width:720px) { .hero { min-height:560px; padding:80px 0; } .hero h1 { margin:0 0 40px; } .contact-inner { min-height:440px; padding:64px 0; align-items:center; justify-content:center; } }

/* Cool blue-gray palette override */
:root { --ink:var(--ink); --muted:var(--muted); --line:var(--line); --paper:var(--paper); --white:var(--white); }
.app-card-featured { background:var(--surface-card); }.app-card-secondary { background:var(--surface-alt); }
.tea-device { background:var(--white-soft); }.tea-cup { background:var(--surface-orb); color:var(--accent-muted); }

/* OL9 design tokens: the only place where palette values are defined. */
:root { --ink:#11151a; --dark:#15191e; --muted:#6d7680; --muted-strong:#66717c; --muted-light:#7b8792; --accent:#89939e; --accent-muted:#7d8994; --line:#d9dee3; --line-strong:#cbd2d9; --paper:#f7f9fb; --white:#fff; --white-soft:#f8fafc; --surface:#e8ecf0; --surface-alt:#e9edf1; --surface-card:#e4e8ec; --surface-panel:#e7ebef; --surface-hero:#e5eaf0; --surface-deep:#d6dbe1; --surface-orb:#dce2e8; --surface-pale:#e0e5ea; --shadow:#0000001a; }

.principles-list { grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.principles .section-heading { border-top:1px solid var(--line); padding-top:16px; }
.statement { border-top:1px solid var(--line); padding-top:16px; }
.principles-list div { border-top:0; padding-top:0; }
.principles-list b { font-size:24px; letter-spacing:-.04em; }
.principles-list p { color:var(--muted); margin:12px 0 0; }
@media (max-width:720px) { .principles-list { display:block; } .principles-list div { margin-top:24px; } }