/* Meet Gia (index.html) — page-specific sections. */

/* ===== 01 Hero (scroll video) ===== */
.hero { position: relative; height: 420vh; background: var(--gp-black); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* The canvas starts below the solid fixed header, so the whole frame is fitted into the visible area. */
.hero__canvas { position: absolute; top: var(--header-h); left: 0; width: 100%; height: calc(100% - var(--header-h)); }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(247, 240, 228, .97) 0%, rgba(247, 240, 228, .66) 30%, rgba(247, 240, 228, 0) 60%),
    linear-gradient(to bottom, rgba(5, 4, 2, .35) 0%, rgba(5, 4, 2, 0) 18%);
}
.hero__copy { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(48px, 9vh, 112px); }
.hero__caps { display: grid; }
.cap { grid-area: 1 / 1; align-self: end; opacity: 0; will-change: opacity, transform; }
.cap--1 { opacity: 1; }
.hero h1, .cap__display { font-family: var(--font-display); color: var(--gp-champagne); margin: 0; text-wrap: balance; }
.cap--1 h1 { font-size: clamp(34px, 4.4vw, 62px); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; max-width: 780px; }
.cap--2 .cap__display { font-size: clamp(72px, 11vw, 168px); font-weight: 600; line-height: .95; letter-spacing: -0.02em; }
.cap--3 .cap__display { font-size: clamp(32px, 4.2vw, 60px); font-weight: 500; line-height: 1.1; }
.cap--4 .cap__display { font-size: clamp(34px, 4.2vw, 60px); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; max-width: 820px; }
.cap--4 .btn-row { margin-top: 32px; }
.hero__hint { position: absolute; right: var(--page-pad); bottom: clamp(48px, 9vh, 112px); display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gp-text-2); }
.hero__hint::after { content: ""; width: 1px; height: 40px; background: linear-gradient(var(--gp-gold), transparent); }
.hero__loading { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gp-gold-mid); transform-origin: 0 50%; transform: scaleX(0); transition: opacity .4s; }
@media (max-width: 768px) {
  .hero { height: 360vh; }
  .hero__hint { display: none; }
  .hero__scrim { background: linear-gradient(to top, rgba(247, 240, 228, .98) 0%, rgba(247, 240, 228, .78) 35%, rgba(247, 240, 228, 0) 68%), linear-gradient(to bottom, rgba(5, 4, 2, .3) 0%, rgba(5, 4, 2, 0) 20%); }
}

/* ===== 02 How it works ===== */
.steps { list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.step { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.step__num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--gp-copper); display: block; margin-bottom: 16px; }
.step__text .h4 { margin-bottom: 8px; }
.mock { padding: 20px; min-height: 270px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.modes { display: flex; gap: 6px; }
.mode { font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gp-line); color: var(--gp-text-muted); }
.mode.is-on { border-color: var(--gp-glass-border-active); color: var(--gp-gold); }
.mock__input { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--gp-line); font-size: 13px; color: var(--gp-text-muted); }
.factor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.factor-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(178, 154, 120, .7); font-size: 14px; }
.factor-list li:last-child { border-bottom: 0; }
.cmp { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cmp th, .cmp td { text-align: left; padding: 7px 6px; border-bottom: 1px solid rgba(178, 154, 120, .7); font-weight: 400; white-space: nowrap; }
.cmp thead th { color: var(--gp-text-muted); font-size: 11px; font-family: var(--font-mono); letter-spacing: .04em; }
.cmp tbody th { color: var(--gp-text-2); }
.cmp td { color: var(--gp-text); }
.cmp .best { color: var(--gp-gold-mid); }
.mock .btn-row { gap: 8px; margin-top: auto; }
@media (max-width: 960px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 56px; } .mock { min-height: 0; } }

/* ===== 02b A Gia that works with you (breather) ===== */
.breather { width: min(100%, 1360px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(48px, 5.5vw, 80px); align-items: center; }
.breather > * { min-width: 0; }
.breather__sub { display: block; margin-top: 8px; font-weight: 400; color: var(--gp-text-2); }
.pillars { list-style: none; margin: 32px 0 0; padding: 0; }
.pillars li { padding: 16px 0; border-top: 1px solid var(--gp-line); }
.pillars li:last-child { border-bottom: 1px solid var(--gp-line); }
.pillars .h4 { margin-bottom: 4px; }
.breather__close { margin: 32px 0 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--gp-champagne); }
.breather__media { margin: 0; }
/* The video sits in a .media-frame__box (16:9, radius 16, border) that clips it for [data-parallax]. */
@media (max-width: 900px) { .breather { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

/* ===== 03 How people use Gia ===== */
.personas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.persona { min-width: 0; margin: 0; }
.ph {
  aspect-ratio: 4 / 3; border-radius: 8px; border: 1px solid var(--gp-line); position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 75% 20%, rgba(209, 151, 106, .22), transparent 55%),
    radial-gradient(ellipse at 20% 90%, rgba(189, 122, 99, .14), transparent 60%),
    var(--gp-surface-2);
  display: flex; align-items: flex-end; padding: 16px;
}
.ph__label { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--gp-text-muted); max-width: 32ch; }
.ph__label b { display: block; font-weight: 600; color: var(--gp-copper); letter-spacing: .08em; margin-bottom: 4px; }
/* Persona photo frame: a .media-frame__box that clips the photo for [data-parallax]; the img fills it (cover). */
.persona__frame { --ratio: 3 / 2; border-radius: 8px; border-color: var(--gp-line); }
.persona__body { padding-top: 24px; }
.persona__tag { font-size: 17px; font-weight: 500; color: var(--gp-text); margin: 8px 0 12px; line-height: 1.45; }
@media (max-width: 860px) {
  .personas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-inline: calc(var(--page-pad) * -1); padding-inline: var(--page-pad); scroll-padding-inline: var(--page-pad); padding-bottom: 8px; scrollbar-width: none; }
  .personas::-webkit-scrollbar { display: none; }
  .persona { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ===== 04 In action ===== */
.action { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--grid-gap); align-items: start; }
.action__rows { list-style: none; margin: 48px 0 0; padding: 0; }
.arow { border-top: 1px solid var(--gp-line); }
.arow:last-child { border-bottom: 1px solid var(--gp-line); }
.arow button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 24px; width: 100%; padding: 24px 0; min-height: 30vh; align-content: start; }
.arow button:focus-visible { outline: 2px solid var(--gp-gold); outline-offset: 2px; }
.arow__mark { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--gp-text-muted); padding-top: 4px; transition: color .25s var(--ease); }
.arow__title { font-size: 20px; font-weight: 600; color: var(--gp-text-muted); transition: color .25s var(--ease); line-height: 1.3; }
.arow__desc { grid-column: 2; font-size: 15px; color: var(--gp-text-muted); margin-top: 8px; transition: color .25s var(--ease); max-width: 440px; }
.arow.is-active .arow__mark { color: var(--gp-gold); }
.arow.is-active .arow__title { color: var(--gp-text); }
.arow.is-active .arow__desc { color: var(--gp-text-2); }
.arow--alt .arow__mark { color: var(--gp-warning); }
.arow--alt .arow__title::after { content: "Alternate"; margin-left: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gp-warning); vertical-align: middle; letter-spacing: .04em; }
.action__panel { position: sticky; top: calc(var(--header-h) + 40px); }
.phone { display: flex; flex-direction: column; height: min(620px, calc(100svh - var(--header-h) - 80px)); min-height: 480px; overflow: hidden; }
.phone__head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--gp-glass-border); }
.phone__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--gp-champagne); }
.phone__sub { margin-left: auto; font-size: 12px; color: var(--gp-text-muted); }
.phone__body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.phone__foot { padding: 14px 20px; border-top: 1px solid var(--gp-glass-border); }
.phone__state { font-family: var(--font-mono); font-size: 11px; color: var(--gp-text-muted); letter-spacing: .06em; margin-bottom: 10px; display: flex; justify-content: space-between; }
.activity { display: grid; gap: 8px; padding: 14px; border-radius: 12px; border: 1px dashed var(--gp-line); font-size: 13px; }
.activity div { display: flex; justify-content: space-between; gap: 12px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { border: 1px solid var(--gp-line); border-radius: 12px; padding: 14px; font-size: 13px; display: grid; gap: 4px; }
.opt.is-picked { border-color: var(--gp-glass-border-active); background: rgba(189, 122, 99, .05); }
.opt__name { font-weight: 600; font-size: 14px; }
.opt__big { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--gp-text); }
.opt__meta { color: var(--gp-text-muted); }
.opt__price--up { color: var(--gp-warning); }
.opt__price--same { color: var(--gp-gold-mid); }
.card-inline { border: 1px solid var(--gp-glass-border-active); border-radius: 12px; padding: 16px; display: grid; gap: 10px; font-size: 14px; background: rgba(255, 253, 248, .85); }
.card-inline dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 13px; }
.card-inline dt { color: var(--gp-text-muted); }
.card-inline dd { margin: 0; }
.done-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--gp-gold-mid); font-weight: 600; font-size: 16px; }
.done-mark svg { flex: none; }
.unsure { border-color: rgba(160, 75, 36, .55); }
@media (max-width: 900px) {
  .action { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .action__list { display: contents; }
  .action__list > header { order: 1; }
  .action__panel { position: static; order: 2; }
  .action__rows { order: 3; }
  .action__rows { margin-top: 0; }
  .arow button { min-height: 0; }
  .phone { height: 540px; min-height: 0; }
}

/* ===== 05 Memory ===== */
.split--mem { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; }
.mem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
.mem__chat { padding: 24px; display: flex; flex-direction: column; gap: 14px; justify-content: center; min-height: 420px; }
.mem__side { border-left: 1px solid var(--gp-glass-border); padding: 20px; display: flex; flex-direction: column; gap: 12px; background: rgba(236, 224, 201, .55); }
.mem__head { display: flex; justify-content: space-between; align-items: baseline; }
.mem__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mem__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--gp-line); font-size: 13px; line-height: 1.45; }
.mem__item small { grid-column: 1; color: var(--gp-text-muted); font-size: 11px; }
.mem__item input { grid-column: 1; font: inherit; color: var(--gp-text); background: rgba(22, 35, 63, .05); border: 1px solid var(--gp-glass-border); border-radius: 6px; padding: 4px 6px; width: 100%; }
.forget { all: unset; cursor: pointer; grid-row: 1 / span 2; grid-column: 2; font-size: 11px; color: var(--gp-text-muted); padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; }
.forget:hover { color: var(--gp-text); border-color: var(--gp-line); }
.forget:focus-visible { outline: 2px solid var(--gp-gold); }
.mem__note { font-size: 12px; color: var(--gp-text-muted); margin-top: auto; }
.mem__toast { font-size: 12px; color: var(--gp-gold-mid); min-height: 18px; }
@media (max-width: 960px) { .split--mem { grid-template-columns: minmax(0, 1fr); gap: 56px; } }
@media (max-width: 560px) { .mem { grid-template-columns: minmax(0, 1fr); } .mem__side { border-left: 0; border-top: 1px solid var(--gp-glass-border); } .mem__chat { min-height: 0; } }

/* ===== 06 Control ===== */
.control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.control > * { min-width: 0; }
.perm { padding: 28px; display: grid; gap: 16px; }
.perm__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(189, 122, 99, .1); border: 1px solid var(--gp-glass-border); }
.perm__q { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; }
.perm__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.perm__choices .btn { padding: 0 10px; }
.perm__result { font-size: 14px; color: var(--gp-text-2); min-height: 22px; }
.says { display: grid; gap: 12px; margin-top: 24px; }
.say { display: grid; gap: 6px; }
.say__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--gp-text-muted); }
.faq { margin-top: 64px; max-width: 800px; }
.faq h3 { margin-bottom: 16px; }
/* Lines between questions; written so a hidden question (pending answer) leaves no double or missing line. */
.faq details { border-bottom: 1px solid var(--gp-line); }
.faq h3 + details { border-top: 1px solid var(--gp-line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-size: 17px; font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--gp-gold); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; max-width: 560px; }
@media (max-width: 960px) { .control { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .perm__choices { grid-template-columns: minmax(0, 1fr); } }

/* ===== 07 Work ===== */
.examples { list-style: none; margin: 0; padding: 0; }
.examples li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 32px; padding: 24px 0; border-top: 1px solid var(--gp-line); }
.examples li:last-child { border-bottom: 1px solid var(--gp-line); }
.examples b { font-weight: 600; font-size: 16px; color: var(--gp-text); }
@media (max-width: 600px) { .examples li { grid-template-columns: minmax(0, 1fr); } }

/* ===== 08 More power ===== */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tool { padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; transition: border-color .25s var(--ease); }
.tool:hover { border-color: var(--gp-gold-dark); }
.tool svg { color: var(--gp-gold-mid); }
.tool__text { font-size: 18px; font-weight: 500; line-height: 1.45; margin: 0; color: var(--gp-text); }
.tool__name { margin-top: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--gp-copper); }
.tool--link { text-decoration: none; color: inherit; }
.tool--link:hover, .tool--link:focus-visible { border-color: var(--gp-glass-border-active); }
.tool__more { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--gp-gold); text-decoration: underline; text-underline-offset: 4px; }
.tool--link .tool__name { margin-top: 0; }
.tools-note { margin-top: 32px; text-align: center; }
@media (max-width: 1100px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tools { grid-template-columns: minmax(0, 1fr); } }

/* ===== 09 Final CTA (layout: components.css "Final call to action") ===== */
/* Same proportions as the breather (02b), so both videos are the same size */
#join .final { width: min(100%, 1360px); grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(48px, 5.5vw, 80px); }
@media (max-width: 960px) { #join .final { grid-template-columns: minmax(0, 1fr); gap: 56px; } }
.waitlist { margin-top: 48px; display: flex; gap: 12px; flex-wrap: wrap; max-width: 520px; }
.waitlist input { flex: 1 1 220px; min-height: 48px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--gp-line); background: var(--gp-surface); color: var(--gp-text); font: inherit; font-size: 15px; }
.waitlist input::placeholder { color: var(--gp-text-muted); }
.waitlist input:focus-visible { outline: 2px solid var(--gp-gold); outline-offset: 1px; border-color: transparent; }
.waitlist__msg { margin-top: 16px; font-size: 15px; min-height: 24px; color: var(--gp-text-2); }
.waitlist__msg.is-ok { color: var(--gp-gold-mid); }
.final__alt { margin-top: 20px; font-size: 15px; }
.final__alt a { color: var(--gp-gold); text-underline-offset: 4px; }
@media (max-width: 960px) { .waitlist .btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .tool { transition: none; }
  .hero { height: auto; }
  .hero__stage { position: relative; }
  .hero__hint { display: none; }
  .hero__caps { gap: 20px; }
  .cap { grid-area: auto; opacity: 1 !important; transform: none !important; visibility: visible !important; pointer-events: auto !important; }
  .cap--2, .cap--3 { display: none; }
  .cap--1 h1 { font-family: var(--font-ui); font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; color: var(--gp-text-2); letter-spacing: 0; }
  .cap--1 { order: 2; }
  .cap--4 { order: 1; }
  .phone__body { scroll-behavior: auto; }
}