/* ============================================================
   SERO HEALTH — shared brand layer for login and order pages.
   Green and yellow, pill buttons, big thumb-sized controls.
   Loaded after page CSS, before layout-defence.css.
   ============================================================ */
:root{ --brand:#0F3B2E; --brand-2:#1C5A43; --lime:#E4F46B; }
body.auth-body,body.order-body{ background:#F5F7EF; }

.btn{ border-radius:999px; --bg:var(--brand); --bd:var(--brand); --fg:#fff; }
.btn:hover{ background:var(--brand-2); border-color:var(--brand-2); color:#fff; }
.btn.ember{ --bg:var(--brand); --bd:var(--brand); }
.btn.ember:hover{ background:var(--brand-2); border-color:var(--brand-2); }
.btn.ghost{ --bg:#fff; --fg:var(--brand); --bd:rgba(15,59,46,.25); }
.btn .arw{ margin-left:.4em; }

input:not([type=checkbox]):not([type=radio]),select,textarea{ border-radius:14px !important; }
.fld input,.fld select{ min-height:56px; font-size:1rem; }

/* login */
.auth-card{ background:#fff; border-radius:24px; }
.auth-tabs{ border-radius:999px; padding:4px; }
.auth-tabs button{ border-radius:999px; min-height:48px; }
.auth-art-copy .mono{ color:var(--lime); }
.auth .preview-note{ background:#F6F1C7; border-color:rgba(15,59,46,.2); border-radius:14px; }

@media(max-width:700px){
  .auth-main{ padding:24px 20px 48px; }
  .auth-card{ padding:24px 20px; }
  .auth-art{ border-radius:0 0 24px 24px; }
  .auth-art-copy .d3{ font-size:1.6rem; }
  .auth .d3#auth-title{ font-size:1.9rem; }
  .fld input,.fld select{ min-height:60px; font-size:1.06rem; }
  .btn,.btn.lg,.btn.sm{ min-height:60px; font-size:1.06rem; }
  .auth-tabs button{ min-height:52px; font-size:1rem; }
  .auth-form{ gap:20px; }
  .linkish{ min-height:48px; font-size:1rem; }
}
.auth-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,59,46,.15),rgba(15,59,46,.6)); pointer-events:none; }
.auth-art-copy{ z-index:1; }
.order-body .fade{ color:#2F7A4A; }

/* order: ticks instead of dots, round step numbers */
.order-body .order-trust .pill{ background:#fff; border:0; border-radius:999px; padding:10px 16px; gap:8px; font-size:.95rem; color:#10201A; min-height:44px; }
.order-body .chk{ width:16px; height:16px; fill:none; stroke:#2F7A4A; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.order-body .ostep-head .on{
  width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; border:0;
  display:grid; place-items:center; font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:0; padding:0;
}
.order-body .order-head .mono{ font-family:var(--sans); font-size:.85rem; font-weight:600; letter-spacing:.02em; text-transform:none; color:#2F7A4A; }
.order-body .mono,.order-body [class*="markers"],.order-body .tiny.mono{ font-family:var(--sans) !important; letter-spacing:0 !important; text-transform:none !important; font-size:.85rem; }

/* order nav: solid white bar with room to breathe, matching the homepage */
.order-body .nav,.order-body .nav.stuck{ position:sticky; top:0; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); padding:14px 0; }
.order-body .nav-links a{ color:#10201A; font-weight:500; }
.order-body .nav-cta{ gap:8px; }
.order-body .nav-cta .btn.sm{ height:44px; min-height:44px; padding:0 20px; }
.order-body .nav-acct{ width:44px; height:44px; }
.order-body .order-head{ padding-top:clamp(2.5rem,5vw,4rem); }
.auth-card{ padding:clamp(24px,3vw,40px); box-shadow:0 20px 50px -30px rgba(15,59,46,.25); }
.auth-card .auth-tabs{ background:#EEF1E6; }
.auth-art-copy .mono{ font-family:var(--sans); letter-spacing:.02em; text-transform:none; font-size:.9rem; font-weight:600; }

/* ============================================================
   ORDER PAGE: conversion layout
   ============================================================ */
.ord{ --ink:#10201A; --soft:#F5F7EF; padding:32px 0 96px; }
.ord .acc{ color:#2F7A4A; }
.ord-steps{ list-style:none; margin:0 0 32px; padding:0; display:flex; gap:24px; font-size:.9rem; color:var(--ink-3); flex-wrap:wrap; }
.ord-steps li{ display:flex; align-items:center; gap:8px; }
.ord-steps span{ width:24px; height:24px; border-radius:50%; border:1.5px solid currentColor; display:grid; place-items:center; font-size:.75rem; font-weight:600; }
.ord-steps li.on{ color:var(--ink); font-weight:600; }
.ord-steps li.on span{ background:var(--brand); border-color:var(--brand); color:#fff; }
.ord-head h1{ font-family:var(--display); font-weight:500; letter-spacing:-.035em; font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.05; margin:0; color:var(--ink); }
.ord-head p{ font-size:1.08rem; color:var(--ink-2); line-height:1.55; max-width:60ch; margin:16px 0 0; }
.ord-trust{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px 20px; }
.ord-trust li{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; color:var(--ink); }
.ord .chk{ width:18px; height:18px; fill:none; stroke:#2F7A4A; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none; }

.ord-grid{ display:grid; gap:32px; margin-top:40px; align-items:start; }
@media(min-width:1000px){ .ord-grid{ grid-template-columns:minmax(0,1fr) 380px; gap:48px; } }
.ord-main{ display:flex; flex-direction:column; gap:48px; min-width:0; }
.ord-h{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:500; letter-spacing:-.03em; font-size:1.6rem; margin:0 0 20px; color:var(--ink); }
.ord-h .n{ width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-family:var(--sans); font-size:.95rem; font-weight:600; }

/* panel cards */
.pc-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:700px){ .pc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pc,.pc-sub,.cm{ position:relative; cursor:pointer; background:#fff; border:2px solid transparent; border-radius:20px; box-shadow:0 1px 2px rgba(16,32,26,.05),0 10px 30px -22px rgba(16,32,26,.3); transition:border-color .2s var(--ease), transform .2s var(--ease); }
.pc:hover,.pc-sub:hover,.cm:hover{ transform:translateY(-2px); }
.pc input,.pc-sub input,.cm input{ position:absolute; opacity:0; pointer-events:none; }
.pc:has(input:checked),.pc-sub:has(input:checked),.cm:has(input:checked){ border-color:var(--brand); }
.pc:has(input:focus-visible),.pc-sub:has(input:focus-visible),.cm:has(input:focus-visible){ outline:3px solid var(--lime); outline-offset:2px; }
.pc{ display:flex; flex-direction:column; overflow:hidden; }
.pc-flag{ position:absolute; top:12px; left:12px; z-index:1; background:var(--lime); color:var(--brand); font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:999px; }
.pc-img{ display:block; aspect-ratio:16/10; overflow:hidden; }
.pc-img img{ width:100%; height:100%; object-fit:cover; }
.pc-body{ display:flex; flex-direction:column; flex:1; padding:20px; }
.pc-top{ display:flex; justify-content:space-between; align-items:center; }
.pc-name{ font-family:var(--display); font-weight:500; font-size:1.5rem; letter-spacing:-.03em; }
.pc-radio{ width:24px; height:24px; border-radius:50%; border:2px solid rgba(16,32,26,.25); flex:none; position:relative; }
:is(.pc,.pc-sub,.cm):has(input:checked) .pc-radio{ border-color:var(--brand); background:var(--brand); box-shadow:inset 0 0 0 4px #fff; }
.pc-mk{ font-weight:600; color:#2F7A4A; margin-top:4px; font-size:.95rem; }
.pc-best{ color:var(--ink-2); font-size:.9rem; margin-top:2px; }
.pc-list{ list-style:none; margin:16px 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pc-list li{ display:flex; gap:8px; font-size:.9rem; line-height:1.4; color:var(--ink); }
.pc-price{ margin-top:auto; display:flex; align-items:baseline; gap:6px; padding-top:12px; border-top:1px solid var(--line); }
.pc-price b{ font-family:var(--display); font-size:2rem; font-weight:600; letter-spacing:-.04em; }
.pc-price small{ color:var(--ink-3); }

.pc-sub{ display:flex; align-items:center; gap:16px; padding:20px; margin-top:16px; background:#F6F1C7; }
.pcs-t{ flex:1; }
.pcs-t b{ display:block; font-size:1.05rem; }
.pcs-t small{ display:block; color:var(--ink-2); font-size:.9rem; margin-top:2px; }
.pcs-p{ text-align:right; }
.pcs-p b{ display:block; font-family:var(--display); font-size:1.6rem; letter-spacing:-.03em; }
.pcs-p small{ color:var(--ink-3); }

/* collection */
.cm-grid{ display:grid; gap:16px; }
@media(min-width:700px){ .cm-grid{ grid-template-columns:1fr 1fr; } }
.cm{ display:flex; align-items:flex-start; gap:14px; padding:20px; }
.cm-t{ flex:1; }
.cm-t b{ display:block; font-size:1.05rem; }
.cm-t em{ font-style:normal; font-size:.72rem; font-weight:700; background:#E4F46B; color:var(--brand); padding:3px 8px; border-radius:999px; margin-left:6px; vertical-align:2px; }
.cm-t small{ display:block; color:var(--ink-2); font-size:.9rem; margin-top:4px; line-height:1.45; }
.cm-p{ font-weight:700; white-space:nowrap; }

/* included, next, faq */
.inc{ list-style:none; padding:0; margin:0; display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:700px){ .inc{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.inc li{ background:#fff; border-radius:16px; padding:16px 18px; }
.inc b{ display:block; font-size:.98rem; }
.inc span{ color:var(--ink-2); font-size:.86rem; }
.next{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
@media(min-width:700px){ .next{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.next li{ background:#fff; border-radius:16px; padding:18px; font-size:.9rem; color:var(--ink-2); line-height:1.45; }
.next span{ width:28px; height:28px; border-radius:50%; background:#EAF5C8; color:var(--brand); display:grid; place-items:center; font-weight:700; font-size:.85rem; margin-bottom:10px; }
.next b{ display:block; color:var(--ink); font-size:1rem; margin-bottom:4px; }
.ord-faq{ display:flex; flex-direction:column; gap:8px; }
.ord-faq details{ background:#fff; border-radius:16px; padding:0 20px; }
.ord-faq summary{ cursor:pointer; min-height:60px; display:flex; align-items:center; font-weight:600; list-style:none; }
.ord-faq summary::-webkit-details-marker{ display:none; }
.ord-faq summary::after{ content:"+"; margin-left:auto; font-size:1.3rem; font-weight:400; }
.ord-faq details[open] summary::after{ content:"–"; }
.ord-faq p{ margin:0 0 18px; color:var(--ink-2); line-height:1.55; }

/* summary */
.ord-sum{ position:sticky; top:96px; }
.os-card{ background:#fff; border-radius:24px; padding:24px; box-shadow:0 20px 50px -30px rgba(16,32,26,.3); }
.os-img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:16px; margin-bottom:20px; }
.os-card h3{ font-family:var(--display); font-weight:500; font-size:1.4rem; letter-spacing:-.03em; margin:0 0 8px; }
.ord .sum-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; font-size:.95rem; border-bottom:1px solid var(--line); }
.ord .sum-row .free{ color:#2F7A4A; font-weight:700; }
.ord .sum-row.total{ border:0; padding-top:16px; align-items:baseline; font-weight:700; font-size:1.1rem; }
.ord .sum-row.total small{ display:block; font-weight:400; font-size:.8rem; color:var(--ink-3); }
.ord .sum-row.total #sum-total{ font-family:var(--display); font-size:2rem; letter-spacing:-.04em; }
.ord .pay{ width:100%; min-height:60px; border:0; border-radius:999px; background:var(--brand); color:#fff; font:600 1.08rem var(--sans); cursor:pointer; margin-top:12px; transition:background .2s var(--ease); }
.ord .pay:hover{ background:var(--brand-2); }
.ord .pay-note{ text-align:center; font-size:.82rem; color:var(--ink-3); margin:10px 0 0; }
.os-g{ list-style:none; padding:16px 0 0; margin:16px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.os-g li{ display:flex; gap:8px; font-size:.88rem; color:var(--ink); }

/* phone bar */
.ord-bar{ display:none; }
@media(max-width:999px){
  .ord-sum{ position:static; }
  .ord{ padding-bottom:120px; }
  .ord-bar{ display:flex; align-items:center; gap:16px; position:fixed; left:0; right:0; bottom:0; z-index:80; background:#fff; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -10px 30px -16px rgba(16,32,26,.35); }
  .ord-bar div{ flex:1; }
  .ord-bar b{ display:block; font-family:var(--display); font-size:1.5rem; letter-spacing:-.03em; }
  .ord-bar small{ color:var(--ink-2); font-size:.85rem; }
  .ord-bar .pay{ width:auto; flex:0 0 55%; margin:0; }
}
@media(max-width:700px){
  .ord{ padding-top:20px; }
  .ord-steps{ gap:12px; font-size:.82rem; }
  .ord-head h1{ font-size:2.3rem; }
  .ord-main{ gap:56px; }
  .pc-img{ aspect-ratio:16/8; }
  .pc-name{ font-size:1.6rem; }
  .pc-list li{ font-size:.98rem; }
  .cm-t small,.pcs-t small{ font-size:.95rem; }
}
.ord-h h2{ font:inherit; letter-spacing:inherit; margin:0; }
h2.ord-h{ display:block; }
.pc-list li span,.cm-t small,.pcs-t small,.next li{ text-wrap:balance; }
.cm-t small{ max-width:34ch; }
/* panel cards: wide rows until there's genuinely room for three columns */
.pc-grid{ grid-template-columns:1fr !important; }
.pc{ flex-direction:row; }
.pc-img{ flex:0 0 clamp(120px,26%,220px); aspect-ratio:auto; }
.pc-flag{ top:auto; bottom:12px; left:12px; }
@media(min-width:1280px){
  .pc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .pc{ flex-direction:column; }
  .pc-img{ flex:none; aspect-ratio:16/10; }
  .pc-flag{ top:12px; bottom:auto; }
}
@media(max-width:560px){
  .pc{ flex-direction:column; }
  .pc-img{ flex:none; aspect-ratio:16/8; }
  .pc-flag{ top:12px; bottom:auto; }
}
.ord-bar .pay{ min-height:56px; border:0; border-radius:999px; background:var(--brand); color:#fff; font:600 1.08rem var(--sans); cursor:pointer; }
@media(max-width:560px){ .pc-img{ aspect-ratio:16/6; } }

/* squared buttons (owner preference: no pills) */
.btn,.ord .pay,.ord-bar .pay,.auth-tabs,.auth-tabs button{ border-radius:10px !important; }
.auth-tabs{ padding:4px; }
.order-body .ft-legal p{ color:rgba(255,255,255,.7); }
.order-body .ft-legal strong,.order-body .ft-bot .tiny{ color:rgba(255,255,255,.86); }

/* order: progress bar replaces the circles */
.ord-progress{ margin:0 0 28px; max-width:560px; }
.op-bar{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.op-bar i{ height:6px; border-radius:3px; background:rgba(15,59,46,.15); }
.op-bar i.on{ background:var(--brand); }
.ord-progress p{ margin:10px 0 0; font-size:.92rem; color:var(--ink-2); }
.ord-progress b{ color:var(--ink); }
@media(max-width:560px){ .ord-progress span{ display:none; } }

/* order: kill inherited section padding (dead space between steps) */
.ord .ord-sec{ padding:0 !important; margin:0; }
.ord-main{ gap:48px; }
@media(max-width:700px){ .ord-main{ gap:44px; } }

/* bigger thumb-sized buttons on phones */
@media(max-width:700px){
  .ord .pay,.ord-bar .pay{ min-height:64px; font-size:1.12rem; }
  .auth .btn,.auth .btn.lg{ min-height:64px; font-size:1.12rem; }
}