/* Licensed brand fonts. Headings use Roobert (as on clay.com) when installed, else General Sans.
   Messina Sans files go in assets/fonts/ (see fonts/README.txt). */
@font-face { font-family: "Roobert"; src: local("Roobert Medium"), local("Roobert-Medium"); font-weight: 500; font-style: normal; }
@font-face { font-family: "Roobert"; src: local("Roobert Regular"), local("Roobert-Regular"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Messina Sans"; src: local("Messina Sans Regular"), local("MessinaSans-Regular"), url("fonts/MessinaSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: local("Messina Sans SemiBold"), local("MessinaSans-SemiBold"), url("fonts/MessinaSans-SemiBold.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }

:root {
  /* Palette adapted from kira-learning.com */
  --bg: #FFFDF0;
  --bg-hover: #F7F2DE;
  --white: #FFFFFF;
  --beige: #F5F5F4;
  --peach: #F1EEFF;
  --line: #E4E2DF;
  --ink: #1A1A1A;
  --ink-2: #504D49;
  --grey: #6B6761;
  --paprika: #775CFF;
  --paprika-deep: #D94A00;
  --paprika-soft: #FFE4D2;
  --paprika-line: #C9BEFF;
  --saffron: #FF80EF;
  --saffron-soft: #FFF6BF;
  --strip: #56EAAF;
  --lavender: #9780FF;
  --lavender-deep: #AC99FF;
  --purple: #452197;
  --teal: #2FBDF9;
  --herb: #0F8A5F;
  --herb-soft: #D4F8E9;
  --blush: #FF80EF;
  --mint: #56EAAF;
  --yellow: #FFDD0A;
  --orange: #FF6A00;
  --night: #1A1A1A;
  --night-line: rgba(255,255,255,.1);

  --display: "Roobert", "General Sans", system-ui, -apple-system, sans-serif;
  --sans: "Messina Sans", "General Sans", system-ui, -apple-system, sans-serif;
  --mono: "Messina Sans", "General Sans", system-ui, -apple-system, sans-serif;   /* was Geist Mono; all small labels now use Messina Sans */

  --frame: 1440px;
  --gutter: clamp(16px, 4vw, 64px);   /* empty margin left and right of the framed page */
  --label: 206px;
  --shadow: 0 1px 2px rgba(20,18,16,.06), 0 18px 40px -20px rgba(20,18,16,.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; flex: none; }

.frame { max-width: var(--frame); margin: 0 auto; border-inline: 1px solid var(--line); background: var(--bg); }
.frame > section { border-bottom: 1px solid var(--line); }
@media (min-width: 861px) { .frame, .nav__inner, .footer > * { width: calc(100% - 2 * var(--gutter)); } }
.mono { font: 400 11px/1.3 var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.muted { color: var(--grey); }
.eyebrow { font: 400 12px/1.3 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
/* section tags: price-tag shape, each section its own colour + glyph */
.stag { --tbg: var(--strip); --tfg: var(--ink); display: inline-flex; align-items: center; gap: 7px; width: fit-content; height: 28px; padding: 0 12px 0 27px;
  background: var(--tbg); color: var(--tfg) !important; font: 500 11px/1 var(--mono) !important; letter-spacing: 1px; white-space: nowrap;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle 2.6px at 11px 50%, #0000 96%, #000); mask: radial-gradient(circle 2.6px at 11px 50%, #0000 96%, #000);
  transform: rotate(var(--tilt, 0deg)); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.stag svg { width: 14px; height: 14px; flex: none; }
.stag:hover { transform: rotate(calc(var(--tilt, 0deg) * -1)); }
/* hover: the tag fills with a moving heatmap, same palette as the hero field */
.stag { position: relative; isolation: isolate; transition: transform .3s cubic-bezier(.2,.8,.2,1), color .3s; }
.stag::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at 18% 40%, #FFE45C 0, transparent 38%), radial-gradient(circle at 62% 70%, #8DEFC8 0, transparent 42%), radial-gradient(circle at 85% 20%, #B9A8FF 0, transparent 45%), linear-gradient(120deg, #775CFF, #9780FF 40%, #56EAAF 70%, #FFDD0A);
  background-size: 260% 260%; animation: stag-heat 5s ease-in-out infinite alternate paused; }
:root:not(.has-tag-heat) .stag:hover { color: #1C0F52 !important; }
.stag:hover::before { opacity: 1; animation-play-state: running; }
.stag__heat { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity .3s; pointer-events: none; }
.stag__heat.is-on { opacity: 1; }
.has-tag-heat .stag::before { display: none; }
@keyframes stag-heat { 0% { background-position: 0% 30%; } 50% { background-position: 70% 90%; } 100% { background-position: 100% 10%; } }
@media (prefers-reduced-motion: reduce) { .stag::before { animation: none; } }
.stag--invoices { --tbg: #56EAAF; --tfg: #0B3D2A; --tilt: -2deg; }
.stag--problem  { --tbg: #FFDD0A; --tfg: #3A2F00; --tilt: 2deg; }
.stag--how      { --tbg: #C9BEFF; --tfg: #2B1676; --tilt: -1.5deg; }
.stag--inside   { --tbg: #775CFF; --tfg: #FFFFFF; --tilt: 2deg; }
.stag--result   { --tbg: #FF80EF; --tfg: #4A0B42; --tilt: -2deg; }
.stag--who      { --tbg: #FFD9C7; --tfg: #6B2A12; --tilt: 1.5deg; }
.stag--ways     { --tbg: #BFE3FF; --tfg: #0B3F66; --tilt: -2deg; }
.stag--notes    { --tbg: #E4F0C4; --tfg: #3B4A12; --tilt: 2deg; }
.stag--cta      { --tbg: #FF9466; --tfg: #4A1A05; --tilt: -1.5deg; }
.stag--faq      { --tbg: #EDE8E1; --tfg: #1A1A1A; --tilt: 1.5deg; }
.h2 { font: 500 clamp(36px, 4vw, 58px)/1.06 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.display { font: 500 clamp(48px, 5.4vw, 76px)/1 var(--display); letter-spacing: -.04em; }
.center-head { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 0 24px; margin-bottom: 56px; }
.center-head__sub { max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--ink-2); }

/* buttons, chips, tags */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; font: 500 15px/1 var(--sans); letter-spacing: .3px; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn svg { transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--paprika); }
.btn--outline { border: 1px solid var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.chips { display: flex; flex-wrap: wrap; }
.chip { font: 400 11px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; padding: 8px 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink-2); }
.chips .chip { margin: 0 -1px -1px 0; }
.chips--boxed .chip:first-child { color: var(--ink); }
.chips--boxed { gap: 8px; } .chips--boxed .chip { margin: 0; }

.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font: 500 12px/1 var(--sans); white-space: nowrap; transition: background .3s, color .3s; }
.tag--below { background: var(--paprika-soft); color: var(--paprika-deep); }
.tag--ok { background: var(--herb-soft); color: var(--herb); }
.tag--below::before, .tag--ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag--check { background: var(--saffron-soft); color: #7A6400; width: 24px; justify-content: center; padding: 0; }

.pattern-squares {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect x='3.5' y='3.5' width='29' height='29' rx='5' fill='none' stroke='white' stroke-opacity='.22'/%3E%3C/svg%3E");
  background-size: 36px 36px;
}

/* nav */

.announce { background: radial-gradient(ellipse 38% 180% at 50% 50%, rgba(255,221,10,.85), rgba(255,231,92,.45) 55%, transparent 100%), #FFF6C7; color: var(--ink); padding-bottom: 5px; margin-bottom: -5px; position: relative; z-index: 51;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.announce__inner { height: 38px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 500; }
.announce__short { display: none; }
.announce__inner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce__inner svg { flex: none; width: 13px; height: 13px; transition: transform .2s ease; }
.announce__inner:hover span { text-decoration: underline; text-underline-offset: 3px; }
.announce__inner:hover svg { transform: translateX(3px); }
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,253,250,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav__inner { max-width: var(--frame); margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; gap: 48px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 600 19px/1 var(--sans); letter-spacing: -.3px; }
.logo__mark { width: 28px; height: 28px; color: var(--paprika); }
.logo--light { color: #fff; }
.nav__links { display: flex; gap: 30px; margin: 0 auto; font: 500 14px/1 var(--sans); color: var(--ink-2); }
.nav__links a:hover, .nav__signin:hover { color: var(--paprika-deep); }
.nav__actions { display: flex; align-items: center; gap: 22px; font: 500 14px/1 var(--sans); }
.nav__actions .btn--sm { height: 34px; padding: 0 14px; }
.nav__toggle { display: none; width: 40px; height: 40px; border: 0; background: none; padding: 10px; cursor: pointer; }
.nav__toggle span { display: block; height: 1.5px; background: var(--ink); margin: 5px 0; transition: transform .2s; }

/* 01 HERO */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hero { min-height: 100vh; min-height: 100svh; }
.hero__award { display: inline-flex; align-items: center; gap: 4px; margin-top: clamp(32px, 10vh, 100px); padding-top: 0; margin-left: calc(var(--wing, 26px) * -7.1 / 44); color: #9B7D5E; }
.hero__award-wing { width: var(--wing, 26px); height: 58px; fill: currentColor; flex: none; }
.hero__award-wing--r { transform: scaleX(-1); }
/* awards row near the footer: three boxes, each holding a larger copy of the hero laurel */
.awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 0 !important; }
.awards__item { display: grid; place-items: center; padding: 30px 24px; border-right: 1px solid var(--line); }
.awards__item:last-child { border-right: 0; }
.award { --wing: 34px; margin: 0; gap: 6px; }
.award .hero__award-wing { height: 76px; }
.award small { font-size: 12.5px; }
.award b { font-size: 13.5px; }
.award em { font-size: 9.5px; margin-top: 6px; }
@media (max-width: 860px) { .awards { grid-template-columns: minmax(0, 1fr); } .awards__item { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 16px; } .awards__item:last-child { border-bottom: 0; } }
.hero__award p { display: grid; justify-items: center; text-align: center; }
.hero__award small { font-size: 11px; line-height: 1.3; margin-bottom: 2px; }
.hero__award b { font: 700 11.5px/1.15 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.hero__award em { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 500 8.5px/1 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.hero__award em::before, .hero__award em::after { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .5; }
.hero__copy { padding: 42px 40px 42px clamp(56px, 6vw, 100px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; }
.hero__title { font: 500 clamp(48px, 4.6vw, 66px)/1.02 var(--display); letter-spacing: -.035em; margin-top: 2px; text-wrap: balance; }
.hero__sub { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 34em; }
@media (max-width: 1279px) { .hero__sub br { display: none; } }
@media (max-width: 1024px) { .big-quote br { display: none; } }
.hero__copy { position: relative; isolation: isolate; }
.hero__ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; font-size: 14px; color: var(--grey); }
.rating__g2 { width: 22px; height: 22px; flex: none; }
.rating span:last-child { white-space: nowrap; font-weight: 500; color: var(--ink-2); }
@media (max-width: 600px) { .rating i { display: none; } .rating span:last-child { flex-basis: 100%; } }
.rating__stars { display: inline-flex; gap: 2px; color: var(--ink); }
.rating__stars svg { width: 14px; height: 14px; fill: currentColor; }
.rating b { font-weight: 500; color: var(--ink); font-size: 15px; }
.rating i { width: 1px; height: 16px; background: var(--line); }

.hero__panel { order: -1; position: relative; background: radial-gradient(60% 50% at 25% 70%, #FFE45C, transparent 70%), radial-gradient(50% 45% at 80% 25%, #5CE0B3, transparent 70%), #5438DB; overflow: hidden; min-height: 0; display: grid; place-items: center; padding: 24px 40px; isolation: isolate; }
.hero__heat { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero__grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.flash { animation: flash .9s ease; }
@keyframes flash { 0% { color: var(--paprika); transform: translateY(-2px); } 100% { transform: none; } }
.is-hot.glow { animation: glow 1.6s ease 2; }
@keyframes glow { 50% { background: #FFEC70; } }

/* Hero demo card: app-like, visual, clickable, with an auto-playing cursor */
.demo { position: relative; z-index: 1; width: min(420px, 100%); }
.demo__card { position: relative; background: #F6F5FA; border-radius: 30px; padding: 16px; min-height: 560px; box-shadow: 0 0 0 7px rgba(255,255,255,.55), 0 0 0 1px rgba(20,10,60,.06), 0 40px 70px -34px rgba(25,10,90,.6); overflow: hidden; }
.demo__chrome { display: flex; gap: 7px; padding: 2px 2px 14px; }
.demo__chrome i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.demo__chrome i:nth-child(2) { background: #FEBC2E; }
.demo__chrome i:nth-child(3) { background: #28C840; }
.demo__view { animation: view-in .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes view-in { from { opacity: 0; transform: translateX(16px); } }
.demo__view.is-back { animation-name: view-back; }
@keyframes view-back { from { opacity: 0; transform: translateX(-16px); } }
.demo__top { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.demo__spacer { flex: 1; }
.demo__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--paprika); color: #fff; font: 600 12px/1 var(--sans); }
.demo__round { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 0; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 1px 2px rgba(20,10,60,.08); transition: transform .15s, background .2s; }
.demo__round:hover { background: #fff; transform: scale(1.06); }
.demo__round svg { width: 16px; height: 16px; }
.demo__round:focus-visible, .demo__pill:focus-visible, .demo__stake:focus-visible { outline: 2px solid var(--paprika); outline-offset: 2px; }
.demo__badge { padding: 7px 12px; border-radius: 999px; background: #fff; font: 500 12px/1 var(--sans); color: var(--grey); }
.demo__h { font: 600 28px/1.02 var(--display); letter-spacing: -.03em; color: var(--ink); margin: 2px 2px 14px; }
.demo__h span { color: #B5B2C2; }
.demo__h--sm { font-size: 22px; margin: 0; }
.demo__pills { display: flex; gap: 4px; margin: 0 0 12px; overflow: hidden; }
.demo__pill { padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; font: 500 12.5px/1 var(--sans); color: var(--grey); cursor: pointer; transition: background .2s, color .2s; }
.demo__pill:hover { color: var(--ink); }
.demo__pill[aria-pressed="true"] { background: var(--ink); color: #fff; }
.demo__list { display: grid; gap: 7px; }
.demo__row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; border: 0; border-radius: 20px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(20,10,60,.05); transition: transform .15s, box-shadow .2s; }
.demo__row:hover { box-shadow: 0 8px 18px -10px rgba(20,10,60,.3); transform: translateY(-1px); }
.demo__row:active, .demo__row.is-pressed { transform: scale(.98); }
.demo__row:focus-visible { outline: 2px solid var(--paprika); outline-offset: 2px; }
.demo__row[disabled] { cursor: default; }
.demo__row[disabled]:hover { transform: none; box-shadow: 0 1px 2px rgba(20,10,60,.05); }
.demo__ico { flex: none; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: var(--tint, #F1EEFF); font-size: 23px; line-height: 1; }
.demo__txt { flex: 1; min-width: 0; }
.demo__txt b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.1px; }
.demo__txt small { display: block; margin-top: 2px; font-size: 12px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__delta { flex: none; padding: 6px 9px; border-radius: 999px; font: 600 12px/1 var(--sans); font-style: normal; }
.demo__delta--up { background: #FFEDE4; color: var(--paprika-deep); }
.demo__delta--down { background: #E3F8EE; color: var(--herb); }
.demo__delta--muted { background: #F1F0F5; color: #8E8E96; }
.demo__spin { width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; border: 2px solid #E4E4E9; border-top-color: var(--paprika); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.demo__empty { padding: 18px; text-align: center; font-size: 13px; color: var(--grey); background: #fff; border-radius: 20px; }
.demo__supplier { display: flex; align-items: center; gap: 12px; margin: 4px 2px 16px; }
.demo__supplier .demo__ico { width: 56px; height: 56px; border-radius: 18px; font-size: 30px; }
.demo__row--line { padding-block: 12px; }
.demo__pricebar { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: linear-gradient(90deg, #CFC6FF, #FF8A5B); position: relative; overflow: hidden; }
.demo__pricebar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: #CFC6FF; border-right: 2px solid #fff; }
.demo__note { margin: 12px 4px 0; font-size: 12px; color: var(--grey); }
.demo__photo { position: relative; height: 196px; border-radius: 22px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.demo__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo__photo-ico { font-size: 72px; margin-bottom: 40px; }
.demo__photo-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.demo__photo-cap b { display: block; font: 600 16px/1.2 var(--sans); }
.demo__photo-cap small { display: block; margin-top: 2px; font-size: 12px; color: var(--grey); }
.demo__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.demo__nums > div { padding: 12px 14px; border-radius: 18px; background: #fff; }
.demo__nums small { display: block; font-size: 12px; color: var(--grey); }
.demo__nums b { display: inline-block; margin-top: 4px; font: 600 26px/1 var(--display); letter-spacing: -.03em; }
.demo__nums s { margin-left: 6px; font-size: 12px; color: #9E9BAA; }
.demo__split { display: flex; gap: 3px; height: 8px; margin: 12px 2px 8px; }
.demo__split i { border-radius: 999px; }
.demo__legend { display: grid; gap: 4px; margin: 0 2px; font-size: 12px; color: var(--ink-2); }
.demo__legend li { display: flex; align-items: center; gap: 8px; }
.demo__legend li i { width: 8px; height: 8px; border-radius: 50%; }
.demo__legend b { margin-left: auto; font-weight: 600; color: var(--ink); }
.demo__stake { width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 400 13px/1 var(--sans); cursor: pointer; text-align: left; }
.demo__stake b { font: 600 18px/1 var(--display); letter-spacing: -.02em; margin-right: 4px; }
.demo__stake.is-ok { background: var(--herb); }
.demo__stake-go { padding: 9px 12px; border-radius: 999px; background: #fff; color: var(--ink); font: 500 12px/1 var(--sans); white-space: nowrap; }
.demo__cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transform: translate(var(--cx, 60%), var(--cy, 80%)); transition: transform .9s cubic-bezier(.65,0,.25,1), opacity .3s; }
.demo__cursor svg { display: block; width: 24px; height: 24px; margin: -3px 0 0 -3px; filter: drop-shadow(0 3px 5px rgba(60,30,180,.35)); transform-origin: 4px 3px; }
.demo__chat { position: absolute; left: 20px; top: 20px; display: inline-flex; align-items: center; max-width: 230px; padding: 10px 16px; border-radius: 4px 22px 22px 22px; background: #4CAF68; border: 1.5px solid #3E9457; color: #fff; font: 400 14px/1.2 var(--sans); white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(20,60,30,.55); }
.demo__say { overflow: hidden; text-overflow: ellipsis; }
.demo__say.is-placeholder { color: rgba(255,255,255,.75); }
.demo__caret { order: -1; width: 1.5px; height: 17px; margin-right: 1px; background: #fff; animation: caret 1s steps(1) infinite; }
.demo__say:not(.is-placeholder) + .demo__caret { order: 1; margin: 0 0 0 1px; }
@keyframes caret { 50% { opacity: 0; } }
.demo.is-auto .demo__cursor { opacity: 1; }
.demo__cursor.is-click svg { animation: cursor-click .3s ease; }
@keyframes cursor-click { 50% { transform: scale(.8) rotate(-6deg); } }
.demo__ripple { position: absolute; left: 0; top: 0; z-index: 4; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(119,92,255,.25); pointer-events: none; opacity: 0; transform: translate(var(--rx), var(--ry)) scale(.3); }
.demo__ripple.is-on { animation: ripple .5s ease-out; }
/* Dashboard skin, to match the Price watch screen: a deep purple header fading into the light body, square white cards,
   underline tabs, soft 6px status chips with no outline, and a black call-to-action */
.demo__card { border-radius: 0; color: var(--ink);
  /* near-black header (not purple, so it stands off the purple heatmap behind it) with a warm yellow glow, fading into the light body */
  background:
    radial-gradient(80% 30% at 100% 0%, rgba(255,214,102,.22), transparent 70%),
    linear-gradient(180deg, #121016 0, #1A1720 285px, #E8B93E 345px, #FFE58A 380px, #FFF3C9 450px, #FFFFFF 530px); }   /* black down past the first row, then yellow, then white */
.demo__card .demo__h { color: #fff; }
.demo__card .demo__h span { color: rgba(255,255,255,.55); }
.demo__card .demo__avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.demo__card .demo__round { border-radius: 0; background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
.demo__card .demo__round:hover { background: rgba(255,255,255,.26); }
.demo__card .demo__round:not(.demo__round--icon) { width: 32px; justify-items: start; background: none; }   /* back: just the arrow */
.demo__card .demo__round:not(.demo__round--icon):hover { background: none; transform: translateX(-2px); }
.demo__card .demo__round:not(.demo__round--icon) svg { width: 20px; height: 20px; }
.demo__card .demo__badge { border-radius: 0; background: rgba(255,255,255,.16); color: #fff; }
.demo__card .demo__pills { gap: 16px; margin-bottom: 14px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.18); }   /* hairline across the full width; the open tab's line sits on it */
.demo__card .demo__pill { position: relative; padding: 8px 0; border-radius: 0; background: none; color: rgba(255,255,255,.72); }
.demo__card .demo__pill:hover { color: #fff; }
.demo__card .demo__pill[aria-pressed="true"] { background: none; color: #fff; }
.demo__card .demo__pill[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; }
.demo__card .demo__list { gap: 6px; }
.demo__card .demo__row { border-radius: 0; box-shadow: 0 10px 30px -18px rgba(60,20,120,.35); }
.demo__card .demo__row:hover { box-shadow: 0 14px 30px -14px rgba(60,20,120,.45); }
.demo__card .demo__row[disabled]:hover { box-shadow: 0 10px 30px -18px rgba(60,20,120,.35); }
.demo__card .demo__ico { border-radius: 50%; }
.demo__card .demo__delta { border-radius: 6px; padding: 6px 8px; }
.demo__card .demo__delta--up { background: #FDE4E2; color: #C41C16; }
.demo__card .demo__delta--down { background: #DDF5E8; color: #0B7A43; }
.demo__card .demo__delta--muted { background: #F0EEF4; color: #6B6870; }
.demo__card .demo__empty, .demo__card .demo__photo, .demo__card .demo__photo-cap, .demo__card .demo__nums > div { border-radius: 0; }
.demo__card .demo__nums { gap: 6px; }
.demo__card .demo__nums > div { box-shadow: 0 10px 30px -18px rgba(60,20,120,.35); }
.demo__card .demo__stake { border-radius: 0; background: #141218; }
.demo__card .demo__stake.is-ok { background: var(--herb); }
.demo__card .demo__stake-go { border-radius: 0; background: #775CFF; color: #fff; }
.demo__card .tag { border-radius: 6px; }
/* the hint under the lines: plain white text, with a soft shadow so it still reads where the card turns yellow */
.demo__card .demo__note { margin: 12px 4px 0; color: #fff; text-shadow: 0 1px 8px rgba(18,16,22,.55); }
/* dish name sits under the photo, not on it */
.demo__card .demo__photo { height: 172px; }
.demo__card .demo__photo-ico { margin-bottom: 0; }
.demo__dishname { display: grid; gap: 3px; padding: 12px 14px; background: #fff; box-shadow: 0 10px 30px -18px rgba(60,20,120,.35); }
.demo__dishname b { font: 600 16px/1.2 var(--sans); }
.demo__dishname small { font-size: 12px; color: var(--grey); }
/* list view header, laid out like the Price watch screen */
.demo__bar { display: flex; align-items: center; gap: 8px; margin: 2px 2px 18px; color: #fff; }
.demo__logo { display: flex; align-items: center; gap: 7px; font: 600 14px/1 var(--sans); }
.demo__logo svg { width: 18px; height: 18px; color: #fff; }
.demo__card .demo__round--icon { width: 32px; height: 32px; border-radius: 50%; }
.demo__card .demo__round--icon svg { width: 14px; height: 14px; }
.demo__card .demo__bar .demo__avatar { width: 32px; height: 32px; }
.demo__hello { display: grid; gap: 6px; margin: 0 2px 12px; color: #fff; }
.demo__hello small { font-size: 12px; color: rgba(255,255,255,.85); }
.demo__card .demo__hello .demo__h { margin: 0; font-size: 30px; }
.demo__acts { display: flex; align-items: center; gap: 12px; margin: 0 2px 16px; }
.demo__btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border: 0; border-radius: 0; background: #fff; color: var(--ink); font: 500 12px/1 var(--sans); cursor: pointer; transition: transform .15s; }
.demo__btn svg { width: 13px; height: 13px; }
.demo__btn:hover { transform: translateY(-1px); }
.demo__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.demo__btn.is-pressed { transform: scale(.97); }
.demo__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,.85); }
.demo__live i { width: 6px; height: 6px; border-radius: 50%; background: #5BE3A8; box-shadow: 0 0 0 3px rgba(91,227,168,.25); }
@keyframes ripple { 0% { opacity: 1; scale: .3; } 100% { opacity: 0; scale: 1.4; } }

/* empty separator block between the hero and the next section */
.spacer { height: 48px; border-bottom: 1px solid var(--line); }

/* full-bleed photo under the separator */
.photo-band { position: relative; aspect-ratio: 2000 / 1222; max-height: 760px; width: 100%; overflow: hidden; background: #0E0E10; border-bottom: 1px solid var(--line); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.ribbon { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform: translateY(var(--ry, 0px)); will-change: transform; }
.ribbon__band { filter: drop-shadow(0 14px 18px rgba(20,10,60,.35)); }
.ribbon__text { font: 500 50px/1 var(--sans); letter-spacing: -.3px; fill: #2B1676; }
.ribbon__plates { fill: #2B1676; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.photo-band.is-missing { aspect-ratio: auto; height: 0; border: 0; }

/* labelled bands (left label column, like the reference) */
.band--labelled { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); }
.band__label { border-right: 1px solid var(--line); padding: 32px; display: flex; justify-content: center; align-items: flex-start; }
.band__body { min-width: 0; }
.band__title { padding: 64px 40px 56px; }
.band__body--pad { padding: 72px 40px 56px; }

/* 02 SUPPLIERS */
.supplier-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.supplier-grid li { display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.supplier-grid li:nth-child(5n) { border-right: 0; }
.supplier-grid li:nth-last-child(-n+5) { border-bottom: 0; }
.inv { padding: 40px 14px 38px; align-items: center; gap: 0; text-align: center; }
.inv__emoji { font-size: 32px; line-height: 1; margin-bottom: 20px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.inv:hover .inv__emoji { transform: translateY(-3px) scale(1.06); }
.inv__name { font: 500 14px/1.25 var(--sans); margin-bottom: 6px; }
.inv__tag { display: flex; line-height: 1; }
.inv__fmt { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font: 400 12px/1 var(--sans); color: #8A8790; }
.inv__fmt svg { width: 12px; height: 12px; }

/* 03 QUESTION */
.question { display: grid; grid-template-columns: calc(var(--label) + (100% - var(--label)) / 5) minmax(0, 1fr); }   /* photo edge = first supplier column */
.question__photo { min-height: 420px; }
.question__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.question__copy { padding: clamp(48px, 4.5vw, 68px) 40px clamp(48px, 4.5vw, 68px) clamp(56px, 6vw, 100px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; }
.big-quote { font: 500 clamp(28px, 2.8vw, 40px)/1.15 var(--display); letter-spacing: -.025em; text-wrap: pretty; max-width: 22em; }
.question__intro { margin-bottom: -10px; max-width: 36em; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.question__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.byline { display: flex; align-items: center; gap: 12px; margin-top: clamp(32px, 10vh, 88px); }
.byline img { width: 52px; height: 52px; object-fit: cover; flex: none; background: var(--line); }
.byline figcaption { display: grid; gap: 3px; }
.byline b { font: 500 15px/1.2 var(--sans); }
.byline span { font-size: 13px; line-height: 1.2; color: var(--grey); }

/* 04 WEEK */
/* This week: order rail. Tickets drop off the rail as the margin line draws across the week (JS sets --d and --q). */
.week { position: relative; height: 260vh; background: var(--bg); overflow: clip; }
.week__pin { position: sticky; top: 64px; height: calc(100vh - 64px); max-height: 940px; display: flex; flex-direction: column; padding: 36px 40px 32px; }
.week__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.week__title { margin-top: 12px; font-size: clamp(30px, 3vw, 44px); }
.week__sub { margin-top: 10px; max-width: 40em; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* order rail: brushed-steel bar with end brackets; tickets tuck under its lip */
.rail { --gap: 20px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding: 0 12px; margin-top: 28px; height: 24px; z-index: 2; }
/* brushed stainless channel: lit top lip, brushed face, dark slot the tickets slide into */
.rail__bar { position: absolute; left: 8px; right: 8px; top: 0; height: 24px; border-radius: 2px 2px 3px 3px; transform-origin: left; transform: scaleX(var(--rail, 1));
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 1px, rgba(0,0,0,.03) 1px 2px),
    linear-gradient(180deg, #FFFFFF 0, #E9E9EE 2px, #D4D4DB 5px, #F2F2F5 9px, #DADAE0 14px, #B9B9C2 19px, #9C9BA6 20px);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.4), 0 1px 1px rgba(20,16,30,.18), 0 8px 10px -6px rgba(20,16,30,.35); }
.rail__bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, #4A4753, #17151C); }
/* end brackets bolted to the wall */
.rail::before, .rail::after { content: ""; position: absolute; top: -5px; width: 16px; height: 34px; border-radius: 4px; opacity: var(--rail, 1); z-index: 1;
  background: radial-gradient(circle at 50% 30%, #8E8B97 0 1.6px, #2B2930 2.2px, transparent 2.8px), radial-gradient(circle at 50% 74%, #8E8B97 0 1.6px, #2B2930 2.2px, transparent 2.8px), linear-gradient(90deg, #2E2B34, #4B4853 45%, #26232B);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(20,16,30,.3); }
.rail::before { left: 0; } .rail::after { right: 0; }
/* ball bearings sitting in the slot */
.rail i { position: relative; justify-self: center; align-self: start; margin-top: 13px; width: 13px; height: 13px; border-radius: 50%; opacity: var(--rail, 1);
  background: radial-gradient(circle at 34% 28%, #fff 0 9%, rgba(255,255,255,.6) 16%, transparent 30%), radial-gradient(circle at 60% 75%, #8D8A96 0, transparent 55%), radial-gradient(circle at 50% 45%, #E4E3EA 0, #A9A7B2 55%, #5A5763 88%, #3C3A43 100%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.35), 0 2px 2px -1px rgba(0,0,0,.45), 0 0 0 1px rgba(30,26,40,.12); }
.tickets { --gap: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: -6px 0 0; padding: 0 12px 30px; list-style: none; overflow: hidden; align-items: start; }
.ticket { --d: 1; justify-self: center; width: min(100%, 232px); transform-origin: 50% 0; transform: translateY(calc((1 - var(--d)) * -110%)) rotate(calc(var(--r) * var(--d))); filter: drop-shadow(0 1px 1px rgba(26,26,26,.06)) drop-shadow(0 6px 8px rgba(40,30,80,.07)); }
/* the receipt itself: compact thermal-paper layout */
.ticket__paper { --rule: #CFCBD6; background: var(--white); padding: 16px 16px 22px; font: 400 11px/1.35 var(--mono); color: var(--ink);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.ticket__top { display: flex; justify-content: space-between; padding-bottom: 9px; margin-bottom: 12px; font: 400 10px/1 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--grey);
  background: repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 7px) left bottom / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 7px) left calc(100% - 3px) / 100% 1px no-repeat; }
.ticket__num { font: 600 clamp(32px, 2.8vw, 42px)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ticket__num--warn { color: #0F9D58; }
.ticket h3 { margin-top: 4px; font: 500 15px/1.2 var(--sans); letter-spacing: -.01em; }
.ticket__rows { margin-top: 12px; padding-top: 9px; display: grid; gap: 5px; background: repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 7px) left top / 100% 1px no-repeat; }
.ticket__rows div { display: flex; justify-content: space-between; gap: 8px; }
.ticket__rows dt { color: var(--ink-2); }
.ticket__rows dd { font-variant-numeric: tabular-nums; }
.ticket__code { display: block; height: 18px; margin-top: 12px; opacity: .8;
  background: repeating-linear-gradient(90deg, #1A1A1A 0 1px, transparent 1px 3px, #1A1A1A 3px 5px, transparent 5px 6px, #1A1A1A 6px 7px, transparent 7px 10px, #1A1A1A 10px 12px, transparent 12px 13px); }
.ticket__text { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.chart { --q: 1; flex: 1; min-height: 150px; display: flex; flex-direction: column; margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.chart__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.chart__label { font-size: 13px; color: var(--grey); }
.chart__label b { font-weight: 500; color: var(--ink); }
.chart__legend { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-2); }
.chart__legend li { display: inline-flex; align-items: center; gap: 7px; }
.lg { width: 18px; height: 3px; background: linear-gradient(90deg, #4A32D6, #775CFF, #FF80EF); }
.lg--target { height: 0; background: none; border-top: 1.5px dashed var(--ink-2); }
.chart__plot { position: relative; flex: 1; min-height: 0; margin: 34px 0 40px; }
.chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__grid line { stroke: rgba(26,26,26,.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__invoice { stroke: #0F9D58; stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart__area { fill: url(#chart-area); }
.chart__below { fill: rgba(211,32,26,.10); }
.chart__line { fill: none; stroke: url(#chart-stroke); stroke-width: 3; stroke-linejoin: round; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.chart__target { stroke: rgba(26,26,26,.45); stroke-width: 1.25; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.chart__pt { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid #775CFF; box-shadow: 0 0 0 4px rgba(119,92,255,.15); opacity: var(--o, 1); transition: opacity .2s; }
.chart__pt b { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 5px 8px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(26,26,26,.08), 0 4px 12px -4px rgba(40,30,80,.18); font: 600 13px/1 var(--sans); color: #4A32D6; white-space: nowrap; }
.chart__pt--warn { border-color: #D3201A; box-shadow: 0 0 0 4px rgba(211,32,26,.14); }
.chart__pt--warn b { color: #D3201A; }
.chart__pt--below b { bottom: auto; top: 18px; }
.chart__evt { position: absolute; left: 21.43%; top: -26px; transform: translateX(-50%); padding: 4px 8px; border-radius: 999px; background: #E3F6EC; color: #0B7A43; font: 500 11px/1 var(--sans); white-space: nowrap; }
.chart__tgt { position: absolute; right: 0; top: 58.35%; transform: translateY(-50%); padding: 3px 7px; border-radius: 0; background: var(--bg); border: 1px solid rgba(26,26,26,.18); font: 500 11px/1 var(--sans); color: var(--ink-2); }
.chart__gap { position: absolute; left: 60%; top: 66.7%; transform: translate(-50%, -50%); padding: 5px 10px; border-radius: 999px; background: #D3201A; color: #fff; font: 600 12px/1 var(--sans); opacity: var(--o, 1); transition: opacity .3s; }
.chart__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--grey); text-align: center; }
.chart__days .is-on { color: var(--ink); font-weight: 500; }
/* Reduced motion and small screens: no pinning, final state */
.week--static { height: auto; }
.week--static .week__pin { position: relative; top: 0; height: min(860px, calc(100vh - 64px)); }

/* 05 PARTS */
.parts { background: var(--beige); padding: 88px 40px 96px; }
.parts__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; max-width: 1180px; margin: 0 auto; }
/* step cards: copy on top, a live heatmap pooling up from the bottom with the product UI floating on it */
.part { position: relative; grid-column: span 2; background: #fff; overflow: hidden; display: flex; flex-direction: column; min-height: 500px; }
.part:nth-child(4) { grid-column: 2 / span 2; }
.part:nth-child(5) { grid-column: 4 / span 2; }
.part[data-step="0"] { --c1: #B9A8FF; --c2: #5438DB; }
.part[data-step="1"] { --c1: #FFE45C; --c2: #B88A00; }
.part[data-step="2"] { --c1: #9CC9FF; --c2: #2E62E6; }
.part[data-step="3"] { --c1: #FFC48A; --c2: #E8670F; }
.part[data-step="4"] { --c1: #8DEFC8; --c2: #0F9D74; }
.part__copy { position: relative; z-index: 1; padding: 30px 30px 0; display: grid; gap: 8px; }
.part__sub { font: 500 13px/1 var(--sans); color: #6B4FF0; }
.part h3 { font: 500 26px/1.1 var(--display); letter-spacing: -.025em; }
.part__body { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.part__stage { position: relative; flex: 1; min-height: 290px; margin-top: 18px; display: grid; place-items: center; padding: 52px 22px 28px; }
.part__heat { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 30%, #000 62%); mask: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 30%, #000 62%); }
.part__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.part__float { position: relative; z-index: 1; width: min(100%, 440px); }
.part__float .ui { margin-top: 0; box-shadow: 0 24px 48px -20px rgba(30,20,80,.35); border-color: rgba(255,255,255,.7); }
/* bigger product UI so it fills the heatmap stage instead of floating small in it */
.part__float .ui { font-size: 14.5px; padding: 16px; gap: 4px; border-radius: 14px; }
.part__float .ui--invoice { padding-top: 26px; }
.part__float .ui-line { padding: 12px 12px; }
.part__float .ui-recipe__head { padding: 6px 12px 12px; }
.part__float .ui-line--skel i, .part__float .skel { height: 9px; }
.part__float .ui--trace { padding: 22px; }
.part__float .trace__dish { padding: 16px 16px; font-size: 15px; }
.part__float .trace__wire { height: 44px; margin-left: 28px; }
.part__float .trace__src { padding: 16px; display: grid; gap: 8px; }
.part__float .trace__src .mono { font-size: 10.5px; }
.part__float .trace__src p { font-size: 15px; }
.part__float .ui-check__row { grid-template-columns: 42px 1fr auto; padding: 9px 8px; }
.part__float .ui-check__row img { width: 42px; height: 42px; }
.part__float .ui-check__total { padding: 13px 14px; }
.part__badge { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--c2); box-shadow: 0 8px 20px -8px rgba(30,20,80,.35); }
.part__badge svg { width: 24px; height: 24px; }
.part__float .ui-flag { left: auto; right: 14px; }
@media (max-width: 1024px) { .part__body br { display: none; } }
.ui { position: relative; margin-top: auto; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px; display: grid; gap: 2px; box-shadow: 0 18px 36px -24px rgba(20,18,16,.5); }
.ui-flag { position: absolute; top: -12px; left: 14px; background: var(--paprika); color: #fff; padding: 5px 9px; font: 500 12px/1 var(--sans); border-radius: 4px; }
.ui--invoice { padding-top: 20px; }
.ui-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 9px; font-variant-numeric: tabular-nums; }
.ui-line + .ui-line { border-top: 1px solid #F1ECE4; }
.ui-line.is-hot { background: var(--saffron-soft); font-weight: 500; }
.ui-line.is-hot + .ui-line { border-top-color: transparent; }
.ui-line em { font-style: normal; color: var(--grey); margin-left: 6px; font-size: 12px; }
.ui-line svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }
.ui-line--skel i, .skel { display: block; height: 7px; border-radius: 4px; background: var(--beige); }
.ui-line--skel i:first-child { width: 46%; }
.ui-line--skel i:last-child { width: 18%; }
.skel { width: 40px; }
.ui-line--check { color: #7A6400; }
.ui-line--total { font-weight: 600; border-top: 1px solid var(--ink) !important; margin-top: 4px; }
.ui-recipe__head { display: flex; justify-content: space-between; padding: 4px 9px 8px; color: var(--ink-2); }
.ui-recipe__head .mono { font-size: 10px; color: var(--grey); }
.good { color: var(--herb); font-weight: 500; }
.bad { color: var(--paprika-deep); font-weight: 500; }
.ui--trace { gap: 0; padding: 16px; }
.trace__dish { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--ink); color: #fff; }
.trace__wire { height: 24px; width: 2px; margin-left: 22px; background: repeating-linear-gradient(var(--paprika) 0 4px, transparent 4px 8px); }
.trace__src { border: 1.5px solid var(--paprika); background: var(--saffron-soft); padding: 10px 12px; }
.trace__src .mono { font-size: 9.5px; color: #7A6400; }
.ui-check__row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 6px; }
.ui-check__row + .ui-check__row { border-top: 1px solid #F1ECE4; }
.ui-check__row img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; }
.ui-check__row em { font-style: normal; color: var(--paprika-deep); margin-left: 6px; font-size: 12px; }
.ui-check__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-check__total { display: flex; justify-content: space-between; margin-top: 4px; padding: 10px 12px; background: var(--paprika); color: #fff; font-weight: 500; }
/* How it works cards in the Price watch dashboard style: square white cards with a soft shadow, hairline rows,
   6px status chips with no outline, round ingredient thumbnails, and black for the figure that matters */
.part__float .ui { border: 0; border-radius: 0; background: #fff; box-shadow: none;
  /* a round notch cut out of the card around the icon badge, 6px wider than the badge, so the background shows between them */
  -webkit-mask: radial-gradient(circle at 50% -4px, transparent 32px, #000 32.5px); mask: radial-gradient(circle at 50% -4px, transparent 32px, #000 32.5px); }
.part__float { filter: drop-shadow(0 18px 24px rgba(30,20,80,.22)); }   /* shadow on the wrapper, since the mask would clip a box-shadow */
.part__float .ui-flag { border-radius: 0; background: #775CFF; }
.part__float .ui-line + .ui-line { border-top-color: #F1EFF5; }
.part__float .ui-line.is-hot { background: #FFF6D6; }
.part__float .ui-line--skel i, .part__float .skel { border-radius: 2px; background: #F0EEF4; }
.part__float .tag--check { border-radius: 6px; }
.part__float .ui-line > span.good, .part__float .ui-line > span.bad, .part__float .ui-line > span.muted { display: inline-flex; align-items: center; gap: 2px; padding: 5px 8px; border-radius: 6px; font: 600 12.5px/1 var(--sans); }
.part__float .ui-line > span.bad { background: #FDE4E2; color: #C41C16; }
.part__float .ui-line > span.good { background: #DDF5E8; color: #0B7A43; }
.part__float .ui-line > span.muted { background: #F0EEF4; color: #6B6870; }
.part__float .trace__dish { background: #141218; }
.part__float .trace__wire { background: repeating-linear-gradient(#775CFF 0 4px, transparent 4px 8px); }
.part__float .trace__src { border: 0; border-left: 3px solid #775CFF; background: #F6F5FA; }
.part__float .trace__src .mono { color: #6B6870; }
.part__float .ui-check__row + .ui-check__row { border-top-color: #F1EFF5; }
.part__float .ui-check__row img { border-radius: 50%; }
.part__float .ui-check__row em { color: #C41C16; }
.part__float .ui-check__total { background: #141218; }
/* app-style cards (same parts as the hero demo and the Price watch screen): a black header with a warm glow,
   then rows with a round ingredient icon, name + small line, and a status chip or figure on the right */
.part__float .ui--app { padding: 0 14px 12px; gap: 0; min-height: 329px; align-content: start; }   /* every step's card the same height */
.uih { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 0 -14px 6px; padding: 16px 16px 14px; color: #fff;
  background: radial-gradient(90% 140% at 100% 0%, rgba(255,214,102,.24), transparent 60%), #141218; }
.uih small { display: block; font-size: 11.5px; color: rgba(255,255,255,.62); }
.uih b { display: block; margin-top: 4px; font: 600 19px/1.1 var(--sans); letter-spacing: -.02em; }
.uih em { flex: none; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.12); font: 500 11.5px/1 var(--sans); font-style: normal; }
.uirow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 4px; }
.uirow + .uirow { border-top: 1px solid #F1EFF5; }
.uirow.is-hot { margin: 0 -14px; padding-inline: 18px; background: #FFF6D6; border-top-color: transparent; }
.uirow.is-hot + .uirow { border-top-color: transparent; }
.uirow > i, .uirow > img { width: 34px; height: 34px; border-radius: 50%; background: var(--tint, #F0EEF4); display: grid; place-items: center; font-size: 16px; font-style: normal; object-fit: cover; }
.uirow > span { display: grid; gap: 2px; min-width: 0; }
.uirow b { font-weight: 500; font-size: 14px; }
.uirow small { font-size: 12px; color: #8A8790; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uirow small.bad { color: #C41C16; }
.uirow .uival { font-weight: 600; font-variant-numeric: tabular-nums; }
.uirow .skel { width: 44px; height: 8px; border-radius: 2px; background: #F0EEF4; }
.uirow--skel > i { background: #F0EEF4; }
.uirow--skel > span { gap: 6px; }
.uirow--skel em.skel { display: block; width: 62%; height: 8px; } .uirow--skel span em.skel + em.skel { width: 38%; }
.uichip { padding: 5px 8px; border-radius: 6px; font: 600 12px/1 var(--sans); white-space: nowrap; }
.uichip--up { background: #FDE4E2; color: #C41C16; }
.uichip--down { background: #DDF5E8; color: #0B7A43; }
.uichip--flat { background: #F0EEF4; color: #6B6870; }
.uichip--warn { background: #FFF1B8; color: #6E5800; }
.uitotal { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 12px 14px; background: #141218; color: #fff; font-size: 14px; }
.uitotal b { font: 600 17px/1 var(--sans); }
.ui--app .trace__wire { height: 40px; margin-left: 20px; }
.ui--app .trace__src { padding: 12px 14px; }
.ui--app .uirow--after { margin-top: 6px; }
/* scattered layout: the black header stays put (and holds the notch for the badge); everything under it is a loose piece
   with its own width, sideways offset and a slight tilt, set per piece in the markup (--w, --x, --r, --y) */
.part__float .ui--scatter { background: none; padding: 0; min-height: 0; gap: 0; display: flex; flex-direction: column; -webkit-mask: none; mask: none; }
.ui--scatter .uih { margin: 0; position: relative; z-index: 0;
  -webkit-mask: radial-gradient(circle at 50% -4px, transparent 32px, #000 32.5px); mask: radial-gradient(circle at 50% -4px, transparent 32px, #000 32.5px); }
.uip { position: relative; z-index: 1; width: var(--w, 100%); margin-left: var(--x, 0); margin-top: var(--y, 8px); padding: 2px 14px; background: #fff; transform: rotate(var(--r, 0deg)); }
.uip .uirow.is-hot { margin: 0 -14px; padding-inline: 18px; }
.uip--note { border-left: 3px solid #E8B93E; }
.uip--src { padding: 0; }
.uip--src .trace__src { margin: 0; }
.uip.is-dark { padding: 0; background: #141218; }
.uitot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; color: #fff; font-size: 14px; }
.uitot b { font: 600 17px/1 var(--sans); }
.ui--scatter .trace__wire { height: 26px; margin: 2px 0 2px 26px; position: relative; z-index: 1; width: 2px; background: repeating-linear-gradient(#141218 0 4px, transparent 4px 8px); }
.uirow small .bad { color: #C41C16; }
/* no black blocks: the header and the totals are white pieces too */
.ui--scatter .uih { background: #fff; color: var(--ink); -webkit-mask: none; mask: none; }
.ui--scatter .uih small { color: #8A8790; }
.ui--scatter .uih em { background: #F0EEF4; color: var(--ink); }
.uip.is-dark { background: #fff; }
.uip.is-dark .uitot { color: var(--ink); }
.uip.is-dark .uitot b { color: #141218; }
/* the round icon floats free of the card, in a different spot for each step */
.parts__grid .part__stage { padding: 28px 22px 26px; min-height: 0; }   /* no icon badge above the parts any more */
.parts__grid .part { min-height: 0; }
.parts__grid .part__float { width: min(100%, 380px); }
.part__float .ui--kit { zoom: .86; }   /* the whole graphic a size smaller, in proportion */
.part .part__badge { top: -70px; transform: none; }
.part[data-step="0"] .part__badge { left: 4%; --br: -8deg; }
.part[data-step="1"] .part__badge { left: auto; right: 6%; --br: 6deg; }
.part[data-step="2"] .part__badge { left: 16%; --br: 4deg; }
.part[data-step="3"] .part__badge { left: auto; right: 10%; --br: -6deg; }
.part[data-step="4"] .part__badge { left: 10%; --br: 7deg; }
/* How it works, tidy kit: nothing tilted, but each step is built from a different set of parts
   (tabs + list + button, a centred box + arrow + table, two linked rows + a cost bar, a list + supplier pills, a big figure + three dishes) */
.part__float .ui--kit { background: none; padding: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; -webkit-mask: none; mask: none; }
.ui--kit .ucard { width: 100%; background: #fff; padding: 2px 14px; }
.ui--kit .ucard__head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 4px 10px; border-bottom: 1px solid #F1EFF5; }
.ui--kit .ucard__head b { font: 600 15px/1.2 var(--sans); }
.ui--kit .ucard__head span { font-size: 12px; color: #8A8790; }
.ui--kit .ucard__head .is-link { color: #775CFF; font-weight: 500; }
.ui--kit .ucard .uirow.is-hot { margin: 0 -14px; padding-inline: 18px; }
.ui--kit .ucard__head + .uirow { border-top: 0; }
/* step 1's invoice is the same till receipt as the "This week" tickets: mono header with a double dashed rule, a big figure, rows, a barcode, torn edge */
.urcpt { width: 100%; padding: 18px 20px 26px; font-size: 13px; }
.urcpt .ticket__top { font-size: 11px; }
.urcpt .ticket__num { font-size: 40px; }
.urcpt h3 { margin-top: 6px; font: 500 17px/1.2 var(--sans); letter-spacing: -.01em; }
.urcpt .ticket__rows { margin-top: 14px; padding-top: 11px; gap: 8px; }
.urcpt .ticket__rows div { align-items: center; }
.urcpt .uichip { padding: 3px 7px; font-size: 11px; }
.urcpt .ticket__code { height: 26px; margin-top: 16px; }
/* the invoice card is a till receipt: a zigzag torn edge along the bottom */
.ucard--receipt { padding-bottom: 14px; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
/* step 2 recipe card: dish photo header, the two cost lines, then plate cost / margin / target along the bottom */
.ulive { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; background: #fff; font: 500 12px/1 var(--sans); color: var(--ink); }
.ulive i { width: 7px; height: 7px; border-radius: 50%; background: #22B07D; box-shadow: 0 0 0 3px rgba(34,176,125,.18); }
.urecipe { padding: 0 14px; }
.urecipe__head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 -14px; padding: 14px; background: #F7F5FB; }
.urecipe__head img { width: 52px; height: 52px; object-fit: cover; }
.urecipe__head span { display: grid; gap: 3px; min-width: 0; }
.urecipe__head small { font-size: 11.5px; color: #8A8790; }
.urecipe__head b { font: 600 17px/1.1 var(--sans); letter-spacing: -.02em; }
.urecipe .uirow + .uirow { border-top: 1px solid #F1EFF5; }
.urecipe__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px -14px 0; border-top: 1.5px solid var(--ink); }
.urecipe__foot div { display: grid; gap: 4px; padding: 12px 14px 14px; }
.urecipe__foot div + div { border-left: 1px solid #F1EFF5; }
.urecipe__foot small { font-size: 11.5px; color: #8A8790; }
.urecipe__foot b { font: 600 18px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.urecipe__foot .bad { color: #C41C16; }
.utabs { align-self: flex-start; display: flex; gap: 2px; padding: 4px; background: #fff; }
.utabs span { padding: 7px 12px; font: 500 12.5px/1 var(--sans); color: #8A8790; }
.utabs .is-on { background: #F0EEF4; color: var(--ink); }
.ubtn { width: 100%; padding: 12px; background: #fff; text-align: center; font: 500 13.5px/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(26,26,26,.1); }
.ulabel { margin: 0; padding: 5px 10px; background: rgba(255,255,255,.8); font: 500 12.5px/1 var(--sans); color: var(--ink); }
.ubox { display: grid; gap: 4px; padding: 16px 28px; background: #fff; text-align: center; }
.ubox b { font: 600 22px/1.1 var(--sans); letter-spacing: -.02em; }
.ubox small { font-size: 12px; color: #8A8790; }
.ubox--bad b { font-size: 32px; color: #C41C16; }
.uarrow { width: 26px; height: 26px; margin: -4px 0; border-radius: 50%; background: #fff; color: #6B6870; display: grid; place-items: center; }
.uarrow svg { width: 14px; height: 14px; }
.utag { margin-bottom: -4px; padding: 5px 12px; border-radius: 6px; background: #775CFF; color: #fff; font: 500 12px/1 var(--sans); }
.utable { padding: 4px 16px; }
.utable > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; font-size: 13.5px; }
.utable > div + div { border-top: 1px solid #F1EFF5; }
.utable span { color: #4D4A55; }
.utable b { font-weight: 600; font-variant-numeric: tabular-nums; }
.utable .skel { width: 46px; height: 8px; border-radius: 2px; background: #F0EEF4; }
.utable .is-total { border-top: 1.5px solid var(--ink) !important; }
.utable .is-total span { color: var(--ink); font-weight: 600; }
.ulink { padding-block: 6px; }
.ulink .uirow + .uirow { border-top: 0; }
.ulink__wire { display: block; width: 2px; height: 16px; margin: -4px 0 -4px 21px; background: repeating-linear-gradient(#775CFF 0 3px, transparent 3px 6px); }
.ulink .uirow.is-src { margin: 0 -14px; padding-inline: 18px; background: #F7F5FB; }
.uichip--purple { background: #EFEBFF; color: #4A32D6; }
.usplit { width: 100%; display: flex; gap: 3px; height: 30px; padding: 12px 14px 10px; background: #fff; }
.usplit i { border-radius: 999px; }
.usplit .a, .ulegend .a { background: #141218; } .usplit .b, .ulegend .b { background: #1F9E8F; }
.ulegend { width: 100%; margin: -10px 0 0; padding: 4px 14px 12px; list-style: none; background: #fff; display: grid; gap: 6px; font-size: 12.5px; color: #4D4A55; }
.ulegend li { display: flex; align-items: center; gap: 8px; }
.ulegend li i { width: 8px; height: 8px; border-radius: 50%; }
.ulegend b { margin-left: auto; color: var(--ink); font-weight: 600; }
.ugroup { width: 90%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; background: #fff; font: 500 13.5px/1 var(--sans); }
.ugroup + .ugroup { margin-top: -4px; }
.uavs { display: flex; padding-left: 8px; }
.uavs i { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 2px #fff; display: grid; place-items: center; font-size: 14px; font-style: normal; }
.udishes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 14px 8px; }
.udishes > div { display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.udishes img { width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%; object-fit: cover; }
.udishes b { font-weight: 500; font-size: 13px; }
.udishes small { font-size: 11.5px; color: #C41C16; }
.udishes em { font-style: normal; font-weight: 600; font-size: 13px; }
@media (max-width: 860px) {
  .parts__grid .part__stage { padding: 24px 16px 22px; }
  .uip { width: min(100%, calc(var(--w, 100%) + 12%)); margin-left: calc(var(--x, 0%) * .4); }
}

/* 06 PRICE WATCH */
.watch { position: relative; background: var(--night); color: #F3ECE3; padding: 96px 40px 0; overflow: hidden; isolation: isolate; }
.watch__lines { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent calc(var(--label) - 1px), var(--night-line) calc(var(--label) - 1px), var(--night-line) var(--label), transparent var(--label)), linear-gradient(90deg, transparent calc(100% - var(--label)), var(--night-line) calc(100% - var(--label)), var(--night-line) calc(100% - var(--label) + 1px), transparent calc(100% - var(--label) + 1px)); }
.watch__lines::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 60%; transform: translateY(-50%); background: radial-gradient(ellipse at 50% 0%, rgba(119,92,255,.3), transparent 60%); }
.watch .center-head { margin-bottom: 30px; }
.center-head--dark .eyebrow { color: #A9A097; font-size: 12px; }
.center-head--dark p { color: #A9A097; max-width: 34em; font-size: 16px; }
.gradient-text { background: linear-gradient(90deg, #C9BEFF 0%, #FFE45C 28%, #FFDD0A 50%, #8DEFC8 74%, #B9A8FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 6px; }   /* same ramp as the photo ribbon */
.tabs { display: flex; gap: 12px; }
.tabs [role=tab] { cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.tabs [role=tab]:focus-visible { outline: 2px solid var(--blush); outline-offset: 2px; }
.tabs--dark { justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.tabs--dark [role=tab] { min-width: 210px; height: 48px; padding: 0 22px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #E5DCD1; font: 500 15px/1 var(--sans); letter-spacing: .3px; }   /* same type as the buttons */
.tabs--dark [role=tab]:hover { border-color: rgba(255,255,255,.4); }
.tabs--dark [role=tab][aria-selected=true] { background: var(--mint); color: var(--ink); border-color: transparent; }
.watch__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1180px; margin: 0 auto; border-top: 1px solid var(--night-line); border-left: 1px solid var(--night-line); }
.tabpanel:not([hidden]) { animation: rise .45s ease; }
/* Price watch: all-in-one desktop computer showing the dashboard */
.imac { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
/* studio display, front view: black glass with a hairline aluminium rim, a short brushed-aluminium neck and a thin base plate */
.imac__body { position: relative; width: 100%; border-radius: 10px; background: #050506; padding: 12px;
  box-shadow: 0 0 0 1px #3A3B40, 0 0 0 2.5px #A9ABB2, 0 0 0 3.5px #5A5C63, 0 50px 80px -40px rgba(0,0,0,.9); }
.imac__body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.06), transparent 35%); }
.imac__body::before { display: none; }
.imac__screen { aspect-ratio: 16 / 9.4; background: #050506; border-radius: 2px; overflow: hidden; }
.imac__chin { display: none; }
.imac__neck { display: block; position: relative; width: 26%; height: 120px; margin-top: 3.5px;   /* runs straight into the bottom edge of the section */
  background: linear-gradient(90deg, #8D8F96 0%, #C7C9CF 8%, #E4E5E9 30%, #EEEFF2 50%, #E1E2E6 70%, #C4C6CC 92%, #8A8C93 100%);
  box-shadow: inset 0 18px 18px -12px rgba(0,0,0,.55); }
.imac__neck::after { display: none; }
.imac__foot { display: none !important; position: relative; width: 30%; height: 12px; margin-top: 0; border-radius: 2px 2px 4px 4px;
  background: linear-gradient(180deg, #F4F5F7 0%, #D6D8DD 35%, #B5B7BE 75%, #8E9097 100%);
  box-shadow: inset 0 1px 0 #fff, 0 16px 24px -10px rgba(0,0,0,.8); }
.imac__foot::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(4px); }
/* dashboard: deep purple at the top running through pink into a pale yellow, white cards sitting on the warm half */
.dash { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; color: var(--ink); font-size: 13px; text-align: left; isolation: isolate;
  background:
    radial-gradient(70% 55% at 88% 6%, rgba(255,128,239,.38), transparent 70%),
    radial-gradient(60% 45% at 8% 58%, rgba(255,214,102,.55), transparent 70%),
    linear-gradient(180deg, #1C0A4A 0%, #3A1BA6 17%, #6A45F2 33%, #B57BFF 47%, #FF9ECF 59%, #FFCF73 72%, #FFE9A8 84%, #FFF6DA 100%); }
/* macOS menu bar along the top of the screen */
.dash__mac { display: flex; justify-content: space-between; align-items: center; height: 22px; padding: 0 12px; flex: none; color: #fff; font: 500 11px/1 var(--sans);
  background: rgba(16,6,40,.32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }
.dash__mac-l, .dash__mac-r { display: flex; align-items: center; gap: 14px; }
.dash__mac-l span { font-weight: 400; opacity: .9; }
.dash__mac-r { gap: 10px; }
.dash__mac svg { height: 11px; width: auto; fill: currentColor; }
.dash__mac .dash__apple { height: 13px; margin-top: -2px; }
/* a live heatmap across the top of the screen that fades into the gradient below */
.dash__heat { position: absolute; left: 0; top: 0; width: 100%; height: 62%; z-index: -1; display: block; pointer-events: none; opacity: .9;
  /* colour on the right only: it fades out towards the left (where the greeting sits) and towards the bottom */
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 70%), linear-gradient(180deg, #000 40%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 22%, #000 70%), linear-gradient(180deg, #000 40%, transparent); mask-composite: intersect; }
.dash__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 22px 0; color: #fff; }
.dash__logo { display: flex; align-items: center; gap: 8px; font: 600 15px/1 var(--sans); flex: 1; }
.dash__logo svg { width: 20px; height: 20px; color: #fff; }
.dash__navs { display: flex; gap: 22px; }
.dash__navs span { position: relative; padding: 8px 0; font: 500 12px/1 var(--sans); color: rgba(255,255,255,.72); }
.dash__navs .is-on { color: #fff; }
.dash__navs .is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #fff; }   /* line under the open page, no capsule */
.dash__me { flex: 1; display: flex; justify-content: flex-end; gap: 6px; }
.dash__me i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.dash__bell { background: rgba(255,255,255,.16); }
.dash__bell svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.dash__av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.dash__main { min-width: 0; flex: 1; padding: 26px 22px 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.dash__hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; color: #fff; padding: 4px 0 2px; }
.dash__hello { display: grid; gap: 6px; text-shadow: 0 1px 14px rgba(20,6,60,.5); }
.dash__hello small { font-size: 12px; color: rgba(255,255,255,.92); }
.dash__hello b { font: 600 30px/1 var(--sans); letter-spacing: -.035em; }
.dash__acts { display: flex; align-items: center; gap: 6px; }
.dash__acts span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 0; background: #fff; color: var(--ink); font: 500 12px/1 var(--sans); }
.dash__acts span + span { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.dash__acts svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi b em { font-style: normal; opacity: .45; }
.dash__live { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font: 400 11px/1 var(--sans); color: rgba(255,255,255,.8); }
.dash__live i { width: 6px; height: 6px; border-radius: 50%; background: #5BE3A8; box-shadow: 0 0 0 3px rgba(91,227,168,.25); }
.dash__panel { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.dash__panel[hidden] { display: none; }
.dash__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
/* KPI cards: the figure on the left, a small picture of it on the right */
.kpi { background: #fff; border-radius: 0; padding: 12px 16px 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: end; box-shadow: 0 10px 30px -18px rgba(60,20,120,.35); }
.kpi > small, .kpi > b, .kpi > span { grid-column: 1; }
.kpi small { color: #6B6870; font-size: 12px; font-weight: 500; }
.kpi b { font: 600 24px/1 var(--sans); letter-spacing: -.03em; }
.kpi span { color: #8A8790; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi > .kviz { grid-column: 2; grid-row: 1 / 4; align-self: center; }
/* a week of invoices: purple bars are the days a price moved */
.kbars { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.kbars i { width: 7px; height: var(--h); border-radius: 4px; background: #ECEAF2; }
.kbars i.on { background: linear-gradient(180deg, #B57BFF, #4A32D6); }
/* the dishes it touches, as overlapping ingredient badges */
.kfaces { display: flex; padding-left: 10px; }
.kfaces i { width: 32px; height: 32px; margin-left: -10px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 3px #fff; display: grid; place-items: center; font: 600 17px/1 var(--sans); font-style: normal; color: #0B7A43; }
/* money at stake, split by dish */
.kseg { display: flex; gap: 3px; width: 64px; height: 10px; }
.kseg i { width: var(--w); border-radius: 999px; }
.kseg .a { background: repeating-linear-gradient(-45deg, #D3201A 0 5px, #E8524D 5px 10px); }
.kseg .b { background: #F6A39C; }
/* the fourth card is black: the one price to look at this week */
.kpi--dark { background: #141218; color: #fff; box-shadow: 0 14px 30px -16px rgba(20,10,40,.7); }
.kpi--dark > small { color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi--dark b small { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6); margin-left: 2px; letter-spacing: 0; }
.kpi--dark b em { opacity: .5; }
.kpi__pill { display: inline-block; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; font: 500 10.5px/1.2 var(--sans); font-style: normal; }
.kpi .bad { color: #D3201A; } .kpi .good { color: #0F9D58; }
.dash__card { flex: 1; min-height: 0; overflow: hidden; background: #fff; border-radius: 0; padding: 16px 16px 6px; box-shadow: 0 10px 30px -18px rgba(60,20,120,.35); }
.dash__cardhead { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 8px; }
.dash__cardhead b { font: 500 14px/1 var(--sans); }
.dash__cardhead span { font-size: 11.5px; color: #8A8790; }
.dash__table { width: 100%; border-collapse: separate; border-spacing: 0; }
.dash__table th { text-align: left; font: 500 11px/1 var(--sans); color: #8A8790; padding: 8px 10px; background: #F7F5FB; }

.dash__table td { padding: 4px 10px; border-bottom: 1px solid #F1EFF5; vertical-align: middle; }
.dash__table tr:last-child td { border-bottom: 0; }
.dash__ing { display: flex; align-items: center; gap: 10px; }
.dash__ing i { width: 30px; height: 30px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-size: 15px; font-style: normal; flex: none; }
.dash__ing span, .dash__dish { display: grid; gap: 2px; }
.dash__ing small, .dash__dish small { color: #8A8790; font-size: 11.5px; }
.dash__ing b, .dash__dish b { font-weight: 500; }
.dash__move { color: #4D4A55; white-space: nowrap; }
.dash__imp { font-weight: 600; white-space: nowrap; }
.dash__dish .bad { color: #D3201A; } .dash__dish .good { color: #0F9D58; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 11.5px/1 var(--sans); white-space: nowrap; }
.dash .chip { padding: 0 9px; border: 0; border-radius: 6px; }
.chip--up { background: #FDE4E2; color: #C41C16; }
.chip--down { background: #DDF5E8; color: #0B7A43; }
.chip--flat { background: #F0EEF4; color: #6B6870; }
.chip--warn { background: #FFF1B8; color: #6E5800; }
@media (max-width: 1100px) { .dash__table th:nth-child(2), .dash__table td:nth-child(2) { display: none; } }
@media (max-width: 860px) {
  .imac__body { padding: 6px; border-radius: 8px; }
  .imac__screen { aspect-ratio: auto; }
  .imac__neck { height: 72px; width: 30%; }
  .imac__foot { height: 8px; width: 36%; }
  .dash { font-size: 12px; }
  .dash__bar { padding: 10px 12px 0; }
  .dash__mac-l span, .dash__mac-r span:first-of-type { display: none; }
  .dash__navs, .dash__acts span + span, .dash__acts .dash__live, .kviz { display: none; }
  .dash__main { padding: 20px 12px 0; gap: 10px; }
  .dash__hello b { font-size: 24px; }
  .dash__hero { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dash__hello small { font-size: 11px; }
  .dash__kpis { gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { padding: 12px; border-radius: 0; grid-template-columns: minmax(0, 1fr); }
  .kpi--dark span { display: block !important; } .kpi small { font-size: 10.5px; } .kpi b { font-size: 19px; } .kpi span { display: none; }
  .dash__card { border-radius: 0; padding: 12px 8px 4px; }
  .dash__table th:nth-child(4), .dash__table td:nth-child(4), .dash__table th:nth-child(5), .dash__table td:nth-child(5) { display: none; }
}

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.wcard { position: relative; border-right: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); padding: 32px; display: flex; flex-direction: column; gap: 14px; min-height: 330px; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.wcard__icon { width: 26px; height: 26px; color: var(--paprika); }
.wcard--good .wcard__icon { color: var(--mint); }
.wcard h3 { font: 500 28px/1.1 var(--display); letter-spacing: -.025em; color: #FFF8EE; max-width: 13em; }
.wcard p { color: #A9A097; font-size: 15px; max-width: 24em; }
.wui { margin-top: auto; align-self: flex-end; width: min(100%, 300px); background: var(--white); color: var(--ink); border-radius: 12px; padding: 14px; display: grid; gap: 10px; font-size: 13px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); }
.wui__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wui__pct { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.wui__pct svg { width: 12px; height: 12px; }
.wui__foot { display: flex; justify-content: space-between; font: 400 10.5px/1 var(--mono); letter-spacing: .5px; color: var(--grey); text-transform: uppercase; }
.bar { height: 8px; background: var(--beige); position: relative; overflow: hidden; }
.bar span { position: absolute; inset: 0 auto 0 0; width: var(--to); background: linear-gradient(90deg, #C9BCAE var(--from), var(--paprika) var(--from)); }
.gauge { height: 8px; background: var(--beige); position: relative; }
.gauge span { position: absolute; inset: 0 auto 0 0; width: calc((var(--v) - 50%) * 2.5); background: var(--paprika); }
.gauge--ok span { background: #22B07D; }
.gauge i { position: absolute; top: -4px; bottom: -4px; width: 2px; left: calc((var(--t) - 50%) * 2.5); background: var(--ink); }

/* 07 MONTH (story band) */
.month { position: relative; background: radial-gradient(ellipse 55% 60% at 50% 45%, rgba(255,221,10,.85), rgba(255,231,92,.45) 55%, transparent 100%), #FFF6C7; padding: 72px 40px; overflow: hidden; }   /* same soft yellow glow as the announcement bar */
.month__head { position: relative; z-index: 1; margin-bottom: 40px; }
.month__head .h2 { max-width: 16em; }
.story { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; background: var(--white); display: grid; grid-template-columns: 340px minmax(0, 1fr); box-shadow: 0 40px 80px -36px rgba(150,90,0,.5), 0 12px 24px -12px rgba(150,90,0,.25);   /* warm amber shadow on the yellow glow */ }
.story__photo { grid-row: span 2; min-height: 400px; }
.story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.story__main { padding: 32px 40px 36px; display: flex; flex-direction: column; gap: 24px; }
.story__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.tabs--line { gap: 0; border: 1px solid var(--line); }
.tabs--line [role=tab] { border: 0; background: none; padding: 9px 14px; font: 400 11px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--grey); }
.tabs--line [role=tab] + [role=tab] { border-left: 1px solid var(--line); }
.tabs--line [role=tab][aria-selected=true] { background: #4A32D6; color: #fff; }
.big-para { font: 400 clamp(22px, 2vw, 28px)/1.3 var(--display); letter-spacing: -.015em; text-wrap: pretty; }
/* result stats: two soft tiles, each with a small visual — plates for dishes, a bar for money */
/* result stats, in the same card style as the Price watch dashboard: figure on the left, a small picture on the right; the money card is black */
.story__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
.skpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; column-gap: 14px; row-gap: 6px; align-items: end; padding: 18px 20px 16px; background: #F6F5FA; }
/* the open week's panel fills the card down to the footer, and the two stat cards stretch with it */
.story__main > .tabpanel:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
.story__main .story__stats { flex: 0 1 auto; }
.skpi { min-height: 176px; }
/* a small line at the bottom of each card: the three dishes, or what the money means */
.skpi__foot { grid-column: 1 / -1; grid-row: 4; align-self: end; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(26,26,26,.08); }
.skpi__foot em { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1.2 var(--sans); font-style: normal; color: #6B6870; }
.skpi__foot em.ok::before, .skpi__foot em.bad::before, .skpi__foot em.wait::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #0F9D58; }
.skpi__foot em.bad::before { background: #D3201A; }
.skpi__foot em.wait::before { background: transparent; box-shadow: inset 0 0 0 1.5px #A29FB3; }
.skpi--dark .skpi__foot { border-top-color: rgba(255,255,255,.12); }
.skpi--dark .skpi__foot em { color: rgba(255,255,255,.6); }
.skpi > small, .skpi > b, .skpi > span:not(.sdish):not(.sseg):not(.skpi__foot) { grid-column: 1; }
.skpi > small { font-size: 13px; font-weight: 500; color: #6B6870; }
.skpi > b { font: 600 34px/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.skpi > b em { font-style: normal; opacity: .4; }
.skpi > b.bad { color: #D3201A; } .skpi > b.good { color: #0F9D58; }
.skpi > span:not(.sdish):not(.sseg):not(.skpi__foot) { font-size: 12.5px; color: #8A8790; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skpi--dark { background: #141218; color: #fff; }
.skpi--dark > small { color: rgba(255,255,255,.62); }
.skpi--dark > b.bad { color: #FF6B61; } .skpi--dark > b.good { color: #5BE3A8; }
.skpi--dark > b em { opacity: .5; }
.skpi .kpi__pill { font-size: 11px; }
/* the three dishes as overlapping badges, ringed by how they're doing */
.sdish { grid-column: 2; grid-row: 1 / 4; align-self: center; display: flex; padding-left: 10px; }
.sdish i { --c: #C9C6D6; width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-size: 18px; font-style: normal; box-shadow: 0 0 0 2px #F6F5FA, 0 0 0 4px var(--c); }
.sdish .ok { --c: #0F9D58; } .sdish .bad { --c: #D3201A; }
.sdish .wait { --c: #C9C6D6; filter: grayscale(.6); opacity: .7; }
/* money split by dish */
.sseg { grid-column: 2; grid-row: 1 / 4; align-self: center; display: flex; gap: 3px; width: 92px; height: 10px; }
.sseg i { width: var(--w); border-radius: 999px; }
.sseg .bad { background: repeating-linear-gradient(-45deg, #D3201A 0 5px, #E8524D 5px 10px); }
.sseg .bad--2 { opacity: .75; } .sseg .bad--3 { opacity: .5; }
.sseg .ok { background: linear-gradient(90deg, #0F9D58, #5BE3A8); }
.sseg .rest { background: rgba(255,255,255,.16); }
.story__foot { grid-column: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 40px; border-top: 1px solid var(--line); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid var(--paprika); padding-bottom: 3px; }

/* 08 KITCHENS */
/* Who it's for: live heatmap + product card on the left, kitchen types on the right */
.kitchens { display: grid; grid-template-columns: calc(var(--label) + (100% - var(--label)) * 3 / 10) minmax(0, 1fr); }   /* heatmap side runs three tenths past the label column */
.kit__stage { position: relative; isolation: isolate; overflow: hidden; min-height: 440px; display: grid; place-items: center; padding: 32px 24px; background: #5438DB; }
.kit__heat { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.kit__cards { position: relative; z-index: 1; display: grid; width: min(380px, 100%); }
.kitui { grid-area: 1 / 1; align-self: center; background: #F6F5FA; border-radius: 26px; padding: 16px 18px 18px; box-shadow: 0 30px 60px -24px rgba(20,10,60,.45), 0 0 0 1px rgba(255,255,255,.5) inset;
  opacity: 0; transform: scale(.985); transition: opacity .3s ease .28s, transform .5s ease .28s; pointer-events: none; z-index: 1; }
.kitui.is-on { opacity: 1; transform: none; pointer-events: auto; z-index: 2; transition: opacity .5s ease, transform .6s cubic-bezier(.22,.8,.24,1); }
.kitui__head { display: grid; gap: 4px; margin: 2px 2px 14px; }
.kitui__head small { color: #8A8790; font-size: 12px; }
.kitui__head b { font: 600 22px/1.1 var(--sans); letter-spacing: -.02em; }
.kitui__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.kitui__stats div { background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; }
.kitui__stats small { color: #8A8790; font-size: 12px; }
.kitui__stats b { font: 600 24px/1 var(--sans); letter-spacing: -.02em; }
.kitui__stats .bad { color: #D3201A; }
.kitui__list { display: grid; gap: 6px; }
.kitui__row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 8px 12px 8px 8px; }
.kitui__row .demo__ico { width: 38px; height: 38px; border-radius: 11px; font-size: 19px; }
.kitui__txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.kitui__txt b { font-weight: 500; font-size: 14px; }
.kitui__txt small { color: #8A8790; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kitui__r { font: 600 13px/1 var(--sans); white-space: nowrap; }
.kitui__r.ok { color: #0B7A43; background: #DDF5E8; padding: 5px 8px; border-radius: 6px; font-size: 11.5px; }
.kitui__r.muted { color: #6B6870; background: #F0EEF4; padding: 5px 8px; border-radius: 6px; font-size: 11.5px; }
.kitui__note { margin: 10px 4px 0; font-size: 12.5px; color: #6B6870; }
.kitui__seg { display: inline-flex; padding: 3px; background: #ECEAF2; border-radius: 10px; margin-bottom: 8px; }
.kitui__seg span { padding: 6px 14px; border-radius: 8px; font: 500 12.5px/1 var(--sans); color: #6B6870; }
.kitui__seg .is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
/* Kitchens product cards in the same dashboard style: square card, square white tiles with a soft shadow, round ingredient icons */
.kitui { border-radius: 0; background: #F6F5FA; }
/* same skin as the hero demo card: white ring, black header with a warm glow, then yellow, white near the bottom */
.kitui { box-shadow: 0 0 0 7px rgba(255,255,255,.55), 0 30px 60px -24px rgba(20,10,60,.45);
  background:
    radial-gradient(80% 26% at 100% 0%, rgba(255,214,102,.22), transparent 70%),
    linear-gradient(180deg, #121016 0, #1A1720 168px, #E8B93E 218px, #FFE58A 250px, #FFF3C9 290px, #FFFFFF 345px); }
.kitui__head small { color: rgba(255,255,255,.62); }
.kitui__head b { color: #fff; }
.kitui__note { color: #4D4A55; }
.kitui__seg { background: rgba(255,255,255,.14); }
.kitui__seg span { color: rgba(255,255,255,.75); }
.kitui__seg .is-on { background: #fff; color: var(--ink); }
.kitui__stats { gap: 6px; margin-bottom: 6px; }
.kitui__stats div, .kitui__row { border-radius: 0; box-shadow: 0 10px 24px -18px rgba(60,20,120,.35); }
.kitui__list { gap: 6px; }
.kitui__row .demo__ico { border-radius: 50%; }
.kitui__seg, .kitui__seg span { border-radius: 0; }
.rows { display: flex; flex-direction: column; }
.row { border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }   /* the whole row is the hit area */
.row:last-child { border-bottom: 0; }
.row summary { list-style: none; cursor: inherit; display: flex; justify-content: space-between; align-items: center; padding: 26px 40px; font: 500 18px/1.2 var(--sans); }
.row summary::-webkit-details-marker { display: none; }
.row:hover { background: var(--bg-hover); }
.row summary svg { width: 18px; height: 18px; transition: transform .25s; }
.row { position: relative; isolation: isolate; }
.row[open] { background: none; cursor: default; }
/* active row: a thin purple line runs along its bottom edge; when it reaches the end the next kitchen opens */
.row::before { content: ""; position: absolute; bottom: -1px; left: 0; height: 2px; width: 100%; clip-path: inset(0 100% 0 0); z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #4A32D6, #775CFF 35%, #B57BFF 70%, #FF80EF);; }   /* same ramp as the margin chart line */
.row[open]::before { clip-path: inset(0 0 0 0); }
.rows.is-auto .row[open]::before { animation: row-fill 10s linear both; }
.rows.is-auto.is-paused .row[open]::before, .rows.is-auto:hover .row[open]::before { animation-play-state: paused; }
@keyframes row-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.row[open] summary svg { transform: rotate(90deg); color: var(--paprika); }
/* cloche instead of an arrow: the lid lifts off the plate when a row opens */
.row summary .cloche { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transform: none; }
.cloche__lid { transform-box: view-box; transform-origin: 12px 12px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.row:not([open]):hover .cloche__lid { transform: translateY(-1.5px) rotate(6deg); }
.row[open] summary .cloche { transform: none; color: #775CFF; }
.row[open] .cloche__lid { transform: translate(1.5px, -4.5px) rotate(14deg); }
/* switching rows: the closing row drops its lid, fades its text and line while it shrinks; the new text rises in */
.row::before { transition: opacity .3s ease; }
.row.is-closing::before { opacity: 0; }
.row.is-closing summary .cloche, .faq details.is-closing .cloche { color: currentColor; }
.row.is-closing .cloche__lid, .faq details.is-closing .cloche__lid { transform: none; }
.row[open] .row__open, .faq details[open] > p { animation: acc-in .5s .08s cubic-bezier(.22,.8,.24,1) both; }
.row.is-closing .row__open, .faq details.is-closing > p { animation: acc-out .25s ease both; }
@keyframes acc-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes acc-out { to { opacity: 0; transform: translateY(-4px); } }
/* open row: one plain line under the name, then three small "built for" chips */
.row__open { display: grid; gap: 12px; padding: 0 40px 24px; margin-top: -12px; }
.row__open p { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); max-width: 34em; }
.row__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.row__chips li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid rgba(119,92,255,.28); background: rgba(119,92,255,.06); color: #4A32D6; font: 500 12.5px/1 var(--sans); }
.row__chips li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #775CFF; }

/* 09 WAYS IN */
/* Getting invoices in: centred heading, then two rows of source pills drifting in opposite directions */
.ways { background: var(--beige); padding: 88px 0 96px; overflow: hidden; }
.ways__copy { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 0 24px; margin-bottom: 52px; }
.ways__copy > p { font-size: 16px; color: var(--ink-2); max-width: 36em; text-wrap: balance; }
.ways__rows { display: grid; gap: 18px; justify-items: center; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* rows sit still and slide only as the page scrolls (JS sets --shift); one Platecost tile sits in the middle */
.wrow { width: 100%; overflow: hidden; }
.wrow__track { display: flex; align-items: flex-start; gap: 22px; padding: 4px 0 8px; width: max-content; margin: 0 0 0 50%; padding: 0; list-style: none; transform: translateX(calc(-50% + var(--shift, 0px))); will-change: transform; }
/* each source is a little till receipt: number + label in mono, the source, a barcode, and a torn bottom edge */
.wrc { --rule: #E2DED8; display: grid; gap: 12px; padding: 14px 20px 20px; background: #fff; min-width: 200px;
  filter: drop-shadow(0 1px 1px rgba(26,26,26,.04));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 9px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 9px 100%; }
.wrc__top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 9px; font: 400 9.5px/1 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--grey);
  background: repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 7px) left bottom / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 7px) left calc(100% - 3px) / 100% 1px no-repeat; }
.wrc__top i { font-style: normal; }
.wrc__row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 500 15.5px/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.wrc__cap { margin-top: -2px; font-size: 12.5px; line-height: 1.3; color: var(--grey); white-space: nowrap; }
.wrc__ico { flex: none; display: grid; place-items: center; font-size: 15px; line-height: 1; }
.wrc__code { display: block; height: 12px; opacity: .55; background: var(--bc) !important;
  background: repeating-linear-gradient(90deg, #1A1A1A 0 1px, transparent 1px 3px, #1A1A1A 3px 5px, transparent 5px 6px, #1A1A1A 6px 7px, transparent 7px 10px, #1A1A1A 10px 12px, transparent 12px 13px); }
.wrc--core { background: #775CFF; --rule: rgba(255,255,255,.35); }
.wrc--core .wrc__top { color: rgba(255,255,255,.75); }
.wrc--core .wrc__row { color: #fff; }
.wrc__row b { font-weight: 500; }   /* titles medium, not bold */
.wrc--core .wrc__cap { color: rgba(255,255,255,.75); }
.wrc--core .wrc__ico { width: 20px; height: 20px; }
.wrc--core .wrc__ico svg { width: 20px; height: 20px; color: #fff; }
.wrc--core .wrc__code { opacity: .5; filter: invert(1); }
@media (max-width: 860px) { .ways { padding: 64px 0 72px; } .ways__copy { margin-bottom: 36px; } .ways__copy br { display: none; } .wrc { min-width: 170px; padding: 12px 14px 18px; } .wrc__row { font-size: 14.5px; } .wrc__ico { font-size: 14px; } }

/* 10 NOTES */
/* Kitchen notes: left-aligned head, then a 2×2 bento of note cards, each with its own visual */
.notes { padding: 88px 40px 96px; }
.notes__head { display: grid; justify-items: start; gap: 16px; max-width: 1180px; margin: 0 auto 40px; }
.nbento { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; max-width: 1180px; margin: 0 auto; }
.nbento { grid-template-areas: "a b" "c d" "e e"; }
.ncard:nth-child(1) { grid-area: a; } .ncard:nth-child(2) { grid-area: b; } .ncard:nth-child(3) { grid-area: c; } .ncard:nth-child(4) { grid-area: d; } .ncard:nth-child(5) { grid-area: e; }
@media (min-width: 861px) { .nbento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "b b b b b a a a a a a a" "c c c c d d d d e e e e"; } }
.ncard { position: relative; overflow: hidden; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 30px; color: var(--ink); isolation: isolate; }
.ncard small { display: block; font-size: 14px; color: rgba(26,26,26,.6); margin-bottom: 6px; }
.ncard h3 { font: 500 clamp(22px, 2.1vw, 30px)/1.12 var(--display); letter-spacing: -.03em; max-width: 16em; }
.ncard__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ncard__foot--end { justify-content: flex-end; }
.ncard__foot--stack { flex-direction: column; align-items: flex-start; gap: 20px; }   /* title gets the full width, button sits under it */
.nbtn { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; background: rgba(26,26,26,.08); border: 1px solid rgba(26,26,26,.14); font: 500 14px/1 var(--sans); transition: background .2s; }
.ncard:hover .nbtn { background: rgba(26,26,26,.16); }
/* 1: plain yellow, a search bar running off the edge */
.ncard--search { background: #FFE45C; }
.ncard__search { display: flex; align-items: center; gap: 12px; margin: 18px -30px 0 40px; padding: 16px 22px; background: #fff; font: 500 clamp(20px, 2vw, 30px)/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.ncard__search svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.ncard__search i { width: 2px; height: 1em; background: var(--ink); animation: blink 1s steps(1) infinite; }
/* search "results": target margin per menu section, hanging under the search bar */
.ncard--search { justify-content: flex-start; } .ncard--search .ncard__foot { margin-top: auto; padding-top: 24px; }   /* search + results stay joined, footer at the bottom */
.ncard__results { margin: 0 -30px 0 40px; padding: 14px 22px 18px; background: #fff; border-top: 1px solid rgba(26,26,26,.08); display: grid; gap: 10px; }
.nres__head { font: 400 11px/1 var(--mono); letter-spacing: .5px; text-transform: uppercase; color: #8A8790; margin-bottom: 2px; }
.nres { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; align-items: center; gap: 14px; font-size: 14px; color: #4D4A55; }
.nres i { position: relative; height: 8px; background: linear-gradient(90deg, #4A32D6, #775CFF, #B57BFF) 0 0 / var(--p) 100% no-repeat, #F1EDFF; }
.nres i::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: var(--p); width: 2px; background: var(--ink); }
.nres b { font: 600 14px/1 var(--sans); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
@keyframes blink { 50% { opacity: 0; } }
/* 2: photo with a play button */
.ncard--photo { color: #fff; }
/* the photo sits lower so the title lands on the dark cabinets; its top edge fades into the card's own dark purple */
.ncard--photo { background: #1C1020; }
.ncard--photo img { position: absolute; inset: 14% 0 auto; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; z-index: -2; transition: transform .6s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%); mask-image: linear-gradient(180deg, transparent, #000 12%); }
.ncard--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,8,18,.72), rgba(14,8,18,.5) 30%, rgba(14,8,18,0) 55%, rgba(10,10,14,.4)); }
.ncard--photo:hover img { transform: scale(1.04); }
.ncard--photo small { color: rgba(255,255,255,.75); }
.ncard__foot--start { justify-content: flex-start; }
.nbtn--play { gap: 8px; padding-left: 12px; }   /* play icon lives inside the walkthrough button */
.nbtn--play svg { width: 14px; height: 14px; fill: currentColor; }
.nbtn--glass { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; backdrop-filter: blur(6px); }
.ncard--photo:hover .nbtn--glass { background: rgba(255,255,255,.28); }
/* 3: soft lavender with dish tiles */
.ncard--tiles { background: #EFEBFF; gap: 18px; }
/* portion card: one quiet white panel, two dishes, same row style as the supplier card */
.nportion { display: grid; background: #fff; border: 1px solid rgba(119,92,255,.16); }
.nportion > div { display: grid; gap: 6px; padding: 14px 18px; }
.nportion > div + div { border-top: 1px solid rgba(26,26,26,.07); }
.nportion .nquote__row em { color: #4A32D6; background: #EFEBFF; }
/* 5: mint with a single price-change line */
.ncard--supplier { background: #CFF5E4; gap: 18px; }
.nquote { display: grid; gap: 6px; padding: 16px 18px; background: #fff; border: 1px solid rgba(15,157,116,.18); }
.nquote__row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.nquote__row b { font-weight: 500; }
.nquote__row em { font-style: normal; font: 600 12.5px/1 var(--sans); color: #C41C16; background: #FDE4E2; padding: 5px 8px; }
.nquote__sub { font-size: 12.5px; color: #6B6870; }
/* note-card panels in the Price watch dashboard style: no outline, a soft shadow, round ingredient icons, 6px chips */
.nui { gap: 0; padding: 4px 16px; border: 0; background: #fff; box-shadow: 0 14px 30px -18px rgba(60,20,120,.4); }
.nui .uirow { padding: 11px 0; }
.nui .uirow small { white-space: normal; }
.nui__head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 9px; border-bottom: 1px solid #F1EFF5; }
.nui__head b { font: 600 14px/1 var(--sans); }
.nui__head span { font-size: 12px; color: #775CFF; font-weight: 500; }
.nui__head + .uirow { border-top: 0; }
/* the portion as a bar: solid is what's served now, the hatched end is what was trimmed off */
.pbar { display: block; height: 6px; margin-top: 7px; background: repeating-linear-gradient(-45deg, #C9C2EE 0 2px, transparent 2px 5px), #F5F3FB; }
.pbar i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #4A32D6, #B57BFF); }
.pbar--b i { background: linear-gradient(90deg, #2F6FD8, #8EC1FF); }
/* portions: the gram chip sits on the same line as its bar */
.nportion.nui > .uirow { grid-template-columns: 34px minmax(0, 1fr); }
.pline { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.pline .pbar { flex: 1; margin-top: 0; }
/* price bar: the old price is the solid part, the rise is the red hatched end */
.pbar--up { background: repeating-linear-gradient(-45deg, #E8524D 0 2px, transparent 2px 5px), #FDE4E2; }
.pbar--up i { background: #6B6870; }
/* margin bar under the dish: now vs the 68% target tick */
.nmargin { display: grid; gap: 7px; padding: 4px 0 14px; }
.nmargin__bar { position: relative; height: 8px; background: #F0EEF4; }
.nmargin__bar i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #E8524D, #C41C16); }
.nmargin__bar::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: var(--t); width: 2px; background: var(--ink); }
.nmargin__lbl { display: flex; justify-content: space-between; font-size: 12px; color: #8A8790; }
.nmargin__lbl s { color: #A9A6B2; }
.nmargin__lbl b { color: #C41C16; font-weight: 600; }
/* the old .nportion / .nquote padding rules must not reach the new rows */
.nportion.nui > .nui__head, .nquote.nui > .nui__head { display: flex; padding: 12px 0 9px; }
.nportion.nui > .uirow, .nquote.nui > .uirow { display: grid; gap: 12px; padding: 11px 0; }
.ncard__search, .ncard__results { box-shadow: 0 14px 30px -18px rgba(60,20,120,.4); }
.ncard__results { border-top-color: #F1EFF5; }
.nres i { border-radius: 0; background: linear-gradient(90deg, var(--b1, #4A32D6), var(--b2, #B57BFF)) 0 0 / var(--p) 100% no-repeat, #F0EEF4; }
.nres + .nres i { --b1: #0E7C6F; --b2: #5BE3A8; }   /* desserts in teal, so the two bars read apart */
.nres b { font-weight: 600; }
/* 4: brand purple with outlined plates */
.ncard--plates { background: #775CFF; color: #fff; justify-content: flex-end; }
.ncard--plates small { color: rgba(255,255,255,.75); }
.ncard__pattern { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 66%; fill: none; stroke: rgba(255,255,255,.42); stroke-width: .6; z-index: -1; transition: transform .6s ease;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }   /* staggered rows of single logo plates, fading out above the title */
.ncard--plates:hover .ncard__pattern { transform: translateY(-6px); }
.nbtn--light { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }
.ncard--plates:hover .nbtn--light { background: rgba(255,255,255,.28); }
@media (max-width: 860px) { .notes { padding: 64px 16px 72px; } .nbento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d" "e"; } .ncard { min-height: 300px; padding: 22px; } .ncard__search { margin: 12px -22px 0 0; padding: 16px 18px; } .ncard__results { margin: 0 -22px 0 0; padding: 12px 18px 16px; } .ncard__search svg { width: 24px; height: 24px; } .ncard__foot { flex-wrap: wrap; } }

/* 11 CTA */
/* closing CTA: copy on the left, a heatmap panel on the right holding Brasa's flat iron receipt */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--night); color: #fff; }
.cta__copy { padding: 112px 40px 112px clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; }
.cta__body { font-size: 16px; line-height: 1.5; color: #B3AAA0; }
.cta__btns { display: flex; gap: 12px; margin-top: 8px; }
.cta__stage { position: relative; isolation: isolate; overflow: hidden; min-height: 680px; display: grid; place-items: end start; padding: 32px; background: #2A1240; }   /* small landscape card in the bottom-left corner, the photo does the talking */
.cta__photo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover; object-position: 50% 50%; }   /* Brasa photo fills the right half, no UI on top */
/* interactive "Price my menu" card: add an invoice → read it → plates priced, with a scripted cursor like the hero */
.pm { width: min(400px, 100%); }
.pm__card { position: relative; color: var(--ink); background: #F6F5FA; border-radius: 26px; padding: 16px 16px 18px; min-height: 420px; display: flex; flex-direction: column;
  box-shadow: 0 0 0 6px rgba(255,255,255,.5), 0 0 0 1px rgba(20,10,60,.06), 0 40px 70px -24px rgba(20,10,60,.45); }
.pm__step { font-size: 12px; color: #8A8790; margin: 0 2px 4px; }
.pm__h { font: 600 24px/1.05 var(--display); letter-spacing: -.03em; margin: 0 2px 16px; }
.pm__drop { display: grid; place-items: center; gap: 8px; padding: 30px 16px; border: 1.5px dashed #C9C2EE; border-radius: 18px; background: #fff; color: #6B6870; font-size: 14px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.pm__drop svg { width: 30px; height: 30px; fill: none; stroke: #775CFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pm__drop:hover, .pm__drop.is-over { border-color: #775CFF; background: #F4F1FF; }
.pm__label { margin: 18px 2px 8px; font-size: 12px; color: #8A8790; }
.pm__file { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; background: #fff; border: 0; border-radius: 14px; font: inherit; text-align: left; cursor: grab; box-shadow: 0 1px 2px rgba(20,10,60,.06); transition: transform .9s cubic-bezier(.65,0,.25,1), box-shadow .3s, opacity .3s; }
.pm__file.is-flying { box-shadow: 0 18px 30px -12px rgba(20,10,60,.35); }
.pm__file .demo__ico, .pm__row .demo__ico { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
.pm__file b, .pm__row b { display: block; font-weight: 500; font-size: 14px; }
.pm__file small, .pm__row small { color: #8A8790; font-size: 12px; }
.pm__lines { display: grid; gap: 6px; }
.pm__line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px; background: #fff; border-radius: 12px; font-size: 13.5px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.pm__line.is-in { opacity: 1; transform: none; }
.pm__line em { font-style: normal; color: #0B7A43; font-weight: 600; font-size: 12.5px; }
.pm__bar { margin-top: auto; height: 6px; border-radius: 3px; background: #E7E3F5; overflow: hidden; }
.pm__bar i { display: block; height: 100%; width: 0; background: #775CFF; transition: width 1.8s linear; }
.pm__rows { display: grid; gap: 6px; }
.pm__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; background: #fff; border-radius: 14px; }
.pm__row > span:nth-child(2) { flex: 1; min-width: 0; }
.pm__m { font: 600 13px/1 var(--sans); white-space: nowrap; transition: color .3s; }
.pm__m.bad { color: #D3201A; } .pm__m.good { color: #0F9D58; }
.pm__fix { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; font-size: 13px; color: #4D4A55; }
.pm__fix b { color: var(--ink); font-weight: 600; }
.pm__btn { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #141414; color: #fff; font: 500 13px/1 var(--sans); cursor: pointer; transition: background .2s, transform .15s; }
.pm__btn:hover { background: #333; }
.pm__btn.is-pressed, .pm__file.is-pressed { transform: scale(.97); }
.pm__btn--ok { background: #DDF5E8; color: #0B7A43; cursor: default; }
.pm__again { margin-top: auto; padding-top: 14px; align-self: center; border: 0; background: none; font: 500 13px/1 var(--sans); color: #6B4FF0; cursor: pointer; }
.pm.is-auto .demo__cursor { opacity: 1; }
/* compact landscape version of the card (bottom-left of the steak photo) */
.pm { width: min(360px, 100%); }
.pm .pm__card { min-height: 0; height: 232px; padding: 12px 14px; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 4px rgba(255,255,255,.45), 0 0 0 1px rgba(20,10,60,.06), 0 30px 50px -20px rgba(20,10,60,.55); }
.pm .demo__chrome { gap: 5px; padding: 0 0 8px; }
.pm .demo__chrome i { width: 8px; height: 8px; }
.pm .pm__step { font-size: 10.5px; margin: 0 1px 2px; }
.pm .pm__h { font-size: 17px; margin: 0 1px 10px; }
.pm .pm__drop { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; font-size: 12.5px; }
.pm .pm__drop svg { width: 18px; height: 18px; }
.pm .pm__label { margin: 10px 1px 6px; font-size: 10.5px; }
.pm .pm__file, .pm .pm__row { gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; }
.pm .pm__file .demo__ico, .pm .pm__row .demo__ico { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.pm .pm__file b, .pm .pm__row b { font-size: 12.5px; line-height: 1.2; }
.pm .pm__file small, .pm .pm__row small { font-size: 10.5px; }
.pm .pm__rows, .pm .pm__lines { gap: 4px; }
.pm .pm__line { padding: 7px 10px; border-radius: 9px; font-size: 12px; }
.pm .pm__line em { font-size: 11.5px; }
.pm .pm__m { font-size: 12px; }
.pm .pm__fix { margin-top: 6px; padding: 6px 6px 6px 10px; border-radius: 10px; font-size: 11.5px; gap: 8px; }
.pm .pm__btn { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; font-size: 11.5px; }
.pm .pm__again { padding-top: 6px; font-size: 11px; }
.pm .pm__row { padding: 4px 10px 4px 4px; }
.pm .pm__row .demo__ico { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
.pm .pm__row small { display: none; }   /* one line per dish in the compact card */
.pm .pm__again { position: absolute; top: 10px; right: 14px; margin: 0; padding: 0; }   /* "Start again" sits in the card's top bar */

@media (max-width: 1279px) { .cta__body br { display: none; } }

/* 12 FAQ */
.faq__list { min-width: 0; }
.faq__title { border-bottom: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); transition: background-color .2s; }
.faq .cloche__lid { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.faq details:hover { background: var(--bg-hover); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 40px; font: 500 16px/1.4 var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary { padding-bottom: 10px; }
.faq summary .cloche { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: color .2s; }
.faq details:not([open]):hover .cloche__lid { transform: translateY(-1.5px) rotate(6deg); }
.faq details[open] .cloche { color: #775CFF; }
.faq details[open] .cloche__lid { transform: translate(1.5px, -4.5px) rotate(14deg); }
.faq details p { padding: 0 80px 24px 40px; color: var(--ink-2); font-size: 15px; max-width: 46em; }
summary:focus-visible { outline: 2px solid var(--paprika); outline-offset: -2px; }

/* 13 FOOTER */
.footer { background: var(--night); color: #B3AAA0; padding-top: 6px;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; }   /* serrated top edge, like the announcement bar */
/* footer: centred closing line, link columns, email row, legal row */
.footer > * { max-width: var(--frame); margin: 0 auto; }
.footer__cta { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 88px 24px 84px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__title { font: 500 clamp(40px, 5vw, 64px)/1 var(--display); letter-spacing: -.035em; color: #fff; }
.footer__cta p { max-width: 36em; font-size: 16px; color: #B3AAA0; }
@media (max-width: 860px) { .footer__cta p br { display: none; } }
.footer__cta .btn { margin-top: 6px; }
.btn--light { background: #fff; color: var(--ink); border: 1px solid #fff; }
.btn--light:hover { background: #775CFF; border-color: #775CFF; color: #fff; }
.footer__main { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px; padding: 56px 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__brand { display: grid; align-content: start; gap: 16px; }
.footer__brand p { max-width: 17em; font-size: 14px; color: #8E867E; }
.footer__col { display: grid; gap: 12px; align-content: start; font-size: 14px; color: #D8D0C6; }
.footer h4 { font: 500 11px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: #6F675F; margin-bottom: 6px; }
.footer a:hover { color: #fff; }
.footer__soc { display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
.footer__soc svg { width: 12px; height: 12px; opacity: .5; transition: transform .2s, opacity .2s; }
.footer__soc:hover svg { opacity: 1; transform: translate(2px, -2px); }
.footer__news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px) auto; align-items: center; gap: 12px; padding: 22px 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__news p { font: 500 17px/1.2 var(--sans); color: #fff; }
.footer__news input { height: 34px; padding: 0 12px; background: transparent; border: 1px solid rgba(255,255,255,.22); color: #fff; font: inherit; font-size: 14px; }
.footer__news input::placeholder { color: #8E867E; }
.footer__news input:focus { outline: 2px solid #775CFF; outline-offset: 1px; }
.footer__news .btn { height: 34px; padding: 0 14px; font-size: 14px; }   /* same size as the navbar button */
.footer__thanks { display: none; grid-column: 1 / -1; font-size: 13px; color: #8DEFC8; }
.footer__news.is-done .footer__thanks { display: block; }
/* closing band: a huge faint wordmark, the three plates rising out of the bottom edge, legal line on top */
.footer__mark { position: relative; overflow: hidden; padding: 56px 0 72px; }
.footer__word { display: block; width: calc(100% - 64px); height: 20vw; margin: 0 32px; }   /* edges line up with the legal row padding */
.footer__plates { overflow: visible; position: absolute; left: 50%; bottom: -14%; width: clamp(160px, 24vw, 340px); height: auto; transform: translateX(-50%); filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.footer__mark:hover .footer__plates { transform: translateX(-50%) translateY(-10px); }
.footer__legal { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 32px 24px; font-size: 13px; color: #8E867E; }
.footer__legal nav { display: flex; gap: 20px; }

/* reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 1180px) {
  .parts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part, .part:nth-child(4), .part:nth-child(5) { grid-column: span 1; }
  .part:nth-child(5) { grid-column: 1 / -1; }
  .part { min-height: 520px; }
}
@media (max-width: 1024px) {
  :root { --label: 180px; } .band__label { padding: 28px 16px; }
  .nav__links { gap: 20px; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { padding: 48px 32px; }
  .hero__panel { order: 0; min-height: 0; padding: 48px 24px; }
  .story { grid-template-columns: 280px minmax(0, 1fr); }
  .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 40px 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__news { grid-template-columns: minmax(0, 1fr) auto; padding: 20px 24px; }
  .footer__news p { grid-column: 1 / -1; }
  .footer__legal { flex-direction: column; align-items: flex-start; padding: 16px 20px 20px; gap: 8px; }
  .footer__mark { padding-top: 32px; min-height: 0; }
  .footer__word { margin: 0 20px 28px; width: calc(100% - 40px); }
  .footer__legal { position: static; border-top: 1px solid rgba(255,255,255,.1); }
  .footer__cta { padding: 64px 20px 60px; }
}
@media (max-width: 860px) {
  .nav__links, .nav__signin { display: none; }
  .nav__inner { gap: 16px; }
  .nav__actions { margin-left: auto; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__links { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; margin: 0; background: var(--bg); padding: 8px 24px 24px; gap: 0; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink); }
  .nav.is-open .nav__toggle span:first-child { transform: translateY(3.3px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { transform: translateY(-3.3px) rotate(-45deg); }
  .band--labelled { grid-template-columns: minmax(0, 1fr); }
  .band__label { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 24px; justify-content: flex-start; }
  .band__title, .band__body--pad { padding: 40px 24px; }
  .question, .kitchens, .ways, .cta { grid-template-columns: minmax(0, 1fr); }
  .question__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .kit__stage { min-height: 460px; padding: 28px 16px; }

  .question__copy { padding: 36px 24px; }
  .week__pin, .week--static .week__pin { height: auto; max-height: none; padding: 40px 24px 48px; }
  .week__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .rail, .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); --gap: 14px; }
  .rail i:nth-of-type(n+3) { display: none; }
  .tickets { row-gap: 18px; }
  .chart { min-height: 260px; }
  .parts { padding: 64px 16px 72px; }
  .parts__grid { grid-template-columns: minmax(0, 1fr); }
  .part:nth-child(5) { grid-column: auto; }
  .watch { padding: 72px 16px 0; }
  .watch__lines { display: none; }
  .tabs--dark [role=tab] { min-width: 0; flex: 1; padding: 12px 10px; }
  .watch__grid { grid-template-columns: minmax(0, 1fr); }
  .wcard { padding: 24px; min-height: 0; }
  .wui { align-self: stretch; width: auto; }
  .month { padding: 40px 16px; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__photo { grid-row: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .story__photo img { object-position: 50% 68%; }
  .story__main { padding: 24px; }
  .story__foot { grid-column: auto; padding: 16px 24px; }
  .row summary { padding: 22px 24px; }
  .row__open { padding: 0 24px 20px; }
  .cta__copy { padding: 64px 24px; }
  .cta__stage { min-height: 440px; }
  .faq summary { padding: 20px 24px; }
  .faq details p { padding: 0 24px 22px; }
}
@media (max-width: 600px) {
  .rail, .tickets { grid-template-columns: minmax(0, 1fr); }
  .rail i:nth-of-type(n+2) { display: none; }
  .chart__days { font-size: 9px; letter-spacing: 0; }
  .chart__evt { display: none; }
  .chart__gap { top: 42%; left: 62%; }
  .nav__inner { padding: 0 16px; }
  .announce__inner { font-size: 12px; }
  .announce__long { display: none; }
  .announce__short { display: inline; }
  .hero__copy { padding: 36px 16px 40px; }
  .hero__title br { display: none; }
  .spacer { height: 28px; }
  .hero__ctas { gap: 10px; }
  .hero__award { padding-top: 12px; }
  .hero__award { --wing: 24px; }
  .hero__award-wing { height: 54px; }
  .hero__award b { font-size: 11px; }
  .rating { flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }
  .chip { font-size: 10px; padding: 7px 8px; }
  .hero__panel { padding: 24px 12px 28px; }
  .demo__card { padding: 12px; min-height: 0; border-radius: 0; }
  .demo__chat { max-width: 180px; font-size: 13px; padding: 8px 13px; }
  .demo__h { font-size: 24px; }
  .supplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-grid li:nth-child(5n) { border-right: 1px solid var(--line); }
  .supplier-grid li:nth-child(2n) { border-right: 0; }
  .supplier-grid li:nth-last-child(-n+5) { border-bottom: 1px solid var(--line); }
  .supplier-grid li:nth-last-child(-n+2) { border-bottom: 0; }
  .part__copy { padding: 24px 22px 0; }
  .part__stage { padding: 44px 16px 24px; min-height: 300px; }
  .wcard h3 { font-size: 26px; }
  .story__stats { grid-template-columns: minmax(0, 1fr); }
  .skpi { padding: 16px; }
  .skpi > b { font-size: 30px; }
  .way { border: 0 !important; }
  .way--blank { display: none; }
  .way--blank:nth-child(8), .way--blank:nth-child(9) { display: flex; order: 3; }
  .way:nth-child(7) { order: 0; }
  .way--core { order: 1; }
  .way:nth-child(10), .way:nth-child(12) { order: 2; }
  .way { padding: 10px; font-size: 12px; }
  .way__ico { font-size: 18px; }
  .way--core .logo__mark { width: 32px; height: 32px; }
  .cta__stage { min-height: 460px; padding: 0; }
  .cta__photo { object-position: 50% 35%; }
  .cta__btns { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* short laptop screens: keep the hero inside the first screen */
@media (min-width: 1025px) and (max-height: 800px) { .hero__panel { padding-block: 16px; } .hero__copy { padding-top: 32px; padding-bottom: 32px; } .demo__card { min-height: 520px; padding: 14px; } .demo__h { font-size: 24px; margin-bottom: 10px; } .demo__photo { height: 160px; } .demo__ico { width: 40px; height: 40px; font-size: 21px; } }