/* Section 2: What GEO means. The AI explains its own choice (Josh, 11 Nov 2026): a chat at the top
   (left on desktop) where the opening's card docks in the AI's answer and its sentence lights the four
   phrases one at a time with the matching rows; the describing text sits below (right on desktop).
   Follows the site theme (tokens in base.css). Positions that move are set by js/meaning.js. */

#meaning {
  position: relative; z-index: 16;           /* above the opening, so the carried card passes over it */
  min-height: 0; background: var(--bg); color: var(--fg);
  --band: rgb(31 111 255 / .26);
  --coming: rgb(var(--fg-rgb) / .3);
}
html[data-scheme="light"] #meaning { --band: rgb(31 111 255 / .13); --coming: rgb(var(--fg-rgb) / .28); }
/* the opening's card hides the frame its clone takes over (inline styles from hero.js lose to this) */
#hero .answer-card[data-carried="true"] { visibility: hidden !important; }

.m-pin {
  position: relative; height: 100svh; min-height: 640px;
  display: grid; align-items: center;
  padding: var(--header-h) var(--gutter) 0;
}
.m-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* a faint pool of blue light under the sentence, so the ground has depth instead of being flat */
.m-bg::before {
  content: ''; position: absolute; left: 50%; top: 58%; width: 96vw; height: 64vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(31 111 255 / .08), rgb(11 30 91 / .05) 45%, transparent 75%);
}
html[data-scheme="light"] .m-bg::before { background: radial-gradient(closest-side, rgb(31 111 255 / .09), rgb(141 182 255 / .07) 50%, transparent 78%); }
.m-bg::after {
  content: ''; position: absolute; inset: 0; opacity: .45; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-scheme="light"] .m-bg::after { display: none; }

.m-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 0 clamp(48px, 6vw, 104px);
  align-items: center; width: min(1240px, 100%); margin: 0 auto;
}

/* the chat: the same calm window as the opening's assistant, one question and the AI's answer */
.m-chat {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 0 24px 24px;
  border-radius: 22px; background: #FCFCFB; color: #17171A;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(11 30 91 / .08), 0 2px 6px rgb(11 30 91 / .05), 0 40px 80px -40px rgb(11 30 91 / .3);
}
.mc-top { display: flex; align-items: center; height: 46px; margin: 0 -8px; }
.mc-model { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.mc-model svg { opacity: .55; }
.mc-q { display: flex; justify-content: flex-end; margin: 0; }
.mc-bubble { max-width: 80%; padding: 10px 16px; border-radius: 20px; background: #EFEEEA; font-size: 15px; line-height: 1.45; }
.mc-a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.mc-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #17171A; color: #fff; }
.mc-a-in { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.m-dock { position: relative; width: 440px; max-width: 100%; }

.m-copy { max-width: 560px; }
.m-lead {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 500; letter-spacing: -0.01em;
  color: var(--fg-2);
}
.m-lead-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgb(31 111 255 / .16); flex: none; }

/* the AI's sentence: chat type, a touch larger so the four phrases read from across the room */
.m-sentence {
  margin: 0; font-weight: 500; letter-spacing: -0.015em; line-height: 1.42;
  font-size: clamp(1.25rem, 1.55vw, 1.5rem);
  text-wrap: pretty; color: #17171A;
}
.m-name { font-weight: 600; }
/* the describing text: dim while the AI explains, full once all four phrases are lit */
.m-sub {
  margin: 0; font-weight: 600; letter-spacing: -0.028em; line-height: 1.2;
  font-size: clamp(1.75rem, 2.7vw, 2.625rem); text-wrap: pretty;
  color: rgb(var(--fg-rgb) / .3); transition: color .6s var(--ease);
}
.m-sub b { font-weight: 600; color: rgb(var(--fg-rgb) / .55); transition: color .6s var(--ease); }
#meaning[data-done="true"] .m-sub, #meaning.is-static .m-sub { color: var(--fg-2); }
#meaning[data-done="true"] .m-sub b, #meaning.is-static .m-sub b { color: var(--fg); }

/* A phrase is coming (faint, a blank still to fill), active (a soft blue band behind it, full type)
   or done (full type over a 2px blue underline). The band and the underline are two backgrounds
   that grow from the left, cloned onto every line the phrase wraps to. */
.m-ph {
  color: var(--coming);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .06em; margin: 0 -.06em; border-radius: .12em;
  background:
    linear-gradient(var(--band), var(--band)) no-repeat 0 58% / 0% 84%,
    linear-gradient(var(--blue), var(--blue)) no-repeat 0 96% / 0% 2px;
  transition: color .45s var(--ease), background-size .55s var(--ease);
}
.m-ph[data-s="active"] { color: var(--fg); background-size: 100% 84%, 0% 2px; }
.m-ph[data-s="done"] { color: var(--fg); background-size: 0% 84%, 100% 2px; }
.m-stop { transition: color .4s var(--ease); }
#meaning[data-done="true"] .m-stop { color: var(--blue); }

/* the carried card (a clone of the opening's card), positioned by JS. --dock (0..1) runs with the
   move; --gr is how much its small type grows so it stays readable once the card is small. */
.m-card {
  position: absolute !important; left: 0 !important; top: 0 !important; z-index: 3 !important;
  transform-origin: 0 0; will-change: transform; visibility: hidden;
  margin: 0 !important;
  --gr: 1; --dock: 0;
}
.m-card .reason b { transition: none; }
/* on a white ground the opening's deep shadow reads as a black frame: once docked it settles to a soft lift */
html[data-scheme="light"] .m-card { transition: box-shadow .6s var(--ease); }
html[data-scheme="light"] .m-card[data-phase="b"] {
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(11 30 91 / .09), 0 2px 6px rgb(11 30 91 / .06), 0 40px 80px -36px rgb(11 30 91 / .35);
}
/* in the docked card each row is its short label ("What you offer"), the same words as the phrase */
.m-card .reason .sl { min-height: calc(var(--h0, 0px) * (1 - var(--dock))); }
.m-card .reason .sl-a { position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; }
.m-card .reason .sl-b { position: relative; inset: auto; transform: none; }
.m-card .reason { position: relative; font-size: calc(.875rem * var(--gr)); padding: calc(9px * var(--gr)) calc(8px * var(--dock)); border-radius: calc(10px * var(--gr)); transition: background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease); }
.m-card .reason .reason-dot { width: calc(10px * var(--gr)); height: calc(10px * var(--gr)); border-width: calc(2px * var(--gr)); }
.m-card .ac-kicker { font-size: calc(12px * var(--gr)); gap: calc(8px * var(--gr)); }
.m-card .ac-dot-slot { width: calc(12px * var(--gr)); height: calc(12px * var(--gr)); flex: none; }
.m-card .ac-kind { font-size: calc(.875rem * var(--gr)); }
.m-card .ac-foot { font-size: calc(.6875rem * var(--gr)); }
/* the First choice badge grows with the type, so it still reads once the card is docked small, and
   slides from the photo's middle to its left edge so it never hangs off the card */
.m-card .ac-badge {
  --bl: 46px;
  left: calc(var(--bl) - (var(--bl) - 4px) * var(--dock)); translate: calc(-50% * (1 - var(--dock))) 0;
  font-size: calc(11px * var(--gr)); padding: calc(4px * var(--gr)) calc(9px * var(--gr)) calc(4px * var(--gr)) calc(7px * var(--gr)); gap: calc(5px * var(--gr));
}
/* coming rows wait in grey, done rows keep a filled dot, the lit row glows with a notch toward the line */
.m-card[data-phase="b"] .reason { color: rgb(10 10 11 / .38); }
.m-card[data-phase="b"] .reason .reason-dot { background: #fff; }
.m-card .reason.is-done { color: var(--ink) !important; }
.m-card .reason.is-done .reason-dot { background: var(--blue) !important; }
.m-card .reason.is-lit {
  color: var(--ink) !important; border-bottom-color: transparent;
  background: rgb(31 111 255 / .08); box-shadow: inset 0 0 0 calc(1px * var(--gr)) rgb(31 111 255 / .6);
}
.m-card .reason.is-lit .reason-dot { background: var(--blue) !important; }
/* reduced motion: no pin; the card sits docked, still, above the sentence */
#meaning.is-static .m-pin { height: auto; min-height: 0; padding-top: calc(var(--header-h) + 72px); padding-bottom: 96px; }
#meaning.is-static .m-card { visibility: visible; }

/* the header stays dark over the dark sections (journey flags a dark zone too); not in the light theme */
html[data-zone="dark"]:not([data-scheme="light"]) .site-header[data-theme="light"] {
  color: var(--paper);
  background: rgba(10, 10, 11, .78);
  box-shadow: 0 1px 0 rgba(246, 245, 242, .06);
}
html[data-zone="dark"]:not([data-scheme="light"]) .site-header[data-theme="light"] .brand-mark--dark { display: block; }
html[data-zone="dark"]:not([data-scheme="light"]) .site-header[data-theme="light"] .brand-mark--light { display: none; }
html[data-zone="dark"]:not([data-scheme="light"]) .site-header[data-theme="light"] .site-nav { border-color: var(--line-dark); background: rgba(246, 245, 242, .03); }
html[data-zone="dark"]:not([data-scheme="light"]) .site-header[data-theme="light"] .site-nav a:hover { background: rgba(246, 245, 242, .08); }
html[data-zone="dark"]:not([data-scheme="light"]) .site-header[data-theme="light"] .btn--primary { --bg: var(--paper); --fg: var(--ink); }

@media (max-width: 819.98px) {
  .m-pin { align-items: start; padding-top: calc(var(--header-h) + 12px); min-height: 0; }
  .m-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* phones: the chat on top, the describing text under it (Josh, 11 Nov 2026) */
  .m-chat { gap: 10px; padding: 0 14px 16px; border-radius: 18px; }
  .mc-top { height: 34px; margin: 0 -6px -2px; }
  .mc-model { font-size: 13px; }
  .mc-bubble { padding: 8px 13px; border-radius: 17px; font-size: 13.5px; }
  .mc-a { grid-template-columns: minmax(0, 1fr); }
  .mc-av { display: none; }
  .mc-a-in { gap: 10px; }
  .m-dock { width: 72%; }
  .m-sentence { font-size: 1.0625rem; line-height: 1.4; }
  .m-lead { margin-bottom: 8px; font-size: 1rem; }
  .m-sub { font-size: 1.375rem; }
  .m-card .ac-badge { --bl: 34px; }
}
/* short phones (375 x 667): the chat and the describing text share one screen */
@media (max-width: 819.98px) and (max-height: 720px) {
  .m-pin { padding-top: calc(var(--header-h) + 8px); }
  .m-grid { gap: 12px; }
  .m-chat { gap: 8px; padding-bottom: 12px; }
  .mc-top { height: 30px; }
  .m-dock { width: 88%; }
  .m-sentence { font-size: 1rem; }
  .m-lead { margin-bottom: 4px; font-size: .9375rem; }
  .m-sub { font-size: 1.1875rem; }
}