:root{
    --bg: #150F0A;
    --panel: #241A11;
    --panel-2: #2E2115;
    --ember: #FF4B26;
    --gold: #FFB238;
    --ember-dim: #C43A1C;
    --gold-dim: #E0A039;
    --steel: #A8998A;
    --text: #FCF2E6;
    --text-dim: #B9A996;
    --line: #3D2C1D;
    --ink: #170F09;
    --shadow-card: 0 8px 20px -10px rgba(0,0,0,0.6);
    --shadow-lift: 0 14px 30px -10px rgba(0,0,0,0.6);
    --shadow-cta: 0 10px 26px -10px rgba(255,90,40,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
    --shadow-cta-hover: 0 16px 34px -10px rgba(255,90,40,0.65), inset 0 1px 0 rgba(255,255,255,0.28);
    --blue: #4F9DFF;
    --blue-dim: #2E6FCC;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0; padding:0; height:100%;
    background:var(--bg);
    color:var(--text);
    font-family:'Manrope', sans-serif;
  }
  #app{
    display:flex; flex-direction:column;
    height:100vh; height:100dvh; max-width:640px; margin:0 auto;
    border-left:1px solid var(--line); border-right:1px solid var(--line);
    position:relative; overflow:hidden;
    background:
      radial-gradient(ellipse 700px 500px at 15% 0%, rgba(255,178,56,0.07) 0%, rgba(255,178,56,0) 55%),
      radial-gradient(ellipse 900px 700px at 100% 100%, rgba(255,75,38,0.10) 0%, rgba(255,75,38,0) 55%),
      var(--bg);
  }
  /* Grain is a pre-rendered tile now: the old live SVG turbulence filter +
     blend mode was re-rasterized over the whole screen and made scrolling
     stutter on phones. */
  .grain{
    position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;
    opacity:0.05; background:url(../assets/grain.png) repeat; background-size:160px 160px;
  }
  .grain > *{ display:none; }
  /* The gradients are already soft, so no blur filter; the layers are
     promoted so the drift animation runs on the GPU compositor only. */
  .glow{
    position:absolute; top:-120px; left:38%; transform:translateX(-50%);
    width:480px; height:280px; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(255,75,38,0.35) 0%, rgba(255,75,38,0) 70%);
    animation:glowDrift 7s ease-in-out infinite;
    transform-origin:center; will-change:transform, opacity;
  }
  .glow-gold{
    position:absolute; top:-100px; left:68%; transform:translateX(-50%);
    width:360px; height:240px; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(255,178,56,0.22) 0%, rgba(255,178,56,0) 70%);
    animation:glowDrift 9s ease-in-out infinite reverse;
    transform-origin:center; will-change:transform, opacity;
  }
  @keyframes glowDrift{
    0%,100%{ transform:translateX(-50%) scale(1); opacity:0.9; }
    50%{ transform:translateX(-50%) scale(1.18); opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .glow, .glow-gold{ animation:none; }
  }
  header{
    padding:22px 24px 18px;
    /* Transparent by default (the hero/auth screen, where the header floats
       over the photo - see .hero below) - a real line here draws straight
       across the image and is exactly the hard "cut" that made the photo
       read as pasted on rather than part of the page. body.in-app (added
       once a real screen - chat, calendar, onboarding - is showing, where
       there's flat panel color instead of a photo behind the header)
       restores it as a normal divider. */
    border-bottom:1px solid transparent;
    display:flex; align-items:center; gap:12px;
    position:relative; z-index:1;
  }
  body.in-app header{ border-bottom-color:var(--line); }
  .emblem{ width:36px; height:36px; flex-shrink:0; animation:emblemPulse 3.5s ease-in-out infinite; will-change:transform; }
  /* transform-only: animating filter/drop-shadow repaints every frame */
  @keyframes emblemPulse{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.07); }
  }
  @media (prefers-reduced-motion: reduce){
    .emblem{ animation:none; }
  }
  .wordmark{
    font-family:'Anton', sans-serif;
    font-weight:400;
    font-size:27px;
    letter-spacing:0.07em;
    line-height:1;
    text-transform:uppercase;
    background:linear-gradient(120deg, var(--text) 0%, var(--text) 40%, var(--gold) 75%, var(--ember) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .tagline{ font-size:12px; color:var(--text-dim); margin-top:4px; letter-spacing:0.02em; }
  .ai-badge{
    display:inline-block; vertical-align:middle; margin-left:2px; margin-top:-4px;
    font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:10px;
    letter-spacing:0.06em; padding:2px 6px; border-radius:99px;
    border:1px solid var(--gold-dim); color:var(--gold);
    background:none; -webkit-background-clip:initial; background-clip:initial;
  }

  .streak-badge{
    margin-left:auto; display:flex; align-items:center; gap:6px;
    padding:6px 12px; background:var(--panel); color:var(--gold); flex-shrink:0;
    clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    box-shadow:inset 0 0 0 1px var(--gold-dim), 0 0 14px -4px rgba(255,178,56,0.4);
  }
  .streak-badge svg{ width:14px; height:14px; }
  .streak-badge span{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }

  #setup{
    padding:28px 24px; overflow-y:auto; flex:1; min-height:0; display:none;
    position:relative; -webkit-overflow-scrolling:touch;
  }

  .q-progress{ height:3px; background:var(--line); border-radius:2px; margin-bottom:32px; overflow:hidden; }
  .q-progress-fill{
    height:100%; width:16.6%; border-radius:2px;
    background:linear-gradient(90deg, var(--gold), var(--ember));
    transition:width 0.4s ease;
  }

  .q-step{
    display:none;
    animation:qIn 0.35s ease;
  }
  .q-step.active{ display:block; }
  @keyframes qIn{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .q-step.leaving{
    animation:qOut 0.25s ease forwards;
  }
  @keyframes qOut{
    from{ opacity:1; transform:translateY(0); }
    to{ opacity:0; transform:translateY(-14px); }
  }

  .q-eyebrow{
    font-family:'Manrope',sans-serif; font-weight:700; font-size:12px;
    color:var(--gold); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px;
    display:flex; align-items:center; gap:7px;
  }
  .q-eyebrow::before{
    content:''; width:6px; height:6px; background:var(--gold); transform:rotate(45deg);
    flex-shrink:0;
  }
  .q-step h2{
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:29px; margin:0 0 20px;
    letter-spacing:-0.005em; text-transform:uppercase; line-height:1.05;
  }
  .q-step .sub{ color:var(--text-dim); font-size:13.5px; margin:-12px 0 20px; line-height:1.5; }

  .q-options{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
  .q-opt{
    text-align:left; background:var(--panel); border:1px solid var(--line);
    color:var(--text); padding:15px 16px; border-radius:5px; cursor:pointer;
    font-family:'Manrope',sans-serif; font-size:15px; font-weight:500;
    box-shadow:var(--shadow-card);
    transition:border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  .q-opt:hover{ border-color:var(--gold-dim); transform:translateX(2px) translateY(-1px); box-shadow:0 10px 22px -10px rgba(255,178,56,0.3); }
  .q-opt.selected{
    border-color:var(--gold);
    background:linear-gradient(90deg, rgba(255,178,56,0.12), rgba(255,75,38,0.08));
    color:var(--text);
    box-shadow:0 0 0 1px var(--gold), 0 8px 20px -10px rgba(255,178,56,0.35);
  }

  .cta-blade, .q-continue, #qAccountContinue, #goalCustomContinue, #beginBtn, #authSubmit, .side-new, #saveSettings, .pdf-btn{
    position:relative; overflow:hidden; isolation:isolate;
    clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    background:linear-gradient(120deg, var(--gold) 0%, var(--ember) 58%, var(--ember-dim) 100%);
    box-shadow:var(--shadow-cta);
    transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
  .cta-blade::before, .q-continue::before, #qAccountContinue::before, #goalCustomContinue::before, #beginBtn::before, #authSubmit::before, .side-new::before, #saveSettings::before, .pdf-btn::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    background-size:220% 100%; background-position:220% 0;
    transition:background-position 0.55s ease; pointer-events:none;
  }
  .cta-blade:hover, .q-continue:hover, #qAccountContinue:hover, #goalCustomContinue:hover, #beginBtn:hover, #authSubmit:hover, .side-new:hover, #saveSettings:hover, .pdf-btn:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow-cta-hover);
  }
  .cta-blade:hover::before, .q-continue:hover::before, #qAccountContinue:hover::before, #goalCustomContinue:hover::before, #beginBtn:hover::before, #authSubmit:hover::before, .side-new:hover::before, #saveSettings:hover::before, .pdf-btn:hover::before{
    background-position:-40% 0;
  }
  .cta-blade:active, .q-continue:active, #qAccountContinue:active, #goalCustomContinue:active, #beginBtn:active, #authSubmit:active, .side-new:active, #saveSettings:active, .pdf-btn:active{
    transform:translateY(0); filter:brightness(0.96);
  }
  @media (prefers-reduced-motion: reduce){
    .cta-blade, .q-continue, #qAccountContinue, #goalCustomContinue, #beginBtn, #authSubmit, .side-new, #saveSettings, .pdf-btn{ transition:none; }
    .cta-blade::before, .q-continue::before, #qAccountContinue::before, #goalCustomContinue::before, #beginBtn::before, #authSubmit::before, .side-new::before, #saveSettings::before, .pdf-btn::before{ transition:none; }
  }

  .q-continue, #qAccountContinue, #goalCustomContinue{
    width:100%; padding:14px; margin-top:8px;
    border:none; color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:16px;
    letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  }

  .q-back{
    position:absolute; top:28px; right:24px; font-size:12px; color:var(--text-dim);
    cursor:pointer; text-decoration:underline; text-decoration-color:var(--line);
    display:none;
  }
  .q-back.show{ display:block; }
  .q-back:hover{ color:var(--text); }

  #injuries{
    width:100%; background:var(--panel); border:1px solid var(--line);
    color:var(--text); padding:10px 12px; border-radius:3px;
    font-family:inherit; font-size:14px; min-height:70px; resize:vertical;
    margin-bottom:4px;
  }
  #injuries::placeholder{ color:var(--text-dim); }
  #injuries:focus{ outline:none; border-color:var(--gold-dim); }
  .unit-toggle{ display:flex; gap:6px; margin-bottom:18px; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:4px; box-shadow:inset 0 2px 5px rgba(0,0,0,0.35); }
  .unit-opt{
    flex:1; background:transparent; border:none; color:var(--text-dim);
    padding:8px; font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700;
    letter-spacing:0.02em; border-radius:3px; cursor:pointer;
  }
  .unit-opt.selected{ background:var(--gold-dim); color:var(--text); }
  #setup h2{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800; font-size:29px; margin:0 0 6px;
    letter-spacing:-0.005em; text-transform:uppercase; line-height:1.05;
  }
  #setup p.sub{ color:var(--text-dim); font-size:13.5px; margin:0 0 24px; line-height:1.5; }
  .field{ margin-bottom:18px; }
  .field label{
    display:block; font-size:12px; color:var(--text-dim);
    margin-bottom:6px; letter-spacing:0.03em; text-transform:uppercase; font-weight:600;
  }
  .field input, .field select, .field textarea{
    width:100%; background:var(--panel); border:1px solid var(--line);
    color:var(--text); padding:10px 12px; border-radius:3px;
    font-family:inherit; font-size:14px;
  }
  .field textarea{ min-height:60px; resize:vertical; }
  .hint{ font-size:11.5px; color:var(--text-dim); margin-top:6px; line-height:1.5; }
  .tone-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .tone-opt{
    border:1px solid var(--line); background:var(--panel);
    padding:10px; border-radius:3px; font-size:13px; cursor:pointer;
    text-align:left; color:var(--text-dim); font-weight:500;
    transition:border-color 0.15s, background 0.15s;
  }
  .tone-opt:hover{ border-color:var(--ember-dim); }
  .tone-opt.selected{ border-color:var(--ember); color:var(--text); background:var(--panel-2); }

  #beginBtn{
    width:100%; padding:14px; margin-top:8px;
    border:none; color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:16px;
    letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  }

  #authScreen{ overflow-y:auto; flex:1; min-height:0; display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; }

  .hero{
    position:relative; width:100%; height:300px; flex-shrink:0;
    background:linear-gradient(150deg, #3A1A0E 0%, #1A0F0A 75%);
    overflow:hidden; perspective:800px;
    /* Normal flow, right below the header - no crop trick, the whole head
       stays visible (see object-position below). The header itself has no
       fill and no border in this state (see header{} / body.in-app below),
       so there's no drawn line at that boundary; this mask fades the photo's
       OWN top/left/right/bottom edges into the page's --bg so it dissolves
       into the background instead of ending in a hard rectangle - the actual
       fix for "pasted on", independent of the header. */
    mask-image: radial-gradient(120% 105% at 50% 42%, #000 68%, transparent 100%);
    -webkit-mask-image: radial-gradient(120% 105% at 50% 42%, #000 68%, transparent 100%);
  }
  .hero img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 8%;
    /* Full grayscale, tinted below via mix-blend-mode:color - a real duotone
       (brand gold in the highlights, near-black in the shadows) rather than a
       stock photo with a translucent color wash over it. Reads as art
       directed instead of "generic fitness stock photo", which is what this
       screen was getting called out for (2026-09-24). */
    filter:grayscale(100%) contrast(1.3) brightness(0.92); opacity:1;
    transform:scale(1.06); transition:transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
    will-change:transform;
  }
  @media (prefers-reduced-motion: reduce){
    .hero img{ transition:none; }
  }
  .hero-tint{
    position:absolute; inset:0;
    background:linear-gradient(165deg, rgba(255,178,56,0.55) 0%, rgba(20,10,8,0.93) 85%);
    mix-blend-mode:color;
  }
  .hero-fade{
    position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(20,15,10,0) 78%, var(--bg) 100%);
  }
  .hero-text{ position:absolute; left:24px; right:24px; bottom:20px; z-index:2; }
  .hero-eyebrow{
    font-family:'Manrope',sans-serif; font-weight:700; font-size:11px;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;
    display:flex; align-items:center; gap:7px;
  }
  .hero-eyebrow::before{
    content:''; width:7px; height:7px; background:var(--gold); transform:rotate(45deg);
    box-shadow:0 0 8px rgba(255,178,56,0.7); flex-shrink:0;
  }
  .hero-title{
    font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:44px; line-height:0.95;
    text-transform:uppercase; color:var(--text); letter-spacing:-0.01em; margin:0;
  }
  .hero-accent{
    font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400;
    text-transform:none; letter-spacing:0; color:var(--gold);
    text-shadow:0 0 18px rgba(255,178,56,0.4);
  }
  .auth-body{ padding:20px 24px 28px; }
  .trial-hook{
    display:flex; align-items:center; justify-content:center; gap:7px;
    background:linear-gradient(90deg, rgba(255,178,56,0.14), rgba(255,75,38,0.14));
    box-shadow:inset 0 0 0 1px var(--gold-dim); border-radius:20px;
    padding:8px 14px; margin:0 0 18px; text-align:center;
    font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; color:var(--gold);
  }
  .trial-hook-icon{ flex-shrink:0; color:var(--gold); }
  .lang-toggle{ display:flex; gap:16px; justify-content:flex-end; margin-bottom:18px; }
  .lang-opt{
    flex:none; background:transparent; border:none; color:var(--text-dim);
    padding:2px 0; font-family:'Manrope',sans-serif; font-size:12px; font-weight:600;
    letter-spacing:0.02em; cursor:pointer;
    text-decoration:underline; text-decoration-color:transparent; transition:color 0.15s, text-decoration-color 0.15s;
  }
  .lang-opt:hover{ color:var(--text); }
  .lang-opt.selected{ color:var(--text); text-decoration-color:var(--gold); }
  .auth-tabs{ display:flex; gap:6px; margin-bottom:20px; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:4px; box-shadow:inset 0 2px 5px rgba(0,0,0,0.35); }
  .auth-tab{
    flex:1; background:transparent; border:none; color:var(--text-dim);
    padding:9px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:700;
    letter-spacing:0.03em; text-transform:uppercase; border-radius:3px; cursor:pointer;
  }
  .auth-tab.selected{ background:linear-gradient(120deg, var(--gold) 0%, var(--ember) 58%, var(--ember-dim) 100%); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,0.22); }
  .auth-error{ color:var(--ember); font-size:12.5px; min-height:0; margin-bottom:4px; }
  .auth-error:not(:empty){ margin-bottom:14px; }
  .consent-row{
    display:flex; align-items:flex-start; gap:10px; margin-bottom:12px;
    cursor:pointer; font-size:12.5px; line-height:1.5; color:var(--text-dim);
  }
  .consent-row input[type="checkbox"]{
    flex-shrink:0; margin-top:2px; width:16px; height:16px; accent-color:var(--gold);
    cursor:pointer;
  }
  .consent-row a{ color:var(--gold-dim); text-decoration:underline; }
  .consent-row a:hover{ color:var(--gold); }
  .legal-links{
    margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
    text-align:center; font-size:12px; color:var(--text-dim);
  }
  .legal-links a{ color:var(--text-dim); text-decoration:underline; }
  .legal-links a:hover{ color:var(--gold); }
  .legal-links span{ margin:0 8px; }

  .danger-zone{
    margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,75,38,0.25);
  }
  .danger-zone-title{
    font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ember); margin-bottom:10px;
  }
  .danger-btn{
    width:100%; padding:12px; border:1px solid var(--ember-dim); border-radius:4px;
    background:transparent; color:var(--ember); font-family:'Manrope',sans-serif;
    font-weight:700; font-size:13.5px; cursor:pointer; transition:all 0.2s ease;
  }
  .danger-btn:hover{ background:rgba(255,75,38,0.1); border-color:var(--ember); }
  .danger-warning{ font-size:13px; line-height:1.6; color:var(--text-dim); margin:12px 0 10px; }
  .danger-actions{ display:flex; gap:10px; margin-top:10px; }
  .danger-actions .secondary-btn{ flex:1; }
  .danger-actions .danger-btn{ flex:1; }
  .forgot-link{
    text-align:right; margin-top:8px; font-size:12px; color:var(--text-dim);
    text-decoration:underline; text-decoration-color:var(--line); cursor:pointer;
  }
  .forgot-link:hover{ color:var(--text); }
  #authSubmit{
    width:100%; padding:14px; margin-top:8px;
    border:none; color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:16px;
    letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  }
  .founder-link{
    text-align:center; margin-top:22px; font-size:12px; color:var(--text-dim);
    text-decoration:underline; text-decoration-color:var(--line); cursor:pointer;
  }
  .founder-link:hover{ color:var(--text); }
  /* A single bold gradient CTA (#authSubmit) is the one action on this screen
     that should compete for attention - these are secondary wayfinding, not
     alternative calls to action, so they read as a plain link list (no
     border, no fill, no pill shape) rather than three more buttons the same
     visual weight as "Get started". Three bordered pill buttons stacked here
     was exactly the kind of undifferentiated, everything-is-a-button clutter
     that reads as unpolished/templated (2026-09-24 feedback). */
  .tutorial-link-group{
    display:flex; flex-direction:column;
    margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  }
  .tutorial-link{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:9px 4px;
    background:transparent; border:none; border-radius:0;
    color:var(--text-dim); font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:12.5px;
    letter-spacing:0.01em; cursor:pointer;
  }
  .tutorial-link svg{ width:15px; height:15px; flex-shrink:0; opacity:0.8; color:var(--gold-dim); }
  .tutorial-link svg:last-child{ width:12px; height:12px; opacity:0.6; transition:transform 0.15s ease; }
  .tutorial-link:hover{ color:var(--gold); }
  .tutorial-link:hover svg{ opacity:1; color:var(--gold); }
  .tutorial-link:hover svg:last-child{ transform:translateX(3px); }
  /* pricingSettingsBtn reuses .tutorial-link outside the auth screen, as a
     small inline settings link - it already overrides width:auto, so it
     never gets the flex-column list treatment above. */
  .secondary-btn{
    width:100%; padding:11px; margin-top:8px;
    background:transparent; border:1px solid var(--line); color:var(--text);
    font-family:'Manrope',sans-serif; font-weight:700; font-size:13px;
    letter-spacing:0.02em; border-radius:3px; cursor:pointer;
  }
  .secondary-btn:hover{ border-color:var(--ember-dim); }

  .ask-demo{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
  .ask-demo-eyebrow{
    font-family:'Manrope',sans-serif; font-weight:700; font-size:11px;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;
    display:flex; align-items:center; gap:7px;
  }
  .ask-demo-eyebrow::before{
    content:''; width:7px; height:7px; background:var(--gold); transform:rotate(45deg);
    box-shadow:0 0 8px rgba(255,178,56,0.7); flex-shrink:0;
  }
  .ask-demo-title{
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:24px; line-height:1.15;
    text-transform:none; letter-spacing:-0.005em; margin:0 0 16px; color:var(--text);
  }
  .ask-demo-title .hero-accent{ text-shadow:0 0 14px rgba(255,178,56,0.35); }

  .ask-console{
    background:var(--panel); border:1px solid var(--line);
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow:var(--shadow-card); padding:16px; margin-bottom:14px;
  }
  .ask-console-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .ask-console-dot{
    width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;
    box-shadow:0 0 8px rgba(255,178,56,0.7);
    animation:askDotPulse 2s ease-in-out infinite;
  }
  @keyframes askDotPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
  @media (prefers-reduced-motion: reduce){ .ask-console-dot{ animation:none; } }
  .ask-console-label{
    font-family:'Instrument Sans',sans-serif; font-size:11px; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim);
  }
  .ask-console-badge{
    margin-left:auto; font-family:'Instrument Sans',sans-serif; font-size:10px; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--gold);
    border:1px solid var(--gold-dim); padding:2px 8px; border-radius:20px;
  }
  .ask-disclaimer{ font-size:11.5px; color:var(--text-dim); margin:10px 0 14px; }

  .ask-chips{ display:flex; flex-direction:column; gap:8px; }
  .ask-chip{
    text-align:left; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
    padding:11px 13px; font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600;
    border-radius:3px; cursor:pointer;
    transition:border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
  .ask-chip:hover:not(:disabled){
    border-color:var(--gold-dim); transform:translateX(2px);
    box-shadow:0 8px 18px -10px rgba(255,178,56,0.3);
  }
  .ask-chip:disabled{ opacity:0.4; cursor:default; }
  .ask-chip.selected{ border-color:var(--gold); color:var(--gold); }
  @media (prefers-reduced-motion: reduce){ .ask-chip{ transition:none; } }

  .ask-typing{ display:none; gap:9px; align-items:center; margin-top:14px; }
  .ask-typing.show{ display:flex; }
  .ask-reply{ display:none; gap:9px; align-items:flex-start; margin-top:14px; animation:riseIn 0.32s ease-out; }
  .ask-reply.show{ display:flex; }
  .ask-reply-bubble{
    flex:1; padding:13px 16px; border-radius:4px; font-size:14.5px; line-height:1.6;
    background:var(--panel-2); color:#DDD6CE;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    box-shadow:inset 0 0 0 1px var(--line);
  }
  .ask-reply-bubble .ask-cursor{
    display:inline-block; width:2px; height:1em; background:var(--gold);
    margin-left:2px; vertical-align:text-bottom; animation:askCaretBlink 0.9s steps(1) infinite;
  }
  @keyframes askCaretBlink{ 50%{ opacity:0; } }
  @media (prefers-reduced-motion: reduce){ .ask-reply{ animation:none; } .ask-reply-bubble .ask-cursor{ animation:none; } }

  .ask-demo-cta{
    width:100%; padding:13px; border:none; color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:14.5px;
    letter-spacing:0.03em; text-transform:uppercase; cursor:pointer;
  }

  .feature-showcase{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
  .streak-demo{
    display:flex; align-items:center; gap:16px;
    background:var(--panel); border:1px solid var(--line);
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow:var(--shadow-card); padding:16px; margin-bottom:16px;
  }
  .streak-demo-days{ flex:1; }
  .streak-demo-days .cal-day{ font-size:11px; transition:background 0.3s ease, border-color 0.3s ease; cursor:default; }
  .streak-demo-days .cal-ring{ transition:opacity 0.3s ease; }
  .streak-demo-counter{
    flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding-left:16px; border-left:1px solid var(--line); min-width:84px;
  }
  .streak-demo-counter svg{
    width:22px; height:22px; color:var(--gold);
    filter:drop-shadow(0 0 6px rgba(255,178,56,0.5));
  }
  .streak-demo-counter span:nth-child(2){
    font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:700; color:var(--text);
    font-variant-numeric:tabular-nums; line-height:1.1; margin-top:2px;
  }
  .streak-demo-counter span:nth-child(3){
    font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; text-align:center;
  }
  .feature-flourish{ margin:14px 0 0; font-size:19px; text-align:center; }

  .team-showcase-demo{
    background:var(--panel); border:1px solid var(--line);
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow:var(--shadow-card); padding:4px 16px; margin-bottom:16px;
  }
  .team-showcase-demo .team-roster-row{ padding:12px 0; }
  .team-showcase-demo .team-roster-row + .team-roster-row{ border-top:1px solid var(--line); }

  .calorie-demo-feed{ flex:1; min-width:0; }
  .calorie-demo-feed-label{
    font-family:'Instrument Sans',sans-serif; font-size:10.5px; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px;
  }
  .calorie-demo-feed-text{
    font-size:14px; color:var(--text); line-height:1.4;
    transition:opacity 0.25s ease;
  }
  .feature-chips{ display:flex; flex-direction:column; gap:8px; }
  .feature-chip{
    display:flex; align-items:center; gap:11px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:3px;
    padding:11px 13px; font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600; color:var(--text);
  }
  .feature-chip svg{ width:19px; height:19px; color:var(--gold); flex-shrink:0; }

  #resetPanel{ padding:28px 24px; overflow-y:auto; flex:1; min-height:0; -webkit-overflow-scrolling:touch; display:none; }
  #resetPanel h2{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:26px; text-transform:uppercase; margin:0 0 8px; }
  #resetPanel .cta-blade{ width:100%; padding:14px; border:none; color:var(--ink); font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:16px; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; margin-top:6px; }

  #founderPanel{ padding:28px 24px; overflow-y:auto; flex:1; min-height:0; -webkit-overflow-scrolling:touch; display:none; }
  .founder-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px; background:var(--panel); border:1px solid var(--line);
    border-radius:4px; margin-bottom:10px; cursor:pointer;
  }
  .founder-row:hover{ border-color:var(--ember-dim); }
  .founder-row .fu-name{ font-weight:700; font-size:14.5px; }
  .founder-row .fu-meta{ font-size:12px; color:var(--text-dim); margin-top:2px; }
  .founder-empty{ color:var(--text-dim); font-size:13.5px; }

  #chat{
    flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px 24px; display:none; flex-direction:column; gap:14px;
    position:relative; z-index:1;
  }
  .msg-row{ display:flex; gap:9px; align-items:flex-end; animation:riseIn 0.32s ease-out; }
  .msg-row.user{ flex-direction:row-reverse; }
  @keyframes riseIn{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* Scroll-driven section reveals were removed — Safari's animation-timeline:
     view() implementation has real jank/freeze issues on iOS that didn't show
     up testing against Chromium, and this effect was purely decorative. Kept
     as plain, always-visible elements instead. */
  .reveal-on-scroll{ opacity:1; transform:none; }
  .mini-avatar{
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    background:var(--panel-2); border:1px solid var(--ember-dim);
    display:flex; align-items:center; justify-content:center;
  }
  .mini-avatar svg{ width:17px; height:17px; }
  .msg{ max-width:78%; padding:13px 16px; border-radius:4px; font-size:15.5px; line-height:1.65; }
  .msg.coach{
    background:var(--panel); font-weight:400; color:#DDD6CE;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    box-shadow:inset 0 0 0 1px var(--line), var(--shadow-card);
  }
  .msg.user{
    background:linear-gradient(135deg, var(--ember-dim), var(--ember)); color:#fff; font-weight:500;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    box-shadow:var(--shadow-card);
  }

  .msg.coach > div{ margin-bottom:9px; }
  .msg.coach > div:last-child{ margin-bottom:0; }
  .msg.coach .msg-h{
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:17px; color:var(--gold);
    margin:14px 0 7px; letter-spacing:0.01em; text-transform:uppercase;
    display:flex; align-items:center; gap:8px;
  }
  .msg.coach .msg-h::before{
    content:''; width:7px; height:7px; background:var(--gold); flex-shrink:0;
    transform:rotate(45deg); box-shadow:0 0 6px rgba(255,178,56,0.6);
  }
  .msg.coach .msg-h:first-child{ margin-top:0; }
  .msg.coach ul{ list-style:none; margin:4px 0 10px; padding-left:0; }
  .msg.coach li{
    margin-bottom:7px; padding-left:18px; position:relative;
  }
  .msg.coach li::before{
    content:''; position:absolute; left:2px; top:7px;
    width:6px; height:6px; background:var(--gold); transform:rotate(45deg);
  }
  .msg.coach .msg-gap{ height:2px; margin-bottom:0 !important; }
  .msg.coach strong{ color:var(--text); font-weight:700; }
  .line-in{ animation:lineIn 0.3s ease-out; }
  @keyframes lineIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .video-block{ margin:8px 0; max-width:100%; }
  .video-label{
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:13px; color:var(--gold);
    letter-spacing:0.02em; text-transform:uppercase; margin-bottom:6px;
    display:flex; align-items:center; gap:7px;
  }
  .video-label::before{
    content:''; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;
  }
  .video-cta{
    display:flex; align-items:center; gap:12px; width:100%;
    background:var(--panel-2); border:1px solid var(--line); border-radius:4px;
    padding:12px 14px; text-decoration:none; cursor:pointer;
    transition:border-color 0.2s, transform 0.15s;
  }
  .video-cta:hover{ border-color:var(--gold-dim); transform:translateY(-1px); }
  .video-cta-icon{
    width:34px; height:34px; flex-shrink:0; border-radius:50%;
    background:#FF0000; display:flex; align-items:center; justify-content:center;
  }
  .video-cta-icon svg{ width:14px; height:14px; margin-left:2px; }
  .video-cta-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .video-cta-title{ font-size:14px; font-weight:700; color:var(--text); }
  .video-cta-sub{
    font-family:'Instrument Sans',sans-serif; font-size:11px; color:var(--text-dim);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .video-cta-arrow{ color:var(--text-dim); flex-shrink:0; }
  .video-cta:hover .video-cta-arrow{ color:var(--gold); }

  .meal-block{
    display:flex; align-items:center; gap:12px; margin:8px 0;
    padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:5px;
  }
  .meal-icon{ width:38px; height:38px; flex-shrink:0; }
  .meal-icon svg{ width:100%; height:100%; }
  .meal-eyebrow{ font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; }
  .meal-name{ font-size:14px; font-weight:500; color:var(--text); margin-top:2px; }

  .ex-card-wrap{ margin:8px 0; }
  .ex-card{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; background:var(--panel);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    box-shadow:inset 0 0 0 1px var(--line), var(--shadow-card);
    cursor:pointer; transition:background 0.2s, box-shadow 0.2s, transform 0.15s;
  }
  .ex-card:hover{ box-shadow:inset 0 0 0 1px var(--gold-dim), var(--shadow-lift); transform:translateY(-1px); }
  .ex-card.done{ background:linear-gradient(90deg, rgba(255,178,56,0.08), rgba(255,75,38,0.05)); box-shadow:inset 0 0 0 1px var(--gold-dim), var(--shadow-card); }
  .ex-check{
    width:26px; height:26px; flex-shrink:0; border-radius:50%;
    border:2px solid var(--line); background:transparent; color:transparent;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:all 0.2s; padding:0;
  }
  .ex-check svg{ width:15px; height:15px; }
  .ex-check.checked{
    background:linear-gradient(135deg, var(--gold), var(--ember));
    border-color:transparent; color:#1A0F08;
    transform:scale(1.08);
  }
  .ex-info{ flex:1; min-width:0; }
  .ex-video-btn{
    width:24px; height:24px; flex-shrink:0; border-radius:50%;
    border:1.5px solid var(--line); background:transparent; color:var(--text-dim);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-family:'Instrument Sans',sans-serif; font-size:12.5px; font-weight:700;
    transition:all 0.2s; padding:0;
  }
  .ex-video-btn:hover{ border-color:var(--gold-dim); color:var(--gold); }
  .ex-video-btn.active{ background:var(--gold-dim); border-color:var(--gold-dim); color:var(--bg); }
  .ex-video-slot:not(:empty){ margin-top:8px; }
  .ex-name{ font-size:14.5px; font-weight:700; color:var(--text); transition:color 0.2s; }
  .ex-detail{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim); margin-top:3px; letter-spacing:0.01em; font-variant-numeric:tabular-nums; }
  .ex-card.done .ex-name{ color:var(--text-dim); text-decoration:line-through; text-decoration-color:var(--gold-dim); }
  .ex-card.done .ex-detail{ text-decoration:line-through; text-decoration-color:var(--line); }

  .ex-complete-banner{
    margin-top:10px; padding:12px 14px; border-radius:6px; text-align:center;
    background:linear-gradient(135deg, rgba(255,178,56,0.16), rgba(255,75,38,0.12));
    border:1px solid var(--gold-dim); color:var(--gold); font-weight:700; font-size:13.5px;
    animation:banIn 0.35s ease;
  }
  @keyframes banIn{
    from{ opacity:0; transform:translateY(-6px) scale(0.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }

  .pdf-block{ margin:10px 0; }
  .pdf-btn{
    display:flex; align-items:center; gap:9px;
    width:100%; padding:13px 16px;
    border:none; color:var(--ink);
    font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px;
    cursor:pointer;
  }
  .pdf-btn svg{ width:18px; height:18px; flex-shrink:0; position:relative; z-index:1; }
  .pdf-btn span{ position:relative; z-index:1; }

  .typing-row{ display:none; gap:9px; align-items:center; padding:0 24px 12px; position:relative; z-index:1; }
  .typing-row.show{ display:flex; }
  .typing-dots{ display:flex; gap:3px; background:var(--panel); border:1px solid var(--line); padding:9px 12px; border-radius:4px; }
  .typing-dots span{
    width:5px; height:5px; border-radius:50%; background:var(--text-dim);
    animation:bounce 1.1s infinite ease-in-out;
  }
  .typing-dots span:nth-child(2){ animation-delay:0.15s; }
  .typing-dots span:nth-child(3){ animation-delay:0.3s; }
  @keyframes bounce{
    0%,60%,100%{ transform:translateY(0); opacity:0.5; }
    30%{ transform:translateY(-4px); opacity:1; }
  }

  #inputRow{
    display:none; align-items:center; gap:4px;
    margin:0 24px 20px; padding:6px 6px 6px 18px;
    background:var(--panel); border:1px solid var(--line); border-radius:28px;
    position:relative; z-index:1;
    transition:border-color 0.15s, box-shadow 0.15s;
  }
  #inputRow.flex{ display:flex; }
  #inputRow:focus-within{
    border-color:var(--ember-dim);
    box-shadow:0 0 0 3px rgba(255,75,38,0.12);
  }
  #msgInput{
    flex:1; background:transparent; border:none;
    color:var(--text); padding:11px 6px; min-width:0;
    font-family:'Manrope', sans-serif; font-size:15.5px; font-weight:500;
    letter-spacing:0.005em;
    resize:none; overflow-y:auto; max-height:120px; line-height:1.4;
  }
  #msgInput::placeholder{ color:var(--text-dim); font-weight:400; }
  #msgInput:focus{ outline:none; }
  #micBtn, #sendBtn{
    width:38px; height:38px; flex-shrink:0; border-radius:50%; border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background 0.15s, color 0.15s;
  }
  #micBtn{ background:transparent; color:var(--text-dim); }
  #micBtn svg{ width:19px; height:19px; }
  #micBtn:hover{ background:var(--panel-2); color:var(--text); }
  #micBtn.listening{
    background:var(--ember); color:#fff;
    animation:micPulse 1.2s infinite ease-in-out;
  }
  #micBtn.unsupported{ display:none; }
  @keyframes micPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,75,38,0.45); }
    50%{ box-shadow:0 0 0 7px rgba(255,75,38,0); }
  }
  #sendBtn{ background:linear-gradient(135deg, var(--ember), var(--gold)); color:#1A0F08; }
  #sendBtn svg{ width:17px; height:17px; }
  #sendBtn:hover{ filter:brightness(1.1); }
  #photoBtn{
    width:38px; height:38px; flex-shrink:0; border-radius:50%; border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:transparent; color:var(--text-dim); transition:background 0.15s, color 0.15s, transform 0.15s;
  }
  #photoBtn svg{ width:19px; height:19px; }
  #photoBtn:hover{ background:var(--panel-2); color:var(--text); }
  #photoBtn.open{ color:var(--gold); transform:rotate(45deg); }

  .attach-menu{
    display:none; flex-direction:column; gap:2px;
    position:absolute; bottom:calc(100% + 10px); left:0;
    background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
    padding:6px; min-width:190px; z-index:5;
    box-shadow:0 16px 32px -8px rgba(0,0,0,0.5);
    animation:menuIn 0.15s ease;
  }
  .attach-menu.show{ display:flex; }
  @keyframes menuIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .attach-menu-item{
    display:flex; align-items:center; gap:11px;
    background:transparent; border:none; color:var(--text);
    text-align:left; padding:10px 11px; border-radius:6px; cursor:pointer;
    font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600;
  }
  .attach-menu-item:hover{ background:var(--panel); }
  .attach-menu-item svg{ width:18px; height:18px; flex-shrink:0; color:var(--text-dim); }

  #attachPreview{ display:none; margin:0 24px 10px; position:relative; z-index:1; }
  #attachPreview.show{ display:flex; align-items:center; gap:10px; }
  #attachPreview img{ width:52px; height:52px; object-fit:cover; border-radius:4px; border:1px solid var(--line); }
  #attachPreview .ap-file-icon{
    width:52px; height:52px; flex-shrink:0; border-radius:4px; border:1px solid var(--line);
    background:var(--panel); display:flex; align-items:center; justify-content:center; color:var(--gold);
  }
  #attachPreview .ap-file-icon svg{ width:24px; height:24px; }
  #attachPreview .ap-info{ font-size:12px; color:var(--text-dim); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #attachPreview .ap-remove{
    background:var(--panel); border:1px solid var(--line); color:var(--text-dim);
    width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:14px;
    display:flex; align-items:center; justify-content:center;
  }
  #attachPreview .ap-remove:hover{ color:var(--ember); border-color:var(--ember-dim); }

  .msg-img{ max-width:220px; border-radius:4px; border:1px solid var(--line); display:block; margin-bottom:6px; }
  .msg-video-wrap{ position:relative; display:inline-block; margin-bottom:6px; }
  .msg-video-wrap .msg-img{ margin-bottom:0; }
  .status-note{
    margin:-6px 0 14px 44px; padding-right:16px;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; line-height:1.5;
    color:var(--text-dim);
  }
  .status-note.ok{ color:var(--gold); }
  .status-note.fail{ color:var(--ember); }
  .msg-video-badge{
    position:absolute; left:6px; bottom:6px; display:flex; align-items:center; gap:5px;
    background:rgba(10,7,5,0.72); backdrop-filter:blur(2px); color:var(--text);
    padding:4px 8px; border-radius:99px; font-family:'Instrument Sans',sans-serif;
    font-size:11px; font-weight:700; letter-spacing:0.01em;
  }
  .msg-video-badge svg{ width:12px; height:12px; color:var(--gold); flex-shrink:0; }
  .msg-file-chip{
    display:flex; align-items:center; gap:9px; padding:9px 12px;
    background:rgba(0,0,0,0.18); border-radius:5px; margin-bottom:6px;
    font-size:13px; font-weight:700;
  }
  .msg-file-chip svg{ width:18px; height:18px; flex-shrink:0; }
  .msg-file-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


  #menuBtn{
    width:34px; height:34px; flex-shrink:0; background:transparent; border:none;
    color:var(--text-dim); border-radius:4px; cursor:pointer; display:none;
    align-items:center; justify-content:center;
  }
  #menuBtn.show{ display:flex; }
  #menuBtn svg{ width:20px; height:20px; }
  #menuBtn:hover{ color:var(--text); background:var(--panel-2); }

  /* The side sheet stays built (just hidden off-screen) instead of display:none,
     so opening only moves it: phones used to spend the whole 0.2s slide
     building the sheet on the first frame, so it "appeared" instead of sliding
     in (2026-10-04). .show slides it in; removing .show slides it back out. */
  #sidePanel{
    position:absolute; inset:0; z-index:20; display:block;
    background-color:transparent; visibility:hidden; pointer-events:none;
    transition:background-color .26s ease, visibility 0s linear .26s;
  }
  #sidePanel.show{
    background-color:rgba(10,7,5,0.6); visibility:visible; pointer-events:auto;
    transition:background-color .26s ease, visibility 0s;
  }
  .side-sheet{
    position:absolute; top:0; left:0; bottom:0; width:82%; max-width:300px;
    background:var(--panel); border-right:1px solid var(--line);
    padding:20px 16px; display:flex; flex-direction:column;
    transform:translateX(-100%); will-change:transform;
    transition:transform .26s cubic-bezier(.22,.8,.3,1);
  }
  #sidePanel.show .side-sheet{ transform:translateX(0); }
  @media (prefers-reduced-motion: reduce){
    #sidePanel, #sidePanel.show, .side-sheet{ transition:none; }
  }
  .side-close{ align-self:flex-end; color:var(--text-dim); cursor:pointer; font-size:18px; margin-bottom:10px; }
  .side-new{
    width:100%; padding:12px; margin-bottom:16px;
    border:none; color:var(--ink);
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:15px;
    letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  }
  .side-label{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; font-weight:700; margin-bottom:8px; }
  .side-chats{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:6px; }
  .side-chat-row{
    padding:10px 12px; border-radius:4px; cursor:pointer; font-size:13.5px;
    color:var(--text-dim); border:1px solid transparent;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .side-chat-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .side-chat-delete{
    background:none; border:none; padding:6px; margin:-6px -6px -6px 0; cursor:pointer;
    color:var(--text-dim); opacity:0.7; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  }
  .side-chat-delete:hover{ color:var(--ember); opacity:1; }
  .side-chat-delete svg{ width:15px; height:15px; }
  .side-chat-row:hover{ background:var(--panel-2); }
  .side-chat-row.active{ background:var(--panel-2); border-color:var(--gold-dim); color:var(--text); }
  .side-footer{ border-top:1px solid var(--line); padding-top:12px; margin-top:12px; display:flex; flex-direction:column; gap:4px; }
  .side-footer-btn{
    background:transparent; border:none; color:var(--text-dim); text-align:left;
    padding:9px 4px; font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; gap:11px;
  }
  .side-footer-btn:hover{ color:var(--gold); }
  .side-footer-btn .side-icon{ width:17px; height:17px; flex-shrink:0; }

  #settingsPanel{
    position:absolute; inset:0; z-index:17; display:none; flex-direction:column;
    background:var(--bg);
  }
  #settingsPanel.show{ display:flex; }
  #tosPanel, #privacyPanel{
    position:absolute; inset:0; z-index:20; display:none; flex-direction:column;
    background:var(--bg);
  }
  #tosPanel.show, #privacyPanel.show{ display:flex; }
  .legal-doc{ max-width:620px; }
  .legal-doc .legal-updated{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-dim); margin:0 0 20px; }
  .legal-doc h3{
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:15px;
    text-transform:uppercase; letter-spacing:0.02em; color:var(--gold); margin:26px 0 8px;
  }
  .legal-doc h3:first-of-type{ margin-top:0; }
  .legal-doc p{ font-size:14px; line-height:1.65; color:var(--text); margin:0 0 10px; }
  .legal-doc ul{ margin:0 0 10px; padding-left:20px; }
  .legal-doc li{ font-size:14px; line-height:1.65; color:var(--text); margin-bottom:6px; }
  .legal-doc b{ color:var(--gold-dim); }
  .legal-doc a{ color:var(--gold-dim); }
  .legal-doc a:hover{ color:var(--gold); }
  .settings-head{
    padding:20px 24px 16px; border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
  }
  .settings-head h2{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:24px; margin:0; text-transform:uppercase; letter-spacing:-0.005em; }
  .settings-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px 24px; }
  .settings-close{ color:var(--text-dim); cursor:pointer; font-size:13px; text-decoration:underline; }
  .settings-close:hover{ color:var(--text); }
  .settings-select{
    width:100%; background:var(--panel); border:1px solid var(--line);
    color:var(--text); padding:10px 12px; border-radius:3px; font-family:inherit; font-size:14px;
  }
  .q-options.compact{ gap:7px; }
  .q-options.compact .q-opt{ padding:10px 14px; font-size:13.5px; }
  #saveSettings{
    width:100%; padding:14px; margin-top:10px;
    border:none; color:var(--ink);
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:16px;
    letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
  }

  #calendarPanel{
    position:absolute; inset:0; z-index:15; display:none; flex-direction:column;
    background:var(--bg);
  }
  #calendarPanel.show{ display:flex; }

  #pricingPanel{
    position:absolute; inset:0; z-index:16; display:none; flex-direction:column;
    background:var(--bg);
  }
  #pricingPanel.show{ display:flex; }
  .pricing-sub{ font-size:14px; color:var(--text-dim); line-height:1.5; margin:0 0 20px; }
  .pricing-cards{ display:flex; flex-direction:column; gap:16px; }
  .pricing-card{
    position:relative; background:var(--panel); border:1px solid var(--line);
    border-radius:6px; padding:22px 20px 20px; box-shadow:var(--shadow-card);
  }
  .pricing-card.featured{
    border-color:transparent;
    background:
      linear-gradient(var(--panel), var(--panel)) padding-box,
      linear-gradient(120deg, var(--gold), var(--ember)) border-box;
    border:2px solid transparent;
    box-shadow:var(--shadow-card), 0 0 24px -8px rgba(255,120,40,0.45);
  }
  .pricing-card-badge{
    position:absolute; top:-11px; right:16px; padding:4px 10px;
    background:var(--ember); color:var(--text); font-family:'Big Shoulders Display',sans-serif;
    font-weight:800; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase;
    border-radius:3px; box-shadow:0 4px 10px -2px rgba(0,0,0,0.5);
  }
  .pricing-card-badge.gold{ background:linear-gradient(90deg, var(--gold), var(--ember)); color:var(--ink); }
  .pricing-card-eyebrow{
    font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:13px;
    color:var(--gold-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px;
  }
  .pricing-card-price{
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:44px;
    line-height:1; color:var(--text); letter-spacing:-0.01em;
  }
  .pricing-card-price span{ font-size:16px; font-weight:600; color:var(--text-dim); margin-left:3px; }
  .pricing-card-sub{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim);
    margin:4px 0 16px;
  }
  .pricing-features{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; }
  .pricing-features li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.4; color:var(--text); }
  .pricing-features svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--gold); }
  .pricing-cta{
    width:100%; min-height:62px; margin-top:20px; padding:20px 22px;
    border:none; color:var(--ink); cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:12px;
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:21px;
    letter-spacing:0.05em; text-transform:uppercase; line-height:1;
    box-shadow:0 14px 30px -10px rgba(255,90,40,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .pricing-cta span{ position:relative; z-index:2; }
  .pricing-cta::after{
    content:''; position:relative; z-index:2; width:22px; height:22px; flex-shrink:0;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:transform 0.18s ease;
  }
  .pricing-cta:hover::after{ transform:translateX(5px); }
  .pricing-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -10px rgba(255,90,40,0.85), inset 0 1px 0 rgba(255,255,255,0.35); }
  .pricing-cta:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }
  .pricing-cta:disabled{ opacity:0.6; cursor:default; transform:none; }
  .pricing-card.featured .pricing-cta{
    min-height:72px; padding:24px 22px; font-size:25px; margin-top:24px;
    box-shadow:0 18px 40px -10px rgba(255,120,40,0.9), 0 0 0 2px rgba(255,178,56,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
    animation:ctaGlow 2.6s ease-in-out infinite;
  }
  /* was a box-shadow animation (repaints every frame); now a gentle
     transform pulse that runs on the compositor */
  @keyframes ctaGlow{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.015); }
  }
  @media (prefers-reduced-motion: reduce){
    .pricing-card.featured .pricing-cta{ animation:none; }
    .pricing-cta::after{ transition:none; }
  }
  .pricing-promo-hint{ font-size:12px; color:var(--text-dim); text-align:center; margin:18px 0 0; line-height:1.5; }
  .pricing-trial-hint{ font-size:11.5px; color:var(--text-dim); text-align:center; margin:10px 0 0; line-height:1.4; }

  #tutorialPanel{
    position:absolute; inset:0; z-index:17; display:none; flex-direction:column;
    background:var(--bg);
  }
  #tutorialPanel.show{ display:flex; }
  .tutorial-cards{ display:flex; flex-direction:column; gap:12px; }
  .tutorial-card{
    background:var(--panel); border:1px solid var(--line); border-radius:6px;
    padding:16px 18px; box-shadow:var(--shadow-card);
  }
  .tutorial-card-icon{
    width:32px; height:32px; border-radius:50%; background:var(--ink);
    display:flex; align-items:center; justify-content:center; color:var(--gold);
    margin-bottom:10px;
  }
  .tutorial-card-icon svg{ width:17px; height:17px; }
  .tutorial-card-title{
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:17px;
    text-transform:uppercase; letter-spacing:0.01em; color:var(--text); margin-bottom:5px;
  }
  .tutorial-card-desc{ font-size:13.5px; line-height:1.5; color:var(--text-dim); }

  #caloriePanel{
    position:absolute; inset:0; z-index:15; display:none; flex-direction:column;
    background:var(--bg);
  }
  #caloriePanel.show{ display:flex; }
  .calorie-ring-wrap{ display:flex; justify-content:center; margin-bottom:18px; }
  .calorie-ring{
    width:168px; height:168px; border-radius:50%; position:relative;
    background:conic-gradient(var(--panel) 0% 100%);
    box-shadow:var(--shadow-card);
    transition:box-shadow 0.3s ease;
  }
  .calorie-ring.over-target{
    box-shadow:var(--shadow-card), 0 0 0 3px var(--ember), 0 0 18px -4px rgba(255,75,38,0.6);
  }
  .calorie-ring::before{
    content:''; position:absolute; inset:12px; border-radius:50%; background:var(--bg);
  }
  .calorie-ring-inner{
    position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
  }
  .calorie-ring-consumed{
    font-family:'Anton','Big Shoulders Display',sans-serif; font-weight:400; font-size:38px;
    color:var(--text); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:0.01em;
  }
  .calorie-ring-target-caption{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:0.03em;
  }
  .calorie-ring-over{
    font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; color:var(--ember);
    margin-top:2px;
  }

  .macro-legend{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
  .macro-chip{
    display:flex; align-items:center; gap:7px; background:var(--panel);
    border:1px solid var(--line); border-radius:99px; padding:7px 13px 7px 10px;
  }
  .macro-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .macro-chip[data-macro="protein"] .macro-dot{ background:var(--ember); }
  .macro-chip[data-macro="carbs"] .macro-dot{ background:var(--gold); }
  .macro-chip[data-macro="fat"] .macro-dot{ background:var(--blue); }
  .macro-label{
    font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:10.5px; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .macro-value{
    font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; color:var(--text);
    font-variant-numeric:tabular-nums;
  }
  .calorie-photo-count{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-dim);
    text-align:center; margin-top:8px; font-variant-numeric:tabular-nums;
  }
  .calorie-upload-btn{
    width:100%; padding:14px; border:none; color:var(--ink); margin-top:8px;
    font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:15px;
    letter-spacing:0.03em; text-transform:uppercase; cursor:pointer;
  }
  .calorie-upload-btn:disabled{
    opacity:0.6; cursor:default;
  }

  /* Meal-photo scan effect (Cal AI-style) - only shown in the Calorie Tracker
     while a just-picked photo is being analyzed. Scoped entirely to .calorie-scan
     so it can never leak into any other photo/upload flow in the app. */
  .calorie-scan{
    position:relative; width:100%; aspect-ratio:4/3; margin-top:12px;
    border-radius:6px; overflow:hidden; background:var(--panel);
    box-shadow:inset 0 0 0 1px var(--gold-dim), var(--shadow-card);
  }
  .calorie-scan-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:saturate(1.05) brightness(0.78);
  }
  .calorie-scan-sweep{
    position:absolute; left:0; right:0; top:0; height:34%;
    background:linear-gradient(180deg,
      rgba(255,178,56,0) 0%, rgba(255,178,56,0.22) 42%,
      rgba(255,178,56,0.62) 50%, rgba(255,178,56,0.22) 58%, rgba(255,178,56,0) 100%);
    mix-blend-mode:screen;
    animation:calorieScanSweep 1.9s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes calorieScanSweep{
    0%{ transform:translateY(-140%); }
    100%{ transform:translateY(420%); }
  }
  .calorie-scan-corner{
    position:absolute; width:20px; height:20px; opacity:0.85;
  }
  .calorie-scan-corner.tl{ top:9px; left:9px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); }
  .calorie-scan-corner.tr{ top:9px; right:9px; border-top:2px solid var(--gold); border-right:2px solid var(--gold); }
  .calorie-scan-corner.bl{ bottom:9px; left:9px; border-bottom:2px solid var(--gold); border-left:2px solid var(--gold); }
  .calorie-scan-corner.br{ bottom:9px; right:9px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); }
  .calorie-scan-label{
    position:absolute; left:0; right:0; bottom:0; padding:9px 10px 8px;
    text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    letter-spacing:0.04em; color:var(--text);
    background:linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0));
    animation:calorieScanLabelPulse 1.9s ease-in-out infinite;
  }
  @keyframes calorieScanLabelPulse{
    0%, 100%{ opacity:0.65; } 50%{ opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .calorie-scan-sweep{ animation:none; opacity:0.4; }
    .calorie-scan-label{ animation:none; }
  }

  /* Live in-app camera for meal photos - the scan sweep/corners above run WHILE
     framing the shot (full-screen, over the live feed), not just afterward.
     Still scoped to the Calorie Tracker only, same as .calorie-scan. */
  .calorie-camera{
    position:fixed; inset:0; z-index:120; background:#000;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .calorie-camera video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .calorie-camera-hint{
    position:absolute; top:max(20px, env(safe-area-inset-top)); left:0; right:0;
    text-align:center; font-family:'IBM Plex Mono',monospace; font-size:12.5px;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--text);
    text-shadow:0 1px 6px rgba(0,0,0,0.7);
  }
  .calorie-camera-close{
    position:absolute; top:max(16px, env(safe-area-inset-top)); right:16px;
    width:36px; height:36px; border-radius:50%; border:none;
    background:rgba(0,0,0,0.5); color:var(--text); font-size:15px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .calorie-camera-library{
    position:absolute; bottom:max(26px, env(safe-area-inset-bottom)); left:50%;
    transform:translateX(-50%); margin-top:auto;
    background:none; border:none; color:var(--text); font-family:'IBM Plex Mono',monospace;
    font-size:12px; letter-spacing:0.03em; text-decoration:underline; cursor:pointer;
    text-shadow:0 1px 6px rgba(0,0,0,0.7);
  }
  .calorie-camera-shutter{
    position:absolute; bottom:max(72px, calc(env(safe-area-inset-bottom) + 46px));
    left:50%; transform:translateX(-50%);
    width:70px; height:70px; border-radius:50%; cursor:pointer;
    background:linear-gradient(120deg, var(--gold) 0%, var(--ember) 100%);
    border:4px solid rgba(255,255,255,0.85); box-shadow:var(--shadow-cta);
    transition:transform 0.12s ease;
  }
  .calorie-camera-shutter:active{ transform:translateX(-50%) scale(0.92); }

  .calorie-today-label{
    font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--text-dim); margin:26px 0 12px;
  }
  .calorie-meal-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--panel); border:1px solid var(--line); border-radius:4px;
    padding:12px 14px; margin-bottom:8px;
  }
  .calorie-meal-desc{ font-size:13.5px; color:var(--text); flex:1; }
  .calorie-meal-stats{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold);
    font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0;
  }
  .calorie-meal-delete{
    background:none; border:none; padding:4px; margin:0; cursor:pointer;
    color:var(--text-dim); flex-shrink:0; display:flex; align-items:center; justify-content:center;
  }
  .calorie-meal-delete:hover{ color:var(--ember); }
  .calorie-meal-delete svg{ width:15px; height:15px; }
  .cal-month-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .cal-nav-btn{
    width:34px; height:34px; border-radius:50%; background:var(--panel); border:1px solid var(--line);
    color:var(--text); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .cal-nav-btn:hover{ border-color:var(--gold-dim); }
  .cal-month-label{
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:19px; letter-spacing:0.01em; text-transform:uppercase;
  }
  .cal-weekdays{
    display:grid; grid-template-columns:repeat(7,1fr); text-align:center;
    font-size:11px; color:var(--text-dim); font-weight:700; margin-bottom:6px;
  }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
  .cal-day{
    aspect-ratio:1; border-radius:6px; background:var(--panel); border:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:500;
    font-variant-numeric:tabular-nums; color:var(--text); position:relative;
    transition:border-color 0.15s, background 0.15s;
  }
  .cal-day:hover{ border-color:var(--gold-dim); }
  .cal-day.pad{ background:transparent; border-color:transparent; cursor:default; }
  .cal-day.today{ border-color:var(--gold); font-weight:700; }
  .cal-day .cal-daynum{ position:relative; z-index:1; }
  .cal-day .cal-ring{
    position:absolute; inset:3px; border-radius:50%; pointer-events:none;
    background:conic-gradient(var(--gold) calc(var(--pct,0) * 1%), var(--ember-dim) 0);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  }
  .cal-day.complete .cal-ring{ background:var(--gold); }
  .cal-day.complete{ background:linear-gradient(135deg, rgba(255,178,56,0.1), rgba(255,75,38,0.06)); }

  .cal-day.recovery{ border-color:var(--blue-dim); background:linear-gradient(135deg, rgba(79,157,255,0.12), rgba(79,157,255,0.03)); }
  .cal-day.recovery .cal-ring{ background:conic-gradient(var(--blue) calc(var(--pct,0) * 1%), var(--blue-dim) 0); }
  .cal-day.recovery.complete{ background:linear-gradient(135deg, rgba(79,157,255,0.2), rgba(79,157,255,0.08)); }
  .cal-day.recovery.complete .cal-ring{ background:var(--blue); }
  .cal-day.recovery.today{ border-color:var(--blue); }

  /* a day with more than one session: "x2" marker on the month cell, and a heading per session in the day view */
  .cal-day .cal-multi{
    position:absolute; top:3px; right:4px; z-index:1; pointer-events:none;
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; line-height:1; color:var(--gold);
  }
  .cal-day.recovery .cal-multi{ color:var(--blue); }
  .cal-session-head{ margin:22px 0 10px; padding-top:16px; border-top:1px solid var(--line); }
  .cal-session-head:first-child{ margin-top:4px; padding-top:0; border-top:0; }
  .cal-session-title{
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:19px; text-transform:uppercase;
    letter-spacing:-0.005em; margin-bottom:6px;
  }
  .cal-session-head .cal-day-notes{ margin-bottom:0; }

  .cal-day-badge{
    display:inline-block; font-family:'Instrument Sans',sans-serif; font-size:10.5px; font-weight:700;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--blue);
    border:1px solid var(--blue-dim); padding:3px 9px; border-radius:20px; margin-bottom:10px;
  }

  .cal-day-back{
    font-size:12.5px; color:var(--text-dim); cursor:pointer; margin-bottom:16px;
    text-decoration:underline; text-decoration-color:var(--line);
  }
  .cal-day-back:hover{ color:var(--text); }
  .cal-day-title{
    font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:24px; text-transform:uppercase; letter-spacing:-0.005em;
    margin-bottom:6px;
  }
  .cal-day-notes{ font-size:13px; color:var(--text-dim); margin-bottom:16px; line-height:1.5; }
  .cal-day-empty{ color:var(--text-dim); font-size:13.5px; text-align:center; padding:30px 0; }
  .cal-day-warn{
    margin:-4px 0 14px; padding:10px 12px; font-size:13px; line-height:1.45;
    color:var(--gold); background:var(--panel-2); border:1px solid var(--gold-dim); border-radius:6px;
  }
  .checkin-prompt{
    margin-top:20px; padding:16px; background:var(--panel); border:1px solid var(--gold-dim);
    border-radius:4px; text-align:center;
  }
  .checkin-prompt-title{
    font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:17px;
    letter-spacing:0.02em; text-transform:uppercase; color:var(--gold);
  }
  .checkin-prompt-sub{ font-size:13px; color:var(--text-dim); line-height:1.5; margin:6px 0 4px; }
  .checkin-thread-label{
    margin:22px 0 10px; font-size:11px; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--text-dim);
  }
  #calCheckinMsgs{ display:flex; flex-direction:column; gap:8px; }
  .checkin-msg{
    max-width:88%; padding:10px 13px; border-radius:4px; font-size:14px; line-height:1.55;
    white-space:pre-wrap; overflow-wrap:anywhere;
  }
  .checkin-msg.coach{ align-self:flex-start; background:var(--panel); color:#DDD6CE; box-shadow:inset 0 0 0 1px var(--line); }
  .checkin-msg.user{ align-self:flex-end; background:linear-gradient(135deg, var(--ember-dim), var(--ember)); color:#fff; }
  .checkin-msg strong{ color:var(--text); }
  #calCheckinMsgs .status-note{ margin:0; padding:0 4px; }
  .checkin-typing{ margin-top:8px; font-size:12px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; }
  .checkin-input-row{ display:flex; gap:8px; align-items:flex-end; margin-top:12px; }
  .checkin-input-row textarea{
    flex:1; resize:none; max-height:110px; padding:10px 12px; border-radius:3px;
    background:var(--panel); border:1px solid var(--line); color:var(--text);
    font-family:'Manrope',sans-serif; font-size:14px; line-height:1.4;
  }
  .checkin-input-row textarea:focus{ outline:none; border-color:var(--gold-dim); }
  .checkin-input-row button{
    padding:10px 16px; border:none; border-radius:3px; cursor:pointer;
    background:linear-gradient(135deg, var(--ember-dim), var(--ember)); color:#fff;
    font-family:'Manrope',sans-serif; font-weight:700; font-size:13px;
  }
  .checkin-input-row button:disabled{ opacity:0.55; cursor:default; }

  /* Install-on-your-phone sheet */
  #installSheet{
    position:fixed; inset:0; z-index:400; display:none; align-items:flex-end; justify-content:center;
    background:rgba(10,6,3,0.72); padding:0;
  }
  #installSheet.show{ display:flex; }
  .install-card{
    width:100%; max-width:480px; background:var(--panel); border:1px solid var(--gold-dim);
    border-bottom:none; border-radius:14px 14px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:14px;
  }
  .install-card h2{ font-size:20px; margin:0; color:var(--text); letter-spacing:0.01em; }
  .install-sub{ margin:0; font-size:13.5px; line-height:1.5; color:var(--text-dim); }
  #installSheetBody{ display:flex; flex-direction:column; gap:10px; }
  .install-step{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.45; color:var(--text); }
  .install-step-n{
    flex:0 0 26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:var(--bg); background:linear-gradient(135deg, var(--gold), var(--ember));
  }
  .install-note{ margin:0; font-size:14px; line-height:1.5; color:var(--text); }
  .install-go{
    margin-top:4px; min-height:52px; border:none; border-radius:6px; cursor:pointer; font-size:16px; font-weight:700;
    letter-spacing:0.04em; text-transform:uppercase; color:var(--bg); background:linear-gradient(90deg, var(--gold), var(--ember));
  }
  .install-close{
    min-height:44px; background:transparent; border:1px solid var(--gold-dim); color:var(--gold);
    border-radius:6px; cursor:pointer; font-size:14px;
  }
  @media (min-width:600px){
    #installSheet{ align-items:center; }
    .install-card{ border-bottom:1px solid var(--gold-dim); border-radius:14px; }
  }
  /* Touch feel: no tap delay/flash, no rubber-band bounce in the installed app */
  html, body{ overscroll-behavior-y:none; -webkit-text-size-adjust:100%; }
  button, a, input, textarea, select, [role="button"], .q-opt, .tone-opt, .side-footer-btn, .side-chat-row, .pricing-cta{
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  }
  #chat, .settings-body, .side-sheet, #installSheet{ overscroll-behavior:contain; }

  /* Reopening a long chat renders every message at once - don't also run an
     entrance animation on each of them. */
  #chat .msg-row.replayed, #chat .msg-row.replayed .line-in{ animation:none; }

  /* Returning users go straight to a splash while their saved session is
     restored, instead of flashing the login screen first. */
  #splash{ display:none; position:fixed; inset:0; z-index:500; align-items:center; justify-content:center; background:var(--bg); }
  html.restoring #splash{ display:flex; }
  html.restoring #authScreen{ display:none !important; }
  #splash svg{ width:64px; height:64px; animation:emblemPulse 1.6s ease-in-out infinite; will-change:transform; }
  @media (prefers-reduced-motion: reduce){ #splash svg{ animation:none; } }
  /* While Tharvik is replying, other chats and "New chat" wait (see setReplyInFlight) */
  .side-busy-hint{ display:none; margin:0 0 12px; padding:9px 12px; font-size:12.5px; line-height:1.45; color:var(--gold); background:var(--panel-2); border:1px solid var(--gold-dim); border-radius:6px; }
  body.reply-busy .side-busy-hint{ display:block; }
  body.reply-busy #newChatBtn,
  body.reply-busy .side-chat-row:not(.active){ opacity:0.45; cursor:not-allowed; }
  /* one reply at a time (see sendMessage): Send waits, the typed text stays */
  body.reply-busy #sendBtn{ opacity:0.45; cursor:not-allowed; }
  /* Consent gate (existing users who have not yet given explicit consent) */
  #consentGate, #recoveryGate{ position:fixed; inset:0; z-index:450; display:none; align-items:center; justify-content:center; background:rgba(10,6,3,0.92); padding:16px; overflow-y:auto; }
  #consentGate.show, #recoveryGate.show{ display:flex; }
  .consent-card{ width:100%; max-width:480px; background:var(--panel); border:1px solid var(--gold-dim); border-radius:12px; padding:22px 20px; display:flex; flex-direction:column; gap:14px; max-height:100%; overflow-y:auto; }
  .consent-card h2{ margin:0; font-size:20px; color:var(--text); }
  .consent-card p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--text-dim); }
  .consent-card .consent-row{ font-size:12.5px; line-height:1.5; }
  .consent-card a, .consent-row a{ color:var(--gold); }
/* ===== Clean background + light theme (2026-09-21) ===================
   The old film-grain tile and animated orange glows sat over every screen and
   read as a distorted, noisy background - removed. Colours below are all
   driven by variables so a second theme is just a variable swap. */
.grain, .glow, .glow-gold{ display:none; }
#app{ background:var(--bg); }
:root{
  --bubble-text:#DDD6CE;
  --hero-end:#150F0A;
  --inset-shade:rgba(0,0,0,0.35);
}
.hero-fade{ background:linear-gradient(to bottom, rgba(20,15,10,0) 78%, var(--hero-end) 100%); }
.hero .hero-title{ color:#FCF2E6; }
.hero .hero-eyebrow, .hero .hero-accent{ color:#FFB238; }
.msg.coach, .checkin-msg.coach{ color:var(--bubble-text); }
.unit-toggle, .auth-tabs{ box-shadow:inset 0 2px 5px var(--inset-shade); }
.pricing-promo-hint a{ color:var(--text-dim); text-decoration:underline; }
.pricing-promo-hint a:hover{ color:var(--gold); }

#themeBtn{
  flex-shrink:0; width:38px; height:38px; margin-left:8px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:50%; color:var(--text-dim);
  transition:color .15s ease, border-color .15s ease;
}
#themeBtn:hover{ color:var(--gold); border-color:var(--gold-dim); }
#themeBtn svg{ width:18px; height:18px; }
#themeBtn .i-sun{ display:none; }
html[data-theme="light"] #themeBtn .i-sun{ display:block; }
html[data-theme="light"] #themeBtn .i-moon{ display:none; }
.header-spacer{ flex:1; }

html[data-theme="light"]{
  color-scheme:light;
  --bg:#F6F0E6;
  --panel:#FFFFFF;
  --panel-2:#F0E6D6;
  --gold:#B85F00;
  --gold-dim:#A35300;
  --ember:#DC3F19;
  --ember-dim:#B8320F;
  --steel:#7A6A5A;
  --text:#2B1C10;
  --text-dim:#6B5644;
  --line:#E0D2BF;
  --ink:#FFF8EE;
  --shadow-card:0 6px 16px -8px rgba(70,40,10,0.28);
  --shadow-lift:0 12px 26px -10px rgba(70,40,10,0.30);
  --bubble-text:#2B1C10;
  --hero-end:#F6F0E6;
  --inset-shade:rgba(70,40,10,0.14);
  --blue:#2E6FCC;
  --blue-dim:#2E6FCC;
}
html[data-theme="light"] header{ background:var(--bg); }
/* The photo itself stays a moody dark crop (needed for the white/gold hero
   text to read on it) - only the fade at its base changes, so it blends into
   the cream page below instead of ending in a hard dark rectangle. */
html[data-theme="light"] .hero{ background:linear-gradient(150deg, #C99A6E 0%, var(--bg) 85%); }
html[data-theme="light"] .streak-badge{ box-shadow:inset 0 0 0 1px var(--gold-dim); }
html[data-theme="light"] .ex-card.done,
html[data-theme="light"] .q-opt.selected{ box-shadow:inset 0 0 0 1px var(--gold-dim); }
/* Shine effect must not tile: it left a permanent pale band across every gradient button. */
.cta-blade::before, .q-continue::before, #qAccountContinue::before, #goalCustomContinue::before, #beginBtn::before, #authSubmit::before, .side-new::before, #saveSettings::before, .pdf-btn::before{ background-repeat:no-repeat; }
/* Hero text colours only apply on the dark photo, not to the same class reused on the page body. */

/* ===== Teams — coach/leader oversight (2026-09-22) =====================
   A leader sees a roster of members' calendars (scheduled sessions +
   done/skipped) - never chat content. Reuses the existing panel/field/button
   tokens throughout so it looks native to the rest of Settings/Calendar. */
#teamPanel{
  position:absolute; inset:0; z-index:15; display:none; flex-direction:column;
  background:var(--bg);
}
#teamPanel.show{ display:flex; }
.team-intro{ font-size:13px; line-height:1.55; color:var(--text-dim); margin:0 0 22px; }
.team-section-label{
  font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--gold-dim); margin:0 0 10px;
}
#teamLeaderSection{ margin-bottom:26px; }
#teamMemberSection{ margin-bottom:26px; }

.team-card{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:16px; margin-bottom:14px;
}
.team-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.team-card-name{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:19px;
  color:var(--text); text-transform:uppercase; letter-spacing:0.01em; margin:0;
}
.team-card-sub{ font-size:12px; color:var(--text-dim); margin-top:3px; }
.team-invite-row{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  background:var(--ink); border:1px solid var(--line); border-radius:5px; padding:9px 12px;
}
.team-invite-code{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:15px;
  letter-spacing:0.06em; color:var(--gold); flex:1;
}
.team-invite-copy{
  flex-shrink:0; background:transparent; border:1px solid var(--line); border-radius:4px;
  color:var(--text-dim); font-family:'Manrope',sans-serif; font-weight:700; font-size:11.5px;
  padding:5px 10px; cursor:pointer;
}
.team-invite-copy:hover{ border-color:var(--gold-dim); color:var(--gold); }
.team-card-actions{ display:flex; gap:8px; margin-top:12px; }
.team-card-actions .secondary-btn{ margin-top:0; flex:1; width:auto; }
.team-roster-toggle{ font-size:12.5px; }

.team-roster{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.team-roster-row{
  display:flex; align-items:center; gap:10px; padding:9px 0; flex-wrap:wrap;
}
.team-roster-row + .team-roster-row{ border-top:1px solid var(--line); }
.team-roster-name{
  flex:1; min-width:0; font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px;
  color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.team-roster-name .team-role-badge{
  font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:9.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--gold-dim); margin-left:6px;
}
.team-roster-streak{
  flex-shrink:0; display:flex; align-items:center; gap:3px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; color:var(--text-dim);
  min-width:30px;
}
.team-roster-streak svg{ width:12px; height:12px; color:var(--gold); }
.team-day-strip{ flex-shrink:0; display:flex; gap:3px; }
.team-day-dot{
  width:9px; height:9px; border-radius:2px; background:var(--line);
}
.team-day-dot[data-status="done"]{ background:var(--gold); }
.team-day-dot[data-status="partial"]{ background:var(--ember-dim); }
.team-day-dot[data-status="missed"]{ background:var(--ember); box-shadow:0 0 0 1px rgba(255,75,38,0.35); }
.team-day-dot[data-status="pending"]{ background:transparent; box-shadow:inset 0 0 0 1px var(--text-dim); }
.team-day-dot[data-status="rest"]{ background:var(--line); opacity:0.5; }
.team-roster-last{
  flex-shrink:0; font-size:11px; color:var(--text-dim); min-width:58px; text-align:right;
}
.team-roster-actions{
  flex-basis:100%; display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:2px;
}
.team-roster-view-btn, .team-roster-remove-btn{
  background:transparent; border:none; padding:0; cursor:pointer;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:11.5px;
  text-decoration:underline; text-decoration-color:var(--line);
}
.team-roster-view-btn{ color:var(--gold-dim); }
.team-roster-view-btn:hover{ color:var(--gold); text-decoration-color:var(--gold-dim); }
.team-roster-remove-btn{ color:var(--ember-dim); }
.team-roster-remove-btn:hover{ color:var(--ember); text-decoration-color:var(--ember-dim); }
.team-roster-remove-btn:disabled{ opacity:0.5; cursor:default; }

/* A leader's read-only look at one member's calendar - reuses the personal
   calendar's grid/day-view classes (.cal-day, .cal-grid, .cal-day-title...)
   so it looks native; .readonly strips the pointer/hover affordance from
   exercise cards since nothing here is clickable. */
#teamMemberCalendarPanel{
  position:absolute; inset:0; z-index:18; display:none; flex-direction:column;
  background:var(--bg);
}
#teamMemberCalendarPanel.show{ display:flex; }
.tmcal-subtitle{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; color:var(--gold-dim);
  margin-top:2px;
}
.tmcal-viewonly-note{
  font-size:12px; color:var(--text-dim); background:var(--panel); border:1px solid var(--line);
  border-radius:5px; padding:8px 10px; margin:0 0 16px; line-height:1.4;
}
.ex-card.readonly{ cursor:default; }
.ex-card.readonly:hover{ box-shadow:inset 0 0 0 1px var(--line), var(--shadow-card); transform:none; }

.team-getstarted{ display:flex; gap:10px; margin:6px 0 10px; }
.team-getstarted .secondary-btn{ margin-top:0; flex:1; width:auto; font-size:12.5px; padding:12px 8px; }
.team-getstarted-secondary{ text-align:center; margin-bottom:18px; }
.team-text-link{
  background:transparent; border:none; padding:0; cursor:pointer;
  font-family:'Manrope',sans-serif; font-size:12px; color:var(--text-dim);
  text-decoration:underline; text-decoration-color:var(--line);
}
.team-text-link:hover{ color:var(--gold); text-decoration-color:var(--gold-dim); }

.team-invite-leader-btn{
  margin-top:10px; background:transparent; border:1px dashed var(--gold-dim); border-radius:5px;
  padding:9px 12px; width:100%; color:var(--gold); font-family:'Manrope',sans-serif;
  font-weight:700; font-size:12.5px; cursor:pointer;
}
.team-invite-leader-btn:hover{ background:rgba(255,178,56,0.08); }
.team-invite-leader-btn:disabled{ opacity:0.5; cursor:default; }
.team-leader-invite-result{
  margin-top:10px; background:var(--ink); border:1px solid var(--gold-dim); border-radius:5px;
  padding:10px 12px;
}
.team-leader-invite-code{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:16px;
  letter-spacing:0.06em; color:var(--gold); display:block; margin-bottom:4px;
}
.team-leader-invite-hint{ font-size:11.5px; color:var(--text-dim); line-height:1.4; }

.team-form{
  background:var(--panel); border:1px solid var(--gold-dim); border-radius:8px;
  padding:16px; margin-bottom:18px;
}
.team-consent-row{ margin-top:4px; }
.team-form-actions{ display:flex; gap:10px; margin-top:4px; }
.team-form-actions .secondary-btn, .team-form-actions .cta-blade{ margin-top:0; flex:1; width:auto; }
.team-form-actions .cta-blade{
  padding:11px; border:none; color:var(--ink);
  font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:13.5px;
  letter-spacing:0.03em; text-transform:uppercase; cursor:pointer;
}