/* Quote to Invoice: visual system matched to the approved reference design.
   Palette, typography and section rhythm follow the existing site.
   Semantics, schema, no-JS rendering and accessibility are unchanged. */

:root{
  --navy:#0F172A;
  --navy-2:#1E293B;
  --ink:#0F172A;
  --slate:#475569;
  --slate-l:#64748B;
  --green:#16A34A;
  --green-br:#22C55E;
  --green-dk:#15803D;
  --bg:#FFFFFF;
  --bg-alt:#F8FAFC;
  --bg-blue:#EFF6FF;
  --border:#E2E8F0;
  --border-l:#F1F5F9;

  --f:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-doc:ui-monospace,'SF Mono','Roboto Mono',monospace;

  --w:1180px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;
  --shadow:0 4px 24px rgba(15,23,42,.06);
  --shadow-lg:0 20px 50px rgba(15,23,42,.10);
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--slate);font-family:var(--f);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-synthesis-weight:none;
  font-variant-ligatures:common-ligatures;font-kerning:normal}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--s3)}
.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:0}

h1,h2,h3,h4{font-family:var(--f);color:var(--ink);margin:0 0 var(--s2);font-weight:800;letter-spacing:-.025em}
h1{font-size:clamp(34px,4.4vw,50px);line-height:1.12}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.18}
h3{font-size:18px;line-height:1.4;font-weight:700;letter-spacing:-.01em}
h4{font-size:15px;font-weight:700}
em{font-style:italic;color:var(--green)}
p{margin:0 0 var(--s2)}
a{color:var(--green-dk);text-underline-offset:3px}
a:hover{color:var(--green)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}

.lede{font-size:17px;line-height:1.7;color:var(--slate-l);max-width:60ch;margin:0 0 var(--s4)}
.small{font-size:14.5px;color:var(--slate-l)}
.mono{font-family:var(--f-doc);font-size:.86em}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0 0 var(--s2)}

.band{padding:var(--s7) 0}
.band--alt{background:var(--bg-alt)}
.band--navy{background:var(--navy);color:#94A3B8}
.band--navy h1,.band--navy h2,.band--navy h3{color:#fff}
.band--navy .lede{color:#94A3B8}
.band--navy .small{color:#8296AD}
.band--navy a{color:var(--green-br)}
.band--navy em{color:var(--green-br)}
.band--tight{padding:var(--s6) 0}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
@media(max-width:820px){.band{padding:var(--s6) 0}}

.grid{display:grid;gap:var(--s5)}
@media(min-width:880px){
  .g-2{grid-template-columns:1fr 1fr}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-hero{grid-template-columns:1.02fr .98fr;align-items:center}
  .g-art{grid-template-columns:minmax(0,1fr) 250px;gap:var(--s6)}
  .g-blog{grid-template-columns:1.35fr 1fr}
}

/* ---------- header ---------- */
.announce{display:none}
.masthead{background:#fff;border-bottom:1px solid var(--border-l);position:sticky;top:0;z-index:60}
.masthead .wrap{display:flex;align-items:center;gap:var(--s3);min-height:77px;flex-wrap:wrap}
.brand img{width:252px}
.tagline{flex:1;align-self:center;text-align:center;margin:0;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1.4}
.nav{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.nav a{font-size:14.5px;font-weight:500;color:var(--slate);text-decoration:none}
.nav a:hover{color:var(--green-dk)}
.nav .login{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
/* Register reads as the same label as Log in, just on the green pill. */
.masthead .btn--primary{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.masthead .btn--primary:hover{color:#fff}
@media(max-width:1000px){.tagline{display:none}}
@media(max-width:880px){
  .masthead .wrap{padding-top:10px;padding-bottom:10px}
  .nav{width:100%;margin-left:0;gap:var(--s2);overflow-x:auto;font-size:13.5px;padding-bottom:2px}
  .nav a{white-space:nowrap}
  .brand img{width:150px}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--f);font-weight:700;font-size:13px;letter-spacing:.02em;
  padding:13px 24px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-dk);color:#fff}
.btn--navy{background:var(--navy);color:#fff;padding:16px 30px;font-size:14px}
.btn--navy:hover{background:var(--navy-2);color:#fff}
.btn--ghost{border-color:var(--border);color:var(--ink);background:#fff}
.btn--ghost:hover{border-color:var(--green);color:var(--green-dk)}
.btn--sm{padding:10px 20px;font-size:12px}
.btn--link{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-radius:0;padding:0}
.btn--link:hover{color:var(--green-dk)}
.band--navy .btn--link{color:#fff}
.btnrow{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s4)}
.nocard{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}

/* ---------- hero ----------
   Scrim curve measured from the approved reference: solid at the left edge,
   holding through the copy, then collapsing to nothing by 65% so the subject
   is never dimmed. Vertical crop matches at object-position 50% 27%. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 27%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgba(8,14,26,1.00) 0%,
    rgba(8,14,26,.97)  12%,
    rgba(8,14,26,.86)  24%,
    rgba(8,14,26,.78)  36%,
    rgba(8,14,26,.56)  45%,
    rgba(8,14,26,.28)  54%,
    rgba(8,14,26,.09)  62%,
    rgba(8,14,26,.04)  70%,
    rgba(8,14,26,.03)  100%)}
/* The hero uses the full viewport width. No centred 1180px container, which
   is what left a dead navy band down the left on wide screens. */
.hero > .wrap{max-width:none;padding-inline:clamp(20px,9vw,190px)}
.hero__inner{min-height:clamp(560px,48vw,780px);display:flex;align-items:center;padding:var(--s6) 0}
.hero__copy{max-width:32rem}
.hero h1{color:#fff;font-size:clamp(34px,4.9vw,54px);line-height:1.14;
  letter-spacing:-.03em;margin-bottom:var(--s4)}
.hero h1 em{color:var(--green-br)}
.hero p{color:#E2E8F0;font-size:17px;line-height:1.72;max-width:26rem;margin-bottom:var(--s5)}
.hero p em{color:var(--green-br);font-style:normal;font-weight:600}
.hero .btnrow{margin-top:0;gap:var(--s4);flex-wrap:nowrap;align-items:center}
.hero .btn--link,.hero .nocard{white-space:nowrap}
.hero .btn--link{font-size:12.5px;letter-spacing:.15em;padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.35)}
.hero .btn--link:hover{border-bottom-color:var(--green-br)}

@media(max-width:1024px){
  .hero > .wrap{padding-inline:var(--s3)}
}

/* --- Mobile hero: photograph as a band at the top, fading into solid navy,
       with the copy sitting below it on the flat colour. --- */
.hero .hero__eyebrow{display:none}
@media(max-width:880px){
  .hero{background:#080E1A}
  /* Band is a touch shorter so the copy block below it has room to breathe.
     The gradient reaches solid at 88%, leaving a clean strip of flat colour
     before the text starts, so nothing reads as a caption stuck on the photo. */
  .hero__media{position:relative;inset:auto;z-index:0;height:clamp(176px,31vh,244px)}
  .hero__media img{height:100%;object-position:58% 22%}
  .hero::before{inset:0 0 auto 0;height:clamp(176px,31vh,244px);z-index:1;
    background:linear-gradient(180deg,
      rgba(8,14,26,.34) 0%,
      rgba(8,14,26,.10) 26%,
      rgba(8,14,26,.16) 44%,
      rgba(8,14,26,.52) 68%,
      rgba(8,14,26,.86) 82%,
      rgba(8,14,26,1)   88%,
      rgba(8,14,26,1)   100%)}
  .hero > .wrap{position:relative;z-index:2;padding-inline:26px}
  .hero__inner{min-height:0;padding:var(--s5) 0 var(--s6);display:block}
  .hero__copy{max-width:none}
  /* Matched to .nocard: same size, weight, tracking, case and colour, so the
     two green lines in the hero read as one typographic system. */
  /* Matched to .nocard exactly. Raising .nocard to 13px instead would
     overflow the hero button row, which is nowrap: link 174px + nocard
     182px + gap = 371px against 323px available on a 375px phone. */
  .hero .hero__eyebrow{display:block;font-size:8.5px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--green);margin:0 0 14px;line-height:1.4;
    white-space:nowrap;max-width:none}
  .hero h1{font-size:clamp(27px,7.6vw,34px);line-height:1.22;letter-spacing:-.028em;margin-bottom:var(--s3)}
  .hero p{font-size:14.5px;line-height:1.7;max-width:none;color:#CBD5E1;margin-bottom:var(--s4)}
  .hero .btnrow{gap:14px;margin-top:0;flex-wrap:nowrap;align-items:center}
  .hero .btn--link{font-size:10px;letter-spacing:.11em;padding-bottom:8px}
  .hero .nocard{font-size:8.5px;letter-spacing:.09em}
}

/* ---------- comparison ----------
   A table, because that is what the content is. No cards, no shadows, no
   nested tint boxes, no accent bars, and the column headers appear once at
   the top instead of being reprinted on every row. The header sticks under
   the masthead so you keep your bearings while scrolling the rows.
   Hierarchy is typographic: weight and colour, not containers. */
.strike{color:var(--slate-l);text-decoration:line-through;text-decoration-thickness:3px}

.cmp{max-width:880px;margin:var(--s6) auto 0;text-align:left}

.cmp__head,.cmp__row{display:grid;gap:var(--s2) var(--s4)}
@media(min-width:820px){
  .cmp__head,.cmp__row{grid-template-columns:9rem 1fr 1fr}
}
@media(max-width:819px){
  .cmp__head,.cmp__row{grid-template-columns:1fr 1fr;gap:10px 18px}
  .cmp__label{grid-column:1 / -1}
  .cmp__spacer{display:none}
}

.cmp__head{
  position:sticky;top:64px;z-index:5;background:var(--bg-alt);
  padding:14px 0 10px;border-bottom:2px solid var(--navy);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.cmp__head .us{color:var(--green-dk)}
.cmp__head .them{color:var(--slate-l)}
@media(max-width:880px){.cmp__head{top:56px}}

.cmp__row{padding:var(--s3) 0;border-bottom:1px solid var(--border);align-items:baseline}
.cmp__row:last-child{border-bottom:2px solid var(--navy)}

.cmp__label{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-l);margin:0;
}
.cmp__us{font-size:16px;line-height:1.55;color:var(--ink);font-weight:600;margin:0}
.cmp__them{
  font-size:15px;line-height:1.55;color:var(--slate-l);margin:0;
  border-left:1px solid var(--border);padding-left:var(--s4);
}
@media(max-width:819px){
  .cmp__us{font-size:13.5px;line-height:1.5}
  .cmp__them{font-size:12.5px;line-height:1.5;padding-left:18px}
  .cmp__label{font-size:9.5px;letter-spacing:.12em}
}

/* ---------- devices ----------
   Two separate transparent PNG/WebP elements, positioned. Not a flattened
   composite: each device keeps its own alpha so it sits on any background,
   and either one can be swapped without re-rendering the other. */
.devices{position:relative;max-width:880px;margin:var(--s6) auto var(--s7);aspect-ratio:880/452}
.devices img{position:absolute;display:block}
.devices__laptop{left:0;top:0;width:80%;height:auto}
.devices__phone{right:1.5%;bottom:0;width:20.5%;height:auto}
@media(max-width:880px){
  .devices{margin:var(--s5) auto;max-width:none}
}
@media(max-width:520px){
  /* below this the phone frame stops being legible next to the laptop */
  .devices{aspect-ratio:880/430}
  .devices__laptop{width:84%}
  .devices__phone{width:23%;right:0}
}

.featurepair{display:grid;gap:var(--s5);max-width:900px;margin:0 auto}
@media(min-width:760px){.featurepair{grid-template-columns:1fr 1fr}}
.iconbox{width:34px;height:34px;border-radius:9px;background:rgba(34,197,94,.12);display:flex;align-items:center;
  justify-content:center;margin-bottom:var(--s3)}
.iconbox svg{width:17px;height:17px;stroke:var(--green-br);fill:none;stroke-width:2}
.featurepair h3{font-size:14px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:12px}
.featurepair p{font-size:14.5px;line-height:1.75;color:#94A3B8;margin:0}

/* ---------- blog cards ---------- */
.cardhead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.card{background:#fff;border:1px solid var(--border-l);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.card__img{aspect-ratio:16/9;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-doc);font-size:11px;color:var(--slate-l);letter-spacing:.08em}


.card__body{padding:var(--s3);display:flex;flex-direction:column;flex:1}
.card__meta{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-l);margin-bottom:10px}
.card h3{font-size:16.5px;line-height:1.4;margin-bottom:10px}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--green-dk)}
.card p{font-size:13.5px;line-height:1.7;color:var(--slate-l);margin:0 0 var(--s3)}
.card .more{margin-top:auto;font-size:13px;font-weight:700;color:var(--green-dk);text-decoration:none}
.card--stack{flex-direction:row;gap:var(--s3);align-items:flex-start;padding:var(--s3);box-shadow:none;margin-bottom:var(--s3)}

/* ---------- footer ----------
   Dark, to close the page properly. A pale footer at the end of a light page
   just fades out; this one lands. Green hairline at the top ties it to the brand. */
.foot{background:var(--navy);color:#94A3B8;padding:0;font-size:14px;
  border-top:3px solid var(--green)}
.foot .wrap{padding-top:var(--s6);padding-bottom:0}
.foot__top{display:grid;gap:var(--s5)}
@media(min-width:880px){.foot__top{grid-template-columns:1.6fr repeat(3,1fr) 1.1fr}}
.foot h2{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:#8598AD;margin:0 0 var(--s3)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:11px}
.foot a{color:#CBD5E1;text-decoration:none;font-size:14.5px;transition:color .15s}
.foot a:hover{color:var(--green-br)}
.foot__brand img{width:180px;margin-bottom:var(--s3)}
.foot__brand p{font-size:14px;line-height:1.7;max-width:34ch;color:#94A3B8}
/* Matched to the hero eyebrow: same size, weight, tracking, case and colour.
   --green measures 5.4:1 on the footer navy, so nothing is traded for it. */
.foot__claim{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green);margin-top:var(--s3);white-space:nowrap;line-height:1.4}

.foot__legal{border-top:1px solid #1E293B;margin-top:var(--s6);padding:var(--s4) 0 var(--s3)}
.foot__legal p{font-size:12px;line-height:1.7;color:#94A3B8;max-width:none;margin:0 0 12px}
.foot__bottom{border-top:1px solid #1E293B;padding:var(--s3) 0 var(--s5);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  font-size:12px;color:#94A3B8}
.foot__links{display:flex;gap:var(--s4);flex-wrap:wrap}
.foot__bottom a{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#94A3B8}

/* ---------- inner-page components (kept, restyled to match) ---------- */
.crumbs{font-size:13px;color:var(--slate-l);padding:var(--s3) 0;border-bottom:1px solid var(--border-l)}
.crumbs a{color:var(--slate-l);text-decoration:none}
.crumbs span{margin:0 8px;color:var(--border)}
.rows{margin-top:var(--s4)}
.row{border-top:1px solid var(--border);padding:var(--s3) 0;display:grid;gap:6px}
.row:last-child{border-bottom:1px solid var(--border)}
@media(min-width:880px){.row{grid-template-columns:250px 1fr;gap:var(--s5);align-items:baseline}}
.row h3{margin:0}
.row h3 a{color:var(--ink);text-decoration:none}
.row h3 a:hover{color:var(--green-dk)}
.row p{margin:0;font-size:14.5px;color:var(--slate-l)}
.band--navy .row{border-color:#1E293B}

.trustline{border-top:1px solid rgba(255,255,255,.18);margin-top:var(--s4);padding-top:var(--s2);
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-br)}

.docref{font-family:var(--f-doc);font-size:11.5px;border:1px solid var(--border);border-left:4px solid var(--green);
  padding:5px 10px;display:inline-block;background:#fff;color:var(--ink);white-space:nowrap;border-radius:4px}
.docref--inv{border-left-color:var(--navy)}
.lifecycle{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:var(--s3) 0;
  margin:0 0 var(--s5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);justify-content:center}
.lifecycle__step{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-l)}
.arrow{font-weight:700}.arrow--g{color:var(--green)}.arrow--b{color:var(--navy)}
@media(max-width:640px){.lifecycle{flex-direction:column;align-items:flex-start}}

.totals{max-width:340px;font-size:14.5px}
.totals__row{display:flex;justify-content:space-between;gap:var(--s3);padding:9px 0;border-bottom:1px solid var(--border-l)}
.totals__row--sum{border-bottom:none;border-top:2px solid var(--navy);margin-top:var(--s1);padding-top:12px;
  font-weight:800;font-size:18px;color:var(--ink)}
.totals__row span:last-child{font-family:var(--f-doc);font-size:13.5px}

.doc{background:#fff;border:1px solid var(--border-l);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:26px 28px;font-size:13px;line-height:1.5;color:var(--slate);container-type:inline-size}
.doc__head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.doc__logo{width:132px}
.doc__type{text-align:right}
.doc__type strong{display:block;font-size:15px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--navy)}
.doc--quote .doc__type strong{color:var(--green)}
.doc__no{font-family:var(--f-doc);font-size:10.5px;color:var(--slate-l);display:block;margin-top:3px}
.doc__parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--border-l)}
.doc__parties .doclabel{display:block;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-l);margin-bottom:5px}
.doc__parties p{margin:0;font-size:12px;line-height:1.5}
.doc__parties .vat{font-family:var(--f-doc);font-size:10px;color:var(--slate-l)}
.doc__items{width:100%;border-collapse:collapse}
.doc__items th{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-l);padding:12px 0 6px;border-bottom:1px solid var(--border-l);text-align:left}
.doc__items td{font-size:12px;padding:9px 0;border-bottom:1px solid var(--border-l)}
.doc__items .num{text-align:right;font-family:var(--f-doc);font-size:11.5px;white-space:nowrap}
.doc__items .desc small{display:block;color:var(--slate-l);font-size:11px}
.doc__totals{margin-left:auto;width:min(240px,68%);padding-top:12px}
.doc__totals div{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:12px}
.doc__totals .vatline{color:var(--slate-l)}
.doc__totals .grand{border-top:2px solid var(--navy);margin-top:6px;padding-top:9px;font-weight:800;font-size:15px;color:var(--ink)}
.doc--quote .doc__totals .grand{border-top-color:var(--green);color:var(--green-dk)}
.doc__totals span:last-child{font-family:var(--f-doc)}
.doc__foot{border-top:1px solid var(--border-l);margin-top:16px;padding-top:12px;font-size:11px;color:var(--slate-l);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.doc__stamp{font-family:var(--f-doc);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border);border-left:4px solid var(--green);padding:4px 9px;color:var(--ink);border-radius:4px}
.doc--invoice .doc__stamp{border-left-color:var(--navy)}
@container (max-width:430px){.doc{padding:18px 16px}.doc__parties{grid-template-columns:1fr;gap:12px}.doc__items .hide-sm{display:none}.doc__totals{width:100%}}
.docpair{display:grid;gap:var(--s4);align-items:start}
@media(min-width:900px){.docpair{grid-template-columns:1fr 54px 1fr;gap:var(--s2)}}
.docpair__arrow{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--green-br);font-weight:700;padding:var(--s4) 0}
.intro{display:grid;gap:var(--s5);align-items:start}
@media(min-width:900px){.intro{grid-template-columns:1.05fr .95fr;gap:var(--s6)}}
.appshot{display:grid;gap:var(--s5);align-items:center}
@media(min-width:880px){.appshot{grid-template-columns:280px 1fr}}
.appshot img{margin:0 auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.3))}

.compare{border-top:1px solid var(--border);margin-top:var(--s4)}
.compare__row{display:grid;gap:var(--s2);padding:var(--s3) 0;border-bottom:1px solid var(--border-l)}
@media(min-width:760px){.compare__row{grid-template-columns:1fr 150px 150px;align-items:center}}
.compare__row--head{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-l)}
.compare__val{font-size:14px;font-weight:600}
.compare__val--yes{color:var(--green-dk)}
.compare__val--no{color:var(--slate-l)}

.prose{font-size:17px;line-height:1.8;color:#334155}
.prose p{max-width:38em;margin:0 0 var(--s3)}
.prose h2{font-size:26px;margin:var(--s6) 0 var(--s2)}
.prose h3{font-size:19px;margin:var(--s5) 0 var(--s1)}
.prose ul,.prose ol{max-width:38em;padding-left:22px;margin:0 0 var(--s3)}
.prose li{margin-bottom:9px}
.tldr{border-left:4px solid var(--green);background:var(--bg-alt);border-radius:0 var(--r) var(--r) 0;padding:var(--s3);margin:0 0 var(--s5);max-width:40em}
.tldr h2{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dk);margin:0 0 var(--s2)}
.tldr ul{margin:0;padding-left:20px}
.tldr li{margin-bottom:8px;font-size:15.5px;line-height:1.6}
.toc{position:sticky;top:96px;font-size:14px;border-top:2px solid var(--navy);padding-top:var(--s2)}
.toc h2{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-l);margin:0 0 var(--s2)}
.toc ol{list-style:none;padding:0;margin:0}
.toc li{margin-bottom:10px;line-height:1.4}
.toc a{color:var(--slate-l);text-decoration:none}
.toc a:hover{color:var(--green-dk)}
@media(max-width:880px){.toc{position:static;margin-bottom:var(--s4)}}
table{width:100%;border-collapse:collapse;margin:var(--s3) 0 var(--s4)}
th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-l);padding:0 var(--s2) var(--s1) 0;border-bottom:2px solid var(--navy)}
td{font-size:15px;padding:12px var(--s2) 12px 0;border-bottom:1px solid var(--border-l);vertical-align:top;color:#334155}
.band--navy th{color:#94A3B8;border-bottom-color:#334155}
.band--navy td{border-bottom-color:#1E293B;color:#CBD5E1}
.faq{border-top:1px solid var(--border);max-width:40em;margin-top:var(--s3)}
.faq details{border-bottom:1px solid var(--border-l)}
.faq summary{font-weight:700;color:var(--ink);font-size:16px;padding:var(--s3) 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details > p{font-size:15.5px;padding-bottom:var(--s3);margin:0;max-width:none;color:var(--slate)}
.posthead{padding:var(--s5) 0 var(--s4)}
.postmeta{font-size:13px;color:var(--slate-l);margin-top:var(--s3);line-height:1.9}
.authorbox{border-top:1px solid var(--border);padding-top:var(--s3);margin-top:var(--s6);display:grid;gap:var(--s3)}
@media(min-width:640px){.authorbox{grid-template-columns:72px 1fr}}
.authorbox__ph{width:72px;height:72px;background:var(--bg-alt);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-doc);font-size:10px;color:var(--slate-l);text-align:center}
.authorbox p{font-size:14.5px;margin:0}
.sources{border-left:4px solid var(--border);padding:var(--s2) var(--s3);margin:var(--s5) 0;font-size:14px;max-width:40em}
.sources ul{margin:var(--s1) 0 0;padding-left:20px}
.endcta{border-top:1px solid var(--border);margin-top:var(--s6);padding-top:var(--s3);max-width:40em}
.field{margin-bottom:var(--s3);max-width:34em}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font-family:var(--f);font-size:15px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink)}
.field textarea{min-height:150px;resize:vertical}
.hint{font-size:12.5px;color:var(--slate-l);margin-top:5px}


.shot{border:1px solid var(--border);background:var(--bg-alt);border-radius:var(--r);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--s3)}
.shot span{font-family:var(--f-doc);font-size:11.5px;color:var(--slate-l);line-height:1.7}
.shot-caption{font-size:13.5px;color:var(--slate-l);margin-top:10px}
.band--navy .shot{background:#1E293B;border-color:#334155}
.doclabel{display:block}

.totop{position:fixed;right:20px;bottom:20px;width:38px;height:38px;border-radius:50%;background:#fff;
  border:1px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;
  color:var(--green-dk);text-decoration:none;font-size:15px;z-index:70}


/* ==================================================================
   MOBILE REFINEMENT, matched to the approved device rendering
   ================================================================== */
@media(max-width:880px){

  .band{padding:var(--s6) 0}
  .band--tight{padding:var(--s5) 0}
  .wrap{padding:0 26px}

  h2{font-size:clamp(21px,5.6vw,26px);line-height:1.28;letter-spacing:-.025em}
  .lede{font-size:14.5px;line-height:1.7}
  .small{font-size:13px}

  /* header: logo + actions only, no centred tagline */
  .masthead .wrap{min-height:67px;flex-wrap:nowrap;gap:12px}
  .brand img{width:184px}
  .nav{width:auto;margin-left:auto;gap:14px;overflow:visible}
  .nav .login{font-size:9.5px;letter-spacing:.1em}
  .masthead .btn--primary{font-size:9.5px;letter-spacing:.1em;padding:8px 14px}
  .btn--sm{padding:8px 16px;font-size:10.5px}

  /* comparison panel stacks as two separate cards */
  /* navy section */
  .devices{margin:var(--s5) auto var(--s5);max-width:none}
  /* two up on mobile: copy is short enough to hold at ~160px per column */
  .featurepair{grid-template-columns:1fr 1fr;gap:var(--s3);text-align:left}
  .featurepair h3{font-size:10.5px;letter-spacing:.08em;line-height:1.35;margin-bottom:8px}
  .featurepair p{font-size:12px;line-height:1.6;overflow-wrap:anywhere}
  .iconbox{width:28px;height:28px;margin-bottom:12px;border-radius:8px}
  .iconbox svg{width:14px;height:14px}

  /* blog: two cards per row, tuned to stay readable at 375px */
  .cardhead{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:var(--s4)}
  .cardhead .btn{align-self:flex-start}
  .eyebrow{font-size:10px}
  .grid.g-3{grid-template-columns:1fr 1fr;gap:12px}
  .card{border-radius:10px}
  .card__body{padding:13px}
  .card h3{font-size:13.5px;line-height:1.34;margin:6px 0 6px}
  .card p{font-size:11.5px;line-height:1.5;margin-bottom:12px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .card__meta{font-size:9px;letter-spacing:.05em;margin-bottom:7px}
  
  .card .more{font-size:11px}

  /* CTA */
  .btn--navy{padding:14px 26px;font-size:12.5px}

  /* footer: brand block centred, then a two-column link grid with hairlines
     so each row is a proper tap target. */
  .foot .wrap{padding-top:var(--s5)}
  .foot__top{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s3)}
  .foot__brand{grid-column:1 / -1;text-align:center;padding-bottom:var(--s4);
    border-bottom:1px solid #1E293B}
  .foot__brand img{width:158px;margin:0 auto 14px}
  .foot__brand p{margin:0 auto;font-size:13px;line-height:1.65;max-width:32ch}
  .foot__claim{font-size:8.5px;letter-spacing:.09em;margin-top:14px;white-space:nowrap}
  .foot h2{font-size:9px;letter-spacing:.14em;margin-bottom:8px}
  .foot li{margin-bottom:0}
  .foot li + li{border-top:1px solid #1E293B}
  .foot a{font-size:13.5px;display:block;padding:10px 0}
  .foot__legal{margin-top:var(--s5);padding-top:var(--s4)}
  .foot__legal p{font-size:11px;line-height:1.65;max-width:none}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:12px;font-size:11px;
    padding-bottom:var(--s5)}
  .foot__links{gap:18px}
  .foot__bottom a{font-size:9.5px}

  .totop{right:14px;bottom:14px;width:34px;height:34px}
}

@media(max-width:400px){
  .hero .hero__eyebrow{font-size:7.5px;letter-spacing:.06em;margin-bottom:12px}
  .hero__inner{padding-top:var(--s4)}
  .grid.g-3{gap:10px}
  .card__body{padding:11px}
  .card h3{font-size:12.5px}
  .card p{-webkit-line-clamp:2;font-size:11px}
  .wrap{padding:0 21px}
  .hero > .wrap{padding-inline:21px}
  .hero h1{font-size:26px}
  .hero .btnrow{gap:10px}
  .hero .btn--link{font-size:9px;letter-spacing:.08em}
  .hero .nocard{font-size:7.5px;letter-spacing:.06em}
}

/* ==================================================================
   ARTICLE COMPONENTS
   Used by every post. Defined once here, never rebuilt per article.
   ================================================================== */

/* You can also read: sits mid-article beside the section it relates to,
   not at the end with the generic related list. */
.alsoread{
  border:1px solid var(--border);border-left:4px solid var(--green);
  border-radius:0 10px 10px 0;background:var(--bg-alt);
  padding:var(--s3) var(--s4);margin:var(--s5) 0;max-width:38em;
  font-family:var(--f);
}
.alsoread__label{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-dk);margin:0 0 12px;
}
.alsoread ul{list-style:none;margin:0;padding:0}
.alsoread li + li{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.alsoread a{font-size:16px;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.4}
.alsoread a:hover{color:var(--green-dk);text-decoration:underline}
.alsoread a::after{content:" \2192";color:var(--green-dk)}
.alsoread__note{font-size:13.5px;color:var(--slate-l);line-height:1.55;display:block;margin-top:4px}
@media(max-width:820px){
  .alsoread{padding:18px 20px;margin:var(--s4) 0}
  .alsoread a{font-size:14.5px}
  .alsoread__note{font-size:12.5px}
}

/* Short mandatory disclaimer. Visible, not shouty. */
.article-disclaimer{
  font-family:var(--f);font-size:12.5px;line-height:1.65;color:var(--slate-l);
  border-top:1px solid var(--border);padding-top:var(--s3);margin:var(--s5) 0 0;max-width:40em;
}
.article-disclaimer strong{color:var(--ink)}

/* TL;DR, defined as a block style so writers insert it from the editor. */
.wp-block-group.is-style-tldr{
  border-left:4px solid var(--green);background:var(--bg-alt);
  border-radius:0 10px 10px 0;padding:var(--s3) var(--s4);margin:0 0 var(--s5);max-width:40em;
}
.wp-block-group.is-style-tldr h2{
  font-family:var(--f);font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-dk);margin:0 0 12px;
}
.wp-block-group.is-style-tldr ul{margin:0;padding-left:20px}
.wp-block-group.is-style-tldr li{margin-bottom:8px;font-size:16px;line-height:1.55}

/* Tables inside articles scroll rather than overflow on a phone. */
.prose .wp-block-table,
.elementor-widget-theme-post-content .wp-block-table{max-width:none;overflow-x:auto}
.prose .wp-block-table table{min-width:340px}
@media(max-width:600px){
  .prose table td,.prose table th{font-size:13.5px}
}

/* category nav on the blog index */
.catnav{border-top:2px solid var(--navy);border-bottom:1px solid var(--border-l);
  padding:var(--s2) 0;display:flex;gap:var(--s3);flex-wrap:wrap;font-size:14.5px;font-weight:500}
.catnav a{color:var(--slate);text-decoration:none}
.catnav a:hover,.catnav a[aria-current="page"]{color:var(--green-dk)}
.tablewrap{margin:var(--s3) 0 var(--s4);overflow-x:auto;max-width:none}
.tablewrap table{min-width:340px;margin:0}
.tldr{border-left:4px solid var(--green);background:var(--bg-alt);border-radius:0 10px 10px 0;
  padding:var(--s3) var(--s4);margin:0 0 var(--s5);max-width:40em}
.tldr h2{font-family:var(--f);font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-dk);margin:0 0 12px}
.tldr ul{margin:0;padding-left:20px}
.tldr li{margin-bottom:8px;font-size:16px;line-height:1.55}

/* ==================================================================
   ARTICLE TEMPLATE — mobile
   ================================================================== */
@media(max-width:820px){
  .posthead{padding:var(--s4) 0 var(--s3)}
  .posthead h1{font-size:clamp(24px,6.2vw,30px);line-height:1.22}
  .postmeta{font-size:12px;line-height:1.8;margin-top:var(--s2)}
  .prose{font-size:16px;line-height:1.75}
  .prose h2{font-size:21px;margin:var(--s5) 0 var(--s2)}
  .prose h3{font-size:17px;margin:var(--s4) 0 var(--s1)}
  .prose p,.prose ul,.prose ol{max-width:none}
  .prose li{margin-bottom:7px}
  .tldr{padding:18px 20px;margin-bottom:var(--s4)}
  .tldr li{font-size:14.5px}
  .tldr h2{font-size:9.5px}
  .toc{margin-bottom:var(--s4);padding-top:var(--s2)}
  .toc h2{font-size:9.5px}
  .toc li{margin-bottom:8px;font-size:13.5px}
  .faq summary{font-size:15px;padding:18px 0}
  .faq details > p{font-size:14.5px}
  .sources{font-size:13px;padding:14px 18px}
  .endcta{margin-top:var(--s5)}
  .article-disclaimer{font-size:11.5px}
  .crumbs{font-size:11.5px;padding:var(--s2) 0}
  .crumbs span{margin:0 5px}
}
@media(max-width:420px){
  .prose{font-size:15.5px}
  .prose h2{font-size:19px}
  .tablewrap table{min-width:340px}
}

/* ==================================================================
   QDOC — the document layout the application actually produces.
   Colours and structure taken from a real generated PDF so that the
   worked examples in articles match what a reader will see in the app.
   Fictional data only: no real client, bank or registration details.
   ================================================================== */
:root{
  --qd-navy:#284082;
  --qd-panel:#F3F7ED;
  --qd-green:#57943A;
  --qd-rule:#D8DEE9;
}
.qdoc{
  background:#fff;border:1px solid var(--qd-rule);border-radius:6px;overflow:hidden;
  font-family:var(--f);font-size:12px;line-height:1.45;color:#1F2937;
  box-shadow:0 2px 12px rgba(15,23,42,.09);margin:var(--s4) 0;max-width:none;
}
.qdoc__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:22px 24px 16px;border-bottom:2px solid var(--qd-navy)}
.qdoc__brand{font-size:17px;font-weight:800;color:var(--qd-green);letter-spacing:-.02em}
.qdoc__brand small{display:block;font-size:10px;font-weight:600;color:#6B7280;letter-spacing:.04em;margin-top:2px}
.qdoc__type{text-align:right}
.qdoc__type strong{display:block;font-size:19px;font-weight:800;letter-spacing:.02em;color:var(--qd-navy)}
.qdoc__type span{font-size:12px;font-weight:700;color:var(--qd-navy)}

.qdoc__band{display:grid;background:var(--qd-panel);border-bottom:2px solid var(--qd-navy)}
@media(min-width:620px){.qdoc__band{grid-template-columns:1fr 1fr 1fr}}
.qdoc__cell{padding:14px 18px}
.qdoc__cell + .qdoc__cell{border-left:1px solid #E2E8DA}
@media(max-width:619px){.qdoc__cell + .qdoc__cell{border-left:none;border-top:1px solid #E2E8DA}}
.qdoc__lbl{display:block;font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--qd-green);margin-bottom:6px}
.qdoc__cell strong{display:block;font-size:13px;color:#111827;margin-bottom:3px}
.qdoc__cell p{margin:0;font-size:11px;line-height:1.5;color:#4B5563;max-width:none}
.qdoc__cell .muted{color:#6B7280}

.qdoc__scroll{overflow-x:auto}
.qdoc__items{width:100%;border-collapse:collapse;margin:0;min-width:560px}
.qdoc__items thead th{background:var(--qd-navy);color:#fff;font-size:9px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;padding:10px 10px;text-align:right;border:none}
.qdoc__items thead th:nth-child(1){text-align:center;width:32px}
.qdoc__items thead th:nth-child(2){text-align:left}
.qdoc__items td{padding:11px 10px;font-size:11.5px;text-align:right;border:none;color:#1F2937;vertical-align:top}
.qdoc__items td:nth-child(1){text-align:center;color:#6B7280}
.qdoc__items td:nth-child(2){text-align:left}
.qdoc__items tbody tr:nth-child(even){background:var(--qd-panel)}
.qdoc__items tbody tr:last-child td{border-bottom:2px solid var(--qd-navy)}
.qdoc__items b{font-weight:700;color:#111827;font-size:12px}
.qdoc__items small{display:block;color:var(--qd-green);font-size:10px;line-height:1.45;margin-top:3px;font-weight:600}
.qdoc__tax{color:#6B7280}

.qdoc__lower{display:grid;gap:0}
@media(min-width:620px){.qdoc__lower{grid-template-columns:1.15fr .85fr;gap:18px}}
.qdoc__pay{background:var(--qd-panel);border-left:4px solid var(--qd-green);padding:14px 18px;margin:18px}
.qdoc__paygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qdoc__paygrid > div:nth-child(n+4){grid-column:span 1}
.qdoc__ref{margin-top:12px;padding-top:10px;border-top:1px solid #D7E0CB;font-size:12.5px;font-weight:800;color:var(--qd-green)}
.qdoc__totals{margin:18px;align-self:start}
.qdoc__totrow{display:flex;justify-content:space-between;gap:14px;padding:9px 12px;font-size:12px;border:1px solid var(--qd-rule);border-bottom:none}
.qdoc__totrow:first-child{border-radius:4px 4px 0 0}
.qdoc__totrow strong{font-weight:700}
.qdoc__grand{display:flex;justify-content:space-between;gap:14px;padding:12px;background:var(--qd-navy);color:#fff;
  font-size:13px;font-weight:800;border-radius:0 0 4px 4px}
.qdoc__notes{background:var(--qd-panel);padding:12px 18px;margin:0 18px 18px}
.qdoc__bar{background:var(--qd-green);color:#fff;display:flex;justify-content:space-between;gap:12px;
  padding:9px 18px;font-size:9.5px;font-weight:700;letter-spacing:.06em;flex-wrap:wrap}

@media(max-width:520px){
  .qdoc__head{padding:16px 14px 12px}
  .qdoc__brand{font-size:15px}
  .qdoc__type strong{font-size:16px}
  .qdoc__cell{padding:12px 14px}
  .qdoc__pay,.qdoc__totals,.qdoc__notes{margin:14px}
  .qdoc__paygrid{grid-template-columns:1fr 1fr}
  .qdoc__bar{font-size:8.5px;padding:8px 14px}
}

/* Staging indicator. Only rendered on staging builds, so nobody mistakes the
   test site for the live one. Remove the flag in build.py to hide it. */
.stagingflag{
  position:fixed;left:0;bottom:0;z-index:200;
  background:#B4531E;color:#fff;font-family:var(--f);font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:0 4px 0 0;
  pointer-events:none;opacity:.9;
}

/* header layout: the tagline holds the centre, actions sit right */
.masthead .wrap{flex-wrap:nowrap}
.nav{margin-left:auto;gap:var(--s3);flex-wrap:nowrap}

@media(max-width:1000px){
  /* tagline is hidden below 1000px; the menu button carries everything */
  .nav{width:auto;overflow:visible;gap:14px}
}
@media(max-width:520px){
  .menu > summary{width:38px;height:38px}
  .menu__panel{min-width:206px;right:-4px}
  .nav{gap:10px}
}

/* ==================================================================
   OVERFLOW CONTAINMENT
   Grid and flex children default to min-width:auto, which means they
   refuse to shrink below their content. A 560px table inside a grid
   column therefore widens the whole page instead of scrolling inside
   its own container. This is the single most common cause of
   horizontal scroll on mobile, and it is fixed here once.
   ================================================================== */
.grid > *,
.g-art > *, .g-2 > *, .g-3 > *,
.intro > *, .appshot > *, .docpair > *,
.cmp__row > *, .featurepair > *, .foot__top > *,
.qdoc__lower > *, .qdoc__band > *{min-width:0}

.prose,
.prose > *{min-width:0;max-width:100%}
.prose img,.prose figure,.prose table{max-width:100%}
.prose{overflow-wrap:break-word}

.qdoc,.tablewrap,.doc{max-width:100%}
.qdoc__scroll{max-width:100%;-webkit-overflow-scrolling:touch}

/* Long unbroken strings: URLs, account numbers, VAT numbers */
.prose a,.qdoc__cell p,.card p,.alsoread a{overflow-wrap:anywhere}

/* ==================================================================
   QDOC ON MOBILE
   A seven-column financial table cannot be read at 375px, and
   sideways scrolling to find the total is not a solution. Below
   620px each line item becomes a stacked block with its own labels,
   which is what a well-built app does with the same data.
   ================================================================== */
@media(max-width:620px){
  .qdoc__scroll{overflow-x:visible}
  .qdoc__items{min-width:0;display:block}
  .qdoc__items thead{display:none}
  .qdoc__items tbody,.qdoc__items tr,.qdoc__items td{display:block;width:auto}

  .qdoc__items tr{
    padding:14px 16px;border-bottom:1px solid #E6EAE0;position:relative;
  }
  .qdoc__items tr:last-child td{border-bottom:none}
  .qdoc__items tr:last-child{border-bottom:2px solid var(--qd-navy)}

  /* line number becomes a small marker rather than a column */
  .qdoc__items td:nth-child(1){
    position:absolute;top:14px;right:16px;text-align:right;
    font-size:9px;font-weight:800;letter-spacing:.1em;color:#9CA3AF;padding:0;
  }
  .qdoc__items td:nth-child(1)::before{content:"ITEM "}

  .qdoc__items td:nth-child(2){text-align:left;padding:0 46px 10px 0}
  .qdoc__items td:nth-child(2) b{font-size:14px}

  /* remaining cells become labelled rows */
  .qdoc__items td:nth-child(n+3){
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:5px 0;text-align:right;font-size:12.5px;border-top:1px dotted #E6EAE0;
  }
  .qdoc__items td:nth-child(n+3)::before{
    content:attr(data-label);font-size:9px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:#6B7280;text-align:left;
  }
  .qdoc__items td:last-child{border-top:1px solid #D8DEE9;margin-top:4px;padding-top:8px}
  .qdoc__items td:last-child b{font-size:14px;color:var(--qd-navy)}

  .qdoc__totals{margin:0 16px 16px}
  .qdoc__pay{margin:16px}
}

@media(max-width:400px){
  .qdoc__paygrid{grid-template-columns:1fr}
  .qdoc__bar{justify-content:center;text-align:center;gap:4px}
  .qdoc__bar span:nth-child(2){order:3;width:100%}
}

/* Scrollable tables get a visible edge fade, so it is obvious there is more
   to the right rather than the content just appearing to be cut off. */
@media(max-width:620px){
  .tablewrap,.prose .wp-block-table{
    background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
               linear-gradient(to right,rgba(255,255,255,0),#fff 70%) 100% 0,
               radial-gradient(farthest-side at 0 50%,rgba(15,23,42,.14),transparent),
               radial-gradient(farthest-side at 100% 50%,rgba(15,23,42,.14),transparent) 100% 0;
    background-repeat:no-repeat;background-size:34px 100%,34px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
  .prose table td,.prose table th{font-size:13px;padding:11px 12px 11px 0}
  .tablewrap table td:first-child,.prose table td:first-child{padding-left:0}
}

/* five footer columns once the nav moved down here */
@media(min-width:980px){
  .foot__top{grid-template-columns:1.5fr repeat(4,1fr)}
}
@media(max-width:979px) and (min-width:620px){
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}

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


/* ==================================================================
   PAGINATION
   Real links to real URLs. No JavaScript, crawlable, bookmarkable.
   ================================================================== */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--border-l);
  font-family:var(--f);font-size:14px;font-weight:600;flex-wrap:wrap;
}
.pager__arrow{color:var(--green-dk);text-decoration:none;white-space:nowrap}
.pager__arrow:hover{text-decoration:underline}
.pager__arrow.is-off{color:var(--border);cursor:default}
.pager__nums{display:flex;align-items:center;gap:4px}
.pager__n{
  min-width:34px;height:34px;padding:0 8px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--slate);text-decoration:none;border:1px solid transparent;
}
.pager__n:hover{background:var(--bg-alt);color:var(--green-dk)}
.pager__n.is-cur{background:var(--navy);color:#fff}
.pager__gap{color:var(--slate-l);padding:0 2px}

@media(max-width:520px){
  .pager{font-size:13px;gap:10px;justify-content:center}
  .pager__arrow{order:2}
  .pager__nums{order:1;width:100%;justify-content:center;margin-bottom:6px}
  .pager__n{min-width:30px;height:30px}
}

/* ==================================================================
   FOOTER: LONG STRINGS
   The email address is 28 unbreakable characters, about 196px, in a
   footer column that is 154px wide on a 375px phone. Without a break
   opportunity it pushed the whole page sideways.
   ================================================================== */
.foot__top a,.foot__top p{overflow-wrap:anywhere}
/* Contact page: label and value sit in a flex row; the value must be able
   to shrink and wrap or the email pushes the row wider than the viewport. */
.totals__row{flex-wrap:wrap;gap:4px 12px}
.totals__row > span{min-width:0;overflow-wrap:anywhere}
.totals__row > span:last-child{text-align:right}
.foot__email{
  display:inline-block;max-width:100%;
  font-size:13px;letter-spacing:-.005em;line-height:1.45;
}
@media(max-width:520px){
  .foot__email{font-size:12.5px}
}

/* Featured images now real files rather than a labelled box */
.card__img{aspect-ratio:16/9;background:var(--bg-alt);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;display:block}
.card:hover .card__img img{transform:scale(1.03)}
.card__img img{transition:transform .35s ease}
@media(prefers-reduced-motion:reduce){.card__img img{transition:none}}

.postimg{margin:0 0 var(--s5);border-radius:12px;overflow:hidden;background:var(--bg-alt)}
.postimg img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
/* Full-bleed on mobile. Bleeding by the exact wrap padding rather than
   100vw, because 100vw includes the scrollbar and was the cause of the
   horizontal-scroll bug earlier in the build. */
@media(max-width:880px){
  .postimg{
    margin-left:-26px;margin-right:-26px;margin-bottom:var(--s4);
    border-radius:0;
  }
}
@media(max-width:400px){
  .postimg{margin-left:-21px;margin-right:-21px}
}