/* Generated by build.js from src/landing/page.html (source sha256 96b53468239a274ed5b65267420819e9c4d91eb9a746a129862cd3a264074803). Do not edit. */
/* Brooklyn USCE - scroll landing page.
   Source of truth. Generated into usce-landing.css / landing-markup.html /
   usce-landing.js by `node build.js`. Do not edit the generated files.

   EVERYTHING that styles this page is scoped under #usce-landing, because the
   page ships as a shortcode inside a WordPress theme and the earlier draft's
   bare `*`, `body` and `h1,h2,h3,p,ul,li` rules would have reset the theme
   site-wide. The two deliberate exceptions are at the bottom of this comment.

   Class and id names here are generic on purpose (.row, .track, .board, .close)
   because they read well in the markup. Scoping is what makes that safe in both
   directions: our rules cannot reach the theme, and #usce-landing raises our
   specificity above any bare theme selector that reaches in. The ids carry a
   usce- prefix for the same reason - getElementById is not scoped by anything.

   The two unscoped rules sit at the end of this sheet. They are safe because
   this stylesheet is only ever enqueued on the page carrying [usce_landing]. */

#usce-landing{
  /* Full bleed out of the theme's content column. */
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);

  color:#F2F4F7; font-family:var(--body); line-height:1.5;
  -webkit-font-smoothing:antialiased;

  --ink:#0E1116; --ink-2:#1A1F27; --paper:#FFFFFF; --surface:#F9F9F9;
  --text:#222222; --text-2:#4A4A4A; --text-3:#6B6B6B;
  --on-dark:#F2F4F7; --on-dark-2:#A7B0BC;
  --blue:#1468DA; --blue-lift:#4E96F5; --line:#DDDDDD;
  /* Used by .row.late; it was missing, so a late marker rendered as a ring
     with no dot -- an invalid var() drops the declaration silently. Taken from
     the rgba() in the box-shadow beside it so the two agree. */
  --warn:#B4341F;
  --i-timer:#1468DA; --i-plan:#0F6E64; --i-ready:#2D6A3E; --i-convert:#47536F;
  --i-retake:#5B3A8C; --i-rotation:#0D2233; --i-match:#B4451F; --i-letter:#7A5326;
  --i-cost:#9C3A5C; --i-apply:#B0730A; --i-rank:#3F5E8C; --i-ask:var(--i-letter);
  --i-matchmaker:#1F6B4A; --i-interview:#0077A8;
  --disp:'Encode Sans',system-ui,sans-serif; --body:'Merriweather Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.2,0,.2,1);
}

/* Scoped reset. :is() takes the specificity of its heaviest argument -- all
   type selectors -- so this whole block sits at (1,0,1) and every component
   rule below outranks it. It exists to neutralise theme rules reaching in,
   not to fight our own. */
#usce-landing,#usce-landing *,#usce-landing *::before,#usce-landing *::after{box-sizing:border-box}
#usce-landing :is(h1,h2,h3,h4,p,ul,ol,li,div,section,article,span,b,i,a,button,picture,img,svg){margin:0;padding:0}
#usce-landing :is(ul,ol){list-style:none}
#usce-landing a{color:inherit;text-decoration:none}
/* Headings, normalised back to plain inherited text.
   The rest of this reset covers the box model, which was not enough: a theme
   styles headings by NAMING them, and a named element beats an inherited value
   however specific the ancestor is. Astra ships
     body,h1,...,h6,.entry-content :where(h1,...,h6){color:#222222}
   and a matching set of font-size/line-height rules, so every heading on this
   page rendered in the theme's dark ink on our dark ground, while every element
   that carried its own colour looked right.
   Declared as a category rather than as the two properties that were caught:
   whatever a theme sets on a bare h1, this hands the heading back to the
   component rules below. All of them name their own font, weight, size and
   spacing at higher specificity, so nothing here overrides our own design -
   it only takes the theme out of the argument. */
#usce-landing :is(h1,h2,h3,h4,h5,h6){color:inherit;line-height:inherit;
  font-weight:inherit;letter-spacing:inherit;text-transform:none}
#usce-landing button{font:inherit;color:inherit;background:none;border:0}
#usce-landing .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
#usce-landing .eyebrow{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-lift)}
/* A grid item with auto margins is not stretched, so a .wrap in a pin shrank
   to its copy and each act's left edge sat somewhere different. */
#usce-landing .pin > .wrap{width:100%}
#usce-landing .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ ACT 1 - HERO. Device: block field + kinetic type ============ */
#usce-landing .act{position:relative}
#usce-landing .media{position:absolute;inset:0;overflow:hidden}
#usce-landing .media img,#usce-landing .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#usce-landing .media video{opacity:0;transition:opacity .4s var(--ease)}
#usce-landing .media video.ready{opacity:1}
/* Paints its own ground rather than letting the body show through: Astra puts
   a light background on .ast-separate-container, which is an ancestor in some
   of its page layouts. Acts 2, 2b, 4 and 5 already declare theirs. */
#usce-landing #usce-a1{height:170vh;background:var(--ink)}
#usce-landing #usce-a1 .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-content:center}
/* A <picture>, not a CSS background: the browser downloads exactly one of the
   two files, and the URL lives in the markup where the plugin can rewrite it. */
#usce-landing .photo{position:absolute;inset:0;z-index:0;opacity:.9}
#usce-landing .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the block field: 16 exam blocks, the page's ground, filling as you scroll */
#usce-landing .field{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:2px;opacity:.9}
#usce-landing .field i{background:rgba(16,21,29,.18);box-shadow:inset 0 0 0 1px rgba(220,232,248,.06);
  position:relative;overflow:hidden}
#usce-landing .field i::after{content:"";position:absolute;inset:0;background:var(--blue);
  transform:scaleY(var(--f,0));transform-origin:bottom;opacity:.5}
#usce-landing .field i.done::after{opacity:.6}
#usce-landing #usce-a1 .pin::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg, rgba(10,13,18,.90) 0%, rgba(10,13,18,.78) 42%, rgba(10,13,18,.50) 64%, rgba(10,13,18,.10) 100%)}
#usce-landing .hero{position:relative;z-index:2}
#usce-landing .hero .eyebrow{color:#D7E6FA}
#usce-landing .hero h1{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(38px,7.4vw,88px);max-width:15ch}
#usce-landing .hero h1 span{display:block;opacity:0;transform:translateY(.5em);
  animation:usce-rise .8s var(--ease) forwards}
#usce-landing .hero h1 span:nth-child(1){animation-delay:.1s}
#usce-landing .hero h1 span:nth-child(2){animation-delay:.24s}
#usce-landing .hero h1 span:nth-child(3){animation-delay:.38s}
/* Keyframes are global whatever the selector scope, so the name carries the
   prefix instead -- a theme with its own `rise` would otherwise win or lose by
   load order. */
@keyframes usce-rise{to{opacity:1;transform:none}}
#usce-landing .hero .lede{margin-top:26px;max-width:56ch;font-size:clamp(16px,1.5vw,19px);line-height:1.75;color:#C9D1DB}
#usce-landing .hero .meta{margin-top:26px;display:flex;gap:34px;flex-wrap:wrap;font-family:var(--disp);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#C9D1DB}
#usce-landing .hero .meta b{display:block;font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.02em;color:var(--on-dark);text-transform:none}
#usce-landing .hero .cta{margin-top:28px}

/* ============ ACT 2 - THE ROAD. Device: pin + horizontal scrub. THE PEAK ============ */
#usce-landing #usce-a2{height:280vh;background:var(--ink)}
#usce-landing #usce-a2 .media{opacity:.72}
/* scrim shaped to the copy: heavy under the head and under the stops, open between */
#usce-landing #usce-a2 .pin::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,
  rgba(14,17,22,.93) 0%, rgba(14,17,22,.70) 26%, rgba(14,17,22,.18) 44%,
  rgba(14,17,22,.20) 52%, rgba(14,17,22,.80) 64%, rgba(14,17,22,.94) 100%)}
#usce-landing #usce-a2 .pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center;overflow:hidden}
#usce-landing .road-head{position:relative;z-index:3}
/* clip, not hidden: a hidden box can still be scrolled by focus, which would
   shift the stops out from under the scroll loop. */
#usce-landing .rail{position:relative;margin-top:40px;height:322px;overflow:clip;z-index:2;
  background:linear-gradient(180deg,rgba(14,17,22,0) 0,rgba(14,17,22,.8) 36px,rgba(14,17,22,.8) calc(100% - 36px),rgba(14,17,22,0))}
#usce-landing .road-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4.4vw,54px);letter-spacing:-.02em;line-height:1.06;max-width:18ch}
#usce-landing .rail .line{position:absolute;left:0;right:0;top:88px;height:2px;background:#252C36}
#usce-landing .rail .fill{position:absolute;left:0;top:88px;height:2px;background:var(--blue);width:calc(var(--p,0)*100%)}
/* .rail-track, not .track: act 2b's chart rows used the same bare class name and
   came later in the sheet, so they were overriding the rail's layout and adding
   a stray hairline through it. */
#usce-landing .rail-track{position:absolute;inset:0;display:flex;align-items:flex-start;gap:0;will-change:transform}
#usce-landing .stop{flex:0 0 min(560px,72vw);position:relative;padding-top:112px;padding-right:44px}
#usce-landing .stop::before{content:"";position:absolute;top:80px;left:0;width:18px;height:18px;border-radius:50%;
  background:#0E1116;border:2px solid #333C48}
#usce-landing .stop::after{content:"";position:absolute;top:80px;left:0;width:18px;height:18px;border-radius:50%;
  background:var(--blue);opacity:var(--e,0);transform:scale(calc(.4 + var(--e,0) * .6))}
#usce-landing .stop .when a{color:var(--blue-lift);text-decoration:none;border-bottom:1px solid rgba(78,150,245,.4)}
#usce-landing .stop .when a:hover{border-bottom-color:var(--blue-lift)}
#usce-landing .stop .when.unset{color:#7C8694}
#usce-landing .yours-flag{margin-top:14px;font-family:var(--disp);font-size:12px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#D7E6FA;display:inline-block;background:rgba(14,17,22,.82);
  padding:3px 8px;margin-left:-8px;border-radius:4px}
#usce-landing .stop .when{font-family:var(--disp);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);position:absolute;top:44px;left:0}
/* The dates sit over the video, so they take the hero's light tint. */
#usce-landing .stop .when,#usce-landing .stop .when.unset,#usce-landing .stop .when a,#usce-landing #usce-a2 .eyebrow{color:#D7E6FA}
#usce-landing .stop h3{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.01em;
  opacity:calc(.26 + var(--e,0) * .74)}
#usce-landing .stop p{margin-top:12px;max-width:34ch;font-size:16px;line-height:1.7;color:var(--on-dark-2);
  opacity:var(--e,0);transform:translateY(calc((1 - var(--e,0)) * 10px))}

/* ============ ACT 3 - THE TURN. Device: clip-path reveal + ground shift ============ */
#usce-landing #usce-a3{height:140vh;background:var(--ink)}
#usce-landing #usce-a3 .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-content:center}
#usce-landing .sheet{position:absolute;inset:0;background:var(--paper);
  clip-path:inset(calc((1 - var(--r,1)) * 100%) 0 0 0)}
/* Dark copy that fades in once the sheet is under it. The fallbacks of 1 keep
   it readable when the script does not run. --ink, not --text: #222222 is also
   the theme's heading colour, and lab/check-theme.mjs reads that value on a
   heading as the theme having won. */
#usce-landing .turn{position:relative;z-index:2;color:var(--ink);
  opacity:var(--t,1);transform:translateY(calc((1 - var(--t,1)) * 18px))}
#usce-landing .turn h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5vw,62px);letter-spacing:-.025em;line-height:1.04;max-width:16ch}
#usce-landing .turn p{margin-top:22px;max-width:52ch;font-size:clamp(16px,1.5vw,19px);line-height:1.75;
  color:var(--text-2)}
#usce-landing .turn .num{font-family:var(--disp);font-weight:800;font-size:clamp(70px,13vw,170px);line-height:.85;letter-spacing:-.04em;color:var(--blue)}

/* ====== ACT 4 - THE BOARD. Device: depth assembly. No lateral travel ====== */
/* Not pinned: fourteen tiles do not fit one screen at most sizes, and a pin
   with nothing moving is only scrolling that does nothing. */
#usce-landing #usce-a4{background:var(--paper)}
#usce-landing #usce-a4 .pin{padding:96px 0 112px;background:var(--paper);color:var(--text);
  display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
/* Same left edge as the .wrap in every other act. */
#usce-landing .rail-head,#usce-landing .group-head,#usce-landing .board{width:100%;padding:0 max(24px,calc((100vw - 1120px)/2 + 24px))}
#usce-landing .rail-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.2vw,36px);letter-spacing:-.02em}
#usce-landing .rail-head p{margin-top:10px;color:var(--text-3);font-size:16px}
#usce-landing .group-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
#usce-landing .board + .group-head{margin-top:24px}
#usce-landing .group-head h3{font-family:var(--disp);font-weight:800;font-size:15px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
#usce-landing .group-head span{font-size:13px;color:var(--text-3)}
#usce-landing .board{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
@media (min-width:560px){#usce-landing .board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){#usce-landing .board{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* The hub's spans, so every row is full: five tiles in a four-column grid
   always orphan one. .wide2 is the study tile that goes wide at two columns. */
@media (min-width:560px){#usce-landing .tile.lead{grid-column:span 2}}
@media (min-width:960px){#usce-landing .tile.wide{grid-column:span 2}}
@media (min-width:560px) and (max-width:959px){#usce-landing .tile.wide2{grid-column:span 2}}
#usce-landing .tile.wide p,#usce-landing .tile.lead p{max-width:46ch}
/* The hub's tile: a tinted head in the tool's own hue. Every var(--acc) has a
   fallback, since the hue is set on the tile in the markup. */
#usce-landing .tile{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:17px 17px 15px;text-align:left;
  --acc-tint:color-mix(in srgb,var(--acc,var(--blue)) 7%,#fff);
  --acc-line:color-mix(in srgb,var(--acc,var(--blue)) 24%,#fff);
  --acc-ink:color-mix(in srgb,var(--acc,var(--blue)) 75%,#000);
  box-shadow:0 1px 2px rgba(34,34,34,.05),0 2px 8px rgba(34,34,34,.045)}
#usce-landing .tile:hover{border-color:var(--acc,var(--blue));box-shadow:0 10px 26px rgba(34,34,34,.13),0 22px 48px rgba(34,34,34,.09)}
#usce-landing .tile .top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-17px -17px 0;padding:14px 17px;background:var(--acc-tint);border-bottom:1px solid var(--acc-line);border-radius:15px 15px 0 0}
/* flex:0 0 auto, or the flex row squashes the chip out of square whenever the
   tag beside it is long. Visible at the 2-column mobile board on "Every 2 wks". */
#usce-landing .chip{width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--acc,var(--blue))}
#usce-landing .chip svg{width:19px;height:19px}
#usce-landing .tag{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc-ink,var(--text-3));background:#fff;border:1px solid var(--acc-line,var(--line));border-radius:999px;padding:4px 10px;white-space:nowrap}
#usce-landing .tile h4{margin-top:13px;font-family:var(--disp);font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--text)}
#usce-landing .tile p{margin-top:7px;font-size:13.2px;line-height:1.55;color:var(--text-2)}
#usce-landing .tile .go{margin-top:auto;padding-top:13px;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);
  font-weight:700;font-size:13px;color:var(--blue)}
#usce-landing .tile .go svg{width:14px;height:14px}

/* ============ ACT 5 - CLOSE. Device: pin + pointer ============ */
#usce-landing #usce-a5{height:200vh;background:var(--ink)}
#usce-landing #usce-a5 .pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:end;justify-items:center;overflow:hidden}
#usce-landing #usce-a5 .media{opacity:.8}
/* the window sits high and bright, so the copy sits low and the scrim rides
   with it. The copy starts about a third of the way down, so the scrim is
   dark from there. */
#usce-landing #usce-a5 .pin::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,
  rgba(14,17,22,.20) 0%, rgba(14,17,22,.24) 14%, rgba(14,17,22,.74) 34%, rgba(14,17,22,.88) 52%, rgba(14,17,22,.96) 100%)}
/* On a short screen the copy starts about a fifth of the way down. */
@media (max-height:700px){#usce-landing #usce-a5 .pin::after{background:linear-gradient(180deg,
  rgba(14,17,22,.30) 0%, rgba(14,17,22,.80) 20%, rgba(14,17,22,.90) 42%, rgba(14,17,22,.96) 100%)}}
#usce-landing .close{text-align:center;position:relative;z-index:3;padding:0 24px 9vh;opacity:var(--in,1);
  transform:translateY(calc((1 - var(--in,1)) * 26px))
    rotateX(calc(var(--my,0) * -5deg)) rotateY(calc(var(--mx,0) * 6deg));
  transition:transform .25s var(--ease)}
#usce-landing .close h2{font-family:var(--disp);font-weight:800;font-size:clamp(34px,6vw,76px);letter-spacing:-.03em;line-height:1.03;max-width:14ch;margin:0 auto}
#usce-landing .close p{margin:22px auto 0;max-width:46ch;font-size:17px;line-height:1.75;color:#C9D1DB}
#usce-landing .cta{margin-top:36px;display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:16px;padding:16px 30px;border-radius:999px;cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease)}
#usce-landing .cta:hover{background:#0F55B4;transform:translateY(-2px)}
#usce-landing .close .fine{margin-top:20px;font-size:13.5px;color:#98A2AF}
#usce-landing .close .fine + .fine{margin-top:8px;max-width:62ch;line-height:1.6}
#usce-landing .close .also{display:table;margin:18px auto 0;font-family:var(--disp);font-weight:700;font-size:15px;
  color:#D7E6FA;border-bottom:1px solid rgba(215,230,250,.45)}
#usce-landing .close .also:hover{border-bottom-color:#D7E6FA}
#usce-landing .halo{position:absolute;width:70vmax;height:70vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(20,104,218,.14) 0%,rgba(20,104,218,0) 62%);z-index:2;
  left:calc(50% + var(--mx,0) * 40px);top:calc(50% + var(--my,0) * 40px);transform:translate(-50%,-50%)}

/* ===== ACT 2b - THE SLIP. Device: a diagram that runs on scroll ===== */
#usce-landing #usce-a2b{height:220vh;background:var(--ink)}
#usce-landing #usce-a2b .pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center;overflow:hidden}
/* This act is a fine line diagram - 13px dots, 1px hairlines, a 10.5px label -
   so its backdrop has to be quieter than the other two. Held at .5 opacity and
   under a heavier scrim than acts 2 and 5, weighted to the middle where the
   chart sits rather than to the top and bottom where the copy does. */
#usce-landing #usce-a2b .media{opacity:1}
/* The copy and the picture want opposite things here, and the picture loses
   almost everywhere: this act is a fine line diagram, so its whole middle has
   to stay near black. The still is therefore FRAMED so its lit far end sits at
   about 80% across, which is the one column of this layout no content reaches
   - the chart's tracks stop at 74%.
   The horizontal gradient is the outer control, opening only past that point.
   The vertical one is a light veil, not a clamp: a 180deg stop heavy enough to
   protect the chart also darkens the right quarter, which is how the first two
   attempts buried the picture completely (measured at 0.075 against an ink
   ground of 0.066 - invisible). */
#usce-landing #usce-a2b .pin::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg, rgba(14,17,22,.90) 0%, rgba(14,17,22,.92) 55%,
    rgba(14,17,22,.86) 72%, rgba(14,17,22,.35) 88%, rgba(14,17,22,.20) 100%),
  linear-gradient(180deg, rgba(14,17,22,.55) 0%, rgba(14,17,22,.25) 45%,
    rgba(14,17,22,.60) 100%)}
/* Above the scrim. Acts 2 and 5 lift their copy the same way; this one had no
   backdrop to sit over until now. */
#usce-landing .slip{position:relative;z-index:3}
#usce-landing .slip h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.4vw,44px);
  letter-spacing:-.02em;line-height:1.08;max-width:30ch}
#usce-landing .slip .setup{margin-top:18px;max-width:50ch;font-size:17.5px;line-height:1.7;color:var(--on-dark-2)}
#usce-landing .chart{margin-top:36px;max-width:680px}
#usce-landing .rows{display:grid;gap:10px}
#usce-landing .row{display:grid;grid-template-columns:230px minmax(0,1fr);align-items:center;gap:22px}
#usce-landing .row > b{font-family:var(--disp);font-weight:700;font-size:16.5px;color:var(--on-dark-2);
  text-align:right;transition:color .25s var(--ease)}
#usce-landing .row.moved > b{color:var(--on-dark)}
#usce-landing .slip-track{position:relative;height:44px}
#usce-landing .slip-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#1E2530}
/* The marker is the date, and the dot's centre sits on it: -6.5px is half the
   13px dot. -50% centred the dot and its label together, which drew every
   date 33-39px left of where it belongs. */
#usce-landing .mark{position:absolute;top:50%;transform:translate(-6.5px,-50%);display:flex;align-items:center;gap:9px;
  left:calc(var(--x,0) * 1%);white-space:nowrap}
#usce-landing .mark i{width:13px;height:13px;border-radius:50%;background:var(--blue);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(20,104,218,.16)}
#usce-landing .mark span{font-family:var(--disp);font-weight:700;font-size:14.5px;color:var(--on-dark)}
#usce-landing .was{position:absolute;top:50%;left:calc(var(--wx,0) * 1%);width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);border:1px solid #38424F;opacity:0;transition:opacity .3s var(--ease)}
#usce-landing .row.moved .was{opacity:1}
/* the gap between where it was and where it is */
#usce-landing .gap{position:absolute;top:50%;height:1px;background:linear-gradient(90deg,#38424F,rgba(56,66,79,0));
  left:calc(var(--wx,0) * 1%);width:calc((var(--x,0) - var(--wx,0)) * 1%);opacity:0}
#usce-landing .row.moved .gap{opacity:1}
#usce-landing .row.late .mark i{background:var(--warn);box-shadow:0 0 0 4px rgba(180,52,31,.20)}
#usce-landing .row.late .mark span{color:#F0A79A}
/* the one thing that does not move */
/* var(--dx,0), not var(--dx): the script sets --dx, so without a fallback the
   whole left declaration is invalid until it runs and the line has no position
   at all. Every other custom property on this page already carries one. */
#usce-landing .deadline{position:absolute;top:0;bottom:0;left:calc(var(--dx,0) * 1%);width:1px;background:#4A5462;z-index:2}
/* \2019 rather than a literal right quote: this sheet is served as a static
   file and cannot rely on the response carrying a charset. */
#usce-landing .deadline::after{content:"Programs start reviewing";position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-dark-2);white-space:nowrap}
#usce-landing .chart-inner{position:relative;padding-top:30px}
#usce-landing .chart-inner > .deadline{left:calc(230px + 22px + (100% - 252px) * var(--dx,0) / 100)}
#usce-landing .verdict{margin-top:28px;font-family:var(--disp);font-weight:700;font-size:clamp(16px,1.6vw,19px);
  line-height:1.45;color:#F0A79A;max-width:60ch;opacity:var(--v,1);
  transform:translateY(calc((1 - var(--v,1)) * 8px))}
/* A visitor's own date that still works: the label tint, not the warning. */
#usce-landing .verdict.ok{color:#D7E6FA}
#usce-landing .slip-go{display:inline-block;margin-top:18px;font-family:var(--disp);font-weight:700;font-size:15px;
  color:#D7E6FA;border-bottom:1px solid rgba(215,230,250,.45)}
#usce-landing .slip-go:hover{border-bottom-color:#D7E6FA}
/* When its copy is taller than the screen (the script measures it), the slip
   lies flat and shows its end state rather than pinning with its top and
   bottom cut off. */
#usce-landing #usce-a2b.flat{height:auto}
#usce-landing #usce-a2b.flat .pin{position:static;height:auto;padding:72px 0}

@media (max-width:760px){
  #usce-landing .stop{flex:0 0 calc(100vw - 48px);padding-right:20px}
  #usce-landing #usce-a4 .pin{padding:56px 0}
  #usce-landing .hero h1{font-size:32px}
  #usce-landing .hero .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;font-size:11px}
  #usce-landing #usce-a2b{height:180vh}
  #usce-landing .slip h2{font-size:24px}
  #usce-landing .slip .setup{font-size:15.5px;line-height:1.55}
  /* the deadline label sits 26px above the chart, so the margin has to clear it */
  #usce-landing .chart{margin-top:34px}
  #usce-landing .chart-inner{padding-top:20px}
  #usce-landing .rows{gap:6px}
  #usce-landing .verdict{margin-top:18px;font-size:15px}
  #usce-landing .row{grid-template-columns:1fr;gap:2px}
  #usce-landing .row > b{text-align:left;font-size:13.5px}
  #usce-landing .slip-track{height:26px}
  #usce-landing .chart-inner > .deadline{left:calc(100% * var(--dx,0) / 100)}
  #usce-landing .mark span{font-size:12px}
}
/* Reduced motion, and screens too short for a pinned act to hold its copy:
   every act lies flat and shows its end state. The script reads the same
   query and stops animating. */
@media (prefers-reduced-motion:reduce),(max-height:600px){
  #usce-landing .act{height:auto!important}
  #usce-landing .pin{position:static!important;height:auto!important;padding:80px 0}
  #usce-landing .rail-track{transform:none!important;flex-wrap:wrap;gap:32px}
  #usce-landing .sheet{clip-path:none}
  #usce-landing .stop h3,#usce-landing .stop p{opacity:1!important;transform:none!important}
  #usce-landing .stop::after{opacity:1}
  #usce-landing .hero h1 span{opacity:1;transform:none;animation:none}
  #usce-landing .media video{display:none}
  #usce-landing .rail{height:auto;overflow:visible;padding:0 max(24px,calc((100vw - 1120px)/2 + 24px))}
  #usce-landing .rail-track{position:static}
  #usce-landing .rail .line,#usce-landing .rail .fill,#usce-landing .halo{display:none}
  #usce-landing .stop{flex:1 1 300px}
  #usce-landing .stop::after{transform:none}
  #usce-landing .turn,#usce-landing .close,#usce-landing .verdict{opacity:1!important;transform:none!important}
  #usce-landing .turn{color:var(--ink)}
  #usce-landing .turn p{color:var(--text-2)}
}

/* ---- the two deliberately unscoped rules -------------------------------
   This stylesheet is enqueued only on the page carrying [usce_landing], so
   these reach that page and no other.

   scroll-behavior: themes set `smooth`, which fights a page whose whole
   argument is that scroll position drives the frame.

   overflow-x: CLIP, never HIDDEN. `hidden` makes body a scroll container and
   every position:sticky pin inside it stops sticking. `clip` does the same job
   for the 100vw full-bleed above without creating one. */
html{scroll-behavior:auto}
body.usce-landing-page{background:#0E1116;overflow-x:clip}