@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Day is the default; night follows the OS unless the visitor picks one (data-theme on <html>). */
:root {
  --ink: #1b1a2e;
  --ink-2: #4a4170;
  --paper: #f6efe3;
  --paper-2: #efe4d1;
  --card: #fffaf2;
  --line: #e0d3bd;
  --press: #b9382b;
  --press-hover: #9d2c21;
  --on-press: #fff;
  --frame: #5a3a2a;
  --wood: #7a5236;
  --wood-2: #6b472e;
  --on-wood: #fbf3e4;
  --sky-top: #6f98cc;
  --sky-ink: #11183a;
  --sky-ink-2: #1b2550;
  --water: #226371;
  --sounds: #b5523f;
  --studio: #c2902c;
  --shots: #4a5c8f;
  --land: #5f8450;
  --focus: #1f6feb;
  --radius: 14px;
  --measure: 68ch;
  --shadow: 0 18px 40px -18px rgb(27 26 46 / .45), 0 2px 6px rgb(27 26 46 / .12);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #f3ecdf;
  --ink-2: #c9c6f0;
  --paper: #10153a;
  --paper-2: #151b45;
  --card: #1b2250;
  --line: #2d3567;
  --sky-top: #090d23;
  --sky-ink: #fbf6ec;
  --sky-ink-2: #d8d6ec;
  --water: #0a162e;
  --sounds: #e07a62;
  --studio: #e3b44f;
  --shots: #8fa4e0;
  --land: #93bd7f;
  --focus: #8ab4ff;
  --shadow: 0 18px 40px -18px rgb(0 0 0 / .7), 0 2px 6px rgb(0 0 0 / .4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f3ecdf;
    --ink-2: #c9c6f0;
    --paper: #10153a;
    --paper-2: #151b45;
    --card: #1b2250;
    --line: #2d3567;
    --sky-top: #090d23;
    --sky-ink: #fbf6ec;
    --sky-ink-2: #d8d6ec;
    --water: #0a162e;
    --sounds: #e07a62;
    --studio: #e3b44f;
    --shots: #8fa4e0;
    --land: #93bd7f;
    --focus: #8ab4ff;
    --shadow: 0 18px 40px -18px rgb(0 0 0 / .7), 0 2px 6px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.05; letter-spacing: -0.025em; font-weight: 860; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); }
h3 { font-size: 1.35rem; letter-spacing: -0.015em; font-weight: 780; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { text-decoration-thickness: 0.12em; }
::selection { background: var(--studio); color: #1b1a2e; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--card); color: var(--ink); padding: 12px 18px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }

/* Buttons: one family. Red only on things you press. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 1.5em; border-radius: 999px;
  font: 700 1.0625rem/1 inherit; letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn-press { background: var(--press); color: var(--on-press); }
.btn-press:hover { background: var(--press-hover); }
.btn-line { border-color: currentColor; color: inherit; background: transparent; }
.btn-line:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Header: the same on every page, laid over the harbour band. */
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--sky-ink); }
.site-header .bar { display: flex; align-items: center; gap: 28px; min-height: 76px; width: min(1360px, 100% - 40px); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; font-size: 1.5rem; letter-spacing: -0.03em; text-decoration: none; min-height: 44px; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
#site-nav { margin-left: auto; }
#site-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; align-items: center; }
#site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 650; text-decoration: none; border-radius: 10px; }
#site-nav a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
#site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.tools { display: flex; gap: 4px; align-items: center; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 12px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.icon-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn [data-on] { display: none; }
.icon-btn[aria-pressed="true"] [data-on] { display: block; }
.icon-btn[aria-pressed="true"] [data-off] { display: none; }
.site-header .btn { min-height: 46px; font-size: 1rem; }
.menu-toggle { display: none; }

/* The harbour: the art's layers in one 16:10 box, sky colour above it. */
.harbour { position: relative; overflow: hidden; color: var(--sky-ink); background: var(--sky-top); isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.art { position: absolute; left: 50%; translate: -50% 0; width: max(100%, var(--art-min, 1440px)); aspect-ratio: 16 / 10; top: var(--art-top, 88px); }
.art > * { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.l-sky { background-image: image-set(url("img/harbour/sky-day-1100.webp") 1x, url("img/harbour/sky-day.webp") 2x); }
.l-mid { background-image: image-set(url("img/harbour/mid-day-1100.webp") 1x, url("img/harbour/mid-day.webp") 2x); }
.l-water { background-image: image-set(url("img/harbour/water-day-1100.webp") 1x, url("img/harbour/water-day.webp") 2x); }
.l-boats { background-image: image-set(url("img/harbour/boats-day-1100.webp") 1x, url("img/harbour/boats-day.webp") 2x); }
.l-stars, .l-windows, .l-beam, .l-fog { display: none; }
.l-cloud { inset: auto; width: 14%; aspect-ratio: 309 / 97; background-size: contain; }
.l-cloud.c1 { background-image: url("img/harbour/cloud-1.webp"); top: 6%; left: 8%; }
.l-cloud.c2 { background-image: url("img/harbour/cloud-2.webp"); top: 13%; left: 62%; width: 17%; aspect-ratio: 375 / 118; }
.scene::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--art-top, 88px) + 4%); background: var(--sky-top); }
/* Blend the art's own sky into the solid colour above it. */
.art::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; z-index: 1; background: linear-gradient(var(--sky-top), transparent); }

:root[data-theme="dark"] .l-sky { background-image: image-set(url("img/harbour/sky-night-1100.webp") 1x, url("img/harbour/sky-night.webp") 2x); }
:root[data-theme="dark"] .l-mid { background-image: image-set(url("img/harbour/mid-night-1100.webp") 1x, url("img/harbour/mid-night.webp") 2x); }
:root[data-theme="dark"] .l-water { background-image: image-set(url("img/harbour/water-night-1100.webp") 1x, url("img/harbour/water-night.webp") 2x); }
:root[data-theme="dark"] .l-boats { background-image: image-set(url("img/harbour/boats-night-1100.webp") 1x, url("img/harbour/boats-night.webp") 2x); }
:root[data-theme="dark"] .l-cloud { display: none; }
:root[data-theme="dark"] .l-stars, :root[data-theme="dark"] .l-windows, :root[data-theme="dark"] .l-beam, :root[data-theme="dark"] .l-fog { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .l-sky { background-image: image-set(url("img/harbour/sky-night-1100.webp") 1x, url("img/harbour/sky-night.webp") 2x); }
  :root:not([data-theme="light"]) .l-mid { background-image: image-set(url("img/harbour/mid-night-1100.webp") 1x, url("img/harbour/mid-night.webp") 2x); }
  :root:not([data-theme="light"]) .l-water { background-image: image-set(url("img/harbour/water-night-1100.webp") 1x, url("img/harbour/water-night.webp") 2x); }
  :root:not([data-theme="light"]) .l-boats { background-image: image-set(url("img/harbour/boats-night-1100.webp") 1x, url("img/harbour/boats-night.webp") 2x); }
  :root:not([data-theme="light"]) .l-cloud { display: none; }
  :root:not([data-theme="light"]) .l-stars, :root:not([data-theme="light"]) .l-windows, :root:not([data-theme="light"]) .l-beam, :root:not([data-theme="light"]) .l-fog { display: block; }
}
.l-stars.s0 { background-image: image-set(url("img/harbour/stars-0-1100.webp") 1x, url("img/harbour/stars-0.webp") 2x); }
.l-stars.s1 { background-image: image-set(url("img/harbour/stars-1-1100.webp") 1x, url("img/harbour/stars-1.webp") 2x); }
.l-stars.s2 { background-image: image-set(url("img/harbour/stars-2-1100.webp") 1x, url("img/harbour/stars-2.webp") 2x); }
.l-windows.w0 { background-image: image-set(url("img/harbour/windows-0-1100.webp") 1x, url("img/harbour/windows-0.webp") 2x); }
.l-windows.w1 { background-image: image-set(url("img/harbour/windows-1-1100.webp") 1x, url("img/harbour/windows-1.webp") 2x); }
.l-windows.w2 { background-image: image-set(url("img/harbour/windows-2-1100.webp") 1x, url("img/harbour/windows-2.webp") 2x); }
/* The lighthouse lamp sits at 81.8% / 18.2% of the art. */
.l-beam { rotate: 190deg; inset: auto; left: 81.8%; top: 18.2%; width: 46%; height: 9%; translate: 0 -50%; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(255 236 170 / .55), rgb(255 236 170 / 0)); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%); filter: blur(2px); }
.l-fog { inset: auto 0 34% 0; height: 18%; background:
  radial-gradient(40% 60% at 20% 50%, rgb(210 214 240 / .16), transparent 70%),
  radial-gradient(35% 50% at 65% 60%, rgb(210 214 240 / .13), transparent 70%),
  radial-gradient(30% 55% at 95% 40%, rgb(210 214 240 / .12), transparent 70%); width: 140%; left: -20%; }

/* Motion: slow, together, and stoppable. */
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 42% { opacity: 1; } 47% { opacity: .55; } 52% { opacity: .9; } 70% { opacity: .75; } }
@keyframes drift { from { translate: -6% 0; } to { translate: 6% 0; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 .35%; } }
@keyframes sweep { 0%, 100% { rotate: 165deg; opacity: .2; } 50% { rotate: 205deg; opacity: .9; } }
.l-stars.s0 { animation: twinkle 5s ease-in-out infinite; }
.l-stars.s1 { animation: twinkle 7s ease-in-out -2s infinite; }
.l-stars.s2 { animation: twinkle 9s ease-in-out -5s infinite; }
.l-windows.w0 { animation: flicker 11s ease-in-out infinite; }
.l-windows.w1 { animation: flicker 13s ease-in-out -4s infinite; }
.l-windows.w2 { animation: flicker 17s ease-in-out -9s infinite; }
.l-fog { animation: drift 38s ease-in-out infinite alternate; }
.l-cloud.c1 { animation: drift 60s ease-in-out infinite alternate; }
.l-cloud.c2 { animation: drift 75s ease-in-out -20s infinite alternate-reverse; }
.l-boats { animation: bob 6s ease-in-out infinite; }
.l-beam { animation: sweep 12s ease-in-out infinite; }
.still .scene *, .still .scene::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene::before { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Home hero: words in the sky, the four houses on the quay, the dock at the fold. */
.hero { --art-top: 150px; min-height: clamp(820px, 100svh, 980px); display: flex; flex-direction: column; }
.hero-copy { position: relative; padding-top: 100px; text-align: center; width: min(1200px, 100% - 40px); margin-inline: auto; }
/* Harbour haze behind the words, so they read over the town at any size. */
.hero-copy::before { content: ""; position: absolute; z-index: -1; inset: 70px -8% -40px; background: radial-gradient(closest-side, color-mix(in srgb, var(--sky-top) 78%, transparent), transparent); }
.hero h1 { font-size: clamp(2.4rem, 1.2rem + 3.2vw, 4.1rem); font-weight: 880; letter-spacing: -0.03em; line-height: 1.02; }
.hero .lede { font-size: clamp(1.125rem, 1rem + .4vw, 1.35rem); margin-top: 14px; color: var(--sky-ink-2); font-weight: 520; }
.hero .acts { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; margin-top: 26px; }
.hero .fine { display: inline-block; margin-top: 14px; padding: 4px 14px; border-radius: 999px; font-size: .95rem; font-weight: 600; color: var(--sky-ink); background: color-mix(in srgb, var(--sky-top) 72%, transparent); }
.hero .btn-line { background: color-mix(in srgb, var(--sky-top) 62%, transparent); }
.quay { margin-top: auto; position: relative; }
.houses { list-style: none; margin: 0 auto; padding: 0; width: min(1240px, 100% - 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: end; }
/* Painted shopfronts (design/IMAGE-SOURCES.md); the sign and window boxes are measured from each facade. */
.house { position: relative; aspect-ratio: var(--r); max-height: 430px; justify-self: center; width: 100%; max-width: calc(430px * var(--r)); }
.house a { position: absolute; inset: 0; color: #1b1a2e; text-decoration: none; border-radius: 6px; }
.facade { width: 100%; height: 100%; transition: translate .25s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 14px 18px rgb(20 20 40 / .28)); }
.house a:hover .facade, .house a:focus-visible .facade { translate: 0 -4px; }
.house .sign { position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); display: flex; align-items: center; justify-content: center; gap: .35em; font-weight: 850; transition: translate .25s cubic-bezier(.2, .8, .2, 1); }
.house .sign svg { flex: none; width: 1em; height: 1em; }
.house-name { font-size: clamp(1rem, .55rem + .95vw, 1.45rem); line-height: 1; letter-spacing: -0.02em; }
.house .window { position: absolute; left: var(--wx); top: var(--wy); width: var(--ww); height: var(--wh); border: 0; border-radius: 2px; box-shadow: none; transition: translate .25s cubic-bezier(.2, .8, .2, 1); }
.house .window img { width: 100%; height: 100%; object-fit: cover; object-position: var(--wp); }
.window { border: 7px solid var(--frame); border-radius: 6px; background: #fff7dc; overflow: hidden; }
.house a:hover .sign, .house a:hover .window, .house a:focus-visible .sign, .house a:focus-visible .window { translate: 0 -4px; }
.house a:hover .house-name { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .15em; }
:root[data-theme="dark"] .facade { filter: brightness(.74) saturate(.85) drop-shadow(0 14px 18px rgb(0 0 0 / .4)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .facade { filter: brightness(.74) saturate(.85) drop-shadow(0 14px 18px rgb(0 0 0 / .4)); } }
@media (prefers-reduced-motion: reduce) { .facade, .house .sign, .house .window { transition: none; } }
.dock { background: var(--wood) url("img/planks.webp") 0 0 / 256px 256px; color: var(--on-wood); box-shadow: inset 0 6px 0 rgb(0 0 0 / .18); }
.dock p { text-align: center; padding: 18px 20px; font-weight: 650; font-size: 1.02rem; }

/* Day and night pictures follow the theme. */
.night { display: none !important; }
:root[data-theme="dark"] .day { display: none !important; }
:root[data-theme="dark"] .night { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .day { display: none !important; }
  :root:not([data-theme="light"]) .night { display: block !important; }
}
/* Mac visitors download; phones and tablets get the link sent to their Mac. */
.only-touch { display: none !important; }
@media (pointer: coarse) {
  .only-mac { display: none !important; }
  .only-touch { display: inline-flex !important; }
  form.only-touch { display: block !important; }
}

/* Sections */
main > section:not(.harbour) { padding-block: clamp(64px, 6vw + 24px, 120px); }
.band { background: var(--paper-2); }
.wrap.narrow { width: min(820px, 100% - 40px); }
.plans-lede { font-size: 1.2rem; color: var(--ink-2); margin-top: 14px; max-width: var(--measure); }

.film h2 { text-align: center; }
.screen { position: relative; margin-top: 36px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); border: 8px solid var(--frame); background: #000; }
.screen video { width: 100%; aspect-ratio: 16 / 9; }
.film-play { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px 18px 22px; border: 0; border-radius: 999px; background: var(--press); color: #fff; font: 750 1.2rem/1 inherit; cursor: pointer; box-shadow: 0 12px 30px -10px rgb(0 0 0 / .6); }
.film-play:hover { background: var(--press-hover); }
.film-play svg { width: 30px; height: 30px; }
.js .film-play:not([hidden]) { display: inline-flex; }

.place { position: relative; background: color-mix(in srgb, var(--c) 11%, var(--paper)); padding-top: clamp(96px, 7vw + 40px, 150px) !important; }
/* Each place opens under its house's gable, in the house colour. */
/* The place's name is painted on its roof, like a house sign; the H2 carries it for screen readers. */
.gable { position: absolute; bottom: 100%; left: 50%; translate: -50% 0; width: min(620px, 86%); height: 52px; display: grid; place-items: center; background: var(--c); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); color: #1b1a2e; font-weight: 850; font-size: 1.2rem; letter-spacing: .01em; padding-top: 6px; }
.place-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.place h2 { margin-top: 10px; }
.place-head > p:last-child { margin-top: 18px; font-size: 1.18rem; max-width: 46ch; }
.ticks { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 14px; max-width: 58ch; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: 1.02rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.ticks b { color: var(--ink); font-weight: 750; }
.needs { margin-top: 16px; font-weight: 650; color: var(--ink-2); }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; min-height: 44px; font-weight: 750; font-size: 1.08rem; }
.more svg { flex: none; }
.place-shot { margin: clamp(36px, 4vw, 56px) auto 0; max-width: 1080px; }
.window img { width: 100%; height: auto; }
.place-shot.window { border-width: 12px; border-radius: 14px; box-shadow: var(--shadow); }

.voices h2 { text-align: center; }
.posts { list-style: none; padding: 0; margin: 40px 0 0; columns: 3 300px; column-gap: 22px; }
.post { break-inside: avoid; margin-bottom: 22px; }
.post a { display: grid; grid-template-columns: 48px 1fr; gap: 6px 14px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 22px 22px 22px 6px; text-decoration: none; height: 100%; }
.post a:hover { border-color: var(--ink-2); }
.post img { width: 48px; height: 48px; border-radius: 50%; grid-row: span 2; }
.post blockquote { margin: 0; font-size: 1.12rem; font-weight: 560; line-height: 1.45; }
.post .who { font-size: .95rem; color: var(--ink-2); font-weight: 650; }
.counter { margin-top: 30px; text-align: center; font-weight: 700; color: var(--ink-2); }
.counter [data-count] { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 1.3rem; }

.plans h2 { max-width: 18ch; }
.plan-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 24px; margin-top: 40px; align-items: stretch; }
.trial { padding: 8px 8px 8px 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.trial p { color: var(--ink-2); }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.plan .btn { margin-top: auto; }
.plan p:not(.price):not(.badge) { color: var(--ink-2); }
.plan.best { border: 3px solid var(--frame); }
.price { font-size: 1.15rem; color: var(--ink-2); }
.price b { font-size: 2.6rem; letter-spacing: -0.03em; color: var(--ink); font-weight: 860; font-variant-numeric: tabular-nums; }
.badge { position: absolute; top: -15px; right: 22px; background: var(--studio); color: #1b1a2e; font-weight: 800; font-size: .9rem; padding: 4px 12px; border-radius: 999px; }
.fine-print { margin-top: 22px; font-size: .98rem; color: var(--ink-2); max-width: var(--measure); }
.send { margin-top: 44px; padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); max-width: 640px; }
.send p { margin-top: 8px; color: var(--ink-2); }
.send-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.send input { flex: 1 1 240px; min-height: 52px; padding: 0 16px; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: 12px; }
.send input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent); }
.form-note { margin-top: 12px; font-weight: 650; color: var(--ink); }

.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--frame); color: var(--on-wood); font-weight: 850; font-size: 1.3rem; margin-bottom: 16px; }
.steps p { margin-top: 8px; color: var(--ink-2); }
.steps img { margin-top: 16px; border-radius: 10px; border: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { margin-top: 28px; border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 64px; padding: 14px 0; cursor: pointer; font-weight: 750; font-size: 1.15rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: 45deg; translate: 0 -3px; transition: rotate .2s; }
.faq details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: var(--measure); }
.faq-more { margin-top: 28px; }

.last { --art-top: 250px; min-height: clamp(640px, 80svh, 820px); display: grid; align-items: start; }
.last-copy { position: relative; text-align: center; padding: 96px 20px 0; }
.last-copy::before { content: ""; position: absolute; z-index: -1; inset: 40px -10% -60px; background: radial-gradient(closest-side, color-mix(in srgb, var(--sky-top) 78%, transparent), transparent); }
.last h2 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.8rem); }
.last .acts { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; margin-top: 26px; }
.last .btn-line { background: color-mix(in srgb, var(--sky-top) 62%, transparent); }
.last .fine { display: inline-block; margin-top: 14px; padding: 4px 14px; border-radius: 999px; font-size: .95rem; font-weight: 600; background: color-mix(in srgb, var(--sky-top) 72%, transparent); }

/* Footer: the dock */
.site-footer { background: var(--wood) url("img/planks.webp") 0 0 / 256px 256px; color: var(--on-wood); padding: 48px 0 40px; box-shadow: inset 0 8px 0 rgb(0 0 0 / .2); }
.site-footer a { color: inherit; }
.foot-top { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding-bottom: 26px; border-bottom: 1px solid rgb(255 255 255 / .2); }
.foot-top p { font-weight: 560; }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding-top: 28px; }
.foot-h { font-size: 1rem; font-weight: 800; margin-bottom: 10px; }
.foot-cols ul, .social { list-style: none; padding: 0; margin: 0; }
.foot-cols li { padding: 4px 0; font-size: .98rem; }
.langs ul { columns: 2; column-gap: 16px; }
.social { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; font-weight: 650; }
.site-footer :focus-visible { outline-color: #fff; }

/* Page click ripple (only when page sounds are on) */
.ripple { position: fixed; z-index: 100; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid var(--press); pointer-events: none; animation: ripple .45s ease-out forwards; }
@keyframes ripple { from { scale: .3; opacity: .9; } to { scale: 1.4; opacity: 0; } }

/* Narrower screens */
@media (max-width: 1100px) {
  .menu-toggle { display: inline-grid; order: 3; }
  .js #site-nav { display: none; position: absolute; top: 72px; left: 16px; right: 16px; padding: 10px; background: var(--card); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow); }
  .js #site-nav.open { display: block; }
  #site-nav ul { flex-direction: column; align-items: stretch; }
  #site-nav a { width: 100%; padding: 0 14px; font-size: 1.1rem; }
  .tools { margin-left: auto; }

  .hero { --art-top: 190px; min-height: 0; }
  .quay { margin-top: 280px; }
  .houses { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .place-copy { grid-template-columns: minmax(0, 1fr); }
  .plan-row { grid-template-columns: 1fr 1fr; }
  .trial { grid-column: 1 / -1; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  .site-header .bar { gap: 6px; min-height: 64px; width: calc(100% - 24px); }
  .site-header .btn { display: none; }
  .brand { font-size: 1.3rem; }
  .brand img { width: 32px; height: 32px; }
  .js #site-nav { top: 64px; }
  .hero { --art-top: 300px; --art-min: 1000px; }
  .hero-copy { padding-top: 92px; }
  .hero .acts .btn { width: 100%; }
  .quay { margin-top: 300px; }



  .window { border-width: 5px; }
  .houses { gap: 20px 10px; width: calc(100% - 20px); }
  .house-name { font-size: 1rem; }
  .house .sign svg { display: none; }




  .dock p { font-size: .95rem; }
  .place-shot.window { border-width: 7px; }
  .last { --art-top: 330px; }
  .plan-row, .steps { grid-template-columns: minmax(0, 1fr); }
  .film-play { padding: 14px 20px 14px 16px; font-size: 1.05rem; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .last { --art-min: 1000px; }
}

/* Inner pages: a short harbour band (rooftops at its foot), then paper. */
.page-top { --art-top: 120px; min-height: 400px; display: flex; align-items: flex-start; }
.page-top::after { content: ""; position: absolute; inset: auto 0 0; height: 12px; background: var(--wood) url("img/planks.webp") 0 0 / 256px 256px; box-shadow: 0 -2px 0 rgb(0 0 0 / .18); }
.page-top-copy { position: relative; width: min(980px, 100% - 40px); margin: 0 auto; padding: 128px 0 72px; text-align: center; }
.page-top-copy::before { content: ""; position: absolute; z-index: -1; inset: 70px -10% 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--sky-top) 80%, transparent), transparent); }
.page-top h1 { font-size: clamp(2.3rem, 1.3rem + 3vw, 4rem); font-weight: 880; letter-spacing: -0.03em; }
.page-top .lede { margin-top: 14px; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); font-weight: 540; color: var(--sky-ink-2); max-width: 62ch; margin-inline: auto; }
.page-top .lede a { color: inherit; }
.page-body { padding-block: clamp(48px, 5vw, 88px) clamp(72px, 7vw, 120px); }

.prose { width: min(760px, 100% - 40px); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--frame); }
.prose code { font: .92em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--paper-2); padding: .1em .35em; border-radius: 6px; }
.prose figure.window { margin: 1.8em 0; border-width: 8px; border-radius: 12px; box-shadow: var(--shadow); }
.prose figure.window img { border-radius: 2px; }
.prose a { color: var(--ink); }
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.prose dt { font-weight: 750; }
.prose dd { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) {
  .page-top { --art-top: 190px; --art-min: 1000px; min-height: 340px; }
  .page-top-copy { padding: 96px 0 64px; }
  .prose dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .prose dd { margin-bottom: 10px; }
}

/* Compare pages */
.compare { width: min(1000px, 100% - 40px); }
.compare > ul:first-of-type { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.compare > ul:first-of-type li { margin: 0; }
.compare > ul:first-of-type figure.window { margin: 0 0 14px; border-width: 6px; }
.compare > ul:first-of-type h3 { margin-top: 0; }
.compare > ul:first-of-type p { margin-top: 6px; }
.acts { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.prose .acts { margin-top: 1.4em; }
.prose .btn-press { color: var(--on-press); }
.table-scroll { margin-top: 2em; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.table-scroll:focus-visible { outline: 3px solid var(--focus); }
.vs-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.vs-table caption { text-align: left; padding: 16px 20px 6px; font-weight: 750; color: var(--ink-2); }
.vs-table th, .vs-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.vs-table thead th { font-size: 1.05rem; color: var(--ink); border-top: 0; }
.vs-table thead th:first-of-type { color: var(--sounds); }
.vs-table tbody th { font-weight: 650; color: var(--ink); min-width: 12ch; }
.vs-table td small { display: block; color: var(--ink-2); font-size: .92rem; line-height: 1.4; margin-top: 2px; }
.mark { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.mark svg { width: 18px; height: 18px; flex: none; }
.yes .mark svg { color: var(--land); }
.no .mark svg { color: var(--sounds); }
.unknown .mark { color: var(--ink-2); font-weight: 600; }
.wide .vs-table { min-width: 1100px; font-size: .95rem; }
.wide .vs-table tbody th { position: sticky; left: 0; background: var(--card); }
.other { display: grid; gap: 2px; padding: 14px 0; text-decoration: none; }
.other strong { text-decoration: underline; text-underline-offset: .18em; }
.other span { color: var(--ink-2); }
.compare ul:has(.other) { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 760px) {
  .compare > ul:first-of-type, .compare ul:has(.other) { grid-template-columns: minmax(0, 1fr); }
  .vs-table th, .vs-table td { padding: 10px 10px; }
}

/* Features catalogue */
.features { width: min(1240px, 100% - 40px); }
.jump ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 700; text-decoration: none; }
.jump a span { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.jump a:hover { border-color: var(--ink-2); }
.fgroup { position: relative; margin-top: clamp(72px, 7vw, 120px); padding-top: 34px; border-top: 6px solid var(--c); }
.fgroup::before { content: ""; position: absolute; top: -40px; left: 0; width: 120px; height: 34px; background: var(--c); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.fgroup-intro { margin-top: 14px; font-size: 1.2rem; color: var(--ink-2); max-width: var(--measure); }
.feature-grid { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.feature-grid li { scroll-margin-top: 100px; }
.feature-grid figure.window { margin: 0 0 14px; border-width: 6px; border-radius: 10px; }
.feature-grid h3 { font-size: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feature-grid p { margin-top: 6px; color: var(--ink-2); font-size: 1rem; }
.feature-grid li:target h3 { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.tag { font-size: .8rem; font-weight: 750; letter-spacing: 0; padding: 2px 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); }
.tag.soon { background: color-mix(in srgb, var(--studio) 25%, var(--card)); color: var(--ink); }
.feature-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin-top: 16px; }
.aside { margin-top: 44px; padding: 24px 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); max-width: 860px; }
.aside p { margin-top: 8px; color: var(--ink-2); }
.fend { margin-top: clamp(72px, 7vw, 120px); text-align: center; }
.fend p { margin-top: 12px; color: var(--ink-2); font-size: 1.15rem; }
.fend .acts { justify-content: center; margin-top: 24px; }

/* Pricing, Set up, maker */
.pricing { width: min(1100px, 100% - 40px); }
.pricing .plan-row { margin-top: 0; }
.pricing h3 { margin-top: 0; }
.prose .plan p, .prose .trial p { margin-top: 0; }
.prose .faq-list details { border-bottom: 1px solid var(--line); }
.prose .faq-list summary { min-height: 60px; display: flex; align-items: center; cursor: pointer; font-weight: 750; color: var(--ink); }
.prose .faq-list details p { padding-bottom: 18px; }
.try .get { padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.try .get .acts { margin-top: 0; }
.facts { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px !important; font-weight: 650; }
.facts li { margin: 0 !important; color: var(--ink-2); }
.only-touch-text { display: none; }
@media (pointer: coarse) { .only-touch-text { display: block; } }
.prose .steps { padding: 0; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 24px; }
.prose .steps li { margin: 0; }
.maker { margin: 0 0 1.4em; }
.maker img { width: 160px; height: 160px; border-radius: 50%; border: 6px solid var(--frame); object-fit: cover; }
.inline-list { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.inline-list li { margin: 0 !important; }
@media (max-width: 1100px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .feature-grid, .feature-grid.compact { grid-template-columns: minmax(0, 1fr); }
  .fgroup::before { width: 90px; }
}
.try > ul:not(.facts) { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px 28px; }
.try > ul:not(.facts) > li { margin: 0; font-weight: 800; color: var(--ink); }
.try > ul:not(.facts) > li > ul { padding-left: 1.1em; margin-top: 6px; font-weight: 500; }
.prose .feature-grid { padding-left: 0; }

.prose .badge { color: #1b1a2e; }

/* Round 1 critique fixes */
.prose h3 { color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose ul[class] li + li, .prose ol[class] li + li, .compare > ul:first-of-type li + li { margin-top: 0; }
.release { font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: .3em !important; }
.nowrap { white-space: nowrap; }
.prose .end { margin-top: clamp(64px, 6vw, 96px); padding-top: 40px; border-top: 6px solid var(--wood); text-align: center; }
.prose .end h2 { margin-top: 0; }
.prose .end .acts { justify-content: center; }
.menu-cta { display: none; }
.compare .table-scroll.wide { width: min(1360px, 100vw - 40px); margin-inline: calc((100% - min(1360px, 100vw - 40px)) / 2);
  background: linear-gradient(90deg, var(--card) 30%, transparent) left / 40px 100% no-repeat local, linear-gradient(270deg, var(--card) 30%, transparent) right / 40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .18), transparent) left / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .18), transparent) right / 14px 100% no-repeat scroll, var(--card); }
.compare .wide .vs-table tbody th { background: var(--card); }
/* Inner bands: the town's roofs always sit at the band's foot. */
.page-top .art { top: auto; bottom: calc(max(100vw, var(--art-min, 1440px)) / 1.6 * -0.6); }
.about-facts { margin-top: 1.4em; }
@media (max-width: 760px) {
  .quay { margin-top: 140px; }
  .hero { --art-top: 230px; }
  .js #site-nav .menu-cta { display: block; margin-top: 6px; }
  .js #site-nav .menu-cta a { justify-content: center; color: var(--on-press); }
  .foot-cols li { padding: 0; }
  .foot-cols li a, .foot-cols li span { display: inline-block; padding-block: 10px; }
  .langs ul { column-gap: 24px; }
  .gable { height: 44px; }
}
.prose .intro { font-size: 1.15rem; color: var(--ink); }
.feature-grid figure.window { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--card); overflow: hidden; }
.feature-grid figure.window img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; grid-area: 1 / 1; }
.prose a { overflow-wrap: anywhere; }
/* Roof signs are large text (3:1); the slate roof takes white in the day. */
#screenshots .gable { color: #fff; }
:root[data-theme="dark"] #screenshots .gable { color: #1b1a2e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #screenshots .gable { color: #1b1a2e; } }
.compare ul:has(.other) li + li { margin-top: 0; }
.langs ul { columns: auto; display: grid; grid-template-columns: repeat(2, max-content); column-gap: 32px; }
@media (max-width: 760px) {
  .film-play { inset: auto 0 16px; margin-inline: auto; }
  .page-top .art { bottom: calc(max(100vw, var(--art-min, 1440px)) / 1.6 * -0.68); }
}
/* The place's name leads its heading, in the place's colour (large text, 3:1). */
.h2-place { color: color-mix(in srgb, var(--c) 82%, var(--ink)); }
/* Below the art, the harbour carries on as its own deep water (the water layer's bottom colour). */
.hero { background: linear-gradient(var(--sky-top) 50%, var(--water) 50%); }