/* ==========================================================================
   TuneBit — marketing + licensing site
   Brand palette carried over from the original site; layout rebuilt around
   the component classes used by lib/views.php.
   ========================================================================== */

:root {
  --navy:        #1B3A5C;
  --navy-dark:   #0F2439;
  --navy-deeper: #091828;
  --navy-light:  #234A72;
  /* The text and button colours below are pinned to WCAG AA (4.5:1) against
     the surface they actually sit on, checked rather than eyeballed. The old
     values looked right but measured 2.87:1 for white on --green, which is
     the buy button. Hue and saturation are unchanged; only lightness moved. */
  --blue:        #2975A9;  /* links, eyebrows: 4.51:1 even on --bg-alt */
  --blue-light:  #5DADE2;  /* decorative borders only, never text */
  --orange:      #E74C3C;  /* rule and bullet glyphs only, never text */
  --green:       #1E874B;  /* button fill: 4.54:1 against white label */
  --green-dark:  #1B7943;  /* its hover, and .field-ok text: 5.44:1 */
  --green-light: #2ECC71;  /* only on navy, where it measures 5.53:1 */

  --text:      #1a1a2e;
  --text-2:    #4a5568;
  --muted:     #637086;  /* small print: 4.53:1 even on --bg-alt */
  --bg:        #FAFBFD;
  --bg-alt:    #F0F4F8;
  --white:     #ffffff;
  --border:    #E2E8F0;
  --border-lt: #EDF2F7;

  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font:         'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 3px rgba(27,58,92,.06), 0 1px 2px rgba(27,58,92,.04);
  --shadow:    0 4px 12px rgba(27,58,92,.08), 0 2px 4px rgba(27,58,92,.04);
  --shadow-lg: 0 12px 40px rgba(27,58,92,.12), 0 4px 12px rgba(27,58,92,.06);

  --container: 1140px;
  --nav-h:     72px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { border: none; background: none; font: inherit; cursor: pointer; color: inherit; }
strong { font-weight: 600; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -0.02em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 780px; }
.container--mid { max-width: 960px; }

.muted { color: var(--muted); }
.small { font-size: 0.88rem; }
.center { text-align: center; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* --- Navigation --------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-lt);
}
.nav__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav__logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.28rem;
  color: var(--navy); letter-spacing: -0.03em;
}
.nav__logo:hover { text-decoration: none; }
.nav__logo-img { width: 34px; height: 34px; object-fit: contain; }
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__link {
  padding: 8px 14px; border-radius: 100px;
  font-size: 0.94rem; font-weight: 500; color: var(--text-2);
  transition: background .15s, color .15s;
}
.nav__link:hover { background: var(--bg-alt); color: var(--navy); text-decoration: none; }
.nav__link--active { color: var(--navy); font-weight: 600; }
.nav__cta {
  margin-left: 6px; padding: 10px 22px; border-radius: 100px;
  background: var(--green); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.94rem;
  transition: background .15s, transform .15s;
}
.nav__cta:hover { background: var(--green-dark); transform: translateY(-1px); text-decoration: none; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: .2s; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block; padding: 12px 28px; border-radius: 100px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  text-align: center; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--green); color: #fff; box-shadow: 0 4px 14px rgba(39,174,96,.28); }
.btn--primary:hover { background: var(--green-dark); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-dark); }
.btn--ghost { background: var(--bg-alt); color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--border-lt); }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline:hover { background: rgba(255,255,255,.12); }
.btn--danger { background: #fdecea; color: #c0392b; border-color: #f5b7b1; }
.btn--danger:hover { background: #fadbd8; }
.btn--lg { padding: 15px 36px; font-size: 1.03rem; }
.btn--sm { padding: 7px 16px; font-size: 0.85rem; }
.btn--block { display: block; width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--navy-deeper) 0%, var(--navy) 55%, var(--navy-light) 100%);
  color: #fff; padding: 90px 0 100px;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(46,134,193,.35), transparent 45%),
    radial-gradient(circle at 12% 88%, rgba(39,174,96,.22), transparent 42%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero__eyebrow {
  display: inline-block; margin-bottom: 18px; padding: 6px 15px; border-radius: 100px;
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.2);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase;
}
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); font-weight: 900; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--green-light); }
.hero__lead { font-size: 1.14rem; color: rgba(255,255,255,.84); max-width: 34em; margin-bottom: 30px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__note { margin-top: 20px; font-size: 0.88rem; color: rgba(255,255,255,.62); }
.hero__art {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-xl); padding: 26px; backdrop-filter: blur(8px);
}
.hero__art img { border-radius: var(--radius-lg); }

/* --- Sections ----------------------------------------------------------- */

.section { padding: 84px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--navy-dark); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,.76); }

.section__head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section__eyebrow {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue);
}
.section__head h1, .section__head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; margin-bottom: 14px; }
.section__head p { color: var(--text-2); font-size: 1.06rem; }

/* --- Cards & grids ------------------------------------------------------ */

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--border-lt);
  border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: 2.4rem;
}
.card h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: .6rem; }
.card h2 { font-size: 1.2rem; font-weight: 700; margin: 1.8rem 0 .8rem; }
/* Opens a card that is its own section of the page. An h2 keeps one h1 per
   document, but it needs the old h1 sizing back: no top margin, because the
   card padding already provides that space. */
.card .card__title { font-size: 1.35rem; font-weight: 800; margin: 0 0 .6rem; }
.card .lead { color: var(--text-2); margin-bottom: 1.6rem; }
.card--success { text-align: center; }
.card + .card { margin-top: 24px; }
/* Inside a grid the gap does the spacing, and the stacking margin would push
   every card after the first one out of line with its row. */
.grid > .card + .card { margin-top: 0; }

.feature {
  background: var(--white); border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.feature__tag {
  display: inline-block; margin-bottom: 12px; padding: 4px 11px; border-radius: 100px;
  background: var(--bg-alt); color: var(--blue);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
}
.feature h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.feature p { color: var(--text-2); font-size: .94rem; }

.shell { padding: 56px 0 84px; min-height: 60vh; }

/* --- Pricing ------------------------------------------------------------ */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
.plan {
  position: relative; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 32px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.plan--featured {
  border-color: var(--green); box-shadow: var(--shadow-lg);
  transform: scale(1.03);
}
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #fff; padding: 5px 17px; border-radius: 100px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.plan h3 { font-size: 1.32rem; font-weight: 800; margin-bottom: 4px; }
.plan__tagline { color: var(--muted); font-size: .9rem; margin-bottom: 20px; }
.plan__price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }
.plan__amount { font-family: var(--font-display); font-size: 2.7rem; font-weight: 900; letter-spacing: -.04em; }
.plan__unit { color: var(--muted); font-size: .92rem; }

/* --- Sales -------------------------------------------------------------- */

/* The superseded price. Muted and a size down so the figure that is actually
   being charged stays the one the eye lands on -- a struck price set at the
   same weight as the real one reads as two prices rather than as a saving. */
.plan__was {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--muted); text-decoration-thickness: 2px;
}
.plan__save {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark);
}

/* The sale strip across the top of every page -- see tb_sale_strip(). Full
   bleed and above the sticky nav, in normal flow: it scrolls away and never
   changes --nav-h, which anchors and the mobile menu measure from. */
.sale-bar {
  background: linear-gradient(90deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fff; font-size: .92rem; text-align: center;
}
.sale-bar__inner {
  max-width: var(--container); margin: 0 auto; padding: 9px 24px;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.sale-bar__text { margin: 0; color: rgba(255,255,255,.92); }
.sale-bar__text strong { color: #fff; font-weight: 700; }
.sale-bar__when {
  flex: none; padding: 2px 11px; border-radius: 100px;
  background: rgba(255,255,255,.18); color: #fff;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.sale-bar__link {
  color: #fff; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); white-space: nowrap;
}
.sale-bar__link:hover { text-decoration-color: #fff; }

/* Checkout: the struck unit price, and the band naming the sale. */
.price-was { color: var(--muted); font-weight: 400; margin-right: 6px; }
.order__line--sale { background: #f2faf5; }
.order__note--muted { color: var(--muted); }
.plan__desc { color: var(--text-2); font-size: .94rem; margin: 14px 0 22px; }
.plan__list { margin-bottom: 26px; flex: 1; }
.plan__list li { position: relative; padding: 7px 0 7px 27px; font-size: .93rem; color: var(--text-2); }
.plan__list li::before {
  content: '\2713'; position: absolute; left: 0; top: 7px;
  color: var(--green); font-weight: 700;
}

/* --- Order summary (checkout) ------------------------------------------- */

.order { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.6rem; }
.order__line {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px; border-bottom: 1px solid var(--border-lt); flex-wrap: wrap;
}
.order__line label {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.order__name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; }
.order__meta { color: var(--muted); font-size: .87rem; }
.order__price { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.order__totals { padding: 18px 22px; background: var(--bg-alt); }
.order__row { display: flex; justify-content: space-between; gap: 18px; padding: 5px 0; font-size: .95rem; color: var(--text-2); }
.order__row--discount { color: var(--green); font-weight: 600; }
.order__row--total {
  margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border);
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 800; color: var(--text);
}
.qty { width: 92px; text-align: center; }
.qty-row { display: flex; align-items: center; gap: 9px; }

/* What the chosen quantity covers. Sits between the quantity row and the coupon
   row as a full-width band, so it reads as a consequence of the number above
   rather than as another field. */
.order__note {
  margin: 0; padding: 13px 22px;
  border-bottom: 1px solid var(--border-lt);
  background: var(--bg-alt);
  font-size: .89rem; line-height: 1.55; color: var(--text-2);
}

/* The same sentence on the success page, where there is no order block to sit
   inside -- it follows the stat row and inherits the card's centring. */
.coverage-line {
  margin: -.6rem 0 1.5rem; color: var(--text-2);
  font-size: .93rem; line-height: 1.6;
}

.coupon-row { display: flex; gap: 9px; flex: 1; min-width: 240px; }
.coupon-row input { flex: 1; text-transform: uppercase; }
.pay-note { margin-top: 1.2rem; }

/* --- Forms -------------------------------------------------------------- */

.form .field { margin-bottom: 1.15rem; }
.form label {
  display: block; margin-bottom: .4rem;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.form input[type=text], .form input[type=email], .form input[type=password],
.form input[type=number], .form input[type=date], .form input[type=url],
.form textarea, .form select, .order input, .filter input, .filter select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .94rem;
  background: #f7f9fc; color: var(--text);
}
.form textarea { min-height: 130px; resize: vertical; font-family: var(--font); }
.form input:focus, .form textarea:focus, .form select:focus, .order input:focus {
  outline: none; border-color: var(--green); background: var(--white);
  box-shadow: 0 0 0 3px rgba(39,174,96,.12);
}
.form__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 1.4rem; }
.form__hint { color: var(--muted); font-size: .85rem; margin-top: .35rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-error { color: #c0392b; font-size: .87rem; margin-top: .4rem; }
.field-ok { color: var(--green-dark); font-size: .87rem; margin-top: .4rem; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; }
.checkbox input { width: auto; margin-top: 4px; }
.checkbox label { text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: .93rem; color: var(--text-2); }

/* reCAPTCHA v3's floating badge sits over the bottom-right corner of the page.
   Google's branding terms allow hiding it as long as the attribution appears
   next to the form instead, which is what .recaptcha-notice is — so these two
   rules go together, and removing one means removing the other. */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-notice { margin-top: 1.3rem; font-size: .82rem; }
.recaptcha-notice a { color: var(--muted); text-decoration: underline; }

/* --- Alerts & notices --------------------------------------------------- */

.alert { padding: 13px 17px; border-radius: var(--radius); margin-bottom: 1.3rem; font-size: .94rem; border: 1px solid; }
.alert--error   { color: #c0392b; background: #fdecea; border-color: #f5b7b1; }
.alert--success { color: #1e7e34; background: #d4edda; border-color: #b6e2c1; }
.alert--info    { color: #1b4f72; background: #e8f2fb; border-color: #b8d8f0; }
.alert code { font-family: var(--font-mono); background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 4px; }

.notice { padding: 15px 19px; border-radius: var(--radius); margin-bottom: 1.3rem; font-size: .93rem; border: 1px solid; }
.notice--good { background: #e8f5ed; border-color: #a9dfbf; color: #1e6e3e; }
.notice--warn { background: #fff8e1; border-color: #f5d98b; color: #8a6116; }

/* --- Tables ------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 13px 10px; text-align: left; border-bottom: 1px solid var(--border-lt); font-size: .92rem; vertical-align: middle; }
.table th {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.table tbody tr:hover { background: var(--bg); }
.table__wrap { overflow-x: auto; }
.table__empty { padding: 40px 10px; text-align: center; color: var(--muted); }

.pill { display: inline-block; padding: 3px 11px; border-radius: 100px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.pill--ok      { background: #d4edda; color: #1e7e34; }
.pill--pending { background: #fff3cd; color: #856404; }
.pill--bad     { background: #fdecea; color: #c0392b; }
.pill--muted   { background: var(--bg-alt); color: var(--muted); }

/* --- Stats -------------------------------------------------------------- */

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 1.2rem 0 1.7rem; }
.stat { flex: 1; min-width: 145px; padding: 15px 19px; background: var(--bg-alt); border-radius: var(--radius); }
.stat__label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stat__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; margin-top: 3px; }
.stat__value--sm { font-size: 1.05rem; }

.success-mark {
  width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 50%;
  background: #d4edda; color: #1e7e34;
  display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700;
}

/* --- Code blocks & copy ------------------------------------------------- */

/* js/main.js makes every .code-block click-to-copy. Without a cursor, a hover
   and an obvious "copied" state it reads as inert text, and the customer with
   a 450-character license code on screen tries to select it by hand instead --
   which is where a half-copied code and a support ticket come from. */
.code-block {
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.7;
  background: #f5f7fa; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px; word-break: break-all; margin-bottom: 10px; text-align: left;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.code-block:hover { background: #eef3fb; border-color: var(--blue-light); }
.code-block[data-copied] { background: #d4edda; border-color: #1e7e34; }

/* The button that says out loud what clicking the block above does. Paired
   with a .code-block, it carries the same text in data-copy. */
.copy-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; font-weight: 600; color: var(--green-dark);
  background: var(--white); border: 1.5px solid var(--green);
  border-radius: var(--radius); padding: 9px 16px; transition: background .15s, color .15s;
}
.copy-btn:hover { background: var(--green); color: #fff; }
.copy-btn[data-copied] { background: var(--green); color: #fff; border-color: var(--green); }
.copy-btn__done { display: none; }
.copy-btn[data-copied] .copy-btn__label { display: none; }
.copy-btn[data-copied] .copy-btn__done { display: inline; }

.copy {
  font-family: var(--font-mono); font-size: .78rem; cursor: pointer;
  padding: 2px 7px; border-radius: 4px; background: var(--bg-alt); transition: background .15s;
}
.copy:hover { background: #e8f0fe; }
.copy[data-copied] { background: #d4edda; color: #1e7e34; }
.copy[data-copied]::after { content: ' \2713'; }

/* --- FAQ / accordion ---------------------------------------------------- */

.faq { border-top: 1px solid var(--border-lt); }
.faq__item { border-bottom: 1px solid var(--border-lt); }
.faq__q {
  padding: 20px 40px 20px 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1.04rem;
}
.faq__q::after {
  content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--blue); font-weight: 400;
}
.faq__item[open] .faq__q::after { content: '\2212'; }
.faq__a { padding: 0 40px 22px 0; color: var(--text-2); }
.faq__a p + p { margin-top: 12px; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* --- Prose (legal pages) ------------------------------------------------ */

.prose h2 { font-size: 1.3rem; font-weight: 700; margin: 2rem 0 .7rem; }
.prose h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.prose p, .prose li { color: var(--text-2); margin-bottom: .85rem; }
.prose ul, .prose ol { margin: 0 0 1rem 1.3rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose .updated { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); margin-bottom: 2rem; }

/* --- Admin -------------------------------------------------------------- */

.admin-bar { background: var(--navy-dark); color: #fff; padding: 12px 0; }
.admin-bar__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.admin-bar__title { font-family: var(--font-display); font-weight: 800; margin-right: 14px; }
.admin-bar a { color: rgba(255,255,255,.76); padding: 6px 13px; border-radius: 100px; font-size: .9rem; }
.admin-bar a:hover, .admin-bar a.is-active { background: rgba(255,255,255,.13); color: #fff; text-decoration: none; }

.filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 1.4rem; }
.filter input, .filter select { width: auto; min-width: 190px; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 2rem; }
.kpi { background: var(--white); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.kpi__label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi__value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; margin-top: 5px; }
.kpi__sub { font-size: .82rem; color: var(--muted); }

/* --- Footer ------------------------------------------------------------- */

.footer { background: var(--navy-deeper); color: rgba(255,255,255,.72); padding: 62px 0 26px; margin-top: 60px; }
/* The margin is breathing room for the form-and-table pages, which end flush
   against their last card. The section-built pages already end in 84px of
   section padding, and there the margin only showed as a band of page
   background above the footer -- glaringly so on the home page, whose last
   section is dark. Sibling rather than adjacent-sibling: the screenshots page
   puts its lightbox between the two. */
main:has(> .section:last-child) ~ .footer { margin-top: 0; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 42px; }
.footer__brand img { margin-bottom: 14px; }
.footer__tag { font-size: .92rem; max-width: 30em; }
/* Sits under the brand blurb, so it reads as "this is us" rather than as a
   fifth link column. Empty and unrendered until a network is set in .env. */
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footer__social a {
  padding: 5px 13px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.16);
  font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.72);
  transition: background .15s, color .15s, border-color .15s;
}
.footer__social a:hover {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.34);
  color: #fff; text-decoration: none;
}
.footer__col h4 {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px;
}
.footer__col a { display: block; padding: 5px 0; color: rgba(255,255,255,.72); font-size: .93rem; }
.footer__col a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; }
.footer__copy { font-size: .84rem; color: rgba(255,255,255,.45); }

/* --- Home page: trust strip --------------------------------------------- */

.strip { background: var(--white); border-bottom: 1px solid var(--border-lt); padding: 26px 0; }
.strip__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.strip__item { display: flex; flex-direction: column; gap: 2px; }
.strip__item + .strip__item { border-left: 1px solid var(--border-lt); }
.strip__item strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--navy); }
.strip__item span { font-size: .88rem; color: var(--muted); }

/* --- Home page: numbered steps ------------------------------------------ */

/* list-style is reset globally for ul but not ol — these carry their own numbers. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; }
.step {
  position: relative; background: var(--white); border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 30px 26px 26px;
}
.step__n {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 16px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
}
.step h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.step p { color: var(--text-2); font-size: .94rem; }

/* --- Home page: competitor comparison ----------------------------------- */

.table--compare { min-width: 720px; }
.table--compare th[scope="row"] {
  white-space: normal; text-transform: none; letter-spacing: 0;
  font-family: var(--font); font-size: .93rem; font-weight: 600; color: var(--text);
  width: 34%; padding-right: 18px;
}
.table--compare td { text-align: center; }
.table--compare td.nowrap { white-space: nowrap; }
.table--compare thead th:not(:first-child) { text-align: center; white-space: normal; }
/* Our own column and rows get a tint. Set it on the cells, not the row, so it
   survives the .table row-hover rule. */
.table--compare th.is-us, .table--compare td.is-us,
.table--compare tbody tr.is-us > * { background: rgba(39,174,96,.07); }
.table--compare thead th.is-us { color: var(--green-dark); }

.cmp { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.3; }
.cmp__mark { font-size: 1.05rem; font-weight: 700; }
.cmp__note { font-size: .74rem; color: var(--muted); }
.cmp--yes  .cmp__mark { color: var(--green); }
.cmp--part .cmp__mark { color: #d8a33a; font-size: .8rem; }
.cmp--no   .cmp__mark { color: var(--border); }

.compare__sub {
  margin: 46px 0 18px; text-align: center;
  font-size: 1.3rem; font-weight: 700; color: var(--navy);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Screenshots page --------------------------------------------------- */

.shots__toolbar {
  display: flex; justify-content: center; gap: 6px;
  margin: -22px auto 22px; padding: 5px;
  width: max-content; border-radius: 100px;
  background: var(--bg-alt); border: 1px solid var(--border);
}
.shots__theme {
  padding: 7px 22px; border-radius: 100px;
  font-size: .9rem; font-weight: 600; color: var(--text-2);
  transition: background .16s, color .16s;
}
.shots__theme:hover { color: var(--text); }
.shots__theme.is-active { background: var(--white); color: var(--navy); box-shadow: var(--shadow-sm); }

.shots__jump {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
}
.shots__jump a {
  padding: 5px 14px; border-radius: 100px;
  background: var(--white); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 600; color: var(--text-2);
}
.shots__jump a:hover { color: var(--blue); border-color: var(--blue-light); text-decoration: none; }

.shots__group {
  margin-bottom: 26px; font-size: 1.35rem; font-weight: 700; color: var(--navy);
}

/* A track count from the width rather than a fixed number: these are 4:3 and
   want to stay big enough to read the window chrome in. auto-fill, not
   auto-fit -- auto-fit collapses the tracks a short group does not fill, so
   the one-shot TuneBit group stretched its capture to the full 1092px (past
   its own 1024px width) and the two-shot groups to 532px, while the seven-shot
   groups sat at 345px. auto-fill keeps every card the same size down the page. */
.shots__grid {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.shot {
  background: var(--white); border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.shot__frame { display: block; background: var(--navy-deeper); cursor: zoom-in; }
.shot__frame img { width: 100%; height: auto; }
.shot__caption { padding: 18px 20px 22px; }
.shot__caption h4 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.shot__caption p { color: var(--text-2); font-size: .88rem; line-height: 1.5; }

.shots__lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 32px; cursor: zoom-out;
  background: rgba(9,24,40,.88); backdrop-filter: blur(4px);
}
.shots__lightbox[hidden] { display: none; }
.shots__lightbox img {
  max-width: min(1024px, 100%); max-height: 82vh; width: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.shots__lightbox figcaption {
  margin-top: 14px; text-align: center; color: rgba(255,255,255,.82); font-size: .92rem;
}
.shots__close {
  position: absolute; top: 18px; right: 24px;
  font-size: 2rem; line-height: 1; color: rgba(255,255,255,.7);
}
.shots__close:hover { color: #fff; }

/* --- Download page: annotated Windows dialogs --------------------------- */

/* The figures are SVG diagrams of the two prompts Windows shows, drawn rather
   than captured -- the UAC prompt renders on the secure desktop and cannot be
   screenshotted at all. The green markers in the SVG are numbered to match the
   .howto list that follows each figure, so the two must be edited together. */
.dialogs {
  display: grid; gap: 20px; margin: 1.3rem 0 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.dialog-fig {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 16px 0;
}
.dialog-fig img { width: 100%; height: auto; }
.dialog-fig figcaption {
  padding: 4px 4px 14px; text-align: center;
  font-size: .82rem; color: var(--muted);
}

/* Numbered instructions keyed to the markers on the figure above. Not .steps —
   that is the home page's three-across card grid. */
/* list-style is reset globally for ul but not ol, and these carry their own. */
.howto { counter-reset: howto; list-style: none; margin: 0 0 1.5rem; }
.howto li {
  counter-increment: howto; position: relative;
  padding-left: 42px; min-height: 28px; margin-bottom: 13px;
  color: var(--text-2);
}
.howto li::before {
  content: counter(howto);
  position: absolute; left: 0; top: 1px;
  display: flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .85rem;
}
.howto strong { color: var(--text); }

/* --- Activation guide: annotated real screenshots ----------------------- */

/* Unlike the drawn dialogs above, these are the actual captures from
   /screenshots/, cropped and marked up in CSS rather than in an image editor:
   re-capturing the app replaces the picture and the markers stay put.
   tb_shot() in activate.php works in the capture's own pixel coordinates and
   emits these custom properties -- --fw/--fh are the full capture, --cx/--cy
   and --cw/--ch the crop window, and each pin is a percentage of that window.
   The pin numbers are keyed to the .howto list under each figure. */
.shotfig { margin: 1.3rem 0 1.7rem; }
.shotfig__crop {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--cw) / var(--ch);
  background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.shotfig__crop img {
  position: absolute; max-width: none;
  /* height:auto is load-bearing, not tidiness: the width/height attributes on
     the tag are a presentational hint, so overriding only the width leaves the
     height pinned at the attribute and the capture renders squashed -- which
     slides every marker off the control it points at. */
  width: calc(var(--fw) / var(--cw) * 100%); height: auto;
  left: calc(var(--cx) / var(--cw) * -100%);
  top: calc(var(--cy) / var(--ch) * -100%);
}
.shotfig__pin {
  position: absolute;
  border: 2px solid var(--green); border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.65);
}
/* The badge hangs outside the ring, so which side it sits on is chosen per
   pin -- one against the right edge of the capture would be clipped away. */
.shotfig__pin span {
  position: absolute; top: 50%; right: 0; transform: translate(50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .74rem; line-height: 1;
}
.shotfig__pin--left span  { right: auto; left: 0; transform: translate(-50%, -50%); }
.shotfig__pin--above span { top: 0; right: 50%; transform: translate(50%, -50%); }
.shotfig__pin--below span { top: auto; bottom: 0; right: 50%; transform: translate(50%, 50%); }
.shotfig figcaption {
  padding: 10px 4px 0; text-align: center;
  font-size: .82rem; color: var(--muted);
}

/* "Stop if you see this" — the counterpart to the reassurance above it. */
.redflag { border-left: 3px solid var(--orange); padding-left: 16px; margin: 1.4rem 0; }
.redflag h4 { font-size: .98rem; font-weight: 700; margin-bottom: 6px; }
.redflag ul li { color: var(--text-2); font-size: .93rem; margin-bottom: 5px; padding-left: 16px; position: relative; }
.redflag ul li::before { content: '\2022'; position: absolute; left: 0; color: var(--orange); }

/* --- The simple page ----------------------------------------------------
   /simple.php is the same product sold to a different person: somebody who
   does not want to read a comparison table and will not be persuaded by a
   tool count. Everything below exists to make that page bigger, calmer and
   slower than the rest of the site -- larger type, shorter lines, fewer
   things per screen, one decision at a time.

   It is all scoped under .simple so that raising the base font size here
   cannot leak into a page that was measured at the current one. The palette
   and the component vocabulary belong to the rest of the site; only the
   scale changes. */

.simple { font-size: 1.16rem; }
.simple p { line-height: 1.75; }

/* Line length is the single biggest readability lever for an older reader, so
   the body copy is capped well short of the container it sits in. */
.simple .section__head p,
.simple .simple-lede { max-width: 30em; margin-left: auto; margin-right: auto; }

.simple .section__head h1,
.simple .section__head h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
.simple .section__head p  { font-size: 1.22rem; color: var(--text-2); }
.simple .section { padding: 92px 0; }

/* Three colours that are correct on a light background and unreadable on a
   dark one. Nothing on the site put a section head, an eyebrow or a link on a
   .section--dark band until this page did, so the clashes only surfaced here.
   Measured against --navy-dark rather than eyeballed:

     --text-2 #4a5568   1.9:1   the lede under a heading -- the worst of them
     --blue   #2975A9   3.1:1   the eyebrow, and any link in the copy
     --green-light      5.5:1   passes, and is already the accent on navy

   Scoped to .section--dark rather than to .simple, because a light-background
   colour on a dark band is wrong wherever it happens next. */
.section--dark .section__eyebrow { color: var(--green-light); }
.section--dark .section__head p  { color: rgba(255,255,255,.82); }
.section--dark p a,
.section--dark li a { color: var(--green-light); }

/* A button somebody with arthritis or an unsteady hand can hit: 62px tall
   against the 48px of .btn--lg, and never narrower than a thumb. */
.btn--xl {
  padding: 21px 46px; font-size: 1.2rem; font-weight: 700;
  border-radius: 14px; min-height: 62px;
}

/* --- Hero ---------------------------------------------------------------- */

.simple-hero { background: var(--navy-dark); color: #fff; padding: 96px 0 88px; text-align: center; }
.simple-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900;
  margin-bottom: 22px; color: #fff;
}
.simple-hero h1 em { font-style: normal; color: var(--green-light); }
.simple-hero .simple-lede { font-size: 1.32rem; color: rgba(255,255,255,.88); margin-bottom: 34px; }
.simple-hero .hero__actions { justify-content: center; }
.simple-hero__note { margin-top: 26px; font-size: 1rem; color: rgba(255,255,255,.68); }

/* --- The screenshot the whole page is built around ----------------------- */

.simple-shot {
  max-width: 760px; margin: 0 auto; background: var(--navy-deeper);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.simple-shot img { width: 100%; height: auto; }
.simple-shot figcaption {
  padding: 16px 22px; text-align: center;
  font-size: .98rem; color: rgba(255,255,255,.74); background: var(--navy-deeper);
}

/* --- Plain-language lists ------------------------------------------------ */

/* Ticks rather than bullets: every line is a thing TuneBit does for you. The
   mark carries no meaning a screen reader needs, so it is decorative. */
.simple-list { max-width: 34em; margin: 0 auto; }
.simple-list li {
  position: relative; padding: 13px 0 13px 44px;
  font-size: 1.14rem; color: var(--text-2); line-height: 1.65;
}
.simple-list li + li { border-top: 1px solid var(--border-lt); }
.simple-list li::before {
  content: '\2713'; position: absolute; left: 6px; top: 13px;
  color: var(--green); font-size: 1.3rem; font-weight: 700; line-height: 1.4;
}
.simple-list strong { color: var(--text); font-weight: 700; }

/* --- Three steps, one per row rather than three across ------------------- */

/* .steps on the home page is a 3-up grid of short cards. Here the same three
   ideas are stacked and given room, because a row of three equal cards reads
   as "three things to choose between" rather than "do this, then this". */
.simple-steps { max-width: 720px; margin: 0 auto; list-style: none; }
.simple-step {
  display: grid; grid-template-columns: 76px 1fr; gap: 26px; align-items: start;
  padding: 30px 0;
}
.simple-step + .simple-step { border-top: 1px solid var(--border); }
.simple-step__n {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 900;
}
.simple-step h3 { font-size: 1.45rem; font-weight: 800; margin-bottom: 8px; }
.simple-step p { color: var(--text-2); font-size: 1.12rem; }

/* --- The two-card cost comparison ---------------------------------------- */

.simple-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.simple-vs__card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px 32px;
}
.simple-vs__card--us { border: 2px solid var(--green); background: #f4faf6; }
.simple-vs__label {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px;
}
.simple-vs__card--us .simple-vs__label { color: var(--green-dark); }
.simple-vs__price {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 900;
  letter-spacing: -.03em; line-height: 1.1; margin-bottom: 4px;
}
.simple-vs__per { color: var(--muted); font-size: 1rem; margin-bottom: 20px; }
.simple-vs__card ul li {
  padding: 9px 0 9px 26px; position: relative;
  color: var(--text-2); font-size: 1.04rem; line-height: 1.6;
}
.simple-vs__card ul li::before {
  content: '\2022'; position: absolute; left: 6px; color: var(--border);
  font-size: 1.3rem; line-height: 1.35;
}
.simple-vs__card--us ul li::before { color: var(--green); }

/* --- Worries, asked in the words the reader would use -------------------- */

.simple-worries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.simple-worry {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 30px;
}
.simple-worry h3 { font-size: 1.24rem; font-weight: 800; margin-bottom: 10px; color: var(--navy); }
.simple-worry p { color: var(--text-2); font-size: 1.08rem; }
.simple-worry__no {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--font-display); font-weight: 900; font-size: 1.5rem;
  color: var(--green-dark);
}

/* --- The scam section ---------------------------------------------------- */

/* Crosses, not ticks: every line is a thing that will never happen, and the
   list would be dangerously easy to skim as a feature list otherwise. The
   coral is only ever the glyph, never text -- it does not reach AA as type. */
.simple-never { max-width: 34em; margin: 0 auto; text-align: left; }
.simple-never li {
  position: relative; padding: 15px 0 15px 46px;
  font-size: 1.14rem; color: rgba(255,255,255,.86); line-height: 1.65;
}
.simple-never li + li { border-top: 1px solid rgba(255,255,255,.12); }
.simple-never li::before {
  content: '\2715'; position: absolute; left: 8px; top: 15px;
  color: #FF8A7A; font-size: 1.2rem; font-weight: 700; line-height: 1.5;
}
.simple-never strong { color: #fff; }

/* --- The doorway between the two versions of the site -------------------- */

/* Sits on both pages and points at the other one. Deliberately quiet on
   /simple.php and prominent on the home page, where it has to catch somebody
   who is about to bounce off a fifteen-row comparison table. */
.doorway {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-width: 900px; margin: 0 auto;
}
.doorway__card {
  display: block; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 30px; color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.doorway__card:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--shadow-lg); border-color: var(--green);
}
.doorway__card--lead { border: 2px solid var(--green); background: #f4faf6; }
.doorway__who {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 9px;
}
.doorway__card h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; color: var(--navy); }
.doorway__card p { color: var(--text-2); font-size: 1rem; margin-bottom: 14px; }
.doorway__go { color: var(--green-dark); font-weight: 700; font-size: 1rem; }
.doorway__card:hover .doorway__go { text-decoration: underline; }

/* The same pair on a dark band, where white cards would glare. */
.section--dark .doorway__card {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22);
}
.section--dark .doorway__card--lead { border-color: var(--green-light); background: rgba(46,204,113,.12); }
.section--dark .doorway__card h3 { color: #fff; }
.section--dark .doorway__card p  { color: rgba(255,255,255,.78); }
.section--dark .doorway__who { color: rgba(255,255,255,.6); }
.section--dark .doorway__go  { color: var(--green-light); }

/* --- Buying it on somebody else behalf ----------------------------------- */

.simple-gift {
  max-width: 780px; margin: 0 auto; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 38px 40px;
}
.simple-gift h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 12px; }
.simple-gift p { color: var(--text-2); font-size: 1.08rem; margin-bottom: 1rem; }
.simple-gift .howto li { font-size: 1.08rem; }

/* The site-wide small print is 0.88rem, which is defensible on a page whose
   body text is 1rem and indefensible on one written for somebody who is
   holding the screen at arm's length. Nothing on this page drops below 1rem. */
.simple .small { font-size: 1rem; }

/* --- The closing price block --------------------------------------------- */

/* Every line in this block is centred, so without a cap the sentences run the
   full 960px of the container and the eye loses the start of the next line. */
.simple-buy p { max-width: 32em; margin-left: auto; margin-right: auto; }
.simple-buy__price {
  font-family: var(--font-display); font-size: clamp(3.4rem, 9vw, 5.4rem);
  font-weight: 900; letter-spacing: -.045em; line-height: 1; color: #fff;
}
.simple-buy__per { font-size: 1.15rem; color: rgba(255,255,255,.72); margin: 12px 0 30px; }
.simple-buy__was { font-size: 1.6rem; color: rgba(255,255,255,.55); font-weight: 600; margin-right: 12px; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__art { display: none; }
  .grid--3, .grid--4, .plans, .kpi-row, .steps { grid-template-columns: repeat(2, 1fr); }
  .simple-vs { grid-template-columns: 1fr; }
  .plan--featured { transform: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* The navigation collapses to the hamburger well before the rest of the layout
   does. Nine links plus the Buy now button measure a little over 1000px at the
   current type size, so a bar that stayed horizontal down to the 720px used by
   everything else would wrap onto two rows and push the sticky header out of
   its fixed --nav-h height -- which in turn breaks the scroll offset that every
   in-page anchor depends on. Breaking here is deliberate, and the number has to
   be revisited if a link is ever added. */
@media (max-width: 1000px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: 14px 20px 20px; box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__cta { margin: 8px 0 0; text-align: center; }
}

@media (max-width: 720px) {
  .section { padding: 58px 0; }
  .grid--2, .grid--3, .grid--4, .plans, .kpi-row, .form__row, .steps { grid-template-columns: 1fr; }
  .simple-worries, .doorway { grid-template-columns: 1fr; }
  /* The numbered discs eat half the width of a phone at 76px, so the steps
     become a normal stack with a smaller marker rather than a two-column
     grid squeezed into 320px. */
  .simple-step { grid-template-columns: 56px 1fr; gap: 18px; padding: 24px 0; }
  .simple-step__n { width: 56px; height: 56px; font-size: 1.6rem; }
  .simple-gift { padding: 28px 24px; }
  .btn--xl { width: 100%; padding: 20px 28px; }
  .strip__list { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; }
  .strip__item + .strip__item { border-left: none; }
  .card { padding: 1.6rem; }
  .shots__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .order__line { flex-direction: column; align-items: flex-start; }
  .coupon-row { width: 100%; }
  /* The headline is the part that has to survive: the deadline pill and the
     link both repeat what the pricing page says a tap away. */
  .sale-bar__inner { padding: 8px 20px; gap: 8px; font-size: .86rem; }
  .sale-bar__link { display: none; }
}

@media print {
  .nav, .footer, .admin-bar, .sale-bar, .form__actions { display: none; }
  body { background: #fff; }
}

/* Somebody who has asked their operating system to reduce motion has usually
   asked for a reason -- vestibular disorders make the lift-and-settle on the
   cards and buttons genuinely unpleasant. Everything still changes state, it
   just arrives instead of travelling. The 0.01ms rather than 0 keeps
   transitionend and animationend firing, so any script waiting on one is not
   left hanging. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Named rather than a blanket transform:none -- the '+' on the FAQ rows and
     other centring transforms are layout, not motion, and must survive. */
  .feature:hover, .btn:hover, .nav__cta:hover, .shot:hover { transform: none; }
}

/* --- Cookie consent bar ---------------------------------------------------
   Built and inserted by js/consent.js, on PHP pages and the static guides
   alike, so there is no markup for it anywhere in the repository.

   It is a bar at the bottom rather than a modal over the middle. Nothing is
   blocked behind it and declining costs the visitor nothing, so there is no
   reason to stop them reading the page they came for -- and a dialog that
   traps focus until you answer is the pattern that made these things hated.

   The two buttons are deliberately the same size and weight. Consent is not
   freely given if refusing is the harder path, so "Decline" is a real button
   next to "Accept", not a grey link underneath it. Both clear AA on the navy:
   white on --navy-dark, and white on --green at 4.54:1.

   Site-wide prefers-reduced-motion handling further down neutralises the
   slide-up, so it is not repeated here. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.1rem 2rem;
  padding: 1.15rem clamp(1rem, 4vw, 2.5rem);
  background: var(--navy-dark);
  color: var(--white);
  border-top: 3px solid var(--blue-light);
  box-shadow: 0 -6px 24px rgba(9, 24, 40, .28);
  animation: consent-in .28s ease-out;
}

@keyframes consent-in { from { transform: translateY(100%); } to { transform: none; } }

.consent__text { flex: 1 1 32rem; max-width: 62ch; }

.consent__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 .3rem;
  color: var(--white);
}

.consent__text p { margin: 0; font-size: .88rem; line-height: 1.5; color: #E4ECF4; }

/* White and underlined rather than a brand colour: --blue is tuned for AA on
   the light surfaces, and would be the weakest thing in the bar on navy. */
.consent__text a { color: var(--white); text-decoration: underline; }
.consent__text a:hover { text-decoration-thickness: 2px; }

.consent__actions { display: flex; flex-wrap: wrap; gap: .7rem; flex: 0 0 auto; }

.consent__btn {
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 600;
  padding: .62rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.consent__btn--accept  { background: var(--green); color: var(--white); }
.consent__btn--accept:hover  { background: var(--green-dark); }

.consent__btn--decline { background: transparent; color: var(--white); border-color: var(--white); }
.consent__btn--decline:hover { background: rgba(255, 255, 255, .12); }

/* The bar sits on navy, where the site's usual dark focus ring would all but
   vanish. */
.consent__btn:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .consent { gap: .9rem; }
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1 1 auto; }
}