/* The home page (Website/Design/projects/home, 2026-10-20), from the prototype proto/_template.html and
   the dial (lextarrel_ref/dial.css), scoped to .home; built by a script, edit the source and rebuild.
   The tokens are the header's (css/site-chrome.css), repeated for the page. */
.home{--navy:#284257;--ink:#194C8E;--ink2:#2D5A9E;--text:#434244;--muted:#6B7280;--grey:#F7F7F7;--line:#E6E8EB;--rule:#D8D8D8;
  --rb:10px;--rc:18px;--rm:12px;--px:20px;--serif:"EB Garamond",Georgia,serif;--sans:"Roboto",system-ui,sans-serif;
  display:block;font:400 16px/1.55 var(--sans);color:var(--text);background:#fff}
.home,.home *,.home *::before,.home *::after{box-sizing:border-box}
/* the site's style.css unsets a and button: back to normal inside the page */
.home a,.home button{all:revert;box-sizing:border-box;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.home a{text-decoration:none}
.home button{background:none;border:0;padding:0;margin:0}
.home h1,.home h2,.home h3{margin:0;font-weight:400}
.home p,.home ul,.home ol,.home figure,.home blockquote{margin:0}
.home svg{display:block}
.home :focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}
.home .hero :focus-visible,.home .fin :focus-visible{outline-color:#fff}
.home{--cw:1264px}
.home .wrap{max-width:var(--cw);margin:0 auto;padding:0 var(--px)}

/* ---------- first screen ----------
   Round 4 (Lex): the cloud fills the screen above the heading; the heading is the offer (3 lines at
   most, text to come) with the button right under it, lower than the page buttons; nothing else. */
.home .hero{position:relative;overflow:hidden;color:#fff;background:var(--navy)}
.home .hero .wrap{padding-top:20px;padding-bottom:26px;max-width:640px}
.home .hq{margin:0;font:400 28px/1.16 var(--serif);text-wrap:balance}
.home .hcta{margin-top:16px}
.home .hcta .btn{min-height:46px}

/* The dial, copied 2026-10-20 from lextarrel.com p2 «Круг квадр» (C:/websites/lextarrel/design/build/p2.css,
   lines «the dial» … «hotspots»), by Lex's decision to swap first screens. To be reworked here.
   Its variables are scoped to .dial-wrap; --ink is renamed --dial-ink (CoreTypes --ink is the button blue). */
.home .dial-wrap{--paper:#EEF1F5;--dial-ink:#16222F;--lit-line:#A9C2EA;--ease:cubic-bezier(.2,.7,.1,1)}
/* the dial */
.home .dial-wrap{ position: relative; width: 100%; max-width: 760px; margin-inline: auto; }
.home .dial{ width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; --sw: 1; }
.home .dial .halo circle{ fill: none; stroke: rgba(238, 241, 245, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home .dial .halo .h2{ stroke-dasharray: 2 7; }
.home .dial .rim-o{ fill: none; stroke: rgba(238, 241, 245, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home .dial .rim-i{ fill: rgba(22, 34, 47, .16); stroke: rgba(238, 241, 245, .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home .dial .knurl{ fill: none; stroke: rgba(238, 241, 245, .34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home .dial .glint{
  fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .05 .95; stroke-dashoffset: .25;
  opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); pointer-events: none;
}
.home .dial .bz{ fill: none; stroke: rgba(238, 241, 245, .3); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke .5s var(--ease); }
.home .dial .bz.is-own{ stroke: rgba(238, 241, 245, .8); stroke-width: 1.6; }
.home .dial .bz.is-nb{ stroke: rgba(169, 194, 234, .55); }
.home .dial .bz.is-op{ stroke: rgba(238, 241, 245, .18); }
.home .dial .gap-node{ fill: rgba(238, 241, 245, .55); }
.home .dial .pointer{ transition: transform .9s var(--ease); }
.home .dial .pointer path:first-child{ fill: var(--paper); }
.home .dial .pointer-line{ fill: none; stroke: rgba(238, 241, 245, .45); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.home .dial .lens-orbit{ fill: none; stroke: rgba(238, 241, 245, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home .dial .ring-dot{ fill: none; stroke: rgba(238, 241, 245, .22); stroke-width: 1; stroke-dasharray: 1 7; vector-effect: non-scaling-stroke; }
.home .dial .ring-dash{ fill: none; stroke: rgba(238, 241, 245, .08); stroke-width: 1; stroke-dasharray: 5 9; vector-effect: non-scaling-stroke; }
.home .dial .ring-fine{ fill: none; stroke: rgba(238, 241, 245, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home .dial .iris-ticks{ fill: none; stroke: rgba(238, 241, 245, .32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home .dial .iris-disc{ fill: rgba(22, 34, 47, .22); stroke: rgba(238, 241, 245, .45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home .dial .iris-half{ fill: rgba(255, 255, 255, .06); }
.home .dial .blades path{ fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home .dial .blades{ transform-origin: 0 0; transition: transform 1.2s var(--ease); }
/* signs: line drawings from the CoreTypes type page; stroke widths in the sign's 48-unit box */
.home .sym{ fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.home .dial .core-sym{ color: var(--paper); stroke-width: .62; }
/* lenses */
.home .dial .lens-disc{ fill: var(--navy); }
.home .dial .lens-half{ fill: rgba(255, 255, 255, 0); transition: fill .5s var(--ease); }
.home .dial .lens-ring{ fill: none; stroke: rgba(238, 241, 245, .3); stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke .5s var(--ease); }
.home .dial .lens-ring2{ fill: none; stroke: rgba(238, 241, 245, .14); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .5s var(--ease); }
.home .dial .lens-ticks{ fill: none; stroke: rgba(238, 241, 245, 0); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .5s var(--ease); }
.home .dial .lens .sym{ color: rgba(238, 241, 245, .4); stroke-width: 1.45; transition: color .5s var(--ease); }
.home .dial .lens.is-own .lens-ring{ stroke: rgba(238, 241, 245, .8); }
.home .dial .lens.is-own .sym{ color: rgba(238, 241, 245, .92); }
.home .dial .lens.is-nb .lens-ring{ stroke: rgba(169, 194, 234, .5); }
.home .dial .lens.is-nb .sym{ color: rgba(220, 227, 236, .66); }
.home .dial .lens.is-op .lens-ring{ stroke: rgba(238, 241, 245, .2); }
.home .dial .lens.is-op .sym{ color: rgba(238, 241, 245, .36); }
.home .dial .lens.is-on .lens-disc{ fill: #2F4C64; }
.home .dial .lens.is-on .lens-half{ fill: rgba(255, 255, 255, .13); }
.home .dial .lens.is-on .lens-ring{ stroke: #fff; stroke-width: 1.8; }
.home .dial .lens.is-on .lens-ring2{ stroke: rgba(255, 255, 255, .5); }
.home .dial .lens.is-on .lens-ticks{ stroke: rgba(238, 241, 245, .7); }
.home .dial .lens.is-on .sym{ color: #fff; stroke-width: 1.6; }
/* relations: own quadra clear, neighbours quiet, opposite barely there */
.home .dial .rels{ pointer-events: none; }
.home .dial .rel{ display: none; }
.home .dial .rel.is-on{ display: inline; }
.home .dial .rl-line{ fill: none; stroke-linecap: round; }
.home .dial .rl--own .rl-line{ stroke: #fff; stroke-width: calc(2.6px * var(--sw)); }
.home .dial .rl--own .rl-head{ fill: #fff; }
.home .dial .rl--nb .rl-line{ stroke: var(--lit-line); stroke-width: calc(1.6px * var(--sw)); opacity: .62; }
.home .dial .rl--nb .rl-head{ fill: var(--lit-line); opacity: .62; }
.home .dial .rl--op .rl-line{ stroke: var(--paper); stroke-width: calc(1.4px * var(--sw)); opacity: .2; }
.home .dial .rl--op .rl-head{ fill: var(--paper); opacity: .24; }
@media (max-width: 899px) { .home .dial{ --sw: 1.7; } .home .dial .lens .sym{ stroke-width: 1.9; } .home .dial .core-sym{ stroke-width: .9; } }
/* selection: the sign draws itself, the relations draw out of it, a glint runs once round the rim */
.home .dial.is-drawing .lens.is-on .sym > *,.home .dial.is-drawing .core-sym > *{ stroke-dasharray: 1; animation: dial-draw 1.05s var(--ease) both; }
.home .dial.is-drawing .core-sym > *{ animation-duration: 1.3s; }
.home .dial.is-drawing .lens.is-on .lens-ring{ stroke-dasharray: 1; animation: dial-draw .7s var(--ease) both; }
.home .dial.is-drawing .rel.is-on .rl-line{ stroke-dasharray: 1; animation: dial-draw .95s var(--ease) .25s both; }
.home .dial.is-drawing .rel.is-on .rl--nb .rl-line{ animation-delay: .4s; }
.home .dial.is-drawing .rel.is-on .rl--op .rl-line{ animation-delay: .55s; }
.home .dial.is-drawing .rel.is-on .rl-head{ animation: dial-fade-in .4s var(--ease) 1s both; }
.home .dial.is-drawing .glint{ animation: dial-glint 1.5s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes dial-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dial-fade-in { from { opacity: 0; } }
@keyframes dial-glint { 0% { opacity: 0; stroke-dashoffset: .25; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -.35; } }

/* one button per lens, named by its type */
.home .lkeys{ position: absolute; inset: 0; }
.home .lkey{
  position: absolute; padding: 0; margin: 0; border: 0; background: transparent; border-radius: 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.home .lkey:focus-visible{ outline: 2px solid var(--lit-line); outline-offset: 2px; border-radius: 50%; }
/* the designed tooltip (aria-hidden: the name is already the accessible name) */
.home .tip{
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 4;
  padding: 6px 11px 7px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  font: 500 .8125rem/1 var(--sans); letter-spacing: .01em;
  background: var(--paper); color: var(--dial-ink); box-shadow: 0 8px 18px -10px rgba(10, 18, 26, .7);
  opacity: 0; transform: translate(-50%, 4px); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.home .tip-below .tip{ bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
.home .tip-l .tip{ left: 0; transform: translate(0, 4px); }
.home .tip-r .tip{ left: auto; right: 0; transform: translate(0, 4px); }
.home .tip-l.tip-below .tip,.home .tip-r.tip-below .tip{ transform: translate(0, -4px); }
.home .lkey:hover .tip,.home .lkey:focus-visible .tip,.home .lkey[aria-pressed="true"] .tip,.home .hot:hover .tip{ opacity: 1; transform: translate(-50%, 0); }
.home .tip-l:hover .tip,.home .tip-l:focus-visible .tip,.home .tip-l[aria-pressed="true"] .tip,.home .tip-r:hover .tip,.home .tip-r:focus-visible .tip,.home .tip-r[aria-pressed="true"] .tip{ transform: translate(0, 0); }
/* hotspots on the method sheet and the team dial */
.home .hot{ position: absolute; border-radius: 50%; }
.home .dial-wrap{ position: relative; }
/* the motto under the dial: two lines of small text that change with the type (Lex); the height of two
   lines is kept so nothing below moves */
.home .motto{margin:0 0 16px;min-height:calc(2 * 1.45 * 15px);font:400 clamp(14px,3.95vw,15px)/1.45 var(--sans);letter-spacing:-.005em;color:rgba(255,255,255,.82);text-align:center}
.home .motto .mt{display:inline-block;transition:opacity .35s}
.home .motto.swap .mt{opacity:0}
/* the tooltip names the type and its MBTI code (Lex) */
.home .dial-wrap .tip .tcode{margin-left:7px;font-weight:400;letter-spacing:.06em;opacity:.62}
/* the dial on the home's first screen (round 5): edge to edge on the phone, as on lextarrel p2 */
.home .hero-fig{position:relative;margin:8px calc(-1 * var(--px)) 4px}
.home .hcta{margin-top:0}
.home .hq{text-align:center}

/* ---------- screen 2: try it here (Lex, round 8) — the test's real first question, answered on the home ----------
   A tap marks the answer and opens the test from question 2 with this answer kept (the Developer makes the
   test accept it). Strings marked «рыба» in the report are drafts for Lex. */
.home .sec2{padding:40px 0 44px;background:#fff}
.home .h2{margin:0 0 18px;font:400 30px/1.15 var(--serif);color:var(--navy);text-wrap:balance}
.home .qcard{position:relative;padding:20px 18px 18px;border:1px solid var(--navy);border-radius:var(--rc);background:#fff}
.home .qcard::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule);border-radius:13px;pointer-events:none}
.home .qn{position:relative;display:block;font:500 13px/1.3 var(--sans);color:var(--muted)}
.home .qbar{position:relative;height:3px;margin:8px 0 14px;border-radius:2px;background:#EDEDED}
.home .qbar i{position:absolute;left:0;top:0;bottom:0;width:calc(100% / 36);border-radius:2px;background:var(--navy);transition:width .5s}
.home .qcard.done .qbar i{width:calc(200% / 36)}
.home .qq{position:relative;margin:0 0 16px;font:400 22px/1.25 var(--serif);color:var(--navy)}
.home .qa{position:relative;display:grid;gap:8px}
.home .ans{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--rb);background:#fff;color:var(--text);font:400 16px/1.35 var(--sans);text-align:left;transition:background .2s,border-color .2s,color .2s,opacity .3s}
.home .ans::before{content:"";flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1px solid #9AA4AE;transition:border-color .2s,box-shadow .2s}
.home .ans:hover{border-color:var(--navy)}
.home .ans[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.home .ans[aria-pressed="true"]::before{border-color:#fff;box-shadow:inset 0 0 0 4px var(--navy),inset 0 0 0 9px #fff}
.home .qcard.done .ans:not([aria-pressed="true"]){opacity:.45}
.home .qgo{position:relative;display:none;margin-top:14px;font:400 14px/1.4 var(--sans);color:var(--ink)}
.home .qcard.done .qgo{display:block}
.home .qfacts{margin:14px 0 0;font:400 14px/1.45 var(--sans);color:var(--muted)}

/* ---------- screen 3: what you get — the real result page, then four lines ---------- */
.home .sec3{padding:40px 0 44px;background:var(--grey)}
.home .pv{position:relative;overflow:hidden;height:440px;margin:0 0 22px;border-radius:var(--rc);box-shadow:0 18px 36px -24px rgba(40,66,87,.6)}
.home .pv img{display:block;width:100%;height:auto}
.home .pv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(rgba(40,66,87,0),rgba(40,66,87,.95))}
.home .pv span{position:absolute;left:0;right:0;bottom:16px;z-index:1;text-align:center;font:500 13px/1.3 var(--sans);color:#fff}
.home .gets{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.home .gets li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font:400 16px/1.5 var(--sans);color:var(--text)}
.home .gets svg{width:28px;height:28px;color:var(--navy)}
.home .ex{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;font:500 16px/1.2 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.home .ex svg{width:18px;height:18px}

/* ---------- the four steps (a real sequence, so numbered) ---------- */
.home .steps{padding:40px 0 44px;background:#fff}
.home .st-list{list-style:none;margin:0;padding:0}
.home .st a{display:block;color:inherit;text-decoration:none}
.home .st b{display:block;font:400 21px/1.2 var(--serif);color:var(--navy)}
.home .st p{margin:6px 0 0;font:400 15px/1.55 var(--sans);color:var(--text)}
.home .badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:8px;font:500 12.5px/1 var(--sans);color:var(--navy);background:var(--grey)}
.home .badge.paid{background:none;border:1px solid rgba(25,76,142,.45);color:var(--ink)}
.home .node{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--navy);background:#fff;font:400 19px/1 var(--serif);color:var(--navy)}
.home .st.free .node{background:var(--navy);color:#fff}
.home .st-cta{margin-top:26px}

/* A: a route — a line through the stations, title and badge on one line */
.home .sA .st-list{position:relative}
.home .sA .st-list::before{content:"";position:absolute;left:17.5px;top:18px;bottom:30px;width:1px;background:var(--rule)}
.home .sA .st a{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:0 0 22px}
.home .sA .head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-top:5px}
.home .sA .head b{flex:1 1 auto}

/* ---------- the theory (live block, redrawn): Jung in an eyepiece, his line, then the block's own text ---------- */
.home .sec4{padding:44px 0 46px;background:var(--grey)}
.home .eye4{position:relative;width:180px;height:180px;margin:0 auto}
.home .eye4 img{position:absolute;inset:12%;width:76%;height:76%;object-fit:cover;border-radius:50%;filter:grayscale(1) contrast(1.05)}
.home .eye4 svg{position:absolute;inset:0;width:100%;height:100%;color:var(--navy)}
.home .jq{margin:18px auto 0;max-width:30em;text-align:center}
.home .jq p{margin:0;font:400 21px/1.3 var(--serif);color:var(--navy);text-wrap:balance}
.home .jq cite{display:block;margin-top:8px;font:400 13px/1.4 var(--sans);font-style:normal;color:var(--muted)}
.home .rulenode{position:relative;height:1px;margin:28px 0 26px 14px;background:linear-gradient(90deg,rgba(40,66,87,.35),rgba(40,66,87,0))}
.home .rulenode::before{content:"";position:absolute;left:-14px;top:-4px;width:9px;height:9px;border-radius:50%;border:1px solid var(--navy)}
.home .sub{margin:-8px 0 14px;font:400 21px/1.3 var(--serif);color:#4A6378;text-wrap:balance}
.home .txt{margin:0;font:400 16px/1.6 var(--sans);color:var(--text)}
.home .blk-cta{margin-top:24px}

/* ---------- the 16 types (live block, redrawn): the live picture of 16 tiles becomes the 16 types as
   links, by quadra — sign, name, MBTI code ---------- */
.home .sec5{padding:44px 0 46px;background:#fff}
.home .qd5{margin-top:24px}
.home .qd5+.qd5{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.home .qd5 h3{margin:0 0 4px;font:400 19px/1.2 var(--serif);color:var(--navy)}
.home .tg5{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.home .t5{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:10px;min-height:52px;color:var(--navy)}
.home .t5 svg{width:32px;height:32px}
.home .t5 b{display:block;font:400 18px/1.15 var(--serif)}
.home .t5 small{display:block;margin-top:2px;font:500 11px/1 var(--sans);letter-spacing:.08em;color:var(--muted)}

/* ---------- FAQ (Lex picked, round 11): accordion on the phone, one open at a time; questions are drafts, the
   answers come from the content chat with the rest of the page (and give the home an FAQPage schema) ---------- */
.home .sec6{padding:44px 0 40px;background:var(--grey)}
.home .faq{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--rule)}
.home .faq li{border-bottom:1px solid var(--rule)}
.home .faq h3{margin:0}
.home .faq button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:60px;padding:12px 0;background:none;border:0;text-align:left;font:400 20px/1.25 var(--serif);color:var(--navy);cursor:pointer}
.home .faq button svg{flex:0 0 18px;width:18px;height:18px;transition:transform .25s}
.home .faq button[aria-expanded="true"] svg{transform:rotate(180deg)}
.home .faq .fa{padding:0 0 18px;font:400 16px/1.6 var(--sans);color:var(--text)}
.home .faq .fa p{margin:0}
.home .faq .fa[hidden]{display:none}

/* ---------- the blog: the three latest articles as a strip to swipe (moved above the final) ---------- */
.home .sec7{padding:44px 0 40px;background:#fff}
.home .strip{display:flex;gap:12px;margin:0 calc(-1 * var(--px));padding:4px var(--px) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--px);scrollbar-width:none}
.home .strip::-webkit-scrollbar{display:none}
.home .art{flex:0 0 84%;scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--rc);background:#fff;color:inherit}
.home .art .im{aspect-ratio:2/1;background:#EDEDED center/cover no-repeat}
.home .art .ab{display:flex;flex-direction:column;gap:8px;flex:1;padding:16px 16px 18px}
.home .art b{font:400 19px/1.25 var(--serif);color:var(--navy)}
.home .art .mt7{font:500 12px/1.3 var(--sans);color:var(--muted)}
.home .art .ds{font:400 14.5px/1.5 var(--sans);color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.home .art .dt{margin-top:auto;font:400 13px/1.3 var(--sans);color:var(--muted)}

/* ---------- the final (variant A): the live question and button on a navy field with a quiet lens ---------- */
.home .fin{position:relative;overflow:hidden;padding:56px 0 60px;background:var(--navy);color:#fff;text-align:center}
.home .fin .deco{position:absolute;left:50%;top:50%;width:560px;height:560px;translate:-50% -50%;color:#fff;opacity:.07;pointer-events:none}
.home .fin h2{position:relative;margin:0 auto 26px;max-width:16em;font:400 30px/1.18 var(--serif);text-wrap:balance}
.home .fin .btn{background:linear-gradient(#fff,#EEF0F3);color:var(--navy);border-color:#fff;box-shadow:inset 0 -2px 0 rgba(40,66,87,.12),0 8px 18px -10px rgba(0,0,0,.6)}
.home .fin .btn::after{background:linear-gradient(90deg,rgba(25,76,142,0),#194C8E);box-shadow:0 0 6px 1px rgba(25,76,142,.55)}

/* the page's button: as the type page — ink, volume, the running spark */
.home .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:0 24px;border:1px solid #173f73;border-radius:var(--rb);
  background:linear-gradient(#2D5A9E,#194C8E 62%);color:#fff;font:500 16px/1.2 var(--sans);text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(0,0,0,.45)}
.home .btn svg{width:18px;height:18px}
.home .btn::after{content:"";position:absolute;left:0;top:0;width:22px;height:2px;pointer-events:none;border-radius:2px;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:homeRun 4.5s linear infinite}
.home .btn:active{transform:translateY(1px)}
.home .hcta .btn{background:linear-gradient(#fff,#EEF0F3);color:var(--navy);border-color:#fff;box-shadow:inset 0 -2px 0 rgba(40,66,87,.12),0 8px 18px -10px rgba(0,0,0,.6)}
.home .hcta .btn::after{background:linear-gradient(90deg,rgba(25,76,142,0),#194C8E);box-shadow:0 0 6px 1px rgba(25,76,142,.55)}
/* one spark on screen: the steps' button rests while the first screen's is visible */
.home .btn.rest::after{animation-play-state:paused;opacity:0}

/* ================= DESKTOP (≥ 900), designed after Lex accepted the phone (2026-10-20) =================
   Same grid as the header: container 1264 (1200 content + 32 gutters). Nothing hidden behind a tap. */
@media (min-width:900px){
  .home{--px:32px}
  .home .h2{font-size:42px;margin-bottom:22px}
  .home .sub{font-size:24px}
  .home .txt{font-size:17px;max-width:38em}
  .home .btn{width:auto;min-width:300px;min-height:54px;padding:0 30px;font-size:17px}

  /* first screen (Lex picked A): the offer, the motto and the button on the left, the dial on the right */
  .home .hero .wrap{max-width:var(--cw);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);grid-template-areas:". fig" "head fig" "motto fig" "cta fig" ". fig";grid-template-rows:1fr auto auto auto 1fr;
    column-gap:64px;min-height:min(calc(100svh - 76px),780px);padding-top:40px;padding-bottom:48px}
  .home .hq{grid-area:head;align-self:end;text-align:left;font-size:clamp(40px,3.9vw,54px);line-height:1.1;max-width:13em}
  .home .hero-fig{grid-area:fig;align-self:center;margin:0}
  .home .motto{grid-area:motto;text-align:left;margin:26px 0 0;max-width:30em;min-height:calc(2 * 1.5 * 18px);font-size:18px;line-height:1.5}
  .home .hcta{grid-area:cta;align-self:start;margin-top:30px}
  .home .hcta .btn{min-height:54px}
  /* (variant B, the centred stage, was declined by Lex 2026-10-20) */

  /* screen 2: the heading and the facts on the left, the question card on the right, answers 2 × 2 */
  .home .sec2{padding:104px 0}
  /* (revised: a centred stack — the left column stood empty) */
  .home .sec2 .wrap{max-width:900px;text-align:center}
  .home .sec2 .qfacts{margin:18px 0 0;font-size:16px}
  .home .qcard{padding:30px 30px 28px;text-align:left}
  .home .qq{font-size:28px;margin-bottom:22px}
  .home .qa{grid-template-columns:1fr 1fr;gap:10px}
  .home .ans{min-height:64px;font-size:17px}

  /* screen 3: the result as a phone-sized page on the left, what you get on the right */
  .home .sec3{padding:104px 0}
  .home .sec3 .wrap{display:grid;grid-template-columns:400px minmax(0,1fr);grid-template-areas:"pv h" "pv gets" "pv ex";grid-template-rows:auto auto 1fr;column-gap:80px;align-items:start}
  .home .sec3 .h2{grid-area:h;margin-top:40px}
  .home .pv{grid-area:pv;height:640px;margin:0}
  .home .gets{grid-area:gets;gap:20px;max-width:32em}
  .home .gets li{font-size:18px;grid-template-columns:34px 1fr;gap:16px}
  .home .gets svg{width:32px;height:32px}
  .home .ex{grid-area:ex;align-self:start;margin-top:26px;font-size:17px}

  /* the steps: one horizontal route */
  .home .steps{padding:96px 0}
  .home .sA .st-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
  .home .sA .st-list::before{left:22px;right:22px;top:22px;bottom:auto;width:auto;height:1px}
  .home .sA .st a{grid-template-columns:1fr;gap:18px;padding:0}
  .home .node{width:44px;height:44px;font-size:22px}
  .home .sA .head{flex-direction:column;align-items:flex-start;gap:8px;padding-top:0}
  .home .st b{font-size:24px}
  .home .st p{font-size:16px;margin-top:10px}
  .home .st-cta{margin-top:56px;text-align:center}

  /* the theory: Jung and his line on the left, the text on the right */
  .home .sec4{padding:110px 0}
  .home .sec4 .wrap{display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:88px;align-items:center}
  .home .eye4{width:300px;height:300px}
  .home .jq p{font-size:26px}
  .home .jq cite{font-size:14px}
  .home .rulenode{margin-top:0}

  /* the 16 types: the text on the left, the types by quadra in four columns on the right */
  .home .sec5{padding:110px 0}
  .home .sec5 .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"c1 c2" "cta c2";grid-template-rows:auto 1fr;column-gap:72px}
  .home .sec5 .c1{grid-area:c1}
  .home .sec5 .c2{grid-area:c2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  .home .sec5 .blk-cta{grid-area:cta;align-self:start}
  .home .qd5,.home .qd5+.qd5{margin:0;padding:0;border:0}
  .home .qd5 h3{padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--rule)}
  .home .tg5{grid-template-columns:1fr}
  .home .t5{min-height:58px;padding:4px 8px;margin:0 -8px;border-radius:var(--rm);transition:background .15s}
  .home .t5:hover{background:var(--grey)}
  .home .t5 svg{width:36px;height:36px}
  .home .t5 b{font-size:20px}

  /* FAQ: every answer open, two columns; the question is a heading, not a button */
  .home .sec6{padding:104px 0}
  .home .sec6 .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:72px;align-items:start}
  .home .faq{display:grid;grid-template-columns:1fr 1fr;gap:36px 48px;margin:0;border:0}
  .home .faq li{border:0;padding-top:16px;border-top:1px solid var(--rule)}
  .home .faq button{min-height:0;padding:0 0 10px;font-size:23px;cursor:default;pointer-events:none}
  .home .faq button svg{display:none}
  .home .faq .fa[hidden]{display:block}
  .home .faq .fa{font-size:16px;padding:0}

  /* the blog: three articles side by side */
  .home .sec7{padding:96px 0}
  .home .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding:0;overflow:visible}
  .home .art{transition:box-shadow .2s,translate .2s}
  .home .art:hover{translate:0 -3px;box-shadow:0 18px 30px -22px rgba(40,66,87,.5)}
  .home .art b{font-size:21px}

  /* the final */
  .home .fin{padding:120px 0 128px}
  .home .fin .deco{width:900px;height:900px}
  .home .fin h2{font-size:48px;margin-bottom:36px}
}
@media (min-width:900px) and (max-width:1099px){
  .home .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:40px}
  .home .sec3 .wrap,.home .sec4 .wrap{grid-template-columns:340px minmax(0,1fr);column-gap:48px}
  .home .pv{height:560px}
  .home .sec5 .wrap{grid-template-columns:1fr;grid-template-areas:"c1" "c2" "cta";row-gap:32px}
  .home .sec6 .wrap{grid-template-columns:1fr}
  .home .faq{gap:28px 32px}
}

@media (prefers-reduced-motion:reduce){
  .home .btn::after{display:none}
}

@keyframes homeRun{from{offset-distance:0%}to{offset-distance:100%}}