/*  Beacon Digital Solutions — site design system
 *
 *  One stylesheet for every page. Written as plain CSS on purpose: the
 *  Tailwind build in this repo (assets/tailwind.css) only ever contains the
 *  utilities the HTML used at the moment it was last built, so a class added
 *  to a page later silently resolves to nothing. That failure is invisible
 *  until you look at the page. Nothing here depends on a build step.
 *
 *  The vocabulary, in the order a page uses it:
 *    .site-head .brand .site-nav       the bar at the top
 *    .chapter-block                    one idea, one screen of space
 *    .band                             a darker stripe to separate chapters
 *    .eyebrow .display .chapter .lede  the type scale
 *    .btn .btn-accent .btn-light .btn-ghost
 *    .split .stage .shot .shot-phone .lit
 *    .rise                             scroll reveal (see the note on it)
 *    .prose                            long-form text: legal, blog, support
 *    .site-foot
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#f5f7fa;        /* headline white, very slightly cool */
  --ink-dim:#9aa6b2;    /* body grey, biased toward the teal accent */
  --ground:#05070a;     /* near-black, not pure */
  --ground-2:#0b0f14;   /* the band that separates chapters */
  --edge:#1b2027;
  --accent:#34d399;     /* the app's own green */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--ground); color:var(--ink);
  margin:0; -webkit-font-smoothing:antialiased;
}
/* The decorative glows behind the device shots are meant to bleed past their
   container — .hero-stage::before sits at inset -14% -30%, .lit::before at
   -18% -22%. Past the edge of the viewport that bleed became real horizontal
   scroll: the page could be dragged sideways, which on a phone reads as a
   broken layout.
   Two details, both learned by measuring rather than reasoning:
   `clip` rather than `hidden`, because `hidden` makes the element a scroll
   container and breaks the sticky header; and it has to be set on BOTH html
   and body. Setting it on body alone does nothing here — when html's overflow
   is `visible`, the body's value propagates to the viewport instead of
   clipping the body, so the page still scrolled sideways. */
@supports (overflow-x: clip){
  html{ overflow-x:clip; }
  body{ overflow-x:clip; }
}

/* ── Type. Big, tight, and very few words. ───────────────────────────── */
.display{
  font-weight:700; letter-spacing:-.045em; line-height:.95;
  font-size:clamp(3rem, 9vw, 7.5rem);
  text-wrap:balance;
}
.chapter{
  font-weight:700; letter-spacing:-.035em; line-height:1.02;
  font-size:clamp(2.25rem, 6vw, 4.5rem);
  text-wrap:balance;
}
.lede{
  font-size:clamp(1.05rem, 2vw, 1.5rem); line-height:1.5;
  color:var(--ink-dim); max-width:38ch; text-wrap:pretty;
}
.eyebrow{
  font-size:.75rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
}

/* ── One idea per screen. The room IS the design. ────────────────────── */
.chapter-block{
  min-height:88vh; display:flex; flex-direction:column; justify-content:center;
  padding:7rem 1rem; max-width:1200px; margin-inline:auto;
}
@media (max-width:768px){ .chapter-block{ min-height:auto; padding:4.5rem 1rem; } }

.band{ background:var(--ground-2); border-block:1px solid var(--edge); }

/* ── The product is the hero, so the frame stays quiet. ──────────────── */
.shot{
  width:100%; height:auto; display:block; border-radius:2rem;
  border:1px solid var(--edge);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.shot-phone{ max-width:330px; margin-inline:auto; border-radius:2.75rem; }

/* Reveal on scroll. One gesture, used once per chapter.
   The hidden state is applied ONLY when JS has said it can animate — a page
   whose content is invisible until a script runs is a page that shows nothing
   when the script does not. */
.js-reveal .rise{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.js-reveal .rise.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js-reveal .rise{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ── Specs. A product has specifications; say them plainly. ──────────── */
.spec{ border-top:1px solid var(--edge); }
.spec dt{ color:var(--ink-dim); font-size:.9rem; }
.spec dd{ margin:0; font-weight:600; }

/* ── Layout, written out. No utility framework on this page: the shared
   tailwind.css is a PREBUILT file containing only the classes the older
   pages used, so anything new silently did nothing. ─────────────────── */
.wrap{ max-width:1200px; margin-inline:auto; padding-inline:1rem; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink); }
.brand img{ height:28px; width:28px; }
.brand b{ font-weight:600; letter-spacing:-.01em; }
.brand span{ color:var(--ink-dim); font-weight:400; }

.site-head{ position:sticky; top:0; z-index:50; height:64px;
  background:rgba(5,7,10,.72); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--edge); }
.site-nav{ display:none; gap:2rem; font-size:.9rem; font-weight:500; }
.site-nav a{ color:var(--ink); text-decoration:none; }
.site-nav a:hover{ color:var(--accent); }
@media (min-width:768px){ .site-nav{ display:flex; } }

.btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px;
  padding:.85rem 1.75rem; font-weight:600; text-decoration:none; border:1px solid transparent; }
.btn-light{ background:#fff; color:#000; }
.btn-light:hover{ filter:brightness(.9); }
.btn-accent{ background:var(--accent); color:#000; padding:.5rem 1.25rem; font-size:.9rem; }
.btn-accent:hover{ filter:brightness(1.1); }
.btn-ghost{ border-color:var(--edge); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); }
.btns{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }
.center .btns{ justify-content:center; }

.center{ text-align:center; align-items:center; }
.center .lede{ margin-inline:auto; }
.split{ display:grid; gap:3.5rem; align-items:center; }
@media (min-width:768px){ .split{ grid-template-columns:1fr 1fr; } .split .first{ order:-1; } }

.mt-sm{ margin-top:1.1rem } .mt-md{ margin-top:1.75rem } .mt-lg{ margin-top:3.5rem }
.stage{ margin-top:4rem; width:100% }

.specs{ display:grid; gap:0 4rem; margin:0; }
@media (min-width:768px){ .specs{ grid-template-columns:1fr 1fr; } }
.spec{ border-top:1px solid var(--edge); padding:1.15rem 0;
  display:flex; justify-content:space-between; gap:1.5rem; }

.site-foot{ border-top:1px solid var(--edge); padding:2.5rem 1rem;
  text-align:center; font-size:.875rem; color:var(--ink-dim); }
.site-foot nav{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:center; }
.site-foot a{ color:inherit; text-decoration:none; }
.site-foot a:hover{ color:var(--ink); }
.accent-link{ color:var(--accent); font-weight:600; text-decoration:none; }
.accent-link:hover{ text-decoration:underline; }
.strong{ color:var(--ink); font-weight:600; }

/* ── Two notes, then the plan comparison. ───────────────────────────── */
.notes{ display:grid; gap:2rem; margin-top:4rem; }
@media (min-width:768px){ .notes{ grid-template-columns:1fr 1fr; gap:3.5rem; } }
.note h3{ font-size:1.1rem; font-weight:600; margin:0 0 .6rem; letter-spacing:-.01em; }
.note p{ margin:0; color:var(--ink-dim); line-height:1.6; max-width:46ch; }

.plans-head{ font-size:clamp(1.5rem,3vw,2rem); font-weight:700; letter-spacing:-.025em;
  margin:4.5rem 0 1.5rem; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.plans{ width:100%; border-collapse:collapse; min-width:520px; }
.plans th, .plans td{ text-align:left; padding:1rem .75rem; border-top:1px solid var(--edge);
  font-size:.95rem; }
.plans thead th{ border-top:0; color:var(--ink-dim); font-weight:500; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; }
.plans thead th:not(:first-child), .plans td{ text-align:center; width:7.5rem; }
.plans tbody th{ font-weight:400; color:var(--ink); }
.plans td.y{ color:var(--accent); font-weight:600; }
.plans td.n{ color:#4a535e; }
.plans tbody tr:last-child th, .plans tbody tr:last-child td{ font-weight:600; }
.plans-foot{ margin-top:1.5rem; color:var(--ink-dim); font-size:.9rem; }

/* ── Make the product big. A phone floating small in a dark field reads as
   a slide; a phone that fills the frame reads as the product. ────────── */
.shot-phone{ max-width:420px; }
@media (min-width:1024px){ .shot-phone{ max-width:470px; } }

/* The hero device is the largest thing on the page, and it is lit. */
.hero-stage{ position:relative; margin-top:6rem; }
.hero-stage .shot{ max-width:520px; margin-inline:auto; position:relative; z-index:1; }
.hero-stage::before{
  content:""; position:absolute; inset:-14% -30% 10%;
  background:radial-gradient(60% 50% at 50% 42%,
    rgba(52,211,153,.16) 0%, rgba(56,189,248,.10) 38%, transparent 72%);
  filter:blur(28px); pointer-events:none;
}

/* A quiet glow behind each chapter's device, tinted to that chapter. */
.lit{ position:relative; }
.lit::before{
  content:""; position:absolute; inset:-18% -22%;
  background:radial-gradient(55% 55% at 50% 45%, var(--glow, rgba(52,211,153,.14)) 0%, transparent 70%);
  filter:blur(34px); pointer-events:none;
}
.lit > img{ position:relative; z-index:1; }

/* ── Motion. The hero device rises and settles as the page scrolls, and
   each chapter's device drifts a little against its text. Driven by a
   scroll handler that writes one custom property, so there is one source
   of truth and nothing animates off-screen. ─────────────────────────── */
.parallax{ will-change:transform; transform:translate3d(0, var(--shift, 0px), 0); }
@media (prefers-reduced-motion:reduce){
  .parallax{ transform:none !important; }
}

/* ── The six priorities. ──────────────────────────────────────────────
   Two shapes, because the app has two. Steps 1 and 2 are a sequence, so
   they get a rail that runs from one into the next. Steps 3, 4 and 5 are
   NOT a sequence — they run at once out of the same surplus — so they sit
   on one shared track instead of pointing at each other. Drawing them the
   same way was the mistake; it said "wait your turn" about a mortgage
   that is running the whole time. */
.phase{ max-width:760px; margin:4.5rem auto 0; }
.phase-label{
  margin:0 0 .3rem; padding-left:5.25rem;
  font-size:.75rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
}
.phase-note{
  margin:0 0 2.25rem; padding-left:5.25rem; max-width:56ch;
  color:var(--ink-dim); font-size:.92rem; line-height:1.55;
}
.phase-end{ margin-top:3.5rem; }

.steps{ list-style:none; margin:0; padding:0; position:relative; }
.step{ position:relative; padding:0 0 3.25rem 5.25rem; min-height:4.5rem; }
.step:last-child{ padding-bottom:0; }

/* Sequential rail: one step feeding the next. */
.step-rail{
  position:absolute; left:1.74rem; top:3.4rem; bottom:-.4rem; width:2px;
  background:linear-gradient(to bottom, var(--step), rgba(255,255,255,.06));
  opacity:.45;
}

/* Shared track: three priorities on the same line at the same time. It
   fades out at the foot rather than stopping on an exact pixel, because
   the last step's height depends on how its copy wraps. */
.phase-parallel .steps::before{
  content:""; position:absolute; left:1.74rem; top:1.75rem; bottom:0; width:2px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.20) 0%, rgba(255,255,255,.20) 72%, transparent 100%);
}

.step-node{
  position:absolute; left:0; top:0; width:3.5rem; height:3.5rem;
  display:grid; place-items:center; border-radius:50%;
  color:var(--step);
  /* plain values first: a browser without color-mix keeps a visible node */
  background:var(--ground-2);
  border:1px solid var(--edge);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--step) 18%, transparent) 0%, transparent 70%),
    var(--ground-2);
  border-color:color-mix(in srgb, var(--step) 42%, var(--edge));
  box-shadow:0 0 34px -8px color-mix(in srgb, var(--step) 55%, transparent);
}
.step-node svg{ width:1.6rem; height:1.6rem; }

.step-n{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.2em;
  color:var(--step); opacity:.85; margin-bottom:.4rem;
}
.step h3{
  margin:0 0 .55rem; font-size:clamp(1.25rem,2.4vw,1.75rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.15;
}
.step p{ margin:0; color:var(--ink-dim); line-height:1.6; max-width:52ch; }

/* The destination reads differently from the priorities that lead to it. */
.step-last h3{ font-size:clamp(1.6rem,3.2vw,2.25rem); font-weight:700; }
.step-last p{ color:var(--ink); }

.steps-foot{
  max-width:52ch; margin:4rem auto 0; text-align:center; text-wrap:balance;
  color:var(--ink-dim); font-size:.95rem; line-height:1.6;
}

@media (max-width:560px){
  .step{ padding-left:4.25rem; padding-bottom:2.75rem; }
  .step-node{ width:3rem; height:3rem; }
  .step-node svg{ width:1.35rem; height:1.35rem; }
  .step-rail{ left:1.49rem; top:3rem; }
  .phase-parallel .steps::before{ left:1.49rem; top:1.5rem; }
  .phase-label, .phase-note{ padding-left:4.25rem; }
}

/* Exactly what an alert gives up. A specification, so it reads as one. */

.takes{ list-style:none; margin:2.25rem 0 0; padding:0; display:grid; gap:0; }
.takes li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .75rem;
  padding:.72rem 0; border-top:1px solid var(--edge);
}
.takes li:last-child{ border-bottom:1px solid var(--edge); }
.takes b{ font-weight:600; min-width:8.5rem; }
.takes span{ color:var(--ink-dim); font-size:.92rem; }
.takes-note{
  margin:1.25rem 0 0; color:var(--ink-dim);
  font-size:.92rem; line-height:1.6; max-width:52ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   Beyond the Thrive page.
   thrive.html is image-led and barely has a paragraph in it. Every other
   page on the site is the opposite — legal text, blog posts, support
   answers, an about page. These give that text the same design language
   without pretending it is a product shot.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A smaller opening for a page that is not the flagship. ──────────── */
.page-head{
  max-width:1120px; margin-inline:auto;
  padding:7rem 1.5rem 3rem;
}
.page-head .lede{ max-width:60ch; }
.page-title{
  font-weight:700; letter-spacing:-.035em; line-height:1.05;
  font-size:clamp(2.25rem, 5vw, 3.75rem); text-wrap:balance;
  margin:1rem 0 0;
}

/* ── Long-form text. ─────────────────────────────────────────────────── */
.prose{
  max-width:68ch; margin-inline:auto;
  padding:0 1.5rem 6rem;
  color:var(--ink-dim); font-size:1.0625rem; line-height:1.7;
}
.prose > :first-child{ margin-top:0; }
.prose h2{
  color:var(--ink); font-weight:650; letter-spacing:-.02em;
  font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.25;
  margin:3.25rem 0 1rem; text-wrap:balance;
}
.prose h3{
  color:var(--ink); font-weight:600; letter-spacing:-.015em;
  font-size:1.15rem; margin:2.25rem 0 .75rem;
}
.prose p{ margin:0 0 1.25rem; }
.prose ul, .prose ol{ margin:0 0 1.5rem; padding-left:1.35rem; }
.prose li{ margin:0 0 .6rem; }
.prose li::marker{ color:var(--accent); }
.prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--accent) 60%, transparent); }
.prose a:hover{ text-decoration-color:var(--accent); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose hr{ border:0; border-top:1px solid var(--edge); margin:3rem 0; }
.prose blockquote{
  margin:2rem 0; padding:.25rem 0 .25rem 1.5rem;
  border-left:2px solid var(--accent); color:var(--ink);
}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:var(--ground-2); border:1px solid var(--edge);
  border-radius:.35rem; padding:.1rem .35rem;
}
/* A table in long-form text scrolls on its own rather than the page. */
.prose .table-wrap{ overflow-x:auto; margin:0 0 1.75rem; }
.prose table{ border-collapse:collapse; width:100%; font-size:.95rem; }
.prose th, .prose td{
  text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--edge);
}
.prose th{ color:var(--ink); font-weight:600; }

/* ── Cards, for a page that genuinely lists things. ──────────────────── */
.cards{
  display:grid; gap:1.25rem; max-width:1120px;
  margin:0 auto; padding:0 1.5rem 6rem;
}
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .cards-3{ grid-template-columns:repeat(3,1fr); } }
.card{
  display:block; padding:1.75rem; border-radius:1.1rem;
  background:var(--ground-2); border:1px solid var(--edge);
  color:inherit; text-decoration:none;
  transition:border-color .25s ease, transform .25s ease;
}
a.card:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--edge));
  transform:translateY(-3px); }
.card h3{ margin:0 0 .6rem; font-size:1.15rem; font-weight:600;
  color:var(--ink); letter-spacing:-.015em; }
.card p{ margin:0; color:var(--ink-dim); line-height:1.6; font-size:.95rem; }
.card .eyebrow{ display:block; margin-bottom:.75rem; }

/* ── Footer. ─────────────────────────────────────────────────────────── */
.site-foot{
  border-top:1px solid var(--edge); margin-top:0;
  padding:3rem 1.5rem 4rem; text-align:center;
  color:var(--ink-dim); font-size:.9rem;
}
.site-foot nav{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  justify-content:center; margin-bottom:.5rem;
}
.site-foot a{ color:var(--ink-dim); text-decoration:none; }
.site-foot a:hover{ color:var(--ink); }

/* Keyboard focus has to be visible on every interactive thing. */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:.35rem;
}

/* ── Navigation on a phone. ───────────────────────────────────────────
   .site-nav is hidden below 768px. That was fine when this design lived
   on one landing page, but as the site-wide header it would leave a phone
   with no way to reach any other page. This is a <details> disclosure, so
   it opens and closes with no JavaScript at all. */
.menu{ display:block; position:relative; }
@media (min-width:768px){ .menu{ display:none; } }
.menu > summary{
  list-style:none; cursor:pointer; display:grid; place-items:center;
  width:40px; height:40px; border-radius:.6rem;
  border:1px solid var(--edge); color:var(--ink);
}
.menu > summary::-webkit-details-marker{ display:none; }
.menu > summary svg{ width:18px; height:18px; }
.menu[open] > summary{ border-color:var(--accent); }
.menu-panel{
  position:absolute; right:0; top:calc(100% + .6rem); z-index:60;
  min-width:13rem; padding:.5rem;
  display:flex; flex-direction:column;
  background:var(--ground-2); border:1px solid var(--edge);
  border-radius:.9rem; box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
}
.menu-panel a{
  padding:.65rem .8rem; border-radius:.55rem;
  color:var(--ink); text-decoration:none; font-size:.95rem;
}
.menu-panel a:hover{ background:rgba(255,255,255,.05); }
.menu-panel a.here{ color:var(--accent); }
.menu-panel hr{ border:0; border-top:1px solid var(--edge); margin:.4rem .4rem; }

/* The page you are on, in either navigation. */
.site-nav a.here{ color:var(--accent); }

/* The header sits above the page; a section anchored to it needs clearance. */
:target{ scroll-margin-top:84px; }

/* ── Sign-up form. The action posts to Buttondown; the markup around it is
   ours, the endpoint and field names are not and must not change. ────── */
.signup{ display:flex; flex-wrap:wrap; gap:.75rem; max-width:30rem;
  margin:2.25rem auto 0; }
.signup input{
  flex:1 1 14rem; min-width:0;
  background:var(--ground-2); border:1px solid var(--edge); color:var(--ink);
  border-radius:999px; padding:.85rem 1.4rem; font:inherit; font-size:.95rem;
  outline:none;
}
.signup input::placeholder{ color:var(--ink-dim); }
.signup input:focus{ border-color:var(--accent); }
.signup button{
  border:0; cursor:pointer; font:inherit; font-weight:600;
  background:var(--accent); color:#000;
  border-radius:999px; padding:.85rem 1.75rem; white-space:nowrap;
}
.signup button:hover{ filter:brightness(1.1); }
.fineprint{ margin-top:1.25rem; color:var(--ink-dim); font-size:.85rem; }