/* A case study, laid out like Ramp's "Designing OnRamp 2026": a big title, one paragraph and the facts, a hero film, then a
   collage of large visuals with solid tiles carrying her section labels. */
.cs { padding: 0 var(--gut); }
.cs-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px 48px; align-items: end; padding: clamp(40px, 7vw, 110px) 0 clamp(28px, 3.4vw, 48px); }
.cs-head .kick { grid-column: 1 / -1; color: var(--muted); } .cs-head .kick .c { color: var(--cobalt); } .cs-head .kick .sep { color: var(--line); }
.cs-head .display { font-size: clamp(40px, 5.6vw, 88px); text-wrap: balance; }
.cs-side { display: grid; gap: 26px; padding-bottom: .5em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.facts dt { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; } .facts dd { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.tile.hero { display: grid; place-items: center; padding: clamp(18px, 4.5vw, 72px);
  background-color: var(--t-deep, var(--cobalt)); background-image: radial-gradient(circle, rgba(255, 255, 255, .2) 1.1px, transparent 1.6px); background-size: 16px 16px; }
.tile.hero .frame { width: min(100%, calc(72vh * 16 / 9)); aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -30px rgba(0, 6, 40, .85); }

.collage { display: grid; gap: var(--gap); margin-top: var(--gap); }
.row { --u: min(40vw, 600px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); height: calc(var(--h) * var(--u)); }
.row > * { grid-column: span var(--span); min-height: 0; }
.tile.label .h3 { max-width: 22ch; text-wrap: balance; }
.tile.label .go { margin-top: -6px; }
.tile.media-t { background: var(--bg); display: flex; flex-direction: column; }
.tile.media-t .m { position: relative; flex: 1; min-height: 0; }
.tile.media-t .m > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tile.media-t.pad .m { margin: clamp(10px, 1.4vw, 20px); }
.tile .tag { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255, 255, 255, .92); color: var(--t-mid, var(--cobalt)); }
.tile .cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: min(46ch, calc(100% - 24px)); padding: 7px 11px 6px; border-radius: 10px; background: rgba(243, 242, 238, .94);
  font: 400 12.5px/1.35 var(--sans); color: var(--ink-2); }
.tile.say .say-h { display: grid; gap: 8px; padding: 16px 16px 4px; font: 450 15px/1.35 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.tile.say .say-h .pill { color: var(--t-mid, var(--cobalt)); }
.tile.say .m { margin: 10px 12px 12px; }
.tile.stat { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2vw, 26px); }
.tile.stat .num { font: 450 clamp(40px, 4.4vw, 68px)/1 var(--sans); letter-spacing: -0.05em; color: var(--t-mid, var(--cobalt)); }
.tile.stat .small { color: var(--ink-2); font-size: 15px; }

/* Up next (Ru, Nov 5: "this needs to be redone and not that loud", then "more iterations ... good spaced under the live
   results"). It sits one full section's space under the last section, after a rule, so the end of the story reads as its own
   beat. Four takes, ?next=row | card | strip | type. */
.nx2 { position: relative; display: grid; margin: clamp(80px, 10vw, 150px) 0 0; padding: clamp(24px, 2.6vw, 36px) 0 0; border-top: 1px solid rgba(11, 13, 18, .16); color: var(--ink); }
.nx2-t { display: grid; gap: 10px; align-content: start; }
.nx2-k { font-size: 12.5px; color: var(--muted); } .nx2-k::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--chart); }
.nx2-h { max-width: 26ch; font: 400 clamp(22px, 2.1vw, 32px)/1.15 var(--sans); letter-spacing: -0.03em; text-wrap: balance; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .25s ease; }
.nx2-m { font-size: 12.5px; color: var(--muted); }
.nx2-f { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--bg); }
.nx2-f video, .nx2-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .7s cubic-bezier(.16, 1, .3, 1); }
.nx2-a { display: none; }
.nx2:hover .nx2-h { text-decoration-color: var(--chart); }   /* the film keeps its size on hover (Ru, Nov 10: "not the case study zoom in") */
/* A · row: text left, a small still right */
.nx2.v-row { grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 380px); gap: clamp(20px, 4vw, 64px); align-items: center; }
/* B · card: a soft card in the next project's pale colour, the still large on the left, the words at the bottom right */
.nx2.v-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(18px, 2.6vw, 40px); padding: 14px; border: 0; border-radius: var(--r); background: var(--t-pale, var(--paper-2)); }
.nx2.v-card .nx2-t { align-content: end; padding: clamp(10px, 1.6vw, 22px) clamp(6px, 1vw, 12px); }
.nx2.v-card .nx2-h { color: var(--t-deep, var(--ink)); }
.nx2.v-card .nx2-a { display: grid; place-items: center; position: absolute; right: clamp(20px, 2.2vw, 30px); top: clamp(20px, 2.2vw, 30px); width: 40px; height: 40px; border-radius: 50%; background: var(--chart); color: var(--navy); transition: rotate .4s cubic-bezier(.16, 1, .3, 1); }
.nx2.v-card:hover .nx2-a { rotate: -45deg; }
/* C · strip: the still as a wide strip, the title over its foot on a soft shade of the project's colour */
.nx2.v-strip { padding: 0; border: 0; overflow: hidden; border-radius: var(--r); }
.nx2.v-strip .nx2-f { grid-area: 1 / 1; aspect-ratio: 16 / 5; border-radius: 0; }
.nx2.v-strip .nx2-t { grid-area: 1 / 1; z-index: 1; align-self: stretch; align-content: end; width: min(62%, 640px); padding: clamp(20px, 2.6vw, 36px); background: linear-gradient(to right, var(--t-deep, #000c3c) 0%, var(--t-deep, #000c3c) 52%, color-mix(in srgb, var(--t-deep, #000c3c) 70%, transparent) 78%, transparent); color: var(--white); }
.nx2.v-strip .nx2-f video, .nx2.v-strip .nx2-f img { object-position: 75% 30%; }
.nx2.v-strip .nx2-k, .nx2.v-strip .nx2-m { color: rgba(255, 255, 255, .78); }
.nx2.v-strip .nx2-h { color: var(--white); max-width: 30ch; }
/* D · type: words only, set large and light; the still appears beside the cursor while you are over it */
.nx2.v-type { gap: 14px; }
.nx2.v-type .nx2-h { max-width: 22ch; font-weight: 300; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.04; letter-spacing: -0.045em; }
.nx2.v-type .nx2-f { position: absolute; left: 0; top: 0; width: clamp(240px, 24vw, 340px); z-index: 2; pointer-events: none; opacity: 0; translate: var(--x, 60%) var(--y, 0); scale: .92; box-shadow: 0 24px 50px -20px rgba(0, 12, 60, .45);
  transition: opacity .3s ease, scale .45s cubic-bezier(.16, 1, .3, 1); }
.nx2.v-type:hover .nx2-f { opacity: 1; scale: 1; }
@media (max-width: 900px) { .nx2.v-row, .nx2.v-card { grid-template-columns: minmax(0, 1fr); } .nx2.v-row .nx2-f { order: 2; } .nx2.v-strip .nx2-f { aspect-ratio: 4 / 3; } .nx2.v-type .nx2-f { display: none; } }
.tile.nx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; margin: clamp(56px, 8vw, 120px) 0 0; background: var(--t-deep, var(--cobalt)); color: var(--white); min-height: 380px; }
.tile.nx .nx-t { display: grid; align-content: start; gap: 18px; padding: clamp(22px, 3vw, 40px); }
.tile.nx .nx-t .mono { color: rgba(255, 255, 255, .72); }
.tile.nx .nx-t .go { justify-self: start; }
.tile.nx .nx-f { position: relative; background: var(--bg); } .tile.nx .nx-f video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .cs-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .row { display: flex; flex-direction: column; height: auto; }
  .row > .label, .row > .stat { min-height: 200px; }
  .tile.media-t { aspect-ratio: var(--ar); } .tile.media-t.pad { aspect-ratio: auto; } .tile.media-t.pad .m { aspect-ratio: var(--ar); flex: none; }
  .tile.media-t.say { aspect-ratio: auto; } .tile.media-t.say .m { aspect-ratio: var(--ar); flex: none; }
  .tile.nx { grid-template-columns: minmax(0, 1fr); } .tile.nx .nx-f { aspect-ratio: 16 / 9; }
}

/* ---------- the story layout (after Bradley Ziffer's case studies) ---------- */
.st-head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px 56px; align-items: end; padding: clamp(40px, 7vw, 110px) 0 clamp(28px, 3.4vw, 48px); }
.st-head > div { display: grid; gap: 20px; }
.st-head .kick .c { color: var(--cobalt); }
.st-head .display { font-size: clamp(40px, 5.4vw, 84px); text-wrap: balance; }
.st-head .lede { max-width: 46ch; }
.st-head .facts { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: .4em; }
.story { display: grid; gap: clamp(72px, 10vw, 150px); padding: clamp(72px, 10vw, 140px) 0 0; }
/* the eyebrow over each section: small, so the line under it leads (Ru, Nov 5: "have the eyebrow be smaller so its not taking
   up visual priority") */
.ask { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 0 0 clamp(12px, 1.2vw, 16px); padding: 5px 10px 4px; border-radius: 999px; background: var(--white);
  box-shadow: 0 0 0 1px var(--line); font: 400 12.5px/1.2 var(--mono); color: var(--ink-2); }
.ask .sl { color: var(--cobalt); } .ask .q { min-height: 1.2em; } .ask .ent { color: var(--muted); font-size: 10.5px; margin-left: 2px; }
.sx { scroll-margin-top: var(--cnav-off, 90px); }
/* the case study nav (Ru, Nov 5: "better placement, more visible"): a cobalt pill floating at the bottom centre, there from
   the moment the case study opens, so its structure is seen up front and any section is one click away */
.cnav { position: fixed; left: 0; right: 0; bottom: clamp(14px, 2.2vh, 24px); z-index: 45; width: max-content; max-width: calc(100vw - 2 * var(--gut)); margin: 0 auto; transform: translateY(160%);
  border-radius: 999px; background: var(--cobalt); color: var(--white); box-shadow: 0 18px 44px -14px rgba(0, 12, 60, .55), 0 2px 6px rgba(0, 12, 60, .18), inset 0 0 0 1px rgba(255, 255, 255, .1);
  overflow: hidden; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.cnav.on { transform: none; }
.cnav-in { display: flex; align-items: center; gap: 6px; padding: 6px; }
.cnav-k { flex: none; padding: 0 10px 0 12px; font-size: 12.5px; color: var(--chart); border-right: 1px solid rgba(255, 255, 255, .16); margin-right: 2px; }
.cnav-l { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cnav-l::-webkit-scrollbar { display: none; }
.cnav-l a { flex: none; padding: 9px 14px 8px; border-radius: 999px; font-size: 13px; color: rgba(255, 255, 255, .74); transition: color .2s ease, background-color .25s ease; }
.cnav-l a:hover { color: var(--white); background: rgba(255, 255, 255, .1); }
.cnav-l a.here { color: var(--navy); background: var(--chart); }
.cnav-p { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--chart); opacity: .9; transform-origin: 0 50%; transform: scaleX(0); }
body:has(.cnav) { padding-bottom: 92px; }   /* room so the pill never sits over the last of the page */
html.petal .cnav { background: var(--navy); }
.cnav-l a i, .cnav-fill, .cnav-l a .n, .cnav-l a .s { display: none; }
.cnav-l a i svg { display: block; fill: currentColor; }
/* the rail (Ru, Nov 5: "what about on the left hand side", "nav on the left hand side stacked"): the sections stacked down
   the left, starting level with the case study's first line and staying there as you read.
   A dot per section on a thin track; the track fills in cobalt as you read, the section you are in gets a petal dot. */
.cnav.rail { left: var(--gut); right: auto; top: var(--rail-top, 140px); bottom: auto; width: 176px; max-width: none; margin: 0; translate: none; transform: translateX(-14px); opacity: 0;
  background: none; color: var(--ink); box-shadow: none; border-radius: 0; overflow: visible; transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .5s ease; }
.cnav.rail.on { transform: none; opacity: 1; }
.cnav.rail .cnav-in { display: grid; gap: 16px; padding: 0; }
.cnav.rail .cnav-k { display: none; }   /* the opening already names the project */
.cnav.rail .cnav-l { position: relative; display: grid; gap: 0; overflow: visible; }
.cnav.rail .cnav-l::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 1px; background: rgba(11, 13, 18, .14); }
.cnav.rail .cnav-fill { display: block; position: absolute; left: 4px; width: 1px; background: var(--cobalt); transition: height .15s linear; }
.cnav.rail .cnav-l a { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 9px 0; border-radius: 0; background: none; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.cnav.rail .cnav-l a:hover { background: none; color: var(--ink); }
.cnav.rail .cnav-l a i svg { display: none; }
.cnav.rail .cnav-l a i { display: block; position: relative; z-index: 1; flex: none; width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(11, 13, 18, .28);
  transition: background-color .3s ease, box-shadow .3s ease, scale .3s cubic-bezier(.16, 1, .3, 1); }
.cnav.rail .cnav-l a.done i { background: var(--cobalt); box-shadow: none; }
.cnav.rail .cnav-l a.here { color: var(--ink); background: none; } .cnav.rail .cnav-l a.here i { background: var(--chart); box-shadow: 0 0 0 4px rgba(247, 184, 201, .4); scale: 1.15; }
.cnav.rail .cnav-p { display: none; }
/* rail look: numbered. A two-digit count beside each name; a thin bar down the left fills in cobalt. */
.cnav.rail-num .cnav-l::before { left: 0; top: 6px; bottom: 6px; width: 2px; }
.cnav.rail-num .cnav-fill { left: 0; width: 2px; }
.cnav.rail-num .cnav-l a { gap: 12px; padding: 8px 0 8px 16px; }
.cnav.rail-num .cnav-l a i { display: none; }
.cnav.rail-num .cnav-l a .n { display: block; flex: none; width: 20px; color: rgba(11, 13, 18, .32); transition: color .25s ease; }
.cnav.rail-num .cnav-l a.done .n { color: var(--cobalt); } .cnav.rail-num .cnav-l a.here .n { color: var(--cobalt); }
.cnav.rail-num .cnav-l a.here .t { color: var(--ink); box-shadow: inset 0 -6px 0 rgba(247, 184, 201, .7); }
/* rail look: slash. The sections in her slash language, like /work and /about; the one you are in sits in a pill like the
   eyebrow over it. */
.cnav.rail-slash .cnav-l::before, .cnav.rail-slash .cnav-fill { display: none; }
.cnav.rail-slash .cnav-l { gap: 4px; }
.cnav.rail-slash .cnav-l a { padding: 6px 10px 5px; margin-left: -10px; border-radius: 999px; color: var(--muted); transition: color .2s ease, background-color .25s ease, box-shadow .25s ease; }
.cnav.rail-slash .cnav-l a i, .cnav.rail-slash .cnav-l a .t { display: none; }
.cnav.rail-slash .cnav-l a .s { display: inline; } .cnav.rail-slash .cnav-l a .s b { font-weight: 400; color: var(--cobalt); margin-right: 1px; }
.cnav.rail-slash .cnav-l a.done { color: var(--ink-2); }
.cnav.rail-slash .cnav-l a.here { color: var(--ink); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
/* rail look: blossom. Her blossom marks each section on a dotted vine: a grey bud ahead, cobalt once read, and the section
   you are in opens in petal. */
.cnav.rail-bloom .cnav-l::before { left: 6px; width: 2px; background: radial-gradient(circle, rgba(11, 13, 18, .28) .9px, transparent 1.2px) 0 0 / 2px 5px repeat-y; }
.cnav.rail-bloom .cnav-fill { left: 6px; width: 2px; background: radial-gradient(circle, var(--cobalt) 1px, transparent 1.3px) 0 0 / 2px 5px repeat-y; }
.cnav.rail-bloom .cnav-l a { gap: 12px; }
.cnav.rail-bloom .cnav-l a i { width: 13px; height: 13px; margin-top: 1px; border-radius: 0; background: var(--paper); box-shadow: none; color: rgba(11, 13, 18, .26); scale: .62; }
.cnav.rail-bloom .cnav-l a i svg { display: block; } .cnav.rail-bloom .cnav-l a i svg .c { fill: currentColor; }
.cnav.rail-bloom .cnav-l a.done i { background: var(--paper); box-shadow: none; color: var(--cobalt); }
.cnav.rail-bloom .cnav-l a.here i { background: var(--paper); box-shadow: none; color: var(--chart); scale: 1.2; } .cnav.rail-bloom .cnav-l a.here i svg .c { fill: var(--cobalt); }
.cnav-t { display: none; }
.cnav-w { display: contents; }
/* collapsed at the top right (Ru, Nov 5: "top floating nav instead of bottom and collapsed right"): a cobalt pill under the
   site bar shows the section you are in and where it falls (3/5); a tap opens the list below it, smoothly. */
.cnav.drop { left: auto; right: var(--gut); top: var(--drop-top, 84px); bottom: auto; width: auto; max-width: min(340px, calc(100vw - 2 * var(--gut))); margin: 0;
  transform: translateY(-10px); opacity: 0; border-radius: 22px; transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .35s ease; }
.cnav.drop.on { transform: none; opacity: 1; }
.cnav.drop .cnav-in { display: grid; gap: 0; padding: 4px; }
.cnav.drop .cnav-k { display: none; }
.cnav.drop .cnav-t { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px 9px 15px; border: 0; border-radius: 18px; background: none; color: var(--white); font-size: 12.5px; text-align: left; cursor: pointer; }
.cnav.drop .cnav-t:focus-visible { outline: 2px solid var(--chart); outline-offset: -2px; }
.cnav.drop .cnav-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnav.drop .cnav-c { flex: none; color: var(--chart); }
.cnav.drop .cnav-ch { flex: none; transition: rotate .35s cubic-bezier(.16, 1, .3, 1); } .cnav.drop.open .cnav-ch { rotate: 180deg; }
.cnav.drop .cnav-w { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1); }
.cnav.drop.open .cnav-w { grid-template-rows: 1fr; }
.cnav.drop .cnav-l { display: grid; gap: 2px; min-height: 0; overflow: hidden; padding: 0 0 0; }
.cnav.drop.open .cnav-l { padding: 2px 0 2px; }
.cnav.drop .cnav-l a { padding: 10px 14px 9px; border-radius: 16px; font-size: 12.5px; white-space: normal; opacity: 0; translate: 0 -4px; transition: opacity .3s ease, translate .4s cubic-bezier(.16, 1, .3, 1), background-color .2s ease, color .2s ease; }
.cnav.drop.open .cnav-l a { opacity: 1; translate: none; } .cnav.drop.open .cnav-l a:nth-child(2) { transition-delay: .03s; } .cnav.drop.open .cnav-l a:nth-child(3) { transition-delay: .06s; } .cnav.drop.open .cnav-l a:nth-child(4) { transition-delay: .09s; } .cnav.drop.open .cnav-l a:nth-child(5) { transition-delay: .12s; } .cnav.drop.open .cnav-l a:nth-child(n + 6) { transition-delay: .15s; }
.cnav.drop .cnav-l a i, .cnav.drop .cnav-l a .n, .cnav.drop .cnav-l a .s { display: none; }
.cnav.drop .cnav-p { bottom: 0; }
body:has(.cnav.drop) { padding-bottom: 0; }
@media (max-width: 900px) { .cnav.drop { left: auto; right: var(--gut); width: auto; max-width: min(300px, calc(100vw - 2 * var(--gut))); } }
html.has-rail .cs { padding-left: calc(var(--gut) + 176px + clamp(36px, 4vw, 64px)); }
html.has-rail body:has(.cnav) { padding-bottom: 0; }
@media (max-width: 900px) { .cnav-k { display: none; } .cnav { left: var(--gut); right: var(--gut); width: auto; max-width: none; } .cnav-l a { padding: 9px 12px 8px; font-size: 12.5px; } }
.sx-b { display: grid; gap: clamp(18px, 2.4vw, 32px); }
.sx-t { display: grid; gap: 16px; align-content: start; }
.sx-t .h3 { max-width: 30ch; font-size: clamp(24px, 2.3vw, 36px); text-wrap: balance; }
.sx-t .go { justify-self: start; }
.sx.solo .sx-b { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; }
.sx.solo.rev .sx-b { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .sx.solo.rev .sx-t { order: 2; }
.sx-v { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.sx-v .vw { grid-column: span var(--sp, 12); }
.sx.solo .sx-v .vw { grid-column: span 12; }
.vis { position: relative; overflow: hidden; border-radius: var(--r); background: var(--bg); display: flex; flex-direction: column; }
.vis .m { position: relative; aspect-ratio: var(--ar); } .vis .m > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vis.pad .m { margin: clamp(10px, 1.6vw, 22px); }
.vis.tall .m { max-height: 88svh; } .vis.tall.marked .m { max-height: none; }
.vis .tag { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255, 255, 255, .92); color: var(--t-mid, var(--cobalt)); }
.vis.say .say-h, .vis .say-h { display: grid; gap: 8px; padding: 16px 16px 2px; font: 450 15px/1.35 var(--sans); color: var(--ink); } .vis .say-h .pill { color: var(--t-mid, var(--cobalt)); }
.vis .say-h + .m { margin: 10px 12px 12px; }
.vcap { margin-top: 10px; font: 400 13px/1.4 var(--sans); color: var(--muted); max-width: 60ch; }
.sx-n { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(18px, 3vw, 40px); padding-top: clamp(10px, 1.4vw, 20px); border-top: 1px solid var(--line); }
.sx-n .num { font: 450 clamp(52px, 6vw, 96px)/.95 var(--sans); letter-spacing: -0.06em; color: var(--t-mid, var(--cobalt)); }
.sx-n .small { margin-top: 8px; font-size: 15px; color: var(--ink-2); } .sx-n .pill { color: var(--t-mid, var(--cobalt)); } .sx-n .h3 { margin-top: 12px; }
@media (max-width: 900px) {
  .st-head { grid-template-columns: minmax(0, 1fr); align-items: start; } .st-head .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx.solo .sx-b, .sx.solo.rev .sx-b { grid-template-columns: minmax(0, 1fr); } .sx.solo.rev .sx-t { order: 0; }
  .sx-v .vw { grid-column: span 12; }
}

/* ---------- the opening, after Bradley Ziffer's ("Financial freedom at Acorns"): a short title with its subject in italic
   serif, her title as the line under it, a rule, two short columns, and the facts on the right ---------- */
.sh { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 28px clamp(32px, 6vw, 110px); padding: clamp(40px, 7vw, 104px) 0 clamp(36px, 4.6vw, 64px); }
.sh-main { display: grid; gap: 16px; align-content: start; }
.sh-main .kick .c { color: var(--cobalt); }
.sh-title { font: 400 clamp(36px, 4.1vw, 68px)/1.04 var(--sans); letter-spacing: -0.045em; text-wrap: balance; }
.sh-title { font-weight: 300; } .sh-title em { font-style: normal; font-weight: 500; }
.sh-sub { font: 400 clamp(17px, 1.35vw, 20px)/1.45 var(--sans); color: var(--muted); padding-bottom: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid rgba(11, 13, 18, .22); }
.sh-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 3.6vw, 56px); padding-top: clamp(8px, 1vw, 14px); }
.sh-cols p { font: 400 clamp(16px, 1.18vw, 18px)/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
/* (Ru, Nov 5) the title is her line plus where, and only the first paragraph sits under it */
.sh-cols.one { grid-template-columns: minmax(0, 1fr); max-width: 62ch; padding-top: clamp(16px, 1.6vw, 22px); border-top: 1px solid rgba(11, 13, 18, .22); }
.sh-cols.one p { font-size: clamp(17px, 1.3vw, 20px); }
.sx-lead { max-width: 64ch; margin: 0 0 clamp(18px, 2vw, 28px); font: 400 clamp(17px, 1.3vw, 20px)/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.sh-facts { display: grid; gap: 22px; align-content: start; margin: 0; padding-top: clamp(14px, 1.4vw, 22px); }
.sh-facts dt { font: 500 16px/1.2 var(--sans); letter-spacing: -0.01em; color: var(--ink); } .sh-facts dd { margin: 6px 0 0; font: 400 15.5px/1.45 var(--sans); color: var(--muted); }
@media (max-width: 900px) { .sh { grid-template-columns: minmax(0, 1fr); } .sh-cols { grid-template-columns: minmax(0, 1fr); } .sh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- the case study, visual first (Ru, Nov 6: "visual heavy strong craft", after George Bugg, Bradley Ziffer, Jon Howell
   and Paul Jun). The title and its first paragraph share the opening with the facts set small; the work fills the screen edge to
   edge; each section is a numbered eyebrow and one line over large visuals. ---------- */
.sh.v2 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 28px clamp(32px, 5vw, 96px); padding: clamp(48px, 7vw, 112px) 0 clamp(32px, 4vw, 56px); }
.sh.v2 .sh-main { gap: 18px; }
.sh.v2 .kick { font-size: 12.5px; color: var(--muted); }
.sh.v2 .sh-title { font-size: clamp(40px, 5vw, 84px); line-height: 1.02; }
.sh.v2 .sh-side { display: grid; gap: 22px; align-content: end; }
.sh-intro { font: 400 clamp(16px, 1.2vw, 18px)/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.sh.v2 .sh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.sh.v2 .sh-facts dt { font: 400 11.5px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sh.v2 .sh-facts dd { margin: 6px 0 0; font: 400 14.5px/1.4 var(--sans); color: var(--ink); }
.tile.hero.bleed { margin: 0 calc(-1 * var(--gut)); border-radius: 0; padding: clamp(28px, 5vw, 96px) var(--gut); }
.tile.hero.bleed .frame { width: min(100%, calc(76vh * 16 / 9)); }
.sx-t .h3 { font-size: clamp(22px, 1.9vw, 30px); max-width: 34ch; }
.ask .no { margin-right: 7px; color: var(--muted); }
.vis { border-radius: 18px; }
@media (max-width: 900px) { .sh.v2 { grid-template-columns: minmax(0, 1fr); align-items: start; } .sh.v2 .sh-title { font-size: clamp(34px, 9vw, 48px); } }
/* the section control in the middle of the site bar */
.cnav.drop.inbar { position: absolute; left: 50%; right: auto; top: 50%; bottom: auto; margin: -17px 0 0; translate: -50% 0; max-width: min(360px, 38vw); border-radius: 17px;
  box-shadow: 0 10px 28px -14px rgba(0, 12, 60, .5); }
.cnav.drop.inbar .cnav-in { padding: 3px; }
.cnav.drop.inbar .cnav-t { padding: 6px 10px 6px 13px; font-size: 12px; }
.cnav.drop.inbar .cnav-l a { padding: 9px 12px 8px; font-size: 12px; }
/* ---------- five looks for the section nav, to compare (Ru, Nov 9: "I wanna revisit the section nav ... I think placement is good
   but how it looks I think it can be pushed to greatness"): ?nav=steps | blooms | slash | inline | vine. Each keeps today's place,
   the middle of the bar on a laptop and the band of paper under it on a phone. The pill is drawn by .cnav-in, so a name or a tip
   can sit outside it; --nv-h is its closed height, and it opens downward from there. ---------- */
.cnav.nv.drop { --nv-h: 34px; background: none; color: var(--ink); box-shadow: none; border-radius: 0; overflow: visible; }
.cnav.nv.drop.inbar { width: max-content; max-width: none; margin: calc(var(--nv-h) / -2) 0 0; border-radius: 0; box-shadow: none; }
.cnav.nv.drop .cnav-in { position: relative; display: grid; gap: 0; padding: 0; overflow: hidden; border-radius: calc(var(--nv-h) / 2); background: var(--white); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(11, 13, 18, .08), 0 12px 28px -18px rgba(0, 12, 60, .45); }
.cnav.nv .nv-top { display: flex; align-items: center; min-width: 0; min-height: var(--nv-h); }
.cnav.nv.drop .cnav-t { position: relative; display: flex; align-items: center; gap: 9px; flex: 1 1 auto; align-self: stretch; min-width: 0; margin: 0; padding: 0 13px 0 15px; border: 0;
  border-radius: calc(var(--nv-h) / 2); background: none; color: inherit; font: 450 13px/1 var(--sans); letter-spacing: -0.005em; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cnav.nv.drop .cnav-t:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -3px; }
.cnav.nv .cnav-ch { flex: none; opacity: .45; }
.cnav.nv .nv-lab { display: grid; flex: 0 1 var(--lw, auto); min-width: 0; height: 1.5em; line-height: 1.5em; overflow: hidden; }
.cnav.nv .nv-lab > span { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cnav.nv .nv-wi { min-height: 0; overflow: hidden; box-shadow: inset 0 1px 0 var(--line); }
/* closed, the list leaves the tab order and the reading order, once it has folded away */
.cnav.nv.drop:not(.open):not(.nv-row) .nv-wi { visibility: hidden; transition: visibility 0s .45s; }
.cnav.nv.drop .cnav-l, .cnav.nv.drop.open .cnav-l { position: relative; display: grid; gap: 1px; min-height: auto; overflow: visible; padding: 5px; }
.cnav.nv.drop .cnav-l a { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: none; color: var(--muted);
  font: 400 13px/1.3 var(--sans); letter-spacing: -0.005em; white-space: normal; }
.cnav.nv.drop .cnav-l a.done { color: var(--ink-2); }
.cnav.nv.drop .cnav-l a:hover, .cnav.nv.drop .cnav-l a.here { background: rgba(11, 13, 18, .05); color: var(--ink); }
.cnav.nv.drop .cnav-l a:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.cnav.nv .nv-n { flex: none; font: 400 11px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }
.cnav.nv .nv-t { flex: 1 1 auto; min-width: 0; }
.cnav.nv .nv-lock { flex: none; width: 9px; height: 11px; color: var(--muted); }
.sx[tabindex="-1"]:focus { outline: none; }   /* a section the nav sent the keyboard to */
@media (max-width: 899.98px) { .cnav.nv.drop { max-width: calc(100vw - 2 * var(--gut)); } }

/* steps: the name over one thin segment per section; the one you are in has a petal track that fills in cobalt as you read, and
   read ones stay filled. The list has the same segments, standing down its left edge. */
.cnav.nv-steps.drop { --nv-h: 42px; }
.cnav.nv-steps.drop .cnav-t { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 1px 16px 0; }
.cnav.nv-steps .nv-r1, .cnav.nv-vine .nv-r1 { display: flex; align-items: center; justify-content: center; gap: 8px; padding-left: 20px; }
.cnav.nv-steps .nv-lab, .cnav.nv-vine .nv-lab { text-align: center; }
.cnav.nv-steps .nv-segs { display: flex; gap: 3px; height: 2px; }
.cnav.nv-steps .nv-segs > span, .cnav.nv-steps .nv-sg { position: relative; flex: 1 1 0; overflow: hidden; border-radius: 2px; background: rgba(11, 13, 18, .12); transition: background-color .45s ease; }
.cnav.nv-steps .nv-segs > .here, .cnav.nv-steps .here > .nv-sg { background: var(--chart); }
.cnav.nv-steps .nv-segs > .lock:not(.here):not(.done) { background: radial-gradient(circle, rgba(11, 13, 18, .3) .7px, transparent .9px) 0 50% / 3px 2px repeat-x; }
.cnav.nv-steps .nv-segs b, .cnav.nv-steps .nv-sg b { position: absolute; inset: 0; background: var(--cobalt); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.cnav.nv-steps.drop .cnav-l { gap: 3px; }
.cnav.nv-steps .nv-sg { flex: none; align-self: stretch; width: 2px; margin: -5px 2px -5px -2px; }
.cnav.nv-steps .nv-sg b { transform-origin: 50% 0; transform: scaleY(var(--f, 0)); }

/* blooms: a pixel blossom per section on the cobalt, her asterisk drawn in three rings so it can open: a green bud ahead, petal
   and opening while you read it, a white bloom with a petal heart once read */
.cnav.nv-blooms.drop .cnav-in, .cnav.nv-vine.drop .cnav-in { background: var(--cobalt); color: var(--white); box-shadow: 0 12px 30px -16px rgba(0, 12, 60, .6), inset 0 0 0 1px rgba(255, 255, 255, .08); }
html.petal .cnav.nv-blooms.drop .cnav-in, html.petal .cnav.nv-vine.drop .cnav-in { background: var(--navy); }
.cnav.nv-blooms .nv-wi, .cnav.nv-vine .nv-wi { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.cnav.nv-blooms.drop .cnav-t, .cnav.nv-vine.drop .cnav-t { font: 400 12px/1 var(--mono); letter-spacing: .02em; }
.cnav.nv-blooms.drop .cnav-t:focus-visible, .cnav.nv-vine.drop .cnav-t:focus-visible { outline-color: var(--chart); }
.cnav.nv-blooms .cnav-ch, .cnav.nv-vine .cnav-ch { opacity: .62; }
.cnav.nv-blooms.drop .cnav-t { padding: 0 13px 0 10px; }
.cnav.nv-blooms .nv-bl { display: flex; flex: none; align-items: center; align-self: stretch; padding-left: 8px; }
.cnav.nv-blooms .nv-bl::after { content: ""; flex: none; width: 1px; height: 14px; margin-left: 7px; background: rgba(255, 255, 255, .16); }
.cnav.nv-blooms .nv-b { display: grid; place-items: center; width: 20px; align-self: stretch; color: inherit; }
.cnav.nv .nv-bud { display: block; flex: none; overflow: visible; color: #bfe8b0; --o: 0; transition: color .6s ease, scale .35s var(--ease); }
.cnav.nv .nv-bud g, .cnav.nv .nv-bud .r0 { transform-box: view-box; transform-origin: 7.5px 7.5px; }
.cnav.nv .nv-bud g { fill: currentColor; }
.cnav.nv .nv-bud .r0 { fill: var(--c0, currentColor); transition: fill .6s ease; }
.cnav.nv .nv-bud .r1 { transform: scale(calc(.74 + .26 * var(--o))); }
.cnav.nv .nv-bud .d { opacity: calc(var(--o) * 3); transform: scale(calc(.7 + .3 * var(--o))); }
.cnav.nv .nv-bud .r2 { opacity: calc(var(--o) * 2.2 - .35); transform: scale(calc(.45 + .55 * var(--o))); }
.cnav.nv .here .nv-bud { color: var(--chart); --c0: var(--white); --o: max(.16, var(--f, 0)); }
.cnav.nv .done .nv-bud { color: var(--white); --c0: var(--chart); --o: 1; }
.cnav.nv-blooms .nv-b.here .nv-bud { animation: nv-sway 5.5s ease-in-out infinite; }
.cnav.nv-blooms .nv-b:hover .nv-bud { scale: 1.22; }
@keyframes nv-sway { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }
.cnav.nv-blooms .nv-lock, .cnav.nv-vine .nv-lock { color: rgba(255, 255, 255, .55); }
.cnav.nv-blooms.drop .cnav-l a, .cnav.nv-vine.drop .cnav-l a { color: rgba(255, 255, 255, .56); font: 400 12px/1.35 var(--mono); letter-spacing: .02em; }
.cnav.nv-blooms.drop .cnav-l a.done, .cnav.nv-vine.drop .cnav-l a.done { color: rgba(255, 255, 255, .8); }
.cnav.nv-blooms.drop .cnav-l a:hover, .cnav.nv-blooms.drop .cnav-l a.here, .cnav.nv-vine.drop .cnav-l a:hover, .cnav.nv-vine.drop .cnav-l a.here { background: rgba(255, 255, 255, .09); color: var(--white); }
.cnav.nv-blooms.drop .cnav-l a:focus-visible, .cnav.nv-vine.drop .cnav-l a:focus-visible { outline-color: var(--chart); }
.cnav.nv .nv-m { position: relative; display: grid; place-items: center; flex: none; width: 15px; height: 15px; }
/* its name, under the blossom the mouse is on, in the petal of her cursor; it glides from one blossom to the next */
.cnav.nv-blooms .nv-tip { position: absolute; left: 0; top: calc(100% + 9px); z-index: 2; padding: 7px 11px 6px; border-radius: 999px; background: var(--chart); color: var(--navy);
  font-size: 11.5px; line-height: 1; letter-spacing: .01em; white-space: nowrap; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 6px 16px -6px rgba(0, 12, 60, .4);
  opacity: 0; transform: translateX(calc(var(--x, 0px) - 50%)) translateY(-4px); transition: opacity .2s ease, transform .4s var(--ease); }
.cnav.nv-blooms .nv-tip.on { opacity: 1; transform: translateX(calc(var(--x, 0px) - 50%)); }
.cnav.nv-blooms.open .nv-tip { opacity: 0; }

/* slash: the section as one of her commands, typed with a caret, and its place as 01 / 04; the list is a small command palette */
.cnav.nv-slash.drop .cnav-t { gap: 14px; padding: 0 12px 0 15px; font: 400 12.5px/1 var(--mono); letter-spacing: .02em; }
.cnav.nv-slash .nv-cmd { display: flex; align-items: center; flex: 0 1 calc(var(--qn, 16) * (1ch + .02em) + 6px); min-width: 0; overflow: hidden; white-space: nowrap; color: var(--ink); }
.cnav.nv-slash .nv-cmd b { flex: none; margin-right: 1px; font-weight: 400; color: var(--cobalt); }
.cnav.nv-slash .nv-q { overflow: hidden; }
.cnav.nv-slash .nv-caret { flex: none; width: 1.5px; height: 14px; margin-left: 1px; background: var(--ink); animation: caret 1.05s steps(1) infinite; }
.cnav.nv-slash.typing .nv-caret { animation: none; }
.cnav.nv-slash .nv-ct { flex: none; font-size: 11.5px; color: var(--muted); } .cnav.nv-slash .nv-ct b { font-weight: 400; color: var(--ink-2); }
.cnav.nv-slash.drop .cnav-l { padding: 6px; }
.cnav.nv-slash.drop .cnav-l a { gap: 12px; padding: 8px 10px 8px 14px; border-radius: 10px; font: 400 12.5px/1.3 var(--mono); letter-spacing: .02em; color: var(--muted); }
.cnav.nv-slash.drop .cnav-l a.done { color: var(--ink-2); }
.cnav.nv-slash.drop .cnav-l a.here { background: none; color: var(--ink); }
.cnav.nv-slash.drop .cnav-l a:hover, .cnav.nv-slash.drop .cnav-l a.act { background: var(--paper); color: var(--ink); }
.cnav.nv-slash.drop .cnav-l a:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.cnav.nv-slash .cnav-l a.here::before { content: ""; position: absolute; left: 5px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--chart); }
.cnav.nv-slash .cnav-l a.here .nv-n { color: var(--ink-2); }
.cnav.nv-slash .nv-s { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .cnav.nv-slash .nv-s b { margin-right: 1px; font-weight: 400; color: var(--cobalt); }
.cnav.nv-slash .nv-e { flex: none; color: var(--muted); opacity: 0; transition: opacity .15s ease; }
.cnav.nv-slash .cnav-l a.act .nv-e { opacity: 1; }
.cnav.nv-slash .nv-keys { display: flex; gap: 16px; margin: 0; padding: 9px 15px 11px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--muted); }
.cnav.nv-slash .nv-keys span { display: inline-flex; align-items: center; gap: 3px; } .cnav.nv-slash .nv-keys kbd:last-of-type { margin-right: 3px; }
.cnav.nv-slash kbd { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line); font: inherit; color: var(--ink-2); }
@media (hover: none) { .cnav.nv-slash .nv-keys { display: none; } }

/* inline: on a laptop every section's name, quiet, in the middle of the bar: the one you are in in ink with her petal dot gliding to
   it and a hairline under it filling as you read, read ones a softer ink. A compact pill on a phone, or wherever they don't fit. */
.cnav.nv-inline.nv-row.inbar { translate: calc(-50% + var(--dx, 0px)) 0; }
.cnav.nv-inline.nv-row.drop .cnav-in { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
.cnav.nv-inline.nv-row .nv-top { display: none; }
.cnav.nv-inline.nv-row .cnav-w, .cnav.nv-inline.nv-row .nv-wi { display: block; overflow: visible; box-shadow: none; }
.cnav.nv-inline.nv-row.drop .cnav-l { display: flex; gap: 2px; padding: 0; }
.cnav.nv-inline.nv-row.drop .cnav-l a { height: var(--nv-h); padding: 0 8px 0 19px; border-radius: 0; background: none; color: rgba(11, 13, 18, .4); white-space: nowrap; opacity: 1; translate: none; transition: color .35s ease; }
.cnav.nv-inline.nv-row.drop .cnav-l a.done { color: rgba(11, 13, 18, .66); }
.cnav.nv-inline.nv-row.drop .cnav-l a.here, .cnav.nv-inline.nv-row.drop .cnav-l a:hover { background: none; color: var(--ink); }
.cnav.nv-inline.nv-row.drop .cnav-l a:focus-visible { outline-offset: -5px; border-radius: 8px; }
.cnav.nv-inline.nv-row .cnav-l a::after { content: ""; position: absolute; left: 19px; right: 8px; bottom: 7px; height: 1px; background: currentColor; opacity: 0; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: opacity .35s ease; }
.cnav.nv-inline.nv-row .cnav-l a.here::after { opacity: .3; }
.cnav.nv-inline .nv-dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--chart); pointer-events: none; opacity: 0; transition: transform .6s var(--ease), opacity .35s ease; }
.cnav.nv-inline .nv-dot.on { opacity: 1; }
.cnav.nv-inline:not(.nv-row).drop .cnav-l a { padding-left: 29px; }
.cnav.nv-inline .nv-pd { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--chart); }
.cnav.nv-inline .nv-ct { flex: none; font: 400 11.5px/1 var(--mono); color: var(--muted); }

/* vine: under the name, a dotted vine in the style of her name tile grows as you read: a leaf unfurls at each section's end, and a
   blossom rides the growing tip. The list has it too, down its side: a leaf by each read section, the blossom by yours. */
.cnav.nv-vine.drop { --nv-h: 44px; }
.cnav.nv-vine.drop .cnav-t { flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; padding: 2px 15px 0; }
.cnav.nv-vine .nv-vine { position: relative; display: block; height: 14px; }
.cnav.nv-vine .nv-vine svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.cnav.nv-vine .nv-v0 { fill: rgba(255, 255, 255, .24); }
.cnav.nv-vine .nv-vg { position: absolute; inset: 0; clip-path: inset(-4px calc(100% - var(--vx, 0px)) -4px 0); } .cnav.nv-vine .nv-v1 { fill: var(--white); }
.cnav.nv-vine .nv-vl { fill: #bfe8b0; }
.cnav.nv-vine .nv-vl .lf { opacity: .3; transform: scale(.4); transition: transform .8s cubic-bezier(.34, 1.56, .64, 1), opacity .5s ease; }
.cnav.nv-vine .nv-vl .lf.on { opacity: 1; transform: none; }
.cnav.nv-vine .nv-tb { position: absolute; left: 0; top: 0; width: 10px; height: 10px; } .cnav.nv-vine .nv-tb svg { display: block; }
.cnav.nv-vine.drop .cnav-l a { padding-left: 37px; }
.cnav.nv-vine .cnav-l .nv-m { position: absolute; left: 13px; top: 50%; margin-top: -7.5px; }
.cnav.nv-vine .nv-vt { position: absolute; left: 19.5px; width: 2px; background: radial-gradient(circle, rgba(255, 255, 255, .26) .8px, transparent 1.1px) 0 0 / 2px 4px repeat-y; pointer-events: none; }
.cnav.nv-vine .nv-vf { position: absolute; left: 0; top: 0; width: 2px; height: var(--h, 0px); background: radial-gradient(circle, var(--white) .85px, transparent 1.15px) 0 0 / 2px 4px repeat-y; }
.cnav.nv-vine .nv-m > svg { grid-area: 1 / 1; display: none; overflow: visible; }
.cnav.nv-vine .nv-leaf { fill: #bfe8b0; }
.cnav.nv-vine .cnav-l a .nv-bud, .cnav.nv-vine .cnav-l a.done .nv-leaf, .cnav.nv-vine .cnav-l a.here .nv-flw { display: block; }
.cnav.nv-vine .cnav-l a.done .nv-bud, .cnav.nv-vine .cnav-l a.here .nv-bud { display: none; }
.cnav.nv-vine .cnav-l a .nv-bud { color: rgba(255, 255, 255, .42); --o: 0; scale: .85; }

/* ---------- five calmer blossom looks (Ru, Nov 10: "lets go in the blooms and vine direction but not have it look jumpy or off
   because of the section word length difference and positioning of the chevron ... i do like blooms a lot just not the
   jumpiness of it"): ?nav=bloom-row | bloom-caption | bloom-vine | bloom-label | vine-label. Each pill is one size for the whole
   case study: names get a slot as wide as the longest, blossoms a track as wide as six (fewer spread across it), the chevron
   never moves. A blossom opens in three eased stages through its section (data-st: 0 a bud ahead, 1 to 3 opening, 4 read), with
   no sway; the one you are in sits in a soft petal halo. ---------- */
.cnav.nv.calm .nv-bud .r1, .cnav.nv.calm .nv-bud .d, .cnav.nv.calm .nv-bud .r2 { transition: transform 1s cubic-bezier(.22, 1, .36, 1), opacity .8s ease; }
.cnav.nv.calm [data-st] .nv-bud { color: #bfe8b0; --c0: #bfe8b0; --o: 0; }
.cnav.nv.calm [data-st="1"] .nv-bud { color: var(--chart); --c0: var(--white); --o: .36; }
.cnav.nv.calm [data-st="2"] .nv-bud { color: var(--chart); --c0: var(--white); --o: .68; }
.cnav.nv.calm [data-st="3"] .nv-bud { color: var(--chart); --c0: var(--white); --o: 1; }
.cnav.nv.calm [data-st="4"] .nv-bud { color: var(--white); --c0: var(--chart); --o: 1; }
.cnav.nv.calm .nv-b { position: relative; }
.cnav.nv.calm .nv-b .nv-bud { position: relative; animation: none; }
.cnav.nv.calm .nv-b::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(247, 184, 201, .18);
  opacity: 0; transform: scale(.55); transition: opacity .7s ease, transform 1s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.cnav.nv.calm .nv-b.here::before { opacity: 1; transform: none; }
.cnav.nv.calm .nv-b:hover .nv-bud { scale: 1.14; }
.cnav.nv.calm.drop .cnav-t:focus-visible { outline: 2px solid var(--chart); outline-offset: -3px; }
/* a track the width of six blossoms, the blossoms spread evenly across it */
.cnav.nv-bloom-row .nv-bl, .cnav.nv-bloom-label .nv-bl { justify-content: space-evenly; width: calc(var(--slots, 6) * 21px + 14px); padding: 0 2px 0 8px; }
.cnav.nv-bloom-row .nv-bl::after, .cnav.nv-bloom-label .nv-bl::after, .cnav.nv-bloom-vine .nv-bl::after, .cnav.nv-bloom-caption .nv-bl::after { display: none; }
/* the chevron in a button of its own, after a hairline, always in the same place */
.cnav.nv-bloom-row.drop .cnav-t, .cnav.nv-bloom-vine.drop .cnav-t { flex: none; justify-content: center; width: 40px; padding: 0 2px 0 0; }
.cnav.nv-bloom-row .cnav-t::before, .cnav.nv-bloom-vine .cnav-t::before, .cnav.nv-bloom-label .cnav-t::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: rgba(255, 255, 255, .16); }
/* its name, under its blossom in the petal of her cursor, with a small point toward the blossom */
.cnav.nv .nv-tag { position: absolute; left: 0; top: calc(100% + 11px); z-index: 2; padding: 7px 11px 6px; border-radius: 999px; background: var(--chart); color: var(--navy); font-size: 11.5px; line-height: 1;
  letter-spacing: .01em; white-space: nowrap; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 6px 16px -6px rgba(0, 12, 60, .4);
  opacity: 0; transform: translate(var(--tx, 0px), -4px); transition: opacity .35s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.cnav.nv .nv-tag.on { opacity: 1; transform: translate(var(--tx, 0px), 0); }
.cnav.nv.open .nv-tag { opacity: 0; }
.cnav.nv .nv-tg { position: relative; display: block; }
.cnav.nv .nv-notch { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 1.5px; background: var(--chart); box-shadow: -1.5px -1.5px 0 0 rgba(255, 255, 255, .95);
  transform: translateX(calc(var(--nx, 20px) - 3.5px)) rotate(45deg); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.cnav.nv .nv-tag.snap, .cnav.nv .nv-tag.snap .nv-notch { transition: none; }

/* the list, as its own panel under the pill: it can be as wide as its longest row without the pill or its chevron moving */
.cnav.nv.calm.drop .cnav-w { position: absolute; left: 50%; top: calc(100% + 8px); z-index: 3; width: max-content; min-width: 100%; max-width: calc(100vw - 2 * var(--gut)); translate: -50% 0;
  border-radius: 18px; background: var(--cobalt); box-shadow: 0 16px 36px -16px rgba(0, 12, 60, .6), inset 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1), opacity .25s ease; }
.cnav.nv.calm.drop.open .cnav-w { opacity: 1; }
html.petal .cnav.nv.calm.drop .cnav-w { background: var(--navy); }
.cnav.nv.calm .nv-wi { box-shadow: none; }
.cnav.nv.calm.drop:not(.inbar) .cnav-w { left: auto; right: 0; translate: none; }
/* bloom-row: only the blossoms and the chevron; the name comes as a tag under its blossom when you arrive, then goes */
/* bloom-caption: a capsule, the blossoms over the name, which rolls in a slot as wide as the longest; the capsule is the button */
.cnav.nv-bloom-caption.drop { --nv-h: 46px; }
.cnav.nv-bloom-caption.drop .cnav-t { flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 1px 18px 0; transition: background-color .3s ease; }
.cnav.nv-bloom-caption.drop .cnav-t:hover { background: rgba(255, 255, 255, .05); }
.cnav.nv-bloom-caption .nv-bl { display: flex; justify-content: space-evenly; align-items: center; width: calc(var(--slots, 6) * 19px); height: 16px; padding: 0; }
.cnav.nv-bloom-caption .nv-b { width: 19px; height: 16px; }
.cnav.nv-bloom-caption .nv-lab { flex: none; width: max(var(--lw), calc(var(--slots, 6) * 19px)); max-width: calc(100vw - 2 * var(--gut) - 36px); height: 1.3em; line-height: 1.3em; text-align: center; font-size: 11.5px; }
/* bloom-vine: a dotted vine through a blossom per section, from end to end of a track six wide; it grows toward the next as you read */
.cnav.nv-bloom-vine { --bp: 12px; }
.cnav.nv-bloom-vine .nv-bl { position: relative; display: block; width: calc(var(--slots, 6) * 34px); padding: 0; }
.cnav.nv-bloom-vine.calm .nv-b { position: absolute; top: 50%; width: 20px; height: 24px; margin: -12px 0 0 -10px; z-index: 1; }
.cnav.nv-bloom-vine .nv-bvv { position: absolute; inset: 0; pointer-events: none; }
.cnav.nv-bloom-vine .nv-bvv svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.cnav.nv-bloom-vine .nv-v0 { fill: rgba(255, 255, 255, .24); }
.cnav.nv-bloom-vine .nv-vg { position: absolute; inset: 0; clip-path: inset(-6px calc(100% - var(--gx, 0px)) -6px 0); } .cnav.nv-bloom-vine .nv-v1 { fill: var(--white); }
.cnav.nv-bloom-vine .nv-vl { fill: #bfe8b0; }
.cnav.nv-bloom-vine .nv-vl .lf, .cnav.nv.calm .nv-vl .lf { opacity: .28; transform: scale(.45); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), opacity .8s ease; }
.cnav.nv-bloom-vine .nv-vl .lf.on, .cnav.nv.calm .nv-vl .lf.on { opacity: 1; transform: none; }
/* bloom-label: the blossoms, then the name centred in a slot as wide as the longest, then the chevron */
.cnav.nv-bloom-label.drop .cnav-t { flex: none; gap: 2px; padding: 0 13px 0 0; }
.cnav.nv-bloom-label .nv-lab { flex: none; width: min(calc(var(--lw) + 26px), calc(100vw - 2 * var(--gut) - var(--slots, 6) * 21px - 64px)); text-align: center; }
/* on a phone its blossoms sit closer, so the longest name still has room */
@media (max-width: 899.98px) {
  .cnav.nv-bloom-label .nv-bl { width: calc(var(--slots, 6) * 16px + 10px); padding: 0 0 0 6px; } .cnav.nv-bloom-label .nv-b { width: 16px; }
  .cnav.nv-bloom-label .nv-lab { width: min(calc(var(--lw) + 14px), calc(100vw - 2 * var(--gut) - var(--slots, 6) * 16px - 44px)); }
}
/* vine-label: the name centred over a growing dotted vine in a column as wide as the longest name, and a blossom that opens with the
   list in place of the chevron */
.cnav.nv-vine-label.drop .cnav-t { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 2px 14px 0 18px; }
.cnav.nv-vine-label .nv-col { display: flex; flex-direction: column; gap: 3px; flex: none; width: min(calc(var(--lw) + 12px), calc(100vw - 2 * var(--gut) - 64px)); }
.cnav.nv-vine-label .nv-col .nv-lab { flex: none; width: 100%; text-align: center; }
.cnav.nv-vine-label .nv-ctl { display: grid; place-items: center; flex: none; width: 18px; height: 18px; }
.cnav.nv-vine-label .nv-ctl .nv-bud { width: 16px; height: 16px; color: var(--chart); --c0: var(--white); --o: .42; transition: rotate .9s cubic-bezier(.22, 1, .36, 1), color .6s ease; }
.cnav.nv-vine-label .cnav-t:hover .nv-ctl .nv-bud { --o: .72; }
.cnav.nv-vine-label.open .nv-ctl .nv-bud { --o: 1; rotate: 45deg; }

@media (prefers-reduced-motion: reduce) {
  .cnav.nv.drop { transform: none; transition: opacity .2s ease; }
  .cnav.nv *, .cnav.nv *::before, .cnav.nv *::after { animation: none !important; transition: none !important; }
}
/* on a phone the floating section pill sits under the bar, so the opening starts below it */
body:has(.cnav.drop:not(.inbar)) .sh.v2 { padding-top: 112px; }
/* impact up front, under the title */
.sh-imp { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 64px); margin: clamp(10px, 1.4vw, 20px) 0 0; padding-top: clamp(16px, 1.6vw, 22px); border-top: 1px solid var(--line); }
.sh-imp div { display: grid; gap: 6px; }
.sh-imp.n dt { font: 450 clamp(30px, 3vw, 46px)/1 var(--sans); letter-spacing: -0.05em; color: var(--t-mid, var(--cobalt)); }
.sh-imp.n dd { margin: 0; font: 400 13px/1.35 var(--sans); color: var(--muted); }
.sh-imp.w dt { font: 400 11.5px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t-mid, var(--cobalt)); }
.sh-imp.w dd { margin: 0; font: 400 clamp(17px, 1.4vw, 21px)/1.3 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.sh.v2 { align-items: end; }
@media (max-width: 900px) { .sh-imp.n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sh-imp.n dt { font-size: clamp(24px, 7vw, 30px); } .sh-imp.n dd { font-size: 12px; } }
/* the opening, round 3 (Ru, Nov 6): the title runs the full width so its lines break where she sets them, then the results
   (or the first paragraph) on the left and the paragraph and facts on the right */
.sh.v3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: clamp(48px, 7vw, 112px) 0 clamp(36px, 4.4vw, 64px); }
.sh.v3 .kick { margin-bottom: 18px; font-size: 12.5px; color: var(--muted); }
.sh.v3 .sh-title { max-width: none; font-size: clamp(40px, 5.6vw, 92px); line-height: 1.0; text-wrap: initial; }
.sh.v3 .sh-title .ln { display: block; }
.sh-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 96px); align-items: start; margin-top: clamp(32px, 3.6vw, 52px); padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid var(--line); }
.sh.v3 .sh-side { display: grid; gap: 22px; }
.sh.v3 .sh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.sh.v3 .sh-facts dt { font: 400 11.5px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sh.v3 .sh-facts dd { margin: 6px 0 0; font: 400 14.5px/1.4 var(--sans); color: var(--ink); }
.sh.v3 .sh-lead > .sh-intro { font-size: clamp(17px, 1.35vw, 20px); max-width: 52ch; }
.sh-imp-k { margin: 0 0 14px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--t-mid, var(--cobalt)); }
.sh.v3 .sh-imp { margin: 0; padding: 0; border: 0; gap: 14px clamp(28px, 4vw, 72px); }
.sh.v3 .sh-imp.n dt { font-size: clamp(40px, 4.4vw, 68px); }
.sh.v3 .sh-imp.n dd { font-size: 14px; }
body:has(.cnav.drop:not(.inbar)) .sh.v3 { padding-top: 112px; }
@media (max-width: 900px) { .sh.v3 .sh-title .ln { display: inline; } .sh-row { grid-template-columns: minmax(0, 1fr); } .sh.v3 .sh-imp.n dt { font-size: clamp(26px, 7.4vw, 34px); } .sh.v3 .sh-imp.n dd { font-size: 12px; } }
/* visual first: a small label, then the film sized so it fills the first screen under the bar, the title just below the fold */
.vf-k { margin: clamp(22px, 2.6vw, 36px) 0 14px; font-size: 12.5px; color: var(--muted); }
.tile.hero.bleed.vf { padding: clamp(20px, 2.6vw, 40px) var(--gut); }
.tile.hero.bleed.vf .frame { width: min(100%, calc((100svh - 190px) * 16 / 9)); }
.sh.v3.after { padding-top: clamp(40px, 5vw, 80px); }
body:has(.cnav.drop:not(.inbar)) .vf-k { margin-top: 96px; }
body:has(.cnav.drop:not(.inbar)) .sh.v3.after { padding-top: clamp(40px, 5vw, 80px); }
/* the full-size view */
.vis.zoom { cursor: zoom-in; }
.zoomv { position: fixed; inset: 0; z-index: 120; background: rgba(0, 10, 40, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: auto; opacity: 0; transition: opacity .3s ease; cursor: zoom-out; }
.zoomv.on { opacity: 1; }
.zoomv-in { display: grid; justify-items: center; padding: 64px 16px 48px; }
.zoomv-in img { width: min(1700px, 100%); height: auto; border-radius: 12px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }
.zoomv-x { position: fixed; top: 16px; right: 16px; z-index: 1; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 12.5px; cursor: pointer; }
@media (max-width: 760px) { .zoomv-in { padding: 60px 0 40px; } .zoomv-in img { width: 220vw; max-width: none; border-radius: 0; } .zoomv-in { justify-items: start; } }
/* the case study title, a size down (Ru, Nov 6: "minimize the size of the case study name a bit its too loud") */
.sh.v3 .sh-title { font-size: clamp(32px, 3.9vw, 62px); line-height: 1.04; letter-spacing: -0.04em; }
/* ---------- the results card (Ru, Nov 6, after Bradley Ziffer's Acorns metrics) ---------- */
.mx { display: grid; gap: 12px; margin-top: clamp(32px, 3.6vw, 52px); }
.mx-q { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 22px; border: 1px solid rgba(11, 13, 18, .14); border-radius: 18px; background: var(--white); font-size: clamp(17px, 1.5vw, 22px); color: var(--ink); }
.mx-q .sl { color: var(--t-mid, var(--cobalt)); }
.mx-card { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)) minmax(0, .82fr); border: 1px solid rgba(11, 13, 18, .14); border-radius: 22px; background: var(--white); overflow: hidden; }
.mx-card:not(:has(.mx-art)) { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.mx-c { display: grid; grid-template-rows: auto auto 1fr auto; align-content: stretch; gap: 12px; padding: clamp(22px, 2.4vw, 34px); border-right: 1px solid rgba(11, 13, 18, .1); }
.mx-c:last-of-type:not(:has(+ .mx-art)) { border-right: 0; }
.mx-tag { justify-self: start; padding: 7px 14px 6px; border-radius: 999px; font: 500 13px/1 var(--sans); letter-spacing: -0.01em; border: 1px solid rgba(3, 38, 22, .16); }
.mx-tag:empty { display: none; }
.mx-tag.t0 { background: var(--t-bright, #2bc947); color: var(--t-deep, #032616); border-color: transparent; }
.mx-tag.t1 { background: var(--t-pale, #e3ece0); color: var(--t-deep, #032616); }
.mx-tag.t2 { background: var(--t-deep, #032616); color: var(--white); border-color: transparent; }
.mx-n { margin: 6px 0 0; font: 450 clamp(46px, 5vw, 84px)/.95 var(--sans); letter-spacing: -0.055em; color: var(--t-deep, var(--ink)); font-variant-numeric: tabular-nums; }
.mx-l { margin: 0; font: 400 15px/1.35 var(--sans); color: var(--ink-2); }
.mx-w { margin: 4px 0 0; font: 400 clamp(22px, 2vw, 30px)/1.2 var(--sans); letter-spacing: -0.03em; color: var(--t-deep, var(--ink)); text-wrap: balance; }
/* figures are proportional at rest; equal-width digits only while they count, so the line does not shiver */
.mx-n { font-variant-numeric: normal; }
.mx-v { display: block; margin-top: 18px; align-self: end; }
.mx-key { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .02em; color: var(--muted); }
/* dots: a dot per percent (ten by ten), or a column per minute with a dot per ten seconds; they light in order */
.mx-dots { display: grid; grid-auto-flow: column; grid-template-rows: repeat(10, 7px); grid-auto-columns: 7px; gap: 5px; justify-content: start; }
.mx-dots.t { grid-template-rows: repeat(6, 7px); }
.mx-dots i { border-radius: 50%; background: var(--t-pale, #e3ece0); }
.mx-dots i.on { transition: background-color .25s ease calc(.25s + var(--i) * 11ms), scale .25s ease calc(.25s + var(--i) * 11ms); }
.mx.in .mx-dots i.on { background: var(--t-bright, #2bc947); }
.mx-dots.t i.on { transition-delay: calc(.25s + var(--i) * 26ms); }
/* blocks: each result is its own colour, the first the brightest */
.v-blocks .mx-card { border-color: transparent; }
.v-blocks .mx-c { border-right: 0; }
.v-blocks .bk-bright { background: var(--t-bright, #2bc947); }
.v-blocks .bk-pale { background: var(--t-pale, #e3ece0); }
.v-blocks .bk-deep { background: var(--t-deep, #032616); }
.v-blocks .bk-deep .mx-n, .v-blocks .bk-deep .mx-w { color: var(--white); } .v-blocks .bk-deep .mx-l { color: rgba(255, 255, 255, .78); }
.v-blocks .bk-bright .mx-l { color: var(--t-deep, #032616); }
.v-blocks .mx-tag { background: rgba(255, 255, 255, .6) !important; color: var(--t-deep, #032616) !important; border-color: transparent !important; }
.v-blocks .bk-deep .mx-tag { background: rgba(255, 255, 255, .14) !important; color: var(--white) !important; }
/* the blocks arrive one after another as the card rises, then the screen settles in beside them (Ru: "make sure the motion is
   clean"): one soft fade and lift each, no bounce, nothing that changes the figures' shape */
.v-blocks .mx-c > *, .v-blocks .mx-art img { opacity: 0; translate: 0 10px; transition: opacity .6s var(--ease), translate .7s var(--ease); transition-delay: calc(.12s + var(--i, 0) * 90ms); }
.v-blocks .mx-art img { translate: -50% 18px; transition: opacity .7s var(--ease), translate .9s var(--ease), rotate .6s cubic-bezier(.2, .7, .2, 1), top .6s cubic-bezier(.2, .7, .2, 1); transition-delay: .38s, .38s, 0s, 0s; }
.v-blocks.in .mx-c > * { opacity: 1; translate: none; }
.v-blocks.in .mx-art img { opacity: 1; translate: -50% 0; }
@media (prefers-reduced-motion: reduce) { .v-blocks .mx-c > *, .v-blocks .mx-art img { opacity: 1; transition: none; } .v-blocks .mx-c > * { translate: none; } .v-blocks .mx-art img { translate: -50% 0; } }
.v-blocks .mx-art { background-color: var(--white); }
/* lead: the qualified conversion leads, large; the other two sit beside it */
@media (min-width: 901px) {
  .v-lead .mx-card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); grid-template-rows: auto auto; }
  .v-lead .mx-c:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .v-lead .mx-c:nth-child(2) { grid-column: 2; grid-row: 1; border-bottom: 1px solid rgba(11, 13, 18, .1); }
  .v-lead .mx-c:nth-child(3) { grid-column: 2; grid-row: 2; border-right: 1px solid rgba(11, 13, 18, .1); }
  .v-lead .mx-art { grid-column: 3; grid-row: 1 / 3; }
  .v-lead .mx-c:nth-child(1) .mx-n { font-size: clamp(96px, 10vw, 168px); letter-spacing: -0.065em; margin-top: auto; }
  .v-lead .mx-c:nth-child(1) { grid-template-rows: auto 1fr auto; }
  .v-lead .mx-c:nth-child(1) .mx-n { align-self: end; } .v-lead .mx-c:nth-child(1) .mx-l { font-size: 17px; }
  .v-lead .mx-c:not(:nth-child(1)) { grid-template-rows: auto auto auto; padding-block: clamp(18px, 2vw, 26px); }
  .v-lead .mx-c:not(:nth-child(1)) .mx-n { font-size: clamp(36px, 3.4vw, 56px); }
}
/* garden: a pixel sprout in the corner of each result, standing on the card's bottom edge */
.v-garden .mx-c { position: relative; min-height: 270px; }
.v-garden .mx-c > .mx-n, .v-garden .mx-c > .mx-l { position: relative; z-index: 1; }
.mx-plant { position: absolute; right: clamp(16px, 2vw, 30px); bottom: 0; display: grid; justify-items: center; }
.mx-plant svg { display: block; width: 64px; height: auto; overflow: visible; }
.mx-plant .grow { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s steps(17, end) .3s; }
.mx.in .mx-plant .grow { clip-path: inset(0 0 0 0); }
.mx-plant .ceil { stroke: rgba(3, 38, 22, .32); stroke-width: 1.5; stroke-dasharray: 1.5 4; }
.mx-plant .mx-key { position: absolute; right: calc(100% + 8px); bottom: 10px; margin: 0; white-space: nowrap; }
/* her real screen, tilted, running off the bottom of the card */
.mx-art { position: relative; min-height: 220px; overflow: hidden; background: var(--t-pale, #e3ece0); background-image: radial-gradient(circle, rgba(3, 38, 22, .12) 1px, transparent 1.4px); background-size: 14px 14px; }
.mx-art img { position: absolute; left: 50%; top: 18%; width: 62%; max-width: 230px; translate: -50% 0; rotate: -7deg; filter: drop-shadow(0 22px 30px rgba(3, 38, 22, .28)); transition: rotate .6s cubic-bezier(.2, .7, .2, 1), top .6s cubic-bezier(.2, .7, .2, 1); }
.mx-card:hover .mx-art img { rotate: -3deg; top: 12%; }
@media (max-width: 900px) {
  .mx-card { grid-template-columns: minmax(0, 1fr) !important; }
  .mx-c { border-right: 0; border-bottom: 1px solid rgba(11, 13, 18, .1); grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .mx-c > .mx-tag, .mx-c > .mx-n, .mx-c > .mx-l { grid-column: 1; } .mx-c > .mx-v { grid-column: 2; grid-row: 2 / 4; align-self: center; }
  .mx-n { font-size: clamp(40px, 12vw, 56px); } .mx-art { min-height: 260px; } .mx-art img { width: 46%; }
}
@media (prefers-reduced-motion: reduce) { .mx-dots i, .mx-plant .grow { transition: none !important; } }
/* a caption that stays on one line where it fits (Ru, Nov 6: "make this one line no wrap"); it wraps only on phones */
.vcap.one { max-width: none; white-space: nowrap; }
@media (max-width: 760px) { .vcap.one { white-space: normal; } }
/* the three kiosk screens say which is which (Ru, Nov 6: "we need to make more obvious what screens these are"): her caption as a
   white pill above each kiosk, slash and name in lowercase, without the numbers the sections carry (Ru: "let's do this but without
   the numbers"), so it names the screen without reading as a section of its own */
.vw:has(> .vis.kiosk) { display: flex; flex-direction: column; }
.vis.kiosk + .vcap { order: -1; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; max-width: none; margin: 0 0 12px; padding: 6px 13px 5px;
  border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font: 400 13.5px/1.2 var(--mono); color: var(--ink); text-transform: lowercase; }
.vis.kiosk + .vcap::before { content: "/"; color: var(--cobalt); }
/* the same pill above any picture: before and after on ADID (Ru, Nov 6: "have it say before and after like in this white pill format") */
.vpill { display: flex; align-items: center; gap: 7px; width: max-content; max-width: 100%; margin: 0 0 12px; padding: 6px 13px 5px;
  border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font: 400 13.5px/1.2 var(--mono); color: var(--ink); text-transform: lowercase; }
.vpill::before { content: "/"; color: var(--cobalt); }
@media (max-width: 900px) { .v-garden .mx-c { min-height: 190px; } .v-blocks .mx-c { border-bottom: 0; } }
/* one line above the intro and facts, not two (Ru, Nov 6: "get rid of this double line") */
.sh.v3 .sh-facts { border-top: 0; padding-top: 0; }
/* the results header is a section pill now, sitting on the card like the others sit on their sections */
.mx { gap: 0; } .mx .mx-ask { justify-self: start; }
/* garden: the label keeps clear of the sprout where cells are narrow, and the figure never breaks */
.v-garden .mx-l { padding-right: 84px; } .v-garden .mx-n { white-space: nowrap; }
/* her screen sits higher in the art block, so more of it shows (Ru, Nov 6: "show more of this screen, have it sit higher") */
.mx-art img { top: 10%; max-width: 200px; }
.mx-card:hover .mx-art img { top: 7%; }
@media (max-width: 900px) { .mx-art { min-height: 300px; } .mx-art img { top: 8%; } }
/* the password field in the locked section (Ru, Nov 6) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; max-width: 520px; }
.lk-f { position: relative; flex: 1 1 240px; display: flex; }
.lk-f input { width: 100%; height: 48px; padding: 0 46px 0 18px; border: 1px solid rgba(11, 13, 18, .16); border-radius: 999px; background: var(--white); font: 400 16px/1 var(--sans); color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; }
.lk-f input::placeholder { color: var(--muted); }
.lk-f input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(0, 26, 120, .14); }
.lk-eye { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.lk-eye svg { width: 18px; height: 18px; } .lk-eye[aria-pressed="true"] { color: var(--cobalt); } .lk-eye:focus-visible { outline: 2px solid var(--cobalt); }
.lk-go { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--cobalt); color: var(--white); font: 500 14px/1 var(--mono); cursor: pointer; transition: background-color .2s ease, opacity .2s ease; }
.lk-go:hover { background: var(--navy, #000c3c); } .lk-go:focus-visible { outline: 2px solid var(--chart); outline-offset: 2px; }
.lk.busy .lk-go { opacity: .6; pointer-events: none; }
.lk.no { animation: lk-no .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes lk-no { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.lk-msg { min-height: 1.4em; margin: 10px 0 0; font: 400 13px/1.4 var(--mono); color: var(--muted); }
.lk-help { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 400 13px/1.4 var(--mono); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--chart); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* the padlock on the button, in dots: its shackle peeks on hover and opens when the password is right */
.lk-ic { flex: none; width: 13px; height: 16px; margin-top: -2px; overflow: visible; }
.lk-ic .lk-sh { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .55s var(--ease); }
.lk-go:hover .lk-ic .lk-sh { transform: translateY(-1px); }
.lk.open .lk-go { background: var(--chart); color: var(--navy); transition: background-color .45s ease, color .45s ease; }
.lk.open .lk-ic .lk-sh { transform: translateY(-2.8px) rotate(-18deg); }
/* cascade: the field turns into a command pill and types /unlocked */
.lk.cmd .lk-f input { color: transparent; caret-color: transparent; border-color: var(--line); box-shadow: none; transition: color .2s ease, border-color .4s ease; }
.lk.cmd .lk-f input::placeholder { color: transparent; }
.lk.cmd .lk-eye { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.lk.cmd + .lk-msg { opacity: 0; transition: opacity .3s ease; }   /* the pill says it; the status still tells a screen reader */
.lk-go { white-space: nowrap; }
.lk-cmd { position: absolute; left: 0; top: 0; bottom: 0; display: inline-flex; align-items: center; gap: 5px; padding: 0 14px; white-space: nowrap; font: 400 13px/1 var(--mono); color: var(--ink-2); opacity: 0; pointer-events: none; }
.lk.cmd .lk-cmd { opacity: 1; transition: opacity .35s ease .3s; }
.lk-cmd .sl { color: var(--cobalt); } .lk-cmd .q { min-width: 1px; }
.lk-cmd .ent { color: var(--muted); font-size: 11px; opacity: 0; transition: opacity .3s ease, color .3s ease; }
.lk-cmd.sent .ent { opacity: 1; color: var(--cobalt); }
@media (prefers-reduced-motion: reduce) { .lk.no { animation: none; } .lk-ic .lk-sh, .lk.open .lk-go { transition: none; } }
/* ---------- the lock as one card across the row (Ru, Nov 6: the password section should "fit well"): the loan's own pale,
   dotted like its other panels, at the tile radius; her pill and line on the left, the field, Unlock and the email link on the
   right, centred; stacked under 900px ---------- */
.lk-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); align-items: center; gap: 22px clamp(32px, 5vw, 88px); padding: clamp(22px, 3.4vw, 52px);
  border-radius: var(--r); color: var(--t-deep, #032616); background: radial-gradient(circle, rgba(3, 38, 22, .1) 1.1px, transparent 1.6px) center / 16px 16px, var(--t-pale, #e3ece0); }
.lk-l { display: grid; justify-items: start; }
.lk-l .ask { margin-bottom: clamp(12px, 1.2vw, 16px); }
.lk-l .h3 { max-width: 30ch; font-size: clamp(22px, 1.9vw, 30px); text-wrap: balance; color: var(--t-deep, #032616); }
.lk-r { display: grid; align-content: center; min-width: 0; }
.lk-card .lk { margin: 0; max-width: none; }
/* the status line takes no room until there's a problem to say, then one line between the field and the link */
.lk-msg { min-height: 0; margin: 0; line-height: 18px; }
.lk-msg:not(:empty):not(.vh) { margin-top: 8px; color: var(--ink-2); }
.lk-card .lk-help { justify-self: start; margin-top: 13px; }
.lk-msg:not(:empty):not(.vh) + .lk-help { margin-top: 6px; }
/* the eye: a 44px target, drawn the same */
.lk-f input { padding-right: 50px; }
.lk-eye { right: 2px; width: 44px; height: 44px; }
.lk-eye svg { width: 18px; height: 18px; }
@media (max-width: 899px) { .lk-card { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; } }
/* where the field and Unlock would no longer fit on one row, Unlock takes a row of its own, full width */
@media (max-width: 470px) { .lk-card .lk-f { flex: 1 1 100%; } .lk-card .lk-go { flex: 1 1 100%; justify-content: center; } }

/* ---------- the unlocked sections (Ru, Nov 6: "what shows up for the loan app"): numbered on from the lock, each block rising in
   as it arrives, a little slower than the rest so the moment reads ---------- */
.lk-sec:focus { outline: none; }
.lk-sec .rise { translate: 0 18px; transition-duration: .95s, .95s; }
.lk-sec .rise.in, .lk-sec .rise.fade { translate: none; }
.lk-sec .ask { margin-bottom: clamp(12px, 1.2vw, 16px); }
/* the full flow: step tabs as the site's pills, the step showing in cobalt with a petal line filling as it plays, its title
   and line, then its film large on the film's own dark green */
.fl { display: grid; gap: clamp(18px, 2vw, 28px); }
.fl-tabs { position: relative; display: flex; gap: 8px; padding: 4px 0; margin: -4px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fl-tabs::-webkit-scrollbar { display: none; }
.fl-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 9px 13px; border: 0; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2); font: 400 13px/1.2 var(--mono); letter-spacing: .02em; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.fl-tab .n { color: var(--muted); transition: color .45s var(--ease); }
.fl-tab:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11, 13, 18, .24); }
.fl-tab[aria-selected="true"], .fl-tab[aria-current="step"] { background: var(--cobalt); color: var(--white); box-shadow: none; }
.fl-tab[aria-selected="true"] .n, .fl-tab[aria-current="step"] .n { color: var(--chart); }
.fl-tab:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.fl-pg { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--chart); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: 0; transition: opacity .3s ease; }
.fl.auto .fl-tab[aria-selected="true"] .fl-pg { opacity: 1; }
.fl-copy { display: grid; }
.fl-p { grid-area: 1 / 1; display: grid; gap: 12px; align-content: start; opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity .45s ease, translate .6s var(--ease), visibility 0s linear .45s; }
.fl-p.on { opacity: 1; visibility: visible; translate: none; transition: opacity .8s var(--ease) .18s, translate 1s var(--ease) .18s, visibility 0s; }
.fl-p .h3 { max-width: 34ch; font-size: clamp(22px, 1.9vw, 30px); text-wrap: balance; }
.fl-p p { max-width: 62ch; font: 400 clamp(16px, 1.2vw, 18px)/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
/* the whole film always shows: as large as the column allows, held to the screen's height, its own green filling either side */
.fl-stage { position: relative; width: 100%; overflow: hidden; border-radius: 18px; background: var(--bg, #001308); aspect-ratio: 16 / 9; max-height: max(300px, calc(100svh - 220px)); }
.fl-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s linear .9s; }
.fl-stage video.on { opacity: 1; visibility: visible; transition: opacity .9s var(--ease), visibility 0s; }
/* the film's own edges melt into the stage, so no seam shows where it meets the green (its phone sits in the middle quarter) */
.fl-stage video { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
/* on a phone held upright the film's empty green margins are trimmed, so the phone in it reads large; the phone itself (the
   middle quarter of the frame) always shows whole */
@media (max-width: 700px) and (orientation: portrait) { .fl-stage { aspect-ratio: 4 / 5; max-height: none; } .fl-stage video { object-fit: cover; } }
@media (max-width: 700px) {
  .fl-tabs { margin: -4px calc(-1 * var(--gut)); padding: 4px var(--gut); scroll-padding: 0 var(--gut);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gut), #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gut), #000 calc(100% - 28px), transparent); }
  .fl-tabs::after { content: ""; flex: none; width: 12px; }
  .fl-tab { padding: 9px 14px 8px 12px; font-size: 12.5px; }
}
/* the full flow as one film, its steps as chapters: the step playing is the filled pill, its petal line filling as the film
   goes through it. The film is the phone alone on the films' own green (the stage draws the rest of the green), as tall as
   the screen allows, so the phone reads large and always shows whole; its edges melt into the stage */
.fl-one .fl-tab[aria-current="step"] .fl-pg { opacity: 1; }
.fl-one .fl-stage { display: flex; justify-content: center; align-items: center; aspect-ratio: auto; height: clamp(300px, calc(100svh - 220px), 860px); max-height: none; }
.fl-one .fl-stage video { position: static; inset: auto; display: block; width: auto; height: 100%; max-width: 100%; aspect-ratio: var(--ar, .5); object-fit: contain;
  opacity: 1; visibility: visible; transition: none; background: var(--bg, #08160a);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect; }
/* on a phone the stage is upright and as tall as the screen, less the bar and the section pill above it */
@media (max-width: 700px) { .fl-one .fl-stage { height: min(calc(100svh - 112px), calc((100vw - 2 * var(--gut)) * 1.62)); } }
/* flow decisions and tradeoffs: her paragraphs, each followed by its pictures */
.lk-body > * + * { margin-top: clamp(18px, 2vw, 28px); }
.lk-body > .lk-p + .lk-p { margin-top: .9em; }
.lk-body > .fd-pair + .lk-p { margin-top: clamp(44px, 5.4vw, 84px); }
.lk-p { max-width: 64ch; margin: 0; font: 400 clamp(17px, 1.3vw, 20px)/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
/* a pair of phone screens side by side on the loan films' dark green, like every other locked screen (Ru, Nov 10: "i wanna
   make sure they all look consistent"); each whole, as tall as the screen allows on a laptop and as wide as half the panel on a phone */
.fd-pair { --g: clamp(10px, 3.4vw, 56px); --ph: min(74svh, 680px); display: flex; justify-content: center; align-items: flex-start; gap: var(--g);
  padding: clamp(18px, 3.6vw, 56px) clamp(12px, 3.6vw, 56px); border-radius: 18px;
  background: #001308; }
.fd-pair img { flex: none; display: block; width: min(calc((100% - var(--g)) / 2), calc(var(--ph) * var(--a))); height: auto; aspect-ratio: var(--a); object-fit: contain; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .35)); }
.lk-wide .m img { object-fit: contain; }
.lk-body > .lk-p + .lk-wide { margin-top: clamp(28px, 3.4vw, 48px); }
@media (prefers-reduced-motion: reduce) { .lk-sec .rise { translate: none; } .fl-tab, .fl-p, .fl-p.on, .fl-stage video, .fl-stage video.on { transition: none; } }
/* bloom: what draws over the card while it turns into the sections (in page coordinates, so it scrolls with the page) */
.ul-ov { position: absolute; z-index: 20; pointer-events: none; }
.ul-ov canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ul-fl { position: absolute; } .ul-fl svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ul-fl circle { transform-box: fill-box; transform-origin: center; }
/* a mark on a picture: a petal outline with its name, drawn in as the section arrives */
.mkb { position: absolute; z-index: 2; border: 2.5px solid var(--chart); border-radius: 12px; box-shadow: 0 0 0 5px rgba(247, 184, 201, .28), 0 0 24px rgba(247, 184, 201, .45);
  opacity: 0; scale: .92; transition: opacity .6s var(--ease) calc(.5s + var(--md, 0s)), scale .8s var(--ease) calc(.5s + var(--md, 0s)); pointer-events: none; }
.mkb-l { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; padding: 6px 11px 5px; border-radius: 999px; background: var(--chart); color: var(--navy, #000c3c); font: 500 12px/1 var(--mono); white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 12, 60, .25); }
.mkb-l:empty { display: none; }
.sx.in .mkb { opacity: 1; scale: 1; animation: mkb-breathe 3.2s ease-in-out 1.6s infinite; }
@keyframes mkb-breathe { 50% { box-shadow: 0 0 0 9px rgba(247, 184, 201, .12), 0 0 34px rgba(247, 184, 201, .55); } }
@media (prefers-reduced-motion: reduce) { .mkb { transition: none; } .sx.in .mkb { animation: none; } }
/* kiosk screens in their shell: three kiosks standing on a pale panel, each screen playing in its hole */
.vis.kiosk { padding: clamp(18px, 2.4vw, 36px) clamp(18px, 2.4vw, 40px) 0; }
.vis.kiosk .m { max-height: none; }
.vis.kiosk .m > .ks-scr { inset: auto; position: absolute; overflow: hidden; background: #111; }
.vis.kiosk .m > .ks-scr > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vis.kiosk .m > .ks-shell { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mkb.sl .mkb-l { left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; translate: 0 -50%; }
.mkb.sr .mkb-l { left: calc(100% + 8px); bottom: auto; top: 50%; translate: 0 -50%; }
/* a row of pictures at one height, each as wide as its shape */
.sx-v .vrow { grid-column: 1 / -1; display: flex; gap: var(--gap); align-items: flex-start; min-width: 0; }
.sx-v .vrow > .vw { min-width: 0; }
.sx-v .vrow .vis.tall .m { max-height: none; }
@media (max-width: 700px) { .sx-v .vrow { flex-direction: column; } .sx-v .vrow > .vw { flex: none !important; width: 100%; } }
/* a case study can set its results blocks in its own colours (THEMES[...].blocks); without them the theme colours stand */
.v-blocks .bk-bright { background: var(--bk1, var(--t-bright, #2bc947)); }
.v-blocks .bk-pale { background: var(--bk2, var(--t-pale, #e3ece0)); }
.v-blocks .bk-deep { background: var(--bk3, var(--t-deep, #032616)); }
.v-blocks .bk-bright .mx-n, .v-blocks .bk-bright .mx-w { color: var(--bk1n, var(--t-deep, #032616)); } .v-blocks .bk-bright .mx-l { color: var(--bk1l, var(--t-deep, #032616)); }
.v-blocks .bk-pale .mx-n, .v-blocks .bk-pale .mx-w { color: var(--bk2n, var(--t-deep, #032616)); } .v-blocks .bk-pale .mx-l { color: var(--bk2l, var(--ink-2)); }
.v-blocks .bk-deep .mx-n, .v-blocks .bk-deep .mx-w { color: var(--bk3n, var(--white)); } .v-blocks .bk-deep .mx-l { color: var(--bk3l, rgba(255, 255, 255, .78)); }
.v-blocks .bk-bright .mx-tag { background: var(--bk1tb, rgba(255, 255, 255, .6)) !important; color: var(--bk1ti, var(--t-deep, #032616)) !important; }
.v-blocks .bk-pale .mx-tag { background: var(--bk2tb, rgba(255, 255, 255, .6)) !important; color: var(--bk2ti, var(--t-deep, #032616)) !important; }
.v-blocks .bk-deep .mx-tag { background: var(--bk3tb, rgba(255, 255, 255, .14)) !important; color: var(--bk3ti, var(--white)) !important; }
/* a mark's label above its outline, held to one side so two side-by-side marks never meet */
.mkb.sar .mkb-l { left: auto; right: -2px; translate: none; } .mkb.sal .mkb-l { left: -2px; translate: none; }

/* phones: the section pill sits in a band of the bar's paper, joined to the bar, so text scrolls under a clean header rather than
   showing around the floating pill (Ru, Nov 6: "let's see the phone version of this too and finalize that first"); the hairline
   moves to the band's lower edge; the open list still drops over the page */
@media (max-width: 899.98px) {
  body:has(.cnav.drop:not(.inbar):not(.rail)) .bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--band-h, 62px);
    background: var(--paper); box-shadow: 0 1px 0 var(--line); pointer-events: none; }
  body:has(.cnav.drop:not(.inbar):not(.rail)) .bar.scrolled { box-shadow: none; }
}
@media (hover: none), (max-width: 899.98px) { .lk-help { position: relative; } .lk-help::after { content: ""; position: absolute; inset: -13px -4px; } }

/* phones: the results read at a glance and take a third of the height (Ru, Nov 6: "on mobile get rid of this so this section
   doesn't consume too much ... how do we make this smaller"): no picture beside the numbers, and each block is one compact row,
   the number with its tag at the right and the line under it */
@media (max-width: 900px) {
  .mx-card .mx-art { display: none; }
  .v-blocks .mx-c { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; padding: 16px 18px 17px; }
  .v-blocks .mx-c > .mx-tag { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; padding: 5px 11px 4px; font-size: 12px; }
  .v-blocks .mx-c > .mx-n, .v-blocks .mx-c > .mx-w { grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(32px, 9.5vw, 42px); }
  .v-blocks .mx-c > .mx-l { grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 1.3; text-wrap: balance; }
}

/* a group of pictures that opens one place (Ru, Nov 8: the ADID kiosk design films, "group the kiosk design videos and have it
   be labelled and then the cursor will say check out in figma"): one white frame, the label in the white pill, a 2 by 2 grid */
.vgroup { display: block; padding: 14px; border-radius: calc(var(--r) + 6px); background: var(--white); box-shadow: 0 0 0 1px var(--line); color: inherit; text-decoration: none;
  transition: box-shadow .35s var(--ease), translate .35s var(--ease); }
.vgroup:hover, .vgroup:focus-visible { box-shadow: 0 0 0 1px var(--t-mid, var(--cobalt)), 0 16px 40px rgba(11, 13, 18, .08); translate: 0 -2px; }
.vgroup .vpill { margin: 2px 0 14px 2px; box-shadow: 0 0 0 1px var(--line); }
.vgroup .vg-ar { color: var(--cobalt); transition: translate .3s var(--ease); } .vgroup:hover .vg-ar { translate: 2px -2px; }
.vg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vg-grid .vcap { margin-top: 8px; }
@media (max-width: 560px) { .vgroup { padding: 8px; } .vg-grid { gap: 8px; } .vgroup .vpill { margin-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .vgroup, .vgroup .vg-ar { transition: none; } .vgroup:hover { translate: none; } }

/* on a phone, a picture with empty ground beside its subject fills a taller card (Ru, Nov 8, after Bradley Ziffer's Acorns) */
@media (max-width: 560px) { .vis.ph-fill .m { aspect-ratio: var(--par); } .vis.ph-fill .m > * { object-fit: cover !important; object-position: var(--pox) 50% !important; }
  /* the kiosk design group: one film a row, so each reads */
  .vg-grid { grid-template-columns: minmax(0, 1fr); } }

/* the case study in a narrower column, the size of Bradley Ziffer's Acorns page (Ru, Nov 8: "i still see the images and content
   at full width size ... decrease the size a bit"): text and pictures stop at 1248px and sit centred; the opening film's dark
   band still runs edge to edge, its film held to the same width */
/* (Ru, Nov 9: "blow up the images a bit more like 15% more for the case studies"): 1248 to 1435px, never closer than 28px more
   than the page gutter to the window's edge, so it is larger on every laptop and still never full width */
.cs { --colw: 1435px; }
.cs > :not(.tile.hero.bleed) { max-width: min(var(--colw), max(100% - 56px, min(1248px, 100%))); margin-inline: auto; }   /* never smaller than before */
.cs .tile.hero.bleed .frame { max-width: var(--colw); }
/* a section's line above its paragraph (the loan's Overview): the same type as every section's line */
.sx-line { max-width: 30ch; margin: 0 0 16px; font-size: clamp(24px, 2.3vw, 36px); text-wrap: balance; }

/* the results card, shorter on a laptop (Ru, Nov 8: "lets reduce the height of this"): tighter blocks, a smaller number and tag,
   and the picture beside them no longer sets a tall minimum; phones keep their compact rows */
@media (min-width: 901px) {
  .mx-c { gap: 8px; padding: clamp(18px, 1.7vw, 24px) clamp(20px, 2vw, 28px); }
  .mx-n { margin: 0; font-size: clamp(38px, 3.5vw, 58px); }
  .mx-tag { padding: 5px 11px 4px; font-size: 12px; }
  .mx-l { font-size: 14px; }
  .mx-art { min-height: 0; }
  .mx-art img { top: 13%; width: 58%; max-width: 160px; }
  .mx-card:hover .mx-art img { top: 9%; }
}
/* the overview under the title can run to two paragraphs (Ru, Nov 10): a little wider, a breath between them */
.sh.v3 .sh-lead > .sh-intro { max-width: 62ch; }
.sh.v3 .sh-lead > .sh-intro + .sh-intro { margin-top: .75em; }
/* a one-line gist under the title, then the short context below the rule (Ru, Nov 10, after Bradley Ziffer's Acorns page) */
.sh.v3 .sh-sub { margin: 14px 0 0; padding: 0; border: 0; max-width: 60ch; font: 400 clamp(17px, 1.4vw, 21px)/1.4 var(--sans); letter-spacing: -0.01em; color: var(--ink-2); text-wrap: balance; }