/* Maça Katıl — macakatil.com.tr
   White, a pale grey and black; one type family; an eight-point rhythm.
   Colour comes from the product. Motion settles rather than stops. */

:root {
  --ink:#1d1d1f; --ink-2:#424245; --dim:#6e6e73; --faint:#86868b; --hair:#d2d2d7; --panel:#f5f5f7;
  --green:#065F46; --lime:#CCF02F; --lime-ink:#0A3622; --pitch:#061E11;
  --display:"SF Pro Display",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --text:"SF Pro Text",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --settle:cubic-bezier(.16,1,.3,1); --glide:cubic-bezier(.32,.72,0,1); --open-hold:.5s; --open-time:1.5s; --open-curve:cubic-bezier(.5,0,.08,1); --open-step:60ms; --open-last:.45s; --spring:cubic-bezier(.2,.9,.24,1.06);
  --page:1120px; --gutter:24px; --r-l:36px;
  --space:clamp(96px,13vw,168px);
}
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body { background:#fff; color:var(--ink); font:400 17px/1.47 var(--text); letter-spacing:-0.012em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; overflow-x:clip; }
::selection { background:rgba(204,240,47,.55); }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #A8D600; outline-offset:3px; border-radius:10px; }
.wrap { max-width:calc(var(--page) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); }
/* A panel leaning back with the scroll is a little wider at its near edge; in a narrow window that must not widen the page.
   (clip, not hidden: nothing here may become a scroller, or what is stuck to the window would come unstuck.) */
main { overflow-x:clip; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:16px; top:16px; z-index:99; background:#fff; padding:10px 14px; border-radius:10px; }

/* ── Type ─────────────────────────────────────────────── */
h1,h2,h3 { font-family:var(--display); font-weight:700; text-wrap:balance; }
/* Turkish sets marks above and below its letters (ğ, ç, İ, ş): the lines of a headline need a little more room
   between them than English would, or the marks of one line touch the letters of the next. */
h1 { font-size:clamp(40px,6.7vw,80px); line-height:1.07; letter-spacing:-0.042em; }
h2 { font-size:clamp(34px,5vw,60px); line-height:1.03; letter-spacing:-0.035em; }
h3 { font-size:clamp(22px,2.2vw,26px); line-height:1.12; letter-spacing:-0.022em; font-weight:650; }
/* The second half of a headline steps back; it doesn't change voice. */
h1 em,h2 em { font-style:normal; color:var(--faint); }
/* The small name over a section's headline is one of the app's own tags: the logo's lime, its dark green on it. */
.eyebrow { display:inline-block; padding:7px 12px 7px; border-radius:999px; background:var(--lime); font:650 13px/1 var(--text); letter-spacing:.005em; color:var(--lime-ink); }
.lead { font-size:clamp(18px,1.7vw,21px); line-height:1.4; letter-spacing:-0.016em; color:var(--dim); text-wrap:pretty; }
.head { text-align:center; max-width:780px; margin:0 auto; }
.head .eyebrow { margin-bottom:18px; }
.head .lead { max-width:600px; margin:18px auto 0; }
section { padding-top:var(--space); }

/* ── Menu: Liquid Glass over the page ─────────────────── */
/* Clear glass: it takes its colour from what passes under it, blurs and brightens that, and carries light on its edge. */
.menu { position:fixed; top:12px; left:50%; z-index:30; transform:translateX(-50%); display:flex; align-items:center; gap:6px; height:52px; padding:0 7px 0 14px; border-radius:26px; color:var(--ink); white-space:nowrap; isolation:isolate;
  background:rgba(255,255,255,.52); -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.06); backdrop-filter:blur(26px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.45), inset 0 14px 18px -14px rgba(255,255,255,.8), 0 0 0 .5px rgba(0,0,0,.08), 0 10px 30px rgba(0,0,0,.12);
  transition:height .5s var(--settle); }
.menu .brand { display:flex; align-items:center; gap:9px; font:600 16px/1 var(--display); letter-spacing:-0.02em; padding-right:14px; }
.menu .brand img { width:28px; height:28px; transition:width .5s var(--settle), height .5s var(--settle); }
/* The name is the app's own wordmark (tools/site/marka.py), drawn, not typed: "maça" heavy, "katıl" light. */
.menu .brand .wordmark { display:block; height:25px; width:auto; fill:currentColor; transition:height .5s var(--settle); }
.menu nav { position:relative; display:flex; }
.menu nav a { position:relative; z-index:1; padding:9px 13px; border-radius:999px; font-size:14px; letter-spacing:-0.01em; color:var(--ink); }
/* The chosen one lies on a smaller piece of the same glass. There is only one such piece: it glides from name to name,
   taking each one's width as it goes, and settles the way things do on an iPhone. site.js says where and how wide. */
.menu .glider { position:absolute; left:0; top:50%; width:var(--w,0px); height:34px; margin-top:-17px; border-radius:999px; opacity:0; pointer-events:none; transform:translate3d(var(--x,0px),0,0);
  background:rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.08);
  transition:transform .6s var(--glide), width .6s var(--glide), height .5s var(--settle), margin-top .5s var(--settle), opacity .35s ease; }
.menu .glider.on { opacity:1; }
.menu.small .glider { height:30px; margin-top:-15px; }
.menu .get { margin-left:8px; background:var(--ink); color:#fff; border-radius:19px; padding:10px 17px; font:600 14px/1 var(--text); transition:transform .3s var(--settle), padding .5s var(--settle); }
.menu .get:active { transform:scale(.97); }
.menu.small { height:44px; }
.menu.small .brand img { width:22px; height:22px; }
.menu.small .brand .wordmark { height:21px; }
.menu.small .get { padding:7px 14px; }

/* ── Hero ─────────────────────────────────────────────── */
.hero { text-align:center; }
.hero-pin { padding:112px 0 0; overflow:hidden; overflow:clip; }
.hero h1 em { display:block; }
.hero .lead { max-width:720px; margin:22px auto 0; text-wrap:balance; }
.actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.button { display:inline-flex; align-items:center; gap:9px; height:54px; padding:0 26px; border-radius:999px; font:600 17px/1 var(--text); letter-spacing:-0.015em; transition:transform .35s var(--settle), background .25s, color .25s; }
.button:active { transform:scale(.97); transition-duration:.12s; }
/* The main button is black, as the one in the menu always was. */
.button.black { background:var(--ink); color:#fff; }
/* A store: its own badge, as Apple and Google draw it, once the app is there to be had. Until then it says so in
   plain words and leads nowhere. The badges are theirs and are shown as they come: the same height side by side,
   never recoloured, with a quarter of their height clear around them. */
.store { display:inline-flex; border-radius:9px; }
.store .badge { display:block; width:auto; height:40px; transition:transform .35s var(--settle); }
.store.big .badge { height:54px; }
.store:active .badge { transform:scale(.97); transition-duration:.12s; }
.store[aria-disabled="true"] { cursor:default; pointer-events:none; }
.store[aria-disabled="true"] .badge, .store:not([aria-disabled="true"]) .soon { display:none; }
.store[aria-disabled="true"] .button, .store[aria-disabled="true"] .pill { background:var(--panel); color:var(--faint); box-shadow:none; }

/* ── Getting it: a code at a desk, a single button on a phone ───────── */
/* Who is holding what is decided in store.js before the page is drawn. Someone unrecognised is offered everything. */
.ios .on-desktop, .ios .on-android, .android .on-desktop, .android .on-ios { display:none !important; }
.desktop.live .on-ios, .desktop.live .on-android { display:none !important; }
html:not(.live) .when-live { display:none !important; }
.get-app { display:flex; flex-direction:column; align-items:center; margin-top:28px; }
.get-app .actions { margin-top:0; }
.get-app .scan + .actions > * { margin-top:14px; }
.scan { display:flex; align-items:center; gap:22px; padding:8px 30px 8px 8px; border-radius:28px; background:var(--panel); text-align:left; }
/* The code keeps its own white ground and four modules of quiet round it, whatever it stands on. */
.scan .qr { flex:none; width:160px; height:160px; padding:18px; border-radius:20px; background:#fff; }
.scan .how { max-width:300px; }
.scan strong { display:block; font:650 20px/1.2 var(--display); letter-spacing:-0.022em; }
.scan .how span { display:block; color:var(--dim); font-size:15px; line-height:1.4; margin-top:6px; text-wrap:pretty; }
.stores { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.pill { display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair); font:600 13px/1 var(--text); letter-spacing:-0.005em; color:var(--ink); transition:transform .3s var(--settle); }
.pill:active { transform:scale(.97); }
.scan .store[aria-disabled="true"] .pill { background:rgba(0,0,0,.04); }
.stores { gap:10px; }
.scan.tall { flex-direction:column; gap:0; padding:0; background:none; text-align:center; }
.scan.tall .qr { width:220px; height:220px; padding:24px; border-radius:28px; box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 24px 48px -24px rgba(0,0,0,.18); }
.scan.tall .lead { max-width:360px; margin-top:26px; text-wrap:balance; }
.scan.tall .stores { justify-content:center; margin-top:20px; }

/* ── An iPhone, drawn ─────────────────────────────────── */
/* A thin black border round the display and a hairline of titanium; everything in proportion to its width, --w. */
.phone { --w:300px; position:relative; flex:none; width:var(--w); padding:calc(var(--w) * .026); border-radius:calc(var(--w) * .158); background:#060607; box-shadow:inset 0 0 0 1px #1c1c1e, 0 0 0 1.5px #b9babd, 0 0 0 2.5px #e6e7e9, 0 40px 70px -36px rgba(0,0,0,.34); }
.phone .screen { position:relative; aspect-ratio:1320 / 2868; border-radius:calc(var(--w) * .133); overflow:hidden; background:#f7f9fb; }
.phone img { width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.device { position:relative; margin:40px auto 0; padding:0 var(--gutter); }
/* Six of them, side by side across the window with air between them: none in front of another. While the page is at
   its top they stand in an arc, the two in the middle highest; --spread brings them level as it goes from 0 to 1.
   (In a narrow window they are a row to swipe through instead; see Narrow.) */
.phones { --pw:min(74vw,340px); --spread:1; display:flex; justify-content:center; align-items:flex-start; padding-bottom:40px; transform-origin:50% 0; will-change:transform; }
.phones .phone { --w:var(--pw); }
@media (min-width:901px) {
  .device { padding:0; }
  /* The row is wider than the window: the two at the ends run off its edges, three quarters of each in sight. */
  .phones { --pw:clamp(200px, calc(100vw / 5.775), 320px); gap:calc(var(--pw) * .055); }
  .phones .phone { transform:translate3d(0,calc((1 - var(--spread)) * var(--pw) * var(--drop,0)),0); will-change:transform; }
  .phones .phone:nth-child(2), .phones .phone:nth-child(5) { --drop:.2; }
  .phones .phone:nth-child(1), .phones .phone:nth-child(6) { --drop:.46; }
  /* How many places each stands from the middle: on the way up they begin further apart and draw in to their places. */
  .phones .phone:nth-child(1) { --slot:-2.5; } .phones .phone:nth-child(2) { --slot:-1.5; } .phones .phone:nth-child(3) { --slot:-.5; }
  .phones .phone:nth-child(4) { --slot:.5; } .phones .phone:nth-child(5) { --slot:1.5; } .phones .phone:nth-child(6) { --slot:2.5; }
  .js.loaded.screens .phones .phone { animation:phone-in var(--open-time) var(--open-curve) backwards; animation-delay:var(--phones-delay, calc(var(--open-hold) + var(--open-last))); }
  .js.no-opening .phones .phone { animation:none !important; }
}

/* ── Arrivals ─────────────────────────────────────────── */
.js .reveal { opacity:0; transform:translateY(26px) scale(.985); filter:blur(8px); transition:opacity 1s var(--settle), transform 1s var(--settle), filter 1s var(--settle); transition-delay:calc(var(--i,0) * 80ms); }
.js .reveal.in { opacity:1; transform:none; filter:none; }
/* Out of a blur. The few things that deserve an entrance of their own arrive a little large and out of focus, and
   settle into themselves. (Where the scroll leads them instead, site.js says "led" and they have no entrance of
   their own: see the rows of what people say.) */
.emerge { transition:opacity .8s ease, filter 1.1s var(--settle), transform 1.3s var(--settle); }
.js .emerge:not(.in) { opacity:0; filter:blur(18px); transform:scale(1.07); }
.js .lane.emerge:not(.in) { filter:blur(8px); transform:translateY(18px); }
.js .led .emerge, .js .led .emerge:not(.in) { opacity:1; filter:none; transform:none; transition:none; }
/* While the phone is still arriving it can be seen through: nothing may show behind it yet. */
.js .led.closed .lane { visibility:hidden; }
/* The opening. The menu is simply there. The icon begins large in the middle of the window, holds for half a second,
   and goes up to its place, shrinking as it goes; the words come up under it from below the window, each a little
   behind the one above, and the phones behind them, whole and as they will stay. Everything is on one curve, so nothing
   catches anything else up, and only transform and opacity move. The distances depend on the window: site.js measures
   them (--icon-y, --icon-k, --rise) and then says "loaded". About two and a half seconds from first to last. */
.hero-icon { display:block; width:72px; height:72px; margin:0 auto 14px; filter:drop-shadow(0 14px 26px rgba(84,112,0,.26)); }
.js .hero-icon { opacity:0; transform:translate3d(0,var(--icon-y,calc(50vh - 104px)),0) scale(var(--icon-k,3.4)); }
.js .hero-in { opacity:0; transform:translate3d(0,var(--rise,90vh),0); }
.js .device.hero-in { opacity:1; }
.js.loaded .hero-icon { opacity:1; transform:none; animation:hero-fade .32s ease-out backwards, hero-icon var(--open-time) var(--open-curve) var(--open-hold) backwards; }
.js.loaded .hero-in { opacity:1; transform:none; animation:hero-rise var(--open-time) var(--open-curve) backwards, hero-fade .5s linear backwards; animation-delay:calc(var(--open-hold) + var(--i,0) * var(--open-step)); }
/* The phones wait below the window until their screens have arrived (site.js then says "screens"), and come up sharp. */
.js.loaded:not(.screens) .device.hero-in { transform:translate3d(0,var(--rise,90vh),0); animation:none; }
.js.loaded.screens .device.hero-in { animation:hero-rise var(--open-time) var(--open-curve) backwards; animation-delay:var(--phones-delay, calc(var(--open-hold) + var(--open-last))); }
.defs { position:absolute; width:0; height:0; }
/* Come back to half-way down the page, there is no opening to play. */
.js.no-opening .hero-icon, .js.no-opening .hero-in { animation:none !important; }
@keyframes hero-fade { from { opacity:0; } }
@keyframes hero-icon { from { transform:translate3d(0,var(--icon-y,calc(50vh - 104px)),0) scale(var(--icon-k,3.4)); } to { transform:translate3d(0,0,0) scale(1); } }
@keyframes hero-rise { from { transform:translate3d(0,var(--rise,90vh),0); } to { transform:translate3d(0,0,0); } }
@keyframes phone-in { from { translate:calc(var(--pw) * var(--slot,0) * .17) 0; } }

/* The hero, where there is room and no objection to motion: the first screen stays put while the page is scrolled,
   the words let go of it, and the phones come up, grow and fall into line until all six stand whole in the window. */
.hero.pinned { height:calc(100vh + var(--travel,90vh)); }
.hero.pinned .hero-pin { position:sticky; top:0; height:100vh; padding-bottom:0; }
.hero.pinned .hero-copy { will-change:transform,opacity,filter; }
/* Pinned, a phone is no taller than the window can hold under the menu. */
.hero.pinned .phones { --pw:min(clamp(200px, calc(100vw / 5.775), 320px), calc((100vh - 112px) / 2.24)); }

/* ── What people say, passing by ──────────────────────── */
/* Two rows of cards across the whole window, one going each way, without end. A row is one set of cards and as many
   copies of it as the window needs (site.js makes them and says how wide a set is); the track slides exactly one set
   and starts again, so nothing is seen to jump. A row stops under the pointer or the keyboard, and all of it stops
   when it is out of sight. Without scripts, or with less motion asked for, a row is simply scrolled by hand. */
.voices .head { margin-bottom:0; }
/* How much of the rows is to be seen is two lengths: --r, how far out from the middle they are shown whole, and --f,
   how far beyond that they fade to nothing. As they stand here the rows reach both edges of the window. Where there is
   room and no objection to motion, site.js sets them by the scroll: nothing at first but the phone, then the cards
   nearest it, then the ones further out, as if they came out from behind it. */
.reviews { --r:45%; --f:5%; position:relative; display:grid; gap:16px; margin-top:40px; padding:60px 0; }
/* The app stands in the middle, a little taller than the three rows, and the cards pass behind it. A band of the
   page's own white round it means no card is ever seen touching it. */
.reviews .phone { --w:min(300px,26vw); position:absolute; left:50%; top:50%; z-index:2; pointer-events:none; margin:calc(var(--w) * -1.056) 0 0 calc(var(--w) / -2);
  box-shadow:inset 0 0 0 1px #1c1c1e, 0 0 0 1.5px #b9babd, 0 0 0 2.5px #e6e7e9, 0 0 0 20px #fff, 0 44px 80px -30px rgba(0,0,0,.4); }
.lane { overflow-x:auto; scrollbar-width:none; padding:0 var(--gutter); border-radius:16px;
  -webkit-mask-image:linear-gradient(90deg, transparent calc(50% - var(--r) - var(--f)), #000 calc(50% - var(--r)), #000 calc(50% + var(--r)), transparent calc(50% + var(--r) + var(--f)));
  mask-image:linear-gradient(90deg, transparent calc(50% - var(--r) - var(--f)), #000 calc(50% - var(--r)), #000 calc(50% + var(--r)), transparent calc(50% + var(--r) + var(--f))); }
.lane::-webkit-scrollbar { display:none; }
.lane:focus-visible { outline-offset:-3px; }
.track { display:flex; width:max-content; }
.set { display:flex; gap:16px; margin:0; padding:0 16px 0 0; list-style:none; }
.reviews.moving .lane { overflow:hidden; padding:0; }
.reviews.moving .track { animation:lane var(--time,56s) linear infinite; will-change:transform; }
.reviews.moving .back .track { animation-direction:reverse; }
@keyframes lane { to { transform:translate3d(calc(var(--set,50%) * -1),0,0); } }
.reviews.moving .lane:focus-within .track, .reviews.paused .track, .reviews.away .track { animation-play-state:paused; }
@media (hover:hover) { .reviews.moving .lane:hover .track { animation-play-state:paused; } }
.review { flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:14px; width:clamp(248px,23vw,308px); min-height:176px; padding:22px; border-radius:16px; background:var(--panel); }
.review p { font-size:16px; line-height:1.42; color:var(--ink); text-wrap:pretty; }
.review .by { margin-top:auto; padding-top:4px; display:flex; flex-direction:column; gap:2px; }
.review .by strong { font:600 14px/1.3 var(--text); letter-spacing:-0.01em; }
.review .by span { font-size:13px; line-height:1.3; color:var(--dim); }
.stars { display:flex; gap:2px; color:var(--ink); }
.stars svg { width:15px; height:15px; fill:currentColor; }
.stars .off { fill:var(--hair); }
.voices-foot { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:26px; }
.voices-foot .fine { margin-top:0; }
.pause { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 15px 0 13px; border-radius:999px; background:var(--panel); font:600 13px/1 var(--text); color:var(--ink-2); transition:transform .3s var(--settle); }
.pause:active { transform:scale(.97); }
.pause svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pause .i-play { display:none; fill:currentColor; stroke-width:1.4; }
.pause[aria-pressed="true"] .i-pause { display:none; }
.pause[aria-pressed="true"] .i-play { display:block; }
.fine.center { text-align:center; }

/* ── The match board, live ────────────────────────────── */
/* The app's own live session, drawn (tools/site/tahta.py) and played like a film by site.js: the captain drags two
   players, draws the pass and the cross, the ball follows, and whoever is speaking is lit. What is in the page is the
   film's last frame, which is what is shown without scripts or with less motion asked for. */
.court { display:flex; align-items:center; justify-content:center; gap:clamp(40px,7vw,104px); margin-top:56px; padding:clamp(40px,5vw,64px) clamp(24px,5vw,72px); border-radius:44px; background:#000; color:#f5f5f7; }
.court .phone { --w:min(330px,74vw); box-shadow:inset 0 0 0 1px #1c1c1e, 0 0 0 1.5px #55565a, 0 0 0 2.5px #2a2a2d; }
.court .screen { background:#061E11; }
.board { display:block; width:100%; height:100%; }
.cues { list-style:none; padding:0; display:flex; flex-direction:column; gap:34px; max-width:380px; }
.cues strong { display:block; font:700 clamp(28px,3.2vw,40px)/1.05 var(--display); letter-spacing:-0.035em; }
.cues span { display:block; margin-top:10px; color:#a1a1a6; font-size:clamp(17px,1.5vw,19px); line-height:1.42; letter-spacing:-0.016em; text-wrap:pretty; }
.cues li { transition:opacity .6s var(--settle); }
.cues.playing li:not(.on) { opacity:.42; }
.board .ring { stroke:rgba(204,240,47,0); stroke-width:2; transition:stroke .15s ease-in-out; }
.board .who.on .ring { stroke:#CCF02F; }
.board .glow { opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
.board.playing .who.on .glow { animation:voice 1.15s ease-out infinite; }
@keyframes voice { from { opacity:.55; transform:scale(1); } to { opacity:0; transform:scale(1.2); } }
.board .pen { stroke-dasharray:1; }
.board .hand { transition:transform .35s var(--spring), opacity .2s; }
.board .seg { transition:opacity .22s ease; }
.board .seg.off { opacity:0; }
.board .hand.off { opacity:0; transform:scale(.3); }
.board .lift { transform-box:fill-box; transform-origin:50% 30%; transition:transform .25s var(--settle); }
.board .tk.held .lift { transform:scale(1.14); }

/* ── Everything else, shown as it is ──────────────────── */
.marquee { position:relative; margin-top:40px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
.marquee div { display:flex; gap:10px; width:max-content; padding:5px 0; transform:translate3d(calc(var(--drift,0) * -1px - 6%),0,0); will-change:transform; }
.marquee div.back { transform:translate3d(calc(var(--drift,0) * 1px - 28%),0,0); }
.marquee span { background:var(--panel); border-radius:999px; padding:10px 18px; font:500 15px/1 var(--text); letter-spacing:-0.01em; color:var(--ink-2); }
/* The edges of the marquee are out of focus, so things arrive and leave the way everything here does. */
.marquee::before, .marquee::after { content:""; position:absolute; top:0; bottom:0; width:16%; z-index:1; pointer-events:none; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.marquee::before { left:0; -webkit-mask-image:linear-gradient(90deg,#000,transparent); mask-image:linear-gradient(90deg,#000,transparent); }
.marquee::after { right:0; -webkit-mask-image:linear-gradient(270deg,#000,transparent); mask-image:linear-gradient(270deg,#000,transparent); }

/* Two tiles to a row. Each has a piece of the app's own screen standing on its bottom edge: square where it meets it. */
.bento { display:flex; flex-direction:column; gap:20px; margin-top:56px; }
.bento .row { display:flex; gap:20px; }
.tile { position:relative; flex:var(--card) 1 72px; min-width:0; display:flex; flex-direction:column; background:var(--panel); border-radius:var(--r-l); padding:36px 36px 0; overflow:hidden; }
.tile.night { background:#000; color:#f5f5f7; }
.tile > p { color:var(--dim); font-size:17px; line-height:1.42; margin-top:10px; max-width:420px; text-wrap:pretty; }
.tile.night > p { color:#a1a1a6; }
.tile .art { margin-top:auto; padding-top:32px; display:flex; justify-content:center; }
/* The pieces are drawn, not photographed (tools/site/kutular.py): the app's own cards at their own size, sharp at any.
   Each comes up a moment after the one before it when its tile arrives, and then does one small thing of its own:
   the level bar fills and the badge that was won lands; the matches are counted; a topic gets a vote; on the board a
   player is moved and the pass to him is drawn, over and over while the tile is in sight. */
.kutu { display:block; width:min(100%,400px); height:auto; }
.tile .art.free { padding-bottom:40px; }
.js .tile .kutu .up { opacity:0; transform:translateY(16px); transition:opacity .7s var(--settle), transform .9s var(--settle); transition-delay:calc(.2s + var(--i,0) * 90ms); }
.js .tile.in .kutu .up { opacity:1; transform:none; }
.kutu .xp { transform-box:fill-box; transform-origin:0 50%; }
.js .tile .kutu .xp { transform:scaleX(0); transition:transform 1.5s var(--settle) .7s; }
.js .tile.in .kutu .xp { transform:none; }
.js .tile .kutu .pop { opacity:0; transform:scale(.4); transition:transform .6s var(--spring) 1.5s, opacity .25s 1.5s; }
.js .tile.in .kutu .pop { opacity:1; transform:none; }
.kutu .roll { transition:transform .5s var(--settle) 1.7s; }
/* The badges: the bar fills, the level turns over, and the badge in the middle is won: it lands with a burst of sparks
   and a light passes over it. Then it begins again. */
.kutu .xp-run { transform-box:fill-box; transform-origin:0 50%; animation:xp-run 9s cubic-bezier(.4,0,.2,1) infinite; }
.kutu .lv-up, .kutu .win, .kutu .spark { transform-box:fill-box; transform-origin:50% 50%; }
.kutu .lv-up { animation:lv-up 9s var(--spring) infinite; }
.kutu .win { animation:win 9s var(--spring) infinite; }
.kutu .spark { animation:spark 9s ease-out infinite; }
.kutu .shine { animation:shine 9s ease-in-out infinite; }
@keyframes xp-run { 0%, 5% { transform:scaleX(0); opacity:1; } 33%, 92% { transform:scaleX(1); opacity:1; } 97%, 100% { transform:scaleX(1); opacity:0; } }
@keyframes lv-up { 0%, 33% { opacity:0; transform:scale(.4); } 40%, 92% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:none; } }
@keyframes win { 0%, 45% { opacity:0; transform:scale(.55) rotate(-10deg); } 54%, 92% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:none; } }
@keyframes spark { 0%, 47% { opacity:0; transform:scale(.6); } 51% { opacity:1; transform:scale(.86); } 61%, 100% { opacity:0; transform:scale(1.12); } }
@keyframes shine { 0%, 60% { transform:translateX(0); } 74%, 100% { transform:translateX(340px); } }
.js .tile:not(.live) .kutu .xp-run, .js .tile:not(.live) .kutu .lv-up, .js .tile:not(.live) .kutu .win, .js .tile:not(.live) .kutu .spark, .js .tile:not(.live) .kutu .shine { animation-play-state:paused; }
.kutu .dot { transform-box:fill-box; transform-origin:50% 50%; }
.js .tile .kutu .dot { transform:scale(0); transition:transform .55s var(--spring); transition-delay:calc(.7s + var(--i,0) * 60ms); }
.js .tile.in .kutu .dot { transform:none; }
.kutu .play { transform-box:fill-box; transform-origin:0 50%; animation:reel 7s linear infinite; }
@keyframes reel { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.js .tile:not(.live) .kutu .play { animation-play-state:paused; }
.kutu .vote { transform-box:fill-box; transform-origin:50% 50%; }
.kutu .vote .disc { transition:fill .25s 1.7s, stroke .25s 1.7s; }
.kutu .vote .arrow { transition:stroke .25s 1.7s; }
.js .tile.in .kutu .roll { transform:translateY(-20px); }
.js .tile.in .kutu .vote { animation:tap .5s var(--spring) 1.62s; }
.js .tile.in .kutu .vote .disc { fill:#CCF02F; stroke:#CCF02F; }
.js .tile.in .kutu .vote .arrow { stroke:#0A3622; }
@keyframes tap { 40% { transform:scale(1.28); } }
.kutu .mv { animation:mv 7s cubic-bezier(.45,0,.2,1) infinite; }
.kutu .ln { stroke-dasharray:1; animation:ln 7s linear infinite; }
.kutu .ln.tip { animation-name:tip; }
@keyframes mv { 0%, 10% { transform:translate(0,0); } 30%, 88% { transform:translate(-66px,-104px); } 97%, 100% { transform:translate(0,0); } }
@keyframes ln { 0%, 34% { stroke-dashoffset:1; opacity:1; } 50%, 86% { stroke-dashoffset:0; opacity:1; } 93%, 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes tip { 0%, 50% { stroke-dashoffset:1; opacity:1; } 55%, 86% { stroke-dashoffset:0; opacity:1; } 93%, 100% { stroke-dashoffset:0; opacity:0; } }
.js .tile:not(.live) .kutu .mv, .js .tile:not(.live) .kutu .ln { animation-play-state:paused; }
/* Yellow and yellow make red. The cards are dealt one after another, the way a referee shows them: the first yellow,
   the second, and then the red turns to face you. Over and over, while the tile is in sight. */
.tile.wide { flex-direction:row; align-items:center; gap:clamp(24px,5vw,72px); padding-right:clamp(28px,5vw,72px); padding-bottom:36px; }
.tile.wide .words { flex:1 1 0; min-width:0; }
.tile.wide .words p { color:var(--dim); font-size:17px; line-height:1.42; margin-top:10px; max-width:420px; text-wrap:pretty; }
.tile.wide .art { flex:none; width:min(54%,540px); margin-top:0; padding-top:0; }
.tile.wide .kutu { width:100%; overflow:visible; }
.kutu .deal { transform-box:fill-box; transform-origin:50% 50%; animation:deal-1 8s var(--spring) infinite; }
.kutu .d2 { animation-name:deal-2; }
.kutu .red { animation-name:deal-red; }
.kutu .op { animation:op-1 8s ease infinite; }
.kutu .o2 { animation-name:op-2; }
@keyframes deal-1 { 0%, 5% { opacity:0; transform:translateY(-46px) rotate(-22deg) scale(.82); } 14%, 91% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:scale(.94); } }
@keyframes deal-2 { 0%, 27% { opacity:0; transform:translateY(-46px) rotate(20deg) scale(.82); } 36%, 91% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:scale(.94); } }
@keyframes deal-red { 0%, 54% { opacity:0; transform:scaleX(0) scaleY(.9); } 55% { opacity:1; transform:scaleX(0) scaleY(.9); } 64% { opacity:1; transform:scale(1.07) rotate(3deg); } 70%, 91% { opacity:1; transform:none; } 97%, 100% { opacity:0; transform:scale(.94); } }
@keyframes op-1 { 0%, 22% { opacity:0; } 28%, 91% { opacity:1; } 97%, 100% { opacity:0; } }
@keyframes op-2 { 0%, 46% { opacity:0; } 52%, 91% { opacity:1; } 97%, 100% { opacity:0; } }
.js .tile:not(.live) .kutu .deal, .js .tile:not(.live) .kutu .op { animation-play-state:paused; }

/* ── Side by side ─────────────────────────────────────── */
/* The app beside the others. A pale band from edge to edge; a plain table on it: a row to a thing, a
   hairline between rows, a tick where it is so and nothing where it is not. The ticks are drawn as the table arrives. */
.plans { margin-top:var(--space); padding:var(--space) 0; background:var(--panel); }
.plans .head .actions { margin-top:28px; }
.plans .head .lead { margin-top:14px; }
.compare { width:100%; max-width:980px; margin:clamp(40px,5vw,64px) auto 0; border-collapse:collapse; }
.compare th, .compare td { padding:0; }
.compare thead th { padding-bottom:20px; font:600 clamp(15px,1.6vw,19px)/1.2 var(--display); letter-spacing:-0.02em; text-align:center; vertical-align:bottom; color:var(--ink-2); }
.compare thead th.us { color:var(--ink); }
.compare tbody tr { border-top:1px solid var(--hair); }
.compare tbody th { padding:22px 16px 22px 0; text-align:left; font:600 clamp(17px,1.75vw,21px)/1.25 var(--display); letter-spacing:-0.02em; }
.compare td, .compare thead th:not(:first-child) { width:clamp(92px,13vw,150px); text-align:center; }
.compare .tick { display:inline-block; vertical-align:middle; width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.compare .us .tick { width:32px; height:32px; padding:6px; border-radius:50%; background:var(--lime); stroke:var(--lime-ink); stroke-width:2.8; }
.compare .tick path { stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset .55s var(--settle); transition-delay:calc(.35s + var(--r,0) * 70ms); }
.js .compare:not(.in) .tick path { stroke-dashoffset:1; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── Private ──────────────────────────────────────────── */
/* A band of the app's green from edge to edge, flat: no card, no shadow. Three statements side by side, each a small
   line, a large one, a sentence and a white button. */
.band { padding:clamp(72px,9vw,124px) 0 clamp(76px,9vw,128px); background:radial-gradient(120% 78% at 50% 0%, rgba(40,150,84,.30), rgba(40,150,84,0) 62%), var(--pitch); color:#fff; }
.band h2 em { color:var(--lime); }
.band .lead { color:rgba(255,255,255,.84); }
/* Three tiles of a paler green, each a small picture, a name and one sentence. The pictures are drawn in two colours
   only, white and the app's mint, and each moves once, as its tile arrives, and then is still: the rings open and the
   distance appears; the switch is turned on; the account's lines are written and the way out is shown under it. */
.offers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:clamp(44px,6vw,72px); }
.offers article { display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 28px 40px; border-radius:var(--r-l); background:rgba(255,255,255,.09); }
.offers h3 { margin-top:14px; font-size:clamp(24px,2.5vw,30px); font-weight:650; letter-spacing:-0.03em; }
.offers p { margin-top:10px; max-width:260px; font-size:17px; line-height:1.4; color:rgba(255,255,255,.84); text-wrap:balance; }
.band .more { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; margin-top:clamp(36px,4vw,52px); font:500 17px/1.3 var(--text); }
.band .more a::after { content:"›"; display:inline-block; margin-left:.3em; transform:translateY(-.03em); }
.band .more a:hover { text-decoration:underline; text-underline-offset:4px; }
.pic { display:block; width:min(100%,260px); height:auto; overflow:visible; }
.pic text { font-family:var(--text); letter-spacing:-0.01em; }
.pic .ring, .pic .them, .pic .me, .pic .tag, .pic .knob, .pic .card, .pic .out, .pic .bar { transform-box:fill-box; transform-origin:50% 50%; }
.pic .bar { transform-origin:0 50%; }
/* How each picture arrives: set while its tile is still on its way, let go when the tile is in. */
.pic .ring { transition:transform 1.1s var(--settle), opacity .7s ease; transition-delay:calc(.25s + var(--n,0) * 110ms); }
.pic .me { transition:transform .7s var(--spring) .2s; }
.pic .them { transition:transform .8s var(--spring) .75s, opacity .5s ease .75s; }
.pic .link { transition:opacity .6s ease 1s; }
.pic .tag { transition:transform .7s var(--spring) 1.15s, opacity .35s ease 1.15s; }
.pic .knob { transition:transform .75s var(--spring) .8s; }
.pic .rail { transition:fill .5s ease .8s; }
.pic .card { transition:transform .9s var(--settle) .3s, opacity .6s ease .3s; }
.pic .bar { transition:transform .8s var(--settle) .75s; }
.pic .bar + .bar { transition-delay:.9s; }
.pic .out { transition:transform .8s var(--settle) 1.15s, opacity .6s ease 1.15s; }
.js .offers article:not(.in) .ring { transform:scale(.35); opacity:0; }
.js .offers article:not(.in) .me { transform:scale(0); }
.js .offers article:not(.in) .them { transform:scale(.4); opacity:0; }
.js .offers article:not(.in) .link { opacity:0; }
.js .offers article:not(.in) .tag { transform:scale(.5); opacity:0; }
.js .offers article:not(.in) .knob { transform:translateX(-40px); }
.js .offers article:not(.in) .rail { fill:rgba(255,255,255,.26); }
.js .offers article:not(.in) .card { transform:translateY(14px); opacity:0; }
.js .offers article:not(.in) .bar { transform:scaleX(0); }
.js .offers article:not(.in) .out { transform:translateY(10px); opacity:0; }
.band :focus-visible { outline-color:rgba(255,255,255,.85); }
.band ::selection { background:rgba(255,255,255,.3); }

/* ── Where to get it ──────────────────────────────────── */
.getit { margin-top:56px; border-radius:44px; padding:clamp(56px,8vw,96px) 24px; text-align:center; background:var(--lime); color:var(--lime-ink); display:flex; flex-direction:column; align-items:center; }
.getit .lead { color:rgba(10,54,34,.8); }
.getit .actions { margin-top:0; }
.getit .scan + .actions > * { margin-top:16px; }
.ticks { list-style:none; padding:0; display:flex; gap:10px 28px; justify-content:center; flex-wrap:wrap; margin-top:34px; color:var(--lime-ink); font-size:15px; font-weight:500; }
.ticks li { display:flex; align-items:center; gap:8px; }
.ticks svg { width:16px; height:16px; stroke:var(--lime-ink); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.fine { color:var(--dim); font-size:13px; margin-top:20px; }
.getit .fine { color:rgba(10,54,34,.72); }
.getit .store[aria-disabled="true"] .button, .getit .store[aria-disabled="true"] .pill { background:rgba(10,54,34,.1); color:rgba(10,54,34,.78); }
.getit :focus-visible { outline-color:var(--lime-ink); }

/* ── Questions ────────────────────────────────────────── */
.faq { max-width:780px; margin:48px auto 0; }
.faq .q { border-bottom:1px solid var(--hair); }
.faq .q:first-child { border-top:1px solid var(--hair); }
.faq button { display:block; width:100%; text-align:left; padding:24px 44px 24px 0; font:600 19px/1.3 var(--display); letter-spacing:-0.02em; position:relative; transition:color .2s; }
.js .faq button:hover { color:var(--green); }
html:not(.js) .faq button { cursor:default; }
.js .faq button::before, .js .faq button::after { content:""; position:absolute; right:8px; top:50%; width:14px; height:2px; margin-top:-1px; border-radius:2px; background:var(--faint); transition:transform .45s var(--settle); }
.faq button::after { transform:rotate(90deg); }
.faq .q.open button::after { transform:rotate(0); }
/* An answer opens to its own height: a row that grows from nothing to as much as it holds, soft as it comes. */
.faq .a { display:grid; grid-template-rows:1fr; transition:grid-template-rows .5s var(--settle), opacity .4s var(--settle), filter .4s var(--settle); }
.faq .a > div { overflow:hidden; min-height:0; }
.js .faq .q:not(.open) .a { grid-template-rows:0fr; opacity:0; filter:blur(6px); }
.faq .a p { color:var(--dim); padding:0 44px 26px 0; max-width:660px; text-wrap:pretty; }
.faq .a p a { color:var(--green); }

/* ── Last word ────────────────────────────────────────── */
.close { text-align:center; padding-top:var(--space); }
.close .icon { width:104px; height:104px; margin:0 auto 28px; filter:drop-shadow(0 18px 34px rgba(84,112,0,.24)); }
.close .actions { margin-top:32px; }
footer { margin-top:clamp(96px,12vw,150px); border-top:1px solid var(--hair); padding:26px 0 48px; display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; color:var(--dim); font-size:13px; }
footer nav { display:flex; flex-wrap:wrap; gap:8px 22px; }
footer a { color:var(--dim); transition:color .2s; }
footer a:hover, footer a[aria-current] { color:var(--ink); }
/* Whose marks the two stores' badges are, as both ask to be said wherever their badges are shown. */
.marks { color:var(--faint); font-size:12px; line-height:1.5; text-wrap:pretty; }
footer .marks { flex-basis:100%; max-width:820px; margin-top:8px; }
.door .marks { max-width:520px; margin-top:40px; }

/* ── The pages of words: privacy, terms, support ──────── */
.prose { max-width:680px; padding:132px 0 40px; }
.prose h1 { font-size:clamp(36px,6vw,48px); line-height:1.05; letter-spacing:-0.035em; }
.prose .sub { color:var(--faint); font-size:15px; margin-top:14px; }
.prose h2 { font-size:22px; line-height:1.2; margin-top:40px; letter-spacing:-0.02em; }
.prose p, .prose li { color:var(--dim); margin-top:12px; }
.prose ul, .prose ol { padding-left:22px; }
.prose strong { color:var(--ink); font-weight:600; }
.prose a { color:var(--green); }
.prose a:hover { text-decoration:underline; }
.prose .button { margin-top:20px; color:#fff; }
.prose .button:hover { text-decoration:none; }
.prose .also { margin-top:40px; padding-top:22px; border-top:1px solid var(--hair); font-size:15px; }

/* ── The door from the code: one line, and on to the store ─────────── */
.door { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:96px var(--gutter) 64px; }
.door .icon { width:104px; height:104px; margin-bottom:28px; filter:drop-shadow(0 18px 34px rgba(84,112,0,.24)); }
.door .lead { max-width:440px; margin-top:16px; }
.door .get-app { margin-top:32px; }
.door .back { margin-top:28px; color:var(--green); font-size:15px; }

/* ── Narrow ───────────────────────────────────────────── */
@media (max-width:900px) {
  :root { --gutter:18px; --r-l:28px; }
  .menu { padding-left:12px; gap:14px; }
  .menu nav { display:none; }
  .hero-pin { padding-top:108px; }
  /* The six phones, one at a time: a row to swipe through, the first in the middle and the next showing at the edge. */
  .device { margin-top:44px; padding:0; }
  .phones { justify-content:flex-start; gap:16px; margin-top:-4px; padding:4px calc(50% - var(--pw) / 2) 44px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .phones::-webkit-scrollbar { display:none; }
  .phones .phone { scroll-snap-align:center; }
  .phones .phone:nth-child(3) { order:1; } .phones .phone:nth-child(4) { order:2; } .phones .phone:nth-child(5) { order:3; }
  .phones .phone:nth-child(2) { order:4; } .phones .phone:nth-child(6) { order:5; } .phones .phone:nth-child(1) { order:6; }
  .scan:not(.tall) { flex-direction:column; gap:14px; padding:8px 8px 22px; text-align:center; }
  .scan:not(.tall) .stores { justify-content:center; }
  .close h2 em, .band h2 em, .plans h2 em { display:block; }
  .reviews { gap:12px; margin-top:32px; padding:0; }
  /* In a narrow window the phone stands first, and the rows pass under it. */
  .reviews .phone { --w:min(56vw,230px); position:relative; left:auto; top:auto; order:-1; margin:0 auto 20px; box-shadow:inset 0 0 0 1px #1c1c1e, 0 0 0 1.5px #b9babd, 0 0 0 2.5px #e6e7e9, 0 30px 60px -30px rgba(0,0,0,.34); }
  .set { gap:12px; padding-right:12px; }
  .review { width:256px; padding:20px; }
  .review p { font-size:15.5px; }
  .court { flex-direction:column-reverse; gap:36px; padding:32px 20px 36px; }
  .cues { gap:24px; max-width:none; width:100%; }
  /* A phone has less to spare: nothing is blurred while it is being scrolled, and the marquee's edges only fade. */
  .js .reveal { filter:none; }
  .marquee::before, .marquee::after { display:none; }
  footer nav a { padding:6px 0; }
  .bento .row { flex-direction:column; }
  .tile.wide { flex-direction:column; align-items:stretch; gap:0; padding-right:24px; padding-bottom:32px; }
  .tile.wide .art { width:100%; padding-top:30px; display:flex; justify-content:center; }
  .tile.wide .kutu { width:min(100%,400px); }
  .tile { flex:none; padding:28px 24px 0; }
  .offers { grid-template-columns:1fr; gap:14px; }
  .offers article { padding:22px 22px 32px; }
  .pic { width:220px; }
  .compare tbody th { padding:18px 10px 18px 0; }
  .compare td, .compare thead th:not(:first-child) { width:76px; }
  .offers p { max-width:280px; }
  .getit, .court { border-radius:30px; }
}

/* ── For anyone who has asked for less motion ─────────── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .js .hero-icon, .js .hero-in { opacity:1 !important; transform:none !important; animation:none !important; }
  .js .phones .phone { animation:none !important; }
  .js .reveal { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .js .emerge, .js .emerge:not(.in) { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .cues li { transition:none !important; }
  .compare .tick path { transition:none !important; stroke-dashoffset:0 !important; }
  .js .tile .kutu .up, .js .tile .kutu .xp, .js .tile .kutu .pop, .js .tile .kutu .dot { opacity:1 !important; transform:none !important; transition:none !important; }
  .kutu .play { animation:none !important; transform:scaleX(.6); }
  .kutu .roll, .kutu .vote, .kutu .vote * { transition:none !important; animation:none !important; }
  .kutu .mv { animation:none !important; transform:translate(-66px,-104px); }
  .kutu .ln { animation:none !important; }
  .kutu .deal, .kutu .op { animation:none !important; }
  .pic * { transition:none !important; transform:none !important; opacity:1 !important; }
  .js .offers article .rail { fill:#CCF02F !important; }
  .kutu .xp-run, .kutu .lv-up, .kutu .win, .kutu .shine { animation:none !important; }
  .kutu .spark { animation:none !important; opacity:0; }
  .board .ring, .board .hand, .board .seg, .board .lift { transition:none !important; }
  .pause { transition:none !important; }
  .faq .a { transition:none !important; filter:none !important; }
  .button, .pill, .store .badge, .menu .get, .menu .glider, .faq button::before, .faq button::after { transition:none !important; }
}

/* Things that bend with the scroll turn about their own middle. */
[data-focus], .tile, .getit, .court { transform-origin:50% 50%; backface-visibility:hidden; }

/* Davetle gelen: "Uygulamada aç" (indir sayfası) */
.open-app { display:flex; flex-direction:column; align-items:center; gap:10px; margin:22px 0 6px; }
.open-app[hidden] { display:none; }
.open-app .hint { font-size:14px; color:var(--dim); }
#invite-title { max-width:100%; text-wrap:balance; overflow-wrap:anywhere; }

/* ── Halı sahalar (site/halisaha/, tools/site/saha_sayfalari.py) ──
   The prose page's measure and voice, a list the app would draw: name heavy, one quiet line, lime only for what is live. */
.pitches { max-width:760px; padding:132px var(--gutter) 40px; }
.pitches h1 { font-size:clamp(36px,6vw,52px); line-height:1.05; letter-spacing:-0.035em; }
.pitches .lead { margin-top:14px; }
.pitches .cta { margin-top:26px; }
.crumbs { display:flex; gap:8px; font-size:14px; color:var(--faint); margin-bottom:14px; }
.crumbs a { color:var(--green); }
.crumbs span::before { content:"›"; margin-right:8px; color:var(--hair); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.chips a { padding:8px 14px; border-radius:999px; background:var(--panel); font-size:14px; color:var(--ink-2); transition:background .2s; }
.chips a:hover { background:#ebebef; }
.district { padding-top:44px; scroll-margin-top:88px; }
.district h2 { font-size:13px; font-family:var(--text); font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding-bottom:10px; border-bottom:1px solid var(--hair); }
.district h2 span { color:var(--hair); margin-left:4px; }
.district ul { list-style:none; padding:0; }
.district li { display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid #ececf0; }
.row-main { flex:1; min-width:0; }
.district h3 { font-size:19px; font-weight:650; letter-spacing:-0.02em; line-height:1.25; }
.district p { color:var(--dim); font-size:15px; margin-top:3px; }
.district p .open-n:first-child { margin-left:0; }
.seal { display:inline-block; vertical-align:2px; margin-left:8px; padding:3px 8px; border-radius:999px; background:#E3F1E9; color:var(--green); font:650 11px/1.2 var(--text); letter-spacing:.01em; }
.district .open-n { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; background:var(--lime); color:var(--lime-ink); font:650 12px/1.4 var(--text); }
.go { flex:none; font-size:15px; color:var(--green); }
.go::after { content:" ›"; }
.end { margin-top:72px; padding:40px 32px; border-radius:var(--r-l); background:var(--panel); text-align:center; }
.end h2 { font-size:clamp(26px,3.4vw,34px); letter-spacing:-0.03em; }
.end .lead { margin:12px auto 24px; max-width:460px; }
.cities { list-style:none; padding:0; margin-top:34px; columns:2 220px; column-gap:32px; }
.cities li { break-inside:avoid; border-bottom:1px solid #ececf0; }
.cities a { display:flex; justify-content:space-between; padding:13px 0; font-size:17px; }
.cities .n { color:var(--faint); }
@media (max-width:600px) { .pitches { padding-top:108px; } .end { padding:32px 20px; }
  .chips { flex-wrap:nowrap; overflow-x:auto; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding:0 var(--gutter); scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; } .chips a { flex:none; } }

/* ── Bekleme listesi (waitlist.js) — stores closed: one field, one black button; it goes away when a store opens ── */
.waitlist { width:100%; max-width:460px; margin:22px auto 0; }
html.live .waitlist { display:none; }
.wl-label { display:block; font:650 15px/1.3 var(--text); letter-spacing:-0.01em; margin:0 0 10px; text-align:center; }
/* Until a store opens the form stands where its grey "Yakında" button stood. */
html:not(.live) .actions .store[aria-disabled="true"] { display:none; }
.wl-row { display:flex; gap:8px; padding:6px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--hair), 0 8px 24px rgba(0,0,0,.06); }
.wl-row input { flex:1; min-width:0; border:0; outline:0; background:none; font:400 17px/1 var(--text); letter-spacing:-0.012em; padding:0 14px; color:var(--ink); }
.wl-row input::placeholder { color:var(--faint); }
.wl-row .button { height:46px; padding:0 22px; flex:none; }
.wl-row:focus-within { box-shadow:0 0 0 2px var(--ink), 0 8px 24px rgba(0,0,0,.08); }
.wl-trap { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.wl-note { font-size:13px; color:var(--faint); margin:10px 0 0; text-align:center; }
.wl-note a { text-decoration:underline; }
.waitlist.done .wl-row { display:none; }
.waitlist.done .wl-label { font-size:19px; }
.waitlist.err .wl-note { color:#B42318; }
.getit .waitlist { margin:8px auto 0; }
.getit .wl-label { text-align:center; margin-left:0; color:var(--lime-ink); }
.getit .wl-note { text-align:center; margin-left:0; color:rgba(10,54,34,.72); }
.getit .wl-row { box-shadow:0 10px 30px rgba(10,54,34,.14); }
.getit .wl-row:focus-within { box-shadow:0 0 0 2px var(--lime-ink), 0 10px 30px rgba(10,54,34,.14); }
@media (max-width:420px) { .wl-row .button { padding:0 16px; } }
.crumbs a + a::before, .crumbs a + span::before { content:"›"; margin-right:8px; color:var(--hair); }
.crumbs span::before { content:"›"; }
.district h2 .all { float:right; text-transform:none; letter-spacing:-0.01em; font-weight:400; font-size:14px; color:var(--green); margin:0; }
.district h2 .all::after { content:" ›"; }
.near-h { font-size:13px; font-family:var(--text); font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:56px; }
.near-h + .chips { margin-top:14px; }
.district .summary { color:var(--dim); font-size:15px; padding:14px 0 4px; }
.district h2 .all { padding:6px 0 6px 12px; }
.go { padding:10px 0 10px 12px; }

html.live .when-soon { display:none !important; }

/* Saha sayfası (/halisaha/saha/…, 2026-10-21): iki-üç düğme yan yana, yakındaki sahaların uzaklığı, saha sahibinin bilgileri. */
.venue-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.button.soft { background:var(--panel); color:var(--ink); }
.district .km { flex:none; font-size:15px; color:var(--dim); font-variant-numeric:tabular-nums; }
.district h3 a { color:var(--ink); }
.district h3 a:hover { color:var(--green); }
.facts { margin:0; }
.facts div { display:flex; gap:16px; padding:14px 0; border-bottom:1px solid #ececf0; }
.facts dt { flex:none; width:120px; color:var(--dim); font-size:15px; }
.facts dd { margin:0; font-size:15px; color:var(--ink); }
.venue-photo { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:24px; margin-top:28px; background:var(--panel); }
.src { margin-top:28px; font-size:12px; color:var(--faint); }
.src a { color:inherit; text-decoration:underline; }
.crumbs { flex-wrap:wrap; } .crumbs a, .crumbs span { white-space:nowrap; }

/* Halı saha rehberi (/rehber/, 2026-10-21): okunur makale, en üstte kısa cevap kutusu. */
.guide h1 { margin-bottom:0; }
.guide .answer { margin-top:22px; padding:20px 22px; border-radius:22px; background:#F3F9DA; color:var(--lime-ink); font-size:18px; line-height:1.45; text-wrap:pretty; }
.guide h2 { margin-top:40px; font-size:24px; letter-spacing:-0.025em; }
.guide p { margin-top:12px; color:var(--ink-2); text-wrap:pretty; }
.guide ul { margin-top:12px; padding-left:22px; color:var(--ink-2); }
.guide li { margin-top:8px; }
.guide-list { list-style:none; padding:0; }
.guide-list li { padding:14px 0; border-bottom:1px solid #ececf0; }
.guide-list a { color:var(--ink); font-weight:600; }
.guide-list a:hover, .guide-index a:hover strong { color:var(--green); }
.guide-index { list-style:none; padding:0; margin-top:34px; }
.guide-index li { border-bottom:1px solid #ececf0; }
.guide-index a { display:block; padding:20px 0; }
.guide-index strong { display:block; font:650 20px/1.25 var(--display); letter-spacing:-0.02em; color:var(--ink); }
.guide-index span { display:block; margin-top:6px; color:var(--dim); font-size:15px; line-height:1.45; }
.pitches .addr { margin-top:6px; font-size:15px; color:var(--dim); }
.pitches .addr.approx { color:var(--faint); font-size:14px; }

/* Saha sahipleri sayfası (/saha-sahibi, 2026-10-23). */
.owner-hero { padding:150px 0 20px; text-align:center; }
.owner-hero h1 { margin-top:22px; font-size:clamp(44px,6.4vw,84px); line-height:1.02; letter-spacing:-0.04em; }
.owner-hero .lead { max-width:600px; margin:18px auto 0; }
.owner-hero .cta { margin-top:30px; display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }
.owner-hero .cta small { color:var(--faint); font-size:14px; }
.feat { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:80px; }
.feat .c { padding:30px 28px 32px; border-radius:28px; background:var(--panel); }
.feat .ic { width:46px; height:46px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px var(--hair); }
.feat .ic svg { width:24px; height:24px; fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.feat h3 { margin-top:20px; font-size:22px; letter-spacing:-0.02em; line-height:1.2; }
.feat p { margin-top:8px; color:var(--dim); font-size:16px; line-height:1.45; }
@media (max-width:820px) { .feat { grid-template-columns:1fr; } .owner-hero { padding-top:110px; } }

/* Saha araması (ana sayfa + /halisaha/, 2026-10-23; site/ara.js). */
.find { padding-top:clamp(72px,9vw,120px); text-align:center; }
.find h2 { font-size:clamp(34px,4.6vw,56px); letter-spacing:-0.035em; line-height:1.05; }
.find .lead { margin:14px auto 0; max-width:560px; }
.searchbox { position:relative; max-width:640px; margin:34px auto 0; text-align:left; }
.pitches .searchbox { margin:26px 0 0; }
.searchbox .field { display:flex; align-items:center; gap:12px; height:64px; padding:0 22px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--hair), 0 18px 40px -24px rgba(0,0,0,.25); cursor:text; }
.searchbox .field:focus-within { box-shadow:0 0 0 2px var(--green), 0 18px 40px -24px rgba(0,0,0,.25); }
.searchbox svg { flex:none; width:22px; height:22px; stroke:var(--faint); fill:none; stroke-width:2.2; }
.searchbox input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:400 19px/1.2 var(--text); color:var(--ink); }
.searchbox input::placeholder { color:var(--faint); }
.searchbox input::-webkit-search-cancel-button { display:none; }
.results { position:absolute; left:0; right:0; top:74px; z-index:20; max-height:440px; overflow:auto; border-radius:24px; background:#fff; box-shadow:0 0 0 1px var(--hair), 0 30px 60px -30px rgba(0,0,0,.28); }
.results .grp { padding:14px 22px 6px; font:650 12px/1 var(--text); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.results a { display:flex; align-items:center; gap:14px; padding:13px 22px; border-top:1px solid #f0f0f3; color:var(--ink); }
.results a:hover, .results a.on { background:var(--panel); }
.results a b { font-weight:600; letter-spacing:-0.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.results a span { color:var(--dim); font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.results a i { margin-left:auto; flex:none; font-style:normal; color:var(--green); font-size:15px; }
.results .none { padding:18px 22px; color:var(--dim); }
.results .none a { display:inline; padding:0; border:0; color:var(--green); }
.find .chips { justify-content:center; margin-top:22px; }
@media (max-width:600px) { .results a span { display:none; } .searchbox .field { height:58px; } .results { top:66px; } }