/* GeoTerva: sections of the pages that follow the menu (Theory, On mobile) and the cards of the home page. The Theory panel and the phones were moved here from index.html on 2026-10-04. */
/* the theory: the page's one emphasis — a wide panel on the dark ground of the logo */
.theory{background:linear-gradient(160deg,var(--gt-geo-900) 0%,#123058 100%);color:#dbe5f2;border-radius:24px;padding:clamp(26px,4vw,52px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,52px);align-items:center;position:relative;overflow:hidden}
.theory .tag{background:rgba(255,255,255,.1);color:#fff}
.theory h3{color:#fff;font-size:clamp(25px,2.8vw,36px);line-height:1.12;margin-top:16px}
.theory h3 span{color:var(--gt-terva-300)}
.theory>div>p{font-size:17px;color:#c3d0e1;margin-top:14px;max-width:54ch}
.theory .holds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.theory .holds div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px}
.theory .holds b{display:block;font-family:var(--gt-display);font-weight:600;color:#fff;font-size:15px;line-height:1.3;margin-bottom:3px}
.theory .holds span{font-size:14px;color:#a9bad0;line-height:1.45}
.theory .win{border-color:rgba(255,255,255,.18);box-shadow:0 40px 90px -40px rgba(0,0,0,.6);max-width:560px;justify-self:center;width:100%}
.theory .page{aspect-ratio:780/957;max-width:100%;background:#fff}
.theory .page img{width:100%;height:100%;object-fit:cover;object-position:top}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.three div{border-top:2px solid var(--gt-terva-300);padding-top:10px;font-size:14.5px;color:#c3d0e1;line-height:1.45}
.three b{display:block;font-family:var(--gt-display);color:#fff;font-weight:600;font-size:15px}
/* theory pages (trial 2026-10-04): the way to the free-to-read theory page; remove together with the line marked THEORY-PAGES in the script below */
.read{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.read a{display:inline-flex;align-items:center;gap:10px;background:var(--gt-terva-300);color:var(--gt-geo-900);font:600 15.5px var(--gt-display);padding:12px 20px;border-radius:12px;text-decoration:none}
.read a:hover{filter:brightness(1.07)}
.read span{font-size:14px;color:#a9bad0;line-height:1.4}
@media (max-width:1000px){.theory{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.theory .holds,.three{grid-template-columns:1fr}}

/* ---------- mobile ---------- */
.mob{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
/* three phones side by side, none hiding another, drawn to an iPhone's proportions: a 390 × 851 screen (status bar 54 + page 797) in a thin bezel
   and frame; every size follows the phone's own width --pw, and the stage scales with its column (cqw) */
.devices{container-type:inline-size;position:relative;display:flex;justify-content:center;align-items:flex-start;padding-block:8px 24px}
.devices::before{content:"";position:absolute;left:50%;top:46%;width:90cqw;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(156,192,105,.22),rgba(77,124,31,.08) 55%,transparent);pointer-events:none}
.phone{--pw:min(30cqw,214px);--key:#3a414d;position:relative;flex:none;width:var(--pw);padding:calc(var(--pw)*.012);border-radius:calc(var(--pw)*.175);
  background:linear-gradient(150deg,#69727f 0%,#2c323b 20%,#1b2028 50%,#30363f 80%,#6a7380 100%);
  box-shadow:0 60px 80px -40px rgba(0,0,0,.75),0 24px 34px -22px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14)}
.phone.mid{--pw:min(35cqw,250px);z-index:2}
.phone.side{margin-top:calc(var(--pw)*.2);z-index:1}
.phone.l{margin-right:2cqw}
.phone.r{margin-left:2cqw}
.phone .body{padding:calc(var(--pw)*.036);border-radius:calc(var(--pw)*.163);background:#05070a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.phone .screen{position:relative;overflow:hidden;border-radius:calc(var(--pw)*.127);background:#fff}
.phone .screen video{display:block;width:100%;height:auto;aspect-ratio:390/797;object-fit:cover;background:#fff}
.phone .sb{position:relative;aspect-ratio:390/54;background:#fff;color:#0b0d12}
.phone .sb .t{position:absolute;left:0;width:34%;top:56%;transform:translateY(-50%);text-align:center;font:600 calc(var(--pw)*.04)/1 -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;letter-spacing:.01em}
.phone .sb .si{position:absolute;right:0;width:34%;top:56%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;gap:calc(var(--pw)*.013)}
.phone .sb svg{height:calc(var(--pw)*.03);width:auto;fill:currentColor}
.phone .sb svg.bat{height:calc(var(--pw)*.032)}
.phone .isl{position:absolute;left:50%;top:20.4%;width:32.3%;height:68.5%;transform:translateX(-50%);border-radius:999px;background:#000}
.phone .home{position:absolute;left:50%;bottom:calc(var(--pw)*.018);width:34.4%;height:calc(var(--pw)*.012);transform:translateX(-50%);border-radius:999px;background:rgba(12,14,18,.85)}
.phone .keys::before,.phone .keys::after{content:"";position:absolute;width:calc(var(--pw)*.011);border-radius:2px}
.phone .keys::before{left:calc(var(--pw)*-.008);top:17%;height:25%;background:linear-gradient(var(--key) 0 16%,transparent 16% 32%,var(--key) 32% 62%,transparent 62% 70%,var(--key) 70% 100%)}
.phone .keys::after{right:calc(var(--pw)*-.008);top:27%;height:11%;background:var(--key)}
@media (max-width:900px){.mob{grid-template-columns:minmax(0,1fr)}.devices{max-width:620px;width:100%;margin-inline:auto}}
/* a phone-wide page shows two of the three phones, larger: the sheet pile and the contours */
@media (max-width:560px){.phone.l{display:none}.phone.side{--pw:min(44cqw,226px)}.phone.mid{--pw:min(52cqw,258px)}.phone.r{margin-left:2cqw}}


/* ---------- sections of the pages that follow the menu (2026-10-04): Theory, On mobile, and the cards on the home page ---------- */
section{padding-block:clamp(64px,8vw,104px)}
.sec-head{max-width:none;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:clamp(28px,5vw,80px);align-items:end}
.sec-head .eyebrow{grid-column:1/-1}
.sec-head h2{grid-column:1;font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin-top:12px}
.sec-head p{grid-column:2;font-size:18px;color:var(--gt-ink-2);margin-top:0;max-width:none;padding-bottom:4px}
@media (max-width:900px){.sec-head{display:block}.sec-head p{margin-top:16px;max-width:62ch}}

/* the two teaser cards of the home page */
.teasers{padding-block:clamp(48px,6vw,80px)}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.tcard{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:linear-gradient(160deg,var(--gt-geo-900) 0%,#123058 100%);color:#c3d0e1;border-radius:24px;padding:clamp(24px,3vw,40px)}
.tcard .tag{background:rgba(255,255,255,.1);color:#fff}
.tcard h3{color:#fff;font-size:clamp(23px,2.4vw,32px);line-height:1.14}
.tcard h3 span{color:var(--gt-terva-300)}
.tcard p{font-size:16.5px;max-width:52ch}
.tcard .read{margin-top:auto;width:100%;flex-direction:column;align-items:flex-start}
@media (max-width:900px){.tgrid{grid-template-columns:minmax(0,1fr)}}

/* worked examples */
.exgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:16px;margin-top:clamp(28px,3vw,40px)}
.ex{display:flex;gap:14px;align-items:center;padding:16px 18px;background:#fff;border:1px solid var(--gt-line);border-radius:16px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ex:hover{transform:translateY(-3px);box-shadow:var(--gt-shadow-sm);border-color:var(--gt-terva)}
.ex>span{display:block;min-width:0;font-size:14.5px;line-height:1.4;color:var(--gt-muted)}
.ex b{display:block;font-family:var(--gt-display);font-weight:600;color:var(--gt-geo);font-size:16.5px;line-height:1.25}
.ex em{display:block;font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gt-terva);margin:2px 0 4px}
.ex u{display:block;width:max-content;margin-top:8px;text-decoration:none;font:600 12px var(--gt-display);color:var(--gt-terva);background:var(--gt-terva-50);border:1px solid #cfe0c0;border-radius:999px;padding:2px 10px}
.ex .go{margin-left:auto;flex:none;width:20px;height:20px;color:var(--gt-terva)}
.ex .go svg{width:20px;height:20px}

/* questions */
.faq{background:#fff;border-top:1px solid var(--gt-line-2)}
/* the question on the left, the answers on the right: no empty half */
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(28px,5vw,80px);align-items:start}
.faq .sec-head{display:block}
.faq .sec-head h2{margin-top:12px}
.qs{display:grid;gap:10px;margin-top:0;max-width:none}
@media (max-width:900px){.faq .wrap{display:block}.qs{margin-top:24px}}
.qs details{border:1px solid var(--gt-line);border-radius:14px;background:var(--gt-paper)}
.qs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font-family:var(--gt-display);font-weight:600;color:var(--gt-geo);font-size:17px}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";font-size:24px;line-height:1;color:var(--gt-terva);flex:none}
.qs details[open] summary::after{content:"−"}
.qs details p{padding:0 20px 18px;color:var(--gt-ink-2);font-size:16.5px;max-width:70ch}

/* the Theory page (second design, 2026-10-04): a dark hero that shows a real page of the theory, the page that is open, how a page reads, the library by family */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--gt-muted);margin-bottom:18px}
.crumbs a:hover{color:var(--gt-geo);text-decoration:underline}
.th-hero{position:relative;overflow:hidden;color:#dbe5f2;background:radial-gradient(820px 380px at 82% 25%,rgba(36,86,160,.5),transparent 70%),linear-gradient(160deg,var(--gt-geo-900),#123058);padding-block:clamp(34px,4.6vw,66px) clamp(44px,5.4vw,80px)}
.th-hero::before{content:"";position:absolute;inset:0;opacity:.07;background:repeating-radial-gradient(ellipse 150% 70% at 25% 130%,transparent 0 30px,#fff 30px 31px)}
.th-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(26px,4.4vw,72px);align-items:center}
.th-hero .crumbs{color:#9fb3d1}.th-hero .crumbs a:hover{color:#fff}
.th-hero .eyebrow{color:var(--gt-terva-300)}
.th-hero h1{color:#fff;font-size:clamp(34px,4.1vw,58px);line-height:1.04;margin-top:12px;text-wrap:wrap}
.th-hero h1 span{color:var(--gt-terva-300)}
.th-hero .lead{font-size:clamp(17px,1.5vw,20px);color:#c3d0e1;margin-top:18px;max-width:46ch}
.th-hero .chips{margin-top:22px}
.th-hero .chips li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#e6eefb}
.th-hero .cta{margin-top:28px}
.th-hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.th-hero .btn-ghost:hover{border-color:#fff}
.th-win{box-shadow:0 44px 90px -40px rgba(0,0,0,.75);max-width:640px;justify-self:center;width:100%;transform:rotate(1.2deg)}
.th-win img{display:block;width:100%;height:auto;background:#f5f8fb}
.th-win[hidden],.th-now[hidden]{display:none}
@media (max-width:980px){.th-hero .wrap{grid-template-columns:minmax(0,1fr)}.th-win{transform:none;max-width:560px;justify-self:start}}

.th-now{padding-block:clamp(40px,5vw,72px) 0}
.th-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3.6vw,56px);align-items:center;background:#fff;border:1px solid var(--gt-line);border-radius:24px;padding:clamp(22px,3.2vw,44px);box-shadow:0 22px 50px -34px rgba(12,33,64,.4)}
.th-card h2{font-size:clamp(26px,3.1vw,40px);line-height:1.08;margin-top:10px}
.th-card p{color:var(--gt-ink-2);font-size:17.5px;margin-top:14px;max-width:52ch}
.th-card .chips{margin-top:18px}
.th-card .cta{margin-top:24px}
.th-card .pv{border:1px solid var(--gt-line);border-radius:16px;overflow:hidden;background:#f5f8fb}
.th-card .pv img{display:block;width:100%;height:auto}
.th-cards{display:grid;gap:clamp(18px,2.4vw,28px);margin-top:clamp(22px,3vw,34px)}
.th-card:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.th-card:nth-child(even) .pv{order:-1}
.th-card h3{font-size:clamp(24px,2.6vw,34px);line-height:1.1;margin-top:10px}
/* the pages that show the Results frame of the module's strip: small cards in a grid */
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(18px,2.4vw,28px)}
.th-grid:empty{display:none}
.th-mini{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--gt-line);border-radius:20px;overflow:hidden;box-shadow:0 18px 40px -32px rgba(12,33,64,.4)}
.th-mini .pv{display:block;border-bottom:1px solid var(--gt-line);background:#f5f8fb}
.th-mini .vp{display:block;position:relative;aspect-ratio:1200/750;overflow:hidden}
.th-mini .vp img{display:block;width:100%;height:auto;max-width:none;transform:translateY(-25%)}
.th-mini .tx{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.th-mini h3{font-size:clamp(20px,1.7vw,23px);line-height:1.2;margin-top:8px}
.th-mini p{color:var(--gt-ink-2);font-size:16px;line-height:1.55;margin-top:10px}
.th-mini .chips{margin-top:14px}
.th-mini .cta{margin-top:auto;padding-top:18px}
@media (max-width:900px){.th-card,.th-card:nth-child(even){grid-template-columns:minmax(0,1fr)}.th-card:nth-child(even) .pv{order:0}}

.th-how{padding-block:clamp(48px,6vw,88px) 0}
.th-steps{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.th-steps li{background:#fff;border:1px solid var(--gt-line);border-radius:16px;padding:20px 18px 18px;display:block}
.th-steps .no{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--gt-geo);color:var(--gt-terva-300);font:700 15px var(--gt-mono);margin-bottom:12px}
.th-steps b{display:block;font-family:var(--gt-display);font-weight:600;color:var(--gt-geo);font-size:16.5px;line-height:1.25;margin-bottom:5px}
.th-steps li>span:last-child{display:block;font-size:14.5px;line-height:1.45;color:var(--gt-ink-2)}
@media (max-width:1100px){.th-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.th-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.th-steps{grid-template-columns:minmax(0,1fr)}}

.th-lib{padding-block:clamp(48px,6vw,88px) clamp(40px,5vw,64px)}
.th-idx{margin-top:clamp(26px,3vw,38px);display:grid;gap:32px}
.th-idx h3{font-size:20px;padding-bottom:12px;border-bottom:1px solid var(--gt-line);margin-bottom:14px}
.th-idx h3 span{font-family:var(--gt-body);font-weight:400;font-size:15px;color:var(--gt-muted);margin-left:12px}
.th-idx>div,.th-f>div{min-width:0}
.th-fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
.th-f{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--gt-line);border-radius:14px;padding:14px 16px}
.th-f.on{border-color:var(--gt-terva);box-shadow:inset 0 0 0 1px var(--gt-terva)}
.th-f h4{font-size:16.5px}
.th-f .mm{margin-top:5px;font-size:14.5px;line-height:1.6;color:var(--gt-faint)}
.th-f .mm .sep{font-style:normal;margin:0 5px;color:#c9d1c1}
.th-f .mm a{font-weight:600;color:var(--gt-terva-600);text-decoration:underline;text-underline-offset:3px}
.th-f .mm a:hover{color:var(--gt-terva)}
.th-f em.ok{display:inline-block;margin-top:8px;font-style:normal;font-family:var(--gt-display);font-weight:600;font-size:12.5px;color:var(--gt-terva);background:var(--gt-terva-50);border:1px solid #cfe0c0;border-radius:999px;padding:2px 10px}
@media (max-width:480px){.th-f{padding:14px 12px;gap:12px}.th-f .mm .sep{margin:0 4px}}

/* the On mobile page */
.mob-hero{background:var(--gt-geo-900);color:#dbe5f2;overflow:hidden;padding-block:clamp(44px,6vw,84px)}
.mob-hero .crumbs{color:#9fb3d1}.mob-hero .crumbs a:hover{color:#fff}
.mob-hero h1{color:#fff;font-size:clamp(32px,3.8vw,50px);line-height:1.06;margin-top:12px}
.mob-hero h1 span{color:var(--gt-terva-300)}
.mob-hero p.lead{color:#c3d0e1;font-size:18px;margin-top:18px;max-width:54ch}
.mob-hero .eyebrow{color:var(--gt-terva-300)}
.mob-hero .cta{margin-top:26px}
.mob-hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.mob-hero .btn-ghost:hover{border-color:#fff}
.store{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.store .app{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 14px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.38);background:rgba(255,255,255,.05);color:#dbe5f2;cursor:default}
.store .app svg{width:28px;height:28px;color:var(--gt-terva-300);flex:none}
.store .app small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a9bad0;line-height:1.3}
.store .app b{display:block;font-family:var(--gt-display);font-size:17px;font-weight:600;color:#fff;line-height:1.25}
.store-note{margin-top:14px;font-size:14.5px;color:#a9bad0}
.mfeat-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;margin-top:clamp(28px,3vw,40px);list-style:none;padding:0}
.mfeat-l li{background:#fff;border:1px solid var(--gt-line);border-radius:16px;padding:20px}
.mfeat-l .fi{width:40px;height:40px;border-radius:11px;background:var(--gt-terva-50);display:grid;place-items:center;color:var(--gt-terva);margin-bottom:12px}
.mfeat-l .fi svg{width:21px;height:21px}
.mfeat-l b{display:block;font-family:var(--gt-display);font-weight:600;color:var(--gt-geo);font-size:17px;margin-bottom:4px}
.mfeat-l span{font-size:15.5px;color:var(--gt-ink-2)}
.endband{background:var(--gt-geo-900);border-radius:24px;padding:clamp(28px,5vw,56px);color:#c6d2e3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 32px}
.endband h2{color:#fff;font-size:clamp(26px,3vw,38px)}.endband h2 span{color:var(--gt-terva-300)}
.endband p{margin-top:10px;max-width:50ch}

.cta{display:flex;flex-wrap:wrap;gap:12px}