/* Trade Bouncer - tradebouncer.com
 *
 * NOTHING IS LOADED FROM ANYWHERE ELSE. No webfont, no icon set, no CDN.
 * Partly taste and partly the product: the page is the shop window of a
 * thing whose promise is that it does not phone anywhere it does not have
 * to, and a tracker here would be the first broken promise a visitor could
 * check for themselves.
 *
 * It is a separate file rather than a <style> block for one reason: the
 * Caddyfile sends a Content-Security-Policy of "style-src 'self'", and
 * that is only worth having if nothing on the page needs an exception.
 * There are no style="" attributes in the markup either, for the same
 * reason - an inline attribute needs 'unsafe-inline', which switches off
 * most of what the header is for.
 */

:root {
  /* From the brand sheet.
   *
   * The red is given there TWICE and the two disagree: the hex reads
   * #D4444F, the RGB beside it reads 240 68 79, and those are different
   * colours (#D4444F is 212 68 79). The RGB is the one that matches the
   * swatch actually printed on the sheet - sampled at 245 66 73 through
   * the compression - and the one that matches its CMYK. So 240 68 79 it
   * is, and the hex on the sheet looks like a transcription slip.
   */
  --red:        #F0444F;   /* Bouncer Red */
  --red-bright: #FF5560;
  --red-dim:    #B8323B;
  --white:      #FFFFFF;
  --grey:       #1A1A1A;
  --black:      #000000;

  --ink:        #FFFFFF;
  --ink-soft:   #B4B4B6;
  --ink-faint:  #7E7E82;
  --line:       #2A2A2C;
  --page:       #0A0A0B;
  --card:       #121214;

  --wide: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red); }
a:hover { color: var(--white); }

h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; margin: 0; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 24px; }

/* The header is sticky, so a browser jumping to #get puts the top of the
   form UNDER it: the words "Request a key" and the first line of what the
   form is for were both hidden, on the one click the whole page is built
   around. Measured in the browser, not guessed - 68px of header plus room
   to breathe. */
[id] { scroll-margin-top: 88px; }

/* A link that jumps the navigation, visible only once it has focus. */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 24px; top: 12px; z-index: 20; background: var(--red);
              color: var(--white); padding: 10px 16px; border-radius: 8px;
              text-decoration: none; }

/* ------------------------------------------------------------ the header */
header {
  border-bottom: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.92);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(140%) blur(8px);
}
.bar { display: flex; align-items: center; gap: 14px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px;
         text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 34px; display: block; }
.brand .name { font-size: 17px; font-weight: 800; letter-spacing: 0.01em;
               display: block; }
.brand .claim { display: block; font-size: 10px; font-weight: 700;
                letter-spacing: 0.18em; color: var(--ink-faint);
                text-transform: uppercase; margin-top: 1px; }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.bar nav a { color: var(--ink-soft); text-decoration: none; font-size: 15px; }
.bar nav a:hover { color: var(--white); }
.bar nav a.btn { color: var(--white); }

/* On a phone the header was a mess: the wordmark wrapped onto a second
   line, the claim under it onto a third, and the button onto two - all
   inside a bar fixed at 68px, so the top of the logo was clipped off the
   screen. Seen at 375px, not reasoned about. The claim goes (it is on the
   page three more times), the name holds one line, and the button says
   less so it fits. */
@media (max-width: 720px) {
  .bar { gap: 10px; }
  .bar nav a:not(.btn) { display: none; }
  .brand img { width: 30px; height: 30px; }
  .brand .name { font-size: 15px; white-space: nowrap; }
  .brand .claim { display: none; }
  .bar nav .btn { padding: 11px 15px; font-size: 14px; white-space: nowrap; }
  .hero { padding: 56px 0 56px; }
  section { padding: 56px 0; }
  .plain { padding: 24px; }
  form { padding: 22px; }
}

/* ------------------------------------------------------------ the button */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--red); color: var(--white);
  /* Longhand, NOT the `font:` shorthand. "font: 700 15px/1 inherit" is
     invalid - inherit is not a font-family inside the shorthand - so the
     browser threw the whole declaration away and the button rendered at
     weight 400. It still looked like a button, which is why it survived
     until something measured getComputedStyle. */
  font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1;
  padding: 14px 22px; border-radius: 8px; text-decoration: none;
  transition: background .15s ease;
}
.btn:hover { background: var(--red-bright); color: var(--white); }
.btn.ghost { background: transparent; color: var(--ink);
             box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { background: var(--grey); color: var(--white); }
.btn[disabled] { background: var(--grey); color: var(--ink-faint);
                 cursor: default; }

/* -------------------------------------------------------------- the hero */
.hero { padding: 96px 0 84px; border-bottom: 1px solid var(--line); }
.kicker {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--red);
  margin-bottom: 26px;
}
.hero h1 { font-size: clamp(42px, 7vw, 76px); font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--red); }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink-soft);
        max-width: 37em; margin: 26px 0 0; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.under { margin-top: 18px; font-size: 14px; color: var(--ink-faint); }

/* ---------------------------------------------------------- the sections */
section { padding: 84px 0; border-bottom: 1px solid var(--line); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
           text-transform: uppercase; color: var(--red); margin-bottom: 18px; }
section h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.intro { color: var(--ink-soft); max-width: 42em; margin: 20px 0 0;
         font-size: 18px; }

.grid { display: grid; gap: 16px; margin-top: 44px;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line);
        border-radius: 12px; padding: 24px; }
.card h3 { font-size: 17px; font-weight: 700; }
.card p { margin: 10px 0 0; color: var(--ink-soft); font-size: 15.5px;
          line-height: 1.6; }
.tag { display: block; font-size: 11px; font-weight: 700;
       letter-spacing: 0.14em; text-transform: uppercase;
       color: var(--red); margin-bottom: 12px; }

/* The three steps of detect + revert. */
.steps { counter-reset: s; margin: 44px 0 0; padding: 0; list-style: none;
         display: grid; gap: 1px; background: var(--line);
         border: 1px solid var(--line); border-radius: 12px;
         overflow: hidden; }
.steps li { counter-increment: s; background: var(--page); padding: 26px 28px;
            display: flex; gap: 22px; align-items: baseline; }
.steps li::before {
  content: counter(s); color: var(--red); font-weight: 800; font-size: 15px;
  letter-spacing: 0.1em; flex: none; width: 1.4em;
}
.steps b { display: block; font-size: 17px; margin-bottom: 6px; }
.steps span { color: var(--ink-soft); font-size: 15.5px; }

/* The honesty block. Bordered in red because it is the one thing on this
   page a buyer could later feel misled about. */
.plain { border: 1px solid var(--red-dim); border-radius: 12px;
         padding: 34px; margin-top: 40px; background: #150E0F; }
.plain h3 { font-size: 20px; font-weight: 800; }
.plain p { color: var(--ink-soft); margin: 14px 0 0; max-width: 46em; }

/* ------------------------------------------------------------- the price */
.two { display: grid; gap: 48px; grid-template-columns: 1fr 1fr;
       align-items: start; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; gap: 40px; } }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px;
         margin-top: 30px; }
.price b { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; }
.price span { color: var(--ink-soft); font-size: 17px; }
.facts { margin: 28px 0 0; padding: 0; list-style: none; }
.facts li { color: var(--ink-soft); padding: 7px 0 7px 26px;
            position: relative; font-size: 16px; }
.facts li::before { content: ""; position: absolute; left: 4px; top: 14px;
                    width: 7px; height: 7px; border-radius: 50%;
                    background: var(--red); }

/* -------------------------------------------------------------- the form */
form { background: var(--card); border: 1px solid var(--line);
       border-radius: 12px; padding: 28px; }
form .eyebrow { margin-bottom: 14px; }
label { display: block; font-size: 13px; font-weight: 700;
        letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink-faint); margin: 18px 0 8px; }
label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
input, textarea {
  width: 100%; background: var(--black); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px;
  /* Same dropped shorthand as the button, and here it mattered: with the
     declaration gone the fields fell back to the browser's own 13.33px,
     and iOS Safari ZOOMS the page whenever a text field under 16px takes
     focus. Every iPhone visitor tapping the email box would have been
     thrown into a zoomed page. 16px is the floor, not a preference. */
  font-family: inherit; font-weight: 400; font-size: 16px; line-height: 1.5;
}
input:focus, textarea:focus { outline: 0; border-color: var(--red); }
textarea { resize: vertical; min-height: 92px; }
form .btn { margin-top: 22px; width: 100%; padding: 15px; font-size: 16px; }
.note { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-faint);
        line-height: 1.55; }
.note.lead { margin: 0 0 20px; }
.note.warn { color: var(--red); }
.said { margin: 18px 0 0; font-size: 15px; display: none; line-height: 1.55; }
.said.good { display: block; color: var(--white); }
.said.bad  { display: block; color: var(--red); }

/* What replaces the form once it has been sent. */
.done h3 { font-size: 21px; font-weight: 800; }
.done p { margin: 14px 0 0; font-size: 15.5px; color: var(--ink-soft);
          line-height: 1.6; }

/* The honeypot. Taken off-screen rather than display:none - a bot that
   skips what is not rendered would skip this, and a field nobody can see
   is one nobody fills in by accident. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px;
      overflow: hidden; }

/* ------------------------------------------------------------ the footer */
footer { padding: 46px 0 64px; color: var(--ink-faint); font-size: 14px; }
footer .row { display: flex; flex-wrap: wrap; gap: 10px 26px;
              align-items: center; }
footer .row strong { color: var(--ink-soft); }
footer a { color: var(--ink-faint); text-decoration: none; }
footer a:hover { color: var(--white); }
footer .push { margin-left: auto; }
@media (max-width: 620px) { footer .push { margin-left: 0; } }
footer .risk { margin: 24px 0 0; max-width: 60em; line-height: 1.6;
               color: #67676B; font-size: 13px; }