/* ROSY FRESH — BCS redesign "แบบ D" · shared stylesheet
   Type scale rule: nothing below 15px. body 17 · meta 15 · h3 22–28 · h2 28–42 · hero 30–64 */
@font-face{font-family:"MiSans Thai";src:url("assets/fonts/MiSansThai-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"MiSans Thai";src:url("assets/fonts/MiSansThai-Normal.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"MiSans Thai";src:url("assets/fonts/MiSansThai-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"MiSans Thai";src:url("assets/fonts/MiSansThai-Semibold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"MiSans Thai";src:url("assets/fonts/MiSansThai-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --teal:#004560; --teal-mid:#06384c; --teal-deep:#00212e;
  --gold:#c8a96e; --gold-deep:#9d7f45; --gold-lt:#e2cb9c;
  --paper:#ffffff; --cream:#faf9f6; --cloud:#f3f6f8;
  --ink:#15201f; --mid:#525c5e;
  --hair:rgba(0,69,96,.15); --hair-soft:rgba(0,69,96,.08);
  --on-dark:rgba(255,255,255,.78); --on-dark-soft:rgba(255,255,255,.52); --line-dark:rgba(255,255,255,.15);
  --sage:#5f7f5f; --clay:#a9573c;
  --t-hero:clamp(30px,5.4vw,64px); --t-h2:clamp(28px,3.2vw,42px); --t-h3:clamp(22px,2.2vw,28px);
  --t-lead:19px; --t-body:17px; --t-meta:15px;
  --pad:clamp(22px,5vw,72px); --gap:clamp(48px,6vw,88px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"MiSans Thai","IBM Plex Sans Thai",system-ui,sans-serif;line-height:1.72;letter-spacing:0;
     color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-size:var(--t-body);min-height:100dvh}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--pad)}

/* ── nav ── */
.nav{display:flex;align-items:center;justify-content:space-between;height:92px}
.nav img{height:34px;width:auto}
.nav.light{border-bottom:1px solid var(--hair-soft)}
.navleft{display:flex;align-items:center;gap:26px}
.back{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-meta);font-weight:600;color:var(--mid);
      min-height:44px;padding:0 4px;transition:color .22s}
.back:hover{color:var(--teal)}
.langs{display:flex;gap:4px}
.langs button{font-size:var(--t-meta);font-weight:500;color:var(--on-dark);background:none;border:none;
              padding:11px 18px;border-radius:999px;min-height:44px;transition:background .22s,color .22s}
.langs button:hover{color:#fff;background:rgba(255,255,255,.09)}
.langs button[aria-pressed="true"]{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.nav.light .langs button{color:var(--mid)}
.nav.light .langs button:hover{color:var(--ink);background:rgba(0,69,96,.06)}
.nav.light .langs button[aria-pressed="true"]{background:var(--teal);color:#fff}

/* ── dark shell (entry) ── */
.dark{position:relative;color:#fff;background:var(--teal-deep);min-height:100dvh;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;
  background:radial-gradient(1200px 680px at 8% -10%, rgba(0,110,148,.62), transparent 62%),
             radial-gradient(900px 560px at 96% 8%, rgba(200,169,110,.14), transparent 58%),
             linear-gradient(168deg,#053a4e 0%,#00212e 100%)}
.dark > *{position:relative}

/* ── shared type ── */
.tagline{font-size:var(--t-lead);font-weight:600;color:var(--gold-lt);display:flex;align-items:center;gap:14px}
.tagline::before{content:"";width:40px;height:2px;background:var(--gold);flex:none}
.tagline.ink{color:var(--gold-deep)}
h1{font-size:var(--t-hero);font-weight:300;line-height:1.26;margin:24px 0 26px;overflow-wrap:break-word}
h1 b{font-weight:600;color:var(--gold-lt)}
h2{font-size:var(--t-h2);font-weight:600;color:var(--teal);line-height:1.32;overflow-wrap:break-word}
h3{font-size:var(--t-h3);font-weight:600;line-height:1.4}
.lede{font-size:var(--t-lead);color:var(--on-dark);max-width:30em;line-height:1.9}
.sub{font-size:var(--t-lead);color:var(--mid);margin-top:12px;max-width:44em}

/* ── buttons ── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:var(--gold);color:#231a08;
     font-size:var(--t-h3);font-weight:700;border:none;border-radius:999px;padding:20px 44px;min-height:64px;
     box-shadow:0 22px 50px rgba(200,169,110,.24);transition:transform .25s var(--ease),background .25s,box-shadow .25s,opacity .25s}
.cta:hover{transform:translateY(-2px);background:var(--gold-lt);box-shadow:0 30px 64px rgba(200,169,110,.32)}
.cta[disabled]{opacity:.4;pointer-events:none;box-shadow:none}
.cta.solid{background:var(--teal);color:#fff;box-shadow:0 20px 44px rgba(0,69,96,.2)}
.cta.solid:hover{background:var(--teal-mid)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:var(--t-h3);font-weight:600;
     border-radius:14px;padding:22px 20px;min-height:72px;border:1px solid var(--teal);background:var(--teal);color:#fff;
     transition:transform .25s var(--ease),background .25s}
.btn:hover{transform:translateY(-2px);background:var(--teal-mid)}
.btn.ghost{background:#fff;color:var(--teal)}
.btn.ghost:hover{background:var(--cloud)}
.note{font-size:var(--t-meta);color:var(--on-dark-soft);margin-top:20px}
.note.ink{color:var(--mid)}

/* ── step rail (capture) ── */
.rail{display:flex;align-items:center;gap:16px;margin:0 0 34px;flex-wrap:wrap}
.rail .s{display:flex;align-items:center;gap:12px;font-size:var(--t-meta);font-weight:600;color:var(--mid)}
.rail .s .b{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;
            font-size:var(--t-meta);font-weight:700;color:var(--mid)}
.rail .s.on{color:var(--teal)}
.rail .s.on .b{background:var(--teal);border-color:var(--teal);color:#fff}
.rail .s.done .b{background:var(--sage);border-color:var(--sage);color:#fff}
.rail .ln{flex:1;min-width:24px;height:1px;background:var(--hair)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:1000px){.nav{height:76px}}

/* ── hero: B&W photography + white headline panel (Royal Canin structure, ROSY palette) ── */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
      border:1px solid var(--hair);border-radius:24px;overflow:hidden;background:#fff;margin-top:20px;
      box-shadow:0 22px 56px rgba(0,69,96,.08)}
.hero .panel{padding:clamp(30px,3.6vw,56px);display:flex;flex-direction:column;justify-content:center}
.hero .shot{min-height:clamp(300px,30vw,410px);
            background:#dfe4e7 url("assets/hero-cat.jpg") 52% 50%/cover no-repeat;position:relative}
.hero h1{font-size:clamp(28px,3.4vw,44px);font-weight:600;color:var(--teal);line-height:1.32;
         margin:16px 0 14px;overflow-wrap:break-word}
.hero p{font-size:var(--t-lead);color:var(--mid);line-height:1.85;max-width:30em}
.hero .cta{margin-top:26px;align-self:flex-start}
/* champion credit, over the photo */
.hero .credit{position:absolute;left:0;right:0;bottom:0;padding:20px 24px;color:#fff;
  background:linear-gradient(180deg,rgba(0,30,42,0),rgba(0,30,42,.82));font-size:var(--t-meta);line-height:1.6}
.hero .credit b{display:block;font-size:var(--t-body);font-weight:700;letter-spacing:.04em}

/* eyebrow — gold rule + readable label */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:var(--t-meta);font-weight:600;color:var(--gold-deep)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--gold-deep);opacity:.8;flex:none}
.eyebrow.ondark{color:var(--gold-lt)}
.eyebrow.ondark::before{background:var(--gold)}

/* light grey feature panel (RC's step panel) */
.feature{background:var(--cloud);border-radius:24px;padding:clamp(28px,3.6vw,52px);margin-top:22px}
.feature .laurel{position:absolute;right:26px;top:26px;width:66px;opacity:.5}

/* numbered steps in circles */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.stepc{display:flex;gap:16px;align-items:flex-start}
.stepc .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;
          display:grid;place-items:center;font-size:var(--t-meta);font-weight:700}
.stepc .t{font-size:var(--t-body);line-height:1.7}
.stepc .t b{display:block;font-weight:600;color:var(--teal);margin-bottom:3px}
.stepc .t span{color:var(--mid)}

/* outline button with chevron, RC-style */
.obtn{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;
      border:1px solid var(--teal);border-radius:10px;padding:16px 22px;min-height:58px;
      font-size:var(--t-body);font-weight:600;color:var(--teal);background:#fff;
      transition:background .25s var(--ease),transform .25s var(--ease)}
.obtn:hover{background:var(--teal);color:#fff;transform:translateY(-2px)}
.obtn .ch{font-size:var(--t-body)}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero .shot{order:-1;min-height:clamp(240px,58vw,340px);background-position:52% 50%}
  .steps{grid-template-columns:1fr}
}

/* ── site-matching components (mirrors rosyfreshthailand.com) ── */

/* floating pill nav, as on the website */
.navpill{position:sticky;top:12px;z-index:50;margin:12px auto 0;max-width:1200px;
         display:flex;align-items:center;justify-content:space-between;gap:20px;
         border:1px solid var(--hair);border-radius:999px;background:rgba(255,255,255,.985);
         backdrop-filter:blur(14px);padding:10px 14px 10px 22px;box-shadow:0 10px 34px rgba(0,69,96,.07)}
.navpill img{height:30px;width:auto}
.navpill .navleft{display:flex;align-items:center;gap:22px}
.navpill .langs button{color:var(--mid)}
.navpill .langs button:hover{color:var(--ink);background:rgba(0,69,96,.06)}
.navpill .langs button[aria-pressed="true"]{background:var(--teal);color:#fff}

/* section heading with a teal accent word, as the site does */
.sechead h2{font-size:var(--t-h2);font-weight:600;color:var(--teal-ink,#0b2b38);line-height:1.34;margin-top:14px}
.sechead h2 em{font-style:normal;color:var(--teal)}
.sechead p{font-size:var(--t-lead);color:var(--mid);margin-top:14px;max-width:46em;line-height:1.9}

/* white card with icon tile — the site's "6 เหตุผล" card */
.cards{display:grid;gap:18px;margin-top:34px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--hair);border-radius:18px;background:#fff;padding:30px 32px;display:block;color:inherit;
      transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
a.card:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:0 24px 54px rgba(0,69,96,.10)}
.icontile{width:52px;height:52px;border-radius:14px;background:var(--cloud);display:grid;place-items:center;margin-bottom:20px}
.icontile svg{width:26px;height:26px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:var(--t-h3);font-weight:600;color:var(--teal)}
.card p{font-size:var(--t-body);color:var(--mid);margin-top:10px;line-height:1.8}
.card .more{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:var(--t-body);font-weight:600;color:var(--teal)}
a.card:hover .more{gap:14px}

/* narrow dark trust band — the site reserves dark teal for credentials */
.band{background:var(--teal-deep);color:#fff;border-radius:26px;padding:clamp(32px,4vw,52px);margin-top:22px}
.band h3{font-size:var(--t-h3);font-weight:600}
.band p{font-size:var(--t-body);color:var(--on-dark);line-height:1.85;margin-top:12px;max-width:42em}
@media(max-width:1000px){.cards.c3{grid-template-columns:1fr}}

/* ── motion: entrance + scroll reveal (only active when .motion is set) ── */
.motion .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .68s var(--ease),transform .68s var(--ease)}
.motion .reveal.reveal-shot{transform:translateY(24px) scale(1.03)}
.motion .reveal.in{opacity:1;transform:none}
/* the hero photo settles from a slight zoom, which reads as a camera easing in */
.motion .reveal-shot{transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .motion .reveal,.motion .reveal.in{opacity:1!important;transform:none!important;transition:none!important}
}

/* ── see-a-vet note on the report ── */
.vetnote{margin-top:22px;border:1px solid var(--clay);border-left:4px solid var(--clay);
  border-radius:0 14px 14px 0;padding:22px 26px;background:#fdf7f5;color:var(--clay);
  font-size:var(--t-body);line-height:1.8;font-weight:600}

/* ── print / save-as-PDF ── */
@media print{
  @page{margin:14mm}
  .navpill,.share,.again,.hero .cta,#btnPdf,#btnVet{display:none!important}
  body{background:#fff;font-size:12pt}
  .page{padding:0}
  .reveal,.reveal.in{opacity:1!important;transform:none!important}
  section.blk,.std,.feature{break-inside:avoid;border-color:#ccc}
  .prod,.lvl,.card,.recs li,.portion,.photo{break-inside:avoid}
  .vscale li.here{box-shadow:inset 3px 0 0 #9d7f45;background:#f4efe4!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a[href]:after{content:""}
}

/* ── optional FBMI measurement (cats) ── */
.measure{border:1px solid var(--hair);border-radius:18px;background:var(--cream);margin-top:26px;overflow:hidden}
.measure > summary{list-style:none;cursor:pointer;padding:26px 30px;font-size:var(--t-h3);font-weight:600;color:var(--teal);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.measure > summary::-webkit-details-marker{display:none}
.measure > summary::after{content:"+";font-size:26px;font-weight:400;color:var(--gold-deep)}
.measure[open] > summary::after{content:"–"}
.measure .body{padding:0 30px 30px}
.measure .lead{font-size:var(--t-body);color:var(--mid);line-height:1.8;margin-bottom:22px}
.howto{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.howto .h{border:1px solid var(--hair);border-radius:14px;background:#fff;padding:18px 20px}
.howto svg{width:100%;height:auto;max-height:96px}
.howto .ht{font-size:var(--t-body);font-weight:600;color:var(--teal);margin-top:10px}
.howto .hd{font-size:var(--t-meta);color:var(--mid);line-height:1.7;margin-top:4px}
.mfields{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mfields label{display:block;font-size:var(--t-meta);font-weight:600;color:var(--mid);margin-bottom:8px}
.mfields input{width:100%;font:inherit;font-size:var(--t-body);padding:15px 16px;min-height:54px;
  border:1px solid var(--hair);border-radius:12px;background:#fff;color:var(--ink)}
.mfields input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mbtn{margin-top:16px}
.mwarn{margin-top:18px;border:1px solid var(--clay);border-left:4px solid var(--clay);border-radius:0 12px 12px 0;
  padding:18px 22px;background:#fdf7f5;color:var(--clay);font-size:var(--t-body);line-height:1.7}
.mres{margin-top:22px;display:grid;gap:20px}
.bfband{border:1px solid var(--hair);border-radius:14px;background:#fff;padding:20px 22px}
.bt{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:var(--t-body)}
.bt .k{color:var(--mid);font-weight:600}
.bt .v b{font-size:28px;font-weight:600;color:var(--teal);font-variant-numeric:tabular-nums}
.gband{position:relative;height:10px;border-radius:999px;background:var(--cloud);margin-top:14px}
.gband .zone{position:absolute;top:0;bottom:0;background:rgba(95,127,95,.34);border-radius:999px}
.gband .mk{position:absolute;top:-5px;width:4px;height:20px;border-radius:2px;background:var(--teal);transform:translateX(-2px)}
.gscale{display:flex;justify-content:space-between;font-size:var(--t-meta);color:var(--mid);margin-top:8px;
  font-variant-numeric:tabular-nums}
.mverdict{font-size:var(--t-body);color:var(--mid);line-height:1.75}
@media(max-width:760px){.howto,.mfields{grid-template-columns:1fr}}