/* ==========================================================================
   CharterOwl — marketing site
   Shared by every page. Header and footer are injected by site.js so there is
   one source of truth for them.
   ========================================================================== */

:root{
  color-scheme:light;

  --rb-950:#0a1730; --rb-900:#0e2145; --rb-800:#152d5c; --rb-700:#1c3f9e;
  --rb-600:#2450b8; --rb-500:#3266cc; --rb-400:#6f93dd; --rb-100:#dfe7f7; --rb-50:#f2f5fc;

  --tl-900:#0a4a44; --tl-800:#0b6259; --tl-700:#0e7c72; --tl-600:#12938a;
  --tl-500:#1aa79c; --tl-400:#4cc4ba; --tl-100:#d3ece9; --tl-50:#eef7f6;

  --bg:#ffffff; --surface:#ffffff; --surface-2:#f7f8fa;
  --line:#e6e8ec; --line-soft:#f0f1f4;
  --ink:#14161b; --ink-2:#3c4149; --muted:#6b7280; --muted-2:#6b7280;
  --gold:#d8a12a;

  /* Error red. Referenced throughout the form and auth CSS. */
  --bad:#b3303f;

  --radius:4px; --radius-sm:3px;
  /* C4: decision surfaces get their own radius so the layout encodes
     hierarchy instead of rendering every content type identically. */
  --radius-lg:14px;
  --line-strong:#c9ccd2;
  --head-h:68px;
  /* Source Serif 4 for headings, Inter Tight for body and UI. Both are loaded
     with display=swap and preconnect, so the page paints immediately in the
     platform fallback and reflows once when the webfonts arrive. The fallback
     stack is the system UI face, which is what shipped here before. */
  --font:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",
    "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,Consolas,
    "Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 14px);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
a{color:var(--rb-700);text-decoration:none}
button{font-family:inherit;color:inherit;cursor:pointer}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--tl-500);outline-offset:3px;border-radius:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

*{scrollbar-width:thin;scrollbar-color:#bcc5d6 transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--line-soft)}
::-webkit-scrollbar-thumb{background:#a9b4c8;border-radius:7px;border:3px solid var(--line-soft);
  background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#8b98b1;background-clip:content-box}

.wrap{max-width:1220px;margin:0 auto;padding:0 26px}
/* The header and footer run edge to edge, so they get a wider measure than
   the reading columns inside the page. */
.wrap--wide{max-width:1640px;padding:0 40px}
@media (max-width:640px){.wrap{padding:0 18px}.wrap--wide{padding:0 18px}}

/* ---------- Fixed backdrop ------------------------------------------------
   A single fixed layer behind the whole document. Content sections are opaque,
   so it only shows through the hero and page banners — which gives the static
   backdrop effect while scrolling. position:fixed is used rather than
   background-attachment:fixed, which iOS Safari does not honour.
   hero.jpg is the first layer; if it is absent the drawn skyline shows. */
.backdrop{
  position:fixed;inset:0;z-index:0;
  /* hero.jpg is the New York skyline by Sherzod Max, Unsplash licence (free
     for commercial use, attribution not required). Served locally, so the page
     makes no third-party request. skyline.svg is a drawn fallback. */
  background-image:url("../img/hero.jpg"),url("../img/skyline.svg");
  /* 55% sits between the original framing (skyline high, ~12% down) and the
     fully extended sky (~50% down): enough sky for the headline to sit on,
     with the buildings filling the lower two-thirds. */
  background-size:cover;background-position:center 55%;background-repeat:no-repeat;
}
.backdrop::after{content:"";position:absolute;inset:0;background:
  radial-gradient(1000px 560px at 50% 44%, rgba(6,14,30,.62) 0%, rgba(6,14,30,.20) 72%),
  linear-gradient(180deg, rgba(6,14,30,.46) 0%, rgba(6,14,30,.30) 46%, rgba(6,14,30,.68) 100%)}
.page{position:relative;z-index:1}

/* ---------- Scroll progress ---------------------------------------------- */
.progress-bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--tl-500),var(--rb-500));transition:width .1s linear}

/* ---------- Header -------------------------------------------------------- */
.site-head{
  position:fixed;top:0;left:0;right:0;height:var(--head-h);z-index:100;display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:height .22s ease,background .22s ease,border-color .22s ease,backdrop-filter .22s ease;
}
/* A soft wash only while the bar is transparent, so the navigation stays
   legible against a bright part of the photograph. */
.site-head::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,10,22,.58) 0%,rgba(4,10,22,.16) 70%,transparent 100%);
  transition:opacity .22s ease;
}
.site-head.is-stuck{
  height:58px;background:rgba(8,18,42,.95);backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.09);
}
.site-head.is-stuck::before{opacity:0}
.site-head .wrap{display:flex;align-items:center;gap:20px;width:100%}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__mark{width:34px;height:34px;line-height:0;transition:transform .22s ease}
.brand__mark svg{width:100%;height:100%;display:block}
.brand:hover .brand__mark{transform:rotate(-6deg) scale(1.05)}
.brand__name{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.015em;
  color:#fff;line-height:1}
.brand__name em{font-style:normal;color:var(--tl-400)}
/* Centred between the lockup and the icons rather than tucked against the
   logo: the nav is the middle third of the bar, not a tail on the brand. */
.site-nav{display:flex;gap:2px;margin:0 auto}
.site-nav a{color:#c3cede;font-size:14px;font-weight:450;padding:9px 13px;
  border-radius:var(--radius-sm);position:relative;transition:color .15s,background .15s;white-space:nowrap}
.site-nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.site-nav a.is-current{color:#fff;font-weight:550}
.site-nav a.is-current::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  background:var(--tl-500)}

.head-icons{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#dbe4f5;
  transition:.15s;position:relative}
.icon-btn:hover{background:var(--tl-700);border-color:var(--tl-600);color:#fff;transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
.icon-btn__dot{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--gold);color:#3a2a00;font-size:14px;font-weight:700;
  display:grid;place-items:center;font-family:var(--mono)}
.nav-toggle{display:none}

@media (max-width:1040px){
  .site-nav{position:fixed;top:var(--head-h);left:0;right:0;flex-direction:column;gap:0;margin:0;
    background:var(--rb-950);border-bottom:1px solid rgba(255,255,255,.1);padding:8px 18px 16px;
    transform:translateY(-150%);transition:transform .28s ease}
  .site-nav.is-open{transform:translateY(0)}
  .site-nav a{padding:12px 8px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .site-nav a.is-current::after{left:8px;right:auto;width:16px;bottom:8px}
  .nav-toggle{display:grid}
}

/* ---------- Hero ---------------------------------------------------------- */
.hero{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:calc(var(--head-h) + 70px) 0 96px;position:relative}
.hero__eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 15px;border-radius:30px;
  border:1px solid rgba(76,196,186,.42);background:rgba(14,124,114,.22);color:var(--tl-400);
  font-size:14px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;margin-bottom:26px}
.hero__eyebrow b{color:#fff;font-weight:700}
/* The hero keeps the sans deliberately: the display serif reads well at
   section size but the slogan is the one line that has to feel like the
   product rather than the prospectus. */
.hero h1{font-family:var(--font);font-size:clamp(33px,5.4vw,60px);font-weight:700;
  letter-spacing:-.035em;line-height:1.09;color:#fff;text-wrap:balance;max-width:32ch;margin:0 auto;
  text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero h1 em{font-style:normal;color:var(--tl-400)}
.hero__sub{margin:22px auto 0;max-width:62ch;font-size:clamp(15px,1.7vw,18.5px);line-height:1.64;
  color:#e4e9f1;text-wrap:balance;text-shadow:0 1px 14px rgba(4,10,22,.6)}
.hero__cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero__meta{margin-top:26px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;
  color:#c6d0de;font-size:14px;text-shadow:0 1px 12px rgba(4,10,22,.6)}
.hero__meta b{color:#fff;font-family:var(--mono);font-weight:700}
/* Columns follow the number of figures rather than a fixed four, so dropping
   one leaves no empty cell showing the container's own background through it.
   auto-flow does this without the count being written down anywhere. */
.hero__stats{margin:50px auto 0;display:grid;
  grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  overflow:hidden;max-width:720px}
.hero__stat{background:rgba(8,16,32,.62);backdrop-filter:blur(3px);padding:22px 14px}
.hero__stat b{display:block;font-family:var(--mono);font-size:26px;font-weight:700;color:#fff;
  letter-spacing:-.02em;line-height:1}
.hero__stat span{display:block;font-size:14px;letter-spacing:.11em;text-transform:uppercase;
  color:#c6d0de;font-weight:600;margin-top:8px}
/* Stacked on a phone: a fixed two-column grid would strand an odd figure in a
   half-empty row, which is the same fault at a smaller size. */
@media (max-width:760px){
  .hero__stats{grid-auto-flow:row;grid-auto-columns:auto;max-width:340px}
}

/* ---------- Page banner (every page except home) -------------------------- */
.banner{padding:calc(var(--head-h) + 74px) 0 72px;text-align:center;position:relative}
.banner__crumb{font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:var(--tl-400);
  font-weight:700;margin-bottom:14px}
.banner h1{font-family:var(--display);font-size:clamp(30px,4.4vw,46px);font-weight:700;
  letter-spacing:-.032em;line-height:1.12;color:#fff;text-wrap:balance;max-width:42ch;margin:0 auto}
.banner p{margin:18px auto 0;max-width:62ch;font-size:16.5px;line-height:1.62;color:#e4e9f1;
  text-shadow:0 1px 14px rgba(4,10,22,.6)}

/* ---------- Buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;
  border-radius:var(--radius-sm);border:1px solid transparent;font-size:14.5px;font-weight:600;
  letter-spacing:-.005em;transition:.16s;white-space:nowrap}
.btn--primary{background:var(--tl-700);color:#fff;box-shadow:0 4px 18px -6px rgba(14,124,114,.8)}
.btn--primary:hover{background:var(--tl-600);transform:translateY(-2px);
  box-shadow:0 10px 26px -8px rgba(14,124,114,.85)}
.btn--ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn--solid{background:var(--rb-700);color:#fff}
.btn--solid:hover{background:var(--rb-800);transform:translateY(-2px)}
.btn--line{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.btn--line:hover{border-color:var(--tl-600);color:var(--tl-800);background:var(--tl-50)}
.btn--lg{height:54px;padding:0 32px;font-size:15.5px}
.btn--block{width:100%}

/* ---------- Sections ------------------------------------------------------ */
.sec{padding:112px 0;background:var(--bg);position:relative}
.sec--white{background:var(--surface-2)}
.sec--dark{background:linear-gradient(168deg,#0e2145,#0a1730);color:#fff}
.sec--dark .sec__title{color:#fff}
.sec--dark .sec__lead{color:#b9c6dc}
.sec--flush{padding-top:0}

.sec__eyebrow{font-size:14px;letter-spacing:.19em;text-transform:uppercase;font-weight:700;
  color:var(--tl-700);margin-bottom:14px}
.sec--dark .sec__eyebrow{color:var(--tl-400)}
.sec__title{font-family:var(--display);font-size:clamp(25px,3.3vw,38px);font-weight:600;
  letter-spacing:-.028em;line-height:1.17;color:var(--ink);text-wrap:balance;max-width:46ch}
.sec__lead{margin-top:16px;font-size:16.5px;line-height:1.68;color:var(--muted);max-width:68ch}
.sec--dark .sec__lead{color:#b9c6dc}
.sec__head{margin-bottom:54px}

/* Left-aligned section heads carry a thin rule down their left edge, and split
   into two columns on wide screens so the copy is not stranded against a large
   empty right-hand margin. Centred heads (the home page) get neither. */
.sec__head:not(.sec__head--mid){position:relative;padding-left:26px}
.sec__head:not(.sec__head--mid)::before{
  content:"";position:absolute;left:0;top:-10px;bottom:-10px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--tl-600) 0%,var(--rb-600) 100%);
  transform-origin:top;
}
/* The rule draws up to 30% and settles back once, and only when the cursor is
   over the heading — nothing happens on scroll. Leaving and re-entering
   replays it. */
.sec__head:not(.sec__head--mid):hover::before{
  animation:rule-dip 1.5s cubic-bezier(.42,0,.18,1) 1;
}
@keyframes rule-dip{
  0%{transform:scaleY(1)}
  46%{transform:scaleY(.3)}
  100%{transform:scaleY(1)}
}
@media (min-width:1000px){
  /* Heading on the left, section mark and copy stacked on the right. Two rows
     so the mark sits directly above the paragraph it introduces while the
     heading spans both and stays optically centred against them.

     The selector below used to name .sec__eyebrow, which item C1 renamed to
     .sec__mark - leaving the mark occupying a grid cell of its own and shunting
     the heading into the second column. */
  .sec__head:not(.sec__head--mid){
    display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:56px;align-items:center;
  }
  /* A head with no lead paragraph has nothing for the second column, so it
     stays a single block rather than sitting in a half-width well. */
  .sec__head:not(.sec__head--mid):not(:has(.sec__lead)){display:block}
  .sec__head:not(.sec__head--mid) .sec__title{
    grid-column:1;grid-row:1 / 3;align-self:center;max-width:none;margin:0}
  .sec__head:not(.sec__head--mid) .sec__mark{
    grid-column:2;grid-row:1;align-self:end;margin:0 0 12px}
  .sec__head:not(.sec__head--mid) .sec__lead{
    grid-column:2;grid-row:2;align-self:start;margin:0;max-width:none}
}

.sec__head--mid{text-align:center}
.sec__head--mid .sec__title,.sec__head--mid .sec__lead{margin-left:auto;margin-right:auto}

/* A monospace comma occupies a full character cell, so it reads as a gap on
   either side. Close it up without disturbing the digit alignment. */
.num-sep{margin:0 -.16em;display:inline-block}

/* ---------- Emphasis ------------------------------------------------------ */
strong,b{font-weight:700;color:var(--ink)}
.sec--dark strong,.sec--dark b,.cta strong,.hero strong{color:#fff}
p em,li em{font-style:italic;color:var(--ink-2)}
.price__list strong,.level__list strong{font-weight:700}
.foot-bottom strong{color:#c3c9d2}

/* ---------- Grid & cards -------------------------------------------------- */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);border-color:#d2d5da;
  box-shadow:0 1px 2px rgba(20,22,27,.04), 0 18px 38px -18px rgba(20,22,27,.22)}
.sec--white .card{background:var(--surface)}
.card__ico{width:42px;height:42px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--tl-700);margin-bottom:18px}
.card__ico svg{width:21px;height:21px}
.card h3{font-family:var(--display);font-size:17.5px;font-weight:600;letter-spacing:-.015em;
  margin-bottom:11px;color:var(--ink)}
.card p{font-size:14px;line-height:1.68;color:var(--muted)}
.card__tag{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:2px;padding:3px 8px;font-weight:500}

/* ---------- Level cards --------------------------------------------------- */
.level{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.level:hover{transform:translateY(-3px);border-color:#d2d5da;
  box-shadow:0 1px 2px rgba(20,22,27,.04), 0 20px 42px -18px rgba(20,22,27,.26)}
/* The card header carries a set of concentric rounded outlines in the dead
   space to the right of the type. They are drawn rather than imaged: nested
   box-shadow spreads on one element, so the whole pattern costs no requests
   and scales with the card. */
.level__top{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:24px 26px;
  background:linear-gradient(135deg,#062a24 0%,#0a3a30 46%,#0e4a3c 100%)}
.level__top::before{
  /* Concentric arcs, not nested rounded rectangles. The old pattern was built
     from box-shadow spread, and spread can only ever follow border-radius - so
     the shape was locked to a squircle. Drawn as one SVG the stroke keeps an
     even 1.5px weight at every radius, and half-rings centred off the right
     edge read as a dial, which is the same idea as the readiness band the
     product is actually built around. */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27200%27%20viewBox%3D%270%200%20260%20200%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23BEF2E1%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M250%2062%20A38%2038%200%200%200%20250%20138%27%20stroke-opacity%3D%270.340%27%2F%3E%3Cpath%20d%3D%27M250%2042%20A58%2058%200%200%200%20250%20158%27%20stroke-opacity%3D%270.260%27%2F%3E%3Cpath%20d%3D%27M250%2022%20A78%2078%200%200%200%20250%20178%27%20stroke-opacity%3D%270.200%27%2F%3E%3Cpath%20d%3D%27M250%202%20A98%2098%200%200%200%20250%20198%27%20stroke-opacity%3D%270.150%27%2F%3E%3Cpath%20d%3D%27M250%20-18%20A118%20118%200%200%200%20250%20218%27%20stroke-opacity%3D%270.110%27%2F%3E%3Cpath%20d%3D%27M250%20-38%20A138%20138%200%200%200%20250%20238%27%20stroke-opacity%3D%270.078%27%2F%3E%3Cpath%20d%3D%27M250%20-58%20A158%20158%200%200%200%20250%20258%27%20stroke-opacity%3D%270.055%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat right -46px center;
}
.level__top>*{position:relative;z-index:1}
.level__n{color:rgba(190,242,225,.82) !important;
  font-family:var(--mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tl-700);font-weight:700}
.level__top h3{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.025em;
  margin-top:7px;color:#fff}
.level__body{padding:26px;flex:1;display:flex;flex-direction:column}
.level__body p{font-size:14px;line-height:1.66;color:var(--muted)}
.level__list{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
.level__list li{display:flex;gap:10px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.level__list svg{width:15px;height:15px;flex:0 0 15px;color:var(--tl-700);margin-top:3px}
.level__foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:12px}
.level__price{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--tl-800)}
.level--pop{border-color:var(--tl-400);box-shadow:0 18px 44px -28px rgba(14,124,114,.5)}
.level__flag{position:absolute;top:0;right:0;z-index:2;
  background:linear-gradient(135deg,var(--tl-500),var(--tl-700));color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 13px;border-bottom-left-radius:10px}
.level{position:relative}
.level__was{font-family:var(--mono);font-size:14px;color:var(--muted-2)}

/* ---------- Numbered list ------------------------------------------------- */
/* Separate bordered cards rather than one panel with 1px gaps showing the
   container through. With the old technique an item count that did not fill
   the last row left visible empty cells. */
.steps{display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr))}
/* Match the column count to the item count so the last row is always full. */
.steps:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.steps:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.steps:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.step:hover{transform:translateY(-3px);border-color:#d2d5da;
  box-shadow:0 1px 2px rgba(20,22,27,.04), 0 18px 38px -18px rgba(20,22,27,.22)}
@media (max-width:1180px){
  .steps,.steps:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .steps,.steps:has(> :nth-child(6):last-child),
  .steps:has(> :nth-child(3):last-child),
  .steps:has(> :nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}
}
.step__ico{width:42px;height:42px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--tl-700);margin-bottom:18px;
  flex:0 0 auto}
.step__ico svg{width:21px;height:21px}
.step__n{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--muted-2);
  letter-spacing:.14em;margin-bottom:8px}
.step h3{font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.015em;
  margin-bottom:9px}
.step p{font-size:14px;line-height:1.68;color:var(--muted)}

/* ---------- Pricing ------------------------------------------------------- */
.price{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px;
  position:relative;display:flex;flex-direction:column;transition:.2s}
.price:hover{transform:translateY(-3px);box-shadow:0 16px 36px -16px rgba(16,26,46,.3)}
.price--best{border-color:var(--tl-700);box-shadow:0 0 0 1px var(--tl-700)}
.price__flag{position:absolute;top:0;right:0;background:var(--gold);color:#3a2a00;font-size:14px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:6px 15px;
  border-radius:0 0 0 var(--radius)}
.price__name{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.price__for{font-size:14px;color:var(--muted);margin-top:5px}
.price__row{display:grid;grid-template-columns:auto auto;justify-content:start;
  align-items:baseline;column-gap:12px;row-gap:10px;margin:22px 0 6px}
.price__was{font-family:var(--mono);font-size:20px;color:var(--muted-2);
  text-decoration-thickness:2px}
.price__now{font-family:var(--mono);font-size:40px;font-weight:700;letter-spacing:-.035em;
  color:var(--tl-800);line-height:1}
/* Its own row on every card, sized to its content: a wider price (Level III)
   would otherwise wrap the badge on that card alone. */
.price__save{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:var(--tl-700);border-radius:2px;padding:4px 9px;
  grid-column:1 / -1;justify-self:start}
.price__note{font-size:14px;color:var(--muted)}
.price__list{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.price__list li{display:flex;gap:11px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.price__list svg{width:16px;height:16px;flex:0 0 16px;color:var(--tl-700);margin-top:3px}
.price__fine{font-size:14px;color:var(--muted-2);margin-top:13px;text-align:center;line-height:1.6}

.slots{margin:20px 0;padding:14px 16px;background:#fdf6e6;border:1px solid #efdcae;
  border-radius:var(--radius-sm)}
.slots__top{font-size:14px;color:#7a5c10;font-weight:600;margin:0 0 9px}
.slots__top b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:#5b430a}
.slots__top b{font-family:var(--mono);color:#5b430a}
.slots__bar{height:6px;background:#efe1bd;border-radius:20px;overflow:hidden}
.slots__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#c07f16);
  border-radius:20px}

/* ---------- Reviews ------------------------------------------------------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px}
/* A drawn quotation mark, top-left, in the brand teal. Set in Georgia rather
   than the UI face because the system sans draws a thin, upright pair of
   ticks; a text serif gives the heavy, angled comma shape that reads as a
   quotation mark at this size. It sits behind the text at low opacity and
   deepens on hover, so it decorates without competing with the words. */
.review{position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.review:hover{transform:translateY(-3px);border-color:#d2d5da;
  box-shadow:0 1px 2px rgba(20,22,27,.04), 0 18px 38px -18px rgba(20,22,27,.22)}
.review::before{
  content:"\201C";
  position:absolute;top:-14px;left:16px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:104px;line-height:1;font-weight:700;
  background:linear-gradient(160deg,var(--tl-500) 0%,var(--tl-800) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--tl-700);
  opacity:.20;pointer-events:none;user-select:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1);
}
.review:hover::before{opacity:.34;transform:translateY(-2px) scale(1.04)}

/* Stars and text clear the mark rather than colliding with it. */
.review__stars{position:relative;color:var(--gold);font-size:14px;letter-spacing:2px;
  margin-bottom:16px}
.review__text{position:relative}
.review__text{font-size:15px;line-height:1.74;color:var(--ink-2)}
.review__who{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:11px}
.review__av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 34px;
  background:linear-gradient(135deg,var(--rb-600),var(--tl-600));color:#fff;font-weight:700;
  font-size:14px;font-family:var(--mono)}
.review__name{font-size:14px;font-weight:600;color:var(--ink);display:block}
.review__meta{font-size:14px;color:var(--muted)}

/* ---------- FAQ ----------------------------------------------------------- */
.faq{max-width:880px;margin:0 auto;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;background:none;border:0;text-align:left;padding:22px 46px 22px 4px;
  font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);
  position:relative;transition:color .15s}
.faq__q:hover{color:var(--tl-800)}
.faq__q::after{content:"";position:absolute;right:12px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .24s ease,border-color .15s}
.faq__item.is-open .faq__q::after{transform:translateY(-20%) rotate(-135deg);border-color:var(--tl-700)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__a p{padding:0 46px 22px 4px;font-size:14.5px;line-height:1.74;color:var(--muted)}
.faq__a p + p{padding-top:0;margin-top:-6px}
.faq__group{font-family:var(--display);font-size:14px;font-weight:600;color:var(--tl-800);
  letter-spacing:.02em;padding:26px 4px 10px;border-bottom:2px solid var(--tl-100);
  max-width:880px;margin:0 auto}

/* ---------- Contact / Careers -------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
/* Four items read better as a square than as a row of three and an orphan. */
.split:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){
  .split,.split:has(> :nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}
}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;transition:.2s}
.contact-card:hover{border-color:#d2d5da;transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(20,22,27,.04), 0 18px 38px -18px rgba(20,22,27,.22)}
.contact-card h3{font-family:var(--display);font-size:16px;font-weight:600;margin-bottom:7px}
.contact-card p{font-size:14px;color:var(--muted);line-height:1.65}
.contact-card a{font-weight:600;color:var(--tl-800);word-break:break-word}

.role{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;transition:.2s}
.role:hover{border-color:#d2d5da;transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(20,22,27,.04), 0 18px 38px -18px rgba(20,22,27,.22)}
.role__tag{font-family:var(--mono);font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rb-700);background:var(--rb-50);border:1px solid var(--rb-100);border-radius:2px;
  padding:4px 8px;flex:0 0 auto;font-weight:500}
.role h3{font-family:var(--display);font-size:15.5px;font-weight:600;margin-bottom:5px}
.role p{font-size:14px;color:var(--muted);line-height:1.62}

/* ---------- Contact form -------------------------------------------------- */
.form-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:26px;
  align-items:start}
@media (max-width:940px){.form-wrap{grid-template-columns:minmax(0,1fr)}}

.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.form__row{grid-template-columns:minmax(0,1fr)}}
.field-g{margin-bottom:18px;display:flex;flex-direction:column;gap:7px}
.field-g label{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.field-g label .req{color:var(--bad);margin-left:2px}
.field-g .hint-s{font-size:14px;color:var(--muted-2);font-weight:400}

.form input[type=text],.form input[type=email],.form input[type=tel],
.form select,.form textarea,
.auth-form input[type=text],.auth-form input[type=email],.auth-form input[type=tel],
.auth-form input[type=password],.auth-form input[type=date],.auth-form select{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  color:var(--ink);font-family:inherit;font-size:14px;padding:11px 13px;transition:.14s;
}
.form textarea{resize:vertical;min-height:132px;line-height:1.6}
.form select{appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.form input:hover,.form select:hover,.form textarea:hover,
.auth-form input:hover,.auth-form select:hover{border-color:#c9ccd2}
.form input:focus,.form select:focus,.form textarea:focus,
.auth-form input:focus,.auth-form select:focus{
  outline:none;border-color:var(--tl-700);box-shadow:0 0 0 3px rgba(14,124,114,.14)}
.form input::placeholder,.form textarea::placeholder,
.auth-form input::placeholder{color:var(--muted-2)}

.field-g.is-bad input:not([type=checkbox]),.field-g.is-bad select,
.field-g.is-bad textarea{border-color:var(--bad);background:#fffafa}
.field-g.is-bad input:focus,.field-g.is-bad select:focus,.field-g.is-bad textarea:focus{
  box-shadow:0 0 0 3px rgba(179,48,63,.14)}
.err{font-size:14px;color:var(--bad);font-weight:500;min-height:0;display:none}
.field-g.is-bad .err{display:block}

.consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--muted);
  line-height:1.55}
.consent input{width:16px;height:16px;flex:0 0 16px;margin-top:2px;accent-color:var(--tl-700)}
.field-g.is-bad .consent{color:var(--bad)}

.form__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;
  padding-top:22px;border-top:1px solid var(--line-soft)}
.form__note{font-size:14px;color:var(--muted-2);line-height:1.55;flex:1 1 220px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__done{display:none;text-align:center;padding:38px 24px}
.form.is-sent .form__done{display:block}
.form.is-sent .form__body{display:none}
.form__done-ico{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;display:grid;
  place-items:center;background:var(--tl-50);border:1px solid var(--tl-100);color:var(--tl-700)}
.form__done-ico svg{width:26px;height:26px}
.form__done h3{font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:9px}
.form__done p{font-size:14px;color:var(--muted);line-height:1.65;max-width:44ch;margin:0 auto}

.form-aside{display:flex;flex-direction:column;gap:14px}
.form-aside .card{padding:24px}
.form-aside .card h3{font-size:15.5px}

/* iOS Safari zooms the whole page when a focused input is under 16px, which
   throws the layout off centre. Give the controls the extra pixels on small
   screens and buy back the width from the padding. */
@media (max-width:620px){
  .form{padding:22px}
  .form input[type=text],.form input[type=email],.form input[type=tel],
  .form select,.form textarea{font-size:16px;padding:12px 13px}
  .form__foot .btn{width:100%;justify-content:center}
}

/* ---------- Auth (login / create account) --------------------------------- */
/* ---------- Auth: the weighted split ---------------------------------------
   Two panels, no card. The old layout was one 900 x 729 box holding both panes,
   which meant the shorter of the two - sign in, at 366px of content - carried
   310px of empty white, 46% of the box, and the page still ran to 1215px so a
   laptop had to scroll to reach the button.

   Splitting it fixes both at once: the left panel takes the height the argument
   needs, the right takes the height the form needs, and neither pads out to
   match the other. Both panes now clear a 1440 x 900 viewport without scrolling.

   57 / 43. The form column holds a 376px measure whichever pane is showing, so
   an email input is never 700px wide and the eye never travels. */
/* The login page carries no nav and no footer. A page you use once should not
   offer six ways to leave it, so the split owns the whole viewport and the
   logo is the single way back. */
.auth-split{
  min-height:100vh;
  display:grid;grid-template-columns:57fr 43fr;
  /* Opaque: the fixed backdrop photo must not show through a form. */
  background:var(--surface);
}

/* ---- left: the argument ---- */
.auth-side{
  background:linear-gradient(140deg,#0b6259 0%,#0e2145 62%,#0a1730 100%);
  color:#fff;padding:44px 56px 46px;display:flex;flex-direction:column;
  justify-content:space-between;position:relative;overflow:hidden}
.auth-side::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 12% 8%,rgba(76,196,186,.16),transparent 70%)}
.auth-side > *{position:relative;z-index:1}
.auth-side__top{display:inline-flex;align-items:center;align-self:flex-start;
  color:inherit;border-radius:3px;transition:opacity .16s}
.auth-side__top:hover{opacity:.72}
.auth-side__top:focus-visible{outline:2px solid var(--tl-400);outline-offset:6px}
.auth-side__mark{font-family:Georgia,"Times New Roman",serif;font-size:76px;line-height:.6;
  color:var(--tl-400);display:block;margin-bottom:14px}
.auth-side__claim{font-family:var(--display);font-size:30px;font-weight:500;
  letter-spacing:-.02em;line-height:1.32;max-width:20ch}
.auth-side__sub{font-size:14px;color:rgba(255,255,255,.62);line-height:1.6;margin-top:16px;
  max-width:38ch}
.auth-side__stats{list-style:none;margin:0;padding:0;display:flex;gap:38px;flex-wrap:wrap}
/* strong,b is globally set to --ink; on a dark panel that has to be undone. */
.auth-side__stats b{display:block;font-size:26px;font-weight:700;letter-spacing:-.022em;
  line-height:1;font-variant-numeric:proportional-nums;color:#fff}
.auth-side__stats span{font-size:14px;color:rgba(255,255,255,.58);display:block;margin-top:5px}

/* ---- right: the form ---- */
.auth-main{display:flex;align-items:center;justify-content:center;
  padding:34px 44px;background:var(--surface)}
.auth-form{width:100%;max-width:376px}
.auth-mobile-logo{display:none}

/* Tabs as a pill. The old strip needed an .auth-tabs__ink element to slide;
   selecting on aria-selected needs no extra element and cannot fall out of
   step with what a screen reader is told. */
.auth-form .field-g{margin-bottom:14px}
.auth-tabs{display:inline-flex;border:1px solid var(--line);border-radius:20px;
  background:var(--surface-2);padding:3px;gap:3px;margin-bottom:24px}
.auth-tabs[hidden]{display:none}
.auth-tab{appearance:none;background:none;border:0;font-family:inherit;font-size:14px;
  font-weight:600;color:var(--muted);padding:7px 16px;border-radius:16px;cursor:pointer;
  transition:background .16s,color .16s}
.auth-tab:hover{color:var(--ink-2)}
.auth-tab[aria-selected=true]{background:var(--surface);color:var(--tl-800);
  box-shadow:0 1px 3px rgba(16,26,46,.10)}

.auth-pane[hidden]{display:none}
.auth-form h1{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-.02em;
  line-height:1.2}
.auth-lede{font-size:14px;color:var(--muted);line-height:1.6;margin:8px 0 18px}
.auth-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.btn--block{width:100%;justify-content:center}
.auth-under{text-align:center;margin-top:14px}
.auth-alt{font-size:14px;color:var(--muted);margin-top:12px;text-align:center}
/* Moved to the dark panel: the form column has to clear a 900px viewport with
   eleven fields in it, and the trademark line is the first thing that does not
   need to sit beside the button. */
.auth-side__legal{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:22px}
.auth-side__legal a{font-size:14px;color:rgba(255,255,255,.62);text-decoration:none}
.auth-side__legal a:hover{color:#fff;text-decoration:underline}
.auth-side__fine{font-size:14px;color:rgba(255,255,255,.62);line-height:1.6;
  margin-top:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);max-width:62ch}
.auth-dev{margin-bottom:18px}

.auth-sent{text-align:center}
.auth-sent__ico{width:46px;height:46px;margin:0 auto 16px;border-radius:23px;
  background:var(--tl-50);color:var(--tl-700);display:flex;align-items:center;
  justify-content:center}
.auth-sent__ico svg{width:23px;height:23px}
.auth-sent__lede{font-size:14px;color:var(--muted);line-height:1.6;margin-top:10px}
.auth-sent__lede b{color:var(--ink)}
.auth-sent__note{font-size:14px;color:var(--muted-2);line-height:1.6;margin-top:14px}
.auth-sent__note b{color:var(--ink-2)}
.auth-sent__acts{margin-top:22px;display:flex;flex-direction:column;gap:12px;align-items:center}

/* The consent row is the one field whose label is the control, so it needs no
   label above it and no bottom margin doubling up with the button. */
.field-g--consent{margin-bottom:18px}

/* One column below the split point: the argument becomes a short banner above
   the form rather than a panel beside it. */
/* Below the split point the form comes first. Someone who opens /login on a
   phone came to sign in; the argument is worth reading, but not before the
   thing they came for. The trademark line drops out because the footer
   directly beneath already carries it. */
@media (max-width:960px){
  .auth-split{grid-template-columns:minmax(0,1fr);min-height:0}
  /* Content height, not viewport height: a centred form in a 100vh column
     leaves a screenful of white above it on a phone. */
  .auth-main{order:1;flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:24px 24px 40px;min-height:0}
  .auth-mobile-logo{display:inline-flex;align-self:flex-start;color:var(--ink);
    margin-bottom:24px;border-radius:3px;transition:opacity .16s}
  .auth-mobile-logo:hover{opacity:.72}
  .auth-mobile-logo:focus-visible{outline:2px solid var(--tl-500);outline-offset:5px}
  .auth-form{margin:0 auto}
  .auth-side{order:2;padding:34px 26px 36px;display:block}
  .auth-side__top{margin-bottom:20px}
  .auth-side__mark{font-size:52px;margin-bottom:6px}
  .auth-side__claim{font-size:22px;max-width:24ch}
  .auth-side__sub{margin-top:12px;font-size:14px}
  .auth-side__stats{gap:20px 30px;margin-top:26px}
  .auth-side__stats b{font-size:20px}
  .auth-side__fine{display:none}
}
@media (max-width:560px){
  .auth-row{grid-template-columns:minmax(0,1fr)}
  .auth-side__top{display:none}
}

/* The dialling code sits beside the number, not above it. 92px is enough for
   "+91" and the caret and still leaves the number legible in a half-width
   column, which 132px did not. */
.tel-wrap{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px}
.tel-wrap select,.tel-wrap input{min-width:0;height:42px}
.tel-wrap select{padding-right:24px;background-position:right 7px center;
  padding-left:9px;font-size:14px}

/* Submitting with a required field empty turns its placeholder red in place,
   rather than only printing a message underneath. The sample text is the
   error. */
.field-g.is-empty input::placeholder{color:var(--bad);opacity:1}
.field-g.is-empty input::-webkit-input-placeholder{color:var(--bad);opacity:1}
.field-g.is-empty select{color:var(--bad)}
.field-g.is-empty .consent{color:var(--bad)}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:64px !important}
.pw-see{position:absolute;right:6px;top:50%;transform:translateY(-50%);appearance:none;
  background:none;border:0;font-family:inherit;font-size:14px;font-weight:600;
  color:var(--muted);cursor:pointer;padding:7px 9px;border-radius:6px;transition:.14s}
.pw-see:hover{color:var(--tl-800);background:var(--tl-50)}

.pw-strength{margin:-2px 0 14px}
.pw-meter{display:flex;gap:4px;margin-top:0}
.pw-meter i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .2s}
.pw-meter[data-s="1"] i:nth-child(-n+1),
.pw-meter[data-s="2"] i:nth-child(-n+2){background:#d97706}
.pw-meter[data-s="3"] i:nth-child(-n+3){background:#0e7c72}
.pw-meter[data-s="4"] i{background:#0e7c72}
.pw-note{font-size:14px;color:var(--muted-2);margin-top:6px;display:flex;
  justify-content:space-between;gap:10px}
.pw-note b{font-weight:600;color:var(--ink-2)}

.auth-alt{margin-top:16px;font-size:14px;color:var(--muted);text-align:center;line-height:1.7}
.auth-alt a,.auth-link{color:var(--tl-800);font-weight:600;text-decoration:none;cursor:pointer;
  background:none;border:0;font-family:inherit;font-size:inherit;padding:0}
.auth-alt a:hover,.auth-link:hover{text-decoration:underline}

.auth-msg{display:none;font-size:14px;line-height:1.6;border-radius:var(--radius-sm);
  padding:11px 13px;margin-bottom:16px}
.auth-msg.is-on{display:block}
.auth-msg--bad{background:#fff2f3;border:1px solid #f3c9ce;color:#8d232f}
.auth-msg--ok{background:var(--tl-50);border:1px solid var(--tl-100);color:var(--tl-800)}

.auth-note{max-width:900px;margin:16px auto 0;font-size:14px;color:rgba(255,255,255,.8);
  text-align:center;line-height:1.7;text-shadow:0 1px 10px rgba(6,14,30,.9),0 0 24px rgba(6,14,30,.7)}
.auth-note b{color:#fff;font-weight:600}

.auth-dev{max-width:900px;margin:0 auto 18px;background:#fffbeb;border:1px solid #fcd34d;
  border-radius:var(--radius-sm);padding:12px 15px;font-size:14px;color:#7a5c10;line-height:1.65;
  display:none}
.auth-dev.is-on{display:block}
.auth-dev b{color:#5b430a}

@media (max-width:560px){
  .auth-sec{padding:34px 0 54px}
  /* A fixed height is a desktop nicety; on a phone it would only add scroll. */
  
  .auth-body{padding:24px 20px 26px}
  .auth-actions .btn{width:100%;min-width:0}
  .tel-wrap{grid-template-columns:104px minmax(0,1fr)}
  .auth-form input[type=text],.auth-form input[type=email],.auth-form input[type=tel],
  .auth-form input[type=password],.auth-form input[type=date],.auth-form select{font-size:16px}
}

/* Account chip in the header, once someone is signed in. */
.acct{display:flex;align-items:center;gap:8px}
.acct__who{font-size:14px;font-weight:600;color:rgba(255,255,255,.9);max-width:132px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-head.is-stuck .acct__who{color:var(--ink-2)}
@media (max-width:880px){.acct__who{display:none}}

/* ---------- CTA strip ----------------------------------------------------- */
.cta{background:transparent;color:#fff;text-align:center;padding:118px 0;
  position:relative;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(900px 420px at 50% 50%, rgba(6,14,30,.72) 0%, rgba(6,14,30,.52) 70%),
  linear-gradient(180deg, rgba(6,14,30,.70) 0%, rgba(6,14,30,.62) 100%)}
.cta h2{font-family:var(--display);font-size:clamp(24px,3.1vw,34px);font-weight:600;
  letter-spacing:-.028em;text-wrap:balance;max-width:46ch;margin:0 auto;
  text-shadow:0 2px 24px rgba(4,10,22,.5)}
.cta p{margin:16px auto 0;max-width:56ch;color:#dfe4ec;font-size:16.5px;line-height:1.64;
  text-shadow:0 1px 16px rgba(4,10,22,.55)}
.cta__row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------- Footer -------------------------------------------------------- */
.site-foot{background:#101318;color:#9aa1ac;padding:64px 0 32px;font-size:14px;position:relative;z-index:1}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px;padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.09)}
@media (max-width:860px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-top{grid-template-columns:minmax(0,1fr)}}
.foot-top h4{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:700;
  margin-bottom:14px}
.foot-links{display:flex;flex-direction:column;gap:9px}
.foot-links a{color:#9aa1ac;font-size:14px;transition:color .15s}
.foot-links a:hover{color:var(--tl-400)}
.foot-blurb{max-width:38ch;line-height:1.7;margin-top:14px}
.foot-bottom{padding-top:26px;display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;
  font-size:14px;line-height:1.7;color:#6b7280}
.foot-bottom p:first-child{flex:1 1 460px;max-width:none}
.foot-bottom p:last-child{flex:0 0 auto;white-space:nowrap;margin-left:auto}

/* ---------- Reveal on scroll ---------------------------------------------- */
/* Longer and softer than a typical fade-up. The distinguishing details are
   the easing - almost all of the movement happens in the first third, so the
   element decelerates into place rather than arriving at a constant speed -
   and the slight scale and blur, which read as the element settling into
   focus instead of sliding in from somewhere off-screen.

   will-change is set only while the element is still waiting, then dropped:
   holding a layer for every revealed element on a long page costs memory for
   an animation that has already finished. */
html.js-reveal .reveal{
  opacity:0;
  transform:translate3d(0,26px,0) scale(.988);
  filter:blur(6px);
  will-change:opacity,transform,filter;
  transition:opacity .9s cubic-bezier(.16,1,.3,1),
             transform .9s cubic-bezier(.16,1,.3,1),
             filter .7s cubic-bezier(.16,1,.3,1)}
html.js-reveal .reveal.is-in{
  opacity:1;transform:none;filter:none;will-change:auto}

.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}

/* Headings split into lines by site.js. Each line carries its own delay, so a
   two-line title resolves top to bottom rather than as one block. */
/* The clip box is exactly one line box tall, so any heading with a tight
   line-height had its descenders (g, y, p, j) sliced flat. The padding extends
   the box below the baseline and the negative margin gives the space back, so
   nothing moves - and the hidden state translates a little further to stay
   hidden inside the taller box. */
.rl{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.rl > span{display:block;
  transform:translate3d(0,120%,0);opacity:0;
  transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .8s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--l) * 85ms)}
.reveal.is-in .rl > span{transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js-reveal .reveal{opacity:1;transform:none;filter:none;transition:none}
  .rl > span{transform:none;opacity:1;transition:none}
  .sec__head:not(.sec__head--mid):hover::before{animation:none}
  .card:hover,.review:hover,.role:hover,.contact-card:hover,.btn:hover,.icon-btn:hover,
  .level:hover,.price:hover,.step:hover{transform:none}
}

/* Header account icon, once a session exists. */
.icon-btn.is-on{background:rgba(20,184,166,.22);border-color:rgba(20,184,166,.5);color:#fff}
.site-head.is-stuck .icon-btn.is-on{background:var(--tl-50);border-color:var(--tl-100);
  color:var(--tl-800)}

/* Pricing badge: warm so it reads as a live offer rather than a notification. */
.icon-btn__dot--warm{background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
  color:#3d2c05 !important;font-weight:700;
  box-shadow:0 0 0 2px rgba(251,191,36,.28),0 2px 8px -2px rgba(217,119,6,.65)}
.site-head.is-stuck .icon-btn__dot--warm{box-shadow:0 0 0 2px rgba(251,191,36,.22)}

/* ---------- Fine print ----------------------------------------------------- */
/* Secondary text takes the width it is given rather than being boxed to a
   narrow measure with dead space beside it. Use this class for any note,
   caveat or disclaimer so the behaviour cannot drift page to page. */
.fineprint{font-size:14px;line-height:1.75;color:var(--muted);max-width:none;
  margin:26px 0 0;text-wrap:pretty}
.sec--white .fineprint{color:var(--muted)}

/* Detail that belongs on the page but should not shout. Sits quieter than the
   paragraph it follows, so the eye takes the first line and can stop there. */
.quiet{display:block;margin-top:10px;font-size:14px;line-height:1.7;color:var(--muted-2)}

/* ---------- Prerequisite-gated actions ------------------------------------- */
/* Any control carrying data-needs stays inert until its condition is met. The
   look has to say "not yet", not "broken": it keeps its shape and loses its
   colour, and the cursor confirms it. */
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--line) !important;border-color:var(--line) !important;
  color:var(--muted-2) !important;box-shadow:none !important;
  cursor:not-allowed;pointer-events:auto;transform:none !important}
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{transform:none !important;filter:none}

/* ---------- Rolling figures ------------------------------------------------ */
/* The reel inherits everything from the element it replaces - font, size,
   weight, colour, background - so only the movement is new. Sizing is in em
   throughout, which keeps a digit's travel exactly one line whatever size the
   figure is set at. */
.roll{display:inline-flex;align-items:baseline}

/* The reel is built from spans, and the figure it replaces often sits next to
   a label styled by a bare `span` selector - as it does in the hero. Inheriting
   the font explicitly stops that label rule from shrinking the digits, and
   keeps `1em` measuring the figure's own line rather than the label's. */
.roll .roll__lit,.roll .roll__slot,.roll .roll__strip,.roll .roll__strip i{
  font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.roll .roll__lit{display:inline-block}
.roll .roll__slot{position:relative;display:inline-block;height:1em;overflow:hidden;
  line-height:1em}
.roll .roll__strip{display:block;will-change:transform}
.roll .roll__strip i{display:block;height:1em;line-height:1em;font-style:normal;
  font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .roll__strip{transition:none !important}
}

/* ---------- Price reveal --------------------------------------------------- */
/* The rule through the old price is drawn, not declared: text-decoration takes
   no transition, so it cannot be struck through on cue. Full width by default,
   which means a visitor who never sees the sequence - reduced motion, no
   JavaScript, a bot - still reads a struck price. */
.price-strike{position:relative;display:inline-block;text-decoration:none}
.price-strike::after{
  content:"";position:absolute;left:-1px;right:-1px;top:52%;height:1.5px;
  background:currentColor;border-radius:1px;
  transform:scaleX(1);transform-origin:left center;
}
/* The bar is closed only on a row that is actually mid-sequence. Doing this
   globally the moment the script loads left any row whose turn never came -
   below the fold, observer never fired - showing an unstruck old price, which
   misstates the offer. */
.price-strike.is-arming::after{transform:scaleX(0);transition:none}
.price-strike.is-struck::after{
  transform:scaleX(1);
  transition:transform 420ms cubic-bezier(0.333, 0.667, 0.667, 1) 140ms;
}

/* The old price is moved by transform, so it must not be a flex item that the
   browser re-lays-out underneath the animation. */
.price__was,.level__was{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .price-strike::after,.price-strike.is-arming::after{transform:scaleX(1)}
  .price__was,.level__was,.price__now,.level__price{
    transition:none !important;transform:none !important;opacity:1 !important}
}

/* ---------- "Check your inbox" ---------------------------------------------- */
.auth-sent{text-align:center;max-width:52ch;margin:0 auto}
.auth-sent__ico{width:62px;height:62px;margin:0 auto 20px;border-radius:50%;display:grid;
  place-items:center;background:var(--tl-50);border:1px solid var(--tl-100);color:var(--tl-700)}
.auth-sent__ico svg{width:30px;height:30px}
.auth-sent h1{margin-bottom:10px}
.auth-sent__lede{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:14px}
.auth-sent__lede b{color:var(--ink);font-weight:600;word-break:break-all}
.auth-sent__note{font-size:14px;color:var(--muted-2);line-height:1.7}
.auth-sent__note b{color:var(--ink-2);font-weight:600}
.auth-sent__acts{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:26px}
.auth-sent__acts .btn{min-width:220px}

/* ---------- Wordmark -------------------------------------------------------- */
/* The lockup inherits currentColor, so its colour is decided by whatever it
   sits on rather than baked into the file: white over the dark header and
   footer, ink once the header turns white on scroll. */
.brand--logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand--logo .co-logo{display:block;width:auto;flex:0 0 auto}
.site-head.is-stuck .brand--logo{color:var(--ink)}
.site-foot .brand--logo{color:#fff}
/* ---------- Landing-page lockup reveal --------------------------------------
   The bird arrives alone, sitting over the space the whole lockup will occupy,
   then walks left into its own position as the lettering fades in beside it.
   The SVG is laid out at full width from the first frame, so nothing on the
   header shifts while this plays.

   Translations are in the SVG's own user units, which is why the number is 358
   and not a pixel count: it is the distance that centres the bird across a
   859-unit viewBox. */
.brand--intro .co-logo__owl{
  animation:logo-owl 1000ms cubic-bezier(0.333,0.667,0.667,1) 160ms both}
.brand--intro .co-logo__word{
  animation:logo-word 760ms cubic-bezier(0.333,0.667,0.667,1) 620ms both}

@keyframes logo-owl{
  0%{transform:translateX(358px) scale(1.06);opacity:0}
  22%{opacity:1}
  100%{transform:translateX(0) scale(1);opacity:1}
}
@keyframes logo-word{from{opacity:0;transform:translateX(-26px)}
                     to{opacity:1;transform:translateX(0)}}

@media (prefers-reduced-motion:reduce){
  .brand--intro .co-logo__owl,.brand--intro .co-logo__word{
    animation:none}
}
@media (max-width:620px){
  .brand--logo .co-logo{height:19px}
}

/* ---------- Long-form legal and policy pages -------------------------------
   D3: a measure, not a full-bleed column. Legal text is the longest prose on
   the site and the hardest to read at 1200px wide, so it is capped at roughly
   68 characters where the eye can actually track a line. */
.legal{max-width:68ch;font-size:15px;line-height:1.72;color:var(--ink-2)}
.legal h2{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.012em;
  color:var(--ink);margin:34px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:14px}
.legal p strong{color:var(--ink);font-weight:650}
.legal a{color:var(--rb-700);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--tl-800)}
.legal__lead{font-size:16.5px;line-height:1.65;color:var(--ink)}
.legal__updated{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted-2)}
/* Deliberately loud: this is a note to the owner, not to the reader, and it
   must be impossible to ship past by accident. */
.legal__todo{background:var(--warn-soft,#fbf2e2);border:1px solid #e6cf9c;border-radius:4px;
  padding:12px 14px;font-size:14px;color:#7a5409;margin:18px 0 26px}
.legal__todo strong{color:#5e410a}

/* ---------- F5 · Skip link ---------------------------------------------------
   First focusable element on the page. Off-screen until focused, then it sits
   above the fixed header rather than behind it. */
.skip-link{position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--rb-700);color:#fff;padding:10px 16px;border-radius:0 0 4px 4px;
  font-size:14px;font-weight:600;text-decoration:none;transition:top .14s ease}
.skip-link:focus{top:0}
main:focus{outline:none}

/* ---------- C2 · Button arrow ------------------------------------------------
   An icon rather than a character, so a screen reader announces "Start
   studying, link" and not "Start studying right arrow". The nudge on hover is
   neutralised by the global reduced-motion reset. */
.btn__arrow{flex:0 0 auto;margin-left:2px;transition:transform .16s ease}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translateX(2px)}

/* ---------- C8 · Review attribution ------------------------------------------
   Two facts on two lines, told apart by weight and colour rather than by a
   middle dot. The separator character is the tell; the information is fine. */
.review__meta{display:grid;gap:1px}
.review__lvl{font-weight:600;color:var(--ink-2);font-size:14px}
.review__cyc{font-size:14px;color:var(--muted)}

/* ---------- C4 · Three container tiers ---------------------------------------
   Every kind of content used the same rounded box, so the layout carried no
   hierarchy: "choose your level" looked exactly like "study tools built in".
   Three tiers, separated by radius, border and RESTING elevation.

   Hover states are deliberately untouched - item E4 was declined, so the lift
   every card already has stays exactly as it was. This changes what a card
   looks like standing still, which is what was doing the damage. */

/* Tier 1 - the visitor is choosing. Give it weight. */
.level,.price{
  border-radius:var(--radius-lg);
  border-color:var(--line-strong);
  box-shadow:0 1px 2px rgba(10,23,48,.06),0 12px 32px rgba(10,23,48,.10);
}
.price--best{box-shadow:0 0 0 1px var(--tl-700),0 1px 2px rgba(10,23,48,.06),
  0 16px 40px rgba(10,23,48,.14)}

/* Tier 2 - the visitor is reading. Border only, no resting elevation. */
.card{
  border-radius:6px;
  box-shadow:none;
}

/* Tier 3 - small utilities. A list with an icon, not four boxes. */
.utils{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 34px}
/* These four carry no icon, so the term itself is the marker. A fixed term
   column keeps the four definitions on one left edge; without it "Answer
   elimination" wraps and pushes its own description out of line with the rest. */
/* A small line mark, the term, then the definition. The mark is the only
   ornament these four get - they are utilities, not features, and a full card
   each was overstating them. */
.utils .card{background:transparent;border:0;border-radius:0;padding:15px 0;
  display:grid;grid-template-columns:26px 118px minmax(0,1fr);gap:0 14px;
  align-items:baseline;
  border-top:1px solid var(--line-soft);transform:none !important;box-shadow:none !important}
.utils .card:first-child,.utils .card:nth-child(2){border-top:0}
.utils .util__ico{grid-column:1;color:var(--tl-700);line-height:0;transform:translateY(3px)}
.utils .util__ico svg{width:18px;height:18px;display:block}
.utils .card h3{grid-column:2;margin:0;font-size:14.5px;line-height:1.45}
.utils .card p{grid-column:3;font-size:14px;line-height:1.6}
@media (max-width:720px){.utils .card{grid-template-columns:26px minmax(0,1fr)}
  .utils .card h3{grid-column:2}
  .utils .card p{grid-column:2;margin-top:4px}}
@media (max-width:720px){.utils{grid-template-columns:minmax(0,1fr)}
  .utils .card:nth-child(2){border-top:1px solid var(--line-soft)}}

/* ---------- C1 · Section mark ------------------------------------------------
   Replaces the tracked-caps eyebrow that sat above nearly every heading. Kept
   only on /features, where the four labels name genuinely distinct product
   areas rather than restating the heading beneath them. A short rule and
   sentence case, so it reads as a mark and not as a second heading. */
.sec__mark{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;
  color:var(--tl-800);letter-spacing:0;text-transform:none;margin-bottom:10px}
.sec__mark__rule{display:block;width:26px;height:2px;border-radius:1px;
  background:var(--tl-600);flex:0 0 26px}
.sec--dark .sec__mark,.sec--navy .sec__mark{color:var(--tl-400)}
.sec--dark .sec__mark__rule,.sec--navy .sec__mark__rule{background:var(--tl-400)}

/* ---------- Visually hidden --------------------------------------------------
   Text that must reach a screen reader without occupying space. clip-path
   rather than the old clip:rect(), and white-space:nowrap so a long string
   cannot be collapsed to one character per line before it is read. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- D2 · Tabular figures ---------------------------------------------
   Every numeric surface where digits either align vertically or change in place.
   A price list, a countdown and an accuracy column all misread with proportional
   figures because the glyph widths differ between digits. Display figures on
   hero numbers stay proportional deliberately - see the stat-tile rule. */
.price,.price__now,.price__was,.stat__value,.timer,.metric,.num,td.num,
.mark-allocation,.hero-stat__num,.kpi__v,.scols__v,.qrow__w,.tbar__v,
.cd__n,.wd__n,.lrow b,.legal .num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
/* The exception: a single large figure is not in a column, and equal-width
   digits make it look loose. */
.hero,.wys__big,.scols__v--display{font-variant-numeric:proportional-nums}

/* ---------- E1 · Global reduced-motion reset --------------------------------
   Placed last so it wins over every rule above it, including anything added
   later. Vestibular disorders are common and scroll-triggered movement is the
   specific trigger; the cost of getting this wrong is total, and the cost of
   the guard is nothing.

   The reveal rule matters as much as the animation one: an element that is
   hidden at opacity 0 and revealed by an animation would otherwise stay
   invisible forever once its animation is neutralised. */
/* ============================================================================
   FEATURE GRID  —  aThemes "Why Choose Us" format
   ----------------------------------------------------------------------------
   The reference has no cards: no borders, no icon chips, no surface behind an
   item. Hierarchy comes from scale and white space instead, which is why it
   breathes where a grid of six outlined boxes does not.

   Structure taken from the reference; every colour is ours - navy --rb-950 for
   the headings, teal --tl-600 for the icons, --muted for body copy.
   Scoped to .sec--feat so no other .card on the site moves.
   ========================================================================= */
.sec--feat{padding:104px 0}

/* Heading: the reference sets it heavy, large and sans, not serif. */
.sec--feat .sec__head{margin-bottom:86px}
.sec--feat .sec__title{font-family:var(--display);font-weight:600;
  font-size:clamp(34px,4.3vw,53px);letter-spacing:-.036em;line-height:1.05;
  color:var(--rb-950);max-width:36ch}   /* 26ch broke a 33-char heading in two */

/* Wide gutters, tall rows. The row gap is what makes two rows read as two
   groups rather than one block of six. */
.sec--feat .grid--3,
.sec--feat .steps{grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:74px;row-gap:82px}
/* Two-up uses the same gutters. Its columns are far wider, so the copy measure
   opens up rather than sitting in a narrow well with dead space beside it. */
.sec--feat .grid--2{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:74px;row-gap:82px}
.sec--feat .grid--2 .card p{max-width:54ch}

.sec--feat .card,
.sec--feat .step{background:none;border:0;border-radius:0;padding:0;text-align:left;
  box-shadow:none;display:flex;flex-direction:column}
.sec--feat .card:hover,
.sec--feat .step:hover{transform:none;box-shadow:none;border-color:transparent}

/* Icon stands on its own - no chip, no surface, and large enough to carry the
   top of the column. */
.sec--feat .card__ico,
.sec--feat .step__ico{width:auto;height:auto;background:none;border:0;border-radius:0;
  color:var(--tl-600);display:block;margin:0 0 24px}
.sec--feat .card__ico svg,
.sec--feat .step__ico svg{width:30px;height:30px;stroke-width:1.7}

.sec--feat .card h3,
.sec--feat .step h3{font-family:var(--display);font-size:21px;font-weight:600;
  letter-spacing:-.024em;color:var(--rb-950);margin:0 0 13px}
.sec--feat .card p,
.sec--feat .step p{font-size:16.5px;line-height:1.66;color:var(--muted);margin:0;max-width:36ch}
.sec--feat .card p strong,
.sec--feat .step p strong{color:var(--ink-2);font-weight:600}

/* The reference has nothing after the body. Our tags are content, so they stay -
   demoted to a quiet label rather than the boxed chip, which would put one of
   the borders straight back. */
/* margin-top:auto drops the label to the bottom of its grid cell, so the six
   labels line up per row instead of hanging off whatever length the copy
   happened to be - which was ragged across the top row. */
.sec--feat .card__tag{display:block;margin-top:auto;padding-top:20px;background:none;border:0;
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tl-600)}


/* ============================================================================
   STUDY LOOP  —  Meldrum "Why choose Meldrum?" format
   ----------------------------------------------------------------------------
   The reference is a flat grey panel on a white ground: no border, no shadow,
   no radius, and the panel earns its edge from fill alone. Ours was the
   inverse - a white card outlined on grey - so the section is flipped to white
   and the panels take the grey. Four across rather than the reference's three,
   because the four steps are a sequence and paging or dropping one breaks it.

   Colours are ours: --rb-900 navy for the heading, --tl-700 teal for the icons.
   Scoped to .sec--loop.
   ========================================================================= */
.sec--loop{background:var(--bg);padding:104px 0}
.sec--loop .sec__head{margin-bottom:60px}
/* 24ch broke a 31-character heading across two lines. The measure is a backstop
   for a genuinely long heading, not the thing that sets the line count. */
.sec--loop .sec__title{color:var(--rb-900);font-size:clamp(30px,3.7vw,45px);letter-spacing:-.028em;
  line-height:1.07;max-width:38ch}
.sec--loop .sec__lead{font-size:17px;line-height:1.62;max-width:64ch}

.sec--loop .steps{gap:28px}

/* The panel: fill only. No border, no radius, no lift on hover - a shadow
   would put the card back. */
.sec--loop .step{background:#f1f2f4;border:0;border-radius:0;box-shadow:none;
  padding:34px 26px 36px}
.sec--loop .step:hover{transform:none;box-shadow:none;border-color:transparent}

/* Icon loses its chip, as in the reference, and carries the teal on its own. */
.sec--loop .step__ico{width:auto;height:auto;background:none;border:0;border-radius:0;
  color:var(--tl-700);display:block;margin:0 0 20px}
.sec--loop .step__ico svg{width:26px;height:26px}

.sec--loop .step__n{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.16em;
  color:var(--muted-2);margin-bottom:10px}
.sec--loop .step h3{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;
  color:var(--rb-900);margin-bottom:11px}
.sec--loop .step p{font-size:15px;line-height:1.7;color:var(--muted)}

/* ============================================================================
   CANDIDATE VOICES  —  TTP "We help students reach their GMAT goals" format
   ----------------------------------------------------------------------------
   Three differences from a row of equal cards, and they are the whole effect:
     1. the heading leaves the centre and takes the top-left, with the closing
        phrase in the accent and a short heavy rule under it;
     2. the cards stagger across a 12-column field instead of lining up, so the
        block reads as scattered notes rather than a table;
     3. the avatar breaks the card's top-left corner, which is what stops a
        plain white rectangle from looking like a plain white rectangle.

   Colours are ours - teal --tl-700 for the accent, navy --rb-900 for the rule.
   Scoped to .sec--voices.
   ========================================================================= */
.sec--voices{padding:100px 0 88px;
  background:linear-gradient(178deg,#f8fafb 0%,#eef5f5 100%)}

/* The head and the three cards share one 12-column field. display:contents on
   .reviews lets the cards be placed directly on it without a wrapper cell. */
.sec--voices .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;row-gap:34px;align-items:start}
.sec--voices .reviews{display:contents}

.sec--voices .sec__head{grid-column:1 / 7;grid-row:1;text-align:left;margin:0;max-width:none;
  align-self:center;padding-right:20px}
.sec--voices .sec__title{font-family:var(--display);font-weight:600;
  font-size:clamp(30px,3.6vw,44px);letter-spacing:-.034em;line-height:1.08;
  color:var(--rb-950);margin:0;max-width:16ch;text-align:left}
.sec--voices .sec__title .hl{color:var(--tl-700);display:block}
/* The short heavy rule under the heading, as in the reference. */
.sec--voices .sec__title::after{content:"";display:block;width:46px;height:5px;border-radius:3px;
  background:var(--rb-900);margin-top:24px}
.sec--voices .sec__lead{text-align:left;margin:22px 0 0;max-width:40ch;font-size:15.5px}

/* Staggered placement. Rows and columns overlap deliberately - a tidy 3-up grid
   is exactly what the reference is avoiding. */
.sec--voices .review:nth-child(1){grid-column:2 / 8;grid-row:2}
.sec--voices .review:nth-child(2){grid-column:8 / 13;grid-row:1;margin-top:8px}
.sec--voices .review:nth-child(3){grid-column:6 / 12;grid-row:3;margin-top:-4px}

/* The card: fill and a soft shadow, no outline. overflow must be visible or the
   avatar that breaks the corner gets clipped. */
.sec--voices .review{background:#fff;border:0;border-radius:13px;overflow:visible;
  padding:30px 30px 24px;display:flex;flex-direction:column;
  box-shadow:0 14px 34px -16px rgba(14,32,60,.20), 0 2px 5px rgba(14,32,60,.05)}
.sec--voices .review:hover{transform:none;border-color:transparent;
  box-shadow:0 14px 34px -16px rgba(14,32,60,.20), 0 2px 5px rgba(14,32,60,.05)}

/* Reference order inside the card: quote, then who, then the rating last. */
.sec--voices .review__text{order:1;font-size:15.5px;line-height:1.68;margin:0}
.sec--voices .review__who{order:2;margin-top:22px;padding-top:0;border-top:0;gap:0}
.sec--voices .review__stars{order:3;margin:18px 0 0}

/* Quote glyph sits inside the card, clear of the avatar - and the copy is
   pushed below it. Left to itself the glyph has no height in flow, so the
   first line of every quote was printing straight through it. */
.sec--voices .review::before{top:4px;left:60px;font-size:58px;
  background:none;-webkit-text-fill-color:currentColor;color:var(--tl-100)}
.sec--voices .review__text{margin-top:36px}

/* The avatar breaks the corner. */
.sec--voices .review__av{position:absolute;top:-17px;left:-17px;width:48px;height:48px;
  flex:0 0 48px;font-size:16px;border:3px solid #fff;z-index:2;
  box-shadow:0 4px 12px -3px rgba(14,32,60,.28)}

.sec--voices .review__name{font-size:14.5px;margin-bottom:3px}
.sec--voices .review__meta{display:block;font-size:14px}
.sec--voices .review__lvl{display:block;color:var(--tl-700);font-weight:600;font-size:14px}
.sec--voices .review__cyc{display:block;margin-top:1px}

/* ============================================================================
   LEVEL CARDS  —  hairline
   ----------------------------------------------------------------------------
   The card was loud because four things stacked: a dark green gradient band, the
   concentric arc dial inside it, white-on-dark titles, and a solid teal tab.
   All four are gone. What is left is a 1px rule on top and the type - the card
   sits directly on the section, with no fill, border, radius or shadow.
   ========================================================================= */
.level{background:none;border:0;border-top:1px solid var(--ink);border-radius:0;
  box-shadow:none;overflow:visible}
.level:hover{transform:none;box-shadow:none;border-color:var(--ink)}
.level--pop{border-color:var(--ink);box-shadow:none}

.level__top{background:none;border-bottom:0;padding:18px 0 0}
.level__top::before{display:none}          /* the arc dial */
.level__top h3{color:var(--ink);font-size:25px}
.level__n{color:var(--muted) !important;font-weight:600}

.level__body{padding:14px 0 0}
.level__foot{border-top:0}
.level__price{color:var(--ink)}

/* More air between the three. 20px read as one block of text in three columns;
   the cards have no fill or border, so the gutter is the only thing separating
   them and it has to do more work than it would between bordered cards. */
.grid:has(.level){column-gap:64px}

/* Was / now: the strike is the site's error red, the offer price the same
   teal-green the tick marks use. */
.level__was{color:var(--bad);text-decoration-color:var(--bad)}
.level__price{color:var(--tl-700);font-weight:700}

/* The flag, boxed - kept inside the card, since above it the old
   overflow:hidden clipped it away. */
.level__flag{position:absolute;top:14px;right:0;z-index:3;
  background:#0b0b0b;color:#fff;font-size:14px;font-weight:700;
  letter-spacing:.14em;padding:5px 10px;border-radius:2px}

/* ---- Header centring ------------------------------------------------------
   margin:0 auto centres the nav in whatever space the brand and the icons
   leave over, so it only looked centred while those two happened to be a
   similar width. Dropping two icon buttons pushed it off. A three-column grid
   with equal outer tracks centres the nav on the page instead, whatever sits
   either side of it. */
.site-head .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.site-nav{margin:0}
.head-icons{justify-self:end}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto !important}
  /* Anything revealed by scroll, or staged by an intro, must end up visible. */
  .reveal,[data-reveal],.brand--intro .co-logo__owl,.brand--intro .co-logo__word{
    opacity:1 !important;transform:none !important;visibility:visible !important}
}