/* ─────────────────────────────────────────────────────────────────
   Fazon — design tokens
   The single source of truth for color, type, spacing, radii.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── ink + paper ─────────────────────────────────────────── */
  --ink:           #15140e;
  --ink-2:         #2a2620;
  --ink-3:         #3d3a32;
  --muted:         rgba(21,20,14,0.55);
  --muted-2:       rgba(21,20,14,0.35);
  --hairline:      rgba(21,20,14,0.10);
  --hairline-2:    rgba(21,20,14,0.05);

  /* page surface (off-app — design system pages, web, support docs) */
  --paper:         #f4ece0;
  --paper-2:       #ece4d4;

  /* ── accent · CLAY ────────────────────────────────────────
     Primary brand mark. Used on coach moments, ring fills,
     metric emphasis, and the play glyph. Never on large
     surfaces — the gradient handles that. */
  --clay-50:       #fbe7dc;
  --clay-100:      #f7c8b3;
  --clay-200:      #f1a285;
  --clay-300:      #e87f5b;
  --clay-400:      #db5f3a;   /* the brand mark */
  --clay-500:      #b14a26;
  --clay-600:      #8a3818;
  --accent:        var(--clay-400);
  --accent-soft:   var(--clay-100);

  /* ── glass surfaces ──────────────────────────────────────
     Cards on top of the gradient. Three weights so we can
     stack them: regular card, sub-card inside a card, and
     a tightly-frosted overlay (tab bar, status pills). */
  --glass-1-bg:    rgba(255,253,248,0.55);
  --glass-1-border:rgba(255,255,255,0.55);
  --glass-1-blur:  blur(22px) saturate(160%);

  --glass-2-bg:    rgba(255,253,248,0.40);
  --glass-2-border:rgba(255,255,255,0.45);
  --glass-2-blur:  blur(14px) saturate(150%);

  --glass-3-bg:    rgba(255,253,248,0.75);
  --glass-3-border:rgba(255,255,255,0.65);
  --glass-3-blur:  blur(28px) saturate(170%);

  /* ── gradients · one per phase mode ────────────────────── */

  /* Active — Sunrise. Warmest. Coach is engaged. */
  --grad-active:   linear-gradient(
                     170deg,
                     #fde9d6  0%,
                     #fbcdb1 36%,
                     #f5a08a 70%,
                     #ec8f9d 100%
                   );

  /* Maintenance — Dawn. Much paler. Coach is silent. */
  --grad-maint:    linear-gradient(
                     170deg,
                     #fbf3e6  0%,
                     #f6e3cd 40%,
                     #efd3c0 75%,
                     #ebc6b9 100%
                   );

  /* Inside Power Walk — deeper, more saturated. Used as a
     full-screen takeover during the walk modal only. */
  --grad-walk:     linear-gradient(
                     170deg,
                     #ed8f6a  0%,
                     #db5f3a 50%,
                     #9c3e29 100%
                   );

  /* ── semantic ────────────────────────────────────────────
     Use sparingly. The coach's prose carries 90% of the
     evaluative weight; these are for hard signals. */
  --signal-good:   #2f7d4f;
  --signal-warn:   #c08b1e;
  --signal-bad:    #b14a26;   /* same as clay-500 — never alarmist */

  /* ── typography ─────────────────────────────────────────── */
  --font-display:  'Instrument Serif', 'Newsreader', Georgia, serif;
  --font-ui:       'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* type scale (line-height embedded in usage; see ds page) */
  --t-d1:          44px;
  --t-d2:          32px;
  --t-d3:          24px;
  --t-h1:          20px;
  --t-h2:          17px;
  --t-body:        14px;
  --t-small:       13px;
  --t-xs:          11px;
  --t-micro:       10px;

  /* ── spacing scale · 4px base ─────────────────────────── */
  --s-1:           4px;
  --s-2:           8px;
  --s-3:           12px;
  --s-4:           16px;
  --s-5:           20px;
  --s-6:           24px;
  --s-7:           32px;
  --s-8:           48px;
  --s-9:           64px;

  /* ── radii ───────────────────────────────────────────── */
  --r-1:           4px;
  --r-2:           10px;     /* chips */
  --r-3:           14px;     /* small cards */
  --r-4:           22px;     /* stat cards */
  --r-5:           26px;     /* glass card · default */
  --r-6:           34px;     /* hero / large surfaces */
  --r-pill:        9999px;

  /* ── elevation ───────────────────────────────────────────
     Two layers only. App rarely needs more — gradient + glass
     do most of the depth work. */
  --shadow-1:      0 1px 0 rgba(255,255,255,0.55) inset,
                   0 6px 16px -10px rgba(21,20,14,0.18);
  --shadow-2:      0 1px 0 rgba(255,255,255,0.60) inset,
                   0 14px 32px -16px rgba(21,20,14,0.25);

  /* ── motion ─────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.55, 1);
  --d-fast:        160ms;
  --d-base:        240ms;
  --d-slow:        420ms;
}

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display: swap;src:url('/fonts/instrument-serif-regular.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026,U+2192}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display: swap;src:url('/fonts/instrument-serif-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026,U+2192}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display: swap;src:url('/fonts/inter-regular.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026,U+2192}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display: swap;src:url('/fonts/inter-medium.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026,U+2192}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display: swap;src:url('/fonts/inter-semibold.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026,U+2192}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display: swap;src:url('/fonts/jetbrains-mono-regular.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026,U+2192}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display: swap;src:url('/fonts/jetbrains-mono-medium.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026,U+2192}
@font-face{font-family:'Fazon Serif Fallback';src:local('Georgia');size-adjust:98%;ascent-override:89%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Fazon Sans Fallback';src:local('Arial'),local('Liberation Sans');size-adjust:101%;ascent-override:91%;descent-override:23%;line-gap-override:0%}
@font-face{font-family:'Fazon Mono Fallback';src:local('Menlo'),local('Courier New'),local('Liberation Mono');size-adjust:100%;ascent-override:90%;descent-override:25%;line-gap-override:0%}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;scroll-padding-top:68px}
body{margin:0;min-width:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--font-ui);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--clay-500)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r-1)}
main:focus{outline:none}
.wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(var(--s-5),4vw,56px)}
.skip-link{position:absolute;top:var(--s-2);left:var(--s-2);z-index:60;transform:translateY(-160%);background:var(--paper);padding:var(--s-3) var(--s-4);border-radius:var(--r-2)}
.skip-link:focus{transform:none}
.site-header{position:sticky;top:0;z-index:40;background:rgba(244,236,224,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--hairline)}
.site-header .in{display:flex;align-items:center;gap:28px;height:67px}
.logo{font:400 30px/1 var(--font-display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.header-cluster{display:flex;align-items:center;gap:28px;margin-inline-start:auto;min-width:0}
.nav{display:flex;gap:26px;align-items:center;white-space:nowrap}
.nav a{font:500 14px/1 var(--font-ui);color:var(--ink-2);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.lang{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--hairline);border-radius:var(--r-pill);white-space:nowrap}
.lang a,.lang span{display:inline-flex;align-items:center;min-height:24px;padding:5px 8px;border-radius:var(--r-pill);font:500 11px/1 var(--font-mono);letter-spacing:.06em;text-decoration:none}
.lang a{color:var(--ink-3)}
.lang a:hover{color:var(--ink);background:var(--paper-2)}
.lang span{color:var(--paper);background:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font:600 16px/1 var(--font-ui);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--ink-2);color:var(--paper)}
.btn.sm{min-height:38px;padding:0 16px;font-size:14px}
main{min-height:54vh}
.placeholder{display:grid;align-content:center;min-height:54vh;padding-block:var(--s-9)}
.placeholder .eyebrow{font:500 12px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-7)}
.placeholder h1{font:400 clamp(4rem,11vw,9rem)/.94 var(--font-display);letter-spacing:-.02em}
.placeholder h1 em{font-weight:400}
.placeholder .lede{font-size:clamp(18px,2vw,25px);max-width:570px;margin-top:var(--s-7);color:var(--ink-2)}
.site-footer{border-top:1px solid var(--hairline);padding:56px 0 40px;font-size:14px;background:var(--paper)}
.site-footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
.footer-brand p{max-width:250px;margin-top:var(--s-4);color:var(--ink-3)}
.footer-nav{grid-column:2 / 5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.site-footer h2{font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .base{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between;margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--hairline);color:var(--ink-3)}
.cta{display:grid;gap:var(--s-3);max-width:520px}
.cta-lede{font-size:16px;color:var(--ink-2)}
.cta-note{font-size:var(--t-small);line-height:1.45;color:var(--ink-3)}
.cta-mail{display:grid;gap:var(--s-3)}
.cta-mail>.btn{justify-self:start;min-height:46px}
.cta-send{font-size:16px;color:var(--ink-2)}
.cta-fallback{display:grid;gap:var(--s-2);font-size:var(--t-small);line-height:1.45;color:var(--ink-2)}
.cta-fallback dl{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:0}
.cta-fallback dl>div{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;min-width:0}
.cta-fallback dt{font-weight:500}
.cta-fallback dd{margin:0;min-width:0}
.cta-value{user-select:all;-webkit-user-select:all;overflow-wrap:anywhere;font:500 .92em var(--font-mono);padding:1px 6px;border-radius:6px;background:var(--paper-2);border:1px solid var(--hairline);color:var(--ink)}
@media(max-width:719px){
  .cta-mail>.btn{justify-self:stretch;min-height:44px}
  .cta-fallback dl{display:grid;gap:var(--s-2)}
  .cta-fallback dl>div{display:grid;gap:2px}
}
.appstore{display:inline-flex;width:max-content;max-width:100%;padding:10px}
.appstore img{display:block;width:auto;height:40px;max-width:100%}
@media(min-width:1024px) and (max-width:1279px){.nav{gap:20px}.header-cluster{gap:20px}}
@media(max-width:1023px){.site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-nav{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7)}}
@media(max-width:560px){.placeholder h1{font-size:clamp(64px,18vw,110px)}}
@media(prefers-reduced-transparency:reduce){.site-header{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}}
.menu-btn{display:none;height:38px;padding:0 14px;border:1px solid var(--hairline);background:transparent;border-radius:var(--r-pill);font:500 14px/1 var(--font-ui);color:var(--ink);white-space:nowrap;flex-shrink:0;cursor:pointer}
.menu-btn[aria-expanded="true"]{border-color:var(--ink)}
.menu-btn::before,.header-cta::before{content:"";position:absolute;inset:-4px 0}
.menu-btn,.header-cta{position:relative}
.mnav[hidden]{display:none}
.mnav{max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain}
.mnav-inner{display:grid;padding-block:4px 20px}
.mnav-inner > a{display:flex;align-items:center;min-height:48px;font:400 30px/1.3 var(--font-display);text-decoration:none}
.mnav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.mnav .lang{width:max-content;margin-top:12px}
.header-lang--alone{display:block}
.lang a,.lang span{min-height:44px}
@media(max-width:900px){
  .site-header .in,.header-cluster{gap:10px}
  .site-header .nav,.header-lang:not(.header-lang--alone){display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .header-cluster{flex-shrink:0}
  .site-header .logo{flex-shrink:1;min-width:0}
}
@media(max-width:359px){.site-header .in,.header-cluster{gap:6px}.site-header .wrap{padding-inline:16px}.site-header .logo{font-size:24px}}
@media(max-width:760px){
  .site-footer{padding-block:40px}
  .site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .footer-brand{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--hairline)}
  .footer-brand p{margin:0}
  .footer-nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .footer-column{min-width:0}
  .footer-column a{display:flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
  .footer-column--legal{grid-column:1/-1}
  .footer-column--legal h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .footer-column--legal ul{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
  .footer-column--legal a{min-height:24px;color:var(--ink-3)}
  .site-footer .base{margin-top:28px;justify-content:flex-start;gap:12px 24px}
  .site-footer .base .lang{margin-inline-start:auto}
}
@media(max-width:440px){
  .cta>a.btn{width:100%}
  .site-footer .base .lang{margin-inline-start:0}
}
.cta{container-type:inline-size}
.cta-closed{color:var(--ink-2)}
.appstore img{height:48px;width:auto}

/* PRD-180: the rendered header CTA meets the touch floor at every width. */
.site-header .btn.header-cta{min-height:44px}