/* ==========================================================================
   Waypoint site v7 (remix)
   Sits on top of scrollcraft.css + site.css (v2). v2 owns the brand: dawn
   hero, Plus Jakarta Sans 800, buttons, header, FAQ, notice, close, footer.
   This file adds v6's story: six stops on one road down the page, with the
   phone sitting on the road at every stop.
   ========================================================================== */

.v7-kick { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
.v7-kick + .h2 { margin-top: .9rem; }
.v7-mt { margin-top: 1.25rem; }
.v7-teal { color: var(--teal-700); }


/* ============================================================ HERO REMIX
   v2's camera move now finishes by p = .583 (the same scroll distance as v2),
   then the swap plays under "Same habit. Different destination.":
     .60 to .71  the usual apps pop up
     .73 to .82  Screen Time blocks them
     .84 to .95  each one flips into a DVSA theory topic                      */
.hero { --hp: min(1, calc(var(--sc-p, 0) / .583)); }
.hero__sun    { transform: translate3d(0, calc(var(--hp) * -4vh), 0); }
.hero__far    { transform: scale(calc(1 + var(--hp) * .06)); }
.hero__ground { transform: scale(calc(1 + var(--hp) * .85)); }
.hero__near   { transform: translate3d(0, calc(var(--hp) * 6vh), 0) scale(calc(1 + var(--hp) * 1.1)); }
.hero__fore   { transform: translate3d(0, calc(var(--hp) * 10vh), 0) scale(calc(1 + var(--hp) * 1.6)); }
.hero__title  { transform: translate3d(0, calc(var(--hp) * 34vh), 0); }
@media (max-width: 860px) {
  .hero__title { transform: none; }
  .hero__near { transform: translate3d(0, calc(var(--hp) * 4vh), 0) scale(calc(1 + var(--hp) * .5)); }
  .hero__fore { transform: translate3d(0, calc(var(--hp) * 6vh), 0) scale(calc(1 + var(--hp) * .8)); }
}

.v7-beat { position: absolute; z-index: 9; left: 0; right: 0; top: 21%; display: grid; justify-items: center; gap: clamp(1.5rem, 4vh, 2.5rem); padding-inline: var(--sc-gutter); text-align: center; pointer-events: none; }
.v7-beat .hero__beat { position: static; padding: 0; }

.v7-swap { display: grid; justify-items: center; gap: 1.1rem; }
.v7-swap__pills { display: grid; }
.v7-swap__pills > * { grid-area: 1 / 1; justify-self: center; }
.v7-pillx {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: 99px;
  font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  background: rgba(6,39,34,.55); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(244,241,234,.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.v7-pillx--lock { color: var(--sun); }
.v7-pillx--sun { background: var(--sun); color: var(--sun-ink); box-shadow: 0 8px 20px -10px rgba(224,160,42,.9); }

.v7-swap__row {
  display: flex; justify-content: center; gap: clamp(.9rem, 2.4vw, 2.25rem);
  padding: clamp(.85rem, 1.6vw, 1.25rem) clamp(1rem, 2.2vw, 1.75rem) clamp(.7rem, 1.2vw, 1rem); border-radius: clamp(22px, 2.4vw, 32px);
  background: rgba(6,39,34,.42); box-shadow: inset 0 0 0 1px rgba(244,241,234,.14), 0 24px 50px -30px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
.v7-tile {
  --a: clamp(0, calc((var(--sc-p, 0) - .60 - var(--i) * .02) / .05), 1);
  --b: clamp(0, calc((var(--sc-p, 0) - .73 - var(--i) * .015) / .045), 1);
  --c: clamp(0, calc((var(--sc-p, 0) - .84 - var(--i) * .02) / .05), 1);
  --size: clamp(3.75rem, 2.5rem + 3.2vw, 5.5rem);
  display: grid; justify-items: center; gap: .65rem; width: var(--size);
  opacity: var(--a);
  transform: translate3d(0, calc((1 - var(--a)) * 22px), 0) scale(calc(.72 + .28 * var(--a)));
}
.v7-tile__card { position: relative; width: var(--size); height: var(--size); perspective: 640px; }
.v7-tile__flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--c) * 180deg)); }
.v7-tile__front, .v7-tile__back { position: absolute; inset: 0; border-radius: 24%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.v7-tile__front img {
  display: block; width: 100%; height: 100%; border-radius: 24%;
  box-shadow: 0 16px 30px -16px rgba(0,0,0,.75);
  filter: grayscale(var(--b)) brightness(calc(1 - .4 * var(--b)));
  transform: scale(calc(1 - .08 * var(--b)));
}
.v7-tile__lock {
  position: absolute; right: -12%; top: -12%; width: 44%; height: 44%; border-radius: 50%;
  display: grid; place-items: center; background: var(--sun); color: var(--sun-ink);
  box-shadow: 0 0 0 3px #0E4A40, 0 6px 14px -6px rgba(0,0,0,.6);
  transform: scale(var(--b)) rotate(calc((1 - var(--b)) * -40deg));
}
.v7-tile__lock svg { width: 56%; height: 56%; }
.v7-tile__back { transform: rotateY(180deg); display: grid; place-items: center; background: var(--paper); box-shadow: 0 16px 30px -16px rgba(0,0,0,.65); }
.v7-topic { position: relative; display: grid; place-items: center; width: 78%; height: 78%; border-radius: 50%; background: conic-gradient(var(--ring) calc(var(--c) * var(--t) * 360deg), #E2DED4 0); }
.v7-topic::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: var(--paper); }
.v7-topic b { position: relative; display: grid; place-items: center; width: 76%; height: 76%; border-radius: 50%; background: var(--tc); color: var(--ti); font-weight: 800; font-size: clamp(.85rem, .55rem + .7vw, 1.2rem); font-variant-numeric: tabular-nums; }
.v7-tile__names { display: grid; width: calc(var(--size) + 2rem); font-size: clamp(.72rem, .66rem + .2vw, .85rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.005em; text-shadow: 0 1px 10px rgba(5,34,30,.6); }
.v7-tile__names span { grid-area: 1 / 1; }
.v7-tile__names span:first-child { color: #fff; opacity: calc(1 - var(--c)); }
.v7-tile__names span:last-child { color: var(--sun); opacity: var(--c); }
.v7-swap__line { max-width: 30ch; font-size: clamp(1rem, .9rem + .4vw, 1.2rem); font-weight: 600; line-height: 1.4; color: #fff; text-shadow: 0 1px 14px rgba(5,34,30,.7); text-wrap: balance; }
@media (max-width: 400px) { .v7-swap__row { gap: .65rem; padding-inline: .85rem; } .v7-tile { --size: 3.6rem; } .v7-tile__names { width: calc(var(--size) + .6rem); } }
@media (max-height: 560px) and (orientation: landscape) { .v7-swap__line { display: none; } .v7-tile { --size: 3.25rem; } .v7-beat { top: 14%; } }

/* ============================================================ ROUTE MAP */
.v7-map { background: var(--paper); padding-block: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 3vw, 2.5rem); }
.v7-map__head { max-width: 42rem; }
.v7-map__list { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.v7-map__list::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 8px; translate: 0 -50%; border-radius: 99px; background: #E7E0D1; }
.v7-map__list a { position: relative; display: grid; justify-items: start; gap: .3rem; text-decoration: none; border-radius: 12px; }
.v7-map__list b { margin-top: .9rem; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.v7-map__list a > span:last-child { font-size: .92rem; line-height: 1.4; color: var(--ink-soft); }
.v7-map__list a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-color: var(--sun-deep); }
.v7-dot {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c); color: var(--ci, #fff);
  font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 5px var(--paper);
  transition: transform 200ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .v7-map__list a:hover .v7-dot { transform: translateY(-3px); } }
@media (max-width: 980px) {
  .v7-map__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .v7-map__list::before { display: none; }
}
@media (max-width: 560px) {
  .v7-map__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .v7-map__list li + li { border-top: 1px solid var(--line); }
  .v7-map__list a { grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; row-gap: .05rem; align-items: center; padding: .85rem 0; }
  .v7-map__list .v7-dot { grid-row: 1 / span 2; }
  .v7-map__list b, .v7-map__list a > span:last-child { grid-column: 2; }
  .v7-map__list b { margin-top: 0; }
}

/* ============================================================ THE ROAD */
.v7-route { position: relative; background: var(--paper); padding-bottom: clamp(3rem, 6vw, 5rem); --spine-x: 50%; --spine-w: 40px; --badge: 60px; --stop-pad: clamp(4rem, 8vw, 7rem); }
.v7-spine {
  position: absolute; z-index: 0; top: clamp(1.5rem, 3vw, 2.5rem); bottom: 30%;
  left: var(--spine-x); width: var(--spine-w); translate: -50% 0;
  border-radius: 99px; background: #E7E0D1;
}
.v7-spine::before {
  content: ""; position: absolute; left: 50%; top: 16px; bottom: 16px; width: 3px; translate: -50% 0;
  background: repeating-linear-gradient(180deg, #FBFAF6 0 18px, transparent 18px 40px);
}
.v7-spine__fill { position: absolute; left: 50%; top: 0; width: 6px; height: var(--fill, 0px); max-height: 100%; translate: -50% 0; border-radius: 3px; background: var(--teal-700); }
.v7-spine__fill::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; translate: -50% 0;
  border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px #fff, 0 6px 14px -4px rgba(11,63,55,.5);
}

.v7-stop { position: relative; z-index: 1; padding-block: var(--stop-pad); scroll-margin-top: calc(var(--bar-h) + 12px); }
.v7-badge {
  position: absolute; z-index: 2; top: var(--stop-pad); left: var(--spine-x); translate: -50% 0;
  width: var(--badge); height: var(--badge); border-radius: 50%;
  display: grid; place-items: center; background: var(--c); color: var(--ci, #fff);
  font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 10px #DCD4C4;
  transition: box-shadow 450ms var(--sc-ease-out);
}
.v7-badge.is-reached { box-shadow: 0 0 0 6px var(--paper), 0 0 0 10px var(--teal-700); }

.v7-stop__grid {
  max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.v7-stop__copy { padding-top: .35rem; }
.v7-stop .h2 { font-size: clamp(2rem, 1.2rem + 2vw, 3rem); }
.v7-stop__obj { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: calc(var(--badge) + 2.75rem); }
.v7-stop__side { align-self: end; padding-bottom: 2.5rem; }
.v7-stop__side .lead { max-width: 30ch; }

.v7-turn { margin-top: 1.75rem; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.v7-turn em { font-style: normal; color: var(--teal-700); }

.v7-facts { margin-top: 1.75rem; border-top: 1px solid var(--line); }
.v7-facts div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.v7-facts dt { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); padding-top: .2rem; }
.v7-facts dd { margin: 0; font-weight: 600; line-height: 1.45; }

.v7-seg { display: inline-grid; grid-template-columns: auto auto; margin-top: 1.5rem; background: var(--paper-2); }
.v7-seg button { padding: 0 1.25rem; min-height: 44px; color: var(--ink-soft); }
.v7-seg button[aria-checked="true"] { background: var(--teal-800); color: #fff; }

.v7-topics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .1rem 1rem; margin-top: .9rem; }
.v7-topics li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .92rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.v7-tdot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--ci, #fff); font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.v7-test div { display: flex; align-items: baseline; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.v7-test div:first-child { border-top: 1px solid var(--line); }
.v7-test dd { order: -1; margin: 0; min-width: 2.2ch; font-size: clamp(3rem, 2rem + 3vw, 4.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--teal-800); font-variant-numeric: tabular-nums; }
.v7-test dt { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.015em; }

@media (max-width: 900px) {
  .v7-route { --spine-x: calc(var(--sc-gutter) + 15px); --spine-w: 22px; --badge: 44px; --stop-pad: clamp(3rem, 9vw, 4rem); }
  .v7-spine::before { top: 10px; bottom: 10px; width: 2px; background: repeating-linear-gradient(180deg, #FBFAF6 0 12px, transparent 12px 26px); }
  .v7-spine__fill { width: 4px; }
  .v7-badge { font-size: .9rem; box-shadow: 0 0 0 5px var(--paper), 0 0 0 8px #DCD4C4; }
  .v7-badge.is-reached { box-shadow: 0 0 0 5px var(--paper), 0 0 0 8px var(--teal-700); }
  .v7-stop__grid { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; padding-left: calc(var(--sc-gutter) + 52px); }
  .v7-stop__copy { padding-top: .6rem; }
  .v7-stop__obj { padding-top: 0; justify-content: flex-start; }
  .v7-stop__side { padding-bottom: 0; }
}
@media (max-width: 420px) { .v7-topics { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ THE PHONE
   Everything inside is sized in em, so the whole phone scales from --pw. */
.v7-phone {
  --pw: 300px;
  position: relative; flex: none; font-size: calc(var(--pw) / 30);
  width: 30em; height: 61.5em; padding: 1.05em; border-radius: 5.4em;
  background: #151D1C;
  box-shadow: inset 0 0 0 1px #3A4A47, 0 44px 70px -34px rgba(11,63,55,.55), 0 18px 30px -18px rgba(11,63,55,.3);
}
.v7-phone::before {
  content: ""; position: absolute; z-index: 9; top: 2.15em; left: 50%; translate: -50% 0;
  width: 9.4em; height: 2.75em; border-radius: 2em; background: #070B0A;
}
.v7-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 4.4em; background: var(--paper); color: var(--ink); text-align: left; }
@media (max-width: 900px) { .v7-phone { --pw: min(300px, calc(100vw - var(--sc-gutter) * 2 - 52px)); } }

.v7-ui { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.4em 1.8em 2em; }
.v7-ui--center { align-items: center; text-align: center; }
.v7-ui__label { font-size: 1.05em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5F6D68; }
.v7-ui__big { margin-top: .1em; font-size: 3.2em; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
.v7-ui__s { font-size: 1.25em; font-weight: 600; line-height: 1.4; color: var(--ink-soft); }
.v7-ui__mid { margin-top: .2em; font-size: 1.35em; font-weight: 800; letter-spacing: -0.01em; }

.v7-appbtn { display: flex; align-items: center; justify-content: center; align-self: stretch; margin-top: auto; min-height: 3.3em; border-radius: 1.15em; font-size: 1.4em; font-weight: 800; letter-spacing: -0.01em; }
.v7-appbtn--sun { background: var(--sun); color: var(--sun-ink); }
.v7-appbtn--teal { background: var(--teal-800); color: #fff; }

/* feed (stop 01) */
.v7-feed__bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 8.6em; padding: 0 1.8em .9em; display: flex; align-items: flex-end; justify-content: space-between; background: var(--paper); border-bottom: 1px solid #E2DED4; }
.v7-feed__bar b { font-size: 1.7em; font-weight: 800; letter-spacing: -0.02em; }
.v7-feed__bar svg { width: 2.2em; height: 2.2em; }
.v7-feed { position: absolute; left: 0; right: 0; top: 9em; padding: 0 1.8em; animation: v7feed 48s linear infinite; }
@keyframes v7feed { to { transform: translateY(-50%); } }
.v7-post { padding: 1.2em 0; }
.v7-post__who { display: flex; align-items: center; gap: .8em; }
.v7-post__who > i { width: 3em; height: 3em; border-radius: 50%; }
.v7-post__who span { display: grid; gap: .45em; }
.v7-post__who span i { display: block; width: 9em; height: .8em; border-radius: 1em; background: #CFC8B8; }
.v7-post__who span i + i { width: 5.5em; height: .7em; background: #E2DCCF; }
.v7-post__img { position: relative; display: block; overflow: hidden; margin-top: 1em; height: 22em; border-radius: 1.4em; }
.v7-post__img i { position: absolute; display: block; }
.v7-post__acts { display: flex; gap: 1.2em; margin-top: .9em; color: var(--ink-soft); }
.v7-post__acts svg { width: 2em; height: 2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* shield (stop 02) */
.v7-notif { display: flex; align-items: center; gap: .9em; padding: .9em 1em; background: var(--card); border-radius: 1.6em; box-shadow: 0 .4em 1.4em rgba(11,63,55,.12); }
.v7-notif__tile { flex: none; width: 3.6em; height: 3.6em; border-radius: .9em; background: var(--teal-700); display: grid; place-items: center; }
.v7-notif__tile svg { width: 2em; height: 2em; }
.v7-notif small { display: block; font-size: 1em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5F6D68; }
.v7-notif b { display: block; font-size: 1.3em; font-weight: 800; letter-spacing: -0.01em; }
.v7-shield { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; text-align: center; }
.v7-shield img { width: 6.4em; height: 6.4em; margin-bottom: .6em; border-radius: 1.5em; box-shadow: 0 .8em 1.6em -1em rgba(0,0,0,.5); }
.v7-shield__t { font-size: 2em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.v7-shield__s { max-width: 15em; font-size: 1.25em; font-weight: 600; line-height: 1.4; color: var(--ink-soft); }

/* unlock (stop 04) */
.v7-check { display: grid; place-items: center; width: 6.4em; height: 6.4em; margin: 3em 0 1.6em; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 0 0 .9em rgba(47,168,118,.18); }
.v7-check svg { width: 3.2em; height: 3.2em; }
.v7-gain { align-self: stretch; margin-top: 2em; padding: 1.4em; text-align: left; background: var(--card); border: 1px solid #E8E2D6; border-radius: 1.6em; }
.v7-gain__row { display: flex; justify-content: space-between; margin-top: 1em; font-size: 1.25em; font-weight: 800; }
.v7-gain__row b { color: var(--green-deep); }
.v7-bar { display: block; height: .5em; margin-top: .5em; overflow: hidden; border-radius: 1em; background: var(--paper-2); }
.v7-bar i { display: block; height: 100%; border-radius: 1em; }

/* home (stop 05) */
.v7-ui--home { padding-bottom: 0; }
.v7-home__top { display: flex; align-items: flex-end; justify-content: space-between; }
.v7-home__title { font-size: 2.4em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.v7-pill { display: inline-flex; align-items: center; gap: .4em; padding: .5em .9em; border-radius: 2em; background: var(--card); border: 1px solid #E2DED4; font-size: 1.1em; font-weight: 800; }
.v7-pill svg { width: 1.2em; height: 1.2em; }
.v7-home__road { display: block; width: 100%; margin-top: 1em; font-family: inherit; }
.v7-fab { position: absolute; right: 1.8em; bottom: 9.2em; display: grid; place-items: center; width: 5.4em; height: 5.4em; border-radius: 50%; background: var(--teal-700); box-shadow: 0 .8em 1.6em -.8em rgba(11,63,55,.6); }
.v7-fab svg { width: 2.6em; height: 2.6em; }
.v7-fab b { position: absolute; right: -.2em; top: -.2em; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #D93A3F; color: #fff; font-size: 1.05em; font-weight: 800; box-shadow: 0 0 0 .2em var(--paper); }
.v7-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 1em 1em 2.2em; background: #FBFAF6; border-top: 1px solid #E2DED4; }
.v7-tabs span { display: flex; flex-direction: column; align-items: center; gap: .35em; font-size: .95em; font-weight: 800; color: #7B8883; }
.v7-tabs span.is-on { color: var(--teal-700); }
.v7-tabs svg { width: 2.3em; height: 2.3em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* progress (stop 06) */
.v7-card { margin-top: 1.2em; padding: 1.3em 1.4em; background: var(--card); border: 1px solid #E8E2D6; border-radius: 1.6em; }
.v7-card--row { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.v7-trend { display: block; width: 100%; margin-top: .6em; font-family: inherit; }
.v7-week, .v7-week__d { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6em; }
.v7-week { margin-top: 1em; }
.v7-week i { aspect-ratio: 1; border-radius: .6em; background: var(--paper-2); }
.v7-week i.on { background: var(--teal-700); }
.v7-week i.today { box-shadow: inset 0 0 0 .2em var(--teal-700); }
.v7-week__d { margin-top: .5em; text-align: center; font-size: .95em; font-weight: 800; color: #7B8883; }
.v7-ring { position: relative; flex: none; display: grid; place-items: center; width: 6.4em; height: 6.4em; border-radius: 50%; background: conic-gradient(var(--green) calc(var(--v) * 360deg), var(--paper-2) 0); }
.v7-ring::before { content: ""; position: absolute; inset: .7em; border-radius: 50%; background: var(--card); }
.v7-ring b { position: relative; font-size: 1.4em; font-weight: 800; letter-spacing: -0.02em; }

/* ======================================== LIVE PIT STOP (v2's demo, in the phone) */
.v7-live .pit__stage { position: absolute; inset: 0; display: none; flex-direction: column; padding: 5.4em 1.5em 1.8em; overflow-y: auto; scrollbar-width: none; background: var(--paper); color: var(--ink); }
.v7-live .pit__stage::-webkit-scrollbar { display: none; }
.v7-live .pit__stage.is-on { display: flex; }
.v7-live .v7-home { background: linear-gradient(180deg, #0A3B33 0%, #156B5B 46%, #3E8E76 68%, #DDBF84 90%, #F4D79C 100%); color: #fff; }
.v7-live .pit__eyebrow { font-size: 1.1em; color: rgba(255,255,255,.85); }
.v7-live .apps { gap: 2em .3em; margin: 2em 0 1em; }
.v7-live .app { color: #fff; font-size: 1.05em; padding: .3em; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.v7-live .app img { width: 5.4em; height: 5.4em; border-radius: 1.3em; }
.v7-live .app.is-locked::after { top: -.1em; left: calc(50% + 1.8em); width: 1.7em; height: 1.7em; box-shadow: 0 0 0 .25em #145F52; }
.v7-live span.app { opacity: .55; }
.v7-live .pit__hint { margin-top: auto; padding-bottom: .6em; font-size: 1.25em; font-weight: 800; color: var(--teal-900); }

.v7-live .pshield { margin: auto 0; gap: .8em; padding: 0; }
.v7-live .pshield__logo { width: 6.4em; height: 6.4em; border-radius: 1.6em; margin-bottom: .4em; }
.v7-live .pshield__t { font-size: 2em; line-height: 1.1; color: var(--ink); }
.v7-live .pshield__s { margin-bottom: 1.2em; font-size: 1.25em; color: var(--ink-soft); }

.v7-live .qcard { padding: 0; gap: .9em; background: none; box-shadow: none; }
.v7-live .qcard__meta { font-size: 1.05em; }
.v7-live .qcard__q { font-size: 1.6em; line-height: 1.3; }
.v7-live .qcard__opts { gap: .7em; }
.v7-live .opt { min-height: 3.4em; padding: .55em .7em; gap: .6em; border-radius: .9em; font-size: 1.3em; }
.v7-live .opt__l { width: 1.9em; height: 1.9em; border-radius: .5em; font-size: .8em; }
.v7-live .qcard__why { padding: .8em .9em; font-size: 1.15em; background: var(--paper-2); }

.v7-live .swipe__how { margin-bottom: 1em; font-size: 1.15em; font-weight: 600; color: var(--ink-soft); }
.v7-live .swipe__deck { min-height: 22em; }
.v7-live .swipe__deck::before { background: rgba(28,42,40,.07); }
.v7-live .swipe__deck::after { background: rgba(28,42,40,.04); }
.v7-live .scard { padding: 1.4em; border: 1px solid #E8E2D6; box-shadow: 0 1.4em 2.4em -1.6em rgba(11,63,55,.45); }
.v7-live .scard__q { font-size: 1.3em; }
.v7-live .scard__label { font-size: .95em; }
.v7-live .scard__a { font-size: 1.8em; }
.v7-live .swipe__btns { gap: 2.4em; margin-top: 2.2em; }
.v7-live .sbtn { width: 6em; height: 6em; border: 1px solid #E8E2D6; box-shadow: 0 .8em 1.6em -1em rgba(11,63,55,.5); }
.v7-live .swipe__why { margin-top: 1.2em; font-size: 1.15em; background: var(--paper-2); color: var(--ink); }
.v7-live .swipe__why strong { color: var(--teal-800); }
.v7-live .btn--glass { background: transparent; color: var(--teal-800); box-shadow: inset 0 0 0 1.5px var(--teal-700); }

.v7-live .unlock { margin: auto 0; gap: .5em; padding: 0; }
.v7-live .unlock__ring { width: 7.6em; height: 7.6em; margin-bottom: 1.4em; }
.v7-live .unlock__label { font-size: 1.05em; color: var(--teal-700); }
.v7-live .unlock__t { font-size: 3.4em; color: var(--ink); }
.v7-live .unlock__s { font-size: 1.3em; color: var(--ink); }
.v7-live .unlock__note { font-size: 1.15em; color: var(--ink-soft); }

/* ============================================================ INSIDE */
.v7-inside { background: var(--paper); padding-block: clamp(3rem, 6vw, 5rem) var(--sc-section); }
.v7-inside__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; }
.v7-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3.5rem); padding-block: 1.5rem; border-block: 1px solid var(--line); }
.v7-nums div { display: flex; flex-direction: column-reverse; gap: .2rem; }
.v7-nums dt { font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
.v7-nums dd { margin: 0; font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--teal-800); font-variant-numeric: tabular-nums; }
.v7-nums small { font-size: .5em; letter-spacing: 0; }
.v7-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(1rem, 2vw, 1.5rem); }
.v7-spec li { display: grid; align-content: start; gap: .35rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.v7-spec li > span { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
.v7-spec h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.v7-spec p { color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; }
@media (max-width: 860px) {
  .v7-inside__head { grid-template-columns: minmax(0, 1fr); }
  .v7-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v7-spec { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ PRICING */
.v7-pricing { background: var(--paper-2); padding-block: var(--sc-section); }
.v7-pricing__head { display: grid; gap: 1rem; max-width: 42rem; }
.v7-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.v7-plan { display: flex; flex-direction: column; padding: clamp(1.4rem, 2.5vw, 2rem); border-radius: 28px; background: var(--card); box-shadow: var(--sc-e2); }
.v7-plan--best { background: var(--teal-900); color: var(--on-dark); box-shadow: var(--sc-e3); }
.v7-plan__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.v7-plan__top b { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.015em; }
.v7-plan__amt { margin-top: 1.6rem; font-size: clamp(2.8rem, 2rem + 2.4vw, 4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.v7-plan__per { margin: .45rem 0 1.4rem; font-weight: 600; color: var(--ink-soft); }
.v7-plan__terms { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.v7-plan--best .v7-plan__per, .v7-plan--best .v7-plan__terms { color: var(--on-dark-soft); }
.v7-plan--best .v7-plan__terms { border-top-color: var(--line-dark); }
.v7-pricing__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: start; margin-top: 2rem; }
.v7-includes { padding: 0; border-block: 0; }
.v7-pricing__cta { display: grid; justify-items: start; gap: 1rem; }
@media (max-width: 860px) {
  .v7-plans, .v7-pricing__foot { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v7-feed { animation: none; }
  .v7-tile, .v7-tile__flip, .v7-tile__front img, .v7-tile__lock { transform: none; }
  .v7-tile__lock { opacity: var(--b); }
  .v7-tile__back { transform: none; opacity: var(--c); }
  .v7-tile__front { opacity: calc(1 - var(--c)); }
  .v7-badge, .v7-dot { transition: none; }
}