/* Imogen Pro — imogenpro.com
   One dark theme. Plain CSS, no build step for styles. Scroll-driven values (--p, --tilt, …) are
   set by assets/js/main.js; without it the page still reads top to bottom. */

/* ---------------------------------------------------------------- Fonts (Source Serif 4, OFL) */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-Roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-Roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-Italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-Italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- Tokens */
:root {
  color-scheme: dark;

  --bg: #0b0709;
  --bg-2: #100a0d;
  --outside: #060405;
  --ink: #f3f0f9;
  --ink-2: rgba(243, 240, 249, 0.68);
  --ink-3: rgba(243, 240, 249, 0.52); /* 5.1:1 or better on the page, plan cards and tiles */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --glass: rgba(28, 18, 23, 0.55);
  --glass-2: rgba(255, 255, 255, 0.06);
  --accent: #9787ff;
  --accent-2: #c4baff;

  --radius: 26px;
  --radius-sm: 16px;
  --max: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 76px;

  --serif: "Source Serif 4", "Iowan Old Style", "Palatino", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--outside);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Nothing may widen the page: Safari on iPhone pans to anything past the edge unless the root clips it. */
  overflow-x: clip;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-color: rgba(243, 240, 249, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
::selection { background: rgba(151, 135, 255, 0.45); color: #fff; }

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
em { font-style: italic; font-weight: 400; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
/* In-page links move focus to their section (main.js), which isn't a control: no ring for that. */
[tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #0c080a; text-decoration: none;
}
.skip-link:focus { top: 16px; }
/* Read by screen readers, not shown. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The page sits in a rounded frame, like a card on a dark desk. */
.frame {
  position: fixed; inset: 10px; z-index: 70; pointer-events: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 48px 4px rgba(164, 130, 147, 0.12),
    0 0 0 100vmax var(--outside);
}

/* ---------------------------------------------------------------- Shared pieces */
.i { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  height: 52px; padding: 0 24px; border-radius: 999px;
  font: 500 17px/1 var(--serif); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn-light { background: var(--ink); color: #0c080a; box-shadow: 0 8px 30px rgba(196, 186, 255, 0.18); }
.btn-light:hover { background: #fff; box-shadow: 0 12px 40px rgba(196, 186, 255, 0.3); }
/* "Get Imogen Pro": liquid glass, like the hero's cards and the feature tiles. It blurs and saturates
   what's behind it (frosted enough to read as solid), with a bevel and a gradient rim lit from the
   upper left and a glare that follows the pointer; in Chromium, glass.js also bends the backdrop near
   the edge (.lensed). It's tinted with the accent and glows softly so it leads. */
.btn-tint {
  --mx: 28%; --my: 0%;
  position: relative; color: #fff;
  -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.1); backdrop-filter: blur(20px) saturate(190%) brightness(1.1);
}
.btn-tint.lensed { -webkit-backdrop-filter: var(--lens) blur(16px) saturate(190%) brightness(1.1); backdrop-filter: var(--lens) blur(16px) saturate(190%) brightness(1.1); }
.btn-tint::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.16) 30%, rgba(255, 255, 255, 0.05) 60%, rgba(214, 206, 255, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.btn-tint::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.24), transparent 70%);
}
.btn-tint {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 55%),
    rgba(96, 74, 230, 0.78);
  /* A tight halo under the soft glow keeps the white text 4.5:1 where the sheen and the glare lighten the glass. */
  text-shadow: 0 0 3px rgba(30, 16, 90, 0.45), 0 1px 10px rgba(30, 16, 90, 0.5);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4), inset -1px -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 14px rgba(196, 186, 255, 0.28), 0 10px 30px rgba(108, 84, 255, 0.3),
    0 0 22px rgba(151, 135, 255, 0.34), 0 0 64px rgba(124, 102, 255, 0.2);
}
.btn-tint:hover {
  background-color: rgba(104, 82, 240, 0.8);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.48), inset -1px -1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 16px rgba(196, 186, 255, 0.34), 0 14px 38px rgba(108, 84, 255, 0.42),
    0 0 28px rgba(151, 135, 255, 0.46), 0 0 80px rgba(124, 102, 255, 0.28);
}
/* Without backdrop-filter the glass has nothing to frost, so it's solid (white text 5.6:1). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-tint, .btn-tint:hover { background-color: rgb(98, 76, 232); }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  color: var(--ink-3); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }

.section-head { max-width: 760px; margin: 0 auto 56px; padding: 0 var(--gutter); }
.section-head.center { text-align: center; }
.section-head h2, .studio-copy h2, .campaign-copy h2, .vista-copy h2, .final h2 {
  font-size: clamp(40px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -0.035em;
}
.section-head p:not(.eyebrow) { margin-top: 20px; color: var(--ink-2); font-size: 19px; }

.mention { color: var(--accent-2); font-style: italic; white-space: nowrap; }

/* Paragraph-sized text (15–19px) is set in Light; captions, controls and anything smaller stay Regular,
   and so do the subtitles under each section's title, so they hold their own beside it. */
:is(.steps p, .tile p, .plan .sub, .checks li, .faq details > div, .doc p, .doc li, .not-found p) { font-weight: 300; }
:is(.lede, .section-head p, .campaign-copy p, .steps p, .tile p, .vista-copy p, .faq details > div, .final p, .doc p, .doc li) em { font-weight: inherit; }


.glass {
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}

/* Reveal on scroll (main.js adds .in). */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }

/* ---------------------------------------------------------------- Header */
.site-header {
  position: fixed; top: 10px; left: 10px; right: 10px; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--header-h); padding: 0 calc(var(--gutter) - 10px);
  border-radius: 28px 28px 0 0;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.scrolled {
  background: linear-gradient(to bottom, rgba(11, 7, 9, 0.82), rgba(11, 7, 9, 0.55));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 -1px 0 var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.brand img { border-radius: 7px; }
.site-header .btn { justify-self: end; }
/* On the home page the header stays out of the way while the hero has the screen, and slides in
   once the page has scrolled about halfway past it (main.js adds .shown). Keyboard focus shows it too. */
.js .home .site-header { transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.5s var(--ease), opacity 0.4s var(--ease); }
.js .home .site-header:not(.shown):not(:focus-within) { transform: translateY(calc(-100% - 12px)); opacity: 0; pointer-events: none; }

.nav-pill {
  display: flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(22, 14, 18, 0.6);
  box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.nav-pill a {
  padding: 8px 18px; border-radius: 999px; color: var(--ink-2); font-size: 15px; text-decoration: none;
  transition: color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav-pill a:hover { color: var(--ink); }
.nav-pill a.active {
  color: var(--ink); background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative; min-height: max(100svh, 640px); padding: calc(var(--header-h) + clamp(28px, 5vh, 60px)) var(--gutter) 0;
  overflow: clip; isolation: isolate; background: var(--bg);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -4%, rgba(129, 93, 111, 0.24), transparent 70%),
    radial-gradient(760px 520px at 50% 72%, rgba(164, 130, 147, 0.10), transparent 70%);
}
/* The hero fades into the page at the bottom. The canvas and the glow fade themselves (a mask), so
   it holds however the browser layers the WebGL canvas; Safari on iPhone can draw it above an
   overlay. The overlay below still covers the fallback image and runs a pixel past the edge. */
.hero { --hero-fade: 12%; }
.hero::before, .hero-canvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-fade)), transparent 100%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(var(--hero-fade) + 1px); z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 10%, rgba(11, 7, 9, 0));
}
/* Small four-point stars (the AI sparkle), in staggered rows, over the glow: strongest at the top
   in the middle, fading out towards the sides and gone by the lower third. */
.hero-texture {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cpath d='M7.5 2.5C7.8 6.45 8.55 7.2 12.5 7.5C8.55 7.8 7.8 8.55 7.5 12.5C7.2 8.55 6.45 7.8 2.5 7.5C6.45 7.2 7.2 6.45 7.5 2.5ZM0 -5C0.3 -1.05 1.05 -0.3 5 0C1.05 0.3 0.3 1.05 0 5C-0.3 1.05 -1.05 0.3 -5 0C-1.05 -0.3 -0.3 -1.05 0 -5ZM15 -5C15.3 -1.05 16.05 -0.3 20 0C16.05 0.3 15.3 1.05 15 5C14.7 1.05 13.95 0.3 10 0C13.95 -0.3 14.7 -1.05 15 -5ZM0 10C0.3 13.95 1.05 14.7 5 15C1.05 15.3 0.3 16.05 0 20C-0.3 16.05 -1.05 15.3 -5 15C-1.05 14.7 -0.3 13.95 0 10ZM15 10C15.3 13.95 16.05 14.7 20 15C16.05 15.3 15.3 16.05 15 20C14.7 16.05 13.95 15.3 10 15C13.95 14.7 14.7 13.95 15 10Z' fill='%23c1c1c1' fill-opacity='.07'/%3E%3C/svg%3E");
  background-size: 15px 15px; background-position: center top;
  -webkit-mask-image: radial-gradient(62% 72% at 50% 0%, #000, rgba(0, 0, 0, 0.55) 45%, transparent 88%);
  mask-image: radial-gradient(62% 72% at 50% 0%, #000, rgba(0, 0, 0, 0.55) 45%, transparent 88%);
}
.hero-texture canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* sparkles.js: the twinkle */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.6s var(--ease); pointer-events: none; }
.hero-canvas.ready { opacity: 1; }
.hero-fallback { display: none; }
.no-js .hero-fallback, .no-webgl .hero-fallback {
  display: block; position: absolute; left: 50%; bottom: 0; z-index: 0; width: min(440px, 64vw); height: auto;
  transform: translateX(-56%);
  mix-blend-mode: lighten; /* the photo's black backdrop drops out against the page */
  -webkit-mask-image: linear-gradient(to top, transparent, #000 30%); mask-image: linear-gradient(to top, transparent, #000 30%);
}

/* Pause motion (main.js, WCAG 2.2.2): a small round button in the hero's corner and a text button in
   the footer stop everything that moves by itself. Hidden without the scripts, and with Reduce Motion,
   which stops all of it anyway. */
.motion-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer;
  transition: color 0.3s var(--ease);
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--ink); }
.motion-toggle .i-play, .motion-toggle.is-paused .i-pause { display: none; }
.motion-toggle.is-paused .i-play { display: block; }
.hero .motion-toggle {
  position: absolute; right: var(--gutter); bottom: 28px; z-index: 3;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(22, 14, 18, 0.6); box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.hero .motion-toggle .i { width: 16px; height: 16px; }
.footer-links .motion-toggle .i { width: 14px; height: 14px; }

.hero-copy {
  position: relative; z-index: 3; max-width: 1040px; margin: 0 auto; text-align: center;
  transform: translateY(calc(var(--hp, 0) * -90px));
}
/* The copy fades as the hero scrolls away. Each part fades on its own: opacity on a container would
   cut the glass buttons off from the portrait behind them, so they'd have nothing to frost or bend. */
.hero-copy .display, .hero-copy .lede, .hero-copy .actions > .btn { opacity: calc(1 - var(--hp, 0) * 1.4); }
.display {
  font-size: clamp(52px, min(7.4vw, 12.5vh), 132px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 500;
}
.display .line { display: block; overflow: hidden; padding: 0 0.08em 0.2em; margin: 0 -0.08em -0.2em; }
.display .line > span { display: block; }
.display .italic { font-style: italic; font-weight: 400; letter-spacing: -0.04em; margin-top: -0.06em; }
/* The entrance is pure CSS, so it plays on first paint, with or without the scripts. */
.display .line > span { animation: rise 1.3s var(--ease) 0.1s both; }
.display .line.italic > span { animation-delay: 0.22s; }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade-in { from { opacity: 0; } }

.lede { max-width: 760px; margin: 22px auto 0; color: var(--ink-2); font-size: 19px; line-height: 1.55; text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero .lede { animation: fade-up 1s var(--ease) 0.5s backwards; }
/* Only `backwards`, so the scroll fade above takes over once they're in (and an animation still
   holding its end state would cut the glass buttons off from what's behind them). */
.hero .actions { animation: fade-up 1s var(--ease) 0.6s backwards; }


/* ---------------------------------------------------------------- Models: curved wall */
.gallery { position: relative; padding: 16vh 0 4vh; }
.gallery .section-head { margin-bottom: 20px; }
.wall {
  --h: clamp(180px, min(17vw, 29vh), 300px);
  position: relative; display: grid; gap: 22px; padding: 30px 0 70px; overflow: hidden; perspective: 1400px;
}
/* The wall fades out at the sides. Strips of the page's colour laid over the edges do it, rather
   than a mask, which would make the browser redraw the whole moving wall on every frame. */
.wall::before, .wall::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 7%; pointer-events: none;
  background: linear-gradient(to right, var(--bg), rgba(11, 7, 9, 0));
}
.wall::before { left: 0; }
.wall::after { right: 0; transform: scaleX(-1); }
.row { position: relative; display: flex; gap: 20px; width: max-content; transform-style: preserve-3d; will-change: transform; }
/* Each card is its own layer, drawn once at a fixed resolution: scrolling only moves it. */
.card { flex: none; width: calc(var(--h) * var(--ar, 1)); margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; }
.c-pano { --ar: 2.1; }
.c-wide { --ar: 1.6; }
.c-square { --ar: 1; }
.c-poster { --ar: 0.667; }
.card .media {
  position: relative; height: var(--h); overflow: hidden; border-radius: 20px; background: #181014;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px rgba(0, 0, 0, 0.5);
}
.card .media img, .card .media video { width: 100%; height: 100%; object-fit: cover; }
.card .media-light { background: #fff8ec; }
.card .media-light img { object-fit: contain; padding: 8%; }
/* The provider's logo, large on a smoky glass disc in the image's top-left corner, over a soft shade.
   The disc is translucent rather than blurred: a live blur on every card would be redrawn on every
   frame as the cards move. */
.card .media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 0 0, rgba(11, 7, 9, 0.45), rgba(11, 7, 9, 0) calc(var(--h) * 0.6));
}
.maker {
  position: absolute; z-index: 1; left: calc(var(--h) * 0.05); top: calc(var(--h) * 0.05); display: grid; place-items: center;
  width: calc(var(--h) * 0.24); height: calc(var(--h) * 0.24);
  border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%), rgba(23, 15, 19, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 30px rgba(0, 0, 0, 0.35);
}
.maker svg { width: 50%; height: 50%; fill: currentColor; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.card figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 10px; margin-top: 12px; padding: 0 4px;
  font-size: 15px; color: var(--ink);
}
.card figcaption span { white-space: nowrap; }
.card figcaption span + span { color: var(--ink-3); font-style: italic; }
.gallery-note { padding: 0 var(--gutter); text-align: center; color: var(--ink-3); font-size: 14px; font-style: italic; }

/* Without the scripts, or with Reduce Motion, the rows wrap and stand still. */
.no-js .wall, .reduced .wall { padding-inline: var(--gutter); perspective: none; }
.no-js .wall::before, .no-js .wall::after, .reduced .wall::before, .reduced .wall::after { display: none; }
.no-js .card, .reduced .card { will-change: auto; }
.no-js .row, .reduced .row { width: auto; flex-wrap: wrap; justify-content: center; }
.no-js .card, .reduced .card { max-width: 100%; }

/* ---------------------------------------------------------------- Studio: MacBook */
.studio {
  display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 72px);
  max-width: 1640px; margin: 0 auto; padding: 14vh var(--gutter) 10vh;
}
.studio-copy h2 { font-size: clamp(38px, 4.4vw, 66px); }
.steps { margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 26px; counter-reset: step; }
.steps li { position: relative; padding-left: 52px; counter-increment: step; }
/* Inactive steps are dimmed with colour rather than opacity, so their text keeps 4.5:1. */
.steps h3, .steps p, .steps .mention { transition: color 0.5s var(--ease); }
.js .steps li:not(.on) h3, .js .steps li:not(.on) p { color: var(--ink-3); }
.js .steps li:not(.on) .mention { color: rgba(196, 186, 255, 0.66); }
.steps li::before {
  content: "0" counter(step); position: absolute; left: 0; top: 4px; color: var(--ink-3); font-size: 14px; font-style: italic; letter-spacing: 0.05em;
}
.steps li::after {
  content: ""; position: absolute; left: 0; top: 30px; width: 30px; height: 1px; background: var(--accent-2);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease);
}
.steps li.on::after { transform: scaleX(1); }
/* While the steps advance by themselves, the active step's rule fills up as a timer. */
.steps.auto li.on::after { animation: step-timer 6s linear both; }
.steps.paused li::after { animation-play-state: paused; }
@keyframes step-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.steps h3 { font-size: 24px; letter-spacing: -0.02em; }
.steps h3 button {
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
}
.steps p { margin-top: 6px; color: var(--ink-2); font-size: 16.5px; line-height: 1.5; }
.js .steps li { cursor: pointer; }
.no-js .steps h3 button { cursor: text; }

.macbook-wrap { perspective: 1800px; }
.macbook {
  position: relative; width: 100%; aspect-ratio: 4260 / 2840;
  perspective: 2200px; perspective-origin: 50% 20%;
  transform-origin: 50% 94%; transform: translateY(var(--ty, 0)) scale(var(--scale, 1));
  will-change: transform;
}
/* The hinge is 93.59% of the way down the bezel image, which is cut in two there. */
.lid { position: absolute; inset: 0; transform-origin: 50% 93.59%; transform: rotateX(var(--lid, 0deg)); will-change: transform; }
.bezel-lid { clip-path: inset(0 0 6.41% 0); }
.bezel-base { clip-path: inset(93.59% 0 0 0); }
.macbook .screens {
  position: absolute; left: 9.437%; top: 10.669%; width: 81.127%; height: 78.662%;
  overflow: hidden; border-radius: 1.4% / 2.1%; background: #000;
  filter: brightness(var(--glow, 1));
}
.macbook .screens img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s var(--ease);
}
.macbook .screens img.on { opacity: 1; }
.macbook .bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.macbook::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -2%; height: 10%; z-index: -1;
  background: radial-gradient(closest-side, rgba(151, 135, 255, 0.28), transparent); filter: blur(24px);
}

/* ---------------------------------------------------------------- Commercial collage */
.campaign {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 5vw, 80px);
  max-width: var(--max); margin: 0 auto; padding: 22vh var(--gutter) 18vh;
}
.campaign-copy > p:not(.eyebrow) { margin-top: 22px; color: var(--ink-2); font-size: 19px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.chips li {
  padding: 8px 14px; border-radius: 999px; font-size: 15px; color: var(--ink-2);
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line);
}
.collage { position: relative; width: 100%; max-width: 760px; aspect-ratio: 10 / 9; margin-left: auto; perspective: 1400px; }
.collage-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.8s var(--ease); }
.layer {
  position: absolute; overflow: hidden; border-radius: 20px; background: #181014;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px rgba(0, 0, 0, 0.55);
  transform: translate3d(0, var(--py, 0px), var(--z, 0px)) rotate(var(--r, 0deg));
  will-change: transform;
}
.layer img, .layer video { width: 100%; height: 100%; object-fit: cover; }
.layer-light { background: #fff8ec; }
.layer-light img { object-fit: contain; padding: 10%; }
.l1 { left: 29%; top: 22%; width: 42%; aspect-ratio: 1; --z: 60px; z-index: 4; }
.l2 { left: 2%; top: 4%; width: 30%; aspect-ratio: 4 / 5; --z: 0px; --r: -4deg; z-index: 2; }
.l3 { right: 0; top: 6%; width: 48%; aspect-ratio: 1728 / 1117; --z: -40px; --r: 3deg; z-index: 1; }
.l4 { left: 4%; bottom: 4%; width: 34%; aspect-ratio: 1; --z: 30px; --r: 3deg; z-index: 3; }
.l5 { right: 4%; bottom: 10%; width: 30%; aspect-ratio: 1; --z: 90px; --r: -3deg; z-index: 5; }
.l6 { left: 62%; top: 52%; width: 18%; aspect-ratio: 1; --z: 120px; --r: 6deg; z-index: 6; border-radius: 50%; }

/* ---------------------------------------------------------------- References: the fan */
.cast { padding: 12vh 0 16vh; overflow: hidden; }
.fan { position: relative; height: clamp(320px, 40vw, 460px); margin-top: 20px; }
.ref {
  --i: 0;
  position: absolute; left: 50%; top: 50%; width: clamp(150px, 15vw, 210px); margin: 0;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--i) * var(--spread, 0px)))
    translateY(calc(var(--fan, 0) * var(--lift, 0px)))
    rotate(calc(var(--i) * var(--fan, 0) * 7deg));
  transition: transform 0.5s var(--ease);
  z-index: calc(10 - var(--abs, 0));
}
.ref img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px rgba(0, 0, 0, 0.55); }
.ref figcaption { margin-top: 12px; text-align: center; font-size: 15px; color: var(--ink-3); }
.ref figcaption .mention { margin-right: 6px; font-size: 16px; }
.ref:nth-child(1) { --i: -2.5; --abs: 2.5; --lift: 46px; }
.ref:nth-child(2) { --i: -1.5; --abs: 1.5; --lift: 16px; }
.ref:nth-child(3) { --i: -0.5; --abs: 0.5; --lift: 0px; }
.ref:nth-child(4) { --i: 0.5; --abs: 0.5; --lift: 0px; }
.ref:nth-child(5) { --i: 1.5; --abs: 1.5; --lift: 16px; }
.ref:nth-child(6) { --i: 2.5; --abs: 2.5; --lift: 46px; }
.no-js .fan { --fan: 1; --spread: clamp(147px, 14.7vw, 206px); }

/* ---------------------------------------------------------------- Features: bento */
.features { position: relative; isolation: isolate; max-width: var(--max); margin: 0 auto; padding: 14vh var(--gutter) 10vh; }
.features .section-head { margin-left: 0; padding: 0; }
/* Soft colour behind the bento for the glass tiles to blur and catch. It drifts a little as the
   section scrolls past (main.js sets --gy). */
.features-glow { position: absolute; inset: 18% -6% 0; z-index: -1; pointer-events: none; }
.features-glow span {
  position: absolute; width: min(52vw, 720px); aspect-ratio: 1; border-radius: 50%;
  transform: translate3d(0, calc(var(--gy, 0) * var(--speed, 0px)), 0);
}
.features-glow .g1 { left: 0; top: 0; --speed: -220px; background: radial-gradient(closest-side, rgba(151, 135, 255, 0.5), rgba(151, 135, 255, 0)); }
.features-glow .g2 { right: 0; top: 26%; --speed: 160px; background: radial-gradient(closest-side, rgba(246, 184, 149, 0.34), rgba(246, 184, 149, 0)); }
.features-glow .g3 { left: 26%; bottom: 0; --speed: -120px; background: radial-gradient(closest-side, rgba(214, 243, 127, 0.2), rgba(214, 243, 127, 0)); }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
/* Liquid glass, as close as CSS gets: heavy blur and saturation of what's behind, a bevel lit from
   the upper left (like the hero's portrait), a glare that follows the pointer, and the rim below. */
.tile {
  --mx: 50%; --my: 0%;
  position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 260px;
  border-radius: var(--radius);
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 45%, rgba(255, 255, 255, 0.035));
  background-color: rgba(18, 12, 15, 0.4);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.16), inset -1px -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 32px rgba(255, 255, 255, 0.03), 0 24px 60px rgba(0, 0, 0, 0.32);
  transform: perspective(900px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg));
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* The rim: a one-pixel gradient outline, brightest where it faces the light, with a cool glint opposite. */
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.14) 26%, rgba(255, 255, 255, 0.04) 55%, rgba(196, 186, 255, 0.34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tile:hover {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.22), inset -1px -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 32px rgba(255, 255, 255, 0.04), 0 30px 70px rgba(0, 0, 0, 0.42);
}
.tile-text { padding: 26px 28px 28px; }
.tile h3 { font-size: 26px; letter-spacing: -0.02em; }
.tile p { margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.tile-media { position: relative; height: 290px; overflow: hidden; }
.tile-media { -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 98%); mask-image: linear-gradient(to bottom, #000 52%, transparent 98%); }
.tile-media img { position: absolute; width: auto; max-width: none; height: auto; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.t-keys { grid-column: span 3; }
.t-keys .tile-media img { width: 92%; left: 8%; top: 28px; }
.t-costs { grid-column: span 3; }
.t-costs .tile-media img { width: 175%; left: -46%; top: -40px; }
.t-mcp { grid-column: span 2; }
.t-upscale { grid-column: span 2; }
.t-upscale .tile-media img { width: 190%; left: -50%; top: -54px; }
.t-search { grid-column: span 2; }
.search-demo { position: relative; height: 290px; padding: 26px 26px 0; overflow: hidden; }
.search-field {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink); font-size: 16px;
}
.search-field .i { color: var(--ink-3); }
.search-field .q::after {
  content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em;
  background: var(--accent-2); animation: blink 1s steps(1) infinite;
}
.tagged { margin: 14px 0 0; }
.tagged img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.tags li {
  padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 13px;
}
.tags .hit { background: rgba(151, 135, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(196, 186, 255, 0.45); color: var(--ink); }
.search-note { margin: 10px 2px 0; color: var(--ink-3); font-size: 13px; font-style: italic; }

.terminal {
  margin: 26px 26px 0; padding: 18px 18px 20px; border-radius: 16px; min-height: 264px; overflow: hidden;
  background: rgba(7, 5, 6, 0.72); box-shadow: inset 0 0 0 1px var(--line);
  font: 13.5px/1.55 var(--mono); color: var(--ink-2);
}
.terminal p + p { margin-top: 8px; }
.terminal .cmd { color: var(--ink); }
.terminal .caret { color: var(--accent-2); }
.terminal .typed::after { content: "▍"; margin-left: 1px; color: var(--accent-2); animation: blink 1s steps(1) infinite; }
.terminal.done .typed::after { content: none; }
.js .terminal .out { opacity: 0; transform: translateY(6px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .terminal.done .out { opacity: 1; transform: none; }
.js .terminal.done .out + .out { transition-delay: 0.5s; }
@keyframes blink { 50% { opacity: 0; } }
/* Paused (the motion buttons, main.js): the cursors stop blinking and the icon stops floating. */
.still .terminal .typed::after, .still .search-field .q::after, .still .final-icon { animation: none; }

/* ---------------------------------------------------------------- Your studio */
/* A full-bleed photo, slightly enlarged so it can drift (--vx) and settle (--vs) as the section passes. */
.vista { position: relative; height: max(96vh, 600px); margin-top: 6vh; overflow: hidden; }
.vista-image {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: translate3d(var(--vx, 0px), 0, 0) scale(var(--vs, 1.06));
  will-change: transform;
}
.vista::before, .vista::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.vista::before { top: 0; height: 34%; background: linear-gradient(to bottom, var(--bg), rgba(11, 7, 9, 0)); }
.vista::after { bottom: 0; height: 24%; background: linear-gradient(to top, var(--bg), rgba(11, 7, 9, 0)); }
.vista-copy {
  position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); top: 11%;
  max-width: 900px; margin: 0 auto; text-align: center;
  text-shadow: 0 4px 40px rgba(11, 7, 9, 0.6);
}
/* Full white, not --ink-2: the photo's lamps show through behind it (4.5:1 or better). */
.vista-copy p { max-width: 560px; margin: 22px auto 0; color: var(--ink); font-size: 19px; }

/* ---------------------------------------------------------------- Pricing */
.pricing { max-width: var(--max); margin: 0 auto; padding: 16vh var(--gutter) 10vh; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan {
  position: relative; padding: 34px 30px 32px; border-radius: var(--radius);
  /* The checklists line up across the cards when a price's details wrap. */
  display: flex; flex-direction: column;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.plan h3 { font-size: 22px; font-style: italic; font-weight: 400; color: var(--ink-2); }
.plan .price { margin-top: 14px; font-size: 64px; line-height: 1; letter-spacing: -0.04em; font-weight: 500; }
.plan .price small { margin-left: 6px; font-size: 18px; letter-spacing: 0; color: var(--ink-3); font-weight: 400; }
.plan .sub { margin: 10px 0 26px; color: var(--ink-2); font-size: 16px; }
.checks { margin: auto 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; font-size: 16px; color: var(--ink-2); }
.checks li::before {
  content: ""; position: absolute; left: 2px; top: 0.45em; width: 14px; height: 8px;
  border-left: 1.6px solid var(--accent-2); border-bottom: 1.6px solid var(--accent-2); transform: rotate(-45deg);
}
.plan-featured {
  background:
    radial-gradient(500px 300px at 50% -10%, rgba(151, 135, 255, 0.22), transparent 70%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 0 0 1px rgba(196, 186, 255, 0.4), 0 30px 80px rgba(80, 60, 200, 0.25);
}
/* A quiet label, not a button: clear frosted glass with a thin lilac rim and lilac text, and no glow,
   so it doesn't read like "Get Imogen Pro". */
.flag {
  position: absolute; top: 22px; right: 22px; padding: 5px 11px; border-radius: 999px;
  color: var(--accent-2); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(196, 186, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.fine-print { max-width: 780px; margin: 34px auto 0; color: var(--ink-3); font-size: 12.5px; font-weight: 300; line-height: 1.65; text-align: center; }
/* The launch offer: the regular price struck out above the offer price. It ends on 1 January 2027;
   from then on main.js sets .offer-over and the regular prices show instead. */
.offer-banner {
  width: fit-content; margin: -8px auto 30px; padding: 8px 18px; border-radius: 999px;
  background: rgba(151, 135, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(196, 186, 255, 0.32);
  color: var(--accent-2); font-size: 15px; font-weight: 600; text-align: center;
}
.plan .was { margin-top: 14px; display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 20px; }
.plan .was s { text-decoration-thickness: 1.5px; }
.plan .was + .price { margin-top: 8px; }
.off {
  padding: 3px 10px; border-radius: 999px; background: rgba(120, 220, 160, 0.14);
  color: #8fe3b0; font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
}
.regular-only { display: none; }
.offer-over .offer-only { display: none; }
.offer-over .regular-only { display: revert; }

/* ---------------------------------------------------------------- FAQ (home and Support) */
.faq { display: grid; gap: 10px; }
.faq details {
  border-radius: 20px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--line);
  transition: background 0.3s var(--ease);
}
.faq details[open] { background: rgba(255, 255, 255, 0.055); }
.faq summary {
  position: relative; padding: 22px 64px 22px 26px; cursor: pointer; list-style: none;
  font-size: 20px; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 26px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  opacity: 0.6; transition: transform 0.4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 26px 24px; color: var(--ink-2); font-size: 17px; }
.faq details > div p + p, .faq details > div ol, .faq details > div ul { margin-top: 12px; }

/* ---------------------------------------------------------------- Final call to action */
.final { position: relative; padding: 14vh var(--gutter) 18vh; text-align: center; overflow: hidden; }
.final::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: min(900px, 120vw); height: 500px; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(151, 135, 255, 0.22), transparent); filter: blur(10px);
}
.final-icon {
  margin: 0 auto 34px; border-radius: 30px; filter: drop-shadow(0 30px 60px rgba(120, 98, 220, 0.4));
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-10px) rotate(-2deg); } }
.final > p:not(.final-note) { max-width: 520px; margin: 22px auto 0; color: var(--ink-2); font-size: 19px; }
.final-note { margin-top: 18px; color: var(--ink-3); font-size: 14px; }

/* ---------------------------------------------------------------- Footer */
.site-footer { padding: 44px var(--gutter) 60px; border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 18px 40px; align-items: center; }
.footer-inner .brand { font-size: 18px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 26px; font-size: 15px; }
.footer-links a { color: var(--ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-note { grid-column: 1 / -1; max-width: 780px; margin: 10px auto 0; color: var(--ink-3); font-size: 12px; font-weight: 300; line-height: 1.65; text-align: center; }

/* ---------------------------------------------------------------- Documents (Support, Privacy, Terms, 404) */
.page main { max-width: 820px; margin: 0 auto; padding: calc(var(--header-h) + 80px) var(--gutter) 12vh; }
.doc-head { margin-bottom: 44px; }
.doc-head h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1; letter-spacing: -0.035em; }
.doc-head p { margin-top: 18px; color: var(--ink-2); font-size: 19px; }
.doc-meta { margin-top: 14px; color: var(--ink-3); font-size: 15px; font-style: italic; }
.doc h2 { margin: 52px 0 16px; font-size: 30px; letter-spacing: -0.02em; }
.doc h3 { margin: 28px 0 10px; font-size: 21px; }
.doc p, .doc li { color: var(--ink-2); font-size: 17.5px; line-height: 1.65; }
.doc p + p { margin-top: 14px; }
.doc ul, .doc ol { margin: 14px 0; padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a, .doc code { overflow-wrap: anywhere; }
.doc code { font: 0.88em var(--mono); padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.doc .summary, .doc .toc {
  margin: 0 0 36px; padding: 22px 26px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line);
}
.doc .summary p, .doc .summary li { color: var(--ink); }
.doc .summary > :first-child, .doc .toc > :first-child { margin-top: 0; }
.doc .toc ol, .doc .toc ul { margin: 6px 0 0; }
.doc .table-wrap { overflow-x: auto; margin: 18px 0; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.doc th, .doc td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.doc th { color: var(--ink); font-weight: 600; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { margin: 0 0 18px; }
.contact-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px;
  margin-top: 56px; padding: 30px 32px; border-radius: var(--radius);
  background: radial-gradient(520px 260px at 0% 0%, rgba(151, 135, 255, 0.18), transparent 70%), rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.doc .contact-card h2 { margin: 0 0 8px; }
.contact-card p { max-width: 520px; }

/* Press kit (/press/): the download, screenshots that open their full-size PNGs, the icon. */
.doc-head .press-contact { margin-top: 12px; font-size: 17.5px; }
.doc-head .press-contact strong { color: var(--ink); font-weight: 600; }
.press-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; font-size: 16px; }
.press-actions a:not(.btn) { color: var(--ink-2); }
.press-size { color: rgba(12, 8, 10, 0.62); font-size: 14px; font-weight: 400; }
.doc .lede { color: var(--ink); font-size: 19px; }
.press th { white-space: nowrap; }
.press-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; margin-top: 24px; }
.press-shots figure { margin: 0; }
.press-shots a { display: block; border-radius: 12px; }
.press-shots img { width: 100%; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); transition: transform 0.35s var(--ease); }
.press-shots a:hover img { transform: translateY(-2px); }
.press-shots figcaption { margin-top: 10px; color: var(--ink-3); font-size: 14.5px; line-height: 1.5; }
.press-icon { display: flex; align-items: center; gap: 24px; }
.press-icon img { flex: none; width: 128px; height: 128px; }
.doc .press-icon p { margin: 0; }
@media (max-width: 620px) {
  .press-shots { grid-template-columns: 1fr; }
  .press-icon { flex-direction: column; align-items: flex-start; }
}
.page main.not-found { max-width: none; padding: calc(var(--header-h) + 14vh) var(--gutter) 18vh; text-align: center; }
.not-found img { margin: 0 auto 30px; border-radius: 22px; filter: drop-shadow(0 24px 50px rgba(120, 98, 220, 0.4)); }
.not-found h1 { font-size: clamp(54px, 8vw, 110px); letter-spacing: -0.045em; line-height: 0.95; }
.not-found p { margin: 22px auto 34px; max-width: 460px; color: var(--ink-2); font-size: 19px; }

/* ---------------------------------------------------------------- Smaller screens */
@media (max-width: 980px) {
  /* One column: the heading, then the MacBook, then the steps that switch its screen. */
  .studio { grid-template-columns: 1fr; gap: 0; padding-top: 12vh; }
  .studio-copy { display: contents; }
  .studio .eyebrow { justify-self: start; }
  .studio-copy h2 { font-size: clamp(34px, 7vw, 48px); }
  .macbook-wrap { order: 1; margin-top: 28px; }
  .steps { order: 2; margin-top: 32px; gap: 18px; }
  .steps li { padding-left: 40px; }
  .steps h3 { font-size: 21px; }
  .campaign { grid-template-columns: 1fr; padding-top: 14vh; }
  .collage { margin: 0 auto; }
  .bento { grid-template-columns: 1fr 1fr; }
  .t-keys, .t-costs { grid-column: span 2; }
  .t-mcp, .t-upscale, .t-search { grid-column: span 1; }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 760px) {
  :root { --header-h: 64px; }
  body { font-size: 17px; }
  /* Phone browsers scroll the page under their toolbars, and Safari draws fixed elements only above
     its floating bar, so a fixed frame would stop short of the bottom of the screen. Here the page
     is the card instead: a narrow margin of the desk on each side and rounded corners at the top and
     end of the page, all of which scroll with it. */
  .frame { display: none; }
  body { margin: 6px; min-height: calc(100vh - 12px); border-radius: 22px; overflow: clip; }
  /* With no fixed frame, the navbar brings its own strip of the desk above and beside it, so the
     page doesn't show through the gap as it scrolls under. */
  .site-header { box-shadow: 0 -20px 0 20px var(--outside); }
  .site-header.scrolled { box-shadow: inset 0 -1px 0 var(--line), 0 -20px 0 20px var(--outside); }
  .site-header { top: 6px; left: 6px; right: 6px; grid-template-columns: 1fr auto; border-radius: 22px 22px 0 0; }
  .nav-pill { display: none; }
  .hero { min-height: 760px; padding-top: calc(var(--header-h) + 40px); --hero-fade: 20%; }
  .lede { font-size: 17px; }
  .actions { gap: 8px; margin-top: 24px; }
  .actions .btn { height: 46px; padding: 0 18px; font-size: 16px; }
  .wall { gap: 16px; padding-bottom: 50px; }
  .row { gap: 14px; }
  .bento { grid-template-columns: 1fr; }
  .t-keys, .t-costs, .t-mcp, .t-upscale, .t-search { grid-column: auto; }
  .tile-media { height: 220px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .fan { height: 360px; }
  .features-glow { inset: 18% 0 0; }
  /* The steps become a row of cards to swipe, right under the MacBook, so its screen stays in view
     while you read them (main.js shows the screen for the card you swipe to). */
  .steps {
    grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; margin: 22px calc(var(--gutter) * -1) 0;
    padding: 2px var(--gutter) 6px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .steps::-webkit-scrollbar { display: none; }
  .steps li {
    padding: 52px 20px 22px; border-radius: 20px; scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--line);
  }
  .steps li::before { left: 20px; top: 20px; }
  .steps li::after { left: 20px; top: 44px; }
  .ref { width: 34vw; }
  .ref .kind { display: none; }
  /* The vista's copy runs further down the photo on phones, so the scrim behind it reaches further. */
  .vista::before { height: 70%; background: linear-gradient(to bottom, var(--bg), rgba(11, 7, 9, 0.8) 70%, rgba(11, 7, 9, 0)); }
  .no-js .fan { --spread: 33vw; }
}
@media (max-width: 420px) {
  /* Keeps the navbar's "Get Imogen Pro" clear of the brand on small phones. */
  .site-header .btn { padding: 0 14px; }
  .site-header .btn .i { display: none; }
}

/* ---------------------------------------------------------------- Less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
}