/* Iron Claw Fitness visual system, "Summit & Constellation" (docs/brand.md, "Visual system").
 *
 * Taken from the artwork in public/assets/Spinoza_5_images_by_id/:
 * - midnight navy skies lit by warm gold;
 * - constellation geometry (gold lines between glowing nodes, orbit rings, a six-pointed figure);
 * - engraved serif capitals set in thin gold-framed panels;
 * - a lone figure climbing towards the light.
 *
 * The artwork has philosophy text painted into it, so it is not shown whole. Two text-free crops serve as backdrops
 * (summit.*, guiding-star.*), and the geometry is redrawn as SVG in app.js (constellationField, medallionRing).
 *
 * Two moods of one system:
 * - Night: the front page, the marketing header and footer, sign-in and sign-up, and the app sidebar.
 * - Daylight: the working pages inside the app (plan, nutrition, progress, pricing and so on). They stay light and readable
 *   on warm parchment with midnight ink, and gold marks the main actions and engraved titles ("Daylight" section below).
 */

/* Display face: Cinzel for Latin, with Cormorant SC for Cyrillic, which Cinzel lacks. Both are SIL OFL 1.1, and their licences
   are in public/assets/brand/fonts/. */
@font-face {
  font-family: "Iron Claw Display";
  src: url("/public/assets/brand/fonts/cinzel-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Iron Claw Display";
  src: url("/public/assets/brand/fonts/cinzel-latin-700-normal.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Iron Claw Display";
  src: url("/public/assets/brand/fonts/cormorant-sc-cyrillic-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Iron Claw Display";
  src: url("/public/assets/brand/fonts/cormorant-sc-cyrillic-700-normal.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --brand-night: #070b1a;        /* the deepest sky */
  --brand-deep: #0d1531;         /* panels */
  --brand-dusk: #1a2554;         /* horizon blue */
  --brand-gold: #d6ad5c;         /* lines, frames, the slogan */
  --brand-gold-bright: #f4d78a;  /* light sources, hover */
  --brand-gold-soft: rgba(214, 173, 92, 0.34);
  --brand-ember: #c0492f;        /* the "storm" accent, used sparingly */
  --brand-parchment: #f3ecdc;    /* light text on the night sky */
  --brand-font-display: "Iron Claw Display", "Cinzel", "Cormorant SC", Georgia, "Times New Roman", serif;
  --brand-frame: 1px solid var(--brand-gold-soft);
}

/* ---- the brand lockup (everywhere) ---- */
.brand-name {
  font-family: var(--brand-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.marketing-brand .brand-slogan,
.sidebar-brand .brand-slogan,
.auth-visual .brand-slogan,
.marketing-footer .brand-slogan {
  color: var(--brand-gold);
  opacity: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}
.brand-mark { box-shadow: 0 0 0 1px var(--brand-gold-soft), 0 0 14px rgba(244, 215, 138, 0.22); }

/* ---- the constellation field (hero, auth panel, footer) ---- */
.constellation-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.constellation-field .orbits circle { fill: none; stroke: var(--brand-gold); stroke-opacity: 0.1; stroke-width: 1; }
.constellation-field .links line { stroke: var(--brand-gold); stroke-opacity: 0.28; stroke-width: 0.8; }
.constellation-field .stars circle { fill: var(--brand-parchment); fill-opacity: 0.45; }
.constellation-field .stars circle.bright { fill: var(--brand-gold-bright); fill-opacity: 0.9; filter: drop-shadow(0 0 3px rgba(244, 215, 138, 0.9)); }

/* ---- marketing pages: night sky ---- */
.marketing-page { background: var(--brand-night); color: var(--brand-parchment); }
.marketing-header {
  background: rgba(7, 11, 26, 0.86);
  border-bottom: var(--brand-frame);
}
.marketing-nav .nav-text { color: rgba(243, 236, 220, 0.8); letter-spacing: 0.03em; }
.marketing-nav .nav-text:hover { color: var(--brand-gold-bright); }
.language-switch-header { border-color: var(--brand-gold-soft); }
.language-switch-header .language-option[aria-pressed="true"] { background: var(--brand-gold); color: var(--brand-night); }

/* Buttons on the night sky: gold for the main action, a gold frame for the second. */
:is(.marketing-page, .pricing-page, .checkout-page, .auth-page) .marketing-header .btn-primary,
.marketing-page .btn-primary,
.auth-page .btn-primary {
  color: var(--brand-night);
  background: linear-gradient(180deg, var(--brand-gold-bright), var(--brand-gold));
  border-color: var(--brand-gold);
  box-shadow: 0 8px 24px rgba(214, 173, 92, 0.28);
}
:is(.marketing-page, .pricing-page, .checkout-page, .auth-page) .marketing-header .btn-primary:hover,
.marketing-page .btn-primary:hover,
.auth-page .btn-primary:hover { background: var(--brand-gold-bright); }
.marketing-header .btn-secondary,
.marketing-page .hero .btn-secondary {
  color: var(--brand-parchment);
  background: rgba(7, 11, 26, 0.35);
  border-color: var(--brand-gold-soft);
}
.marketing-header .btn-secondary:hover,
.marketing-page .hero .btn-secondary:hover { border-color: var(--brand-gold); color: var(--brand-gold-bright); }

/* ---- hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 76% 30%, rgba(244, 215, 138, 0.2), transparent 42%),
    radial-gradient(ellipse at 10% 110%, rgba(192, 73, 47, 0.16), transparent 45%),
    linear-gradient(180deg, var(--brand-night) 0%, var(--brand-deep) 62%, var(--brand-dusk) 100%);
}
.hero-constellation {
  z-index: -1;
  /* faint behind the headline and facts, full strength around the summit */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.18) 42%, #000 62%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.18) 42%, #000 62%);
}
.hero { border-bottom: var(--brand-frame); }
.hero-inner { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brand-gold);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-kicker::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-gold)); }
.hero h1 {
  font-family: var(--brand-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.02;
  color: var(--brand-parchment);
  text-shadow: 0 2px 30px rgba(244, 215, 138, 0.18);
}
.hero-slogan {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 16px;
  font-family: var(--brand-font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brand-gold-bright);
  border: var(--brand-frame);
  outline: 1px solid rgba(214, 173, 92, 0.14);
  outline-offset: 4px;
  background: rgba(7, 11, 26, 0.4);
}
.hero-subhead { color: rgba(243, 236, 220, 0.84); }

/* "Membership open by invitation only" (app.js invitationSign): shown under the slogan while sign-up is closed. A framed
   plaque like the slogan, with the ember accent so it reads as a notice rather than part of the title. */
.invitation-sign {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 18px 0 0;
  padding: 10px 18px;
  font-family: var(--brand-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-parchment);
  border: 1px solid var(--brand-gold);
  border-left: 4px solid var(--brand-ember);
  background: rgba(192, 73, 47, 0.16);
}
.invitation-sign::before { content: "\2726"; color: var(--brand-gold-bright); }

/* The three facts, as the artwork's framed label panels. */
.hero-stat {
  position: relative;
  border-radius: 2px;
  background: rgba(13, 21, 49, 0.66);
  border: var(--brand-frame);
}
.hero-stat::after { /* the inner frame line */
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(214, 173, 92, 0.12);
  pointer-events: none;
}
.hero-stat strong { font-family: var(--brand-font-display); color: var(--brand-gold-bright); letter-spacing: 0.04em; }
.hero-stat span { color: rgba(243, 236, 220, 0.72); }

/* The arch with the summit climb, and the crab medallion standing in front of it. */
.hero-visual {
  position: relative;
  justify-self: center;
  width: min(100%, 400px);
  padding-bottom: 150px;
}
.hero-summit {
  display: block;
  aspect-ratio: 398 / 560;
  border-radius: 200px 200px 6px 6px;
  overflow: hidden;
  border: 1px solid var(--brand-gold);
  outline: 1px solid var(--brand-gold-soft);
  outline-offset: 7px;
  box-shadow: 0 0 60px rgba(244, 215, 138, 0.16), 0 30px 60px rgba(0, 0, 0, 0.5);
}
.hero-summit img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hero-medallion {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 300px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
}
.medallion-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.medallion-ring .ring { fill: none; stroke: var(--brand-gold); stroke-width: 1; }
.medallion-ring .ring.dashed { stroke-opacity: 0.55; stroke-dasharray: 2 5; }
.medallion-ring .figure { fill: none; stroke: var(--brand-gold); stroke-opacity: 0.5; stroke-width: 0.7; }
.medallion-ring .node { fill: var(--brand-gold-bright); filter: drop-shadow(0 0 2px rgba(244, 215, 138, 0.95)); }
/* The crab picture is a rounded tile; inside the ring it is shown as a round coin. */
.hero-medallion .hero-figure {
  position: relative;
  width: 76%;
  max-width: none;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--brand-gold);
  box-shadow: 0 0 0 6px rgba(7, 11, 26, 0.85), 0 0 40px rgba(244, 215, 138, 0.35), 0 20px 40px rgba(0, 0, 0, 0.55);
  background: var(--brand-night);
}
.hero-medallion .hero-figure img { width: 100%; transform: scale(1.12); filter: none; }
/* The runner on top of the ring (app.js medallionRunner). His feet touch the top of the outer ring (2 % from the top of the
   medallion; the feet are at 46 of the figure's 48 units). */
.medallion-runner {
  position: absolute;
  top: 2%;
  left: 50%;
  z-index: 2;
  width: 13%;
  overflow: visible;
  transform: translate(-50%, -88%);  /* -96 % would put straight legs on the ring; running legs are bent, so lower a little */
  filter: drop-shadow(0 0 1.5px rgba(7, 11, 26, 0.95)) drop-shadow(0 0 5px rgba(244, 215, 138, 0.7));
}
.medallion-runner line { stroke: var(--brand-gold-bright); stroke-width: 3.6; stroke-linecap: round; }
.medallion-runner .runner-head { fill: var(--brand-gold-bright); }
.medallion-runner .back line { stroke: var(--brand-gold); }  /* the far arm and leg, a shade darker */
.medallion-runner g { transform-box: view-box; }
.runner-thigh { transform-origin: 18px 27px; }
.runner-shin { transform-origin: 18px 37px; }
.runner-arm { transform-origin: 21px 15px; }
.runner-forearm { transform-origin: 21px 22px; transform: rotate(-75deg); }  /* elbows bent, hands forward */
/* A mid-stride pose, which is also what people who ask for reduced motion see. */
.runner-thigh.front { transform: rotate(-38deg); }
.runner-thigh.back { transform: rotate(32deg); }
.runner-shin.front { transform: rotate(18deg); }
.runner-shin.back { transform: rotate(80deg); }
.runner-arm.front { transform: rotate(35deg); }
.runner-arm.back { transform: rotate(-45deg); }

@media (prefers-reduced-motion: no-preference) {
  /* The wheel turns backwards under him (its top moves left while he runs right). */
  .medallion-ring { animation: brand-wheel 30s linear infinite; }
  @keyframes brand-wheel { to { transform: rotate(-360deg); } }

  /* One stride is 0.7 s; the second leg and arm run half a stride behind. */
  .runner-body { animation: runner-bob 0.35s ease-in-out infinite alternate; }
  .runner-thigh { animation: runner-thigh 0.7s ease-in-out infinite; }
  .runner-shin { animation: runner-shin 0.7s ease-in-out infinite; }
  .runner-arm { animation: runner-arm 0.7s ease-in-out infinite; }
  .medallion-runner .back { animation-delay: -0.35s; }
  @keyframes runner-bob { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
  @keyframes runner-thigh { 0%, 100% { transform: rotate(-42deg); } 50% { transform: rotate(34deg); } }
  @keyframes runner-shin { 0%, 100% { transform: rotate(12deg); } 30% { transform: rotate(35deg); } 55% { transform: rotate(95deg); } 80% { transform: rotate(70deg); } }
  @keyframes runner-arm { 0%, 100% { transform: rotate(38deg); } 50% { transform: rotate(-48deg); } }
}

/* ---- features: four panels joined by one gold line, like the artwork's connected nodes ---- */
.marketing-page .feature-strip {
  position: relative;
  padding-top: 56px;
  padding-bottom: 72px;
}
.marketing-page .feature-strip::before {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  top: 98px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-gold) 12%, var(--brand-gold) 88%, transparent);
  opacity: 0.55;
}
.marketing-page .feature-item {
  position: relative;
  border-radius: 2px;
  background: linear-gradient(180deg, #121b40, #0b122b);  /* opaque: the joining line shows only between panels */
  border: var(--brand-frame);
  box-shadow: none;
  text-align: center;
  justify-items: center;
}
.marketing-page .feature-item .feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--brand-gold-bright);
  background: var(--brand-night);
  border: 1px solid var(--brand-gold);
  box-shadow: 0 0 0 5px rgba(7, 11, 26, 0.9), 0 0 18px rgba(244, 215, 138, 0.3);
}
.marketing-page .feature-item h2 {
  font-family: var(--brand-font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--brand-parchment);
}
.marketing-page .feature-item p { color: rgba(243, 236, 220, 0.7); }

/* ---- "The Iron Claw Way" (app.js renderPhilosophy): three ideas under one line, each with a geometric emblem ---- */
.brand-way {
  position: relative;
  border-top: var(--brand-frame);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244, 215, 138, 0.1), transparent 55%),
    linear-gradient(180deg, var(--brand-deep), var(--brand-night));
}
.brand-way-inner { width: min(100%, 1200px); margin: 0 auto; padding: 64px 32px 72px; text-align: center; }
.brand-eyebrow {
  margin: 0 0 12px;
  color: var(--brand-gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand-way h2 {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--brand-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--brand-parchment);
}
.brand-way-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; text-align: center; }
.brand-way-item { padding: 8px 12px; }
.brand-way-item h3 { margin: 16px 0 8px; font-family: var(--brand-font-display); font-weight: 700; letter-spacing: 0.05em; color: var(--brand-gold-bright); font-size: 19px; }
.brand-way-item p { margin: 0; color: rgba(243, 236, 220, 0.76); line-height: 1.6; }
.way-emblem { width: 72px; height: 72px; overflow: visible; }
.way-emblem .ring { fill: none; stroke: var(--brand-gold-soft); stroke-width: 1; }
.way-emblem .line { fill: none; stroke: var(--brand-gold); stroke-width: 1.4; stroke-linejoin: round; }
.way-emblem .node { fill: var(--brand-gold-bright); filter: drop-shadow(0 0 3px rgba(244, 215, 138, 0.9)); }
.brand-way-close { margin-top: 44px; display: grid; justify-items: center; gap: 16px; }
.brand-way-close p { margin: 0; font-family: var(--brand-font-display); font-size: 18px; letter-spacing: 0.04em; color: var(--brand-parchment); }

/* ---- footer ---- */
.marketing-footer {
  position: relative;
  overflow: hidden;
  border-top: var(--brand-frame);
  background: linear-gradient(180deg, var(--brand-night), #040712);
}
.footer-constellation { opacity: 0.5; }
.marketing-footer-inner {
  position: relative;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 28px 32px 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-parchment);
  font-size: 18px;
}

/* ---- sign in / sign up ---- */
.auth-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image:
    linear-gradient(180deg, rgba(7, 11, 26, 0.25) 0%, rgba(7, 11, 26, 0.35) 45%, rgba(7, 11, 26, 0.94) 100%),
    image-set(url("/public/assets/brand/guiding-star.webp") type("image/webp"), url("/public/assets/brand/guiding-star.jpg") type("image/jpeg"));
  background-color: var(--brand-night);
  background-position: center 30%;
  background-size: cover;
}
.auth-constellation {
  z-index: -1;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 72%);
}
.auth-visual > div { position: relative; }
.auth-visual h1 {
  font-family: var(--brand-font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--brand-parchment);
}
.auth-visual p { color: rgba(243, 236, 220, 0.8); }
.auth-panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244, 215, 138, 0.1), transparent 55%),
    linear-gradient(180deg, var(--brand-deep), var(--brand-night));
}
/* The form stays on a light card for legibility, framed in gold like the artwork's panels. */
.auth-card {
  border-radius: 4px;
  border: 1px solid var(--brand-gold);
  outline: 1px solid var(--brand-gold-soft);
  outline-offset: 6px;
  background: #fbf8f1;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.auth-card h1 { font-family: var(--brand-font-display); font-weight: 700; letter-spacing: 0.03em; color: var(--brand-night); }
.auth-card .brand-slogan { color: #9a7431; opacity: 1; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }
.auth-card .btn-secondary { border-color: #d9c79e; color: var(--brand-night); }
.auth-card .nav-text.inline { color: #8a6424; }

/* ==== Daylight: the working pages inside the app ==== */
/* The old indigo becomes midnight ink (text, borders, active states); gold is kept for the main actions, because gold text on a
   light page would be too faint to read. */
:root {
  --primary: #1f2c64;
  --primary-alt: #2c3b7c;
  --accent: #b8862f;
  --primary-soft: #efe7d4;
  --background: #f6f2e9;
  --border: #e6dcc6;
  --sidebar: var(--brand-night);
  --card-shadow: 0 2px 12px rgba(31, 44, 100, 0.07);
}
.btn-primary {
  color: var(--brand-night);
  background: linear-gradient(180deg, var(--brand-gold-bright), var(--brand-gold));
  border-color: #c89d4c;
  box-shadow: 0 8px 20px rgba(184, 134, 47, 0.25);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-gold-bright); }
.btn-secondary { border-color: rgba(31, 44, 100, 0.35); color: var(--primary); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); }

/* Engraved page titles with a gold rule and a small diamond, like the artwork's title plates. */
.page-header h1,
.pricing-header h1,
.checkout-header h1 {
  font-family: var(--brand-font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--primary);
}
.page-header h1::after,
.pricing-header h1::after {
  content: "";
  display: block;
  width: 132px;
  height: 9px;
  margin-top: 10px;
  /* a gold diamond, then the rule fading out */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 9'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23d6ad5c'/%3E%3Cstop offset='1' stop-color='%23d6ad5c' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4.5 0 9 4.5 4.5 9 0 4.5Z' fill='%23d6ad5c'/%3E%3Crect x='13' y='4' width='119' height='1' fill='url(%23g)'/%3E%3C/svg%3E") no-repeat;
}
.card h2,
.pricing-card h2,
.pricing-card h3 { font-family: var(--brand-font-display); font-weight: 700; letter-spacing: 0.03em; color: var(--primary); }

/* Icon medallions: gold on midnight, ringed in gold. */
.stat-icon,
.feature-item .feature-icon {
  color: var(--brand-gold-bright);
  background: var(--brand-deep);
  box-shadow: inset 0 0 0 1px var(--brand-gold-soft);
}
.goal-card:hover,
.goal-card.active { border-color: var(--accent); box-shadow: 0 8px 24px rgba(184, 134, 47, 0.18); }
.goal-card.active .stat-icon { color: var(--brand-night); background: var(--brand-gold); }
.pricing-card.featured { border-color: var(--brand-gold); box-shadow: 0 0 0 1px var(--brand-gold-soft), 0 14px 34px rgba(184, 134, 47, 0.18); }
.payment-method.active,
.substitution-option:hover,
.chip-static,
.week-meal:hover { background: var(--primary-soft); }
.training-session:hover { box-shadow: 0 8px 24px rgba(31, 44, 100, 0.1); }
.line-chart .area { fill: rgba(214, 173, 92, 0.18); }

/* The pricing and checkout pages open under the night header: a night band carries the title, then daylight below. */
.pricing-page,
.checkout-page { background: var(--background); }

/* ==== Night: the app sidebar ==== */
.sidebar { background: linear-gradient(180deg, var(--brand-night), var(--brand-deep)); border-right: var(--brand-frame); isolation: isolate; }
.sidebar-constellation { z-index: -1; opacity: 0.45; }
.sidebar-brand .brand-name { color: var(--brand-parchment); }
.nav-link { color: rgba(243, 236, 220, 0.72); }
.nav-link:hover { color: var(--brand-parchment); background: rgba(214, 173, 92, 0.08); }
.nav-link.active {
  color: var(--brand-gold-bright);
  background: linear-gradient(90deg, rgba(214, 173, 92, 0.16), transparent);
  box-shadow: inset 2px 0 0 var(--brand-gold);
}
.sidebar .language-switch { border-color: var(--brand-gold-soft); }
.sidebar .language-option[aria-pressed="true"] { background: var(--brand-gold); color: var(--brand-night); }
.sidebar .avatar { background: var(--brand-dusk); color: var(--brand-gold-bright); box-shadow: 0 0 0 1px var(--brand-gold); }

/* ---- smaller screens ---- */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; width: min(100%, 300px); padding-bottom: 110px; }
  .hero-constellation { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, rgba(0, 0, 0, 0.15) 50%); mask-image: linear-gradient(180deg, #000 0%, #000 35%, rgba(0, 0, 0, 0.15) 50%); }
  .hero-medallion { width: 220px; }
}
@media (max-width: 680px) {
  .hero h1 { font-size: 44px; }
  .hero-slogan { font-size: 13px; letter-spacing: 0.08em; padding: 7px 12px; }
  .hero-visual { width: min(100%, 250px); padding-bottom: 96px; }
  .hero-medallion { width: 190px; }
  .marketing-page .feature-strip::before { display: none; }
  .brand-way-grid { grid-template-columns: 1fr; gap: 32px; }
  .brand-way-inner { padding: 48px 16px 56px; }
  .marketing-footer-inner { padding: 22px 16px 28px; font-size: 16px; }
  .auth-visual { background-position: center 22%; padding: 32px 16px; }
  .auth-visual h1 { font-size: 30px; }
}

/* Night bars around the daylight pages: the marketing header over pricing and checkout (solid, so it does not turn grey over
   the light page) and the phone's top bar inside the app. */
:is(.pricing-page, .checkout-page) .marketing-header { background: var(--brand-night); }
@media (max-width: 900px) {
  .mobile-topbar { background: rgba(7, 11, 26, 0.94); border-bottom: var(--brand-frame); color: var(--brand-parchment); }
  .mobile-topbar .icon-button { color: var(--brand-gold-bright); background: transparent; border-color: var(--brand-gold-soft); }
  .mobile-topbar .brand-name { color: var(--brand-parchment); }
}

/* ---- promo video (app.js renderPromoVideo): night section between the features and "The Iron Claw Way" ---- */
.promo-video-section {
  position: relative;
  padding: 72px 24px;
  background: linear-gradient(180deg, var(--brand-deep) 0%, var(--brand-night) 100%);
  border-top: var(--brand-frame);
}
.promo-video-inner { max-width: 960px; margin: 0 auto; text-align: center; }
.promo-video-inner h2 {
  margin: 8px 0 28px;
  font-family: var(--brand-font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: 0.02em;
  color: var(--brand-parchment);
}
.promo-video-frame {
  position: relative;
  padding: 6px;
  border: var(--brand-frame);
  outline: 1px solid rgba(214, 173, 92, 0.14);
  outline-offset: 5px;
  background: rgba(7, 11, 26, 0.6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(244, 215, 138, 0.08);
}
.promo-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
@media (max-width: 640px) { .promo-video-section { padding: 48px 16px; } }