@font-face {
  font-family: "Barlow Condensed Web";
  src: url("/site-assets/display.woff2") format("woff2"), url("/site-assets/display.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
:root {
  --ground:#f6f8fb; --surface:#ffffff; --sunken:#eef2f7; --ink:#0b1220; --ink-muted:#475569;
  --rule:#dde5ee; --brand:#0369a1; --brand-strong:#075985; --brand-wash:#e6f1f8; --on-brand:#ffffff;
  --good:#2c6e49; --bad:#a62b1f;
  /* Sampled from the logo artwork so the typeset name matches the mark it stands next to. */
  --wm-name:#13467d; --wm-accent:#35b3af;
  --display:"Barlow Condensed Web","Barlow Condensed","Arial Narrow",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --measure:66ch; --shell:1140px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:104px;
  --radius:10px; --pace:200ms;
}
/* Kept for a visitor with no JavaScript whose OS is light: they still get a coherent page.
   Anyone with JS sees the dark default, because data-theme is already set in the markup. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0b1220; --surface:#121b2c; --sunken:#162034; --ink:#eef3fa; --ink-muted:#a3b2c7;
    --rule:#24314a; --brand:#38a5dd; --brand-strong:#7cc6ec; --brand-wash:#14263a; --on-brand:#06101d;
    --good:#6fcf97; --bad:#f08a7e;
    --wm-name:#eef3fa;
  }
}
:root[data-theme="dark"]{
  --ground:#0b1220; --surface:#121b2c; --sunken:#162034; --ink:#eef3fa; --ink-muted:#a3b2c7;
  --rule:#24314a; --brand:#38a5dd; --brand-strong:#7cc6ec; --brand-wash:#14263a; --on-brand:#06101d;
  --good:#6fcf97; --bad:#f08a7e; --wm-name:#eef3fa;
}
:root[data-theme="light"]{
  --ground:#f6f8fb; --surface:#ffffff; --sunken:#eef2f7; --ink:#0b1220; --ink-muted:#475569;
  --rule:#dde5ee; --brand:#0369a1; --brand-strong:#075985; --brand-wash:#e6f1f8; --on-brand:#ffffff;
  --good:#2c6e49; --bad:#a62b1f; --wm-name:#13467d;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:.01em;text-wrap:balance;margin:0;line-height:1.05}
h1{font-size:clamp(2.6rem,6vw,4.1rem)} h2{font-size:clamp(2rem,4vw,2.9rem)} h3{font-size:1.45rem}
h4{font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase}
p{margin:0;max-width:var(--measure)}
a{color:var(--brand-strong)}
:focus-visible{outline:3px solid var(--brand-strong);outline-offset:3px;border-radius:4px}
img{max-width:100%}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--s3)}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s5)}
.section{padding:var(--s7) 0;border-top:1px solid var(--rule)}
.section:first-of-type{border-top:0}
.eyebrow{font-family:var(--display);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-strong);margin:0}
.lede{font-size:1.2rem;color:var(--ink-muted)}
.muted{color:var(--ink-muted)}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--on-brand);padding:12px 18px;z-index:100}
.skip:focus{left:0}
header.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.topbar{display:flex;align-items:center;gap:var(--s3);min-height:68px}
/* The mark is used exactly as drawn — it is teal and orange and reads on any ground. The NAME is
   live text in the logo's own two colours, so it needs no plate, no recolouring of artwork, and no
   second file: on the dark theme "Rep" simply becomes the page's ink. Two earlier attempts are the
   reason for this: recolouring the lockup's gradients left the letters mottled, and putting the
   whole lockup on a white badge fixed the legibility but pasted a bright rectangle into a dark
   header. */
.brandmark{display:inline-flex;align-items:center;gap:11px;text-decoration:none;padding:6px 2px}
.brandmark img{width:38px;height:38px;display:block;flex:0 0 auto}
.brandmark .wm{font-family:var(--body);font-weight:700;font-size:1.44rem;letter-spacing:-.015em;line-height:1;white-space:nowrap}
.brandmark .wm .n{color:var(--wm-name)}
.brandmark .wm .a{color:var(--wm-accent)}
.foot .brandmark .tag{display:block;font-size:.78rem;font-weight:500;letter-spacing:.02em;color:var(--ink-muted);margin-top:3px}
nav.primary{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
nav.primary a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--ink);text-decoration:none;font-weight:500;font-size:.98rem;border-radius:var(--radius);transition:background var(--pace),color var(--pace)}
nav.primary a:hover{background:var(--sunken)}
nav.primary a[aria-current="page"]{color:var(--brand-strong);background:var(--brand-wash)}
.actions{display:flex;align-items:center;gap:var(--s1)}
/* A sign-in that looks like a way in, not another nav link — it is the only thing in the bar an
   existing customer is ever looking for. */
.btn-signin{min-height:40px;padding:0 16px;font-size:.95rem;border:1px solid var(--brand);color:var(--brand-strong);background:transparent}
.btn-signin:hover{background:var(--brand-wash)}
/* Icon-only, so it still needs a name for anyone not looking at it. 44px keeps it a real target. */
.switch.icon-only{width:44px;min-width:44px;padding:0;justify-content:center}
.switch.icon-only svg{width:18px;height:18px}
/* The hidden attribute is not honoured on SVG elements the way it is on HTML ones — without this
   rule both icons render side by side, which is exactly what shipped for a minute. */
.switch svg[hidden]{display:none}
.switch{min-height:40px;padding:0 12px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);border-radius:var(--radius);font:inherit;font-size:.85rem;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:border-color var(--pace)}
.switch:hover{border-color:var(--brand)}
.switch svg{width:16px;height:16px}
@media (max-width:760px){
  .topbar{flex-wrap:wrap;padding:10px 0;gap:var(--s2);min-height:0}
  /* Sign in and the theme switch stay on the first row where they are always reachable; the nav
     drops to its own scrolling line underneath. */
  .actions{margin-left:auto}
  nav.primary{order:3;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  nav.primary a{flex:0 0 auto;padding:0 11px}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;border-radius:var(--radius);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background var(--pace),border-color var(--pace),color var(--pace)}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-strong)}
.btn-ghost{border-color:var(--rule);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--brand)}
.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.hero{padding:var(--s7) 0 var(--s6)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--s5)}}
.spine{display:grid;gap:2px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.spine-step{display:grid;grid-template-columns:46px 1fr;gap:var(--s2);align-items:start;background:var(--surface);padding:var(--s3);text-decoration:none;color:var(--ink);transition:background var(--pace)}
.spine-step:hover{background:var(--brand-wash)}
.spine-num{font-family:var(--display);font-size:1.6rem;color:var(--brand-strong);font-variant-numeric:tabular-nums;line-height:1}
.spine-step h3{font-size:1.2rem;margin-bottom:3px}
.spine-step p{font-size:.95rem;color:var(--ink-muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}
@media (min-width:640px) and (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s3);display:flex;flex-direction:column;gap:10px}
a.card{text-decoration:none;color:var(--ink);transition:border-color var(--pace),background var(--pace)}
a.card:hover{border-color:var(--brand);background:var(--brand-wash)}
.card .icon{color:var(--brand-strong)} .card .icon svg{width:26px;height:26px}
.card p{font-size:.97rem;color:var(--ink-muted)}
.pill{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:var(--brand-wash);color:var(--brand-strong);border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:600}
.limits{background:var(--sunken);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s4)}
.limits ul{margin:var(--s2) 0 0;padding-left:20px;color:var(--ink-muted)}
.limits li{margin-bottom:8px;max-width:var(--measure)}
.rowlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.rowlist li{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start}
.rowlist svg{width:17px;height:17px;color:var(--good);margin-top:4px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);align-items:start}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.tier.featured{border-color:var(--brand);border-width:2px}
.price{font-family:var(--display);font-size:2.6rem;font-variant-numeric:tabular-nums}
.price span{font-family:var(--body);font-size:.95rem;color:var(--ink-muted);font-weight:400}
.notice{border-left:4px solid var(--brand);background:var(--brand-wash);padding:var(--s3);border-radius:0 var(--radius) var(--radius) 0}
.notice p{max-width:none}
table.compare{width:100%;border-collapse:collapse;font-size:.95rem}
table.compare th,table.compare td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule)}
table.compare th[scope="col"]{font-family:var(--display);font-size:1.05rem;letter-spacing:.03em}
table.compare td.mark{color:var(--good)} table.compare td.no{color:var(--ink-muted)}
.table-scroll{overflow-x:auto}
details.faq{border-bottom:1px solid var(--rule);padding:var(--s2) 0}
details.faq summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
details.faq p{margin-top:10px;color:var(--ink-muted)}
.crumbs{display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--ink-muted);margin-bottom:var(--s2);flex-wrap:wrap}
.crumbs a{color:var(--ink-muted)}
/* Long-text pages: guides and the legal pages. One readable column, generous heading air. */
.prose{display:flex;flex-direction:column;gap:var(--s2);max-width:var(--measure)}
.prose h2{margin-top:var(--s4);font-size:clamp(1.5rem,2.6vw,1.9rem)}
.prose h3{margin-top:var(--s2)}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--ink-muted)}
.prose li{max-width:var(--measure)}
.prose .updated{font-size:.88rem;color:var(--ink-muted)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:.95rem}
.field input,.field textarea{font:inherit;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);color:var(--ink);min-height:48px}
.field .hint{font-size:.85rem;color:var(--ink-muted)}
footer.foot{border-top:1px solid var(--rule);padding:var(--s6) 0 var(--s5);margin-top:var(--s6)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s4)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-grid a{color:var(--ink-muted);text-decoration:none}
.foot-grid a:hover{color:var(--brand-strong);text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}