/* routinerun.com STAGE SWITCH: the class on , stage-beta or stage-release. Both variants are in the markup and this file hides one. Set it in one place, STAGE in scripts/build-web.mjs, which writes it onto every page when it runs. FREE LIMIT: FREE_LIMIT in the same script. It writes --free-limit below and every in the markup, so the number is never typed by hand twice. SLOTS (data-slot, capture sizes): hero-video 1290x2796 loop 15-20 s (WebM+MP4 <=1.5 MB, poster AVIF <=150 KB); stand-in is the HTML mock hero-watch 416x496 · moment-in-hand 1290x2796 light+dark · moment-does-itself / moment-asks-first 1290x1400 crops surface-lockscreen 1290x900 · surface-island 1290x500 · surface-watch 416x496 · surface-action-button 1290x900 mascot-hero transparent PNG 800x800 */ :root{color-scheme:light dark;--free-limit:"3"; --brand-navy-deep:#001C41;--brand-navy:#012152;--brand-pink:#FE0494;--brand-violet:#D673F1;--brand-cream:#FDD9E3; --brand-ring:linear-gradient(135deg,#FE0494 0%,#FD02B4 28%,#E302FC 60%,#D673F1 100%); --brand-dusk:linear-gradient(180deg,#001C41 0%,#2A1B4E 62%,#6B3A6E 100%); --brand-icon-ground:linear-gradient(180deg,#12406F 0%,#00081A 100%); --page:#F2F2F7;--card:#FFFFFF;--card-raised:#FFFFFF;--ink:#000;--ink-2:rgba(60,60,67,.6);--ink-3:rgba(60,60,67,.3); --separator:rgba(60,60,67,.29);--chip:rgba(118,118,128,.12);--accent:#0A84FF;--accent-ink:#0066D6; --capability:#1C8FA3;--capability-wash:rgba(48,176,199,.16);--question:#C77700;--question-wash:rgba(255,159,10,.16); --completed:#2E7D4F; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif; --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",system-ui,sans-serif; --snappy:cubic-bezier(.2,.9,.24,1)} @media (prefers-color-scheme:dark){:root:not([data-theme=light]){--page:#000;--card:#1C1C1E;--card-raised:#2C2C2E;--ink:#fff;--ink-2:rgba(235,235,245,.6);--ink-3:rgba(235,235,245,.3);--separator:rgba(84,84,88,.65);--chip:rgba(118,118,128,.24);--capability:#40C8E0;--capability-wash:rgba(64,200,224,.16);--question:#FF9F0A;--accent-ink:#409CFF;--completed:#30D158}} :root[data-theme=dark]{--page:#000;--card:#1C1C1E;--card-raised:#2C2C2E;--ink:#fff;--ink-2:rgba(235,235,245,.6);--ink-3:rgba(235,235,245,.3);--separator:rgba(84,84,88,.65);--chip:rgba(118,118,128,.24);--capability:#40C8E0;--capability-wash:rgba(64,200,224,.16);--question:#FF9F0A;--accent-ink:#409CFF;--completed:#30D158;color-scheme:dark} :root[data-theme=light]{color-scheme:light} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--page);color:var(--ink);font:17px/1.47 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:var(--accent-ink);text-decoration:none}a:hover{text-decoration:underline} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px} img{max-width:100%;height:auto;display:block} h1,h2,h3{margin:0;text-wrap:balance}p{margin:0;text-wrap:pretty} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} @media (max-width:600px){.wrap{padding:0 16px}} .eyebrow{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)} .stage-beta .only-release,.stage-release .only-beta{display:none!important} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* nav */ .nav{position:absolute;inset:0 0 auto;z-index:20;color:#fff} .nav .wrap{display:flex;align-items:center;gap:28px;height:68px} .brand{display:flex;align-items:center;gap:10px;color:inherit;font-weight:600;font-size:17px} .brand:hover{text-decoration:none} .brand img{width:30px;height:30px;border-radius:7px} .nav ul{display:flex;gap:24px;list-style:none;margin:0 0 0 auto;padding:0;font-size:15px} .nav a{color:rgba(255,255,255,.82)}.nav a:hover{color:#fff;text-decoration:none} .nav details{display:none;margin-left:auto} @media (max-width:720px){.nav ul{display:none}.nav details{display:block;position:relative} .nav summary{list-style:none;cursor:pointer;font-size:15px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12)} .nav summary::-webkit-details-marker{display:none} .nav details ul{display:flex;flex-direction:column;gap:0;position:absolute;right:0;top:44px;background:#1C1C1E;border-radius:16px;padding:6px;min-width:180px} .nav details a{display:block;padding:10px 14px;color:#fff}} /* hero */ .hero{position:relative;background:var(--brand-dusk);color:#fff;overflow:hidden;min-height:min(900px,100svh);padding:124px 0 0;isolation:isolate} .hero .wrap{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start} @media (max-width:880px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:48px}} .hero-copy{padding-top:56px} @media (max-width:880px){.hero-copy{padding-top:12px}} .hero h1{font-family:var(--display);font-size:clamp(40px,6.4vw,68px);line-height:1.02;font-weight:700;letter-spacing:-.02em} .hero .sub{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);line-height:1.2;font-weight:600;margin-top:14px;color:var(--brand-cream)} .hero .body{font-size:17px;line-height:1.5;margin-top:22px;max-width:30em;color:rgba(255,255,255,.78)} .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;align-items:center} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;font-size:17px;font-weight:600;border:0;cursor:pointer;transition:opacity .2s} .btn:hover{text-decoration:none;opacity:.85} .btn-ring{background:var(--brand-ring);color:#fff;box-shadow:0 8px 28px rgba(254,4,148,.35)} .btn-ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} .badge-store{flex:none;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px 0 16px;border-radius:12px;background:#fff;color:#000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)} .badge-store:hover{text-decoration:none;opacity:.85} .badge-store small{display:block;font-size:11px;line-height:1}.badge-store b{display:block;font-size:20px;line-height:1.05;font-weight:600;letter-spacing:-.01em} .badge-store small,.badge-store b{white-space:nowrap} .stage-line{margin-top:16px;font-size:15px;color:rgba(255,255,255,.66)} /* hero scene layers */ .scene{position:absolute;inset:0;z-index:0;pointer-events:none} .layer{position:absolute;left:-2%;right:-2%;will-change:transform} .stars{top:0;height:70%;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff9 50%,transparent),radial-gradient(1px 1px at 28% 42%,#fff7 50%,transparent),radial-gradient(1.4px 1.4px at 46% 12%,#fffa 50%,transparent),radial-gradient(1px 1px at 63% 30%,#fff6 50%,transparent),radial-gradient(1.2px 1.2px at 78% 8%,#fff9 50%,transparent),radial-gradient(1px 1px at 88% 36%,#fff6 50%,transparent),radial-gradient(1px 1px at 6% 55%,#fff5 50%,transparent),radial-gradient(1.3px 1.3px at 38% 60%,#fff6 50%,transparent)} .moon{top:18%;left:auto;right:12%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#FDD9E3 0 34%,rgba(253,217,227,.28) 35%,rgba(253,217,227,.08) 55%,transparent 70%)} .hill{bottom:-2px;width:104%} .hill svg{display:block;width:100%;height:auto} .hero-foot{height:120px} @media (max-width:880px){.moon{right:-40px;top:8%;width:180px;height:180px}} /* devices */ .devices{position:relative;justify-self:center;width:min(100%,380px);height:640px;margin-bottom:40px} @media (max-width:880px){.devices{height:600px}} .phone{position:absolute;right:0;top:0;width:300px;aspect-ratio:9/19.5;border-radius:48px;background:#0B0B12;padding:10px;box-shadow:0 0 0 1.5px #3A3A48,0 40px 80px -20px rgba(0,0,0,.6),0 0 0 8px rgba(255,255,255,.03);will-change:transform} .screen{position:relative;height:100%;border-radius:38px;overflow:hidden;background:linear-gradient(180deg,#2B2F4A 0%,#44385E 55%,#6B4E6E 100%)} .screen::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 110%,rgba(0,0,0,.45),transparent)} .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);height:32px;width:118px;border-radius:20px;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 6px;z-index:3;transition:width .5s var(--snappy)} .island .t{font:600 13px/1 var(--sans);font-variant-numeric:tabular-nums;color:#FF9F0A} .lock-date{position:absolute;top:66px;width:100%;text-align:center;font:600 15px/1.2 var(--sans);color:rgba(255,255,255,.85);z-index:1} .lock-time{position:absolute;top:84px;width:100%;text-align:center;font:200 84px/1 var(--display);letter-spacing:-.02em;color:rgba(255,255,255,.92);z-index:1;font-variant-numeric:tabular-nums} .la{position:absolute;left:10px;right:10px;bottom:90px;z-index:2;border-radius:26px;padding:14px 14px 12px;background:rgba(40,36,60,.62);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18)} .la-top{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--sans);color:#FF9F0A} .la-top .t{margin-left:auto;font-size:20px;font-variant-numeric:tabular-nums} .la-mid{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;margin-top:12px} .la-title{text-align:center;font:600 17px/1.2 var(--display);color:#fff;min-height:42px;display:flex;align-items:center;justify-content:center;transition:opacity .25s} .tb{width:44px;height:36px;border-radius:18px;display:grid;place-items:center;background:rgba(10,132,255,.28);color:#5AB0FF} .tb.next{background:#0A84FF;color:#fff;transition:transform .15s,filter .15s} .tb.next.press{filter:brightness(.7)} .track{display:flex;align-items:center;margin:14px 2px 10px} .bead{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:600 11px/1 var(--sans);color:#fff;background:rgba(255,255,255,.28);transition:background .32s var(--snappy),box-shadow .32s} .bead.done{background:rgba(255,159,10,.55)}.bead.now{background:#FF9F0A;box-shadow:0 0 0 2px rgba(255,159,10,.35)} .seg{flex:1;height:3px;background:rgba(255,255,255,.22);transition:background .32s}.seg.done{background:rgba(255,159,10,.7)} .la-bot{display:flex;justify-content:space-between;align-items:center;color:#fff} .la-bot .tb{width:52px} .lock-foot{position:absolute;bottom:22px;left:24px;right:24px;display:flex;justify-content:space-between;z-index:2} .lock-foot span{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff} .watch{position:absolute;left:0;bottom:30px;width:150px;aspect-ratio:416/496;border-radius:40px;background:#0B0B12;padding:9px;box-shadow:0 0 0 1.5px #3A3A48,0 30px 60px -16px rgba(0,0,0,.6);z-index:4;will-change:transform} .watch::after{content:"";position:absolute;right:-7px;top:44px;width:7px;height:30px;border-radius:0 4px 4px 0;background:#3A3A48} .wscreen{height:100%;border-radius:32px;background:#000;padding:14px 12px 10px;display:flex;flex-direction:column;color:#fff} .wscreen .top{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 var(--sans);color:#FF9F0A;font-variant-numeric:tabular-nums} .wscreen .ttl{font:600 15px/1.15 var(--display);margin-top:10px;flex:1;transition:opacity .25s} .wscreen .nx{height:32px;border-radius:16px;background:#0A84FF;display:flex;align-items:center;justify-content:center;gap:6px;font:600 14px/1 var(--sans);transition:filter .15s} .wscreen .nx.press{filter:brightness(.7)} .mascot{display:none;position:absolute;left:-150px;bottom:-10px;width:170px;height:170px;z-index:3} .mascot-on .mascot{display:block} @media (max-width:880px){.mascot{left:calc(100% - 300px - 94px);bottom:auto;top:84px;width:108px;height:108px;z-index:0}} .fade{transition:opacity .25s}.fade.out{opacity:0} /* sections */ section.band{padding:88px 0} @media (max-width:600px){section.band{padding:56px 0}} .problem p{font-family:var(--display);font-size:clamp(28px,4vw,44px);line-height:1.15;font-weight:700;letter-spacing:-.015em;max-width:22em} .problem p+p{color:var(--ink-2);margin-top:6px} .h2{font-family:var(--display);font-size:clamp(28px,3.4vw,36px);line-height:1.15;font-weight:700;letter-spacing:-.012em;margin-top:8px} .lede{color:var(--ink-2);margin-top:10px;max-width:36em} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px} @media (max-width:900px){.grid3{grid-template-columns:minmax(0,1fr)}} .card{background:var(--card);border-radius:16px;overflow:hidden} .moment .vis{height:340px;position:relative;display:flex;align-items:center;justify-content:center;background:var(--page);margin:8px;border-radius:12px;overflow:hidden} .moment .txt{padding:16px 22px 24px} .moment h3{font-size:17px;line-height:22px;font-weight:600} .moment p{color:var(--ink-2);margin-top:4px;font-size:15px;line-height:20px} .shotcrop{position:absolute;top:24px;left:50%;width:250px;transform:translateX(-50%);border-radius:36px 36px 0 0;overflow:hidden;box-shadow:0 0 0 7px #1C1C1E,0 20px 40px -10px rgba(0,0,0,.3)} .mini{width:calc(100% - 32px);max-width:300px;background:var(--card);border-radius:16px;padding:16px;box-shadow:0 1px 0 var(--separator)} .pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;font:600 13px/1 var(--sans)} .pill-cap{background:var(--capability-wash);color:var(--capability)} .status{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:.5px solid var(--separator);font-size:15px;color:var(--ink-2);min-height:36px} .status .ok{color:var(--completed)} .spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink-3);border-top-color:var(--capability);animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .ask .q{display:flex;gap:10px;align-items:flex-start;font:600 17px/22px var(--sans)} .ask .q svg{flex:none;color:var(--question);margin-top:1px} .ask .btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px} .ask .btns span{height:44px;border-radius:22px;display:grid;place-items:center;font-weight:600;font-size:16px;background:var(--chip);color:var(--ink)} .ask .btns span.send{background:#0A84FF;color:#fff} .ask .why{margin-top:12px;font-size:13px;line-height:18px;color:var(--ink-2)} .waiting{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--sans);color:var(--question);margin-bottom:12px} /* surfaces */ .surface .vis{height:190px;margin:8px;border-radius:12px;background:linear-gradient(180deg,#2B2F4A,#5A4466);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center} .surface .txt{padding:12px 18px 20px} .surface h3{font-size:17px;font-weight:600;line-height:22px} .surface p{font-size:15px;line-height:20px;color:var(--ink-2);margin-top:2px} .s-ab{position:relative;width:120px;height:150px;border-radius:26px 0 0 26px;background:#0B0B12;box-shadow:0 0 0 1.5px #3A3A48;margin-left:60px} .s-ab .btnx{position:absolute;left:-5px;top:30px;width:5px;height:22px;border-radius:3px 0 0 3px;background:#FF9F0A;transition:transform .15s} .s-ab .btnx.press{transform:translateX(2px)} .s-ab .lbl{position:absolute;left:-104px;top:28px;font:600 12px/1.2 var(--sans);color:#fff;text-align:right;width:90px;opacity:0;transition:opacity .3s} .s-ab .lbl.on{opacity:1} /* routines */ .grid-r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px} @media (max-width:900px){.grid-r{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:420px){.grid-r{grid-template-columns:minmax(0,1fr)}} .rcard{display:flex;flex-direction:column;gap:10px;padding:20px;color:var(--ink);transition:opacity .2s} .rcard:hover{text-decoration:none;opacity:.8} .emb{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff} .rcard h3{font-size:17px;font-weight:600;line-height:22px} .rcard p{font-size:15px;line-height:20px;color:var(--ink-2)} .rcard .meta{font-size:13px;color:var(--ink-2);margin-top:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .more{display:inline-flex;margin-top:24px;font-weight:600} /* privacy */ /* paged */ .paged{background:#0B0B12;color:#fff;border-radius:16px;padding:36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center} @media (max-width:760px){.paged{grid-template-columns:minmax(0,1fr);padding:24px}} .paged p{color:rgba(255,255,255,.8);max-width:36em;margin-top:10px} .paged a{color:#6CB8FF} .req{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--sans);color:#FFB340;padding:6px 10px;border-radius:999px;background:rgba(255,159,10,.14);margin-top:14px} /* price */ .price{text-align:center} .price p{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);line-height:1.25;font-weight:600;max-width:24em;margin:0 auto} .price a{display:inline-block;margin-top:14px;font-weight:600} /* faq */ .faq{max-width:760px;margin-top:28px} .faq details{background:var(--card);border-radius:0} .faq details:first-child{border-radius:12px 12px 0 0}.faq details:last-child{border-radius:0 0 12px 12px} .faq details+details summary{box-shadow:inset 0 .5px 0 var(--separator)} .faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 20px;font-weight:600;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:22px;top:22px;width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .3s var(--snappy)} .faq details[open] summary::after{transform:rotate(225deg);top:26px} .faq details p{padding:0 20px 18px;color:var(--ink-2)} /* footer */ footer{padding:48px 0 64px;font-size:15px;color:var(--ink-2);border-top:.5px solid var(--separator)} footer nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:14px} footer a{color:var(--ink)} /* reveal */ .rv{opacity:1} @media (prefers-reduced-motion:no-preference){ .js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--snappy),transform .7s var(--snappy)} .js .rv.in{opacity:1;transform:none} .js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}} /* v2: section grounds, seams, page-as-a-run accessory */ :root{--paper:#E9ECF4;--paper-2:#DDE2EE;--night:#070D2B;--night-card:#121937;--night-card-2:#1A2146} @media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#0F1322;--paper-2:#161B2E}} :root[data-theme=dark]{--paper:#0F1322;--paper-2:#161B2E} .v2 section.band{position:relative;padding:120px 0} @media (max-width:600px){.v2 section.band{padding:80px 0}} .v2 .hero-foot{height:150px} .s-paper{background:var(--paper)}.s-grey{background:var(--page)} .s-night{background:var(--night);color:#fff;--card:var(--night-card);--card-raised:var(--night-card-2);--ink:#fff;--ink-2:rgba(235,235,245,.64);--ink-3:rgba(235,235,245,.3);--separator:rgba(255,255,255,.12);--chip:rgba(255,255,255,.12);--page:#0B1234} .s-night .eyebrow{color:rgba(253,217,227,.8)} .s-night .surface .vis{background:radial-gradient(120% 90% at 50% 0%,#2E2C5A,#141A3E)} .sec-head{max-width:40em} .v2 .h2{font-size:clamp(32px,4.4vw,52px);line-height:1.05;letter-spacing:-.022em} /* seam: a step bead straddling the boundary, like the app's step track */ .seam{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center} .seam span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 14px/1 var(--sans);font-variant-numeric:tabular-nums;background:var(--card-raised,#fff);color:var(--ink-2);box-shadow:0 0 0 6px var(--seam-ring,rgba(0,0,0,.04)),0 2px 8px rgba(0,0,0,.08);transition:background .4s var(--snappy),color .4s,transform .4s var(--snappy)} .s-paper .seam span{background:#fff;color:rgba(60,60,67,.6)} .s-night .seam span{background:var(--night-card-2);color:rgba(235,235,245,.7);--seam-ring:rgba(255,255,255,.06)} .seam.past span{background:var(--accent);color:#fff;transform:scale(1.05)} .seam::before{content:"";position:absolute;bottom:100%;width:2px;height:48px;background:linear-gradient(transparent,var(--ink-3))} .seam::after{content:"";position:absolute;top:100%;width:2px;height:48px;background:linear-gradient(var(--ink-3),transparent)} /* problem: words light up as you scroll */ .v2 .problem{padding:140px 0 150px} .v2 .problem p{font-size:clamp(34px,5.6vw,72px);line-height:1.04;letter-spacing:-.03em;max-width:15em} .v2 .problem p.p2{margin-top:28px;color:var(--ink)} .problem .w{transition:opacity .35s,color .35s} .js .problem [data-words] .w{opacity:.18} .js .problem [data-words] .w.lit{opacity:1} @media (prefers-reduced-motion:reduce){.js .problem [data-words] .w{opacity:1}} /* moments on grey: bigger, taller */ .v2 .moment .vis{height:400px;background:linear-gradient(180deg,var(--paper),var(--page))} .v2 .moment h3{font-size:20px;line-height:25px} /* surfaces on night */ .v2 .surface .vis{height:220px} /* routines: big emblems */ .v2 .rcard{padding:24px;min-height:250px} .v2 .rcard .emb{width:56px;height:56px;border-radius:15px;box-shadow:0 8px 20px -6px var(--sh,rgba(0,0,0,.3))} .v2 .rcard .emb svg{width:30px;height:30px} /* paged on paper, light card */ .s-paper .paged{background:var(--card);color:var(--ink);padding:44px} .s-paper .paged .paged-line{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-top:12px;max-width:26em} .s-paper .req{color:var(--question);background:var(--question-wash)} .btn-plain{background:var(--chip);color:var(--ink)} /* privacy on night: giant numerals */ .bigzeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)} .bigzeros div{padding:28px 0 32px;text-align:left} .bigzeros div+div{border-left:1px solid rgba(255,255,255,.14);padding-left:28px} .bigzeros b{display:block;font:200 clamp(96px,17vw,220px)/.85 var(--display);letter-spacing:-.05em;color:var(--brand-cream);font-variant-numeric:tabular-nums} .bigzeros span{display:block;margin-top:14px;font-size:17px;color:rgba(235,235,245,.72)} @media (max-width:600px){.bigzeros div+div{padding-left:14px}.bigzeros span{font-size:15px}} .priv-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-top:36px} .priv-copy p{color:rgba(235,235,245,.78);max-width:34em;font-size:19px;line-height:1.5} .priv-copy a{color:#fff;font-weight:600;white-space:nowrap} @media (max-width:700px){.priv-copy{grid-template-columns:minmax(0,1fr)}} .v2 .price p{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.015em} .v2 .faq{margin-top:32px} .v2 footer{background:var(--page)} /* the page's own bottom accessory: this page is a run */ .acc{position:fixed;left:50%;bottom:16px;z-index:50;display:flex;align-items:center;gap:12px;width:min(520px,calc(100% - 24px));padding:8px 8px 8px 12px;border-radius:999px;color:var(--ink);background:color-mix(in srgb,var(--card) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 4px 12px rgba(0,0,0,.12),inset 0 0 0 .5px var(--separator);transform:translate(-50%,140%);opacity:0;transition:transform .5s var(--snappy),opacity .3s} .acc.on{transform:translate(-50%,0);opacity:1} .acc-ring{flex:none;color:var(--accent)} .acc-ring circle[data-acc-arc]{transition:stroke-dashoffset .4s var(--snappy)} .acc-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2} .acc-txt b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acc-txt span{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums} .acc-next{flex:none;width:52px;height:40px;border-radius:20px;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;transition:opacity .2s} .acc-next:hover{opacity:.85} .acc-go{flex:none;height:40px;padding:0 18px;border-radius:20px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;display:none;align-items:center} .acc-go:hover{text-decoration:none;opacity:.85} .acc.last .acc-next{display:none}.stage-beta .acc.last .acc-go.only-beta,.stage-release .acc.last .acc-go.only-release{display:inline-flex} .v2 .watch{width:176px;aspect-ratio:auto;height:auto;border-radius:46px;padding:10px} .v2 .wscreen{height:auto;aspect-ratio:352/430;border-radius:36px;padding:10px 10px 12px;justify-content:flex-start} .wtop{display:flex;justify-content:space-between;align-items:center} .wback{width:22px;height:22px;border-radius:50%;background:#2C2C2E;display:grid;place-items:center;color:#fff} .wclock{font:600 13px/1 var(--sans);font-variant-numeric:tabular-nums} .wroutine{text-align:right;font:500 10px/1.2 var(--sans);color:rgba(235,235,245,.55);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .v2 .wscreen .ttl{flex:none;text-align:center;font:600 12px/1.15 var(--display);margin-top:8px;min-height:28px} .wtime{text-align:center;font:500 19px/1 var(--sans);color:#FF9F0A;font-variant-numeric:tabular-nums;margin-top:4px} .wtrack{display:flex;align-items:center;margin:9px 0 8px} .wb{flex:none;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font:600 8px/1 var(--sans);font-style:normal;background:#3A3A3C;color:#fff;transition:background .32s,transform .32s var(--snappy)} .wb.done{background:rgba(255,159,10,.35)}.wb.now{background:#FF9F0A;transform:scale(1.15)} .wseg{flex:1;height:2px;background:#3A3A3C;transition:background .32s}.wseg.done{background:rgba(255,159,10,.6)} .wbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:auto} .wbtns span{height:30px;border-radius:12px;background:#3A3A3C;display:grid;place-items:center;color:#fff;font-size:11px;letter-spacing:1px} .wbtns .nx{background:rgba(255,159,10,.3);color:#FF9F0A;transition:filter .15s}.wbtns .nx.press{filter:brightness(.6)} .s-wreal{width:118px;border-radius:30px;overflow:hidden;box-shadow:0 0 0 6px #1a1a22,0 0 0 7px #3A3A48} .s-wreal img{width:100%;height:auto} /* v3: mark, wordmark, gradient type, liquid glass, flipping seams */ .brand{gap:8px} .brand .mark{width:34px;height:34px;border-radius:0;filter:drop-shadow(0 2px 6px rgba(254,4,148,.35))} .wordmark{font-family:ui-rounded,"SF Pro Rounded",var(--display);font-weight:700;font-size:19px;letter-spacing:-.015em;background:linear-gradient(95deg,#FFFFFF 0%,#FDD9E3 40%,#FF8FCF 72%,#D673F1 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .nav.light .wordmark{background-image:linear-gradient(95deg,#012152 0%,#3A2A7A 45%,#9B34C9 100%)} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .nav.light .wordmark{background-image:linear-gradient(95deg,#FFFFFF,#FDD9E3 40%,#FF8FCF 72%,#D673F1)}} :root[data-theme=dark] .nav.light .wordmark{background-image:linear-gradient(95deg,#FFFFFF,#FDD9E3 40%,#FF8FCF 72%,#D673F1)} .hero h1{background:linear-gradient(100deg,#FFFFFF 0%,#FFF2F6 30%,#FDD9E3 55%,#F7A8D8 80%,#D99BF3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em} .s-night .h2{background:linear-gradient(100deg,#FFFFFF 0%,#FDD9E3 70%,#E3B3F5 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .bigzeros b{background:linear-gradient(180deg,#FFFFFF 0%,#FDD9E3 45%,#D673F1 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .m-head h1{background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 45%,#7A3FB8 100%);-webkit-background-clip:text;background-clip:text;color:transparent} /* liquid glass */ .glass{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(22px) saturate(1.9);backdrop-filter:blur(22px) saturate(1.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.08),inset 0 0 0 .5px rgba(255,255,255,.28),0 10px 30px -8px rgba(0,0,0,.35)} .acc{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 .5px var(--separator),0 10px 30px -8px rgba(0,0,0,.28)} /* seam flips from its number to its icon as you pass it */ .seam span{position:relative;transform-style:preserve-3d;transition:transform .7s var(--snappy),background .4s,color .4s} .seam .f{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;backface-visibility:hidden;-webkit-backface-visibility:hidden} .seam .fi{transform:rotateX(180deg)} .seam.past span{transform:rotateX(180deg)} @media (prefers-reduced-motion:reduce){.seam span{transition:none}} /* gradient type on light grounds */ :root{--grad-ink:linear-gradient(95deg,#012152 0%,#3B2A86 40%,#A01D92 78%,#D14FD9 100%);--grad-soft:linear-gradient(95deg,#3B2A86 0%,#A01D92 55%,#D673F1 100%)} @media (prefers-color-scheme:dark){:root:not([data-theme=light]){--grad-ink:linear-gradient(95deg,#FFFFFF 0%,#FDD9E3 42%,#FF8FCF 74%,#D673F1 100%);--grad-soft:linear-gradient(95deg,#FDD9E3,#FF8FCF 55%,#D673F1)}} :root[data-theme=dark]{--grad-ink:linear-gradient(95deg,#FFFFFF 0%,#FDD9E3 42%,#FF8FCF 74%,#D673F1 100%);--grad-soft:linear-gradient(95deg,#FDD9E3,#FF8FCF 55%,#D673F1)} .problem [data-words] .w{background-image:var(--g,var(--grad-ink));background-size:var(--pw,100%) 100%;background-position:calc(-1 * var(--x,0px)) 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone} .problem .p2 .w{--g:var(--grad-soft)} .v2 .s-grey .h2,.v2 .s-paper .h2,.v2 .price p{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em} /* v4: logo in hero, sparks, emblem rings, bento surfaces, widget, FAQ */ .mascot-logo{position:relative;z-index:2;width:100%;height:100%;filter:drop-shadow(0 10px 30px rgba(254,4,148,.45))} .sparks{position:absolute;left:-50%;top:-50%;z-index:1;pointer-events:none} .emb-ring{position:relative;display:inline-grid;place-items:center;flex:none} .emb-ring>svg:first-child{position:absolute;inset:0} .emb-ring .g{position:relative} .island{width:112px;padding:0 11px 0 4px} .island .pos,.isl-x .pos{font:600 14px/1 var(--sans);color:#fff;font-variant-numeric:tabular-nums} .bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:48px} .bento .b3{grid-column:span 3}.bento .b2{grid-column:span 2} @media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .b3{grid-column:span 2}.bento .b2{grid-column:span 1}} @media (max-width:520px){.bento{grid-template-columns:minmax(0,1fr)}.bento .b3,.bento .b2{grid-column:span 1}} .v2 .bento .surface .vis{height:300px} .vis-lock{background:linear-gradient(180deg,#2B2F4A 0%,#44385E 55%,#6B4E6E 100%)!important} .mini-lock{position:relative;width:340px;display:flex;flex-direction:column;align-items:center;gap:14px} .mini-time{font:200 64px/1 var(--display);color:rgba(255,255,255,.9);letter-spacing:-.02em} .la.la-mini{position:static;width:320px} @media (max-width:1000px){.mini-lock{transform:scale(.82)}} .isl-x{width:min(84%,360px);border-radius:40px;background:#000;padding:16px 18px 14px;color:#fff;box-shadow:0 20px 40px -10px rgba(0,0,0,.6)} .ix-top{display:flex;justify-content:space-between;align-items:flex-start} .ix-top .pos{color:rgba(235,235,245,.55);font-weight:500} .ix-name{text-align:center;color:#FF9F0A;font:500 13px/1 var(--sans);margin-top:-6px} .ix-mid{display:flex;align-items:center;gap:10px;margin-top:10px} .ix-bead{flex:none;width:28px;height:28px;border-radius:50%;background:#FF9F0A;display:grid;place-items:center;font:600 14px/1 var(--sans)} .ix-mid b{font:700 18px/1.15 var(--display);min-width:0;flex:0 1 auto;transition:opacity .25s} .ix-line{flex:1;min-width:16px;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(255,159,10,.7),rgba(255,159,10,.1))} .isl-x .tb.next{flex:none;width:56px;height:38px;border-radius:19px} .ix-bot{display:flex;align-items:center;gap:12px;margin-top:12px} .ix-pill{height:38px;width:60px;border-radius:19px;background:rgba(10,132,255,.28);color:#5AB0FF;display:grid;place-items:center} .ix-pill.r{margin-left:auto} .wdg{width:280px;border-radius:26px;padding:16px;background:rgba(242,242,247,.92);color:#000;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.6),0 20px 40px -12px rgba(0,0,0,.5);transform:scale(.92)} .wd-top{display:flex;align-items:center;gap:8px} .wd-name{color:#C77700;font:600 15px/1 var(--sans)} .wd-t{margin-left:auto;color:#C77700;font:600 20px/1 var(--sans);font-variant-numeric:tabular-nums} .wd-mid{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:6px;margin-top:10px} .wd-mid b{text-align:center;font:700 16px/1.15 var(--display);transition:opacity .25s} .wd-b{height:32px;border-radius:16px;background:rgba(10,132,255,.14);color:#0A84FF;display:grid;place-items:center} .wd-b.nx{background:#0A84FF;color:#fff;transition:filter .15s}.wd-b.nx.press{filter:brightness(.75)} .wd-track{margin:12px 0 8px} .wd-track .bead{width:18px;height:18px;font-size:10px;background:#8E8E93} .wd-track .bead.done{background:rgba(255,159,10,.5)}.wd-track .bead.now{background:#FF9F0A} .wd-track .seg{background:rgba(60,60,67,.18)}.wd-track .seg.done{background:rgba(255,159,10,.6)} .wd-rule{height:.5px;background:rgba(60,60,67,.29);margin:6px 0 8px} .wd-d{font-size:12px;line-height:1.35;color:rgba(60,60,67,.6)} .wd-l{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.5} .wd-l li::marker{color:rgba(60,60,67,.5)} .acc-emb{position:relative;flex:none;width:34px;height:34px;display:grid;place-items:center} .acc-emb .acc-ring{position:absolute;inset:0} .acc-ic{position:relative;color:var(--accent)} .acc-emb::before{content:"";position:absolute;inset:3px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent)} .v2 .faq{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start} @media (max-width:760px){.v2 .faq{grid-template-columns:minmax(0,1fr)}} .v2 .faq details,.v2 .faq details:first-child,.v2 .faq details:last-child{border-radius:16px;background:color-mix(in srgb,var(--card) 55%,transparent);box-shadow:inset 0 0 0 .5px var(--separator)} .v2 .faq details+details summary{box-shadow:none} .wdg,.wdg *{--ink:#000;--ink-2:rgba(60,60,67,.6)}.wdg .wd-d{color:rgba(60,60,67,.6);font-size:12px;line-height:1.35;margin:0}.wdg .wd-l,.wdg b{color:#000} .doing-chip{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;width:min(88%,280px);padding:12px 14px;border-radius:18px;background:color-mix(in srgb,var(--card) 78%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 .5px var(--separator),0 12px 30px -10px rgba(0,0,0,.35)} .doing-chip .status{margin-top:10px;padding-top:10px} .shotcrop.low{border-radius:22px 22px 0 0}.shotcrop.low img{margin-top:-212px} .ask-float{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;width:min(88%,290px);padding:12px 14px;background:color-mix(in srgb,var(--card) 84%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 .5px var(--separator),0 12px 30px -10px rgba(0,0,0,.35)} .s-paper .paged a.btn{color:var(--ink)} .v2 .s-ab{margin-left:84px} .v2 .s-ab .lbl{left:-84px;width:72px} /* inner pages */ .inner .p-head{position:relative;background:var(--paper);padding:72px 0 120px;overflow:hidden} .inner .p-head h1{font-family:var(--display);font-size:clamp(36px,5.4vw,60px);line-height:1.04;font-weight:700;letter-spacing:-.025em;max-width:16em;margin-top:10px;background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em} .inner .p-head .lede{font-size:19px;line-height:1.5;margin-top:16px;max-width:34em;color:var(--ink-2)} .p-hill{position:absolute;left:0;right:0;bottom:-1px;pointer-events:none}.p-hill svg{display:block;width:100%;height:auto} .crumb{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--ink-2)}.crumb a{color:var(--ink-2)}.crumb a:hover{color:var(--ink)} .inner .h2{font-family:var(--display);font-size:clamp(26px,3.2vw,34px);line-height:1.1;font-weight:700;letter-spacing:-.015em;background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.05em} .inner section.band{padding:72px 0} .inner section.band+section.band{padding-top:24px} .grp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} .grp-head p{color:var(--ink-2);margin-top:6px;max-width:34em} .grp-head .count{font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums} .shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px} @media (max-width:820px){.shelf{grid-template-columns:minmax(0,1fr)}} .feat{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--card);color:var(--ink);transition:transform .35s var(--snappy),box-shadow .35s} .feat:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(0,0,0,.35)} .feat .wash{height:132px;display:flex;align-items:flex-end;padding:18px;background:radial-gradient(120% 120% at 0% 100%,color-mix(in srgb,var(--t) 30%,transparent),color-mix(in srgb,var(--t) 8%,transparent) 70%)} .feat .body{padding:16px 18px 20px} .feat h3{font-size:19px;line-height:24px;font-weight:600} .feat p{font-size:15px;line-height:20px;color:var(--ink-2);margin-top:4px} .emb2{flex:none;display:grid;place-items:center;color:#fff;background:var(--t);width:var(--s,44px);height:var(--s,44px);border-radius:calc(var(--s,44px)*.27);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--t) 70%,transparent)} .emb2 svg{width:calc(var(--s,44px)*.54);height:calc(var(--s,44px)*.54)} .rest{margin-top:12px;background:var(--card);border-radius:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:820px){.rest{grid-template-columns:minmax(0,1fr)}} .rrow{display:flex;align-items:center;gap:14px;padding:12px 18px;color:var(--ink);min-height:64px;box-shadow:inset 0 -.5px 0 var(--separator)} .rrow:hover{text-decoration:none;background:color-mix(in srgb,var(--ink) 4%,transparent)} .rrow b{flex:1;font-weight:500} .rrow .chev{color:var(--ink-3)} .jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px} .jump a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 8px;border-radius:999px;background:color-mix(in srgb,var(--card) 70%,transparent);box-shadow:inset 0 0 0 .5px var(--separator);color:var(--ink);font-size:15px} .jump a:hover{text-decoration:none;background:var(--card)} .jump .emb2{--s:24px;box-shadow:none} /* routine page */ .r-head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:center} @media (max-width:860px){.r-head{grid-template-columns:minmax(0,1fr)}.r-head .r-shot{display:none}} .r-head .emb2{--s:64px;margin-top:22px} .r-add{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:28px} .btn-accent{background:var(--accent);color:#fff} .btn[aria-disabled=true]{opacity:.45;pointer-events:none} .r-note{font-size:15px;color:var(--ink-2)} .r-copy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;color:var(--ink-2);max-width:100%} .r-copy>span{white-space:nowrap} .r-copy code{font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--chip);padding:4px 8px;border-radius:6px;color:var(--ink);max-width:min(28ch,100%);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .r-shot{position:relative;width:260px;justify-self:center;border-radius:40px;overflow:hidden;box-shadow:0 0 0 8px #1C1C1E,0 30px 60px -20px rgba(0,0,0,.4);transform:rotate(3deg)} .r-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start} @media (max-width:860px){.r-cols{grid-template-columns:minmax(0,1fr)}} .steps{list-style:none;margin:0;padding:0;background:var(--card);border-radius:16px} .steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:18px 20px;box-shadow:inset 0 -.5px 0 var(--separator)} .steps li:last-child{box-shadow:none} .steps .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 14px/1 var(--sans);font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--t) 16%,transparent);color:var(--t)} .steps b{font-weight:600;display:block} .steps p{font-size:15px;line-height:20px;color:var(--ink-2);margin-top:4px} .steps .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:var(--chip);font:600 12px/1 var(--sans);color:var(--ink-2)} .side{display:flex;flex-direction:column;gap:16px} .side .card{padding:20px} .side h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)} .side p,.side li{font-size:15px;line-height:1.5;margin-top:8px} .side ul{margin:0;padding-left:18px} /* pricing */ .banner{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-ink);font-weight:600;font-size:15px;margin-top:28px;width:fit-content} .tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} @media (max-width:760px){.tiers{grid-template-columns:minmax(0,1fr)}} .tier{padding:28px;border-radius:20px;background:var(--card);display:flex;flex-direction:column} .tier.free{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)} .tier h2{font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)} .tier .big{font:700 clamp(34px,4vw,44px)/1.05 var(--display);letter-spacing:-.02em;margin-top:10px} .tier .sub{color:var(--ink-2);margin-top:6px} .tier ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px;font-size:15px} .tier li{display:flex;gap:10px;align-items:flex-start} .tier li svg{flex:none;margin-top:2px;color:var(--ink-2)} .tier .btn{margin-top:auto;align-self:flex-start} .tier .foot{margin-top:22px} .inner .faq details,.inner .faq details:first-child,.inner .faq details:last-child{border-radius:16px;background:color-mix(in srgb,var(--card) 60%,transparent);box-shadow:inset 0 0 0 .5px var(--separator)} .inner .faq details+details summary{box-shadow:none} .rest .rrow:last-child,.rest .rrow:nth-last-child(2):nth-child(odd){box-shadow:none} @media (max-width:820px){.rest .rrow:nth-last-child(2):nth-child(odd){box-shadow:inset 0 -.5px 0 var(--separator)}} /* help */ .h-search{display:flex;align-items:center;gap:10px;margin-top:28px;max-width:520px;height:48px;padding:0 16px;border-radius:999px;background:color-mix(in srgb,var(--card) 72%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 .5px var(--separator);color:var(--ink-2)} .h-search input{flex:1;min-width:0;border:0;background:transparent;font:17px var(--sans);color:var(--ink);outline:none} .h-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start} @media (max-width:900px){.h-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.h-grid{grid-template-columns:minmax(0,1fr)}} .h-card{padding:8px 0} .h-top{display:flex;align-items:center;gap:12px;padding:14px 18px 8px} .h-top h2{font-size:17px;font-weight:600} .h-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)} .h-card ul{list-style:none;margin:0;padding:0 0 6px} .h-card li a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 18px 11px 64px;color:var(--ink);font-size:15px;box-shadow:inset 64px 0 0 transparent} .h-card li+li a{box-shadow:inset 0 .5px 0 var(--separator);background-clip:padding-box} .h-card li a svg{color:var(--ink-3);flex:none} .h-card li a:hover{text-decoration:none;background:color-mix(in srgb,var(--ink) 4%,transparent)} .h-card[hidden],.h-card li[hidden]{display:none} .h-more{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:48px;padding:32px;border-radius:20px;background:var(--paper)} .h-more p{color:var(--ink-2);margin-top:6px} .a-wrap{max-width:760px} .prose{background:var(--card);border-radius:20px;padding:36px 40px} @media (max-width:600px){.prose{padding:24px 20px}} .prose h2{font-size:22px;line-height:28px;font-weight:600;margin:32px 0 12px}.prose h2:first-child{margin-top:0} .prose p{line-height:1.55} .a-steps{margin:0;padding:0;list-style:none;counter-reset:s} .a-steps li{counter-increment:s;position:relative;padding:0 0 18px 44px;line-height:1.5} .a-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 14px/1 var(--sans);background:var(--accent);color:#fff} .a-steps li::after{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:var(--separator)}.a-steps li:last-child::after{display:none} .a-steps b{display:block;font-weight:600} .note-grey,.note-orange{margin:20px 0;padding:14px 16px;border-radius:12px;background:var(--page)} .note-grey b,.note-orange b{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-bottom:4px;color:var(--ink-2)} .note-orange{background:var(--question-wash)}.note-orange b{color:var(--question)} .rel{background:var(--page);border-radius:14px;overflow:hidden} .rel .rrow{padding:10px 16px;min-height:56px}.rel .rrow:last-child{box-shadow:none}.rel .rrow>svg{color:var(--ink-3)} /* changes */ .timeline{position:relative;max-width:760px;display:flex;flex-direction:column;gap:24px} .timeline::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--separator)} .ch{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:20px;align-items:start} .ch-bead{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--ink-2);box-shadow:0 0 0 6px var(--page)} .ch-bead.now{background:var(--accent);color:#fff} .ch-body{padding:22px 24px} .ch-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .ch-top h2{font-size:20px;font-weight:600} .ch-body ul{margin:12px 0 0;padding-left:18px;line-height:1.6} /* beta */ .b-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} @media (max-width:760px){.b-grid{grid-template-columns:minmax(0,1fr)}} .b-card{padding:26px}.b-card h2{font-size:20px;font-weight:600;margin-top:14px}.b-card p{color:var(--ink-2);margin-top:6px} .b-req{margin-top:16px;padding:26px}.b-req h2{font-size:20px;font-weight:600} .req-row{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;box-shadow:inset 0 -.5px 0 var(--separator)}.req-row:last-child{box-shadow:none;padding-bottom:0} .req-row p{color:var(--ink-2);font-size:15px} .b-full{margin-top:28px;font-size:17px} /* press */ .p-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;align-items:start} @media (max-width:860px){.p-cols{grid-template-columns:minmax(0,1fr)}} .facts{padding:24px} .facts dl{margin:12px 0 0}.facts dl div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:12px 0;box-shadow:inset 0 -.5px 0 var(--separator)}.facts dl div:last-child{box-shadow:none} .facts dt{color:var(--ink-2);font-size:15px}.facts dd{margin:0;font-size:15px} .descs{display:flex;flex-direction:column;gap:16px} .d-card{padding:20px 22px}.d-top{display:flex;justify-content:space-between;align-items:center} .d-card p{margin-top:8px;line-height:1.55} .copy{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:999px;background:var(--chip);color:var(--ink);font:600 13px var(--sans);cursor:pointer} .copy.done{background:color-mix(in srgb,var(--completed) 18%,transparent);color:var(--completed)} .p-assets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px} @media (max-width:760px){.p-assets{grid-template-columns:minmax(0,1fr)}} .asset{margin:0}.a-vis{height:220px;display:grid;place-items:center;margin:8px;border-radius:12px;background:var(--page)} .asset figcaption{padding:10px 18px 18px;font-size:15px;display:flex;flex-direction:column;gap:6px;align-items:flex-start} /* 404 */ .nf{position:relative;min-height:calc(100svh - 68px);background:var(--brand-dusk);color:#fff;overflow:hidden;display:grid;place-items:center;text-align:center} .nf .hill{bottom:-2px} .nf-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:80px 24px 160px} .nf-mark{width:120px;height:120px;margin-bottom:20px;filter:drop-shadow(0 10px 30px rgba(254,4,148,.45))} .nf h1{font-family:var(--display);font-size:clamp(36px,5vw,56px);font-weight:700;letter-spacing:-.02em;margin-top:8px;background:linear-gradient(100deg,#fff,#FDD9E3 55%,#D99BF3);-webkit-background-clip:text;background-clip:text;color:transparent} .nf p{color:rgba(255,255,255,.75);margin-top:12px}.nf .ctas{justify-content:center} .legal h2{font-size:22px;line-height:28px;margin:36px 0 10px}.legal h2:first-child{margin-top:0} .legal h3{font-size:17px;font-weight:600;margin:22px 0 6px} .legal p{margin:0 0 14px}.legal ul,.legal ol{padding-left:20px;margin:0 0 14px}.legal li{margin:0 0 8px;line-height:1.55} .legal .muted{color:var(--ink-2);font-size:15px} .legal code{font:14px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--chip);padding:1px 6px;border-radius:5px} .legal .mail{font-size:19px;font-weight:600} .legal pre{background:var(--page);padding:14px 16px;border-radius:12px;overflow:auto;font-size:14px} .link-page h1{font-size:clamp(30px,4.2vw,44px);max-width:16em} .lp-card{max-width:560px;margin-top:22px;padding:22px 24px;border-radius:20px;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgba(255,255,255,.2)} .lp-card p{color:rgba(255,255,255,.9);margin:0 0 12px;line-height:1.55}.lp-card p:last-child{margin-bottom:0} .lp-card .muted{color:rgba(255,255,255,.66);font-size:15px} .link-page .ctas{margin-top:28px} /* inner page heads: dusk, like the home hero */ .inner .p-head{background:radial-gradient(90% 120% at 85% -10%,rgba(214,115,241,.28),transparent 60%),var(--brand-dusk);color:#fff} .inner .p-head::before{content:"";position:absolute;inset:0 0 40% 0;pointer-events:none;background-image:radial-gradient(1.2px 1.2px at 12% 22%,#fff9 50%,transparent),radial-gradient(1px 1px at 34% 48%,#fff7 50%,transparent),radial-gradient(1.4px 1.4px at 58% 16%,#fffa 50%,transparent),radial-gradient(1px 1px at 72% 40%,#fff6 50%,transparent),radial-gradient(1.2px 1.2px at 90% 12%,#fff9 50%,transparent)} .inner .p-head>.wrap{position:relative} .inner .p-head h1{background:linear-gradient(100deg,#FFFFFF 0%,#FFF2F6 35%,#FDD9E3 60%,#E3B3F5 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .inner .p-head .lede,.inner .p-head .r-note,.inner .p-head .r-copy{color:rgba(255,255,255,.76)} .inner .p-head .lede a{color:#9FD0FF} .inner .p-head .eyebrow,.inner .p-head .crumb,.inner .p-head .crumb a{color:rgba(253,217,227,.82)} .inner .p-head .crumb a:hover{color:#fff} .inner .p-head .jump a,.inner .p-head .h-search{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgba(255,255,255,.22)} .inner .p-head .h-search input{color:#fff}.inner .p-head .h-search input::placeholder{color:rgba(255,255,255,.6)} .inner .p-head .jump a:hover{background:rgba(255,255,255,.2)} .inner .p-head .banner{background:rgba(10,132,255,.22);color:#9FD0FF} .inner .p-head .r-copy code,.inner .p-head .copy{background:rgba(255,255,255,.12);color:#fff} .inner .p-head .todo{background:rgba(255,159,10,.2);color:#FFC46B} /* mobile */ @media (max-width:600px){ .bigzeros b{font-size:clamp(56px,19vw,96px)} .v2 section.band{padding:72px 0} .v2 .problem{padding:96px 0 104px} .seam span{width:32px;height:32px} .priv-copy p{font-size:17px} .s-paper .paged{padding:24px} .h-more{padding:22px} .prose{border-radius:16px} } @media (max-width:420px){ .devices{height:540px} .phone{width:258px;border-radius:42px}.screen{border-radius:33px} .lock-time{font-size:70px} .v2 .watch{width:148px} .hero .wrap{gap:28px} .mascot{left:calc(100% - 258px - 72px);top:70px;width:84px;height:84px} .acc{bottom:10px} } /* liquid glass surfaces across the site */ :root{--glass-bg:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.52));--glass-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(60,60,67,.14),0 1px 2px rgba(0,0,0,.04),0 18px 40px -24px rgba(20,24,60,.28)} @media (prefers-color-scheme:dark){:root:not([data-theme=light]){--glass-bg:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));--glass-edge:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 .5px rgba(255,255,255,.1),0 18px 40px -24px rgba(0,0,0,.8)}} :root[data-theme=dark]{--glass-bg:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));--glass-edge:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 .5px rgba(255,255,255,.1),0 18px 40px -24px rgba(0,0,0,.8)} .s-night{--glass-bg:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));--glass-edge:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 .5px rgba(255,255,255,.1),0 18px 40px -24px rgba(0,0,0,.8)} .card,.prose,.steps,.rest,.feat,.h-more,.s-paper .paged,.v2 .faq details,.v2 .faq details:first-child,.v2 .faq details:last-child,.inner .faq details,.inner .faq details:first-child,.inner .faq details:last-child{background:var(--glass-bg);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);box-shadow:var(--glass-edge)} .tier.free{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 2px var(--ink)} .card .card,.prose .card{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} /* soft light behind the glass so it has something to bend */ .s-grey,.s-paper{background-image:radial-gradient(40% 50% at 8% 20%,rgba(94,92,230,.10),transparent 70%),radial-gradient(38% 45% at 92% 70%,rgba(214,115,241,.10),transparent 70%),radial-gradient(30% 40% at 55% 105%,rgba(10,132,255,.08),transparent 70%)} .s-night{background-image:radial-gradient(45% 55% at 10% 10%,rgba(94,92,230,.22),transparent 70%),radial-gradient(40% 50% at 90% 90%,rgba(214,115,241,.16),transparent 70%)} .moment .vis,.surface .vis,.a-vis{box-shadow:inset 0 0 0 .5px rgba(127,127,140,.18)} .tiers3{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){.tiers3{grid-template-columns:minmax(0,1fr)}} .tiers3 .tier ul{margin-bottom:28px} .tiers3 .tier .btn,.tiers3 .tier .r-note{margin-top:auto;align-self:flex-start} .tier .big[data-price]{font-variant-numeric:tabular-nums} .pro-year{box-shadow:var(--glass-edge),inset 0 0 0 2px var(--accent)!important} .p-lapse{margin-top:24px;color:var(--ink-2);font-size:15px} /* inner pages: light nav */ .nav.light{position:sticky;top:0;color:var(--ink);background:color-mix(in srgb,var(--page) 82%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:0 .5px 0 var(--separator)} .nav.light a{color:var(--ink-2)}.nav.light a:hover,.nav.light a[aria-current]{color:var(--ink)} .nav.light .brand{color:var(--ink)} .nav.light summary{background:var(--chip)} .nav.light details ul{background:var(--card-raised);box-shadow:0 8px 24px rgba(0,0,0,.14)}.nav.light details a{color:var(--ink)} /* methodology */ .m-head{padding:72px 0 40px} .m-head h1{font-family:var(--display);font-size:clamp(34px,5vw,56px);line-height:1.06;font-weight:700;letter-spacing:-.02em;max-width:17em;margin-top:10px} .m-head .lede{font-size:19px;line-height:1.5;max-width:34em;margin-top:20px} .m-head .note{font-size:15px;color:var(--ink-2);margin-top:14px;max-width:40em} .tune{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:40px} @media (max-width:820px){.tune{grid-template-columns:minmax(0,1fr)}} .tune .card{padding:24px} .tune h2{font-size:20px;line-height:25px;font-weight:600} .tune .card>p{color:var(--ink-2);font-size:15px;line-height:20px;margin-top:4px} .lanes{margin-top:22px;display:flex;flex-direction:column;gap:14px} .lane{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px} .lane>span{font-size:13px;color:var(--ink-2)} .beads{position:relative;height:28px} .beads::before{content:"";position:absolute;left:12px;right:12px;top:13px;height:2px;background:var(--separator)} .beads .b{position:absolute;top:1px;left:calc(var(--a)*16.6%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;background:var(--card-raised);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-3);transition:left .9s var(--snappy),background .4s,color .4s,box-shadow .4s} .tune .in .beads .b{left:calc(var(--b,var(--a))*16.6%)} .beads .b.new{opacity:0;transform:scale(.4);transition:opacity .4s .9s,transform .5s var(--snappy) .9s,background .4s,color .4s,box-shadow .4s} .tune .in .beads .b.new{opacity:1;transform:none} .beads .b.changed{box-shadow:inset 0 0 0 2px var(--question);color:var(--question)} .tag-state{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px;margin-left:6px;vertical-align:1px} .tag-state.q{color:var(--question)}.tag-state.k{color:var(--ink-2)} .keepnote{margin-top:16px;font-size:13px;line-height:18px;color:var(--ink-2);min-height:36px} .m-body{display:grid;grid-template-columns:120px minmax(0,680px);gap:56px;justify-content:center;padding-bottom:40px} @media (max-width:1000px){.m-body{grid-template-columns:minmax(0,1fr);gap:0}} .rail{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;align-items:center;padding-top:8px} @media (max-width:1000px){.rail{display:none}} .rail a{position:relative;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 11px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink-3);transition:background .32s var(--snappy),color .32s,box-shadow .32s,transform .32s var(--snappy)} .rail a:hover{text-decoration:none;color:var(--ink)} .rail a+a{margin-top:14px} .rail a+a::before{content:"";position:absolute;bottom:24px;left:11px;width:2px;height:14px;background:var(--separator)} .rail a.past{background:color-mix(in srgb,var(--accent) 22%,var(--card));color:var(--accent-ink);box-shadow:none} .rail a.now{background:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);transform:scale(1.12)} .rail .gap{height:18px} .progress{position:sticky;top:68px;z-index:10;display:none;align-items:center;gap:10px;height:40px;padding:0 16px;margin:0 -16px;background:color-mix(in srgb,var(--page) 88%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-size:13px;color:var(--ink-2);box-shadow:0 .5px 0 var(--separator)} .progress b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .progress i{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);width:var(--pct,0%);transition:width .3s var(--snappy)} @media (max-width:1000px){.progress{display:flex}} .grp{padding-top:40px} .grp>.eyebrow{display:block;margin-bottom:6px} .grp>h2{font-family:var(--display);font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.01em} .pr{background:var(--card);border-radius:16px;padding:28px;margin-top:20px;scroll-margin-top:120px} @media (max-width:600px){.pr{padding:20px}} .pr-top{display:flex;gap:14px;align-items:flex-start} .pr-n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums;background:var(--chip);color:var(--ink)} .pr h3{font-family:var(--display);font-size:22px;line-height:28px;font-weight:600;padding-top:2px} .pr .idea{margin-top:14px;font-size:17px;line-height:1.55} .pr .ex{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--page);font-size:15px;line-height:1.5} .pr .ex b{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:2px} .pr h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin:22px 0 8px} .pr ul{margin:0;padding:0 0 0 18px;font-size:15px;line-height:1.55} .pr li+li{margin-top:6px} .pr .research li::marker{color:var(--accent)} .pr .not{margin-top:20px;padding-top:4px;border-top:.5px solid var(--separator)} .pr .not li::marker{content:"\2013 ";color:var(--ink-3)} .pr em.w{font-style:normal;font-weight:600} .roots{margin-top:48px} .roots ul{list-style:none;padding:0;margin:16px 0 0;background:var(--card);border-radius:12px} .roots li{padding:14px 20px;font-size:15px;line-height:1.5} .roots li+li{box-shadow:inset 0 .5px 0 var(--separator)} .roots b{font-weight:600} .fine{margin-top:40px;font-size:13px;line-height:18px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px} .todo{display:inline-block;padding:1px 6px;border-radius:5px;background:var(--question-wash);color:var(--question);font:600 12px/18px ui-monospace,SFMono-Regular,Menlo,monospace} .legal .tbl{overflow-x:auto;margin:0 0 14px} .legal table{border-collapse:collapse;font-size:15px;line-height:1.45;min-width:100%} .legal th,.legal td{text-align:left;vertical-align:top;padding:9px 12px 9px 0;box-shadow:inset 0 -.5px 0 var(--separator)} .legal th{font-weight:600;color:var(--ink-2);font-size:13px} .theme{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--chip);margin-top:14px} .js .theme{display:inline-flex} html:not(.js) .theme{display:none} .theme button{display:grid;place-items:center;width:34px;height:28px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .25s var(--snappy),color .25s} .theme button[aria-pressed=true]{background:var(--card-raised);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)} .h-shot{margin:18px auto 22px;max-width:250px;text-align:center} .h-shot picture{display:block;border-radius:30px;overflow:hidden;box-shadow:0 0 0 6px #1C1C1E,0 18px 36px -14px rgba(0,0,0,.35)} .h-shot figcaption{margin-top:12px;font-size:13px;line-height:18px;color:var(--ink-2)}