/* ==========================================================================
   Sofa Power
   Palette and type are lifted directly from the tub: black, one gold, one red.
   Structural device is the skewed gold flash strip printed on the label.
   ========================================================================== */

:root{
  --void:      #0B0B0C;   /* page ground — the tub body */
  --carbon:    #141417;   /* raised panels */
  --carbon-hi: #1D1D21;   /* hover / borders */
  --power:     #F2B01E;   /* the gold */
  --power-hot: #FFD24A;   /* top bevel on gold */
  --klaxon:    #D81E2C;   /* urgency only, used sparingly */
  --bone:      #F4F2ED;   /* body text — pure white is harsh at this scale */
  --ash:       #8D8D95;   /* captions, legal */
  --hair:      rgba(244,242,237,.13);

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body:    'Barlow Semi Condensed', system-ui, sans-serif;
  --util:    'Barlow Condensed', system-ui, sans-serif;

  --skew: -8deg;                 /* the label's flash angle */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --max: 1240px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% ; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font:400 clamp(1rem,.96rem + .28vw,1.125rem)/1.62 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

:focus-visible{ outline:3px solid var(--power); outline-offset:3px; border-radius:2px }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--power); color:var(--void); padding:.75rem 1.25rem;
  font:600 1rem var(--util); text-transform:uppercase; letter-spacing:.06em;
}
.skip:focus{ left:0 }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut) }
.wrap--narrow{ max-width:820px }
.nowrap{ white-space:nowrap }

/* ── shared type ────────────────────────────────────────────────────────── */

.eyebrow{
  margin:0 0 1rem;
  font:600 .8rem/1.3 var(--util);
  text-transform:uppercase; letter-spacing:.22em; color:var(--power);
}
.eyebrow--center{ text-align:center }

.h2{
  margin:0 0 1rem;
  font:400 clamp(2.2rem,1.4rem + 3.4vw,4rem)/.94 var(--display);
  text-transform:uppercase; letter-spacing:.005em;
  transform:skewX(var(--skew)); transform-origin:left bottom;
}
.h2--center{ text-align:center; transform:none; margin-inline:auto }

.lede{ margin:0 0 1.1rem; max-width:56ch; color:#CFCDC8; font-size:1.06em }
.lede--center{ margin-inline:auto; text-align:center }

.footnote{ margin:0; font:500 .82rem/1.5 var(--util); color:var(--ash);
  text-transform:uppercase; letter-spacing:.1em }
.footnote--center{ text-align:center }

.stars{ color:var(--power); letter-spacing:.12em }
.stars__off{ color:#3A3A40 }

/* skewed gold flash strip — the label's own device */
.flash{
  display:inline-block; margin:0 0 1.5rem;
  background:var(--power); color:var(--void);
  transform:skewX(var(--skew));
  padding:.34em .95em .28em;
  box-shadow:inset 0 2px 0 var(--power-hot);
}
.flash > span{
  display:block; transform:skewX(calc(var(--skew) * -1));
  font:400 clamp(1.05rem,.9rem + .7vw,1.5rem)/1.15 var(--display);
  text-transform:uppercase; letter-spacing:.02em;
}
.flash--lg > span{ font-size:clamp(1.5rem,1rem + 2.2vw,2.6rem) }

/* ── buttons ───────────────────────────────────────────────────────────── */

.btn{
  --pad:1.05rem 2rem;
  display:inline-block; padding:var(--pad); border:2px solid transparent;
  font:600 1.05rem/1 var(--util); text-transform:uppercase; letter-spacing:.09em;
  text-decoration:none; cursor:pointer;
  transition:transform .14s ease, background-color .14s ease, color .14s ease;
}
.btn--sm{ --pad:.6rem 1.15rem; font-size:.92rem }
.btn--gold{
  background:var(--power); color:var(--void);
  box-shadow:inset 0 2px 0 var(--power-hot), 0 8px 24px -12px var(--power);
}
.btn--gold:hover{ background:var(--power-hot); transform:translateY(-2px) }
.btn--ghost{ border-color:var(--hair); color:var(--bone) }
.btn--ghost:hover{ border-color:var(--power); color:var(--power) }
.btn:active{ transform:translateY(0) }

/* ── masthead ──────────────────────────────────────────────────────────── */

.masthead{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,12,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.masthead__in{
  max-width:var(--max); margin-inline:auto; padding:.85rem var(--gut);
  display:flex; align-items:center; gap:2rem;
}
.wordmark{
  display:inline-flex; align-items:baseline; gap:.28em;
  text-decoration:none; transform:skewX(var(--skew));
  font:400 clamp(1.25rem,1.1rem + .5vw,1.6rem)/1 var(--display);
  text-transform:uppercase; letter-spacing:.01em; margin-right:auto;
}
.wordmark__sofa{ color:var(--bone) }
.wordmark__power{ color:var(--power) }
.wordmark--sm{ font-size:1.5rem; margin-right:0 }

.nav{ display:flex; gap:1.75rem }
.nav a{
  text-decoration:none; color:#BDBBB6;
  font:600 .92rem/1 var(--util); text-transform:uppercase; letter-spacing:.1em;
  padding-block:.4rem; border-bottom:2px solid transparent;
}
.nav a:hover{ color:var(--power); border-bottom-color:var(--power) }

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,5.5rem);
}
/* single warm bloom behind the product, nothing else */
.hero::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:6%; top:8%; width:min(760px,70vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(242,176,30,.20), transparent 65%);
}
/* Three areas rather than two columns, so that on a phone the headline can
   come before the product shot instead of being pushed below it. */
.hero__in{
  position:relative; z-index:1;
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1.15fr .85fr;
  grid-template-areas:'lead product' 'rest product';
  grid-template-rows:auto auto;
  gap:0 clamp(2rem,5vw,4.5rem);
  align-content:center;
}
.hero__lead{ grid-area:lead; align-self:end }
.hero__rest{ grid-area:rest; align-self:start }
.hero__product{ grid-area:product; align-self:center }
.hero__h1{
  margin:0 0 1.6rem;
  font:400 clamp(3rem,1.4rem + 7.4vw,7rem)/.86 var(--display);
  text-transform:uppercase; letter-spacing:-.005em;
  transform:skewX(var(--skew)); transform-origin:left bottom;
}
.hero__h1 span{ display:block }
.hero__h1 span:nth-child(2){ color:var(--power) }

.hero__sub{ margin:0 0 2rem; max-width:52ch; color:#CFCDC8 }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.5rem }
.hero__trust{
  margin:0; color:var(--ash);
  font:500 .95rem/1.5 var(--util); letter-spacing:.04em;
}
.hero__trust strong{ color:var(--bone) }

.hero__product{ position:relative; justify-self:center; width:100% }
.hero__tub{
  width:100%; max-width:440px; margin-inline:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.75));
}
/* the guarantee seal from the ad, rebuilt in type */
.seal{
  position:absolute; left:-6%; top:4%; margin:0;
  width:112px; height:112px; display:grid; place-content:center;
  border-radius:50%; background:var(--void);
  border:3px solid var(--power); box-shadow:0 0 0 5px var(--void), 0 0 0 7px var(--power);
  text-align:center; color:var(--power);
  font:600 .66rem/1.25 var(--util); text-transform:uppercase; letter-spacing:.14em;
  rotate:-12deg;
}
.seal span{ display:block; font:400 2.1rem/1 var(--display); color:var(--bone) }

/* ── ticker seam ───────────────────────────────────────────────────────── */

.ticker{
  background:var(--power); color:var(--void);
  border-block:2px solid var(--void);
  overflow:hidden; padding-block:.55rem;
  user-select:none; -webkit-user-select:none;
}
.ticker__track{
  display:flex; width:max-content; gap:3rem;
  animation:slide 42s linear infinite;
}
.ticker__track span{
  font:400 1.05rem/1 var(--display); text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap;
}
.ticker__track span::after{ content:'·'; margin-left:3rem; opacity:.45 }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ── bands ─────────────────────────────────────────────────────────────── */

.band{ padding-block:clamp(4rem,8vw,7rem) }
.band--tight{ padding-block:clamp(2.5rem,5vw,4rem) }
.band--meter{ background:var(--carbon); border-block:1px solid var(--hair) }
.band--buy{ background:var(--carbon); border-block:1px solid var(--hair) }

/* ── signature: the effort meter ───────────────────────────────────────── */

.meter{
  margin-top:3rem;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  background:var(--void); border:1px solid var(--hair);
  padding:clamp(1.5rem,4vw,3rem);
}
.meter__label,.meter__outlabel{
  margin:0 0 1rem;
  font:600 .8rem/1 var(--util); text-transform:uppercase; letter-spacing:.2em;
  color:var(--ash); display:block;
}
.meter__range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:14px; margin:0; background:transparent; cursor:grab;
}
.meter__range:active{ cursor:grabbing }
.meter__range::-webkit-slider-runnable-track{
  height:14px; background:#232329; border:1px solid var(--hair);
}
.meter__range::-moz-range-track{
  height:14px; background:#232329; border:1px solid var(--hair);
}
.meter__range::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:34px; margin-top:-11px;
  background:var(--power); box-shadow:inset 0 2px 0 var(--power-hot);
  border:0; border-radius:2px;
}
.meter__range::-moz-range-thumb{
  width:26px; height:34px; border:0; border-radius:2px;
  background:var(--power); box-shadow:inset 0 2px 0 var(--power-hot);
}
.meter__scale{
  display:flex; justify-content:space-between; gap:1rem; margin-top:.85rem;
  font:500 .74rem/1.3 var(--util); text-transform:uppercase; letter-spacing:.12em;
  color:var(--ash);
}
.meter__scale span:nth-child(2){ text-align:center }
.meter__scale span:last-child{ text-align:right }

.meter__out{ border-left:1px solid var(--hair); padding-left:clamp(1.5rem,4vw,3rem) }
.meter__value{
  margin:0 0 1rem;
  font:400 clamp(2.8rem,2rem + 3.6vw,4.6rem)/.9 var(--display);
  text-transform:uppercase; color:var(--power);
  transform:skewX(var(--skew)); transform-origin:left bottom;
}
.meter__bar{ height:12px; background:#232329; border:1px solid var(--hair) }
.meter__bar i{
  display:block; height:100%; background:var(--power);
  box-shadow:inset 0 2px 0 var(--power-hot);
}
.meter__note{
  margin:1rem 0 0; min-height:3em;
  font:500 1.15rem/1.4 var(--body); color:#CFCDC8;
}
.meter__note[data-alarm='true']{ color:var(--klaxon); font-weight:600 }

/* ── pillars ───────────────────────────────────────────────────────────── */

.pillars{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hair); border:1px solid var(--hair);
}
.pillars li{ background:var(--void); padding:clamp(1.5rem,3vw,2.25rem) }
.pillars__ico{ display:block; width:38px; height:38px; color:var(--power); margin-bottom:1.1rem }
.pillars__ico svg{ width:100%; height:100% }
.pillars h3{
  margin:0 0 .6rem;
  font:400 1.5rem/1 var(--display); text-transform:uppercase; letter-spacing:.01em;
}
.pillars h3 sup{ color:var(--power); font-size:.55em }
.pillars p{ margin:0; color:var(--ash); font-size:.98rem }

/* ── inside / supplement facts ─────────────────────────────────────────── */

.inside{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem); align-items:start }

.specs{
  margin:2.25rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--hair); border:1px solid var(--hair);
}
.specs > div{ background:var(--void); padding:1rem 1.1rem }
.specs dt{
  font:600 .72rem/1 var(--util); text-transform:uppercase; letter-spacing:.18em;
  color:var(--ash); margin-bottom:.4rem;
}
.specs dd{ margin:0; font:500 1.02rem/1.3 var(--body); color:var(--bone) }

/* deliberately styled like the real thing: white, boxed, Helvetica-ish */
.panel{
  background:#FFF; color:#000; border:2px solid #000;
  padding:1rem 1.1rem; font-family:var(--util); font-size:.95rem; line-height:1.32;
}
.panel p{ margin:0 }
.panel__title{
  font:400 2.1rem/.9 var(--display); text-transform:uppercase; letter-spacing:-.01em;
  margin-bottom:.35rem !important;
}
.panel__serving{ font-weight:500; margin-bottom:.5rem !important }
.panel__rule{ height:1px; background:#000; margin:.35rem 0 }
.panel__rule--fat{ height:8px }
.panel__head{
  display:flex; justify-content:space-between; font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.03em;
}
.panel__row{
  display:flex; justify-content:space-between; gap:1rem;
  padding-block:.24rem; border-bottom:1px solid #000; font-weight:600;
}
.panel__row span:last-child{ font-weight:700 }
.panel__row--in{ padding-left:1.2rem; font-weight:500 }
.panel__foot{ margin-top:.6rem !important; font-size:.8rem; font-weight:500; line-height:1.4 }

/* ── photo band ────────────────────────────────────────────────────────── */

/* The photograph already carries a "No lifting required" sign on its left wall.
   Frame to keep that sign, and set our disclaimer opposite it — the tension
   between the two is the point, so neither may cover the other. */
.scene{ position:relative; isolation:isolate }
.scene img{ width:100%; height:clamp(360px,46vw,560px); object-fit:cover; object-position:38% 32% }
.scene::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,.10) 30%,rgba(11,11,12,.86) 66%,rgba(11,11,12,.97) 100%);
}
.scene__copy{
  position:absolute; z-index:2; inset:0;
  display:grid; align-content:center; justify-items:end; text-align:right;
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
}
.scene__quote{
  margin:0 0 .9rem; max-width:14ch;
  font:400 clamp(1.9rem,1.1rem + 3.4vw,3.8rem)/.94 var(--display);
  text-transform:uppercase; color:var(--bone);
  transform:skewX(var(--skew)); transform-origin:right bottom;
}
.scene__attr{
  margin:0; max-width:30ch; color:var(--power);
  font:600 .95rem/1.5 var(--util); text-transform:uppercase; letter-spacing:.1em;
}

/* ── reviews ───────────────────────────────────────────────────────────── */

.reviews{
  list-style:none; margin:3rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.reviews li{ background:var(--carbon); border:1px solid var(--hair); padding:1.75rem }
.reviews .stars{ margin:0 0 1rem; font-size:1.1rem }
.reviews blockquote{ margin:0 0 1.25rem; font-size:1.02rem; color:#DCDAD5 }
.reviews blockquote::before{ content:'“' }
.reviews blockquote::after{ content:'”' }
.reviews__by{
  margin:0; font:600 .85rem/1 var(--util);
  text-transform:uppercase; letter-spacing:.11em; color:var(--bone);
}
.reviews__by span{ color:var(--ash); font-weight:500 }

/* ── buy ───────────────────────────────────────────────────────────────── */

.buy{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center }
.buy__art img{ width:100%; border:1px solid var(--hair) }
.buy__box{ background:var(--void); border:1px solid var(--hair); padding:clamp(1.5rem,4vw,2.75rem) }

.price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.8rem; margin:1.5rem 0 .4rem }
.price__now{ font:400 clamp(3rem,2rem + 4vw,4.6rem)/.85 var(--display); color:var(--power) }
.price__was{ font:500 1.3rem/1 var(--util); color:var(--ash); text-decoration:line-through }
.price__save{
  background:var(--klaxon); color:#fff; padding:.35em .7em;
  font:600 .85rem/1 var(--util); text-transform:uppercase; letter-spacing:.1em;
}
.price__unit{ margin:0 0 1.75rem; color:var(--ash); font:500 .95rem/1 var(--util); letter-spacing:.05em }

.notice{
  margin:0 0 1.75rem; padding:1rem 1.15rem;
  border-left:4px solid var(--power); background:rgba(242,176,30,.07);
  font-size:.98rem; color:#CFCDC8;
}
.notice strong{ color:var(--bone) }

.signup__label{
  display:block; margin-bottom:.6rem;
  font:600 .78rem/1 var(--util); text-transform:uppercase; letter-spacing:.18em; color:var(--ash);
}
.signup__row{ display:flex; flex-wrap:wrap; gap:.6rem }
.signup__row input{
  flex:1 1 15rem; min-width:0; padding:1rem 1.1rem;
  background:var(--carbon); border:2px solid var(--hair); color:var(--bone);
  font:400 1.05rem/1 var(--body);
}
.signup__row input::placeholder{ color:#6A6A72 }
.signup__row input:focus{ outline:none; border-color:var(--power) }
.signup__row input[aria-invalid='true']{ border-color:var(--klaxon) }
.signup__msg{ margin:.85rem 0 0; min-height:1.5em; font:500 .95rem/1.4 var(--body) }
.signup__msg[data-state='ok']{ color:var(--power) }
.signup__msg[data-state='err']{ color:var(--klaxon) }
/* honeypot — off-screen, never display:none (bots skip hidden fields) */
.signup__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.btn:disabled{ opacity:.6; cursor:progress; transform:none }


.assur{
  list-style:none; margin:1.75rem 0 0; padding:1.5rem 0 0; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  font:500 .85rem/1 var(--util); text-transform:uppercase; letter-spacing:.09em; color:var(--ash);
}
.assur li::before{ content:'✓'; color:var(--power); margin-right:.45em; font-weight:700 }

/* ── faq ───────────────────────────────────────────────────────────────── */

.faq{ margin-top:3rem; border-top:1px solid var(--hair) }
.faq details{ border-bottom:1px solid var(--hair) }
.faq summary{
  list-style:none; cursor:pointer; padding:1.35rem 3rem 1.35rem 0; position:relative;
  font:400 clamp(1.15rem,1rem + .55vw,1.5rem)/1.25 var(--display);
  text-transform:uppercase; letter-spacing:.01em;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:'+'; position:absolute; right:.25rem; top:50%; translate:0 -50%;
  color:var(--power); font-size:1.6rem; line-height:1; transition:rotate .2s ease;
}
.faq details[open] summary::after{ rotate:45deg }
.faq summary:hover{ color:var(--power) }
.faq details > div{ padding:0 3rem 1.6rem 0 }
.faq details p{ margin:0; color:#CFCDC8; max-width:64ch }

/* ── footer ────────────────────────────────────────────────────────────── */

.foot{ border-top:1px solid var(--hair); padding-block:clamp(3rem,6vw,4.5rem) 2rem }
.foot__in{ display:grid; grid-template-columns:1.2fr 1.8fr; gap:clamp(2rem,5vw,4rem) }
.foot__tag{
  margin:.9rem 0 .5rem; color:var(--power);
  font:600 .92rem/1.4 var(--util); text-transform:uppercase; letter-spacing:.12em;
}
.foot__aside{ margin:0; color:var(--ash); font-size:.95rem }
.foot__aside a{ color:var(--bone) }

.foot__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }
.foot__nav h4{
  margin:0 0 .9rem;
  font:600 .76rem/1 var(--util); text-transform:uppercase; letter-spacing:.18em; color:var(--ash);
}
.foot__nav a{
  display:block; margin-bottom:.55rem; text-decoration:none;
  color:#C6C4BF; font-size:.98rem;
}
.foot__nav a:hover{ color:var(--power) }

/* rule drawn inside the gutter so it lines up with the text it divides */
.foot__legal{ position:relative; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.75rem }
.foot__legal::before{
  content:''; position:absolute; top:0; left:var(--gut); right:var(--gut);
  height:1px; background:var(--hair);
}
.foot__legal p{ margin:0 0 .6rem; color:#6E6E76; font-size:.84rem; line-height:1.55; max-width:92ch }
.foot__copy{ margin-top:1.1rem !important }

/* ── responsive ────────────────────────────────────────────────────────── */

@media (max-width:960px){
  .nav{ display:none }
  .inside,.buy,.meter,.foot__in{ grid-template-columns:1fr }
  /* headline first, then the product, then the pitch and the buttons */
  .hero__in{
    grid-template-columns:1fr;
    grid-template-areas:'lead' 'product' 'rest';
    gap:1.75rem 0;
  }
  .hero__lead,.hero__rest{ align-self:auto }
  .hero__tub{ max-width:300px }
  .seal{ width:84px; height:84px; left:2%; top:0 }
  .seal span{ font-size:1.55rem }
  .meter__out{ border-left:0; border-top:1px solid var(--hair);
    padding-left:0; padding-top:2rem }
  .pillars,.reviews{ grid-template-columns:1fr }
  .buy__art{ order:2 }
  .scene::after{ background:linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.92) 75%) }
  .scene__quote{ max-width:none }
}

@media (max-width:520px){
  .specs{ grid-template-columns:1fr }
  .hero__cta .btn{ width:100% ; text-align:center }
  .foot__nav{ grid-template-columns:1fr 1fr }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ticker__track{ animation:none }
}

/* ── standalone documents (privacy, terms, 404) ────────────────────────── */

.doc{ padding-block:clamp(3rem,7vw,6rem) }
.doc h1{
  margin:0 0 .5rem;
  font:400 clamp(2.4rem,1.6rem + 3.4vw,4rem)/.94 var(--display);
  text-transform:uppercase;
  transform:skewX(var(--skew)); transform-origin:left bottom;
}
.doc__updated{
  margin:0 0 2.5rem; color:var(--ash);
  font:600 .8rem/1 var(--util); text-transform:uppercase; letter-spacing:.16em;
}
.doc h2{
  margin:2.5rem 0 .75rem;
  font:400 1.4rem/1.1 var(--display); text-transform:uppercase; color:var(--power);
}
.doc p,.doc li{ color:#CFCDC8; max-width:68ch }
.doc p{ margin:0 0 1rem }
.doc ul{ margin:0 0 1rem; padding-left:1.2rem }
.doc li{ margin-bottom:.5rem }
.doc a{ color:var(--power) }

.oops{ text-align:center; padding-block:clamp(4rem,12vw,9rem) }
.oops h1{ transform:none; margin-inline:auto }
.oops p{ margin-inline:auto; text-align:center }