/* Qavio homepage styles (Graphite light, D54), built from the owner's approved canvas "A Desktop".
 *
 * Every colour, size and font here comes from the canvas (Main.dc.html for the wide page,
 * A-Phone.dc.html for the phone hero) or from design-templates/design-tokens.json (color.site).
 * The canvas is the Design artifact https://claude.ai/artifact/HdLsnwynDkSSU5HjJjed6V, recorded in
 * D68 (docs/internal/DECISIONS.md). Its two boards are only on the canvas: the Main.dc.html files
 * in design-templates/ are other, older designs. The colours are the tokens in :root below, and
 * the dark window's own tokens in .qx; the rules use them by name, not as typed hex values.
 * The canvas is a fixed 1440px board; here the sections flow one after another, the content is
 * centred with a width of at most 1440px, and each section has its own layout for narrower
 * screens. Where the canvas draws nothing (tablet and phone layouts below the hero, hover and
 * focus for new parts, the FAQ), the rules follow the same language.
 *
 * Breakpoints used below: 767px and less is a phone (the A-Phone hero). The wide sections also
 * have their own points where their canvas layout stops fitting (1359px, 1343px, 1279px, 999px,
 * 931px, 899px, 699px), noted where they are used.
 */

/* ---- Tokens: the Graphite light colours and the fonts ---- */
:root {
    color-scheme: light;
    --bg: #F3F3F1;
    --text: #111215;
    --text-2: #585B62;
    --text-3: #80838B;
    --rule: #DCDCD5;
    --rule-soft: #E8E8E2;
    --card: #FFFFFF;
    --lime: #C8F25A;
    --lime-strong: #9CC23A;
    --sans: 'Instrument Sans', 'SF Pro Text', -apple-system, system-ui, sans-serif;
    --mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
    --sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    --sys-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

/* ---- Base: the desk with its dot grid, links, and the parts every section shares ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* The top bar stays over the page, so anything the browser scrolls into view for keyboard focus
   stops below it (52px on a phone, 44px wider). The sections cancel this for anchor jumps below,
   so a jump to a section still lands where it did */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 60px;
}

body {
    margin: 0;
    background-color: var(--bg);
    background-image: radial-gradient(circle, var(--rule) 1px, rgba(220, 220, 213, 0) 1.4px);
    background-size: 24px 24px;
    background-position: 12px 12px;
    color: var(--text);
    font-family: var(--sans);
}

a {
    color: var(--text);
}

a:hover {
    color: #000000;
}

strong {
    font-weight: inherit;
}

/* Author styles set display on many parts, so the hidden attribute needs to win over them */
[hidden] {
    display: none !important;
}

/* A focus ring for every link, button and FAQ row that does not set its own */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

/* Text only for screen readers: the status line app.js writes after a key press */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The page wrapper: it cuts off the soft light where it is wider than the screen */
.page {
    position: relative;
    overflow-x: clip;
}

main {
    display: block;
}

/* A bigger click and tap area than the drawn size, without changing how it looks */
.hit {
    position: relative;
}

.hit::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: 50%;
    height: 44px;
    margin-top: -22px;
}

/* The link that jumps past the top bar, shown only when it has keyboard focus */
.skip {
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 50;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--text);
    color: #F3F3F1;
    font: 600 14px/1.2 var(--sans);
    text-decoration: none;
}

.skip:focus,
.skip:hover {
    top: 8px;
    color: #F3F3F1;
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

/* The soft white light on the desk, behind the headline and the window */
.desk-light {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1440px;
    height: 1260px;
    margin-left: -720px;
    background:
        radial-gradient(ellipse 760px 600px at 720px 780px, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(ellipse 980px 420px at 720px 210px, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.grow {
    flex-grow: 1;
}

/* ---- Top bar: frosted white like a Mac menu bar. It stays at the top while the page scrolls,
        and lies over the hero the way the canvas draws it ---- */
.bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    height: 44px;
    margin-bottom: -44px;
    padding: 0 20px;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--rule-soft);
}

.bar-home {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}

/* The home link is drawn 20px tall; this makes its click area as tall as the bar */
.bar-home::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: 50%;
    height: 44px;
    margin-top: -22px;
}

/* On hover the wordmark gets its underline and keeps its ink, as on the canvas */
.bar-home:hover {
    color: var(--text);
}

.bar-home span {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.bar-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 13.5px;
    font-weight: 500;
}

/* Plain text links in the bar and the footer: an underline on hover */
.navl {
    text-decoration: none;
}

.navl:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.navl:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

/* The neutral Download button in the bar: the link is as tall as the bar, the face is 28px */
.nb {
    display: flex;
    align-items: center;
    height: 44px;
    margin-left: 18px;
    color: var(--text);
    text-decoration: none;
}

.nb-face {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px 0 9px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--card);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(20, 20, 10, .05);
}

/* On hover only the face changes; the text keeps its ink, as on the canvas */
.nb:hover {
    color: var(--text);
}

.nb:hover .nb-face {
    background: #F7F7F3;
}

.nb:focus-visible {
    outline: none;
}

.nb:focus-visible .nb-face {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

.bar-sep {
    width: 1px;
    height: 16px;
    margin: 0 16px 0 18px;
    background: var(--rule);
}

/* The orange dot macOS shows while a session records */
.bar-rec {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF9F0A;
    box-shadow: 0 0 0 2px rgba(255, 159, 10, .18);
}

.bar-clock {
    margin-left: 12px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
}

/* ---- Hero: the headline with keycap stickers, the button and the window ---- */
.hero {
    position: relative;
    padding: 80px 16px 30px;
}

.hero-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* The page's h1: one small line above the big headline that names the product, in the mono of the
   hero's other small lines (D75) */
.hero-kicker {
    margin: 0 0 18px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--text-2);
}

.hero-h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 96px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--text);
}

.hero-row {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 116px;
}

/* The three keycap stickers are one button */
.keys {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    letter-spacing: 0;
    font-family: inherit;
}

.keys:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 10px;
    border-radius: 30px;
}

/* The white sticker around each key, each one turned a little */
.stk {
    display: inline-flex;
    padding: 7px;
    border-radius: 29px;
    background: var(--card);
    box-shadow: 0 0 0 1px #D9D9D2, 0 1px 1px rgba(20, 20, 10, .10), 0 8px 14px -8px rgba(20, 20, 10, .30);
    transition: translate 150ms ease-out;
}

.stk-1 {
    transform: rotate(-5deg);
}

.stk-2 {
    transform: translateY(5px) rotate(3.5deg);
}

.stk-3 {
    transform: translateY(-2px) rotate(-2deg);
}

.keys:hover .stk {
    translate: 0 -2px;
}

/* The keycap itself, with its darker lower edge */
.kc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    padding-bottom: 10px;
    border: 1px solid var(--rule);
    border-radius: 22px;
    background: linear-gradient(#FFFFFF, #FAFAF7);
    box-shadow: inset 0 -10px 0 #C9C9C1;
    color: var(--text);
    transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

.kc-a {
    border-color: var(--lime-strong);
    background: var(--lime);
    box-shadow: inset 0 -10px 0 var(--lime-strong), 0 0 80px 14px rgba(130, 170, 20, .22);
    font-family: var(--sans);
    font-size: 52px;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
}

/* A press sends the keycaps down into their stickers */
.keys:active .kc {
    transform: translateY(6px);
    box-shadow: inset 0 -4px 0 #C9C9C1;
}

.keys:active .kc-a {
    box-shadow: inset 0 -4px 0 var(--lime-strong), 0 0 80px 14px rgba(130, 170, 20, .22);
}

.hero-sub {
    margin: 22px 0 0;
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text-2);
}

/* The lime Download button, used in the hero and in the closing */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 24px 3px 20px;
    border: 1px solid var(--lime-strong);
    border-radius: 12px;
    background: var(--lime);
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -4px 0 var(--lime-strong), 0 14px 28px -14px rgba(130, 170, 20, .55);
}

/* On hover only the brightness changes; the text keeps its ink, as on the canvas */
.cta:hover {
    color: var(--text);
    filter: brightness(1.04);
}

.cta:active {
    transform: translateY(2px);
    box-shadow: inset 0 -2px 0 var(--lime-strong), 0 8px 18px -12px rgba(130, 170, 20, .55);
}

.cta:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

/* The two buttons side by side: Download for Mac, then the Windows waitlist */
.ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hero-ctas {
    margin-top: 24px;
}

/* The Windows waitlist button: the same size and shape as the lime one, on a white glossy face
   with a grey edge and shelf, so the Mac download stays the main action */
.cta-win {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 22px 3px 20px;
    border: 1px solid #C9C9C1;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--card) 0%, #F7F7F3 100%);
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -4px 0 var(--rule), inset 0 1px 0 var(--card), 0 14px 28px -16px rgba(17, 18, 21, .35);
}

.cta-win svg,
.cta svg {
    flex-shrink: 0;
}

/* On hover the edge firms up; the text keeps its ink */
.cta-win:hover {
    color: var(--text);
    border-color: #B5B5AC;
}

.cta-win:active {
    transform: translateY(2px);
    box-shadow: inset 0 -2px 0 var(--rule), inset 0 1px 0 var(--card), 0 8px 18px -12px rgba(17, 18, 21, .35);
}

.cta-win:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

/* While Tally's script loads after the first click, the button shows it is working */
.cta-win[aria-busy="true"] {
    cursor: progress;
    opacity: .75;
}

.hero-lines {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-2);
}

.hero-crop {
    width: 620px;
    max-width: 100%;
    margin-top: 40px;
}


.hero-win {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 620px;
    max-width: 100%;
}

/* The soft shadow of a window on the desk, drawn as a blurred shape behind it */
.qshadow {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.hero-shadow {
    left: 60px;
    right: 60px;
    top: 120px;
    bottom: -14px;
    border-radius: 80px;
    background: rgba(20, 20, 10, .24);
    filter: blur(44px);
}

/* The round "Try it free" sticker beside the two buttons */
.sticker {
    position: absolute;
    left: calc(50% + 236px);
    top: 330px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 128px;
    height: 128px;
    padding: 0 10px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 0 0 1px #D9D9D2, 0 1px 1px rgba(20, 20, 10, .10), 0 10px 18px -8px rgba(20, 20, 10, .30);
    transform: rotate(9deg);
    text-align: center;
    color: var(--text);
}

.sticker-ring {
    position: absolute;
    left: 7px;
    top: 7px;
    right: 7px;
    bottom: 7px;
    border: 1.5px dashed var(--rule);
    border-radius: 50%;
}

.sticker-big {
    position: relative;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.sticker-small {
    position: relative;
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--text-2);
}

/* ---- Desktop objects in the hero: file icons that link to the sections. They sit in the space
        beside the window, at the canvas's places on a 1440px screen, and move in with the edges
        on a smaller one. Shown from 1024px up ---- */
.dicon {
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: max-content;
    transform: translateX(-50%);
    text-decoration: none;
    color: var(--text);
}

.dicon:hover,
.dicon:focus-visible {
    color: var(--text);
}

.dicon:focus-visible {
    outline: none;
}

.dicon-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 76px;
    border-radius: 10px;
}

.dicon-svg {
    filter: drop-shadow(0 3px 4px rgba(20, 20, 10, .14));
}

.dicon-svg-soft {
    filter: drop-shadow(0 3px 4px rgba(20, 20, 10, .12));
}

.dicon-label {
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
}

.dicon-struck {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.dicon-sub {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-2);
    white-space: nowrap;
}

/* Hover and keyboard focus select the file, the way Finder does */
.dicon:hover .dicon-art,
.dicon:focus-visible .dicon-art {
    background: rgba(17, 18, 21, .07);
}

.dicon:hover .dicon-label,
.dicon:focus-visible .dicon-label {
    background: var(--text);
    color: #FFFFFF;
}

/* Each icon's place: a share of the space between the window (620px wide) and the screen edge */
.di-desc {
    top: 150px;
    left: calc(50% - 310px - (min(50%, 720px) - 310px) * 0.5073);
}

.di-meet {
    top: 566px;
    left: calc(50% - 310px - (min(50%, 720px) - 310px) * 0.3634);
}

.di-price {
    top: 160px;
    left: calc(50% + 310px + (min(50%, 720px) - 310px) * 0.4902);
}

.di-rules {
    top: 520px;
    left: calc(50% + 310px + (min(50%, 720px) - 310px) * 0.5683);
}

.di-audio {
    top: 924px;
    left: calc(50% + 310px + (min(50%, 720px) - 310px) * 0.4512);
}

@media (min-width: 1024px) {
    .dicon {
        display: flex;
    }
}

/* Below 1180px the audio file's note breaks after its first sentence, to stay beside the window */
@media (max-width: 1179px) {
    .dicon-sub {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* ---- The dark Qavio window: its colours, and the parts of its bars ---- */
.qx {
    --panel: #15161A;
    --raised: #1D1F24;
    --field: #0D0E10;
    --line: #2C2E34;
    --line-soft: #222429;
    --ink: #F3F3F1;
    --muted: #A2A5AD;
    --dim: #80838B;
    --hi: rgba(255, 255, 255, .06);
    color: var(--ink);
    font-family: var(--sys);
    text-align: left;
    letter-spacing: 0;
}

/* Row 1, the control bar */
.qbar {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 50px;
    padding: 0 6px 0 10px;
    border-radius: 15px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55), inset 0 1px 0 var(--hi);
}

.qbar-6 {
    gap: 6px;
}

/* The round glyph at the left: lime while listening, yellow from a press to the first words */
.qglyph {
    --ring: var(--lime);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 1.5px solid var(--ring);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(200, 242, 90, .16);
}

.qglyph svg {
    stroke: var(--ring);
}

.qglyph.is-working {
    --ring: #FFD60A;
    box-shadow: none;
}

/* The glyph when no session runs: a grey ring with a white mark */
.qglyph-idle {
    --ring: var(--text-3);
    box-shadow: none;
}

.qglyph-idle svg {
    stroke: #F3F3F1;
}

.qtime {
    flex-shrink: 0;
    font-family: var(--sys-mono);
    font-size: 12px;
    color: var(--muted);
}

.qicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    color: var(--muted);
}

.qicon-first {
    margin-left: 2px;
}

.qsep {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    flex-shrink: 0;
    background: var(--line);
}

/* The lime Answer button with its three small keys */
.qbtn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    flex-shrink: 0;
    padding: 0 6px 0 10px;
    border: none;
    background: var(--lime);
    color: #0D0E10;
    font-weight: 600;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
}

button.qbtn {
    cursor: pointer;
}

button.qbtn:active {
    transform: translateY(1px);
}

.qbtn.hit::after {
    left: 0;
    right: 0;
    height: 40px;
    margin-top: -20px;
}

.qbtn:focus-visible,
.qnav:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

.qkeys {
    display: flex;
    gap: 2px;
}

/* The small key glyphs inside the window */
.qkbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 18px;
    padding: 0 3px;
    border: 1px solid var(--line);
    background: var(--field);
    color: var(--muted);
    border-radius: 5px;
    font-family: var(--sys-mono);
    font-size: 10.5px;
}

.qkbd-on {
    border-color: rgba(13, 14, 16, .18);
    background: rgba(13, 14, 16, .08);
    color: #0D0E10;
}

.qkbd-s {
    min-width: 16.15px;
    height: 17.1px;
    font-size: 9.975px;
}

.qsolve {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    flex-shrink: 0;
    padding: 0 6px 0 10px;
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--ink);
    font-weight: 500;
    border-radius: 10px;
    font-size: 13px;
}

.qgrow {
    flex-grow: 1;
    min-width: 4px;
}

/* The Small, Medium, Large control */
.qsize {
    display: flex;
    align-items: center;
    height: 30px;
    flex-shrink: 0;
    padding: 0 1px;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.qsize-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--muted);
}

.qsize-r {
    border-radius: 8px;
}

.qsize-sep {
    width: 1px;
    height: 14px;
    background: var(--line);
}

.qstop {
    display: flex;
    align-items: center;
    height: 32px;
    flex-shrink: 0;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(255, 122, 102, .16);
    color: #FF7A66;
    font-weight: 600;
    font-size: 13px;
}

.qname {
    margin-left: 2px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
}

.qstatus {
    min-width: 0;
    overflow: clip;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}

.qstart {
    display: flex;
    align-items: center;
    height: 32px;
    flex-shrink: 0;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--lime);
    color: #0D0E10;
    font-weight: 600;
    font-size: 13px;
}

/* Start call after End, before the next call: quiet until pressed */
.qstart-off {
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--dim);
}

/* Row 2, the live caption row */
.qrow {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 14px 0 12px;
    border-radius: 13px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55), inset 0 1px 0 var(--hi);
}

.qtag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 18px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--raised);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
}

.qtag-try {
    margin-left: 8px;
}

/* The caption keeps its newest words and cuts the start, as the app does */
.qcapt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: clip;
    white-space: nowrap;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left;
    font-size: 13.5px;
    color: var(--muted);
}

.qcapt > span {
    direction: ltr;
    unicode-bidi: embed;
}

/* Row 3, the answer drawer */
.qdrawer {
    display: flex;
    flex-direction: column;
    height: 452px;
    overflow: clip;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55), inset 0 1px 0 var(--hi);
}

/* The drawer cut by the edge of the picture, in the setup section */
.qdrawer-cut {
    height: 300px;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    box-shadow: inset 0 1px 0 var(--hi);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
}

.qdhead {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    height: 40px;
    padding: 0 8px 0 10px;
    border-bottom: 1px solid var(--line-soft);
}

/* The slide arrows: live when there is a slide to go to, quiet when there is not */
.qnav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid #222429;
    border-radius: 8px;
    background: transparent;
    color: #2C2E34;
    font-family: inherit;
    cursor: default;
}

.qnav.is-on {
    border-color: #2C2E34;
    color: #F3F3F1;
}

button.qnav.is-on {
    cursor: pointer;
}

.qnav.hit::after {
    left: -7px;
    right: -7px;
    height: 40px;
    margin-top: -20px;
}

.qnav-still {
    border-color: var(--line-soft);
    color: var(--line);
}

.qcount {
    flex-shrink: 0;
    padding: 0 5px;
    font-family: var(--sys-mono);
    font-size: 12px;
    color: var(--muted);
}

.qcount-cur {
    color: var(--ink);
}

/* One dot per slide; the current one is the wide lime dot */
.qdots {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
}

.qdot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background: #2C2E34;
}

.qdot.is-on {
    width: 16px;
    background: var(--lime);
}

.qhint {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-right: 6px;
}

/* Copy is always there, dimmed while the answer is still on its way */
.qcopy {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    flex-shrink: 0;
    padding: 0 12px;
    border: 1px solid #2C2E34;
    border-radius: 8px;
    background: #1D1F24;
    color: #F3F3F1;
    font-weight: 500;
    font-size: 11.5px;
}

.qcopy.is-working {
    border-color: #222429;
    background: transparent;
    color: var(--text-3);
}

/* The answer area: the question, then the answer */
.qbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: clip;
    padding: 12px 16px;
}

.qbody-fade {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}

.qq {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.qq svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--dim);
}

.qq span {
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--muted);
}

.qans {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.qans p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
}

.qans ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qans li {
    display: flex;
    gap: 9px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
}

.qbul {
    width: 5px;
    height: 5px;
    margin-top: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--muted);
}

/* "Another try" fades in when it arrives */
@keyframes qin {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

.qin {
    animation: qin 240ms ease-out;
}

/* The code example box */
.qcode {
    overflow: clip;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--field);
}

.qcode-h {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, .03);
    font-family: var(--sys-mono);
    font-size: 11px;
    color: var(--dim);
}

.qcode-b {
    display: flex;
    flex-direction: column;
    padding: 9px 12px 10px;
    font-family: var(--sys-mono);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
    white-space: pre;
}

/* Code colours: keywords, numbers and strings */
.ck {
    color: #FF7AB2;
}

.cn {
    color: #C4A6FF;
}

.cs {
    color: #6BDFFF;
}

/* The placeholder lines while an answer is on its way */
.qph {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 5px;
}

.qph span {
    display: block;
    height: 12px;
    border-radius: 5px;
    background: rgba(128, 131, 139, .18);
}

.qph span:nth-child(1) {
    width: 92%;
}

.qph span:nth-child(2) {
    width: 78%;
}

.qph span:nth-child(3) {
    width: 64%;
}

/* The composer row at the bottom of the drawer */
.qfoot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 10px 11px;
    border-top: 1px solid var(--line-soft);
}

.qinput {
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 1;
    height: 36px;
    padding: 0 40px 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--field);
    font-size: 13.5px;
    color: var(--dim);
}

.qsend {
    position: absolute;
    right: 4px;
    top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--line);
}

.qscratch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    flex-shrink: 0;
    padding: 0 13px 0 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
}

.qscratch svg {
    color: var(--muted);
}

/* ---- Sections: the file label, the headline and the line under it ---- */
/* scroll-margin-top cancels the html scroll padding for a jump to a section, so the section's own
   top space sits under the bar the way it did before the padding */
.sec {
    position: relative;
    padding: 96px 16px 0;
    scroll-margin-top: -60px;
}

.sec-setup {
    padding-top: 80px;
}

.sec-privacy,
.sec-rule,
.sec-faq {
    padding-top: 90px;
}

.sec-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* The small file icon and name above each headline */
.lbl {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 22px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-2);
}

.lbl-struck {
    text-decoration: line-through;
}

/* A headline that needs two lines splits them evenly, so no word is left alone on the last line.
   At the canvas's width every headline fits on one line, so nothing changes there */
.h2 {
    margin: 14px 0 0;
    font-size: clamp(36px, calc(22px + 3.4vw), 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

/* The line under a headline: when it wraps, the last line keeps more than one word */
.sub {
    margin: 12px 0 0;
    font-size: 20px;
    line-height: 1.5;
    color: var(--text-2);
    text-wrap: pretty;
}

/* The light keys used as a label and inside text */
.lkeys {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 22px;
}

.lk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px 2px;
    border: 1px solid var(--rule);
    border-radius: 5px;
    background: var(--card);
    box-shadow: inset 0 -2px 0 var(--rule-soft);
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text);
}

.lk-a {
    border-color: var(--lime-strong);
    background: var(--lime);
    box-shadow: inset 0 -2px 0 var(--lime-strong);
}

.lkeys-in {
    display: inline-flex;
    gap: 2px;
    vertical-align: -3px;
}

/* ---- (a) Setup: the start options on the left, the answer that uses them on the right ---- */
.setup-stage {
    position: relative;
    width: 1320px;
    height: 420px;
    margin: 44px auto 0;
}

.setup-a {
    position: absolute;
    left: 0;
    top: 0;
    width: 620px;
}

.setup-b {
    position: absolute;
    left: 700px;
    top: 40px;
    width: 620px;
}

.setup-win {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.setup-shadow-a {
    left: 40px;
    right: 40px;
    top: 60px;
    bottom: -24px;
    border-radius: 60px;
    background: rgba(20, 20, 10, .22);
    filter: blur(40px);
}

.setup-shadow-b {
    left: 40px;
    right: 40px;
    top: 40px;
    bottom: 80px;
    border-radius: 60px;
    background: rgba(20, 20, 10, .22);
    filter: blur(40px);
}

.setup-arrow {
    position: absolute;
    left: 620px;
    top: 96px;
}

.setup-arrow-down {
    display: none;
}

/* The start options panel under the control bar */
.qpanel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55), inset 0 1px 0 var(--hi);
}

.qmode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid #8DB028;
    border-radius: 12px;
    background: rgba(200, 242, 90, .08);
}

.qmode-t {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
}

.qmode-d {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--muted);
}

.qdesc-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qdesc {
    height: 68px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--field);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink);
}

/* The words from the description that come back in the answer */
.dotu {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: #C9C9C1;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.qdesc-note {
    font-size: 11.5px;
    color: var(--dim);
    white-space: nowrap;
}

.qconsent {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qconsent-t {
    flex-grow: 1;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--muted);
}

.qnotice {
    display: flex;
    align-items: center;
    height: 28px;
    flex-shrink: 0;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--raised);
    color: var(--ink);
    font-weight: 500;
    font-size: 11.5px;
}

/* Just above the stacking point the two windows would reach almost to the screen edge (20px at
   1360px), while the rest of the page keeps wide margins. So between 1360px and 1439px the whole
   picture is drawn a little smaller, in two steps, which keeps at least 50px at each side */
@media (min-width: 1360px) and (max-width: 1399px) {
    .setup-stage {
        zoom: .955;
    }
}

@media (min-width: 1400px) and (max-width: 1439px) {
    .setup-stage {
        zoom: .975;
    }
}

/* Below 1360px the two windows no longer fit side by side: they stack, one to the left and
   one to the right, with the arrow pointing down between them */
@media (max-width: 1359px) {
    .setup-stage {
        display: flex;
        flex-direction: column;
        width: 900px;
        max-width: 100%;
        height: auto;
    }

    .setup-a,
    .setup-b {
        position: relative;
        left: auto;
        top: auto;
        width: 620px;
        max-width: 100%;
    }

    .setup-b {
        align-self: flex-end;
    }

    .setup-arrow {
        display: none;
    }

    .setup-arrow-down {
        display: block;
        align-self: center;
        margin: 8px 0 4px;
    }
}

/* ---- (a2) It finds the question: heard, the keys, the question and the answer ---- */
.q-grid {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr) 560px;
    align-items: center;
    width: 1312px;
    max-width: 100%;
    margin: 44px auto 0;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Helvetica Neue', sans-serif;
}

.q-heard,
.q-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.q-lbl {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
}

/* A dark card, one part of the Qavio window shown larger */
.q-card {
    border-radius: 16px;
    border: 1px solid #2C2E34;
    background: #15161A;
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.q-heard-card {
    padding: 20px 22px 22px;
}

.q-them {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 7px;
    background: #1D1F24;
    font-size: 13px;
    font-weight: 600;
    color: #A2A5AD;
}

.q-heard-text {
    margin: 20px 0 0;
    font-size: 20px;
    line-height: 2.05;
    color: #A2A5AD;
}

/* A filler word, crossed out, with its small "filler" tag above it */
.fill {
    position: relative;
    display: inline-block;
    line-height: 1.3;
    color: var(--text-3);
    text-decoration: line-through;
    text-decoration-color: #A2A5AD;
    text-decoration-thickness: 2px;
}

.fill-tag {
    position: absolute;
    left: 50%;
    top: -19px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 6px;
    border-radius: 5px;
    border: 1px solid #2C2E34;
    background: #1D1F24;
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1;
    color: #A2A5AD;
    white-space: nowrap;
}

/* The keys in the middle, with a dashed line in and a dashed arrow out */
.q-mid {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
}

.q-line {
    flex: 1 1 auto;
    height: 0;
    margin-top: -10px;
    border-top: 1px dashed var(--text-3);
}

.q-line-end {
    position: relative;
}

.q-line-end svg {
    position: absolute;
    right: -2px;
    top: -6.5px;
}

.q-line-down {
    display: none;
}

.q-question {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
}

.q-question svg {
    flex-shrink: 0;
    margin-top: 6px;
    color: var(--text-3);
}

.q-question span {
    font-size: 21px;
    font-weight: 500;
    line-height: 1.4;
    color: #A2A5AD;
}

.q-lbl-ans {
    margin-top: 6px;
}

.q-answer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px 20px;
}

.q-ahead {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 22px;
}

.q-count {
    font-family: var(--sys-mono);
    font-size: 12.5px;
    color: #A2A5AD;
}

.q-count-cur {
    color: #F3F3F1;
}

.q-try {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    background: #1D1F24;
    font-size: 11.5px;
    font-weight: 500;
    color: #A2A5AD;
}

.q-ans {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.q-ans p {
    margin: 0;
    font-size: 20px;
    line-height: 1.55;
    color: #F3F3F1;
}

.q-ans ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.q-ans li {
    display: flex;
    gap: 11px;
    font-size: 17px;
    line-height: 1.5;
    color: #F3F3F1;
}

.q-bul {
    width: 6px;
    height: 6px;
    margin-top: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #A2A5AD;
}

/* The words that came from the call description */
.dotu-d {
    text-decoration: underline dotted var(--text-3);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.q-code {
    overflow: clip;
    border: 1px solid #2C2E34;
    border-radius: 12px;
    background: #0D0E10;
}

.q-code-h {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-bottom: 1px solid #222429;
    background: rgba(255, 255, 255, .03);
    font-family: var(--sys-mono);
    font-size: 12px;
    color: var(--text-3);
}

.q-code-b {
    display: flex;
    flex-direction: column;
    padding: 11px 14px 12px;
    font-family: var(--sys-mono);
    font-size: 15px;
    line-height: 1.55;
    color: #F3F3F1;
    white-space: pre;
}

.q-ph {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 0 4px;
}

.q-ph span {
    display: block;
    height: 14px;
    border-radius: 5px;
    background: rgba(128, 131, 139, .18);
}

.q-ph span:nth-child(1) {
    width: 92%;
}

.q-ph span:nth-child(2) {
    width: 70%;
}

.q-from {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
}

.q-from-line {
    width: 28px;
    height: 0;
    border-bottom: 2px dotted var(--text-3);
}

/* The same for the three columns of the question, which would start 16px from the edge at 1344px:
   between 1344px and 1439px they are drawn a little smaller, keeping at least 48px at each side */
@media (min-width: 1344px) and (max-width: 1399px) {
    .q-grid {
        zoom: .95;
    }
}

@media (min-width: 1400px) and (max-width: 1439px) {
    .q-grid {
        zoom: .975;
    }
}

/* Below 1344px the three columns no longer fit: heard, the keys and the answer stack in one
   column, and the dashed lines run down instead of across */
@media (max-width: 1343px) {
    .q-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 560px;
    }

    .q-mid {
        flex-direction: column;
        gap: 10px;
        padding: 12px 0 14px;
    }

    .q-line {
        flex: none;
        width: 0;
        height: 26px;
        margin: 0;
        border-top: none;
        border-left: 1px dashed var(--text-3);
    }

    .q-line-end svg {
        display: none;
    }

    .q-line-down {
        display: block;
        height: 10px;
        margin-top: -14px;
    }

    .q-line-down svg {
        display: block;
    }
}

/* ---- The 3D keys: dark and small in the question section, light and large in the closing.
        A press sends the faces down and shrinks their shadow on the desk ---- */
.bkeys {
    position: relative;
    display: flex;
}

.bkeys.sm {
    gap: 10px;
}

.bkeys.md {
    gap: 20px;
}

.bkc {
    position: relative;
    display: block;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.bkc-floor,
.bkc-side,
.bkc-face,
.bkc-glyph,
.bkc-leg,
.bkc-letter {
    position: absolute;
}

.bkc-leg {
    font-family: var(--mono);
    line-height: 1;
}

.bkc-letter {
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--sans);
    font-weight: 600;
    line-height: 1;
}

.bkc .bkc-face {
    transition: transform 90ms ease-out;
}

.bkc .bkc-floor {
    transition: transform 90ms ease-out, opacity 90ms ease-out;
}

.bkc:hover .bkc-face {
    transform: translateY(-2px);
}

.bkeys:active .bkc-face,
.bkeys.is-down .bkc-face {
    transform: translateY(9px);
}

.bkeys.md:active .bkc-face,
.bkeys.md.is-down .bkc-face {
    transform: translateY(8px);
}

.bkeys.sm:active .bkc-face,
.bkeys.sm.is-down .bkc-face {
    transform: translateY(5px);
}

.bkeys:active .bkc-floor,
.bkeys.is-down .bkc-floor {
    transform: scale(.93);
    opacity: .8;
}

.bkc:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

/* The small dark keys */
.bkeys.sm .bkc {
    width: 72px;
    height: 76px;
    border-radius: 15px;
}

.bkeys.sm .bkc-floor {
    left: -10px;
    top: 60px;
    width: 92px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20, 20, 10, .45), rgba(20, 20, 10, .16) 55%, rgba(20, 20, 10, 0));
}

.bkeys.sm .bkc-side {
    left: 0;
    top: 9px;
    width: 72px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(180deg, #222429 0%, #1D1F24 82%, #08090B 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05), 0 12px 20px -8px rgba(20, 20, 10, .35);
}

.bkeys.sm .bkc-face {
    left: 1px;
    top: 0;
    width: 70px;
    height: 64px;
    border-radius: 15px;
    border: 1px solid #2C2E34;
    background:
        radial-gradient(62% 56% at 50% 44%, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(140% 120% at 28% 6%, #2C2E34 0%, #222429 50%, #1D1F24 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -2px 3px rgba(0, 0, 0, .28), 0 1px 0 rgba(0, 0, 0, .5);
}

.bkeys.sm .bkc-glyph {
    left: 21px;
    top: 11px;
}

.bkeys.sm .bkc-leg {
    left: 8px;
    bottom: 7px;
    font-size: 9.5px;
    color: #A2A5AD;
}

.bkeys.sm .bkc-a .bkc-side {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .42) 100%), #8DB028;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .2), 0 0 56px 8px rgba(130, 170, 20, .20), 0 12px 20px -8px rgba(20, 20, 10, .35);
}

.bkeys.sm .bkc-a .bkc-face {
    border-color: #8DB028;
    background:
        radial-gradient(62% 56% at 50% 44%, rgba(13, 14, 16, .07) 0%, rgba(13, 14, 16, 0) 100%),
        radial-gradient(140% 120% at 28% 6%, var(--lime) 0%, var(--lime) 55%, var(--lime-strong) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(13, 14, 16, .12), 0 1px 0 rgba(13, 14, 16, .25);
}

.bkeys.sm .bkc-letter {
    top: 9px;
    font-size: 34px;
    color: #0D0E10;
}

.bkeys.sm .bkc-a .bkc-leg {
    font-weight: 500;
    color: rgba(13, 14, 16, .7);
}

/* The large light keys */
.bkeys.md .bkc {
    width: 132px;
    height: 138px;
    border-radius: 26px;
}

.bkeys.md .bkc-floor {
    left: -16px;
    top: 112px;
    width: 164px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20, 20, 10, .32), rgba(20, 20, 10, .12) 55%, rgba(20, 20, 10, 0));
}

.bkeys.md .bkc-side {
    left: 0;
    top: 15px;
    width: 132px;
    height: 122px;
    border-radius: 28px;
    background: linear-gradient(180deg, var(--rule-soft) 0%, var(--rule) 86%, #C9C9C1 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), 0 20px 34px -12px rgba(20, 20, 10, .28);
}

.bkeys.md .bkc-face {
    left: 2px;
    top: 0;
    width: 128px;
    height: 122px;
    border-radius: 26px;
    border: 1px solid var(--rule);
    background:
        radial-gradient(62% 56% at 50% 44%, rgba(20, 20, 10, .04) 0%, rgba(20, 20, 10, 0) 100%),
        radial-gradient(140% 120% at 28% 6%, #FFFFFF 0%, #FAFAF7 50%, #F3F3F1 100%);
    box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -3px 4px rgba(20, 20, 10, .06), 0 1px 0 rgba(20, 20, 10, .12);
}

.bkeys.md .bkc-glyph {
    left: 40px;
    top: 26px;
}

.bkeys.md .bkc-leg {
    left: 15px;
    bottom: 13px;
    font-size: 11.5px;
    color: var(--text-2);
}

.bkeys.md .bkc-a .bkc-side {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 86%, rgba(20, 20, 10, .18) 100%), var(--lime-strong);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .3), 0 0 90px 14px rgba(130, 170, 20, .20), 0 20px 34px -12px rgba(20, 20, 10, .28);
}

.bkeys.md .bkc-a .bkc-face {
    border-color: var(--lime-strong);
    background:
        radial-gradient(62% 56% at 50% 44%, rgba(13, 14, 16, .07) 0%, rgba(13, 14, 16, 0) 100%),
        radial-gradient(140% 120% at 28% 6%, var(--lime) 0%, var(--lime) 55%, var(--lime-strong) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 4px rgba(13, 14, 16, .10), 0 1px 0 rgba(13, 14, 16, .18);
}

.bkeys.md .bkc-letter {
    top: 18px;
    font-size: 64px;
    letter-spacing: -0.02em;
    color: var(--text);
}

.bkeys.md .bkc-a .bkc-leg {
    font-weight: 500;
    color: rgba(17, 18, 21, .7);
}

/* ---- (a3) Works with: the call apps float around the Qavio icon, and come out of it when the
        section scrolls into view ---- */
.qapps {
    position: relative;
    width: 1312px;
    max-width: 100%;
    height: 400px;
    margin: 40px auto 0;
}

/* The two dotted rings, stretched to the width of the stage */
.qring {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 46.5%;
    transition: transform 900ms cubic-bezier(.2, .8, .2, 1) 120ms, opacity 600ms ease-out 120ms;
}

.qring-tall {
    display: none;
}

/* The Qavio icon in the middle; a click plays the apps coming out again */
.qhub {
    position: absolute;
    left: calc(50% - 60px);
    top: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 120px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    transition: transform 560ms cubic-bezier(.2, .9, .25, 1.3), opacity 300ms ease-out;
}

/* app.js makes the icon a button only when the replay can play */
.qhub[role="button"] {
    cursor: pointer;
}

.qhub:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 6px;
    border-radius: 24px;
}

.qhub-art {
    display: block;
    width: 112px;
    height: 112px;
}

.qhub-art svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 18px 22px rgba(20, 20, 10, .28)) drop-shadow(0 2px 3px rgba(20, 20, 10, .12));
}

.qhub-name {
    font-size: 14px;
    font-weight: 600;
}

/* One app tile. --dx and --dy are how far it is from the Qavio icon; app.js measures them */
.qem {
    position: absolute;
    width: 132px;
    transition: transform 820ms cubic-bezier(.2, .9, .25, 1.12) var(--d, 0ms), opacity 420ms ease-out var(--d, 0ms);
}

/* Folded into the icon, before the section is in view */
.qapps.armed .qem {
    transform: translate(var(--dx), var(--dy)) scale(.2);
    opacity: 0;
    transition: none;
}

.qapps.armed .qhub {
    transform: scale(.4);
    opacity: 0;
    transition: none;
}

.qapps.armed .qring {
    transform: scale(.25);
    opacity: 0;
    transition: none;
}

/* The slow float, each tile on its own timing, as the canvas draws it: it keeps going. While the
   tiles are folded into the icon the float waits, so it starts when they come out. Reduced motion
   turns it off */
@keyframes qfloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.qfl {
    display: block;
    animation: qfloat 7s ease-in-out infinite;
}

.qapps.armed .qfl {
    animation: none;
}

.qfl2 {
    animation-duration: 8.5s;
    animation-delay: -3s;
}

.qfl3 {
    animation-duration: 6.5s;
    animation-delay: -1.5s;
}

.qfl4 {
    animation-duration: 9s;
    animation-delay: -4s;
}

.qfl5 {
    animation-duration: 7.5s;
    animation-delay: -2.2s;
}

.qfl6 {
    animation-duration: 8s;
    animation-delay: -5s;
}

.app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.app-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border: 1px solid var(--rule);
    border-radius: 22px;
    background: linear-gradient(#FFFFFF, #F7F7F3);
    box-shadow: inset 0 -5px 0 var(--rule-soft), 0 18px 30px -16px rgba(20, 20, 10, .32);
    color: var(--text);
}

.app-art img {
    display: block;
    height: auto;
}

.logo-zoom {
    width: 66px;
}

.logo-meet {
    width: 50px;
}

.logo-slack {
    width: 46px;
    height: 46px !important;
}

.logo-teams {
    width: 44px;
}

.app-name {
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(243, 243, 241, .85);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* Each tile's place (the centre as a share of the stage), its turn and its delay. The --dx and
   --dy values are the canvas's own, used until app.js measures the real ones */
.app-zoom {
    left: calc(27.8963% - 66px);
    top: 36px;
    --dx: 290px;
    --dy: 77px;
    --d: 150ms;
}

.app-zoom .app {
    transform: rotate(-5deg);
}

.app-meet {
    left: calc(16.4634% - 66px);
    top: 226px;
    --dx: 440px;
    --dy: -113px;
    --d: 290ms;
}

.app-meet .app {
    transform: rotate(4deg);
}

.app-slack {
    left: calc(37.3476% - 66px);
    top: 262px;
    --dx: 166px;
    --dy: -149px;
    --d: 430ms;
}

.app-slack .app {
    transform: rotate(-3deg);
}

.app-teams {
    left: calc(72.1037% - 66px);
    top: 30px;
    --dx: -290px;
    --dy: 83px;
    --d: 220ms;
}

.app-teams .app {
    transform: rotate(5deg);
}

.app-webex {
    left: calc(83.5366% - 66px);
    top: 222px;
    --dx: -440px;
    --dy: -109px;
    --d: 360ms;
}

.app-webex .app {
    transform: rotate(-4deg);
}

.app-web {
    left: calc(62.6524% - 66px);
    top: 262px;
    --dx: -166px;
    --dy: -149px;
    --d: 500ms;
}

.app-web .app {
    transform: rotate(3deg);
}

.apps-more {
    margin: 18px 0 0;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-2);
    text-align: center;
    text-wrap: balance;
}

/* Below 700px the ring of apps becomes two columns, three on each side of the Qavio icon */
@media (max-width: 699px) {
    .qapps {
        width: 480px;
        height: 460px;
    }

    .qring-wide {
        display: none;
    }

    .qring-tall {
        display: block;
    }

    .qhub {
        left: calc(50% - 50px);
        top: 170px;
        width: 100px;
    }

    .qhub-art {
        width: 88px;
        height: 88px;
    }

    .qem {
        width: 110px;
    }

    .app-art {
        width: 76px;
        height: 76px;
        border-radius: 18px;
    }

    .app-art > svg {
        width: 33px;
        height: 33px;
    }

    .logo-zoom {
        width: 55px;
    }

    .logo-meet {
        width: 41px;
    }

    .logo-slack {
        width: 38px;
        height: 38px !important;
    }

    .logo-teams {
        width: 36px;
    }

    .app-zoom,
    .app-meet,
    .app-slack {
        left: calc(17% - 55px);
    }

    .app-teams,
    .app-webex,
    .app-web {
        left: calc(83% - 55px);
    }

    .app-zoom {
        top: 8px;
    }

    .app-meet {
        top: 176px;
    }

    .app-slack {
        top: 344px;
    }

    .app-teams {
        top: 0;
    }

    .app-webex {
        top: 168px;
    }

    .app-web {
        top: 336px;
    }
}

/* ---- (b) Notes: the dark Meetings window, and the control bar floating over its corner ---- */
.notes-stage {
    position: relative;
    width: 100%;
    max-width: 1440px;
    height: 610px;
    margin: 44px auto 0;
}

.mwin {
    position: absolute;
    left: 50%;
    top: 0;
    width: 900px;
    height: 600px;
    margin-left: -450px;
    overflow: clip;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: 0 50px 90px -30px rgba(20, 20, 10, .42), 0 2px 6px rgba(20, 20, 10, .10);
}

.mwin-in {
    display: flex;
    height: 100%;
}

/* The list of calls on the left */
.mside {
    display: flex;
    flex-direction: column;
    width: 260px;
    flex-shrink: 0;
    padding-top: 38px;
    border-right: 1px solid var(--line);
}

.msearch {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    margin: 0 10px 8px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--field);
    color: var(--dim);
}

.msearch span {
    font-size: 13px;
}

.mlist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}

.mrow {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
}

.mrow.is-on {
    background: var(--raised);
    border-color: var(--line);
}

.mrow-t {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mrow-t span {
    overflow: clip;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.mrow-t svg {
    flex-shrink: 0;
    color: var(--dim);
}

.mrow-m {
    overflow: clip;
    white-space: pre;
    text-overflow: ellipsis;
    font-size: 11.5px;
    color: var(--muted);
}

/* The chosen call's notes and transcript on the right */
.mmain {
    flex: 1 1 auto;
    min-width: 0;
    padding: 44px 24px 24px;
    overflow: clip;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}

.mhead {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.mtitle {
    flex: 1 1 auto;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
}

.mbtns {
    display: flex;
    gap: 8px;
    align-self: center;
}

.mbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 28px;
    padding: 0 10px;
    white-space: nowrap;
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--ink);
    font-weight: 500;
    border-radius: 8px;
    font-size: 11.5px;
}

.mmeta {
    margin-top: 4px;
    font-size: 11.5px;
    white-space: pre;
    color: var(--muted);
}

.mnotes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--raised);
}

.mh {
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.mtext {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
}

.mitem {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
}

.mitem span:first-child {
    color: var(--muted);
}

.mtrans {
    margin-top: 20px;
}

.mlines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mline {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.mt {
    width: 44px;
    flex-shrink: 0;
    font-family: var(--sys-mono);
    font-size: 11.5px;
    color: var(--dim);
}

.mwho {
    align-self: flex-start;
    margin-top: 1px;
}

.mtag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 18px;
    border-radius: 6px;
    background: var(--raised);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
}

.mtag-you {
    background: rgba(200, 242, 90, .14);
    color: var(--lime);
}

/* The window's title bar, with the three coloured buttons */
.mbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.mbar-in {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
}

.lights {
    display: flex;
    gap: 8px;
}

.lights span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FF5F57;
}

.lights span:nth-child(2) {
    background: #FEBC2E;
}

.lights span:nth-child(3) {
    background: #28C840;
}

.mbar-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    opacity: .86;
}

/* The control bar after End, over the window's lower right corner */
.notes-bar {
    position: absolute;
    top: 556px;
    right: max(0px, calc(50% - 620px));
    width: 620px;
    max-width: 100%;
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55), 0 30px 50px -20px rgba(20, 20, 10, .35), inset 0 1px 0 var(--hi);
}

/* Below 932px the Meetings window takes the width of the screen. Its text wraps more, so the
   transcript can reach the control bar: it fades out above the bar's top edge (44px above the
   window's bottom), so no line is cut in half and nothing shows beside the bar */
@media (max-width: 931px) {
    .mwin {
        left: 0;
        width: 100%;
        margin-left: 0;
    }

    .mmain {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 128px), transparent calc(100% - 52px));
        mask-image: linear-gradient(to bottom, #000 calc(100% - 128px), transparent calc(100% - 52px));
    }
}

/* Below 700px the list of calls is left out, and the control bar sits under the window's edge.
   The window is as tall as its notes and transcript, up to 640px. The 100px of space at the bottom
   is where the text fades out, above the bar: when everything fits, nothing fades, and when the
   window is full, the last lines fade out before the bar's top edge */
@media (max-width: 699px) {
    .notes-stage {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .mwin {
        position: relative;
        height: auto;
    }

    .mside {
        display: none;
    }

    .mmain {
        max-height: 640px;
        padding: 44px 16px 100px;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), transparent calc(100% - 52px));
        mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), transparent calc(100% - 52px));
    }

    .mhead {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .notes-bar {
        position: relative;
        top: auto;
        right: auto;
        width: calc(100% - 20px);
        margin: -44px 0 0 auto;
    }
}

/* On the narrowest phones (below 375px) the bar keeps "Notes saved · 24 min" whole: it takes the
   full width of the window and leaves out its fold arrow */
@media (max-width: 374px) {
    .notes-bar {
        width: 100%;
    }

    .notes-bar .qicon-flat {
        display: none;
    }
}

/* ---- (c) Privacy: the light "On this Mac" window, where the text goes, and the consent note ---- */
.pv-stage {
    display: flex;
    align-items: flex-start;
    gap: 42px;
    width: 1248px;
    max-width: 100%;
    margin: 44px auto 0;
}

.pv-flow {
    position: relative;
    flex: none;
    width: 906px;
    height: 420px;
}

/* A light Mac window with the grey title bar */
.lwin {
    overflow: clip;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 30px 56px -30px rgba(20, 20, 10, .34), 0 1px 2px rgba(20, 20, 10, .06);
}

.lwin-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border-bottom: 1px solid var(--rule-soft);
    background: #F7F7F3;
}

.lwin-dots {
    display: flex;
    gap: 8px;
}

.lwin-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #D2D2CB;
    background: #E3E3DD;
}

.lwin-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}

.pv-mac {
    position: absolute;
    left: 0;
    top: 30px;
    width: 500px;
    height: 360px;
}

.pv-files {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 44px;
    padding: 56px 20px 0;
}

.pv-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pv-file-a {
    width: 210px;
}

.pv-file-b {
    width: 170px;
}

.pv-file svg {
    filter: drop-shadow(0 4px 6px rgba(20, 20, 10, .12));
}

.pv-name {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 500;
}

.pv-name-struck {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.pv-sub {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
    white-space: nowrap;
    text-align: center;
}

/* The dashed lines out of the window, with their labels */
.pv-links {
    position: absolute;
    left: 496px;
    top: 30px;
    width: 160px;
    height: 360px;
}

.pv-links-wide {
    position: absolute;
    left: 0;
    top: 0;
}

.pv-links-down {
    display: none;
}

.pv-t {
    position: absolute;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-2);
    white-space: nowrap;
}

.pv-t-1 {
    left: 44px;
    top: 78px;
}

.pv-t-2 {
    left: 60px;
    top: 160px;
    color: var(--text);
}

.pv-t-3 {
    left: 44px;
    top: 250px;
}

/* The two white cards the text goes to */
.pv-cards {
    position: absolute;
    left: 656px;
    top: 0;
    width: 250px;
}

.pv-card {
    position: absolute;
    left: 0;
    width: 250px;
    padding: 16px 18px 18px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 20px 40px -26px rgba(20, 20, 10, .32), 0 1px 2px rgba(20, 20, 10, .06);
    text-align: left;
}

.pv-card-1 {
    top: 38px;
}

.pv-card-2 {
    top: 246px;
}

.pv-card-h {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pv-card-h span {
    font-size: 16px;
    font-weight: 600;
}

.pv-card p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
}

.pv-card .pv-p-keys {
    line-height: 1.6;
}

/* The consent facts, as one note on the desk, turned a little */
.pv-note {
    flex: none;
    width: 300px;
    padding: 20px 20px 18px;
    border: 1px solid var(--rule);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 30px 56px -30px rgba(20, 20, 10, .34), 0 1px 2px rgba(20, 20, 10, .06);
    transform: rotate(1.2deg);
    text-align: left;
}

.pv-note-in {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pv-fact {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.pv-fact svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.pv-fact > span:last-child {
    font-size: 14.5px;
    line-height: 1.45;
}

.pv-quote {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 29px;
    padding: 12px 13px;
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    background: #F7F7F3;
}

.pv-quote-t {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

.pv-reply {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
}

.pv-tag {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--rule-soft);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-2);
}

.pv-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 20px;
    flex-shrink: 0;
}

.pv-dot span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FF9F0A;
}

.pv-link {
    align-self: flex-start;
    margin-left: 29px;
    font-size: 13.5px;
    font-weight: 500;
    text-underline-offset: 3px;
}

/* Below 1280px the consent note moves under the window and the cards */
@media (max-width: 1279px) {
    .pv-stage {
        flex-direction: column;
        align-items: center;
        width: 906px;
        gap: 36px;
    }
}

/* Below 1000px everything stacks: the window, the lines running down, the cards, the note */
@media (max-width: 999px) {
    .pv-stage {
        width: 520px;
        gap: 40px;
    }

    .pv-flow {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
    }

    .pv-mac {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
    }

    .pv-files {
        gap: 28px;
        padding: 40px 16px 32px;
    }

    .pv-links {
        position: relative;
        left: auto;
        top: auto;
        width: 280px;
        height: 92px;
    }

    .pv-links-wide,
    .pv-t-3 {
        display: none;
    }

    .pv-links-down {
        display: block;
    }

    .pv-t-1 {
        left: 100px;
        top: 34px;
    }

    .pv-t-2 {
        left: 190px;
        top: 33px;
    }

    .pv-cards {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        width: 100%;
    }

    .pv-card {
        position: static;
        width: auto;
    }

    .pv-note {
        width: 100%;
        max-width: 420px;
    }
}

/* ---- (d) The rule, and (d2) the FAQ: light document windows ---- */
.doc-win {
    width: 880px;
    max-width: 100%;
    margin: 44px auto 0;
    box-shadow: 0 30px 60px -32px rgba(20, 20, 10, .34), 0 1px 2px rgba(20, 20, 10, .06);
}

/* Rules.pdf: a white page on a grey reader background */
.rule-desk {
    padding: 26px 40px 28px;
    background: #ECECE7;
}

.rule-page {
    padding: 34px 52px 30px;
    border-radius: 4px;
    background: var(--card);
    box-shadow: 0 1px 3px rgba(20, 20, 10, .12), 0 10px 26px -14px rgba(20, 20, 10, .22);
}

.rule-h {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.rule-p {
    margin: 14px 0 0;
    max-width: 680px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text);
}

.rule-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rule-soft);
}

.rule-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rule-item svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.rule-item span {
    font-size: 15.5px;
    line-height: 1.5;
}

.rule-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    font-size: 15px;
    font-weight: 500;
}

.rule-links a {
    text-underline-offset: 3px;
}

.rule-links span {
    color: var(--text-2);
}

/* FAQ.txt: the questions as rows that open, with a small key that shows plus or minus */
.faq-sub {
    max-width: 640px;
}

.faq-sub a {
    text-underline-offset: 3px;
}

.faq {
    padding: 4px 40px 28px;
}

.faq-gt {
    margin: 24px 0 8px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-2);
}

.faq-row {
    border-top: 1px solid var(--rule-soft);
}

.faq-row:last-child {
    border-bottom: 1px solid var(--rule-soft);
}

.faq-row summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
}

.faq-row summary::-webkit-details-marker {
    display: none;
}

.faq-row summary:focus-visible {
    outline-offset: 2px;
    border-radius: 6px;
}

.faq-mark {
    position: relative;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--card);
    box-shadow: inset 0 -2px 0 var(--rule-soft);
}

/* The two bars of the plus; the upright one turns flat when the row is open, making a minus.
   Each bar is a whole 2px, so it draws the same thickness on every row and every screen */
.faq-mark::before,
.faq-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 2px;
    margin: -2px 0 0 -5px;
    border-radius: 1px;
    background: var(--text);
    transition: transform 150ms ease-out;
}

.faq-mark::after {
    transform: rotate(90deg);
}

.faq-row[open] .faq-mark::after {
    transform: rotate(0deg);
}

.faq-row summary:hover .faq-mark {
    border-color: #C9C9C1;
    background: #F7F7F3;
}

.faq-a {
    padding: 0 42px 18px 0;
}

/* The FAQ is not on the canvas, so its questions and answers may wrap more evenly at every width:
   a question that needs two lines splits them evenly, and the last line of an answer keeps more
   than one word */
.faq-q {
    text-wrap: balance;
}

.faq-a p {
    text-wrap: pretty;
}

.faq-a p {
    margin: 0;
    max-width: 680px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-2);
}

.faq-a a {
    color: var(--text);
    text-underline-offset: 3px;
}

.faq kbd {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 4px 2px;
    border: 1px solid var(--rule);
    border-radius: 5px;
    background: var(--card);
    box-shadow: inset 0 -2px 0 var(--rule-soft);
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text);
    vertical-align: 1px;
}

/* ---- (e) Pricing: three white cards with a thin bar for the size of each pack ---- */
.offer {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-top: 22px;
    padding: 0 16px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--card);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
}

.packs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 1136px;
    max-width: 100%;
    margin: 48px auto 0;
}

.pack {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--rule);
    border-radius: 20px;
    background: var(--card);
    box-shadow: 0 24px 50px -32px rgba(20, 20, 10, .28);
}

.pack-best {
    border-color: #C9C9C1;
    box-shadow: 0 30px 60px -30px rgba(20, 20, 10, .34);
}

.pack-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
}

.pack-name {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pack-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--text);
    color: #F3F3F1;
    font-size: 12.5px;
    font-weight: 600;
}

.num {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 24px;
    font-family: var(--mono);
    font-size: 72px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.num strong {
    font-weight: 500;
}

/* The "calls" label beside the number; only the direct child, so the "~" inside the number keeps its size */
.num > span {
    font-family: var(--sans);
    font-size: 17px;
    letter-spacing: 0;
    color: var(--text-2);
}

/* The minutes actually bought and the call length behind the count, under the big number */
.num-sub {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-2);
}

.pack-size {
    height: 6px;
    margin-top: 22px;
    overflow: clip;
    border-radius: 999px;
    background: var(--rule-soft);
}

.pack-size-fill {
    height: 6px;
    border-radius: 999px;
    background: var(--text);
}

.pack-size-18 {
    width: 18%;
}

.pack-size-48 {
    width: 48%;
}

.pack-size-100 {
    width: 100%;
}

.pay {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 22px;
}

.pay-now {
    font-family: var(--mono);
    font-size: 30px;
    letter-spacing: -0.03em;
}

.pay-now strong {
    font-weight: 600;
}

.pay-was {
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text-2);
}

.pay-lbl {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
}

.pack-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
}

.pack-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.buy {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-top: 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.buy.plain {
    border: 1px solid var(--rule);
    background: var(--card);
    color: var(--text);
}

.buy.plain:hover {
    border-color: #C9C9C1;
}

.buy.ink,
.buy.ink:hover {
    background: var(--text);
    color: #F3F3F1;
}

.buy.ink:hover {
    background: #2C2E34;
}

.pack-note {
    margin: 28px 0 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-2);
    text-wrap: balance;
}

.pack-note a {
    color: var(--text-2);
    text-underline-offset: 3px;
}

/* From 900px to 999px the three cards are narrow, and "1000 minutes" would run into the Pro
   card's padding, so the big numbers are a little smaller there */
@media (min-width: 900px) and (max-width: 999px) {
    .num {
        font-size: 60px;
    }
}

/* Below 900px the three cards stack in one column */
@media (max-width: 899px) {
    .packs {
        grid-template-columns: minmax(0, 1fr);
        width: 440px;
    }
}

/* ---- (f) Closing: the light keys, the headline and the lime button ---- */
.sec-close {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 112px 16px 88px;
    color: var(--text);
}

.close-h {
    margin: 64px 0 0;
    font-size: clamp(40px, calc(24px + 3.9vw), 64px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text);
    text-align: center;
    text-wrap: balance;
}

.close-ctas {
    margin-top: 36px;
}

.close-cta,
.close-wl {
    height: 56px;
}

.close-note {
    margin: 20px 0 0;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-2);
    text-align: center;
    text-wrap: balance;
}

/* ---- Footer: only Qavio's own pages. Each link is 40px tall so it is easy to tap, and the
        padding is 10px less than the canvas's to keep the same height ---- */
.foot {
    position: relative;
    border-top: 1px solid var(--rule);
    background: var(--card);
}

.foot-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 64px 20px;
}

.foot-home {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    color: var(--text);
}

/* On hover the wordmark gets its underline and keeps its ink, as on the canvas */
.foot-home:hover {
    color: var(--text);
}

.foot-home span {
    font-size: 16px;
}

.foot-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 26px;
    font-size: 14px;
    font-weight: 500;
}

.foot-nav a {
    display: inline-flex;
    align-items: center;
    height: 40px;
}

/* On a tablet the footer's side padding shrinks */
@media (max-width: 1023px) {
    .foot-in {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* From 768px to 1099px the eight links do not fit on one row. Instead of one or two links left
   alone on a second row, they sit in two even rows of four, beside the wordmark */
@media (min-width: 768px) and (max-width: 1099px) {
    .foot-nav {
        display: grid;
        grid-template-columns: repeat(4, auto);
        justify-content: end;
    }
}

/* ---- Phone: 767px and less. The hero follows the phone canvas (A-Phone), and every other
        section stacks its parts in the canvas order ---- */
@media (max-width: 767px) {

    /* The desk: a finer dot grid and the phone canvas's light */
    body {
        background-size: 20px 20px;
        background-position: 10px 10px;
    }

    .desk-light {
        left: 0;
        width: 100%;
        height: 844px;
        margin-left: 0;
        background:
            radial-gradient(ellipse 360px 380px at 50% 600px, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, 0) 72%),
            radial-gradient(ellipse 380px 260px at 50% 190px, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 70%);
    }

    /* The top bar: the wordmark, Sign in and Download, each a 44px target */
    .bar {
        height: 52px;
        margin-bottom: -52px;
        padding: 0 6px 0 8px;
    }

    .bar-home {
        height: 44px;
        padding: 0 6px;
    }

    .bar-home::after {
        display: none;
    }

    .bar-home svg {
        width: 22px;
        height: 22px;
    }

    .bar-home span {
        font-size: 16px;
    }

    .bar-nav {
        gap: 0;
        font-size: 14px;
    }

    .bar-signin {
        display: flex;
        align-items: center;
        height: 44px;
        padding: 0 10px;
    }

    .bar-signin::after {
        display: none;
    }

    .nb {
        margin-left: 0;
        padding: 0 4px;
    }

    .nb-face {
        height: 34px;
        padding: 0 12px 0 10px;
        border-radius: 9px;
        font-size: 13.5px;
    }

    .navl:focus-visible,
    .nb:focus-visible .nb-face,
    .cta:focus-visible {
        outline-offset: 2px;
    }

    /* The hero at the phone canvas's sizes. --u is 1px on a 390px screen and less on a smaller
       one, so the headline and its keys always fit the width */
    .hero {
        --u: min(1px, calc((100vw - 32px) / 358));
        padding: 76px 16px 26px;
    }

    .sticker {
        display: none;
    }

    .hero-h1 {
        font-size: calc(44 * var(--u));
        line-height: 1.02;
    }

    .hero-row {
        gap: calc(14 * var(--u));
        height: calc(74 * var(--u));
    }

    .keys {
        gap: calc(8 * var(--u));
    }

    .keys:focus-visible {
        outline-offset: 6px;
        border-radius: 20px;
    }

    .stk {
        padding: calc(5 * var(--u));
        border-radius: calc(18 * var(--u));
        box-shadow: 0 0 0 1px #D9D9D2, 0 1px 1px rgba(20, 20, 10, .10), 0 calc(6 * var(--u)) calc(10 * var(--u)) calc(-6 * var(--u)) rgba(20, 20, 10, .30);
        transition: none;
    }

    .keys:hover .stk {
        translate: none;
    }

    .stk-2 {
        transform: translateY(calc(3 * var(--u))) rotate(3.5deg);
    }

    .stk-3 {
        transform: translateY(calc(-1 * var(--u))) rotate(-2deg);
    }

    .kc {
        width: calc(54 * var(--u));
        height: calc(54 * var(--u));
        padding-bottom: calc(6 * var(--u));
        border-radius: calc(13 * var(--u));
        box-shadow: inset 0 calc(-6 * var(--u)) 0 #C9C9C1;
    }

    .kc svg {
        width: calc(26 * var(--u));
        height: calc(26 * var(--u));
    }

    .stk-1 svg {
        stroke-width: 2.4;
    }

    .stk-2 svg {
        stroke-width: 2.2;
    }

    .kc-a {
        font-size: calc(29 * var(--u));
        box-shadow: inset 0 calc(-6 * var(--u)) 0 var(--lime-strong), 0 0 calc(44 * var(--u)) calc(8 * var(--u)) rgba(130, 170, 20, .22);
    }

    .keys:active .kc {
        transform: translateY(calc(4 * var(--u)));
        box-shadow: inset 0 calc(-2 * var(--u)) 0 #C9C9C1;
    }

    .keys:active .kc-a {
        box-shadow: inset 0 calc(-2 * var(--u)) 0 var(--lime-strong), 0 0 calc(44 * var(--u)) calc(8 * var(--u)) rgba(130, 170, 20, .22);
    }

    .hero-sub {
        margin-top: 14px;
        font-size: 17px;
        letter-spacing: 0;
    }

    /* On a phone the two buttons stack, each the full width */
    .ctas {
        flex-direction: column;
        align-self: stretch;
        gap: 10px;
        width: auto;
    }

    .hero-cta,
    .close-cta,
    .cta-win {
        display: flex;
        width: 100%;
        max-width: 480px;
        padding: 0 0 3px;
    }

    .hero-ctas {
        margin-top: 18px;
    }

    .hero-lines {
        margin-top: 12px;
        font-size: 12px;
    }

    /* The window is reflowed to the width and cut by the screen edge, with a fade */
    .hero-crop {
        align-self: stretch;
        width: auto;
        max-width: none;
        height: 414px;
        margin: 21px -16px 0;
        padding: 0 16px;
        overflow: clip;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
    }

    .hero-win {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }

    .hero-shadow {
        display: none;
    }

    /* Copy shows only its icon at this width */
    .hero-win .qcopy {
        justify-content: center;
        width: 28px;
        padding: 0;
    }

    /* Sections: less space above, and the lines under the headlines a little smaller */
    .sec {
        padding-top: 72px;
    }

    .sub {
        font-size: 17px;
    }

    /* Text in the window pictures is at least 12px on a phone */
    .sec .qtag,
    .sec .qcopy,
    .qmode-d,
    .qdesc-note,
    .qconsent-t,
    .qnotice,
    .sec .qcode-h,
    .fill-tag,
    .q-try,
    .mmeta,
    .mh,
    .mt,
    .mtag,
    .mbtn,
    .pv-t,
    .pv-tag,
    .lk,
    .faq kbd {
        font-size: 12px;
    }

    /* The "filler" tag starts where its word starts, so a word at the start of a line never pushes
       its tag out past the text */
    .fill-tag {
        left: 0;
        top: -21px;
        height: 20px;
        transform: none;
    }

    /* The key legends in the question section, at least 12px like the rest of the phone text */
    .bkeys.sm .bkc-leg {
        font-size: 12px;
    }

    /* The large keys are drawn at 80% here, so their legends are 15px, which shows as 12px */
    .bkeys.md .bkc-leg {
        font-size: 15px;
    }

    .qdesc {
        height: auto;
        min-height: 68px;
    }

    .qdesc-note {
        white-space: normal;
    }

    /* On a phone the text in the pictures below the hero and on the rule page wraps more often, so
       the last line of each block keeps more than one word. The hero keeps the phone canvas's line
       breaks, and wider screens keep the desktop canvas's */
    .rule-p,
    .rule-item span,
    .pv-card p,
    .pv-fact > span:last-child,
    .pv-quote-t,
    .qconsent-t,
    .sec .qans p,
    .sec .qans li,
    .q-ans p,
    .q-ans li,
    .q-heard-text,
    .mtext,
    .mitem {
        text-wrap: pretty;
    }

    /* Long code lines wrap instead of running off the card */
    .sec .qcode-b,
    .q-code-b {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .q-code-b {
        font-size: 13px;
    }

    .q-heard-card {
        padding: 18px 18px 20px;
    }

    /* More room between the lines, so a "filler" tag never touches the line above */
    .q-heard-text {
        line-height: 2.6;
    }

    .q-question {
        padding: 16px 18px;
    }

    .q-answer {
        padding: 16px 18px 18px;
    }

    /* Privacy: the two files share the window's width */
    .pv-files {
        gap: 12px;
        padding: 32px 12px 28px;
    }

    .pv-file-a,
    .pv-file-b {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .pv-file svg {
        width: 88px;
        height: 88px;
    }

    .pv-sub {
        white-space: normal;
    }

    .pv-sub > span {
        white-space: nowrap;
    }

    /* The rule and the FAQ windows: less padding inside */
    .rule-desk {
        padding: 16px 12px 16px;
    }

    .rule-page {
        padding: 24px 20px 22px;
    }

    .rule-h {
        font-size: 24px;
    }

    .rule-p {
        font-size: 17px;
    }

    .faq {
        padding: 0 16px 16px;
    }

    .faq-row summary {
        font-size: 16px;
    }

    .faq-a {
        padding-right: 0;
    }

    /* Pricing: the offer line wraps into two even lines in a rounded box, and the big numbers are
       a little smaller */
    .offer {
        padding: 7px 16px;
        border-radius: 12px;
        line-height: 1.45;
        text-wrap: balance;
    }

    .pack {
        padding: 24px;
    }

    .num {
        font-size: 64px;
    }

    /* Closing: the large keys are drawn smaller, so the three fit the width */
    .sec-close {
        padding: 88px 16px 72px;
    }

    .bkeys.md {
        zoom: .8;
    }

    .close-h {
        margin-top: 52px;
    }

    /* Footer: the wordmark above the links, which wrap */
    .foot-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 16px 16px 20px;
    }

    .foot-nav {
        justify-content: flex-start;
        gap: 0 20px;
    }
}

/* Below 560px the two privacy cards stack */
@media (max-width: 559px) {
    .pv-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* On the smallest phones the large keys shrink once more, and the hero window's bar leaves out
   its clock and the meeting mute, so Answer and Stop still fit */
@media (max-width: 380px) {
    .bkeys.md {
        zoom: .64;
    }

    /* At 64% the legends need 18.75px to show as 12px */
    .bkeys.md .bkc-leg {
        font-size: 18.75px;
    }
}

/* Below 480px the two links under the rule stack, one per line, and the dot between them is left
   out, so it is never alone at the end of a line */
@media (max-width: 479px) {
    .rule-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-top: 12px;
    }

    .rule-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .rule-links span {
        display: none;
    }
}

@media (max-width: 384px) {
    .hero-win .qtime,
    .hero-win .qicon-meet {
        display: none;
    }
}

/* ---- Show and hide by screen size: d-only and p-hide are left out on a phone, p-only is
        shown only on a phone ---- */
@media (min-width: 768px) {
    .p-only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .d-only,
    .p-hide {
        display: none !important;
    }
}

/* ---- Reduced motion: no animation or transition anywhere, and the keys do not move ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .keys:active .kc {
        transform: none !important;
    }

    .keys:hover .stk {
        translate: none;
    }
}

/* On paper the call apps are always in their places, even if the page was printed before their
   section came into view */
@media print {
    .qapps.armed .qem,
    .qapps.armed .qhub,
    .qapps.armed .qring {
        transform: none;
        opacity: 1;
    }
}

/* Smooth scrolling to a section, only for people who have not asked for less motion */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}