/* ============================================================
   MODERN, the site's surface layer

   Loaded after paper.css and overrides it. Kept as its own file so the
   whole look is one <link> to remove, which matters: the last two
   attempts at this were wrong in opposite directions and both had to be
   unpicked out of a shared stylesheet.

   The brief, in the owner's words: bold and modern, and the pale washed
   backgrounds looked cheap. So:

     · The ground is white. Not cream, not tinted, white, with air.
     · Colour appears ONLY in solid things: a filled button, a filled
       badge, an icon tile, a rule. Never as a wash behind text. A 15%
       tint of a colour is not that colour; it is a stain, and that is
       what read as cheap.
     · Type does the heavy lifting. Large, tight, high contrast between
       the headline and everything under it.
     · Separation comes from space and hairlines, not from bands of
       colour.
   ============================================================ */

:root {
  --m-bg:        #ffffff;
  --m-surface:   #ffffff;
  --m-raised:    #fafafa;   /* the ONLY off-white, and only under a card */
  --m-ink:       #0b0809;   /* the board's headline ink */
  --m-body:      #3d3d42;
  --m-muted:     #6e6e76;
  --m-line:      #e6e6ea;
  --m-line-firm: #d3d3da;

  /* ---- the company's own navy ----

     Taken from the LLC logo the owner supplied, navy type on cream, in a
     serif, carrying the same tagline now on the hero. That is the real
     registered identity, so the website follows it rather than the reverse.
     A generated palette lost to the company's own.

     Cream is deliberately NOT the page ground. The owner's judgement on
     washed backgrounds was that they look cheap, and white is what made
     the type legible; cream lives inside the mark and nowhere else.

     Navy carries every job the accent had, rules, underlines, links,
     figures, section labels, at 11.48:1 on white, which is nearly triple
     what small text needs, so nothing has to be checked twice. */
  --m-rose:      #1f3a5f;   /* navy, 11.48:1, rules, underlines, marks   */
  --m-rose-deep: #1f3a5f;   /* the same navy for coloured words            */
  --m-rose-soft: #f7f4ea;   /* the logo's cream, inside the mark only     */
  --m-navy:      #14273f;   /* deeper navy, for hover                      */

  --m-transport: var(--m-rose-deep);
  --m-operations:var(--m-rose-deep);
  --m-realestate:var(--m-rose-deep);
  --m-finance:   var(--m-rose-deep);
  --m-accent:    var(--m-rose-deep);

  /* ---------- THE PORTAL COLOUR ----------
     [SEAN 2026-09-15: "its pretty hard to find portal in the website i think
     can you highlight their color so it will be easier to find? I would like
     deep green or hermes orange".]

     He is right, and the cause was measurable rather than a matter of taste:
     the secondary actions were painted --m-muted grey and only turned navy on
     hover, so a button like "Explore tours by city" read as a caption until
     you touched it. Colour now marks the things you can click, and ONLY those.
     Headings, section labels, figures and rules keep the navy, so the page
     does not turn into one colour shouting.

     ONE VALUE SWITCHES THE WHOLE SITE. Set --m-portal and every link, card
     link and button follows. Set it back to var(--m-rose-deep) to undo all of
     this in one line.

       deep green    #0F5132   9.3:1 on white, passes AA and AAA at any size
       hermes orange #F37021   2.9:1 on white, FAILS AA for normal text
       darkened      #C2410C   5.2:1 on white, passes AA, still reads orange

     Compare them on real components at /portal-preview. */
  --m-portal: #0F5132;
  --m-accent-ink:#ffffff;

  --m-radius:    10px;
  --m-radius-sm: 7px;
  --m-shadow:    0 1px 2px rgba(11,11,12,.05), 0 8px 24px -12px rgba(11,11,12,.14);

  --m-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
            Helvetica, Arial, sans-serif;
}

/* One brand colour across all four businesses. The old scheme gave each arm
   its own hue as wayfinding; the owner asked for rose gold, and four hues
   plus rose gold would just be five colours arguing. If the per-business
   tints are wanted back, this block is the single place to restore them. */
[data-arm="transportation"], [data-arm="operations"],
[data-arm="realestate"], [data-arm="finance"],
[data-arm="company"] { --m-accent: var(--m-rose-deep); }

/* ---------- the paper layer's own variables, repointed ----------

   This is the real fix, and it is worth saying why, because I first went
   hunting selector by selector and kept missing sections.

   The cream was never written as a colour on a section. It was written
   once, as --psx-bg, and then read by dozens of rules across paper.css and
   inside each page's own <style> block, including rules I had no way to
   enumerate from the outside. Overriding the sections was whack-a-mole:
   every page had one more I hadn't named.

   Repointing the variables changes the ground everywhere at once, in rules
   that don't exist yet as much as in the ones that do. The paper layer
   keeps its structure; only what it means by "paper" changes. */
:root{
  --psx-bg:      #ffffff;
  --psx-hero:    #ffffff;
  --psx-connect: #ffffff;
  --psx-card:    #ffffff;
  --psx-node:    #ffffff;

  --psx-text:  var(--m-ink);
  --psx-text2: var(--m-body);
  --psx-muted: var(--m-muted);
  --psx-ink:   var(--m-ink);

  --psx-border: var(--m-line);
  --psx-rule:   var(--m-line);

  /* The four arms at full strength. They were mixed dark and dull so they
     could survive being spread thin behind text; used as solid marks they
     no longer have to apologise for themselves. */
  --psx-blue:    var(--m-rose-deep);
  --psx-slate:   var(--m-rose-deep);
  --psx-oxblood: var(--m-rose-deep);
  --psx-sienna:  var(--m-rose-deep);
  --psx-accent:  var(--m-rose-deep);
  --psx-accent-rgb: 31,58,95;
  --psx-accent-dark: #14273f;
}

/* ---------- ground ---------- */
html, body { background: var(--m-bg) !important; color: var(--m-body) !important; }
body { font-family: var(--m-sans) !important; -webkit-font-smoothing: antialiased; }

/* Every cream and every pale band the old layer painted is removed. This is
   the change the owner actually asked for: no washes. Named by what the
   markup really uses rather than by what I assumed it used. */
main, .view,
.view .phases, section.phases, .view .hero, .psx-hero,
.psx-section, .psx-connects, .psx-cta, .psx-cta-panel,
.phases, .hero, .band, .psx-band, footer, .psx-foot {
  background: var(--m-bg) !important;
}

/* One panel may sit on the faintest grey so a call to action has an edge, 
   this is the single exception, and it is grey, not a tinted colour. */
.psx-cta-panel {
  background: var(--m-raised) !important;
  border: 1px solid var(--m-line) !important;
  border-radius: var(--m-radius) !important;
}
footer, .psx-foot { border-top: 1px solid var(--m-line) !important; }

/* The last four cream grounds, found by sweeping every page for a painted
   background that isn't white or neutral. Each is written into one page's
   own <style>, which is why the variables above didn't reach them. */

/* The map's own backdrop, what shows in the gaps while tiles load. Cream
   there reads as a stain on a white page; neutral reads as "loading". */
.leaflet-container { background: #ececef !important; }

/* A notice, not a wash: white ground, solid amber edge, amber words. */
.gate {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-line) !important;
  border-left: 3px solid #b45309 !important;
  border-radius: var(--m-radius-sm) !important;
}
.steps {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-line) !important;
}

/* ---------- type ---------- */
/* The headline was set in var(--m-sans), which resolves to -apple-system, 
   the operating system's user-interface font. Measured on the front page it
   came out 73.6px at weight 800 in a 573px column, broken over four lines,
   while --psx-display sat defined and unused: Iowan Old Style, a book serif,
   chosen because the whole idea here is ink on paper.

   A UI font is drawn to disappear behind an interface, which is the opposite
   of a headline's job. The one genuinely artistic asset already paid for is
   the typography; this switches it on. Serifs also want less weight and more
   room than a grotesque, 800 turns a book face into a slab, and the tight
   tracking was compensating for size that is no longer there. */
h1, .psx-h1, .page-title, .hero h1 {
  font-family: var(--psx-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.014em !important;
  line-height: 1.08 !important;
  color: var(--m-ink) !important;
}
/* The floor was 2.2rem, which on a 375px phone is 35px: a nine word
   headline set as four screen-wide serif lines, the "front size is a bit
   crooked" report. 1.7rem lets a phone breathe; desktop still reaches
   3.5rem through the vw term, unchanged. [SEAN] */
h1, .hero h1, .psx-h1 { font-size: clamp(1.7rem, 4.6vw, 3.5rem) !important; }
.page-title { font-size: clamp(1.8rem, 3.4vw, 2.4rem) !important; }

/* Four lines of headline is a wall, and a hand-set measure only breaks well
   in one language, this page ships in five. text-wrap:balance lets the
   browser even the lines out, which is the whole reason it exists. */
#view-overview .psx-h1 {
  max-width: 19ch !important;
  margin-inline: auto;
  text-wrap: balance;
}

h2, .psx-h2 {
  font-family: var(--psx-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.008em !important;
  line-height: 1.16 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  color: var(--m-ink) !important;
}
/* h3 stays in the sans. A serif at 1rem on a card title reads as a mistake
   rather than a choice, the serif earns its place at size, and the cards are
   where the interface starts and the poster stops. */
h3, .psx-h3 {
  font-family: var(--m-sans) !important;
  font-weight: 700 !important; letter-spacing: -.014em !important;
  color: var(--m-ink) !important;
}
p, li, .sub, .summary, .view-intro, .psx-lede {
  color: var(--m-body) !important;
  line-height: 1.62 !important;
}
.view-intro, .psx-lede, .hero p {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem) !important;
  max-width: 62ch;
}
.muted, .note, .fine, .by, .caption { color: var(--m-muted) !important; }

/* The section label above a heading, small, solid, in the arm's colour.
   This is colour as a mark, not as a background. */
.kicker, .view-kicker, .section-label, .psx-kicker {
  color: var(--m-accent) !important;
  font-weight: 700 !important;
  font-size: .74rem !important;
  letter-spacing: .11em !important;
  text-transform: uppercase;
}

/* The figures were set in the paper layer's book face. Next to a tight sans
   headline that reads as two designs sharing a page, and the number is the
   thing being read, so it gets the same voice, one size louder. */
.psx-stat-val, .tile .n, .stat-val, .figure-n {
  font-family: var(--m-sans) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--m-accent) !important;
}

/* ---------- space ---------- */
.view section, .phases, section.phases { padding: clamp(3.5rem, 7vw, 6.5rem) 1.25rem !important; }
.container, .wrap { max-width: 1120px; margin-inline: auto; }

/* ---------- separation by rule, not by band ---------- */
.view section + section, .phases + .phases { border-top: 1px solid var(--m-line) !important; }

/* ---------- cards ---------- */
.psx-card, .service-card, .fin-card, .card, .trip, .p-card {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-line) !important;
  border-top: 1px solid var(--m-line) !important;   /* the coloured top rule goes */
  border-radius: var(--m-radius) !important;
  padding: clamp(1.4rem, 2.4vw, 2rem) !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.psx-card:hover, .service-card:hover, .card:hover, .trip:hover {
  border-color: var(--m-line-firm) !important;
  box-shadow: var(--m-shadow) !important;
}
.psx-card h3, .service-card h3, .fin-card h3, .card h2 { color: var(--m-ink) !important; }

/* The icon is where a card carries its colour, a solid tile, not a tint
   behind the whole card. */
.service-card .service-icon, .psx-card .psx-card-icon, .card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--m-radius-sm);
  background: var(--m-rose) !important;
  color: #fff !important;
  font-size: 1.3rem; margin-bottom: .9rem;
}

/* ---------- buttons: an underlined word, not a coloured block ----------

   Two attempts sat here before this one: black fills, then rose fills. The
   owner's read on both was the same and it is the correct one, a solid
   block behind a short label buries the word. At button size the fill is
   most of what the eye receives and the text is a hole punched in it.

   So the control is the word itself, with the colour carried underneath it.
   The rule is the affordance; the label stays black and fully legible; the
   colour reads as an accent rather than as a wall. */
.btn, .book-cta, .psx-btn-primary, .primary, .submit, .cta,
a.btn, a.btn.blue, a.btn.dark, a.btn-blue, a.cta,
.btn.blue, .btn.dark, .btn-blue,
button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip):not(.here-btn) {
  background: transparent !important;
  background-image: none !important;
  color: var(--m-portal) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--m-portal) !important;
  border-radius: 0 !important;
  padding: .1rem 0 .18rem !important;
  font-family: var(--m-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: border-color .15s ease, color .15s ease, border-bottom-width .15s ease;
}

/* Hover deepens the rule and the word together, no colour swap, no fill. */
.btn:hover, .book-cta:hover, .psx-btn-primary:hover, .primary:hover, .cta:hover,
a.btn:hover, a.btn.blue:hover, a.btn.dark:hover, a.cta:hover,
.btn.blue:hover, .btn.dark:hover,
button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip):hover {
  color: var(--m-rose-deep) !important;
  border-bottom-color: var(--m-rose-deep) !important;
  border-bottom-width: 3px !important;
}

/* The action bar's buttons are laid out as wide flex bars. Stripped to bare
   words they would sit marooned in all that width, so they keep a box, 
   an outline in the colour, never a fill. */
.actionbar button.act:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip):not(.here-btn) {
  border: 1.5px solid var(--m-rose) !important;
  border-radius: var(--m-radius-sm) !important;
  padding: .8rem 1rem !important;
  background: transparent !important;
  color: var(--m-ink) !important;
}
.actionbar button.act:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip):hover {
  border-color: var(--m-rose-deep) !important;
  color: var(--m-rose-deep) !important;
  border-bottom-width: 1.5px !important;
}
.actionbar .act.robotaxi { opacity: 1 !important; color: var(--m-muted) !important; border-style: dashed !important; }

/* Icon-sized controls keep their own shape. An underline under a map's
   zoom button or a toolbar icon is not an affordance, it is a stray mark, 
   the underline treatment only makes sense under a word. */
button.x:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.modal-x:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.auth-close:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.role-close:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.dn-close:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.jarvis-close:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.close:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
button[aria-label='Exit']:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
button[title='Remove']:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.leaflet-container button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.leaflet-container a:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.leaflet-bar a:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.leaflet-control a:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.leaflet-control button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.map-actions button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.itin-tools button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.map-tools button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.chipbar button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.toolbar button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip),
.zoombar button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip):not(.here-btn) {
  border-bottom: 0 !important;
  padding: revert !important;
}

/* "Keep their own shape" was only half true above: that block takes the
   underline off an icon control and gives its padding back, but the button
   rule strips background, radius and shadow with !important and nothing
   ever handed those back. So the trip planner's six map controls, which
   the page itself writes as a 34px white chip with a soft shadow, were
   painting as bare glyphs straight onto the map tiles: the satellite one
   sat on the Hudson, and "clear the trip" had no edge at all, while
   Leaflet's own zoom pair kept its white box two centimetres above them
   because those are <a> and this rule only reaches <button>. Give the
   chip back, and only to this one container: .itin-tools writes
   background:none itself and means it. */
.map-actions button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.chip) {
  background: rgba(255,255,255,0.96) !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.22) !important;
}

/* The follow control's lit state went the same way and had been dead longer,
   measured before this chip was written: the page paints it #1b4d8f when it
   is tracking you, without !important, so transparent beat it and "follow my
   position" looked identical on and off. A state that says nothing is worse
   than no state at all, so it is carried at the same weight as the chip. */
.map-actions button#followBtn.on {
  background: #1b4d8f !important;
  color: #fff !important;
}

/* The map's starting-point control styles itself and is a pin, not a word.
   It was excluded from the button rules on purpose, which now leaves it the
   only filled control on the page, flagged rather than quietly changed,
   because its red waiting-state carries meaning the colour rules shouldn't
   overwrite without a decision. */

/* A live count of other people is a note, not a panel. White ground, one
   solid rule in the accent, the wash it used to sit on was the cheap look. */
.traffic-note {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-line) !important;
  border-left: 3px solid var(--m-accent) !important;
  border-radius: var(--m-radius-sm) !important;
}

/* The secondary action steps back.

   Measured on the hero: "Book a ride" is 86px, "Partner with us" is 112px.
   Given both the same 2px navy rule, the longer phrase ends up wider AND
   as heavy as the thing it is supposed to defer to, so the eye lands on
   the secondary action first. Nothing is wrong with the rendering, the
   rule hugs the text exactly, the weighting was simply equal when it
   should not have been.

   So the secondary keeps the underline language but at half the weight and
   in muted ink. The primary now leads on emphasis rather than on width. */
a.psx-btn-ghost:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip), .btn.ghost:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip), .btn-ghost:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip) {
  color: var(--m-portal) !important;
  border-bottom: 1px solid var(--m-line-firm) !important;
  border-top: 0 !important; border-left: 0 !important; border-right: 0 !important;
  font-weight: 600 !important;
  background: transparent !important;
  padding: .1rem 0 .18rem !important;
}
a.psx-btn-ghost:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip):hover, .btn.ghost:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip):hover, .btn-ghost:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip):hover {
  color: var(--m-rose-deep) !important;
  border-bottom-color: var(--m-rose) !important;
  background: transparent !important;
}

/* Keyed on the destination, not the wrapper. The landing page puts this
   control in a <nav>; trip-planner, articles and driver put it in a
   <div class="right">. Keying on `nav` meant the same link wore the old
   filled look on three pages and the quiet one on the fourth. Scoped to
   <header> so the footer's "Book a ride, $75 flat to SeaTac" and the
   body-copy links stay ordinary links. */
header a[href="/book"], header .book-cta, header a.btn {
  background: transparent !important;
  background-image: none !important;
  color: var(--m-ink) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--m-rose) !important;
  border-radius: 0 !important;
  padding: .1rem 0 .18rem !important;
  box-shadow: none !important;
}
header a[href="/book"]:hover, header .book-cta:hover, header a.btn:hover {
  color: var(--m-rose-deep) !important;
  border-bottom-color: var(--m-rose-deep) !important;
  border-bottom-width: 3px !important;
}


/* The black bars, traced to their actual source.

   paper.css carries a block commented "the last gradient buttons on the
   site" which paints `a.btn.blue` with var(--psx-ink) !important. That
   selector is two classes plus an element, heavier than anything the
   general button rule above can be without becoming absurd, so those
   buttons stayed black through every previous pass while everything around
   them turned. A second block does the same to `.cta`.

   Those rules were written to strip out old gradient buttons, which was
   right at the time. They now outrank the site's own colour, which is
   wrong. Matched here selector-for-selector, arriving later, so the tie is
   won honestly instead of with an id hack. */
a.btn.blue, a.btn.dark, a.btn-blue, a.cta,
a.btn, .btn.dark, .btn.blue, .btn-blue, button.btn, .cta {
  background: transparent !important;
  background-image: none !important;
  color: var(--m-ink) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--m-rose) !important;
  border-radius: 0 !important;
  padding: .1rem 0 .18rem !important;
  box-shadow: none !important;
}
a.btn.blue:hover, a.btn.dark:hover, a.cta:hover,
a.btn:hover, .btn.dark:hover, .btn.blue:hover, .cta:hover {
  color: var(--m-rose-deep) !important;
  border-bottom-color: var(--m-rose-deep) !important;
  border-bottom-width: 3px !important;
}

/* ---------- links ---------- */
a { color: var(--m-portal); }
p a, .sub a, .summary a, .note a {
  color: var(--m-accent) !important;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* ---------- tags, chips, badges: solid or outlined, never washed ---------- */
.tag, .badge {
  border-radius: 999px !important;
  font-weight: 700 !important; font-size: .69rem !important;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .24rem .6rem !important;
  background: transparent !important; color: var(--m-rose-deep) !important;
  border: 1px solid var(--m-rose) !important;
}
.chip {
  border-radius: 999px !important;
  border: 1px solid var(--m-line-firm) !important;
  background: var(--m-surface) !important;
  color: var(--m-body) !important;
  font-weight: 600 !important;
  padding: .42rem .85rem !important;
}
/* The selected filter chip. This was the last filled control on the site, 
   a navy pill with the word sitting inside it. It measured fine (white on
   navy, 11.48:1), which is exactly why the audits kept passing it: legible
   is not the same as wanted. The owner's objection to fills was never about
   contrast, it was that a block around a short word buries the word.

   Selected now reads the same way as everything else: the word in navy,
   a rule under it, the outline firmed up. Nothing filled. */
.chip.on {
  background: transparent !important;
  color: var(--m-rose-deep) !important;
  border-color: var(--m-rose-deep) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -2px 0 0 var(--m-rose) !important;
}
.chip.on:hover { border-color: var(--m-navy) !important; color: var(--m-navy) !important; }

/* Status keeps its own meaning and its own colours, untouched by any of
   the above, because a reader must never decode whether red means
   "property" or "something failed". */
.tag.paid, .badge.paid, .status.paid       { background: #0f7b53 !important; }
.tag.due, .badge.due, .status.pending      { background: #b45309 !important; }
.tag.failed, .badge.failed, .status.failed { background: #b3261e !important; }

/* ---------- header ---------- */
header {
  background: var(--m-surface) !important;
  border-bottom: 1px solid var(--m-line) !important;
  padding: .95rem 1.25rem !important;
}
/* The wordmark in black.

   Two things had to be set, not one. paper.css paints .logo-text with
   `-webkit-text-fill-color` as well as `color`, and text-fill-color wins
   over colour at paint time, so setting `color` alone leaves the mark
   exactly as it was. Both are set here. The footer mark matches the
   masthead; if you want the footer left coloured, it's the second selector. */
header .brand, header .logo-text, .logo-text, .psx-foot-mark span {
  color: var(--m-ink) !important;
  -webkit-text-fill-color: var(--m-ink) !important;
}

header .brand, header .logo-text {
  font-family: var(--m-sans) !important;
  font-weight: 800 !important; letter-spacing: -.02em !important;
  color: var(--m-ink) !important;
}
header a { color: var(--m-body) !important; font-weight: 600 !important; }
header a:hover { color: var(--m-ink) !important; }

/* ---------- what Tab reveals ----------

   The owner tabbed through the site and hit a solid navy block. It was the
   skip link: parked off-screen at left:-9999px and slid in on :focus as a
   filled bar, right beside the header. Every sweep I ran missed it for the
   same reason the Sections strip was missed, it does not exist on screen
   until an interaction puts it there.

   It has to stay obvious (it is the keyboard user's shortcut past the nav),
   but obvious does not require a fill. White ground, navy word, navy edge,
   and a ring so it is unmistakable. */
.psx-skip, .psx-skip:focus, .skip-link, .skip-link:focus {
  background: var(--m-surface) !important;
  color: var(--m-rose-deep) !important;
  border: 2px solid var(--m-rose-deep) !important;
  border-radius: var(--m-radius-sm) !important;
  font-weight: 700 !important;
  padding: .6rem 1rem !important;
  box-shadow: inset 0 -4px 0 0 var(--m-navy) !important;
}

/* And the reason it was the only thing Tab showed at all: focus was being
   removed everywhere without anything put in its place, so a keyboard user
   had no idea where they were. A ring, never a fill, the same language as
   the rest of the site, and it satisfies the visible-focus requirement the
   old `outline: none` was quietly breaking. */
/* And the focus indicator itself is NOT a box.

   Three attempts to get here, each wrong in a way worth recording.
   A navy ring: still a rectangle around a word, which is the same
   objection as a fill in outline form. Thickening the element's own bottom
   border: worked where a border existed, invisible on the section tabs
   where none does. Then an inset shadow at a tidy specificity: silently
   beaten by this file's own button rule, which sets box-shadow:none through
   a seven-class :not() chain, so focus landed with no indicator at all on
   15 of 16 controls.

   This carries the same chain, so it wins on its own terms. The indicator
   is an INSET bar along the bottom edge, the underline this site already
   speaks in. It appears on every control whether or not one is there
   already, draws nothing around or behind the word, and shifts no layout. */
a:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
a:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
button:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
button:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.btn:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.btn:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.cta:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.cta:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.book-cta:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.book-cta:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.psx-btn-primary:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.psx-btn-primary:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.act:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.act:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.phase-tab:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.phase-tab:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.chip:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
.chip:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
summary:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
summary:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
[tabindex]:focus:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip),
[tabindex]:focus-visible:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.chip) {
  outline: none !important;
  box-shadow: inset 0 -3px 0 0 var(--m-navy) !important;
  color: var(--m-navy) !important;
}

/* Icon-only controls have no word to underline, so the bar becomes a full
   inset edge, still inside the control, still not a box around it. */
.loc-btn:focus, .map-actions button:focus, .leaflet-control a:focus,
button.x:focus, .modal-x:focus, .auth-close:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--m-navy) !important;
}

/* ---------- forms ---------- */
input, select, textarea {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-line-firm) !important;
  border-radius: var(--m-radius-sm) !important;
  color: var(--m-ink) !important;
  font-family: var(--m-sans) !important;
  padding: .62rem .8rem !important;
}
/* Form fields focus the same way everything else does: an inset bar.
   This rule used to paint `0 0 0 3px`, a RING, the one form the settled rule
   forbids, unconditionally and with !important, twenty lines below the inset
   bar it contradicted. It survived four audits because no audit ever called
   .focus(); the gate now does. */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--m-accent) !important;
  box-shadow: inset 0 -3px 0 0 var(--m-navy) !important;
}
/* 16px is not a taste decision on a touch screen, it is the threshold below
   which iOS Safari zooms the page when a field takes focus, and it does not
   zoom back out afterwards. The visitor is left on a page they now have to
   pan sideways to read, mid-form. Measured before this rule: every form on
   the site tripped it, booking, renter, agent, partners, trip planner, road
   trip, destination book, guide studio, board, dispatch, and the give-back and
   reinvestment boxes on the landing page, because the per-page styles set
   0.9-0.95rem and neither shared sheet set a size at all.

   pointer:coarse rather than a width breakpoint, because the trigger is a
   finger, not a narrow window: an iPad in landscape is wide and still zooms,
   a narrow desktop window is neither. The width clause is kept alongside it
   for browsers that report no pointer type. */
@media (pointer: coarse), (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ---------- touch targets ----------
   Measured on a phone before this block: 201 primary controls under the 44px
   both Apple and Google give as the floor, including "Request this ride" at
   26px, which is the button the whole booking page exists to have pressed,
   "Book a Ride" at 28px, and a back control at 9px. A thumb is about 45px of
   contact; a 26px button is a coin toss, and the visitor blames themselves.

   Only controls, and only where a finger is the pointer. Links inside a
   sentence are excluded deliberately, inflating every prose link to 44px
   would wreck the line spacing of the paragraph around it and buy nothing,
   because nobody navigates by stabbing at a word mid-paragraph.

   min-height alone does nothing to an inline <a>, so the links get
   inline-flex; the buttons are already block-level and just need the floor. */
@media (pointer: coarse) {
  button, input[type="submit"], input[type="button"],
  .btn, .psx-btn, .cta, .price-btn, .publish, .addbtn, .vbtn,
  .wish-btn, .connect, .rm-primary, .fin-card-link {
    min-height: 44px !important;
  }
  /* .book-cta belongs here rather than with the buttons above: it is the link
     at the foot of every service card ("Book a Ride →", "Open Trip Planner →"),
     and an inline <a> ignores min-height until it is given a box. It measured
     31px, the actual way off the landing page on a phone, on the two views
     that carry the most cards. */
  header a, nav a, .topnav a, .phase-tab, .book-cta, .fin-card-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
}
label { color: var(--m-muted) !important; font-weight: 600 !important; }

/* ---------- tables ---------- */
th {
  background: var(--m-raised) !important;
  color: var(--m-muted) !important;
  font-weight: 700 !important; font-size: .72rem !important;
  letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--m-line) !important;
}
td { border-bottom: 1px solid var(--m-line) !important; color: var(--m-body) !important; }

/* ---------- tabs ---------- */
.phase-tabs { background: var(--m-surface) !important; border: 1px solid var(--m-line) !important;
              border-radius: var(--m-radius) !important; box-shadow: var(--m-shadow) !important; }
.phase-tab, .phase-tabs button { background: transparent !important; color: var(--m-muted) !important;
                                 border: 0 !important; font-weight: 650 !important; }
/* The contents strip, the thing that was actually wrong all along.

   paper.css already styled the current tab correctly: an accent-coloured
   word with a 2px rule under it. My rule painted a filled block behind it,
   and paper's `.phase-tab[data-arm].active` colour rule outranks mine, so
   the label stayed accent-coloured ON an accent-coloured block. The word
   didn't go dark, it disappeared. Every repaint after that changed which
   colour the block was, which is why it kept reading as the same fault.

   The fill is gone. Same treatment as every other control on the site. */
.phase-tab.active, .phase-tabs button.active,
.phase-tab[data-arm].active, .phase-tab[data-arm].active:hover {
  background: transparent !important;
  background-image: none !important;
  color: var(--m-rose-deep) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--m-rose) !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
}
.phase-tab:hover:not(.active) { color: var(--m-ink) !important; }

/* ============================================================
   CHAPTERS, giving each section a frame of its own

   The site is one page wearing eight faces: overview, transportation,
   operations, real estate, finance, reinvestment, free tools, security.
   Each is its own view, and, measured, not assumed, each holds exactly
   one section. So these are not stacked chapters separated by a seam;
   they are eight separate openings, and every one of them simply began
   under the sticky header with nothing to say a subject had started.

   A chapter now opens with a rule: a hairline the width of the content
   beneath it, carrying a short heavy navy mark at its centre. Then air,
   then the title. The mark is what the eye catches; the hairline gives
   it something to sit on. It is drawn, not filled, no band of colour
   appears here, which is the site's standing rule.

   The rule is measured against the CONTENT COLUMN, not the section. A
   line narrower than the cards it introduces floats; one that matches
   them reads as an edge.

   The mark is centred, without exception. The first attempt set it flush
   left, which looked wrong the moment it was on screen: every heading on
   this site is centred, measured, all seven, so a left-flush mark
   disagreed with the title directly beneath it and read as a stray
   graphic rather than the opening of a chapter.

   ONE mark per chapter. The site already had a small 34x2 rule tucked
   under each title; with this one above, every chapter carried two navy
   marks a few lines apart, and that is what read as clutter. The small
   one is retired below rather than cut out of paper.css, so the older
   layer stays intact if this is ever unpicked.
   ============================================================ */

.view section.phases,
#view-overview .psx-section {
  position: relative;
  /* The header is sticky and ~71px tall. Without this, jumping to a
     section by anchor parks its opening rule underneath the header,
     where nobody sees it. */
  scroll-margin-top: 6rem;
}

/* the line the chapter sits on, the width of the content it introduces */
.view section.phases::before,
#view-overview .psx-section::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1120px, 100% - 2.5rem);
  height: 1px;
  background: var(--m-line-firm);
}

/* and the mark that says a new one starts here */
.view section.phases::after,
#view-overview .psx-section::after {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 3px;
  background: var(--m-rose);
}

/* One separator, not two. The old rule drew a full-bleed line between
   every pair of sections; under the chapter rule that landed as a
   double line at every seam. */
.view section.phases + section.phases,
.view section.phases,
section.phases + section.phases {
  border-top: 0 !important;
}

/* Retired: the small rule under each title. Superseded by the one above
   it, and two marks per chapter is one too many. */
.view[data-arm] .psx-head .psx-eyebrow::after,
.view[data-arm]:not(#view-realestate) > .phases h2::after {
  content: none !important;
}

/* Room to breathe, weighted downward, a chapter should end with more
   space than it opens with, so the gap reads as "that subject is
   finished" rather than "something is missing here". */
.view section.phases, section.phases,
#view-overview .psx-section {
  padding: clamp(3rem, 5vw, 4.25rem) 1.25rem clamp(4.5rem, 8vw, 7rem) !important;
}

/* Air above the rule as well as below it. Each view opens straight into
   its chapter, so without this the opening rule landed about seven
   pixels under the sticky header, close enough to read as part of the
   header's own border rather than the start of something. */
.view > section.phases:first-child {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

/* Consistent rhythm inside the frame: rule, air, title, intro, content.
   Set once here so no chapter has to remember it. */
.view section.phases > .container > h2 {
  margin: 0 0 .7rem !important;
}
.view section.phases > .container > .view-intro {
  margin: 0 0 clamp(2rem, 3.4vw, 2.9rem) !important;
  max-width: 60ch;
}

/* A chapter label left over from the palette before this one, it was
   still wearing the old blue while everything around it had moved to
   the company's navy. */
#view-overview .psx-eyebrow {
  color: var(--m-accent) !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
}

/* ============================================================
   SECTION FRAMING, three candidates, judged on the real page

   Reached only with ?frame= in the address (see frame-preview.js), so
   the published site is untouched while these are being looked at.
   Each is written as shippable CSS rather than a mock-up: whichever is
   chosen, the others get deleted and nothing has to be rebuilt.

   What is already live is the quiet one, a hairline with a small
   centred mark. The owner's read was that he could not see it, which is
   fair: on a page you know by heart, one pixel of grey is nothing.
   ============================================================ */

/* the injected chapter head is invisible until a mode asks for it */
.fp-head { display: none; }

/* ---------- A · numbered chapters ----------
   A number is the loudest thing you can add without filling anything,
   and it changes what the site claims to be: parts of one document
   rather than pages that happen to follow each other. */
html[data-frame="numbered"] .view section.phases::after,
html[data-frame="numbered"] #view-overview .psx-section::after,
html[data-frame="numbered"] .view section.phases::before,
html[data-frame="numbered"] #view-overview .psx-section::before { display: none; }

/* The name is dropped, not styled. On screen it read as
   "01 FOUR ARMS AT FOUR DIFFERENT STAGES" directly above a heading that
   says "Four arms, at four different stages", the same words twice, a
   line apart. The number is the new information; the title is already
   doing the naming. */
html[data-frame="numbered"] .fp-head .fp-name { display: none; }

html[data-frame="numbered"] .fp-head {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  max-width: 1120px;
  margin: 0 auto clamp(1.75rem, 3vw, 2.75rem);
  padding: 0 1.25rem;
}
html[data-frame="numbered"] .fp-n::before {
  content: attr(data-n);
}
html[data-frame="numbered"] .fp-head .fp-n {
  font-family: var(--m-sans);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--m-rose);
}
html[data-frame="numbered"] .fp-head .fp-name {
  font-family: var(--m-sans);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the name trails off into the rule, so the head reads as one object */
html[data-frame="numbered"] .fp-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--m-line-firm);
}

/* ---------- B · alternating grounds ----------
   Kept honest: seven of the eight views hold exactly ONE section, so
   there is nothing for them to alternate against and they will look
   unchanged. Only the overview, which has three, shows the idea at all.
   Built anyway, because that is easier to see than to be told. */
html[data-frame="bands"] .view section.phases:nth-of-type(even),
html[data-frame="bands"] #view-overview .psx-section {
  background: var(--m-raised) !important;
}
html[data-frame="bands"] .view section.phases::before,
html[data-frame="bands"] .view section.phases::after,
html[data-frame="bands"] #view-overview .psx-section::before,
html[data-frame="bands"] #view-overview .psx-section::after { display: none; }

/* ---------- C · full-width heavy rule ----------
   The same idea that is live, no longer whispering: edge to edge, three
   pixels, and considerably more air on both sides of it. */
html[data-frame="rule"] .view section.phases::before,
html[data-frame="rule"] #view-overview .psx-section::before {
  left: 0; right: 0;
  width: auto;
  transform: none;
  height: 3px;
  background: var(--m-rose);
}
html[data-frame="rule"] .view section.phases::after,
html[data-frame="rule"] #view-overview .psx-section::after { display: none; }
html[data-frame="rule"] .view section.phases,
html[data-frame="rule"] section.phases,
html[data-frame="rule"] #view-overview .psx-section {
  padding-top: clamp(4.5rem, 8vw, 7rem) !important;
  padding-bottom: clamp(5.5rem, 10vw, 8.5rem) !important;
}

/* ---------- the switcher itself ----------
   A tool, not part of the site, so it is allowed the solid fill the
   pages are not. */
#fp-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 99999;
  background: #ffffff;
  border: 1px solid var(--m-line-firm);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(11, 8, 9, .13);
  font-family: var(--m-sans);
  max-width: 300px;
}
#fp-switch .fp-t {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--m-muted); margin-bottom: 9px;
}
#fp-switch button {
  display: inline-block; margin: 0 6px 6px 0; padding: 6px 11px;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--m-ink); background: #fff; cursor: pointer;
  border: 1px solid var(--m-line-firm); border-radius: 7px;
}
#fp-switch button.on {
  border-color: var(--m-rose);
  box-shadow: inset 0 -3px 0 0 var(--m-rose);
}
#fp-switch .fp-note {
  font-size: .76rem; color: var(--m-muted); line-height: 1.45; margin-top: 4px;
}
#fp-switch .fp-fine { opacity: .72; margin-top: 7px; }

/* ============================================================
   REINVESTMENT USA, the section that had a machine and no face

   Eight endpoints shipped with no interface: trades recognised from
   posted ideas, professional accounts, published opinions, the purchase
   gate. What the page showed instead was four lines of deck language, 
   "economic impact scaling", "long-term wealth creation", so the only
   fair reading was that nothing had been built.

   Styled to the site's rules: statement rows rather than boxed tiles,
   rules rather than fills, and the numbers navy because a numeral is
   colour used as a mark. The one filled thing is the price on an
   opinion, and that is the same exception the map pins get, the fill
   is carrying information, not decoration.
   ============================================================ */

.rusa-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.24rem) !important;
  max-width: 62ch;
  margin: 0 auto clamp(2rem, 3.4vw, 2.9rem) !important;
}

.rusa-steps {
  list-style: none;
  margin: 0 0 clamp(1.6rem, 2.6vw, 2.2rem);
  padding: 0;
  text-align: left;
  max-width: 760px;
  margin-inline: auto;
}
.rusa-steps > li {
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-top: 1px solid var(--m-line);
}
.rusa-steps > li:first-child { border-top: 0; }
.rusa-n {
  font-family: var(--m-sans);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.03em;
  color: var(--m-rose);
  flex: none;
  min-width: 1.4rem;
}
.rusa-steps h4 {
  font-family: var(--m-sans);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.012em;
  color: var(--m-ink);
  margin: 0 0 .3rem;
}
.rusa-steps p { margin: 0; font-size: .97rem; }

/* the live count, the section's only claim about itself, and it is measured */
.rusa-live {
  font-family: var(--m-sans);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--m-muted) !important;
  padding: .9rem 0;
  border-top: 1px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
  margin: 0 auto clamp(1.8rem, 3vw, 2.6rem) !important;
  max-width: 760px;
}

.rusa-block {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 3.4vw, 2.9rem);
  text-align: left;
}
.rusa-block h4 {
  font-family: var(--m-sans);
  font-weight: 750;
  font-size: 1.16rem;
  letter-spacing: -.015em;
  color: var(--m-ink);
  margin: 0 0 .35rem;
}
.rusa-note { margin: 0 0 1rem !important; font-size: .93rem; color: var(--m-muted) !important; }
.rusa-empty { margin: 0 !important; font-size: .95rem; color: var(--m-muted) !important; }

.rusa-trades { display: flex; flex-wrap: wrap; gap: .5rem .55rem; }
.rusa-chip {
  font-size: .87rem;
  color: var(--m-body);
  border: 1px solid var(--m-line-firm);
  border-radius: 999px;
  padding: .32rem .8rem;
}
.rusa-chip b { color: var(--m-rose); margin-left: .4rem; font-weight: 700; }
.rusa-more { display: inline-block; margin-top: .9rem; }

/* one opinion, one line: what it answers, who wrote it, what it costs */
.rusa-op {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .9rem 0;
  border-top: 1px solid var(--m-line);
}
.rusa-op:first-child { border-top: 0; }
.rusa-op-t { font-weight: 650; color: var(--m-ink); flex: 1 1 auto; }
.rusa-op-m { color: var(--m-muted); font-size: .87rem; flex: 0 1 auto; }
.rusa-op-p { font-weight: 800; color: var(--m-rose); font-variant-numeric: tabular-nums; }

.rusa-forms { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.rusa-form { display: flex; flex-direction: column; gap: .5rem; min-width: 240px; flex: 1 1 240px; }
.rusa-form-wide { max-width: 100%; }
.rusa-form label {
  font-size: .72rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--m-muted);
}
.rusa-form input, .rusa-form textarea {
  font: inherit; font-size: .95rem;
  padding: .55rem .7rem;
  border: 1px solid var(--m-line-firm);
  border-radius: 7px;
  background: #fff; color: var(--m-ink);
}
.rusa-form textarea { resize: vertical; }
.rusa-form button {
  align-self: flex-start;
  font: inherit; font-size: .95rem; font-weight: 700;
  color: var(--m-ink); background: none; border: 0;
  border-bottom: 2px solid var(--m-rose);
  padding: .3rem 0; cursor: pointer;
}
.rusa-msg, .rusa-who { font-size: .93rem; margin: .8rem 0 0 !important; }
.rusa-who b { color: var(--m-ink); }

/* the trades an idea calls for, under the idea itself */
.idea-pros {
  display: flex; flex-wrap: wrap; gap: .4rem .45rem;
  align-items: center;
  margin: .9rem 0 .2rem;
  padding-top: .8rem;
  border-top: 1px solid var(--m-line);
}
.idea-pros-t {
  font-size: .7rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--m-muted); margin-right: .3rem;
}
.idea-pro {
  font-size: .82rem; color: var(--m-body);
  border: 1px solid var(--m-line); border-radius: 999px;
  padding: .22rem .62rem;
  cursor: help;
}

/* A trade is a link, so it has to look like one you can press. Same shape as
   before, a word inside a hairline, but it now goes somewhere: every idea
   waiting for that trade. Sized for a thumb, because the person who most
   needs this link is a professional reading on a phone. */
a.idea-pro, a.rusa-chip {
  text-decoration: none;
  transition: border-color .14s ease, color .14s ease;
}
a.idea-pro:hover, a.rusa-chip:hover {
  border-color: var(--m-rose);
  color: var(--m-rose);
}
a.idea-pro:focus-visible, a.rusa-chip:focus-visible {
  outline: none;
  box-shadow: inset 0 -3px 0 0 var(--m-navy);
}
@media (max-width: 640px) {
  a.idea-pro, a.rusa-chip { padding: .5rem .8rem; }
}

/* Tiered trade chips on an idea card. "Likely" carries full weight;
   "maybe" and the always-four step back, so the reader's eye lands on the
   claim the text actually supports. Same drawn shapes, nothing filled. */
.idea-pros-t.idea-pros-maybe { margin-left: .6rem; }
a.idea-pro-maybe {
  color: var(--m-muted);
  border-style: dashed;
}
a.idea-pro-maybe:hover { color: var(--m-rose); border-style: solid; }

/* The launchpad column is 760px, and everything in it sits on the same
   edges. The idea board was moved into the launchpad and arrived at its
   old full-page width, 1056px in a 760px column, sticking out 148px on
   each side. The owner saw it immediately: the frames were crooked. Every
   block in the flow now shares one pair of edges, measured, not assumed. */
.rusa .idea-board {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.rusa .rusa-lede {
  max-width: 760px;   /* was 62ch, which is 769px here: a 9px drift off the column */
}