/* ============================================================
   PAGE TWO, OPTION C: THE DIRECTORY.

   The picked page-two design. Same content, same
   running order, same renderer as the scroller and the deck: the only
   thing that differs is how it is laid out and how you move through it.

   Two ideas, and everything here serves one or the other:

     1. THE RUNNING ORDER IS ALWAYS VISIBLE. A slim index is fixed down
        the left naming every section, and it marks the one you are
        in as you go. You always know how much is left.

     2. EVERYTHING READS DOWN ONE CENTRE AXIS. Nothing splits into a
        left and a right column. Every heading, every lead and every
        short label hangs off the middle of the reading area, so the
        page reads as one document rather than a stack of arrangements.

   The two exceptions to centring are deliberate, and both are cases
   where centring would destroy the thing: the key numbers term sheet
   (a ledger, label left and figure right) and the question deck (a
   question and its control). Both are capped and centred as BLOCKS and
   keep their own internal alignment.

   Grown out of concept 02, The Dossier (c2.css), which had the fixed
   index but ran its reading column left aligned.

   Loaded after base.css. Does NOT load picked.css: this concept owns
   its own hero plate and its own components.
   ============================================================ */

body.rl{
  --measure:900px;
  --pad:clamp(78px,10.5vh,132px);
  /* wide enough that the longest label, Where you could build, stays on
     one line. A wrapped item breaks the even rhythm of the index, which
     is the one thing the index has to get right. */
  --rail:236px;
  --gut:clamp(22px,4vw,56px);
}

/* ---------- the fixed index ---------- */
.rl .lp-rail{ display:block; position:fixed; z-index:60; left:0; top:0;
  width:var(--rail); height:100svh; overflow-y:auto;
  padding:96px clamp(18px,1.6vw,26px) 40px; }
/* a hairline, not a panel: the index should read as a margin note beside
   the page, not as a second column competing with it */
.rl .lp-rail::after{ content:''; position:absolute; top:0; right:0; bottom:0;
  width:1px; background:var(--line2); }
.rl .lp-rail a{ padding:9px 0; font-size:9.5px; letter-spacing:.12em;
  align-items:baseline; gap:11px; }
.rl .lp-rail .rt{ text-wrap:nowrap; }
.rl .lp-rail .rn{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:11px;
  color:var(--warm); opacity:.7; min-width:20px;
  transition:color .18s, opacity .18s; }
/* the active section is marked with colour alone. No bar, no dot, no
   rule down one edge: this is a nav, and the moment it grows an accent
   edge it stops looking like part of the page. */
.rl .lp-rail a.on .rn{ color:var(--beige); opacity:1; }
.rl .lp-rail .rail-top{ margin-bottom:12px; padding-bottom:18px;
  border-bottom:1px solid var(--line2); }

/* clicking an index entry jumps to that section, and the running header
   is fixed over the top of the page, so the landing point has to clear it
   or the kicker ends up underneath the wordmark */
.rl .lp-vert .s{ scroll-margin-top:clamp(58px,7vh,76px); }

.rl .lp-vert{ margin-left:var(--rail); }
/* The footer rule runs the FULL width, under the index as well as the
   reading column, so the page closes on one line rather than a line that
   starts partway across. The wordmark moves left with it and lines up
   with the index above it instead of with the reading column.

   The footer lives INSIDE the reading column, which is already pushed
   right by the rail, so margin alone cannot reach the edge: it has to be
   pulled back by the rail width and given that width back. */
.rl .lp-foot{ margin-left:calc(var(--rail) * -1);
  width:calc(100% + var(--rail));
  padding-left:clamp(18px,1.6vw,26px); }
.rl .lp-hdr{ padding-left:calc(var(--rail) + clamp(18px,2vw,30px)); }
.rl .lp-progress{ left:var(--rail); }

/* ---------- the centre axis ----------
   One rule, applied once, rather than section by section: the reading
   area centres in what is left beside the index, and everything in it
   hangs off that axis. */
.rl .s{ text-align:center; }
.rl .s .inr{ margin-inline:auto; }
.rl .head{ display:flex; flex-direction:column; align-items:center; }
.rl .kick{ justify-content:center; margin-bottom:20px;
  font-size:10.5px; letter-spacing:.3em; }
.rl .kick .ch{ font-family:var(--disp); font-weight:700; letter-spacing:0; font-size:12px;
  color:var(--beige); font-weight:700; }
.rl h2.hl{ font-size:clamp(28px,3.6vw,50px); line-height:1.02;
  max-width:19ch; margin-inline:auto; }
.rl .p{ margin:20px auto 0; font-size:clamp(14.5px,1.3vw,17px);
  line-height:1.65; max-width:58ch; text-align:center; }

/* ---------- HERO. The nameplate, centred on the shopfront ---------- */
.rl .s-hero{ min-height:92svh; justify-content:flex-end;
  padding-bottom:clamp(84px,12.5vh,146px); }
.rl .s-hero .scrimbg{ background:
  linear-gradient(180deg, rgba(10,10,10,.52) 0%, rgba(10,10,10,.34) 40%, rgba(10,10,10,.95) 100%); }
.rl .s-hero .inr{ display:flex; flex-direction:column; align-items:center;
  max-width:min(100%,1020px); }
.rl .s-hero .eyebrow{ margin-bottom:26px; }
/* same weight of black as the scroller's plate */
.rl .plate{ border:1px solid rgba(255,255,255,.5); background:rgba(10,10,10,.9);
  padding:clamp(24px,3.2vw,38px) clamp(24px,4.2vw,58px);
  max-width:100%; width:auto; }
.rl .plate h1.hl{ font-size:clamp(26px,4.6vw,58px); line-height:1;
  letter-spacing:.02em; margin-bottom:0; }
/* the wordmark stands in for the heading. The IMAGE carries the centring:
   a display:block image ignores the text-align around it and sits left. */
.rl .plate h1.np-mark{ line-height:0; }
.rl .plate h1.np-mark img{ display:block; margin-inline:auto;
  width:clamp(120px,15vw,204px); height:auto; }
.rl .np-figs{ display:flex; flex-wrap:wrap; justify-content:center;
  margin-top:26px; background:none; border:0; gap:0; }
.rl .np-figs .fig{ background:none; padding:0 clamp(10px,1.7vw,24px);
  text-align:center; }
.rl .np-figs .fig + .fig{ border-left:1px solid rgba(255,255,255,.28); }
.rl .np-figs .fv{ font-size:clamp(18px,2.2vw,28px);
  font-variant-numeric:tabular-nums; }
.rl .np-figs .fl{ margin-top:9px; font-size:9.5px; letter-spacing:.16em; }
.rl .rule{ background:rgba(255,255,255,.28); margin:0; }
.rl .figs-plate + .rule{ margin-top:26px; }
.rl .who{ padding:14px 0; flex-direction:column; align-items:center;
  gap:2px; justify-content:center; }
.rl .wn{ font-family:var(--fut); font-size:11.5px;
  font-family:var(--fmono); line-height:1.1; letter-spacing:-.02em; text-transform:uppercase; color:var(--white);
  font-weight:400; line-height:1.6; }
.rl .wr{ font-size:10px; letter-spacing:.2em; color:var(--chalk); opacity:.85; }
.rl .caveat{ margin-top:16px; text-align:center; margin-inline:auto; }
.rl .s-hero .sub{ margin-top:18px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--chalk); font-weight:400;
  line-height:1.9; max-width:min(100%,620px); text-wrap:pretty; }
.rl .s-hero .scroll-cue{ margin-top:16px; }

/* The hero ends on near black, so 01 still does not need a FULL pad on
   top of it, but the cut-down version was too tight: the
   founders were arriving before the hero had finished. */
.rl [data-sec="founders"]{ padding-top:clamp(82px,10.5vh,138px); }

/* ---------- 02 THE FOUNDERS ----------
   No split. The story, then the film, then the three facts under it. */
.rl [data-type="founders"] .duo{ grid-template-columns:1fr;
  gap:clamp(28px,3.4vw,44px); }
/* the film sits ABOVE the three fact boxes: watch first, numbers under */
.rl [data-type="founders"] .duo .col-b{ order:-1; }
.rl [data-type="founders"] .media .video-ph{ margin-top:0; aspect-ratio:16/8.4; }
/* the real film lands in exactly the frame the poster left behind */
.rl [data-type="founders"] .media video{ aspect-ratio:16/8.4; }
.rl .facts{ grid-template-columns:repeat(3,1fr); }
.rl .fact{ display:block; padding:17px 18px; text-align:center; }
.rl .fact .k{ font-size:10px; letter-spacing:.18em; color:var(--grey); }
.rl .fact .v{ display:block; margin-top:8px; font-size:13.5px;
  color:var(--off); text-align:center; }

/* ---------- 03 WHY REVL. The photograph, then the plate over it ---------- */
.rl [data-type="why"] .fr{ position:relative; overflow:hidden;
  border:1px solid var(--line); aspect-ratio:16/6.4; background:var(--black); }
.rl [data-type="why"] .fr img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.8); }
.rl [data-type="why"] .fr .vg{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 24%, rgba(10,10,10,0) 58%, rgba(10,10,10,.7) 100%),
  linear-gradient(90deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,0) 16%, rgba(10,10,10,0) 84%, rgba(10,10,10,.42) 100%); }
.rl .why-plate{ position:relative; z-index:2; width:min(100%,820px);
  margin:-140px auto 0; background:var(--black);
  border:1px solid rgba(255,255,255,.4); padding:clamp(26px,3vw,40px);
  text-align:center; }
.rl .why-plate .head{ display:flex; flex-direction:column; align-items:center; }
.rl .why-plate h2.hl{ max-width:none; }
.rl .why-plate .body{ margin-top:26px; }
.rl [data-type="why"] .rows-2{ grid-template-columns:1fr 1fr; }
.rl [data-type="why"] .pull{ margin-top:28px; }
/* the jump button sits close under the pull line, not floating below it */
.rl [data-type="why"] .why-plate .cta-row{ margin-top:20px; }

/* ---------- 04 THE PARTNERSHIP ----------
   The four teams two by two, the Academy film under them, then what
   building a REVL includes. Nothing beside anything. */
.rl [data-type="support"] .duo{ grid-template-columns:1fr;
  gap:clamp(28px,3.4vw,44px); }
.rl [data-type="support"] .rows{ grid-template-columns:1fr 1fr; }
.rl [data-type="support"] .media .video-ph{ margin-top:0; aspect-ratio:16/7.4; }
/* what building a REVL includes moves INTO the stack, above the film
  , so the section reads teams, then what you get, then the
   film. The shell does that move; the duo gap handles the spacing. */
.rl [data-type="support"] .incl{ margin-top:0; }

/* short labels centre with the rest; only the ledger and the deck do not */
.rl .row{ padding:19px 18px; text-align:center; }
.rl .rh{ font-size:clamp(14px,1.4vw,17px); line-height:1.15; }
.rl .rd{ margin-top:9px; font-size:12.5px; }

/* ---------- 07 KEY NUMBERS ----------
   A ledger. Capped and centred as a block, flush inside. */
.rl .terms{ max-width:720px; margin-inline:auto; width:100%;
  text-align:left; border-top:1px solid var(--line); }
.rl .tv{ font-size:clamp(19px,2.2vw,28px); }
.rl .flagline{ max-width:58ch; margin:16px auto 0; text-align:center; }

/* ---------- 05 WHAT YOU GET. The anchor photograph ----------
   One studio photograph holding the section down, the six numbered
   beside it. The heading carries the title, so there is no sub-label.

   This is the ONE section on this design that gives up the centre axis,
   which is the rule everything else here runs on. It was picked
   knowing that: six bare labels had no weight, and this is what gives
   them some. The heading stays on the axis, so the break is the body
   only and the section still reads as part of the page. ---------- */
.rl [data-type="incl"] .incl{ margin-top:0; }
.rl [data-type="incl"] .body{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.6vw,52px); align-items:center;
  margin-top:clamp(34px,4.2vw,52px); }
/* shorter than it was, same call as the scroller */
.rl .wg-anchor{ position:relative; overflow:hidden;
  border:1px solid var(--line); aspect-ratio:4/3.9; background:var(--black); }
.rl .wg-anchor img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.6); }
.rl [data-type="incl"] .incl-grid{ grid-template-columns:1fr; gap:0;
  max-width:none; margin-inline:0; counter-reset:wg; }
.rl [data-type="incl"] .incitem{ counter-increment:wg; display:grid;
  grid-template-columns:auto 1fr; align-items:baseline; gap:16px;
  text-align:left; padding:clamp(13px,1.6vw,18px) 0;
  border-bottom:1px solid var(--line2);
  font-family:var(--disp); font-weight:700; letter-spacing:0; text-transform:uppercase;
  color:var(--white); font-size:clamp(14px,1.5vw,19px); line-height:1.1; }
.rl [data-type="incl"] .incitem:first-child{ border-top:1px solid var(--line2); }
.rl [data-type="incl"] .incitem::before{
  content:counter(wg,decimal-leading-zero);
  font-size:11px; color:var(--beige); letter-spacing:.06em; }

/* what building a REVL includes, wherever the content puts it */
.rl .incl-t{ text-align:center; }
.rl .incl-grid{ background:none; border:0; grid-template-columns:repeat(3,1fr);
  gap:0 clamp(20px,2.6vw,36px); max-width:820px; margin-inline:auto; }
.rl .incitem{ background:none; padding:13px 0;
  border-bottom:1px solid var(--line2); text-align:left; font-size:13px; }

/* ---------- 08 FROM THE NETWORK ---------- */
.rl .voices{ grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.rl .vp{ aspect-ratio:1/1; }
.rl .vq{ margin-top:18px; font-size:13px; line-height:1.6; font-weight:400; }
/* white and bold, same call as the scroller */
.rl .vn{ margin-top:14px; font-size:11px; letter-spacing:.16em;
  color:var(--white); font-weight:700; }

/* ---------- 09 WHERE YOU COULD BUILD ----------
   The explorer is a real component with its own alignment. It is capped
   and centred as a block and keeps its own insides. */
.rl [data-type="territory"] #tx-root{ max-width:900px; margin-inline:auto;
  text-align:left; }
.rl [data-type="territory"] .tx-crumb{ justify-content:center; }
.rl [data-type="territory"] .tx-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,224px));
  justify-content:center; }
.rl [data-type="territory"] .tx-list{ align-items:stretch; }
.rl [data-type="territory"] .tx-flag{ text-align:center; max-width:70ch;
  margin-inline:auto; }
.rl [data-sec="opportunity"]{ padding-block:clamp(112px,14vh,180px); }

/* ---------- 10 HOW YOU LAUNCH ----------
   Six stages will not read across a 900px measure, so they go three and
   three. The dots keep the sequence without a rule to hang them on. */
.rl .track{ background:none; border:0; gap:clamp(20px,2.6vw,34px);
  grid-template-columns:repeat(3,1fr); max-width:840px; margin-inline:auto; }
.rl .node{ background:none; padding:0; text-align:center; }
.rl .node .dot{ width:11px; height:11px; border-radius:50%;
  border:1px solid var(--beige); background:var(--black);
  margin:0 auto 16px; }
.rl .node.first .dot{ background:rgba(204,203,188,.4); }
.rl .nw{ font-size:10px; letter-spacing:.14em; color:var(--beige); }
.rl .nt{ font-family:var(--fut); text-transform:none;
  font-weight:700; font-size:14px; color:var(--white); margin:8px 0 6px;
  line-height:1.2; }
.rl .nd{ font-size:12px; color:var(--grey); line-height:1.5; }
.rl [data-sec="path"]{ padding-bottom:clamp(112px,14vh,180px); }

/* ---------- 01 BOOK A CALL ----------
   The one section that gives up the centre axis: the heading, the lead
   and the four things the call covers read down the LEFT column
   (bookSplit puts the head there), and the calendar sits beside them on
   the right, already open. */
.rl [data-sec="book"]{ padding-top:clamp(118px,15vh,188px); }
/* Top-aligned, not centred: a day with four times wraps the slot row and
   the card grows. Centred, that growth is split between the columns and
   shoves the copy down half of it every time you pick a date. */
.rl [data-type="book"] .duo{ grid-template-columns:minmax(0,1fr) minmax(340px,460px);
  gap:clamp(36px,4.5vw,76px); align-items:start; text-align:left; }
.rl [data-type="book"] .col-a,
.rl [data-type="book"] .col-b{ width:100%; }
.rl [data-type="book"] .col-a .head{ align-items:flex-start;
  margin-bottom:clamp(20px,2.6vw,34px); }
.rl [data-type="book"] .col-a .kick{ justify-content:flex-start; }
.rl [data-type="book"] .col-a h2.hl{ margin-inline:0; }
.rl [data-type="book"] .col-a .p{ margin-inline:0; text-align:left;
  max-width:40ch; }
.rl .expect{ max-width:none; margin-inline:0; grid-template-columns:1fr; }
/* ticks back in, same call as the scroller */
.rl .bxi{ display:flex; gap:13px; align-items:flex-start; font-size:13.5px;
  padding:15px 18px; text-align:left; }
.rl .bxi::before{ content:''; flex:0 0 auto; width:5px; height:10px;
  margin-top:4px; border-right:1px solid var(--beige);
  border-bottom:1px solid var(--beige); transform:rotate(45deg); }
.rl .bk-inline{ max-width:460px; margin-inline:0; text-align:left; }
/* the same softened join the scroller uses: the top of this section
   carries a little of 07's flat page black so the seam does not land */
.rl [data-type="book"] .scrimbg{ background:
  linear-gradient(180deg, var(--black) 0%, rgba(10,10,10,.88) 9%, rgba(10,10,10,0) 26%),
  linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.6) 45%, rgba(10,10,10,.92) 100%); }

/* ---------- 11 FAQS ----------
   A question and its control. Capped and centred as a block, flush
   inside, because a centred question next to a centred plus is unusable. */
.rl [data-type="faq"] .qdeck{ text-align:left; max-width:820px;
  margin-inline:auto; gap:0; border-top:1px solid var(--line2); }
.rl .qcard{ border:0; border-bottom:1px solid var(--line2); border-radius:0;
  background:none; }
.rl .qcard.open{ background:none; }

/* ---------- review view (?prov=1) ----------
   Words that did not come from REVL material or Josie read in red.
   The ember red is the one red the palette allows, used here for the
   single thing this view exists to show. */
mark.prov{ background:none; color:rgba(214,87,58,1); }
.prov-tag{ position:fixed; right:14px; bottom:14px; z-index:99;
  font-family:var(--fmono); line-height:1.1; font-size:11px; letter-spacing:-.02em; text-transform:uppercase;
  color:rgba(214,87,58,1); background:rgba(10,10,10,.92);
  border:1px solid rgba(214,87,58,.5); border-radius:4px; padding:8px 12px; }
@media (max-width:1000px){ .prov-tag{ bottom:58px; } }

/* ---------- responsive ----------
   Under 1000px the index has nowhere to stand, so it lies down: a slim
   strip under the header that scrolls sideways and still marks where you
   are. The strip scrolls inside itself, so the page never does. */
@media (max-width:1000px){
  .rl .lp-rail{ top:auto; bottom:0; left:0; right:0; width:auto; height:auto;
    display:flex; gap:0; overflow-x:auto; overflow-y:hidden;
    padding:0 var(--gut); background:rgba(10,10,10,.94);
    backdrop-filter:blur(6px); border-top:1px solid var(--line2);
    padding-bottom:env(safe-area-inset-bottom); }
  .rl .lp-rail::after{ display:none; }
  .rl .lp-rail a{ flex:0 0 auto; padding:13px 13px; white-space:nowrap; gap:8px; }
  .rl .lp-rail .rail-top{ margin-bottom:0; padding-bottom:13px;
    border-bottom:0; }
  .rl .lp-vert{ margin-left:0; }
  /* no index beside it on a phone, so nothing to pull back from */
  .rl .lp-foot{ margin-left:0; width:auto; padding-left:var(--gut); }
  .rl .lp-hdr{ padding-left:var(--gut); }
  .rl .lp-progress{ left:0; }
  /* the strip sits over the foot, so the page needs to end above it */
  .rl .lp-foot{ padding-bottom:calc(44px + 48px); }

  .rl [data-type="incl"] .body{ grid-template-columns:1fr; }
  .rl .wg-anchor{ aspect-ratio:16/9; }

  .rl [data-type="why"] .fr{ aspect-ratio:16/9; }
  .rl .why-plate{ margin-top:-90px; }
  /* no room for the side-by-side booking split: back to the one column,
     centred like the rest, calendar under the text */
  .rl [data-type="book"] .duo{ grid-template-columns:1fr; text-align:center;
    gap:clamp(26px,3.2vw,40px); }
  .rl [data-type="book"] .col-a .head{ align-items:center; }
  .rl [data-type="book"] .col-a .kick{ justify-content:center; }
  .rl [data-type="book"] .col-a h2.hl{ margin-inline:auto; }
  .rl [data-type="book"] .col-a .p{ margin-inline:auto; text-align:center; }
  .rl .expect{ max-width:720px; margin-inline:auto; grid-template-columns:1fr 1fr; }
  .rl .bk-inline{ margin-inline:auto; }
  .rl .track{ grid-template-columns:1fr 1fr; }
  .rl .voices{ grid-template-columns:1fr; }
  .rl .vp{ aspect-ratio:16/10; }
}
@media (max-width:760px){
  /* the community photograph is the point of 02, and a 16:6.4 band on a
     phone is a sliver the plate then covers. It goes portrait. */
  .rl [data-type="why"] .fr{ aspect-ratio:4/3; }
  .rl .why-plate{ margin-top:-48px; width:calc(100% - 24px); }
  .rl [data-type="why"] .rows-2{ grid-template-columns:1fr; }
  .rl [data-type="support"] .rows{ grid-template-columns:1fr; }
  .rl .facts{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .rl .track{ grid-template-columns:1fr; }
  .rl .incl-grid{ grid-template-columns:1fr; max-width:none; }
  .rl .expect{ grid-template-columns:1fr; }
  .rl .np-figs{ display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(16px,3vw,22px) 0; }
  .rl .np-figs .fig + .fig{ border-left:0; }
  .rl .np-figs .fig:nth-child(even){
    border-left:1px solid rgba(255,255,255,.28); }
  .rl .plate{ padding:24px 18px; }
  .rl .p{ font-size:15px; }
  .rl .fact{ display:flex; justify-content:space-between;
    align-items:baseline; gap:16px; padding:13px 16px; text-align:left; }
  .rl .fact .v{ text-align:right; margin-top:0; }
}

/* ============================================================
   PHONE (2026-08-10). Page two on a phone, two jobs.

   1. The funnel has to read as ONE thing. Page one's mobile
      system is locked (styles.css, the MOBILE ROUND FOLD block)
      and page two lands on the SAME computed sizes, so nothing
      changes size or feel as the visitor crosses the form. Page
      one names the three parts .kicker / h2 / .lead; here they
      are .kick / h2.hl / .p, same numbers.
   2. The index strip does not survive at this width. The screen
      is too small for it, so it goes, and so does the footer
      padding that was holding room for it.

   Appended LAST on purpose: a media query adds no specificity,
   so these beat the 1000 / 760 / 620 blocks above by ORDER
   alone. Anything appended after this re-loses the cascade,
   which is why tools/verify-lp2.js gates the COMPUTED values
   (parity @390 and @360) rather than the source.
   ============================================================ */
@media(max-width:620px){
  /* page one's locked scale: headers 35.1 at 390, 33 at the 360
     floor, on the same 0.96 leading; kickers 12.5 at .28em;
     leads 17 on 1.6 */
  .rl h2.hl{ font-size:clamp(33px,9vw,38px); line-height:.96; }
  .rl .kick{ font-size:12.5px; letter-spacing:.28em; }
  .rl .kick .ch{ font-size:14px; }
  .rl .p{ font-size:17px; line-height:1.6; }

  /* the index strip goes. The page just scrolls. */
  .rl .lp-rail{ display:none; }
  .rl .lp-foot{ padding-bottom:44px; }
  /* and with it gone the review tag has the corner back. At full size its
     sentence runs the whole width of the screen as a bar across the bottom
     of the reading column; capped and shrunk it sits in the corner as a
     note, which is all it ever was on a desktop. */
  .prov-tag{ bottom:14px; max-width:64%; font-size:9.5px; line-height:1.45;
    padding:7px 10px; }

  /* The calendar is this page's conversion control, and its day cells were
     a desktop 38px, under the thumb. Page one already holds every form
     control to 44 on phones; the same standard applies here. Scoped to .rl
     so the shared component is untouched on page one and on /book/. */
  .rl .bk-day{ height:auto; min-height:44px; }
  .rl .bk-nav{ width:44px; height:44px; }
  .rl .bk-slot{ min-height:44px; }

  /* ---------- 02 THE FOUNDERS, Macca's pick from round 1 ----------
     Option B's fact treatment on the original composition: the section
     keeps its order (story, film, then the facts), and only the three
     facts change. They stop being three stacked label-left/value-right
     rows and become one ruled band of three cells, the same hairline
     grid that won the mission stats on page one. Founded, Countries and
     Head office all appear on page one too; Macca's call is to keep them
     and let them read as a band rather than a footnote. */
  .rl [data-sec="founders"] .facts{ grid-template-columns:1fr 1fr 1fr;
    gap:1px; background:var(--line2); border:1px solid var(--line2); }
  .rl [data-sec="founders"] .fact{ display:block; text-align:center;
    padding:18px 6px; background:var(--black); }
  .rl [data-sec="founders"] .fact .k{ font-size:9.5px; letter-spacing:.16em; }
  .rl [data-sec="founders"] .fact .v{ display:block; margin-top:9px;
    text-align:center; font-family:var(--disp); font-weight:700; letter-spacing:0; text-transform:uppercase;
    color:var(--white); font-size:21px; line-height:1; }

  /* ---------- 06 THE STUDIO FORMATS, Macca's pick from round 2 ----------
     Option E, the spec sheet, with the plan and the photograph left alone.

     Two changes. First the control: the three builds go back on ONE row
     instead of stacking into three full-width blocks, so it reads as a
     control again and you can switch build with a thumb without scrolling
     back up to find it. Second the specs: they stop being four centred
     label-and-value blocks and become a ruled ledger, label left and
     figure right, the same shape as the key numbers in 07. Someone
     choosing a footprint is comparing, and a ledger is what you compare
     against.

     E's own side-by-side plan and photograph band is NOT taken: Macca's
     call is that both stay full width and stacked as they are. The floor
     plan is therefore still 346px wide and still unreadable, which is a
     separate open question (round 2 option D). */
  .rl [data-sec="formats"] .fmt-tabs{ grid-template-columns:1fr 1fr 1fr; }
  .rl [data-sec="formats"] .fmt-tabs button{ padding:12px 5px;
    text-align:center; min-height:56px; }
  .rl [data-sec="formats"] .fmt-tabs .fn{ font-size:13px; }
  .rl [data-sec="formats"] .fmt-tabs .fs{ font-size:8.5px;
    letter-spacing:.06em; margin-top:6px; }
  .rl [data-sec="formats"] .fmt-facts{ display:block; margin-top:22px;
    padding-bottom:0; border-bottom:0; border-top:1px solid var(--line); }
  .rl [data-sec="formats"] .fmt-facts .c{ display:flex;
    justify-content:space-between; align-items:baseline; gap:18px;
    padding:14px 0; border-bottom:1px solid var(--line2); text-align:left; }
  .rl [data-sec="formats"] .fmt-facts .k{ flex:0 0 auto; font-size:10px; }
  .rl [data-sec="formats"] .fmt-facts .v{ margin-top:0; text-align:right;
    font-size:13.5px; color:var(--white); }

  /* ---------- 08 FROM THE NETWORK, round 3 pick: option D, the plate ----------
     Each testimonial boxed: one hairline outline holding the photograph,
     the words and the name together. Three plates down the page instead
     of three runs of content, which is the same language as the founders
     band in 02 and the spec sheet in 06.

     THE SPACING HISTORY, because this looks like a reversal and is one.
     A turn earlier the gap went 18px to 56px, because at 18 the name of
     the person who just spoke sat as close to the next person's face as
     to their own words and read as a caption for it. The plate solves
     that same problem a different way: the outline does the separating,
     so the gap comes back to 24. Macca picked D seeing it at 24.

     The photographs also stop being a 16:10 letterbox cut out of
     portrait shots, which is what took the top off Tom's head. Square,
     and cropped from the face down. */
  .rl [data-sec="voices"] .voices{ gap:24px; }
  .rl [data-sec="voices"] .vitem{ border:1px solid var(--line2);
    background:var(--black); }
  .rl [data-sec="voices"] .vp{ aspect-ratio:1; }
  .rl [data-sec="voices"] .vp img{ object-position:center 22%; }
  .rl [data-sec="voices"] .vq{ margin:20px 20px 0; font-size:15px; }
  .rl [data-sec="voices"] .vn{ margin:14px 20px 22px; }

  /* ---------- 09 WHERE YOU COULD BUILD, Macca's call ----------
     The explorer changed width as you went into it. The first two levels,
     the states and then the areas inside a state, are a grid capped at
     224px and centred, which is a desktop rule for fitting several across
     a wide row. The third level, the territories themselves, is a plain
     list at the full 346. So every click made the boxes jump 224 to 346
     and back, which reads as the layout moving rather than as going a
     level deeper.

     On a phone one column is the only sensible answer anyway, so the cap
     goes and all three levels sit at the same width. That also takes out
     the 61px of dead space each side of the first two levels. */
  .rl [data-type="territory"] .tx-grid{ grid-template-columns:1fr; }
}