/* The stylesheet of the site of Afargram, task P29. Plain CSS, no script:
   the design of the decision of 2026-10-25. The fonts are the subsets that
   Google Fonts serves, kept here under the SIL Open Font License, so that
   a page loads nothing from elsewhere. */

@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/commissioner-cyrillic.woff2?v=ad254e46b7) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/commissioner-latin.woff2?v=737ec8f280) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/sourcesans3-cyrillic.woff2?v=44aa5fb37c) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/sourcesans3-latin.woff2?v=587435ca9d) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/sourcesans3-italic-cyrillic.woff2?v=32af9304df) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/sourcesans3-italic-latin.woff2?v=b9b0f6feec) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The colours: the palette "cold monochrome and sky", the owner's choice
   of 2026-10-26: a slightly bluish graphite, white buttons, and sky blue for
   the links and the signal of the mark. The page is dark whatever the
   system of the visitor, the owner's decision of the same day, and turns
   light only when the visitor chose light with the switch in the header,
   which the service writes into data-theme. The light theme is "paper",
   the owner's choice of the same day: the header and the hero turn paper
   too, with graphite buttons and dark blue links. */
:root {
  --bg: #171b21; --fg: #e9edf2; --muted: #a6aeb9; --line: #323843; --surface: #222730;
  --accent: #8fcfff; --accent-ink: #171b21;
  --btn: #eef2f7; --btn-ink: #171b21;
  --night: #20252d; --night-fg: #e9edf2; --night-muted: #b5bcc6; --night-line: #3a414c; --night-accent: #8fcfff; --night-accent-ink: #171b21;
  --night-btn: #eef2f7; --night-btn-ink: #171b21; --night-tint: rgba(143, 207, 255, .08); --night-edge: transparent;
  --sat: #b5bcc6; --sat-light: #a6aeb9; --bubble: #1d2a40; --theirs: #16233a; --mine: #2f4a2f;
  --danger: #c9443a; --danger-bg: rgba(201, 68, 58, .16); --danger-ink: #ffffff;
  --display: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f7f7f4; --fg: #171b21; --muted: #555b63; --line: #e2e2dc; --surface: #ffffff;
  --accent: #1d5aa0; --accent-ink: #ffffff; --sat-light: #7b8088;
  --btn: #171b21; --btn-ink: #ffffff;
  --night: #f7f7f4; --night-fg: #171b21; --night-muted: #555b63; --night-line: #e2e2dc; --night-accent: #1d5aa0; --night-accent-ink: #ffffff;
  --night-btn: #171b21; --night-btn-ink: #ffffff; --night-tint: rgba(29, 90, 160, .06); --night-edge: #e2e2dc; --sat: #7b8088;
  --danger: #b3261e; --danger-bg: #fbeceb;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.55 var(--body); }
.wrap { max-width: 48rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 1.55rem; line-height: 1.2; font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
main a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .15em; }
.eyebrow { font-family: var(--display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.hero .eyebrow, .band .eyebrow { color: var(--night-accent); }

/* The header: the mark first and the switch of the language last on the
   same line at every width; the menu between them, or under them when the
   screen is narrow. */
header.top { background: var(--night); color: var(--night-fg); border-bottom: 1px solid var(--night-edge); }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; padding-block: .8rem; }
.brand { order: 1; position: relative; display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-decoration: none; color: var(--night-fg); }
/* The mark of the header is two pictures side by side, the satellite with
   its signal and the plane, so that the plane can fly on its own. */
.brand .logo { display: inline-flex; flex: none; }
.brand .sig { width: calc(3.1rem * 19.5 / 44); height: auto; overflow: visible; }
.brand .fly { width: calc(3.1rem * 24.5 / 44); height: auto; overflow: visible; view-transition-name: afargram-plane; }
.mark .pl { fill: currentColor; }
.mark .pl2 { fill: currentColor; opacity: .7; }
.mark .pl3 { fill: currentColor; opacity: .32; }
.mark .sat { fill: var(--sat); }
.mark .link { fill: none; stroke: var(--sat); stroke-width: 1.2; }
.mark .acf { fill: var(--night-accent); }
nav.menu { order: 2; margin-left: auto; display: flex; flex-wrap: wrap; gap: .1rem .95rem; font-size: .95rem; }
nav.menu a { color: var(--night-muted); text-decoration: none; padding-block: .2rem; }
nav.menu a[aria-current] { color: var(--night-fg); border-bottom: 2px solid var(--night-accent); }
nav.menu a:hover, nav.menu a:focus-visible { color: var(--night-fg); }
.tools { order: 3; display: inline-flex; align-items: center; gap: .55rem; }
.seg { display: inline-flex; border: 1px solid var(--night-line); border-radius: 999px; overflow: hidden; font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .06em; }
.seg a { color: var(--night-muted); text-decoration: none; padding: .28rem .7rem; }
.seg a:hover, .seg a:focus-visible { color: var(--night-fg); }
.seg a[aria-current] { background: var(--night-accent); color: var(--night-accent-ink); }
@media (max-width: 760px) {
  nav.menu { order: 3; flex: 1 1 100%; margin-left: 0; }
  .tools { order: 2; margin-left: auto; }
}
/* On a phone the menu is one row, task P46: the offer and the privacy
   policy leave it for the links of the footer, which every page has. */
@media (max-width: 520px) {
  nav.menu { flex-wrap: nowrap; justify-content: space-between; gap: .1rem .6rem; }
  nav.menu .m-offer, nav.menu .m-privacy { display: none; }
}
/* The link past the menu, the first a keyboard reaches, hidden until it
   has the focus. */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .6rem 1rem; border-radius: .5rem; background: var(--btn); color: var(--btn-ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: .6rem; }
/* The switch shows the theme that is on, the moon on the dark default and
   the sun on the light theme, and pressing it turns the other one on; the
   service puts in the page only the switch of its theme. */
.mode { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--night-line); border-radius: 50%; color: var(--night-muted); }
.mode:hover, .mode:focus-visible { color: var(--night-fg); border-color: var(--night-muted); }
.mode svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The hero of the home page. The rings of the signal spread from behind
   the phone and fade out before they reach the text. */
.hero { background: var(--night); color: var(--night-fg); position: relative; overflow: hidden; border-bottom: 1px solid var(--night-edge); }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; padding-block: 3rem 3.4rem; }
.hero .lede { font-size: 1.15rem; color: var(--night-muted); max-width: 32rem; margin-top: 1.1rem; }
.hero .lede + .lede { margin-top: .7rem; }
.hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.6rem; }
.button { display: inline-block; padding: .75rem 1.3rem; border-radius: .5rem; background: var(--btn); color: var(--btn-ink); text-decoration: none; font-weight: 600; font-family: var(--display); }
.hero .button { background: var(--night-btn); color: var(--night-btn-ink); }
.button:hover { filter: brightness(1.08); }
.hero .soon { color: var(--night-muted); font-size: .95rem; }
.hero .beam { position: relative; min-width: 0; }
.arc { color: var(--night-accent); position: absolute; left: 50%; top: 50%; width: 44rem; height: 44rem; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; -webkit-mask-image: linear-gradient(to right, transparent 9.5rem, #000 12.5rem); mask-image: linear-gradient(to right, transparent 9.5rem, #000 12.5rem); }
.arc circle { transform-box: view-box; transform-origin: 50% 50%; opacity: .35; }
.arc circle:nth-child(1) { transform: scale(.35); }
.arc circle:nth-child(2) { transform: scale(.57); }
.arc circle:nth-child(3) { transform: scale(.78); }

/* The screen of WhatsApp in the hero: a phone's width at most; it shrinks
   with the screen and never grows. Under the lede, the note that Light
   Data is for Android alone. */
.hero .hero-shot { justify-self: end; }
.hero .hero-shot figcaption { color: var(--night-muted); text-align: center; }
.hero .launch { max-width: 32rem; margin: 0 0 1.2rem; padding: .65rem .9rem; border: 1px solid var(--night-accent); border-radius: .6rem; background: var(--night-tint); color: var(--night-fg); font-size: .97rem; }
.hero .launch b { color: var(--night-accent); font-family: var(--display); }
.hero .hero-note { max-width: 32rem; margin-top: 1rem; padding: .6rem .85rem; border-left: 3px solid var(--night-accent); border-radius: .45rem; background: var(--night-tint); color: var(--night-fg); font-size: .97rem; }

/* The band with the title of an inner page. */
.band { background: var(--night); color: var(--night-fg); border-bottom: 1px solid var(--night-edge); }
.band .wrap { display: grid; gap: .6rem; padding-block: 2.2rem 2.5rem; }
.band h1 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); }
.band .lede { color: var(--night-muted); font-size: 1.1rem; max-width: 36rem; }
.band .edition { color: var(--night-muted); font-size: .95rem; }
/* The sections of the instructions, a row of links under the title. */
.jump { display: flex; flex-wrap: wrap; gap: .45rem .5rem; margin-top: .5rem; font-size: .95rem; }
.jump a { padding: .25rem .75rem; border: 1px solid var(--night-line); border-radius: 999px; color: var(--night-fg); text-decoration: none; }
.jump a:hover, .jump a:focus-visible { border-color: var(--night-accent); color: var(--night-accent); }

main .wrap { padding-block: 2.6rem 2.4rem; display: grid; gap: 2.6rem; }
main > .wrap > section { display: grid; gap: .9rem; }
section > .eyebrow + h2 { margin-top: -.5rem; }
.doc section:not(.band) { max-width: 44rem; }
.doc section > h3 { margin-top: .6rem; }
.doc ul, .doc ol:not(.steps) { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.doc code { font: .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface); border: 1px solid var(--line); border-radius: .3rem; padding: .05rem .4rem; white-space: nowrap; }
.note { color: var(--muted); font-size: .95rem; }
.req { background: var(--surface); border: 1px solid var(--line); border-radius: .7rem; padding: 1rem 1.1rem; color: var(--muted); font-size: .95rem; max-width: 32rem; line-height: 1.6; }
.req strong { color: var(--fg); font-weight: 600; }

.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--display); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
tr:last-child td { border-bottom: 0; }
.cmds td:first-child { white-space: nowrap; }
.doc code em { font-style: italic; color: var(--muted); }
@media (max-width: 560px) {
  .cmds, .cmds tbody, .cmds tr, .cmds td { display: block; }
  .cmds tr { padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .cmds tr:last-child { border-bottom: 0; }
  .cmds td { border: 0; padding: .15rem 0; }
  .cmds td:first-child { white-space: normal; }
}

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; }
.feature { display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; align-items: start; }
.feature svg { width: 1.7rem; height: 1.7rem; color: var(--accent); margin-top: .15rem; }
.feature h3 { margin-bottom: .2rem; }
.feature p { color: var(--muted); font-size: .98rem; }
.quiet { color: var(--muted); border-left: 3px solid var(--accent); padding-left: 1rem; }
.needs .feature { grid-template-columns: 2.6rem 1fr; }
.needs .satico { width: 2.5rem; height: auto; margin-top: -.1rem; }
.satico .sat { fill: var(--sat-light); }
.satico .link { fill: none; stroke: var(--sat-light); stroke-width: 1.2; }
.satico .acf { fill: var(--accent); }

.steps { counter-reset: step; display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.steps > li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; }
.steps > li::before { counter-increment: step; content: counter(step); font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--accent); border-right: 2px solid var(--line); padding-right: .6rem; margin-top: .1rem; }
.warn { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: .7rem; padding: 1rem 1.1rem; }
.warn strong { font-family: var(--display); }

.price { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1.6rem 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; align-items: center; }
.price .big { font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.price .big small { font-size: 1.1rem; font-weight: 600; color: var(--muted); }
.price ul { margin: 0; padding-left: 1.1rem; color: var(--muted); display: grid; gap: .3rem; }
/* The months of the home page, one card a messenger, and what holds for both under them. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.plan { display: grid; gap: .55rem; align-content: start; padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.plan .plan-name { color: var(--accent); font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.plan .big { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .big small { color: var(--muted); font-size: 1.05rem; font-weight: 600; }
.plan p:last-child { color: var(--muted); }
.plan-terms { display: grid; gap: .3rem; margin: 1rem 0 0; padding-left: 1.1rem; color: var(--muted); }

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
footer .wrap { padding-block: 1.6rem 2.4rem; display: grid; gap: .6rem; }
footer a { color: var(--accent); }
footer .links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
/* The marks of the cards the acquiring takes, which its agreement asks
   the site to show (2.2.16): monobank's files, Visa white on the dark
   theme and blue on the light one. */
footer .cards { display: flex; align-items: center; gap: 1rem; margin-top: .2rem; }
footer .cards svg { height: 1.25rem; width: auto; }
footer .cards .visa { height: .95rem; fill: #ffffff; }
:root[data-theme="light"] footer .cards .visa { fill: #1434cb; }
.sign { position: relative; width: fit-content; display: flex; align-items: center; gap: .9rem; font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--fg); margin-bottom: .4rem; }
.sign svg { width: 4.4rem; height: auto; overflow: visible; }
/* A press on a mark, of the header or of the footer, sends its plane off
   and back, and the page stays: two hidden radios take turns, so that every press starts the
   flight anew, without a script. The flight comes last among the
   animations, so that it wins over the hovering while it lasts. */
.toss { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lb { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.lb-b, #toss-a:checked ~ .lb-a, #fly-a:checked ~ .lb-a { display: none; }
#toss-a:checked ~ .lb-b, #fly-a:checked ~ .lb-b { display: block; }
.sign .mark .sat { fill: var(--sat-light); }
.sign .mark .link { stroke: var(--sat-light); }
.sign .mark .acf { fill: var(--accent); }
.sign .mark .pl, .sign .mark .pl2, .sign .mark .pl3 { fill: var(--fg); }

/* The connection page: the steps of the sign-in in one card under the
   header, with the fields and buttons of the site. Its markup is the one the
   tests read, so the styles follow the markup and not the other way. */
.connect main .wrap { display: block; max-width: 36rem; padding-block: 1.6rem 2.6rem; }
.connect .card { display: grid; gap: .9rem; padding: 1.3rem 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.connect h1 { font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1.15; }
.connect .card p, .connect form { margin: 0; }
.connect ol { display: grid; gap: .45rem; margin: 0; padding-left: 1.3rem; }
.connect .number { font-weight: 600; white-space: nowrap; }
.connect .warning { padding: .75rem .9rem; border-left: 3px solid var(--accent); border-radius: .55rem; background: var(--bg); }
.connect .notice { padding: .75rem .9rem; border-left: 3px solid var(--danger); border-radius: .55rem; background: var(--danger-bg); }
.connect small { display: block; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.connect label { display: block; margin-bottom: .35rem; font-weight: 600; }
.connect input[type=text], .connect input[type=password] { display: block; width: 100%; margin-bottom: .8rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); color: var(--fg); font: 600 1.2rem/1.2 var(--body); letter-spacing: .08em; }
.connect input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.connect button { display: block; width: 100%; padding: .85rem 1.1rem; border: 0; border-radius: .6rem; background: var(--btn); color: var(--btn-ink); font: 600 1.02rem/1.2 var(--display); cursor: pointer; }
.connect button:hover { filter: brightness(1.08); }
.connect button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.connect button.plain { width: auto; padding: .25rem 0; background: none; color: var(--accent); font: 400 1rem/1.4 var(--body); text-decoration: underline; text-underline-offset: .15em; }
.connect button.end { background: var(--danger); color: var(--danger-ink, #ffffff); }
.connect .code { margin: .2rem 0 .1rem; font: 800 clamp(2.4rem, 11vw, 3rem)/1 var(--display); letter-spacing: .1em; text-align: center; font-variant-numeric: tabular-nums; }
.connect .links { margin: 1.3rem 0 0; color: var(--muted); font-size: .92rem; text-align: center; }

/* The examples beside the steps of the instructions: the screens of
   WhatsApp, of the connection page in a browser, of Telegram and of
   Android, drawn in HTML and CSS after the real ones, in the theme of the
   viewer. A ring marks what to press. Every mock, the one of the hero
   too, is a whole screen of a phone, 9:19.5, 18.5rem wide, the owner's
   choice of 2026-10-26; the sizes inside it are in var(--u), a 19.5th of
   its width, so its text keeps the proportions of a phone at any width.
   A chat keeps its messages at the bottom, a page and a panel start at
   the top. */
.steps > li > div { display: grid; gap: .2rem; min-width: 0; }
.ex { display: flex; flex-wrap: wrap; gap: 1.1rem 1.2rem; margin: .8rem 0 .3rem; }
.shot { container-type: inline-size; margin: 0; width: 100%; max-width: 18.5rem; display: grid; gap: .5rem; align-content: start; }
.shot figcaption { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.scr { --u: calc(100cqw / 19.5); --tap: #8fcfff; position: relative; overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 9 / 19.5; min-height: 0; border-radius: calc(1.15 * var(--u)); border: 5px solid #05080d; background: #15181d; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); font: 400 calc(.78 * var(--u))/1.38 Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: #111b21; text-align: left; }
.scr > * { flex: none; }
.scr svg { width: calc(1.1 * var(--u)); height: calc(1.1 * var(--u)); flex: none; fill: currentColor; }
.scr .sb { display: flex; justify-content: space-between; align-items: center; padding: calc(.28 * var(--u)) calc(.8 * var(--u)) calc(.22 * var(--u)); font-size: calc(.66 * var(--u)); font-weight: 500; }
.scr .sb span { display: flex; align-items: center; gap: calc(.25 * var(--u)); }
.scr .sb svg { width: calc(.75 * var(--u)); height: calc(.75 * var(--u)); }
.scr .tap { box-shadow: 0 0 0 2px var(--tap), 0 0 0 6px rgba(143, 207, 255, .3); }

/* WhatsApp */
.wa { --wa-bar: #1f2c34; --wa-fg: #e9edef; --wa-icon: #aebac1; --wa-wall: #0b141a; --wa-dot: rgba(233, 237, 239, .045); --wa-in: #202c33; --wa-out: #005c4b; --wa-time: #8696a0; --wa-link: #53bdeb; --wa-tick: #53bdeb; --wa-chip: #182229; --wa-chipfg: #8696a0; --wa-input: #2a3942; --wa-green: #00a884; --wa-line: #2f3b43; --wa-quote: rgba(0, 0, 0, .22); --wa-qname: #06cf9c; --wa-dim: rgba(0, 0, 0, .6); }
.wa .sb, .wa .bar { background: var(--wa-bar); color: var(--wa-fg); }
.wa .bar { display: flex; align-items: center; gap: calc(.45 * var(--u)); padding: calc(.3 * var(--u)) calc(.6 * var(--u)) calc(.5 * var(--u)) calc(.35 * var(--u)); border-bottom: 1px solid var(--wa-line); }
.wa .bar > svg { color: var(--wa-icon); }
.wa .bar > svg:first-child { color: var(--wa-fg); }
.wa .ava { width: calc(1.85 * var(--u)); height: calc(1.85 * var(--u)); border-radius: 50%; background: #20252d; display: grid; place-items: center; flex: none; overflow: hidden; }
.wa .ava svg { width: calc(1.5 * var(--u)); height: calc(1.1 * var(--u)); }
.wa .name { flex: 1; font-size: calc(.9 * var(--u)); font-weight: 500; }
.wa .feed { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(.3 * var(--u)); padding: calc(.55 * var(--u)) calc(.55 * var(--u)) calc(.65 * var(--u)); color: var(--wa-fg); background-color: var(--wa-wall); background-image: radial-gradient(var(--wa-dot) 1px, transparent 1.4px); background-size: 13px 13px; }
.wa .day { align-self: center; margin-bottom: calc(.15 * var(--u)); padding: calc(.18 * var(--u)) calc(.55 * var(--u)); border-radius: calc(.45 * var(--u)); background: var(--wa-chip); color: var(--wa-chipfg); font-size: calc(.66 * var(--u)); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa .b { position: relative; align-self: flex-start; max-width: 86%; padding: calc(.3 * var(--u)) calc(.5 * var(--u)) calc(.32 * var(--u)) calc(.55 * var(--u)); border-radius: calc(.5 * var(--u)); background: var(--wa-in); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere; }
.wa .b.out { align-self: flex-end; background: var(--wa-out); }
.wa .b.tl { border-top-left-radius: 0; }
.wa .b.tl::before { content: ""; position: absolute; top: 0; left: -.4rem; width: calc(.42 * var(--u)); height: calc(.65 * var(--u)); background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa .b.tr { border-top-right-radius: 0; }
.wa .b.tr::before { content: ""; position: absolute; top: 0; right: -.4rem; width: calc(.42 * var(--u)); height: calc(.65 * var(--u)); background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa .t { float: right; display: inline-flex; align-items: center; gap: calc(.15 * var(--u)); margin: calc(.32 * var(--u)) 0 -.22rem calc(.55 * var(--u)); color: var(--wa-time); font-size: calc(.6 * var(--u)); line-height: 1; }
.wa .t svg { width: calc(.9 * var(--u)); height: calc(.6 * var(--u)); fill: none; stroke: var(--wa-tick); stroke-width: 1.5; }
.wa .ln { color: var(--wa-link); text-decoration: underline; }
.wa .q { display: block; margin: 0 0 calc(.28 * var(--u)); padding: calc(.22 * var(--u)) calc(.45 * var(--u)); border-left: 3px solid var(--wa-qname); border-radius: calc(.3 * var(--u)); background: var(--wa-quote); font-size: calc(.7 * var(--u)); }
.wa .q b { display: block; color: var(--wa-qname); font-weight: 500; }
.wa .q i { display: block; color: var(--wa-time); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa .g { align-self: flex-start; max-width: 86%; display: grid; gap: 2px; }
.wa .g .b { max-width: none; }
.wa .k { display: flex; justify-content: center; align-items: center; gap: calc(.3 * var(--u)); padding: calc(.42 * var(--u)) calc(.5 * var(--u)); border-radius: calc(.5 * var(--u)); background: var(--wa-in); color: var(--wa-link); font-weight: 500; text-align: center; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa .k svg { width: calc(.85 * var(--u)); height: calc(.85 * var(--u)); }
.scr .k.tap { box-shadow: 0 0 0 2px var(--tap), 0 0 0 6px rgba(143, 207, 255, .3); }
.wa .lb { clear: both; display: flex; justify-content: center; align-items: center; gap: calc(.3 * var(--u)); margin: calc(.45 * var(--u)) -.5rem -.32rem -.55rem; padding: calc(.45 * var(--u)); border-top: 1px solid var(--wa-line); border-radius: 0 0 calc(.5 * var(--u)) calc(.5 * var(--u)); color: var(--wa-link); font-weight: 500; }
.wa .lb svg { width: calc(.85 * var(--u)); height: calc(.85 * var(--u)); }
.wa .inp { display: flex; align-items: center; gap: calc(.35 * var(--u)); padding: 0 calc(.45 * var(--u)) calc(.5 * var(--u)); background: var(--wa-wall); }
.wa .fld { flex: 1; display: flex; align-items: center; gap: calc(.4 * var(--u)); padding: calc(.42 * var(--u)) calc(.6 * var(--u)); border-radius: calc(1.2 * var(--u)); background: var(--wa-input); color: var(--wa-time); font-size: calc(.78 * var(--u)); }
.wa .fld span { flex: 1; }
.wa .fld svg { color: var(--wa-icon); width: calc(1 * var(--u)); height: calc(1 * var(--u)); }
.wa .mic { display: grid; place-items: center; width: calc(2 * var(--u)); height: calc(2 * var(--u)); border-radius: 50%; background: var(--wa-green); color: #fff; flex: none; }
.wa .mic svg { width: calc(1 * var(--u)); height: calc(1 * var(--u)); }
.wa .dimmed { flex: 1 1 0; background: linear-gradient(var(--wa-dim), var(--wa-dim)), radial-gradient(var(--wa-dot) 1px, transparent 1.4px) 0 0 / 13px 13px, var(--wa-wall); }
.wa .sheet { position: relative; padding-bottom: calc(3.6 * var(--u)); border-radius: calc(.9 * var(--u)) calc(.9 * var(--u)) 0 0; background: var(--wa-in); color: var(--wa-fg); }
.wa .sheet .hd { display: flex; align-items: center; gap: calc(.7 * var(--u)); padding: calc(.7 * var(--u)) calc(.8 * var(--u)) calc(.6 * var(--u)); border-bottom: 1px solid var(--wa-line); font-size: calc(.88 * var(--u)); font-weight: 500; }
.wa .sheet .hd svg { color: var(--wa-icon); width: calc(1 * var(--u)); height: calc(1 * var(--u)); }
.wa .row { display: flex; align-items: center; justify-content: space-between; gap: calc(.5 * var(--u)); padding: calc(.55 * var(--u)) calc(.9 * var(--u)); border-bottom: 1px solid var(--wa-line); }
.wa .row i { width: calc(1 * var(--u)); height: calc(1 * var(--u)); border-radius: 50%; border: 2px solid var(--wa-icon); flex: none; }
.wa .row.tap { box-shadow: inset 0 0 0 2px var(--tap); }
.wa .row.on i { border-color: var(--wa-green); background: radial-gradient(circle, var(--wa-green) 0 40%, transparent 46%); }
.wa .fab { position: absolute; right: calc(.8 * var(--u)); bottom: calc(.7 * var(--u)); display: grid; place-items: center; width: calc(2.3 * var(--u)); height: calc(2.3 * var(--u)); border-radius: 50%; background: var(--wa-green); color: #fff; }
.wa .fab svg { width: calc(1.05 * var(--u)); height: calc(1.05 * var(--u)); }


:root[data-theme="light"] .wa { --wa-bar: #ffffff; --wa-fg: #111b21; --wa-icon: #54656f; --wa-wall: #efeae2; --wa-dot: rgba(17, 27, 33, .055); --wa-in: #ffffff; --wa-out: #d9fdd3; --wa-time: #667781; --wa-link: #027eb5; --wa-tick: #53bdeb; --wa-chip: #ffffff; --wa-chipfg: #54656f; --wa-input: #ffffff; --wa-green: #00a884; --wa-line: #e9edef; --wa-quote: rgba(11, 20, 26, .055); --wa-qname: #06a17d; --wa-dim: rgba(11, 20, 26, .45); }

@media (max-width: 720px) {
  .steps .ex { margin-left: -3.6rem; justify-content: center; }
  .hero .wrap { grid-template-columns: 1fr; padding-block: 2.2rem 2.6rem; }
  .hero .hero-shot { justify-self: center; }
  .features { grid-template-columns: 1fr; }
  .price { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .arc { display: none; }
}

/* The marks live, the owner's choice of 2026-10-26: the satellite sways,
   the signal pulses and the plane hovers; when a page gives way to another,
   from the mark, the menu or a switch, the plane flies off and the next
   page brings it back, through the view transitions of the browser. All
   of it only unless the viewer asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .brand .satg, .sign .satg { transform-box: fill-box; transform-origin: center; animation: mark-sway 5s ease-in-out infinite; }
  .brand .acf, .sign .acf { animation: mark-blink 2.5s ease-in-out infinite; }
  .brand .a2, .sign .a2 { animation-delay: .3s; }
  .brand .plane, .sign .plane { transform-box: fill-box; transform-origin: center; animation: mark-hover 4s ease-in-out infinite; }
  #fly-a:checked ~ .logo .fly { animation: mark-trip-a 1.8s ease-in-out; }
  #fly-b:checked ~ .logo .fly { animation: mark-trip-b 1.8s ease-in-out; }
  #toss-a:checked ~ svg .plane { animation: mark-hover 4s ease-in-out 1.8s infinite, mark-trip-a 1.8s ease-in-out; }
  #toss-b:checked ~ svg .plane { animation: mark-hover 4s ease-in-out 1.8s infinite, mark-trip-b 1.8s ease-in-out; }
  @keyframes mark-trip-a { 0% { transform: none; opacity: 1; } 40% { transform: translate(2.6rem, -1.6rem); opacity: 0; } 41% { transform: translate(-1.6rem, 1rem); opacity: 0; } 100% { transform: none; opacity: 1; } }
  @keyframes mark-trip-b { 0% { transform: none; opacity: 1; } 40% { transform: translate(2.6rem, -1.6rem); opacity: 0; } 41% { transform: translate(-1.6rem, 1rem); opacity: 0; } 100% { transform: none; opacity: 1; } }
  ::view-transition-old(afargram-plane) { animation: mark-away .45s ease-in both; }
  ::view-transition-new(afargram-plane) { animation: mark-back .55s ease-out .2s both; }
  @keyframes mark-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
  @keyframes mark-blink { 0%, 60%, 100% { opacity: .25; } 15%, 30% { opacity: 1; } }
  @keyframes mark-hover { 0%, 100% { transform: none; } 50% { transform: translateY(-1.2px) rotate(-2deg); } }
  @keyframes mark-away { to { transform: translate(2.6rem, -1.6rem); opacity: 0; } }
  @keyframes mark-back { from { transform: translate(-1.6rem, 1rem); opacity: 0; } }
}

/* The rings of the signal run outwards and the messages of the chat arrive
   one after another, unless the viewer asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .arc circle { opacity: 0; animation: pulse 9s linear infinite; }
  .arc circle:nth-child(2) { animation-delay: -2.25s; }
  .arc circle:nth-child(3) { animation-delay: -4.5s; }
  .arc circle:nth-child(4) { animation-delay: -6.75s; }
  @keyframes pulse { 0% { transform: scale(.2); opacity: 0; } 35% { opacity: .55; } 100% { transform: scale(1.2); opacity: 0; } }
  .hero-shot .feed > * { animation: arrive .5s ease-out both; }
  .hero-shot .feed > :nth-child(2) { animation-delay: .3s; }
  .hero-shot .feed > :nth-child(3) { animation-delay: 1.3s; }
  .hero-shot .feed > :nth-child(4) { animation-delay: 2.4s; }
  .hero-shot .feed > :nth-child(5) { animation-delay: 3s; }
  .hero-shot .feed > :nth-child(6) { animation-delay: 4.2s; }
  .hero-shot .feed > :nth-child(7) { animation-delay: 4.8s; }
  @keyframes arrive { from { opacity: 0; transform: translateY(.7rem); } to { opacity: 1; transform: none; } }
}
a:focus-visible, .button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* The questions and answers of the home page, task P46: a question opens
   its answer without a script. */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.faq details > div { display: grid; gap: .5rem; padding: 0 0 1rem; color: var(--muted); }

/* What protects the account, the section "Безпека" of the home page. */
.safety { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.safety > div { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.safety h3 { margin-bottom: .35rem; }
.safety p { color: var(--muted); font-size: .98rem; }
@media (max-width: 720px) {
  .safety { grid-template-columns: 1fr; }
}

/* The buttons of the bots again at the end of a page, once the bots are
   public, and on a wide screen their QR codes, which a phone opens. */
.bots { display: grid; gap: 1rem; }
.bots .cta { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
.bots .codes { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .bots .codes { display: flex; flex-wrap: wrap; gap: 1.5rem; }
  .bots figure { margin: 0; display: grid; gap: .45rem; justify-items: center; color: var(--muted); font-size: .92rem; }
  .bots .qr { width: 9.5rem; height: 9.5rem; border-radius: .5rem; }
}

/* Print, task P46: dark text on white, without the menu, the switches and
   the marks, so that the offer saved or printed from the page reads as a
   document. */
@media print {
  :root, :root[data-theme="light"] { --bg: #ffffff; --fg: #000000; --muted: #333333; --line: #bbbbbb; --surface: #ffffff; --accent: #000000;
    --night: #ffffff; --night-fg: #000000; --night-muted: #333333; --night-accent: #000000; --night-line: #bbbbbb; --night-edge: #bbbbbb; color-scheme: light; }
  body { font-size: 11pt; }
  header.top, .skip, .launch, .mswitch, .jump, .arc, .hero-shot, footer .sign, footer .cards, .bots { display: none !important; }
  .band .wrap, main .wrap { padding-block: 1rem; }
  a { color: #000000 !important; }
  .warn, .plan, .price, .safety > div { break-inside: avoid; }
  .faq details > div { display: grid; }
}