/* Hallmark · genre: editorial · theme: CroTalk tokens (project design system) · signature: the real chat screen in the hero phone
   critique: soft sky glass kept from the reference, fabricated people and metrics removed
   waive 74: palette comes from packages/design-tokens/themes.css, approved project tokens
   waive 42: desktop nav is the site's sections; mobile uses the icon tab bar
   waive 41: dark cards inherit --text-primary from the dark theme */
@font-face{font-family:Manrope;src:url("./Manrope-Variable.woff2") format("woff2");font-weight:200 800;font-display:swap}

/* Values copied from packages/design-tokens/themes.css (no build step here). */
:root{
  color-scheme:light dark;
  --background:#f8fafc;--surface:#fff;--surface-subtle:#f1f5f9;
  --text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#64748b;
  --border-strong:#cbd5e1;--brand-primary:#2563eb;--brand-hover:#1d4ed8;--brand-soft:#dbeafe;
  --focus-ring:#2563eb;--on-action:#fff;
  --shadow-sm:0 2px 6px rgb(15 23 42 / 3%),0 8px 20px rgb(15 23 42 / 4%);
  --shadow-md:0 4px 12px rgb(15 23 42 / 4%),0 16px 40px rgb(15 23 42 / 6%);
  --radius-md:12px;--radius-lg:16px;--radius-xl:24px;
  --font-sans:"Manrope",ui-sans-serif,system-ui,sans-serif;
}


*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--background);color:var(--text-primary);font:16px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0;text-wrap:balance;overflow-wrap:break-word;min-width:0;line-height:1.2;letter-spacing:-.01em}
p{margin:0}
a{color:var(--brand-primary)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 32px}}

.skip-link{position:fixed;left:16px;top:-60px;z-index:20;padding:8px 16px;background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.skip-link:focus{top:12px}

.site-header{position:sticky;top:0;z-index:10;background:var(--background)}
.header-row{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:20px;color:var(--text-primary);text-decoration:none}
.brand.small{font-size:16px}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a{color:var(--text-secondary);text-decoration:none;font-weight:700;font-size:15px}
.site-nav a:hover{color:var(--text-primary)}
.site-nav .nav-cta{color:var(--brand-primary)}

.hero{padding:48px 0 32px}
.hero-grid{display:grid;gap:48px;align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:1.1fr .9fr}.hero{padding:80px 0 48px}}
h1{font-size:clamp(34px,4.6vw,60px);font-weight:800;max-width:16ch}
.lead{margin-top:20px;font-size:18px;color:var(--text-secondary);max-width:56ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:var(--radius-md);font-weight:700;text-decoration:none}
.btn-primary{background:var(--brand-primary);color:var(--on-action)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-quiet{background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}
.note{margin-top:16px;font-size:14px;color:var(--text-tertiary)}

/* Phone preview: mirrors mobile chats UI, sample content only. */
.preview{margin:0;justify-self:center;width:100%;max-width:340px}
.phone{padding:8px;border-radius:40px;background:var(--surface);box-shadow:var(--shadow-md)}
.phone-screen{padding:20px 16px 16px;border-radius:30px;background:var(--background);display:flex;flex-direction:column;gap:16px}
.p-title{font-weight:800;font-size:22px;padding:0 4px}
.p-rooms{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.p-room{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-lg)}
.p-room.is-active{background:var(--surface);box-shadow:var(--shadow-sm)}
.p-art{flex:none;width:40px;height:40px;border-radius:14px}
.a1{background:var(--brand-soft)}.a2{background:var(--surface-subtle)}
.p-room-text{display:grid;min-width:0;flex:1;font-size:14px;line-height:1.3}
.p-room-text small{color:var(--text-secondary);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-pill{flex:none;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--text-primary)}
.p-chat{display:flex;flex-direction:column;gap:8px;padding:4px}
.p-day{align-self:center;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-subtle);color:var(--text-secondary)}
.p-group{display:flex;flex-direction:column;gap:2px;max-width:80%}
.p-group.out{align-self:flex-end;align-items:flex-end}
.p-name{font-size:12px;font-weight:700;color:var(--text-secondary);margin:0 0 2px 8px}
.p-bubble{font-size:14px;line-height:1.35;padding:8px 12px;border-radius:18px}
.in .p-bubble{background:var(--surface);box-shadow:var(--shadow-sm)}
.in .p-bubble:not(.tail){border-bottom-left-radius:6px}
.in .p-bubble.tail{border-top-left-radius:6px;border-bottom-left-radius:4px}
.out .p-bubble{background:var(--brand-primary);color:var(--on-action)}
.out .p-bubble:not(.tail){border-bottom-right-radius:6px}
.out .p-bubble.tail{border-top-right-radius:6px;border-bottom-right-radius:4px}
.p-composer{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-md);color:var(--text-tertiary);font-size:14px}
.p-send{width:32px;height:32px;border-radius:50%;background:var(--brand-primary)}
figcaption{margin-top:16px;text-align:center;font-size:13px;color:var(--text-tertiary)}

.section{padding:56px 0}
@media (min-width:768px){.section{padding:80px 0}}
h2{font-size:clamp(30px,4.2vw,48px);font-weight:800}
h3{font-size:19px;font-weight:700}
.cards{display:grid;gap:20px;margin-top:32px}
@media (min-width:860px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{padding:28px;border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-sm)}
.card p{margin-top:12px;color:var(--text-secondary)}

.steps{list-style:none;counter-reset:s;margin:32px 0 0;padding:0;display:grid;gap:32px}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;margin-bottom:16px;border-radius:50%;background:var(--brand-soft);color:var(--text-primary);font-weight:800}
.steps p{margin-top:8px;color:var(--text-secondary)}

.safety{display:grid;gap:32px}
@media (min-width:960px){.safety{grid-template-columns:.9fr 1.1fr}}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.facts li{padding:16px 20px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text-secondary)}

.download{padding:32px 24px;border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-md)}
@media (min-width:768px){.download{padding:48px}}
.download>p{margin-top:12px;color:var(--text-secondary);max-width:60ch}
.stores{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.stores li{display:flex;flex-direction:column;padding:16px 16px;border-radius:var(--radius-md);background:var(--surface-subtle);min-width:160px}
.store{font-weight:700}
.status{font-size:14px;color:var(--text-secondary)}

.site-footer{padding:32px 0 40px;color:var(--text-tertiary);font-size:14px}
.footer-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}

/* Shadows vanish in forced colours; restore contours there. */
@media (forced-colors:active){
  .card,.facts li,.download,.stores li,.phone,.btn,.site-nav,.p-bubble,.p-composer{border:1px solid CanvasText}
}
@media (prefers-contrast:more){
  .card,.facts li,.download,.stores li,.btn-quiet{outline:1px solid var(--border-strong)}
  .lead,.card p,.steps p,.facts li,.note,figcaption{color:var(--text-primary)}
}

/* Landscape and glass tokens (dark values in dark.css) */
:root{--sky-top:#a9c1ee;--sky-mid:#c9c6ec;--sky-low:#f6cdb6;--ground:#dce4fa;--tint-mid:#e8defa;--tint-low:#f6e4da;--ridge-1:#b3b1df;--ridge-2:#8b92c9;--sun:#ffe9c7;--glass:rgba(255,255,255,.52);--glass-edge:rgba(255,255,255,.85)}
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 45%,var(--sky-low) 80%,var(--ground))}
.hero-land .r3{fill:var(--ground)}
body{background:linear-gradient(180deg,var(--ground) 0,var(--tint-mid) 60%,var(--tint-low) 100%) var(--ground)}
/* Soft glass + muted landscape. Glass is a CSS approximation for the web page only (ADR-0025: not native material). */

.hero>.wrap{position:relative}
.hero-land{position:absolute;left:0;right:0;bottom:0;width:100%;height:60%;min-height:260px}
.hero-land .r1{fill:var(--ridge-1)}.hero-land .r2{fill:var(--ridge-2)}.hero-land .r3{fill:var(--ridge-3)}
.site-header,.card,.facts li,.download,.btn-quiet{background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-sm)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header,.card,.facts li,.download,.btn-quiet{-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .site-header,.card,.facts li,.download,.btn-quiet{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}


.hero-land .sun{fill:var(--sun);opacity:.85}





/* Nav: text on desktop, icon tab bar pinned to the bottom on phones */
.site-nav a{display:inline-flex;align-items:center;gap:8px}
.nav-ico{display:none}
@media (max-width:767px){
  .site-nav{position:fixed;z-index:15;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;border-radius:24px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-md);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
  .site-nav a{flex-direction:column;justify-content:center;gap:2px;min-height:52px;padding:8px 2px;border-radius:18px;font-size:11px;font-weight:700;text-align:center}
  .site-nav a:hover{background:var(--glass)}
  .nav-ico{display:block}
  body{padding-bottom:88px}
}
@media (max-width:767px) and ((prefers-reduced-transparency:reduce) or (prefers-contrast:more)){
  .site-nav{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:767px){.site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass)}}

/* Header tools: ready toggle, language, theme */
.header-tools{display:flex;align-items:center;gap:8px;margin-left:16px}
.tool{display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border:0;border-radius:var(--radius-md);background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-edge);color:var(--text-primary);font:700 13px/1 inherit;cursor:pointer}
.tool:hover{background:var(--surface)}
.ready{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 8px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-edge);color:var(--text-primary);font-weight:700;font-size:14px;text-decoration:none}
.ready-track{position:relative;width:40px;height:24px;border-radius:999px;background:var(--surface-subtle);transition:background .2s}
.ready-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .2s}
.ready:hover .ready-track,.ready.is-on .ready-track{background:var(--brand-primary)}
.ready:hover .ready-knob,.ready.is-on .ready-knob{transform:translateX(16px)}
@media (prefers-reduced-motion:reduce){.ready-track,.ready-knob{transition:none}}
@media (min-width:768px){.header-row{gap:16px}.site-nav{margin-left:auto}}
@media (max-width:767px){.header-tools{margin-left:auto}}
@media (max-width:420px){.ready-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ready{padding:0 8px}}

/* Pressed state for every control */
.btn:active,.tool:active,.ready:active,.site-nav a:active,.text-link:active{transform:scale(.97)}
.btn,.tool,.ready,.site-nav a{transition:transform .12s ease,background-color .15s ease}
@media (prefers-reduced-motion:reduce){.btn,.tool,.ready,.site-nav a{transition:none}.btn:active,.tool:active,.ready:active,.site-nav a:active{transform:none}}
.text-link{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;font-weight:700;color:var(--text-primary);text-underline-offset:4px}
@media (max-width:767px){.hero-copy{text-align:center;margin-inline:auto}.hero-copy>*{margin-inline:auto}.hero-copy .actions{justify-content:center}}
.note,figcaption{color:var(--text-secondary)}
@media (min-width:960px){.hero{min-height:calc(100svh - 64px);display:grid;align-items:center}}
.card,.facts li,.download{color:var(--text-primary)}
.btn:disabled,.tool:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
/* Language picker: button + listbox, glass menu matching the header tools */
.lang{position:relative}
.lang-btn{display:inline-flex;gap:8px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--text-tertiary)}
.lang-chev{opacity:.7;transition:transform .15s ease}
.lang-btn[aria-expanded=true] .lang-chev{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:208px;max-height:min(70vh,440px);overflow:auto;margin:0;padding:8px;list-style:none;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md),inset 0 0 0 1px var(--glass-edge);color:var(--text-primary)}
@supports (backdrop-filter:blur(1px)){.lang-menu{background:var(--glass);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.lang-menu{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.lang-menu li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 12px;border-radius:var(--radius-md);font-weight:700;font-size:15px;cursor:pointer}
.lang-menu li:hover,.lang-menu li.is-active{background:var(--brand-soft)}
.lang-menu li[aria-selected=true]{color:var(--brand-primary)}
.lang-menu .lang-code{font-size:12px;color:var(--text-tertiary)}
.lang-menu:focus-visible{outline:none}
.lang-menu:focus-visible li.is-active{outline:2px solid var(--focus-ring);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.lang-chev{transition:none}}