/* talkinn prototype: shared stylesheet of the subpages (shell/site.css -> site/site.css via build_site.py).
   PART 1 is copied verbatim from the homepage monolith (index.template.html, 2 Oct build) so the subpages look and behave
   identically: tokens, base, buttons, nav + mega + sheet, prototype note, sections, tabs/panels, route, level-test card, quote,
   campus mosaic, the pumpkin start field, footer, sticky mobile CTA, reading-progress hairline, link draw, h2 line masks.
   If the homepage changes one of these rules, change it here too (the homepage does not load this file).
   PART 2 (after the "SUBPAGE SHELL" banner) is new: page hero, layout helpers, frames, screen windows, phone, tiles, ledger, level strip,
   step rail, lists, badges, tabs, accordion, prose, tables, blog cards, contact facts, forms, slim start field, inline prototype note.
   shell/parts/*.css (motion.css, pricing.css) are appended by the builder. API: .impeccable/team2/shell-api.md */

/* --- homepage lines 35-68 --- */
:root{
  --navy:#1B2D56; --navy-2:#152548; --navy-3:#233969; --deep:#0F1931; --screen:#070F20;
  --text:#F2F1EC; --text-2:#DCE1EC; --text-3:#C9D1E1; --light:#F2F1EC;
  --line:rgba(242,241,236,.14); --line-2:rgba(242,241,236,.28);
  --ochre:#FD802E; --ochre-text:#FFA868; --ink-on-ochre:#070F20; --ink2-on-ochre:#070F20;
  --camp:#D3202F; --camp-line:#FF5A64;
  --font:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --out:cubic-bezier(.23,1,.32,1); --io:cubic-bezier(.77,0,.175,1);
  --gut:clamp(20px,4vw,48px); --max:1240px; --r:14px;
  --fs-body:18px; --fs-lede:20px;
}
@media (max-width:760px){:root{--fs-body:17px;--fs-lede:18px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px;background:var(--navy);color-scheme:dark;scrollbar-color:var(--navy-3) var(--deep)}
@media (max-width:760px){html{scroll-padding-bottom:84px}}
body{margin:0;background:var(--navy);color:var(--text);font-family:var(--font);font-size:var(--fs-body);font-weight:420;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--ochre);color:var(--deep)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.start-field :focus-visible{outline-color:var(--deep)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.012em;text-wrap:balance;color:var(--light)}
h1{font-size:clamp(2.5rem,4.8vw,4.25rem);line-height:1;letter-spacing:-.028em;font-stretch:108%;font-weight:720}
h2{font-size:clamp(2rem,3.3vw,3rem);line-height:1.08;letter-spacing:-.022em;font-stretch:110%}
h3{font-size:1.5rem;line-height:1.2;font-stretch:106%;font-weight:650}
p{margin:0;text-wrap:pretty}
.plan li > div,.facts div,.legend div,figcaption,.stop .cefr,.who{text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--text-2);max-width:42ch}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--light);color:var(--navy);padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{left:12px}
.nw{white-space:nowrap}

/* --- homepage lines 70-74 --- */
/* motion tiers: CSS reads html[data-motion] (motion) / html.motion-* (a11y harness); both are set by the head script */
html.motion-none *,html.motion-none *::before,html.motion-none *::after{animation:none!important;transition:none!important}
/* reduced tier: no global transition override (it remaps durations/delays cyclically); every transform transition has an explicit reduced rule below */
@media (prefers-reduced-motion:reduce){html:not([data-motion]) *{animation:none!important}}
@media print{*,*::before,*::after{animation:none!important;transition:none!important}}

/* --- homepage lines 76-89 --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-size:16px;font-weight:600;letter-spacing:.005em;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),scale .16s var(--out)}
.btn:active{scale:.98}
html[data-motion=full] .btn:active{scale:.97}
.btn-light{background:var(--light);color:var(--navy)}
.btn-light:hover{background:#FFFFFF}
.btn-navy{background:var(--deep);color:var(--light)}
.btn-navy:hover{background:var(--navy)}
.btn-lg{min-height:58px;padding:0 30px;font-size:17px}
.btn .ar{width:18px;height:18px;transition:translate .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.btn:hover .ar{translate:3px 0}}
.btn-ghost{background:transparent;color:var(--light);border-color:rgba(242,241,236,.45)}
.btn-ghost:hover{border-color:var(--light)}
/* owner 10 Oct: the jump to a service page's prices sits in a pumpkin ring so it is seen at once (a ring, never a filled orange button) */
.btn-ring{background:transparent;color:var(--light);border:2px solid var(--ochre);padding:0 24px}
.btn-ring:hover{background:rgba(253,128,46,.14)}
.btn-ring svg{width:16px;height:16px;flex:none}
.link{font-weight:600;color:var(--light);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:rgba(242,241,236,.4);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--ochre)}

/* --- homepage lines 91-139 --- */
/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.nav.scrolled{background:rgba(27,45,86,.92);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
@media (max-width:760px){.nav.scrolled{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (max-height:480px){.nav{position:absolute}}
.nav .in{display:flex;align-items:center;gap:28px;height:76px}
.nav .logo{display:flex;align-items:center;min-height:44px;width:128px;flex:none}
.nav .logo svg{width:100%;height:auto;display:block}
.menu{display:flex;align-items:center;gap:4px;margin-left:8px}
.menu > a,.menu > .dd > button{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:999px;font-size:16px;font-weight:500;color:var(--text);background:none;border:0;cursor:pointer;transition:background-color .2s}
.menu > a:hover,.menu > .dd > button:hover,.menu > .dd.open > button{background:rgba(242,241,236,.1)}
.dd{position:relative}
.dd button .chev{width:14px;height:14px;transition:rotate .2s var(--ease)}
.dd.open button .chev{rotate:180deg}
.mega{position:absolute;top:calc(100% + 10px);left:-12px;width:min(460px,86vw);background:var(--navy-2);border-radius:24px;box-shadow:0 0 0 1px var(--line),0 40px 70px -30px rgba(3,6,19,.8);padding:12px;display:grid;grid-template-columns:1fr;gap:4px;opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .18s var(--ease),translate .18s var(--ease),visibility .18s}
.dd.open .mega{opacity:1;visibility:visible;translate:0 0}
.mega.kb{transition:none}
.mega a{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:10px;border-radius:14px;transition:background-color .15s}
.mega a:hover{background:var(--navy-3)}
.mega img{width:96px;height:72px;object-fit:cover;border-radius:10px}
.mega .t{font-weight:650;font-size:17px;font-stretch:106%;display:block;color:var(--light)}
.mega .s{font-size:16px;line-height:1.45;color:var(--text-2);display:block;margin-top:2px}
.nav .acts{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav .login{font-size:16px;font-weight:500;padding:0 18px;height:44px;display:inline-flex;align-items:center;border-radius:999px;border:1.5px solid var(--line-2);transition:border-color .2s var(--ease)}
.nav .login:hover{border-color:var(--light)}
.menu > a,.menu > .dd > button,.nav .login,.btn{word-spacing:.06em}
.nav .btn{min-height:44px;padding:0 20px;font-size:15px}
.nav .acts .btn-light{opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .3s var(--ease),translate .3s var(--ease),visibility 0s linear .3s,background-color .25s var(--ease)}
.nav.cta-on .acts .btn-light{opacity:1;visibility:visible;translate:0 0;transition:opacity .3s var(--ease),translate .3s var(--ease),visibility 0s,background-color .25s var(--ease)}
html[data-motion=reduced] .nav .acts .btn-light{translate:0 0}
html[data-motion=reduced] .dd button .chev,html[data-motion=reduced] .motion-toggle i::after{transition:none}
.burger{display:none;width:48px;height:48px;border-radius:999px;border:1.5px solid var(--line-2);background:transparent;align-items:center;justify-content:center;cursor:pointer;color:var(--light)}
.burger svg{width:22px;height:22px}
@media (max-width:1060px){.menu,.nav .login{display:none}.burger{display:inline-flex}}
@media (max-width:480px){.nav .acts .btn-light{display:none}.nav .logo{width:112px}}
.sheet{position:fixed;inset:0;z-index:80;background:var(--navy);display:flex;flex-direction:column;padding:16px var(--gut) 24px;transform:translateY(-100%);visibility:hidden;transition:transform .45s var(--ease),visibility .45s}
.sheet.open{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
.sheet:not(.open){transition:transform .28s var(--out),visibility 0s linear .28s}
html[data-motion=reduced] .sheet{transform:none;opacity:0;transition:opacity .2s var(--out),visibility 0s linear .2s}
html[data-motion=reduced] .sheet.open{opacity:1;transition:opacity .2s var(--out),visibility 0s}
.sheet .top{display:flex;align-items:center;justify-content:space-between;height:60px}
.sheet nav{display:grid;margin-top:18px}
.sheet nav a{font-size:26px;font-weight:650;font-stretch:108%;padding:12px 0;border-bottom:1px solid var(--line);color:var(--light)}
.sheet nav a small{display:block;font-size:16px;font-weight:420;font-stretch:100%;color:var(--text-2);margin-top:2px}
/* compact row under the six big links: Blog · İletişim · Giriş Yap (same markup on every page) */
.sheet .sub{display:flex;flex-wrap:wrap;gap:0 28px;padding:6px 0;border-bottom:1px solid var(--line)}
.sheet .sub a{display:inline-flex;align-items:center;min-height:48px;padding:0;border:0;font-size:18px;font-weight:500;font-stretch:100%;color:var(--text-2)}
.sheet .btns{display:grid;gap:10px;margin-top:auto;padding-top:24px}
.sheet .btn{width:100%}
/* short phones / laptop windows: the sheet scrolls on its own (the page behind is locked) and tightens, so the CTA is in view */
.sheet{overflow-y:auto;overscroll-behavior:contain}
@media (max-height:740px){.sheet .top{height:52px}.sheet nav{margin-top:6px}.sheet nav a{line-height:1.25;padding:9px 0}.sheet .btns{padding-top:16px}}

/* --- homepage lines 212-223 --- */

/* --- homepage lines 285-290 --- */
/* sections */
.sec{padding:clamp(64px,min(9vw,15vh),128px) 0;position:relative}
.sec-raised{background:var(--navy-2)}
.sec-quote{padding-block:clamp(56px,min(7vw,12vh),104px)}
.head{display:grid;gap:16px;max-width:780px;margin-bottom:clamp(32px,4vw,52px)}
.head p{color:var(--text-2);font-size:var(--fs-lede);line-height:1.65;max-width:56ch}

/* --- homepage lines 292-326 --- */
/* programs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tab{min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(242,241,236,.45);background:transparent;font-size:16px;font-weight:600;cursor:pointer;color:var(--light);transition:background-color .25s var(--ease),border-color .25s,color .25s}
.tab:hover{border-color:var(--light)}
.tab[aria-selected="true"]{background:var(--light);border-color:var(--light);color:var(--navy)}
.tab .for{font-weight:420;color:var(--text-2);margin-left:6px}
.tab[aria-selected="true"] .for{color:#2F4065}
@media (max-width:640px){.tabs{display:grid;grid-template-columns:1fr 1fr}.tab{padding:10px 12px;line-height:1.3;text-align:left}.tab .for{display:block;margin:0;font-size:16px}}
.panels{display:grid}
.panel{grid-area:1/1;display:grid;grid-template-columns:1fr;background:var(--navy-3);border-radius:24px;overflow:hidden;visibility:hidden;opacity:0;transition:opacity .2s var(--ease),visibility 0s linear .2s}
.panel.on{visibility:visible;opacity:1;z-index:1;transition:opacity .2s var(--ease)}
.panels.kb .panel{transition:none}
/* FULL tab switch: the outgoing panel stays painted underneath until the incoming photo's wipe has finished (no empty frame);
   the incoming text column carries its own ground so the old copy never shows through the new one */
html[data-motion=full] .panel .tx{background:var(--navy-3)}
.panels.wiping .panel.on{background:transparent;transition:none}
.panels.wiping .panel.was{visibility:visible;opacity:1;transition:none}
/* REDUCED tab switch: a true crossfade, the outgoing panel stays fully painted underneath while the incoming one fades in on top */
html[data-motion=reduced] .panel{transition:opacity 0s linear .22s,visibility 0s linear .22s}
html[data-motion=reduced] .panel.on{transition:opacity .22s var(--out)}
html[data-motion=reduced] .panels.kb .panel{transition:none}
@media (min-width:900px){.panel{grid-template-columns:1.05fr 1fr}}
.panel .ph{position:relative;min-height:300px;overflow:hidden;background:var(--navy)}
.panel .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel .tx{padding:clamp(26px,3.4vw,48px);display:grid;gap:18px;align-content:center}
.panel h3{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.12;font-stretch:108%;font-weight:700}
.panel p{color:var(--text-2)}
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.facts div{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.4}
.facts div:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
.facts b{display:block;font-size:19px;font-weight:700;font-stretch:108%;color:var(--light);text-wrap:balance;font-variant-numeric:tabular-nums}
.facts span{color:var(--text-2)}
.panel .acts{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:4px}
html[data-motion=reduced] .panel.anim .tx > *{animation:fade .22s var(--out) both}
.panel.anim .tx > *:nth-child(2){animation-delay:.03s}.panel.anim .tx > *:nth-child(3){animation-delay:.06s}.panel.anim .tx > *:nth-child(4){animation-delay:.09s}

/* --- homepage lines 480-497 --- */
/* route */
.route-head{display:grid;gap:14px;max-width:780px;margin-bottom:40px}
.route-head p{color:var(--text-2);font-size:var(--fs-lede);max-width:56ch}
.rail{position:relative}
.stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr}
@media (min-width:900px){.stops{grid-template-columns:repeat(5,1fr)}}
.rail .track{position:absolute;background:rgba(242,241,236,.16);border-radius:999px}
.rail .fill{position:absolute;background:var(--ochre);border-radius:999px;transform-origin:left}
@media (min-width:900px){.rail .track,.rail .fill{left:13px;top:11px;height:4px;width:80%}}
@media (max-width:899px){.rail .track,.rail .fill{left:11px;top:13px;width:4px;height:calc(100% - 60px)}.rail .fill{transform-origin:top}}
.stop{position:relative;display:grid;gap:4px;padding:0 16px 28px 44px}
@media (min-width:900px){.stop{padding:46px 16px 0 0}}
.stop .dot{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:999px;background:var(--navy);border:3px solid rgba(242,241,236,.5);transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.stop.lit .dot{background:var(--ochre);border-color:var(--ochre)}
.stop .name{font-size:1.45rem;font-weight:700;font-stretch:110%;color:var(--light);line-height:1.2}
.stop .cefr b{display:block;color:var(--light);font-weight:650;font-size:16px}
.stop .cefr span{color:var(--text-2);font-size:16px}
.route-note{margin-top:36px;color:var(--text-2);font-size:18px;max-width:60ch}

/* --- homepage lines 499-519 --- */
/* level test: the one place with a test button */
.test{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);background:var(--navy-3);border-radius:24px;padding:clamp(26px,4vw,56px)}
@media (min-width:960px){.test{grid-template-columns:1fr 1.1fr;align-items:center}}
.test .copy{display:grid;gap:20px}
.test .copy p{color:var(--text-2);font-size:var(--fs-lede)}
.test .note{font-size:16px!important;color:var(--text-2)!important}
.row4{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);padding-bottom:18px}
.row4 div{display:grid;gap:2px;padding-right:10px;min-width:0}
.row4 div + div{padding-left:14px;border-left:1px solid var(--line)}
.row4 b{font-size:clamp(20px,1.9vw,24px);font-weight:700;font-stretch:108%;line-height:1.15;color:var(--light);white-space:nowrap;font-variant-numeric:tabular-nums}
.row4 span{font-size:16px;color:var(--text-2)}
b[data-count] > [aria-hidden]{font:inherit;color:inherit}   /* the counting copy keeps the number's type (not the .row4 label size) */
@media (max-width:520px){.row4{grid-template-columns:1fr 1fr;row-gap:14px}.row4 div:nth-child(3){padding-left:0;border-left:0}}
.weights{margin-top:24px}
.bar{display:flex;height:18px;gap:6px}
.bar i{display:block;height:100%;border-radius:6px;background:rgba(242,241,236,.7);transform-origin:0 50%}
.bar i:first-child{background:var(--ochre)}
.legend{display:flex;gap:6px;margin-top:12px}
.legend div{min-width:0;font-size:16px;line-height:1.35;color:var(--text-2)}
.legend b{display:block;font-size:17px;color:var(--light);font-weight:650;font-variant-numeric:tabular-nums}
@media (max-width:520px){.legend{display:grid;grid-template-columns:1fr;gap:8px}.legend div{display:flex;align-items:center;gap:10px}.legend div::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:rgba(242,241,236,.7)}.legend div:first-child::before{background:var(--ochre)}.legend b{display:inline;margin-right:4px}}

/* --- homepage lines 521-533 --- */
/* quote */
.quote{display:grid;gap:26px;max-width:1000px}
.quote blockquote{margin:0;text-indent:-.42em;font-size:clamp(2.25rem,4.4vw,3.75rem);line-height:1.08;font-weight:650;font-stretch:106%;letter-spacing:-.022em;max-width:28ch;text-wrap:balance;color:var(--light)}
.quote .l + .l{text-indent:0}
@media (min-width:1100px){.quote{max-width:none}.quote blockquote{max-width:38ch}}
@media (max-width:759px){.quote blockquote{text-indent:-.28em}}
@media (min-width:760px){.quote .l{display:block}}
.who{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 56px}
.who b{display:block;font-size:18px;color:var(--light)}
.who span{color:var(--text-2);font-size:16px}
.gain{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px}
.gain b{font-size:28px;font-weight:750;font-stretch:108%;line-height:1;color:var(--ochre-text)}
.gain .meta{display:flex;gap:18px}

/* --- homepage lines 535-560 --- */
/* campus */
.campus-head{display:grid;gap:18px;max-width:1000px;margin-bottom:clamp(32px,4vw,48px)}
.campus-head p{color:var(--text-2);font-size:var(--fs-lede);line-height:1.55;max-width:60ch}
.mosaic{display:grid;gap:16px}
.mosaic figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.mosaic .img{border-radius:var(--r);overflow:hidden;background:var(--navy-3)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic figcaption{font-size:16px;color:var(--text-2);line-height:1.4}
@media (min-width:760px){
  .mosaic{grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto}
  .m1{grid-column:1/6;grid-row:1/3}.m2{grid-column:6/13;grid-row:1}.m3{grid-column:6/9;grid-row:2}.m4{grid-column:9/13;grid-row:2}
  .m1 .img{flex:1;min-height:0}.m2 .img{height:clamp(220px,24vw,320px)}.m3 .img,.m4 .img{height:clamp(170px,17vw,230px)}
}
@media (max-width:759px){
  .mosaic{grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 6px;scrollbar-width:none}
  .mosaic::-webkit-scrollbar{display:none}
  .mosaic::after{content:"";width:1px}
  .mosaic figure{scroll-snap-align:start}
  .mosaic .img{aspect-ratio:4/5}
}
.wide{margin-top:16px;border-radius:var(--r);overflow:hidden;aspect-ratio:21/8;background:var(--navy-3)}
.wide img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
html[data-motion=full] .mosaic img,html[data-motion=full] .wide img{height:118%}
@media (max-width:759px){.wide{aspect-ratio:4/3}}
.visit{margin-top:28px;font-size:18px;color:var(--text-2)}
.visit .link{display:inline-block;padding-block:12px;margin-block:-12px}
/* .link.tap (11 Oct): a text link that stands alone ("Tüm sorular", "Sistemimiz", "Seviyeni 20 Dakikada Öğren", the three
   jump links of the refund page) was 17 to 19 px tall for a finger. The touch area grows by 14 px above and below through
   a pseudo-element, so the link's own box stays what it was: no line moves and the underline (a background at the bottom
   of the content box) stays where the prototype has it. (An inline-block with padding moved that underline 5 px down.) */
.link.tap,.art-all .link{position:relative}   /* .art-all: "Tüm yazılara dön" under an article */
.link.tap::after,.art-all .link::after{content:"";position:absolute;inset:-14px 0}

/* --- homepage lines 562-584 --- */
/* start: the one warm field */
.start-field{background:var(--ochre);color:var(--ink-on-ochre)}
.start-field h2{color:var(--ink-on-ochre)}
.start{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,72px)}
@media (min-width:980px){.start{grid-template-columns:1.2fr .8fr}}
.start .copy{display:grid;gap:22px;align-content:start}
.start .lede{color:var(--ink2-on-ochre);max-width:44ch}
.start .ctas{display:grid;gap:12px;max-width:420px}
.start .ctas > *{width:100%;justify-content:center}
@media (min-width:1120px){.start .ctas{grid-template-columns:auto auto;justify-content:start;max-width:none}.start .ctas > *{width:auto}}
.wa{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--screen);min-height:58px;padding:0 22px 0 8px;border-radius:999px;border:1.5px solid rgba(15,25,49,.7);transition:border-color .2s}
.wa:hover{border-color:var(--deep)}
.wa i{width:40px;height:40px;border-radius:999px;background:var(--deep);color:var(--ochre);display:grid;place-items:center;flex:none}
.wa i svg{width:20px;height:20px}
@media (max-width:480px){.wa{font-size:16px;word-spacing:0;gap:8px;padding:0 14px 0 6px}.wa i{width:32px;height:32px}.wa i svg{width:18px;height:18px}}
@media (max-width:400px){.btn,.wa{white-space:normal;text-align:center;line-height:1.25;padding-block:12px;height:auto}}
.start .small{font-size:17px;color:var(--ink2-on-ochre)}
.start .small a{display:inline-block;padding-block:12px;margin-block:-12px;font-weight:650;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.plan{list-style:none;margin:0;padding:0;display:grid;border-top:1.5px solid rgba(15,25,49,.25)}
.plan li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-bottom:1.5px solid rgba(15,25,49,.25);align-items:start}
.plan .n{font-size:40px;font-weight:800;font-stretch:125%;line-height:1;color:var(--deep)}
.plan b{display:block;font-size:19px;font-weight:650;margin-bottom:2px}
.plan span{color:var(--ink2-on-ochre)}

/* --- homepage lines 586-611 --- */
/* footer */
.foot{background:var(--deep);padding:72px 0 32px}
@media (max-width:760px){.foot{padding-bottom:110px}}
.f-top{display:grid;gap:32px}
@media (min-width:900px){.f-top{grid-template-columns:1fr auto;align-items:end}}
.foot .brand svg{width:140px;height:auto;display:block}
.foot .brand p{margin-top:14px;color:var(--text-2);font-size:17px}
.contact{display:grid;gap:0;font-style:normal}
@media (min-width:900px){.contact{justify-items:end;text-align:right}}
.contact .tel{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;font-stretch:108%;letter-spacing:-.01em;color:var(--light);line-height:1.2;white-space:nowrap}
.contact a{display:inline-flex;align-items:center;min-height:44px}
.contact a:not(.tel),.contact p{color:var(--text-2);font-size:17px}
.contact a:hover{color:var(--light)}
.contact p a{display:inline;min-height:0;padding:8px 0}   /* the address opens the Google listing; same line box as the plain text */
.f-links{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:40px;padding-top:16px;border-top:1px solid var(--line)}
.f-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--text-2);font-size:16px}
.f-links a:hover{color:var(--light)}
.foot .bottom{margin-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;font-size:16px;color:var(--text-2)}
.foot .legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.foot .legal a{display:inline-flex;align-items:center;min-height:44px}
.motion-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(242,241,236,.45);background:transparent;font-size:16px;font-weight:500;color:var(--text-2);cursor:pointer;transition:border-color .2s,color .2s}
.motion-toggle:hover{border-color:var(--light);color:var(--light)}
.motion-toggle i{width:30px;height:18px;border-radius:999px;background:rgba(242,241,236,.2);position:relative;flex:none}
.motion-toggle i::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:999px;background:var(--text-2);transition:translate .2s var(--out)}
.motion-toggle[aria-pressed="true"] i{background:var(--ochre)}
.motion-toggle[aria-pressed="true"] i::after{translate:12px 0;background:var(--deep)}

/* --- homepage lines 613-620 --- */
/* mobile sticky */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--navy);box-shadow:0 -1px 0 var(--line);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));display:none;visibility:hidden;transform:translateY(110%);transition:transform .35s var(--ease),visibility 0s linear .35s}
.stick .btn{width:100%;min-height:48px}
@media (max-width:760px){.stick{display:flex}}
@media (max-height:480px){.stick{display:none!important}}
.stick.show{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
html[data-motion=reduced] .stick{transform:none;opacity:0;transition:opacity .2s var(--out),visibility 0s linear .2s}
html[data-motion=reduced] .stick.show{opacity:1;transition:opacity .2s var(--out),visibility 0s}

/* --- homepage lines 622-644 --- */
/* ================= motion build 2 ================= */
/* nav: reading-progress hairline (both tiers: a 2px progress line, not movement) */
.nav-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ochre);transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:opacity .3s var(--out);pointer-events:none}
.nav.scrolled .nav-prog{opacity:1}
/* links: a line draws over the resting underline on hover (nothing moves) */
.link,.start .small a{text-decoration:none;background-origin:content-box;background-repeat:no-repeat;transition:background-size .26s var(--out)}
.link{background-image:linear-gradient(var(--ochre),var(--ochre)),linear-gradient(rgba(242,241,236,.4),rgba(242,241,236,.4));background-position:0 100%,0 100%;background-size:0% 1.5px,100% 1.5px}
.start .small a{background-image:linear-gradient(var(--deep),var(--deep)),linear-gradient(rgba(7,15,32,.45),rgba(7,15,32,.45));background-position:0 100%,0 100%;background-size:0% 2px,100% 1.5px}
@media (hover:hover) and (pointer:fine){.link:hover{background-size:100% 1.5px,100% 1.5px}.start .small a:hover{background-size:100% 2px,100% 1.5px}}
/* headings: temporary line masks for the reveal (the original markup is restored when it ends) */
h2 .ln{display:block;overflow:hidden;padding:.08em 0 .16em;margin:-.08em 0 -.16em}
main h2:has(> .ln){display:flex;flex-direction:column}   /* flex items never collapse margins: the split heading keeps its exact height */
h2 .li{display:inline-block;vertical-align:top}
/* magnetic CTA label wrapper */
.btn .lbl{display:inline-flex;align-items:center;gap:inherit}
/* programs: the clip pill = a clone of the tab row painted fully active and clipped to the selected tab (FULL) */
.tabs{position:relative}
.tabs-on{position:absolute;inset:0;margin:0;pointer-events:none}
.tabs-on .tab{background:var(--light);border-color:var(--light);color:var(--navy)}
.tabs-on .tab .for{color:#2F4065}
.tabs.has-clone .tab{transition:border-color .25s var(--ease)}
.tabs.has-clone .tab[aria-selected="true"]{background:transparent;border-color:rgba(242,241,236,.45);color:var(--light)}
.tabs.has-clone .tab[aria-selected="true"] .for{color:var(--text-2)}

/* --- homepage lines 683-703 --- */
/* route: a ring pulses once when a stop lights (FULL) */
.stop .dot::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--ochre);opacity:0;pointer-events:none}
html[data-motion=full] .stop.lit .dot::after{animation:ring .7s var(--out) both}
@keyframes ring{from{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
/* campus: hover zoom uses the individual scale property, so it composes with GSAP's parallax transform */
.mosaic figcaption{transition:color .2s var(--out)}
@media (hover:hover) and (pointer:fine){
  html[data-motion=full] .mosaic img,html[data-motion=full] .wide img{transition:scale .7s var(--out)}
  html[data-motion=full] .mosaic figure:hover img,html[data-motion=full] .wide:hover img{scale:1.04}
  .mosaic figure:hover figcaption{color:var(--light)}
}
/* mega menu items and sheet links: short stagger on pointer open (FULL); keyboard open is instant */
html[data-motion=full] .mega a{opacity:0;translate:0 4px;transition:opacity .18s var(--out),translate .18s var(--out),background-color .15s}
html[data-motion=full] .dd.open .mega a{opacity:1;translate:0 0}
html[data-motion=full] .dd.open .mega a:nth-child(2){transition-delay:.03s,.03s,0s}
html[data-motion=full] .dd.open .mega a:nth-child(3){transition-delay:.06s,.06s,0s}
html[data-motion=full] .dd.open .mega a:nth-child(4){transition-delay:.09s,.09s,0s}
html[data-motion=full] .mega.kb a{transition:none}
html[data-motion=full] .sheet nav a{opacity:0;translate:0 10px;transition:opacity .2s var(--out),translate .2s var(--out)}
html[data-motion=full] .sheet.open nav a{opacity:1;translate:0 0;transition:opacity .4s var(--out) calc(.12s + var(--i,0) * .04s),translate .45s var(--ease) calc(.12s + var(--i,0) * .04s)}
.sheet nav a:nth-child(2){--i:1}.sheet nav a:nth-child(3){--i:2}.sheet nav a:nth-child(4){--i:3}.sheet nav a:nth-child(5){--i:4}.sheet nav a:nth-child(6){--i:5}.sheet nav a:nth-child(7){--i:6}.sheet nav .sub a:nth-child(n){--i:6}

/* =====================================================================================================================
   SUBPAGE SHELL: everything below is new for the subpages (the homepage monolith does not load this file).
   Same tokens, same type, same motion contract. Values follow .impeccable/team2/site-spec.md (IA & UI blueprint);
   names and markup are documented in .impeccable/team2/shell-api.md.
   ===================================================================================================================== */
:root{--h1-sub:clamp(2.25rem,min(4.2vw,8.4vh),3.5rem);--measure:38.5rem;--pad-tight:clamp(48px,min(6vw,10vh),88px);--err:#FF8F80}
@supports (height:100svh){:root{--h1-sub:clamp(2.25rem,min(4.2vw,8.4svh),3.5rem)}}
/* phones narrower than 344 px (11 Oct): the headline scales with the line (36 px at 344, 33 px at 320), so it breaks where it
   breaks at 344 px instead of dropping one word per line (20 px gutters: the line is 100vw - 40px) */
@media (max-width:343px){:root{--h1-sub:calc((100vw - 40px) * .1184)}}
[hidden]{display:none!important}
em{font-style:normal;font-weight:600;color:var(--light)}   /* the font link loads upright only */

/* ---- keyframes of the page-hero load moment (same curves as the homepage hero) ---- */
@keyframes ln-up{from{transform:translateY(112%)}to{transform:none}}
@keyframes in-up{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes wipe-x{from{clip-path:inset(-.2em 100% -.3em 0)}to{clip-path:inset(-.2em 0 -.3em 0)}}
@keyframes wipe-down{from{clip-path:inset(0 0 100% 0 round var(--rr,0px))}to{clip-path:inset(0 0 0 0 round var(--rr,0px))}}
@keyframes media-open{from{clip-path:inset(100% 0% 0% 0% round var(--rr,24px))}to{clip-path:inset(0% 0% 0% 0% round var(--rr,24px))}}
@keyframes img-settle{from{scale:1.1}to{scale:1}}

/* ---- nav: the current page (builder: aria-current="page" on the page's own link, "true" on its section; .cur on the services menu).
   No underline and no weight change: labels never shift between pages ---- */
.menu > a[aria-current],.menu > .dd.cur > button{background:rgba(242,241,236,.12);color:var(--light)}
.mega a[aria-current]{background:var(--navy-3)}
.sheet nav a[aria-current]{box-shadow:inset 3px 0 0 var(--ochre);padding-left:14px}
.sheet nav .sub a[aria-current]{padding-left:12px;color:var(--light)}
.f-links a[aria-current],.foot .legal a[aria-current]{color:var(--light)}
/* pages without the mobile sticky CTA */
@media (max-width:760px){body.no-stick .foot{padding-bottom:32px}html:has(body.no-stick){scroll-padding-bottom:0}}

/* ---- page hero (.phero) ----
   service:  .phero.has-band  > .wrap > h1 + .row(left: lede + .cta-row | right: .facts) + .phero-band(.ph > img) [+ .lvl]
   split:    .phero.has-media > .wrap.phero-in > .phero-tx + figure.phero-media
   read:     .phero.plain     > .wrap > [.back] + h1 + lede/meta
   load moment = CSS on html.go (head gate; never waits on the CDN): h1 lines rise (FULL) / wipe (REDUCED), [data-in] items follow,
   the media opens like a curtain. STATIC and html[data-arrive=back] show the end state. */
.phero{position:relative;isolation:isolate;display:flow-root;padding:clamp(104px,14vh,136px) 0 clamp(36px,5vh,56px)}
@supports (height:100svh){.phero{padding-top:clamp(104px,14svh,136px)}}
.phero.plain{padding:clamp(112px,16vh,152px) 0 clamp(28px,4vw,48px)}
.phero h1{font-size:var(--h1-sub);line-height:1.02;max-width:22ch}
.phero.art h1{font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;font-weight:700;max-width:24ch}
.phero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.phero h1 .ln > span{display:block}
.phero .lede{max-width:34em}
.phero h1 + .lede,.phero h1 + .meta{margin-top:20px}
.phero .meta{font-size:16px;color:var(--text-2)}
.phero .row{display:grid;gap:28px;margin-top:20px}
@media (min-width:980px){.phero .row{grid-template-columns:minmax(0,1fr) clamp(360px,33vw,440px);gap:clamp(32px,5vw,72px);align-items:end}}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.phero .cta-row{margin-top:24px}
.phero .facts b{font-size:19px}
.phero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px)}
.phero-tx{display:grid;gap:20px;justify-items:start;align-content:start;min-width:0}
.phero-tx .cta-row{margin-top:4px}
@media (min-width:980px){.phero.has-media .phero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end}}
.phero-media{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:var(--ar,5/4);background:var(--navy-3);min-width:0;--rr:24px}
.phero-media img{width:100%;height:100%;object-fit:cover}
/* .phero-win: the split hero's second column is a screen window (figure.mat) or a card, not a photo. It only sizes and aligns the
   item (style="--w:400px" = its largest width; right-aligned from 980 px); give it data-in="n" so it arrives with the load moment */
.phero-win{width:100%;max-width:var(--w,400px);min-width:0;justify-self:start}
@media (min-width:980px){.phero-win{justify-self:end}.phero.has-media .phero-in:has(> .phero-win){align-items:start}}   /* both columns start at the top: a window is taller than the text */
/* the band is contained in the wrap (2400 px sources stay crisp up to 1200 CSS px), never full-bleed */
.phero-band{--rr:24px;position:relative;margin-top:clamp(28px,4.4vh,44px);height:clamp(240px,40vh,440px);border-radius:var(--rr);overflow:hidden;background:var(--navy-3)}
.phero-band .ph{position:absolute;inset:0}
.phero-band img{width:100%;height:100%;object-fit:cover;object-position:50% var(--oy,30%)}
@media (max-width:979px){.phero-band{--rr:16px;height:auto;aspect-ratio:4/3}}
@media (min-width:760px) and (max-width:979px){.phero-band{aspect-ratio:16/9}}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-10px 0 6px;font-size:16px;color:var(--text-2);transition:color .2s}
.back svg{width:16px;height:16px;rotate:90deg}
.back:hover{color:var(--light)}
/* load moment */
html[data-motion=full] .phero h1,html[data-motion=reduced] .phero h1{opacity:0}
html[data-motion].go .phero h1,.phero h1.done{opacity:1}
html[data-motion=full].go .phero h1:not(:has(.ln)):not(.done){animation:in-up .7s var(--out) both}
html[data-motion=reduced].go .phero h1:not(:has(.ln)):not(.done){animation:fade .5s var(--out) both}
html[data-motion=full] .phero h1 .ln > span{transform:translateY(112%)}
html[data-motion=full].go .phero h1 .ln > span{animation:ln-up .95s var(--ease) calc(var(--i,0) * .09s) both}
html[data-motion=reduced] .phero h1 .ln > span{clip-path:inset(-.2em 100% -.3em 0)}
html[data-motion=reduced].go .phero h1 .ln > span{animation:wipe-x .5s cubic-bezier(.33,1,.68,1) calc(var(--i,0) * .1s) both}
.phero h1 .ln:nth-child(2){--i:1}.phero h1 .ln:nth-child(3){--i:2}.phero h1 .ln:nth-child(4){--i:3}.phero h1 .ln:nth-child(5){--i:4}
.phero h1.done .ln > span{animation:none;transform:none;clip-path:none}
html[data-motion=full] .phero [data-in],html[data-motion=reduced] .phero [data-in]{opacity:0}
html[data-motion=full].go .phero [data-in]{animation:in-up .7s var(--out) calc(.2s + var(--d,0) * .08s) both}
html[data-motion=reduced].go .phero [data-in]{animation:fade .4s var(--out) calc(.16s + var(--d,0) * .08s) both}
.phero [data-in="1"]{--d:1}.phero [data-in="2"]{--d:2}.phero [data-in="3"]{--d:3}.phero [data-in="4"]{--d:4}.phero [data-in="5"]{--d:5}
html[data-motion=full] .phero-media,html[data-motion=full] .phero-band .ph{clip-path:inset(100% 0% 0% 0% round var(--rr,24px))}
html[data-motion=full] .phero-media img,html[data-motion=full] .phero-band .ph img{scale:1.1}
/* an entrance uses the ease-out curve (motion director: with --io the photo was half open 630 ms after .go; with --ease, 200 ms) */
html[data-motion=full].go .phero-media,html[data-motion=full].go .phero-band .ph{animation:media-open .9s var(--ease) .06s both}
html[data-motion=full].go .phero-media img,html[data-motion=full].go .phero-band .ph img{animation:img-settle 1.3s var(--out) .06s both}
/* app screenshots never scale (text softens while a bitmap is resampled) */
html[data-motion=full] .phero-media img.ui,html[data-motion=full].go .phero-media img.ui{scale:none;animation:none}
html[data-motion=reduced] .phero-media,html[data-motion=reduced] .phero-band .ph{clip-path:inset(0 0 100% 0 round var(--rr,0px))}
html[data-motion=reduced].go .phero-media,html[data-motion=reduced].go .phero-band .ph{animation:wipe-down .6s var(--out) .1s both}
/* arrival variants (gate.js sets html[data-arrive]): again = the page was already seen in this session: one short fade, nothing travels
   (both tiers); back = Back/Forward or an anchor deep link: the hero is complete at first paint (html.go is never set) */
html[data-motion][data-arrive=again] .phero h1 .ln > span,html[data-motion][data-arrive=again].go .phero h1 .ln > span{transform:none;clip-path:none;animation:none}
html[data-motion][data-arrive=again].go .phero h1,html[data-motion][data-arrive=again].go .phero h1:not(:has(.ln)):not(.done){animation:fade .24s var(--out) both}
html[data-motion][data-arrive=again].go .phero [data-in]{animation:fade .24s var(--out) calc(var(--d,0) * .04s) both}
html[data-motion][data-arrive=again] .phero-media,html[data-motion][data-arrive=again] .phero-band .ph{clip-path:none;opacity:0}
html[data-motion][data-arrive=again].go .phero-media,html[data-motion][data-arrive=again].go .phero-band .ph{animation:fade .28s var(--out) .04s both}
html[data-motion][data-arrive=again] .phero-media img,html[data-motion][data-arrive=again] .phero-band .ph img,
html[data-motion][data-arrive=again].go .phero-media img,html[data-motion][data-arrive=again].go .phero-band .ph img{scale:none;animation:none}
html[data-motion][data-arrive=back] .phero h1,html[data-motion][data-arrive=back] .phero [data-in]{opacity:1;animation:none}
html[data-motion][data-arrive=back] .phero h1 .ln > span{transform:none;clip-path:none;animation:none}
html[data-motion][data-arrive=back] .phero-media,html[data-motion][data-arrive=back] .phero-band .ph{clip-path:none;animation:none}
html[data-motion][data-arrive=back] .phero-media img,html[data-motion][data-arrive=back] .phero-band .ph img{scale:none;animation:none}

/* ---- section rhythm + layout helpers ---- */
.sec-tight{padding-block:var(--pad-tight)}
.sec.flush-top{padding-top:0}
.head.wide{max-width:1000px}
.h2c{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.12;font-weight:700;font-stretch:108%}   /* h2 inside a split component or on a Read page */
.stack{display:grid;gap:var(--gap,18px);align-content:start;min-width:0}
.cols-2,.cols-3,.cols-4{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,24px)}
@media (min-width:760px){.cols-2,.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split.wide-l{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split.wide-r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .split.rev > :first-child{order:2}
  .split.top{align-items:start}
}
.split .tx{display:grid;gap:18px;align-content:center;min-width:0}
.split .tx p{color:var(--text-2)}
.t2{color:var(--text-2)}
.fs-lede{font-size:var(--fs-lede);line-height:1.55}
.fs-16{font-size:16px}
.tnum{font-variant-numeric:tabular-nums}
.tag-t{font-size:16px;font-weight:650;color:var(--ochre-text)}   /* a time/role tag that carries information: "Önce", "Masada", "Hafta 1–4" */

/* ---- photos (.frame) and app evidence (.mat = the screen window on a charcoal mat, .phone = real-proportion phone) ---- */
.frame{margin:0;border-radius:var(--r);overflow:hidden;background:var(--navy-3);aspect-ratio:var(--ar,auto);min-width:0}
.frame.r24{border-radius:24px}.frame.r16{border-radius:16px}
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% var(--oy,50%)}
.cap{display:block;margin-top:10px;font-size:16px;line-height:1.4;color:var(--text-2)}
html[data-motion=full] img[data-par]{height:118%}
@media (hover:hover) and (pointer:fine){
  html[data-motion=full] .frame.zoom img{transition:scale .7s var(--out)}
  html[data-motion=full] .frame.zoom:hover img,html[data-motion=full] a:hover .frame.zoom img,html[data-motion=full] .post:hover .frame.zoom img{scale:1.04}
}
/* screen window: --deep mat, radius 24; a window of radius 16 with the capture's own ground (--app-bg) behind it.
   The tall real capture sits in the window; [data-screen] data-stops="[578]" (natural px row) picks the crop (motion part). */
.mat{margin:0;display:grid;gap:12px;padding:clamp(12px,1.6vw,20px);border-radius:24px;background:var(--deep);box-shadow:0 40px 80px -48px rgba(3,6,19,.8);min-width:0}
.sec-raised .mat{background:var(--screen)}
.mat .shot,.mat .vp{position:relative;overflow:hidden;border-radius:16px;background:var(--app-bg,var(--screen));aspect-ratio:var(--ar,4/5)}
.mat .shot img,.mat .vp img{display:block;width:100%;height:auto;max-width:none}
.mat figcaption{font-size:16px;font-weight:600;line-height:1.3;color:var(--text-2)}
/* a fixed crop with no script: style="--y:578;--nw:960" on the .shot = the row of the capture (natural px) that sits at the top of the
   window + the file's natural width. A [data-screen] window is positioned by the motion part instead (device-pixel snapped, several stops) */
.mat:not([data-screen]) .shot[style*="--y"]{container-type:inline-size}
.mat:not([data-screen]) .shot[style*="--y"] img{translate:0 calc(var(--y) / var(--nw,960) * -100cqw)}
.phone{--ph-w:240px;--bz:clamp(6px,calc(var(--ph-w) * .036),10px);--rad:calc(var(--ph-w) * .165);position:relative;flex:none;margin:0;
  width:var(--ph-w);height:calc((var(--ph-w) - 2 * var(--bz)) * 2.1667 + 2 * var(--bz));padding:var(--bz);border-radius:var(--rad);background:var(--screen);
  box-shadow:0 0 0 1.5px rgba(242,241,236,.16),0 30px 44px -20px rgba(3,6,19,.85),0 12px 22px -12px rgba(3,6,19,.6)}
.phone .scr{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--rad) - var(--bz));background:var(--app-bg,#FAF5EE);isolation:isolate}
.phone .feed{position:absolute;inset:0 0 auto 0;padding-top:calc(var(--ph-w) * .13)}
.phone .feed img{display:block;width:100%;height:auto}
.phone .tabbar{position:absolute;left:0;right:0;bottom:0;z-index:1;box-shadow:0 -1px 0 rgba(15,25,49,.08)}
.phone .tabbar img{display:block;width:100%;height:auto}
.phone .tabbar::after{content:"";position:absolute;left:50%;bottom:calc(var(--ph-w) * .022);width:calc(var(--ph-w) * .34);height:max(3px,calc(var(--ph-w) * .0135));margin-left:calc(var(--ph-w) * -.17);border-radius:999px;background:#1B1F23;opacity:.82}
.phone .scr::before{content:"";position:absolute;inset:0 0 auto 0;height:calc(var(--ph-w) * .13);z-index:1;pointer-events:none;background:linear-gradient(var(--app-bg,#FAF5EE) 70%,rgba(250,245,238,0))}
.phone .scr::after{content:"";position:absolute;left:50%;top:calc(var(--ph-w) * .035);width:calc(var(--ph-w) * .3);height:calc(var(--ph-w) * .085);margin-left:calc(var(--ph-w) * -.15);border-radius:999px;background:var(--screen);z-index:2}

/* ---- text tiles and lists ---- */
.tile{display:grid;gap:10px;align-content:start;padding:clamp(22px,2.6vw,32px);border-radius:16px;background:var(--navy-3);min-width:0}
.tile.line{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.tile.r24{border-radius:24px}
.tile h3{font-size:1.35rem}
.tile p{color:var(--text-2);font-size:17px;line-height:1.55}
.tile .n{font-size:40px;font-weight:800;font-stretch:125%;line-height:1;color:var(--ochre);font-variant-numeric:tabular-nums}
/* ledger: "who is it for", definitions, result facts. Left the h2 alone (it is the question), right hairline rows (h3 + one paragraph) */
.ledger{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:980px){.ledger{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.ledger ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ledger li{display:grid;gap:6px;padding:22px 0;border-bottom:1px solid var(--line)}
.ledger li p{color:var(--text-2);max-width:56ch}
/* level strip: the five stops of the talkinn Path with the program's range lit. style="--from:1;--to:4" on the <ol>, .in-range on the lit stops */
.lvl{display:grid;gap:14px 40px;margin-top:22px;align-items:center}
@media (min-width:980px){.lvl{grid-template-columns:minmax(0,1fr) auto}}
.lvl ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}   /* minmax(0,…): a long name must not widen its own column (the line's geometry assumes 20% each) */
.lvl > .link{justify-self:start}   /* stacked under the strip (below 980px) the link keeps its own width, and its underline with it */
/* an unlit stop names the program that serves it: "A1 · Check-In". Between 641 and 1279px a stop is narrower than "B1 · Konuşma Kulübü",
   so there the program goes on its own line under the code (the separator is <i class="sep" aria-hidden="true">&nbsp;· </i>).
   One form for the three strip pages (integration, 9 Oct; they had three different ones) */
.lvl .sep{font-style:normal}
@media (min-width:641px) and (max-width:1279px){.lvl .sep{display:none}.lvl li span a{display:block;width:max-content}.lvl li{align-content:start}}
.lvl ol::before{content:"";position:absolute;left:9px;right:calc(20% - 9px);top:8px;height:3px;border-radius:3px;background:rgba(242,241,236,.16)}
.lvl .fill{position:absolute;top:8px;height:3px;border-radius:3px;background:var(--ochre);left:calc(var(--from) * 20% + 9px);width:calc((var(--to) - var(--from)) * 20%);transform-origin:0 50%}
.lvl li{position:relative;display:grid;gap:2px;padding-top:28px;font-size:16px;line-height:1.3;color:var(--text-2)}
.lvl li::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:999px;background:var(--navy);border:3px solid rgba(242,241,236,.5)}
.lvl li.in-range::before{background:var(--ochre);border-color:var(--ochre)}
.lvl li.fill{display:block;padding:0}.lvl li.fill::before{display:none}   /* the lit range: <li class="fill" aria-hidden="true"> as the first item */
.lvl li b{font-size:17px;font-weight:650;font-stretch:106%;color:var(--light)}
.lvl li:not(.in-range) b{color:var(--text-2);font-weight:500}
.lvl li a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(242,241,236,.4)}
/* phones (integration, 9 Oct): five names do not fit under five dots (they collide at 390 and overflow at 360), so the strip turns into
   a vertical route like every rail on the site below 900px; CEFR codes and the program link stay visible. Row pitch 34px.
   The motion part turns its armed state to the same axis (parts/motion.css section 7). */
@media (max-width:640px){
  .lvl{gap:20px}
  .lvl ol{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .lvl ol::before{left:7.5px;right:auto;top:11px;width:3px;height:calc(4 * 34px)}
  .lvl .fill{left:7.5px;top:calc(var(--from) * 34px + 11px);width:3px;height:calc((var(--to) - var(--from)) * 34px);transform-origin:50% 0}
  .lvl li:not(.fill){display:flex;align-items:baseline;gap:12px;min-height:22px;padding:0 0 0 32px;line-height:22px}
  .lvl li:not(.fill)::before{top:2px}
  .lvl li:not(.fill)::after{top:-1px}
  .lvl li b{flex:0 0 116px;font-size:17px}
  .lvl li span{display:inline}
}
/* result figures under a proof quote */
.res{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.res div{display:grid;gap:4px;padding:18px 20px 0 0;align-content:start}
.res div + div{padding-left:20px;border-left:1px solid var(--line)}
.res b{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:750;font-stretch:108%;line-height:1.1;color:var(--light);font-variant-numeric:tabular-nums}
.res span{font-size:16px;line-height:1.4;color:var(--text-2);max-width:26ch}
@media (max-width:640px){.res{grid-template-columns:1fr;border-top:0}.res div{padding:16px 0;border-top:1px solid var(--line)}.res div + div{padding-left:0;border-left:0}}
.quote.sm blockquote{font-size:clamp(1.9rem,3.4vw,3rem);max-width:30ch}
/* step rail: the homepage route (.rail > .track + .fill + ol.stops > li.stop > .dot) with content under each stop.
   style="--n:3" = number of stops.
   .prop = Check-In's 12 weeks: three phases in their true lengths (4 : 5 : 3) and a fourth stop li.stop[data-rail-end] (dot + link) =
   the destination. The line runs from the first dot to the end dot = 12 weeks; with no column gap the phase dots sit exactly on the
   week ticks 4 and 9. Below 900 px the rail is vertical and the phases keep their proportion through min-height */
.rail.steps .stops{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.rail.steps .stops{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));column-gap:32px}
  .rail.steps.prop .stops{grid-template-columns:4fr 5fr 3fr auto;column-gap:0}
  .rail.steps.prop .stop{padding-right:28px}
  .rail.steps.prop .stop[data-rail-end]{padding-right:0;white-space:nowrap}
  .rail.steps.prop .track{height:9px;top:8.5px;border-radius:0;background:rgba(242,241,236,.16) repeating-linear-gradient(90deg,rgba(242,241,236,.34) 0 1px,transparent 1px calc(100% / 12))}}
@media (max-width:899px){.rail.steps.prop .stop:nth-child(1){min-height:160px}.rail.steps.prop .stop:nth-child(2){min-height:200px}.rail.steps.prop .stop:nth-child(3){min-height:120px}}
.rail.steps .stop{align-content:start;gap:6px}
.rail.steps .stop h3{font-size:1.35rem}
.rail.steps .stop p{font-size:17px;line-height:1.55;color:var(--text-2);max-width:42ch}
.rail.steps .stop .mat,.rail.steps .stop .frame{margin-top:14px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start;font-size:17px;line-height:1.45;color:var(--text);text-wrap:pretty}
.checks li::before{content:"";width:20px;height:20px;margin-top:2px;background:var(--ochre);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.checks b{display:block;font-weight:650;color:var(--light)}
.checks small{display:block;font-size:16px;color:var(--text-2)}
.checks.cols{gap:14px clamp(20px,3vw,40px)}
@media (min-width:760px){.checks.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kv{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.kv li{display:grid;grid-template-columns:minmax(5.2em,auto) minmax(0,1fr);column-gap:18px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.kv b{font-size:21px;font-weight:700;font-stretch:110%;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--light)}
.kv span{font-size:17px;line-height:1.45;color:var(--text-2);text-wrap:pretty}
/* numbered plan on charcoal (the pumpkin field's .plan with charcoal rules); only real sequences get numbers */
.plan.dark{border-top:1px solid var(--line)}
.plan.dark li{border-bottom:1px solid var(--line)}
.plan.dark .n{color:var(--ochre);font-variant-numeric:tabular-nums}
.plan.dark b{color:var(--light)}
.plan.dark span:not(.n){color:var(--text-2)}
/* badges: pumpkin = a number that matters (discount), outline = a neutral state. Never on a photo, never a button */
.bdg,.bdg-line{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:999px;font-size:14px;white-space:nowrap}
.bdg{background:var(--ochre);color:var(--ink-on-ochre);font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.bdg-line{border:1.5px solid var(--line-2);color:var(--text-2);font-weight:600}
.strike{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(242,241,236,.75);color:var(--text-2);font-variant-numeric:tabular-nums}

/* ---- generic tabs (.tabs/.tab/.panels/.panel come from the homepage block above) ---- */
.panel.plain{display:block;background:none;border-radius:0;overflow:visible}
html[data-motion=reduced] .panel.plain.anim > *{animation:fade .22s var(--out) both}

/* ---- accordion (.acc > details > summary + .acc-b > div): works without JS; FULL animates height (site.js), REDUCED fades the answer ---- */
.acc{display:grid;max-width:820px}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:20px;align-items:center;min-height:72px;padding:20px 0;cursor:pointer;list-style:none;font-size:20px;line-height:1.3;font-weight:650;font-stretch:106%;color:var(--light);text-wrap:balance}
.acc summary::-webkit-details-marker{display:none}
.acc summary h3{margin:0;font:inherit;letter-spacing:0;color:inherit}
.acc .pm{position:relative;width:32px;height:32px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .2s}
.acc .pm::before,.acc .pm::after{content:"";position:absolute;left:9px;right:9px;top:15px;height:2px;border-radius:2px;background:var(--light);transition:rotate .25s var(--ease),opacity .2s}
.acc .pm::after{rotate:90deg}
.acc details[open]:not(.closing) .pm::after{rotate:0deg;opacity:0}
.acc details[open]:not(.closing) .pm{box-shadow:inset 0 0 0 1.5px var(--light)}
@media (hover:hover){.acc summary:hover .pm{box-shadow:inset 0 0 0 1.5px var(--light)}}
html[data-motion=reduced] .acc .pm::before,html[data-motion=reduced] .acc .pm::after{transition:none}
.acc.kb details::before,.acc.kb .pm,.acc.kb .pm::before,.acc.kb .pm::after{transition:none!important}   /* keyboard toggle (site.js marks the accordion .kb): nothing animates */
.acc .acc-b{overflow:hidden}
.acc .acc-b > div{display:grid;gap:12px;max-width:62ch;padding:0 52px 24px 0;font-size:18px;line-height:1.6;color:var(--text-2)}
.acc .acc-b a{font-weight:600;color:var(--light);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(242,241,236,.4)}
@media (max-width:640px){.acc summary{font-size:18px;min-height:64px}.acc .acc-b > div{padding-right:0}}

/* ---- long-form text (.prose): articles, legal pages; .doc adds the sticky contents column (220 px, gap 64) ---- */
.prose{max-width:var(--measure);font-size:19px;line-height:1.7;color:var(--text-2)}
@media (max-width:760px){.prose{font-size:18px}}
.prose > * + *{margin-top:1.1em}
.prose > :first-child{margin-top:0}
.prose h2{font-size:1.75rem;line-height:1.2;font-stretch:108%;margin-top:2em;scroll-margin-top:104px}
.prose h3{font-size:1.3rem;margin-top:1.7em;scroll-margin-top:104px}
.prose h2 + *,.prose h3 + *{margin-top:.7em}
.prose strong,.prose b{font-weight:650;color:var(--light)}
.prose a{font-weight:600;color:var(--light);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:rgba(242,241,236,.4);transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--ochre)}
.prose ul,.prose ol{list-style:none;margin-bottom:0;padding:0;display:grid;gap:.45em}
.prose ul > li{position:relative;padding-left:22px}
.prose ul > li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;border-radius:1px;background:var(--ochre);rotate:45deg}   /* the ticker's diamond */
.prose ol{counter-reset:pl}
.prose ol > li{position:relative;padding-left:34px;counter-increment:pl}
.prose ol > li::before{content:counter(pl) ".";position:absolute;left:0;top:0;font-weight:650;color:var(--ochre-text);font-variant-numeric:tabular-nums}
.prose blockquote{margin:1.6em 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--ochre);font-size:1.15em;line-height:1.5;font-weight:560;color:var(--light)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose figure{margin:1.8em 0 0}
.prose img{border-radius:var(--r)}
.prose .meta{font-size:16px}
/* in-article editorial table (never on a Persuade page): the wrapper scrolls, the page never does */
.tbl{overflow-x:auto;border-radius:16px;box-shadow:0 0 0 1px var(--line)}
.tbl table{width:100%;min-width:640px;border-collapse:collapse}
.tbl th{padding:12px 16px;background:var(--deep);text-align:left;font-size:15px;font-weight:650;color:var(--light)}
.tbl td{padding:14px 16px;border-top:1px solid var(--line);font-size:17px;line-height:1.45;color:var(--text-2);vertical-align:top}
.tbl td:first-child{font-weight:600;color:var(--light)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.doc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px)}
@media (min-width:1020px){.doc{grid-template-columns:220px minmax(0,1fr);gap:64px;align-items:start}.doc .toc{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow-y:auto}}
.toc{display:grid;font-size:16px}
.toc a{display:flex;align-items:center;min-height:44px;padding:4px 0 4px 14px;border-left:3px solid rgba(242,241,236,.16);line-height:1.3;color:var(--text-2);transition:color .2s,border-color .2s}
.toc a:hover{color:var(--light)}
.toc a.on{border-left-color:var(--ochre);color:var(--light)}

/* ---- blog cards (.posts > .post): the whole card is the link (stretched), the title underline draws on hover ---- */
.posts{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px)}
@media (min-width:760px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post{position:relative;display:grid;gap:14px;align-content:start;min-width:0}
.post .frame{aspect-ratio:16/9}
.post h3{font-size:1.4rem;line-height:1.2}
.post h3 a{background-image:linear-gradient(var(--ochre),var(--ochre));background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;transition:background-size .26s var(--out)}
.post h3 a::before{content:"";position:absolute;inset:0;z-index:1}
@media (hover:hover) and (pointer:fine){.post:hover h3 a{background-size:100% 1.5px}}
.post p{font-size:17px;line-height:1.55;color:var(--text-2)}
.post .meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:16px;color:var(--text-2)}
@media (min-width:760px){
  .post.lead{grid-column:1/-1;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:center}
  .post.lead h3{font-size:clamp(1.6rem,2.4vw,2.1rem);font-stretch:108%}
  .post.rowc{grid-template-columns:minmax(160px,2fr) minmax(0,3fr);gap:18px;align-items:start}   /* row card: thumbnail left, text right */
  .post.rowc .frame{aspect-ratio:4/3}
}

/* ---- contact facts (.contact-list): every value is selectable text (mailto:/tel: are unreliable in the artifact host) ---- */
.contact-list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.contact-list li{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-list .k{font-size:16px;color:var(--text-2);line-height:1.3}
.contact-list .v{font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:650;font-stretch:104%;line-height:1.3;color:var(--light);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}

/* ---- forms (UI only: site.js prevents every submit; a valid one shows [data-form-ok] in place of the form body) ---- */
.form{display:grid;gap:18px;min-width:0}
.form.card{padding:clamp(22px,3vw,40px);border-radius:24px;background:var(--navy-3)}
.form .row2{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.form .row2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:grid;gap:8px;min-width:0}
.field > label,.field > .lbl{font-size:16px;font-weight:600;color:var(--light)}
.field .opt{font-weight:420;color:var(--text-2)}
.field input,.field select,.field textarea{width:100%;min-height:56px;padding:0 18px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--deep);color:var(--text);font:inherit;font-size:18px;color-scheme:dark;transition:border-color .2s}
.field textarea{min-height:132px;padding:16px 18px;resize:vertical;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;padding-right:48px;background-repeat:no-repeat;background-position:right 18px center;background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F1EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.field :is(input,select,textarea):hover{border-color:rgba(242,241,236,.5)}
.field :is(input,select,textarea):focus-visible{border-color:var(--light);outline:3px solid var(--ochre);outline-offset:2px}
.field ::placeholder{color:var(--text-3);opacity:1}
.field.bad :is(input,select,textarea){border-color:var(--err);border-width:2px}
.field .msg{font-size:16px;font-weight:600;color:var(--light)}   /* reserved row: shell/parts/motion.css keeps its height and fades it */
.field .hint{font-size:16px;line-height:1.4;color:var(--text-2)}
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:16px;line-height:1.5;color:var(--text-2);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border-radius:7px;border:1.5px solid var(--line-2);background:var(--deep);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.check input:checked{background:var(--light);border-color:var(--light)}
.check input:checked::after{content:"";width:16px;height:16px;background:var(--navy);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:640px){.form .btn[type=submit]{width:100%}}
.form-ok{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:18px 20px;border-radius:16px;background:var(--deep);box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:18px;line-height:1.5;color:var(--text-2)}
.form-ok:not(:has(> svg)){grid-template-columns:minmax(0,1fr)}
.form-ok > svg{width:44px;height:44px;color:var(--ochre-text)}
.form-ok b{font-weight:650;color:var(--light)}
.form.sent > :not([data-form-ok]){display:none}

/* ---- start field, slim: one row, h2 left, button + phone line right; no plan (Read pages) ---- */
.start-field.slim{padding:clamp(40px,6vw,72px) 0}
.start-field.slim .start{grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
@media (min-width:760px){.start-field.slim .start{grid-template-columns:minmax(0,1fr) auto}}
.start-field.slim h2{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.12;font-stretch:108%}
.start-field.slim .copy{gap:12px}
.start-field.slim .side{display:grid;gap:10px;justify-items:start}


/* ---- utilities for the data-attribute motion layer (start states are set by site.js, never here) ---- */
[data-draw]{display:block;transform-origin:0 50%}
[data-draw="y"]{transform-origin:50% 0}
[data-words] .w{display:inline}
/* the copied homepage rule covers `.row4 b[data-count]`; this one covers a count-up anywhere */
[data-count] > [aria-hidden]{font:inherit;color:inherit}

/* ---- shell/parts/article.css ---- */
/* shell/parts/article.css: the article template (body class art: the nine blog-<slug> pages) and the row cards of a post list
   (.posts.rows, also used by blog.html). Moved here by the integration pass (9 Oct) from blog-gen.py's TAIL, where it was written into
   nine page sources (and the row-card rules a tenth time into blog.html). Selectors are scoped with .art, except .posts.rows.
   Owners: blog page builder (blog-notes.md), motion: motion/blog-pass.md. The generator no longer writes any of this. */
/* head */
.art .phero.has-media{padding-bottom:clamp(28px,4vw,48px)}
.art .phero h1{font-size:clamp(1.9rem,3.1vw,2.6rem);line-height:1.1;max-width:26ch}
.art .phero .art-tt{display:grid;gap:18px;justify-items:start;min-width:0}
.art .phero .art-tt > *{margin:0}
.art .phero .meta{display:flex;flex-wrap:wrap;gap:4px 20px;font-variant-numeric:tabular-nums}
.art .phero .lede{max-width:34em}
.art .phero-media img{object-position:var(--op,50% 50%)}
/* from 980 px: the back link on its own row; under it the title block and the cover share one row, so the cover starts on the
   title's first line and ends on the excerpt's last (its height follows the text, never less than 320 px; a shorter text block
   is centred against it) */
@media (min-width:980px){
  .art .phero.has-media .phero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto 1fr;align-items:stretch;row-gap:8px}
  .art .phero-tx{display:contents}
  .art .back{grid-column:1;grid-row:1;justify-self:start}
  .art .phero .art-tt{grid-column:1;grid-row:2;align-content:center}
  .art .phero-media{grid-column:2;grid-row:2;position:relative;aspect-ratio:auto;min-height:320px}
  .art .phero-media img{position:absolute;inset:0}
}
@media (max-width:979px){.art .phero-media{aspect-ratio:16/10;max-width:640px;width:100%}}
@media (max-width:760px){.art .phero-media{border-radius:16px;--rr:16px}}
/* contents: a label + list in the side column; below 1020 px a closed box above the text */
.art .art-body{padding-top:0}
.art .toc-box > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;font-size:16px;font-weight:650;color:var(--light)}
.art .toc-box > summary::-webkit-details-marker{display:none}
.art .toc-box > summary svg{width:18px;height:18px;flex:none}
html[data-motion=full] .art .toc-box > summary svg{transition:rotate .2s var(--out)}   /* a turning chevron is travel: REDUCED flips at once */
.art .toc a{padding-block:6px}
@media (min-width:1020px){
  .art .doc > .toc-box{position:sticky;top:104px}
  .art .doc .toc{position:relative;top:auto;max-height:calc(100vh - 176px);scrollbar-width:thin}   /* no overscroll-behavior:contain here: in Chromium 148 it stops a wheel over the contents from ever scrolling the page, even when the list fits (measured: 0 px) */
  .art .toc-box > summary{margin-bottom:10px;cursor:default;pointer-events:none}
  .art .toc-box > summary svg{display:none}
}
@media (max-width:1019px){
  .art .toc-box{border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
  .art .toc-box > summary{min-height:56px;padding:0 18px;font-size:17px;cursor:pointer;border-radius:16px;-webkit-tap-highlight-color:rgba(242,241,236,.08)}   /* the default tap highlight is a blue band on charcoal */
  .art .toc-box[open] > summary svg{rotate:180deg}
  .art .toc-box .toc{margin:0 18px 16px}
}
/* text: the measure holds every block; only a table of five or more columns uses the whole column */
.art .prose{max-width:none}
.art .prose > *{max-width:var(--measure)}
.art .prose > .tbl-wide{max-width:none}
.art .tbl table{min-width:540px}                 /* a three-column table fits the measure; it scrolls only on phones */
.art .tbl-wide table{min-width:820px}            /* six columns: fits the wide column from 1280 px, scrolls inside its box below */
.art .tbl-wide th,.art .tbl-wide td{padding:12px 14px;font-size:16px}
.art .tbl td strong{font-weight:inherit;color:inherit}
.art .prose ul ul,.art .prose ol ul{margin-top:.45em}
.art .prose .qa strong:first-child{display:inline-block;margin-bottom:.2em}
.art .prose blockquote p{margin:0}
.art .prose blockquote em{font-weight:inherit}
.art .prose blockquote footer{margin-top:.7em;font-size:16px;line-height:1.4;font-weight:600;color:var(--text-2)}
/* e-mail template = a letter card (never monospace); [blanks] are marked */
.art .letter{padding:clamp(18px,2.4vw,26px);border-radius:16px;background:var(--navy-2);box-shadow:0 0 0 1px var(--line);font-size:17px;line-height:1.6;color:var(--text)}
.art .letter p{margin:0}
.art .letter p + p{margin-top:.9em}
.art .letter .subj{padding-bottom:14px;border-bottom:1px solid var(--line);font-weight:650;color:var(--light)}
.art .letter .slot{font-weight:600;color:var(--ochre-text)}
.art .prose .art-end{position:relative;display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:2.6em;padding-top:21px;font-size:16px;font-variant-numeric:tabular-nums}
.art .prose .art-end::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}   /* the closing rule is its own element, so it can draw */
.art .prose .art-end span:first-child{font-weight:650;color:var(--light)}
/* other posts: row cards (the same rules as on blog.html) */
.posts.rows{grid-template-columns:minmax(0,1fr);gap:0 48px}
.posts.rows .post{grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:start;padding:20px 0}
.posts.rows .post::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%;pointer-events:none}   /* the row's hairline is its own element, so it can draw */
.posts.rows .post .frame{aspect-ratio:4/3;border-radius:var(--r)}
.posts.rows .post h3{font-size:1.0625rem;line-height:1.25;text-wrap:pretty}
.posts.rows .post .meta{gap:2px 20px;font-variant-numeric:tabular-nums}
.posts.rows .post p:not(.meta){display:none}
@media (min-width:480px){.posts.rows .post p:not(.meta){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}}
@media (min-width:760px){.posts.rows .post{grid-template-columns:168px minmax(0,1fr);gap:20px;padding:24px 0}.posts.rows .post h3{font-size:1.3rem}}
@media (min-width:980px){.posts.rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
.art .art-more .head{margin-bottom:clamp(18px,2.4vw,28px)}
.art .art-all{margin-top:clamp(20px,3vw,32px)}

/* ---- motion (page-local; the class protocol of shell/parts/motion.css: .tk-arm = start state set by script, .tk-on = play,
   .tk-now = no transition). Inside the text nothing readable is ever hidden: markers, rules and colour only ---- */
/* load, last beat: the contents and the first lines of the text (first view only; html.pg-late is set by the inline script above the body) */
html.pg-late:not(.go) .art .art-body > .wrap{opacity:0}
html.pg-late.go .art .art-body > .wrap{animation:fade .4s var(--out) .4s both}
/* list markers tick in reading order (diamonds and numerals; --dl per item is set by the page script). FULL: the diamond also grows in */
.art .prose > :is(ul,ol).tk-arm li::before{opacity:0}
html[data-motion=full] .art .prose > ul.tk-arm li::before{scale:.4}
.art .prose > :is(ul,ol).tk-on li::before{transition:opacity .3s var(--out) var(--dl,0ms),scale .3s var(--out) var(--dl,0ms)}
.art .prose > :is(ul,ol).tk-now li::before{transition:none}
/* letter card: the [blanks] are plain until the card arrives, then light up one after another and stay (their rest colour) */
.art .letter.tk-arm .slot{color:var(--text)}
.art .letter.tk-on .slot{transition:color .3s var(--out) var(--dl,0ms)}
.art .letter.tk-now .slot{transition:none}
/* the closing rule draws */
.art .prose .art-end.tk-arm::before{transform:scaleX(0)}
.art .prose .art-end.tk-on::before{transition:transform .6s var(--ease)}
.art .prose .art-end.tk-now::before{transition:none}
/* other posts: the row's hairline draws (the thumbnail curtain and the text are tweens in the page script) */
.posts.rows .post.tk-arm::after{transform:scaleX(0)}
.posts.rows .post.tk-on::after{transition:transform .6s var(--ease) var(--dl,0ms)}
.posts.rows .post.tk-now::after{transition:none}

/* ---- the typographic cover (.cv): the blog's cover, drawn in the page as live text (lib/marketing/blog-cover.ts; owner, 10 Oct: no
   photo in the blog). It stands where a photo's <img> stood (figure.phero-media.cvr, div.frame.cvr) and takes every rule the shell
   gives that <img>: it fills the box, settles with the page hero (FULL), eases on hover (FULL). The drawing is 1200 x 900 and scales
   with the box WIDTH, centred vertically: a flatter box crops it the way object-fit:cover cropped the bitmap, a taller box shows more
   of the same tone and never cuts the keyword. Decorative (aria-hidden), not selectable; a card's stretched link lies above it. ---- */
.cvr{position:relative}
.cv{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--navy-2);-webkit-user-select:none;user-select:none;pointer-events:none}
/* a browser without aspect-ratio (Safari 14 and older) gave the photo's box its height from the <img> itself; the drawn cover is
   out of flow, so there the box gets its height from a spacer: 4:3, the featured card 16:9 */
@supports not (aspect-ratio:1/1){
  .cvr::before{content:"";display:block;padding-top:75%}
  .blog .feat .cvr::before{padding-top:56.25%}
}
.cv.t1{background:var(--navy-3)}
.cv.t2{background:var(--deep)}
.cv svg{position:absolute;left:0;top:50%;display:block;width:100%;height:auto;max-width:none;transform:translateY(-50%)}
.cv rect{fill:var(--ochre)}
.cv text{font-family:var(--font)}
.cv .cv-b{font-weight:800;font-stretch:112%;letter-spacing:-.035em;fill:var(--light)}
.cv .cv-b tspan{fill:var(--ochre)}
.cv .cv-c{font-size:50px;font-weight:520;font-stretch:104%;fill:#C9D2E6}
/* the load moment and the hover of a photo (site.css: .phero-media img, .frame.zoom img), for the drawn cover */
html[data-motion=full] .phero-media .cv{scale:1.1}
html[data-motion=full].go .phero-media .cv{animation:img-settle 1.3s var(--out) .06s both}
html[data-motion][data-arrive=again] .phero-media .cv,html[data-motion][data-arrive=again].go .phero-media .cv,
html[data-motion][data-arrive=back] .phero-media .cv,html[data-motion][data-arrive=back].go .phero-media .cv{scale:none;animation:none}
@media (hover:hover) and (pointer:fine){
  html[data-motion=full] .frame.zoom .cv{transition:scale .7s var(--out)}
  html[data-motion=full] .post:hover .frame.zoom .cv{scale:1.04}
}
/* ---- an article from the database (lib/marketing/blog-markdown.ts): the cases the nine launch posts do not have ---- */
.art .toc-box[hidden]{display:none}                                   /* a body without h2: no contents box; the text keeps its column */
@media (min-width:1020px){.art .doc > .toc-box[hidden] ~ .prose{grid-column:2}}
.art .phero .lede:empty{display:none}                                 /* a post without an excerpt */
.art .prose code{font:inherit;font-weight:600;color:var(--light)}     /* `inline code` = a quoted word, never monospace */
.art .prose figure img{margin:0}
/* a word longer than its line (a URL, a long compound in a title) breaks instead of widening the page: found with a 41-letter word in
   a title at 390 px (tools/blog-future-test.ts). Only where a line cannot hold the word; table cells keep their own layout */
.post h3,.post .stack > p,.blog .feat h2,.blog .feat-tx > p,.art .phero h1,.art .phero .lede,.art .toc a,
.art .prose > :is(p,h2,h3,ul,ol,blockquote),.art .letter{word-break:break-word;overflow-wrap:anywhere}

/* ---- shell/parts/legal.css ---- */
/* shell/parts/legal.css: the legal reading template (body class p-legal: İade Politikası, Gizlilik, Kullanım Şartları).
   Moved here by the integration pass (9 Oct) from three identical page <style> blocks; every selector is scoped with .p-legal.
   What stays in each page: --tail (the room under its last clause) and the window height from which the sibling links sit in the
   side column. Template owner: legal page builder (legal-notes.md); motion: motion/legal-pass.md. */
/* ---- legal reading template (.p-legal). Tokens, components and all motion come from the shell. The contents box follows the article
        template's (.art .toc-box): a label + list in the sticky side column from 1020 px, a closed box above the text below it. ---- */
/* head */
.p-legal .phero h1{max-width:none}
.p-legal .phero .meta{font-variant-numeric:tabular-nums}
/* İade: the three figures a worried buyer looks for. From 1020 px they stand on the document's own columns: the first over the side
   column, the divider 20 px before the text column, so the second figure and the text share one left edge */
.p-legal .lg-figs{margin-top:clamp(28px,3.4vw,44px)}
.p-legal .lg-figs > div{position:relative}
.p-legal .lg-figs b{font-size:clamp(1.4rem,1.9vw,1.65rem);white-space:nowrap}
.p-legal .lg-figs span{max-width:none}
.p-legal .lg-figs a::after{content:"";position:absolute;inset:0}   /* the whole cell is the link's target */
@media (min-width:1020px){.p-legal .lg-figs{grid-template-columns:264px repeat(2,minmax(0,1fr));max-width:calc(284px + var(--measure))}}
@media (max-width:640px){
  .p-legal .lg-figs > div{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 14px;padding:15px 0}
  .p-legal .lg-figs > div:last-child{border-bottom:1px solid var(--line)}
}
/* side: contents, then the two sibling documents */
.p-legal .lg-side{display:grid;gap:26px;align-content:start;min-width:0}
.p-legal .toc-box > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;font-size:16px;font-weight:650;color:var(--light)}
.p-legal .toc-box > summary::-webkit-details-marker{display:none}
.p-legal .toc-box > summary svg{width:18px;height:18px;flex:none}
html[data-motion=full] .p-legal .toc-box > summary svg{transition:rotate .2s var(--out)}
/* a numbered entry: the number hangs, a title that wraps stays on its own edge */
.p-legal .toc a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.4em;align-content:center;align-items:baseline;padding-block:8px}
.p-legal .toc .n{min-width:var(--nw,0px);text-align:right;font-variant-numeric:tabular-nums}   /* --nw: only where the numbers reach two digits */
.p-legal .toc .n + span{text-wrap:balance}
.p-legal .lg-sib{display:grid;justify-items:start;font-size:16px}
.p-legal .lg-sib p{margin:0 0 2px;line-height:1.3;font-weight:650;color:var(--light)}
.p-legal .lg-sib a{display:inline-block;padding-block:11px;line-height:1.35}   /* .link draws its underline on the content box: the tap height comes from padding */
.p-legal .lg-side .lg-sib{display:none}                             /* shown in the side column when it fits (per page, below) */
.p-legal .lg-sib-end{max-width:var(--measure);padding-top:20px;border-top:1px solid var(--line)}
@media (min-width:1020px){
  /* the column never outgrows the window: on a very short window it scrolls by itself (8 px of room for the focus ring).
     No overscroll-behavior:contain here (motion pass, 9 Oct): Chromium 148 applies it to a scroll container that does not overflow,
     so with the pointer over the contents the mouse wheel did not scroll the page at all (measured: 8 notches, scrollY 0) */
  .p-legal .doc > .lg-side{position:sticky;top:104px;max-height:calc(100vh - 120px);margin:-8px;padding:8px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--navy-3) transparent}
  .p-legal .doc .toc{position:relative;top:auto;max-height:none;overflow:visible}
  .p-legal .toc-box > summary{margin-bottom:10px;cursor:default;pointer-events:none}
  .p-legal .toc-box > summary svg{display:none}
  .p-legal .toc a{min-height:var(--row,36px);padding-block:6px}
  .p-legal .lg-sib a{padding-block:7px}
  .p-legal .lg-sib-end{grid-column:2}
  /* the contents marker names the clause the reader jumped to, in a window of any height. The shell lights the last entry whose
     heading has passed the reading line (30 % of the window), so:
     1. a jump lands the heading 60 px above that line (never under the nav): the clause is lit, the next one (the shortest clause
        is 135 px) is not. The shell's own 104 px + the page's scroll-padding (88 px) = 192 px is under the line in a window shorter
        than 640 px (the marker then names the clause before) and lets a short clause's successor pass the line in a tall one;
     2. there is room under the last clause for its heading to reach the line: --tail = what already follows that heading (its text +
        the footer), measured per page, less 23 px of safety */
  .p-legal .prose h2{scroll-margin-top:max(12px,calc(30vh - 148px))}
  .p-legal .lg-body{padding-bottom:max(var(--pad-tight),calc(70vh - var(--tail,440px)))}
}
@media (min-width:1020px) and (max-height:640px){.p-legal .toc a{min-height:32px;padding-block:4px}}   /* a short window: tighter contents rows */
@media (max-width:1019px){
  .p-legal .toc-box{border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
  .p-legal .toc-box > summary{min-height:56px;padding:0 18px;font-size:17px;cursor:pointer;border-radius:16px}
  .p-legal .toc-box[open] > summary svg{rotate:180deg}
  .p-legal .toc-box .toc{margin:0 18px 16px}
}
/* text */
.p-legal .prose :is(p,li){text-wrap:pretty}
@media (max-width:1019px){.p-legal .prose h2{scroll-margin-top:28px}}   /* below 1020 px a jump lands 116 px from the top (88 px of scroll-padding + 28); from 1020 px see the side column's rule */
.p-legal .prose .sel{white-space:nowrap;user-select:all;-webkit-user-select:all}
/* label + value rows inside the text (the identity lines, the two contact channels): the label is quiet, the value is what is read */
.p-legal .prose ul.kv{display:block}
.p-legal .prose ul.kv > li{grid-template-columns:5.2em minmax(0,1fr);column-gap:18px;padding:13px 0}
@media (max-width:480px){.p-legal .prose ul.kv > li{grid-template-columns:4.7em minmax(0,1fr);column-gap:14px}}
.p-legal .prose ul.kv > li::before{content:none}
.p-legal .prose .kv b{font-size:16px;line-height:1.4;font-weight:500;font-stretch:100%;white-space:normal;color:var(--text-2)}
.p-legal .prose .kv span{font-size:inherit;line-height:1.45;font-weight:560;color:var(--light)}
.p-legal .prose .kv a{font-weight:inherit}

/* ---- motion (motion pass, 9 Oct) ---- */
/* the hand-off link (a clause that continues in a sibling document) is the shell's .link with its pumpkin line drawn at rest.
   .tk-arm is added by the page script only, and only while the link is still below the window (TK.fresh); .tk-on draws it */
.p-legal .prose a[data-lg-handoff]{text-decoration:none;background-size:100% 1.5px,100% 1.5px}
.p-legal .prose a[data-lg-handoff].tk-arm{background-size:0% 1.5px,100% 1.5px}
.p-legal .prose a[data-lg-handoff].tk-on{transition:background-size .45s var(--ease)}
.p-legal .prose a[data-lg-handoff].tk-now{transition:none}

/* ---- shell/parts/motion.css ---- */
/* talkinn site: motion director's additions to the shell (motion-spec-site.md). DROP-IN PART:
   copy to shell/parts/motion.css (build_site.py appends shell/parts/*.css to site/site.css, after the shell's own rules).
   Everything is keyed on html[data-motion=full|reduced] and html[data-arrive=first|again|back], both set by the head gate:
   if that script fails, nothing below hides anything. Uses only the shell's tokens and keyframes (fade, in-up, wipe-x, wipe-down). */

/* ============ 1. page hero: arrival variants (gate.js sets html[data-arrive]) ============
   first = the shell's load moment (unchanged, except the FULL curtain's curve below)
   again = the page was already seen in this session: one short fade, nothing travels (both tiers)
   back  = Back/Forward: the hero is complete at first paint */
/* FULL first view: an entrance uses the ease-out curve. With --io the photo was half open 630 ms after .go (measured); with --ease, 200 ms */
html[data-motion=full].go .phero-media{animation:media-open .9s var(--ease) .06s both}
html[data-motion=full].go .phero-media img,html[data-motion=full].go .phero-band .ph img{animation:img-settle 1.3s var(--out) .06s both}
/* app screenshots never scale (text softens while a bitmap is resampled) */
html[data-motion=full] .phero-media img.ui,html[data-motion=full].go .phero-media img.ui{scale:none;animation:none}

html[data-motion][data-arrive=again] .phero h1 .ln > span,html[data-motion][data-arrive=again].go .phero h1 .ln > span{transform:none;clip-path:none;animation:none}
html[data-motion][data-arrive=again].go .phero h1,html[data-motion][data-arrive=again].go .phero h1:not(:has(.ln)):not(.done){animation:fade .24s var(--out) both}
html[data-motion][data-arrive=again].go .phero [data-in]{animation:fade .24s var(--out) calc(var(--d,0) * .04s) both}
html[data-motion][data-arrive=again] .phero-media,html[data-motion][data-arrive=again] .phero-band .ph{clip-path:none;opacity:0}
html[data-motion][data-arrive=again].go .phero-media,html[data-motion][data-arrive=again].go .phero-band .ph{animation:fade .28s var(--out) .04s both}
html[data-motion][data-arrive=again] .phero-media img,html[data-motion][data-arrive=again] .phero-band .ph img,
html[data-motion][data-arrive=again].go .phero-media img,html[data-motion][data-arrive=again].go .phero-band .ph img{scale:none;animation:none}

html[data-motion][data-arrive=back] .phero h1,html[data-motion][data-arrive=back] .phero [data-in],
html[data-motion][data-arrive=back].go .phero h1,html[data-motion][data-arrive=back].go .phero [data-in],
html[data-motion][data-arrive=back].go .phero h1:not(:has(.ln)):not(.done){opacity:1;animation:none}
html[data-motion][data-arrive=back] .phero h1 .ln > span,html[data-motion][data-arrive=back].go .phero h1 .ln > span{transform:none;clip-path:none;animation:none}
html[data-motion][data-arrive=back] .phero-media,html[data-motion][data-arrive=back] .phero-band .ph,
html[data-motion][data-arrive=back].go .phero-media,html[data-motion][data-arrive=back].go .phero-band .ph{clip-path:none;animation:none}
html[data-motion][data-arrive=back] .phero-media img,html[data-motion][data-arrive=back] .phero-band .ph img,
html[data-motion][data-arrive=back].go .phero-media img,html[data-motion][data-arrive=back].go .phero-band .ph img{scale:none;animation:none}

/* ============ 2. accordion: in REDUCED the plus becomes a minus by a fade (no rotation is ever seen) ============ */
html[data-motion=reduced] .acc .pm::after{transition:opacity .2s var(--out)}
/* the open item keeps the homepage's pumpkin marker (3 px bar) */
.acc details{position:relative}
.acc details::before{content:"";position:absolute;left:-18px;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--ochre);opacity:0;transition:opacity .2s var(--out)}
.acc details[open]:not(.closing)::before{opacity:1}
@media (max-width:760px){.acc details::before{left:-12px}}

/* ============ 3. pricing figures (TK.fig / TK.badge) ============ */
[data-fig]{display:inline-grid;font-variant-numeric:tabular-nums;white-space:nowrap}
[data-fig] > .pv{grid-area:1/1;text-align:end}
[data-fig].rolling{clip-path:inset(0 -1px)}                     /* the roll's mask: a clip, so the baseline and the layout never change */
[data-fig][data-hide]{visibility:hidden}                        /* a figure with nothing to show keeps its box */
.tk-warm{transition:background-color .42s ease-out}
.tk-warm.flash{background-color:#FFA868;transition:none}        /* REDUCED emphasis: the discount badge warms once, colour only */

/* ============ 4. forms: the message row is always reserved, so validation never moves the layout ============ */
.field .msg{display:block;line-height:1.5;min-height:1.5em;opacity:0;transition:opacity .16s var(--out)}   /* min-height = exactly one line of its own line-height */
.field.bad .msg{opacity:1}
html[data-motion=full] .field .msg{translate:0 -4px;transition:opacity .16s var(--out),translate .2s var(--out)}
html[data-motion=full] .field.bad .msg{translate:0 0}
[data-form-ok] [pathLength]{stroke-dasharray:1 2;stroke-dashoffset:0}   /* gap 2 + a start just past the dash: round caps leave no dot */
[data-form-ok].tk-in :is(circle,path,polyline,line){animation:tk-stroke .32s var(--out) .12s both}   /* by element name: Chrome does not re-match the camelCase attribute selector when .tk-in arrives after the note's style was computed (integration, 9 Oct) */
@keyframes tk-stroke{from{stroke-dashoffset:1.01}to{stroke-dashoffset:0}}

/* ============ 5. screen windows: a tall real screenshot behind a fixed window ([data-screen] on the .mat / .shotcard) ============ */
[data-screen] .shot,[data-screen] .vp{position:relative;overflow:hidden}
[data-screen] .screen-b{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none}
[data-key]{transition:color .2s var(--out)}

/* ============ 6. article reading progress: the nav hairline follows the article, not the whole document ============ */
.nav:has(.nav-prog.art) .nav-prog:not(.art){display:none}

/* =====================================================================================================================
   Motion director, 9 Oct (motion-spec-site.md §3-4): the designed moments of the subpages.
   CLASS PROTOCOL for CSS-driven moments: motion.js adds .tk-arm (the start state) only to content that is fresh (below the window) or
   still hidden by the hero's load moment, and always registers it with TK.pend. On play it swaps .tk-arm for .tk-on (the transitions
   below run); an instant play (keyboard focus, jumped past) adds .tk-now for one frame (no transition). No JS, no class: the rest state.
   ===================================================================================================================== */

/* ============ 7. level strip (.lvl): the program's range lights up. Line = a route traced at constant speed; dots follow it ============ */
.lvl li:not(.fill)::after{content:"";position:absolute;left:-3px;top:-3px;width:24px;height:24px;border-radius:999px;border:2px solid var(--ochre);opacity:0;pointer-events:none}
.lvl.tk-arm .fill{transform:scaleX(0)}
.lvl.tk-arm li.in-range::before{background:var(--navy);border-color:rgba(242,241,236,.5)}
.lvl.tk-arm li.in-range b{color:var(--text-2)}
.lvl.tk-on .fill{transition:transform .52s linear}
.lvl.tk-on li.in-range::before{transition:background-color .3s var(--out) var(--dl,0ms),border-color .3s var(--out) var(--dl,0ms)}
.lvl.tk-on li.in-range b{transition:color .3s var(--out) var(--dl,0ms)}
html[data-motion=full] .lvl.tk-on:not(.tk-now) li.in-range::after{animation:ring .7s var(--out) var(--dl,0ms)}
.lvl.tk-now .fill,.lvl.tk-now li::before,.lvl.tk-now li b{transition:none}
.lvl.tk-now li.in-range::before,.lvl.tk-now li.in-range b{transition:none}   /* same weight as the .tk-on rule above, later in the file: instant really is instant */
@media (max-width:640px){.lvl.tk-arm .fill{transform:scaleY(0)}}             /* the strip is a vertical route on phones (site.css): the line draws downward */

/* ============ 8. rail end node (Check-In): the last stop is the destination; its link is underlined when the line arrives ============ */
.stop[data-rail-end] .link{transition:background-size .26s var(--out) .12s}
.stop[data-rail-end].lit .link{background-size:100% 1.5px,100% 1.5px}

/* ============ 9. chain ([data-chain]): numbered discs light in order, each tile opens under its disc ============ */
[data-chain] .num{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--ochre);box-shadow:inset 0 0 0 3px var(--ochre);
  color:var(--ink-on-ochre);font-size:16px;font-weight:750;font-stretch:104%;line-height:1;font-variant-numeric:tabular-nums}
[data-chain] .num::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--ochre);opacity:0;pointer-events:none}
[data-chain-item].tk-arm .num{background:transparent;box-shadow:inset 0 0 0 3px rgba(242,241,236,.5);color:var(--light)}
[data-chain-item].tk-on .num{transition:background-color .3s var(--out),box-shadow .3s var(--out),color .3s var(--out)}
[data-chain-item].tk-now .num{transition:none}
html[data-motion=full] [data-chain-item].tk-on:not(.tk-now) .num::after{animation:ring .7s var(--out)}
[data-chain-line]{display:block;height:3px;border-radius:3px;background:var(--ochre);transform-origin:0 50%}

/* ============ 10. mark ([data-mark]): a pumpkin underline draws under a short phrase (never wraps) ============ */
[data-mark]{position:relative;white-space:nowrap}
[data-mark]::after{content:"";position:absolute;left:0;right:0;bottom:-.05em;height:max(2px,.06em);border-radius:2px;background:var(--ochre);transform-origin:0 50%}
[data-mark].tk-arm::after{transform:scaleX(0)}
[data-mark].tk-on::after{transition:transform .4s var(--ease)}
[data-mark].tk-now::after{transition:none}

/* ============ 11. checks drawn (.checks[data-checks], pricing "Pakete dahil"): each check draws left to right, in order ============ */
.checks.tk-arm li::before{clip-path:inset(0 100% 0 0)}
.checks.tk-on li::before{clip-path:inset(0 0 0 0);transition:clip-path .3s var(--out) var(--dl,0ms)}   /* the drawn state needs a shape: inset() -> none cannot be interpolated (integration, 9 Oct) */
.checks.tk-now li::before{transition:none}

/* ============ 12. contents marker ([data-toc]): one pumpkin bar that travels between entries (TK.glide) ============ */
.toc.has-mark a.on{border-left-color:rgba(242,241,236,.16)}
.toc-mark{position:absolute;left:0;top:0;width:3px;height:44px;background:var(--ochre);transform-origin:0 0;pointer-events:none}

/* ============ 13. pull quote in long text: the pumpkin rule draws top to bottom (the text is never hidden) ============ */
html[data-motion=full] .prose blockquote,html[data-motion=reduced] .prose blockquote{position:relative;border-left-color:transparent}
html[data-motion=full] .prose blockquote::before,html[data-motion=reduced] .prose blockquote::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--ochre);transform-origin:50% 0}
.prose blockquote.tk-arm::before{transform:scaleY(0)}
.prose blockquote.tk-on::before{transition:transform .5s var(--ease)}
.prose blockquote.tk-now::before{transition:none}

/* ============ 14. light pass: <mark> inside a lit row is plain text until it warms ============ */
[data-light] mark{background:none;color:inherit}

/* ============ 15. forms: a finished field confirms (a small check draws inside its right end); the program that came with the
   reader warms the select once; a sent form hands over to step 1 of "what happens next" ============ */
.field{position:relative}
.f-ok{position:absolute;right:16px;width:20px;height:20px;fill:none;stroke:var(--ochre-text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:0;transition:opacity .12s var(--out)}
.f-ok path{stroke-dasharray:1 2;stroke-dashoffset:1.01}
.field.ok .f-ok{opacity:1}
.field.ok .f-ok path{stroke-dashoffset:0}
html:not([data-motion=static]) .field.ok:not(.tk-now) .f-ok path{transition:stroke-dashoffset .24s var(--out)}
.field.ok :is(input,textarea){padding-right:46px}
.field .tk-pre{border-color:var(--ochre)!important;transition:none!important}
.field .tk-pre-out{transition:border-color .6s var(--out)!important}
.handed .stop:first-child h3,.handed .stop:first-child .name{color:var(--ochre-text);transition:color .3s var(--out)}
.handed.tk-now .stop:first-child h3,.handed.tk-now .stop:first-child .name{transition:none}
html[data-motion=full] .handed:not(.tk-now) .stop:first-child .dot::after{animation:ring .7s var(--out)}

/* ---- shell/parts/pricing.css ---- */
/* ===== pricing configurator ("Paketler ve fiyatlar") ===== owner: pricing engineer (.impeccable/team2/pricing-usage.md)
   Tokens, .btn, .lede, .sr-only, .wrap, .sec come from shell/site.css (the homepage's values). Nothing here carries a price:
   every figure is printed from <script type="application/json" id="pricing-data"> (build: shell/pricing_ssr.py, browser: pricing.js).
   Grounds: section = --navy, package rows = --deep (light 13.7:1, text-2 11.9:1). --text-3 is not used here; --ochre-text only
   for the "Popüler" ribbon (on --navy-3, about 6:1).
   Root classes (set by the builder and again by the script): .is-choice = a frequency control exists, .has-pay = at least one
   package carries a payment line (every row then reserves that line), .is-single = one fixed package; .no-mon, .is-compact and
   .is-cards come from a service's presentation switches (the two blocks before "Pakete dahil"). */
.pr,.incl{--pr-gap:clamp(40px,5vw,72px);--pr-cols:minmax(0,1fr)}
.pr{--c-unit:104px;--c-price:156px;--c-gap:14px;--pk-px:20px;display:grid;grid-template-columns:var(--pr-cols);row-gap:24px}
.pr-head{display:grid;gap:14px;align-content:start}
.pr-head h2{font-size:clamp(1.9rem,2.9vw,2.6rem)}
.pr-head .lede{max-width:44ch}
.pr-ctl{display:grid;gap:10px;align-content:start;justify-items:start;min-width:0}
.pr-leg{font-size:17px;line-height:1.3;font-weight:650;font-stretch:106%;color:var(--light)}
.pr-facts{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px;font-size:16px;line-height:1.45;color:var(--text-2)}
.pr-fixed{font-size:19px;line-height:1.3;font-weight:650;font-stretch:106%;color:var(--light)}

/* frequency: a segmented light-pill control made of native radios (arrow keys, one tab stop, no script needed for the state) */
.pr .seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(242,241,236,.45)}
.pr .seg label{position:relative;display:block;cursor:pointer}
.pr .seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pr .seg span{display:grid;place-items:center;min-width:88px;min-height:48px;padding:0 18px;border-radius:999px;font-size:16px;font-weight:600;word-spacing:.06em;white-space:nowrap;color:var(--light);font-variant-numeric:tabular-nums;transition:background-color .2s var(--out),color .2s var(--out)}
@media (hover:hover) and (pointer:fine){.pr .seg label:hover input:not(:checked) + span{background:rgba(242,241,236,.1)}}
.pr .seg input:checked + span{background:var(--light);color:var(--navy)}
.pr .seg input:focus-visible + span{outline:3px solid var(--ochre);outline-offset:3px}
/* FULL: the light pill glides (the homepage tabs' clip technique): a clone of the track painted fully selected, clipped to the checked segment */
.pr .seg-on{position:absolute;inset:4px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;pointer-events:none}
.pr .seg-on span{background:var(--light);color:var(--navy)}
.pr .seg.has-clone input:checked + span{background:transparent;color:var(--light)}

/* package rows: native radios again; the whole row is the label.
   Row grid: radio | identity | per session | monthly | price. With .has-pay a second line under the three figure columns carries the
   payment line, right-aligned under the price; a row without one keeps the line empty, so the figures of all rows share one height. */
.pr-main{min-width:0;container-type:inline-size;container-name:prmain}
.pr-list{position:relative;display:grid;gap:12px;margin:0;padding:0;border:0;min-width:0}
.pk{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) var(--c-unit) var(--c-unit) auto;grid-template-areas:"r id u1 u2 price";column-gap:var(--c-gap);align-items:center;min-height:116px;padding:18px var(--pk-px) 18px 20px;border-radius:20px;background:var(--deep);cursor:pointer}
.pk[hidden]{display:none}
.pk > input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.pk-radio{grid-area:r}.pk-id{grid-area:id}.pk-u1{grid-area:u1}.pk-u2{grid-area:u2}.pk-price{grid-area:price}.pk-pay{grid-area:pay}
.pk-ring{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;transition:box-shadow .2s var(--out)}
@media (hover:hover) and (pointer:fine){.pk:hover .pk-ring{box-shadow:inset 0 0 0 1px rgba(242,241,236,.45)}
  .pr.is-cards .pk.is-pop:hover > input:not(:checked) ~ .pk-ring{box-shadow:inset 0 0 0 1px var(--ochre)}}   /* the popular card's own line, stronger */
.pk > input:checked ~ .pk-ring{box-shadow:inset 0 0 0 2px var(--light)}
.pk > input:focus-visible ~ .pk-ring{outline:3px solid var(--ochre);outline-offset:3px}
.pk-radio{width:22px;height:22px;border-radius:999px;box-shadow:inset 0 0 0 2px rgba(242,241,236,.5);display:grid;place-items:center;transition:box-shadow .2s var(--out)}
.pk-radio::after{content:"";width:10px;height:10px;border-radius:999px;background:var(--light);opacity:0;transition:opacity .15s var(--out)}
.pk > input:checked ~ .pk-radio{box-shadow:inset 0 0 0 2px var(--light)}
.pk > input:checked ~ .pk-radio::after{opacity:1}
.pk-id{display:grid;gap:4px;min-width:0}
.pk-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:30px}
.pk-dur{font-size:26px;font-weight:700;font-stretch:110%;line-height:1.15;letter-spacing:-.012em;color:var(--light);white-space:nowrap}
/* the selected package's frame. With the motion part it is ONE element that moves to the chosen row (TK.glide: FULL glides, REDUCED
   fades through, keyboard jumps); below 760 px (cards of different heights) and without the motion part each row's own ring is the frame */
.pk-mark{display:none}
@media (min-width:760px){
  .pr-list.has-mark .pk-mark{display:block;position:absolute;left:0;right:0;top:0;z-index:1;border-radius:20px;box-shadow:inset 0 0 0 2px var(--light);pointer-events:none}
  .pr-list.has-mark .pk > input:checked ~ .pk-ring{box-shadow:inset 0 0 0 1px var(--line)}
}
/* the discount slot: the pumpkin badge and the plain no-discount label share one cell, so a change between them is a crossfade in place */
.pk-slot{display:inline-grid;align-items:center;justify-items:start;min-height:28px}
.pk-slot > *{grid-area:1/1;transition:opacity .16s var(--out)}
.pk-slot > [data-hide]{opacity:0;visibility:hidden;transition:opacity .09s linear,visibility 0s linear .09s}
.pk-badge{display:inline-grid;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:var(--ochre);color:var(--screen);font-size:15px;font-weight:700;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.pk-plain{font-size:16px;font-weight:500;line-height:1.3;color:var(--text-2);white-space:nowrap}
.pk-vol{display:grid;justify-items:start;font-size:16px;line-height:1.4;color:var(--text-2);font-variant-numeric:tabular-nums}
.pk-vol span{white-space:nowrap}
.pk-unit{display:grid;gap:1px;justify-items:end;text-align:right;min-width:0}
.pk-unit b{font-size:21px;font-weight:700;font-stretch:108%;line-height:1.2;color:var(--light);white-space:nowrap;font-variant-numeric:tabular-nums}
.pk-unit > span{font-size:16px;line-height:1.35;color:var(--text-2);white-space:nowrap}
.pk-price{display:grid;gap:2px;justify-items:end;text-align:right;min-width:var(--c-price);padding-left:var(--c-gap);border-left:1px solid var(--line)}
.pk-was{min-height:21px;font-size:16px;line-height:1.3;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;transition:opacity .16s var(--out)}
.pk-was s{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(242,241,236,.75)}
.pk-was[data-hide]{opacity:0;visibility:hidden;transition:opacity .09s linear,visibility 0s linear .09s}
.pk-now{font-size:30px;font-weight:750;font-stretch:108%;line-height:1.05;letter-spacing:-.012em;color:var(--light);white-space:nowrap;font-variant-numeric:tabular-nums}
/* the payment line ("Kredi kartına 4 taksit, vade farksız"): only where the data carries one */
.pk-pay{display:none;align-items:center;gap:8px;font-size:16px;line-height:1.4;color:var(--text-2);white-space:nowrap;transition:opacity .16s var(--out)}
.pk-pay svg{flex:none;width:18px;height:18px}
.pk-pay[data-hide]{opacity:0;visibility:hidden;transition:opacity .09s linear,visibility 0s linear .09s}
.pr.has-pay .pk-pay{display:inline-flex}
/* from 760 px the right side of a row sits on the identity's own lines: figure = the duration's baseline, the two labels and the price
   = the sessions line, the payment line = the hours line (measured: within 0.5 px). The label and the price share one baseline in
   every variant (.pk-unit is as tall as .pk-price) */
@media (min-width:760px){
  .pk-unit{gap:5px;padding:2px 0 1px}
  .pr.has-pay .pk{grid-template-areas:"r id u1 u2 price" "r id pay pay pay";grid-template-rows:auto 22.4px;align-content:center}
  .pr.has-pay .pk-pay{justify-self:end;height:22.4px}
  .pr.has-pay .pk-unit,.pr.has-pay .pk-price{align-self:end}
  }
/* figures written by TK.fig (shell/parts/motion.css [data-fig]): they keep the alignment of their column while they roll */
.pk [data-fig] > .pv{text-align:inherit}
.pk-was s[data-fig] > .pv{text-decoration:inherit}
/* a change made from the keyboard is instant; so is everything in STATIC */
.pr[data-kb] .seg span,.pr[data-kb] .pk-ring,.pr[data-kb] .pk-radio,.pr[data-kb] .pk-radio::after,.pr[data-kb] .pk-slot > *,.pr[data-kb] .pk-was,.pr[data-kb] .pk-pay,
html[data-motion=static] .pr .seg span,html[data-motion=static] .pk-ring,html[data-motion=static] .pk-radio,html[data-motion=static] .pk-radio::after,html[data-motion=static] .pk-slot > *,html[data-motion=static] .pk-was,html[data-motion=static] .pk-pay{transition:none}

/* the row is not a choice (Check-In's single package, the corporate line) */
.pk.is-fixed{cursor:default;grid-template-columns:minmax(0,1fr) var(--c-unit) var(--c-unit) auto;grid-template-areas:"id u1 u2 price"}
.pr.has-pay .pk.is-fixed{grid-template-areas:"id u1 u2 price" "id pay pay pay"}
.pk.is-fixed .pk-ring{box-shadow:inset 0 0 0 1px var(--line-2)}
.pk.is-corp,.pr.has-pay .pk.is-corp{cursor:default;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id cta";grid-template-rows:auto;min-height:0;margin-top:28px;padding-top:18px;padding-bottom:18px;background:transparent}
.pk.is-corp .btn{grid-area:cta}
.pk.is-corp .pk-ring{box-shadow:inset 0 0 0 1.5px rgba(242,241,236,.28)}
.pk.is-corp .pk-dur{font-size:21px}
.pk-corp{font-size:16px;line-height:1.4;color:var(--text-2)}
.pk.is-corp .btn{min-height:48px;padding:0 22px}

/* selection summary + the one buy button. The two sentences sit on one line where both always fit, else on two fixed lines:
   the summary never changes height with the choice */
.pr-sum{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:18px;padding-left:20px}
.pr-sum p{flex:1 1 0;display:grid;gap:1px;min-width:0}
.pr-sum .btn{flex:none}
.pr-sum b{font-size:19px;line-height:1.3;font-weight:650;font-stretch:106%;color:var(--light);font-variant-numeric:tabular-nums}
.pr-sum-l{font-size:16px;line-height:1.45;color:var(--text-2);font-variant-numeric:tabular-nums}
/* each sentence keeps its line even when it is empty (a package without a discount has no second sentence): the summary
   never changes height with the choice. From 720 px of container width the two are inline and the min-height does nothing */
.pr-sum-l > span{display:block;min-height:1.45em;white-space:nowrap}
@container prmain (min-width:720px){.pr-sum-l > span{display:inline}}
.pr-foot{display:grid;gap:6px;padding-left:20px;font-size:16px;line-height:1.5;color:var(--text-2)}

/* layout */
@media (min-width:1100px){
  .pr,.incl{--pr-cols:276px minmax(0,1fr);--pr-gap:40px}
  .pr{grid-template-rows:auto auto 1fr;column-gap:var(--pr-gap);row-gap:28px}
  .pr-head{grid-area:1/1}.pr-ctl{grid-area:2/1}.pr-main{grid-area:1/2/4/3}
  /* the notes close the left column, bottom-aligned. Where the left column is the taller one (several notes in a narrow
     column) it ends below the buy row; where the right one is taller the notes end on the button's bottom edge */
  .pr-foot{grid-area:3/1;align-self:end;padding-left:0}
}
@media (min-width:1280px){
  .pr,.incl{--pr-cols:minmax(0,1fr) minmax(0,2.2fr);--pr-gap:clamp(40px,5vw,72px)}
  .pr{--c-unit:118px;--c-price:172px;--c-gap:18px;--pk-px:24px}
}
@media (min-width:760px) and (max-width:1099px){
  .pr-ctl{grid-template-columns:auto auto 1fr;align-items:center;column-gap:16px}
  .pr-facts{margin:0;justify-self:end;text-align:right}
}
@media (max-width:759px){
  .pr{row-gap:20px}
  /* the choice stays reachable while the four cards scroll under it (sticky = no script, no motion) */
  .pr.is-choice .pr-ctl{position:sticky;top:76px;z-index:5;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;margin:0 calc(-1 * var(--gut));padding:10px var(--gut);background:var(--navy);box-shadow:0 1px 0 var(--line)}
  .pr.is-choice .pr-leg{font-size:16px;max-width:6em}
  .pr.is-choice .pr-facts{display:none}
  .pr .seg span{min-width:0;padding:0 16px}
  .pk,.pr.has-pay .pk{grid-template-columns:22px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"r id id" ". price price" ". u1 u2";column-gap:14px;row-gap:12px;align-items:start;min-height:0;padding:18px 18px 16px 16px}
  .pr.has-pay .pk.pay-slot{grid-template-areas:"r id id" ". price price" ". pay pay" ". u1 u2"}
  .pr.has-pay .pk:not(.pay-slot) .pk-pay{display:none}
  .pr.has-pay .pk-pay{justify-self:start;margin-top:-6px}
  /* narrow phones (close, 10 Oct): the payment line is 262 px on one line and the card leaves 210 px at 320 (it stood 14 px out of the
     page there, and out of the card up to 359 px): a touch smaller, and it may take a second line. Constant per card, so nothing moves
     when the frequency changes. */
  .pk-radio{margin-top:4px}
  .pk-top{justify-content:space-between}
  .pk-slot{justify-items:end}
  .pk-dur{font-size:24px}
  .pk-price{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:12px;min-width:0;padding-left:0;border-left:0;text-align:left}
  .pk-was{min-height:0}
  .pk-now{font-size:28px}
  .pk-unit{justify-items:start;text-align:left;padding:10px 0 0;border-top:1px solid var(--line)}
  .pk-unit b{font-size:19px}
  .pk.is-fixed,.pr.has-pay .pk.is-fixed{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"id id" "price price" "u1 u2"}
  .pr.has-pay .pk.is-fixed.pay-slot{grid-template-areas:"id id" "price price" "pay pay" "u1 u2"}
  .pk.is-corp,.pr.has-pay .pk.is-corp{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "cta";row-gap:14px;padding:18px}
  .pk.is-corp .btn{justify-self:start}
  .pr-sum{flex-wrap:wrap;padding-left:0}
  .pr-sum p{flex:1 1 100%}
  .pr-foot{padding-left:0;margin-top:-4px}
  .pr-sum .btn{width:100%}
}
@media (max-width:374px){
  .pr.has-pay .pk-pay{font-size:15px;white-space:normal;align-items:flex-start;min-width:0}
  .pr.has-pay .pk-pay svg{margin-top:1.5px}
  .pr.has-pay .pk-pay > span,.pr.has-pay .pk-pay > span > .pv{min-width:0;white-space:normal}   /* the figure wrapper is a nowrap grid */
}
/* 320 px wide (close, 10 Oct): the three choices left 40 px for the question, whose first word needs 65: it ran into the control */
@media (max-width:339px){
  .pr .seg span{padding:0 10px}
  .pr.is-choice .pr-ctl{column-gap:8px}
}
@media (max-width:759px) and (max-height:480px){.pr.is-choice .pr-ctl{position:static}}

/* ---- a lighter list (owner, 12 Oct 2026; the switches are in the service's data, shell/pricing_ssr.py lists them) ----
   .no-mon     = no monthly column: identity | unit price | package price. Only together with payInRows:false (no instalment
                 line in the rows): the builder refuses the other combination. The corporate row (.is-corp) keeps its own grid
                 and its own type in both modes; only its right padding follows --pk-px, so its button stays on the rows' edge
   .is-compact = the whole block about a tenth smaller from tablet width up (the phone cards keep their type sizes) */
.pr.no-mon .pk:not(.is-corp){grid-template-columns:22px minmax(0,1fr) var(--c-unit) auto;grid-template-areas:"r id u1 price"}
.pr.no-mon .pk.is-fixed:not(.is-corp){grid-template-columns:minmax(0,1fr) var(--c-unit) auto;grid-template-areas:"id u1 price"}
@media (max-width:759px){
  /* phone card: identity, then the price, then ONE line "675 ₺ ders başına" */
  .pr.no-mon .pk:not(.is-corp){grid-template-columns:22px minmax(0,1fr);grid-template-areas:"r id" ". price" ". u1"}
  .pr.no-mon .pk.is-fixed:not(.is-corp){grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "price" "u1"}
  .pr.no-mon .pk-unit{display:flex;align-items:baseline;gap:8px}
}
@media (min-width:760px){
  .pr.is-compact{--c-unit:108px;--c-price:150px;--c-gap:16px;--pk-px:20px}
  .pr.is-compact .pr-head h2{font-size:clamp(1.7rem,2.6vw,2.35rem)}
  .pr.is-compact .pr-leg{font-size:16px}
  .pr.is-compact .seg span{min-width:80px;min-height:44px;padding:0 16px;font-size:15px}
  .pr.is-compact .pr-facts,.pr.is-compact .pr-foot,.pr.is-compact .pr-sum-l{font-size:15px}
  .pr.is-compact .pr-list{gap:10px}
  .pr.is-compact .pk:not(.is-corp){min-height:82px;padding:14px var(--pk-px) 14px 18px;border-radius:18px}
  .pr.is-compact .pr-list.has-mark .pk-mark{border-radius:18px}
  .pr.is-compact .pk-top{min-height:27px}
  .pr.is-compact .pk:not(.is-corp) .pk-dur{font-size:23px}
  .pr.is-compact .pk-slot{min-height:25px}
  .pr.is-compact .pk-badge{height:25px;padding:0 9px;font-size:14px}
  .pr.is-compact .pk-vol,.pr.is-compact .pk-unit > span,.pr.is-compact .pk-was{font-size:15px}
  .pr.is-compact .pk-was{min-height:20px}
  .pr.is-compact .pk-unit b{font-size:19px}
  .pr.is-compact .pk-now{font-size:27px}
  .pr.is-compact .pr-sum{margin-top:16px}
  .pr.is-compact .pr-sum b{font-size:17px}
}
@media (min-width:1280px){
  .pr.is-compact{--c-unit:116px;--c-price:160px;--c-gap:18px;--pk-px:22px}
}

/* ---- cards (owner's mockup, 14 Oct 2026): the packages of a frequency side by side ----
   .is-cards = the service sets layout "cards" (the builder refuses it with instalment lines in the rows, with hideMonthly and
   on a single package). One centred column: the heading, the frequency control, the frequency line and the facts, the cards
   (four columns from 1024 px, two below: the owner, 14 Oct, wants two side by side on tablets and phones too), the summary
   bar, the notes. A card: the "Seçili paket" row (painted on the chosen card only, as in the mockup: a short fade, instant
   from the keyboard and in STATIC), radio and duration, badge, count, the MONTHLY figure large with "/ ay", then the
   "Ders başına" and "Paket toplamı" lines. The popular package (popularMonths) carries a "Popüler" ribbon on its top edge and
   an orange line. Every card has the same boxes whatever its figures, so nothing moves when the frequency or the duration
   changes. */
.pr.is-cards{--pr-cols:minmax(0,1fr);max-width:1000px;margin-inline:auto;row-gap:20px}
.pr.is-cards .pr-head{justify-items:center;gap:10px;text-align:center}
.pr.is-cards .pr-head .lede{max-width:52ch}
.pr-fq{display:grid;justify-items:center;gap:2px;margin-bottom:24px;text-align:center}
.pr-fq-l{font-size:17px;line-height:1.4;font-weight:600;color:var(--light);font-variant-numeric:tabular-nums}
.pr-fq-f{font-size:15px;line-height:1.4;color:var(--text-2)}
.pr.is-cards .pr-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 12px}
.pr.is-cards .pk:not(.is-corp){display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:54px 16px 6px;border-radius:18px;text-align:center}
/* the radio stands level with the duration (centre of its 29.9 px line: 54 + 15 - 11) */
.pr.is-cards .pk-radio{position:absolute;top:58px;left:16px;grid-area:auto;margin:0}
.pr.is-cards .pk-id{justify-items:center;gap:6px}
.pr.is-cards .pk-top{flex-direction:column;justify-content:flex-start;gap:8px;min-height:0}
.pr.is-cards .pk-dur{font-size:26px}
.pr.is-cards .pk-slot{justify-items:center;min-height:28px}
.pr.is-cards .pk-vol{justify-items:center}
.pk-mo{display:grid;justify-items:center;gap:2px;margin:14px 0 16px}
.pk-mo b{font-size:34px;font-weight:750;font-stretch:108%;line-height:1.05;letter-spacing:-.012em;color:var(--light);white-space:nowrap;font-variant-numeric:tabular-nums}
.pk-mo-l{font-size:15px;line-height:1.3;color:var(--text-2)}
.pk-line,.pr.is-cards .pk-price{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;gap:10px;min-width:0;padding:12px 2px;border-top:1px solid var(--line);border-left:0;text-align:left}
.pk-line .pk-lab{font-size:15px;line-height:1.35;color:var(--text-2);white-space:nowrap}
.pk-line b{font-size:17px;font-weight:700;line-height:1.3;color:var(--light);white-space:nowrap;font-variant-numeric:tabular-nums}
.pk-tot{display:grid;justify-items:end}
.pk-tot > .pk-was{grid-row:1}   /* the total is first in the markup (heard right after its label); the struck total is painted above it */
.pr.is-cards .pk-price{align-items:center}   /* the label stands level with the middle of the two figures */
/* the struck figures say where the price came from (owner, 1 Nov 2026: "biraz daha görünür kıl"): full light, heavier, a thick line */
.pr.is-cards .pk-was{min-height:24px;font-size:17px;font-weight:500;line-height:1.4;color:var(--light)}
.pr.is-cards .pk-was s,.pk-mo-was s{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(242,241,236,.7)}
.pr.is-cards .pk-now{font-size:18px;font-weight:750;font-stretch:100%;letter-spacing:0;line-height:1.3}
.pk-mo-was{grid-row:1;min-height:24px;font-size:17px;font-weight:500;line-height:1.4;color:var(--light);white-space:nowrap;font-variant-numeric:tabular-nums;transition:opacity .16s var(--out)}
.pk-mo-was[data-hide]{opacity:0;visibility:hidden;transition:opacity .09s linear,visibility 0s linear .09s}
.pk-mo-was s[data-fig] > .pv{text-decoration:inherit}
.pr[data-kb] .pk-mo-was,html[data-motion=static] .pk-mo-was{transition:none}
/* the chosen card's pill, inside its frame above the duration (the mockup's place); 8 px under a "Popüler" ribbon */
.pk-tag{position:absolute;top:20px;left:50%;z-index:2;translate:-50% 0;display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;background:var(--navy-3);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;font-weight:600;line-height:1;color:var(--light);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s var(--out)}
.pk > input:checked ~ .pk-tag{opacity:1}
.pr[data-kb] .pk-tag,html[data-motion=static] .pk-tag{transition:none}
/* the popular package: a ribbon on the card's top edge (above the travelling frame) and, while it is not the chosen one, an
   orange line round the card (chosen, it has the white frame like any other). "Popüler" is part of the radio's name (a fact about the package, not a state) */
.pk-pop{position:absolute;top:-12px;left:50%;z-index:2;translate:-50% 0;display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;background:var(--navy-3);box-shadow:inset 0 0 0 1px var(--ochre);font-size:14px;font-weight:600;line-height:1;color:var(--ochre-text);white-space:nowrap;pointer-events:none}
.pr.is-cards .pk.is-pop > input:not(:checked) ~ .pk-ring{box-shadow:inset 0 0 0 1px rgba(253,128,46,.6)}   /* chosen, it takes the white frame */
/* the campaign's cards (owner, 1 Nov 2026): a red ribbon on the top edge, a red badge and, while not chosen, a red line round the card; chosen, the white frame like any other */
.pk-camp{position:absolute;top:-12px;left:50%;z-index:2;translate:-50% 0;display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;background:var(--camp);font-size:14px;font-weight:700;line-height:1;color:#fff;white-space:nowrap;pointer-events:none}
.pk-camp[hidden]{display:none}
.pr.is-cards .pk.is-camp > input:not(:checked) ~ .pk-ring{box-shadow:inset 0 0 0 1.5px var(--camp-line)}
.pk.is-camp .pk-badge{background:var(--camp);color:#fff}
.pk.is-camp .pk-badge.tk-warm.flash{background-color:#F0505C}
.pk.is-camp .pk-was s,.pk.is-camp .pk-mo-was s{text-decoration-color:var(--camp-line)}
@media (hover:hover) and (pointer:fine){.pr.is-cards .pk.is-camp:hover > input:not(:checked) ~ .pk-ring{box-shadow:inset 0 0 0 1.5px #FF8089}}
.pr.is-cards .pr-sum{margin-top:18px;padding:18px 20px 18px 24px;border-radius:18px;background:var(--deep);box-shadow:inset 0 0 0 1px var(--line)}
.pr.is-cards .pr-sum b{font-size:18px}
.pr-sum-sep{display:none}
@container prmain (min-width:720px){.pr-sum-sep{display:inline}}
.pr.is-cards .pr-foot{justify-items:center;gap:4px;padding-left:0;font-size:15px;text-align:center}
@media (min-width:760px){
  .pr.is-cards .pr-ctl{grid-template-columns:none;justify-items:center;row-gap:12px}
  .pr.is-cards .pr-list.has-mark .pk-mark{right:auto;border-radius:18px}
}
@media (min-width:1100px){
  .pr.is-cards{grid-template-rows:none;row-gap:20px}
  .pr.is-cards .pr-head{grid-area:1/1}.pr.is-cards .pr-ctl{grid-area:2/1}.pr.is-cards .pr-main{grid-area:3/1}
  .pr.is-cards .pr-foot{grid-area:4/1;align-self:start}
}
@media (max-width:1023px){.pr.is-cards .pr-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones: still two cards a row, smaller. A line puts its label above its figure (a 140 px card has no room for both on one
   line), everything centred */
@media (max-width:599px){
  .pr.is-cards .pr-list{gap:24px 10px}
  .pr.is-cards .pk:not(.is-corp){padding:46px 10px 4px;border-radius:16px}
  .pr.is-cards .pr-list.has-mark .pk-mark{border-radius:16px}
  .pr.is-cards .pk-radio{top:46px;left:10px}   /* level with the duration: 46 + 11.5 - 11 */
  .pk-tag,.pk-pop,.pk-camp{height:22px;padding:0 9px;font-size:13px}
  .pk-tag{top:17px}
  .pk-pop,.pk-camp{top:-11px}
  .pr.is-cards .pk-id{gap:4px}
  .pr.is-cards .pk-top{gap:6px}
  .pr.is-cards .pk-dur{font-size:20px}
  .pr.is-cards .pk-slot{min-height:24px}
  .pr.is-cards .pk-badge{height:24px;padding:0 8px;font-size:13px}
  .pr.is-cards .pk-vol{font-size:14px}
  .pk-mo{margin:10px 0 12px}
  .pk-mo b{font-size:24px}
  .pk-mo-l{font-size:13px}
  .pk-line,.pr.is-cards .pk-price{flex-direction:column;align-items:center;gap:1px;padding:8px 0;text-align:center}
  .pk-line .pk-lab{font-size:13px}
  .pk-line b{font-size:15px}
  .pr.is-cards .pk-now{font-size:16px}
  .pr.is-cards .pk-was{min-height:20px;font-size:14px}
  .pk-mo-was{min-height:20px;font-size:14px}
  .pk-tot{justify-items:center}
}
/* narrow phones (320 to 374 px): a 135 px card. A slightly smaller duration and monthly figure and the radio 2 px further out,
   so that with a reader's own text spacing (WCAG 1.4.12) "12 Ay" still clears its radio and "12.950 ₺" its block */
@media (max-width:374px){.pk-mo b{font-size:20px}.pr.is-cards .pk-dur{font-size:19px}.pr.is-cards .pk-radio{left:8px}}
@media (max-width:339px){.pk-camp{padding:0 7px;font-size:12px}}   /* "Kasım Kampanyası" clears a 135 px card by 6 px */

/* "Pakete dahil": what the member gets, in three groups; the columns continue the configurator's */
.incl{display:grid;grid-template-columns:var(--pr-cols);column-gap:var(--pr-gap);row-gap:20px;margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--line)}
.incl h3{font-size:1.5rem}
.incl-fig{display:none;margin:0}
.incl-g{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 24px;padding:18px 0;border-top:1px solid var(--line)}
.incl-g:first-child{padding-top:0;border-top:0}
.incl-g:last-child{padding-bottom:0}
.incl-g h4{margin:0;font-size:17px;line-height:1.45;font-weight:650;font-stretch:106%;color:var(--light)}
/* the lists are the shell's .checks (pumpkin check, 17 px text; the motion part draws the checks one after another) */
.incl-g .checks{gap:10px 28px}
@media (min-width:640px){.incl-g{grid-template-columns:132px minmax(0,1fr)}}
@media (min-width:760px) and (max-width:1099px){.incl-g .checks{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){
  .incl{grid-template-rows:auto 1fr}
  .incl h3{grid-area:1/1}.incl-groups{grid-area:1/2/3/3}
  /* one real artefact of the app under the heading (Konuşma Kulübü: the library card), at or below its natural pixels */
  .incl-fig{display:grid;gap:10px;grid-area:2/1;align-self:start;justify-items:start}
  .incl-fig img{display:block;width:100%;height:auto;border-radius:16px}
  .incl-fig figcaption{font-size:16px;line-height:1.4;color:var(--text-2)}
}