/* ================================================================
   Yesable landing page — optomize.io/yesable
   Loaded AFTER css/style.css, which supplies the nav, footer and the
   Optomize tokens. Everything here is namespaced y- so it cannot
   reach into the rest of the site.

   WHY THIS WAS REBUILT, 27 October. G: "it looks super-AI made."
   He is right, and the design skill names the exact cluster the first
   version sat in: near-black with one accent pop, Inter as the safe
   face, everything centred, rounded cards everywhere, an accent rail
   on a rounded card. Four of five.

   The palette and the typeface are NOT the problem and are not
   changed: they are the Optomize brand, measured from the octopus
   artwork, and the brand outranks a style note. What changed is the
   STRUCTURE, which is where the sameness actually lived.

   THE DEVICE IS A LEDGER, taken from what the product does rather
   than from a layout library. An assessment sets a claim against its
   evidence, so the page sets a label against its content down a
   single hairline rule, left column narrow and fixed, right column
   doing the work. Every section is the same ledger, so the rhythm
   comes from the content changing rather than from a new card shape
   each time. Cards appear twice, where something really is a discrete
   object: the price, and the funder report.
   ================================================================ */

:root {
  /* The site's own --text-muted is #706C95 and measures 3.98:1 on this
     ground, which fails AA at the sizes it carries. Measured 19 October;
     fixing it site-wide is G's call and has not been made, so this page
     defines its own rather than shipping a known failure on a new surface. */
  --y-muted: #8985A7;
  --y-grad: linear-gradient(135deg, #00A6DA, #3A3D98);
  --y-rule: #211E3B;
  /* A neutral biased toward the brand indigo rather than a flat grey. */
  --y-ground: #0A0818;
}

/* ── the ledger ───────────────────────────────────────────────────
   One grid, used by every section. 1fr of label, then the content.
   The hairline between them is the page's only repeated ornament. */
.y-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.y-row {
  display: grid; grid-template-columns: 210px 1fr; gap: 0 56px;
  border-top: 1px solid var(--y-rule); padding: 74px 0;
}
.y-row > .y-label { padding-top: 4px; }
.y-label {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--y-muted);
}
.y-label b { display: block; color: var(--accent); font-weight: 600; }

/* Type scale. Four sizes, and nothing between them. */
.y-h2 {
  font-size: clamp(27px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.028em;
  line-height: 1.16; color: var(--white); text-wrap: balance; max-width: 20ch;
}
.y-body { font-size: 17.5px; line-height: 1.62; color: var(--text-soft); max-width: 62ch;
  margin-top: 18px; }
.y-small { font-size: 14px; line-height: 1.6; color: var(--y-muted); }

/* ── hero ─────────────────────────────────────────────────────────
   Left-aligned on the same grid as everything else, so the page does
   not open with one composition and continue with another. */
.y-hero { padding: 76px 0 8px; }
.y-hero-in { display: grid; grid-template-columns: 210px 1fr; gap: 0 56px; }
.y-lockup { height: 40px; width: auto; display: block; }
.y-hero h1 {
  font-size: clamp(40px, 6.6vw, 68px); font-weight: 800; letter-spacing: -.038em;
  line-height: 1.02; color: var(--white); max-width: 15ch; text-wrap: balance;
}
.y-hero h1 em {
  font-style: normal;
  background: var(--y-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.y-hero .y-body { font-size: 19px; max-width: 46ch; }
.y-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; align-items: center; }
.y-btn {
  display: inline-block; background: var(--accent); color: #04121A;
  font-weight: 700; font-size: 15.5px; padding: 13px 24px; border-radius: 4px;
  text-decoration: none;
}
.y-btn:hover { background: var(--accent-hover); }
.y-btn:focus-visible, .y-btn-ghost:focus-visible, .y-mail:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.y-btn-ghost {
  display: inline-block; color: var(--white); font-weight: 600; font-size: 15.5px;
  padding: 13px 20px; border: 1px solid var(--y-rule); border-radius: 4px;
  text-decoration: none;
}
.y-btn-ghost:hover { border-color: var(--accent); }

/* ── the film ─────────────────────────────────────────────────────
   NO AUTOPLAY. A browser only autoplays muted, so an autoplaying embed
   throws away the music the film was scored with. */
.y-film { border: 1px solid var(--y-rule); border-radius: 4px; overflow: hidden;
  background: #000; margin-top: 26px; }
.y-film video { display: block; width: 100%; height: auto; }

/* ── the two things we check. A list, not two cards. ─────────────── */
.y-pair { margin-top: 30px; display: flex; flex-direction: column; gap: 0; }
.y-pair > div { display: grid; grid-template-columns: 34px 1fr; gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--y-rule); }
.y-pair > div:first-child { border-top: 0; padding-top: 6px; }
.y-glyph { width: 32px; height: 32px; color: var(--accent); margin-top: 2px; }
.y-pair h3 { font-size: 19.5px; font-weight: 700; letter-spacing: -.016em;
  color: var(--white); margin-bottom: 7px; }
.y-pair p { font-size: 16.5px; line-height: 1.6; color: var(--text-soft); max-width: 58ch; }
.y-out { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--y-rule);
  font-size: 17px; line-height: 1.6; color: var(--text-soft); max-width: 62ch; }
.y-out strong { color: var(--white); font-weight: 650; }

/* ── the collateral. REAL SURFACES AND A REAL ROOM, nothing stock.
      Everything here is from the ASC programme and redacted at source.
      The session screenshots were NOT used: they are a named-participant
      grid, and eleven identifiable people cannot go on a public page
      without their consent. ─────────────────────────────────────────── */
.y-shot { display: block; width: 100%; height: auto; margin-top: 18px;
  border: 1px solid var(--y-rule); border-radius: 4px; }
.y-shot-wide { margin-top: 26px; }
.y-cap { font-size: 13.5px; line-height: 1.55; color: var(--y-muted); margin-top: 10px; }
.y-funders { display: block; height: 52px; width: auto; margin-top: 24px;
  background: #FFFFFF; border-radius: 4px; padding: 8px 14px; }

/* ── the timeline. A real line, because the content really is a
      sequence. The skill's rule: numbering has to encode something
      true, and Start / Midway / End / After is a typed order. ────── */
.y-track { margin-top: 34px; position: relative; }
.y-track::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, #00A6DA, #3A3D98);
}
.y-stop { display: grid; grid-template-columns: 16px 150px 1fr; gap: 0 26px;
  align-items: baseline; padding: 17px 0; }
.y-stop i {
  width: 16px; height: 16px; border-radius: 50%; background: var(--y-ground);
  border: 2px solid var(--accent); display: block; position: relative; top: 5px;
}
.y-when { font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--y-muted); }
.y-what { font-size: 18.5px; line-height: 1.45; color: var(--white); font-weight: 600;
  letter-spacing: -.014em; }

/* ── price. TWO PATHS, and the licence is the one most of these buyers
      should be on, so it is not the quieter of the two. The lead panel
      gets the lighter ground and the button; the per-startup column is
      the honest alternative beside it rather than the headline that
      makes a programme manager multiply and flinch. ────────────────── */
.y-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px;
  align-items: start; }
.y-path { padding-top: 22px; border-top: 2px solid var(--y-rule); }
.y-path-lead { border-top-color: var(--accent); }
.y-path-kind { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--y-muted); margin-bottom: 16px; }
.y-path-lead .y-path-kind { color: var(--accent); }
.y-path-cta { margin-top: 22px; }
.y-amount-word { font-size: 44px; letter-spacing: -.03em; }
.y-pricing { display: grid; grid-template-columns: 300px 1fr; gap: 44px; margin-top: 26px;
  align-items: start; }
.y-amount { font-size: 64px; font-weight: 800; letter-spacing: -.04em; color: var(--white);
  line-height: .95; font-variant-numeric: tabular-nums; }
.y-amount span { display: block; font-size: 16px; font-weight: 600; color: var(--y-muted);
  letter-spacing: 0; margin-top: 10px; }
.y-inc { list-style: none; }
.y-inc li { font-size: 16.5px; color: var(--text-soft); padding: 11px 0;
  border-top: 1px solid var(--y-rule); }
/* The first row KEEPS its rule inside a path column, because it now follows the
   amount's sub-label rather than starting the block, and without a separator the
   label and the first item read as one run-on sentence. */
.y-pricing .y-inc li:first-child { border-top: 0; padding-top: 0; }
.y-paths .y-inc { margin-top: 18px; }
.y-licence { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--y-rule);
  font-size: 16.5px; line-height: 1.6; color: var(--text-soft); max-width: 58ch; }
.y-mail { color: var(--accent); text-decoration: none; }
.y-mail:hover { text-decoration: underline; }

/* ── funders. The one place the page raises its voice, because the
      brief asks for a block that speaks one level up. It is a panel
      on a lighter ground rather than a rail on a rounded card, which
      is the pattern the skill names. ────────────────────────────── */
/* ONE COLUMN BY DEFAULT, TWO WHEN THERE IS SOMETHING TO PUT BESIDE IT. The sample
   cohort report was removed for the public page and the panel kept a 300px column
   reserved for it, so the text sat in two thirds of a box for no reason. This
   restores itself the moment the image is put back, which is end of week. */
.y-funder { background: #12102A; border: 1px solid var(--y-rule); border-radius: 4px;
  padding: 40px; margin-top: 26px; display: grid; grid-template-columns: 1fr;
  gap: 40px; align-items: center; }
.y-funder:has(> * + *) { grid-template-columns: 1fr 300px; }
.y-funder h3 { font-size: 23px; font-weight: 700; letter-spacing: -.022em; color: var(--white);
  margin-bottom: 12px; }
.y-funder p { font-size: 16.5px; line-height: 1.62; color: var(--text-soft); }
.y-funder ul { list-style: none; margin-top: 18px; }
.y-funder li { font-size: 16px; color: var(--text-soft); padding: 6px 0 6px 20px;
  position: relative; }
.y-funder li::before { content: ""; position: absolute; left: 0; top: 14px; width: 9px;
  height: 1px; background: var(--accent); }

/* ── placeholders. Quiet enough to live on a page a lead may see,
      loud enough that nobody mistakes one for finished work. ─────── */
.y-ph { border: 1px dashed #4A4170; border-radius: 4px; background: rgba(255,153,32,.04);
  padding: 24px 22px; }
.y-ph .tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--warm); margin-bottom: 9px; }
.y-ph p { font-size: 14.5px; line-height: 1.5; color: var(--y-muted); }
.y-ph strong { color: #D8D4EC; font-weight: 650; display: block; margin-bottom: 3px; }

/* ── proof ────────────────────────────────────────────────────────── */
.y-ran { display: flex; align-items: center; gap: 20px; margin-top: 26px; flex-wrap: wrap; }
.y-ran img { height: 40px; width: auto; }
.y-phs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }

/* ── closing. Left, on the grid, like everything else. ───────────── */
.y-close { border-top: 1px solid var(--y-rule); padding: 86px 0 94px; }
.y-close h2 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -.036em;
  color: var(--white); line-height: 1.04; max-width: 17ch; text-wrap: balance; }
.y-close h2 em { font-style: normal; background: var(--y-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.y-close p { margin-top: 16px; font-size: 17.5px; color: var(--text-soft); }

/* ── narrow ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .y-row, .y-hero-in { grid-template-columns: 1fr; gap: 0; }
  .y-row { padding: 46px 0; }
  .y-row > .y-label { margin-bottom: 16px; }
  .y-lockup { margin-bottom: 26px; }
  .y-pricing, .y-funder, .y-phs, .y-paths { grid-template-columns: 1fr; gap: 26px; }
  .y-funder { padding: 28px 24px; }
  .y-stop { grid-template-columns: 16px 1fr; gap: 0 20px; }
  .y-when { grid-column: 2; margin-bottom: 4px; }
  .y-what { grid-column: 2; }
  .y-close { padding: 56px 0 64px; }
}
@media (max-width: 520px) {
  .y-cta-row .y-btn, .y-cta-row .y-btn-ghost { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}