/* =====================================================================
   ROYALMORTGAGE.ai  ·  site.css
   The PROOF SURFACE. Industry-facing. Loads AFTER css/royal-system.css.

   THIS FILE DEFINES NO TOKENS. Every color, size, radius and shadow
   below resolves through the shared system's :root. That is deliberate:
   the old css/royal.css carried its own :root block running the drifted
   navy (#152B6B), the drifted gold (#CAA25F) and the retired paper
   (#F8F6F1), and a local block like that silently outranks the system
   no matter what order the two files load in. It is retired. If a value
   needs to change, it changes in the system, once, for eight sites.

   Royal Mortgage LLC · NMLS #2059962
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. RAIL HARMONISATION
   Every page on this site uses ONE layout container: .wrap, the 1080
   marketing rail. Several system components are sized to .col (the
   620/680/720 front-door column) because that is where they were born.
   Inside the wide rail they take the rail's width instead, so a page
   never shows two different left edges.
   --------------------------------------------------------------------- */
.wrap .band,
.wrap .promise,
.wrap .trust,
.wrap .searchbox,
.wrap .askout,
.wrap .coins{width:100%}
.band h2::after{opacity:.5}


/* ---------------------------------------------------------------------
   2. THE HEADER LOCKUP
   Castle R + ROYAL MORTGAGE.ai, horizontal, in the brandbar.
   The SVG fills through the system tokens rather than the hard-coded
   #152B6B / #CAA25F the older copies of this mark shipped with.
   --------------------------------------------------------------------- */
/* 44px, including the header. The shared system sets `min-height:0` on
   .brandbar nav a, which drops those links to about 34px on the phone -
   the one place in the house where the tap floor is not met. Fixed here
   for this site rather than forked in the system; it belongs upstream and
   is written up in the build report. */
.lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  flex:none;min-height:44px}
.brandbar nav a{min-height:44px;display:inline-flex;align-items:center}
.lockup .castle{height:clamp(30px,4.4vw,38px);width:auto;flex:none;display:block}
.lockup .words{font-weight:800;color:var(--navy);letter-spacing:.005em;
  line-height:1;font-size:clamp(15.5px,2.6vw,21px);white-space:nowrap}
.lockup .words em{font-style:italic;color:var(--gold-deep)}
.lockup .sub{display:block;font-size:9px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-top:4px;white-space:nowrap}

header{border-bottom:1px solid var(--line-soft)}
.brandbar nav a.on{opacity:1;color:var(--gold-deep)}
.brandbar .navwrap{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  flex-wrap:wrap;justify-content:flex-end}
.brandbar .btn-primary{padding:10px 20px;font-size:13.5px;min-height:44px}

/* THE DOOR IN THE NAV.
   fast-pass.html is the one surface on this site where a person can act
   rather than read, so it is not a section like the five links beside it.
   It takes the gold and a hairline ring so it reads as a door, and it
   stays deliberately quieter than the navy walkthrough pill, which is
   still the primary call to action for the audience this site is written
   for. No new tokens: gold-deep is the gold that is readable as type.
   It is last in the nav and it is the only nav item that wraps to its own
   row at 390, which is where it should be — under the sections, above
   the audience line, on its own.

   THE STRING. The visible text of this link is "The application portal"
   and it is kept character-for-character identical on every page in this
   root, so it stays one find-and-replace. It is deliberately a plain
   description of where the link goes and NOT a product name: the pipeline
   product has a live Class 36 conflict against it and gets no name on a
   consumer surface at all. fast-pass.html carries the full note. Do not
   paraphrase this link and do not put a name back into it. */
.brandbar nav a.fpdoor{color:var(--gold-deep);font-weight:800;opacity:1;
  border:1px solid var(--gold);border-radius:999px;background:var(--card-tint);
  padding:6px 15px;white-space:nowrap}
.brandbar nav a.fpdoor:hover{background:var(--gold);color:var(--navy-ink)}

/* the audience line under the header — who this page is for, said once */
.forwho{background:var(--card-tint);border-bottom:1px solid var(--line-soft);
  font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.04em;
  text-align:center;padding:9px var(--gutter)}
.forwho b{color:var(--navy)}
.forwho a{color:var(--gold-deep);text-decoration:none;font-weight:800}
.forwho a:hover{text-decoration:underline}


/* ---------------------------------------------------------------------
   3. THE PROOF HERO
   Copy left, the standing-proof card right. One column until 768.
   --------------------------------------------------------------------- */
.phero{padding:clamp(34px,6vh,68px) 0 clamp(20px,3vh,34px)}
.phero .lede{max-width:52ch}
.phero .h-hero{max-width:16ch}
.pherogrid{display:block}
@media(min-width:900px){
  .pherogrid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(30px,4vw,56px);
    align-items:center}
}

/* the standing-proof card: the handful of facts that never change */
.proofcard{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--lift-2);
  margin-top:28px}
@media(min-width:900px){.proofcard{margin-top:0}}
.proofcard h3{font-size:11px;font-weight:800;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 12px}
.proofcard .kv{font-size:13px}
.proofcard .kv .v{max-width:60%}

/* the loud one-line claim under the hero */
.claim{margin-top:var(--sec);background:var(--card-tint);
  border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--r);padding:20px 24px;font-size:var(--fs-lede);
  color:var(--ink);font-weight:600;line-height:1.5}
.claim b{color:var(--navy)}


/* ---------------------------------------------------------------------
   4. SECTION HEADINGS ON THE WIDE RAIL
   --------------------------------------------------------------------- */
.sechead{margin-bottom:clamp(18px,2.6vh,28px)}
.sechead h2{max-width:22ch}
.sechead p{margin:10px 0 0;color:var(--muted);font-size:var(--fs-lede);
  max-width:64ch}
.sechead .eyebrow{margin-bottom:10px}


/* ---------------------------------------------------------------------
   5. THE LAYER STACK — the architecture, top to bottom
   A numbered rail. Each layer is a row: index, name, what it does,
   and what it hands to the layer under it.
   --------------------------------------------------------------------- */
.stack{display:flex;flex-direction:column;gap:0;counter-reset:layer}
.layer{display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:22px 0;border-bottom:1px solid var(--line-soft);position:relative}
.layer:last-child{border-bottom:none}
.layer .lnum{counter-increment:layer;width:38px;height:38px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;flex:none;
  font-weight:800;font-size:14px;letter-spacing:.02em}
.layer .lnum::before{content:counter(layer,decimal-leading-zero)}
.layer h3{margin:0 0 4px;font-size:var(--fs-h3);color:var(--navy)}
.layer .role{font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px}
.layer p{margin:0 0 10px;font-size:var(--fs-small);color:var(--muted)}
/* the handoff is a third column from 768 up. On the phone there are only two,
   so it has to take the whole row. Left sitting in the auto column it sized
   that column by its own sentence and crushed the body copy into a ribbon. */
.layer .handoff{grid-column:1/-1;font-size:12px;color:var(--ink-off);font-weight:600;
  display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.layer .handoff b{color:var(--navy);font-weight:800;letter-spacing:.06em;
  font-size:10px;text-transform:uppercase}
@media(min-width:768px){
  .layer{grid-template-columns:auto 1fr 1fr;gap:24px;align-items:start}
  .layer .handoff{grid-column:auto;flex-direction:column;gap:4px;padding-left:22px;
    border-left:2px solid var(--track)}
}


/* ---------------------------------------------------------------------
   6. AUDIENCE GRID — six doors, no coins
   The old hub shipped a coin grid of consumer products. That grid is
   gone. This site opens on WHO IT IS FOR, not on what you can buy.
   --------------------------------------------------------------------- */
.doors{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.doors{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{display:flex;flex-direction:column;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  text-decoration:none;color:var(--ink);min-height:0;
  transition:border-color .15s,transform .14s,box-shadow .15s}
.door:hover{border-color:var(--gold);transform:translateY(-3px);
  box-shadow:var(--lift-2)}
.door .dtag{font-size:10px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink)}
.door b{font-size:16.5px;color:var(--navy);letter-spacing:-.01em;line-height:1.3}
.door p{margin:0;font-size:var(--fs-small);color:var(--muted);flex:1}
.door .go{font-size:12.5px;font-weight:800;color:var(--navy);
  display:inline-flex;align-items:center;gap:6px;margin-top:2px}
.door:hover .go{color:var(--gold-deep)}
.door .go i{font-style:normal;transition:transform .15s}
.door:hover .go i{transform:translateX(3px)}
/* a door that is a statement rather than a link: same shape, no lift,
   no pointer. A card that lifts under the cursor and then does nothing
   is a dead click with extra steps. */
.door.static{cursor:default}
.door.static:hover{border-color:var(--line);transform:none;box-shadow:none}


/* ---------------------------------------------------------------------
   7. THE SPEC LIST — a checked list of plain statements
   --------------------------------------------------------------------- */
.specs{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr;gap:11px}
@media(min-width:768px){.specs.s2{grid-template-columns:1fr 1fr;gap:11px 26px}}
.specs li{position:relative;padding-left:28px;font-size:var(--fs-small);
  color:var(--muted);line-height:1.55}
.specs li b{color:var(--ink);font-weight:800}
.specs li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px;
  border-radius:50%;background:var(--gold);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6),inset 0 -2px 3px rgba(90,66,30,.4)}
.specs li::after{content:"";position:absolute;left:4.5px;top:11px;width:6px;height:3px;
  border-left:1.8px solid var(--navy-ink);border-bottom:1.8px solid var(--navy-ink);
  transform:rotate(-45deg)}
.specs.plain li::before{background:var(--track);box-shadow:none}
.specs.plain li::after{border-color:var(--muted)}
/* a spec list sitting inside the navy panel */
.panel .specs li{color:#C7CBE0}
.panel .specs li b{color:#fff}


/* ---------------------------------------------------------------------
   8. THE COMPARISON TABLE
   Wide content scrolls inside its own box. The page body never scrolls
   sideways.
   --------------------------------------------------------------------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table.tbl{border-collapse:collapse;width:100%;min-width:560px;
  font-size:var(--fs-small)}
table.tbl th,table.tbl td{text-align:left;padding:13px 18px;
  border-bottom:1px solid var(--line-soft);vertical-align:top}
table.tbl thead th{background:var(--card-tint);color:var(--navy);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl tbody th{font-weight:800;color:var(--navy);width:32%}
table.tbl td{color:var(--muted)}
table.tbl tr:last-child th,table.tbl tr:last-child td{border-bottom:none}
table.tbl td b{color:var(--ink)}
.tblnote{font-size:var(--fs-micro);color:var(--ink-off);margin:8px 0 0}


/* ---------------------------------------------------------------------
   9. THE PULL QUOTE
   --------------------------------------------------------------------- */
.pull{border-left:4px solid var(--gold);padding:6px 0 6px 22px;
  margin:clamp(24px,3.5vh,36px) 0}
.pull p{font-size:clamp(18px,2.6vw,25px);line-height:1.35;font-weight:800;
  color:var(--navy);letter-spacing:-.01em;margin:0 0 10px;max-width:26ch}
.pull cite{font-style:normal;font-size:12.5px;font-weight:700;color:var(--muted);
  letter-spacing:.04em}
.pull cite b{color:var(--ink)}


/* ---------------------------------------------------------------------
   10. THE STEP ROW — a short numbered sequence inside a panel
   --------------------------------------------------------------------- */
.steps{display:flex;flex-direction:column;gap:16px}
.step{display:flex;gap:14px;align-items:flex-start}
.stepnum{width:28px;height:28px;border-radius:50%;flex:none;background:var(--gold);
  color:var(--navy-ink);display:grid;place-items:center;font-weight:800;font-size:13px}
.step b{display:block;font-size:15px;color:#fff;line-height:1.35}
.step span{display:block;font-size:13px;color:#C7CBE0;line-height:1.5;margin-top:3px}
/* a plain link in the navy panel goes gold. A button does not — this rule
   outranks .btn-gold and was painting the one CTA on the site gold on gold. */
.panel a:not([class*="btn"]){color:var(--gold)}
.panel a:not([class*="btn"]):hover{color:#fff}
.panel .klabel{margin-bottom:10px;display:block}
.panel .steps{margin-top:6px}
@media(min-width:900px){
  .panel.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);
    align-items:start}
}


/* ---------------------------------------------------------------------
   11. THE ASK REGION
   ONE assistant per page, and the ask bar is the one. No floating avatar
   anywhere on this site.
   --------------------------------------------------------------------- */
.askblock{max-width:760px;margin-inline:auto;text-align:center}
.askblock .askrow{margin-top:16px}
.askblock .askout{margin-inline:auto;width:100%}
.askhint{font-size:12px;color:var(--ink-off);margin:10px 0 0;font-weight:600}
.askseeds{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.askseeds button{background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:8px 15px;font-size:12.5px;font-weight:700;
  color:var(--navy);cursor:pointer;font-family:inherit;min-height:44px;
  transition:border-color .12s,transform .12s}
.askseeds button:hover{border-color:var(--gold);transform:translateY(-1px)}
.askout .a{white-space:pre-wrap}
/* The thinking beat. The system draws three gold dots on an EMPTY .askout,
   but this panel always carries its q / a / hook children, so :empty can
   never match. Same three dots, driven by a class instead. */
.askout .dots{display:none;color:var(--gold-deep);letter-spacing:.2em;
  animation:royal-pulse 1.1s ease-in-out infinite;margin:0}
/* The glyphs come from ::after, not from the markup. An empty <p> styled
   block still measures zero high, so the animation was running on nothing
   and the thinking beat never appeared on screen. */
.askout .dots::after{content:"\25CF\00a0\25CF\00a0\25CF"}
.askout.thinking .dots{display:block}
.askout.thinking .a,.askout.thinking .hook{display:none}
.askout .q:empty,.askout .a:empty,.askout .hook:empty{display:none}


/* ---------------------------------------------------------------------
   12. THE EXHIBIT ROOM — assistant.html
   Carried forward from the interview room that shipped on this site,
   with one change that is the whole point of the page: there is no
   input. Nothing here asks a visitor for anything. The transcript is
   the assistant interviewing a scripted file, and the visitor drives the tape.
   --------------------------------------------------------------------- */
.room{width:100%;background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift-3);
  display:flex;flex-direction:column}
.roomtop{padding:13px 22px 11px;border-bottom:1px solid var(--line);
  background:var(--card-tint)}
.roomtop .sections{display:flex;gap:13px;flex-wrap:wrap;font-size:10.5px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-off)}
.roomtop .sections span.on{color:var(--gold-ink)}
.roomtop .sections span.done{color:var(--navy);opacity:.75}
.roomtop .bar{height:3px;margin:9px 0 0}

.chat{height:min(58vh,560px);min-height:340px;overflow-y:auto;padding:24px 22px 18px;
  display:flex;flex-direction:column;gap:13px;scroll-behavior:smooth}
.chat .row{display:flex;gap:10px;align-items:flex-end}
.chat .row.me{justify-content:flex-end}
.chat .avatar{width:36px;height:36px;border-radius:50%;flex:none;overflow:hidden;
  margin-bottom:2px;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, #c9a15f 52%, #a5814a 70%, #6a5330 100%);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.65), inset 0 -3px 6px rgba(90,66,30,.45)}
.chat .avatar span{width:66%;height:66%;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(90,66,30,.3)}
.chat .avatar img{max-width:72%;max-height:72%;display:block}
.chat .row .bubble{max-width:78%;padding:11px 16px;border-radius:var(--r);
  font-size:15px;line-height:1.55}
.chat .row.assistant .bubble{background:var(--card-tint);border:1px solid var(--line-soft);
  border-bottom-left-radius:5px;color:var(--ink)}
.chat .row.me .bubble{background:var(--navy);color:#fff;border-bottom-right-radius:5px;
  font-weight:600;border:none}
.typing{display:inline-flex;gap:5px;padding:6px 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.4;
  animation:xblink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes xblink{0%,60%,100%{opacity:.35;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}}

/* the cards ROYAL Ai lays down inside the transcript.
   Namespaced .xcard so they never collide with the system's .card. */
.xcard{max-width:88%;border-radius:var(--r);border-bottom-left-radius:5px;
  padding:15px 19px;font-size:13.5px}
.xcard b{display:block;font-size:14.5px;line-height:1.35}
.xcard p{margin:6px 0 0;line-height:1.55}
.xcard.human{background:var(--green-bg);border:1.5px solid #BFD7CA}
.xcard.human b{color:var(--green)}
.xcard.human p{color:#3D5A4C}
.xcard.note{background:var(--card-tint);border:1.5px solid var(--line)}
.xcard.note b{color:var(--navy)}
.xcard.note p{color:var(--muted)}
.xcard.price{background:linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;border:none}
.xcard.price .amtlab{font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.xcard.price .amt{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.xcard.price ul{margin:12px 0 0;padding:0;list-style:none}
.xcard.price li{font-size:13px;color:#D7DBEC;line-height:1.5;padding:4px 0 4px 20px;
  position:relative}
.xcard.price li::before{content:"";position:absolute;left:2px;top:11px;width:7px;
  height:7px;border-radius:50%;background:var(--gold)}

.filecard{max-width:92%;background:var(--card-tint);border:1.5px solid var(--line);
  border-radius:var(--r);border-bottom-left-radius:5px;padding:16px 20px;font-size:13.5px}
.filecard h4{margin:14px 0 4px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink)}
.filecard h4:first-child{margin-top:0}
.filecard .kv{font-size:13px;padding:4px 0}

/* the tape deck — the visitor drives the transcript, nobody types */
.deck{border-top:1px solid var(--line);background:var(--card-tint);
  padding:13px 18px 15px;display:flex;flex-direction:column;gap:11px}
.deckrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.deckrow .grow{flex:1;min-width:0}
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--navy);color:#fff;border:1.5px solid var(--navy);
  border-radius:var(--r-pill);padding:10px 20px;font-size:13.5px;font-weight:700;
  font-family:inherit;cursor:pointer;min-height:44px;
  transition:background .15s,transform .12s,border-color .15s}
.tbtn:hover{background:var(--navy-deep);transform:translateY(-1px)}
.tbtn.ghost{background:var(--card);color:var(--navy);border-color:var(--line)}
.tbtn.ghost:hover{background:var(--card);border-color:var(--gold)}
.tbtn:disabled{opacity:.45;cursor:default;transform:none}
.tbtn svg{width:15px;height:15px;fill:currentColor;flex:none}
.decklabel{font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-off)}
.deck .chips{display:flex;gap:8px;flex-wrap:wrap}
.deck .chip{font-size:12.5px;padding:8px 15px;min-height:44px}
.deckfoot{font-size:11.5px;color:var(--ink-off);font-weight:600;line-height:1.5}
.deckfoot b{color:var(--navy)}


/* ---------------------------------------------------------------------
   13. CAREERS
   --------------------------------------------------------------------- */
.role{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px}
.role + .role{margin-top:16px}
.role .rtop{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:6px}
.role h3{font-size:var(--fs-h2);color:var(--navy);margin:0}
.role .rmeta{display:flex;gap:8px;flex-wrap:wrap}
.role .lede{font-size:var(--fs-small);margin:8px 0 18px;max-width:70ch}
.role h4{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);margin:20px 0 10px}
.role h4:first-of-type{margin-top:0}


/* ---------------------------------------------------------------------
   14. PRESS
   --------------------------------------------------------------------- */
.assets{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.assets{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.assets{grid-template-columns:repeat(3,1fr)}}
.asset{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;display:flex;gap:16px;align-items:center;text-decoration:none;
  color:var(--ink);transition:border-color .15s,transform .14s}
.asset:hover{border-color:var(--gold);transform:translateY(-3px)}
.asset .shot{width:64px;height:64px;border-radius:12px;flex:none;
  background:var(--card-tint);border:1px solid var(--line-soft);
  display:grid;place-items:center;overflow:hidden}
.asset .shot img{max-width:78%;max-height:78%;display:block}
.asset .shot.navy{background:var(--navy);border-color:var(--navy)}
.asset b{display:block;font-size:14.5px;color:var(--navy);line-height:1.3}
.asset small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;
  margin-top:3px;line-height:1.45}

.swatches{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.sw{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  width:132px;background:var(--card)}
.sw .chipcolor{height:56px;display:block}
.sw .meta{padding:9px 11px}
.sw b{display:block;font-size:12px;color:var(--navy);letter-spacing:.02em}
.sw code{display:block;font-size:11px;color:var(--muted);font-weight:700;
  font-family:inherit;letter-spacing:.06em;margin-top:2px}

.usage{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:768px){.usage{grid-template-columns:1fr 1fr}}
.usebox{border:1px solid var(--line);border-radius:var(--r);padding:16px 19px;
  background:var(--card)}
.usebox.yes{border-left:4px solid var(--green)}
.usebox.no{border-left:4px solid var(--alert)}
.usebox h4{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 9px}
.usebox.yes h4{color:var(--green)}
.usebox.no h4{color:var(--alert)}
.usebox ul{margin:0;padding-left:18px}
.usebox li{font-size:var(--fs-small);color:var(--muted);line-height:1.6;
  margin-bottom:5px}
.usebox li:last-child{margin-bottom:0}
.usebox li b{color:var(--ink)}


/* ---------------------------------------------------------------------
   15. THE WALKTHROUGH REQUEST
   The one CTA on this site. It is not an application and it does not
   go near a borrower — it books a working session for a counterparty.
   --------------------------------------------------------------------- */
.reqwrap{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,44px)}
@media(min-width:960px){.reqwrap{grid-template-columns:1.1fr .9fr;align-items:start}}
.form{max-width:none}
.reqside{background:var(--card-tint);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px 26px}
.reqside h3{font-size:var(--fs-h3);margin:0 0 10px}
.reqside .kv{font-size:var(--fs-small)}
.agenda{list-style:none;margin:0;padding:0;counter-reset:ag}
.agenda li{counter-increment:ag;position:relative;padding:0 0 14px 34px;
  font-size:var(--fs-small);color:var(--muted);line-height:1.55}
.agenda li:last-child{padding-bottom:0}
.agenda li b{display:block;color:var(--ink);font-weight:800;margin-bottom:2px}
.agenda li::before{content:counter(ag);position:absolute;left:0;top:0;width:22px;
  height:22px;border-radius:50%;background:var(--navy);color:#fff;display:grid;
  place-items:center;font-size:11px;font-weight:800}
.sent{background:var(--green-bg);border:1.5px solid #BFD7CA;border-radius:var(--r);
  padding:18px 20px;margin-top:18px;display:none}
.sent.show{display:block}
.sent b{color:var(--green);display:block;font-size:15px;margin-bottom:6px}
.sent p{margin:0 0 10px;font-size:var(--fs-small);color:#3D5A4C}
/* the agenda sitting inside a navy panel: the navy counter disc would
   vanish against the panel, so it flips to gold */
.panel .agenda li{color:#C7CBE0}
.panel .agenda li b{color:#fff}
.panel .agenda li::before{background:var(--gold);color:var(--navy-ink)}
.sent pre{white-space:pre-wrap;word-break:break-word;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;
  font-family:inherit;font-size:12.5px;color:var(--ink);line-height:1.6;margin:0 0 12px;
  max-height:280px;overflow:auto}


/* ---------------------------------------------------------------------
   16. UTILITY PAGES — 404.html
   --------------------------------------------------------------------- */
.utility{text-align:center;max-width:620px;margin-inline:auto;
  padding:clamp(40px,10vh,110px) 0}
.utility .coin{margin:0 auto 26px}
.utility h1{margin-bottom:12px}
.utility p{color:var(--muted);font-size:var(--fs-lede);margin:0 auto 22px;max-width:46ch}
.utility .btnrow{justify-content:center}


/* ---------------------------------------------------------------------
   17. SMALL PARTS
   --------------------------------------------------------------------- */
.hairline{border:0;border-top:1px solid var(--line);margin:var(--sec) 0 0}
.metarow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.stamp{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stamp .seal{flex:none}
.anchornav{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.anchornav a{font-size:12.5px;font-weight:700;color:var(--navy);text-decoration:none;
  border:1.5px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;
  min-height:44px;display:inline-flex;align-items:center;
  transition:border-color .12s,transform .12s}
.anchornav a:hover{border-color:var(--gold);transform:translateY(-1px)}
.longfine{font-size:var(--fs-micro);color:var(--ink-off);line-height:1.7;
  max-width:80ch;margin-top:16px}

/* THE CONDITIONS FENCE.
   The block that travels with the closing-timeline sentence, and the only
   reason that sentence is allowed on a page at all. It is deliberately NOT
   micro type: this is copy a reader is expected to actually read, so it
   sits at the card body size rather than at .fine or .longfine. It goes on
   the same screen as the claim, immediately under it, never in the footer,
   never behind a hover, and it is never split in half or shortened to fit.
   If a layout cannot hold both, the claim comes off the layout. */
.fence{margin:16px 0 0;background:var(--card-tint);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 18px;font-size:var(--fs-small);
  color:var(--muted);line-height:1.65;max-width:80ch}
.fence b{color:var(--ink)}

[id]{scroll-margin-top:24px}


/* ---------------------------------------------------------------------
   18. THE PHONE FLOOR
   Corrections that only apply below the tablet break. Nothing here
   changes a layout — it fixes things that read as broken on a 390px
   screen and are already fine at desk width.
   --------------------------------------------------------------------- */
@media(max-width:767px){
  /* the micro size is right for an uppercase label with letterspacing on it.
     These three carry sentences a reader is expected to actually read, and
     10.5px is a squint on a phone. The labels are left alone. */
  .fine,.longfine,.tblnote{font-size:12px}

  /* the walkthrough placeholder is four lines wide on a phone and the box was
     cut for three, so the last line was sliced in half. */
  .field textarea{min-height:126px}
}

/* 599 and under, not 767: --col is min(620px,100%) below the tablet break, so
   the 560px table stops overflowing at roughly a 600px window. Above that
   there is nothing to scroll and nothing to fade. */
@media(max-width:599px){
  /* the wide table scrolls inside its own box, which is correct, but the cut
     lands mid-letter at the viewport edge and reads as a broken table rather
     than a scrollable one. A short fade says there is more to the right. */
  .tblwrap{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
}