/*
 * The booking page at /talk/: its own stylesheet.
 *
 * WHERE IT CAME FROM. The inline <style> of galvor-talk/index.html (the old
 * talk.galvor.ai page) at that repo's commit 798402e. Moved, not rewritten:
 * every declaration below is the old one, character for character, in the old
 * order. tools/build-css.mjs copies this file to public/talk.css, where
 * src/app/(talk)/talk/page.tsx links it. It is NOT part of the hashed site
 * bundle.
 *
 * WHAT CHANGED, AND WHY.
 *
 * 1. Every selector starts with `.gv-talk`, the class on this page's <main>.
 *    The site bundle loads on this page too, and the old sheet styled bare
 *    elements (`h1`, `a`, `button`, `*`) and short class names (`.nav`,
 *    `.form`, `.btn`, `.hero`). Scoped, none of it can reach the site's nav
 *    or footer, and it outranks the bundle's element rules inside the page.
 *    No class was renamed; talk.js looks several up by name.
 *    The one name both sheets use is `.hero` (the bundle has
 *    `.hero+.logos{margin-top:0}`, which matches nothing here).
 * 2. The two `:root` blocks of colour and font tokens are set on `.gv-talk`
 *    instead, so `--bg`, `--ink`, `--accent` and the rest exist only inside
 *    this page.
 * 3. One rule is new: the first one, which switches the site's reset off
 *    inside this page (the reason is written at that rule).
 * 4. The old `body` rule is split in two (see the note at that rule). The old
 *    `html` rule is gone: the bundle already sets text-size-adjust, and
 *    `scroll-behavior: smooth` served the "Pick a time" jump link, which was
 *    removed.
 *
 * THE BACKGROUND. The old page drew its ground with two things: `body
 * { background: #f7f6fa }` and, over it, a fixed `.gv-aurora` layer at 18%
 * opacity.
 *   - The aurora was copied INTO the old page from this site (its comment
 *     said "website-2.0 shell.css .gv-aurora") and the site still draws the
 *     same layer, with the same gradients, size, blur and opacity, behind
 *     every page from the root layout (src/styles/shell.css). So it is
 *     already behind this page. It is not covered, hidden or repeated, and
 *     src/app/layout.tsx is untouched.
 *   - The colour under it is NOT the same. The site's <body> carries the
 *     class `fsh-root`, which paints it white; the old page's was the pale
 *     lilac #f7f6fa. The aurora is mostly see-through, so that colour is most
 *     of what is seen. The `body:has(.gv-talk)` rule below puts the old
 *     colour back, on this page only: the selector matches only a page that
 *     holds this page's <main>, and this file loads nowhere else. No script
 *     and no extra element are needed.
 * `.wrap` keeps its `z-index: 1`, which is what puts the page above the
 * aurora.
 *
 * REMOVED (their markup is gone from src/talk/talk.html):
 *   - the creator mock card (`.viz` and its keyframes blink, scan, fill, dash,
 *     floatA, floatB, floatC), the stat row (`.proof`), the "Who we are"
 *     block (`.about`, `.about-head`, `.k`, `.grid`, `.box`);
 *   - the old page's own top bar (`.topnav`, `.navlinks`, `.gv-mark`,
 *     `body.gv-scrolled`) and footer (`.cl-slab`): the site's SiteNav and
 *     SiteFooter are used, styled by the bundle. The one footer rule kept is
 *     the 24px gap above it, at the end of this file;
 *   - `.gv-aurora` and its keyframes (the site's copy is used, see above);
 *   - `.btn-dark` (only the removed "Pick a time" button used it);
 *   - `.pill`, `.agenda` and `img`, which no kept markup uses.
 */
/* START FROM THE BROWSER'S OWN DEFAULTS, AS THE OLD PAGE DID.
   The old page had no reset sheet. The site bundle has one (Tailwind's base
   layer, plus element rules in base.css), and it reaches every element here:
   buttons lose their border and padding and take the page font, headings and
   paragraphs lose their margins, every border becomes `0 solid`. The rules
   moved from the old page were written on top of browser defaults and do not
   set those things back.
   So the reset is switched off inside this page: `all: revert` returns each
   property to the browser's default. Every rule below comes later or is more
   specific, so it applies exactly as it did on the old page. Measured, not
   assumed: with this rule the computed style of every kept element matches
   the old page's, at 1440 and 390 pixels wide, in the calendar, form and
   booked states. What still differs draws nothing: two values inherited from
   <html> (tab-size, the tap highlight) and a zero-width border style on the
   icons.
   SVG is left out on purpose. An icon's `fill` and `stroke` are attributes on
   the element, any stylesheet rule outranks an attribute, and reverting them
   would paint every icon solid black. The second rule undoes the only two
   things the reset does to an <svg> itself.
   `:where()` keeps the first selector as weak as `.gv-talk *`. */
.gv-talk :where(:not(svg, svg *)) { all: revert; }
.gv-talk svg { display: revert; vertical-align: revert; }
.gv-talk {
    --bg: #F7F5F0;         /* warm paper */
    --bg-2: #EFEBE3;
    --card: #FFFFFF;
    --ink: #141311;
    --ink-2: #5C5852;
    --ink-3: #8F8A82;
    --line: rgba(20,19,17,.09);
    --accent: #6D3DF5;     /* the one brand thread carried over */
    --accent-ink: #4E23C7;
    --accent-soft: #EEE8FF;
    --ok: #1F8A5B;
    --ease: cubic-bezier(.23,1,.32,1);
    --sans: 'Geist', system-ui, -apple-system, sans-serif;
    --mono: 'Geist Mono', ui-monospace, monospace; }
.gv-talk * { box-sizing: border-box; }
/* Was the old page's one `body` rule:
     body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
   The background stays on <body>, so the ground runs the full width behind
   the aurora as it did. It is written as the colour itself (#f7f6fa, the
   value of --bg), because the tokens now live on .gv-talk and <body> cannot
   see them. `margin: 0` is left to the site's own body rule. The rest moves
   to the page wrapper. */
body:has(.gv-talk) { background: #f7f6fa; }
.gv-talk { color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
.gv-talk a { color: inherit; text-decoration: none; }
.gv-talk ::selection { background: rgba(109,61,245,.16); }
.gv-talk .wrap { position: relative; z-index: 1; width: min(1120px, 100% - 48px); margin: 0 auto; }
@media (max-width: 640px) { .gv-talk .wrap { width: calc(100% - 32px); } }
/* hero */
.gv-talk .hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; padding: 22px 0 64px; }
.gv-talk h1 { font-size: clamp(40px, 5.4vw, 66px); line-height: .98; letter-spacing: -.04em; font-weight: 600; margin: 0 0 18px; max-width: 12ch; text-wrap: balance; }
.gv-talk h1 span { color: var(--accent); }
.gv-talk .sub { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--ink-2); max-width: 44ch; margin: 0; text-wrap: pretty; }
.gv-talk .cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
@media (max-width: 960px) { .gv-talk .hero { grid-template-columns: 1fr; gap: 28px; padding: 12px 0 44px; } .gv-talk h1 { max-width: 14ch; } }
/* ---------- booking (custom UI) ---------- */
.gv-talk .book { scroll-margin-top: 24px; border-radius: 28px; padding: 8px; background: rgba(20,19,17,.035); box-shadow: 0 0 0 1px rgba(20,19,17,.06) inset; }
.gv-talk .book-core { border-radius: 21px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 1px 0 #fff inset, 0 30px 70px -40px rgba(20,19,17,.35); overflow: hidden; display: grid; grid-template-columns: 300px 1fr 250px; min-height: 560px; }
.gv-talk .book-core > * { min-width: 0; }
.gv-talk .bc-l { padding: 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.gv-talk .bc-m { padding: 28px 30px; }
.gv-talk .bc-r { padding: 28px 22px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
@media (max-width: 1040px) { .gv-talk .book-core { grid-template-columns: 260px 1fr; } .gv-talk .bc-r { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 760px) { .gv-talk .book-core { grid-template-columns: 1fr; } .gv-talk .bc-l { border-right: 0; border-bottom: 1px solid var(--line); } .gv-talk .bc-m, .gv-talk .bc-l, .gv-talk .bc-r { padding: 22px 18px; } }
.gv-talk .who { display: flex; align-items: center; gap: 12px; }
.gv-talk .av { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(140deg, #B79CFF, var(--accent)); color: #fff; font: 600 17px var(--sans); position: relative; flex: none; }
.gv-talk .av::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2.5px #fff; }
.gv-talk .who b { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; }
.gv-talk .who small { font: 500 12px var(--mono); color: var(--ink-3); }
.gv-talk .bc-l h2 { margin: 20px 0 6px; font-size: 24px; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; }
.gv-talk .bc-l .lead { margin: 0; color: var(--ink-2); font-size: 14px; }
.gv-talk .meta { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.gv-talk .meta li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.gv-talk .meta svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.gv-talk .meta .tzsel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; border: 0; -webkit-appearance: none; appearance: none; }
.gv-talk .meta .tzsel:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.gv-talk .meta .tzsel { position: relative; display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; border-bottom: 1px dashed var(--ink-3); }
.gv-talk .quote { margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.gv-talk .quote blockquote { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.gv-talk .quote figcaption { margin-top: 8px; font: 500 11.5px var(--mono); color: var(--ink-3); }
.gv-talk .bc-l .alt { margin-top: 0; padding-top: 18px; font: 500 12px var(--mono); color: var(--ink-3); }
.gv-talk .bc-l .alt a { color: var(--ink); border-bottom: 1px solid var(--line-2, rgba(20,19,17,.2)); }
.gv-talk .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.gv-talk .cal-head b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.gv-talk .cal-head b span { color: var(--ink-3); font-weight: 500; }
.gv-talk .nav { display: flex; gap: 4px; }
.gv-talk .nav button { width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; transition: background .15s ease, transform .16s var(--ease); }
.gv-talk .nav button svg { width: 15px; height: 15px; }
.gv-talk .nav button:hover { background: var(--bg); }
.gv-talk .nav button:active { transform: scale(.94); }
.gv-talk .nav button:disabled { opacity: .3; cursor: default; }
.gv-talk .dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 6px; }
.gv-talk .dow span { text-align: center; font: 500 10.5px var(--mono); letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; padding: 6px 0; }
.gv-talk .days { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.gv-talk .day { position: relative; aspect-ratio: 1; border-radius: 12px; border: 0; background: transparent; font: 500 14px var(--sans); color: var(--ink-3); cursor: default; display: grid; place-items: center; transition: background .15s ease, color .15s ease, transform .16s var(--ease), box-shadow .2s ease; }
.gv-talk .day.has { background: var(--bg); color: var(--ink); cursor: pointer; font-weight: 600; }
.gv-talk .day.has:not(.sel):hover { background: var(--bg-2); }
.gv-talk .day.has:active { transform: scale(.95); }
.gv-talk .day.today::after { content: ''; position: absolute; bottom: 7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.gv-talk .day.sel, .gv-talk .day.sel:hover { background: var(--ink); color: #fff; box-shadow: 0 8px 20px -10px rgba(20,19,17,.6); }
.gv-talk .day.sel.today::after { background: #B79CFF; }
.gv-talk .day.pad { visibility: hidden; }
.gv-talk .cal-foot { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; font: 500 12px var(--mono); color: var(--ink-3); }
.gv-talk .cal-foot i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; background: var(--bg-2); margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px var(--line) inset; }
.gv-talk .slots-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; min-height: 30px; }
.gv-talk .slots-head b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.gv-talk .slots-head b span { color: var(--ink-3); font-weight: 500; }
.gv-talk .seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg); box-shadow: 0 0 0 1px var(--line) inset; }
.gv-talk .seg button { border: 0; background: transparent; padding: 4px 9px; border-radius: 999px; font: 600 11.5px var(--sans); color: var(--ink-3); cursor: pointer; transition: background .15s ease, color .15s ease; }
.gv-talk .seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20,19,17,.12); }
.gv-talk .slots { display: grid; gap: 8px; overflow: auto; max-height: 470px; padding-right: 4px; scrollbar-width: thin; }
.gv-talk .slot { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 12px; border: 0; background: transparent; box-shadow: 0 0 0 1px var(--line-2, rgba(20,19,17,.16)) inset; font: 600 13.5px var(--sans); color: var(--ink); cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .16s var(--ease); text-align: left; }
.gv-talk .slot small { font: 500 11px var(--mono); color: var(--ink-3); }
.gv-talk .slot:hover { background: var(--bg); box-shadow: 0 0 0 1.5px var(--ink) inset; }
.gv-talk .slot:active { transform: scale(.98); }
.gv-talk .slot.sel { background: var(--ink); color: #fff; box-shadow: none; }
.gv-talk .slot.sel small { color: rgba(255,255,255,.6); }
.gv-talk .slots-empty { color: var(--ink-3); font-size: 13.5px; padding: 30px 0; text-align: center; }
.gv-talk .slots-empty b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.gv-talk .slots-empty svg { width: 28px; height: 28px; color: var(--ink-3); margin-bottom: 8px; }
.gv-talk .skel-line { height: 40px; border-radius: 12px; background: linear-gradient(90deg, #F2F0EB 25%, #E8E5DE 50%, #F2F0EB 75%); background-size: 200% 100%; animation: sh 1.4s linear infinite; }
@keyframes sh { to { background-position: -200% 0; } }
/* step 2: details */
.gv-talk .book-core.step2 .bc-m, .gv-talk .book-core.step2 .bc-r { display: none; }
.gv-talk .book-core.step2 { grid-template-columns: 300px 1fr; }
.gv-talk .bc-f { display: none; padding: 28px 32px; }
.gv-talk .book-core.step2 .bc-f { display: block; }
.gv-talk .back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; font: 500 12.5px var(--sans); color: var(--ink-2); cursor: pointer; margin-bottom: 18px; }
.gv-talk .back svg { width: 14px; height: 14px; }
.gv-talk .picked { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg); box-shadow: 0 0 0 1px var(--line) inset; margin-bottom: 22px; }
.gv-talk .picked .d { width: 46px; height: 46px; border-radius: 12px; background: var(--ink); color: #fff; display: grid; place-content: center; text-align: center; line-height: 1; }
.gv-talk .picked .d b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.gv-talk .picked .d small { font: 500 9.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #B79CFF; margin-top: 3px; }
.gv-talk .picked .t b { display: block; font-size: 15px; font-weight: 600; }
.gv-talk .picked .t small { font: 500 12px var(--mono); color: var(--ink-3); }
.gv-talk .picked .chg { margin-left: auto; font: 600 12px var(--sans); color: var(--accent-ink); background: transparent; border: 0; cursor: pointer; }
.gv-talk .form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gv-talk .form .full { grid-column: 1 / -1; }
.gv-talk .field label { display: block; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.gv-talk .field input, .gv-talk .field textarea { width: 100%; border: 0; border-radius: 12px; padding: 12px 14px; background: var(--bg); box-shadow: 0 0 0 1px var(--line) inset; font: 500 14px var(--sans); color: var(--ink); transition: box-shadow .15s ease, background .15s ease; }
.gv-talk .field input:focus, .gv-talk .field textarea:focus { outline: 0; background: #fff; box-shadow: 0 0 0 1.5px var(--ink) inset; }
.gv-talk .field textarea { resize: vertical; min-height: 84px; }
.gv-talk .field .err { display: none; font: 500 11.5px var(--sans); color: #B4232C; margin-top: 6px; }
.gv-talk .field.bad input { box-shadow: 0 0 0 1.5px #B4232C inset; }
.gv-talk .field.bad .err { display: block; }
.gv-talk .field .opt { text-transform: none; letter-spacing: 0; color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.gv-talk .more { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 0; font: 500 13px var(--sans); color: var(--ink-2); cursor: pointer; }
.gv-talk .more svg { width: 14px; height: 14px; color: var(--accent-ink); transition: transform .25s var(--ease); }
.gv-talk .more[aria-expanded="true"] svg { transform: rotate(45deg); }
.gv-talk .more .opt { font: 500 11px var(--mono); color: var(--ink-3); }
.gv-talk .extra .form { margin-top: 2px; }
.gv-talk .submit { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.gv-talk .submit .hint { font: 500 12px var(--mono); color: var(--ink-3); }
.gv-talk .btn.btn-accent { background: var(--accent); color: #fff; }
.gv-talk .btn.btn-accent .ic { background: rgba(255,255,255,.18); color: #fff; }
.gv-talk .btn.btn-accent:disabled { opacity: .6; cursor: default; }
@media (max-width: 760px) { .gv-talk .book-core.step2 { grid-template-columns: 1fr; } .gv-talk .form { grid-template-columns: 1fr; } .gv-talk .bc-f { padding: 22px 18px; } }
/* success */
.gv-talk .bookerr { grid-column: 1 / -1; margin: 0 0 12px; padding: 10px 13px; border-radius: 10px; background: rgba(190,42,42,.07); box-shadow: 0 0 0 1px rgba(190,42,42,.18) inset; color: #8d2020; font-size: 13.5px; }
.gv-talk .done { display: none; padding: 40px 32px; text-align: center; grid-column: 1 / -1; }
.gv-talk .book-core.done-state { min-height: 0; grid-template-columns: 1fr; }  /* collapse the 560px booking-grid height */
.gv-talk .book-core.done-state > *:not(.done) { display: none; }
.gv-talk .book-core.done-state .done { display: block; }
.gv-talk .done .tick { width: 56px; height: 56px; border-radius: 18px; background: rgba(31,138,91,.12); color: var(--ok); display: grid; place-items: center; margin: 0 auto 18px; }
.gv-talk .done .tick svg { width: 26px; height: 26px; }
.gv-talk .done h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.03em; font-weight: 600; }
.gv-talk .done p { margin: 0 auto; color: var(--ink-2); max-width: 44ch; }
.gv-talk .done .row { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.gv-talk .mockbadge[hidden] { display: none; }
.gv-talk .mockbadge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #FFF3D6; color: #8A5A00; font: 600 11px var(--sans); margin-left: 8px; vertical-align: middle; }
.gv-talk .btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 6px 10px 16px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 13.5px var(--sans); transition: transform .16s var(--ease); }
.gv-talk .btn:active { transform: scale(.97); }
.gv-talk .btn .ic { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; transition: transform .35s var(--ease); }
.gv-talk .btn .ic svg { width: 13px; height: 13px; }
@media (hover:hover) and (pointer:fine) { .gv-talk .btn:hover .ic { transform: translateY(-2px); } }
.gv-talk .btn.btn-line { background: transparent; box-shadow: 0 0 0 1px var(--line) inset; padding-right: 16px; }
.gv-talk [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.gv-talk [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gv-talk [data-reveal] { transform: none; transition: opacity .3s ease; } }
/* ==========================================================================
     galvor.ai look. Everything below brings this page in line with the
     landing page (galvor-tech/website-2.0): its font stack, purple, brand
     gradient, aurora ground, fixed top bar and dark footer. The layout and
     the booking flow above are unchanged; these rules only restyle them.
     ========================================================================== */
.gv-talk {
    --bg: #f7f6fa;  --bg-2: #efecf5;  --card: #ffffff;
    --ink: #24202d; --ink-2: #5f5869; --ink-3: #938b9d;
    --line: rgba(36,32,45,.09);
    --accent: #7936ea;       /* the logo purple */
    --accent-ink: #6a28d6;
    --accent-soft: #f0e8fd;
    --ok: #1e9678;           /* green means it worked, red means it didn't */
    --bad: #d9435e;
    --grad: linear-gradient(110deg, #8b52e7, #ca7dab, #89a6e6);
    --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: ui-monospace, Menlo, monospace; }
.gv-talk ::selection { background: rgba(121,54,234,.16); }
.gv-talk button, .gv-talk a { -webkit-tap-highlight-color: transparent; }
.gv-talk button:focus-visible, .gv-talk a:focus-visible { outline: 3px solid #c192ff; outline-offset: 4px; }
/* room for the fixed top bar (the site's .topnav, 76px tall, 62px on a phone) */
.gv-talk .wrap { padding-top: 96px; }
@media (max-width: 760px) { .gv-talk .wrap { padding-top: 78px; } }
.gv-talk .book { scroll-margin-top: 96px; }
/* type: the landing page's heads: heavier, tighter, one gradient phrase */
.gv-talk h1 { font-weight: 700; letter-spacing: -.045em; }
.gv-talk h1 span { background: var(--grad); color: transparent; -webkit-background-clip: text; background-clip: text; }
/* buttons: the purple pill, as on galvor.ai */
.gv-talk .btn.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 1px 2px #2a0f5a55, 0 8px 20px -8px #5a1fc0aa; }
.gv-talk .btn.btn-accent .ic { background: rgba(255,255,255,.18); color: #fff; }
@media (hover:hover) { .gv-talk .btn.btn-accent:hover { background: var(--accent-ink); } }
.gv-talk .btn.btn-line { background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px #ddd7e6 inset; }
/* the outline button carries no icon circle, so it came out 36px tall beside the
     48px "Pick a time"; give it the same height, and the hero pair one width */
.gv-talk .btn.btn-line { min-height: 48px; padding: 10px 18px; justify-content: center; }
.gv-talk .cta-row .btn, .gv-talk .done .row .btn { min-width: 150px; min-height: 48px; justify-content: center; padding-right: 18px; }
/* cards sit on the aurora as the landing page's light glass */
.gv-talk .book-core { box-shadow: 0 0 0 1px #ffffff8f, 0 26px 64px -34px #2411384d; }
.gv-talk .book { background: rgba(255,255,255,.36); box-shadow: 0 0 0 1px #ffffff8f inset; -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); }
/* selection states in the brand purple rather than near-black */
.gv-talk .day.sel, .gv-talk .day.sel:hover, .gv-talk .slot.sel, .gv-talk .picked .d { background: var(--accent); box-shadow: 0 8px 20px -10px rgba(121,54,234,.7); }
.gv-talk .day.sel.today::after { background: #fff; }
.gv-talk .picked .d small { color: #e4d6ff; }
.gv-talk .slot:hover { box-shadow: 0 0 0 1.5px var(--accent) inset; }
.gv-talk .field input:focus, .gv-talk .field textarea:focus { box-shadow: 0 0 0 1.5px var(--accent) inset; }
.gv-talk .field .err { color: var(--bad); }
.gv-talk .field.bad input { box-shadow: 0 0 0 1.5px var(--bad) inset; }
.gv-talk .bookerr { background: rgba(217,67,94,.07); box-shadow: 0 0 0 1px rgba(217,67,94,.2) inset; color: #a82a44; }
.gv-talk .av { background: var(--grad); }
/* The gap between the booking card and the footer. On the old page this was
   `.cl-footer { margin-top: 24px; }`, in its block of footer rules. The
   footer is now the site's, which sits flush under <main> on other pages, so
   the old gap is given here, for this page only. */
body:has(.gv-talk) .cl-footer { margin-top: 24px; }

/* ---- the hero as one column (2026-10-08, asked for by the owner) -----------
   The old page had the heading on the left and a creator mock card on the
   right, so the heading was held to 12 characters a line and the supporting
   line to 44. The card is gone, so both now run the full width: the heading
   on one line, the supporting line on one line, and "Prefer email?" beside
   the Email Sunil button. On narrower screens they wrap as before, because a
   line that cannot fit must not push the page sideways. */
.gv-talk .hero { grid-template-columns: 1fr; }
.gv-talk h1 { max-width: none; font-size: clamp(34px, 5.1vw, 62px); }
.gv-talk .sub { max-width: none; }
.gv-talk .cta-row { gap: 14px; }
.gv-talk .cta-k { font-size: clamp(15px, 1.3vw, 17px); color: var(--ink-2); }
@media (min-width: 1000px) { .gv-talk h1 { white-space: nowrap; } }
@media (min-width: 1180px) { .gv-talk .sub { white-space: nowrap; } }
@media (max-width: 960px) { .gv-talk h1 { max-width: none; } }

/* ---- small screens (added 2026-10-09) ---------------------------------------
   Found in a pass over this page at 320 to 760px. Nothing here applies above
   760px.
   - The month arrows (32px), the 12h/24h switch (21px tall) and the time rows
     (38px) were small targets for a thumb. The arrows' row is pulled back by
     the 4px it grows on each side, so the month's name, the right arrow and
     the grid stay where they were.
   - The line under the calendar ("Days with open slots" and "Next open") sat
     as two columns that each broke in the middle. Each now keeps to one line,
     and the second drops under the first when both do not fit.
   - On the narrowest phones a day is about 30px square and the dot that marks
     today sat on top of the number. It moves to the bottom edge.
   - "Add context so we prep before the call" is a button, and a button
     centres its text. Once it wrapped to two lines the second line sat in
     the middle. It reads from the left like the labels around it. */
@media (max-width: 760px) {
  .gv-talk .nav button { width: 40px; height: 40px; }
  .gv-talk .nav { margin: -4px -4px -4px 0; }
  .gv-talk .seg button { padding: 8px 12px; }
  .gv-talk .slot { min-height: 44px; }
  .gv-talk .cal-foot { flex-wrap: wrap; gap: 4px 14px; }
  .gv-talk .cal-foot span { white-space: nowrap; }
  .gv-talk .more { text-align: left; }
}
@media (max-width: 400px) { .gv-talk .day.today::after { bottom: 3px; } }