/* Kwali shared styles for all pages. Brand: Sora only, flat colors only, #11111B + #2864C8 + four pastels. */
:root{
  --brand:#2864C8; --ink:#11111B;
  /* legacy aliases still referenced by rules below */
  --brand-600:var(--brand); --brand-700:var(--brand);
  --pastel-blue:#EAF2FF; --pastel-yellow:#FFFCEA; --pastel-green:#ECFAF1; --pastel-pink:#FFEAEA;
  --ink-2:#3B4258; --muted:#606a80;
  --surface:#FFFFFF; --tint:var(--pastel-blue); --tint-3:var(--pastel-blue);
  --line:#E3E9F5; --line-2:#D5DEF2;
  /* functional state colors (not brand): data state inside labeled product mocks and form errors,
     like the mock status dots #3ECF8E #F5B14C #E5484D and the dark TV bezel */
  --success:#059669; --danger:#DC2626;
  --success-text:#047857; --amber-text:#92400E; --danger-text:#B91C1C;
  --radius:16px; --radius-lg:26px; --radius-sm:10px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,18,31,.06),0 1px 3px rgba(16,18,31,.05);
  --shadow-md:0 8px 24px rgba(23,63,130,.10),0 2px 6px rgba(16,18,31,.05);
  --shadow-lg:0 30px 70px rgba(23,63,130,.18),0 8px 20px rgba(16,18,31,.08);
  --maxw:1200px;
  --sans:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:var(--sans);
  --step-1:clamp(.83rem,.8rem + .1vw,.9rem);
  --step0:clamp(1rem,.96rem + .18vw,1.075rem);
  --step1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step2:clamp(1.5rem,1.3rem + 1vw,2rem);
  --step3:clamp(2rem,1.6rem + 2vw,3rem);
  --step4:clamp(2.6rem,1.9rem + 3.4vw,4.25rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--surface);
  font-size:var(--step0);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:var(--step-1);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600)}
.lead{color:var(--ink-2);font-size:var(--step1);line-height:1.5}
.textlink{color:var(--brand-600);font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.textlink svg{width:1rem;height:1rem;transition:transform .18s}
.textlink:hover svg{transform:translateX(3px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:600;
  font-size:var(--step0);padding:.85rem 1.4rem;border-radius:var(--radius-pill);cursor:pointer;
  border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 3px 8px rgba(40,100,200,.14)}
.btn-primary:hover{background:var(--ink);box-shadow:0 5px 12px rgba(40,100,200,.20)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-600)}
.btn-lg{padding:1.02rem 1.7rem;font-size:var(--step1)}
.btn svg{width:1.05em;height:1.05em;flex:none}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease}
.site-header.scrolled{border-color:var(--line);box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;gap:1.5rem;height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{height:30px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.nav-links a{font-weight:500;color:var(--ink-2);font-size:.98rem;transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--brand-600)}
.nav-links a[aria-current="page"]{font-weight:600}
.nav-cta{display:flex;align-items:center;gap:.8rem;margin-left:.4rem}
.nav-login{font-weight:600;font-size:.9rem;color:var(--brand-600);white-space:nowrap;padding:.55rem 1rem;border:1px solid var(--brand-600);border-radius:999px;transition:background .15s}
.nav-login:hover{background:var(--pastel-blue)}
/* the mobile menu already carries the link, so the header keeps only the main button */
@media (max-width:900px){.nav-cta .nav-login{display:none}}
.nav-toggle{display:none;background:none;border:0;padding:.4rem;cursor:pointer;color:var(--ink)}
.nav-toggle svg{width:26px;height:26px}

/* Hero (home) */
.hero{position:relative;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem);overflow:hidden;background:var(--pastel-blue)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.hero h1{font-size:var(--step4);font-weight:800;margin:1rem 0 1.1rem}
.hero .lead{max-width:34ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-aside{margin-top:.9rem;color:var(--ink-2);font-size:.92rem}
/* headline stats: large enough to read at a glance, well below the h1 size */
.hero-stats{list-style:none;margin:1.6rem 0 0;padding:1.2rem 0 0;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:1rem clamp(1.2rem,3vw,2.4rem)}
.hero-stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);line-height:1.05;color:var(--brand-700);white-space:nowrap}
.hero-stat span{display:block;margin-top:.3rem;color:var(--ink-2);font-size:.88rem;line-height:1.35;max-width:17ch}
@media (max-width:479px){.hero-stats{grid-template-columns:1fr}}

/* Page hero (subpages) */
.page-hero{position:relative;padding:clamp(2.5rem,6vw,4rem) 0 clamp(2rem,4vw,3rem);overflow:hidden;background:var(--pastel-blue)}
.page-hero h1{font-size:var(--step3);margin:.8rem 0 .9rem;max-width:22ch}
.page-hero .lead{max-width:58ch}
.page-hero .hero-actions{margin-top:1.4rem}

/* Product window mockup */
.mock{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.mock-chrome{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;background:#F4F6FC;border-bottom:1px solid var(--line)}
.mock-dots{display:flex;gap:.4rem}
.mock-dots i{width:11px;height:11px;border-radius:50%;display:block}
.dot-r{background:#FF5F57}.dot-y{background:#FEBC2E}.dot-g{background:#28C840}
.mock-url{margin-left:.6rem;font-size:.78rem;color:var(--muted);background:#fff;border:1px solid var(--line);
  padding:.25rem .7rem;border-radius:var(--radius-pill);font-family:var(--sans)}
.mock-sample{margin-left:auto;font-size:.74rem;font-weight:600;color:var(--ink-2);font-family:var(--sans);letter-spacing:.03em}
.mock-body{display:grid;grid-template-columns:1fr;gap:.9rem;padding:1rem}
.mock-head{display:flex;align-items:center;justify-content:space-between}
.mock-head b{font-family:var(--display);font-size:1rem}
.mock-head > span:not(.verdict){font-size:.72rem;font-weight:600;color:var(--muted)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.kpi{background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem}
.kpi span{font-size:.68rem;color:var(--muted);font-weight:500;display:block;text-transform:uppercase;letter-spacing:.05em}
.kpi b{font-family:var(--display);font-size:1.15rem;color:var(--brand-700)}
.mock-split{display:grid;grid-template-columns:1.1fr .9fr;gap:.9rem}
.stores{display:flex;flex-direction:column;gap:.55rem}
.store{display:grid;grid-template-columns:1fr auto;gap:.3rem .6rem;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem}
.store .name{font-weight:600;font-size:.82rem}
.store .bar{grid-column:1/-1;height:6px;border-radius:99px;background:#EEF1F8;overflow:hidden}
.store .bar i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.score{font-family:var(--display);font-weight:700;font-size:.82rem}
.score.ok{color:var(--success-text)}.score.mid{color:var(--amber-text)}
.feed{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);min-height:150px;background:var(--ink)}
.feed img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feed .box{position:absolute;left:16%;top:20%;width:64%;height:56%;border:2px solid #6BF0B0;border-radius:8px;box-shadow:0 0 0 3px rgba(107,240,176,.2)}
.feed .tag{position:absolute;left:16%;top:calc(20% - 22px);background:#6BF0B0;color:#04351f;font-weight:700;
  font-size:.7rem;padding:.12rem .5rem;border-radius:6px;font-family:var(--display)}
.feed .cam{position:absolute;right:.5rem;bottom:.5rem;color:#fff;font-size:.66rem;background:rgba(0,0,0,.45);
  padding:.2rem .5rem;border-radius:6px;display:flex;gap:.35rem;align-items:center}
.feed .cam i{width:6px;height:6px;border-radius:50%;background:#FF5F57;animation:pulse 1.8s infinite}

/* Sections */
section{scroll-margin-top:80px}
.band{padding:clamp(3.5rem,7vw,6rem) 0}
.band.tint{background:var(--tint-3)}
.sec-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:var(--step3);margin:.7rem 0 .8rem}
.sec-head p{color:var(--ink-2);font-size:var(--step1);line-height:1.5}
.sec-foot{margin-top:clamp(1.6rem,3vw,2.4rem);text-align:center;display:flex;flex-direction:column;align-items:center;gap:.9rem}

/* Role tabs */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem;background:var(--tint);
  padding:.4rem;border-radius:var(--radius-pill);width:fit-content;max-width:100%}
.tab{font-family:var(--display);font-weight:600;font-size:.95rem;padding:.6rem 1.2rem;border-radius:var(--radius-pill);
  border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .18s,color .18s}
.tab[aria-selected="true"]{background:#fff;color:var(--brand-700);box-shadow:var(--shadow-sm)}
/* narrow screens: one swipeable row instead of pills stacked in uneven rows */
@media (max-width:759px){
  .tabs{flex-wrap:nowrap;width:100%;overflow-x:auto;scrollbar-width:none;border:1px solid var(--line)}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;white-space:nowrap;padding:.6rem 1rem}
}
.panel{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.panel[hidden]{display:none}
.panel .copy h3{font-size:var(--step2);margin-bottom:.8rem}
.panel .copy p{color:var(--ink-2);font-size:var(--step0);margin-bottom:.7rem}
.panel .visual{background:var(--brand);border-radius:var(--radius-lg);min-height:230px;padding:1.5rem;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow-md)}

/* Steps */
.steps{display:grid;grid-template-columns:1fr;gap:1.2rem;counter-reset:step}
.step-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;position:relative;padding-top:4.4rem}
.step-card::before{counter-increment:step;content:counter(step);position:absolute;top:1.3rem;left:1.6rem;
  width:38px;height:38px;border-radius:11px;background:var(--brand);color:#fff;font-family:var(--display);font-weight:700;display:grid;place-items:center}
.step-card h3{font-size:var(--step1);margin:.4rem 0 .5rem}
.step-card p{color:var(--ink-2);font-size:.95rem}

/* FAQ */
.faq{display:grid;gap:.8rem;max-width:820px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.2rem 1.4rem;font-family:var(--display);font-weight:600;
  font-size:var(--step0);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:24px;height:24px;position:relative;transition:transform .2s}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--brand);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq summary .plus::before{width:14px;height:2px}
.faq summary .plus::after{width:2px;height:14px;transition:transform .2s}
.faq details[open] summary .plus::after{transform:translate(-50%,-50%) scaleY(0)}
.faq details[open] summary{color:var(--brand-700)}
.faq p{padding:0 1.4rem 1.3rem;color:var(--ink-2)}

/* Prose + spec + statline (subpages) */
.grid-2{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.prose p{margin-bottom:1rem;color:var(--ink-2)}
.prose h2{font-size:var(--step2);margin:.7rem 0 .9rem}
.prose h3{font-size:var(--step2);margin:1.6rem 0 .7rem}
ul.spec{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.7rem}
ul.spec li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-2)}
ul.spec li svg{width:1.2rem;height:1.2rem;color:var(--success-text);flex:none;margin-top:.2rem}
.statline{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;margin-top:1.6rem}
.statline div b{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--brand-700);display:block;line-height:1.1}
.statline div span{color:var(--muted);font-size:.85rem}

/* Contact layout */
.contact-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
.contact-aside{order:-1} /* aside first on mobile */
.contact-aside ul.spec{margin-top:1rem}

/* CTA band */
.cta-band{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:clamp(2.5rem,6vw,4rem);text-align:center;position:relative;overflow:hidden}
.cta-band h2{font-size:var(--step3);margin-bottom:.9rem}
.cta-band p{color:rgba(255,255,255,.78);font-size:var(--step1);max-width:48ch;margin:0 auto 1.8rem}
.cta-band .btn{margin:.4rem .3rem}
.cta-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.cta-band .btn-ghost:hover{border-color:#fff;color:#fff}
/* primary hover goes to ink, which would vanish on the ink band */
.cta-band .btn-primary:hover{background:#fff;color:var(--ink)}
.cta-band .cta-note{margin:1.1rem auto 0;color:rgba(255,255,255,.6);font-size:.88rem}
/* inline so the trailing period wraps with the link text instead of dropping to its own line */
.cta-note .textlink{display:inline}

/* Footer */
.site-footer{background:#fff;border-top:1px solid var(--line);padding:clamp(3rem,6vw,4rem) 0 2rem}
.foot-grid{display:grid;grid-template-columns:1fr;gap:2.2rem}
.foot-brand .brand{color:var(--ink);margin-bottom:.9rem}
.foot-brand p{color:var(--muted);font-size:.92rem;max-width:34ch}
.foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem}
.foot-col h3{font-family:var(--display);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.9rem;font-weight:600}
.foot-col a{display:block;color:var(--ink-2);font-size:.95rem;padding:.3rem 0;transition:color .15s}
.foot-col a:hover{color:var(--brand-600)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
.foot-social{display:flex;gap:.8rem}
.foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2)}
.foot-social a:hover{border-color:var(--brand);color:var(--brand)}
.foot-social svg{width:18px;height:18px}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .feed .cam i{animation:none}
}

/* Responsive */
@media (min-width:720px){
  .mock-body{padding:1.3rem}
  .steps{grid-template-columns:repeat(6,1fr)}
  .steps>.step-card{grid-column:span 2}
  .steps>.step-card:nth-child(4){grid-column:2/span 2}
  .foot-grid{grid-template-columns:1.3fr 2fr}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:860px){
  .grid-2{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1.4fr 1fr}
  .contact-aside{order:0}
}
@media (min-width:960px){
  .hero-grid{grid-template-columns:1.05fr 1fr}
  .panel{grid-template-columns:1fr 1fr}
  .panel.rev .visual{order:-1}
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-cta .btn{padding:.6rem 1rem;font-size:.9rem}
  .mobile-menu.open{display:block}
}
.mobile-menu{display:none;border-top:1px solid var(--line);background:#fff}
.mobile-menu .wrap{display:flex;flex-direction:column;gap:.3rem;padding-block:1rem}
.mobile-menu a:not(.btn):not(.nav-login){padding:.7rem .2rem;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:.8rem;justify-content:center}
.mobile-menu a[aria-current="page"]:not(.btn){color:var(--brand-600);font-weight:600}

/* Content components */

.st-mid{background:#F5B14C}.st-bad{background:#E5484D}

/* Email-client mock */
.emailmock{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden}
.em-chrome{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .9rem;background:#F4F6FC;border-bottom:1px solid var(--line);font-size:.74rem;color:var(--muted)}
.em-chrome span:last-child{font-weight:600;color:var(--ink-2)}
.em-meta{display:grid;gap:.15rem;padding:.8rem .9rem;border-bottom:1px solid var(--line)}
.em-meta .from{font-size:.8rem;color:var(--ink-2)}
.em-meta .from b{color:var(--ink)}
.em-meta .subject{font-family:var(--display);font-weight:600;font-size:.92rem}
.em-body{display:grid;gap:.8rem;padding:.9rem;font-size:.85rem;color:var(--ink-2)}
.em-shift{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.em-shift-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem .8rem;padding:.55rem .7rem;background:var(--tint-3);border-bottom:1px solid var(--line);font-size:.78rem}
.em-shift-head b{font-family:var(--display)}
.em-shift-head span{font-weight:600;color:var(--brand-700)}
.em-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.6rem .7rem}
.em-tile{margin:0}
.em-tile .ph{display:block;height:84px;border-radius:8px;background:#E9EDF6;overflow:hidden}
.em-tile .ph img{width:100%;height:100%;object-fit:cover}
.em-tile figcaption{font-size:.68rem;color:var(--muted);line-height:1.35;margin-top:.3rem}
.em-rank{width:100%;border-collapse:collapse;font-size:.78rem;margin:0}
.em-rank td{padding:.35rem .7rem;border-bottom:1px solid var(--line)}
.em-rank td:last-child{text-align:right;font-family:var(--display);font-weight:700}
.em-rank .em-rank-gap td{border-top:1px dashed var(--line-2);padding:0;height:4px}
.em-rank .you td{background:var(--pastel-green);color:#167a42;font-weight:600;border-bottom:0}
.em-check{display:inline-grid;place-items:center;width:1.1rem;height:1.1rem;margin-right:.35rem;border-radius:50%;background:#167a42;color:#fff;vertical-align:-.2rem}
.em-check svg{width:.7rem;height:.7rem}
.em-remind{display:grid;gap:.3rem;background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;font-size:.8rem}
.em-remind>b{font-family:var(--display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-700)}

/* Paper / weekly report mock */
.papermock{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:6px;padding:1.1rem 1.2rem 1.3rem;
  box-shadow:0 12px 28px rgba(23,63,130,.14),0 2px 6px rgba(16,18,31,.06)}
.papermock::after{content:"";position:absolute;left:6px;right:6px;bottom:-6px;height:6px;background:#fff;border:1px solid var(--line-2);border-top:0;border-radius:0 0 6px 6px;z-index:-1}
.pm-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem .8rem;border-bottom:2px solid var(--ink);padding-bottom:.6rem;margin-bottom:.9rem}
.pm-head b{font-family:var(--display);font-size:.95rem}
.pm-head span{font-size:.74rem;font-weight:600;color:var(--ink-2)}
.pm-sec{display:block;font-family:var(--display);font-weight:600;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.pm-grid{display:grid;grid-template-columns:1fr;gap:.9rem}
.pm-table{width:100%;border-collapse:collapse;font-size:.78rem}
.pm-table td{padding:.35rem 0;border-bottom:1px solid var(--line)}
.pm-table td:last-child{text-align:right;font-family:var(--display);font-weight:700}
.pm-table .low{color:var(--danger-text)}
.pm-table .pm-gap td{border-top:1px dashed var(--line-2);padding:0;height:4px}
.pm-bench{border-top:1px solid var(--line);padding-top:.6rem;margin-top:.9rem;font-size:.8rem;color:var(--ink-2)}
.pm-bench b{font-family:var(--display);color:var(--ink)}
.pm-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.pm-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:600;border:1px solid var(--line);border-radius:var(--radius-pill);padding:.3rem .7rem}
.pm-chip i{width:7px;height:7px;border-radius:50%;flex:none}
.pm-chip i.ok{background:var(--success)}.pm-chip i.bad{background:var(--danger)}

/* Platform: Kwali TV copy row and monthly report intro */
.tvwall-row{margin-top:2rem;align-items:start}
/* the email and dashboard mocks are far taller than their copy: top-align and let the copy follow while scrolling */
@media (min-width:760px){#daily-email .grid-2,#dashboard .grid-2{align-items:start}#daily-email .prose,#dashboard .prose{position:sticky;top:6rem}}
.tvwall-row ul.spec{margin-top:0}
.tvwall-row .prose p{margin-top:1.1rem}
.monthly-row{margin-top:clamp(2.5rem,5vw,4rem)}
.monthly-title{font-size:var(--step2);margin:.7rem 0 .8rem}
/* two right-aligned value columns so day and night stay comparable at mock width */
.pm-shift th{font-family:var(--display);font-weight:600;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 0 .3rem;border-bottom:1px solid var(--line)}
.pm-shift th:not(:first-child),.pm-shift td:not(:first-child){text-align:right;width:3.2rem}
.pm-shift td:not(:first-child){font-family:var(--display);font-weight:700}
/* separate borders: collapsed ones ignore the rounded corners of the table */
.report-cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:clamp(2rem,4vw,3rem);background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.95rem}
.report-cmp caption{caption-side:top;text-align:left;font-family:var(--display);font-weight:600;font-size:var(--step1);margin-bottom:.8rem;color:var(--ink)}
.report-cmp th,.report-cmp td{padding:.75rem 1rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.report-cmp thead th{font-family:var(--display);font-weight:600;background:var(--tint);color:var(--ink)}
.report-cmp tbody th{font-weight:500;color:var(--ink);width:38%}
.report-cmp td{color:var(--ink-2)}
.report-cmp tbody tr:last-child th,.report-cmp tbody tr:last-child td{border-bottom:0}
.cmp-yes{display:inline-flex;align-items:center;gap:.4rem;color:var(--success-text);font-weight:600}
.cmp-yes svg{width:1.1rem;height:1.1rem;flex:none}
.cmp-no{color:var(--muted)}
@media (max-width:600px){.report-cmp{font-size:.85rem}.report-cmp th,.report-cmp td{padding:.6rem .6rem}}

/* Sparkline (CSS bars, heights inline per data point) */
.spark{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;align-items:end;height:64px}
.spark i{display:block;background:var(--brand);border-radius:5px 5px 0 0;min-height:8px}
.spark-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;text-align:center;font-size:.66rem;color:var(--muted);margin-top:.3rem}
.stores .store-gap{border-top:1px dashed var(--line-2);height:0;margin:.1rem .2rem}

/* Surface tiles */
.surfaces{display:grid;grid-template-columns:1fr;gap:1rem}
.surface{display:flex;flex-direction:column;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.surface:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.surface .ico{width:44px;height:44px;border-radius:12px;background:var(--tint);display:grid;place-items:center}
.surface .ico img{width:24px;height:24px;object-fit:contain}
.surface .ico svg{width:22px;height:22px;color:var(--brand-600)}
.surface h3{font-size:1.02rem}
.surface p{color:var(--ink-2);font-size:.9rem;flex:1}
.surface .go{display:inline-flex;align-items:center;gap:.35rem;color:var(--brand-600);font-weight:600;font-size:.9rem}
.surface .go svg{width:.95rem;height:.95rem;transition:transform .18s}
.surface:hover .go svg{transform:translateX(3px)}

/* In-page anchor strip */
.anchor-strip{display:flex;gap:.5rem;overflow-x:auto;padding:.9rem 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.anchor-strip::-webkit-scrollbar{display:none}
.anchor-strip a{flex:none;font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--ink-2);background:#fff;
  border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:.45rem 1rem;transition:color .15s,border-color .15s}
.anchor-strip a:hover{color:var(--brand-600);border-color:var(--brand)}

/* Breadcrumb */
.crumb{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--muted);margin-bottom:.9rem}
.crumb a{transition:color .15s}
.crumb a:hover{color:var(--brand-600)}
.crumb [aria-current="page"]{color:var(--ink-2);font-weight:500}

/* Mini stat mock */
.minimock{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.9rem;box-shadow:var(--shadow-sm)}
.mm-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.7rem}
.mm-title b{font-family:var(--display);font-size:.85rem;color:var(--ink)}
.mm-title span{font-size:.72rem;font-weight:600;color:var(--ink-2);letter-spacing:.03em;white-space:nowrap}
.mm-rows{display:grid;gap:.45rem}
.mm-row{display:flex;justify-content:space-between;gap:.8rem;font-size:.8rem;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:.45rem}
.mm-row:last-child{border-bottom:0;padding-bottom:0}
.mm-row b{font-family:var(--display);color:var(--ink)}
.mm-row .low{color:var(--danger-text)}

/* Dashboard mock refinements */
.mock-label{font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mock-view{display:grid;gap:.45rem;align-content:start}
.mock-views{display:grid;grid-template-columns:1fr;gap:.9rem}
.score.low{color:var(--danger-text)}
.feedstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.feedcard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.feedcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.feedcard .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.2rem .3rem;padding:.35rem .45rem}
.feedcard .row b{font-family:var(--display);font-size:.68rem;white-space:nowrap}
.feedcard .why{display:block;padding:0 .45rem .4rem;font-size:.6rem;color:var(--muted);line-height:1.3}
.verdict{font-family:var(--display);font-weight:700;font-size:.6rem;padding:.1rem .4rem;border-radius:6px;white-space:nowrap}
/* in the narrow feed cards the chip may wrap instead of being cut */
.feedcard .verdict{white-space:normal;line-height:1.25}
.v-pass{color:var(--success-text);background:rgba(5,150,105,.12)}
.v-avg{color:var(--amber-text);background:rgba(180,83,9,.12)}
.v-fail{color:var(--danger-text);background:rgba(220,38,38,.10)}

/* Attribution / compliance note */
.qnote{color:var(--muted);font-size:.78rem;margin-top:.5rem}

/* Responsive (new components) */
@media (min-width:720px){
  .surfaces{grid-template-columns:repeat(2,1fr)}
  .mock-views{grid-template-columns:1.4fr 1fr}
  .pm-grid{grid-template-columns:1.1fr .9fr}
}
@media (min-width:1100px){
  .surfaces{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .surface{transition:none}
  .surface:hover{transform:none}
  .surface .go svg,.anchor-strip a,.crumb a{transition:none}
}

.roles{display:grid;grid-template-columns:1fr;gap:1.2rem}
.role-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm)}
.role-tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-600)}
.role-tag i{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
.role-card h3{font-size:var(--step1);margin:.7rem 0 .8rem}
.role-card ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;color:var(--ink-2);font-size:.95rem}
.role-card p{color:var(--ink-2);font-size:.97rem}
@media (min-width:720px){
  .roles{grid-template-columns:repeat(3,1fr)}
}

/* Proof, offer and pillar components. Clean cards, flat fills, no accent bars. */
.tagline{font-family:var(--display);font-weight:600;font-size:var(--step2);color:var(--brand);margin:0 0 1rem;line-height:1.2}
.sec-title{font-size:var(--step3);margin:.7rem 0 .9rem}
.sec-link{margin-top:1.4rem}

/* Proof: footprint stats */
.proof-stats{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr;gap:1.2rem;max-width:820px}
.proof-stats li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.6rem;text-align:center}
.proof-stats b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2rem,1.5rem + 2vw,3rem);line-height:1.05;color:var(--ink)}
.proof-stats span{display:block;margin-top:.5rem;color:var(--ink-2);font-size:.95rem;line-height:1.4}
@media (min-width:600px){.proof-stats{grid-template-columns:repeat(2,1fr)}}

/* Proof: photo pair. Each frame holds four real pictures that take turns (.photo-frame__slides) */
.photo-pair{display:grid;grid-template-columns:1fr;gap:1.2rem;max-width:1000px;margin-inline:auto}
.photo-frame{margin:0}
/* square frame: the report pictures are square, 4:3 cropped the pizza */
.photo-frame__slides{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden}
/* tinted backdrop so a slide that is still loading does not show a white hole */
.photo-frame--without .photo-frame__slides{background:var(--pastel-pink)}
.photo-frame--with .photo-frame__slides{background:var(--pastel-green)}
/* one clock for both frames so without and with change together */
.photo-frame__slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:photo-turn 16s ease-in-out infinite}
.photo-frame__slides img:nth-child(1){animation-delay:0s}
.photo-frame__slides img:nth-child(2){animation-delay:4s}
.photo-frame__slides img:nth-child(3){animation-delay:8s}
.photo-frame__slides img:nth-child(4){animation-delay:12s}
/* loop length, delays and keyframe stops are tied to the four images per frame, change them together */
@keyframes photo-turn{0%,25%{opacity:1}31%,94%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.photo-frame__slides img{animation:none}.photo-frame__slides img:first-child{opacity:1}}
/* Kit illustration, animated. The 15px inset keeps the drawing off the edge. Every layer uses the
   illustration's 1565x1174 grid, so the stage keeps that ratio and the % positions below land on the
   drawing at any width. Back to front: table, pizza, the camera's light, camera, scan layers. */
.kit-anim{padding:15px;background:#dee9fb;border-radius:var(--radius)}
.kit-anim__stage{--kit-dur:7s;position:relative;aspect-ratio:1565/1174;container-type:inline-size;overflow:hidden;border-radius:calc(var(--radius) - 6px)}
.kit-anim__table,.kit-anim__light,.kit-anim__svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* the pizza slides under the light, gets scanned and leaves; two copies take turns, the second mirrored */
.kit-anim__pizza{position:absolute;left:24.28%;top:51.11%;width:51.12%;height:42.59%;display:block;animation:kit-pizza calc(var(--kit-dur) * 2) infinite}
.kit-anim__pizza--b{scale:-1 1;animation-delay:calc(var(--kit-dur) * -1)}
.kit-anim__camera{position:absolute;left:37.7%;top:1.7%;width:24.28%;height:24.7%;display:block;pointer-events:none}
.kit-anim__lens{fill:#5b7fbf;animation:kit-lens var(--kit-dur) infinite}
.kit-anim__brackets{fill:none;stroke:var(--brand);stroke-width:9;stroke-linecap:round;transform-box:fill-box;transform-origin:center;opacity:0;animation:kit-lock var(--kit-dur) infinite}
/* the scan runs inside a window the size of the pizza */
.kit-anim__window{position:absolute;left:24.9%;top:52.8%;width:50.1%;height:40.1%;border-radius:50%;overflow:hidden;pointer-events:none}
.kit-anim__scan{position:absolute;left:0;right:0;top:-25%;height:22%;background:rgba(40,100,200,.20);border-bottom:3px solid var(--brand);animation:kit-scan var(--kit-dur) linear infinite}
/* the eight checks, four on each side of the camera, with short labels (the full names are in the list next to the image) */
.kit-anim__checks{position:absolute;left:3.5%;right:3.5%;top:5%;margin:0;padding:0;list-style:none;display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);justify-content:space-between;row-gap:1.2cqw;pointer-events:none}
.kit-anim__checks li:nth-child(n+5){justify-self:end}
.kit-anim__checks li,.kit-anim__result{display:flex;align-items:center;width:max-content;background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);font-family:var(--display);font-weight:600;line-height:1.2;color:var(--ink);opacity:0}
.kit-anim__checks li{gap:.45em;padding:.35em .8em .35em .35em;font-size:clamp(9px,2.8cqw,14px);box-shadow:0 2px 6px rgba(17,17,27,.08)}
.kit-anim__checks b,.kit-anim__result b{flex:none;border-radius:50%;background:var(--pastel-green);color:#167a42;display:grid;place-items:center;font-size:.8em}
.kit-anim__checks b{width:1.6em;height:1.6em}
.kit-anim__checks li:nth-child(1){animation:kit-c1 var(--kit-dur) infinite}
.kit-anim__checks li:nth-child(2){animation:kit-c2 var(--kit-dur) infinite}
.kit-anim__checks li:nth-child(3){animation:kit-c3 var(--kit-dur) infinite}
.kit-anim__checks li:nth-child(4){animation:kit-c4 var(--kit-dur) infinite}
.kit-anim__checks li:nth-child(5){animation:kit-c5 var(--kit-dur) infinite}
.kit-anim__checks li:nth-child(6){animation:kit-c6 var(--kit-dur) infinite}
.kit-anim__checks li:nth-child(7){animation:kit-c7 var(--kit-dur) infinite}
.kit-anim__checks li:nth-child(8){animation:kit-c8 var(--kit-dur) infinite}
/* the result, on the item itself */
.kit-anim__result{position:absolute;left:50%;top:72%;translate:-50% -50%;gap:.5em;padding:.6em 1em .6em .7em;font-size:clamp(11px,3.4cqw,18px);box-shadow:0 6px 16px rgba(17,17,27,.18);animation:kit-result var(--kit-dur) infinite}
.kit-anim__result b{width:1.5em;height:1.5em}
/* one cycle per pizza: it slides in, lens on, scan with the checks one by one, lock-on, result, everything
   clears, it slides out. translate (not transform) moves in screen space, so the mirrored copy also goes
   left to right */
@keyframes kit-pizza{0%{translate:-155% 0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}6%,40%{translate:0 0;animation-timing-function:cubic-bezier(.6,0,.8,.3)}46%{translate:155% 0}46.1%,100%{translate:155% 0;visibility:hidden}}
@keyframes kit-lens{0%,12%{fill:#5b7fbf}15%{fill:#e4eeff}18%,76%{fill:#9cc2ff}82%,100%{fill:#5b7fbf}}
@keyframes kit-scan{0%,22%{top:-25%}56%,100%{top:105%}}
@keyframes kit-lock{0%,56%{opacity:0;transform:scale(1.06)}60%,76%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(1)}}
@keyframes kit-result{0%,60%{opacity:0;transform:scale(.8)}64%,76%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(1)}}
@keyframes kit-c1{0%,24%{opacity:0;transform:translateX(-8px)}27%,76%{opacity:1;transform:none}80%,100%{opacity:0;transform:none}}
@keyframes kit-c2{0%,28%{opacity:0;transform:translateX(-8px)}31%,76%{opacity:1;transform:none}80%,100%{opacity:0;transform:none}}
@keyframes kit-c3{0%,32%{opacity:0;transform:translateX(-8px)}35%,76%{opacity:1;transform:none}80%,100%{opacity:0;transform:none}}
@keyframes kit-c4{0%,36%{opacity:0;transform:translateX(-8px)}39%,76%{opacity:1;transform:none}80%,100%{opacity:0;transform:none}}
@keyframes kit-c5{0%,40%{opacity:0;transform:translateX(-8px)}43%,76%{opacity:1;transform:none}80%,100%{opacity:0;transform:none}}
@keyframes kit-c6{0%,44%{opacity:0;transform:translateX(-8px)}47%,76%{opacity:1;transform:none}80%,100%{opacity:0;transform:none}}
@keyframes kit-c7{0%,48%{opacity:0;transform:translateX(-8px)}51%,76%{opacity:1;transform:none}80%,100%{opacity:0;transform:none}}
@keyframes kit-c8{0%,52%{opacity:0;transform:translateX(-8px)}55%,76%{opacity:1;transform:none}80%,100%{opacity:0;transform:none}}
/* motion off: the still illustration, one pizza in place under the light */
@media (prefers-reduced-motion:reduce){
  .kit-anim__svg,.kit-anim__window,.kit-anim__checks,.kit-anim__result,.kit-anim__pizza--b{display:none}
  .kit-anim__pizza{animation:none}
  .kit-anim__lens{animation:none;fill:#9cc2ff}
}
.photo-frame__pending{color:var(--ink-2);font-size:.9rem;font-weight:500}
.photo-frame__label{text-align:center;font-family:var(--display);font-weight:600;font-size:var(--step1);margin-top:.8rem;text-wrap:balance}
@media (min-width:720px){.photo-pair{grid-template-columns:repeat(2,1fr)}}

/* The gap: audit vs Kwali (text-only tiles) */
.audit-compare{display:grid;grid-template-columns:1fr;gap:1rem}
.audit-compare>div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.6rem}
.audit-compare span{display:block;font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.audit-compare b{display:block;margin-top:.45rem;font-family:var(--display);font-weight:700;font-size:var(--step2);line-height:1.2;color:var(--ink);text-wrap:balance}
.audit-compare>div:last-child b{color:var(--brand)}

/* Mechanism: the eight checks + camera mock */
.checks-label{margin-top:1.4rem}
.checks{list-style:none;margin:.8rem 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:.6rem;counter-reset:check}
.checks li{counter-increment:check;display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.65rem .8rem;font-weight:500;color:var(--ink)}
.checks li::before{content:counter(check);flex:none;width:26px;height:26px;border-radius:50%;background:var(--pastel-blue);color:var(--brand);font-family:var(--display);font-weight:700;font-size:.8rem;display:grid;place-items:center}
@media (min-width:480px){.checks{grid-template-columns:repeat(2,1fr)}}
/* stays at 2 columns: the list sits in a half-width column, 3 columns would break "Ingredient distribution" */

/* Three pillars */
.pillars{display:grid;grid-template-columns:1fr;gap:1.2rem}
.pillar-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.pillar-tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.pillar-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
/* live cue on the first pillar: the blink says the board updates during the shift */
.pillar-live{display:inline-flex;align-items:center;gap:.35rem;margin-left:.7rem;font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#167a42}
.pillar-live i{width:7px;height:7px;border-radius:50%;background:#3ECF8E;box-shadow:0 0 0 3px rgba(62,207,142,.25);animation:pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pillar-live i{animation:none}}
.pillar-card h3{font-size:var(--step1);margin:.7rem 0 .7rem}
.pillar-card p{color:var(--ink-2);font-size:.97rem}
@media (min-width:960px){.pillars{grid-template-columns:repeat(3,1fr)}}

/* Coach: checklist under the store-screen mock */
ul.spec.spec--cols{max-width:900px;margin:clamp(1.6rem,3vw,2.2rem) auto 0}
@media (min-width:720px){ul.spec.spec--cols{grid-template-columns:repeat(2,1fr);gap:.8rem 2rem}}

.sec-head p.board-pre{font-weight:500;margin-bottom:.5rem}
/* Board chart: positions set here (no inline styles) */
.board-lead{font-family:var(--display);font-weight:600;font-size:var(--step1);line-height:1.35;color:var(--ink);margin-bottom:.8rem}
.sec-head p.board-lead{color:var(--ink);font-size:var(--step1)}
.board-chart{margin:1.5rem 0 0;max-width:760px}
.board-track{position:relative;height:44px;background:var(--pastel-blue);border-radius:var(--radius-sm)}
/* the figures live in the html of index, success-stories and contact: bands use left = range start
   and width = range size, the avg and top marks use right = 100 minus the value, the bottom mark uses left */
.board-top{position:absolute;left:87%;width:7%;top:0;bottom:0;background:var(--brand)}
.board-bottom{position:absolute;left:38%;width:17%;top:0;bottom:0;background:var(--danger)}
.board-avg{position:absolute;left:73.8%;width:2px;top:-6px;bottom:-6px;background:var(--ink)}
.board-marks{position:relative;height:3.2rem;margin-top:.5rem;font-size:.85rem;font-weight:600;white-space:nowrap}
.board-mark{position:absolute;top:0}
.board-mark--avg{right:26.2%;color:var(--ink)}
.board-mark--top{right:6%;color:var(--brand)}
.board-mark--bottom{left:38%;top:1.6rem;color:var(--danger-text)}
.board-axis{display:flex;justify-content:space-between;margin-top:.4rem;font-size:.78rem;color:var(--muted)}
.board-scope{margin-top:.6rem;font-size:.82rem;color:var(--muted)}
/* below 768px the average and top-fifteen labels would touch: stack the labels */
@media (max-width:767px){
  .board-marks{height:auto;white-space:normal;display:grid;gap:.2rem}
  .board-mark{position:static}
}

/* Proof: approved quote cards (verbatim, no avatars, no badges) */
.quote-cards{display:grid;grid-template-columns:1fr;gap:1.2rem}
.quote-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;display:flex;flex-direction:column;gap:1.2rem}
.quote-card blockquote{margin:0;flex:1}
.quote-card blockquote p{font-weight:400;font-size:var(--step0);line-height:1.6;color:var(--ink)}
.quote-card figcaption b{display:block;font-weight:600}
.quote-card figcaption span{display:block;color:var(--muted);font-size:.86rem;line-height:1.4;margin-top:.15rem}
@media (min-width:960px){.quote-cards{grid-template-columns:repeat(3,1fr)}}

/* Send us ten */
.band.pastel-yellow{background:var(--pastel-yellow)}
.twenty-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
.twenty-offer{font-size:var(--step2);margin:2rem 0 .7rem}
.twenty-copy{color:var(--ink-2)}
.twenty-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.3rem,3vw,2rem)}
.twenty-form{display:grid;gap:1.4rem;text-align:center}
.twenty-form .lead{margin:0;text-wrap:balance}
.twenty-form .btn{justify-self:center}
@media (min-width:900px){.twenty-grid{grid-template-columns:1fr 1fr}}
.prose .sec-title{font-size:var(--step3);margin:.7rem 0 .9rem}
/* Sora runs wider than the old body font: keep both hero buttons on one row in the hero column */
.hero-actions .btn-lg{padding:.95rem 1.4rem;font-size:1.05rem}
/* "Start with one store" is longer than the old nav label: below 480px logo + button + menu toggle
   do not fit, so the header button hides there (the same CTA is in the mobile menu and the hero) */
@media (max-width:479px){.nav-cta{display:none}.nav-toggle{margin-left:auto}}

/* Hero: detection sequence: pizza, overlay, score, phone */
.detect-seq .seq{list-style:none;margin:0;padding:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem .8rem}
.seq-step{display:grid;gap:.45rem;align-content:start;min-width:0}
.feed.seq-feed{min-height:0;aspect-ratio:1/1}
.seq-pass{position:absolute;left:50%;bottom:.7rem;translate:-50% 0;display:inline-flex;align-items:center;gap:.45rem;background:#0E9F6E;color:#fff;
  font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .9rem .3rem .35rem;border-radius:var(--radius-pill);
  box-shadow:0 0 0 4px rgba(14,159,110,.28),0 6px 18px rgba(0,0,0,.35);animation:seq-pass-in .5s 4.2s cubic-bezier(.3,1.5,.5,1) backwards,det-out .6s 9.5s ease forwards}
.seq-pass svg{width:1.55rem;height:1.55rem;padding:.25rem;border-radius:50%;background:#fff;color:#0E9F6E;flex:none}
/* detection overlay on the hero photo: dough mask and one outline per pepperoni, drawn once on load */
.det{position:absolute;inset:0;width:100%;height:100%}
.det-dough{fill:rgba(96,165,250,.26);stroke:#7CC4FF;stroke-width:3.5;stroke-linejoin:round;stroke-dasharray:1;animation:det-draw 1.5s .35s ease-out backwards,det-fill .7s 1.7s ease backwards,det-out .6s 9.3s ease forwards}
.det-pep{animation:det-out .6s 9.3s ease forwards}
.det-pep ellipse{fill:rgba(107,240,176,.08);stroke:#6BF0B0;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:det-pop .35s calc(1.2s + var(--i)*55ms) cubic-bezier(.3,1.5,.5,1) backwards}
.det-scan{position:absolute;left:0;right:0;top:100%;height:16%;background:linear-gradient(to bottom,rgba(124,196,255,0),rgba(124,196,255,.4));border-bottom:2px solid #BFE3FF;
  box-shadow:0 4px 14px rgba(124,196,255,.7);animation:det-scan 1.5s .35s ease-in-out backwards}
.det-key{position:absolute;left:.5rem;top:.5rem;display:inline-flex;align-items:center;gap:.35rem;background:rgba(0,0,0,.6);color:#fff;font-size:.66rem;font-weight:600;
  padding:.2rem .5rem;border-radius:6px;animation:seq-pass-in .4s 3s ease backwards,det-out .6s 9.3s ease forwards}
.det-key i{width:8px;height:8px;border-radius:50%;flex:none}.det-key i+i{margin-left:.35rem}
.det-key .k-dough{background:#7CC4FF}.det-key .k-pep{background:#6BF0B0}
@keyframes det-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes det-fill{from{fill:rgba(96,165,250,0)}}
@keyframes det-pop{from{opacity:0;scale:.6}}
@keyframes det-scan{from{top:-16%}to{top:100%}}
/* camera snap on the first hero photo: viewfinder brackets, a short zoom, the flash, then the photo settles */
.snap-brk{position:absolute;inset:8%;pointer-events:none;background:
  linear-gradient(#fff,#fff) 0 0/20px 3px,linear-gradient(#fff,#fff) 0 0/3px 20px,
  linear-gradient(#fff,#fff) 100% 0/20px 3px,linear-gradient(#fff,#fff) 100% 0/3px 20px,
  linear-gradient(#fff,#fff) 0 100%/20px 3px,linear-gradient(#fff,#fff) 0 100%/3px 20px,
  linear-gradient(#fff,#fff) 100% 100%/20px 3px,linear-gradient(#fff,#fff) 100% 100%/3px 20px;
  background-repeat:no-repeat;filter:drop-shadow(0 0 2px rgba(0,0,0,.5));animation:snap-brk 1.1s ease-out}
.snap-brk::after{content:"";position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;translate:-50% -50%;border:2px solid #FFD54A;border-radius:4px}
.snap-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;animation:snap-flash .6s .45s ease-out}
.snap-img{animation:snap-zoom 1.1s ease-out}
@keyframes snap-brk{0%{opacity:0;scale:1.15}25%{opacity:1;scale:1}55%{opacity:1}100%{opacity:0}}
@keyframes snap-flash{0%{opacity:.95}100%{opacity:0}}
@keyframes snap-zoom{0%,40%{scale:1.08}60%,100%{scale:1}}
@keyframes det-out{to{opacity:0}}
/* phone in the hero: the feed scrolls to show other stores after the new item arrives; the script replays the sequence every 11 s */
.detect-seq .duo-scroll{height:248px;overflow:hidden}
.detect-seq .duo-track{animation:duo-scroll 11s ease-in-out infinite}
.duo-feed{padding-bottom:.5rem}
.duo-row{display:flex;align-items:center;gap:.5rem;padding:.38rem .8rem;border-top:1px solid var(--line)}
.duo-row img{width:34px;height:34px;border-radius:9px;object-fit:cover;flex:none}
.duo-row-t{display:grid;flex:1;min-width:0;line-height:1.25}
.duo-row-t b{font-family:var(--display);font-size:.72rem}
.duo-row-t small{font-size:.62rem;color:var(--muted)}
@keyframes duo-scroll{0%,48%{translate:0 0}64%,80%{translate:0 -140px}92%,100%{translate:0 0}}
@keyframes seq-pass-in{from{opacity:0;scale:.6}}
@media (prefers-reduced-motion:reduce){.det-dough,.det-pep,.det-pep ellipse,.det-scan,.det-key,.seq-pass,.detect-seq .duo-track,.snap-brk,.snap-flash,.snap-img{animation:none}.snap-brk,.snap-flash{display:none}.det-scan{display:none}.det-dough{stroke-dashoffset:0}}
.seq-stage{--s:.6;aspect-ratio:1/1;min-width:0;display:grid;place-items:center;overflow:hidden;background:var(--tint);border-radius:12px}
/* the phone is built at its natural size and then scaled, so its proportions hold in the small tile */
.seq-fit{position:relative;width:calc(176px*var(--s));height:calc(331px*var(--s))}
.seq-fit .duo-phone{position:absolute;top:0;left:0;width:176px;margin:0;transform:scale(var(--s));transform-origin:top left}
@media (max-width:1023px){.seq-stage{--s:.8}}
@media (max-width:639px){.seq-stage{--s:.55}}
@media (max-width:479px){.seq-stage{--s:.42}}
/* the box and the score tag frame the whole pizza in the hero photo */
.detect-seq .feed .box{left:8%;top:8%;width:84%;height:84%}
.detect-seq .feed .tag{left:50%;top:.5rem;transform:translateX(-50%)}

/* Coach every shift: Kwali TV Go wall and Kwali TV in-store, light product windows */
.coach-mock+.coach-mock{margin-top:1.5rem}
.coach-screen{background:#fff;color:var(--ink)}
.coach-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;padding:.7rem 1rem;background:#F4F6FC;border-bottom:1px solid var(--line)}
.coach-title{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .8rem;min-width:0}
.coach-title b{font-size:1rem;font-weight:800}
.coach-title span{font-size:.78rem;color:var(--ink-2)}
.coach-sample{margin-left:auto;font-size:.74rem;font-weight:600;color:var(--ink-2)}
.coach-wall{list-style:none;margin:0;padding:.9rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.coach-store{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--ink)}
.coach-store>img{display:block;width:100%;height:100%;object-fit:cover}
/* the gradient keeps the white caption readable on light cheese photos */
.coach-store::after,.coach-last::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 28%,rgba(5,7,15,.32) 45%,rgba(5,7,15,.96) 100%)}
.coach-time{position:absolute;z-index:1;right:.55rem;top:.55rem;padding:.3rem .55rem;background:var(--brand);border-radius:var(--radius-pill);
  font-size:.75rem;line-height:1.3;color:#fff}
.coach-overlay{position:absolute;z-index:1;left:.75rem;right:.75rem;bottom:.75rem;display:grid;gap:.3rem;color:#fff}
.coach-name{font-size:1rem;font-weight:700;line-height:1.3}
.coach-item{display:flex;align-items:center;justify-content:space-between;font-size:.78rem}
.coach-item b{font-size:1.25rem;font-weight:800;line-height:1}
.coach-status{display:flex;align-items:center;gap:.4rem;justify-self:start;padding:.2rem .45rem;border-radius:var(--radius-pill);font-size:.75rem;
  color:var(--success-text);background:linear-gradient(rgba(5,150,105,.12),rgba(5,150,105,.12)),#fff}
.coach-status.is-mid{color:var(--amber-text);background:linear-gradient(rgba(180,83,9,.12),rgba(180,83,9,.12)),#fff}
.coach-status.is-bad{color:var(--danger-text);background:linear-gradient(rgba(220,38,38,.10),rgba(220,38,38,.10)),#fff}
.coach-dot{display:inline-block;width:7px;height:7px;flex:none;border-radius:50%;background:#3ECF8E}
.coach-dot.is-mid{background:#F5B14C}.coach-dot.is-bad{background:#E5484D}
.coach-inside{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;padding:1rem}
.coach-left,.coach-right{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.coach-zone{display:block;font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.coach-last{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--ink)}
.coach-last::after{background:linear-gradient(180deg,transparent 65%,rgba(5,7,15,.9))}
.coach-last img{display:block;width:100%;height:100%;object-fit:cover}
.coach-last .coach-zone{position:absolute;z-index:1;left:.75rem;top:.75rem;padding:.3rem .55rem;border-radius:var(--radius-pill);background:var(--brand);color:#fff;line-height:1.3}
.coach-caption{position:absolute;z-index:1;left:1rem;bottom:1rem;font-size:.88rem;font-weight:600;color:#fff}
.coach-check{position:absolute;z-index:1;right:.85rem;top:.85rem;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#3ECF8E;color:var(--ink)}
.coach-check svg{width:18px;height:18px}
.coach-perf,.coach-panel{padding:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
.coach-bar{display:flex;height:13px;margin-top:.7rem;overflow:hidden;border-radius:var(--radius-pill)}
.coach-bar i:first-child{width:60%;background:#3ECF8E}.coach-bar i:last-child{width:40%;background:#E5484D}
.coach-legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-top:.65rem;font-size:.75rem;line-height:1.5;color:var(--ink-2)}
.coach-legend span{display:flex;align-items:center;gap:.35rem}
.coach-best{display:grid;grid-template-columns:1fr auto;gap:.35rem .75rem;align-items:center}
.coach-best .coach-zone{grid-column:1/-1}
.coach-best strong{font-size:1.4rem;line-height:1.3;font-weight:800}
.coach-shift{font-size:.75rem;color:var(--ink-2)}
.coach-score{grid-column:2;grid-row:2/4;font-size:2.4rem;font-weight:800;line-height:1;color:var(--success-text)}
.coach-ranking{flex:1}
.coach-ranking ol{list-style:none;margin:.6rem 0 0;padding:0}
.coach-ranking li{display:flex;justify-content:space-between;gap:.75rem;padding:.6rem 0;font-size:.82rem;border-bottom:1px solid var(--line)}
.coach-ranking li b{font-size:.88rem}
.coach-ranking .coach-gap{height:.8rem;padding:0;border:0}
.coach-ranking .coach-you{padding:.7rem .6rem;background:var(--tint);border:1px solid var(--brand);border-radius:var(--radius-sm);font-weight:600}
.coach-ranking .coach-you b{color:var(--brand)}
.coach-tip p{margin:.45rem 0 0;font-size:.82rem;line-height:1.65;color:var(--ink-2)}
.coach-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;padding:.9rem .9rem 0}
.coach-kpi{display:flex;flex-direction:column;justify-content:space-between;gap:.35rem;padding:.7rem .8rem;background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-sm)}
.coach-kpi b{font-size:1.5rem;font-weight:800;line-height:1.1}
.coach-kpi b.is-ok{color:var(--success-text)}.coach-kpi b.is-bad{color:var(--danger-text)}
.coach-minis{list-style:none;margin:0;padding:.9rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.coach-mini{display:grid;gap:.2rem;padding-bottom:.5rem;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
.coach-mini img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.coach-mini-row{display:flex;align-items:center;gap:.4rem;padding:.4rem .55rem 0;font-size:.78rem;line-height:1.3}
.coach-mini-note{padding:0 .55rem 0 1.5rem;font-size:.7rem;line-height:1.3;color:var(--muted)}
/* in the two-column wall the status stays on one line at a smaller size */
@media (max-width:759px){
  .coach-overlay{left:.6rem;right:.6rem;bottom:.6rem}
  .coach-status{font-size:.66rem;padding:.18rem .4rem;white-space:nowrap}
}
@media (min-width:760px){
  .coach-minis{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
  .coach-mini-row{padding:.35rem .4rem 0;font-size:.72rem}
  .coach-mini-note{padding:0 .4rem 0 1.15rem;font-size:.66rem}
  .coach-wall{grid-template-columns:repeat(4,minmax(0,1fr));padding:1rem;gap:.8rem}
  .coach-inside{grid-template-columns:minmax(0,23rem) minmax(0,1fr);align-items:stretch}
}
.seq-cap{display:flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--ink)}
.seq-cap b{flex:none;width:22px;height:22px;border-radius:50%;background:var(--pastel-blue);color:var(--brand);display:grid;place-items:center;font-size:.72rem}

/* Brand logo row */
.partners{padding:clamp(2rem,4vw,2.8rem) 0;border-block:1px solid var(--line);background:#fff}
.partners p{text-align:center;color:var(--muted);font-size:.9rem;font-weight:500;margin-bottom:1.3rem;text-wrap:balance}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(1.4rem,4vw,3rem)}
/* common visual box so wide logos (Domino's) do not dominate the row */
.logo-row img{width:96px;height:40px;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .2s,opacity .2s}
.logo-row img:hover{filter:grayscale(0);opacity:1}

/* Contact page layout, kept at the end so it overrides the base .quote-cards and .board-*
   rules: section headings in the two contact bands, and the single quote card in the aside
   (.quote-cards turns into three columns at the desktop breakpoint, which would squeeze one
   card into a third of the aside). */
.cf-title{font-size:var(--step2);margin:0 0 .6rem}
.cf-intro{color:var(--ink-2);margin:0;max-width:52ch}
.cf-aside-title{font-size:var(--step1);margin:0 0 .3rem}
.contact-aside .quote-cards{grid-template-columns:1fr;margin-top:1.6rem}
.cform{margin-top:1.4rem;display:grid;gap:1rem;max-width:36rem}
.cform-row{display:grid;grid-template-columns:1fr;gap:1rem}
.cform-field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem}
.cform-note{margin:0;font-size:.88rem;color:var(--ink-2)}
.req{color:var(--danger-text)}
.cform-field input{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:.75rem .9rem;min-height:44px}
.cform-field input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.cform-field input[aria-invalid="true"]{border-color:var(--danger)}
.cform .btn{justify-self:start}
.cform .btn[disabled]{opacity:.6;cursor:not-allowed}
.cform-status{margin:0;min-height:1.4em;font-size:.95rem;color:var(--ink-2)}
.cform-status.ok{color:var(--success-text)}
.cform-status.err{color:var(--danger-text)}
@media (min-width:540px){.cform-row{grid-template-columns:1fr 1fr}}
.iti{width:100%;--iti-border-color:var(--line-2);--iti-hover-color:var(--tint);--iti-icon-color:var(--muted)}
/* overflow hidden clips the search row and the list to the rounded corners */
.iti__country-selector{width:100%;overflow:hidden;font-family:var(--sans);color:var(--ink);
  background:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}
.iti__selected-country-primary{border-radius:calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px)}
.iti__country-list{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.iti__search-input-wrapper{border-bottom:1px solid var(--line)}
/* .cform-field input would override the search box padding that leaves room for its icons */
.cform-field .iti__search-input{min-height:0;border:0;border-radius:0;
  padding-left:calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  padding-right:calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal))}
.cform-field .iti__search-input:focus-visible{outline:0;box-shadow:inset 0 -2px 0 var(--brand)}
/* the phone overlaps the lower right corner of the laptop window, so the window keeps the full column */
.duo{position:relative}
.duo-dl{display:flex;flex-wrap:wrap;gap:.4rem;max-width:56%}
.duo-dl span{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:.28rem .7rem;
  font-size:.68rem;font-weight:700}
.duo-phone{position:relative;width:11rem;margin:-5.5rem 0 0 auto;background:#05070F;border-radius:34px;padding:3px;
  box-shadow:0 0 0 1px #2A3142,var(--shadow-lg)}
/* side buttons: volume pair on the left, power on the right */
.duo-phone::before,.duo-phone::after{content:"";position:absolute;width:3px;background:#05070F;border-radius:2px}
.duo-phone::before{left:-4px;top:5.3rem;height:1.5rem;box-shadow:0 2.1rem 0 #05070F}
.duo-phone::after{right:-4px;top:6.2rem;height:2.7rem}
.duo-screen{position:relative;background:#fff;border-radius:31px;overflow:hidden;padding-bottom:1.2rem}
/* dynamic island and home indicator */
.duo-screen::before{content:"";position:absolute;top:7px;left:50%;width:3.1rem;height:1.05rem;transform:translateX(-50%);
  border-radius:var(--radius-pill);background:#05070F;z-index:2}
.duo-screen::after{content:"";position:absolute;bottom:6px;left:50%;width:4.4rem;height:4px;transform:translateX(-50%);
  border-radius:var(--radius-pill);background:var(--ink)}
.duo-status{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1.15rem 0;height:1.9rem;
  font-size:.62rem;font-weight:700}
.duo-status svg{height:.62rem;width:auto;display:block;fill:var(--ink)}
.duo-icons{display:flex;gap:.25rem;align-items:center}
.duo-bar{display:flex;justify-content:space-between;align-items:center;padding:.35rem .75rem .5rem;font-size:.78rem}
.duo-shot{position:relative;margin:0 .6rem;border-radius:13px;overflow:hidden;aspect-ratio:1/1;background:var(--ink)}
.duo-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the gradient keeps the white caption readable on any pizza photo */
.duo-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(to top,rgba(5,7,15,.78),rgba(5,7,15,0))}
.duo-cap{position:absolute;left:.5rem;right:.5rem;bottom:.4rem;z-index:1;display:flex;justify-content:space-between;
  align-items:center;color:#fff;font-size:.66rem;font-weight:600}
.duo-cap .verdict{background:#fff}
.duo-list{padding:.3rem .8rem 0}
.duo-list>div{display:flex;justify-content:space-between;padding:.32rem 0;border-bottom:1px solid var(--line);
  font-size:.7rem;font-weight:600}
.duo-list>div:last-child{border-bottom:0}
@media (max-width:640px){.duo-dl{max-width:none}.duo-phone{width:12rem;margin:1rem auto 0}}

/* Email links inside a lead paragraph run with the text: underlined, since color alone would
   be the only thing telling them apart from the words around them */
.lead .textlink{display:inline;text-decoration:underline;text-underline-offset:.2em}

/* Legal page (privacy-notice): long-form prose keeps a readable measure and plain bullets */
.prose.legal{max-width:72ch}
.prose.legal ul{padding-left:1.2rem;margin-bottom:1rem;color:var(--ink-2)}