/* The iPhone app pages: /download, /meshchat, /meshchat/privacy, /meshchat/support.
   Loaded after tokens, tape, site and shell. Every length is a multiple of --u. */

/* ---------- Hero: copy beside one captioned illustration ---------- */
.app-hero{padding:var(--s-16) 0 var(--s-20)}
.app-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-12) var(--s-16);align-items:center}
.app-hero .page-head__title{margin-bottom:var(--s-6);font-size:clamp(2.75rem,1.6rem + 4.2vw,4.75rem)}
.app-hero .page-head__lede{max-width:30em}
.app-hero .plate{aspect-ratio:4/5}
.app-hero .plate.plate--sq{aspect-ratio:1/1}
.app-hero__fig{min-width:0}
.app-icon{display:block;width:var(--s-20);height:var(--s-20);margin:0 0 var(--s-6);border-radius:18px;box-shadow:var(--lift-2)}
.app-back{margin:0 0 var(--s-4)}
.app-back.link-quiet{flex-direction:row-reverse;justify-content:flex-end}
.app-back.link-quiet::after{scale:-1 1}
.app-back.link-quiet:hover::after{translate:-3px 0}
.app-status{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin:0 0 var(--s-4);padding:0;list-style:none}
.app-status li{line-height:1}
.app-status .tape{display:inline-block;padding-block:var(--s-1);line-height:calc(var(--u) * 6)}
.app-dated{margin:var(--s-4) 0 0;font:600 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}
.app-hero .actions{margin-top:var(--s-8)}
@media (max-width:959px){
  .app-hero{padding:var(--s-10) 0 var(--s-12)}
  .app-hero__grid{grid-template-columns:1fr}
  .app-hero .plate{aspect-ratio:6/5}
  .app-hero .plate.plate--sq{aspect-ratio:1/1}
}
@media (max-width:599px){.app-hero .plate{aspect-ratio:1/1}}

/* ---------- Waitlist ticket: card stock with a perforation before the closed door ---------- */
.ticket{padding:var(--s-8);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-2)}
.ticket p{margin:0}
.ticket__lead{font:400 var(--t-xl)/1.15 var(--font-display);color:var(--ink);text-wrap:balance}
.ticket .actions{margin-top:var(--s-6)}
.ticket__closed{display:grid;gap:var(--s-3);justify-items:start;margin-top:var(--s-8);padding-top:var(--s-6);border-top:2px dotted var(--rule-strong)}
.ticket__closed .tape--button{max-inline-size:100%}
.ticket__closed .fine{max-width:34em}

/* ---------- Windows and Linux downloads: one ticket, one block per platform ---------- */
.dl__item + .dl__item{margin-top:var(--s-8);padding-top:var(--s-6);border-top:2px dotted var(--rule-strong)}
.dl__name{margin:0 0 var(--s-4);font:400 var(--t-xl)/1.15 var(--font-display);color:var(--ink)}
.dl__row{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.dl .fine{margin-top:var(--s-3)}
.dl__facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1) var(--s-4);margin:var(--s-4) 0 0;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui)}
.dl__facts[hidden]{display:none}
.dl__facts dt{font-weight:600;color:var(--ink)}
.dl__facts dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.dl__facts dd.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--t-2xs)}
.dl__code{overflow-x:auto;margin:var(--s-3) 0;padding:var(--s-4);background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--t-xs);line-height:var(--lh-ui)}
@media (max-width:599px){.ticket{padding:var(--s-6) var(--s-5)}}

/* ---------- Flow: phone, gateway, apps, with the yes on the last hop ---------- */
.flow{display:grid;grid-template-columns:minmax(0,1fr) var(--s-16) minmax(0,1fr) minmax(var(--s-32),13rem) minmax(0,1fr);align-items:center;margin:var(--s-10) 0 var(--s-6);padding:0}
.flow__node{display:grid;gap:var(--s-1);padding:var(--s-6);background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift-2)}
.flow__node b{font:400 var(--t-xl)/1.1 var(--font-display);color:var(--ink)}
.flow__node span{font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.flow__hop{position:relative;display:grid;place-items:center;align-self:stretch;min-height:var(--s-16)}
.flow__hop::before{content:"";position:absolute;left:0;right:var(--s-2);top:50%;height:2px;margin-top:-1px;background:var(--ink)}
.flow__hop::after{content:"";position:absolute;right:0;top:50%;width:10px;height:12px;margin-top:-6px;background:var(--ink);clip-path:polygon(0 0,100% 50%,0 100%)}
.flow__hop .tape{position:relative;z-index:1;display:inline-block;max-inline-size:100%;line-height:1;padding-block:var(--s-2)}
@media (max-width:959px){
  .flow{grid-template-columns:1fr;justify-items:stretch}
  .flow__hop{min-height:var(--s-16)}
  .flow__hop::before{left:var(--s-8);right:auto;top:0;bottom:var(--s-2);width:2px;height:auto;margin:0}
  .flow__hop::after{left:calc(var(--s-8) - 5px);right:auto;top:auto;bottom:0;width:12px;height:10px;margin:0;clip-path:polygon(0 0,100% 0,50% 100%)}
  .flow__hop .tape{justify-self:start;margin-left:calc(var(--s-8) + var(--s-6))}
}
.flow-note{max-width:var(--measure);color:var(--ink-2)}

/* ---------- Plain rule list: facts separated by hairlines ---------- */
.rules{max-width:var(--wrap-narrow);margin:0 0 var(--s-8);padding:0;list-style:none;border-top:2px solid var(--ink)}
.rules li{padding:var(--s-4) 0;border-bottom:1px solid var(--rule);font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-2)}
.rules b{font-weight:600;color:var(--ink)}

/* ---------- Feature list: a serif name against one sentence ---------- */
.feats{max-width:var(--wrap-narrow);margin:0;border-top:2px solid var(--ink)}
.feats > div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s-2) var(--s-8);align-items:baseline;padding:var(--s-5) 0;border-bottom:1px solid var(--rule)}
.feats dt{margin:0;font:400 var(--t-xl)/1.15 var(--font-display);color:var(--ink);text-wrap:balance}
.feats dd{margin:0;color:var(--ink-2)}
@media (max-width:719px){.feats > div{grid-template-columns:1fr}}
.app-note{margin:var(--s-6) 0 0;max-width:var(--measure)}

/* ---------- Tour clips ---------- */
.tour{display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:flex-start;margin:0;padding:0}
.tour figure{flex:1 1 12rem;max-width:17.5rem;margin:0}
.tour video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:var(--wall-deep);box-shadow:var(--lift-2);border-radius:var(--r-card)}
.tour figcaption{display:grid;gap:var(--s-2);justify-items:start;margin-top:var(--s-3);font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.tour figcaption .tape{display:inline-block;line-height:1;padding-block:var(--s-2)}
.tour__split{align-items:center}
@media (max-width:599px){.tour figure{flex-basis:calc(50% - var(--s-4))}.tour{gap:var(--s-4)}}

/* ---------- Setup steps: the site-wide .steps, given room ---------- */
.setup .steps{max-width:var(--wrap-narrow);margin-top:0}
.setup .steps b{display:block;font:400 var(--t-xl)/1.15 var(--font-display);color:var(--ink)}
.setup .steps p{margin:var(--s-1) 0 0;color:var(--ink-2)}
.setup .steps code,.app-note code,.doc__body code{padding:0 .25em;background:var(--wall-deep);border-radius:var(--r-card)}

/* ---------- Offers beside the app: the site shelf, with no lead offer ---------- */
.more .offer{gap:var(--s-3)}
.more .offer .price{margin-top:var(--s-1)}

/* ---------- Where this stands ---------- */
.stand{max-width:var(--wrap-narrow)}
.stand .close__title{font-size:var(--t-3xl)}

/* ---------- App policy pages (privacy, support) ---------- */
.app-tabs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-6);padding:0;list-style:none}
.app-tabs a{display:inline-flex;align-items:center;min-height:var(--tap-min);text-decoration:none}
.app-tabs a .tape{--tape-surface:var(--tape-white);--tape-letter:var(--tape-black)}
.app-tabs a[aria-current] .tape{--tape-surface:var(--tape-black);--tape-letter:var(--tape-white)}
.app-sub{margin:0 0 var(--s-4);font:600 var(--t-md)/var(--lh-ui-lg) var(--font-ui);color:var(--ink-2)}
.policy-head .page-head__title{font-size:var(--t-3xl)}
.policy-dates{display:grid;gap:var(--s-1);margin:0;padding:0;list-style:none;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}
.policy-dates li{margin:0}
.policy-dates + .actions{margin-top:var(--s-6)}
.doc__body .lead-list{padding-left:0;list-style:none}
.doc__body .lead-list li{padding:var(--s-3) 0;border-top:1px solid var(--rule)}
.doc__body .lead-list li:last-child{border-bottom:1px solid var(--rule)}
.doc__body .lead-list b{font-weight:600;color:var(--ink)}
.doc__body .callout > h2{margin:0 0 var(--s-3)}
.doc__body .callout--first{margin-top:0}
.contact-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);margin:var(--s-6) 0 0}
.contact-line p{margin:0;font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.doc__body .fine{margin:var(--s-4) 0 0}
.doc__body a{text-underline-offset:.24em}
.doc__body .tape--button{text-decoration:none}

.app-tabnav{margin-top:var(--s-6)}
.app-status--after{margin-top:var(--s-6)}

/* Rail and page tabs are navigation: keep their tape compact so the column reads as a list. */
.doc__rail .tape,.app-tabs .tape{padding-block:var(--s-1);line-height:calc(var(--u) * 6)}
.doc__rail{gap:var(--s-1)}
.policy-head .actions{margin-top:var(--s-6)}
.policy-head .app-status + .app-dated{margin-top:var(--s-3)}