/* ==========================================================================
   App2Food redesign — shared component layer
   Loaded after each page's inline styles. Adds the section rhythm and
   graphic-anchor components from the approved mockups. Existing tokens
   (--teal, --teal-deep, --ink, etc.) are reused, not redefined.
   ========================================================================== */

:root{
  --r-deep:#0E322E; --r-deep2:#071A17; --r-teal:#46C3B2; --r-bright:#5FD8C6;
  --r-mint:#EAF6F3; --r-mint2:#F5FAF8; --r-ink:#15211F; --r-soft:#56655F; --r-line:#E3ECE9;
  --r-wrap:1180px;
}

/* ---- section rhythm ---- */
.r-section{padding:88px 0}
.r-section.dark{background:var(--r-deep);color:#fff}
.r-section.dark2{background:var(--r-deep2);color:#fff}
.r-section.mint{background:var(--r-mint2)}
.r-wrap{max-width:var(--r-wrap);margin:0 auto;padding:0 32px}
.r-head{max-width:720px;margin:0 auto 48px;text-align:center}
.r-head.left{margin-left:0;text-align:left}
.r-eyebrow{display:block;font-size:14px;font-weight:700;color:var(--r-teal);margin-bottom:12px}
.r-section.dark .r-eyebrow,.r-section.dark2 .r-eyebrow{color:var(--r-bright)}
.r-head h2{font-size:clamp(28px,3.6vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.01em;margin:0 0 14px;color:var(--r-ink)}
.r-section.dark .r-head h2,.r-section.dark2 .r-head h2,.r-section.dark .r-h2,.r-cta h2{color:#fff}
.r-section.dark .r-row-text h3,.r-section.dark .r-eyebrow{color:#fff}
.r-head p{font-size:17px;line-height:1.55;color:var(--r-soft);margin:0}
.r-section.dark .r-head p,.r-section.dark2 .r-head p{color:#C8DEDA}

/* ---- hero (split: copy left, graphic right) ---- */
.r-hero{position:relative;overflow:hidden;background:var(--r-deep);color:#fff;padding:150px 0 90px}
.r-hero .glow{position:absolute;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(70,195,178,.32),transparent 62%);right:-180px;top:-120px;pointer-events:none}
.r-hero .r-wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.r-hero h1{font-size:clamp(40px,5.2vw,68px);line-height:1.05;font-weight:800;letter-spacing:-.015em;margin:0 0 22px;color:#fff}
.r-hero h1 em{font-style:normal;color:var(--r-bright)}
.r-hero .lead{font-size:19px;line-height:1.55;color:#C8DEDA;max-width:56ch;margin:0 0 30px}
.r-hero .crumb{font-size:13px;color:#9FC4BD;margin-bottom:16px}
.r-hero .crumb a{color:inherit}
.r-hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.r-hero .trust{margin-top:26px;font-size:14px;color:#C8DEDA}
.r-hero .trust b{color:#fff}
.r-hero .stars{color:#FBBC04;letter-spacing:1px;margin-right:8px}
.r-hero-media{position:relative;justify-self:center}

/* ---- buttons (pills) ---- */
.r-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:100px;font-weight:700;font-size:16px;line-height:1;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;border:2px solid transparent}
.r-btn:hover{transform:translateY(-1px)}
.r-btn.primary{background:var(--r-teal);color:#04221E;box-shadow:0 10px 26px rgba(70,195,178,.32)}
.r-btn.outline{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.r-btn.outline.on-light{border-color:var(--r-deep);color:var(--r-deep)}
.r-btn.deep{background:var(--r-deep);color:#fff}

/* ---- stat band ---- */
.r-stats{background:var(--r-deep2);color:#fff;padding:40px 0}
.r-stats .r-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.r-stat b{display:block;font-size:44px;font-weight:800;color:var(--r-bright);line-height:1;letter-spacing:-.02em}
.r-stats,.r-stats *{color:#fff}.r-stat b{color:var(--r-bright)}
.r-stat span{display:block;margin-top:8px;font-size:14px;color:#C8DEDA}

/* ---- pillar cards (image top, text bottom) ---- */
.r-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.r-pillar{display:block;border:2px solid var(--r-line);border-radius:22px;overflow:hidden;background:#fff;color:inherit;text-decoration:none}
.r-pillar .vis{background:var(--r-deep);aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.r-pillar .vis video,.r-pillar .vis img{width:100%;height:100%;object-fit:cover;display:block}
.r-pillar .body{padding:26px 28px 28px}
.r-pillar h3{font-size:22px;font-weight:800;margin:0 0 10px}
.r-pillar p{font-size:15px;line-height:1.55;color:var(--r-soft);margin:0 0 16px}
.r-pillar .more{font-weight:700;color:var(--r-teal);font-size:14px}

/* ---- feature rows (alternating text / screenshot card) ---- */
.r-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:52px 0}
.r-row+.r-row{border-top:1px solid var(--r-line)}
.r-row.flip .r-row-text{order:2}
.r-row-text h3{font-size:clamp(24px,2.6vw,30px);line-height:1.15;font-weight:800;margin:0 0 14px;color:var(--r-ink)}
.r-row-text p{font-size:16px;line-height:1.6;color:var(--r-soft);margin:0 0 18px;max-width:52ch}
.r-row-text ul{list-style:none;margin:0;padding:0}
.r-row-text li{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:500;margin:0 0 10px}
.r-row-text li .ck{flex:none;width:20px;height:20px;border-radius:50%;background:var(--r-teal);display:grid;place-items:center;margin-top:1px}
.r-row-text li .ck svg{width:11px;height:11px;stroke:#04221E;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.r-shot{background:var(--r-deep);border-radius:22px;padding:28px;box-shadow:0 24px 60px rgba(14,50,46,.18)}
.r-shot .inner{background:#fff;border-radius:14px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.r-shot .inner img,.r-shot .inner video{width:100%;height:100%;object-fit:cover;display:block}
.r-shot.tall .inner{aspect-ratio:3/4;max-width:320px;margin:0 auto}

/* ---- 3-step sequence ---- */
.r-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.r-step{background:var(--r-mint2);border-radius:22px;padding:30px 28px;position:relative}
.r-step .n{width:64px;height:64px;border-radius:50%;background:var(--r-teal);color:var(--r-deep);font-weight:800;font-size:28px;display:grid;place-items:center;margin-bottom:22px}
.r-step .ill{position:absolute;top:26px;right:26px;width:72px;height:72px}
.r-step h3{font-size:20px;font-weight:800;margin:0 0 8px}
.r-step p{font-size:14.5px;line-height:1.55;color:var(--r-soft);margin:0}

/* ---- included grid ---- */
.r-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.r-tile{background:#fff;border:1px solid var(--r-line);border-radius:18px;padding:22px}
.r-tile .ic{width:44px;height:44px;border-radius:50%;background:var(--r-teal);display:grid;place-items:center;margin-bottom:16px}
.r-tile .ic svg{width:20px;height:20px;stroke:#04221E;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.r-tile h4{font-size:15px;font-weight:800;margin:0 0 4px}
.r-tile p{font-size:12.5px;color:var(--r-soft);margin:0}

/* ---- pricing cards ---- */
.r-price2{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1080px;margin:0 auto}
.r-price{border-radius:24px;padding:36px 34px;position:relative;overflow:hidden}
.r-price.us{background:var(--r-deep);color:#fff}
.r-price.them{background:#fff;border:2px solid var(--r-line)}
.r-price .name{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;margin-bottom:22px}
.r-price .name img{height:40px}
.r-price .big{font-size:clamp(44px,5vw,72px);font-weight:800;line-height:1;letter-spacing:-.02em}
.r-price.us .big{color:var(--r-bright)}
.r-price .sub{font-size:13.5px;margin:10px 0 26px;color:var(--r-soft)}
.r-price.us .sub{color:#C8DEDA}
.r-price ul{list-style:none;margin:0 0 28px;padding:0}
.r-price li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45;margin-bottom:12px}
.r-price li .ck{flex:none;width:20px;height:20px;border-radius:50%;background:var(--r-teal);display:grid;place-items:center;margin-top:1px}
.r-price li .ck svg{width:11px;height:11px;stroke:#04221E;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.r-price li .no{flex:none;width:20px;height:20px;border-radius:50%;background:#FAE1E1;color:#C86E6E;display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:1px}
.r-price .fine{font-size:11.5px;color:var(--r-soft)}
.r-zero-card{background:#fff;color:var(--r-ink);border-radius:28px;padding:40px 44px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.28);min-width:360px}
.r-zero-card small{display:block;font-size:12px;font-weight:600;color:var(--r-soft);letter-spacing:.02em}
.r-zero-card b{display:block;font-size:118px;line-height:1;font-weight:800;color:var(--r-deep);margin:12px 0}
.r-zero-card span{font-size:13.5px;color:var(--r-soft)}

/* ---- before/after split card (about hero) ---- */
.r-split{background:#fff;color:var(--r-ink);border-radius:26px;padding:34px 20px;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 30px 70px rgba(0,0,0,.28);min-width:420px}
.r-split>div{text-align:center;padding:0 14px}
.r-split>div+div{border-left:2px solid var(--r-line)}
.r-split .lbl{font-size:11px;font-weight:700;color:var(--r-soft);margin-bottom:26px}
.r-split .lbl.good{color:var(--r-teal)}
.r-split .amt{font-size:44px;font-weight:800;line-height:1}
.r-split .amt.bad{color:#D64545}.r-split .amt.good{color:var(--r-deep)}
.r-split .cap{font-size:12px;color:var(--r-soft);margin:6px 0 14px}
.r-split .arrow{font-size:26px;line-height:1;margin:2px 0 14px}
.r-split .arrow.bad{color:#D64545}.r-split .arrow.good{color:var(--r-teal)}

/* ---- hub / network illustration card ---- */
.r-hub{background:var(--r-deep);border-radius:26px;padding:34px;position:relative;overflow:hidden}
.r-hub svg{width:100%;height:auto;display:block}
.r-hub p{color:#C8DEDA;font-size:13px;text-align:center;margin:14px 0 0}

/* ---- value cards ---- */
.r-values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.r-value{background:#fff;border:1px solid var(--r-line);border-radius:20px;padding:24px}
.r-value .ic{width:48px;height:48px;border-radius:50%;background:var(--r-deep);display:grid;place-items:center;margin-bottom:18px}
.r-value .ic svg{width:22px;height:22px;stroke:var(--r-bright);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.r-value h4{font-size:17px;font-weight:800;margin:0 0 8px}
.r-value p{font-size:13.5px;line-height:1.5;color:var(--r-soft);margin:0}

/* ---- testimonial video cards ---- */
.r-testi{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1040px;margin:0 auto}
.r-tcard{background:#fff;border-radius:22px;padding:26px;display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:start;border:1px solid var(--r-line)}
.r-tcard .vid{border-radius:16px;overflow:hidden;aspect-ratio:1/1;background:var(--r-deep)}
.r-tcard .vid video{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.r-tcard .stars{color:#FBBC04;font-size:14px;letter-spacing:1px;margin-bottom:8px}
.r-tcard blockquote{margin:0 0 14px;font-size:15px;line-height:1.55;font-weight:500}
.r-tcard .who b{display:block;font-size:16px;font-weight:800}
.r-tcard .who span{font-size:13px;color:var(--r-soft)}

/* ---- calculator band ---- */
.r-calc{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.r-calc .results{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.r-rc{background:var(--r-deep2);border-radius:18px;padding:22px}
.r-rc .lbl{font-size:12.5px;color:#C8DEDA;font-weight:600}
.r-rc .num{font-size:40px;font-weight:800;line-height:1.1;margin:10px 0 6px;letter-spacing:-.02em}
.r-rc.lose .num{color:#FF6B6B}.r-rc.keep .num{color:var(--r-bright)}
.r-rc small{font-size:11.5px;color:#A0BEB9}

/* ---- final CTA ---- */
.r-cta{background:var(--r-deep);color:#fff;text-align:center;padding:96px 0;position:relative;overflow:hidden}
.r-cta .glow{position:absolute;left:50%;top:50%;width:640px;height:640px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(70,195,178,.28),transparent 62%);pointer-events:none}
.r-cta .r-wrap{position:relative}
.r-cta h2{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.01em;margin:0 0 14px}
.r-cta p{font-size:17px;color:#C8DEDA;margin:0 auto 30px;max-width:60ch}
.r-cta .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- photo slot (marked, for real photography later) ---- */
.r-photo-slot{position:relative}
.r-photo-slot[data-photo]::after{content:attr(data-photo);position:absolute;left:12px;bottom:12px;font-size:11px;font-weight:700;background:rgba(14,50,46,.85);color:var(--r-bright);padding:6px 10px;border-radius:8px;pointer-events:none;opacity:0}
/* set body.show-photo-slots to reveal slot labels during review */
body.show-photo-slots .r-photo-slot[data-photo]::after{opacity:1}

/* ---- one orchestrated hero reveal (no per-section fade-ups) ---- */
@media(prefers-reduced-motion:no-preference){
  .r-hero .r-wrap>*{animation:r-rise .7s cubic-bezier(.2,.7,.2,1) both}
  .r-hero .r-wrap>:nth-child(2){animation-delay:.12s}
  @keyframes r-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ---- responsive ---- */
@media(max-width:980px){
  .r-hero .r-wrap{grid-template-columns:1fr;gap:40px}
  .r-hero{padding:120px 0 64px}
  .r-hero-media{justify-self:start}
  .r-stats .r-wrap{grid-template-columns:repeat(2,1fr)}
  .r-pillars,.r-steps{grid-template-columns:1fr}
  .r-grid4,.r-values{grid-template-columns:repeat(2,1fr)}
  .r-row{grid-template-columns:1fr;gap:28px;padding:36px 0}
  .r-row.flip .r-row-text{order:0}
  .r-row .r-shot{order:-1}
  .r-price2,.r-testi,.r-calc{grid-template-columns:1fr}
  .r-tcard{grid-template-columns:1fr}
  .r-tcard .vid{max-width:220px}
  .r-zero-card,.r-split{min-width:0;width:100%}
  .r-zero-card b{font-size:88px}
}
@media(max-width:600px){
  .r-section{padding:60px 0}
  .r-wrap{padding:0 20px}
  .r-stats .r-wrap{grid-template-columns:1fr 1fr;gap:18px}
  .r-stat b{font-size:34px}
  .r-grid4,.r-values{grid-template-columns:1fr}
  .r-split{grid-template-columns:1fr}
  .r-split>div+div{border-left:0;border-top:2px solid var(--r-line);padding-top:20px;margin-top:20px}
  .r-calc .results{grid-template-columns:1fr}
}