/* ============================================================
         PAPER, the last layer, and the one that decides how this reads.

         A friend called the old site an AI-generated scam, and they were
         right. The tells were not subtle: a navy-to-violet gradient behind
         glowing headline text, an "INTEGRATED BUSINESS ECOSYSTEM" pill,
         invented statistics ("100% value chain owned"), and three cards
         reading Capital Efficient / Vertically Integrated / Compounding
         Growth. That is the house style of every fake company on the
         internet, and no amount of polish rescues it, the look itself is
         the problem.

         So: ink on paper. Warm white, near-black text, a book serif for
         anything large, hairline rules instead of glowing borders, and
         no gradient anywhere. Restraint reads as real; glow reads as sold.

         This layer only re-declares colour, type and edges. It does not
         touch layout, so nothing below it moves.
         ============================================================ */

      :root{
        /* Mirrors modern.css so a page loading only this sheet still has it. */
        --m-portal:#0F5132;
        /* Paper, not white, #fff under a headline looks like a login form.
           A little warmth reads as stock. */
        --psx-bg:#faf8f4; --psx-hero:#f5f1e8; --psx-connect:#faf8f4;
        --psx-card:#ffffff; --psx-node:#ffffff;
        --psx-text:#14110c; --psx-text2:#4a453d; --psx-muted:#6b655b;
        --psx-border:rgba(20,17,12,.13);
        --psx-rule:rgba(20,17,12,.10);
        /* ---- the four arms ----
           Four hues, one per business, because the company has four
           businesses and a reader needs to know which one they are in.
           This is not the old four-colour rotation: that gave card 2 a
           different hue from card 1 for no reason a reader could name.
           Here the hue IS the name. Oxblood on a page means real estate
           and nothing else, on every page, forever.

           They are held apart from the status colours on purpose. Nothing
           in an arm hue is ever a filled badge or an alert, because
           oxblood and sienna sit near the error red and a reader must
           never have to work out whether brown-red means "property" or
           "something went wrong". Arm hues mark WHERE YOU ARE; status
           colours mark WHAT HAPPENED. Different jobs, different places. */
        --psx-blue:#1b4d8f;      /* Transportation, and the company itself */
        --psx-slate:#1d4c4f;     /* Operations platform, and the free tools */
        --psx-oxblood:#7b2d26;   /* Real estate */
        --psx-sienna:#9c4221;    /* Finance, research */

        /* The live accent. Every rule below points at this, and only the
           [data-arm] blocks near the end of this file ever change it, so
           painting a new section is one attribute in the markup. */
        --psx-accent:var(--psx-blue);
        --psx-accent-rgb:27,77,143;   /* same colour, for rgba() tints */
        --psx-accent-dark:#16406f;    /* hover/pressed */

        /* Kept so the old markup class names still resolve. They were three
           decorative hues; they are now all the section's own accent. */
        --psx-indigo:var(--psx-accent); --psx-violet:var(--psx-accent);
        --psx-teal:var(--psx-accent);
        --psx-ink:#14110c;
        /* Three inks, and each one means something. Black is what the page SAYS,
           blue is what you can DO, and red is what NEEDS you, an error, a live
           signal, a field still waiting. Red is the second ink of printed pages
           for exactly this reason: it only works while it stays rare. Anything
           that is merely important is not red; it is bold black.
           Deep and slightly warm, so it belongs on cream rather than glaring
           off it the way a screen red does. */
        --psx-red:#a4161a; --psx-red-soft:#c1121f; --psx-red-wash:#fbeceb;

        /* ---- the company's own blue ----
           The wordmark and Book a ride are the company, not the page they sit
           on, so they hold one colour everywhere. That was written against
           --psx-blue, which modern.css redefines as its transport hue, so the
           pin moved with the layer, and the button came out a bright #1d4ed8
           screen blue on a page whose whole idea is ink on paper.

           This token exists to be un-repointable: nothing else in any layer
           refers to it, so changing the company blue is this one line and
           nothing else moves. Deep rather than bright, to sit on paper. */
        --psx-cta:#1b4d8f; --psx-cta-dark:#16406f;

        /* One variable decides the display face. Point it at Carna here if
           the licence is bought, @font-face above, then swap this line.
           Until then: real book faces that ship with macOS and Windows, so
           the page renders instantly with nothing fetched from anyone. */
        /* Latin book faces first, then a CJK serif, otherwise a Chinese or
           Korean headline falls back to a heavy system sans and the page
           stops looking like the same page. Songti/Ming/Batang are the
           printed-book faces on macOS and Windows respectively. */
        --psx-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
                      "Hoefler Text",Georgia,"Times New Roman",
                      "Songti SC","Songti TC","STSong",SimSun,"Noto Serif CJK SC",
                      "Apple SD Gothic Neo","Batang","Noto Serif KR",serif;
        --psx-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      }

      body{
        background:var(--psx-bg) !important;
        color:var(--psx-text) !important;
        font-family:var(--psx-sans);
        -webkit-font-smoothing:antialiased;
      }

      /* ---------- header: a masthead, not a nav bar ---------- */
      header{
        background:var(--psx-bg) !important;
        border-bottom:1px solid var(--psx-rule) !important;
        box-shadow:none !important;
        color:var(--psx-ink) !important;
      }
      .logo-text{
        font-family:var(--psx-display);
        font-weight:600 !important;
        letter-spacing:-.005em !important;
        background-image:none !important;
        -webkit-text-fill-color:var(--psx-ink) !important;
        color:var(--psx-ink) !important;
      }
      .logo-img{box-shadow:none !important;border:1px solid var(--psx-rule) !important;}
      nav a:hover{color:var(--psx-ink) !important;}

      /* ---------- hero: no glow, no gradient, no pill-with-a-dot ---------- */
      .psx-glow,.psx-glow-1,.psx-glow-2,.psx-dot{display:none !important;}
      #view-overview .psx-hero{
        background:var(--psx-hero) !important;
        border-bottom:1px solid var(--psx-rule);
      }
      #view-overview .psx-hero::before,#view-overview .psx-hero::after{display:none !important;}
      .psx-eyebrow-pill{
        background:transparent !important;border:none !important;
        color:var(--psx-muted) !important;font-family:var(--psx-sans);
        font-size:.78rem !important;font-weight:500 !important;
        letter-spacing:.16em !important;text-transform:uppercase;
        padding:0 !important;box-shadow:none !important;
      }
      /* .page-title is a div, not an h1, on six pages, the trip planner, the
         Destination Book, Guided Trips, Guide Studio, Favourite Places and
         Articles. Every one of them is the page's headline and every one was
         rendering in the system sans while the other twelve pages carried the
         serif, so the tools plainly did not belong to the same site as the
         front page. It is the page's headline; it takes the headline face. */
      .psx-h1,.psx-h2,.psx-h3,h1,h2,h3,.section-title,.hero h1,.page-title{
        font-family:var(--psx-display) !important;
        font-weight:600 !important;
        letter-spacing:-.012em !important;
        color:var(--psx-ink) !important;
        text-shadow:none !important;
      }
      /* The Real Estate sheet used to be an architect's blueprint, dark ground,
         pale linework, so its title block was held at #eaf4ff to stay legible
         on navy. The sheet is drawn on paper now, and that same pale title on
         cream measures 1.1:1, which is to say invisible. It takes the ink like
         every other heading; only the monospace title-block face is kept. */
      #view-realestate .bp-sheet h1,#view-realestate .bp-sheet h2,
      #view-realestate .bp-sheet h3,#view-realestate .bp-title h2{
        color:var(--psx-ink) !important;font-family:inherit !important;
      }
      /* The accent was a violet gradient. A real underline says the same thing
         without pretending to be lit from behind, and unlike a box-shadow
         highlight it follows the text across a line break instead of leaving
         a grey slab hanging off the end of each line. */
      .psx-accent{
        background:none !important;background-image:none !important;
        -webkit-text-fill-color:var(--psx-ink) !important;color:var(--psx-ink) !important;
        box-shadow:none !important;
        text-decoration:underline !important;
        text-decoration-color:rgba(var(--psx-accent-rgb),.42) !important;
        text-decoration-thickness:.055em !important;
        text-underline-offset:.14em !important;
      }
      /* Long display lines break better with a measure than without one:
         two balanced lines instead of three ragged ones. */
      .psx-h1{max-width:26ch;margin-left:auto;margin-right:auto;}
      .psx-h2{max-width:22ch;margin-left:auto;margin-right:auto;}
      .psx-sub,.psx-section-sub{max-width:56ch;margin-left:auto;margin-right:auto;}
      @supports (text-wrap:balance){
        .psx-h1,.psx-h2{text-wrap:balance;}
      }
      .psx-sub,.psx-section-sub,p{color:var(--psx-text2) !important;}
      .psx-eyebrow{color:var(--psx-muted) !important;font-weight:500 !important;}

      /* ---------- stats: rules, not a floating glass slab ---------- */
      .psx-divider{background:var(--psx-rule) !important;}

      /* ---------- cards: paper on paper ---------- */
      .psx-card,.service-card,.fin-card,.phase-card,.price-card,.psx-node,.card{
        background:var(--psx-card) !important;
        border:1px solid var(--psx-border) !important;
        box-shadow:0 1px 2px rgba(20,17,12,.04) !important;
        color:var(--psx-text) !important;
      }
      .psx-card:hover,.service-card:hover,.fin-card:hover{
        transform:none !important;
        box-shadow:0 2px 10px rgba(20,17,12,.07) !important;
        border-color:rgba(20,17,12,.22) !important;
      }
      .psx-card p,.service-card p,.fin-card > p{color:var(--psx-text2) !important;}
      /* the gradient icon tiles were the loudest "template" signal on the page */
      .psx-chip,.psx-chip-blue,.psx-chip-violet,.psx-chip-teal{
        background:transparent !important;background-image:none !important;
        color:var(--psx-accent) !important;
        border:1px solid var(--psx-border) !important;
        box-shadow:none !important;border-radius:4px !important;
      }

      /* ---------- ghost button ---------- */
      .psx-btn-ghost{
        background:transparent !important;color:var(--psx-ink) !important;
        border:1px solid rgba(20,17,12,.28) !important;box-shadow:none !important;
      }
      .psx-btn-ghost:hover{background:rgba(20,17,12,.04) !important;}
      .psx-btn{border-radius:3px !important;font-weight:500 !important;}

      /* ---------- footer: same paper, one rule ---------- */
      footer{
        background:var(--psx-hero) !important;
        border-top:1px solid var(--psx-rule) !important;
        color:var(--psx-text2) !important;
      }
      .psx-foot-mark span{
        font-family:var(--psx-display);
        background-image:none !important;
        -webkit-text-fill-color:var(--psx-ink) !important;color:var(--psx-ink) !important;
      }
      .psx-foot h4{color:var(--psx-ink) !important;}
      .psx-foot a,.psx-foot-brand p,.psx-foot-bottom{color:var(--psx-muted) !important;}
      .psx-foot a:hover{color:var(--psx-ink) !important;}
      .psx-foot-contact a{color:var(--psx-ink) !important;}
      .psx-foot-contact{border-top-color:var(--psx-rule) !important;}
      .psx-foot-mark img{border:1px solid var(--psx-rule);}

      /* ---------- sections and general surfaces ---------- */
      .psx-section,.view,main,.phases,#view-overview{background:var(--psx-bg) !important;}
      .psx-connect{background:var(--psx-connect) !important;}

      /* ---------- stage labels ----------
         The most persuasive thing on the page, because they are the only
         claims a reader can check and the only ones that admit a limit.
         Set as small caps in ink, not coloured badges, a badge decorates,
         a label states. Four cards need a tighter grid than three. */
      .psx-cards{gap:1.1rem !important;}
      @media (min-width:1000px){
        .psx-cards{grid-template-columns:repeat(4,1fr) !important;}
      }
      .psx-stage{
        /* align-self, because the card is a flex column and would otherwise
           stretch the label to the full card width, a banner, not a label. */
        display:inline-block;align-self:flex-start;margin-bottom:.85rem;
        font-family:var(--psx-sans);
        font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
        padding:.3rem .55rem;border-radius:2px;border:1px solid;
      }
      .psx-stage-live{color:#1b5e43;border-color:rgba(27,94,67,.34);background:rgba(27,94,67,.06);}
      .psx-stage-dev{color:#8a5a12;border-color:rgba(138,90,18,.34);background:rgba(138,90,18,.06);}
      .psx-stage-research{color:var(--psx-text2);border-color:var(--psx-border);background:rgba(20,17,12,.03);}
      .psx-card-link{
        display:inline-block;margin-top:1rem;
        color:var(--m-portal) !important;text-decoration:none;
        font-size:.9rem;font-weight:500;
      }
      .psx-card-link:hover{text-decoration:underline;}
      .psx-card{display:flex;flex-direction:column;}
      .psx-card .psx-card-link{margin-top:auto;padding-top:1rem;}

      /* ---------- section tabs: a contents strip, not a toolbar ---------- */
      .phase-tabs{
        background:var(--psx-bg) !important;
        border-bottom:1px solid var(--psx-rule) !important;
        box-shadow:none !important;backdrop-filter:none !important;
      }
      .phase-tab{
        color:var(--psx-text2) !important;
        border-radius:0 !important;
        border-bottom:2px solid transparent !important;
      }
      .phase-tab:hover{
        color:var(--psx-ink) !important;background:transparent !important;
        border-bottom-color:var(--psx-rule) !important;
      }
      /* The current section is marked by a rule under it, the way a printed
         contents page marks a place, not by a blue gradient lozenge. */
      .phase-tab.active,.phase-tab.active:hover{
        color:var(--psx-ink) !important;
        background:none !important;background-image:none !important;
        font-weight:600 !important;
        border-bottom:2px solid var(--psx-ink) !important;
        box-shadow:none !important;
      }
      .sections-trigger,.nav-back{
        background:transparent !important;
        color:var(--psx-text2) !important;
        border:1px solid var(--psx-border) !important;
      }
      .sections-trigger:hover,.nav-back:hover{
        background:rgba(20,17,12,.04) !important;color:var(--psx-ink) !important;
      }

      /* ---------- the language switcher ----------
         This was `background:var(--psx-ink) !important`, a paper-era ink pill.
         It is a THIRD authority over one component (paper.css, modern.css's
         :not() chain, and the widget's own injected <style>), and being
         !important it beat the widget: the switcher's own rule set the word
         navy while this kept the ground near-black, rendering navy-on-black at
         1.74:1. The component owns its appearance; this rule stands down. */
      #i18nBtn{
        border-color:var(--m-line-firm,#d3d3da) !important;
      }

      @media (prefers-reduced-motion:reduce){
        .psx-card,.service-card,.fin-card{transition:none !important;}
      }

      /* ============================================================
         ICONS, drawn, not pasted.

         The tiles used to be pastel-filled rounded squares in three
         rotating hues, which is the same decorative instinct as the
         gradient headline: colour standing in for meaning. On paper a
         mark reads better as a mark. Hairline square, ink stroke, and
         the icon inherits colour from its card.
         ============================================================ */
      .service-icon,.fin-card-icon{
        width:44px !important;height:44px !important;
        border-radius:3px !important;
        display:flex !important;align-items:center;justify-content:center;
        background:transparent !important;
        border:1px solid var(--psx-border) !important;
        color:var(--psx-accent) !important;
        margin-bottom:1.05rem !important;
        font-size:0 !important;            /* kills stray whitespace nodes */
      }
      /* the hue rotation went with the pastel tiles */
      .service-card:nth-child(3n+2) .service-icon,
      .service-card:nth-child(3n+3) .service-icon{
        background:transparent !important;border-color:var(--psx-border) !important;
        color:var(--psx-accent) !important;
      }
      .ico{width:22px;height:22px;display:block;}
      .service-card:hover .service-icon,.fin-card:hover .fin-card-icon{
        border-color:rgba(var(--psx-accent-rgb),.4) !important;
      }

      /* ---------- tab icons ----------
         Small enough to be a bullet rather than a picture, they help the
         eye find a place in a strip that scrolls on a phone, and stop
         short of turning a contents list into a toolbar. */
      .tab-ico{
        width:15px;height:15px;margin-right:.45rem;
        vertical-align:-2px;opacity:.62;flex:0 0 auto;
      }
      .phase-tab{display:inline-flex !important;align-items:center;}
      .phase-tab:hover .tab-ico{opacity:.85;}
      .phase-tab.active .tab-ico{opacity:1;}

      /* ============================================================
         THE REST OF THE SITE
         Booking, the planner, the book and the portals were each built
         with their own navy header and blue gradient buttons. Same paper
         treatment, so moving between pages doesn't feel like moving
         between sites. Owner tools, dispatch, archive, board, are
         deliberately left alone; they are instruments, not shopfront.
         ============================================================ */
      body{background:var(--psx-bg) !important;color:var(--psx-text) !important;}
      header a:hover{color:var(--psx-ink) !important;}
      header img{border:1px solid var(--psx-rule) !important;}

      h1,h2,h3,h4{font-family:var(--psx-display) !important;color:var(--psx-ink) !important;}
      .card,.panel,.box{
        background:#fff !important;
        border:1px solid var(--psx-border) !important;
        border-radius:4px !important;
        box-shadow:0 1px 2px rgba(20,17,12,.04) !important;
      }

      /* Buttons: ink, square-ish, no lift on hover. A button that jumps
         when you point at it reads as a landing page, not a booking form. */
      /* The Pollock bubbles are <button> too, and a blanket button rule
         painted every one of them ink and squared off their hand-drawn
         edges. They carry their own paper styling in floatback.js. */
      /* The starting-point control is not a call to action, it is the map's
         black pin, sitting beside the address bar so the two read as one thing.
         Painted ink like every other button, its pin went black-on-black and
         the waiting state had nothing left to say. It styles itself. */
      /* The two ids in the :not() chains below are written as attribute
         selectors on purpose. An id inside :not() scores as an id, which
         lifted these blanket button rules above anything a later stylesheet
         could say without resorting to tricks, they outranked the surface
         layer's own button colours and painted every call to action ink.
         Written this way they match exactly the same buttons and behave
         identically on their own; they simply no longer outrank the layer
         that is meant to sit on top of them. */
      button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.here-btn),
      .btn,.book-cta{
        background:var(--psx-ink) !important;background-image:none !important;
        color:#fff !important;border:1px solid var(--psx-ink) !important;
        border-radius:3px !important;box-shadow:none !important;
        font-weight:600 !important;
      }
      button:not(.i18n-opt):not([id="i18nBtn"]):not(.pk-bubble):not([id="pollock"]):not(.loc-btn):not(.here-btn):hover:not(:disabled){
        background:#000 !important;transform:none !important;box-shadow:none !important;
      }
      /* On paper: a cream face, an ink pin, and red only while it waits. */
      .loc-btn{
        background:var(--psx-card) !important; color:var(--psx-text) !important;
        border:1px solid var(--psx-border) !important; border-radius:3px !important;
        font-weight:600 !important;
      }
      .loc-btn .pin-badge{ background:var(--psx-ink) !important; color:#fff !important; }
      .loc-btn.located{ border-color:var(--psx-teal) !important; color:var(--psx-teal) !important; }
      .loc-btn.located .pin-badge{ background:var(--psx-teal) !important; }
      .loc-btn.needs-start{ border-color:var(--psx-red-soft) !important; color:var(--psx-red) !important; }
      .loc-btn.needs-start .pin-badge{ background:var(--psx-red) !important; }

      input,textarea,select{
        background:#fff !important;
        border:1px solid var(--psx-border) !important;
        border-radius:3px !important;
        color:var(--psx-text) !important;
        font-family:var(--psx-sans);
      }
      input:focus,textarea:focus,select:focus{
        border-color:var(--psx-accent) !important;
        box-shadow:0 0 0 3px rgba(var(--psx-accent-rgb),.13) !important;
        background:#fff !important;
      }
      /* The map must keep its own colours, it is data, not decoration. */
      .leaflet-container,.leaflet-container *{font-family:var(--psx-sans);}

      /* ============================================================
         LEFTOVERS
         Found by walking every route and flagging any sizeable visible
         block still painted dark or still carrying a gradient. Body
         background alone was not enough of a test, these all sat on
         pages whose <body> had already turned to paper.
         ============================================================ */
      html{background:var(--psx-bg) !important;}

      /* login panels on the driver and dispatch pages */
      .auth,.auth-box{
        background:#fff !important;
        border:1px solid var(--psx-border) !important;
        color:var(--psx-text) !important;
        border-radius:4px !important;box-shadow:0 1px 2px rgba(20,17,12,.05) !important;
      }
      .auth-overlay{background:rgba(250,248,244,.95) !important;}
      .auth *,.auth-box *{color:inherit !important;}
      .auth h1,.auth h2,.auth-box h1,.auth-box h2{color:var(--psx-ink) !important;}

      /* Deflator panels, Factor Clock readouts, dispatch tiles, partner stats */
      .status,.conv,.wait,.fine,.big,.pricebox,.stat,.tool,.card-dark,.panel-dark{
        background:#fff !important;
        border:1px solid var(--psx-border) !important;
        color:var(--psx-text) !important;
        border-radius:4px !important;
        box-shadow:0 1px 2px rgba(20,17,12,.04) !important;
      }
      .status *,.conv *,.wait *,.fine *,.big *,.pricebox *,.stat *,.tool *{
        color:inherit !important;
      }
      .big strong,.pricebox strong,.stat strong,.tool strong,
      .big b,.stat b{color:var(--psx-ink) !important;}
      a.tool:hover{border-color:rgba(20,17,12,.28) !important;background:#fffdf9 !important;}

      /* the last gradient buttons on the site */
      .btn.blue,.btn-blue,a.btn.blue{
        background:var(--psx-ink) !important;background-image:none !important;
        color:#fff !important;border:1px solid var(--psx-ink) !important;
        box-shadow:none !important;
      }

      /* the final two: a gradient CTA panel on the front page, and the
         dispatch table's dark header row */
      .psx-cta-panel{
        background:var(--psx-hero) !important;background-image:none !important;
        border:1px solid var(--psx-border) !important;border-radius:4px !important;
        box-shadow:none !important;
      }
      .board{background:#fff !important;border:1px solid var(--psx-border) !important;}
      table th{
        background:var(--psx-hero) !important;
        color:var(--psx-ink) !important;
        border-bottom:1px solid var(--psx-border) !important;
      }
      table td{border-bottom:1px solid var(--psx-rule) !important;color:var(--psx-text) !important;}

      /* Factor Clock's sky-blue call to action, the last off-palette fill.
         Caught only after widening the sweep from "dark or gradient" to
         "any solid fill that is not one of ours"; a light colour passed the
         first test while still belonging to the old scheme. */
      .cta{
        background:var(--psx-ink) !important;background-image:none !important;
        color:#fff !important;border:1px solid var(--psx-ink) !important;
        box-shadow:none !important;border-radius:3px !important;
      }
      .cta:hover{background:#000 !important;}

/* ---- map attribution ----
   Leaflet ships its credit line in a grey that measures 3.6:1 on its own
   backdrop. The licence requires the credit to be shown; showing it faintly
   is not showing it. */
.leaflet-control-attribution,
.leaflet-control-attribution a { color: #4a453d !important; }
.leaflet-control-attribution { background: rgba(255,255,255,.94) !important; }

      /* ============================================================
         COLOUR, FORWARD.

         The paper pass left the accent doing almost nothing, 4% of the
         page, and all of it on small parts: icon strokes, a link, a focus
         ring. Correct by the numbers and monochrome to look at. Restraint
         became absence.

         The accent moves onto the parts a reader actually looks at: the
         primary action, the figures, and the section labels. Ink still
         carries the type, so the page is still ink on paper, but now
         something in it is blue on purpose.
         ============================================================ */

      /* Named primary actions take the accent; a plain <button> stays ink.

         That split is not what this comment used to claim, it said the
         accent applies to every button, and the stylesheet has been doing
         the opposite the whole time. The ink rule further up carries one
         extra :not(), which outranks this one no matter that it comes
         first, so a bare <button> renders black. Measured, not read.

         Leaving it that way, because it is the better hierarchy: one
         accent call-to-action per view and ink for every form submit
         under it. Two sienna buttons stacked in the same panel was what
         made the mismatch visible in the first place. */
      button:not(.i18n-opt):not([id="i18nBtn"]):not(.cancel-btn):not(.pk-bubble):not([id="pollock"]):not(.here-btn),
      .btn.blue,.btn-blue,.cta{
        background:var(--psx-accent) !important;background-image:none !important;
        border-color:var(--psx-accent) !important;color:#fff !important;
      }
      .cta:hover,
      button:not(.i18n-opt):not([id="i18nBtn"]):not(.pk-bubble):not([id="pollock"]):not(.here-btn):hover:not(:disabled){
        background:var(--psx-accent-dark) !important;border-color:var(--psx-accent-dark) !important;
      }

      /* Figures carry the accent, the number is the thing being read. */
      .psx-stat-val,.tile .n{color:var(--psx-accent) !important;}

      /* Section labels: the accent at small size, where it reads as a
         marker rather than as decoration. */
      .psx-eyebrow,.psx-eyebrow-pill,.fs{color:var(--psx-accent) !important;}

      /* And the wordmark, so the masthead is not pure black either. */

      /* ============================================================
         THE FOUR ARMS, colour as an index, not as decoration.

         The company has four businesses and the site has one page per
         business plus a stack of tool pages hanging off them. Until now
         every one of those looked identical, so a reader who clicked
         three levels deep had no idea which business they were inside.
         That is the actual job colour is good at, and the only job it
         gets here.

         Blue      Transportation, and the company itself, because
                   transportation is what the company currently is.
         Slate     Operations platform, and every free tool it runs.
         Oxblood   Real estate.
         Sienna    Finance, in research.

         One attribute paints a page: data-arm on the <body> of a
         standalone page, or on a .view / .psx-card inside the landing
         page. Everything below inherits through --psx-accent.

         The rule that keeps this from becoming the old decoration: a
         reader must be able to say what a colour MEANS. Four hues that
         name four businesses pass that test. Four hues rotating across
         cards for variety do not, which is why they were removed.
         ============================================================ */

      [data-arm="transportation"]{
        --psx-accent:var(--psx-blue);   --psx-accent-rgb:27,77,143;   --psx-accent-dark:#16406f;
      }
      [data-arm="operations"]{
        --psx-accent:var(--psx-slate);  --psx-accent-rgb:29,76,79;    --psx-accent-dark:#163a3c;
      }
      [data-arm="realestate"]{
        --psx-accent:var(--psx-oxblood);--psx-accent-rgb:123,45,38;   --psx-accent-dark:#63241e;
      }
      [data-arm="finance"]{
        --psx-accent:var(--psx-sienna); --psx-accent-rgb:156,66,33;   --psx-accent-dark:#7d351a;
      }
      /* The company itself, for pages that belong to no single arm, 
         the overview, the security page, setup. */
      [data-arm="company"]{
        --psx-accent:var(--psx-blue);   --psx-accent-rgb:27,77,143;   --psx-accent-dark:#16406f;
      }

      /* ---------- two things never take an arm colour ----------

         The wordmark and the Book a ride button belong to the company,
         not to whichever page they happen to be sitting on. A masthead
         that changes colour as you browse is not a masthead, and a
         primary action that is blue on one page and rust on the next
         stops being recognisable as the same button, which is the one
         thing a conversion button cannot afford. Both are pinned. */
      .logo-text,.psx-foot-mark span{
        -webkit-text-fill-color:var(--psx-cta) !important;
        color:var(--psx-cta) !important;
      }
      /* The Book a ride button is painted once, in modern.css, as an
         underline in the company navy. What stood here was a filled blue
         version of the same control, correct when it was written, and
         superseded. Two rules for one button is how this file got the way it
         is, so the older one goes rather than being out-specified. */

      /* ---------- and neither does anything that means something ----------
         "Located" is a success state, not a section. It was reading the
         arm colour through the old --psx-teal alias, which would have
         made a found address rust-coloured on the finance pages. */
      .loc-btn.located{ border-color:#1b5e43 !important; color:#1b5e43 !important; }
      .loc-btn.located .pin-badge{ background:#1b5e43 !important; }

      /* ---------- where the colour actually shows ----------

         The four business cards on the front page are where a reader
         learns the code, so this is the one place the hue is a block of
         colour rather than a line of text: a rule across the top of the
         card, the way a printed index tabs its sections. Everything
         after that, the tab you clicked, the page you land on, repeats
         the colour you were just taught. */
      .psx-cards .psx-card[data-arm]{
        border-top:3px solid var(--psx-accent) !important;
        border-radius:0 3px 3px 3px !important;
      }
      .psx-cards .psx-card[data-arm]:hover{
        border-color:rgba(20,17,12,.22) !important;
        border-top-color:var(--psx-accent) !important;
      }

      /* The contents strip: the current section is marked in its own colour,
         so the tab and the page underneath agree.

         The TEXT colour used to be set here too, and it was doing real damage.
         modern.css marks the current section as an ink pill with white text, 
         `.phase-tab.active`, specificity (0,2,0). This rule is (0,3,0), so it
         won, and the live site drew the arm's blue on modern's near-black
         pill: 2.94:1 against a 4.5 floor, on every section tab, on the front
         page. Eight failures, and the fix that would have been reached for is
         a louder rule here, which is how nine stylesheets happened.

         So the old declaration comes out instead. The mark stays a rule in the
         arm's colour, which is what it was for; whoever owns the tab's fill
         owns the text that sits on it. */
      .phase-tab[data-arm].active,.phase-tab[data-arm].active:hover{
        border-bottom:2px solid var(--psx-accent) !important;
      }

      /* The loop diagram names three of the four arms, so it uses their
         colours rather than three shades of the same one. */
      .psx-flow .psx-node[data-arm] .psx-badge{
        background:transparent !important;background-image:none !important;
        color:var(--psx-accent) !important;
        border:1px solid var(--psx-accent) !important;
        box-shadow:none !important;
      }
      .psx-flow .psx-node[data-arm]{border-top:2px solid var(--psx-accent) !important;}

      /* A section heading on an arm page gets a short rule in its
         colour, enough to place the page, not enough to shout. */
      .view[data-arm] .psx-head .psx-eyebrow::after,
      .view[data-arm]:not(#view-realestate) > .phases h2::after{
        content:"";display:block;width:34px;height:2px;
        background:var(--psx-accent);margin-top:.55rem;
      }

      /* ============================================================
         NO GRADIENTS, enforced here rather than asserted in a doc.

         PALETTE.md has said twice that gradients are "verified absent on
         every route". Both times that was written, not measured, and both
         times it was false: a radial blue glow under the front-page CTA,
         amber gradient badges on the pricing and finance cards, a dark
         gradient on the agent code panel, and a blue-to-teal bar on the
         Deflator. A gradient is the single most recognisable tell of a
         generated site, which is the whole reason the rule exists, so it
         is now a rule the stylesheet keeps rather than a claim.

         Two exemptions, both deliberate and both drawn rather than
         decorative: the Real Estate blueprint sheet, whose grid IS a
         gradient, and the hatch on a zero-value Deflator track, which
         encodes "no data" rather than dressing up a fill.
         ============================================================ */
      .psx-cta-glow{display:none !important;}
      .fin-num,.price-badge,.mycode,.conv-fill,.car,.psx-cta-glow,
      a.primary,.btn-grad,.badge-grad{
        background-image:none !important;
      }
      a.primary{background-color:var(--psx-accent) !important;color:#fff !important;}
      .fin-num,.price-badge{background-color:#8a5a12 !important;color:#fff !important;}
      .mycode{background-color:var(--psx-ink) !important;color:#fff !important;}
      .conv-fill{background-color:var(--psx-accent) !important;}
      .conv-fill.neutral{background-color:var(--psx-muted) !important;}
      .car{background-color:var(--psx-card) !important;}

      /* ============================================================
         STRAGGLERS, legible, but not chosen.

         Passing contrast is not the same as belonging to the palette. A
         sweep for text colours outside the token set turned up eleven
         that all clear AA and none of which anyone picked: two Tailwind
         ambers, a Tailwind red on the required-field asterisk, three
         badge colours a shade off the status colours they were imitating,
         a slate-blue arrow, and, on the Destination Book, a link with
         no styling at all, rendering in the 1994 browser default blue.

         This is the difference between a page that is accessible and a
         page that looks designed. Snapped to the tokens.
         ============================================================ */

      /* A link with nothing else claiming it is still a link. The bare
         rule goes last so any styled link above keeps its own colour. */
      a:not([class]):not([id]){color:var(--m-portal);}

      /* Destination Book category badges, a taxonomy, so they keep three
         distinguishable hues; they were just a shade off the ones the rest
         of the site already uses. */
      .b-rest,.soon-badge{color:#8a5a12 !important;}

      /* Red means a field still needs you, that is what --psx-red is for. */
      .req{color:var(--psx-red) !important;}

      /* The loop arrows are punctuation between nodes, not content. */
      .psx-arrow{color:var(--psx-muted) !important;}

      /* Selling a route is a link, so it takes the section's accent like
         every other link rather than a leftover amber. */
      .act-link{color:var(--psx-accent) !important;}
      .gate{color:var(--psx-text2) !important;}
      .total{color:var(--psx-accent) !important;}


/* ---- the masthead on a phone ----
   At 375px the header was 113px tall before a word of content: the wordmark
   broke across three lines and "Book a Ride" was squeezed into a 35px column
   reading "Book / a / Ride" down the screen. Nothing was overflowing, so
   nothing looked broken, it was simply eating a third of the screen.

   Three changes, no markup: the links stop wrapping and scroll sideways if
   they must, the wordmark takes a size that fits, and the row is allowed to
   be a row. */
@media (max-width: 560px) {
  header {
    padding: 0.7rem 0.9rem !important;
    gap: 0.55rem !important;
    align-items: center !important;
    /* The row was pinned to one line, and the wordmark was the only thing in
       it allowed to shrink, so on a page with a wide nav it shrank away.
       Measured at 375px: the destination book 2px, which paints as a stray
       vertical stroke between the mark and "Home", the booking page 79px,
       articles 114px and driver 189px, all cut mid-word, and the home page
       0px. The reason the row was pinned was "Book / a / Ride" stacking down
       a column, and that is now prevented at the link itself (white-space:
       nowrap, below), so the pin is no longer earning its keep. The row
       wraps: the nav drops to its own line when it cannot share one, and
       does not move at all on a page where everything already fits. */
    flex-wrap: wrap !important;
    row-gap: 0.35rem !important;
  }
  /* The home page nests its own row (.header-top) inside the header, so
     wrapping the OUTER header only strands the share button on a third line,
     112px against 143px measured. That page wraps one level down instead. */
  header:has(.header-top) { flex-wrap: nowrap !important; }
  .header-top { flex-wrap: wrap !important; row-gap: 0.3rem !important; }
  .header-top > div { flex: 1 1 auto !important; }

  /* img.logo, not .logo. Every .logo in this site is a DIV wrapping the mark
     and the wordmark together, so sizing it to 30px squeezed the wordmark
     inside it to zero: that, not the flex row, is why the home page carried
     no wordmark at all. The rule was always meant for the image. */
  header img, header img.logo, header img.psx-logo {
    height: 30px !important; width: 30px !important; flex: 0 0 auto;
  }
  header .brand, header .logo-text {
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
    min-width: 0;                      /* shrink and reflow rather than push the nav out */
    /* min-width:0 lets the wordmark shrink, and on a page whose nav refuses to
       shrink it shrinks all the way to a ZERO WIDTH BOX. A zero width box with
       visible overflow still PAINTS, so on the destination book the wordmark
       was drawn straight across the nav and "Home" sat on top of "Solution".
       Measured: box 0px wide, text 57px, four lines, header 93px tall.
       The home page never had this because its .logo-text already clips; this
       is the same rule, applied to every masthead. One line rather than four,
       so a wordmark with no room takes no height either, and an ellipsis where
       there is SOME room so what shows is a word and not a cut letter. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  @media (max-width: 400px) {
    header .brand, header .logo-text { font-size: 0.84rem !important; }
  }
  /* The nav gets its width first. Sharing the row proportionally left it 21px
     short and "Book a Ride" was clipped to "Book a R", a cut-off call to
     action being worse than a wordmark that takes an extra line. */
  header .right, header .links, header nav {
    margin-left: auto;
    display: flex !important;
    gap: 0.75rem !important;
    flex: 0 0 auto !important;
    /* Refusing to shrink is what stopped "Book a Ride" being clipped, and it
       is also what pushed whole pages sideways: a nav with four links wants
       425px and a phone is 390px, so the page itself scrolled off its axis and
       the site read as crooked. max-width and min-width keep the strip inside
       its own row instead of dragging the page with it.

       That stopped the page going crooked and left the links UNREACHABLE
       instead. The strip scrolled, but the scrollbar is hidden on purpose, so
       nothing on screen said there was more. Measured on the trip planner at
       375px: the strip wanted 466px in a 335px row, and THREE items sat past
       the right edge with no cue, including "Book a Ride", which is the one
       link on this site that earns money.

       So the strip wraps to a second line rather than scrolling. Each link
       still refuses to break inside itself (white-space: nowrap below), so the
       old failure of "Book / a / Ride" stacked down a 35px column cannot come
       back: a wrap now happens BETWEEN links, never inside one. overflow-x
       stays as a last-resort backstop for a single link wider than the row.
       Measured after: 335px in a 335px row, two rows, nothing hidden, page
       still exactly 375 wide. It costs 47px of masthead, which is the honest
       price of five 44px touch targets that do not fit on one line. */
    flex-wrap: wrap !important;
    justify-content: flex-end;
    row-gap: 0.2rem !important;
    column-gap: 0.6rem !important;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  header .right::-webkit-scrollbar,
  header .links::-webkit-scrollbar,
  header nav::-webkit-scrollbar { display: none; }
  header .right a, header .links a, header nav a {
    white-space: nowrap !important;    /* "Book a Ride" is three words, not three lines */
    font-size: 0.82rem !important;
  }
}


/* ---- nothing slides the page sideways ----
   Three pages did, each for its own reason: a chip row that would not wrap, a
   partner table wider than the screen, and a form row eight pixels over. The
   symptom is the same and so is the rule, wide content scrolls inside its own
   box, the page itself never does. */
@media (max-width: 560px) {
  html, body { overflow-x: hidden; }

  /* A table is genuinely wide; let it scroll in place rather than shrink its
     columns into unreadable slivers. */
  .card table, .p-card table, table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Rows of chips, filters and form fields wrap instead of running off. */
  .chips, .filters, .row, .addrow, .build-row, .durations, .stay-opts {
    flex-wrap: wrap !important;
  }

  /* An input with a fixed width is the usual last eight pixels. */
  input, select, textarea { max-width: 100%; }
}


/* ---- any row of chips is a row ----
   Chips injected by script land in a bare container, inherit block layout and
   the default line-height, and a 29px chip on a 19px line overlaps the row
   beneath it. It is not visible in the markup and it is not visible until the
   second row appears, which is why it shipped. Stated once, for every such row. */
.chips, .filters, .frow, [id$="Chips"], [id$="chips"], #starFilter, .durations, .stay-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  line-height: 1.3;
}