/* ==========================================================================
   Mr. Paint — Digital Service Book, public customer portal

   The printed poster is the brief. A customer scans the QR on it and must land
   somewhere that is obviously the same thing — so the two colours and the two
   typefaces below are the poster's, not an interpretation of it. The blue and
   the orange were sampled out of the artwork itself rather than guessed:

       #262d85   the panel, the title, the footer band
       #d65a1c   the rule under the title, the "Secure" strip, every accent

   The old palette (near-black navy, #d81f26 red) is gone. If either value ever
   needs to change, change it in the artwork first and re-sample.
   ========================================================================== */

/* Self-hosted rather than fetched from a font CDN: this is a public page for
   customers, and it should not make a third-party request on their behalf or
   stop looking like itself when that third party is unreachable. Inter is one
   variable file covering every weight used here. */
/* Regular is here because the second line of the masthead asks for it. Without
   it, `font-weight:normal` does not fall back to something lighter — CSS font
   matching walks upward from 400 and lands on 700, so the rule would look like
   it had no effect at all. */
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/poppins-400.woff2) format('woff2');
}
/* 600 exists for the masthead alone. Asking for a weight that is not shipped
   is not a smaller step — it is no step: CSS font matching walks *upward* from
   any target above 500, so `font-weight:600` with only 400/700/800 present
   renders as 700 and looks like the rule did nothing. */
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/poppins-600.woff2) format('woff2');
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/poppins-700.woff2) format('woff2');
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/poppins-800.woff2) format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-var.woff2) format('woff2');
}

:root{
  /* Poster blue, and two steps of it for depth */
  --blue:#262d85;
  --blue-2:#1e2470;
  --blue-3:#333aa0;
  --blue-ink:#1a1f5c;

  /* Poster orange */
  --orange:#d65a1c;
  --orange-2:#b8480f;

  --bg:#f1f2f7;
  --card:#fff;
  --ink:#1b1e35;
  --ink-2:#4a4f68;
  --muted:#7e8395;
  --line:#e3e5ee;

  --ok:#1a7f4b;
  --ok-bg:#e7f6ed;
  --warn:#9a6700;
  --warn-bg:#fff5d6;
  --info:var(--blue);
  --info-bg:#e8eaf8;
  --dead:#5c6673;
  --dead-bg:#eef0f5;

  --r:14px;
  --shadow:0 1px 2px rgba(20,24,60,.05), 0 8px 24px -12px rgba(20,24,60,.20);

  --display:'Poppins','Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --text:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:100%;overflow-x:hidden}
body{
  font-family:var(--text);
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.55;
  /* Keeps the footer pinned to the bottom on short pages */
  min-height:100vh;display:flex;flex-direction:column;
}
.p-auth-wrap,.p-wrap{flex:1 0 auto}
.pf{flex-shrink:0}
a{color:inherit}
img{max-width:100%}

/* ── The way out ────────────────────────────────────────────────────────────
   The blue bar that used to sit above the details page is gone — both pages
   open on the poster's masthead now — and what is left of it is one close
   button in the corner above the lockup. Its own row rather than a corner of
   the masthead: the lockup is sized to fill its line exactly, so there is no
   corner in it to put anything. */
.p-topbar{display:flex;justify-content:flex-end;align-items:center;min-height:36px;margin-bottom:4px}
.p-x{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;text-decoration:none;transition:.15s;
}
.p-x:hover,.p-x:focus{background:var(--blue);border-color:var(--blue);color:#fff}
/* Staff are shown the same page from the counter screen, where there is no
   session to leave — the corner says what they are looking at instead. */
.p-view{
  font-size:11.5px;letter-spacing:.3px;color:var(--muted);white-space:nowrap;
  border:1px solid var(--line);border-radius:20px;padding:5px 12px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.p-hero{
  position:relative;background:var(--blue-2) center/cover no-repeat;
  color:#fff;padding:30px 16px 34px;text-align:center;overflow:hidden;
}
.p-hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,28,88,.62) 0%,rgba(23,28,88,.84) 55%,rgba(23,28,88,.93) 100%);
}
.p-hero-in{position:relative;max-width:940px;margin:0 auto}
.p-plate{font-family:var(--display);
  display:inline-block;background:#fff;color:var(--blue);
  font-size:26px;font-weight:800;letter-spacing:2px;
  padding:9px 20px;border-radius:9px;border-bottom:4px solid var(--orange);
}
.p-hero h1{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.3px}
.p-hero .p-veh{margin-top:11px;font-size:14px;color:#bcc0e4}
.p-hero .p-cus{margin-top:3px;font-size:13px;color:#9aa0cf}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.p-wrap{max-width:940px;margin:0 auto;padding:0 12px 44px}
.p-sec{margin-top:26px}
.p-sec > h2{font-family:var(--display);
  font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--blue);font-weight:800;margin:0 4px 10px;
}
.p-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);
}
.p-card.pad{padding:16px}

/* ── Stat tiles ─────────────────────────────────────────────────────────── */
.p-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:10px;margin-top:-26px;position:relative;z-index:2;
}
.p-tile{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;box-shadow:var(--shadow);
}
.p-tile .k{
  font-size:10px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.p-tile .v{font-family:var(--display);font-size:19px;font-weight:800;margin-top:4px;letter-spacing:-.4px}
.p-tile .v.sm{font-size:15px}
.p-tile.accent .v{color:var(--orange)}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.b{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.3px;
  padding:4px 10px;border-radius:20px;white-space:nowrap;border:1px solid transparent;
}
.b-ok{background:var(--ok-bg);color:var(--ok);border-color:#bfe4cd}
.b-warn{background:var(--warn-bg);color:var(--warn);border-color:#efd88a}
.b-info{background:var(--info-bg);color:var(--info);border-color:#c3c7ec}
.b-dead{background:var(--dead-bg);color:var(--dead);border-color:#dbe1e9}

/* ── Visit accordion ────────────────────────────────────────────────────── */
.p-visit{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;
}
.p-vhead{
  padding:15px 16px;cursor:pointer;display:flex;align-items:center;gap:11px;
  user-select:none;
}
.p-vhead:hover{background:#fafbfd}
.p-vhead .t{flex:1;min-width:0}
.p-vdate{font-family:var(--display);font-size:15.5px;font-weight:700;letter-spacing:-.2px}
.p-vmeta{font-size:12.5px;color:var(--muted);margin-top:2px}
.p-chev{color:var(--muted);font-size:12px;transition:transform .2s;flex:0 0 auto}
.p-visit.open .p-chev{transform:rotate(90deg)}
.p-vbody{display:none;border-top:1px solid var(--line);padding:15px 16px;background:#fbfcfe}
.p-visit.open .p-vbody{display:block}

/* ── Key/value + line item tables ───────────────────────────────────────── */
.p-kv{width:100%;border-collapse:collapse;font-size:13.5px}
.p-kv td{padding:7px 0;border-bottom:1px dashed var(--line);vertical-align:top}
.p-kv tr:last-child td{border-bottom:0}
.p-kv td:first-child{color:var(--muted)}
.p-kv td.r{text-align:right;white-space:nowrap;font-weight:600}

.p-job{
  border:1px solid var(--line);border-radius:11px;background:var(--card);
  padding:14px;margin-top:12px;
}
.p-jtop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:11px}
.p-jno{font-size:14px;font-weight:700}
.p-jdiv{font-size:11.5px;color:var(--muted);margin-top:1px}

.p-items{width:100%;border-collapse:collapse;font-size:13.5px}
.p-items td{padding:7px 0;border-bottom:1px solid #f1f4f8;vertical-align:top;overflow-wrap:anywhere}
.p-items tr:last-child td{border-bottom:0}
.p-items td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Sub-line under an item: who did it, or the part reference */
.p-sub{font-size:11.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}

/* Heading that splits priced lines into sections (paint type, supplementary) */
.p-group{
  font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--orange);padding-top:12px !important;border-bottom:1px solid var(--line) !important;
}
.p-items tr:first-child .p-group{padding-top:2px !important}

.p-kind{
  font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;margin-left:7px;white-space:nowrap;
}

.p-tot{font-family:var(--display);
  display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:700;
  margin-top:11px;padding-top:11px;border-top:2px solid var(--line);
}
.p-tot.sm{font-size:13px;font-weight:600;color:var(--muted);border-top:0;padding-top:5px;margin-top:5px}
.p-tot .due{color:var(--orange)}
.p-tot span:last-child{font-variant-numeric:tabular-nums}

/* ── Photo strip ────────────────────────────────────────────────────────── */
.p-plabel{
  font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--muted);margin-top:14px;
}
.p-shots{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 4px;-webkit-overflow-scrolling:touch}
.p-shots a{flex:0 0 auto;line-height:0}
.p-shots img{
  height:82px;width:82px;object-fit:cover;border-radius:9px;
  border:1px solid var(--line);background:#eef1f5;
}

.p-empty{color:var(--muted);font-size:13.5px;text-align:center;padding:30px 12px}
.p-jdesc{font-size:13.5px;color:var(--ink-2);padding:4px 0 2px;overflow-wrap:anywhere}

/* "More details" — pulls in older records */
.p-more{text-align:center;margin:16px 0 4px}
.p-btn-more{
  background:var(--card);color:var(--ink);border:1.5px solid var(--line);
  border-radius:10px;padding:12px 22px;font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:.15s;box-shadow:var(--shadow);
}
.p-btn-more:hover:not(:disabled){border-color:var(--orange);color:var(--orange)}
.p-btn-more:disabled{opacity:.6;cursor:default}
.p-btn-more i{margin-right:7px;color:var(--orange)}
.p-more-note{font-size:12.5px;color:var(--muted);margin-top:10px}
.p-note{font-size:12px;color:var(--muted);margin:16px 6px 0;line-height:1.65}
.p-note a{color:var(--info);font-weight:600}

/* ── Entry / OTP card ───────────────────────────────────────────────────── */
.p-auth-wrap{
  display:flex;align-items:flex-start;justify-content:center;
  padding:28px 14px 46px;
}
/* The poster frames its QR in a heavy blue border with a solid blue caption bar.
   This is the same object on screen — the thing you came here to use. */
.p-auth{
  width:100%;max-width:430px;background:var(--card);border:3px solid var(--blue);
  border-radius:16px;box-shadow:var(--shadow);padding:24px 20px;overflow:hidden;
}
.p-auth h1{
  font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:#fff;background:var(--blue);text-align:center;
  margin:-24px -20px 18px;padding:13px 16px;
}
.p-auth .lead{font-size:13.5px;color:var(--ink-2);margin-bottom:20px}
.p-auth label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.p-auth input{
  width:100%;border:1.5px solid var(--line);border-radius:10px;background:#fbfcfe;
  padding:14px 15px;font-size:17px;font-family:inherit;color:var(--ink);transition:.15s;
}
.p-auth input:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(214,90,28,.14)}
#vehicle_no{text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
#otp{text-align:center;letter-spacing:11px;font-size:24px;font-weight:700;padding-left:11px}

.p-btn{
  width:100%;margin-top:17px;background:var(--orange);color:#fff;border:0;border-radius:10px;
  padding:14px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:.15s;
}
.p-btn:hover:not(:disabled){background:var(--orange-2)}
.p-btn:disabled{opacity:.55;cursor:default}
.p-link{
  background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline;
  cursor:pointer;padding:0;margin-top:15px;width:auto;font-family:inherit;
}
.p-link:hover:not(:disabled){color:var(--ink)}
.p-link:disabled{opacity:.6;cursor:default;text-decoration:none}

.p-msg{margin-top:15px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.55;display:none}
.p-msg.err{background:#fdecec;border:1px solid #f6c6c8;color:#a3161c;display:block}
.p-msg.ok{background:var(--ok-bg);border:1px solid #bfe4cd;color:var(--ok);display:block}

.p-sent{font-size:13.5px;color:var(--ink-2);margin-bottom:19px}
.p-sent b{color:var(--ink);letter-spacing:.5px}
.p-step{display:none}
.p-step.on{display:block}

.p-steps{margin:22px 6px 0;font-size:12.5px;color:var(--muted);line-height:1.9}
.p-steps b{color:var(--ink-2)}

/* ── Masthead: the poster's top-left corner ─────────────────────────────── */
/* Blue on white with an orange rule, the way it is printed — not the inverse.
   The customer has the poster in front of them; this is the first thing they
   compare. */
.p-title{background:var(--card);padding:22px 14px;border-bottom:1px solid var(--line)}
.p-title-in{max-width:940px;margin:0 auto}

/* The lockup is one line at every width, and it scales as one object.
 *
 * Everything in it is expressed in `em` of this one font-size, so the mark can
 * never end up under the words. The size is derived rather than picked, from
 * three measured facts:
 *
 *     logo aspect (200x325)          0.6154 wide per unit of height
 *     "DIGITAL" width                3.783 x font-size
 *     mark height, matching the h1   1.444 x font-size
 *
 *     0.6154x1.444 + 0.15 gap + 3.783  =  4.822 font-sizes across
 *
 * so filling the column exactly is content width / 4.822 = 0.2074 of it. The
 * content width is the page column: the viewport less this section's padding,
 * and 940px once the column stops growing — past that the rest of the page has
 * stopped widening too, and a masthead that kept going would no longer belong
 * to it.
 *
 *     0.2074 x 0.92  =  0.1908
 *
 * The 0.92 is a deliberate step down from filling the line: at full width the
 * word was heavier than anything else on either page and read as shouting. So
 * the lockup now stops about 8% short of the right edge, which is slack in the
 * only direction that cannot break — the words have more room than they need,
 * never less. Scaling the whole group rather than the h1 alone keeps the mark
 * in proportion with the text it stands beside.
 */
/* Sized in container units, not `vw`. `100vw` includes the scrollbar, so on a
 * page that scrolls — which this one does — a vw-derived lockup comes out
 * about 15px too wide, flexbox shrinks the words to compensate and "SERVICE
 * BOOK" quietly breaks onto a third line. `cqw` measures the column itself and
 * has no such gap. The vw line below it is only the fallback for engines
 * without container queries, and deliberately errs narrow.
 */
.p-mast{font-size:min(calc((100vw - 44px) * .1908), calc(940px * .1908))}
@supports (container-type: inline-size){
  .p-title-in{container-type:inline-size}
  .p-mast{font-size:19.08cqw}
}

.p-lockup{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:.15em}
/* 1.444 is the height of the two lines together as they were first set
   (.94 + .94x.536). The top line has since been taken down to .92 of the mast
   on its own, which leaves the mark about 5% taller than the words it stands
   beside — kept, because shrinking the mark to follow would be shrinking the
   logo, and the size of the logo was not what was being changed. */
.p-mark{height:1.444em;width:auto;flex:0 0 auto}
.p-words{min-width:0}

/* Aligned under the title: logo width (.6154 x 1.444) plus the gap */
.p-under{margin-left:.9386em}

/* The two words are one lockup, and the top line is set smaller than the
   geometry above assumes.
 *
 * On the poster the two lines are 324px and 325px wide — the same width, with
 * "SERVICE BOOK" set smaller to reach it — and 0.536 was the factor that
 * reproduced that in Poppins, checked from 320px up. "DIGITAL" is now 0.92 of
 * the mast instead of 1, and 600 rather than the 800 it began at, which takes
 * about 9% off the top line and leaves the bottom one where it was, so the two
 * no longer measure the same. That is the trade being made deliberately: asked
 * for, and it puts the emphasis on the name of the thing rather than on the
 * adjective. 600 over the lower line's 400 is still two steps of contrast.
 *
 *     span  0.536 / 0.92  =  0.5826 of the h1
 *
 * — the span is sized in `em` of the h1, so it has to be divided back out or
 * "SERVICE BOOK" would shrink along with the line above it. Both are still
 * `em` of one root, so the group scales as one object exactly as before.
 *
 * The lockup's width is now set by the lower line at 3.783 mast-em, unchanged,
 * so nothing about the fit above changes: still about 8% short of the column,
 * still with room to spare.
 */
/* nowrap on both lines: the lockup is a fixed shape that scales, so a line
   break in it is always a bug rather than a reflow. */
.p-title h1{
  font-family:var(--display);font-size:.92em;white-space:nowrap;
  line-height:.94;font-weight:600;
  letter-spacing:-.025em;text-transform:uppercase;color:var(--blue);
}
.p-title h1 span{display:block;font-size:.5826em;font-weight:normal;letter-spacing:-.025em}

.p-rule{width:2em;height:.036em;background:var(--orange);margin:.1em 0 .085em;border-radius:2px}

/* A steady 16px. The em branch was set so the two agree rather than fight: it
   met the floor exactly where the column stops growing, when the lockup filled
   the line. Now that the lockup is a step smaller the floor simply wins at
   every width, which is the same answer by a shorter route — the em branch is
   kept so the relationship survives if the step is ever taken back.
   At 16px the line is about 339px wide, which is more than a small phone has
   under the indent, so it is allowed to wrap and gives up the indent early. */
.p-tag{
  font-family:var(--display);font-size:max(16px, .0821em);
  line-height:1.3;font-weight:700;color:var(--ink-2);
}
@media(max-width:560px){
  .p-under{margin-left:0}
}
.p-lead{
  margin-top:15px;font-size:13.5px;line-height:1.7;color:var(--ink-2);max-width:560px;
}
/* No stacking breakpoint any more: the lockup scales instead of reflowing, so
   the mark stays beside the words at every width. */

/* ── What you get: the poster's blue column ─────────────────────────────── */
.p-about-wrap{max-width:940px;margin:0 auto;padding:0 14px 30px;width:100%}
.p-about{margin-top:26px}

.p-panel{background:var(--blue);border-radius:var(--r);overflow:hidden}
.p-panel > h2{
  font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:#fff;text-align:center;padding:13px 16px;
}
/* Rules drawn on the items, not with a grid gap. The gap trick paints the panel
   background through the gaps, which is fine until the last row is short — with
   eight items in three columns the empty ninth cell showed up as a pale block.
   A border per item has no such cell to get wrong, and the first row's own top
   border is what separates the list from the heading. */
.p-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.p-feat-i{
  padding:13px 16px;display:flex;gap:13px;align-items:flex-start;
  border-top:1px solid rgba(255,255,255,.15);
}
.p-feat-ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
/* Scoped to .p-t, the text column. The icon badge is a <span> too, and a bare
   ".p-feat-i span" outranks ".p-feat-ic" on specificity — it was painting the
   badge's own glyph muted grey and knocking it out of centre. */
.p-feat-i .p-t b{display:block;font-size:13.5px;font-weight:700;color:#fff;margin-bottom:1px}
.p-feat-i .p-t span{display:block;font-size:12.5px;color:#b9bde8;line-height:1.55}

/* ── How it works: the white card under it ──────────────────────────────── */
.p-how{
  margin-top:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:6px 16px 12px;
}
.p-how h3{
  font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--blue);padding:12px 0 6px;
}
.p-how-s{display:flex;gap:13px;align-items:flex-start;padding:10px 0}
.p-how-s + .p-how-s{border-top:1px solid var(--line)}
.p-how-ic{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--info-bg);
  color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;
}
.p-how-s .p-t b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:1px}
.p-how-s .p-t span{display:block;font-size:12.5px;color:var(--muted);line-height:1.55}

/* ── The orange strip ───────────────────────────────────────────────────── */
.p-secure{
  margin-top:14px;background:var(--orange);color:#fff;border-radius:var(--r);
  padding:15px 16px;display:flex;gap:14px;align-items:center;
}
.p-secure > i{font-size:18px;flex:0 0 auto}
.p-secure .p-t b{display:block;font-size:13.5px;font-weight:700}
.p-secure .p-t span{display:block;font-size:12.5px;opacity:.94;line-height:1.55}

/* ── The band along the foot of the poster ──────────────────────────────── */
.p-values{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  padding:15px 16px;border-bottom:1px solid #3b41a0;
  font-family:var(--display);
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#c9cbe8;
}
.p-values i{color:var(--orange);margin-right:7px}

/* ==========================================================================
   Icon geometry
   --------------------------------------------------------------------------
   Font Awesome glyphs do not share an advance width — fa-users is wide, fa-user
   and fa-lock are narrow — so anything that lines icons up in a column, or
   centres them in a fixed box, has to normalise the box rather than trust the
   glyph. `width:1em` plus a centred line is what fa-fw does, applied here so
   the markup does not have to carry the class.

   Icons also inherit the letter-spacing of the label they sit in, which lands
   as an extra gap between the glyph and the first word.
   ========================================================================== */
.p-feat-ic i,
.p-how-ic i,
.p-secure > i{width:1em;text-align:center;line-height:1}

/* Branch contacts: one column of icons, mixed widths, fixed 13px box */
.pf-br i{text-align:center}

/* Section headings and the value strip both letter-space their text */
.p-sec > h2 i,
.p-values i,
.p-btn-more i,
.p-view i{letter-spacing:0}
.p-values i{width:1em;text-align:center}

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   The rule everywhere below: an element may animate *into* its resting state,
   never out of one. Anything that starts at opacity:0 has an animation that
   ends at opacity:1 with `both`, so a browser that never runs it — reduced
   motion, an old engine, a stylesheet that arrives late — still shows a
   finished page rather than a blank one.

   Ordinary content is not hidden and revealed. Only the two hero areas and the
   marketing panel do that, and only briefly; a customer opening this to check
   a balance should not be made to wait for choreography.
   ========================================================================== */

@keyframes sbUp   { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes sbIn   { from{opacity:0}                            to{opacity:1} }
@keyframes sbPlate{ from{opacity:0;transform:translateY(8px) scale(.96)} to{opacity:1;transform:none} }

/* ── Entry page ─────────────────────────────────────────────────────────── */
.p-title h1     { animation:sbUp .5s ease-out both }
.p-tag          { animation:sbUp .5s ease-out .1s both }
.p-auth         { animation:sbUp .45s ease-out .06s both }

/* Step 2 arriving after the code is sent, and any message under a field */
.p-step.on      { animation:sbIn .28s ease-out both }
.p-msg.err,
.p-msg.ok       { animation:sbUp .22s ease-out both }

/* ── Details page ───────────────────────────────────────────────────────── */
.p-plate        { animation:sbPlate .5s cubic-bezier(.2,.7,.3,1) .06s both }
.p-hero .p-veh  { animation:sbUp .45s ease-out .14s both }
.p-hero .p-cus  { animation:sbUp .45s ease-out .2s both }

/* Tiles land left to right, over the hero they overlap */
.p-tile         { animation:sbUp .42s ease-out both }
.p-tile:nth-child(1){animation-delay:.16s}
.p-tile:nth-child(2){animation-delay:.22s}
.p-tile:nth-child(3){animation-delay:.28s}
.p-tile:nth-child(4){animation-delay:.34s}
.p-tile:nth-child(5){animation-delay:.40s}

/* The first three visits are on screen at load; anything "More details" adds
   is already past this point, so it appears without a second entrance. */
#visitList > .p-visit:nth-child(1){animation:sbUp .42s ease-out .3s both}
#visitList > .p-visit:nth-child(2){animation:sbUp .42s ease-out .36s both}
#visitList > .p-visit:nth-child(3){animation:sbUp .42s ease-out .42s both}

/* Opening a visit. display cannot be animated, so the panel's contents are
   what moves — which also makes the accordion feel like it belongs to the
   chevron that turned. */
.p-visit.open .p-vbody{animation:sbUp .26s ease-out both}

/* ── The marketing panel, as it is scrolled past ────────────────────────── */
/* The hiding is gated on .rv, which only the script in portal_about.php adds,
   and only once it has an observer ready to put things back. No script, a
   failed script, or reduced motion all mean the class is never added and the
   panel is simply there — the content is never hidden by a rule that has
   nothing left to reveal it. A CSS-only view() timeline was the obvious way to
   do this and is the wrong one: on a page too short to scroll the timeline is
   inactive, and an inactive timeline holds the animation at opacity:0. */
.p-about.rv .p-feat-i,
.p-about.rv .p-how-s,
.p-about.rv .p-secure,
.p-about.rv .p-values{opacity:0}

.p-about.rv .rv-in{animation:sbUp .5s ease-out both}

/* ── Hover and press ────────────────────────────────────────────────────── */
.p-feat-i{transition:transform .18s ease, box-shadow .18s ease}
.p-feat-i:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.p-feat-ic{transition:transform .18s ease}
.p-feat-i:hover .p-feat-ic{transform:scale(1.08)}

.p-btn:active:not(:disabled),
.p-btn-more:active{transform:translateY(1px)}
.p-btn{transition:background .15s, transform .08s}

.p-vhead{transition:background .15s}
.p-shots img{transition:transform .2s ease}
.p-shots a:hover img{transform:scale(1.04)}

/* ── Off ────────────────────────────────────────────────────────────────── */
/* Not "faster" — off. And every animated element is put back at its resting
   state by hand, because animation:none alone would strand anything whose
   only opacity:1 came from a keyframe. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .p-title h1, .p-tag, .p-auth, .p-step.on, .p-msg.err, .p-msg.ok,
  .p-plate, .p-hero .p-veh, .p-hero .p-cus, .p-tile,
  #visitList > .p-visit, .p-visit.open .p-vbody, .p-about.rv .rv-in,
  .p-feat-i, .p-how-s, .p-secure, .p-values{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.pf{background:var(--blue);color:#a9ade0;margin-top:34px}
.pf-in{max-width:940px;margin:0 auto;padding:32px 18px 20px}
.pf-brand{border-bottom:1px solid #3b41a0;padding-bottom:22px;margin-bottom:22px}
.pf-logo{height:44px;width:auto;margin-bottom:13px}
.pf-brand p{font-size:13px;max-width:460px;line-height:1.7}
.pf-social{display:flex;gap:9px;margin-top:15px}
.pf-social a{
  width:36px;height:36px;border-radius:9px;background:var(--blue-3);color:#d0d3f0;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:15px;transition:.15s;
}
.pf-social a:hover{background:var(--orange);color:#fff}

.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.pf-br h4{font-family:var(--display);
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:#fff;font-weight:700;margin-bottom:10px;
}
.pf-br p{font-size:12.5px;display:flex;gap:9px;margin-bottom:6px;align-items:flex-start;line-height:1.6}
.pf-br i{color:var(--orange);width:13px;flex:0 0 auto;margin-top:4px;font-size:11px}
.pf-br a{text-decoration:none}
.pf-br a:hover{color:#fff}
.pf-bottom{
  border-top:1px solid #3b41a0;margin-top:24px;padding-top:16px;
  font-size:11.5px;color:#8b90cc;text-align:center;
}
.pf-bottom a{color:inherit;white-space:nowrap}
.pf-bottom a:hover{color:#fff}

@media (min-width:640px){
  .p-hero{padding:44px 16px 46px}
  .p-plate{font-family:var(--display);font-size:32px;padding:11px 26px}
  .p-hero h1{font-family:var(--display);font-size:27px}
  .p-wrap{padding:0 16px 52px}
}