/* Rrage Agent Studio - marketing page + gated download.
 *
 * PALETTE: this :root block is the ONE place a colour is written down.
 * Every other rule uses var(--...). If you need a new colour, add it here.
 *
 * Usage rule that keeps the red accessible:
 *   - white on red, and red as small text, only ever at LARGE type (>=19px bold).
 *   - red as a line, rule, border or big numeral is decoration (>=3:1, fine).
 *   - body and small print are ink or grey on white, never red.
 */

:root{
  --red:#E82127;         /* primary red - accents, primary button */
  --ink:#171A20;         /* black - dark sections, body text on white */
  --paper:#FFFFFF;       /* white surface */
  --soft:#F4F4F2;        /* near-white surface for alternating sections */
  --muted:#5B616B;       /* secondary grey on light (6.2:1 on white) */
  --muted-dark:#9BA1A8;  /* secondary grey on black (6.7:1 on ink) */
  --line:#DFE0DC;        /* hairline rules */

  --wrap:1080px;
  --pad:clamp(20px,5vw,64px);
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}

img,svg{max-width:100%;display:block}

h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-0.02em;font-weight:800}
p{margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Focus: always visible, never removed. */
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.hero :focus-visible,.footer :focus-visible,.btn--primary:focus-visible{outline-color:var(--paper)}

.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:var(--paper);
  font-weight:700;font-size:19px;padding:12px 18px;z-index:30;text-decoration:none}
.skip:focus{left:0}

/* ---------------------------------------------------------------- topbar */
.topbar{position:sticky;top:0;z-index:20;background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.14)}
.topbar__in{display:flex;align-items:center;gap:24px;min-height:76px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper);
  font-weight:800;letter-spacing:-0.01em}
.brand__mark{width:30px;height:30px;background:var(--red);color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{color:var(--paper);text-decoration:none;font-size:16px}
.nav a:hover{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;
  text-underline-offset:6px}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font:inherit;font-size:19px;font-weight:700;line-height:1;
  padding:1.05rem 1.7rem;border:2px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;background:none;
}
.btn--sm{padding:.75rem 1.15rem}
.btn--primary{background:var(--red);color:var(--paper);border-color:var(--red)}
.btn--primary:hover{background:var(--ink);border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{border-color:var(--paper)}
.btn--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--dark:hover{background:var(--red);border-color:var(--red)}

/* ------------------------------------------------------------------ hero */
.hero{background:var(--ink);color:var(--paper);padding:clamp(64px,10vw,132px) 0 clamp(56px,8vw,104px)}
.hero__in{max-width:820px}
.kicker{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark);margin:0 0 26px}
.kicker__rule{width:30px;height:3px;background:var(--red);flex:none}
.kicker--ink{color:var(--muted)}
.hero__title{font-size:clamp(46px,9vw,96px);font-weight:800;letter-spacing:-0.035em;
  color:var(--paper)}
.hero__lead{font-size:clamp(18px,2.3vw,22px);color:var(--muted-dark);margin-top:22px;max-width:44ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__note{margin-top:26px;font-size:15px;color:var(--muted-dark);max-width:52ch}

/* --------------------------------------------------------------- sections */
.section{padding:clamp(60px,8vw,104px) 0}
.section--soft{background:var(--soft)}
.section__title{font-size:clamp(30px,4.6vw,48px);color:var(--ink);margin-top:0}
.section__lead{color:var(--muted);max-width:60ch;margin-top:18px;font-size:18px}

/* ---------------------------------------------------------- what-it-does */
.grid--4{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  margin-top:44px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.card{background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:30px 26px 34px}
.card__title{font-size:20px;color:var(--ink);margin-bottom:12px}
.card p{color:var(--muted);font-size:16px}

/* ------------------------------------------------------------ how it works */
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.step{border-top:3px solid var(--red);padding-top:22px}
.step__num{display:block;font-size:46px;font-weight:800;line-height:1;color:var(--red);
  letter-spacing:-0.04em}
.step__title{font-size:21px;color:var(--ink);margin:14px 0 10px}
.step p{color:var(--muted);font-size:16px}

/* ---------------------------------------------------------------- pricing */
.grid--plans{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:46px}
.plan{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--line);
  padding:32px 28px 34px;display:flex;flex-direction:column;border-radius:2px}
.plan--featured{background:var(--ink);border-color:var(--ink);border-top-color:var(--red)}
.plan__name{font-size:20px;font-weight:800;color:var(--ink)}
.plan__blurb{color:var(--muted);font-size:16px;margin-top:10px}
.plan__price{font-size:clamp(34px,5vw,44px);font-weight:800;letter-spacing:-0.03em;
  color:var(--ink);margin-top:22px}
.plan__period{font-size:16px;font-weight:600;color:var(--muted);margin-left:8px}
.plan__features{list-style:none;margin:24px 0 30px;padding:0;display:grid;gap:10px}
.plan__features li{color:var(--muted);font-size:16px;padding-left:20px;position:relative}
.plan__features li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:3px;
  background:var(--red)}
.plan__cta{margin-top:auto}
.plan--featured .plan__name,.plan--featured .plan__price{color:var(--paper)}
.plan--featured .plan__blurb,.plan--featured .plan__features li{color:var(--muted-dark)}

/* Post-payment panel */
.panel{background:var(--soft);padding:clamp(44px,6vw,72px) 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.panel__title{font-size:clamp(26px,3.6vw,36px);color:var(--ink)}
.panel__status{color:var(--muted);margin:16px 0 26px;max-width:62ch}

.notice{color:var(--muted);font-size:16px;margin-top:26px;border-left:3px solid var(--red);
  padding-left:14px;max-width:66ch}

/* -------------------------------------------------------------------- faq */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{cursor:pointer;font-weight:700;font-size:19px;color:var(--ink);
  padding:22px 40px 22px 0;position:relative;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:26px;color:var(--red);font-weight:800;line-height:1}
.faq__item[open] summary::after{content:"\2212"}
.faq__item p{color:var(--muted);font-size:17px;padding:0 0 24px;max-width:70ch}

/* ----------------------------------------------------------------- footer */
.footer{background:var(--ink);color:var(--muted-dark);padding:clamp(44px,6vw,68px) 0}
.footer__in{display:grid;gap:18px}
.footer__brand{color:var(--paper);font-weight:800;font-size:19px}
.footer__nav{display:flex;flex-wrap:wrap;gap:20px}
.footer__nav a{color:var(--muted-dark);text-decoration:none}
.footer__nav a:hover{color:var(--paper);text-decoration:underline;
  text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
.footer__legal{font-size:15px;max-width:60ch}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

@media (max-width:560px){
  .nav{display:none}
  .topbar__in{min-height:66px}
  .btn{width:100%}
  .hero__cta{flex-direction:column;align-items:stretch}
}