/* =========================================================
   Morsel — DARK THEME (production)
   ========================================================= */

/* ---------- design tokens ---------- */
:root{
  /* Brand palette */
  --indigo:        #0F1C4D;
  --indigo-deep:   #0A1140;
  --deep-peri:     #7F8FC9;
  --periwinkle:    #AFAFE3;
  --lavender:      #C7B6E6;
  --light-lav:     #E4E1F2;
  --dusty-blue:    #A4B5D4;
  --soft-peri:     #DDE5FA;
  --almost-white:  #F7F7FB;
  --primary-deep:  #5C6BAB;
  --button-deep:   #4A5A96;
  --navy-top:      #071238;

  /* Functional */
  --bg:            #071238;
  --bg-card:       rgba(199,182,230,.08);
  --bg-card-hover: rgba(199,182,230,.14);
  --ink:           #ffffff;
  --ink-2:         rgba(255,255,255,.78);
  --ink-3:         rgba(255,255,255,.6);
  --line:          rgba(255,255,255,.12);

  --shadow-sm:     0 2px 6px rgba(0,0,0,.18);
  --shadow:        0 10px 30px -12px rgba(0,0,0,.45);
  --radius-lg:     22px;
  --radius-md:     16px;
  --radius-pill:   999px;

  --max:           1180px;
  --pad:           clamp(20px, 5vw, 32px);

  --t-fast:        180ms ease;
  --t-base:        320ms cubic-bezier(.2,.7,.2,1);
  --t-slow:        700ms cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ scroll-behavior:smooth; scroll-padding-top:80px; overflow-x:clip; }
body{
  margin:0;
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight:500;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
  overflow-x:clip;
}
img{max-width:100%; display:block}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
a{color:inherit; text-decoration:none}
ul,ol{list-style:none; padding:0; margin:0}
.visually-hidden{position:absolute!important; width:1px; height:1px; clip:rect(0 0 0 0); overflow:hidden}

/* Skip link */
.skip-link{
  position:absolute; top:-100px; left:1rem;
  background:#fff; color:var(--indigo);
  padding:.6rem 1rem; border-radius:var(--radius-pill);
  font-weight:600; z-index:200;
  transition:top var(--t-base);
}
.skip-link:focus{ top:1rem; outline:2px solid var(--periwinkle); outline-offset:2px; }

/* Focus visible ring across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:2px solid var(--periwinkle);
  outline-offset:3px;
  border-radius:var(--radius-pill);
}

/* ---------- typography ---------- */
.display,
.section-title,
.cta-title,
.eyebrow,
.cta-eyebrow,
.topline,
.problem-item h3,
.t-body h3,
.training-card h3,
.how-content h3,
.acc-card h3,
.why-card h3,
.hv-log-title{
  font-family:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.display{
  font-weight:700;
  color:var(--ink);
  font-size:clamp(2.6rem, 8.5vw, 5rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 1rem;
}
.section-title{
  font-weight:700;
  color:var(--ink);
  font-size:clamp(2rem, 5.5vw, 3rem);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .8rem;
}
.section-lead{
  color:var(--ink-2);
  font-size:1.05rem;
  max-width:46ch;
  margin:0 0 2rem;
}
.lead{
  color:var(--ink-2);
  font-size:1.1rem;
  line-height:1.6;
  max-width:38ch;
  margin:0 0 1.6rem;
}
.eyebrow{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--periwinkle);
  font-weight:700;
  margin:0 0 1rem;
}
.accent{
  background:linear-gradient(90deg,
    #AFAFE3 0%,
    #C7B6E6 55%,
    #DDE5FA 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-weight:800;
}
@supports not (background-clip: text){
  .accent{ color:var(--periwinkle); }
}
.section-title .accent{
  background:none;
  color:var(--lavender);
  -webkit-text-fill-color:var(--lavender);
}

/* ---------- TOPLINE BANNER (mobile only — desktop uses the .hero-eyebrow) ---------- */
.topline{
  position:relative; z-index:1;
  text-align:center;
  background:var(--lavender);
  color:var(--indigo);
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700;
  padding:.6rem var(--pad);
  display:none;
}
@media (max-width:720px){
  .topline{ display:block; }
  .hero-eyebrow{ display:none; }
}

/* Hero eyebrow — replaces the desktop banner */
.hero-eyebrow{
  font-family:"Inter", sans-serif;
  font-weight:500;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lavender);
  margin:0 0 18px;
}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad);
  background:
    radial-gradient(ellipse 23% 95% at 63% 100%,
      rgba(2,7,23,.78) 0%,
      rgba(3,9,29,.38) 58%,
      transparent 100%),
    var(--navy-top);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:padding var(--t-base);
}
.site-header.scrolled{ padding:10px var(--pad); }
.logo{
  display:inline-flex; align-items:center;
  transition:transform var(--t-base);
}
.logo:hover{ transform:translateY(-1px); }
.logo img{
  display:block;
  height:40px;
  width:auto;
  transition:transform var(--t-base);
}
.logo:hover img{ transform:scale(1.02); }

/* Hamburger toggle */
.menu-toggle{
  display:flex; flex-direction:column; gap:5px;
  width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:8px;
  transition:background var(--t-fast);
}
.menu-toggle:hover{ background:rgba(255,255,255,.08); }
.menu-toggle span{
  display:block; height:2.5px; width:24px; background:#fff;
  border-radius:2px; transition:transform var(--t-base), opacity var(--t-fast);
}
.menu-toggle.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Mobile drawer */
.site-nav{
  position:fixed; top:0; right:0; width:min(86vw, 360px); height:100vh;
  background:var(--indigo-deep);
  padding:96px 32px 32px;
  display:flex; flex-direction:column; gap:1.2rem;
  transform:translateX(100%);
  transition:transform var(--t-base);
  box-shadow:-20px 0 40px -20px rgba(0,0,0,.6);
}
.site-nav.open{ transform:translateX(0); }
.site-nav a{
  font-size:1.1rem; color:rgba(255,255,255,.85); font-weight:500;
  padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.1);
  transition:color var(--t-fast), padding-left var(--t-fast);
}
.site-nav a:hover{ color:#fff; padding-left:6px; }
.site-nav .nav-cta{
  margin-top:.6rem; border:0;
  background:linear-gradient(105deg, var(--periwinkle) 0%, var(--lavender) 100%);
  color:var(--indigo);
  padding:.85rem 1rem; border-radius:var(--radius-pill);
  text-align:center;
  box-shadow:0 8px 22px -10px rgba(127,143,201,.75), inset 0 1px 0 rgba(255,255,255,.3);
}
.site-nav .nav-cta:hover{
  background:linear-gradient(105deg, #A3ABDB 0%, #B9AEE0 100%);
  color:var(--indigo);
  padding-left:1rem;
}

/* ---------- shared sections ---------- */
.section{
  max-width:var(--max); margin:0 auto;
  padding:clamp(40px, 7vw, 90px) var(--pad) clamp(60px, 10vw, 110px);
  position:relative; z-index:1;
}
.hero{
  max-width:var(--max); margin:0 auto;
  padding:clamp(40px, 8vw, 80px) var(--pad) clamp(40px, 6vw, 60px);
  position:relative; z-index:1;
}
.hero-content{ position:relative; z-index:2; }
.hero-grounded{ display:none; }
.hero-phone{ display:none; }

@media (min-width:960px){
  .hero .display{
    font-size:clamp(4.2rem, 4.3vw, 4.65rem);
  }
  .hero{
    max-width:none;
    padding-inline:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
    display:grid;
    grid-template-columns:1.03fr .97fr;
    gap:0;
    align-items:center;
  }
  .hero-grounded{
    display:block;
    position:absolute;
    z-index:0;
    inset:0;
    background-image:url("img/brand/morsel-grounded-hero-v5.png?v=2");
    background-size:cover;
    background-position:center 28%;
  }
  .hero-grounded::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg,
        var(--navy-top) 0%,
        var(--navy-top) 2%,
        rgba(7,18,56,.72) 6%,
        transparent 16%,
        transparent 100%),
      linear-gradient(90deg,
        rgba(15,28,77,.48) 0%,
        rgba(15,28,77,.26) 38%,
        transparent 67%);
    -webkit-mask-image:radial-gradient(ellipse 10.5% 24% at 63% 5%,
      transparent 0%,
      transparent 72%,
      rgba(0,0,0,.35) 84%,
      #000 100%);
    mask-image:radial-gradient(ellipse 10.5% 24% at 63% 5%,
      transparent 0%,
      transparent 72%,
      rgba(0,0,0,.35) 84%,
      #000 100%);
  }
  .hero-grounded::before{
    content:"";
    position:absolute;
    z-index:1;
    right:0;
    bottom:0;
    left:0;
    height:150px;
    pointer-events:none;
    background:radial-gradient(ellipse 72% 115% at 0% 100%,
      var(--bg) 0%,
      rgba(7,18,56,.72) 42%,
      transparent 76%);
  }
  .hero-phone{ display:none; }
}

/* ---------- PHONE MOCKUP (hero right column on desktop) ---------- */
.phone-frame{
  width:min(100%, 400px);
  aspect-ratio: 9 / 19;
  background:linear-gradient(160deg, #1a1a3a 0%, #0a0e2e 100%);
  border-radius:46px;
  padding:8px;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.04);
  position:relative; z-index:1;
  transition:transform var(--t-slow);
}
.phone-frame:hover{ transform:translateY(-6px); }
.phone-notch{
  position:absolute;
  top:14px; left:50%;
  transform:translateX(-50%);
  width:90px; height:24px;
  background:#000;
  border-radius:14px;
  z-index:3;
}
.phone-screen{
  width:100%; height:100%;
  background:#0A0E2E;
  border-radius:34px;
  padding:42px 18px 18px;
  position:relative;
  overflow:hidden;
  color:#fff;
  font-size:.7rem;
  display:flex; flex-direction:column;
}
.phone-status{
  position:absolute; top:14px; left:18px; right:18px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.7rem; font-weight:600;
  color:#fff;
  z-index:2;
}
.phone-indicators{ display:inline-flex; gap:4px; align-items:center; }
.phone-signal,.phone-wifi,.phone-battery{
  display:inline-block; background:#fff; border-radius:2px;
}
.phone-signal{ width:14px; height:8px; clip-path:polygon(0 60%, 25% 60%, 25% 100%, 50% 100%, 50% 40%, 75% 40%, 75% 100%, 100% 100%, 100% 0); }
.phone-wifi{ width:12px; height:8px; border-radius:50% 50% 0 0; }
.phone-battery{ width:22px; height:9px; border:1px solid #fff; background:linear-gradient(to right, #fff 80%, transparent 80%); border-radius:2px; }

.phone-back{
  background:none; border:0;
  color:var(--periwinkle);
  margin:.4rem 0 .6rem;
  padding:.2rem; align-self:flex-start;
}
.phone-q{
  font-family:"Manrope", sans-serif;
  font-size:.95rem; font-weight:800;
  color:#fff;
  margin:0 0 .55rem;
  line-height:1.2;
}
.phone-q{ font-size:.85rem; margin-top:.7rem; }
.phone-input{
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:.6rem .8rem;
  font-family:"Manrope", sans-serif;
  font-weight:700; font-size:.85rem;
  color:var(--periwinkle);
  margin:0 0 .9rem;
}
.phone-allergens-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:.4rem 0 .25rem;
}
.phone-h{
  font-family:"Manrope", sans-serif;
  font-weight:800; color:#fff; font-size:.75rem;
}
.phone-search{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  color:rgba(255,255,255,.7);
}
.phone-hint{
  font-size:.6rem; font-weight:500;
  color:rgba(255,255,255,.55);
  margin:0 0 .55rem;
  font-family:"Inter", sans-serif;
}
.phone-scroll{
  flex:1; min-height:0;
  overflow:hidden;
  /* fade out at the bottom to suggest more content scrolls below */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
  margin-bottom:.4rem;
}
.phone-sub-more{
  margin-top:.7rem !important;
}
.phone-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
  margin:0 0 .4rem;
}
.allergen-tile{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:.5rem .3rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem;
  aspect-ratio:1;
}
.allergen-tile img{
  width:38px; height:38px;
  filter:brightness(0) invert(1);
  opacity:.92;
}
.allergen-tile span{
  font-size:.6rem; font-weight:600;
  color:#fff;
  font-family:"Manrope", sans-serif;
}
.allergen-tile.selected{
  background:var(--lavender);
  border-color:var(--periwinkle);
}
.allergen-tile.selected img{
  filter:none;
  opacity:1;
}
.allergen-tile.selected span{ color:var(--indigo); }
.tile-check{
  position:absolute; top:4px; right:4px;
  width:14px; height:14px; border-radius:50%;
  background:var(--indigo);
  color:#fff !important;
  font-size:.55rem !important;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.phone-next{
  margin-top:auto;
  background:var(--lavender);
  color:var(--indigo);
  border:0; border-radius:var(--radius-pill);
  padding:.7rem;
  font-size:.7rem; font-weight:700;
  font-family:"Manrope", sans-serif;
  box-shadow:0 8px 20px -8px rgba(199,182,230,.5);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
  padding:1.25rem 2rem;
  border-radius:var(--radius-pill);
  font-weight:600; font-size:1.1rem;
  transition:transform var(--t-base), background var(--t-base), box-shadow var(--t-base);
  position:relative; overflow:hidden;
  cursor:pointer;
  font-family:inherit;
}
.btn-primary{
  background:linear-gradient(105deg, #7F8FC9 0%, #9A93D8 100%);
  color:#FFFFFF;
  border:0;
  border-radius:999px;
  box-shadow:0 8px 20px rgba(15,28,77,.28);
  transition:background 180ms ease,
             box-shadow 180ms ease,
             transform 180ms ease;
  will-change:transform;
}
.btn-primary:hover{
  background:linear-gradient(105deg, #8595D0 0%, #B5A8DC 100%);
  box-shadow:0 8px 18px -4px rgba(127,143,201,.32);
  transform:translateY(-1px);
}
.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(15,28,77,.30);
}
.btn-primary:focus-visible{
  outline:2px solid #C7B6E6;
  outline-offset:3px;
}
.btn-primary:hover svg{ transform:translateX(4px); }
.btn svg{ transition:transform var(--t-base); }

/* Hero button is full-width on mobile (better tap target) */
.hero .btn-primary{
  width:100%;
  max-width:360px;
}
@media (min-width:640px){
  .hero .btn-primary{ width:auto; max-width:none; }
}
@media (min-width:768px){
  .btn{ padding:1.35rem 2.4rem; font-size:1.15rem; }
  /* Hero button: statement-sized */
  .hero .btn-primary{ padding:1.6rem 2.8rem; font-size:1.35rem; }
}

@media (prefers-reduced-motion: reduce){
  .btn-primary{ transition:background 180ms ease, box-shadow 180ms ease; }
  .btn-primary:hover{ transform:none; }
}

/* ---------- HERO ---------- */
.trust-row{
  display:flex; align-items:center; gap:.9rem;
  margin-top:2rem;
  color:var(--ink-2);
  font-size:.95rem;
  font-weight:500;
}
.trust-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, rgba(199,182,230,.22), rgba(127,143,201,.16));
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  flex:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 8px 18px -8px rgba(127,143,201,.5);
  transition:transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.trust-icon svg{ width:24px; height:24px; }
.trust-row:hover .trust-icon{
  transform:translateY(-2px) rotate(-4deg);
  border-color:rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 12px 22px -8px rgba(127,143,201,.65);
}

/* ---------- PROBLEM (glass cards) ---------- */
.section-problem{
  max-width:none;
  margin-top:-2px;
  padding-inline:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(7,18,56,.12) 34%,
      rgba(7,18,56,.52) 72%,
      var(--bg) 100%),
    linear-gradient(90deg,
      var(--bg) 0%,
      var(--bg) 24%,
      #050720 40%,
      #000518 56%,
      #00020E 78%,
      #02020C 100%);
}
.problem-list{
  display:grid; grid-template-columns:1fr; gap:1rem;
  margin-top:2rem;
}
.problem-item{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem;
  background:linear-gradient(135deg, rgba(199,182,230,.18) 0%, rgba(127,143,201,.12) 100%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  padding:1.5rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 8px 24px -12px rgba(0,0,0,.4);
  transition:transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.problem-item:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 14px 30px -12px rgba(0,0,0,.5);
}
.problem-item h3{
  font-size:1.1rem; color:var(--ink); margin:.1rem 0 .3rem;
  font-weight:700;
}
.problem-item p{ margin:0; color:var(--ink-2); font-size:.95rem; }

/* shared icon-circle (problem, accountability, why) */
.icon-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg, var(--periwinkle), var(--deep-peri));
  color:#fff;
  flex:none;
  box-shadow:0 8px 18px -6px rgba(127,143,201,.6);
  transition:transform var(--t-base);
}
.problem-item:hover .icon-circle,
.training-card:hover .icon-circle,
.acc-card:hover .icon-circle,
.why-card:hover .icon-circle{
  transform:scale(1.06) rotate(-3deg);
}

/* ---------- SYSTEM TIMELINE ---------- */
.timeline{
  position:relative;
  margin-top:2rem;
  display:flex; flex-direction:column; gap:.75rem;
}
.timeline::before{
  content:""; position:absolute;
  left:18px; top:18px; bottom:18px;
  width:2px;
  background:linear-gradient(to bottom, var(--periwinkle), var(--deep-peri) 40%, transparent);
  opacity:.55;
}
.t-step{
  display:grid;
  grid-template-columns:34px 56px 1fr;
  align-items:flex-start;
  gap:.8rem;
  position:relative;
}
.t-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background:var(--deep-peri);
  color:#fff;
  font-weight:700; font-size:.7rem;
  justify-self:center;
  z-index:1;
  margin-top:15px;
  opacity:0;
  transform:scale(.4) rotate(-12deg);
  transition:opacity .45s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay:.35s;
  filter:drop-shadow(0 6px 12px rgba(127,143,201,.55));
}
.t-step.is-visible .t-num{
  opacity:1;
  transform:scale(1) rotate(0);
}
.t-step:hover .t-num{
  filter:
    drop-shadow(0 0 14px rgba(127,143,201,.8))
    drop-shadow(0 0 28px rgba(175,175,227,.55))
    drop-shadow(0 6px 14px rgba(127,143,201,.45));
}
.t-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, rgba(199,182,230,.18), rgba(127,143,201,.12));
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  flex:none;
  transition:transform var(--t-base);
}
.t-step:hover .t-icon{ transform:scale(1.06) rotate(-3deg); }

/* ---------- BEFORE SERVICE / TRAINING ---------- */
.training-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:2rem;
}
.training-card{
  min-width:0;
  padding:1.6rem;
  border-radius:var(--radius-lg);
  background:linear-gradient(140deg, rgba(199,182,230,.16), rgba(127,143,201,.09));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 16px 34px -24px rgba(0,0,0,.65);
  transition:transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.training-card h3{
  margin:1rem 0 .45rem;
  color:#fff;
  font-size:1.14rem;
  line-height:1.25;
}
.training-card p{ margin:0; color:var(--ink-2); line-height:1.6; }
.training-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 22px 42px -24px rgba(0,0,0,.72);
}
.t-body h3{
  margin:.4rem 0 .25rem; font-size:1.15rem; color:var(--ink); font-weight:700;
}
.t-body p{ margin:0; color:var(--ink-2); }

/* ---------- HOW IT WORKS ---------- */
.how-grid{
  display:grid; grid-template-columns:1fr; gap:1.6rem;
  margin-top:1.5rem;
}
.how-step{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  align-items:center;
}
.how-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:var(--periwinkle);
  font-weight:700; font-size:.9rem;
  letter-spacing:.04em;
}
.how-content h3{
  font-size:1.25rem; color:var(--ink); margin:.7rem 0 .5rem; font-weight:700;
}
.how-content p{
  margin:0; color:var(--ink-2); max-width:38ch;
  font-size:1rem; line-height:1.6;
}

/* HOW IT WORKS visuals (on dark) */
.how-visual{
  border-radius:var(--radius-md);
  background:linear-gradient(135deg, rgba(199,182,230,.14), rgba(127,143,201,.08));
  border:1px solid rgba(255,255,255,.12);
  aspect-ratio: 1.4 / 1;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-base), box-shadow var(--t-base);
}
.how-step:hover .how-visual{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

/* hv-table */
.hv-tile{
  position:absolute; width:38%; aspect-ratio:1;
  left:54%; top:48%;
  transform:translate(-50%,-50%) rotate(-8deg);
  background:linear-gradient(160deg, var(--lavender), var(--deep-peri));
  border-radius:18px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--t-base);
}
.how-step:hover .hv-tile{ transform:translate(-50%,-52%) rotate(-4deg); }
.hv-m{ color:#fff; font-weight:700; font-size:2.2rem; line-height:1; font-family:"Manrope", sans-serif; }
.hv-table::before{
  content:""; position:absolute; left:8%; top:14%;
  width:50%; height:32%; border-radius:50%;
  background:rgba(255,255,255,.12);
  filter:blur(2px);
}
.hv-table::after{
  content:""; position:absolute; right:14%; top:12%;
  width:18%; height:24%;
  background:rgba(255,255,255,.15);
  border-radius:14px 14px 4px 4px;
  opacity:.6;
}

/* hv-phone */
.hv-phone-body{
  position:absolute; right:8%; top:8%; bottom:8%;
  width:46%;
  background:rgba(255,255,255,.92); border-radius:22px;
  box-shadow:0 14px 28px -10px rgba(0,0,0,.5), inset 0 0 0 4px rgba(199,182,230,.3);
  padding:14px 12px;
  display:flex; flex-direction:column; gap:10px;
}
.hv-row{
  height:8px; border-radius:4px;
  background:linear-gradient(90deg, var(--lavender), var(--periwinkle));
}
.hv-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  flex:1;
}
.hv-grid span{
  background:var(--light-lav); border-radius:50%;
  position:relative;
}
.hv-grid span::after{
  content:""; position:absolute; inset:30%;
  background:var(--deep-peri); border-radius:50%; opacity:.5;
}

/* hv-printer */
.hv-printer-body{
  position:absolute; right:6%; top:14%;
  width:60%; height:55%;
  background:rgba(255,255,255,.92); border-radius:14px 14px 8px 8px;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.5), inset 0 -10px 0 var(--light-lav);
}
.hv-printer-body::after{
  content:""; position:absolute; left:10%; top:18%;
  width:80%; height:14%; background:var(--light-lav); border-radius:4px;
}
.hv-ticket{
  position:absolute; right:14%; top:48%;
  width:46%;
  background:#fff;
  padding:10px 12px;
  border-radius:6px;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.5);
  transform:rotate(-2deg);
  transition:transform var(--t-base);
}
.how-step:hover .hv-ticket{ transform:rotate(-1deg) translateY(-2px); }
.hv-ticket-h{ font-weight:700; color:var(--indigo); font-size:.78rem; font-family:"Manrope", sans-serif; }
.hv-ticket-sub{ color:var(--ink-3); color:#5C6494; font-size:.68rem; margin-top:2px; }
.hv-ticket-line{ height:4px; background:var(--soft-peri); border-radius:2px; margin-top:8px; }
.hv-ticket-line.short{ width:55%; }

/* hv-log (Order #1847 card — on dark bg, card is light) */
.hv-log{
  background:
    radial-gradient(80% 60% at 20% 10%, rgba(221,229,250,.2) 0%, transparent 60%),
    linear-gradient(135deg, rgba(199,182,230,.2), rgba(175,175,227,.15));
}
.hv-log-card{
  position:absolute; inset:9% 8%;
  background:#fff; border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.15);
  display:flex; flex-direction:column; gap:0;
}
.hv-log-title{
  font-weight:800; color:var(--indigo); font-size:1rem;
  margin-bottom:10px; padding-bottom:10px;
  border-bottom:1px solid rgba(15,28,77,.1);
  display:flex; align-items:center; justify-content:space-between;
}
.hv-log-live{
  font-size:.55rem; letter-spacing:.12em;
  background:linear-gradient(120deg, var(--deep-peri), var(--primary-deep));
  color:#fff;
  padding:.2rem .5rem;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-family:"Inter", sans-serif;
}
.hv-log-row{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:10px;
  font-size:.82rem; color:#5C6494;
  padding:.5rem 0;
  border-bottom:1px solid rgba(221,229,250,.55);
}
.hv-log-row:last-child{ border-bottom:0; padding-bottom:0; }
.hv-log-row.done{ color:var(--indigo); font-weight:500; }
.hv-check{
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, var(--periwinkle), var(--deep-peri));
  position:relative; flex:none;
  box-shadow:0 4px 8px -2px rgba(127,143,201,.5);
}
.hv-check::after{
  content:""; position:absolute; left:4.5px; top:6.5px;
  width:6.5px; height:3.5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.hv-check.empty{
  background:transparent;
  box-shadow:inset 0 0 0 2px var(--periwinkle);
  animation:pulseRing 1.8s ease-in-out infinite;
}
.hv-check.empty::after{ display:none; }
@keyframes pulseRing{
  0%,100%{ box-shadow:inset 0 0 0 2px var(--periwinkle), 0 0 0 0 rgba(175,175,227,.6); }
  50%    { box-shadow:inset 0 0 0 2px var(--deep-peri), 0 0 0 6px rgba(175,175,227,0); }
}
.hv-time{
  color:var(--deep-peri);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:.78rem;
}
.hv-log-row:not(.done) .hv-time{ color:#5C6494; font-weight:500; }

/* ---------- ACCOUNTABILITY (glass cards on dark) ---------- */
.manager-dashboard{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:2.2rem;
  padding:14px;
  border-radius:26px;
  color:#fff;
  background:
    radial-gradient(70% 90% at 0 0, rgba(175,175,227,.18), transparent 72%),
    linear-gradient(145deg, #111b4b, #080e32);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 24px 50px -30px rgba(0,0,0,.85);
}
.manager-dash-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 4px 8px;
}
.manager-dash-head > div{ display:flex; flex-direction:column; gap:3px; }
.manager-kicker{
  color:var(--periwinkle);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.manager-dash-head strong{ font-family:"Manrope", sans-serif; font-size:1.15rem; }
.manager-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.35rem .65rem;
  border-radius:var(--radius-pill);
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  font-size:.68rem;
  font-weight:700;
}
.manager-live i{ width:7px; height:7px; border-radius:50%; background:#9ad3b1; box-shadow:0 0 0 3px rgba(154,211,177,.12); }
.manager-panel{
  min-width:0;
  padding:13px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
}
.manager-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:9px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.manager-panel-head strong{ font-size:.8rem; }
.manager-panel-head span{ color:rgba(255,255,255,.5); font-size:.62rem; }
.manager-order{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:8px 0;
}
.manager-order + .manager-order{ border-top:1px solid rgba(255,255,255,.07); }
.manager-table{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:9px;
  color:var(--indigo);
  background:linear-gradient(145deg, var(--periwinkle), var(--lavender));
  font-size:.68rem;
  font-weight:900;
}
.manager-order > span:nth-child(2){ display:flex; flex-direction:column; gap:3px; min-width:0; }
.manager-order strong{ font-size:.72rem; }
.manager-order small{ color:rgba(255,255,255,.56); font-size:.61rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.order-status{
  padding:4px 6px;
  border-radius:6px;
  font-size:.57rem;
  white-space:nowrap;
}
.order-status.active{ color:#fff; background:#6678c7; }
.order-status.complete{ color:#bde4cb; background:rgba(91,165,119,.15); border:1px solid rgba(154,211,177,.2); }
.manager-insights{ display:flex; flex-direction:column; gap:8px; }
.manager-insights .manager-panel-head{ margin-bottom:0; }
.manager-insight{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  flex:1;
  min-height:58px;
  padding:9px 11px;
  border-radius:11px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}
.manager-insight span{
  color:var(--periwinkle);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.manager-insight strong{ font-size:.72rem; line-height:1.35; }
.manager-insight.attention{ border-left:3px solid #c7b6e6; }
.manager-insight.recommendation{ border-left:3px solid #7f8fc9; }
.oversight-subhead{
  margin:2.35rem 0 0;
}
.oversight-subhead h3{
  margin:0 0 .45rem;
  color:#fff;
  font-family:"Manrope", sans-serif;
  font-size:clamp(1.65rem, 3vw, 2.2rem);
  line-height:1.1;
  letter-spacing:-.015em;
}
.oversight-subhead p{
  max-width:56ch;
  margin:0;
  color:var(--ink-2);
  font-size:1rem;
  line-height:1.55;
}
.section-accountability .oversight-subhead + .cards{ margin-top:1.25rem; }
.cards{
  margin-top:2rem;
  display:grid; grid-template-columns:1fr; gap:1rem;
}
.acc-card{
  background:linear-gradient(135deg, rgba(199,182,230,.18) 0%, rgba(127,143,201,.12) 100%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);
  padding:1.6rem;
  display:flex;
  flex-direction:column;
  gap:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 8px 24px -12px rgba(0,0,0,.4);
  transition:transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.acc-card .icon-circle{ align-self:flex-start; }
.acc-card h3{
  margin:1rem 0 .45rem; color:var(--ink); font-size:1.1rem; font-weight:700;
}
.acc-card p{ margin:0; color:var(--ink-2); line-height:1.6; }
.acc-card .acc-tag{
  margin-top:.7rem; color:var(--periwinkle); font-weight:600; font-style:italic;
}
.acc-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 14px 30px -12px rgba(0,0,0,.5);
}

/* ---------- WHY IT MATTERS ---------- */
.why-cards{
  margin-top:2rem;
  display:grid; grid-template-columns:1fr; gap:1rem;
}
.why-card{
  background:linear-gradient(135deg, rgba(199,182,230,.18) 0%, rgba(127,143,201,.12) 100%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);
  padding:1.6rem;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.1rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 8px 24px -12px rgba(0,0,0,.4);
  transition:transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  align-items:flex-start;
}
.why-card h3{
  margin:0 0 .35rem; color:var(--ink); font-size:1.1rem; font-weight:700;
}
.why-card p{ margin:0; color:var(--ink-2); }
.why-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 14px 30px -12px rgba(0,0,0,.5);
}

/* ---------- CTA (light glass card floating on dark page) ---------- */
.cta{
  margin:0 auto;
  max-width:var(--max);
  padding:0 var(--pad) clamp(60px, 10vw, 100px);
  position:relative; z-index:1;
}
.cta-inner{
  position:relative;
  border-radius:32px;
  background:linear-gradient(160deg, var(--soft-peri) 0%, var(--lavender) 100%);
  padding:clamp(48px, 8vw, 80px) clamp(28px, 6vw, 72px);
  text-align:center;
  overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 40px 80px -20px rgba(0,0,0,.5);
}
.cta-eyebrow{
  display:inline-block;
  font-size:.95rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:800;
  color:var(--button-deep);
  margin:0 0 1.2rem;
}
.cta-logo{
  display:block;
  width:min(52%, 240px);
  aspect-ratio:2055 / 459;
  margin:0 auto 1.6rem;
  background:linear-gradient(105deg, var(--primary-deep) 0%, var(--button-deep) 100%);
  -webkit-mask:url("img/brand/morsel-wordmark-indigo.png") center / contain no-repeat;
  mask:url("img/brand/morsel-wordmark-indigo.png") center / contain no-repeat;
  filter:drop-shadow(0 10px 24px rgba(15,28,77,.18));
}
.cta-title{
  font-size:clamp(1.55rem, 3.6vw, 2.1rem);
  font-weight:700;
  color:var(--indigo);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 auto 1rem;
  max-width:36ch;
  text-wrap:balance;
}
.cta-sub{
  font-size:1.05rem;
  color:#2A3868;
  max-width:42ch;
  margin:0 auto 2.2rem;
  line-height:1.6;
  font-weight:500;
}
.cta .btn-primary{
  background:linear-gradient(105deg, var(--primary-deep) 0%, var(--button-deep) 100%);
  color:#fff;
  box-shadow:0 10px 24px -8px rgba(15,28,77,.5);
}
.cta .btn-primary:hover{
  background:linear-gradient(105deg, #52619f 0%, #3f4e88 100%);
  box-shadow:0 12px 28px -8px rgba(15,28,77,.58);
}
.cta-form{
  display:grid; grid-template-columns:1fr; gap:.8rem;
  max-width:520px; margin:0 auto;
}
.cta-form input{
  background:#fff; border:0;
  border-radius:var(--radius-pill);
  padding:1.05rem 1.4rem;
  font-size:1rem; color:var(--indigo);
  box-shadow:0 6px 20px -8px rgba(15,28,77,.18);
  font-family:inherit;
  min-width:0;
}
.cta-form input::placeholder{ color:#5C6494; opacity:.65; }
.cta-form input:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(127,143,201,.45), 0 6px 20px -8px rgba(15,28,77,.25);
}
.form-honeypot{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  margin:-1px !important;
  padding:0 !important;
  border:0 !important;
}
.cta-confirm{
  margin:.4rem 0 0; color:var(--indigo); font-weight:600;
  grid-column:1 / -1;
}
.cta-error{
  margin:.4rem 0 0;
  color:#762944;
  font-weight:700;
  grid-column:1 / -1;
}
.cta-form .btn:disabled{
  cursor:wait;
  opacity:.78;
  transform:none;
}
.cta-foot{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:1.4rem 0 0;
  color:#2A3868; font-size:.95rem;
  font-weight:500;
}
.cta-foot .trust-icon{
  width:32px; height:32px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(127,143,201,.3);
  color:var(--indigo);
}
@media (min-width:640px){
  .cta-form{ grid-template-columns:1fr 1fr; }
  .cta-form .field-wide{ grid-column:1 / -1; }
  .cta-form .btn{ grid-column:1 / -1; }
  .cta-form .btn{ width:auto; }
  /* desktop logo cap */
}
@media (min-width:768px){
  .cta-logo{ width:min(42%, 280px); }
}

/* ---------- FOOTER ---------- */
.site-foot{
  text-align:center;
  padding:1.5rem var(--pad) 2.5rem;
  color:var(--ink-3);
  font-size:.85rem;
  position:relative; z-index:1;
}
.site-foot small{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.45rem 1rem;
}
.site-foot a{
  color:var(--ink-2);
  text-decoration:underline;
  text-decoration-color:rgba(175,175,227,.55);
  text-underline-offset:3px;
}
.site-foot a:hover{ color:#fff; }

/* ---------- LEGAL PAGES ---------- */
.legal-page{ min-height:100vh; }
.legal-page .site-header{ position:relative; }
.legal-page .logo{ width:clamp(116px, 14vw, 158px); }
.legal-home-link{
  color:var(--ink-2);
  font-weight:600;
  padding:.55rem .9rem;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.legal-home-link:hover{
  color:#fff;
  border-color:rgba(175,175,227,.55);
  background:rgba(175,175,227,.08);
}
.legal-main{
  width:min(100% - 2 * var(--pad), 860px);
  margin:0 auto;
  padding:clamp(52px, 8vw, 88px) 0 clamp(72px, 10vw, 112px);
}
.legal-eyebrow{
  margin:0 0 .8rem;
  color:var(--lavender);
  font-family:"Manrope", sans-serif;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.legal-title{
  margin:0;
  color:#fff;
  font-family:"Manrope", sans-serif;
  font-size:clamp(2.4rem, 7vw, 4.5rem);
  line-height:1.04;
  letter-spacing:-.025em;
}
.legal-effective{
  margin:1rem 0 0;
  color:var(--ink-3);
}
.legal-card{
  margin-top:clamp(32px, 6vw, 56px);
  padding:clamp(26px, 5vw, 48px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg, rgba(199,182,230,.09), rgba(127,143,201,.04));
  box-shadow:var(--shadow);
}
.legal-card h2{
  margin:2.25rem 0 .65rem;
  color:#fff;
  font-family:"Manrope", sans-serif;
  font-size:1.25rem;
  line-height:1.3;
}
.legal-card h2:first-child{ margin-top:0; }
.legal-card p,
.legal-card li{ color:var(--ink-2); line-height:1.75; }
.legal-card p{ margin:.6rem 0; }
.legal-card ul{ margin:.7rem 0 0; padding-left:1.25rem; }
.legal-card li + li{ margin-top:.45rem; }
.legal-card a{ color:var(--lavender); text-underline-offset:3px; }
.legal-card a:hover{ color:#fff; }

/* ---------- REVEAL ON SCROLL ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity var(--t-slow), transform var(--t-slow);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ============== media queries ============== */
@media (min-width:640px){
  .problem-list{ grid-template-columns:1fr 1fr; column-gap:1.4rem; }
  .why-cards{ grid-template-columns:1fr 1fr; gap:1.4rem; }
}

@media (min-width:768px){
  .cards{ grid-template-columns:1fr 1fr; gap:1.4rem; }
  .section-accountability .acc-card:last-child:nth-child(odd){ grid-column:1 / -1; }
  .how-step{
    grid-template-columns:60px 1fr 320px;
    gap:1.4rem 2rem;
    align-items:center;
  }
  .how-step .how-num{ grid-row:1; width:54px; height:54px; font-size:1rem; }
  .how-step .how-content{ grid-row:1; grid-column:2; }
  .how-step .how-content h3{ font-size:1.6rem; margin-top:0; }
  .how-step .how-content p{ font-size:1.1rem; max-width:42ch; }
  .how-step .how-visual{
    grid-row:1; grid-column:3;
    width:100%;
    aspect-ratio:1.35 / 1;
  }
}

@media (min-width:800px){
  .training-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem; }
}

@media (min-width:900px){
  .manager-dashboard{ grid-template-columns:1.05fr .95fr; padding:16px; }
  .manager-dash-head{ grid-column:1 / -1; }
  .section-accountability .cards{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .section-accountability .acc-card:last-child:nth-child(odd){ grid-column:auto; }
}

@media (min-width:960px){
  .menu-toggle{ display:none; }
  .site-nav{
    position:static; transform:none; height:auto; width:auto;
    background:transparent; padding:0; box-shadow:none;
    flex-direction:row; align-items:center; gap:2rem;
  }
  .site-nav a{
    border:0; padding:.3rem 0; font-size:1rem;
    position:relative;
  }
  .site-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px;
    height:2px; background:var(--periwinkle);
    transform:scaleX(0); transform-origin:left;
    transition:transform var(--t-base);
  }
  .site-nav a:hover{ padding-left:0; color:#fff; }
  .site-nav a:hover::after{ transform:scaleX(1); }
  .site-nav .nav-cta{
    margin-top:0; padding:.7rem 1.3rem;
    color:var(--indigo);
  }
  .site-nav .nav-cta:hover{ padding-left:1.3rem; color:var(--indigo); }
  .site-nav .nav-cta::after{ display:none; }
}

@media (min-width:1100px){
  .how-step{ grid-template-columns:68px 1fr 360px; }
  .how-step .how-num{ width:60px; height:60px; font-size:1.05rem; }
  .how-step .how-content h3{ font-size:1.8rem; }
  .how-step .how-content p{ font-size:1.15rem; }
}

/* ---------- HOW IT WORKS — six-step product flow ---------- */
.section-how{
  max-width:none;
  padding-left:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  padding-right:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  background:transparent;
  overflow:hidden;
}
.section-how > .eyebrow{ color:var(--lavender); }
.section-how .how-title{
  color:#fff;
  max-width:none;
  margin-bottom:.7rem;
}
.section-how .how-lead{
  max-width:none;
  margin-bottom:2.4rem;
}
.section-how .how-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  max-width:var(--max);
  margin:0 auto;
}
.section-how .how-step{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.75rem;
  min-width:0;
  padding:1.1rem;
  border-radius:var(--radius-lg);
  background:rgba(10,17,64,.74);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.section-how .how-num{
  width:46px;
  height:46px;
  flex:none;
  color:var(--indigo);
  background:linear-gradient(135deg, var(--periwinkle), var(--lavender));
  border:0;
  box-shadow:0 8px 18px -9px rgba(92,107,171,.7);
}
.section-how .how-content{ min-height:8.6rem; }
.section-how .how-content h3{
  margin:.15rem 0 .45rem;
  color:#fff;
  font-family:"Manrope", sans-serif;
  font-size:1.25rem;
  line-height:1.18;
}
.section-how .how-content p{
  color:rgba(255,255,255,.76);
  font-size:.96rem;
  line-height:1.55;
}
.section-how .how-visual{
  width:100%;
  aspect-ratio:1.42 / 1;
  max-height:240px;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(145deg, #18245a, #0a1140);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.85);
}
.section-how .how-photo img,
.section-how .how-app img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.section-how .how-app{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.section-how .how-app img{
  width:auto;
  max-width:100%;
  height:100%;
  max-height:100%;
  object-fit:contain;
  background:transparent;
  border-radius:12px;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9);
}
.section-how .how-ui{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:12px;
  background:linear-gradient(155deg, #111a48 0%, #080e30 100%);
}
.how-checkin .how-card-head{ margin:0; }
.how-checkin .how-card-hint{ margin:0; }
.how-checkin .how-card-grid{
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:5px;
  flex:1;
  min-height:0;
  margin:0;
}
.how-checkin .allergen-tile{
  min-height:0;
  aspect-ratio:auto;
  padding:.2rem;
  border-radius:7px;
}
.how-checkin .allergen-tile img{ width:34px; height:34px; }
.how-checkin .allergen-tile span{ font-size:.48rem; }
.how-checkin .how-card-next{
  margin:0;
  padding:.38rem;
  border-radius:7px;
  font-size:.56rem;
  text-align:center;
}
.how-ui-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  font-size:.76rem;
  line-height:1;
}
.how-ui-head strong{ font-family:"Manrope", sans-serif; font-weight:800; }
.how-ui-head span{ color:var(--periwinkle); font-size:.64rem; font-weight:700; }
.how-ui-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:6px;
  flex:1;
  min-height:0;
}
.how-allergen{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:0;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
  font-size:.59rem;
  line-height:1.05;
  text-align:center;
}
.how-allergen img{ width:34px; height:34px; object-fit:contain; filter:brightness(0) invert(1); }
.how-allergen.selected{
  color:var(--indigo-deep);
  background:linear-gradient(145deg, var(--periwinkle), var(--lavender));
  border-color:rgba(255,255,255,.28);
}
.how-allergen.selected img{ filter:brightness(0) invert(1); }
.how-allergen b{
  position:absolute;
  top:3px;
  right:4px;
  font-size:.56rem;
  color:var(--indigo);
}
.how-ui-action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:24px;
  border-radius:7px;
  color:#fff;
  background:linear-gradient(105deg, #7f8fc9, #9a93d8);
  font-size:.66rem;
  font-weight:800;
}
.how-menu-list{ display:flex; flex:1; min-height:0; flex-direction:column; gap:5px; }
.how-menu-item{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:3px 9px;
  flex:1;
  min-height:0;
  padding:7px 8px;
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.08);
}
.how-menu-item strong{ font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dish-photo{
  grid-row:1 / 3;
  width:34px;
  height:34px;
  border-radius:6px;
  object-fit:cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.dish-status{
  grid-column:2;
  justify-self:start;
  padding:3px 6px;
  border-radius:5px;
  font-size:.54rem;
  line-height:1;
  white-space:nowrap;
}
.dish-status.works{ color:#fff; background:#6f7fca; }
.dish-status.modify{ color:#fff; background:#7888d7; }
.dish-status.avoid{ color:rgba(255,255,255,.72); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.how-confirm{
  justify-content:space-between;
  color:#fff;
}
.how-confirm-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.7rem;
  line-height:1;
}
.how-confirm-head span{ color:rgba(255,255,255,.68); font-weight:700; }
.how-confirm-head strong{ font-family:"Manrope", sans-serif; font-size:.76rem; }
.how-confirm-card{
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(255,255,255,.055);
  overflow:hidden;
}
.how-confirm-row{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.how-confirm-row:last-child{ border-bottom:0; }
.how-confirm-row.modification{ background:rgba(159,148,222,.1); }
.how-confirm-label{
  color:rgba(255,255,255,.58);
  font-size:.55rem;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-weight:800;
}
.how-confirm-row strong{ font-size:.65rem; line-height:1.2; }
.how-confirm-row.modification strong{ color:var(--lavender); }
.how-confirm-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:28px;
  border-radius:8px;
  color:var(--indigo-deep);
  background:linear-gradient(105deg, var(--periwinkle), var(--lavender));
  font-size:.65rem;
  font-weight:800;
}
.how-confirm-status i{
  display:grid;
  place-items:center;
  width:15px;
  height:15px;
  border-radius:50%;
  color:#fff;
  background:var(--indigo);
  font-size:.57rem;
  font-style:normal;
}
.section-how .hv-log{
  aspect-ratio:1.42 / 1;
  max-height:240px;
  background:linear-gradient(145deg, #18245a, #0a1140);
}
.section-how .hv-log-card{
  inset:6%;
  padding:14px;
  border-radius:14px;
  background:linear-gradient(155deg, #111b4b, #080e32);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.7);
}
.section-how .hv-log-title{ color:#fff; border-color:rgba(255,255,255,.12); }
.section-how .hv-log-row,
.section-how .hv-log-row.done{ color:rgba(255,255,255,.78); border-color:rgba(255,255,255,.09); }
.section-how .hv-log-title{ font-size:.92rem; margin-bottom:5px; padding-bottom:7px; }
.section-how .hv-log-row{ gap:7px; font-size:.68rem; padding:.38rem 0; }
.section-how .hv-time{ font-size:.62rem; }
.section-how .hv-check{ width:15px; height:15px; }
.section-how .hv-check::after{ left:4px; top:5px; width:5px; height:3px; }

@media (min-width:700px){
  .section-how .how-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem; }
  .section-how .how-content{ min-height:7.8rem; }
}
@media (min-width:1040px){
  .section-how .how-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.35rem; }
  .section-how .how-step{ padding:1.2rem; }
  .section-how .how-content{ min-height:7.4rem; }
  .section-how .how-content h3{ font-size:1.35rem; }
  .section-how .how-content p{ font-size:1rem; }
  .section-how .how-visual{
    width:86%;
    height:205px;
    max-height:205px;
    aspect-ratio:auto;
    margin-left:auto;
    margin-right:auto;
  }
  .section-how .how-ui{
    gap:4px;
    padding:10px;
  }
  .how-checkin .how-card-grid{
    grid-template-rows:repeat(2, minmax(0,1fr));
  }
  .how-checkin .allergen-tile{
    gap:1px;
    overflow:hidden;
    padding:.1rem;
  }
  .how-checkin .allergen-tile img{
    width:32px;
    height:32px;
  }
  .how-checkin .allergen-tile span{
    font-size:.44rem;
    line-height:1.05;
  }
  .phone-frame{ width:min(100%, 350px); }
}

@media (max-width:699px){
  .section-how{
    padding-top:54px;
    padding-bottom:64px;
    background:transparent;
  }
  .section-how .how-title{ margin-bottom:1.5rem; }
  .section-how .how-grid{ gap:.85rem; }
  .section-how .how-step{
    display:grid;
    grid-template-columns:minmax(0,1fr) 118px;
    grid-template-areas:
      "number visual"
      "copy visual";
    align-items:start;
    gap:.7rem .9rem;
    padding:1rem;
  }
  .section-how .how-num{ grid-area:number; width:40px; height:40px; }
  .section-how .how-content{ grid-area:copy; min-height:0; }
  .section-how .how-content h3{ margin:0 0 .4rem; font-size:1.08rem; }
  .section-how .how-content p{ font-size:.88rem; line-height:1.48; }
  .section-how .how-visual,
  .section-how .hv-log{
    grid-area:visual;
    width:118px;
    height:158px;
    max-height:none;
    aspect-ratio:auto;
    margin:0;
    align-self:center;
    border-radius:14px;
  }
  .section-how .how-photo img{ object-position:center; }
  .section-how .how-app{ padding:8px; }
  .section-how .how-ui{ padding:6px; gap:4px; }
  .how-checkin .how-card-grid{ gap:3px; }
  .how-checkin .allergen-tile{ border-radius:5px; padding:.1rem; }
  .how-checkin .allergen-tile img{ width:20px; height:20px; }
  .how-checkin .allergen-tile span{ font-size:.34rem; }
  .how-checkin .tile-check{ width:9px; height:9px; top:2px; right:2px; font-size:.36rem !important; }
  .how-checkin .how-card-hint{ font-size:.4rem; }
  .how-checkin .how-card-next{ padding:.25rem; font-size:.4rem; }
  .how-ui-head{ font-size:.5rem; }
  .how-ui-head span{ display:none; }
  .how-ui-grid{ gap:3px; }
  .how-allergen{ border-radius:5px; font-size:.42rem; }
  .how-allergen img{ width:20px; height:20px; }
  .how-allergen b{ top:1px; right:2px; font-size:.35rem; }
  .how-ui-action{ min-height:18px; border-radius:5px; font-size:.42rem; }
  .how-menu-list{ gap:3px; }
  .how-menu-item{ grid-template-columns:22px minmax(0,1fr); padding:4px; gap:2px 5px; border-radius:5px; }
  .dish-photo{ width:20px; height:20px; border-radius:4px; }
  .how-menu-item strong{ font-size:.43rem; }
  .dish-status{ grid-column:2; justify-self:start; padding:2px 3px; font-size:.34rem; }
  .how-confirm-head{ font-size:.46rem; }
  .how-confirm-head strong{ font-size:.49rem; }
  .how-confirm-card{ border-radius:6px; }
  .how-confirm-row{
    grid-template-columns:1fr;
    gap:2px;
    padding:4px 6px;
  }
  .how-confirm-label{ font-size:.35rem; }
  .how-confirm-row strong{ font-size:.46rem; }
  .how-confirm-status{
    gap:4px;
    min-height:20px;
    border-radius:5px;
    font-size:.42rem;
  }
  .how-confirm-status i{ width:10px; height:10px; font-size:.36rem; }
  .section-how .hv-log-card{ inset:5%; padding:7px; }
  .section-how .hv-log-title{ font-size:.62rem; padding-bottom:4px; margin-bottom:2px; }
  .section-how .hv-log-row{ grid-template-columns:auto 1fr; gap:4px; font-size:.45rem; padding:.2rem 0; }
  .section-how .hv-time{ display:none; }
  .section-how .hv-check{ width:10px; height:10px; }
  .section-how .hv-check::after{ left:3px; top:3px; width:3px; height:2px; border-width:1px; }
}

/* ---------- desktop density ---------- */
@media (min-width:900px){
  .section{
    padding-top:48px;
    padding-bottom:48px;
  }
  .hero{
    padding-top:40px;
    padding-bottom:40px;
  }
  .manager-dashboard{ margin-top:1.5rem; }
  .oversight-subhead{ margin-top:1.7rem; }
  .section-accountability .oversight-subhead + .cards{ margin-top:1rem; }
  .section-how .how-lead{ margin-bottom:1.8rem; }
  .cta{ padding-bottom:72px; }
  .cta-inner{
    padding-top:56px;
    padding-bottom:56px;
  }
}

@media (min-width:1040px){
  .phone-frame{ width:min(100%, 300px); }
  .section-how .how-step{ padding:1rem; }
  .section-how .how-content{ min-height:6.6rem; }
  .section-how .how-visual{
    height:195px;
    max-height:195px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hv-check.empty{ animation:none; }
}