/* ============================================================
   NEOTEA — Shared design system
   Palette: green + white, Ukiyo-e woodblock register
   Type:   Shippori Mincho (display, JP-native) + Zen Kaku Gothic New (body)
   ============================================================ */

:root{
  /* --- colour tokens --- */
  --paper:   #F3EFE3;   /* warm washi — page ground            */
  --surface: #FCFBF6;   /* panel / card white                  */
  --sumi:    #1B2A20;   /* ink — text & woodblock outline       */
  --tea:     #2E4A34;   /* deep tea green — headings, dark UI   */
  --tea-950: #21382A;   /* deepest — footer                     */
  --matcha:  #5C8B4C;   /* brand mid green                      */
  --tender:  #93C266;   /* bright tender-leaf green — accents   */
  --stone:   #A99E86;   /* warm stone grey                      */
  --mist:    #DDE7D3;   /* pale tea-foam green — tints, rules   */
  --beni:    #BC5540;   /* persimmon — micro accent only        */

  --sumi-70: rgba(27,42,32,.70);
  --sumi-55: rgba(27,42,32,.55);
  --sumi-12: rgba(27,42,32,.12);
  --sumi-08: rgba(27,42,32,.08);
  --paper-70: rgba(243,239,227,.72);

  /* --- type --- */
  --serif: "Shippori Mincho", "Times New Roman", serif;
  --sans:  "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(.8rem, .77rem + .15vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.1rem + .4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + .8vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.6vw, 3rem);
  --step-4:  clamp(2.5rem, 1.9rem + 3vw, 4.6rem);

  /* --- structure --- */
  --wrap: 1200px;
  --prose: 760px;
  --gutter: clamp(1.2rem, 4vw, 2.6rem);
  --section: clamp(4rem, 9vw, 8rem);
  --radius: 3px;      /* woodblock corners are near-square */
  --radius-lg: 6px;
}

/* ----------------------------- reset ----------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--sumi);
  font-family:var(--sans); font-size:var(--step-0); font-weight:400;
  line-height:1.72; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; color:var(--tea);
  line-height:1.12; letter-spacing:.01em; margin:0 0 .6em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

/* faint washi grain over everything */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------- layout ---------------------------- */
.container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.prose{ max-width:var(--prose); }
.section{ padding-block:var(--section); position:relative; z-index:2; }
.section--tint{ background:linear-gradient(180deg,var(--surface),#F7F4EA); }
.section--pine{ background:var(--tea); color:var(--mist); }
.section--pine h2,.section--pine h3{ color:#EAF2E1; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }

.grid{ display:grid; gap:clamp(1.1rem,2.4vw,2rem); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split--wide-left{ grid-template-columns:1.15fr .85fr; }
@media(max-width:860px){ .split,.split--wide-left{ grid-template-columns:1fr; } }

/* --------------------- eyebrow / cartouche ---------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-size:var(--step--1); font-weight:500;
  text-transform:uppercase; letter-spacing:.24em; color:var(--matcha);
  margin:0 0 1.1rem;
}
.eyebrow .kanji{ font-family:var(--serif); letter-spacing:.1em; color:var(--tea); font-size:1.05em; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--matcha); }
.center .eyebrow::before{ display:none; }

.cartouche{
  display:inline-flex; align-items:center; gap:.5em;
  border:1px solid var(--sumi-12); border-radius:var(--radius);
  padding:.4em .8em; font-size:var(--step--1); letter-spacing:.18em;
  text-transform:uppercase; color:var(--sumi-70); background:var(--surface);
}
.cartouche .kanji{ font-family:var(--serif); color:var(--matcha); letter-spacing:.08em; }

.lead{ font-size:var(--step-1); line-height:1.6; color:var(--sumi-70); }
.muted{ color:var(--sumi-55); }
.section__head{ max-width:640px; margin-bottom:clamp(2rem,4vw,3.4rem); }
.center .section__head{ margin-inline:auto; }

/* hairline divider */
.rule{ height:1px; background:var(--sumi-12); border:0; margin:0; }

/* ---------------------------- buttons --------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.5em; border-radius:var(--radius);
  font-family:var(--sans); font-weight:500; font-size:var(--step-0);
  letter-spacing:.02em; border:1px solid transparent; transition:.22s ease;
  will-change:transform;
}
.btn:focus-visible{ outline:2px solid var(--tender); outline-offset:3px; }
.btn--primary{ background:var(--tea); color:#F7F4EA; }
.btn--primary:hover{ background:var(--matcha); transform:translateY(-2px); }
.btn--ghost{ background:transparent; border-color:var(--sumi-12); color:var(--sumi); }
.btn--ghost:hover{ border-color:var(--tea); background:var(--surface); transform:translateY(-2px); }
.btn--light{ background:#F4F0E4; color:var(--tea); }
.btn--light:hover{ background:#fff; transform:translateY(-2px); }
.btn--tender{ background:var(--tender); color:var(--tea-950); font-weight:700; }
.btn--tender:hover{ background:#a3d075; transform:translateY(-2px); }
.btn .arrow{ transition:transform .22s ease; }
.btn:hover .arrow{ transform:translateX(3px); }
.actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }

/* --------------------------- navbar ----------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper-70); backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--sumi-08);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; height:68px; }
.brand{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--serif);
  font-weight:700; font-size:1.32rem; letter-spacing:.16em; color:var(--tea); }
.brand .brand__mark{ font-size:1.15rem; color:var(--matcha); letter-spacing:0; }
.brand small{ font-family:var(--sans); font-size:.6rem; letter-spacing:.3em;
  color:var(--sumi-55); text-transform:uppercase; align-self:center; }

.nav__links{ display:flex; align-items:center; gap:1.6rem; list-style:none; margin:0; padding:0; }
.nav__links a{ font-size:.94rem; letter-spacing:.03em; color:var(--sumi-70);
  padding:.3em 0; position:relative; transition:color .2s; }
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--tea); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px;
  width:0; background:var(--tender); transition:width .24s ease; }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ width:100%; }

/* dropdown */
.nav__drop{ position:relative; }
.nav__drop-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--surface); border:1px solid var(--sumi-12); border-radius:var(--radius-lg);
  box-shadow:0 18px 40px -22px rgba(27,42,32,.4); padding:.5rem; min-width:250px;
  opacity:0; visibility:hidden; transition:.2s ease; z-index:60;
}
.nav__drop:hover .nav__drop-panel,.nav__drop:focus-within .nav__drop-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav__drop-panel a{ display:block; padding:.6rem .7rem; border-radius:var(--radius);
  font-size:.9rem; color:var(--sumi-70); }
.nav__drop-panel a::after{ display:none; }
.nav__drop-panel a:hover{ background:var(--mist); color:var(--tea); }
.nav__drop-panel a b{ display:block; color:var(--tea); font-weight:600; font-size:.94rem; }
.nav__drop-panel a span{ font-size:.78rem; color:var(--sumi-55); }

.nav__cta{ display:flex; align-items:center; gap:.8rem; }
.nav__toggle{ display:none; background:none; border:0; width:42px; height:42px;
  padding:9px; border-radius:var(--radius); }
.nav__toggle span{ display:block; height:2px; background:var(--tea); margin:4px 0;
  transition:.25s ease; border-radius:2px; }

@media(max-width:960px){
  .nav__toggle{ display:block; }
  .nav__links{
    position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--surface); border-bottom:1px solid var(--sumi-12);
    padding:.5rem var(--gutter) 1.4rem; max-height:0; overflow:hidden;
    box-shadow:0 20px 40px -24px rgba(27,42,32,.4);
  }
  .nav[data-open="true"] .nav__links{ max-height:80vh; padding-block:1rem 1.4rem; }
  .nav__links li{ border-bottom:1px solid var(--sumi-08); }
  .nav__links a{ display:block; padding:.9rem 0; }
  .nav__drop-panel{ position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:0; padding:0 0 .4rem 1rem; min-width:0; background:transparent; }
  .nav__cta .btn--nav-hide{ display:none; }
}

/* ============================================================
   HERO — HTML-driven Ukiyo-e matcha-journey canvas
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:620px; max-height:1000px;
  overflow:hidden; background:linear-gradient(180deg,#cfe0d8,#eef1e6); z-index:2; }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* legibility scrim: strongest at bottom-left where copy sits */
.hero__scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(27,42,32,.28) 0%, rgba(27,42,32,0) 26%, rgba(27,42,32,0) 55%, rgba(27,42,32,.55) 100%),
    linear-gradient(75deg, rgba(27,42,32,.42) 0%, rgba(27,42,32,0) 52%);
}
.hero__overlay{ position:absolute; inset:0; display:flex; align-items:flex-end;
  padding-bottom:clamp(6.5rem,14vh,9rem); }
.hero__inner{ color:#F5F1E6; }
.hero__eyebrow{ display:inline-flex; gap:.6em; align-items:center;
  font-size:var(--step--1); letter-spacing:.28em; text-transform:uppercase;
  color:#E7F0DC; margin-bottom:1.1rem; }
.hero__eyebrow .kanji{ font-family:var(--serif); font-size:1.15em; color:#CFE6B4; letter-spacing:.1em; }
.hero__eyebrow::before{ content:""; width:30px; height:1px; background:#CFE6B4; }
.hero__title{ font-size:var(--step-4); color:#FBFCF7; max-width:16ch;
  text-shadow:0 2px 30px rgba(20,30,22,.35); margin-bottom:.5em; font-weight:600; }
.hero__title em{ font-style:italic; color:#CFE6A8; }
.hero__lead{ max-width:46ch; font-size:var(--step-1); color:#EDEDE0;
  text-shadow:0 1px 16px rgba(20,30,22,.4); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.9rem; }

/* stage bar (caption + timeline) */
.hero__stage{ position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding-bottom:clamp(1.1rem,3vh,2rem); pointer-events:none; }
.hero__stagebar{ display:flex; align-items:center; gap:1.4rem; }
.hero__caption{ display:flex; align-items:baseline; gap:.9rem; min-width:0;
  color:#F0F3E9; text-shadow:0 1px 12px rgba(20,30,22,.5); flex-shrink:0; }
.hero__stagenum{ font-family:var(--serif); font-size:.95rem; letter-spacing:.14em;
  color:#CFE6A8; }
.hero__stagelabel{ font-size:.9rem; letter-spacing:.06em; white-space:nowrap; }
.hero__controls{ display:flex; align-items:center; gap:.9rem; flex:1; pointer-events:auto; }
.hero__btn{ flex-shrink:0; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(245,241,230,.5); background:rgba(27,42,32,.32);
  color:#F5F1E6; backdrop-filter:blur(4px); display:grid; place-items:center;
  font-size:.7rem; transition:.2s; }
.hero__btn:hover{ background:rgba(27,42,32,.55); }
.hero__timeline{ -webkit-appearance:none; appearance:none; flex:1; height:3px;
  border-radius:3px; background:rgba(245,241,230,.35); cursor:pointer; }
.hero__timeline::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:13px; height:13px; border-radius:50%; background:var(--tender);
  border:2px solid #F5F1E6; box-shadow:0 0 0 1px rgba(27,42,32,.3); }
.hero__timeline::-moz-range-thumb{ width:13px; height:13px; border-radius:50%;
  background:var(--tender); border:2px solid #F5F1E6; }
@media(max-width:640px){ .hero__stagelabel{ display:none; } }

.hero__scroll{ position:absolute; right:var(--gutter); bottom:clamp(4.6rem,10vh,6rem);
  z-index:4; writing-mode:vertical-rl; font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:#EDF3E6; opacity:.9; display:flex; align-items:center; gap:1rem; }
.hero__scroll::after{ content:""; width:1px; height:44px; background:linear-gradient(#EDF3E6,transparent);
  animation:scrollpulse 2.2s ease-in-out infinite; }
@keyframes scrollpulse{ 0%,100%{ transform:scaleY(.5); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }
@media(max-width:640px){ .hero__scroll{ display:none; } }

/* trust strip under hero */
.trust{ background:var(--tea-950); color:var(--mist); }
.trust__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(1rem,4vw,3.2rem); padding-block:1.1rem; font-size:.86rem; letter-spacing:.04em; }
.trust__row span{ display:inline-flex; align-items:center; gap:.55em; color:#DDE7D3; }
.trust__row .kanji{ font-family:var(--serif); color:var(--tender); }

/* ------------------------ knowledge cards ----------------------- */
.kcard{ background:var(--surface); border:1px solid var(--sumi-08);
  border-radius:var(--radius-lg); padding:clamp(1.4rem,2.4vw,1.9rem);
  position:relative; overflow:hidden; transition:.25s ease; height:100%; }
.kcard::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--matcha),var(--tender)); transform:scaleX(0);
  transform-origin:left; transition:transform .3s ease; }
.kcard:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -30px rgba(27,42,32,.45); }
.kcard:hover::before{ transform:scaleX(1); }
.kcard__k{ font-family:var(--serif); font-size:1.5rem; color:var(--matcha);
  margin-bottom:.5rem; display:block; }
.kcard h3{ font-size:var(--step-1); margin-bottom:.5rem; }
.kcard p{ font-size:.96rem; color:var(--sumi-70); margin:0; }

/* ---------------------- process (numbered) ---------------------- */
.process{ display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border-top:1px solid var(--sumi-12); }
@media(max-width:900px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .process{ grid-template-columns:1fr; } }
.process__item{ padding:1.8rem 1.4rem 1.8rem 0; border-top:1px solid transparent;
  position:relative; }
.process__item::before{ content:""; position:absolute; top:-1px; left:0; width:34px; height:2px;
  background:var(--tender); }
.process__num{ font-family:var(--serif); font-size:2.1rem; color:var(--stone);
  line-height:1; display:block; margin-bottom:.7rem; }
.process__item h3{ font-size:1.05rem; margin-bottom:.35rem; letter-spacing:.02em; }
.process__item .kanji{ font-family:var(--serif); color:var(--matcha); font-size:.95rem; margin-left:.35em; }
.process__item p{ font-size:.88rem; color:var(--sumi-55); margin:0; }

/* ------------------------- feature list ------------------------- */
.flist{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.flist li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.flist .mark{ width:30px; height:30px; border-radius:50%; background:var(--mist);
  color:var(--tea); display:grid; place-items:center; font-family:var(--serif);
  font-size:.9rem; flex-shrink:0; margin-top:.1rem; }
.flist b{ color:var(--tea); font-weight:600; }
.flist p{ margin:.15rem 0 0; font-size:.94rem; color:var(--sumi-70); }

/* ------------------------- stat blocks -------------------------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--sumi-12);
  border:1px solid var(--sumi-12); border-radius:var(--radius-lg); overflow:hidden; }
@media(max-width:620px){ .stats{ grid-template-columns:1fr; } }
.stat{ background:var(--surface); padding:1.6rem 1.5rem; }
.section--pine .stat{ background:var(--tea-950); }
.stat__n{ font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.6rem); color:var(--matcha);
  line-height:1; margin-bottom:.3rem; }
.section--pine .stat__n{ color:var(--tender); }
.stat__l{ font-size:.85rem; color:var(--sumi-55); letter-spacing:.02em; }
.section--pine .stat__l{ color:#C7D6BC; }

/* --------------------------- table ------------------------------ */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--sumi-12); border-radius:var(--radius-lg); }
table.grade{ width:100%; border-collapse:collapse; min-width:560px; font-size:.92rem; }
table.grade th,table.grade td{ text-align:left; padding:.9rem 1.1rem; border-bottom:1px solid var(--sumi-08); }
table.grade thead th{ background:var(--tea); color:#EAF2E1; font-family:var(--sans);
  font-weight:500; letter-spacing:.04em; font-size:.8rem; text-transform:uppercase; }
table.grade tbody tr:nth-child(even){ background:rgba(221,231,211,.35); }
table.grade tbody tr:last-child td{ border-bottom:0; }
table.grade td b{ color:var(--tea); }

/* ============================================================
   SHOP — product cards
   ============================================================ */
.shop-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.6rem; }
.shop-tab{ padding:.6em 1.1em; border:1px solid var(--sumi-12); border-radius:100px;
  background:var(--surface); font-size:.88rem; color:var(--sumi-70); letter-spacing:.02em;
  transition:.2s; }
.shop-tab:hover{ border-color:var(--matcha); color:var(--tea); }
.shop-tab.is-active{ background:var(--tea); color:#EAF2E1; border-color:var(--tea); }
.shop-tab .kanji{ font-family:var(--serif); margin-right:.3em; }

.cat-band{ display:flex; align-items:center; gap:1rem; margin:3.4rem 0 1.6rem; }
.cat-band:first-of-type{ margin-top:0; }
.cat-band h2{ font-size:var(--step-2); margin:0; white-space:nowrap; }
.cat-band .kanji{ color:var(--matcha); font-size:.9em; }
.cat-band .line{ flex:1; height:1px; background:var(--sumi-12); }
.cat-band .count{ font-size:.8rem; color:var(--sumi-55); letter-spacing:.14em; text-transform:uppercase; }

.pcard{ background:var(--surface); border:1px solid var(--sumi-08); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:.25s ease; height:100%; }
.pcard:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -32px rgba(27,42,32,.5);
  border-color:var(--sumi-12); }
.pcard__media{ aspect-ratio:4/3; position:relative; display:grid; place-items:center;
  overflow:hidden; border-bottom:1px solid var(--sumi-08);
  background:linear-gradient(160deg,#EEF4E6,#DCEBCB); }
.pcard__media svg{ width:64%; height:64%; }
.pcard__badge{ position:absolute; top:.8rem; left:.8rem; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; padding:.35em .7em; border-radius:100px;
  font-weight:600; }
.badge--in{ background:rgba(92,139,76,.16); color:#3B6B31; }
.badge--low{ background:rgba(188,85,64,.14); color:var(--beni); }
.badge--pre{ background:rgba(169,158,134,.2); color:#6E6650; }
.pcard__origin{ position:absolute; top:.8rem; right:.8rem; font-family:var(--serif);
  font-size:.8rem; color:var(--sumi-55); background:var(--paper-70); padding:.15em .6em;
  border-radius:100px; backdrop-filter:blur(4px); }
.pcard__body{ padding:1.3rem 1.35rem 1.45rem; display:flex; flex-direction:column; flex:1; }
.pcard__grade{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--matcha); font-weight:500; margin-bottom:.45rem; }
.pcard h3{ font-size:1.25rem; margin-bottom:.55rem; line-height:1.2; }
.pcard h3 .jp{ font-size:.78em; color:var(--stone); margin-left:.35em; }
.pcard__desc{ font-size:.9rem; color:var(--sumi-70); margin-bottom:1rem; }
.pcard__meta{ list-style:none; margin:0 0 1.1rem; padding:.9rem 0 0; border-top:1px solid var(--sumi-08);
  display:grid; gap:.4rem; font-size:.83rem; }
.pcard__meta li{ display:grid; grid-template-columns:5.6rem 1fr; gap:.6rem; }
.pcard__meta .lbl{ color:var(--sumi-55); letter-spacing:.02em; }
.pcard__meta .val{ color:var(--sumi); }
.pcard__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pcard__price{ font-family:var(--serif); font-size:1.35rem; color:var(--tea); line-height:1; }
.pcard__price small{ font-family:var(--sans); font-size:.7rem; color:var(--sumi-55);
  display:block; letter-spacing:.03em; margin-top:.3rem; }
.pcard__price .from{ font-family:var(--sans); font-size:.62em; color:var(--sumi-55); letter-spacing:.1em; text-transform:uppercase; }
.pcard__add{ padding:.65em 1.05em; border-radius:var(--radius); background:var(--tea);
  color:#EAF2E1; font-size:.85rem; font-weight:500; transition:.2s; border:1px solid var(--tea); white-space:nowrap; }
.pcard__add:hover{ background:var(--matcha); border-color:var(--matcha); }
.pcard__add[disabled]{ background:transparent; color:var(--sumi-55); border-color:var(--sumi-12); cursor:default; }

/* price disclaimer note */
.note{ font-size:.82rem; color:var(--sumi-55); background:var(--surface);
  border:1px solid var(--sumi-08); border-left:3px solid var(--matcha);
  border-radius:var(--radius); padding:1rem 1.2rem; line-height:1.6; }

/* --------------------------- FAQ -------------------------------- */
.faq{ border-top:1px solid var(--sumi-12); }
.faq details{ border-bottom:1px solid var(--sumi-12); }
.faq summary{ list-style:none; cursor:pointer; padding:1.3rem 3rem 1.3rem 0;
  font-family:var(--serif); font-size:var(--step-1); color:var(--tea); position:relative;
  transition:color .2s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:1.5rem; color:var(--matcha); transition:.25s ease; font-weight:300; }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq summary:hover{ color:var(--matcha); }
.faq details > div{ padding:0 3rem 1.5rem 0; color:var(--sumi-70); font-size:.96rem; max-width:70ch; }
.faq details > div p{ margin-bottom:.8rem; }

/* --------------------- innovation diagram ----------------------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:flow;
  border:1px solid var(--sumi-12); border-radius:var(--radius-lg); overflow:hidden; }
@media(max-width:820px){ .flow{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .flow{ grid-template-columns:1fr; } }
.flow__step{ padding:1.7rem 1.4rem; background:var(--surface); border-right:1px solid var(--sumi-08);
  position:relative; }
.flow__step:last-child{ border-right:0; }
.flow__ic{ width:46px; height:46px; margin-bottom:1rem; color:var(--matcha); }
.flow__step h3{ font-size:1.05rem; margin-bottom:.4rem; }
.flow__step p{ font-size:.86rem; color:var(--sumi-55); margin:0; }
.flow__step .step-n{ position:absolute; top:1.1rem; right:1.2rem; font-family:var(--serif);
  font-size:.85rem; color:var(--stone); letter-spacing:.1em; }

.adv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--sumi-12);
  border:1px solid var(--sumi-12); border-radius:var(--radius-lg); overflow:hidden; }
@media(max-width:860px){ .adv-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .adv-grid{ grid-template-columns:1fr; } }
.adv{ background:var(--surface); padding:1.5rem 1.5rem; }
.adv__ic{ width:34px; height:34px; color:var(--matcha); margin-bottom:.9rem; }
.flow__ic *, .adv__ic *{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.adv h3{ font-size:1.02rem; margin-bottom:.4rem; }
.adv p{ font-size:.87rem; color:var(--sumi-70); margin:0; }

/* pill list */
.pills{ display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; margin:1.4rem 0 0; padding:0; }
.pills li{ font-size:.83rem; padding:.45em .9em; border-radius:100px; background:var(--mist);
  color:var(--tea); letter-spacing:.02em; }

/* ------------------- ingredient split panels -------------------- */
.ingredient{ border:1px solid var(--sumi-12); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); height:100%; display:flex; flex-direction:column; }
.ingredient__top{ padding:1.7rem 1.7rem 1.3rem; border-bottom:1px solid var(--sumi-08); }
.ingredient__jp{ font-family:var(--serif); font-size:2rem; color:var(--matcha); line-height:1; }
.ingredient__top h3{ font-size:var(--step-2); margin:.5rem 0 .3rem; }
.ingredient__top .sub{ font-size:.85rem; color:var(--sumi-55); letter-spacing:.06em; }
.ingredient__body{ padding:1.5rem 1.7rem 1.8rem; display:grid; gap:1.3rem; }
.ingredient__body h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--matcha); margin:0 0 .6rem; }
.ingredient__body ul{ margin:0; padding-left:1.1rem; display:grid; gap:.4rem; }
.ingredient__body li{ font-size:.92rem; color:var(--sumi-70); }
.ingredient__body li::marker{ color:var(--tender); }

/* -------------------------- callout ----------------------------- */
.callout{ background:var(--tea); color:#EAF2E1; border-radius:var(--radius-lg);
  padding:clamp(2.2rem,5vw,3.6rem); position:relative; overflow:hidden; }
.callout h2{ color:#F4F9EE; }
.callout p{ color:#D5E3CA; max-width:52ch; }
.callout .actions{ margin-top:2rem; }
.callout__seigaiha{ position:absolute; inset:0; opacity:.1; pointer-events:none; }

/* --------------------------- footer ----------------------------- */
.footer{ background:var(--tea-950); color:#C7D6BC; position:relative; z-index:2;
  padding-block:clamp(3.4rem,7vw,5rem) 2rem; overflow:hidden; }
.footer__seigaiha{ position:absolute; top:0; left:0; right:0; height:120px; opacity:.14; pointer-events:none; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.4rem; position:relative; }
@media(max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer .brand{ color:#EAF2E1; margin-bottom:1rem; }
.footer .brand .brand__mark{ color:var(--tender); }
.footer__about{ font-size:.92rem; color:#A9BCA0; max-width:36ch; }
.footer h4{ font-family:var(--sans); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tender); margin:0 0 1.1rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.footer ul a{ font-size:.92rem; color:#B9CBB0; transition:color .2s; }
.footer ul a:hover{ color:#EAF2E1; }
.footer__bar{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(199,214,188,.18);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:center;
  font-size:.82rem; color:#93A78B; position:relative; }
.footer__bar .kanji{ font-family:var(--serif); color:var(--tender); }

/* --------------------- reveal-on-scroll ------------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ------------------------ reduced motion ------------------------ */
@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__scroll::after{ animation:none; }
}

/* ============================================================
   DUAL-DOMAIN GATING
   One codebase, two brand faces:
     NovoMatcha.com.au  -> data-domain="retail"     (matcha only)
     NeoTea.com         -> data-domain="innovation"  (matcha + R&D)
   The brand wordmark and R&D visibility are set by neotea-site.js
   from the hostname (with ?domain= override for previews).
   Elements marked .rnd-only are hidden on the retail domain.
   ============================================================ */
html[data-domain="retail"] .rnd-only{ display:none !important; }

/* brand wordmark & any brand-specific copy: default shows the NeoTea
   (innovation) face; the retail domain flips to the NovoMatcha face.
   A synchronous <head> script sets data-domain before paint, so there
   is no flash and no layout shift. */
/* Hide-only pattern: the SHOWN variant keeps its natural display
   (inline span, inline-flex .btn, block div), only the other is removed.
   Default (no JS / unresolved) shows the innovation face. */
html:not([data-domain]) .only-retail{ display:none; }
html[data-domain="innovation"] .only-retail{ display:none; }
html[data-domain="retail"] .only-innovation{ display:none; }
/* retail footer drops the Innovation column, so rebalance to 3 columns */
html[data-domain="retail"] .footer__grid{ grid-template-columns:1.6fr 1fr 1fr; }
@media(max-width:860px){ html[data-domain="retail"] .footer__grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ html[data-domain="retail"] .footer__grid{ grid-template-columns:1fr; } }

/* the two-route diagram used on the L-theanine synthesis page */
.route-split{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;
  gap:clamp(1rem,2.4vw,1.8rem); }
@media(max-width:760px){ .route-split{ grid-template-columns:1fr; } }
.route-split__vs{ align-self:center; font-family:var(--serif); color:var(--stone);
  font-size:1.1rem; letter-spacing:.14em; writing-mode:vertical-rl; }
@media(max-width:760px){ .route-split__vs{ writing-mode:horizontal-tb; text-align:center; } }
.route{ background:var(--surface); border:1px solid var(--sumi-12); border-radius:var(--radius-lg);
  padding:1.6rem 1.6rem; }
.route h3{ font-size:var(--step-1); margin-bottom:.5rem; }
.route .route__tag{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--matcha); font-weight:500; display:block; margin-bottom:.5rem; }
.route p{ font-size:.92rem; color:var(--sumi-70); margin:0; }

/* simple left-to-right reaction / equation strip */
.rxn{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem;
  border:1px solid var(--sumi-12); border-radius:var(--radius-lg); background:var(--surface);
  padding:1.4rem 1.5rem; font-family:var(--serif); }
.rxn .mol{ display:inline-flex; flex-direction:column; gap:.15rem; }
.rxn .mol b{ color:var(--tea); font-size:1.02rem; font-weight:600; }
.rxn .mol span{ font-family:var(--sans); font-size:.74rem; color:var(--sumi-55); letter-spacing:.02em; }
.rxn .op{ color:var(--stone); font-size:1.2rem; }
.rxn .enz{ display:inline-flex; flex-direction:column; align-items:center; color:var(--matcha); }
.rxn .enz b{ font-size:.92rem; }
.rxn .enz span{ font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sumi-55); }
.rxn .arrow-x{ position:relative; min-width:74px; height:2px; background:var(--matcha); }
.rxn .arrow-x::after{ content:""; position:absolute; right:-1px; top:-4px; border-left:8px solid var(--matcha);
  border-top:5px solid transparent; border-bottom:5px solid transparent; }