/* hero: SQUEAK / FREELY. at one size (--hl), sized so SQUEAK (2.648em) fits beside the receipt and
   height-bounded so the CTA row stays above the fold, then eased to .88 of that fit; the hero fills
   the first screen with the spare height split above and below */
.poster{--s:clamp(11px,min(1.1vw,1.9svh),18px);--pt:clamp(28px,3vw,48px);--bar:80px;--fold:calc(var(--bar) + var(--pt) + clamp(28px,2.6vw,40px) + clamp(40px,4vw,64px) + 100px);--slip-r:2vw;--room:calc(100vw - 2 * max(var(--gutter),(100vw - var(--max)) / 2) - var(--slip-r) - clamp(32px,3vw,56px) - 20.17 * var(--s));--hl:clamp(56px,.88 * min(var(--room) / 2.648,(100svh - var(--fold)) / 1.855),352px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;min-height:calc(100svh - var(--bar));position:relative;overflow-x:clip;padding:var(--pt) var(--pad-x) clamp(40px,4vw,64px)}
.poster h1{grid-area:1/1;font:400 var(--hl)/.91 Anton,Impact,sans-serif;text-transform:uppercase;margin:0 0 clamp(28px,2.6vw,40px)}
.poster h1 .ln{display:block;letter-spacing:-.025em;white-space:nowrap}
.poster h1 .ln-2{margin-top:.035em}
.poster-foot{grid-area:2/1/3/3;display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(28px,3vw,48px);max-width:calc(100% - 18.75 * var(--s) - 4%);position:relative;z-index:2}
.poster-sub{font-size:clamp(18px,1.4vw,21px);line-height:1.45;max-width:19em;margin:0;text-wrap:pretty}
.poster-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px}
.poster-also{margin:12px 0 0;max-width:31em;text-wrap:pretty;font-size:var(--t-small);line-height:1.5;color:var(--on-band-muted)}
.poster-also a{color:var(--on-band);font-weight:700;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.poster-also a:hover{text-decoration-color:currentColor}
.poster .block-button{gap:32px}
.poster .block-button .hero-get-label{font-size:inherit;line-height:inherit}
main h2{text-transform:uppercase}
.band-link{display:inline-block;padding:11px 0;font-size:17px;line-height:22px;font-weight:700;color:var(--on-band);text-decoration:none}
.band-link-label{text-decoration:underline 2px color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:6px}
.band-link:hover .band-link-label{text-decoration-color:currentColor}
.band-link>[aria-hidden]{font-size:20px;line-height:1;vertical-align:-1px}

/* receipt: one font-size scales every part; it stays yellow in both themes. Its top sits level with TALK */
.permission-slip{grid-area:1/2;align-self:start;margin:calc(var(--hl) * .02 + .15em) var(--slip-r) 0 0;font-size:var(--s);position:relative;width:18.75em;padding:1.5em 1.55em 1em;background:var(--yellow);color:var(--ink);transform:rotate(6deg);box-shadow:.56em 1em 0 var(--band-deep);isolation:isolate}
.permission-slip::after{content:'';position:absolute;height:13px;bottom:-12px;left:0;right:0;background:linear-gradient(135deg,var(--yellow) 25%,transparent 25%) -7px 0/14px 14px,linear-gradient(225deg,var(--yellow) 25%,transparent 25%) -7px 0/14px 14px}
.slip-heading{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:1.25em;border-bottom:1px dashed currentColor;padding-bottom:.6em}
.slip-heading span:last-child{font-size:1.65em;line-height:1}
.slip-title{font-size:2em;line-height:1.05;letter-spacing:-.03em;margin:.7em 0 .45em}
.slip-answer{font:400 2em Anton,sans-serif;transform:rotate(-5deg);border:3px solid currentColor;padding:.06em .25em;text-align:center;margin:0 -.25em .62em;white-space:nowrap}
.permission-slip dl{font-size:.8em;margin:0 0 1.4em}
.permission-slip dl div{display:flex;align-items:baseline;gap:.5em;margin:.55em 0}
.permission-slip dd{margin:0}
.permission-slip dt,.slip-total>span:first-child{display:flex;flex:1;align-items:baseline;gap:.5em}
.permission-slip dt::after,.slip-total>span:first-child::after{content:'';flex:1;border-bottom:1.5px dotted currentColor;opacity:.45}
.slip-total{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:.85em;border-top:1px dashed currentColor;padding-top:1.1em}
.barcode{height:1.7em;width:76%;margin:1.25em auto .5em;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 9px,var(--ink) 9px 13px,transparent 13px 16px)}
.slip-foot{text-align:center;font-size:.65em;margin:0}
@media(prefers-reduced-motion:no-preference) and (min-width:701px){
  .permission-slip{animation:slip-print .9s cubic-bezier(.2,.7,.2,1) .15s both}
}
@keyframes slip-print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-24px -24px -48px -24px)}}

/* devices: one tile system shared with the download picker (square, surface, 1px line) */
.devices{--tile-gap:clamp(12px,1.6vw,24px);padding:var(--section-y) var(--pad-x) clamp(48px,5vw,72px);scroll-margin-top:20px}
.devices-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(32px,3.5vw,48px)}
.devices-heading p{max-width:330px;font-size:var(--t-lead);line-height:1.55;margin:0;color:var(--text)}
.device-lineup{list-style:none;margin:0;padding:0;display:grid;gap:var(--tile-gap)}
.app-lineup{grid-template-columns:repeat(2,minmax(0,1fr))}
.handheld-lineup{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--tile-gap)}
.device-item{min-width:0}
.device-link{display:grid;height:100%;background:var(--surface);border:1px solid var(--line);box-shadow:4px 4px 0 var(--lane);color:var(--text-strong);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.device-link:hover{border-color:var(--text-strong);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--text-strong)}
.device-link:active{transform:translate(4px,4px);box-shadow:none}
/* screens are the CTA colour in both themes; what is drawn on them is ink-dark */
.device-art{display:flex;justify-content:center;align-items:center;min-width:0;--accent:var(--text-strong);--accent-light:var(--cta);--screen-ui:#fff;--bg-secondary:var(--art-body);--bg-card:var(--art-card);--bg-tertiary:var(--art-tertiary)}
[data-theme="dark"] .device-art{--accent:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .device-art{--accent:var(--ink)}}
.device-svg{display:block;width:100%;height:100%;overflow:visible}
.device-copy{display:flex;flex-direction:column;min-width:0}
.device-name{font-weight:700;letter-spacing:-.02em}
.device-platforms{font-size:var(--t-small);line-height:1.45;color:var(--muted)}
.device-action{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-small);font-weight:700}
.device-action>span{display:inline-block;font-size:18px;line-height:1;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.device-link:hover .device-action>span{transform:translateX(4px)}
.app-lineup .device-link{grid-template-columns:minmax(0,44%) minmax(0,1fr);align-items:center;column-gap:clamp(16px,2.4vw,40px);padding:clamp(20px,2.2vw,32px)}
.app-lineup .device-art{height:clamp(112px,12vw,176px)}
.app-lineup .device-mobile .device-svg{height:94%}
.app-lineup .device-name{font-size:clamp(20px,1.7vw,24px)}
.app-lineup .device-platforms{font-size:var(--t-body);margin:6px 0 clamp(14px,1.4vw,20px)}
.handheld-lineup .device-link{grid-template-rows:auto 1fr;row-gap:16px;padding:20px 20px 18px}
.handheld-lineup .device-art{height:clamp(92px,8vw,116px)}
.handheld-lineup .device-svg{max-width:150px}
.handheld-lineup .device-cardputer .device-svg{height:74%}
.handheld-lineup .device-tpager .device-svg{height:84%}
.handheld-lineup .device-name{font-size:18px}
.handheld-lineup .device-platforms{margin:4px 0 12px;flex:1}

/* mesh: a poster that strikes out what's gone and says what still carries the message */
.mesh{padding:var(--section-y) var(--pad-x)}
.mesh-lead{margin:0 0 clamp(24px,2.6vw,40px);max-width:30em;font-size:var(--t-hero-sub);line-height:1.45;color:var(--on-band-muted)}
.mesh-lead b{display:block;color:var(--on-band)}
.mesh-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-band)}
.mesh-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4%;align-items:center;padding:clamp(12px,1.1vw,18px) 0;border-bottom:1px solid var(--line-band)}
.mesh-word{margin:0;font:400 clamp(48px,6.6vw,96px)/.95 Anton,Impact,sans-serif;letter-spacing:-.02em;text-transform:uppercase;color:var(--on-band)}
.mesh-word s{position:relative;text-decoration:none;color:color-mix(in srgb,var(--on-band) 66%,var(--band));transition:color .35s}
.mesh-word s::after{content:'';position:absolute;left:-.05em;right:-.05em;top:50%;height:.075em;margin-top:-.02em;background:var(--yellow);box-shadow:.025em .04em 0 var(--band-deep);transform:rotate(-1deg);transform-origin:left center;transition:transform .5s cubic-bezier(.6,0,.2,1)}
.mesh-note{margin:0;font-size:var(--t-lead);line-height:1.5;color:var(--on-band-muted);max-width:30em;text-wrap:pretty;transition:opacity .4s,transform .4s}
.mesh-note b{display:block;margin-bottom:4px;font-size:clamp(20px,1.7vw,26px);line-height:1.2;letter-spacing:-.02em;color:var(--on-band)}
.mesh-end{border-bottom:0;padding-top:clamp(18px,1.6vw,26px)}
.mesh-end .mesh-word{transition:opacity .4s,transform .5s cubic-bezier(.2,1.3,.4,1)}
/* JS arms only rows still below the fold; everything else, print and no-JS show the struck state */
@media screen{
  .mesh-row.is-armed s{color:var(--on-band)}
  .mesh-row.is-armed s::after{transform:rotate(-1deg) scaleX(0)}
  .mesh-row.is-armed .mesh-note{opacity:0;transform:translateY(8px)}
  .mesh-end.is-armed .mesh-word{opacity:0;transform:translateY(12px) rotate(-2deg)}
}
@media(min-width:701px) and (max-width:1100px){.mesh-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* manifesto: one ink band in both themes; yellow lives only in the key tag */
.manifesto{padding:var(--section-y) var(--pad-x);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:6%;align-items:center;background:var(--band-ink);color:var(--on-band);overflow-x:clip}
.manifesto>*{min-width:0}
.manifesto :focus-visible{outline-color:var(--focus-band)}
.manifesto-copy p{font-size:var(--t-lead);line-height:1.55;max-width:440px;margin:clamp(24px,2.4vw,36px) 0 0}
.find{grid-column:1/-1;margin-top:clamp(56px,6vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-band)}
.find-title{margin:0;font:400 var(--h3)/1 Anton,Impact,sans-serif;letter-spacing:-.01em;text-transform:uppercase}
.find-list{list-style:none;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 6%}
.find-list li{font-size:var(--t-body);line-height:1.55;color:var(--on-band-muted)}
.find-list b{display:block;margin-bottom:4px;font-size:clamp(18px,1.5vw,22px);line-height:1.25;letter-spacing:-.02em;color:var(--on-band)}
.find .band-link{margin-top:20px}
[data-theme="dark"] .manifesto{border-bottom:1px solid var(--hairline)}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .manifesto{border-bottom:1px solid var(--hairline)}}
.tag-wrap{--s:clamp(12px,1.25vw,20px);--tilt:-6deg;font-size:var(--s);justify-self:center;transform:rotate(var(--tilt));filter:drop-shadow(.5em .8em 0 var(--tag-shadow))}
.tag-wrap.will-settle{opacity:0}
.tag-wrap.is-in{animation:tag-settle .52s cubic-bezier(.2,1.25,.4,1) both}
@keyframes tag-settle{from{opacity:0;transform:translateY(-16px) rotate(-12deg)}to{opacity:1;transform:rotate(var(--tilt))}}
.key-tag{position:relative;margin:0;width:21em;padding:1.2em 1.4em 1.1em 3.2em;background:var(--yellow);color:var(--ink);clip-path:polygon(1.6em 0,100% 0,100% 100%,1.6em 100%,0 calc(100% - 1.6em),0 1.6em)}
.key-tag::before{content:'';position:absolute;left:1em;top:50%;width:1.1em;height:1.1em;margin-top:-.55em;border-radius:50%;background:var(--band-ink);box-shadow:inset 0 0 0 .18em #cfe27c}
.tag-head{display:flex;align-items:center;gap:.45em;font-weight:700;font-size:1.05em;letter-spacing:-.04em;padding-bottom:.7em;border-bottom:1px dashed rgb(21 32 74 / .45)}
.tag-head svg{width:1.4em;height:1.4em;flex:none}
.tag-body{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:.9em;align-items:center;margin:1em 0 .2em}
.tag-face{width:3.4em;height:3.4em;border-radius:50%;overflow:hidden;box-shadow:0 0 0 .14em var(--ink);background:#dcef86}
.tag-face svg{display:block;width:100%;height:100%;animation:fade .18s ease-out}
.tag-body p{margin:0}
.tag-body .tag-label{display:flex;align-items:center;gap:.4em;margin-bottom:.2em;font-size:max(12px,.8em);color:var(--tag-muted)}
.tag-addr{font-weight:700;font-size:1.05em;white-space:nowrap}
.key-tag.is-live .tag-label{margin-bottom:.45em}
.key-tag.is-live .tag-addr{max-width:calc(16ch + 1px);font:400 1.2em/1.2 var(--mono);white-space:normal;word-break:break-all}
/* makes a new address: a bare hairline icon in the label's colour; the 24px hit area overhangs the line */
.tag-new{--hit:max(24px,1.75em);display:grid;place-items:center;flex:none;width:var(--hit);height:var(--hit);margin:calc((1.25em - var(--hit)) / 2) 0;padding:0;border:0;border-radius:50%;background:none;color:var(--tag-muted);transition:color .15s,background-color .15s}
.tag-new:hover{color:var(--ink);background-color:rgb(21 32 74 / .08)}
.tag-new svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.key-tag :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tag-foot{margin-top:.8em;padding-top:.7em;border-top:1px dashed rgb(21 32 74 / .45);font-size:max(12px,.8em)}
.key-tag:not(.is-live) :is(.tag-foot,.tag-new){display:none}
.tag-foot a{font-weight:700;text-underline-offset:3px;text-decoration-color:rgb(21 32 74 / .45)}
.tag-foot a:hover{text-decoration-color:currentColor}
@keyframes fade{from{opacity:0}}

/* demo: your phone, a relay's view of your last message, Alice's phone; one grid for heading and stage */
.playground{--demo-chat-h:562px;--side:300px;padding:var(--section-y) var(--pad-x)}
.play-grid{display:grid;grid-template-columns:minmax(0,var(--side)) minmax(0,1fr) minmax(0,var(--side))}
.play-head{margin-bottom:clamp(40px,4vw,64px);text-align:center}
.br-narrow{display:none}
.live-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px var(--success-tint)}
.demo-unsupported{font-size:var(--t-lead);color:var(--text);margin:0}
.phone{display:flex;flex-direction:column;align-items:center;min-width:0}
.phone-label{align-self:stretch;margin:0 0 12px;text-align:center;font-size:var(--t-small);line-height:1.3;font-weight:700;color:var(--text-strong)}
/* each chat is the screen of a handset: flat bezel, rim, side keys, island, status bar, home bar */
.handset{--bezel:9px;--corner:46px;--device:#15204a;--rim:rgb(255 255 255 / .14);--keys:#15204a;position:relative;width:100%;padding:var(--bezel);border-radius:var(--corner);background:var(--device);box-shadow:inset 0 0 0 1.5px var(--rim),0 28px 48px -26px var(--shadow-soft)}
[data-theme="dark"] .handset{--device:#03061a;--rim:rgb(169 184 255 / .42);--keys:rgb(169 184 255 / .42);box-shadow:0 0 0 1.5px var(--rim),0 28px 48px -26px var(--shadow-soft)}
.handset::before,.handset::after{content:'';position:absolute;width:3px;border-radius:2px;background:var(--keys)}
.handset::before{left:-3px;top:112px;height:46px;box-shadow:0 60px 0 var(--keys)}
.handset::after{right:-3px;top:146px;height:72px}
.phone-you .handset{transform:rotate(1.5deg)}
.phone-alice .handset{transform:rotate(-1.5deg)}
.chat{position:relative;background:var(--surface);color:var(--text);border-radius:calc(var(--corner) - var(--bezel));display:flex;flex-direction:column;height:var(--demo-chat-h);overflow:hidden}
.status-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;flex:none;height:42px;padding:0 22px 0 26px;font-size:var(--t-small);font-weight:700;background:var(--band);color:var(--on-band);font-variant-numeric:tabular-nums}
.island{width:84px;height:24px;border-radius:12px;background:#03061a}
.status-icons{display:flex;justify-content:flex-end;align-items:center;gap:5px}
.status-icons svg{height:11px;width:auto;fill:currentColor}
.status-icons .batt{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.45}
.home-bar{flex:none;align-self:center;width:112px;height:5px;margin:4px 0 8px;border-radius:3px;background:var(--text);opacity:.55}
/* messenger app bar in the brand blue, running up under the status bar */
.chat-head{display:flex;align-items:center;gap:8px;padding:4px 16px 10px 6px;background:var(--band);color:var(--on-band)}
.chat-back{display:grid;place-items:center;width:24px;height:40px;flex:none}
.chat-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chat-head .avatar{box-shadow:0 0 0 2px rgb(255 255 255 / .35)}
.avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none;background:var(--art-tertiary)}
.avatar svg{display:block;width:100%;height:100%}
.chat-who{display:flex;flex-direction:column;min-width:0}
.chat-who b{font-size:var(--t-body)}
.chat-addr{font:var(--t-micro) var(--mono);color:var(--on-band-muted)}
/* a scrolled-away bubble fades under the header instead of showing as a hard sliver */
.chat-log{flex:1;overflow-y:auto;padding:14px 14px;display:flex;flex-direction:column;gap:8px;-webkit-mask-image:linear-gradient(transparent,#000 14px);mask-image:linear-gradient(transparent,#000 14px)}
.bubble-row{display:flex;flex-direction:column;max-width:86%;animation:pop .25s ease-out}
.bubble-row.out{align-self:flex-end;align-items:flex-end}
.bubble-row.in{align-self:flex-start}
.bubble{padding:10px 14px;border-radius:18px;font-size:var(--t-body);line-height:1.4;overflow-wrap:anywhere;text-wrap:pretty}
.out .bubble{background:var(--bubble-out);color:var(--on-bubble-out);border-bottom-right-radius:6px}
.in .bubble{background:var(--bubble-in);color:var(--text);border-bottom-left-radius:6px}
.bubble-state{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-micro);color:var(--muted);margin-top:4px}
.bubble-state svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bubble-state.is-delivered svg{stroke:var(--success)}
.bubble-state.is-warning{color:var(--warning)}
@keyframes pop{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.reply-row{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;padding:0 12px 8px}
.reply-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--surface);border:1.5px solid var(--bubble-out);color:var(--text-strong);font-size:var(--t-small);font-weight:700;text-decoration:none}
.reply-chip:hover{background:var(--tint)}
.reply-chip.is-get{background:var(--cta);color:var(--on-cta);border:2px solid var(--on-cta);box-shadow:3px 3px 0 var(--hard-shadow);transition:transform .15s,box-shadow .15s}
.reply-chip.is-get:hover{background:var(--cta-hover);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--hard-shadow)}
.reply-chip.is-get span{font-size:18px;line-height:1}
/* the margin note: beside your handset on desktop, inline before the chip below 900px */
.reply-hint{position:absolute;z-index:2;left:calc(100% - var(--bezel) - 10px);bottom:107px;display:flex;align-items:flex-start;gap:4px;margin:0;font-size:var(--t-small);line-height:1.35;color:var(--muted);white-space:nowrap;pointer-events:none}
.reply-hint svg{flex:none;width:72px;height:52px;margin-top:2px;fill:none;stroke:var(--text-strong);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reply-hint path{vector-effect:non-scaling-stroke}
.reply-hint>span{display:flex;flex-direction:column}
.reply-hint b{display:inline-flex;align-items:center;gap:8px;color:var(--text-strong)}
@media(prefers-reduced-motion:no-preference){.reply-hint{animation:pop .3s ease-out}}
/* narrow desktops: the note hangs below the chip, clear of the claim */
@media(min-width:901px) and (max-width:1100px){.reply-hint{top:calc(100% - 126px);bottom:auto;align-items:flex-end}.reply-hint svg{transform:scaleY(-1)}.reply-hint>span{margin-bottom:-14px}}
.composer-note{margin:0;padding:0 16px 8px;font-size:var(--t-micro);color:var(--muted)}
.composer{display:flex;gap:8px;padding:10px 12px 6px;border-top:1px solid var(--hairline)}
.composer input{flex:1;min-width:0;border:0;background:var(--field-soft);color:var(--text);border-radius:999px;padding:11px 16px;font-size:var(--t-body)}
.composer input::placeholder{color:var(--muted)}
.composer input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.composer button{width:42px;height:42px;flex:none;border:0;border-radius:50%;background:var(--bubble-out);display:grid;place-items:center;transition:opacity .15s}
.composer button:disabled,.composer button[aria-disabled="true"]{opacity:.4;cursor:default}
.composer button svg{width:20px;height:20px;fill:none;stroke:var(--on-bubble-out);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* the relay's view, on the line between the phones */
.relay-view{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 60px}
.relay-label{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:var(--t-small);line-height:1.3;font-weight:700;color:var(--muted)}
.relay-label svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* the route: one lane each way, tucked under both phones and the card; each message's packet rides its own lane */
.relay-line{--route:#1838ed;--route-idle:.45;position:absolute;left:-30px;right:-30px;top:164px;height:30px}
[data-theme="dark"] .relay-line{--route:#a9b8ff;--route-idle:.6}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .relay-line{--route:#a9b8ff;--route-idle:.6}}
.lane{position:absolute;left:0;right:0;height:12px}
.lane-out{top:0}
.lane-in{bottom:0}
.lane::before{content:'';position:absolute;inset:0;background:var(--route);opacity:var(--route-idle);transition:opacity .25s;-webkit-mask:var(--chevrons) 0 50%/18px 12px repeat-x;mask:var(--chevrons) 0 50%/18px 12px repeat-x;--chevrons:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Cpath d='M7 2l4 4-4 4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lane-in::before{transform:scaleX(-1)}
.lane.is-live::before{opacity:1}
.packet{position:absolute;left:0;top:50%;width:22px;height:14px;margin:-7px 0 0 -11px;border:1.5px solid var(--ink);border-radius:3px;background:var(--yellow);box-shadow:2px 2px 0 var(--hard-shadow)}
/* the card centres with its hard shadow, so both sides of the route show the same length */
@media(min-width:901px){.phone{position:relative;z-index:1}.env{translate:-4px 0}}
/* the card: a yellow paper object like the receipt and the address tag, the same in both themes. It is the
   relay's log of the conversation, both ways, newest first; its height is fixed and older rows fade out */
.env{--s:16px;--tilt:-1.5deg;--row:3.35em;--rows:3;--cols:8.2em 4em minmax(0,1fr);--rule:1.5px dashed rgb(21 32 74 / .38);position:relative;z-index:1;width:100%;max-width:460px;margin:6px 0 0;padding:1.3em 1.5em 1.05em;background:var(--yellow);color:var(--ink);font-size:var(--s);transform:rotate(var(--tilt));box-shadow:8px 10px 0 var(--hard-shadow)}
.env-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 1em;font-size:.8em;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.env-title-phone{display:none}
.env-count{letter-spacing:.02em;white-space:nowrap}
.log-cols{display:grid;grid-template-columns:var(--cols);column-gap:.8em;margin:0;padding:0 0 .5em;border-bottom:var(--rule)}
.log-cols span{font-size:.8em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tag-muted)}
.log{height:calc(var(--row) * var(--rows));margin:0;padding:0;list-style:none;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.log-wait{display:grid;place-items:center;height:100%;padding:0 1em;text-align:center;font-size:.95em;color:var(--tag-muted)}
.log-row{display:grid;grid-template-columns:var(--cols);column-gap:.8em;align-items:center;height:var(--row);border-bottom:1px dashed rgb(21 32 74 / .22)}
.log-to{min-width:0;line-height:1.25}
.log-to b{display:block;font:700 .92em var(--mono);white-space:nowrap}
.log-to small,.log-in small{display:block;margin-top:2px;white-space:nowrap;font-size:.72em;color:var(--tag-muted)}
.log-from{min-width:0;line-height:1.25;padding-bottom:calc(.9em + 2px)}
.log-from b{display:block;font-size:.92em;white-space:nowrap}
.log-in{min-width:0;line-height:1.25}
.log-in>span{display:block;overflow:hidden;white-space:nowrap;font:.78em/1.5 var(--mono);color:rgb(21 32 74 / .62);-webkit-mask-image:linear-gradient(90deg,#000 75%,transparent);mask-image:linear-gradient(90deg,#000 75%,transparent)}
/* To and Inside open in full (hover, focus or tap): a dotted underline says there is more */
.log{margin-inline:-6px;padding-inline:6px}
.log-row [data-full]{border-radius:2px;outline:0 solid transparent;transition:background-color .15s,box-shadow .15s}
.log-row [data-full]>[aria-hidden]{text-decoration:underline dotted 1.5px rgb(21 32 74 / .38);text-underline-offset:2px}
.log-row [data-full]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.log-row .is-peeked{background-color:rgb(21 32 74 / .07);box-shadow:0 0 0 4px rgb(21 32 74 / .07)}
.log-row .is-peeked>[aria-hidden]{text-decoration-style:solid;text-decoration-color:currentColor}
/* the expanded view: an ink slip laid on the card, anchored to its cell, never inside the clipped log */
.peek{position:absolute;z-index:3;left:0;top:0;max-width:calc(100% - 8px);padding:.6em .8em .75em;background:var(--ink);color:var(--yellow);border-radius:4px;box-shadow:3px 4px 0 rgb(21 32 74 / .28);font-size:.8em;line-height:1.4;opacity:0;visibility:hidden;transition:opacity .14s ease-out,visibility 0s .14s}
.peek.is-open{opacity:1;visibility:visible;transition:opacity .14s ease-out}
@media(prefers-reduced-motion:no-preference){
  .peek{translate:0 -4px;transition-property:opacity,translate,visibility}
  .peek.is-up{translate:0 4px}
  .peek.is-open{translate:none}
}
.peek::before{content:'';position:absolute;left:var(--caret,16px);top:-4px;width:9px;height:9px;margin-left:-4.5px;background:inherit;border-radius:1px;transform:rotate(45deg)}
.peek.is-up::before{top:auto;bottom:-4px}
.peek-head{display:flex;justify-content:space-between;gap:1.5em;margin:0 0 .35em;font-size:.8em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:rgb(237 255 156 / .68)}
.peek-val{margin:0;font-family:var(--mono)}
.peek-to .peek-val{width:calc(16ch + 1px);font-size:1.15em;font-weight:700;line-height:1.3;word-break:break-all}
.peek-in .peek-val{max-width:100%;line-height:1.35;color:rgb(237 255 156 / .86)}
.env-foot{margin:.3em 0 0;padding-top:.8em;border-top:var(--rule);font-size:.8em;line-height:1.45;color:var(--tag-muted);text-wrap:pretty}
@media(prefers-reduced-motion:no-preference){
  /* a new row drops in at the top and keeps a highlight for a moment */
  .log-row.is-new{animation:row-in .45s cubic-bezier(.2,.8,.3,1),row-mark 1.8s .2s ease-out backwards}
}
@keyframes row-in{from{margin-top:calc(var(--row) * -1);opacity:0}}
@keyframes row-mark{from{background:rgb(255 255 255 / .7)}to{background:rgb(255 255 255 / 0)}}
/* the claim, said once, under the evidence */
.claim{margin:28px 0 0;max-width:420px;text-align:center;font:400 clamp(26px,2.3vw,34px)/1.02 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.005em;color:var(--text-strong)}
.claim span{display:block;color:var(--muted)}

/* closing CTA: a callback to the hero, the only other headline at this scale */
.join{padding:var(--section-y) var(--pad-x)}
.join h2{font-size:clamp(64px,13vw,220px);line-height:.9;letter-spacing:-.025em;margin:0 0 clamp(32px,3.5vw,56px)}
.join-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.join-foot p{font-size:var(--t-lead);line-height:1.5;margin:0;max-width:30ch}
.join-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px}

@media(max-width:1279px){
  /* phones give up width before the route does; they keep their proportion */
  .playground{--side:clamp(232px,19.1vw + 60px,270px);--demo-chat-h:calc(var(--side) * 1.926)}
  .env{--s:clamp(13px,1.15vw,16px)}
  .app-lineup .device-platforms{min-height:2.9em}
}
/* hero below 1280: sub-line stacks over the actions */
@media(min-width:701px) and (max-width:1279px){
  .poster{--fold:400px}
  .poster-foot{flex-direction:column;align-items:flex-start;gap:24px}
}
@media(min-width:701px) and (max-width:1100px){
  .poster{--bar:72px}
  .manifesto{column-gap:5%}
  .tag-wrap{--s:12px}
}
/* portrait tablets: the hero ends where its content does */
@media(min-width:701px) and (orientation:portrait){
  .poster{min-height:0}
}
@media(max-width:1100px){
  .env{--cols:7.3em 3.4em minmax(0,1fr)}
  .log-enc{display:none}
  .devices-heading p{max-width:320px}
  .handheld-lineup .device-link{padding:16px 14px 14px;row-gap:12px}
  .handheld-lineup .device-name{font-size:16px}
  .handheld-lineup .device-platforms{font-size:var(--t-micro)}
}
@media(max-width:1000px){
  .join-foot{flex-direction:column;align-items:flex-start}
}
@media(max-width:900px){
  .devices-heading{display:block}
  .devices-heading p{margin-top:20px;max-width:520px}
  .find-list{grid-template-columns:minmax(0,1fr);gap:0}
  .find-list li{padding:16px 0;border-bottom:1px solid var(--line-band)}
  .find-list li:first-child{padding-top:0}

  /* phone design: heading, copy, your chat, and the card tucked under it */
  .playground{--demo-chat-h:304px}
  .play-grid{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
  .play-head{margin-bottom:24px}
  .br-narrow{display:inline}
  .phone-alice,.phone-label,.relay-label,.relay-line,.claim{display:none}
  /* the visitor is already holding a phone: no drawn handset, just the app */
  .phone .handset{padding:0;border-radius:0;background:none;box-shadow:none;transform:none}
  .handset::before,.handset::after,.status-bar,.home-bar{display:none}
  .chat{border-radius:var(--r-card);box-shadow:0 1px 0 #1838ed14,0 18px 40px -18px #15204a40}
  [data-theme="dark"] .chat{box-shadow:0 0 0 1px var(--line),0 18px 40px -18px var(--shadow-soft)}
  .chat-head{padding:12px 16px 12px 6px}
  .reply-hint{position:static;flex-direction:row-reverse;align-items:center;gap:6px}
  .reply-hint svg{width:30px;height:22px;margin:0;transform:scaleX(-1);translate:3px -6px}
  .reply-hint>span{align-items:flex-end}
  /* too narrow to sit beside the chip: the note takes its own line and points down at it */
  .reply-row{container-type:inline-size}
  @container (max-width:320px){.reply-hint{flex-basis:100%}.reply-hint svg{transform:scaleX(-1) rotate(-77deg);translate:0 5px}}
  .relay-view{padding:0;margin-top:-10px}
  .env{--s:13.5px;--tilt:-1deg;max-width:none;width:calc(100% - 8px);margin:0 8px 0 0}
  .env-head{margin-bottom:.8em}
  .env-title-desk{display:none}
  .env-title-phone{display:inline}
}

@media(max-width:700px){
  :root{--h2:clamp(36px,12.2vw,64px)}
  .block-button{min-width:240px;padding:16px 20px;font-size:17px}

  /* hero: equal-width SQUEAK / FREELY., then copy, CTAs and a ticket stub */
  .poster{--s:clamp(13px,3.6vw,15px);--pt:24px;display:block;min-height:0;padding-bottom:48px}
  .poster h1{--talk:min(calc((100vw - 2 * var(--gutter)) / 2.648),30svh,240px);margin:0 0 20px}
  .poster h1 .ln-1{font-size:var(--talk);line-height:.88}
  .poster h1 .ln-2{font-size:calc(var(--talk) * 1.032);line-height:.92}
  .poster-foot{max-width:none;flex-direction:column;align-items:stretch;gap:24px}
  .poster-sub{font-size:18px;max-width:24em}
  /* the file details sit right under the button they describe */
  .poster-cta{display:flex;flex-direction:column;align-items:flex-start}
  .poster-actions{display:contents}
  .poster-actions .block-button{width:100%;max-width:420px;min-width:0}
  .poster-also{order:1;margin-top:12px}
  .poster-cta .band-link{order:2;margin-top:6px}

  /* ticket stub: the same receipt cut down to one line of items, perforated on both ends */
  .permission-slip{--s:13px;position:relative;top:auto;right:auto;width:auto;max-width:400px;margin:44px 6px 0 auto;padding:14px 24px 13px;transform:rotate(-2.5deg);box-shadow:.35em .5em 0 var(--band-deep);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:10px 8px}
  .permission-slip::before,.permission-slip::after{content:'';position:absolute;top:0;bottom:0;left:auto;right:auto;width:8px;height:auto;background:radial-gradient(circle at 50% 50%,var(--band) 3px,transparent 3.5px) 0 2px/8px 11px repeat-y}
  .permission-slip::before{left:5px}
  .permission-slip::after{right:5px}
  .slip-heading,.barcode,.slip-foot,.slip-long{display:none}
  .slip-title{grid-column:span 2;margin:0;font-size:1.4em;line-height:1.1}
  .slip-answer{grid-column:span 2;justify-self:end;margin:0;font-size:1.45em;transform:rotate(-4deg);padding:.04em .3em}
  /* items become one row of four cells, label over value */
  .permission-slip dl{display:contents;font-size:1em}
  .permission-slip dl div,.slip-total{display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin:0;padding-top:9px;border-top:1px dashed currentColor;font-size:.92em;line-height:1.25}
  .permission-slip dt,.slip-total>span:first-child{display:block;flex:none;font-weight:400;opacity:.75}
  .permission-slip dt::after,.slip-total>span:first-child::after{display:none}
  .permission-slip dd,.slip-total>span:last-child{font-weight:700}

  .devices{padding-bottom:44px}
  .devices-heading{margin-bottom:28px}
  .devices-heading p{max-width:none}
  .app-lineup{grid-template-columns:minmax(0,1fr)}
  .app-lineup .device-link{grid-template-columns:80px minmax(0,1fr);column-gap:16px;padding:16px 16px 16px 12px}
  .app-lineup .device-art{height:76px}
  .app-lineup .device-name{font-size:18px}
  .app-lineup .device-platforms{min-height:0;font-size:var(--t-small);margin:2px 0 8px}
  .handheld-lineup{grid-template-columns:minmax(0,1fr);gap:0;background:var(--surface);border:1px solid var(--line);box-shadow:4px 4px 0 var(--lane)}
  .handheld-lineup .device-item+.device-item{border-top:1px solid var(--line)}
  .handheld-lineup .device-link{border:0;box-shadow:none;grid-template-columns:80px minmax(0,1fr);grid-template-rows:none;align-items:center;column-gap:16px;row-gap:0;min-height:68px;padding:12px 16px 12px 12px}
  .handheld-lineup .device-link:hover{transform:none;box-shadow:none;background:var(--tint)}
  .handheld-lineup .device-link:focus-visible{outline-offset:-3px}
  .handheld-lineup .device-art{height:44px}
  .handheld-lineup .device-name{font-size:17px}
  .handheld-lineup .device-platforms{font-size:var(--t-micro);margin:2px 0 6px}

  .mesh-lead{font-size:var(--t-lead)}
  .mesh-lead b{display:inline;white-space:nowrap}
  .mesh-row{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:16px 0 18px}
  .mesh-word{font-size:clamp(40px,12.2vw,64px)}
  .mesh-note{font-size:var(--t-body)}
  .mesh-note b{font-size:20px;margin-bottom:2px}
  .mesh-end{padding-top:22px}
  .playground{padding-top:40px;padding-bottom:48px}

  .manifesto{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .manifesto-copy p{max-width:none}
  .tag-wrap{--s:13px;--tilt:-4deg}
  .find{margin-top:12px}

  .bubble,.composer input{font-size:17px}
}
@media(max-width:560px){
  .join h2 span{display:block}
  .join h2{font-size:24vw;line-height:.92}
  .join-actions{flex-direction:column-reverse;align-items:stretch;width:100%;gap:12px}
  .join-actions .block-button{width:100%;max-width:420px;min-width:0}
  .join-actions .band-link{align-self:flex-start}
}
@media(max-width:400px){
  .tag-wrap{--s:12px}
}
@media(max-width:379px){
  .env{--s:12.5px;padding-inline:1.1em}
}
}