/* ---------- #better · "The paper trail" (page 03's climax, round 2; js/p03-better.js)
   The dark meeting table seen through a .cam/.desk: one shared heads of terms at reading distance (Draft, its date,
   Subject to contract, its parties), the letterheads that join its head like the leaves of a book, the requirement sheet
   hiding under it and the pile of the same problem, the blank new document, the glossy deck turned face down, the four
   blank rows, the climax (agreed rows only carry light), then the eyes lean back: .bt-trail is the table plane with every
   paper of the journey lying where it was left, posed with the document; the two last rows; the cover sheets. */

/* the room: no light at all until the first agreed row (the pool's opacity is 0 until then) */
#better .gnd .bt-pool { position: absolute; left: 50%; top: 62%; width: 92vw; height: calc(76 * var(--sv)); margin: calc(-38 * var(--sv)) 0 0 -46vw; border-radius: 50%; background: radial-gradient(closest-side, rgb(236 246 238 / 0.2), rgb(150 214 182 / 0.11) 40%, rgb(30 110 80 / 0.05) 68%, transparent); opacity: 0; transform: scale(0.45); }
#better .gnd .bt-vig { position: absolute; inset: 0; background: radial-gradient(118% 96% at 50% 56%, transparent 50%, rgb(2 6 5 / 0.74) 100%); }
/* the dark's foot meets #faq's dark top as the two scroll past each other: the dark's own top edge, mirrored, comes
   in over the lowest 30% (the bottom glow fades out above the edge), so the two grounds meet in one tone, no line */
#better .g-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 52%, rgb(8 132 85 / 0.13) 0%, rgb(1 58 33 / 0.2) 26%, rgb(1 19 13 / 0.38) 48%, transparent 70%), var(--carbon);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 30%);
  mask-image: linear-gradient(to top, #000, transparent 30%);
}

/* the eyes and the table */
#better .art { position: absolute; inset: 0; overflow: hidden; }
#better .cam { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 42%; }
#better .bt-desk { position: absolute; inset: 0; transform-style: preserve-3d; }
#better .bt-desk > .sheet { position: absolute; left: 50%; top: 50%; width: max-content; opacity: 0; transform-origin: 50% 50%; transform: translate(-50%, -50%); }
#better .stage.is-near .bt-desk > .sheet, #better .stage.is-near .bt-trail { will-change: transform, opacity; }
#better .bt-desk > .sheet > .doc { background: #fff; color: #1d2126; }

/* the shared document: a heads of terms, a legal page in a serif under three letterheads */
#better .bt-doc { --dp: 56px; position: relative; box-sizing: border-box; width: clamp(820px, 70vw, 1120px); padding: 0 var(--dp) 150px; font-family: var(--f-app, var(--f-sheet)); }
#better .bt-heads { display: grid; grid-template-columns: 1fr 1.25fr 1fr; height: 96px; margin: 0 calc(-1 * var(--dp)); perspective: 900px; }
#better .bt-lh { display: flex; align-items: center; justify-content: center; border-top: 12px solid var(--c); border-bottom: 1px solid #e3e5e8; background: #fff; }
#better .bt-lh--l { transform-origin: 100% 50%; opacity: 0; }
#better .bt-lh--r { transform-origin: 0 50%; opacity: 0; }
#better .bt-lh--c { border-left: 1px solid #eceef0; border-right: 1px solid #eceef0; }
#better .bt-logo { display: block; width: 92px; height: 26px; border-radius: 4px; background: #d3d7dc; }
#better .bt-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0 0; }
#better .bt-draft { font: 700 15px/1 var(--f-app, var(--f-sheet)); letter-spacing: 0.16em; text-transform: uppercase; color: #9c3329; border: 2px solid currentColor; border-radius: 3px; padding: 7px 12px 6px; }
#better .bt-dt { font: 500 16px/1 var(--f-app, var(--f-sheet)); color: #59606a; }
#better .bt-stc { font: 600 15px/1 var(--f-app, var(--f-sheet)); letter-spacing: 0.08em; text-transform: uppercase; color: #59606a; }
#better .bt-h { margin: 24px 0 18px; font: 400 46px/1.08 Georgia, "Times New Roman", serif; color: #15191e; letter-spacing: -0.01em; }
#better .bt-pt { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
#better .bt-ptk { flex: none; width: 92px; font: 600 13px/1 var(--f-app, var(--f-sheet)); letter-spacing: 0.1em; text-transform: uppercase; color: #59606a; }
#better .bt-ptf { flex: 1; display: block; height: 30px; border-radius: 3px; background: #e2e5e8; border-left: 5px solid var(--c); }
#better .bt-ptf:first-of-type, #better .bt-ptf:last-of-type { opacity: 0; }
#better .bt-rows { list-style: none; margin: 0; padding: 0; }
#better .bt-colh, #better .bt-row { display: grid; grid-template-columns: 40px 1fr 230px 186px; align-items: center; column-gap: 18px; }
#better .bt-colh { padding: 0 0 10px; border-bottom: 1.5px solid #1d2126; font: 600 13px/1 var(--f-app, var(--f-sheet)); letter-spacing: 0.1em; text-transform: uppercase; color: #59606a; opacity: 0; }
#better .bt-row { min-height: 78px; border-bottom: 1px solid #dfe2e5; opacity: 0; }
#better .bt-n { font: 500 16px/1 var(--f-app, var(--f-sheet)); color: #7d848b; }
#better .bt-q { margin: 0; font: 400 27px/1.15 Georgia, "Times New Roman", serif; color: #15191e; }
#better .bt-a { position: relative; display: block; height: 40px; }
#better .bt-a .fld { position: absolute; inset: 0; width: auto; height: auto; margin: 0; border-radius: 3px; background: #e2e5e8; }
#better .bt-ok { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 600 21px/1 var(--f-app, var(--f-sheet)); font-style: normal; color: #15191e; opacity: 0; }
#better .bt-ini { display: flex; gap: 16px; }
#better .bt-ink { position: relative; display: block; width: 76px; height: 40px; border-bottom: 1.5px solid #9aa1a8; }
#better .bt-ink svg { display: block; width: 100%; height: 100%; overflow: visible; } /* the pen, drawn only as each row is agreed (its pieces and sheen: css/paper.css [data-ink]) */
#better .bt-cur { position: absolute; left: 0; top: 0; z-index: 3; width: 20px; height: 24px; opacity: 0; pointer-events: none; }
#better .bt-cur svg { display: block; width: 100%; height: 100%; fill: var(--c); stroke: #fff; stroke-width: 1.2; }

/* the requirement sheets: each a different letterhead (--c), the same requirement, the same empty answer */
#better .bt-rqd { box-sizing: border-box; width: clamp(560px, 50vw, 780px); height: calc(clamp(560px, 50vw, 780px) * 1.3); padding: 0 48px; }
#better .bt-rqh { display: flex; align-items: center; height: 84px; margin: 0 -48px 30px; padding: 0 48px; border-top: 14px solid var(--c); border-bottom: 1px solid #e3e5e8; }
#better .bt-rqw { opacity: 0; }
#better .bt-rqt { margin: 0 0 12px; font: 600 40px/1.1 var(--f-app, var(--f-sheet)); color: #15191e; }
#better .bt-rqm { margin: 0 0 30px; font: 500 18px/1.2 var(--f-app, var(--f-sheet)); color: #59606a; }
#better .bt-rql { margin: 0 0 12px; font: 600 22px/1 var(--f-app, var(--f-sheet)); letter-spacing: 0.04em; color: #59606a; }
#better .bt-rqf { display: block; width: auto; height: 160px; margin: 0; border-radius: 3px; background: #e2e5e8; }

/* the blank new document: its title set, then set over */
#better .bt-ndd { box-sizing: border-box; width: clamp(520px, 46vw, 720px); height: calc(clamp(520px, 46vw, 720px) * 1.25); padding: 60px 52px; }
#better .bt-ndh { display: flex; gap: 0.28em; margin: 0; font: 600 58px/1.1 var(--f-app, var(--f-sheet)); color: #15191e; opacity: 0; }
#better .bt-nds { position: relative; display: inline-block; min-width: 4.8em; }
#better .bt-ns, #better .bt-nb { display: inline-block; opacity: 0; }
#better .bt-nb { position: absolute; left: 0; top: 0; }
#better .bt-ndr { display: block; height: 2px; margin-top: 20px; background: #15191e; }
/* the sheet's own print: a one-page brief's headings, each over ruled lines still to fill */
#better .bt-ndb { display: grid; gap: clamp(14px, 1.8vw, 26px); margin-top: clamp(18px, 2.4vw, 34px); }
#better .bt-ndb p { margin: 0; }
#better .bt-ndb b { display: block; font: 600 13px/1 var(--f-sheet); letter-spacing: 0.14em; text-transform: uppercase; color: #5f6368; }
#better .bt-ndb i { display: block; height: 1px; margin-top: clamp(14px, 1.8vw, 26px); background: #d5d9de; }

/* the generated deck: glossy, face up, then face down (the faces switch by opacity at the half turn) */
#better .bt-face { position: relative; }
#better .bt-fa, #better .bt-fb { box-sizing: border-box; width: clamp(600px, 58vw, 900px); aspect-ratio: 16 / 9; border-radius: 0; }
#better .bt-fa { --f-app: var(--f-sys); position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 8%; overflow: hidden; color: #fff; background: linear-gradient(140deg, #0e1a30 0%, #1b355c 52%, #2c5a8c 100%); }
#better .bt-fa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / 0.24) 0%, rgb(255 255 255 / 0.06) 33%, transparent 34%); }
#better .bt-desk > .sheet > .bt-face > .bt-fa { background: linear-gradient(140deg, #0e1a30 0%, #1b355c 52%, #2c5a8c 100%); color: #fff; }
#better .bt-dkk { margin: 0 0 16px; font: 600 15px/1 var(--f-app, var(--f-sheet)); letter-spacing: 0.22em; text-transform: uppercase; color: #c9d4e6; opacity: 0; }
#better .bt-dkh { margin: 0; font: 700 clamp(48px, 5.6vw, 88px)/1 var(--f-app, var(--f-sheet)); letter-spacing: -0.02em; color: #fff; opacity: 0; }
#better .bt-dkb { display: block; width: 96px; height: 6px; margin-top: 28px; border-radius: 3px; background: #e2a541; }
#better .bt-fb { position: absolute; left: 0; top: 0; transform: rotateY(180deg); background: linear-gradient(115deg, #fbfbfc 0%, #f1f3f5 40%, #e8ebee 100%); opacity: 0; }
/* turned as a deck (J.thick .thk-mid): the cover a half thickness forward, its plain white back a half thickness behind */
#better .bt-face.thk-mid > .bt-fa { transform: translateZ(calc(var(--th) / 2)); }
#better .bt-face.thk-mid > .bt-fb { transform: rotateY(180deg) translateZ(calc(var(--th) / 2)); }

/* S11: blank cover sheets from people in the middle (a grey band, a grey logo box, nothing else) */
#better .bt-cvd { box-sizing: border-box; width: clamp(760px, 64vw, 1040px); height: clamp(720px, 60vw, 960px); }
#better .bt-cvh { display: flex; align-items: center; height: 84px; padding: 0 48px; border-top: 14px solid var(--c); border-bottom: 1px solid #e3e5e8; }

/* S9: the table plane. Its papers lie at --x/--y (desktop) or --px/--py (phone) from the shared document's centre,
   each a real document in its own look (doc-*.css), unlit but the agreement's one line */
#better .bt-trail { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; opacity: 0; visibility: hidden; transform-origin: 50% 50%; }
#better .bt-top { position: absolute; left: 50%; top: 50%; width: 3500px; height: 2700px; margin: -1300px 0 0 -1730px; border-radius: 36px; background: #111715; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.035); }
#better .bt-p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); }
#better .bt-p > .doc { position: relative; margin: 0; box-shadow: 0 2px 3px rgb(0 0 0 / 0.5), 0 10px 26px rgb(0 0 0 / 0.38); }
#better .bt-p .email, #better .bt-p .press, #better .bt-p .po, #better .bt-p .terms { --w: 440px; }
#better .bt-p .hot { --w: 680px; }
#better .bt-p .capst { --w: 420px; }
#better .bt-p .cal { --w: 560px; }
#better .bt-p .deck { --w: 520px; width: 520px; }
#better .bt-p .platform { --w: 340px; width: 340px; }
#better .bt-p .proposal { --w: 400px; width: 400px; }
#better .bt-p .dk-back { width: 440px; height: 248px; border-radius: 0; }
#better .bt-pile { position: absolute; inset: 0; border-radius: 0; background: #f1f2f4; box-shadow: 0 2px 4px rgb(0 0 0 / 0.45); transform: translate(12px, 10px) rotate(3deg); }
#better .bt-pile--2 { background: #e8eaed; transform: translate(-10px, 18px) rotate(-3.5deg); }
#better .bt-lead { --f-app: var(--f-sys); display: flex; align-items: center; gap: 14px; box-sizing: border-box; width: 270px; padding: 16px 18px; border-radius: 6px; background: #fff; font: 600 18px/1.2 var(--f-app, var(--f-sheet)); color: #1d2126; }
#better .bt-lead span { margin-left: auto; padding: 5px 9px; border-radius: 3px; background: #fde7e4; color: #b3261e; font: 600 13px/1 var(--f-app, var(--f-sheet)); }

/* Hypha's voice, placed beat by beat on the table (no column); every line on its quiet room-coloured surface */
#better .caps { position: absolute; inset: 0; z-index: 4; display: block; pointer-events: none; }
#better .cap { position: absolute; margin: 0; pointer-events: none; }
#better .cap p, #better .cap h2 { margin: 0; }
#better .bt-hd { font-size: clamp(34px, 4.5vw, 76px); line-height: 1.02; }
#better .vo-l { font-size: clamp(26px, 2.35vw, 40px); line-height: 1.2; }
#better .vo-m { font-size: clamp(21px, 1.75vw, 30px); line-height: 1.28; }
#better .vo-xl { font-size: clamp(34px, 3.9vw, 64px); line-height: 1.06; letter-spacing: -0.012em; }
#better .cap[data-k="right"] .vo-xl { font-size: clamp(26px, 2.9vw, 48px); }
#better .cap[data-k="title"] { left: 6vw; right: 6vw; top: calc(8 * var(--sv)); text-align: center; }
#better .cap[data-k="s1"] { right: 5vw; top: calc(26 * var(--sv)); width: 25vw; }
#better .cap[data-k="s2"] { left: 12vw; right: 12vw; top: calc(11 * var(--sv)); text-align: center; }
#better .cap[data-k="s3"] { left: 5vw; top: calc(14 * var(--sv)); width: min(26vw, 460px); }
#better .cap[data-k="same"] { left: 5vw; right: 5vw; top: calc(5 * var(--sv)); }
#better .cap[data-k="svc"] { left: 5vw; top: calc(16 * var(--sv)); width: 28vw; }
#better .cap[data-k="biz"] { left: 5vw; top: calc(36 * var(--sv)); width: 28vw; }
#better .cap[data-k="ai"] { left: 5vw; right: 5vw; top: calc(67 * var(--sv)); }
#better .cap[data-k="need"] { left: 4vw; top: calc(16 * var(--sv)); width: 24vw; }
#better .cap[data-k="map"] { left: 4vw; top: calc(58 * var(--sv)); width: 24vw; }
#better .cap[data-k="use"] { left: 10vw; right: 10vw; top: calc(7 * var(--sv)); text-align: center; }
#better .cap[data-k="right"] { left: 7vw; right: 7vw; top: calc(4.5 * var(--sv)); text-align: center; }
#better .cap[data-k="again"] { left: 8vw; right: 8vw; top: calc(3 * var(--sv)); text-align: center; }
@media (min-width: 900px) { #better .cap[data-k="again"] .vo-m { font-size: clamp(26px, 2.35vw, 40px); line-height: 1.2; } } /* at the size of the other voice lines */
#better .cap[data-k="rights"] { left: 4vw; top: calc(24 * var(--sv)); width: 25vw; }
#better .cap[data-k="mid"] { left: 5vw; top: calc(16 * var(--sv)); width: 27vw; }
#better .cap[data-k="pretend"] { left: 5vw; top: calc(50 * var(--sv)); width: 28vw; }

@media (max-width: 899px) {
  #better .gnd .bt-pool { top: 60%; width: 150vw; height: calc(66 * var(--sv)); margin: calc(-33 * var(--sv)) 0 0 -75vw; }
  #better .bt-doc { --dp: 36px; width: calc(100vw + 40px); padding-bottom: 110px; }
  #better .bt-heads { height: 62px; }
  #better .bt-lh { border-top-width: 9px; }
  #better .bt-logo { width: 54px; height: 18px; }
  #better .bt-meta { flex-wrap: wrap; gap: 10px 12px; padding-top: 14px; }
  #better .bt-draft { font-size: 13px; padding: 6px 9px 5px; }
  #better .bt-dt { order: 3; flex-basis: 100%; font-size: 15px; }
  #better .bt-stc { font-size: 13px; letter-spacing: 0.06em; }
  #better .bt-h { margin: 14px 0 12px; font-size: 32px; }
  #better .bt-pt { gap: 8px; margin-bottom: 16px; }
  #better .bt-ptk { width: auto; font-size: 12px; }
  #better .bt-ptf { height: 24px; }
  #better .bt-colh { display: none; }
  #better .bt-row { grid-template-columns: 18px 1fr 116px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 7px; min-height: 0; padding: 12px 0; }
  #better .bt-row .bt-n { grid-column: 1; grid-row: 1 / 3; align-self: center; font-size: 13px; }
  #better .bt-row .bt-q { grid-column: 2; grid-row: 1 / 3; font-size: 21px; }
  #better .bt-row .bt-a { grid-column: 3; grid-row: 1; height: 28px; }
  #better .bt-row .bt-ini { grid-column: 3; grid-row: 2; gap: 8px; }
  #better .bt-ink { width: 54px; height: 28px; }
  #better .bt-ok { font-size: 17px; }
  #better .bt-rqd { width: calc(100vw + 40px); height: calc((100vw + 40px) * 1.3); padding: 0 36px; }
  #better .bt-rqh { height: 58px; margin: 0 -36px 20px; padding: 0 36px; border-top-width: 10px; }
  #better .bt-rqt { font-size: 30px; margin-bottom: 8px; }
  #better .bt-rqm { font-size: 15px; margin-bottom: 18px; }
  #better .bt-rql { font-size: 20px; }
  #better .bt-rqf { height: 110px; }
  #better .bt-ndd { width: calc(100vw - 24px); height: calc((100vw - 24px) * 1.2); padding: 36px 28px; }
  #better .bt-ndh { font-size: 36px; }
  #better .bt-fa, #better .bt-fb { width: calc(100vw - 20px); }
  #better .bt-dkk { font-size: 13px; margin-bottom: 10px; }
  #better .bt-dkh { font-size: 44px; }
  #better .bt-dkb { width: 64px; height: 5px; margin-top: 16px; }
  #better .bt-cvd { width: calc(100vw + 12px); height: 660px; }
  #better .bt-cvh { height: 58px; padding: 0 30px; border-top-width: 10px; }
  #better .bt-top { width: 1150px; height: 2500px; margin: -1150px 0 0 -575px; border-radius: 24px; }
  #better .bt-p { transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) rotate(var(--r)); }
  #better .bt-p--d { display: none; }
  #better .bt-p .email, #better .bt-p .po, #better .bt-p .terms { --w: 290px; }
  #better .bt-p .press { --w: 330px; }
  #better .bt-p .pr-band { gap: 10px; letter-spacing: 0.05em; }
  #better .bt-p .hot { --w: 440px; }
  #better .bt-p .capst { --w: 300px; }
  #better .vo-l { font-size: 22px; }
  #better .vo-m { font-size: 19px; }
  #better .vo-xl { font-size: 27px; }
  #better .cap[data-k="right"] .vo-xl { font-size: 23px; }
  #better .cap { left: 16px !important; right: 16px !important; width: auto !important; text-align: left !important; }
  #better .cap[data-k="title"] { top: calc(6 * var(--sv)); }
  #better .cap[data-k="s1"] { top: calc(16 * var(--sv)); }
  #better .cap[data-k="s2"] { top: calc(8 * var(--sv)); }
  #better .cap[data-k="s3"] { top: calc(9 * var(--sv)); }
  #better .cap[data-k="same"] { top: calc(5 * var(--sv)); }
  #better .cap[data-k="svc"] { top: calc(5 * var(--sv)); }
  #better .cap[data-k="biz"] { top: calc(15 * var(--sv)); }
  #better .cap[data-k="ai"] { top: calc(64 * var(--sv)); }
  #better .cap[data-k="need"] { top: calc(3.5 * var(--sv)); }
  #better .cap[data-k="map"] { top: calc(3.5 * var(--sv)); }
  #better .cap[data-k="use"] { top: calc(7 * var(--sv)); }
  #better .cap[data-k="right"] { top: calc(3.5 * var(--sv)); }
  #better .cap[data-k="again"] { top: calc(3 * var(--sv)); }
  #better .cap[data-k="rights"] { top: calc(4 * var(--sv)); }
  #better .cap[data-k="mid"] { top: calc(6 * var(--sv)); }
  #better .cap[data-k="pretend"] { top: calc(6 * var(--sv)); }
}

/* the short phone (390x664): the terms' rows and head tighter, so the open row stays in view under the bold line */
@media (max-width: 899px) and (max-height: 740px) {
  #better .bt-row { padding: 5px 0; row-gap: 3px; }
  #better .bt-row .bt-a { height: 22px; }
  #better .bt-ink { height: 22px; }
  #better .bt-row .bt-q { font-size: 19px; }
  #better .bt-ok { font-size: 15px; }
  #better .bt-h { margin: 10px 0 8px; font-size: 28px; }
  #better .bt-pt { margin-bottom: 10px; }
}
/* printed sheets have square corners (the covers took 10px from the generic sheet) */
#better .doc:is(.bt-cvd, .bt-rqd, .bt-ndd, .bt-doc) { border-radius: 0; }