/* Tilora — tilora.io
   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;
  --blue:#0071e3; --blue-on-black:#2997ff;
  --display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --text:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --settle:cubic-bezier(.16,1,.3,1); --open-hold:.5s; --open-time:1.5s; --open-curve:cubic-bezier(.5,0,.08,1); --open-step:60ms; --open-last:.6s; --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(0,113,227,.2); }
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; }
:focus-visible { outline:3px solid rgba(0,113,227,.6); outline-offset:3px; border-radius:10px; }
.wrap { max-width:calc(var(--page) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); }
.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,.figure { font-family:var(--display); font-weight:700; text-wrap:balance; }
h1 { font-size:clamp(48px,8.6vw,104px); line-height:.96; letter-spacing:-0.045em; }
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); }
.eyebrow { display:block; font:600 14px/1 var(--text); letter-spacing:.01em; color:var(--blue); }
.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:16px; }
.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; border-radius:7px; transition:width .5s var(--settle), height .5s var(--settle); }
.menu nav { display:flex; }
.menu nav a { padding:9px 13px; border-radius:999px; font-size:14px; letter-spacing:-0.01em; color:var(--ink); transition:background .25s, box-shadow .25s; }
/* The chosen one is a smaller piece of the same glass, lying on the first. */
.menu nav a.on { color:var(--ink); 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); }
.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 .get { padding:7px 14px; }

/* ── Hero ─────────────────────────────────────────────── */
.hero { text-align:center; }
.hero-pin { padding:88px 0 56px; overflow:hidden; overflow:clip; }
.hero .eyebrow { font-size:17px; }
.hero h1 { margin-top:18px; }
.hero h1 em { display:block; }
.hero .lead { max-width:590px; margin:26px auto 0; }
.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; }
.button.black { background:#000; color:#fff; }
.button.blue { background:var(--blue); color:#fff; }
.button.outline { color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue); }
.button.outline:hover { background:var(--blue); color:#fff; }
.button.white { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair); }
.facts { display:flex; gap:6px 22px; justify-content:center; flex-wrap:wrap; margin-top:26px; font:500 13px/1.2 var(--text); color:var(--dim); }

/* ── A MacBook Pro, drawn ─────────────────────────────── */
/* A thin black border round the display, a hairline of aluminium, the hinge, the body's front edge, the shadow it stands in. */
.macbook { position:relative; width:100%; padding:0 7%; }
.macbook .lid { position:relative; background:#060607; padding:1.25% 1.25% 1.6%; border-radius:clamp(10px,2.2vw,22px) clamp(10px,2.2vw,22px) 4px 4px; box-shadow:inset 0 0 0 1px #1c1c1e, 0 0 0 1.5px #b9babd, 0 0 0 2.5px #e6e7e9; }
.macbook .lid::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#3a3a3d; border-radius:0 0 2px 2px; }
.macbook .display { position:relative; aspect-ratio:16/10.3; border-radius:clamp(5px,1.1vw,11px) clamp(5px,1.1vw,11px) 0 0; overflow:hidden; background:#1f7ae0 url(assets/wallpaper.webp?v=3) center / cover no-repeat; }
.macbook .bar { display:flex; justify-content:space-between; align-items:center; height:3.6%; padding:0 1.4%; font:600 clamp(6px,.82vw,11px)/1 var(--text); color:#fff; text-shadow:0 1px 1px rgba(0,0,40,.18); }
.macbook .bar span { display:flex; gap:1.5em; }
.macbook .bar b { font-weight:700; }
.macbook .bar i { font-style:normal; font-weight:500; }
.macbook .deck { position:relative; height:clamp(8px,1.5vw,16px); margin:0 -8.2%; background:#dcdde0; border-radius:2px 2px clamp(8px,1.6vw,18px) clamp(8px,1.6vw,18px); box-shadow:inset 0 1.5px 0 #f7f7f8, inset 0 -3px 2px -1px #9c9da1, inset 1px 0 0 #c4c5c8, inset -1px 0 0 #c4c5c8; }
.macbook .deck::before { content:""; position:absolute; left:50%; top:0; width:12%; height:46%; transform:translateX(-50%); background:#bdbec2; box-shadow:inset 0 -1px 0 #a3a4a8; border-radius:0 0 10px 10px; }
.macbook::after { content:""; position:absolute; left:2%; right:2%; bottom:-22px; height:26px; background:radial-gradient(50% 100% at 50% 0, rgba(0,0,0,.2), transparent 70%); pointer-events:none; }

/* ── 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; }
/* 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 MacBook behind them, whole and as it 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:92px; height:92px; margin:0 auto 16px; filter:drop-shadow(0 18px 34px rgba(0,0,0,.14)); }
.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)); }
.js.loaded .device.hero-in { animation:hero-rise var(--open-time) var(--open-curve) backwards; animation-delay:calc(var(--open-hold) + var(--open-last)); }
/* The MacBook's speed, drawn. A still copy of its lid, blurred along the way it is going and a little behind it, lies
   over it while it travels and fades as it slows, so it arrives sharp. The blur is made once; only opacity moves. */
.rise-blur { position:absolute; left:7%; right:7%; top:0; opacity:0; pointer-events:none; filter:url(#rise-blur);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), #000 38%); mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), #000 38%); }
.rise-blur * { animation-play-state:paused !important; transition:none !important; }
.js.loaded .rise-blur { animation:hero-blur var(--open-time) linear backwards; animation-delay:calc(var(--open-hold) + var(--open-last)); }
@keyframes hero-blur { 0%, 42% { opacity:1; } 86%, 100% { opacity:0; } }
.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); } }
.js img.lazy { opacity:0; transition:opacity .7s ease; }
.js img.lazy.shown { opacity:1; }

/* ── The notch's states, told by scrolling past them ──── */
/* The notch's states, one at a time. The top of a screen, large, holds still in the middle of the window; the notch on
   it changes as the page is scrolled, and the words over it change with it. The steps themselves pass unseen behind:
   they are what is read without scripts, and what the scroll is measured by with them. */
.story { display:grid; grid-template-columns:minmax(0,1fr); margin-top:clamp(120px,24vh,240px); }
.story .steps, .stage { grid-area:1 / 1; }
.story .steps > div { min-height:74vh; display:flex; flex-direction:column; justify-content:center; }
.js .story .steps > div { visibility:hidden; }
html:not(.js) .story { grid-template-columns:minmax(0,1fr); margin-right:0; }
html:not(.js) .stage { display:none; }
html:not(.js) .story .steps > div { min-height:0; padding:44px 0; }
.story .n { font:600 14px/1 var(--text); color:var(--blue); font-variant-numeric:tabular-nums; }
.story h3 { font-size:clamp(30px,4.2vw,56px); letter-spacing:-0.035em; line-height:1.04; font-weight:700; margin-top:14px; }
.story p { color:var(--dim); font-size:clamp(17px,1.5vw,21px); line-height:1.42; letter-spacing:-0.016em; margin-top:14px; max-width:520px; text-wrap:pretty; }
.stage { min-width:0; width:100%; position:sticky; top:max(92px, calc(50vh - min(21vw, 250px) - 120px)); align-self:start; display:flex; flex-direction:column; align-items:center; text-align:center; }
.say { display:grid; width:100%; min-height:clamp(150px,17vw,200px); }
.say { grid-template-columns:minmax(0,1fr); }
.say > div { grid-area:1 / 1; min-width:0; display:flex; flex-direction:column; align-items:center; opacity:0; transform:translateY(14px); filter:blur(8px); transition:opacity .45s var(--settle), transform .6s var(--settle), filter .45s var(--settle); }
.say > div.on { opacity:1; transform:none; filter:none; }
.strip { position:relative; width:min(100%, 1080px); aspect-ratio:1 / .43; margin-top:28px; border-radius:clamp(18px,2.4vw,30px); overflow:hidden; background:#1f7ae0 url(assets/wallpaper.webp?v=3) center top / cover no-repeat; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 30px 60px -30px rgba(0,0,0,.25); }
.stage img { position:absolute; top:0; left:50%; max-width:none; opacity:0; transform:translateX(-50%) scale(.9); transform-origin:50% 0; filter:blur(10px); transition:opacity .45s var(--settle), transform .7s var(--spring), filter .45s var(--settle); }
.stage img.on { opacity:1; transform:translateX(-50%) scale(1); filter:blur(0); }
.stage img.in-mac { width:96%; height:auto; }
.stage img.in-mac[data-shot="6"] { width:84%; }

/* ── Cards, shown as they are ─────────────────────────── */
.marquee { 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); }

/* Two tiles to a row. A tile is as wide as its card at the row's scale plus its own padding, so both cards are drawn
   at the same scale, stand the same height, and sit exactly as far from their tile's edges as its words do. */
.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; }
/* The card itself, standing on the bottom edge of its tile: square where it meets the edge. */
.tile .tl-fit { width:100%; border-radius:calc(22px * var(--k,1)) calc(22px * var(--k,1)) 0 0; box-shadow:0 18px 44px rgba(10,15,40,.22); }
.tile.night .tl-fit { box-shadow:none; }
.showcase { margin-top:20px; border-radius:var(--r-l); padding:56px 5% 0; overflow:hidden; text-align:center; background:var(--panel); }
.showcase h3 { font-size:clamp(28px,3.4vw,44px); letter-spacing:-0.035em; font-weight:700; }
.showcase p { color:var(--dim); font-size:19px; margin:12px auto 0; max-width:520px; text-wrap:pretty; }
.showcase .film { display:block; width:100%; height:auto; margin-top:44px; border-radius:clamp(14px,2vw,24px) clamp(14px,2vw,24px) 0 0; background:#1f2a5c; }
.showcase img { width:100%; margin-top:44px; filter:drop-shadow(0 26px 44px rgba(0,0,30,.28)); transform:translateY(calc((1 - var(--seen,1)) * 70px)); will-change:transform; }

/* ── Private ──────────────────────────────────────────── */
.vault { background:#000; color:#f5f5f7; border-radius:44px; padding:clamp(64px,9vw,112px) 32px; margin-top:var(--space); text-align:center; }
.vault .eyebrow { color:var(--blue-on-black); margin-bottom:16px; }
.vault .lead { color:#a1a1a6; max-width:580px; margin:18px auto 0; }
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px auto 0; max-width:1000px; text-align:left; }
.trio div { border-radius:24px; padding:26px; background:#1d1d1f; }
.trio svg { width:26px; height:26px; stroke:var(--blue-on-black); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-bottom:18px; }
.trio strong { display:block; font:650 19px/1.2 var(--display); letter-spacing:-0.02em; }
.trio span { display:block; color:#a1a1a6; font-size:15.5px; line-height:1.45; margin-top:8px; }
.trio a { color:var(--blue-on-black); }
.trio a:hover { text-decoration:underline; }
.vault :focus-visible { outline-color:var(--blue-on-black); }

/* ── Price ────────────────────────────────────────────── */
.price { margin-top:56px; border-radius:44px; padding:clamp(56px,8vw,96px) 24px; text-align:center; background:var(--panel); }
.price .figure { font-size:clamp(72px,11vw,128px); letter-spacing:-0.055em; line-height:.95; }
.price .figure sup { font-size:.42em; vertical-align:top; position:relative; top:.22em; margin-right:.04em; letter-spacing:0; color:var(--ink-2); }
.price .lead { max-width:480px; margin:18px auto 0; }
.ticks { list-style:none; padding:0; display:flex; gap:10px 28px; justify-content:center; flex-wrap:wrap; margin-top:30px; color:var(--ink-2); font-size:15px; }
.ticks li { display:flex; align-items:center; gap:8px; }
.ticks svg { width:16px; height:16px; stroke:var(--blue); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.fine { color:var(--dim); font-size:13px; margin-top:20px; }

/* ── 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(--blue); }
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(--blue); }

/* ── Last word ────────────────────────────────────────── */
.close { text-align:center; padding-top:var(--space); }
.close .icon { width:104px; height:104px; margin:0 auto 28px; border-radius:24px; }
.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 { color:var(--ink); }
.prose { max-width:680px; padding:132px 0 40px; }
.prose h1 { font-size:48px; }
.prose h2 { font-size:22px; margin-top:36px; letter-spacing:-0.02em; }
.prose p, .prose li { color:var(--dim); margin-top:12px; }
.prose strong { color:var(--ink); }
.prose a { color:var(--blue); }

/* ── The HUD, live ────────────────────────────────────── */
/* A component is built at its real size and scaled as a whole to the place it is given. */
.tl-fit { position:relative; width:100%; aspect-ratio:var(--w) / var(--h); }
.tl-fit > .tl { position:absolute; left:0; top:0; transform-origin:0 0; }
.tl-fit img { width:100%; height:auto; }
.macbook .hud { position:absolute; top:0; left:50%; width:66%; transform:translateX(-50%); }
.device { max-width:1240px; margin:64px auto 0; padding:0 var(--gutter); }
#hero-mac { transform-origin:50% 0; will-change:transform; }

/* 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 MacBook comes up and grows until the top of its display is the top of 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; }

/* ── A tour of what is behind the tabs: the page does the swiping ──────── */
.tour { padding-top:var(--space); }
.tour-words { text-align:center; }
.tour-word { max-width:760px; margin:0 auto; }
.tour-word + .tour-word { margin-top:56px; }
.tour-word .lead { max-width:560px; margin:18px auto 0; }
.tour-screen { position:relative; margin:56px auto 0; max-width:1120px; aspect-ratio:1120/560; border-radius:28px; overflow:hidden; background:#1f7ae0 url(assets/wallpaper.webp?v=3) center top / cover no-repeat; }
.tour-screen .hud { position:absolute; top:0; left:50%; width:min(86%,962px); transform:translateX(-50%); }
/* Where the page does not do the swiping, each heading stands over its own screen: Files, then the mirror. */
.tour:not(.pinned) .tour-pin > .wrap { display:flex; flex-direction:column; }
.tour:not(.pinned) .tour-words { display:contents; }
.tour:not(.pinned) .tour-word, .tour:not(.pinned) .tour-screen { width:100%; }
.tour:not(.pinned) .tour-word:first-child { order:1; }
.tour:not(.pinned) .tour-screen { order:2; }
.tour:not(.pinned) .tour-word + .tour-word { order:3; margin-top:clamp(72px,10vw,120px); }
.tour:not(.pinned) #tour-second { order:4; }
.tour.pinned #tour-second { display:none; }
.tour.pinned { height:calc(100vh + 190vh); padding-top:0; }
.tour.pinned .tour-pin { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:64px; overflow:hidden; overflow:clip; }
.tour.pinned .tour-pin > .wrap { width:100%; }
.tour.pinned .tour-words { display:grid; }
.tour.pinned .tour-word { grid-area:1 / 1; margin-top:0; will-change:transform,opacity,filter; }
.tour.pinned .tour-screen { margin-top:44px; width:100%; aspect-ratio:auto; height:min(600px, calc(100vh - 310px)); }
.tour.pinned .tour-screen .hud { width:min(88%, calc((min(600px, 100vh - 310px) - 28px) * 962 / 452)); }

/* The edges of the marquee are out of focus, so things arrive and leave the way everything here does. */
.marquee { position:relative; }
.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); }

/* ── Narrow ───────────────────────────────────────────── */
@media (max-width:900px) {
  :root { --gutter:18px; --r-l:28px; }
  .menu { padding-left:12px; gap:14px; }
  .menu nav { display:none; }
  .device { margin-top:48px; }
  .tour-screen { aspect-ratio:1120/640; border-radius:20px; }
  .tour-screen .hud { width:96%; }
  .macbook { padding:0 6%; }
  .macbook .bar i { display:none; }
  .stage { top:84px; }
  .say { min-height:170px; }
  .bento .row { flex-direction:column; }
  .tile { flex:none; padding:28px 24px 0; }
  /* Stacked, a card is not blown up to the width of its tile: at most a little over half as large again as it is. */
  .tile .art { max-width:calc(var(--card) * 1.6px); }
  .trio { grid-template-columns:1fr; }
  .vault, .price { 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 .reveal, .js img.lazy { opacity:1 !important; filter:none !important; transition:none !important; }
  .js .reveal { transform:none !important; }
  .showcase img { transform:none !important; }
  .stage img { transition:opacity .2s !important; transform:translateX(-50%) !important; filter:none !important; }
  .say > div { transition:opacity .2s !important; transform:none !important; filter:none !important; }
  .faq .a { transition:none !important; filter:none !important; }
  .button, .menu .get, .faq button::before, .faq button::after { transition:none !important; }
}

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

/* ── Pages: one feature, one comparison, the changelog ── */
/* The same white page, the same type; one picture of the thing, a few plain points, and the way to get it. */
.page { padding-top:140px; }
.page .head h1 { font-size:clamp(40px,6.4vw,76px); line-height:1; letter-spacing:-0.04em; }
.page .head .lead { max-width:640px; }
.page .actions { margin-top:30px; }
.shot { margin:56px auto 0; max-width:960px; border-radius:clamp(16px,2.4vw,28px); overflow:hidden; background:#000; box-shadow:0 30px 80px -30px rgba(0,0,0,.35); }
.shot img, .shot video { width:100%; height:auto; display:block; }
.shot.light { background:var(--panel); box-shadow:none; }
.shot.small { max-width:560px; }
.shot.stage { background:#5a5a5a; padding:clamp(20px,4vw,48px); }
.shot.stage img { margin:0 auto; width:auto; max-width:100%; }
.points { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1000px; margin:56px auto 0; }
.points div { background:var(--panel); border-radius:24px; padding:26px; }
.points strong { display:block; font:650 19px/1.2 var(--display); letter-spacing:-0.02em; }
.points span { display:block; color:var(--dim); font-size:15.5px; line-height:1.45; margin-top:8px; }
.text { max-width:680px; margin:72px auto 0; }
.text h2 { font-size:clamp(26px,3vw,34px); margin-top:52px; }
.text > h2:first-child { margin-top:0; }
.text p, .text li { color:var(--dim); margin-top:14px; text-wrap:pretty; }
.text ul { padding-left:20px; }
.text a, .points a, .related a { color:var(--blue); }
.text strong { color:var(--ink); }
.table { width:100%; border-collapse:collapse; margin-top:24px; font-size:15.5px; }
.table th, .table td { text-align:left; padding:13px 10px; border-bottom:1px solid var(--hair); vertical-align:top; }
.table th { font-weight:600; color:var(--ink); }
.table td { color:var(--dim); }
.table td.yes { color:var(--ink); }
.table caption { text-align:left; color:var(--faint); font-size:13px; padding-bottom:8px; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
details.qa { border-bottom:1px solid var(--hair); }
details.qa:first-of-type { border-top:1px solid var(--hair); margin-top:24px; }
details.qa summary { cursor:pointer; list-style:none; padding:20px 0; font:600 18px/1.3 var(--display); letter-spacing:-0.02em; }
details.qa summary::-webkit-details-marker { display:none; }
details.qa p { margin:0 0 20px; }
.related { max-width:1000px; margin:72px auto 0; }
.related h2 { font-size:22px; letter-spacing:-0.02em; text-align:center; }
.related ul { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px; }
.related li a { display:inline-block; padding:10px 16px; border-radius:999px; background:var(--panel); color:var(--ink); font-size:15px; }
.related li a:hover { background:var(--hair); }
.release { border-top:1px solid var(--hair); padding:28px 0; }
.release h2 { font-size:28px; }
.release time { color:var(--faint); font-size:14px; }
.release ul { margin-top:10px; }
footer .more { display:flex; flex-wrap:wrap; gap:8px 22px; width:100%; }
@media (max-width:900px) {
  .page { padding-top:110px; }
  .points { grid-template-columns:1fr; }
}

/* Comparisons: Tilora's column is lit, what an app has carries a tick, what it doesn't steps back. */
.table .us { background:rgba(0,113,227,.06); color:var(--ink); font-weight:600; }
.table th.us { color:var(--blue); }
.table td svg { width:14px; height:14px; stroke:var(--blue); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-2px; margin-right:6px; }
.table td.absent { color:var(--faint); }
.score { background:var(--panel); border-radius:24px; padding:26px 28px; margin:8px 0 8px; }
.score .bar { display:grid; grid-template-columns:120px 1fr 64px; align-items:center; gap:14px; padding:7px 0; font-size:15px; }
.score .name { font-weight:600; }
.score .track { height:10px; border-radius:5px; background:rgba(0,0,0,.07); overflow:hidden; }
.score .track span { display:block; height:100%; border-radius:5px; background:var(--faint); }
.score .bar.us .track span { background:var(--blue); }
.score .bar.us .name, .score .bar.us .n { color:var(--blue); }
.score .n { color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; }
.score .fine { margin-top:12px; }