/* Ronan Search — one stylesheet, whole site.
   Direction: "The Disappearance" (see DESIGN.md).
   Extends the dashboard's Apple-dark language, darkened for this surface.

   The color story carries the argument: --link is the blue of a search result
   and it dies on screen; --accent-hi / --answer is the answer, and it survives. */

:root {
  /* ground */
  --void: #08090C;          /* deepest ground, used sparingly */
  --bg: #0F1116;
  --surface: #171A21;
  --surface-top: #1F232B;
  --surface-2: #282D36;
  --surface-3: #333944;

  --hair: rgba(255, 255, 255, .08);
  --hair-top: rgba(255, 255, 255, .13);

  --label: #F5F6F8;
  --label-2: rgba(236, 238, 245, .62);
  /* .36 in the app. Every --label-3 selector on this site carries meaningful
     text (footer identity line, About field labels, breadcrumbs), and .36
     measured 3.04:1, under the 4.5:1 AA floor. Do not lower it. */
  --label-3: rgba(236, 238, 245, .54);

  /* the old web: appears only to be extinguished */
  --link: #6E8BFF;
  --link-dead: #2A2F3D;

  /* the answer */
  --accent: #0F4A38;
  --accent-hi: #2FA279;
  --answer: #4FDCA4;        /* peak moments on true black only */
  --accent-tint: rgba(15, 74, 56, .26);
  --orange: #F0A02E;

  --elev: inset 0 1.5px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(0,0,0,.5),
          0 3px 6px rgba(0,0,0,.45), 0 30px 58px -18px rgba(0,0,0,.95);
  --elev-hi: inset 0 1.5px 0 rgba(255,255,255,.19), inset 0 -1px 0 rgba(0,0,0,.55),
             0 6px 12px rgba(0,0,0,.5), 0 54px 84px -20px rgba(0,0,0,1);
  /* the app's surface recipe: a lit top edge falling to a darker base */
  --skin: linear-gradient(180deg, var(--surface-top), var(--surface) 60%, #14161B);
  --skin-hi: linear-gradient(180deg, var(--surface-2), var(--surface-top) 60%, var(--surface));

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ease-out-expo; no bounce anywhere on this site */
  --ease: cubic-bezier(.16, 1, .3, 1);

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --pill: 999px;

  --maxw: 1080px;
  --gut: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--label);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- skip link (a11y) ---------- */
.skip {
  position: absolute; left: -9999px;
  background: var(--accent-hi); color: #06120D;
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 11, 13, .78);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair);
}
.hdr .wrap { display: flex; align-items: center; gap: 28px; height: 66px; }
.mark {
  font-weight: 700; font-size: 17px; letter-spacing: .18em;
  color: var(--label); text-decoration: none; margin-right: auto;
}
.mark .l { color: var(--accent-hi); }
.nav { display: flex; gap: 24px; align-items: center; }
.nav a {
  color: var(--label-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--label); }

@media (max-width: 860px) {
  .hdr .wrap { height: auto; padding-top: 12px; padding-bottom: 12px;
               flex-wrap: wrap; row-gap: 10px; }
  .nav { order: 3; width: 100%; gap: 18px; flex-wrap: wrap;
         font-size: 14px; padding-top: 4px; border-top: 1px solid var(--hair); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--pill);
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-family: var(--font);
  transition: transform .14s ease, background .14s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-hi); color: #06120D; }
.btn-primary:hover { background: #3AB98A; }
.btn-secondary {
  background: var(--surface-top); color: var(--label); border-color: var(--hair-top);
}
.btn-secondary:hover { background: var(--surface-2); }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---------- type ---------- */
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; }
h1 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 700; letter-spacing: -.035em;
     line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -.03em;
     text-wrap: balance; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 16px; }
.lede { font-size: clamp(17px, 2vw, 21px); color: var(--label-2); max-width: 62ch; }
a { color: var(--accent-hi); }
.muted { color: var(--label-2); }
.small { font-size: 14px; }

/* ---------- sections ---------- */
section { padding: 84px 0; border-top: 1px solid var(--hair); }
section:first-of-type { border-top: none; }
@media (max-width: 700px) { section { padding: 56px 0; } }

.hero { padding: 96px 0 84px; text-align: center; }
.hero .lede { margin: 0 auto 30px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- the ChatGPT test block ---------- */

/* ---------- cards ---------- */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .cards, .cards-3 { grid-template-columns: 1fr; } }
.card {
  background: var(--skin); border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--elev);
  position: relative;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--label-2); margin: 0; }
.card .n {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent-tint); color: var(--accent-hi);
  font-size: 14px; font-weight: 700; margin-bottom: 14px;
}

/* ---------- timeline (how it works) ---------- */
@media (max-width: 700px) {
}

/* ---------- honesty split (2-col .split or 3-col .cards-3) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
/* Not scoped to .split: the "what's not included" card and its list must
   carry the same treatment in the three-column .cards-3 layout too. */
.card.no { border-color: rgba(240, 160, 46, .28); }
.card ul, .split ul { margin: 0; padding-left: 20px; color: var(--label-2); }
.card li, .split li { margin-bottom: 9px; }

/* ---------- stat row ---------- */
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }

/* ---------- dashboard demo frame ---------- */
.demo-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--accent-tint); border: 1px solid rgba(47, 162, 121, .3);
  border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 18px;
  color: var(--label); font-size: 14.5px;
}
.demo-note b { color: var(--accent-hi); }
@media (max-width: 860px) { .frame iframe { height: 560px; } }

/* ---------- answers library ---------- */

/* ---------- article ---------- */
.article { max-width: 720px; }
.article .answer {
  background: linear-gradient(180deg, rgba(47,162,121,.09), rgba(47,162,121,.02));
  border: 1px solid rgba(47,162,121,.22); border-radius: var(--r-md);
  padding: 24px 26px; margin: 0 0 34px;
  font-size: 19px; line-height: 1.6; color: var(--label);
}
.article h2 { font-size: 25px; margin: 38px 0 12px; }
.article ul, .article ol { color: var(--label-2); padding-left: 22px; }
.article li { margin-bottom: 8px; }
.faq { margin-top: 44px; border-top: 1px solid var(--hair); padding-top: 30px; }
.faq h3 { margin: 24px 0 6px; }
.faq p { color: var(--label-2); }
.crumb { font-size: 14px; color: var(--label-3); margin-bottom: 18px; }
.crumb a { color: var(--label-2); text-decoration: none; }
.crumb a:hover { color: var(--label); }

/* ---------- contact form ---------- */
.form { display: grid; gap: 14px; max-width: 540px; margin-top: 26px; }
.form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.form input, .form textarea {
  width: 100%; padding: 12px 14px; font-family: var(--font); font-size: 15px;
  color: var(--label); background: var(--surface-top);
  border: 1px solid var(--hair-top); border-radius: var(--r-sm);
}
.form input:focus, .form textarea:focus {
  outline: 2px solid var(--accent-hi); outline-offset: 1px;
}
.form textarea { min-height: 110px; resize: vertical; }
.form .req { color: var(--accent-hi); }

.idblock {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-md); padding: 24px; margin-top: 26px;
}
.idblock dt { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
              color: var(--label-3); margin-top: 14px; }
.idblock dt:first-child { margin-top: 0; }
.idblock dd { margin: 4px 0 0; font-size: 16px; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--hair); padding: 46px 0 60px; color: var(--label-2); }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
@media (max-width: 760px) { .ftr-grid { grid-template-columns: 1fr; } }
.ftr h4 { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
          color: var(--label-3); margin: 0 0 12px; font-weight: 700; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 8px; }
.ftr a { color: var(--label-2); text-decoration: none; }
.ftr a:hover { color: var(--label); }
.ftr .legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--hair);
              font-size: 13.5px; color: var(--label-3); }

/* ============================================================
   THE DISAPPEARANCE — home hero sequence
   Renders its END STATE by default. The .seq-on class (added by
   JS) rewinds it to frame 0 and hands control to the scroller,
   so a JS failure or a headless render still ships a complete
   page rather than a blank one.
   ============================================================ */

/* the query bar the visitor can type into */

/* the dying list */
.serp-row { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.serp-n { font-family: var(--mono); font-size: 12px; color: var(--label-3); padding-top: 4px; }
.serp-t {
  font-size: 17px; font-weight: 500; color: var(--link);
  margin: 0 0 3px; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(110,139,255,.35);
}
.serp-u { font-family: var(--mono); font-size: 11.5px; color: var(--label-3); margin: 0 0 5px; }

/* the answer that replaces it */
.ai-note { margin-top: 26px; font-size: 13px; color: var(--label-3); max-width: 46ch; }

/* scroll affordance */

/* --- frame 0 state, only once JS confirms it can drive the sequence --- */

/* --- reduced motion: hold the end frame, drop the tall scroll --- */
@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   WHERE EVERYONE WENT — 100 marks, 58 of them leave
   ============================================================ */

.gone-grid {
  display: grid; grid-template-columns: repeat(20, 1fr); gap: 7px;
  margin: 40px 0 22px; max-width: 620px;
}
@media (max-width: 640px) { .gone-grid { grid-template-columns: repeat(10, 1fr); } }
.gone-grid i {
  display: block; aspect-ratio: 1; border-radius: 2px;
  background: var(--accent-hi); opacity: .85;
  transition: opacity .5s var(--ease), background .5s var(--ease),
              transform .5s var(--ease);
}
.gone .gone-grid i.out { background: var(--link-dead); opacity: .5; transform: scale(.55); }
.gone-key { display: flex; gap: 26px; flex-wrap: wrap; font-size: 13.5px; color: var(--label-2); }
.gone-key span { display: flex; align-items: center; gap: 8px; }
.gone-key b { width: 10px; height: 10px; border-radius: 2px; background: var(--accent-hi); }
.gone-key .d { background: var(--link-dead); }
@media (prefers-reduced-motion: reduce) {
  .gone-grid i { transition: none; }
}

/* ============================================================
   FOUR STEPS — alternating, each visually distinct
   ============================================================ */
.step {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px);
  align-items: center; padding: clamp(44px, 7vw, 84px) 0;
  border-top: 1px solid var(--hair);
}
.step:first-of-type { border-top: none; }
.step:nth-child(even) .step-fig { order: -1; }
@media (max-width: 800px) {
  .step { grid-template-columns: 1fr; gap: 26px; }
  .step:nth-child(even) .step-fig { order: 0; }
}
.step-k {
  font-family: var(--mono); font-size: 12px; color: var(--accent-hi);
  margin-bottom: 14px; letter-spacing: .04em;
}
.step h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 650;
           letter-spacing: -.02em; margin-bottom: 10px; line-height: 1.2; }
.step p { color: var(--label-2); margin: 0; max-width: 46ch; }
.step-fig {
  background: var(--skin); border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: 28px; min-height: 230px;
  display: grid; align-content: center; gap: 10px;
  box-shadow: var(--elev);
}

/* fig 1: questions accumulating */
.q-line { font-size: 14px; color: var(--label-2); display: flex; gap: 9px; align-items: baseline; }
.q-line::before { content: "?"; color: var(--accent-hi); font-weight: 700; flex: none; }


/* fig 3: a published page with their name on it */
.pub { border: 1px solid var(--hair-top); border-radius: var(--r-md);
       padding: 18px; background: var(--skin-hi); box-shadow: var(--elev); }
.pub .t { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.pub .m { font-family: var(--mono); font-size: 11px; color: var(--label-3); }
.pub .by { font-size: 12.5px; color: var(--accent-hi); margin-top: 12px; }

/* fig 4: the monthly line */

/* ============================================================
   DEVICE FRAME for the dashboard
   ============================================================ */
.device {
  border: 1px solid var(--hair-top); border-radius: var(--r-lg); overflow: hidden;
  background: var(--skin); box-shadow: var(--elev-hi);
}
.device-bar {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px;
  border-bottom: 1px solid var(--hair); background: var(--surface-top);
}
.device-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); }
.device-bar span {
  margin-left: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--label-3);
}
/* .device must size its own iframe. Without this the iframe falls back to the
   browser default 300x150 and the demo collapses to a postage stamp. */
.device iframe { display: block; width: 100%; height: 780px; border: 0; }
@media (max-width: 860px) { .device iframe { height: 560px; } }

/* ============================================================
   REVEALS — enhance an already-visible default
   ============================================================ */
.rise { opacity: 1; transform: none; }
/* Hidden only once JS is confirmed. The failsafe animation reveals anything
   still hidden after 2.5s, so a page where IntersectionObserver never fires
   (headless render, backgrounded tab, a crawler executing JS) can never ship
   blank. .in reveals earlier via the transition; both land on opacity 1. */
.js .rise {
  opacity: 0; transform: translateY(18px);
  animation: riseFailsafe 1ms linear 2.5s forwards;
}
.js .rise.in { opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease); }
@keyframes riseFailsafe { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; }
  .js .rise.in { transition: opacity .3s linear; }
}

/* ============================================================
   PAGE HERO — consistent opening for every non-home page.
   Sits on the void so each page starts the way the home page
   ends: black, large, one idea.
   ============================================================ */
.phero {
  background: var(--void); border-top: none;
  padding: clamp(64px, 11vw, 132px) 0 clamp(48px, 7vw, 84px);
}
.phero h1 { max-width: 18ch; }
.phero .lede { margin-top: 24px; font-size: clamp(17px, 2.1vw, 22px); max-width: 60ch; }
.phero-k {
  font-family: var(--mono); font-size: 12px; color: var(--accent-hi);
  letter-spacing: .06em; margin: 0 0 20px;
}

/* ============================================================
   TRACK — the engagement timeline. A line draws itself down the
   page as you scroll; each stage lights when it arrives.
   ============================================================ */
.track { position: relative; margin-top: clamp(30px, 5vw, 54px); padding-left: 46px; }
.track::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: var(--surface-2); border-radius: 2px;
}
.track-fill {
  position: absolute; left: 11px; top: 8px; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--accent-hi), var(--answer));
  border-radius: 2px; transition: height .18s linear;
}
.stage { position: relative; padding: 0 0 clamp(34px, 5vw, 56px); }
.stage:last-child { padding-bottom: 0; }
.stage::before {
  content: ""; position: absolute; left: -41px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--surface-2);
  transition: border-color .45s var(--ease), background .45s var(--ease),
              box-shadow .45s var(--ease);
}
.stage.lit::before {
  border-color: var(--answer); background: var(--answer);
  box-shadow: 0 0 0 5px rgba(79,220,164,.14);
}
.stage-when {
  font-family: var(--mono); font-size: 12px; color: var(--label-3);
  letter-spacing: .05em; margin-bottom: 9px; transition: color .45s var(--ease);
}
.stage.lit .stage-when { color: var(--answer); }
.stage h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.95rem); font-weight: 650;
  letter-spacing: -.022em; line-height: 1.18; margin-bottom: 10px;
}
.stage p { color: var(--label-2); margin: 0; max-width: 58ch; }
@media (max-width: 620px) { .track { padding-left: 32px; } .stage::before { left: -27px; } }
@media (prefers-reduced-motion: reduce) {
  .track-fill { transition: none; }
  .stage::before, .stage-when { transition: none; }
}

/* ============================================================
   LEDGER — "what we handle / need / don't do". Replaces a card
   row: three columns separated by rules, not boxes.
   ============================================================ */
.ledger {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--hair-top);
}
.ledger > div { padding: 30px 28px 30px 0; border-right: 1px solid var(--hair); }
.ledger > div:last-child { border-right: none; padding-right: 0; }
.ledger > div + div { padding-left: 28px; }
@media (max-width: 820px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger > div { border-right: none; border-bottom: 1px solid var(--hair);
                  padding: 26px 0; }
  .ledger > div + div { padding-left: 0; }
  .ledger > div:last-child { border-bottom: none; }
}
.ledger h3 { font-size: 15px; font-weight: 650; margin-bottom: 14px; }
.ledger .no-h { color: var(--orange); }
.ledger ul { list-style: none; margin: 0; padding: 0; }
.ledger li {
  color: var(--label-2); font-size: 15px; padding: 7px 0 7px 22px;
  position: relative; line-height: 1.5;
}
.ledger li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 8px; height: 1px; background: var(--accent-hi);
}
.ledger .no li::before { background: var(--orange); }

/* ============================================================
   PLAQUE — the business identity block. This is the single most
   load-bearing element on the site for a cold prospect, so it
   gets treated like a credential rather than a definition list.
   ============================================================ */
.plaque {
  border: 1px solid var(--hair-top); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--bg));
  padding: clamp(26px, 4vw, 40px); margin-top: 30px; box-shadow: var(--elev);
}
.plaque dl {
  margin: 0; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 26px 40px;
}
@media (max-width: 620px) { .plaque dl { grid-template-columns: 1fr; gap: 20px; } }
.plaque dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--label-3); margin: 0 0 6px;
}
.plaque dd { margin: 0; font-size: 17px; font-weight: 500; color: var(--label); }
.plaque dd a { color: var(--label); text-decoration: none;
               border-bottom: 1px solid rgba(47,162,121,.5); }
.plaque dd a:hover { color: var(--answer); border-bottom-color: var(--answer); }

/* ============================================================
   FORM — enlarged. A cold prospect filling this in is the whole
   point of the site, so it stops looking like a default form.
   ============================================================ */
.form { max-width: 620px; gap: 18px; }
.form label { font-size: 13px; letter-spacing: .01em; color: var(--label-2); }
.form input, .form textarea {
  padding: 14px 16px; font-size: 16px; background: var(--surface);
  border-color: var(--hair-top); border-radius: var(--r-md);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.form input:hover, .form textarea:hover { border-color: rgba(255,255,255,.2); }
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--accent-hi); background: var(--surface-top);
  box-shadow: 0 0 0 4px rgba(47,162,121,.13);
}
.form .btn { justify-self: start; padding: 15px 30px; font-size: 16px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form-2 { grid-template-columns: 1fr; } }

/* ============================================================
   ARTICLE — calm by design. These pages are read by AI crawlers,
   so nothing here depends on JavaScript.
   ============================================================ */
.article .answer { position: relative; }
.article .answer::before {
  content: "The short answer"; display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-hi); margin-bottom: 12px;
}
.article h2 { margin-top: 46px; letter-spacing: -.02em; }
.article p { max-width: 68ch; }
.faq h3 {
  font-size: 17px; font-weight: 620; color: var(--label);
  margin: 30px 0 7px; padding-top: 22px; border-top: 1px solid var(--hair);
}
.faq h3:first-of-type { border-top: none; padding-top: 0; }
.crumb { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }

/* ============================================================
   CLOSER — the repeated end-of-page call to action
   ============================================================ */
.closer { text-align: center; }
.closer h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.closer .lede { margin: 0 auto 30px; }
.closer .hero-cta { justify-content: center; }

/* ============================================================
   MATERIAL LAYER — carried over from the app so the site and the
   product read as one object. Three things do most of the work:
   dimensional surfaces (--skin + --elev), light, and tilt.
   ============================================================ */

/* Light. The first two attempts had none, which is what made them
   read bleak: text floating on a void. Sections now sit in a field. */
body {
  background:
    radial-gradient(900px 620px at 78% -8%, rgba(47,162,121,.10), transparent 62%),
    radial-gradient(760px 520px at 8% 12%, rgba(60,84,180,.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
section { border-top: 1px solid var(--hair); position: relative; }
.lit-field {
  background: radial-gradient(720px 420px at 50% 0%, rgba(47,162,121,.09), transparent 68%);
}

/* Tilt. The app's signature hover: surfaces lean toward the cursor.
   Driven by two custom properties the script writes. */
.tilt {
  transform: perspective(900px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translateZ(0);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
.tilt:hover { box-shadow: var(--elev-hi); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .tilt { transform: none; transition: none; }
}

/* Glow behind a hero object, so green reads as light rather than paint */
.glow { position: relative; }
.glow::before {
  content: ""; position: absolute; inset: -18% -10%;
  background: radial-gradient(closest-side, rgba(47,162,121,.24), transparent 72%);
  filter: blur(28px); z-index: -1; pointer-events: none;
}

/* The score ring, lifted from the app's Activity ring */
.ring { display: grid; place-items: center; position: relative; width: 168px; height: 168px; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring .track-c { stroke: var(--surface-2); }
.ring .val-c {
  stroke: url(#ringgrad); stroke-linecap: round;
  filter: drop-shadow(0 0 9px rgba(47,162,121,.55));
  transition: stroke-dashoffset 1.4s var(--ease);
}
.ring .num {
  position: absolute; font-size: 44px; font-weight: 700; letter-spacing: -.03em;
  color: var(--label); font-variant-numeric: tabular-nums; line-height: 1;
}
.ring .cap {
  position: absolute; bottom: 30px; font-size: 10.5px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--label-3);
}

/* A raised pill used for small status marks, matching the app's chips */
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: var(--pill); background: var(--accent-tint);
  border: 1px solid rgba(47,162,121,.28); color: var(--accent-hi);
  font-size: 12.5px; font-weight: 600;
}
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--answer);
          box-shadow: 0 0 8px rgba(79,220,164,.9); }

/* The feature panel: the app's one green hero tile per screen */
.feature {
  background:
    radial-gradient(620px 300px at 88% 8%, rgba(47,162,121,.20), transparent 66%),
    var(--skin);
  border: 1px solid rgba(47,162,121,.24); border-radius: var(--r-lg);
  box-shadow: var(--elev); padding: clamp(28px, 4vw, 44px); position: relative;
  overflow: hidden;
}
.feature::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(79,220,164,.16), transparent 70%);
  pointer-events: none;
}

/* ---------- hero framing: the sequence needs to say what it is ---------- */
@media (max-width: 700px) { .seq-sub { margin-bottom: 20px; } }

/* ============================================================
   THE ASK — the hero now shows the two places a customer
   actually asks: a chat assistant, and Google's AI Overview.
   Both are illustrations, labeled as such on the page.
   ============================================================ */
.panel {
  background: var(--skin); border: 1px solid var(--hair-top);
  border-radius: var(--r-lg); box-shadow: var(--elev-hi); overflow: hidden;
}
.panel-top {
  display: flex; align-items: center; gap: 9px; padding: 13px 18px;
  border-bottom: 1px solid var(--hair); background: rgba(255,255,255,.02);
  font-size: 12.5px; font-weight: 600; color: var(--label-2); letter-spacing: .01em;
}
.panel-top .badge {
  width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center;
  background: var(--accent); color: var(--answer); font-size: 10px; font-weight: 800;
}

/* ---- the chat assistant ---- */
.chat-body { padding: 22px 22px 6px; min-height: 232px; }
.bubble-user {
  margin: 0 0 20px auto; max-width: 82%; width: fit-content;
  background: var(--surface-2); border: 1px solid var(--hair-top);
  border-radius: 16px 16px 5px 16px; padding: 11px 16px;
  font-size: 15.5px; color: var(--label); opacity: 0;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  transform: translateY(6px);
}
.bubble-user.on { opacity: 1; transform: none; }
.answer-row { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.answer-mark {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent-hi), var(--accent));
  color: #04140E; font-size: 12px; font-weight: 800;
  box-shadow: 0 0 14px rgba(47,162,121,.35);
}
.answer-text {
  font-size: 15.5px; line-height: 1.62; color: var(--label); margin: 0; min-height: 1.6em;
}
.answer-text b { color: #fff; font-weight: 650; }
.caret {
  display: inline-block; width: 2px; height: 1.05em; background: var(--answer);
  vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

.chat-input {
  display: flex; align-items: center; gap: 10px; margin: 8px 16px 16px;
  padding: 12px 12px 12px 18px; border-radius: var(--pill);
  background: var(--bg); border: 1px solid var(--hair-top);
}
.chat-typed { flex: 1; font-size: 15px; color: var(--label); min-height: 1.3em; }
.chat-typed .ph { color: var(--label-3); }
.chat-send {
  width: 30px; height: 30px; border-radius: 50%; flex: none; border: none;
  background: var(--surface-3); color: var(--label-3);
  display: grid; place-items: center; font-size: 14px;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.chat-send.ready { background: var(--answer); color: #04140E; }

/* the editable bits inside the typed query */

/* ---- Google's AI Overview ---- */
.aio { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.g-bar {
  display: flex; align-items: center; gap: 12px; padding: 13px 20px;
  border: 1px solid var(--hair-top); border-radius: var(--pill);
  background: var(--skin); box-shadow: var(--elev); margin-bottom: 16px;
  font-size: 15px; color: var(--label);
}
.aio-card {
  border: 1px solid rgba(47,162,121,.28); border-radius: var(--r-md);
  background: radial-gradient(460px 200px at 88% 0%, rgba(47,162,121,.16), transparent 70%), var(--skin);
  padding: 20px 22px; box-shadow: var(--elev);
}
.aio-label {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--answer); margin-bottom: 12px;
}
.aio-card p { font-size: 15px; line-height: 1.6; color: var(--label); margin: 0; }
.aio-card p b { color: #fff; font-weight: 650; }
.g-fold {
  display: flex; align-items: center; gap: 14px; margin: 18px 0 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--label-3);
}
.g-fold::before, .g-fold::after {
  content: ""; height: 1px; background: var(--hair-top); flex: 1;
}
.g-links { opacity: .34; filter: saturate(.5); }
.g-links .serp-t { font-size: 15px; }
.g-links .serp-row { margin-bottom: 13px; }

/* At rest the assistant panel is just an empty prompt, the way a fresh chat
   looks. The conversation area only takes up room once there is a conversation. */
.chat-body { min-height: 0; padding: 20px 22px 2px; transition: min-height .4s var(--ease); }
.answer-row { opacity: 0; transition: opacity .4s var(--ease); }
.answer-row.on { opacity: 1; }
.chat-body:has(.bubble-user.on) { min-height: 210px; }
@supports not (selector(:has(*))) { .chat-body { min-height: 210px; } }

/* ============================================================
   THE HERO LOOP — a self-playing demonstration. No scroll
   driving, no sticky. It runs on its own, on a loop, and it is
   the first and largest thing on the site.
   ============================================================ */
.hero-ask {
  border-top: none; padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 104px);
  min-height: 92vh; display: grid; align-content: center;
  background:
    radial-gradient(1000px 640px at 72% 4%, rgba(47,162,121,.13), transparent 64%),
    radial-gradient(800px 520px at 6% 90%, rgba(60,84,180,.08), transparent 62%);
}
.hero-ask h1 { max-width: 17ch; margin-bottom: 18px; }
.hero-ask .lede { max-width: 56ch; margin-bottom: clamp(30px, 4vw, 46px); }

.ask-stage {
  position: relative; width: 100%; max-width: 880px;
  min-height: 430px;
}
@media (max-width: 700px) { .ask-stage { min-height: 480px; } }

.ask-stage .panel, .ask-stage .aio {
  position: absolute; inset: 0 auto auto 0; width: 100%;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.ask-stage .panel { opacity: 1; }
.ask-stage .aio { opacity: 0; transform: translateY(14px); pointer-events: none; }
.ask-stage.on-google .panel { opacity: 0; transform: translateY(-16px) scale(.985); pointer-events: none; }
.ask-stage.on-google .aio { opacity: 1; transform: none; pointer-events: auto; }

/* bigger, so it reads as the main event rather than a widget */
.ask-stage .panel-top { padding: 15px 22px; font-size: 13px; }
.ask-stage .chat-body { padding: 26px 26px 4px; min-height: 236px; }
.ask-stage .bubble-user { font-size: 16.5px; padding: 13px 18px; }
.ask-stage .answer-text { font-size: 16.5px; line-height: 1.65; }
.ask-stage .chat-input { margin: 10px 20px 20px; padding: 15px 15px 15px 22px; }
.ask-stage .chat-typed { font-size: 16px; }

/* the assistant thinking, before it answers */
.think { display: inline-flex; gap: 5px; align-items: center; height: 1.6em; }
.think i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--label-3);
  animation: think 1.25s ease-in-out infinite;
}
.think i:nth-child(2) { animation-delay: .16s; }
.think i:nth-child(3) { animation-delay: .32s; }
@keyframes think { 0%,60%,100% { opacity:.28; transform: translateY(0); }
                   30% { opacity:1; transform: translateY(-3px); } }

/* a small caption naming which surface is on screen */
.ask-cap {
  display: flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: 13px; color: var(--label-2); min-height: 1.4em;
}
.ask-cap b { color: var(--answer); font-weight: 600; }
.ask-dots { display: flex; gap: 6px; margin-left: auto; }
.ask-dots i { width: 16px; height: 3px; border-radius: 2px; background: var(--surface-3); }
.ask-dots i.on { background: var(--answer); }

@media (prefers-reduced-motion: reduce) {
  .ask-stage .panel, .ask-stage .aio { transition: none; }
  .think i { animation: none; opacity: .5; }
  /* the loop's JS already renders a finished frame under reduced motion; these
     make that independent of the script running at all */
  .bubble-user, .answer-row { transition: none; }
  .bubble-user, .answer-row { opacity: 1; transform: none; }
}

/* ============================================================
   THE LAMBDA — Ronan's mark, sitting as a ghost watermark in
   the hero, the same treatment the app uses behind its header.
   ============================================================ */
.hero-ask { position: relative; overflow: hidden; }
.lam {
  position: absolute; right: -6vw; top: 50%; transform: translateY(-50%);
  font-size: min(78vh, 60vw); line-height: .8; font-weight: 700;
  color: transparent; pointer-events: none; user-select: none; z-index: 0;
  background: linear-gradient(150deg,
              rgba(47,162,121,.20), rgba(47,162,121,.05) 46%, rgba(255,255,255,.03));
  -webkit-background-clip: text; background-clip: text;
  filter: blur(.4px);
}
.lam::after {
  content: ""; position: absolute; inset: 12% 18% 12% 18%;
  background: radial-gradient(closest-side, rgba(47,162,121,.16), transparent 72%);
  filter: blur(46px); z-index: -1;
}
.hero-ask .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .lam { right: -22vw; opacity: .55; } }

/* ============================================================
   THE OVERVIEW — Google's AI summary, its own illustration
   ============================================================ */
.ovr-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 64px);
  align-items: center; margin-top: clamp(28px, 4vw, 46px);
}
@media (max-width: 900px) { .ovr-grid { grid-template-columns: 1fr; } }
.ovr-stage { position: relative; }
.ovr-stage .g-bar { margin-bottom: 14px; }
.ovr-stage .aio-card { position: relative; }

/* the share-of-attention bar: summary vs links */
.attn { margin-top: 26px; }
.attn-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 14px; }
.attn-row span { width: 128px; flex: none; color: var(--label-2); }
.attn-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.attn-bar i {
  display: block; height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), var(--answer));
  transition: width 1.3s var(--ease);
}
.attn-row.dim .attn-bar i { background: var(--surface-3); }
.attn-row b { width: 46px; text-align: right; font-variant-numeric: tabular-nums; color: var(--label); }
@media (prefers-reduced-motion: reduce) { .attn-bar i { transition: none; } }

/* ============================================================
   THE SPLIT — where a hundred searches actually end up.
   A dot grid was too abstract; this is a flow that forks, with
   ribbon thickness carrying the proportion.
   ============================================================ */
.split-fig { margin: clamp(30px, 5vw, 52px) 0 0; }
.split-svg { display: block; width: 100%; height: auto; overflow: visible; }
.split-svg .wipe-r { transition: width 1.5s var(--ease); }
.split-lbl { font-size: 13.5px; font-weight: 600; fill: var(--label); }
.split-sub { font-size: 12px; fill: rgba(236,238,245,.62); }
.split-num { font-size: 30px; font-weight: 700; fill: var(--label);
             font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.split-num.go { fill: var(--answer); }
@media (prefers-reduced-motion: reduce) { .split-svg .wipe-r { transition: none; } }

.split-legend {
  display: flex; gap: 30px; flex-wrap: wrap; margin-top: 26px;
  font-size: 14px; color: var(--label-2);
}
.split-legend span { display: flex; align-items: center; gap: 9px; }
.split-legend i { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.split-legend .lost { background: #333944; }
.split-legend .won { background: linear-gradient(135deg, var(--accent), var(--answer)); }

/* two-column ledger: "what we handle" and "what we need from you" */
.ledger-2 { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 820px) { .ledger-2 { grid-template-columns: 1fr; } }

/* ============================================================
   FIXLIST — what "fixing the foundation" actually means, in
   plain items. Replaces unlabelled bars that showed nothing.
   ============================================================ */
.fixlist { display: grid; gap: 2px; width: 100%; }
.fix {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 2px; border-bottom: 1px solid var(--hair);
  font-size: 13.5px; color: var(--label-2); line-height: 1.35;
}
.fix:last-child { border-bottom: none; }
.fix .fx-i {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; flex: none;
  background: var(--surface-2); color: var(--label-3);
}
.fix.ok .fx-i { background: var(--accent); color: var(--answer); }
.fix.ok { color: var(--label); }
.fix .fx-s {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--label-3); white-space: nowrap;
}
.fix.ok .fx-s { color: var(--accent-hi); }
.fix.now .fx-s { color: var(--orange); }
.fix.now .fx-i { background: rgba(240,160,46,.16); color: var(--orange); }

/* ============================================================
   QTILES — the Field Guide. Each question is its own object you
   can hover and click into, rather than a row in a long list.
   ============================================================ */
.qtiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px; margin-top: clamp(30px, 4vw, 50px);
}
.qtile {
  position: relative; display: flex; flex-direction: column;
  background: var(--skin); border: 1px solid var(--hair);
  border-radius: var(--r-lg); box-shadow: var(--elev);
  padding: 28px 26px 22px; min-height: 216px;
  text-decoration: none; color: var(--label); overflow: hidden;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease),
              transform .5s var(--ease);
}
/* a green wash that rises out of the corner on hover */
.qtile::before {
  content: ""; position: absolute; right: -30%; top: -55%;
  width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47,162,121,.24), transparent 70%);
  opacity: 0; transition: opacity .45s var(--ease), transform .6s var(--ease);
  transform: scale(.65);
}
.qtile:hover, .qtile:focus-visible {
  border-color: rgba(47,162,121,.34); box-shadow: var(--elev-hi);
}
.qtile:hover::before, .qtile:focus-visible::before { opacity: 1; transform: scale(1); }
.qtile:focus-visible { outline: 2px solid var(--answer); outline-offset: 3px; }

.qt-q {
  font-size: clamp(1.08rem, 1.5vw, 1.3rem); font-weight: 640; line-height: 1.25;
  letter-spacing: -.018em; margin-bottom: 12px; text-wrap: balance;
}
.qt-a {
  font-size: 14.5px; line-height: 1.55; color: var(--label-2);
  margin: 0 0 20px; transition: color .35s var(--ease);
}
.qtile:hover .qt-a { color: var(--label); }
.qt-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--label-3);
  transition: color .35s var(--ease), gap .35s var(--ease);
}
.qtile:hover .qt-go, .qtile:focus-visible .qt-go { color: var(--answer); gap: 13px; }
.qt-go svg { transition: transform .35s var(--ease); }
.qtile:hover .qt-go svg { transform: translateX(3px); }

/* staggered arrival, only while JS is driving the reveal */
.js .qtile.rise { transition-delay: 0ms; }
.js .qtiles .qtile:nth-child(2)  { transition-delay: 40ms; }
.js .qtiles .qtile:nth-child(3)  { transition-delay: 80ms; }
.js .qtiles .qtile:nth-child(4)  { transition-delay: 120ms; }
.js .qtiles .qtile:nth-child(5)  { transition-delay: 60ms; }
.js .qtiles .qtile:nth-child(6)  { transition-delay: 100ms; }
.js .qtiles .qtile:nth-child(7)  { transition-delay: 140ms; }
.js .qtiles .qtile:nth-child(8)  { transition-delay: 80ms; }
.js .qtiles .qtile:nth-child(9)  { transition-delay: 120ms; }
.js .qtiles .qtile:nth-child(10) { transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .qtile, .qtile::before, .qt-a, .qt-go, .qt-go svg { transition: none; }
  .js .qtiles .qtile { transition-delay: 0ms !important; }
}