/* Fasboard site styles. Load after tokens.css. Breakpoints: 768px, 1024px. */

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

* {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

a {
  color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

section[id] {
  scroll-margin-top: 80px;
}

/* Type */
h1 {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

@media (max-width: 767.98px) {
  h3 {
    font-size: 1.1875rem;
  }
}

.lead {
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.small {
  font-size: var(--text-small);
  line-height: 1.45;
}

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-link);
}

.eyebrow-pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
}

/* Layout */
.container,
.container-wide {
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container {
  max-width: var(--container);
}

.container-wide {
  max-width: var(--container-wide);
}

.section {
  padding-block: var(--section-pad);
}

.section-head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  margin-top: var(--space-4);
}

.section-head .lead {
  max-width: 40ch;
  margin: var(--space-5) auto 0;
}

/* Accessibility */
.skip-link {
  position: absolute;
  display: inline-flex;
  align-items: center;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-size: var(--text-nav);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
}

/* Brand: symbol plus wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 6px;
}

.brand img {
  width: 28px;
  height: 28px;
}

/* The full logo (symbol and wordmark in one file): its own width. */
.brand img.brand-logo {
  width: auto;
  height: 28px;
}

.wordmark {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-dark);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn-secondary:hover {
  background: var(--color-accent-soft);
}

.btn-sm {
  min-height: 36px;
  padding: 0 16px;
  font-size: var(--text-nav);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 479.98px) {
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .site-header {
    background: rgb(251 250 252 / 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 64px;
}

.header-inner .brand {
  margin-right: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
}

.site-nav a {
  font-size: var(--text-nav);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 6px;
  white-space: nowrap;
}

.site-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.desktop-nav ul {
  gap: 32px;
}

.desktop-nav {
  margin-right: var(--space-3);
}

.phone-menu {
  display: none;
}

@media (max-width: 767.98px) {
  .header-inner {
    gap: var(--space-2);
  }

  .desktop-nav {
    display: none;
  }

  .skip-link,
  .brand,
  .header-cta {
    min-height: 44px;
  }

  .phone-menu {
    display: block;
  }

  .dept-card {
    padding: var(--space-5);
  }

  .phone-menu summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-nav);
    font-weight: 500;
    list-style: none;
    cursor: pointer;
  }

  .phone-menu summary::-webkit-details-marker {
    display: none;
  }

  /* Two short bars that close into one when the menu is open. */
  .phone-menu summary::after {
    content: "";
    width: 16px;
    height: 7px;
    border-block: 1.5px solid currentColor;
    transition: height var(--dur-fast) var(--ease-out);
  }

  .phone-menu[open] summary::after {
    height: 0;
    border-bottom-width: 0;
  }

  .phone-menu[open] summary {
    background: var(--color-accent-soft);
  }

  .phone-nav {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: var(--gutter);
    right: var(--gutter);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
  }

  .phone-nav ul {
    display: grid;
    align-items: stretch;
  }

  .phone-nav li + li {
    border-top: 1px solid var(--color-border);
  }

  .phone-nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding-inline: var(--space-3);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
  }
}

/* Hero */
.hero {
  overflow-x: clip;
  padding-top: clamp(56px, 7vw, 104px);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-copy h1 {
  max-width: 12ch;
  margin-top: var(--space-5);
}

.hero-copy .lead {
  max-width: 36ch;
  margin-top: var(--space-5);
}

.hero-copy .btn-row {
  margin-top: var(--space-6);
}

@media (max-width: 479.98px) {
  .header-cta {
    display: none;
  }

  .hero-copy .btn-row {
    align-self: stretch;
  }
}

/* Stage: the product window on a soft brand-colour glow */
.stage {
  position: relative;
  isolation: isolate;
  margin-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

.stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -6% -2%;
  background: url("../assets/stage-glow.svg") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
  mask-image: radial-gradient(closest-side, #000 72%, transparent);
}

.stage-inner {
  position: relative;
}

.window {
  max-width: calc(var(--container-wide) - 2 * var(--gutter));
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgb(40 28 50 / 0.08);
  border-radius: var(--radius-window);
  background: var(--color-surface);
  box-shadow: var(--shadow-window);
}

.window-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 40px;
  padding-inline: 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.window-dots {
  display: flex;
  gap: 8px;
}

.window-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF5F57;
}

.window-dots span:nth-child(2) {
  background: #FEBC2E;
}

.window-dots span:nth-child(3) {
  background: #28C840;
}

.window-title {
  font-size: var(--text-small);
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window-screen {
  position: relative;
}

.window-screen img {
  width: 100%;
}

/* Under 768px the floor crop is framed on the working agent and the Codex desk,
   and a soft fade hides the name chips cut at the bottom edge. */
@media (max-width: 767.98px) {
  .window-screen img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 54% 0;
  }

  .window-screen::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 22%;
    background: linear-gradient(rgb(255 255 255 / 0), var(--color-surface));
  }
}

.callouts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}

.callout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}

.callout-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dept-marketing);
}

.callout--2 .callout-dot {
  background: var(--dept-engineering);
}

/* The phone floor crop has no activity bubble, so its callout is hidden. */
@media (max-width: 767.98px) {
  .callout--2 {
    display: none;
  }
}

/* From 1024px the callouts sit over the window, beside what they name.
   Top offsets skip the 40px title bar, then follow the 1600x1000 screenshot
   (centres in media/storefront/home/README.md, "Hero callout anchors"; right edges
   measured from assets/screens/northwind-live-office.jpg):
   callout 1 sits right of the Codex name tag (36.6%, 66.3%), whose right edge is at 46.5%;
   callout 2 sits right of the Writing tests bubble (36.5%, 15.2%), whose right edge is at 51.3%. */
@media (min-width: 1024px) {
  .callouts {
    position: absolute;
    inset: 0 var(--gutter);
    margin: 0;
    display: block;
    pointer-events: none;
  }

  .callout {
    position: absolute;
    box-shadow: 0 1px 2px rgb(40 28 50 / 0.08), 0 12px 32px rgb(40 28 50 / 0.16);
  }

  .callout--1 {
    left: 48.5%;
    top: calc(40px + (100% - 40px) * 0.663);
    transform: translateY(-50%);
  }

  .callout--2 {
    left: 53.5%;
    top: calc(40px + (100% - 40px) * 0.152);
    transform: translateY(-50%);
  }
}

/* Benefits */
.benefits .section-head {
  margin-bottom: var(--space-8);
}

.benefit-grid {
  display: grid;
  gap: var(--space-7);
}

.benefit {
  display: flex;
  flex-direction: column;
}

.benefit-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 300;
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
}

.benefit h3 {
  margin-top: var(--space-5);
}

.benefit p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* Departments */
.departments {
  padding-top: 0;
}

.departments .section-head {
  margin-bottom: var(--space-8);
}

.dept-grid {
  display: grid;
  gap: var(--space-4);
}

.dept-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.dept-card h3 {
  margin-top: var(--space-5);
}

.dept-card p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

/* A small isometric floor for each department on a panel of its tint. */
.dept-art {
  --tint: var(--dept-engineering-tint);
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 480 / 300;
  border-radius: var(--radius-window);
  background: var(--tint);
}

.dept-art--engineering {
  --tint: var(--dept-engineering-tint);
}

.dept-art--creative {
  --tint: var(--dept-creative-tint);
}

.dept-art--marketing {
  --tint: var(--dept-marketing-tint);
}

.dept-art--finance {
  --tint: var(--dept-finance-tint);
}

@media (min-width: 560px) {
  .dept-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dept-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .dept-card {
    min-height: 220px;
  }
}

/* How it works */
.how {
  padding-top: 0;
}

.how .section-head {
  margin-bottom: var(--space-9);
}

.steps {
  display: grid;
  gap: var(--space-9);
}

.step {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.step-number {
  display: block;
  font-size: var(--text-step-number);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: #7A56A8;
  background: linear-gradient(135deg, #7A56A8, #568CFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.step-text h3 {
  margin-top: var(--space-5);
}

.step-text p {
  max-width: 38ch;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.step-media {
  display: flex;
  justify-content: center;
}

.step-media picture {
  display: block;
  min-width: 0;
}

.frame {
  border: 1px solid rgb(40 28 50 / 0.08);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgb(40 28 50 / 0.03), 0 20px 60px rgb(40 28 50 / 0.09);
}

@media (max-width: 767.98px) {
  .frame {
    border-radius: 16px;
  }
}

@media (min-width: 1024px) {
  .step {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
  }

  /* The wide Team strip gets more room than the other pictures. */
  .step:first-child {
    grid-template-columns: 4fr 8fr;
  }

  /* Even rows swap sides but keep the picture in the wide track. */
  .step:nth-child(even) {
    grid-template-columns: 7fr 5fr;
  }

  .step:nth-child(even) .step-text {
    order: 2;
  }

  /* Steps 2 and 3 show at the same width: step 3's picture is 600px wide. */
  .step + .step .frame {
    max-width: min(100%, 600px);
  }
}

/* Subscriptions */
.subscriptions-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-9);
  border-radius: var(--radius-tray);
  background: var(--color-accent);
  color: var(--color-on-dark);
  text-align: center;
}

/* A soft violet light in the top right corner of the panel. */
.subscriptions-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -45%;
  right: -20%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-violet), transparent);
}

.subscriptions-panel .eyebrow {
  color: var(--color-on-dark-muted);
}

.subscriptions-panel .lead {
  color: var(--color-on-dark-muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius-pill);
  font-weight: 500;
}

.phone-note {
  max-width: 52ch;
  margin: var(--space-7) auto 0;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--color-on-dark-muted);
}

@media (max-width: 767.98px) {
  .subscriptions-panel {
    padding: var(--space-7) var(--space-5);
  }
}

/* Pricing */
.pricing-inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.pricing-inner h2 {
  margin-top: var(--space-4);
}

.pricing-inner .lead {
  margin-top: var(--space-5);
}

/* Download */
.download {
  padding-top: 0;
}

.download .section-head {
  margin-bottom: var(--space-8);
}

.platform-card {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.platform-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.platform-row + .platform-row {
  border-top: 1px solid var(--color-border);
}

.platform-row p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  flex: 1;
}

.icon-circle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface-muted);
}

.platform-name {
  font-weight: 500;
}

.status-pill {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-link);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 767.98px) {
  .platform-card {
    padding-inline: var(--space-4);
  }
}

/* Footer */
.site-footer {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border);
}

/* The brand, then every page in three groups: Product, Learn and Company. */
.footer-inner {
  display: grid;
  gap: var(--space-6);
}

.footer-inner .brand {
  justify-self: start;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}

.footer-group-label {
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text);
}

.footer-nav ul {
  display: grid;
  align-items: start;
  margin-top: var(--space-2);
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-text-muted);
}

.footer-line {
  grid-column: 1 / -1;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }

  .footer-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Motion: entrance and drift only. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes window-rise {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes drift {
  from {
    transform: translate(-2%, -1%) scale(1);
  }

  to {
    transform: translate(2%, 1.5%) scale(1.06);
  }
}

.hero-copy > * {
  animation: rise var(--dur-enter) var(--ease-out) both;
}

.hero-copy h1 {
  animation-delay: 80ms;
}

.hero-copy .lead {
  animation-delay: 160ms;
}

.hero-copy .btn-row {
  animation-delay: 240ms;
}

.window {
  animation: window-rise 900ms var(--ease-out) 200ms both;
}

.stage::before {
  animation: drift var(--dur-drift) ease-in-out infinite alternate;
}

.callout {
  animation: fade var(--dur-enter) var(--ease-out) 900ms both;
}

.callout--2 {
  animation-delay: 1050ms;
}

/* Section content rises as it scrolls into view; without scroll timelines it shows at once. */
@supports (animation-timeline: view()) {
  .reveal {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* How it works page */
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.section-more {
  margin-top: var(--space-8);
  text-align: center;
}

.page-hero {
  overflow-x: clip;
  padding-top: clamp(56px, 7vw, 104px);
}

.page-hero h1 {
  max-width: 14ch;
}

.section-index ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
}

.section-index a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-nav);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.section-index a:hover {
  border-color: var(--color-accent-soft);
  background: var(--color-accent-soft);
}

/* One section-pad between sections, not two. */
.hiw-section + .hiw-section,
.hiw-closing {
  padding-top: 0;
}

.hiw-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.hiw-text .eyebrow {
  margin-top: var(--space-5);
}

.hiw-text h2 {
  margin-top: var(--space-4);
}

.hiw-text p:not(.eyebrow) {
  max-width: 38ch;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
}

.hiw-text p:not(.eyebrow) + p {
  margin-top: var(--space-3);
}

.hiw-section--centred .hiw-text {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.hiw-section--centred .hiw-text p:not(.eyebrow) {
  max-width: 44ch;
  margin-inline: auto;
}

/* A scene is a main crop with an optional detail layer on its lower edge.
   It shrinks to its picture, so no picture shows wider than its own pixels. */
.scene {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.scene-detail {
  position: relative;
  width: 292px;
  max-width: 64%;
  margin: -40px 0 0 auto;
  border: 1px solid rgb(40 28 50 / 0.08);
  border-radius: var(--radius-window);
  background: var(--color-surface);
  box-shadow: var(--shadow-window);
}

.scene-detail--status {
  width: 158px;
  margin-top: -24px;
  border-radius: 12px;
}

.scene picture {
  display: block;
}

.hiw-section--centred .scene {
  margin-top: var(--space-8);
}

.scene--phone {
  max-width: min(100%, 420px);
}

@media (min-width: 768px) {
  .scene-detail {
    position: absolute;
    bottom: -32px;
    left: -24px;
    width: min(292px, 36%);
    max-width: none;
    margin: 0;
  }

  .hiw-grid--swap .scene-detail {
    left: auto;
    right: -24px;
  }

  /* The Team strip is short, so its card hangs below it into reserved space. */
  .scene--strip {
    padding-bottom: 25%;
  }

  .scene--strip .scene-detail {
    bottom: 0;
  }

  .scene-detail--status {
    bottom: -20px;
    left: auto;
    right: -24px;
    width: 158px;
  }
}

@media (min-width: 1024px) {
  .hiw-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
  }

  .hiw-grid--swap {
    grid-template-columns: 7fr 5fr;
  }

  .hiw-grid--swap .hiw-text {
    order: 2;
  }
}

/* Accounts: the dark panel with the glow, as on Home. */
.accounts-panel {
  margin-top: var(--space-9);
}

.accounts-panel .lead {
  max-width: 40ch;
  margin: var(--space-4) auto 0;
}

@media (min-width: 768px) {
  .accounts-panel {
    padding: var(--space-8) var(--space-7);
  }
}

/* Reviews: five steps on one connecting line. */
.flow {
  position: relative;
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-9);
}

.flow::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / 5;
  justify-self: start;
  width: 2px;
  margin: 24px 0 calc(-1 * (var(--space-6) + 24px)) 23px;
  background: color-mix(in srgb, var(--color-link) 28%, var(--color-bg));
  transform-origin: top;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--space-4);
  grid-column: 1;
}

.flow-step:nth-child(1) { grid-row: 1; }
.flow-step:nth-child(2) { grid-row: 2; }
.flow-step:nth-child(3) { grid-row: 3; }
.flow-step:nth-child(4) { grid-row: 4; }
.flow-step:nth-child(5) { grid-row: 5; }

.flow-step .icon-circle {
  grid-row: 1 / 3;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.flow-step h3 {
  align-self: center;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.flow-step p {
  grid-column: 2;
  max-width: 38ch;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .flow::before {
    position: absolute;
    top: 23px;
    left: calc((100% - 4 * var(--space-5)) / 10);
    right: calc((100% - 4 * var(--space-5)) / 10);
    width: auto;
    grid-row: auto;
    grid-column: auto;
    justify-self: stretch;
    height: 2px;
    margin: 0;
    transform-origin: left;
  }

  .flow-step {
    display: block;
    grid-column: auto;
    text-align: center;
  }

  .flow-step:nth-child(n) {
    grid-row: auto;
  }

  .flow-step h3 {
    display: block;
    min-height: 0;
    margin-top: var(--space-5);
  }

  .flow-step p {
    margin: var(--space-2) auto 0;
  }
}

/* Phone apps */
.phone-status {
  max-width: 560px;
  margin-top: var(--space-7);
  text-align: left;
}

/* Closing */
.hiw-closing .btn {
  margin-top: var(--space-6);
}

/* Motion: the page head rises in like Home; scenes build as they scroll into view. */
.section-index {
  animation: rise var(--dur-enter) var(--ease-out) 240ms both;
}

@keyframes detail-lift {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
}

@keyframes draw-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes draw-y {
  from {
    transform: scaleY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .scene-main {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    .scene-detail {
      animation: detail-lift linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 45%;
    }

    .flow {
      view-timeline: --flow block;
    }

    .flow::before {
      animation: draw-y linear both;
      animation-timeline: --flow;
      animation-range: cover 12% cover 44%;
    }

    .flow-step {
      animation: rise linear both;
      animation-timeline: --flow;
    }

    .flow-step:nth-child(1) { animation-range: cover 10% cover 22%; }
    .flow-step:nth-child(2) { animation-range: cover 16% cover 28%; }
    .flow-step:nth-child(3) { animation-range: cover 22% cover 34%; }
    .flow-step:nth-child(4) { animation-range: cover 28% cover 40%; }
    .flow-step:nth-child(5) { animation-range: cover 34% cover 46%; }

    @media (min-width: 1024px) {
      .flow::before {
        animation-name: draw-x;
      }
    }
  }
}

/* Download page */
.download-hero {
  position: relative;
  isolation: isolate;
}

/* The app icon on the same glow as the Home stage. */
.download-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -6% auto;
  height: clamp(420px, 60vw, 720px);
  background: url("../assets/stage-glow.svg") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
  mask-image: radial-gradient(closest-side, #000 72%, transparent);
  animation: drift var(--dur-drift) ease-in-out infinite alternate;
}

.app-icon {
  width: 160px;
  height: auto;
}

.download-hero .eyebrow-pill {
  margin-top: var(--space-6);
}

.download-hero h1 {
  max-width: 13ch;
}

.hero-link {
  margin-top: var(--space-5);
  font-weight: 500;
}

.hero-link a {
  color: var(--color-link);
  text-underline-offset: 4px;
}

/* One section-pad between the sections, not two. */
.download-hero ~ .section + .section {
  padding-top: 0;
}

.download-hero ~ .section .section-head {
  margin-bottom: var(--space-8);
}

#questions .section-head {
  margin-bottom: 0;
}

#questions .btn {
  margin-top: var(--space-6);
}

/* Requirements: rows like the platform card; "to be announced" uses .status-pill. */
.requirements-list {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.requirements-list > div {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
}

.requirements-list > div + div {
  border-top: 1px solid var(--color-border);
}

.requirements-list dt {
  font-weight: 500;
}

.requirements-list dd {
  color: var(--color-text-muted);
}

.requirements-list .status-pill {
  display: inline-block;
}

@media (min-width: 768px) {
  .requirements-list > div {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: baseline;
    gap: var(--space-5);
  }
}

@media (max-width: 767.98px) {
  .app-icon {
    width: 120px;
  }

  .requirements-list {
    padding-inline: var(--space-4);
  }
}

/* First steps: picture beside the text from 1024px, alternating sides like Home. */
.setup-steps {
  display: grid;
  gap: var(--space-9);
}

.setup-steps > li {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.setup-steps .step-media img {
  width: 100%;
  border-radius: var(--radius-card);
}

.setup-steps .step-media picture {
  display: block;
  width: 100%;
}

@media (max-width: 767.98px) {
  .setup-steps {
    gap: var(--space-8);
  }

  .setup-steps .step-media img {
    border-radius: var(--radius-window);
  }
}

@media (min-width: 1024px) {
  .setup-steps > li {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
  }

  .setup-steps > li:nth-child(even) {
    grid-template-columns: 7fr 5fr;
  }

  .setup-steps > li:nth-child(even) .step-text {
    order: 2;
  }
}

/* FAQ page */
.faq-group {
  padding-top: calc(var(--section-pad) / 2);
}

.page-hero + .faq-group {
  padding-top: var(--section-pad);
}

.faq-group > .container {
  display: grid;
  gap: var(--space-5);
}

.faq-group h2 {
  scroll-margin-top: 80px;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 80px;
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 44px;
  padding-block: var(--space-5);
  border-radius: var(--radius-window);
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* A plus in a ring; the upright bar folds away to a minus when the answer is open. */
.faq-item summary::after {
  content: "";
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background:
    linear-gradient(var(--color-text), var(--color-text)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) center / 1.5px 12px no-repeat;
  transition: background-size var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.faq-item summary:hover::after {
  border-color: var(--color-accent-soft);
  background-color: var(--color-accent-soft);
}

.faq-item[open] summary::after {
  border-color: var(--color-accent-soft);
  background-color: var(--color-accent-soft);
  background-size: 12px 1.5px, 1.5px 0;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
}

.faq-answer {
  max-width: 68ch;
  padding-bottom: var(--space-5);
  color: var(--color-text-muted);
}

.faq-answer p + p {
  margin-top: var(--space-3);
}

.faq-item[open] .faq-answer {
  animation: fade var(--dur-fast) var(--ease-out) both;
}

.faq-closing {
  margin-top: calc(var(--section-pad) / 2);
}

.faq-closing .btn {
  margin-top: var(--space-6);
}

/* From 1024px the group heading sits in a column beside its questions. */
@media (min-width: 1024px) {
  .faq-group > .container {
    grid-template-columns: 4fr 8fr;
    align-items: start;
    gap: var(--space-8);
  }

  .faq-group h2 {
    position: sticky;
    top: var(--space-9);
    font-size: calc(var(--text-h2) * 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .download-hero::before,
  .faq-item[open] .faq-answer {
    animation: none;
  }

  .faq-item summary::after {
    transition: none;
  }
}

/* Subscriptions page */
.subs-scene-accounts figcaption {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

.subs-panel .small {
  margin-top: var(--space-6);
  color: var(--color-on-dark-muted);
}

/* The diagram: the narrow drawing up to 560px, the wide one from 1024px. */
.subs-scene-diagram {
  width: 100%;
}

.subs-diagram {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.subs-tools {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.subs-tools li {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.subs-tools strong {
  display: block;
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.subs-tools span {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.subs-grid .hiw-text h3 {
  margin-top: var(--space-7);
}

.subs-uses {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.subs-uses li {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent-soft);
}

.subs-uses strong {
  display: block;
  font-weight: 600;
}

.subs-uses span {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

/* The arrangement image never shows its UI larger than its own size:
   the phone image at up to 335px (2x), the wide image at up to 800px (2x). */
.subs-scene-arrangement {
  width: 100%;
  max-width: 335px;
}

.subs-scene-arrangement picture,
.subs-scene-arrangement .scene-main {
  display: block;
  width: 100%;
}

.subs-detail {
  display: none;
}

.subs-callouts {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}

.subs-callouts li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.subs-marker {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-surface), var(--shadow-card);
  color: var(--color-on-dark);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1;
}

.subs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}

.hiw-closing .subs-actions .btn {
  margin-top: 0;
}

.subs-link {
  font-weight: 500;
  color: var(--color-link);
  text-underline-offset: 4px;
}

.subs-independence {
  max-width: 52ch;
  margin: var(--space-7) auto 0;
  color: var(--color-text-muted);
  text-align: center;
}

@media (min-width: 768px) {
  .subs-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .subs-callouts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .subs-diagram {
    max-width: 100%;
  }

  /* The wide image needs the full width, so the text sits above it in two columns. */
  .subs-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .subs-grid .hiw-text {
    order: 0;
    columns: 2;
    column-gap: var(--space-8);
  }

  .subs-grid .hiw-text .eyebrow {
    margin-top: 0;
  }

  .subs-grid .hiw-text h3 {
    break-before: column;
    margin-top: 0;
  }

  /* From 1024px the wide image shows at up to 800px (1x); below, the phone image. */
  .subs-scene-arrangement {
    max-width: 800px;
    margin-bottom: calc(var(--space-8) + var(--space-4));
  }

  /* The Codex detail hangs off the lower left corner, clear of the Antigravity panel. */
  .hiw-grid .subs-detail {
    display: block;
    top: auto;
    right: auto;
    bottom: calc(-1 * (var(--space-8) + var(--space-4)));
    left: calc(-1 * var(--space-5));
    width: min(541px, 68%);
  }
}

/* Departments page (departments.html) */
/* Each section reuses the How it works grid: text on the left, picture on the right from 1024px. */
.dpt-section {
  --dept: var(--dept-engineering);
  --dept-tint: var(--dept-engineering-tint);
}

.dpt-section--creative {
  --dept: var(--dept-creative);
  --dept-tint: var(--dept-creative-tint);
}

.dpt-section--marketing {
  --dept: var(--dept-marketing);
  --dept-tint: var(--dept-marketing-tint);
}

.dpt-section--finance {
  --dept: var(--dept-finance);
  --dept-tint: var(--dept-finance-tint);
}

/* The department light: a flat disc with one halo ring in its tint. */
.dpt-light {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--dept);
  box-shadow: 0 0 0 4px var(--dept-tint);
  vertical-align: 1px;
}

.dpt-details {
  margin-top: var(--space-7);
}

.dpt-label {
  margin-top: var(--space-6);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dpt-label:first-child {
  margin-top: 0;
}

.dpt-delivers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.dpt-delivers li {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--dept-tint);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.45;
}

.dpt-jobs {
  margin-top: var(--space-3);
}

.dpt-jobs li {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.dpt-jobs li:last-child {
  border-bottom: 0;
}

.dpt-jobs strong {
  display: block;
  font-weight: 600;
}

.dpt-jobs span {
  display: block;
  margin-top: 2px;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.hiw-text .dpt-lead-note {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--dept);
}

/* The picture fills its column; at phone width it is the full content width. */
.dpt-figure {
  min-width: 0;
}

.dpt-figure picture {
  display: block;
}

.dpt-figure img {
  width: 100%;
  border-radius: var(--radius-card);
  background: var(--dept-tint);
}

.dpt-callouts {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.dpt-callouts li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* The markers repeat the numbered markers drawn on the picture. */
.dpt-marker {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dept);
  box-shadow: 0 0 0 3px var(--dept-tint);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-on-dark);
}

@media (max-width: 767.98px) {
  .dpt-figure img {
    border-radius: var(--radius-window);
  }
}

/* Working together: five numbered steps in the shared step-number style. */
.dpt-together {
  padding-top: 0;
}

.dpt-steps {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-8);
}

.dpt-steps h3 {
  margin-top: var(--space-4);
}

.dpt-steps p {
  max-width: 38ch;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .dpt-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .dpt-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .dpt-steps h3 {
    font-size: 1.25rem;
  }
}

.dpt-closing-link {
  margin-top: var(--space-5);
}

.dpt-closing-link a {
  font-weight: 500;
  color: var(--color-link);
}

/* Pricing page */
/* The plan glow reaches up behind the intro; the intro stays above it. */
.pricing-hero {
  position: relative;
  z-index: 1;
}

.pricing-inner .btn {
  margin-top: var(--space-6);
}

.plans {
  overflow-x: clip;
  padding-top: var(--space-8);
}

/* The plan cards stand on the same soft glow as the Home stage. */
.plan-stage {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-6);
}

.plan-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -6% -8%;
  background: url("../assets/stage-glow.svg") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
  mask-image: radial-gradient(closest-side, #000 72%, transparent);
  animation: drift var(--dur-drift) ease-in-out infinite alternate;
}

.plan-concept {
  text-align: center;
}

.plan-grid {
  display: grid;
  gap: var(--space-6);
  max-width: 1040px;
  margin: var(--space-6) auto 0;
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.plan-icon {
  width: 160px;
  height: 96px;
}

.plan-name {
  margin-top: var(--space-5);
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.plan-summary {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.plan-price {
  margin-top: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-lead);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.plan-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.plan-list li {
  padding-left: 32px;
  background: url("../assets/pricing/check.svg") 0 4px / 20px 20px no-repeat;
}

.plan-list .status-pill {
  display: inline-block;
  margin-left: var(--space-1);
  padding-block: 2px;
}

.plan-note {
  margin-top: auto;
  padding-top: var(--space-6);
  color: var(--color-text-muted);
}

.plan-shared {
  max-width: 1040px;
  margin: var(--space-6) auto 0;
  padding: var(--space-6) var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.plan-shared .plan-list {
  margin-top: var(--space-4);
}

.plans + .subscriptions {
  padding-top: var(--space-6);
}

@media (min-width: 768px) {
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-shared .plan-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}

@media (max-width: 767.98px) {
  .plan-card {
    padding: var(--space-5);
  }

  .plan-icon {
    width: 120px;
    height: 72px;
  }

  .plan-shared {
    padding: var(--space-5);
  }
}

/* 404 page */
.not-found {
  padding-bottom: var(--space-8);
}

.not-found-art {
  margin-top: var(--space-8);
}

.not-found-art img {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}