/* Cuyar — marketing home page.
   Same brand tokens as the app (index.html) and the legal pages (assets/legal.css).
   Same 65+ accessibility floor: >=20px body (this page runs 22px), high contrast,
   48px minimum tap targets (64px for primary CTAs), visible focus, no motion by default.
   Fonts are self-hosted. This page makes ZERO third-party requests. */

/* ---------- fonts (self-hosted; latin subset covers English + Spanish) ---------- */
@font-face{
  font-family:'Atkinson Hyperlegible';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/atkinson-hyperlegible-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Atkinson Hyperlegible';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/atkinson-hyperlegible-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Bitter';
  font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/bitter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Bitter';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/bitter-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Accent only — used for exactly one line (the narrative anchor). */
@font-face{
  font-family:'Shantell Sans';
  font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/shantell-sans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root{
  --paper:#F7F3EC;
  --paper-warm:#F1EADD;
  --card:#FFFFFF;
  --ink:#2B2A28;
  --muted:#5C5750;
  --sage:#5B8A72;
  --sage-deep:#3F6B55;
  --pencil:#CFC6B6;
  --radius:20px;
  --font-body:'Atkinson Hyperlegible','Avenir Next',system-ui,sans-serif;
  --font-display:'Bitter','Iowan Old Style',Georgia,serif;
  --font-hand:'Shantell Sans','Bradley Hand',cursive;
  --wrap:64rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.375rem;      /* 22px floor for this audience */
  line-height:1.6;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--sage-deep)}

/* Visible focus everywhere — never remove it. */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--sage-deep); outline-offset:3px; border-radius:8px;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* Skip link: present for keyboard users, out of the way for everyone else. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--card); color:var(--sage-deep); font-weight:700;
  padding:16px 20px; border:3px solid var(--sage-deep); border-radius:0 0 12px 0;
}
.skip:focus{left:0}

/* ---------- top bar / language ---------- */
.top{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:18px 0 6px;
}
.brand{
  display:inline-flex; align-items:center; min-height:48px;   /* tap-target floor */
  font-family:var(--font-display); font-weight:700; font-size:1.6rem;
  letter-spacing:.01em; color:var(--ink); text-decoration:none;
}
.brand:hover{color:var(--sage-deep)}

.langbar{display:flex; gap:10px; align-items:center}
.langbar .lang{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 20px;
  font:inherit; font-size:1.05rem; font-weight:700;
  border-radius:999px; text-decoration:none;
  background:var(--card); color:var(--sage-deep); border:2px solid var(--sage);
}
.langbar .lang[aria-current="true"]{
  background:var(--sage-deep); color:#fff; border-color:var(--sage-deep);
}
.langbar .lang:not([aria-current]):hover{background:var(--paper-warm)}

/* Polite offer to switch, shown only by JS when the browser prefers the other language. */
.langsuggest{
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  margin:6px 0 0; padding:10px 16px;
  background:var(--card); border:2px solid var(--pencil); border-radius:var(--radius);
  font-size:1.05rem; line-height:1.4;
}
.langsuggest a{
  display:inline-flex; align-items:center; min-height:48px; padding:0 20px;
  font-weight:700; text-decoration:none; border-radius:999px;
  background:var(--sage-deep); color:#fff;
}
.langsuggest a:hover{background:#345A47}
.langsuggest[hidden]{display:none !important}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:64px; padding:14px 34px;
  font:inherit; font-weight:700; font-size:1.375rem; line-height:1.2;
  text-decoration:none; border-radius:999px; border:3px solid transparent;
  background:var(--sage-deep); color:#fff;
  box-shadow:0 2px 0 rgba(43,42,40,.10);
}
/* Hover goes DARKER, not lighter: white-on-sage is only 3.94:1, which would drop below
   AA for anything that is not large text. Darker keeps it at 7.8:1. */
.btn:hover{background:#345A47}
.btn:active{transform:translateY(1px)}
.btn-quiet{background:var(--card); color:var(--sage-deep); border-color:var(--sage)}
.btn-quiet:hover{background:var(--paper-warm)}

.ctanote{margin:14px 0 0; font-size:1.1rem; color:var(--muted)}

/* Store chips. NOT Apple/Google badge artwork — plain in-brand chips, so nothing is
   mis-implied about an app that is not on the stores yet. build.py turns them into
   real links once config.json has the URLs. */
.stores{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 0; padding:0; list-style:none}
.stores li{margin:0}
.store{
  display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:8px 20px;
  border:2px solid var(--pencil); border-radius:999px;
  background:var(--card); color:var(--muted);
  font-size:1.05rem; font-weight:700; text-decoration:none;
}
a.store{color:var(--sage-deep); border-color:var(--sage)}
a.store:hover{background:var(--paper-warm)}
.store .tag{font-weight:400; font-size:.95rem; color:var(--muted)}

/* ---------- sections ---------- */
section{padding:52px 0}
section.alt{background:var(--paper-warm)}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.2; margin:0 0 .35em}
h1{font-size:2.35rem; font-weight:700; letter-spacing:-.01em}
h2{font-size:1.85rem}
h3{font-size:1.3rem; font-family:var(--font-body); font-weight:700; line-height:1.3}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.lead{font-size:1.5rem; color:var(--ink); max-width:34em}
.muted{color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding:24px 0 44px}
.hero .lead{margin-bottom:28px}
.hero-art{
  margin:0 0 30px; border-radius:var(--radius); overflow:hidden;
  background:var(--paper-warm);
}
.hero-art img{width:100%}

/* ---------- cards ---------- */
.cards{display:grid; gap:20px; margin:28px 0 0; padding:0; list-style:none}
.card{
  background:var(--card); border:2px solid var(--pencil); border-radius:var(--radius);
  padding:24px 24px 26px;
}
.card h3{margin-bottom:.3em}
.card p{font-size:1.2rem; color:var(--muted)}

/* ---------- for the family ---------- */
.family{
  background:var(--card); border:2px solid var(--sage); border-left-width:8px;
  border-radius:var(--radius); padding:28px 26px;
}
.family h2{margin-top:0}
.family .btn{margin-top:20px}

/* ---------- how it works ---------- */
.steps{display:grid; gap:34px; margin:32px 0 0; padding:0; list-style:none; counter-reset:step}
.step{display:grid; gap:16px; align-items:start}
.step-art{
  background:var(--card); border:2px solid var(--pencil); border-radius:var(--radius);
  overflow:hidden;
}
.step-art img{width:100%}
.step h3{display:flex; gap:14px; align-items:baseline; margin-bottom:.25em}
.step-n{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  background:var(--sage-deep); color:#fff;
  font-family:var(--font-display); font-size:1.2rem; line-height:1;
}
.step p{font-size:1.2rem; color:var(--muted)}

/* ---------- coaches ---------- */
.coaches{display:grid; gap:20px; margin:30px 0 0; padding:0; list-style:none}
.coach{
  background:var(--card); border:2px solid var(--pencil); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
/* Portraits are square masters. On a phone, six full-square portraits added ~3,800px of
   scroll on their own, so crop to 3:2 there — the faces are head-and-shoulders, so the
   crop keeps the face and loses only empty background. Full squares return at >=700px,
   where the grid is 2- and 3-up and there is room for them. */
.coach img{width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center 18%;
           background:var(--paper-warm)}
@media (min-width:700px){
  .coach img{aspect-ratio:1/1; object-position:center top}
}
.coach .body{padding:18px 20px 22px}
.coach .cname{font-family:var(--font-display); font-size:1.3rem; display:block; margin-bottom:.2em}
.coach .cbio{font-size:1.1rem; color:var(--muted)}

/* ---------- the name ---------- */
.name-sec .namewrap{display:grid; gap:24px; align-items:center}
.name-art{
  background:var(--card); border:2px solid var(--pencil); border-radius:var(--radius);
  overflow:hidden; max-width:380px;
}
.anchor{
  font-family:var(--font-hand); font-size:1.9rem; line-height:1.35;
  color:var(--sage-deep); margin:.6em 0 .15em;
}
.anchor-sub{font-size:1.15rem; color:var(--muted); margin:0}

/* ---------- final CTA ---------- */
.final{text-align:center}
.final .lead{margin:0 auto 28px}
.final .stores{justify-content:center}

/* ---------- footer ---------- */
footer{background:var(--paper-warm); border-top:2px solid var(--pencil); padding:40px 0 56px}
footer .flinks{display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 24px; padding:0; list-style:none}
footer .flinks a{
  display:inline-flex; align-items:center; min-height:48px;
  font-weight:700; font-size:1.15rem;
}
.safety{
  background:var(--card); border-left:6px solid var(--sage); border-radius:12px;
  padding:16px 18px; margin:0 0 18px; font-size:1.1rem;
}
.disclose{font-size:1.05rem; color:var(--muted); margin:0 0 18px; max-width:46em}
.colophon{font-size:1.05rem; color:var(--muted); margin:0}

/* ---------- wider screens ---------- */
@media (min-width:700px){
  .wrap{padding:0 32px}
  h1{font-size:3rem}
  h2{font-size:2.15rem}
  .hero{padding:34px 0 56px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:220px 1fr; gap:28px; align-items:center}
  .coaches{grid-template-columns:repeat(2,1fr)}
  .name-sec .namewrap{grid-template-columns:300px 1fr; gap:36px}
  section{padding:68px 0}
}
@media (min-width:1000px){
  .coaches{grid-template-columns:repeat(3,1fr)}
  .hero{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
  .hero-art{margin:0; order:2}
  .hero-copy{order:1}
}

/* ---------- motion ----------
   There is no scroll animation on this page on purpose: the audience is often on a
   weak connection and reduced-motion is common. Only button feedback moves, and this
   turns even that off. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .btn:active{transform:none}
}

/* ---------- print ---------- */
@media print{
  body{background:#fff}
  .langbar,.langsuggest,.skip,.stores{display:none}
}

/* ---- "See a session" video -------------------------------------------------
   The video is portrait because the app is, so it is capped rather than allowed
   to fill a desktop column — a 1080x1920 file stretched across a wide screen is
   all letterbox and no app. */
.seeit .introvid{
  display:block; margin:26px 0 0; width:100%; max-width:340px;
  aspect-ratio:1080/1920; background:var(--paper);
  border:1px solid var(--pencil); border-radius:18px;
}
.seeit .ctanote{max-width:34em}
.seeit-text h2{margin-top:22px}
@media (min-width:760px){
  .seeit{display:grid; grid-template-columns:340px 1fr; gap:40px; align-items:center}
  .seeit .introvid{margin:0}
  .seeit-text h2{margin-top:0}
}