/* The offer pages (ohelloo.com/builds/reorder-reminders, /appointment-reminder-texts, /for-caterers/quote-builder and
   the service pages): eight parts in the same order on every page. Loaded after pages.css, so the type, top bar and
   footer stay the site's own. Built from the approved mock-up in design/offer-pages.html. */
.offer{--track:#E9E5EF;--body:#4A3F57;--band:#F7F2FC;--good:#2F7D4F;--good-soft:#E3F4EA}
/* 1 the answer: white and quiet (Omar picked the mock-up's look over the purple top): a small purple label, the big
   line, the answer, the price, two buttons and the proof, beside a real screen in a soft glowing frame. */
.ohero{padding-top:0.5rem;padding-bottom:1.5rem}
.ohero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:3rem;align-items:center;padding-top:1.5rem}
@media (max-width:980px){.ohero-in{grid-template-columns:minmax(0,1fr);gap:2rem}}
.okick{font-size:0.875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0}
.odisplay{font:800 clamp(2.25rem,4.2vw,3.5rem)/1.08 "Inter",sans-serif;letter-spacing:-.025em;margin:0.75rem 0 0;text-wrap:balance}
.oanswer{font-size:1.1875rem;color:var(--body);margin:1rem 0 0;max-width:52ch}
.pricel{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.375rem 0.875rem;margin:1.375rem 0 0}
.pricel b{font-size:1.875rem;font-weight:800;letter-spacing:-.02em}
.pricel span{font-size:1rem;color:var(--muted)}
.octas{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;margin-top:1.375rem}
.obtn{display:inline-flex;align-items:center;text-decoration:none;font-weight:700;font-size:1.0625rem;padding:0.875rem 1.375rem;border-radius:0.875rem;border:1.5px solid var(--night);background:#fff;color:var(--night);transition:transform .2s,box-shadow .2s}
.obtn:hover{transform:translateY(-2px);box-shadow:0 0.625rem 1.5rem rgba(34,19,47,.18)}
.obtn.dark{background:var(--night);color:#fff}
.offer .proof{display:flex;align-items:center;gap:0.5rem;margin:1.125rem 0 0;font-size:0.9375rem;color:var(--muted)}
.offer .proof::before{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:#2E9E5B;box-shadow:0 0 0 3px #D6F0E0;flex:none}
/* the screen beside it: a real Tandoco screen, or for the service pages the drawn phone and cards on a lilac stage */
.oglow{border-radius:1.25rem;border:1px solid #E4D8F1;background:#fff;box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(205,179,232,.16),0 0 26px rgba(155,107,206,.22),0 22px 40px -22px rgba(91,42,134,.38);overflow:hidden}
.oshot{margin:0}
.oshot img{display:block;width:100%;height:auto}
.oshot.phone{max-width:21rem;margin-inline:auto;border-radius:2rem}
.ostage{background:radial-gradient(70% 80% at 50% 30%,#F4EEFA,#EDE4F7 80%);padding:2.25rem 1.5rem 0;display:flex;justify-content:center}
.ostage .visual{margin:0;padding:0;align-items:flex-end}
.ostage .visual .side{padding-bottom:2.5rem}
@media (max-width:640px){.ostage{padding:1.5rem 1rem 0}.ostage .visual{flex-direction:column;align-items:center}.ostage .visual .side{padding-bottom:1rem}}
/* the rest of the page stays white and close together, like the mock-up */
section.offer{padding:2.75rem 0}
.offer .sec-h{margin-bottom:1.25rem}
.offer .sec-h h2{font-size:clamp(1.625rem,2.8vw,2.125rem)}
.offer .sec-h h2::before{display:none}
.offer .sec-h p{font-size:1.0625rem;margin-top:0.5rem}

/* 2 the problem, then the answer: two cards with a small looping picture each. Nothing moves for less-motion settings. */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
@media (max-width:860px){.pair{grid-template-columns:minmax(0,1fr)}}
.pcard{border-radius:1.5rem;padding:0 0.375rem 0.375rem;background:#ECE8F1;display:grid;grid-template-rows:auto 1fr}
.pcard > span{display:block;text-align:center;font-size:0.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0.75rem 0 0.6875rem}
.pcard.sol{background:var(--accent);box-shadow:0 0 0 5px rgba(185,150,230,.22),0 0 34px rgba(155,107,206,.32),0 26px 46px -22px rgba(91,42,134,.45)}
.pcard.sol > span{color:#fff}
.pin{background:#fff;border-radius:1.125rem;padding:1.5rem 1.5rem 1.625rem;display:grid;gap:1.125rem;align-content:start}
.pin h3{font-size:clamp(1.375rem,2.3vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.pin p{margin:0;font-size:1rem;color:var(--body)}
.vz{min-height:13.5rem;border-radius:1rem;background:radial-gradient(60% 70% at 50% 45%,#F4EEFA,#fff 75%);display:grid;align-content:center;gap:0.625rem;padding:1rem 7%}
.pcard:not(.sol) .vz{background:radial-gradient(60% 70% at 50% 45%,#F6F3F8,#fff 75%)}
.vr{display:flex;justify-content:space-between;align-items:center;gap:0.625rem;background:#fff;border:1px solid var(--line);border-radius:0.75rem;padding:0.625rem 0.875rem;font-size:0.875rem;font-weight:600;line-height:1.35;box-shadow:0 6px 16px -10px rgba(34,19,47,.25)}
.vr small{font-weight:500;color:var(--muted)}
.vr > small{margin-left:0.375rem;margin-right:auto}
.vr.dash{border-style:dashed;box-shadow:none;color:var(--muted)}
/* a timeline row: the time on the left, what happened beside it */
.vr.tl2{justify-content:flex-start;align-items:baseline}
.vr.tl2 time{flex:none;min-width:4.25rem;font-size:0.75rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.vr.tl2 span{font-weight:500}
.st{position:relative;display:inline-grid;font-size:0.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.st > i{grid-area:1/1;font-style:normal;justify-self:end}
.ok{color:var(--good)}.amb{color:#B7791F}.bad{color:#C0392B}.mut{color:var(--muted)}
.bub{max-width:82%;padding:0.625rem 0.8125rem;border-radius:0.875rem;font-size:0.875rem;line-height:1.35;background:#EFEAF5;color:var(--ink);border-top-left-radius:0.25rem}
.bub.me{justify-self:end;background:var(--accent);color:#fff;border-radius:0.875rem;border-top-right-radius:0.25rem}
.chipok,.chipbad{justify-self:center;display:inline-flex;align-items:center;gap:0.5rem;border-radius:999px;padding:0.4375rem 0.875rem;font-size:0.8125rem;font-weight:700}
.chipok{background:var(--good-soft);color:var(--good);border:1px solid #CBE8D6}
.chipok::before{content:"✓";width:1.125rem;height:1.125rem;border-radius:50%;background:var(--good);color:#fff;display:grid;place-items:center;font-size:0.6875rem}
.chipbad{background:#FBECEA;color:#A93226;border:1px solid #F2D2CD}
.big{justify-self:center;font-size:2rem;font-weight:800;letter-spacing:-.03em}
.spin{display:inline-block;width:0.6875rem;height:0.6875rem;border-radius:50%;border:2px solid #E0A526;border-right-color:transparent;vertical-align:-1px;margin-right:0.375rem;animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
/* the loop: pieces appear one after another, hold, then clear for the next round */
.seq{animation:seqIn 7s ease-in-out infinite both;animation-delay:var(--d,0s)}
@keyframes seqIn{0%{opacity:0;transform:translateY(8px)}7%{opacity:1;transform:none}82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
.lapse{animation:lapse 7s ease-in-out infinite}
@keyframes lapse{0%,35%{opacity:1}55%,88%{opacity:.35}100%{opacity:1}}
.swA{animation:swA 7s ease-in-out infinite}.swB{animation:swB 7s ease-in-out infinite}
@keyframes swA{0%,38%{opacity:1}46%,88%{opacity:0}96%,100%{opacity:1}}
@keyframes swB{0%,38%{opacity:0}46%,88%{opacity:1}96%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.seq,.lapse,.swA,.swB,.spin{animation:none !important}.swA{opacity:0}.swB{opacity:1}}

/* 3 see it working: one take with its chapters under it, or the setup steps for pages without a take */
.film{display:grid;gap:0.75rem}
.film-still{border-radius:1rem;overflow:hidden;border:1px solid #E4D8F1}
.film-still img{display:block;width:100%;height:auto}
.film ol.chap{margin:0;padding-left:1.25rem;display:grid;gap:0.25rem;color:var(--body);font-size:1rem}
.ctrl .segs{display:flex;flex:1;gap:0.875rem;min-width:0}
.sg{all:unset;cursor:pointer;box-sizing:border-box;display:grid;gap:0.4375rem;min-width:0;flex:1 1 0;padding:2px 0;text-align:left;align-content:start;justify-items:stretch}
.sg i{display:block;height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.sg i b{display:block;height:100%;width:0;background:var(--accent);border-radius:99px}
.sg span{font-size:0.9375rem;font-weight:700;line-height:1.3;color:var(--muted);transition:color .25s}
.sg span small{display:block;margin-top:2px;font-weight:500;font-size:0.875rem;line-height:1.35;color:var(--muted)}
.sg[aria-current="true"] span{color:var(--ink)}
.sg[aria-current="true"] span small{color:var(--body)}
.sg:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (max-width:620px){.ctrl .segs{flex-wrap:wrap;gap:0.75rem}.sg{flex:1 1 40%}.sg span{font-size:0.8125rem}.sg span small{font-size:0.75rem}}
.osteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0.875rem;counter-reset:s}
.osteps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:1.125rem;padding:1.125rem 1.25rem 1.25rem;display:grid;gap:0.625rem;align-content:start;font-size:1rem;color:var(--body)}
.osteps li::before{content:counter(s);width:2.125rem;height:2.125rem;border-radius:0.625rem;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:0.9375rem}
.osteps li:first-child::before{background:var(--accent);color:#fff}

/* 4 made for your business */
.ochips{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0;padding:0;list-style:none}
.ochips li > *{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5625rem 0.875rem;border-radius:0.75rem;background:#fff;border:1px solid var(--line);font-size:1rem;font-weight:600;color:var(--ink);text-decoration:none}
.ochips a:hover{border-color:#B996E6;color:var(--accent)}
.ochips .on{border:1.5px solid #B996E6;background:var(--band);box-shadow:0 0 0 3px rgba(185,150,230,.18)}
.fit{margin:1rem 0 0;font-size:1.0625rem;color:var(--body);max-width:70ch}

/* 5 works with: the apps drift left to right, pause under the pointer, and wrap still for less motion */
.rail{position:relative;overflow:hidden;padding:0.375rem 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rail-in{display:flex;gap:2.5rem;width:max-content;animation:railR 38s linear infinite}
.rail:hover .rail-in{animation-play-state:paused}
@keyframes railR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.logo{display:inline-flex;align-items:center;gap:0.5625rem;padding:0.5rem 0;font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.logo img{width:1.75rem;height:1.75rem;object-fit:contain}
.logo .mk{width:1.625rem;height:1.625rem;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.rail{-webkit-mask:none;mask:none}.rail-in{animation:none;flex-wrap:wrap;width:auto}.rail-in .dup{display:none}}
.applegend{font-size:0.9375rem;color:var(--muted);margin:0.75rem 0 0}

/* 6 the price */
.ocard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.25rem 2rem;align-items:center;border:1px solid #E4D8F1;background:linear-gradient(180deg,#FFFFFF,#F6F2FA);border-radius:1.5rem;padding:1.75rem 2rem;box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(205,179,232,.16),0 0 26px rgba(155,107,206,.22),0 22px 40px -22px rgba(91,42,134,.38)}
@media (max-width:760px){.ocard{grid-template-columns:minmax(0,1fr);padding:1.5rem 1.25rem}}
.ocard .amt{font-size:3rem;font-weight:800;letter-spacing:-.035em;line-height:1;margin:0}
.ocard .amt small{font-size:1.0625rem;font-weight:600;color:var(--muted);letter-spacing:0}
.ocard .pfull{margin:0.5rem 0 0;font-weight:600;color:var(--ink)}
.ocard ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:0.5rem;font-size:1rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.ocard li{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:0.625rem}
.ocard li::before{content:"";width:1.25rem;height:1.25rem;margin-top:0.1875rem;border-radius:99px;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%235B2A86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/0.9375rem no-repeat}
.ocard .alt{font-size:0.9375rem;color:var(--muted);margin:1rem 0 0}
.ocard .alt + .alt{margin-top:0.5rem}
.ocard .time{display:flex;gap:0.5rem;align-items:center;margin:1rem 0 0;font-size:0.9375rem;color:var(--body)}
.ocard .time svg{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ocard .go{display:grid;gap:0.5rem;justify-items:center}
.pill.dark{background:var(--night);border-color:var(--night);color:#fff}

.vz .ok,.vz .bad{font-size:inherit;font-weight:inherit}
/* the film (a short take on one clock): everything inside the stage is sized in cqw so it scales with the stage */
.stage{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#fff;border:1px solid #E4D8F1;container-type:inline-size;
  box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(205,179,232,.16),0 0 26px rgba(155,107,206,.22),0 22px 40px -22px rgba(91,42,134,.38)}
.stage .lay{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.stage .lay.on{opacity:1}
.stage .lay video,.stage .lay>img{width:100%;height:100%;object-fit:cover;display:block}
.ctrl{display:flex;align-items:flex-start;gap:10px}
.ctrl>button{all:unset;cursor:pointer;width:34px;height:34px;border-radius:10px;background:#22132F;color:#fff;display:grid;place-items:center;flex:none}
.ctrl>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctrl svg{width:15px;height:15px;fill:currentColor}
.ctrl>small{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.stagewrap{display:grid;gap:10px;min-width:0}
.filmnote{font-size:0.875rem;color:var(--muted);margin:0.25rem 0 0}
/* the pointer we draw for the parts that aren't recordings */
.stage .cur{position:absolute;z-index:9;left:0;top:0;width:2.1cqw;height:auto;opacity:0;transition:opacity .25s;pointer-events:none;filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.35))}
.stage .cur.on{opacity:1}
.stage .ripple{position:absolute;z-index:8;width:4cqw;height:4cqw;margin:-2cqw 0 0 -2cqw;border-radius:50%;border:.3cqw solid rgba(91,42,134,.7);opacity:0;pointer-events:none}
.stage .ripple.go{animation:rip .6s ease-out}
@keyframes rip{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.6)}}
/* the send: a small composer on Priya's page, in the style of Tandoco's own tools */
.stage .fcomp{position:absolute;left:67.6%;top:46.5%;width:30.5%;background:#fff;border:1px solid #E3E1EA;border-radius:1cqw;padding:1.3cqw 1.4cqw;display:grid;gap:.8cqw;font-size:1.15cqw;color:#1D1A2F;
  box-shadow:0 1.5cqw 3cqw -1.2cqw rgba(20,15,50,.35);opacity:0;transform:translateY(1cqw);transition:opacity .3s,transform .3s}
.stage .fcomp.on{opacity:1;transform:none}
.stage .fcomp b{font-size:1.3cqw}
.stage .fcomp .crow{display:flex;justify-content:space-between;gap:1cqw;background:#F6F5F9;border-radius:.6cqw;padding:.7cqw .9cqw}
.stage .fcomp .crow span{color:#6B6880}
.stage .fcomp .offer{background:#FBF4DC;color:#5A4300;font-weight:700}
.stage .fcomp .prev{color:#4A4760;line-height:1.35}
.stage .fcomp .send{justify-self:end;background:#1F1A6B;color:#fff;font-weight:700;border-radius:.7cqw;padding:.7cqw 1.6cqw}
.stage .fcomp.sent .send{background:#2F7D4F}
.stage .newrow{position:absolute;left:68.6%;top:54.4%;width:28.6%;background:#F3EFFB;border-left:.35cqw solid #5B2A86;border-radius:.5cqw;padding:.7cqw 1cqw;font-size:1.05cqw;color:#1D1A2F;
  opacity:0;transform:translateY(-.8cqw);transition:opacity .35s,transform .35s}
.stage .newrow.on{opacity:1;transform:none}
.stage .newrow small{display:block;font-size:.85cqw;font-weight:700;letter-spacing:.04em;color:#6B6880}
/* the email Priya gets: Tandoco's email layout, with the offer */
.stage .mail{position:absolute;inset:0;background:#EEF0F4;display:grid;grid-template-columns:26% 1fr;font-family:Inter,system-ui,sans-serif}
.stage .inbox{background:#F8F9FB;border-right:1px solid #E3E6EC;padding:2cqw 1.4cqw;display:grid;gap:.4cqw;align-content:start}
.stage .inbox h5{margin:0 0 .8cqw;font-size:1.5cqw}
.stage .mi{padding:1cqw;border-radius:.6cqw;font-size:1.05cqw;color:#59606B;display:grid;gap:.2cqw}
.stage .mi b{color:#1F2430;font-size:1.15cqw}
.stage .mi.on{background:#E7E9FB;box-shadow:inset .3cqw 0 0 #3B37C8;color:#1F2430}
.stage .read{padding:2cqw 4cqw;display:grid;align-content:start;gap:1.2cqw;overflow:hidden}
.stage .read h6{margin:0;font-size:2.2cqw;font-weight:700;color:#1F2430}
.stage .from{display:flex;gap:1cqw;align-items:center;font-size:1.05cqw;color:#59606B}
.stage .from i{width:3cqw;height:3cqw;border-radius:50%;background:#1F1A6B;color:#E8C46A;display:grid;place-items:center;font-style:italic;font-weight:700;font-size:1.5cqw;font-family:Georgia,serif}
.stage .tmail{background:#fff;border-radius:1.2cqw;padding:2.2cqw 2.6cqw;display:grid;gap:1.3cqw;max-width:62%;justify-self:center;width:100%;color:#1F1A6B;box-shadow:0 .5cqw 2cqw -1cqw rgba(0,0,0,.15)}
.stage .tmail p{font-size:1.25cqw;margin:0}
.stage .tmail .kick{font-size:.95cqw;font-weight:700;letter-spacing:.12em;color:#B8892B;text-transform:uppercase}
.stage .tdeal{background:#1F1A6B;color:#fff;border-radius:1cqw;padding:1.6cqw;text-align:center;display:grid;gap:.4cqw}
.stage .tdeal small{font-size:.9cqw;letter-spacing:.14em;color:#E8C46A;font-weight:700}
.stage .tdeal strong{font-size:2.6cqw;letter-spacing:-.02em}
.stage .tdeal em{font-family:Georgia,serif;font-size:1.1cqw;color:#D9D6F2}
.stage .tbtn{justify-self:center;background:#1F1A6B;color:#fff;font-weight:700;font-size:1.25cqw;border-radius:.8cqw;padding:1cqw 2.2cqw}
.stage .tsign{font-family:Georgia,serif;font-style:italic;font-size:1.3cqw;color:#1F1A6B}
/* the end: the order placed */
.stage .done{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);background:#fff;border-radius:1.4cqw;padding:2.4cqw 3cqw;display:grid;gap:.8cqw;justify-items:center;text-align:center;
  box-shadow:0 0 0 .5cqw rgba(185,150,230,.25),0 2cqw 5cqw -1.5cqw rgba(20,15,50,.45);opacity:0;transition:opacity .35s,transform .35s;min-width:34%}
.stage .done.on{opacity:1;transform:translate(-50%,-50%)}
.stage .done i{width:4.4cqw;height:4.4cqw;border-radius:50%;background:#2F7D4F;color:#fff;display:grid;place-items:center;font-style:normal;font-size:2.2cqw;font-weight:800}
.stage .done b{font-size:2cqw;color:#1D1A2F}
.stage .done span{font-size:1.25cqw;color:#5A5770}
.stage .dim{position:absolute;inset:0;background:rgba(20,15,40,.28);opacity:0;transition:opacity .35s}
.stage .dim.on{opacity:1}
/* reminder texts: Maya's phone (the real recording) beside tomorrow's route, where each reply lands as a tag */
.stage .duo{position:absolute;inset:0;background:linear-gradient(135deg,#F4EFFA,#EDE4F7);display:flex;align-items:center;gap:4.5cqw;padding:0 5cqw 0 9cqw}
.stage .duo .ph{flex:none;height:92%;aspect-ratio:402/874;border-radius:2.6cqw;overflow:hidden;background:#fff;box-shadow:0 0 0 .5cqw #1D1A2F,0 2cqw 4cqw -1.5cqw rgba(20,15,50,.5)}
.stage .duo .ph video,.stage .duo .ph img{width:100%;height:100%;object-fit:cover;display:block}
.stage .mani{flex:1;background:#fff;border-radius:1.4cqw;padding:2.2cqw 2.4cqw;display:grid;gap:1cqw;color:#1F1A6B;font-family:Inter,system-ui,sans-serif;box-shadow:0 1.5cqw 3cqw -1.5cqw rgba(20,15,50,.3)}
.stage .mani small{font-size:1cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B8892B}
.stage .mani h6{margin:0;font-size:2.1cqw;letter-spacing:-.01em}
.stage .mani .msub{font-size:1.2cqw;color:#6B6880;margin-top:-.6cqw}
.stage .stop{display:flex;align-items:center;gap:1cqw;padding:1cqw 1.1cqw;border-radius:.8cqw;background:#F7F5FB;font-size:1.25cqw;transition:background .3s}
.stage .stop b{font-weight:700}
.stage .stop span{color:#6B6880;font-size:1.1cqw}
.stage .stop em{margin-left:auto;font-style:normal;font-weight:700;font-size:1.05cqw;padding:.35cqw .9cqw;border-radius:99px;background:#ECEAF2;color:#6B6880;white-space:nowrap;transition:background .3s,color .3s}
.stage .stop.hit{background:#EEF8F1}
.stage .mani .tally{font-size:1.15cqw;color:#4A4760;border-top:1px solid #ECEAF2;padding-top:1cqw}
.stage .mani .tally b{color:#1F1A6B}
/* the driver view: Tandoco's own driver screen (copied from its styles), on a phone over the dispatch board */
.stage .dphone{position:absolute;right:7%;top:4%;height:92%;aspect-ratio:402/874;border-radius:2.6cqw;overflow:hidden;background:#fff;
  box-shadow:0 0 0 .5cqw #1D1A2F,0 2cqw 4cqw -1.5cqw rgba(20,15,50,.55);opacity:0;transform:translateY(2cqw);transition:opacity .4s,transform .4s;
  font-family:Inter,system-ui,sans-serif;color:#2A2838;padding:3.2cqw 1.5cqw 1.5cqw;display:grid;gap:1cqw;align-content:start}
.stage .dphone.on{opacity:1;transform:none}
.stage .dh{border-bottom:1px solid #E5E3DA;padding-bottom:.7cqw;display:grid;gap:.15cqw}
.stage .dh b{font-size:1.15cqw;color:#1B1A6B}
.stage .dh span{font-size:.95cqw;color:#76748A}
.stage .dcur{background:rgba(200,169,110,.10);border:1px solid rgba(200,169,110,.40);border-radius:1cqw;padding:1cqw;display:grid;gap:.45cqw}
.stage .dcur small{font-size:.8cqw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9A7A3A}
.stage .dcur .nm{font-size:1.35cqw;font-weight:700;color:#1B1A6B;display:flex;gap:.5cqw;align-items:center;flex-wrap:wrap}
.stage .dcur .ad{font-size:1cqw;color:#4A4760}
.stage .dcur .eta{font-size:.95cqw;color:#76748A}
.stage .dcur .box{font-size:.9cqw;color:#4A4760;background:#fff;border-radius:.6cqw;padding:.5cqw .7cqw}
.stage .dbtns{display:grid;grid-template-columns:1fr 1fr;gap:.5cqw}
.stage .dbtns span{font-size:.95cqw;font-weight:600;text-align:center;border-radius:.6cqw;padding:.65cqw .3cqw;border:1px solid #E5E3DA;background:#fff;color:#1B1A6B;white-space:nowrap}
.stage .dbtns .pri{background:#1B1A6B;border-color:#1B1A6B;color:#fff}
.stage .dlist{display:grid;gap:.1cqw}
.stage .dlist h4{margin:0 0 .3cqw;font-size:.85cqw;letter-spacing:.1em;text-transform:uppercase;color:#76748A}
.stage .dstop{display:grid;grid-template-columns:1.4cqw 1fr auto;gap:.6cqw;align-items:start;padding:.55cqw 0;border-top:1px solid #F0EEE7;font-size:.95cqw}
.stage .dstop i{font-style:normal;color:#76748A}
.stage .dstop b{display:flex;gap:.4cqw;align-items:center;flex-wrap:wrap;color:#1B1A6B;font-size:1.05cqw}
.stage .dstop span{display:block;color:#76748A}
.stage .dstop em{font-style:normal;color:#4A4760}
.stage .dstop.dn{opacity:.45}
.stage .dstop.dn b::after{content:'delivered ✓';font-size:.8cqw;color:#356040;font-weight:600}
.stage .cf{display:inline-block;padding:.15cqw .55cqw;border-radius:99px;font-size:.75cqw;text-transform:uppercase;letter-spacing:.06em;font-weight:600;border:1px dashed transparent}
.stage .cf.home{background:rgba(76,143,93,.14);color:#356040}
.stage .cf.drop{background:rgba(27,26,107,.10);color:#1B1A6B}
.stage .cf.none{background:rgba(110,112,136,.10);color:#6E7088;border-color:rgba(110,112,136,.35)}
/* catering: the deposit, then the job on the caterer's calendar (drawn in Tandoco's colours) */
.stage .pay,.stage .fcal{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);background:#fff;border-radius:1.4cqw;padding:2.4cqw 2.8cqw;display:grid;gap:1cqw;color:#1F1A6B;
  box-shadow:0 0 0 .5cqw rgba(185,150,230,.25),0 2cqw 5cqw -1.5cqw rgba(20,15,50,.45);opacity:0;transition:opacity .35s,transform .35s;width:40%}
.stage .pay.on,.stage .fcal.on{opacity:1;transform:translate(-50%,-50%)}
.stage .pay small,.stage .fcal small{font-size:1cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B8892B}
.stage .pay strong{font-size:3.4cqw;letter-spacing:-.02em;line-height:1}
.stage .pay .ln{display:flex;justify-content:space-between;font-size:1.2cqw;color:#4A4760}
.stage .pay .fpcard{display:flex;justify-content:space-between;font-size:1.2cqw;border:1px solid #E3E1EA;border-radius:.7cqw;padding:.8cqw 1cqw;color:#1D1A2F}
.stage .pay .go{background:#1F1A6B;color:#fff;font-weight:700;font-size:1.3cqw;text-align:center;border-radius:.8cqw;padding:1cqw;transition:background .3s}
.stage .pay.paid .go{background:#2F7D4F}
.stage .fcal{width:46%;gap:1.2cqw}
.stage .fcal h6{margin:0;font-size:2cqw}
.stage .fcal .fslot{display:grid;grid-template-columns:6cqw 1fr;gap:1cqw;font-size:1.1cqw;color:#8A8799;align-items:start}
.stage .fcal .ev{background:#1F1A6B;color:#fff;border-radius:.8cqw;padding:1.1cqw 1.3cqw;display:grid;gap:.35cqw;border-left:.5cqw solid #E8C46A}
.stage .fcal .ev b{font-size:1.4cqw}
.stage .fcal .ev span{font-size:1.1cqw;color:#D9D6F2}
.stage .fcal .tags{display:flex;gap:.6cqw;margin-top:.3cqw}
.stage .fcal .tags i{font-style:normal;font-size:1cqw;font-weight:700;background:rgba(255,255,255,.14);border-radius:99px;padding:.3cqw .8cqw;color:#fff}


.faq .ans{margin:0 0 1.125rem;font-size:1.0625rem}
.faq .ans p{margin:0 0 0.5rem}
.faq .ans ul,.faq .ans ol{margin:0 0 0.75rem;padding-left:1.25rem;display:grid;gap:0.25rem}