:root{
  --bg:#fff; --fg:#161d29; --fg-2:#8b9099; --muted:#b7bac1;
  --panel:#f6f6f4; --panel-hover:#ececE8; --line:#e8e7e2;
  --navy:#102b4a; --navy-hover:#1c3d63; --gold:#c98619; --gold-ink:#a96a0c; --gold-soft:#fff1d7;
  --green:#21874d; --green-soft:#e4f5ea; --red:#c43d3d; --red-soft:#fbe6e4; --blue:#0f62b4; --blue-soft:#e3f0ff;
  --app-bg:#faf8f3; --app-ink:#10233f; --app-muted:#647084; --app-line:#ebe8e0;
  --radius:clamp(28px,3vw,44px);
  --ease:cubic-bezier(.23,1,.32,1);
  --shadow:0 4px 28px rgba(16,29,46,.08);
  --shadow-lift:0 14px 30px -12px rgba(16,29,46,.22),0 2px 6px rgba(16,29,46,.06);
  --sans:"Inter",-apple-system,"Helvetica Neue",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --ios:-apple-system,"SF Pro Text","Inter",system-ui,sans-serif;
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.emo{font-family:var(--emoji);font-style:normal;font-size:.82em;display:inline-block;margin-left:.08em}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
section{scroll-margin-top:84px}
.sec{padding-top:clamp(110px,14vw,170px)}
.h2{font-size:clamp(32px,4vw,46px);font-weight:400;letter-spacing:-.045em;line-height:1.1;text-align:center;text-wrap:balance}
.h2 span{display:block;color:var(--fg-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;font-size:14px;font-weight:450;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s,transform .25s var(--ease),box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn .i{width:15px;height:15px;transition:transform .3s var(--ease)}
.btn:hover .i-go{transform:translateX(3px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-hover)}
.btn-ghost{background:var(--panel);color:var(--fg)}
.btn-ghost:hover{background:var(--panel-hover)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#f1efe9}
.btn-sm{height:40px;padding:0 18px;font-size:13px}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
.nav-in{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:21px;font-weight:450;letter-spacing:-.045em;justify-self:start}
.brand img{width:19px}
.nav-links{display:flex;gap:30px;font-size:13.5px}
.nav-links a,.nav-right .txt{color:var(--fg);opacity:.86;transition:opacity .2s}
.nav-links a:hover,.nav-right .txt:hover{opacity:1}
.nav-right{justify-self:end;display:flex;align-items:center;gap:24px;font-size:13.5px}
.nav-links a,.nav-right .txt{white-space:nowrap}
@media (max-width:1180px){.nav-right .txt{display:none}.nav-links{gap:24px}}
@media (max-width:1600px){.nav-right.long .txt{display:none}}
@media (max-width:900px){.stage .float{display:none}}

/* hero */
.hero{text-align:center;padding-top:clamp(56px,8vw,92px);overflow-x:clip}
.hero h1{font-size:clamp(40px,5.4vw,70px);font-weight:400;letter-spacing:-.052em;line-height:1.08}
.rot{display:grid;justify-items:center;align-items:center;font-family:var(--serif);font-style:italic;color:var(--muted);letter-spacing:-.02em;min-height:1.18em}
.rot>span{grid-area:1/1;white-space:nowrap;transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease)}
.rot>span:not(.on){opacity:0;filter:blur(10px);transform:translateY(.28em)}
.rot>span.out{transform:translateY(-.28em)}
.hero-sub{max-width:540px;margin:26px auto 0;color:var(--fg-2);font-size:16px;line-height:1.62;text-wrap:pretty}
.hero-cta{display:flex;justify-content:center;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:12.5px;color:var(--muted);display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
.hero-note .i{width:13px;height:13px}

/* fit-to-width boxes */
.fitbox{position:relative;width:100%}
.fit{position:absolute;top:0;left:50%;transform-origin:top center;transform:translateX(-50%) scale(var(--s,1))}

/* hero stage */
.stage{margin-top:60px;-webkit-mask-image:linear-gradient(#000 calc(100% - 150px),transparent 98%);mask-image:linear-gradient(#000 calc(100% - 150px),transparent 98%)}
.stage .fit{width:440px;height:610px}
.prop{position:absolute;mix-blend-mode:multiply;transition:opacity .8s var(--ease),transform 1s var(--ease);pointer-events:none}
.prop-receipt{width:330px;left:-330px;top:90px;transform:rotate(-4deg)}
.prop-texts{width:330px;right:-340px;top:40px;transform:rotate(4deg)}
.stage:not([data-tab="0"]) .prop{opacity:0;transform:translateY(30px) rotate(0) scale(.94)}
.float{position:absolute;z-index:7;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.stage[data-tab="0"] .f0,.stage[data-tab="1"] .f1,.stage[data-tab="2"] .f2,.stage[data-tab="3"] .f3{opacity:1;transform:none;transition-delay:.25s}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:10px 16px 10px 12px;font-size:13.5px;letter-spacing:-.01em;box-shadow:var(--shadow-lift);white-space:nowrap}
.pill .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.pill .dot .i{width:13px;height:13px;stroke-width:2.4}
.dot.g{background:var(--green-soft);color:var(--green)}
.dot.y{background:var(--gold-soft);color:var(--gold-ink)}
.dot.b{background:var(--blue-soft);color:var(--blue)}
.dot.n{background:#e7eef6;color:var(--navy)}
.mini-page{width:250px;background:#fff;border-radius:6px;box-shadow:var(--shadow-lift);padding:18px 16px;transform:rotate(5deg)}

/* phone */
.phone{position:absolute;width:370px;height:800px;border-radius:62px;background:#141414;padding:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 2px #a3a3a8,0 0 0 4px #dcdce0,0 0 0 5px #b4b4b9,0 40px 70px -30px rgba(16,29,46,.45)}
.phone.center{left:50%;margin-left:-185px;top:0}
.screen{position:relative;height:100%;border-radius:50px;overflow:hidden;background:var(--app-bg);font-family:var(--ios);color:var(--app-ink);letter-spacing:-.01em;text-align:left}
.float{text-align:left}
.island{position:absolute;top:11px;left:50%;width:118px;height:34px;margin-left:-59px;background:#000;border-radius:20px;z-index:9}
.sbar{position:relative;z-index:5;height:54px;display:flex;justify-content:space-between;align-items:center;padding:6px 30px 0 42px;font-size:16px;font-weight:600}
.sbar .ic{display:flex;gap:6px;align-items:center}
.sbar svg{fill:currentColor}
.sbar.light{color:#fff}
.scr{position:absolute;inset:54px 0 0;padding:6px 20px;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .6s var(--ease);pointer-events:none}
.scr.full{inset:0;padding:0}
.scr.on{opacity:1;transform:none}
.shot{width:100%;height:100%;object-fit:cover;object-position:top}
.sbar{transition:opacity .3s}
.stage[data-tab="0"] .sbar{opacity:0}

/* app ui */
.ah{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;font-size:16px;font-weight:700;padding:4px 0 14px;text-align:center}
.ah .bk{display:flex;align-items:center;gap:2px;font-weight:600;font-size:15px;text-align:left}
.ah .bk .i{width:18px;height:18px;stroke-width:2.4}
.ah .r{justify-self:end}
.lbl{font-size:13px;font-weight:700;margin:12px 0 7px}
.lbl:first-of-type{margin-top:2px}
.fld{background:#fff;border:1px solid var(--app-line);border-radius:13px;padding:12px 13px;font-size:15px;font-weight:500;display:flex;justify-content:space-between;align-items:center}
.fld.area{display:block;font-weight:400;line-height:1.42;color:var(--app-ink);min-height:96px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;padding:5px 9px;border-radius:8px;white-space:nowrap}
.tag .i{width:12px;height:12px;stroke-width:2.4}
.tag.y{background:var(--gold-soft);color:var(--gold-ink)}
.tag.g{background:var(--green-soft);color:var(--green)}
.tag.r{background:var(--red-soft);color:var(--red)}
.tag.b{background:var(--blue-soft);color:var(--blue)}
.tag.n{background:#e7eef6;color:var(--navy)}
.att{display:flex;gap:9px;margin-top:2px}
.thumb{width:64px;height:64px;border-radius:12px;border:1px solid var(--app-line);background:#fff;overflow:hidden;position:relative}
.thumb.chat{padding:8px 6px;display:flex;flex-direction:column;gap:4px}
.thumb.chat i{display:block;height:7px;border-radius:4px;background:#e4e4e8;width:70%}
.thumb.chat i.me{background:#3b8bf6;align-self:flex-end;width:62%}
.thumb img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.thumb.add{display:grid;place-items:center;color:var(--app-muted);border-style:dashed;background:transparent}
.navybtn{background:var(--app-ink);color:#fff;border-radius:13px;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15.5px}
.navybtn .i{width:18px;height:18px}
.card{background:#fff;border:1px solid var(--app-line);border-radius:16px;padding:14px 15px}
.muted{color:var(--app-muted)}
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-100%);animation:shim 2.6s var(--ease) infinite}
@keyframes shim{60%,100%{transform:translateX(100%)}}
.skel{height:9px;border-radius:5px;background:#ebe9e3;margin-top:8px}

/* lock screen */
.lock{position:absolute;inset:0;background:radial-gradient(120% 70% at 80% 0%,#c9a46a 0%,rgba(201,164,106,0) 55%),linear-gradient(170deg,#24476f 0%,#14304f 45%,#0b1c31 100%);color:#fff;text-align:center}
.lock .date{margin-top:76px;font-size:18px;font-weight:600;opacity:.92}
.lock .time{font-size:92px;font-weight:600;letter-spacing:-.03em;line-height:1;margin-top:2px;font-family:-apple-system,"SF Pro Display","Inter",sans-serif}
.notif{margin:0 12px;text-align:left;background:rgba(245,245,247,.78);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#111;border-radius:22px;padding:13px 14px;display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:start}
.notif .ico{width:38px;height:38px;border-radius:9px;background:#fff;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.notif .ico img{width:22px}
.notif .top{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.notif .top span{font-weight:400;color:#6b6b70;font-size:13px}
.notif p{font-size:14px;line-height:1.33;margin-top:1px}
.notif.old{opacity:.55;transform:scale(.95);margin-top:8px}
.lock .notifs{margin-top:150px}
.on .notif.new{animation:drop .8s var(--ease) both .35s}
@keyframes drop{from{opacity:0;transform:translateY(-26px) scale(.96)}}

/* tabs */
.tabs-wrap{position:relative;z-index:9;display:flex;justify-content:center;margin-top:-30px;padding:0 16px}
.tabs{display:inline-flex;gap:4px;background:var(--panel);border-radius:999px;padding:4px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;border-radius:999px;padding:10px 20px;font-size:14px;color:var(--fg-2);white-space:nowrap;transition:color .3s}
.tab[aria-selected="true"]{color:var(--fg)}
.tab .bgp{position:absolute;inset:0;border-radius:999px;background:#fff;box-shadow:0 3px 18px rgba(16,29,46,.08);opacity:0;transition:opacity .3s}
.tab[aria-selected="true"] .bgp{opacity:1}
.tab span:last-child{position:relative}
.caps{display:grid;max-width:470px;margin:22px auto 0;text-align:center;padding:0 16px}
.cap{grid-area:1/1;color:var(--fg-2);font-size:15.5px;line-height:1.55;opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.cap.on{opacity:1;transform:none;pointer-events:auto}
.cap b{color:var(--fg);font-weight:450}
.cap a{color:var(--fg);white-space:nowrap}
.cap a:hover{text-decoration:underline;text-underline-offset:3px}

/* bento */
.bento{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:60px}
.tile{background:var(--panel);border-radius:30px;padding:30px 32px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.t-press{grid-row:span 2}
.t-zero{grid-column:span 2;min-height:300px}
.big{font-size:56px;font-weight:400;letter-spacing:-.055em;line-height:1}
.tcap{font-size:13.5px;color:var(--fg-2);margin-top:8px}
.say{font-size:26px;letter-spacing:-.04em;line-height:1.12}
.say span{display:block;color:var(--fg-2)}
.article{background:#fff;border-radius:18px;padding:22px 22px 20px;box-shadow:var(--shadow);max-width:330px;transform:rotate(-1.5deg);transition:transform .5s var(--ease)}
.t-press:hover .article{transform:rotate(0) translateY(-3px)}
.mast{font-family:var(--serif);font-size:15px;letter-spacing:.01em;display:flex;align-items:center;gap:8px;color:#7a1f2b}
.mast i{width:6px;height:6px;border-radius:50%;background:#7a1f2b}
.article h4{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.08;letter-spacing:-.01em;margin-top:14px}
.article p{font-size:13px;color:var(--fg-2);margin-top:10px;line-height:1.45}
.article .rd{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;margin-top:14px;color:var(--fg)}
.article .rd .i{width:13px;height:13px}
.vault{position:absolute;right:28px;top:28px;bottom:28px;width:min(46%,330px);display:flex;flex-direction:column;gap:8px;justify-content:center;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.vrow{background:#fff;border-radius:14px;padding:11px 13px;display:flex;align-items:center;gap:10px;font-size:13px;box-shadow:0 1px 2px rgba(16,29,46,.04)}
.vrow .tag{font-size:11px;padding:3px 7px}
.vrow b{font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow .i{width:14px;height:14px;color:var(--fg-2)}
.toast{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 14px 8px 9px;font-size:13px;box-shadow:var(--shadow);align-self:flex-start}
.stamps{display:flex;flex-direction:column;gap:8px}
.stamp{background:#fff;border-radius:14px;padding:10px 12px;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;font-size:13px;box-shadow:0 1px 2px rgba(16,29,46,.04)}
.stamp span{color:var(--fg-2)}
.stamp .i{width:15px;height:15px;color:var(--gold)}
.flags{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;font-family:var(--emoji);font-size:22px;max-width:260px}
.flags span{display:grid;place-items:center;height:36px;background:#fff;border-radius:10px;opacity:0;transform:scale(.7);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.in .flags span{opacity:1;transform:none}

/* showcase */
.show{margin-top:60px;background:var(--panel);border-radius:var(--radius);padding:64px 0 0;overflow:hidden;position:relative}
.show .lap-box .fit{width:1060px}
.lap{position:relative;width:1060px;padding:0 40px}
.lid{width:980px;height:620px;background:#141414;border-radius:24px 24px 6px 6px;padding:15px 15px 22px;box-shadow:inset 0 0 0 1.5px #3a3a3c,0 0 0 1.5px #a8a8ad;margin:0 auto;position:relative}
.lid::before{content:"";position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2b2b2e}
.view{height:100%;border-radius:7px;overflow:hidden;background:#e8e8eb;display:grid;grid-template-rows:40px 1fr;font-family:var(--ios)}
.vbar{background:#f7f7f8;border-bottom:1px solid #dcdce0;display:flex;align-items:center;gap:12px;padding:0 14px;font-size:12px;color:#3a3a3e}
.lights{display:flex;gap:7px}
.lights i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.lights i:nth-child(2){background:#febc2e}
.lights i:nth-child(3){background:#28c840}
.vbar .fn{flex:1;text-align:center;font-weight:600}
.vbar .pg{color:#8a8a90}
.vbody{display:grid;grid-template-columns:120px 1fr;overflow:hidden}
.thumbs{background:#efeff1;border-right:1px solid #dcdce0;padding:16px 22px;display:flex;flex-direction:column;gap:14px;align-items:center}
.thumbs div{width:68px;height:88px;background:#fff;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:8px 7px}
.thumbs div.sel{outline:2.5px solid #3b82f6;outline-offset:3px}
.thumbs i{display:block;height:3px;background:#e2e2e6;border-radius:2px;margin-bottom:4px}
.thumbs i:first-child{width:40%;background:var(--navy)}
.pdfwrap{overflow:hidden;padding:24px 0 0;display:flex;justify-content:center}
.pdf{width:640px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.12);padding:34px 40px;font-family:var(--sans);color:#14202f;font-size:11px;letter-spacing:-.005em}
.pdf-h{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1.5px solid var(--navy);padding-bottom:12px}
.pdf-brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:20px;color:var(--navy)}
.pdf-brand img{width:18px}
.pdf-meta{text-align:right;font-size:10px;color:#5f6876;line-height:1.5}
.pdf-meta b{color:#14202f;font-size:11.5px;font-weight:600}
.pdf h5{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-top:16px}
.pdf .sub{color:#5f6876;font-size:10.5px;margin-top:3px}
.sum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.sum div{background:#f6f5f1;border-radius:6px;padding:8px 10px;font-size:9.5px;color:#5f6876}
.sum b{display:block;font-size:15px;color:#14202f;font-weight:600;letter-spacing:-.02em}
.tbl{width:100%;border-collapse:collapse;margin-top:16px}
.tbl th{font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;color:#5f6876;font-weight:600;text-align:left;padding:0 6px 6px;border-bottom:1px solid #e2e0da}
.tbl td{padding:9px 6px;border-bottom:1px solid #efede8;vertical-align:top;font-size:10px;line-height:1.4}
.tbl td:first-child,.tbl th:first-child{padding-left:0}
.tbl td.dt{white-space:nowrap;color:#14202f;font-weight:500}
.tbl td.dt span{display:block;color:#7a8290;font-weight:400}
.tbl td b{font-weight:600}
.tbl .tag{font-size:8.5px;padding:2px 5px;border-radius:4px}
.tbl .ex{font-weight:600;color:var(--navy)}
.edited{display:inline-flex;margin-top:4px;font-size:8.5px;background:#fff6e6;color:var(--gold-ink);border:1px solid #f3dfb8;border-radius:4px;padding:1px 5px}
.base{width:1060px;height:20px;margin:0 auto;background:linear-gradient(#e6e6e9,#c9c9ce 55%,#a2a2a7);border-radius:2px 2px 20px 20px;position:relative;box-shadow:0 18px 24px -12px rgba(0,0,0,.25)}
.base::before{content:"";position:absolute;top:0;left:50%;width:150px;height:7px;margin-left:-75px;background:#b3b3b8;border-radius:0 0 9px 9px}
.anno{position:absolute;z-index:3;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.in .anno{opacity:1;transform:none}
.in .anno:nth-of-type(2){transition-delay:.15s}.in .anno:nth-of-type(3){transition-delay:.3s}.in .anno:nth-of-type(4){transition-delay:.45s}
.anno .pill{font-size:15px;padding:11px 18px 11px 12px}
.show-low{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:0 64px;margin-top:-6px;position:relative}
.show-copy{padding:70px 0 72px}
.h3{font-size:clamp(30px,3.2vw,40px);font-weight:400;letter-spacing:-.045em;line-height:1.1}
.h3 span{display:block;color:var(--fg-2)}
.show-copy p{color:var(--fg-2);margin-top:20px;max-width:420px;line-height:1.62}
.show-copy .btn{margin-top:28px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;font-size:13px;font-weight:500}
.chip .i{width:14px;height:14px}
.chip.ios{background:#eef1f5;color:#1c2b3d}
.chip.and{background:#e6f4ea;color:#1e7a44}
.chip.doc{background:#fbe9e6;color:#b2392b}
.show-copy .chips{margin-top:26px}
.show-phone{position:relative}
.show-phone .phone{right:-6px;top:-120px;transform:scale(.8);transform-origin:top right}

/* timeline screen */
.tl-h{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 0 14px}
.tl-h h6{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1}
.tl-h small{display:block;font-size:14px;color:var(--app-muted);font-weight:600;margin-top:4px}
.sq{display:flex;gap:7px}
.sq span{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--app-line);display:grid;place-items:center}
.sq .i{width:17px;height:17px}
.search{background:#fff;border:1px solid var(--app-line);border-radius:13px;padding:11px 13px;color:#8b93a1;display:flex;gap:8px;align-items:center;font-size:15px}
.fchips{display:flex;gap:7px;margin:12px -20px 0 0;overflow:hidden}
.fchips span{flex:none;padding:8px 13px;border-radius:10px;border:1px solid var(--app-line);background:#fff;font-weight:700;font-size:13.5px}
.fchips span.on{background:var(--app-ink);color:#fff;border-color:var(--app-ink)}
.month{display:flex;justify-content:space-between;font-weight:800;font-size:16px;margin:20px 0 10px}
.month span{color:var(--app-muted);font-weight:600;font-size:14px}
.rec{background:#fff;border:1px solid var(--app-line);border-radius:16px;padding:13px 14px;margin-bottom:10px}
.rec .when{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:#6f7787;letter-spacing:.02em}
.rec .when .i{width:15px;height:15px}
.rec .ttl{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;margin:8px 0 10px;letter-spacing:-.015em}
.rec .ci{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.rec .ci .i{width:15px;height:15px}
.ci.y{background:var(--gold-soft);color:var(--gold)}
.ci.g{background:var(--green-soft);color:var(--green)}
.ci.r{background:var(--red-soft);color:var(--red)}

/* feature rows */
.rows{padding-top:30px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center;padding-top:clamp(90px,11vw,140px)}
.row.flip .vis{order:2}
.vis{background:var(--panel);border-radius:var(--radius);aspect-ratio:1.04/1;position:relative;overflow:hidden}
.vis .art,.vis .list{position:absolute;inset:0;transition:opacity .5s var(--ease),transform .6s var(--ease),filter .5s var(--ease)}
.vis .list{opacity:0;transform:translateY(12px);pointer-events:none;padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.vis.open .art{opacity:0;filter:blur(8px);transform:scale(.97);pointer-events:none}
.vis.open .list{opacity:1;transform:none;pointer-events:auto}
.list ul{list-style:none}
.list li{font-size:clamp(16px,1.5vw,19px);letter-spacing:-.025em;padding:16px 0;border-bottom:1px solid #e3e2dd}
.list li:first-child{border-top:1px solid #e3e2dd}
.list .btn{margin-top:28px;align-self:flex-start}
.more{position:absolute;right:20px;bottom:20px;z-index:4;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px 0 12px;border-radius:999px;background:#fff;font-size:13px;box-shadow:var(--shadow);transition:transform .25s var(--ease)}
.more:active{transform:scale(.96)}
.more .i{width:14px;height:14px;transition:transform .35s var(--ease)}
.open .more .i{transform:rotate(45deg)}
.copy h3{font-size:clamp(34px,4vw,52px);font-weight:400;letter-spacing:-.05em;line-height:1.06}
.copy h3 span{display:block;color:var(--muted)}
.copy .chips{margin-bottom:22px}
.vfit{position:absolute;inset:0;display:grid;place-items:center}
.vfit .fit{top:50%;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center}

/* row visuals */
.row-phone{position:absolute;left:50%;bottom:-210px;margin-left:-160px}
.row-phone .phone{position:relative;width:320px;height:690px;border-radius:54px;padding:10px}
.row-phone .screen{border-radius:45px}
.row-phone .lock .date{margin-top:64px;font-size:16px}
.row-phone .lock .time{font-size:78px}
.row-phone .lock .notifs{margin-top:44px}
.appicon{position:absolute;width:96px;height:96px;border-radius:24px;background:linear-gradient(160deg,#fff,#f1efe9);display:grid;place-items:center;box-shadow:0 22px 34px -14px rgba(16,29,46,.35),inset 0 -3px 0 rgba(0,0,0,.05),inset 0 1px 0 #fff;left:12%;bottom:22%;transform:rotate(-12deg);z-index:3;animation:bob 6s ease-in-out infinite}
.appicon img{width:50px}
@keyframes bob{50%{transform:rotate(-9deg) translateY(-10px)}}
.lockapp{position:absolute;inset:0;background:var(--app-bg);display:flex;flex-direction:column;align-items:center;padding-top:120px;text-align:center}
.lockapp img{width:62px}
.lockapp h6{font-size:21px;font-weight:800;margin-top:22px;letter-spacing:-.02em}
.lockapp p{font-size:14px;color:var(--app-muted);margin-top:6px;max-width:220px}
.faceid{width:78px;height:78px;margin-top:40px;color:var(--app-ink);position:relative}
.faceid svg{width:100%;height:100%;stroke-width:1.3}
.faceid::after{content:"";position:absolute;left:8%;right:8%;height:2px;top:10%;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:scan 2.4s var(--ease) infinite;border-radius:2px}
@keyframes scan{50%{top:86%}}
.lockapp .navybtn{width:240px;margin-top:40px}

.ai{width:400px}
.ai .card{border-radius:20px;padding:18px 18px 16px;box-shadow:0 1px 2px rgba(16,29,46,.04)}
.ai .k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--app-muted);display:flex;justify-content:space-between}
.ai .raw{font-size:16px;line-height:1.45;margin-top:8px;color:#4d5666;font-family:var(--ios);min-height:46px}
.ai .mk{margin:12px auto;width:max-content;display:flex;align-items:center;gap:8px;background:var(--app-ink);color:#fff;border-radius:999px;height:42px;padding:0 18px;font-weight:700;font-size:14px;font-family:var(--ios);box-shadow:0 10px 22px -10px rgba(16,35,63,.6)}
.ai .mk .i{width:16px;height:16px;color:#f2c56b}
.ai .mk.pulse{animation:pulse .9s var(--ease)}
@keyframes pulse{40%{transform:scale(.95)}}
.ai .sug{border-left:3px solid var(--gold)}
.ai .out{font-size:16px;line-height:1.45;margin-top:8px;font-family:var(--ios);color:var(--app-ink);min-height:92px}
.ai .out w{opacity:0;filter:blur(4px);transition:opacity .35s,filter .35s}
.ai .out w.v{opacity:1;filter:none}
.ai .acts{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;margin-top:12px}
.ai .acts span{height:40px;border-radius:11px;display:grid;place-items:center;font-weight:700;font-size:14px;font-family:var(--ios)}
.ai .acts span:first-child{border:1px solid var(--app-line);background:#fff}
.ai .acts span:last-child{background:var(--app-ink);color:#fff}

.agr{width:400px;font-family:var(--ios);color:var(--app-ink)}
.agr .card{border-radius:20px;padding:18px;box-shadow:0 8px 24px -10px rgba(16,29,46,.18)}
.agr h6{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:10px}
.agr p{font-size:14px;color:var(--app-muted);margin-top:4px;line-height:1.4}
.agr .stem{width:2px;height:22px;background:repeating-linear-gradient(#cfcab9 0 4px,transparent 4px 8px);margin-left:36px}
.agr .lk{display:flex;flex-direction:column;gap:8px}
.agr .le{background:#fff;border:1px solid var(--app-line);border-radius:14px;padding:11px 13px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;opacity:0;transform:translateX(-14px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.agr .le small{display:block;font-weight:600;color:var(--app-muted);font-size:12px}
.agr .le div{flex:1}
.in .agr .le{opacity:1;transform:none}
.in .agr .le:nth-child(2){transition-delay:.15s}.in .agr .le:nth-child(3){transition-delay:.3s}

.exp{width:400px;font-family:var(--ios);color:var(--app-ink);padding-top:22px}
.exp .back{position:absolute;top:0;left:22px;right:22px;height:60px;background:#fff;border-radius:20px;opacity:.6;border:1px solid var(--app-line)}
.exp .card{position:relative;border-radius:20px;padding:18px;box-shadow:0 12px 30px -12px rgba(16,29,46,.22)}
.exp .hd{display:flex;gap:12px;align-items:center}
.exp .hd .thumb{width:56px;height:56px;flex:none}
.exp .hd h6{font-size:18px;font-weight:800;letter-spacing:-.02em}
.exp .hd small{font-size:13px;color:var(--app-muted);font-weight:600}
.exp .amt{margin-left:auto;font-size:22px;font-weight:800;letter-spacing:-.02em}
.exp dl{margin-top:16px;display:grid;grid-template-columns:1fr auto;gap:9px 10px;font-size:14px}
.exp dt{color:var(--app-muted);font-weight:600}
.exp dd{font-weight:700;text-align:right}
.bar{height:8px;border-radius:5px;background:#efece4;margin-top:16px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),#3aa76a);border-radius:5px;transition:width 1.4s var(--ease) .3s}
.in .bar i{width:41%}
.owed{display:flex;justify-content:space-between;align-items:center;margin-top:14px;background:var(--gold-soft);border-radius:12px;padding:11px 13px;font-weight:800;font-size:15px;color:var(--gold-ink)}

.langs{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.lroll{position:absolute;left:0;right:0;top:50%;transition:transform .8s var(--ease)}
.lroll.jump{transition:none}
.li{height:62px;display:flex;align-items:center;justify-content:center}
.li span{display:inline-flex;align-items:center;gap:12px;font-size:20px;letter-spacing:-.025em;color:var(--muted);padding:12px 20px;border-radius:999px;transition:all .6s var(--ease)}
.li span i{font-style:normal;font-family:var(--emoji);font-size:17px}
.li.act span{background:#fff;color:var(--fg);box-shadow:var(--shadow);transform:scale(1.06)}

/* steps */
.steps{max-width:820px;margin:52px auto 0;display:flex;flex-direction:column;gap:12px}
.step{background:var(--panel);border-radius:30px;padding:38px;display:grid;grid-template-columns:330px 1fr;gap:40px;align-items:center}
.step .ui{background:#fff;border-radius:18px;box-shadow:var(--shadow-lift);padding:16px;font-family:var(--ios);color:var(--app-ink);font-size:14px}
.step .n{font-size:13px;color:var(--fg-2)}
.step h4{font-size:24px;font-weight:400;letter-spacing:-.035em;line-height:1.2;margin-top:8px}
.step p{color:var(--fg-2);margin-top:6px;font-size:15px;line-height:1.5}
.ui .uh{font-weight:700;font-size:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.ui .uh span{font-weight:600;color:var(--app-muted);font-size:12px}
.tog{display:flex;justify-content:space-between;align-items:center;background:var(--app-bg);border-radius:11px;padding:10px 12px;font-weight:600;margin-top:8px}
.sw{width:38px;height:23px;border-radius:12px;background:#34c759;position:relative}
.sw::after{content:"";position:absolute;right:2px;top:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ui .fld{font-size:14px;padding:10px 12px;margin-top:8px}
.ui .navybtn{height:40px;font-size:14px;margin-top:10px;border-radius:11px}
.file{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #f0eee8}
.file:last-child{border:0}
.file .fi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.file .fi .i{width:16px;height:16px}
.file div{flex:1;font-weight:600;font-size:13.5px}
.file small{display:block;font-weight:500;color:var(--app-muted);font-size:12px}
.file .ok{color:var(--green)}
.inb{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px}
.inb.u{background:var(--app-bg)}
.inb .av{width:32px;height:32px;border-radius:50%;background:#e7eef6;display:grid;place-items:center;flex:none;color:var(--navy)}
.inb .av .i{width:15px;height:15px}
.inb div{flex:1;font-weight:700;font-size:13.5px}
.inb small{display:block;font-weight:500;color:var(--app-muted);font-size:12.5px}
.inb em{font-style:normal;font-size:11.5px;color:var(--app-muted);align-self:flex-start}
.inb .bd{width:8px;height:8px;border-radius:50%;background:var(--blue);align-self:center}

/* chat */
.thread{max-width:640px;margin:56px auto 0;display:flex;flex-direction:column}
.grp{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-left:52px;margin-top:22px}
.grp .who{font-size:12px;color:var(--fg-2);margin:0 0 0 4px}
.grp .av{position:absolute;left:0;bottom:0;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.grp .av img{width:19px}
.msg{background:#f3f3f1;border-radius:22px;padding:13px 18px;font-size:16.5px;line-height:1.5;letter-spacing:-.02em;margin-top:6px;max-width:100%}
.ic{display:inline-flex;align-items:center;gap:5px;padding:1px 9px 1px 7px;border-radius:8px;font-size:.88em;line-height:1.6;vertical-align:1px;white-space:nowrap}
.ic .i{width:13px;height:13px;stroke-width:2}
.ic.y{background:var(--gold-soft);color:var(--gold-ink)}
.ic.b{background:var(--blue-soft);color:var(--blue)}
.ic.g{background:var(--green-soft);color:var(--green)}
.ic.r{background:var(--red-soft);color:var(--red)}
.ic.v{background:#eeeafb;color:#5b4fb0}
.ic.n{background:#e7eef6;color:var(--navy)}
.thread .me{align-self:flex-end;text-align:right;margin-top:26px}
.thread .me small{display:block;font-size:12px;color:var(--fg-2);margin:0 6px 6px 0}
.thread .me .msg{background:var(--navy);color:#fff;display:inline-block}
.js .thread .msg,.js .thread .who,.js .thread .av{opacity:0;transform:translateY(10px) scale(.98);transform-origin:left bottom;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.js .thread .me .msg{transform-origin:right bottom}
.js .thread .shown{opacity:1;transform:none}
.typing{display:inline-flex;gap:4px;padding:16px 18px}
.typing i{width:7px;height:7px;border-radius:50%;background:#a8acb4;animation:ty 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{30%{transform:translateY(-4px);opacity:.5}}

/* pricing */
.price{margin-top:56px;background:var(--panel);border-radius:var(--radius);display:grid;grid-template-columns:1fr 1fr}
.price>div{padding:clamp(28px,4vw,48px)}
.price .l{display:flex;flex-direction:column;border-right:1px solid #e6e5e0}
.amt{display:flex;align-items:baseline;gap:12px}
.amt b{font-size:clamp(56px,6vw,76px);font-weight:400;letter-spacing:-.06em;line-height:1}
.amt span{color:var(--fg-2);font-size:14px}
.alt{margin-top:18px;font-size:17px;letter-spacing:-.02em;color:var(--fg-2)}
.alt b{color:var(--fg);font-weight:450}
.trial{margin-top:22px;font-size:17px;letter-spacing:-.02em;line-height:1.45}
.trial span{color:var(--gold-ink)}
.price .l .btn{margin-top:auto;align-self:flex-start}
.price .l .fine{font-size:12px;color:var(--muted);margin-top:14px}
.price h4{font-size:22px;font-weight:400;letter-spacing:-.035em}
.inc{list-style:none;margin-top:18px}
.inc li{display:flex;gap:12px;align-items:center;font-size:14.5px;color:#4b5260;padding:7px 0}
.inc .i{color:var(--gold);width:16px;height:16px;stroke-width:2.4}
.price .r>.ct{border-top:1px solid #e6e5e0;margin:28px calc(-1*clamp(28px,4vw,48px)) 0;padding:28px clamp(28px,4vw,48px) 0}
.ct p{color:var(--fg-2);font-size:14.5px;margin-top:8px;line-height:1.55}
.ct a{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:14.5px}
.ct a .i{width:14px;height:14px}
.ct a:hover{text-decoration:underline;text-underline-offset:3px}

/* faq */
.faq{max-width:840px;margin:0 auto}
.faq .h2{text-align:left}
.qs{margin-top:44px;border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 2px;font-size:16px;letter-spacing:-.02em;cursor:pointer}
.q summary::-webkit-details-marker{display:none}
.q summary .i{color:var(--fg-2);transition:transform .35s var(--ease)}
.q[open] summary .i{transform:rotate(45deg)}
.q .a{color:var(--fg-2);font-size:15px;line-height:1.62;padding:0 40px 26px 2px;max-width:680px}

/* final cta */
.end{max-width:1000px;margin:0 auto;border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:16/9;background:#0c1626}
.end img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.8s var(--ease)}
.end.in img{transform:scale(1)}
.end .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,12,22,.82),rgba(6,12,22,.2) 45%,rgba(6,12,22,0) 65%),linear-gradient(90deg,rgba(6,12,22,.7),rgba(6,12,22,.15) 50%,rgba(6,12,22,0) 70%)}
.end .tx{position:absolute;left:clamp(24px,5vw,52px);right:24px;bottom:clamp(24px,5vw,48px);color:#fff}
.end h2{font-size:clamp(28px,3.4vw,40px);font-weight:400;letter-spacing:-.045em;line-height:1.1}
.end h2 span{display:block;color:rgba(255,255,255,.62)}
.end p{color:rgba(255,255,255,.7);font-size:14.5px;margin-top:12px}
.end .btn{margin-top:24px}

/* footer */
footer{padding:clamp(100px,12vw,150px) 0 96px}
.ft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.ft .brand{font-size:26px}
.ft .brand img{width:23px}
.ft p.tag-l{color:var(--fg-2);font-size:13.5px;margin-top:10px;max-width:280px}
.ft h5{font-size:13px;font-weight:400;color:var(--fg-2)}
.ft ul{list-style:none;margin-top:16px}
.ft li{font-size:13.5px;padding:6px 0}
.ft li a:hover{text-decoration:underline;text-underline-offset:3px}
.fb{display:flex;justify-content:space-between;gap:20px;margin-top:70px;font-size:12px;color:var(--fg-2);flex-wrap:wrap}

/* launcher */
.launch{position:fixed;right:22px;bottom:22px;z-index:70}
.lbtn{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(16,43,74,.55);transition:transform .3s var(--ease)}
.lbtn:hover{transform:scale(1.05)}
.lbtn .i{width:22px;height:22px;stroke-width:2.2;transition:transform .4s var(--ease)}
.launch.open .lbtn .i{transform:rotate(45deg)}
.lpop{position:absolute;right:0;bottom:70px;width:290px;background:#fff;border-radius:24px;padding:22px;box-shadow:0 24px 60px -18px rgba(16,29,46,.35),0 2px 8px rgba(16,29,46,.06);opacity:0;transform:translateY(10px) scale(.97);transform-origin:bottom right;pointer-events:none;transition:opacity .3s var(--ease),transform .4s var(--ease)}
.launch.open .lpop{opacity:1;transform:none;pointer-events:auto}
.lpop img{width:30px}
.lpop h6{font-size:18px;font-weight:450;letter-spacing:-.03em;margin-top:14px}
.lpop p{font-size:13.5px;color:var(--fg-2);margin-top:4px}
.lpop .btn{width:100%;margin-top:10px;height:44px}
.lpop .btn:first-of-type{margin-top:18px}

/* store chooser */
.getdlg{border:0;padding:0;margin:auto;border-radius:30px;width:min(400px,calc(100vw - 32px));background:#fff;color:var(--fg);box-shadow:0 30px 80px -20px rgba(16,29,46,.4)}
.getdlg::backdrop{background:rgba(16,29,46,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.getdlg[open]{animation:dlg .45s var(--ease)}
@keyframes dlg{from{opacity:0;transform:translateY(14px) scale(.97)}}
.getdlg .in{padding:34px 30px 28px;text-align:center}
.getdlg img.lg{width:38px;margin:0 auto}
.getdlg h6{font-size:24px;font-weight:400;letter-spacing:-.04em;margin-top:16px}
.getdlg p{color:var(--fg-2);font-size:14.5px;margin-top:6px;line-height:1.5}
.stores{display:flex;justify-content:center;gap:10px;margin-top:24px;flex-wrap:wrap}
.stores a{display:block;height:48px;transition:transform .25s var(--ease)}
.stores a:hover{transform:translateY(-2px)}
.stores img{height:100%;width:auto}
.getdlg .fine{font-size:12px;color:var(--muted);margin-top:18px}
.getdlg .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--panel);display:grid;place-items:center;color:var(--fg-2)}
.getdlg .x .i{transform:rotate(45deg)}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.js .rv.in{opacity:1;transform:none;filter:none}

/* responsive */
@media (max-width:960px){
  .nav-links{display:none}
  .nav-in{grid-template-columns:1fr auto}
  .nav-right .txt{display:none}
  .bento{grid-template-columns:1fr 1fr}
  .t-press{grid-row:auto;grid-column:span 2;flex-direction:row;align-items:flex-end;gap:24px}
  .row,.row.flip{grid-template-columns:1fr}
  .row .vis,.row.flip .vis{order:2}
  .show-low{grid-template-columns:1fr;padding:0 32px}
  .show-phone{display:none}
  .step{grid-template-columns:1fr;gap:26px;padding:28px}
  .price{grid-template-columns:1fr}
  .price .l{border-right:0;border-bottom:1px solid #e6e5e0}
  .price .l .btn{margin-top:30px}
  .ft{grid-template-columns:1fr 1fr}
  .ft>div:first-child{grid-column:span 2}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav-in{height:64px}
  .bento{grid-template-columns:1fr}
  .t-press,.t-zero{grid-column:auto}
  .t-press{flex-direction:column;align-items:stretch}
  .vault{display:none}
  .tile{min-height:220px;padding:26px}
  .show{padding-top:36px}
  .show-low{padding:0 22px}
  .show-copy{padding:40px 0 44px}
  .tab{padding:9px 14px;font-size:13px}
  .msg{font-size:15.5px}
  .grp{padding-left:42px}
  .grp .av{width:32px;height:32px}
  .grp .av img{width:15px}
  .q .a{padding-right:8px}
  .end{aspect-ratio:auto;display:flex;flex-direction:column}
  .end img{position:relative;height:300px;object-position:58% 40%}
  .end .shade{background:linear-gradient(0deg,#0c1626 0%,rgba(12,22,38,0) 45%);height:300px}
  .end .tx{position:relative;left:auto;right:auto;bottom:auto;padding:0 24px 28px;margin-top:-34px}
  .launch{right:16px;bottom:16px}
  .rot>span{white-space:normal;text-wrap:balance;max-width:100%}
  .row-phone{bottom:-170px;transform:scale(.7);transform-origin:50% 100%;margin-left:-160px!important}
  .appicon{width:72px;height:72px;border-radius:18px;left:8%}
  .appicon img{width:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .rv,.js .thread .msg,.js .thread .who,.js .thread .av{opacity:1;transform:none;filter:none}
}

/* language menu */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px 0 11px;border-radius:999px;background:var(--panel);font-size:13px;color:var(--fg);transition:background-color .2s}
.lang-btn:hover{background:var(--panel-hover)}
.lang-btn .fl{font-family:var(--emoji);font-size:16px;line-height:1}
.lang-btn .i{width:13px;height:13px;color:var(--fg-2);transition:transform .3s var(--ease)}
.lang.open .lang-btn .i{transform:rotate(180deg)}
.lang-panel{position:absolute;right:0;top:calc(100% + 10px);width:430px;background:#fff;border-radius:24px;padding:8px;box-shadow:0 24px 60px -18px rgba(16,29,46,.3),0 2px 8px rgba(16,29,46,.06);display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .25s var(--ease),transform .35s var(--ease);z-index:80;text-align:left}
.lang.open .lang-panel{opacity:1;transform:none;pointer-events:auto}
.lang-panel .lh{grid-column:1/-1;font-size:12px;color:var(--fg-2);padding:10px 12px 6px}
.lang-panel a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;font-size:14px;letter-spacing:-.015em;color:var(--fg);transition:background-color .15s}
.lang-panel a:hover{background:var(--panel)}
.lang-panel a .fl{font-family:var(--emoji);font-size:17px;line-height:1}
.lang-panel a .i{margin-left:auto;width:14px;height:14px;color:var(--gold);stroke-width:2.4}
.lang-panel a[aria-current="page"]{background:var(--panel)}
.lang.up .lang-panel{top:auto;bottom:calc(100% + 10px);transform:translateY(6px) scale(.98);transform-origin:bottom right}
.lang.up.open .lang-panel{transform:none}
.fb{align-items:center}
.fb .lang-btn{height:38px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.fb .lang-btn:hover{background:var(--panel)}

/* press tile (English pages) */
.outlets{display:flex;flex-direction:column;gap:10px;max-width:330px}
.outlet{background:#fff;border-radius:18px;height:92px;display:grid;place-items:center;padding:0 28px;box-shadow:var(--shadow)}
.outlet:first-child{transform:rotate(-1.5deg)}
.outlet:last-child{transform:rotate(1deg);margin-left:18px}
.outlet img{height:42px;width:auto}
.outlet.tdm{font-family:Tinos,Georgia,"Times New Roman",serif;font-weight:700;font-size:24px;letter-spacing:-.01em;color:#141414}

/* original-note tile (non-English pages carry no English press) */
.t-orig .notes{display:flex;flex-direction:column;gap:10px;max-width:340px}
.t-orig .nt{background:#fff;border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);font-size:14px;line-height:1.45;font-family:var(--ios);color:var(--app-ink)}
.t-orig .nt small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--app-muted);margin-bottom:4px}
.t-orig .nt.raw{transform:rotate(-1.5deg);color:#5b6372}
.t-orig .nt.sug{border-left:3px solid var(--gold);margin-left:22px}
.t-orig .kept{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin:4px 0 0 22px;background:#fff;border-radius:999px;padding:7px 13px 7px 8px;font-size:12.5px;box-shadow:var(--shadow)}

@media (max-width:640px){
  .nav-right{gap:8px}
  .lang-btn .code{display:none}
  .nav .lang-btn .i{display:none}
  .nav .lang-btn{width:40px;padding:0;justify-content:center}
  .nav .lang-panel{position:fixed;left:16px;right:16px;top:68px;width:auto}
  .fb .lang-panel{width:min(430px,calc(100vw - 32px))}
  .fb .lang.up .lang-panel{right:auto;left:0;transform-origin:bottom left}
  .lang-panel{grid-template-columns:1fr 1fr}
  .lang-panel a{padding:10px;font-size:13.5px}
}

/* link cards to guides (features, templates, guides) */
.fx-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 52px; }
.fx-links a { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--panel); border-radius: 24px; padding: 24px 52px 24px 24px; transition: background-color .2s; }
.fx-links a:hover { background: var(--panel-hover); }
.fx-links b { font-weight: 450; font-size: 17px; letter-spacing: -.025em; }
.fx-links span { color: var(--fg-2); font-size: 14px; }
.fx-links .i { position: absolute; right: 22px; top: 24px; width: 16px; height: 16px; color: var(--fg-2); transition: transform .3s var(--ease); }
.fx-links a:hover .i { transform: translate(2px, -2px); }

@media (max-width:960px){.fx-links{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.fx-links{grid-template-columns:1fr}}
.nw{white-space:nowrap}