/* ==========================================================================
   Dactyl Websites — the home page on a wide screen (October 2026 redesign)

   Loaded from 820px only (index.html, media attribute), after site.css,
   home.css and asks-shared.css. It replaces desktop.css on this page.

   The same page as the phone, in the same materials, and above all in the
   phone's one big gesture: every part of the page is a SHEET that comes up
   over the one before it, rounded on its leading corners, while the one
   underneath sinks back. On a wide screen the sheets are the full width of
   the screen and the moves are as big as the screen allows:

     THE HERO        the pull-back (hero.js, wide). The film opens edge to
                     edge with the tapes on the notebook; the picture draws
                     back into a tall window on the right while the camera
                     pulls back from the pen to the designer, and uncovers
                     the copy down the left as it goes.
     BEFORE DECIDING the first sheet, up over the hero. The five photo cards
                     from the phone, side by side; pointed at, one opens
                     out and the others give way.
     THE QUESTIONS   five sheets that stack (desk.js, SHEETS), each with the
                     phone's picture, each laid out its own way. The third
                     is the dark one: it opens out to the screen's edges as
                     it comes up, and the page goes dark with it.
     THE LOCALS      an umber sheet over the last question. The cafe, the
                     painter and the florist start as the phone's stacked
                     picture and slide out into a row of three: the phone
                     first, then every other screen (desk.js, LOCALS).
     JOHN            a linen sheet over the locals: his photograph held on
                     the left while his words read themselves in on the
                     right (desk.js, JOHN), then the no lock-in deed.
     THE PRICE       an umber stage. The question alone, at full size; then
                     it steps up and aside and the price comes in beside it
                     (desk.js, PRICE). The packages come up over it on linen.
     CONTACT         the invitation held on the left beside the form.

   Colours, fonts, radii, buttons and curves are site.css's; nothing new is
   introduced. Contrast, measured where it is not site.css's own: ivory on
   umber 15.6:1; white 75% on umber 9.2:1; accent-lit-ink on umber 6.3:1;
   ink-2 on sand 8.4:1; accent-ink on sand 4.62:1, on linen 5.33:1.
   ========================================================================== */

:root {
  /* The page's side margin from here on: the gutter, or wider on a very
     wide screen so the content keeps to 92rem. */
  --edge: max(var(--gutter), calc((100vw - 92rem) / 2));
  /* Every sheet's leading corners. Larger than a card's (--r-xl), because a
     sheet is the width of the screen. */
  --sheet-r: 48px;
  --sheet-shadow: 0 -1px 0 rgba(40, 24, 8, .05), 0 -34px 64px -34px rgba(40, 24, 8, .42);
}

/* =================================================================== HEADER
   The tape on the left and the links on the right of the same 74rem frame
   the other pages use (site.css .nav__in), so DACTYL WEBSITES docks where
   it sits on Features, not in the screen's far corner. The hero's unit is
   laid out in that frame too, so the tape stands over the headline's first
   letter. Over anything dark (the opening photograph, the dark question,
   the locals, the price) the links go light (ui.js, nav: is-over-dark). */
.nav__links a { transition: color .35s var(--ease), text-shadow .35s var(--ease); }
.nav.is-over-dark .nav__links a { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 2px rgba(12, 9, 6, .45), 0 2px 16px rgba(12, 9, 6, .4); }
.nav.is-over-dark .nav__links a:hover { color: var(--paper); }
.nav.is-over-dark .nav__cta { background: var(--paper); color: var(--navy); }
.nav.is-over-dark .nav__cta::before { background: var(--sand); }

/* The tape's first-paint place on the opening photograph, before hero.js
   takes it over. Where that is comes from the photograph itself (the head
   script in index.html, window.dactylTapes: --tape-x, --tape-y, --tape-k),
   so it lands on the same spot of the notebook at every width, and hero.js
   starts from exactly there. */
html.hero-wait .brand__tape {
  transform: translate(var(--tape-x, 1.5vw), var(--tape-y, calc(29svh - 15px))) scale(var(--tape-k, 2.6));
  transform-origin: 0 0;
}

/* ===================================================================== HERO
   One screen, pinned while it plays (hero.js, wide). The copy and the film
   are one unit: the headline, a fixed gap, then the film in a tall window,
   the footage's own 716:1284. The headline decides how wide the copy is,
   not the screen, so "Thinking about" always ends the same short distance
   from the picture, and whatever width is left over goes outside the unit,
   never into the middle of it. The unit is centred in the header's frame:
   when it fills the frame its left edge is the tape's and its right edge
   the button's.

   The opening is the photograph edge to edge with the tapes on the
   notebook. On the scroll the camera pulls back: the picture draws back
   into its window and the copy, which was under it all along, comes up as
   the picture clears it. The picture is the one thing that moves, and it
   moves only with transforms and a clip (hero.js), so nothing on the page
   is laid out again or repainted while it does.

     --frame   the header's frame: the screen less its gutters, to 74rem
               (cqw is the hero's own width, so the scrollbar is left out)
     --win-*   the window: from just under the header to near the foot of
               the screen, never wider than 38% of the frame (42% on an
               upright screen), centred in that height
     --gap     between the end of "Thinking about" and the window
     --h1-size as large as "Thinking about" (6.32em wide) can be in the
               room beside the window, and no taller than the screen allows
     --col     the copy's width: the headline's, plus a hair
     --x0      the unit's left edge, centring it

   The resting layout is written here: with no script, or reduced motion,
   this is simply the hero. */
.hero {
  container-type: inline-size;
  --frame: min(100cqw - 2 * var(--gutter), 74rem);
  --win-top: calc(var(--nav-h) + .25rem);
  --win-room: calc(100svh - var(--win-top) - clamp(1.5rem, 4svh, 2.75rem));
  --win-share: .38;
  --win-h: min(var(--win-room), calc(var(--frame) * var(--win-share) / .5576));
  --win-w: calc(var(--win-h) * .5576);
  --win-y: calc(var(--win-top) + (var(--win-room) - var(--win-h)) / 2);
  --win-gap: clamp(2.25rem, calc(var(--frame) * .065), 5rem);
  --h1-size: min(calc((var(--frame) - var(--win-w) - var(--win-gap)) / 6.45), 14.5svh, 9.5rem);
  --col: min(var(--frame) - var(--win-w) - var(--win-gap), var(--h1-size) * 6.45);
  --x0: calc((100cqw - var(--col) - var(--win-gap) - var(--win-w)) / 2);
  --win-x: calc(var(--x0) + var(--col) + var(--win-gap));
  position: relative;
  display: block;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--linen);
}
@media (max-aspect-ratio: 1/1) {
  .hero { --win-share: .42; }
}
/* The hero sinking back under the first sheet (hero.js: --sink). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--umber-deep);
  opacity: calc(var(--sink, 0) * .55);
  pointer-events: none;
  will-change: opacity;
}

/* The picture. .hero__media is the window: the whole hero, cut down to the
   window by its clip (hero.js moves the clip from the full screen to here).
   .hero__media-in is the photograph itself, laid out at its resting size
   in its resting place and scaled up from there to cover whatever the
   window is (hero.js: a transform), so the footage is never cropped to a
   new shape and never drawn again on the way. Above the copy, so the copy
   is uncovered as the picture draws back, never printed over it. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: auto;
  height: auto;
  clip-path: inset(var(--win-y) var(--x0) calc(100% - var(--win-y) - var(--win-h)) var(--win-x) round var(--r-xl));
  transform-origin: 50% 50%;
}
.hero__media-in {
  position: absolute;
  left: var(--win-x);
  top: var(--win-y);
  width: var(--win-w);
  height: var(--win-h);
  border-radius: 0;
  background: var(--umber);
  transform-origin: 50% 50%;
  will-change: transform;
}
/* Each its own layer, so scaling the photograph is the compositor's job:
   the stills are uploaded once at their own size, never re-drawn. */
.hero__photo-canvas,
.hero__sharp { will-change: transform; }
/* The linen fades site.css lays over the photograph's edges, and the old
   shade, belong to layouts with words on the picture. */
.hero__media-in::before,
.hero__media-in::after,
.hero__shade { display: none; }
.hero__photo-canvas,
.hero__photo-img { object-position: 50% 50%; }

/* A soft dark at the top of the opening photograph, under the header, so
   the links (light over the picture: ui.js) hold wherever the photograph
   is pale. It goes as the picture draws back (hero.js). */
.hero__media::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: calc(var(--nav-h) + 4.5rem);
  background: linear-gradient(to bottom, rgba(12, 9, 6, .34) 0%, rgba(12, 9, 6, .16) 48%, rgba(12, 9, 6, 0) 100%);
  opacity: var(--top-dark, 0);
  pointer-events: none;
}

/* The opening, until hero.js takes it over: the photograph the whole
   screen, square-cornered, its sharp still showing (the inline script in
   the markup fetches it first thing), and the copy not yet up. If the
   script never comes, the head's timer takes the class away and the hero
   is shown finished. */
html.hero-wait .hero__media { clip-path: none; --top-dark: 1; }
html.hero-wait .hero__media-in { left: 0; top: 0; width: 100%; height: 100%; }
html.hero-wait .hero__sharp--start { opacity: 1; visibility: visible; transition: none; }
html.hero-wait .hero__copy { opacity: 0; }

/* "Websites for local businesses", on tape, centred across the notebook
   just under the pen's nib on the opening frame: the same tape and letters
   as DACTYL WEBSITES above it, at 80% of its size, so the name leads
   (--tape-k is the brand tape's scale on the photograph, --tag-k this
   one's; window.dactylTapes places both).
   hero.js peels it off with the first scroll. Only on the opening: the
   finished hero says the same in its label. */
.hero__tagline {
  display: none;
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: var(--tag-y, 66%);
  text-align: center;
  pointer-events: none;
}
html.hero-wait .hero__tagline,
html[data-hero-pinned="on"] .hero__tagline { display: block; }
.hero__tagline .tape__strip {
  --tag-k: calc(var(--tape-k, 2.6) * .8);
  font-size: calc(var(--tag-k) * .912rem);
  letter-spacing: .26em;
  text-indent: .26em;
  white-space: nowrap;
  border-radius: calc(var(--tag-k) * 3px);
  /* The header tape's emboss and shadow, at the size it is drawn here. */
  text-shadow:
    calc(var(--tag-k) * -1px) calc(var(--tag-k) * -1px) 0 rgba(255, 255, 255, .30),
    calc(var(--tag-k) * 1px) calc(var(--tag-k) * 1px) calc(var(--tag-k) * 1.5px) rgba(0, 0, 0, .92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 calc(var(--tag-k) * 5px) calc(var(--tag-k) * 12px) rgba(20, 17, 13, .3),
    0 calc(var(--tag-k) * 1px) calc(var(--tag-k) * 3px) rgba(20, 17, 13, .3);
  transform: rotate(-.6deg);
}

/* The copy: the unit's left half, as tall as the window and centred on
   it. Under the picture until the picture draws back off it. */
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.hero .hero__in {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.hero .hero__copy {
  position: absolute;
  left: var(--x0);
  top: var(--win-y);
  width: var(--col);
  height: var(--win-h);
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: auto;
}
.hero__title { position: relative; }
/* The two-tone copy the old layout laid over the picture. */
.hero .hero__h1--over { display: none; }

.hero .hero__eyebrow {
  display: block;
  margin: 0 0 calc(var(--h1-size) * .3);
  letter-spacing: .1em;
  text-wrap: balance;
}
.hero .hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 1.5px;
  margin-right: .7rem;
  vertical-align: .3em;
  background: var(--accent);
}
.hero .hero__h1 {
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-size: var(--h1-size);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.036em;
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
}
.hero .hero__h1 .line { padding-bottom: .1em; margin-bottom: -.1em; }
/* The line under the headline ("Here are five questions..."), still part
   of the <h1>: its third line once hero.js has split it, the span itself
   when nothing has. A reading size, in the serif, so it belongs to the
   heading. */
.hero .hero__h1 .line:nth-child(3),
.hero .hero__h1 > .hero__h1-s {
  margin-top: calc(var(--h1-size) * .3);
  white-space: normal;
}
.hero .hero__h1 .hero__h1-s {
  display: block;
  max-width: 21em;
  margin: 0;
  font-size: clamp(1.25rem, calc(var(--h1-size) * .25), 1.85rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.014em;
  color: var(--ink);
  text-wrap: balance;
}
.hero .hero__h1 > .hero__h1-s { margin-top: calc(var(--h1-size) * .3); }
.hero .hero__lead {
  max-width: 34rem;
  margin: 1.3rem 0 0;
  font-size: clamp(.98rem, 1.05vw, 1.1rem);
  line-height: 1.62;
  color: var(--ink-2);
}
.hero .hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .6rem;
  margin-top: calc(var(--h1-size) * .32 + .6rem);
}

/* ================================================================ THE STACK
   The first sheet, up over the hero. hero.js pins the hero for a screen
   longer than its film (COVER); this sheet is pulled up by exactly that
   screen, so it rises over the held hero and has covered it the moment
   the hero lets go. Only while the hero is pinned: without the film there
   is nothing to rise over, and the margin would hide the hero. */
.stack--asks {
  position: relative;
  z-index: 5;
  background: var(--linen);
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  box-shadow: var(--sheet-shadow);
}
html[data-hero-pinned="on"] .stack--asks { margin-top: -100vh; margin-top: -100svh; }

/* ---------------------------------------------------------- Before deciding
   The heading large on the left, what it is for and the copy button on the
   right, both on one baseline. */
.asks { padding: clamp(7rem, 15svh, 10rem) 0 0; overflow-x: clip; }
.asks > .wrap:first-child {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(3rem, 6vw, 7rem);
  align-items: end;
  max-width: none;
  padding-inline: var(--edge);
}
.asks__pin { grid-row: 1 / 3; max-width: none; }
.asks .asks__pin .eyebrow { letter-spacing: .14em; }
.asks__h {
  max-width: 13em;
  margin: 0;
  font-size: clamp(3.4rem, 5.4vw, 6.3rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.034em;
}
.asks__lede { grid-column: 2; max-width: 30rem; }
.asks__lede p:not(.lead) { font-size: clamp(1.05rem, 1.15vw, 1.2rem); line-height: 1.6; }
.asks__copy { grid-column: 2; max-width: 30rem; margin-top: 1.7rem; }

/* ---------------------------------------------------------------- The deck
   The phone's five photo cards, side by side and as tall as the screen
   allows. Pointed at (or tabbed to), a card opens out to more than twice
   its share and the others give way; theirs dim and their questions go,
   so the one being looked at is the only thing being read. Each is a jump
   to its question. */
.asks > .wrap:nth-child(2) { max-width: none; padding-inline: var(--edge); }
.qindex { display: block; }
.qdeck { position: relative; margin: clamp(4rem, 9svh, 6.5rem) 0 clamp(7rem, 16svh, 11rem); }
.qdeck__pin { position: static; }
.qdeck__rail { display: none; }
.qdeck__track {
  display: flex;
  gap: .85rem;
  height: clamp(26rem, 66svh, 42rem);
}
.qcard {
  position: relative;
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  border-radius: 26px;
  background: var(--umber);
  color: var(--ivory);
  text-decoration: none;
  isolation: isolate;
  transition: flex-grow .9s var(--glide), transform .6s var(--glide);
}
main .qdeck a.qcard { color: var(--ivory); }
.qcard img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--glide), filter .8s var(--ease);
}
.qcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgba(9, 9, 9, .12) 30%, rgba(9, 9, 9, .86));
}
.qcard__n {
  position: absolute;
  top: 1.2rem;
  left: 1.4rem;
  font-family: var(--display);
  font-size: clamp(2.8rem, 3.6vw, 3.8rem);
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(9, 9, 9, .4);
}
.qcard__t {
  position: absolute;
  left: 1.4rem;
  bottom: 1.6rem;
  width: min(14.5rem, calc(100% - 2.8rem));
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.45vw, 1.55rem);
  line-height: 1.14;
  letter-spacing: -.012em;
  text-wrap: balance;
  transition: opacity .3s var(--ease) .12s;
}
.qcard__t small {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .45rem;
  margin-top: .7rem;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent-lit-ink);
}
.qcard__t small::after {
  content: "";
  width: .45rem;
  height: .45rem;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform .5s var(--glide);
}
/* One card pointed at (or focused): it opens, the rest give way. */
.qdeck__track:has(.qcard:hover, .qcard:focus-visible) .qcard { flex-grow: .72; }
.qdeck__track:has(.qcard:hover, .qcard:focus-visible) .qcard img { filter: saturate(.7) brightness(.72); }
.qdeck__track:has(.qcard:hover, .qcard:focus-visible) .qcard:not(:hover):not(:focus-visible) .qcard__t { opacity: 0; transition-delay: 0s; }
/* Written through the same :has() as the rule above, so it outranks it. */
.qdeck__track:has(.qcard:hover, .qcard:focus-visible) .qcard:is(:hover, :focus-visible) { flex-grow: 2.5; }
.qdeck__track:has(.qcard:hover, .qcard:focus-visible) .qcard:is(:hover, :focus-visible) img { transform: scale(1); filter: none; }
.qdeck__track .qcard:is(:hover, :focus-visible) .qcard__t small::after { transform: translateX(3px) rotate(45deg); }
.qcard:active { transform: scale(.985); }
.qcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ============================================================ THE QUESTIONS
   Five sheets, the full width of the screen, each at least a screen tall.
   Each is sticky: it holds while the next comes up over it, and the one
   underneath sinks back a little and darkens (desk.js, SHEETS, --sink). A
   sheet taller than the screen scrolls until its foot is showing and holds
   by its foot (desk.js sets --stick), so every word of it passes the eye
   before anything covers it.

   The list runs a screen past the last sheet (::after), so the last one
   holds too while the locals' sheet comes up over it. */
.asks > .wrap:last-child { max-width: none; padding: 0; }
.asks__list { display: block; gap: 0; margin: 0; padding: 0; list-style: none; }
.asks__list::after { content: ""; display: block; height: 100vh; height: 100svh; }

.ask {
  --sheet: var(--linen);
  --side: max(var(--gutter), calc((100% - 86rem) / 2));
  position: sticky;
  top: var(--stick, 0px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* The question, the answer, then the slack: a picture standing beside
     both puts its extra height in the empty third row, never between the
     question and its answer. */
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1.25rem, 2.2vw, 2.5rem);
  align-content: center;
  align-items: start;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(5.5rem, 12svh, 8.5rem) var(--side) clamp(4.5rem, 10svh, 7rem);
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  background: var(--sheet);
  box-shadow: var(--sheet-shadow);
  transform-origin: 50% calc(50svh - var(--stick, 0px));
  scroll-margin-top: 0;
}
.ask:nth-child(1) { z-index: 1; --sheet: var(--sand); }
.ask:nth-child(2) { z-index: 2; }
.ask:nth-child(3) { z-index: 3; }
.ask:nth-child(4) { z-index: 4; --sheet: var(--sand); }
.ask:nth-child(5) { z-index: 5; }
/* The dark that falls over a sheet as the next comes up over it. Its own
   layer, so only its opacity changes and the sheet under it is never drawn
   again. */
.ask::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--umber-deep);
  opacity: calc(var(--sink, 0) * .5);
  pointer-events: none;
  will-change: opacity;
}
/* With a mouse or trackpad the sheet underneath also sinks back (desk.js,
   sinkUnder: a scale): drawn once, then scaled by the compositor. A touch
   screen keeps its sheets still. */
@media (hover: hover), (pointer: fine) {
  .ask,
  .locals__pin,
  .pricing[data-phone-card] .price-stage { will-change: transform; }
}
.ask__head { position: static; }

/* The opener, as on the phone: the number large in the serif, and beside
   it, on a rule, "Question 2 of 5". */
.ask .ask__n {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  column-gap: 1.1rem;
  margin: 0 0 2.2rem;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.ask .ask__n-big {
  display: block;
  font-family: var(--display);
  font-size: clamp(5.5rem, 8.4vw, 9rem);
  font-weight: 300;
  font-style: normal;
  line-height: .74;
  letter-spacing: -.05em;
  text-transform: none;
  color: var(--accent);                   /* a large mark: 3.64 on sand */
  font-variant-numeric: lining-nums;
}
.ask__n-k { display: block; padding-bottom: .75rem; border-bottom: 1px solid var(--hair-2); }
.ask .ask__n-of { display: inline; color: var(--ink-3); }
.ask__q {
  font-size: clamp(2.3rem, 3.35vw, 3.8rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.028em;
  text-wrap: balance;
}

/* Our answer: marked as ours with a short terracotta rule and a label,
   the headline a size under the question, what it comes with as pills,
   then the detail. */
.ask__a.panel {
  display: flex;
  flex-direction: column;
  margin: clamp(2.5rem, 5svh, 3.5rem) 0 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.ask__a.panel::before {
  content: "Our answer";
  order: 0;
  margin: 0 0 .9rem;
  padding-left: 2.1rem;
  background: linear-gradient(var(--accent), var(--accent)) 0 50% / 1.45rem 1.5px no-repeat;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.ask .ask__ans {
  order: 1;
  max-width: 24em;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(1.55rem, 1.95vw, 2.1rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.022em;
  color: var(--ink);
}
.ask__a > .ask__tag,
.ask__a > .ask__tags { order: 2; }
.ask__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.ask .ask__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: .55rem;
  margin: 1.2rem 0 0;
  padding: .55rem .95rem .55rem .65rem;
  border: 0;
  border-radius: 14px;
  background: var(--sand);
  font-family: var(--sans);
  font-size: .9rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-2);
}
.ask .ask__tags .ask__tag,
.ask .ask__tags .ask__tag + .ask__tag { margin: 0; padding-top: .55rem; }
.ask:nth-child(1) .ask__tag,
.ask:nth-child(4) .ask__tag { background: var(--linen); }
.ask .ask__tag .ask__tick { width: 1.2rem; height: 1.2rem; margin-top: 0; }
.ask__a > .ask__body { order: 3; margin-top: 1.9rem; }
.ask__body { gap: 1.35rem; max-width: 40rem; }
.ask__body p { font-size: 1.0625rem; line-height: 1.65; }
.ask__body a { color: var(--accent-ink); }
.ask__body .ticks { gap: .95rem; }

/* The pictures, at the size a wide screen gives them. They are the phone's
   (asks-shared.css), scaled up whole with zoom so every proportion inside
   them holds. */
.ask__vis { display: block; margin-top: 0; }
.ask[data-q1="grow"] .vis-phone,
.ask[data-q3="story"] .vis-form { display: none; }

/* --------------------------------------------------- 1  The phone, first
   Sand. The question and our answer down the left; the cobalt stage on the
   right, standing the height of both. */
.ask--phone .ask__head { grid-column: 1 / 8; grid-row: 1; }
.ask--phone .ask__a { grid-column: 1 / 7; grid-row: 2; }
.ask--phone .vis-grow { grid-column: 8 / 13; grid-row: 1 / 4; align-self: start; }
.vis-grow__stage { height: clamp(24rem, 60svh, 36rem); border-radius: 30px; }
.vis-grow__stat b { font-size: clamp(2.6rem, 3.4vw, 3.6rem); }
.vis-grow__stat span { font-size: 1rem; max-width: 12rem; }
.vis-grow .g--btn { font-size: 11px; }
.vis-grow__step { font-size: .86rem; }

/* --------------------------------------------------- 2  Getting found
   Linen. Mirrored: the search and its AI answer on the left, held there
   while the long answer is read on the right. The first's columns turned
   round (five for the picture, one left empty, six for the words), so the
   picture has the same air beside it as the first and fourth. */
.ask--search .vis-search {
  grid-column: 1 / 6;
  grid-row: 1 / 4;
  position: sticky;
  top: 16svh;
  zoom: 1.08;
}
.ask--search .ask__head { grid-column: 7 / 13; grid-row: 1; }
.ask--search .ask__a { grid-column: 7 / 13; grid-row: 2; }

/* --------------------------------------------------- 3  The Smart Form
   The dark one. The question runs the width of the sheet; under it the
   story of a form on the left and our answer on the right. It opens out
   to the screen's edges as it comes up (desk.js, SHEETS: --open). Measured
   on umber: ivory 15.6:1, white 75% 9.2:1, accent-lit-ink 6.3:1. */
.ask.ask--form {
  background: none;
  box-shadow: none;
  color: var(--ivory);
}
/* Its dark, on a layer of its own under the words: widened to the edges
   by a transform (desk.js: --open), which costs the compositor nothing. */
.ask.ask--form::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(110% 60% at 50% 0%, var(--umber-lamp) 0%, rgba(30, 30, 30, 0) 70%),
    linear-gradient(to bottom, var(--umber) 0%, var(--umber-deep) 100%);
  box-shadow: var(--sheet-shadow);
  transform: scaleX(var(--open, 1));
  will-change: transform;
  pointer-events: none;
}
.ask--form .ask__head { grid-column: 1 / 12; grid-row: 1; }
.ask--form .ask__q { max-width: 22em; font-size: clamp(2.5rem, 3.9vw, 4.4rem); }
.ask--form .vis-story { grid-column: 1 / 7; grid-row: 2; margin-top: clamp(2.5rem, 5svh, 3.5rem); zoom: 1.12; }
.ask--form .ask__a { grid-column: 8 / 13; grid-row: 2; }
.ask--form .ask__n { color: var(--accent-lit-ink); }
.ask--form .ask__n-big { color: var(--accent-lit); }
.ask--form .ask__n-k { border-bottom-color: rgba(255, 255, 255, .18); }
.ask--form .ask__n-of { color: var(--on-navy-2); }
.ask--form .ask__a.panel::before {
  color: var(--accent-lit-ink);
  background-image: linear-gradient(var(--accent-lit), var(--accent-lit));
}
.ask--form .ask__q,
.ask--form .ask__ans { color: var(--ivory); }
.ask--form .ask__body p { color: var(--on-navy); }
.ask--form .ask__body a { color: var(--accent-lit-ink); }
.ask--form .ask__tag { background: rgba(255, 255, 255, .08); color: var(--ivory); }
.ask--form .ask__tick { stroke: var(--accent-lit); }
.ask--form ::selection { background: rgba(255, 255, 255, .28); color: inherit; }

/* --------------------------------------------------- 4  How it's going
   Sand. The question across the top; under it our answer on the left and
   the month's figures on the right, held while the long list is read. */
.ask--pulse .ask__head { grid-column: 1 / 9; grid-row: 1; }
.ask--pulse .ask__a { grid-column: 1 / 7; grid-row: 2; }
.ask--pulse .vis-pulse {
  grid-column: 8 / 13;
  grid-row: 2;
  position: sticky;
  top: 18svh;
  margin-top: clamp(2.5rem, 5svh, 3.5rem);
  zoom: 1.18;
}
.ask--pulse .ask__body p,
.ask--pulse .ticks li { color: var(--ink-2); }

/* --------------------------------------------------- 5  Each month
   Linen. The month on the left, its calendar beside its three days; the
   question and our answer on the right, with one column left empty
   between them, as in the second. */
.ask--month .vis-month {
  grid-column: 1 / 6;
  grid-row: 1 / 4;
  position: sticky;
  top: 14svh;
  zoom: 1.04;
}
.ask--month .ask__head { grid-column: 7 / 13; grid-row: 1; }
.ask--month .ask__a { grid-column: 7 / 13; grid-row: 2; }

/* ================================================================ THE LOCALS
   An umber sheet, up over the last question (the list runs a screen past
   it for this). It holds the screen (sticky) for two more while the three
   businesses slide out of the phone's stacked picture into a row of
   three, and then "Built for the locals." comes up under them (desk.js,
   LOCALS, which draws the three panes and centres the row and the words
   under it on the screen as one group). Then John's sheet comes up over
   it. The phone's photograph and film are the phone's: hidden here.

   The dark is painted on the held screen (.locals__pin), not on the tall
   section round it: the held layer is drawn once and only moved, where a
   section three screens tall had to be drawn afresh as it scrolled, which
   a touch screen's GPU could not keep up with (white streaks through the
   dark on an opened Fold). */
.locals {
  display: block;
  position: relative;
  z-index: 10;
  height: 320vh;
  height: 320svh;
  margin-top: -100vh;
  margin-top: -100svh;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  background: none;
}
.locals__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(85% 65% at 50% 34%, var(--umber-lamp) 0%, rgba(30, 30, 30, 0) 70%),
    var(--umber-deep);
  box-shadow: 0 -40px 80px -40px rgba(9, 9, 9, .55);
}
/* The dark that falls as the next sheet comes up over it (desk.js). Its
   own layer, so only its opacity changes: nothing under it is drawn
   again. */
.locals__pin::after,
.pricing[data-phone-card] .price-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--umber-deep);
  opacity: calc(var(--sink, 0) * .6);
  pointer-events: none;
  will-change: opacity;
}
/* With no script, the phone's photograph stands in for the three panes. */
.locals__photo {
  position: absolute;
  left: 50%;
  top: 9svh;
  height: 60svh;
  aspect-ratio: 941 / 1670;
  overflow: hidden;
  border-radius: 22px;
  transform: translateX(-50%);
}
.locals__photo img { width: 100%; height: 100%; object-fit: cover; }
.locals__photo .locals__film { display: none; }
.locals.has-panes .locals__photo { display: none; }
.locals__panes { position: absolute; inset: 0; }
/* Each pane is a clip (desk.js moves it) over its band of the picture,
   which is only ever scaled: no pane is laid out or drawn again while
   they move. */
.locals__pane {
  position: absolute;
  left: 0;
  top: 0;
}
.locals__pane canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: var(--umber);
  transform-origin: 0 0;
  will-change: transform;
}
.locals__copy {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  top: var(--copy-top, auto);
  bottom: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;                             /* .wrap's 100% would beat right */
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
html:not([data-locals-placed]) .locals__copy { top: auto; bottom: 9svh; }
.locals__h {
  margin: 0;
  font-size: clamp(4rem, 6.9vw, 8.6rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: var(--ivory);
}
.locals__h br { display: none; }
.locals__h em { font-style: italic; color: var(--accent-lit); }
.locals__p {
  max-width: 36rem;
  margin: 1.5rem 0 0;
  font-size: clamp(1.08rem, 1.25vw, 1.25rem);
  line-height: 1.6;
  color: var(--on-navy);
  text-wrap: balance;
}

/* ===================================================================== JOHN
   A linen sheet, up over the locals. His photograph held on the left (it
   opens out of an inset frame as it arrives, as on the phone); on the
   right "Say hi to John.", then the lead, which reads itself in word by
   word as it is scrolled (desk.js, JOHN), then the rest, then the deed on
   sand. */
.john {
  position: relative;
  z-index: 11;
  margin-top: -100vh;
  margin-top: -100svh;
  padding: clamp(7rem, 15svh, 10rem) 0 clamp(7rem, 14svh, 10rem);
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  background: var(--linen);
  box-shadow: var(--sheet-shadow);
}
.john .john__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
  max-width: none;
  padding-inline: var(--edge);
}
.john .john__photo {
  position: sticky;
  top: max(calc(var(--nav-h) + 1rem), calc((100svh - min(78svh, 46vw * 1.25)) / 2));
  width: 100%;
  max-width: none;
  max-height: 78svh;
  aspect-ratio: 4 / 5;
  margin: 0;
  justify-self: center;
  border-radius: var(--r-xl);
  background: var(--umber);
}
.john .john__photo img { transform-origin: 50% 32%; }
.john__mono { color: rgba(255, 255, 255, .06); }
.john .john__h {
  margin: 0 0 2.8rem;
  font-size: clamp(3.6rem, 6.4vw, 7.4rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.038em;
}
.john .john__h em:not(.dot) { color: var(--accent); }
.john .john__body { max-width: 36rem; gap: 1.4rem; }
.john .john__body .lead {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.35vw, 2.5rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.018em;
  color: var(--ink);
}
.john__body .lead .w { display: inline; }
.john .john__body p:not(.lead) { font-size: clamp(1.05rem, 1.15vw, 1.15rem); line-height: 1.65; }
/* No lock-in, on sand, with the deed: the website in its window and its
   key handed over on the terracotta tag (asks-shared.css). */
.john .john__own {
  position: relative;
  max-width: 38rem;
  margin-top: clamp(4rem, 9svh, 6rem);
  padding: 2.6rem 2.5rem 2.7rem;
  border-top: 0;
  border-radius: var(--r-xl);
  background: var(--sand);
  box-shadow: 0 2px 6px rgba(40, 24, 8, .06), 0 34px 60px -36px rgba(40, 24, 8, .38);
}
.john .john__own-h { margin: 0 0 .4rem; font-size: clamp(1.8rem, 2.3vw, 2.4rem); line-height: 1.1; color: var(--ink); }
.john__own-h::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-bottom: 1.4rem;
  border-radius: 2px;
  background: var(--accent);
}
.john .deed { display: block; margin: 2.2rem 0 2.2rem; }
.deed__page { min-height: 11rem; }
.john__own p { color: var(--ink-2); }

/* ================================================================ THE PRICE
   The umber stage, up over John as the next sheet. It holds (sticky) for
   two screens: the question at full size in the middle; then it steps up
   and to the left and the price comes in beside it (desk.js, PRICE);
   then the packages come up over it on linen, as the next sheet. The
   figure is set, never counted. */
.pricing[data-phone-card] { position: relative; z-index: 12; padding: 0; }
.pricing[data-phone-card] .price-run {
  position: relative;
  height: 300vh;
  height: 300svh;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  background: var(--umber-deep);
  box-shadow: 0 -40px 80px -40px rgba(9, 9, 9, .5);
}
/* The two columns are only as wide as what is in them, and the pair is
   centred on the stage, so it sits in the middle of any screen rather
   than filling from the left. */
.pricing[data-phone-card] .price-stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, max-content);
  justify-content: center;
  column-gap: clamp(4rem, 8vw, 10rem);
  align-content: center;
  align-items: start;
  height: 100vh;
  height: 100svh;
  margin: 0;
  padding: calc(var(--nav-h) + 1rem) var(--edge) 3rem;
  overflow: hidden;
  border-radius: inherit;
  color: var(--ivory);
}
.pricing[data-phone-card] .price-stage__bg {
  display: block;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 62% 50%, rgba(36, 36, 36, .9) 0%, rgba(30, 30, 30, 0) 100%),
    linear-gradient(to bottom, var(--umber) 0%, var(--umber-deep) 100%);
  pointer-events: none;
}
.pricing[data-phone-card] .price-stage .wrap { position: relative; z-index: 1; max-width: none; margin: 0; padding: 0; }
.pricing[data-phone-card] .price-stage__q { grid-column: 1; text-align: left; transform-origin: 0 0; }
.pricing[data-phone-card] .price-stage__q .display {
  font-size: clamp(3.2rem, 5vw, 5.8rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.036em;
  color: var(--ivory);
}
.pricing[data-phone-card] .price-stage__q .qm { display: inline-block; }
/* The question's words, each in its own window (desk.js). */
.pw__line { display: block; }
.pw { display: inline-block; overflow: hidden; padding: 0 .02em .12em; margin-bottom: -.12em; vertical-align: top; }
.pw > span { display: inline-block; }

/* The box and its wrappers step aside (contents) so their parts sit in
   the stage's own grid: the question with what websites usually cost
   under it on the left, the price and the line into the packages on the
   right. Each part is raised over the stage's light (position, z-index). */
.pricing[data-phone-card] .price-stage__box,
.pricing[data-phone-card] .price-stage__lift,
.pricing[data-phone-card] .price-stage__fit { display: contents; }
.pricing[data-phone-card] .price-stage__q { grid-row: 1; width: max-content; max-width: 100%; }
.pricing[data-phone-card] .price-stage__fit > * { position: relative; z-index: 1; }
.pricing[data-phone-card] .price.panel--dark {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.pricing[data-phone-card] .price__fig {
  font-size: clamp(6.5rem, 11.5vw, 13rem);
  font-weight: 400;
  line-height: .86;
  color: var(--ivory);
}
.pricing[data-phone-card] .price__cur { color: var(--accent-lit); }
.pricing[data-phone-card] .price__for {
  max-width: 20em;
  margin-top: 1.4rem;
  font-size: clamp(1.5rem, 2.1vw, 2.2rem);
  color: var(--ivory);
}
.pricing[data-phone-card] .price__rule { width: 5rem; margin: 2rem 0 1.6rem; }
.pricing[data-phone-card] .price__note { max-width: 36rem; font-size: 1.1rem; color: var(--on-navy); }
/* What it takes to start, set as a figure of its own, as on the phone:
   "$500" in the serif and the lit terracotta (a large mark, 3:1 needed),
   "upfront to get started" beside it, the rest of the sentence under. */
.pricing[data-phone-card] .price__start {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .15rem .8rem;
  margin-bottom: .8rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--ivory);
}
.pricing[data-phone-card] .price__start b {
  font-family: var(--display);
  font-size: clamp(3.4rem, 5vw, 5.4rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--accent-lit);
}
.pricing[data-phone-card] .price-stage__eyebrow.price__ctx {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: 25rem;
  margin: 2.4rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 1.02rem;
  text-align: left;
  color: var(--on-navy);
}
.pricing[data-phone-card] .price__ctx a { color: var(--accent-lit-ink); }
.pricing[data-phone-card] .price-stage__next {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 2.2rem;
  text-align: left;
}
.pricing[data-phone-card] .plans__h {
  margin: 0;
  font-size: clamp(1.6rem, 2.1vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ivory);
}
.pricing[data-phone-card] .price-stage__cue {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent-lit);
  animation: wheel-nudge 1.8s var(--ease) infinite;
}
.pricing[data-phone-card] .price-stage__cue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.price-run ::selection { background: rgba(255, 255, 255, .28); color: inherit; }

/* ------------------------------------------------------------ The packages
   A linen sheet, up over the held price stage (pulled up by a screen, the
   stage's last). The three packages as cards (below); --lane is Pro's
   pale gold. */
.pricing[data-phone-card] .plans {
  --lane: #f3e7cb;
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  margin-top: -100svh;
  padding: clamp(6rem, 13svh, 9rem) 0 clamp(5rem, 10svh, 7rem);
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  background: var(--linen);
  box-shadow: var(--sheet-shadow);
}
.plans .wrap { max-width: 84rem; }
/* The three packages, cut down: the pricing page's colours (Essential in
   sand, Pro in its gold head over a pale gold lane), a few lines each, the
   detail left to the pricing page. Replaces the phone's two-column table,
   and with Starter on show the "something simpler?" line goes too. */
.pricing[data-phone-card] .duo,
.duo__foot > .duo__simpler { display: none; }
.dplans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dplan {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.4rem;
  background: #ebe4d8;
}
.dplan--ess { background: #ddd5c6; }
.dplan--pro { background: var(--lane); }
.dplan__head { margin: 0; padding: 1.6rem 1.8rem 0; }
.dplan__head i {
  display: block;
  font-family: var(--mono);
  font-size: max(12px, .72rem);
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dplan__head b {
  display: block;
  margin-top: .2rem;
  font-family: var(--display);
  font-size: clamp(2rem, 2.6vw, 2.8rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
}
.dplan--pro .dplan__head {
  padding-bottom: 1.3rem;
  background:
    linear-gradient(115deg, rgba(255, 244, 205, 0) 30%, rgba(255, 250, 232, .5) 50%, rgba(255, 244, 205, 0) 70%),
    linear-gradient(160deg, #f6da8c 0%, #ebc166 40%, #dcab4f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .9);
}
.dplan--pro .dplan__head i { color: #3a2808; }
.dplan--pro .dplan__head b { color: #1a1103; }
.dplan:not(.dplan--pro) .dplan__head { padding-bottom: 1.3rem; }
.dplan__price {
  margin: 0;
  padding: 1.4rem 1.8rem 0;
  font-size: 1rem;
  color: var(--ink-2);
}
.dplan__price b {
  font-family: var(--display);
  font-size: clamp(2.2rem, 2.8vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--ink);
}
.dplan__lede {
  margin: 1.1rem 1.8rem 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(20, 17, 13, .1);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
}
.dplan .ticks { margin: .9rem 1.8rem 2rem; gap: .55rem; }
.dplan .ticks li { color: var(--ink-2); }
.dplan--pro .ticks li::before { border-color: #a0681a; }
/* The monthly report leads each package that has one: it is what people
   ask about most, so it gets its name in ink and one line of what is in it. */
.dplan .ticks .ticks__key { font-weight: 500; color: var(--ink); }
.dplan .ticks__key small {
  display: block;
  margin-top: .15rem;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-2);
}
.duo__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 3rem;
  align-items: center;
  max-width: none;
  margin-top: 2.4rem;
}
.duo__foot > p { grid-column: 1; max-width: 38rem; margin: 0; }
.duo__foot > div { grid-column: 2; }
.duo__foot .btn { margin-top: 0; }

/* ================================================================== CONTACT
   The invitation held on the left while the form on the right is filled
   in. */
.contact {
  position: relative;
  z-index: 13;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  column-gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  padding: clamp(7rem, 14svh, 10rem) var(--edge);
  background: var(--linen);
}
.contact > .wrap { max-width: none; margin: 0; padding: 0; }
.contact__head { position: sticky; top: calc(var(--nav-h) + 3rem); text-align: left; }
.contact .contact__h { margin: 0; font-size: clamp(3.4rem, 5.2vw, 6rem); line-height: .96; letter-spacing: -.036em; }
.contact .contact__lead { margin-inline: 0; max-width: 30rem; }
.contact .contact__head .contact__direct { margin-inline: 0; }
.contact .finder { max-width: none; margin: 0; }

/* ============================================================= BROWSER BITS */
::selection { background: rgba(194, 82, 31, .22); color: var(--ink); }
html { scrollbar-color: rgba(20, 17, 13, .28) var(--linen); }

/* ========================================================= A SMALLER LAPTOP
   Up to 1099px: the copy's column beside the window gets narrow, so the
   lead loses a little size. */
@media (max-width: 1099px) {
  .hero .hero__lead { font-size: .95rem; }
  .asks > .wrap:first-child { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .asks__pin, .asks__lede, .asks__copy { grid-column: 1; grid-row: auto; }
  .ask--phone .ask__head, .ask--phone .ask__a { grid-column: 1 / 8; }
  .ask--search .vis-search { zoom: 1; }
  .ask--pulse .vis-pulse { zoom: 1; }
  .ask--month .vis-month { zoom: .94; }
  .john .john__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* A short screen (a laptop at 700-odd pixels tall): the pinned screens
   have to fit whole. */
@media (max-height: 760px) {
  .hero .hero__h1 .hero__h1-s { font-size: clamp(1.15rem, 1.5vw, 1.5rem); }
  .hero .hero__lead { margin-top: 1rem; line-height: 1.5; }
  .pricing[data-phone-card] .price__fig { font-size: clamp(5.5rem, 17svh, 9rem); }
  .pricing[data-phone-card] .price__rule { margin: 1.4rem 0 1.1rem; }
  .pricing[data-phone-card] .price__start b { font-size: clamp(2.8rem, 8svh, 4rem); }
  .pricing[data-phone-card] .price-stage__eyebrow.price__ctx { margin-top: 1.4rem; padding-top: 1rem; }
  .pricing[data-phone-card] .price-stage__next { margin-top: 1.4rem; }
}

/* ============================================================ REDUCED MOTION
   Nothing holds the screen and nothing sinks: the sheets are laid one after
   another, each still on its own surface with its rounded leading edge. */
@media (prefers-reduced-motion: reduce) {
  .ask { position: relative; top: 0; }
  .asks__list::after { display: none; }
  .locals { height: auto; margin-top: 0; }
  .locals__pin { position: relative; height: auto; min-height: 100svh; }
  .john { margin-top: 0; }
  .pricing[data-phone-card] .price-run { height: auto; }
  .pricing[data-phone-card] .price-stage { position: relative; height: auto; min-height: 100svh; }
  .pricing[data-phone-card] .plans { margin-top: 0; }
  .qcard, .qcard img, .qcard__t { transition: none; }
  .pricing[data-phone-card] .price-stage__cue { animation: none; }
}