/* v1 "Gallery": everything below the hero. Every selector sits under .v1 (or is a .v1- class), nothing touches site.css.
   Root is 62.5% (1rem = 10px; it scales with the viewport between 1100 and 1440 like the rest of the page). */
.v1 {
  --v1-ink: #111614; --v1-ink2: #39433E; --v1-ink3: #525D57; --v1-line: rgba(17, 22, 20, .12);
  --v1-mist: #F3F5F2; --v1-paper: #E4EBE6; --v1-sheet: #FBFCFB; --v1-pine: #244839; --v1-field: #5E7367; --v1-celadon: #7E9688;
  --v1-g: 16px; --v1-sec: 8rem; --v1-r: 8px; --v1-max: 124rem;
  --v1-ease: cubic-bezier(.22, .61, .36, 1);
  color: var(--v1-ink); background: var(--v1-mist);
  interpolate-size: allow-keywords;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .v1 { --v1-g: 24px; --v1-sec: 12rem; --v1-r: 10px; } }
@media (min-width: 1024px) { .v1 { --v1-g: 4rem; --v1-sec: 16rem; --v1-r: 12px; } }

.v1 *, .v1 *::before, .v1 *::after { box-sizing: border-box; }
:where(.v1) :where(p, h2, h3, h4, ul, ol, dl, dd, figure) { margin: 0; }
:where(.v1) :where(ul, ol) { padding: 0; list-style: none; }
:where(.v1) img { display: block; max-width: 100%; height: auto; }
.v1 a:focus-visible, .v1 button:focus-visible, .v1 summary:focus-visible, .v1 [tabindex]:focus-visible {
  outline: 2px solid var(--v1-pine); outline-offset: 3px; border-radius: 4px;
}
.v1-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.v1-wrap { width: 100%; max-width: calc(var(--v1-max) + 2 * var(--v1-g)); margin-inline: auto; padding-inline: var(--v1-g); }
.v1-sec { padding-block: var(--v1-sec); }

/* ---------- type ---------- */
.v1-h2 { font-size: 3.2rem; line-height: 3.6rem; font-weight: 340; letter-spacing: -.022em; text-wrap: balance; color: var(--v1-ink); }
.v1-h3 { font-size: 2.4rem; line-height: 3rem; font-weight: 340; letter-spacing: -.016em; text-wrap: balance; }
.v1-lede { margin-top: 2rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--v1-ink2); text-wrap: pretty; max-width: 46ch; }
.v1-line { font-size: 1.7rem; line-height: 2.4rem; font-weight: 360; color: var(--v1-ink); text-wrap: pretty; max-width: 36ch; }
.v1-tag, .v1-lab, .v1-mono, .v1-page__run, .v1-tier__rec {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 16px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--v1-ink3); font-weight: 400;
}
.v1-tag { margin-bottom: .8rem; }
.v1-small { font-size: 13px; line-height: 18px; color: var(--v1-ink3); }
@media (min-width: 1024px) {
  .v1-h2 { font-size: 5.2rem; line-height: 5.6rem; letter-spacing: -.028em; }
  .v1-h3 { font-size: 3.2rem; line-height: 3.8rem; }
  .v1-lede { margin-top: 2.4rem; font-size: 1.8rem; line-height: 2.8rem; }
  .v1-line { font-size: 2.2rem; line-height: 3rem; font-weight: 340; letter-spacing: -.01em; }
  .v1-small { font-size: max(12px, 1.3rem); }
}

/* ---------- button (pine pill on mist and paper) ---------- */
.v1-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 4.8rem; padding: 0 2.6rem;
  border-radius: 999px; background: var(--v1-pine); color: var(--v1-mist); font-size: 1.6rem; line-height: 2rem; font-weight: 400;
  letter-spacing: .005em; white-space: nowrap; transition: background-color .2s var(--v1-ease), transform .2s var(--v1-ease);
}
.v1-btn:hover { background: #1D3B2F; }
.v1-btn:active { background: #17302A; transform: scale(.98); }
.v1-ctabox { margin-top: 3.2rem; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

/* ---------- photos ---------- */
.v1-ph { position: relative; }
.v1-ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--v1-paper); }
.v1-ph .v1-lab { margin-bottom: .8rem; transition: color .2s var(--v1-ease); }
@media (hover: hover) { .v1-pair:hover .v1-ph--after .v1-lab, .v1-open:hover .v1-ph--after .v1-lab, .v1-three__row .v1-ph:hover .v1-lab { color: var(--v1-ink); } }

/* ==================== S2 gallery ==================== */
/* phone: every photo runs edge to edge with 0 radius and 4px gaps; labels sit in the gutter above the photos */
.v1-open__text { max-width: 52rem; }
.v1-pair__media, .v1-wipe__frame { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-inline: calc(var(--v1-g) * -1); }
.v1-pair__media .v1-ph:first-child .v1-lab, .v1-wipe__frame .v1-ph:first-child .v1-lab { padding-left: var(--v1-g); }
.v1-pair__media .v1-ph--after .v1-lab, .v1-wipe__frame .v1-ph--after .v1-lab { padding-left: 1.2rem; }
.v1-pair__text { margin-top: 2rem; }
/* the cut's line: phone = under the photo inside the pinned frame (so it stays in view through the wipe); 768+ = under the lede */
.v1-open__text .v1-open__cap { display: none; }
.v1-open__cap--m { margin-top: 1.6rem; }
.v1-wipe.is-on .v1-open__cap--m { margin-top: 1.2rem; padding-inline: var(--v1-g); }
.v1-wipe { margin-top: 4rem; }
.v1-wipe__labels, .v1-wipe__edge { display: none; }
.v1-wipe__frame img { aspect-ratio: 4 / 5; }
.v1-pair { margin-top: 5.6rem; }

/* the phone scroll-wipe (v.js adds .is-on under 768px when motion is allowed): the frame pins under the bar and fills
   the screen; the after is revealed from the right as a pure function of scroll position over about one screen */
.v1-wipe.is-on { height: 190vh; height: 190svh; margin-inline: calc(var(--v1-g) * -1); }
.v1-wipe.is-on .v1-wipe__stick { position: sticky; top: 64px; }
.v1-wipe.is-on .v1-wipe__labels, .v1-wipe.is-slide .v1-wipe__labels { display: flex; justify-content: space-between; align-items: flex-start; height: 3.2rem; }
.v1-wipe.is-on .v1-wipe__labels { padding: 0 var(--v1-g); }
.v1-wipe.is-on .v1-wipe__labels .v1-lab.is-on, .v1-wipe.is-slide .v1-wipe__labels .v1-lab.is-on { color: var(--v1-ink); }
.v1-wipe.is-on .v1-wipe__frame, .v1-wipe.is-slide .v1-wipe__frame { display: block; position: relative; margin: 0; overflow: hidden; overflow: clip; }
.v1-wipe.is-on .v1-wipe__frame .v1-lab, .v1-wipe.is-slide .v1-wipe__frame .v1-lab { display: none; }
.v1-wipe.is-on .v1-wipe__frame img { aspect-ratio: auto; height: calc(100vh - 64px - 3.2rem - 3.6rem - 1.6rem); height: calc(100svh - 64px - 3.2rem - 3.6rem - 1.6rem); min-height: 40rem; max-height: 200vw; object-position: 50% 38%; }
.v1-wipe.is-on .v1-wipe__after, .v1-wipe.is-slide .v1-wipe__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--v1-wipe, 100%)); }
.v1-wipe.is-on .v1-wipe__after { will-change: clip-path; }
.v1-wipe.is-on .v1-wipe__edge, .v1-wipe.is-slide .v1-wipe__edge { display: block; position: absolute; top: 0; bottom: 0; left: var(--v1-wipe, 100%); width: 1px; margin-left: -.5px; background: rgba(243, 245, 242, .92); pointer-events: none; }
/* the ends of the wipe: no edge line, and at the end the after alone (no anti-aliased sliver of the before at its edges) */
.v1-wipe.is-start .v1-wipe__edge, .v1-wipe.is-end .v1-wipe__edge { display: none; }
.v1-wipe.is-on.is-end .v1-wipe__after { clip-path: none; }
.v1-wipe.is-on.is-end .v1-wipe__before { visibility: hidden; }

/* 768+: the same frame as a drag / keyboard slider on a square crop (v.js adds .is-slide) */
.v1-slide__handle[hidden] { display: none; }
.v1-wipe.is-slide .v1-wipe__frame { border-radius: var(--v1-r); overflow: hidden; touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.v1-wipe.is-slide .v1-wipe__frame img { aspect-ratio: 1 / 1; border-radius: 0; -webkit-user-drag: none; }
.v1-wipe.is-slide .v1-wipe__edge { width: 2px; margin-left: -1px; }
.v1-slide__handle { position: absolute; top: 0; bottom: 0; left: clamp(28px, var(--v1-wipe, 50%), calc(100% - 28px)); width: 56px; margin-left: -28px; display: flex; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; }
.v1-slide__knob {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--v1-mist); color: var(--v1-pine); box-shadow: 0 1px 2px rgba(17, 22, 20, .12), 0 6px 16px -6px rgba(17, 22, 20, .3);
  transition: transform .2s var(--v1-ease), background-color .2s var(--v1-ease);
}
.v1-slide__ico { width: 20px; height: 20px; }
.v1-slide__handle:hover .v1-slide__knob, .v1-wipe.is-drag .v1-slide__knob { transform: scale(1.06); background: #FFFFFF; }
.v1 .v1-slide__handle:focus-visible { outline: none; box-shadow: none; }
.v1-slide__handle:focus-visible .v1-slide__knob { box-shadow: 0 0 0 2px var(--v1-mist), 0 0 0 4px var(--v1-pine); }

/* the phone pair (v.js adds .is-tog under 768px): one full-width photo that turns from before to after as it moves up
   the screen (--v1-fade, scrubbed by scroll); a tap on Before / After takes over (.is-manual) */
.v1-tog { display: flex; gap: 1.2rem; margin: 0 0 .4rem -4px; }
.v1-tog[hidden] { display: none; }
.v1-tog__b {
  appearance: none; border: 0; background: none; padding: 0 4px; min-width: 44px; min-height: 44px; cursor: pointer; position: relative;
  font: 400 12px/16px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--v1-ink3);
  transition: color .2s var(--v1-ease);
}
.v1-tog__b::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 10px; height: 1.5px; background: var(--v1-pine); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--v1-ease); }
.v1-tog__b[aria-pressed="true"] { color: var(--v1-ink); }
.v1-tog__b[aria-pressed="true"]::after { transform: scaleX(1); }
.v1-pair.is-tog .v1-pair__media { display: block; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.v1-pair.is-tog .v1-pair__media .v1-lab { display: none; }
.v1-pair.is-tog .v1-ph--after { position: absolute; inset: 0; opacity: var(--v1-fade, 0); }
.v1-pair.is-tog.is-manual .v1-ph--after { opacity: 0; transition: opacity .3s var(--v1-ease); }
.v1-pair.is-tog.is-manual.is-after .v1-ph--after { opacity: 1; }

/* one face, three looks */
.v1-three { margin-top: 7.2rem; }
.v1-three__text .v1-line { margin-top: 1.2rem; color: var(--v1-ink2); }
.v1-three__row {
  margin: 2.8rem calc(var(--v1-g) * -1) 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 26rem;
  gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.v1-three__row::-webkit-scrollbar { display: none; }
.v1-three__row > li { scroll-snap-align: start; }
.v1-three__row > li .v1-lab { padding-left: var(--v1-g); }
.v1-three__row > li + li .v1-lab { padding-left: 1.2rem; }

/* closing line + scan button, on the page's left edge like every other block */
.v1-endcta { margin-top: 7.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.v1-endcta__line { font-size: 2.4rem; line-height: 3rem; font-weight: 340; letter-spacing: -.016em; text-wrap: balance; }
.v1-endcta__line--sm { font-size: 1.8rem; line-height: 2.6rem; font-weight: 360; letter-spacing: -.008em; }
.v1-endcta--row { margin-top: 2rem; }

@media (min-width: 768px) {
  .v1-open__text .v1-open__cap { display: block; margin-top: 2.4rem; }
  .v1-open__cap--m { display: none; }
  .v1-pair__media, .v1-wipe__frame { margin-inline: 0; gap: 1.6rem; }
  .v1-ph img { border-radius: var(--v1-r); }
  .v1-pair__media .v1-ph .v1-lab, .v1-wipe__frame .v1-ph .v1-lab { padding-left: 0 !important; }
  .v1-pair { margin-top: 9.6rem; }
  .v1-wipe__frame img { aspect-ratio: 1 / 1; }
  .v1-three__row { margin-inline: 0; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; gap: 1.6rem; }
  .v1-three__row > li .v1-lab { padding-left: 0 !important; }
}
/* desktop: three different moments in a row: the slider beside the heading, a pair with its line beside it, four looks
   across the full width */
@media (min-width: 1024px) {
  .v1-open, .v1-pair { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2.4rem; align-items: start; }
  /* the heading block runs the full height of the slider: heading and lede level with its labels, the cut's line level
     with the frame's bottom edge. The square frame is capped so the section's top padding, its labels and the whole
     frame fit one screen under the bar */
  .v1-open { align-items: stretch; }
  .v1-open__text { grid-column: 1 / 5; grid-row: 1; display: flex; flex-direction: column; padding-right: 2.4rem; }
  .v1-open__text .v1-open__cap { margin-top: auto; padding-top: 3.2rem; }
  .v1-wipe { grid-column: 5 / 13; grid-row: 1; margin-top: 0; justify-self: end; width: 100%; max-width: min(100%, calc(100vh - 25.6rem)); max-width: min(100%, calc(100svh - 25.6rem)); }
  .v1-pair { margin-top: 16rem; }
  /* the pair spans all 12 columns, so its right edge lines up with the slider above and the four looks below */
  .v1-pair__media { grid-column: 1 / 13; grid-row: 1; }
  .v1-pair--tog .v1-ph img { aspect-ratio: 1792 / 1991; object-position: 50% 0; }
  .v1-pair__text { grid-column: 1 / 8; grid-row: 2; margin-top: 2.4rem; }
  .v1-three { margin-top: 16rem; }
  .v1-three__text { max-width: 60rem; }
  .v1-three__row { margin-top: 4.8rem; gap: 2.4rem; }
  .v1-gallery { padding-bottom: calc(var(--v1-sec) * .6); }
  .v1-endcta { margin-top: 9.6rem; flex-direction: row; align-items: center; gap: 3.2rem; }
  .v1-endcta__line { font-size: 3.2rem; line-height: 3.8rem; }
  .v1-endcta__line--sm { font-size: 2rem; line-height: 2.8rem; }
  .v1-endcta--row { margin-top: 8rem; }
}

/* ==================== section heads ==================== */
/* bands: sheet (research) | mist (looks) | paper (free result) | mist (report) | paper (prices) | mist (answers) | pine (close) */
.v1-head { max-width: 64rem; }
/* the section right under the hero starts a little closer to it */
.v1 > .v1-sec:first-child { padding-top: calc(var(--v1-sec) * .8); }
@media (min-width: 1024px) { .v1 > .v1-sec:first-child { padding-top: calc(var(--v1-sec) * .6); } }
.v1-head .v1-lede { max-width: 52ch; }

/* ==================== paper bands: free result, prices ==================== */
.v1-band { background: var(--v1-paper); }
.v1-band .v1-tag, .v1-band .v1-mono, .v1-band .v1-small { color: #4C5751; }
.v1-free__grid { display: grid; gap: 4.8rem; }
.v1-result {
  background: var(--v1-sheet); border: 1px solid rgba(17, 22, 20, .08); border-radius: 16px; padding: 2.4rem;
  box-shadow: 0 1px 2px rgba(17, 22, 20, .04), 0 12px 32px -16px rgba(17, 22, 20, .12);
}
.v1-result .v1-mono { color: var(--v1-ink3); }
.v1-result__top { display: grid; grid-template-columns: 10.4rem 1fr; gap: 1.6rem; align-items: start; }
.v1-result__photo { width: 10.4rem; aspect-ratio: 4 / 5; height: auto; border-radius: 10px; object-fit: cover; background: var(--v1-paper); }
.v1-result__shape { margin-top: .4rem; font-size: 3.2rem; line-height: 3.6rem; font-weight: 340; letter-spacing: -.02em; }
.v1-result__p { margin-top: 1.2rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--v1-ink2); text-wrap: pretty; }
.v1-result__top .v1-result__p { margin-top: .8rem; font-size: 1.5rem; line-height: 2.2rem; }
.v1-result__blk { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--v1-line); }
.v1-chgs { margin-top: .4rem; }
.v1-chg { padding: 1.6rem 0; }
.v1-chg + .v1-chg { border-top: 1px solid var(--v1-line); }
.v1-chg:last-child { padding-bottom: 0; }
.v1-chg__cat { display: flex; gap: .8rem; align-items: baseline; font-size: 13px; line-height: 18px; color: var(--v1-ink3); }
.v1-chg__n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; color: var(--v1-field); }
.v1-chg__t { margin-top: .2rem; font-size: 1.7rem; line-height: 2.4rem; font-weight: 400; }
.v1-chg__w { margin-top: .4rem; font-size: 1.5rem; line-height: 2.2rem; color: var(--v1-ink2); text-wrap: pretty; }
.v1-result__detail { margin: 2.4rem -2.4rem -2.4rem; padding: 1.6rem 2.4rem 2rem; background: #F1F4F1; border-top: 1px solid var(--v1-line); border-radius: 0 0 16px 16px; }
.v1-result__dt { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6rem; font-size: 1.4rem; line-height: 2rem; font-weight: 400; }
.v1-result__dt span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--v1-ink3); font-weight: 400; }
.v1-nums { margin-top: 1rem; }
.v1-num { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6rem; padding: .8rem 0; border-top: 1px solid var(--v1-line); }
.v1-num:first-child { border-top: 0; }
.v1-num dt { font-size: 1.4rem; line-height: 2rem; color: var(--v1-ink2); }
.v1-num dd { margin: 0; display: flex; align-items: baseline; gap: .6rem; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.v1-num__v { font-size: 1.6rem; line-height: 2rem; color: var(--v1-ink); }
.v1-num__pm { font-size: 12px; line-height: 16px; color: var(--v1-ink3); }
@media (min-width: 1024px) {
  .v1-free__grid { grid-template-columns: repeat(12, 1fr); column-gap: 2.4rem; align-items: start; }
  .v1-free__text { grid-column: 1 / 6; position: sticky; top: 12rem; }
  .v1-result { grid-column: 7 / 13; padding: 3.2rem; }
  .v1-result__top { grid-template-columns: 22rem 1fr; gap: 2.8rem; }
  .v1-result__photo { width: 22rem; border-radius: 12px; }
  .v1-result__shape { margin-top: .8rem; font-size: 4rem; line-height: 4.4rem; }
  .v1-result__top .v1-result__p { margin-top: 1.2rem; font-size: 1.6rem; line-height: 2.4rem; }
  .v1-chg { padding: 2rem 0; }
  .v1-result__detail { margin: 3.2rem -3.2rem -3.2rem; padding: 2rem 3.2rem 2.4rem; }
}
@media (min-width: 1440px) {
  .v1-result__p, .v1-result__top .v1-result__p { font-size: 1.8rem; line-height: 2.8rem; }
  .v1-chg__t { font-size: 2rem; line-height: 2.8rem; }
  .v1-chg__w { font-size: 1.7rem; line-height: 2.6rem; }
  .v1-chg__cat, .v1-result__dt, .v1-num dt { font-size: 1.5rem; line-height: 2.2rem; }
  .v1-num__v { font-size: 1.8rem; line-height: 2.4rem; }
}

/* report pages: three sheets. Phone: a snap row with a peek; the sheets share one height (the row's), each spreads its
   content over it (hairstyles: heading at the top, the cuts at the foot), and every one fits the screen under the bar. 768-1023: the three stacked full width. 1024+: hairstyles across the full width, facial
   balance and the plan side by side under it, sharing one height */
/* the jump from the hero lands with the h2 just under the bar at every width (site.css adds its 96px scroll-padding) */
#what-you-get { scroll-margin-top: calc(2.4rem - var(--v1-sec)); }
.v1-pages {
  margin: 3.2rem calc(var(--v1-g) * -1) 0; padding: 0 var(--v1-g) .4rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(88vw, 36rem); gap: 1.2rem;
  align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--v1-g); scrollbar-width: none; overscroll-behavior-x: contain;
}
.v1-pages::-webkit-scrollbar { display: none; }
.v1-page {
  scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; padding: 1.6rem 1.8rem 2.2rem;
  background: var(--v1-sheet); border: 1px solid rgba(17, 22, 20, .08); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 22, 20, .04), 0 16px 32px -20px rgba(17, 22, 20, .16);
}
.v1-page__run { display: flex; align-items: center; gap: .8rem; min-width: 0; padding-bottom: 1.2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--v1-line);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--v1-ink3); }
.v1-page__sec { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v1-page__mark { width: 16px; height: 16px; flex: none; }
.v1-page__n { flex: none; }
.v1-page__t { font-size: 2.2rem; line-height: 2.8rem; font-weight: 360; letter-spacing: -.014em; text-wrap: balance; }
.v1-page__lede { margin-top: .8rem; font-size: 1.4rem; line-height: 2rem; color: var(--v1-ink2); text-wrap: pretty; }
.v1-page__foot { margin-top: auto; padding-top: 1.6rem; font-size: 13px; line-height: 19px; color: var(--v1-ink3); text-wrap: pretty; }
/* sheet 1: the heading with his photo as a small labelled tile (the input), then the three cuts as photos, 3 across */
.v1-hs__head { display: grid; grid-template-columns: 1fr 8rem; gap: 1.6rem; align-items: start; }
.v1-hs__you { grid-column: 2; grid-row: 1; }
.v1-hs__you .v1-mono { margin-bottom: .6rem; white-space: nowrap; }
.v1-hs__img { width: 8rem; aspect-ratio: 4 / 5; height: auto; border-radius: 8px; object-fit: cover; background: var(--v1-paper); }
.v1-hs__text { grid-column: 1; grid-row: 1; }
@media (max-width: 767px) {
  .v1-hs { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 2.4rem; }
  .v1-page--plan .v1-phases { flex: 1; display: flex; flex-direction: column; }
  .v1-page--plan .v1-phases li:not(:last-child) { flex: 1 0 auto; }
}
.v1-cuts { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.v1-cuts li { min-width: 0; }
.v1-cuts .v1-mono { color: var(--v1-field); }
.v1-cuts__cap { margin-top: .8rem; }
.v1-cuts__img { width: 100%; aspect-ratio: 4 / 5; height: auto; border-radius: 8px; object-fit: cover; object-position: 50% 28%; background: var(--v1-paper); }
.v1-cuts__t { margin-top: .2rem; font-size: 14px; line-height: 19px; font-weight: 400; color: var(--v1-ink); text-wrap: pretty; }
.v1-cuts__from { margin-top: .4rem; font-size: 13px; line-height: 18px; color: var(--v1-field); }
/* sheet 2: his photo with the scan's real 478 points, large; then the tests by feature */
.v1-bal { display: flex; flex-direction: column; flex: 1; }
.v1-bal__body { display: flex; flex-direction: column; flex: 1; margin-top: 2rem; }
.v1-mesh { aspect-ratio: 2 / 1; border-radius: 8px; overflow: hidden; background: #2E3833; }
/* phone zoom 1.18: 305px x 1.18 x 3 is about the 1080 file, so the face under the points stays sharp */
.v1-mesh__in { position: relative; width: 100%; height: 100%; transform: scale(1.18); transform-origin: 49% 49%; }
.v1-mesh__in img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9); }
.v1-mesh__pts { position: absolute; inset: 0; width: 100%; height: 100%; }
.v1-mesh__pts path { fill: none; stroke: #F3F5F2; stroke-width: 4.4; stroke-linecap: round; opacity: .88; }
/* three measured values: the feature and test on the left, the value on the right, what it measures under them */
.v1-feats { margin-top: 1.6rem; }
.v1-feat { display: grid; grid-template-columns: 1fr auto; column-gap: 1.6rem; padding: 1.2rem 0; border-top: 1px solid var(--v1-line); }
.v1-feat:last-child { border-bottom: 1px solid var(--v1-line); }
.v1-feat dt { grid-column: 1; grid-row: 1; min-width: 0; }
.v1-feat dt .v1-mono { display: none; color: var(--v1-field); }
.v1-feat__n { display: block; margin-top: .2rem; font-size: 1.6rem; line-height: 2.2rem; font-weight: 400; color: var(--v1-ink); }
.v1-feat dd { margin: 0; }
.v1-feat__v { grid-column: 2; grid-row: 1; align-self: end; font-size: 2.6rem; line-height: 2.8rem; font-weight: 340; letter-spacing: -.02em; color: var(--v1-ink); font-variant-numeric: tabular-nums lining-nums; }
.v1-feat__w { grid-column: 1 / -1; margin-top: .2rem; font-size: 1.4rem; line-height: 2rem; color: var(--v1-ink2); text-wrap: pretty; }
.v1-feat__ref { grid-column: 1 / -1; margin-top: .4rem; font-size: 13px; line-height: 18px; color: var(--v1-ink3); text-wrap: pretty; }
/* sheet 3: the plan */
.v1-phases { margin-top: 2rem; position: relative; }
.v1-phases li { position: relative; padding: 0 0 2rem 2rem; }
.v1-phases li::before { content: ""; position: absolute; left: 0; top: .5rem; width: 7px; height: 7px; border-radius: 50%; background: var(--v1-pine); }
.v1-phases li::after { content: ""; position: absolute; left: 3px; top: 1.6rem; bottom: 0; width: 1px; background: var(--v1-line); }
.v1-phases li:last-child { padding-bottom: 0; }
.v1-phases li:last-child::after { display: none; }
.v1-phase__t { margin-top: .4rem; font-size: 1.6rem; line-height: 2.2rem; font-weight: 400; }
.v1-phase__l { margin-top: .4rem; font-size: 1.4rem; line-height: 2rem; color: var(--v1-ink2); text-wrap: pretty; }
@media (min-width: 768px) {
  .v1-pages { margin: 4.8rem 0 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(12, 1fr); gap: 2.4rem; }
  .v1-page { grid-column: 1 / 13; padding: 2.4rem 2.8rem 2.8rem; }
  .v1-hs { display: grid; gap: 2.4rem; }
  .v1-hs__head { grid-template-columns: 1fr 9.6rem; gap: 2.4rem; align-items: start; }
  .v1-hs__img { width: 9.6rem; }
  .v1-hs__text { max-width: 48ch; }
  .v1-cuts { margin-top: 0; gap: 1.6rem; }
  .v1-cuts__cap { margin-top: 1.2rem; }
  .v1-cuts__t { font-size: 1.6rem; line-height: 2.2rem; }
  /* sheet 2 from 768: the mesh photo on the left, the tests beside it */
  .v1-bal { display: grid; grid-template-columns: 42% 1fr; gap: 2.8rem; align-items: stretch; }
  .v1-mesh { aspect-ratio: 4 / 5; align-self: start; }
  .v1-mesh__in { transform: scale(1.35); }
  .v1-bal__body { margin-top: 0; }
  .v1-feats { margin-top: 2rem; }
  .v1-feat dt .v1-mono { display: block; }
  .v1-feat { padding: 1.6rem 0; }
}
@media (min-width: 1024px) {
  .v1-mesh { aspect-ratio: auto; align-self: stretch; }   /* fill the sheet height beside the values (image cover + points slice share the box) */
  .v1-pages { margin-top: 5.6rem; }
  .v1-pages { align-items: stretch; }
  .v1-page--bal { grid-column: 1 / 8; }
  .v1-page--plan { grid-column: 8 / 13; }
  .v1-page__t { font-size: 2.6rem; line-height: 3.2rem; }
  .v1-page__lede, .v1-phase__l, .v1-feat__w { font-size: 1.5rem; line-height: 2.2rem; }
  .v1-feat__n { font-size: 1.7rem; line-height: 2.4rem; }
  .v1-feat__v { font-size: 3.2rem; line-height: 3.6rem; }
  .v1-phase__t { font-size: 1.7rem; line-height: 2.4rem; }
  /* sheet 1: one row. The head column holds the heading at the top and his labelled tile at the foot; the tile's bottom
     edge sits level with the cut photos' bottom edge (the photos and the head share grid row 1, the captions row 2) */
  .v1-hs { grid-template-columns: 1.3fr repeat(3, 1fr); grid-template-rows: auto auto; column-gap: 2.4rem; row-gap: 0; align-items: stretch; }
  .v1-hs__head { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 2.4rem; padding-right: .8rem; }
  .v1-hs__text { max-width: none; }
  .v1-hs__you { order: 2; display: flex; align-items: flex-end; gap: 1.2rem; }
  .v1-hs__you .v1-mono { order: 2; margin: 0; }
  .v1-hs__img { width: 9.6rem; }
  .v1-cuts { grid-column: 2 / 5; grid-row: 1 / 3; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 0 2.4rem; }
  .v1-cuts li { grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; }
  .v1-cuts__img { align-self: end; }
  .v1-cuts__t { font-size: 1.7rem; line-height: 2.4rem; }
  /* the plan's phases share out the sheet's height, so it ends level with facial balance */
  .v1-page--plan .v1-phases { flex: 1; display: flex; flex-direction: column; }
  .v1-page--plan .v1-phases li:not(:last-child) { flex: 1 0 auto; }
}
@media (min-width: 1800px) {
  .v1-page { padding: 3.2rem 3.6rem 3.6rem; }
  .v1-page__t { font-size: 3rem; line-height: 3.6rem; }
  .v1-page__lede, .v1-phase__l, .v1-feat__w { font-size: 1.7rem; line-height: 2.6rem; }
  .v1-feat__n { font-size: 1.9rem; line-height: 2.6rem; }
  .v1-phase__t, .v1-cuts__t { font-size: 1.9rem; line-height: 2.6rem; }
  .v1-hs__img { width: 11.2rem; }
}

/* ==================== S6 pricing ==================== */
.v1-tiers { margin-top: 4rem; display: grid; gap: 1.6rem; }
.v1-tier { position: relative; display: flex; flex-direction: column; padding: 2.4rem; border-radius: 16px; background: var(--v1-mist); }
.v1-tier--rec { background: var(--v1-sheet); box-shadow: inset 0 0 0 1.5px var(--v1-pine); }
.v1-tier__pr { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: .8rem; }
.v1-tier__rec { flex: none; padding: .4rem 1rem; border-radius: 999px; background: var(--v1-pine); color: var(--v1-mist); }
.v1-tier__name { font-size: 2rem; line-height: 2.6rem; font-weight: 380; letter-spacing: -.01em; }
.v1-tier__price { font-size: 4.4rem; line-height: 4.8rem; font-weight: 320; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.v1-tier__head { margin-top: 1.2rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--v1-ink); text-wrap: pretty; }
.v1-tier__rows li span { text-wrap: pretty; }
.v1-tier__lead { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--v1-line); font-size: 1.4rem; line-height: 2rem; color: var(--v1-ink3); }
.v1-tier__rows { margin-top: 1.2rem; display: grid; gap: 1rem; }
.v1-tier__head + .v1-tier__rows { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--v1-line); }
.v1-tier__rows li { display: grid; grid-template-columns: 1.8rem 1fr; gap: 1rem; font-size: 1.5rem; line-height: 2.2rem; }
.v1-tier__rows small { display: block; margin-top: .4rem; font-size: 13px; line-height: 19px; color: var(--v1-ink3); }
.v1-check { width: 18px; height: 18px; margin-top: 2px; color: var(--v1-field); }
.v1-tier__ready { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--v1-line); text-wrap: pretty; font-size: 13px; line-height: 19px; color: var(--v1-ink3); }
/* 768-1023: the recommended card first across the full width (its rows in two columns), $29 and $119 side by side under
   it. 1024+: the $59 on the left, $29 above $119 on the right, the two columns one height (no hole beside the $59) */
@media (min-width: 768px) {
  .v1-tiers { grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; }
  .v1-tier { padding: 3.2rem; }
  .v1-tier--rec { grid-column: 1 / 3; order: -1; }
  .v1-tier--rec .v1-tier__rows { grid-template-columns: 1fr 1fr; column-gap: 3.2rem; row-gap: 1.6rem; align-items: start; }
  .v1-tier__ready { font-size: max(12px, 1.3rem); }
}
@media (min-width: 1024px) {
  .v1-tiers { margin-top: 6.4rem; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-items: stretch; }
  .v1-tier--rec { grid-column: 1; grid-row: 1 / 3; order: 0; }
  .v1-tier:not(.v1-tier--rec) { grid-column: 2; }
  /* the $59 is the shorter column: its rows share out the extra height evenly, so it ends level with the $119 */
  .v1-tier--rec .v1-tier__rows { flex: 1 0 auto; grid-template-columns: 1fr; row-gap: 2.4rem; align-content: space-between; }
  .v1-tier--rec .v1-tier__head { font-size: 1.8rem; line-height: 2.6rem; }
  .v1-tier--rec .v1-tier__price { font-size: 5.6rem; line-height: 6rem; }
  .v1-tier--rec .v1-tier__rows li { grid-template-columns: 2rem 1fr; font-size: 1.7rem; line-height: 2.4rem; }
  .v1-tier--rec .v1-tier__rows small { font-size: max(13px, 1.5rem); line-height: 2.2rem; }
  .v1-tier--rec .v1-check { margin-top: 3px; }
  .v1-tier__rows { margin-bottom: 2.4rem; }
  .v1-tier__ready { margin-top: auto; }
}

/* two plans (CEVO_TWO_TIER): phone stacks $59 then $119; 768+ side by side, one height, the $119's plain "+$60 adds" line
   above its ready line */
.v1-tier__delta { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--v1-line); font-size: 1.5rem; line-height: 2.2rem; color: var(--v1-ink); text-wrap: pretty; }
.v1-tier__delta + .v1-tier__ready { margin-top: 1.2rem; padding-top: 0; border-top: 0; }
@media (min-width: 768px) {
  .v1-tiers--two { align-items: stretch; }
  .v1-tiers--two .v1-tier--rec { grid-column: auto; order: 0; }
  .v1-tiers--two .v1-tier--rec .v1-tier__rows { grid-template-columns: 1fr; row-gap: 1rem; }
  .v1-tiers--two .v1-tier__ready { margin-top: auto; }
  /* the delta stays under the $119's rows; its ready line drops to the card foot, level with the $59's */
  .v1-tiers--two .v1-tier__delta + .v1-tier__ready { margin-top: auto; padding-top: 2.4rem; }
}
@media (min-width: 1024px) {
  .v1-tiers--two { grid-template-rows: auto; }
  .v1-tiers--two .v1-tier--rec, .v1-tiers--two .v1-tier:not(.v1-tier--rec) { grid-column: auto; grid-row: auto; }
  .v1-tiers--two .v1-tier--rec .v1-tier__rows { flex: 0 0 auto; row-gap: 1.6rem; align-content: start; }
}

/* ==================== S7 FAQ ==================== */
.v1-faq .v1-wrap > .v1-h2 { margin-bottom: 3.2rem; }
.v1-q { border-top: 1px solid var(--v1-line); }
.v1-q:last-child { border-bottom: 1px solid var(--v1-line); }
.v1-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; min-height: 5.6rem; padding: 1.2rem 0; cursor: pointer;
  list-style: none; font-size: 1.7rem; line-height: 2.4rem; font-weight: 380;
}
.v1-q summary::-webkit-details-marker { display: none; }
.v1-plus { flex: none; width: 20px; height: 20px; color: var(--v1-ink3); transition: transform .25s var(--v1-ease), color .2s; }
.v1-q summary:hover .v1-plus { color: var(--v1-ink); }
.v1-q[open] .v1-plus { transform: rotate(45deg); color: var(--v1-ink); }
.v1-q::details-content { block-size: 0; overflow: hidden; transition: block-size .25s var(--v1-ease), content-visibility .25s allow-discrete; }
.v1-q[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .v1-q::details-content { transition: none; } }
.v1-q__a p { padding: 0 3.6rem 2.4rem 0; font-size: 1.6rem; line-height: 2.4rem; color: var(--v1-ink2); text-wrap: pretty; max-width: 62ch; }
@media (min-width: 1024px) {
  .v1-faq__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2.4rem; align-items: start; }
  .v1-faq .v1-wrap > .v1-h2 { grid-column: 1 / 5; margin: 0; }
  .v1-faq__list { grid-column: 6 / 13; }
  .v1-q summary { min-height: 7.2rem; font-size: 2rem; line-height: 2.8rem; }
  .v1-q__a p { font-size: 1.7rem; line-height: 2.6rem; }
}

/* ==================== S8 closing: a pine band, the one Sage studio moment before the footer ==================== */
.v1-close { background: var(--v1-pine); color: var(--v1-mist); }
.v1-close { padding-bottom: 0; }
.v1-close__grid { display: grid; gap: 4.8rem; }
.v1-close__media { margin-inline: calc(var(--v1-g) * -1); }
.v1-close__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #2E5546; }
.v1-close .v1-h2 { color: var(--v1-mist); }
.v1-close .v1-lede { color: #D2DCD5; }
.v1-close .v1-small { color: #B8C7BD; }
.v1-btn--light { background: var(--v1-mist); color: var(--v1-pine); }
.v1-btn--light:hover { background: #FFFFFF; }
.v1-btn--light:active { background: #E4EBE6; }
.v1-close .v1-btn:focus-visible { outline-color: var(--v1-mist); }
@media (max-width: 767px) { .v1-close__media img { max-height: 70vh; max-height: 70svh; object-position: 50% 30%; } }
@media (min-width: 768px) {
  .v1-close { padding-block: var(--v1-sec); }
  .v1-close__grid { grid-template-columns: repeat(12, 1fr); column-gap: 2.4rem; align-items: center; }
  .v1-close__media { margin-inline: 0; grid-column: 1 / 6; grid-row: 1; }
  .v1-close__media img { border-radius: var(--v1-r); }
  .v1-close__text { grid-column: 7 / 13; grid-row: 1; align-self: end; }
}
@media (min-width: 1024px) {
  .v1-close { padding-block: 12rem; }
  .v1-close__text { align-self: center; }
  .v1-close__media { grid-column: 1 / 7; max-width: 52rem; }
  .v1-close__text .v1-h2 { font-size: 6.4rem; line-height: 6.8rem; }
}
@media (min-width: 1800px) { .v1-close__media { max-width: 56rem; } }

/* ==================== S9 footer ==================== */
.v1-foot { padding: 5.6rem 0 3.2rem; background: var(--v1-mist); }
html.ck-open .v1-foot { padding-bottom: var(--ck-h, 0px); }   /* the open cookie card's height is reserved inside the footer (css/cookie-settings.css does this for .site-foot) */
.v1-foot__logo { display: inline-flex; align-items: center; min-height: 44px; margin-left: -3px; }   /* -3px: the C's side bearing, so it lines up with the text */
.v1-foot__logo img { height: 3.4rem; width: auto; }
.v1-foot__line { margin-top: 1.2rem; max-width: 34ch; font-size: 1.4rem; line-height: 2rem; color: var(--v1-ink2); }
.v1-foot__social { display: flex; gap: .4rem; margin: 1.6rem 0 0 -1.2rem; }
.v1-foot__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--v1-ink3); transition: color .2s var(--v1-ease); }
.v1-foot__social a:hover { color: var(--v1-ink); }
.v1-foot__ico { width: 20px; height: 20px; }
.v1-foot__nav { margin-top: 3.2rem; display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
.v1-foot__col h3 { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--v1-ink3); font-weight: 400; margin: 0 0 .4rem; }
.v1-foot__col ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.6rem; row-gap: .4rem; align-items: start; }
.v1-foot__col li { display: flex; }
.v1-foot__col a, .v1-foot__cookie {
  display: flex; align-items: flex-start; min-height: 44px; min-width: 44px; margin: 0; padding: 13px 0; vertical-align: top; font-size: 1.4rem; line-height: 1.8rem; color: var(--v1-ink); transition: color .2s;
}
.v1-foot__cookie { appearance: none; border: 0; background: none; font: inherit; font-size: 1.4rem; line-height: 1.8rem; cursor: pointer; text-align: left; }
.v1-foot__col a:hover, .v1-foot__cookie:hover { color: var(--v1-field); }
.v1-foot__base { margin-top: 3.2rem; padding-top: 1.6rem; border-top: 1px solid var(--v1-line); display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; align-items: center; }
.v1-foot__base > li { display: flex; align-items: center; min-height: 44px; }   /* every line as tall as the link line */
.v1-foot__base li, .v1-foot__base a { font-size: 13px; line-height: 20px; color: var(--v1-ink3); }
.v1-foot__base a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; transition: color .2s; }
.v1-foot__base a:hover { color: var(--v1-ink); }
@media (min-width: 768px) {
  .v1-foot__col ul { grid-template-columns: 1fr; }
  .v1-foot__nav { grid-template-columns: 1fr 1.4fr; gap: 3.2rem 2.4rem; }   /* Explore | Free tools, then Company | Legal */
}
@media (min-width: 1024px) {
  .v1-foot { padding: 9.6rem 0 4rem; border-top: 0; }
  .v1-foot__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2.4rem; }
  .v1-foot__brand { grid-column: 1 / 4; }
  .v1-foot__nav { grid-column: 4 / 13; margin-top: 0; grid-template-columns: .8fr 1.25fr .7fr 1.5fr; column-gap: 2.4rem; }
  .v1-foot__col h3 { margin-bottom: 1.2rem; }
  .v1-foot__base { margin-top: 8rem; padding-top: 2.4rem; }
  .v1-foot__base li, .v1-foot__base a { font-size: max(12px, 1.3rem); }
  .v1-foot__col ul { display: grid; grid-template-columns: 1fr; row-gap: 0; }
  .v1-foot__col a, .v1-foot__cookie { font-size: max(13px, 1.4rem); }
}
/* tighter footer rows only for a mouse; touch tablets at 1024+ keep the 44px rows */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .v1-foot__col a, .v1-foot__cookie { min-height: 3.2rem; padding-block: .6rem; }
  .v1-foot__base a, .v1-foot__base > li { min-height: 3.2rem; }
}

/* ---------- research: what studies found about looks (sheet band, tab row + 4 cards per area) ---------- */
.v1-halo { background: var(--v1-sheet); }
.v1-halo__ui { margin-top: 3.2rem; }
.v1-halo__bar { margin-inline: calc(-1 * var(--v1-g)); padding: 2px var(--v1-g); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.v1-halo__bar::-webkit-scrollbar { display: none; }
.v1-halo__tabs { position: relative; display: inline-flex; gap: .2rem; padding: .4rem; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--v1-line); background: var(--v1-mist); white-space: nowrap; }
.v1-halo__tabs::before { content: ""; position: absolute; top: .4rem; bottom: .4rem; left: 0; width: var(--v1-halo-w, 0); transform: translateX(var(--v1-halo-x, 0)); border-radius: 9999px; background: var(--v1-pine); opacity: 0; }
.v1-halo__ui.is-js .v1-halo__tabs::before { opacity: 1; }
.v1-halo__ui.is-ready .v1-halo__tabs::before { transition: transform .32s var(--v1-ease), width .32s var(--v1-ease); }
.v1-halo__tab {
  position: relative; z-index: 1; appearance: none; border: 0; margin: 0; background: none; font: inherit; cursor: pointer;
  min-height: 44px; padding: 0 1.8rem; border-radius: 9999px; font-size: 1.5rem; line-height: 2rem; font-weight: 370; color: var(--v1-ink2);
  transition: color .2s var(--v1-ease);
}
.v1-halo__tab:hover { color: var(--v1-ink); }
.v1-halo__tab[aria-selected="true"] { color: var(--v1-mist); background: var(--v1-pine); }
.v1-halo__ui.is-js .v1-halo__tab[aria-selected="true"] { background: none; }
.v1 .v1-halo__tab:focus-visible { outline: 2px solid var(--v1-pine); outline-offset: 2px; border-radius: 9999px; }
.v1-halo__panel { margin-top: 2rem; }
.v1-halo__cards { display: grid; gap: 1.2rem; }
.v1-halo__card { display: flex; flex-direction: column; min-height: 30rem; padding: 2.4rem; border-radius: 16px; background: var(--v1-mist); box-shadow: inset 0 0 0 1px var(--v1-line); }
.v1-halo__t { font-size: 2.4rem; line-height: 3rem; font-weight: 340; letter-spacing: -.016em; color: var(--v1-ink); text-wrap: balance; }
.v1-halo__t span { color: #6A7A71; }   /* the grey lead word: 4.0:1 on mist */
.v1-halo__line { margin-top: 1.2rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--v1-ink2); text-wrap: pretty; }
.v1-halo__cite { margin-top: auto; padding-top: 3.2rem; display: grid; gap: .8rem; font-size: 13px; line-height: 18px; color: var(--v1-ink3); text-wrap: pretty; }
.v1-halo__doc { display: block; color: var(--v1-ink3); }
.v1-halo .v1-ctabox { margin-top: 4rem; }
/* phones: the four cards are one swipe row with the next card peeking */
@media (max-width: 767px) {
  .v1-halo__cards { grid-auto-flow: column; grid-auto-columns: 82%; margin-inline: calc(-1 * var(--v1-g)); padding: 0 var(--v1-g) .4rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--v1-g); scrollbar-width: none; overscroll-behavior-x: contain; }
  .v1-halo__cards::-webkit-scrollbar { display: none; }
  .v1-halo__card { scroll-snap-align: start; min-height: 32rem; }
}
@media (min-width: 768px) {
  .v1-halo__ui { margin-top: 4.8rem; }
  .v1-halo__cards { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .v1-halo__card { min-height: 32rem; padding: 2.8rem; }
}
@media (min-width: 768px) and (max-width: 1023px) { .v1-halo__tab { padding: 0 1.4rem; } }
@media (min-width: 1024px) {
  .v1-halo__ui { margin-top: 6.4rem; }
  .v1-halo__panel { margin-top: 2.4rem; }
  .v1-halo__cards { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .v1-halo__card { min-height: 34rem; padding: 3.2rem; }
  .v1-halo__t { font-size: 2.8rem; line-height: 3.4rem; }
  .v1-halo__line { margin-top: 1.6rem; font-size: 1.7rem; line-height: 2.6rem; }
  .v1-halo__cite { font-size: max(13px, 1.4rem); line-height: 2rem; }
  .v1-halo__tab { padding: 0 2.2rem; font-size: max(13px, 1.5rem); }
  .v1-halo .v1-ctabox { margin-top: 5.6rem; }
}
/* 1280+: four columns, the titles, findings and citations of a row on shared lines */
@media (min-width: 1280px) {
  .v1-halo__cards { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto 1fr; min-height: 58rem; }   /* one height for every tab: fits the tallest (Influence) */
  .v1-halo__card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .v1-halo__cite { align-self: end; }
}
/* tab switch: the new cards rise in, staggered */
@keyframes v1-halo-in { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
.v1-halo__panel.is-enter .v1-halo__card { animation: v1-halo-in .36s var(--v1-ease) both; }
.v1-halo__panel.is-enter .v1-halo__card:nth-child(2) { animation-delay: .04s; }
.v1-halo__panel.is-enter .v1-halo__card:nth-child(3) { animation-delay: .08s; }
.v1-halo__panel.is-enter .v1-halo__card:nth-child(4) { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .v1 *, .v1 *::before, .v1 *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}


/* very wide screens: a wider measure and one type step up, so the page does not sit as a small column */
@media (min-width: 1800px) {
  .v1 { --v1-max: 140rem; --v1-sec: 18rem; }
  .v1-h2 { font-size: 6rem; line-height: 6.4rem; }
  .v1-lede { font-size: 2rem; line-height: 3rem; }
  .v1-line { font-size: 2.4rem; line-height: 3.2rem; }
  .v1-tag, .v1-lab, .v1-mono, .v1-page__run, .v1-tier__rec, .v1-tog__b { font-size: 13px; line-height: 18px; }
}