/* ═══════════════════════════════════════════════════════════════
   AHMEDMEDIAGROUP - Studio Site
   "Alturos" direction - deep teal-black · aqua grid floor · glass
   Plus Jakarta Sans + Playfair Display italic accent
   ═══════════════════════════════════════════════════════════════ */

/* Self-hosted variable fonts.
   Plus Jakarta Sans - UI / display / body (400–800).
   Playfair Display - italic serif accent only (500–700).
   Fraunces - editorial serif (OFL); used only on the Convertable app page,
   matching the app's own display font. */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/jakarta.v2.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/fonts/fraunces.v2.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('/fonts/playfair-italic.v2.woff2') format('woff2');
}

/* ── 1. Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-offset) + var(--nav-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html { overflow-x: clip; color-scheme: dark; }   /* native scrollbars, form controls and autofill match the dark page */
html:has(body.app-theme--convertable) { color-scheme: light; }   /* decorative overhang (phone mockups, glows) never causes sideways scroll */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body > main { flex: 1 0 auto; }
body > .footer { flex: 0 0 auto; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); border-radius: 8px; }
::selection { background: rgba(48, 190, 224, 0.26); color: #fff; }

/* ── 2. Tokens ────────────────────────────────────────────────────
   The whole design system lives here. Components never hard-code a size,
   space, radius, colour, weight, shadow, duration or z-index: they use
   these. Breakpoints cannot be variables, so there are exactly three,
   and every media query uses one of them:
     sm  480px  phones          md  720px  tablets          lg  920px  desktop
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces - deep petrol blue-black */
  --bg:        #06121b;   /* page */
  --bg-deep:   #030b12;   /* darker pockets, inputs */
  --bg-soft:   #0a1a26;

  /* Glass surfaces (rgba over bg) */
  --glass:     rgba(200, 238, 255, 0.028);
  --glass-2:   rgba(200, 238, 255, 0.050);
  --glass-3:   rgba(200, 238, 255, 0.080);
  --field:     var(--glass-3);   /* form fields share the chat composer's slate */

  /* Floating chrome (nav, drawer, consent, toast, dialog, tooltip) */
  --surface-float:        rgba(5, 14, 21, 0.92);
  --surface-float-strong: rgba(5, 14, 21, 0.97);
  --surface-nav:          rgba(7, 19, 28, 0.66);
  --scrim:                rgba(2, 8, 13, 0.62);

  /* Hairlines */
  --line:        rgba(150, 205, 240, 0.10);
  --line-strong: rgba(150, 205, 240, 0.17);
  --line-accent: rgba(48, 190, 224, 0.40);

  /* Logo mark colours (sampled from favicon.png): the orb and other brand moments derive from these */
  --brand-navy:    #0a1f40;
  --brand-blue:    #0088ff;

  /* Turquoise-blue accent */
  --accent:        #34c8e6;
  --accent-bright: #6fdcf4;
  --accent-deep:   #1593bb;
  --accent-soft:   #a6e1f1;
  --accent-glow:   rgba(48, 190, 224, 0.50);
  --accent-wash:   rgba(48, 190, 224, 0.09);
  --ring:          rgba(48, 190, 224, 0.6);
  --grid-rgb:      48, 190, 224;

  /* Status colours */
  --emerald:   #2fd6c0;   /* success / live */
  --danger:    #fb7185;   /* error */
  --warning:   #fbbf24;   /* caution */

  /* Light primary (the white pill) */
  --white:      #f2faff;
  --white-ink:  #04212e;
  --pure:       #ffffff;
  --black:      #000000;

  /* Text */
  --text:      #eef8fd;
  --text-body: #a4b7c6;
  --text-soft: #6d8492;
  --text-dim:  #475a67;

  /* Type families */
  --sys:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:  "Plus Jakarta Sans", var(--sys);
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale - fixed steps for UI text */
  --fs-2xs:  0.6875rem;   /* 11  micro labels, status pills */
  --fs-xs:   0.75rem;     /* 12  captions, chips, footer */
  --fs-sm:   0.8125rem;   /* 13  small print, banners */
  --fs-md:   0.875rem;    /* 14  nav, buttons (small), card meta */
  --fs-body: 0.9375rem;   /* 15  UI body, buttons, inputs */
  --fs-base: 1rem;        /* 16  reading text */
  --fs-lg:   1.125rem;    /* 18  intro text */
  --fs-xl:   1.25rem;     /* 20  card titles */
  /* Type scale - fluid steps for headings and lead copy */
  --fs-lead: clamp(1.0625rem, 0.55vw + 1rem, 1.25rem);
  --fs-h4:   clamp(1.25rem, 1.4vw + 0.95rem, 1.5rem);
  --fs-h3:   clamp(1.3125rem, 0.7vw + 1.15rem, 1.625rem);
  --fs-h2:   clamp(1.95rem, 3.4vw + 0.4rem, 3.15rem);
  --fs-h1:   clamp(2.15rem, 5.8vw + 0.3rem, 5rem);
  --fs-h1-md: clamp(2.4rem, 5vw + 0.3rem, 4rem);  /* hero + app pages */
  --fs-h1-sm: clamp(2.3rem, 4.5vw, 3.1rem);       /* legal pages */

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line heights */
  --lh-none:    1.02;
  --lh-tight:   1.08;
  --lh-snug:    1.28;
  --lh-base:    1.6;
  --lh-relaxed: 1.78;

  /* Letter spacing */
  --ls-tighter: -0.04em;
  --ls-tight:   -0.025em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-caps:    0.08em;    /* uppercase labels */

  /* Spacing - 4px base. Use these for every padding, margin and gap. */
  --sp-1:  0.25rem;    /*  4 */
  --sp-2:  0.5rem;     /*  8 */
  --sp-3:  0.75rem;    /* 12 */
  --sp-4:  1rem;       /* 16 */
  --sp-5:  1.25rem;    /* 20 */
  --sp-6:  1.5rem;     /* 24 */
  --sp-8:  2rem;       /* 32 */
  --sp-10: 2.5rem;     /* 40 */
  --sp-12: 3rem;       /* 48 */
  --sp-16: 4rem;       /* 64 */
  --sp-1h: 0.375rem;   /*  6  half step, for tight chips and pills */

  /* Radius */
  --r-xs:    6px;
  --r-sm:    9px;
  --r-md:    13px;
  --r-lg:    18px;
  --r-xl:    26px;
  --r-glyph: 26%;      /* app-icon squircle */
  --r-pill:  999px;
  --r-circle: 50%;

  /* Shadow */
  --shadow-nav:  0 18px 46px -26px rgba(0,0,0,0.85);
  --shadow-card: 0 34px 64px -38px rgba(0,0,0,0.9);
  --shadow-btn:  0 10px 30px -14px rgba(48,190,224,0.3);
  --shadow-btn-hover: 0 12px 32px -14px rgba(48,190,224,0.42);
  --edge-top:    inset 0 1px 0 rgba(255,255,255,0.06);

  /* Motion */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 400ms;
  --dur-reveal: 700ms;

  /* Layering */
  --z-base:    1;
  --z-card:    4;
  --z-edge:    6;
  --z-drawer:  99;
  --z-nav:     100;
  --z-consent: 200;
  --z-toast:   210;
  --z-modal:   300;

  /* Layout */
  --container:  1180px;
  --gutter:     clamp(1.15rem, 3.5vw, 2rem);
  --nav-h:      56px;
  --nav-offset: 16px;
  --control-h:  48px;   /* default button / input height */
  --measure:      40rem;   /* lead + intro copy */
  --measure-form: 32rem;   /* single-line forms */
  --measure-prose: 44rem;  /* long-form reading */
}

/* ── 3. Base typography ───────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--text-body);
  background: var(--bg);
  overflow-x: hidden;
  position: relative;
}
/* Page atmosphere - soft petrol glows + vignette (grid lives in hero canvas) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 760px at 80% -12%, rgba(48,190,224,0.07), transparent 60%),
    radial-gradient(820px 620px at 0% 6%, rgba(18,64,98,0.34), transparent 58%),
    radial-gradient(1200px 900px at 50% 122%, rgba(48,190,224,0.05), transparent 60%),
    radial-gradient(150% 120% at 50% 0%, transparent 62%, rgba(0,0,0,0.42));
}
/* Premium film grain - subtle static texture */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }
main, .footer { position: relative; z-index: 1; }

h1, h2, h3 {
  font-family: var(--font-sans);
  color: var(--text);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tighter); line-height: var(--lh-none); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
p  { color: var(--text-body); }
strong { color: var(--text); font-weight: var(--fw-bold); }

/* Brushed-silver headline - light at top, cool silver toward the base.
   The clip region is bounded by the (tight) line box, so descenders like
   "g"/"p" and italic tails fall outside the painted gradient and get cut.
   A little vertical padding extends the paint area to cover them. */
h1, h2 {
  background: linear-gradient(177deg, var(--pure) 0%, #f3f6f9 38%, #b4bfcc 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
h1 .ital, h2 .ital { -webkit-text-fill-color: transparent; color: transparent; }

/* The signature italic-serif accent word */
.ital {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  color: var(--text);
}
h1 .ital { font-weight: var(--fw-medium); }

.lead {
  font-size: var(--fs-lead);
  color: var(--text-body);
  line-height: var(--lh-base);
  max-width: var(--measure);
}

/* ── 4. Layout primitives ─────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(2.75rem, 5.5vw, 5rem); position: relative; }
.center { text-align: center; }

/* Kicker - a quiet eyebrow label (used only where it adds information) */
.kicker {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--accent);
}

.section-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 3vw, 2.5rem); }
.section-cta { margin-top: var(--sp-10); }
.section-head.center { margin-inline: auto; }
.section-head .kicker { margin-bottom: var(--sp-4); }
.section-head h2 { margin-top: var(--sp-1); }
.section-head .lead { margin-top: var(--sp-4); text-wrap: balance; }
.section-head.center .lead { margin-inline: auto; max-width: var(--measure); }

/* ── 5. Buttons ───────────────────────────────────────────────── */
.btn {
  --h: var(--control-h);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--h); padding: 0 var(--sp-6);
  font-family: var(--font-sans);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug);
  border-radius: var(--r-pill); white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; }
/* The Apple mark is bottom-heavy (small leaf, heavy body), so optically centre it */
.btn .ico-apple { width: 1.1em; height: 1.1em; transform: translateY(-0.08em); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--white); color: var(--white-ink); box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: var(--pure); box-shadow: var(--shadow-btn-hover); }
.btn--ghost { background: var(--glass); color: var(--text); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--line-accent); background: var(--glass-2); }
.btn--ghost svg { color: var(--accent); }
.btn--sm { --h: 40px; padding: 0 var(--sp-4); font-size: var(--fs-md); }
.btn--lg { --h: 54px; padding: 0 var(--sp-8); font-size: var(--fs-base); }
.btn--block { width: 100%; }

.arrow-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--accent);
}
.arrow-link svg { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ── 5b. Chip (suggestion / filter pill) ─────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 34px; padding: 0 var(--sp-4);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-body);
  background: var(--glass); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
button.chip:hover, a.chip:hover { color: var(--text); border-color: var(--line-accent); background: var(--glass-2); transform: translateY(-1px); }
.chip[aria-pressed="true"], .chip.is-active { color: var(--white-ink); background: var(--white); border-color: var(--white); }

/* ── 6. Glass card ────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-top), var(--shadow-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── 7. Nav - floating glass pill ─────────────────────────────── */
.nav {
  view-transition-name: site-nav;
  position: fixed; top: var(--nav-offset); left: 50%; transform: translateX(-50%);
  z-index: var(--z-nav);
  width: max-content;
  max-width: calc(100% - (var(--gutter) * 1.4));
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--sp-6);
  padding: 0 var(--sp-2) 0 var(--sp-5);
  background: var(--surface-nav);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--edge-top), var(--shadow-nav);
  transition: top var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav.is-scrolled { top: 10px; background: color-mix(in srgb, var(--surface-float) 96%, transparent); border-color: var(--line-strong); }

.brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); }
.brand__logo { height: 36px; width: auto; display: block; }
@media (max-width: 480px) { .brand__logo { height: 31px; } }

.nav-links { display: inline-flex; align-items: center; gap: var(--sp-6); }
.nav-links a { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-body); transition: color var(--dur) var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-1h); }
.nav-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-circle); color: var(--white-ink); background: var(--white); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease); }
.nav-icon svg { width: 18px; height: 18px; margin: 0 2px 2px 0; }
.nav-icon--download svg { margin: 0; width: 20px; height: 20px; }
.nav-icon:hover { transform: scale(1.06); box-shadow: var(--shadow-btn-hover); }

@media (max-width: 919px) { .nav-actions .btn--primary { display: none; } }
@media (max-width: 480px) { .nav { max-width: calc(100% - 16px); padding: 0 var(--sp-2) 0 var(--sp-4); } }
/* One header everywhere: same pill, same items, same place. App pages swap only the action's icon and link. */
html { scrollbar-gutter: stable; }
.nav { --font-sans: "Plus Jakarta Sans", var(--sys); }   /* an app theme may change the page font, never the header's */



/* ── 8. Hero - a grid floor, the headline and a chat prompt ───── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: clamp(8rem, 16vw, 11rem);
  padding-bottom: clamp(var(--sp-12), 8vw, 6rem);
}
/* Background: a brushed texture, a slow diagonal light sweep, and the ribbon canvas */
.hero__bg {
  position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent 0%, var(--black) 14%, var(--black) 72%, transparent 100%);
          mask: linear-gradient(to bottom, transparent 0%, var(--black) 14%, var(--black) 72%, transparent 100%);
}
.hero__bg::before {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 3px);
}
.hero__bg::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 80%;
  background: linear-gradient(112deg, transparent 28%, rgba(255,255,255,0.05) 44%, transparent 58%);
  animation: hero-sweep 22s var(--ease) infinite alternate; will-change: transform;
}
.hero__bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes hero-sweep { to { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) { .hero__bg::after { animation: none; transform: translateX(60%); } }
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { max-width: 16ch; }
.hero h1 .line { display: block; }

/* ── 8b. Chat - a plain prompt ───────────────────────── */
.chat { display: flex; flex-direction: column; width: 100%; max-width: 720px; margin-top: clamp(var(--sp-8), 4vw, var(--sp-12)); text-align: left; }
.chat { position: relative; isolation: isolate; }
/* A soft page-coloured backdrop behind the conversation, so text never fights the ribbon */
.chat::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--sp-12) * -1) calc(var(--sp-16) * -1);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 94%, transparent) 55%, transparent 100%);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.chat.is-open::before { opacity: 1; }
.hero__bg canvas { transition: opacity var(--dur-slow) var(--ease-out); }
.hero:has(.chat.is-open) .hero__bg canvas { opacity: 0.4; }
/* The window is closed until the first message, then opens to a fixed height; longer chats scroll inside it. */
.chat__log {
  display: flex; flex-direction: column; gap: var(--sp-6);
  height: 0; margin-bottom: 0; padding-inline: var(--sp-2);
  overflow: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  -webkit-mask: linear-gradient(to bottom, transparent 0, var(--black) 28px, var(--black) 100%);
          mask: linear-gradient(to bottom, transparent 0, var(--black) 28px, var(--black) 100%);
  transition: height var(--dur) var(--ease-out), margin var(--dur) var(--ease-out);
}
.chat.is-open .chat__log { margin-bottom: var(--sp-5); padding-top: var(--sp-6); padding-bottom: 3px; }   /* 3px: a chip or card on the last line is never shaved by the scroll box */
.chat__log::-webkit-scrollbar { width: 6px; }
.chat__log::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }
.chat__log::-webkit-scrollbar-track { background: transparent; }
.chat__log > .msg:first-child { margin-top: auto; }   /* a short chat sits at the bottom, next to the composer */
.msg { display: flex; max-width: 100%; animation: msg-in var(--dur) var(--ease-out) both; }
.msg--user { align-self: flex-end; max-width: 85%; }
.msg__bubble { text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 80%, transparent); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text); overflow-wrap: anywhere; }
.msg--user .msg__bubble { padding: var(--sp-3) var(--sp-5); line-height: var(--lh-base); background: var(--glass-3); border-radius: var(--r-xl); }
.msg__bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.msg__bubble strong { color: inherit; font-weight: var(--fw-semibold); }
.msg__link { display: block; margin-top: var(--sp-2); }
/* Waiting for a reply: one soft dot, breathing. No typing dots, no blinking caret. */
.thinking { display: flex; gap: 5px; align-items: center; height: 1.6em; }
.thinking i { width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--text-soft); animation: thinking 1.2s var(--ease) infinite; }
.thinking i:nth-child(2) { animation-delay: 0.15s; }
.thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinking { 0%, 70%, 100% { opacity: 0.25; transform: translateY(0) scale(0.85); } 35% { opacity: 0.95; transform: translateY(-4px) scale(1); } }
.msg--bot { flex-direction: column; align-items: flex-start; gap: 4px; }
.msg__who { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-soft); }
.msg--user { animation: none; }   /* a sent message flies in from the field (js), see flyIn */
.caret { display: inline-block; width: 7px; height: 7px; margin-left: 4px; vertical-align: 0.05em; border-radius: var(--r-circle); background: var(--text-soft); animation: caret 1s var(--ease) infinite; }
@keyframes caret { 50% { opacity: 0.2; } }
.msg__chips .chip, .linkcard { animation: rise 0.38s var(--ease-out) both; }
.msg__chips .chip:nth-child(2) { animation-delay: 0.05s; }
.msg__chips .chip:nth-child(3) { animation-delay: 0.1s; }
.msg__chips .chip:nth-child(4) { animation-delay: 0.15s; }
.msg__chips .chip:nth-child(n+5) { animation-delay: 0.2s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
/* Replies are Markdown: paragraphs, lists, code. */
.msg__bubble > :first-child { margin-top: 0; }
.msg__bubble > :last-child { margin-bottom: 0; }
.msg__bubble p { margin: 0 0 var(--sp-3); }
.msg__bubble ul, .msg__bubble ol { margin: 0 0 var(--sp-3); padding-left: 1.3em; }
.msg__bubble ul { list-style: disc; }
.msg__bubble li { margin: 0 0 var(--sp-1); padding-left: 0.2em; }
.msg__bubble li::marker { color: var(--text-soft); }
.msg__bubble em { font-style: italic; }
.msg__bubble code { font-family: var(--font-mono); font-size: 0.9em; padding: 0.12em 0.4em; border-radius: var(--r-sm); background: var(--glass-3); }
/* Link cards under a reply: our own pages, docs and apps. */
.linkcards { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.linkcard { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-lg); color: var(--text); text-decoration: none; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.msg__bubble a.linkcard { color: var(--text); text-decoration: none; }
.linkcard:hover { border-color: var(--line-accent); background: var(--glass-2); }
.linkcard:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); }
.linkcard__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.linkcard__site { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-soft); }
.linkcard__site img { width: 16px; height: 16px; border-radius: 4px; }
.linkcard__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.3; }
.linkcard__desc { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linkcard__img { flex: none; width: 56px; height: 56px; border-radius: var(--r-md); object-fit: cover; }
.composer {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 64px; padding: 0 var(--sp-3) 0 var(--sp-6);
  background: var(--glass-3); border: 1px solid transparent; border-radius: var(--r-pill);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.composer:focus-within { border-color: var(--line-accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.composer input { flex: 1 1 auto; min-width: 0; height: 100%; background: none; border: 0; color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); }
.composer input::placeholder { color: var(--text-soft); }
.composer input:focus, .composer input:focus-visible { outline: none; box-shadow: none; border-radius: 0; }
.composer__mic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-circle); color: var(--text-soft); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.composer__mic[hidden] { display: none; }
.composer__mic svg { width: 20px; height: 20px; }
.composer__mic:hover { color: var(--text); background: var(--glass-3); }
.composer__mic.is-listening { color: var(--white-ink); background: var(--accent); animation: mic-pulse 1.4s var(--ease) infinite; }
@keyframes mic-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.composer__send { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-circle); color: var(--white-ink); background: var(--white); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.composer__send svg { width: 20px; height: 20px; }
.composer__send .ico-stop { display: none; }
.composer__send.is-stop .ico-send { display: none; }
.composer__send.is-stop .ico-stop { display: block; }
.composer__send:hover:not(:disabled) { transform: scale(1.05); }
.composer__send:disabled { opacity: 0.35; }
.composer .bot-check { position: absolute; }
/* Contact chat: the same window and composer as the hero chat, in a fixed-height box (the height the old form had),
   so the section never changes size. The composer is pinned to the bottom; the message list scrolls above it. */
.chat--contact { --chat-h: min(499px, calc(100dvh - 7.5rem)); max-width: none; margin-top: 0; height: var(--chat-h); min-height: 340px; }
.chat--contact::before { display: none; }
.chat--contact .chat__log { flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto; padding-inline: 0; padding-top: var(--sp-6); margin-bottom: var(--sp-5); transition: none; }
.chat--contact .composer { flex: none; background: var(--field); border-color: var(--line); }
.chat--contact .composer:focus-within { border-color: var(--line-accent); }
/* Voice mode: a speaking orb in place of the message list. The composer stays pinned below it. */
.chat--contact.is-voice .chat__log { visibility: hidden; }
.voice { position: absolute; inset: 0 0 calc(64px + var(--sp-5)) 0; z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr) 3.1em 4.4rem; gap: var(--sp-3); justify-items: center; text-align: center; animation: voice-in var(--dur-slow) var(--ease-out) both; }
.voice[hidden] { display: none; }
@keyframes voice-in { from { opacity: 0; } }
/* Fixed zones: the orb fills what is left, the text line and the choices have set heights, so nothing ever moves or resizes. */
.voice__stage { min-height: 0; width: 100%; display: grid; place-items: center; }
.voice__orb { position: relative; overflow: hidden; contain: layout paint size; grid-area: 1 / 1; height: 100%; max-height: 320px; max-width: 100%; aspect-ratio: 1; padding: 0; border-radius: var(--r-circle); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.voice__orb:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); }
/* One quiet line: two lines at most, centred, older words fade at the top, new lines cross-fade. */
.voice__line { position: relative; width: 100%; max-width: 40ch; padding-inline: clamp(var(--sp-5), 8%, var(--sp-10)); font-size: var(--fs-sm); line-height: 1.5; }
.voice__layer { position: absolute; inset: 0 clamp(var(--sp-5), 8%, var(--sp-10)); margin: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: var(--text); opacity: 0; transition: opacity var(--dur) var(--ease); overflow-wrap: anywhere; -webkit-mask: linear-gradient(to bottom, transparent 0, var(--black) 1.1em); mask: linear-gradient(to bottom, transparent 0, var(--black) 1.1em); }
.voice__layer.is-on { opacity: 1; }
.voice__layer.is-you { color: var(--text-soft); }
.voice__extras { width: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: var(--sp-2); }
.voice__email { display: flex; gap: var(--sp-2); align-items: center; width: min(360px, 100%); }
.voice__email input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--field); color: var(--text); font-size: var(--fs-body); }
.voice__email input:focus { outline: none; border-color: var(--line-accent); box-shadow: 0 0 0 3px var(--accent-wash); }
/* The mic in the input row is the only voice control: filled while voice mode is on, a soft ring while live. */
.composer__mic[aria-pressed="true"] { color: var(--pure); background: var(--brand-blue); }
.composer__mic[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--brand-blue) 82%, var(--white)); color: var(--pure); }
.composer__mic[aria-pressed="true"][data-live="1"] { animation: mic-live 1.8s var(--ease) infinite; }
@keyframes mic-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-blue) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (max-width: 480px) { .voice { inset: 0 0 calc(56px + var(--sp-5)) 0; } }
@media (prefers-reduced-motion: reduce) { .voice { animation: none; } .composer__mic[aria-pressed="true"][data-live="1"] { animation: none; } .voice__line { scroll-behavior: auto; } }
/* Quick replies under a question: plain outlined pills, never filled buttons. */
.msg__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chip { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--text); font-size: var(--fs-sm); line-height: 1.3; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.chip:hover { border-color: var(--line-accent); background: var(--glass-2); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
@media (max-width: 480px) { .composer { height: 56px; padding-left: var(--sp-5); } .composer__send, .composer__mic { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .chat__log { transition: none; } .msg { animation: none; } .thinking i, .caret, .msg__chips .chip, .linkcard { animation: none; } .chat__log { scroll-behavior: auto; } .composer__mic.is-listening { animation: none; } }

/* ── 9. Capabilities (feature bento) ──────────────────────────── */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.2rem); }
.feature {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-top);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.feature:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.feature h3 { color: var(--text); margin-top: 0; }
.feature p { font-size: var(--fs-body); line-height: var(--lh-base); }
.feature__glyph {
  width: 46px; height: 46px; border-radius: var(--r-glyph); margin-bottom: var(--sp-1);
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, var(--accent-wash), transparent 60%), var(--glass-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--edge-top);
}
.feature__glyph svg { width: 50%; height: 50%; color: var(--accent); }

.feature--wide { grid-column: span 2; }
.features--platforms { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.features--platforms .feature { grid-column: span 2; }
.features--platforms .feature:nth-child(n+4) { grid-column: span 3; }

.card { position: relative; }

@media (max-width: 919px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features--platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features--platforms .feature, .features--platforms .feature:nth-child(n+4) { grid-column: span 1; }
  .features--platforms .feature:last-child { grid-column: span 2; }
}
@media (max-width: 480px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .feature--wide { grid-column: span 1; }
  .features--platforms { grid-template-columns: minmax(0, 1fr); }
  .features--platforms .feature:last-child { grid-column: span 1; }
  .features--platforms .feature { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-1); padding: var(--sp-5); }
  .features--platforms .feature__glyph { grid-row: 1 / span 2; margin: 0; }
}


/* ── 11. Portfolio (bento glass cards) ────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(0.9rem, 1.6vw, 1.2rem); }

.app-card {
  --mark: var(--accent);
  grid-column: span 2;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--sp-6);
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-top);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.app-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--mark) 18%, transparent), transparent 60%);
  transition: opacity var(--dur) var(--ease);
}
.app-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--edge-top), var(--shadow-card); }
.app-card:hover::before { opacity: 1; }


.app-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); position: relative; }
.app-glyph {
  width: 54px; height: 54px; flex: none; border-radius: var(--r-glyph);
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--mark) 30%, transparent), transparent 62%), var(--glass-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--edge-top), 0 10px 26px -14px color-mix(in srgb, var(--mark) 60%, transparent);
}
.app-glyph svg { width: 52%; height: 52%; color: var(--mark); }
.app-glyph__img { width: 74%; height: 74%; object-fit: contain; }

.status {
  display: inline-flex; align-items: center; gap: var(--sp-1h);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding: var(--sp-1h) var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--text-soft); background: var(--bg-deep);
}
.status i { width: 6px; height: 6px; border-radius: var(--r-circle); background: currentColor; }
.status--live   { color: var(--emerald); border-color: color-mix(in srgb, var(--emerald) 32%, transparent); }
.status--live i { box-shadow: 0 0 8px var(--emerald); }
.status--beta   { color: var(--accent); border-color: var(--line-accent); }
.status--beta i { box-shadow: 0 0 8px var(--accent); }
.status--soon   { color: var(--text-soft); }
.status--dev    { color: var(--accent-soft); }
.status--launch   { color: var(--accent); border-color: var(--line-accent); }
.status--launch i { box-shadow: 0 0 8px var(--accent); }

.app-card h3 { position: relative; color: var(--text); margin-bottom: var(--sp-2); }
.app-card p { position: relative; font-size: var(--fs-body); line-height: var(--lh-base); color: var(--text-body); }
.app-card__foot { position: relative; margin-top: auto; padding-top: var(--sp-5); display: flex; align-items: center; justify-content: space-between; }
.app-card__foot .view { margin-left: auto; }
.app-card .arrow-link { color: var(--text-soft); }
.app-card:hover .arrow-link { color: var(--accent); }
.app-card .view svg { transition: transform var(--dur) var(--ease); }
.app-card:hover .view svg { transform: translateX(4px); }
/* whole-card link (stretched) */
.app-card__link { position: absolute; inset: 0; z-index: var(--z-card); border-radius: inherit; }
.app-card__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); }
/* coming-soon cards: compact, no description, visibly disabled */
.app-card--soon { cursor: default; border-style: dashed; border-color: var(--line-strong); background: none; box-shadow: none; opacity: 0.55; }
.app-card--soon::before { display: none; }
.app-card--soon .app-card__top { margin-bottom: var(--sp-4); }
.app-card--soon .app-glyph { width: 44px; height: 44px; filter: grayscale(0.7); box-shadow: none; }
.app-card--soon h3 { margin-bottom: var(--sp-1); font-size: var(--fs-lg); }
.app-card__soon { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-soft); }

/* A launched app's card can preview its own theme (light paper, forest green,
   Fraunces) while the rest of the dark grid stays as-is. Tokens are overridden
   locally on the card, so every child recolours; only the surface + heading
   font are set explicitly. */
.app-card--theme-convertable {
  --mark:        #1f3927;
  --accent:      #1f3927;
  --emerald:     #1f3927;
  --text:        #14281b;
  --text-body:   #4f5a51;
  --text-soft:   #79837b;
  --line:        rgba(20, 40, 27, 0.10);
  --line-strong: rgba(20, 40, 27, 0.16);
  --bg-deep:     #eef2ea;
  --font-serif:  "Fraunces", Georgia, "Times New Roman", serif;
  background: linear-gradient(180deg, #f7fcf5, #f1f6ee);
  border-color: rgba(20, 40, 27, 0.12);
}
.app-card--theme-convertable h3 { font-family: var(--font-serif); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); }
.app-card--theme-convertable .app-glyph {
  background: #eef2ea;
  border-color: rgba(20, 40, 27, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 26px -16px rgba(31, 57, 39, 0.4);
}
.app-card--theme-convertable .status--live { color: var(--emerald); border-color: rgba(31, 57, 39, 0.26); }
.app-card--theme-convertable:hover { border-color: rgba(20, 40, 27, 0.22); }

/* ── 11c. Showcase card - lockup + copy, two iPhones breaking out over the top edge ── */
.app-card--showcase { grid-column: span 5; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); padding: 0; min-height: 360px; overflow: visible; }
.showcase__copy { position: relative; z-index: calc(var(--z-edge) + 1); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-5); padding: var(--sp-6); }
.showcase__lockup { width: auto; height: 48px; align-self: flex-start; }
.showcase__lockup--text { display: inline-flex; align-items: center; gap: var(--sp-3); }
.showcase__lockup--text img { width: 48px; height: 48px; }
.showcase__lockup--text b { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); color: var(--text); }
.showcase__copy p { font-size: var(--fs-lg); line-height: var(--lh-base); max-width: 28rem; }
.showcase__copy p strong { color: var(--text); font-weight: var(--fw-semibold); }
.showcase__list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: calc(var(--sp-2) * -1); }
.showcase__list li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-lg); line-height: var(--lh-base); color: var(--text-body); }
.showcase__list li svg { flex: none; width: 22px; height: 22px; color: var(--link, var(--mark)); }
.showcase__copy .app-card__foot { margin-top: auto; padding-top: var(--sp-4); justify-content: flex-start; }
.showcase__copy .app-card__foot .view { margin-left: 0; }
/* The Download link wears the app's own colour, hover included */
.app-card--showcase { --link: var(--mark); }
.app-card--theme-convertable.app-card--showcase { --link: #26793f; }   /* Convertable's green, dark enough to read as text on the cream card */
.app-card--showcase .app-card__foot .arrow-link, .app-card--showcase:hover .app-card__foot .arrow-link { color: var(--link); font-weight: var(--fw-semibold); }
/* The phones sit over the card: free above and to the left, cropped at the card's bottom and right edges. */
.showcase__phones { position: relative; z-index: calc(var(--z-edge) + 1); clip-path: inset(-14% 0 0 -45% round 0 0 var(--r-lg) 0); }

/* iPhone 18 Pro Max, drawn in CSS around a real simulator screenshot (9:41, full battery) */
.phone {
  --w: clamp(150px, 15vw, 224px);
  position: absolute; width: var(--w); margin: 0; aspect-ratio: 1320 / 2868;
  padding: calc(var(--w) * 0.028); border-radius: calc(var(--w) * 0.16);
  background: linear-gradient(145deg, #3a3f44, #0d0f11 40%, #23272b);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 1.5px rgba(255, 255, 255, 0.08), 0 26px 40px -22px rgba(0, 0, 0, 0.55);
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--w) * 0.135); background: #000; }
.phone--back  { left: -2%; top: -7%; transform: rotate(-7deg); z-index: 1; }
.phone--front { left: 36%; top: 4%;  transform: rotate(8deg);  z-index: 2; }
@media (max-width: 720px) {
  .app-card--showcase { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .showcase__phones { min-height: 380px; margin-top: var(--sp-6); }
  .phone { --w: clamp(150px, 40vw, 200px); }
  /* The pair is centred on the card: one phone either side of the middle, overlapping slightly */
  .phone--back  { left: calc(50% - var(--w) * 0.96); top: -4%; }
  .phone--front { left: calc(50% - var(--w) * 0.04); top: 6%; }
}

/* Travelyfe's own look on its card: the splash's racing green, the brand yellow, cream ink */
.app-card--theme-travelyfe {
  --mark:        #ffbf00;
  --accent:      #ffbf00;
  --text:        #edf1ea;
  --text-body:   rgba(237, 241, 234, 0.78);
  --text-soft:   rgba(237, 241, 234, 0.62);
  --line:        rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.2);
  --glass:       rgba(255, 255, 255, 0.03);
  --glass-2:     rgba(255, 255, 255, 0.06);
  --glass-3:     rgba(255, 255, 255, 0.09);
  background: linear-gradient(165deg, #1c614c 0%, #0f4130 48%, #06281e 100%);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── 11b. App detail pages ────────────────────────────────────── */
.app-hero {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding-top: clamp(7.5rem, 14vw, 11rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.app-hero__glow {
  position: absolute; left: 50%; top: -8%; transform: translateX(-50%);
  width: min(760px, 96%); height: 520px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 42%, color-mix(in srgb, var(--mark) 24%, transparent), transparent 70%);
  filter: blur(10px);
}
/* Ambient "conversion flow" — drifting format chips (canvas, see js/main.js) */
.app-hero__fx { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--black) 62%, transparent); mask-image: linear-gradient(to bottom, var(--black) 62%, transparent); }
.app-hero__fx canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask: radial-gradient(132% 116% at 50% 30%, var(--black) 30%, transparent 86%);
          mask: radial-gradient(132% 116% at 50% 30%, var(--black) 30%, transparent 86%);
}
@media (max-width: 720px) { .app-hero__fx canvas { opacity: 0.4; } }
.app-hero__inner { display: flex; flex-direction: column; align-items: center; }
/* Hero product shot (phone mockup) below the platform badges */
.app-hero__shot { margin-top: clamp(2.25rem, 5vw, 3.5rem); width: 100%; display: flex; justify-content: center; }
.app-hero__shot img {
  width: clamp(210px, 56vw, 280px); height: auto; display: block;
  filter: drop-shadow(0 34px 64px color-mix(in srgb, var(--mark) 30%, transparent));
}
.app-hero__glyph {
  width: clamp(72px, 9vw, 88px); height: clamp(72px, 9vw, 88px); border-radius: var(--r-glyph);
  display: grid; place-items: center; margin-bottom: var(--sp-6);
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--mark) 32%, transparent), transparent 62%), var(--glass-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--edge-top), 0 18px 46px -16px color-mix(in srgb, var(--mark) 55%, transparent);
}
.app-hero__glyph svg { width: 48%; height: 48%; color: var(--mark); }
.app-hero__glyph .app-glyph__img { width: 68%; height: 68%; object-fit: contain; }
.app-hero .status { margin-bottom: var(--sp-5); }
.app-hero h1 { font-size: var(--fs-h1-md); }
.app-hero .lead { margin-top: var(--sp-4); max-width: var(--measure); }
.app-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); }
.app-platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-8); }
.app-platforms li {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal);
  color: var(--text-soft); padding: var(--sp-1h) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--glass);
}
.app-overview { margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); max-width: 44rem; text-align: center; }
.app-cta { text-align: center; padding: clamp(2rem, 4vw, 3.25rem); }
.app-cta .kicker { margin-bottom: var(--sp-4); }
.app-cta h2 { margin-bottom: var(--sp-3); }
.app-cta .lead { margin: 0 auto var(--sp-6); }
.app-cta__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.app-note { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--text-soft); }
.app-note a { color: var(--accent); }

/* Tighter top padding when a section follows a related one */
.section--tight { padding-top: clamp(1rem, 2vw, 2rem); }

/* Formats showcase - grouped format chips */
.format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.2rem); }
.format-card {
  position: relative; overflow: hidden;
  padding: clamp(1.35rem, 2.2vw, 1.75rem);
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--edge-top);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.format-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.format-card h3 {
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--sp-4);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips li {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-normal);
  color: var(--text-body); padding: var(--sp-1h) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg-deep);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.format-card:hover .chips li { border-color: var(--line); }
@media (max-width: 720px) { .format-grid { grid-template-columns: minmax(0, 1fr); } }

/* Image-led feature cards (app page) — title + copy with an app screenshot */
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.2rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.media-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--edge-top);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.media-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--edge-top), var(--shadow-card); }
.media-card__body { padding: clamp(1.5rem, 2.4vw, 2rem); position: relative; z-index: 1; }
.media-card__body h3 {
  font-family: var(--font-serif); font-weight: var(--fw-semibold);
  font-size: var(--fs-h3); letter-spacing: var(--ls-snug); line-height: var(--lh-tight);
  color: var(--text); margin-bottom: var(--sp-2);
}
.media-card__body p { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--text-body); max-width: 46ch; }
.media-card__media { margin-top: auto; padding: 0 clamp(1.2rem, 2.2vw, 1.8rem); }
/* CSS-composed UI vignette that rises into the card bottom (no raster art) */
.media-card__media .mock {
  margin-top: auto;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: clamp(1.15rem, 2.4vw, 1.7rem);
  font-family: var(--font-sans); line-height: var(--lh-snug);
  background: var(--glass-3);
  border: 1px solid var(--line-strong); border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: 0 -16px 50px -26px color-mix(in srgb, var(--mark) 55%, transparent);
}
.media-card__media .mock b { color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.media-card__media .mock small { color: var(--text-soft); font-size: var(--fs-xs); }
.mock__file-meta, .mock__head-text, .mock__row-text { display: flex; flex-direction: column; min-width: 0; }
.mock__row-text b, .mock__file-meta b, .mock__head-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* formats */
.mock--formats { align-items: center; }
.mock__file { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-radius: var(--r-md); background: var(--bg-soft); }
.mock__ext { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--mark); padding: var(--sp-1h) var(--sp-2); border-radius: var(--r-sm); background: var(--glass-3); border: 1px solid var(--line); }
.mock__convert { width: 34px; height: 34px; border-radius: var(--r-circle); display: grid; place-items: center; background: var(--mark); color: var(--bg); }
.mock__convert svg { width: 16px; height: 16px; }
.mock__chips { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.mock__chip { text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--mark); padding: var(--sp-2) 0; border-radius: var(--r-md); background: var(--glass-3); border: 1px solid var(--line); }
.mock__chip.is-on { background: var(--mark); color: var(--white-ink); border-color: var(--mark); }

/* batch */
.mock__head { display: flex; align-items: center; gap: var(--sp-3); }
.mock__bolt { flex: none; width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--mark); color: var(--bg); }
.mock__bolt svg { width: 16px; height: 16px; }
.mock__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--bg-soft); }
.mock__thumb { flex: none; width: 22px; height: 22px; border-radius: var(--r-xs); background: var(--glass-3); border: 1px solid var(--line); }
.mock__row-text { flex: 1; }
.mock__status { flex: none; }
.mock__status--done { width: 24px; height: 24px; border-radius: var(--r-circle); background: var(--mark); color: var(--bg); display: grid; place-items: center; }
.mock__status--done svg { width: 13px; height: 13px; }
.mock__status--wait { width: 22px; height: 22px; border-radius: var(--r-circle); border: 2.4px solid var(--line-strong); }
.mock__bar { flex: none; width: clamp(64px, 26%, 120px); height: 6px; border-radius: var(--r-xs); background: var(--line); overflow: hidden; }
.mock__bar i { display: block; height: 100%; width: 72%; background: var(--mark); border-radius: var(--r-xs); }

/* save or share */
.mock--share { align-items: center; gap: var(--sp-2); }
.mock__doc { position: relative; width: 84px; height: 94px; border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; }
.mock__doc-type { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--mark); }
.mock__doc-badge { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: var(--r-circle); background: var(--mark); color: var(--bg); display: grid; place-items: center; border: 2px solid var(--glass-3); }
.mock__doc-badge svg { width: 14px; height: 14px; }
.mock__actions { width: 100%; display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
.mock__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1h); height: 42px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); background: var(--glass-3); border: 1px solid var(--line-strong); }
.mock__btn svg { width: 15px; height: 15px; }
.mock__btn.is-primary { background: var(--mark); color: var(--white-ink); border-color: var(--mark); }

/* private */
.mock--private { align-items: center; gap: var(--sp-4); }
.mock__shield { width: 60px; height: 60px; color: var(--mark); }
.mock__shield svg { width: 100%; height: 100%; }
.mock__toggles { width: 100%; }
.mock__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); }
.mock__opt + .mock__opt { border-top: 1px solid var(--line); }
.mock__opt:last-child { color: var(--text-soft); }
.mock__sw { flex: none; position: relative; width: 44px; height: 26px; border-radius: var(--r-md); background: var(--line-strong); transition: background var(--dur) var(--ease); }
.mock__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--r-circle); background: var(--pure); box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform var(--dur) var(--ease); }
.mock__sw.is-on { background: var(--mark); }
.mock__sw.is-on::after { transform: translateX(18px); }
/* Wide card: copy on the left, screenshot rising on the right */
.media-card--wide { grid-column: span 2; flex-direction: row; align-items: stretch; gap: clamp(1rem, 2.4vw, 2.4rem); }
.media-card--wide .media-card__body { flex: 1 1 40%; align-self: center; }
.media-card--wide .media-card__media { margin-top: 0; align-self: flex-end; flex: 1 1 56%; padding: clamp(1.6rem, 2.6vw, 2.4rem) 0 0 0; }
@media (max-width: 720px) {
  .media-grid { grid-template-columns: minmax(0, 1fr); }
  .media-card--wide { grid-column: span 1; flex-direction: column; gap: 0; }
  .media-card--wide .media-card__body { align-self: stretch; }
  .media-card--wide .media-card__media { align-self: stretch; margin-top: auto; padding: 0 clamp(1.2rem, 2.2vw, 1.8rem); }
}
.media-grid { margin-top: clamp(1.6rem, 3.2vw, 2.5rem); }

/* App hero sits a touch tighter under the floating nav (its own top hero) */
.app-page .app-hero { padding-top: clamp(6.5rem, 12vw, 9rem); padding-bottom: clamp(1rem, 2.5vw, 2rem); }

/* ── 12. Contact ──────────────────────────────────────────────── */
.contact__panel { position: relative; overflow: hidden; padding: clamp(1.85rem, 4vw, 3.25rem); border-radius: var(--r-xl); }
/* (the soft light behind the top of the contact card was removed: it rendered as a hard-edged box on some displays) */
.contact__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.contact__grid > * { min-width: 0; }
.contact__form { width: 100%; }
.contact__aside .kicker { margin-bottom: var(--sp-4); }
.contact__aside h2 { margin-top: var(--sp-1); }
.contact__aside .lead { margin-top: var(--sp-4); }
.contact__points { margin-top: var(--sp-8); display: flex; flex-direction: column; }
.contact__points li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-body); color: var(--text-body); }
.contact__points svg { width: 1.1rem; height: 1.1rem; color: var(--accent); flex: none; }
.contact__points a { color: inherit; transition: color var(--dur) var(--ease); }
.contact__points a:hover { color: var(--accent); }

/* Social links */
.contact__social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.contact__social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--glass); color: var(--text-soft);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.contact__social a:hover { color: var(--accent); border-color: var(--line-accent); background: var(--glass-2); transform: translateY(-2px); }
.contact__social svg { height: 17px; width: auto; max-width: 20px; }   /* bare marks, same height; the wide YouTube mark is capped */

/* Cyber Essentials certification badge (links to the certificate registry) */
.contact__cert { display: inline-block; margin-top: var(--sp-8); line-height: 0; border-radius: var(--r-sm); transition: transform var(--dur) var(--ease-out); }
.contact__cert:hover { transform: translateY(-2px); }
.contact__cert img { height: 92px; width: auto; display: block; }
.contact__cert:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); }

.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-family: var(--font-sans); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--sp-2); }
.field input, .field textarea {
  width: 100%; padding: var(--sp-3) var(--sp-4);
  background: var(--field); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 122px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-soft); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--line-accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.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; }

/* ── 13. Waiting-list form (app detail pages) ─────────────────── */
.waitlist { max-width: var(--measure-form); margin: 0 auto; text-align: left; }
.waitlist__row { display: flex; gap: var(--sp-3); align-items: stretch; }
.waitlist__row input {
  flex: 1 1 auto; min-width: 0; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.waitlist__row input::placeholder { color: var(--text-dim); }
.waitlist__row input:focus { outline: none; border-color: var(--line-accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.waitlist__row .btn { flex: none; white-space: nowrap; }
.waitlist @media (max-width: 480px) {
  .waitlist__row { flex-direction: column; }
  .waitlist__row .btn { width: 100%; }
}

/* ── 14. Footer - minimal bar ─────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding-block: var(--sp-8); }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer-copy { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-none); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-soft); }
@media (max-width: 480px) { .footer-copy { line-height: 1.7; } .footer-sep { display: none; } .footer-rights { display: block; } }
@media (max-width: 720px) { .footer-bar { flex-direction: column; justify-content: center; text-align: center; } .footer-links { justify-content: center; } }
.footer-sep { color: var(--text-dim); margin: 0 var(--sp-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.footer-links a { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-none); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-soft); transition: color var(--dur) var(--ease); }
.footer-links a:hover { color: var(--text); }

/* ── 20. Cookie consent banner ────────────────────────────────── */
.consent {
  position: fixed; z-index: var(--z-consent);
  left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  width: calc(100% - (var(--gutter) * 1.4)); max-width: 560px;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-float);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--edge-top), var(--shadow-card);
  max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.consent.is-in { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.consent__text { flex: 1 1 220px; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-body); }
.consent__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; margin-left: auto; }
/* Centred at every width; from tablet up it is wide enough for the buttons to sit beside the text. */
@media (min-width: 640px) {
  .consent { max-width: 680px; flex-wrap: nowrap; }
  .consent__text { flex: 1 1 auto; }
}
/* Nothing at the end of the page hides behind the banner, and the chat field scrolls into view above it. */
html.has-consent .footer { margin-bottom: calc(var(--consent-h, 0px) + 1rem); }
.chat--contact .composer { scroll-margin-bottom: calc(var(--consent-h, 0px) + 1.5rem); }
@media (prefers-reduced-motion: reduce) { .consent, .consent.is-in { transition: opacity var(--dur) var(--ease); } }
@media (max-width: 480px) {
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1; }
}

/* ── 15. Reveal on scroll ─────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: 0.06s; }
[data-delay="2"] { transition-delay: 0.12s; }
[data-delay="3"] { transition-delay: 0.18s; }
[data-delay="4"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── 16. Legal pages ──────────────────────────────────────────── */
.legal { padding-top: clamp(7rem, 13vw, 9.5rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.legal__shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.legal__body { max-width: var(--measure-prose); min-width: 0; overflow-wrap: anywhere; }

/* Header block */
.legal__head { margin-bottom: clamp(1.6rem, 3vw, 2.5rem); }   /* same rhythm as .section-head: the title sits at the container edge, above the rail and the text */
.legal__head h1 { font-size: var(--fs-h1-sm); margin-bottom: var(--sp-3); }
.legal__updated {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-regular);
  color: var(--text-soft);
}
.legal__updated::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--accent); }

/* Table-of-contents rail (sticky on desktop) */
.legal__rail { display: none; }
.legal__toc-title { display: block; font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--sp-4); padding-left: var(--sp-4); }
.legal__toc { display: flex; flex-direction: column; }
.legal__toc a {
  font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-snug);
  color: var(--text-soft); padding: var(--sp-1h) var(--sp-4); border-left: 2px solid var(--line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal__toc a:hover { color: var(--text-body); }
.legal__toc a.is-active { color: var(--text); border-left-color: var(--accent); }

@media (min-width: 920px) {
  .legal__shell { grid-template-columns: 230px minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 4rem); align-items: start; }
  .legal__rail { display: block; position: sticky; top: calc(var(--nav-offset) + var(--nav-h) + 1.6rem); max-height: calc(100svh - var(--nav-h) - 5rem); overflow-y: auto; }
}

/* Body typography */
.legal__body h2 {
  font-family: var(--font-sans); font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--text);
  background: none; -webkit-text-fill-color: currentColor;
  margin-top: clamp(2.5rem, 4vw, 3.25rem); margin-bottom: var(--sp-4);
  scroll-margin-top: calc(var(--nav-offset) + var(--nav-h) + 1.5rem);
}
.legal__body > p:first-of-type { font-size: var(--fs-lg); color: var(--text); }
.legal__body p, .legal__body li { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-body); }
.legal__body p { margin-bottom: var(--sp-4); }
.legal__body strong { color: var(--text); font-weight: var(--fw-semibold); }
.legal__body ul { list-style: none; padding-left: 0; margin: 0 0 var(--sp-5); }
.legal__body li { padding-left: var(--sp-6); position: relative; margin-bottom: var(--sp-2); }
.legal__body li::before { content: ""; position: absolute; left: 0.1rem; top: 0.72em; width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--accent); opacity: 0.65; }
.legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.legal__body a:hover { color: var(--accent-bright); }

/* ── 17. Toast ────────────────────────────────────────────────── */
.toast {
  position: fixed; z-index: var(--z-toast);
  left: 50%; top: calc(var(--nav-offset) + var(--nav-h) + 0.9rem);
  transform: translate(-50%, -14px);
  width: calc(100% - (var(--gutter) * 1.4)); max-width: 440px;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); text-align: center;
  font-size: var(--fs-md); line-height: var(--lh-base); color: var(--text);
  background: var(--surface-float);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line-accent); border-radius: var(--r-lg);
  box-shadow: var(--edge-top), var(--shadow-card);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast__icon { flex: none; width: 22px; height: 22px; }
.toast--success { border-color: color-mix(in srgb, var(--emerald) 40%, transparent); }
.toast--error   { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.toast--warning { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.toast--success .toast__icon { color: var(--emerald); }
.toast--error   .toast__icon { color: var(--danger); }
.toast--warning .toast__icon { color: var(--warning); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity var(--dur) var(--ease); transform: translate(-50%, 0); } }

/* ── Page transitions - cross-document View Transitions (a short fade between pages) ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── 18. Responsive ───────────────────────────────────────────── */
@media (max-width: 919px) {
  .app-card--showcase { grid-column: span 10; }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-card, .app-card--showcase { grid-column: span 1; }
  .app-card--showcase { grid-column: span 2; }
  .app-card--soon:last-child { grid-column: span 2; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .app-card--soon { padding: var(--sp-5); }
}

@media (max-width: 720px) {
  /* App cards read centred on phones: lockup, platform list, link, and the coming-soon tiles */
  .showcase__copy { align-items: center; text-align: center; }
  .showcase__lockup { align-self: center; }
  .showcase__list { align-self: center; align-items: flex-start; text-align: left; }
  .showcase__copy .app-card__foot { justify-content: center; }
  .app-card--soon { align-items: center; text-align: center; }
  .app-card--soon .app-card__top { justify-content: center; }
}

/* Tablet: five coming-soon tiles share one row, so keep their padding and label compact */
@media (min-width: 721px) and (max-width: 919px) {
  .app-card--soon { padding: var(--sp-4); }
  .app-card__soon { letter-spacing: 0.06em; white-space: nowrap; }
}
/* The phones rise above the first app card, so give the heading above them room */
#apps .section-head { margin-bottom: clamp(3.25rem, 6vw, 5rem); }

/* ── 19. App detail pages - themed to the app's own accent ────── */
.app-page {
  --accent:        var(--mark);
  --accent-bright: color-mix(in srgb, var(--mark), var(--pure) 34%);
  --accent-deep:   color-mix(in srgb, var(--mark), #000000 26%);
  --accent-soft:   color-mix(in srgb, var(--mark), var(--pure) 52%);
  --accent-glow:   color-mix(in srgb, var(--mark) 50%, transparent);
  --accent-wash:   color-mix(in srgb, var(--mark) 9%, transparent);
  --ring:          color-mix(in srgb, var(--mark) 60%, transparent);
  --line-accent:   color-mix(in srgb, var(--mark) 40%, transparent);
  --emerald:       var(--mark);
}
body.app-page::before {
  background:
    radial-gradient(1100px 760px at 80% -12%, color-mix(in srgb, var(--mark) 9%, transparent), transparent 60%),
    radial-gradient(820px 620px at 0% 6%, color-mix(in srgb, var(--mark) 20%, transparent), transparent 58%),
    radial-gradient(1200px 900px at 50% 122%, color-mix(in srgb, var(--mark) 7%, transparent), transparent 60%),
    radial-gradient(150% 120% at 50% 0%, transparent 62%, rgba(0,0,0,0.42));
}

/* ── 19b. Per-app themes ──────────────────────────────────────────
   Each app page can own its palette + display font while reusing every
   component (nav, footer, cards, buttons, forms). Only design TOKENS and a
   handful of hard-coded dark exceptions are overridden — structure is shared.
   To theme a new app: copy this block, rename the class, retune the tokens.

   Convertable — exact app palette (the app light theme): pale green
   cream surfaces, deep-forest ink, "Convertable Forest" #1F3927 accent,
   Fraunces display serif, system sans body. */
body.app-theme--convertable {
  --field: var(--bg-deep);
  --mark: #1f3927;                 /* "Convertable Forest" brand accent */

  /* Surfaces — pale green cream (bone / surface / mist) */
  --bg:        #f1f6ee;            /* bone */
  --bg-deep:   #e6eae0;            /* mist (inset chips) */
  --bg-soft:   #eef3ea;

  /* Cards read as the app's brighter surface (#f7fcf5) over bone */
  --glass:     rgba(255, 255, 255, 0.50);
  --glass-2:   rgba(255, 255, 255, 0.82);
  --glass-3:   rgba(255, 255, 255, 0.95);

  /* Hairlines — ink at low alpha (matches Theme.hairline) */
  --line:        rgba(20, 40, 27, 0.12);
  --line-strong: rgba(20, 40, 27, 0.18);

  /* Text — deep forest ink */
  --text:      #14281b;           /* ink */
  --text-body: #4f5a51;
  --text-soft: #5b655d;
  --text-dim:  #a3aaa2;

  /* Primary button → forest ink fill, cream label (Theme.ink / onInk) */
  --white:      #14281b;
  --white-ink:  #f1f6ee;

  /* Softer, green-tinted shadows for a light surface */
  --shadow-nav:  0 18px 46px -26px rgba(20, 40, 27, 0.20);
  --shadow-card: 0 30px 60px -40px rgba(20, 40, 27, 0.30);
  --edge-top:    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Fraunces display serif (the app's headline font); system sans body (SF) */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  var(--sys);
  color-scheme: light;
}

/* Headings: forest ink, Fraunces (no dark-mode brushed-silver gradient) */
body.app-theme--convertable h1,
body.app-theme--convertable h2 {
  background: none; -webkit-text-fill-color: currentColor; color: var(--text);
  font-family: var(--font-serif); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug);
}
/* Accent words stay upright Fraunces (the app has no italic), tinted forest */
body.app-theme--convertable .ital { font-family: var(--font-serif); font-style: normal; font-weight: var(--fw-semibold); }
body.app-theme--convertable h1 .ital,
body.app-theme--convertable h2 .ital { -webkit-text-fill-color: currentColor; color: var(--accent-deep); }
body.app-theme--convertable h3 { color: var(--text); }

/* Ambient wash — warm green light, no dark vignette */
body.app-theme--convertable::before {
  background:
    radial-gradient(1100px 760px at 80% -10%, rgba(63, 107, 74, 0.08), transparent 60%),
    radial-gradient(900px 640px at 0% 4%, rgba(63, 107, 74, 0.06), transparent 58%),
    radial-gradient(1200px 900px at 50% 120%, rgba(63, 107, 74, 0.05), transparent 60%);
}
body.app-theme--convertable ::selection { background: rgba(63, 107, 74, 0.20); color: #1c241e; }

body.app-theme--convertable .kicker { color: var(--accent-deep); }

/* Floating chrome → light translucent; logo flips to ink */
body.app-theme--convertable .nav { background: rgba(255, 255, 255, 0.66); }
body.app-theme--convertable .nav.is-scrolled { background: rgba(255, 255, 255, 0.86); }
body.app-theme--convertable .consent, body.app-theme--convertable .toast { background: rgba(252, 251, 247, 0.96); }
body.app-theme--convertable .brand__logo { filter: brightness(0); opacity: 0.82; }

/* Primary button glow → forest, not cyan */
body.app-theme--convertable .btn--primary { box-shadow: 0 10px 30px -14px rgba(36, 63, 44, 0.45); }
body.app-theme--convertable .btn--primary:hover { background: #2c4a33; box-shadow: 0 12px 32px -14px rgba(36, 63, 44, 0.55); }


/* App detail hero - full app icon (home-screen style) */
.app-hero__icon { width: clamp(92px, 12vw, 120px); height: auto; border-radius: var(--r-glyph); margin-bottom: var(--sp-6); box-shadow: var(--shadow-card), 0 0 64px -12px var(--accent-glow); }

/* Touch: small text links get a larger invisible hit area (44px) without moving anything */
@media (pointer: coarse) {
  .brand, .nav-links a, .arrow-link, .footer-links a { position: relative; }
  .brand::after, .nav-links a::after, .arrow-link::after, .footer-links a::after { content: ""; position: absolute; inset: -12px -8px; }
  .footer-links a::after { inset: -16px -10px; }
}

/* ── Finishing touches ────────────────────────────────────────── */
/* Skip link: first thing a keyboard visitor reaches; invisible otherwise */
.skip-link { position: fixed; z-index: calc(var(--z-consent) + 10); left: 50%; top: 0.75rem; transform: translate(-50%, -200%); padding: var(--sp-2) var(--sp-5); border-radius: var(--r-pill); background: var(--white); color: var(--white-ink); font-weight: var(--fw-semibold); font-size: var(--fs-sm); transition: transform var(--dur) var(--ease-out); }
.skip-link:focus-visible { transform: translate(-50%, 0); }
main:focus { outline: none; }
/* Nav: the section you are in */
.nav-links a { transition: color var(--dur) var(--ease); }
.nav-links a.is-current { color: var(--text); }
/* Every control answers a press */
.chip:active, .composer__send:active, .nav-icon:active, .app-card__link:active, .arrow-link:active { transform: scale(0.97); }
.chip, .composer__send, .nav-icon { transition-property: background, border-color, color, box-shadow, transform, opacity; }
/* Typography: no lonely last words in running text; figures line up */
/* short copy only: long legal paragraphs keep the browser's natural line breaks */
.lead, .feature p, .app-card p, .msg__bubble p { text-wrap: pretty; }
.status-page, .legal__meta, [data-uptime], time { font-variant-numeric: tabular-nums; }
/* Scroll-driven depth: the phones drift slightly as their card passes (progressive enhancement, off under reduced motion) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 721px) {
    .phone--back  { animation: phone-drift-a linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .phone--front { animation: phone-drift-b linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes phone-drift-a { from { translate: 0 18px; } to { translate: 0 -18px; } }
    @keyframes phone-drift-b { from { translate: 0 30px; } to { translate: 0 -30px; } }
  }
}
/* Print: the legal pages print as plain documents */
@media print {
  body::before, body::after, .nav, .skip-link, .consent, .toast, .footer-links, .legal__rail, .chat, canvas { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .legal__body, .legal__body * { color: #000 !important; text-shadow: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  .legal__body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  h1, h1 .ital, h2, h3 { color: #000 !important; background: none !important; -webkit-text-fill-color: #000 !important; text-shadow: none !important; break-after: avoid; }
  .legal__updated { color: #333 !important; }
  .legal__updated::before { background: #000 !important; }
  .legal__shell { display: block !important; }
}

/* Contact chat, before the first message: the greeting and quick starts sit centred in the window, composer stays at the bottom */
.chat--contact.is-fresh .chat__log { justify-content: center; align-items: center; text-align: center; }
.chat--contact.is-fresh .chat__log > .msg:first-child { margin-top: 0; }
.chat--contact.is-fresh .msg { justify-content: center; flex-direction: column; align-items: center; }
.chat--contact.is-fresh .msg__bubble { max-width: 30rem; }
.chat--contact.is-fresh .msg__chips { justify-content: center; }
.chat__hello { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight, -0.02em); color: var(--text); }
.chat__name { margin-left: 0.25em; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: var(--fw-medium); }
.chat__sub { margin-top: var(--sp-2); font-size: var(--fs-xl); color: var(--text-soft); }
.chat--contact.is-fresh .msg__chips { margin-top: var(--sp-5); }
/* Phones: the contact chat window is shorter, so the welcome does not float in a tall empty box */
@media (max-width: 720px) {
  .chat--contact { --chat-h: min(400px, calc(100dvh - 7.5rem)); min-height: 0; }
}