/* ===========================================================================
   Type system. Every typographic value on the site comes from here: the two
   stylesheets and every component read these tokens and never restate a
   family, a size, a tracking or a line height of their own.

   --font-display is the one swap point for the licensed face: drop
   "Tiempos Headline Regular" in front of Newsreader and nothing else changes.
   =========================================================================== */

:root {
  --font-display: "Newsreader", "Instrument Serif", "Source Serif 4", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-ui: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  /* Headlines: weight 400 always. The weight comes from the size and the
     negative tracking, which grows with the size. Mobile lands the H1 near
     40px and the H2 near 32px at the same ratios. */
  --fs-h1: clamp(40px, 5.4vw, 72px);
  --lh-h1: 1;
  --ls-h1: -.02em;

  --fs-h2: clamp(32px, 4.2vw, 56px);
  --lh-h2: 1.2;
  --ls-h2: -.02em;

  --fs-h3: clamp(28px, 3vw, 40px);
  --lh-h3: 1.2;
  --ls-h3: -.02em;

  --fs-serif-sub: clamp(24px, 2.5vw, 32px);
  --lh-serif-sub: 1.2;
  --ls-serif-sub: normal;

  /* Body and UI, Inter. */
  --fs-hero-sub: 16px;
  --lh-hero-sub: 1.4;

  --fs-lead: 18px;
  --fw-lead: 600;
  --ls-lead: -.02em;
  --lh-lead: 1.5;

  --fs-ui: 15px;
  --ls-ui: -.02em;
  --lh-ui: 1.2;

  --fs-name: 14px;
  --fw-name: 500;
  --fs-role: 14px;
  --fw-role: 400;
  --lh-meta: 1.2;

  /* Uppercase micro type, Geist Mono. */
  --fs-eyebrow: 14px;
  --fw-eyebrow: 500;
  --ls-eyebrow: .04em;

  --fs-microlabel: 11px;
  --fw-microlabel: 600;
  --ls-microlabel: normal;

  /* Actions, Geist. */
  --fs-button: 16px;
  --fw-button: 500;
  --ls-button: -.02em;
  --lh-button: 1;

  color: #171615;
  background: #fff;
  font-family: var(--font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; }

/* The hero is a page, not a backdrop: navigation, a centred headline, its line
   of copy, and the film below in a frame of its own. Nothing is cropped and the
   section ends before the fold, so the next one is already showing. */
.hero {
  position: relative;
  padding: calc(84px + clamp(46px, 6vw, 78px)) 24px clamp(34px, 4vw, 56px);
  background: #fff;
  text-align: center;
}

.hero-copy {
  width: min(880px, 100%);
  margin: 0 auto;
}

.hero-frame {
  position: relative;
  width: min(1180px, 100%);
  margin: clamp(34px, 4.5vw, 58px) auto 0;
  aspect-ratio: 2940 / 1320;
  border: 1px solid rgba(20, 17, 16, .1);
  border-radius: 22px;
  background: #171411;
  box-shadow: 0 40px 90px -46px rgba(60, 28, 16, .5), 0 2px 10px rgba(60, 28, 16, .05);
  overflow: hidden;
}

.hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.site-header {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 38px;
  right: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.95);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.04em;
  text-decoration: none;
}

.brand-mark {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e7685b 48%, #f4c064 49%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}

.navigation {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  backdrop-filter: blur(0px);
  transition: padding .28s ease, gap .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}

.navigation a {
  color: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: -.035em;
  text-decoration: none;
  white-space: nowrap;
  opacity: .9;
  transition: opacity .2s ease, color .2s ease;
}

.navigation .demo-link { font-family: var(--font-body); font-weight: 500; }

.navigation a:not(.demo-link) { position: relative; }
.navigation a:not(.demo-link)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  border-radius: 999px;
  background: #f0a368;
  box-shadow: 0 0 10px rgba(240, 163, 104, .5);
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity .2s ease, transform .2s ease;
}
.navigation a:not(.demo-link):hover,
.navigation a:not(.demo-link):focus-visible { color: #f6c08d; }
.navigation a:not(.demo-link):hover::after,
.navigation a:not(.demo-link):focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}
.navigation:hover,
.navigation:focus-within {
  gap: 20px;
  padding: 8px 9px 8px 17px;
  border-color: rgba(255,255,255,.28);
  background: rgba(17, 14, 11, .48);
  box-shadow: 0 10px 32px rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
}

.navigation:hover a,
.navigation:focus-within a { opacity: 1; }
.navigation .demo-link {
  padding: 10px 15px;
  border-radius: 999px;
  color: #1c1713;
  background: #f6eee3;
}

.hero-lede {
  max-width: 62ch;
  margin: 20px auto 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: rgba(20, 17, 16, .66);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 30px;
  text-shadow: none;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.hero-btn--primary {
  /* The gradient of the original site: Ember into deep Ember, white type. */
  color: #fff;
  background: linear-gradient(95deg, #BE3F22, #96301A);
  box-shadow: 0 12px 30px -12px rgba(190, 63, 34, .75);
}

.hero-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(190, 63, 34, .82); }

.hero-btn--ghost {
  color: #fffaf3;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px);
}

.hero-btn--ghost:hover { background: rgba(255, 255, 255, .15); }

.hero-eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 250, 243, .74);
}

h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -.055em; }
h1 { font-size: clamp(46px, 4.8vw, 76px); line-height: .92; }
h1 em { color: #BE3F22; font-style: italic; font-weight: 600; }

.how-it-works {
  position: relative;
  background: #fff;
  color: #201c19;
}

.how-it-works__stage {
  position: relative;
  padding: 92px max(38px, 7vw) 120px;
}

.section-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.how-it-works h2 {
  position: relative;
  z-index: 1;
  color: #201c19;
  font-size: clamp(42px, 4.2vw, 64px);
  font-weight: 600;
  line-height: .93;
  text-align: center;
}

.how-it-works h2 em { color: #BE3F22; font-style: italic; }

.steps-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1020px;
  margin: 54px auto 0;
}

.step-card {
  min-height: 402px;
  padding: 20px;
  border: 1px solid #ece7e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 38px -24px rgba(25, 20, 32, .22);
}

.step-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #211d1a;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.step-number {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #ebe6e0;
  border-radius: 5px;
  color: #857d76;
  font-family: var(--font-mono);
  font-size: 9px;
}

.step-number.active { border-color: #ebe6e0; background: #fff; color: #857d76; }
.step-card > p { min-height: 51px; margin: 15px 0 12px; color: #615a54; font-size: 12px; line-height: 1.45; }
.card-divider { height: 1px; margin: 0 -19px 16px; background: #f0ece7; }
.card-label { display: block; margin-bottom: 10px; color: #8c837b; font-family: var(--font-mono); font-size: 9px; letter-spacing: .03em; text-transform: uppercase; }

.platform-stack { display: grid; gap: 8px; }
.platform-item { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid #e9e4df; border-radius: 7px; color: #38312d; font-size: 11px; }
.platform-item b { width: 11px; color: #6e4f91; font-size: 11px; text-align: center; }
.platform-item.shopify b { color: #67a744; }
.platform-item i { margin-left: auto; color: #a09790; font-family: var(--font-mono); font-size: 7px; font-style: normal; text-transform: uppercase; }

.connect-card { display: flex; flex-direction: column; text-align: center; }
.connect-intro { margin: 7px 0 22px; }
.connect-card h3 { justify-content: center; font-size: 14px; }
.connect-card .connect-intro p { min-height: 0; margin: 12px auto 0; color: #615a54; font-size: 12px; line-height: 1.45; }
.connect-card .card-label { margin-bottom: 11px; text-align: left; }
.connect-card .platform-item { min-height: 38px; padding: 7px 9px; text-align: left; }
.platform-logo { display: inline-grid; width: 20px; height: 20px; place-items: center; flex: 0 0 20px; }
.platform-logo img { display: block; width: 18px; height: 18px; object-fit: contain; }
.woo-logo { width: 28px; flex-basis: 28px; border-radius: 7px; background: #96588a; }
.woo-logo img { width: 24px; height: 15px; filter: brightness(0) invert(1); }
.adobe-logo { border-radius: 3px; background: #ed2224; }
.adobe-logo img { width: 15px; height: 15px; filter: brightness(0) invert(1); }
.other-platform { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: auto; padding-top: 16px; color: #786f67; font-family: var(--font-mono); font-size: 9px; }
.other-platform span { display: grid; width: 17px; height: 17px; place-items: center; border: 1px dashed #bbb2aa; border-radius: 50%; color: #8a8078; font-size: 13px; }

.knowledge-list { margin: 0; }
.knowledge-list div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1ede9; font-size: 10px; }
.knowledge-list dt { color: #46403a; }
.knowledge-list dd { margin: 0; color: #888078; text-align: right; }
.memory-chip { display: inline-block; margin-top: 14px; padding: 6px 8px; border-radius: 999px; background: #f4e8e0; color: #875b4c; font-family: var(--font-mono); font-size: 8px; }

.product-card { display: flex; flex-direction: column; text-align: center; }
.product-intro { margin: 7px 0 22px; }
.product-card h3 { justify-content: center; font-size: 14px; }
.product-card .product-intro p { min-height: 0; margin: 12px auto 0; color: #615a54; font-size: 12px; line-height: 1.45; }
.product-card .card-label { margin-bottom: 11px; text-align: left; }
.product-card .knowledge-list { text-align: left; }
.product-card .memory-chip { align-self: center; margin-top: auto; }

.go-live-card { display: flex; flex-direction: column; }
.channel-intro { margin: 7px 0 22px; text-align: center; }
.go-live-card h3 { justify-content: center; font-size: 14px; }
.go-live-card .channel-intro p { min-height: 0; margin: 12px auto 0; color: #615a54; font-size: 12px; line-height: 1.45; }
.go-live-card .mini-message { font-size: 9px; }
.go-live-card button { align-self: flex-end; float: none; font-size: 9px; }

.channel-list { display: flex; flex-wrap: wrap; gap: 7px; }
.channel-list span { padding: 6px 7px; border: 1px solid #eee9e4; border-radius: 6px; color: #4d4641; font-size: 8px; }
.mini-message { margin-top: 13px; padding: 9px; border-radius: 7px; background: #faf8f6; color: #6c625b; font-size: 8px; line-height: 1.4; }
.mini-message b { color: #342e2a; font-size: 9px; }
.step-card button { float: right; margin-top: 10px; padding: 7px 9px; border: 0; border-radius: 7px; background: #171311; color: #fff; font-family: var(--font-body); font-size: 8px; }

.continuation.muted { min-height: 20svh; padding: 0; }

@media (max-width: 680px) {
  .site-header { top: 18px; left: 18px; right: 18px; }

  /* The section links do not fit beside the wordmark on a phone, so the header
     keeps the brand and the one action that matters. */
  .navigation { position: static; transform: none; gap: 0; }
  .navigation a:not(.demo-link) { display: none; }
  .navigation .demo-link { padding: 9px 15px; font-size: 14px; }
  .navigation:hover, .navigation:focus-within { gap: 0; padding: 0; border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; }

  .hero-lede { max-width: none; font-size: 16.5px; }
  .hero-actions { justify-content: flex-start; width: 100%; }
  .hero-btn { flex: 1 1 100%; }
  .how-it-works { min-height: auto; }
  .how-it-works__stage { position: relative; min-height: auto; padding: 70px 22px 82px; }
  .steps-grid { grid-template-columns: 1fr; margin-top: 42px; }
  .step-card { min-height: auto; }
}

.demo-dialog { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; }
.demo-dialog__backdrop { position: absolute; inset: 0; background: rgba(24, 19, 17, .35); backdrop-filter: blur(8px); }
.demo-dialog__panel { position: relative; width: min(600px, 100%); padding: 48px 52px; border: 1px solid rgba(255,255,255,.42); border-radius: 22px; background: #fffaf5; box-shadow: 0 30px 90px rgba(20, 14, 11, .3); animation: demo-dialog-in .42s cubic-bezier(.16,.9,.22,1) both; text-align: center; }
.demo-dialog__kicker { margin: 0 0 16px; color: #BE3F22; font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: var(--fw-microlabel); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.demo-dialog__panel h2 { color: #211b18; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.demo-dialog__form { margin-top: 32px; text-align: left; }
.demo-dialog__form label { display: block; margin-bottom: 9px; color: rgba(20,17,16,.5); font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: var(--fw-microlabel); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.demo-dialog__form div { display: flex; gap: 10px; }
.demo-dialog__form input { min-width: 0; flex: 1; height: 52px; padding: 0 18px; border: 1px solid #ded5cc; border-radius: 12px; outline-color: #e7784b; color: #211b18; font: var(--fs-ui)/var(--lh-ui) var(--font-body); }
.demo-dialog__note { margin: 0; text-align: left; font: var(--fs-role)/1.55 var(--font-body); color: rgba(20,17,16,.58); text-align: left; }
.demo-dialog__note:not(:empty) { margin-top: 16px; }
.demo-dialog__note[data-state="ok"] { color: #2f7a55; }
.demo-dialog__note[data-state="error"] { color: #BE3F22; }
.demo-dialog__form[hidden] { display: none; }
.demo-dialog__form button { height: 52px; padding: 0 26px; border: 0; border-radius: 12px; background: #211b18; color: #fffaf5; font: var(--fw-button) var(--fs-ui)/var(--lh-button) var(--font-ui); cursor: pointer; }
@keyframes demo-dialog-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 680px) { .demo-dialog__panel { padding: 32px 22px; } }

.demo-dialog[hidden] { display: none !important; }
.demo-dialog__close { position: absolute; top: 14px; right: 14px; display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #766d66; font: 24px/1 var(--font-ui); cursor: pointer; }
.demo-dialog__close:hover { background: #f1eae3; color: #211b18; }


.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}



/* ---- The guided assistant ------------------------------------------------
   Bottom right, opposite the demo invitation. The panel is a normal element,
   not a dialog: the page stays usable behind it.
--------------------------------------------------------------------------- */

.ai-launch {
  position: fixed;
  z-index: 11;
  right: 26px;
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border: 1px solid rgba(190, 63, 34, .2);
  border-radius: 999px;
  background: rgba(255, 253, 250, .96);
  box-shadow: 0 14px 34px -12px rgba(90, 38, 22, .38);
  backdrop-filter: blur(16px);
  color: #141110;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: var(--ls-ui);
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,.72,.25,1), box-shadow .3s ease, opacity .25s ease;
}
.ai-launch:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -14px rgba(90, 38, 22, .46); }
.ai-launch__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,17,16,.07); }
.ai-launch__icon img { width: 20px; height: 20px; display: block; }
.ai-launch[data-open="true"] { opacity: 0; pointer-events: none; transform: translateY(8px) scale(.96); }
.ai-launch[hidden] { display: none !important; }

.ai-panel {
  position: fixed;
  z-index: 12;
  right: 26px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  width: min(392px, calc(100vw - 36px));
  height: min(560px, calc(100vh - 52px));
  border: 1px solid rgba(20, 17, 16, .1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 34px 80px -32px rgba(60, 28, 16, .5), 0 2px 10px rgba(60, 28, 16, .06);
  overflow: hidden;
  animation: ai-in .42s cubic-bezier(.22,.72,.25,1) both;
}
.ai-panel[hidden] { display: none !important; }
@keyframes ai-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.ai-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 14px 16px 18px;
  border-bottom: 1px solid rgba(20, 17, 16, .08);
}
.ai-head__mark { width: 30px; height: 30px; flex-shrink: 0; }
.ai-head div { flex: 1; min-width: 0; }
.ai-head b { display: block; font-family: var(--font-body); font-size: var(--fs-name); font-weight: 600; color: #141110; }
.ai-head small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 12.5px; color: rgba(20,17,16,.55); }
.ai-head__restart,
.ai-head__close {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: rgba(20,17,16,.45);
  font: 16px/1 var(--font-ui);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.ai-head__restart:hover,
.ai-head__close:hover { background: rgba(190,63,34,.08); color: #BE3F22; }

.ai-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  scroll-behavior: smooth;
}
.ai-msg {
  max-width: 84%;
  margin: 0;
  padding: 11px 14px;
  border-radius: 15px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  animation: ai-msg-in .34s cubic-bezier(.22,.72,.25,1) both;
}
.ai-msg--bot { align-self: flex-start; background: #f6f2ee; color: #201b18; border-bottom-left-radius: 6px; }
.ai-msg--me { align-self: flex-end; background: #141110; color: #fffaf3; border-bottom-right-radius: 6px; }
.ai-msg a { color: #BE3F22; }
@keyframes ai-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ai-typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 13px 14px; border-radius: 15px; background: #f6f2ee; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(20,17,16,.32); animation: ai-dot 1.1s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .16s; }
.ai-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes ai-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ai-suggest { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; padding: 0 18px 12px; }
.ai-suggest button {
  padding: 8px 13px;
  border: 1px solid rgba(20, 17, 16, .13);
  border-radius: 999px;
  background: #fff;
  color: #201b18;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--ls-ui);
  cursor: pointer;
  animation: ai-msg-in .3s cubic-bezier(.22,.72,.25,1) both;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.ai-suggest button:hover { border-color: rgba(190,63,34,.42); color: #BE3F22; transform: translateY(-1px); }

.ai-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(20, 17, 16, .08); }
.ai-form input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  border: 1px solid rgba(20, 17, 16, .12);
  border-radius: 999px;
  outline-color: #BE3F22;
  font-family: var(--font-body);
  font-size: 14px;
  color: #201b18;
}
.ai-form button {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 0; border-radius: 50%;
  background: linear-gradient(95deg, #BE3F22, #96301A);
  color: #fff;
  font: 16px/1 var(--font-ui);
  cursor: pointer;
  transition: transform .2s ease;
}
.ai-form button:hover { transform: translateY(-1px); }

.ai-foot {
  margin: 0;
  padding: 0 14px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(20,17,16,.34);
}

@media (max-width: 680px) {
  .ai-launch { right: 18px; bottom: 18px; }
  .ai-launch__label { display: none; }
  .ai-launch { padding: 10px; }
  .ai-panel { right: 12px; left: 12px; bottom: 12px; width: auto; height: min(70vh, 520px); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-panel, .ai-msg, .ai-suggest button { animation: none; }
  .ai-typing i { animation: none; }
}

/* ---- Legal pages --------------------------------------------------------- */

.legal {
  width: min(720px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 10vw, 120px);
  color: #201b18;
}
.legal-back {
  display: inline-block;
  margin-bottom: 38px;
  color: #BE3F22;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: var(--fw-name);
  letter-spacing: var(--ls-ui);
  text-decoration: none;
}
.legal-back:hover { text-decoration: underline; }
.legal-kicker {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(20, 17, 16, .5);
}
.legal h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
.legal-updated {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-role);
  color: rgba(20, 17, 16, .5);
}
.legal h2 {
  margin: 46px 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.legal p, .legal li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(20, 17, 16, .74);
}
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: #BE3F22; }

/* The one line that tells a visitor what happens to their address. */
.demo-dialog__consent,
.close-consent {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  /* 4.7:1 on the panel, so the smallest type on the site still clears AA. */
  color: rgba(20, 17, 16, .68);
}
.demo-dialog__consent { text-align: left; }
.close-consent { text-align: center; }
.demo-dialog__consent a,
.close-consent a { color: #a63619; }

/* On a phone a 2.23:1 film inside the column is 167px tall, which is no hero at
   all. The vertical cut of the film has arrived, so the frame matches it: 9:16,
   filled edge to edge, nothing cropped away. */
@media (max-width: 760px) {
  .hero { padding-top: calc(72px + 34px); }
  .hero-frame { aspect-ratio: 9 / 16; border-radius: 18px; }
  .hero-frame .hero-film { object-position: center; }
}