/*!
 * Ivy Cyber | https://ivycyber.com
 * Copyright (C) 2026 Ivy Cyber LLC.
 * SPDX-License-Identifier: AGPL-3.0-or-later
 *
 * This stylesheet is source code, licensed GNU Affero General Public License
 * version 3 or any later version. The site content it renders is separately
 * licensed CC BY-SA 4.0. See the header of index.html.
 */

/* === 1. TOKENS === */
:root {
  --bg: #161513;
  --panel: #20201D;
  --card: #20201D;
  --card-2: #262623;

  --text: #FAF9F5;
  --muted: #C2C0B6;
  --soft: #BCBAB0;
  --quiet: #A6A49B;

  --green: #45DA64;
  --green-deep: #2FA84A;
  --link: #8AC793;

  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);

  
  --fs-label: 14px;
  --fs-small: 17px;
  --fs-body: 19px;
  --fs-lead: clamp(21px, 2.2vw, 26px);
  --fs-h4: 20px;
  --fs-h3: 24px;
  --fs-h2: clamp(2rem, 4.4vw, 3.8rem);
  --fs-h1: clamp(2.25rem, 4.9vw, 4.1rem);

  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .35);
  --max: 1440px;

  color-scheme: dark;
  --font: "Inter", "Liberation Sans", "Helvetica Neue", Helvetica, Arial,
    "DejaVu Sans", Roboto, "Segoe UI", system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "DejaVu Sans Mono",
    Menlo, Consolas, monospace;
}

/* === 2. ELEMENT BASE === */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--bg);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: var(--muted);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 20% 5%, rgba(69, 218, 100, .15), transparent 32rem),
    radial-gradient(circle at 90% 20%, rgba(95, 165, 107, .07), transparent 28rem),
    linear-gradient(180deg, #141312 0%, #161513 42%, #141312 100%);
}

body > main { flex: 1 0 auto; }
body > footer { flex: 0 0 auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, video { max-width: 100%; }

h1, h2, h3, h4, p, ul, ol, figure { margin-top: 0; }

h1, h2, h3, h4 { color: var(--text); font-weight: 700; font-kerning: normal; }
h1 { font-size: var(--fs-h1); line-height: 1.18; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.18; letter-spacing: -.012em; }
h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: 0; }
h4 { font-size: var(--fs-h4); line-height: 1.20; letter-spacing: -.01em; }

p { line-height: 1.62; }

/* === 3. LAYOUT PRIMITIVES === */
.wrap { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.section { padding: 34px 0; }
.section + .section { padding-top: 20px; }

.section-head { max-width: 104ch; margin-bottom: 22px; }
.section-head h2 { margin-bottom: 10px; }
.kicker { color: var(--muted); margin-bottom: 0; max-width: 88ch; line-height: 1.55; }

.section-head.center { max-width: none; text-align: center; }
.section-head.center > * { margin-inline: auto; }
.section-head.center .kicker { max-width: 88ch; }

.accent { color: var(--green); }

/* === 4. ACCESSIBILITY UTILITIES === */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  background: var(--green);
  color: #0B1A0E;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

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

.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;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none; animation: none; }
}

/* === 5. COMPONENTS === */

/* ---------- header ---------- */
.topbar {
  position: sticky;
  top: 10px;
  z-index: 20;
  width: min(var(--max), calc(100% - 48px));
  margin: 10px auto 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(26, 25, 22, .78);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .24);
}

.topbar .wrap { width: 100%; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 8px 18px;
}
.brand { display: flex; align-items: center; min-width: 0; }

.ivy-logo { display: block; width: 229px; height: 51px; max-width: 42vw; }

.navlinks { display: flex; align-items: center; gap: 4px; }
.navlinks a { padding: 9px 13px; font-size: var(--fs-small); color: var(--muted); border-radius: 11px; }
.navlinks a:hover, .navlinks a:focus-visible { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 24px;
  border: 2px solid var(--green);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); background: rgba(69, 218, 100, .12); }

.btn.primary { background: var(--green); border-color: var(--green); color: #0B1A0E; }
.btn.primary:hover, .btn.primary:focus-visible { background: #5FE87B; border-color: #5FE87B; }

.btn.ghost { border-color: var(--line-strong); color: var(--muted); }
.btn.ghost:hover, .btn.ghost:focus-visible { border-color: var(--green); color: var(--text); }

.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn svg.ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- hero ---------- */
.hero { padding: 26px 0 20px; }

.hero-copy { max-width: 104ch; align-self: end; padding-left: 25px; }
.hero h1 { margin: 18px 0 16px; text-wrap: balance; }

.hero h1 { margin-top: 0; }
.lead { color: var(--text); font-size: var(--fs-lead); line-height: 1.52; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }

.trust-line { color: var(--quiet); font-size: var(--fs-small); margin: 0; }

.rule { height: 1px; margin: 0 0 34px; border: 0; background: var(--line); }
.trust-line strong { color: var(--text); }

/* ---------- cards ---------- */
.card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 14px 45px rgba(0, 0, 0, .22);
}
.card h3 { margin-bottom: 8px; }
.card p { margin: 0 0 14px; color: var(--muted); }
.card p:last-of-type { margin-bottom: 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* ---------- app cards ---------- */
.hero-apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.app-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.app-mini-icon { display: block; width: 44px; height: 44px; }
.app-mini-icon img { display: block; width: 100%; height: 100%; }
.app-mini h3 { margin: 0; font-size: var(--fs-small); line-height: 1.25; }

.app-mini p { margin: 0; color: var(--green); font-size: var(--fs-label); font-weight: 700; line-height: 1.4; }

/* ---------- plans ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 20px 22px; }
/* The head of each card is centred: shield, name, domain, price. The feature
   list below stays left aligned, where a ragged left edge would be harder to
   scan. */
.plan-badge, .plan h3, .plan-domain { align-self: center; text-align: center; }
.plan-badge { display: block; width: 46px; height: 46px; margin-bottom: 10px; color: var(--green-deep); }
.plan-badge svg { display: block; width: 100%; height: 100%; }
.plan-badge-solid { color: var(--green); }

.plan h3 { margin-bottom: 6px; font-size: var(--fs-h3); }
.plan-domain { margin: 0 0 12px; color: var(--quiet); font-size: var(--fs-label); }
.plan-handle {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(0, 0, 0, .35);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
/* Price and the struck price share one baseline row; stacked, the old price
   occupied a full line of its own for four characters. */
.plan-cost { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.plan-price { color: var(--text); font-size: 40px; font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.plan-price .per { color: var(--quiet); font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; }
/* The annual price is an offer, not fine print, so it gets a surface of its
   own between the monthly figure and the feature list. */
.plan-annual {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 16px;
  padding: 5px 12px;
  border: 1px solid rgba(69, 218, 100, .35);
  border-radius: var(--radius-pill);
  background: rgba(69, 218, 100, .08);
  color: var(--muted);
  font-size: var(--fs-small);
}
.plan-annual strong { color: var(--text); font-weight: 700; }
.plan-save { color: var(--green); font-weight: 700; }


.plan-list { margin: 0 0 16px; padding: 0; list-style: none; }
/* The space above the list lives here rather than on the element above it.
   .plan-annual and .plan-cost are the last <p> in their cards, so
   `.card p:last-of-type { margin-bottom: 0 }` was winning on specificity and
   zeroing whatever they set. */
.plan .plan-list { margin-top: 20px; }
.plan-list li { position: relative; padding: 0 0 7px 24px; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.plan-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; width: 100%; }

.plan-featured {
  border-color: rgba(69, 218, 100, .5);
  background:
    linear-gradient(180deg, rgba(69, 218, 100, .10), rgba(69, 218, 100, 0) 55%),
    var(--card);
  box-shadow: 0 18px 50px rgba(69, 218, 100, .10);
}
/* Lifted out of flow onto the top edge. In flow it pushed the featured card's
   shield, name and price about 27px below the other two, so the three price
   rows never lined up. */
.plan { position: relative; }
.plan-flag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border: 1px solid rgba(69, 218, 100, .45);
  border-radius: var(--radius-pill);
  background: #16281B;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- notice ---------- */
.notice {
  margin: 18px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(69, 218, 100, .07);
}
.notice p { margin: 0 0 10px; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--text); }
.notice .note { color: var(--quiet); font-size: var(--fs-small); }

/* ---------- pull-out ---------- */
.pullout {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(69, 218, 100, .07);
}
.pullout-text { margin: 0; line-height: 1.6; }
.pullout-lead { color: var(--green); }

/* ---------- course ---------- */
.course { padding: 26px 28px; }

.course-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 12px 40px; }
.course-intro > :first-child, .course-modules > :first-child { margin-top: 0; }
.course-modules h4 { margin: 0 0 12px; font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }

.course-row { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.course-row h4 { margin: 0 0 12px; }

/* The alumni block takes the .notice shape: green rule on the left, faint
   green wash, square on that edge. It carries the row spacing itself now that
   it is no longer a .course-row with a hairline above it. */
/* Sits outside the course card and spans the wrap, the way the Silver notice
   follows the plan grid. The two benefits run side by side rather than stacked:
   at full width a single column would set two short lines against 1200px of
   empty space, which is what the block looked like inside the card. */
.course-alumni { margin-top: 16px; }
.course-alumni h4 { margin: 0 0 10px; font-size: var(--fs-h4); }
.course-alumni p { color: var(--muted); }
.course-alumni .plan-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0 0 14px; }
.course-alumni .btn { margin-top: 4px; }

.course-gallery { margin-bottom: 4px; }
.course-gallery h3 { font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }
.course-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.course-thumb {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--card-2);
  transition: transform .16s ease;
}
.course-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.course-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.course-thumb:hover, .course-thumb:focus-visible { transform: translateY(-2px); }
.course-thumb:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.price-was { color: var(--quiet); font-size: var(--fs-body); text-decoration: line-through; }
.price-now { color: var(--green); font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.module-list { margin: 0; padding: 0 0 0 20px; color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.module-list li { padding-bottom: 6px; }

/* ---------- hardware ---------- */
.kit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kit h3 { font-size: var(--fs-h4); }
.kit-note { color: var(--quiet); font-size: var(--fs-small); }

.kit { display: flex; flex-direction: column; }
.kit .btn { margin-top: auto; align-self: flex-start; }

.kit-body { flex: 1 1 auto; }
.kit-body::after { content: ""; display: block; clear: both; }
.kit-body h3 { margin-bottom: 12px; }

.kit-thumb {
  position: relative;
  display: block;
  float: right;
  width: 122px;
  height: 122px;
  margin: 2px 0 12px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--card-2);
}
.kit-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The coin is a disc, so its container follows the object rather than the
   rounded square used for the phone and the key. shape-outside matches the
   frame so the copy wraps to the curve. */
.kit-thumb-round { border-radius: 50%; shape-outside: circle(50%); shape-margin: 10px; }


/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3.5vw, 48px); justify-items: center; }
.person { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 360px; }
.person img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .5)); }

.person h3 { position: relative; margin: 18px 0 0; padding-top: 16px; }
.person h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 54px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-deep), var(--green));
}
.person .role { display: block; margin-top: 7px; color: var(--muted); font-size: var(--fs-small); line-height: 1.55; }
.person .role strong {
  display: block;
  margin-bottom: 6px;
  color: var(--green);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.person p { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.55; }

/* ---------- team note ---------- */
.team-note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 48px;
  margin: 26px 0 0;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.team-note-col > :first-child { margin-top: 0; }
.team-note-col::after { content: ""; display: block; clear: both; }

.note-mark { float: right; display: block; width: 78px; margin: 2px 0 10px 18px; }
.note-mark img { display: block; width: 100%; height: auto; }

.note-figure { float: right; width: 152px; margin: 2px 0 12px 20px; }
.note-figure figcaption { margin-top: 8px; color: var(--quiet); font-size: var(--fs-label); font-style: italic; line-height: 1.4; }
.photo-inset {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card-2);
  transition: transform .16s ease, border-color .16s ease;
}
.photo-inset img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 22%; }
.photo-inset:hover, .photo-inset:focus-visible { transform: translateY(-2px); border-color: rgba(69, 218, 100, .45); }
.team-note h3 { margin: 0 0 12px; font-size: var(--fs-h4); }
.team-note p { margin: 0 0 14px; color: var(--muted); line-height: 1.6; }
.team-note p:last-child { margin-bottom: 0; }
.team-note strong { color: var(--text); }
.team-partners { color: var(--quiet); font-size: var(--fs-small); }
.team-partners strong { color: var(--muted); }

/* ---------- contact tiles ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin: 18px 0 0; }
.contact-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .22);
  color: inherit;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
a.contact-tile:hover, a.contact-tile:focus-visible { transform: translateY(-2px); border-color: rgba(69, 218, 100, .45); background: rgba(69, 218, 100, .07); }
.contact-tile dt { color: var(--quiet); font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.contact-tile dd { margin: 0; color: var(--text); font-size: var(--fs-small); line-height: 1.5; overflow-wrap: anywhere; }
.contact-tile address { font-style: normal; line-height: 1.5; }

/* ---------- license table, weblabels.html ---------- */
.jslicense {
  width: 100%;
  margin: 0 0 22px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  font-size: var(--fs-small);
  text-align: left;
}
.jslicense caption { padding: 0 0 10px; color: var(--quiet); font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-align: left; }
.jslicense th { padding: 13px 16px; border-bottom: 1px solid var(--line-strong); background: var(--card-2); color: var(--text); font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.jslicense td { padding: 15px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); overflow-wrap: anywhere; }
.jslicense tr:last-child td { border-bottom: 0; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 8, 7, .88);
  opacity: 0;
  transition: opacity .2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox-figure {
  margin: 0;
  max-width: min(1100px, 100%);
  transform: scale(.94);
  transition: transform .2s ease;
}
.lightbox.is-open .lightbox-figure { transform: scale(1); }

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
.lightbox-caption {
  max-width: 76ch;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 8px 16px;
  border: 2px solid var(--green);
  border-radius: var(--radius-pill);
  background: rgba(11, 26, 14, .9);
  color: var(--green);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(69, 218, 100, .16); }

.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-figure { transition: none; }
  .lightbox-figure { transform: none; }
}


/* ---------- PrivacySafe ecosystem ---------- */
/* Mirrors the PrivacySafe ecosystem card's proportions and rhythm, but uses
   Ivy Cyber green rather than the PrivacySafe orange treatment. */
.ecosystem-card {
  padding: 24px;
  overflow: hidden;
  background: var(--card);
}
.ecosystem-card > h3 {
  margin: 0 0 26px;
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: 0;
}
.ecosystem-card > p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.62;
}
.ecosystem-card > p strong { color: var(--text); }
.ecosystem-card .pullout-text { margin: 0; }

.ecosystem-pullout {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(69, 218, 100, .07);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.foundation-mark {
  display: block;
  flex: 0 0 218px;
  width: 218px;
  padding-left: 6px;
  transition: opacity .16s ease, transform .16s ease;
}
.foundation-mark img {
  display: block;
  width: 218px;
  height: 47px;
  max-width: none;
}
.foundation-mark:hover,
.foundation-mark:focus-visible { transform: translateY(-1px); opacity: .85; }

.split-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* ---------- footer ---------- */
footer { padding: 34px 0 42px; color: var(--muted); }

.footer-community {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 30px;
  align-items: stretch;
}
.footer-panel {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(69, 218, 100, .07), transparent 45%), var(--card-2);
  box-shadow: 0 14px 45px rgba(0, 0, 0, .18);
}
.newsletter-panel {
  background: var(--card-2);
}
.footer-panel p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.55;
}
.footer-panel h3 { margin: 22px 0 10px; font-size: var(--fs-h4); }
.footer-logo { display: block; width: min(240px, 100%); height: auto; margin-bottom: 20px; }

.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--green);
  border-radius: var(--radius-pill);
  color: var(--text);
  transition: transform .16s ease, background .16s ease;
}
.social-link:hover, .social-link:focus-visible { transform: translateY(-1px); background: rgba(69, 218, 100, .12); }
.social-link .ico { display: block; width: 20px; height: 20px; }

/* The graphic and title are an explicit row. This avoids the oversized stacked
   treatment and keeps the Bits On Tape mark exactly where it appears in the
   reference footer. */
.card-footnote { display: block; }
.newsletter-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
}
.newsletter-avatar-link {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
}
.footer-panel .newsletter-avatar {
  display: block;
  float: none;
  width: 56px !important;
  height: 56px !important;
  max-width: 56px;
  margin: 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: none;
}
.footer-panel .newsletter-title-row > h2 {
  min-width: 0;
  margin: 0;
  font-size: clamp(1.7rem, 2.35vw, 2.15rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.card-footnote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 12px;
}
.newsletter-note {
  margin-bottom: 0 !important;
  color: var(--quiet) !important;
  font-size: var(--fs-label) !important;
  line-height: 1.45 !important;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; align-content: start; }
.footer-links a { padding: 8px 10px; color: var(--muted); border-radius: 11px; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--text); background: rgba(255, 255, 255, .06); }

.fine { width: 100%; justify-self: stretch; margin: 0; line-height: 1.62; font-size: var(--fs-small); text-align: left; }

/* === 6. LINKS === */
:where(p, li, dd, address, figcaption, .kicker, .fine, .notice, .lead,
       .pullout-text, .trust-line) a:not(.btn) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .16s ease, text-decoration-color .16s ease;
}
:where(p, li, dd, address, figcaption, .kicker, .fine, .notice, .lead,
       .pullout-text, .trust-line) a:not(.btn):hover,
:where(p, li, dd, address, figcaption, .kicker, .fine, .notice, .lead,
       .pullout-text, .trust-line) a:not(.btn):focus-visible {
  color: var(--text);
  text-decoration-style: solid;
}

/* ---------- hero device ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 30px;
  
  align-items: start;
}
.hero-grid .hero-copy { max-width: none; }
.hero-device {
  display: flex;
  justify-content: center;
  
  container-type: inline-size;
}

.hero-device-link { display: block; text-decoration: none; }
.hero-device-link:focus-visible { outline: none; }
.hero-device-link .phone-mock { transition: transform .16s ease; }
.hero-device-link:hover .phone-mock,
.hero-device-link:focus-visible .phone-mock { transform: translateY(-2px); }
.hero-device-link:focus-visible .phone-mock {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}

.phone-mock {
  
  --phone-max: 300px;
  --phone-width: min(var(--phone-max), 100cqi);
  --u: calc(var(--phone-width) / 226);

  position: relative;
  width: var(--phone-width);
  aspect-ratio: 9 / 17.5;
  padding: calc(8 * var(--u));
  border-radius: calc(38 * var(--u));
  background: linear-gradient(145deg, #55534f 0%, #181817 22%, #0d0d0d 58%, #373633 100%);
  border: calc(2 * var(--u)) solid rgba(255, 255, 255, .32);
  box-shadow:
    0 calc(30 * var(--u)) calc(84 * var(--u)) rgba(0, 0, 0, .58),
    0 0 0 var(--u) rgba(0, 0, 0, .95),
    inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, .06),
    inset 0 0 calc(18 * var(--u)) rgba(255, 255, 255, .035);
  box-sizing: border-box;
}

.phone-mock::before {
  content: "";
  position: absolute;
  left: calc(-5 * var(--u)); top: calc(102 * var(--u));
  width: calc(4 * var(--u)); height: calc(48 * var(--u));
  border-radius: calc(4 * var(--u)) 0 0 calc(4 * var(--u));
  background: linear-gradient(#4a4946, #222);
  box-shadow: 0 calc(58 * var(--u)) 0 #292826;
}
.phone-mock::after {
  content: "";
  position: absolute;
  right: calc(-5 * var(--u)); top: calc(142 * var(--u));
  width: calc(4 * var(--u)); height: calc(72 * var(--u));
  border-radius: 0 calc(4 * var(--u)) calc(4 * var(--u)) 0;
  background: linear-gradient(#4a4946, #222);
}

.phone-screen-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(30 * var(--u));
  background: #000;
  border: var(--u) solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 var(--u) rgba(0, 0, 0, .9), inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, .025);
}

.iphone-camera {
  position: absolute;
  z-index: 4;
  top: calc(8 * var(--u)); left: 50%;
  width: calc(58 * var(--u)); height: calc(18 * var(--u));
  transform: translateX(-50%);
  border-radius: 999px;
  background: #050505;
  box-shadow: inset 0 0 0 var(--u) rgba(255, 255, 255, .035), 0 var(--u) calc(3 * var(--u)) rgba(0, 0, 0, .8);
  pointer-events: none;
}
.iphone-camera::after {
  content: "";
  position: absolute;
  right: calc(8 * var(--u)); top: calc(6 * var(--u));
  width: calc(6 * var(--u)); height: calc(6 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #24324b 0 22%, #09101a 42%, #020202 72%);
  box-shadow: 0 0 0 var(--u) rgba(255, 255, 255, .04);
}

.iphone-status {
  position: absolute;
  z-index: 3;
  top: 0; left: 0; right: 0;
  height: calc(34 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(12 * var(--u)) 0 calc(13 * var(--u));
  color: #fff;
  font-size: calc(9 * var(--u));
  font-weight: 600;
  pointer-events: none;
}
.iphone-status .status-icons { display: flex; align-items: center; gap: calc(4 * var(--u)); }
.iphone-status .signal { width: calc(13 * var(--u)); height: calc(9 * var(--u)); display: flex; align-items: end; gap: var(--u); }
.iphone-status .signal span { display: block; width: calc(2 * var(--u)); background: #fff; border-radius: var(--u); }
.iphone-status .signal span:nth-child(1) { height: calc(3 * var(--u)); }
.iphone-status .signal span:nth-child(2) { height: calc(5 * var(--u)); }
.iphone-status .signal span:nth-child(3) { height: calc(7 * var(--u)); }
.iphone-status .signal span:nth-child(4) { height: calc(9 * var(--u)); }
.iphone-status .wifi { width: calc(14 * var(--u)); height: calc(10 * var(--u)); position: relative; display: block; }
.iphone-status .wifi span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: calc(1.7 * var(--u)) solid #fff;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}
.iphone-status .wifi span:nth-child(1) { width: calc(14 * var(--u)); height: calc(10 * var(--u)); top: 0; }
.iphone-status .wifi span:nth-child(2) { width: calc(9 * var(--u)); height: calc(7 * var(--u)); top: calc(3 * var(--u)); }
.iphone-status .wifi span:nth-child(3) { width: calc(4 * var(--u)); height: calc(4 * var(--u)); top: calc(6 * var(--u)); }
.iphone-status .wifi::after {
  content: "";
  position: absolute;
  width: calc(2.5 * var(--u)); height: calc(2.5 * var(--u));
  border-radius: 50%;
  background: #fff;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
}
.iphone-status .battery {
  width: calc(16 * var(--u)); height: calc(8 * var(--u));
  border: var(--u) solid rgba(255, 255, 255, .9);
  border-radius: calc(2 * var(--u));
  padding: var(--u);
  position: relative;
}
.iphone-status .battery::before { content: ""; display: block; width: 82%; height: 100%; border-radius: var(--u); background: #fff; }
.iphone-status .battery::after {
  content: "";
  position: absolute;
  right: calc(-3 * var(--u)); top: calc(2 * var(--u));
  width: calc(2 * var(--u)); height: calc(4 * var(--u));
  border-radius: 0 var(--u) var(--u) 0;
  background: rgba(255, 255, 255, .75);
}

/* ---------- lock screen ---------- */
.lock-screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(46 * var(--u)) calc(12 * var(--u)) calc(26 * var(--u));
  background: radial-gradient(120% 80% at 50% 0%, #10201a 0%, #060807 55%, #030403 100%);
  text-align: center;
}
.lock-shield { display: block; width: calc(72 * var(--u)); height: calc(72 * var(--u)); }

.lock-name {
  margin: calc(10 * var(--u)) 0 0;
  font-family: "Ubuntu", var(--font);
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  color: #55EC57;
}

.lock-note {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  width: 100%;
  margin: calc(18 * var(--u)) 0 0;
  padding: calc(9 * var(--u)) calc(10 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, .09);
  text-align: left;
}
.lock-note-icon { display: block; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; flex: 0 0 auto; }
.lock-note-text { min-width: 0; color: rgba(255, 255, 255, .92); font-size: calc(10 * var(--u)); line-height: 1.35; }
.lock-note-text strong { display: block; color: rgba(255, 255, 255, .62); font-size: calc(9 * var(--u)); font-weight: 600; }

.lock-glyph { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-top: auto; color: rgba(255, 255, 255, .9); }

/* === 7. BREAKPOINTS === */

@media (max-width: 1060px) {
  .navlinks { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); gap: 20px; }
  .plan-grid, .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-main { grid-template-columns: 1fr; }
  .course-alumni .plan-list { grid-template-columns: 1fr; }
  .course-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .wrap { width: min(100% - 28px, var(--max)); }
  .topbar { width: min(var(--max), calc(100% - 28px)); }
  .plan-grid, .kit-grid, .grid-2, .people { grid-template-columns: 1fr; }
  .team-note { grid-template-columns: 1fr; }
  .note-figure { width: 128px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-left: 0; }
  .hero-device { margin-top: 8px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .section { padding: 26px 0; }
  .person { max-width: 400px; }
  .pullout { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foundation-mark { flex-basis: auto; width: auto; padding-left: 0; }
  .foundation-mark img { width: 218px; height: 47px; max-width: 100%; }
  .split-actions .btn { width: 100%; }
  .nav-actions .btn.ghost { display: none; }
  .footer-community { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .plan .btn { width: 100%; }
  .newsletter-title-row { gap: 12px; }
  .newsletter-avatar-link,
  .footer-panel .newsletter-avatar { width: 48px !important; height: 48px !important; max-width: 48px; flex-basis: 48px; }
  .footer-panel .newsletter-title-row > h2 { font-size: 1.55rem !important; }
  .card-footnote-actions .btn { width: 100%; }
  
  .hero-apps { grid-template-columns: 1fr; }
  .app-mini { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; }
  .app-mini-icon { grid-row: 1 / 3; }
}