/* ==========================================================================
   VyroPlus — services page (DESIGN.md §7.2, §6.3 glyphs, §5.11 FAQ).
   Extends style.css class names; never redefines tokens or shared rules.
   Text colours are --text-* tokens only.
   ========================================================================== */

/* ---------- Hero: rings cell as a dark-glass cell (§0.1) ---------- */
/* Surface, ring and legend colours come from the shared .cell--glass variant and §6.3 rules in style.css */
.rings-cell{display:flex;flex-direction:column;gap:1.1rem}
.rings-cell .rings{padding:.25rem 0}
.rings-cell .legend{padding-top:1rem;border-top:1px solid var(--line)}
.cell--glass.rings-cell .legend{border-top-color:rgba(255,255,255,.1)}

/* ---------- Body: sticky chapter rail + chapters column (§7.2 item 2) ---------- */
.svc-body{padding-top:var(--section-tight)}
.svc-body > .wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
.rail{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;overflow-anchor:none}
.rail-k{margin:0 0 .6rem .9rem;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.rail-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.rail a{display:flex;align-items:center;gap:.7rem;min-height:44px;padding:.55rem .9rem;border-radius:var(--r-pill);font-weight:600;font-size:.92rem;line-height:1.2;color:var(--text-2);transition:background-color var(--t-fast),color var(--t-fast)}
.rail a:hover{background:var(--paper);color:var(--text)}
.rail a[aria-current]{background:var(--tint);color:var(--text-green)}
.rail-n{flex:none;width:1.7em;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--text-3);transition:color var(--t-fast)}
.rail a[aria-current] .rail-n{color:var(--text-green)}

/* ---------- Chapters: alternating white / paper panels (§7.2 item 3) ---------- */
.chapters{min-width:0}
.chapter{padding:clamp(36px,5vw,64px) 0}
.chapter:first-child{padding-top:0}
.chapter.paper{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(32px,4vw,56px) var(--cell-pad);margin:clamp(6px,1.5vw,12px) 0}
.chapter + .chapter:not(.paper){border-top:1px solid var(--line);padding-top:clamp(36px,5vw,64px)}
.chapter.paper + .chapter{border-top:0}
.chapter-head{max-width:72ch}
.chapter-head h2{margin-top:.75rem}
.chapter-head .lead{margin-top:1rem;font-size:1.05rem}
.chapter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(24px,3vw,36px)}
.chapter-col{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--card-pad)}
.chapter.paper .chapter-col{background:var(--card)}
.chapter-col h3{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);line-height:1.3;margin-bottom:1rem}
.chapter .checks{gap:.9rem}
.chapter .checks li{font-size:.92rem;line-height:1.5}
.chapter .checks li strong{font-size:.95rem;margin-bottom:.1rem}
.chapter .callout{margin-top:var(--gap)}
.chapter.paper .callout{background:var(--card)}
.chapter .callout p:not(.eyebrow){max-width:68ch}
.faq-block{margin-top:clamp(20px,3vw,28px)}
.faq-h{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);line-height:1.3;margin-bottom:.75rem}
.chapter-cta{margin-top:clamp(20px,3vw,28px)}

/* ---------- Chapter glyphs (§6.3): three parametrised components in a captioned cell ----------
   .glyph-cell = the grid cell: tag top-right, the figure, and a one-line caption pinned at the bottom,
   so the cell reads as a finished object whatever height its check-list neighbours give it.
   .glyph = the figure itself (role="img"), 100% × ≥160px; scaled up in the desktop column (below). */
.glyph-cell{position:relative;display:flex;flex-direction:column;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.chapter.paper .glyph-cell{background:var(--card)}
.glyph-cell .tag{position:absolute;top:14px;right:14px}
.glyph{flex:1;min-height:160px;display:flex;flex-direction:column;justify-content:center;gap:.55rem;padding:28px 0 4px}
.glyph-cap{margin:.85rem 0 0;padding-top:.8rem;border-top:1px solid var(--line);font-size:var(--fs-caption);font-weight:500;line-height:1.45;color:var(--text-3)}

/* 1. Bars: label above a track; --w = width 0–1, --x = start offset 0–1, .hatch = hatched fill */
.glyph-bars .gbar{display:grid;gap:.28rem;font-size:.76rem;font-weight:600;line-height:1.2;color:var(--text-2)}
.glyph-bars .track{height:14px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);overflow:hidden}
.chapter.paper .glyph-bars .track{background:var(--paper)}
.glyph-bars .fill{height:100%;border-radius:var(--r-pill);width:calc(var(--w,1) * 100%);margin-left:calc(var(--x,0) * 100%);transition:width 1.2s var(--ease-out)}
.glyph-bars .gbar:nth-of-type(1) .fill{background:var(--ink)}
.glyph-bars .gbar:nth-of-type(2) .fill{background:var(--g2);transition-delay:.12s}
.glyph-bars .gbar:nth-of-type(3) .fill{background:var(--g1);transition-delay:.24s}
.glyph-bars .gbar.hatch .fill{background:var(--hatch)}
.js .glyph-bars:not(.is-in) .fill{width:0}

/* 2. Stack: 2–4 rounded layers rising in from the base */
.glyph-stack .layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.glyph-stack .layers li{display:flex;align-items:center;min-width:0;height:26px;padding:0 12px;border-radius:8px;font-size:.7rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.glyph-stack .layers li:nth-last-child(1){width:100%;background:var(--ink);color:var(--text-on-dark)}
.glyph-stack .layers li:nth-last-child(2){width:calc(100% - 28px);background:var(--g3);color:var(--text-on-dark);transition-delay:.12s}
.glyph-stack .layers li:nth-last-child(3){width:calc(100% - 56px);background:var(--g2);color:var(--text);transition-delay:.24s}
.glyph-stack .layers li:nth-last-child(4){width:calc(100% - 84px);background:var(--g1);color:var(--text);transition-delay:.36s}
.js .glyph-stack:not(.is-in) .layers li{opacity:0;transform:translateY(14px)}

/* 3. Steps: a drawn line with --n nodes and labels */
.glyph-steps .gsteps{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.glyph-steps .gsteps::before,.glyph-steps .gsteps::after{content:"";position:absolute;top:8px;left:calc(50% / var(--n,4));right:calc(50% / var(--n,4));height:2px;border-radius:2px;pointer-events:none}
.glyph-steps .gsteps::before{background:var(--line-strong)}
.glyph-steps .gsteps::after{background:var(--g2);transform-origin:left;transition:transform var(--t-line) var(--ease-out)}
.glyph-steps li{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:0 3px;text-align:center;font-size:.72rem;font-weight:600;line-height:1.25;color:var(--text-2)}
.glyph-steps li i{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;background:var(--g1);border:3px solid #fff;box-shadow:0 0 0 2px var(--g2);transition:transform .35s var(--ease-spring)}
.glyph-steps li:nth-child(2) i{transition-delay:.15s}
.glyph-steps li:nth-child(3) i{transition-delay:.3s}
.glyph-steps li:nth-child(4) i{transition-delay:.45s}
.glyph-steps li:nth-child(5) i{transition-delay:.6s}
.js .glyph-steps:not(.is-in) .gsteps::after{transform:scaleX(0)}
.js .glyph-steps:not(.is-in) li i{transform:scale(0)}

/* Tablet and up: the figure earns its cell — thicker bars, taller stack layers (labels may wrap
   inside a fixed 42px layer instead of clipping), bigger nodes. Phone keeps the compact 160px figure. */
@media (min-width:761px){
  .glyph{gap:.9rem;padding-top:32px}
  .glyph-bars .gbar{font-size:.85rem;gap:.4rem}
  .glyph-bars .track{height:22px}
  .glyph-stack .layers{gap:6px}
  .glyph-stack .layers li{justify-content:center;height:42px;padding:0 .8rem;font-size:.78rem;letter-spacing:.01em;line-height:1.15;white-space:normal;text-align:center}
  .glyph-stack .layers li:nth-last-child(2){width:calc(100% - 32px)}
  .glyph-stack .layers li:nth-last-child(3){width:calc(100% - 64px)}
  .glyph-stack .layers li:nth-last-child(4){width:calc(100% - 96px)}
  .glyph-steps li{font-size:.8rem;gap:.7rem}
  .glyph-steps li i{width:22px;height:22px}
  .glyph-steps .gsteps::before,.glyph-steps .gsteps::after{top:10px}
}
/* Desktop three-column grid: the glyph is a narrow, tall third column. Bars spread evenly down the
   figure; the steps line becomes a vertical rail (same drawn line + nodes, as §5.8 does on phones)
   so four labels read on one line each instead of wrapping to four. */
@media (min-width:1101px){
  .glyph-bars{justify-content:space-evenly}
  .glyph-stack .layers{gap:7px}
  .glyph-stack .layers li{height:46px}
  .glyph-steps .gsteps{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}
  .glyph-steps .gsteps::before,.glyph-steps .gsteps::after{top:calc(50% / var(--n,4));bottom:calc(50% / var(--n,4));left:10px;right:auto;width:2px;height:auto}
  .glyph-steps .gsteps::after{transform-origin:top}
  .glyph-steps li{flex-direction:row;align-items:center;gap:.85rem;padding:.55rem 0;text-align:left;font-size:.85rem;line-height:1.3}
  .js .glyph-steps:not(.is-in) .gsteps::after{transform:scaleY(0)}
}

/* ---------- FAQ open/close: grid-template-rows 0fr → 1fr (§5.11); JS adds .faq-js when it takes over ---------- */
.chapter .faq-body{display:grid;grid-template-rows:1fr;padding:0;transition:grid-template-rows var(--t-base) var(--ease-out)}
.chapter .faq-body > div{overflow:hidden;min-height:0;padding:.5rem 0 1rem}
.faq-item.faq-js .faq-body{grid-template-rows:0fr}
.faq-item.faq-js.is-open .faq-body{grid-template-rows:1fr}
.faq-item summary{-webkit-tap-highlight-color:transparent}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chapter-grid .glyph-cell{grid-column:1 / -1}
}
@media (max-width:860px){
  /* Block flow (not a one-column grid) so the chip row's sticky range is the whole chapters column, not its own row */
  .svc-body > .wrap{display:block}
  .rail{position:static;margin:0 calc(-1 * var(--gutter)) clamp(20px,4vw,32px);background:var(--white);border-bottom:1px solid var(--line)}
  .rail-k{display:none}
  .rail-list{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);padding:8px var(--gutter) 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .rail-list li{flex:none;scroll-snap-align:start}
  .rail a{min-height:44px;padding:.5rem 1rem;border:1px solid var(--line);background:var(--card);white-space:nowrap}
  .rail a[aria-current]{border-color:var(--line-strong)}
  .chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Phones and small tablets: the chip row sticks under the header so any of the eight chapters stays one tap
   away on a very long page (services.js already keeps the current chip lit and scrolled into view).
   Not on short landscape viewports, where header + chips would take over a third of the screen.
   76px = the stuck row's height (61px) + breathing room, so anchor targets and keyboard-focused controls
   in the chapters land below the row. Without JS the header is static here, so the row sticks at 0. */
@media (max-width:860px) and (min-height:500px){
  .rail{position:sticky;top:var(--header-h);z-index:var(--z-sticky)}
  .chapter[id],.chapters a,.chapters button,.chapters summary{scroll-margin-top:calc(var(--header-h) + 76px)}
  html:not(.js) .rail{top:0}
  html:not(.js) .chapter[id],html:not(.js) .chapters a,html:not(.js) .chapters button,html:not(.js) .chapters summary{scroll-margin-top:76px}
}
@media (max-width:760px){
  .chapter-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .glyph-cell{padding-inline:14px}
  .glyph-stack .layers li:nth-last-child(2){width:calc(100% - 20px)}
  .glyph-stack .layers li:nth-last-child(3){width:calc(100% - 40px)}
  .glyph-stack .layers li:nth-last-child(4){width:calc(100% - 60px)}
  .glyph-steps li{font-size:.68rem}
  .chapter-cta .btn{width:100%}
}

/* ---------- Reduced motion (§8): glyphs sit in their final state, FAQ snaps ---------- */
@media (prefers-reduced-motion:reduce){
  .js .glyph-bars:not(.is-in) .fill{width:calc(var(--w,1) * 100%)}
  .js .glyph-stack:not(.is-in) .layers li{opacity:1;transform:none}
  .js .glyph-steps:not(.is-in) .gsteps::after,.js .glyph-steps:not(.is-in) li i{transform:none}
  .chapter .faq-body{transition:none}
}

/* ---------- Print ---------- */
@media print{
  .rail{display:none}
  .svc-body > .wrap{grid-template-columns:1fr}
  .chapter{break-inside:avoid}
}