/* ═══════════════════════════════════════════════════════════════════
   BEREE / HOME PAGE ONLY
   Loaded by index.html and by nothing else. Everything in this file is
   a set piece of the landing page: the hop rail, the compression band,
   the measure tool, the horizontal strip, the analytics view, the
   coral bill slab, the commitments list, the plans and the closer.

   If you find yourself wanting a rule from here on an inner page, that
   rule belongs in styles.css or page.css instead. Do not copy it.
   ═══════════════════════════════════════════════════════════════════ */

@property --p { syntax: '<number>'; inherits: true;  initial-value: 0; }
@property --a { syntax: '<number>'; inherits: false; initial-value: 1; }

/* the hop rail reserves a left gutter, but only here */
@media (min-width:1100px){ :root{ --rail: 74px; } }

/* ── hop rail ───────────────────────────────────────────────────── */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:80; background:var(--ink);
  display:none; flex-direction:column; justify-content:center; gap:.15rem;
  border-right:1px solid var(--rule); padding-left:18px;
}
@media (min-width:1100px){ .rail{ display:flex; } }
.rail a{
  font-family:var(--f-m); font-size:10.5px; letter-spacing:.1em; color:var(--dimmer);
  text-decoration:none; padding:.45rem 0; display:flex; align-items:center; gap:.5rem;
  transition:color .3s var(--e-out);
}
.rail a::before{
  content:''; width:10px; height:1px; background:currentColor;
  transition:width .35s var(--e-out); flex:none;
}
.rail a:hover{ color:var(--dim); }
.rail a[aria-current="true"]{ color:var(--coral); }
.rail a[aria-current="true"]::before{ width:26px; }

/* ── 00 hero ────────────────────────────────────────────────────── */
.hero{ padding-top:clamp(2.4rem,5vw,4.4rem); position:relative; }
.hero-grid{ align-items:end; row-gap:2.2rem; }
.hero-title{ grid-column:1/-1; }
@media (min-width:900px){ .hero-title{ grid-column:1/11; } }
.hero-title .ln{ display:block; overflow:hidden; }
.hero-title .ln i{ display:block; font-style:normal; }
.hero-title .hot{ color:var(--coral); }
.hero-aside{ grid-column:1/-1; display:flex; flex-direction:column; gap:1.5rem; }
@media (min-width:900px){ .hero-aside{ grid-column:1/7; } }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; }
.hero-fine{ font-family:var(--f-m); font-size:11.5px; letter-spacing:.06em; color:var(--dim); }
.hero-note{ grid-column:1/-1; align-self:end; }
@media (min-width:900px){ .hero-note{ grid-column:9/13; } }
.hero-note dl{ margin:0; border-top:1px solid var(--rule); }
.hero-note div{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.2rem 1rem; padding:.6rem 0;
                border-bottom:1px solid var(--rule); }
.hero-note dt{ font-family:var(--f-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
               color:var(--dimmer); white-space:nowrap; }
.hero-note dd{ margin:0; font-family:var(--f-m); font-size:11px; letter-spacing:.06em; color:var(--bone);
               text-align:right; }

/* ── the band: the compression ──────────────────────────────────── */
.band{ margin-top:clamp(2rem,4.6vw,4rem); border-top:1px solid var(--rule); position:relative; }
.band-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  padding:.85rem 0; border-bottom:1px solid var(--rule);
}
.band-meta .lbl{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.16em;
                 text-transform:uppercase; color:var(--dimmer); }
.count{
  font-family:var(--f-m); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); margin-left:auto; display:flex; align-items:baseline; gap:.4rem;
}
.count b{ font-size:15px; color:var(--coral); font-weight:700; }
.replay{
  font-family:var(--f-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--rule); padding:.45rem .8rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; transition:border-color .25s,color .25s;
}
.replay:hover{ color:var(--coral); border-color:var(--coral); }
.replay svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; }

.url-long{
  font-family:var(--f-m); font-size:clamp(10.5px,1.16vw,15px); line-height:2.1;
  letter-spacing:.02em; color:var(--dim); padding:1.4rem 0 1.1rem;
  word-break:break-all; line-break:anywhere; overflow-wrap:anywhere; min-height:5.2em;
}
.url-long.spent{ opacity:.5; }
.url-long .c{ display:inline-block; }
.url-long .c.k{ color:var(--bone); }
.url-long .c.t{ color:var(--coral-lo); }

.url-short{
  font-family:var(--f-d); font-variation-settings:'wdth' 74,'wght' 800;
  text-transform:lowercase; letter-spacing:-.035em; line-height:.9;
  font-size:clamp(2.6rem,11.6vw,11.4rem); padding-bottom:.1em;
  display:flex; flex-wrap:wrap; align-items:baseline;
}
.url-short .ch{ display:inline-block; transform-origin:50% 100%; }
.url-short .sl{ color:var(--coral); }
.band-foot{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  border-top:1px solid var(--rule); padding:.85rem 0 0;
}
.band-foot p{ font-family:var(--f-m); font-size:11px; letter-spacing:.06em; color:var(--dimmer); max-width:min(44ch,100%); }

/* ── 01 resolve ─────────────────────────────────────────────────── */
.resolve-grid{ row-gap:clamp(2rem,4vw,3.4rem); align-items:start; }
.resolve-head{ grid-column:1/-1; }
@media (min-width:900px){ .resolve-head{ grid-column:1/8; } }
.resolve-copy{ grid-column:1/-1; }
@media (min-width:900px){ .resolve-copy{ grid-column:9/13; padding-top:.6rem; } }
.tool{ grid-column:1/-1; margin-top:1rem; }
.tool-frame{ border:1px solid var(--rule); }
.tool-bar{
  display:flex; align-items:center; gap:1rem; padding:.6rem .9rem;
  border-bottom:1px solid var(--rule); background:var(--ink-2);
}
.tool-bar .lbl{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.14em;
                text-transform:uppercase; color:var(--dimmer); }
.tool-bar .live{ margin-left:auto; font-family:var(--f-m); font-size:10.5px;
                 letter-spacing:.14em; text-transform:uppercase; color:var(--coral); }
.tool-in{
  width:100%; display:block; background:transparent; border:0; resize:vertical;
  font-family:var(--f-m); font-size:clamp(11px,1.05vw,13.5px); line-height:1.85;
  color:var(--bone); padding:1.1rem .9rem; min-height:7.5em; word-break:break-all;
}
.tool-in:focus{ background:var(--ink-2); }
/* the tint is not a focus state on its own, so keep the ring for keyboard users */
.tool-in:focus-visible{ outline:2px solid var(--coral); outline-offset:-2px; }
.tool-in::placeholder{ color:var(--dimmer); }
.tool-split{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--rule); }
@media (min-width:720px){ .tool-split{ grid-template-columns:repeat(4,1fr); } }
.tool-cell{ padding:1rem .9rem; border-top:1px solid var(--rule); }
@media (min-width:720px){
  .tool-cell{ border-top:0; border-left:1px solid var(--rule); }
  .tool-cell:first-child{ border-left:0; }
}
.tool-cell dt{ font-family:var(--f-m); font-size:10px; letter-spacing:.14em;
               text-transform:uppercase; color:var(--dimmer); }
.tool-cell dd{ margin:.35rem 0 0; font-family:var(--f-m); font-variant-numeric:tabular-nums;
               font-size:clamp(1.6rem,3.4vw,2.5rem); font-weight:700; line-height:1; }
.tool-cell.hot dd{ color:var(--coral); }
.tool-out{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.9rem;
  border-top:1px solid var(--rule); padding:1rem .9rem; background:var(--ink-2);
}
.tool-out .k{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.14em;
              text-transform:uppercase; color:var(--dimmer); }
.tool-out .v{ font-family:var(--f-m); font-size:clamp(1rem,2vw,1.5rem); font-weight:700; }
.tool-out .v em{ font-style:normal; color:var(--coral); }
.tool-hint{ font-family:var(--f-m); font-size:11px; color:var(--dimmer); margin-top:.8rem; letter-spacing:.04em; }

/* parameter strike list */
.params{ grid-column:1/-1; margin-top:clamp(2rem,4vw,3rem); }
.params li{
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:baseline;
  padding:.75rem 0; border-bottom:1px solid var(--rule);
  font-family:var(--f-m); font-size:clamp(11px,1.05vw,13px); letter-spacing:.03em;
  --a:clamp(0,calc((var(--p) - var(--i)*.09 - .06)*7),1);
  color:color-mix(in srgb, var(--dimmer), var(--bone) calc(var(--a)*100%));
  transform:translate3d(0,calc((1 - var(--a))*12px),0);
}
.params li .n{ color:var(--dimmer); }
.params li .w{ color:var(--coral); font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.params li .d{ color:inherit; word-break:break-all; }

/* ── 02 redirect strip ──────────────────────────────────────────── */
.strip-outer{ height:340vh; position:relative; --pw:min(88vw,720px); }
.strip-stick{ position:sticky; top:60px; height:calc(100vh - 60px); overflow:hidden;
              margin-left:var(--rail); display:flex; flex-direction:column; justify-content:center; }
.strip-head{ padding-inline:var(--g); margin-bottom:clamp(1.5rem,4vw,3rem); }
.strip-track{
  display:flex; align-items:stretch; gap:0; width:max-content;
  transform:translate3d(calc(var(--p) * (var(--pw) * -4 - 2vw) + 4vw),0,0);
  will-change:transform;
}
.panel{
  width:var(--pw); flex:none; border-left:1px solid var(--rule);
  padding:clamp(1.4rem,3vw,2.4rem) clamp(1.2rem,3vw,2.6rem);
  display:flex; flex-direction:column; gap:1rem; justify-content:center;
}
.panel:first-child{ border-left:2px solid var(--coral); }
.panel .no{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.18em;
            text-transform:uppercase; color:var(--coral); }
.panel h3{ font-family:var(--f-d); text-transform:uppercase; font-variation-settings:'wdth' 84,'wght' 800;
           font-size:clamp(1.7rem,4.4vw,3.6rem); line-height:.9; letter-spacing:-.02em; }
.panel p{ color:var(--dim); max-width:min(40ch,100%); font-size:clamp(.95rem,1.2vw,1.12rem); }
.panel .wire{ font-family:var(--f-m); font-size:11px; letter-spacing:.06em; color:var(--dimmer);
              border-top:1px solid var(--rule); padding-top:.7rem; word-break:break-all; }
.panel .wire b{ color:var(--coral); font-weight:700; }
.panel-end{ border-left:2px solid var(--coral); }
.panel-act{ margin-top:.4rem; }
.strip-prog{ padding-inline:var(--g); margin-top:clamp(1.4rem,3.5vw,2.6rem); }
.strip-prog .bar{ height:2px; background:var(--rule); position:relative; }
.strip-prog .bar i{ position:absolute; inset:0; background:var(--coral);
                    transform:scaleX(var(--p)); transform-origin:left; }
.strip-prog .lbl{ display:flex; justify-content:space-between; margin-top:.55rem;
                  font-family:var(--f-m); font-size:10.5px; letter-spacing:.14em;
                  text-transform:uppercase; color:var(--dimmer); }

/* ── 03 record ──────────────────────────────────────────────────── */
.rec-grid{ row-gap:clamp(2rem,4vw,3rem); align-items:start; }
.rec-head{ grid-column:1/-1; }
@media (min-width:900px){ .rec-head{ grid-column:1/7; } }
.rec-copy{ grid-column:1/-1; }
@media (min-width:900px){ .rec-copy{ grid-column:8/13; padding-top:.5rem; } }
.viz{ grid-column:1/-1; margin-top:1rem; border:1px solid var(--rule); }
.viz-top{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center;
          padding:.6rem .9rem; border-bottom:1px solid var(--rule); background:var(--ink-2); }
.viz-top .lbl{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.14em;
               text-transform:uppercase; color:var(--dimmer); }
.dims{ display:flex; flex-wrap:wrap; gap:.35rem; margin-left:auto; }
.dims button{
  font-family:var(--f-m); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  padding:.4rem .7rem; border:1px solid var(--rule); color:var(--dim); cursor:pointer;
  transition:color .22s,border-color .22s,background-color .22s;
}
.dims button:hover{ color:var(--bone); border-color:var(--dim); }
.dims button[aria-pressed="true"]{ background:var(--coral); border-color:var(--coral); color:var(--ink); }
.viz-body{ display:grid; grid-template-columns:1fr; }
@media (min-width:860px){ .viz-body{ grid-template-columns:1.55fr 1fr; } }
.bars{ padding:1.1rem .9rem 1.3rem; }
.bar-row{ display:grid; grid-template-columns:minmax(96px,.9fr) 3fr auto; gap:.9rem;
          align-items:center; padding:.5rem 0; }
.bar-row .nm{ font-family:var(--f-m); font-size:11.5px; letter-spacing:.04em; color:var(--bone);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-row .tr{ height:14px; background:var(--ink-3); position:relative; overflow:hidden; }
.bar-row .tr i{ position:absolute; inset:0; background:var(--coral); transform-origin:left;
                transform:scaleX(var(--v,0)); transition:transform .55s var(--e-out); }
.bar-row .pc{ font-family:var(--f-m); font-size:11.5px; color:var(--dim);
              font-variant-numeric:tabular-nums; min-width:3.4em; text-align:right; }
.viz-side{ border-top:1px solid var(--rule); padding:1.1rem .9rem;
           display:flex; flex-direction:column; gap:1.1rem; }
@media (min-width:860px){ .viz-side{ border-top:0; border-left:1px solid var(--rule); } }
.qr{ display:flex; gap:1rem; align-items:flex-start; }
.qr svg{ width:88px; height:88px; flex:none; }
.qr figcaption{ font-family:var(--f-m); font-size:10.5px; line-height:1.6; color:var(--dimmer); letter-spacing:.03em; }
.viz-note{ font-family:var(--f-m); font-size:10.5px; line-height:1.65; color:var(--dimmer);
           border-top:1px solid var(--rule); padding-top:.9rem; letter-spacing:.03em; }
.viz-foot{ border-top:1px solid var(--rule); padding:.7rem .9rem; font-family:var(--f-m);
           font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--coral); }

/* ── 04 the bill: coral slab ────────────────────────────────────── */
.bill{ background:var(--coral); color:var(--ink); border-top:2px solid var(--coral); }
.bill .stamp{ color:var(--ink); }
.bill .stamp::after{ background:rgba(10,15,15,.35); }
.bill .stamp .sub{ color:var(--on-coral); }
.bill-head{ grid-column:1/-1; }
@media (min-width:900px){ .bill-head{ grid-column:1/9; } }
.bill h2{ color:var(--ink); }
.bill-lede{ grid-column:1/-1; color:var(--on-coral-2); max-width:min(44ch,100%); margin-top:1.2rem;
            font-size:clamp(1rem,1.3vw,1.24rem); }
@media (min-width:900px){ .bill-lede{ grid-column:1/7; } }
.stack{ grid-column:1/-1; margin-top:clamp(2.4rem,5vw,4rem); }
.stack li{
  display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid rgba(10,15,15,.28);
}
html.js .stack li{ opacity:0; transform:translate3d(-3vw,0,0); }
html.js .stack.in li{
  opacity:1; transform:none;
  transition:opacity .5s var(--e-out) calc(var(--i)*90ms), transform .6s var(--e-out) calc(var(--i)*90ms);
}
.stack li .nm{ font-family:var(--f-m); font-size:clamp(11.5px,1.15vw,14px); letter-spacing:.04em; }
.stack li .nm small{ display:block; color:var(--on-coral); letter-spacing:.02em; margin-top:.15rem; }
.stack li .pr{ font-family:var(--f-m); font-weight:700; font-variant-numeric:tabular-nums;
               font-size:clamp(1.05rem,2.1vw,1.6rem); }
.stack li.beree{ border-bottom:2px solid var(--ink); }
.stack li.beree .nm{ font-weight:700; }
.total{
  grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:1.5rem; padding-top:1.4rem;
}
.total .t-l{ font-family:var(--f-m); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
             color:var(--on-coral); }
.total .t-n{
  font-family:var(--f-d); font-variation-settings:'wdth' 76,'wght' 800;
  font-size:clamp(3.4rem,13vw,12rem); line-height:.8; letter-spacing:-.04em;
  position:relative; display:inline-block;
}
.total .t-n .strike{
  position:absolute; left:-3%; right:-3%; top:50%; height:clamp(7px,1.2vw,15px);
  background:var(--coral); transform:scaleX(0); transform-origin:left;
}
.total.in .t-n .strike{ transform:scaleX(1); transition:transform .75s var(--e-io) .25s; }
.swap{ grid-column:1/-1; margin-top:clamp(2rem,4vw,3rem); border-top:2px solid var(--ink);
       padding-top:clamp(1.4rem,3vw,2.2rem); display:grid; grid-template-columns:1fr; gap:1.4rem; }
@media (min-width:820px){ .swap{ grid-template-columns:1.2fr 1fr; align-items:end; } }
.swap .big{
  font-family:var(--f-d); font-variation-settings:'wdth' 74,'wght' 800;
  font-size:clamp(4.2rem,17vw,15rem); line-height:.78; letter-spacing:-.045em;
}
html.js .swap .big{ transform:scale(.88); transform-origin:left bottom; opacity:0; }
html.js .swap.in .big{ transform:none; opacity:1;
  transition:transform .9s var(--e-out) .18s, opacity .6s var(--e-out) .18s; }
.swap .big sub{ font-family:var(--f-m); font-size:clamp(11px,1.2vw,14px); font-weight:700;
                letter-spacing:.14em; text-transform:uppercase; vertical-align:baseline;
                bottom:0; margin-left:.6rem; }
.swap .why{ font-size:clamp(.98rem,1.2vw,1.15rem); color:var(--on-coral-2); max-width:min(38ch,100%); }
.swap .why b{ font-variation-settings:'wdth' 100,'wght' 700; }
.bill-fine{ grid-column:1/-1; margin-top:clamp(2.2rem,4vw,3.2rem); font-family:var(--f-m); font-size:11px;
            line-height:1.7; color:var(--on-coral); max-width:min(70ch,100%); letter-spacing:.02em; }
.bill .btn-solid{ border-color:var(--ink); color:var(--coral); }
.bill .btn-solid::before{ background:var(--ink); }
.bill .btn-solid:hover,.bill .btn-solid:focus-visible{ color:var(--ink); }

/* ── 05 terms ───────────────────────────────────────────────────── */
.terms-head{ grid-column:1/-1; }
@media (min-width:900px){ .terms-head{ grid-column:1/8; } }
.terms{ grid-column:1/-1; margin-top:clamp(2.2rem,4.5vw,3.4rem); border-top:1px solid var(--rule); }
.terms li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem clamp(1rem,3vw,2.6rem);
  padding:clamp(1rem,2.2vw,1.6rem) 0; border-bottom:1px solid var(--rule);
  align-items:baseline;
}
@media (min-width:820px){
  .terms li{ grid-template-columns:auto minmax(0,1fr) minmax(0,1fr); }
  .terms li:nth-child(even) .t-txt{ grid-column:3; }
  .terms li:nth-child(even) .t-no{ color:var(--coral); }
}
.terms .t-no{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.14em; color:var(--dimmer); }
.terms .t-txt{ font-family:var(--f-d); text-transform:uppercase;
               font-variation-settings:'wdth' 88,'wght' 700; letter-spacing:-.012em;
               font-size:clamp(1.15rem,2.6vw,2.15rem); line-height:.98; }
.terms li:hover .t-txt{ color:var(--coral); }
.terms .t-txt em{ font-style:normal; color:var(--dimmer); }

/* ── 06 plans ───────────────────────────────────────────────────── */
.plans-head{ grid-column:1/-1; }
@media (min-width:900px){ .plans-head{ grid-column:1/9; } }
.plan-free{ grid-column:1/-1; margin-top:clamp(2.2rem,4.5vw,3.4rem);
            border-top:1px solid var(--rule); padding-top:1.4rem; }
@media (min-width:900px){ .plan-free{ grid-column:1/5; } }
.plan-bundle{ grid-column:1/-1; margin-top:clamp(2rem,4vw,3.4rem);
              border-top:2px solid var(--coral); padding-top:1.4rem; }
@media (min-width:900px){ .plan-bundle{ grid-column:6/13; margin-top:clamp(2.2rem,4.5vw,3.4rem); } }
.plan-tag{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.16em;
           text-transform:uppercase; color:var(--dimmer); }
.plan-bundle .plan-tag{ color:var(--coral); }
.plan-n{
  font-family:var(--f-d); font-variation-settings:'wdth' 74,'wght' 800;
  line-height:.82; letter-spacing:-.04em; margin-top:.5rem;
  font-size:clamp(3.6rem,9vw,7.5rem);
}
.plan-bundle .plan-n{ font-size:clamp(4.4rem,13vw,11rem); color:var(--coral); }
.plan-n sub{ font-family:var(--f-m); font-size:11px; font-weight:700; letter-spacing:.14em;
             text-transform:uppercase; color:var(--dim); vertical-align:baseline; bottom:0;
             margin-left:.55rem; }
.plan-list{ margin-top:1.4rem; }
.plan-list li{ position:relative; padding:.5rem 0 .5rem 1.5rem; border-bottom:1px solid var(--rule);
               font-size:clamp(.92rem,1.05vw,1.02rem); color:var(--dim); }
.plan-list li::before{ content:'/'; position:absolute; left:0; top:.5rem; color:var(--coral); font-family:var(--f-m); }
.plan-list li b{ color:var(--bone); font-variation-settings:'wdth' 100,'wght' 600; }
.plan-act{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.plan-fine{ grid-column:1/-1; margin-top:2rem; font-family:var(--f-m); font-size:11px;
            color:var(--dimmer); letter-spacing:.03em; line-height:1.7; max-width:min(72ch,100%); }

/* ── 07 closer ──────────────────────────────────────────────────── */
.closer{ border-top:2px solid var(--coral); padding-block:clamp(4rem,9vw,8rem); }
.closer-loc{ font-family:var(--f-m); font-size:clamp(11px,1.15vw,13.5px); letter-spacing:.12em;
             text-transform:uppercase; color:var(--dimmer); }
.closer-loc b{ color:var(--coral); font-weight:700; }
.closer h2{ margin-top:1.2rem; }
.closer-row{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center;
             margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--rule); padding-top:1.6rem; }
.closer-row p{ font-family:var(--f-m); font-size:11px; letter-spacing:.06em; color:var(--dim); }

/* ── entrance choreography ──────────────────────────────────────── */
html.js .pre .hero-title .ln i{ transform:translate3d(0,110%,0); }
.hero-title .ln i{ transition:transform 1s var(--e-out) var(--d,0s); }
html.js .pre .hero-aside,html.js .pre .hero-note,html.js .pre .band{ opacity:0; transform:translate3d(0,20px,0); }
.hero-aside,.hero-note,.band{ transition:opacity .8s var(--e-out) var(--d,0s), transform .9s var(--e-out) var(--d,0s); }

/* ── reduced motion, home set pieces ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html.js .pre .hero-title .ln i,html.js .pre .hero-aside,
  html.js .pre .hero-note,html.js .pre .band{ opacity:1; transform:none; }
  .strip-outer{ height:auto; }
  .strip-stick{ position:static; height:auto; display:block; }
  .strip-track{ transform:none !important; width:auto; flex-wrap:wrap; }
  .panel{ width:100%; border-left:2px solid var(--rule); margin-bottom:1px;
          padding-inline:calc(var(--g) + var(--rail)) var(--g); }
  .strip-prog{ display:none; }
  .params li,.stack li,.total,.swap .big{ opacity:1 !important; transform:none !important; }
  html.js .stack li,html.js .swap .big{ opacity:1 !important; transform:none !important; }
  .total .t-n .strike{ transform:scaleX(1) !important; }
  .url-long.spent{ opacity:1; }
  .params li{ color:var(--bone); }
}