/* OrderSay marketing site. Split-stage grammar (docs/site/BRIEF.md).
   The engine (scrollcraft.css/js) is untouched; this file themes its tokens and styles our markup.
   One live variable drives the layout: --split, the divider position in vw (0-50), written by site.js.
   Only transform, opacity and clip-path change while scrolling. */

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

/* ---------------------------------------------------------------- tokens -- */
:root {
  --ink: #0F2A44;          /* brand navy: the "today" ground and all text on paper */
  --paper: #F6F3EC;        /* the "with OrderSay" ground and text on navy */
  --tape: #F28C28;         /* the one accent; never body text on paper */
  --tape-text: #A4500B;    /* the accent when it has to be read on paper (5.09:1) */
  --white: #FFFFFF;
  --split: 50;             /* overwritten every frame by site.js */

  --sc-canvas: var(--paper);  --sc-surface: var(--white);
  --sc-ink: var(--ink);       --sc-ink-soft: #4A5A6B;
  --sc-accent: var(--tape);   --sc-accent-ink: var(--ink);
  --sc-font-display: "Poppins", system-ui, sans-serif;
  --sc-font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sc-shadow-color: 210 64% 12%;

  --t-hero: clamp(1.9rem, 0.6rem + 2.5vw, 3rem);
  --t-big: clamp(2rem, 1rem + 2.6vw, 3.2rem);
  --t-title: clamp(1.45rem, 1rem + 1.2vw, 2.1rem);
  --gut: clamp(1.25rem, 4vw, 4rem);
  --radius: 14px;
  color-scheme: light;
}

body { background: var(--paper); color: var(--ink); }
:focus-visible { outline-color: currentColor; }
::selection { background: var(--tape); color: var(--ink); }

/* The two grounds. Every place that redefines the soft and accent tones restates color too. */
.side--before { background: var(--ink); color: var(--paper); --soft: #B9C3CE; --accent-text: var(--tape); }
.side--after  { background: var(--paper); color: var(--ink); --soft: #4A5A6B; --accent-text: var(--tape-text); }

/* ------------------------------------------------------------ typography -- */
.title {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--t-title); line-height: 1.12; letter-spacing: -0.02em;
  text-wrap: balance; margin: 0;
}
.title--hero { font-size: var(--t-hero); line-height: 1.06; letter-spacing: -0.03em; max-width: 22ch; }
.title--big { font-size: var(--t-big); line-height: 1.06; letter-spacing: -0.03em; max-width: 16ch; }
.title--quiet { color: var(--soft); }
.lede { font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.45; max-width: 42ch; margin: 0; text-wrap: pretty; }
.body { color: var(--soft); max-width: 40ch; margin: 0; text-wrap: pretty; }

.cta {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.4rem;
  background: var(--tape); color: var(--ink); border-radius: 12px;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.02rem; text-decoration: none;
  box-shadow: var(--sc-e1);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) { .cta:hover { box-shadow: var(--sc-e2); } }
.cta:active { transform: scale(0.98); }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ------------------------------------------------------------ the divider -- */
.divider {
  position: fixed; top: 0; left: 0; z-index: var(--sc-z-chrome);
  width: 0; height: 100vh; height: 100svh;
  transform: translate3d(calc(var(--split) * 1vw), 0, 0);
  font-family: var(--sc-font-display); font-weight: 500; font-size: 0.8rem; line-height: 1;
}
.divider__ground { display: none; }
.divider__line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #7C8B9B; overflow: hidden; }
.divider__fill { position: absolute; inset: 0; background: var(--tape); transform-origin: 50% 0; transform: scaleY(0); }
.divider__labels { margin: 0; }
.divider__label {
  position: absolute; top: 18px; padding: 0.5rem 0.7rem; border-radius: 999px; white-space: nowrap;
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.divider__label--before { right: 14px; background: var(--ink); color: var(--paper); }
.divider__label--after { left: 14px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(15 42 68 / 0.14); }

.divider__mark { position: absolute; left: 0; top: 50%; width: 0; height: 0; }
.divider__chip {
  position: absolute; left: 0; top: 0; width: 120px; height: 120px;
  background: var(--paper); border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgb(15 42 68 / 0.12), var(--sc-e2);
  transform: translate3d(-50%, -50%, 0) scale(0); opacity: 0;
  will-change: transform, opacity;
}
.mark__ink, .mark__full { position: absolute; left: 18px; top: 18px; width: 84px; height: 84px; }
.mark__full { opacity: 0; }
.mark__band {
  position: absolute; background: var(--tape);
  left: calc(18px + 84px * 0.43); top: calc(18px + 84px * 0.14);
  width: calc(84px * 0.14); height: calc(84px * 0.64);
  clip-path: inset(0 0 100% 0);
}

.divider__langs {
  position: absolute; top: 18px; left: 0; display: flex; gap: 2px; margin: 0; padding: 3px; list-style: none;
  background: var(--paper); border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(15 42 68 / 0.14);
  /* pinned to the right edge of the viewport whatever the divider does */
  transform: translate3d(calc((100 - var(--split)) * 1vw - 100% - 20px), 0, 0);
}
.divider__langs a, .foot__langs a {
  display: inline-grid; place-items: center; min-width: 34px; min-height: 28px; padding: 0 0.4rem;
  border-radius: 999px; color: var(--ink); text-decoration: none; letter-spacing: 0.04em;
}
.divider__langs a[aria-current], .foot__langs a[aria-current] { background: var(--ink); color: var(--paper); }
.divider__langs { align-items: center; font-family: var(--sc-font-display); font-weight: 500; font-size: 0.8rem; }
.divider__langlist { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.divider__langs .divider__more { padding: 0 0.75rem; letter-spacing: 0; box-shadow: 1px 0 0 rgb(15 42 68 / 0.14); border-radius: 999px 0 0 999px; margin-right: 2px; }
.divider__langs .divider__more:hover { background: rgb(15 42 68 / 0.06); }
html.is-closing .divider__chip { opacity: 0 !important; }

/* ----------------------------------------------------------------- shared -- */
.fill { width: 100%; height: 100%; object-fit: cover; }
.figure { margin: 0; }
.figure img { width: 100%; height: auto; border-radius: var(--radius); }
.act { position: relative; }
/* Act heights are vh multiples, so a boundary can land on half a device pixel and let the paper
   ground show through as a hairline between two ink sides. Overlap by one pixel: every seam joins
   identical layouts (the split only moves inside pinned acts), so the overlap itself never shows. */
.act + .act { margin-top: -1px; }

/* --------------------------------------------------------------- 1 · hero -- */
.hero .stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.hero .side { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; min-width: 0; }
.hero__media { position: relative; overflow: hidden; min-height: 0; }
.hero__photo, .plane--plate, .plane--subject { position: absolute; inset: -40px 0; }
.hero__photo img { object-position: 50% 34%; }
.plane__in { position: absolute; inset: 0; }
.plane__in img { object-position: 50% 42%; }
/* Shared contact anchor: plate and subject move together; the subject grows around the point
   where her hands meet the parcel, so the hands never slide off it. */
.plane--subject .plane__in { transform-origin: 40% 61%; transform: scale(calc(1 + var(--sc-p, 0) * 0.03)); }
.plane--fg { position: absolute; right: 2%; bottom: -16%; width: clamp(110px, 11vw, 200px); }
.plane--fg img { width: 100%; height: auto; filter: blur(3px); }
.hero__copy {
  padding: clamp(1.5rem, 3.2vh, 2.5rem) var(--gut) clamp(4.5rem, 9vh, 6rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
}
.hero .side--before .hero__copy { align-items: flex-end; text-align: right; }
.hero .side--before .title--hero { color: var(--paper); }

/* -------------------------------------------------------- flow sections -- */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.tipped { grid-template-columns: 2fr 3fr; }
.col { min-width: 0; }
.col__in { max-width: 36rem; padding: var(--sc-section) var(--gut); display: flex; flex-direction: column; gap: 1.6rem; }
.side--before .col__in { margin-left: auto; }
.side--after .col__in { margin-right: auto; }
.steps { margin: 0; padding-left: 1.4em; display: grid; gap: 0.7rem; }
.steps li { padding-left: 0.3em; }
.steps li::marker { color: var(--accent-text); font-family: var(--sc-font-display); font-weight: 600; }
.side--before .steps li { color: var(--paper); }
.hunt__figure { margin-top: 0.6rem; }
.cases, .promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.cases li, .promises li { position: relative; padding-left: 1.3rem; }
.promises li { font-size: 1.08rem; }
.cases li::before, .promises li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 6px; height: 0.95em;
  background: var(--tape); border-radius: 1px;
}
.promise__figure img { aspect-ratio: 3 / 2; object-fit: cover; }

/* --------------------------------------------------------------- 3 · peak -- */
.peak .side { position: absolute; inset: 0; }
.peak__side--before { clip-path: inset(0 calc(100% - var(--split) * 1%) 0 0); z-index: 2; }
.peak__side--after { clip-path: inset(0 0 0 calc(var(--split) * 1%)); z-index: 1; }
.peak__caption {
  position: absolute; left: var(--gut); top: 22vh; margin: 0; max-width: min(24ch, 38vw);
  font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem);
  line-height: 1.3; color: var(--paper);
}
.peak__after {
  position: absolute; top: 50%; left: calc(50vw + max(var(--gut), 6rem));
  /* The right half minus the offset and one gutter, so the block never reaches the edge at S = 50. */
  width: min(34rem, calc(50vw - max(var(--gut), 6rem) - var(--gut)));
  transform: translate3d(calc((var(--split) - 50) * 1vw), -50%, 0);
  display: flex; flex-direction: column; gap: 1.2rem;
}
.demo { display: flex; flex-direction: column; gap: 0.7rem; }
.demo__sample { margin: 0; font-size: 0.8rem; color: var(--soft); }
.demo__chat, .demo__order, .demo__draft {
  margin: 0; background: var(--white); border-radius: var(--radius); padding: 0.9rem 1rem;
  box-shadow: inset 0 0 0 1px rgb(15 42 68 / 0.08), var(--sc-e1);
}
.demo__who { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.7rem; line-height: 1.25; }
.demo__who strong { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: 0.95rem; }
.demo__avatar {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-family: var(--sc-font-display); font-weight: 600; font-size: 0.8rem;
}
.demo__match { display: block; font-size: 0.8rem; color: var(--soft); }
.demo__msg {
  margin: 0; padding: 0.6rem 0.8rem; background: #E9EEF3; border-radius: 4px 12px 12px 12px;
  font-size: 0.95rem; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.2rem 0.8rem;
}
.demo__time { margin-left: auto; font-size: 0.72rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.demo__order { display: grid; gap: 0.45rem; }
.demo__order div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.6rem; font-size: 0.9rem; }
.demo__order dt { color: var(--soft); }
.demo__order dd { margin: 0; font-variant-numeric: tabular-nums; }
.demo__draft { display: grid; gap: 0.5rem; box-shadow: inset 0 0 0 1.5px var(--tape), var(--sc-e1); }
.demo__draft-label { margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--tape-text); }
.demo__draft-text { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.demo__actions { margin: 0; display: flex; justify-content: flex-end; gap: 0.5rem; }
.demo__btn {
  display: inline-grid; place-items: center; min-height: 32px; padding: 0 0.9rem; border-radius: 8px;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 0.82rem;
  box-shadow: inset 0 0 0 1px rgb(15 42 68 / 0.25);
}
.demo__btn--send { background: var(--tape); color: var(--ink); box-shadow: none; }
.demo__note { margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--soft); max-width: 44ch; }

/* The travelling message. Its tail sits lower left, like the mark's. */
.pack { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pack__bubble {
  --ink-a: 0;
  position: absolute; left: calc(25vw - 160px); top: calc(50% - 50px); width: 320px;
  padding: 1rem 1.15rem 0.85rem; background: var(--white); color: var(--ink); border-radius: 20px;
  box-shadow: var(--sc-e3); transform-origin: 50% 50%; will-change: transform, opacity;
}
.pack__bubble::before {
  content: ""; position: absolute; left: 22px; bottom: -14px; width: 26px; height: 18px;
  background: var(--white); clip-path: polygon(0 100%, 30% 0, 100% 0); opacity: calc(1 - var(--ink-a));
}
.pack__bubble::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: var(--ink-a);
}
.pack__text { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.pack__time { display: block; margin-top: 0.3rem; text-align: right; font-size: 0.75rem; color: #4A5A6B; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- 6 · close -- */
.close .side { position: absolute; inset: 0; }
.close__before { clip-path: inset(0 calc(100% - var(--split) * 1%) 0 0); z-index: 2; display: flex; align-items: center; }
.close__line { margin: 0 0 0 var(--gut); max-width: min(14ch, 32vw); color: var(--paper); }
/* The plain wall is the left ~36% of the photograph: pin it left and keep the copy column inside it. */
.close__photo { position: absolute; inset: 0; object-position: 0% 50%; }
.close__col {
  position: absolute; left: 4vw; top: 0; bottom: 0; width: min(28rem, 32vw);
  display: flex; flex-direction: column; gap: 2rem;
  padding-block: 5rem 1.5rem;
  transform: translate3d(calc(var(--split) * 1vw), 0, 0);
}
/* Needed while the copy sits over the shelves; gone once it reaches the plain wall at the left. */
.veil--close {
  position: absolute; inset: 3.5rem -2rem 0; background: rgb(246 243 236 / 0.93); border-radius: 22px 22px 0 0;
  opacity: calc(clamp(0, var(--split) / 8, 1) * var(--veil-in, 1));
}
.close__copy, .foot { position: relative; }
.close__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; margin-top: auto; }
.foot {
  display: grid; gap: 0.55rem; font-size: 0.85rem; color: var(--soft); margin-top: auto;
  margin-inline: -1.1rem; padding: 1rem 1.1rem; background: var(--paper); border-radius: var(--radius);
}
.foot__lockup { width: 128px; height: auto; margin-bottom: 0.3rem; }
.foot__line { margin: 0; max-width: 52ch; }
.foot__line a { color: var(--ink); }
.foot__langs { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; gap: 4px; font-family: var(--sc-font-display); font-weight: 500; font-size: 0.8rem; }

/* ------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .divider {
    width: 100%; height: 44px; transform: none;
    background: var(--paper); box-shadow: 0 1px 0 rgb(15 42 68 / 0.12);
  }
  .divider__ground {
    display: block; position: absolute; inset: 0; background: var(--ink);
    transform-origin: 0 50%; transform: scaleX(calc(var(--split) / 100));
  }
  .divider__line { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; background: transparent; }
  .divider__fill { transform-origin: 0 50%; transform: scaleX(0); }
  .divider__label { top: 7px; padding: 0.5rem 0.2rem; background: none; box-shadow: none; font-size: 0.78rem; }
  /* --mark-gap (site.js) opens the labels around the mark as it grows on the strip. */
  .divider__label--before { left: 0; right: auto; transform: translate3d(calc(var(--split) * 1vw - 100% - var(--mark-gap, 12px)), 0, 0); }
  .divider__label--after { left: 0; transform: translate3d(calc(var(--split) * 1vw + var(--mark-gap, 12px)), 0, 0); }
  .divider__mark { left: 0; top: 22px; transform: translate3d(calc(var(--split) * 1vw), 0, 0); }
  .divider__langs {
    top: 52px; left: auto; right: 10px; transform: none;
    transition: opacity var(--sc-d-base) var(--sc-ease-out), visibility 0s linear var(--sc-d-base);
  }
  html:not(.at-top) .divider__langs { opacity: 0; visibility: hidden; }
  html.at-top .divider__langs { transition-delay: 0s; }

  .hero .stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 36fr) minmax(0, 64fr); padding-top: 44px; }
  .hero .side { grid-row: auto; display: flex; flex-direction: column; }
  .hero__media { flex: 1; }
  .hero__copy { padding: 0.9rem var(--gut) 1.2rem; gap: 0.8rem; }
  .hero .side--before .hero__copy { align-items: flex-start; text-align: left; padding-bottom: 0.9rem; }
  .plane--fg { width: 28vw; }

  .split, .tipped { grid-template-columns: 1fr; }
  .col__in { max-width: 40rem; margin: 0 !important; padding-block: clamp(3.5rem, 12vw, 5rem); }

  /* Vertical split: "today" is the band under the strip, a quarter of the screen at rest. */
  .peak__side--before { clip-path: inset(0 0 calc(100% - var(--split) * 0.5%) 0); }
  .peak__side--after { clip-path: inset(calc(var(--split) * 0.5%) 0 0 0); }
  .peak__caption { top: 52px; max-width: none; right: var(--gut); font-size: 0.9rem; }
  .peak__after {
    /* Rides up with the band's lower edge as the split tips from 50 to 40. */
    top: calc(25% + 12px); left: var(--gut); right: var(--gut); width: auto;
    transform: translate3d(0, calc((var(--split) - 50) * 0.5vh), 0); gap: 0.7rem;
  }
  .peak__title { font-size: 1.3rem; }
  .demo { gap: 0.5rem; }
  .demo__chat, .demo__order, .demo__draft { padding: 0.65rem 0.8rem; }
  .demo__who { margin-bottom: 0.45rem; }
  .demo__order div { grid-template-columns: 5.2rem 1fr; font-size: 0.84rem; }
  .demo__msg, .demo__draft-text { font-size: 0.88rem; }
  .demo__note { font-size: 0.8rem; }
  /* Under the caption and wholly inside the band, tail included, so it never reaches the headline. */
  .pack__bubble {
    left: calc(50vw - 125px); top: max(96px, calc(25% - 108px)); width: 250px;
    padding: 0.7rem 0.85rem 0.6rem; box-shadow: 0 8px 20px rgb(0 0 0 / 0.28);
  }
  .pack__text { font-size: 0.9rem; }

  .close__before { clip-path: inset(0 0 calc(100% - var(--split) * 0.8%) 0); align-items: flex-start; padding-top: 72px; }
  .close__line { max-width: 18ch; }
  .close__photo { height: 46%; object-position: 50% 60%; }
  .close__after { background: var(--paper); }
  .close__col { left: 0; right: 0; width: auto; top: auto; transform: none; padding: 1.6rem var(--gut) 1.2rem; gap: 1.4rem; justify-content: flex-end; }
  .veil--close { inset: 0; border-radius: 22px 22px 0 0; background: var(--paper); opacity: 1; }
  .close__copy { margin-top: 0; gap: 0.9rem; }
  .foot { margin: 0; padding: 0; background: none; }
}
/* Short phones: the quarter-screen band holds the bubble or the caption, not both. The strip
   already says "today"; the bubble stays. */
@media (max-width: 860px) and (max-height: 740px) {
  .peak__caption { display: none; }
  /* Floor: still clear of the top strip on a phone held sideways. */
  .pack__bubble { top: max(52px, calc(25% - 100px)); }
  .peak__after { gap: 0.45rem; }
  .peak__title { font-size: 1.15rem; }
  .demo { gap: 0.4rem; }
  .demo__chat, .demo__order, .demo__draft { padding: 0.55rem 0.75rem; }
  .demo__msg, .demo__draft-text { font-size: 0.84rem; }
}
@media (max-width: 700px) {
  :root { --t-hero: clamp(1.45rem, 0.9rem + 2.6vw, 1.9rem); --t-big: clamp(1.7rem, 1rem + 3vw, 2.2rem); }
  .lede { font-size: 1rem; }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .plane--subject .plane__in { transform: none; }
  .close__before { display: none; }
  .close__col { transform: none; }
  .cta { transition: none; }
}