/* ============================================================
   Gessura — front page v5 «Monochrome premium»
   Strict, airy, hairline-ruled. No pins, no fire.
   ============================================================ */

/* -- 1 · hero ------------------------------------------------ */

.g3-vhero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.g3-vhero-media {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.g3-vhero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);   /* headroom for the scroll drift */
}
/* legibility scrim: darker over the copy, open on the right, settled at the fold */
.g3-vhero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 12, .86) 0%, rgba(10, 10, 12, .55) 38%, rgba(10, 10, 12, .12) 72%, rgba(10, 10, 12, .3) 100%),
    linear-gradient(180deg, rgba(10, 10, 12, .5) 0%, transparent 22%, transparent 72%, rgba(10, 10, 12, .92) 100%);
}

.g3-vhero-copy {
  position: relative;
  z-index: 2;
  padding-inline: clamp(24px, 6vw, 110px) 24px;
  max-width: min(960px, 94vw);
  display: grid;
  gap: 30px;
  justify-items: start;
}
.g3-vhero-copy .g3-h1 {
  font-size: clamp(34px, 5.6vw, 92px);
  text-wrap: balance;
}

.g3-vhero-sub {
  margin: 0;
  max-width: 58ch;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--bone-soft);
}

.g3-vhero-tags {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.g3-vhero-tags i {
  width: 1px;
  height: 14px;
  background: var(--hairline-2);
}

.g3-vhero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 1100px) {
  .g3-vhero-copy {
    max-width: 100%;
    padding-inline: clamp(20px, 5vw, 56px);
  }
}
@media (max-width: 900px) {
  .g3-vhero { min-height: 100svh; align-content: end; padding-block: 110px 60px; }
  .g3-vhero-media::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 12, .55) 0%, rgba(10, 10, 12, .25) 35%, rgba(10, 10, 12, .78) 78%, rgba(10, 10, 12, .96) 100%);
  }
  .g3-vhero-copy .g3-h1 { font-size: clamp(32px, 7.2vw, 54px); }
  .g3-vhero-sub { line-height: 1.75; }
}

/* -- 2 · the floors: full-screen scenes stacking over -------- */

.g3-floors { position: relative; }
.g3-fscene {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  display: grid;
  align-items: end;
  background: var(--coal);
  /* the arriving curtain casts light ahead of itself onto the sinking scene */
  box-shadow: 0 -90px 160px -30px rgba(0, 0, 0, .85);
  will-change: transform, filter;
}
.g3-fscene-media {
  position: absolute;
  inset: 0;
}
.g3-fscene-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
/* scrim: open centre, weighted to the copy side and the fold */
.g3-fscene-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 12, .8) 0%, rgba(10, 10, 12, .38) 40%, rgba(10, 10, 12, .08) 75%),
    linear-gradient(180deg, rgba(10, 10, 12, .42) 0%, transparent 30%, transparent 62%, rgba(10, 10, 12, .8) 100%);
}
.g3-fscene-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 22px;
  justify-items: start;
  padding: 0 clamp(24px, 6vw, 110px) clamp(56px, 7vh, 96px);
  max-width: 980px;
}
.g3-fscene-title {
  font-size: clamp(36px, 4.8vw, 78px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.g3-fscene-lede {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--bone-soft);
  max-width: 46ch;
}
.g3-fscene-specs {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.g3-fscene-specs span {
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-soft);
  padding: 8px 22px 8px 0;
  margin-right: 22px;
  border-right: 1px solid var(--hairline-2);
}
.g3-fscene-specs span:last-child { border-right: 0; margin-right: 0; }
.g3-fscene .g3-btn { margin-top: 8px; }

/* — scene compositions: each floor arranges its type differently — */

/* 01 · baseline poster: the title runs the full width against the fold,
       the lede sits top-right like a printed caption */
.g3-fscene-baseline .g3-fscene-inner {
  max-width: none;
  width: 100%;
  grid-template-columns: 1fr minmax(280px, 420px);
  grid-template-areas:
    'stamp lede'
    'title title'
    'specs cta';
  align-items: end;
  row-gap: clamp(28px, 6vh, 72px);
}
.g3-fscene-baseline .g3-stamp { grid-area: stamp; align-self: start; }
.g3-fscene-baseline .g3-fscene-lede-top {
  grid-area: lede;
  align-self: start;
  justify-self: end;
  text-align: right;
  max-width: 38ch;
}
.g3-fscene-baseline .g3-fscene-title {
  grid-area: title;
  font-size: clamp(44px, 7.4vw, 128px);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: none;
}
.g3-fscene-baseline .g3-fscene-specs { grid-area: specs; margin: 0; }
.g3-fscene-baseline .g3-btn { grid-area: cta; justify-self: end; margin: 0; }

/* 02 · mirrored: the copy column rides the right side, mid-height */
.g3-fscene-right { align-items: center; }
.g3-fscene-right .g3-fscene-inner {
  justify-self: end;
  justify-items: start;
  text-align: left;
  max-width: 620px;
  padding-bottom: 0;
}
.g3-fscene-right .g3-fscene-media::after {
  background:
    linear-gradient(270deg, rgba(10, 10, 12, .82) 0%, rgba(10, 10, 12, .4) 40%, rgba(10, 10, 12, .06) 75%),
    linear-gradient(180deg, rgba(10, 10, 12, .4) 0%, transparent 30%, transparent 66%, rgba(10, 10, 12, .75) 100%);
}

/* 03 · poster centre: everything centred, specs spread along the fold */
.g3-fscene-center { align-items: center; }
.g3-fscene-center .g3-fscene-inner {
  max-width: none;
  width: 100%;
  justify-items: center;
  text-align: center;
  padding-bottom: 0;
}
.g3-fscene-center .g3-fscene-title {
  font-size: clamp(42px, 6.4vw, 110px);
  line-height: 1.04;
}
.g3-fscene-center .g3-fscene-lede { max-width: 52ch; }
.g3-fscene-center .g3-fscene-specs {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(40px, 6vh, 72px);
  justify-content: center;
}
.g3-fscene-center .g3-fscene-media::after {
  background:
    radial-gradient(80% 60% at 50% 55%, rgba(10, 10, 12, .55), rgba(10, 10, 12, .2) 60%, transparent 80%),
    linear-gradient(180deg, rgba(10, 10, 12, .45) 0%, transparent 30%, transparent 62%, rgba(10, 10, 12, .8) 100%);
}

@media (max-width: 900px) {
  .g3-fscene-baseline .g3-fscene-inner {
    grid-template-columns: 1fr;
    grid-template-areas: 'stamp' 'lede' 'title' 'specs' 'cta';
    align-items: end;
  }
  .g3-fscene-baseline .g3-fscene-lede-top { justify-self: start; text-align: left; }
  .g3-fscene-baseline .g3-btn { justify-self: start; }
  .g3-fscene-right .g3-fscene-inner { justify-self: start; }
  .g3-fscene-center .g3-fscene-specs { position: static; justify-content: flex-start; }
}

@media (max-width: 700px) {
  .g3-fscene { min-height: 100svh; }
  .g3-fscene-title { font-size: clamp(30px, 8vw, 44px); }
  .g3-fscene-specs { flex-direction: column; }
  .g3-fscene-specs span { border-right: 0; padding: 6px 0; }
  .g3-fscene-media::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 12, .5) 0%, rgba(10, 10, 12, .3) 40%, rgba(10, 10, 12, .88) 100%);
  }
}

/* -- 3 · the index: no boxes, wide quiet rows ----------------- */

.g3-vindex-rows { border-top: 1px solid var(--hairline); }
.g3-vindex-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 28px;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left var(--t-base) var(--ease);
}
.g3-vindex-row:hover { padding-left: 16px; }
.g3-vindex-name {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 300;
  color: var(--bone);
}
.g3-vindex-val {
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-faint);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .g3-vindex-row { flex-direction: column; gap: 8px; align-items: flex-start; }
  .g3-vindex-val { white-space: normal; text-align: left; }
}

/* -- shared section head ------------------------------------- */

.g3-vhead { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.g3-vhead-row {
  grid-template-columns: 1fr auto;
  align-items: end;
}
@media (max-width: 680px) { .g3-vhead-row { grid-template-columns: 1fr; } }

/* -- 4 · the ledger: giant measured numbers, no boxes --------- */

.g3-vledger-rows { border-top: 1px solid var(--hairline); }
.g3-vledger-row {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(26px, 3.4vw, 48px) 0;
  border-bottom: 1px solid var(--hairline);
}
.g3-vledger-label {
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 300;
  color: var(--bone-soft);
  flex-shrink: 0;
}
.g3-vledger-line {
  flex: 1;
  border-bottom: 1px dashed var(--hairline);
  translate: 0 -6px;
}
.g3-vledger-num {
  font-weight: 200;
  font-size: clamp(40px, 5.6vw, 96px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.g3-vledger-num em {
  font-style: normal;
  font-size: .5em;
  color: var(--bone-faint);
}
@media (max-width: 700px) {
  .g3-vledger-row { flex-direction: column; gap: 10px; align-items: flex-start; }
  .g3-vledger-line { display: none; }
  .g3-vledger-num { font-size: clamp(36px, 11vw, 52px); white-space: normal; }
}

/* -- 5 · price rows, no boxes --------------------------------- */

.g3-vprice-rows { border-top: 1px solid var(--hairline); }
.g3-vprice-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(120px, auto) 40px;
  align-items: baseline;
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.g3-vprice-row:hover { padding-left: 18px; }
.g3-vprice-name {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 300;
  color: var(--bone);
}
.g3-vprice-tokens {
  font-weight: 200;
  font-size: clamp(34px, 4.2vw, 72px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.g3-vprice-tokens em {
  font-style: normal;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.g3-vprice-cost { font-size: 16px; font-weight: 500; color: var(--bone-soft); text-align: right; }
.g3-vprice-row.is-popular .g3-vprice-cost { color: var(--ember); }
.g3-vprice-go { color: var(--bone-faint); font-size: 20px; text-align: right; transition: color var(--t-quick) var(--ease), translate var(--t-base) var(--ease); }
.g3-vprice-row:hover .g3-vprice-go { color: var(--bone); translate: 6px 0; }
.g3-vplan-flag {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--hairline-2);
  border-radius: 4px;
  color: var(--bone);
}
.g3-vplans-note { margin-top: 26px; font-size: 13.5px; color: var(--bone-faint); }
@media (max-width: 760px) {
  .g3-vprice-row { grid-template-columns: 1fr auto; }
  .g3-vprice-cost { text-align: left; }
  .g3-vprice-go { display: none; }
}

/* -- 6 · the ribbon finale ------------------------------------ */

.g3-vfinale {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.g3-vfinale-media {
  position: absolute;
  inset: 0;
}
.g3-vfinale-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);   /* headroom for the slow settle */
}
.g3-vfinale-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 50%, rgba(10, 10, 12, .68), rgba(10, 10, 12, .3) 65%, transparent 85%),
    linear-gradient(180deg, rgba(10, 10, 12, .9) 0%, transparent 26%, transparent 70%, rgba(10, 10, 12, .9) 100%);
}
.g3-vfinale-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 26px;
  justify-items: center;
  text-align: center;
  padding: clamp(90px, 12vh, 150px) 24px;
}
.g3-vfinale-title {
  font-size: clamp(38px, 5.2vw, 88px);
  font-weight: 300;
  line-height: 1.08;
}
.g3-vinvite-note {
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* -- 3a · counter-marquee ------------------------------------- */

.g3-vmarq {
  padding-block: clamp(48px, 7vh, 90px) 0;
  overflow: hidden;
  display: grid;
  gap: 6px;
}
.g3-vmarq-row {
  display: flex;
  white-space: nowrap;
  width: max-content;
  font-weight: 200;
  font-size: clamp(44px, 6.5vw, 110px);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.g3-vmarq-row > span { padding-right: 40px; }
.g3-vmarq-a { color: var(--bone-faint); animation: g3-marq-l 60s linear infinite; }
.g3-vmarq-b {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .14);
  animation: g3-marq-r 75s linear infinite;
}
@keyframes g3-marq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes g3-marq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .g3-vmarq-a, .g3-vmarq-b { animation: none; }
}

/* -- 4 · the line: a prompt typing itself --------------------- */

.g3-vline { padding-block: var(--pad); }
.g3-vline-inner { display: grid; gap: 30px; justify-items: start; }
.g3-vline-field {
  width: 100%;
  border-bottom: 1px solid var(--hairline-2);
  padding-bottom: 22px;
  display: block;
  /* fixed two-line reservation: the typing text may wrap freely
     without ever changing the section's height (no scroll jitter) */
  height: calc(2.5em + 22px);
  overflow: hidden;
  font-weight: 200;
  font-size: clamp(26px, 3.6vw, 60px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--bone);
}
.g3-vline-caret { display: inline-block; }
@media (max-width: 700px) {
  .g3-vline-field { height: calc(3.75em + 18px); padding-bottom: 18px; }
}
.g3-vline-caret {
  width: 2px;
  height: .9em;
  background: var(--ember);
  margin-left: 6px;
  translate: 0 .12em;
  animation: g3-caret 1.1s steps(1) infinite;
}
@keyframes g3-caret { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
.g3-vline-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* -- 5a · faq rows -------------------------------------------- */

.g3-vfaq-item {
  border-bottom: 1px solid var(--hairline);
}
.g3-vfaq-item:first-of-type { border-top: 1px solid var(--hairline); }
.g3-vfaq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: clamp(20px, 2.4vw, 30px) 0;
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 300;
  color: var(--bone);
}
.g3-vfaq-item summary::-webkit-details-marker { display: none; }
.g3-vfaq-item summary i {
  font-style: normal;
  font-weight: 200;
  font-size: 22px;
  color: var(--bone-faint);
  transition: rotate var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.g3-vfaq-item[open] summary i { rotate: 45deg; color: var(--ember); }
.g3-vfaq-item > p {
  margin: 0;
  padding: 0 0 26px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--bone-soft);
}