/* ============================================================
   Dino Signal — 製版房 v2, rebranded
   The proof-sheet structure is kept (crop marks, registration, guillotine
   cuts); the palette is Dino Signal's: Signal Yellow #FCBA02 on Ink #111827,
   per docs/company/brand.md.

   The brand's colour rule drives every substitution below: the yellow is a
   FILL, never text on a light surface (no shade of it clears WCAG AA there).
   So every accent that used to be printed in green — headline em, step
   numbers, product icons — is now ink, and the yellow does its work as
   chips, rules, fills and the focus ring instead. On the ink surfaces the
   yellow IS legible, so a lighter tint of the same hue (--brand-lift) is
   used for text there.
   ============================================================ */

/* Self-hosted so nothing shifts if a webfont is slow, and so the page makes
   no third-party request. Copied from packages/ui/assets/fonts — a product
   tree owns its copy rather than reaching into shared infra (ADR-0017). */
@font-face{
  font-family:"Space Grotesk";
  src:url("fonts/space-grotesk.woff2") format("woff2");
  font-weight:500 700;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter.woff2") format("woff2");
  font-weight:400 700;font-display:swap;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:0;padding:0;color:inherit;cursor:pointer;}
input,select{font:inherit;}

:root{
  /* The old print-shop green is retired. The names survive so the rest of the
     sheet needs no rewrite, but every one of them now resolves to the brand's
     ink foundation — accents on a light surface are ink, by rule. */
  --green:#111827;
  --green-deep:#111827;
  --green-tint:rgba(252,186,2,.16);
  --orange:#fcba02;          /* Signal Yellow — the one brand hue */
  --orange2:#e0a500;         /* the single deeper shade, for hover */
  --orange-text:#111827;     /* brand-coloured TEXT is ink, never the yellow */
  --brand-lift:#ffd24d;      /* a lighter tint of the same hue, for ink surfaces */
  --ink:#111827;
  --ink-soft:#374151;
  --paper:#f9fafb;
  --paper2:#f3f4f6;
  --line:rgba(17,24,39,.18);
  --line-strong:rgba(17,24,39,.42);
  /* The misregistration ghost was CMYK because the old brand was a printer.
     It is now the brand pair, so the effect reads as a signal echo. */
  --cyan:#fcba02;
  --magenta:#6b7280;
  --wa:#1fa855;
  --wa-ink:#06381f;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --display:"Space Grotesk","Noto Sans TC","Microsoft JhengHei","PingFang HK",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Inter","Noto Sans TC","Microsoft JhengHei","PingFang HK","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out-exp:cubic-bezier(.19,1,.22,1);
  --container:1240px;
}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* Display type is Space Grotesk, tight — the brand's headline setting. Chinese
   glyphs are not in that file, so the CJK stack behind it does the real work on
   this site and Space Grotesk sets the Latin runs (DINO SIGNAL, STEP 01, $138). */
h1,h2,h3,h4,.headline,.brand-word strong,.p-name,.section-head .title,.slab-inner h2{
  font-family:var(--display);letter-spacing:-.015em;
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}

.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,3rem);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;}
.skip-link{position:absolute;top:0;left:1rem;background:var(--ink);color:#fff;padding:.75rem 1.25rem;z-index:200;transform:translateY(-140%);transition:transform .25s var(--ease);font-weight:700;}
.skip-link:focus{transform:translateY(.5rem);}
/* The brand's 3px yellow focus ring. On a light surface the yellow alone is
   ~1.7:1 against the paper — below the 3:1 a focus indicator has to clear — so
   it is backed by a 1px ink edge. Yellow on the ink sections, ink on the paper
   ones: the ring is visible on both without leaving the palette. */
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;box-shadow:0 0 0 1px var(--ink);}

section{padding-block:clamp(3rem,8vw,6rem);position:relative;}

/* ============ REGISTRATION MARKS SYSTEM ============ */
.sheet{position:relative;overflow-x:clip;} /* the press head parks at 100vw+40px after its sweep; without clipping, its resting box widens the document and the page scrolls sideways */
.crop{position:absolute;width:22px;height:22px;pointer-events:none;color:var(--line-strong);z-index:3;}
.crop svg{width:100%;height:100%;}
.crop-tl{top:10px;left:10px;}
.crop-tr{top:10px;right:10px;}
.crop-bl{bottom:10px;left:10px;}
.crop-br{bottom:10px;right:10px;}
@media (max-width:640px){.crop{width:15px;height:15px;}.crop-tl,.crop-tr{top:6px;}.crop-bl,.crop-br{bottom:6px;}.crop-tl,.crop-bl{left:6px;}.crop-tr,.crop-br{right:6px;}}

.reg{color:var(--line-strong);}
.reg svg{width:100%;height:100%;}

.dim{display:inline-flex;flex-direction:column;gap:.35rem;font-family:var(--mono);}
.dim-svg{width:100%;height:14px;color:var(--ink-soft);overflow:visible;}
.dim-svg line{stroke:currentColor;stroke-width:1.2;}
.dim-label{font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);white-space:nowrap;}

/* ============ MISREGISTRATION GHOST (hover ink offset) ============ */
.mis{position:relative;display:inline-flex;align-items:center;min-height:48px;isolation:isolate;} /* product-index links are primary navigation on a phone — 48px floor */
.mis .mis-c,.mis .mis-m{position:absolute;left:0;top:0;right:0;opacity:0;pointer-events:none;mix-blend-mode:multiply;transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:-1;}
.mis .mis-c{color:var(--cyan);}
.mis .mis-m{color:var(--magenta);}
.mis:hover .mis-c,.mis:focus-visible .mis-c,.mis.is-active .mis-c{opacity:.72;transform:translate(-2px,-1px);}
.mis:hover .mis-m,.mis:focus-visible .mis-m,.mis.is-active .mis-m{opacity:.72;transform:translate(2px,1px);}
@media (prefers-reduced-motion:reduce){.mis .mis-c,.mis .mis-m{transition:none;}}

/* ============ CHOP-STAMP BUTTONS ============ */
.chop{
  --cut:9px;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:50px;padding:.9rem 1.7rem;
  font-weight:800;font-size:.98rem;letter-spacing:.01em;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  position:relative;
  transition:transform .3s var(--ease);
}
.chop:hover{transform:translate(-1px,-2px);}
.chop:active{transform:translate(0,0);}
.chop-primary{background:var(--orange);color:var(--ink);}
.chop-primary::after{
  content:"";position:absolute;inset:0;background:var(--orange2);opacity:0;
  clip-path:inherit;transition:opacity .25s var(--ease);z-index:-1;
}
.chop-primary:hover::after{opacity:1;}
.chop-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);}
.chop-line:hover{background:var(--ink);color:var(--paper);}
.chop-wa{background:var(--wa);color:#fff;}
.chop-wa:hover{background:#188a45;}
.chop svg{flex:none;}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(249,250,251,.94);backdrop-filter:saturate(160%) blur(8px);border-bottom:1.5px solid var(--ink);}
.header-row{display:flex;align-items:center;justify-content:space-between;padding-block:.7rem;gap:1rem;}
.brand{display:flex;align-items:center;gap:.6rem;min-width:0;min-height:48px;}
.brandmark{width:36px;height:36px;flex:none;}
.brand-word{display:flex;flex-direction:column;line-height:1.1;min-width:0;}
.brand-word strong{font-size:1rem;font-weight:900;letter-spacing:.01em;white-space:nowrap;}
.brand-word span{font-size:.68rem;color:var(--ink-soft);font-family:var(--mono);white-space:nowrap;}
.site-nav ul{display:flex;gap:clamp(1rem,2vw,1.9rem);align-items:center;}
.site-nav a{display:inline-flex;align-items:center;min-height:48px;font-size:.9rem;font-weight:700;color:var(--ink-soft);padding:.4rem .1rem;position:relative;}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease);}
.site-nav a:hover{color:var(--ink);}
.site-nav a:hover::after{transform:scaleX(1);}
.header-cta{display:flex;align-items:center;gap:.55rem;}
.header-cta .chop{padding:.6rem 1.05rem;font-size:.86rem;min-height:48px;--cut:6px;}
.header-cta .chop span{display:none;}
@media (min-width:560px){.header-cta .chop span{display:inline;}}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:48px;height:48px;}
.nav-toggle span{width:22px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:899px){
  .site-nav{position:fixed;inset:63px 0 auto 0;background:var(--paper);border-bottom:1.5px solid var(--ink);clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path .35s var(--ease),opacity .3s var(--ease);}
  .site-nav.is-open{clip-path:inset(0 0 0 0);opacity:1;}
  .site-nav ul{flex-direction:column;align-items:stretch;padding:.5rem 1.25rem 1.25rem;gap:0;}
  .site-nav li{border-top:1px solid var(--line);}
  .site-nav a{display:flex;padding:.9rem .2rem;}
  .site-nav a::after{display:none;}
}
@media (min-width:900px){.nav-toggle{display:none;}}

/* ============ PRINT REVEAL ENGINE ============ */
.print-veil{
  clip-path:inset(0 100% 0 0);
  animation:veil-load 1s var(--ease-out-exp) forwards;
  animation-play-state:paused;
}
.veil-run .print-veil{animation-play-state:running;}
@keyframes veil-load{to{clip-path:inset(0 0 0 0);}}
.press-pass{
  --p:1;
  clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);
  position:relative;
}
.halftone-veil{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-color:var(--ink);
  -webkit-mask-image:radial-gradient(circle,#000 1.6px,transparent 1.7px);
  mask-image:radial-gradient(circle,#000 1.6px,transparent 1.7px);
  -webkit-mask-size:7px 7px;mask-size:7px 7px;
  opacity:0;
}
@media (prefers-reduced-motion:reduce){
  .print-veil{clip-path:inset(0 0 0 0) !important;animation:none !important;}
  .press-pass{clip-path:inset(0 0 0 0) !important;}
  .halftone-veil{display:none;}
}

/* guillotine cut divider */
.cut{position:relative;height:34px;margin-block:-1px;overflow:visible;}
.cut-blade{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-out-exp);}
.cut.is-cut .cut-blade{transform:scaleX(1);}
.cut-blade::before,.cut-blade::after{content:"";position:absolute;top:-4px;width:2px;height:10px;background:var(--ink);}
.cut-blade::before{left:-1px;}
.cut-blade::after{right:-1px;}
.cut-shift{position:relative;transform:translateY(6px);opacity:0;transition:transform .5s var(--ease-out-exp) .12s,opacity .5s var(--ease-out-exp) .12s;}
.cut-shift::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:linear-gradient(rgba(0,0,0,.16),transparent);pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out-exp) .12s;}
.cut.is-cut + .cut-shift,.cut.is-cut ~ .cut-shift{transform:translateY(0);opacity:1;}
.cut.is-cut + .cut-shift::before,.cut.is-cut ~ .cut-shift::before{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .cut-blade{transform:scaleX(1) !important;transition:none !important;}
  .cut-shift{transform:none !important;opacity:1 !important;transition:none !important;}
  .cut-shift::before{transition:none !important;}
}

/* ============ HERO ============ */
.hero{background:var(--paper);padding-block:clamp(2.2rem,6vw,3.5rem) clamp(3rem,7vw,4.5rem);border-bottom:1.5px solid var(--ink);}
.press-head{
  position:absolute;top:0;bottom:0;left:0;width:120px;z-index:2;pointer-events:none;
  transform:translateX(-160px);
  animation:head-sweep 1.15s var(--ease-out-exp) .05s forwards;
  animation-play-state:paused;
}
.veil-run .press-head{animation-play-state:running;}
.press-head::before{
  content:"";position:absolute;inset:0 20px 0 0;
  background:repeating-radial-gradient(circle at center,rgba(17,24,39,.55) 0 1.4px,transparent 1.5px 7px);
  mask-image:linear-gradient(90deg,transparent,#000 55%,#000);
  opacity:.85;
}
.press-head::after{content:"";position:absolute;top:0;bottom:0;right:0;width:6px;background:linear-gradient(180deg,var(--orange),var(--ink));box-shadow:0 0 22px 2px rgba(252,186,2,.45);}
@keyframes head-sweep{to{transform:translateX(calc(100vw + 40px));}}
@media (prefers-reduced-motion:reduce){.press-head{display:none;}}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;}
.hero-rail{display:flex;flex-direction:column;gap:1.4rem;padding-top:.3rem;}
.v-label{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--ink-soft);white-space:nowrap;}
.v-label b{color:var(--ink);}
@media (max-width:720px){.hero-grid{grid-template-columns:1fr;}.hero-rail{flex-direction:row;gap:1.4rem;padding-top:0;}.v-label{writing-mode:horizontal-tb;transform:none;}}

.hero-main{max-width:820px;}
.headline{font-weight:900;letter-spacing:-.01em;line-height:1.04;}
.headline .line{display:block;font-size:clamp(2.6rem,9vw,7.2rem);}
.headline .line:nth-child(1){color:var(--ink);}
.headline .line:nth-child(2){font-size:clamp(1.7rem,5.4vw,3.6rem);color:var(--ink-soft);font-weight:800;margin-top:.3rem;line-height:1.2;}
/* The emphasised run was printed in the old green. Yellow cannot replace it as
   text on paper, so the word stays ink and the yellow arrives underneath it as
   a marker-pen fill — the brand's "yellow is a fill" rule, applied literally. */
.headline .line:nth-child(2) em{
  font-style:normal;color:var(--ink);
  background:linear-gradient(var(--orange),var(--orange)) no-repeat 0 78%/100% .42em;
  padding-inline:.1em;
}
.lede{margin-top:1.4rem;color:var(--ink-soft);font-size:clamp(1rem,1.7vw,1.15rem);max-width:52ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;}

.hero-side{margin-top:clamp(2rem,5vw,0);}
.hero-mark{margin-top:clamp(2.5rem,6vw,0);}
.mark1886{width:100%;max-width:420px;height:auto;overflow:visible;}
/* A display mark, not text — which is the one place the yellow may sit on paper
   at full strength. Set in the brand's display face. */
.mark-outline{font:700 150px/1 var(--display);letter-spacing:-.02em;fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.28;}
.mark-fill{font:700 150px/1 var(--display);letter-spacing:-.02em;fill:var(--orange);clip-path:inset(0 100% 0 0);animation:mark-fill-load 1s var(--ease-out-exp) .55s forwards;animation-play-state:paused;}
.veil-run .mark-fill{animation-play-state:running;}
@keyframes mark-fill-load{to{clip-path:inset(0 0 0 0);}}
@media (prefers-reduced-motion:reduce){.mark-fill{clip-path:inset(0 0 0 0) !important;animation:none !important;}}
.hero-dim{margin-top:1rem;max-width:420px;}

/* ============ CALIBRATION / TICKER STRIP ============ */
.calib-strip{background:var(--ink);color:var(--paper);padding-block:.85rem;overflow:hidden;}
.calib-row{display:flex;align-items:center;gap:1.4rem;}
.calib-swatches{display:flex;gap:3px;flex:none;padding-inline:.2rem;}
.calib-swatches span{width:9px;height:9px;}
.ticker-wrap{overflow:hidden;flex:1;min-width:0;}
.ticker-track{display:flex;width:max-content;gap:2.4rem;animation:ticker-scroll 28s linear infinite;}
.calib-strip:hover .ticker-track,.calib-strip:focus-within .ticker-track{animation-play-state:paused;}
.ticker-set{display:flex;gap:2.4rem;flex:none;}
.ticker-item{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.85rem;white-space:nowrap;}
/* On the ink strip the yellow IS legible as text, at the lighter tint. */
.ticker-item b{color:var(--brand-lift);font-weight:800;}
.ticker-item .dot{width:4px;height:4px;border-radius:50%;background:rgba(249,250,251,.4);}
@keyframes ticker-scroll{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;flex-wrap:wrap;width:100%;}
  .ticker-set:nth-child(2){display:none;}
}

/* ============ PRODUCT INDEX (typographic list, not cards) ============ */
.products{background:var(--paper);}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(2rem,5vw,3rem);border-bottom:1.5px solid var(--ink);padding-bottom:1.2rem;}
.section-head .title{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:900;letter-spacing:-.01em;}
.section-head .title .idx-total{font-family:var(--mono);font-weight:400;font-size:.5em;color:var(--ink-soft);margin-left:.5rem;}
.section-head .lede{margin:0;max-width:38ch;font-size:.95rem;}

.p-index{border-top:1.5px solid var(--ink);}
.p-row{
  position:relative;display:flex;align-items:center;gap:clamp(.8rem,2vw,1.8rem);
  padding-block:clamp(1.1rem,2.6vw,1.6rem);
  border-bottom:1.5px solid var(--ink);
}
.p-row:nth-child(even){flex-direction:row-reverse;text-align:right;}
.p-row-fill{position:absolute;inset:0;background:var(--green-tint);transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease-out-exp);z-index:0;}
.p-row:nth-child(even) .p-row-fill{transform-origin:right center;}
.p-row:hover .p-row-fill,.p-row:focus-within .p-row-fill{transform:scaleX(1);}
.p-num{position:relative;z-index:1;font-family:var(--mono);font-size:.85rem;color:var(--ink-soft);flex:none;width:2.4ch;}
.p-icon{position:relative;z-index:1;width:clamp(30px,4vw,44px);height:clamp(30px,4vw,44px);color:var(--ink);flex:none;}
.p-body{position:relative;z-index:1;flex:1;min-width:0;}
.p-name{font-size:clamp(1.3rem,3.4vw,2.1rem);font-weight:800;letter-spacing:-.005em;}
.p-name a{display:inline-block;}
.p-spec{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:.35rem;}
.p-more{display:block;font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);opacity:.75;margin-top:.4rem;}
.p-price{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;min-height:48px;font-weight:900;font-size:clamp(1.1rem,2.6vw,1.5rem);color:var(--ink);background:var(--orange);padding:.35rem .8rem;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);white-space:nowrap;}
.p-price small{font-size:.55em;font-weight:700;}
@media (max-width:680px){
  .p-row,.p-row:nth-child(even){flex-direction:column;align-items:flex-start;text-align:left;gap:.6rem;}
  .p-num{order:1;}
  .p-icon{order:2;}
  .p-body{order:3;}
  .p-price{order:4;align-self:flex-start;}
}

/* ============ STEPS (production run) ============ */
.steps-section{background:var(--paper2);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);}
.steps{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);}
.step{position:relative;padding:1.4rem 1.2rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
/* Ink text, yellow marker — the accent is carried by a fill, not by the type. */
.step-num{font-family:var(--mono);font-size:.75rem;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:.45rem;margin-bottom:.6rem;}
.step-num::before{content:"";width:10px;height:10px;background:var(--orange);flex:none;}
.step h3{font-size:1.02rem;font-weight:800;margin-bottom:.35rem;}
.step p{font-size:.82rem;color:var(--ink-soft);}

/* ============ MEMBERSHIP INK SLAB ============ */
.membership{padding-block:0;}
.ink-slab{
  position:relative;overflow:hidden;background:var(--green-deep);color:#fff;
  padding:clamp(2.4rem,6vw,4rem) clamp(1.2rem,4vw,3rem);
}
.ink-slab::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 12%,rgba(252,186,2,.45),transparent 45%);mix-blend-mode:screen;pointer-events:none;}
.slab-inner{position:relative;display:grid;gap:1.8rem;max-width:var(--container);margin-inline:auto;}
@media (min-width:820px){.slab-inner{grid-template-columns:1.3fr auto;align-items:center;}}
.slab-inner h2{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:900;line-height:1.35;}
.slab-inner h2 b{color:var(--brand-lift);font-weight:700;}
.slab-inner p{margin-top:.7rem;color:rgba(255,255,255,.82);max-width:52ch;}
.slab-actions{display:flex;flex-wrap:wrap;gap:.85rem;}
.chop-invert{background:#fff;color:var(--green-deep);}
.chop-invert:hover{background:var(--orange);color:var(--ink);}
.chop-ghost{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);color:#fff;}
.chop-ghost:hover{background:rgba(255,255,255,.14);}

/* ============ FOOTER ============ */
.proof-strip{background:var(--paper2);border-top:1.5px solid var(--ink);padding-block:1rem;}
.proof-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);}
.proof-ramp{display:flex;gap:1px;}
.proof-ramp span{width:16px;height:16px;}
.proof-label{letter-spacing:.08em;}

.site-footer{background:var(--ink);color:rgba(249,250,251,.82);padding-block:3.2rem 1.8rem;}
.footer-grid{display:grid;gap:2.2rem;grid-template-columns:1.3fr 1fr 1fr;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;}
.footer-brand strong{color:#fff;font-size:1.02rem;font-weight:900;}
.footer-col h4{color:#fff;font-size:.85rem;font-weight:800;margin-bottom:.9rem;letter-spacing:.08em;font-family:var(--mono);text-transform:uppercase;}
.footer-col p,.footer-col address{font-style:normal;font-size:.88rem;color:rgba(249,250,251,.68);margin-bottom:.55rem;}
.footer-col a{font-size:.88rem;color:rgba(249,250,251,.85);display:inline-flex;align-items:center;min-height:48px;padding:.15rem 0;}
.footer-col a:hover{color:var(--brand-lift);}
.footer-bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(249,250,251,.15);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.78rem;color:rgba(249,250,251,.5);font-family:var(--mono);}
.footer-bottom a{color:rgba(249,250,251,.85);font-weight:700;}
.footer-bottom a:hover{color:var(--brand-lift);}

/* Footer links are tap targets like any other — the credit and WhatsApp lines were 17px tall. */
footer a{display:inline-flex;align-items:center;min-height:48px;}

/* ============ DEMO RIBBON ============
   Ink bar, yellow chip. It is deliberately the first thing above the header and
   it is real markup, not a ::before — a decoration is the first casualty of
   print, reader mode and a cropped screenshot, and this is the one line on the
   page that must survive all three. Not sticky: the header already owns top:0,
   and on mobile .site-nav is positioned against that 63px offset. */
.p-demo{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:var(--ink);color:rgba(249,250,251,.88);
  padding:.55rem clamp(1.1rem,4vw,3rem);
  font-size:.78rem;line-height:1.5;
}
.p-demo__tag{
  flex:none;background:var(--orange);color:var(--ink);
  font-family:var(--mono);font-weight:800;font-size:.7rem;letter-spacing:.12em;
  padding:.15rem .5rem;
}

/* Each footer link on its own line. They were inline-flex, so the long email and
   the link after it ran together as one sentence — "scottwong@… 產品索引". */
.footer-col a{display:flex;width:fit-content;max-width:100%;overflow-wrap:anywhere;}