/* ──────────────────────────────────────────────────────────────────
   Tokens — sourced strictly from the RönYen brand & style guide.
   ────────────────────────────────────────────────────────────────── */
:root{
  --bg:#F8F7F4; --surface:#F0EEE9; --section-alt:#E8E5DF;
  --border:#D8D4CE; --hairline:#E8E5DF;
  --heading:#1A1F24; --body:#3D4550; --muted:#6B7480; --placeholder:#9AA0A8;
  --nav:#252D35; --util:#333B44; --nav-muted:#9AA0A8;
  --cta:#F06020; --cta-hover:#D04810; --cta-tint:#FFF0E8;
  --sauna:#E88050; --sauna-light:#FDEEE6; --sauna-text:#8A3820;
  --ice:#3D87C4;  --ice-light:#E8F3FB;   --ice-text:#1A4878;
  --wellness:#3A9478; --wellness-light:#E4F5EF;
  --f:'Prompt',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-th:'Sarabun',var(--f);
  --r-sm:4px; --r-md:5px; --r-lg:6px; --r-xl:10px;
  --shadow-card:0 1px 4px rgba(0,0,0,.06);
  --shadow-product:0 10px 28px rgba(26,31,36,.08), 0 2px 6px rgba(26,31,36,.05);
  --maxw:1440px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--f); font-weight:300; color:var(--body);
  background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px}

h1,h2,h3,h4{color:var(--heading); font-family:var(--f); letter-spacing:-.015em}
.t-h1{font-weight:600; font-size:clamp(2rem,3.4vw,3rem); line-height:1.1}
.t-h2{font-weight:400; font-size:clamp(1.75rem,2.4vw,2.25rem); line-height:1.2}
.t-body{font-weight:300; font-size:1rem; line-height:1.65}
.t-eyebrow{
  font-weight:600; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}

/* Primary button — CTA orange + diagonal arrow */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f); font-weight:600; font-size:.875rem; line-height:1;
  letter-spacing:.02em; padding:.875rem 1.5rem; border-radius:var(--r-lg);
  border:1px solid transparent; cursor:pointer; min-height:48px;
  transition:background .15s, transform .1s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--cta); color:#fff}
.btn-primary::after{
  content:""; width:13px; height:13px; flex:none;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  transition:transform .2s ease-out;
}
.btn-primary:hover{background:var(--cta-hover)}
.btn-primary:hover::after{transform:translate(2px,-2px)}

/* Section wrappers */
.band{padding:120px 0}
.band--dark{background:var(--nav); color:#fff}
.band--dark .t-h1,
.band--dark .t-h2,
.band--dark h1,
.band--dark h2{color:#fff}
.band--dark .t-eyebrow{color:var(--sauna)}
.band--surface{background:var(--surface)}

/* ──────────────────────────────────────────────────────────────────
   Hero — dark slate, eyebrow + heading + two paragraphs + 5 categories
   ────────────────────────────────────────────────────────────────── */
.hero{padding:48px 0 64px}
.hero .head{
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:start; margin-bottom:56px;
}
.hero .head-left .t-eyebrow{margin-bottom:18px; display:block; color:var(--nav-muted)}
.hero h1{
  color:#fff; font-weight:600;
  font-size:clamp(2rem,3.6vw,3.25rem);
  line-height:1.08; letter-spacing:-.025em;
  max-width:18ch;
}
.hero h1 em{font-style:normal; color:var(--sauna)}
.hero h1 em.cold{color:var(--ice)}
.hero .head-right{
  display:flex; flex-direction:column; gap:18px;
  color:#cfd3d8; font-weight:300; font-size:1.0625rem; line-height:1.6;
  max-width:54ch; padding-top:8px;
}
.hero .head-right b{color:#fff; font-weight:500}

/* 5-up category card row */
.cat-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
}
.cat-card{
  position:relative; display:block; aspect-ratio:3/4;
  border-radius:var(--r-xl); overflow:hidden;
  isolation:isolate; color:#fff;
  transition:transform .25s, box-shadow .25s;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.cat-card:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.28)}
.cat-card img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s;
}
.cat-card:hover img{transform:scale(1.05)}
.cat-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(26,31,36,.18) 0%, rgba(26,31,36,.55) 60%, rgba(26,31,36,.88) 100%);
}
.cat-card .label{
  position:absolute; inset:auto 0 0 0;
  padding:22px 24px 24px;
  font-family:var(--f); font-weight:500; font-size:1.25rem; line-height:1.2;
  letter-spacing:-.015em; color:#fff;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.cat-card .label .arr{
  width:24px; height:24px; opacity:0; transform:translateX(-4px);
  transition:opacity .2s, transform .2s;
  display:inline-flex; align-items:center; justify-content:center;
}
.cat-card:hover .label .arr{opacity:1; transform:translateX(0)}
.cat-card .label svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* #51 — Lane badge, top-right of each category card */
.cat-card .cat-badge{
  position:absolute; top:10px; right:10px; z-index:1;
  padding:3px 8px; border-radius:4px;
  font-family:var(--f); font-weight:700; font-size:10px; letter-spacing:.06em;
  color:#fff; line-height:1.4; text-transform:uppercase;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.cat-badge--sauna{ background:var(--sauna); }
.cat-badge--ice{ background:var(--ice); }
.cat-badge--package{ background:var(--wellness); }
.cat-card:active{ transform:scale(.98); }

/* ──────────────────────────────────────────────────────────────────
   How to Order — Surface, numbered process steps in horizontal scroll
   ────────────────────────────────────────────────────────────────── */
.process-head{text-align:center; margin-bottom:18px}
.process-head h2{margin-bottom:14px}
.process-head .sub{
  color:var(--muted); font-weight:300; font-size:1.0625rem;
  max-width:54ch; margin:0 auto; line-height:1.55;
}

.toggle{
  display:inline-flex; background:#fff; border:1px solid var(--border);
  padding:4px; border-radius:999px; margin:14px auto 0;
  display:flex; width:fit-content;
}
.toggle button{
  padding:10px 22px; font-size:.875rem; font-weight:500; color:var(--muted);
  background:none; border:0; border-radius:999px; cursor:pointer; letter-spacing:0;
  transition:background .12s, color .12s;
}
.toggle button.is-active{background:var(--nav); color:#fff}

.toggle-center{display:flex; justify-content:center}

.steps-shell{
  position:relative;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  width:100vw; padding:8px 0;
}
.steps-shell::before,
.steps-shell::after{
  content:""; position:absolute; top:0; bottom:0; width:80px;
  pointer-events:none; z-index:2;
}
.steps-shell::before{left:0; background:linear-gradient(90deg,var(--surface),transparent)}
.steps-shell::after{right:0; background:linear-gradient(90deg,transparent,var(--surface))}

.steps{
  display:flex; gap:24px; align-items:stretch;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:8px 40px 32px;
  scrollbar-width:none;
  cursor:grab;
}
.steps:active{cursor:grabbing}
.steps::-webkit-scrollbar{display:none}
.step{
  flex:none; width:300px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.step .num{
  width:38px; height:38px; border-radius:50%;
  background:var(--nav); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.95rem; letter-spacing:0;
  flex:none;
}
.step-card{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  padding:22px 24px 22px; width:100%; flex:1;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:10px;
}
.step-card .eyebrow{
  font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.step-card .title{
  font-family:var(--f); font-weight:500; font-size:1.0625rem;
  color:var(--heading); line-height:1.3; letter-spacing:-.01em;
}
.step-card .desc{
  font-weight:300; font-size:.875rem; line-height:1.6; color:var(--body);
}
.step-card .pay-options{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;
}
.step-card .pay-pill{
  font-size:.66rem; font-weight:500; color:var(--body);
  padding:5px 10px; border:1px solid var(--hairline); border-radius:4px;
  background:var(--bg);
}
.step-card .deliv-pill{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:4px; padding:7px 12px; border-radius:6px;
  background:var(--sauna-light); color:var(--sauna-text);
  font-size:.72rem; font-weight:500; width:fit-content;
}
.step-card .deliv-pill svg{
  width:13px; height:13px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* Scroll affordance — drag hint + arrow controls */
.scroll-hint{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:24px; color:var(--muted);
}
.scroll-hint .drag-ic{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.scroll-hint .drag-ic svg{width:18px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.scroll-hint .ctrl{
  display:flex; gap:8px;
}
.scroll-hint .ctrl button{
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--heading);
  transition:background .12s, transform .12s;
}
.scroll-hint .ctrl button:hover{background:var(--bg); transform:translateY(-1px)}
.scroll-hint .ctrl svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* Option label — sits above each variant for A/B compare */
.opt-label{
  display:flex; align-items:center; gap:14px;
  max-width:var(--maxw); margin:0 auto 32px; padding:0 40px;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}
.opt-label::after{
  content:""; flex:1; height:1px; background:var(--border);
}
.opt-label .badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--nav); color:#fff; font-weight:700; font-size:.78rem;
}

/* Option B — horizontal scroll, oversized ghost numerals, no circles */
.steps-b{
  display:flex; gap:20px; align-items:stretch;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:8px 40px 32px;
  scrollbar-width:none; cursor:grab;
}
.steps-b:active{cursor:grabbing}
.steps-b::-webkit-scrollbar{display:none}
.bstep{
  flex:none; width:320px; scroll-snap-align:start;
  position:relative; isolation:isolate;
  background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-xl); padding:32px 28px 28px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex; flex-direction:column; gap:10px;
}
.bstep::before{display:none}
.bstep .step-meta{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--f); margin-bottom:4px;
}
.bstep .step-meta .ix{
  font-weight:600; font-size:.95rem; color:var(--heading);
  letter-spacing:0;
}
.bstep .step-meta .of{
  font-size:.66rem; font-weight:500; color:var(--placeholder);
  letter-spacing:.06em;
}
.bstep .rail{
  height:2px; background:var(--hairline); border-radius:2px;
  margin-bottom:16px; position:relative;
}
.bstep .rail::after{
  content:""; position:absolute; left:0; top:0;
  height:100%; width:var(--p, 10%);
  background:var(--nav); border-radius:2px;
}
.bstep .eyebrow{
  font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.bstep .title{
  font-family:var(--f); font-weight:500; font-size:1.125rem;
  color:var(--heading); line-height:1.3; letter-spacing:-.01em;
}
.bstep .desc{
  font-weight:300; font-size:.875rem; line-height:1.6; color:var(--body);
}
.bstep.is-final{background:linear-gradient(135deg, var(--wellness-light), #fff 60%); border-color:rgba(58,148,120,.3)}
.bstep.is-final::before{color:rgba(58,148,120,.12)}
.bstep .deliv-pill{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:10px; padding:7px 12px; border-radius:6px;
  background:var(--sauna-light); color:var(--sauna-text);
  font-size:.72rem; font-weight:500; width:fit-content;
}
.bstep .deliv-pill svg{
  width:13px; height:13px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.bstep .pay-options{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.bstep .pay-pill{
  font-size:.66rem; font-weight:500; color:var(--body);
  padding:5px 10px; border:1px solid var(--hairline); border-radius:4px;
  background:var(--bg);
}

/* ──────────────────────────────────────────────────────────────────
   Have a Question? — dark CTA banner before testimonials
   ────────────────────────────────────────────────────────────────── */
.cta-band{padding:88px 0; text-align:center}
.cta-band h2{color:#fff; margin-bottom:12px}
.cta-band .sub{
  color:var(--nav-muted); font-weight:300; font-size:1rem; line-height:1.55;
  margin-bottom:32px;
}

/* ──────────────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .cat-row{grid-template-columns:repeat(3,1fr)}
  .cat-row .cat-card:nth-child(4),
  .cat-row .cat-card:nth-child(5){grid-column:span 1}
}
@media (max-width: 900px){
  .wrap{padding:0 20px}
  .band{padding:80px 0}
  .hero{padding:32px 0 48px}
  .hero .head{grid-template-columns:1fr; gap:24px; margin-bottom:36px}
  .hero h1{max-width:none}
  /* #51 — mobile: 2-up category cards, shorter landscape ratio so they read
     as tappable rows (not tall portraits). Lighter gutter + label. */
  .cat-row{grid-template-columns:repeat(2,1fr); gap:12px}
  .cat-card{aspect-ratio:4/3}
  .cat-card .label{font-size:1rem; padding:14px}
  .steps .step{width:260px}
  .steps{padding:8px 20px 32px}
  .steps-shell::before, .steps-shell::after{width:40px}
  .process-head h2{font-size:1.5rem}
}
/* #51 — small phones (≤400px): single full-width column, 16/9 so the card
   stays ~120–140px tall and the whole grid is reachable above the bottom nav. */
@media (max-width: 400px){
  .cat-row{grid-template-columns:1fr; gap:12px}
  .cat-card{aspect-ratio:16/9}
}