/* LocalBooked · localbooked.co
   Design rules live in DESIGN.md. Tokens are defined once in :root. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght-normal.woff2?v=14be4114") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2?v=f052ee44") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-italic.woff2?v=ecbf4bcc") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Size-matched fallbacks: close to the same line breaks before and after the web fonts load. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 100 900;
  size-adjust: 103%;
  ascent-override: 103.6%; /* Manrope: ascent 1.066, descent .3 (divided by size-adjust 1.03) */
  descent-override: 29.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.1%;
  ascent-override: 90.4%; /* Inter: ascent .969, descent .242 (divided by size-adjust 1.071) */
  descent-override: 22.6%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #f4f6ee;       /* page background */
  --white: #fff;          /* cards */
  --ink: #0b0c0a;         /* text, dark sections */
  --graphite: #565b4f;    /* secondary text on light */
  --rule: #dde1d3;        /* hairlines on light */
  --lime: #c8ff2e;        /* fill only: primary buttons (ink text), the underline, checked squares, lime sections */
  --lime-text: #4d6b00;   /* lime as text on a light background */
  --lime-tint: #eaffb0;   /* text selection, soft fills */
  --cyan: #2ee6ff;        /* second accent: fill only on light, text only on ink */
  --cyan-text: #00707f;   /* cyan as text on a light background */
  --night-text: #f4f6ee;  /* text on ink */
  --night-muted: #a6ab9e; /* secondary text on ink */
  --night-rule: #2a2e25;  /* hairlines on ink */
  --night-card: #171a13;  /* the plan cards on ink */
  --night-line: #4a5042;  /* card edges on ink (2.35:1 on ink, a visible edge) */

  --font-display: "Manrope", "Manrope Fallback", sans-serif;
  --font-text: "Inter", "Inter Fallback", sans-serif;

  --space-xs: .5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-pad: clamp(3.5rem, 7vw, 6rem);
  --max: 90rem;

  --radius: 2px;
  --header-h: 4.75rem;  /* fixed, so the hero can fill exactly what is left of the first screen */
  --text-size: 1.0625rem;
  --small-size: .9375rem;
  /* The closing "Want to see yours?" (the hero sizes its own headline) */
  --display-size: min(11.5vw, 7svh, 3.5rem);
  --h2-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --h3-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem);
  --display-track: -.03em; /* Manrope at display sizes is set tight */
}

@media (min-width: 641px) {
  :root {
    --text-size: clamp(1.0625rem, .9rem + .4vw, 1.25rem);
    --header-h: 5.75rem;
    /* Wider screens: the closing heading, sized by width and by height. */
    --display-size: min(calc((100vw - 2 * var(--gutter)) / 9), 14svh, 8rem); /* the closing call to action */
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden; /* the page never moves sideways (older Safari) */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--font-text);
  font-size: var(--text-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--lime-tint); color: var(--ink); }
input, textarea { caret-color: var(--lime-text); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
main:focus { outline: none; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip-link {
  position: absolute;
  top: var(--space-s);
  left: var(--gutter);
  z-index: 10;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  height: var(--header-h);
}

/* The logo: Kasper's calendar with a pin. On light the calendar is ink and the pin cyan; on ink the calendar is lime. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark { flex: none; width: 1.75rem; height: auto; overflow: visible; }
.brand__line { stroke: currentColor; }
.brand__fill { fill: currentColor; }
.brand__pin { fill: var(--cyan); }
.brand__hole { fill: var(--paper); }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.night .brand, .brand--night { color: var(--lime); }
.night .brand__name, .brand--night .brand__name { color: var(--night-text); }
.night .brand__hole, .brand--night .brand__hole { fill: var(--ink); }
.section--white .brand__hole { fill: var(--white); }
@media (max-width: 400px) { .brand__name { font-size: 1.1875rem; } .brand__mark { width: 1.5rem; } }

.site-nav { display: flex; align-items: center; gap: var(--space-l); }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  padding: 0;
  list-style: none;
}
/* Below 900px the five links sit behind a Menu button (site.js). Without the script they stay in view and wrap. */
.menu-toggle {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 .25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 var(--small-size)/1 var(--font-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  cursor: pointer;
}
.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { text-decoration-thickness: 2px; }
@media (max-width: 899px) {
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--gutter) var(--space-l);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
  }
  .js .site-nav.is-open .site-nav__links { display: flex; }
  .js .site-nav__links a:not(.btn) {
    min-height: 3.25rem;
    border-top: 1px solid var(--rule);
    font-size: 1.25rem;
    font-weight: 600;
  }
  html:not(.js) .site-header { flex-wrap: wrap; height: auto; padding-block: var(--space-s); }
  html:not(.js) .site-nav { flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-m); }
  html:not(.js) .site-nav ul { flex-wrap: wrap; gap: 0 var(--space-m); }
}

.site-nav a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--small-size);
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.site-nav .btn--nav { min-height: 2.75rem; padding: 0 var(--space-s); font-size: var(--small-size); }

/* "The system": a button that opens the six parts (site.js). From 900px a white panel under the header; in the
   phone menu the parts open in place under the button. Without the script the panel opens on hover and focus. */
.has-sub { position: relative; }
.sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 500 var(--small-size)/1.2 var(--font-text);
  cursor: pointer;
}
.sub-toggle::after { /* a small chevron, drawn with two borders */
  content: "";
  width: .4rem;
  height: .4rem;
  margin-top: -.2rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.sub-toggle[aria-expanded="true"]::after { margin-top: .2rem; transform: rotate(-135deg); }
.sub-toggle:hover, .sub-toggle[data-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.site-nav__sub { display: none; }
.js .has-sub.is-open > .site-nav__sub { display: block; }
html:not(.js) .has-sub:hover > .site-nav__sub, html:not(.js) .has-sub:focus-within > .site-nav__sub { display: block; }
.site-nav__sub ul { display: grid; gap: 0; padding: 0; list-style: none; }
.site-nav .site-nav__sub a:not(.btn) { display: grid; align-content: center; gap: .125rem; min-height: 3.25rem; padding-block: .375rem; }
.site-nav__sub b { font-weight: 600; }
.site-nav__sub span { color: var(--graphite); font-size: .875rem; }
.site-nav .site-nav__sub a:not(.btn):hover b, .site-nav .site-nav__sub a[aria-current="page"] b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.site-nav .site-nav__sub a:hover, .site-nav .site-nav__sub a[aria-current="page"] { text-decoration: none; }
.site-nav .site-nav__all { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
@media (min-width: 900px) {
  .site-nav__sub {
    position: absolute;
    top: calc(100% + .5rem);
    left: -1.5rem;
    z-index: 40;
    width: 23rem;
    padding: var(--space-s) var(--space-m) var(--space-xs);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
  }
  .site-nav__sub li + li { border-top: 1px solid var(--rule); }
  .site-nav__sub .site-nav__all { margin-top: var(--space-xs); border-top: 1px solid var(--ink); }
}
@media (max-width: 899px) {
  .js .has-sub { border-top: 1px solid var(--rule); }
  .js .sub-toggle { justify-content: space-between; width: 100%; min-height: 3.25rem; font-size: 1.25rem; font-weight: 600; }
  .js .site-nav__sub { padding: 0 0 var(--space-s) var(--space-s); }
  .js .site-nav__links .site-nav__sub a:not(.btn) { min-height: 3rem; border-top: 0; font-size: 1rem; }
  .js .site-nav__links .site-nav__sub a b { font-weight: 600; }
}

/* ---------- Buttons and links ---------- */
/* Hover and press share one state, so touch gets the same feedback. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--space-s);
  border-radius: var(--radius);
  font-size: var(--small-size);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
/* The smallest phones: a long label ("How old lead reactivation works") wraps instead of pushing the page wider */
@media (max-width: 400px) { main .btn { white-space: normal; text-align: center; text-wrap: balance; padding-block: .75rem; } }
.btn--quiet { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--primary {
  min-height: 3.5rem;
  padding: 0 var(--space-l);
  background: var(--lime);
  color: var(--ink);
  font-size: var(--text-size);
}
.btn:hover, .btn:active { background: var(--ink); color: var(--white); }
.site-nav .btn[aria-current="page"] { background: var(--ink); color: var(--white); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.text-link:hover, .text-link:active { text-decoration-thickness: 2px; }

/* ---------- Sections ---------- */
.section { padding: var(--section-pad) 0; }
/* Section colours (home page): light, dark and green take turns, so each section clearly starts and ends.
   .night is ink (defined with the examples), .section--white is white, .section--lime is the accent green with
   ink text (7.4:1); on green every text is ink and the primary button turns ink. */
.section--white { background: var(--white); }
.section--white .review { background: var(--paper); }
.section--lime { background: var(--lime); color: var(--ink); }
.section--lime .section__lead, .section--lime p { color: var(--ink); }
.section--lime .btn--primary { background: var(--ink); color: var(--night-text); }
.section--lime .btn--primary:hover, .section--lime .btn--primary:active { background: var(--white); color: var(--ink); }
.section--lime .terms { border-top-color: var(--ink); }

.section__title {
  margin-bottom: var(--space-xl);
  max-width: 14em;
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--display-track);
  text-wrap: balance;
}
/* Card titles, FAQ questions and small headings: balanced, so none ends on a single word */
h3, h4, summary { text-wrap: balance; }
.section__lead {
  max-width: 34em;
  margin-top: calc(var(--space-l) * -1);
  margin-bottom: var(--space-xl);
  color: var(--graphite);
}

/* Split layout: heading on the left, content on the right (wide screens). */
.split { display: grid; gap: 0 var(--space-xl); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split > .section__title { margin-bottom: 0; }
}

/* ---------- Hero ---------- */
/* The first screen does the selling: what this is (label and headline), why it is safe to try (the rotating line
   rests on "You see it before you pay."), the main button, and a real look at the work (an example site on a phone).
   Phones: the copy, then the phone, whose top shows at the bottom of the first screen. From 900px: the copy left,
   the phone right, both centred in the first screen. min-height (not height), so a short screen can still grow. */
.hero {
  display: grid;
  gap: var(--space-l);
  align-content: center;
  overflow-x: clip; /* the underline wipes out past the right edge; never let it widen the page */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--space-xs) var(--space-l);
}
.hero__copy { min-width: 0; container-type: inline-size; }
/* The underline's band starts just under the baseline of "first" (the font's descent is .21em, "first" has no
   descender), so the stroke sits just under the word at every width without touching it. */
.hero .mark__line { margin-top: -.24em; }

.hero__title {
  font-family: var(--font-display);
  font-size: min(10.2cqw, 5.6svh, 3.25rem); /* LocalBooked: a longer headline in the wider Manrope, so 3 to 4 lines */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--display-track);
  text-wrap: balance;
}
.hero__line { display: block; }
.hero__turn {
  margin-top: .55em;
  font-size: .56em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

/* The paragraph, the button and the proof: one group, the paragraph as the main message (ink, larger). */
.hero__group { display: grid; gap: var(--space-m); max-width: 36rem; margin-top: var(--space-l); }
.hero__text { color: var(--ink); font-size: clamp(1.0625rem, .95rem + .5vw, 1.3125rem); line-height: 1.45; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); }
/* Proof, with "proof" on: the photo of Nikolaj with his name, and the Google rating, on one ruled row. */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}
.hero-proof:not(:has(*)) { display: none; } /* photo and rating both switched off: no empty ruled row */
.hero-proof__person { display: flex; flex: 1 1 15rem; align-items: center; gap: var(--space-s); }
.hero-proof__person picture { flex: none; }
.hero-proof__photo { display: block; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; background: var(--ink); }
.hero-proof__who { color: var(--graphite); font-size: var(--small-size); line-height: 1.35; text-wrap: pretty; }
.hero-proof__who b { color: var(--ink); font-weight: 600; } /* one sentence: "Nikolaj Sparwath co-founded LocalBooked …" */
.hero-proof .ph--rating { flex: 0 1 11rem; min-height: 4rem; font-size: .8125rem; }
.hero .hero__rating-below { display: none; } /* .hero: wins over .ph further down */

/* The phone: one of Narto's example sites, whole, in a phone's proportions (drawn in CSS, as the feature phones). */
.hero__visual { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; }
.hero-phone {
  position: relative;
  width: min(70vw, 17rem);
  aspect-ratio: 9 / 19;
  min-height: 0; /* exactly 9:19: the screenshot inside never makes the phone grow when it loads */
  padding: .4375rem;
  border-radius: 2.75rem;
  background: var(--ink);
}
.hero-phone::before, .hero-phone::after { /* the side keys */
  content: "";
  position: absolute;
  width: 2px;
  background: var(--ink);
}
.hero-phone::before { left: -2px; top: 19%; height: 10%; border-radius: 1px 0 0 1px; }
.hero-phone::after { right: -2px; top: 24%; height: 13%; border-radius: 0 1px 1px 0; }
.hero-phone__screen { /* placed inside the frame, not height: 100% (WebKit cannot resolve that against aspect-ratio) */
  position: absolute;
  inset: .4375rem;
  overflow: hidden;
  border-radius: 2.3125rem;
  background: var(--white);
}
.hero-phone__screen::before { /* the camera cut-out */
  content: "";
  position: absolute;
  top: .5625rem;
  left: 50%;
  width: 4.5rem;
  height: 1.3125rem;
  margin-left: -2.25rem;
  border-radius: 1rem;
  background: var(--ink);
}
.hero-phone__screen::after { /* the home indicator */
  content: "";
  position: absolute;
  bottom: .55rem;
  left: 33%;
  width: 34%;
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
}
.hero-phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5rem;
  padding: 0 1.375rem 0 1.5rem;
}
.hero-phone__bar svg { display: block; fill: currentColor; }
.hero-phone img { width: 100%; height: auto; }
/* A price tag on the phone, like the job tags in the trades band: "$0 until you've seen your site". */
.hero-stage { position: relative; }
@media (max-width: 899px) { .hero-stage { margin-bottom: 3rem; } } /* room for the tag hanging below the phone, inside the hero */
.hero-tag {
  position: absolute;
  top: 85%; /* low on the lock screen, under the notifications, hanging past the phone */
  left: -1.25rem;
  display: grid;
  width: 7.75rem;
  padding: 1.6rem .875rem .875rem;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--rule);
  transform: rotate(-6deg);
}
.hero-tag::before { /* the eyelet */
  content: "";
  position: absolute;
  top: .55rem;
  left: 50%;
  width: .6rem;
  height: .6rem;
  margin-left: -.3rem;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--lime);
}
.hero-tag__fig { font-family: var(--font-display); font-size: 3.25rem; font-weight: 800; line-height: .9; }
.hero-tag__text { margin-top: .35rem; font-size: .8125rem; font-weight: 600; line-height: 1.25; }

/* LocalBooked: the hero phone shows the owner's lock screen, four notifications with plain labels and no app name
   (one per part of the system that reaches out), tagged "Example". Sized in cqw of the screen, so it scales as one drawing. */
.hero-phone__screen.lock { background: var(--lime-tint); container-type: inline-size; }
.lock .hero-phone__bar { position: relative; z-index: 1; height: 14cqw; padding: 0 7cqw 0 9.5cqw; font-size: 4.6cqw; font-weight: 600; }
.lock__icons { display: flex; align-items: center; gap: 1.6cqw; }
.lock__icons svg { width: auto; height: 3.8cqw; }
.lock__tag {
  position: absolute;
  top: 15.5cqw;
  right: 4.5cqw;
  padding: .7cqw 2.4cqw .8cqw;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--night-text);
  font-size: max(10px, 3.5cqw);
  font-weight: 600;
  line-height: 1.3;
}
.lock__date { margin-top: 9cqw; font-size: 4.6cqw; font-weight: 600; text-align: center; }
.lock__time { font-family: var(--font-display); font-size: 21cqw; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-align: center; }
.lock__notes { display: grid; gap: 2.4cqw; margin: 7cqw 0 0; padding: 0 3.4cqw; list-style: none; }
.lock__note { display: grid; gap: .4cqw; padding: 3.2cqw 3.8cqw 3.4cqw; border-radius: 4.4cqw; background: var(--white); font-size: max(10.5px, 4.1cqw); line-height: 1.3; }
.lock__app { display: flex; align-items: center; gap: 1.6cqw; color: var(--graphite); font-size: .92em; }
.lock__app b { color: var(--ink); font-weight: 600; }
.lock__app span:last-child { margin-left: auto; }
.lock__icon { position: relative; flex: none; width: 4.2cqw; height: 4.2cqw; border-radius: 1.1cqw; background: var(--ink); }
.lock__icon::after { content: ""; position: absolute; top: 27%; left: 24%; width: 52%; height: 40%; border-radius: .5cqw .5cqw .5cqw 0; background: var(--lime); }
.lock__title { font-weight: 700; }
.lock__text { color: var(--graphite); }
/* A short wide screen makes a small phone, where the text is at its minimum size: three notifications, so the tag
   hangs over empty screen, not over the fourth. */
@media (min-width: 900px) and (max-height: 820px) { .lock__note:nth-child(4) { display: none; } }

/* Stacked (below 900px): headline, rotating line, paragraph, button, one small line with the round photo slot and
   Nikolaj's name, then the phone right away, and the rating slot under the phone. No "See three examples": the
   example is right there. */
@media (max-width: 899px) {
  .hero { gap: var(--space-m); }
  .hero__group { gap: var(--space-s); margin-top: var(--space-m); }
  .hero__actions .text-link { display: none; }
  .hero-proof { padding-top: 0; border-top: 0; }
  .hero-proof__person { gap: .625rem; }
  .hero-proof__photo { width: 2.5rem; height: 2.5rem; }
  .hero-proof__who { font-size: .8125rem; line-height: 1.3; }
  .hero .hero-proof__rating { display: none; }
  .hero .hero__rating-below { display: flex; width: min(100%, 17rem); min-height: 4rem; margin-top: var(--space-m); font-size: .8125rem; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-xl); }
  .hero__title { font-size: min(8.4cqw, 8.4svh, 5.5rem); }
  .hero__turn { margin-top: .45em; font-size: .42em; }
  .hero-phone { width: auto; height: min(calc(100svh - var(--header-h) - 7rem), 40rem); }
  .hero-tag { top: 80%; left: -5.5rem; width: 9.5rem; padding: 1.9rem 1.125rem 1.125rem; }
  .hero-tag__fig { font-size: 4.25rem; }
  .hero-tag__text { font-size: .9375rem; }
}

/* Hand-drawn underline under "first", drawn in left to right. */
.mark { position: relative; }
.mark__line {
  position: absolute;
  left: -.04em;
  right: -.1em;
  top: 100%;
  height: .26em;
  margin-top: -.1em;
  overflow: hidden;
  pointer-events: none;
}
.mark__draw, .mark__line svg { display: block; width: 100%; height: 100%; }
.mark__line svg { overflow: visible; }
.mark__line path {
  fill: none;
  stroke: var(--lime);
  stroke-width: max(4px, .07em);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Rotating line: every phrase shares one grid cell, so the cell is always as
   tall as the longest phrase and nothing reflows. Bottom padding keeps
   descenders inside the mask; the negative margin gives that space back. */
.rotator {
  display: grid;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.rotator__item { grid-area: 1 / 1; }
.rotator__item + .rotator__item { opacity: 0; visibility: hidden; }

.terms {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m) var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}
.terms__text { max-width: 32em; color: var(--graphite); text-wrap: pretty; }
.terms__text a { color: var(--ink); }
.terms__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m) var(--space-l);
}

/* ==================== placeholders ==================== */
/* Empty slots for proof Narto does not have yet. Marked data-placeholder; a production deploy refuses them. */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-s);
  border: 1.5px dashed var(--graphite);
  border-radius: var(--radius);
  color: var(--graphite);
  font-size: var(--small-size);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.night .ph { border-color: var(--night-muted); color: var(--night-muted); }
.ph--video { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--photo { aspect-ratio: 4 / 5; }
.ph--quote { min-height: 7.5rem; }
.ph--chip { display: inline-flex; min-height: 2.75rem; }
/* The customer rating slot: five empty stars over its label (Narto's own customers; no Google anywhere) */
.ph--rating { flex-direction: column; gap: .3rem; }
.ph-stars { display: block; width: 5.25rem; height: auto; color: var(--graphite); }

.terms__copy { max-width: 32em; }

/* ---------- Decks (deck.js): one review or example at a time below 900px, moved only by the visitor ---------- */
/* All items share one cell (so the height never jumps); only the current one is visible. No fades: the swap is
   instant and deck.js slides the new one a short way in. pan-y: a sideways swipe is the deck's, up and down scrolls. */
.is-deck { display: grid; overflow-x: hidden; overflow-x: clip; touch-action: pan-y; }
.is-deck > * { grid-area: 1 / 1; visibility: hidden; }
.is-deck > .is-active { visibility: visible; }
/* The controls: previous, the dots, next. 44px targets; rings in graphite (on light) or night-muted (on ink). */
.deck-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); margin-top: var(--space-m); }
.deck-nav[hidden] { display: none; }
@media (min-width: 900px) { .deck-nav { display: none; } }
.deck-dots { display: flex; justify-content: center; }
.deck-step {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--graphite);
  cursor: pointer;
}
.deck-step:active { background: var(--ink); color: var(--white); box-shadow: none; }
@media (hover: hover) { .deck-step:hover { background: var(--ink); color: var(--white); box-shadow: none; } }
.deck-dot { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.deck-dot::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--graphite); }
.deck-dot[aria-pressed="true"]::before { background: var(--ink); box-shadow: none; }
.night .deck-step { color: var(--night-text); box-shadow: inset 0 0 0 1.5px var(--night-muted); }
.night .deck-step:active { background: var(--night-text); color: var(--ink); box-shadow: none; }
@media (hover: hover) { .night .deck-step:hover { background: var(--night-text); color: var(--ink); box-shadow: none; } }
.night .deck-dot::before { box-shadow: inset 0 0 0 1.5px var(--night-muted); }
.night .deck-dot[aria-pressed="true"]::before { background: var(--night-text); }
.deck-dot:focus-visible { outline-offset: -6px; }


/* ---------- Examples: the one dark section ---------- */
.night {
  background: var(--ink);
  color: var(--night-text);
}
.night :focus-visible { outline-color: var(--night-text); }
.night .section__lead { color: var(--night-muted); }
.night .text-link { color: var(--night-text); }
/* Questions on ink */
.night .faq details { border-color: var(--night-rule); }
.night .faq summary::after {
  background:
    linear-gradient(var(--night-text), var(--night-text)) center / 100% 2px no-repeat,
    linear-gradient(var(--night-text), var(--night-text)) center / 2px 100% no-repeat;
}
.night .faq details[open] summary::after { background: linear-gradient(var(--night-text), var(--night-text)) center / 100% 2px no-repeat; }
.night .faq details p { color: var(--night-muted); }
.night .faq a { color: var(--night-text); }
/* Compact (2026-10-06): three cards in one row from 900px, one at a time below (deck.js). Each card: the screenshot,
   the name, "Example ... site" and "Open it". The full list is on /examples. */
.examples { padding: calc(var(--section-pad) * .75) 0; }
.examples__head { margin-bottom: var(--space-l); }
.examples__head .section__title { margin-bottom: var(--space-s); font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
.examples__head .section__title:last-child { margin-bottom: 0; }



.shots { display: grid; gap: var(--space-l); padding: 0; list-style: none; }
.shot { position: relative; display: flex; flex-direction: column; gap: var(--space-s); }
.shot__text { display: grid; align-content: start; gap: .25rem; }
/* The name is the link; its ::after stretches over the whole row, so the row is one click target. */
.shot__link { text-decoration: none; }
.shot__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.shot__link:focus-visible { outline: none; }
.shot__link:focus-visible::after { outline: 2px solid var(--night-text); outline-offset: .5rem; }
.shot__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  font-weight: 700;
  line-height: 1;
  text-wrap: balance;
}
.shot__meta { color: var(--night-muted); }
.shot__meta span { color: var(--night-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.shot:hover .shot__meta span { text-decoration-thickness: 2px; }

/* Screenshot that resolves from pixels to sharp. Layers: sharp at the bottom,
   then 64, 32 and 16 pixel wide versions on top (coarsest last). */
.shot__media {
  position: relative;
  order: -1; /* the screenshot on top of the card */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--night-rule);
}
.shot__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.shot__media .px { image-rendering: pixelated; }
.examples__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-xl);
}
.examples__end .text-link { color: var(--night-text); }
@media (max-width: 640px) { .examples__end .btn, .demo__act .btn { width: 100%; } } /* phones: primary buttons full width */
.night .btn--primary:hover, .night .btn--primary:active { background: var(--night-text); color: var(--ink); }

/* Without the script the sharp image shows; with it, the pixel layers rest on top until focus. */
.px-ready .shot__media .px { opacity: 1; }
.shot__media .px { opacity: 0; }

/* Focus frame: corner marks, so the pixels read as intentional, not broken. */
.shot__focus { display: none; }
.px-ready .shot__focus {
  --c: var(--ink);
  --l: 1.5rem;
  --w: 3px;
  position: absolute;
  inset: .75rem;
  display: flex;
  align-items: flex-end;
  padding: var(--space-s);
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l) no-repeat;
  pointer-events: none;
}
.is-sharp .shot__focus { display: none; }

@media (min-width: 641px) { .shot__media { aspect-ratio: 16 / 10; } }
/* On phones (up to 640px) each card is a drawn phone holding the example's whole first screen, as in the hero, instead
   of a crop of its header. The frame is a step lighter than the ink section so it reads. Wider screens: no frame. */
.shot__screen { display: contents; }
@media (max-width: 640px) {
  .shot__media {
    align-self: center;
    width: min(64vw, 15rem);
    aspect-ratio: 9 / 19;
    min-height: 0; /* exactly 9:19, whatever loads inside */
    border-radius: 2.5rem;
    background: var(--night-rule);
  }
  .shot__screen { /* placed, not height: 100% (WebKit and aspect-ratio); clip-path because WebKit lets composited layers escape overflow */
    position: absolute;
    inset: .375rem;
    display: block;
    overflow: hidden;
    border-radius: 2.125rem;
    clip-path: inset(0 round 2.125rem);
    background: var(--white);
  }
  .shot__screen::before { /* the camera cut-out */
    content: "";
    position: absolute;
    top: .5rem;
    left: 50%;
    z-index: 2;
    width: 4rem;
    height: 1.125rem;
    margin-left: -2rem;
    border-radius: 1rem;
    background: var(--ink);
  }
  .shot__screen img { top: 2.125rem; height: calc(100% - 2.125rem); } /* below the status bar strip */
  .shot__text { justify-items: center; text-align: center; }
}
@media (min-width: 900px) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Add-on: review requests (styles in thread.css) ---------- */
#reviews { padding-top: 0; }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { /* plus that turns into minus */
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
}
.faq details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat; }
.faq summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.faq details p { max-width: 36em; padding-bottom: var(--space-m); color: var(--graphite); }

/* ---------- Final call to action: the hero's structure, once more ---------- */
.cta__title {
  margin-bottom: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--display-size);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.004em;
}
.cta__small { display: block; margin-top: var(--space-xs); font-size: var(--small-size); }

/* ---------- Footer ---------- */
.site-footer {
  padding-block: var(--space-2xl) var(--space-xl);
  border-top: 1px solid var(--rule);
  font-size: var(--small-size);
}
.site-footer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-l);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rule);
}
.site-footer__line {
  max-width: 16em;
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 700;
  line-height: 1.3; /* a full sentence in the display face, over two lines: 1.3 (DESIGN.md) */
  letter-spacing: -.02em;
  text-wrap: balance;
}
@media (max-width: 640px) { .site-footer__cta .btn { width: 100%; } }
.site-footer__top {
  display: grid;
  gap: var(--space-l);
  align-items: start;
  margin-bottom: var(--space-2xl);
}
@media (min-width: 900px) { .site-footer__top { grid-template-columns: 1fr auto auto; gap: var(--space-2xl); } }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-l) var(--space-2xl); }
.site-footer__head { display: flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.site-footer__head a { text-decoration: none; }
.site-footer nav ul { display: grid; gap: 0; padding: 0; list-style: none; }
.site-footer nav a { display: flex; align-items: center; min-height: 2.75rem; text-underline-offset: .3em; }
.site-footer a:hover, .site-footer nav a[aria-current="page"] { text-decoration-thickness: 2px; }
.site-footer__legal { color: var(--graphite); }
.site-footer__contact a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-underline-offset: .3em; }

/* ---------- Intro panel: only exists on a first visit. Never blocks input. ---------- */
.intro-panel { display: none; }
.intro .intro-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start; /* anchored to the top: if the screen height settles after the first paint, the word stays put */
  padding: var(--space-xl) var(--gutter);
  background: var(--ink);
  color: var(--paper);
  pointer-events: none;
  animation: intro-failsafe .01s linear 1.6s forwards;
}
.intro-panel__word {
  /* LocalBooked: the logo (lime calendar, cyan pin) and the name. A fixed box in em: when the web font swaps in, the
     glyphs repaint but the box never moves (no layout shift). */
  display: flex;
  align-items: center;
  gap: .28em;
  height: 1.1em;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 10vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.intro-panel__word .brand__mark { width: .9em; height: auto; color: var(--lime); }
.intro-panel__word .brand__hole { fill: var(--ink); }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }

/* Underline waits for the script; if the script never runs, it appears anyway. */
.motion .mark__line { transform: translateX(-101%); animation: mark-failsafe .01s linear 4s forwards; }
.motion .mark__draw { transform: translateX(101%); animation: mark-failsafe .01s linear 4s forwards; }
@keyframes mark-failsafe { to { transform: none; } }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  .site-nav, .site-nav ul { gap: var(--space-s); }
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-xs); }
  .hero__actions .btn { width: 100%; }
  .terms { flex-direction: column; align-items: stretch; padding-top: var(--space-m); }
  .terms__actions { flex-direction: column; align-items: stretch; gap: var(--space-xs); }
  .text-link { align-self: center; }
}
/* Narrow phones: keep the header on one line without crowding the edge. */
@media (max-width: 440px) {
  .site-header { gap: var(--space-xs); }
  .site-nav { gap: .625rem; }
  .site-nav .btn { padding: 0 .625rem; font-size: .875rem; }
  .brand { gap: .4rem; }
}
/* The smallest phones (360 and below): a smaller logo, so Menu and the button still fit. */
@media (max-width: 370px) {
  .wrap.site-header { padding-left: 1rem; padding-right: 1rem; }
  .brand__name { font-size: 1.0625rem; }
  .brand__mark { width: 1.375rem; }
  .menu-toggle { padding: 0; }
}
@media (max-width: 340px) { .site-nav .btn { padding: 0 .5rem; font-size: .8125rem; } .site-nav { gap: .5rem; } }

/* ---------- Subpages ---------- */
.page-head { padding-block: clamp(3rem, 9vh, 6rem) var(--space-xl); }
.page-title {
  max-width: 13em;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.6rem + 5vw, 6rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.004em;
  text-wrap: balance;
}
@media (max-width: 640px) { .page-title { line-height: 1; } } /* two-line titles: no touching descenders */
.page-lead { max-width: 34em; margin-top: var(--space-m); color: var(--graphite); }
.page-body { padding-bottom: var(--section-pad); }

.prose { max-width: 34em; }
.prose h2 {
  margin: var(--space-xl) 0 var(--space-s);
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 700;
  line-height: 1;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-bottom: var(--space-s); }
.prose p { text-wrap: pretty; }
.prose ul { padding-left: 1.2em; }
.prose ol { padding-left: 1.4em; }
.prose ol li::marker { font-family: var(--font-display); font-weight: 700; }
.prose .prose__more { margin-top: var(--space-l); margin-bottom: 0; }
.prose li { margin-bottom: var(--space-xs); text-wrap: pretty; }
.prose li a { display: inline-block; padding-block: .6rem; }
.prose a { text-decoration-thickness: 1px; text-underline-offset: .25em; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose .terms { margin-top: var(--space-l); }
.prose .terms p { margin-bottom: 0; }

/* Terms, privacy and DPA: long legal text, built from TERMS.md, PRIVACY.md and DPA.md by tools/legal-pages.py.
   Links sit inside sentences here. Long addresses wrap instead of pushing the page sideways. */
.legal { overflow-wrap: break-word; }
.legal h2 { text-wrap: balance; } /* no heading ends on one word on a phone */
.legal li a { display: inline; padding-block: 0; }
.legal h3 { margin: var(--space-l) 0 var(--space-xs); font-size: var(--text-size); font-weight: 700; }
.legal-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.legal-table {
  width: 100%;
  margin: var(--space-s) 0 var(--space-m);
  border-collapse: collapse;
  font-size: var(--small-size);
  overflow-wrap: anywhere;
}
.legal-table th, .legal-table td {
  padding: .65rem 1rem .65rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.legal-table th:last-child, .legal-table td:last-child { padding-right: 0; }
.legal-table thead th { border-bottom-color: var(--ink); color: var(--graphite); font-weight: 600; }
.legal-table tbody th { width: 40%; font-weight: 600; }
.legal-table--wide tbody th { width: 30%; }
.legal-table--wide td:last-child { width: 22%; }
/* Phones: each row becomes a block, the first cell its heading and the rest underneath. The column headings are
   kept for screen readers only; in a table with more than two columns, each further cell shows its column name. */
@media (max-width: 640px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto; }
  .legal-table tbody th, .legal-table--wide td:last-child { width: auto; }
  .legal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .legal-table { border-top: 1px solid var(--ink); }
  .legal-table tr { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
  .legal-table th, .legal-table td { padding: 0; border: 0; }
  .legal-table tbody th { margin-bottom: .25rem; color: var(--ink); }
  .legal-table td + td { margin-top: .35rem; }
  .legal-table--wide td::before {
    content: attr(data-label) ": ";
    color: var(--graphite);
    font-weight: 600;
  }
}

/* About: a person card next to the text (above it on narrower screens) */
.about-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
@media (max-width: 899px) { .about-grid .person { order: -1; } }
.person {
  align-self: start;
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--white);
}
.person p { color: var(--graphite); text-wrap: pretty; }
.person p + p { margin-top: var(--space-s); }
.person .person__name {
  margin-bottom: var(--space-xs);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 700;
  line-height: 1;
}
.person a { color: var(--ink); font-weight: 600; text-underline-offset: .25em; }
.person a:hover { text-decoration-thickness: 2px; }

/* Book: the calendar */
.booking { display: grid; gap: var(--space-l); }
@media (min-width: 1000px) { .booking { grid-template-columns: minmax(0, 1fr) 18rem; } }
.booking__frame {
  min-height: 44rem;
  border-radius: var(--radius);
  background: var(--white);
  container-type: inline-size; /* for the width rule on the calendar below */
}
.booking__frame { overflow: hidden; }
.booking__frame iframe { display: block; width: 100%; height: 44rem; border: 0; }
/* GoHighLevel's calendar shows no times when it is between about 639 and 725px wide (seen 6 October 2026). In a
   field of that width the calendar is kept at 630px, where it works; the field stays white. */
@container (min-width: 631px) and (max-width: 735px) { .booking__frame iframe { width: 630px; } }
.booking__notes { display: grid; gap: var(--space-m); align-content: start; }
.note {
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  color: var(--graphite);
  font-size: var(--small-size);
}
.note strong { display: block; margin-bottom: .25rem; color: var(--ink); font-size: var(--text-size); }
.note a { color: var(--ink); text-underline-offset: .25em; }
/* Narrower screens: the "not loading?" note sits above the calendar, the rest below it. */
@media (max-width: 999px) {
  .booking__notes { display: contents; }
  .booking__notes .note { order: 1; }
  .booking__notes .booking__fallback { order: -1; padding-top: 0; border-top: 0; }
}

/* 404 */
.lost { padding-block: clamp(4rem, 14vh, 9rem) var(--section-pad); }
.lost__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m) var(--space-l); margin-top: var(--space-xl); }
@media (max-width: 640px) { .lost__actions .btn { width: 100%; } } /* phones: primary buttons full width */

/* Examples page */
/* Each example is its own section, the colours taking turns (concrete, green, white), as on the home page. */
.demo {
  display: grid;
  grid-template-areas: "head" "shots" "act" "body";
  gap: var(--space-l);
}
/* The devices open the example too: pointing at them lights up the button they share a target with. */
.demo:has(.demo__shots:hover) .demo__act .btn { background: var(--ink); color: var(--white); }
.section--lime .demo:has(.demo__shots:hover) .demo__act .btn { background: var(--white); color: var(--ink); }
.demo__head { grid-area: head; }
.demo__shots { grid-area: shots; }
.demo__act { grid-area: act; }
.demo__body { grid-area: body; }
.demo__name {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: 800;
  line-height: .95;
}
.demo__meta { margin-top: var(--space-s); color: var(--graphite); }
.demo__list { margin: 0 0 var(--space-l); }
.section--lime @media (min-width: 1000px) {
  .demo {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas: "head shots" "act shots" "body shots";
    grid-template-rows: auto auto 1fr;
    gap: 0 var(--space-2xl);
  }
  .demo__act { align-self: start; margin-top: var(--space-l); }
  .demo__list { margin-top: var(--space-l); }
}

/* ---------- Rebuild: examples, about, book, booked ---------- */
/* Examples: client sites, as screenshot-shaped slots (16:10) with a name line under each. Three in a row from 900px. */
.ph--shot { aspect-ratio: 16 / 10; }
.clients { display: grid; gap: var(--space-s); padding: 0; list-style: none; }
.client { display: grid; align-content: start; gap: var(--space-s); max-width: 34rem; padding: var(--space-m); border-radius: var(--radius); background: var(--white); }
@media (min-width: 900px) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } .client { max-width: none; } }

/* About: the photo slot at the top of the person card. ("How we work": four cards, see components.css.) */
/* The photo of Nikolaj: square, as shot (dark backdrop), at the card's width up to 14rem. */
.person__photo { display: block; width: min(100%, 14rem); height: auto; aspect-ratio: 1; margin-bottom: var(--space-m); border-radius: var(--radius); object-fit: cover; background: var(--ink); }
.person picture + .person__name { margin-top: 0; }

/* Book: the three steps under the lead, step 1 marked as where you are. */
.book-steps { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l); margin-top: var(--space-m); padding: 0; list-style: none; color: var(--graphite); font-size: var(--small-size); }
.book-steps__step { display: flex; align-items: center; gap: var(--space-xs); }
.book-steps__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
}
.book-steps__step[aria-current="step"] { color: var(--ink); font-weight: 600; }
.book-steps__step[aria-current="step"] .book-steps__num { border-color: var(--ink); background: var(--ink); color: var(--white); }

/* Booked: the video slot sits inside step 2. */