/* Core Motion — the marketing page.
 *
 * Hand-written, no framework and no runtime. It replaced a Framer export whose
 * 973 KB of React/motion bundles hydrated the page, which meant nothing here
 * could be edited without re-exporting the whole site from Framer.
 *
 * Two rules carry the layout, both taken from the competitor's page on the
 * curator's instruction (2026-08-26):
 *
 *   1. Every section is a FULL-BLEED band. Only the content inside is held to a
 *      max width. The old page put whole sections in an inset column, which is
 *      what made it read as a stack of cards rather than a page.
 *   2. Bands meet on a BROKEN edge, not a straight one — a shallow four-vertex
 *      polygon. It is drawn on a ::before wedge rather than by clipping the band
 *      itself, because a clip-path clips CHILDREN too and the phone mockups are
 *      meant to cross the boundary.
 *
 * The palette stays ours (the app's dark + copper, CLAUDE.md §5) — the structure
 * is borrowed, the colours are not. A visitor taps the button and lands in a
 * dark copper app; a light turquoise landing would be a different product.
 */

/* ── Font ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  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;
}

/* Polish diacritics, for when the page is translated. unicode-range means an
 * English page never downloads it. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
  /* The three band tones are deliberately further apart than the app's, because
   * here they have to make a BOUNDARY visible. At #111/#1a1a1a/#222 the broken
   * edge between two neighbouring bands was almost invisible, which is the whole
   * effect being borrowed. */
  --deep: #0d0d0d;
  --base: #1a1a1a;
  --raised: #262626;
  --card: #2f2f2f;
  --nav: #141414;

  --copper: #c87941;
  --copper-light: #d99257;
  --copper-dark: #a25f2e;

  --ink: #ffffff;
  --ink-2: #a0a0a0;
  --ink-3: #666666;

  --r-card: 16px;
  --r-btn: 8px;

  --wrap: 1180px;
  --gutter: 24px;
  /* Amplitude of the broken edge. Larger than the competitor's because their
   * bands are light against dark and ours are dark against dark — the same
   * silhouette has to work with a fraction of the contrast to carry it. */
  --notch: 58px;
  --band-y: 112px;    /* vertical breathing room inside a band */
  /* The hero and the pricing screen are held to one height (owner 2026-08-26). */
  --screen: 828px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* the mockups deliberately overhang their band */
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.022em; font-weight: 700; }
p { margin: 0; }

/* ── Bands ─────────────────────────────────────────────────────────────── */

.band {
  position: relative;
  padding: var(--band-y) 0;
  background: var(--base);
}

.band--deep   { background: var(--deep); }
.band--base   { background: var(--base); }
.band--raised { background: var(--raised); }
.band--copper {
  background: linear-gradient(135deg, var(--copper) 0%, var(--copper-dark) 100%);
  color: #1a1a1a;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.center { text-align: center; }

/* The broken edge. A wedge in the band's own colour, sitting ABOVE the band and
 * clipped to a shallow mountain silhouette, so it eats into the band before it.
 * Drawn on a pseudo-element on purpose: clipping the band itself would also clip
 * the mockups that hang over the boundary.
 *
 * Vertex x is a percentage (so the shape spans any width) and y is in px (so the
 * amplitude does not grow with the height of a tall section). */
.notch::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--notch));
  height: var(--notch);
  background: inherit;
  pointer-events: none;
}

.notch--a::before { clip-path: polygon(0 62%, 28% 0, 71% 78%, 100% 22%, 100% 100%, 0 100%); }
.notch--b::before { clip-path: polygon(0 26%, 34% 84%, 76% 6%, 100% 58%, 100% 100%, 0 100%); }
.notch--c::before { clip-path: polygon(0 80%, 22% 14%, 63% 66%, 100% 4%, 100% 100%, 0 100%); }

/* ── Type ──────────────────────────────────────────────────────────────── */

h1 { font-size: clamp(34px, 3.9vw, 54px); }
h2 { font-size: clamp(30px, 3.9vw, 46px); }
h3 { font-size: 21px; letter-spacing: -0.015em; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 18px;
}

.lead {
  color: var(--ink-2);
  font-size: 17px;
  max-width: 46ch;
  margin-top: 22px;
}

.sub { color: var(--ink-2); margin-top: 12px; }

.section-title { max-width: 18ch; margin-inline: auto; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  background: var(--copper);
  color: #14100c;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.005em;
  padding: 13px 26px;
  border-radius: var(--r-btn);
  transition: background 140ms ease, transform 140ms ease;
}
.btn:hover { background: var(--copper-light); }
.btn:active { transform: translateY(1px); }

.btn--lg { font-size: 17px; padding: 16px 34px; }
/* Wider than its text needs — the hero and the closing call are the two places
 * the button is the point of the screen rather than one control among several. */
.btn--wide {
  padding-inline: 64px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.btn__arrow { width: 19px; height: 19px; flex: none; }
.btn--sm { font-size: 13.5px; padding: 9px 18px; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.07); }

.btn--dark { background: #1a1a1a; color: #fff; }
.btn--dark:hover { background: #000; }

/* ── Header ────────────────────────────────────────────────────────────── */

.nav {
  background: var(--nav);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav__name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.nav__tag { color: var(--ink-2); font-size: 13px; white-space: nowrap; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero { padding-top: 84px; padding-bottom: 68px; min-height: var(--screen); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.32fr 0.68fr;
  gap: 28px;
  align-items: center;
}

.hero__copy .btn { margin-top: 32px; }

.hero__visual {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-right: calc(16px + min(0px, (var(--wrap) - 100vw) / 8));
}

/* The shot is cropped just below the Steps / Balance row, as on the original
 * page. A fixed aspect-ratio box does it predictably; a negative margin tuned
 * against the next band's BROKEN edge would cut at a different height at every
 * x. The small overhang that is left still carries the shot into that edge. */
.hero__crop {
  width: 486px;
  max-width: none;
  aspect-ratio: 680 / 896;   /* 896 / 1318 = the top 68% of the shot */
  overflow: hidden;
}
.hero__crop .phone--hero { width: 100%; }

.phone {
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.55));
}

/* ── Feature rows ──────────────────────────────────────────────────────── */

/* A floor, so a section with two lines of copy is not visibly shorter than one
 * with four — the phones are what the reader is comparing down the page. */
.feature {
  min-height: 760px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.feature--media-left .feature__copy { order: 2; }
.feature--media-left .feature__media { order: 1; }

.feature__copy h2 + p { margin-top: 18px; color: var(--ink-2); font-size: 17px; max-width: 42ch; }

.note {
  margin-top: 22px;
  font-size: 14px;
  border-radius: var(--r-card);
  padding: 14px 16px;
  max-width: 44ch;
}
.note--plain { background: rgba(255, 255, 255, 0.05); color: var(--ink-2); }

/* Copper + a sparkle means AI, and only AI (CLAUDE.md §5). */
.note--ai {
  border: 1px solid rgba(200, 121, 65, 0.4);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.note__icon { width: 18px; height: 18px; flex: none; fill: var(--copper); }

/* Two phones, offset, the front one overlapping — the competitor's arrangement. */
.stack { position: relative; display: flex; justify-content: center; }
/* flex: none, or the declared width is only a REQUEST. Two phones at 62% each
 * come to 124% of the row, so flex shrank them back to 50% apiece — which is why
 * the one section asking for 68% rendered SMALLER than its neighbours asking for
 * 60%. The overlap is made by the transforms below, never by shrinking. */
.stack > * { flex: none; }
.stack--1 { padding-bottom: 12px; }
/* One section asked for more than the rest — the swap list is the densest shot
 * on the page and the smallest type in it. */
.stack--1 .phone { width: 72%; }
.stack--2 { padding-bottom: 34px; }
/* A pair spans 2 x --w x (1 - --t) of the row: each phone is --w wide and they
 * are pulled --t toward each other. Keep that product at ~100% — bigger phones
 * are paid for with more overlap, not by letting the pair run off the screen.
 * (Before flex:none the browser paid for it by shrinking them, silently.) */
.stack { --w: 58%; --t: 14%; }
.stack--lg { --w: 64%; --t: 22%; }

.stack__back  { width: var(--w); transform: translate(var(--t), -28px); }
.stack__front { width: var(--w); transform: translate(calc(-1 * var(--t)), 32px); position: relative; z-index: 2; }

/* The mid-page CTA shares the band above it, so it needs no top padding of its
 * own — it is the tail of that section, not a section in its own right. */
.band--cta-mid { padding: 0 0 calc(var(--band-y) * 0.75); }

/* ── Testimonials ──────────────────────────────────────────────────────── */

/* A scrolling strip, like the original page's carousel — ten quotes are more
 * than a screen holds, and a static grid of ten leaves an orphan on the last row.
 *
 * It runs edge to edge, wider than .wrap, because a carousel that stops at the
 * text column reads as a boxed widget; running off both edges is what says
 * "there is more of this".
 */
.ticker {
  margin-top: 52px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* escape the .wrap padding without escaping the page */
  margin-inline: calc(-1 * var(--gutter));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker::-webkit-scrollbar { display: none; }
.ticker__track { display: flex; gap: 18px; width: max-content; padding-inline: var(--gutter); }

/* Dragging, not hovering. The strip used to be a CSS marquee that paused on
 * hover, so the only thing a mouse could do to it was stop it. It is a scroll
 * container now and the drift is applied to scrollLeft, so wheel, drag and
 * touch all work and none of them is fought by the animation. */
.ticker.is-draggable { cursor: grab; }
.ticker.is-dragging { cursor: grabbing; user-select: none; }
.ticker.is-dragging img { pointer-events: none; }

.quote {
  margin: 0;
  flex: none;
  width: 340px;
  background: var(--card);
  border-radius: var(--r-card);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote blockquote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  flex: 1;
}
.quote blockquote::before { content: "“"; }
.quote blockquote::after  { content: "”"; }

.who { display: flex; align-items: center; gap: 12px; }
.who__face {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.who span { display: flex; flex-direction: column; min-width: 0; }
.who b { font-size: 14.5px; font-weight: 700; }
.who i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }

/* ── Pricing ───────────────────────────────────────────────────────────── */

#pricing {
  min-height: var(--screen);
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.plans {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.plan {
  background: var(--card);
  border-radius: var(--r-card);
  min-height: 310px;
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.plan--best {
  border: 1px solid rgba(200, 121, 65, 0.55);
  background: linear-gradient(180deg, rgba(200, 121, 65, 0.10), rgba(200, 121, 65, 0) 55%), var(--card);
}
.plan__flag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-height: 16px;
}
.plan__flag--save { color: var(--copper); }
.plan__flag--best { color: var(--copper); }
.plan__term {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.plan__price { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.plan__price b { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.plan__price s { font-size: 22px; color: var(--ink-3); }
.plan__per { font-size: 13px; color: var(--ink-2); }

.plans__note {
  margin-top: 26px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Closing ───────────────────────────────────────────────────────────── */

/* One line, at any width: the vw term shrinks it on a phone and the min keeps
 * it readable, so it never wraps to a lonely "plan." */
.closing {
  max-width: none;
  margin: 0 auto 34px;
  white-space: nowrap;
  font-size: clamp(26px, 5vw, 62px);
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.foot { background: var(--nav); padding: 26px 0; }
.foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-3);
  font-size: 13px;
}
.foot__links { display: flex; gap: 20px; }
.foot__links a { color: var(--ink-2); }
.foot__links a:hover { color: var(--ink); }

/* ── Legal documents ───────────────────────────────────────────────────── */
/* privacy.html and terms.html, generated by build_legal.mjs. They are the
 * landing's own pages, in the landing's language and width, because sending a
 * reader from here into the app meant a 372 KB boot and then the PWA's mobile
 * screen in whatever locale THEY had chosen. */

.doc { padding-top: 44px; }
.doc__inner { max-width: 760px; }

.doc__back {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 14px;
  font-weight: 600;
  color: var(--copper);
}
.doc__back:hover { color: var(--copper-light); }

.doc h1 { font-size: clamp(30px, 4vw, 44px); }
.doc__meta {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.doc__intro {
  margin-top: 22px;
  font-size: 17px;
  color: var(--ink-2);
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.doc__section { margin-top: 38px; }
.doc__section h2 {
  font-size: 21px;
  letter-spacing: -0.015em;
}
.doc__section p,
.doc__section li {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
}
.doc__section ul { margin: 0; padding-left: 20px; }
.doc__section li { padding-left: 4px; }
.doc__section li::marker { color: var(--ink-3); }

.doc a { color: var(--copper); text-decoration: underline; }
.doc a:hover { color: var(--copper-light); }

.doc__contact {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 15px;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .doc { padding-top: 30px; }
  .doc__intro { font-size: 16px; }
}

/* ── Tablet ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --band-y: 84px; --notch: 30px; }

  .plans { grid-template-columns: 1fr; }
  .stack--1 .phone { width: 54%; }
  .nav__tag { display: none; }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  :root { --gutter: 20px; --band-y: 68px; --notch: 22px; }

  .hero { padding-top: 52px; }
  .hero__grid, .feature { grid-template-columns: 1fr; gap: 30px; }
  .hero__visual { justify-content: center; margin-right: 0; }
  /* The matched height is a DESKTOP composition. On one column the two screens
   * are 939px and 1321px tall naturally, and holding them equal would mean
   * padding the hero with 382px of nothing. */
  .hero, #pricing, .feature { min-height: 0; }

  /* On one column the copy must always come first — a row that reads
   * media-then-copy on desktop still reads copy-then-media here. */
  .feature--media-left .feature__copy,
  .feature--media-left .feature__media { order: initial; }

  .lead { font-size: 16px; }
  .hero__copy .btn { margin-top: 26px; }
  .hero__crop { width: min(340px, 90%); max-width: 100%; }
  .hero__break { display: none; }

  .stack--1 .phone { width: 66%; }
  .stack { --w: 58%; --t: 14%; }
  .stack--lg { --w: 64%; --t: 22%; }
  .stack__back  { transform: translate(var(--t), -16px); }
  .stack__front { transform: translate(calc(-1 * var(--t)), 20px); }

  .quote { width: 290px; padding: 20px 18px; gap: 16px; }

  .plan__price b { font-size: 44px; }

  .foot__inner { flex-direction: column; gap: 12px; text-align: center; }
}

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