:root {
  --ink: #21374a;
  --blue: #126a8c;
  --muted: #536b7a;
  --pale: #eaf4f7;
  --ocean-1: #1f6fb2;
  --ocean-2: #17a2a6;
  --white: #ffffff;
  --border: #d7e4e9;
  --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; }
.logo img { width: 28px; height: 28px; border-radius: 6px; }
nav.main a {
  color: var(--ink); text-decoration: none; margin-left: 28px; font-size: 15px; font-weight: 600;
}
nav.main a:hover { color: var(--blue); }
.btn {
  display: inline-block; padding: 10px 20px; border-radius: 8px; font-weight: 700;
  text-decoration: none; font-size: 15px; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: linear-gradient(135deg, var(--ocean-1), var(--ocean-2)); color: #fff; }
.btn-primary:hover { opacity: .92; }

/* On a narrow screen the five links and the button cannot fit beside the name,
   so they wrapped upwards out of the 64 pixel strip and sat on top of it. The
   strip is allowed to grow instead and the links go on their own row, centred,
   with room round each one to press. */
@media (max-width: 820px) {
  /* Two rows tall is too much to keep pinned to the top of a phone, where it
     would sit on a fifth of the screen the whole way down the page. It scrolls
     away with everything else instead. */
  header.site { position: static; }
  header.site .wrap { flex-wrap: wrap; height: auto; padding: 10px 0 12px; row-gap: 10px; }
  nav.main { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
  nav.main a { margin-left: 0; font-size: 16px; padding: 6px 2px; }
  nav.main a.btn-primary { padding: 10px 20px; }
}
.btn.btn-primary, nav.main a.btn-primary, footer.site a.btn-primary { color: #fff; }
.btn-ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-ghost:hover { background: var(--pale); }
.pill {
  display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--pale);
  color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .02em;
}

/* ---------- hero ---------- */
/* The bright desk picture, the same design as the Facebook cover (17 October 2026, the
   owner's choice; it replaced the dark band with "Every Word on Your Screen").
   Everything is placed on a 1640 x 624 drawing and scaled to the width of the window with
   --u (one drawing pixel), so it looks the same at any width. The laptop screen is the real
   WaySpeak window: one picture of it, and for each word a thin strip of the real app taken
   while it was reading. hero.js shows the strips one after another, rests 15 seconds and
   starts again. Only those words move. A Pause button stops it, and it never moves for
   anyone whose device asks for less movement.
   Below 900px the words go above the picture at normal sizes, and the picture shows just
   the laptop, so nothing on a phone is too small to read. */
.hero { padding: 0; background: #edf4fd; container-type: inline-size; overflow: hidden; }
.hero-stage {
  --u: calc(100cqw / 1640); --ox: 0; --oy: 0;
  position: relative; max-width: 1800px; margin: 0 auto; aspect-ratio: 1640 / 624;
  font-family: "Segoe UI", "Segoe UI Variable", system-ui, sans-serif; color: #10233f;
}
@container (min-width: 1801px) {
  .hero-stage { --u: calc(1800px / 1640);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
}
.hero-scene { position: absolute; inset: 0; overflow: hidden; }
.hero-photo { position: absolute; max-width: none;
  left: calc((-180 + var(--ox)) * var(--u)); top: calc((-177 + var(--oy)) * var(--u)); width: calc(1827 * var(--u)); }
/* The left of the same photo again, smaller, so the books and headphones are smaller. */
.hero-left-small { position: absolute; left: 0; top: 0; width: calc(330 * var(--u)); height: calc(624 * var(--u)); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 68%, transparent 100%), linear-gradient(180deg, transparent 10%, #000 27%); -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, #000 68%, transparent 100%), linear-gradient(180deg, transparent 10%, #000 27%); mask-composite: intersect; }
.hero-left-small img { position: absolute; max-width: none; left: calc(-6 * var(--u)); top: calc(55 * var(--u)); width: calc(1100 * var(--u)); }
.hero-fade { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(238,245,254,0) 0%, rgba(238,245,254,0) 9%, rgba(238,245,254,.55) 18%, rgba(238,245,254,.9) 26%, #eef5fe 32%, #eef5fe 36%, rgba(238,245,254,.85) 46%, rgba(238,245,254,0) 58%); }

.hero-words { position: absolute; left: calc(285 * var(--u)); top: calc(52 * var(--u)); width: calc(560 * var(--u)); }
.hero-brand { display: flex; align-items: center; gap: calc(22 * var(--u)); margin: 0; }
.hero-brand img { width: calc(88 * var(--u)); height: calc(88 * var(--u)); border-radius: calc(24 * var(--u)); }
.hero-brand h1 { margin: 0; font-size: calc(86 * var(--u)); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: #0b2a5c; }
.hero-rule { width: calc(110 * var(--u)); height: calc(7 * var(--u)); border-radius: 4px; background: #1f6fe0; margin: calc(18 * var(--u)) 0 calc(16 * var(--u)); }
.hero-tag { margin: 0; font-size: calc(34 * var(--u)); line-height: 1.22; font-weight: 500; color: #1d3557; }
.hero-tag strong { color: #1f6fe0; font-weight: 700; }
.hero-feats { list-style: none; padding: 0; margin: calc(20 * var(--u)) 0 0;
  display: grid; grid-template-columns: auto auto; justify-content: start; gap: calc(10 * var(--u)); }
.hero-feats li { display: flex; align-items: center; gap: calc(12 * var(--u)); background: #fff; border-radius: 999px;
  padding: calc(8 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  font-size: calc(21 * var(--u)); white-space: nowrap; font-weight: 600; color: #163259; box-shadow: 0 3px 10px rgba(31,111,224,.12); }
.hero-feats i { flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: #1f6fe0;
  display: flex; align-items: center; justify-content: center; }
.hero-feats svg { width: 63%; height: 63%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* the laptop screen. The photo's screen leans back a little: it is 6 photo pixels narrower on
   each side at the top than at the bottom (corners 991/1445 at the top, 985/1451 at the bottom,
   measured 17 October 2026). The window is tipped back the same amount about its bottom edge,
   so it sits flat on the screen instead of looking crooked. The box is taller than the screen
   because tipping it back makes it look shorter. */
.hero-screen { position: absolute; left: calc((834.6 + var(--ox)) * var(--u)); top: calc((93.1 + var(--oy)) * var(--u));
  width: calc(479.9 * var(--u)); height: calc(302.6 * var(--u)); background: #f3f6fa; border-radius: calc(4 * var(--u));
  transform-origin: 50% 100%; transform: perspective(calc(3971 * var(--u))) rotateX(20deg);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-frame { position: relative; width: 100%; aspect-ratio: 680 / 330; }
.hero-frame img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Both windows stay loaded and only one shows, so switching never reloads a picture (a
   reload is what made the words flicker). */
.hero-frame .rest-window { visibility: hidden; }
.hero-frame.resting .rest-window { visibility: visible; }
.hero-frame.resting .reading-window, .hero-frame.resting .hero-strip { visibility: hidden; }
/* Until hero.js starts (and always when nothing may move) the strip shows "loud" lit.
   hero.js then uses words.jpg, all 24 strips in one picture, and only slides it. */
.hero-strip { position: absolute; left: 0; width: 100%; background-repeat: no-repeat; background-size: 100% auto;
  background-image: url("assets/hero/word-09.jpg"); }
.hero-strip.text { top: 24.242%; height: 25.455%; background-position: 0 0; }
.hero-strip.player { top: 80.606%; height: 14.545%; background-position: 0 100%; }
.hero-pause { position: absolute; right: calc(8 * var(--u)); bottom: calc(6 * var(--u)); z-index: 2;
  font: 600 12px/1 "Segoe UI", system-ui, sans-serif; color: #0b2a5c; background: rgba(255,255,255,.92);
  border: 1px solid #9db8d6; border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.hero-pause:hover { background: #fff; border-color: #1f6fe0; }
.hero-pause:focus-visible { outline: 3px solid #1f6fe0; outline-offset: 2px; }

.hero-small { position: absolute; left: calc(287 * var(--u)); top: calc(486 * var(--u)); width: calc(300 * var(--u));
  border-radius: calc(10 * var(--u)); box-shadow: 0 14px 34px rgba(11,42,92,.28); }
/* Centred under the laptop: its screen and its base are both centred at 1074 on the drawing. */
.hero-ribbon { position: absolute; left: calc(1074 * var(--u)); transform: translateX(-50%); top: calc(506 * var(--u)); margin: 0;
  display: flex; align-items: center; gap: calc(14 * var(--u)); white-space: nowrap;
  background: #0b2a5c; color: #fff; border-radius: 999px; padding: calc(10 * var(--u)) calc(26 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
  font-size: calc(23 * var(--u)); font-weight: 600; }
.hero-ribbon i { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; }
.hero-ribbon svg { width: 60%; height: 60%; }
.hero-ribbon span { color: #8fc1ff; }
/* The strip is a button to the Microsoft Store: a pointer, a small arrow, and it lifts a little. */
a.hero-ribbon { text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s; box-shadow: 0 6px 18px rgba(11,42,92,.25); }
a.hero-ribbon:hover { background: #12397a; box-shadow: 0 8px 24px rgba(11,42,92,.35); }
a.hero-ribbon:focus-visible { outline: 3px solid #1f6fe0; outline-offset: 3px; }
.hero-ribbon-go { font-size: 1.4em; line-height: 1; margin-left: calc(2 * var(--u)); color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { a.hero-ribbon { transition: none; } }

@media (max-width: 899px) {
  .hero-stage { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 18px 30px; }
  .hero-scene { position: relative; inset: auto; order: 2; width: 100%; max-width: 640px; aspect-ratio: 640 / 520;
    container-type: inline-size; --u: calc(100cqw / 640); --ox: -760; --oy: -40; border-radius: 14px; }
  .hero-left-small, .hero-fade { display: none; }
  .hero-words { position: static; order: 1; width: 100%; max-width: 560px; }
  .hero-brand { gap: 14px; }
  .hero-brand img { width: 56px; height: 56px; border-radius: 14px; }
  .hero-brand h1 { font-size: 46px; }
  .hero-rule { width: 70px; height: 5px; margin: 12px 0; }
  .hero-tag { font-size: 23px; }
  .hero-feats { margin-top: 16px; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-feats li { font-size: 16px; gap: 8px; padding: 6px 12px 6px 6px; white-space: normal; line-height: 1.2; }
  .hero-feats i { width: 30px; height: 30px; }
  .hero-small { position: static; order: 3; width: 100%; max-width: 300px; border-radius: 10px; }
  .hero-ribbon { position: static; transform: none; order: 4; font-size: 16px; gap: 10px; padding: 8px 18px 8px 8px; white-space: normal; }
  .hero-ribbon i { width: 30px; height: 30px; }
  .hero-screen .hero-pause { font-size: 12px; }
}
@media (max-width: 340px) { .hero-feats { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .hero-feats li { font-size: 15px; padding-right: 8px; } }
.hero-shot {
  border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(23,61,84,.35);
  border: 1px solid var(--border);
}

/* ---------- sections ---------- */
section { padding: 64px 0; }
section.alt { background: var(--pale); }
h2.section-title { font-size: 32px; text-align: center; margin: 0 0 8px; }
p.section-sub { text-align: center; color: var(--muted); max-width: 620px; margin: 0 auto 44px; font-size: 17px; }

.tools-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 860px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tools-grid { grid-template-columns: 1fr; } }
.tool-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px 20px;
  text-align: center;
  /* Shaded from the start, so the cards stand off the page (owner, 7 October 2026). */
  box-shadow: 0 16px 40px -18px rgba(23,61,84,.32);
}
.tool-card img { width: 32px; height: 32px; margin: 0 auto 16px; }
.tool-card h3 { font-size: 18px; margin: 0 0 8px; }
.tool-card p { font-size: 14.5px; color: var(--muted); margin: 0; }

.shot-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; align-items: start;
}
@media (max-width: 760px) { .shot-grid { grid-template-columns: 1fr; } }
/* Shaded from the start too (owner, 7 October 2026); hovering still lifts it further. */
.shot-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px -18px rgba(23,61,84,.32); transition: transform .2s ease, box-shadow .2s ease; }
.shot-card:hover { transform: scale(1.04); box-shadow: 0 26px 56px -18px rgba(23,61,84,.45); z-index: 2; position: relative; }
.shot-card img { width: 100%; cursor: zoom-in; }
.shot-card figcaption { padding: 14px 18px; font-size: 14.5px; color: var(--muted); }
.shot-card figcaption b { color: var(--ink); }

/* One column since the picture and its Look buttons were taken out on
   28 September. Held to a readable width rather than running the full
   width of the page. */
.privacy-grid { max-width: 760px; margin: 0 auto; }
.check-list { list-style: none; padding: 0; margin: 22px 0 0; }
.check-list li { padding-left: 30px; position: relative; margin-bottom: 14px; font-size: 15.5px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ocean-2); font-weight: 800; }
.note-box {
  background: var(--pale); border-radius: 10px; padding: 16px 18px; font-size: 14.5px; color: var(--muted); margin-top: 20px;
}

.pricing-card {
  max-width: 420px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 40px 32px; text-align: center; box-shadow: 0 20px 50px -24px rgba(23,61,84,.3);
}
.pricing-card .amount { font-size: 52px; font-weight: 800; color: var(--ink); }
.pricing-card .amount span { font-size: 18px; font-weight: 600; color: var(--muted); }
.pricing-card ul { text-align: left; list-style: none; padding: 0; margin: 26px 0; }
/* The same size and spacing as "Who it's for" beside it, with the same dark bold start to each line (owner, 3 October 2026). */
.pricing-card ul li { padding-left: 26px; position: relative; margin-bottom: 14px; font-size: 15.5px; line-height: 1.55; }
.pricing-card ul li strong { color: var(--ink); }
.pricing-card ul li::before { content: "•"; position: absolute; left: 6px; color: var(--blue); }

.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); padding: 18px 0; }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 16.5px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; display: inline-block; width: 20px; color: var(--blue); font-weight: 800; }
.faq-item[open] summary::before { content: "–"; }
.faq-item p { margin: 10px 0 0 20px; color: var(--muted); font-size: 15px; }

footer.site { background: var(--ink); color: #cfe0e8; padding: 40px 0 28px; margin-top: 40px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
footer.site a { color: #cfe0e8; text-decoration: none; font-size: 14px; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site .cols { display: flex; gap: 48px; flex-wrap: wrap; }
footer.site .col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #8fb4c4; margin: 0 0 12px; }
footer.site .col a { display: block; margin-bottom: 8px; }
footer.site .bottom { border-top: 1px solid #33505f; margin-top: 32px; padding-top: 18px; font-size: 13px; color: #8fb4c4; text-align: center; }

/* ---------- simple legal pages ---------- */
.legal { padding: 56px 0 90px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: 34px; margin-bottom: 4px; }
.legal .updated { color: var(--muted); font-size: 14px; margin-bottom: 36px; }
.legal h2 { font-size: 20px; margin-top: 34px; }
.legal p, .legal li { color: #33475a; font-size: 15.5px; }
.legal .placeholder { background: #fff4e5; border: 1px solid #f2c78a; padding: 3px 8px; border-radius: 6px; color: #7a4a00; font-weight: 600; }

/* ---------- gallery page ---------- */
.gallery-hero { padding: 56px 0 24px; text-align: center; }
.gallery-hero h1 { font-size: 40px; margin: 0 0 12px; }
.gallery-hero p { color: var(--muted); font-size: 18px; max-width: 640px; margin: 0 auto; }

.showcase { padding: 48px 0; }
.showcase.alt { background: var(--pale); }
.showcase-head { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.showcase-head h2 { font-size: 27px; margin: 0 0 10px; }
.showcase-head p { color: var(--muted); font-size: 16px; margin: 0; }

/* One shared big picture (right) driven by a grouped thumbnail sidebar (left) */
.gallery-layout {
  display: grid; grid-template-columns: 480px 1fr; grid-template-areas: "side main";
  gap: 40px; align-items: start;
}
@media (max-width: 980px) {
  .gallery-layout { grid-template-columns: 1fr; grid-template-areas: "main" "side"; }
}

.gallery-main { grid-area: main; position: sticky; top: 84px; }
@media (max-width: 980px) { .gallery-main { position: static; margin-bottom: 8px; } }

.sg-frame {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: #fff; box-shadow: 0 18px 44px -22px rgba(23,61,84,.3);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.sg-frame img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sg-caption {
  padding: 16px 2px 0; font-size: 16px; color: var(--ink); min-height: 30px;
}
.sg-caption b { color: var(--blue); }

.gallery-sidebar {
  grid-area: side; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 16px;
}
@media (max-width: 600px) { .gallery-sidebar { grid-template-columns: 1fr; } }
.sidebar-group.full { grid-column: 1 / -1; }
.sidebar-group h3 { font-size: 14.5px; margin: 0 0 4px; color: var(--ink); }
.sidebar-group p { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; line-height: 1.35; }
.sidebar-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }

.sg-thumb {
  padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid var(--border); background: #fff; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center; transition: border-color .15s;
}
.sg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-thumb:hover { border-color: var(--ocean-1); }
.sg-thumb.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(18,106,140,.25); }

/* ---------- zigzag feature rows (static gallery, no JS) ---------- */
.feature-row { padding: 60px 0; }
.feature-row .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 820px) {
  .feature-row .wrap { grid-template-columns: 1fr; }
  .feature-row .feature-pics { order: -1; }
}
.feature-row.reverse .feature-text { order: 2; }
.feature-row.reverse .feature-pics { order: 1; }
@media (max-width: 820px) {
  .feature-row.reverse .feature-text { order: 2; }
  .feature-row.reverse .feature-pics { order: -1; }
}
.feature-text h2 { font-size: 28px; margin: 0 0 12px; }
.feature-text p { font-size: 16px; color: var(--muted); margin: 0; }
.feature-pics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px;
}
.feature-pics.cols-3 { grid-template-columns: repeat(3, 1fr); }
.feature-pics.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-pic {
  border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #fff;
  box-shadow: 0 12px 28px -16px rgba(23,61,84,.28);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease; cursor: zoom-in; position: relative;
}
.feature-pic:hover, .feature-pic:focus-within {
  transform: scale(1.12); box-shadow: 0 20px 44px -16px rgba(23,61,84,.45); z-index: 2;
}
.feature-pic img { width: 100%; height: auto; display: block; }
.feature-pic figcaption { display: none; }

/* ---------- click-to-enlarge lightbox (any picture with .zoomable) ---------- */
.zoomable { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(20, 30, 38, .82); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 40px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-overlay img {
  max-width: 92vw; max-height: 88vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  background: #fff; cursor: zoom-out;
}
/* A copy of a whole picture, drawn words and all, enlarged together. The
   cropping some pictures use on the page is switched off here, because the
   point of enlarging is to see all of it. */
.lightbox-copy {
  border-radius: 10px; overflow: hidden; cursor: zoom-out;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); background: #fff;
  aspect-ratio: auto;
}
.lightbox-copy img { width: 100%; max-width: 100%; height: auto; display: block; }
.lightbox-copy > *:not(img) { pointer-events: none; }

.lightbox-close {
  position: absolute; top: 22px; right: 28px; background: rgba(255,255,255,.15); color: #fff;
  border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }

/* ---------------------------------------------------------------------------
   The running demo in the hero. Everything except the words, the sentence
   count and the progress bar is a photograph of WaySpeak; those parts are
   drawn live so they can move. Added 2026-09-27.
   --------------------------------------------------------------------------- */
/* The demo sits straight under the dark top of the page, so it starts with
   no gap of its own; the band above gives it its breathing room (owner,
   28 September - the demo was sitting too low). */
.ws-demo { width: 100%; max-width: 1284px; margin: 0 auto; }

.ws-app {
  position: relative; width: 100%; aspect-ratio: 1284 / 544;
  border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  overflow: hidden; container-type: inline-size;
}
.ws-frame {
  position: absolute; inset: 0; background-size: 100% 100%;
  opacity: 0; transition: opacity .6s ease;
}
.ws-frame.is-on { opacity: 1; }
.ws-f-warm  { background-image: url("assets/screenshots/frame-warm.png"); }
.ws-f-light { background-image: url("assets/screenshots/frame-light.png"); }
.ws-f-dark  { background-image: url("assets/screenshots/frame-dark.png"); }

.ws-page {
  position: absolute; left: 3.115%; top: 23.165%; width: 93.7%;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: 1.869cqw; line-height: 2.804cqw;
  color: #20252c; transition: color .6s ease; text-align: left;
}
.ws-page.on-dark { color: #e9ecef; }
.ws-para { margin: 0 0 2.804cqw 0; }
.ws-line { position: relative; display: block; }
.ws-line.is-on::before {
  content: ""; position: absolute; inset: -0.35cqw -1.4cqw;
  border: 0.16cqw solid #17b6c6; border-radius: 0.5cqw;
  background: rgba(120,224,235,.20);
}
.ws-w { position: relative; border-radius: 2px; }
.ws-w.is-on { background: #3fdcea; color: #101418; }

.ws-count {
  position: absolute; left: 58.8%; top: 92.3%; width: 11%; height: 3.6%;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font-size: 1.09cqw; border-radius: 0.6cqw;
  background: #fbfaf7; color: #1f1f1f; border: 0.08cqw solid #c8c8c4;
}
.ws-count.on-dark { background: #2b2b2b; color: #eaeaea; border-color: #4a4a4a; }

.ws-rail {
  position: absolute; left: 1.2%; right: 1.2%; top: 88.2%; height: 3.4%;
  background: #EFE2CC; transition: background .6s ease;
}
.ws-rail.on-light { background: #F6FAFE; }
.ws-rail.on-dark  { background: #30343A; }
.ws-track {
  position: absolute; left: 1.1%; right: 1.1%; top: 47%; height: 0.2cqw;
  border-radius: 0.1cqw; background: #BAA991; transition: background .6s ease;
}
.ws-rail.on-light .ws-track { background: #CDD1D5; }
.ws-rail.on-dark  .ws-track { background: #464646; }
.ws-fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 0.1cqw;
  background: #0f6cbd; transition: width .25s linear;
}
.ws-dot {
  position: absolute; top: 50%; width: 0.85cqw; height: 0.85cqw;
  margin: -0.425cqw 0 0 -0.425cqw; border-radius: 50%;
  background: #0f6cbd; transition: left .25s linear;
}

.ws-caption {
  min-height: 2.4em; margin: 10px auto 0; max-width: 780px;
  font-size: 18px; line-height: 1.5; color: var(--muted);
}
.ws-controls { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.ws-controls button {
  font: 600 15px "Segoe UI", system-ui, sans-serif; padding: 10px 18px;
  border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: #14323f; cursor: pointer;
}
.ws-controls button:hover { background: #f1f6f9; }
.ws-app { cursor: pointer; }   /* clicking the picture plays and stops it */

/* One big button for Play and Stop (owner, 18 October 2026). Before the first play
   it sits in the lower part of the opening card, so the card's title above it can
   still be read; once started it sits just under the picture. Words as well as the
   symbol, so nobody has to recognise it. */
.ws-stage { position: relative; }
.ws-bigplay {
  position: absolute; left: 50%; top: 81%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 30px 12px 12px; border-radius: 999px;
  border: 3px solid #fff; background: #0f6cbd; color: #fff;
  font: 700 24px/1.1 "Segoe UI", system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 5px 15px rgba(0,0,0,.20); cursor: pointer; z-index: 2;  /* half the first shadow (owner) */
  /* Colour only: animating the move made the button slide in from the left the
     first time it moved under the picture (owner, 18 October 2026). */
  transition: background .15s ease;
}
.ws-bigplay:hover { background: #0b5aa0; transform: translate(-50%, -50%) scale(1.04); }
.ws-bigplay:focus-visible { outline: 4px solid #ffd54a; outline-offset: 4px; }
.ws-bigplay-ring {
  width: 56px; height: 56px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.ws-bigplay-ring svg { width: 30px; height: 30px; fill: #0f6cbd; margin-left: 4px; }
/* While playing, the same button says Stop and shows a square instead of the triangle. */
.ws-icon-stop { display: none; }
.ws-bigplay.is-stop .ws-icon-play { display: none; }
.ws-bigplay.is-stop .ws-icon-stop { display: block; margin-left: 0; }
/* Lowercase words with tails (y, p) sit low in a pill; lift them a little. */
.ws-bigplay-word { position: relative; top: -1px; }
/* Once started, the button sits just under the picture so the picture can be seen. */
.ws-demo.has-started:not(.is-big) .ws-bigplay {
  position: static; transform: none; display: flex; width: max-content; margin: 16px auto 0;
}
.ws-demo.has-started:not(.is-big) .ws-bigplay:hover { transform: scale(1.04); }
/* Filling a phone's screen: Play sits in the middle of the picture; Stop sits at the
   bottom of the screen so it does not cover the picture while it plays. */
.ws-demo.is-big .ws-bigplay { top: 50%; }
.ws-demo.is-big.is-playing .ws-bigplay {
  position: fixed; top: auto; bottom: 14px; transform: translateX(-50%);
}
.ws-demo.is-big.is-playing .ws-bigplay:hover { transform: translateX(-50%) scale(1.04); }
/* On a phone the picture is too small to lay a big button over its words, so the
   button sits just under the picture instead, centred. */
@media (max-width: 700px) {
  .ws-bigplay { font-size: 17px; gap: 10px; padding: 7px 18px 7px 7px; border-width: 2px; }
  .ws-demo:not(.is-big) .ws-bigplay {
    position: static; transform: none; display: flex; width: max-content; margin: 14px auto 0;
  }
  .ws-demo:not(.is-big) .ws-bigplay:hover { transform: scale(1.04); }
  .ws-bigplay-ring { width: 38px; height: 38px; }
  .ws-bigplay-ring svg { width: 20px; height: 20px; margin-left: 3px; }
}
@media (prefers-reduced-motion: reduce) { .ws-bigplay { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .ws-frame, .ws-page, .ws-dot, .ws-fill, .ws-rail { transition: none; }
}

/* The three look buttons under the demo. The chosen one is marked by its
   colour AND by a filled dot, so it never depends on colour alone. */
.ws-looks { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.ws-look {
  font: 600 15px "Segoe UI", system-ui, sans-serif; padding: 10px 18px;
  border-radius: 999px; border: 1px solid var(--border);
  background: #fff; color: #14323f; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
}
.ws-look::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid #7ea3b4; background: transparent;
}
.ws-look:hover { background: #f1f6f9; }
.ws-look.is-chosen { border-color: #0f6cbd; color: #0b4e88; background: #eef6fd; }
.ws-look.is-chosen::before { background: #0f6cbd; border-color: #0f6cbd; }
.ws-look:focus-visible { outline: 3px solid #0f6cbd; outline-offset: 2px; }

/* While it is reading, the READ button splits into Pause above and Stop below,
   exactly as the real app does. These are the same photographs with that one
   corner lifted from a picture of the app taken mid-reading. */
.ws-app.is-reading .ws-f-warm  { background-image: url("assets/screenshots/frame-warm-reading.png"); }
.ws-app.is-reading .ws-f-light { background-image: url("assets/screenshots/frame-light-reading.png"); }
.ws-app.is-reading .ws-f-dark  { background-image: url("assets/screenshots/frame-dark-reading.png"); }

/* ---- the scenes -----------------------------------------------------------
   The demo plays through in order. Only one scene is shown at a time. */
/* Switched outright rather than faded. A fade here bought nothing and gave the
   browser something to get stuck half way through. */
.ws-scene { position: absolute; inset: 0; display: none; }
.ws-scene.is-shown { display: block; }

/* ---- scene two: a web page beside WaySpeak --------------------------------
   Two windows side by side, each filling half the frame from top to bottom.
   Whichever one is working stands out; the other dims a little, the way an
   unfocused window does in Windows. The measurements below are fractions of
   the 824 by 698 photograph, read out of the picture itself. */
.ws-s2, .ws-s7, .ws-s8 { background: transparent; }

.ws2-win { position: absolute; top: 0; height: 100%; width: 50%;
           overflow: hidden; transition: filter .45s ease, opacity .45s ease; }
.ws2-win.is-behind { filter: brightness(.93) saturate(.9); }

.ws2-app     { left: 0;
               background: url("assets/screenshots/side-warm.png") 0 0/100% 100% no-repeat;
               container-type: inline-size; }
.ws2-app.is-reading { background-image: url("assets/screenshots/side-warm-reading.png"); }
.ws2-browser { left: 50%; background: #fff; display: flex; flex-direction: column;
               container-type: inline-size; }

.ws2-chrome { background: #dfe3e8; padding: 0.9cqw 1.1cqw 0; }
.ws2-tab { display: inline-block; background: #f7f9fb; border-radius: 0.9cqw 0.9cqw 0 0;
           padding: 0.8cqw 1.8cqw; font-size: 1.9cqw; color: #2b3a45; }
.ws2-barrow { display: flex; align-items: center; gap: 1.1cqw;
              padding: 0.8cqw 1.1cqw; background: #f7f9fb; }
.ws2-nav { color: #7c8b97; font-size: 1.9cqw; }
.ws2-addr { flex: 1; background: #fff; border: 1px solid #ccd4dc; border-radius: 999px;
            padding: 0.6cqw 1.4cqw; font-size: 1.9cqw; color: #58707f; }
.ws2-paper { flex: 1; background: #fff; padding: 2.6cqw 3.2cqw; overflow: hidden; text-align: left; }
.ws2-paper h3 { font: 600 3.5cqw Georgia, serif; color: #16222b; margin: 0 0 1.8cqw; }
.ws2-paper p { font: 2.3cqw/1.6 Georgia, serif; color: #2b3a45; margin: 0 0 1.8cqw; }

/* The selection creeps across the words, as if somebody were dragging.
   Drawn as a background so it sits behind the words, not over them. */
.ws2-quote { position: relative;
             background-image: linear-gradient(#bcd8f7, #bcd8f7);
             background-repeat: no-repeat; background-size: 0% 100%;
             transition: background-size .9s ease-in-out; }
.ws2-quote.is-selected { background-size: 100% 100%; }
.ws2-sel { display: none; }

.ws2-coupon { display: block; width: 88%; height: auto; margin: 2.4cqw 0 0; }

/* WaySpeak's own page, drawn live over the photograph. */
.ws2-page { position: absolute; left: 3.2%; top: 15.8%; width: 93.5%;
            font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
            font-size: 2.913cqw; line-height: 4.369cqw; color: #20252c;
            text-align: left; }
.ws2-line { position: relative; display: block; }
.ws2-line.is-on::before { content: ""; position: absolute; inset: -0.5cqw -1.5cqw;
            border: 0.24cqw solid #17b6c6; border-radius: 0.7cqw;
            background: rgba(120,224,235,.20); }
.ws2-w { position: relative; border-radius: 2px; }
.ws2-w.is-on { background: #3fdcea; color: #101418; }

.ws2-count { position: absolute; left: 64%; top: 92.4%; width: 13.5%; height: 3.2%;
             display: flex; align-items: center; justify-content: center; white-space: nowrap;
             font-size: 1.65cqw; border-radius: 0.9cqw;
             background: #fbfaf7; color: #1f1f1f; border: 0.12cqw solid #c8c8c4; }
.ws2-rail { position: absolute; left: 2%; right: 2%; top: 89.8%; height: 3%;
            background: #D8C6AA; }
.ws2-track { position: absolute; left: 2%; right: 2%; top: 47%; height: 0.3cqw;
             border-radius: 0.15cqw; background: #BAA991; }
.ws2-fill { position: absolute; left: 0; top: 0; height: 100%;
            border-radius: 0.15cqw; background: #0f6cbd; transition: width .3s linear; }
.ws2-dot { position: absolute; top: 50%; width: 1.3cqw; height: 1.3cqw;
           margin: -0.65cqw 0 0 -0.65cqw; border-radius: 50%;
           background: #0f6cbd; transition: left .3s linear; }

/* Scene two follows whichever look has been chosen. */
.ws2-app.on-light { background-image: url("assets/screenshots/side-light.png"); }
.ws2-app.on-light.is-reading { background-image: url("assets/screenshots/side-light-reading.png"); }
.ws2-app.on-dark  { background-image: url("assets/screenshots/side-dark.png"); }
.ws2-app.on-dark.is-reading { background-image: url("assets/screenshots/side-dark-reading.png"); }
.ws2-page.on-dark { color: #e9ecef; }
.ws2-count.on-dark { background: #2b2b2b; color: #eaeaea; border-color: #4a4a4a; }
.ws2-rail.on-light { background: #F6FAFE; }
.ws2-rail.on-light .ws2-track { background: #CDD1D5; }
.ws2-rail.on-dark { background: #30343A; }
.ws2-rail.on-dark .ws2-track { background: #464646; }

/* ---- the cards between the parts ------------------------------------------
   Michael reads each card aloud, so nobody has to read it quickly, and the
   words are on screen as well for anyone with the sound off. It is painted in
   the website's own colours rather than the app's, so it reads as the site
   talking rather than as something WaySpeak is showing. */
.ws-card {
  background: linear-gradient(160deg, #123244 0%, #0e2430 100%);
  color: #fff; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 8%;
}
.ws-card h3 { font: 700 5.2cqw/1.15 "Segoe UI", system-ui, sans-serif;
              margin: 0 0 2.4cqw; letter-spacing: -0.01em; }
.ws-card p  { font: 2.7cqw/1.45 "Segoe UI", system-ui, sans-serif;
              margin: 0; color: #a9d2e4; max-width: 34em; }
/* Only the card being shown is laid out; the rule above must not override the
   hiding done by .ws-scene.
   .ws-scene is named as well, on purpose. Without it this rule and the
   .ws-scene.is-arriving rule further down are exactly as strong as each
   other, so the later one won and the card was a plain block for the whole
   half second it slid in: the words sat 156 pixels too high and 269 pixels
   too wide, then snapped into the middle. That was the flicker on all six
   parts (owner, 28 September). Do not weaken this selector. */
.ws-scene.ws-card.is-shown,
.ws-scene.ws-card.is-leaving,
.ws-scene.ws-card.is-arriving { display: flex; }

/* ---- pushing from one part to the next ------------------------------------
   The next part slides in from the right and pushes this one out to the left,
   the way a slide show moves on. Sideways movement, not a fade: a fade left
   both parts half drawn on screen when the browser lost track of it. */
.ws-scene.is-leaving  { display: block; animation: ws-push-out .55s ease both; }
.ws-scene.is-arriving { display: block; animation: ws-push-in  .55s ease both; }
@keyframes ws-push-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes ws-push-in  { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ---- scene three: drawing a box round words in a picture ------------------
   The same two windows as scene two. The whole frame dims, exactly as the app
   dims your screen when you press Draw Box, and a dashed box is drawn round
   the picture. Then the dim lifts and WaySpeak reads what was inside it. */
.ws3-app     { left: 0;
               background: url("assets/screenshots/side-warm.png") 0 0/100% 100% no-repeat;
               container-type: inline-size; }
.ws3-app.is-reading { background-image: url("assets/screenshots/side-warm-reading.png"); }
.ws3-app.on-light { background-image: url("assets/screenshots/side-light.png"); }
.ws3-app.on-light.is-reading { background-image: url("assets/screenshots/side-light-reading.png"); }
.ws3-app.on-dark  { background-image: url("assets/screenshots/side-dark.png"); }
.ws3-app.on-dark.is-reading { background-image: url("assets/screenshots/side-dark-reading.png"); }
.ws3-browser { left: 50%; background: #fff; display: flex; flex-direction: column;
               container-type: inline-size; }

.ws3-page { position: absolute; left: 3.2%; top: 15.8%; width: 93.5%;
            font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
            font-size: 2.913cqw; line-height: 4.369cqw; color: #20252c;
            text-align: left; }
.ws3-page.on-dark { color: #e9ecef; }
.ws3-count { position: absolute; left: 64%; top: 92.4%; width: 13.5%; height: 3.2%;
             display: flex; align-items: center; justify-content: center; white-space: nowrap;
             font-size: 1.65cqw; border-radius: 0.9cqw;
             background: #fbfaf7; color: #1f1f1f; border: 0.12cqw solid #c8c8c4; }
.ws3-count.on-dark { background: #2b2b2b; color: #eaeaea; border-color: #4a4a4a; }
.ws3-rail { position: absolute; left: 2%; right: 2%; top: 89.8%; height: 3%;
            background: #D8C6AA; }
.ws3-rail.on-light { background: #F6FAFE; }
.ws3-rail.on-dark  { background: #30343A; }
.ws3-fill { position: absolute; left: 0; top: 0; height: 100%;
            border-radius: 0.15cqw; background: #0f6cbd; transition: width .3s linear; }
.ws3-dot  { position: absolute; top: 50%; width: 1.3cqw; height: 1.3cqw;
            margin: -0.65cqw 0 0 -0.65cqw; border-radius: 50%;
            background: #0f6cbd; transition: left .3s linear; }

/* The dim, and the box being dragged over the picture. */
.ws3-dim { position: absolute; inset: 0; background: rgba(10,18,24,.55);
           opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.ws-s3.is-dimmed .ws3-dim { opacity: 1; }
.ws3-box { position: absolute; left: 52%; top: 36%; width: 0; height: 0;
           border: 0.25cqw dashed #ffd34d; border-radius: 0.3cqw;
           background: rgba(255,211,77,.10); opacity: 0;
           transition: width .9s ease, height .9s ease, opacity .25s ease; }
.ws-s3.is-dimmed .ws3-box { opacity: 1; }
/* The box's place and size are set in demo.js, measured off the picture, so
   it holds exactly the sentences WaySpeak reads out and nothing else. */

/* The words drawn live over WaySpeak's page in scene three. */
.ws3-line { position: relative; display: block; }
.ws3-line.is-on::before { content: ""; position: absolute; inset: -0.5cqw -1.5cqw;
            border: 0.24cqw solid #17b6c6; border-radius: 0.7cqw;
            background: rgba(120,224,235,.20); }
.ws3-w { position: relative; border-radius: 2px; }
.ws3-w.is-on { background: #3fdcea; color: #101418; }

/* Nothing is in WaySpeak's page until it has been given something to read.
   Before that the photograph's own "No text yet" shows through, which is what
   the real app looks like while it is waiting. */
.ws2-page, .ws2-count, .ws2-rail,
.ws3-page, .ws3-count, .ws3-rail { opacity: 0; transition: opacity .35s ease; }
.ws-s2.is-live .ws2-page, .ws-s2.is-live .ws2-count, .ws-s2.is-live .ws2-rail,
.ws-s7.is-live .ws2-page, .ws-s7.is-live .ws2-count, .ws-s7.is-live .ws2-rail,
.ws-s8.is-live .ws2-page, .ws-s8.is-live .ws2-count, .ws-s8.is-live .ws2-rail,
.ws-s3.is-live .ws3-page, .ws-s3.is-live .ws3-count, .ws-s3.is-live .ws3-rail { opacity: 1; }

/* ---- scene four: talking instead of typing --------------------------------
   Nothing is read here. A message is spoken and the words land in the message
   box on the web page, because that is what the app really does: the words go
   into whatever program you were already in. WaySpeak, on the left, shows that
   it is listening and shows what it has heard so far, exactly as the real app
   does while voice typing. There is no sentence count and no progress bar,
   because nothing is being read. */
.ws4-app     { left: 0;
               background: url("assets/screenshots/side-warm.png") 0 0/100% 100% no-repeat;
               container-type: inline-size; }
.ws4-app.on-light { background-image: url("assets/screenshots/side-light.png"); }
.ws4-app.on-dark  { background-image: url("assets/screenshots/side-dark.png"); }
.ws4-browser { left: 50%; background: #fff; display: flex; flex-direction: column;
               container-type: inline-size; }

.ws4-page { position: absolute; left: 3.2%; top: 15.8%; width: 93.5%;
            font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
            font-size: 2.913cqw; line-height: 4.369cqw; color: #20252c;
            text-align: left; }
.ws4-page.on-dark { color: #e9ecef; }
.ws4-head { margin: 0; color: #0f6cbd; font-weight: 600; }
.ws4-page.on-dark .ws4-head { color: #6fb6f0; }
.ws4-said { margin: 0; min-height: 4.369cqw; }

/* The message being written. The typed words are the same words the voice is
   saying, a beat behind, the way real voice typing arrives. */
.ws4-field { font: 2.2cqw/1.6 "Segoe UI", system-ui, sans-serif; color: #2b3a45;
             border-bottom: 1px solid #e3e8ed; padding: 1.1cqw 0; }
.ws4-label { display: inline-block; width: 10cqw; color: #7c8b97; }
.ws4-boxlabel { font: 2.0cqw/1.6 "Segoe UI", system-ui, sans-serif; color: #7c8b97;
                margin: 2.0cqw 0 0.8cqw; }
.ws4-box { min-height: 22cqw; border: 1px solid #ccd4dc; border-radius: 0.8cqw;
           padding: 1.6cqw 1.8cqw; background: #fdfefe;
           font: 2.3cqw/1.6 Georgia, serif; color: #2b3a45; text-align: left; }
.ws-s4.is-live .ws4-box { border-color: #0f6cbd; box-shadow: 0 0 0 0.25cqw rgba(15,108,189,.15); }
.ws4-caret { display: none; width: 0.22cqw; height: 2.6cqw; margin-left: 0.15cqw;
             background: #2b3a45; vertical-align: -0.45cqw; }
.ws-s4.is-live .ws4-caret { display: inline-block; animation: ws4-blink 1.05s step-end infinite; }
@keyframes ws4-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Nothing shows in WaySpeak's page until it has actually started listening. */
.ws4-page { opacity: 0; transition: opacity .35s ease; }
.ws-s4.is-live .ws4-page { opacity: 1; }
.ws-s4.is-done .ws4-page { opacity: 1; }
.ws-s4.is-done .ws4-head { display: none; }

/* ---- scene five: looking a word up ----------------------------------------
   One word on the web page is highlighted and looked up. The left-hand window
   is the app's own dictionary view, photographed from the real window with the
   four buttons showing SPEAK WORD, SPELL WORD, READ MEANING and BACK. The card
   over it is drawn here so the word, the kind of word and the meaning can
   light up as they are spoken. */
.ws5-app     { left: 0;
               background: url("assets/screenshots/side-warm-dictionary.png") 0 0/100% 100% no-repeat;
               container-type: inline-size; }
.ws5-app.on-light { background-image: url("assets/screenshots/side-light-dictionary.png"); }
.ws5-app.on-dark  { background-image: url("assets/screenshots/side-dark-dictionary.png"); }
.ws5-browser { left: 50%; background: #fff; display: flex; flex-direction: column;
               container-type: inline-size; }

/* The one word being looked up. The selection creeps across it, the same way
   the paragraph is selected in the earlier part. */
.ws5-pick { background-image: linear-gradient(#bcd8f7, #bcd8f7);
            background-repeat: no-repeat; background-size: 0% 100%;
            transition: background-size .5s ease-in-out; }
.ws-s5.is-picked .ws5-pick { background-size: 100% 100%; }

/* The dictionary card, drawn over the photograph's empty page. */
.ws5-card { position: absolute; left: 4.9%; top: 15.8%; width: 90%;
            font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
            color: #20252c; text-align: left;
            opacity: 0; transition: opacity .35s ease; }
.ws5-card.on-dark { color: #e9ecef; }
.ws-s5.is-open .ws5-card { opacity: 1; }
.ws5-top { margin: 0 0 1.2cqw; }
.ws5-word { font-size: 4.37cqw; font-weight: 700; }
.ws5-part { font-size: 2.73cqw; margin-left: 1.8cqw; opacity: .75; }
.ws5-meaning { margin: 0; font-size: 3.46cqw; line-height: 5.2cqw; }

/* Whatever the voice is saying lights up, the same colours as the reading
   parts, so it is plainly the same idea in a different place. */
.ws5-card .lit { background: #3fdcea; color: #101418; border-radius: 2px; }

/* ---- scene six: out of the way, still reading -----------------------------
   The web page fills the frame and WaySpeak sits over the left of it, reading.
   Part way through it shrinks into the small bar and carries on. Once it is
   small the app shows no words at all, which is what compact view really does,
   so from that moment there is nothing to light up and the voice carries the
   part on its own. */
.ws6-browser { position: absolute; inset: 0; background: #fff;
               display: flex; flex-direction: column;
               container-type: inline-size; }
.ws6-browser .ws2-chrome, .ws6-browser .ws2-barrow { font-size: 1cqw; }
.ws6-browser .ws2-tab, .ws6-browser .ws2-nav, .ws6-browser .ws2-addr { font-size: 1.2cqw; }
.ws6-browser .ws2-paper h3 { font-size: 2.2cqw; }
.ws6-browser .ws2-paper p { font-size: 1.45cqw; line-height: 1.7; }

.ws6-app { left: 0; top: 0; width: 50%; height: 100%;
           background: url("assets/screenshots/side-warm.png") 0 0/100% 100% no-repeat;
           container-type: inline-size;
           transform-origin: 6% 88%;
           transition: transform .85s ease-in, opacity .5s ease-in .35s; }
.ws6-app.is-reading { background-image: url("assets/screenshots/side-warm-reading.png"); }
.ws6-app.on-light { background-image: url("assets/screenshots/side-light.png"); }
.ws6-app.on-light.is-reading { background-image: url("assets/screenshots/side-light-reading.png"); }
.ws6-app.on-dark { background-image: url("assets/screenshots/side-dark.png"); }
.ws6-app.on-dark.is-reading { background-image: url("assets/screenshots/side-dark-reading.png"); }

/* The shrink itself: the window draws into the corner where the small bar is
   about to appear, so one plainly becomes the other. */
.ws-s6.is-small .ws6-app { transform: scale(.30); opacity: 0; }

.ws6-bar { position: absolute; left: 3%; bottom: 7%; width: 29.2%; height: auto;
           opacity: 0; transform: scale(.8); transform-origin: 0 100%;
           transition: opacity .4s ease .55s, transform .4s ease .55s;
           box-shadow: 0 0.6cqw 2cqw rgba(8,20,28,.35); border-radius: 0.6cqw; }
.ws-s6.is-small .ws6-bar { opacity: 1; transform: scale(1); }

.ws6-page { position: absolute; left: 3.2%; top: 15.8%; width: 93.5%;
            font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
            font-size: 2.913cqw; line-height: 4.369cqw; color: #20252c;
            text-align: left; }
.ws6-page.on-dark { color: #e9ecef; }
.ws6-line { position: relative; display: block; }
.ws6-line.is-on::before { content: ""; position: absolute; inset: -0.5cqw -1.5cqw;
            border: 0.24cqw solid #17b6c6; border-radius: 0.7cqw;
            background: rgba(120,224,235,.20); }
.ws6-w { position: relative; border-radius: 2px; }
.ws6-w.is-on { background: #3fdcea; color: #101418; }

.ws6-count { position: absolute; left: 64%; top: 92.4%; width: 13.5%; height: 3.2%;
             display: flex; align-items: center; justify-content: center; white-space: nowrap;
             font-size: 1.65cqw; border-radius: 0.9cqw;
             background: #fbfaf7; color: #1f1f1f; border: 0.12cqw solid #c8c8c4; }
.ws6-count.on-dark { background: #2b2b2b; color: #eaeaea; border-color: #4a4a4a; }
.ws6-rail { position: absolute; left: 2%; right: 2%; top: 89.8%; height: 3%;
            background: #D8C6AA; }
.ws6-rail.on-light { background: #F6FAFE; }
.ws6-rail.on-dark { background: #30343A; }
.ws6-fill { position: absolute; left: 0; top: 0; height: 100%;
            border-radius: 0.15cqw; background: #0f6cbd; transition: width .3s linear; }
.ws6-dot { position: absolute; top: 50%; width: 1.3cqw; height: 1.3cqw;
           margin: -0.65cqw 0 0 -0.65cqw; border-radius: 50%;
           background: #0f6cbd; transition: left .3s linear; }

/* Nothing shows in the page until it has been given something to read. */
.ws6-page, .ws6-count, .ws6-rail { opacity: 0; transition: opacity .35s ease; }
.ws-s6.is-live .ws6-page, .ws-s6.is-live .ws6-count, .ws-s6.is-live .ws6-rail { opacity: 1; }
.ws-s6.is-small .ws6-page, .ws-s6.is-small .ws6-count, .ws-s6.is-small .ws6-rail { opacity: 0; }

/* ---- jump straight to one part --------------------------------------------
   Two minutes is a lot to ask of somebody who wants to know about one thing.
   Each box plays its own part and stops at the end of it. They are words, not
   pictures, and they are numbered in the order the full run shows them, so the
   list reads the same way whether it is pressed or watched. */
.ws-parts { margin: 26px auto 0; max-width: 1284px; }
.ws-parts-title { font: 600 16px "Segoe UI", system-ui, sans-serif;
                  color: #4a6473; margin: 0 0 12px; text-align: center; }
.ws-parts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.ws-part {
  display: flex; align-items: center; gap: 12px; text-align: left;
  font: 600 16px "Segoe UI", system-ui, sans-serif;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: #fff; color: #14323f;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.ws-part:hover { background: #f1f6f9; border-color: #9fc3d4; }
.ws-part:focus-visible { outline: 3px solid #0f6cbd; outline-offset: 2px; }
.ws-part.is-playing { border-color: #0f6cbd; background: #eef6fd; color: #0b4e88; }

/* The number, so the boxes and the full run are plainly the same six things. */
.ws-part-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e7eff4; color: #2d5468; font-size: 15px; font-weight: 700;
}
.ws-part.is-playing .ws-part-n { background: #0f6cbd; color: #fff; }
.ws-part-w { line-height: 1.25; }
/* The seventh part (Hear it in your language, 6 October 2026) takes a whole row,
   so three rows of the grid stay even instead of leaving one box on its own. */
.ws-part.is-wide { grid-column: 1 / -1; justify-content: center; }

/* On a narrow screen one box per line, full width, big enough for a thumb. */
@media (max-width: 820px) {
  .ws-parts-grid { grid-template-columns: 1fr; gap: 10px; }
  .ws-part { padding: 16px; font-size: 17px; }
}

/* ---- a closer look: the same pictures in all three looks -------------------
   The three buttons swap every picture at once, so somebody can see what the
   app will look like on their own screen before they buy it. The words on the
   reading picture and the dictionary card are drawn here rather than baked
   into the photograph, so they stay sharp and can follow the chosen look. */
/* The line that used to sit under the heading was deleted on
   28 September, and it was holding the space above these buttons. */
.shot-looks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
              margin: 36px 0 26px; }

.shot-pic { position: relative; container-type: inline-size; line-height: 0; }
.shot-pic img { display: block; width: 100%; }

/* The reading picture: the same measurements the demo uses for this frame. */
.sp-page { position: absolute; left: 3.115%; top: 23.165%; width: 93.7%;
           font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
           font-size: 1.869cqw; line-height: 2.804cqw; color: #20252c; text-align: left; }
.sp-page.on-dark { color: #e9ecef; }
.sp-para { margin: 0 0 2.804cqw 0; }
.sp-line { position: relative; display: block; }
.sp-line.is-on::before { content: ""; position: absolute; inset: -0.35cqw -1.4cqw;
           border: 0.16cqw solid #17b6c6; border-radius: 0.5cqw;
           background: rgba(120,224,235,.20); }
.sp-w { position: relative; border-radius: 2px; }
.sp-w.is-on { background: #3fdcea; color: #101418; }
.sp-count { position: absolute; left: 58.8%; top: 92.3%; width: 11%; height: 3.6%;
            display: flex; align-items: center; justify-content: center; white-space: nowrap;
            font-size: 1.09cqw; border-radius: 0.6cqw; line-height: normal;
            background: #fbfaf7; color: #1f1f1f; border: 0.08cqw solid #c8c8c4; }
.sp-count.on-dark { background: #2b2b2b; color: #eaeaea; border-color: #4a4a4a; }

/* The dictionary card, over the photograph's empty page. */
.sp-card { position: absolute; left: 4.9%; top: 33.5%; width: 90%;
           font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
           color: #20252c; text-align: left; line-height: normal; }
.sp-card.on-dark { color: #e9ecef; }
.sp-top { margin: 0 0 1.2cqw; }
.sp-word { font-size: 4.37cqw; font-weight: 700; }
.sp-part { font-size: 2.73cqw; margin-left: 1.8cqw; opacity: .75; }
.sp-meaning { margin: 0; font-size: 3.46cqw; line-height: 5.2cqw; }

/* The compact bar is a small picture; it would look lost stretched across a
   whole card, so it sits at its own size with room round it. */
.sp-small { display: flex; align-items: center; justify-content: center;
            padding: 8% 6%; background: #eef3f7; }
.sp-small img { width: 78%; border-radius: 8px;
                box-shadow: 0 8px 24px -10px rgba(16,40,56,.45); }

/* The words drawn on top of these pictures are there to be looked at, not
   read with the mouse. Letting them take the mouse meant a click landed on
   the text instead of the picture, and dragging selected the words. They now
   ignore the mouse entirely, so a click always reaches the picture. The
   captions underneath are untouched and can still be selected and read. */
.shot-pic > *:not(img) { user-select: none; -webkit-user-select: none; pointer-events: none; }

/* The three pictures sit across one row, asked for by the owner on
   28 September, when Settings was taken out of this section altogether. */
.shot-grid { grid-template-columns: repeat(3, 1fr); }

/* On a phone they go one under the other, full width. */
@media (max-width: 760px) { .shot-grid { grid-template-columns: 1fr; } }

/* A closer look uses the spare room at the sides. The rest of the page stays
   1080 across; only these pictures stretch, because shrinking them is what
   made the writing inside them impossible to read. */
.wrap-wide { max-width: 1440px; }


/* ---------- the owner's own words, added 28 September 2026 ----------
   Set as a piece of writing, not as a panel of marketing: one narrow
   column so the lines are short enough to follow, generous line spacing,
   and text a step larger than the rest of the page. It sits between the
   privacy promise and the price on purpose. */
.story-card {
  max-width: 680px; margin: 0 auto;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 40px 44px;
  box-shadow: 0 20px 50px -24px rgba(23,61,84,.3);
}
.story-title { font-size: 28px; margin: 0 0 22px; color: var(--ink); }
.story-card p { font-size: 18px; line-height: 1.75; color: var(--ink); margin: 0 0 18px; }
.story-card p:last-of-type { margin-bottom: 0; }
/* His photograph signs the piece, beside his name at the end, so the
   reader finishes on the person who wrote it. At the top it left a gap of
   white beside the heading (owner, 28 September). */
.story-sign { display: flex; align-items: center; justify-content: center; gap: 16px;
              margin-top: 28px; font-weight: 600; color: var(--muted); }
.story-photo { width: 88px; height: 88px; border-radius: 50%; display: block; flex: none;
               /* the same pale blue as the line round the card itself, so the
                  ring belongs to the box. The darker teal and the brighter
                  demo blue were both too strong (owner, 28 September). */
               border: 3px solid var(--border); }
@media (max-width: 760px) { .story-card { padding: 28px 22px; } }

/* The demo band is the first thing under the dark top, so it is brought up
   closer to it rather than carrying a full section's worth of space above
   (owner, 28 September). The demo's own size is unchanged. */
#demo { padding-top: 40px; }

/* The caption under the demo reserves room so the buttons below it do not
   jump when a caption appears. It was reserving two lines everywhere, but
   on a wide screen every caption is one line - measured, all six come to
   27 pixels against 43 reserved - so it reserves one line there and keeps
   two where the words really do wrap (owner, 28 September: too much space
   under the demo). */
@media (min-width: 861px) { .ws-caption { min-height: 1.5em; } }

/* ---------- the demo filling the screen on a phone --------------------------
   Asked for by the owner on 28 September. On a phone the demo is squeezed to
   about 359 pixels across, a quarter of the 1284 it is drawn at, which puts
   the reading text at roughly 7 pixels tall. Nobody can see that. This lets it
   fill the screen the way a video does.

   The wide letterbox shape is the difficulty: an upright phone is tall and
   narrow, so the only way to make the demo genuinely big is to use the phone's
   long side. Android lets a page ask the phone to turn; an iPhone never has,
   so there the picture is laid on its side instead, which is what YouTube does
   on an iPhone. Turning the phone by hand straightens it out on either.
   --------------------------------------------------------------------------- */

/* Hidden everywhere until the script decides this is a touch screen, so a
   computer never sees it. */
.ws-big, .ws-shut { display: none; }
.ws-demo.can-big .ws-big { display: inline-block; }

.ws-controls .ws-big { font-weight: 700; }

/* Filling the screen. This works whether the browser gave us real full screen
   or refused, because it covers everything either way -- an older iPhone, which
   will not do full screen for anything but a video, still gets the same result
   apart from the address bar staying put. */
.ws-demo.is-big {
  position: fixed; inset: 0; z-index: 9999;
  width: 100%; max-width: none; margin: 0;
  background: #0d1b24;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* The parts list, the look buttons and the caption are put away while it is
   big, so every pixel goes to the picture itself. */
.ws-demo.is-big .ws-parts,
.ws-demo.is-big .ws-looks,
.ws-demo.is-big .ws-caption { display: none; }

/* flex: none matters. Centring it makes it a flex item, and a flex item is
   allowed to shrink to fit: laid on its side it asked for the height of the
   screen and was squeezed back down to the width instead, which put it back to
   roughly the size it was trying to escape. */
.ws-demo.is-big .ws-stage { flex: none; }
.ws-demo.is-big .ws-app {
  flex: none;
  width: min(100vw, calc(100vh * 1284 / 544));
  border-radius: 0; box-shadow: none;
}

/* The controls sit over the picture at the bottom, upright, because the person
   watching is upright even when the picture has been laid on its side. */
.ws-demo.is-big .ws-controls {
  position: fixed; left: 0; right: 0; bottom: 14px;
  margin: 0; z-index: 2; pointer-events: none;
}
.ws-demo.is-big .ws-controls button { pointer-events: auto; }
.ws-demo.is-big .ws-big { display: none; }

.ws-demo.is-big .ws-shut {
  display: block; position: fixed; top: 12px; right: 12px; z-index: 3;
  padding: 12px 18px; font-size: 17px; font-weight: 700;
  border-radius: 10px; border: 1px solid #ffffff55;
  background: rgba(13,27,36,.82); color: #fff; cursor: pointer;
}
.ws-demo.is-big .ws-shut:hover { background: rgba(13,27,36,.95); }

/* Upright phone, and the phone would not turn itself: lay the picture on its
   side so it can use the long edge. Rotating does not change the space the
   picture takes up in the layout, so it stays centred. */
@media (orientation: portrait) {
  .ws-demo.is-big.is-sideways .ws-app {
    width: 100vh;
    transform: rotate(90deg);
    transform-origin: center;
  }
}

/* Somebody has turned the phone sideways: it is already the right way round,
   so the picture is put back upright at its full size. */
@media (orientation: landscape) {
  .ws-demo.is-big.is-sideways .ws-app { transform: none; width: min(100vw, calc(100vh * 1284 / 544)); }
}

/* ---------- the contact form -----------------------------------------------
   Added 29 September 2026. The boxes are deliberately large: this is a site
   for people who find reading hard, so the labels are full size rather than
   the small grey ones forms usually have, and every box is tall enough to
   press on a phone without aiming.

   Nothing here is told apart by colour alone. A box with a problem gets a
   thicker edge, and the reason is written underneath in words beginning
   "Please check this", so it reads the same to somebody who cannot see the
   colour and to a screen reader.
   --------------------------------------------------------------------------- */

.contact-form { max-width: 640px; margin: 26px 0 8px; }

.contact-form .field { display: block; margin: 0 0 22px; }

.contact-form label {
  display: block; font-size: 19px; font-weight: 700;
  color: var(--ink, #173d54); margin: 0 0 6px;
}

.contact-form .field-hint {
  display: block; font-size: 16px; color: #5b7383; margin: 0 0 8px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block; width: 100%; box-sizing: border-box;
  font: inherit; font-size: 18px; line-height: 1.5;
  padding: 13px 14px; color: #14283a; background: #fff;
  border: 2px solid #9db4c2; border-radius: 10px;
}

.contact-form textarea { resize: vertical; min-height: 170px; }

.contact-form input:focus, .contact-form textarea:focus {
  outline: 3px solid #17b6c6; outline-offset: 1px; border-color: #17b6c6;
}

/* A box with a problem. The thick dark edge is a shape change, not just a
   colour change, so it still reads on a screen that shows no colour. */
.contact-form [aria-invalid="true"] { border-width: 3px; border-color: #a3271f; }

.contact-form .field-error {
  display: block; margin: 7px 0 0; font-size: 17px; font-weight: 700;
  color: #8c1f18;
}

.form-error-top {
  border: 2px solid #a3271f; border-left-width: 8px; border-radius: 10px;
  background: #fdf2f1; color: #7a1a14;
  padding: 14px 16px; font-size: 18px; margin: 22px 0;
}

.form-done {
  border: 2px solid #1b8f7a; border-left-width: 8px; border-radius: 10px;
  background: #f0faf7; padding: 20px 22px; margin: 24px 0;
}
.form-done h2 { margin: 0 0 10px; font-size: 25px; color: #12604f; }
.form-done p { margin: 0 0 14px; }

.btn-send { font-size: 19px; padding: 15px 30px; }

.contact-or { margin-top: 26px; color: #4a6374; }

/* The box nobody can see. It is moved off the screen rather than hidden with
   display:none, because some robots skip anything that is switched off. */
.no-see {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .contact-form label { font-size: 18px; }
  .btn-send { width: 100%; }
}

/* ---------- the contact page: the raised card -----------------------------
   Added 29 September 2026. The page worked but looked flat, so the form now
   sits on a raised white card.

   The shadows are soft and tinted with the site blue rather than grey, which
   is what the home page already does, so the two pages look like one site.
   Nothing here carries meaning: turn every shadow off and the page still
   reads and works exactly the same.
   --------------------------------------------------------------------------- */

.contact-card {
  background: #fff;
  border: 1px solid var(--border, #d7e4e9);
  border-radius: 16px;
  padding: 32px 34px 34px;
  margin-top: 26px;
  box-shadow: 0 22px 54px -26px rgba(23, 61, 84, .40),
              0 2px 6px rgba(23, 61, 84, .06);
}

.contact-card > p:first-child { margin-top: 0; }

/* The boxes get a shadow of their own, so they read as something to write in
   rather than an outline on the page. It deepens when the box is in use. */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  box-shadow: inset 0 2px 4px rgba(23, 61, 84, .07);
}
.contact-form input:focus, .contact-form textarea:focus {
  box-shadow: inset 0 2px 4px rgba(23, 61, 84, .07),
              0 6px 16px -8px rgba(23, 61, 84, .45);
}

.btn-send {
  box-shadow: 0 12px 26px -12px rgba(23, 61, 84, .70);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -12px rgba(23, 61, 84, .75);
}

/* Somebody may have set their machine to stop things moving. Respect it. */
@media (prefers-reduced-motion: reduce) {
  .btn-send { transition: none; }
  .btn-send:hover { transform: none; }
}

@media (max-width: 600px) {
  .contact-card { padding: 24px 20px 26px; }
}
/* ---------- a quiet blue on the inside pages -------------------------------
   Asked for by the owner on 29 September 2026, in their words: some light
   blue, going light to dark, but "I'm not really to see it that much, but
   feel that it is there". So it is deliberately faint.

   The two colours are the site's own. #dceef4 is a shade of the --pale blue
   already used for the alternating bands on the home page, so these pages sit
   in the same family rather than introducing a new colour.

   It goes on .legal, which is the wrapper Contact, Privacy, Terms and Credits
   all share, so the four match without touching any of the four files.

   Readability was measured on the live pages rather than assumed. Against the
   darkest end of the gradient: headings 10.3 to one, body text 8 to one, and
   the small grey "Last updated" line -- the lightest text on any of these
   pages -- 4.7 to one. All pass the 4.5 to one that is asked for, but that
   last one only just, so do not make this blue any stronger without measuring
   again. Nothing here carries meaning -- turn the colour off and every page
   reads exactly the same.
   --------------------------------------------------------------------------- */

.legal { background: linear-gradient(180deg, #ffffff 0%, #dceef4 100%); }

/* The card gets the faintest hint of the same idea, so it belongs to the page
   it is sitting on instead of being a white rectangle dropped onto it. It is
   much weaker than the page behind it, which keeps the writing on something
   close to white. */
.contact-card { background: linear-gradient(180deg, #ffffff 0%, #f4fafc 100%); }

/* ---------- two cards on the pricing row -----------------------------------
   Asked for by the owner on 29 September 2026: a second card beside the price,
   with more about the app. The price card was alone in the middle of the row
   with empty space either side of it.

   The second card is who it is for. The owner was clear that WaySpeak "does not
   need to be for disabled people": somebody listening while they get on with
   something else, somebody who takes things in better by ear, somebody who
   wants it faster. None of that was anywhere on the page, which read as though
   the app were only for people who struggle to read. The hard-reading line is
   kept, and kept last, so widening who it is for never reads as backing away
   from the reason it was built.

   A card of requirements was built first and the owner rejected it: beside a
   price, people want a reason to buy, not a list of what their PC needs.

   The two cards are the same width and stretch to the same height, so neither
   looks like the more important one. Under 820 they stack, price first, because
   on a phone the price is what somebody scrolled down to find.
   --------------------------------------------------------------------------- */

.pricing-row {
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: center; align-items: stretch;
}

/* The row now decides the width, so the card stops centring itself. */
.pricing-row .pricing-card {
  flex: 1 1 420px; max-width: 460px; margin: 0;
  display: flex; flex-direction: column;
}

/* A list of facts is read, not admired, so this one is set left and a little
   larger than the price card's list. */
.pricing-facts { text-align: left; }
.pricing-facts h3 {
  margin: 0 0 18px; font-size: 24px; color: var(--ink);
}
.pricing-facts ul { margin: 0 0 18px; }
.pricing-facts ul li { font-size: 15.5px; line-height: 1.55; margin-bottom: 14px; }
.pricing-facts ul li::before { content: "•"; color: var(--blue); }

.pricing-facts .facts-note {
  margin: auto 0 0; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 14px; color: var(--muted);
}

@media (max-width: 820px) {
  .pricing-row { gap: 18px; }
  .pricing-row .pricing-card { flex: 1 1 100%; max-width: 460px; }
}

/* ---------- A closer look: three faults found on 29 September 2026 ----------
   The owner sent a photograph of this section on a window that was not full
   screen and said it looked cheap. It did. Three separate things were wrong,
   and the first was doing the most damage.

   1. Each card is a <figure>, and a browser gives every figure a margin of
      40px on the left and right of its own accord. Nobody had ever cleared it.
      The grid was handing each card a 247px column and the card was drawing
      itself 167px wide inside it, throwing away 80px three times over. That is
      where the empty blue the owner could see was going.

   2. The grid was set to align-items: start, so the three cards stopped at
      whatever height their own words needed -- 257, 343 and 323 pixels -- and
      sat along the top edge like a broken fence. They now stretch to match.

   3. Because of 1, a window of about 860 was giving each card a 167px column,
      which breaks a phrase like "A plain-language dictionary" across three
      lines. With the margin cleared the same window gives 247px and the words
      sit properly. The first attempt at this fixed it by dropping to a single
      narrow column, and the owner rightly rejected that: there was plenty of
      room, and the answer was to use it rather than to shrink away from it.
   --------------------------------------------------------------------------- */

.shot-card { margin: 0; }

.shot-grid { align-items: stretch; }

/* The picture keeps its own size and the words take the rest, so cards that
   stretch put their spare room at the bottom rather than round the photograph. */
.shot-card { display: flex; flex-direction: column; }
.shot-card .shot-pic { flex: none; }
.shot-card figcaption { flex: 1 1 auto; }

/* The owner was clear about the third one: do not make it narrower, use the
   room. Clearing the figure margin above gives each card its whole column
   back -- 247px instead of 167 on an 860 window, half as big again -- and the
   three stay side by side using the full width of the band. They only go one
   under the other on a phone, where there is genuinely no room for three. */

/* ---------- the X that closes the big demo ---------------------------------
   Changed on 29 September 2026 at the owner's request: the word "Close" became
   an X in the corner, the way video players do it.

   The project's own rule is never to rely on an icon alone, and this keeps
   that promise without changing the look. The X is drawn for the eye, but it
   is hidden from screen readers, and the button underneath carries the words
   "Close the big demo and go back to the page". Holding a finger on it, or
   resting a mouse, shows "Close". So nobody has to recognise the symbol.

   It is 48 by 48, which is the size a finger can hit without aiming, and it
   sits far enough from the corner that a phone's own rounded edge or camera
   notch cannot swallow it.
   --------------------------------------------------------------------------- */

.ws-demo.is-big .ws-shut {
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 400; line-height: 1;
  border-radius: 50%;
}

/* Where the words sit on the photograph's ruled page. Added 2026-09-30.
   The rules in the photographs are 36 pixels apart at full size (2.804cqw), the same as the
   text's line height, so the text is either on the rules or across them. It used to be across
   them: the rule ran 6.9 pixels above each baseline, through the middle of the small letters,
   so every line looked struck through. Nudged down 17 pixels so each rule now sits 12 pixels
   under its line of words, the same as the parts beside it (owner: "the lines are where the
   words are"). Measured from the photographs and from the page, not judged by eye. The size
   of the demo and of its pictures is untouched.
   The small-bar part (ws6) has three paragraphs, and the browser's own paragraph gap of 24
   pixels is not a whole number of ruled rows, so its second and third lines drifted onto the
   rules. A gap of exactly one row (4.369cqw) keeps every line the same distance above its rule. */
.ws6-para { margin: 2.913cqw 0 4.369cqw 0; }

/* The price card, filled out. Added 2026-09-30 at the owner's request: it was about a third
   empty at the bottom beside the "Who it's for" card. Three more lines were added to its list,
   and the button and the note are pinned to the bottom of the card, so it stays full at any
   width and any height the other card takes. */
.pricing-row .pricing-card:not(.pricing-facts) > .btn { margin-top: auto; }

/* "All feedback is helpful" - the welcome near the bottom of the front page, and the topic list
   on the contact form. Added 2026-09-30 at the owner's request. */
#feedback .section-sub { margin-bottom: 26px; }
.feedback-cta { text-align: center; margin: 0; }
.contact-form select {
  display: block; width: 100%; box-sizing: border-box;
  font: inherit; font-size: 18px; line-height: 1.5;
  padding: 13px 14px; color: #14283a; background: #fff;
  border: 2px solid #9db4c2; border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(23, 61, 84, .07);
}
.contact-form select:focus {
  outline: 3px solid #17b6c6; outline-offset: 1px; border-color: #17b6c6;
}

/* ---------- the tester pages (testers.php, manual.php) ---------------------
   Added 2 October 2026. Same principles as the contact form: big labels, big
   targets, nothing told apart by colour alone. Each answer is a whole button
   (the round mark and its words together), so it can be pressed anywhere on it
   with a finger, and the chosen one gets a thick edge as well as a colour. */

.contact-form input[type="password"] {
  display: block; width: 100%; box-sizing: border-box;
  font: inherit; font-size: 18px; line-height: 1.5;
  padding: 13px 14px; color: #14283a; background: #fff;
  border: 2px solid #9db4c2; border-radius: 10px;
}
.contact-form select {
  display: block; width: 100%; max-width: 420px; box-sizing: border-box;
  font: inherit; font-size: 18px; padding: 12px 12px; color: #14283a;
  background: #fff; border: 2px solid #9db4c2; border-radius: 10px;
}
.contact-form input[type="password"]:focus, .contact-form select:focus {
  outline: 3px solid #17b6c6; outline-offset: 1px; border-color: #17b6c6;
}

.tester-page .contact-card h2 { font-size: 23px; margin-top: 28px; }
.tester-signin { max-width: 560px; }

.tester-form { max-width: 760px; }
.tester-form textarea { min-height: 96px; }
.tester-q {
  border: 2px solid var(--border); border-radius: 14px;
  padding: 18px 20px 6px; margin: 0 0 22px; background: #fff;
}
.tester-q legend {
  font-size: 22px; font-weight: 800; color: var(--ink); padding: 0 8px;
}
.tester-q > .field-hint { font-size: 17px; color: #33475a; margin-bottom: 12px; }

.choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.contact-form .choice {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 600; margin: 0;
  padding: 12px 18px; min-height: 48px; box-sizing: border-box;
  border: 2px solid #9db4c2; border-radius: 999px; background: #fff; cursor: pointer;
}
.choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--blue); }
.choice:has(input:checked) { border-width: 3px; border-color: var(--blue); background: var(--pale); }
.choice:has(input:focus-visible) { outline: 3px solid #17b6c6; outline-offset: 2px; }
.choice-number { min-width: 76px; justify-content: center; }

/* The manual */
.manual-page .wrap { max-width: 820px; }
.manual-lead { font-size: 18px !important; }
.manual-print { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 8px; }
.manual-print .field-hint { color: var(--muted); font-size: 15px; }
.manual-contents {
  border: 2px solid var(--border); border-radius: 14px; background: var(--pale);
  padding: 6px 22px 10px; margin: 22px 0 10px;
}
.manual-contents h2 { margin-top: 12px; }
.manual-contents li { font-size: 17px; margin: 4px 0; }
.manual-page section { margin-top: 30px; }
.manual-page h2 { font-size: 25px; }
.manual-page h3 { font-size: 19px; margin: 22px 0 6px; color: var(--ink); }
.manual-page p, .manual-page li, .manual-page dd { font-size: 17px; line-height: 1.6; }
.manual-page figure { margin: 18px 0 24px; }
.manual-page figure img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 22px rgba(18, 49, 70, .10);
}
.manual-page figcaption { color: var(--muted); font-size: 15px; margin-top: 8px; }
.manual-page kbd, .tester-page kbd {
  display: inline-block; min-width: 1.6em; text-align: center;
  font: 700 15px/1.4 inherit; padding: 1px 8px;
  border: 2px solid #9db4c2; border-bottom-width: 3px; border-radius: 7px; background: #fff; color: var(--ink);
}
.manual-keys { border-collapse: collapse; margin: 10px 0 14px; width: 100%; max-width: 640px; }
.manual-keys th, .manual-keys td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 17px; }
.manual-keys th { color: var(--ink); }
.manual-help dt { font-weight: 800; font-size: 18px; color: var(--ink); margin-top: 16px; }
.manual-help dd { margin: 4px 0 0; }

/* Save as PDF / print: just the manual, in black on white, no site header or footer. */
@media print {
  header.site, footer.site, .manual-print { display: none !important; }
  body { background: #fff; }
  .manual-page { padding: 0; }
  .manual-page a { color: #000; text-decoration: none; }
  .manual-page section { break-inside: avoid-page; }
  .manual-page figure { break-inside: avoid; }
  .manual-page figure img { box-shadow: none; max-height: 9cm; width: auto; }
}

/* The calm note about Windows' "Windows protected your PC" box on the tester page (2026-10-04).
   A soft green edge says "this is fine" without relying on colour alone: the heading says it in words. */
.reassure {
  border: 2px solid #1b8f7a; border-left-width: 8px; border-radius: 12px;
  background: #f0faf7; padding: 16px 20px 6px; margin: 22px 0 8px;
}
.reassure h3 { margin: 0 0 10px; font-size: 21px; color: #12604f; }
.reassure figure { margin: 6px 0 14px; }
.reassure img, .manual-page figure img[src*="windows-protected"] {
  display: block; width: 100%; max-width: 340px; height: auto; border-radius: 8px;
}
.reassure p { font-size: 17px; }

/* ---- hear it in your language (6 October 2026) -------------------------------
   Under "A closer look": the words on the left, the real Settings window on
   the right, showing "Speak in" set to Spanish. One column on a narrow screen. */
.lang-block { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center;
              margin: 48px auto 0; max-width: 1180px; text-align: left; }
.lang-text h3 { font-size: 28px; margin: 0 0 12px; color: var(--ink); }
.lang-text p { font-size: 17px; color: var(--muted); margin: 0 0 10px; }
.lang-text .check-list { margin-top: 14px; }
.lang-list-title { font-weight: 700; color: var(--ink) !important; margin-top: 18px !important; }
.lang-list { font-size: 15.5px !important; line-height: 1.7; }
.lang-list b { color: var(--ink); }
.lang-note { font-size: 14.5px !important; }
.lang-shot { max-width: 520px; justify-self: center; }
@media (max-width: 860px) {
  .lang-block { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
}

/* ---------- Listen: the page reads itself out loud --------------------------
   Added 7 October 2026 at the owner's request (listen.js). A small Listen
   button under the WaySpeak logo, and a "Read from here" button on the left of
   every section heading. Every button has a word on it, not only a symbol.
   --------------------------------------------------------------------------- */

.wsl-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
header.site .wrap:has(.wsl-brand) { height: auto; min-height: 64px; padding-top: 6px; padding-bottom: 6px; }

.wsl-bar { display: flex; flex-wrap: nowrap; gap: 6px; }
.wsl-btn, .wsl-here {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-weight: 700; color: var(--blue);
  background: #fff; border: 1px solid var(--blue); cursor: pointer;
}
.wsl-btn { font-size: 13px; padding: 3px 11px 3px 8px; border-radius: 999px; }
.wsl-here { font-size: 14px; padding: 6px 13px 6px 10px; border-radius: 8px; white-space: nowrap; }
.wsl-btn:hover, .wsl-here:hover { background: var(--pale); }
.wsl-btn.is-on { background: var(--pale); }
.wsl-btn:focus-visible, .wsl-here:focus-visible { outline: 3px solid var(--ocean-2); outline-offset: 2px; }
.wsl-btn[hidden], .wsl-here[hidden] { display: none; }
.wsl-part { display: flex; flex-wrap: wrap; gap: 6px; }
.wsl-icon { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.wsl-icon rect, .wsl-icon path:first-child { stroke: none; }
.wsl-btn .wsl-icon { width: 15px; height: 15px; }

/* The heading keeps its own look; the button sits on its left. */
.wsl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 8px; }
.wsl-row.is-center { justify-content: center; }
.wsl-row > h2 { margin-bottom: 0; }
.wsl-row + .section-sub { margin-top: 0; }

/* The sentence being read gets a soft blue and the word being said the bright blue, the same
   two blues as the moving
   "read out loud" at the top of the page (owner, 7 October: not yellow; two blues). */
::highlight(wsl-now) { background-color: rgba(63, 220, 234, .28); }
::highlight(wsl-word) { background-color: #3fdcea; color: #101418; }

/* On a phone the menu bar scrolls away; the buttons stay at the top left. */
.wsl-bar.is-floating {
  position: fixed; top: 8px; left: 8px; z-index: 50;
  background: #fff; padding: 4px; border-radius: 999px;
  border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(20, 40, 55, .15);
}
@media (max-width: 820px) {
  .wsl-btn { font-size: 15px; padding: 6px 13px 6px 10px; }
  header.site .wrap:has(.wsl-brand) { padding-top: 10px; }
}

.wsl-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- faint WaySpeak logos behind the page (owner, October 24, 2026) ----------
   Two big, very faint, tilted blue logos so the page is not plain white: one cut off at a top
   corner and one at the opposite bottom corner. They are one picture for the whole page and
   stay still while the page slides over them, like looking through a window (the first try
   gave every part of the page its own logos, so they jumped at each part; the owner wanted
   one). Each page has them in different corners. The pictures are already faint (7.5%
   see-through) and tilted 12 degrees, so nothing sits on top of the words. The pale blue
   parts are slightly see-through so the logos carry on behind them. iPhones and iPads ignore
   "fixed"; there the logos simply move with the page. */
body {
  background-image: url("assets/icons/wayspeak-logo-faint-right.png"), url("assets/icons/wayspeak-logo-faint-left.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 640px 640px, 640px 640px;
  background-position: right -190px top -40px, left -190px bottom -150px;
}
/* The Videos page and the Privacy, Terms, Contact and Manual pages: the other two corners. */
body.page-videos, body:has(main.legal) {
  background-image: url("assets/icons/wayspeak-logo-faint-left.png"), url("assets/icons/wayspeak-logo-faint-right.png");
  background-position: left -190px top -20px, right -190px bottom -150px;
}
section.alt { background: rgba(234, 244, 247, .6); }
@media (max-width: 820px) {
  body { background-size: 340px 340px, 340px 340px; }
}
@media print {
  body { background-image: none !important; }
}

/* ---------- WaySpeak Video Gallery (owner, October 24, 2026) ----------
   The interview big on top, then the short videos in a row of tall cards, newest on the left,
   like YouTube Shorts. Pressing a card opens the player over the page. Nothing plays by itself. */
.vid-feature {
  display: grid; grid-template-columns: 1.55fr 1fr; align-items: stretch;
  background: rgba(255,255,255,.85); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px -18px rgba(23,61,84,.32);
  margin-bottom: 48px;
}
.vid-cover {
  position: relative; display: block; width: 100%; cursor: pointer; border: 0; padding: 0;
  background: #0d1b26; font: inherit; color: inherit;
}
.vid-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-cover:focus-visible { outline: 4px solid var(--ocean-1); outline-offset: 4px; }
.vid-feature .vid-cover { aspect-ratio: 16 / 9; }
.vid-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 45%); }
/* "Play video" in a white pill. The words are lifted 2px so they sit in the middle of the pill
   (the "y" and "p" hang below the line and made the word look low). */
.play-pill {
  position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: #10263a; font-weight: 700; font-size: 17px;
  height: 48px; padding: 0 22px 2px 8px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); white-space: nowrap;
}
.play-pill .dot {
  width: 34px; height: 34px; border-radius: 50%; margin-top: 2px; flex: none;
  background: linear-gradient(135deg, var(--ocean-1), var(--ocean-2)); display: grid; place-items: center;
}
.play-pill .dot svg { width: 14px; height: 14px; margin-left: 3px; fill: #fff; }
.vid-cover:hover .play-pill { background: var(--pale); }
.vid-feature .play-pill { top: 44%; bottom: auto; left: 5%; transform: translateY(-50%); height: 58px; font-size: 19px; }
.vid-feature .play-pill .dot { width: 42px; height: 42px; }
.vid-feature-text { padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; }
.vid-tag { align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.vid-feature-text h3 { font-size: 30px; margin: 0 0 10px; line-height: 1.2; }
.vid-feature-text p { color: var(--muted); font-size: 17px; margin: 0 0 18px; }
.vid-len { align-self: flex-start; font-size: 14px; font-weight: 600; background: var(--pale); border-radius: 999px; padding: 4px 14px 6px; }
.shorts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; max-width: 900px; margin: 0 auto 18px; }
.shorts-head h3 { font-size: 24px; margin: 0; }
.shorts-head span { color: var(--muted); font-size: 15px; }
.shorts { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 30px; max-width: 900px; margin: 0 auto; }
/* Three to a row; a shorter last row sits in the middle. */
.short { flex: 0 0 calc((100% - 60px) / 3); }
.short .vid-cover { aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px -18px rgba(23,61,84,.5); }
.short h4 { font-size: 17px; margin: 14px 2px 2px; }
.short p { margin: 0 2px; color: var(--muted); font-size: 14.5px; }
/* Deep drop shadows, and a 3D lift when the mouse is on a video or the keyboard reaches it:
   the card rises, tips back a little and its shadow grows (owner, October 24, 2026). Visitors
   who ask their computer for less motion get the bigger shadow without the movement. */
h1.section-title { font-size: 34px; text-align: center; margin: 0 0 8px; }
body.page-videos #videos { padding-top: 56px; }
.vid-feature { box-shadow: 0 26px 50px -18px rgba(16,38,58,.55), 0 6px 14px rgba(16,38,58,.14); }
.short .vid-cover { box-shadow: 0 24px 44px -14px rgba(16,38,58,.6), 0 5px 12px rgba(16,38,58,.2); }
.vid-feature, .short .vid-cover { transition: transform .25s ease, box-shadow .25s ease; }
.short .vid-cover:hover, .short .vid-cover:focus-visible {
  transform: perspective(900px) rotateX(6deg) translateY(-10px) scale(1.03);
  box-shadow: 0 40px 60px -18px rgba(16,38,58,.7), 0 10px 20px rgba(16,38,58,.25);
}
.vid-feature:hover, .vid-feature:focus-within {
  transform: perspective(1400px) rotateX(3deg) translateY(-6px);
  box-shadow: 0 40px 70px -20px rgba(16,38,58,.65), 0 10px 22px rgba(16,38,58,.2);
}
.short h4 { text-shadow: 0 1px 2px rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce) {
  .vid-feature, .short .vid-cover { transition: none; }
  .short .vid-cover:hover, .short .vid-cover:focus-visible, .vid-feature:hover, .vid-feature:focus-within { transform: none; }
}
/* The question written at the top of a cover whose picture has no words of its own. */
.cover-q {
  position: absolute; z-index: 2; left: 8%; right: 8%; top: 9%; text-align: center; color: #fff;
  font-weight: 800; font-size: 21px; line-height: 1.2;
  text-shadow: 0 0 14px rgba(120,160,255,.9), 0 2px 6px rgba(0,0,0,.8);
}
.vid-cover.has-q::before {
  content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: 40%;
  background: linear-gradient(to bottom, rgba(16,20,60,.85), rgba(16,20,60,0));
}
@media (max-width: 820px) {
  .vid-feature { grid-template-columns: 1fr; }
  .vid-feature-text { padding: 22px 20px 26px; }
  .vid-feature-text h3 { font-size: 24px; }
  .vid-feature .play-pill { height: 44px; font-size: 16px; top: 10px; bottom: auto; left: auto; right: 10px; transform: none; }
  .vid-feature .play-pill .dot { width: 34px; height: 34px; }
  /* A row to swipe sideways, like Instagram. */
  .shorts { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 8px; }
  .short { flex: 0 0 44%; scroll-snap-align: start; }
  .short .play-pill { font-size: 15px; height: 42px; bottom: 12px; gap: 8px; }
  .short .play-pill .dot { width: 30px; height: 30px; }
  .cover-q { font-size: 17px; }
}

/* The player: the video big over a dark background, with Close, Back and Next in words. */
.vplayer { position: fixed; inset: 0; z-index: 100; background: rgba(5,14,22,.97);
  display: none; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.vplayer.is-open { display: flex; }
body.vplayer-open { overflow: hidden; }
.vplayer-title { color: #fff; font-size: 20px; font-weight: 700; text-align: center; margin: 0 150px 12px; min-height: 28px; }
.vplayer-row { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; min-height: 0; }
.vplayer video { display: block; max-width: 100%; border-radius: 14px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.vplayer.is-tall video { height: calc(100vh - 110px); aspect-ratio: 9 / 16; width: auto; }
.vplayer.is-square video { height: min(calc(100vh - 110px), calc(100vw - 340px)); aspect-ratio: 1 / 1; width: auto; }
.vplayer.is-wide .vplayer-video-box { flex: 0 1 1100px; max-width: min(calc(100% - 300px), calc((100vh - 110px) * 16 / 9)); }
/* The first video has no Back and the last no Next; the empty place is kept so the video stays
   in the middle. */
.vplayer-btn.is-off { visibility: hidden; }
.vplayer.is-wide video { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.vplayer-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 52px; padding: 0 24px 3px;
  border-radius: 999px; background: #fff; color: #10263a; font: inherit; font-weight: 700; font-size: 18px; border: 0; cursor: pointer; flex: none; }
.vplayer-btn:hover { background: var(--pale); }
.vplayer-btn:focus-visible { outline: 4px solid #4fd1d4; outline-offset: 3px; }
.vplayer-btn[hidden] { display: none; }
.vplayer-close { position: absolute; top: 14px; right: 16px; }
@media (max-width: 820px) {
  .vplayer { padding: 70px 10px 12px; justify-content: flex-start; }
  .vplayer-title { margin: 0 8px 10px; font-size: 17px; }
  .vplayer-row { flex-wrap: wrap; gap: 12px; }
  .vplayer.is-tall video { height: calc(100vh - 220px); max-width: 100%; }
  .vplayer.is-square video { height: auto; width: 100%; }
  .vplayer.is-wide .vplayer-video-box { max-width: 100%; }
  /* The video on its own line, then Back and Next side by side under it. */
  .vplayer-row .vplayer-video-box { order: -1; flex: 0 0 100%; display: flex; justify-content: center; }
  .vplayer-btn { height: 48px; font-size: 17px; }
  .vplayer-close { top: 12px; right: 12px; }
}