/* Grapefruit site styles. Tokens and component patterns copied from design/ui-guide.html (source of truth: design/DESIGN.md). */

/* ===== Tokens (source: design/DESIGN.md) ===== */
:root {
  --brand-coral: #E84565;
  --accent: #C23D59; --accent-hover: #AD3952; --accent-active: #98354C; --accent-tint: #FCE9ED; --on-accent: #FFFFFF;
  --dark: #232D37; --on-dark: #EEF1F4;
  --bg: #F5F6F8; --surface: #FFFFFF; --surface-2: #EDEFF2;
  --border: #D5DAE0; --border-strong: #8A95A1;
  --text-1: #232D37; --text-2: #4A5562; --text-3: #5E6976;
  --crm: #E84565; --pim: #FD9D28; --erp: #6EAC22; --pos: #A038AF; --wms: #4F5BD5;
  --crm-text: #C23D59; --pim-text: #966325; --erp-text: #4F7A22; --pos-text: #A038AF; --wms-text: #4F5BD5;
  --success: #1E7A4C; --success-hover: #1D6E47; --success-active: #1C6342; --success-tint: #E8F2ED;
  --warning: #866400; --warning-hover: #785B04; --warning-active: #6B5208; --warning-tint: #F3F0E6;
  --error: #B42318; --error-hover: #A12219; --error-active: #8E211A; --error-tint: #F8E9E8;
  --info: #1D63A6; --info-hover: #1C5A96; --info-active: #1B5186; --info-tint: #E8EFF6;

  --label-color: var(--text-2); --label-color-focused: var(--accent); --label-color-error: var(--error); --label-color-disabled: var(--text-3);
  --input-bg: var(--surface); --input-bg-disabled: var(--surface-2);
  --input-border: var(--border); --input-border-hover: var(--border-strong); --input-border-focused: var(--accent); --input-border-error: var(--error);
  --placeholder-color: var(--text-3); --helper-color: var(--text-3); --helper-color-error: var(--error);

  --focus-ring: 0 0 0 3px var(--accent-tint), 0 0 0 1px var(--accent);
  --focus-ring-offset: 2px; --disabled-opacity: 0.45; --hover-tint: rgba(194, 61, 89, 0.06);

  --font-sans: 'Google Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-code: 'Google Sans Code', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --text-display: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);
  --text-h1: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --text-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --text-h3: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --text-overline: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --text-body-lg: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --text-body: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
  --text-caption: clamp(0.78rem, 0.75rem + 0.1vw, 0.84rem);
  --text-code: clamp(0.8rem, 0.78rem + 0.1vw, 0.88rem);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --max-prose: 65ch; --max-content: 720px; --max-wide: 1200px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(35, 45, 55, 0.08);
  --shadow-md: 0 4px 12px rgba(35, 45, 55, 0.10), 0 1px 3px rgba(35, 45, 55, 0.06);
  --shadow-lg: 0 16px 40px rgba(35, 45, 55, 0.16), 0 4px 12px rgba(35, 45, 55, 0.08);
  --duration-fast: 100ms; --duration-base: 180ms; --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-topbar: 300; --z-drawer: 400; --z-modal-backdrop: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800;
  --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;
  --sidebar-w: 220px; --topbar-h: 56px;
  --scrim: rgba(20, 26, 33, 0.48);
  --shimmer: rgba(255, 255, 255, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #F0647F; --accent-hover: #F37E95; --accent-active: #F598AB; --accent-tint: #3A2128; --on-accent: #141A21;
    --bg: #141A21; --surface: #1B232C; --surface-2: #232D37; --border: #33404D; --border-strong: #5B6876;
    --text-1: #EEF1F4; --text-2: #B9C2CC; --text-3: #8F9BA8;
    --crm-text: #F0647F; --pim-text: #FDA94A; --erp-text: #86C23A; --pos-text: #C266D0; --wms-text: #8189E6;
    --success: #4CC38A; --success-hover: #66CD9B; --success-active: #80D7AC; --success-tint: #16302A;
    --warning: #E0A84A; --warning-hover: #E5B666; --warning-active: #EAC482; --warning-tint: #33291A;
    --error: #F2766A; --error-hover: #F48C82; --error-active: #F6A29A; --error-tint: #3A1E1D;
    --info: #6AA8E8; --info-hover: #82B6EC; --info-active: #9AC4F0; --info-tint: #182A3D;
    --hover-tint: rgba(240, 100, 127, 0.08);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --scrim: rgba(0, 0, 0, 0.6); --shimmer: rgba(255, 255, 255, 0.06);
  }
}
:root[data-theme="dark"] {
  --accent: #F0647F; --accent-hover: #F37E95; --accent-active: #F598AB; --accent-tint: #3A2128; --on-accent: #141A21;
  --bg: #141A21; --surface: #1B232C; --surface-2: #232D37; --border: #33404D; --border-strong: #5B6876;
  --text-1: #EEF1F4; --text-2: #B9C2CC; --text-3: #8F9BA8;
  --crm-text: #F0647F; --pim-text: #FDA94A; --erp-text: #86C23A; --pos-text: #C266D0; --wms-text: #8189E6;
  --success: #4CC38A; --success-hover: #66CD9B; --success-active: #80D7AC; --success-tint: #16302A;
  --warning: #E0A84A; --warning-hover: #E5B666; --warning-active: #EAC482; --warning-tint: #33291A;
  --error: #F2766A; --error-hover: #F48C82; --error-active: #F6A29A; --error-tint: #3A1E1D;
  --info: #6AA8E8; --info-hover: #82B6EC; --info-active: #9AC4F0; --info-tint: #182A3D;
  --hover-tint: rgba(240, 100, 127, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 0, 0.6); --shimmer: rgba(255, 255, 255, 0.06);
}
@media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }

/* ===== Reset and base ===== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text-2); font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--text-1); margin: 0; text-wrap: balance; }
p { margin: 0; max-width: var(--max-prose); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
code, kbd, pre { font-family: var(--font-code); font-size: var(--text-code); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon { width: var(--icon-md); height: var(--icon-md); fill: currentColor; flex: none; display: inline-block; vertical-align: middle; }
.icon-xs { width: var(--icon-xs); height: var(--icon-xs); } .icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); } .icon-xl { width: var(--icon-xl); height: var(--icon-xl); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-code); font-size: var(--text-code); }

/* ===== Utilities ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invisible { visibility: hidden; }
.list-none { list-style: none; padding: 0; margin: 0; }
.focus-ring:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.icon-btn {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-2); border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-1); }
.icon-btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* ===== Buttons ===== */
.btn {
  --btn-h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent;
  font-weight: 500; font-size: var(--text-body); line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; position: relative;
  background-clip: padding-box;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.btn .icon { width: var(--icon-md); height: var(--icon-md); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-primary:active { background: var(--accent-active); }
.btn-secondary { background: var(--surface); color: var(--text-1); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-secondary:active { background: var(--border); }
.btn-ghost { background: transparent; color: var(--text-1); }
.btn-ghost:hover { border-color: var(--border); background: var(--surface-2); }
.btn-ghost:active { background: var(--border); }
.btn-lg { min-height: 48px; padding: 0 var(--space-6); font-size: var(--text-body-lg); }
.btn-icon { padding: 0; width: 44px; }
.btn:focus-visible, .btn.is-focused { box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; pointer-events: none; }

/* ===== Forms ===== */
.field { display: grid; gap: var(--space-1); min-width: 0; }
.field label, .field .label { font-size: var(--text-caption); font-weight: 500; color: var(--label-color); transition: color var(--duration-fast) var(--ease-out); }
.field:focus-within > label { color: var(--label-color-focused); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-1);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--placeholder-color); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--input-border-hover); }
.input:focus, .select:focus, .textarea:focus, .field.is-focused .input { outline: none; border-color: var(--input-border-focused); box-shadow: var(--focus-ring); }
.field.is-focused > label { color: var(--label-color-focused); }
.helper { font-size: var(--text-caption); color: var(--helper-color); }
.field.has-error > label { color: var(--label-color-error); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--input-border-error); }
.field.has-error .helper { color: var(--helper-color-error); display: flex; gap: var(--space-1); align-items: center; }
.field.is-disabled { opacity: var(--disabled-opacity); }
.field.is-disabled > label { color: var(--label-color-disabled); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--input-bg-disabled); cursor: not-allowed; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: var(--text-caption); font-weight: 500; color: var(--label-color); padding: 0; margin-bottom: var(--space-2); }
.check, .radio { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; cursor: pointer; color: var(--text-1); position: relative; }
.check input, .radio input, .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box, .radio .box {
  width: 20px; height: 20px; flex: none; border: 1.5px solid var(--border-strong); background: var(--surface);
  display: inline-grid; place-items: center; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.check .box { border-radius: 5px; }
.radio .box { border-radius: 50%; }
.check:hover .box, .radio:hover .box { border-color: var(--text-2); }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z'/%3E%3C/svg%3E"); background-size: 16px; background-position: center; background-repeat: no-repeat; }
.check input:indeterminate + .box { background: var(--accent); border-color: var(--accent); }
.check input:indeterminate + .box::after { content: ""; width: 10px; height: 2px; background: var(--on-accent); border-radius: 2px; }
.radio input:checked + .box { border-color: var(--accent); }
.radio input:checked + .box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.check input:focus-visible + .box, .radio input:focus-visible + .box, .check.is-focused .box { box-shadow: var(--focus-ring); }
.check input:disabled ~ *, .radio input:disabled ~ * { opacity: var(--disabled-opacity); }
.check:has(input:disabled), .radio:has(input:disabled) { cursor: not-allowed; }

/* ===== Product components ===== */
.mod { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.mod i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.mod-crm i { background: var(--crm); } .mod-pim i { background: var(--pim); } .mod-erp i { background: var(--erp); } .mod-pos i { background: var(--pos); } .mod-wms i { background: var(--wms); }
.mod-dots { display: inline-flex; gap: 3px; }
.mod-dots i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.d-crm { background: var(--crm); } .d-pim { background: var(--pim); } .d-erp { background: var(--erp); } .d-pos { background: var(--pos); } .d-wms { background: var(--wms); }


/* ===== Badges ===== */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; line-height: 1.6; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.no-dot::before { display: none; }
.badge-lg { font-size: var(--text-caption); padding: 4px 12px; }
.badge-pill { border-radius: var(--radius-full); }
.badge-success { background: var(--success-tint); color: var(--success); }
.badge-warning { background: var(--warning-tint); color: var(--warning); }
.badge-error { background: var(--error-tint); color: var(--error); }
.badge-info { background: var(--info-tint); color: var(--info); }
.badge-accent { background: var(--accent-tint); color: var(--accent-hover); }
:root[data-theme="dark"] .badge-accent { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-accent { color: var(--accent); } }

/* ===== Alerts and banners (tint + icon, no edge stripe) ===== */
.alert { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); align-items: start; color: var(--text-1); }
.alert .icon { margin-top: 1px; }
.alert b { display: block; font-weight: 500; }
.alert p { font-size: var(--text-caption); color: var(--text-2); }
.alert .icon-btn { margin: -12px -12px -12px 0; }
.alert-success { background: var(--success-tint); } .alert-success > .icon { color: var(--success); }
.alert-warning { background: var(--warning-tint); } .alert-warning > .icon { color: var(--warning); }
.alert-error { background: var(--error-tint); } .alert-error > .icon { color: var(--error); }
.alert-info { background: var(--info-tint); } .alert-info > .icon { color: var(--info); }

/* =====================================================================
   Site layer. Page chrome uses @media (640, 768). Every component uses
   @container against the .wrap or surface it sits in.
   ===================================================================== */
:root { --header-h: 64px; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; }
.icon-sprite { display: none; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-tooltip); background: var(--surface); color: var(--text-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.skip-link:focus { top: var(--space-2); }

.wrap { width: 100%; max-width: var(--max-wide); margin-inline: auto; padding-inline: var(--space-4); container-type: inline-size; }
@media (min-width: 768px) { .wrap { padding-inline: var(--space-8); } }

.overline { font-size: var(--text-overline); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
h3 { font-size: var(--text-h3); font-weight: 500; line-height: 1.3; }
.lead { font-size: var(--text-body-lg); color: var(--text-2); }
.stack-4 > * + * { margin-top: var(--space-4); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 500; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow .icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ===== Page chrome: header ===== */
.site-header { position: sticky; top: 0; z-index: var(--z-topbar); background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header .bar { display: flex; align-items: center; gap: var(--space-2); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--text-1); text-decoration: none; font-weight: 500; font-size: var(--text-body-lg); margin-right: auto; border-radius: var(--radius-md); }
.brand:hover { color: var(--text-1); }
.brand img { width: 32px; height: 32px; display: block; }
.nav-links { display: none; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-3); border-radius: var(--radius-md); color: var(--text-2); text-decoration: none; font-weight: 500; font-size: var(--text-caption); }
.nav-links a:hover { color: var(--text-1); background: var(--surface-2); }
.header-cta { display: none; }
.menu-panel { border-top: 1px solid var(--border); background: var(--surface); }
.menu-panel[hidden] { display: none; }
.menu-panel ul { list-style: none; margin: 0; padding: var(--space-2) 0 var(--space-4); display: grid; }
.menu-panel a:not(.btn) { display: flex; align-items: center; min-height: 48px; color: var(--text-1); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--border); }
.menu-panel li:last-child { padding-top: var(--space-4); }
.menu-panel .btn { width: 100%; }
@media (min-width: 768px) {
  .nav-links { display: flex; align-items: center; gap: var(--space-1); }
  .header-cta { display: inline-flex; margin-left: var(--space-2); }
  .menu-toggle, .menu-panel, .menu-panel:not([hidden]) { display: none; }
}

/* =====================================================================
   Planes, not panels. The ground is the core (--bg); content sheets
   (--surface) slide over it and over each other, so each part touches
   the next. Single logo segments are the only loose objects.
   ===================================================================== */
:root { --shadow-up: 0 -16px 40px rgba(35, 45, 55, 0.12), 0 -4px 12px rgba(35, 45, 55, 0.06); --floor: rgba(35, 45, 55, 0.22); }
:root[data-theme="dark"] { --shadow-up: 0 -16px 40px rgba(0, 0, 0, 0.6); --floor: rgba(0, 0, 0, 0.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-up: 0 -16px 40px rgba(0, 0, 0, 0.6); --floor: rgba(0, 0, 0, 0.6); } }
@property --lift { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ===== Page chrome: sections and sheets ===== */
.section { padding-block: var(--space-16); position: relative; }
@media (min-width: 768px) { .section { padding-block: var(--space-24); } }
.sheet { position: relative; z-index: 2; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-up), var(--shadow-lg); }
.sheet-rise { margin-top: calc(var(--space-24) * -1); }
@media (min-width: 768px) { .sheet { margin-inline: var(--space-4); } }
.sheet > .section + .section { padding-top: 0; }


.display { font-size: var(--text-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--text-1); text-wrap: balance; }
.h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--text-1); }

/* A single logo segment, cropped from its 660 x 660 canvas to its own bounds */
.piece { display: block; overflow: hidden; flex: none; }
.piece img { display: block; max-width: none; height: auto; }
.piece-1 { aspect-ratio: 206.1 / 250.6; }
.piece-1 img { width: 320.2%; margin-left: -56.33%; margin-top: -0.49%; }
.piece-3 { aspect-ratio: 277.2 / 206.2; }
.piece-3 img { width: 238.1%; margin-left: -136.9%; margin-top: -121.03%; }

/* ===== Hero: dark ground, the mark as real 3D pieces in plain WebGL (js/gf-hero.js) ===== */
/* A forced dark scope: the dark-theme token values, on the dark --bg ink, in both themes */
.hero-dark {
  background: #141A21; color: #B9C2CC;
  --text-1: #EEF1F4; --text-2: #B9C2CC; --text-3: #8F9BA8;
  --accent: #F0647F; --accent-hover: #F37E95; --accent-active: #F598AB; --accent-tint: #3A2128; --on-accent: #141A21;
  --surface: #1B232C; --surface-2: #232D37; --border: #33404D; --border-strong: #5B6876;
}
.hero { padding-block: var(--space-10) calc(var(--space-24) + var(--space-16)); overflow: clip; }
@media (min-width: 768px) { .hero { padding-block: var(--space-16) calc(var(--space-24) + var(--space-24)); } }
.hero-grid { display: grid; gap: var(--space-4); align-items: center; }
.hero-copy { min-width: 0; position: relative; z-index: 1; }
.hero-title { font-size: var(--text-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; margin-bottom: var(--space-5); }
.hero-copy .lead { max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-8); }
.status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); color: var(--text-2); font-weight: 500; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--brand-coral); flex: none; }
/* The static <img> is the first paint and the fallback; the canvas fades in over it after its first frame */
.hero-stage { position: relative; aspect-ratio: 1; width: min(86cqi, 420px); margin-inline: auto; }
.hero-stage img { position: absolute; inset: 8%; width: 84%; height: 84%; transition: opacity var(--duration-slow) var(--ease-out); }
.hero-stage canvas { position: absolute; inset: -18%; width: 136%; height: 136%; opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease-out); }
.hero-stage.is-3d canvas { opacity: 1; }
.hero-stage.is-3d img { opacity: 0; }
@container (min-width: 760px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8); }
  .hero-stage { width: 100%; max-width: 620px; }
}

/* ===== Bespoke is best: a see-saw, not two cards ===== */
.statement { max-width: 16ch; }
.seesaw { display: grid; gap: var(--space-8); margin-top: var(--space-12); max-width: 960px; }
.seesaw h3 { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-1); }
.seesaw .tradeoff { font-family: var(--font-code); font-size: var(--text-code); color: var(--text-3); margin-bottom: var(--space-3); }
@container (min-width: 640px) {
  .seesaw { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .seesaw > :last-child { margin-top: var(--space-12); }
}
.answer-line { display: grid; justify-items: center; text-align: center; gap: var(--space-4); margin-top: var(--space-16); }
.answer-line .piece { width: 44px; }
.bespoke-lead { margin-top: var(--space-6); max-width: 52ch; }
.answer-line p { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--text-1); max-width: 22ch; }

/* ===== How it adapts: an isometric stack of planes ===== */
.idea-grid { display: grid; gap: var(--space-10); align-items: center; }
@container (min-width: 900px) { .idea-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); } }
.iso { position: relative; aspect-ratio: 5 / 4; container-type: inline-size; perspective: 1800px; display: grid; place-items: center; }
.iso-scene { --iso-z: 40px; position: relative; width: 56cqi; aspect-ratio: 1; transform-style: preserve-3d; transform: translateY(8cqi) rotateX(56deg) rotateZ(-38deg); }
@container (min-width: 520px) { .iso-scene { --iso-z: 72px; } }
.iso-plane { position: absolute; inset: 0; border-radius: var(--radius-lg); }
.iso-core { background: var(--dark); box-shadow: 0 0 0 1px var(--border-strong); }
.iso-bp { background: var(--surface); border: 1.5px solid var(--border-strong); transform: translateZ(calc(var(--iso-z) * var(--lift))); }
.iso-ext { inset: 8% -26% auto auto; width: 34%; height: 34%; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); transform: translateZ(calc(var(--iso-z) * 2 * var(--lift))); }
.iso-n { position: absolute; left: 7%; top: 7%; font-family: var(--font-code); font-size: 4cqi; font-weight: 500; color: var(--text-3); }
.iso-core .iso-n { color: #8F9BA8; }
.iso-ext .iso-n { left: 14%; top: 14%; }
.iso-dots { position: absolute; left: 7%; bottom: 9%; display: flex; gap: 2.6cqi; }
.iso-dots i { width: 3cqi; height: 3cqi; border-radius: var(--radius-full); }
.iso-lines { position: absolute; left: 7%; right: 18%; top: 26%; display: grid; gap: 3cqi; }
.iso-lines i { height: 2.2cqi; border-radius: var(--radius-sm); background: var(--surface-2); }
.iso-lines i:nth-child(2) { width: 70%; } .iso-lines i:nth-child(3) { width: 82%; } .iso-lines i:nth-child(4) { width: 56%; }
:root[data-theme="dark"] .iso-core { background: #0E1318; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .iso-core { background: #0E1318; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .iso-scene { animation: gf-lift linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes gf-lift { from { --lift: 0.35; } to { --lift: 1; } }
.layer-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.layer-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); }
.layer-list .n { font-family: var(--font-code); color: var(--text-3); font-size: var(--text-code); padding-top: 2px; }
.layer-list b { display: block; color: var(--text-1); font-weight: 500; }
.layer-list .opt { color: var(--text-3); font-weight: 400; }
.pull { margin: var(--space-20) 0 0; display: grid; gap: var(--space-3); }
.pull .label { font-size: var(--text-caption); font-weight: 500; color: var(--text-3); }
.pull blockquote { margin: 0; font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--text-1); max-width: 22ch; text-wrap: balance; }
.pull em { font-style: normal; color: var(--accent); }


/* ===== The parts: one line through five markers ===== */
.parts-head { text-align: center; display: grid; justify-items: center; gap: var(--space-4); margin-bottom: var(--space-12); }
.parts-head p { max-width: 52ch; }
.parts-line { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); --gap: var(--space-8); }
.parts-line li { position: relative; padding-left: var(--space-8); }
.parts-line .dot { position: absolute; left: 0; top: 0.6em; width: 12px; height: 12px; border-radius: var(--radius-full); box-shadow: 0 0 0 4px var(--bg); }
.parts-line li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: calc(0.6em + 6px); height: calc(100% + var(--gap)); width: 2px; background: var(--text-1); z-index: -1; }
.parts-line .acr { display: block; font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; color: var(--text-1); }
.parts-line .role { display: block; font-size: var(--text-caption); font-weight: 500; color: var(--text-3); margin: var(--space-1) 0 var(--space-2); }
.parts-line p { font-size: var(--text-caption); }
.parts-line .acr { font-size: var(--text-h2); }
@container (min-width: 760px) {
  .parts-line { grid-template-columns: repeat(5, minmax(0, 1fr)); --gap: var(--space-6); gap: var(--gap); }
  .parts-line li { padding-left: 0; padding-top: var(--space-8); }
  .parts-line .dot { top: 0; }
  .parts-line li:not(:last-child)::after { top: 5px; left: 6px; height: 2px; width: calc(100% + var(--gap)); }
  .parts-line .acr { font-size: var(--text-h1); }
}

/* Real product surfaces (the approval slip, the form) */
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); container-type: inline-size; }
@container (min-width: 640px) { .surface { padding: var(--space-8); } }

/* ===== Change without the disruption: a reassurance strip, one row ===== */
.strip-sec { padding-block: var(--space-12) calc(var(--space-24) + var(--space-12)); }
.strip { display: grid; gap: var(--space-6); padding-block: var(--space-6); border-block: 1px solid var(--border); }
.strip-head { display: grid; gap: var(--space-2); }
.strip-head h2 { font-size: var(--text-h3); font-weight: 700; }
.strip-head p { font-size: var(--text-caption); }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: stage; }
.stages li { position: relative; display: grid; gap: 2px; padding-left: var(--space-6); font-size: var(--text-caption); }
.stages li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--text-3); }
.stages li:last-child::before { background: var(--text-1); border-color: var(--text-1); }
.stages b { color: var(--text-1); font-weight: 500; }
.stages span { color: var(--text-3); }
@container (min-width: 900px) {
  .strip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-12); align-items: center; }
  .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .stages li { padding-left: 0; padding-top: var(--space-6); }
  .stages li::before { top: 0; }
  .stages li:not(:last-child)::after { content: ""; position: absolute; top: 6px; left: 16px; right: calc(var(--space-4) * -1 + 4px); height: 2px; background: var(--border-strong); }
}

/* ===== AI: an annotated approval slip ===== */
.ai { padding-top: var(--space-8); }
.ai-head { display: grid; gap: var(--space-4); max-width: var(--max-content); margin-bottom: var(--space-12); }
.ai-grid { display: grid; gap: var(--space-8); align-items: start; }
@container (min-width: 900px) { .ai-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-12); } }
.slip { box-shadow: var(--shadow-lg); display: grid; gap: var(--space-4); }
.slip-head { display: flex; gap: var(--space-3); align-items: center; }
.slip-ic { width: 40px; height: 40px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--surface-2); color: var(--text-1); flex: none; }
.slip-ask { color: var(--text-1); font-weight: 500; }
.slip-sub { font-size: var(--text-caption); color: var(--text-3); }
.slip table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); }
.slip td { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); color: var(--text-1); }
.slip td:last-child { text-align: right; font-family: var(--font-code); font-variant-numeric: tabular-nums; white-space: nowrap; }
.slip s { color: var(--text-3); margin-right: var(--space-2); }
.slip-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.slip-actions .btn { pointer-events: none; }
.slip-wait { font-size: var(--text-caption); color: var(--warning); font-weight: 500; display: inline-flex; align-items: center; gap: var(--space-2); }
.slip-log { font-family: var(--font-code); font-size: 12px; color: var(--text-3); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.mk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--text-1); color: var(--bg); font-family: var(--font-code); font-size: 12px; font-weight: 500; flex: none; vertical-align: middle; }
.slip .mk { margin-left: var(--space-2); }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.notes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); color: var(--text-1); }
.notes p { font-size: var(--text-body-lg); line-height: 1.5; }
@container (min-width: 900px) { .notes { padding-top: var(--space-8); } }
.illus-note { font-size: 12px; color: var(--text-3); }

/* ===== Your brand: type over a fanned deck ===== */
.brand-sec { background: var(--surface-2); }
.brand-title { position: relative; z-index: 2; max-width: 12ch; }
.brand-grid { display: grid; gap: var(--space-10); margin-top: var(--space-8); }
.brand-copy { display: grid; gap: var(--space-4); align-content: start; }
@container (min-width: 900px) { .brand-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-16); } .brand-copy { order: -1; } }
.deck-wrap { position: relative; z-index: 1; }
.mock-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); overflow-x: auto; scrollbar-width: thin; }
.mock-tab { min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 500; font-size: var(--text-caption); cursor: pointer; border-radius: var(--radius-full); white-space: nowrap; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.mock-tab:hover { color: var(--text-1); border-color: var(--border-strong); }
.mock-tab[aria-selected="true"] { background: var(--text-1); color: var(--bg); border-color: var(--text-1); }
.deck { display: grid; padding: var(--space-8) var(--space-8) 0 0; perspective: 1400px; }
.deck > .card-role { grid-area: 1 / 1; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); transform-origin: 0 100%; }
.card-role { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.card-role[data-pos="0"] { transform: none; z-index: 3; box-shadow: var(--shadow-lg); }
.card-role[data-pos="1"] { transform: translate(16px, -16px) translateZ(-40px); z-index: 2; opacity: 0.9; }
.card-role[data-pos="2"] { transform: translate(32px, -32px) translateZ(-80px); z-index: 1; opacity: 0.8; }
.mock-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.mock-logo { width: 32px; height: 32px; border-radius: var(--radius-md); border: 1.5px dashed var(--border-strong); flex: none; }
.mock-name { font-weight: 500; color: var(--text-1); line-height: 1.3; }
.mock-name small { display: block; font-weight: 400; font-size: 12px; color: var(--text-3); }
.mock-panel { padding: var(--space-4); display: grid; gap: var(--space-2); }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--text-caption); color: var(--text-1); }
.deck-wrap .illus-note { margin-top: var(--space-4); }

/* ===== Who is behind it: a signature ===== */
.behind { display: grid; justify-items: center; text-align: center; gap: var(--space-6); }
.behind-title { max-width: 18ch; text-wrap: balance; }
.behind p { font-size: var(--text-h3); line-height: 1.45; color: var(--text-1); max-width: 34ch; }
.sig { width: 240px; height: auto; }
.sig-dark { display: none; width: 72px; }
:root[data-theme="dark"] .sig-light { display: none; }
:root[data-theme="dark"] .sig-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sig-light { display: none; } :root:not([data-theme="light"]) .sig-dark { display: block; } }

/* ===== Contact ===== */
.contact-title { max-width: 14ch; margin-bottom: var(--space-10); }
.contact-grid { display: grid; gap: var(--space-10); }
@container (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; } }
.contact-aside { display: grid; gap: var(--space-5); align-content: start; }
.mail-big { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; font-size: var(--text-h3); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.mail-big:hover { text-decoration: underline; }
.mail-big .icon { width: var(--icon-lg); height: var(--icon-lg); flex: none; }
.form-wrap { position: relative; isolation: isolate; }
.form-wrap .piece { position: absolute; width: 130px; right: -28px; top: -56px; z-index: -1; }
@container (min-width: 900px) { .form-wrap .piece { width: 170px; right: -48px; top: -78px; } }
.form-wrap .surface { box-shadow: var(--shadow-lg); }
.form-grid { display: grid; gap: var(--space-4); }
.form-grid .full { grid-column: 1 / -1; }
@container (min-width: 420px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.opt { color: var(--text-3); font-weight: 400; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.check { align-items: flex-start; padding-block: var(--space-3); }
.check .box { margin-top: 2px; }
.check-text { font-size: var(--text-caption); color: var(--text-2); line-height: 1.5; }
.form-note { margin-top: var(--space-4); }
.form-note[hidden] { display: none; }
.field .helper:empty { display: none; }

/* ===== Footer: back on the ground ===== */
.site-footer { padding-block: var(--space-20) var(--space-8); font-size: var(--text-caption); }
.foot-grid { display: grid; gap: var(--space-8); }
.foot-brand { display: grid; gap: var(--space-4); }
.foot-brand img { width: 48px; height: 48px; }
.foot-brand p { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--text-1); }
.foot-col { display: grid; gap: var(--space-1); align-content: start; }
.foot-col p { color: var(--text-2); }
.foot-col a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-legal { margin-top: var(--space-12); padding-top: var(--space-5); border-top: 1px solid var(--border); color: var(--text-3); }
@container (min-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--space-10); align-items: end; } }

/* ===== Privacy notice ===== */
.prose { max-width: var(--max-content); }
.prose h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--space-4); }
.prose h2 { margin-top: var(--space-12); margin-bottom: var(--space-3); font-size: var(--text-h3); }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--space-3); }
.prose ul { padding-left: var(--space-5); margin: 0; }
.prose li + li { margin-top: var(--space-2); }
.prose li { max-width: var(--max-prose); }
.placeholder { background: var(--warning-tint); color: var(--text-1); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text-1); }
.idea-grid .lead { margin-top: var(--space-4); }
.slip-note { margin-top: var(--space-3); }

/* Compact parts row inside "How it adapts" */
.parts-compact { margin-top: var(--space-16); }
.parts-compact .acr { font-size: var(--text-h2); }
@container (min-width: 760px) { .parts-compact .acr { font-size: var(--text-h2); } }

/* Honeypot: hidden from people, visible to bots. */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}