/* ==========================================================================
   Dactyl Websites — the inner pages: features, pricing, contact.

   Loaded after site.css on those three pages only, which gives them
   everything the home page is made of (the palette, the two faces, the
   header, the menu, the buttons, the plan cards, the form, the footer);
   this is only what the pages add. Built for the phone first; from 820px
   the same column simply stands in the middle of the screen.

   Each page reads as a journey, not a stack of sections: one ROUTE runs
   down its left edge, a hairline that the reader's progress draws in
   terracotta (pages.js), with a STOP at each step of the page's own story,
   whose ring lights as the line reaches it:
     features   first impression, enquiries, being found, the edge, where
                customers are, after launch; then on to pricing.
     pricing    the build, after launch, as you need it.
     contact    reach out, tell us about the project, what happens next.

   The home page's rules hold: linen for the page, sand for what is cut
   out of it, umber for the dark, terracotta as a mark and never a fill
   behind words, gold only for Pro. Gambetta for headings, one word in its
   accent italic; Switzer for reading, at 17px on a 1.7 line; the mono for
   labels.
   ========================================================================== */

.pg { padding-top: calc(var(--nav-h, 64px) + 3rem); }
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .pg { padding-top: calc(var(--nav-h, 64px) + 4.75rem); }
}
.pg-wrap { width: 100%; max-width: 40rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------ The top */
.pg-hero { padding-bottom: 4rem; }
.pg-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.9rem, 13vw, 4.2rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.028em;
  color: var(--ink);
}
.pg-title em:not(.qm):not(.dot) { font-style: italic; color: var(--accent); padding-bottom: .06em; }
.pg-title .qm, .pg-title .dot { font-style: normal; color: var(--accent); }
.pg-lead {
  margin: 1.4rem 0 0;
  max-width: 30ch;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* A section heading inside a stop, a size down from the page's. */
.pg-h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 2.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--ink);
}
.pg-h em { font-style: italic; color: var(--accent); }
.pg-h .dot { color: var(--accent); }

/* ------------------------------------------------------------ The map
   Features only: the route ahead, at the top. The six light tiles on a
   line, each a way straight to its stop; they land one after another as
   the line draws across (pages.js). */
.pg-map {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 2.6rem 0 0;
  padding: 0;
  list-style: none;
}
.pg-map::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 50%;
  height: 1px;
  background: var(--accent);
  opacity: .5;
  transform: scaleX(var(--draw, 1));
  transform-origin: left;
}
.pg-map li { position: relative; }
.pg-map a {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  -webkit-tap-highlight-color: transparent;
}
.pg-map img {
  display: block;
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 6px 8px rgba(38, 28, 18, .16));
}
.pg-map a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------ The route */
.pg-route {
  --line-x: .95rem;                    /* the line, from the screen's left */
  --inset: 2.75rem;                    /* the content, from the screen's left */
  position: relative;
  padding: 0 var(--gutter) 0 var(--inset);
  max-width: calc(40rem + var(--inset));
  margin-inline: auto;
}
.pg-route::before,
.pg-route__line {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--line-x);
  width: 1px;
  z-index: 2;
  pointer-events: none;
}
.pg-route::before { background: var(--hair-2); }
.pg-route__line {
  background: var(--accent);
  transform: scaleY(var(--route, 1));
  transform-origin: top;
}

/* A stop: its ring on the line, level with its label (or its first line),
   empty until the line reaches it, then filled. */
.pg-stop { --stop-pad: 3.75rem; position: relative; padding-block: var(--stop-pad); }
.pg-stop__ring {
  position: absolute;
  top: calc(var(--stop-pad) + .2rem);
  left: calc(var(--line-x) - var(--inset) - 6px);
  z-index: 3;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--linen);
  box-shadow: inset 0 0 0 1.5px var(--hair-2);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.pg-stop.is-lit .pg-stop__ring {
  background: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 5px rgba(194, 82, 31, .14);
  transform: scale(1.08);
}
.pg-stop__label {
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: max(12px, .72rem);
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* A dark stop: umber from edge to edge of the screen, lit from above,
   with the route running straight through it. */
.pg-stop--dark { isolation: isolate; color: var(--paper); }
.pg-stop--dark::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--inset));
  z-index: -1;
  background: radial-gradient(120% 70% at 55% 16%, #1e1e1e 0%, #121212 55%, #090909 100%);
}
.pg-stop--dark .pg-stop__ring { background: #121212; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.pg-stop--dark .pg-stop__label { color: var(--on-navy-2); }
.pg-stop--dark .pg-h { color: var(--ivory); }

/* ============================================================= FEATURES */
.pg-ch__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}
.pg-ch__n {
  font-family: var(--display);
  font-style: italic;
  font-size: 4.6rem;
  line-height: .8;
  letter-spacing: -.02em;
  /* Lining figures: the serif's own old-style ones make "01" read as
     the letter O and a one. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: var(--accent);
}
.pg-ch__tile {
  width: 80px;
  height: 80px;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(38, 28, 18, .28));
  transform-origin: 50% 100%;
}
.pg-ch__h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 2.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--ink);
}
.pg-ch__kicker {
  margin: .9rem 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.pg-ch__body {
  margin: 1.4rem 0 0;
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pg-ch__tag {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1a1103;
  background:
    linear-gradient(115deg, rgba(255, 244, 205, 0) 30%, rgba(255, 250, 232, .7) 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, .85), 0 4px 12px -6px rgba(120, 92, 30, .5);
}
a.pg-ch__tag { text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
a.pg-ch__tag:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 250, 225, .85), 0 8px 18px -8px rgba(120, 92, 30, .6); }
a.pg-ch__tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pg-stop--dark .pg-ch__h { color: var(--ivory); }
.pg-ch__body + .pg-ch__body { margin-top: 1rem; }
.pg-stop--dark .pg-ch__body { color: var(--on-navy); }
.pg-stop--dark .pg-ch__n { color: var(--accent-lit); }
.pg-stop--dark .pg-ch__tile { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(255, 244, 220, .35)); }
/* The chapters' rings sit level with their numbers' tops. */
.pg-stop--ch { --stop-pad: 4.5rem; }
.pg-stop--ch .pg-stop__ring { top: calc(var(--stop-pad) + 1.2rem); }

/* The journey's end on the features page: on to the price. */
.pg-next {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 1.5rem;
  border-radius: var(--r-xl);
  background: var(--sand);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(40, 24, 8, .08), 0 34px 60px -34px rgba(40, 24, 8, .42);
  transition: transform .2s var(--ease);
}
.pg-next:active { transform: scale(.985); }
.pg-next b { font-family: var(--display); font-size: 1.7rem; font-weight: 400; letter-spacing: -.015em; }
.pg-next svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* =============================================================== PRICING */

/* The build price: the price screen's umber, and its lamp, which warms up
   as the panel arrives (pages.js, --lamp from 0 to 1). Everything on it
   measured against the lamp's brightest point, #1e1e1e: white 75% 8.6:1,
   --accent-lit 4.75:1. */
.pg-price {
  --lamp: 1;
  position: relative;
  overflow: hidden;
  padding: 2.4rem 1.5rem 2.5rem;
  border-radius: var(--r-xl);
  background: #0e0e0e;
  color: var(--paper);
  box-shadow: 0 30px 60px -30px rgba(20, 14, 8, .6);
}
.pg-price::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 70% at 40% 20%, #1e1e1e 0%, #121212 55%, #090909 100%);
  opacity: var(--lamp);
  pointer-events: none;
}
.pg-price > * { position: relative; }
.pg-price__fig {
  display: flex;
  align-items: flex-start;
  gap: .05em;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.4rem, 21vw, 6rem);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.035em;
  color: var(--ivory);
}
.pg-price__fig .cur { font-size: .3em; line-height: 1; margin-top: .34em; letter-spacing: 0; color: var(--accent-lit); }
.pg-price__rule { width: 4.5rem; height: 2px; margin: 1.5rem 0 1.2rem; border-radius: 2px; background: var(--accent-lit); transform-origin: left; }
.pg-price__note { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--on-navy); }
.pg-price__incl { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.pg-price__incl-h { margin: 0 0 1.1rem; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-navy-2); }
.pg-price .ticks li { color: var(--on-navy); }
.pg-price .ticks li::before { border-color: var(--accent-lit); }

/* The plans, each rising a step on the one before as they arrive
   (pages.js): sand, deeper sand, gold. All of each in view: a price page
   is for comparing, so nothing is hidden behind a swipe. */
.pg-plans { display: grid; gap: 1.5rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.pg-plans .plan { padding: 2rem 1.5rem 2.2rem; }
.pg-plans .plan .plan__n { display: none; }
.pg-plans .plan h4 { margin: 0; }

/* =============================================================== CONTACT */
.pg-promise { display: flex; gap: .6rem; align-items: baseline; margin: 1.3rem 0 0; font-family: var(--display); font-style: italic; font-size: 1.15rem; line-height: 1.45; color: var(--ink); }
.pg-promise svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translateY(2px); }

.pg-lines { display: grid; gap: 1rem; }
.pg-line {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: .95rem;
  min-height: 84px;
  padding: 1rem 1.15rem;
  border-radius: var(--r-xl);
  background: var(--sand);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(40, 24, 8, .07), 0 26px 48px -30px rgba(40, 24, 8, .4);
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease);
}
.pg-line:active { transform: scale(.985); }
.pg-line__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: radial-gradient(118% 88% at 50% 26%, #1d1d1d 0%, #121212 50%, #090909 100%);
}
.pg-line__ico svg { width: 21px; height: 21px; fill: none; stroke: var(--accent-lit); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pg-line small { display: block; margin-bottom: .2rem; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pg-line b { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; }
.pg-line > svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pg-where { margin: 2rem 0 0; }
.pg-where__r { margin: 0; font-weight: 600; color: var(--ink); }
.pg-where__s { margin: .3rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--ink-3); }

.pg-form .finder { margin: 0; }

/* What happens next: the home page's four steps, each a small stop of its
   own on the route, lighting in turn. */
.pg-steps { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.9rem; }
.pg-steps li {
  position: relative;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pg-steps li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: calc(var(--line-x) - var(--inset) - 4px);
  z-index: 3;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--linen);
  box-shadow: inset 0 0 0 1.5px var(--hair-2);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.pg-steps li.is-lit::before { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pg-steps b {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--accent-ink);
}

/* The end of every route. */
.pg-end { padding-bottom: 6rem; }

@media (prefers-reduced-motion: reduce) {
  .pg-stop__ring, .pg-steps li::before { transition: none; }
}

/* Without the script (or for reduced motion) the route is simply drawn
   and every stop lit: the journey is all in view. */
.pg-route:not(.is-live) .pg-stop .pg-stop__ring { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pg-route:not(.is-live) .pg-steps li::before { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Links inside running copy: ink with an accent underline, so they read as
   links without putting terracotta text on linen. */
.pg-ch__body a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.pg-ch__body a:hover { text-decoration-thickness: 2.5px; }
.pg-ch__body a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.pg-ch__body strong { color: var(--ink); font-weight: 600; }
.pg-stop--dark .pg-ch__body strong { color: var(--ivory); }

/* A photograph inside a chapter or the closing stop: a sand-backed frame
   with the site's radius and lift, so a picture reads as an object like the
   cards do. */
.pg-photo { margin: 2rem 0 0; overflow: hidden; border-radius: var(--r-xl); background: var(--sand); box-shadow: 0 2px 6px rgba(40, 24, 8, .08), 0 30px 50px -30px rgba(40, 24, 8, .42); }
.pg-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ==========================================================================
   Features, on a wide screen (foldable and tablet in desktop mode, laptop).
   The chapters run down the left; on the right a stage sticks and shows the
   feature being read at work (features.js). Over both, one header sticks:
   "Features", slid in from the right, with the icon menu beneath it, each
   icon named. The page's big title and lead go up and out as you scroll.
   On a phone none of this applies: .fx is a plain block, the stage is
   hidden and the menu is the map under the lead.
   ========================================================================== */
.pg-hero--fx { padding-bottom: clamp(2.5rem, 9vw, 3rem); }
.fx-head { padding: 2.6rem 0 4rem; }
.fx-title, .pg-map__l { display: none; }
.fx-side { display: none; }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .pg-hero--fx { padding-bottom: clamp(5rem, 9vh, 7.5rem); }
  .pg-hero--fx .pg-wrap { max-width: calc(var(--maxw) + 2 * var(--gutter)); }
  .pg-hero--fx .pg-title { font-size: clamp(3.6rem, 7vw, 6.4rem); }
  .pg-hero--fx .pg-lead { max-width: 34ch; font-size: 1.3rem; }

  .fx {
    /* The sticky header's real height (title + icon menu + padding,
       measured 13.8rem); the stage and the chapters' anchors sit under it. */
    --head-h: 14rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
    max-width: calc(var(--maxw) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  /* Sticks under the site's header, over the chapters as they pass. */
  .fx-head {
    grid-column: 1 / -1;
    position: sticky;
    top: var(--nav-h, 64px);
    z-index: 6;
    padding: 1.1rem 0 2.4rem;
    background: var(--linen);
  }
  .fx-head::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 2.4rem;
    background: linear-gradient(var(--linen), rgba(246, 243, 238, 0));
    pointer-events: none;
  }
  .fx-head__in { max-width: none; padding-inline: 0; }
  .fx-title {
    display: block;
    margin: 0 0 1rem;
    font-family: var(--display);
    font-size: clamp(2.4rem, 3.8vw, 3.4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ink);
  }
  .fx-head .pg-map { max-width: 40rem; margin: 0; }
  .fx-head .pg-map::before { left: 28px; right: 28px; top: 28px; }
  .fx-head .pg-map li { width: 56px; text-align: center; overflow: visible; }
  .fx-head .pg-map a { width: 56px; height: auto; border-radius: 14px; }
  .fx-head .pg-map img { width: 56px; height: 56px; margin: 0 auto; transition: transform .5s var(--glide); }
  .pg-map__l {
    display: block;
    width: 5.9rem;
    margin: .55rem 0 0 -1.19rem;
    text-align: center;
    font-family: var(--mono);
    font-size: max(12px, .72rem);
    letter-spacing: .04em;
    line-height: 1.25;
    color: var(--ink-3);
    transition: color .4s var(--ease);
  }
  .fx-head .pg-map a:hover .pg-map__l,
  .fx-head .pg-map a.is-here .pg-map__l { color: var(--ink); }
  .fx-head .pg-map a.is-here img { transform: translateY(-3px); }

  /* The chapters, in the left column. */
  .fx .pg-route { max-width: none; margin: 0; padding-right: 0; }
  .fx .pg-stop--ch { --stop-pad: 3rem; min-height: 58svh; scroll-margin-top: calc(var(--nav-h, 64px) + var(--head-h) + 1rem); }
  .fx .pg-stop--ch .pg-ch__tile { display: none; }
  .fx .pg-end { min-height: 40svh; }

  /* The stage, in the right column, under the header. */
  /* Clear of the header's fade (its ::after, 2.4rem) with room to spare:
     sitting inside it, the stage's top edge was washed out to linen. */
  .fx-side {
    display: block;
    position: sticky;
    top: calc(var(--nav-h, 64px) + var(--head-h) + 3rem);
    margin-top: 3rem;
    height: calc(100svh - var(--nav-h, 64px) - var(--head-h) - 4.5rem);
    max-height: 42rem;
    min-height: 22rem;
  }
  .fx-side .feat-stage { display: grid; position: relative; top: auto; height: 100%; max-height: none; }

  /* Beside the stage, the Pro chapters stay on the page's linen: the stage
     is what turns dark for them, so a second dark block would be one too
     many. */
  .fx .pg-stop--dark { color: var(--ink); }
  .fx .pg-stop--dark::before { display: none; }
  .fx .pg-stop--dark .pg-stop__ring { background: var(--linen); box-shadow: inset 0 0 0 1.5px var(--hair-2); }
  .fx .pg-stop--dark.is-lit .pg-stop__ring { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
  .fx .pg-stop--dark .pg-ch__h { color: var(--ink); }
  .fx .pg-stop--dark .pg-ch__body { color: var(--ink-2); }
  .fx .pg-stop--dark .pg-ch__n { color: var(--accent); }
  .fx-head .pg-map a { text-decoration: none; }
}
.pg { overflow-x: clip; }

/* Contact, on a wide screen: the form comes first and the phone and email
   under it, and the form's label says what it is. */
.lab-w { display: none; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .lab-m { display: none; }
  .lab-w { display: inline; }
  body[data-page="contact"] .pg-route { display: flex; flex-direction: column; }
  body[data-page="contact"] .pg-route > .pg-form { order: -2; }
  body[data-page="contact"] .pg-route > .pg-stop:not(.pg-form):not(.pg-end) { order: -1; }
  body[data-page="contact"] .pg-route > .pg-end { order: 1; }
}

/* The icon menu, wide: the one being read goes from the light tile to the
   dark one, as the phone's strip does on the home page, and lifts and swells
   on a spring; the others sit quiet. */
.pg-map__t { display: contents; }
.pg-map .pg-map__d { display: none; }   /* beats .pg-map img; the wide rule below wins back */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .fx-head::before {
    content: "";
    position: absolute;
    left: calc(50% - 50vw); right: calc(50% - 50vw);
    bottom: 100%;
    height: calc(var(--nav-h, 64px) + 1px);
    background: var(--linen);
    pointer-events: none;
  }
  .fx-head::after { left: calc(50% - 50vw); right: calc(50% - 50vw); }
  .fx-head .pg-map__t { position: relative; display: block; width: 56px; height: 56px; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
  .fx-head .pg-map img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; transform: none; filter: drop-shadow(0 6px 8px rgba(38, 28, 18, .16)); }
  .fx-head .pg-map__d { display: block; filter: drop-shadow(0 12px 14px rgba(38, 28, 18, .38)); }
  .fx-head .pg-map__lite { transition: opacity .32s var(--ease); }
  .fx-head .pg-map a.is-here .pg-map__lite { opacity: 0 !important; }
  .fx-head .pg-map a.is-here .pg-map__t { transform: scale(1.12); transform-origin: 50% 0; }
  .fx-head .pg-map a.is-here img { transform: none; }
}

/* ==========================================================================
   The orange CTA, on the inner pages: the home page's own, from desktop.css
   (the tab runs from the left wall to the content's right edge, the
   question across it at heading size, the answer on its last line) and the
   same slide out of the wall and back, from ui.js (desktop: tab; on a
   phone, ctaStage, exactly as on the home page).
   ========================================================================== */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  /* The question the page has been building to, as the closing statement it
     is: a terracotta tab out of the left wall that runs to the content's
     right edge, the question set across it at heading size on two balanced
     lines (the phone's breaks are for a phone's measure), and its one
     answer at the right, on the question's last line. The tab slides out as
     it comes up the screen and back into the wall as it goes; nothing inside
     it moves (ui.js, desktop: tab). */
  .cta { padding-block: 8rem 14rem; overflow-x: clip; }
  .cta__tab {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: clamp(2rem, 4vw, 4rem);
    margin-right: max(var(--gutter), calc((100% - var(--maxw)) / 2));
    padding-top: clamp(4rem, 6vw, 5.5rem);
    padding-bottom: clamp(4rem, 6vw, 5.5rem);
    padding-right: clamp(2.5rem, 4.5vw, 4.5rem);
    /* On its own GPU layer for good: the slide only moves a painted picture
       of the tab, gradient, shadows and all. */
    will-change: transform;
  }
  .cta__q {
    max-width: 17ch;
    margin: 0;
    font-size: clamp(3.2rem, 5.6vw, 5.8rem);
    line-height: 1;
    letter-spacing: -.034em;
    text-wrap: balance;
  }
  .cta__q br { display: none; }
  /* The answer sits on the question's last line. */
  .cta__tab > div { padding-bottom: .5rem; }
  .cta__btn { min-width: 14rem; }
  .cta__tab ::selection { background: rgba(255, 255, 255, .28); color: inherit; }
}

/* Features: the way on to Pricing, after the features block. On a wide
   screen there is room above it, so the sticky header and stage have gone
   before it arrives. */
.fx-next { padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem); }
/* The back / next links come after the CTA on every page, so the CTA is
   read first; the CTA's own deep foot (room for the tab's shadow) is the
   space between them. */
.cta + .fx-next { padding-top: 0; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .fx-next { padding-top: clamp(6rem, 14vh, 10rem); }
  .cta + .fx-next { padding-top: 0; }
  .fx-next .px-in { max-width: calc(var(--maxw) + 2 * var(--gutter)); }
}


/* ==========================================================================
   Features, on a phone: the home page's strip of feature icons (wheel.js)
   with the stage over it, the feature being read at work (features.js,
   demos from ui.js), and under it the feature's full text, read out of
   the chapters (which step aside once the strip takes over). The strip's
   look is the home page's, mirrored from site.css (where it is scoped to
   .features) so this page takes none of the home page's section rules.
   ========================================================================== */
.fx-mob { display: none; }
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .fx-mob { display: block; padding: .5rem 0 3rem; overflow-x: clip; }
  .fx-mob.features--wheel + .fx { display: none; }

  /* The stage: the desktop's dark stage, made for a phone. */
  .fx-mob__stage { padding: 0 var(--gutter); margin-bottom: 2.2rem; }
  .fx-mob .feat-stage {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1.02;
    border-radius: 1.6rem;
  }
  .fx-mob .feat-stage__title { top: 1.1rem; left: 1.2rem; right: 1.2rem; font-size: clamp(1.7rem, 7.6vw, 2.3rem); }
  .fx-mob .demo-deck { inset: calc(var(--title-h, 2.4rem) + 1.8rem) .9rem 1.1rem; }
  .fx-mob .feat-ribbon { transform-origin: top right; }

  /* The strip's look, as the home page's. */
  .fx-mob .wheel__tile { overflow: visible; box-shadow: none; }
  .fx-mob .wheel__tile::before {
    content: "";
    position: absolute;
    top: 2.83px;
    right: 1.13px;
    bottom: 2.83px;
    left: 1.13px;
    border-radius: 11.6px;
    box-shadow:
      0 12px 20px -6px rgba(38, 28, 18, .34),
      0 2px 5px rgba(38, 28, 18, .2);
  }
  .fx-mob .wheel__tile img { position: relative; }
  /* Only the icon at the top is the dark tile; the rest are the light set
     (tools/build-feature-icons.py) on a lighter shadow, so the one being
     read is the single strong shape here rather than one of six. The
     light picture sits over the dark one and fades as its icon reaches the
     top, so a drag darkens each in turn as it passes the middle. */
  .fx-mob .wheel__tile .wheel__lite {
    position: absolute;
    inset: 0;
    transition: opacity .32s var(--ease);
  }
  .fx-mob .wheel__item.is-top .wheel__lite { opacity: 0; }
  /* The lit icon's show is drawn over both pictures, and a show that is
     stopped leaves its last frame on its canvas: off with the light. */
  .fx-mob .wheel__alive { transition: opacity .25s var(--ease); }
  .fx-mob .wheel__item:not(.is-lit) .wheel__alive { opacity: 0; }
  .fx-mob .wheel__tile::before {
    transition: box-shadow .32s var(--ease);
  }
  .fx-mob .wheel__item:not(.is-top) .wheel__tile::before {
    box-shadow:
      0 8px 14px -6px rgba(38, 28, 18, .16),
      0 1px 3px rgba(38, 28, 18, .1);
  }
  .fx-mob .wheel__label { color: var(--ink-3); }
  .fx-mob .wheel__item.is-top .wheel__label { color: var(--ink); }
  .fx-mob .wheel__item:focus-visible .wheel__tile { outline-color: var(--ink); }

  /* The card. The same object as the three cards up the page (.slab__card):
     the same corners, lying on the linen on the same two warm shadows, and
     it tilts the way it is pulled when swiped (wheel.js, the card).
     Straight while it is being read. In two of the page's own materials,
     each with a job (wheel.js, tone): umber for the two Pro-package
     features, as the Pro plan is; sand for the rest. */
  .fx-mob .wheel__panel { touch-action: pan-y; }
  .fx-mob .wheel__page {
    padding: 1.4rem 1.45rem 1.25rem;
    background: var(--sand);
    box-shadow:
      0 2px 6px rgba(40, 24, 8, .08),
      0 34px 60px -34px rgba(40, 24, 8, .42);
    -webkit-mask-image: none;
    mask-image: none;
    z-index: 1;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
  }
  /* The next card, under this one: its foot shows below, a tone down.
     Not on the last card, where there is nothing left. */
  .fx-mob .wheel__panel::before {
    content: "";
    position: absolute;
    left: calc(var(--gutter) + 1rem);
    right: calc(var(--gutter) + 1rem);
    bottom: -.8rem;
    height: 4rem;
    border-radius: var(--r-xl);
    /* The colour of the card to come (wheel.js sets --peek). */
    background: var(--peek, var(--sand-2));
    box-shadow:
      0 1px 3px rgba(40, 24, 8, .08),
      0 14px 22px -14px rgba(40, 24, 8, .34);
    transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
  }
  .fx-mob .wheel__panel.is-end::before { opacity: 0; transform: translateY(-.5rem); }
  /* While a card is dragged the real card it would go to is underneath
     (wheel.js, the card), so the edge drawn for it at rest steps aside. */
  .fx-mob .wheel__panel.is-dragging::before { opacity: 0; transition: none; }
  /* Where the card is in the six: the section labels' mono. */
  .fx-mob .wheel__n {
    margin: 0 0 .8rem;
    font-family: var(--mono);
    font-size: max(12px, .78rem);
    letter-spacing: .12em;
    color: var(--ink-3);
  }
  .fx-mob .wheel__n b { font-weight: 400; color: var(--accent-ink); }
  /* The edge of the next card is part of the card: nothing shows until
     the card itself has faded up at the end of the intro (wheel.js,
     wheel--bare). Showing on its own, it was an empty rounded box sitting
     there before the icons had even arrived. */
  .fx-mob .wheel--bare .wheel__panel::before { opacity: 0; transform: translateY(-.5rem); }
  /* The icon being read stands a size up, from its foot. */
  .fx-mob .wheel__item.is-top .wheel__tile { scale: 1.3; }
  .fx-mob .wheel__title { color: var(--ink); }
  .fx-mob .wheel__kicker { color: var(--ink-3); }
  .fx-mob .wheel__body { color: var(--ink-2); }
  .fx-mob .wheel__more { color: var(--accent-ink); }
  .fx-mob .wheel__sash { box-shadow: 0 3px 8px rgba(60, 30, 10, .3); }

  /* Umber, the Pro plan's material (site.css, "The top plan"). Measured
     at #1d1d1d, its lightest point: white 75% 9.20:1, 62% 6.76:1,
     --accent-lit-ink 6.31:1. */
  .fx-mob .wheel__page--umber {
    background: radial-gradient(118% 88% at 50% 26%, #1d1d1d 0%, #121212 50%, #090909 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 2px 6px rgba(40, 24, 8, .12),
      0 34px 60px -34px rgba(40, 24, 8, .55);
  }
  .fx-mob .wheel__page--umber .wheel__title { color: var(--ivory); }
  .fx-mob .wheel__page--umber .wheel__body { color: var(--on-navy); }
  .fx-mob .wheel__page--umber :is(.wheel__kicker, .wheel__n) { color: var(--on-navy-2); }
  .fx-mob .wheel__page--umber :is(.wheel__n b, .wheel__more) { color: var(--accent-lit-ink); }

  /* Fit mode (wheel--fit): each page at its own height, the panel easing
     to it (wheel.js), rather than every page stretched to the tallest. */
  .fx-mob .wheel__page { bottom: auto; }
  /* The full text: links in it, and paragraphs one after another. */
  .fx-mob .wheel__body + .wheel__body { margin-top: .9rem; }
  .fx-mob .wheel__body a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
  .fx-mob .wheel__page--umber .wheel__body a { text-decoration-color: var(--accent-lit); }
}


/* ------------------------------------------------------------ Features: the lead (phones)
   No tiles: the lead is the moment. Set large in the serif, ink, and read
   in: every word starts faint and comes up to full strength as the scroll
   passes it (pages.js), so the line is read at the pace it is scrolled,
   under a short terracotta rule. Then the stage, the icons and the card,
   with even room above and below the icons and more inside the card. */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .pg-hero--fx { padding-bottom: clamp(3.5rem, 12vw, 4.5rem); }
  .fx-mob { padding: 2rem 0 clamp(5rem, 16vw, 6.5rem); }
  .fx-mob__stage { margin-bottom: 1.4rem; }
  .fx-mob .wheel { margin-top: 0; }
  .fx-mob .wheel__ring { padding: 34px 0 22px; }
  .fx-mob .wheel__panel { margin-top: 1.4rem; }
  .fx-mob .wheel__page { padding: 2.4rem 1.6rem 2.5rem; }
}