/* Build 3, the etched placements. Loads after build3.css.

   Tests the three placements for the etched figure that don't put a headline
   over a bust, which is the one form that would cost trust:

     1. Nine plates in the measurement grid, one etched detail per measurement.
     2. A figure behind the closing line, large and low.
     3. Small fragments beside every section label.

   The hero deliberately keeps build 3's quiet dither field, because the whole
   point is testing the figure everywhere EXCEPT the hero. */

.hero, .close { overflow: hidden; }

.field { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.6s ease .2s; }

/* ---- the fold headline, on its own size ----
   52 to 62 on desktop and 39 to 42 on a phone, Sabby's numbers, 2026-09-17.

   Scoped to the hero rather than changed at --head-size, which is the variable
   h1, h2 and .head all read. Moving that would have taken every section
   heading on every page up with it, and the apply and story headlines too.
   This is the one line he asked to look at.

   Worth knowing before this becomes permanent: Koe's page has exactly one
   heading size, and copying that is why the rest of this site does. The fold
   now sits a size above its sections, which is a real departure and a
   defensible one, since the fold is the only heading nobody scrolls to. */
.hero h1 { font-size: 62px; }

/* 42, not 44. 44 held two lines down to 390px and broke to three at 375, which
   is an iPhone SE and a 13 mini. 42 is the largest that keeps "Get your health"
   on one line at 375, so the headline reads the same shape on every phone
   anyone is actually holding. Desktop stays at 62. */
@media (max-width: 767px) {
  .hero h1 { font-size: 42px; }
}


/* ---- the wordmark, top left ----
   Absolute rather than in the flow, so the hero keeps its full-screen height
   and the dither field runs behind the mark instead of stopping under it.

   The width and the 34px match .pagenav in pages.css exactly. That is the
   point: three pages, one mark, one position. If one of them moves, move the
   other two. */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  padding: 34px 0;
}
.topbar .wrap { max-width: min(1180px, 92vw); }
.topbar .mark { display: block; width: max-content; }
.topbar .mark img { display: block; width: 112px; height: auto; }

@media (max-width: 640px) {
  .topbar { padding: 24px 0; }
  .topbar .mark img { width: 94px; }
}

/* ---- accent on the two small marks ----
   Sabby, 2026-09-17. The arrow and the separators are punctuation, so giving
   them the accent colours the movement and the rhythm of a line without
   colouring any of its words. The link's own hover still takes the whole thing
   to the accent, which is why the arrow inherits rather than sitting at a
   fixed colour. */
.textlink .arrow { color: var(--accent); transition: color .18s ease; }
.textlink:hover .arrow { color: inherit; }
.creds .sep { color: var(--accent); }


/* ---- the hero qualifier, under the button ----
   style.css sets .hero-count at 16px with 40px above it, which was right when
   it sat between the subhead and the button and had to hold that gap open.
   Under the button it is small print, so it comes down to 13px and tightens
   its tracking to match. Scoped to this page rather than changed in style.css,
   because the scratch builds still have it in the old position where the old
   size is correct.

   Grey, never the accent. The headline is the only colour above the fold and
   that stays true: a second accent down here would pull the eye off the
   button it is meant to qualify. */
.hero .hero-count {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.2px;
  margin: 22px 0 0;
}

/* On a phone it is given a measure so it breaks between its two sentences
   rather than running edge to edge. A single line of tracked caps spanning the
   full width of the screen reads as a rule, not as a note, and at 360px it was
   going to wrap in an arbitrary place anyway. */
@media (max-width: 640px) {
  .hero .hero-count {
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 20px;
    max-width: 24ch;
  }
}

.field.on { opacity: 1; }
.field canvas { display: block; width: 100%; height: 100%; }
#hero-field {
  -webkit-mask-image: radial-gradient(ellipse 70% 64% at 50% 48%,
    transparent 0%, transparent 52%, rgba(0,0,0,.4) 78%, #000 100%);
  mask-image: radial-gradient(ellipse 70% 64% at 50% 48%,
    transparent 0%, transparent 52%, rgba(0,0,0,.4) 78%, #000 100%);
}

/* ---------- 1. the nine plates ---------- */

/* Transparent tiles, 2026-09-24, same fix as the pictures. style.css draws
   the grid's hairlines by filling the grid grey and covering it with solid
   black tiles, 1px apart, so every tile was an opaque black card. Here the
   lines are real borders instead, so the tiles can be clear and the page
   shows through. Works at four, two and one across, because all eight cells
   are always filled. */
.grid {
  gap: 0;
  background: none;
  border: none;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.tile {
  background: transparent;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.tile { padding-top: 0; overflow: hidden; transition: background .4s ease; }
/* Mouse only, for the same reason the JS gild is. A phone browser applies
   :hover on tap and then LEAVES IT THERE, because there is no pointer to move
   away, so on a phone these two rules left a tapped tile brightened and scaled
   up for good. Less visible than the orange sticking, same underlying mistake:
   the JS was gated on 2026-09-17 and the CSS beside it was not. */
@media (hover: hover) {
  .tile:hover { background: #070707; }
  .tile:hover .plate { opacity: 1; transform: scale(1.03); }
}
.tile .plate {
  position: relative;
  width: 100%;
  /* Square, because the nine engravings aren't one aspect ratio. The shader
     letterboxes each one inside the square with `contain`, which is what
     keeps a lung and a heart the same visual weight. */
  aspect-ratio: 1 / 1;
  margin: 18px 0 18px;
  opacity: .88;
  transition: opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.tile .plate canvas { display: block; width: 100%; height: 100%; }

/* ---------- 2. the closing figure ---------- */

.close-figure {
  position: absolute;
  left: 50%;
  bottom: -6%;
  /* Wide and shallow. The whole reason this works where a figure didn't is
     that the artwork is horizontal: time on the x axis, under a centred
     headline, instead of a vertical body fighting it. */
  width: min(1240px, 96vw);
  height: 300px;
  margin-left: calc(min(1240px, 96vw) / -2);
  bottom: 54px;
  z-index: 0;
  opacity: 0;
  transition: opacity 2.2s ease;
  /* Solid at the bottom, dissolving as it rises, and pinched at the sides so
     it never ends on a vertical edge. The closing line sits in the clear
     upper third. */
  /* Feathered at the left and right ends only, so the line runs off the page
     instead of stopping on a vertical edge. No vertical fade: the chart is
     meant to be read, not sensed. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.close-figure.on { opacity: .92; }
.close-figure canvas { display: block; width: 100%; height: 100%; }

.close { padding-bottom: 420px; }   /* room for the chart under the button */
.close .wrap { position: relative; z-index: 1; }

/* The fragment markers that used to sit beside every section label are gone.
   Sabby's call: he didn't like them at any size. The labels are back to
   style.css's plain letter-spaced caps with nothing added. */

/* The hero background chooser is gone, and so is .close-switch, which styled a
   second chooser that no markup had referenced for some time. Dither, loud is
   the hero now and it is the only one. Sabby's call, 2026-09-17. */

@media (max-width: 767px) {
  .close { padding-bottom: 300px; }
  .close-figure { height: 210px; bottom: 40px; }
}

/* ---- two-column sections ----------------------------------------------
   Copy one side, an etched image the other. .split-flip puts the art first
   on desktop and nothing else changes, so the two sections mirror each
   other. Both stack to one column on mobile with the art underneath,
   because the copy is the thing that has to be read on a phone. */
.split .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 92px;
  align-items: center;
  /* The site column is --col, about 732px, which is right for a single stack
     of copy and far too narrow for copy AND a picture. Two columns inside it
     left the art 304px wide, small enough to be missed entirely. These two
     sections get their own wider measure; every other section keeps --col. */
  max-width: min(1180px, 92vw);
}
.split-flip .wrap { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
.split-text { min-width: 0; }
.split-art  { min-width: 0; position: relative; }

.statue-turn,
.panel-turn { perspective: 1200px; }
.statue-field,
.panel-field {
  width: 100%;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.statue-field { height: 520px; }
/* Same height as the sculpture, so the two sections mirror each other
   instead of one picture looking smaller than the other. */
.panel-field  { height: 520px; }
.statue-field.on { opacity: .92; }
.panel-field.on  { opacity: .88; }
.statue-field canvas,
.panel-field canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 860px) {
  .split .wrap,
  .split-flip .wrap { grid-template-columns: 1fr; gap: 64px; }
  /* 64px, up from 28, 2026-09-25. Sabby found the box above each picture
     crowding the bust and the dashboard on a phone, since the pull box is
     the last thing in the copy and sits straight on top of the art. */
  /* Art after the copy on a phone, whichever order it sits in on desktop. */
  .split-art { order: 2; }
  .split-text { order: 1; }
  .statue-field { height: 320px; }
  .panel-field  { height: 320px; }
}

/* The closing chart is gone, so the room that was reserved under the button
   goes with it. */
.close { padding-bottom: 120px; }
@media (max-width: 860px) { .close { padding-bottom: 96px; } }

/* ---- gold under the cursor -------------------------------------------
   The warm patch that follows the pointer (or, on a phone, the scroll) across
   the sculpture, the dashboard and the heartbeat. It is drawn inside the
   shader since 2026-09-24, see GILD_SHADER in build3-etched.js.

   It used to be a CSS overlay here, set to multiply, and multiply needs an
   opaque ground under it or it paints its own colour. So every picture carried
   a solid black box, and those boxes were visible against the page's grain
   and cursor light: that was the black background people saw. The pictures
   are transparent now and there is nothing left for this file to do beyond
   giving the patch a positioned box to measure against. */
.split-art,
.close-art { position: relative; }

/* ---- the closing heartbeat ----
   Under the button, not behind the words, and quiet: 0.3 is Sabby's number,
   picked off the slider in the preview. */
.close-art {
  position: relative;      /* so the gild overlay has something to sit in */
  margin: 54px 0 0;
  height: 170px;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.close-art.on { opacity: 1; }
.close-art canvas { display: block; width: 100%; height: 100%; }
/* Taller on a phone, and it works because the drawing changes too: under 640px
   the script loads the squeezed file, so the trace fills this box instead of
   hanging as a hairline in the middle of it. Raising the height on its own did
   nothing at all, which is worth remembering before anyone tries it again. */
@media (max-width: 860px) {
  .close-art { margin-top: 36px; height: 150px; }
}

/* ---- eight tiles, four across ----
   Nine in a 3x3 became eight, so four across and two down.

   And the section gets the WIDE measure, same as the two split sections. This
   was the point of dropping a tile and it's what the first pass got backwards:
   the grid stayed locked to the narrow --col column, so four tiles in the space
   of three just made every picture smaller. Widening the container is what
   makes the plates bigger. */
#what-we-set-up .wrap { max-width: min(1180px, 92vw); }
#what-we-look-at .grid,
#what-we-set-up .grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
  #what-we-look-at .grid,
  #what-we-set-up .grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---- the grid goes horizontal on a phone ----
   Sabby, 2026-09-17, after scrolling it on a real handset: eight square tiles
   stacked one per row is eight full screens of scrolling to read eight labels.
   Ruh's site lays its panels out as short rows and it reads far better.

   So under 560px the tile turns from a column into a row: small square plate
   on the left, number and label stacked on the right. Same markup, same eight
   canvases, no second set of assets. The plate goes from 100% of the tile
   width to a fixed 84px, which cuts the section's height by roughly two
   thirds.

   Worth knowing: the shader mount follows the element, so shrinking the plate
   in CSS re-renders it at the new size rather than scaling a bitmap down. The
   dither stays crisp. */
@media (max-width: 560px) {
  #what-we-look-at .grid,
  #what-we-set-up .grid { grid-template-columns: 1fr; }

  .tile {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: 20px;
    align-items: center;
    padding: 16px 18px;
    text-align: left;
  }
  /* The plate spans both text rows so the number and label centre against it. */
  .tile .plate {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 84px;
    height: 84px;
    margin: 0;
  }
  .tile em { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 7px; }
  .tile span { grid-column: 2; grid-row: 2; align-self: start; }
}

/* ---- footer ----
   A little air between the joke and the compliance line, and the company on
   the bottom. */
/* Three lines, two paragraphs. The joke is its own thought, so it gets real
   space under it. The disclaimer and the company are one block, so they sit
   tight together. */
footer .fineprint { margin-top: 42px; }
footer .colophon {
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(232, 232, 232, .38);
}


/* ---- the accent hairline above the footer -----------------------------
   Sabby, 2026-09-17: the gold rule on the Apply page is the one motif he
   picked out unprompted, so it comes to the lander to separate the footer from
   the page. Same gradient and the same 0.5 opacity as pages.css .rule-gold, so
   the three pages carry one motif rather than three near-misses.

   It draws itself across on scroll instead of appearing, which is the same
   pseudo-element trick build3.css already uses on `section + section`: the
   border in style.css can't be animated, so it's made transparent and a
   scalable line is drawn in its place. Starting state hangs off .js, so if the
   script never runs the plain border is simply still there.

   'footer' had to be added to the observer list in build3.js. Note it sits in
   the last twelfth of the page, which is the exact dead strip that swallowed
   the compliance line, so it depends on the safety net that reveals whatever
   is left once the reader reaches the bottom. It is decorative, so that is an
   acceptable thing to depend on. The disclaimer underneath it still is not
   animated at all. */
.js footer { position: relative; border-top-color: transparent; }
.js footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%, var(--accent) 14%, var(--accent) 86%, transparent 100%);
  opacity: .5;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.15s cubic-bezier(.16, 1, .3, 1);
}
.js footer.is-in::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .js footer::before { transform: scaleX(1) !important; transition: none !important; }
}


/* ---- what we hear ----------------------------------------------------
   Type only, no art. The dots are the one piece of decoration and they are the
   accent, on Sabby's brief: no numbers, dots only, subtle.

   TWO COLUMNS BY HAND, and that is a deliberate reversal. This used to be one
   list on column-count, which rebalanced itself whenever a line was added and
   needed no maintenance. Good CSS, wrong idea. The left column is the man of
   40 in pain and the right is the man of 25 who feels fine, so the split
   carries meaning and must not be allowed to drift by one item.

   The section also runs wider than the 780px --col, because the quotes are
   real sentences rather than the old three-word fragments and two narrow
   columns would wrap most of them three times.

   No list markers: there is not a single bullet anywhere else on this site and
   the browser default would cheapen it, so the dot is drawn as a pseudo-element
   sized and coloured to match the page. */
#what-we-hear .wrap { max-width: min(980px, 92vw); }

#what-we-hear .sub {
  margin: -8px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--fg-dim);
}

.reason-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  margin-top: 40px;
}

/* Its own dim, not --label-dim. These sit under a section label that is already
   doing the small-caps job, so matching it exactly would give the section two
   headings of equal weight and no hierarchy at all. */
.col-head {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.reasons {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reasons li {
  position: relative;
  padding-left: 22px;
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--fg);
}

.reasons li::before {
  content: '';
  position: absolute;
  left: 0;
  /* .62em rather than a pixel value, so the dot stays on the first line's
     optical centre if the type size ever changes. */
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* One column on a phone, and the two headings become the thing that keeps the
   two audiences apart once they are stacked. Gap grows, because a 38px break
   between groups has to read as bigger than the 15px between lines inside one. */
@media (max-width: 860px) {
  .reason-cols { grid-template-columns: 1fr; gap: 38px; margin-top: 32px; }
}

@media (max-width: 640px) {
  .reasons li { margin-bottom: 15px; }
  #what-we-hear .sub { font-size: 16px; }
}



/* ---- what we do, broken up ---------------------------------------------
   2026-09-24. The section was four long paragraphs and people said it was too
   much to read, worst on a phone. The copy is cut into short lines and the
   four jobs are a list, drawn with the same accent dot as What we hear so the
   page has one list style.

   The lead-in sits tight on the list it introduces, so "We do." reads as the
   start of the list rather than a paragraph standing on its own. */
#what-we-do .lead-in { margin-bottom: 14px; }

/* Hairline rows since the second pass, same day: Sabby asked for lines to
   separate things, and a rule under each job turns four sentences into
   something that reads like a checklist, the way the /software points do. */
.dolist {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.dolist li {
  position: relative;
  padding: 12px 0 12px 22px;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  font-size: 18px;
  line-height: 1.4;
  color: var(--fg);
}
.dolist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(12px + .6em);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- about, four short paragraphs ----
   Same reason, same date. One beat per paragraph, with a touch less air
   between them than the site's 22px so the four still read as one voice
   rather than four separate statements. */
.about-text p { margin-bottom: 16px; }
.about-text p:last-child { margin-bottom: 0; }
.about-text .textlink { display: inline-block; margin-top: 12px; }


/* ---- the pull box -----------------------------------------------------
   Sabby, 2026-09-24: someone scrolling won't read a white paragraph, so each
   section lifts one line out and boxes it under its picture. His example was
   "the answer is in your numbers" under the dashboard.

   The look is copied from point 01 on /software, which is the item he picked
   out as working: 3px accent bar on the left, a 5% accent wash, and a faint
   accent hairline shutting the other three sides. Same numbers as
   software.css .steps li.is-lead, so the two pages carry one device. */
.pull {
  margin: 26px 0 0;
  padding: 18px 22px;
  background: rgba(var(--accent-rgb), .05);
  box-shadow: inset 3px 0 0 var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-left: none;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--head);
}
/* Under the TEXT, not the picture, since the same evening: Sabby found the
   box under the art tacky, and on a phone it cut into the picture. The About
   box under the portrait came off entirely for the same reason. */

/* ---- early vs late, Why section ----
   Two rows with a rule between, each led by a small tag, so the contrast is
   the thing the eye catches. Early carries the accent, late stays grey: the
   colour sits on the side we're selling. */
.versus {
  margin: 4px 0 0;
  border-top: 1px solid var(--rule);
}
.versus p {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.vs-tag {
  /* Never wraps, and both tags take the same width so the two sentences
     start on one line. 9.2em fits START EARLY at either tag size. */
  flex: 0 0 auto;
  min-width: 9.2em;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.vs-tag.vs-good { color: var(--accent); }

/* ---- about: the closing line ---- */
.about-close { font-weight: 600; color: var(--head); }

@media (max-width: 860px) {
  .pull { font-size: 18px; padding: 16px 18px; margin-top: 24px; }
}
@media (max-width: 420px) {
  .vs-tag { font-size: 11px; letter-spacing: 1.4px; }
  .versus p { gap: 12px; }
}


/* ---- what we hear, two boxes ----
   Sabby, 2026-09-24 evening, third pass. Ten quotes in one run read as a
   wall on a phone, even with hairlines between them. He wanted all ten kept,
   no tabs (people don't tap them) and no swipe cards, and asked for the two
   groups to be two separate boxes, one under the other.

   So each column is a box: a faint lift off the black, a hairline edge, the
   group's heading inside it with a rule under it. The box does the
   separating, so the hairlines between quotes came out; inside a box they
   were one line too many. Side by side on desktop, stacked on a phone with
   a clear gap, so the eye takes in two blocks of five rather than ten. */
.reason-col {
  background: rgba(232, 232, 232, .035);
  border: 1px solid rgba(232, 232, 232, .12);
  padding: 26px 26px 10px;
}
.reason-cols { gap: 24px; }
.col-head {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(232, 232, 232, .12);
  color: var(--accent);
  font-weight: 600;
}
.reasons li { margin: 0 0 16px; }

@media (max-width: 860px) {
  .reason-cols { gap: 20px; margin-top: 32px; }
}
@media (max-width: 640px) {
  .reason-col { padding: 22px 20px 8px; }
  .reasons li { margin-bottom: 14px; font-size: 16px; }
}