/* Velocity Web Hosting — design system
   Tokens first, then base, then components. Colours are chosen so every
   text/background pair clears WCAG AA (4.5:1 body, 3:1 large text). */

:root {
  /* Ink */
  --ink-900:#0b1220;   /* headings */
  --ink-700:#1e2a3f;   /* body */
  --ink-500:#4d5d78;   /* secondary text — 7.0:1 on white */
  --ink-400:#64748b;   /* tertiary — 4.8:1 on white, still AA */

  /* Surfaces */
  --surface:#ffffff;
  --surface-sunken:#f6f8fc;
  --surface-raised:#ffffff;
  --line:#e2e8f2;
  --line-strong:#cbd5e6;

  /* Brand */
  --brand-50:#eef3ff;
  --brand-100:#dbe5ff;
  --brand-500:#2456e6;
  --brand-600:#1d47c4;   /* 5.9:1 on white */
  --brand-700:#17389b;

  /* Status */
  --ok-50:#e8f7f0;  --ok-600:#0a7350;
  --warn-50:#fff6e5; --warn-700:#8a5300;
  --danger-50:#fdeceb; --danger-600:#b3261e;

  /* Type scale */
  --fs-xs:.8125rem;  /* 13 */
  --fs-sm:.875rem;   /* 14 */
  --fs-base:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.375rem;
  --fs-2xl:1.75rem;
  --fs-3xl:clamp(2rem, 1.4rem + 2.4vw, 3rem);

  /* Spacing */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;

  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.04);
  --shadow-md:0 4px 12px rgba(11,18,32,.07), 0 2px 4px rgba(11,18,32,.04);
  --shadow-lg:0 12px 32px rgba(11,18,32,.10), 0 4px 8px rgba(11,18,32,.05);
  --focus:0 0 0 3px var(--brand-100), 0 0 0 1px var(--brand-600);
  --max:1120px;

  /* Aliases & Fallbacks */
  --bg:var(--surface);
  --border:var(--line);
  --card-bg:var(--surface-sunken);
  --muted:var(--ink-500);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

/* Every icon in the app is an inline <svg viewBox="0 0 24 24"> with no width/height
   attribute (by design, so CSS controls size). Without a rule a bare <svg> falls back
   to the browser's replaced-element default (~300x150, scaled to a huge square by the
   viewBox), which is why an un-scoped icon balloons and wrecks its heading/row layout.
   This sizes every icon sanely by default; any of the many more-specific ".x svg{}"
   rules elsewhere (higher specificity) still win, so already-tuned icons are unaffected. */
svg{width:1.15em;height:1.15em;flex:none;vertical-align:-.15em}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--ink-700);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{color:var(--ink-900);line-height:1.2;letter-spacing:-.018em;margin:0 0 var(--sp-3)}
h1{font-size:var(--fs-3xl);letter-spacing:-.028em}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}
p{margin:0 0 var(--sp-4)}
a{color:var(--brand-600)}
a:hover{color:var(--brand-700)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--surface-sunken);padding:.15em .4em;border-radius:5px;border:1px solid var(--line)}
pre{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-4);overflow-x:auto;font-size:var(--fs-sm);line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0}

/* Visible keyboard focus everywhere — never remove without replacing. */
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{box-shadow:var(--focus)}

.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--sp-5)}
.muted{color:var(--ink-500)}
.small{font-size:var(--fs-sm)}
.hidden{display:none !important}

/* ---------- header ---------- */
header.site{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.site .container{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);min-height:70px}
.brand{font-weight:750;font-size:1.125rem;color:var(--ink-900);text-decoration:none;
  letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--brand-600)}
header.site nav{display:flex;align-items:center;gap:var(--sp-2)}
header.site nav a{color:var(--ink-500);text-decoration:none;font-size:var(--fs-sm);
  font-weight:550;padding:.5rem .7rem;border-radius:8px;white-space:nowrap}
header.site nav a:hover{color:var(--ink-900);background:var(--surface-sunken)}
header.site nav a.nav-cta{background:var(--brand-600);color:#fff;padding:.55rem 1rem}
header.site nav a.nav-cta:hover{background:var(--brand-700);color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.7rem 1.25rem;border-radius:var(--radius);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-900);font:inherit;font-weight:600;font-size:var(--fs-sm);
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .06s}
.btn:hover{background:var(--surface-sunken);border-color:var(--line-strong);color:var(--ink-900)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand-600);border-color:var(--brand-600);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700);color:#fff}
.btn-lg{min-height:52px;padding:.9rem 1.75rem;font-size:var(--fs-base)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- hero ---------- */
.hero{text-align:center;padding:var(--sp-9) var(--sp-5) var(--sp-8);
  background:radial-gradient(120% 90% at 50% -10%, var(--brand-50) 0%, rgba(255,255,255,0) 62%),
             linear-gradient(180deg,var(--surface-sunken),var(--surface))}
.hero h1{max-width:18ch;margin-inline:auto}
.hero .lead{font-size:var(--fs-lg);color:var(--ink-500);max-width:62ch;
  margin:0 auto var(--sp-6)}
.hero-points{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);justify-content:center;
  margin-top:var(--sp-6);color:var(--ink-500);font-size:var(--fs-sm);list-style:none;padding:0}
.hero-points li{display:flex;align-items:center;gap:.45rem}
.hero-points li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;
  background:var(--ok-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a7350' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- plans ---------- */
.plans{padding:var(--sp-8) var(--sp-5);max-width:var(--max);margin-inline:auto}
.plans h2,.features h2{text-align:center;margin-bottom:var(--sp-2)}
.section-sub{text-align:center;color:var(--ink-500);margin:0 auto var(--sp-6);max-width:56ch}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));
  gap:var(--sp-5);align-items:start}
.plan{position:relative;display:flex;flex-direction:column;background:var(--surface-raised);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-6);
  box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s,border-color .2s}
.plan:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.plan.featured{border-color:var(--brand-500);box-shadow:var(--shadow-lg)}
.plan .badge{position:absolute;top:calc(var(--sp-3) * -1);left:var(--sp-6);
  background:var(--brand-600);color:#fff;font-size:var(--fs-xs);font-weight:650;
  padding:.3rem .75rem;border-radius:999px;letter-spacing:.01em;box-shadow:var(--shadow-sm)}
.plan h3{margin-bottom:var(--sp-1)}
.price{display:flex;align-items:baseline;gap:.35rem;margin:var(--sp-2) 0 var(--sp-1);
  font-size:2.25rem;font-weight:730;color:var(--ink-900);letter-spacing:-.03em}
.price span{font-size:var(--fs-sm);font-weight:500;color:var(--ink-500);letter-spacing:0}
.blurb{color:var(--ink-500);font-size:var(--fs-sm);margin:0 0 var(--sp-5);min-height:2.8em}
.plan ul{list-style:none;padding:0;margin:0 0 var(--sp-6);flex:1;display:grid;gap:.1rem}
.plan li{position:relative;padding:.45rem 0 .45rem 1.65rem;font-size:var(--fs-sm);color:var(--ink-700)}
.plan li::before{content:"";position:absolute;left:0;top:.72rem;width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a7350' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/14px no-repeat}
.plan .btn{width:100%}
.vat-note{text-align:center;color:var(--ink-500);font-size:var(--fs-sm);margin-top:var(--sp-6)}

/* ---------- features ---------- */
.features{background:var(--surface-sunken);padding:var(--sp-8) var(--sp-5);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-4);max-width:var(--max);margin-inline:auto}
.feature-grid>div{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--sp-5)}
.feature-grid h4{margin-bottom:var(--sp-1)}
.feature-grid p{margin:0;color:var(--ink-500);font-size:var(--fs-sm)}

/* ---------- forms / narrow pages ---------- */
.signup,.welcome{max-width:34rem;margin:var(--sp-8) auto var(--sp-9);padding-inline:var(--sp-5)}
.dashboard{max-width:var(--max);margin:var(--sp-7) auto var(--sp-9);padding-inline:var(--sp-5)}
label{display:block;margin:var(--sp-4) 0 var(--sp-2);font-weight:600;font-size:var(--fs-sm);color:var(--ink-900)}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=search],input[type=date],input[type=datetime-local],
input[type=month],input[type=week],input[type=time],select,textarea{
  width:100%;min-height:46px;padding:.65rem .85rem;font:inherit;color:var(--ink-900);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--ink-400)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-400)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-600);box-shadow:var(--focus)}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:.9}
textarea{min-height:120px;resize:vertical;line-height:1.55}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234d5d78' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5L8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:16px;padding-right:2.2rem}
input[type=checkbox],input[type=radio]{width:19px;height:19px;min-height:0;accent-color:var(--brand-600);
  margin:0 .55rem 0 0;vertical-align:-3px;cursor:pointer}
label.radio,label.check{display:flex;align-items:center;gap:0;font-weight:500;font-size:var(--fs-base);
  color:var(--ink-700);margin:0;padding:.6rem .25rem;cursor:pointer;min-height:44px}
.hint{color:var(--ink-500);font-size:var(--fs-sm);margin:var(--sp-2) 0 0}
.secure-note{color:var(--ink-500);font-size:var(--fs-sm);text-align:center;margin-top:var(--sp-3)}
.field-error{display:block;color:var(--danger-600);font-size:var(--fs-sm);margin-top:var(--sp-1)}
.text-danger{color:var(--danger-600)}
.signup button[type=submit],.signup .btn-lg{width:100%;margin-top:var(--sp-6)}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4) var(--sp-5) var(--sp-5);
  margin:var(--sp-6) 0 0}
legend{font-weight:650;font-size:var(--fs-sm);color:var(--ink-900);padding-inline:var(--sp-2)}

/* ---------- alerts ---------- */
.alert{padding:var(--sp-4);border-radius:var(--radius);margin:var(--sp-5) 0;font-size:var(--fs-sm);
  background:var(--warn-50);border:1px solid #f0dcae;color:var(--warn-700)}
.alert a{color:inherit;font-weight:600}
.alert-error{background:var(--danger-50);border-color:#f3c7c4;color:var(--danger-600)}
.alert.ok{background:var(--ok-50);border-color:#bde3d2;color:var(--ok-600)}

/* ---------- domain search ---------- */
.search-row{display:flex;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-2)}
.search-row input{flex:1}
.search-row .btn{flex:none}
.domain-results{display:grid;gap:var(--sp-2);margin-top:var(--sp-2)}
.domain-hit{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  width:100%;min-height:52px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font:inherit;font-size:var(--fs-sm);text-align:left;color:var(--ink-900)}
.domain-hit.available{cursor:pointer;transition:border-color .15s,background .15s}
.domain-hit.available:hover{border-color:var(--brand-500);background:var(--brand-50)}
.domain-hit.chosen{border-color:var(--brand-600);background:var(--brand-50);box-shadow:var(--shadow-sm)}
.domain-hit.taken{background:var(--surface-sunken);color:var(--ink-500)}
.domain-hit .tag{font-size:var(--fs-xs);font-weight:600;color:var(--ink-500);white-space:nowrap}
.domain-hit.available .tag{color:var(--ok-600)}

/* ---------- dashboard tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4);
  margin:var(--sp-6) 0}
.tiles form{display:contents}
.tile{display:flex;flex-direction:column;gap:var(--sp-1);width:100%;height:100%;min-height:118px;
  padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);text-align:left;text-decoration:none;color:inherit;font:inherit;
  cursor:pointer;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s,border-color .2s}
.tile:hover{border-color:var(--brand-500);box-shadow:var(--shadow-md);transform:translateY(-2px);color:inherit}
.tile h3{margin:0;font-size:var(--fs-base)}
.tile p{margin:0;color:var(--ink-500);font-size:var(--fs-sm)}
.tile[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.status{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);margin:var(--sp-4) 0;
  background:var(--surface-sunken);font-size:var(--fs-sm)}
.status.ok{background:var(--ok-50);color:var(--ok-600)}
.dns-help{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);background:var(--surface-sunken);
  margin-top:var(--sp-9);padding:var(--sp-6) var(--sp-5);color:var(--ink-500);font-size:var(--fs-sm)}
footer.site a{color:var(--ink-500);text-decoration:none}
footer.site a:hover{color:var(--ink-900);text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-6)}
.foot-col{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.foot-col h4{margin:0 0 .25rem;font-size:var(--fs-sm);color:var(--ink-900);text-transform:uppercase;letter-spacing:.06em}
.foot-col a{padding:.25rem 0;min-height:32px;display:inline-flex;align-items:center}
.foot-col .brand{font-size:1rem;min-height:0;padding:0}
.foot-col p{margin:0}
.foot-col address{font-style:normal;line-height:1.5}
.foot-base{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line)}

/* ---------- admin ---------- */
body.admin{background:var(--surface-sunken)}
.admin-main{padding:var(--sp-6) 0 var(--sp-9)}
.admin-main h1{font-size:var(--fs-2xl);margin-bottom:var(--sp-5)}
.admin-main h2{font-size:var(--fs-xl);margin:var(--sp-6) 0 var(--sp-3)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);
  margin-bottom:var(--sp-6)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-4);text-align:center;box-shadow:var(--shadow-sm)}
.stat .n{display:block;font-size:1.65rem;font-weight:700;color:var(--ink-900);letter-spacing:-.02em;line-height:1.2}
.stat .l{display:block;color:var(--ink-500);font-size:var(--fs-xs);margin-top:var(--sp-1)}
table.grid{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
table.grid th{text-align:left;background:var(--surface-sunken);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);font-weight:650;
  padding:.7rem .85rem;border-bottom:1px solid var(--line)}
table.grid td{padding:.8rem .85rem;border-top:1px solid var(--line);vertical-align:top;font-size:var(--fs-sm)}
table.grid tbody tr:first-child td{border-top:0}
table.grid tbody tr:hover{background:var(--brand-50)}
.pill{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:var(--fs-xs);
  font-weight:650;background:var(--surface-sunken);color:var(--ink-500);border:1px solid var(--line)}
.pill.active,.pill.closed{background:var(--ok-50);color:var(--ok-600);border-color:#bde3d2}
.pill.pendingpayment,.pill.awaitingcustomer,.pill.normal{background:var(--warn-50);color:var(--warn-700);border-color:#f0dcae}
.pill.suspended,.pill.cancelled,.pill.urgent,.pill.high{background:var(--danger-50);color:var(--danger-600);border-color:#f3c7c4}
.pill.awaitingsupport,.pill.open{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}
.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp-5);align-items:start}
.two-col > *{min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.panel h2{margin-top:0;font-size:var(--fs-lg)}
.panel>p.muted:first-of-type{margin-top:calc(var(--sp-2) * -1)}
.limits{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-2)}
.limits > *{min-width:0}
.limits label{font-size:var(--fs-xs);margin:var(--sp-2) 0 var(--sp-1)}
.actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-5);flex-wrap:wrap}
dl.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:.55rem var(--sp-4);margin:0}
dl.kv dt{color:var(--ink-500);font-size:var(--fs-sm)}
dl.kv dd{margin:0;font-size:var(--fs-sm);color:var(--ink-900);word-break:break-word}
.searchbar{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);max-width:32rem}
.warn{color:var(--warn-700);font-weight:600}
.stack{display:flex;flex-direction:column;gap:var(--sp-3);align-items:stretch}
.stack > .btn{width:100%}

/* ---------- tickets ---------- */
.thread{display:grid;gap:var(--sp-3);margin:var(--sp-5) 0}
.msg{border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);background:var(--surface)}
.msg.staff{background:var(--brand-50);border-color:var(--brand-100)}
.msg-head{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  font-weight:650;font-size:var(--fs-sm);color:var(--ink-900);margin-bottom:var(--sp-2)}
.msg-head .muted{font-weight:400}
.msg-body{white-space:pre-wrap;font-size:var(--fs-sm);color:var(--ink-700)}

/* ---------- design/build service ---------- */
.how-list{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:var(--sp-5)}
.how-list li{position:relative;padding-left:3rem;counter-increment:step;color:var(--ink-700);font-size:var(--fs-sm);line-height:1.55}
.how-list li::before{content:counter(step);position:absolute;left:0;top:-.1rem;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:var(--fs-sm)}
.how-list li:not(:last-child)::after{content:"";position:absolute;left:1.1rem;top:2.3rem;bottom:-1.4rem;width:2px;background:var(--line)}
.how-list li strong{display:block;color:var(--ink-900);margin-bottom:.2rem;font-size:var(--fs-base)}

.eyebrow-inline{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-700)}

.stepper{list-style:none;display:flex;padding:0;margin:0 0 var(--sp-5)}
.stepper li{flex:1;text-align:center;position:relative;font-size:var(--fs-xs);font-weight:650;color:var(--ink-400)}
.stepper li::before{content:"";position:absolute;top:.9rem;left:-50%;width:100%;height:2px;background:var(--line)}
.stepper li:first-child::before{display:none}
.stepper li span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;
  border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-500);margin:0 auto .4rem;
  font-size:var(--fs-sm);font-weight:700}
.stepper li.done{color:var(--ok-600)}
.stepper li.done span{background:var(--ok-600);border-color:var(--ok-600);color:#fff}
.stepper li.done::before{background:var(--ok-600)}
.stepper li.now{color:var(--brand-700)}
.stepper li.now span{background:var(--brand-600);border-color:var(--brand-600);color:#fff;box-shadow:0 0 0 4px var(--brand-50)}
@media (max-width:640px){.stepper li{font-size:0}.stepper li span{font-size:var(--fs-sm)}}

.quote-card{border-color:var(--brand-100);background:linear-gradient(180deg,var(--brand-50) 0%,var(--surface) 45%)}
.quote-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.quote-head h2{margin:.1rem 0 0;font-size:var(--fs-3xl);letter-spacing:-.02em;color:var(--brand-700)}
.quote-card h3{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);margin:var(--sp-4) 0 var(--sp-2);font-weight:700}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding:.3rem 0 .3rem 1.6rem;font-size:var(--fs-sm);color:var(--ink-700)}
.ticks li::before{content:"";position:absolute;left:0;top:.6rem;width:9px;height:5px;border-left:2px solid var(--ok-600);
  border-bottom:2px solid var(--ok-600);transform:rotate(-45deg)}
.quote-alt{margin-top:var(--sp-4);border-top:1px solid var(--line);padding-top:var(--sp-3)}
.quote-alt summary{cursor:pointer;font-weight:600;color:var(--ink-500);list-style:none;min-height:36px;display:flex;align-items:center}
.quote-alt summary::-webkit-details-marker{display:none}
.quote-alt summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-400);border-bottom:2px solid var(--ink-400);
  transform:rotate(-45deg);margin-right:.7rem;transition:transform .15s;flex:none}
.quote-alt[open] summary::before{transform:rotate(45deg)}
.quote-alt textarea{margin-top:var(--sp-2)}

/* ---------- content pages ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--brand-600);color:#fff;padding:.6rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
.legal,.contact{max-width:48rem;margin:var(--sp-7) auto var(--sp-9);padding-inline:var(--sp-5)}
.contact{max-width:64rem}
.legal h1{margin-bottom:var(--sp-1)}
.legal h2{margin-top:var(--sp-7);font-size:var(--fs-xl)}
.legal p,.legal li{color:var(--ink-700);line-height:1.65}
.legal ul{padding-left:1.25rem}
.legal li{margin:.4rem 0}
.legal table.grid td{vertical-align:top}
.biz{font-style:normal;line-height:1.6;color:var(--ink-700);margin:var(--sp-4) 0}
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:var(--sp-2) 0;padding:0 var(--sp-4)}
.faq details[open]{border-color:var(--brand-100)}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink-900);padding:.9rem 0;min-height:44px;display:flex;align-items:center;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";width:9px;height:9px;border-right:2px solid var(--brand-600);border-bottom:2px solid var(--brand-600);transform:rotate(-45deg);margin-right:.8rem;transition:transform .15s;flex:none}
.faq details[open] summary::before{transform:rotate(45deg)}
.faq details p{margin:0 0 var(--sp-4)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
label.terms{align-items:flex-start;margin-top:var(--sp-5);font-size:var(--fs-sm);line-height:1.5}
label.terms input{margin-top:.15rem;flex:none}
.error-page{max-width:36rem;margin:var(--sp-9) auto;padding-inline:var(--sp-5);text-align:center}
.error-code{font-size:4rem;font-weight:800;color:var(--brand-600);margin:0;line-height:1;letter-spacing:-.04em}
.error-page .actions{justify-content:center}
.btn-danger{border-color:var(--danger-600);color:var(--danger-600)}
.btn-danger:hover{background:var(--danger-50);border-color:var(--danger-600);color:var(--danger-600)}
.btn-sm{min-height:36px;padding:.35rem .8rem}
.inline-form{display:inline-block;margin-left:var(--sp-3)}
.status-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0}
.plain{list-style:none;padding:0;margin:0}
.plain li{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line)}
.plain li:last-child{border-bottom:0}
.brand-sub{color:var(--ink-500);font-weight:500;font-size:.9rem;margin-left:.3rem}
.alert-list{margin:.5rem 0 0 1.2rem;padding:0}
.alert .inline-form{float:right}
.danger-zone{margin-top:var(--sp-6);border-color:#f3c7c4}
.danger-zone h2{color:var(--danger-600)}
.auth-links{margin-top:var(--sp-5);text-align:center}

/* ---------- account / profile ---------- */
.profile-id{display:flex;align-items:center;gap:var(--sp-4)}
.avatar{flex:none;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--brand-600);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.15rem;letter-spacing:.02em}
.profile-id h2{margin:0;font-size:1.4rem;letter-spacing:-.01em}
.profile-id p{margin:.15rem 0 0;color:var(--ink-500);font-size:var(--fs-sm)}
.field-static{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius);
  padding:.65rem .8rem;color:var(--ink-500);font-size:var(--fs-sm)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .limits{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  header.site .container{min-height:62px;gap:var(--sp-3)}
  header.site nav{gap:0}
  header.site nav a{padding:.45rem .5rem;font-size:var(--fs-xs)}
  header.site nav a.nav-cta{padding:.5rem .8rem}
  .hero{padding:var(--sp-7) var(--sp-4) var(--sp-6)}
  .plans,.features{padding-inline:var(--sp-4)}
  .plan{padding:var(--sp-5)}
  .stat .n{font-size:1.35rem}
  table.grid{display:block;overflow-x:auto}
  .limits{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:620px){
  .foot-grid{grid-template-columns:1fr}
  .error-code{font-size:3rem}
  /* Brand + nav will not fit on one row on a phone; give the nav its own line
     rather than letting the CTA run off the right edge. */
  header.site .container{flex-wrap:wrap;justify-content:center;
    gap:var(--sp-2);padding-block:var(--sp-3);min-height:0}
  header.site nav{width:100%;justify-content:center;flex-wrap:wrap;gap:var(--sp-1)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .plan:hover,.tile:hover{transform:none}
}

.captcha-wrap{margin:var(--sp-4) 0}

.or{display:flex;align-items:center;gap:.8rem;margin:var(--sp-4) 0;color:var(--ink-500);font-size:var(--fs-sm)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.code-input{font-size:1.6rem;letter-spacing:.35em;text-align:center;font-weight:700}

/* ---------- modal dialog system ---------- */
.v-modal{display:none;position:fixed;inset:0;background:rgba(11,18,32,.65);backdrop-filter:blur(4px);
  z-index:1000;align-items:center;justify-content:center;padding:var(--sp-4);overflow-y:auto}
.v-modal.show{display:flex}
.v-modal-card{background:var(--surface);color:var(--ink-700);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;animation:modalEnter .18s cubic-bezier(.16,1,.3,1)}
.v-modal-card.wide{max-width:700px}
.v-modal-head{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);background:var(--surface-sunken);flex-shrink:0}
.v-modal-head h2,.v-modal-head h3{margin:0;font-size:var(--fs-lg);font-weight:700;color:var(--ink-900)}
.v-modal-close{background:none;border:none;color:var(--ink-500);font-size:1.4rem;line-height:1;
  padding:.2rem .4rem;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s}
.v-modal-close:hover{background:var(--line);color:var(--ink-900)}
.v-modal-body{padding:var(--sp-5);overflow-y:auto;flex:1;min-height:0}
.v-modal-foot{display:flex;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--line);background:var(--surface-sunken);flex-shrink:0}
@keyframes modalEnter{
  from{opacity:0;transform:scale(.96) translateY(6px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* form layout utilities */
.form-group{margin-bottom:var(--sp-3)}
.form-group label{margin:0 0 var(--sp-1);display:block;font-weight:600;font-size:var(--fs-sm);color:var(--ink-900)}
.form-control{width:100%}

/* ---------- thermal receipt printing system (zero-install) ---------- */
.thermal-receipt-print { display: none; }

@media print {
  @page {
    size: 80mm auto;
    margin: 0;
  }
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }
  body > *:not(#thermalReceiptPrint) {
    display: none !important;
  }
  #thermalReceiptPrint {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 72mm;
    margin: 0 auto;
    padding: 2mm 0;
    font-family: "Courier New", Courier, "Lucida Console", monospace !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #000 !important;
    background: #fff !important;
  }
  #thermalReceiptPrint.width-58 {
    width: 48mm !important;
    font-size: 10.5px !important;
  }
  #thermalReceiptPrint table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
}