/* Round 5 · what changed over Round 4, in one place (2026-10-01). Loaded last. */

/* The 58 as the campaign photographs it: a soft, out-of-focus copy above, and the focused copy whose strokes show only
   where light catches their lower edges. The lit copy and its warm fringe are the digits again, filled with a vertical
   gradient and slid a hair's breadth down out from under the black body; the soft copies are pre-rendered in the brand
   face (site/r6/imagery/score-ghost-*.webp), so no blur is computed while scrolling. These rules are the still, which is
   what reduced motion and no-JS get; r5-focus.js animates from a start state to them. */
.r3-score-figure{position:relative}
.r3-score-figure .r3-number-echo{display:none}
.r3-score-figure .r3-number-ink{text-shadow:none;position:relative;z-index:3}
.r3-score-figure .r3-score-digit{color:#fff;-webkit-text-stroke:0} /* Round 6 (2026-10-07): the crisp white 58 is the type itself; r5-focus.js brings it up inside the fog */
.r3-score-figure .r3-score-denominator{color:#fff}
.r5-ghost{position:absolute;left:-.375em;top:-.375em;width:1.7875em;height:1.6em;pointer-events:none;z-index:1} /* the drop's soft copy; its images are hidden in the still */
.r5-ghost img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0}
.r5-ghost img.r5-ghost-a{opacity:.28}.r5-ghost img.r5-ghost-b{opacity:.62} /* Round 6: at rest the fog is a halo behind the number (these are also the still state without motion); r5-focus.js animates from 0 to these */
.r5-still{display:none} /* Round 6 (the client, 2026-10-07): the photograph with the blurred top fails ADA and is not shown; the number is the crisp type with the fog as a halo */
.r5-rim{display:none}
/* The chapter's film grain, the still's texture; over everything, under nothing that is pressed. */
#dc-root #study-intro{position:relative}
#dc-root #study-intro::after{content:"";position:absolute;inset:0;background:url(/r6/imagery/grain.png) 0 0/192px 192px repeat;opacity:.14;pointer-events:none;z-index:5}
/* The run of light is retired with Round 5; nothing of it draws. */
.r4-light{display:none!important}

/* "Explore the study" on the hero: the site-wide link rollover turns links black, which vanishes on the dark photograph; this one stays white at 75% (Krish, 2026-10-01). */
#story .v7-campaign-scroll:hover{color:#fff;opacity:.75}

/* The six dimension tiles on laptops: no bracket marks on the photographs, and the tiles aligned (the column slide is off in r4.js) (Krish, 2026-10-01). */
@media(min-width:1024px){ #findings .door .mk-br{display:none} }

/* The dimension description overlay carries one campaign bracket in its bottom-left corner (Krish, 2026-10-01). */
#findings .r2r-dimension-description::after{content:"";position:absolute;left:12px;bottom:12px;width:22px;height:22px;border-left:1px solid #fff;border-bottom:1px solid #fff;opacity:.9;pointer-events:none}

/* The slide-out drawers in Equinox black and white: no pink or red anywhere inside them (Krish, 2026-10-01).
   The number readers: bars in the drawer's own ink (white on the dark reader, black on the light one); the attention
   reader's first row full, the others half. The age deep dives: the comparison bar grey. The "about this finding"
   panels: a neutral tint. */
.r2-reader .r2-reader-bar{background:currentColor}
.r2-reader[data-reader=attention] .r2-reader-bar{background:currentColor;opacity:.5}
.r2-reader[data-reader=attention] .r2-reader-row:first-child .r2-reader-bar{opacity:1}
.r2-reader--signal .r2-reader-bar,.r2-reader--signal[data-reader=attention] .r2-reader-bar{background:#fff}
.r2-reader--signal{border-left-color:#3a3a3a}
.r2-reader--signal .r2-reader-glow{background:radial-gradient(ellipse at 20% 50%,rgba(255,255,255,.06),transparent 58%)}
.r2-reader--signal .r2-reader-signal{stroke:#fff}
.r2-reader--signal .r2-reader-close:hover{color:#fff}
.r2-reader--signal .r2-reader-close:focus-visible{outline-color:#fff}
.r2-reader--signal .r2-reader-track{background:#2a2a2a}
.r2-reader--signal .r2-reader-track::after{background:#555}
.r2-reader--signal .r2-reader-figure{border-top-color:#3a3a3a}
#r2-age-evidence .r2r-bar-pair>div+div i,#r2-age-evidence .r2r-age-legend span+span i,.r2-reader .r2r-bar-pair>div+div i,.r2-reader .r2r-age-legend span+span i{background:#8a8a8a}
[data-number-detail],[data-number-detail="joy"]{--nd-tint:#8a8a8a}
.v7-chapter-dark [data-number-detail],.v7-study-stage [data-number-detail]{--nd-tint:#b8b8b8}

/* The drawers on laptops (Krish, 2026-10-01): narrower, a size smaller throughout so they read as data drawers, and a thin
   edge on the side that slides, with a little shadow under it so the drawer sits over the story. */
@media(min-width:1024px){
 .r2-reader{width:min(600px,100%);padding-left:40px;padding-right:40px;border-left:1px solid rgba(0,0,0,.35);box-shadow:-24px 0 48px rgba(0,0,0,.35)}
 .r2-reader--signal{width:min(600px,100%);border-left:1px solid rgba(255,255,255,.5);box-shadow:-24px 0 48px rgba(0,0,0,.55)}
 .r2-reader--signal .r2-reader-title{font-size:34px}
 .r2-reader--signal .r2-reader-question{font-size:16px}
 .r2-reader--signal .r2-reader-summary-number{font-size:84px}
 .r2-reader--signal .r2-reader-summary-copy{font-size:16px}
 .r2-reader--signal .r2-reader-measure{font-size:17px}
 .r2-reader--signal .r2-reader-context{font-size:13px}
 .r2-reader--signal .r2-reader-axis{font-size:11px}
 .r2-reader--signal .r2-reader-label{font-size:15px}
 .r2-reader--signal .r2-reader-value{font-size:20px}
 .r2-reader--signal .r2-reader-close{font-size:13px}
 .r2-reader--signal .r2-reader-close-mark{font-size:24px}
 .r2-reader-measure{font-size:16px}
 .r2-reader-context{font-size:13px}
 .r2-reader-label{font-size:15px}
 .r2-reader-value{font-size:20px}
 #r2-age-evidence{width:min(600px,100%);border-left:1px solid rgba(255,255,255,.5);box-shadow:-24px 0 48px rgba(0,0,0,.55)}
 #r2-age-evidence .r2-age-drawer-heading h2{font-size:30px}
 #r2-age-evidence .r2-age-drawer-top button span{font-size:24px}
 #r2-age-evidence .r2-age-evidence-tabs button{font-size:14px}
 #r2-age-evidence .r2-age-evidence-row h3{font-size:19px}
 #r2-age-evidence .r2-age-evidence-time{font-size:12px}
 #r2-age-evidence .r2-age-chart-cohort{font-size:13px}
 #r2-age-evidence .r2-age-chart-number{font-size:28px}
}

/* Love and joy: the 68% and the 56% are the art director's renders (Krish, 2026-10-01), a soft number above the sharp one lit
   along its lower edge, on the chapter's white. The ring art and the typed number step aside; the number stays for screen readers. */
#feeling .v7-feeling-touch .v7-story-art{display:none}
#feeling .v7-feeling-touch .v7-story-number{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
#feeling .v7-feeling-touch{height:auto;min-height:0;aspect-ratio:auto}
#feeling .r5-number-art{display:block;width:min(100%,460px);margin:4px auto 10px}
#feeling .r5-number-art{aspect-ratio:1000/630} /* the two renders differ by 7px in height (623 vs 630); one box, ink on the floor, so the statements beneath align (2026-10-03) */
#feeling .r5-number-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
@media(max-width:760px){ #feeling .r5-number-art{width:100%} }

/* Love and joy sits on the embrace photograph, lightened a long way so the black type stays plain to read (Krish, 2026-10-01).
   The two renders carry transparency (their white ground unmixed out), so only the number's ink sits on the photograph. */
#dc-root #feeling{position:relative;isolation:isolate}
#feeling .r5-feeling-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;display:block}
#feeling .r5-feeling-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
@media(max-width:760px){ #feeling .r5-feeling-bg img{object-position:50% 60%} }

/* The badges (Krish, 2026-10-02): the graph is white, never pink, on every badge; the circle and the plus in the chapter's own ink;
   a little smaller on laptops. r5-badges.js keeps the plus changing to the graph and back. */
#inway .r2-signal-badge .r2-signal-ink,#inway .r2-signal-badge .r2-signal-accent,#inway .r2-signal-badge:hover .r2-signal-accent{stroke:#fff}
#inway .r2-signal-halo{background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
#inway .r2-signal-badge:focus-visible{outline-color:#fff}
#lifestages.r2-age-contour .signal-wave,#lifestages.r2-age-contour .signal-echo,#lifestages.r2-age-contour .signal-badge:hover circle{stroke:#fff}
:is(#people,#wake) .signal-echo,#wake .signal-echo,#people .signal-badge:hover circle,#wake .signal-badge:hover circle{stroke:#fff}
@media(min-width:1024px){
 #inway .r2-signal-badge,#inway .r2-signal-badge svg{width:56px;height:56px}
 #lifestages.r2-age-contour .signal-badge,#lifestages.r2-age-contour .signal-badge svg{width:42px;height:42px}
 :is(#people,#wake) .signal-badge,:is(#people,#wake) .signal-badge svg{width:56px;height:56px}
}

/* The ages chapter (Krish, 2026-10-03): the numbers stand by themselves, no circles; the youth photograph is the leaping pair in the
   art director's crop and the depth photograph the held head (the embrace now sits behind Love and joy); the badge works like
   every other, in the figure's own dark ink because it sits on a pale photograph, at the same size as the rest. */
#lifestages.r2-age-contour .stat-art{display:none}
#lifestages.r2-age-contour .age-photo img{scale:1}
#lifestages.r2-age-contour .photo-youth img{object-position:50% 50%}
#lifestages.r2-age-contour .signal-wave,#lifestages.r2-age-contour .signal-echo,#lifestages.r2-age-contour .signal-badge:hover circle{stroke:currentColor}
@media(min-width:1024px){ #lifestages.r2-age-contour .signal-badge,#lifestages.r2-age-contour .signal-badge svg{width:56px;height:56px} }

/* The ages: the sentence as a picture (Krish, 2026-10-03: not the numbers again, a visual of "fewer moments that surprise us, but
   more that move us deeply"). A field of moments across a life, young at the left, old at the right: surprise is small sharp
   sparks, dense on the left and thinning to the right; being moved is soft deep glows, few on the left and larger and more
   frequent to the right. r5-ages.js draws the field from the two findings and moves it. */
#lifestages.r2-age-contour .r5-moments{grid-column:1/-1;position:relative;z-index:2;margin:clamp(56px,9vh,110px) auto 0;width:min(100%,920px);height:clamp(200px,24vw,260px);padding:0}
#lifestages.r2-age-contour .r5-moments svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
#lifestages.r2-age-contour .r5-moments-key,#lifestages.r2-age-contour .r5-moments-age{position:absolute;font-family:'Messina Mono',Menlo,monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#b8b8b8;white-space:nowrap}
#lifestages.r2-age-contour .r5-moments-key{left:0;top:0;display:flex;gap:32px;align-items:center}
#lifestages.r2-age-contour .r5-moments-key-item{display:inline-flex;align-items:center;gap:10px}
#lifestages.r2-age-contour .r5-moments-key i{display:inline-block;flex:none}
#lifestages.r2-age-contour .r5-key-spark{width:5px;height:5px;border-radius:50%;background:#fff;margin:0 7px}
#lifestages.r2-age-contour .r5-key-glow{width:19px;height:19px;border-radius:50%;background:radial-gradient(circle,rgba(255,245,236,.95) 0%,rgba(255,245,236,.4) 35%,rgba(255,245,236,0) 70%)}
#lifestages.r2-age-contour .r5-moments-age-l{left:0;bottom:0}
#lifestages.r2-age-contour .r5-moments-age-r{right:0;bottom:0}
.r5-moments .spark{fill:#fff}
.r5-moments .glow{fill:url(#r5-glow)}
.r5-moments .axis{stroke:rgba(255,255,255,.22);stroke-width:1;vector-effect:non-scaling-stroke}
@media(max-width:1023px){
 #lifestages.r2-age-contour .r5-moments{order:3;margin:44px 0 0;width:100%;height:clamp(220px,58vw,280px)}
 #lifestages.r2-age-contour .r5-moments-key,#lifestages.r2-age-contour .r5-moments-age{font-size:10.5px;letter-spacing:.06em}
 #lifestages.r2-age-contour .r5-moments-key{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Connection and movement (Krish, 2026-10-03): the two photographs share one frame shape, the runners' own proportion, so the
   names, numbers and sentences beneath them sit on the same lines; the kiss is cropped to it around the faces. */
#people #f-people .v7-moment-card .v7-campaign-human-photo,#people #f-people .v7-campaign-human-photo{height:auto;aspect-ratio:4/3} /* the art director's embrace, cut 4:3 (2026-10-05) */
#people #f-people .v7-campaign-human-photo img{object-position:50% 50%}

/* People who move: the three pairs share rows on laptops, so the headlines, the sub-lines, the numbers and the labels each sit
   on one line across the columns whatever the headline's line count (Krish, 2026-10-03). */
@media(min-width:1024px){
 #wake .r4-move-pairs{grid-template-rows:auto auto auto}
 #wake .r4-move-pair{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
 #wake .r4-move-outcome,#wake .r4-move-values{align-self:start}
}

/* The Equinox member picture (Krish, 2026-10-03): a moving bar graph in place of the photograph, light on black: the members'
   bar a thin glowing outline, America's a soft filled glow, the percentage above each, the name beneath (r5-members.js). */
#members .r2mem-photo.r5-mbar-on{background:#000}
#members .r2mem-photo.r5-mbar-on picture,#members .r2mem-photo.r5-mbar-on .r4-soft,#members .r2mem-photo.r5-mbar-on .r4-ghost,#members .r2mem-photo.r5-mbar-on .r4-veil{display:none!important}
#members .r2mem-photo.r5-mbar-on::after{content:"";position:absolute;inset:0;background:url(/r6/imagery/grain.png) 0 0/192px 192px repeat;opacity:.12;pointer-events:none;z-index:3}
#members .r2mem-photo .r5-mbar{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.r5-mbar-value{font:300 30px 'Equinox Sans',Arial,sans-serif;letter-spacing:-.02em;fill:#fff}
.r5-mbar-value .r5-mbar-pct{font-size:.58em}
@media(max-width:760px){ .r5-mbar-value{font-size:18px} }

/* The takeaway, simplified (Krish, 2026-10-03, to the art director's reference): no ring map. A plain list of the six dimensions
   on the left, a dash before each and the campaign plus on the chosen one; on the right a box of type marked out by crop marks,
   a plus at its top-left and a bracket at its bottom-right, that draw open as the line arrives. */
#chooser .v7-choice-art{display:none}
#chooser .v7-choice-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:clamp(40px,8vw,120px);margin-top:clamp(40px,6vh,72px)}
#chooser .v7-choice-response{padding-left:44px} /* room for the plus's left arm */
#chooser .v7-choice-map{aspect-ratio:auto;max-width:none;margin:0}
#chooser .v7-choice-fields{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:0}
#chooser .v7-choice-field{display:flex;align-items:center;gap:22px;min-height:52px;padding:4px 0;color:#bdbdbd}
#chooser .v7-choice-field::before{content:"";display:block;position:relative;width:34px;height:34px;flex:none;background:linear-gradient(#fff,#fff) center/34px 1px no-repeat;transition:background-size 240ms var(--r4-ease,ease)}
#chooser .v7-choice-field>span{font:300 clamp(20px,1.7vw,24px)/1 'Equinox Sans',Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase;text-align:left}
#chooser .v7-choice-field[aria-pressed="true"]{color:#fff}
#chooser .v7-choice-field[aria-pressed="true"]::before{background:linear-gradient(#fff,#fff) center/34px 1px no-repeat,linear-gradient(#fff,#fff) center/1px 34px no-repeat}
#chooser .v7-choice-field[aria-pressed="true"]>span::after{display:none}
#chooser .v7-choice-field:focus-visible{outline:1px solid #fff;outline-offset:6px}
#chooser .v7-choice-response{height:auto;min-height:0;border:0;background:none}
#chooser .v7-choice-response::before{display:none}
#chooser .v7-choice-waiting,#chooser .v7-choice-invitation{display:block;height:auto;overflow:visible;position:relative;width:fit-content;max-width:100%;padding:48px 56px 64px 62px} /* the plus's centre is the box's corner; the type starts 62px right and 48px below it, clear of both arms; the bracket sits off the text's own corner */
#chooser #invitation.v7-choice-invitation{display:block!important}
#chooser .v7-choice-photo{display:none}
#chooser .v7-choice-response-copy{padding:0;gap:18px}
#chooser .v7-choice-kicker{font:11px/1.5 'Messina Mono',Menlo,monospace;letter-spacing:.06em;color:#c7c7c7}
#chooser .v7-choice-line{font-size:clamp(34px,3.4vw,52px);line-height:1.08;letter-spacing:-.02em;max-width:14ch;width:fit-content} /* the paragraph hugs its words, so the bracket sits off the longest line, as in the reference */
/* the crop marks: a plus at the top-left, a bracket at the bottom-right; each draws open when the box is built */
#chooser .v7-choice-invitation::before,#chooser .v7-choice-invitation::after{content:"";position:absolute;pointer-events:none}
#chooser .v7-choice-invitation::before{left:-44px;top:-44px;width:88px;height:88px;background:linear-gradient(#fff,#fff) center/88px 1px no-repeat,linear-gradient(#fff,#fff) center/1px 88px no-repeat}
#chooser .v7-choice-invitation::after{right:0;bottom:0;width:40px;height:40px;border-right:1px solid #fff;border-bottom:1px solid #fff;transform-origin:100% 100%}
#chooser .v7-choice-invitation.r5-mark::before{animation:r5-take-plus .5s var(--r4-ease,ease) both}
#chooser .v7-choice-invitation.r5-mark::after{animation:r5-take-bracket .5s var(--r4-ease,ease) .12s both}
@keyframes r5-take-plus{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes r5-take-bracket{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ #chooser .v7-choice-invitation::before,#chooser .v7-choice-invitation::after{animation:none} #chooser .v7-choice-field::before{transition:none} }
@media(max-width:767px){
 #chooser .v7-choice-layout{grid-template-columns:1fr;gap:28px}
 #chooser .v7-choice-field{min-height:46px;gap:16px}
 #chooser .v7-choice-field::before{width:24px;height:24px;background-size:24px 1px}
 #chooser .v7-choice-field[aria-pressed="true"]::before{background-size:24px 1px,1px 24px}
 #chooser .v7-choice-field>span{font-size:19px}
 #chooser .v7-choice-waiting,#chooser .v7-choice-invitation{padding:30px 36px 48px 40px}
 #chooser .v7-choice-invitation::before{left:-26px;top:-26px;width:52px;height:52px;background-size:52px 1px,1px 52px}
 #chooser .v7-choice-invitation::after{width:28px;height:28px}
 #chooser .v7-choice-line{font-size:clamp(28px,8vw,34px);max-width:12ch}
}

/* The copy deck (2026-10-03): the suggestions in the takeaway box are now three or four sentences. A long one steps down to a reading
   size with a measure, so it reads as a paragraph inside the crop marks instead of a wall of display type; r4.js takeawayFit() sets
   .r5-long on the line when it runs past 90 characters. One-sentence suggestions keep the display size. */
#chooser #invitation .v7-choice-line.r5-long{font-size:clamp(21px,1.8vw,28px);line-height:1.3;letter-spacing:-.01em;max-width:38ch}
@media(max-width:760px){#chooser #invitation .v7-choice-line.r5-long{font-size:19px;line-height:1.35;max-width:none}}
@media(min-width:761px){#chooser #invitation.r5-long{padding-bottom:60px}} /* laptops: the reading size's line box carries 4px more leading under the last line; the bracket stays 62px below the words. Phones keep their own padding. */

/* The client's closing line (2026-10-05, Yas and Bindu's sentence, built on Krish's word over the copywriter's): twice the length of
   the earlier lines, so it sets a step smaller with a wider measure and still sits inside the photograph's stage on both sizes. */
#dc-root #equinox.r2-closing-sequence .r2-closing-copy h2{font-size:clamp(28px,2.9vw,44px);line-height:1.14;max-width:26ch}
@media(min-width:1024px){#dc-root .r2-closing-copy h2{max-width:min(52vw,760px)!important}}
@media(max-width:760px){#dc-root #equinox.r2-closing-sequence .r2-closing-copy h2{font-size:clamp(24px,6.4vw,30px);line-height:1.2;max-width:none}}

/* The quiz (the art director, 2026-10-05): the band shows the dimension's own tile photograph and nothing drawn over it; the
   strands quiz-experience.js draws into .v7-quiz-artifact are hidden ("those graphics come out of nowhere"). */
.v7-quiz-material .v7-quiz-artifact{display:none!important}

/* The results page (the art director, 2026-10-05): the six dimension shapes are replaced by each score as a large number in the
   campaign's blur treatment, in the dimension's colour, drawn on a canvas by results-numbers.js to her example renders. Film grain
   over the whole grid. */
.v7r-signature-grid{position:relative}
.v7r-signature-grid::after{content:'';position:absolute;inset:0;background:url(/r6/imagery/grain.png) center/170px;opacity:.09;mix-blend-mode:screen;pointer-events:none}
.v7r-signature .v7r-score-art{position:relative;display:block;width:100%;aspect-ratio:1.15;margin:0 auto 2px;overflow:visible}
.v7r-signature .v7r-score-canvas{display:block;width:100%;height:100%}
.v7r-signature .v7r-score-art.is-missing{opacity:.45}
.v7r-signature:hover .v7r-score-canvas{filter:brightness(1.12)}
@media(max-width:760px){.v7r-signature .v7r-score-art{aspect-ratio:1.1}.v7r-signature-grid::after{background-size:120px}}

/* Round 6 (the client, 2026-10-07): the time frame of a figure is an eyebrow above it, never a tail on its sentence. One style, everywhere. */
.r6-eyebrow{display:block;font:400 11px/1.4 'Messina Mono',Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;color:currentColor;opacity:.62;margin:0 0 10px}
#inway .r2-signal-restored .r6-eyebrow{grid-column:1/-1;margin-bottom:0}
#feeling .v7-feeling-metric>.r6-eyebrow-slot{min-height:1.4em;margin:0 0 8px;text-align:left} /* the pair's eyebrow sits above the number, flush with its left edge like every other eyebrow; the 69 keeps the slot empty so the two numbers stay level */
#feeling .v7-feeling-metric,#feeling .v7-feeling-metric .v7-story-statement{text-align:left;margin-left:0;margin-right:0} /* the whole column keys to the number's left edge (Krish, 2026-10-07: match the other instances) */
#feeling .r2r-living-rule .r6-eyebrow{display:inline;margin:0;opacity:1}
#lifestages .stat-content .r6-eyebrow{margin-bottom:4px}
#people .v7-moment-card .r6-eyebrow{margin:16px 0 2px} /* Round 6 (the client, 2026-10-07): the dimension name is gone; the eyebrow sits where the name sat */
@media(min-width:761px){ #people .v7-moment-card .r6-eyebrow{margin-top:20px} }
#people .r2r-shared-proof .r6-eyebrow{margin:14px 0 6px}
#wake .r4-move-pair .r6-eyebrow{margin:0 0 6px}

/* Round 6, Love and joy (the client, 2026-10-07): no dimension labels, no blurred number renders; the numbers are the type itself, crisp, in ink */
#feeling .v7-metric-top{display:none}
#feeling .r5-number-art{display:none}
/* the numbers are drawn type (r6-feeling-numbers.js): the accessible text stays hidden as before; the SVG carries the look */
#feeling .r6-fn{display:block;width:min(100%,460px);margin:0 0 10px;overflow:visible}
#feeling .r6-fn text{font:300 170px/1 'Equinox Sans',Arial,sans-serif;letter-spacing:-.065em;fill:#111}
#feeling .r6-fn .r6-fn-stroke{fill:none;stroke:#111;stroke-width:1.1;stroke-linejoin:round}
#feeling .r6-fn .r6-fn-halo{opacity:0;transform-origin:50% 60%}
#feeling .r6-fn .r6-fn-pct{font-size:50px;letter-spacing:0;opacity:0}
@media(max-width:760px){ #feeling .r6-fn{width:100%} }
#feeling .v7-feeling-metric{border-top:0;padding-top:0} #feeling .v7-feeling-metric::before,#feeling .v7-feeling-metric::after{display:none} /* the labels' rule lines go with the labels */
@media(min-width:761px){ #feeling .r2r-living-strip{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-left:auto;margin-right:auto} } /* two figures left in the strip: centred as a pair */

/* Round 6, the slide-outs (the client, 2026-10-07): no logo, the way back top-left with an arrow, the figure not repeated, a lead line that expands it */
.r2-reader-toolbar{justify-content:flex-start}
.r2-reader-close{padding:0;gap:6px;justify-content:flex-start}
.r2-reader-close-arrow{font-size:20px;line-height:1;font-weight:300}
.r2-reader-summary{display:none!important}
.r2-reader-measure.r2-reader-lead{display:block;font:300 24px/1.2 'Equinox Sans',Arial,sans-serif;letter-spacing:-.01em;max-width:24ch;margin:0 0 6px}
.r2-reader--signal .r2-reader-measure.r2-reader-lead{color:#fff}
@media(min-width:1024px){ .r2-reader-measure.r2-reader-lead,.r2-reader--signal .r2-reader-measure.r2-reader-lead{font-size:26px} }
#r2-age-evidence .r2-age-drawer-top{justify-content:flex-start}
#r2-age-evidence .r2-age-drawer-top button span{margin:0 10px 0 0;font-size:20px;font-weight:300}

/* Round 6, the movement slide-out (the client, 2026-10-07): a heading over 64 characters steps down one size so it holds in five lines */
.r2-reader--signal.r2-reader--long .r2-reader-title{font-size:26px;line-height:1.14}
@media(min-width:1024px){ .r2-reader--signal.r2-reader--long .r2-reader-title{font-size:28px} }
#people .v7-moment-card .signal-badge{margin-top:18px}

/* Round 6, the members' score grid (the client, 2026-10-07): the two numbers bigger and kept together, the Members figure first, America's beside it */
#members .r2mem-score-values{justify-content:flex-start;gap:16px;font-size:44px;align-items:baseline}
#members .r2mem-score-values>span:last-child{font-size:26px}
#members .r2mem-score-label{margin-bottom:14px}
@media(min-width:1001px){ #members .r2mem-score-values{font-size:54px;gap:18px} #members .r2mem-score-values>span:last-child{font-size:30px} }

/* Round 6, the takeaway's six dimensions (the client, 2026-10-07): a compact grid, three to a line, the short line beneath; no photograph and no colour;
   the campaign's corner brackets draw in on hover and stay on the chosen one; the kicker above the line is gone */
#chooser .v7-choice-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;align-items:stretch}
#chooser .v7-choice-field{--leg:0px;display:grid;place-items:center;min-height:58px;padding:16px 8px;gap:0;color:#bdbdbd;transition:color 220ms var(--r4-ease,ease)}
#chooser .v7-choice-field>span{font:300 14px/1.25 'Equinox Sans',Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;text-align:center}
#chooser .v7-choice-field::before,#chooser .v7-choice-field[aria-pressed="true"]::before{content:"";position:absolute;inset:0;width:auto;height:auto;opacity:0;background:linear-gradient(#fff,#fff) left top/var(--leg) 1px no-repeat,linear-gradient(#fff,#fff) left top/1px var(--leg) no-repeat,linear-gradient(#fff,#fff) right top/var(--leg) 1px no-repeat,linear-gradient(#fff,#fff) right top/1px var(--leg) no-repeat,linear-gradient(#fff,#fff) left bottom/var(--leg) 1px no-repeat,linear-gradient(#fff,#fff) left bottom/1px var(--leg) no-repeat,linear-gradient(#fff,#fff) right bottom/var(--leg) 1px no-repeat,linear-gradient(#fff,#fff) right bottom/1px var(--leg) no-repeat;transition:opacity 200ms var(--r4-ease,ease),background-size 340ms var(--r4-ease,ease)}
#chooser .v7-choice-field[aria-pressed="true"]{color:#fff;--leg:12px}
#chooser .v7-choice-field[aria-pressed="true"]::before{opacity:1}
@media(hover:hover) and (pointer:fine){ #chooser .v7-choice-field:hover{color:#fff;--leg:12px} #chooser .v7-choice-field:hover::before{opacity:1} }
@media(min-width:768px){ #chooser .v7-choice-field>span{font-size:15px} #chooser .v7-choice-field{min-height:64px} }
@media(min-width:1024px){ #chooser .v7-choice-field>span{font-size:16px} #chooser .v7-choice-field[aria-pressed="true"],#chooser .v7-choice-field:hover{--leg:14px} #chooser .v7-choice-fields{gap:12px 10px} }
#chooser .v7-choice-kicker{display:none}
@media(prefers-reduced-motion:reduce){ #chooser .v7-choice-field::before{transition:opacity 200ms ease} }

/* Round 6, the seam into the members chapter (Krish, 2026-10-07): with the black chapter between them gone, the two light chapters ran 280px of empty white on the laptop;
   the gap is cut to about 160px, and the members chapter stands on its own slightly silvered ground so the switch reads */
@media(min-width:1024px){
 #dc-root #people.v7-journey-stage{padding-bottom:48px!important}
 #dc-root #members.v7-journey-stage{padding-top:56px!important}
 #dc-root #members .r2r-inner{padding-top:56px!important}
}
#members.v5-ground[data-ground="white"],#members{background:
  linear-gradient(118deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.62) 48%,rgba(255,255,255,0) 66%),
  radial-gradient(90% 70% at 100% 100%,rgba(222,224,228,.55),rgba(222,224,228,0) 70%),
  linear-gradient(172deg,#f6f6f7 0%,#ededef 38%,#f3f3f4 64%,#e9e9eb 100%)}
@media(max-width:1023px){ #dc-root #members .r2r-inner{padding-top:36px!important} } /* the phone's silvered band above the members headline, 124px to 96px */

/* Round 6, "A look at you" on white (Krish, 2026-10-07): the quiz invite stands on white after the black takeaway; the button inverts, the veil photograph fades into white */
#invite.r4-invite{background:#fff;color:#000}
#invite .r4-invite-deck{color:#555}
#invite .r4-invite-cta{background:#000!important;color:#fff!important}
#invite .r4-invite-cta:hover{background:#222!important}
#invite .r4-invite-cta:focus-visible{outline-color:#000}
#invite .r4-invite-photo{opacity:.75}
#invite .r4-invite-photo::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.7) 30%,rgba(255,255,255,0) 66%),linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 42%)}
@media(max-width:1023px){ #invite .r4-invite-photo::after{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.5) 38%,rgba(255,255,255,.1) 100%)} }

/* Round 6, the quiz (the client, 2026-10-07): no dimension named on a question (the photograph stays at the left on wide screens, the tile goes on phones);
   "Your Aliveness score" over twelve even segments; no numbers beside the answers; no "I prefer not to answer" */
.v7-quiz-progress li:nth-child(2n+3){margin-left:0}
.v7-quiz .af-quiz-option{grid-template-columns:minmax(0,1fr) 18px}
@media(max-width:767px){ .v7-quiz .af-quiz-option{grid-template-columns:minmax(0,1fr) 16px} .v7-quiz-material{display:none!important} }

/* Round 6, the quiz answers in Typeform's manner (the client's note; Krish, 2026-10-07): boxed, bigger type, a gap between them; the chosen one filled and edged with the question's tint.
   Only on screens tall enough to keep all the answers above Back/Next (701px and up); a short phone keeps the compact rows */
@media(min-height:701px){
 .v7-quiz .af-quiz-options{border-top:0;gap:8px!important}
 .v7-quiz .af-quiz-option{border:1px solid #ffffff3d;padding:15px 18px!important;min-height:58px!important;font-size:17px;line-height:1.3;gap:14px;transition:border-color 120ms ease-out,background-color 120ms ease-out}
 .v7-quiz .af-quiz-option[aria-checked="true"]{border-color:rgba(var(--q-tint),.9);background:rgba(var(--q-tint),.14)}
 .v7-quiz .af-quiz-option .v7-quiz-option-check{width:18px;height:18px}
}
@media(min-height:701px) and (hover:hover){ .v7-quiz .af-quiz-option:hover{border-color:#ffffff85;background:#ffffff0a} .v7-quiz .af-quiz-option[aria-checked="true"]:hover{background:rgba(var(--q-tint),.18)} }
@media(min-height:701px) and (max-width:767px){ .v7-quiz .af-quiz-option{padding:14px 16px!important;min-height:58px!important;font-size:17px;gap:12px} }
@media(min-height:701px) and (min-width:768px){ .v7-quiz .af-quiz-options{gap:6px!important} }

}

/* Round 6 (Krish, 2026-10-07): the chosen dimension is marked in its own way, a short rule in the dimension's colour under the white name;
   the white corner brackets belong to the pointer only */
#chooser .v7-choice-field[aria-pressed="true"]{--leg:0px;color:#fff}
#chooser .v7-choice-field[aria-pressed="true"]::before{opacity:0}
#chooser .v7-choice-field>span{position:relative}
#chooser .v7-choice-field[aria-pressed="true"]>span::after{content:"";display:block;position:absolute;left:50%;bottom:-9px;width:24px;height:2px;background:var(--choice-tint,#fff);transform:translateX(-50%)}
@media(hover:hover) and (pointer:fine){ #chooser .v7-choice-field:hover,#chooser .v7-choice-field[aria-pressed="true"]:hover{--leg:12px} #chooser .v7-choice-field[aria-pressed="true"]:hover::before{opacity:1} }
@media(min-width:1024px) and (hover:hover) and (pointer:fine){ #chooser .v7-choice-field:hover,#chooser .v7-choice-field[aria-pressed="true"]:hover{--leg:14px} }

/* Round 6, the slide-outs (the client, 2026-10-07): the "Share of…" line is a footnote, small and grey; even spacing around the question's rule; no box around the way back */
.r2-reader--signal .r2-reader-question{padding-bottom:18px}
.r2-reader-measure.r2-reader-lead,.r2-reader--signal .r2-reader-measure.r2-reader-lead{font:400 13px/1.45 'Equinox Sans',Arial,sans-serif;letter-spacing:0;color:#9a9a9a;max-width:44ch;margin:22px 0 12px}
@media(min-width:1024px){ .r2-reader-measure.r2-reader-lead,.r2-reader--signal .r2-reader-measure.r2-reader-lead{font-size:13px} }
.r2-reader-close:focus:not(:focus-visible){outline:none}

/* Round 6, Love and joy, the client's second pass (2026-10-07): the two big numbers bigger (190px type in a box cut tight around them), everything in each column centred,
   and the two strip figures on the same columns so the 55 sits under the 69 and the 73 under the 57 */
#feeling .r6-fn text{font-size:190px}
#feeling .r6-fn .r6-fn-pct{font-size:56px}
#feeling .r6-fn{margin:0 auto 10px}
#feeling .v7-feeling-metric,#feeling .v7-feeling-metric .v7-story-statement{text-align:center;margin-left:auto;margin-right:auto}
#feeling .v7-feeling-metric>.r6-eyebrow-slot{text-align:center}
#feeling .r2r-living-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,8vw,120px);max-width:1200px;margin-left:auto;margin-right:auto}
@media(max-width:760px){ #feeling .r2r-living-strip{gap:16px} } /* the pair's own gap on the phone, so the strip's columns are the pair's */
/* the laptop: the strip takes the stage's own grid (.95fr | 1.1fr, the stage's gap) and puts its two figures in the second column with the pair's 20px gap, so the 55 sits under the 69 and the 73 under the 57 */
@media(min-width:761px) and (max-width:1023px){ #feeling .r2r-living-strip{max-width:none;margin:0;gap:16px} } /* tablets: the stage is one column, the strip's columns are the pair's (the precision pass, 2026-10-09: at 820 the 55 sat 287px right of the 69) */
@media(min-width:1024px){
 #feeling .r2r-living-strip{max-width:none;margin:0;grid-template-columns:calc((100% - clamp(40px,6vw,90px)) * .46341 + clamp(40px,6vw,90px) - 20px) minmax(0,1fr) minmax(0,1fr);column-gap:20px}
 #feeling .r2r-living-strip>:nth-child(1){grid-column:2}
 #feeling .r2r-living-strip>:nth-child(2){grid-column:3}
}

/* Round 6, the movers' module (the client, 2026-10-07): the "More highs, fewer lows" chapter back between Connection and movement and the Members chapter, as three tabs over one figure */
#wake .r6-movers-inner h2{max-width:16ch}
#wake .r6-movers{max-width:560px;margin-top:28px}
#wake .r6-movers-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #ffffff40;margin:0 0 30px}
#wake .r6-movers-tabs button{appearance:none;background:none;border:0;margin:0;padding:12px 0 15px;position:relative;color:#a3a3a3;font:400 15px/1 'Equinox Sans',Arial,sans-serif;letter-spacing:.01em;text-align:center;cursor:pointer;touch-action:manipulation;transition:color 160ms ease-out}
#wake .r6-movers-tabs button[aria-selected="true"]{color:#fff}
#wake .r6-movers-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff}
#wake .r6-movers-tabs button:focus-visible{outline:1px solid #fff;outline-offset:-4px}
#wake .r6-movers-title{margin:0 0 18px;font:300 clamp(26px,3vw,36px)/1.15 'Equinox Sans',Arial,sans-serif;letter-spacing:-.015em}
#wake .r6-movers-figure{margin:0;font:300 clamp(112px,14vw,150px)/1 'Equinox Sans',Arial,sans-serif;letter-spacing:-.05em;white-space:nowrap}
#wake .r6-movers-x{font-size:.28em;vertical-align:top;display:inline-block;margin:.14em 0 0 .12em;letter-spacing:0}
#wake .r6-movers-line{margin:14px 0 24px;font-size:20px;line-height:1.35;max-width:26ch}
#wake .r6-movers-note{margin:0;padding-top:14px;border-top:1px solid #ffffff30;font:400 13px/1.45 'Equinox Sans',Arial,sans-serif;color:#a3a3a3;max-width:42ch}
#wake .r6-movers .signal-badge{margin-top:22px}
@media(hover:hover) and (pointer:fine){ #wake .r6-movers-tabs button:hover{color:#fff} }
@media(min-width:1024px){ #wake .r6-movers-inner{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:clamp(40px,6vw,90px);align-items:start} #wake .r6-movers{margin-top:8px} }
@media(max-width:760px){ #wake .r6-movers-tabs button{font-size:14px;padding:12px 0 14px} #wake .r6-movers-line{font-size:18px} }

/* Round 6, the client's final edits (2026-10-07) */
/* Tired and distracted: on wide screens the photograph's column stretches to the three figures' height, so the picture runs to the bottom */
@media(min-width:761px){ #inway .r2-signal-story{align-items:stretch} #inway .r2-signal-intro{min-height:0;height:100%} } /* from 761px, where the story is two columns (the precision pass, 2026-10-09: at 820 the photograph ended 39px above the figures) */
/* The takeaway on phones: the grid sits closer under the line, and each dimension sits in a hairline box so the words are anchored; the chosen one's box takes the dimension's colour */
@media(max-width:767px){
 #chooser .v7-choice-layout{gap:18px;margin-top:16px}
 #chooser .v7-choice-field{border:1px solid #ffffff2e;min-height:54px;padding:14px 6px}
 #chooser .v7-choice-field[aria-pressed="true"]{border-color:var(--choice-tint,#fff)}
 #chooser .v7-choice-field[aria-pressed="true"]>span::after{display:none}
 #chooser .v7-choice-fields{gap:8px}
}
/* Aliveness with age: each statement carries two figures, the young and the old (the client, 2026-10-07, after their analyst: one figure per statement does not make sense) */
#lifestages.r2-age-contour .stat-content.stat-pair{width:300px}
#lifestages.r2-age-contour .stat-pair .stat-pair-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;width:100%}
#lifestages.r2-age-contour .stat-pair .stat-cell{display:flex;flex-direction:column;align-items:center}
#lifestages.r2-age-contour .stat-pair .stat-number{font-size:62px}
#lifestages.r2-age-contour .stat-pair .stat-who{display:block;margin-top:8px;font:400 11px/1.4 'Messina Mono',Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;opacity:.72}
#lifestages.r2-age-contour .stat-pair .stat-copy{max-width:280px;margin-top:12px}
#lifestages.r2-age-contour .stat-pair>.r6-eyebrow{margin-bottom:8px}
@media(max-width:760px){ #lifestages.r2-age-contour .stat-content.stat-pair{width:264px} #lifestages.r2-age-contour .stat-pair .stat-number{font-size:52px} #lifestages.r2-age-contour .stat-pair .stat-copy{max-width:250px} }
@media(max-width:760px){ #lifestages.r2-age-contour .organic-stat{max-width:calc(100% - 16px)} #lifestages.r2-age-contour .photo-depth .organic-stat{right:8px;top:8px} #lifestages.r2-age-contour .stat-content.stat-pair{width:100%;max-width:264px} #chooser .v7-choice-response{margin-top:26px} } /* the depth pair fits inside its photograph on phones; the takeaway's plus mark clears the grid */
/* the figure box grows to its pair: width and height follow the content */
#lifestages.r2-age-contour .organic-stat:has(.stat-pair){width:300px;height:auto;min-height:248px;padding:10px 0}
@media(max-width:760px){ #lifestages.r2-age-contour .organic-stat:has(.stat-pair){width:264px;min-height:0} }

/* 2026-10-08 (the client): a centred eyebrow or sentence centres on the digits, not on the % sign */
#feeling .v7-feeling-metric>.r6-eyebrow-slot,#feeling .v7-feeling-metric .v7-story-statement{transform:translateX(var(--r6-fn-shift,0px))}
#feeling .r2r-living-strip strong{position:relative;display:inline-block}
#feeling .r2r-living-strip strong small{position:absolute;left:100%;top:0;margin-left:3px}
#lifestages.r2-age-contour .stat-pair .stat-number{position:relative;display:inline-block}
#lifestages.r2-age-contour .stat-pair .stat-number small{position:absolute;left:100%;top:0;margin-left:5px}
/* the slide-out's rule sits halfway between the question and the "Share of…" line */
.r2-reader--signal .r2-reader-question{padding-bottom:26px}
.r2-reader--signal .r2-reader-figure{padding-top:26px}
.r2-reader-measure.r2-reader-lead,.r2-reader--signal .r2-reader-measure.r2-reader-lead{margin-top:0}
#feeling .r2r-living-strip>*{transform:translateX(var(--r6-fn-shift,0px))} /* the strip's figure keeps its place under the big number's digits */

/* 2026-10-08, after Amanda's call (Krish's answers): */
/* 3. Love and joy on wide screens: the strip's "In the past month" rule runs only the width of the pair beneath it (phones unchanged) */
@media(min-width:1024px){ #feeling .r2r-living-rule{margin-left:calc((100% - clamp(40px,6vw,90px)) * .46341 + clamp(40px,6vw,90px));width:calc((100% - clamp(40px,6vw,90px)) * .53659)} }
/* 7. "A look at you": the veil photograph is the whole ground of the chapter, the type over a white fade */
#invite .r4-invite-photo{position:absolute;inset:0;right:auto;bottom:auto;width:100%;height:100%;margin:0;opacity:.95}
#invite .r4-invite-photo img{object-position:62% 38%}
#invite .r4-invite-photo::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 34%,rgba(255,255,255,.35) 58%,rgba(255,255,255,0) 78%),linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 40%)}
@media(max-width:1023px){ #invite .r4-invite-photo{position:absolute;inset:0;height:100%;margin:0} #invite .r4-invite-photo img{object-position:60% 30%} #invite .r4-invite-photo::after{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.9) 42%,rgba(255,255,255,.25) 70%,rgba(255,255,255,0) 100%)} #invite.r4-invite{min-height:640px} }
/* 6. the seam from the Members chapter into the takeaway, brought to the site's rhythm (about 160px of ink gap on the laptop, 170 on the phone) */
@media(min-width:1024px){ #dc-root #members.v7-journey-stage{padding-bottom:40px!important} html[data-view="home"] #dc-root #next.v7-journey-stage{padding-top:0!important} #dc-root #next .v7-personal-inner{padding-top:60px!important} }
@media(max-width:1023px){ #dc-root #members.v7-journey-stage{padding-bottom:40px!important} html[data-view="home"] #dc-root #next.v7-journey-stage{padding-top:0!important} #dc-root #next .v7-personal-inner{padding-top:56px!important} }
@media(min-width:1024px){ #feeling .r2r-living-rule{transform:translateX(var(--r6-fn-shift,0px))} } /* the shortened rule sits exactly over the pair's digits */
@media(max-width:1023px){ #dc-root #next .v7-personal-inner{padding-top:92px!important} } /* the phone's seam into the takeaway, 130px to about 166 */

/* 2026-10-08, the client's engineer: no scrollbar inside their frame. Their line, plus the document's own scroll element and Firefox, so it takes effect; only in the embedded mode */
html[data-v7-embedded=true] body::-webkit-scrollbar,html[data-v7-embedded=true]::-webkit-scrollbar{display:none}
html[data-v7-embedded=true]{scrollbar-width:none}
html[data-v7-embedded=true] body{scrollbar-width:none;-ms-overflow-style:none}

/* 2026-10-08 (the client): the sentences under the 69 and the 57 bigger, both sizes */
#feeling .v7-feeling-metric .v7-story-statement{font-size:22px;line-height:1.35;max-width:22ch}
@media(max-width:760px){ #feeling .v7-feeling-metric .v7-story-statement{font-size:20px;max-width:17ch} }

/* 2026-10-08 (the client): the age figures no longer float on the photographs; each statement's four generations sit as a bar chart under the headline, no tap */
#lifestages.r2-age-contour .organic-youth{grid-template-rows:auto}
#lifestages.r2-age-contour .organic-youth .story-heading{grid-column:1;grid-row:1;align-self:end} /* the chart's bottom edge = the photograph's bottom edge at every width (the precision pass, 2026-10-09; centred, a column shorter than the photograph's minimum height floated above it) */
@media(min-width:761px){ #lifestages.r2-age-contour .depth-copy{align-self:end} }
#lifestages.r2-age-contour .organic-youth .photo-youth{grid-row:1}
@media(min-width:761px){
 #lifestages.r2-age-contour .photo-stage{height:auto;min-height:clamp(400px,52svh,500px);align-self:stretch} /* the photograph runs the full height of the headline-and-chart column, so their bottom edges meet */
 #lifestages.r2-age-contour .organic-youth .story-heading h3{max-width:10.5em} /* three lines, like the depth headline */
}
#lifestages.r2-age-contour .r6-agebars{margin:28px 0 0;max-width:420px;color:#fff}
#lifestages.r2-age-contour .r6-agebars-lead{font:400 14px/1.45 'Equinox Sans',Arial,sans-serif;color:#a3a3a3;max-width:36ch;margin:0 0 14px}
#lifestages.r2-age-contour .r6-agebars-axis{display:flex;justify-content:space-between;font:400 11px/1 'Messina Mono',Menlo,monospace;letter-spacing:.06em;color:#6e6e6e;padding-bottom:8px;border-bottom:1px solid #2a2a2a}
#lifestages.r2-age-contour .r6-agebars-rows{margin:0;padding:0}
#lifestages.r2-age-contour .r6-agebars-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;row-gap:7px;padding-top:12px}
#lifestages.r2-age-contour .r6-agebars-row dt{margin:0;font:400 16px/1.2 'Equinox Sans',Arial,sans-serif}
#lifestages.r2-age-contour .r6-agebars-row dd{margin:0;display:contents}
#lifestages.r2-age-contour .r6-agebars-value{font:300 24px/1 'Equinox Sans',Arial,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums;justify-self:end}
#lifestages.r2-age-contour .r6-agebars-track{grid-column:1/-1;display:block;height:8px;background:#2a2a2a;position:relative;overflow:hidden}
#lifestages.r2-age-contour .r6-agebars-bar{position:absolute;top:0;bottom:0;left:0;width:calc(var(--v) * 1%);background:#fff;transform-origin:left center}
@media(max-width:760px){
 #lifestages.r2-age-contour .organic-youth .story-heading{display:contents}
 #lifestages.r2-age-contour .organic-youth .story-heading h3{order:0}
 #lifestages.r2-age-contour .r6-agebars{order:2;margin-top:26px;max-width:none;width:100%}
 #lifestages.r2-age-contour .r6-agebars-lead{font-size:15px}
 #lifestages.r2-age-contour .r6-agebars-row dt{font-size:17px}
 #lifestages.r2-age-contour .r6-agebars-value{font-size:26px}
}
@media(prefers-reduced-motion:reduce){ #lifestages.r2-age-contour .r6-agebars,#lifestages.r2-age-contour .r6-agebars-bar{opacity:1!important;transform:none!important} }

/* 2026-10-08 (the client): the slide-outs' charts take the page chart's axis: 0% and 100% only, dark grey, no mid tick */
.r2-reader-axis,.r2-reader--signal .r2-reader-axis{color:#6e6e6e;font:400 11px/1 'Messina Mono',Menlo,monospace;letter-spacing:.06em}
.r2-reader-track::after,.r2-reader--signal .r2-reader-track::after{display:none}
/* 2026-10-08 (the client): the Regardless-of-age headline is fifteen words; on wide screens it runs the full width above the two cards, as the age chapter's own headline does */
@media(min-width:1024px){
 #dc-root #people .v7-stage-main{grid-template-columns:1fr;row-gap:44px}
 #people .r2-finding-headline{max-width:24ch}
}

/* 2026-10-08, the pass after the client's notes: on phones the age chapters take the page's 24px gutter (they had 22px), and the second chapter keeps the same room under its chart as sits between the two chapters */
@media(max-width:760px){
 #lifestages.r2-age-contour .organic-youth,#lifestages.r2-age-contour .organic-depth{padding-left:24px;padding-right:24px}
 #lifestages.r2-age-contour .organic-depth{padding-bottom:56px}
}
/* the two cards' sentences break into even lines, never a one-word last line */
#people .v7-moment-statement{text-wrap:balance;max-width:48ch}

/* 2026-10-08 (the client: the hero got lighter): the hero's dark gradient over the photograph was written for the framed page only (embedded.css, r2-story.css);
   since /r6/ and the public root serve the page unframed (item 35, 37) a direct visit had no gradient and the words sat on a lighter picture.
   The same gradient now sits over the hero in both modes, so a direct visit is as dark as the client's iframe and as Round 5. */
#story .v5-photo::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:normal;opacity:1;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.1) 75%),linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%,rgba(0,0,0,.58))}
/* the two cards' badges sit on one line on wide screens: the sentence keeps room for two lines whether it needs them or not (2026-10-08, the 62 got its badge) */
@media(min-width:1024px){ #people .v7-moment-statement{min-height:2lh} }

/* the client's last round (2026-10-08), the quiz cover: no eyebrow, no picture, no "choose an answer" line; the privacy line sits under Start in dark grey; the question page's foot keeps only "Pause and return to the story" */
.v7-quiz .v7-quiz-intro{grid-template-columns:1fr}
.v7-quiz-intro-copy .v7-quiz-privacy{grid-column:auto;color:#6e6e6e;margin-top:-6px}
.v7-quiz .af-quiz-foot{justify-content:flex-start}

/* The client's last round (2026-10-09) */
/* the hero on phones. 2026-10-09 (the client: the button was cut off under a phone browser's bottom bar): the words and the button were moved to sit
   from the top. 2026-10-10 (the client: "why is the sub copy and CTA in the middle of the page now? Should be how it was before, closer to your
   thumb"): the headline sits from the top and the copy and button sit at the bottom of the first screen again, as before (the hero is the small
   viewport, the screen with the browser's bars shown, so the bottom of the hero is on screen with the bars); on a short phone (an iPhone SE with its
   bars, 553 tall) the top air, the gap and the bottom air tighten so the button still stands above the fold there. */
@media(max-width:767px){
 #story .af-hero{justify-content:space-between!important;padding-top:20svh!important;padding-bottom:clamp(80px,10vh,112px)!important;gap:28px!important}
}
@media(max-width:767px) and (max-height:620px){
 #story .af-hero{padding-top:88px!important;padding-bottom:40px!important;gap:22px!important}
}
/* the Members' grid opens with the Aliveness score itself */
@media(min-width:1320px){ #members .r2mem-score-grid{grid-template-columns:repeat(7,minmax(0,1fr))} } /* seven cells hold the pairs from 1320 (at 1280 by one pixel, below it not at all: Krish, 2026-10-09, late, a window that is not maximised) */
@media(min-width:1001px) and (max-width:1319px){ #members .r2mem-score-grid{grid-template-columns:repeat(6,minmax(0,1fr))} } /* the score on its own row, the six parts in one row beneath */
@media(max-width:1319px){ #members .r2mem-score-overall{grid-column:1/-1} }
/* the quiz cover (the client, 2026-10-09): "Back to the story" sits in the top-left corner, under the header; the headline keeps its place */
.v7-quiz[data-quiz-screen=intro] .af-quiz-body{padding-top:80px!important} /* the page's fixed header is 64px; the link sits 16px under it */
.v7-quiz[data-quiz-screen=intro] .v7-quiz-return{margin-bottom:0}
.v7-quiz[data-quiz-screen=intro] .v7-quiz-intro{margin-top:56px!important}
@media(max-width:767px){ .v7-quiz[data-quiz-screen=intro] .af-quiz-body{padding-top:80px!important} /* 16px under the 64px header, as on the laptop (the precision pass, 2026-10-09) */ .v7-quiz[data-quiz-screen=intro] .v7-quiz-intro{margin-top:40px!important} }
/* the results page (the client, 2026-10-09): the six scores sit on the web with America's line; the foot is two rows */
.v7r-web{position:relative}
.v7r-page .v7r-web figcaption{margin:0 0 6px!important}
.v7r-web-stage{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:360/350}
.v7r-page .v7r-web-chart.v7r-portrait{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0}
html[data-v7-embedded=true] #results .v7r-web-chart.v7r-portrait{height:100%!important} /* inside the client's frame, embedded.css (Round 5) fixed the web's height at 330px in frames under 780px tall and at a phone's 38svh, while the labels kept the full stage: the web drew at 60 % with the labels standing off it (the client, 2026-10-12). The web fills its stage in the frame as it does on the site. */
html[data-v7-embedded=true] #results .v7r-web-chart.v7r-portrait text,html[data-v7-embedded=true] #results .v7r-web-chart.v7r-portrait text+text{font-size:8.5px!important} /* and America's six small figures keep the site's size in the frame (embedded.css doubled them to 17px) */
.v7r-web-labels{position:absolute;inset:0;pointer-events:none}
.v7r-page .v7r-web-label{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;border:0;padding:4px 8px;background:transparent;color:#fff;line-height:1.1;white-space:nowrap}
.v7r-web-name{font-size:15px;font-weight:400;color:#d6d6d6}
.v7r-web-num{font-size:30px;font-weight:400;letter-spacing:-.02em;color:var(--glow,#fff);text-shadow:0 0 16px var(--glow,#fff),0 0 3px var(--glow,#fff);margin-top:4px}
@media(hover:hover){.v7r-page .v7r-web-label:hover .v7r-web-name{text-decoration:underline;text-underline-offset:4px}}
.v7r-page .v7r-web-legend{display:flex;justify-content:center;align-items:center;gap:10px;margin:14px 0 0;font-size:12px;color:#bdbdbd}
.v7r-web-key{display:inline-block;width:26px;height:0;border-top:2px solid #fff}.v7r-web-key-us{border-top:1.5px solid #8c8c8c;margin-left:12px}
@media(max-width:767px){
 .v7r-web-stage{max-width:none} .v7r-web-name{font-size:14px} .v7r-web-num{font-size:26px}
 .v7r-pair{flex-direction:column;align-items:flex-start;gap:6px} /* America's figure under the score, not beside it */
 .v7r-america{flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:8px} .v7r-america-n{font-size:28px}
}
.v7r-page .v7r-qualification{display:block;max-width:none;padding-top:0;margin-top:34px;border-top:1px solid var(--v7r-line)}
#dc-root .v7r-page details.v7r-method{border:0;background:none;margin:0;padding:0}
#dc-root .v7r-page details.v7r-method[open]{background:none}
#dc-root .v7r-page details.v7r-method>summary{padding:0;min-height:52px;border-bottom:1px solid var(--v7r-line);font-size:16px;color:#fff}
#dc-root .v7r-page details.v7r-method>.r2-footnote-body{padding:18px 0 22px;border-bottom:1px solid var(--v7r-line)}
#dc-root .v7r-page .r2-footnote-body p{font-size:15px;line-height:1.6;max-width:72ch}
.v7r-page .v7r-foot-row{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;padding:0;border:0;border-bottom:1px solid var(--v7r-line);font-size:16px;color:#fff;text-align:left}
/* Love and joy on phones (the client, 2026-10-09: "margins on both sides the same, the top row grouped and centred with the bottom row"): the 69 sits flush with the pair's left edge and the 57 with its right edge (r6-feeling-numbers.js cuts each box that way below 761px), so the two outer margins are equal to the pixel; the eyebrow, the sentence and the strip's figure under each number centre on the whole number, digits and % together (the same --r6-fn-shift as on wide screens, there keyed to the digits); the strip's % is in the flow so the 55% and 73% centre as whole numbers too (the precision pass, 2026-10-09 evening) */
@media(max-width:760px){ #feeling .r2r-living-strip strong small{position:static;margin-left:3px} }
/* Love and joy on laptops: the two columns are one width (at most 300px, the 1440 design's), whatever their sentences measure; with auto margins each column had shrunk to its own sentence, so above 1440 the 69's drawn box grew wider and taller than the 57's and the baselines parted by up to 15px (the precision pass, 2026-10-09) */
@media(min-width:1024px){ #feeling .v7-feeling-metric{width:min(100%,300px)} }
/* the designer's-eye pass (2026-10-09, evening): two things the ruler missed */
.v7-quiz .v7-quiz-back{column-gap:.35em} /* "← Back": the arrow's trailing space was trimmed inside the flex button, so it read "←Back" */
@media(max-width:760px){ #feeling .r2r-living-strip p{text-wrap:balance} } /* "had fun with their people." left "people." alone on its last line on phones */
/* 2026-10-09, late (Krish): the Aliveness score is the whole and the six dimensions are its parts. It leads the row as the page's other lead figures do,
   set large in the first column with America's figure beside it; the six keep their size to its right (phones: the score takes the top row full width) */
@media(min-width:1001px){
 #members .r2mem-score-overall .r2mem-score-values{font-size:132px;gap:22px;letter-spacing:-.05em;line-height:1} /* a whole-pixel height, so nothing below the row sits on a fraction */
 #members .r2mem-score-overall .r2mem-score-values>span:last-child{font-size:48px;letter-spacing:-.02em}
}
@media(max-width:1000px){
 #members .r2mem-score-overall .r2mem-score-values{font-size:96px;gap:18px;letter-spacing:-.05em;line-height:1}
 #members .r2mem-score-overall .r2mem-score-values>span:last-child{font-size:40px;letter-spacing:-.02em}
}
/* 2026-10-09, late (Krish): the quiz cover on laptops read as a column of type beside sixty per cent of empty black once its photograph went.
   The cover is a title page, so it takes the campaign's own device, the stepped uppercase headline the hero and the invitation already use:
   two lines, the second stepped in, at a size that fills the width (150px at 1440, scaling with the type above it). Phones keep the cover as it was. */
.v7-quiz-intro-copy h2 .ln{display:block}
@media(min-width:768px){
 .v7-quiz-intro-copy h2{text-transform:uppercase;font-size:clamp(72px,10.4vw,150px);line-height:.92;letter-spacing:-.012em;max-width:none;text-wrap:initial}
 .v7-quiz-intro-copy h2 .ln+.ln{margin-left:calc(var(--step-in,0) * 1em)}
 .v7-quiz-intro-copy{gap:30px}
}
/* the quiz and the results take the page's gutter and the chapters' frame (the precision pass, 2026-10-09, late): their content had sat 8px right of the header's logo on laptops
   (a 5vw padding against the 64px gutter) and their 1440 frame did not grow with the type, so the cover's headline wrapped at 1680; the header's own gutter on phones was 20px against the content's 24 */
.v7-quiz .af-quiz-body{padding-inline:var(--gutter)!important;max-width:min(100vw,1928px)}
.v7r-wrap{padding-inline:var(--gutter)!important;max-width:min(100vw,1928px)}
html #dc-root header.v7-app-header{padding-inline:var(--gutter)!important}
/* 2026-10-09, late (Krish): each Members pair reads as one figure against America's, not as two numbers in a row: the two sit closer, with a hairline
   between them standing on the shared baseline up to America's cap height (the hairlines' grey), so the space inside a pair is clearly smaller than the space between pairs */
#members .r2mem-score-values{gap:10px}
#members .r2mem-score-values>span:last-child::before{content:"";display:inline-block;width:1px;height:.72em;margin-right:10px;background:#c4c4c4;vertical-align:baseline}
#members .r2mem-score-overall .r2mem-score-values{gap:12px}
#members .r2mem-score-overall .r2mem-score-values>span:last-child::before{margin-right:12px}
@media(min-width:1001px){
 #members .r2mem-score-values{gap:12px}
 #members .r2mem-score-values>span:last-child::before{margin-right:12px}
 #members .r2mem-score-overall .r2mem-score-values{gap:16px}
 #members .r2mem-score-overall .r2mem-score-values>span:last-child::before{margin-right:16px}
}
@media(min-width:1320px){ #members .r2mem-score-grid{grid-template-columns:minmax(0,2.1fr) repeat(6,minmax(0,1fr));column-gap:24px} } /* the lead column wider than the parts' (moved here from 1001 with the breakpoint) */
#members .r2mem-score-values{white-space:nowrap} /* a pair never breaks onto two lines; if a cell is ever too narrow the pair overflows and the measure catches it */
/* the takeaway's frame (the width sweep, 2026-10-09, late): it was set to the full width of a section that already carries 54px of side padding, then added its own 54px on top, so from 1024 to 1384 it ran past the window by that padding and the story page scrolled sideways; it takes its width from the section now (at 1440 and above its 1200px cap governs, as before) */
@media(min-width:1024px){ html[data-view="home"] #dc-root #next>.v7-personal-inner{width:auto;padding-left:0!important;padding-right:0!important;margin-left:0;margin-right:0} } /* the frame sits on the gutter like every other chapter (Saturday's eye pass, 2026-10-10: from 1024 up it stood one gutter further right than the movers above it and the invitation below it, 128px at 1440, while on phones and tablets it was on the gutter) and keeps its 1200px cap */
/* the takeaway's names (the width sweep, 2026-10-09, late): the two-column takeaway needs 1200px for the six names to sit three-up at their size ("CONNECTION" ran 9–31px past its chip from 768 to 1199, and 5–15px on phones under 430);
   below 1200 the names take the full width three-up and the chosen line sits beneath, as on phones; the smallest phones close the names' spacing a little */
@media(min-width:768px) and (max-width:1199px){ #chooser .v7-choice-layout{grid-template-columns:1fr;gap:28px} #chooser .v7-choice-map{max-width:560px;margin:0} }
@media(max-width:429px){ #chooser .v7-choice-field{padding-left:2px;padding-right:2px} #chooser .v7-choice-field>span{letter-spacing:.04em} }
@media(max-width:369px){ #chooser .v7-choice-field>span{font-size:13px} }

/* Tablets (768 to 1023; the operations run's rows, 2026-10-11): every chapter sits on the phone's 24px gutter there except the hero and the invitation,
   which took the laptop gutter (34 to 46px); they take the same 24px now, so the whole story shares one left edge at every width. */
@media(min-width:768px) and (max-width:1023px){ html #dc-root #story .af-hero, html #dc-root #invite.r4-invite{padding-left:24px!important;padding-right:24px!important} }

/* The results page, the client's notes of 2026-10-12: America's 58 carries its /100 like the score does; America's six small figures on the web are
   the same grey as America's line (they read almost white) and a step smaller on laptops (phones keep their size, the web is smaller there). */
.v7r-page .v7r-america-outof{font-size:clamp(12px,.3em,20px);letter-spacing:0;margin-left:.1em;color:#b8b8b8;font-variant-numeric:tabular-nums}
.v7r-page .v7r-web-chart.v7r-portrait text,html[data-v7-embedded=true] #results .v7r-web-chart.v7r-portrait text,html[data-v7-embedded=true] #results .v7r-web-chart.v7r-portrait text+text{fill:#8c8c8c}
@media(min-width:768px){ .v7r-page .v7r-web-chart.v7r-portrait text,html[data-v7-embedded=true] #results .v7r-web-chart.v7r-portrait text,html[data-v7-embedded=true] #results .v7r-web-chart.v7r-portrait text+text{font-size:7.5px!important} }