/* ============================================================================
   SONIC ARC — DESIGN SYSTEM
   
   Direction: precise, quiet, premium. The reference is Apple's product pages,
   but applied to an instrument rather than an object — so the calm comes from
   restraint and typography, not from emptiness.

   Typeface is Inter, falling back to the system UI face. On a Mac that is
   SF Pro, which is close enough that this page shows the design honestly.
   In production Inter is SELF-HOSTED — served from our own server rather than
   Google's, so no visitor's IP reaches a third party. Same design, no privacy
   cost, and faster.
   ========================================================================== */

:root{
  /* ---- colour ------------------------------------------------------------
     White carries the product. Navy is structure. Blue is reserved almost
     entirely for things you can act on — which is what makes it read as
     meaningful rather than decorative. */
  --paper:      #FFFFFF;
  --wash:       #F6F8FA;   /* page ground where pure white is too stark */
  --navy:       #0B1B2B;   /* headers, dark sections */
  --navy-2:     #16293D;   /* raised surface on dark */
  --navy-3:     #24394F;   /* borders on dark */
  --blue:       #0A6CFF;   /* the accent — actions and active state only */
  --blue-dk:    #0055D4;
  --blue-wash:  #EDF4FF;
  --slate:      #4A5C6C;   /* body text */
  --slate-2:    #7C8FA0;   /* secondary */
  --slate-3:    #A9B7C2;   /* tertiary, placeholders */
  --hairline:   #E5EAEF;   /* dividers — never a heavy border */
  --hairline-2: #F0F3F6;
  --ink:        #0B1B2B;
  --good:       #0E7C5A;
  --good-wash:  #E7F5F0;
  --warn:       #9A6B10;
  --warn-wash:  #FDF5E4;
  --bad:        #B3382C;
  --bad-wash:   #FBEDEB;

  /* ---- type -------------------------------------------------------------- */
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- radius: 16–20 on cards, tighter on controls, or a form looks like a toy */
  --r-card: 18px;
  --r-ctl:  9px;
  --r-chip: 6px;

  /* ---- elevation: very light. Depth comes from hairlines, not shadow ----- */
  --e1: 0 1px 2px rgba(11,27,43,.04), 0 1px 1px rgba(11,27,43,.03);
  --e2: 0 2px 8px rgba(11,27,43,.05), 0 1px 2px rgba(11,27,43,.04);
  --e3: 0 8px 28px rgba(11,27,43,.08), 0 2px 6px rgba(11,27,43,.04);

  /* ---- motion: slow enough to feel considered, short enough to feel instant */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;
}

*{ box-sizing:border-box }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
body{
  margin:0; background:var(--wash); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  font-feature-settings:"cv02","cv03","cv04","cv11";
}

/* ---- type scale --------------------------------------------------------
   Editorial: a big jump from display to body, very little in between. That
   gap is what makes a page feel composed rather than merely styled. */
.display{ font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.02; letter-spacing:-0.035em; font-weight:640 }
.h1{ font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1.12; letter-spacing:-0.026em; font-weight:640 }
.h2{ font-size:1.3rem;  line-height:1.25; letter-spacing:-0.016em; font-weight:620 }
.h3{ font-size:1.02rem; line-height:1.35; letter-spacing:-0.008em; font-weight:600 }
.body{ font-size:15px; color:var(--slate) }
.small{ font-size:13.5px; color:var(--slate-2) }
.micro{ font-size:12px; color:var(--slate-2) }

/* Eyebrow: the spec-sheet vernacular. Used sparingly — it is a signpost,
   not a decoration. */
.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--slate-2); font-weight:500;
}

/* Figures must be tabular or columns of numbers look drunk. */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" }

/* ---- page furniture ---------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hairline);
  padding:.85rem clamp(1rem,4vw,2.5rem);
  display:flex; align-items:center; gap:1rem;
}
.mark{ font-weight:660; letter-spacing:-0.02em; font-size:1.02rem }
.mark em{ font-style:normal; color:var(--slate-2); font-weight:500 }
.grow{ flex:1 }

.wrap{ max-width:1120px; margin:0 auto; padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,2.5rem) 6rem }

section{ margin-bottom:clamp(3rem,7vw,5.5rem) }
.sec-head{ margin-bottom:1.6rem; padding-bottom:.9rem; border-bottom:1px solid var(--hairline) }
.sec-head p{ margin:.45rem 0 0; max-width:52ch }

.grid{ display:grid; gap:1rem }
.g2{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.g3{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.g4{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }

.card{
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-card); box-shadow:var(--e1);
}
.card .pad{ padding:1.25rem }
.card .head{ padding:1rem 1.25rem; border-bottom:1px solid var(--hairline-2) }

/* ---- colour swatches --------------------------------------------------- */
.sw{ border-radius:var(--r-ctl); overflow:hidden; border:1px solid var(--hairline) }
.sw .chip{ height:76px }
.sw .meta{ padding:.6rem .7rem; background:var(--paper) }
.sw .meta b{ display:block; font-size:13px; font-weight:600 }
.sw .meta code{ font-family:var(--mono); font-size:11px; color:var(--slate-2) }

/* ---- buttons ------------------------------------------------------------
   One primary per view. If everything is blue, nothing is. */
.btn{
  font:inherit; font-size:14.5px; font-weight:560; letter-spacing:-0.006em;
  border-radius:var(--r-ctl); padding:.58rem 1.15rem; cursor:pointer;
  border:1px solid transparent; transition:all var(--t-fast) var(--ease);
  display:inline-flex; align-items:center; gap:.45rem;
}
.btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:var(--e1) }
.btn-primary:hover{ background:var(--blue-dk); transform:translateY(-1px); box-shadow:var(--e2) }
.btn-primary:active{ transform:translateY(0) }
.btn-secondary{ background:var(--paper); color:var(--ink); border-color:var(--hairline); box-shadow:var(--e1) }
.btn-secondary:hover{ border-color:var(--slate-3) }
.btn-quiet{ background:transparent; color:var(--slate) }
.btn-quiet:hover{ background:var(--hairline-2); color:var(--ink) }
.btn-danger{ background:var(--paper); color:var(--bad); border-color:#EFD5D1 }
.btn-danger:hover{ background:var(--bad-wash) }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none !important }
.btn-lg{ font-size:15.5px; padding:.72rem 1.5rem }
.btn-sm{ font-size:13px; padding:.4rem .8rem }

/* ---- inputs ------------------------------------------------------------- */
.field{ margin-bottom:1rem }
.field label{ display:block; margin-bottom:.35rem }
.lbl{ font-size:12.5px; font-weight:560; color:var(--slate) }
input, select, textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-ctl); padding:.62rem .8rem;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input::placeholder{ color:var(--slate-3) }
input:hover, select:hover{ border-color:var(--slate-3) }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash);
}
.field .help{ font-size:12.5px; color:var(--slate-2); margin-top:.3rem }

/* ---- chips / status ----------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:12px; font-weight:560; padding:.2rem .5rem; border-radius:var(--r-chip);
}
.chip-good{ background:var(--good-wash); color:var(--good) }
.chip-warn{ background:var(--warn-wash); color:var(--warn) }
.chip-bad { background:var(--bad-wash);  color:var(--bad) }
.chip-info{ background:var(--blue-wash); color:var(--blue-dk) }
.chip-flat{ background:var(--hairline-2); color:var(--slate) }

/* ---- stat row ----------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline);
  border-radius:var(--r-card); overflow:hidden }
.stat{ background:var(--paper); padding:1.15rem 1.25rem }
.stat .k{ font-size:12.5px; color:var(--slate-2); margin-bottom:.3rem }
.stat .v{ font-size:1.65rem; font-weight:620; letter-spacing:-0.028em; line-height:1.1 }
.stat .v small{ font-size:.62em; font-weight:500; color:var(--slate-2); letter-spacing:0 }

/* ---- TABLE: the premium-density treatment ------------------------------
   The point: information-dense AND pleasant. Achieved with generous row
   height, hairline separators only (no grid), tabular figures, and weight
   carrying the hierarchy instead of boxes and fills. */
.table{ width:100%; border-collapse:collapse }
.table th{
  text-align:left; font-size:11.5px; font-weight:560; letter-spacing:.04em;
  text-transform:uppercase; color:var(--slate-2);
  padding:.7rem 1rem; border-bottom:1px solid var(--hairline);
  white-space:nowrap;
}
.table td{
  padding:.92rem 1rem; border-bottom:1px solid var(--hairline-2);
  vertical-align:middle;
}
.table tbody tr{ transition:background var(--t-fast) var(--ease) }
.table tbody tr:hover{ background:var(--wash) }
.table tbody tr:last-child td{ border-bottom:0 }
.table .r{ text-align:right }
.table .model{ font-weight:560 }
.table .sub{ font-size:12.5px; color:var(--slate-2); margin-top:.1rem }
.table tfoot td{
  padding:1rem; border-top:1px solid var(--hairline);
  font-weight:620; font-size:1.02rem;
}

/* ---- dark section (hero / marketing) ------------------------------------ */
.dark{
  background:var(--navy); color:#EAF0F5; border-radius:var(--r-card);
  padding:clamp(2rem,5vw,3.4rem); position:relative; overflow:hidden;
}
.dark .eyebrow{ color:#6E8398 }
.dark .body{ color:#A9BACA }
.dark .hairline{ border-color:var(--navy-3) }

/* The coverage field — the product's own output, used as atmosphere.
   Dispersion lobes on a listening plane. Navy/blue rather than the earlier
   teal, per the brief. */
.field-bg{ position:absolute; inset:0; opacity:.6; pointer-events:none }

/* ---- density demo ------------------------------------------------------- */
.dense-note{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate-2); margin-bottom:.5rem }

/* ---- spacing scale ------------------------------------------------------ */
.space-row{ display:flex; align-items:flex-end; gap:.8rem; flex-wrap:wrap }
.space-item{ text-align:center }
.space-bar{ background:var(--blue-wash); border:1px solid #CFE1FF; border-radius:4px }
.space-item code{ font-family:var(--mono); font-size:10.5px; color:var(--slate-2); display:block; margin-top:.35rem }

/* ---- motion demo -------------------------------------------------------- */
.motion-box{
  width:100%; height:64px; border-radius:var(--r-ctl); background:var(--blue-wash);
  border:1px solid #CFE1FF; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--blue-dk); cursor:pointer; user-select:none;
}
.motion-box:hover{ transform:translateY(-3px); box-shadow:var(--e3) }
.motion-box.fast{ transition:all var(--t-fast) var(--ease) }
.motion-box.base{ transition:all var(--t-base) var(--ease) }
.motion-box.slow{ transition:all var(--t-slow) var(--ease) }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  .btn-primary:hover, .motion-box:hover{ transform:none }
}

/* ============================ application shell ========================= */
/* Layout shells used by the page mockups. Same tokens throughout. */

.app{ display:grid; grid-template-columns:232px 1fr; min-height:100vh }
@media (max-width:900px){ .app{ grid-template-columns:1fr } .side{ display:none } }

.side{
  background:var(--paper); border-right:1px solid var(--hairline);
  padding:1.1rem .8rem; display:flex; flex-direction:column; gap:.15rem;
}
.side .mark{ padding:.3rem .55rem 1.1rem }
.nav{ font-size:14px; color:var(--slate); padding:.5rem .55rem; border-radius:var(--r-ctl);
  text-decoration:none; display:flex; align-items:center; gap:.55rem;
  transition:background var(--t-fast) var(--ease) }
.nav:hover{ background:var(--wash); color:var(--ink) }
.nav.on{ background:var(--blue-wash); color:var(--blue-dk); font-weight:560 }
.nav .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5 }
.side .grow{ flex:1 }
.side .foot{ border-top:1px solid var(--hairline-2); padding-top:.8rem; margin-top:.6rem }

.main{ padding:clamp(1.4rem,3.2vw,2.6rem); max-width:1180px }
.page-head{ display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem }
.page-head .grow{ flex:1 }

.site-top{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--hairline);
  padding:.9rem clamp(1rem,4vw,3rem); display:flex; align-items:center; gap:1.6rem;
}
.site-top a{ color:var(--slate); text-decoration:none; font-size:14px }
.site-top a:hover{ color:var(--ink) }
.site-top .grow{ flex:1 }

.hero{ background:var(--navy); color:#EAF0F5; position:relative; overflow:hidden;
  padding:clamp(3.5rem,9vw,7rem) clamp(1rem,4vw,3rem) clamp(3rem,7vw,5.5rem) }
.hero-in{ position:relative; z-index:2; max-width:1120px; margin:0 auto }
.video-slot{
  position:relative; z-index:2; max-width:1120px; margin:2.8rem auto 0;
  aspect-ratio:16/8; border-radius:var(--r-card); border:1px solid var(--navy-3);
  background:linear-gradient(180deg,#132738,#0E1F30);
  display:flex; align-items:center; justify-content:center; text-align:center;
}

.band{ padding:clamp(2.6rem,6vw,4.5rem) clamp(1rem,4vw,3rem) }
.band-in{ max-width:1120px; margin:0 auto }
.band.alt{ background:var(--paper); border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline) }

.flowline{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0;
  border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden; background:var(--paper) }
.flowstep{ padding:1.3rem 1.15rem; border-right:1px solid var(--hairline-2); position:relative }
.flowstep:last-child{ border-right:0 }
.flowstep .n{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--blue); font-weight:600 }
.flowstep h4{ margin:.5rem 0 .25rem; font-size:15px; font-weight:600; letter-spacing:-0.01em }
.flowstep p{ margin:0; font-size:13px; color:var(--slate-2); line-height:1.5 }

.price{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem }
.price .card{ display:flex; flex-direction:column }
.price .amt{ font-size:2.1rem; font-weight:640; letter-spacing:-0.03em; line-height:1 }
.price .amt small{ font-size:.42em; font-weight:500; color:var(--slate-2); letter-spacing:0 }
.price ul{ list-style:none; margin:1rem 0 0; padding:0; font-size:13.5px; color:var(--slate) }
.price li{ padding:.34rem 0; border-bottom:1px solid var(--hairline-2) }
.price li:last-child{ border-bottom:0 }
.price .card.featured{ border-color:#BFD9FF; box-shadow:0 0 0 3px var(--blue-wash), var(--e2) }

.drop{
  border:2px dashed var(--hairline); border-radius:var(--r-card); background:var(--wash);
  padding:clamp(3rem,9vw,6rem) 1.5rem; text-align:center;
  transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.drop:hover{ border-color:#BFD9FF; background:var(--blue-wash) }

/* AI analysis: a line that advances, not a spinner */
.scan{ max-width:640px; margin:0 auto }
.scanline{ height:2px; background:var(--navy-3); border-radius:2px; overflow:hidden; margin:2.2rem 0 }
.scanline i{ display:block; height:100%; width:38%; background:var(--blue); border-radius:2px;
  animation:scan 2.6s var(--ease) infinite }
@keyframes scan{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(360%) } }
.steps-log{ list-style:none; margin:0; padding:0; font-size:15px }
.steps-log li{ padding:.5rem 0; color:#5E7governed; display:flex; align-items:center; gap:.6rem }
.steps-log li{ color:#6E8398 }
.steps-log li.done{ color:#EAF0F5 }
.steps-log li.now{ color:#EAF0F5; font-weight:560 }
.tick{ width:16px; height:16px; flex:none; border-radius:50%; border:1.5px solid currentColor;
  display:inline-flex; align-items:center; justify-content:center; font-size:9px }
.tick.full{ background:var(--blue); border-color:var(--blue); color:#fff }

.split2{ display:grid; grid-template-columns:1.35fr 1fr; gap:1rem }
@media (max-width:980px){ .split2{ grid-template-columns:1fr } }

.legend{ display:flex; align-items:center; gap:.5rem; font-size:12.5px; color:var(--slate-2) }
.ramp{ height:8px; flex:1; border-radius:4px;
  background:linear-gradient(90deg,#1B4B8F,#0A6CFF,#3FBFA8,#E9C46A,#E76F51) }

.toggle{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0;
  border-bottom:1px solid var(--hairline-2); font-size:14px }
.toggle:last-child{ border-bottom:0 }
.sw-ui{ width:38px; height:22px; border-radius:11px; background:var(--hairline); position:relative;
  cursor:pointer; transition:background var(--t-fast) var(--ease); flex:none }
.sw-ui i{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:var(--e1); transition:transform var(--t-fast) var(--ease) }
.sw-ui.on{ background:var(--blue) }
.sw-ui.on i{ transform:translateX(16px) }


/* ============================================================================
   SIGN-IN / REGISTER — the split screen
   
   Navy stage on the left carrying the coverage field and the proposition;
   white panel on the right holding the form, centred and held to a comfortable
   measure. A form stretched across a wide screen is unpleasant to fill in and
   looks unconsidered, so the panel content is capped rather than fluid.
   ========================================================================== */

.split{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  /* On a very wide monitor an uncapped two-column layout stretches to absurdity —
     a form field a metre across is unpleasant to fill in. The whole split is
     capped and centred, with the surrounding space filled by the navy so the
     page still reads as full-bleed rather than a card floating on grey. */
  max-width:1240px;
  margin:0 auto;
  background:var(--paper);
  box-shadow:0 0 0 100vmax var(--navy);
  clip-path:inset(0 -100vmax);
}
@media (max-width:960px){
  .split{
    grid-template-columns:1fr;
    max-width:none;
    box-shadow:none;
    clip-path:none;
  }
}

.stage{
  position:relative; overflow:hidden;
  background:var(--navy); color:#EAF0F5;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(1.8rem,4vw,3.4rem);
}
@media (max-width:960px){
  .stage{ min-height:auto; padding:1.8rem 1.4rem 2.2rem }
}

.stage-inner{ position:relative; z-index:2; max-width:32rem }
.stage-foot{
  position:relative; z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:#6E8398;
}
@media (max-width:960px){ .stage-foot{ display:none } }

.wordmark{ font-size:1.02rem; font-weight:660; letter-spacing:-0.02em; margin:0 }
.wordmark span{ color:#4FB3B3; font-family:var(--mono); font-weight:500 }
.stage .wordmark{ color:#EAF0F5 }
.stage .wordmark span{ color:#4FA3FF }

/* the coverage field sits behind everything on the stage */
.field-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.85 }

.panel{
  background:var(--paper);
  padding:clamp(1.8rem,4vw,3.4rem) clamp(1.2rem,4vw,3rem);
  display:flex; align-items:center; justify-content:center;
}
.panel-inner{ width:100%; max-width:26rem }

/* two fields side by side, stacking on narrow screens */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem }
@media (max-width:520px){ .row{ grid-template-columns:1fr } }

/* Consent. Never pre-ticked — consent has to be given, not assumed. The
   checkbox sits beside its label rather than floating above it. */
.consent{
  display:flex; align-items:flex-start; gap:.6rem;
  margin:.6rem 0; font-size:13.5px; color:var(--slate); line-height:1.5;
  cursor:pointer;
}
.consent input[type=checkbox]{
  width:16px; height:16px; flex:none; margin:.18rem 0 0;
  accent-color:var(--blue); cursor:pointer;
}
.consent a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px }

.notice{
  border-radius:var(--r-ctl); padding:.65rem .75rem;
  font-size:13.5px; margin-bottom:1rem; display:none;
}
.notice.error{ background:var(--bad-wash); border:1px solid #EFD5D1; color:var(--bad); display:block }
.notice.info { background:var(--blue-wash); border:1px solid #CFE1FF; color:var(--blue-dk); display:block }

.alt{ text-align:center; margin-top:1.2rem; font-size:13.5px; color:var(--slate-2) }
.alt a{ color:var(--blue); font-weight:560; text-decoration:none }
.alt a:hover{ text-decoration:underline }

/* ============================================================================
   DASHBOARD — empty state and notices
   ========================================================================== */

/* An empty state is an invitation, not an apology. */
.empty{ text-align:center; padding:clamp(2.2rem,6vw,3.6rem) 1.4rem }
.empty h2{ margin-bottom:.4rem }
.empty > .body{ max-width:38rem; margin-left:auto; margin-right:auto }
.empty .start{ margin:1.4rem 0 0 }

button.start{
  font:inherit; font-size:15px; font-weight:620;
  padding:.62rem 1.5rem; border:0; border-radius:var(--r-ctl);
  background:var(--blue); color:#fff; cursor:pointer;
  transition:all var(--t-fast) var(--ease);
}
button.start:hover{ background:var(--blue-dk); transform:translateY(-1px); box-shadow:var(--e2) }

.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1.1rem; margin-top:2rem; text-align:left;
}
.step{ border-top:2px solid var(--blue); padding-top:.7rem }
.step .n{
  display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.04em; color:var(--blue); font-weight:620;
}
.step p{ margin:.3rem 0 0; font-size:13.5px; color:var(--slate-2); line-height:1.55 }

/* A standing notice — trial status, an expiry warning, an overdraft. */
.trial{
  background:var(--blue-wash); border:1px solid #CFE1FF;
  border-radius:var(--r-card); padding:.85rem 1rem; margin-bottom:1.2rem;
  font-size:13.5px; color:var(--blue-dk); line-height:1.55;
}
.trial b{ font-weight:640 }