/*
 * ClickHelm - the public site.
 *
 * The identity, unchanged from the plugin: navy carries it, brass signs it. Brass never
 * reports a condition here either - it marks the brand and the one plan being recommended,
 * and nothing else, so it keeps meaning something.
 *
 * Right-to-left is handled with logical properties (inline-start, margin-inline) rather than
 * a second stylesheet. One rule, both directions, and no chance of the two drifting apart the
 * first time somebody edits only the file they can read.
 */

/* ---- Type ------------------------------------------------------------------------------ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/archivo-700.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/karla-400.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/karla-500.woff2') format('woff2')}
@font-face{font-family:'PlexMono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plexmono-500.woff2') format('woff2')}
/* Arabic gets a face designed for it rather than a Latin one with fallback glyphs. Plex Sans
   Arabic is drawn to sit beside Plex Mono, which the interface already uses for figures. */
@font-face{font-family:'PlexArabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexarabic-400.woff2') format('woff2')}
@font-face{font-family:'PlexArabic';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/plexarabic-600.woff2') format('woff2')}
@font-face{font-family:'PlexArabic';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/plexarabic-700.woff2') format('woff2')}

:root{
  --hull:#08131F; --hull-2:#0E2032; --hull-line:#1B3044;
  --brass:#96691C; --brass-lift:#E3BC72;
  --paper:#FFFFFF; --paper-2:#F4F7F9;
  --ink:#0A1622; --ink-2:#4A5C6E; --ink-3:#7C8B9A; --line:#DDE4EA;
  --good:#14795A; --bad:#B0231A;
  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --body:'Karla',ui-sans-serif,system-ui,sans-serif;
  --mono:'PlexMono',ui-monospace,monospace;
  --pad:clamp(20px,5vw,64px);
  --radius:14px;
}
[dir="rtl"]{
  --display:'PlexArabic',ui-sans-serif,system-ui,sans-serif;
  --body:'PlexArabic',ui-sans-serif,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  text-wrap:balance;margin:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--pad)}
.stack{display:flex;flex-direction:column;gap:18px}

/* ---- Header ----------------------------------------------------------------------------- */
.top{background:var(--hull);color:#E9F0F6;position:sticky;top:0;z-index:20}
.top__in{display:flex;align-items:center;gap:22px;padding-block:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.logo svg{width:30px;color:var(--brass-lift)}
.logo span{font-family:var(--display);font-weight:600;font-size:21px;color:#fff;
  letter-spacing:-.03em}
[dir="rtl"] .logo span{letter-spacing:0}
.nav{display:flex;gap:20px;align-items:center;margin-inline-start:auto;flex-wrap:wrap}
/* Excluding the buttons is load-bearing, not tidiness. `.nav a` is (0,1,1) and beats
   `.btn--brass` at (0,1,0), so the nav was painting its own link colour over the primary
   call to action - grey-blue text on a brass fill, 1.1:1, effectively invisible. The same
   shape of bug as the plugin's header title, found the same way: by measuring rather than
   by looking. */
.nav a:not(.btn):not(.lang){text-decoration:none;color:#A6BACB;font-size:15.5px}
.nav a:not(.btn):not(.lang):hover,.nav a:not(.btn):not(.lang):focus-visible{color:#fff}
.nav a:not(.btn).on{color:#fff}

/* ---- The menu, below 900px ------------------------------------------------------------------
   Six items and two buttons will not sit on a phone in one line, and letting them wrap made a
   header 187px tall - a quarter of the screen, on every page, above every headline. */
.menu__btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  margin-inline-start:auto;border:1px solid var(--hull-line);border-radius:9px;
  color:#E9F0F6;cursor:pointer;flex:none}
.menu__btn svg{width:22px;height:22px}
.menu__x{display:none}
.menu__box:checked ~ .menu__btn .menu__bars{display:none}
.menu__box:checked ~ .menu__btn .menu__x{display:block}

@media (max-width:900px){
  .menu__btn{display:flex}
  .nav{
    display:none;
    /* Full width on its own row under the bar, so the items are read down rather than across. */
    order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    margin-inline-start:0;border-top:1px solid var(--hull-line);
    /* A phone in landscape has almost no height; the menu scrolls rather than trapping links
       under the fold with no way to reach them. */
    max-height:calc(100dvh - 72px);overflow-y:auto;
  }
  .menu__box:checked ~ .nav{display:flex}
  .nav > *{padding-block:13px;border-bottom:1px solid var(--hull-line)}
  .nav a:not(.btn):not(.lang){font-size:17px}
  /* The two buttons keep their shape but stop being tiny targets in a row. */
  .nav .btn{margin-block:10px;text-align:center;border-bottom:0;padding-block:13px}
  .nav .btn + .btn{margin-block-start:0}
  .nav > *:last-child{border-bottom:0}
  .nav .lang{align-self:start}
}
.btn{display:inline-block;text-decoration:none;font-weight:500;border-radius:9px;
  padding:10px 18px;font-size:15.5px;border:1px solid transparent;white-space:nowrap}
.btn--ghost{border-color:var(--hull-line);color:#E9F0F6}
.btn--ghost:hover{border-color:#3A5570}
.btn--brass{background:var(--brass-lift);color:var(--hull);font-weight:600}
.btn--brass:hover{background:#EFCE93}
.btn--ink{background:var(--hull);color:#fff;font-weight:600}
.btn--ink:hover{background:#12293E}
.btn--lg{padding:14px 26px;font-size:17px}
.lang{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-decoration:none;
  color:#A6BACB;border:1px solid var(--hull-line);border-radius:999px;padding:6px 13px}
.lang:hover{color:#fff}

/* ---- Hero -------------------------------------------------------------------------------- */
.hero{background:var(--hull);color:#E9F0F6;padding:clamp(56px,9vw,110px) 0 clamp(48px,8vw,96px);
  position:relative;overflow:hidden}
.hero__arc{position:absolute;inset:auto -25% -70% 35%;height:130vmin;aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(227,188,114,.14);pointer-events:none}
.hero__in{position:relative;max-width:56ch}
.hero h1{font-size:clamp(34px,6vw,62px);line-height:1.04;color:#fff;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--brass-lift)}
.hero p{color:#A6BACB;font-size:clamp(17px,2.2vw,20px)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;align-items:center}
.hero__note{font-size:14.5px;color:#7E96AB;margin-top:16px}

/* ---- Sections ----------------------------------------------------------------------------- */
section{padding:clamp(48px,8vw,96px) 0}
.section--alt{background:var(--paper-2);border-block:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3}
[dir="rtl"] .eyebrow{letter-spacing:.06em}
h2{font-size:clamp(26px,4vw,42px);margin-bottom:16px}
h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px}
.lede{color:var(--ink-2);max-width:64ch;font-size:clamp(17px,2vw,19px)}
.small{font-size:15px;color:var(--ink-2);line-height:1.6}

/* Both places this is used hold exactly four cards, and auto-fit inside a 992px column fits
   three of them - so it always broke as three across and one alone underneath, which reads as
   a mistake rather than a layout. Explicit counts instead: four is not achievable at this
   width, so two by two, which is deliberate at every size. */
.cards{display:grid;gap:20px;grid-template-columns:repeat(2,1fr);margin-top:36px}
@media (max-width:640px){ .cards{grid-template-columns:1fr} }
.card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  background:var(--paper)}
.card__icon{width:34px;height:34px;color:var(--brass);margin-bottom:16px}

/* ---- Pricing -------------------------------------------------------------------------------- */
/* Four plans, side by side, because comparing them is the entire point of the screen. They do
   not fit the standard column, so the pricing table - and only the pricing table - is allowed
   a wider band. Two by two below that, never three and one. */
.wrap--wide{max-width:1340px}
.plans{display:grid;gap:20px;grid-template-columns:repeat(4,1fr);margin-top:40px;align-items:start}
@media (max-width:1100px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .plans{grid-template-columns:1fr} }
.plan{border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  background:var(--paper);display:flex;flex-direction:column;gap:14px;height:100%}
.plan--featured{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.plan__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass);min-height:14px}
.plan__name{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.plan__price{font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.plan__price span{font-size:15px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.plan__meta{font-size:15px;color:var(--ink-2)}
.plan ul{margin:0;padding-inline-start:20px;color:var(--ink-2);font-size:15px;line-height:1.7}
.plan .btn{margin-top:auto;text-align:center}
.steps{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);line-height:1.8;
  border-top:1px dashed var(--line);padding-top:12px;direction:ltr;text-align:start}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);margin-top:34px}
table{width:100%;border-collapse:collapse;min-width:600px}
th{text-align:start;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);padding:14px 18px;border-bottom:1px solid var(--line);
  white-space:nowrap}
td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:top}
tr:last-child td{border-bottom:0}
.tick{color:var(--good);font-weight:600}
.cross{color:var(--bad);font-weight:600}

/* ---- Product shot ---------------------------------------------------------------------------- */
.shot{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper);box-shadow:0 18px 50px -28px rgba(8,19,31,.45);margin-top:40px}
.shot__cap{font-size:13.5px;color:var(--ink-3);text-align:center;margin-top:12px}

/* ---- Documents ---------------------------------------------------------------------------------
   The policies and the help. One column, held to a readable measure - a privacy policy set the
   full width of a screen is a privacy policy nobody finishes, which is convenient for most
   companies and not the point here. */
.doc{max-width:74ch}
.doc h1{font-size:clamp(30px,5vw,46px)}
.doc h2{font-size:clamp(21px,3vw,27px);margin-top:44px;margin-bottom:12px;scroll-margin-top:90px}
.doc p{margin-bottom:14px;color:var(--ink-2)}
.doc p:last-child{margin-bottom:0}
.doc .lede{color:var(--ink-2)}
.doc ul{margin:0 0 16px;padding-inline-start:22px;color:var(--ink-2);line-height:1.75}
.doc li{margin-bottom:7px}
.doc__date{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:18px;
  letter-spacing:.04em}
[dir="rtl"] .doc__date{letter-spacing:0}

/* ---- Footer ------------------------------------------------------------------------------------ */
.foot{background:var(--hull);color:#8FA6BA;padding:clamp(40px,6vw,68px) 0 34px;font-size:15px}
.foot a{color:#A6BACB;text-decoration:none}
.foot a:hover{color:#fff}
.foot__cols{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.foot h4{font-family:var(--display);font-size:13px;color:#fff;margin:0 0 12px;
  letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
@media (max-width:900px){
  /* Padding on the link, not spacing between links: the gap looked like room to tap and was
     not part of the target. Measured at 18px tall before this. */
  .foot ul{gap:0}
  /* Block, not inline-block: a short word like "Help" gave a 31px-wide target in an
     otherwise full-width row. The row is the target. */
  .foot li a{display:block;padding-block:11px}
  .foot__cols{gap:8px}
}
.foot__base{border-top:1px solid var(--hull-line);margin-top:36px;padding-top:22px;
  display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;font-size:14px}

a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--brass-lift);
  outline-offset:3px;border-radius:4px}

/* The yearly equivalent, quiet under the monthly price. It is the number that closes the
   decision, and it belongs next to what it is compared against rather than in a banner
   further down that nobody reaches. */
.plan__year{font-size:13.5px;color:var(--brass);font-weight:500;margin-top:-8px}

/* ---- Billing switch and traffic slider -----------------------------------------------------
   Two controls answering two different questions: how much, and which one is mine. The second
   is the harder one, and four columns of numbers is the usual way of not answering it. */
.billing-wrap{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap}
/* A grid of two equal columns rather than inline-flex. Putting the saving badge inside the
   Yearly option made it wider than Monthly, and the indicator is sized at 50% and moved by
   its own width - so it stopped landing on the thing it was meant to be under. Equal columns
   make the geometry true again whatever either label grows to say. */
.billing{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;
  border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
/* One piece that moves, rather than two that light up independently. A switch is a thing with
   a position; two shaded buttons are two buttons. */
.billing__slide{position:absolute;top:5px;bottom:5px;inset-inline-start:5px;width:calc(50% - 5px);
  background:var(--hull);border-radius:999px;transition:transform .22s cubic-bezier(.3,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.billing__slide{transition:none}}
.billing.is-yearly .billing__slide{transform:translateX(100%)}
[dir="rtl"] .billing.is-yearly .billing__slide{transform:translateX(-100%)}
.billing__opt{position:relative;z-index:1;font:inherit;font-size:15.5px;font-weight:600;border:0;
  background:none;color:var(--ink-2);padding:10px 26px;border-radius:999px;cursor:pointer;
  min-width:138px;transition:color .18s;display:inline-flex;align-items:center;
  justify-content:center;gap:9px}
.billing__opt.is-on{color:#fff}
.billing__opt:not(.is-on):hover{color:var(--ink)}
/* Brass, and inside the option it belongs to. The saving is the reason to press that button,
   so it sits on the button - and brass is the brand signing the one thing on this page it
   actually wants read. It keeps its contrast on both grounds because the badge carries its own
   fill in each state rather than relying on whatever is behind it. */
/* A darker brass than --brass, and only here. The badge sits on its own 15% tint, which
   darkens the ground under it just enough to drag --brass down to 3.7:1 - under AA for text
   this size, in the one state where the badge has a job to do: Yearly not yet chosen, the
   saving being the reason to choose it. 5.2:1 at #7A5514, still unmistakably brass. */
.billing__save{font-size:12.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  color:#7A5514;background:color-mix(in srgb, var(--brass) 15%, transparent);
  padding:3px 9px;border-radius:999px;transition:color .18s, background .18s}
.billing__opt.is-on .billing__save{color:var(--hull);background:var(--brass-lift)}

.slider{margin-top:26px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2);padding:22px 24px;max-width:720px}
.slider__top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.slider__right{text-align:right}
.slider__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.slider__visits{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.slider__plan{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.02em;
  color:var(--brass)}
.slider__ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;
  color:var(--ink-3);margin-top:2px}
.slider__out{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.slider__price{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.slider__per{color:var(--ink-3);font-size:15px}
.slider__sites{color:var(--ink-2);font-size:15px;margin-inline-start:auto}

/* The track is drawn rather than left to the browser, because a default range input looks
   like a form field and this is a headline control. */
.slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;margin:18px 0 0;
  height:6px;border-radius:999px;background:linear-gradient(90deg,var(--brass),var(--hull));
  outline:none;cursor:pointer}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--hull);
  box-shadow:0 2px 8px rgba(8,19,31,.28);cursor:grab}
.slider input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;
  background:#fff;border:3px solid var(--hull);box-shadow:0 2px 8px rgba(8,19,31,.28);cursor:grab}
.slider input[type=range]:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* The card the slider is currently sitting in. Kept distinct from plan--featured, which says
   "most people pick this" - a different claim from "this is the one for your traffic". */
.plan--matched{border-color:var(--hull);box-shadow:0 0 0 2px var(--hull)}

/* ---- Plan buttons -------------------------------------------------------------------------
   btn--ghost is drawn for the dark header - light text, translucent fill - and putting it on a
   white card gave pale grey on white, which is how the sign-up button ended up the least
   legible thing on the pricing page. Cards get their own button instead of a patch. */
.btn--plan{width:100%;text-align:center;padding:13px 20px;font-size:16px;font-weight:600}
.btn--outline{background:transparent;border-color:var(--hull);color:var(--hull)}
.btn--outline:hover{background:var(--hull);color:#fff}
.plan--featured .btn--ink,.btn--ink{color:#fff}

/* ---- What every plan carries ---------------------------------------------------------------- */
.promises{display:grid;gap:12px 26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.promise{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--ink-2)}
.promise svg{width:19px;height:19px;color:var(--good);flex:none}/* The meaning colours. Each is used for one thing only: red for money lost, green for money
   kept, amber for something to watch, blue for a technical fact. They live here rather than in
   the block above because they arrived later, with the sections that use them. */
:root{
  --loss:#B0231A;      --loss-soft:#FDF0EE;   --loss-line:#F3C9C4;
  --save:#14795A;      --save-soft:#EAF6F1;   --save-line:#BFE3D6;
  --watch:#9A6212;     --watch-soft:#FDF5E7;  --watch-line:#EFD9AE;
  --cool:#1E5F8C;      --cool-soft:#EEF5FA;   --cool-line:#CBDFEC;
}

/* A section that needs to feel different from the one above it, without shouting. */
.section--tint{background:var(--cool-soft);border-block:1px solid var(--cool-line)}
.section--deep{background:var(--hull);color:#E7EDF3}
.section--deep h2{color:#fff}
.section--deep .lede,.section--deep p{color:#AEBECD}
.section--deep .eyebrow{color:var(--brass-lift)}

/* The threat list: one card per thing the plugin actually detects. */
.threats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:26px}
.threat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  border-block-start:3px solid var(--loss)}
.threat h3{margin:0 0 6px;font-size:16px;font-family:var(--display)}
.threat p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.65}
.threat--soft{border-block-start-color:var(--watch)}
.threat--cool{border-block-start-color:var(--cool)}

/* Two columns that disagree: what Google does, and what is left over. */
.versus{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:26px}
.versus__col{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;background:var(--paper)}
.versus__col--them{background:var(--paper-2)}
.versus__col--us{border-color:var(--save-line);background:var(--save-soft)}
.versus__col h3{margin:0 0 4px;font-size:16px;font-family:var(--display)}
.versus__col .who{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 12px}
.versus__col ul{margin:0;padding-inline-start:18px;color:var(--ink-2);font-size:14.5px;line-height:1.8}.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.price{direction:ltr;unicode-bidi:isolate;display:inline-block;font-variant-numeric:tabular-nums}/* Steps. Numbered, because "how does it work" is a sequence and a grid of icons is not. */
.howsteps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:26px}
.howstep{position:relative;padding:22px 24px 22px 60px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius)}
html[dir="rtl"] .howstep{padding:22px 60px 22px 24px}
.howstep::before{counter-increment:s;content:counter(s);position:absolute;inset-block-start:20px;inset-inline-start:20px;
  width:28px;height:28px;border-radius:50%;background:var(--hull);color:var(--brass-lift);
  display:grid;place-items:center;font-family:var(--mono);font-size:14px}
.howstep h3{margin:0 0 5px;font-size:16px;font-family:var(--display)}
.howstep p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.65}

.honest{border:1px solid var(--watch-line);background:var(--watch-soft);border-radius:var(--radius);
  padding:24px 26px;margin-top:24px}
.honest h3{margin:0 0 10px;font-size:16px;font-family:var(--display);color:#6B4409}
.honest ul{margin:0;padding-inline-start:18px;color:#6B4409;line-height:1.85;font-size:14.5px}

/* Questions. */
.faq{margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.faq details{border-block-end:1px solid var(--line)}
.faq details:last-child{border-block-end:0}
.faq summary{padding:16px 20px;cursor:pointer;font-weight:600;font-size:15.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:inline-end;color:var(--ink-3);font-family:var(--mono)}
.faq details[open] summary::after{content:'\2212'}
.faq .a{padding:0 20px 18px;color:var(--ink-2);font-size:14.5px;line-height:1.7;margin:0}

/* A line of hard numbers under the hero. */
.proof{display:flex;gap:34px;flex-wrap:wrap;margin-top:30px;padding-block-start:26px;
  border-block-start:1px solid var(--hull-line)}
.proof div{min-width:120px}
.proof b{display:block;font-family:var(--display);font-size:26px;color:var(--brass-lift);line-height:1.15}
.proof span{font-size:13.5px;color:#8FA2B4}

/* ---- Phones -------------------------------------------------------------------------------
   Small uppercase mono reads on a desktop at arm's length and does not on a phone held in one
   hand. These are the only sizes on the site under 11px, and they are all labels a buyer has
   to read to understand what they are being sold. */
@media (max-width:640px){
  .plan__tag,.slider__k,th{font-size:12px}
  .eyebrow{font-size:12px}
}