/* ==========================================================================
   RAE Networks — public site design system
   --------------------------------------------------------------------------
   Grounded in the company's own emblem: an isometric RAE monogram bolted into
   a technical ring. Everything here is derived from that object —

     Palette   sampled straight out of the logo PNG (crimson / navy / gold /
               steel), on the deep navy of the brand's own end card.
     Rule      THREE COLOURS, THREE JOBS — the logo's own red, yellow and blue.
               RED  acts: buttons, links, the live accent.
               YELLOW marks value: speeds, times, savings, the thing to notice.
               BLUE  structures: grounds, panels, rails, everything load-bearing.
               A surface may carry all three, but only one of them loudly.
     Signature THE DROP LINE — the crimson strand running down the page is the
               drop cable, bolted at each section with a hex node lifted from
               the emblem's ring. It fills with gold as you scroll: the signal
               travelling from the core to your house.
   ========================================================================== */

:root {
  /* ground */
  --ink:        #02142F;
  --ink-2:      #071E43;
  --ink-3:      #0C2A5A;
  --navy:       #12376E;

  /* accents */
  --crimson:      #F91052;
  --crimson-deep: #C50A3D;
  --crimson-dim:  rgba(249, 16, 82, .14);
  --gold:         #FCD106;

  /* neutrals */
  --steel:  #CDCECF;
  --paper:  #F4F6FB;
  --card:   #FFFFFF;
  --slate:  #55688F;
  --line:   #E2E7F1;
  --line-d: rgba(255, 255, 255, .10);

  --display: "Archivo", system-ui, -apple-system, sans-serif;
  --body:    "Public Sans", system-ui, -apple-system, sans-serif;
  --mono:    "Martian Mono", ui-monospace, "SFMono-Regular", monospace;

  --shell: 1180px;
  --r:  14px;
  --r-s: 9px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  background: var(--ink);
  color: #fff;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--crimson); color: #fff; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--ink); padding: 12px 20px;
  font-weight: 700; border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1.03;
  letter-spacing: -.018em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crimson);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; flex: none;
  background: var(--crimson);
}
.eyebrow.on-light { color: var(--crimson-deep); }
.eyebrow.on-light::before { background: var(--crimson-deep); }

/* GOLD IS RESERVED — speed and time only. */
.fig {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -.03em;
}
.fig-unit {
  font-family: var(--mono);
  font-size: .62em;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .04em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-weight: 700; font-size: .97rem;
  padding: 14px 26px; border: 0; border-radius: var(--r-s); cursor: pointer;
  transition: transform .16s ease-out, box-shadow .16s ease-out, background .16s ease-out, color .16s ease-out;
  white-space: nowrap;
}
.btn-primary {
  background: var(--crimson); color: #fff;
  box-shadow: 0 8px 22px -10px rgba(249, 16, 82, .85);
}
.btn-primary:hover { background: var(--crimson-deep); transform: translateY(-2px); }
.btn-ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; transform: translateY(-2px); }
.btn-solid {
  background: #fff; color: var(--ink);
  box-shadow: 0 8px 22px -12px rgba(2, 20, 47, .7);
}
.btn-solid:hover { transform: translateY(-2px); }
.btn-lg { padding: 17px 32px; font-size: 1.03rem; }
.btn-sm { padding: 10px 18px; font-size: .88rem; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; gap: 22px;
  padding: 13px 26px;
  transition: background .28s, box-shadow .28s, padding .28s;
}
.nav.stuck {
  background: rgba(2, 20, 47, .93);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-d);
  padding-top: 9px; padding-bottom: 9px;
}
.nav-brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.nav-brand img { width: 40px; height: 40px; flex: none; }
.nav-brand b {
  font-family: var(--display); font-weight: 800; font-stretch: 118%;
  font-size: 1.12rem; letter-spacing: -.02em; line-height: 1;
  display: block;
}
.nav-brand small {
  font-family: var(--mono); font-size: .52rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); display: block; margin-top: 3px;
}
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  font-size: .92rem; font-weight: 500; color: rgba(255, 255, 255, .74);
  transition: color .16s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
.nav-links a[aria-current="page"] { font-weight: 700; }
.nav-act { display: flex; align-items: center; gap: 10px; }

.nav-burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 42px; height: 42px; border-radius: var(--r-s);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
  position: relative;
}
.nav-burger span {
  position: absolute; left: 12px; width: 18px; height: 2px; background: #fff;
  transition: transform .2s ease-out, opacity .2s ease-out;
}
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 20px; }
.nav-burger span:nth-child(3) { top: 25px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 132px 0 58px;
  background:
    radial-gradient(1100px 560px at 76% 18%, rgba(18, 55, 110, .85), transparent 68%),
    radial-gradient(760px 420px at 4% 88%, rgba(249, 16, 82, .17), transparent 70%),
    var(--ink);
  overflow: hidden;
}
/* the isometric grid the monogram is drawn on, whispered into the ground */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient( 30deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(-30deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 74px);
  mask-image: radial-gradient(900px 560px at 70% 26%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(900px 560px at 70% 26%, #000, transparent 76%);
}
.hero > .shell { position: relative; z-index: 1; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 54px; align-items: center;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 3.75rem);
  margin: 18px 0 20px;
  max-width: 13.5em;
}
.hero h1 em { font-style: normal; color: var(--crimson); }
.hero-sub {
  font-size: clamp(1.02rem, 1.7vw, 1.16rem);
  color: rgba(255, 255, 255, .78);
  max-width: 34em;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 13px; margin: 30px 0 0; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid var(--line-d);
}
.hero-facts li {
  list-style: none; font-family: var(--mono);
  font-size: .64rem; font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255, 255, 255, .62);
  display: flex; align-items: center; gap: 8px;
}
.hero-facts li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--crimson); flex: none;
}

/* the company's own explainer, framed like a piece of network gear */
.reel {
  position: relative; border-radius: var(--r);
  background: linear-gradient(150deg, var(--ink-3), var(--ink-2));
  padding: 13px;
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.reel-screen {
  position: relative; border-radius: 8px; overflow: hidden;
  background: #000; aspect-ratio: 16 / 9;
}
.reel-screen video { width: 100%; height: 100%; object-fit: cover; }
.reel-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 5px 2px;
}
.reel-bar .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); flex: none;
  box-shadow: 0 0 9px var(--crimson);
}
.reel-bar span {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .52);
}
.reel-sound {
  margin-left: auto; background: rgba(255, 255, 255, .1); border: 0; cursor: pointer;
  color: #fff; font-family: var(--mono); font-size: .58rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 7px 13px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .16s;
}
.reel-sound:hover { background: rgba(255, 255, 255, .2); }

/* ---------- THE DROP LINE (signature) ---------- */
.trunk { position: relative; }
.trunk::before {                    /* the strand */
  content: ""; position: absolute; top: 0; bottom: 0; left: 27px; width: 2px;
  background: rgba(249, 16, 82, .26);
}
.trunk-fill {                        /* signal travelling down it */
  position: absolute; top: 0; left: 27px; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--crimson) 0%, var(--gold) 100%);
  box-shadow: 0 0 14px rgba(252, 209, 6, .6);
  will-change: height;
}

.splice { position: relative; padding-left: 78px; }
.splice::before {                    /* hex bolt head, lifted off the emblem's ring */
  content: ""; position: absolute; left: 14px; top: 4px;
  width: 28px; height: 32px;
  background: var(--crimson);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.splice::after {                     /* the socket in the middle of the bolt */
  content: ""; position: absolute; left: 23px; top: 15px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink);
}
.splice-no {
  font-family: var(--mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); display: block; margin-bottom: 9px;
}

/* ---------- Sections ---------- */
.sec { padding: 92px 0; position: relative; }
.sec-light { background: var(--paper); color: var(--ink); }
.sec-light h2, .sec-light h3 { color: var(--ink); }
.sec-head { max-width: 640px; margin-bottom: 46px; }
.sec-head h2 { font-size: clamp(1.85rem, 3.9vw, 2.65rem); margin: 15px 0 14px; }
.sec-head p { color: rgba(255, 255, 255, .72); font-size: 1.04rem; }
.sec-light .sec-head p, .panel .sec-head p { color: var(--slate); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line-d);
  border-radius: var(--r);
  padding: 28px;
  transition: transform .2s ease-out, border-color .2s ease-out, background .2s ease-out;
}
.card:hover { transform: translateY(-3px); border-color: rgba(249, 16, 82, .45); }
.card h3 { font-size: 1.16rem; margin-bottom: 9px; }
.card p { color: rgba(255, 255, 255, .7); font-size: .96rem; }
.card-ico {
  width: 42px; height: 42px; border-radius: 10px; margin-bottom: 17px;
  background: var(--crimson-dim); color: var(--crimson);
  display: grid; place-items: center; font-size: 1.15rem;
}

.sec-light .card, .panel .card { background: var(--card); border-color: var(--line); box-shadow: 0 1px 2px rgba(2, 20, 47, .05); }
.sec-light .card p, .panel .card p { color: var(--slate); }
.sec-light .card:hover, .panel .card:hover { border-color: rgba(249, 16, 82, .45); }

/* ---------- Plans ---------- */
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); padding: 30px;
}
.plan-top { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 22px; }
.plan h3 { font-size: 1.12rem; letter-spacing: 0; }
.plan-speed { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 6px; }
.plan-speed .fig { font-size: 3.1rem; }
.plan-for { color: var(--slate); font-size: .93rem; }
.plan-price {
  font-family: var(--display); font-weight: 800; font-stretch: 118%;
  font-size: 1.5rem; color: var(--ink); letter-spacing: -.02em;
}
.plan-price small {
  font-family: var(--mono); font-size: .6rem; font-weight: 400;
  color: var(--slate); letter-spacing: .07em; text-transform: uppercase;
  display: block; margin-top: 4px;
}
.plan ul { list-style: none; margin: 20px 0 26px; display: grid; gap: 10px; }
.plan li {
  font-size: .93rem; color: var(--slate);
  display: flex; gap: 10px; align-items: flex-start;
}
.plan li::before { content: "✓"; color: var(--crimson); font-weight: 800; flex: none; }
.plan .btn { margin-top: auto; }
.plan-hot { border-color: var(--crimson); box-shadow: 0 22px 50px -26px rgba(249, 16, 82, .55); }
.plan-flag {
  position: absolute; top: -12px; left: 30px;
  background: var(--crimson); color: #fff;
  font-family: var(--mono); font-size: .56rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 99px;
}

/* draft/placeholder marker — visible until real figures land */
.draft {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  background: rgba(252, 209, 6, .16); color: #7A6400;
  border: 1px dashed rgba(122, 100, 0, .5);
  padding: 8px 14px; border-radius: 99px;
}
.draft-dark { background: rgba(252, 209, 6, .12); color: var(--gold); border-color: rgba(252, 209, 6, .45); }

/* ---------- Promise band ---------- */
.promise {
  background: linear-gradient(115deg, var(--crimson-deep), var(--crimson) 62%, #FF4E7F);
  color: #fff; border-radius: var(--r); padding: 44px;
  display: grid; grid-template-columns: auto 1fr; gap: 38px; align-items: center;
}
.promise .fig { font-size: clamp(3rem, 8vw, 4.6rem); color: #fff; }
.promise .fig-unit { color: rgba(255, 255, 255, .85); }
.promise h3 { font-size: 1.5rem; margin-bottom: 9px; }
.promise p { color: rgba(255, 255, 255, .9); max-width: 46em; }

/* ---------- About ---------- */
.creed { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.creed-item {
  border-left: 3px solid var(--crimson);
  padding: 4px 0 4px 20px;
}
.creed-item h3 {
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 11px; font-stretch: normal;
}
.creed-item p { font-size: 1rem; color: rgba(255, 255, 255, .8); }
.sec-light .creed-item p, .panel .creed-item p { color: var(--slate); }
.sec-light .creed-item h3, .panel .creed-item h3 { color: var(--crimson-deep); }

.closing {
  font-family: var(--display); font-weight: 800; font-stretch: 118%;
  font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.12;
  letter-spacing: -.02em; max-width: 16em;
}

/* ---------- Client portal showcase ---------- */
.portal-show {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 52px; align-items: center;
}
.portal-list { list-style: none; display: grid; gap: 16px; margin: 26px 0 30px; }
.portal-list li { display: flex; gap: 14px; align-items: flex-start; }
.portal-list b { display: block; font-size: .98rem; margin-bottom: 2px; }
.portal-list span { color: rgba(255, 255, 255, .68); font-size: .93rem; }
.sec-light .portal-list span, .panel .portal-list span { color: var(--slate); }
.portal-list .n {
  font-family: var(--mono); font-size: .6rem; font-weight: 600; color: var(--crimson);
  border: 1px solid rgba(249, 16, 82, .4); border-radius: 6px;
  padding: 4px 7px; flex: none; line-height: 1;
}

/* a browser chrome that frames the real login screen */
.frame {
  border-radius: var(--r); overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.frame-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: rgba(255, 255, 255, .05);
  border-bottom: 1px solid var(--line-d);
}
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); flex: none; }
.frame-url {
  flex: 1; margin-left: 6px; background: rgba(0, 0, 0, .3); border-radius: 99px;
  padding: 5px 13px; font-family: var(--mono); font-size: .58rem;
  color: rgba(255, 255, 255, .55); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame-body { padding: 34px 30px 38px; background: var(--paper); color: var(--ink); }

/* the login form mock — markup only, the live one lives in /subscribers/ */
.mock { max-width: 330px; margin: 0 auto; text-align: center; }
.mock img { width: 62px; margin: 0 auto 16px; }
.mock h4 { font-family: var(--display); font-weight: 800; font-stretch: 118%; font-size: 1.28rem; color: var(--ink); }
.mock > p { color: var(--slate); font-size: .88rem; margin: 7px 0 22px; }
.mock-field {
  text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 11px 14px; margin-bottom: 11px;
}
.mock-field span {
  font-family: var(--mono); font-size: .53rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 4px;
}
.mock-field b { font-weight: 500; color: var(--ink); font-size: .93rem; }
.mock-field b.ph { color: #9AA7BF; }
.mock .btn { width: 100%; margin-top: 7px; }
.mock-foot { font-size: .8rem; color: var(--slate); margin-top: 15px; }

/* ---------- Contact ---------- */
.reach { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); }
.reach-item {
  background: rgba(255, 255, 255, .045); border: 1px solid var(--line-d);
  border-radius: var(--r); padding: 24px;
}
.sec-light .reach-item, .panel .reach-item { background: var(--card); border-color: var(--line); }
.reach-item h3 {
  font-family: var(--mono); font-size: .6rem; font-weight: 600; font-stretch: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--crimson); margin-bottom: 13px;
}
.sec-light .reach-item h3, .panel .reach-item h3 { color: var(--crimson-deep); }
.reach-item a, .reach-item p {
  display: block; font-size: 1.04rem; font-weight: 600;
  margin-bottom: 4px; word-break: break-word;
}
.reach-item a:hover { color: var(--crimson); }
.reach-item small { font-family: var(--mono); font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; color: var(--slate); font-weight: 400; }

/* ---------- Footer ---------- */
.foot { background: #010D20; padding: 66px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.foot-brand img { width: 52px; margin-bottom: 15px; }
.foot-brand p { color: rgba(255, 255, 255, .58); font-size: .92rem; max-width: 30em; }
.foot h4 {
  font-family: var(--mono); font-size: .6rem; font-weight: 600; font-stretch: normal;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); margin-bottom: 16px;
}
.foot-col a, .foot-col p {
  display: block; color: rgba(255, 255, 255, .72); font-size: .93rem; margin-bottom: 9px;
}
.foot-col a:hover { color: var(--crimson); }
.foot-base {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line-d);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .06em;
  color: rgba(255, 255, 255, .4); text-transform: uppercase;
}

/* ---------- Page header (inner pages) ---------- */
.phead {
  padding: 132px 0 66px;
  background:
    radial-gradient(880px 420px at 78% 10%, rgba(18, 55, 110, .8), transparent 66%),
    var(--ink);
  border-bottom: 1px solid var(--line-d);
  position: relative; overflow: hidden;
}
.phead::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient( 30deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(-30deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 74px);
  mask-image: radial-gradient(700px 380px at 76% 30%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(700px 380px at 76% 30%, #000, transparent 74%);
}
.phead > .shell { position: relative; z-index: 1; }
.phead h1 { font-size: clamp(2.2rem, 5.2vw, 3.4rem); margin: 16px 0 16px; max-width: 16em; }
.phead p { color: rgba(255, 255, 255, .76); font-size: 1.07rem; max-width: 42em; }

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}
[data-reveal].shown { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid, .portal-show { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-top: 116px; }
  .promise { grid-template-columns: 1fr; gap: 20px; padding: 34px; text-align: left; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 820px) {
  .nav-links {
    position: fixed; inset: 62px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(2, 20, 47, .98); backdrop-filter: blur(14px);
    padding: 10px 26px 22px;
    border-bottom: 1px solid var(--line-d);
    transform: translateY(-140%); transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line-d); font-size: 1rem; }
  .nav-burger { display: block; }
  .nav-act .btn-desk { display: none; }
  .sec { padding: 68px 0; }
  .trunk::before, .trunk-fill { left: 13px; }
  .splice { padding-left: 52px; }
  .splice::before { left: 0; width: 26px; height: 26px; }
  .splice::after { left: 8px; top: 13px; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .shell { padding: 0 18px; }
  .foot-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .nav-act .btn { width: auto; }
  .hero-ctas .btn { width: 100%; }
  .card, .plan { padding: 24px; }
  .frame-body { padding: 26px 18px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .trunk-fill { box-shadow: none; }
}

/* ---------- Inset light panel ----------
   Keeps the drop line running unbroken down a single navy page: light content
   is bolted onto the line as a panel instead of a full-bleed band. */
.panel {
  background: var(--paper); color: var(--ink);
  border-radius: var(--r); padding: 44px;
}
.panel h2, .panel h3, .panel h4 { color: var(--ink); }
.panel > p { color: var(--slate); }
.panel .eyebrow { color: var(--crimson-deep); }
.panel .eyebrow::before { background: var(--crimson-deep); }
.panel .btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(2, 20, 47, .22); }
.panel .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Client login lives in the nav bar on desktop and in the drawer on mobile. */
.nav-mob-only { display: none; }

@media (max-width: 980px) { .panel { padding: 32px; } }
@media (max-width: 820px)  { .nav-mob-only { display: block; } }
@media (max-width: 560px)  { .panel { padding: 24px 20px; } }

/* ---------- Light-surface guard ----------
   `.phead p` (0,1,1) fires on any paragraph inside the page header, including
   the light login frame nested in it. These rules sit last so a light surface
   always wins back its own text colours, whatever it is nested inside. */
.frame-body,
.frame-body p,
.frame-body .mock > p,
.frame-body .mock-foot { color: var(--slate); }
.frame-body h4,
.frame-body .mock-field b { color: var(--ink); }
.frame-body .mock-field b.ph { color: #8E9CB6; }

.panel p,
.panel .creed-item p,
.panel .portal-list span,
.panel .plan-for { color: var(--slate); }
.panel .plan h3,
.panel .plan-price,
.panel .card h3 { color: var(--ink); }

/* A ghost button on a white plan card must not be white-on-white. */
.plan .btn-ghost,
.frame-body .btn-ghost {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(2, 20, 47, .22);
}
.plan .btn-ghost:hover,
.frame-body .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* The nav lockup holds one line on a phone; the descriptor is a desktop luxury. */
.nav-brand b { white-space: nowrap; }
@media (max-width: 560px) {
  .nav { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .nav-brand img { width: 34px; height: 34px; }
  .nav-brand b { font-size: .98rem; }
  .nav-brand small { display: none; }
}

/* ---------- Subscriber login card ----------
   The real login, embedded on the public site. Light surface wherever it sits,
   so it reads as a door rather than another content block. */
.login-card {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r);
  padding: 30px;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(2, 20, 47, .07);
  max-width: 440px;
  width: 100%;
}
.login-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login-head img { flex: none; }
.login-head h3 { font-size: 1.22rem; color: var(--ink); margin-bottom: 2px; }
.login-head p { color: var(--slate); font-size: .88rem; }

.login-lbl {
  display: block;
  font-family: var(--mono); font-size: .55rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--slate);
  margin: 0 0 6px;
}
.login-in {
  display: block; width: 100%;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 13px 14px; margin-bottom: 15px;
  transition: border-color .16s, box-shadow .16s;
}
.login-in::placeholder { color: #9AA7BF; }
.login-in:focus {
  outline: 0; border-color: var(--crimson);
  box-shadow: 0 0 0 3px var(--crimson-dim);
}
.login-otp {
  font-family: var(--mono); font-size: 1.3rem; letter-spacing: .35em; text-align: center;
}
.login-go { width: 100%; margin-top: 3px; }
.login-go[disabled] { opacity: .6; cursor: progress; }

.login-msg {
  font-size: .88rem; margin-top: 14px; min-height: 1px;
  color: var(--crimson-deep); font-weight: 600;
}
.login-msg.ok { color: #0B7A4B; }
.login-msg:empty { display: none; }

.login-links {
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--slate); line-height: 1.7;
}
.login-links a { display: block; color: var(--crimson-deep); font-weight: 600; }
.login-links a:hover { text-decoration: underline; }
.login-links span { display: none; }

/* ---------- The door: login band under the hero ---------- */
.door { padding: 0 0 92px; }
.door-inner {
  background: var(--paper);
  border-radius: var(--r);
  padding: 46px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px; align-items: center;
}
.door-inner h2 { color: var(--ink); font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 15px 0 14px; }
.door-inner > div > p { color: var(--slate); }
.door-inner .eyebrow { color: var(--crimson-deep); }
.door-inner .eyebrow::before { background: var(--crimson-deep); }
.door-list { list-style: none; display: grid; gap: 13px; margin-top: 24px; }
.door-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--slate); font-size: .95rem; }
.door-list li b { color: var(--ink); font-weight: 700; }
.door-list li::before {
  content: "✓"; color: var(--crimson); font-weight: 800; flex: none; line-height: 1.5;
}
.door-foot { margin-top: 26px; font-size: .9rem; color: var(--slate); }
.door-foot a { color: var(--crimson-deep); font-weight: 600; }
.door-foot a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  /* On a phone the person who came here to pay should meet the form first,
     not scroll past the sales bullets to reach it. */
  .door-inner { grid-template-columns: 1fr; gap: 34px; padding: 34px; }
  .door-inner > div:first-child { order: 2; }
  .door-inner .login-card { order: 1; max-width: none; }
}
@media (max-width: 560px) {
  .door { padding-bottom: 66px; }
  .door-inner { padding: 24px 20px; }
  .login-card { padding: 24px 20px; }
}


/* ==========================================================================
   TRI-COLOUR SYSTEM (owner 2026-09-15: "red yellow and blue", elegant not loud)
   --------------------------------------------------------------------------
   The emblem stacks all three inside a navy ring. The page does the same, but
   at three different VOLUMES — that is what keeps it from shouting:
     BLUE   is the room. Grounds, panels, rails. Large areas, low saturation.
     RED    is the verb. Buttons, links, the live dot. Small areas, full strength.
     YELLOW is the highlight. Figures and hairlines only. Tiny areas, warmed off
            pure #FCD106 to a softer brass so it sits beside navy instead of
            vibrating against it.
   Nothing here is a filled block of saturated colour — the three meet only in
   hairlines a few pixels tall.
   ========================================================================== */

:root {
  --brass:      #E9C34A;   /* yellow, warmed for large-ish use on dark */
  --brass-ink:  #8A6D00;   /* the same note, legible on white */
  --azure:      #4F86C6;   /* blue, lifted off the navy so it reads on dark */
  --azure-ink:  #24558F;   /* the same note, legible on white */
}

/* The brand rule: a three-segment hairline in logo order. The smallest
   possible piece of the emblem — used to open a section, never to fence one. */
.tri {
  display: flex; width: 66px; height: 3px; border-radius: 99px; overflow: hidden;
  margin-bottom: 20px;
}
.tri i { flex: 1; }
.tri i:nth-child(1) { background: var(--crimson); }
.tri i:nth-child(2) { background: var(--brass); }
.tri i:nth-child(3) { background: var(--azure); }

/* Card icons cycle the three at low tint, so a grid reads as the logo rather
   than as one colour repeated. */
.grid .card:nth-child(3n+2) .card-ico { background: rgba(233, 195, 74, .15); color: var(--brass); }
.grid .card:nth-child(3n+3) .card-ico { background: rgba(79, 134, 198, .16); color: var(--azure); }
.sec-light .grid .card:nth-child(3n+2) .card-ico,
.panel .grid .card:nth-child(3n+2) .card-ico { color: var(--brass-ink); }
.sec-light .grid .card:nth-child(3n+3) .card-ico,
.panel .grid .card:nth-child(3n+3) .card-ico { color: var(--azure-ink); }

/* Hero dots and door ticks run the same quiet cycle. */
.hero-facts li:nth-child(3n+2)::before { background: var(--brass); }
.hero-facts li:nth-child(3n+3)::before { background: var(--azure); }
.door-list li:nth-child(3n+2)::before { color: var(--brass-ink); }
.door-list li:nth-child(3n+3)::before { color: var(--azure-ink); }

/* The drop line's bolts cycle, so the spine carries the whole palette down the page. */
.splice:nth-child(3n+2)::before { background: var(--brass); }
.splice:nth-child(3n+3)::before { background: var(--azure); }

/* Hairline edges — 2px, never a band. */
.promise { border-bottom: 2px solid var(--brass); }
.foot,
.door-inner {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--crimson) 0 33.33%, var(--brass) 33.33% 66.66%, var(--azure) 66.66% 100%) 1;
}

/* Plan cards: the featured one is red, its neighbours take blue and brass. */
.grid .plan:nth-child(1) { border-top: 3px solid var(--azure); }
.grid .plan:nth-child(3) { border-top: 3px solid var(--brass); }
.grid .plan.plan-hot { border-top: 3px solid var(--crimson); }

/* A brass call to action for the one moment that outranks red. */
.btn-gold { background: var(--brass); color: #2A2200; box-shadow: 0 8px 22px -12px rgba(233, 195, 74, .7); }
.btn-gold:hover { background: #DDB63C; transform: translateY(-2px); }

/* ---------- Page art ----------
   Frames only appear when the file exists (rae_has), so nothing ever ships blank. */
.art { border-radius: var(--r); overflow: hidden; position: relative; background: var(--ink-2); }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-band { aspect-ratio: 16 / 9; }
.art-card { aspect-ratio: 4 / 3; }
.art-tall { aspect-ratio: 3 / 4; }
.art-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px 18px;
  background: linear-gradient(0deg, rgba(2, 20, 47, .88), transparent);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .8);
}

/* ---------- Testimonials ---------- */
.voices { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.voice {
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line-d);
  border-left: 3px solid var(--crimson);
  border-radius: var(--r);
  padding: 28px;
  display: flex; flex-direction: column;
}
.voices .voice:nth-child(3n+2) { border-left-color: var(--brass); }
.voices .voice:nth-child(3n+3) { border-left-color: var(--azure); }
.voice blockquote {
  font-size: 1.04rem; line-height: 1.6; color: rgba(255, 255, 255, .88);
  margin-bottom: 20px;
}
.voice figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.voice .who { font-weight: 700; font-size: .93rem; }
.voice .where {
  display: block; font-family: var(--mono); font-size: .56rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-top: 3px;
}
.voice .initial {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .09); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1rem;
}
.panel .voice, .sec-light .voice { background: var(--card); border-color: var(--line); }
.panel .voice blockquote, .sec-light .voice blockquote { color: var(--ink); }
.panel .voice .where, .sec-light .voice .where { color: var(--slate); }
.panel .voice .initial, .sec-light .voice .initial { background: var(--paper); color: var(--ink); }

/* ---------- Honest scarcity note ---------- */
.scarce {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid rgba(233, 195, 74, .35);
  background: rgba(233, 195, 74, .07);
  border-radius: var(--r); padding: 20px 22px;
  font-size: .95rem; color: rgba(255, 255, 255, .84);
}
.scarce b { color: var(--brass); display: block; font-size: .95rem; margin-bottom: 3px; }
.scarce .mark { color: var(--brass); font-size: 1.1rem; line-height: 1.3; flex: none; }
.panel .scarce, .sec-light .scarce { color: var(--slate); background: rgba(233, 195, 74, .12); }
.panel .scarce b, .sec-light .scarce b { color: var(--brass-ink); }
.panel .scarce .mark, .sec-light .scarce .mark { color: var(--brass-ink); }

/* Speed figures on a white plan card: pure gold has no contrast on paper, so
   the same note lands one step deeper. Dark surfaces keep the bright gold. */
.plan .fig, .plan .fig-unit,
.panel .fig, .panel .fig-unit { color: #C0940A; }
.promise .fig, .promise .fig-unit { color: #fff; }