/* ==========================================================================
   TWO WAYS · APP 2026 DESIGN SYSTEM (Beta, 2026-10-12) — visual layer only.
   Loaded AFTER styles.css and overrides it. Copy/prices/legal untouched.
   Revert = remove the app-2026.css <link>, app-2026.js <script> and the
   <nav class="tw-tabbar"> block from each page (backup:
   tw-private/backups-site-redesign-2026-20261012-1350/).
   ========================================================================== */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/fraunces-soft-latin.woff2") format("woff2")}
:root{
  color-scheme:light dark;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-accent:"Fraunces","Instrument Serif",Georgia,serif;
  /* surfaces */
  --bg:#f5f3ee; --bg-2:#efece5; --surface:#ffffff; --surface-2:#faf8f4; --surface-tint:#eef4ec;
  --text:#14201a; --text-2:#4b5650; --text-3:#7a837e;
  --line:rgba(20,32,26,.08); --line-strong:rgba(20,32,26,.14);
  /* brand */
  --brand:#1f4d36; --brand-ink:#0f2a1d; --accent:#e0592f; --accent-press:#c44a24; --accent-soft:#fde9e1;
  --gold:#c9a227; --gold-soft:#f6ecc6; --ok:#2f7d4a;
  /* shape + depth */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-pill:999px;
  --radius:var(--r-md); --radius-card:var(--r-lg);
  --e1:0 1px 2px rgba(16,24,20,.05),0 1px 1px rgba(16,24,20,.03);
  --e2:0 1px 2px rgba(16,24,20,.04),0 6px 16px -4px rgba(16,24,20,.08),0 18px 40px -18px rgba(16,24,20,.12);
  --e3:0 2px 6px rgba(16,24,20,.06),0 18px 40px -12px rgba(16,24,20,.18);
  --shadow:var(--e2); --shadow-lift:var(--e3);
  --ease:cubic-bezier(.2,.8,.2,1);
  --tabbar-h:64px; --header-h:60px;
  /* type scale (fluid) */
  --t-xs:.78rem; --t-sm:.875rem; --t-md:1rem; --t-lg:1.125rem;
  --t-h3:clamp(1.12rem,1rem + .5vw,1.3rem);
  --t-h2:clamp(1.6rem,1.25rem + 1.6vw,2.4rem);
  --t-h1:clamp(2.1rem,1.5rem + 3vw,3.6rem);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0c110e; --bg-2:#111813; --surface:#151d18; --surface-2:#1a241e; --surface-tint:#16261c;
    --text:#ecf1ec; --text-2:#b4bfb8; --text-3:#87938c;
    --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.13);
    --brand:#8fd3a8; --brand-ink:#d9f2e2; --accent:#ff7a4d; --accent-press:#ff8f68; --accent-soft:#3a1d13;
    --gold-soft:#3a3115;
    --e1:0 1px 0 rgba(255,255,255,.03) inset; --e2:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -10px rgba(0,0,0,.6);
    --e3:0 1px 0 rgba(255,255,255,.05) inset,0 24px 50px -16px rgba(0,0,0,.7);
    /* map legacy tokens so old rules follow */
    --cream:#151d18; --cream-dark:#1a241e; --white:#151d18; --ink:#ecf1ec; --muted:#b4bfb8;
    --page-bg:#0c110e; --band-alt:#111813; --card:#151d18; --forest:#d9f2e2; --forest-mid:#8fd3a8; --forest-deep:#ecf1ec; --leaf-deep:#2f7d4a; --gold-ink:#f0cf6a;
    --ink-cream:#ecf1ec;
  }
}

/* ---------- Base ---------- */
html{scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
html body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--t-md);line-height:1.6;letter-spacing:-.006em;font-feature-settings:"cv11","ss01","ss03"}
body::before,body::after{display:none!important} /* drop old grain/mesh */
html body a{color:var(--brand)}
html body a:hover{color:var(--accent)}
html body p,html body li{color:inherit}
::selection{background:color-mix(in srgb,var(--accent) 25%,transparent)}
:focus-visible{outline:3px solid var(--accent)!important;outline-offset:3px;border-radius:8px}
.wrap{width:min(1120px,calc(100% - 2.5rem))}
@media (max-width:760px){.wrap{width:calc(100% - 2rem)}}

/* ---------- Type ---------- */
html body h1,html body h2,html body h3,html body h4,
html body .section-title,html body .page-intro h1,html body .hero h1{
  font-family:var(--font-display)!important;font-weight:800;letter-spacing:-.035em;color:var(--text);font-style:normal;text-wrap:balance}
html body h1{font-size:var(--t-h1)!important;line-height:1.02!important}
html body h2,html body .section-title{font-size:var(--t-h2)!important;line-height:1.08!important;letter-spacing:-.03em}
html body h3{font-size:var(--t-h3)!important;line-height:1.25!important;letter-spacing:-.015em;font-weight:700}
html body .tw-it{font-family:var(--font-accent)!important;font-style:italic;font-weight:500;letter-spacing:-.02em;color:var(--accent)!important}
html body p{text-wrap:pretty}
.section-sub,.page-intro p{color:var(--text-2)!important;font-size:var(--t-lg);max-width:62ch}
.hero-kicker,.hw-fix-label,.hw-relief-label,.sample-kicker,.eyebrow{
  display:inline-flex!important;align-items:center;gap:.45rem;font-size:var(--t-xs)!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase;
  color:var(--accent)!important;background:var(--accent-soft)!important;border:0!important;border-radius:var(--r-pill)!important;padding:.35rem .75rem!important;box-shadow:none!important}
.hero-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent)!important}

/* ---------- Top app bar ---------- */
html body .site-header{position:sticky;top:0;z-index:50;padding:0!important;background:color-mix(in srgb,var(--bg) 78%,transparent)!important;
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border:0!important;box-shadow:0 1px 0 var(--line)!important}
html body .site-header .inner{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;min-height:var(--header-h)!important;padding:.5rem 0!important;width:min(1120px,calc(100% - 2.5rem))}
html body .logo{color:var(--text)!important;font-family:var(--font)!important;font-weight:800!important;letter-spacing:-.03em;font-size:1.12rem!important;gap:.5rem}
html body .logo img{width:34px!important;height:34px!important;border-radius:10px;background:var(--surface);box-shadow:var(--e1);padding:3px}
html body .nav{gap:.25rem!important;font-size:var(--t-sm)!important}
html body .nav a{color:var(--text-2)!important;opacity:1!important;font-weight:600;padding:.5rem .8rem;border-radius:var(--r-pill);transition:background .2s var(--ease),color .2s;text-decoration:none!important;background:transparent!important;box-shadow:none!important;border:0!important}
html body .nav a:hover{background:var(--line)!important;color:var(--text)!important}
html body .nav a[aria-current="page"]{color:var(--text)!important;background:var(--surface)!important;box-shadow:var(--e1)!important}
html body .nav a[href="start.html"]:last-child{background:var(--accent)!important;color:#fff!important;padding:.55rem 1.1rem;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 70%,transparent)!important}
html body .nav a[href="start.html"]:last-child:hover{background:var(--accent-press)!important}
@media (max-width:760px){
  :root{--header-h:56px}
  html body .site-header .inner{width:calc(100% - 2rem)}
  html body .nav .nav-extra,html body .nav a:not([href="start.html"]){display:none!important}
}

/* ---------- Bottom tab bar (mobile) ---------- */
.tw-tabbar{display:none}
@media (max-width:760px){
  html body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px)}
  .tw-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:60;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));
    height:var(--tabbar-h);padding:6px;border-radius:22px;background:color-mix(in srgb,var(--surface) 82%,transparent);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 0 0 1px var(--line),var(--e3)}
  .tw-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:16px;text-decoration:none!important;
    color:var(--text-3)!important;font-size:10.5px;font-weight:650;letter-spacing:.01em;transition:transform .15s var(--ease),background .2s,color .2s;-webkit-tap-highlight-color:transparent}
  .tw-tabbar a svg{width:22px;height:22px}
  .tw-tabbar a:active{transform:scale(.92)}
  .tw-tabbar a[aria-current="page"]{color:var(--accent)!important;background:var(--accent-soft)}
  .tw-tabbar a.tw-tab-cta{color:#fff!important;background:var(--accent)}
  .tw-tabbar a.tw-tab-cta[aria-current="page"]{background:var(--accent-press)}
}
.tw-ico{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em}

/* ---------- Buttons: pills ---------- */
html body .btn,html body button.btn,html body input[type=submit]{display:inline-flex!important;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.4rem!important;
  border-radius:var(--r-pill)!important;font-weight:700!important;font-size:var(--t-md)!important;letter-spacing:-.01em;transition:transform .18s var(--ease),box-shadow .2s,background .2s!important;text-decoration:none!important;background-image:none!important}
html body .btn:active{transform:scale(.97)!important}
html body .btn-lead,html body .btn-primary{background:var(--accent)!important;color:#fff!important;border:0!important;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 75%,transparent)!important}
html body .btn-lead:hover,html body .btn-primary:hover{background:var(--accent-press)!important;color:#fff!important;transform:translateY(-1px)}
html body .btn-outline-dark,html body .btn-outline,html body .btn-ghost,html body .btn-secondary{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line-strong)!important;box-shadow:var(--e1)!important}
html body .btn-outline-dark:hover,html body .btn-outline:hover{background:var(--surface-2)!important;color:var(--text)!important}
html body .btn-gold{background:var(--gold)!important;color:#1b1503!important;border:0!important}
@media (max-width:760px){html body .hero-actions .btn,html body .hw-actions .btn{width:100%}}

/* ---------- Sections: generous rhythm ---------- */
html body main > section,html body main > .page-intro{padding-block:clamp(2.5rem,6vw,5.5rem)!important}
html body .band-alt,html body .tw-band-dark{background:transparent!important;color:var(--text)!important}
html body .band-alt::before,html body .band-alt::after,html body .hero::before,html body .hero::after{display:none!important}
html body .hero,html body .hw-hero{background:radial-gradient(70% 60% at 85% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),radial-gradient(60% 60% at 0% 100%,color-mix(in srgb,var(--ok) 10%,transparent),transparent 70%)!important;color:var(--text)!important;border-radius:0!important}
html body .hero h1,html body .hero p,html body .tw-band-dark h2,html body .tw-band-dark p{color:var(--text)!important}
html body main > .page-intro:first-child:not([style]){background:transparent!important;color:var(--text)!important}
html body main > .page-intro:first-child:not([style]) *{color:inherit}
html body main > .page-intro:first-child:not([style]) a{color:var(--brand)!important}
html body main > .page-intro:first-child:not([style]) p{color:var(--text-2)!important}

/* ---------- Cards (one system for every card type) ---------- */
html body :is(.hw-fix,.hw-relief,.hw-day-card,.hw-step,.hw-plan,.hw-faq,.hw-cta-band,.trust-card,.step,.proof-card,.price-card,.form-card,.signin-card,
  .faq-list details,.faq-section details,.sample-card,.sample-day-panel,.grab-card,.bcard,.start-section,.start-form-group,.ping-mock,.plan-compare-scroll,
  .tw-sub .portions,.tw-sub .coach,.tw-sub .example,.tw-sub .support,.tw-sub .lengths,.tw-sub .video,.legal-prose,.meal,.more-places,.banner){
  background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;box-shadow:var(--e2)!important;background-image:none!important}
html body :is(.hw-fix,.hw-relief,.trust-card,.step,.proof-card,.price-card,.form-card,.signin-card,.start-section,.hw-step,.hw-plan,.bcard){padding:clamp(1.25rem,3vw,2rem)!important}
html body :is(.hw-fix,.hw-relief)::before,html body .hw-fix{border-left-width:1px!important}
html body :is(.trust-card,.step,.proof-card,.price-card,.hw-step,.hw-plan,.hw-day-card):hover{transform:translateY(-2px);box-shadow:var(--e3)!important}
html body :is(.trust-card,.step,.proof-card,.price-card,.hw-step,.hw-plan,.hw-day-card){transition:transform .35s var(--ease),box-shadow .35s var(--ease)!important}
html body :is(.hw-fix,.hw-relief,.trust-card,.step,.price-card,.sample-card,.hw-day-card,.bcard) :is(p,li,span){color:inherit}
html body .hw-fix-list li::before{color:#fff!important;background:var(--ok)!important}
html body .legal-prose{padding:clamp(1.25rem,4vw,2.75rem)!important;max-width:760px}
html body .legal-prose :is(p,li){color:var(--text-2)!important}

/* step numbers -> app badges */
html body :is(.hw-step-n,.step-n,.step .num){display:inline-grid!important;place-items:center;width:40px!important;height:40px!important;border-radius:14px!important;background:var(--accent-soft)!important;color:var(--accent)!important;font:800 1rem/1 var(--font)!important;border:0!important;box-shadow:none!important}
/* grids */
html body :is(.hw-steps,.steps,.trust-grid,.proof-grid,.prices,.hw-plan-grid){gap:clamp(.9rem,2vw,1.4rem)!important}
@media (max-width:760px){
  html body :is(.hw-steps,.steps,.trust-grid,.prices,.hw-plan-grid){grid-template-columns:1fr!important}
  html body .prices{display:grid!important}
}

/* pills, chips, tags */
html body :is(.tag,.mode-pill,.hw-relief-chips li,.chip,.chip-grid label,.word-sample){border-radius:var(--r-pill)!important}
html body .hw-relief-chips li{background:var(--surface-tint)!important;color:var(--brand)!important;border:0!important;font-weight:650;padding:.45rem .85rem!important}
html body .mode-pill.cook{background:color-mix(in srgb,var(--ok) 14%,transparent)!important;color:var(--ok)!important}
html body .mode-pill.pickup{background:var(--accent-soft)!important;color:var(--accent)!important}
html body .mode-pill.move{background:var(--gold-soft)!important;color:#8a6a12!important}
html body .tag{background:var(--surface-2)!important;color:var(--text-2)!important;border:1px solid var(--line)!important}
html body .hw-pain{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-md)!important;box-shadow:var(--e1)!important;color:var(--text)!important}
html body .hw-pain-time{font-variant-numeric:tabular-nums;color:var(--accent)!important;font-weight:800}

/* photos */
html body figure img,html body .hw-photo img{border-radius:var(--r-lg)!important;box-shadow:var(--e2)}
html body figure{margin-inline:0}
html body figcaption{color:var(--text-3)!important;font-size:var(--t-xs)!important}

/* pricing */
html body .price-card.lead{outline:2px solid var(--accent)!important;outline-offset:-2px;transform:none!important}
html body .price-card :is(.price,.amount,strong){letter-spacing:-.04em}
html body .plan-compare{border-collapse:separate!important;border-spacing:0}
html body .plan-compare :is(th,td){border-color:var(--line)!important;background:transparent!important;color:var(--text)!important}
html body .plan-compare thead th{position:sticky;top:0;background:var(--surface)!important}
html body .plan-compare tbody tr:nth-child(even) td,html body .plan-compare tbody tr:nth-child(even) th{background:var(--surface-2)!important}

/* forms */
html body :is(input[type=text],input[type=email],input[type=tel],input[type=number],input:not([type]),select,textarea){
  min-height:50px;border-radius:var(--r-sm)!important;border:1px solid var(--line-strong)!important;background:var(--surface-2)!important;color:var(--text)!important;
  font:inherit;font-size:16px!important;padding:.7rem .95rem!important;transition:border-color .2s,box-shadow .2s}
html body :is(input,select,textarea):focus{outline:none!important;border-color:var(--accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)!important}
html body label{color:var(--text)}
html body .chip-grid label{background:var(--surface-2)!important;border:1px solid var(--line-strong)!important;color:var(--text)!important;transition:background .2s,border-color .2s}
html body .chip-grid label:has(input:checked){background:var(--accent-soft)!important;border-color:var(--accent)!important;color:var(--accent)!important}
html body :is(.field small,.hint,.field-hint){color:var(--text-3)!important}

/* FAQ / details accordions */
html body details{border-radius:var(--r-md)!important;overflow:hidden}
html body details > summary{cursor:pointer;list-style:none;padding:1.05rem 1.2rem!important;font-weight:700;display:flex;justify-content:space-between;gap:1rem;align-items:center;color:var(--text)!important}
html body details > summary::-webkit-details-marker{display:none}
html body details > summary::after{content:"";flex:0 0 22px;height:22px;border-radius:50%;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0592f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s var(--ease)}
html body details[open] > summary::after{transform:rotate(180deg)}
html body details > :not(summary){padding-inline:1.2rem}
html body .faq-list,html body .faq-section{display:grid;gap:.7rem}

/* sample week tabs -> segmented control */
html body .sample-week-tabs-sticky{background:color-mix(in srgb,var(--bg) 80%,transparent)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:0!important;box-shadow:0 1px 0 var(--line)!important;top:var(--header-h)!important}
html body .sample-week-tabs-sticky :is(a,button){border-radius:var(--r-pill)!important}

/* footer */
html body .site-footer{background:transparent!important;color:var(--text-3)!important;border:0!important;padding:3rem 0 2rem!important}
html body .site-footer .wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem)!important;box-shadow:var(--e1)}
html body .site-footer .brand{color:var(--text)!important;font:800 1.1rem/1 var(--font)!important;letter-spacing:-.03em}
html body .site-footer p{color:var(--text-2)!important;font-size:var(--t-sm)}
html body .site-footer a{color:var(--text-2)!important}

/* legal small lines stay readable */
html body :is(.sample-legal-line,.page-intro-disclaimer,.refer-fine){color:var(--text-3)!important;font-size:var(--t-sm)!important}

/* ---------- Motion ---------- */
@keyframes tw-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  html body main > section:first-child :is(h1,.hero-kicker,.hw-fix,.hw-actions,.hw-photo,p){animation:tw-rise .7s var(--ease) both}
  html body main > section:first-child h1{animation-delay:.05s}
  html body main > section:first-child :is(.hw-fix,p){animation-delay:.12s}
  html body main > section:first-child :is(.hw-actions,.hw-photo){animation-delay:.2s}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Dark-mode fixes for hard-coded legacy colors ---------- */
@media (prefers-color-scheme:dark){
  html body :is(section,div,article,aside,header,main,form,table,tr,td,th,ul,ol,li,dl){border-color:var(--line)}
  html body :is(.sample-block,.sample-block-top,.sample-shopping-group,.grab-day,.portions,.calm,.audio-box,.links,.row,.coach,.example,.lengths,.consent-extra,.start-checkout,.start-paid-banner,.start-stripe-gate,.modal-head,.ping-mock-bubble,.refer-share,.fit-section,.phone-frame-screen){background:var(--surface-2)!important;color:var(--text)!important}
  html body :is(h1,h2,h3,h4,strong,b,dt,summary,th){color:var(--text)!important}
  html body :is(p,li,dd,td,small,label,span){color:inherit}
  html body main{color:var(--text)}
  html body img[src$="logo.svg?v=2"]{background:#f5f3ee}
  html body .site-header{background:color-mix(in srgb,var(--bg) 72%,transparent)!important}
  html body .mode-pill.move{color:#f0cf6a!important}
}
html body .site-header.is-scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px -12px rgba(0,0,0,.18)!important}

/* hero/intro no longer slide under a floating header */
html body main > .page-intro:first-child:not([style]),html body main > .hero:first-child,html body main > section:first-child{margin-top:0!important}
html body main > .page-intro:first-child:not([style]){padding-top:clamp(2rem,6vw,4.5rem)!important;padding-bottom:clamp(1.5rem,4vw,3rem)!important}
html body main > .page-intro:first-child:not([style])::before,html body main > .page-intro:first-child:not([style])::after{display:none!important}
html body main > .page-intro:first-child:not([style]) strong{color:var(--text)!important}
html body main > .page-intro:first-child:not([style]) p.page-intro-disclaimer{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-md)!important}
html body .price-card .amount{color:var(--text)!important}
html body .price-card :is(.desc,.price-features){color:var(--text-2)!important}
/* start: each step is its own card; the form wrapper is not a card */
html body .start-form-card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;display:grid;gap:1rem}
html body .start-form-card > :is(.start-form-group,.start-section){margin:0!important;padding:clamp(1.25rem,3vw,2rem)!important}
html body h2.start-group-title,html body h2.start-section-title{font-size:var(--t-h3)!important;text-transform:none!important;letter-spacing:-.02em!important;color:var(--text)!important;font-weight:800!important}
html body .start-step-num{background:var(--accent-soft)!important;color:var(--accent)!important}
html body main > .page-intro + section,html body main > .page-intro + .wrap{padding-top:.5rem!important}
html body main > .page-intro:first-child:not([style]) p{font-size:var(--t-md)!important;line-height:1.65}
html body figcaption{background:color-mix(in srgb,var(--surface) 85%,transparent)!important;color:var(--text-2)!important;border-radius:var(--r-pill)!important}
/* 2026-10-19 Beta layout fix: plan cards no longer pulled up over the page intro; Ultra card anchors its own badge */
html body main > .page-intro:first-child:not([style]) + section .prices:first-child{margin-top:0!important}
html body .price-card{position:relative}
html body .price-card .badge{position:absolute;top:-.7rem;left:1rem}