/* Layout, mobile and motion rules carried over from the design prototype. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;  /* no grey flash on tap */
  -webkit-text-size-adjust: 100%;            /* no font inflation in landscape */
}
/* controls, not content: instant taps, no long-press selection */
button, [role="button"], [role="tab"], a[aria-label] { touch-action: manipulation; }
button, [role="tab"] { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* iOS zooms the page on focus below 16px and never zooms back out */
@media (pointer: coarse) { input, textarea, select { font-size: 16px; } }
/* edge-to-edge under the notch, content padded back out */
#site-header { padding-top: env(safe-area-inset-top, 0px); }
footer { padding-bottom: calc(clamp(40px, 6vw, 64px) + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-transparency: reduce) {
  #site-header { background: #FFFEFD; backdrop-filter: none; }
}
body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-charcoal-500); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid #6E655C; outline-offset: 2px; border-radius: 2px; }
#hero-grid { grid-template-columns: 1fr; }
#hero-caption { position: static; margin-top: 20px; }
@media (min-width: 1120px) { #hero-caption { position: absolute; left: -84px; bottom: 132px; width: 236px; margin-top: 0; } }
@media (min-width: 900px) { #hero-grid { grid-template-columns: minmax(0, 1fr) minmax(338px, max-content); } }
#ecosystem-gallery { display: flex; flex-direction: column; gap: 10px; }
#ecosystem-gallery > div[data-panel] { min-height: 430px; }
#ecosystem-gallery [data-spine] { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; box-sizing: border-box; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 16px; padding: 0 24px; }
@media (min-width: 900px) {
  #ecosystem-scroll { height: 320vh; }
  #ecosystem-sticky { position: sticky; top: 76px; height: calc(100vh - 76px); box-sizing: border-box; padding: clamp(32px, 6vh, 72px) 0 clamp(18px, 3vh, 36px); display: flex; flex-direction: column; }
  #ecosystem-gallery { flex-direction: row; flex: 1 1 0; min-height: 260px; height: auto; justify-content: center; align-items: center; }
  #ecosystem-gallery > div[data-panel] { min-height: 0; flex: 0 0 auto; flex-basis: clamp(64px, 6vw, 84px); /* height is set in main.js so the open card is always 16:9 */ }
  #ecosystem-gallery [data-spine] { right: auto; width: var(--spine-w, clamp(64px, 6vw, 84px)); flex-direction: column; justify-content: flex-end; align-items: center; gap: 22px; padding: 26px 0 26px 4px; /* 4px left pad = label column sits 2px right of centre */ }
  #ecosystem-gallery [data-vert] { writing-mode: vertical-rl; transform: rotate(180deg); }
}
/* ---------- phone / tablet ----------
   Nested card padding inside section padding costs a quarter of the line length
   on a 390px screen, so cards give up their chrome and become full-bleed bands:
   one page gutter, text at its full width, media edge to edge. ---------- */
@media (max-width: 899px) {
  /* ecosystem: four stacked portals, divided by a rule rather than boxed */
  #ecosystem { padding-left: 0 !important; padding-right: 0 !important; }
  #ecosystem-sticky > p, #ecosystem-title { padding-left: 20px; padding-right: 20px; }
  #ecosystem-title { max-width: none; }
  #ecosystem-gallery { gap: 0; }
  #ecosystem-gallery > div[data-panel] {
    min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    padding: 34px 20px 24px; border-radius: 0 !important; position: relative; z-index: 0;
    background: transparent !important;
    box-shadow: inset 0 1px 0 0 #CBBFB4 !important;
  }
  /* 6. every block is divided, including the first */
  #ecosystem-gallery > div[data-panel]:first-of-type { padding-top: 22px; }
  #ecosystem-gallery [data-spine] { display: none; }
  #ecosystem-gallery [role="tab"] { display: none; }
  #ecosystem-gallery [data-copy] {
    order: 1; position: static !important; width: auto !important; min-width: 0 !important;
    max-width: none !important; transform: none !important; opacity: 1 !important;
    pointer-events: auto;
    display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline;
  }
  #ecosystem-gallery [data-copy] > p:first-child {
    grid-column: 1; grid-row: 1; margin: 0 !important;
    font-size: 22px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  }
  #ecosystem-gallery [data-copy] > h3 { grid-column: 2; grid-row: 1; margin: 0 !important; }
  #ecosystem-gallery [data-copy] > p:nth-child(3) { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0 !important; }
  #ecosystem-gallery [data-copy] > p:nth-child(4) { grid-column: 1 / -1; grid-row: 3; margin: 10px 0 0 !important; }
  /* one media band per block, same height for all four, so the stack keeps a
     rhythm instead of a 320px card followed by a 950px one. The device shots are
     cropped to their top third and run off the bottom edge of the block. */
  #ecosystem-gallery [data-art] {
    order: 2; position: static !important; display: block;
    width: calc(100% + 40px); height: 278px; margin: 22px -20px -32px;
    object-fit: cover; object-position: center 13%;
    max-width: none !important; max-height: none !important;
    transform: none !important; opacity: 1 !important;
  }
  /* the dashboard shot carries its own drop shadow, so it is fitted, not cropped */
  #ecosystem-gallery [data-art][src*="portal-brand"] {
    width: 96% !important; height: 214px; object-fit: cover; object-position: center top;
    margin: 42px auto -24px;
  }
  /* the monogram is a mark, not a media band - it gets a mark's breathing room */
  /* bigger and tight into the bottom corner - the cropped version severed the
     mark’s connecting curve and read as two broken strokes */
  #ecosystem-gallery [data-art][src$=".svg"] { width: 230px !important; height: auto; object-fit: fill; margin: 120px 3px 0 auto; }
  #ecosystem-gallery > div[data-panel]:last-of-type { padding-bottom: 10px; }
  /* ---- phone type scale: the desktop ramp is a size too large on a 390px screen ---- */
  #hero-title { font-size: 32px !important; line-height: 1.1 !important; max-width: none !important; }
  #hero-title + p { font-size: 16px !important; line-height: 24px !important; }
  /* on a phone the section name carries the hierarchy and the sentence below it
     becomes supporting copy, rather than two competing blocks of large type */
  #ecosystem-sticky > p {
    font-size: 30px !important; font-weight: 700 !important;
    letter-spacing: 0.01em !important; line-height: 1.12 !important;
    color: var(--text-primary) !important; margin-bottom: 14px !important;
  }
  #ecosystem-title { font-size: 17px !important; line-height: 25px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #6C6A67 !important; margin-bottom: 22px !important; }
  #ecosystem-gallery [data-copy] h3 { font-size: 22px !important; }
  #ecosystem-gallery [data-copy] > p:nth-child(2) { font-size: 15px !important; line-height: 22px !important; }
  #ecosystem-gallery [data-copy] > p:nth-child(3) { font-size: 15px !important; line-height: 23px !important; }
  #audience > div > p:first-of-type {
    font-size: 30px !important; font-weight: 700 !important;
    letter-spacing: 0.01em !important; line-height: 1.12 !important;
    color: var(--text-primary) !important; margin-bottom: 14px !important;
  }
  #audience > div > h2 { font-size: 17px !important; line-height: 25px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #6C6A67 !important; }
  #audience article h3 { font-size: 21px !important; }
  /* audience labels never break mid-phrase */
  #audience-tabs > button { white-space: nowrap; letter-spacing: 0.04em !important; }
  #audience article > p { font-size: 15px !important; line-height: 23px !important; margin-bottom: 14px !important; }
  #audience article > p:nth-of-type(2) { margin-bottom: 10px !important; }
  #audience article > ol { margin-bottom: 22px !important; gap: 14px !important; }
  #audience article > ol li { padding-top: 14px !important; }
  #audience ol li span { font-size: 15px !important; line-height: 23px !important; }
  #form-title { font-size: 26px !important; margin-bottom: 10px !important; text-transform: uppercase; letter-spacing: -0.01em !important; }
  #find-out-more > div > div:first-child > p:last-of-type { font-size: 16px !important; line-height: 24px !important; }
  #lead-panel h3 { font-size: 20px !important; line-height: 28px !important; }
  /* eyebrows shrink with everything else, but stay above the 13px floor */
  #find-out-more > div > div:first-child > p:first-child { font-size: 13px !important; margin-bottom: 10px !important; }
  #audience article > p:nth-of-type(1) { font-size: 14px !important; letter-spacing: 0.08em !important; }

  /* who it is for: two full-bleed colour bands instead of two inset cards */
  /* bottom padding is 8px short on purpose: the CTA's 54px mount holds a 46px button, so the visible gap under it matches the 26px above the title */
    #audience article { border-radius: 10px !important; padding: 26px 20px 18px !important; }
  #audience article p, #audience article h3 { max-width: none !important; }

  /* form: the card keeps its shape, but not 24px of inherited desktop padding */
  #lead-panel { padding: 22px 21px 24px !important; }
  #ecosystem, #audience, #find-out-more { padding-top: 44px !important; padding-bottom: 46px !important; }
  /* the photo belongs after the ask on a phone, not between the ask and the form */
  #find-out-more > div { display: flex !important; flex-direction: column; gap: 0 !important; }
  #find-out-more > div > div:first-child { display: contents !important; }
  #find-out-more > div > div:first-child > img { order: 3 !important; margin-top: 24px !important; }
  #find-out-more > div > div:last-child { order: 2 !important; margin-top: 24px; }
  footer > div:last-child > p, footer > div:last-child > a { font-size: 13px !important; }
  footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important; }
  #find-out-more img { min-height: 0 !important; flex: 0 0 auto !important; aspect-ratio: 4 / 3; }
  [data-hero-float] { width: min(216px, 56vw) !important; }
  #hero-markets { display: none !important; }
  /* the launch note sits beside the CTA, not wrapped beneath it */
  #hero-cta { flex-wrap: nowrap !important; gap: 12px !important; }
  /* the button mount is 54px tall but the button renders 46, so centring on the
     row left the note 4px low - align it to the button instead */
  #hero-cta > span { font-size: 13px !important; line-height: 18px !important; margin-top: -8px !important; }
  #hero-caption { margin-top: 8px !important; }
  [data-hero-float] > img { margin-left: 5px; }
  /* phones use overlay scrollbars; the desktop preview’s 15px gutter shifted
     every centred element left of true centre */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; }
  #hero { padding-top: 24px !important; padding-bottom: 24px !important; }

  /* the ridge is drawn on a 1440x800 canvas with preserveAspectRatio="none", so
     filling a tall narrow hero distorts it. Let it keep its true proportions and
     overflow sideways instead: width drives, height follows the viewBox. */
  /* the glow is placed top-right for a wide canvas; on a phone it rises from the
     foot of the hero instead, so it reads behind the mockup and the CTA */
  #hero-glow { display: none; }
  /* a true circle centred on the mockup, so the glow sits behind the device
     rather than washing the whole foot of the section */
  [data-hero-float]::before {
    content: ""; position: absolute; left: 50%; top: 44%;
    width: 336%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
    border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle closest-side, rgba(210, 193, 181, 0.6) 0%, rgba(210, 193, 181, 0.26) 52%, rgba(210, 193, 181, 0) 78%);
  }
  [data-hero-float] > img { position: relative; z-index: 1; }
  #hero-ridge {
    width: 300% !important; left: -100% !important; right: auto !important;
    height: auto !important; aspect-ratio: 1440 / 800;
    top: 42% !important; bottom: auto !important;
  }
}
/* the 112px label gutter costs a third of a phone screen */
@media (max-width: 760px) {
  #audience ol li { grid-template-columns: 1fr !important; gap: 6px !important; }

}
@media (max-width: 420px) {
  #audience-tabs > button { flex: 1 1 0; min-width: 0; padding: 0 10px 12px; font-size: 14px; }
}
/* comfortable thumb targets without changing the desktop rhythm */
@media (pointer: coarse), (max-width: 899px) {
  #site-header nav button, #site-header nav a { min-height: 44px; }
  footer a:not([aria-label]) { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 760px) {
  #hero-markets > span:first-child { font-size: 13px !important; }
}
/* short viewports: the open panel hits its height floor, so the copy gets the
   whole card and the artwork steps aside rather than being overlapped */
@media (min-width: 900px) and (max-height: 700px) {
  #ecosystem-sticky { padding: clamp(16px, 3vh, 32px) 0 clamp(12px, 2vh, 20px); }
  #ecosystem-gallery [data-art] { display: none; }
  #ecosystem-gallery [data-copy] { width: calc(100% - 48px) !important; max-width: calc(100% - 48px) !important; }
  #ecosystem-gallery [data-copy] h3 { font-size: 24px !important; margin-bottom: 6px !important; }
  #ecosystem-gallery [data-copy] > p { font-size: 15px !important; line-height: 21px !important; }
  #ecosystem-gallery [data-copy] > p:first-child { font-size: 12px !important; margin-bottom: 6px !important; }
  #ecosystem-gallery [data-copy] > p:nth-child(3) { margin-bottom: 6px !important; }
}
/* indeterminate sweep while the lead is in flight - status, not decoration */
@keyframes om-sending { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
#submit-progress > span { animation: om-sending 1100ms var(--ease-in-out) infinite; }
@keyframes om-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* hero load-in: hierarchy, read in the order it is written */
@media (prefers-reduced-motion: no-preference) {
  [data-enter] { animation: om-enter 560ms var(--ease-out) both; }
  [data-enter="2"] { animation-delay: 70ms; }
  [data-enter="3"] { animation-delay: 140ms; }
  [data-enter="4"] { animation-delay: 210ms; }
}
/* reduced motion: gentler, not nothing - keep the fades, drop every movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-property: opacity, color, background-color, box-shadow, border-color, text-decoration-color !important;
    transition-duration: 160ms !important;
  }
}

/* ---------- static replacements for the prototype's design-system components ---------- */
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--color-charcoal-500); color: var(--color-neutral-100); padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; }
.skip-link:focus { left: 16px; }

/* Button */
.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; border: none; border-radius: var(--radius-button); cursor: pointer; font-family: var(--font-sans); font-weight: 500; line-height: 22px; white-space: nowrap; transition: background var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.u-btn-md { height: 38px; padding: 8px 16px; font-size: 14px; }
.u-btn-lg { height: 46px; padding: 12px 16px; font-size: 14px; }
.u-btn-primary { background: var(--action-primary); color: var(--text-inverse); }
.u-btn-primary:hover { background: var(--action-primary-hover); }
.u-btn-outlined { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-default); }
.u-btn-outlined:hover { background: var(--action-secondary-hover); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Input (size l) */
.u-field { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 100%; }
.u-field > label { display: inline-flex; gap: 4px; font-weight: 500; font-size: 14px; line-height: 22px; color: var(--text-primary); }
.u-field-box { display: flex; align-items: center; gap: 4px; align-self: stretch; height: 54px; padding: 16px; box-sizing: border-box; overflow: hidden; border-radius: var(--radius-input); box-shadow: inset 0 0 0 1px var(--border-default); transition: box-shadow var(--motion-fast) var(--ease-standard); cursor: text; }
.u-field-box:focus-within, .u-field.is-error .u-field-box { box-shadow: inset 0 0 0 1px var(--border-strong); }
.u-field-box input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 22px; color: var(--text-primary); }
.field-error { align-self: stretch; margin: 2px 0 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--text-primary); }
#grp-handle.is-error .u-field-box { box-shadow: inset 0 0 0 1px var(--border-strong); }

/* audience folder tabs */
.aud-tab { appearance: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 22px 12px; border-radius: 6px 6px 0 0; height: 54px; background: rgba(255, 254, 253, 0.14); color: #FFFEFD; transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out); }
.aud-tab.is-active { height: 62px; background: #FFFEFD; color: #403E3C; }
.aud-tab:active { transform: scale(0.98); }

/* submit */
.u-submit { position: relative; overflow: hidden; margin-top: 4px; width: 100%; height: 54px; border: none; border-radius: 8px; background: #403E3C; color: #FFFEFD; font-family: var(--font-sans); font-size: 16px; font-weight: 500; cursor: pointer; transition: background 160ms var(--ease-out), transform 120ms var(--ease-out); }
.u-submit:hover { background: #3A3735; }
.u-submit:active { background: #322F2E; transform: scale(0.99); }
.u-submit:disabled { cursor: progress; }

/* the prototype's CTA mount: a 54px box around the 46px button */
.cta-mount { height: 54px; }

/* state variants (hover / active / focus) */
.st1:hover { background: #EFECE9 !important;box-shadow: inset 0 0 0 1px #464646 !important; }
.st1:active { transform: scale(0.94) !important; }
.st2:hover { color: #403E3C !important;text-decoration-thickness: 2px !important; }

/* section heading in caps, like the mobile layout */
#form-title { text-transform: uppercase; letter-spacing: -0.01em !important; }

/* hero: the CTA mount is 54px around a 46px button, so lift the note 4px to share the button's centre line */
#hero-cta > span { margin-top: -8px; }

/* phones: the form column (fields, verification, button) is a fixed 300px, centred in the card */
@media (max-width: 480px) {
  #lead-form { max-width: 300px; margin-left: auto; margin-right: auto; }
}

/* the two audience tabs form one joined strip: the active tab keeps both top corners rounded,
   the inactive one only rounds its outer corner so the pair has no notch between them */
#tab-brand:not(.is-active) { border-radius: 6px 0 0 0; }
#tab-creator:not(.is-active) { border-radius: 0 6px 0 0; }
.aud-tab.is-active { border-radius: 6px 6px 0 0; }