/* faroleta.com: the one-pager and the privacy notice. Fonts are self-hosted (no third-party requests) and the
   site runs no scripts: the hero's before/after switch is two radio buttons and CSS transitions. */
@font-face {
  font-family: 'Besley';
  src: url('/fonts/besley.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/atkinson-hyperlegible-next.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --dusk: #1a2747;
  --dusk-deep: #111a33;
  --dusk-line: #34457a;
  --lamp: #ffbe3d;
  --lamp-hi: #ffd277;
  --lamp-glow: 255 190 61;
  --glass: #fff6dd;
  --day: #f4f6fa;
  --day-2: #e8ecf4;
  --ink: #141c33;
  --ink-soft: #4a5472;
  --rule: #d3d9e7;
  --link: #25419f;
  --on-dusk: #f3efe3;
  --on-dusk-soft: #c4cde6;
  --focus: #25419f;
  --display: 'Besley', Rockwell, 'Roboto Slab', Georgia, serif;
  --sans: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--day);
  color: var(--ink);
  font: 400 1.125rem/1.62 var(--sans);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.dusk :focus-visible,
.hero :focus-visible {
  outline-color: var(--lamp);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 20;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  background: var(--lamp);
  color: var(--dusk-deep);
  font-weight: 700;
}
.skip:focus {
  top: 0.75rem;
}

.wrap {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}
@media (min-width: 40rem) {
  .wrap {
    width: min(100% - 3rem, 72rem);
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border-radius: 0.8rem;
  background: var(--lamp);
  color: var(--dusk-deep);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.25s ease;
}
.btn:hover {
  background: var(--lamp-hi);
  box-shadow: 0 0 1.75rem rgb(var(--lamp-glow) / 0.5);
}
.btn-ghost-ink {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px rgb(20 28 51 / 0.4);
}
.btn-ghost-ink:hover {
  background: rgb(20 28 51 / 0.06);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn-small {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font-size: 1rem;
  white-space: nowrap;
}

/* ---------- header ---------- */
.top {
  background: var(--dusk);
  color: var(--on-dusk);
}
.top .wrap {
  width: min(100% - 3rem, 72rem);
}
/* On the home page the bar is clear: it lies over the night sky (the hero reaches up behind it), so the stars and the glow of the
   lantern show through, with no band of its own colour. */
.top:has(+ main > .hero) {
  position: relative;
  z-index: 30;
  margin-bottom: -4.5rem;
  background: transparent;
}
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--on-dusk);
  font: 700 1.55rem/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand svg {
  width: 3.2rem;
  height: 3.2rem;
}
.top nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2rem);
}
.top nav a:not(.btn) {
  display: none;
  color: var(--on-dusk-soft);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0;
}
.top nav a:not(.btn):hover {
  color: var(--on-dusk);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
@media (min-width: 46rem) {
  .top nav a:not(.btn) {
    display: inline;
  }
}

/* ---------- hero: a lighthouse that turns its light onto the business ---------- */
/* The hero fills the window below the header. The plain rules here are the AFTER look and the rules under
   .hero:has(#light-before:checked) are the BEFORE look. Before, the lighthouse shines its light away, to the left and
   down toward the sea, and the three panels show the business as it is found. Choosing After turns the beam in front of
   the lighthouse and round to the right, always tilted down toward the sea (never overhead). As it comes round its light
   acts as a mask over the three panels: a window on each opens from left to right and uncovers the new look, on all
   three at once and on the beam's own clock. Choosing Before turns the beam away, and the same edge of light pulls the
   old look back.
   Everything that moves is a transition of transform, rotate, translate or opacity, which the browser runs on the
   compositor, off the main thread, so the swing is smooth and costs the page no layout work at all. Nothing in it
   animates a custom property, a filter, a shadow, a blend mode or a blur. The window fit (--u below) is plain CSS
   units, so it is only worked out when the window changes size, never per frame.
   The page load plays the same swing, from the Before look, once the headline has arrived (the intro, below). */
.hero {
  --lead: 3.9s;
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  padding-top: 4.5rem;
  /* as high as the window, but no higher than the scene needs: the scene is sized by the width of the window (or its height, when that
     is the smaller), so in a window that is tall for its width a full-height hero was a few hundred pixels of empty sky between the
     headline and the panels */
  min-height: min(100vh, calc(4.5rem + 0.68 * min(100vw - 3rem, 100rem)));
  min-height: min(100svh, calc(4.5rem + 0.68 * min(100vw - 3rem, 100rem)));
  color: var(--on-dusk);
  background: linear-gradient(180deg, var(--dusk) 0, var(--dusk) 12%, #1d3060 44%, #2b4a86 66%, #36568f 78%);
}
@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --sx {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
/* One clock for everything that changes between Before and After: the beam turning, the edge of old look that follows it across the
   panels, the glow round them and the light over them. They all last --swing, start on the same click and share one easing. The
   edge is the beam: the window is turned to the beam's own angle (less 90 degrees) by the same transition, so wherever the beam
   is, and however often the switch is flipped part way, the edge is on it, with nothing to bring into step. */
.hero {
  --swing: 3.2s;
  --ease-turn: cubic-bezier(0.4, 0, 0.2, 1);
}
.stars {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 72%;
  fill: var(--on-dusk);
  pointer-events: none;
}
.state {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* the stage: lighthouse and three panels, scaled together by whichever is smaller, the width or the height of the window */
.hero .wrap {
  width: min(100% - 3rem, 100rem);
}
.stage-box {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.stage {
  --u: clamp(11px, min(calc(100cqw / 77), calc((100svh - 6.5rem) / 47)), 26px);
  --wa: calc(15.8 * var(--u));
  --wb: var(--wa);
  --wc: var(--wa);
  --stage-w: calc(73.9 * var(--u));
  --lh-col: 19em;
  --lh-w: 19em;
  --lh-b: 3.2em;
  --lamp-x: 7.6em;
  --lamp-b: 43.5em;
  --beam-before: 177deg;
  --beam-after: 3deg;
  --beam-w: 60em;
  --beam-h: 20em;
  position: relative;
  display: grid;
  flex: 1 1 auto;
  --shift: 1em;
  left: var(--shift);
  width: min(100%, var(--stage-w));
  margin-inline: auto;
  grid-template-columns: var(--lh-col) repeat(3, var(--wa));
  grid-template-rows: auto 1fr;
  column-gap: 2.5em;
  align-items: end;
  min-height: calc(48 * var(--u));
  padding: 1.5em 0 6em;
  font-size: var(--u);
}
.hero h1 {
  z-index: 5;
  grid-column: 2 / 5;
  grid-row: 1;
  align-self: start;
  max-width: 30em;
  /* tucked in beside the lantern, so the headline reads as part of the lighthouse and not a separate block */
  translate: calc(-5 * var(--u)) 0;
  font-size: clamp(2.2rem, 2.6em, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: normal;
  color: var(--lamp);
}

/* the scene fills the window across, behind the stage: sky, sea, lighthouse and beam */
.scene {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: 100vw;
  translate: calc(-50% - var(--shift)) 0;
  pointer-events: none;
  /* the lighthouse and the beam are in the scene, which is as wide as the window, so their left edges are worked out from the middle of
     the scene: to the stage's own left edge (the stage is centred, and shifted a little by --shift), then along it to the lamp */
  --stage-x: calc(50% - min(100cqw, var(--stage-w)) / 2 + var(--shift));
}
.horizon-glow {
  position: absolute;
  inset: auto 0 -7em;
  height: 30em;
  background: radial-gradient(46em 15em at 18% 52%, rgb(255 150 70 / 0.16), transparent 70%);
}
.sea {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
}
.wave {
  position: absolute;
  left: 0;
  /* twice the width of the sea, so that the waves are drawn at their natural width; the base svg rule would cap it at 100% */
  width: 200%;
  max-width: none;
}
.w1 {
  bottom: -3.3em;
  height: 18em;
  fill: #2b4580;
}
.w2 {
  bottom: -5.8em;
  height: 18em;
  fill: #223a70;
}
.w3 {
  bottom: -8.8em;
  height: 18em;
  fill: #192b58;
}
.w4 {
  bottom: -19.8em;
  height: 28em;
  fill: #101e44;
}
.lh {
  position: absolute;
  /* centred on the lamp, so the beam and the lantern always come from the same place */
  left: calc(var(--stage-x) + var(--lamp-x) - var(--lh-w) / 2);
  bottom: var(--lh-b);
  width: var(--lh-w);
  height: auto;
  max-width: none;
  overflow: visible;
}
/* The beam stands for a real beam of light: one flat wedge, drawn once as beam.png (60em by 20em; scripts/site-beam.ts), that turns
   about the lamp in the plane of the page, by one `rotate` transition. On a laptop the lamp stands above and to the left of the
   panels and the wedge swings from 7 degrees below level on the left, down past the lighthouse and across to 7 degrees below level on
   the right; on a tablet or a phone the lamp is at the top left corner of the first panel and it swings from down and left to 5
   degrees below level. It never points up. The browser draws a texture while it turns and has no mask or gradient to redo. The same
   wedge is laid again over the panels (.tint), fainter, so the beam is seen crossing them, turning on the same clock. There is no
   glare disc: turned edge-on it was a tall thin needle of light beside the small phone lighthouse. */
.beam {
  --o: 1;
  position: absolute;
  max-width: none;
  bottom: calc(var(--lamp-b) - var(--beam-h) / 2);
  width: var(--beam-w);
  height: var(--beam-h);
  --a: var(--beam-after);
  rotate: var(--a);
  transform-origin: 0 50%;
  opacity: var(--o);
  background: url('/beam.png') 0 0 / 100% 100% no-repeat;
  will-change: transform;
  pointer-events: none;
  transition:
    --a var(--swing) var(--ease-turn),
    opacity var(--swing) var(--ease-turn);
}
.beam {
  left: calc(var(--stage-x) + var(--lamp-x));
}
.hero:has(#light-before:checked) .beam {
  --a: var(--beam-before);
  opacity: calc(var(--o) * 0.8);
}

/* the panels: three figures that sit in the stage's grid, or (on a phone) in one strip that swipes sideways */
.panels {
  display: contents;
}
.panel {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.8em;
  align-self: end;
  margin: 0;
}
.panel figcaption {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--on-dusk);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}
.panel.a {
  grid-column: 2;
  grid-row: 2;
}
.panel.b {
  grid-column: 3;
  grid-row: 2;
}
.panel.c {
  grid-column: 4;
  grid-row: 2;
}

/* A panel is two layers holding exactly the same content. Underneath is the new look. Above it, in a window (.wipe), is the old
   look, dimmed, as it is when nobody looks after it. The window is the half of the panel that lies ahead of the beam: its edge
   is a straight line through the lamp, and the window is turned about the lamp to the beam's own angle less 90 degrees, by the
   beam's own transition (same property, duration and easing; the layer inside, in .turn, turns back by the same amount, so the old
   look itself stays put). So the edge is the line of the beam at every moment, at any speed and however the switch is flipped: there
   is no second curve to fall out of step. In Before the window covers the panel; as the beam comes round it crosses each panel
   where the beam crosses it and cuts the old look away behind the light; in After it lies along the beam, over nothing. On a phone
   the lamp stays put as the strip is swiped, so the strip's scroll also moves the window's pivot with it. All of it is `rotate` and
   `translate`, which the browser runs on the compositor, so nothing is redrawn while it moves. */
.clip {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}
.layer {
  position: absolute;
  inset: 0;
  isolation: isolate;
  background: #fff;
}
.layer.before::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgb(70 74 92 / 0.56);
  pointer-events: none;
}
/* where the lamp is, seen from each panel (--lx: across from the panel's left edge, --ly: up from its bottom edge; set per layout
   below). The window is a mask: a half-turn of a conic gradient centred on the lamp, whose edge is the line at the beam's angle --a. */
.panel.a {
  --lx: calc(14.3 * var(--u));
  --ly: calc(34.76 * var(--u));
}
.panel.b {
  --lx: calc(32.6 * var(--u));
  --ly: calc(34.76 * var(--u));
}
.panel.c {
  --lx: calc(50.9 * var(--u));
  --ly: calc(34.76 * var(--u));
}
.wipe {
  --a: var(--beam-after);
  /* The window's edge is a straight line, so the mask and the light are plain linear gradients (the cheapest a browser draws). Each is
     a square picture 4000px across laid with its middle on the lamp; a linear gradient's middle line passes through the middle
     of the picture, at right angles to the direction of the gradient. The direction is --a (0 is up, 90 is right, as is the beam's
     angle from level), so the line is the beam's line, and the gradient runs toward the old look. */
  --lamp-at: left calc(-1 * var(--lx) + var(--sx) - 2000px) bottom calc(var(--ly) - 2000px);
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(var(--a), transparent calc(50% - 0.6px), #000 calc(50% + 0.6px))
    var(--lamp-at) / 4000px 4000px no-repeat;
  mask: linear-gradient(var(--a), transparent calc(50% - 0.6px), #000 calc(50% + 0.6px)) var(--lamp-at) /
    4000px 4000px no-repeat;
  pointer-events: none;
  transition: --a var(--swing) var(--ease-turn);
}
/* the beam's own light, just ahead of its line on the old look, in the same mask: a band of warm light that fades with distance */
.wipe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      var(--a),
      transparent 50%,
      rgb(255 220 140 / 0.42) 50%,
      rgb(255 200 90 / 0.14) calc(50% + 1.6 * var(--u)),
      transparent calc(50% + 3.2 * var(--u))
    )
    var(--lamp-at) / 4000px 4000px no-repeat;
  pointer-events: none;
  /* its own layer, so that the panel's text is not painted again every frame the band changes */
  will-change: transform;
}
.wipe > .turn,
.wipe > .turn > .layer {
  position: absolute;
  inset: 0;
}
.hero:has(#light-before:checked) .wipe {
  --a: var(--beam-before);
}
.edge {
  display: none;
}
/* the glow round a panel the light has reached */
.phone::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 4em rgb(var(--lamp-glow) / 0.28);
  opacity: 1;
  pointer-events: none;
  will-change: opacity;
  /* the glow comes up in the last half second of the swing (and goes at once on the way back): fading it all the way round made the
     browser redraw the panels and their glow on every frame of the swing, for a faint effect */
  transition: opacity 0.4s var(--ease-turn) calc(var(--swing) - 0.5s);
}
.hero:has(#light-before:checked) .phone::after {
  opacity: 0;
  transition-delay: 0s;
}
/* The old and the new version of a field sit in the same place, one over the other, so both layers are the same size; each
   layer shows its own. */
.pair {
  display: grid;
}
.pair > * {
  grid-area: 1 / 1;
}
.layer.before .pair > .on,
.layer.after .pair > .off {
  visibility: hidden;
}
/* The page-load intro: the headline arrives in two lines, and then the light swings round from the Before look. The page opens in the
   After state, and each of these is a one-time keyframe animation that holds the Before look until --lead and then runs to whatever the
   page's own value is (the keyframes name only where they start). They are written on the elements themselves, not on a state of the
   switch, so a click can never restart them or cut them short: a click during the intro changes the page's own value, and the animation
   runs on towards it. */
.hero .beam {
  animation: intro-beam var(--swing) var(--ease-turn) var(--lead) backwards;
}
.hero .wipe {
  animation: intro-wipe var(--swing) var(--ease-turn) var(--lead) backwards;
}
.hero .phone::after {
  animation: intro-glow 0.4s var(--ease-turn) calc(var(--lead) + var(--swing) - 0.5s) backwards;
}
/* the switch does not take a click while that first swing is under way: the browser does not run a transition on a value that a keyframe
   animation is moving, so a click then would cut the swing short and snap the light to its place. Before and after the swing it works. */
.switch {
  animation: hold-clicks var(--swing) linear var(--lead);
}
.hero label[for='light-before'] {
  animation: pill-off 0.25s ease var(--lead) backwards;
}
.hero label[for='light-after'] {
  animation: pill-on 0.25s ease var(--lead) backwards;
}
.hero h1 .lead-in {
  display: block;
  margin-bottom: 0.22em;
  font-size: 0.46em;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--on-dusk-soft);
  animation: rise 0.9s var(--ease-turn) 0.3s backwards;
}
.hero h1 .line-two {
  display: block;
  animation: rise 0.9s var(--ease-turn) 2s backwards;
}

/* panel a: the listing on a phone */
.phone {
  position: relative;
  width: var(--wa);
  font-size: calc(var(--wa) / 21.5);
  padding: 0.55em;
  border-radius: 2.7em;
  background: #0b1126;
  box-shadow:
    0 0 0 0.12em #2b3866,
    0 2.4em 4em -1em rgb(0 0 0 / 0.55);
  color: #1b2238;
  font-family: var(--sans);
  line-height: 1.3;
  isolation: isolate;
  user-select: none;
}
.screen {
  position: relative;
  height: 39.4em;
  overflow: hidden;
  border-radius: 2.15em;
  background: #fff;
}
.screen .layer::before {
  /* a soft fade where the sheet carries on below the screen */
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: 4em;
  background: linear-gradient(to bottom, transparent, #fff 85%);
  pointer-events: none;
}
.map {
  height: 6.2em;
  background: #dfeee6;
}
.map svg {
  width: 100%;
  height: 100%;
}
.sheet {
  position: relative;
  margin-top: -1.3em;
  padding: 0.7em 1.25em 0;
  border-radius: 1.5em 1.5em 0 0;
  background: #fff;
}
.grab {
  width: 3em;
  height: 0.3em;
  margin: 0 auto 0.8em;
  border-radius: 1em;
  background: #d5d9e6;
}
.biz {
  font: 700 1.45em/1.15 var(--sans);
  letter-spacing: -0.01em;
  margin: 0;
}
.meta {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.3em;
  font-size: 0.82em;
  color: #596079;
}
.meta b {
  color: #1b2238;
}
.star {
  width: 0.95em;
  height: 0.95em;
  fill: #f0a30a;
}
.status {
  margin-top: 0.45em;
  font-size: 0.88em;
  font-weight: 600;
}
.status .off {
  color: #9a5a00;
}
.status .on {
  color: #596079;
  font-weight: 400;
}
.status .on b {
  color: #137a46;
  font-weight: 700;
}
.actions {
  display: flex;
  gap: 0.55em;
  margin-top: 0.9em;
}
.act {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 0.2em;
  padding: 0.4em 0 0.36em;
  border-radius: 0.8em;
  background: #eef2fb;
  color: #25419f;
  font-size: 0.74em;
  font-weight: 700;
}
.act svg {
  width: 1.7em;
  height: 1.7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.layer.before .act.needs {
  opacity: 0.35;
}
.facts {
  list-style: none;
  margin: 0.85em 0 0;
  padding: 0;
  font-size: 0.86em;
}
.facts li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  align-items: center;
  gap: 0.6em;
  padding: 0.38em 0;
  border-top: 1px solid #e7eaf3;
}
.facts svg {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: #25419f;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.facts .off {
  color: #8a91a8;
}
.photos {
  margin-top: 0.6em;
  height: 2.8em;
}
.photos .off {
  display: grid;
  place-items: center;
  border: 0.12em dashed #c5cadb;
  border-radius: 0.8em;
  font-size: 0.8em;
  color: #8a91a8;
}
.photos .on {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0.4em;
}
.photos i {
  border-radius: 0.7em;
  background: linear-gradient(140deg, #ffcf70, #e9803d);
}
.photos i:nth-child(2) {
  background: linear-gradient(140deg, #f7e3c4, #c99a66);
}
.photos i:nth-child(3) {
  background: linear-gradient(140deg, #bfd9c7, #5f9a78);
}
.reviews {
  list-style: none;
  margin: 0.8em 0 0;
  padding: 0;
  font-size: 0.8em;
}
.reviews li {
  padding: 0.6em 0;
  border-top: 1px solid #e7eaf3;
}
.who {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
}
.who .stars {
  display: flex;
  gap: 0.1em;
}
.who .star {
  width: 0.85em;
  height: 0.85em;
}
.who .star.dim {
  fill: #d5d9e6;
}
.said {
  margin-top: 0.15em;
  color: #3b4260;
}
.reply {
  margin-top: 0.4em;
  min-height: 3.1em;
}
.reply .on {
  padding: 0.5em 0.7em;
  border-radius: 0.7em;
  background: #fff3d6;
  color: #3b3220;
}
.reply .on b {
  display: block;
  font-size: 0.9em;
  color: #8a5a00;
}

/* panel b: where the business is shown, a screen of its own, as high as the listing's */
.panel.b .layer {
  padding: 2.7em 1.3em 0;
}
.panel.c .layer::before {
  display: none;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.55em;
}
.card-title {
  margin: 0;
  font: 700 1.25em/1.2 var(--sans);
}
.count {
  margin: 0;
  font-size: 0.88em;
  font-weight: 700;
  color: #596079;
}
.count .on {
  color: #137a46;
  text-align: right;
}
.count .off {
  text-align: right;
}
.places {
  list-style: none;
  margin: 0;
  padding: 0;
}
.places li {
  display: grid;
  grid-template-columns: 1em 1fr auto;
  align-items: center;
  gap: 0.65em;
  padding: 0.74em 0;
  border-top: 1px solid #e7eaf3;
  font-size: 0.95em;
}
.dot {
  position: relative;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: #c3c9da;
}
.dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ffbe3d;
  box-shadow: 0 0 1em rgb(var(--lamp-glow) / 0.8);
}
.layer.before .dot::after {
  opacity: 0;
}
.pname {
  font-weight: 600;
}
.chip {
  justify-self: end;
  font-size: 0.8em;
  font-weight: 700;
}
.chip > * {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3em;
  padding: 0.22em 0.7em;
  border-radius: 999px;
  white-space: nowrap;
}
.chip .off.none {
  color: #5d6479;
  background: #eef0f6;
}
.chip .off.warn {
  color: #8a5a00;
  background: #fff0cc;
}
.chip .on {
  color: #137a46;
  background: #e1f4e9;
}
.chip .ic,
.url .ic {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* panel c: the website on a phone, in the phone's browser */
.chrome {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 4.9em;
  padding: 1.9em 0.9em 0;
  background: #e9ecf4;
}
.url {
  flex: 1;
  height: 2.1em;
  padding: 0 0.9em;
  align-items: center;
  border-radius: 1.05em;
  background: #fff;
  font-size: 0.85em;
}
.url > * {
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.url .off {
  color: #9a5a00;
}
.url .on {
  color: #137a46;
}
.page {
  position: absolute;
  inset: 4.9em 0 0;
  overflow: hidden;
}
.site-old,
.site-new {
  position: absolute;
  inset: 0;
}
.layer.before .site-new,
.layer.after .site-old {
  visibility: hidden;
}
/* the old site: the kind that has not been touched in years */
.site-old {
  background: #d9d6c4;
  color: #000;
  font-family: 'Times New Roman', Times, serif;
}
.o-title {
  margin: 0;
  padding: 0.5em 0.6em;
  background: #000080;
  color: #fff;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.15;
}
.o-body {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 0.5em;
  padding: 0.6em;
}
.o-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95em;
}
.o-nav li {
  margin: 0.55em 0;
  color: #0000ee;
  text-decoration: underline;
}
.o-main {
  padding: 0.5em 0.6em;
  background: #fff;
  font-size: 0.95em;
}
.o-main p {
  margin: 0 0 0.45em;
}
.o-h {
  font-size: 1.3em;
  font-weight: 700;
}
.o-photo {
  display: grid;
  place-items: center;
  height: 6em;
  margin: 0.3em 0 0.5em;
  border: 1px solid #888;
  background: #eee;
  color: #777;
}
.o-meta {
  color: #c00;
  font-size: 0.9em;
}
.o-counter {
  margin: 0.4em 0.6em;
  padding: 0.35em;
  border: 2px inset #888;
  background: #000;
  color: #0f0;
  font: 700 0.95em/1 monospace;
  text-align: center;
}
.o-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.4em 0.6em;
  background: #bfbcab;
  font-size: 0.85em;
}
/* the new one: a mobile site done well: a bar with a menu button, a picture hero with one clear action, a line of proof, two
   favourites, and the three actions a visitor on a phone wants always in reach at the bottom */
.site-new {
  background: #fbf6ee;
  color: #2a1a12;
  font-family: var(--sans);
}
.n-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.4em;
  padding: 0 1.1em;
}
.n-logo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font: 700 1.2em/1 var(--display);
}
.n-mark {
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: radial-gradient(circle, #6b4328 0 34%, #f3e6d2 36% 58%, #2a1a12 60%);
}
.n-burger {
  display: grid;
  gap: 0.27em;
}
.n-burger i {
  width: 1.4em;
  height: 0.17em;
  border-radius: 2px;
  background: #2a1a12;
}
.n-hero {
  position: relative;
  margin: 0 0.8em;
  padding: 1.4em 1.2em;
  min-height: 14.4em;
  border-radius: 1.2em;
  background: linear-gradient(135deg, #3b2417, #7a4a2b 68%, #b8793f);
  color: #fff7ea;
  overflow: hidden;
}
.n-cup {
  position: absolute;
  right: -3.6em;
  bottom: -3.2em;
  width: 9.4em;
  height: 9.4em;
}
.n-kicker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.7em;
  font-size: 0.8em;
  font-weight: 700;
  color: #ffe3b0;
}
.n-kicker i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #5fd08a;
}
.n-h {
  position: relative;
  margin: 0;
  max-width: 4.8em;
  font: 800 2.3em/1 var(--display);
}
.n-sub {
  position: relative;
  max-width: 13em;
  margin: 0.6em 0 1em;
  font-size: 0.82em;
  color: #f3dfc4;
}
.n-cta {
  position: relative;
  display: flex;
  gap: 0.5em;
  margin: 0;
  font-size: 0.82em;
  font-weight: 700;
}
.n-cta b {
  padding: 0.55em 1.1em;
  border-radius: 999px;
  background: var(--lamp);
  color: #2a1a12;
}
.n-cta span {
  padding: 0.55em 1.1em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.12em rgb(255 246 230 / 0.7);
}
.n-trust {
  display: flex;
  gap: 1.2em;
  margin: 0;
  padding: 0.85em 1.2em 0.4em;
  font-size: 0.8em;
  color: #6b5646;
}
.n-trust b {
  color: #2a1a12;
}
.n-label {
  margin: 0.5em 1.2em 0.5em;
  font: 700 1em/1.2 var(--display);
}
.n-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7em;
  padding: 0 0.8em;
}
.n-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 0.45em;
  border-radius: 0.9em;
  background: #fff;
  box-shadow: 0 0.1em 0.6em rgb(60 30 10 / 0.14);
  font-size: 0.85em;
}
.n-card i {
  grid-column: 1 / -1;
  height: 4.4em;
  margin-bottom: 0.5em;
  border-radius: 0.65em;
  background: linear-gradient(140deg, #e9b36a, #a8663a);
}
.n-card .t2 {
  background: linear-gradient(140deg, #f0cfa4, #c07b4a);
}
.n-card b {
  padding-left: 0.2em;
}
.n-card em {
  font-style: normal;
  font-weight: 700;
  color: #a8531f;
}
.n-bar {
  position: absolute;
  inset: auto 0.8em 0.8em;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 0.5em;
  margin: 0;
  font-size: 0.85em;
}
.n-bar b {
  display: grid;
  place-items: center;
  height: 2.9em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0.15em 0.8em rgb(60 30 10 / 0.25);
}
.n-bar .go {
  background: var(--lamp);
}

/* the switch sits under the headline, above the website and to the right of the listing */
.controls {
  position: absolute;
  z-index: 6;
  /* centred under the three panels */
  left: calc(var(--lh-col) + 2.5em + 1.5 * var(--wa) + 2.5em);
  bottom: 1.4em;
  translate: -50% 0;
}
.switch {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0.3rem;
  border: 0;
  border-radius: 999px;
  background: rgb(16 30 68 / 0.86);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}
.switch label {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  color: var(--on-dusk-soft);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.state:checked + label {
  background: var(--lamp);
  color: var(--dusk-deep);
}
.state:focus-visible + label {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* A small laptop or a tablet held sideways: the same three panels in a row, with a slimmer lighthouse at the left so the panels can be as
   large as the width allows. The beam is laid a little flatter, so it still reaches the panels from the lower lamp. */
@media (max-width: 63.999rem) {
  .stage {
    --u: clamp(8px, min(calc(100cqw / 67), calc((100svh - 6.5rem) / 47)), 26px);
    --stage-w: calc(63.9 * var(--u));
    --lh-col: 9em;
    --lh-w: 17.7em;
    --lh-b: 4em;
    --lamp-x: 6.75em;
    --lamp-b: 41.5em;
    --beam-before: 177deg;
    --beam-after: 3deg;
  }
  .panel.a {
    --lx: calc(5.15 * var(--u));
    --ly: calc(32.76 * var(--u));
  }
  .panel.b {
    --lx: calc(23.45 * var(--u));
    --ly: calc(32.76 * var(--u));
  }
  .panel.c {
    --lx: calc(41.75 * var(--u));
    --ly: calc(32.76 * var(--u));
  }
  /* the headline starts clear of the lantern's railing, which reaches 3.7 wide of the lamp */
  .hero h1 {
    translate: none;
  }
}

/* A phone, or a tablet held upright: the whole demo fits the first screen. The lighthouse stands slim at the left edge, its lamp level
   with the middle of the panels, and the three panels take the rest of the width, in a strip that swipes sideways with the next
   one peeking in. The scene (sky, sea, lighthouse, beam) is still the background of the whole hero, so the beam sweeps across
   the panel in view. --u is set by the height of the window, and each panel is held to the width of the strip. */
@media (max-width: 43.999rem), (max-width: 64rem) and (max-aspect-ratio: 4/5) {
  .hero .wrap {
    width: min(100% - 2rem, 100rem);
  }
  /* the hero is as high as what is in it: the panels are smaller than the screen, and a screen-high hero left a gap above them */
  .hero {
    min-height: 0;
  }
  .stage {
    --h1: clamp(1.6rem, min(8.1vw, 7.5svh), 4rem);
    /* what is left of the window once the header, the two-line headline and the switch are in, shared out over the panels */
    --u: clamp(9px, calc((100svh - 14.95rem - 2.75 * var(--h1)) / 29.76), 21px);
    --foot: 3.5rem;
    --stage-w: 100cqw;
    --shift: 0em;
    --lamp-x: clamp(2.6rem, 12cqw, 5.5rem);
    --lh-col: calc(var(--lamp-x) + 5.5rem);
    /* The lighthouse stands left of centre and the strip right of it, the lamp 5.5rem before the first panel. The first panel is 1.884
       times as high as wide and stands --foot up from the bottom of the stage; the lamp is level with its top edge, so the beam, which
       never points up, has the whole panel below it. The lantern roof stands about a third of the lighthouse's width above the lamp,
       so the switch is held that far clear of the strip (.controls), and the lighthouse never runs into it. The lighthouse is as large
       as it takes to reach the sea from the lamp (2.12 high to 1 wide, from the lamp down). */
    --panel-top: calc(var(--foot) + 1.884 * var(--wa));
    --lamp-b: calc(var(--panel-top) + 0.9rem);
    --lh-b: calc(8 * var(--u));
    --lh-w: calc((var(--lamp-b) - var(--lh-b)) / 2.12);
    --strip: calc(100cqw - var(--lh-col) + 1rem);
    --peek: 1.6rem;
    --wa: min(calc(15.8 * var(--u)), calc(var(--strip) - var(--peek) - 1.1 * var(--u)));
    --beam-before: 178deg;
    --beam-after: 2deg;
    --beam-w: 33.3em;
    --beam-h: 11.1em;
    grid-template-columns: var(--lh-col) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 0;
    row-gap: 0.9rem;
    align-items: start;
    min-height: 0;
    padding: 1rem 0 var(--foot);
  }
  .hero h1 {
    grid-column: 1 / -1;
    grid-row: 1;
    translate: none;
    max-width: none;
    font-size: var(--h1);
  }
  .controls {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    justify-self: stretch;
    position: static;
    translate: none;
    margin-bottom: calc(0.33 * var(--lh-w) + 0.1rem);
  }
  .switch {
    display: flex;
    max-width: 24rem;
  }
  .switch label {
    flex: 1;
    padding: 0 0.5rem;
    font-size: 0.95rem;
  }
  .panel.a {
    --lx: calc(5.5rem + 0.55 * var(--wa) / 21.5);
    --ly: calc(var(--lamp-b) - var(--foot) - 0.55 * var(--wa) / 21.5);
  }
  .panel.b {
    --lx: calc(5.5rem + 0.55 * var(--wa) / 21.5 + var(--wa) + max(1.1 * var(--u), 1.5rem));
    --ly: calc(var(--lamp-b) - var(--foot) - 0.55 * var(--wa) / 21.5);
  }
  .panel.c {
    --lx: calc(5.5rem + 0.55 * var(--wa) / 21.5 + 2 * (var(--wa) + max(1.1 * var(--u), 1.5rem)));
    --ly: calc(var(--lamp-b) - var(--foot) - 0.55 * var(--wa) / 21.5);
  }
  .panels {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    display: flex;
    align-items: flex-end;
    gap: max(1.1em, 1.5rem);
    /* The strip is larger than the panels so that their glow is not cut off at its edges: room above and below, taken back off
       its size, and on the left a soft edge that panels fade out through, so they never end at a hard line. It runs on to the
       edge of the screen on the right. */
    margin: -4.5em -1rem -4em -1.5rem;
    padding: 4.5em 1rem 4em 1.5rem;
    scroll-padding-inline-start: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, transparent, #000 1.5rem);
  }
  .panels::-webkit-scrollbar {
    display: none;
  }
  .panels:focus-visible {
    outline-offset: -4px;
  }
  .panel {
    flex: none;
    scroll-snap-align: start;
  }
  @media (prefers-reduced-motion: no-preference) {
    .panels {
      scroll-behavior: smooth;
    }
  }
  /* a tighter glow, so the panel scrolled out of view leaves no haze behind in the sky */
  .phone::after {
    box-shadow: 0 0 2.2em rgb(var(--lamp-glow) / 0.3);
  }
  /* the captions are for screen readers only: a swipe is how the strip is used, and the strip takes the arrow keys when it has focus */
  .panel figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
  }
  @keyframes intro-beam {
    from {
      --a: 178deg;
      opacity: 0.8;
    }
  }
  @keyframes intro-wipe {
    from {
      --a: 178deg;
    }
  }
  @supports (animation-timeline: scroll()) {
    /* The lamp stays where it is as the strip is swiped, so the mask's centre must stay with it: moved along the panel by the scroll
       offset (the range is longer than any scroll, so the value is the offset itself). */
    .panel {
      animation: follow-lamp linear both;
      animation-timeline: --panels;
      animation-range: 0 100rem;
    }
  }
}
/* The strip's scroll is a named timeline, so that the mask can follow it (see follow-lamp). */
@supports (animation-timeline: scroll()) {
  .stage {
    timeline-scope: --panels;
  }
  .panels {
    scroll-timeline: --panels inline;
  }
}
@keyframes hold-clicks {
  from,
  to {
    pointer-events: none;
  }
}
/* The intro's keyframes carry the Before angle as a number, not as var(--beam-before): Firefox does not interpolate a registered custom
   property whose keyframe value is a var(), and snaps it half way through instead. The phone's Before angle is in the media query. */
@keyframes intro-beam {
  from {
    --a: 177deg;
    opacity: 0.8;
  }
}
@keyframes intro-wipe {
  from {
    --a: 177deg;
  }
}
@keyframes intro-glow {
  from {
    opacity: 0;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 0.35em;
  }
}
@keyframes pill-off {
  from {
    background-color: var(--lamp);
    color: var(--dusk-deep);
  }
}
@keyframes pill-on {
  from {
    background-color: transparent;
    color: var(--on-dusk-soft);
  }
}
@keyframes follow-lamp {
  from {
    --sx: 0px;
  }
  to {
    --sx: 100rem;
  }
}

/* No swing and no fades when the visitor asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero *::before,
  .hero *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- the intro below the hero ---------- */
/* the section only: three paragraphs in other sections are also class "intro" and must not pick up its padding */
section.intro {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}
/* The sea does not end in a line, on any screen: the section under the hero opens with a long gradient from the sea's own bottom colour
   (the last wave, #101e44) up through the blues of the sky into the page colour, so the middle of it is blue and not grey, and its text
   starts clear of it. */
section.intro {
  padding-top: 7.5rem;
  background: linear-gradient(to bottom, #101e44, #1d3466 16%, #3a5a9a 40%, #7f98c8 64%, #c3d1ea 84%, var(--day)) 0 0 / 100% 5.5rem no-repeat;
}
.intro-grid {
  display: grid;
  gap: 1.75rem 4rem;
  align-items: center;
}
@media (min-width: 56rem) {
  .intro-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  }
}
.intro-lede {
  max-width: 38rem;
  font: 700 clamp(1.45rem, 1rem + 1.4vw, 2.05rem) / 1.28 var(--display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.intro-actions {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.intro-note {
  max-width: 30rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- sections ---------- */
.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.section h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem);
}
.section .intro {
  margin-top: 1rem;
  max-width: 36rem;
  color: var(--ink-soft);
}

.lamps {
  display: grid;
  gap: 2.5rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 56rem) {
  .lamps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}
.lamps li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0 1.25rem;
  align-content: start;
}
@media (min-width: 56rem) {
  .lamps li {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.lamps svg {
  width: 3.5rem;
  height: 3.5rem;
  filter: drop-shadow(0 0 1rem rgb(var(--lamp-glow) / 0.55));
}
.lamps h3 {
  font-size: 1.45rem;
}
.lamps p {
  margin-top: 0.6rem;
}
.lamps .fine {
  font-size: 1rem;
  color: var(--ink-soft);
}

.start {
  background: var(--day-2);
}
.start-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 56rem) {
  .start-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 5rem;
  }
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}
.steps li {
  display: grid;
  gap: 0.35rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 40rem) {
  .steps li {
    grid-template-columns: 11rem 1fr;
  }
}
.steps b {
  font: 700 1.2rem/1.3 var(--display);
}

.dusk {
  background: var(--dusk);
  color: var(--on-dusk);
}
.emailed {
  padding-block: clamp(2rem, 5vw, 3rem);
}
.emailed .dusk {
  border-radius: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.75rem, 5vw, 4rem);
}
.emailed h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem);
}
.emailed .intro {
  margin-top: 0.9rem;
  color: var(--on-dusk-soft);
}
.qa {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (min-width: 56rem) {
  .qa {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}
.qa h3 {
  font-size: 1.35rem;
  color: var(--lamp);
}
.qa p {
  margin-top: 0.6rem;
  color: var(--on-dusk);
}
.qa b {
  font-weight: 700;
}
.emailed .btn {
  margin-top: 2.5rem;
}

.about-grid {
  display: grid;
  gap: 1.5rem 5rem;
}
@media (min-width: 56rem) {
  .about-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}
.about p + p {
  margin-top: 1rem;
}
.about .btn {
  margin-top: 1.75rem;
}
.contact {
  max-width: 34rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  background: var(--day-2);
}
.contact h3 {
  font-size: 1.25rem;
}
.contact p {
  margin-top: 0.5rem;
}
.sign {
  margin-top: 1.5rem;
  font: 700 1.25rem/1.3 var(--display);
}
.sign span {
  display: block;
  font: 400 1rem/1.4 var(--sans);
  color: var(--ink-soft);
}

/* ---------- footer ---------- */
.foot {
  background: var(--dusk-deep);
  color: var(--on-dusk-soft);
  font-size: 1rem;
}
.foot-grid {
  display: grid;
  gap: 1.5rem 3rem;
  padding-block: 2.5rem;
}
@media (min-width: 46rem) {
  .foot-grid {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}
.foot .brand {
  font-size: 1.35rem;
  margin-bottom: 0.9rem;
}
.foot p {
  max-width: 34rem;
}
.foot .small-print {
  margin-top: 0.6rem;
  font-size: 0.9rem;
}
.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot a {
  color: var(--on-dusk);
}
.foot a:focus-visible {
  outline-color: var(--lamp);
}

/* ---------- privacy notice and other plain pages ---------- */
.doc {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3.5rem, 8vw, 6rem);
}
.doc .narrow {
  max-width: 44rem;
}
.doc h1 {
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.6rem);
  line-height: 1.06;
}
.doc .updated {
  margin-top: 1rem;
  color: var(--ink-soft);
}
.doc h2 {
  margin-top: 2.75rem;
  font-size: 1.6rem;
}
.doc p {
  margin-top: 0.9rem;
}
.doc a {
  overflow-wrap: anywhere;
}
.doc .lead {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- 404 ---------- */
.lost-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--dusk);
  color: var(--on-dusk);
  text-align: center;
}
.lost-page :focus-visible {
  outline-color: var(--lamp);
}
.lost-wrap {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  width: min(100% - 2rem, 32rem);
  padding-block: 3rem;
}
.lost-wrap h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
}
.lost-wrap p {
  color: var(--on-dusk-soft);
}
.lost-wrap .small {
  font-size: 1rem;
}
.lost-wrap .small a {
  color: var(--on-dusk);
}
.lighthouse-off {
  width: 5rem;
  height: 7rem;
  color: #8e9bc4;
}