/* Waypoint site v8 "Clear Road".
   v7's look, normal scrolling. Loaded after v7.css on the home page only.
   Nothing here takes over the scroll: sections fade in, the page moves at your pace. */

/* ------------------------------------------------------------- hero, short
   The hero pin is now 1.5 screens (1.3 on phones), so the camera push uses the
   whole range instead of the first 58%. */
.hero { --hp: min(1, var(--sc-p, 0)); }

.v8-facts {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1.1rem;
  font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.86);
}
.v8-facts li { display: inline-flex; align-items: center; gap: .45rem; }
.v8-facts li::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg);
  background: var(--sun); flex: none;
}
@media (max-width: 560px) { .v8-facts { font-size: .82rem; gap: .3rem .9rem; } }

/* ---------------------------------------------------------- section heads */
.v8-head { max-width: 44rem; }
.v8-head .lead { margin-top: 1rem; max-width: 40ch; }
.v8-head--center { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------- how it works */
.v8-how { padding-block: clamp(4.5rem, 10vw, 7.5rem) clamp(3rem, 7vw, 5rem); scroll-margin-top: var(--bar-h); }
.v8-steps {
  list-style: none; padding: 0; margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem);
}
.v8-step {
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.6vw, 2rem) 0;
  border-radius: var(--radius); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(11,63,55,.45);
  overflow: hidden;
}
.v8-step__n {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--teal-800); color: #fff; font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums;
}
.v8-step:nth-child(2) .v8-step__n { background: var(--sun); color: var(--sun-ink); }
.v8-step:nth-child(3) .v8-step__n { background: var(--green-deep); }
.v8-step h3 { margin-top: 1rem; font-size: clamp(1.3rem, 1rem + .9vw, 1.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.v8-step p { margin-top: .6rem; color: var(--ink-soft); line-height: 1.5; }
/* the phone peeks up from the bottom of each card */
.v8-step__phone { margin-top: auto; display: flex; justify-content: center; height: 330px; overflow: hidden; }
.v8-step__phone .v7-phone { --pw: 250px; box-shadow: inset 0 0 0 1px #3A4A47, 0 20px 40px -20px rgba(11,63,55,.5); }

.v8-pick { background: linear-gradient(180deg, #0A3B33 0%, #156B5B 50%, #3E8E76 75%, #DDBF84 100%); color: #fff; }
.v8-pick .v7-ui__label { color: rgba(255,255,255,.85); }
.v8-pick .apps { gap: 2em .3em; margin: 2em 0 1em; }
.v8-pick .app { color: #fff; font-size: 1.05em; padding: .3em; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.v8-pick .app img { width: 5.4em; height: 5.4em; border-radius: 1.3em; }
.v8-pick .app.is-locked::after { top: -.1em; left: calc(50% + 1.8em); width: 1.7em; height: 1.7em; box-shadow: 0 0 0 .25em #145F52; }
.v8-pick span.app:not(.is-locked) { opacity: .55; }

@media (max-width: 900px) {
  .v8-steps { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; }
  .v8-step { flex-direction: row; align-items: flex-end; gap: 1rem; padding-right: 0; }
  .v8-step__copy { flex: 1 1 auto; padding-bottom: 1.4rem; }
  .v8-step__phone { flex: 0 0 auto; width: 150px; height: 220px; justify-content: flex-start; }
  .v8-step__phone .v7-phone { --pw: 170px; }
}
@media (max-width: 420px) {
  .v8-step__phone { width: 120px; height: 190px; }
  .v8-step__phone .v7-phone { --pw: 140px; }
  .v8-step h3 { font-size: 1.2rem; }
  .v8-step p { font-size: .93rem; }
}

/* ------------------------------------------------------------ try it */
.v8-try { --badge: 0px; --stop-pad: clamp(3rem, 7vw, 5rem); background: var(--paper-2); scroll-margin-top: var(--bar-h); }
.v8-try .v7-stop__obj { padding-top: 0; }
@media (max-width: 900px) {
  .v8-try .v7-stop__grid { padding-left: var(--sc-gutter); }
  .v8-try .v7-stop__obj { justify-content: center; }
}

/* ------------------------------------------------------- screenshots */
.v8-shots { padding-block: clamp(4rem, 9vw, 6.5rem); overflow: hidden; }
.v8-shots__row {
  list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0 var(--sc-gutter) 1rem;
  display: flex; gap: clamp(.9rem, 2vw, 1.4rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.v8-shots__row::-webkit-scrollbar { display: none; }
.v8-shots__row li { flex: 0 0 auto; scroll-snap-align: start; }
.v8-shots__row img {
  display: block; width: clamp(190px, 21vw, 250px); height: auto; border-radius: 22px;
  box-shadow: 0 22px 44px -26px rgba(11,63,55,.55);
}

/* ------------------------------------------------------------- film */
.v8-film { background: var(--teal-900); color: var(--on-dark); padding-block: clamp(4rem, 9vw, 6.5rem); }
.v8-film .v7-kick { color: var(--sun); }
.v8-film .h2 { color: #fff; }
.v8-film__frame {
  margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 980px; border-radius: var(--radius); overflow: hidden;
  background: #0A332D; box-shadow: 0 0 0 1px var(--line-dark), 0 40px 80px -40px rgba(0,0,0,.7);
}
.v8-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------ close */
.v8-get { display: grid; justify-items: center; gap: 1.5rem; }
.v8-qr {
  display: none; align-items: center; gap: 1rem; padding: .9rem 1.2rem .9rem .9rem; border-radius: 18px;
  background: var(--paper); color: var(--ink); text-align: left;
}
.v8-qr img { width: 92px; height: 92px; padding: 8px; background: #fff; border-radius: 10px; }
.v8-qr p { max-width: 15ch; font-size: .92rem; font-weight: 700; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .v8-qr { display: flex; } }

/* ------------------------------------------------------- why waypoint */
.v8-why { padding-block: clamp(4.5rem, 10vw, 7rem); scroll-margin-top: var(--bar-h); }
.v8-teal { font-style: normal; color: var(--teal-700); }
.v8-why .v8-head .lead { margin-inline: auto; }
.v8-cmp { margin: clamp(2.25rem, 5vw, 3.25rem) auto 0; max-width: 980px; overflow-x: auto; }
.v8-cmp table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; }
.v8-cmp th, .v8-cmp td { padding: .95rem 1rem; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line); }
.v8-cmp thead th { padding-block: 1.3rem 1.1rem; font-size: .95rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink-soft); border-bottom: 0; }
.v8-cmp tbody th { text-align: left; font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--ink); width: 40%; }
.v8-cmp tbody tr:last-child th, .v8-cmp tbody tr:last-child td { border-bottom: 0; }
.v8-cmp__key th { font-weight: 800; }
/* the Waypoint column is one tall green card, like the App Store screens */
.v8-cmp .v8-cmp__us { background: var(--teal-800); color: #fff; border-bottom-color: rgba(255,255,255,.12); width: 20%; }
.v8-cmp thead .v8-cmp__us { border-radius: 20px 20px 0 0; color: #fff; font-size: 1.1rem; padding-top: 1.5rem; }
.v8-cmp tbody tr:last-child .v8-cmp__us { border-radius: 0 0 20px 20px; padding-bottom: 1.4rem; }
.v8-cmp__logo { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto .5rem; border-radius: 10px; background: rgba(255,255,255,.12); }
.v8-cmp td { width: 20%; }
.v8-cmp td > * { vertical-align: middle; }
.v8-y, .v8-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.v8-y { background: var(--green); }
.v8-y svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.v8-cmp__us .v8-y { background: var(--sun); }
.v8-cmp__us .v8-y svg { stroke: var(--sun-ink); }
.v8-n { background: transparent; }
.v8-n svg { width: 15px; height: 15px; fill: none; stroke: #C9B9A8; stroke-width: 2.6; stroke-linecap: round; }
.v8-s { display: block; margin-top: .3rem; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.v8-cmp__us .v8-s { color: rgba(255,255,255,.8); }
td > .v8-s:only-child { margin-top: 0; font-size: .85rem; }
.v8-cmp__note { max-width: 980px; margin: 1rem auto 0; text-align: center; color: var(--ink-soft); }

.v8-fail { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; max-width: 820px; margin: clamp(3rem, 7vw, 4.5rem) auto 0; }
.v8-fail__card { padding: 1.6rem 1.6rem 1.5rem; border-radius: var(--radius); }
.v8-fail__card p:last-child { margin-top: .5rem; line-height: 1.45; }
.v8-fail__card--bad { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); }
.v8-fail__card--good { background: var(--teal-800); color: rgba(255,255,255,.88); box-shadow: 0 24px 50px -30px rgba(11,63,55,.7); }
.v8-fail__label { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.v8-fail__card--bad .v8-fail__label { color: var(--coral-deep); }
.v8-fail__card--good .v8-fail__label { color: var(--sun); }
.v8-fail__amt { margin-top: .4rem; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--ink); }
.v8-fail__card--good .v8-fail__amt { color: #fff; }
.v8-fail__vs { font-weight: 800; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 700px) {
  .v8-fail { grid-template-columns: 1fr; }
  .v8-fail__vs { justify-self: center; }
}
@media (max-width: 600px) {
  .v8-cmp { margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter); }
  .v8-cmp th, .v8-cmp td { padding: .8rem .55rem; }
  .v8-cmp tbody th { font-size: .9rem; }
}
.v8-short { display: none; }
@media (max-width: 600px) {
  .v8-long { display: none; }
  .v8-short { display: inline; }
  .v8-cmp { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .v8-cmp table { min-width: 0; table-layout: fixed; }
  .v8-cmp tbody th { width: 43%; font-size: .84rem; padding-left: 0; }
  .v8-cmp th, .v8-cmp td { padding: .75rem .3rem; }
  .v8-cmp thead th { font-size: .78rem; padding-inline: .25rem; }
  .v8-cmp thead .v8-cmp__us { font-size: .9rem; }
  .v8-cmp__logo { width: 30px; height: 30px; }
  .v8-y, .v8-n { width: 22px; height: 22px; }
  .v8-s { font-size: .68rem; }
  td > .v8-s:only-child { font-size: .72rem; }
}
@media (max-width: 600px) {
  .v8-cmp thead td:first-child { width: 40%; }
  .v8-cmp thead th { width: 20%; }
  .v8-cmp thead .v8-cmp__us { font-size: .8rem; letter-spacing: -0.02em; }
}
.v8-flag { display: inline-block; margin-top: .35rem; padding: .2rem .55rem; border-radius: 99px; background: #FFE9B8; color: var(--sun-ink); font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
.v8-cmp__draft th, .v8-cmp__draft td:not(.v8-cmp__us) { background: repeating-linear-gradient(135deg, rgba(255,196,77,.10) 0 10px, transparent 10px 20px); }

/* ------------------------------------------------------ how it works: carousel
   The phones sit on a ring. JS sets --d (position from the front, -2..2) on each
   slide; CSS turns that into the ring. Nothing here touches page scrolling. */
.v8-car { --pw: 280px; margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.v8-car__count { font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.v8-car__count b { color: var(--teal-700); font-size: 1.5rem; }
.v8-car__text { margin-top: .6rem; min-height: 9.5rem; }
.v8-car__text h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.v8-car__text p { margin-top: .75rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }
.v8-car__text.is-swap { animation: v8-text .45s var(--sc-ease-out, ease-out); }
@keyframes v8-text { from { opacity: 0; transform: translateY(8px); } }
.v8-car__steps { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: .25rem; border-left: 2px solid var(--line); }
.v8-car__steps button { display: flex; gap: .8rem; align-items: baseline; width: 100%; text-align: left; padding: .55rem .9rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-soft); font-weight: 700; font-size: .95rem; line-height: 1.3; transition: color .2s, border-color .2s; }
.v8-car__steps button span { font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-soft); opacity: .7; }
.v8-car__steps button:hover { color: var(--ink); }
.v8-car__steps button[aria-current="step"] { color: var(--ink); border-left-color: var(--sun); }
.v8-car__steps button[aria-current="step"] span { color: var(--teal-700); opacity: 1; }

.v8-car__stage { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.v8-car__ring { list-style: none; margin: 0; padding: 0; position: relative; height: calc(var(--pw) * 2.05 + 1.5rem); perspective: 1600px; perspective-origin: 50% 40%; }
.v8-car__slide {
  --d: 0; --ad: 0;
  position: absolute; left: 50%; top: 0; margin-left: calc(var(--pw) / -2);
  transform-style: preserve-3d;
  transform: translateX(calc(var(--d) * 58%)) translateZ(calc(var(--ad) * -300px)) rotateY(calc(var(--d) * -34deg));
  opacity: calc(1 - var(--ad) * .32);
  filter: brightness(calc(1 - var(--ad) * .08)) saturate(calc(1 - var(--ad) * .25));
  z-index: calc(10 - var(--ad));
  transition: transform .75s cubic-bezier(.22,.61,.36,1), opacity .6s ease, filter .6s ease;
}
.v8-car__slide.is-far { opacity: 0; pointer-events: none; }
.v8-car__slide .v7-phone { --pw: inherit; }
.v8-car__slide:not(.is-front) .v7-phone { box-shadow: inset 0 0 0 1px #3A4A47, 0 30px 50px -30px rgba(11,63,55,.45); }
.v8-car__hit { position: absolute; inset: 0; z-index: 20; display: none; cursor: pointer; border-radius: 3em; }
.v8-car__slide:not(.is-front) .v8-car__hit { display: block; }
.v8-car__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .25rem; }
.v8-car__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -10px rgba(11,63,55,.5); color: var(--ink); transition: transform .15s; }
.v8-car__btn:active { transform: scale(.94); }
.v8-car__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.v8-car__btn--sun { background: var(--sun); color: var(--sun-ink); box-shadow: 0 8px 18px -10px rgba(224,160,42,.9); }
.v8-car__dots { display: flex; gap: .45rem; }
.v8-car__dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .3s, background .3s; }
.v8-car__dots i.is-on { width: 24px; background: var(--teal-700); }
.v8-car__stage.is-dragging .v8-car__slide { transition: none; }

/* the question screen */
.v8-q { padding: 5.4em 1.7em 2em; gap: 1.1em; }
.v8-q__top { display: flex; justify-content: space-between; align-items: center; }
.v8-q__tag { font-size: 1em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-700); background: rgba(21,122,107,.1); padding: .35em .7em; border-radius: 99px; }
.v8-q__count { font-size: 1.05em; font-weight: 800; color: #5F6D68; }
.v8-q__bar { display: block; height: .55em; border-radius: 99px; background: #E6E0D2; overflow: hidden; }
.v8-q__bar i { display: block; width: 33%; height: 100%; background: var(--sun); border-radius: 99px; }
.v8-q__q { font-size: 1.6em; font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; }
.v8-q__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }
.v8-q__opts li { position: relative; display: flex; align-items: center; gap: .8em; padding: .95em 1em; border-radius: 1.2em; background: var(--card); box-shadow: inset 0 0 0 1px #E3DDD0; font-size: 1.15em; font-weight: 600; line-height: 1.25; }
.v8-q__opts li b { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #EFEAE0; font-size: .85em; color: #5F6D68; }
.v8-q__opts li.ok { background: #E4F4EC; box-shadow: inset 0 0 0 2px var(--green); }
.v8-q__opts li.ok b { background: var(--green); color: #fff; }
.v8-q__tick { margin-left: auto; flex: none; display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--green); }
.v8-q__tick svg { width: 1.1em; height: 1.1em; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.v8-q__why { margin-top: auto; padding: 1em 1.1em; border-radius: 1.2em; background: #E4F4EC; color: #1E6B4B; font-size: 1.1em; font-weight: 600; line-height: 1.35; }

@media (max-width: 900px) {
  .v8-car { --pw: 240px; grid-template-columns: minmax(0, 1fr); }
  .v8-car__stage { order: -1; }
  .v8-car__steps { display: none; }
  .v8-car__text { min-height: 8rem; text-align: center; }
  .v8-car__text p { margin-inline: auto; }
  .v8-car__count { text-align: center; }
  .v8-car__slide { transform: translateX(calc(var(--d) * 52%)) translateZ(calc(var(--ad) * -340px)) rotateY(calc(var(--d) * -38deg)); }
}
@media (max-width: 420px) { .v8-car { --pw: 210px; } }
@media (prefers-reduced-motion: reduce) {
  .v8-car__slide { transition: opacity .2s; }
  .v8-car__text.is-swap { animation: none; }
}
/* carousel fixes: plain buttons, wider ring */
.v8-car__copy button, .v8-car__nav button, .v8-car__hit, .v8-trybtn, .v8-q__opts button { font: inherit; border: 0; background: none; -webkit-appearance: none; appearance: none; }
.v8-car__hit { background: transparent !important; padding: 0; }
.v8-car__btn { background: var(--card) !important; }
.v8-car__btn--sun { background: var(--sun) !important; }
.v8-car__slide { transform: translateX(calc(var(--d) * 74%)) translateZ(calc(var(--ad) * -320px)) rotateY(calc(var(--d) * -30deg)) scale(calc(1 - var(--ad) * .06)); }
@media (max-width: 900px) {
  .v8-car__slide { transform: translateX(calc(var(--d) * 62%)) translateZ(calc(var(--ad) * -360px)) rotateY(calc(var(--d) * -36deg)); }
}
.v8-how { overflow-x: clip; }

/* ---------------------------------------------- how it works: dark, Apple-like
   Near-black stage, white type, a soft spotlight behind the front phone, and
   side phones that sink into the dark (dimmed, not see-through). */
.v8-how--dark {
  --ink: #F5F5F7; --ink-soft: #A1A1A6; --line: rgba(255,255,255,.12); --card: #1C1C1E;
  background: #000;
  color: var(--ink);
  padding-block: clamp(5rem, 12vw, 8.5rem);
}
.v8-how--dark .v7-kick { color: var(--sun); }
.v8-how--dark .h2 { color: #F5F5F7; }
.v8-how--dark .v8-head .lead { color: #A1A1A6; }
.v8-how--dark .v8-car__count b { color: #F5F5F7; }
.v8-how--dark .v8-car__steps { border-left-color: rgba(255,255,255,.14); }
.v8-how--dark .v8-car__steps button { color: #86868B; }
.v8-how--dark .v8-car__steps button:hover,
.v8-how--dark .v8-car__steps button[aria-current="step"] { color: #F5F5F7; }
.v8-how--dark .v8-car__steps button[aria-current="step"] span { color: var(--sun); }

/* the phones: titanium edge, no washed-out ghosts */
.v8-how--dark .v8-car__slide { opacity: 1; filter: brightness(calc(1 - var(--ad) * .42)); }
.v8-how--dark .v8-car__slide.is-far { opacity: 0; }
.v8-how--dark .v8-car__slide .v7-phone,
.v8-how--dark .v8-car__slide:not(.is-front) .v7-phone {
  background: linear-gradient(145deg, #4A4D52 0%, #1D1F22 22%, #0E0F11 60%, #3A3D41 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 .35em #0B0C0D, 0 50px 90px -40px rgba(0,0,0,.9);
}
.v8-how--dark .v8-car__slide.is-front .v7-phone {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 .35em #0B0C0D, 0 60px 120px -40px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.04);
}
/* soft spotlight + floor reflection */
.v8-car__glow { position: absolute; left: 50%; top: 42%; width: calc(var(--pw) * 2.6); height: calc(var(--pw) * 2.6); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(21,122,107,.55), rgba(15,90,78,.18) 55%, transparent 75%); filter: blur(10px); pointer-events: none; display: none; }
.v8-how--dark .v8-car__glow { display: block; }
.v8-how--dark .v8-car__ring::after { content: ""; position: absolute; left: 50%; bottom: .2rem; width: calc(var(--pw) * 1.3); height: 26px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,196,77,.18), transparent); pointer-events: none; }

/* controls in glass */
.v8-how--dark .v8-car__btn { background: rgba(255,255,255,.08) !important; color: #F5F5F7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.v8-how--dark .v8-car__btn--sun { background: var(--sun) !important; color: var(--sun-ink); box-shadow: 0 10px 24px -10px rgba(255,196,77,.6); }
.v8-how--dark .v8-car__dots i { background: rgba(255,255,255,.22); }
.v8-how--dark .v8-car__dots i.is-on { background: #F5F5F7; }
/* the phone screens keep the app's own light colours */
.v8-how--dark .v7-phone__screen { --ink: #1C2A28; --ink-soft: #55635E; --card: #FFFFFF; --line: rgba(28,42,40,.12); color: #1C2A28; }

/* road-sign question, tappable */
.v8-q__sign { display: block; width: 9em; height: 9em; margin: .2em auto .4em; filter: drop-shadow(0 .5em .8em rgba(0,0,0,.18)); }
.v8-q__opts { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.v8-q__opts button { position: relative; display: flex; align-items: center; gap: .6em; padding: .9em .8em; border-radius: 1.1em; background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #E3DDD0; font-size: 1.05em; font-weight: 700; line-height: 1.2; color: #1C2A28; text-align: left; cursor: pointer; transition: box-shadow .2s, background-color .2s, transform .15s; }
.v8-q__opts button:active { transform: scale(.97); }
.v8-q__opts button b { flex: none; display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: #EFEAE0; font-size: .85em; color: #5F6D68; }
.v8-q__opts button.is-ok { background: #E4F4EC !important; box-shadow: inset 0 0 0 2px #2FA876; }
.v8-q__opts button.is-ok b { background: #2FA876; color: #fff; }
.v8-q__opts button.is-bad { background: #FCE8E6 !important; box-shadow: inset 0 0 0 2px #D9483A; }
.v8-q__opts button.is-bad b { background: #D9483A; color: #fff; }
.v8-q__opts.is-done button:not(.is-ok):not(.is-bad) { opacity: .55; }
.v8-q__why { background: #EFEAE0; color: #55635E; text-align: center; }
.v8-q__why.is-ok { background: #E4F4EC; color: #1E6B4B; text-align: left; }
.v8-q__why.is-bad { background: #FCE8E6; color: #9E2F24; text-align: left; }
.v8-car__slide:not(.is-front) .v8-q__opts button { pointer-events: none; }
/* unlock: second choice */
.v8-appbtn--ghost { margin-top: .7em; background: transparent; color: #0F5A4E; box-shadow: inset 0 0 0 2px rgba(15,90,78,.35); }

/* ------------------------------------------------- try it yourself (in the carousel) */
.v8-car__tryrow { display: flex; justify-content: center; margin-top: 1.1rem; }
.v8-trybtn { display: inline-flex; align-items: center; gap: .55rem; min-height: 50px; padding: 0 1.4rem; border-radius: 99px; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em;
  background: rgba(255,255,255,.1) !important; color: #F5F5F7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: transform .15s, background-color .2s; }
.v8-trybtn:hover { background: rgba(255,255,255,.16) !important; }
.v8-trybtn:active { transform: scale(.97); }
.v8-trybtn span:first-child { font-size: 1.15rem; }

.v8-try { position: absolute; left: 50%; top: 0; z-index: 30; translate: -50% 0; opacity: 0; transform: scale(.92); pointer-events: none; transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.v8-try .v7-phone { --pw: inherit; }
.v8-car__ring { transition: opacity .45s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.v8-car.is-trying .v8-car__ring { opacity: 0; transform: scale(.9); pointer-events: none; }
.v8-car.is-trying .v8-try { opacity: 1; transform: none; pointer-events: auto; }
.v8-car.is-trying .v8-car__nav { visibility: hidden; }
.v8-car.is-trying .v8-car__glow { background: radial-gradient(closest-side, rgba(255,196,77,.28), rgba(15,90,78,.2) 55%, transparent 75%); }

/* left column swaps to the try copy */
.v8-car__trycopy { display: none; }
.v8-car.is-trying .v8-car__trycopy { display: block; animation: v8-text .45s ease-out; }
.v8-car.is-trying .v8-car__count:not(.v8-car__trycopy .v8-car__count),
.v8-car.is-trying .v8-car__text,
.v8-car.is-trying .v8-car__steps { display: none; }
.v8-car__trycopy .v8-car__count b { color: var(--sun) !important; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; }
.v8-car__trycopy h3 { margin-top: .6rem; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.v8-car__trycopy p:not(.v8-car__count) { margin-top: .75rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }
.v8-seg { display: inline-grid; grid-template-columns: auto auto; margin-top: 1.4rem; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.v8-seg button { min-height: 44px; padding: 0 1.3rem; border-radius: 10px; font-weight: 800; color: #A1A1A6; cursor: pointer; }
.v8-seg button[aria-checked="true"] { background: #F5F5F7 !important; color: #0B3F37; }

/* the pointing hand on the phone's home screen */
.v8-hand { position: absolute; z-index: 5; top: 16.2em; left: 3.6em; display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: v8-tap 1.4s ease-in-out infinite; }
.v8-hand__icon { font-size: 4em; line-height: 1; filter: drop-shadow(0 .15em .3em rgba(0,0,0,.35)); }
.v8-hand em { margin-top: .3em; padding: .35em .8em; border-radius: 99px; background: #FFC44D; color: #3A2A00; font-style: normal; font-weight: 800; font-size: 1.15em; white-space: nowrap; box-shadow: 0 .4em 1em rgba(0,0,0,.25); }
@keyframes v8-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.9em); } }

@media (max-width: 900px) {
  .v8-car.is-trying .v8-car__trycopy { text-align: center; }
  .v8-car__trycopy p:not(.v8-car__count) { margin-inline: auto; }
  .v8-car.is-trying .v8-car__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .v8-hand { animation: none; } }
/* try mode: same titanium phone, no paper box behind it */
.v8-try { background: transparent; }
.v8-try .v7-phone { background: linear-gradient(145deg, #4A4D52 0%, #1D1F22 22%, #0E0F11 60%, #3A3D41 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 .35em #0B0C0D, 0 60px 120px -40px rgba(0,0,0,1) !important; }
.v8-try .v7-phone__screen { --paper: #F4F1EA; }
@media (max-width: 900px) { .v8-car.is-trying .v8-car__copy { order: -2; } }

/* Try button: big, sun-yellow, right under the step text */
.v8-car__copy { display: flex; flex-direction: column; }
.v8-car__trycopy { order: 0; }
.v8-car__tryrow { order: 1; display: grid; justify-items: start; gap: .5rem; margin-top: 1.4rem; }
.v8-car__steps { order: 2; }
.v8-trybtn { position: relative; min-height: 58px; padding: 0 1.6rem 0 1.25rem; font-size: 1.08rem; gap: .6rem;
  background: var(--sun) !important; color: var(--sun-ink) !important; box-shadow: 0 14px 30px -12px rgba(255,196,77,.75) !important; }
.v8-trybtn:hover { background: #FFD070 !important; }
.v8-trybtn__icon { font-size: 1.35rem; display: inline-block; animation: v8-point 1.6s ease-in-out infinite; }
@keyframes v8-point { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }
.v8-trybtn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255,196,77,.55); animation: v8-pulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes v8-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,196,77,.5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255,196,77,0); } }
.v8-trybtn__note { font-size: .85rem; color: var(--ink-soft); padding-left: .4rem; }
/* in try mode it becomes a quiet glass "back" button */
.v8-car.is-trying .v8-trybtn { background: rgba(255,255,255,.1) !important; color: #F5F5F7 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) !important; min-height: 50px; font-size: 1rem; }
.v8-car.is-trying .v8-trybtn::after, .v8-car.is-trying .v8-trybtn__icon { animation: none; }
.v8-car.is-trying .v8-trybtn__note { display: none; }
@media (max-width: 900px) {
  .v8-car__tryrow { justify-items: center; }
  .v8-trybtn__note { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .v8-trybtn::after, .v8-trybtn__icon { animation: none; } }
.v8-car .v8-trybtn { font-weight: 800; letter-spacing: -0.01em; }
/* Try button: end of the left column, below the step list */
.v8-car__steps { order: 1; }
.v8-car__tryrow { order: 2; margin-top: 2rem; }
.v8-car .v8-trybtn { min-height: 52px; padding: 0 1.4rem 0 1.1rem; font-size: 1rem; }
.v8-trybtn::after { animation-duration: 3.2s; }
.v8-car.is-trying .v8-car__tryrow { margin-top: 1.6rem; }
.v8-car__tryrow { justify-content: start; }
@media (max-width: 900px) { .v8-car__tryrow { justify-content: center; } }

/* step 6: the live phone on the ring */
.v8-car.is-live .v8-car__count:not(.v8-car__trycopy .v8-car__count),
.v8-car.is-live .v8-car__text { display: none; }
.v8-car.is-live .v8-car__trycopy { display: block; animation: v8-text .45s ease-out; }
.v8-car__trycopy .v8-car__count { font-weight: 800; color: var(--ink-soft); }
.v8-car__trycopy .v8-car__count b { color: #F5F5F7 !important; font-size: 1.5rem !important; letter-spacing: 0 !important; text-transform: none !important; }
.v8-car__slide--live:not(.is-front) .v7-phone__screen { pointer-events: none; }
.v8-car__slide--live .v7-phone { background: linear-gradient(145deg, #4A4D52 0%, #1D1F22 22%, #0E0F11 60%, #3A3D41 100%) !important; }
.v8-car.is-live .v8-car__glow { background: radial-gradient(closest-side, rgba(255,196,77,.28), rgba(15,90,78,.2) 55%, transparent 75%); }
/* on step 5 the next arrow glows: there's one more, and it's live */
.v8-car__btn.is-hint { animation: v8-hint 1.8s ease-out infinite; }
@keyframes v8-hint { 0% { box-shadow: 0 0 0 0 rgba(255,196,77,.6); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255,196,77,0); } }
.v8-car__steps li:last-child button span { color: var(--sun); opacity: 1; }
@media (max-width: 900px) { .v8-car.is-live .v8-car__trycopy { text-align: center; } }
@media (prefers-reduced-motion: reduce) { .v8-car__btn.is-hint { animation: none; } }

/* format switch: sits right under step 06, only while step 6 is in front */
.v8-car__fmt { order: 3; display: none; margin: .6rem 0 0 1rem; }
.v8-car.is-live .v8-car__fmt { display: block; animation: v8-text .45s ease-out; }
.v8-car__fmt p { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sun); }
.v8-car__fmt .v8-seg { margin-top: .5rem; }
@media (max-width: 900px) { .v8-car__fmt { margin: 1rem auto 0; text-align: center; } }

/* wrong answer: the phone shakes */
.v7-phone.is-shake { animation: v8-shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes v8-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px) rotate(-1deg); }
  40%, 60% { transform: translateX(7px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) { .v7-phone.is-shake { animation: none; } }
/* in the live question: wrong stays red, the right answer glows until tapped */
.v8-car__slide--live .opt.is-right:not(:disabled) { animation: v8-glowok 1.4s ease-in-out infinite; }
@keyframes v8-glowok { 50% { box-shadow: inset 0 0 0 2px #2FA876, 0 0 0 4px rgba(47,168,118,.25); } }

/* ------------------------------------------------ film, right under the hero (black, runs into the carousel) */
.v8-film { background: #000; padding-block: clamp(4.5rem, 10vw, 7rem) clamp(1rem, 3vw, 2rem); }
.v8-film .h2 { color: #F5F5F7; }
.v8-film__frame { position: relative; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 100px -50px rgba(21,122,107,.6); background: #0A332D; }
.v8-film__frame video { cursor: pointer; }
.v8-film__play { position: absolute; left: 50%; bottom: clamp(1rem, 4vw, 2rem); translate: -50% 0; display: inline-flex; align-items: center; gap: .7rem;
  min-height: 56px; padding: 0 1.5rem 0 .6rem; border: 0; border-radius: 99px; font: inherit; font-weight: 800; font-size: 1.05rem; color: #fff; cursor: pointer;
  background: rgba(10,20,18,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 16px 40px -16px rgba(0,0,0,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .15s, background-color .2s; }
.v8-film__play:hover { background: rgba(10,20,18,.7); }
.v8-film__play:active { transform: scale(.97); }
.v8-film__play em { font-style: normal; font-weight: 600; color: rgba(255,255,255,.7); }
.v8-film__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sun); }
.v8-film__icon svg { width: 18px; height: 18px; fill: #3A2A00; margin-left: 2px; }
.v8-film.is-playing .v8-film__play { opacity: 0; pointer-events: none; }
.v8-film + .v8-how--dark { padding-top: clamp(3rem, 7vw, 5rem); }
/* the 👆 hint only shows once the live phone is in front */
.v8-car__slide--live:not(.is-front) .v8-hand { display: none; }
.v8-car__slide--live .opt.is-right:not(:disabled) { animation: none; }
.v8-car__btn:disabled { opacity: .3; cursor: default; box-shadow: none !important; animation: none; }

/* "Your turn." moment when step 6 arrives: in, hold, out over ~4s */
.v8-yourturn { position: absolute; inset: 0 0 64px; z-index: 40; display: grid; place-items: center; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(0,0,0,.72), rgba(0,0,0,.35) 60%, transparent 85%); }
.v8-yourturn p { display: grid; justify-items: center; gap: .6rem; text-align: center; }
.v8-yourturn span { font-size: clamp(3rem, 2rem + 4.5vw, 5.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: .95; color: #fff; text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.v8-yourturn em { font-style: normal; font-weight: 800; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: #3A2A00; background: var(--sun); padding: .45rem .9rem; border-radius: 99px; }
.v8-yourturn.is-show { animation: v8-yourturn 4s ease forwards; }
@keyframes v8-yourturn {
  0%   { opacity: 0; transform: scale(.94); }
  15%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes v8-yourturn { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}
.v8-hand { transition: opacity .4s ease; } .v8-car.is-intro .v8-hand { opacity: 0; }
.v8-yourturn.is-show { animation-duration: 2s; }
.v8-yourturn.is-show { animation-duration: 1s; } .v8-hand { transition: opacity .15s ease; }

/* Questions / Swipe now floats on the live phone, after "Your turn." */
.v8-car__stage > .v8-car__fmt { position: absolute; z-index: 35; left: 50%; top: calc(var(--pw) * .2); translate: -50% 0; margin: 0; display: block;
  opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.v8-car.is-live:not(.is-intro) .v8-car__stage > .v8-car__fmt { opacity: 1; pointer-events: auto; transform: none; animation: none; }
.v8-car__stage > .v8-car__fmt .v8-seg { margin: 0; background: rgba(8,22,19,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 30px -10px rgba(0,0,0,.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.v8-car__stage > .v8-car__fmt .v8-seg button { min-height: 38px; padding: 0 1rem; font-size: .9rem; }
/* push the phone's home content down a touch so the pill doesn't cover it */
.v8-car__slide--live .v7-live .v7-home { padding-top: 8em; }
.v8-seg button { font: inherit; font-weight: 800; border: 0; background: none; -webkit-appearance: none; appearance: none; color: #B9BDC1; cursor: pointer; border-radius: 10px; }
.v8-car__stage > .v8-car__fmt .v8-seg button { font-size: .88rem; min-height: 36px; padding: 0 .95rem; }
.v8-car__stage > .v8-car__fmt .v8-seg button[aria-checked="true"] { background: #F5F5F7 !important; color: #0B3F37; }
@media (max-width: 900px) {
  .v8-car__stage > .v8-car__fmt .v8-seg button { font-size: .8rem; min-height: 32px; padding: 0 .8rem; }
}

/* Pit Stop style switch, built into the phone screen like an iOS setting */
.v8-car__slide--live .v7-live .v7-home { padding-top: 5.4em; }
.v8-style { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-top: 1.1em; padding: .55em .55em .55em 1em; border-radius: 1.2em; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.v8-style > span { font-size: 1.05em; font-weight: 800; color: rgba(255,255,255,.88); }
.v8-seg--ios { margin: 0 !important; padding: .25em !important; border-radius: .9em !important; background: rgba(0,0,0,.25) !important; box-shadow: none !important; }
.v8-seg--ios button { min-height: 0 !important; padding: .45em .9em !important; font-size: 1.05em !important; border-radius: .7em !important; color: rgba(255,255,255,.75) !important; }
.v8-seg--ios button[aria-checked="true"] { background: #fff !important; color: #0B3F37 !important; box-shadow: 0 .15em .4em rgba(0,0,0,.25); }
.v8-car__slide--live:not(.is-front) .v8-style { pointer-events: none; }
/* the hand now lives on the Instagram icon itself */
.v7-live .app { position: relative; }
.v8-hand { top: 62%; left: 50%; translate: -50% 0; font-size: 1em; }
.v8-hand__icon { font-size: 3.4em; }

/* still hero: the dawn road as a plain picture, no pin or scroll animation */
.hero--still { --hp: 0 !important; }
.hero--still .hero__stage { position: relative; height: 100svh; min-height: 620px; max-height: 940px; overflow: hidden; }
.hero--still .hero__sun, .hero--still .hero__far, .hero--still .hero__ground, .hero--still .hero__near, .hero--still .hero__fore, .hero--still .hero__title { transform: none !important; }
.hero--still .hero__head, .hero--still .hero__foot { opacity: 1 !important; }
.v8-film__play { white-space: nowrap; } @media (max-width: 560px) { .v8-film__play { min-height: 46px; font-size: .92rem; padding: 0 1.1rem 0 .45rem; } .v8-film__icon { width: 34px; height: 34px; } }

/* ======================================================== HERO (attempt 9)
   Green App Store look, text left, three floating 3D iPhones right. */
.h9 { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(90% 70% at 85% 0%, rgba(255,255,255,.1), transparent 60%), linear-gradient(180deg, #17705E, #0D5348);
  padding-top: calc(var(--bar-h) + clamp(1.5rem, 4vw, 3rem)); }
.h9__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1rem; align-items: center; }
.h9__copy { min-width: 0; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.h9__pill { display: inline-flex; padding: .4rem .8rem; border-radius: 99px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); }
.h9__title { margin-top: 1rem; font-size: clamp(2.8rem, 1.6rem + 4.6vw, 5.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; text-wrap: balance; }
.h9__title span, .h9__title em { display: block; }
.h9__title em { font-style: normal; color: var(--sun); }
.h9__sub { margin-top: 1.2rem; max-width: 30rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); line-height: 1.5; color: rgba(255,255,255,.88); }
.h9__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.4rem; margin-top: 1.7rem; }
.h9__film { color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; opacity: .92; }
.h9__film span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.14); color: var(--sun); font-size: .7rem; }
.h9__film:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.h9__facts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.9); }
.h9__facts li { display: inline-flex; align-items: center; gap: .45rem; }
.h9__facts li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--sun); }
.h9__ast { color: var(--sun); font-weight: 800; text-decoration: none; margin-left: 1px; }

/* the 3D phones */
.trio { --w: 250px; position: relative; height: calc(var(--w) * 2.3); perspective: 1800px; perspective-origin: 50% 35%; }
.trio__floor { position: absolute; left: 50%; bottom: 3%; width: calc(var(--w) * 2.6); height: 44px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); filter: blur(6px); }
.ip { position: absolute; top: 4%; left: 50%; width: var(--w); aspect-ratio: 1 / 2.06; margin-left: calc(var(--w) / -2); transform-style: preserve-3d; }
.ip__body { position: relative; width: 100%; height: 100%; border-radius: 15% / 7.3%; padding: 3.4%;
  background: linear-gradient(135deg, #CFE6DF 0%, #6E9C91 14%, #2D5A51 34%, #1A3D36 52%, #4F8275 74%, #BFDDD4 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), inset 0 0 0 4px rgba(0,0,0,.35), 0 50px 70px -40px rgba(0,0,0,.75); }
.ip__glass { position: relative; width: 100%; height: 100%; border-radius: 12.4% / 5.9%; overflow: hidden; background: #000; box-shadow: 0 0 0 3px #050606; }
.ip__glass img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ip__island { position: absolute; top: 2.1%; left: 50%; width: 31%; height: 3.6%; translate: -50% 0; border-radius: 99px; background: #050606; }
.ip__glare { position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 28%, rgba(255,255,255,0) 42%); pointer-events: none; }
.ip__btn { position: absolute; width: 1.4%; border-radius: 2px; background: linear-gradient(90deg, #1A3D36, #6E9C91); }
.ip__btn--a { left: -1.1%; top: 16%; height: 4%; } .ip__btn--b { left: -1.1%; top: 23%; height: 8%; } .ip__btn--c { left: -1.1%; top: 33%; height: 8%; }
.ip__btn--p { right: -1.1%; top: 26%; height: 12%; background: linear-gradient(270deg, #1A3D36, #6E9C91); }
.ip--c { z-index: 3; }
.ip--l { z-index: 2; transform: translateX(calc(var(--w) * -.72)) translateZ(-140px) rotateY(24deg) rotateZ(-3deg); }
.ip--r { z-index: 2; transform: translateX(calc(var(--w) * .72)) translateZ(-140px) rotateY(-24deg) rotateZ(3deg); }
.ip--l .ip__body { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3), inset 0 0 0 4px rgba(0,0,0,.35), 1px 0 0 #3d6b61, 2px 0 0 #36625a, 3px 0 0 #2f5a52, 4px 0 0 #29524b, 5px 0 0 #234a43, 6px 0 0 #1d423c, 0 50px 70px -40px rgba(0,0,0,.75); }
.ip--r .ip__body { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3), inset 0 0 0 4px rgba(0,0,0,.35), -1px 0 0 #3d6b61, -2px 0 0 #36625a, -3px 0 0 #2f5a52, -4px 0 0 #29524b, -5px 0 0 #234a43, -6px 0 0 #1d423c, 0 50px 70px -40px rgba(0,0,0,.75); filter: brightness(.86); }
.ip.is-lift .ip__glass img { filter: brightness(1.45) contrast(.95); }
@media (prefers-reduced-motion: no-preference) {
  .ip { animation: ip-float 6s ease-in-out infinite; }
  .ip--l, .ip--r { animation-delay: -3s; }
}
@keyframes ip-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (max-width: 860px) {
  .h9__grid { grid-template-columns: 1fr; }
  .h9__copy { padding-bottom: 0; }
  .trio { --w: 190px; margin-inline: calc(var(--sc-gutter) * -1); overflow: hidden; }
}
@media (max-width: 420px) { .trio { --w: 165px; } }
.h9__title span, .h9__title em { display: inline; }
.h9__title > span, .h9__title > em { display: block; }
.h9__title { font-size: clamp(2.8rem, 1.5rem + 4vw, 4.6rem); }
.h9__ast { margin-left: -.3rem; align-self: flex-start; }
@media (min-width: 900px) { .h9__title { font-size: clamp(2.8rem, 1rem + 3.6vw, 4.3rem); } .h9__title > span, .h9__title > em { white-space: nowrap; } }
@media (min-width: 900px) and (max-width: 1240px) { .trio { --w: 200px; } }

/* ===================================================== 18 Oct round 2
   Hero fills the screen, film on green and bigger, Try a Pit Stop,
   comparison: only Waypoint gets coloured ticks, fits one screen. */

/* hero: a full screen, bigger phones and type */
.h9 { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.h9 > .sc-wrap { width: 100%; }
@media (min-width: 1241px) {
  .h9 .sc-wrap { max-width: 92rem; }
  .h9__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem; }
  .h9__copy { padding-bottom: 0; }
  .h9__title { font-size: clamp(4.3rem, 1rem + 4vw, 5.6rem); }
  .h9__sub { font-size: 1.3rem; max-width: 33rem; }
  .h9__facts { font-size: 1rem; }
  .trio { --w: min(21vw, calc((100svh - 200px) / 2.3), 330px); }
}

/* film: green, and bigger */
.v8-film { background: radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,.08), transparent 70%), linear-gradient(180deg, #0F5A4E, #0B4A40); padding-block: clamp(3.5rem, 7vw, 5rem); }
.v8-film__frame { max-width: min(1240px, 100%); margin-top: clamp(1.5rem, 3.5vw, 2.25rem); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 50px 100px -40px rgba(0,0,0,.6); }

/* try a pit stop */
.v8-pit { background: #000; color: #F5F5F7; padding-block: clamp(4rem, 9vw, 6.5rem); scroll-margin-top: var(--bar-h); overflow-x: clip; }
.v8-pit .v7-kick { color: var(--sun); }
.v8-pit .h2 { color: #F5F5F7; }
.v8-pit .lead { color: rgba(245,245,247,.75); max-width: 30rem; }
.v8-pit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 68rem; }
.v8-pit__copy { min-width: 0; }
.v8-pit__steps { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .8rem; }
.v8-pit__steps li { display: flex; align-items: center; gap: .85rem; font-size: 1.05rem; font-weight: 700; color: #F5F5F7; }
.v8-pit__steps b { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sun); color: #3A2A00; font-size: .9rem; font-weight: 800; }
.v8-pit__fmt { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 2rem; }
.v8-pit__fmt > span { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(245,245,247,.6); }
.v8-pit .wp-simformat { margin: 0; }
.v8-pit__foot { margin-top: 1.6rem; max-width: 30rem; color: rgba(245,245,247,.5); }
.v8-pit__phone { display: grid; justify-items: center; }
.v8-pit .wp-sim { box-shadow: 0 0 0 9px #1B1D1E, 0 0 0 10px #3A3D3F, 0 60px 120px -40px rgba(21,122,107,.55); border-color: transparent; border-radius: 40px; }
.v8-pit .wp-sim.is-shake { animation: v8-shake .5s cubic-bezier(.36,.07,.19,.97); }
.v8-pit .wp-ss__card.is-miss { box-shadow: 0 0 0 2px var(--wp-coral); }
.v8-pit .wp-ss__card.is-miss .wp-ss__label { color: var(--wp-coral-deep); }
@media (prefers-reduced-motion: reduce) { .v8-pit .wp-sim.is-shake { animation: none; } }
@media (max-width: 860px) {
  .v8-pit__grid { grid-template-columns: 1fr; }
  .v8-pit__foot { order: 3; }
}

/* comparison: only Waypoint's ticks are coloured, so it reads strongest */
.v8-cmp td:not(.v8-cmp__us) .v8-y { background: transparent; width: 22px; height: 22px; }
.v8-cmp td:not(.v8-cmp__us) .v8-y svg { stroke: #A3ADA9; stroke-width: 2.4; }
.v8-cmp td:not(.v8-cmp__us) .v8-s { color: #8A9591; font-weight: 600; }
.v8-cmp td:not(.v8-cmp__us) .v8-n svg { stroke: #D3CBC1; }
.v8-cmp thead th:not(.v8-cmp__us) { color: #8A9591; font-weight: 700; }
.v8-cmp__us .v8-y { width: 30px; height: 30px; box-shadow: 0 6px 16px -6px rgba(255,196,77,.8); }
.v8-cmp__us .v8-y svg { width: 17px; height: 17px; stroke-width: 3.4; }

/* comparison: two columns so the whole thing fits on one screen */
.v8-why { padding-block: clamp(3.5rem, 7vw, 4.5rem); }
@media (min-width: 1100px) {
  .v8-why__grid { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
  .v8-why .v8-head .h2 { font-size: clamp(2rem, 1rem + 1.6vw, 2.6rem); }
  .v8-why .v8-head .lead { margin-inline: 0; font-size: 1.02rem; }
  .v8-why .v8-fail { grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.8rem 0 0; max-width: none; }
  .v8-why .v8-fail__vs { display: none; }
  .v8-why .v8-fail__card { padding: 1rem 1rem .95rem; border-radius: 16px; }
  .v8-why .v8-fail__card p:last-child { font-size: .8rem; line-height: 1.35; }
  .v8-why .v8-fail__amt { font-size: 2.2rem; }
  .v8-why .v8-fail__label { font-size: .66rem; }
  .v8-why__side .v8-cmp__note { text-align: left; margin-top: .7rem; font-size: .75rem; }
  .v8-why .v8-cmp { margin: 0; max-width: none; }
  .v8-why .v8-cmp th, .v8-why .v8-cmp td { padding-block: .62rem; }
  .v8-why .v8-cmp thead th { padding-block: 1rem .8rem; }
  .v8-why .v8-cmp thead .v8-cmp__us { padding-top: 1.1rem; }
  .v8-why .v8-cmp__logo { width: 30px; height: 30px; margin-bottom: .35rem; }
  .v8-why .v8-cmp tbody th { font-size: .95rem; }
  .v8-why__main .v8-cmp__note { margin-top: .7rem; font-size: .75rem; text-align: left; max-width: none; }
}
.v8-film__frame { max-width: min(1180px, 100%, calc((100svh - 230px) * 16 / 9)); }
.v8-pit .lead { margin-top: 1rem; }
.v8-film { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.v8-film__frame { max-width: min(1180px, 100%, calc((100svh - 300px) * 16 / 9)); }
.v8-film__frame { max-width: min(1200px, 100%, calc((100svh - 250px) * 16 / 9)); }

/* ===================================================== 18 Oct round 3 */
/* hero: the headline is sized by its own column, so it can never slide
   under the phones on big screens (it did at 1728px). */
@media (min-width: 861px) {
  .h9__copy { container-type: inline-size; position: relative; z-index: 4; }
  .h9__title { font-size: min(11.6cqi, 5.6rem); }
}

/* seamless section joins: each section's bottom fades into the colour
   of the section below it, so there are no hard cuts. */
:root { --join: clamp(110px, 14vw, 200px); }
.h9 { background: radial-gradient(90% 70% at 85% 0%, rgba(255,255,255,.1), transparent 60%), linear-gradient(180deg, #17705E 0%, #0D5348 100%); }
.v8-film { background: linear-gradient(180deg, #0D5348 0%, #0B4A40 45%, #052A24 78%, #000 100%); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.v8-pit { background: linear-gradient(180deg, #000 calc(100% - var(--join)), var(--paper) 100%); padding-bottom: calc(clamp(4rem, 9vw, 6.5rem) + var(--join) * .6); }
.v7-inside { background: linear-gradient(180deg, var(--paper) calc(100% - var(--join)), var(--teal-950) 100%); }
.trust { background: linear-gradient(180deg, var(--teal-950) calc(100% - var(--join)), var(--paper) 100%); padding-bottom: calc(var(--sc-section) + var(--join) * .5); }
.v8-why { background: linear-gradient(180deg, var(--paper) calc(100% - var(--join)), var(--paper-2) 100%); }
.v7-pricing { background: linear-gradient(180deg, var(--paper-2) calc(100% - var(--join)), var(--paper) 100%); }
.notice { background: linear-gradient(180deg, var(--paper) calc(100% - var(--join)), var(--teal-950) 100%); padding-bottom: calc(clamp(3rem, 6vw, 4.5rem) + var(--join) * .5); }
.close { background: linear-gradient(180deg, #062722 0%, #0B3F37 45%, #15705F 75%, #062722 100%); }
.foot { border-top: 0; }

/* why waypoint: heading left, table right, the £23 vs £3.99 strip underneath */
.v8-fail__card { display: flex; align-items: center; gap: 1.1rem; }
.v8-fail__card p:last-child { margin-top: 0; }
.v8-fail__amt { margin-top: 0; flex: none; }
.v8-fail__label { display: block; margin-bottom: .2rem; }
@media (min-width: 1100px) {
  .v8-why__grid { align-items: center; row-gap: 0; }
  .v8-why .v8-fail { grid-column: 1 / -1; grid-template-columns: 1fr auto 1fr; gap: 1.2rem; max-width: 960px; width: 100%; margin: 2.2rem auto 0; }
  .v8-why .v8-fail__vs { display: block; }
  .v8-why .v8-fail__card { padding: 1.1rem 1.4rem; border-radius: 18px; }
  .v8-why .v8-fail__card p:last-child { font-size: .9rem; line-height: 1.4; }
  .v8-why .v8-fail__amt { font-size: 2.6rem; }
  .v8-why .v8-fail__label { font-size: .7rem; }
  .v8-why .v8-fail__src { grid-column: 1 / -1; text-align: center; margin: .6rem auto 0; }
  .v8-why .v8-head .lead { max-width: 20rem; }
}
@media (min-width: 861px) { .h9__title { font-size: min(10.8cqi, 5.4rem); } }
@media (min-width: 1241px) { .h9__grid { gap: 3rem; } .trio { --w: min(18.5vw, calc((100svh - 200px) / 2.3), 310px); } }

/* ===================================================== 18 Oct round 4
   Apple's official black badge (unaltered, from Apple's marketing
   toolbox) next to our yellow button; Luma-style tilted chips. */
.appbadge { display: inline-flex; flex: none; border-radius: 12px; line-height: 0; }
.appbadge img { display: block; height: 52px; width: auto; }
.appbadge:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.h9__cta { gap: 1rem 1rem; }
.h9__cta .btn--sun { min-height: 52px; }
.h9__cta .h9__film { flex-basis: 100%; }
.v8-get__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }
.v8-get__row .btn--sun { min-height: 52px; }

.h9__chips { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem .1rem; max-width: 34rem; }
.h9__chips li { display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: 99px; font-size: .95rem; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 8px 18px -10px rgba(0,0,0,.45); }
.h9__chips li:nth-child(1) { transform: rotate(-3deg); }
.h9__chips li:nth-child(2) { transform: rotate(2.5deg) translateY(4px); margin-left: -.4rem; }
.h9__chips li:nth-child(3) { transform: rotate(-1.5deg); }
.h9__chips li:nth-child(4) { transform: rotate(3deg) translateY(3px); margin-left: -.4rem; }
.h9__chips li:nth-child(5) { transform: rotate(-2deg); margin-left: -.3rem; }
.h9__chips .c-sun { background: var(--sun); color: #3A2A00; }
.h9__chips .c-white { background: #fff; color: #1C2A28; }
.h9__chips .c-green { background: #2FA876; color: #fff; }
.h9__chips .h9__ast { color: inherit; margin-left: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .h9__chips li { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
  .h9__chips li:hover { transform: rotate(0) translateY(-2px); }
}
@media (max-width: 420px) { .h9__chips li { font-size: .85rem; padding: .45rem .85rem; } .appbadge img { height: 48px; } .h9__cta .btn--sun { min-height: 48px; } }

/* 18 Oct: Max picked option C for the hero chips: a calm row, no tilt,
   see-through pills with a sun dot. Overrides the tilted chips above. */
.h9__chips { gap: .5rem; margin-top: 1.5rem; max-width: 36rem; }
.h9__chips li { transform: none !important; margin: 0 !important; box-shadow: none; padding: .42rem .85rem; font-size: .86rem; font-weight: 700; }
.h9__chips .c-sun, .h9__chips .c-white, .h9__chips .c-green { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.h9__chips li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); margin-right: .5rem; }
.h9__chips .h9__ast { color: var(--sun); }
@media (prefers-reduced-motion: no-preference) { .h9__chips li:hover { transform: none !important; } }

/* ===================================================== 20 Oct (launch day)
   Pit Stop on green, icon tiles, new section order, sticky get bar. */

/* hero subtitle: two lines on desktop */
@media (min-width: 1241px) { .h9__sub { max-width: 37rem; font-size: 1.25rem; } }
@media (min-width: 861px) and (max-width: 1240px) { .h9__sub { max-width: 34rem; } }

/* film stays green; the Pit Stop section is green too (Alex: no black) */
.v8-film { background: linear-gradient(180deg, #0D5348 0%, #0B4A40 100%); }
.v8-pit { background: radial-gradient(60% 50% at 75% 35%, rgba(54,199,172,.14), transparent 70%), linear-gradient(180deg, #0B4A40 0%, #0A4239 calc(100% - var(--join)), var(--paper) 100%); }
.v8-pit .wp-sim { box-shadow: 0 0 0 9px #0F1714, 0 0 0 10px #2E4A43, 0 60px 120px -40px rgba(0,0,0,.55); }

/* joins for the new order: inside → pricing → why → faq */
.v7-inside { background: linear-gradient(180deg, var(--paper) calc(100% - var(--join)), var(--paper-2) 100%); }
.v7-pricing { background: linear-gradient(180deg, var(--paper-2) calc(100% - var(--join)), var(--paper) 100%); }
.v8-why { background: var(--paper); }

/* "A full theory course": icon tiles instead of a wall of text */
.v8-tiles { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.v8-tiles li { display: grid; gap: .35rem; align-content: start; padding: 1.3rem 1.2rem 1.25rem; border-radius: 20px; background: var(--card, #fff); box-shadow: inset 0 0 0 1px var(--line); }
.v8-tile__i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: .5rem; border-radius: 14px; background: #0F5A4E; }
.v8-tile__i svg { width: 24px; height: 24px; fill: none; stroke: #FFC44D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v8-tiles b { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); line-height: 1.25; }
.v8-tiles small { font-size: .9rem; font-weight: 500; color: var(--ink-soft); line-height: 1.35; }
@media (max-width: 960px) { .v8-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
@media (max-width: 420px) { .v8-tiles li { padding: 1rem .9rem; } .v8-tiles b { font-size: .98rem; } .v8-tiles small { font-size: .82rem; } .v8-tile__i { width: 40px; height: 40px; } }

/* sticky get bar (desktop: floating card; phone: bottom bar) */
.getbar { position: fixed; z-index: 90; left: 50%; bottom: 18px; width: min(780px, calc(100% - 32px)); display: flex; align-items: center; gap: 1rem;
  padding: .8rem .9rem .8rem .8rem; border-radius: 22px; background: rgba(6,39,34,.94); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px -20px rgba(0,0,0,.6);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
.getbar[hidden] { display: none; }
.getbar.is-on { transform: translate(-50%, 0); opacity: 1; }
.getbar__icon { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.getbar__txt { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.getbar__txt b { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.015em; }
.getbar__txt span { font-size: .85rem; color: rgba(255,255,255,.7); }
.getbar__btn { min-height: 46px !important; flex: none; }
.getbar__badge img { height: 46px; }
.getbar__x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font: 600 1.1rem/1 inherit; cursor: pointer; }
.getbar__x:hover { background: rgba(255,255,255,.2); }
@media (max-width: 700px) {
  .getbar { bottom: 0; width: 100%; border-radius: 18px 18px 0 0; padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom)); gap: .7rem; }
  .getbar__badge { display: none; }
  .getbar__icon { width: 42px; height: 42px; border-radius: 10px; }
  .getbar__txt b { font-size: .92rem; }
  .getbar__txt span { font-size: .78rem; }
  .getbar__btn { min-height: 42px !important; padding-inline: 1rem; font-size: .92rem; }
  .getbar__x { width: 26px; height: 26px; }
}
@media (max-width: 360px) { .getbar__txt b { font-size: .84rem; } }
@media (prefers-reduced-motion: reduce) { .getbar { transition: opacity .2s ease; } }
@media (max-width: 420px) { .getbar__txt span { display: none; } }

/* ===================================================== 20 Oct, round 2 */
/* Try a Pit Stop: the steps as a bento */
.v8-bento { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; max-width: 34rem; }
.v8-bento li { padding: 1rem 1.05rem; border-radius: 18px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.v8-bento__step { display: grid; gap: .65rem; align-content: start; }
.v8-bento__step b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sun); color: #3A2A00; font-size: .9rem; font-weight: 800; }
.v8-bento__step span { font-size: 1rem; font-weight: 700; line-height: 1.3; color: #F5F5F7; }
.v8-bento__fmt { display: grid; gap: .7rem; align-content: space-between; background: rgba(255,196,77,.1) !important; box-shadow: inset 0 0 0 1px rgba(255,196,77,.3) !important; }
.v8-bento__fmt > span { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sun); }
.v8-bento .wp-simformat { margin: 0; max-width: none; }
@media (max-width: 380px) { .v8-bento { grid-template-columns: 1fr; } }

/* Why Waypoint: heading on top in one line, table underneath */
@media (min-width: 1100px) {
  .v8-why__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .v8-why__side { text-align: center; }
  .v8-why .v8-head .h2 { font-size: clamp(2.2rem, 1rem + 1.7vw, 2.8rem); }
  .v8-why .v8-head .lead { margin: .6rem auto 0; max-width: 48rem; }
  .v8-why__main { width: 100%; max-width: 980px; margin: 2rem auto 0; }
}
.notice__cmp { max-width: 62rem; margin: 1rem auto 0; color: var(--ink-soft); }

/* Latest from the blog: a swipe row */
.v8-blog { padding-block: clamp(3.5rem, 7vw, 5rem); background: var(--paper); overflow-x: clip; }
.v8-blog__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.v8-blog__nav { display: flex; gap: .5rem; }
.v8-blog__nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 700 1.1rem/1 inherit; color: var(--ink); cursor: pointer; }
.v8-blog__nav button:hover { background: var(--paper-2); }
.v8-blog__row { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2rem) / 3); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.v8-blog__row::-webkit-scrollbar { display: none; }
.v8-post { scroll-snap-align: start; }
.v8-post a { display: grid; gap: .5rem; align-content: start; height: 100%; padding: .7rem .7rem 1.2rem; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.v8-post a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -24px rgba(11,63,55,.5); }
.v8-post img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 15px; margin-bottom: .4rem; }
.v8-post__meta, .v8-post b, .v8-post__sum, .v8-post__go { padding-inline: .5rem; }
.v8-post__meta { font-size: .78rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.v8-post b { font-size: 1.15rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; }
.v8-post__sum { font-size: .95rem; color: var(--ink-soft); line-height: 1.45; }
.v8-post__go { font-weight: 800; color: #157A6B; margin-top: .2rem; }
.v8-post--all a { background: #0F5A4E; color: #fff; box-shadow: none; align-content: center; justify-items: start; padding: 2rem 1.6rem; }
.v8-post--all b { font-size: 1.5rem; padding: 0; }
.v8-post--all .v8-post__sum { color: rgba(255,255,255,.75); padding: 0; }
.v8-post__allicon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--sun); color: #3A2A00; font-size: 1.4rem; font-weight: 800; margin-bottom: .6rem; }
@media (max-width: 860px) { .v8-blog__row { grid-auto-columns: 78%; } .v8-blog__nav { display: none; } }
@media (min-width: 1100px) {
  .v8-why .v8-head, .v8-why .v8-head .h2 { max-width: none; }
  .v8-why .v8-head .h2 { white-space: nowrap; }
  .v8-why .v8-head .lead { max-width: 56rem; }
}

/* 20 Oct: Alex's mock-up. On desktop the hero's left block is centre-aligned
   (pill, headline, subtitle, buttons, pills). Phone keeps its own layout. */
@media (min-width: 861px) {
  .h9__copy { text-align: center; display: grid; justify-items: center; }
  .h9__sub { margin-inline: auto; }
  .h9__cta { justify-content: center; }
  .h9__chips { justify-content: center; margin-inline: auto; }
}