/* Daygeel, one window: blurred greige and ember gradient, mono italic, three views behind a nav. */
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2")}
:root{color-scheme:light;--bg:#e9e9e9;--ink:#1c1c1c;--ink2:#383838;--ink3:#606060;--accent:#ffffff;--glass:rgba(252,252,252,.55);--line:rgba(28,28,28,.12);--ease:cubic-bezier(.22,1,.36,1);
  --b1:#ffffff;--b2:#ffffff;--b3:#ffffff;--b4:#efefef}

*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit}button{font:inherit;color:inherit}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(180deg,#f1f1f1 0%,#e8e8e8 55%,#e4e4e4 100%)}
.bg i{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}

.bg .a{width:100vw;height:92vw;left:-38vw;bottom:-36vw;background:radial-gradient(closest-side,#ffffff 0%,#ffffff 40%,rgba(255,255,255,0) 100%);animation:drift 26s ease-in-out infinite alternate}
.bg .b{width:104vw;height:94vw;right:-40vw;bottom:-36vw;background:radial-gradient(closest-side,#878787 0%,#a4a4a4 42%,rgba(209,209,209,0) 100%);animation:drift 30s ease-in-out infinite alternate-reverse}
.bg .c{width:46vw;height:40vw;left:20vw;bottom:-26vw;background:radial-gradient(closest-side,rgba(255,255,255,.7),rgba(255,255,255,0));animation:drift 34s ease-in-out infinite alternate}
.bg::before{content:"";position:absolute;inset:0;opacity:.5;background:repeating-radial-gradient(circle at 18% 92%,rgba(255,255,255,0) 0 7px,rgba(255,255,255,.22) 7px 8px);-webkit-mask-image:radial-gradient(60% 55% at 22% 90%,#000000,transparent 75%);mask-image:radial-gradient(60% 55% at 22% 90%,#000000,transparent 75%);mix-blend-mode:soft-light}
.bg::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{to{transform:translate3d(3vw,-2vw,0) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.bg i{animation:none}}

header.bar{position:fixed;z-index:30;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:26px clamp(20px,5vw,72px)}
.logo{display:flex;align-items:center;gap:10px;justify-self:start;text-decoration:none;font-weight:800;font-style:italic;font-size:21px;letter-spacing:-.04em}.logo img{width:36px;height:36px;display:block}
.logo .dk{display:none}
nav.tabs{display:flex;gap:6px;align-items:center}nav.tabs>a{text-decoration:none;display:block}
.lw{position:relative}.lw .menu{left:50%;right:auto;margin-left:-100px;min-width:200px}.lw .menu a{display:block;padding:10px 12px;border-radius:10px;font-size:14px;text-decoration:none}.lw .menu a:hover,.lw .menu button:hover{background:var(--line)}.lw .menu button.cur{font-weight:400;color:inherit}
.lw>button .chev{width:12px;height:12px;vertical-align:-1px;margin-left:4px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .25s var(--ease)}.lw>button[aria-expanded=true] .chev{transform:rotate(180deg)}
nav.tabs button,nav.tabs>a{position:relative;border:0;background:none;cursor:pointer;padding:9px 16px;font-size:15px;color:var(--ink2);border-radius:999px;transition:color .25s,background .25s}
nav.tabs button:hover,nav.tabs>a:hover{color:var(--ink)}
nav.tabs [aria-current=page]{color:var(--ink);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.langwrap{position:relative;justify-self:end}
.lang{display:flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;font-size:15px;padding:8px 10px;border-radius:999px}
.lang:hover{background:var(--glass)}.lang svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.lang .chev{width:14px;height:14px;transition:transform .25s var(--ease)}.lang[aria-expanded=true] .chev{transform:rotate(180deg)}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;padding:6px;border-radius:16px;background:color-mix(in srgb,var(--bg) 88%,transparent);box-shadow:inset 0 0 0 1px var(--line),0 18px 50px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);opacity:0;transform:translateY(-6px);pointer-events:none;transition:.22s var(--ease)}
.menu.open{opacity:1;transform:none;pointer-events:auto}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:10px 12px;border-radius:10px;font-size:14px}
.menu button:hover{background:var(--line)}.menu button.cur{color:var(--accent);font-weight:700}

main{position:fixed;inset:0;z-index:10}
.view{position:absolute;inset:0;padding:112px clamp(20px,5vw,72px) 74px;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transform:translateY(16px) scale(.992);pointer-events:none;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .5s}
.view.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s;z-index:2}
h1,h2,h3{font-style:italic;letter-spacing:-.04em;line-height:1.04;margin:0}
.lead{color:var(--ink2);font-size:clamp(14px,1.6vw,20px);max-width:34em;margin:0}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 12px}

/* Home */
#home{padding-bottom:0;text-align:center;overflow:hidden}
#home .hh{font-size:clamp(30px,min(6.4vw,8.6dvh),88px);font-weight:800}
#home .lead{margin:clamp(10px,2dvh,22px) auto 0}
.badge{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(14px,3dvh,30px);background:#000000;color:#ffffff;border-radius:14px;padding:10px 20px 10px 16px;text-decoration:none;box-shadow:inset 0 0 0 1px #a6a6a6;transition:transform .3s var(--ease)}
.badge:hover{transform:translateY(-2px)}.badge svg{width:26px;height:26px;fill:#ffffff}
.badge small{display:block;font-size:11px;line-height:1.1;opacity:.85}.badge b{font-size:21px;line-height:1.1;font-weight:600;letter-spacing:-.02em;font-style:normal}
.stage{position:relative;flex:1;width:100%;min-height:0;margin-top:clamp(10px,2dvh,26px);--pw:clamp(160px,min(31dvh,24vw),320px)}
.phone{position:absolute;left:50%;top:0;width:var(--pw);aspect-ratio:600/1305;margin-left:calc(var(--pw)/-2);padding:calc(var(--pw)*.03);border-radius:calc(var(--pw)*.17);background:#0b0b0b;box-shadow:inset 0 0 0 calc(var(--pw)*.008) #474747,0 40px 90px rgba(22,22,22,.28),0 12px 30px rgba(22,22,22,.18);will-change:transform}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--pw)*.14)}
.phone::after{content:"";position:absolute;left:50%;top:calc(var(--pw)*.058);width:28%;height:calc(var(--pw)*.082);margin-left:-14%;background:#000000;border-radius:99px}
.phone.l{transform:translateX(calc(var(--pw)*-.98)) translateY(calc(var(--pw)*.16)) rotate(-7deg)}
.phone.r{transform:translateX(calc(var(--pw)*.98)) translateY(calc(var(--pw)*.16)) rotate(7deg)}
.phone.m{z-index:2}
#home .phone{opacity:0;transform:translateY(60px)}
#home.on .phone{opacity:1;transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
#home.on .phone.m{transform:none;transition-delay:.12s}
#home.on .phone.l{transform:translateX(calc(var(--pw)*-.98)) translateY(calc(var(--pw)*.16)) rotate(-7deg);transition-delay:.3s}
#home.on .phone.r{transform:translateX(calc(var(--pw)*.98)) translateY(calc(var(--pw)*.16)) rotate(7deg);transition-delay:.4s}

/* Features: a carousel that drifts on its own, drag it either way */
#features{justify-content:flex-start;overflow:hidden;padding-left:0;padding-right:0;padding-bottom:0}
.fh{padding:0 18px}.fh :is(h1,h2){font-size:clamp(26px,min(3.4vw,5dvh),48px);font-weight:800}
.fh .lead{margin:8px auto 0;font-size:clamp(13px,1.3vw,16px)}
.car{--pw:clamp(130px,min(23dvh,15vw),250px);position:relative;flex:1;width:100%;min-height:0;margin-top:clamp(12px,2.4dvh,26px);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000000 9%,#000000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000000 9%,#000000 91%,transparent)}
.car.drag{cursor:grabbing}
.track{display:flex;gap:clamp(28px,5vw,80px);align-items:flex-start;width:max-content;padding:clamp(10px,2dvh,22px) 0 0;will-change:transform}
.ci{flex:none;width:var(--pw);margin:0;text-align:center;will-change:transform,opacity}
.ci .phone{position:relative;left:auto;top:auto;margin:0;width:var(--pw)}
.ci .phone img{pointer-events:none;-webkit-user-drag:none}
.ci figcaption{margin-top:clamp(12px,2.2dvh,22px)}
.ci .n{display:block;font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:700}
.ci h3{font-size:clamp(17px,2.4dvh,22px);font-weight:800;margin:4px 0 4px}
.ci p{margin:0 auto;font-size:12.5px;line-height:1.45;color:var(--ink2);max-width:19em}

/* Pricing */
#pricing,#features{justify-content:safe center}
#pricing{overflow-y:auto;padding-bottom:28px}#pricing>*{flex:none}
.price-h{text-align:center}.price-h :is(h1,h2){font-size:clamp(28px,min(4.2vw,5.6dvh),56px);font-weight:800}
.price-h .lead{margin:10px auto 0;font-size:clamp(13px,1.3vw,16px)}
.seg{display:none}
.pcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);width:100%;max-width:1040px;margin-top:clamp(18px,3.4dvh,36px);align-items:stretch}
.pc{position:relative;padding:clamp(18px,2.6dvh,28px) clamp(18px,2vw,28px);border-radius:30px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);transition:transform .5s var(--ease)}
.pc:hover{transform:translateY(-4px)}
.pc h3{font-size:clamp(15px,1.4vw,18px);font-weight:700;letter-spacing:-.02em;opacity:.85}
.pc .price{font-size:clamp(34px,min(4.4vw,6.2dvh),58px);font-weight:800;font-style:italic;letter-spacing:-.06em;line-height:1;margin:clamp(8px,1.6dvh,14px) 0 4px}
.pc .sub{margin:0;font-size:12.5px;opacity:.7}
.pc ul{list-style:none;margin:clamp(12px,2.2dvh,22px) 0 0;padding:clamp(8px,1.4dvh,14px) 0 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.pc li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:clamp(4px,.9dvh,8px) 0;font-size:13px}
.pc li span{opacity:.72}.pc li b{font-weight:700;text-align:right}.pc li.off{opacity:.45}
.pc .ok,.pc .no{width:19px;height:19px;display:block}.pc .ok{fill:none;stroke:currentColor;stroke-width:2.6}.pc .no{stroke:currentColor;stroke-width:2}
.pc .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#1c1c1c;color:#ececec;font-size:11px;font-weight:800;padding:5px 14px;border-radius:999px;letter-spacing:.04em}
.pc.pass{background:linear-gradient(165deg,#ffffff,#ffffff 62%,#ffffff);color:#1c1c1c;box-shadow:0 36px 80px rgba(255,255,255,.38),inset 0 1px 0 rgba(255,255,255,.4);transform:translateY(-10px)}
.pc.pass:hover{transform:translateY(-14px)}
.pc.plus{background:linear-gradient(165deg,#272727,#171717);color:#ececec;box-shadow:0 30px 70px rgba(14,14,14,.35),inset 0 0 0 1px rgba(255,255,255,.08)}
.pc.plus .ok{stroke:#ffffff}

/* quiet strip under the plans */
.strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 26px;margin-top:clamp(16px,3dvh,30px);font-size:12.5px;color:var(--ink2)}
.strip span{display:inline-flex;align-items:center;gap:8px}.strip svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:2.6}.strip i{font-style:normal}
.strip button{border:0;background:none;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:0}

/* Legal pages share the bar and the blur */
body.doc{overflow:hidden}
.docmain{position:fixed;inset:0;z-index:10;overflow-y:auto;padding:104px 16px 48px}
.docsheet{max-width:780px;margin:0 auto;padding:clamp(22px,4vw,46px);border-radius:30px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px rgba(37,37,37,.1);-webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3)}
.docsheet h1{font-size:clamp(30px,6vw,46px);font-weight:800;margin:0 0 8px}
.docsheet h2{font-size:18px;font-style:normal;letter-spacing:0;margin:34px 0 6px;padding-top:18px;border-top:1px solid var(--line)}
.docsheet p,.docsheet li{color:var(--ink2);font-size:15px}.docsheet a{color:var(--accent)}.docsheet strong{color:var(--ink)}
.stand{font-size:13px;color:var(--ink3)}
.button{display:inline-block;background:var(--accent);color:#1c1c1c!important;font-weight:700;text-decoration:none;padding:14px 24px;border-radius:999px;margin:6px 10px 6px 0}
.button.quiet{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--line)}

/* FAQ dialog */
dialog{overflow:visible;border:0;padding:0;background:transparent;color:var(--ink);max-width:min(680px,calc(100vw - 28px));width:100%;max-height:calc(100dvh - 40px)}
dialog::backdrop{background:rgba(15,15,15,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet{padding:28px;border-radius:28px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line),0 40px 100px rgba(0,0,0,.3);max-height:calc(100dvh - 40px);overflow:auto}
.sheet header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sheet h2{font-size:28px;font-weight:800}.x{border:0;background:var(--glass);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px;box-shadow:inset 0 0 0 1px var(--line)}
details{border-top:1px solid var(--line)}details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:700;font-style:italic;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1}details[open] summary::after{content:"–"}
details p{margin:0 0 14px;color:var(--ink2);font-size:14px}

/* Small screens: nav moves under the logo row; a view may scroll inside itself if the phone is too short */
@media(max-width:760px){
  header.bar{grid-template-columns:auto 1fr auto;padding:16px 16px 0;row-gap:8px}
  .logo{width:34px;height:34px}.lang span{display:none}
  nav.tabs{grid-column:1/-1;grid-row:2;justify-content:center}
  .view{padding:118px 18px 70px;overflow-y:auto}
  #home{overflow:hidden}
  .stage{--pw:clamp(130px,30dvh,230px)}
  .phone.l{transform:translateX(calc(var(--pw)*-.9)) translateY(calc(var(--pw)*.14)) rotate(-7deg)}
  .phone.r{transform:translateX(calc(var(--pw)*.9)) translateY(calc(var(--pw)*.14)) rotate(7deg)}
  #home.on .phone.l{transform:translateX(calc(var(--pw)*-.9)) translateY(calc(var(--pw)*.14)) rotate(-7deg)}
  #home.on .phone.r{transform:translateX(calc(var(--pw)*.9)) translateY(calc(var(--pw)*.14)) rotate(7deg)}
  nav.tabs{gap:2px}nav.tabs button,nav.tabs>a{padding:8px 9px;font-size:12.5px;white-space:nowrap}.lw>button .chev{display:none}
  .lw .menu{margin-left:-150px}.lw.fw .menu{left:0;margin-left:0}
  .seg{display:flex;gap:4px;margin-top:14px;padding:4px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
  .seg button{flex:1;border:0;background:none;padding:8px 6px;border-radius:999px;font-size:12px;cursor:pointer;color:var(--ink2)}.seg button[aria-pressed=true]{background:var(--accent);color:#1c1c1c;font-weight:800}
  #features{padding-top:112px}
  .fh .eyebrow,.fh .lead{display:none}.fh :is(h1,h2){font-size:24px}
  .car{--pw:clamp(130px,25dvh,210px)}
  .pcs{grid-template-columns:1fr;margin-top:14px}.pcs[data-p="1"] .pc:not([data-p="1"]),.pcs[data-p="2"] .pc:not([data-p="2"]),.pcs[data-p="3"] .pc:not([data-p="3"]){display:none}.pc.pass{transform:none}.pc.pass:hover{transform:none}.pc .tag{top:14px;left:auto;right:16px;transform:none}
  .docmain{padding:112px 12px 40px}
  .feat{min-width:0}.feat>*{min-width:0}
}
.mobdesc{display:none;text-align:center;color:var(--ink2);font-size:13px;min-height:3em}
@media(max-width:760px){.mobdesc{display:block}}
@media(max-width:760px) and (max-height:700px){.lead{display:none}}

/* ---- motion and polish ---- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
/* nav: a sliding indicator behind the active tab */
nav.tabs{position:relative}
nav.tabs .ind{position:absolute;left:0;top:50%;height:36px;margin-top:-18px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s;pointer-events:none;opacity:0}
nav.tabs [aria-current=page]{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;position:relative}
/* the background drifts toward the pointer, and warms up per view */
.bg i{translate:calc(var(--mx,0)*-24px) calc(var(--my,0)*-18px);transition:translate 1.4s var(--ease)}
.bg{transition:filter 1.2s var(--ease)}
/* the three phones lean toward the pointer */
.stage{perspective:1500px}.stage .phone{backface-visibility:hidden}
#home .stage{transform:rotateY(calc(var(--mx,0)*6deg)) rotateX(calc(var(--my,0)*-3.5deg));transition:transform .6s var(--ease);transform-style:preserve-3d}
/* headlines develop word by word */
.w{display:inline-block;animation:dev .9s var(--ease) backwards;animation-delay:calc(var(--i)*85ms + 120ms)}
@keyframes dev{from{opacity:0;filter:blur(16px);transform:translateY(.25em)}}
.rv{animation:up .8s var(--ease) backwards;animation-delay:calc(var(--d,0)*90ms + 250ms)}
@keyframes up{from{opacity:0;translate:0 16px}}
/* cards: a spotlight follows the pointer */
.pc{--px:50%;--py:0%;overflow:hidden}.pc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(360px circle at var(--px) var(--py),rgba(255,255,255,.28),transparent 60%);mix-blend-mode:soft-light}.pc:hover::after{opacity:1}
.pc.plus::after{background:radial-gradient(360px circle at var(--px) var(--py),rgba(255,255,255,.35),transparent 60%);mix-blend-mode:normal}
.pc .tag{z-index:2}.pc{overflow:visible}.pc::after{overflow:hidden}
/* the developing-print intro */
.introp{position:fixed;inset:0;z-index:100;background:#e9e9e9;display:flex;align-items:center;justify-content:center;overflow:hidden;clip-path:circle(150% at 50% 50%);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.introp.gone{clip-path:circle(0% at 50% 50%)}
.introp .ig{position:absolute;border-radius:50%;filter:blur(90px);opacity:0;animation:igin 1.4s ease-out .1s forwards}
.introp .ig.a{width:70vmax;height:70vmax;left:-30vmax;bottom:-40vmax;background:radial-gradient(closest-side,#ffffff,rgba(255,255,255,0))}
.introp .ig.b{width:70vmax;height:70vmax;right:-30vmax;bottom:-40vmax;background:radial-gradient(closest-side,#878787,rgba(209,209,209,0))}
@keyframes igin{to{opacity:.85}}
.introp .ib{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.introp .il{width:88px;height:88px;opacity:0;filter:blur(14px);transform:scale(.7);animation:ilin 1.1s cubic-bezier(.22,1,.36,1) .15s forwards}
@keyframes ilin{60%{filter:blur(0)}to{opacity:1;filter:blur(0);transform:scale(1)}}
.introp .iw{display:flex;font-style:italic;font-weight:800;font-size:30px;letter-spacing:-.03em;color:#1c1c1c}
.introp .iw span{display:inline-block;animation:dev .8s cubic-bezier(.22,1,.36,1) backwards}
.introp .iw span:nth-child(1){animation-delay:.55s}.introp .iw span:nth-child(2){animation-delay:.62s}.introp .iw span:nth-child(3){animation-delay:.69s}.introp .iw span:nth-child(4){animation-delay:.76s}.introp .iw span:nth-child(5){animation-delay:.83s}.introp .iw span:nth-child(6){animation-delay:.9s}
.introp .ip{display:block;width:120px;height:2px;border-radius:2px;background:rgba(28,28,28,.12);overflow:hidden;position:relative;text-decoration:none}
.introp .ip::after{content:"";position:absolute;inset:0;background:#ffffff;transform:scaleX(0);transform-origin:left;animation:ipf 1.3s cubic-bezier(.65,0,.35,1) .5s forwards}
@keyframes ipf{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.w,.rv{animation:none}.introp{display:none}}
@media(max-width:760px){}

/* ---- clean, like the reference: plain links, no capsules ---- */
:root{--glass:rgba(255,255,255,.72);--line:rgba(28,28,28,.1)}
nav.tabs .ind{display:none}
nav.tabs [aria-current=page]{color:var(--ink)!important;font-weight:700}
nav.tabs button,nav.tabs>a{color:var(--ink2);font-size:15px;padding:8px 16px;transition:color .25s}
nav.tabs button:hover,nav.tabs>a:hover{color:var(--ink)}
.lang{font-size:15px;color:var(--ink);gap:9px;padding:8px 6px;border-radius:12px}
.lang:hover{background:rgba(255,255,255,.5)}
.lang .flag,.menu .flag{width:20px;height:20px;border-radius:50%;flex:none;display:inline-block;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lang .flag svg,.menu .flag svg{display:block;width:100%;height:100%}
.menu,.lw .menu{background:#ffffff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 50px rgba(22,22,22,.14),0 0 0 1px rgba(0,0,0,.05);border-radius:16px}
.menu button{display:flex;align-items:center;gap:10px}
.menu button:hover,.lw .menu a:hover{background:#f3f3f3}
.seg{background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.x{background:#ffffff}
.sheet{background:#ffffff;-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:760px){nav.tabs button,nav.tabs>a{padding:8px 9px;font-size:12.5px}nav.tabs{gap:0}}

.ci .phone{box-shadow:inset 0 0 0 calc(var(--pw)*.008) #474747,0 46px 60px -34px rgba(22,22,22,.4),0 14px 24px -14px rgba(22,22,22,.25)}
.car{-webkit-mask-image:linear-gradient(90deg,transparent,#000000 9%,#000000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000000 9%,#000000 91%,transparent)}
.track{padding-top:clamp(14px,2.4dvh,26px)}
/* flags: small rounded rectangles instead of discs */
.lang .flag,.menu .flag{width:23px;height:16px;border-radius:3.5px;box-shadow:0 0 0 1px rgba(0,0,0,.14) inset}
/* feature captions: plain type straight on the gradient, strong contrast */
.car{--pw:clamp(125px,min(21dvh,14.5vw),245px)}
.ci{width:calc(var(--pw)*1.28)}
.ci .phone{margin:0 auto}
.ci figcaption{margin-top:clamp(14px,2.4dvh,22px);padding:0 4px;text-align:center;background:none;box-shadow:none;border-radius:0}
.ci .n{display:block;width:auto;height:auto;border-radius:0;background:none;color:var(--ink);opacity:.55;font-size:11px;letter-spacing:.2em;margin:0 0 6px;font-weight:700}
.ci h3{font-size:clamp(18px,2.6dvh,23px);margin:0 0 6px;color:var(--ink);letter-spacing:-.03em}
.ci p{margin:0 auto;font-size:13px;line-height:1.5;color:rgba(28,28,28,.82);max-width:19em;font-weight:500}
@media(max-width:760px){.car{--pw:clamp(120px,22dvh,190px)}.ci p{font-size:12.5px}}
.lang .flag,.menu .flag{width:24px;height:16px;border-radius:4px;box-shadow:none;position:relative}
.lang .flag svg,.menu .flag svg{shape-rendering:geometricPrecision}
.lang .flag::after,.menu .flag::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .75px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35);pointer-events:none}

/* the one serif word in the headline */
.serif{font-family:"Instrument Serif","New York",ui-serif,Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.02em;font-size:1.12em;line-height:.9}
/* the button before launch: brand orange instead of black (the official black badge comes with the store link) */
.badge{background:linear-gradient(180deg,#ffffff,#ffffff);color:#1c1c1c;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.1),0 14px 34px -10px rgba(255,255,255,.6);padding:12px 24px 12px 18px;border-radius:999px}
.badge svg{fill:#1c1c1c}.badge small{opacity:.75}.badge b{font-style:italic;font-weight:800}
.badge:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.1),0 20px 40px -10px rgba(255,255,255,.7)}

/* floating facts: cream cards, a brand-orange tile, a serif title */
.fl{position:absolute;z-index:6;display:flex;align-items:center;gap:13px;padding:12px 20px 12px 12px;border-radius:24px;background:linear-gradient(180deg,rgba(253,253,253,.92),rgba(246,246,246,.8));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);color:var(--ink);text-align:left;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(255,255,255,.55),0 28px 50px -18px rgba(36,36,36,.38),0 6px 14px -6px rgba(36,36,36,.18);animation:bob 8s ease-in-out infinite}
.fl i{flex:none;width:42px;height:42px;border-radius:14px;background:linear-gradient(160deg,#ffffff,#ffffff);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 16px -6px rgba(255,255,255,.7)}
.fl svg{width:21px;height:21px;fill:none;stroke:#ffffff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fl b{display:block;font-family:"Instrument Serif","New York",ui-serif,Georgia,serif;font-style:italic;font-weight:400;font-size:21px;letter-spacing:-.01em;line-height:1.05;color:var(--ink)}
.fl span{display:block;font-size:11.5px;color:var(--ink2);line-height:1.35;margin-top:3px}
.fl.a{left:calc(50% - 500px);top:-70px;rotate:-3deg}
.fl.b{left:calc(50% + 200px);top:-58px;rotate:3deg;animation-delay:-2.5s}
.fl.c{left:calc(50% - 650px);top:40px;rotate:2.5deg;animation-delay:-5s}
.fl.d{left:calc(50% + 400px);top:34px;rotate:-2.5deg;animation-delay:-1.2s}
@keyframes bob{50%{translate:0 -8px}}
@media(max-width:1360px){.fl.c,.fl.d{display:none}.fl.a{left:calc(50% - 430px)}.fl.b{left:calc(50% + 150px)}}
@media(max-width:860px){.fl{display:none}}
@media(prefers-reduced-motion:reduce){.fl{animation:none}}

/* icon tile: app-icon material, one stroke weight, two tones */
.fl i{position:relative;width:46px;height:46px;border-radius:16px;background:linear-gradient(155deg,#ffffff 0%,#ffffff 55%,#ffffff 100%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -2px 3px rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12),0 10px 20px -8px rgba(255,255,255,.85),0 2px 4px rgba(255,255,255,.3);overflow:hidden}
.fl i::before{content:"";position:absolute;left:-10%;top:-30%;width:120%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
.fl svg{position:relative;width:24px;height:24px;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(255,255,255,.35))}
.fl svg .p{stroke:#ffffff;stroke-width:1.7;fill:none}
.fl svg .s{stroke:#e9e9e9;stroke-width:1.7;fill:none}
.fl svg .f{fill:#e9e9e9;stroke:none}

.fl.c{left:calc(50% - 700px);top:30px}
.fl.d{left:calc(50% + 395px);top:40px}
.fl.b{left:calc(50% + 190px)}
/* keep the cards clear of the phones */
.fl span{white-space:normal;max-width:210px}
.fl.a{left:calc(50% - 470px);top:-84px}
.fl.b{left:calc(50% + 190px);top:-76px}
.fl.c{left:calc(50% - 705px);top:0}
.fl.d{left:calc(50% + 405px);top:6px}
.fl.a{left:calc(50% - 425px);top:-92px}
.fl.b{left:calc(50% + 175px);top:-86px}
.fl.c{left:calc(50% - 700px);top:-18px}
.fl.d{left:calc(50% + 410px);top:-12px}
/* positions follow the phone size, so the cards keep their distance on any screen */
.fl.a{left:calc(50% - var(--pw)*1.52);top:calc(var(--pw)*-.33)}
.fl.b{left:calc(50% + var(--pw)*.63);top:calc(var(--pw)*-.31)}
.fl.c{left:calc(50% - var(--pw)*2.5);top:calc(var(--pw)*-.065)}
.fl.d{left:calc(50% + var(--pw)*1.47);top:calc(var(--pw)*-.043)}
.fl.c span{max-width:150px}
.fl.c{top:calc(var(--pw)*-.215)}
.fl.a{left:calc(50% - var(--pw)*1.42)}

.ci{transform-origin:50% 38%;transition:none}
.track{padding-top:clamp(26px,5dvh,56px);gap:clamp(18px,3.4vw,56px)}
.fl.d{left:calc(50% + var(--pw)*1.62);top:calc(var(--pw)*-.2)}
.fl.b{left:calc(50% + var(--pw)*.68)}
@media(max-width:1559px){.fl.c,.fl.d{display:none}}

.car{--pw:clamp(120px,min(18.5dvh,13vw),225px);padding-bottom:clamp(36px,7dvh,72px)}
.track{padding-top:clamp(24px,4.4dvh,48px)}
.ci figcaption{margin-top:clamp(12px,2dvh,18px)}
/* outer cards: narrower, closer to the phones and lower */
.fl.c span,.fl.d span{max-width:128px}
.fl.c{left:calc(50% - var(--pw)*2.3);top:calc(var(--pw)*.34)}
.fl.d{left:calc(50% + var(--pw)*1.58);top:calc(var(--pw)*.38)}
.fl.c{left:calc(50% - var(--pw)*2.42)}
.fl.d{left:calc(50% + var(--pw)*1.7)}
.fl.a{left:calc(50% - var(--pw)*1.5)}

/* pricing: depth on hover, a premium Plus card, a calm trust line */
.pcs{perspective:1400px}
.pc{--rx:0deg;--ry:0deg;--lift:0px;transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .45s var(--ease),box-shadow .45s var(--ease);will-change:transform}
.pc:hover{--lift:-8px}
.pc.pass{--lift:-10px}.pc.pass:hover{--lift:-18px}
.pc.free:hover{box-shadow:inset 0 0 0 1px var(--line),0 36px 70px -26px rgba(33,33,33,.35)}
.pc.pass:hover{box-shadow:0 50px 100px rgba(255,255,255,.5),inset 0 1px 0 rgba(255,255,255,.4)}
.pc h3,.pc .price{transition:transform .45s var(--ease);transform:translateZ(0)}
.pc:hover .price{transform:translateZ(26px)}
.pc:hover h3{transform:translateZ(14px)}
/* light that follows the pointer, on every card */
.pc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--px,50%) var(--py,0%),rgba(255,255,255,.32),transparent 60%);mix-blend-mode:soft-light}
.pc:hover::after{opacity:1}
/* Plus: dark glass with a fine ember edge and a serif name */
.pc.plus{background:radial-gradient(120% 90% at 85% -10%,rgba(255,255,255,.32),rgba(255,255,255,0) 55%),linear-gradient(165deg,#282828,#141414);box-shadow:0 34px 80px -20px rgba(14,14,14,.55),inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07)}
.pc.plus::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.08) 38%,rgba(255,255,255,.08) 62%,rgba(255,255,255,.7));-webkit-mask:linear-gradient(#000000 0 0) content-box,linear-gradient(#000000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pc.plus:hover{box-shadow:0 50px 100px -20px rgba(255,255,255,.38),inset 0 1px 0 rgba(255,255,255,.14)}
.serifname{font-family:"Instrument Serif","New York",ui-serif,Georgia,serif;font-style:italic;font-weight:400!important;font-size:clamp(20px,1.9vw,26px)!important;letter-spacing:-.01em;opacity:1!important}
.serifname em{font-style:italic;color:#ffffff}
.pc.plus .price{color:#f8f8f8}
.trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 28px;margin-top:clamp(18px,3.4dvh,34px);padding-top:clamp(14px,2.4dvh,22px);width:100%;max-width:1040px;border-top:1px solid rgba(28,28,28,.12);font-size:12.5px;color:var(--ink2)}
.trust span{display:inline-flex;align-items:center;gap:8px}.trust svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:2.6}.trust i{font-style:normal}
.trust button{border:0;background:none;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:0}
@media(max-width:760px){.trust{margin-top:12px;padding-top:12px;gap:4px 16px;font-size:11.5px}.pc,.pc.pass{--lift:0px!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){.pc{transition:none}}

/* ---- readable text: darker secondary tones, no washed-out opacity ---- */
.lead{color:#353535}
.pc li span{opacity:.88}.pc .sub{opacity:.85}.pc li.off{opacity:.62}.pc h3{opacity:1}
.pc.plus li span,.pc.plus .sub{opacity:.9;color:#e9e9e9}
.pc.pass li span,.pc.pass .sub{color:#1c1c1c;opacity:.88}
.ci p{color:#2a2a2a;font-weight:500}.ci .n{opacity:.8}
.trust{color:#353535}.trust span{font-weight:500}
.docsheet p,.docsheet li{color:#303030}.stand{color:#565656}
nav.tabs button,nav.tabs>a{color:#383838}
nav.tabs [aria-current=page]{color:#1c1c1c!important}
.lang{color:#1c1c1c}
.menu button,.lw .menu a{color:#1c1c1c}
.fh .lead,.price-h .lead{color:#353535}
details p{color:#303030}
/* ---- mobile: logo left, language and a three-line menu right; the bar of links is gone ---- */
.burger{display:none}
.mnav{display:none}
@media(max-width:760px){
  header.bar{grid-template-columns:1fr auto auto;column-gap:6px;padding:14px 16px 0;row-gap:0;align-items:center}
  nav.tabs{display:none!important}
  .logo{width:auto}
  .burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border:0;border-radius:14px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 8px 20px -10px rgba(26,26,26,.35);cursor:pointer;grid-column:3}
  .burger i{display:block;width:20px;height:2px;border-radius:2px;background:#1c1c1c;transition:transform .35s var(--ease),opacity .25s}
  .burger[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded=true] i:nth-child(2){opacity:0}
  .burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .langwrap{grid-column:2;grid-row:1}
  .mnav{position:fixed;display:flex;flex-direction:column;top:68px;right:12px;left:12px;max-height:calc(100dvh - 84px);overflow:auto;padding:8px;border-radius:22px;background:#ffffff;box-shadow:0 30px 70px -10px rgba(22,22,22,.3),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateY(-10px) scale(.98);transform-origin:100% 0;pointer-events:none;visibility:hidden;transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s;z-index:60}
  .mnav.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
  .mnav a,.mnav button{display:block;width:100%;text-align:left;border:0;background:none;padding:14px 16px;border-radius:14px;font-size:16px;color:#1c1c1c;text-decoration:none;cursor:pointer}
  .mnav a:active,.mnav button:active{background:#f3f3f3}
  .mnav hr{border:0;height:1px;background:rgba(0,0,0,.08);margin:6px 8px}
  .mnav [aria-current=true]{font-weight:800;color:var(--accent)}
  .lang span:not(.flag){display:none}.lang{padding:10px;gap:0}.lang svg.chev{display:none}
  .view{padding-top:84px}
  .docmain{padding-top:80px}
}
@media(max-width:760px){
  .docsheet{padding:22px 18px;border-radius:24px}
  .docsheet h1{font-size:26px;overflow-wrap:anywhere;hyphens:auto}
  .docsheet h2{font-size:16px;margin-top:26px}
  .docsheet p,.docsheet li{font-size:14.5px}
  /* features: larger phones, caption stays clear of the bottom edge */
  .car{--pw:clamp(150px,29dvh,240px);padding-bottom:28px}
  .track{padding-top:14px;gap:22px}
  .ci{width:calc(var(--pw)*1.22)}
  .ci p{font-size:13px}
  /* pricing: tighter card so the trust line fits */
  #pricing{padding-bottom:20px}
  .pc{padding:16px 18px}
  .pc .price{font-size:32px;margin:6px 0 2px}
  .pc ul{margin-top:10px;padding-top:6px}
  .pc li{padding:3px 0;font-size:12.5px}
  .price-h :is(h1,h2){font-size:23px}
  .price-h .lead{font-size:12.5px;margin-top:6px}
  .seg{margin-top:10px}
  .pcs{margin-top:10px}
  .trust{margin-top:10px;padding-top:10px}
}
/* ---- mobile, minimal: bare lines instead of a white button, a calm full-screen menu, text tabs for the plans ---- */
@media(max-width:760px){
  .burger{background:none;box-shadow:none;width:44px;height:44px;gap:6px;border-radius:50%;position:relative;z-index:80}
  .burger i{width:22px;height:1.5px;background:#1c1c1c}
  .burger i:nth-child(2){width:14px;align-self:flex-end;margin-right:11px}
  .burger[aria-expanded=true] i:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  .burger[aria-expanded=true] i:nth-child(3){transform:translateY(-3.75px) rotate(-45deg)}
  .burger[aria-expanded=true] i:nth-child(2){opacity:0}
  .mnav{inset:0;top:0;right:0;left:0;max-height:none;border-radius:0;padding:104px 28px 36px;background:radial-gradient(90% 55% at 0% 100%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),radial-gradient(80% 50% at 100% 100%,rgba(180,180,180,.5),rgba(180,180,180,0) 70%),#ececec;box-shadow:none;transform:none;opacity:0;justify-content:flex-start}
  .mnav.open{opacity:1}
  .mnav a,.mnav button{padding:0;border-radius:0;background:none;font-size:34px;font-style:italic;font-weight:800;letter-spacing:-.04em;line-height:1.25;color:#1c1c1c;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
  .mnav.open a,.mnav.open button{opacity:1;transform:none}
  .mnav.open :nth-child(2){transition-delay:.05s}.mnav.open :nth-child(3){transition-delay:.1s}.mnav.open :nth-child(5){transition-delay:.18s}.mnav.open :nth-child(6){transition-delay:.22s}.mnav.open :nth-child(7){transition-delay:.26s}.mnav.open :nth-child(8){transition-delay:.3s}.mnav.open :nth-child(9){transition-delay:.34s}
  .mnav a:active,.mnav button:active{background:none;color:var(--accent)}
  .mnav [aria-current=true]{color:var(--accent)}
  .mnav hr{margin:22px 0 16px;background:rgba(28,28,28,.18);width:48px}
  .mnav hr~a,.mnav hr~button{font-size:17px;font-style:normal;font-weight:500;letter-spacing:0;line-height:1;padding:11px 0;color:#2a2a2a}
  /* plan switch as plain text tabs */
  .seg{background:none;box-shadow:none;padding:0;border-bottom:1px solid rgba(28,28,28,.14);border-radius:0;gap:0}
  .seg button{background:none!important;box-shadow:none!important;border-radius:0;padding:11px 6px;font-size:13px;color:#454545;position:relative;font-weight:600}
  .seg button[aria-pressed=true]{color:#1c1c1c;font-weight:800}
  .seg button[aria-pressed=true]::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
  /* home: a calm fan, the middle phone in front, two behind it */
  .stage{--pw:clamp(150px,34dvh,250px)}
  .phone.l,.phone.r{filter:brightness(.94)}
  .phone.l,#home.on .phone.l{transform:translateX(calc(var(--pw)*-.56)) translateY(calc(var(--pw)*.1)) rotate(-7deg) scale(.88)}
  .phone.r,#home.on .phone.r{transform:translateX(calc(var(--pw)*.56)) translateY(calc(var(--pw)*.1)) rotate(7deg) scale(.88)}
  .phone.m{z-index:3}
}
@media(max-width:760px){
  .burger[aria-expanded=true] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .stage{--pw:clamp(140px,29dvh,230px)}
  .phone.l,#home.on .phone.l{transform:translateX(calc(var(--pw)*-.5)) translateY(calc(var(--pw)*.12)) rotate(-8deg) scale(.86)}
  .phone.r,#home.on .phone.r{transform:translateX(calc(var(--pw)*.5)) translateY(calc(var(--pw)*.12)) rotate(8deg) scale(.86)}
  .view{justify-content:flex-start}
  #pricing,#features{justify-content:flex-start}
}

/* mobile home, like the app's welcome stage: three prints fanned out behind one phone */
.fan{display:none}
@media(max-width:760px){
  .stage .phone.l,.stage .phone.r{display:none}
  .fan{display:block;position:absolute;left:50%;top:0;width:0;height:0;z-index:1}
  .pr{position:absolute;width:calc(var(--pw)*.62);aspect-ratio:346/520;margin-left:calc(var(--pw)*-.31);padding:6px 6px 22px;background:#f2f2f2;border-radius:4px;box-shadow:0 22px 40px -14px rgba(36,36,36,.5);opacity:0;animation:printfan 1s var(--ease) .5s forwards}
  .pr img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
  .pr.p1{transform:translate(-62%,10%) rotate(-14deg);--r:-14deg;--x:-62%}
  .pr.p3{transform:translate(62%,10%) rotate(13deg);--r:13deg;--x:62%}
  .pr.p2{transform:translate(0,-6%) rotate(-2deg);--r:-2deg;--x:0%;top:calc(var(--pw)*-.1)}
  @keyframes printfan{from{opacity:0;transform:translate(0,50%) rotate(0)}to{opacity:1}}
  .phone.m{z-index:3;margin-top:calc(var(--pw)*.28)}
  .stage{--pw:clamp(150px,30dvh,235px)}
  .car{--pw:clamp(115px,21dvh,185px)}
  .ci{width:calc(var(--pw)*1.25)}
}
@media(prefers-reduced-motion:reduce){.pr{animation:none;opacity:1}}
@media(max-width:760px){
  .stage{margin-top:clamp(26px,4.4dvh,44px)}
  .pr.p2{top:calc(var(--pw)*.02)}
  .pr.p1,.pr.p3{top:calc(var(--pw)*.12)}
  .phone.m{margin-top:calc(var(--pw)*.4)}
}

/* ---- mobile home, final: one large phone rising from the bottom ---- */
.mfacts{display:none}
@media(max-width:760px){
  #home{padding:92px 22px 0}
  #home .hh{font-size:clamp(31px,9.2vw,40px)}
  #home .lead{font-size:13.5px;line-height:1.55;margin-top:12px;max-width:21em}
  #home .badge{margin-top:18px;padding:13px 26px 13px 20px}
  .mfacts{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 0;font-size:11.5px;font-weight:600;color:#353535;white-space:nowrap}
  .mfacts i{width:3px;height:3px;border-radius:50%;background:var(--accent);display:block}
  .fan{display:none!important}
  .stage{--pw:clamp(206px,60vw,262px);margin-top:clamp(18px,3.4dvh,32px);overflow:visible}
  .stage::before{content:"";position:absolute;left:50%;top:18%;width:150%;aspect-ratio:1;translate:-50% 0;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
  .phone.m{margin-top:0;box-shadow:inset 0 0 0 calc(var(--pw)*.008) #474747,0 60px 90px -30px rgba(22,22,22,.55),0 18px 30px -14px rgba(22,22,22,.3)}
  #home.on .phone.m{animation:mrise 1.3s var(--ease) both}
  @keyframes mrise{from{opacity:0;transform:translateY(90px)}}
}
@media(max-width:760px) and (max-height:700px){#home .lead{display:none}.stage{--pw:clamp(170px,50vw,215px)}}
@media(max-width:760px){
  .bg .a{width:150vw;height:150vw;left:-60vw;bottom:-62vw}
  .bg .b{width:150vw;height:150vw;right:-62vw;bottom:-62vw}
  .bg .c{width:90vw;height:70vw;left:5vw;bottom:-40vw}
}

/* tap response: no 300 ms wait, and the touch is taken on press */
button,a,.burger,.mnav *{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.burger{position:relative;z-index:90}
/* carousel: the enlarged centre phone must not touch the clip edge */
.track{padding-top:clamp(40px,7.5dvh,76px)}
.car{margin-top:0}
/* dropdowns: quiet white sheets, fine type, hairlines */
.menu,.lw .menu,.langwrap .menu{min-width:218px;padding:8px;border-radius:20px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(28,28,28,.07),0 28px 60px -18px rgba(26,26,26,.32),0 6px 16px -8px rgba(26,26,26,.18);margin-top:2px}
.menu a,.menu button,.lw .menu a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font-size:14px;color:#1c1c1c;font-weight:500;letter-spacing:-.005em;transition:background .2s}
.menu a:hover,.menu button:hover,.lw .menu a:hover{background:rgba(28,28,28,.05)}
.menu button.cur{color:var(--accent);font-weight:700}
.lw .menu a+a,.lw .menu a+button{position:relative}
.lw .menu a+a::before,.lw .menu a+button::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:rgba(28,28,28,.06)}
@media(max-width:760px){
  .track{padding-top:clamp(34px,6dvh,56px)}
  .mnav{padding-top:110px}
}
.menu button{font:inherit;font-size:14px;text-align:left;width:100%;justify-content:flex-start}
.lw .menu a,.lw .menu button{min-height:44px}
.lw .menu{left:50%;margin-left:-109px}
/* iOS Safari: the layers reach under the bottom toolbar, and the phone melts into the ground instead of ending on a hard edge */
html{background:#e6e6e6;min-height:100%}
.bg{position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;bottom:auto}
@supports (height:100lvh){main,.docmain{bottom:auto;height:100lvh}}
@media(max-width:760px){
  #home{padding-bottom:0}
  .stage{margin-bottom:0}
  .phone.m{-webkit-mask-image:linear-gradient(180deg,#000000 0,#000000 72%,transparent 99%);mask-image:linear-gradient(180deg,#000000 0,#000000 72%,transparent 99%)}
  .view{padding-bottom:max(24px,env(safe-area-inset-bottom))}
}
@media(max-width:760px){
  .phone.m{-webkit-mask-image:none;mask-image:none}
  .stage{-webkit-mask-image:linear-gradient(180deg,#000000 0,#000000 calc(100% - 120px),transparent 100%);mask-image:linear-gradient(180deg,#000000 0,#000000 calc(100% - 120px),transparent 100%);padding-bottom:0}
}
@media(max-width:760px){.stage::before{display:none}}
/* ---- phones: light on the GPU. The ground is plain gradients on the page itself (no blurred, animated layers,
   no backdrop filters), it reaches under the browser toolbar, and taps are answered at once ---- */
@media(max-width:760px){
  .bg{display:none}
  html{height:100lvh;min-height:100lvh;background-color:#e5e5e5;background-repeat:no-repeat;background-size:100% 100%;
    background-image:radial-gradient(130% 52% at -8% 100%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 78%),radial-gradient(120% 50% at 108% 100%,rgba(180,180,180,.85) 0%,rgba(209,209,209,.5) 42%,rgba(209,209,209,0) 78%),linear-gradient(180deg,#f1f1f1 0%,#e9e9e9 55%,#e5e5e5 100%)}
  body{background:transparent;min-height:100lvh}
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .pc,.docsheet,.sheet{background-color:rgba(255,255,255,.9)}
  .mnav{background:#ececec}
  .stage{-webkit-mask-image:none;mask-image:none}
  .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(180deg,rgba(233,233,233,0),rgba(229,229,229,.0));pointer-events:none}
  main,.docmain{bottom:auto;height:100lvh}
  .view.on *{will-change:auto}
  #home .phone.m{will-change:transform}
}
@media(max-width:760px){.phone.m{-webkit-mask-image:linear-gradient(180deg,#000000 0,#000000 calc(100% - 0px),#000000 100%);mask-image:none}.stage{overflow:hidden}}
@media(max-width:760px){.stage{overflow:visible}.stage::after{display:none}}

/* ---- phone menu, redesigned: a quiet editorial sheet, serif italic entries, numbered, small links below ---- */
@media(max-width:760px){
  html{background-color:#f1f1f1}
  header.bar{padding-top:max(14px,env(safe-area-inset-top))}
  .mnav{counter-reset:n;padding:calc(max(14px,env(safe-area-inset-top)) + 74px) 26px max(28px,env(safe-area-inset-bottom));background:radial-gradient(110% 46% at 0% 100%,rgba(255,255,255,.5),rgba(255,255,255,0) 72%),radial-gradient(100% 44% at 100% 100%,rgba(180,180,180,.4),rgba(180,180,180,0) 72%),#f1f1f1;display:flex;flex-direction:column;border-radius:0 0 34px 34px;max-height:none;bottom:0;transform:translateY(-14px);transition:opacity .35s,transform .5s var(--ease),visibility 0s .5s}
  .mnav.open{transform:none;transition-delay:0s}
  .mnav>a:nth-child(-n+3),.mnav>button:nth-child(-n+3){counter-increment:n;position:relative;display:flex;align-items:baseline;gap:16px;width:100%;padding:14px 0 13px;border-bottom:1px solid rgba(28,28,28,.12);font-family:"Instrument Serif","New York",ui-serif,Georgia,serif;font-style:italic;font-weight:400;font-size:46px;letter-spacing:-.02em;line-height:1.02;color:#1c1c1c}
  .mnav>a:nth-child(-n+3)::before,.mnav>button:nth-child(-n+3)::before{content:"0" counter(n);font:600 11px/1 ui-monospace,"SF Mono",Menlo,monospace;font-style:normal;letter-spacing:.14em;color:#666666;min-width:22px}
  .mnav [aria-current=true]{color:var(--accent)}
  .mnav [aria-current=true]::before{color:var(--accent)}
  .mnav hr{display:none}
  .mnav>a:nth-child(n+5),.mnav>button:nth-child(n+5){display:inline-block;width:auto;padding:0;margin:0;font:500 13px/1 ui-monospace,"SF Mono",Menlo,monospace;font-style:normal;letter-spacing:.04em;color:#353535}
  .mnav .sub{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:30px}
  .mnav:after{content:"© 2026 Fabio Hausmann · Bremen";margin-top:auto;padding-top:30px;font:500 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;color:#666666}
  .mnav>a:nth-child(5){margin-top:30px}
  .mnav>a:nth-child(n+5),.mnav>button:nth-child(n+5){margin-top:18px}
  .mnav>a:nth-child(5){margin-top:30px}
  .mnav a,.mnav button{opacity:0;transform:translateY(16px)}
  .mnav.open a,.mnav.open button{opacity:1;transform:none}
  .burger{z-index:95}
}
@media(max-width:760px){.mnav>a:nth-child(n+5),.mnav>button:nth-child(n+5){display:block;width:50%;float:left}.mnav>a:nth-child(5){margin-top:30px}.mnav>a:nth-child(6),.mnav>a:nth-child(8){margin-top:30px}.mnav>a:nth-child(7),.mnav>button:nth-child(9),.mnav>a:nth-child(9){margin-top:18px}}
@media(max-width:760px){
 .mnav>a:nth-child(n+5),.mnav>button:nth-child(n+5){float:none;display:block;width:auto;margin:0;padding:11px 0;text-align:left;font-size:13.5px;border-bottom:1px solid rgba(28,28,28,.07)}
 .mnav>a:nth-child(5){margin-top:26px}
 .mnav>a:nth-child(6),.mnav>a:nth-child(7),.mnav>a:nth-child(8),.mnav>a:nth-child(9),.mnav>button:nth-child(9){margin-top:0}
 .mnav>:last-child{border-bottom:0}
}

/* built by */
.by{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#353535;font-size:12px;letter-spacing:.01em}
.by img{width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 4px 10px -3px rgba(26,26,26,.35)}
.by b{font-weight:700;color:#1c1c1c}
.by.dk{position:fixed;left:clamp(20px,5vw,72px);bottom:22px;z-index:20;padding:6px 12px 6px 6px;border-radius:999px;transition:background .25s}
.by.dk:hover{background:rgba(255,255,255,.55)}
.by.mb{display:none}
@media(max-width:760px){
  .by.dk{display:none}
  .mnav:after{display:none}
  .mnav .by.mb{display:inline-flex;margin-top:auto;padding:30px 0 0;font-size:12.5px;opacity:1;transform:none;border:0;width:auto;float:none}
  .mnav .by.mb img{width:28px;height:28px}
  .mnav>a.by:nth-child(n+5){border-bottom:0;padding:30px 0 0;margin:auto 0 0}
}

/* phone menu: the app's own type (mono italic, heavy), and a sheet that reaches the very bottom */
@media(max-width:760px){
  .mnav{border-radius:0!important;height:100lvh;bottom:auto!important;top:0!important}
  .mnav>a:nth-child(-n+3),.mnav>button:nth-child(-n+3){font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-style:italic;font-weight:800;font-size:34px;letter-spacing:-.045em;line-height:1.1;padding:15px 0 14px;align-items:center}
  .mnav>a:nth-child(-n+3)::before,.mnav>button:nth-child(-n+3)::before{align-self:center;padding-top:2px}
}

/* tighter word gaps in the big headlines (mono spaces are wide) */
h1,.price-h :is(h1,h2),.fh :is(h1,h2){word-spacing:-.3em}
.w.serif{margin-left:-.06em}
.w.serif{margin-left:.04em}

/* built by: a quiet signature next to the logo (desktop); on phones it lives at the bottom of the menu */
.brandrow{display:flex;align-items:center;gap:14px;justify-self:start}
.by.hd{display:inline-flex;gap:0;padding:5px 0 4px 14px;border-left:1px solid rgba(28,28,28,.22);font-size:12px;color:#454545;line-height:1.2}
.by.hd b{font-weight:600;color:#2a2a2a}
.by.hd:hover b{color:var(--accent)}
@media(max-width:760px){.by.hd{display:none}.brandrow{gap:0}}

/* built by: last entry of the Rechtliches dropdown, set apart by a hairline and a little room */
.lw .menu .by.dd{display:flex;align-items:center;gap:10px;margin:6px 0 0;padding:14px 14px 10px;border-top:1px solid rgba(28,28,28,.1);border-radius:0 0 12px 12px;font-size:12.5px;color:#454545;min-height:0}
.lw .menu .by.dd img{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 1.5px #ffffff,0 3px 8px -2px rgba(26,26,26,.35)}
.lw .menu .by.dd b{color:#1c1c1c;font-weight:700}
.lw .menu .by.dd:hover{background:rgba(28,28,28,.04)}
.lw .menu .by.dd::before{display:none}
.lw .menu{min-width:244px;margin-left:-122px}
.lw .menu .by.dd span{white-space:nowrap}
.lw .menu button{padding:12px 14px!important;margin:0;text-indent:0;letter-spacing:inherit}

/* invitation page */
.joinsheet{max-width:560px;text-align:center}
.joinsheet h1{font-size:clamp(28px,6vw,40px)}
.joinsheet .lead{margin:12px auto 0;font-size:15px}
.codecard{margin:26px auto 0;padding:18px 22px 16px;border-radius:22px;background:#ffffff;box-shadow:0 0 0 1px rgba(28,28,28,.07),0 22px 44px -22px rgba(26,26,26,.35);display:inline-flex;flex-direction:column;gap:6px;font-size:12px;color:#454545}
.codecard b{font-size:clamp(28px,8vw,40px);letter-spacing:.14em;font-style:italic;color:#1c1c1c}
.acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 0}
.button.quiet{color:#1c1c1c!important;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1.5px rgba(28,28,28,.18)}
.soon{cursor:default}

/* audit fixes */
.trust button,.note button{padding:11px 6px;margin:-11px -6px}
.docsheet li a,.docsheet p a{padding:3px 0}
.docsheet ul{padding-left:20px}.docsheet li{margin:6px 0;line-height:1.6}
@media(prefers-reduced-motion:reduce){.bg i{animation:none!important}.fl,.pc,.ci{transition:none!important}.mnav a,.mnav button{transition:none!important}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.docsheet p a:not(.button),.docsheet li a{padding:3px 0}
.docsheet .button{padding:14px 26px}
.pc li.off{opacity:.72}
.joinsheet .acts .button{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
/* phone menu, final: it fills exactly the visible screen (not the larger "toolbar hidden" size, which pushed the last line
   under Safari's bar), the glow stays clear of the bottom edge, and a plain strip of the same colour reaches under the bar */
@media(max-width:760px){
  .mnav{top:0!important;bottom:0!important;height:auto!important;min-height:0;
    padding:calc(max(14px,env(safe-area-inset-top)) + 74px) 26px calc(env(safe-area-inset-bottom) + 84px)!important;
    background:radial-gradient(110% 38% at 0% 80%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%),radial-gradient(100% 36% at 100% 80%,rgba(180,180,180,.32),rgba(180,180,180,0) 70%),#f1f1f1!important;
    box-shadow:0 240px 0 0 #f1f1f1!important}
  .mnav .by.mb{margin-top:auto;padding-top:26px}
}
/* phones: Safari tints its bottom bar from what lies under it. On the views without a full-height image the ground fades into one
   plain colour there, so the bar and the page become one surface (no visible edge). Home keeps its phone to the bottom. */
@media(max-width:760px){
  body[data-v=features]::after,body[data-v=pricing]::after,.introp::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(150px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(233,233,233,0),#e9e9e9 72%);pointer-events:none;z-index:12}
  .introp::after{position:absolute;z-index:3}
  html{background-color:#e9e9e9}
}
/* phones, stable: no viewport units at all. The body is pinned to what is visible right now (so it follows Safari's bar
   as it grows and shrinks, on first load and after a refresh alike) and carries the ground; the html canvas is one plain colour. */
@media(max-width:760px){
  html{height:100%;min-height:0;background-image:none;background-color:#e9e9e9}
  body{position:fixed;left:0;right:0;top:0;bottom:0;height:auto;min-height:0;overflow:hidden;background-color:#e9e9e9;background-repeat:no-repeat;background-size:100% 100%;
    background-image:radial-gradient(130% 52% at -8% 100%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 78%),radial-gradient(120% 50% at 108% 100%,rgba(180,180,180,.85) 0%,rgba(209,209,209,.5) 42%,rgba(209,209,209,0) 78%),linear-gradient(180deg,#f1f1f1 0%,#e9e9e9 55%,#e5e5e5 100%)}
  main,.docmain{top:0!important;bottom:0!important;height:auto!important}
  .mnav{top:0!important;bottom:0!important;height:auto!important}
}
/* phones, from the real screenshots: Safari fills the strip under the page with ONE flat tint, so every view except Home now
   ends in exactly that tint (the glow sits higher and fades out before the edge) and nothing is faded on top of it */
@media(max-width:760px){
  body[data-v=features]::after,body[data-v=pricing]::after,.introp::after{display:none!important}
  html{background-color:#f1f1f1}
  body[data-v=features],body[data-v=pricing],body.doc{background-color:#f1f1f1;
    background-image:radial-gradient(120% 21% at -6% 76%,rgba(255,255,255,.80) 0%,rgba(255,255,255,.42) 45%,rgba(255,255,255,0) 80%),radial-gradient(110% 20% at 106% 78%,rgba(180,180,180,.72) 0%,rgba(209,209,209,.38) 45%,rgba(209,209,209,0) 80%),linear-gradient(180deg,#f1f1f1,#f1f1f1)}
  .introp{background-color:#f1f1f1;background-image:radial-gradient(120% 21% at -6% 76%,rgba(255,255,255,.65) 0%,rgba(255,255,255,.3) 45%,rgba(255,255,255,0) 80%),radial-gradient(110% 20% at 106% 78%,rgba(180,180,180,.55) 0%,rgba(209,209,209,.3) 45%,rgba(209,209,209,0) 80%)}
  .introp .ig{display:none}
  .mnav{background:radial-gradient(120% 21% at -6% 78%,rgba(255,255,255,.5),rgba(255,255,255,0) 80%),radial-gradient(110% 20% at 106% 80%,rgba(180,180,180,.4),rgba(180,180,180,0) 80%),#f1f1f1!important}
}
/* every page, Home included: the same flat tint at the very bottom; Home's phone melts into it over the last stretch */
@media(max-width:760px){
  body[data-v=home],body:not([data-v]){background-color:#f1f1f1;
    background-image:radial-gradient(120% 21% at -6% 76%,rgba(255,255,255,.80) 0%,rgba(255,255,255,.42) 45%,rgba(255,255,255,0) 80%),radial-gradient(110% 20% at 106% 78%,rgba(180,180,180,.72) 0%,rgba(209,209,209,.38) 45%,rgba(209,209,209,0) 80%),linear-gradient(180deg,#f1f1f1,#f1f1f1)}
  body[data-v=home]::after,body:not([data-v])::after{content:"";position:fixed;left:0;right:0;bottom:0;height:130px;background:linear-gradient(180deg,rgba(241,241,241,0),#f1f1f1 88%);pointer-events:none;z-index:12}
  .doc::after{display:none}
}
/* phones: no horizontal smear. A soft round halo behind the phone on Home; on the other pages a quiet glow in the top corners. Bottom stays flat. */
@media(max-width:760px){
  body[data-v=home],body:not([data-v]){background-image:radial-gradient(circle 62vw at 50% 70%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.22) 48%,rgba(255,255,255,0) 100%),radial-gradient(circle 55vw at 104% 42%,rgba(180,180,180,.28),rgba(180,180,180,0) 100%),linear-gradient(180deg,#f1f1f1,#f1f1f1)}
  body[data-v=features],body[data-v=pricing],body.doc{background-image:radial-gradient(circle 80vw at 106% 4%,rgba(255,255,255,.42) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 100%),radial-gradient(circle 70vw at -12% 30%,rgba(180,180,180,.3),rgba(180,180,180,0) 100%),linear-gradient(180deg,#f1f1f1,#f1f1f1)}
  .introp{background-image:radial-gradient(circle 70vw at 50% 50%,rgba(255,255,255,.28),rgba(255,255,255,0) 100%)}
  .mnav{background:radial-gradient(circle 80vw at 106% 4%,rgba(255,255,255,.38),rgba(255,255,255,0) 100%),radial-gradient(circle 70vw at -12% 40%,rgba(180,180,180,.26),rgba(180,180,180,0) 100%),#f1f1f1!important}
}
/* phones: every page wears Home's ground (round halo behind the content, plain tint at the bottom) */
@media(max-width:760px){
  body[data-v=features],body[data-v=pricing],body.doc{background-image:radial-gradient(circle 62vw at 50% 70%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.22) 48%,rgba(255,255,255,0) 100%),radial-gradient(circle 55vw at 104% 42%,rgba(180,180,180,.28),rgba(180,180,180,0) 100%),linear-gradient(180deg,#f1f1f1,#f1f1f1)}
  .introp{background-image:radial-gradient(circle 62vw at 50% 70%,rgba(255,255,255,.4) 0%,rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 100%)}
  .mnav{background:radial-gradient(circle 62vw at 50% 78%,rgba(255,255,255,.42) 0%,rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 100%),radial-gradient(circle 55vw at 104% 40%,rgba(180,180,180,.24),rgba(180,180,180,0) 100%),#f1f1f1!important}
  /* features: the whole caption stays inside the window, clear of the bottom edge */
  #features{padding-bottom:0}
  .car{--pw:clamp(120px,min(23dvh,50vw),210px);padding-bottom:max(36px,env(safe-area-inset-bottom))}
  .track{padding-top:clamp(30px,5dvh,48px)}
}
@media(max-width:760px){.car{--pw:clamp(110px,min(20dvh,50vw),210px);padding-bottom:max(44px,calc(env(safe-area-inset-bottom) + 24px))}.ci p{font-size:12.5px;line-height:1.45}.ci h3{font-size:19px}}
/* phones, from the screenshots of the real device: (1) the halo ends well above the bottom, so nothing is cut off at the edge;
   (2) Features starts at the same height as Pricing; (3) the freed room goes to bigger phones */
@media(max-width:760px){
  body,body[data-v=home],body:not([data-v]),body[data-v=features],body[data-v=pricing],body.doc{background-image:radial-gradient(ellipse 62% 33% at 50% 50%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 100%),radial-gradient(ellipse 52% 22% at 106% 38%,rgba(180,180,180,.28),rgba(180,180,180,0) 100%),linear-gradient(180deg,#f1f1f1,#f1f1f1)!important}
  .introp{background-image:radial-gradient(ellipse 62% 33% at 50% 50%,rgba(255,255,255,.4) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 100%)!important}
  .mnav{background:radial-gradient(ellipse 62% 33% at 50% 60%,rgba(255,255,255,.42) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 100%),radial-gradient(ellipse 52% 22% at 106% 38%,rgba(180,180,180,.24),rgba(180,180,180,0) 100%),#f1f1f1!important}
  #features{padding-top:84px!important}
  .car{--pw:clamp(120px,min(23.5dvh,56vw),230px)}
  .track{padding-top:clamp(22px,3.6dvh,40px)}
}
@media(max-width:760px){
  #features{padding-top:66px!important}
  .mnav{background:radial-gradient(ellipse 62% 30% at 50% 52%,rgba(255,255,255,.4) 0%,rgba(255,255,255,.16) 50%,rgba(255,255,255,0) 100%),radial-gradient(ellipse 52% 20% at 106% 34%,rgba(180,180,180,.22),rgba(180,180,180,0) 100%),#f1f1f1!important}
}
@media(max-width:760px){.mnav{background:radial-gradient(ellipse 70% 20% at 50% 68%,rgba(255,255,255,.34) 0%,rgba(255,255,255,.14) 55%,rgba(255,255,255,0) 100%),#f1f1f1!important}}

#home .hh{word-spacing:-.3em}
/* big screens: the views grow with the window (set from home.js as --s, 1 up to 2), so an external monitor is used, not left empty */
@media(min-width:761px){
  :root{--s:1}
  #home .hh,#home .lead,#home .badge,#home .mfacts{zoom:var(--s)}
  #home .stage{--pw:clamp(160px,min(31dvh,24vw),calc(320px*var(--s)))}
  #features .fh{zoom:var(--s)}
  #features .car{--pw:clamp(125px,min(21dvh,14.5vw),calc(245px*var(--s)))}
  .ci figcaption{zoom:var(--s)}
  .ci{width:max(calc(var(--pw)*1.28),200px)}
  #pricing .price-h,#pricing .pcs,#pricing .trust{zoom:var(--s)}
  .fl{zoom:var(--s)}
}
@media(min-width:761px){
  .fl{zoom:1;scale:calc(1 + (var(--s) - 1)*.55);transform-origin:50% 50%}
  .fl.a{top:calc(var(--pw)*-.33 - 8px*var(--s))}
  .fl.c{left:calc(50% - var(--pw)*2.45)}
  .fl.d{left:calc(50% + var(--pw)*1.62)}
}
@media(min-width:1700px){
  .fl{scale:1}
  .fl.a{left:calc(50% - var(--pw)*1.62);top:calc(var(--pw)*-.06)}
  .fl.b{left:calc(50% + var(--pw)*.78);top:calc(var(--pw)*-.04)}
  .fl.c{left:calc(50% - var(--pw)*2.4);top:calc(var(--pw)*.3)}
  .fl.d{left:calc(50% + var(--pw)*1.7);top:calc(var(--pw)*.34)}
}

/* features carousel: phone a little smaller on short screens so the whole caption stays above the bottom edge */
.ci figcaption{padding:0 10px 6px}
.ci p{max-width:21em}
@media(min-width:761px){.car{--pw:clamp(105px,min(17.5dvh,12.5vw),225px)}.track{padding-bottom:18px}}

/* ---- black and white, like the app: ink on porcelain, glass on top. No colour in the brand. ---- */
:root{--bg:#eeeef1;--ink:#111114;--ink2:#34343a;--ink3:#5c5c63;--accent:#111114;--glass:rgba(255,255,255,.6);--line:rgba(17,17,20,.12)}
html,body{background-color:#eeeef1}
.button{color:#fff!important}
.seg button[aria-pressed=true]{background:var(--accent);color:#fff}
.menu button.cur,.mnav [aria-current=true]{color:var(--ink)}
.eyebrow,.ci .n{color:var(--ink)}
.pc.pass{background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(255,255,255,.62));color:#111114;box-shadow:0 36px 80px -24px rgba(17,17,20,.28),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(17,17,20,.08)}
.pc.plus{background:radial-gradient(120% 90% at 85% -10%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),linear-gradient(165deg,#2a2a2f,#0c0c0e);color:#f4f4f6}
.pc.plus::before{background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,.06) 38%,rgba(255,255,255,.06) 62%,rgba(255,255,255,.5))}
.pc.plus .ok{stroke:#fff}.serifname em{color:#c9c9ce}
.pc.pass:hover{box-shadow:0 50px 100px -28px rgba(17,17,20,.36),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(17,17,20,.08)}
.pc.plus:hover{box-shadow:0 50px 100px -20px rgba(17,17,20,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.pc.plus::after{background:radial-gradient(360px circle at var(--px) var(--py),rgba(255,255,255,.22),transparent 60%)}
.pc .tag{background:#111114;color:#fff}
/* the button before launch: black glass instead of a colour */
.badge{background:linear-gradient(180deg,#34343a,#0c0c0e);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.08),0 16px 34px -12px rgba(17,17,20,.6)}
.badge svg{fill:#fff}.badge small{opacity:.8}
.badge:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.1),0 22px 40px -12px rgba(17,17,20,.7)}
/* floating facts: clear glass with a black tile */
.fl{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.5));box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 0 0 1px rgba(255,255,255,.7),0 28px 50px -18px rgba(17,17,20,.3),0 6px 14px -6px rgba(17,17,20,.14)}
.fl i{background:linear-gradient(155deg,#3c3c42 0%,#17171a 60%,#08080a 100%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.1),0 10px 20px -8px rgba(17,17,20,.6)}
.fl svg{filter:none}.fl svg .p{stroke:#fff}.fl svg .s{stroke:#b9b9bf}.fl svg .f{fill:#b9b9bf}
.fl span{color:#34343a}
/* the intro and the mobile menu: neutral smoke, no colour */
.introp{background:#eeeef1}
.mfacts i,.strip svg,.trust svg{stroke:#111114;background:#111114}.strip svg,.trust svg{background:none}
.introp .ip::after{background:#111114}
:focus-visible{outline-color:#111114}