/* ==========================================================================
   portal.css  —  the drop portal, extracted from hero-portal-mockup.html

   WHAT WAS LEFT BEHIND, AND WHY IT MATTERS
   ----------------------------------------
   The mockup was a standalone page, so its stylesheet opened with

       *{margin:0;padding:0;box-sizing:border-box}
       body{font-family:...;color:...;line-height:1.6}

   Loading that on index.html would zero the margin and padding of every
   element on the homepage — nav, hero, cards, footer — and override the
   body font. The page would still render; it would just be wrong
   everywhere, in a way that looks like a hundred separate bugs.

   The reset is kept because the portal's own rules were written assuming
   it, but SCOPED to the two containers that need it. Its own :root
   variables move onto those containers too: they do not collide today
   (the site prefixes everything --a-) and scoping means they cannot start
   to.

   Also dropped: .nav, .hero, .band and .bt. Those styled the mockup's
   fake page chrome. index.html has a real navbar, a real carousel hero
   and its own sections, and .hero in particular is defined in three site
   stylesheets — importing the mockup's version would have replaced the
   homepage hero with the mockup's.

   Renamed: .card -> .p-card. The only genuine collision of the 153
   classes the portal defines, against aurus-2026.css and mobile.css.
   ========================================================================== */

/* THE PORTAL SITS ON NAVY; THE SHEET SITS ON WHITE.

   Both were given color:var(--ink) below, which is #16243A — correct
   inside the sheet and dark navy on dark navy inside the portal. The
   heading rendered in a colour four points off its own background.

   White on #0A1F3D is 16.3:1. The supporting line at #C3D0DE is 10.4:1
   and the reassurance row at #8FA3BE is 6.3:1; both were already right
   and only the heading inherited the wrong value. */
:where(#portal) { color:#fff; }
#portal .p-t { color:#fff; }

/* Same reasoning as the reset below: the variables and the font are a
   base that every rule in this file should be able to override. */
:where(#portal, #sheet, #scrim, .sg-wrap) {
  --navy:#0A1F3D;
  --gold:#FFC107; --gold-2:#F5A623;
  --ink:#16243A; --muted:#6B7A90; --faint:#9AA7B8;
  --line:#E7EBF0; --line-2:#F1F4F7;
  --hi:#D9534F; --hi-bg:#FDEEED;
  --med:#E8A33D; --med-bg:#FDF6EA;
  --lo:#3E9E7A; --lo-bg:#EDF7F3;
  font-family:"Source Sans Pro","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* The scoped reset — WRAPPED IN :where() SO IT CARRIES NO SPECIFICITY.

   Written first as `#portal *, #sheet *`, which is an ID selector at
   (1,0,0) and therefore beats every class rule in this file. A reset is
   supposed to be the floor; that one was the ceiling.

   The visible damage: `.s-inner{max-width:1180px;margin:0 auto}` lost its
   auto margins and the whole sheet sat hard against the left edge with
   400px of white on the right. Every other margin and padding the portal
   sets was being flattened the same way — spacing between cards, list
   indents, the gap under headings. It read as "the page needs
   reformatting" because a hundred rules were silently losing at once.

   :where() matches identically and contributes zero to specificity, so
   the reset applies and every class rule below still wins. */
:where(#portal, #sheet) *,
:where(#portal, #sheet) *::before,
:where(#portal, #sheet) *::after {
  margin:0; padding:0; box-sizing:border-box;
}

/* THE HERO SPLIT.

   The mockup put the portal beside the hero copy, and that is where it
   belongs: a drop zone below the fold is a feature nobody finds.

   Implemented as a grid INSIDE .hero rather than a change to .hero. That
   section is styled by three stylesheets — main.css sets flex and a vh
   height, aurus-2026.css overrides it to flex-column with !important,
   aurus-pages.css overrides the alignment again. Touching it means
   fighting all three. A child grid inherits none of that argument.

   The portal is a sibling of .hero-carousel, not a child. Inside it, it
   would become a sixth grid-area:stack item and fade in and out with the
   slides; it has to stay put while they rotate.
*/
.hero-split {
  /* ABOVE THE DIAGONAL.

     .hero-background is z-index 1 and .diagonal-overlay inside it is
     z-index 2 — a clip-path trapezoid painted over the right 60% of the
     hero, which is exactly where the portal sits. The slide copy escapes
     it only because main.css gives .hero-content z-index 10; nothing gave
     this grid a layer, so the overlay covered the drop zone.

     3 clears the overlay and stays below .hero-content, so nothing about
     the existing stacking changes. */
  position:relative;
  z-index:3;
  width:100%;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:44px;
  align-items:center;
  max-width:1240px;
  margin:0 auto;
  padding:0 26px;
}
.hero-split-main { min-width:0; }

/* The slide copy already sits in .container, which carries its own
   max-width and auto margins. Inside a narrower column that centres the
   text and leaves a gutter it does not need. */
.hero-split-main .container { max-width:100%; padding-left:0; padding-right:0; }
.hero-split-main .hero-content { max-width:none; }
.hero-split-main .carousel-dots { justify-content:flex-start; padding-left:0; }

/* Below 1000px the portal drops under the copy at full width. Two columns
   on a phone gives a drop zone too narrow to read and copy too narrow to
   scan. */
@media (max-width: 1000px) {
  .hero-split { grid-template-columns:1fr; gap:28px; }
  .hero-split #portal { min-height:220px; padding:34px 24px; }
}

@media (max-width: 900px) {
  }

.hide{display:none!important}
button{font:inherit}
.tagx{font-size:10.5px;letter-spacing:.09em;background:var(--line-2);color:var(--muted);padding:3px 8px;border-radius:4px;font-weight:600}
.btn-s{font-size:15px;padding:11px 26px;border-radius:26px;text-decoration:none;font-weight:600}
.btn-o{color:var(--gold-2);border:1.5px solid var(--gold-2)}
.btn-g{background:var(--gold);color:var(--navy)}
/* LEFT RAIL - two rows that never share space:
     row 1  the rotating slide
     row 2  the pagination dots

   The slides are stacked in a SINGLE grid cell rather than absolutely
   positioned. That matters: an absolutely positioned slide is invisible to
   its parent's height, so a slide with more copy than the box overflows and
   lands on whatever is below it. Sharing one grid cell makes the stack size
   itself to the TALLEST slide, so the dots row is always clear no matter how
   long any slide's copy gets. */
.rail{display:grid;grid-template-rows:auto auto;gap:30px;align-content:center}
.slide-stack{display:grid}
.slide{
  grid-area:1/1;                 /* every slide occupies the same cell */
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s .55s;
}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s}
/* each slide lays its own content out top-down and fills the shared cell */
.slide > *{width:100%}
/* the slide is a flow container: its own spacing, contained to its own cell */
.slide{display:flex;flex-direction:column;align-items:flex-start}
.pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:9px 22px;font-size:15px;font-weight:600;color:var(--gold);margin-bottom:28px;width:auto!important}
.hb{padding:19px 34px;border-radius:32px;font-size:16.5px;font-weight:700;text-decoration:none;display:inline-block}
.hb-1{background:var(--gold);color:var(--navy)}
.hb-2{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.dots{display:flex;gap:14px;align-items:center;min-height:26px}
.dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.28);border:none;cursor:pointer;padding:0;position:relative;transition:width .3s ease,background .3s ease}
.dot::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.dot.on{width:34px;border-radius:6px;background:var(--gold)}
/* quiet marker so a paused carousel does not read as a broken one */
.paused{
  font-size:11.5px;color:#8FA3BE;margin-left:8px;letter-spacing:.04em;
  opacity:0;transition:opacity .25s ease;
}
.paused.on{opacity:1}
/* ===== PORTAL ===== */
/* GOLD, NOT WHITE.

   A white dashed border on navy reads as a disabled field — the same
   treatment the eye has learned to skip. Gold is the one colour on this
   page that means "act here", and it is already carrying the primary
   button and the highlight in the headline.

   Held at 55% so it invites rather than shouts: full gold competes with
   the Start Free button two hundred pixels to its left, and there should
   be one loudest thing in a hero. Blended over #0A1F3D that is roughly
   3.4:1 against the background — above the 3:1 WCAG floor for a non-text
   interface boundary. It goes solid on hover and on drag, where it does
   need to shout. */
.portal{border:2px dashed rgba(255,193,7,.55);border-radius:18px;background:rgba(255,193,7,.04);padding:52px 34px;text-align:center;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center}
@media(hover:hover){
.portal:hover{background:rgba(255,193,7,.1);border-color:var(--gold);transform:translateY(-3px)}
}
.portal:hover{background:rgba(255,193,7,.09);border-color:rgba(255,193,7,.85)}
.portal.drag{background:rgba(255,193,7,.17);border-color:var(--gold);transform:scale(1.015)}
.portal.launching{opacity:0;transition:opacity .18s ease}
.p-icon{font-size:38px;color:var(--gold);margin-bottom:18px;line-height:1}
.p-t{font-size:25px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.p-s{font-size:16.5px;color:#C3D0DE;max-width:36ch;line-height:1.55}
.p-w{margin-top:26px;font-size:13.5px;color:#8FA3BE;display:flex;gap:8px 20px;justify-content:center;flex-wrap:wrap}
.p-w span::before{content:"\2713 ";color:var(--gold);font-weight:700}
/* ===== MORPH ===== */
.scrim{position:fixed;inset:0;background:rgba(6,24,41,.62);backdrop-filter:blur(5px);z-index:90;opacity:0;pointer-events:none;transition:opacity .34s ease}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;z-index:100;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 34px 100px rgba(6,24,41,.45);display:none;flex-direction:column;
  transition:top .48s cubic-bezier(.22,1,.28,1),left .48s cubic-bezier(.22,1,.28,1),
             width .48s cubic-bezier(.22,1,.28,1),height .48s cubic-bezier(.22,1,.28,1);
}
.sheet.up{display:flex}
.s-head{display:flex;align-items:center;gap:16px;padding:18px 26px;flex:none;border-bottom:1px solid var(--line)}
.s-mark{font-size:21px;font-weight:700;color:var(--navy);letter-spacing:-.03em;flex:none}
.s-mark span{color:var(--gold-2)}
.s-file{flex:1;display:flex;align-items:center;gap:11px;min-width:0;border:1px solid var(--line);border-radius:22px;padding:8px 18px}
.s-n{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-m{font-size:13px;color:var(--faint);white-space:nowrap;flex:none}
@media(max-width:640px){
.s-m{display:none}
}
.s-x{flex:none;width:40px;height:40px;border-radius:20px;border:none;background:var(--line-2);color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.s-x:hover{background:var(--ink);color:#fff}
.s-body{flex:1;overflow-y:auto;padding:28px 34px 40px}
.s-inner{max-width:1180px;margin:0 auto}
.s-body::-webkit-scrollbar{width:8px}
.s-body::-webkit-scrollbar-thumb{background:#D6DDE6;border-radius:4px}
.stage{opacity:0;transform:translateY(10px)}
.stage.in{animation:rise .42s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.status{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--muted);margin-bottom:24px}
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--gold-2);border-radius:50%;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.tick{width:17px;height:17px;border-radius:50%;background:var(--lo-bg);color:var(--lo);font-size:10px;text-align:center;line-height:17px;font-weight:700;flex:none}
.q{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.q em{font-style:normal;color:var(--gold-2)}
.q-s{font-size:15px;color:var(--muted);margin-bottom:20px}
.opts{display:grid;gap:10px;margin-bottom:22px;max-width:680px}
.opt{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:16px 18px;cursor:pointer;transition:.15s;background:#fff}
.opt:hover{border-color:#D2DBE5;background:#FCFDFE}
.opt.sel{border-color:var(--gold-2);background:#FDF7EC}
.rd{width:17px;height:17px;border:2px solid #C7D1DD;border-radius:50%;margin-top:3px;flex:none;position:relative}
.opt.sel .rd{border-color:var(--gold-2)}
.opt.sel .rd::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--gold-2)}
.opt-t{font-size:16px;font-weight:600;display:block;line-height:1.35}
.opt-d{font-size:14px;color:var(--muted);display:block}
.ack{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--muted);margin-bottom:22px;cursor:pointer;max-width:680px}
.bx{width:20px;height:20px;border:2px solid #C7D1DD;border-radius:4px;flex:none;margin-top:1px;position:relative}
.ack.on .bx{border-color:var(--gold-2);background:var(--gold-2)}
.ack.on .bx::after{content:"\2713";position:absolute;inset:0;color:#fff;font-size:12px;font-weight:700;line-height:16px;text-align:center}
.ack a{color:var(--gold-2)}
.go{background:var(--navy);color:#fff;border:none;border-radius:9px;min-height:52px;padding:14px 36px;font-size:16.5px;font-weight:600;cursor:pointer}
.go:hover:not(:disabled){background:#0F2A50}
.go:disabled{opacity:.3;cursor:not-allowed}
/* ===== RECOGNITION SCREEN =====
   Evidence chips carry the facts the classifier actually pulled out of the
   file, so the screen proves it read the document rather than guessed. */
.ev{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 6px;max-width:100%}
.ev-i{display:inline-flex;align-items:center;gap:7px;background:#F4F7FA;border:1px solid #E1E8F0;border-radius:8px;padding:7px 13px;font-size:13.5px;color:#2C3E52}
.ev-i b{font-weight:700;color:var(--navy)}
.ev-i.warn{background:#FDF6EA;border-color:#F0DFBE;color:#7A5A12}
.doclist{margin:18px 0 6px;border:1px solid #E1E8F0;border-radius:12px;overflow:hidden;max-width:100%}
.dr{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid #EDF1F6;font-size:14px}
.dr:last-child{border-bottom:none}
.dr-k{flex:0 0 96px;font-size:10.5px;letter-spacing:.09em;font-weight:700;text-transform:uppercase;padding:5px 9px;border-radius:6px;text-align:center}
.dr-k.po{background:#EAF2FB;color:#2B5C96}
.dr-k.inv{background:#FDF6EA;color:#8A6A16}
.dr-k.rec{background:#EDF7F3;color:#2F7A5E}
.dr-k.leg{background:#F1EDFB;color:#5B4494}
.dr-k.unk{background:#F2F4F7;color:#5A6875}
.dr-n{flex:1;color:var(--navy);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-m{color:var(--muted);font-size:13px;flex:0 0 auto;text-align:right}
/* ===== SENSITIVE-CONTENT DECLINE ===== */
.dec-badge{display:inline-block;background:#FDEEED;color:#B23F3C;border:1px solid #F3D3D1;font-size:11.5px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;padding:6px 14px;border-radius:14px;margin-bottom:20px}
.dec-p{font-size:16.5px;line-height:1.68;color:#3A4B5C;max-width:88ch;margin-bottom:15px}
.dec-q{color:var(--muted);font-size:15px;border-left:3px solid #E1E8F0;padding-left:15px}
.dec-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
.go2{background:#fff;color:var(--navy);border:1.5px solid #D3DCE6;border-radius:9px;min-height:52px;padding:14px 28px;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer}
.go2:hover{border-color:var(--navy)}
.dec-go{background:var(--gold);color:var(--navy)}
.dec-go:hover:not(:disabled){background:#E8A800;color:var(--navy)}
/* ===== REDLINE ===== */
.rl-file{font-size:13.5px;color:var(--muted);font-weight:600;margin-bottom:16px;letter-spacing:.01em}
.rl-stats{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.rl-s{background:#F4F7FA;border:1px solid #E1E8F0;border-radius:11px;padding:14px 20px;min-width:132px}
.rl-s b{display:block;font-size:27px;font-weight:700;color:var(--navy);line-height:1.15}
.rl-s span{font-size:13px;color:var(--muted)}
.rl-sevs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.rl-sv{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:9px 15px;font-size:13.5px;border:1px solid}
.rl-sv i{width:9px;height:9px;border-radius:50%}
.rl-sv b{font-weight:700}
.rl-sv.hi{background:#FDEEED;border-color:#F3D3D1;color:#A33F3C}
.rl-sv.hi i{background:#D9534F}
.rl-sv.med{background:#FDF6EA;border-color:#F0DFBE;color:#8A6A16}
.rl-sv.med i{background:#E8A33D}
.rl-sv.lo{background:#EDF7F3;border-color:#CFE7DD;color:#2F7A5E}
.rl-sv.lo i{background:#3E9E7A}
.rl-c{border:1px solid #E1E8F0;border-left:4px solid #C9D4DF;border-radius:11px;padding:17px 20px;margin-bottom:13px;background:#fff}
.rl-c.hi{border-left-color:#D9534F}
.rl-c.med{border-left-color:#E8A33D}
.rl-c.lo{border-left-color:#3E9E7A}
.rl-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.rl-dot{width:9px;height:9px;border-radius:50%;background:#C9D4DF;flex:0 0 auto}
.rl-c.hi .rl-dot{background:#D9534F}
.rl-c.med .rl-dot{background:#E8A33D}
.rl-c.lo .rl-dot{background:#3E9E7A}
.rl-t{font-weight:700;color:var(--navy);font-size:16px}
.rl-k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:5px}
.rl-mod{background:#FDF6EA;color:#8A6A16}
.rl-add{background:#EDF7F3;color:#2F7A5E}
.rl-del{background:#FDEEED;color:#A33F3C}
.rl-tag{font-size:11.5px;color:#5A6875;background:#F2F4F7;border-radius:5px;padding:3px 9px}
.rl-w{font-size:13.5px;color:var(--muted);margin-bottom:10px;font-style:italic}
.rl-b{font-size:15px;line-height:1.75;color:#33404E}
.rl-b del{background:#FDEEED;color:#A33F3C;text-decoration:line-through;text-decoration-thickness:1.5px;padding:1px 3px;border-radius:3px}
.rl-b ins{background:#EDF7F3;color:#25674F;text-decoration:underline;text-decoration-thickness:1.5px;padding:1px 3px;border-radius:3px}
/* ===== TYPE CONFIRMATION =====
   The classifier proposes, the person disposes. Asserting a document type
   at a lawyer and moving on is how you lose them at the first screen. */
.cf{background:#F8FAFC;border:1px solid #E1E8F0;border-radius:12px;padding:16px 18px;margin:18px 0 6px;max-width:820px}
.cf-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cf-q{font-size:15px;font-weight:700;color:var(--navy)}
.cf-v{font-size:14px;color:#2C3E52;background:#fff;border:1px solid #D8E1EA;border-radius:7px;padding:6px 13px;font-weight:600}
.cf-y{margin-left:auto;background:var(--navy);color:#fff;border:none;border-radius:8px;padding:9px 17px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer}
.cf-y:hover{background:#0F2A50}
.cf-y.done{background:#EDF7F3;color:#2F7A5E;cursor:default}
.cf-n{background:#fff;color:#3A4B5C;border:1px solid #D8E1EA;border-radius:8px;padding:9px 15px;font-size:14px;font-family:inherit;cursor:pointer;font-weight:600}
.cf-n:hover{border-color:var(--navy);color:var(--navy)}
.cf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:7px;margin-top:15px;padding-top:15px;border-top:1px solid #E1E8F0}
.cf-o{background:#fff;border:1px solid #DDE5ED;border-radius:7px;padding:10px 13px;font-size:13.5px;color:#33404E;cursor:pointer;text-align:left;font-family:inherit}
.cf-o:hover{border-color:var(--gold);background:#FFFDF6}
/* ===== END-OF-BUILD PANEL ===== */
/* ===== CHALLENGE BAND =====
   Navy on UI gold measures 10.4:1, well clear of AA at any weight. */
.nx-band{background:var(--gold);border-radius:13px;padding:22px 26px;margin:26px 0 26px;max-width:100%;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.nx-band.in{opacity:1;transform:none}
.nx-band-k{font-size:11px;letter-spacing:.15em;font-weight:700;color:#5C4400;margin-bottom:9px}
.nx-band-t{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.28;margin-bottom:8px}
.nx-band-s{font-size:15.5px;line-height:1.6;color:#3A2E08;max-width:96ch}
@media(max-width:700px){
.nx-band{padding:18px 18px}
.nx-band-t{font-size:19px}
}
.dec-badge.nx{background:#EDF7F3;color:#2F7A5E;border-color:#CFE7DD}
.nx-steps{margin:22px 0 20px;max-width:100%}
/* AP reconciliation results. Reuses the redline stat/severity styling
   above; only the gap callouts and the exception rows are new. */
.ap-gaps{margin:18px 0 10px}
.ap-gap{border-radius:11px;padding:13px 16px;margin-bottom:9px;border:1px solid}
.ap-gap.hi{background:#FDEEED;border-color:#F2C4C2}
.ap-gap.med{background:#FDF6EA;border-color:#F0DCB4}
.ap-gap b{display:block;font-size:15px;color:var(--navy);margin-bottom:3px}
.ap-gap span{font-size:14.5px;line-height:1.6;color:#4A5568}
.ap-x{border:1px solid #E7EBF0;border-left-width:3px;border-radius:11px;padding:13px 16px;margin-bottom:9px}
.ap-x.hi{border-left-color:var(--hi)}
.ap-x.med{border-left-color:var(--med)}
.ap-x.lo{border-left-color:var(--lo)}
.ap-x-h{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
.ap-x-b{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:3px 10px;white-space:nowrap}
.ap-x-b.hi{background:var(--hi-bg);color:#A5342F}
.ap-x-b.med{background:var(--med-bg);color:#8A5A08}
.ap-x-b.lo{background:var(--lo-bg);color:#2F7A5E}
.ap-x-t{font-size:15.5px;font-weight:700;color:var(--navy)}
.ap-x-d{font-size:14.5px;line-height:1.62;color:#4A5568}
.ap-clean{max-width:100%}
.rl-warn{color:#A5342F;font-weight:700}
.nx-s{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid #EDF1F6}
.nx-s:last-child{border-bottom:none}
.nx-i{flex:0 0 26px;height:26px;border-radius:50%;background:#F2F4F7;color:#5A6875;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.nx-s.done .nx-i{background:#EDF7F3;color:#2F7A5E}
.nx-t{font-weight:700;color:var(--navy);font-size:15.5px}
.nx-d{font-size:14px;color:var(--muted);margin-top:2px}
.nx-tag{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:5px;background:#F2F4F7;color:#5A6875;margin-left:8px}
.nx-s.done .nx-tag{background:#EDF7F3;color:#2F7A5E}
.note-line{font-size:13.5px;color:var(--muted);margin-top:16px;max-width:820px}
.pstep{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--faint);padding:12px 0;opacity:0;transform:translateY(6px)}
.pstep.in{animation:rise .35s ease forwards}
.pstep.on{color:var(--ink)}
.pstep.done{color:var(--muted)}
.pd{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none;margin-top:9px;transition:.3s}
.pstep.on .pd{background:var(--gold-2);box-shadow:0 0 0 5px #FDF4E3}
.pstep.done .pd{background:var(--lo)}
/* ===== DASHBOARD ===== */
.dash{display:grid;gap:18px;grid-template-columns:1fr;margin-bottom:10px}
@media(min-width:920px){
.dash{grid-template-columns:290px 1fr 1fr}
}
.p-card{border:1px solid var(--line);border-radius:12px;padding:20px 22px;background:#fff}
.p-card h4{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:18px}
.donut-mid{position:relative;width:132px;height:132px;margin:0 auto}
.donut{width:132px;height:132px;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:16}
.donut .trk{stroke:var(--line-2)}
.donut .seg{transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1),stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.donut-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-num b{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.donut-num span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.legend{display:grid;gap:10px;margin-top:20px}
.lg{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--muted)}
.lg i{width:11px;height:11px;border-radius:3px;flex:none}
.lg b{color:var(--ink);font-variant-numeric:tabular-nums;margin-left:auto;font-size:15px}
.bars{display:grid;gap:15px}
.bar-top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.bar-top span{color:var(--muted)}
.bar-top b{font-variant-numeric:tabular-nums}
.bar-trk{height:9px;background:var(--line-2);border-radius:5px;overflow:hidden}
.bar-fil{height:100%;width:0;border-radius:5px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.cmp{display:grid;gap:17px}
.cmp-lbl{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:10px}
.cmp-lbl span{color:var(--muted);font-size:14px}
.cmp-lbl b{font-size:12px;padding:2px 9px;border-radius:10px;white-space:nowrap}
.cmp-track{position:relative;height:24px;background:var(--line-2);border-radius:5px}
.cmp-you{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.cmp-mkt{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);border-radius:1px}
.sec-h{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:32px 0 4px}
.sec-s{font-size:15px;color:var(--muted);margin-bottom:18px}
.fnd{padding:18px 0;border-bottom:1px solid var(--line-2);opacity:0;transform:translateY(9px);animation:rise .45s cubic-bezier(.2,.8,.2,1) forwards}
.f-h{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.sev{font-size:11.5px;padding:2px 10px;border-radius:11px;font-weight:600;flex:none}
.sev.hi{background:var(--hi-bg);color:var(--hi)}
.sev.med{background:var(--med-bg);color:#A5711C}
.sev.lo{background:var(--lo-bg);color:var(--lo)}
.f-t{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35;flex:1 1 auto;min-width:0}
.f-c{font-size:13px;color:var(--faint);flex:none}
@media(min-width:540px){
.f-c{margin-left:auto}
}
.f-b{font-size:15px;color:var(--muted);line-height:1.62}
/* keep the last findings clear of the dock's resting spot */
.fnd:last-child{margin-bottom:60px}
/* ===== FLOATING ACTION DOCK ===== */
.dock{
  position:absolute;right:26px;bottom:26px;width:258px;z-index:30;
  background:#fff;border:1px solid var(--navy);border-radius:13px;overflow:hidden;
  box-shadow:0 14px 44px rgba(6,24,41,.24);
  opacity:0;transform:translateY(12px) scale(.97);pointer-events:none;
  transition:opacity .38s cubic-bezier(.2,.8,.2,1),transform .38s cubic-bezier(.2,.8,.2,1);
  -webkit-user-select:none;user-select:none;
}
.dock.up{opacity:1;transform:none;pointer-events:auto}
.dock.moving{transition:none;box-shadow:0 22px 60px rgba(6,24,41,.28)}
.dock-grip{
  display:flex;align-items:center;gap:10px;padding:11px 13px;
  cursor:grab;touch-action:none;
  background:var(--navy);
  border-bottom:2px solid var(--gold);
}
.dock.moving .dock-grip{cursor:grabbing;background:#0F2A50}
.grip-dots{display:grid;grid-template-columns:repeat(2,3px);gap:3px;flex:none}
.grip-dots i{width:3px;height:3px;border-radius:50%;background:rgba(245,166,35,.75);display:block}
/* text on navy is the wordmark gold */
.dock-t{font-size:13.5px;font-weight:700;letter-spacing:-.01em;flex:1;color:var(--gold-2)}
.dock-min{
  flex:none;width:24px;height:24px;border:none;background:rgba(255,255,255,.1);
  color:#C3D0DE;font-size:15px;line-height:1;cursor:pointer;border-radius:6px;
}
.dock-min:hover{background:var(--gold);color:var(--navy)}
.dock-body{padding:12px}
.dock.small .dock-body{display:none}
.dock-p{font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:10px}
.dock-row{display:grid;gap:6px}
.db{
  border:1px solid var(--line);background:#fff;border-radius:7px;
  padding:9px 11px;font-size:13.5px;font-weight:600;color:var(--ink);
  cursor:pointer;text-align:left;display:flex;align-items:center;gap:8px;
}
.db:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.db-k{font-size:11px;color:var(--faint);margin-left:auto}
.db:hover .db-k{color:rgba(255,255,255,.6)}
.dock-note{font-size:11px;color:var(--faint);margin-top:10px;line-height:1.4}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}


/* ── processing screen ────────────────────────────────────────────────
   The rotating status line and the upgrade banner. Both sit inside
   #vProc, which is only ever visible while a run is in flight. */
.p-work {
  font-size: 15.5px; line-height: 1.6; color: var(--muted);
  min-height: 46px; margin-bottom: 18px; max-width: 74ch;
  opacity: 0; transition: opacity .45s ease;
}
.p-work.in { opacity: 1; }


/* ── the persistent upgrade strip ─────────────────────────────────────
   A single line under the sheet header, visible on every screen from
   recognition through to results.

   It was a 20px-padded panel inside the processing view before: it
   existed for three seconds, on one screen, and was reported as missing.
   Real estate is the constraint here -- the visitor came for their own
   document, not for this -- so it gets one line and 44px, permanently,
   rather than a card that appears and goes.

   Gold left edge rather than a gold fill. A filled bar at the top of
   every screen competes with the result underneath it; a rule and a line
   of text reads as a note and still gets seen. */
.s-up {
  flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 26px;
  background: #FFFCF3;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}
.s-up-t {
  flex: 1; min-width: 0;
  font-size: 13.5px; line-height: 1.5; color: #5A4A18;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-up-b {
  flex: none; background: var(--navy); color: #fff; border: 0;
  border-radius: 18px; padding: 6px 16px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.s-up-b:hover { background: #0d2b52; }
@media (max-width: 640px) {
  .s-up { padding: 10px 16px; gap: 10px; }
  .s-up-t { white-space: normal; }
}