/* V99 (6 Oct 2026). loaded after css/system.css on the home page only; it replaces css/theme98.css.
   his words: "heading should be big in the desktop ... let's use the blue off white tone that guy had ... use our
   font only ... on the mobile it could be smaller, but on the desktop we need a bigger one, like banger."
   so: OUR face again (Zero Sans, regular, as the system has it), on the reference's cool blue off white, with black.
   the type is BIG from 861px up and keeps growing with the screen (a 2560 monitor gets a 168px first line); a phone
   keeps small sizes. the things V98 got right stay: the thin outline, no strip on the windows, the role card's back
   with the name first, the small numbers over the steps.
   and what was wrong in V98 is put right: no capitals on chips, a quieter dock, one long black act (the companies
   and the roles) for contrast, and the match stage drawn again without outlines and wires */
:root {
  --mono: var(--sans); --serif: var(--sans);
  --bg: #f8f9fb; --paper: #f8f9fb; --canvas: #f8f9fb;   /* V140: his value from the panel (it was #f2f4f8) */
  --ink: #0b0b0c; --text: #3d4046; --mute: #6c7078; --faint: #9a9ea7; --line: rgba(12, 16, 28, 0.08);
  --halo: 0 0 0 2px rgba(255, 255, 255, 0.94), 0 0 0 3px rgba(12, 16, 28, 0.06), 0 10px 22px -16px rgba(12, 16, 28, 0.2), 0 44px 80px -48px rgba(12, 16, 28, 0.36);
  /* a phone: small and calm */
  --t-heading: 1.75rem;
  --t-display: clamp(2.25rem, 10.4vw, 2.75rem);
  --t-mega: clamp(3.5rem, 17vw, 4.5rem);
  --t-title: 1.375rem;
  --t-card: 1.125rem;
  --t-body: 0.9375rem;
  --t-tab: 0.75rem;
}
@media (min-width: 861px) {
  :root {
    /* a desktop (V103: "the overall title font a little smaller, somewhere around 70 pixels ... make the overall
       fonts a little smaller, like the previous one"): the sizes V96 had on a 1512 wide screen (first line 70,
       headings 50, step titles 30), and they still grow with a wider screen */
    --t-display: clamp(3rem, 4.63vw, 7.5rem);
    --t-heading: clamp(2rem, 3.3vw, 5.25rem);
    --t-mega: clamp(4.35rem, 7.6vw, 12rem);
    --t-title: clamp(1.41rem, 2vw, 3.2rem);
    --t-card: clamp(1.09rem, 1.32vw, 2rem);
    --t-body: clamp(0.875rem, 0.748rem + 0.261vw, 1.125rem);
    --t-tab: clamp(0.75rem, 0.66rem + 0.08vw, 0.8125rem);
    --max: clamp(1056px, 84vw, 1760px);
  }
}
html { background: var(--bg); }
body { background: var(--bg); }
/* the ground: the blue off white with a soft light across it, held still behind the page (plain on a phone) */
@media (min-width: 861px) {
  body { background: var(--bg); }   /* V113: one flat ground, so the foot of the page meets it with no seam */
}

/* ---- the first line: the one big moment of the page ---- */
.hero28 .hero28__t { line-height: 0.96; letter-spacing: -0.055em; }
@media (min-width: 861px) { .hero28 { --h28-mark: clamp(84px, calc(var(--h28-line) * 0.95), 168px); } }

/* ---- the black screen: the number, and room for its three rows (js/s-scout.js) ---- */
.scout28 .scout28__n { letter-spacing: -0.07em; }

/* ---- ONE BLACK ACT. the companies' black runs on through the roles: the pictures stand on black, the title is
        white, and the black ends in the same arc it began with, over "Learn the job by doing it." ---- */
.roles55 { background: var(--ink); }
.roles55 .r55-h { color: #fff; }
/* V114 ("this black thing as a circle is very bad ... only the bottom should start to converge ... the space between the next section should be very small"): the black ends in an edge that is flat as it comes into view and bends into an arc as it rises (js/s-collapse.js sets --arc, 0 to 1) */
/* V115 ("till here the top part should go away"): the page's own ground rises over the foot of the black as it leaves, faster than the scroll, with the arc as its top edge. so by the time the next title is in the middle of the screen the black has gone */
.flow { --band: calc(11vw + 48svh); }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: calc(var(--band) + 11vw + 2px); pointer-events: none; background: radial-gradient(ellipse 60% 100% at 50% 0, var(--ink) 0, var(--ink) 99.4%, rgba(11, 11, 12, 0) 100%) 50% 0 / 100% calc(var(--arc, 0) * 11vw + 1px) no-repeat, var(--bg); transform: translateY(calc(var(--arc, 0) * var(--band) * -1)); }
.flow { padding-top: 0; }
.sb59:not(.sb81) .sb59__stick { padding-top: clamp(28px, 5svh, 64px); }
/* the black of the first screen has no arc of its own now: it runs straight into the roles */
.hero28.has-foot .hero28__stick, .hero28.has-foot.is-foot .hero28__stick, .is-still .has-foot .scout28, .is-still .scout28.has-foot { clip-path: none; }
/* "the title and the chips should feel compact ... it should not have equal spacing": the title and its chips are
   one group, close together; the cards stand well under them. the title is one line */
.roles55 { --mh-a: 12px; --mh-b: 30px; }
@media (min-width: 861px) {
  .roles55 { --mh-a: clamp(14px, 2.2svh, 26px); --mh-b: clamp(38px, 7svh, 96px); --H: clamp(300px, calc((100svh - 196px - var(--th) - var(--mh)) * 0.94), 660px); }
  .roles55 .r55-h { white-space: nowrap; }
  .roles55 { --chips: clamp(30px, 2.05vw, 46px); --chipf: clamp(0.75rem, 0.5rem + 0.29vw, 1.0625rem); }   /* V103: "make the pills a little smaller" */
  .r55-chip2 { padding: 0 1.05em; }
}
/* chips: thin outlined pills in sentence case. on the black the chosen one is white */
.r55-chip2 { padding: 0 14px; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.74); font-size: var(--chipf, 0.8125rem); }
.r55-chip2:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.r55-chip2.is-on, .r55-chip2.is-on:hover { background: #fff; color: var(--ink); box-shadow: none; }
/* the cards: no white ring on the black, a hair of light round each picture */
.roles55 { --ring: 0px; --frame: 0 0 0 1px rgba(255, 255, 255, 0.1); --g: 16px; }
.roles55 .r55-c { border-radius: 22px; box-shadow: none; }
.roles55 .r55-c--big .r55-c__name { font-size: calc(var(--t-card) * 1.12); }

/* ---- the back of a role card: the name first and largest; air; the projects as a bulleted list; the tools as
        small outlined chips, four at most; the key ---- */
.roles55 .r55-c, .roles55 .r55-c--big { --bp: clamp(16px, calc(var(--H) * 0.047), 30px); }
.roles55 .r55-c--big .r55-c__back, .roles55 .r55-c--big .r55-c__back:not(:has(> .r55-tag)) { grid-template: "name x" auto "ship ship" auto ". ." minmax(0, 1fr) "tools tools" auto "go go" auto / minmax(0, 1fr) auto; box-shadow: none; }
.roles55 .r55-c__back > .r55-tag { display: none; }
.roles55 .r55-c--big .r55-b__name { align-self: start; padding-top: 2px; font-size: calc(var(--t-card) * 1.38); line-height: 1.06; letter-spacing: -0.04em; color: var(--ink); }
.roles55 .r55-b__x { align-self: start; }
.roles55 .r55-b__ship { margin-top: clamp(8px, calc(var(--H) * 0.04), 26px); gap: 10px; }
.roles55 .r55-b__k { color: var(--faint); }
.r89-list { row-gap: 0.5em; font-size: var(--t-body); line-height: 1.3; letter-spacing: -0.012em; color: var(--text); }
.r89-list li { position: relative; padding-left: 1.1em; }
.r89-list li::before { content: ""; position: absolute; left: 0.14em; top: 0.56em; width: 4px; height: 4px; border-radius: 50%; background: #a3a6ad; }
.r89-tools { row-gap: 9px; }
.roles55 .r55-c--big .r55-chip, .roles55 .r55-c--big .r55-chip--t { height: 26px; gap: 6px; padding: 0 10px 0 8px; background: none; box-shadow: inset 0 0 0 1px rgba(12, 16, 28, 0.11); font-size: var(--t-tab); color: var(--text); }
.roles55 .r55-c--big .r55-chip--t { padding: 0 10px; }
.roles55 .r55-c--big .r55-chip > img, .roles55 .r55-c--big .r55-chip > i { width: 13px; height: 13px; }
.roles55 .r89-tools .r55-b__tools { gap: 5px; }
.roles55 .r55-c--big .r55-chip:nth-child(n+5) { display: none; }

/* ---- "Learn the job by doing it.": "the title needs to be really good. it should be like banger". it is set in
        the first line's size, on two lines ---- */
/* V103: "on the white we have a title like Learn the job by doing it. that should be smaller": the heading size again, one line */
.sb59:not(.sb81) .sb59__l { font-size: var(--t-heading) !important; line-height: 1.04; letter-spacing: -0.045em; margin-left: auto; margin-right: auto; text-wrap: balance; }
.sb81 .sb81__p { color: var(--mute); }

/* ---- the steps: a small number over each title ("I like 01 / 04"), the title on two lines, no strip on the
        window, a thin outline ---- */
.how34__wins { counter-reset: step97; }
.ch63 { counter-increment: step97; }
/* V113: "remove this number, 01 04": the small numbers over the step titles are gone */
.ch63 .ch63__t { max-width: 10.6em; text-wrap: balance; }
@media (min-width: 861px) { .ch63 { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); } }
.win34, .win34.is-live { border-radius: 20px; box-shadow: var(--halo); }
.win34 .win34__bar { display: none; }
.win34 .proto, .win34.is-native .proto { border-radius: 20px; }

/* ---- "You learn. We match.", drawn again. he on V98: "it just feels like some AI slop: the black outline, how this
        logo comes up, how it gets connected". so: no boxes, no outlines, no wires, no pop. the companies are bare
        marks in one line down each side of the portfolio. they slide out from behind it (js). unmatched, a mark is a
        pale shape; matched, it takes its own colours and a small tick stands beside it ---- */
.mt88__sub { display: none; }
/* V113: the companies stand in containers again, all one height, every mark one height, with a connector each */
.mt91__net { display: block; }
.mt91__line { stroke: rgba(12, 16, 28, 0.3); stroke-width: 1.25; }
.mt91__dot { fill: var(--ink); }
.mt91__cos { z-index: 2; }
.mt91__co, .mt91__co.is-on { height: calc(46px * var(--cz, 1)); padding: 0 calc(17px * var(--cz, 1)); border-radius: calc(13px * var(--cz, 1)); background: #fff; box-shadow: 0 0 0 1px rgba(12, 16, 28, 0.07), 0 12px 24px -16px rgba(12, 16, 28, 0.32); animation: none; }
.mt91__co img { filter: none; opacity: 1; }
.mt91__co::after, .mt91__co.is-on::after { content: none; animation: none; }
.mt93__lvl { box-shadow: 0 0 0 1px rgba(12, 16, 28, 0.07), 0 14px 26px -18px rgba(12, 16, 28, 0.3); }

/* ---- the dock and the credits: smaller and quieter, so they are not the heaviest things on the page ---- */
/* V113: "I need the bottom nav bar and the start button to be bigger in length" */
@media (min-width: 861px) { .dock { zoom: 0.9; } .hud--r { zoom: 0.9; } .dock .start { padding: 0 78px; } }
@media (max-width: 860px) { .dock .start { padding: 0 52px; } }
.dock { background: rgba(255, 255, 255, 0.56); box-shadow: 0 0 0 1px rgba(12, 16, 28, 0.06), 0 18px 36px -24px rgba(12, 16, 28, 0.42); }

/* ---- a phone ---- */
@media (max-width: 860px) {
  .roles55 .r55-c--big .r55-b__name { font-size: 1.375rem; }
  .r89-list { font-size: 0.8125rem; }
  .proto { border-radius: 16px; }
  .mt91__co, .mt91__co.is-on { height: 32px; padding: 0 10px; border-radius: 10px; }
}

/* ---- V100: the first screen is a wall of plaster with Zero World carved in it (js/s-relief.js; the Relief Reveal
        kit). the canvas lies under the line and the mark and fills the held screen; the screen's own colour is the
        wall's colour at rest, so nothing flashes before the wall is drawn ---- */
.hero28 { --h28-wall: #f4f6fa; }   /* V111: the wall's own tone at rest with the kit's shadows */
.is-still .hero28 { --h28-wall: var(--bg); }
.hero28 .hero28__stick { background: var(--h28-wall); }
.hero28.is-black .hero28__stick { background: var(--h28-black); }
.hero28 .hero28__slit { stroke: var(--h28-wall); }
.hero28__relief { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.hero28.is-black .hero28__relief { visibility: hidden; }
.is-still .hero28 .hero28__stick { background: none; }

/* V113 ("make sure this bottom gradient footer matches the upper background color so it doesn't have that kind of
   artifact"): the foot of the page begins in the page's own colour and lets its map come through only gradually */
.foot64::before { height: 34%; z-index: 6; pointer-events: none; background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 22%, rgba(248, 249, 251, 0.72) 52%, rgba(248, 249, 251, 0) 100%); }

/* V114: the match stage is held much longer: twenty levels, each one a real piece of scroll */
.mt88.mt91 { height: 340svh; }
@media (max-width: 860px) { .mt88.mt91 { height: 290svh; } }
/* V114 ("just the icon, mute and volume"): the sound control on a role card is the icon alone, no disc and no ring.
   muted = the speaker with a cross; on = the speaker with its waves */
.r55-snd, .r55-snd.is-on, .r55-snd[aria-pressed="true"] { width: 34px; height: 34px; border: 0; background: none !important; box-shadow: none !important; color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); }
.r55-snd svg { width: 23px; height: 23px; }
.r55-snd .r55-snd__x { visibility: visible; } .r55-snd.is-on .r55-snd__x { visibility: hidden; }

/* V116 ("let the card also move up, add one more spacer"): when the row of roles has run to its end the held screen
   lets go 42 hundredths of a screen before the section ends, so the cards travel up with the black under them, and
   the page's ground comes up behind them and never over them */
.roles55.is-run { height: calc(100svh + var(--run, 0px) + 42svh); }
.roles55.is-run .r93-stick { margin-bottom: 42svh; }