/* ============================================================================
   Outstanding Group — shared stylesheet
   One file. Every page links it. Change a colour here, it changes everywhere.

   PALETTE — three colours, agreed 2 September 2026:
     Black  #111318   White #FFFFFF   Process Cyan #00AEEF
   Everything else is one of those three at a different strength, plus the
   cyan→teal gradient and one red that only ever means "this is broken".

   THE RULES, so nothing drifts again:
     1. Bright cyan FILLS things. Dark cyan (--accent-ink) WRITES things.
        Bright cyan as small text on white measures 2.5:1 — under the 4.5:1
        a person needs. --accent-ink measures 4.7:1 and still reads as cyan.
     2. The red (--fault) lives ONLY on a black panel. On white it measures
        3.45:1 and fails; on black it measures 5.38:1 and passes. So a fault
        list is a black block with red on it. Never red text on the page.
     3. Cyan is used sparingly or it stops meaning "do this".
     4. Fonts: Archivo carries headings, prices, buttons and labels.
        Hanken Grotesk carries everything read in sentences. Nothing else.
   ========================================================================= */

:root{
  /* --- white at strength --------------------------------------------- */
  --paper:#FFFFFF;          /* the page itself */
  --ground:#FFFFFF;         /* alias — kept so existing markup keeps working */
  --ground-up:#F4F5F7;      /* raised panel, pill backgrounds */
  --ground-card:#EAECF0;    /* deeper fill */
  --rule:#D8DBE2;           /* hairlines, borders, dividers */

  /* --- black at strength ---------------------------------------------- */
  --ink:#111318;            /* headings, prices, anything you read first */
  --ink-mid:#3E4254;        /* running text */
  --ink-soft:#5A5E72;       /* captions, secondary */
  --ink-muted:#8C90A4;      /* least emphasis */

  /* --- cyan at strength ------------------------------------------------ */
  --cyan:#00AEEF;           /* Process Cyan. A main colour, not a garnish.
                               Use it SOLID and large: bands, marks, blocks,
                               icon fills. Black sits on it at 7.34:1. */
  --accent:#00AEEF;         /* alias */
  --cyan-display:#009FDB;   /* cyan as big type on white — 3.01:1, the floor
                               for display, and a shade you can't tell from
                               Process Cyan at 42px */
  --accent-ink:#007CAC;     /* cyan as small text and links — 4.69:1 */
  --accent-hover:#0090C8;   /* pressed */
  --teal:#0E7C88;           /* accent: gradient end, borders, rules */
  --accent-lift:#5FDCEA;    /* tints */
  --accent-wash:#E6F7FE;
  --accent-glow:rgba(0,174,239,.10);
  --grad-start:#00AEEF;
  --grad-end:#0E7C88;
  --grad:linear-gradient(135deg,var(--grad-start),var(--grad-end));
  --grad-text:linear-gradient(135deg,#009FDB,#0079B4);  /* headline stays bright:
                               3.0:1 at the light end, 4.6:1 at the dark end.
                               Running it into teal made the second half of
                               every headline go muddy. */
  --grad-cta:linear-gradient(135deg,#00AEEF,#0086BC);   /* full-brightness cyan.
                               BLACK sits on it — 7.3:1 at the light end,
                               5.1:1 at the dark. White would be 2.5:1 and
                               unreadable outdoors, so the type colour here
                               is forced by the physics, not chosen. */
  --ink-on-dark:#B8BDCC;    /* body copy on a black band — 9.9:1 */
  --soft-on-dark:#9AA0B4;   /* captions on a black band — 7.1:1 */

  /* --- the one warning -------------------------------------------------- */
  --fault:#F2542D;          /* red. On --ink black only. 5.38:1 */
  --panel-dark:#111318;     /* the black block a fault sits in */

  /* --- layout ----------------------------------------------------------- */
  --wrap:560px;             /* the container width. Grows at the breakpoints
                               near the bottom of this file. Header, nav and
                               .wrap all read it, so they can never disagree. */
  --gutter:20px;
  --measure:64ch;           /* the longest a line of prose may get */

  /* --- type ------------------------------------------------------------- */
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------------------------------------------------------------- reset -- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* The header is sticky, so an anchor landing flush at the top of the
   viewport puts the thing you clicked for underneath it. */
[id]{scroll-margin-top:74px}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ----------------------------------------------------------- structure -- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
section{padding:34px 0;border-top:1px solid var(--rule)}

/* -------------------------------------------------------------- header -- */
header{
  position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  z-index:50;border-bottom:1px solid transparent;
}
/* Every header wraps its contents in .bar, so the logo and the button line
   up with the page's content column instead of sitting in the far corners
   of a wide screen. */
header > .bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin:0 auto;width:100%;padding:16px var(--gutter);
}
header img{height:38px;width:auto;display:block}
@media(max-width:520px){header img{height:32px}
  header > .bar{padding:12px var(--gutter)}}
header .bar > a:first-child{display:flex;align-items:center;flex-shrink:0}
.back{font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.brand{font-family:var(--display);font-weight:800;font-size:18px;
  color:var(--ink);letter-spacing:-.02em;text-decoration:none}
.brand span{color:var(--cyan)}

/* ------------------------------------------------------------------ nav --
   Replaces the inline-styled strip. Hover on desktop, tap on touch.
   Built with <details> so it works with no JavaScript at all.            */
.ognav{border-bottom:1px solid var(--rule);background:var(--paper);position:relative;z-index:45}
.ognav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:stretch;gap:2px}
.ognav details{position:relative}
.ognav summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.005em;
  color:var(--ink);padding:13px 12px;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.ognav summary::-webkit-details-marker{display:none}
.ognav summary::after{
  content:"";width:6px;height:6px;border-right:2px solid var(--ink-muted);
  border-bottom:2px solid var(--ink-muted);transform:rotate(45deg) translateY(-2px);
  transition:transform .16s;
}
.ognav details[open] summary{color:var(--accent-ink)}
/* The current section. nav.html has told people to add class="here" since it was
   written; until now the class did nothing at all. Cyan text plus a solid cyan
   underline, because colour alone is not a signal to a colour-blind reader. */
.ognav summary.here{color:var(--accent-ink);box-shadow:inset 0 -3px 0 var(--cyan)}
.ognav details[open] summary::after{transform:rotate(225deg) translateY(1px);border-color:var(--accent-ink)}
.ognav .drop{
  position:absolute;top:100%;left:0;min-width:232px;background:var(--paper);
  border:1px solid var(--rule);border-radius:13px;padding:7px;
  box-shadow:0 20px 44px -24px rgba(17,19,24,.42);flex-direction:column;gap:1px;
  display:none;
}
.ognav details[open] .drop{display:flex}
.ognav .drop a{
  display:block;text-decoration:none;color:var(--ink);border-radius:9px;padding:10px 11px;
}
.ognav .drop a:hover,.ognav .drop a:focus-visible{background:var(--ground-up)}
.ognav .drop b{display:block;font-family:var(--display);font-size:14px;font-weight:700}
.ognav .drop span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:1px;line-height:1.35}
.ognav .flat{
  display:flex;align-items:center;font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--ink);text-decoration:none;padding:13px 12px;white-space:nowrap;
}
.ognav .flat:hover,.ognav .drop a:hover b{color:var(--accent-ink)}
.ognav .spacer{flex:1}
@media(hover:hover){
  .ognav details:hover .drop{display:flex}
  .ognav details:hover summary::after{border-color:var(--accent-ink)}
}

/* ------------------------------------------------------------- burger --
   Below 760px the three menus stack behind one button. The toggle is a
   visually hidden checkbox rather than <details>, because a closed
   <details> is hidden by content-visibility inside Chrome's shadow tree
   and cannot be forced back open for the desktop layout.               */
.ogburger-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ogburger-lb{display:none}
.ogburger-lb .bars{
  width:18px;height:12px;display:block;flex-shrink:0;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0    / 18px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 5px  / 18px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 10px / 18px 2px no-repeat;
}

@media(max-width:760px){
  .ognav{overflow-x:visible}
  .ogburger-lb{
    display:flex;align-items:center;gap:10px;cursor:pointer;
    max-width:var(--wrap);margin:0 auto;padding:13px var(--gutter);
    font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink);
    -webkit-tap-highlight-color:transparent;
  }
  .ogburger-cb:focus-visible + .ogburger-lb{outline:2px solid var(--cyan);outline-offset:-2px}
  .ognav-in{display:none}
  .ogburger-cb:checked ~ .ognav-in{
    display:flex;flex-direction:column;gap:0;padding:0 14px 10px;
    border-top:1px solid var(--rule);
  }
  .ogburger-cb:checked + .ogburger-lb{color:var(--accent-ink)}
  /* Stacked, the menus are rows, not columns: each summary spans the width
     and its panel opens in the flow underneath instead of floating. */
  .ognav-in details{width:100%}
  .ognav summary,.ognav .flat{padding:13px 2px;font-size:15px;justify-content:space-between}
  .ognav .drop{
    position:static;width:auto;min-width:0;box-shadow:none;border-radius:11px;
    margin:0 0 6px;
  }
}
@media(max-width:760px) and (hover:hover){
  /* Hover-opening a stacked menu makes it jump under the thumb. Tap only. */
  .ognav details:not([open]) .drop{display:none}
}

/* ---------------------------------------------------------------- hero --
   On a laptop the right-hand half of the hero was empty. The OG mark fills
   it — the brand asset doing work, not a stock photo doing decoration.   */
.hero{padding:34px 0 26px;position:relative}
.hero-mark{display:none}
@media(min-width:1080px){
  /* Absolute, not grid: the hero's children are a plain stack and turning
     them into grid rows stretched the spacing apart. */
  .hero{padding-right:400px;min-height:430px;display:flex;flex-direction:column;justify-content:center}
  .hero > .mark{align-self:flex-start}  /* a highlight mark, not a banner */
  .hero-mark{
    display:block;position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:320px;height:320px;background:var(--cyan);border-radius:28px;
    display:grid;place-items:center;padding:56px;
  }
  .hero-mark img{width:100%;height:auto;display:block}
}
/* .h1look is for headings that must LOOK like the page heading without being
   one. The two free tools reveal their "Having a look..." and "Result" screens
   with JavaScript on the same document, so marking them <h1> gave those pages
   three h1s each -- a real SEO fault, and an embarrassing one on a page whose
   job is auditing other people's sites. */
h1,.h1look{
  font-family:var(--display);font-weight:800;font-size:42px;line-height:1.04;
  letter-spacing:-.03em;margin-bottom:16px;text-wrap:balance;
}
h1 .grad,.h1look .grad,.grad{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
h2{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;
   margin-bottom:14px;line-height:1.14;text-wrap:balance}
h3,h4{font-family:var(--display);font-weight:700}
.lede{font-size:17px;color:var(--ink-mid);margin-bottom:22px;max-width:45ch}
.sec-label{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:13px}
.sec-sub{font-size:15px;color:var(--ink-mid);margin-bottom:24px;max-width:var(--measure)}
.pill{display:inline-block;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);
  background:var(--accent-glow);border:1px solid var(--cyan);padding:6px 13px;
  border-radius:20px;margin-bottom:16px}

/* ------------------------------------------------------------- buttons --
   Primary is black. Reason, on the record: white text on bright cyan
   measures 2.23:1 and is genuinely hard to read on a phone outdoors —
   which is where your customer reads it. Black on white text is 18.6:1.
   Cyan does not disappear; it carries the gradient, the logo, the labels
   and the links. It just stops being the thing text sits on.            */
.cta{
  display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer;border:none;
  font-family:var(--display);font-weight:700;font-size:16px;padding:15px;border-radius:12px;
  color:var(--ink);background-color:var(--cyan);background-image:var(--grad-cta);
  transition:filter .12s,transform .12s;
}
.cta:hover{filter:saturate(1.15) brightness(1.04);transform:translateY(-1px)}
.cta-ink{background:var(--ink);color:#fff}
.cta-ink:hover{background:#000;filter:none}
.cta:active{transform:none}
.cta:disabled{opacity:.55;cursor:default;transform:none}
.cta-grad{background:var(--grad);color:#fff}
.cta-grad:hover{background:var(--grad);filter:brightness(1.06)}
.cta-ghost{
  display:block;width:100%;text-align:center;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:16px;padding:15px;border-radius:12px;
  color:var(--ink);background:var(--paper);border:2px solid var(--ink);
}
.cta-ghost:hover{background:var(--ground-up)}
.btns{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}
/* inline-block and nowrap are both load-bearing, and neither is cosmetic.
   An inline <a> with padding overflows its line box instead of growing it, so
   the flex row measured 51px while the button measured 58 and the bottom 10px
   of it were cut off by the sticky bar. Every page but one got away with it
   because "Free check" is short; the Visibility Checker says "Full check
   £9.99", which wrapped to two lines on a phone and was clipped — on the free
   tool that is the top of the funnel. Measured at 390px and 360px, 9 Sep. */
.nav-cta{font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink);
  display:inline-block;white-space:nowrap;line-height:1.2;
  background-color:var(--cyan);background-image:var(--grad-cta);padding:9px 16px;border-radius:9px;text-decoration:none}
.nav-cta:hover{filter:brightness(1.08)}

/* ---------------------------------------------------------------- band --
   Full-bleed colour bands, breaking out of .wrap. This is where the page
   gets its rhythm: white, then black, then solid cyan. A page that is one
   flat colour top to bottom reads as timid, whatever is written on it.  */
.band{margin-inline:calc(50% - 50vw);padding-block:56px;border-top:none}
.band > .bandin{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.band + .band{padding-top:56px}

.band-dark{background:var(--ink);color:#fff}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4,.band-dark b{color:#fff}
.band-dark p,.band-dark li{color:var(--ink-on-dark)}
.band-dark .sec-label,.band-dark .eyebrow{color:var(--cyan)}
.band-dark .lede{color:var(--ink-on-dark)}
.band-dark .note,.band-dark small{color:var(--soft-on-dark)}
.band-dark a:not(.cta):not(.cta-ghost){color:var(--cyan)}
.band-dark .cta{background:#fff;color:var(--ink)}
.band-dark .cta:hover{background:var(--ground-up)}
.band-dark .cta-ghost{background:transparent;color:var(--cyan);border-color:var(--cyan)}
.band-dark .cta-ghost:hover{background:rgba(0,174,239,.12)}
.band-dark .rule,.band-dark hr{border-color:rgba(255,255,255,.16)}

/* Solid Process Cyan. Black on it, at size — the loudest thing on the page. */
.band-cyan{background:var(--cyan);color:var(--ink)}
.band-cyan h1,.band-cyan h2,.band-cyan h3,.band-cyan p,.band-cyan li,.band-cyan b{color:var(--ink)}
.band-cyan .sec-label,.band-cyan .eyebrow{color:var(--ink);opacity:.72}
.band-cyan .cta{background:var(--ink);color:#fff;filter:none}
.band-cyan .cta:hover{background:#000}
.band-cyan .cta-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.band-cyan .cta-ghost:hover{background:rgba(17,19,24,.10)}
.band-cyan ul.tick li::before{color:var(--ink)}

/* The highlight mark: solid cyan behind black type. Replaces the outlined
   lozenge — it says the same thing louder and uses the colour properly. */
.mark{
  display:inline-block;background:var(--cyan);color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;
  padding:7px 13px 6px;border-radius:5px;margin-bottom:18px;
}
.band-dark .mark,.band-cyan .mark{background:var(--cyan);color:var(--ink)}
.band-cyan .mark{background:var(--ink);color:var(--cyan)}
.mark-lg{font-size:15px;padding:9px 15px 8px;letter-spacing:.1em}

/* --------------------------------------------------------------- promo --
   A scrolling strip of everything OG sells, dropped in on any page as a
   break. It scrolls on its own, and it can also be dragged or flicked,
   because an animation nobody can pause is a trap on a phone. Hovering
   stops it, and prefers-reduced-motion stops it for good.               */
.promo{margin-inline:calc(50% - 50vw);background:var(--ink);
  padding:34px 0 38px;overflow:hidden;position:relative}
.promo-head{max-width:var(--wrap);margin:0 auto 20px;padding-inline:var(--gutter);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.promo-head h3{font-family:var(--display);font-weight:800;font-size:21px;
  letter-spacing:-.02em;color:#fff;margin:0}
.promo-head p{font-size:13.5px;color:var(--soft-on-dark);margin:0}
.promo-view{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-block:4px}
.promo-view::-webkit-scrollbar{display:none}
.promo-track{display:flex;gap:14px;width:max-content;
  padding-inline:max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  animation:og-slide 44s linear infinite}
.promo:hover .promo-track,.promo-view:focus-within .promo-track{animation-play-state:paused}
@keyframes og-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.promo-track{animation:none}}

.promo-card{
  flex:0 0 262px;display:flex;flex-direction:column;justify-content:space-between;
  min-height:172px;border-radius:18px;padding:19px 20px 17px;text-decoration:none;
  background:var(--paper);color:var(--ink);border:1px solid transparent;
  transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden;
}
.promo-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(0,0,0,.6)}
.promo-card .kicker{font-family:var(--display);font-size:10.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;opacity:.66;margin-bottom:auto}
.promo-card h4{font-family:var(--display);font-size:19px;font-weight:800;
  letter-spacing:-.02em;line-height:1.15;margin:14px 0 5px;color:inherit}
.promo-card p{font-size:13px;line-height:1.45;margin:0;opacity:.8;color:inherit}
.promo-card.on-cyan p,.promo-card.on-grad p{opacity:.92}
.promo-card.on-cyan .kicker,.promo-card.on-grad .kicker{opacity:.78}
.promo-card .foot{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(17,19,24,.14)}
.promo-card .price{font-family:var(--display);font-weight:800;font-size:22px;
  letter-spacing:-.02em;white-space:nowrap}
.promo-card .go{font-family:var(--display);font-weight:700;font-size:13px;white-space:nowrap}
/* The OG mark, ghosted into the corner — the brand asset as texture. */
.promo-card::after{
  content:"";position:absolute;right:-30px;bottom:-34px;width:126px;height:126px;
  background:url("/logos/og-icon-cyan.png") no-repeat center/contain;
  opacity:.06;pointer-events:none;
}
.promo-card.on-cyan{background:var(--cyan);color:var(--ink)}
.promo-card.on-grad{background-color:var(--cyan);background-image:var(--grad-cta);color:var(--ink)}
.promo-card.on-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}
.promo-card.on-line .foot{border-top-color:rgba(255,255,255,.22)}
.promo-card.on-line .go{color:var(--cyan)}
.promo-card.on-line::after{opacity:.14}
/* The band is dropped into pages that have their own .price, .tag and .go
   rules. Those are older and more specific than a bare class here, so they
   reach in and repaint the card's text — on the black band that means dark
   type on dark. Scope the band's own text through .promo so it always wins. */
.promo .promo-card h4,.promo .promo-card p,
.promo .promo-card .kicker,.promo .promo-card .price,.promo .promo-card .go{
  color:inherit;   /* inherit from the CARD, which sets its own colour */
}
.promo .promo-card.on-line .go{color:var(--cyan)}
.promo .promo-card .price{font-family:var(--display);font-weight:800;font-size:22px;
  letter-spacing:-.02em;white-space:nowrap;background:none;border:none;padding:0;margin:0}
@media(min-width:768px){.promo-card{flex-basis:290px;min-height:184px}}

/* ---------------------------------------------------------------- card -- */
.card,.q,.step,.next,.pk,.mini,.person,.split,.honest{
  background:var(--paper);border:1px solid var(--rule);border-radius:15px;
  box-shadow:0 1px 2px rgba(17,19,24,.04);
}
.q{padding:16px 17px;border-radius:14px}
.q-h{display:flex;align-items:center;gap:12px;margin-bottom:7px}
.q-ico{width:34px;height:34px;flex-shrink:0;border-radius:9px;background-color:var(--cyan);
  display:grid;place-items:center;color:var(--ink);font-family:var(--display);font-weight:800;font-size:15px}
.q-t{font-family:var(--display);font-size:16px;font-weight:700}
.q p{font-size:14px;color:var(--ink-soft)}
.qs{display:flex;flex-direction:column;gap:10px}

/* ----------------------------------------------------- the fault block --
   Rule 2 in action. Red only ever appears inside this.                   */
.faults{background:var(--panel-dark);border-radius:15px;padding:22px 22px 20px;color:#fff}
.faults h3{font-family:var(--display);font-size:18px;font-weight:800;color:#fff;margin-bottom:4px}
.faults .sub{font-size:13.5px;color:#9AA0B4;margin-bottom:15px}
.faults ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.faults li{font-size:14.5px;line-height:1.45;color:#E7E9EF;padding-left:26px;position:relative}
.faults li::before{content:"\00D7";position:absolute;left:0;top:-1px;color:var(--fault);
  font-family:var(--display);font-weight:800;font-size:17px}
.faults li b{color:#fff;font-weight:700}
.faults li.pass::before{content:"\2713";color:var(--cyan)}
.faults .fscore{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.03em;
  line-height:1;color:#fff;margin-bottom:2px}
.faults .fscore span{color:var(--ink-muted);font-size:20px}

/* --------------------------------------------------------------- forms --
   One field style. Used by the checkers and every capture point.        */
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.02em;color:var(--ink);margin-bottom:6px}
.field .hint{font-size:12.5px;color:var(--ink-soft);font-weight:400;margin-bottom:6px}
.field input[type=text],.field input[type=email],.field input[type=url],.field select{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--rule);border-radius:11px;padding:13px 14px;transition:border-color .12s;
}
.field input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px var(--accent-glow)}
.field input::placeholder{color:var(--ink-muted)}
.optin{display:flex;align-items:flex-start;gap:11px;background:var(--ground-up);
  border:1px solid var(--rule);border-radius:12px;padding:14px 15px;margin-bottom:16px;cursor:pointer}
.optin input[type=checkbox]{width:20px;height:20px;flex-shrink:0;margin-top:1px;accent-color:var(--cyan)}
.optin .ot{font-family:var(--display);font-size:14px;font-weight:700;display:block}
.optin .od{font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4}

/* ------------------------------------------------------------ contents -- */
.step{padding:20px;margin-bottom:12px;position:relative}
.step-n{position:absolute;top:18px;right:20px;font-family:var(--display);font-weight:800;
  font-size:30px;color:var(--cyan);opacity:.3;line-height:1}
.step h3{font-size:18px;margin-bottom:3px;padding-right:40px}
.step-sub{font-size:12px;font-weight:700;color:var(--accent-ink);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:9px}
.step p{font-size:14px;color:var(--ink-soft)}

.ladder{background:var(--paper);border:2px solid var(--cyan);border-radius:18px;padding:22px;
  margin-bottom:14px;position:relative;overflow:hidden;box-shadow:0 18px 44px -28px rgba(0,174,239,.5)}
.ladder::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--grad-start),var(--grad-end))}
.l-tag{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px}
.l-name{font-family:var(--display);font-size:21px;font-weight:800;margin-bottom:4px}
.l-price{font-family:var(--display);font-size:40px;font-weight:800;letter-spacing:-.03em;
  line-height:1;margin-bottom:4px}
.l-per{font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.ladder p.d{font-size:14px;color:var(--ink-mid);margin-bottom:16px}

ul.tick{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
ul.tick li{font-size:14px;color:var(--ink-mid);padding-left:24px;position:relative}
ul.tick li::before{content:"\2713";position:absolute;left:0;color:var(--accent-ink);font-weight:800}

.next{padding:18px 20px;margin-bottom:12px}
.next-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.next-h h4{font-size:17px}
.next-p{font-family:var(--display);font-weight:800;font-size:19px;white-space:nowrap}
.next p{font-size:13.5px;color:var(--ink-soft);margin-top:6px}
.credit{font-size:12.5px;color:var(--accent-ink);font-weight:700;display:block;margin-top:2px}

.pk{padding:20px;margin-bottom:12px}
.pk.feat{border:2px solid var(--cyan)}
.pk-badge{display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;background-color:var(--cyan);color:var(--ink);
  padding:4px 10px;border-radius:20px;margin-bottom:10px}
.pk-name{font-family:var(--display);font-size:19px;font-weight:700;margin-bottom:2px}
.pk-price{font-family:var(--display);font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pk-per{font-size:13px;color:var(--ink-soft)}
.pk-alt{font-size:12.5px;color:var(--accent-ink);font-weight:600;margin-top:3px}
.pk-desc{font-size:13.5px;color:var(--ink-mid);margin:12px 0 14px}

.mini{padding:17px 19px;margin-bottom:10px;border-radius:14px}
.mini-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mini-n{font-family:var(--display);font-size:16px;font-weight:700}
.mini-p{font-family:var(--display);font-size:18px;font-weight:800;color:var(--accent-ink);white-space:nowrap}
.mini p{font-size:13.5px;color:var(--ink-soft);margin-top:6px}

.person{padding:20px;margin-bottom:12px}
.p-name{font-family:var(--display);font-size:19px;font-weight:800}
.p-role{font-size:13px;color:var(--accent-ink);font-weight:600;margin-bottom:11px}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:12px;font-weight:600;color:var(--ink-mid);background:var(--ground-up);
  border:1px solid var(--rule);padding:5px 10px;border-radius:7px}

.nums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.num{background:var(--paper);border:1px solid var(--rule);border-radius:13px;padding:15px;text-align:center}
.num b{display:block;font-family:var(--display);font-size:26px;font-weight:800;color:var(--accent-ink)}
.num span{font-size:12px;color:var(--ink-soft)}

.honest{border-left:4px solid var(--cyan);padding:22px}
.honest p{font-size:14.5px;color:var(--ink-mid);margin-bottom:12px}
.honest-line{font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);
  padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:14px 0}

.split{padding:18px 20px;margin-bottom:12px}
.split h4{font-size:16px;margin-bottom:5px}
.split p{font-size:13.5px;color:var(--ink-soft)}
.split .who{font-size:12px;font-weight:700;color:var(--accent-ink);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:7px}

.pull{margin:0 0 30px;padding:22px 22px 20px;border-radius:15px;
  border:1px solid rgba(17,19,24,.10);border-left:5px solid var(--ink);
  background:linear-gradient(135deg,#5FDCEA 0%,#A9EDF4 34%,#DCF7FA 66%,#FFFFFF 100%);
  box-shadow:0 14px 34px -26px rgba(17,19,24,.35)}
.pull blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:21px;
  line-height:1.28;letter-spacing:-.02em;color:var(--ink)}
.pull figcaption{margin-top:13px;display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:600;color:var(--ink)}
.pull .dash{width:22px;height:2px;background:var(--ink);border-radius:2px;display:inline-block}

.contact{background:var(--paper);border:2px solid var(--cyan);border-radius:18px;padding:24px;
  box-shadow:0 18px 44px -28px rgba(0,174,239,.5)}
.cm{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--rule);font-size:14px}
.cm:last-of-type{border-bottom:none}
.cm b{color:var(--ink-soft);font-weight:600}
.cm a{color:var(--accent-ink);text-decoration:none;font-weight:600;text-align:right}

/* ------------------------------------------------------------------ faq -- */
.faq-g{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin:26px 0 11px;padding-bottom:8px;
  border-bottom:1px solid var(--rule)}
.faq-g:first-of-type{margin-top:20px}
.fq{background:var(--paper);border:1px solid var(--rule);border-radius:13px;margin-bottom:9px;
  overflow:hidden;transition:box-shadow .15s,border-color .15s}
.fq[open]{border-color:var(--cyan);box-shadow:0 12px 30px -22px rgba(17,19,24,.45)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;
  padding:15px 16px;-webkit-tap-highlight-color:transparent}
.fq summary::-webkit-details-marker{display:none}
.fq-q{flex:1;font-family:var(--display);font-size:15.5px;font-weight:700;
  line-height:1.32;letter-spacing:-.012em;color:var(--ink)}
.fq[open] .fq-q{color:var(--accent-ink)}
.fq-i{flex:0 0 22px;width:22px;height:22px;border-radius:7px;background:var(--ground-up);
  position:relative;margin-top:1px;transition:background .15s,transform .18s}
.fq-i::before,.fq-i::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);
  border-radius:1px;transform:translate(-50%,-50%)}
.fq-i::before{width:10px;height:2px}
.fq-i::after{width:2px;height:10px;transition:opacity .18s}
.fq[open] .fq-i{background:var(--cyan);transform:rotate(180deg)}
.fq[open] .fq-i::before{background:#fff}
.fq[open] .fq-i::after{opacity:0}
.fq-a{padding:0 16px 16px;border-top:1px solid var(--rule);margin:0 16px;padding-left:0;padding-right:0}
.fq-a p{font-size:14.5px;line-height:1.62;color:var(--ink-mid);margin:13px 0 0}
.fq-a b{color:var(--ink);font-weight:700}

/* ------------------------------------------------------------ furniture -- */
.dark{background:linear-gradient(180deg,var(--accent-wash),var(--paper));margin:0 -20px;
  padding:36px 20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dark h2,.dark .step h3,.dark .pk-name,.dark .pk-price{color:var(--ink)}
.dark .sec-sub,.dark .pk-desc,.dark ul.tick li{color:var(--ink-mid)}
.dark .sec-label{color:var(--accent-ink)}
.dark .step,.dark .pk{background:var(--paper);border-color:var(--rule)}
.dark .step p,.dark .pk-per{color:var(--ink-soft)}
.dark .step-n{color:var(--cyan);opacity:.3}
.dark .pk.feat{border-color:var(--cyan);border-width:2px}

footer{border-top:1px solid var(--rule);padding:26px 0 40px;text-align:center}
footer p{font-size:12.5px;color:var(--ink-soft);margin-bottom:5px}
footer a{color:var(--accent-ink);text-decoration:none}
/* The Regulation 25 trading disclosure. Small, but it must be readable with
   the naked eye — the Regulations say so in those words — so it is the footer
   size, not smaller, and it keeps the footer's own contrast. */
.legal{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-soft)}

.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--rule);
  padding:0;box-shadow:0 -6px 24px -12px rgba(17,19,24,.25)}
.stickybar .sb-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;
  gap:12px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom))}
.stickybar .sb-t{flex:1;min-width:0}
.stickybar .sb-t b{display:block;font-family:var(--display);font-size:14px;line-height:1.2}
.stickybar .sb-t span{font-size:12px;color:var(--ink-soft)}
.stickybar a{flex-shrink:0;font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--ink);background-color:var(--cyan);background-image:var(--grad-cta);padding:12px 18px;border-radius:10px;
  text-decoration:none;white-space:nowrap}
body.has-stickybar{padding-bottom:76px}

a{color:var(--accent-ink)}
.inlink{color:var(--accent-ink);font-weight:600}

/* ===========================================================================
   Band overrides.
   Components set their own ink colours, and those rules sit later in this
   file than the band rules, so on a black or cyan band they win and the
   text disappears. These put it back, scoped through the band so they only
   apply where the ground has actually changed.
   ======================================================================== */
.band-dark .honest{border-left-color:var(--cyan)}
.band-dark .honest p,
.band-dark .split p,.band-dark .step p,.band-dark .q p,
.band-dark .next p,.band-dark .mini p,.band-dark .pk-desc,
.band-dark ul.tick li,.band-dark .l-per,.band-dark .sec-sub{color:var(--ink-on-dark)}
.band-dark .honest-line{color:#fff;border-top-color:rgba(255,255,255,.18);
  border-bottom-color:rgba(255,255,255,.18)}
.band-dark .honest p b,.band-dark .split h4,.band-dark .step h3,
.band-dark .q-t,.band-dark .mini-n,.band-dark .l-name,.band-dark .l-price{color:#fff}
.band-dark .split .who,.band-dark .step-sub,.band-dark .l-tag,
.band-dark .p-role,.band-dark .credit,.band-dark .pk-alt{color:var(--cyan)}
.band-dark .card,.band-dark .q,.band-dark .step,.band-dark .next,
.band-dark .pk,.band-dark .mini,.band-dark .person,.band-dark .split{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.band-dark .tag{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);
  color:var(--ink-on-dark)}
.band-dark ul.tick li::before{color:var(--cyan)}

.band-cyan .honest p,.band-cyan .split p,.band-cyan .step p,
.band-cyan .q p,.band-cyan .sec-sub,.band-cyan ul.tick li{color:var(--ink)}
.band-cyan .honest-line,.band-cyan .q-t,.band-cyan .split h4{color:var(--ink)}
.band-cyan .card,.band-cyan .q{background:rgba(255,255,255,.16);
  border-color:rgba(17,19,24,.16);box-shadow:none}

/* ===========================================================================
   Responsive. The site was built mobile-only — a 560px column stretched onto
   a laptop, which is what it looked like. These three steps widen the
   container and let the card groups become real grids, while prose stays at
   a readable measure instead of running the full width of a monitor.
   ======================================================================== */

@media(min-width:600px){
  h1{font-size:52px}
  .hero{padding:48px 0 36px}
  .btns{flex-direction:row}
  .btns .cta,.btns .cta-ghost{width:auto;min-width:230px}
}

/* --- tablet ------------------------------------------------------------- */
@media(min-width:768px){
  :root{--wrap:720px;--gutter:28px}
  section{padding:44px 0}
  .qs{display:grid;grid-template-columns:repeat(2,1fr);align-items:start}
  .nums{grid-template-columns:repeat(4,1fr)}
  .faults{padding:28px}
  .ladder,.contact{padding:28px}
}

/* --- laptop and up ------------------------------------------------------ */
@media(min-width:1080px){
  :root{--wrap:1040px;--gutter:32px}
  h1{font-size:64px;letter-spacing:-.035em}
  h2{font-size:34px}
  .hero{padding:64px 0 44px}
  .lede{font-size:19px;max-width:52ch}
  section{padding:56px 0}
  .qs{grid-template-columns:repeat(3,1fr)}
  /* Cards that are plain siblings, not grid children, would stretch to a
     silly width. Cap them and let the section headings run full width. */
  .step,.next,.pk,.mini,.person,.split,.honest,.pull,.contact,.faults,.ladder{
    max-width:780px;
  }
  /* Forms are the one thing a wide container actively harms: a text input
     the width of a monitor is worse than one the width of a card. */
  .card,.field,.optin{max-width:620px}
  .card .field,.card .optin{max-width:none}
  .fq{max-width:820px}
  footer p{max-width:none}
}

/* --- very wide: stop the hero headline becoming a banner ----------------- */
@media(min-width:1400px){
  h1{max-width:16ch}
}