/* Better One — efficiency statement, closing invitation, early-access form, footer */

/* ---------- 4 · efficiency ---------- */
.eff { padding-block: clamp(5rem, 11vw, 11rem) clamp(5rem, 10vw, 10rem); overflow: clip; }
.eff > .eyebrow, .eff__title, .eff__body { margin-inline: var(--gutter); }
.eff__title { margin-top: 1.75rem; font: 400 clamp(3.5rem, 12.6vw, 13.6rem)/.86 var(--f-serif); letter-spacing: -.032em; text-wrap: balance; }
.strike { position: relative; display: inline-block; font-style: italic; color: var(--muted); }
.strike::after {
  content: ""; position: absolute; left: -.03em; right: -.01em; top: 57%; height: .06em; background: var(--verm);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-io) .95s;
}
.eff__title.is-in .strike::after, .no-js .strike::after { transform: scaleX(1); }

/* contact sheet: many frames, one pick */
.sheet { margin-top: clamp(3rem, 6vw, 6rem); }
.sheet__strip {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.35rem, .8vw, .8rem);
  padding: clamp(2.2rem, 3.4vw, 3.2rem) var(--gutter) clamp(3.4rem, 5.4vw, 5.2rem); background: #050404;
}
.sheet__strip::before, .sheet__strip::after {
  content: ""; position: absolute; inset: .55rem 0 auto; height: .45rem;
  background: repeating-linear-gradient(90deg, rgba(237, 230, 215, .34) 0 .7rem, transparent .7rem 1.5rem);
}
.sheet__strip::after { inset: auto 0 .55rem; }
.sheet__f {
  position: relative; aspect-ratio: 4 / 5; opacity: .46;
  background: linear-gradient(var(--a, 130deg), #160503 0%, #a3200c 38%, #ff5a2b 52%, #7a160a 66%, #100302 100%) var(--p, 30% 40%) / 280% 280%;
}
.sheet__f::before { content: attr(data-n); position: absolute; left: 0; bottom: calc(100% + .3rem); font: 500 .54rem/1 var(--f-mono); letter-spacing: .1em; color: rgba(237, 230, 215, .62); }
.sheet__f:nth-child(1) { --a: 118deg; --p: 8% 20%; }   .sheet__f:nth-child(2) { --a: 142deg; --p: 26% 64%; }
.sheet__f:nth-child(3) { --a: 96deg;  --p: 44% 30%; }  .sheet__f:nth-child(4) { --a: 160deg; --p: 70% 52%; }
.sheet__f:nth-child(5) { --a: 124deg; --p: 58% 12%; }  .sheet__f:nth-child(6) { --a: 108deg; --p: 18% 82%; }
.sheet__f:nth-child(7) { --a: 132deg; --p: 48% 46%; }  .sheet__f:nth-child(8) { --a: 150deg; --p: 82% 28%; }
.sheet__f:nth-child(9) { --a: 100deg; --p: 34% 70%; }  .sheet__f:nth-child(10) { --a: 138deg; --p: 64% 86%; }
.sheet__f:nth-child(11) { --a: 114deg; --p: 90% 60%; } .sheet__f:nth-child(12) { --a: 156deg; --p: 14% 44%; }
.sheet__f.is-pick { opacity: 1; z-index: 1; }
.sheet__f svg { position: absolute; left: 50%; top: 50%; width: 156%; height: 156%; max-width: none; translate: -50% -50%; overflow: visible; }
.sheet__f path { fill: none; stroke: var(--bone); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease-io) .7s; }
.sheet.is-in .sheet__f path, .no-js .sheet__f path { stroke-dashoffset: 0; }
.sheet__f em { position: absolute; left: 50%; top: calc(100% + 1.1rem); translate: -50% 0; rotate: -5deg; white-space: nowrap; font: italic 400 clamp(1.15rem, 2vw, 2rem)/1 var(--f-serif); color: var(--bone); }

.eff__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem var(--gutter); margin-top: clamp(3rem, 6vw, 6rem); }
.eff__body .lede { max-width: 36ch; }
.eff__aside { text-align: right; font: italic 400 clamp(1.6rem, 2.8vw, 2.8rem)/1.04 var(--f-serif); letter-spacing: -.015em; }

/* build facts: what Better One trains on today, what is planned next, and the software stack */
.rig {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: 2rem var(--gutter);
  margin: clamp(3rem, 6vw, 6rem) var(--gutter) 0; padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--line);
}
.rig__head { display: grid; gap: 1.25rem; }
.rig__title { max-width: 12ch; font: 400 clamp(2.2rem, 4.2vw, 4.2rem)/.96 var(--f-serif); letter-spacing: -.022em; text-wrap: balance; }
.rig__facts { display: grid; gap: 1.25rem; }
.rig .notes { border-top: 0; }
.rig .notes > div:first-child { padding-top: 0; }

/* ---------- 5 · close ---------- */
.close { padding: clamp(5rem, 11vw, 11rem) var(--gutter) clamp(4rem, 8vw, 8rem); overflow: clip; }
.close__title { margin-top: 1.75rem; font: 400 clamp(3.9rem, 15.2vw, 17rem)/.82 var(--f-serif); letter-spacing: -.036em; text-wrap: balance; }
.close__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: 2.5rem var(--gutter);
  margin-top: clamp(3rem, 7vw, 7rem); padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--ink);
}
.close__grid > .lede { max-width: 15ch; font: 400 clamp(1.7rem, 2.9vw, 2.9rem)/1.06 var(--f-serif); letter-spacing: -.015em; }

.access { display: grid; justify-items: start; gap: 1.75rem; }
.access[hidden] { display: none; }
.field { display: grid; gap: .6rem; width: 100%; }
.field label, .opts legend { font: 500 .68rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.field input {
  width: 100%; padding: .15rem 0 .6rem; background: none; border: 0; border-bottom: 2px solid var(--ink); color: var(--ink);
  font: 400 clamp(1.9rem, 3.7vw, 3.5rem)/1.1 var(--f-serif); letter-spacing: -.015em;
}
.field input:focus-visible { outline: 0; box-shadow: 0 3px 0 var(--ink); }
.field input[aria-invalid="true"] { border-bottom-style: dashed; }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 100px var(--verm) inset; }
.field__err { display: flex; align-items: baseline; gap: .7em; font: 500 .78rem/1.4 var(--f-mono); letter-spacing: .02em; }
.field__err[hidden] { display: none; }
.field__err::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.5em; height: 1.5em; background: var(--ink); color: var(--verm); }

.opts legend { margin-bottom: .9rem; }
.opts legend span { margin-left: .6em; color: var(--muted); }
.opts label { display: inline-block; margin: 0 .35rem .5rem 0; cursor: pointer; }
.opts input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.opts label span { display: inline-block; padding: .85em 1.05em; font: 500 .66rem/1 var(--f-mono); letter-spacing: .11em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s; }
.opts label:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.opts input:checked + span { background: var(--ink); color: var(--bone); box-shadow: inset 0 0 0 1px var(--ink); }
.opts input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.access__note { max-width: 46ch; padding: .85em 1em; box-shadow: inset 0 0 0 1px var(--ink); font: 500 .74rem/1.5 var(--f-mono); letter-spacing: .02em; }
.access__status { font: 500 .8rem/1.45 var(--f-mono); letter-spacing: .02em; }
.access__status:empty { display: none; }
.access__done { display: grid; gap: 1.1rem; outline-offset: 10px; }
.access__done[hidden] { display: none; }
.access__done-title { font: italic 400 clamp(3rem, 6.6vw, 6.6rem)/.9 var(--f-serif); letter-spacing: -.03em; }
.access__done p + p { max-width: 30ch; font-size: 1.1rem; line-height: 1.4; }

/* ---------- footer ---------- */
.foot { padding: clamp(3rem, 6vw, 6rem) var(--gutter) 2rem; }
.foot__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; padding-bottom: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); }
.foot__line, .foot__legal { font: 500 .66rem/1.5 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: start; gap: 1.5rem var(--gutter); padding-block: 2rem 3rem; font-size: .92rem; line-height: 1.5; }
.foot__grid p { max-width: 34ch; }

@media (max-width: 800px) {
  .sheet__strip { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1.6rem; }
  .eff__body, .rig, .close__grid { grid-template-columns: minmax(0, 1fr); }
  .eff__aside { text-align: left; }
  .close__grid > .lede { max-width: 20ch; }
  .access .btn { width: 100%; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
}