/* ====================================================
   GRADE DETAIL PAGES (/ceremonial, /horeca, /daily), /products, and the shared shop chrome.
   The detail page is built from the homepage's own pieces in style.css (window card, section
   label + bold/italic title, lead, stat rows, numbered line list, arrow links); this file only
   lays them out and adds the buying controls.
   ==================================================== */

body.gp {
  --bg: #FDFBF7;
  --gp-tile: #F4F1EB;
  --gp-tile-hi: #FAF8F4;
  --gp-ink: #111111;
  --gp-muted: #6B665E;
  --gp-line: rgba(17, 17, 17, 0.08);
  --gp-accent: #2D4C38;
  --gp-accent-ink: #F4F7F5;
  --gp-r-tile: 22px;
  --gp-r-ctl: 14px;
  --gp-nav: 4.5rem;
  --gp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-20: 1.25rem;
  --t-28: 1.75rem;
  background: var(--bg);
  color: var(--gp-ink);
}
html:has(body.gp) { scroll-behavior: auto; }
body.gp :is(button, a, .gp-track):focus-visible { outline: 2px solid var(--gp-accent); outline-offset: 3px; }

/* ====================================================
   PRODUCT DETAIL
   ==================================================== */
.pdp { padding-top: calc(var(--gp-nav) + 1.5rem); }
.pdp-hero {
  --pdp-h: clamp(340px, 58vh, 600px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: start; padding-bottom: clamp(4rem, 10vh, 7rem);
}

/* the product stands on the page itself, and stays in view while the details scroll past */
.pdp-media { position: sticky; top: calc(var(--gp-nav) + 1rem); }
.pdp-media .gp-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pdp-media .gp-track::-webkit-scrollbar { display: none; }
.gp-slide { scroll-snap-align: center; scroll-snap-stop: always; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 2rem 0; }
/* explicit height, no max-width: WebKit can't size the width from aspect-ratio against % sizes here */
.gp-slide > * { height: var(--pdp-h); max-width: none; }
.gp-slide .gp-photo-frame { border-radius: 20px; box-shadow: none; }

/* info column: quiet, small type, outlined rectangular controls */
.pdp-info { padding-top: 0.5rem; }
.pdp-tabs { display: flex; gap: 1.5rem; margin-bottom: 1.75rem; overflow-x: auto; scrollbar-width: none; }
.pdp-tabs button {
  position: relative; flex: none; border: 0; background: none; cursor: pointer;
  padding: 0 0 0.4rem; font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.pdp-tabs button[aria-selected="true"] { color: var(--text); }
.pdp-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--text); }

.pdp-name { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; text-transform: uppercase; }
.pdp-ref { margin-top: 0.35rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pdp-badge {
  display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-top: 1rem; border-radius: 50%;
  background: var(--text); color: #fff; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; line-height: 1.1;
}
.pdp-badge:empty { display: none; }
.pdp-price { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; }
.pdp-price span { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pdp-price small { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pdp-desc { margin-top: 1.5rem; font-size: 0.98rem; line-height: 1.7; color: #333; max-width: 46ch; }
.pdp-spec { margin-top: 1.25rem; font-size: 0.98rem; line-height: 1.6; color: #333; }

.pdp-sizes { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pdp-sizes button {
  border: 1px solid var(--text); background: transparent; cursor: pointer; border-radius: 0;
  padding: 0.65rem 1rem; font: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
  transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s var(--gp-ease-out);
}
.pdp-sizes button[aria-checked="true"] { background: var(--text); color: #fff; }
.pdp-sizes button:active { transform: scale(0.97); }

.pdp-cart { margin-top: 0.75rem; display: flex; gap: 0.5rem; }
.pdp-qty { flex: none; display: flex; align-items: center; height: 3.1rem; border: 1px solid var(--text); border-radius: var(--ui-btn, 12px); padding: 0 0.25rem; }
.pdp-qty button { width: 2.6rem; height: 100%; border: 0; background: none; cursor: pointer; font: inherit; font-size: 1.1rem; color: var(--text); }
.pdp-qty button:disabled { color: rgba(17, 17, 17, 0.25); cursor: default; }
.pdp-qty span { min-width: 1.6rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.pdp-cart .btn { flex: 1; min-height: 3.1rem; }
.pdp-ask { margin-top: 1.25rem; }

/* ---------- below the hero: tea-lab spec sheets ----------
   No boxes. Each block is a sheet: a bold title over a rule with a monospaced meta line, then ruled
   rows with a monospaced label column. The product's matcha green is the only colour (the radar). */
body.gp-pdp { --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; }
.pdp-section { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.pdp-section [hidden] { display: none; }

.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; padding-bottom: 0.9rem; border-bottom: 1.5px solid var(--text); }
.sheet-title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.sheet-meta { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sheet-meta [data-v="name"] { color: var(--text); }
.sheet-num, .sheet-n { font-family: var(--mono); color: var(--muted); }

.sheet-rows { list-style: none; margin: 0; padding: 0; }
.sheet-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.4rem 2rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.sheet-label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sheet-label i { font-style: normal; color: rgba(17, 17, 17, 0.38); }
.sheet-value { font-size: 1rem; line-height: 1.6; color: #333; }
.sheet-value b { color: var(--text); font-weight: 700; margin-right: 0.35rem; }
.sheet-big { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sheet-caption { margin-top: 1rem; font-family: var(--mono); font-size: 0.72rem; line-height: 1.7; letter-spacing: 0.04em; color: var(--muted); text-align: center; }

/* tasting notes: the radar drawn on the page beside the ruled notes */
.tn-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-top: 2rem; }
.tn-layout:not(:has(.tn-radar)) { grid-template-columns: minmax(0, 1fr); }
.tn-layout .sheet-rows { border-top: 1px solid var(--border); }
/* each note: number, a small photo to picture the taste, the Japanese term, the note */
.tn-row { grid-template-columns: 2.5rem 4.5rem 8rem minmax(0, 1fr); align-items: center; }
.tn-row .sheet-value b { display: block; margin: 0 0 0.15rem; font-size: 1.25rem; letter-spacing: -0.01em; }
.tn-img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 12px; background: var(--bg2); }
.tn-radar { margin: 0; }
.rd { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; overflow: visible; }
.rd text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--muted); }
.rd-grid { fill: none; stroke: rgba(17, 17, 17, 0.12); }
.rd-axis { stroke: rgba(17, 17, 17, 0.12); }
.rd-ghost { fill: none; stroke: rgba(17, 17, 17, 0.3); stroke-dasharray: 3 4; }
.rd-shape { fill: rgba(45, 76, 56, 0.16); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.rd-dot { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }

/* other grades: the products standing on the page with a monospaced caption, no box */
.gl-list { list-style: none; margin: 0; padding: 2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.gl-item { display: grid; gap: 0.9rem; color: var(--text); text-decoration: none; }
.gl-visual { display: flex; align-items: flex-end; justify-content: center; gap: 1.25rem; height: 220px; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.gl-visual img { height: 100%; width: auto; max-width: 30%; object-fit: contain; transition: transform 0.25s var(--gp-ease-out); }
.gl-caption { display: flex; align-items: baseline; gap: 0.75rem; }
.gl-caption b { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.gl-caption [lang="ja"] { color: var(--muted); }
.gl-arrow { margin-left: auto; transition: transform 0.25s var(--gp-ease-out); }
.gl-names { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

@media (hover: hover) and (pointer: fine) {
  .pdp-tabs button[aria-selected="false"]:hover { color: var(--text); }
  .pdp-sizes button[aria-checked="false"]:hover { background: rgba(17, 17, 17, 0.05); }
  .pdp-qty button:not(:disabled):hover { background: rgba(17, 17, 17, 0.05); }
  .gl-item:hover .gl-visual img { transform: translateY(-4px); }
  .gl-item:hover .gl-arrow { transform: translate(2px, -2px); }
}

@media (max-width: 900px) {
  body.gp { --gp-nav: 5.25rem; }
  .pdp-hero { grid-template-columns: minmax(0, 1fr); --pdp-h: min(52vh, 360px); }
  .pdp-media { position: static; }
  .gp-slide { padding: 0.5rem 0 1rem; }
}
@media (max-width: 640px) {
  .tn-layout, .gl-list { grid-template-columns: minmax(0, 1fr); }
  /* rows stack: label over value */
  .sheet-row { grid-template-columns: minmax(0, 1fr); }
  .tn-row { grid-template-columns: 2rem 4rem minmax(0, 1fr); align-items: start; }
  .tn-row .tn-img { grid-row: 1 / span 2; width: 4rem; height: 4rem; }
  .tn-row .sheet-label, .tn-row .sheet-value { grid-column: 3; }
}

/* ====================================================
   CATALOG (/products)
   A plain grid of light tiles, one per product: grade label, the product, name and starting price.
   Product images get an explicit height (--pc-h) and no max-width: inside these grid items WebKit
   cannot size a width from aspect-ratio against a % height or a % max-width, and collapses them to 0.
   ==================================================== */
.gp-main { max-width: calc(1100px + 3rem); margin: 0 auto; padding: 0 1.5rem; overflow-x: clip; }
/* product visuals in the tiles: cutout (tin body + lid merged) on a soft floor shadow, or a framed photo */
.gp-tin { position: relative; }
.gp-tin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; user-select: none; -webkit-user-drag: none; }
.gp-tin-shadow {
  position: absolute; left: -10%; right: -10%; bottom: -1%; height: 9%;
  background: radial-gradient(closest-side, rgba(20, 30, 24, 0.3), rgba(20, 30, 24, 0));
  filter: blur(7px);
}
.gp-photo-frame { margin: 0; border-radius: var(--gp-r-tile); overflow: hidden; background: var(--gp-tile-hi); box-shadow: 0 30px 60px -40px rgba(40, 56, 48, 0.55); }
.gp-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.gp-catalog { --pc-h: clamp(130px, 14vw, 190px); }
.pc-main { padding-top: var(--gp-nav); padding-bottom: clamp(3rem, 8vh, 5rem); }
.pc-title {
  margin: 1.5rem 0 2.25rem; text-align: center;
  font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1;
}
.pc-title sup { font-size: 0.24em; font-weight: 500; letter-spacing: 0; vertical-align: top; position: relative; top: 0.25em; margin-left: 0.15em; }

.pc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.pc {
  display: flex; flex-direction: column; border-radius: 14px; background: #fff; border: 1px solid rgba(17, 17, 17, 0.12);
  color: var(--gp-ink); transition: border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.pc-link {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; flex: 1; gap: 0.75rem;
  padding: 1rem 1.125rem 0.875rem; color: inherit; text-decoration: none; border-radius: inherit;
}
.pc-grade { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gp-muted); }
.pc-visual { display: grid; place-items: center; padding: 0; transition: transform 0.25s var(--gp-ease-out); }
.pc-visual > * { height: var(--pc-h); max-width: none; }
.pc-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pc-name { font-size: var(--t-14); font-weight: 500; }
.pc-price { font-size: var(--t-12); color: var(--gp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(17, 17, 17, 0.12); }
.pc-facts > span { display: grid; gap: 0.15rem; align-content: start; }
.pc-k { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gp-muted); }
.pc-val { font-size: var(--t-12); font-weight: 500; line-height: 1.3; }
.pc-buy { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem; align-items: stretch; gap: 0.5rem; padding: 0 1.125rem 1.125rem; }
.pc-sizes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.375rem; margin: 0; padding: 0; }
.pc-sizes button { min-height: 2.5rem; height: 2.5rem; padding: 0 0.5rem; font-size: 0.6875rem; white-space: nowrap; border-radius: var(--ui-btn, 12px); outline-offset: 2px; }
.pc-buy .pc-sizes button[aria-checked]:only-child { background: rgba(17, 17, 17, 0.05); color: var(--gp-ink); border-color: transparent; cursor: default; pointer-events: none; }
.pc-sizes button:focus:not(:focus-visible), .pc-add:focus:not(:focus-visible) { outline: none; }
.pc-add {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: var(--ui-btn, 12px);
  background: var(--gp-ink); color: #fff; border: 1px solid var(--gp-ink); cursor: pointer;
  transition: transform 0.16s var(--gp-ease-out), background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.pc-add svg { grid-area: 1 / 1; transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s var(--gp-ease-out); }
.pc-add .i-ok, .pc-add.is-added .i-bag { opacity: 0; transform: scale(0.8); }
.pc-add.is-added .i-ok { opacity: 1; transform: none; }
.pc-add.is-added { background: var(--gp-accent); border-color: var(--gp-accent); }
.pc-add:active { transform: scale(0.94); }
.pc-add:disabled { opacity: 0.55; cursor: not-allowed; }
.pc-link:focus-visible { outline: 2px solid var(--gp-accent); outline-offset: 3px; }
.pc:active .pc-visual { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .pc:hover { border-color: var(--gp-ink); }
  .pc:hover .pc-visual { transform: translateY(-4px); }
}

@media (max-width: 760px) {
  /* narrow tiles can't hold label + product + two text lines in a square, so they grow to their content */
  body.gp-catalog { --pc-h: 104px; }
  .pc-title { margin: 1.25rem 0 1.5rem; }
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-link { padding: 0.75rem 0.75rem 0.625rem; gap: 0.5rem; }
  .pc-buy { grid-template-columns: minmax(0, 1fr); padding: 0 0.75rem 0.75rem; }
  .pc-sizes { grid-auto-flow: row; }
  .pc-add { justify-self: end; }
  .pc-visual { padding: 0.5rem 0; }
  .pc-bottom { flex-direction: column; gap: 0.1rem; }
  .pc-facts { grid-template-columns: 1fr; gap: 0.4rem; }
  /* 9 products: the last one spans the row instead of sitting alone on the left */
  .pc-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Page-to-page zoom (View Transitions): the package flies between its /products tile and its grade page ---------- */
@view-transition { navigation: auto; }
body.gp .nav-wrap { view-transition-name: site-nav; }
::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
::view-transition-group(site-nav) { animation-duration: 0s; }
/* camera: going in, the catalog pushes past the product while the detail page settles in; going back, the reverse.
   --vt-origin (page-zoom.js) is the travelling product's centre, so the push aims at it. */
::view-transition-old(root), ::view-transition-new(root) { transform-origin: var(--vt-origin, 50% 50%); }
html:active-view-transition-type(zoom-in)::view-transition-old(root) { animation: vt-push-past 0.5s cubic-bezier(0.77, 0, 0.175, 1) both; }
html:active-view-transition-type(zoom-in)::view-transition-new(root) { animation: vt-settle-in 0.5s cubic-bezier(0.77, 0, 0.175, 1) both; }
html:active-view-transition-type(zoom-out)::view-transition-old(root) { animation: vt-recede 0.45s cubic-bezier(0.77, 0, 0.175, 1) both; }
html:active-view-transition-type(zoom-out)::view-transition-new(root) { animation: vt-pull-back 0.45s cubic-bezier(0.77, 0, 0.175, 1) both; }
@keyframes vt-push-past { to { opacity: 0; transform: scale(1.18); filter: blur(6px); } }
@keyframes vt-settle-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes vt-recede { to { opacity: 0; transform: scale(0.96); } }
@keyframes vt-pull-back { from { opacity: 0; transform: scale(1.18); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.01ms !important; }
}

/* ====================================================
   NAV ON GRADE PAGES AND /products
   Buttons, cards, popups and the nav cart come from ui.css (the site-wide standard); here only the
   light nav and the toast that drops from under the nav cart.
   ==================================================== */
body.gp {
  --shop-primary: var(--gp-ink);
  --shop-accent: var(--gp-accent);
  --shop-text: var(--gp-ink);
  --shop-muted: var(--gp-muted);
  --shop-border: var(--gp-line);
}

/* the site's light (scrolled) nav from the start; specific enough to beat style.css's ".nav-wrap.scrolled .nav" */
body.gp .nav-wrap .nav, body.gp .nav-wrap.scrolled .nav {
  background: rgba(253, 251, 247, 0.97) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.07), 0 24px 48px -30px rgba(60, 45, 25, 0.28) !important;
}
body.gp .nav-wrap .logo, body.gp .nav-wrap .nav-links a { color: var(--gp-ink) !important; text-shadow: none; }
body.gp .nav-wrap .nav-btn { background: var(--gp-ink) !important; color: #fff !important; }
body.gp .nav-wrap .burger span { background: var(--gp-ink) !important; }

/* toast: drops from under the nav cart, so the item visibly "goes" to the cart */
body.gp .shop-toast {
  top: 5.75rem; bottom: auto; right: max(1.5rem, calc((100vw - 1100px) / 2));
  transform: translateY(-10px) scale(0.97); transform-origin: top right;
}
body.gp .shop-toast.show { transform: none; }
@media (max-width: 640px) {
  body.gp .shop-toast { left: 1.5rem; right: 1.5rem; top: 5.25rem; justify-content: center; text-align: center; }
}

/* Serving: compact board (tags on the left, recipe steps in a row on the right) */
.sv-layout { border-top: 1px solid var(--border); padding: 1.5rem 0 0.25rem; display: grid; gap: 1.75rem 3rem; }
.sv-layout--steps { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
.sv-meta { margin: 0; display: grid; gap: 1.1rem; align-content: start; }
.sv-layout:not(.sv-layout--steps) .sv-meta { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.sv-meta dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; }
.sv-meta dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: 0.95rem; color: #333; }
.sv-meta dd b { color: var(--text); font-weight: 700; }
.sv-tag { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 20px; font-size: 0.88rem; color: var(--text); background: var(--card, #fff); }
.sv-tag--ink { background: var(--text); border-color: var(--text); color: #fff; }
.sv-sub { color: var(--muted); font-size: 0.88rem; }
.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--border); }
.sv-steps li { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 1.1rem; border-right: 1px solid var(--border); font-size: 0.95rem; line-height: 1.5; color: #333; }
.sv-steps .sheet-n { font-size: 0.78rem; letter-spacing: 0.06em; }
@media (max-width: 900px) {
  .sv-layout--steps { grid-template-columns: minmax(0, 1fr); }
  .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; row-gap: 1.25rem; }
  .sv-steps li { padding: 0 1rem 0 0; border-right: 0; }
}

.about-copy { border-top: 1px solid var(--border); padding-top: 1.5rem; display: grid; gap: 1rem; max-width: 62ch; font-size: 1rem; line-height: 1.7; color: #333; }
.about-copy p { margin: 0; }
.about-copy[hidden] { display: none; }