/* Task 409 - business.aiscaleengine.com landing page.
   One theme: a deep green hero field, paper below it. Palette, faces and direction are
   pinned by the spec. Radius carries hierarchy instead of being one global value:
   phone bodies 34px, screens 26px, cards and inputs 12px, buttons 8px. */

/* --- faces ---------------------------------------------------------------
   Both woff2 come from task 379 (SIL OFL 1.1), latin subset, same origin, preloaded.
   379's Playfair fallback is metric matched to Georgia at 99.6%, measured there on real
   advance widths, so it is reused. Its DM Sans fallback was built on a face the tests
   refuse, and no replacement size-adjust is invented here: an unmeasured number would be
   invented data. DM Sans falls back to system-ui unadjusted. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.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: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/rP2Hp2ywxg089UriCZOIHQ.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: 'Playfair Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 99.6%;
  font-display: swap;
}

:root {
  --green: #0F3D2E;
  --green-light: #15513D;
  --paper: #F5F2EA;
  --ink: #14130F;
  --leaf: #1F6B4F;
  --mint: #8FD6A8;
  --amber: #C8842B;
  --hairline: rgba(20, 19, 15, 0.12);
  --paper-dim: rgba(245, 242, 234, 0.74);
  --paper-line: rgba(245, 242, 234, 0.22);
  --ink-dim: rgba(20, 19, 15, 0.66);
  --phone-body: #0B0B0A;
  --phone-shadow: 0 34px 64px -22px rgba(0, 0, 0, 0.58);

  --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-text: 'DM Sans', system-ui, sans-serif;

  --measure: 62ch;
  --page: 1120px;
  --gutter: clamp(20px, 4vw, 40px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible, .price-own :focus-visible { outline-color: var(--mint); }

/* --- header --------------------------------------------------------------- */
.site-head {
  background: var(--green);
  padding: 20px var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  text-decoration: none;
}
.mark { width: 34px; height: 34px; flex: none; color: currentColor; }
.wordmark {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
}

/* --- hero ----------------------------------------------------------------- */
.hero {
  /* --hero-photo stays unset in this task: the flat field is the design. A photograph
     can be dropped in later through that one property, under the green duotone. */
  background-color: var(--green);
  background-image:
    radial-gradient(74% 62% at 28% 18%, rgba(143, 214, 168, 0.17), rgba(15, 61, 46, 0) 68%),
    linear-gradient(180deg, rgba(21, 81, 61, 0.92), rgba(15, 61, 46, 0.97)),
    var(--hero-photo, none);
  background-size: auto, auto, cover;
  background-position: center;
  color: var(--paper);
  padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(56px, 8vw, 104px);
}
.hero-inner {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  gap: clamp(40px, 6vw, 64px);
}
@media (min-width: 920px) {
  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 56px;
  }
}
.eyebrow {
  color: var(--mint);
  font-size: 0.9375rem;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 15ch;
}
.lede {
  margin-top: 22px;
  max-width: var(--measure);
  color: var(--paper-dim);
}
.hero-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  padding: 13px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), background-color 140ms, border-color 140ms;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--mint); color: var(--ink); }
.btn-primary:hover { background: #A2E0B7; }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--paper-line); }
.btn-ghost:hover { border-color: var(--paper-dim); }

/* --- the demo ------------------------------------------------------------- */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 244px) minmax(0, 168px);
  justify-content: start;
  align-items: end;
  gap: clamp(14px, 2.4vw, 26px);
  position: relative;
}
@media (min-width: 920px) { .demo { justify-content: end; } }
/* Below the two column hero both phones would flex to the same width and the customer
   phone, the one that is actually used, would lose the lead. Measured at 375: 160px each
   before this rule, 190px and 133px after it. */
@media (max-width: 919px) {
  .demo { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .screen { padding: 15px 12px; }
  .platform { padding: 8px 9px; gap: 8px; }
  .choice { padding: 11px 12px; gap: 10px; }
  .choice .face { width: 30px; height: 30px; }
}

.phone {
  background: var(--phone-body);
  border-radius: 34px;
  padding: 9px;
  box-shadow: var(--phone-shadow);
}
.phone-owner { align-self: end; }
.screen {
  background: var(--paper);
  border-radius: 26px;
  color: var(--ink);
  padding: 18px 16px;
  min-height: 352px;
  display: flex;
  flex-direction: column;
}
.phone-owner .screen { min-height: 244px; }

/* the screen is a flex column, so screen 1 has to be one too, otherwise the choice row's
   margin-top: auto has nothing to push against and the buttons sit mid screen */
.screen-1 { display: flex; flex-direction: column; flex: 1; }
.shop { font-size: 0.8125rem; color: var(--ink-dim); }
.ask {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  margin-top: 6px;
}
.choices { margin-top: auto; display: grid; gap: 10px; }
.choice {
  font: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 140ms, background-color 140ms;
}
.choice:hover { background: rgba(20, 19, 15, 0.04); }
.choice .face { width: 34px; height: 34px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.choice .face .eye { fill: currentColor; stroke: none; }
.choice-happy { color: var(--leaf); }
.choice-unhappy { color: var(--amber); }
.choice span { color: var(--ink); font-size: 0.9375rem; white-space: nowrap; }

.screen-2 { display: flex; flex-direction: column; gap: 14px; }
/* a display rule outranks the hidden attribute, so say it again */
.screen-1[hidden], .screen-2[hidden] { display: none; }
.reply-head { font-size: 1.1875rem; line-height: 1.2; }
.reply-head:focus { outline: none; }
.reply-line { font-size: 0.875rem; color: var(--ink-dim); margin-top: -8px; }
.block-title {
  font-size: 0.75rem;
  color: var(--ink-dim);
  margin-bottom: 7px;
}
.platform {
  font: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-size: 0.875rem;
  margin-bottom: 7px;
  cursor: default;
}
.platform svg { width: 17px; height: 17px; flex: none; }
.note-box {
  height: 54px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: rgba(20, 19, 15, 0.03);
}

.lock {
  justify-content: flex-start;
  /* the owner phone is asleep, but it must not read as one solid black brick against the
     phone body it sits in, so the screen carries its own faint green light */
  background: linear-gradient(170deg, #1A231E 0%, #11150F 62%);
  color: var(--paper);
}
.clock {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  text-align: center;
  margin: 14px 0 18px;
  color: var(--paper);
}
.alert-slot { margin-top: auto; }
.alert {
  border-radius: 12px;
  background: rgba(245, 242, 234, 0.1);
  border: 1px solid rgba(245, 242, 234, 0.16);
  padding: 10px 12px;
}
.alert-title { font-size: 0.8125rem; font-weight: 600; }
.alert-line { font-size: 0.75rem; color: var(--paper-dim); }

.reset {
  position: absolute;
  bottom: -34px;
  left: 0;
  font: inherit;
  font-size: 0.875rem;
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--paper-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.reset:hover { color: var(--paper); }
@media (min-width: 920px) { .reset { left: auto; right: 0; } }

/* --- sections on paper ---------------------------------------------------- */
.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter);
}
.section-head {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

/* How it works: a sequence, so it is numbered. One hairline rail runs the length of the
   three steps and fills as the section passes the viewport. */
.steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0 0 0 clamp(44px, 6vw, 64px);
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  left: clamp(15px, 2vw, 22px);
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--hairline);
}
.steps::after {
  content: "";
  position: absolute;
  left: clamp(15px, 2vw, 22px);
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--leaf);
  transform-origin: top;
}
.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 26px 0;
  position: relative;
}
.step + .step { border-top: 1px solid var(--hairline); }
@media (min-width: 760px) {
  .step { grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 32px; }
}
.num {
  position: absolute;
  left: calc(clamp(44px, 6vw, 64px) * -1);
  top: 26px;
  width: clamp(30px, 4vw, 44px);
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.3;
  background: var(--paper);
  color: var(--leaf);
  padding: 2px 0;
}
.step h3 { font-size: 1.25rem; line-height: 1.25; }
.step p { margin-top: 8px; color: var(--ink-dim); max-width: 54ch; }

/* each step brings in its own interface fragment, a beat after its words */
.fragment { justify-self: start; }
.step .fragment.reveal { transition-delay: 150ms; }
@media (min-width: 760px) { .fragment { justify-self: end; } }
.fragment svg { width: 116px; height: 116px; display: block; }
.fragment .card { fill: #fff; stroke: var(--hairline); stroke-width: 1.5; }
.fragment .stand { fill: none; stroke: var(--ink-dim); stroke-width: 1.5; stroke-linejoin: round; }
.fragment .code rect { fill: var(--ink); }
.fragment .code .hole { fill: #fff; }
.fragment .pill { fill: #fff; stroke: var(--hairline); stroke-width: 1.5; }
.fragment .bar { fill: rgba(20, 19, 15, 0.16); }
.fragment .row { fill: rgba(20, 19, 15, 0.07); }
.fragment .box { fill: none; stroke: var(--hairline); stroke-width: 1.5; }
.mini-face { fill: none; stroke-width: 1.4; }
.mini-face .eye { fill: currentColor; stroke: none; }
.mini-happy { color: var(--leaf); stroke: var(--leaf); }
.mini-unhappy { color: var(--amber); stroke: var(--amber); }

.safe-section { padding-top: 0; }
.safe-copy {
  margin-top: 20px;
  max-width: var(--measure);
  border-left: 2px solid var(--leaf);
  padding-left: clamp(18px, 3vw, 28px);
}

.get-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  max-width: 72ch;
}
.get-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.125rem;
}
.get-list li:first-child { border-top: 1px solid var(--hairline); }

/* Two offers, not two members of a set, so the cards are deliberately unlike. */
.price-cards {
  margin-top: 32px;
  display: grid;
  gap: 20px;
}
@media (min-width: 820px) { .price-cards { grid-template-columns: 1fr 1fr; align-items: start; } }
.price-card { border-radius: 12px; padding: clamp(24px, 3.4vw, 34px); }
.price-card h3 { font-size: 1.25rem; }
.price-line {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.3;
  margin-top: 12px;
}
.price-note { margin-top: 12px; }
.price-sub { border: 1px solid var(--hairline); background: #FBF9F4; }
.price-sub .price-note { color: var(--ink-dim); }
.price-own { background: var(--green); color: var(--paper); }
.price-own .price-note { color: var(--paper-dim); }

.founding-section { padding-top: 0; }
.founding {
  max-width: var(--measure);
  background: rgba(31, 107, 79, 0.07);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 28px);
}

.qa { margin: 28px 0 0; max-width: 72ch; }
.qa dt {
  font-weight: 600;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.qa dd { margin: 6px 0 20px; color: var(--ink-dim); }

.intake { margin-top: 28px; max-width: 460px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.875rem; color: var(--ink-dim); }
.field input {
  font: inherit;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
}
.field input:focus-visible { border-color: var(--leaf); }
.btn-submit { background: var(--green); color: var(--paper); margin-top: 4px; }
.btn-submit:hover { background: var(--green-light); }
.form-note { margin-top: 12px; font-size: 0.875rem; color: var(--ink-dim); }
.form-done {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(31, 107, 79, 0.09);
  font-size: 0.9375rem;
}

.site-foot {
  border-top: 1px solid var(--hairline);
  padding: 28px var(--gutter);
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.site-foot .mark { width: 26px; height: 26px; color: var(--leaf); }
.site-foot .wordmark { font-size: 0.9375rem; }

/* --- motion ---------------------------------------------------------------
   Three moments only: one orchestrated hero load that ends on the demo inviting a tap,
   the demo answering every tap, and one reveal per step or block below the fold. */
@media (prefers-reduced-motion: no-preference) {
  .anim {
    opacity: 0;
    transform: translateY(10px);
    animation: rise 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--step) * 90ms);
  }
  .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 460ms cubic-bezier(0.16, 1, 0.3, 1), transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.in { opacity: 1; transform: none; }
  /* The last beat of the load sequence: the choice row asks to be tapped, once. */
  .demo[data-state="idle"] .choices.invite { animation: invite 1400ms cubic-bezier(0.16, 1, 0.3, 1) 1; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes invite {
  0% { transform: none; }
  30% { transform: translateY(-4px); }
  60% { transform: none; }
}

/* The rail fills with the scroll. Where view() timelines are unsupported the rule never
   applies and the rail is simply drawn full. */
.steps::after { transform: scaleY(1); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps::after {
      animation: rail linear both;
      animation-timeline: view();
      animation-range: entry 34% cover 62%;
      animation-duration: auto;
    }
  }
}
@keyframes rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim, .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .steps::after { transform: scaleY(1); animation: none; }
  .btn { transition: none; }
}