/* telemcp v3.2: editorial, cool paper, one Telegram blue; the Telegram window is the hero object */

@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-standard-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-standard-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Albert Sans";src:url("fonts/albert-sans-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/dm-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/dm-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#F5F5F2;--sand:#E4E4DD;--white:#FFFFFF;
  --ink:#141414;--muted:#3E3E3A;--rule:#D9D9D3;--rule-strong:#B6B6AF;
  --dark:#161616;--on-dark:#F5F5F2;--on-dark-muted:#C2C2BB;--rule-dark:#363634;
  --acc:#1877AE;--acc-deep:#156A9C;--acc-soft:#CDEBFA;--acc-tint:#6CC6F3;--tg:#229ED9;--tg-bright:#2AABEE;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Albert Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --app:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,sans-serif;
  --r-phone:50px;--r-screen:42px;--r-window:12px;--r-plate:18px;--r-control:10px;
  --ring:0 0 0 1px rgba(20,20,20,.08);
  --ambient:0 30px 60px -36px rgba(20,20,20,.35),0 1px 2px rgba(20,20,20,.05);
  --wrap:1312px;--gutter:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--acc-soft)}
a{color:inherit}
img{display:block;max-width:100%}
button,input{font:inherit}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;font-optical-sizing:auto;text-wrap:balance}
h1{font-size:68px;line-height:.94;letter-spacing:-.025em}
h2{font-size:72px;line-height:.94;letter-spacing:-.02em}
h3{font-size:26px;line-height:1.1;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--acc-deep)}
p{margin:0}
.wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.intro{font-size:18px;line-height:1.55;color:var(--muted);max-width:44ch;text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the agent marker: telemcp's ring and dot, the only annotation on any product scene */
.glyph{display:inline-flex;align-items:center;gap:3px;vertical-align:-1px;margin:0 6px 0 2px}
.glyph::before{content:"";width:9px;height:9px;border:2px solid var(--acc);border-radius:50%;box-sizing:border-box}
.glyph::after{content:"";width:5px;height:5px;background:var(--acc);border-radius:50%}
.band-dark .glyph::before{border-color:var(--acc-tint)}
.band-dark .glyph::after{background:var(--acc-tint)}
.agroup{position:relative;align-self:flex-end;max-width:72%;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:19px 0 0 0;margin-top:4px}
.agroup .bub{max-width:100%}
.agroup+.bub{margin-top:1px}
/* the label sits above the group, right aligned, no connector line */
.amark{position:absolute;right:4px;top:0;height:16px;display:flex;align-items:center;gap:6px}
.amark .glyph{margin:0;gap:2px}
.amark .glyph::before{width:8px;height:8px;border-width:1.8px}
.amark .glyph::after{width:4px;height:4px}
.amark em{white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:14px;line-height:1;color:var(--acc);letter-spacing:-.005em}
/* Telegram's own letter tiles for people without a photo */
.tile{display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:600;font-family:var(--app);flex-shrink:0;width:44px;height:44px;font-size:17px}
.tile.v{background:linear-gradient(180deg,#82B1FF,#665FFF)}
.tile.g{background:linear-gradient(180deg,#A0DE7E,#54CB68)}
.tile.p{background:linear-gradient(180deg,#E0A2F3,#D669ED)}

/* captions and callout dots */
.caption{font-size:16px;line-height:1.5;color:var(--muted);max-width:60ch;text-wrap:pretty}
.caption b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:17px;color:var(--ink);margin-right:8px;white-space:nowrap}
.caption .mob{display:none}
.co{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;z-index:5}
.band-dark .caption{color:var(--on-dark-muted)}
.band-dark .caption b{color:var(--on-dark)}

/* buttons and the form: blue on paper, ink on blue */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:var(--r-control);border:0;background:var(--acc);color:#fff;font-weight:500;font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,transform .06s}
.btn:hover{background:var(--acc-deep)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--acc-deep);outline-offset:3px}
.btn svg{width:16px;height:16px}
.form{display:flex;gap:10px;max-width:520px}
.form input{flex:1 1 auto;min-width:0;height:52px;min-height:52px;border-radius:var(--r-control);border:1px solid var(--rule-strong);background:var(--white);padding:0 16px;color:var(--ink);font-size:16px}
.form input::placeholder{color:#6F6F6A}
.form input:focus{border-color:var(--ink);outline:none}
.assure{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;color:var(--muted);max-width:30em;text-wrap:pretty}
.on-colour .assure{color:rgba(255,255,255,.9)}
.also{margin-top:14px;font-size:15.5px}
.also a{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule-strong);line-height:1}
.also a:hover{border-bottom-color:var(--ink)}
.also a svg{width:14px;height:14px;transform:rotate(90deg)}
.on-colour .form input{border-color:transparent;background:#fff}
.on-colour .btn{background:var(--ink);color:#fff}
.on-colour .btn:hover{background:#000}

/* masthead */
.mast{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.mast .wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-family:var(--serif);font-size:27px;font-weight:500;letter-spacing:-.02em;line-height:1}
.wordmark img{display:block;height:30px;width:auto}
.mast nav{display:flex;align-items:center;gap:28px}
.mast nav a{text-decoration:none;font-size:15.5px;font-weight:500;color:var(--ink);opacity:.82;padding:12px 2px;display:inline-flex;align-items:center;min-height:44px}
.mast nav a:hover{opacity:1}
.mast nav .btn{opacity:1;color:#fff;height:42px;padding:0 18px;font-size:15px}
.mast nav .btn svg{width:14px;height:14px}

/* ===== hero ===== */
.sec{position:relative}
/* --fl: the blue field's left edge; --pad: the equal side margin of the window inside it (grows past 64px only to cap the window near 820px wide) */
.hero{padding:0;overflow:visible;--fl:calc(50% - 76px);--pad:max(clamp(48px,4vw,64px),calc((50% + 76px - 820px)/2))}
.hero .grid{align-items:start}
.hero-text{grid-column:1/7;grid-row:1;padding:48px 0 40px;position:relative;z-index:1}
.hero h1{max-width:8.4em}
.deck{font-size:18.5px;line-height:1.5;max-width:31em;margin:22px 0 10px;color:var(--ink);text-wrap:pretty}
.status{font-size:15.5px;color:var(--muted);margin-bottom:18px}
/* the colour field: two blue planes (a lit outer plate and a deeper inner one set in from the top, right and bottom), paper grain and crop marks */
.field{position:absolute;top:0;bottom:0;left:var(--fl);right:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(120% 90% at 0% 0%,#45BCF5 0%,rgba(69,188,245,0) 55%),
    radial-gradient(80% 60% at 100% 100%,#135F8E 0%,rgba(19,95,142,0) 60%),
    linear-gradient(170deg,#2AABEE 0%,#229ED9 48%,#1C7FB6 100%)}
.field::before{content:"";position:absolute;left:0;top:38px;right:38px;bottom:38px;border-radius:0 6px 6px 0;pointer-events:none;
  background:
    radial-gradient(100% 80% at 100% 0%,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(176deg,rgba(10,62,104,.30) 0%,rgba(10,62,104,.62) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 rgba(255,255,255,.08)}
.field::after{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:soft-light;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:220px 220px}
.field i{position:absolute;width:16px;height:16px;border:0 solid rgba(255,255,255,.6);z-index:1}
.field i:nth-child(1){left:14px;top:14px;border-left-width:1px;border-top-width:1px}
.field i:nth-child(2){right:14px;top:14px;border-right-width:1px;border-top-width:1px}
.field i:nth-child(3){left:14px;bottom:14px;border-left-width:1px;border-bottom-width:1px}
.field i:nth-child(4){right:14px;bottom:14px;border-right-width:1px;border-bottom-width:1px}
/* the scene keeps the hero's height in the grid; the window and its caption are placed against the field (both resolve against the section), centred with equal side margins */
.scene{grid-column:6/13;grid-row:1;position:static;height:max(770px,calc(100svh - 73px));margin-right:calc(-1*var(--gutter) + 24px)}
.scene .tgwin{position:absolute;z-index:1;left:calc(var(--fl) + var(--pad));right:var(--pad);top:64px;width:auto;height:clamp(440px,calc(100% - 240px),600px);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 70px 120px -34px rgba(5,35,65,.78),0 26px 46px -22px rgba(5,35,65,.55),0 2px 4px rgba(5,35,65,.3)}
.scene-caption{position:absolute;z-index:2;left:calc(var(--fl) + var(--pad));right:var(--pad);bottom:54px;padding:0}
/* below 1400 the text column reaches past the field edge: keep it on the paper */
@media (min-width:981px) and (max-width:1400px){.hero-text{padding-right:112px}.scene .tgwin .side{width:228px}}
@media (min-width:981px){.scene .tgwin .bub,.scene .tgwin .agroup{max-width:min(76%,440px)}}
.lp .site{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-caption .caption{max-width:70ch;color:rgba(255,255,255,.92)}
.scene-caption .caption b{color:#fff}
.scene-caption .glyph::before{border-color:#fff}
.scene-caption .glyph::after{background:#fff}
.tk .t2{transition:opacity .3s}
.tgav{background:#3390EC;display:grid!important;place-items:center;width:34px;height:34px;border-radius:50%;flex-shrink:0}
.tgav svg{width:16px;height:16px}
.bub.wide{max-width:92%}
.bub b{font-weight:600}
/* the clients: one line under the fold text, so the headline, lede and form own the first screen */
.clients{margin-top:30px;padding-top:14px;border-top:1px solid var(--rule);max-width:548px;font-size:15.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.clients b{font-weight:600;color:var(--ink)}
.clients span{display:block;margin-top:2px}

/* ===== Telegram for Mac ===== */
.tgwin{display:flex;background:#fff;border-radius:var(--r-window);overflow:hidden;font-family:var(--app);color:#000;font-size:13px;line-height:1.4;box-shadow:var(--ring),var(--ambient)}
.tgwin .side{width:252px;border-right:1px solid #E4E4E4;background:#fff;display:flex;flex-direction:column;flex-shrink:0;min-height:0}
.tgwin .side .top{display:flex;align-items:center;gap:12px;padding:12px 12px 8px;flex-shrink:0}
.lights{display:flex;gap:7px;flex-shrink:0}
.lights i{width:11px;height:11px;border-radius:50%;display:block}
.lights i:nth-child(1){background:#FF5F57;border:.5px solid #E0443E}
.lights i:nth-child(2){background:#FEBC2E;border:.5px solid #D89E24}
.lights i:nth-child(3){background:#28C840;border:.5px solid #1AAB29}
.tgwin .side .top .s{flex:1;height:28px;border-radius:8px;background:#F1F3F4;display:flex;align-items:center;gap:6px;padding:0 9px;color:#9A9FA3;font-size:12.5px}
.tgwin .side .top .s svg{width:13px;height:13px}
.tgwin .rows{flex:1;min-height:0;overflow:hidden;padding:2px 0 6px}
.row-m{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:0 6px;border-radius:9px}
.row-m img,.row-m .tgav,.row-m .tile{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.row-m .c{flex:1;min-width:0}
.row-m .n{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.row-m .n b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-m .n span{font-size:11.5px;color:#9A9FA3;flex-shrink:0;display:inline-flex;align-items:center;gap:3px}
.row-m .n span svg{width:14px;height:9px;color:#4FAE4E}
.row-m .p{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.row-m .p span{font-size:12.5px;color:#707579;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-m .p b{min-width:20px;height:20px;border-radius:10px;background:#3390EC;color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center;padding:0 6px;flex-shrink:0}
.row-m.on{background:#3390EC;color:#fff}
.row-m.on .n span,.row-m.on .p span{color:rgba(255,255,255,.85)}
.row-m.on .n span svg{color:#fff}
.row-m .p .pv2{display:none}
.row-m .p .pv2.show{display:block}
.row-m .p .pv2.show+.pv1,.row-m .p .pv1:has(+.pv2.show){display:none}
.tgwin .main{flex:1;display:flex;flex-direction:column;min-width:0}
.tgwin .chead{height:52px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid #E4E4E4;background:#fff;flex-shrink:0}
.tgwin .chead .lights{display:none}
.tgwin .chead img{width:36px;height:36px;border-radius:50%}
.tgwin .chead b{display:block;font-size:14px;font-weight:600}
.tgwin .chead span{display:block;font-size:12px;color:#3390EC}
.tgwin .chead .ic{margin-left:auto;display:flex;gap:18px;color:#707579}
.tgwin .chead .ic svg{width:20px;height:20px}
.tgwin .cwall{flex:1;position:relative;overflow:hidden;padding:14px 20px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  background:
    radial-gradient(90% 80% at 0% 0%,#DCE7CB 0%,rgba(220,231,203,0) 60%),
    radial-gradient(90% 70% at 100% 100%,#CFE0C8 0%,rgba(207,224,200,0) 60%),
    linear-gradient(150deg,#E3EBD3,#D5E2CB)}
.tgwin .cwall::before{content:"";position:absolute;inset:0;background-image:url("tg-doodle.svg");background-size:200px 200px;opacity:.14;pointer-events:none}
.tgwin .cwall>*{position:relative}
.tgwin .bub{max-width:min(68%,420px);font-size:13.5px;border-radius:12px}
.tgwin .bub.out{background:#EFFDDE}
.tgwin .bub.tail.out::after{background:#EFFDDE}
.tgwin .bub.tail.out{border-bottom-right-radius:3px}
.tgwin .bub.tail.in{border-bottom-left-radius:3px}
.tgwin .daypill{background:rgba(68,84,70,.45)}
.tgwin .cinput{height:50px;display:flex;align-items:center;gap:14px;padding:0 18px;background:#fff;border-top:1px solid #E4E4E4;color:#9A9FA3;font-size:13.5px;flex-shrink:0}
.tgwin .cinput svg{width:22px;height:22px;color:#9A9FA3;flex-shrink:0}
.tgwin .cinput .f{flex:1}
.tgwin .cinput .f+svg{margin-left:auto}
.tgwin .agroup{max-width:min(68%,420px)}

/* ===== mac window (the agent, the mail) ===== */
.mac{background:var(--white);border-radius:var(--r-window);box-shadow:var(--ring),var(--ambient);font-family:var(--app);color:#1F1F1F;overflow:hidden;font-size:13px;line-height:1.4}
.mac-bar{height:38px;display:flex;align-items:center;padding:0 14px;gap:8px;border-bottom:1px solid #E9E9E5;background:#F6F6F3}
.mac-bar .title{flex:1;text-align:center;font-size:12.5px;color:#6B6B6B;font-weight:500;margin-right:40px}
.mac-bar .tools{display:flex;gap:14px;color:#8A8A8A;margin-left:-40px}
.mac-bar .tools svg{width:16px;height:16px}
.mac-body{display:flex}
/* the brief: a terminal, where Claude Code, Codex and OpenClaw actually run */
.term{width:100%;background:#1B1B1A;color:#E6E6E0;box-shadow:0 0 0 1px rgba(0,0,0,.5),var(--ambient)}
.mac-bar.dark{background:#2A2A28;border-bottom-color:#111}
.mac-bar.dark .title{color:#9A9A94;font-family:var(--mono);font-size:12px}
.term .tbody{padding:18px 22px 20px;font-family:var(--mono);font-size:13px;line-height:1.6;display:flex;flex-direction:column;gap:10px}
.term .u{color:#fff;display:flex;gap:10px;max-width:72ch}
.term .pr{color:var(--acc-tint);flex:none;font-weight:500}
.term .a{color:#B8B8B0;padding-left:22px;max-width:70ch}
.term .cur i{display:inline-block;width:8px;height:15px;background:#E6E6E0;vertical-align:-2px}
@media (prefers-reduced-motion:no-preference){.term .cur i{animation:blink 1.1s steps(1) infinite}}
@keyframes blink{50%{opacity:0}}
/* the invite, in Mail */
.mailwin{width:100%}
.mail-body{display:flex;min-height:380px}
.mail-body .ml{width:218px;border-right:1px solid #E9E9E5;background:#FAFAF8;flex-shrink:0;padding:6px 0}
.mail-body .mi{padding:9px 12px 9px 14px;border-bottom:1px solid #EEEEEA;position:relative}
.mail-body .mi .n{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mail-body .mi .n b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-body .mi .n span{font-size:11px;color:#8A8A8A;flex-shrink:0}
.mail-body .mi .s{font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-body .mi .p{font-size:11.5px;color:#8A8A8A;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-body .mi.on{background:#1F6FEB;color:#fff}
.mail-body .mi.on .n span,.mail-body .mi.on .p{color:rgba(255,255,255,.8)}
.mail-body .mi:not(.on)::before{content:"";position:absolute;left:5px;top:14px;width:6px;height:6px;border-radius:50%;background:#1F6FEB}
.mail-body .mi:nth-child(4)::before{display:none}
.mail-body .mr{flex:1;padding:16px 22px 18px;min-width:0;font-size:12.5px;line-height:1.45}
.mail-body .mhd{display:flex;align-items:flex-start;gap:10px;padding-bottom:12px;border-bottom:1px solid #EEEEEA;margin-bottom:12px}
.mail-body .mhd .av{width:34px;height:34px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex-shrink:0}
.mail-body .mhd .av svg{width:20px;height:20px}
.mail-body .mhd b{font-size:13px;font-weight:600;margin-right:6px}
.mail-body .mhd span{font-size:12px;color:#8A8A8A}
.mail-body .mhd small{display:block;font-size:11.5px;color:#8A8A8A;margin-top:2px}
.mail-body h5{margin:0 0 10px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.mail-body .mr p{margin-bottom:9px;max-width:46ch}
.mail-body .kv{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid #EFEFEB}
.mail-body .kv+.kv{border-bottom:1px solid #EFEFEB;margin-bottom:10px}
.mail-body .kv span{color:#8A8A8A;font-size:11.5px}
.mail-body .kv code{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:#1F1F1F}

/* ===== phone (iOS) ===== */
.phone{width:296px;height:612px;background:#141414;border-radius:var(--r-phone);padding:9px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 2px #2B2B2B,0 44px 70px -30px rgba(20,20,20,.55),0 14px 28px -16px rgba(20,20,20,.35);position:relative;flex-shrink:0}
.phone::before{content:"";position:absolute;left:-2px;top:120px;width:2px;height:28px;background:#2B2B2B;border-radius:2px}
.phone::after{content:"";position:absolute;left:-2px;top:164px;width:2px;height:52px;background:#2B2B2B;border-radius:2px}
.phone .btn-r{position:absolute;right:-2px;top:150px;width:2px;height:66px;background:#2B2B2B;border-radius:2px}
.screen{width:100%;height:100%;border-radius:var(--r-screen);overflow:hidden;background:#fff;position:relative;font-family:var(--app);display:flex;flex-direction:column;color:#000}
.island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#000;z-index:3}
.sbar{height:46px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px 6px;font-size:12.5px;font-weight:600;flex-shrink:0}
.sbar .r{display:flex;align-items:center;gap:5px}
.sbar .sig{display:flex;align-items:flex-end;gap:1.5px;height:10px}
.sbar .sig i{width:2.5px;background:currentColor;border-radius:1px;display:block}
.sbar .sig i:nth-child(1){height:4px}.sbar .sig i:nth-child(2){height:6px}.sbar .sig i:nth-child(3){height:8px}.sbar .sig i:nth-child(4){height:10px}
.sbar .wifi{width:14px;height:11px}
.sbar .bat{width:22px;height:11px;border:1px solid currentColor;border-radius:3.5px;padding:1.5px;position:relative;opacity:.95}
.sbar .bat::after{content:"";position:absolute;right:-3.5px;top:3px;width:1.5px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
.sbar .bat i{display:block;height:100%;width:78%;background:currentColor;border-radius:1.5px}
.tg-head{display:flex;align-items:center;padding:4px 10px 8px;border-bottom:.5px solid rgba(0,0,0,.18);background:rgba(246,246,246,.96);flex-shrink:0}
.tg-head .back{display:flex;align-items:center;gap:1px;color:#007AFF;font-size:13.5px;width:64px}
.tg-head .back svg{width:11px;height:18px}
.tg-head .who{flex:1;text-align:center;min-width:0}
.tg-head .who b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-head .who span{display:block;font-size:10.5px;color:#8E8E93;margin-top:1px}
.tg-head .who span.on{color:#007AFF}
.tg-head .av{height:34px;border-radius:50%;margin-left:auto;flex-shrink:0;width:64px;display:flex;justify-content:flex-end}
.tg-head .av img,.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}
.avatar{display:block}
.tgwall{flex:1;position:relative;padding:8px 8px 6px;display:flex;flex-direction:column;gap:3px;justify-content:flex-end;overflow:hidden;
  background:
    radial-gradient(120% 90% at 10% 0%,#E2E9C4 0%,rgba(226,233,196,0) 60%),
    radial-gradient(100% 80% at 100% 10%,#CFE3CC 0%,rgba(207,227,204,0) 55%),
    radial-gradient(110% 70% at 50% 100%,#D6E1B6 0%,rgba(214,225,182,0) 60%),
    linear-gradient(160deg,#DCE6C6,#C9DCC6 50%,#D7E2BE)}
.tgwall::before{content:"";position:absolute;inset:0;background-image:url("tg-doodle.svg");background-size:160px 160px;opacity:.16;pointer-events:none}
.tgwall>*{position:relative}
.tgwall.start{justify-content:flex-start}
.tgwall .agroup{max-width:86%;padding:17px 0 0 0}
.tgwall .amark em{font-size:12.5px}
.daypill{align-self:center;background:rgba(68,84,70,.5);color:#fff;font-size:10.5px;font-weight:500;padding:3px 9px;border-radius:999px;margin:2px 0 6px}
.bub{max-width:82%;padding:5px 9px 5px 10px;font-size:13px;line-height:1.3;border-radius:17px;position:relative;box-shadow:0 1px .5px rgba(0,0,0,.08);word-wrap:break-word}
.bub .tm{float:right;font-size:10px;margin:7px 0 -2px 7px;color:#8D9DA5;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.bub .tm svg{width:14px;height:9px}
.bub.in{align-self:flex-start;background:#fff;color:#000;border-bottom-left-radius:17px}
.bub.out{align-self:flex-end;background:#E1FFC7;color:#000}
.bub.out .tm{color:#5E9A4A}
.bub.tail.in{border-bottom-left-radius:4px}
.bub.tail.out{border-bottom-right-radius:4px}
.bub.tail.in::after{content:"";position:absolute;left:-6px;bottom:0;width:10px;height:10px;background:#fff;clip-path:path("M10 0 L10 10 L0 10 C5 9 8 6 10 0 Z")}
.bub.tail.out::after{content:"";position:absolute;right:-6px;bottom:0;width:10px;height:10px;background:#E1FFC7;clip-path:path("M0 0 L0 10 L10 10 C5 9 2 6 0 0 Z")}
.bub+.bub{margin-top:1px}
.bub.gap{margin-top:7px}
.lp{margin:6px 0 2px;border-left:2px solid #4FAE4E;padding:2px 0 2px 8px;display:flex;gap:8px;align-items:flex-start}
.bub.in .lp{border-left-color:#007AFF}
.lp .lt{min-width:0}
.lp .site{font-weight:600;color:#3E8E3B;font-size:12px}
.bub.in .lp .site{color:#007AFF}
.lp .ttl{font-weight:600;font-size:12.5px;line-height:1.25;margin-top:1px}
.lp .ds{font-size:12px;color:#444;line-height:1.3;margin-top:1px}
.lp .th{width:46px;height:46px;border-radius:5px;flex-shrink:0;background:linear-gradient(160deg,#5E7B8E 0%,#2C3E4C 55%,#E6C27A 100%);position:relative;overflow:hidden}
.lp .th::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(0deg,#1B2730,rgba(27,39,48,0))}
.doc{display:flex;gap:9px;align-items:center;padding:3px 2px 3px 0}
.doc .ic{width:38px;height:38px;border-radius:50%;background:#4FAE4E;display:grid;place-items:center;flex-shrink:0}
.bub.in .doc .ic{background:#007AFF}
.doc .ic svg{width:16px;height:16px}
.doc .nm{font-weight:600;font-size:12.5px;line-height:1.25}
.doc .mt{font-size:11px;color:#8D9DA5;margin-top:1px}
.bub.out .doc .mt{color:#5E9A4A}
.bub.photo{padding:3px;overflow:hidden;max-width:70%}
.bub.photo .img{width:170px;height:118px;border-radius:14px;background:
  radial-gradient(70% 60% at 60% 80%,#F0B37A 0%,rgba(240,179,122,0) 60%),
  linear-gradient(180deg,#7A9EC2 0%,#C98E6E 48%,#3B2E2A 49%,#24201F 100%);position:relative}
.bub.photo .img::before{content:"";position:absolute;left:14%;top:38%;width:22%;height:12%;background:#2C2522;border-radius:1px}
.bub.photo .img::after{content:"";position:absolute;right:16%;top:30%;width:18%;height:20%;background:#2C2522}
.bub.photo .tm{position:absolute;right:9px;bottom:8px;margin:0;background:rgba(0,0,0,.4);color:#fff;padding:2px 6px;border-radius:9px;font-size:10px}
.bub.photo .tm svg{color:#fff}
.tg-input{display:flex;align-items:center;gap:8px;padding:7px 10px;border-top:.5px solid rgba(0,0,0,.18);background:rgba(246,246,246,.98);flex-shrink:0}
.tg-input svg{width:22px;height:22px;color:#8E8E93;flex-shrink:0}
.tg-input .fld{flex:1;height:32px;border:.5px solid #C8C8CC;border-radius:16px;background:#fff;display:flex;align-items:center;padding:0 8px 0 11px;font-size:13.5px;color:#8E8E93}
.tg-input .fld svg{margin-left:auto;width:20px;height:20px}
.homebar{height:18px;display:grid;place-items:center;background:inherit;flex-shrink:0}
.homebar i{display:block;width:108px;height:4px;border-radius:2px;background:#1F1F1F;opacity:.9}

/* dark chat list */
.screen.dark{background:#000;color:#fff}
.screen.dark .sbar{color:#fff}
.list-head{padding:0 14px 6px;flex-shrink:0}
.list-head .row{display:flex;justify-content:space-between;align-items:center;height:30px;color:#0A84FF;font-size:14px}
.list-head .row svg{width:20px;height:20px}
.list-head h4{margin:0;font-size:23px;font-weight:700;letter-spacing:-.02em;font-family:inherit;line-height:1.1;padding:2px 0 8px}
.list-head .srch{height:32px;border-radius:10px;background:#1C1C1E;display:flex;align-items:center;gap:6px;padding:0 9px;color:#8E8E93;font-size:13px}
.list-head .srch svg{width:14px;height:14px}
.chatrow{display:flex;align-items:center;gap:10px;padding:7px 10px 7px 12px;position:relative}
.chatrow+.chatrow::before{content:"";position:absolute;left:66px;right:0;top:0;height:.5px;background:#2C2C2E}
.chatrow img,.chatrow .tile{width:48px;height:48px;border-radius:50%;flex-shrink:0}
.chatrow .tile{font-size:18px}
.chatrow .c{flex:1;min-width:0}
.chatrow .n{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.chatrow .n b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatrow .n span{font-size:11px;color:#8E8E93;flex-shrink:0;display:inline-flex;align-items:center;gap:3px}
.chatrow .n span svg{width:13px;height:8px;color:#0A84FF}
.chatrow .p{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.chatrow .p span{font-size:12.5px;color:#8E8E93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.chatrow .p span.two{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chatrow .p b{min-width:19px;height:19px;border-radius:10px;background:#0A84FF;color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;padding:0 5px;flex-shrink:0}
.tabbar{margin-top:auto;border-top:.5px solid #2C2C2E;display:flex;justify-content:space-around;padding:6px 6px 0;background:#0D0D0D;flex-shrink:0}
.tabbar div{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;color:#8E8E93;font-weight:500}
.tabbar div.on{color:#0A84FF}
.tabbar svg{width:22px;height:22px}
.tabbar .bdg{position:relative}
.tabbar .bdg i{position:absolute;top:-4px;right:-10px;min-width:16px;height:16px;border-radius:8px;background:#FF3B30;color:#fff;font-size:9.5px;font-weight:600;display:grid;place-items:center;padding:0 4px;font-style:normal}

/* iOS settings: Devices */
.set-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 12px 10px;background:#F2F2F7;border-bottom:.5px solid rgba(0,0,0,.18);flex-shrink:0}
.set-head .back{display:flex;align-items:center;gap:2px;color:#007AFF;font-size:13.5px}
.set-head .back svg{width:11px;height:18px}
.set-head b{font-size:14px;font-weight:600}
.set{flex:1;background:#F2F2F7;padding:12px 12px 0;font-size:13.5px;overflow:hidden}
.set .grp{background:#fff;border-radius:10px;overflow:hidden;margin-bottom:14px}
.set .grp>div{padding:9px 12px;border-bottom:.5px solid #E5E5EA}
.set .grp>div:last-child{border-bottom:0}
.set .lk{color:#007AFF;display:flex;align-items:center;gap:10px}
.set .lk .qr{width:28px;height:28px;border-radius:7px;background:#007AFF;display:grid;place-items:center;color:#fff}
.set .lk .qr svg{width:16px;height:16px}
.set .lb{font-size:11.5px;color:#8E8E93;text-transform:uppercase;letter-spacing:.02em;padding:0 12px 6px}
.set .dv{display:grid;grid-template-columns:32px 1fr auto;column-gap:10px;align-items:center}
.set .dv .i{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff}
.set .dv .i svg{width:18px;height:18px}
.set .dv .i.ph{background:#1C1C1E}
.set .dv .i.mac{background:#8E8E93}
.set .dv .i.tm{background:var(--ink);--mark-ring:#fff}
.set .dv .i.tm svg{width:20px;height:20px}
.set .dv b{display:block;font-weight:500;font-size:13.5px;line-height:1.2}
.set .dv small{display:block;font-size:11.5px;color:#8E8E93;line-height:1.3}
.set .dv .on{font-size:12px;color:#007AFF}
.set .dv .when{font-size:12px;color:#8E8E93}
.set .red{color:#FF3B30}
.set .nt{font-size:11.5px;color:#8E8E93;padding:0 12px;margin-top:-6px}
.phone.devices .homebar{background:#F2F2F7}

/* ===== dark band: the afternoon before ===== */
.band-dark{background:var(--dark);color:var(--on-dark)}
.band-dark .intro{color:var(--on-dark-muted)}
.band-dark h2 em{color:var(--acc-tint)}
.before{padding:140px 0 120px}
.before .grid{align-items:center}
.before .fig{grid-column:1/6;display:flex;justify-content:flex-start;align-items:flex-start;gap:28px}
.before .fig .phone{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 0 2px #333,0 50px 80px -30px rgba(0,0,0,.8)}
.before .fig .caption{max-width:22ch;padding-top:12px}
.before .txt{grid-column:7/13}
.before .txt h2{margin-bottom:34px}
.before .story{font-family:var(--serif);font-size:25px;line-height:1.38;letter-spacing:-.005em;max-width:24em;color:var(--on-dark);font-weight:400}
.before .story+.story{margin-top:22px}
.before .intro{margin-top:30px}
.before .ledger{margin-top:40px;border-top:1px solid var(--rule-dark);max-width:520px}
.before .ledger div{display:grid;grid-template-columns:1fr auto auto;gap:24px;padding:12px 0;border-bottom:1px solid var(--rule-dark);font-size:16px}
.before .ledger div span:nth-child(2){font-size:15px;color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.before .ledger div span:nth-child(3){font-size:15px;color:var(--acc-tint);text-align:right;font-variant-numeric:tabular-nums}

/* ===== steps: a timeline, the time of day in the margin; head = a full width H2 with its deck dropped under it ===== */
.steps{padding:150px 0 120px}
.head-stack{margin-bottom:64px}
.head-stack h2{max-width:12em}
.head-stack .aside{margin-top:26px;font-family:var(--serif);font-size:23px;line-height:1.4;letter-spacing:-.005em;color:var(--muted);text-wrap:pretty;max-width:30em}
.step{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;padding:56px 0 64px;border-top:1px solid var(--rule)}
.step.s3{align-items:start}
.step .when{grid-column:1/3;padding-top:2px;align-self:start}
.step .when .t{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:46px;line-height:.9;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.step .when .l{display:block;margin-top:12px;font-size:15px;color:var(--muted)}
.step .t{grid-column:3/7;max-width:40ch;padding-top:4px}
.step .t h3{margin-bottom:14px;font-size:30px}
.step .t p{color:var(--muted);font-size:17.5px;line-height:1.55;text-wrap:pretty}
.step .fig{grid-column:7/13;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.step.s2 .fig{grid-column:8/13;padding-left:40px}
.step .fig .caption{max-width:44ch}
.step .phone.short{height:540px}
.step .mac{width:100%}

/* ===== colour band CTA, shallow: the proof line centred, the form under it ===== */
.band-colour{background:var(--acc);color:#fff}
.cta-mid{padding:72px 0 76px;text-align:center}
.cta-mid .proof{font-family:var(--serif);font-size:34px;line-height:1.25;letter-spacing:-.012em;color:#fff;max-width:26em;margin:0 auto;text-wrap:balance}
.cta-mid .form{margin:34px auto 0;max-width:560px}
.cta-mid p.note{margin:14px auto 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.88);max-width:46em}

/* ===== what it does: H2 alone, the intro as a margin note above the ledger, the window right, numbers in the gutters ===== */
.can{padding:150px 0 150px}
.can>.wrap>h2{max-width:11em;margin-bottom:56px}
.can .body{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
.can .legend{grid-column:1/5}
.can .legend .note{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.4;letter-spacing:-.005em;color:var(--muted);margin-bottom:22px;text-wrap:pretty}
.can .legend .li{display:grid;grid-template-columns:24px 1fr auto;gap:14px;padding:18px 0;border-top:1px solid var(--rule);align-items:start}
.can .legend .li:last-of-type{border-bottom:1px solid var(--rule)}
.can .legend .li .co{position:static;margin-top:1px}
.can .legend .li b{display:block;font-weight:600;font-size:16.5px;line-height:1.35;margin-bottom:4px}
.can .legend .li p{font-size:16.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.can .legend .li .tt{font-size:14.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:3px}
.can .figwrap{grid-column:5/13;position:relative;padding:0 40px}
.can .plate{position:relative;width:100%;border-radius:var(--r-plate);overflow:hidden;box-shadow:0 0 0 1px rgba(20,20,20,.14),0 40px 80px -40px rgba(20,20,20,.45);background:#fff}
.can .plate .tgwin{width:100%;height:600px;border-radius:0;box-shadow:none}
.can .plate .tgwin .side{width:250px}
.can .figwrap .co{top:0}
.can .figwrap .co[data-at="gl"]{left:4px}
.can .figwrap .co[data-at="gr"]{right:4px}
.can .figwrap .co::after{content:"";position:absolute;top:50%;width:12px;height:1px;background:var(--rule-strong)}
.can .figwrap .co[data-at="gl"]::after{left:100%}
.can .figwrap .co[data-at="gr"]::after{right:100%}
.can .figwrap .caption{margin-top:18px}

/* ===== the ceilings (white band): the head beside the Devices phone, the printed slip under the lede, a three row coda ===== */
.band-white{background:var(--white)}
.limits{padding:150px 0 130px}
.limits .top{align-items:start}
.limits .lh{grid-column:1/8}
.limits .lh h2{max-width:9.5em}
.limits .lede{margin-top:28px;font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.35;letter-spacing:-.005em;color:var(--muted);max-width:26em;text-wrap:pretty}
.limits .trust{grid-column:9/13;display:flex;flex-direction:column;gap:22px;align-items:flex-start;padding-top:12px}
.limits .trust .caption{max-width:30ch}
/* the slip: a printed ceilings card, paper on white */
.slip{margin-top:44px;max-width:600px;background:var(--paper);color:var(--ink);padding:0 0 26px;border-radius:6px;box-shadow:0 0 0 1px rgba(20,20,20,.16),0 40px 70px -34px rgba(20,20,20,.45),0 2px 4px rgba(20,20,20,.06);position:relative}
.slip::before{content:"";position:absolute;left:18px;right:18px;top:40px;height:0;border-top:1px dashed var(--rule-strong)}
.slip .sh{display:flex;justify-content:space-between;gap:16px;padding:12px 24px 10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--muted)}
.slip .sh span:first-child{color:var(--ink);font-weight:500}
.slip p{font-family:var(--serif);font-size:21px;line-height:1.35;letter-spacing:-.005em;padding:0 24px;margin-top:16px;text-wrap:pretty}
.slip p:first-of-type{margin-top:26px}
.slip p b{font-weight:500;color:var(--acc-deep)}
.slip .nf{font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--muted);margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
.slip .nf{margin-left:24px;margin-right:24px;padding-left:0;padding-right:0}
.limits .rules{margin-top:80px;border-top:1px solid var(--rule);max-width:960px}
.limits .rules>div{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:26px 0;border-bottom:1px solid var(--rule)}
.limits .rules b{font-family:var(--serif);font-size:25px;font-weight:500;letter-spacing:-.01em;line-height:1.15;color:var(--ink);text-wrap:balance}
.limits .rules p{font-size:17.5px;line-height:1.55;color:var(--muted);text-wrap:pretty;max-width:58ch}

/* ===== three more chats (stone): a head column, then three phones level across the rest of the container ===== */
.band-sand{background:var(--sand)}
.examples{padding:140px 0 120px;overflow:hidden}
.examples .grid{align-items:start}
.examples .eh{grid-column:1/4;position:sticky;top:104px}
.examples .eh h2{font-size:58px;max-width:5em}
.examples .eh .intro{margin-top:24px;max-width:22em}
.examples .trio{grid-column:4/13;display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px;align-items:start}
.examples .ex{display:flex;flex-direction:column;gap:18px}
.examples .ex .phone{height:auto;width:100%;max-width:300px}
.examples .ex .screen{height:500px}
.examples .ex .tgwall{min-height:150px;padding-top:12px}
.examples .ex .caption{max-width:none;font-size:16px;color:var(--ink)}
.examples .ex .caption b{display:block;margin-bottom:4px}

/* ===== who it is for: one paragraph set large, no rows ===== */
.audience{padding:130px 0 110px}
.audience h2{font-size:64px}
.audience .who{margin-top:36px;font-family:var(--serif);font-size:30px;line-height:1.32;letter-spacing:-.01em;max-width:30em;text-wrap:pretty}

/* ===== asked before joining: the headline left, two ruled columns ===== */
.faq{padding:120px 0 120px}
.faq>.wrap>h2{font-size:64px;margin-bottom:56px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.faq .qa{columns:2;column-gap:64px;column-rule:1px solid var(--rule)}
.faq .q{break-inside:avoid;padding:0 0 30px;margin-bottom:30px;border-bottom:1px solid var(--rule)}
.faq .q h3{font-family:var(--serif);font-size:25px;line-height:1.2;letter-spacing:-.01em;margin-bottom:12px;font-weight:500}
.faq .q p{font-size:17.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* ===== close: on paper, the headline at full width, then a ruled row with the form ===== */
.close{padding:140px 0 120px;border-top:1px solid var(--rule)}
.close h2{font-size:118px;line-height:.9;letter-spacing:-.03em;max-width:9em}
.close .row{margin-top:56px;padding-top:28px;border-top:1px solid var(--ink);display:grid;grid-template-columns:7fr 5fr;column-gap:24px;align-items:start}
.close .row .form{max-width:560px}
.close .row .assure{margin:0;padding-top:4px}

/* ===== appendix: the setup lines, closed by default, above the footer ===== */
.appendix{padding:0 0 110px}
.dev{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dev summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:140px 1fr 44px;align-items:center;gap:24px;min-height:72px;padding:14px 0}
.dev summary::-webkit-details-marker{display:none}
.dev summary .sl{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink)}
.dev summary .st{font-size:17.5px;color:var(--muted)}
.dev summary .pm{position:relative;width:44px;height:44px;justify-self:end}
.dev summary .pm::before,.dev summary .pm::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transform:translate(-50%,-50%)}
.dev summary .pm::before{width:16px;height:1.5px}
.dev summary .pm::after{width:1.5px;height:16px;transition:transform .2s}
.dev[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.dev .inner{padding:8px 0 40px 164px}
.dev .lead{font-size:16.5px;color:var(--muted);max-width:66ch;line-height:1.55;margin-bottom:18px}
.dev .rows{border-top:1px solid var(--rule)}
.dev .r{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule);align-items:start}
.dev .r b{font-weight:600;font-size:16.5px;padding-top:4px}
.dev .r b small{display:block;font-weight:400;font-size:14.5px;color:var(--muted);margin-top:2px}
.dev code{display:block;font-family:var(--mono);font-size:13.5px;line-height:1.6;background:#ECECE6;color:var(--ink);padding:12px 16px;border-radius:8px;white-space:pre-wrap;word-break:break-word}
.dev code .c{color:#6A6A65}
.dev .r p{font-size:16px;color:var(--muted);margin-top:6px;max-width:66ch;line-height:1.55}
.dev .notes{margin-top:22px;font-size:15.5px;color:var(--muted);max-width:80ch;line-height:1.6}

/* ===== footer: a real ending, with weight ===== */
footer{background:var(--dark);color:var(--on-dark-muted);padding:56px 0 48px;font-size:15px}
footer .ft-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;padding-bottom:32px;border-bottom:1px solid var(--rule-dark)}
footer .wordmark{color:var(--on-dark);font-size:27px;--mark-ring:#161616}
footer .wordmark img{height:30px}
footer .ft-line{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--on-dark);max-width:30em;text-wrap:pretty}
footer .btn{height:46px;padding:0 20px;font-size:15px}
footer .ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;padding-top:20px}
footer nav{display:flex;gap:22px}
footer nav a{text-decoration:none;color:var(--on-dark-muted);display:inline-flex;align-items:center;min-height:44px}
footer nav a:hover{color:var(--on-dark)}
footer .tm{font-size:14.5px;max-width:60ch;text-wrap:pretty}

/* ===== motion: only when JS runs and motion is allowed; fails open ===== */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv.d1{transition-delay:.1s}.js .rv.d2{transition-delay:.2s}.js .rv.d3{transition-delay:.3s}
  .js .story-anim .anim:not(.pv2){opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
  .js .story-anim .anim.show{opacity:1;transform:none}
  .js .story-anim .tk:not(.read) .t2{opacity:0}
}

/* ===== responsive ===== */
@media (max-width:1180px){
  :root{--gutter:40px}
  h1{font-size:68px}h2{font-size:58px}
  .hero{--fl:calc(50% - 80px);--pad:48px}
  .scene{height:680px}
  .scene .tgwin{top:56px;height:460px}
  .scene-caption{bottom:46px}
  .close h2{font-size:84px}
  .can .plate .tgwin{height:560px}
  .can .plate .tgwin .side{width:230px}
  .examples .grid{display:block}
  .examples .eh{position:static;margin-bottom:48px}
  .examples .trio{grid-template-columns:repeat(3,1fr);column-gap:24px}
  .limits .rules>div{grid-template-columns:190px 1fr}
  .cta-mid .proof{font-size:28px}
  .faq>.wrap>h2,.audience h2{font-size:52px}
  .audience .who{font-size:26px}
  .dev .inner{padding-left:0}
}
@media (max-width:980px){
  h1{font-size:60px}h2{font-size:50px}
  .hero .grid{display:flex;flex-direction:column}
  .hero-text{display:contents}
  .hero h1{padding-top:40px}
  .hero .assure{margin:12px 0 0}
  .hero .also{margin-top:10px}
  .clients{order:5;margin:36px 0 8px}
  .field{display:none}
  .scene{order:3;margin:0 calc(-1*var(--gutter));height:auto;display:flex;flex-direction:column;align-items:center;background:linear-gradient(168deg,#2AABEE 0%,#229ED9 40%,#1C7FB6 100%);padding:36px var(--gutter) 0}
  .scene .tgwin{position:static;zoom:1;width:100%;max-width:760px;height:520px}
  .scene-caption{order:4;margin:0 calc(-1*var(--gutter));padding:18px var(--gutter) 28px;background:#17699B;position:static}
  .before .grid,.can .body,.limits .top,.close .row{display:block}
  .close .row .assure{margin-top:16px}
  .before .fig,.before .txt{margin:0}
  .before .txt{margin-top:48px}
  .step{display:block}
  .step .when{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
  .step .when .t{font-size:34px}
  .step .when .l{margin-top:0}
  .step .fig{margin-top:28px;padding-left:0!important}
  .mail-body{flex-direction:column;min-height:0}
  .mail-body .ml{width:100%;border-right:0;border-bottom:1px solid #E9E9E5;display:flex;padding:0}
  .mail-body .mi{flex:1 1 0;min-width:0;border-bottom:0;border-right:1px solid #EEEEEA}
  .mail-body .mi:nth-child(n+3){display:none}
  .mail-body .mi::before{display:none}
  .dev summary{grid-template-columns:1fr 44px}
  .dev summary .sl{display:none}
  .dev .r{grid-template-columns:1fr;gap:10px}
  .can .legend{margin-bottom:40px}
  .can .plate .tgwin{height:520px}
  .limits .trust{margin-top:48px;padding-top:0}
  .limits .rules{margin-top:64px}
  .examples .trio{display:flex;flex-direction:column;gap:48px}
  .examples .ex .phone{width:296px}
  .faq .qa{columns:1}
  .close h2{font-size:64px}
  footer .ft-top{grid-template-columns:1fr;gap:20px;justify-items:start}
}
@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:16px}
  h1{font-size:44px;line-height:.96}h2{font-size:40px}
  h3{font-size:22px}
  .mast .wrap{height:60px}
  .mast nav a:not(.btn){display:none}
  .wordmark{font-size:24px}
  .hero h1{padding-top:18px}
  .deck{font-size:16.5px;margin:12px 0 8px;max-width:none}
  .status{font-size:15.5px;margin-bottom:12px}
  .hero .also{display:none}
  .form{flex-direction:column}
  .form input,.form .btn{width:100%;height:50px;min-height:50px}
  .form input{flex:none}
  .assure{font-size:16px;margin-top:10px}
  .hero .assure{margin:14px 0 0}
  .form{margin-top:0}
  .scene{padding:18px var(--gutter) 0;margin-top:18px}
  .scene .tgwin{height:470px;max-width:none}
  .tgwin .side{display:none}
  .tgwin .chead{padding:0 12px;gap:10px}
  .tgwin .chead .lights{display:flex;margin-right:4px}
  .tgwin .chead .ic{gap:12px}
  .tgwin .cwall{padding:12px 12px 8px}
  .tgwin .bub,.tgwin .agroup{max-width:84%}
  .scene-caption{padding-top:14px}
  .caption .desk{display:none}
  .caption .mob{display:inline}
  .clients{margin:28px 0 4px}
  .phone{width:min(296px,100%)}
  .before{padding:80px 0 70px}
  .before .fig{flex-direction:column;gap:14px}
  .before .story{font-size:21px}
  .before .ledger div{grid-template-columns:1fr auto;gap:12px}
  .before .ledger div span:nth-child(2){display:none}
  .steps{padding:90px 0 70px}
  .head-side{margin-bottom:40px}
  .step{padding:40px 0}
  .step .t h3{font-size:24px}
  .step .phone.short{height:auto}
  .step .phone.short .screen{height:auto}
  .step .phone.short .tgwall{min-height:120px;padding-bottom:14px}
  .head-stack .aside{font-size:19px}
  .term .tbody{padding:14px 14px 16px;font-size:12.5px}
  .dev code{font-size:12.5px}
  .dev .inner{padding-bottom:28px}
  .appendix{padding-bottom:70px}
  .cta-mid{padding:56px 0}
  .cta-mid .proof{font-size:23px}
  .cta-mid .form{margin-top:24px}
  .can{padding:90px 0 80px}
  .can>.wrap>h2{margin-bottom:32px}
  .can .legend .note{font-size:18px}
  .can .figwrap{padding:0}
  .can .plate{border-radius:14px}
  .can .plate .tgwin{height:460px}
  .can .figwrap .co{display:none}
  .limits{padding:90px 0}
  .limits .lede{font-size:20px}
  .slip{margin-top:32px}
  .slip .sh{flex-wrap:wrap;gap:4px 14px;padding:12px 18px 8px}
  .slip::before{display:none}
  .slip p{font-size:18px;padding:0 18px}
  .slip .nf{margin-left:18px;margin-right:18px}
  .limits .trust{flex-direction:column;gap:20px;align-items:flex-start}
  .limits .phone.short{height:auto}
  .limits .phone.short .screen{height:auto}
  .limits .set{padding-bottom:22px}
  .limits .trust .caption{max-width:none}
  .limits .rules>div{grid-template-columns:1fr;gap:8px}
  .limits .rules b{font-size:21px}
  .examples{padding:90px 0 80px}
  .examples .eh{margin-bottom:36px}
  .examples .eh h2{font-size:40px}
  .audience{padding:80px 0}
  .audience h2{font-size:40px}
  .audience .who{font-size:21px;margin-top:22px}
  .faq{padding:90px 0 70px}
  .faq>.wrap>h2{font-size:38px;margin-bottom:36px;padding-bottom:20px}
  .faq .q h3{font-size:21px}
  .close{padding:80px 0 70px}
  .close h2{font-size:48px}
  .close .row{margin-top:32px;padding-top:20px}
  footer{padding:40px 0 36px}
  footer .ft-line{font-size:18px}
}