/* fluah.com
   Colours and type from the Fluah logo kit (13-guidelines): Electric, Sky, Mist, Midnight, Paper; Sora.
   The page itself is white (--ground); Paper, next to a cream on the Tell List, stays for type and buttons on the bands.
   One family in two weights: 600 for headings, buttons and terms, 400 for everything else. Every size is set
   at letter-spacing 0, and headings wrap where the words fall.
   Type steps: 14, 15, 16, 18, 22, 24, 28, 40, 60 and 76. Space steps: 8, 16, 24, 32, 48, 64, 96, 128. */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
  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: "Sora";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/sora-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* the kit's five */
  --electric: #1F3FD1;
  --sky: #6F8CF0;
  --mist: #C9D5FA;
  --midnight: #0D1440;
  --paper: #F7F4EC;
  /* derived */
  --ground: #FFFFFF;                   /* the page */
  --electric-deep: #1832A8;
  --ink: var(--midnight);
  --ink-soft: #464A6B;                 /* on white, 8.9:1 */
  --grey: #6B6F78;                     /* the other app's dots on white, 5.0:1 */
  --grey-light: #8A8D96;               /* and its range, 3.3:1 */
  --grey-text: #5F636E;                /* on white, 6.1:1 */
  --rule: rgba(13, 20, 64, 0.12);
  --rule-strong: rgba(13, 20, 64, 0.24);
  --rule-dark: rgba(201, 213, 250, 0.18);
  --app: #0B0E14;                      /* Fluah's window colour, behind a picture while it loads */

  --font: "Sora", "Segoe UI", system-ui, sans-serif;
  --t-meta: 14px;
  --t-small: 16px;
  --t-body: 18px;
  --t-lead: 22px;
  --t-3: 24px;
  --t-2: clamp(30px, 3vw, 40px);
  --t-big: clamp(40px, 4.2vw, 60px);
  --t-hero: clamp(44px, 5.4vw, 76px);
  --t-1: clamp(48px, 5.6vw, 72px);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --sec: clamp(64px, 7vw, 112px);
  --max: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --gap: 24px;
  --r-control: 8px;
  --r-shot: 12px;
  --r-tile: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: 0; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--electric); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--electric-deep); }
:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .band :focus-visible { outline-color: var(--paper); }
::selection { background: var(--mist); color: var(--midnight); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--midnight); color: var(--paper); padding: 10px 14px; border-radius: var(--r-control); }
.skip:focus { top: 12px; color: var(--paper); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ type */
.t1 { font-size: var(--t-1); line-height: 1; letter-spacing: 0; color: var(--ink); }
.t2 { font-size: var(--t-2); line-height: 1.1; letter-spacing: 0; color: var(--ink); max-width: 20ch; }
.t2--big { font-size: var(--t-big); line-height: 1.02; letter-spacing: 0; max-width: 15ch; }
.t3 { font-size: var(--t-3); line-height: 1.22; color: var(--ink); }
.t4 { font-size: var(--t-lead); line-height: 1.3; color: var(--ink); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); }
.body { font-size: var(--t-body); line-height: 1.65; color: var(--ink-soft); max-width: 46ch; }
.small { font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); }
.meta { font-size: var(--t-meta); line-height: 1.5; color: var(--ink-soft); }
.dark { background: var(--midnight); color: var(--paper); }
.dark .t1, .dark .t2, .dark .t3, .dark .t4, .dark .lead { color: var(--paper); }
.dark .body, .dark .small, .dark .meta { color: var(--mist); }

/* ------------------------------------------------------------ header */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--ground); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.site-header__in { position: relative; display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--s3); }
.brand { display: block; flex: 0 0 auto; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--s4); }
.nav__links { display: flex; align-items: center; gap: var(--s4); list-style: none; }
.nav__links a { color: var(--ink); text-decoration: none; font-size: 15px; }
.nav__links a:hover { color: var(--electric); }
.nav__links a[aria-current="page"] { color: var(--electric); font-weight: 600; }
.nav__menu { display: none; }

/* ------------------------------------------------------------ buttons and quiet links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--s3);
  border-radius: var(--r-control); border: 0; font: 600 16px/1 var(--font); letter-spacing: 0;
  text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--electric { background: var(--electric); color: var(--paper); }
.btn--electric:hover { background: var(--electric-deep); color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--electric); }
.btn--paper:hover { background: #ffffff; color: var(--electric-deep); }
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.btn--outline:hover { color: var(--electric); box-shadow: inset 0 0 0 1px var(--electric); }
.btn--small { min-height: 40px; padding: 0 var(--s2); font-size: 15px; }
.btn--electric[aria-current="page"] { background: var(--electric-deep); }
.link { font-weight: 600; font-size: var(--t-small); text-decoration: underline; text-decoration-color: rgba(31, 63, 209, 0.35); }
.link:hover { text-decoration-color: currentColor; }
.link--paper { color: var(--paper); text-decoration-color: rgba(247, 244, 236, 0.45); }
.link--paper:hover { color: #ffffff; text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }

/* ------------------------------------------------------------ pictures of the app */
.shot { position: relative; border-radius: var(--r-shot); overflow: hidden; background: var(--app); box-shadow: 0 0 0 1px rgba(13, 20, 64, 0.22), 0 28px 56px -32px rgba(13, 20, 64, 0.55); }
.dark .shot { box-shadow: 0 0 0 1px var(--rule-dark), 0 40px 80px -40px rgba(0, 0, 0, 0.7); }
.shot picture { display: block; }
.shot img { width: 100%; }
.caption { margin-top: var(--s2); font-size: var(--t-meta); line-height: 1.5; color: var(--ink-soft); max-width: 66ch; }
.dark .caption { color: var(--mist); }

/* ------------------------------------------------------------ sections */
.sec { padding-block: var(--sec); }
.sec + .sec { padding-top: 0; }
.head { row-gap: var(--s3); align-items: end; }
.head .t2 { grid-column: 1 / span 6; }
.head .body { grid-column: 8 / span 5; }
.wide { margin-top: var(--s6); }
.head--stack .t2 { grid-column: 1 / span 7; }
.head--stack .body { grid-column: 1 / span 6; }
.head--center { text-align: center; }
.head--center .t2 { max-width: 20ch; margin-inline: auto; }
.head--center .body { max-width: 52ch; margin: var(--s3) auto 0; }

/* a heading and its text beside a picture */
.pair { row-gap: var(--s5); align-items: center; }
.pair__text { grid-column: 1 / span 5; }
.pair__media { grid-column: 6 / span 7; }
.pair__text .body { margin-top: var(--s3); }
.pair--flip .pair__media { grid-column: 1 / span 7; grid-row: 1; }
.pair--flip .pair__text { grid-column: 9 / span 4; grid-row: 1; }
.pair--follow { margin-top: var(--s7); }
.pair__text .spec { margin-top: var(--s4); }
.counts .spec__row { grid-template-columns: 96px 1fr; align-items: baseline; }
.spec.counts dt { font-size: var(--t-3); line-height: 1.1; color: var(--electric); }
.dark .spec.counts dt { color: var(--sky); }

/* ------------------------------------------------------------ home: hero */
.hero { padding-top: clamp(48px, 6.5vw, 88px); }
.hero__top { row-gap: var(--s3); align-items: end; }
.hero__title { grid-column: 1 / span 7; grid-row: 1; font-size: var(--t-hero); line-height: 1; letter-spacing: 0; color: var(--ink); }
/* the headline's drawing type, on a line of its own: every word in one grid cell, so the headline keeps its size as
   they turn over; the old word rises out as the new one rises in, the two crossing in a soft blur on one easing */
/* the headline's drawing type, on a line of its own: every word in one grid cell, so the headline keeps its size as
   they turn over; the old word rises out as the new one rises in, the two crossing in a soft blur on one easing */
.rotor { display: grid; }
.rotor__word { grid-area: 1 / 1; opacity: 0; transform: translateY(0.35em); filter: blur(6px); transition-property: opacity, transform, filter; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.rotor__word.is-on { opacity: 1; transform: none; filter: none; transition-duration: 0.7s; transition-delay: 0.1s; }
.rotor__word.is-off { transform: translateY(-0.35em); transition-duration: 0.5s; }
.hero__aside { grid-column: 8 / span 5; grid-row: 1; padding-bottom: 6px; }
.hero__aside .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); max-width: 34ch; }
.hero__aside .actions { margin-top: var(--s4); }
/* a wave of dots across the bottom of the hero, faded out at both ends */
.hero__wave { grid-column: 1 / -1; grid-row: 2; position: relative; height: 120px; margin-top: var(--s4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hero__wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__stage { position: relative; margin-top: var(--s4); }
.hero__stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 42%; background: var(--midnight); }
.hero__stage .wrap { position: relative; }
.hero__stage .shot { box-shadow: 0 0 0 1px rgba(13, 20, 64, 0.22), 0 32px 64px -32px rgba(13, 20, 64, 0.4); }
.hero__caption { margin-top: 0; padding-top: var(--s3); }

/* ------------------------------------------------------------ the launch, dot by dot */
.speed { padding-bottom: var(--sec); }
.timeline { margin-top: var(--s6); position: relative; }
.timeline__dots svg { width: 100%; height: auto; }
.timeline__dots .narrow { display: none; }
.timeline circle.on { fill: var(--electric); }
.timeline circle.mark { fill: var(--midnight); }
.timeline circle.off { fill: var(--mist); }
.dark .timeline circle.on { fill: var(--sky); }
.dark .timeline circle.mark { fill: var(--paper); }
.dark .timeline circle.off { fill: var(--mist); fill-opacity: 0.35; }
.timeline__marks { list-style: none; position: relative; height: 64px; margin-top: var(--s2); }
.timeline circle { transform-box: fill-box; transform-origin: center; transition: transform 0.2s ease-out, fill 0.12s ease-out, fill-opacity 0.12s ease-out; }
.timeline circle.hit { transform: scale(2.1); }
/* home: the launch played in real time; dots and marks wait dim until their millisecond, the big figure counts up */
.timeline.is-wait circle:not(.lit):not(.off) { fill: var(--mist); fill-opacity: 0.18; }
.timeline__marks li { transition: opacity 0.2s ease-out; }
.timeline.is-wait .timeline__marks li:not(.lit) { opacity: 0.3; }
.timeline__marks li { position: absolute; left: calc(var(--at) - 0.5px); top: 0; padding-left: 14px; border-left: 1px solid var(--rule-strong); font-size: var(--t-meta); line-height: 1.4; color: var(--ink-soft); white-space: nowrap; }
.timeline__marks li b { display: block; font-size: var(--t-lead); line-height: 1.2; font-weight: 600; color: var(--ink); }
.dark .timeline__marks li { color: var(--mist); border-color: var(--rule-dark); }
.dark .timeline__marks li b { color: var(--paper); }
/* the total: its rule drops to the dot it stands for */
.timeline__total { width: max-content; max-width: 100%; margin: 0 calc(100% - var(--at) - 0.5px) 0 auto; padding: 0 14px 18px 0; border-right: 1px solid var(--rule-strong); text-align: right; }
.timeline__total b { display: block; font-size: clamp(72px, 10vw, 152px); line-height: 0.92; letter-spacing: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--electric); }
.timeline__total span { display: block; margin-top: var(--s2); font-size: var(--t-small); line-height: 1.4; color: var(--ink-soft); }
.dark .timeline__total { border-color: var(--rule-dark); }
.dark .timeline__total b { color: var(--sky); }
.dark .timeline__total span { color: var(--mist); }
.group .timeline__total b { font-size: clamp(64px, 7.5vw, 112px); }
.timeline--lead { margin-top: var(--s8); }
.timeline__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.timeline__head { flex: 0 1 560px; padding-bottom: var(--s5); }
.timeline__head .body { margin-top: var(--s3); }
.timeline__top .timeline__total { flex: none; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--gap); margin-top: var(--s7); }
.stats div { min-width: 0; padding-top: var(--s3); border-top: 1px solid var(--rule-dark); }
.stats dt { font-size: var(--t-3); line-height: 1.1; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--sky); }
.stats dd { margin-top: var(--s2); font-size: var(--t-small); line-height: 1.55; color: var(--mist); max-width: 28ch; }
.speed__note { margin-top: var(--s5); max-width: 70ch; }

/* home: the same launch in another PDF app, the timeline copied below Fluah's in grey. Both lines share one time scale, so
   Fluah's stops short and the big figures stand at the right instead of over their dots */
.timeline--lead .timeline__total, .timeline--other .timeline__total { margin: 0 0 0 auto; padding-right: 0; border-right: 0; }
.timeline--other { --grey: #85888F; --grey-light: #B4B6BC; margin-top: var(--s7); }
.dark .timeline--other .t2, .dark .timeline--other .timeline__total b, .dark .timeline--other .timeline__total span, .dark .timeline--other .timeline__marks li { color: var(--grey); }
.dark .timeline--other .timeline__marks li b { color: var(--grey-light); }
.dark .timeline--other circle.on { fill: var(--grey); }
.dark .timeline--other circle.mark { fill: var(--grey-light); }
.dark .timeline--other circle.off { fill: var(--grey); fill-opacity: 0.35; }
.timeline--other.is-wait circle:not(.lit):not(.off) { fill: var(--grey); fill-opacity: 0.25; }

/* ------------------------------------------------------------ home: compare, its picture as wide as the window */
.compare, .collab { overflow: hidden; }
.full { margin-top: var(--s6); }
.full__shot { background: var(--app); box-shadow: 0 0 0 1px rgba(13, 20, 64, 0.22); }
.full figcaption { padding-top: var(--s2); }
.full__shot picture { display: block; }
.full__shot img { width: 100%; }
.full .caption { display: block; }

/* ------------------------------------------------------------ home: the toolbar layouts, one at a time behind a switch */
.layouts .pair__text .seg { margin-top: var(--s5); }
.layouts__shots { display: grid; gap: var(--s5); justify-items: end; }
.layouts__shots > figure { min-width: 0; width: 100%; max-width: 640px; }
.seg { display: none; }
.js .seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(13, 20, 64, 0.05); box-shadow: inset 0 0 0 1px var(--rule); }
.seg button { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-soft); font: 600 15px/1 var(--font); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.seg button:hover { color: var(--ink); }
.seg button:focus-visible { outline-offset: 1px; }
.seg button[aria-selected="true"] { background: var(--midnight); color: var(--paper); }
.js .layouts__shots > figure { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
.js .layouts__shots > figure.is-on { visibility: visible; opacity: 1; transition: opacity 0.25s ease; }

/* ------------------------------------------------------------ the markup tools, set out like a drawing schedule */
.schedule { margin-top: var(--s7); }
.schedule h3 { font-size: 15px; font-weight: 600; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--rule-strong); }
.schedule ul { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap); }
.schedule li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.3; color: var(--ink); min-width: 0; }
.schedule li svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--electric); }
.schedule li span { min-width: 0; }

/* ------------------------------------------------------------ lists of facts with rules */
.spec { border-top: 1px solid var(--rule-strong); }
.spec__row { display: grid; grid-template-columns: minmax(130px, 0.4fr) 1fr; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.spec dt { font-size: var(--t-small); font-weight: 600; line-height: 1.5; color: var(--ink); }
.spec dd { font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }
.dark .spec { border-top-color: var(--rule-dark); }
.dark .spec__row { border-bottom-color: var(--rule-dark); }
.dark .spec dt { color: var(--paper); }
.dark .spec dd { color: var(--mist); }

/* a dark section keeps its top padding when it follows another section, and gives the next one its own back */
.sec + .sec.dark, .sec.dark + .sec { padding-top: var(--sec); }

/* ------------------------------------------------------------ home: what File Explorer's preview pane shows */
.files .pair--flip .pair__media { grid-column: 1 / span 6; }
.files .pair--flip .pair__text { grid-column: 8 / span 5; }
/* the formats the pane shows, by name only, set like file names */
.formats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s7); padding: var(--s4) 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); list-style: none; }
.formats li { font-size: var(--t-2); line-height: 1.1; font-weight: 600; color: var(--electric); }
.files__thumbs { margin-top: var(--s2); max-width: none; }
.doc .formats { gap: var(--s1) var(--s2); margin-top: var(--s4); padding: var(--s3) 0; }
.doc .formats li { font-size: var(--t-3); }

/* the preview's speed in the launch's dots, 0 to 600 ms: 10 ms a dot, 20 ms on phones, both rows on one scale */
.race { margin-top: var(--s7); }
.race__title { padding-bottom: 12px; border-bottom: 1px solid var(--rule-strong); font-size: var(--t-small); line-height: 1.4; font-weight: 600; color: var(--ink); }
.race__row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 176px; column-gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.race__who { font-size: var(--t-small); line-height: 1.3; font-weight: 600; color: var(--ink); }
.race__ms { font-size: var(--t-lead); line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--electric); text-align: right; white-space: nowrap; }
.race__dots svg { width: 100%; height: auto; }
.race__dots .narrow { display: none; }
.race circle.on { fill: var(--electric); }
.race circle.span { fill: var(--sky); }
.race circle.off { fill: var(--mist); }
.race__row--other .race__who, .race__row--other .race__ms { color: var(--grey-text); }
.race__row--other circle.on { fill: var(--grey); }
.race__row--other circle.span { fill: var(--grey-light); }
.group .race { margin-top: var(--s5); }

/* features as symbols: an icon, its name and a few words, in ruled columns (Fluah's own icons where the app has one) */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; column-gap: var(--s5); margin-top: var(--s4); list-style: none; }
.feats li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s2); align-items: start; padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.feats svg { width: 24px; height: 24px; margin-top: 1px; color: var(--electric); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.feats strong { display: block; font-size: var(--t-small); line-height: 1.5; font-weight: 600; color: var(--ink); }
.feats span { display: block; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.twin .feats, .pair__text .feats { grid-template-columns: minmax(0, 1fr); }
.pair__text .feats { margin-top: var(--s4); }

/* the two launch times carry the note's asterisk, outside the figure's own text so the count-up keeps it */
.timeline--lead .timeline__total b::after, .timeline--other .timeline__total b::after { content: "*"; margin-left: 0.04em; font-size: 0.4em; line-height: 1; vertical-align: top; }

/* ------------------------------------------------------------ home: signing, passwords and redaction, as symbols */
.marks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); margin-top: var(--s6); list-style: none; }
.marks li { position: relative; padding-top: var(--s4); border-top: 1px solid var(--rule-dark); outline-offset: 6px; transition: border-color 0.2s ease; }
.marks svg { width: 56px; height: 56px; color: var(--sky); }
.marks span { display: block; margin-top: var(--s3); font-size: var(--t-lead); line-height: 1.3; font-weight: 600; color: var(--paper); }
.marks p { margin-top: var(--s1); font-size: var(--t-small); line-height: 1.55; color: var(--mist); max-width: 30ch; }
/* with a mouse on a wide screen, each one's sentence opens below it on hover or keyboard focus, over the section's own
   bottom space so nothing below moves; touch screens and narrow ones show every sentence */
@media (hover: hover) and (min-width: 1081px) {
  .secure.sec { padding-bottom: max(var(--sec), 136px); }
  .marks p { position: absolute; left: 0; right: 0; top: 100%; margin-top: 0; padding-top: var(--s2); opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.25s ease, clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
  .marks li:hover, .marks li:focus-visible { border-top-color: var(--sky); }
  .marks li:hover p, .marks li:focus-visible p { opacity: 1; clip-path: inset(0 0 0 0); transform: none; pointer-events: auto; }
}

/* ------------------------------------------------------------ home: three tiles, their pictures to the edge */
.tiles { margin-top: var(--s5); gap: var(--gap); }
.tile { position: relative; display: flex; flex-direction: column; background: rgba(13, 20, 64, 0.04); border-radius: var(--r-tile); overflow: hidden; }
.tile--dark { background: var(--midnight); }
.tile--dark .t4 { color: var(--paper); }
.tile--dark .tile__text p { color: var(--mist); }
.tile--dark .tile__pic { box-shadow: 0 0 0 1px var(--rule-dark); }
.tile--stamps { grid-column: 1 / span 7; }
.tile--layers { grid-column: 8 / span 5; }
.tile--band { grid-column: 1 / -1; flex-direction: row; }
.tile__text { padding: var(--s4) var(--s4) var(--s3); }
.tile__text p { margin-top: var(--s1); font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); max-width: 40ch; }
.tile__pic { position: relative; margin-top: auto; margin-left: var(--s4); overflow: hidden; border-top-left-radius: var(--r-shot); background: var(--app); box-shadow: 0 0 0 1px rgba(13, 20, 64, 0.22); }
.tile__pic picture { display: contents; }
.tile__pic img { width: 100%; height: auto; }
.tile--band .tile__text { flex: 0 0 34%; align-self: center; padding: var(--s5) var(--s4); }
.tile--band .tile__pic { flex: 0 1 818px; margin: var(--s4) 0 0 auto; }
.tile--band .tile__pic img { object-position: 0 0; }

/* ------------------------------------------------------------ the download band */
.band { position: relative; background: var(--electric); color: var(--paper); overflow: hidden; }
.band__in { position: relative; z-index: 1; padding-block: clamp(80px, 10vw, 128px); }
.band__text { grid-column: 1 / span 6; }
.band__text .t1 { color: var(--paper); }
.band__text p { margin-top: var(--s3); font-size: var(--t-body); line-height: 1.6; color: var(--paper); max-width: 40ch; }
.band__text .actions { margin-top: var(--s4); }
.band__art { position: absolute; z-index: 0; top: 0; right: 0; width: 44%; height: 100%; object-fit: cover; object-position: 0% 50%; }

/* ------------------------------------------------------------ footer: links over hills drawn in Fluah dots */
.site-footer { padding-top: var(--s7); background: var(--ground); overflow: hidden; }
main:not(:has(> .band:last-child)) + .site-footer { border-top: 1px solid var(--rule); }
.footer__top { row-gap: var(--s5); }
.footer__brand { grid-column: 1 / span 5; }
.footer__brand img { height: 36px; width: auto; }
.footer__brand p { margin-top: var(--s3); font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); max-width: 32ch; }
.footer__col { grid-column: span 2; }
.footer__col:first-of-type { grid-column: 7 / span 2; }
.footer__col h2 { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.footer__col ul { list-style: none; margin-top: var(--s2); display: grid; gap: 4px; }
.footer__col a { display: inline-block; padding: 6px 0; font-size: 15px; line-height: 1.4; color: var(--ink-soft); text-decoration: none; }
.footer__col a:hover { color: var(--electric); text-decoration: underline; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s1) var(--s3); margin-top: var(--s6); }
.footer__maker { display: grid; gap: 12px; }
.footer__maker a { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--ink); text-decoration: none; }
.footer__maker a:hover { color: var(--electric); }
.footer__maker img { width: 28px; height: 28px; border-radius: 7px; }
.footer__base p { font-size: var(--t-meta); line-height: 1.5; color: var(--ink-soft); }
.footer__land { position: relative; height: clamp(88px, 8vw, 128px); margin-top: var(--s4); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%); mask-image: linear-gradient(to bottom, transparent, #000 40%); }
.footer__land canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ------------------------------------------------------------ inner pages */
.page-head { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 72px); }
.page-head__grid { row-gap: var(--s3); align-items: end; }
.page-head__grid .t1 { grid-column: 1 / span 6; }
.page-head__grid .lead { grid-column: 7 / span 6; max-width: 34ch; padding-bottom: 6px; }
.page-head--doc { padding-bottom: var(--s7); }
.page-head--doc .lead { grid-column: 9 / span 4; }

/* features: contents beside the groups */
.doc { padding-bottom: var(--sec); }
.toc { grid-column: 1 / span 3; }
.toc__in { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.toc ol { list-style: none; border-left: 1px solid var(--rule-strong); }
.toc a { display: block; padding: 7px 0 7px 18px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; font-size: 15px; }
.toc a:hover { color: var(--electric); }
.toc a.is-current { color: var(--electric); border-left-color: var(--electric); font-weight: 600; }
.doc__body { grid-column: 4 / span 9; }
.group + .group { margin-top: clamp(72px, 8vw, 104px); }
.group--dark { padding: var(--s5); border-radius: var(--r-tile); }
.dark .group__head p { color: var(--mist); }
.group__head { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s2); align-items: end; }
.group__head h2 { grid-column: 1 / span 5; font-size: 28px; line-height: 1.2; letter-spacing: 0; }
.group__head p { grid-column: 6 / span 4; font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); }
.group .shot, .group .timeline { margin-top: var(--s4); }
.group .spec { margin-top: var(--s4); }
.doc .spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); border-top: 0; }
.doc .spec__row { display: block; padding: var(--s2) 0; border-top: 1px solid var(--rule); border-bottom: 0; }
.doc .spec dd { margin-top: 2px; }
.doc .dark .spec__row { border-top-color: var(--rule-dark); }
.doc .twin .spec { grid-template-columns: 1fr; align-content: start; }
.group--dark .timeline { margin-top: 0; }
.group--dark .timeline__top .group__head { display: block; flex: 0 1 440px; padding-bottom: var(--s4); }
.group--dark .timeline__top .group__head p { margin-top: var(--s2); }
.more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
.group .more { margin-top: var(--s1); }
.dark .more p { color: var(--mist); border-bottom-color: var(--rule-dark); }
.dark .more strong { color: var(--paper); }
.more p { padding: 10px 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }
.more strong { display: block; font-weight: 600; color: var(--ink); }
.twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--s5); }
.twin > section { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.twin .shot { align-self: start; }
.twin .shot { width: 100%; max-width: 437px; }
.twin .group__head, .triple .group__head { grid-template-columns: 1fr; align-content: start; align-items: start; }
.twin .group__head h2, .twin .group__head p, .triple .group__head h2, .triple .group__head p { grid-column: 1 / -1; }
.twin .spec__row, .triple .spec__row { grid-template-columns: 1fr; gap: 2px; }
.triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s6); }

/* download */
.dl-head { padding-bottom: var(--s5); }
.dl-head__text { grid-column: 1 / span 8; }
.dl-head .lead { margin-top: var(--s3); max-width: 44ch; }
.dl { padding-bottom: 0; }
.dl-shot { margin-top: var(--s7); }
.dl-shot + .sec { padding-top: var(--s7); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--s5); }
.steps li { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.steps li::before { content: ""; width: 14px; height: 14px; margin-bottom: var(--s4); border-radius: 50%; background: var(--electric); box-shadow: 0 0 0 6px var(--ground); }
.steps h2 { font-size: var(--t-lead); line-height: 1.3; }
.steps p { margin-top: var(--s1); font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); max-width: 32ch; }
.steps .actions { grid-row: 4; padding-top: var(--s4); }
.steps.steps--dots { background: radial-gradient(circle, var(--sky) 1.6px, transparent 2.1px) 0 0 / 12px 14px repeat-x; }
.split { row-gap: var(--s5); }
.split__head { grid-column: 1 / span 5; }
.split__head .body { margin-top: var(--s3); }
.split .spec { grid-column: 7 / span 6; }

/* log in: one card, two steps (the password, then the emailed code) */
.login { display: grid; justify-items: center; padding: clamp(48px, 8vw, 112px) var(--gutter) var(--s7); }
.login__card { width: 100%; max-width: 440px; padding: var(--s5); border-radius: var(--r-tile); background: #ffffff; box-shadow: 0 0 0 1px var(--rule), 0 28px 56px -40px rgba(13, 20, 64, 0.45); }
.login__title { font-size: var(--t-2); line-height: 1.1; letter-spacing: 0; }
.login__error { margin-top: var(--s3); padding: 12px var(--s2); border-radius: var(--r-control); background: #FBEAEA; color: #8A1C1C; font-size: var(--t-small); line-height: 1.5; }
.login__note { margin-top: var(--s3); padding: 12px var(--s2); border-radius: var(--r-control); background: var(--mist); color: var(--midnight); font-size: var(--t-small); line-height: 1.5; white-space: pre-line; }
.login [hidden] { display: none; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.login__step, .login__form { display: grid; gap: var(--s3); }
.login__step { margin-top: var(--s4); }
.login__step[hidden] { display: none; }
/* Google, Microsoft and Apple: each in its own light style (Google: #747775 rule, #1F1F1F text; Microsoft: #8C8C8C, #5E5E5E;
   Apple, white with outline: black rule, black logo and text), the same size, the logo at the left and the words centred */
.sso { display: grid; gap: 12px; }
.sso__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 52px; border: 0; border-radius: var(--r-control); background: #ffffff; font: 600 15px/1.2 "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; cursor: pointer; transition: background-color 0.15s ease; }
.sso__btn svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
.sso__btn:hover { background: #F4F4F5; }
.sso__btn:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; border-radius: var(--r-control); }
.sso__btn--google { color: #1F1F1F; box-shadow: inset 0 0 0 1px #747775; }
.sso__btn--microsoft { color: #5E5E5E; box-shadow: inset 0 0 0 1px #8C8C8C; }
.sso__btn--apple { color: #000000; box-shadow: inset 0 0 0 1px #000000; }
.login__or { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-meta); line-height: 1; color: var(--ink-soft); }
.login__or::before, .login__or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.login__sent { font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); }
.login__sent strong { font-weight: 600; color: var(--ink); }
.field { display: grid; gap: var(--s1); }
.field label { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.field input { width: 100%; min-height: 52px; padding: 0 var(--s2); border: 0; border-radius: var(--r-control); background: #ffffff; box-shadow: inset 0 0 0 1px var(--rule-strong); font: 400 16px/1.4 var(--font); color: var(--ink); transition: box-shadow 0.15s ease; }
.field input:hover { box-shadow: inset 0 0 0 1px rgba(13, 20, 64, 0.42); }
.field input:focus-visible { outline: 2px solid var(--electric); outline-offset: 0; border-radius: var(--r-control); box-shadow: none; }
.field .field__code { font-size: var(--t-3); font-weight: 600; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.login__go { width: 100%; margin-top: var(--s1); }
.login__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); font-size: 15px; line-height: 1.5; }
.login__links a, .login__link { color: var(--electric); text-decoration: none; }
.login__links a:hover, .login__link:hover { color: var(--electric-deep); text-decoration: underline; }
.login__link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
/* create an account: a wider card, fields in pairs and threes, the password rules lit as each is met */
.login__card--wide { max-width: 600px; }
.fields { display: grid; gap: var(--s3) var(--s2); align-items: start; }
.fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields--3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.pw-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-rules span { padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule-strong); font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; transition: background-color 0.15s ease, color 0.15s ease; }
.pw-rules span.is-met { background: var(--mist); box-shadow: none; color: var(--midnight); }
/* country lists: without script a plain select; with it a button showing the flag, opening a list you can search. The
   select stays under the button, carrying the value and the browser's required check */
.picker { position: relative; }
.picker__native { width: 100%; min-height: 52px; padding: 0 var(--s2); border: 0; border-radius: var(--r-control); background: #ffffff; box-shadow: inset 0 0 0 1px var(--rule-strong); font: 400 16px/1.4 var(--font); color: var(--ink); }
.picker.is-enhanced .picker__native { position: absolute; inset: 0; height: 100%; opacity: 0; pointer-events: none; }
.picker__btn { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 44px 0 var(--s2); border: 0; border-radius: var(--r-control); background: #ffffff; box-shadow: inset 0 0 0 1px var(--rule-strong); font: 400 16px/1.4 var(--font); color: var(--ink); text-align: left; cursor: pointer; transition: box-shadow 0.15s ease; }
.picker__btn:hover { box-shadow: inset 0 0 0 1px rgba(13, 20, 64, 0.42); }
.picker__btn:focus-visible { outline: 2px solid var(--electric); outline-offset: 0; border-radius: var(--r-control); }
.picker__btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--electric); }
.picker__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__chev { position: absolute; right: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; color: var(--ink-soft); }
.picker__flag, .picker__list img { flex: none; width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(13, 20, 64, 0.14); }
.picker__flag[hidden] { display: none; }
.picker__pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 100%; min-width: 280px; padding: 8px; border-radius: 10px; background: #ffffff; box-shadow: 0 0 0 1px var(--rule), 0 20px 44px -18px rgba(13, 20, 64, 0.4); }
.picker__pop[hidden] { display: none; }
.picker .picker__search { width: 100%; min-height: 44px; padding: 0 12px 0 38px; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule-strong); font: 400 16px/1.4 var(--font); color: var(--ink);
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23464A6B' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%23464A6B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 13px 50% / 16px 16px; }
.picker .picker__search:focus-visible { outline: 2px solid var(--electric); outline-offset: 0; border-radius: 6px; box-shadow: none; }
.picker__list { max-height: 288px; margin-top: 8px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.picker__list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 15px; line-height: 1.3; cursor: pointer; }
.picker__list li.is-active { background: #EEF1FC; }
.picker__list li[aria-selected="true"] { font-weight: 600; }
.picker__list li[hidden] { display: none; }
.picker__code { margin-left: auto; padding-left: var(--s2); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.phone { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px; }
.picker--dial .picker__btn { padding-right: 36px; font-variant-numeric: tabular-nums; }
.picker--dial .picker__chev { right: 14px; }
.picker--dial .picker__pop { width: 340px; max-width: calc(100vw - 48px); }
/* the agreement is ticked on purpose */
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--t-meta); line-height: 1.55; color: var(--ink-soft); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--electric); cursor: pointer; }
.check a { color: var(--electric); }

/* release notes */
.releases { padding-bottom: var(--s7); }
.release { padding-block: var(--s6); border-top: 1px solid var(--rule-strong); }
.release:last-child { border-bottom: 0; padding-bottom: 0; }
.release__meta { grid-column: 1 / span 3; position: sticky; top: 96px; align-self: start; }
.release__meta h2 { font-size: var(--t-2); line-height: 1.05; color: var(--ink); }
.release__meta p { margin-top: var(--s1); font-size: 15px; color: var(--ink-soft); }
.release__meta .current { display: flex; align-items: center; gap: 8px; margin-top: var(--s2); font-size: 15px; font-weight: 600; color: var(--ink); }
.release__meta .current::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.release__body { grid-column: 4 / span 9; display: grid; gap: var(--s4); }
.release__body .shot { margin-bottom: var(--s1); }
.release__body h3 { font-size: var(--t-body); line-height: 1.4; }
.release__body ul { margin-top: 10px; list-style: none; display: grid; gap: 10px; }
.release__body li { position: relative; padding-left: 22px; font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.release__body li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.release__body li strong { color: var(--ink); font-weight: 600; }

/* 404 */
.missing { display: flex; align-items: center; min-height: calc(100svh - 72px); padding-block: var(--s7); }
.missing__in { width: 100%; row-gap: var(--s5); align-items: center; }
.missing__text { grid-column: 1 / span 6; }
.missing .lead { margin-top: var(--s3); }
.missing__links { list-style: none; margin-top: var(--s5); border-top: 1px solid var(--rule-strong); }
.missing__links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-3); line-height: 1.25; font-weight: 600; color: var(--ink); text-decoration: none; }
.missing__links a:hover { color: var(--electric); }
.missing__art { grid-column: 8 / span 5; width: 100%; height: 360px; object-fit: cover; object-position: 0 50%; border-radius: var(--r-tile); }

/* ------------------------------------------------------------ a narrow timeline: its moments in a grid under it */
.timeline { container-type: inline-size; }
@container (max-width: 640px) {
  .timeline__marks { height: 100px; }
  .timeline--lead .timeline__marks, .timeline--other .timeline__marks { height: 50px; }
  .timeline__marks li { padding-left: 10px; font-size: 13px; }
  .timeline__marks li:nth-child(3) { top: 50px; left: calc(var(--at) + 0.5px); transform: translateX(-100%); padding: 0 10px 0 0; border-left: 0; border-right: 1px solid var(--rule-strong); text-align: right; }
  .dark .timeline__marks li:nth-child(3) { border-right-color: var(--rule-dark); }
  .timeline__marks li b { font-size: var(--t-small); }
  .timeline__top { flex-direction: column; align-items: stretch; gap: 0; }
  .timeline__head { flex: none; }
}

/* ------------------------------------------------------------ pricing: two plans, their rows lined up across both */
.price-head { text-align: center; padding-bottom: var(--s6); }
.price-head .lead { margin: var(--s3) auto 0; max-width: 46ch; }
.plans-sec { padding-bottom: var(--sec); }
.plans { grid-column: 2 / span 10; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--s4); }
.plan { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: var(--s5); border-radius: var(--r-tile); background: #ffffff; box-shadow: 0 0 0 1px var(--rule), 0 28px 56px -40px rgba(13, 20, 64, 0.45); }
.plan--pro { background: var(--midnight); box-shadow: 0 28px 56px -32px rgba(13, 20, 64, 0.6); }
.plan__name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 48px; }
.plan__price { margin-top: var(--s4); }
.plan__go { display: grid; gap: 12px; align-content: start; margin-top: var(--s4); }
.plan__go .btn { width: 100%; }
.plan__note { font-size: var(--t-meta); line-height: 1.5; text-align: center; color: var(--mist); }
.plan__list { margin-top: var(--s4); }
.plan__rows { list-style: none; border-top: 1px solid var(--rule); }
.plan__rows li { border-bottom: 1px solid var(--rule); font-size: var(--t-small); line-height: 1.4; color: var(--ink); }
/* each row opens its group on Features */
.plan__rows a { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: inherit; text-decoration: none; transition: color 0.15s ease; }
.plan__rows a:hover { color: var(--electric); }
.plan__rows .row-go { width: 16px; height: 16px; margin-left: auto; stroke: var(--ink-soft); stroke-width: 1.6; opacity: 0.45; transition: opacity 0.15s ease, transform 0.15s ease; }
.plan__rows a:hover .row-go, .plan__rows a:focus-visible .row-go { opacity: 1; stroke: currentColor; transform: translateX(2px); }
.plan__rows svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--electric); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan__rows li.is-out { color: var(--ink-soft); }
.plan__rows li.is-out svg { stroke: var(--ink-soft); }
.plan--pro .plan__rows { border-top-color: var(--rule-dark); }
.plan--pro .plan__rows li { color: var(--paper); border-bottom-color: var(--rule-dark); }
.plan--pro .plan__rows svg { stroke: var(--sky); }
.plan--pro .plan__rows a:hover { color: var(--sky); }
.plan--pro .plan__rows .row-go { stroke: var(--mist); }
.plan__more { display: inline-block; margin-top: var(--s3); }

.price { display: flex; align-items: flex-end; gap: 14px; }
.plan--pro.is-switched .price { animation: fade-in 0.16s ease-out; }
.price__amount { display: inline-flex; align-items: baseline; font-weight: 600; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.price__cur { margin-right: 3px; font-size: clamp(19px, 2vw, 24px); letter-spacing: 0; color: var(--ink-soft); }
.price__num { font-size: clamp(48px, 5vw, 60px); color: var(--ink); }
.price__unit { display: grid; padding-bottom: 5px; font-size: 15px; line-height: 1.35; color: var(--ink-soft); }
.plan--pro .price__cur, .plan--pro .price__unit { color: var(--mist); }
.plan--pro .price__num { color: var(--paper); }

/* Monthly or Yearly: native radios, one Tab stop, the arrow keys move between them. :has() switches the prices, the
   buttons and the chosen half's paper mark with no script; site.js sets data-billed for browsers without :has(), and
   slides the mark over from the other half. The mark sits under every label's text (isolation, z-index -1). */
.period { display: inline-flex; gap: 2px; min-inline-size: 0; margin: 0; padding: 4px; border: 0; border-radius: 10px; background: rgba(201, 213, 250, 0.12); isolation: isolate; }
.period label { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-control); font: 600 15px/1 var(--font); color: var(--mist); cursor: pointer; transition: color 0.15s ease; }
.period label::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: -1; border-radius: inherit; }
.period label:hover { color: var(--paper); }
.period input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.period label:has(:checked) { color: var(--midnight); }
.period label:has(:checked)::before { background: var(--paper); }
/* Only without :has(), so a stale data-billed can never light a second half */
@supports not selector(:has(*)) {
  .plan--pro[data-billed="month"] .period label:first-of-type, .plan--pro[data-billed="year"] .period label:last-of-type { color: var(--midnight); }
  .plan--pro[data-billed="month"] .period label:first-of-type::before, .plan--pro[data-billed="year"] .period label:last-of-type::before { background: var(--paper); }
}
.period label:has(:focus-visible) { outline: 2px solid var(--paper); outline-offset: 2px; }
.period__save { padding: 5px 8px; border-radius: 999px; background: var(--sky); color: var(--midnight); font-size: 12px; line-height: 1; white-space: nowrap; }
.plan--pro:has(input[value="month"]:checked) [data-period="year"], .plan--pro:has(input[value="year"]:checked) [data-period="month"] { display: none; }
.plan--pro[data-billed="month"] [data-period="year"], .plan--pro[data-billed="year"] [data-period="month"] { display: none; }

@media (max-width: 1080px) {
  .plans { grid-column: 1 / -1; }
  .plan { padding: var(--s4); }
  .plan__name { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
}
@media (max-width: 860px) {
  .plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s3); width: 100%; max-width: 560px; margin-inline: auto; }
  .plan { display: block; grid-row: auto; }
  .plan__name { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (max-width: 560px) {
  .plan { padding: var(--s3); }
  .plan__name { flex-direction: column; align-items: stretch; }
  .plan__price { margin-top: var(--s3); }
  .period { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .period label { gap: 6px; min-height: 44px; padding: 0 4px; }
  .period__save { padding: 4px 6px; font-size: 11px; }
}

/* ------------------------------------------------------------ tablets */
@media (max-width: 1080px) {
  .pair__text, .pair__media, .pair--flip .pair__text, .pair--flip .pair__media { grid-column: 1 / -1; grid-row: auto; }
  .pair--flip .pair__text { grid-row: 1; }
  .pair__text .body { max-width: 60ch; }
  .pair .t2 { max-width: 22ch; }
  .hero__title { grid-column: 1 / -1; }
  .hero__aside { grid-column: 1 / span 8; grid-row: 2; }
  .hero__wave { grid-row: 3; height: 100px; }
  .files .pair--flip .pair__media, .files .pair--flip .pair__text { grid-column: 1 / -1; }
  .marks { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s5); }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile--stamps, .tile--layers, .tile--band { grid-column: 1 / -1; }
  .tile--band { flex-direction: column; }
  .tile__text, .tile--band .tile__text { flex: none; align-self: auto; padding: var(--s4) var(--s4) var(--s3); }
  .tile__pic, .tile--band .tile__pic { flex: none; margin: auto 0 0 auto; width: calc(100% - var(--s4)); }
  .tile--stamps .tile__pic { max-width: 681px; }
  .tile--layers .tile__pic { max-width: 471px; }
  .tile--band .tile__pic { max-width: 818px; }
  .tile__pic img { position: static; height: auto; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layouts__shots { justify-items: start; }
  .footer__brand { grid-column: 1 / -1; }
  .speed__more .spec { grid-column: 5 / span 8; }
  .footer__col, .footer__col:first-of-type { grid-column: auto / span 4; }
}

/* ------------------------------------------------------------ phones and narrow tablets */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .site-header__in { height: 64px; }
  .brand img { height: 32px; }
  .hero__aside { grid-column: 1 / -1; }
  .hero__stage::before { top: 38%; }
  .head .t2, .head .body { grid-column: 1 / -1; }
  .body { font-size: 17px; line-height: 1.6; }
  .wide { margin-top: var(--s5); }
  .pair__text, .pair__media, .pair--flip .pair__text, .pair--flip .pair__media { grid-column: 1 / -1; grid-row: auto; }
  .pair--flip .pair__text { grid-row: 1; }
  .pair--follow { margin-top: var(--s6); }
  .schedule { margin-top: var(--s6); }
  .schedule ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s2); }
  .speed__more .spec, .head--stack .t2, .head--stack .body { grid-column: 1 / -1; }
  .dl-head__text { grid-column: 1 / -1; }
  .missing__text, .missing__art { grid-column: 1 / -1; }
  .missing__art { display: none; }
  .js .seg { display: flex; width: 100%; }
  .seg button { flex: 1 1 auto; padding: 0 8px; font-size: 14px; white-space: nowrap; }
  .speed__more .spec__row { grid-template-columns: 1fr; gap: 2px; }
  .stats { grid-template-columns: 1fr; }
  .group--dark { padding: var(--s4) var(--s3); margin-inline: calc(-1 * var(--s1)); }
  .page-head--doc { padding-bottom: var(--s5); }
  .page-head--doc .lead { grid-column: 1 / -1; }
  .tile__text, .tile--band .tile__text { padding: var(--s3) var(--s3) var(--s2); }
  .tile__pic, .tile--band .tile__pic { width: calc(100% - var(--s3)); }
  .spec__row, .group .spec__row { grid-template-columns: 1fr; gap: 2px; padding: var(--s2) 0; }
  .band__text { grid-column: 1 / -1; }
  .band__in { padding-bottom: 260px; }
  .band__art { top: auto; bottom: 0; width: 100%; height: 220px; }
  .page-head__grid .t1, .page-head__grid .lead { grid-column: 1 / -1; }
  .doc__body { grid-column: 1 / -1; }
  .toc { grid-column: 1 / -1; position: sticky; top: 64px; z-index: 20; margin: 0 calc(-1 * var(--gutter)) var(--s5); padding: 10px 0; background: var(--ground); border-bottom: 1px solid var(--rule); }
  .toc__in { position: static; max-height: none; overflow: visible; }
  .toc ol { display: flex; gap: var(--s1); overflow-x: auto; border-left: 0; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .toc ol::-webkit-scrollbar { display: none; }
  .toc a { white-space: nowrap; margin: 0; padding: 8px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-control); font-size: 14px; }
  .toc a.is-current { border-color: var(--electric); background: var(--electric); color: var(--paper); }
  .group__head h2, .group__head p { grid-column: 1 / -1; }
  .more { grid-template-columns: 1fr; }
  .split__head, .split .spec { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr; grid-template-rows: none; }
  .steps li { display: block; grid-row: auto; }
  .twin { grid-template-columns: 1fr; row-gap: var(--s6); }
  .twin > section { display: block; grid-row: auto; }
  .twin .shot { margin-top: var(--s3); }
  .doc .spec { grid-template-columns: 1fr; }
  .steps li, .steps li + li, .steps li:last-child { padding: var(--s3) 0 var(--s4); border-right: 0; border-bottom: 1px solid var(--rule); }
  .steps li::before { font-size: 36px; margin-bottom: var(--s2); }
  .steps.steps--dots { padding-left: 34px; background: radial-gradient(circle, var(--sky) 1.6px, transparent 2.1px) 0 0 / 14px 12px repeat-y; }
  .steps.steps--dots li, .steps.steps--dots li + li, .steps.steps--dots li:last-child { position: relative; padding: 0 0 var(--s5); border-bottom: 0; }
  .steps.steps--dots li::before { position: absolute; left: -34px; top: 5px; margin: 0; }
  html { scroll-padding-top: 144px; }
  .dl-shot { margin-top: var(--s6); }
  .release__meta, .release__body { grid-column: 1 / -1; }
  .release__meta { position: static; }
  .release__body { margin-top: var(--s3); }
  .footer__col, .footer__col:first-of-type, .footer__col:last-of-type { grid-column: auto / span 6; }
  .footer__col a { padding: 10px 0; }
  .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marks svg { width: 48px; height: 48px; }
  .race { margin-top: var(--s6); }
}

/* ------------------------------------------------------------ the menu, on phones only */
@media (max-width: 560px) {
  .nav { gap: 8px; }
  .hero__wave { height: 72px; margin-top: var(--s3); }
  /* Compare and Collaborate: their phone cuts are made for the gutter (sizes calc(100vw - 40px)), so on a phone the
     picture sits inside it, framed like every other picture, instead of running off both edges of the screen */
  .full__shot { margin-inline: var(--gutter); border-radius: var(--r-shot); overflow: hidden; box-shadow: 0 0 0 1px rgba(13, 20, 64, 0.22), 0 28px 56px -32px rgba(13, 20, 64, 0.55); }
  .login__card { padding: var(--s4) var(--s3); }
  .fields--2 { grid-template-columns: minmax(0, 1fr); }
  .fields--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields--3 .field:first-child { grid-column: 1 / -1; }
  .dl-art { display: none; }
  .steps.steps--dots li:last-child { padding-bottom: 0; }
  .steps.steps--dots { background-size: 14px 12px; background-position: 0 0; padding-bottom: 0; }
  .timeline__dots .wide-dots { display: none; }
  .timeline__dots .narrow { display: block; }
  .formats { gap: var(--s1) var(--s3); }
  .formats li { font-size: var(--t-3); }
  .feats { grid-template-columns: minmax(0, 1fr); }
  .race__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .race__dots { grid-column: 1 / -1; grid-row: 2; }
  .race__dots .wide-dots { display: none; }
  .race__dots .narrow { display: block; }
  .stats { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .nav__menu {
    display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 64px; padding: 0 10px;
    border-radius: var(--r-control); background: transparent; border: 0; color: var(--ink);
    font: 600 15px/1 var(--font); cursor: pointer;
  }
  .nav__menu:hover { color: var(--electric); }
  .site-header.is-open { border-bottom-color: var(--rule); }
  .site-header.is-open::after { content: ""; position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: -1; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 0.18s ease-out; }
  .site-header.is-open .nav__links {
    display: grid; gap: 0; position: absolute; left: 0; right: 0; top: 64px; background: var(--ground);
    border-bottom: 1px solid var(--rule-strong); padding: 4px var(--gutter) 12px;
  }
  .site-header.is-open .nav__links { animation: menu-in 0.2s ease-out; box-shadow: 0 18px 36px -28px rgba(13, 20, 64, 0.5); }
  .site-header.is-open .nav__links a { display: block; padding: 16px 0; font-size: 20px; border-bottom: 1px solid var(--rule); }
  .site-header.is-open .nav__links li:last-child a { border-bottom: 0; }
}

html.menu-open { overflow: hidden; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 359px) {
  .nav { gap: 4px; }
  .nav__menu { min-width: 0; padding: 0 6px; }
  .btn--small { padding: 0 12px; }
  .brand img { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============ Contact us, Cookies, the cookie notice (6 Nov 2026, from the signed-off canvas) ============ */
/* ------------------------------------------------------------ footer: four columns (Product, Support, Account, Legal) */
.footer__brand { grid-column: 1 / span 4; }
.footer__col:first-of-type { grid-column: 5 / span 2; }

/* ------------------------------------------------------------ forms: a message box, a topic to pick */
.field textarea {
  width: 100%; min-height: 216px; padding: 14px var(--s2); border: 0; border-radius: var(--r-control); background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--rule-strong); font: 400 16px/1.6 var(--font); color: var(--ink); resize: vertical;
  transition: box-shadow 0.15s ease;
}
.field textarea:hover { box-shadow: inset 0 0 0 1px rgba(13, 20, 64, 0.42); }
.field textarea:focus-visible { outline: 2px solid var(--electric); outline-offset: 0; border-radius: var(--r-control); box-shadow: none; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.field__hint { font-size: var(--t-meta); line-height: 1.4; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.topics legend { padding: 0; margin-bottom: var(--s1); font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.topics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.topic {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px;
  border-radius: var(--r-control); background: #ffffff; box-shadow: inset 0 0 0 1px var(--rule-strong);
  font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.topic:hover { box-shadow: inset 0 0 0 1px rgba(13, 20, 64, 0.42); }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.topic svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--electric); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.topic.is-on, .topic:has(:checked) { background: #EEF1FC; box-shadow: inset 0 0 0 2px var(--electric); }
.topic:has(:focus-visible) { outline: 2px solid var(--electric); outline-offset: 2px; }

/* ------------------------------------------------------------ contact us */
.contact { padding-bottom: var(--sec); }
.contact__grid { row-gap: var(--s6); align-items: start; }
.contact__main { grid-column: 1 / span 7; }
.contact__aside { grid-column: 9 / span 4; }
.contact .login__card { max-width: none; }
.contact .login__form { gap: var(--s4); }
.contact__send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.contact__send .btn { min-width: 176px; }
.contact__privacy { flex: 1 1 260px; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-soft); }
.contact__privacy a { color: var(--electric); }
.who { display: flex; align-items: center; gap: 12px; padding: 12px var(--s2); border-radius: var(--r-control); background: #F5F6FA; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.who strong { display: block; font-weight: 600; color: var(--ink); }
.who__dot { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mist); color: var(--midnight); font-size: 14px; font-weight: 600; }
.who a { margin-left: auto; color: var(--electric); text-decoration: none; white-space: nowrap; }
.who a:hover { text-decoration: underline; }

.aside__title { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--rule-strong); }
.ways { list-style: none; }
.ways li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.ways svg { width: 24px; height: 24px; margin-top: 2px; color: var(--electric); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ways strong { display: block; font-size: var(--t-small); line-height: 1.5; font-weight: 600; color: var(--ink); }
.ways span { display: block; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.ways a { font-size: var(--t-small); line-height: 1.5; font-weight: 600; text-decoration: none; }
.ways a:hover { text-decoration: underline; }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.mail a { font-size: var(--t-lead); line-height: 1.3; }
.copy {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); font: 600 13px/1 var(--font); color: var(--ink-soft); cursor: pointer;
}
.copy:hover { color: var(--electric); box-shadow: inset 0 0 0 1px var(--electric); }
.copy svg { width: 14px; height: 14px; margin: 0; stroke-width: 2; }

/* sent: the ticket's number, and where the copy went */
.sent__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--electric); color: var(--paper); }
.sent__mark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sent .login__title { margin-top: var(--s4); }
.sent__spec { margin-top: var(--s4); }
.sent__spec .spec__row { grid-template-columns: 120px 1fr; }
.sent__no { font-size: var(--t-3); line-height: 1.2; font-weight: 600; color: var(--electric); font-variant-numeric: tabular-nums; }
.sent .actions { margin-top: var(--s4); }

/* ------------------------------------------------------------ legal pages (cookies) */
.legal { padding-bottom: var(--sec); }
.legal .doc__body { grid-column: 4 / span 8; }
.legal__sec + .legal__sec { margin-top: clamp(56px, 6vw, 80px); }
.legal__sec h2 { font-size: 28px; line-height: 1.2; color: var(--ink); scroll-margin-top: 96px; }
.legal__sec h3 { margin-top: var(--s4); font-size: var(--t-lead); line-height: 1.3; color: var(--ink); }
.legal__sec > p { margin-top: var(--s2); font-size: var(--t-body); line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }
.legal__sec > p + p { margin-top: var(--s2); }
.legal__sec p strong, .legal__sec li strong { color: var(--ink); font-weight: 600; }
.legal__date { margin-top: var(--s3); font-size: var(--t-meta); line-height: 1.5; color: var(--ink-soft); }
.page-head--legal .lead { max-width: 30ch; }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s4); list-style: none; }
.glance li { padding-top: var(--s3); border-top: 1px solid var(--rule-strong); }
.glance svg { width: 40px; height: 40px; color: var(--electric); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.glance .is-no svg { color: var(--grey-text); }
.glance strong { display: block; margin-top: var(--s2); font-size: var(--t-small); line-height: 1.45; font-weight: 600; color: var(--ink); }
.glance span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

.table-box { margin-top: var(--s4); overflow-x: auto; }
.ctable { width: 100%; min-width: 640px; border-collapse: collapse; }
.ctable th { padding: 0 var(--s3) 12px 0; border-bottom: 1px solid var(--rule-strong); text-align: left; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ctable td { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.ctable td:first-child { width: 31%; }
.ctable td:nth-child(3) { width: 20%; }
.ctable td:last-child, .ctable th:last-child { padding-right: 0; }
code, .code { font: 600 13.5px/1.5 "Cascadia Mono", Consolas, ui-monospace, monospace; color: var(--midnight); }
.ctable code { display: inline-block; padding: 1px 7px; border-radius: 5px; background: #F2F4FB; box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }
.ctable small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.legal__list { margin-top: var(--s3); list-style: none; display: grid; gap: 10px; }
.legal__list li { position: relative; padding-left: 22px; font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.legal__list li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }

/* ------------------------------------------------------------ the cookie notice: once, bottom left, until OK */
.notice {
  position: fixed; left: var(--s3); bottom: var(--s3); z-index: 60; display: grid; gap: var(--s2);
  width: min(384px, calc(100% - 2 * var(--s2))); padding: var(--s3); border-radius: var(--r-tile);
  background: var(--midnight); color: var(--paper); box-shadow: 0 28px 56px -28px rgba(13, 20, 64, 0.7);
}
.notice__text { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--paper); }
.notice__text svg { width: 28px; height: 28px; color: var(--sky); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.notice__row { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); }
.notice__row .link { font-size: 15px; }
.notice__row .btn { min-width: 88px; }

@media (max-width: 1080px) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__col, .footer__col:first-of-type { grid-column: auto / span 3; }
  .contact__main, .contact__aside { grid-column: 1 / -1; }
  .contact__aside { max-width: 640px; }
  .legal .doc__body { grid-column: 4 / span 9; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); }
}
@media (max-width: 860px) {
  .footer__col, .footer__col:first-of-type, .footer__col:last-of-type { grid-column: auto / span 6; }
  .topics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal .doc__body { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .topics__grid, .glance { grid-template-columns: minmax(0, 1fr); }
  .notice { left: var(--s2); bottom: var(--s2); }
}
.contact [hidden] { display: none !important; }