/* /download (templates/download.html), after the owner's chosen round9/download-b2-phone-area.png and
   round9/download-on-a-phone.png (2026-10-19). It sits on home.css, so the bar, the buttons, the grid
   lines and the light are the home page's own; sizes are in --u, one pixel of the 1344-wide mockup. */

@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-400.woff2?v=db71f8a28ad85015") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-500.woff2?v=5ef914e59b0047a2") format("woff2"); font-weight: 500 600; font-display: swap; }

.dl main { position: relative; }
.dl section { position: relative; }

/* ------------------------------------------------------------------ the button for this computer */
.dl-hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(150 * var(--u)); padding-bottom: calc(54 * var(--u)); }
.dl-hero__icon { width: calc(88 * var(--u)); height: calc(88 * var(--u)); border-radius: calc(22 * var(--u)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 calc(20 * var(--u)) calc(50 * var(--u)) calc(-10 * var(--u)) rgba(250, 76, 51, 0.55); }
.dl-hero__also { margin-top: calc(14 * var(--u)); font: 400 calc(12 * var(--u))/1.4 var(--mono); color: var(--muted); }
.dl-hero__also a { color: #E6E7EA; text-underline-offset: 3px; }
.dl-hero h1 { margin-top: calc(28 * var(--u)); font: 600 calc(52 * var(--u))/1 var(--sans); letter-spacing: -0.035em; color: #F3F3F3; }
.dl-hero__lead { margin-top: calc(16 * var(--u)); max-width: calc(560 * var(--u)); font: 450 calc(17.5 * var(--u))/calc(26 * var(--u)) var(--sans); color: #C4C7CC; }
.dl-hero__go { margin-top: calc(30 * var(--u)); width: calc(250 * var(--u)); padding: 0; }
.dl-hero__meta { margin-top: calc(14 * var(--u)); font: 400 calc(12 * var(--u))/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dl main a:not(.button):not(.dl-mini) { color: #E7E9EC; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.dl main a:not(.button):not(.dl-mini):hover { text-decoration-color: currentColor; }

.dl-kicker { font: 400 calc(12 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dl-kicker b { font-weight: 400; color: var(--tally-hi); }

/* ------------------------------------------------------------------ every installer */
/* The pane wears the viewfinder's corners (.brackets), so it stands clear of the edge between the sections, where
   the grid's crosses are: 56 of the hero's room under its words is here, over the pane (the owner, 2026-10-24). */
.dl-computer { padding-top: calc(56 * var(--u)); padding-bottom: calc(110 * var(--u)); }
.dl-pane { position: relative; margin: 0 calc(58 * var(--u)); padding: calc(30 * var(--u)) calc(34 * var(--u)) calc(28 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.dl-pane::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--scan); opacity: 0.5; pointer-events: none; }
/* Where the page's light can draw it, the pane's dark is drawn there (data-veil, mesh.js), as the film's
   frame is, so the specks a hover holds round the Download button and the help link are drawn over the
   pane and not lost behind it. The pane keeps its sheen and lines and drops its own dark and blur, which
   would dim and smear them again. */
.has-veils .dl-pane { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.dl-pane h2 { margin: calc(12 * var(--u)) 0 calc(18 * var(--u)); font: 600 calc(28 * var(--u))/1 var(--sans); letter-spacing: -0.025em; color: #fff; }
.dl-pane__cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(56 * var(--u)); }
.dl-row { display: grid; grid-template-columns: calc(34 * var(--u)) 1fr auto; gap: calc(14 * var(--u)); align-items: center; min-height: calc(72 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.08); scroll-margin-top: 120px; }
.dl-row svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); fill: none; stroke: #C6C9CE; stroke-width: 1.4; stroke-linejoin: round; }
.dl-row b { display: block; font: 500 calc(16 * var(--u))/1.2 var(--sans); color: #fff; }
.dl-row span { font: 400 calc(12 * var(--u))/1.6 var(--mono); color: var(--muted); }
.dl-mini { display: inline-flex; align-items: center; height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(10 * var(--u)); font: 500 calc(14 * var(--u))/1 var(--sans); color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14); transition: background-color 200ms var(--ease); }
.dl-mini:hover { background: rgba(255, 255, 255, 0.11); }
.dl-mini--tally { border-color: transparent; background: rgba(255, 64, 34, 0.75); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 8px 22px -10px rgba(250, 76, 51, 0.9); }
.dl-mini--tally:hover { background: rgba(255, 72, 42, 0.95); }
.dl-tag { justify-self: end; height: calc(26 * var(--u)); padding: 0 calc(11 * var(--u)); display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.03);
  font: 400 calc(11 * var(--u))/1 var(--mono) !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.dl-note { margin-top: calc(14 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.6; color: var(--muted); }
/* No rule before the steps on a wide window: one beside the grid's line read as two lines (the owner, 2026-10-24). */
.dl-then { padding-left: calc(40 * var(--u)); }
.dl-then li { display: flex; gap: calc(12 * var(--u)); align-items: baseline; margin: calc(14 * var(--u)) 0; font-size: calc(15 * var(--u)); color: #C6C9CE; }
.dl-then b { font: 400 calc(12 * var(--u))/1 var(--mono); color: var(--tally-hi); }
.dl-then__head { font: 400 calc(12 * var(--u))/1 var(--mono) !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted) !important; }
.dl-then__help { color: var(--muted) !important; }

/* ------------------------------------------------------------------ the phone */
.dl-phone { padding: calc(40 * var(--u)) 0 calc(140 * var(--u)); }
.dl-phone__in { display: grid; grid-template-columns: calc(614 * var(--u)) 1fr; align-items: center; }
/* The words hang from the top at the place centring put them, with the tallest step open (step 1 on an
   iPhone), rather than being centred: a step opening or closing changes the column's height, and centred,
   the heading moved with it (the owner, 2026-10-24). */
.dl-phone__words { max-width: calc(560 * var(--u)); align-self: start; margin-top: calc(63 * var(--u)); }
.dl-phone h2 { margin: calc(16 * var(--u)) 0 calc(14 * var(--u)); font: 600 calc(38 * var(--u))/calc(44 * var(--u)) var(--sans); letter-spacing: -0.03em; color: #fff; }
.dl-phone__lead { font-size: calc(16.5 * var(--u)); line-height: calc(26 * var(--u)); color: #B9BCC2; }
/* A button on the phone named by its symbol (Chrome's ⋮, Safari's ⋯) is drawn as a small key, so it reads as
   something to press rather than stray punctuation (the owner, 2026-10-24). */
.dl-key { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.35em; padding: 0 0.3em; margin: 0 0.1em; vertical-align: -0.2em;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 0.3em; background: rgba(255, 255, 255, 0.06); font-size: 0.9em; line-height: 1; font-weight: 600; color: #F1F2F4; }
.dl-tabs { margin-top: calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.dl-tab { position: relative; display: grid; grid-template-columns: calc(30 * var(--u)) 1fr; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  border: 1px solid transparent; background: none; text-align: left; color: #8E9298; font: inherit; cursor: pointer; overflow: hidden; transition: background-color 240ms var(--ease), border-color 240ms var(--ease), color 240ms var(--ease); }
.dl-tab:hover { color: #C6C9CE; }
.dl-tab b { font: 400 calc(12 * var(--u))/calc(22 * var(--u)) var(--mono); color: inherit; }
.dl-tab strong { display: block; font: 500 calc(16 * var(--u))/calc(22 * var(--u)) var(--sans); color: inherit; }
.dl-tab small > * { min-height: 0; overflow: hidden; }
.dl-tab small { display: grid; grid-template-rows: 0fr; overflow: hidden; font-size: calc(14 * var(--u)); color: #8E9298; transition: grid-template-rows 320ms var(--ease-out), margin 320ms var(--ease-out); }
.dl-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.09); }
.dl-tab[aria-selected="true"] b { color: var(--tally-hi); }
.dl-tab[aria-selected="true"] small { grid-template-rows: 1fr; margin-top: calc(4 * var(--u)); }
/* The line under the step on show fills while it is shown, then the next step takes over (download.js). */
.dl-tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--tally-hi); box-shadow: 0 0 10px var(--tally); }
.dl-tab.is-running::after { animation: dl-fill var(--step-ms, 5000ms) linear forwards; }
@keyframes dl-fill { to { transform: scaleX(1); } }
html[data-motion="still"] .dl-tab::after { display: none; }
/* iPhone or Android: whatever is drawn or written for the other one is not there at all. */
[data-steps][data-os="ios"] [data-only="android"], [data-steps][data-os="android"] [data-only="ios"] { display: none !important; }
.dl-device-col { display: flex; flex-direction: column; align-items: center; gap: calc(26 * var(--u)); }
.dl-os { display: inline-flex; padding: calc(4 * var(--u)); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.dl-os button { height: calc(34 * var(--u)); padding: 0 calc(16 * var(--u)); border: 0; border-radius: 999px; background: none; color: #8E9298; font: 500 calc(13.5 * var(--u))/1 var(--sans); cursor: pointer;
  transition: background-color 240ms var(--ease), color 240ms var(--ease); }
.dl-os button:hover { color: #E7E9EC; }
.dl-os button[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16); }
.dl-qr { margin-top: calc(22 * var(--u)); display: flex; gap: calc(20 * var(--u)); align-items: center; padding: calc(16 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(10, 10, 12, 0.55); }
.dl-qr img { flex: none; width: calc(112 * var(--u)); height: calc(112 * var(--u)); }
.dl-qr b { display: block; font: 500 calc(16 * var(--u))/1.3 var(--sans); color: #fff; margin-bottom: calc(6 * var(--u)); }
.dl-qr span { font: 400 calc(12.5 * var(--u))/1.5 var(--mono); color: var(--muted); }
.dl-phone__go { margin-top: 22px; width: 100%; }

/* The phone, drawn: the setup page connect.tethery.app shows, one step at a time. */
.dl-device { justify-self: center; width: calc(300 * var(--u)); height: calc(630 * var(--u)); border-radius: calc(48 * var(--u)); padding: calc(11 * var(--u));
  background: linear-gradient(145deg, #3a3d44, #121317 45%, #2a2c31); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 90px -30px rgba(0, 0, 0, 0.95), 0 0 120px -30px rgba(250, 76, 51, 0.35); }
.dl-device__screen { position: relative; width: 100%; height: 100%; border-radius: calc(38 * var(--u)); overflow: hidden; color: #E6E9ED;
  font: 400 calc(14 * var(--u))/1.45 "IBM Plex Sans", var(--sans);
  background: radial-gradient(90% 50% at 85% 8%, rgba(250, 76, 51, 0.22), transparent 70%), radial-gradient(70% 40% at 0% 100%, rgba(179, 35, 84, 0.18), transparent 70%), #050608; }
.dl-device__island { position: absolute; z-index: 2; top: calc(10 * var(--u)); left: 50%; width: calc(92 * var(--u)); height: calc(27 * var(--u)); margin-left: calc(-46 * var(--u)); border-radius: calc(20 * var(--u)); background: #000; }
.dl-device__hole { position: absolute; z-index: 2; top: calc(14 * var(--u)); left: 50%; width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(-6 * var(--u)); border-radius: 50%; background: #000; box-shadow: 0 0 0 2px #111; }
.dl-device__chrome { position: absolute; z-index: 1; left: 0; right: 0; top: calc(40 * var(--u)); height: calc(48 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(12 * var(--u)); background: #1f2023; }
.dl-device__chrome span { flex: 1; height: calc(34 * var(--u)); border-radius: calc(17 * var(--u)); background: #303134; padding-left: calc(14 * var(--u)); font: 400 calc(12.5 * var(--u))/calc(34 * var(--u)) Roboto, var(--sans); color: #E8EAED; }
.dl-device__chrome b { color: #E8EAED; font-size: calc(18 * var(--u)); }
[data-os="android"] .dl-device__screen { border-radius: calc(32 * var(--u)); }
[data-os="android"] .dl-setup { padding-top: calc(108 * var(--u)); }
[data-os="android"] .dl-setup__step { top: calc(172 * var(--u)); bottom: calc(26 * var(--u)); }
.dl-device__status { position: absolute; top: calc(16 * var(--u)); left: calc(30 * var(--u)); font: 600 calc(14 * var(--u))/1 -apple-system, var(--sans); color: #fff; }
.dl-device__url { position: absolute; left: 0; right: 0; bottom: 0; height: calc(70 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) 0; background: rgba(28, 29, 33, 0.94); border-top: 1px solid rgba(255, 255, 255, 0.06);
  font: 500 calc(13 * var(--u))/calc(38 * var(--u)) -apple-system, var(--sans); text-align: center; color: #E8E8EA; }
.dl-device__url::before { content: ""; position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: calc(10 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255, 255, 255, 0.1); z-index: -1; }
.dl-device__url { isolation: isolate; }
.dl-setup { position: absolute; inset: 0; padding: calc(62 * var(--u)) calc(22 * var(--u)) calc(86 * var(--u)); display: flex; flex-direction: column; }
.dl-setup__logo { height: calc(22 * var(--u)); width: auto; align-self: flex-start; }
.dl-setup__bars { display: flex; gap: calc(6 * var(--u)); margin: calc(22 * var(--u)) 0 calc(14 * var(--u)); }
.dl-setup__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); transition: background-color 300ms var(--ease); }
[data-step="0"] .dl-setup__bars i:nth-child(-n+1), [data-step="1"] .dl-setup__bars i:nth-child(-n+2), [data-step="2"] .dl-setup__bars i { background: var(--tally-hi); box-shadow: 0 0 8px rgba(250, 76, 51, 0.6); }
.dl-setup__step { position: absolute; left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(126 * var(--u)); bottom: calc(86 * var(--u)); display: flex; flex-direction: column;
  opacity: 0; transform: translateX(calc(24 * var(--u))); transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out); pointer-events: none; }
.dl-setup__step.is-on { opacity: 1; transform: none; }
html[data-motion="still"] .dl-setup__step { transition: none; }
.dl-setup__k { font: 400 calc(11 * var(--u))/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #8A93A0; }
.dl-setup__h { margin-top: calc(8 * var(--u)); font: 500 calc(21 * var(--u))/1.2 "IBM Plex Sans", var(--sans); letter-spacing: -0.01em; color: #fff; }
.dl-setup__p { margin-top: calc(8 * var(--u)); color: #A8AFBA; font-size: calc(13.5 * var(--u)); }
.dl-art { position: relative; flex: 1; margin-top: calc(16 * var(--u)); border-radius: calc(18 * var(--u)); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, #15171c, #0c0d10); }
.dl-art__page { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(14 * var(--u)); height: calc(70 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(255, 255, 255, 0.05); }
.dl-art__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u)); background: rgba(28, 29, 33, 0.96); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.dl-art__url { display: block; height: calc(34 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255, 255, 255, 0.1); font: 500 calc(12 * var(--u))/calc(34 * var(--u)) -apple-system, var(--sans); text-align: center; color: #E8E8EA; }
.dl-art__tools { display: flex; justify-content: space-between; align-items: center; padding: calc(16 * var(--u)) calc(8 * var(--u)) 0; color: #4C9DFF; }
.dl-art__tools svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dl-art__tools .is-dim { opacity: 0.4; }
.dl-ring { position: relative; display: inline-flex; }
.dl-ring::after { content: ""; position: absolute; inset: calc(-9 * var(--u)); border-radius: 50%; border: 2px solid var(--tally-hi); box-shadow: 0 0 0 4px rgba(250, 76, 51, 0.2), 0 0 18px rgba(250, 76, 51, 0.7); }
.dl-art__chrome { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); background: #1f2023; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.dl-art__chrome .dl-art__url { flex: 1; border-radius: calc(17 * var(--u)); background: #303134; font-family: Roboto, var(--sans); text-align: left; padding-left: calc(12 * var(--u)); color: #E8EAED; }
.dl-ring--dots { width: calc(22 * var(--u)); height: calc(22 * var(--u)); align-items: center; justify-content: center; font: 700 calc(18 * var(--u))/1 var(--sans); color: #E8EAED; }
.dl-art__page--low { top: calc(76 * var(--u)); }
.dl-menu { position: absolute; right: calc(10 * var(--u)); top: calc(10 * var(--u)); width: 76%; padding: calc(6 * var(--u)) 0; border-radius: calc(12 * var(--u)); background: #2d2e31; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
.dl-menu div { padding: 0 calc(14 * var(--u)); font: 400 calc(13 * var(--u))/calc(36 * var(--u)) Roboto, var(--sans); color: #E8EAED; }
.dl-menu .is-hit { margin: 0 calc(6 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: #43302d; box-shadow: 0 0 0 2px var(--tally-hi), 0 0 18px rgba(250, 76, 51, 0.6); }
.dl-sheet { position: absolute; left: calc(10 * var(--u)); right: calc(10 * var(--u)); bottom: calc(-8 * var(--u)); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0; background: #2a2b30; padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(18 * var(--u)); box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.6); }
.dl-sheet__apps { display: flex; gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.dl-sheet__apps i { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(10 * var(--u)); background: #44464d; }
.dl-sheet__row { height: calc(38 * var(--u)); margin-top: calc(6 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #36373c; font: 400 calc(13 * var(--u))/calc(38 * var(--u)) -apple-system, var(--sans); color: #EDEDEF; }
.dl-sheet__row.is-hit { background: #43302d; box-shadow: 0 0 0 2px var(--tally-hi), 0 0 18px rgba(250, 76, 51, 0.6); }
.dl-add { position: absolute; inset: 0; padding: calc(16 * var(--u)) calc(14 * var(--u)); background: #1c1d21; font: 400 calc(13 * var(--u))/1.3 -apple-system, var(--sans); color: #EDEDEF; }
.dl-add__bar { display: flex; justify-content: space-between; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; color: #4C9DFF; }
.dl-add__bar b { color: #fff; }
.dl-add__go { position: relative; }
.dl-add__go::after { content: ""; position: absolute; inset: calc(-6 * var(--u)) calc(-9 * var(--u)); border-radius: calc(9 * var(--u)); border: 2px solid var(--tally-hi); box-shadow: 0 0 0 4px rgba(250, 76, 51, 0.2), 0 0 18px rgba(250, 76, 51, 0.7); }
.dl-add__card { display: flex; gap: calc(12 * var(--u)); align-items: center; margin-top: calc(18 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: #2a2b30; }
.dl-add__card img { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(11 * var(--u)); }
.dl-add__card b { display: block; color: #fff; font-weight: 600; }
.dl-add__card span { color: #8a8a8f; font-size: calc(12 * var(--u)); }
.dl-add__toggle { display: flex; justify-content: space-between; align-items: center; margin-top: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #43302d;
  box-shadow: 0 0 0 2px var(--tally-hi), 0 0 18px rgba(250, 76, 51, 0.6); }
.dl-add__toggle i { position: relative; flex: none; width: calc(42 * var(--u)); height: calc(25 * var(--u)); border-radius: calc(13 * var(--u)); background: #34C759; }
.dl-add__toggle i::after { content: ""; position: absolute; right: calc(2 * var(--u)); top: calc(2 * var(--u)); width: calc(21 * var(--u)); height: calc(21 * var(--u)); border-radius: 50%; background: #fff; }
.dl-home { position: absolute; inset: 0; padding: calc(18 * var(--u)) calc(14 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(14 * var(--u)) calc(8 * var(--u)); align-content: start; justify-items: center;
  background: radial-gradient(80% 60% at 20% 10%, #3b2a4a, transparent 70%), radial-gradient(80% 70% at 90% 90%, #3a1e18, transparent 70%), #121218; }
.dl-home i { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(11 * var(--u)); background: rgba(255, 255, 255, 0.16); }
.dl-home span { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); font: 400 calc(9 * var(--u))/1 -apple-system, var(--sans); color: #fff; }
.dl-home--round i, .dl-home--round img { border-radius: 50% !important; }
.dl-home img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(11 * var(--u)); box-shadow: 0 0 0 2px var(--tally-hi), 0 0 22px rgba(250, 76, 51, 0.8); }

/* ------------------------------------------------------------------ the email, on a phone */
.dl-send .plans { display: block; padding: 0; margin: 0; width: auto; max-width: none; }
.dl-send .plans-demo { margin: 0; }

/* ------------------------------------------------------------------ a phone or a narrow window */
@media (max-width: 899px) {
  .dl-hero__in { padding-top: 120px; padding-bottom: 40px; }
  .dl-hero__icon { width: 64px; height: 64px; border-radius: 16px; }
  .dl-hero h1 { margin-top: 20px; font-size: clamp(32px, 9vw, 42px); }
  .dl-hero__lead { font-size: 16px; line-height: 1.55; }
  .dl-hero__go { width: 100%; max-width: 360px; height: 52px; }
  .dl-hero__meta { font-size: 11px; line-height: 1.6; }
  .dl-send { padding-bottom: 48px; }
  .dl-computer { padding-top: 0; padding-bottom: 56px; }
  .dl-pane { margin: 0; padding: 22px 18px; }
  .dl-pane__cols { grid-template-columns: 1fr; gap: 18px; }
  .dl-row { grid-template-columns: 28px 1fr; row-gap: 6px; padding: 14px 0; }
  .dl-row svg { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
  .dl-row .dl-tag, .dl-row .dl-mini { grid-column: 2; justify-self: start; }
  .dl-then { padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 6px; }
  .dl-phone { padding: 24px 0 32px; }
  .dl-phone h2 { font-size: 30px; line-height: 1.12; }
  .dl-phone__lead { font-size: 16px; line-height: 1.55; }
  .dl-qr img { width: 96px; height: 96px; }

  /* The steps on a phone (the owner, 2026-10-24, after round9/download-on-a-phone.png): the list beside a
     drawn phone stacked into a column taller than the screen, so the steps and their picture were never in
     view together. Here the switch, the steps as a row of numbered segments, one square card with the step
     and its picture, and the button fit one screen. The card is the drawn phone's own screen without the
     phone round it; a sideways swipe on it changes the step (download.js). The two columns let their
     pieces into one column, in this order. */
  .dl-phone__in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .dl-phone__words, .dl-device-col { display: contents; }
  .dl-kicker { order: 1; } .dl-phone h2 { order: 2; } .dl-phone__lead { order: 3; }
  .dl-os { order: 4; align-self: flex-start; margin-top: 24px; }
  .dl-tabs { order: 5; flex-direction: row; gap: 8px; margin-top: 18px; }
  .dl-device { order: 6; margin-top: 14px; }
  .dl-phone__go, .dl-qr { order: 7; }
  .dl-phone__go { margin-top: 16px; height: 52px; }
  .dl-qr { margin-top: 16px; }

  /* The steps: a number over a line each, the line filling while its step plays and full once one is
     picked. Their words stay in the button for a screen reader; the card says them on screen. */
  .dl-tab, .dl-tab[aria-selected="true"] { flex: 1; display: block; padding: 0 0 9px; border: 0; border-bottom: 2px solid rgba(255, 255, 255, 0.14); background: none; overflow: visible; }
  .dl-tab b { font-size: 12px; line-height: 1; }
  .dl-tab strong, .dl-tab small { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dl-tab::after { bottom: -2px; }
  .dl-tab[aria-selected="true"]:not(.is-running)::after { transform: scaleX(1); }
  html[data-motion="still"] .dl-tab::after { display: block; }

  /* The card: the phone's screen as a square pane like the installers' (.dl-pane), its fill, its edge and
     its diagonal lines, with its step's words over its picture. */
  .dl-device { position: relative; box-sizing: border-box; width: 100%; height: 400px; padding: 0; border-radius: 0; border: 1px solid rgba(255, 255, 255, 0.09); touch-action: pan-y;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(10, 10, 12, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
  .dl-device::before { content: ""; position: absolute; inset: 0; background-image: var(--scan); opacity: 0.5; pointer-events: none; }
  .dl-device__screen, [data-os="android"] .dl-device__screen { border-radius: 0; background: none; }
  .dl-device__island, .dl-device__hole, .dl-device__status, .dl-device__chrome, .dl-device__url, .dl-setup__logo, .dl-setup__bars { display: none; }
  .dl-setup, [data-os="android"] .dl-setup { padding: 0; }
  .dl-setup__step, [data-os="android"] .dl-setup__step { top: 18px; right: 18px; bottom: 18px; left: 18px; }
}

/* The address asked for before the installer (public/js/gate.js; plan 14, section 6, 2026-10-24): the
   hero has an email field in place of a button, and a platform's button opens a small dialog. */
[data-gate] [hidden], .gate-overlay [hidden] { display: none !important; }
.gate-field { display: block; box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); color: var(--ink); font: 400 15px/1 var(--sans); outline: none; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.gate-field::placeholder { color: #7D838D; }
.gate-field:focus { border-color: rgba(255, 255, 255, 0.36); background: rgba(255, 255, 255, 0.06); }
.gate-form.is-bad .gate-field { border-color: rgba(255, 84, 66, 0.75); }
.gate-err { margin-top: 8px; font: 450 13px/18px var(--sans); color: var(--tally-hi); }
.gate-news { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font: 450 13px/18px var(--sans); color: #C4C7CC; cursor: pointer; text-align: left; }
.gate-news input { flex: none; margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--tally); }
.gate-fine { margin-top: 14px; font: 400 12px/18px var(--sans); color: var(--muted); }
.gate-fine a, .gate-again a, .gate-again button { padding: 0; border: 0; background: none; font: inherit; color: #C4C7CC; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 2px; }
.gate-again a:hover, .gate-again button:hover { color: var(--ink); }
.gate-again { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 13px/18px var(--sans); color: var(--muted); }
.gate-tick { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(63, 203, 122, 0.12); box-shadow: inset 0 0 0 1px rgba(63, 203, 122, 0.35); }
.gate-tick svg { width: 22px; height: 22px; fill: none; stroke: #3FCB7A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: gate-draw 320ms 80ms var(--ease-out) forwards; }
@keyframes gate-draw { to { stroke-dashoffset: 0; } }
.gate-done { transition: opacity 180ms ease-out, transform 180ms var(--ease-out); }
.gate-done.is-enter { opacity: 0; transform: translateY(4px); }
/* Focus moves to the result so a screen reader reads it; it is not something to press. */
.gate-h:focus, .gate-row:focus { outline: none; }

/* The hero */
.gate-inline { width: min(440px, 100%); margin-top: calc(30 * var(--u)); }
.gate-pill { display: flex; align-items: stretch; height: calc(48.5 * var(--u)); border-radius: calc(12 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 14, 18, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 14px 40px -16px rgba(0, 0, 0, 0.9);
  transition: border-color 150ms ease-out; }
.gate-pill:focus-within { border-color: rgba(255, 255, 255, 0.34); }
.gate-inline .is-bad .gate-pill { border-color: rgba(255, 84, 66, 0.75); }
.gate-pill .gate-field { flex: 1; min-width: 0; height: auto; padding: 0 18px; border: 0; border-radius: 0; background: transparent; }
.gate-send { flex: none; height: auto; margin: 5px; padding: 0 18px; border-radius: 9px; gap: 8px; font-size: 15px; }
.gate-send svg { width: 15px; height: 15px; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gate-under { margin-top: 12px; text-align: center; }
.gate-under .gate-news { justify-content: center; margin: 0 0 8px; }
.gate-under .gate-fine { margin: 0; }
.gate-inline .gate-done { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gate-row { display: inline-flex; align-items: center; gap: 12px; height: calc(48.5 * var(--u)); padding: 0 20px 0 7px; border-radius: calc(12 * var(--u));
  border: 1px solid rgba(63, 203, 122, 0.3); background: rgba(12, 14, 18, 0.72); font: 500 15px/1 var(--sans); color: var(--ink); }
.gate-row .gate-tick { width: 34px; height: 34px; }
.gate-row .gate-tick svg { width: 17px; height: 17px; }
.gate-inline .gate-again { justify-content: center; }

/* A platform's dialog */
.gate-lock { overflow: hidden; }
.gate-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(5, 6, 8, 0.62); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
  opacity: 0; transition: opacity 200ms ease-out; }
.gate-overlay.is-in { opacity: 1; }
.gate-overlay.is-out { opacity: 0; transition-duration: 150ms; }
.gate-card { position: relative; box-sizing: border-box; width: 100%; max-width: 420px; padding: 30px 28px 26px; color: var(--ink); font-family: var(--sans);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%), #0C0E12; border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateY(8px) scale(0.97); transform-origin: 50% 60%; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.is-in .gate-card { opacity: 1; transform: none; }
.is-out .gate-card { opacity: 0; transform: scale(0.98); transition-duration: 150ms; transition-timing-function: ease-out; }
.gate-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; }
.gate-close:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.gate-close:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.4); outline-offset: 0; }
.gate-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.gate-kicker { font: 400 11px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tally); }
.gate-kicker span { color: var(--muted); }
.gate-h { margin-top: 10px; font: 600 26px/1.12 var(--sans); letter-spacing: -0.032em; color: #F3F3F3; }
.gate-done .gate-h { margin-top: 18px; }
.gate-p { margin-top: 10px; font: 450 15px/23px var(--sans); color: #C4C7CC; }
.gate-p b { color: var(--ink); font-weight: 500; }
.gate-card .gate-form { margin-top: 22px; }
.gate-go { width: 100%; margin-top: 12px; }
.gate-card .gate-again { margin-top: 18px; }

@media (max-width: 899px) {
  .gate-overlay { place-items: end center; padding: 12px; }
  .gate-card { padding: 26px 20px 22px; }
  .gate-h { font-size: 24px; }
  .gate-send { padding: 0 14px; }
}
/* The page's motion switch (motion.js), which follows the reader's setting unless they chose. */
html[data-motion="still"] .gate-overlay, html[data-motion="still"] .gate-card, html[data-motion="still"] .gate-done { transition: none; }
html[data-motion="still"] .gate-tick svg { animation: none; stroke-dashoffset: 0; }