/* Menty website v5, product page (11 Oct 2026). Loaded after site.css and home.css; layout for the eight parts only.
   Colour, type, cards, figures and the loop chapters come from home.css, so the two pages stay one system. */

/* hero + jump links */
.p5-hero{padding:56px 0 24px;text-align:center}
.p5-hero h1{font-size:clamp(44px,6vw,76px);letter-spacing:-.045em;line-height:1;margin-top:6px}
.p5-hero .lede{margin:18px auto 0;max-width:38em}
.jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.jump a{font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);border:1px solid var(--card-line);background:#fff;border-radius:99px;padding:8px 14px}
.jump a:hover{border-color:var(--o);color:var(--o-txt)}

/* parts */
.part{padding-block:48px}
.part.alt2{background:#FCFAF7}
.part:not(.alt2) + .part:not(.alt2){padding-top:8px}
.ph{max-width:760px;margin:0 auto 30px;text-align:center}
.ph-k{font-size:15px;font-weight:600;color:var(--o-txt)}
.ph-h{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.04em;line-height:1.04;font-weight:600;margin-top:8px}
.ph-l{color:var(--ink2);font-size:17px;line-height:1.55;margin-top:14px}

.rules{display:grid;gap:14px;margin-top:18px}
.rule{border:1px solid var(--card-line);border-radius:20px;background:var(--card);padding:22px}
.rule svg{width:30px;height:30px;color:var(--o-txt)}
.rule h3{font-size:19px;letter-spacing:-.02em;margin:12px 0 6px}
.rule p{color:var(--ink2);font-size:14.5px;line-height:1.55}

/* 2 · guests: seven steps */
.steps7{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.st{border:1px solid var(--card-line);border-radius:22px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.st-vis{height:266px;overflow:hidden;display:flex;justify-content:center;align-items:center;padding:16px 0;box-sizing:border-box;background:radial-gradient(240px 160px at 50% 100%,#FBD9CC,transparent 70%),linear-gradient(180deg,#F6F4F0,#EFECE6)}
.st-vis img{height:234px;width:auto;align-self:center}
.st-txt{padding:18px 20px 22px}
.st-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gloss);color:#fff;font-size:13px;font-weight:600}
.st h3{font-size:18px;letter-spacing:-.02em;line-height:1.2;margin:10px 0 6px}
.st p{font-size:14px;color:var(--ink2);line-height:1.5}
.proof2{display:grid;gap:14px;margin-top:18px;align-items:stretch}
.proof2 .panel{margin:0}
.evs{display:grid;gap:12px}
.ev{display:flex;flex-direction:column;gap:6px;border:1px solid var(--card-line);border-radius:18px;background:#fff;padding:18px 20px}
.ev b{font-size:44px;font-weight:600;letter-spacing:-.05em;line-height:.95;background:var(--gloss);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.ev b small{font-size:.5em}
.ev p{font-size:14px;color:var(--ink2);line-height:1.45}
.c .evs{margin-top:16px}
.c .ev{background:var(--card)}

/* 3 · bigger bills */
.duo2{display:grid;gap:14px}
.duo2 .c{border:1px solid var(--card-line);box-shadow:none}
.c-vis{margin-top:auto;padding-top:18px}
.c-vis img{width:100%;display:block;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cp.small{font-size:13px;color:var(--mute);margin-top:12px}
.why{margin-top:20px;border-radius:24px;background:#FCFAF7;border:1px solid var(--card-line);padding:28px}
.why h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em}
.why .evs{margin-top:18px}
.eq{margin-top:18px;border-radius:18px;background:var(--gloss-band);color:#fff;padding:22px 24px}
.eq-k{font-size:13px;font-weight:600;opacity:.85}
.eq-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:clamp(17px,1.8vw,22px);font-weight:600;margin-top:8px}
.eq-f span{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);border-radius:12px;padding:6px 12px}
.eq-n{margin-top:12px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.94);max-width:60em}
.c.waiter{margin-top:14px;border:1px solid var(--card-line);box-shadow:none}
.cando{display:grid;gap:12px;margin-top:16px}
.cando>div{border-radius:14px;background:var(--card);border:1px solid var(--card-line);padding:14px 16px}
.cd-h{font-size:13px;font-weight:600;color:var(--o-txt);margin-bottom:6px}
.cando .no .cd-h{color:var(--ink)}
.cando ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.cando li{font-size:14px;color:var(--ink2);padding-left:18px;position:relative}
.cando li::before{content:"✓";position:absolute;left:0;color:var(--o-txt);font-weight:700}
.cando .no li::before{content:"×";color:var(--ink);font-weight:700}

/* 4 · bringing them back: a light part with one chapter per idea (remodelled 11 Oct) */
.bloop{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.bloop li{position:relative}
.bloop a,.bloop .ret{display:flex;flex-direction:column;gap:2px;height:100%;border:1px solid var(--card-line);border-radius:18px;background:#fff;padding:16px 18px;text-decoration:none;color:var(--ink)}
.bloop a:hover{border-color:var(--o)}
.bloop span{width:26px;height:26px;border-radius:50%;background:var(--gloss);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:600;margin-bottom:8px}
.bloop b{font-size:17px;letter-spacing:-.01em}
.bloop small{font-size:13.5px;color:var(--ink2)}
.bloop .ret{background:var(--gloss-band);border-color:transparent;color:#fff;justify-content:flex-end}
.bloop .ret small{color:rgba(255,255,255,.9)}
.chap{border:1px solid var(--card-line);border-radius:24px;background:#fff;padding:28px;margin-top:16px;scroll-margin-top:90px}
.ch-k{font-size:20px;font-weight:600;color:var(--o-txt);letter-spacing:-.02em}
.ch-txt h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;line-height:1.1;margin:8px 0 12px}
.ch-pts{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
.ch-pts li{font-size:14.5px;line-height:1.55;color:var(--ink2);padding-left:16px;position:relative}
.ch-pts li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--o)}
.ch-pts b{color:var(--ink)}
.ch-txt .rcard{max-width:340px}
.ch-rew,.ch-two{display:grid;gap:26px;align-items:center}
.ch-rew .pstage{display:flex;justify-content:center}
.ch-row{display:grid;gap:22px;align-items:start;margin-top:26px;padding-top:24px;border-top:1px solid var(--card-line)}
.ch-row .dash{margin:0;padding:0;border:0}
.ch-row .dgrid{grid-template-columns:1fr}
.chap .camp{margin-top:26px}
.ch-txt .roi{margin-top:18px}
.dline2{text-align:center;margin-top:26px;font-size:16px;color:var(--ink2)}
.dline2 b{color:var(--ink)}
@media (min-width:700px){.bloop{grid-template-columns:repeat(2,1fr)}.ch-row .dgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){
  .bloop{grid-template-columns:repeat(4,1fr);gap:28px}
  .bloop li:not(:last-child)::after{content:"→";position:absolute;right:-22px;top:50%;transform:translateY(-50%);color:var(--o-txt);font-size:22px;font-weight:600}
  .chap{padding:36px}
  .ch-rew{grid-template-columns:1fr 260px 1fr;gap:34px}
  .ch-two{grid-template-columns:1fr 1.05fr;gap:40px}
  .ch-row{grid-template-columns:220px 1fr;gap:32px}
}

/* 5 · team + owner */
.team{display:grid;gap:22px;align-items:center}
.screen.big{padding:8px}
.tlist{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.tlist li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--card-line)}
.tlist li:last-child{border-bottom:0}
.tlist svg{flex:none;width:26px;height:26px;color:var(--o-txt);margin-top:2px}
.tlist b{display:block;font-size:17px;letter-spacing:-.01em}
.tlist span{display:block;font-size:14.5px;color:var(--ink2);line-height:1.5;margin-top:2px}
.owner{display:grid;gap:22px;align-items:center;margin-top:28px;border-radius:24px;background:#FCFAF7;border:1px solid var(--card-line);padding:28px}
.owner .c-k{font-size:20px;font-weight:600;color:var(--o-txt)}
.owner h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;margin:8px 0 10px}
.owner .cp + .cp{margin-top:10px}
.o-vis{display:grid;gap:10px}

/* 6 · POS and payments */
.ops{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:0;counter-reset:o}
.ops li{position:relative;padding:12px 0 12px 40px;border-top:1px solid var(--card-line)}
.ops li:first-child{border-top:0}
.ops li::before{counter-increment:o;content:counter(o);position:absolute;left:0;top:12px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--o);color:var(--o-txt);display:grid;place-items:center;font-size:12px;font-weight:600}
.ops b{display:block;font-size:15.5px}
.ops span{display:block;font-size:14px;color:var(--ink2);line-height:1.5}
.paym{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.paym span{font-size:14px;font-weight:600;border:1px solid var(--card-line);border-radius:10px;padding:8px 14px;background:var(--card)}
#pos .bul li{font-size:14.5px}

/* 7 · venues + comparison */
.cmp{margin-top:40px}
.cmp h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.035em;text-align:center;margin-bottom:22px}
.cmp-t{border:1px solid var(--card-line);border-radius:22px;overflow:hidden;background:#fff}
.cmp-t .r{display:grid;grid-template-columns:1fr;border-top:1px solid var(--card-line)}
.cmp-t .r:first-child{border-top:0}
.cmp-t span{padding:12px 16px;font-size:14px;color:var(--ink2)}
.cmp-t [role=rowheader]{font-weight:600;color:var(--ink);background:var(--card)}
.cmp-t .m{color:var(--ink);font-weight:600;background:var(--o-tint)}
.cmp-t .h span{font-size:13px;font-weight:600;color:var(--mute)}
.cmp-t .h .m{color:var(--o-txt)}
.cmp-t .h{display:none}

/* =================== tablet =================== */
@media (min-width:700px){
  .rules{grid-template-columns:repeat(3,1fr)}
  .steps7{grid-template-columns:repeat(2,1fr)}
  .evs{grid-template-columns:repeat(3,1fr)}
  .evs.four{grid-template-columns:repeat(2,1fr)}
  .c .evs{grid-template-columns:1fr 1fr}
  .cando{grid-template-columns:1fr 1fr}
  .o-vis{grid-template-columns:1fr 1fr}
  .cmp-t .h{display:grid}
  .cmp-t .r{grid-template-columns:1.1fr 1fr 1fr 1.2fr}
}
/* =================== desktop =================== */
@media (min-width:1024px){
  .steps7{grid-template-columns:repeat(4,1fr)}
  .steps7 .st:nth-child(7){grid-column:span 1}
  .proof2{grid-template-columns:1fr 1.6fr}
  .proof2 .evs{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
  .duo2{grid-template-columns:1fr 1fr}
  .evs.four{grid-template-columns:repeat(4,1fr)}
  .team{grid-template-columns:1.25fr 1fr;gap:40px}
  .owner{grid-template-columns:1fr 1.1fr;gap:36px;padding:36px}
  .part{padding-block:64px}
}
.duo2 .c + .c{margin-top:0}
/* steps: the trips panel fills the 8th tile; step 4 shows the bottom of its screen */
.st-trips{border:0;background:none;justify-content:stretch}
.st-trips .panel{height:100%;margin:0;display:flex;flex-direction:column;justify-content:center}
.evs.row3{margin-top:14px}
@media (min-width:700px){.evs.row3{grid-template-columns:repeat(3,1fr)}}
.c-vis{margin-top:14px;padding-top:0}
.evs.bottom{margin-top:auto;padding-top:16px}

#compare-sec .cmp{margin-top:0}
#compare-sec .cta-band{margin-top:28px}


/* 11 Oct: each part opens on its number in a circle */
.ph-n{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gloss);color:#fff;font-size:19px;font-weight:600;letter-spacing:-.02em;box-shadow:0 10px 22px -12px rgba(150,40,10,.6)}

/* 1 · the system (11 Oct; compacted 12 Oct): six steps around the engine, after McKinsey's operations flywheel. Black is
   the visit, orange is the loop that brings guests back. Phones get one column; the return curves show from 980px.
   prod.js runs a light around the loop, measured from the cards, so the eye follows the flow. */
.sy{position:relative;max-width:1140px;margin:0 auto;--eng:120px}
.sy-lab{font:500 12px "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.sy-lab.o{color:var(--o-txt);margin:10px 0 0}
.sy-row{list-style:none;margin:0;padding:0;display:grid;gap:28px}
.sy-c{position:relative;z-index:2;border:1px solid var(--card-line);border-radius:16px;background:#fff;padding:16px 18px 14px}
.sy-c.o{border-color:#F4C6B5}
.sy-top{display:flex;align-items:center;justify-content:space-between}
.sy-i{width:36px;height:36px;padding:8px;border-radius:10px;background:#F4F2EE;color:#2A2A2E}
.sy-c.o .sy-i{background:#FFEDE5;color:var(--o-txt)}
.sy-n{font:500 13px "Geist Mono",ui-monospace,monospace;color:var(--mute);letter-spacing:.04em}
.sy-c.o .sy-n{color:var(--o-txt)}
.sy-c h3{font-size:17.5px;letter-spacing:-.02em;margin-top:12px}
.sy-c p{font-size:14px;color:var(--ink2);line-height:1.45;margin-top:4px}
.sy-c ul{list-style:none;padding:10px 0 0;margin:10px 0 0;border-top:1px solid var(--card-line);display:grid;gap:4px}
.sy-c li{position:relative;padding-left:16px;font-size:13.5px;color:var(--ink);line-height:1.4}
.sy-c li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:1.5px;background:#2A2A2E}
.sy-c.o li::before{background:var(--o)}
/* arrows between cards (down on phones) */
.sy-c:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-18px;width:8px;height:8px;border-right:1.5px solid #2A2A2E;border-bottom:1.5px solid #2A2A2E;transform:translateX(-50%) rotate(45deg)}
.sy-c.o:not(:last-child)::after{border-color:var(--o)}
.sy-eng{position:relative;width:104px;height:104px;margin:16px auto}
.sy-eng svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sy-eng .r{fill:#fff;stroke:#2A2A2E;stroke-width:1.25}
.sy-eng .a,.sy-eng .h{fill:none;stroke:var(--o);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sy-eng .spin{transform-origin:70px 70px;animation:sy-spin 14s linear infinite}
@keyframes sy-spin{to{transform:rotate(360deg)}}
.sy-eng span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.sy-eng small{display:block;font:500 8.5px "Geist Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.sy-back,.sy-turn,.sy-flow{display:none}
@media (min-width:980px){
  .sy{padding:0 56px}
  .sy-body{position:relative;display:grid;grid-template-rows:1fr auto 1fr;margin:0 -56px;padding:0 56px}
  .sy-row{grid-template-columns:repeat(3,1fr);gap:32px}
  .sy-row.b{direction:rtl}
  .sy-row.b>li{direction:ltr}
  .sy-c:not(:last-child)::after{left:auto;right:-21px;bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}
  .sy-row.b .sy-c:not(:last-child)::after{right:auto;left:-21px;transform:translateY(-50%) rotate(135deg)}
  .sy-eng{width:var(--eng);height:var(--eng);margin:8px auto}
  .sy-eng span{font-size:22px}
  /* the return curves: right, from step 3 down to step 4; left, from step 6 back up to step 1.
     They meet each row at its middle: (body height - engine row) / 4 from the top and the bottom. */
  .sy-back,.sy-turn{display:block;position:absolute;top:calc((100% - var(--eng) - 16px)/4);bottom:calc((100% - var(--eng) - 16px)/4);width:44px;border:1.5px solid var(--o)}
  .sy-turn{right:12px;border-left:0;border-radius:0 44px 44px 0}
  .sy-back{left:12px;border-right:0;border-radius:44px 0 0 44px}
  .sy-turn::after,.sy-back::after{content:"";position:absolute;width:8px;height:8px;border-right:1.5px solid var(--o);border-bottom:1.5px solid var(--o)}
  .sy-turn::after{left:-3px;bottom:-5px;transform:rotate(135deg)}
  .sy-back::after{right:-3px;top:-5px;transform:rotate(-45deg)}
  .sy-back b{position:absolute;left:-12px;top:50%;z-index:2;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;background:#fff;padding:4px 8px;font-size:13px;font-weight:600;color:var(--o-txt)}
  /* the running light (prod.js): sits under the cards, so it shows on the curves and in the gaps between steps */
  .sy-flow{display:block;position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 4px rgba(255,90,44,.7))}
  .sy-flow path{fill:none;stroke:var(--o);stroke-linecap:round}
  .sy-flow .t1{stroke-width:3;opacity:.25}
  .sy-flow .t2{stroke-width:3.5;opacity:.6}
  .sy-flow .hd{stroke-width:9;stroke:#FF5A2C}
}
@media (prefers-reduced-motion:reduce){.sy-eng .spin{animation:none}.sy-flow{display:none!important}}

/* 3 · the two "bigger bills" cards share one grid from 1024px (12 Oct), so they read across row by row:
   kicker · headline · intro · points (stats | offers) · picture · footnote */
@media (min-width:1024px){
  @supports (grid-template-rows:subgrid){
    #bills .duo2{grid-template-rows:repeat(6,auto);row-gap:0}
    #bills .duo2 .c{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start}
    #bills .duo2 .c>.c-top{grid-row:1}
    #bills .duo2 .c>h3{grid-row:2}
    #bills .duo2 .c>.cp:not(.small){grid-row:3}
    #bills .duo2 .c>.evs.bottom,#bills .duo2 .c>.bul{grid-row:4;margin-top:16px;padding-top:0;align-self:start}
    #bills .duo2 .c>.bul{gap:10px}
    #bills .duo2 .c>.c-vis{grid-row:5;align-self:center;margin-top:0}
    /* the upsell intro is the shorter one: wrapped to three lines, it ends level with the menus intro */
    #upsell>.cp:not(.small){max-width:20em}
    #bills .duo2 .c>.fan{grid-row:5;align-self:center;margin:18px auto 14px}
    #bills .duo2 .c>.cp.small{grid-row:6;align-self:end;margin-top:0}
  }
}