/* Learn Anything landing page, after specframe.co.uk: warm paper, ink, one teal accent, Manrope. Light and dark themes
   (html[data-theme], chosen by the visitor or their system). No gradients; motion respects reduced-motion. */
:root, [data-theme="light"]{--bg:#f1efe8; --bg2:#e9e6dd; --card:#fbfaf6; --ink:#111310; --ink2:#4e514b; --muted:#7a7d74; --line:rgba(17,19,16,.14); --line2:rgba(17,19,16,.24);
  --accent:#087986; --accent-ink:#ffffff; --dark:#111310; --on-dark:#f1efe8; --shadow:0 18px 40px rgba(17,19,16,.14); color-scheme:light}
[data-theme="dark"]{--bg:#0f1110; --bg2:#151816; --card:#1a1d1b; --ink:#f1efe8; --ink2:#b9bcb3; --muted:#8a8d84; --line:rgba(241,239,232,.12); --line2:rgba(241,239,232,.22);
  --accent:#45dce8; --accent-ink:#0b1314; --dark:#f1efe8; --on-dark:#111310; --shadow:0 18px 40px rgba(0,0,0,.45); color-scheme:dark}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 Manrope, system-ui, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .25s, color .25s}
a{color:inherit} img, svg, video{display:block} .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--bg); padding:8px 12px; border-radius:8px; z-index:100} .skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.btn{display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 22px; border-radius:10px; border:1px solid var(--line2); background:transparent; color:var(--ink); font:700 .95rem Manrope, sans-serif; text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform .15s, background .15s}
.btn:hover{transform:translateY(-1px)} .btn.dark{background:var(--dark); color:var(--on-dark); border-color:var(--dark)} .btn.accent{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)} .btn.light{background:var(--on-dark); color:var(--dark); border-color:var(--on-dark)}
.eyebrow{display:block; font:500 .74rem/1 'IBM Plex Mono', monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); margin-bottom:16px}
h1, h2{font-weight:700; letter-spacing:-.045em; margin:0} h2{font-size:clamp(2.1rem, 4.6vw, 3.6rem); line-height:1.04} h1 em, h2 em{font-style:normal; color:var(--accent)}
section{padding:110px clamp(20px, 3.2vw, 58px)}

/* nav: wordmark, centred links, theme and demo */
.nav{position:sticky; top:0; z-index:50; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; height:72px; padding:0 clamp(20px, 3.2vw, 58px); background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:1.08rem; letter-spacing:-.02em} .mark{width:28px; height:28px; color:var(--ink)}
.links{display:flex; gap:28px} .links a{text-decoration:none; font-size:.93rem; font-weight:500; color:var(--ink2); padding:4px 0; border-bottom:1.5px solid transparent} .links a:hover{color:var(--ink)} .links a[aria-current="page"]{color:var(--accent); border-color:var(--accent)}
.nav-end{display:flex; justify-content:flex-end; align-items:center; gap:10px} .nav .btn{height:40px; padding:0 18px; font-size:.88rem}
.theme-btn{width:40px; height:40px; border-radius:10px; border:1px solid var(--line2); background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer} .theme-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
[data-theme="light"] .theme-btn .sun, [data-theme="dark"] .theme-btn .moon{display:none}

/* hero: the line, the form, the shelf */
.hero{padding:84px 0 40px; text-align:center}
.hero h1{font-size:clamp(2.7rem, 6.6vw, 5.6rem); line-height:1; padding:0 20px}
.sub{max-width:620px; margin:22px auto 30px; color:var(--ink2); font-size:clamp(1.02rem, 1.4vw, 1.18rem); padding:0 20px}
.join{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:640px; margin:0 auto; padding:0 20px}
.join input[type=email], .join select{height:46px; border-radius:10px; border:1px solid var(--line2); background:var(--card); color:var(--ink); padding:0 14px; font:500 .95rem Manrope, sans-serif}
.join input[type=email]{flex:1 1 220px} .join select{flex:0 1 190px}
.form-note{flex-basis:100%; margin:4px 0 0; min-height:1.4em; font-size:.9rem; font-weight:600} .form-note.ok{color:var(--accent)} .form-note.err{color:#c2412d}
.micro{margin:12px 0 0; font-size:.88rem; color:var(--muted)} .micro a{color:var(--ink); font-weight:600}
.shelf{margin-top:56px; overflow:hidden; padding:24px 0 34px; direction:ltr}
.shelf-track{display:flex; gap:26px; width:max-content; padding-inline:13px; animation:slide 120s linear infinite} .shelf:hover .shelf-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.book{position:relative; flex:none; width:clamp(128px, 11vw, 172px); text-decoration:none; color:var(--ink2); text-align:center}
.book-cover{position:relative; display:block; aspect-ratio:2/3; border-radius:3px 8px 8px 3px; overflow:hidden; box-shadow:var(--shadow), inset 0 0 0 1px rgba(0,0,0,.04); transition:transform .3s}
.book:hover .book-cover{transform:translateY(-8px) rotate(-1deg)} .book-cover svg{position:absolute; inset:0; width:100%; height:100%}
.book-cover::before{content:""; position:absolute; inset:0 auto 0 0; width:6px; background:rgba(0,0,0,.25); z-index:1}
.book-flag{position:absolute; bottom:24px; right:7px; z-index:2; width:26px; height:26px; border-radius:50%; background:var(--card); display:grid; place-items:center; font:700 .56rem/1 Manrope, sans-serif; color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.18)}
.book b{display:block; margin-top:12px; font-size:.78rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* more ways to learn */
.ways, .library, .everyone{text-align:center}
.ways h2, .everyone h2{margin-bottom:46px}
.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; max-width:1180px; margin:0 auto; text-align:start} .cards.four{grid-template-columns:repeat(4, minmax(0,1fr))}
.card{border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:hidden} .card h3{margin:18px 20px 4px; font-size:1.12rem; letter-spacing:-.02em} .card p{margin:0 20px 22px; color:var(--ink2); font-size:.92rem}
.card-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg2)} .card-media video{width:100%; height:100%; object-fit:cover; background:#000}
.card-media.covers{display:flex; align-items:center; justify-content:center; gap:0} .card-media.covers .mini{width:30%; aspect-ratio:2/3; border-radius:2px 6px 6px 2px; overflow:hidden; box-shadow:var(--shadow); transform:rotate(-6deg) translateX(10px)}
.card-media.covers .mini + .mini{transform:rotate(5deg) translateX(-10px) translateY(8px)} .card-media.covers .mini svg{width:100%; height:100%}
.card-media.ix{background:#05060a} .card-media.ix svg{width:100%; height:100%}
.links-row{display:flex; justify-content:center; gap:32px; margin:30px 0 0} .links-row a{font-weight:600; font-size:.94rem; text-decoration:none; border-bottom:1.5px solid var(--line2); padding-bottom:4px} .links-row a:hover{border-color:var(--ink)}

/* library search */
.library{background:var(--bg2); border-block:1px solid var(--line)} .library h2{margin-bottom:28px}
.ask-box{max-width:680px; margin:0 auto; display:flex; align-items:center; gap:12px; height:58px; padding:0 18px; border:1px solid var(--line2); border-radius:14px; background:var(--card); box-shadow:var(--shadow)}
.ask-box svg{width:20px; height:20px; fill:none; stroke:var(--ink2); stroke-width:2; flex:none} .ask-box input{flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:500 1.02rem Manrope, sans-serif}
.ask-results{max-width:680px; margin:14px auto 0; display:grid; gap:8px; text-align:start}
.res{display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); text-decoration:none} .res:hover{border-color:var(--accent)}
.rc{display:block; width:40px; aspect-ratio:2/3; border-radius:2px 4px 4px 2px; overflow:hidden; background:var(--bg2)} .rc svg{width:100%; height:100%} .res b{display:block; font-size:.96rem} .res span{font-size:.82rem; color:var(--ink2)}
.wish{padding:16px; border:1px dashed var(--line2); border-radius:12px; background:var(--card)} .wish p{margin:0 0 10px; color:var(--ink2); font-size:.92rem}
.wish form{display:flex; flex-wrap:wrap; gap:8px} .wish input[type=email]{flex:1 1 200px; height:42px; border-radius:10px; border:1px solid var(--line2); background:var(--bg); color:var(--ink); padding:0 12px; font:inherit} .wish .btn{height:42px}
.hint{max-width:620px; margin:22px auto 0; color:var(--muted); font-size:.9rem}

/* get inside it: the lens, loaded straight in (as on specframe.co.uk) */
.split-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:40px; align-items:end; max-width:1180px; margin:0 auto 34px} .split-head p{margin:0; color:var(--ink2); font-size:1.02rem}
.lens-stage{max-width:1180px; margin:0 auto; height:clamp(320px, calc(100svh - 280px), 620px); border:1px solid var(--line2); border-radius:18px; overflow:hidden; background:#d5d9d2}
.lens-stage iframe{display:block; width:100%; height:100%; border:0}
.lens-credit{display:flex; justify-content:space-between; gap:12px; max-width:1180px; margin:12px auto 0; padding:0 4px; color:var(--muted); font:500 .74rem/1.4 'IBM Plex Mono', monospace; letter-spacing:.04em; text-transform:uppercase} .lens-credit a{color:var(--ink2); white-space:nowrap}

/* every subject: real footage, small and quiet */
.every{border-top:1px solid var(--line)}
.clips{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; max-width:1180px; margin:0 auto}
.clip{position:relative; display:block; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--bg2); text-decoration:none; color:#fff}
.clip video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(.96); transition:transform .6s, filter .3s} .clip:hover video{transform:scale(1.03); filter:none}
.clip span{position:absolute; left:12px; bottom:12px; font:500 .68rem/1 'IBM Plex Mono', monospace; letter-spacing:.1em; text-transform:uppercase; background:rgba(17,19,16,.62); padding:6px 9px; border-radius:99px; backdrop-filter:blur(6px)}

/* everyone */
.people{text-align:center; background:var(--bg2); border-block:1px solid var(--line)} .people h2{margin-bottom:46px}
.who{display:grid; gap:8px; align-content:start; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); text-decoration:none; text-align:start; transition:border-color .15s, transform .15s} .who:hover{border-color:var(--accent); transform:translateY(-3px)}
.who b{font-size:1.15rem; letter-spacing:-.02em} .who span{color:var(--ink2); font-size:.92rem} .who i{font-style:normal; font-weight:700; font-size:.88rem; color:var(--accent); margin-top:6px}

/* final call */
.final{text-align:center; border-top:1px solid var(--line)} .final h2{max-width:820px; margin:0 auto 30px} .fine{margin:14px 0 0; color:var(--muted); font-size:.86rem}

/* inner pages: a centred title, then sections */
.page-hero{text-align:center; padding:84px clamp(20px, 3.2vw, 58px) 40px} .page-hero h1{font-size:clamp(2.5rem, 5.6vw, 4.6rem); line-height:1.02; max-width:980px; margin:0 auto}
.page-hero .sub{max-width:680px; margin:22px auto 0} .sub.small{font-size:1rem; margin:14px auto 28px; color:var(--ink2); max-width:620px}
.jump{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:28px} .jump a{height:38px; display:inline-flex; align-items:center; padding:0 16px; border-radius:99px; border:1px solid var(--line2); text-decoration:none; font-weight:600; font-size:.9rem} .jump a:hover{border-color:var(--ink)}
.note{color:var(--muted); font-size:.86rem; margin:18px 0 0}
.ticks{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px} .ticks li{position:relative; padding-inline-start:26px; color:var(--ink2); font-size:.95rem}
.ticks li::before{content:""; position:absolute; inset-inline-start:2px; top:.42em; width:12px; height:7px; border-inline-start:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg)}
[dir="rtl"] .ticks li::before{transform:rotate(45deg) scaleX(-1)}

/* screenshots of the real app */
.shot{margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--line2); background:#0d0f14; box-shadow:var(--shadow)} .shot img{width:100%; height:auto}
.steps{display:grid; gap:96px; max-width:1180px; margin:0 auto; padding-top:40px}
.step{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:center} .step:nth-child(even) .step-txt{order:2}
.step h2{font-size:clamp(1.6rem, 2.8vw, 2.3rem); line-height:1.1; margin-bottom:14px} .step p{margin:0; color:var(--ink2); font-size:1.02rem}
.step-n{display:block; font:500 .8rem 'IBM Plex Mono', monospace; color:var(--accent); margin-bottom:12px}
.step-txt > a, .band-txt > a{display:inline-block; margin-top:20px; font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--line2); padding-bottom:3px} .step-txt > a:hover{border-color:var(--ink)}
.step-txt > a::after{content:" →"} [dir="rtl"] .step-txt > a::after{content:" ←"}
.split-band{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center; max-width:calc(1180px + 2 * clamp(20px, 3.2vw, 58px)); margin:0 auto}
.band-txt h2{margin-bottom:16px; font-size:clamp(1.9rem, 3.4vw, 2.8rem)} .band-txt > p{color:var(--ink2); margin:0 0 6px} .band-txt .join{justify-content:flex-start; padding:0; margin-top:24px}

/* films */
.films{border-top:1px solid var(--line)} .film-row{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; max-width:1180px; margin:0 auto}
.film-row video{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; background:#000}

/* library */
.lib{padding-top:20px; max-width:calc(1240px + 2 * clamp(20px, 3.2vw, 58px)); margin:0 auto}
.lib-bar{display:flex; gap:10px; flex-wrap:wrap; justify-content:center} .ask-box.small{height:50px; max-width:520px; flex:1 1 320px; margin:0; box-shadow:none}
.lib-select{height:50px; border-radius:14px; border:1px solid var(--line2); background:var(--card); color:var(--ink); padding:0 14px; font:600 .92rem Manrope, sans-serif; flex:0 1 220px}
.chips{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:18px 0 6px}
.chips button{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px; border-radius:99px; border:1px solid var(--line2); background:var(--card); color:var(--ink2); font:600 .86rem Manrope, sans-serif; cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--dark); color:var(--on-dark); border-color:var(--dark)} .chips .fi{width:18px; height:13px; border-radius:2px; background-size:cover; box-shadow:0 0 0 1px rgba(0,0,0,.15)} .globe{font-size:1rem; line-height:1}
.lib-count{text-align:center; color:var(--muted); font:500 .78rem 'IBM Plex Mono', monospace; letter-spacing:.06em; text-transform:uppercase; margin:12px 0 26px}
.lib-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:30px 22px}
.lib-card{position:relative; display:grid; gap:4px; align-content:start; text-decoration:none; color:var(--ink)} .lib-card[hidden]{display:none}
.lib-cover{position:relative; display:block; aspect-ratio:2/3; border-radius:3px 8px 8px 3px; overflow:hidden; background:var(--bg2); box-shadow:var(--shadow); margin-bottom:10px; transition:transform .25s}
.lib-cover::before{content:""; position:absolute; inset:0 auto 0 0; width:6px; background:rgba(0,0,0,.22); z-index:1} .lib-cover svg{position:absolute; inset:0; width:100%; height:100%}
.lib-card:hover .lib-cover{transform:translateY(-6px)} .lib-flag{position:absolute; z-index:2; right:8px; bottom:8px; width:22px; height:16px; border-radius:3px; background-size:cover; box-shadow:0 0 0 1.5px var(--card)}
.lib-card b{font-size:.94rem; line-height:1.25; letter-spacing:-.01em} .lib-meta, .lib-size{font-size:.8rem; color:var(--ink2); line-height:1.35} .lib-size{color:var(--muted)}
.lib-badge{justify-self:start; margin-top:6px; font:500 .64rem 'IBM Plex Mono', monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid currentColor; padding:3px 7px; border-radius:99px}
.lib-wish{max-width:760px; margin:56px auto 0} .lib-wish.lit{border-color:var(--accent); border-style:solid} .lib-wish form input[name="query"]{flex:2 1 240px; height:42px; border-radius:10px; border:1px solid var(--line2); background:var(--bg); color:var(--ink); padding:0 12px; font:inherit}

/* tutors */
.prices{padding-top:20px} .price-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; margin:0 auto}
.price{display:grid; justify-items:center; gap:2px; padding:30px 20px; border:1px solid var(--line); border-radius:16px; background:var(--card)} .price .eyebrow{margin-bottom:8px}
.price b{font-size:clamp(2.6rem, 5vw, 3.6rem); letter-spacing:-.04em; line-height:1} .price > span:last-child{color:var(--ink2)}
.table-wrap{max-width:760px; margin:18px auto 0; overflow-x:auto}
.price-table{width:100%; border-collapse:collapse; font-size:.95rem} .price-table th, .price-table td{padding:12px 16px; border-bottom:1px solid var(--line); text-align:start} .price-table td{font-variant-numeric:tabular-nums; text-align:end}
.price-table thead th{font:500 .72rem 'IBM Plex Mono', monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} .price-table thead th:not(:first-child){text-align:end} .price-table tbody th{font-weight:600}
.faces-sec{border-top:1px solid var(--line)} .faces-sec .note{text-align:center}
.faces{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:26px 18px; max-width:1180px; margin:0 auto}
.face{margin:0; text-align:center} .face-img{position:relative; display:block; width:min(120px, 100%); aspect-ratio:1; margin:0 auto 12px} .face-img img{width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--bg2)}
.dot{position:absolute; right:6%; bottom:6%; width:16px; height:16px; border-radius:50%; background:#22a55a; box-shadow:0 0 0 3px var(--bg)}
.face b{display:block; font-size:.94rem} .face span{font-size:.8rem; color:var(--ink2)}
.how-session{text-align:center; background:var(--bg2); border-block:1px solid var(--line)} .how-session h2{margin-bottom:40px}
.four{list-style:none; counter-reset:n; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; max-width:1180px; margin:0 auto; padding:0; text-align:start}
.four li{counter-increment:n; display:grid; gap:8px; align-content:start; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--card)}
.four li::before{content:"0" counter(n); font:500 .8rem 'IBM Plex Mono', monospace; color:var(--accent)} .four b{font-size:1.08rem; letter-spacing:-.02em} .four span{color:var(--ink2); font-size:.92rem}

/* create */
.pkgs{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; max-width:1180px; margin:0 auto}
.pkg{display:grid; align-content:start; gap:6px; padding:26px 22px; border:1px solid var(--line); border-radius:16px; background:var(--card)} .pkg.on{border-color:var(--ink); box-shadow:var(--shadow)}
.pkg .eyebrow{margin-bottom:4px} .pkg-price{font-size:2.2rem; letter-spacing:-.04em; line-height:1.1} .pkg p{margin:4px 0 0; color:var(--ink2); font-size:.92rem}
.enquire{text-align:center; border-top:1px solid var(--line)}
.enquiry{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:720px; margin:0 auto; text-align:start}
.band-txt .enquiry{margin:24px 0 0; max-width:none}
.enquiry label{display:grid; gap:6px; font-size:.84rem; font-weight:600; color:var(--ink2)} .enquiry .wide{grid-column:1 / -1}
.enquiry input:not([type=checkbox]), .enquiry select, .enquiry textarea{width:100%; min-height:46px; border-radius:10px; border:1px solid var(--line2); background:var(--card); color:var(--ink); padding:10px 14px; font:500 .95rem Manrope, sans-serif}
.enquiry textarea{resize:vertical} .enquiry .check{display:flex; align-items:center; gap:10px; font-weight:500} .enquiry .check input{width:18px; height:18px; accent-color:var(--accent)}
.enquiry .btn{justify-self:start} .enquiry .form-note{grid-column:1 / -1}

/* footer with the paper-worlds illustration */
.foot{border-top:1px solid var(--line); padding:64px clamp(20px, 3.2vw, 58px) 0; overflow:hidden}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; max-width:1180px; margin:0 auto}
.foot-line{font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.12; letter-spacing:-.04em; font-weight:600; margin:22px 0 0} .foot-line em{font-style:normal; color:var(--accent)}
.foot nav{display:flex; gap:56px} .foot nav div{display:grid; gap:10px; align-content:start} .foot nav h2{font:500 .72rem 'IBM Plex Mono', monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.foot nav a{text-decoration:none; font-size:.94rem} .foot nav a:hover{color:var(--accent)}
.legal{max-width:1180px; margin:34px auto 0; color:var(--muted); font-size:.78rem; line-height:1.55}
.foot-art{width:calc(100% + 2 * clamp(20px, 3.2vw, 58px)); max-width:none; height:auto; margin:40px calc(-1 * clamp(20px, 3.2vw, 58px)) 0; display:block}
[data-theme="light"] .foot{background:#f5f2ea} [data-theme="dark"] .foot-art{filter:brightness(.86)}

/* the language picker (the app's, restyled for the site) */
.lang{position:relative}
.dd-btn{display:flex; align-items:center; gap:8px; height:40px; padding:0 10px; border:1px solid var(--line2); border-radius:10px; background:transparent; color:var(--ink); font:600 .86rem Manrope, sans-serif; cursor:pointer}
.dd-btn[aria-expanded="true"]{border-color:var(--ink)} .dd-btn b{font-weight:600; white-space:nowrap}
.dd-chev{display:inline-grid; width:14px; height:14px; color:var(--muted)} .dd-chev svg, .dd-tick svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round} .dd-btn[aria-expanded="true"] .dd-chev{transform:rotate(180deg)}
.dd-panel{position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60; width:460px; max-width:calc(100vw - 32px); max-height:min(72vh, 540px); overflow:auto; padding:8px; border:1px solid var(--line2); border-radius:16px; background:var(--card); box-shadow:0 24px 60px rgba(0,0,0,.22)}
.dd-panel[hidden]{display:none} .dd-title{font:500 .66rem 'IBM Plex Mono', monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:6px 8px 8px}
.dd-list{display:grid; grid-template-columns:1fr 1fr; gap:2px}
.dd-item{display:flex; align-items:center; gap:10px; padding:8px; border:0; border-radius:10px; background:none; color:var(--ink); font:inherit; text-align:start; cursor:pointer; min-width:0}
.dd-item:hover, .dd-item:focus-visible{background:var(--bg2); outline:none} .dd-item[aria-selected="true"]{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.dd-txt{display:grid; line-height:1.2; min-width:0} .dd-txt b{font-size:.88rem; font-weight:600} .dd-txt small{font-size:.72rem; color:var(--muted)}
.dd-tick{margin-inline-start:auto; width:16px; height:16px; color:var(--accent); flex:none}
.lang .fi{width:22px; height:16px; line-height:16px; border-radius:3px; background-size:cover; box-shadow:0 0 0 1px rgba(0,0,0,.15); flex:none} .dd-item .fi{width:26px; height:19px}

/* phone menu */
.menu-demo{display:none !important} .burger{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line2); background:transparent; color:var(--ink); place-items:center; cursor:pointer} .burger svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}

@media (max-width:1180px){ .links{gap:20px} }
@media (max-width:980px){
  .cards, .cards.four, .four, .pkgs{grid-template-columns:1fr 1fr} .split-head, .step, .split-band{grid-template-columns:1fr; gap:22px} .step:nth-child(even) .step-txt{order:0} .steps{gap:72px}
  .nav{grid-template-columns:1fr auto} .burger{display:grid}
  .links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; padding:8px clamp(20px, 3.2vw, 58px) 16px; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 18px 30px rgba(0,0,0,.08)}
  .nav.open .links{display:flex} .links a{padding:13px 0; font-size:1.02rem; border-bottom:1px solid var(--line)} .links a:last-child{border-bottom:0} .links a[aria-current="page"]{border-color:var(--line)}
  .clips{grid-template-columns:1fr 1fr} .film-row{grid-template-columns:1fr 1fr} .faces{grid-template-columns:repeat(4, minmax(0,1fr))}
}
@media (max-width:640px){
  section{padding:72px 18px} .hero{padding:52px 0 24px} .page-hero{padding:56px 18px 24px} .cards, .cards.four, .four, .pkgs, .enquiry{grid-template-columns:1fr} .join select{flex:1 1 100%}
  .nav{padding:0 16px; gap:10px} .nav .nav-demo{display:none} .nav.open .menu-demo{display:block !important; font-weight:700; color:var(--accent)}
  .chips{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; margin-inline:-18px; padding:0 18px 4px; scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chips button{flex:none} .lib-select{flex:1 1 100%} .dd-btn b{display:none} .dd-btn{padding:0 9px} .dd-list{grid-template-columns:1fr}
  .faces{grid-template-columns:repeat(3, minmax(0,1fr))} .lib-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 16px} .clips{gap:10px} .film-row{gap:10px}
  .foot nav{gap:32px} .links-row{flex-direction:column; gap:14px; align-items:center} .lens-stage{height:420px} .lens-credit{flex-direction:column; font-size:.64rem}
  .price-cards{gap:10px} .price{padding:22px 12px}
}
@media (prefers-reduced-motion:reduce){ .shelf-track{animation:none} html{scroll-behavior:auto} }

/* privacy and terms */
.legal-page{max-width:760px; margin:0 auto; padding:64px 20px 96px} .legal-page h1{font-size:clamp(2.2rem, 4.4vw, 3rem); margin:0 0 8px} .legal-page h2{font-size:1.3rem; letter-spacing:-.02em; margin:38px 0 8px}
.legal-page p, .legal-page li{color:var(--ink2)} .legal-page a{color:var(--accent)} .legal-page .meta{color:var(--muted); font-size:.9rem}
.legal-page table{width:100%; border-collapse:collapse; margin:12px 0; display:block; overflow-x:auto} .legal-page td, .legal-page th{border-bottom:1px solid var(--line); padding:10px 8px; text-align:start; vertical-align:top; color:var(--ink2); font-size:.92rem} .legal-page th{color:var(--ink)}

/* pricing */
.bill{display:inline-flex; gap:4px; padding:4px; margin-top:26px; border:1px solid var(--line2); border-radius:99px; background:var(--card)}
.bill button{height:36px; padding:0 16px; border:0; border-radius:99px; background:transparent; color:var(--ink2); font:600 .88rem Manrope, sans-serif; cursor:pointer} .bill button[aria-pressed="true"]{background:var(--dark); color:var(--on-dark)} .bill i{font-style:normal; color:var(--accent); font-weight:700} .bill button[aria-pressed="true"] i{color:inherit; opacity:.8}
.plans{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; max-width:1100px; margin:0 auto; padding-top:20px}
.plan{display:grid; align-content:start; gap:4px; padding:28px 24px; border:1px solid var(--line); border-radius:18px; background:var(--card)} .plan.on{border-color:var(--ink); box-shadow:var(--shadow)}
.plan-price{font-size:2.8rem; letter-spacing:-.045em; line-height:1.05; margin-top:6px} .plan-per{color:var(--muted); font-size:.86rem} .plan p{margin:12px 0 0; color:var(--ink2)} .plan .ticks{margin-bottom:22px} .plan .btn{margin-top:auto}
.also{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; max-width:1100px; margin:0 auto; padding-top:0}
.compare{text-align:center; border-top:1px solid var(--line)} .compare h2{margin-bottom:30px} .table-wrap.wide{max-width:860px} .compare .price-table td{text-align:center} .compare .price-table thead th:not(:first-child){text-align:center}
.faq{display:grid; gap:10px} .faq details{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:16px 18px} .faq summary{font-weight:700; cursor:pointer} .faq p{margin:10px 0 0; color:var(--ink2)}
@media (max-width:980px){ .plans, .also{grid-template-columns:1fr; max-width:520px} }
/* covers are drawn left to right in every language */
.lib-cover, .book-cover, .rc, .card-media.covers .mini{direction:ltr}