/* Keyboard access and responsive layout for the site-refresh landing page. */
:root { --muted:#696455; }
/* AA contrast on the yellow LoQuill column (was 4.14:1). */
#comparison-table thead th.us small { color:var(--soft); }
/* Homepage FAQ: link to the full FAQ article. */
.faq-more { margin:28px 0 0; text-align:center; font-weight:600; }
.faq-more a { color:var(--blue); }
html { scroll-behavior:auto; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
:where(a,button,summary,input,select,[tabindex]):focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
:where(h1,h2)[tabindex]:focus-visible { outline-offset:10px; border-radius:4px; }
:where(h1,h2,main,section,[role="tabpanel"]) { scroll-margin-top:16px; }
/* Menu links land each section's top edge right under the sticky bar (74px with its border, 70px on phones); the section's
   own top padding is the breathing room. Other targets (headings, FAQ questions) keep a 16px gap. */
html { scroll-padding-top:74px; }
section { scroll-margin-top:0; }
.faq-list details { scroll-margin-top:16px; }
main:focus { outline:none; }
body { overflow-x:visible; }
.hero-img img { width:100%; max-width:100%; }
.cloud-illustration img { filter:grayscale(1); }
/* Content is always visible, including when reached by keyboard or find-in-page. */
.js .rv { opacity:1; transform:none; transition:none; }
.plans-stage { display:block; }
.plans-stage .is-off { display:none; }
.mobile-menu { display:none; }
.tbl-scroll { scroll-margin-top:16px; }
thead th:not(:first-child) { text-align:center; }
tr:last-child th { border-bottom:0; }
.stepper { overflow:visible; }
.stepper button { border-radius:10px; }
.foot-copy { display:inline-flex; align-items:center; min-height:44px; }
.foot-links a { min-height:44px; display:inline-flex; align-items:center; }
@media(max-width:920px) {
  #navMenu { display:none; }
  .mobile-menu:not([hidden]) { display:grid; gap:2px; padding:12px 24px 20px; border-top:1px solid var(--line); max-height:calc(100dvh - 74px); overflow-y:auto; }
  .mobile-menu a { display:block; padding:12px; min-height:48px; text-decoration:none; font-weight:600; border-radius:8px; }
  .mobile-menu a:hover { background:var(--card); }
  .hero-img img { max-width:420px; }
  /* Read the solution before its decorative illustration on narrow screens. */
  #models .story-grid { display:flex; flex-direction:column; align-items:stretch; }
  #models .story-grid > figure { order:2; }
  .story-grid figure img, .race-img img { max-width:380px; margin-inline:auto; }
  .plan { min-width:0; }
  .plans { max-width:580px; margin-inline:auto; }
  .team { width:100%; }
  .cta-img { display:none; }
}
@media(max-width:840px) {
  .tbl-scroll { margin-top:24px; box-shadow:3px 3px 0 var(--ink); border-radius:12px; }
  .other-competitor-note { display:none; }
  /* Compact comparison on mobile, including when JavaScript is disabled. */
  #comparison-table { min-width:0; width:100%; table-layout:fixed; }
  #comparison-table [data-competitor]:not([data-competitor="wispr"]) { display:none; }
  #comparison-table th, #comparison-table td { padding:14px 7px; font-size:.875rem; line-height:1.4; overflow-wrap:anywhere; }
  #comparison-table thead th { font-size:.9rem; }
  #comparison-table thead th:first-child { width:35%; }
  #comparison-table thead th small { font-size:.7rem; letter-spacing:0; }
  #comparison-table thead th:first-child,
  #comparison-table tbody th { width:auto; position:static; text-align:center; vertical-align:middle; padding-inline:10px; overflow-wrap:normal; }
  #comparison-table .cell { gap:6px; }
  #comparison-table .cell small, #comparison-table .price-cell small { font-size:.8rem; line-height:1.45; }
  #comparison-table .price-cell { font-size:1rem !important; }
  #comparison-table .mark { width:24px; height:24px; font-size:.8rem; }
  .tbl-note { text-align:left; font-size:.8rem; line-height:1.6; }
}
@media(max-width:640px) {
  html { font-size:16px; scroll-padding-top:70px; }
  .wrap { padding-inline:20px; }
  .nav-in { height:68px; gap:12px; }
  .brand { font-size:1.12rem; gap:7px; }
  .brand img { width:28px; height:28px; }
  .nav-right { gap:10px; }
  .nav-cta { min-height:44px; display:inline-flex; align-items:center; padding:8px 12px; font-size:.8rem; }
  .nav-burger { width:44px; height:44px; flex-shrink:0; }
  .mobile-menu:not([hidden]) { max-height:calc(100dvh - 70px); padding-inline:16px; }
  .hero { min-height:0; padding:34px 0 40px; }
  .hero h1 { font-size:clamp(2rem,7.8vw,2.9rem); line-height:1.06; }
  .hero-sub { font-size:1rem; line-height:1.6; margin:20px 0 24px; }
  .hero-grid { gap:24px; }
  .hero-cta { gap:12px; }
  .hero-cta .btn { flex:1 1 100%; justify-content:center; min-height:48px; }
  .hero-note { gap:8px; margin-top:22px; }
  .hero-note>span { font-size:.75rem; box-shadow:1px 1px 0 var(--ink); padding:6px 10px 6px 6px; }
  .hero-badge { margin-top:18px; }
  .hero-img img { max-width:280px; }
  section, .cta-band { padding:48px 0; }
  .pt-20,.pt-40,.pt-56 { padding-top:40px; }
  .sect-head h2,.story-grid h2,#race h2 { font-size:clamp(1.65rem,6.6vw,2.1rem) !important; line-height:1.12; }
  .sect-head p,.story-grid .lead { font-size:1rem; line-height:1.6; }
  .story-grid,.race-grid { gap:24px; }
  .story-grid figure img { max-width:300px; }
  .race-img img { width:100%; max-width:380px; }
  .plist { gap:14px; }
  .plist li { font-size:.95rem; line-height:1.55; }
  .plist li::before { top:2px; }
  .meters { margin-top:24px; }
  .steps { gap:0; margin-top:28px; }
  .step { padding:24px 0; border-top:1px solid var(--line); }
  .step p { font-size:1rem; line-height:1.6; }
  .step h3 { font-size:1.3rem; }
  .toggle { margin-top:24px; }
  .toggle button { min-height:44px; padding:10px 24px; font-size:1rem; }
  .plans { gap:28px; margin-top:32px; }
  .plan { padding:24px 20px; border-radius:14px; }
  .plan h3 { font-size:1.3rem; }
  .plan .who { font-size:.9rem; }
  .price { font-size:2.5rem; }
  .price small { font-size:.68rem; line-height:1.5; }
  .plan li { font-size:.9rem; line-height:1.5; }
  .plan .btn { min-height:48px; }
  .team { padding:24px 18px; margin-top:32px; }
  .team .who { font-size:.95rem; line-height:1.6; }
  .seat-row { gap:12px; }
  .stepper button { width:44px; height:48px; }
  .stepper input { width:64px; height:48px; }
  .seat-slider { height:44px; }
  .team-total .per { font-size:.7rem; line-height:1.6; }
  .plans-note,.team-note { font-size:.75rem; line-height:1.8; }
  summary { font-size:1.05rem; line-height:1.4; padding:20px 4px; min-height:60px; }
  summary .pm { width:28px; height:28px; }
  details p { font-size:1rem; line-height:1.65; padding:0 4px 22px; }
  .faq-list { margin-top:26px; }
  .cta-grid h2 { font-size:2rem; }
  .cta-grid p { font-size:1rem; margin-bottom:24px; }
  footer { padding:32px 0; }
  .foot-in { display:grid; gap:20px; }
  .foot-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 16px; }
  .foot-links a { font-size:.9rem; }
  .foot-copy { font-size:.7rem; line-height:1.7; }
  .sweden { font-size:.65rem; }
}
@media(max-width:359px) {
  .wrap { padding-inline:16px; }
  .nav-in { gap:8px; }
  .nav-right { gap:8px; }
  .nav-cta { padding-inline:8px; }
  .brand { font-size:1rem; }
  #comparison-table th,#comparison-table td { padding-inline:5px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

/* Icons are decorative; list text carries the meaning for screen readers. */
.plist.bad li::before,.plist.good li::before,.plan li::before { content:none; }
.list-mark { position:absolute; left:0; top:2px; width:22px; height:22px; border:2px solid var(--ink); border-radius:7px; display:grid; place-items:center; font-size:.78rem; font-weight:800; line-height:1; background:var(--ok-bg); color:var(--ok-ink); }
.plist.bad .list-mark { background:var(--bad-bg); color:var(--bad-ink); }

/* Solid, high-contrast comparison marks remain distinguishable by shape. */
#comparison-table .cell.yes .mark { background:#08783e; color:#fff; border-color:#07572f; }
#comparison-table .cell.no .mark { background:#bf2626; color:#fff; border-color:#8c1919; }

/* Match the Mac download cue across purchase buttons, including team updates. */
.mac-cta .apple-icon { display:block; flex:none; width:18px; height:18px; }
.nav-cta.mac-cta { display:inline-flex; align-items:center; gap:8px; }
#comparison-table .cell.yes .mark,#comparison-table .cell.no .mark { width:34px; height:34px; flex:none; border-radius:10px; box-shadow:2px 2px 0 var(--ink); }
#comparison-table .mark svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:840px) {
 #comparison-table .cell.yes .mark,#comparison-table .cell.no .mark { width:30px; height:30px; border-radius:8px; }
 #comparison-table .mark svg { width:20px; height:20px; }
}
@media(max-width:640px) { .nav-cta.mac-cta .apple-icon { display:block; flex:none; width:18px; height:18px; } }