/* The new type page (structure v5) — Website/PAGES/16types/_DESIGN/proto/seer_page.html with
   the variants Lex accepted (HANDBACK §6 defaults), scoped under .ctv5 so nothing reaches the
   site's header and footer. The site's style.css resets every a and button (all: unset), so
   each interactive element here sets its own display and spacing. Fonts: the site's EB Garamond
   and Roboto (Google Fonts, loaded by the site's header) — the card too. */

.ctv5{
  --navy:#284257; --line:#E6E8EB;
  --rb:10px; --rc:18px;
  --px:20px;
  --hdr:71px;
  --top:var(--wp-admin--admin-bar--height,0px);
  --serif:"EB Garamond",Georgia,serif; --sans:"Roboto",system-ui,sans-serif;
  display:block;font:400 16px/1.45 var(--sans);color:#434244;background:#fff;
}
@media (min-width:1280px){ .ctv5{--hdr:91px} }
@media (max-width:600px){ .ctv5{--top:0px} }
.ctv5 *,.ctv5 *::before,.ctv5 *::after{box-sizing:border-box}
.ctv5 a{color:inherit;cursor:pointer}
.ctv5 button{cursor:pointer;font:inherit;color:inherit}
.ctv5 svg{overflow:visible}
.ctv5 :focus-visible{outline:2px solid #284257;outline-offset:3px}
.ctv5 .field :focus-visible,.ctv5 .offer :focus-visible,.ctv5 .tl :focus-visible,.ctv5 .dark2 :focus-visible{outline-color:#fff}
.ctv5 ::selection{background:rgba(40,66,87,.18)}
.ctv5 .field ::selection{background:rgba(255,255,255,.28)}

/* ---------- the first screen ---------- */
.ctv5 .field{position:relative;min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;padding:12px 20px 14px;overflow:hidden;background:var(--navy);color:#fff}
.ctv5 h1{margin:0;text-align:center;font-weight:400;color:#fff}
.ctv5 h1 .by{display:block;font:400 13px/1.3 var(--sans);letter-spacing:.06em;color:rgba(255,255,255,.72)}
/* the name's size follows its length (HANDBACK §4): one letter ~.8em with tracking, the sign and its gap .94em */
.ctv5 h1 .nm{display:flex;justify-content:center;align-items:center;gap:.18em;margin-top:4px;font:400 min(clamp(42px,12.5vw,50px),calc((100vw - 44px) / (var(--len,6) * .88 + .94)))/1.05 var(--serif);letter-spacing:.1em;text-transform:uppercase;padding-left:.1em}
.ctv5 h1 .nmt{min-width:0;text-wrap:balance}
.ctv5 .sym{display:block;flex:0 0 auto;width:.74em;height:.74em;color:#fff}
.ctv5 h1 .alt{display:block;margin-top:5px;font:400 17px/1.25 var(--serif);color:rgba(255,255,255,.82)}

/* the four scales; a value under 40 is where the test is unsure */
.ctv5 .dm{appearance:none;background:none;border:0;padding:0;margin:0;color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ctv5 .dm:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:6px;border-radius:8px}
.ctv5 .dgrid .dm{transition:opacity .25s}
.ctv5 .dgrid:has(.dm.sel) .dm:not(.sel){opacity:.42}
.ctv5 .dgrid .dm.sel .tr::after{animation:ctv5-refill .8s cubic-bezier(.3,.6,.2,1)}
@keyframes ctv5-refill{from{width:0}}
.ctv5 .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;max-width:330px;width:100%;margin:12px auto 0}
.ctv5 .dgrid .dm{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center;align-items:baseline;column-gap:8px;min-height:44px;padding:4px 0;text-align:left}
.ctv5 .dgrid .pi{display:none}
.ctv5 .dgrid .pl{font:500 11px/1.2 var(--sans);letter-spacing:0;min-width:0;text-transform:uppercase;color:rgba(255,255,255,.88)}
.ctv5 .dgrid .n{font:500 15px/1 var(--sans);font-variant-numeric:tabular-nums}
.ctv5 .dgrid .tr{display:block;flex:0 0 100%;height:1px;margin-top:6px;background:rgba(255,255,255,.22);position:relative}
.ctv5 .dgrid .tr::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:calc(var(--p) * 1%);background:#fff}
.ctv5 .dgrid .dm.low .tr::after{height:0;top:0;background:none;border-top:3px dotted #fff}
.ctv5 .dgrid.org .tr::after{display:none}
.ctv5 .dgrid.org .tr{background:rgba(255,255,255,.45)}
@media (max-width:370px){ .ctv5 .dgrid{gap:4px 12px} }

/* the lens: edge to edge on a tall phone; on a short one it gives way so the hero line stays on
   the first screen. --chrome = header, title, scales, caption, link and gaps */
.ctv5 .field{--chrome:476px}
@media (max-height:700px){ .ctv5 .field{--chrome:439px;padding-top:8px;padding-bottom:10px} .ctv5 h1 .by{font-size:12px} .ctv5 h1 .nm{font-size:min(40px,calc((100vw - 44px) / (var(--len,6) * .88 + .94)))} .ctv5 h1 .alt{font-size:15px;margin-top:3px} .ctv5 .dgrid{margin-top:8px} }
.ctv5 .art{position:relative;width:min(calc(100% + 24px),calc(100svh - var(--chrome)),440px);min-width:250px;margin:10px auto 0;align-self:center}
.ctv5 .art svg{display:block;width:100%;height:auto}
.ctv5 .art .halo{display:none}
.ctv5 .cap{height:78px;overflow:hidden;margin:6px 0 0;font:400 13.5px/1.42 var(--sans);color:rgba(255,255,255,.85);text-align:center;text-wrap:pretty}
.ctv5 .cap b{font-weight:500;color:#fff}
.ctv5 .go{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-top:8px;padding-top:11px;border-top:1px solid rgba(255,255,255,.28);font:500 15px/1.4 var(--sans);color:#fff;text-align:left;text-decoration:none}
.ctv5 .go span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ctv5 .go svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px}

.ctv5 .ink{stroke:#fff;fill:none;stroke-width:1.2}
.ctv5 .ink2{stroke:rgba(255,255,255,.5);fill:none;stroke-width:1}
.ctv5 .ink3{stroke:rgba(255,255,255,.2);fill:none;stroke-width:1}
.ctv5 .lt{fill:#fff;font-family:var(--sans);font-weight:500;text-transform:uppercase}
.ctv5 .lt.dim{fill:rgba(255,255,255,.84)}
.ctv5 .leg{fill:rgba(255,255,255,.82);font:500 8px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ctv5 .hit{cursor:pointer;outline:none}
.ctv5 .hl{fill:rgba(255,255,255,0);stroke:#fff;stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;pointer-events:none;transition:stroke-dashoffset .55s cubic-bezier(.3,.6,.2,1),fill .2s}
.ctv5 .hl.on{stroke-dashoffset:0;fill:rgba(255,255,255,.05)}
.ctv5 .hit.sel>path:first-child{fill:rgba(255,255,255,.92)!important}
.ctv5 .hit.sel .lt{fill:#284257}

.ctv5 .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:ctv5-trace 1s cubic-bezier(.3,.6,.2,1) forwards;animation-delay:var(--d,0s)}
.ctv5 .fade{opacity:0;animation:ctv5-appear .6s ease-out forwards;animation-delay:var(--d,0s)}
@keyframes ctv5-trace{to{stroke-dashoffset:0}}
@keyframes ctv5-appear{to{opacity:1}}
/* the lens lives: the rim turns, a glint runs round the barrel, the iris steps on — every 11 s */
.ctv5 .knurl{transform-box:fill-box;transform-origin:50% 50%;animation:ctv5-spin 240s linear infinite}
.ctv5 .blades{transform-box:fill-box;transform-origin:50% 50%;animation:ctv5-iris 11s cubic-bezier(.6,0,.3,1) 2.5s infinite}
.ctv5 .glint{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.04 .96;stroke-dashoffset:.25;opacity:0;filter:drop-shadow(0 0 3px #fff);pointer-events:none;animation:ctv5-glint 11s linear 2.5s infinite}
@keyframes ctv5-spin{to{transform:rotate(360deg)}}
@keyframes ctv5-iris{0%,30%{transform:rotate(0)}40%,100%{transform:rotate(51.43deg)}}
@keyframes ctv5-glint{0%{opacity:0;stroke-dashoffset:.25}3%{opacity:1}24%{opacity:1}28%{opacity:0;stroke-dashoffset:-.6}100%{opacity:0;stroke-dashoffset:-.6}}
@media (prefers-reduced-motion:reduce){
  .ctv5 .knurl,.ctv5 .blades,.ctv5 .glint{animation:none}
  .ctv5 .draw{animation:none;stroke-dashoffset:0;stroke-dasharray:none}
  .ctv5 .fade{animation:none;opacity:1}
  .ctv5 .hl,.ctv5 .mq .q{transition:none}
}

/* ---------- the top bar: under the first screen, then stuck to the top
   (after the test: share + the card; from search: the free test) ---------- */
.ctv5 .share,.ctv5 .testbar{position:sticky;top:var(--top);z-index:10;display:flex;align-items:center;gap:2px;height:52px;padding:0 8px 0 6px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.ctv5 .share .ic{display:grid;place-items:center;flex:0 0 auto;width:40px;height:44px;border:0;background:none;color:var(--navy);cursor:pointer;text-decoration:none}
.ctv5 .share .ic svg{width:21px;height:21px}
.ctv5 .share .ic.more{display:none}
@media (min-width:600px){ .ctv5 .share .ic.more{display:grid} }
/* a narrow phone: smaller buttons, the card button loses its icon before its words */
@media (max-width:420px){ .ctv5 .share{padding:0 6px 0 2px;gap:0} .ctv5 .share .ic{width:36px} .ctv5 .share .ic svg{width:20px;height:20px} .ctv5 .share .dl{padding:0 10px;font-size:13.5px} }
@media (max-width:374px){ .ctv5 .share .ic{width:33px} .ctv5 .share .dl svg{display:none} }
@media (hover:hover) and (pointer:fine){ .ctv5 .share .ic.phone{display:none} }
.ctv5 .share .dl{display:flex;align-items:center;gap:7px;flex:0 1 auto;min-width:0;height:36px;margin-left:auto;padding:0 12px;color:#fff;font:500 14px/1 var(--sans);white-space:nowrap;cursor:pointer}
.ctv5 .share .dl svg{width:16px;height:16px}
.ctv5 .share .dl.busy{opacity:.6}
.ctv5 .testbar{padding:0 8px}
.ctv5 .testbar>a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:38px;color:#fff;font:500 14px/1 var(--sans);text-decoration:none}
.ctv5 .testbar>a svg{width:18px;height:18px}

/* ---------- contents + Premium Profile: under the portrait; once scrolled past, docked to the
   bottom of the phone screen ---------- */
.ctv5 .navslot{position:relative;height:46px;background:#fff;border-top:1px solid var(--line)}
.ctv5 .navbar{display:flex;align-items:center;gap:6px;height:46px;padding:0 8px 0 2px;background:#fff;border-bottom:1px solid var(--line)}
/* the docked bar must not cover the end of the site's footer */
body:has(.ctv5 .navslot.docked){padding-bottom:46px}
.ctv5 .navslot.docked .navbar{position:fixed;z-index:9;left:0;right:0;bottom:0;border-bottom:0;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.ctv5 .tocbtn{display:flex;align-items:center;gap:6px;min-width:0;height:44px;padding:0 10px;border:0;background:none;color:var(--navy);font:500 14px/1 var(--sans);cursor:pointer}
.ctv5 .tocbtn span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ctv5 .tocbtn svg{flex:0 0 auto;width:12px;height:12px;transition:transform .2s}
.ctv5 .navslot.open .tocbtn svg{transform:rotate(180deg)}
.ctv5 .prem{display:flex;align-items:center;gap:7px;flex:0 0 auto;height:34px;margin-left:auto;padding:0 12px;color:#fff;font:500 13.5px/1 var(--sans);white-space:nowrap;text-decoration:none}
.ctv5 .prem svg{width:14px;height:14px}
.ctv5 .toc{display:none;border-radius:var(--rc);position:absolute;z-index:11;left:8px;right:8px;top:52px;max-height:62vh;overflow:auto;padding:6px 0;background:#fff;border:1px solid #284257;outline:1px solid #D8D8D8;outline-offset:-6px;box-shadow:0 22px 44px -10px rgba(40,66,87,.45),0 2px 6px rgba(40,66,87,.18)}
.ctv5 .navslot.docked .toc{position:fixed;top:auto;bottom:54px;box-shadow:0 -22px 44px -10px rgba(40,66,87,.45),0 -2px 6px rgba(40,66,87,.18)}
.ctv5 .navslot.open .toc{display:block}
.ctv5 .toc a{display:block;margin:0 10px;padding:12px 10px;border-top:1px solid #EDEDED;color:#434244;font:400 15px/1.3 var(--sans);text-decoration:none}
.ctv5 .toc a:first-child{border-top:0}
.ctv5 .toc a.cur{color:var(--navy);font-weight:500}
.ctv5 .toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:20;width:max-content;max-width:calc(100vw - 32px);padding:10px 16px;background:var(--navy);color:#fff;font:400 14px/1.3 var(--sans);opacity:0;transition:opacity .2s;pointer-events:none;border-radius:var(--rb)}
.ctv5 .toast.on{opacity:1}

/* ---------- below the first screen: the white reading surface, navy for offers ---------- */
.ctv5 .block{background:#fff;color:#434244;padding:44px var(--px) 48px}
.ctv5 .block h2{margin:0 0 20px;font:400 30px/1.2 var(--serif);color:#284257}
.ctv5 .block p{margin:0 0 14px;font:400 16px/1.55 var(--sans)}
.ctv5 [id^="b"]{scroll-margin-top:calc(var(--top) + 60px)}

/* B03 the portrait: the photo through an eyepiece, the verdict tile */
.ctv5 .wide{margin:28px calc(-1 * var(--px)) 28px}
.ctv5 .wide img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:#E6E8EB}
.ctv5 .ln-1>.wide{position:relative;width:min(300px,78vw);aspect-ratio:1;margin:40px auto 40px}
.ctv5 .ln-1 .wide img{width:100%;height:100%;aspect-ratio:auto;border-radius:50%;object-position:center}
.ctv5 .eyering{display:block;position:absolute;pointer-events:none}
.ctv5 .ln-1 .eyering{inset:-7%;width:114%;height:114%}
.ctv5 .vtile{position:relative;overflow:hidden;margin:30px 0 0;padding:30px 26px 32px;border-radius:var(--rc);background:#284257;color:#fff}
.ctv5 .vtile .vsym{display:block;width:52px;height:52px;margin:0 0 18px;color:#fff}
.ctv5 .vtile p{margin:0!important;font:400 24px/1.3 var(--serif)!important;color:#fff}
.ctv5 .vtile::before{content:"";position:absolute;right:-90px;top:-90px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 22px #284257,0 0 0 23px rgba(255,255,255,.08)}
.ctv5 .vtile>*{position:relative}

/* B04 the dichotomies: four sounding lines as tabs, one pane */
.ctv5 .dichs{background:#F7F7F7}
.ctv5 .dichs .mean{margin:0 0 14px}
.ctv5 .tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 24px}
.ctv5 .tab{display:flex;flex-direction:column;align-items:center;padding:6px 0 10px;border:0;background:none;color:#284257;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.ctv5 .tab .tv{font:400 22px/1 var(--serif);font-variant-numeric:lining-nums;opacity:.64;transition:opacity .2s}
.ctv5 .tab svg{display:block;width:100%;height:auto;margin:4px 0 6px}
.ctv5 .tab .shaft{fill:transparent;transition:fill .2s}
.ctv5 .tab .lot{stroke:#284257;stroke-width:1;opacity:.45;transition:opacity .2s,stroke-width .2s}
.ctv5 .tab .bob{fill:#F7F7F7;stroke:#284257;stroke-width:1.2;opacity:.6;transition:opacity .2s,fill .2s}
.ctv5 .tab .tn{display:block;max-width:100%;font:500 11px/1.25 var(--sans);text-align:center;hyphens:manual;overflow-wrap:break-word;opacity:.8}
.ctv5 .tab[aria-selected="true"] .tv,.ctv5 .tab[aria-selected="true"] .tn{opacity:1}
.ctv5 .tab[aria-selected="true"] .shaft{fill:#fff}
.ctv5 .tab[aria-selected="true"] .lot{opacity:1;stroke-width:2}
.ctv5 .tab[aria-selected="true"] .bob{opacity:1;fill:#284257}
.ctv5 .tab:focus-visible{outline:2px solid #284257;outline-offset:-2px}
.ctv5 .tabs.organic .tv{display:none}
.ctv5 .tabs.organic svg text{display:none}
.ctv5 .pane h3{margin:0 0 12px;font:400 23px/1.25 var(--serif);color:#284257}
/* phone: a hint above the lines, «n из 4» over the pane, hollow bobs for the lines not chosen, the
   three others swing once when the chart first comes into view (Lex, review 1, «Подсказка») */
.ctv5 .thint{display:flex;align-items:center;gap:8px;margin:-6px 0 14px!important;font:400 14px/1.3 var(--sans)!important;color:#6B7280}
.ctv5 .thint svg{width:20px;height:20px;flex:0 0 auto;color:#284257}
.ctv5 .pcount{display:block;margin:0 0 6px;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#6B7280}
.ctv5 .tab .pend{transform-box:view-box;transform-origin:40px 12px}
.ctv5 .tabs.swing .tab:not([aria-selected="true"]) .pend{animation:ctv5-swing 1.6s ease-in-out 2}
.ctv5 .tabs.swing .tab:nth-child(2) .pend{animation-delay:.15s}
.ctv5 .tabs.swing .tab:nth-child(3) .pend{animation-delay:.3s}
.ctv5 .tabs.swing .tab:nth-child(4) .pend{animation-delay:.45s}
@keyframes ctv5-swing{0%,100%{rotate:0deg}25%{rotate:7deg}75%{rotate:-7deg}}
.ctv5 .tab:not([aria-selected="true"]) .bob{fill:#fff;opacity:.9}
@keyframes ctv5-pane-in{from{opacity:0;translate:0 8px}}
.ctv5 .pane.enter{animation:ctv5-pane-in .35s ease-out}
@media (prefers-reduced-motion:reduce){ .ctv5 .tabs.swing .pend{animation:none!important} .ctv5 .pane.enter{animation:none} }
.ctv5 .pdepth{display:none}

/* B05 inside B04: the visitor's own scales above the question; on the phone it closes the band */
.ctv5 .offer{background:#284257;color:#fff;padding:46px var(--px) 48px;text-align:center}
.ctv5 .offer h2,.ctv5 .offer h3{margin:0 0 14px;font:400 32px/1.15 var(--serif);color:#fff}
.ctv5 .offer p{margin:0 0 24px;font:400 16px/1.55 var(--sans);color:rgba(255,255,255,.88);text-align:left}
.ctv5 .dichs>.offer{margin:36px calc(-1 * var(--px)) -48px}
.ctv5 .mini-lots{display:block;width:100%;max-width:330px;height:auto;margin:0 auto 26px;overflow:visible}

/* buttons (Lex, 2026-10-11): a little volume, a spark running round the edge */
.ctv5 .btn{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border:1px solid rgba(255,255,255,.16);border-radius:var(--rb);background:#fff;color:#284257;font:500 16px/1.25 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;text-align:center}
.ctv5 .btn.ink{background:#194C8E;color:#fff;letter-spacing:0;text-wrap:balance;padding:10px 16px}
.ctv5 .prem,.ctv5 .share .dl,.ctv5 .testbar>a{position:relative;border:1px solid rgba(255,255,255,.16);border-radius:var(--rb)}
.ctv5 .btn.ink,.ctv5 .prem,.ctv5 .share .dl,.ctv5 .testbar>a{background:linear-gradient(#2D5A9E,#194C8E 62%);border-color:#173f73;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(0,0,0,.45)}
.ctv5 .offer .btn,.ctv5 .tl .btn{background:linear-gradient(#fff,#EEF0F3);border-color:#fff;box-shadow:inset 0 -2px 0 rgba(40,66,87,.12),0 8px 18px -10px rgba(0,0,0,.6)}
.ctv5 .btn::after,.ctv5 .prem::after,.ctv5 .share .dl::after,.ctv5 .testbar>a::after{content:"";position:absolute;left:0;top:0;width:22px;height:2px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);box-shadow:0 0 6px 1px rgba(255,255,255,.75);offset-path:inset(0 round var(--rb));offset-rotate:auto;offset-anchor:100% 50%;animation:ctv5-run 4.5s linear infinite}
.ctv5 .offer .btn::after,.ctv5 .tl .btn::after{background:linear-gradient(90deg,rgba(25,76,142,0),#194C8E);box-shadow:0 0 6px 1px rgba(25,76,142,.55)}
.ctv5 .prem::after,.ctv5 .share .dl::after,.ctv5 .testbar>a::after{width:14px;animation-duration:6.5s}
@keyframes ctv5-run{from{offset-distance:0%}to{offset-distance:100%}}
/* a stuck button loses its spark, so only one spark is ever on screen (Lex) */
.ctv5 .share.stuck .dl::after,.ctv5 .testbar.stuck a::after,.ctv5 .navslot.docked .prem::after{display:none}
.ctv5 .btn:active,.ctv5 .prem:active,.ctv5 .share .dl:active,.ctv5 .testbar>a:active{transform:translateY(1px)}
.ctv5 .offscreen::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .ctv5 .btn::after,.ctv5 .prem::after,.ctv5 .share .dl::after,.ctv5 .testbar>a::after{display:none} }

/* B07 the eight functions: two quartets, each function under its small lens, opening on tap */
.ctv5 .fx{background:#fff}
.ctv5 .fx h3{margin:0 0 12px;font:400 23px/1.25 var(--serif);color:#284257}
.ctv5 .fxside{display:none}
.ctv5 .fxlens{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.ctv5 .fxh{cursor:pointer;outline:none}
.ctv5 .lgh{display:flex;align-items:center;gap:12px;margin:0 0 12px;font:400 22px/1.2 var(--serif);color:#284257}
.ctv5 .fx4{padding-bottom:0}
.ctv5 .qg{margin:28px calc(-1 * var(--px)) 0;padding:22px var(--px) 18px}
.ctv5 .qg.nval{background:#F7F7F7;margin-top:8px}
.ctv5 .qtext{margin:-2px 0 16px!important}
.ctv5 .fi{border-top:1px solid #D8D8D8}
.ctv5 .fih{display:grid;grid-template-columns:40px 1fr 16px;gap:2px 12px;width:100%;padding:14px 0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:#284257}
.ctv5 .fih .ml{grid-column:1;grid-row:1/3;align-self:center}
.ctv5 .fih .tag{display:block;grid-column:2;font:500 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#6B7280}
.ctv5 .fih .t{display:block;grid-column:2;font:400 19px/1.3 var(--serif)}
.ctv5 .fih .chev{grid-column:3;grid-row:1/3;align-self:center;width:15px;height:15px;color:#284257;transition:transform .2s}
.ctv5 .fi.open .chev{transform:rotate(180deg)}
.ctv5 .fib{display:none;padding:2px 0 12px}
.ctv5 .fi.open .fib{display:block}
.ctv5 .ml{flex:0 0 auto}

/* B06 inside B07: the Premium Profile box — the real cover as a book, light ground, ink button */
.ctv5 .bk{padding:44px var(--px) 46px;background:#F7F7F7;color:#434244}
.ctv5 .fx4>.bk{margin:0 calc(-1 * var(--px))}
.ctv5 .bk h2,.ctv5 .bk h3{margin:0 0 14px;font:400 30px/1.2 var(--serif);color:#284257}
.ctv5 .bk p{margin:0 0 22px;font:400 16px/1.55 var(--sans)}
.ctv5 .bk2{text-align:left}
.ctv5 .book3{position:relative;width:190px;margin:4px auto 30px;padding-right:9px}
.ctv5 .book3 img{position:relative;z-index:1;display:block;width:100%;height:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ctv5 .book3::before{content:"";position:absolute;z-index:2;left:0;top:0;bottom:0;width:7px;background:rgba(255,255,255,.12)}
.ctv5 .book3::after{content:"";position:absolute;right:0;top:5px;bottom:-3px;width:12px;background:repeating-linear-gradient(90deg,#fff 0 1px,#D8D8D8 1px 2px);border:1px solid #D8D8D8;border-left:0}

/* B08 the horizon: strengths above the lens's rule, weaknesses below; each lead phrase opens */
.ctv5 .sw3 h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;font:500 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#284257}
.ctv5 .sw3 .tri{width:0;height:0;border:6px solid transparent}
.ctv5 .hzg.high .tri{border-bottom:9px solid #284257;margin-top:-6px}
.ctv5 .hzg.low .tri{border-top:9px solid #8A9AAB;margin-bottom:-6px}
.ctv5 .hzg.low{margin:0 calc(-1 * var(--px));padding:22px var(--px) 6px;background:#F7F7F7}
.ctv5 .hzi{border-top:1px solid #E6E8EB}
.ctv5 .hzi:first-of-type{border-top:0}
.ctv5 .hzb{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:52px;padding:10px 0;border:0;background:none;text-align:left;color:#284257;font:400 19px/1.3 var(--serif);cursor:pointer}
.ctv5 .hzg.low .hzb{color:#434244}
.ctv5 .hzb svg{flex:0 0 auto;width:15px;height:15px;transition:transform .2s}
.ctv5 .hzi.open .hzb svg{transform:rotate(180deg)}
.ctv5 .hzt{display:none;margin:-2px 0 14px!important}
.ctv5 .hzi.open .hzt{display:block}
.ctv5 .hzline{position:relative;height:30px;margin:8px calc(-1 * var(--px)) 0;background:linear-gradient(#fff 0 50%,#F7F7F7 50%)}
.ctv5 .hzline span{position:absolute;left:var(--px);right:var(--px);top:50%;height:2px;background:#284257}
.ctv5 .hzart{display:none}

/* B09 / B10: a topic icon per paragraph on a thread; the chapter offer as a bookmark card */
.ctv5 .chap h3{margin:0 0 12px;font:400 25px/1.2 var(--serif);color:#284257}
.ctv5 .chap .btn.ink{margin-top:4px}
.ctv5 .chap.love{background:#F7F7F7}
.ctv5 .thread{position:relative;margin-top:6px}
.ctv5 .tr2{position:relative;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start}
.ctv5 .tr2:not(:nth-last-child(2))::before{content:"";position:absolute;left:18px;top:38px;bottom:-6px;border-left:1px dashed #8A9AAB}
.ctv5 .tb2{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #284257;color:#284257}
.ctv5 .chap.love .tb2{border-color:#2D5A9E;color:#2D5A9E}
.ctv5 .tb2 .ti{width:21px;height:21px}
.ctv5 .tr2 p{margin:6px 0 18px}
.ctv5 .bm{display:grid;grid-template-columns:72px 1fr;gap:16px;margin:30px 0 0;padding:20px 16px 20px 0;border-top:2px solid #284257;border-bottom:1px solid #D8D8D8}
.ctv5 .bmside{display:flex;flex-direction:column;align-items:center;gap:2px}
.ctv5 .bmn{font:400 58px/.9 var(--serif);color:#284257;font-variant-numeric:lining-nums}
.ctv5 .bml{margin-bottom:12px;font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#6B7280}
.ctv5 .bmside img{display:block;width:56px;height:auto}
.ctv5 .bm h3{font-size:22px}

/* B11 confused with: the figure, one group per look-alike, the typing line */
.ctv5 .cg{margin:26px 0 0;padding-top:22px;border-top:1px solid #D8D8D8}
.ctv5 .cg h3{margin:0 0 10px;font:400 23px/1.25 var(--serif);color:#284257}
.ctv5 .cg h3 span{font-size:17px;color:#6B7280}
.ctv5 .trio{margin:18px 0 6px}
.ctv5 .trio svg{display:block;width:100%;height:auto}
.ctv5 .tl{margin:28px calc(-1 * var(--px)) -48px;padding:28px var(--px) 32px;background:#284257}
.ctv5 .tl p{margin:0 0 18px;font:400 20px/1.4 var(--serif);color:#fff}

/* B12 compatibility: the sixteen as rows that open in place; the relations set */
.ctv5 .comp{background:#F7F7F7}
.ctv5 .rel{display:block;font:500 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#6B7280}
.ctv5 .plist{margin:20px 0 0}
.ctv5 .pr{border-top:1px solid #D8D8D8}
.ctv5 .prh{display:grid;grid-template-columns:1fr 16px;gap:2px 12px;width:100%;padding:12px 0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:#284257}
.ctv5 .prh .nm2{display:block;font:400 19px/1.25 var(--serif)}
.ctv5 .prh .nm2 small{font:500 11px/1 var(--sans);letter-spacing:.06em;color:#6B7280;margin-left:4px}
.ctv5 .prh .rel{grid-column:1}
.ctv5 .prh .chev{grid-column:2;grid-row:1/3;align-self:center;width:15px;height:15px;transition:transform .2s}
.ctv5 .pr.open .chev{transform:rotate(180deg)}
.ctv5 .prb{display:none;margin:0 0 14px!important}
.ctv5 .pr.open .prb{display:block}
.ctv5 .wheel{display:none}
.ctv5 .set{margin:30px calc(-1 * var(--px)) -48px;padding:28px var(--px) 34px;background:#fff;border-top:2px solid #284257}
.ctv5 .covers{display:flex;justify-content:center;gap:14px;margin:0 0 22px}
.ctv5 .covers img{display:block;width:118px;height:auto;box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}
.ctv5 .covers img:first-child{transform:rotate(-3deg)}
.ctv5 .covers img:last-child{transform:rotate(3deg) translateY(6px)}
.ctv5 .set h3{margin:0 0 12px;font:400 25px/1.2 var(--serif);color:#284257}

/* B13 famous: four round portraits in eyepiece rings */
.ctv5 .pp{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;margin-top:6px}
.ctv5 .pp figure{margin:0}
.ctv5 .pph{position:relative;margin:0 14px 22px}
.ctv5 .pph .eyering{inset:-9%;width:118%;height:118%}
.ctv5 .pp img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;filter:grayscale(1) contrast(1.05);background:#E6E8EB}
.ctv5 .pp figcaption{margin-top:10px;font:400 14px/1.4 var(--sans);text-align:center}
.ctv5 .pp figcaption b{display:block;margin-bottom:2px;font:400 19px/1.2 var(--serif);color:#284257}

/* B14 the myth: the quote set large, struck through as it comes into view */
.ctv5 .myth{background:#F7F7F7}
.ctv5 .mring{display:none}
.ctv5 .mq{margin:0 0 18px!important}
.ctv5 .mq .q{position:relative;font:400 26px/1.3 var(--serif);color:#284257;background:linear-gradient(#2D5A9E,#2D5A9E) no-repeat 0 58%/0% 1.5px;transition:background-size 1.2s cubic-bezier(.6,0,.2,1)}
.ctv5 .mq .q.struck{background-size:100% 1.5px}
.ctv5 .mq .tail{display:block;margin-top:8px;font:500 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#6B7280}

/* B15 FAQ */
.ctv5 .fq{border-top:1px solid #D8D8D8}
.ctv5 .fq:last-child{border-bottom:1px solid #D8D8D8}
.ctv5 .fqh{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:56px;padding:12px 0;border:0;background:none;text-align:left;cursor:pointer;color:#284257}
.ctv5 .fqh .q{font:400 19px/1.3 var(--serif)}
.ctv5 .fqh .chev{flex:0 0 auto;width:15px;height:15px;transition:transform .2s}
.ctv5 .fq.open .chev{transform:rotate(180deg)}
.ctv5 .fqa{display:none;padding:0 0 8px}
.ctv5 .fq.open .fqa{display:block}

/* B16 the closing: on navy, two white end cards */
.ctv5 .close{background:#284257;color:#fff;padding-bottom:30px}
.ctv5 .close>h2{color:#fff}
.ctv5 .close>p{color:rgba(255,255,255,.9)}
.ctv5 .chalo{display:none}
.ctv5 .endc{display:grid;gap:16px;margin-top:26px}
.ctv5 .ec{padding:26px 20px 24px;border-radius:var(--rc)}
.ctv5 .ec h3{margin:0 0 12px;font:400 25px/1.2 var(--serif)}
.ctv5 .close .dark2{background:#fff;color:#434244}
.ctv5 .close .dark2 h3{color:#284257}
.ctv5 .dark2 .sign{display:block;width:40px;height:40px;margin:0 0 14px}
.ctv5 .close .dark2 .sign circle,.ctv5 .close .dark2 .sign path{stroke:#284257}
.ctv5 .close .dark2 .sign path:last-child{fill:#284257;stroke:none}
.ctv5 .close .dark2 .btn{background:linear-gradient(#2D5A9E,#194C8E 62%);color:#fff;border-color:#173f73;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(0,0,0,.45)}
.ctv5 .close .dark2 .btn::after{background:linear-gradient(90deg,rgba(255,255,255,0),#fff);box-shadow:0 0 6px 1px rgba(255,255,255,.75)}
.ctv5 .close .light2{background:#fff;color:#434244}
.ctv5 .light2 h3{color:#284257}
.ctv5 .covers2{display:flex;gap:10px;margin:0 0 18px}
.ctv5 .covers2 img{display:block;width:84px;height:auto;box-shadow:0 8px 16px -10px rgba(0,0,0,.5)}

/* accordion headings: the heading wraps the button and adds nothing of its own */
.ctv5 .ah{margin:0;font:inherit;color:inherit;letter-spacing:normal;text-transform:none}
.ctv5 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= tablet (600-899): the phone layout, the text column about 640 px ================= */
@media (min-width:600px) and (max-width:899px){
  .ctv5{--px:max(40px,calc((100vw - 660px) / 2))}
  .ctv5 .field{padding-left:var(--px);padding-right:var(--px);--chrome:520px;--lk:.84}
  .ctv5 .art{width:min(calc(100svh - var(--chrome)),520px)}
  .ctv5 h1 .by{font-size:14px}
  .ctv5 h1 .alt{font-size:19px}
  .ctv5 .dgrid{max-width:440px;gap:8px 36px}
  .ctv5 .dgrid .pl{font-size:12px}
  .ctv5 .cap{max-width:520px;margin-left:auto;margin-right:auto;font-size:15px}
  .ctv5 .go{max-width:520px;margin-left:auto;margin-right:auto;width:100%}
  .ctv5 .field .lt{font-weight:400}
  .ctv5 .share,.ctv5 .testbar{padding:0 var(--px)}
  .ctv5 .testbar>a{flex:0 1 420px;margin:0 auto}
  .ctv5 .navbar{padding:0 var(--px)}
  .ctv5 .navslot.docked .toc,.ctv5 .toc{left:var(--px);right:var(--px)}
  .ctv5 .block h2{font-size:36px}
  .ctv5 .ln-1>.wide{width:min(360px,60vw)}
  .ctv5 .pp{gap:26px 40px}
  .ctv5 .mini-lots{max-width:420px}
  .ctv5 .tabs{max-width:560px;margin-left:auto;margin-right:auto}
}

/* ================= desktop (from 900 px) =================
   Nothing hidden behind a tap: every section is open, figures stay in view while their text is
   read (B04 the sounding lines, B07 the lens, B11 the figure, B12 the wheel), blocks use the
   width. */
@media (min-width:900px){
  .ctv5{--gut:max(40px,calc((100% - 1200px) / 2));--split:minmax(0,1fr) minmax(0,680px);--gap:72px;overflow-x:clip}

  /* the first screen: the share row is its last line (it sticks once scrolled) */
  .ctv5 .field{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto auto auto 1fr;column-gap:80px;
    min-height:max(540px,calc(100svh - var(--hdr) - 60px));padding:28px var(--gut);--lk:.74}
  .ctv5 .field>h1{grid-column:1;grid-row:2}
  .ctv5 .field>.dgrid{grid-column:1;grid-row:3}
  .ctv5 .field>.cap{grid-column:1;grid-row:4}
  .ctv5 .field>.go{grid-column:1;grid-row:5}
  .ctv5 .field>.art{grid-column:2;grid-row:1 / -1;align-self:center;width:min(calc(100svh - 200px),600px);min-width:420px;margin:0}
  .ctv5 .art>svg:not(.halo){position:relative;z-index:1}
  .ctv5 .field .lt{font-weight:300}
  .ctv5 .field .hit.sel .lt{font-weight:400}
  .ctv5 .field .lt.dim{fill:rgba(255,255,255,.8)}
  .ctv5 .field .hit.sel .lt,.ctv5 .field .hit.sel .lt.dim{fill:#284257}
  .ctv5 .art .halo{display:block;position:absolute;left:50%;top:50%;width:190%!important;height:auto;translate:-50% -50%;pointer-events:none}
  .ctv5 h1{text-align:left}
  .ctv5 h1 .by{font-size:15px;letter-spacing:.08em}
  .ctv5 h1 .nm{justify-content:flex-start;gap:.2em;margin-top:8px;padding-left:0;font-size:min(clamp(72px,6.6vw,100px),calc(540px / (var(--len,6) * .88 + .94)));letter-spacing:.08em}
  .ctv5 h1 .alt{margin-top:10px;font-size:24px}
  .ctv5 .dgrid{max-width:540px;margin:40px 0 0;gap:6px 48px}
  .ctv5 .dgrid .dm{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:58px}
  .ctv5 .dgrid .pi{display:block;grid-row:1 / 3;width:28px;height:28px;color:rgba(255,255,255,.9)}
  .ctv5 .pi svg{display:block;width:100%;height:100%}
  .ctv5 .dgrid .pl{font-size:13px;letter-spacing:.06em}
  .ctv5 .dgrid .n{font:400 17px/1 var(--sans);color:rgba(255,255,255,.92)}
  .ctv5 .dgrid .tr{grid-column:2 / 4;margin-top:8px}
  .ctv5 .cap{max-width:540px;height:72px;margin:28px 0 0;font-size:16px;line-height:1.5;text-align:left}
  .ctv5 .go{max-width:540px;margin-top:18px;padding-top:16px;font-size:17px}

  /* the top bar: one row; the contents list drops from its left end */
  .ctv5 .share,.ctv5 .testbar{height:60px;padding:0 var(--gut);gap:4px}
  .ctv5 .share .navslot,.ctv5 .testbar .navslot,.ctv5 .share .navbar,.ctv5 .testbar .navbar{display:contents}
  .ctv5 .tocbtn{order:0;margin-right:auto;height:60px;padding:0 12px 0 0;font-size:16px;max-width:420px}
  .ctv5 .share .ic{order:1;width:46px}
  .ctv5 .share .dl{order:2;margin:0 0 0 12px;height:40px;padding:0 16px;font-size:15px;background:#fff;color:#284257;border-color:#284257;box-shadow:none}
  .ctv5 .share .dl::after{background:linear-gradient(90deg,rgba(25,76,142,0),#194C8E);box-shadow:0 0 6px 1px rgba(25,76,142,.55)}
  .ctv5 .testbar>a{order:2;flex:0 0 auto;height:40px;padding:0 22px;font-size:15px}
  .ctv5 .prem{order:3;margin-left:10px;height:40px;padding:0 16px;font-size:15px}
  .ctv5 .testbar .prem,.ctv5 .share .prem{background:#fff;color:#284257;border-color:#284257;box-shadow:none}
  .ctv5 .share .prem::after,.ctv5 .testbar .prem::after{display:none}
  /* on the first screen the card is filled and Premium outlined; once the bar sticks they swap (Lex, prem=2) */
  .ctv5.prem2 .share.stuck .prem{background:linear-gradient(#2D5A9E,#194C8E 62%);color:#fff;border-color:#173f73;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(0,0,0,.45)}
  .ctv5.prem2 .share:not(.stuck) .dl{background:linear-gradient(#2D5A9E,#194C8E 62%);color:#fff;border-color:#173f73;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(0,0,0,.45)}
  .ctv5.prem2 .share:not(.stuck) .dl::after{background:linear-gradient(90deg,rgba(255,255,255,0),#fff);box-shadow:0 0 6px 1px rgba(255,255,255,.75)}
  .ctv5 .toc{top:64px;left:var(--gut);right:auto;width:380px;max-height:70vh}
  .ctv5 .share:not(.stuck) .toc,.ctv5 .testbar:not(.stuck) .toc{top:auto;bottom:64px;box-shadow:0 -22px 44px -10px rgba(40,66,87,.45),0 -2px 6px rgba(40,66,87,.18)}
  .ctv5 [id^="b"]{scroll-margin-top:calc(var(--top) + 70px)}

  /* reading blocks: a heading column and a 680 px text column */
  .ctv5 .block{display:grid;grid-template-columns:var(--split);column-gap:var(--gap);align-items:start;padding:112px var(--gut) 120px}
  .ctv5 .block>*{grid-column:2}
  .ctv5 .block>h2{grid-column:1;grid-row:1 / span 60;position:sticky;top:calc(var(--top) + 96px);margin:0;font-size:44px;line-height:1.1;text-wrap:balance}
  .ctv5 .block p{font-size:17px;line-height:1.62}
  /* sections are all open: no chevrons, headings are plain headings */
  .ctv5 .fih,.ctv5 .prh,.ctv5 .fqh,.ctv5 .hzb{pointer-events:none;cursor:default}
  .ctv5 .fi .chev,.ctv5 .pr .chev,.ctv5 .fq .chev,.ctv5 .hzb svg{display:none}
  .ctv5 .fib,.ctv5 .prb,.ctv5 .fqa,.ctv5 .hzt{display:block}

  /* B03: chessboard — photo | text, text | the verdict on navy with the type's sign */
  .ctv5 .portrait{grid-template-columns:1fr 1fr;column-gap:var(--gap)}
  .ctv5 .portrait>h2{position:static;grid-row:auto}
  .ctv5 .portrait>*{grid-column:auto}
  .ctv5 .d03-1>.wide{grid-column:1;grid-row:1 / 5;margin:0;align-self:center;justify-self:center;position:relative;width:min(100%,500px);aspect-ratio:1}
  .ctv5 .d03-1 .wide img{width:100%;height:100%;min-height:0;aspect-ratio:auto;border-radius:50%;object-position:center}
  .ctv5 .d03-1>h2{grid-column:2;grid-row:1;margin-bottom:28px}
  .ctv5 .d03-1>p:nth-of-type(1){grid-column:2;grid-row:2}
  .ctv5 .d03-1>p:nth-of-type(2){grid-column:2;grid-row:3;margin-bottom:0}
  .ctv5 .d03-1>p:nth-of-type(3){grid-column:1;grid-row:5;margin-top:64px}
  .ctv5 .d03-1>p:nth-of-type(4){grid-column:1;grid-row:6;margin-bottom:0}
  .ctv5 .d03-1>.vtile{grid-column:2;grid-row:5 / 7;margin-top:64px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:26px;padding:44px 48px;clip-path:inset(0 round var(--rc))}
  .ctv5 .d03-1 .vtile>*{position:relative;z-index:1}
  .ctv5 .d03-1 .vsym{width:64px;height:64px;flex:0 0 auto;margin:0}
  .ctv5 .d03-1 .vtile p{font:400 clamp(24px,2.2vw,30px)/1.28 var(--serif)!important}
  .ctv5 .d03-1 .vtile::before{right:-120px;top:-120px;width:320px;height:320px;box-shadow:0 0 0 28px #284257,0 0 0 29px rgba(255,255,255,.08),0 0 0 62px #284257,0 0 0 63px rgba(255,255,255,.05)}

  /* B04: the four sounding lines stay in view; all four texts open; the one being read is tinted */
  .ctv5 .dhead{display:block;grid-column:1;grid-row:1 / 6;align-self:start;position:sticky;top:calc(var(--top) + 96px)}
  .ctv5 .dhead>h2{margin:0;font-size:44px;line-height:1.1;color:#284257}
  .ctv5 .dhead>.tabs{max-width:460px;margin:44px 0 0}
  .ctv5 #ctv5-pane0{grid-row:1} .ctv5 #ctv5-pane1{grid-row:2} .ctv5 #ctv5-pane2{grid-row:3} .ctv5 #ctv5-pane3{grid-row:4}
  .ctv5 .dichs .pane,.ctv5 .dichs .pane[hidden]{display:block;margin:0 0 16px;padding:34px 40px 22px;border-left:3px solid transparent;border-radius:var(--rc);transition:background .35s,border-color .35s}
  .ctv5 .dichs .pane.on{background:rgba(40,66,87,.035);border-left-color:#284257}
  .ctv5 .ph{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:14px}
  .ctv5 .ph h3{margin:0!important;font-size:30px!important}
  .ctv5 .pdepth{display:block;font:400 48px/1 var(--serif);color:#284257;font-variant-numeric:lining-nums}
  .ctv5 .pdepth small{font-size:.5em;margin-left:2px}
  .ctv5 .dichs .mean{font:400 22px/1.4 var(--serif)!important;color:#284257}
  .ctv5 .thint,.ctv5 .pcount{display:none!important}
  .ctv5 .tab .tn{font-size:13px}
  .ctv5 .tab .tv{font-size:28px}

  /* B05 inside B04: the fifth sheet — framed, «?» where the others have their depth */
  .ctv5 .dichs>.offer{grid-column:2;grid-row:5;margin:8px 0 0;padding:34px 40px 38px;background:#fff;color:#434244;text-align:left;border:1px solid #284257;outline:1px solid #D8D8D8;outline-offset:-8px;border-radius:var(--rc)}
  .ctv5 .dichs>.offer>.mini-lots{display:none}
  .ctv5 .dichs>.offer .ph h3{margin:0!important;font:400 30px/1.2 var(--serif)!important;color:#284257}
  .ctv5 .dichs>.offer .pdepth{font-size:52px}
  .ctv5 .pdepth.q{font:300 52px/1 var(--sans)}
  .ctv5 .dichs>.offer p{margin:0 0 26px;font-size:17px;line-height:1.62;color:#434244}
  .ctv5 .dichs .offer .btn{display:inline-flex;min-width:300px;min-height:54px;padding:0 30px;font-size:17px;background:linear-gradient(#2D5A9E,#194C8E 62%);color:#fff;border-color:#173f73;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(0,0,0,.45)}
  .ctv5 .dichs .offer .btn::after{background:linear-gradient(90deg,rgba(255,255,255,0),#fff);box-shadow:0 0 6px 1px rgba(255,255,255,.75)}
  .ctv5 .dichs>.offer :focus-visible,.ctv5 .conf .tl :focus-visible,.ctv5 .close .ec :focus-visible{outline-color:#284257}
  .ctv5 .dichs{padding-bottom:120px}

  /* B07: the lens as a sticky index; all eight sections open */
  .ctv5 .fx4>h2{grid-row:1;position:static}
  .ctv5 .fx4>p{grid-column:2;grid-row:1}
  .ctv5 .fxside{display:block;grid-column:1;grid-row:2 / 6;align-self:start;position:sticky;top:calc(var(--top) + 100px);max-width:380px;margin-top:56px;--lk:.86}
  .ctv5 .fxside .fxlens{max-width:none}
  .ctv5 .fxside .fxlens>circle{fill:none;stroke:rgba(40,66,87,.35)}
  .ctv5 .fxside .fxlens>circle.fxc{fill:rgba(40,66,87,.08)}
  .ctv5 .fxside .fxiris path{stroke:rgba(40,66,87,.6)}
  .ctv5 .fxside .fxstar path{fill:#284257}
  .ctv5 .fxside .fxlens>path{stroke:rgba(40,66,87,.3)}
  .ctv5 .fxside .fxh>path.ink{stroke:#284257;fill:rgba(40,66,87,.1)!important;transition:fill .2s}
  .ctv5 .fxside .fxh>path.ink2{stroke:rgba(40,66,87,.45);fill:rgba(40,66,87,.025)!important;transition:fill .2s}
  .ctv5 .fxside .lt{fill:#284257;font-weight:400}
  .ctv5 .fxside .lt.dim{fill:rgba(40,66,87,.72)}
  .ctv5 .fxside .fxh:hover>path:first-child{fill:rgba(40,66,87,.2)!important}
  .ctv5 .fxside .fxh.sel>path:first-child{fill:#284257!important}
  .ctv5 .fxside .fxh.sel .lt{fill:#fff}
  .ctv5 .fxside .fxh:focus-visible>path:first-child{stroke:#194C8E;stroke-width:2.5}
  .ctv5 .fxcap{min-height:72px;margin:18px 0 0!important;font:400 14px/1.45 var(--sans)!important;color:#6B7280;text-align:center}
  .ctv5 .fxcap b{display:block;margin-bottom:4px;font:400 21px/1.25 var(--serif);color:#284257}
  .ctv5 .fx4{padding-bottom:120px;background:linear-gradient(#fff 0 var(--g,100%),#F7F7F7 var(--g,100%))}
  .ctv5 .fx4>.qg{grid-column:2;margin:48px 0 0;padding:0}
  .ctv5 .fx4>.qg.nval{padding:0;background:none}
  .ctv5 .fx4 .fih{padding:26px 0 12px}
  .ctv5 .fx4 .fih .t{font-size:27px}
  .ctv5 .fx4 .fib{padding:0 0 20px}

  /* B06 inside B07: the last sheet of the right column */
  .ctv5 .fx4>.bk{grid-column:2;display:grid;grid-template-columns:108px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:32px;margin:48px 0 0;padding:34px 40px 36px;
    background:#fff;border:1px solid #284257;outline:1px solid #D8D8D8;outline-offset:-8px;border-radius:var(--rc);text-align:left}
  .ctv5 .fx4>.bk>.book3{grid-column:1;grid-row:1 / -1;align-self:start;width:108px;margin:4px 0 0;padding-right:6px;filter:drop-shadow(0 12px 16px rgba(40,66,87,.25))}
  .ctv5 .fx4>.bk>h3{grid-column:2;margin:0 0 10px!important;font:400 30px/1.2 var(--serif)!important;color:#284257}
  .ctv5 .fx4>.bk>p{grid-column:2;margin:0 0 24px;font-size:17px;line-height:1.62}
  .ctv5 .fx4>.bk>.btn{grid-column:2;justify-self:start;align-self:start;min-width:300px;min-height:54px;padding:0 30px;font-size:17px}

  /* B08: the horizon across the page; six strengths above in three columns, six weaknesses below */
  .ctv5 .sw3{display:block;padding-bottom:0}
  .ctv5 .sw3>h2{position:static;margin-bottom:44px}
  .ctv5 .hzg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;row-gap:8px}
  .ctv5 .hzg h3{grid-column:1 / -1;margin-bottom:18px!important;font-size:13px!important}
  .ctv5 .hzi,.ctv5 .hzi:first-of-type{border-top:1px solid #D8D8D8}
  .ctv5 .hzb{min-height:0;padding:22px 0 10px;font-size:23px;line-height:1.25}
  .ctv5 .hzt{margin:0 0 18px!important;font-size:16px!important}
  .ctv5 .hzline{margin:44px calc(50% - 50vw) 0;height:48px}
  .ctv5 .hzart{display:block;position:absolute;right:calc(50% - 1160px);top:50%;width:1000px;height:auto;translate:0 -50%;z-index:1;pointer-events:none}
  .ctv5 .hzline span{z-index:2;left:0;right:0}
  .ctv5 .sw3 .hzi,.ctv5 .sw3 .hzg h3{position:relative;z-index:2}
  .ctv5 .hzg.low{margin:0;padding:30px 0 110px;background:#F7F7F7;box-shadow:0 0 0 100vmax #F7F7F7;clip-path:inset(0 -100vmax)}

  /* B09 / B10: each an open book — two pages, three paragraphs each; the chapter offer written
     on the right page after the last paragraphs (Lex, of=3) */
  .ctv5 .chap{display:block}
  .ctv5 .chap>h2{position:static;margin:0 0 52px}
  .ctv5 .chap.work{background:#fff}
  .ctv5 .chap.love{background:#F7F7F7}
  .ctv5 .chap .thread{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:128px;margin:0;padding:64px 64px 40px;background:#fff;border-radius:var(--rc);box-shadow:0 34px 60px -44px rgba(40,66,87,.5),0 1px 0 rgba(40,66,87,.06);position:relative}
  .ctv5 .chap.work .thread{background:#F7F7F7;box-shadow:0 34px 60px -48px rgba(40,66,87,.4)}
  .ctv5 .chap .thread::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:96px;translate:-50% 0;border:0;background:linear-gradient(90deg,rgba(40,66,87,0),rgba(40,66,87,.08) 50%,rgba(40,66,87,0))}
  .ctv5 .chap .thread::after{content:"";position:absolute;left:50%;top:24px;bottom:24px;border-left:1px solid rgba(40,66,87,.14)}
  .ctv5 .chap .tr2{grid-template-columns:44px 1fr;gap:18px}
  .ctv5 .chap .tr2::before{display:none}
  .ctv5 .chap .tb2{width:44px;height:44px}
  .ctv5 .chap .tr2 p{margin:9px 0 28px}
  .ctv5 .chap .thread>.bm{grid-column:2;grid-row:3 / 5;align-self:end;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:22px;max-width:none;margin:6px 0 24px 62px;padding:26px 0 0;
    background:none;border:0;border-top:1px solid rgba(40,66,87,.22);outline:0;border-radius:0}
  /* More than six paragraphs: the grid grows to ceil((n + 2) / 2) rows and the chapter mark keeps
     the rows under the right column's paragraphs — otherwise the seventh one opens a third column
     and squeezes the text into a strip (EN Seer, 8; EN Flamekeeper, 7). */
  .ctv5 .chap .thread:has(>.tr2:nth-child(7)){grid-template-rows:repeat(5,auto)}
  .ctv5 .chap .thread:has(>.tr2:nth-child(7))>.bm{grid-row:3 / 6}
  .ctv5 .chap .thread:has(>.tr2:nth-child(8))>.bm{grid-row:4 / 6}
  .ctv5 .chap .thread:has(>.tr2:nth-child(9)){grid-template-rows:repeat(6,auto)}
  .ctv5 .chap .thread:has(>.tr2:nth-child(9))>.bm{grid-row:4 / 7}
  .ctv5 .chap .thread:has(>.tr2:nth-child(10))>.bm{grid-row:5 / 7}
  .ctv5 .chap .thread>.bm .bmside{display:flex;flex-direction:column;align-items:center;gap:0;grid-column:1;grid-row:1}
  .ctv5 .chap .thread>.bm .bmside img{order:-1;width:76px;margin:4px 0 10px;border-radius:3px;box-shadow:0 10px 16px -10px rgba(40,66,87,.5)}
  .ctv5 .chap .thread>.bm .bmn{font:300 30px/1 var(--sans);color:#284257}
  .ctv5 .chap .thread>.bm .bml{margin:4px 0 0;font-size:10px}
  .ctv5 .chap .thread>.bm .bmmain{grid-column:2;grid-row:1}
  .ctv5 .chap .thread>.bm .bmmain h3{margin:0 0 8px!important;font:400 24px/1.22 var(--serif)!important}
  .ctv5 .chap .thread>.bm .bmmain p{margin:0 0 18px;font-size:16px;line-height:1.58}
  .ctv5 .chap .thread>.bm .bmmain .btn{display:inline-flex;min-width:0;min-height:50px;padding:0 26px;font-size:16px}

  /* B11: one figure on the left (sticky); the texts on the right; the typing line as a plain link */
  .ctv5 .conf>h2{grid-row:1;position:static}
  .ctv5 .conf>.cintro{grid-column:2;grid-row:1;align-self:end}
  .ctv5 .conf>.cintro p{margin:0;font:400 24px/1.4 var(--serif)!important;color:#284257}
  .ctv5 .trio{display:block;grid-column:1;grid-row:2 / 6;align-self:start;position:sticky;top:calc(var(--top) + 120px);margin-top:44px}
  .ctv5 .trio svg{max-width:460px}
  .ctv5 .trio .lk{transition:opacity .3s}
  .ctv5 .trio .o1,.ctv5 .trio .o2,.ctv5 .trio .o3{transition:fill .3s,stroke-width .3s}
  .ctv5 .conf:has(.cg:nth-of-type(1):hover) .trio .o1,.ctv5 .conf:has(.cg:nth-of-type(2):hover) .trio .o2,.ctv5 .conf:has(.cg:nth-of-type(3):hover) .trio .o3{fill:rgba(40,66,87,.14);stroke-width:2.6}
  .ctv5 .conf:has(.cg:nth-of-type(1):hover) .trio .lk:not(.lk1),.ctv5 .conf:has(.cg:nth-of-type(2):hover) .trio .lk:not(.lk2),.ctv5 .conf:has(.cg:nth-of-type(3):hover) .trio .lk:not(.lk3){opacity:.28}
  .ctv5 .conf>.cg{grid-column:2;margin:40px 0 0;padding-top:30px}
  .ctv5 .cg h3{font-size:30px}
  .ctv5 .conf>.tl{grid-column:2;margin:34px 0 0;padding:22px 0 0;background:none;border-top:1px solid #D8D8D8}
  .ctv5 .conf .tl p{margin:0 0 10px!important;font:400 22px/1.4 var(--serif)!important;color:#284257}
  .ctv5 .conf .tl .btn{display:inline-flex;min-height:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:#194C8E;font:500 17px/1.4 var(--sans);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .ctv5 .conf .tl .btn::after{content:"→";position:static;display:inline-block;width:auto;height:auto;margin-left:8px;offset-path:none;animation:none;background:none;box-shadow:none}

  /* B12: the wheel of the sixteen (sticky), all sixteen texts open beside it */
  .ctv5 .comp>h2{grid-row:1;position:static}
  .ctv5 .comp>.cintro{grid-column:2;grid-row:1}
  .ctv5 .prh{pointer-events:none}
  .ctv5 .prh .nm2{font-size:22px}
  .ctv5 .prb{font-size:15px!important;line-height:1.58!important}
  .ctv5 .d12-1{grid-template-columns:minmax(0,460px) minmax(0,1fr)}
  .ctv5 .d12-1 .wheel{display:block;grid-column:1;grid-row:2 / 4;align-self:start;position:sticky;top:calc(var(--top) + 96px);margin-top:40px}
  .ctv5 .wheel svg{display:block;width:100%;height:auto}
  .ctv5 .wl{stroke:#284257;stroke-opacity:.1;transition:stroke-opacity .2s}
  .ctv5 .wd{fill:#F7F7F7;stroke:#284257;stroke-width:1.2;transition:fill .2s}
  .ctv5 .wt{font:400 13px var(--sans);fill:#434244;transition:fill .2s}
  .ctv5 .wp{cursor:pointer;outline:none}
  .ctv5 .wp.on .wl,.ctv5 .wp:focus-visible .wl{stroke-opacity:.55}
  .ctv5 .wp.on .wd,.ctv5 .wp:focus-visible .wd{fill:#284257}
  .ctv5 .wp.on .wt,.ctv5 .wp:focus-visible .wt{fill:#284257;font-weight:500}
  .ctv5 .d12-1 .plist{grid-column:2;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:8px;margin-top:40px}
  .ctv5 .d12-1 .pr{padding:18px 22px 20px;border:0;border-radius:14px;transition:background .2s}
  .ctv5 .d12-1 .pr.on{background:#fff}
  .ctv5 .d12-1 .prh{padding:0 0 8px}
  .ctv5 .d12-1 .prb{margin:0!important}
  .ctv5 .comp .set{grid-column:2;justify-self:center;display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:40px;width:100%;margin:72px 0 0;padding:34px 40px 36px;
    background:#fff;border:1px solid #284257;outline:1px solid #D8D8D8;outline-offset:-8px;border-radius:var(--rc);box-shadow:none}
  .ctv5 .comp .set .covers{grid-column:1;grid-row:1 / -1;align-self:start;justify-content:flex-start;gap:10px;margin:4px 0 0}
  .ctv5 .comp .set .covers img{width:70px;border-radius:3px}
  .ctv5 .comp .set>h3{grid-column:2;margin:0 0 10px!important;font:400 30px/1.2 var(--serif)!important;color:#284257}
  .ctv5 .comp .set>p{grid-column:2;margin:0 0 24px;font-size:17px;line-height:1.62}
  .ctv5 .comp .set>.btn{grid-column:2;justify-self:start;min-width:300px;min-height:54px;padding:0 30px;font-size:17px}

  /* B13: the four seen through the lens; pointing at one turns its ring as if focusing */
  .ctv5 .fam{display:block}
  .ctv5 .fam>h2{position:static;margin-bottom:56px}
  .ctv5 .pp{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
  .ctv5 .pph{margin:0 20px 32px}
  .ctv5 .pp img{clip-path:circle(50%);transition:filter .6s,scale .9s cubic-bezier(.3,.6,.2,1),clip-path .9s cubic-bezier(.3,.6,.2,1)}
  .ctv5 .pph .eyering{opacity:.55;transition:transform 1.2s cubic-bezier(.3,.6,.2,1),opacity .6s}
  .ctv5 .pp figure:hover .eyering{transform:rotate(120deg);opacity:1}
  .ctv5 .pp figure:hover img{scale:1.09;clip-path:circle(45.9%);filter:grayscale(1) contrast(1.22)}
  .ctv5 .pp figcaption{font-size:15px}
  .ctv5 .pp figcaption b{font-size:24px;margin:0 0 6px}

  /* B14: the myth across the grey band, struck; faint lens rings behind it */
  .ctv5 .myth{display:block;position:relative;overflow:hidden}
  .ctv5 .myth>:not(.mring){position:relative;z-index:1}
  .ctv5 .mring{display:block;position:absolute;right:-240px;top:50%;width:800px;height:auto;translate:0 -50%;pointer-events:none}
  .ctv5 .myth>h2{position:static;top:auto;margin-bottom:36px}
  .ctv5 .myth>.mq{max-width:1000px;margin-bottom:48px!important}
  .ctv5 .mq .q{font-size:54px;line-height:1.18}
  .ctv5 .mq .tail{margin-top:18px}
  .ctv5 .mbody{column-count:2;column-gap:var(--gap)}
  .ctv5 .mbody p{break-inside:avoid}

  /* B15: every question with its answer beside it */
  .ctv5 .faq{display:block}
  .ctv5 .faq>h2{position:static;margin-bottom:40px}
  .ctv5 .fq{display:grid;grid-template-columns:var(--split);column-gap:var(--gap);padding:30px 0 16px}
  .ctv5 .fq .ah{grid-column:1}
  .ctv5 .fqh{min-height:0;padding:0}
  .ctv5 .fqh .q{font-size:26px;line-height:1.25}
  .ctv5 .fqa{grid-column:2;padding:0}

  /* B16: the page closes on the navy of the first screen, with its optical bench; the two end
     cards are framed sheets side by side */
  .ctv5 .close{position:relative;overflow:hidden;padding-bottom:120px}
  .ctv5 .close>:not(.chalo){position:relative;z-index:1}
  .ctv5 .chalo{display:block;position:absolute;left:-300px;top:-260px;width:980px;pointer-events:none}
  .ctv5 .chalo svg{display:block;width:100%;height:auto}
  .ctv5 .close>h2{grid-row:1;position:static;top:auto;color:#fff}
  /* No fixed row: a second paragraph goes under the first, not on top of it (EN Flamekeeper). */
  .ctv5 .close>p{grid-column:2;font:400 24px/1.45 var(--serif)!important;color:rgba(255,255,255,.92)}
  .ctv5 .endc{grid-column:1 / -1;grid-template-columns:1fr 1fr;gap:28px;margin-top:72px}
  .ctv5 .close .ec{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:24px;padding:38px 42px 40px;background:#fff;color:#434244;
    border:1px solid #284257;outline:1px solid #D8D8D8;outline-offset:-8px}
  .ctv5 .close .ec>h3{grid-column:1;grid-row:1;margin:0 0 12px;font-size:30px;line-height:1.2;color:#284257}
  .ctv5 .close .ec>p{grid-column:1;margin:0 0 26px;font-size:17px;line-height:1.62;color:#434244}
  .ctv5 .close .ec>.btn{grid-column:1;align-self:end;justify-self:start;min-width:300px;min-height:54px;padding:0 30px;font-size:17px}
  .ctv5 .close .dark2 .sign{grid-column:2;grid-row:1 / 3;width:64px;height:64px;margin:2px 0 0}
  .ctv5 .close .covers2{grid-column:2;grid-row:1 / 3;align-self:start;align-items:flex-start;margin:2px 0 0;gap:8px}
  .ctv5 .close .covers2 img{width:72px;height:auto;border-radius:3px}
}

/* desktop, narrow band (900-1199): the left column keeps at least 300 px */
@media (min-width:900px) and (max-width:1199px){
  .ctv5{--split:minmax(300px,36%) minmax(0,1fr);--gap:44px}
  .ctv5 .field{column-gap:40px}
  .ctv5 .field>.art{min-width:0;width:min(calc(100svh - 200px),44vw)}
  .ctv5 h1 .nm{font-size:min(62px,calc(400px / (var(--len,6) * .88 + .94)))}
  .ctv5 .dgrid{gap:6px 28px}
  .ctv5 .dgrid .dm{grid-template-columns:26px minmax(0,1fr) auto;column-gap:10px}
  .ctv5 .dgrid .pi{width:24px;height:24px}
  .ctv5 .dgrid .pl{font-size:12px;letter-spacing:.02em}
  .ctv5 .block>h2,.ctv5 .dhead>h2{font-size:38px}
  .ctv5 .d12-1{grid-template-columns:minmax(300px,36%) minmax(0,1fr)}
  .ctv5 .d12-1 .plist{grid-template-columns:1fr}
  .ctv5 .chap .thread{column-gap:72px;padding:48px 44px 28px}
  .ctv5 .hzg{column-gap:32px}
  .ctv5 .pp{gap:24px}
  .ctv5 .pph{margin:0 12px 28px}
}
/* 900-1099: the scales drop their icons so the longest pole name keeps clear of its number */
@media (min-width:900px) and (max-width:1099px){
  .ctv5 .dgrid .pi{display:none}
  .ctv5 .dgrid .dm{grid-template-columns:minmax(0,1fr) auto}
  .ctv5 .dgrid .tr{grid-column:1 / 3}
}
@media (min-width:900px) and (max-height:820px){
  .ctv5 .field{padding-top:18px;padding-bottom:18px}
  .ctv5 h1 .nm{font-size:min(68px,calc(540px / (var(--len,6) * .88 + .94)))}
  .ctv5 h1 .alt{font-size:20px}
  .ctv5 .dgrid{margin-top:24px}
  .ctv5 .dgrid .dm{min-height:50px}
  .ctv5 .cap{margin-top:16px}
  .ctv5 .go{margin-top:10px}
}

/* ================= the result card (proto/card.html «Линза», review 1), drawn off-screen to PNG =================
   The lens dominates; the four scales sit in the corners of its square (bottom two mirrored).
   Real pixel sizes; the page's own fonts (EB Garamond, Roboto from Google Fonts), handed to the
   exporter from the browser cache — see type-page-v5.js. */
.ctcard{position:relative;overflow:hidden;font-family:"Roboto",sans-serif;box-sizing:border-box;-webkit-font-smoothing:antialiased}
.ctcard *{box-sizing:border-box}
.ctcard svg{display:block}
.ctcard .brand{font:400 34px/1 "EB Garamond",Georgia,serif;letter-spacing:.01em}
.ctcard .lbl{font:500 20px/1 "Roboto",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.ctcard .nm{display:flex;align-items:center;justify-content:center;gap:.18em;font:400 var(--fs,124px)/1 "EB Garamond",Georgia,serif;letter-spacing:.1em;text-transform:uppercase}
.ctcard .nm svg{width:.74em;height:.74em;flex:0 0 auto;color:currentColor}
.ctcard .alt{font:400 40px/1.2 "EB Garamond",Georgia,serif}
.ctcard .verdict{font:400 40px/1.3 "EB Garamond",Georgia,serif;text-wrap:balance}
.ctcard .ct{font-family:"Roboto",sans-serif;font-weight:400;text-transform:uppercase}
.ctcard.c1{width:1080px;height:1350px;background:#284257;color:#fff;display:flex;flex-direction:column;align-items:center;padding:54px 64px 50px;text-align:center}
.ctcard.c1 .top{display:flex;justify-content:space-between;align-items:center;width:100%}
.ctcard.c1 .top .lbl{color:rgba(255,255,255,.7)}
.ctcard.c1 .nm{margin-top:26px;text-align:center}
.ctcard.c1 .nm span{text-wrap:balance}
.ctcard.c1 .alt{margin-top:8px;font-size:34px;color:rgba(255,255,255,.82)}
.ctcard.c1 .verdict{max-width:900px;margin-top:16px;font-size:33px;color:rgba(255,255,255,.95)}
.ctcard.c1 .stage{position:relative;flex:1 1 auto;width:100%;min-height:0;margin-top:18px}
.ctcard.c1 .stage .lens{position:absolute;left:50%;top:50%;height:100%;width:auto;max-width:100%;translate:-50% -50%}
.ctcard.c1 .cn{position:absolute;display:flex;flex-direction:column;gap:6px;width:240px}
.ctcard.c1 .cn.tl{left:0;top:0;text-align:left}
.ctcard.c1 .cn.tr{right:0;top:0;text-align:right;align-items:flex-end}
.ctcard.c1 .cn.bl{left:0;bottom:0;text-align:left;flex-direction:column-reverse}
.ctcard.c1 .cn.br{right:0;bottom:0;text-align:right;align-items:flex-end;flex-direction:column-reverse}
.ctcard.c1 .cn .pl{font:500 19px/1.2 "Roboto",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.ctcard.c1 .cn .n{font:400 62px/1 "EB Garamond",Georgia,serif;font-variant-numeric:lining-nums}
.ctcard.c1 .cn .tr2{position:relative;width:170px;height:2px;background:rgba(255,255,255,.25)}
.ctcard.c1 .cn .tr2 i{position:absolute;left:0;top:-2px;height:6px;background:#fff}
.ctcard.c1 .cn.tr .tr2 i,.ctcard.c1 .cn.br .tr2 i{left:auto;right:0}
.ctcard.c1 .cn.bl .tr2,.ctcard.c1 .cn.br .tr2{margin-bottom:4px}
.ctcard.c1 .foot{display:flex;justify-content:space-between;align-items:center;gap:30px;width:100%;margin-top:22px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);text-align:left}
.ctcard.c1 .cta{font:400 34px/1.2 "EB Garamond",Georgia,serif;color:#fff;text-wrap:balance}
.ctcard.c1 .pill{flex:0 0 auto;padding:16px 30px;border-radius:14px;background:#fff;color:#284257;font:500 26px/1 "Roboto",sans-serif;letter-spacing:.02em}
.ctcard.c1 .halo{position:absolute;left:50%;top:860px;width:1700px;translate:-50% -50%;pointer-events:none}
.ctcard.c1>*:not(.halo){position:relative}
.ctcard.og{width:1200px;height:630px;background:#284257;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) 600px;align-items:center;gap:36px;padding:34px 44px 34px 64px}
.ctcard.og .nm{justify-content:flex-start;margin-top:18px}
.ctcard.og .alt{font-size:30px;margin-top:8px;color:rgba(255,255,255,.82)}
.ctcard.og .verdict{font-size:30px;margin-top:20px}
.ctcard.og .brand{font-size:30px;color:rgba(255,255,255,.85)}
.ctcard.og .stage{position:relative;width:600px;height:562px}
.ctcard.og .stage .lens{position:absolute;left:50%;top:0;height:100%;width:auto;translate:-50% 0}
.ctcard.og .cn{position:absolute;font:500 15px/1.2 "Roboto",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ctcard.og .cn::after{content:"";display:block;width:110px;height:2px;margin-top:8px;background:rgba(255,255,255,.35)}
.ctcard.og .cn.tl{left:0;top:0}.ctcard.og .cn.tr{right:0;top:0;text-align:right}.ctcard.og .cn.tr::after,.ctcard.og .cn.br::after{margin-left:auto}
.ctcard.og .cn.bl{left:0;bottom:0}.ctcard.og .cn.br{right:0;bottom:0;text-align:right}
.ctcard.og .cn.bl::after,.ctcard.og .cn.br::after{display:none}
.ctcard.og .cn.bl::before,.ctcard.og .cn.br::before{content:"";display:block;width:110px;height:2px;margin-bottom:8px;background:rgba(255,255,255,.35)}
.ctcard.og .cn.br::before{margin-left:auto}
.ctcard.og .halo{position:absolute;right:-420px;top:50%;width:1500px;translate:0 -50%;pointer-events:none}
.ctcard.og>*{position:relative}