/* ============================================================================
   /supplements — page-owned styles.

   Built ON TOP of the site design system (assets/css/main.css): same tokens,
   same primitives (.section .shell .figure .media-split .pull .cta-band).
   Nothing here overrides main.css globally — every rule is scoped to
   .supp-page or to a supp-/fl-/dui-/wl-/qa- class that exists only on this page.
   ========================================================================== */

/* ---- Page rhythm ---------------------------------------------------------
   Section spacing comes from the shared rhythm classes (.section = major
   chapter, .section--tight = related continuation). This page does NOT patch
   .section padding — only the per-idea internals below. */
.supp-page .supp-hero{padding-bottom:var(--s5)}
.supp-page .supp-head{margin-bottom:var(--s4)}
.supp-page .note{margin-top:var(--s5)}
.supp-page .supp-head .lede{margin-top:var(--s4)}

/* ---- Hero ---------------------------------------------------------------- */
/* The page headline is long by design; the global h1 clamp would make it
   shout. Calmer ceiling, same type. */
.supp-page .supp-hero h1{font-size:clamp(33px,4.5vw,56px);line-height:1.06;max-width:18ch}

/* The hero image is a studio product still, not documentary photography: the
   system's warm sepia grade would yellow a white sachet, and the 5/4 hero crop
   would slice the pack. Show it as shot. */
.supp-page .hero-fig img{filter:none;aspect-ratio:auto;background:#fff}

/* Mobile hero order is HEADLINE → VISUAL → one line. `display:contents`
   promotes the copy block's children into the hero's flex column so the
   photograph can sit between the headline and the sentence. */
@media (max-width:759px){
  .supp-page .supp-hero .hero-grid{gap:0}
  .supp-page .supp-hero .hero-choreo{display:contents}
  .supp-page .supp-hero .tag{order:1}
  .supp-page .supp-hero h1{order:2;margin-top:18px}
  .supp-page .supp-hero .hero-fig{order:3;margin-top:var(--s4)}
  .supp-page .supp-hero .lede{order:4;margin-top:var(--s4)}
  .supp-page .supp-hero .hero-cta{order:5;margin-top:var(--s4)}
}

/* ---- The mantra ---------------------------------------------------------- */
/* "Data informs. Intelligence suggests. The clinician decides." — sits directly
   under an h2, so it is deliberately a step quieter than a full .pull. */
.supp-mantra{margin-top:var(--s3);font-size:clamp(19px,2.2vw,26px);color:var(--ink-soft);
  max-width:22em}
.supp-mantra b{font-weight:inherit;color:var(--orange-ink)}

/* ============================================================================
   The four-beat flow

   Steps 01–02 are quiet context: a hairline rule, a phrase and one small piece
   of evidence from the chart. Steps 03–04 are where the work happens and each
   carries a demo panel of the real interface. Mono indices carry the sequence,
   so the chain stays unambiguous when it wraps from row one to row two and no
   wrap-around arrow is needed. Arrows only ever live in a dedicated column or
   row GAP — never over, beside or touching text.
   ========================================================================== */
.flow{--flg:clamp(38px,4.4vw,66px);--ay:26px;
  list-style:none;margin:var(--s5) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;row-gap:var(--flg)}
.fl{position:relative;margin:0;min-width:0;display:flex;flex-direction:column}

/* Connector + chevron. Drawn only on items flagged .fl--r, so the geometry is
   declared in the markup rather than inferred from :last-child. */
.fl--r::before{content:"";position:absolute;background:var(--rule)}
.fl--r::after{content:"";position:absolute;width:9px;height:9px;
  border-top:1.5px solid var(--orange);border-right:1.5px solid var(--orange)}

/* --acl is the clearance the arrow keeps from the text block on either side of
   the gap it lives in, so a chevron can never sit against a word or a rule. */
/* Vertical run (phones, small tablets): the arrow occupies its own row gap. */
@media (max-width:899px){
  .flow{--acl:9px}
  .fl--r::before{left:50%;bottom:calc(-1 * var(--flg) + var(--acl));width:1px;
    height:calc(var(--flg) - 2 * var(--acl));transform:translateX(-50%)}
  .fl--r::after{left:50%;bottom:calc(-1 * var(--flg) + var(--acl) + 4px);
    transform:translateX(calc(-50% - 1px)) rotate(135deg)}
}
/* Two-up rails: the arrow occupies its own column gap. */
@media (min-width:900px){
  .flow{--acl:14px;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--flg);row-gap:var(--s6);align-items:stretch}
  .fl--r::before{top:var(--ay);right:calc(-1 * var(--flg) + var(--acl));
    width:calc(var(--flg) - 2 * var(--acl));height:1px}
  .fl--r::after{top:var(--ay);right:calc(-1 * var(--flg) + var(--acl));
    margin-top:-4px;transform:rotate(45deg)}
}

.fl-ix{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint);
  display:block;margin-bottom:9px}
.fl h3{font-family:var(--serif);font-weight:550;letter-spacing:-.015em;line-height:1.16}
.fl>p{color:var(--muted)}

/* The arrow lands on the middle of the step's headline, not on its index. */
.fl--ctx{--ay:50px;border-top:1px solid var(--rule);padding-top:14px}
.fl--ctx h3{font-size:clamp(18px,1.7vw,21px)}
.fl--ctx>p{margin-top:7px;font-size:13.5px;line-height:1.5}

.fl--key{border-top:2px solid var(--orange);padding-top:14px}
.fl--key h3{font-size:clamp(21px,2.2vw,27px)}
.fl--key>p{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
/* On the two-up rail both key cells stretch, so the panels share a top and a
   bottom edge and the 50% arrow lands in the middle of both. */
@media (min-width:900px){.fl--key{--ay:50%}.fl--key .dui{margin-top:var(--s3);flex:1}}

/* The one small piece of evidence each context step carries. */
.fl-strip{margin-top:12px;padding-top:10px;border-top:1px dotted var(--rule);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);line-height:1.7}
.fl-strip--trend{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--muted)}
.fl-spark{flex:none;color:var(--orange);overflow:visible}
.fl-strip b{font-weight:500;color:var(--ink)}
.fl-flag{color:var(--orange-ink);letter-spacing:.14em}

/* ============================================================================
   Demo UI — marketing panels drawn in HTML/CSS in the real app's visual
   language (warm canvas, white panels, hairline borders, terracotta primary
   action, mono micro-labels). They are representations of the product, not
   screenshots, and they carry role="img" so assistive tech gets one honest
   description instead of a soup of fake controls.

   Type is deliberately a three-step scale: 10.5 mono micro · 13.5 body/rows ·
   19 pane title.
   ========================================================================== */
.dui{--d-canvas:#faf9f5;--d-line:#e6e2dd;--d-ink:#1b1a18;--d-mut:#7d766c;
  --d-orange:#cf6440;--d-green:#0f7a5c;
  display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--rule);background:#fff;
  box-shadow:0 26px 50px -40px rgba(17,17,16,.55)}

.dui-bar{display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-bottom:1px solid var(--d-line);background:#f3f0ec}
.dui-dots{display:flex;gap:5px;flex:none}
.dui-dots i{width:8px;height:8px;border-radius:50%;background:#d6d0c7}
.dui-url{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--d-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dui-app{display:flex;flex-direction:column;flex:1;background:var(--d-canvas)}

.dui-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;
  padding:11px 14px;background:#fff;border-bottom:1px solid var(--d-line)}
.dui-av{flex:none;width:24px;height:24px;border-radius:50%;background:#eceae5;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--d-mut)}
.dui-crumb-t{font-size:13.5px;font-weight:600;color:var(--d-ink);letter-spacing:-.005em}
.dui-crumb-t em{font-style:normal;color:#bdb6ab;padding:0 3px}
.dui-crumb-s{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--d-mut)}

.dui-pane{display:flex;flex-direction:column;flex:1;padding:16px 14px 15px}

.dui-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--d-mut)}
.dui-lab--accent{color:var(--d-orange)}
.dui-lab--rule{margin-top:16px;padding-top:11px;border-top:1px solid var(--d-line)}
.dui-labrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dui-state{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--d-orange)}
.dui-h{margin-top:10px;font-family:var(--serif);font-weight:550;font-size:19px;line-height:1.1;
  letter-spacing:-.015em;color:var(--d-ink)}

.dui-search{display:flex;align-items:center;gap:9px;margin-top:9px;
  padding:9px 11px;border:1px solid var(--d-line);border-radius:5px;background:#fff;
  font-size:13.5px;color:#a49c91}
.dui-search svg{flex:none;color:#b3aba0}

.dui-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.dui-chip{display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;border:1px solid var(--d-line);background:#fff;
  font-size:13.5px;line-height:1.2;color:var(--d-ink)}
.dui-chip i{font-style:normal;color:#b3aba0;font-size:12px}
.dui-chip--on{background:var(--d-green);border-color:var(--d-green);color:#fff}
.dui-chip--on i{color:rgba(255,255,255,.85)}

.dui-list{list-style:none;margin:0;padding:0}
.dui-list li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;
  padding:11px 0;border-bottom:1px solid var(--d-line)}
.dui-n{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--d-ink);letter-spacing:-.005em}
.dui-d,.dui-f{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--d-mut)}
.dui-f{color:var(--d-ink)}
.dui-stp{flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:3px 8px;border:1px solid var(--d-line);border-radius:4px;background:#fff}
.dui-stp i{font-style:normal;font-size:12px;line-height:1;color:#b3aba0}
.dui-stp b{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;font-weight:500;
  color:var(--d-ink)}
.dui-rm{flex:none;width:14px;text-align:center;font-size:13px;line-height:1;color:#bdb6ab}

.dui-meta{margin-top:14px}
.dui-metat{margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--d-ink)}

.dui-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding-top:15px}
.dui-sum{font-size:13.5px;color:var(--d-mut)}
.dui-sum b{font-weight:600;color:var(--d-ink)}
.dui-cta{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 16px;border-radius:5px;background:var(--d-orange);color:#fff;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em}
.dui-cta--wide{flex:1 1 auto;padding:11px 16px}
.dui-cta2{display:inline-flex;align-items:center;justify-content:center;
  padding:11px 16px;border-radius:5px;border:1px solid var(--d-line);background:#fff;
  font-size:13.5px;color:var(--d-mut)}
.dui-foot--act{gap:8px}
.dui-fulfil{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px;
  border-top:1px solid var(--d-line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--d-mut)}
.dui-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* Narrow panels (phones): the row reflows to two lines rather than shrinking
   its type — the app does the same thing in a narrow drawer. */
@media (max-width:639px){
  .dui-list li{padding:10px 0;gap:4px 9px}
  .dui-foot{align-items:stretch;flex-direction:column}
  .dui-cta,.dui-cta2{padding:11px 16px}
}
@media (max-width:379px){.dui-n{flex:1 0 100%}}

/* ---- The evolving-protocol bridge ---------------------------------------
   Same component, three equal beats, no cards. Every step gets a fixed
   column, the arrows sit in the column gaps, and all three labels share one
   baseline because the rule + padding above them is identical. */
.flow--mini{--flg:clamp(46px,4.6vw,64px);--ay:23px;margin-top:var(--s4);row-gap:var(--flg)}
@media (min-width:900px){
  .flow--mini{grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:var(--flg);row-gap:var(--flg);align-items:start}
  .flow--mini .fl--r::before{top:var(--ay)}
  .flow--mini .fl--r::after{top:var(--ay)}
}
.fl--mini{border-top:1px solid var(--ink);padding-top:12px}
.fl--mini h3{font-size:clamp(16px,1.5vw,18.5px);line-height:1.3}
.supp-page #evolving .lede{margin-top:var(--s4)}

/* ---- Adherence ----------------------------------------------------------- */
/* Headline → film → one line on phones (the film carries the section). */
@media (max-width:899px){
  .supp-adh__copy{display:contents}
  .supp-adh .tag{order:1}
  .supp-adh h2{order:2;margin-top:14px}
  .supp-adh .media-split-fig{order:3;margin-top:var(--s4)}
  .supp-adh .lede{order:4;margin-top:var(--s4)}
}
@media (min-width:900px){.supp-adh .lede{margin-top:var(--s3)}.supp-adh h2{margin-top:14px}}

/* ---- Film (one lifestyle video on the page) ------------------------------ */
.supp-film{position:relative;border:1px solid var(--rule);background:#fff;padding:10px;margin:0}
.supp-film video{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;
  background:var(--paper-deep)}
.supp-film figcaption{display:flex;justify-content:space-between;gap:12px;
  padding:10px 4px 2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}

/* iOS paints its own media chrome over a poster regardless of `controls`.
   Scoped to .js so a visitor without JavaScript keeps real, working controls —
   they are removed only once the enhancement has supplied a replacement. */
.js .supp-video::-webkit-media-controls,
.js .supp-video::-webkit-media-controls-enclosure,
.js .supp-video::-webkit-media-controls-panel,
.js .supp-video::-webkit-media-controls-panel-container,
.js .supp-video::-webkit-media-controls-overlay-play-button,
.js .supp-video::-webkit-media-controls-start-playback-button{
  display:none !important;-webkit-appearance:none;appearance:none;
  opacity:0;pointer-events:none;height:0;width:0}

.supp-play{position:absolute;right:20px;bottom:34px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;cursor:pointer;
  color:var(--paper);background:rgba(17,17,16,.66);border:1px solid rgba(253,252,252,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .18s ease}
.supp-play:hover{background:rgba(17,17,16,.86)}
.supp-play svg{width:18px;height:18px;display:block;fill:currentColor}
.supp-play .ic-pause{display:none}
.supp-play[aria-pressed="true"] .ic-play{display:none}
.supp-play[aria-pressed="true"] .ic-pause{display:block}
@media (prefers-reduced-motion:reduce){.supp-play{transition:none}}

/* ============================================================================
   White-label group shot — real product photography

   Three plates, all shot on seamless white: an unbranded dispenser standing
   behind two that carry a practice's own artwork. `mix-blend-mode:multiply`
   dissolves the white ground into the warm stage, so the units share one
   space instead of sitting in three visible rectangles; each gets its own
   contact shadow, and the two set further back stand higher on the surface.
   ========================================================================== */
.wl{margin:var(--s5) 0 0}
.wl-stage{--u:clamp(112px,22vw,300px);
  isolation:isolate;position:relative;
  display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(6px,1.4vw,24px);
  border:1px solid var(--rule);
  background:radial-gradient(122% 82% at 50% 6%,#ffffff 0%,#faf8f4 48%,#efeae1 100%);
  padding:clamp(26px,3.4vw,46px) clamp(12px,2.4vw,36px) clamp(38px,4.4vw,60px)}
/* The surface the group stands on. */
.wl-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(46px,5.4vw,78px);pointer-events:none;
  background:linear-gradient(180deg,rgba(17,17,16,0) 0%,rgba(17,17,16,.045) 55%,rgba(17,17,16,.09) 100%)}

.wl-unit{position:relative;flex:none;display:block;width:var(--w)}
/* Contact shadow, splayed away from the key light at upper left. */
.wl-unit::before{content:"";position:absolute;z-index:0;
  left:2%;right:-14%;bottom:-3%;height:calc(var(--w) * .13);
  background:radial-gradient(50% 50% at 46% 50%,rgba(24,20,15,.5) 0%,rgba(24,20,15,.2) 46%,rgba(24,20,15,0) 76%);
  filter:blur(8px)}
.wl-unit img{position:relative;z-index:1;display:block;width:100%;height:auto;
  mix-blend-mode:multiply;filter:none}

.wl-unit--blank{--w:calc(var(--u) * .88);margin-bottom:calc(var(--u) * .1)}
.wl-unit--hero{--w:calc(var(--u) * 1.2)}
.wl-unit--alt{--w:calc(var(--u) * .98);margin-bottom:calc(var(--u) * .05)}

/* Below the tablet breakpoint the group needs every pixel: the panel bleeds to
   the viewport edges and the units size off the real available width, so three
   legible dispensers still fit at 320px rather than shrinking into mush. */
@media (max-width:759px){
  .wl-stage{--u:clamp(88px,calc((100vw - 40px) / 3.2),268px);
    margin-inline:calc(-1 * var(--gut));border-inline:0;padding-inline:8px}
}

/* three-brand white-label group (2026-08-24) */
.wl-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wl-brand{border:1px solid var(--rule);border-radius:5px;background:#fff;overflow:hidden}
.wl-brand img{display:block;width:100%;height:auto;aspect-ratio:435/452;object-fit:cover}
.wl-brand-cap{display:flex;flex-direction:column;gap:2px;padding:12px 16px 14px;border-top:1px solid var(--rule)}
.wl-brand-cap b{font-size:15px;font-weight:600;color:var(--ink)}
.wl-brand-cap span{font-size:12.5px;color:var(--muted)}
@media (max-width:759px){
  .wl-brands{grid-template-columns:1fr;gap:14px;max-width:420px}
}
.wl-cap{margin-top:var(--s3);padding-top:14px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--muted);max-width:70ch}

/* ---- Quality & testing ---------------------------------------------------
   Copy column left, facility photograph right on desktop; on phones the
   photograph follows the headline immediately. */
.qa{display:grid;grid-template-columns:1fr;gap:0}
.qa-head{margin-top:12px}
.qa-fig{margin-top:var(--s4)}
/* Portrait crop: the facility photograph has to hold a tall column beside the
   proof blocks, and the technician sits dead centre in the frame. */
@media (min-width:920px){.qa-fig img{aspect-ratio:4/5;object-fit:cover;object-position:65% center}}
.qa-sup{margin-top:var(--s4)}
.qa-blocks{margin-top:var(--s4);border-top:2px solid var(--rule-dark)}
.qa-block{padding:18px 0;border-bottom:1px solid var(--rule)}
.qa-block .tag{display:block;margin-bottom:7px;color:var(--ink)}
.qa-block p+p{font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:54ch}
.qa-strip{margin-top:var(--s4);padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);line-height:2}
@media (min-width:920px){
  .qa{grid-template-columns:minmax(0,1fr) minmax(0,.84fr);column-gap:var(--s5);
    grid-template-areas:"label fig" "head fig" "sup fig" "blocks fig" "strip strip";
    align-items:start}
  .qa-label{grid-area:label}
  .qa-head{grid-area:head}
  .qa-fig{grid-area:fig;margin:0;align-self:center}
  .qa-sup{grid-area:sup;margin-top:var(--s3)}
  .qa-blocks{grid-area:blocks;margin-top:var(--s4)}
  .qa-strip{grid-area:strip;margin-top:var(--s5)}
}

/* ---- CTA band fine print -------------------------------------------------
   main.css lightens .lede and .tag on the ink band but not .hero-fine, whose
   --muted would land at ~2:1 on that background. */
.supp-page .cta-band .hero-fine{color:#9b958c}
.supp-page .cta-band .hero-fine a{text-decoration-color:#9b958c}

.supp-page .fl-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:6px 0 0}

/* ── The challenge: many bottles → one daily pack (2026-08-25) ────────────── */
.supp-page .cmp-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:960px){
  .supp-page .cmp-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:var(--s6);align-items:center}
}
.supp-page .cmp-copy h2{margin-top:14px}
.supp-page .cmp-relief{margin-top:var(--s3);max-width:34ch;font-size:16px;line-height:1.55;color:var(--orange-ink)}
.supp-page .cmp-vis{display:grid;grid-template-columns:1fr;gap:var(--s3);align-items:center;justify-items:center}
@media (min-width:700px){
  .supp-page .cmp-vis{grid-template-columns:1fr auto 1fr;gap:var(--s3)}
}
.supp-page .cmp-side{margin:0;width:100%;display:grid;grid-template-rows:210px auto;
  align-items:center;justify-items:center;gap:16px}
.supp-page .cmp-side img{max-height:210px;width:auto;max-width:100%;height:auto;display:block;mix-blend-mode:multiply}
.supp-page .cmp-art{max-height:210px;width:auto;max-width:100%;height:210px;color:var(--ink-soft)}
@media (max-width:699px){
  .supp-page .cmp-side{grid-template-rows:170px auto}
  .supp-page .cmp-side img,.supp-page .cmp-art{max-height:170px;height:auto}
  .supp-page .cmp-art{height:170px}
}
.supp-page .cmp-side figcaption{font-size:15px;font-weight:600;color:var(--ink);text-align:center}
.supp-page .cmp-arrow{color:var(--ink);display:grid;place-items:center;align-self:center;padding-bottom:34px}
@media (max-width:699px){.supp-page .cmp-arrow svg{transform:rotate(90deg)}}

/* ── Ongoing care ─────────────────────────────────────────────────────────── */
.supp-page .oc-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:960px){
  .supp-page .oc-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    gap:var(--s6);align-items:center}
}
.supp-page .oc-copy h2{margin-top:14px}
.supp-page .oc-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);
  grid-template-columns:1fr}
@media (min-width:620px){.supp-page .oc-steps{grid-template-columns:repeat(3,1fr);gap:var(--s3)}}
.supp-page .oc-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:relative}
@media (min-width:620px){
  .supp-page .oc-step+.oc-step::before{content:"";position:absolute;left:calc(-1 * var(--s3) / 2 - 6px);top:44px;
    width:12px;height:12px;border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);
    transform:rotate(-45deg)}
}
.supp-page .oc-art{display:grid;place-items:center;width:100%;max-width:132px;aspect-ratio:1/1;
  background:var(--paper-deep);border-radius:4px;color:var(--ink-soft)}
.supp-page .oc-art svg{width:62%;height:auto}
.supp-page .oc-step h3{font-size:17px;line-height:1.3;margin:4px 0 0}
.supp-page .oc-step p{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0;max-width:26ch}