/* ==========================================================================
   SkillInflow — design system
   A dark, editorial, engineering-led aesthetic. Warm serif display type
   against a precise geometric sans, one confident accent color, generous
   negative space. Built to feel handcrafted, not templated.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600&display=swap');

:root{
  color-scheme: dark;

  /* ---- palette ---------------------------------------------------- */
  --bg:            #08090c;
  --bg-1:          #0c0e13;
  --bg-2:          #12151b;
  --bg-3:          #191d26;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.16);

  --ink:           #f3f2ee;
  --ink-dim:       #b9bac2;
  --ink-faint:     #7d7f8a;

  --accent:        #8b7bff;      /* signal violet — SkillInflow */
  --accent-2:      #d9c27a;      /* warm brass — reserved for premium accents */
  --accent-ink:    #0a0710;
  /* FIXED (direct report: "you have removed that animated logo and
     theme" — the Bookend page had its own separate mint-teal sub-brand
     identity, applied since before the homepage's gold/chrome theme
     work existed. Re-pointed to the same violet accent used everywhere
     else so the two pages read as one consistent site instead of two
     different products. */
  --bookend:       #8b7bff;      /* was #5ee6c4 (mint) — now matches --accent */

  --ok:            #5ee6a8;
  /* FIXED (direct request: "make sure whole website background from
     top to bottom is based on this theme" — the footer's warm gold
     signage photo). This was still violet/teal-led, clashing with the
     gold theme used everywhere else (see html::before below); now
     leads with the same warm gold, with violet kept only as a faint
     secondary accent for depth. */
  --grad-mesh:     radial-gradient(60% 60% at 20% 20%, rgba(217,194,122,.32), transparent 60%),
                    radial-gradient(50% 50% at 85% 15%, rgba(217,194,122,.20), transparent 60%),
                    radial-gradient(70% 70% at 50% 100%, rgba(139,123,255,.14), transparent 60%);

  /* ---- type ---------------------------------------------------------- */
  --f-display: 'Fraunces', 'Iowan Old Style', serif;
  --f-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'Space Grotesk', ui-monospace, 'SF Mono', monospace;

  --fs-1: clamp(2.6rem, 1.7rem + 4vw, 5.6rem);
  --fs-2: clamp(2rem, 1.5rem + 2.4vw, 3.6rem);
  --fs-3: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  --fs-4: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-sm: .9rem;
  --fs-xs: .78rem;

  /* ---- spacing / shape ------------------------------------------------ */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(5rem, 10vw, 10rem);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --max: 1280px;

  /* ---- motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .35s;
  --dur: .7s;
  --dur-slow: 1.1s;
}

/* ============================== reset ================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
}
/* FIXED (direct report: "from here page is dead and dark/black, make
   it alive, add something in the background, subtle and intelligent
   design") — past the hero, sections like #platform/#philosophy/
   #roadmap had no background treatment at all, just flat --bg. A
   fixed, whole-page ambient layer (soft color blobs in the site's own
   accent palette + a faint grid, both far dimmer than the hero's own
   versions) sits behind every section so the rest of the page reads
   as a continuation of the hero's atmosphere instead of falling into
   plain black. Fixed positioning means it holds still while sections
   scroll past it, so it never fights section content for attention. */
/* Lives on <html>, not <body> — body::before is already spoken for
   (the film-grain overlay further down), and each element gets its
   own independent ::before, so this doesn't collide with it.
   FIXED (direct request: "add background to match SkillInflow golden
   theme") — rebalanced from a violet/teal-led mix to lead with the
   brand's own signal-gold (the same rgba(217,194,122) used in the
   logo's glow/shine), with violet kept only as a secondary accent for
   depth instead of competing for attention. */
html::before{
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 40% at 14% 10%, rgba(217,194,122,.12), transparent 62%),
    radial-gradient(42% 34% at 88% 20%, rgba(139,123,255,.07), transparent 60%),
    radial-gradient(44% 36% at 18% 80%, rgba(217,194,122,.09), transparent 60%),
    radial-gradient(46% 38% at 92% 90%, rgba(217,194,122,.10), transparent 60%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    var(--bg);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 56px 56px, 56px 56px, 100% 100%;
}
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection{ background: var(--accent); color: var(--accent-ink); }

/* subtle grain overlay — the single biggest thing that kills the
   "flat vector AI render" look; a real, tasteful film-grain texture. */
body::before{
  content:'';
  position: fixed; inset: 0; z-index: 998; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================ utilities ================================ */
.wrap{ max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section{ padding-block: var(--section-y); position: relative; }
.eyebrow{
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: .6em; font-weight: 500;
}
.eyebrow::before{ content:''; width: 1.4em; height: 1px; background: var(--accent); opacity: .7; }
.eyebrow.bookend{ color: var(--bookend); }
.eyebrow.bookend::before{ background: var(--bookend); }

h1, .h1{ font-family: var(--f-display); font-weight: 500; font-size: var(--fs-1); line-height: .98; letter-spacing: -.02em; }
h2, .h2{ font-family: var(--f-display); font-weight: 500; font-size: var(--fs-2); line-height: 1.04; letter-spacing: -.015em; }
h3, .h3{ font-family: var(--f-display); font-weight: 500; font-size: var(--fs-3); line-height: 1.12; letter-spacing: -.01em; }
.lede{ font-size: var(--fs-4); line-height: 1.5; color: var(--ink-dim); font-weight: 400; max-width: 40em; }
.dim{ color: var(--ink-dim); }
.faint{ color: var(--ink-faint); }
.mono{ font-family: var(--f-mono); }
.italic{ font-style: italic; }

.grid{ display: grid; gap: var(--gutter); }
.g-2{ grid-template-columns: repeat(2, 1fr); }
.g-3{ grid-template-columns: repeat(3, 1fr); }
.g-4{ grid-template-columns: repeat(4, 1fr); }
.g-12{ grid-template-columns: repeat(12, 1fr); }

/* scroll reveal */
[data-reveal]{ opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity: 1; transform: translateY(0); }
[data-reveal="scale"]{ transform: scale(.94); }
[data-reveal="scale"].in{ transform: scale(1); }
[data-reveal="left"]{ transform: translateX(-32px); }
[data-reveal="left"].in{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(32px); }
[data-reveal="right"].in{ transform: translateX(0); }

/* stagger children via inline --d custom property, set by JS */
[data-reveal]{ transition-delay: var(--d, 0ms); }

/* ============================== cursor ================================= */
.cursor{
  position: fixed; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--ink); pointer-events: none; z-index: 9999; mix-blend-mode: difference;
  transform: translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), opacity .25s;
  will-change: transform;
}
.cursor.hover{ width: 56px; height: 56px; background: var(--ink); }
.cursor.hidden{ opacity: 0; }
@media (hover: none), (pointer: coarse){ .cursor{ display: none; } }

/* ============================== buttons ================================= */
.btn{
  position: relative; display: inline-flex; align-items: center; gap: .6em;
  padding: 1.05em 1.7em; border-radius: 999px; font-family: var(--f-body); font-weight: 600;
  font-size: .95rem; letter-spacing: -.01em; overflow: hidden; isolation: isolate;
}
.btn-primary{ background: var(--ink); color: var(--accent-ink); }
.btn-primary::before{
  content:''; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  transform: translateY(101%); transition: transform .45s var(--ease);
}
.btn-primary:hover::before{ transform: translateY(0); }
.btn-primary:hover{ color: var(--ink); }
.btn-ghost{ border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink); background: rgba(255,255,255,.04); }
.btn-arrow{ display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px); }
.btn-sm{ padding: .8em 1.3em; font-size: .85rem; }

/* ============================== nav ===================================== */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  /* FIXED (direct report: "that panel is covering more space... Menu
     options should be little bit towards the upper side") — was
     align-items:center, which vertically centered the nav links/CTA
     against the FULL height of the large logo, pushing them down into
     the middle of a tall fixed bar rather than sitting near its top
     like a normal nav. flex-start anchors them to the top instead. */
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1.35rem var(--gutter); transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid var(--line);
  /* FIXED (direct report: "header panel should look like frosted glass
     UI, 1st looks ugly" — comparing the raw top-of-page state, with no
     background at all, against the .scrolled state below) — the glass
     treatment now applies from the start instead of only appearing
     once the page scrolls, so the hero's colorful gradient never shows
     through raw behind the nav. */
  background: rgba(8,9,12,.55); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.nav-links, .nav-cta{ padding-top: .4rem; } /* small nudge down from the very top edge, not dead-center */
.nav.scrolled{
  background: rgba(8,9,12,.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line); padding-block: 1rem;
}
.brand{ display: flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -.01em; }
/* Real brand mark (nav + footer) — same live-shine treatment as the hero
   logo, just small and phase-offset (animation-delay) so it doesn't pulse
   in lockstep with the hero copy when both are visible at once. */
.brand-icon{ position: relative; display: inline-block; width: 32px; height: 32px; flex-shrink: 0; }
.brand-icon img{ display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.brand-icon-shine{
  position: absolute; inset: 0;
  -webkit-mask-image: url('/assets/img/skillinflow-icon.png');
  mask-image: url('/assets/img/skillinflow-icon.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.4) 48%, rgba(255,226,160,.5) 50%, rgba(255,255,255,.4) 52%, transparent 58%);
  background-size: 300% 100%;
  background-position: 150% 0;
  mix-blend-mode: screen;
  animation: hero-logo-shine 6.5s cubic-bezier(.3,.1,.2,1) infinite;
  animation-delay: 2.8s;
  pointer-events: none;
}
/* Full-size animated logo lockup, moved from the hero into the nav.
   FIXED (direct correction: "it is hardly visible, have the same size
   there as well what it had when it was in the middle, keep it as is,
   I just wanted you to move to that side") — my first pass shrank this
   to a typical small nav-icon size; that wasn't the ask. Same exact
   dimensions/glow/shine intensity/ball size as the removed hero
   version, just relocated to the top-left instead of centered — see
   `.nav{}` and `.hero{padding-top}` for the layout accommodation a
   nav-bar-sized logo this large needs. */
.nav-logo-stage{ position: relative; display: flex; align-items: center; }
.nav-logo-glow{
  position: absolute; inset: -20% -10%; z-index: -1;
  background: radial-gradient(45% 65% at 50% 55%, rgba(217,194,122,.32), transparent 70%),
              radial-gradient(30% 45% at 38% 40%, rgba(139,123,255,.16), transparent 70%);
  filter: blur(38px);
  animation: hero-logo-breathe 5.5s ease-in-out infinite;
}
/* FIXED (direct report: "fix that space wastage... Logo little bit
   smaller") — 440px made the fixed nav ~225px tall, permanently
   covering a big chunk of the viewport on every page (position:fixed
   nav sits over content, not just at the top once). Shrunk to a size
   that still reads as the full lockup, not a tiny icon, without eating
   that much permanent screen space. */
.nav-logo-wrap{ position: relative; display: inline-block; width: min(260px, 42vw); }
/* Same animated lockup reused in the footer, per direct request — just
   smaller than the nav version. Higher specificity than the base
   .nav-logo-wrap rule so this width wins for footer instances only. */
.footer-logo-wrap.nav-logo-wrap{ width: min(190px, 34vw); }
.footer-logo-stage{ margin-bottom: .3rem; }
.nav-logo-img{
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.55));
  user-select: none; -webkit-user-drag: none;
}
.nav-logo-shine{
  position: absolute; inset: 0;
  -webkit-mask-image: url('/assets/img/skillinflow-logo-hero.png');
  mask-image: url('/assets/img/skillinflow-logo-hero.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.4) 47.5%, rgba(255,226,160,.5) 50%, rgba(255,255,255,.4) 52.5%, transparent 58%);
  background-size: 300% 100%;
  background-position: 150% 0;
  mix-blend-mode: screen;
  animation: hero-logo-shine 6.5s cubic-bezier(.3,.1,.2,1) infinite;
  animation-delay: 1.2s;
  pointer-events: none;
}
.nav-logo-ball{
  position: absolute; width: 3.2%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, #f3dfae 32%, #c99a3e 66%, #7a561c 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.45);
  transform: translate(-50%, -50%);
  animation: hero-ball-bounce 4.2s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.nav-links{ display: flex; align-items: center; gap: 2.4rem; }
.nav-links a{ font-size: .92rem; font-weight: 500; color: var(--ink-dim); position: relative; padding-block: .2rem; }
.nav-links a::after{ content:''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--ink); transition: right .35s var(--ease); }
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ right: 0; }
.nav-cta{ display: flex; align-items: center; gap: 1.4rem; }
.nav-toggle{ display: none; flex-direction: column; gap: 5px; padding: .4rem; z-index: 700; position: relative; }
.nav-toggle span{ width: 20px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease), opacity .35s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; z-index: 600; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; padding: 2rem var(--gutter);
  transform: translateY(-100%); transition: transform .5s var(--ease);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu a{ font-family: var(--f-display); font-size: 2.1rem; color: var(--ink-dim); }
.mobile-menu a:hover{ color: var(--ink); }
.mobile-menu .mm-foot{ margin-top: 2rem; display: flex; gap: 1rem; }

@media (max-width: 900px){
  .nav-links{ display: none; }
  .nav-toggle{ display: flex; }
}

/* ============================== progress bar ============================ */
.scroll-progress{ position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--bookend)); z-index: 600; width: 0%; }

/* ============================== hero ===================================== */
.hero{
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  position: relative; padding-top: 7.5rem; overflow: hidden;
  /* padding-top sized to clear the fixed nav now that the logo lockup
     has been shrunk (260px wide vs. the earlier 440px). */
}
section[id]{ scroll-margin-top: 9rem; } /* keeps nav-link jump targets clear of the fixed nav */
.hero-canvas{ position: absolute; inset: 0; z-index: -2; opacity: .9; }
.hero::after{
  content:''; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-mesh);
  filter: blur(10px);
}
.hero-grid-lines{
  position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 60% at 50% 30%, black, transparent 75%);
}
/* ============================== animated logo mark — shared keyframes ============================== */
/* Live treatment of the real SkillInflow brand artwork (chrome + gold
   ribbon mark, rendered — not vector paths we can trace/morph): an
   alpha-masked specular sweep (only lights up actual logo pixels), a
   slow breathing amber glow, and bouncing pearl accents. Originally
   built for a large centered hero treatment; moved to the nav (see
   `.nav-logo-*` above, direct request: "I don't want Logo in the
   middle... Move this same animation to top left") — these three
   keyframes are what both the current nav version and that removed
   hero version shared, kept here as the one definition either scale
   animates against. prefers-reduced-motion is handled globally (see
   the reset block above, which already collapses every animation to
   near-instant). */
@keyframes hero-logo-breathe{
  0%,100%{ opacity: .75; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.06); }
}
@keyframes hero-logo-shine{
  0%{ background-position: 150% 0; }
  22%, 100%{ background-position: -120% 0; }
}
@keyframes hero-ball-bounce{
  0%, 45%, 100%{ transform: translate(-50%, -50%) translateY(0) scale(1); }
  15%{ transform: translate(-50%, -50%) translateY(-220%) scale(1, 1.06); }
  28%{ transform: translate(-50%, -50%) translateY(0) scale(1, .7); }
  36%{ transform: translate(-50%, -50%) translateY(-30%) scale(1, .96); }
}
.hero-badge{
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem .5rem .6rem;
  border: 1px solid var(--line-strong); border-radius: 999px; font-size: .8rem; color: var(--ink-dim);
  width: fit-content; margin-bottom: 2rem; background: rgba(255,255,255,.03);
}
.hero-badge .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(94,230,168,.18); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .45; } }

.hero h1{ max-width: 15ch; }
.hero h1 em{ font-style: italic; color: var(--accent); }
.hero-foot{ display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: 3.5rem; flex-wrap: wrap; }
.hero-lede{ max-width: 30em; }
.hero-actions{ display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }

.scroll-hint{
  position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem; font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.scroll-hint .line{ width: 1px; height: 34px; background: linear-gradient(var(--ink-faint), transparent); overflow: hidden; position: relative; }
.scroll-hint .line::after{ content:''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--ink); animation: scrollline 2.2s ease-in-out infinite; }
@keyframes scrollline{ 0%{ top: -100%; } 60%,100%{ top: 100%; } }

/* ============================== marquee ================================= */
.marquee-strip{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 1.5rem; overflow: hidden; }
.marquee-track{ display: flex; width: max-content; gap: 3.5rem; animation: marquee 34s linear infinite; }
.marquee-track span{ font-family: var(--f-mono); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; display: flex; align-items: center; gap: 3.5rem; }
.marquee-track span b{ color: var(--ink-dim); font-weight: 500; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============================== pillars ================================== */
.pillars{ }
.pillar-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 4rem; flex-wrap: wrap; }
.pillar-grid{ grid-template-columns: repeat(3, 1fr); }
.pillar{
  border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 60%);
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
  position: relative; overflow: hidden;
}
.pillar:hover{ border-color: var(--line-strong); transform: translateY(-6px); }
.pillar-num{ font-family: var(--f-mono); font-size: .78rem; color: var(--ink-faint); letter-spacing: .1em; }
.pillar-icon{ width: 40px; height: 40px; margin-block: 1.4rem 1.2rem; color: var(--accent); }
.pillar h3{ font-size: 1.35rem; margin-bottom: .7rem; }
.pillar p{ color: var(--ink-dim); font-size: .95rem; line-height: 1.6; }

/* ============================== spotlight (bookend card) ================= */
/* FIXED (direct report: "website is in multiple parts and each one
   has different color theme... everything should be Gold & Chrome") —
   this card had its own opaque teal-tinted background, which both
   clashed with the gold theme and fully blocked the shared ambient
   gold glow (html::before) from showing through wherever this card
   sat, making the page read as disconnected zones instead of one
   continuous background. */
.spotlight{
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 0% 0%, rgba(217,194,122,.10), transparent 55%), var(--bg-1);
  padding: clamp(2rem, 5vw, 5rem); position: relative; overflow: hidden;
}
.spotlight-grid{ grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.spotlight-tag{ display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bookend); margin-bottom: 1.6rem; }
.spotlight-tag .sq{ width: 8px; height: 8px; background: var(--bookend); }
.spotlight h2{ margin-bottom: 1.4rem; }
.spotlight-list{ display: flex; flex-direction: column; gap: 1rem; margin-top: 2.2rem; }
.spotlight-list li{ display: flex; gap: .9rem; align-items: flex-start; font-size: .95rem; color: var(--ink-dim); }
.spotlight-list svg{ flex: none; margin-top: .2rem; color: var(--bookend); }
.spotlight-actions{ display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; }

/* ---- phone mockup -------------------------------------------------- */
.phone{
  width: min(300px, 74vw); aspect-ratio: 9/19.5; border-radius: 42px; padding: 12px;
  background: linear-gradient(160deg, #23262f, #101218 60%);
  border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04);
  margin-inline: auto; position: relative;
}
.phone::before{ content:''; position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 34%; height: 22px; background: #0a0b0e; border-radius: 14px; z-index: 3; }
.phone-screen{
  width: 100%; height: 100%; border-radius: 32px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #0d1420 0%, #0a0c12 55%);
}
.phone-status{ display: flex; justify-content: space-between; padding: 1.6rem 1.1rem .4rem; font-family: var(--f-mono); font-size: .62rem; color: var(--ink-faint); }
.phone-app{ padding: .8rem 1rem 1.2rem; }
.phone-app-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.phone-app-head .greet{ font-family: var(--f-display); font-size: 1.05rem; }
.phone-avatar{ width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--bookend)); }
.phone-quickadd{
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  padding: .8rem .9rem; font-size: .72rem; color: var(--ink-dim); display: flex; align-items: center; gap: .5rem; min-height: 2.6rem;
}
.phone-quickadd .caret{ display: inline-block; width: 2px; height: .9em; background: var(--bookend); animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity: 0; } }
.phone-cards{ display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
.phone-card{
  border-radius: 12px; padding: .7rem .8rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; gap: .6rem; font-size: .68rem; opacity: 0; transform: translateY(6px);
  animation: cardin .6s var(--ease-soft) forwards;
}
.phone-card i{ width: 7px; height: 7px; border-radius: 50%; flex: none; }
.phone-card .t{ color: var(--ink); font-weight: 600; display: block; }
.phone-card .s{ color: var(--ink-faint); font-size: .62rem; }
@keyframes cardin{ to{ opacity: 1; transform: translateY(0); } }
.phone-fab{ position: absolute; bottom: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; background: var(--bookend); display: flex; align-items: center; justify-content: center; color: #06110d; box-shadow: 0 8px 20px -6px rgba(94,230,196,.6); }

/* ============================== stats ===================================== */
.stats{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-grid{ grid-template-columns: repeat(4, 1fr); padding-block: clamp(3rem,6vw,5rem); }
.stat{ text-align: left; border-left: 1px solid var(--line); padding-left: 1.6rem; }
.stat .num{ font-family: var(--f-display); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); letter-spacing: -.02em; }
.stat .lbl{ color: var(--ink-faint); font-size: .85rem; margin-top: .5rem; }

/* ============================== philosophy ================================ */
.philosophy{ grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pull-quote{ font-family: var(--f-display); font-style: italic; font-size: var(--fs-3); line-height: 1.35; color: var(--ink); }
.pull-quote span{ color: var(--accent); }
.philosophy-list{ display: flex; flex-direction: column; }
.philosophy-item{ padding-block: 1.8rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 3rem 1fr; gap: 1.4rem; }
.philosophy-item:last-child{ border-bottom: 1px solid var(--line); }
.philosophy-item .n{ font-family: var(--f-mono); color: var(--accent); font-size: .85rem; padding-top: .2rem; }
.philosophy-item h4{ font-family: var(--f-body); font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem; }
.philosophy-item p{ color: var(--ink-dim); font-size: .92rem; max-width: 46em; }

/* ============================== roadmap ================================ */
.roadmap-track{ position: relative; padding-top: 1rem; }
.roadmap-line{ position: absolute; left: 0; right: 0; top: 2.1rem; height: 1px; background: var(--line); }
.roadmap-grid{ grid-template-columns: repeat(4, 1fr); position: relative; }
.roadmap-item{ position: relative; padding-top: 2.6rem; }
.roadmap-dot{ position: absolute; top: 1.75rem; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink-faint); }
.roadmap-item.live .roadmap-dot{ background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 4px rgba(94,230,168,.15); }
.roadmap-status{ font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.roadmap-item.live .roadmap-status{ color: var(--ok); }
.roadmap-item h4{ margin-top: .6rem; font-family: var(--f-display); font-size: 1.25rem; font-weight: 500; }
.roadmap-item p{ color: var(--ink-dim); font-size: .88rem; margin-top: .5rem; }

/* ============================== cta band ================================ */
.cta-band{
  border-radius: var(--radius-lg); padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 4rem);
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line); text-align: center; position: relative; overflow: hidden;
}
.cta-band::before{ content:''; position: absolute; inset: 0; background: var(--grad-mesh); opacity: .5; filter: blur(30px); }
.cta-band > *{ position: relative; }
.cta-band h2{ max-width: 18ch; margin-inline: auto; }
.cta-band .lede{ margin-inline: auto; text-align: center; }
.cta-form{ display: flex; gap: .7rem; max-width: 420px; margin: 2.4rem auto 0; flex-wrap: wrap; justify-content: center; }
.cta-input{
  flex: 1 1 220px; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 1em 1.4em; color: var(--ink); font-family: var(--f-body); font-size: .92rem;
}
.cta-input:focus{ outline: none; border-color: var(--accent); background: rgba(255,255,255,.06); }
.cta-input::placeholder{ color: var(--ink-faint); }
.form-note{ font-size: .78rem; color: var(--ink-faint); margin-top: 1rem; }
.form-success{ display: none; align-items: center; justify-content: center; gap: .6rem; color: var(--ok); font-size: .92rem; margin-top: 2.4rem; }
.form-success.show{ display: flex; }

/* ============================== footer ================================== */
.footer{ border-top: 1px solid var(--line); padding-block: 4rem 2.4rem; position: relative; overflow: hidden; }
/* FIXED (direct correction: "keep V20 [layout] — image behind the
   text, covering the whole footer area — but no blurring, no
   cropping, no blacking, nothing, just the whole image sitting
   there"). The image fills the footer exactly, full bleed, with
   object-fit:fill — it scales to the footer's own box directly
   instead of cropping (cover) or padding/fading (the canvas-extend
   versions). The one unavoidable trade-off of "cover the whole area,
   nothing cropped, no added padding" all at once is that the image
   stretches non-uniformly to match the footer's box, since the box's
   own proportions rarely match the photo's original ones exactly. */
.footer-signage{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.footer-signage img{ display: block; width: 100%; height: 100%; object-fit: fill; }
/* FIXED (direct report: "fix the text colors here, it is barely
   visible") — the photo itself is bright and busy (warm spotlights,
   bright metal), so text sitting directly on top of it needs real
   contrast help, not just a tint. A uniform, flat dimming layer (not
   a vignette/edge-fade — those were explicitly rejected earlier) cuts
   the photo's own brightness everywhere evenly, then the text colors
   below were brightened further on top of that. */
.footer-signage::after{ content: ''; position: absolute; inset: 0; background: rgba(8,9,12,.5); }
/* FIXED (direct report: "lots of space there, move to the left") — the
   footer reused the site's shared 1280px content width, but the
   signage photo behind it is full-bleed edge-to-edge, so on wide
   screens the centered 1280px column left a big empty gap between the
   true left edge and the logo. Widened just the footer's wrap so its
   content uses more of the actual viewport, pulling everything left. */
.footer .wrap{ position: relative; z-index: 1; max-width: 1680px; }
/* FIXED (direct reports, most recent: "Platform... overlaying on S,
   move it... beside W of skillinflow... get rid of Get in touch, just
   add email at the bottom") — Get in touch is gone entirely (its email
   moved into the footer-bottom row instead, see .footer-legal below).
   Platform pulled out of the left cluster (which now holds only
   brand+Product, nudged further left) and given its own slot further
   right, past the sign's wordmark, instead of sitting beside Product
   where it landed on top of the S emblem. */
.footer-top{ display: flex; justify-content: flex-start; align-items: flex-start; gap: 2.5rem; padding-bottom: 3rem; flex-wrap: wrap; }
.footer-top-left{ display: flex; gap: .4rem; flex-wrap: wrap; }
/* FIXED (direct report: "you placed Platform in middle of Skillinflow"
   — 30% landed mid-wordmark instead of clear of it). Pushed all the
   way to the right edge instead, past the sign and the wordmark
   entirely, in the same clear space near the glass doorway where "Get
   in touch" used to sit. */
.footer-platform-col{ margin-left: auto; margin-right: 10%; }
/* FIXED (direct request: "make the animation a little bigger and move
   to the left, utilize the space by adjusting the text below it") —
   brand column widened back out now that the bigger logo needs more
   room and the wider footer wrap (above) already gives the columns
   plenty of clearance from the sign; the paragraph no longer needs to
   wrap into a cramped 4-line column. */
.footer-brand{ max-width: 17em; }
.footer-brand p{ color: #fff; font-size: .88rem; max-width: 22em; margin-top: 1rem; text-shadow: 0 1px 8px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,1); }
/* FIXED (direct report: "fix the text colors here, it is barely
   visible") — the cool violet-tinted palette (chosen for the earlier,
   calmer version of this photo) reads poorly against THIS image's
   warm gold spotlights and bright metal. Switched labels to the same
   warm brass/gold already used for the logo's own glow (--accent-2)
   so they read as an intentional match to the photo instead of
   fighting it, and brightened links to solid white with a much
   heavier shadow for real contrast against the busy background. */
.footer-col h5{ font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 1.1rem; text-shadow: 0 1px 8px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,1); }
.footer-col a{ display: block; font-size: .9rem; color: #fff; padding-block: .45rem; transition: color .25s; text-shadow: 0 1px 8px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,1); }
.footer-col a:hover{ color: var(--accent-2); }
.footer-bottom{ display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 1rem; position: relative; z-index: 1; }
.footer-bottom p{ font-size: .8rem; color: #e6e6f0; text-shadow: 0 1px 8px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,1); }
.footer-legal{ display: flex; gap: 1.4rem; }
.footer-legal a{ font-size: .8rem; color: #e6e6f0; transition: color .25s; text-shadow: 0 1px 8px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,1); }
.footer-legal a:hover{ color: var(--accent-2); }
/* Mail link now carries its own icon inline (used to live in a separate
   .footer-social row alongside X/GitHub icons that pointed nowhere real
   — href="#" — so they were dead links; removed rather than fixed since
   there's no live X/GitHub presence to link to yet). */
.footer-legal a.footer-mail{ display: inline-flex; align-items: center; gap: .4em; }
.footer-legal a.footer-mail svg{ flex: none; }

/* ============================== responsive =============================== */
@media (max-width: 1000px){
  .pillar-grid, .g-3{ grid-template-columns: repeat(2, 1fr); }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-top-left{ gap: 2.4rem; }
  .spotlight-grid{ grid-template-columns: 1fr; }
  .philosophy{ grid-template-columns: 1fr; }
  .roadmap-grid{ grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .roadmap-line{ display: none; }
}
@media (max-width: 640px){
  .pillar-grid, .g-3, .g-2{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .roadmap-grid{ grid-template-columns: 1fr; }
  .hero-foot{ flex-direction: column; align-items: flex-start; }
  /* FIXED (mobile audit: scroll hint overlapping the "How we build"
     button) — once the hero's lede+buttons stack vertically on
     mobile, the total content grows tall enough to collide with the
     fixed-position scroll hint at the bottom of the hero. Hidden on
     mobile — swipe-to-scroll is already the expected gesture there,
     so the hint is a desktop-only affordance anyway. */
  .scroll-hint{ display: none; }

  /* FIXED (direct reports, several rounds on this one mobile footer:
     1) full-bleed stretch made the sign's own text collide with real
        links; 2) moving the image above all the text instead read as
        "text should be on the image"; 3) final direction — logo lifted
        clear above the image (no longer overlapping it), the
        description dropped entirely on mobile, and Product/Platform
        moved back onto the image side-by-side (fitting in the space
        the description used to take), with only the copyright/legal/
        social row flowing below the image on the plain background.
     Desktop is completely untouched — everything here lives only
     inside this existing mobile breakpoint. */
  .footer-brand p{ display: none; }
  /* NOTE: .footer-logo-stage lives inside .wrap, which itself has
     position:relative (see ".footer .wrap" rule above) — so this
     absolute positioning is relative to .wrap's own box, which
     already starts AFTER the footer's reserved 5.5rem padding-top
     (i.e. at the same Y as the image's top edge), not relative to
     .footer itself. A negative top pulls it back up into that
     reserved space above the image instead of down onto it. */
  .footer-logo-stage{ position: absolute; top: -4rem; left: var(--gutter); z-index: 2; }
  .footer{ padding-top: 5.5rem; }
  /* FIXED (direct report: "Platform and Product is covering the
     image" — with both headers AND their links overlaid, the text
     dominated the compact mobile image). Only "PRODUCT"/"PLATFORM"
     overlay the photo now, not their links.
     FIXED again (direct report: "looks like you have reduced the size
     of the image" — shrinking the image ITSELF to fit just the header
     text made the photo tiny/cramped, which wasn't the ask). Image
     kept at a proper, visible size; instead the header gets a large
     margin-bottom pushing the links down to start exactly where the
     (full-size) image ends, so the photo has real presence and still
     nothing but the two header labels sit on top of it. */
  .footer-signage{ inset: 5.5rem 0 auto 0; height: 200px; }
  .footer-signage img{ height: 100%; object-fit: cover; }
  .footer-top{ flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 1.75rem; padding-bottom: 1.75rem; }
  .footer-top-left{ flex-direction: row; gap: 1.75rem; }
  .footer-platform-col{ margin: 0; }
  /* FIXED (direct report: "there is lots of gap, shift Product and
     Platform to the bottom of the image") — the big spacer was on
     margin-bottom, keeping the header pinned at the TOP of the image
     with all the empty space (and the gap it created) sitting below
     it, before the links. Moved the same spacer to margin-top instead,
     so the header now sits right at the image's bottom edge with the
     links continuing immediately after — no gap. */
  .footer-col h5{ margin-top: 165px; margin-bottom: 1.1rem; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}

/* ============================== bookend page specific ==================== */
[data-theme="bookend"]{ --accent: var(--bookend); --accent-ink: #0a0710; }
[data-theme="bookend"] .eyebrow{ color: var(--bookend); }
[data-theme="bookend"] .eyebrow::before{ background: var(--bookend); }
[data-theme="bookend"] ::selection{ background: var(--bookend); color: #0a0710; }
[data-theme="bookend"] .hero::after{ background: var(--grad-mesh); }

.feature-row{ grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.feature-row.reverse .feature-visual{ order: 2; }
.feature-item{ padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); align-items: center; }
.feature-item:first-of-type{ border-top: none; }
.feature-visual{
  border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--bg-1); aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 2rem;
}
.feature-copy .num{ font-family: var(--f-mono); color: var(--bookend); font-size: .82rem; letter-spacing: .12em; margin-bottom: 1.2rem; display: block; }
.feature-copy h3{ margin-bottom: 1rem; max-width: 14ch; }
.feature-copy p{ color: var(--ink-dim); max-width: 34em; }
.feature-copy .tags{ display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 1.6rem; }
.feature-copy .tags span{ font-family: var(--f-mono); font-size: .7rem; padding: .4em .8em; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-dim); }

/* Real app screenshots dropped into the existing .phone device frame,
   in place of a few of the abstract SVG/CSS mockups — undistorted
   (the frame's 9/19.5 aspect ratio matches the real screenshots'
   720x1560 exactly), so no crop or stretch is needed. */
.feature-visual.has-screenshot{ aspect-ratio: auto; background: transparent; border: 0; padding: 0; }
.shot-frame img{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 32px; }
.feature-visual.has-pair{ display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; }
.phone.shot-frame-sm{ width: min(200px, 40vw); }

/* ---- at-a-glance slideshow ---- */
.glance-slideshow{ display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: 3rem; }
.glance-visual .phone{ margin-inline: auto 0; }
.glance-slide{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 32px; opacity: 0; transition: opacity .7s var(--ease); }
.glance-slide.active{ opacity: 1; z-index: 1; }
.glance-tag{ font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bookend); }
.glance-text{ display: none; }
.glance-text.active{ display: block; animation: glanceFadeIn .5s var(--ease); }
.glance-text h3{ margin: .8rem 0 .8rem; }
.glance-text p{ color: var(--ink-dim); max-width: 38em; }
@keyframes glanceFadeIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: translateY(0); } }
.glance-dots{ display: flex; gap: .7rem; margin-top: 2.2rem; }
.glance-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); border: 0; cursor: pointer; padding: 0; transition: background .3s, transform .3s; }
.glance-dot.active{ background: var(--bookend); transform: scale(1.35); }
@media (max-width: 760px){
  .glance-slideshow{ grid-template-columns: 1fr; }
  .glance-visual .phone{ margin-inline: auto; }
}

.compare{ width: 100%; border-collapse: collapse; }
.compare th, .compare td{ padding: 1.1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .92rem; }
.compare th{ font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.compare td.yes{ color: var(--bookend); }
.compare td.no{ color: var(--ink-faint); }
.compare tr td:first-child, .compare tr th:first-child{ color: var(--ink); font-weight: 600; }
.compare-wrap{ overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.compare-wrap table{ min-width: 640px; }

.faq{ border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{ width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 0; text-align: left; gap: 1rem; }
.faq-q h4{ font-family: var(--f-body); font-weight: 600; font-size: 1.02rem; }
.faq-plus{ position: relative; width: 18px; height: 18px; flex: none; }
.faq-plus::before, .faq-plus::after{ content:''; position: absolute; background: var(--ink); transition: transform .35s var(--ease); }
.faq-plus::before{ top: 50%; left: 0; width: 100%; height: 1.5px; translate: 0 -50%; }
.faq-plus::after{ left: 50%; top: 0; height: 100%; width: 1.5px; translate: -50% 0; }
.faq-item.open .faq-plus::after{ transform: rotate(90deg); opacity: 0; }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq-a p{ color: var(--ink-dim); padding-bottom: 1.6rem; max-width: 46em; font-size: .95rem; }

.privacy-band{
  border-radius: var(--radius-lg); border: 1px solid var(--line); padding: clamp(2rem,5vw,4rem);
  background: linear-gradient(160deg, rgba(94,230,196,.06), transparent);
  grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.privacy-band ul{ display: flex; flex-direction: column; gap: 1rem; }
.privacy-band li{ display: flex; gap: .8rem; font-size: .95rem; color: var(--ink-dim); }
.privacy-band svg{ color: var(--bookend); flex: none; margin-top: .15em; }

.timeline-alert{
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); padding: 1.6rem;
  display: flex; flex-direction: column; gap: 1rem; width: 100%;
}
.timeline-alert .row{ display: flex; align-items: center; gap: .8rem; }
.timeline-alert .ring{ width: 44px; height: 44px; border-radius: 50%; background: rgba(94,230,196,.12); border: 1px solid rgba(94,230,196,.3); display: flex; align-items: center; justify-content: center; color: var(--bookend); flex: none; animation: ringpulse 1.8s ease-in-out infinite; }
@keyframes ringpulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(94,230,196,.35); } 50%{ box-shadow: 0 0 0 10px rgba(94,230,196,0); } }
.timeline-alert .title{ font-weight: 700; font-size: .95rem; }
.timeline-alert .sub{ font-size: .78rem; color: var(--ink-faint); }
.timeline-alert .stop{ margin-left: auto; font-family: var(--f-mono); font-size: .7rem; color: var(--ink-faint); border: 1px solid var(--line-strong); border-radius: 999px; padding: .4em .9em; }

/* ============================== bookend page — mobile ==================
   FIXED (mobile audit — real bug: privacy checklist text overflowing
   off the right edge of the screen). This lives in its own late block
   rather than the earlier shared @media(max-width:1000px) further up
   the file: this page's own rules (.privacy-band etc.) are defined
   AFTER that earlier block, so an override placed there would lose to
   these later, unconditional base rules regardless of viewport —
   same specificity, later source order wins. Appending a fresh media
   query down here, after every rule it needs to beat, is what
   actually makes it win. */
@media (max-width: 1000px){
  .privacy-band{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  /* FIXED (mobile audit — real bug: feature rows (Quick Add, QNTessa,
     etc.) had no mobile override at all, unlike every other multi-
     column section on the page. Each row still rendered as a genuine
     2-column grid at 375px width, squeezing the copy into a ~155px
     column with extremely choppy 3-4-word line wraps and the phone
     screenshot at the same cramped width. Stacked to one column,
     matching how every other section on this page already behaves
     on mobile. */
  .feature-row{ grid-template-columns: 1fr; }
  .feature-row .feature-visual{ margin-inline: auto; }
  .feature-row.reverse .feature-visual{ order: 0; }
  /* FIXED (mobile audit — real bug: the FAQ section's two-column grid
     is set via an inline style="grid-template-columns:.8fr 1.2fr" on
     the element itself. Inline styles win over any external stylesheet
     rule regardless of specificity or source order (short of
     !important), so the shared .g-2 mobile override above never had
     any effect here — the "Good to know" heading stayed pinned to a
     narrow left column while the questions were squeezed into an
     equally narrow right column. !important is the only way to beat
     an inline style from a stylesheet. */
  #faq.section > .grid{ grid-template-columns: 1fr !important; }
}