/* PizzaOS. The Max site.
   Kitchen Ledger is the brand (lib/shared/theme.dart). The rules of this sheet:
   the owner's voice is the largest thing on any page; tickets are the only boxes
   and they stay paper in dark mode; a heading is something a person says out
   loud; every claim wears its state; one motion, the ticket feeding out. There
   are no width breakpoints: layout comes from auto-fit grids, flex wrap and
   clamp(). */

@font-face { font-family: "Fraunces Soft"; font-weight: 900; font-display: swap;
  src: url(/site/assets/fonts/fraunces-soft-black.9278e5f160.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url(/site/assets/fonts/plex-sans-regular.19a0e1db5b.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url(/site/assets/fonts/plex-sans-semibold.8d0d58cb63.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap;
  src: url(/site/assets/fonts/jetbrains-mono-medium.5453f477a6.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 800; font-display: swap;
  src: url(/site/assets/fonts/jetbrains-mono-extrabold.4780c63b2b.woff2) format("woff2"); }

:root {
  color-scheme: light dark;

  --ink: #1c1917;
  --stone: #292524;
  --parchment: #faf8f4;
  --saffron: #e5a84b;
  --brick: #e3593f;
  --tomato: #b8432c;
  --basil: #3f6535;
  --paper: #fffdf8;

  --voice: "Fraunces Soft", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(1rem, 0.5rem + 2.6vw, 3.5rem);
  --gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --section: clamp(3.5rem, 2rem + 7vw, 8.5rem);

  --ground: var(--parchment);
  --text: var(--ink);
  --soft: #57534e;
  --rule: #d6d3d1;
  --hero: var(--saffron);
  --hero-text: var(--ink);
  --hero-soft: #3b322e;
  --accent: var(--tomato);
  --tint: #f7e8cc;
  --door: var(--ink);
  --door-text: var(--parchment);
  --wall: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: var(--ink);
    --text: var(--parchment);
    --soft: #d6d3d1;
    --rule: #44403c;
    --hero: var(--ink);
    --hero-text: var(--saffron);
    --hero-soft: #e7e5e4;
    --accent: var(--saffron);
    --tint: var(--stone);
    --door: var(--saffron);
    --door-text: var(--ink);
    --wall: var(--stone);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--sans);
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto; }
.split {
  display: grid;
  gap: var(--gap) calc(var(--gap) * 2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  align-items: start;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 10; background: var(--ink); color: var(--parchment); padding: 0.6rem 1rem; }
.skip:focus { top: 0.5rem; }

/* The voice: what people say. */
.voice {
  font: 900 clamp(2.55rem, 1.35rem + 5.3vw, 5.75rem)/0.98 var(--voice);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.voice--small { font-size: clamp(2.2rem, 1.3rem + 4vw, 4.5rem); }
.say {
  font: 900 clamp(2rem, 1.3rem + 3vw, 3.75rem)/1.04 var(--voice);
  letter-spacing: -0.01em;
  text-indent: -0.42em;
  padding-left: 0.42em;
  text-wrap: balance;
}
.title { font: 600 clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem)/1.2 var(--sans); margin-top: 0.75rem; }
.body { max-width: 62ch; margin-top: 0.75rem; }
.note { max-width: 62ch; color: var(--soft); font-size: 0.9375rem; }

/* The header sits on the hero's ground. */
.top { position: sticky; top: 0; z-index: 5; background: var(--hero); color: var(--hero-text); }
.top__bar { display: flex; align-items: center; gap: 1rem; padding-block: 0.6rem; }
.brand { font: 900 1.6rem/1 var(--voice); text-decoration: none; letter-spacing: -0.01em; }
.top__nav { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 1rem; font-weight: 600; font-size: 0.9375rem; }
.top__nav a:not(.door) { flex: none; text-decoration: none; white-space: nowrap; }
.top__nav a:not(.door):hover { text-decoration: underline; }
/* The links wrap to as many rows as they need, so a label is never truncated
   and the bar grows instead (#13058 ac-4: the nav read "Book a dem"). The bar
   stays one row while the links fit; when they don't, the wrapped row is
   shown, not hidden. */
.top__links { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 1rem; row-gap: 0.25rem; align-items: center; }

/* Doors. */
.door {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.6rem 1.15rem;
  border: 2px solid currentColor; border-radius: 0.35rem;
  background: transparent; color: inherit;
  font: 600 1rem/1.15 var(--sans); text-decoration: none; cursor: pointer;
}
.door:hover { background: var(--hero-text); color: var(--hero); border-color: var(--hero-text); }
.door--main { background: var(--door); color: var(--door-text); border-color: var(--door); }
.door--main:hover { background: var(--tomato); color: var(--parchment); border-color: var(--tomato); }
.door--small { min-height: 2.5rem; padding: 0.35rem 0.8rem; font-size: 0.9375rem; }
.doors { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.ask { display: flex; flex: 1 1 18rem; gap: 0.6rem; flex-wrap: wrap; }
.ask input[type="text"] {
  flex: 1 1 11rem; min-width: 0; min-height: 3rem; padding: 0.5rem 0.75rem;
  border: 2px solid currentColor; border-radius: 0.35rem;
  background: transparent; color: inherit; font: 400 1rem/1.2 var(--sans);
}
.ask input::placeholder { color: inherit; opacity: 0.72; }

/* State. Shape carries it as well as colour: filled, half, open. */
.state {
  display: inline-flex; align-items: center; gap: 0.42em;
  padding: 0.32em 0.62em 0.32em 0.5em; border-radius: 1em;
  font: 600 0.8125rem/1 var(--sans); white-space: nowrap;
}
.state i { width: 0.72em; height: 0.72em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.state--live { background: var(--basil); color: #fff; }
.state--live i { background: currentColor; }
.state--shipping { background: var(--saffron); color: var(--ink); }
.state--shipping i { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.state--coming { box-shadow: inset 0 0 0 1.5px currentColor; }

/* The hero. It takes its intrinsic height: every child (the voice, the ticket,
   the door row) is laid out in full, so nothing is cut at any width (#13058
   ac-4). The rotated "Heard." sticker is contained by the voice column, not by
   clipping the whole section. */
.hero { background: var(--hero); color: var(--hero-text); padding-block: clamp(1.5rem, 1rem + 2vw, 3.5rem) var(--section); }
.hero__voice { min-width: 0; }
.hero__grid { display: grid; gap: var(--gap) calc(var(--gap) * 1.5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr)); align-items: start; }
@media (min-height: 54rem) { .hero__voice { position: sticky; top: 5rem; } }
.heard {
  display: inline-block; margin-top: 1.25rem; padding: 0.04em 0.3em 0.12em;
  background: var(--tomato); color: var(--parchment);
  font: 900 clamp(2.1rem, 1.2rem + 3.8vw, 4.25rem)/1 var(--voice);
  transform: rotate(-2deg);
}
.heard--line { font-size: clamp(1.3rem, 1rem + 1.6vw, 2.25rem); line-height: 1.15; }
.lead { max-width: 54ch; margin-top: 1.25rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--hero-soft); }
.truth { max-width: 54ch; margin-top: 0.75rem; font-weight: 600; color: var(--hero-soft); }
.hero--short .voice { max-width: 18ch; }

/* The rail and the ticket. Paper is paper in both themes. */
.hero__ticket { position: relative; }
.rail {
  position: relative; z-index: 1; height: 0.95rem;
  margin-inline: calc(var(--gutter) * -1);
  background: linear-gradient(#d6d3d1, #a8a29e 40%, #78716c 70%, #57534e);
  box-shadow: 0 2px 3px rgb(28 25 23 / 0.35);
}
.ticket {
  position: relative; max-width: 33rem; margin: -0.2rem auto 0;
  padding: 1.5rem clamp(1rem, 0.7rem + 1.2vw, 1.6rem) 1.4rem;
  background: var(--paper); color: var(--ink);
  font: 500 0.9375rem/1.45 var(--mono);
  box-shadow: 0 14px 28px -14px rgb(28 25 23 / 0.5);
}
.ticket::after {
  content: ""; position: absolute; inset: 100% 0 auto; height: 0.6rem;
  background:
    linear-gradient(135deg, var(--paper) 50%, transparent 50%) 0 0 / 0.9rem 100%,
    linear-gradient(-135deg, var(--paper) 50%, transparent 50%) 0 0 / 0.9rem 100%;
}
.ticket__head { padding-bottom: 0.9rem; border-bottom: 2px dashed var(--ink); }
.ticket__head h2 { font: 800 1.35rem/1.2 var(--mono); }
.beat { display: grid; grid-template-columns: 2rem 1fr; padding-block: 1rem; border-bottom: 1px dashed #a8a29e; }
.beat__n { font: 800 1.35rem/1.1 var(--mono); transform: scaleY(1.45); transform-origin: top; }
.beat h3 { font: 800 1.0625rem/1.25 var(--mono); }
.line { margin-top: 0.35rem; }
.line b { font-weight: 800; }
.line--you { color: var(--tomato); }
.beat .state { margin-top: 0.6rem; }
.ticket__foot { padding-top: 1rem; font-weight: 800; }

@media (prefers-reduced-motion: no-preference) {
  .hero .heard { animation: stamp 0.3s steps(3) 0.45s both; }
  .ticket { animation: feed 1.6s steps(18) 0.7s both; }
  @keyframes stamp {
    from { opacity: 0; transform: rotate(-2deg) scale(1.4); }
    to { opacity: 1; transform: rotate(-2deg) scale(1); }
  }
  @keyframes feed {
    from { clip-path: inset(0 -2rem 100% -2rem); transform: translateY(-2rem); }
    to { clip-path: inset(0 -2rem -3rem -2rem); transform: none; }
  }
}

/* The owner's line. */
.talk { background: var(--tomato); color: var(--parchment); padding-block: var(--section); }
.talk__line {
  font: 900 clamp(3rem, 1.4rem + 8vw, 9.5rem)/0.95 var(--voice);
  letter-spacing: -0.02em; text-wrap: balance;
}
.talk__body { max-width: 56ch; margin-top: 1.5rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }

/* Sections on the plain ground. */
.today, .cap, .levels, .shop, .board, .compare, .every, .role, .sizes, .integrations, .help { padding-block: var(--section) 0; }
.today .say, .cap .say, .shop .say, .plans .say, .every .say { color: var(--accent); }
.close { margin-top: var(--section); }
.cap:last-of-type { padding-bottom: 0; }
.who { margin-top: 0.75rem; color: var(--soft); }
.reply { margin-top: 0.75rem; font: 900 clamp(1.3rem, 1.1rem + 1vw, 1.875rem)/1.15 var(--voice); }
.points { margin-top: 1rem; max-width: 62ch; }
.points li { padding-block: 0.35rem; }
.features { margin-top: 1.25rem; max-width: 46rem; }
.features li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.3rem 1rem; padding-block: 0.55rem; border-top: 1px solid var(--rule);
}

/* The headline capability gets a band and the voice at full size. */
.cap--lead { margin-top: var(--section); padding-block: var(--section); background: var(--wall); color: var(--parchment); --rule: #57534e; --soft: #d6d3d1; }
.cap--lead .say { color: var(--saffron); font-size: clamp(2.4rem, 1.35rem + 4.6vw, 5rem); }
.cap--lead .reply { color: var(--parchment); }
.cap--lead + .caps { margin-top: 0; padding-top: 0; }
.cap--lead .note { margin-top: 1rem; }

/* Screenshots. Real captures, or a slot that says it is empty. */
.shots { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.shop__shots { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; margin-top: var(--gap); }
.shot { flex: 1 1 26rem; min-width: 0; }
.shot--phone { flex: 0 1 15rem; }
.shot img, .shot__frame { width: 100%; border-radius: 0.5rem; border: 1px solid var(--rule); }
.shot--phone img, .shot--phone .shot__frame { border-radius: 1.4rem; }
.shot figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.3rem 0.75rem; margin-top: 0.5rem; font-weight: 600; font-size: 0.9375rem; }
.shot__frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  padding: 1rem; text-align: center; color: var(--soft); font-size: 0.875rem;
  border: 2px dashed var(--tomato);
  background: repeating-linear-gradient(-45deg, transparent 0 0.75rem, rgb(184 67 44 / 0.08) 0.75rem 1.5rem);
}
.shot__frame strong { color: var(--text); font-size: 1rem; }

/* The home page's list of what Max is. */
.caps { background: var(--wall); color: var(--parchment); padding-block: var(--section); }
.row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.5rem; border-top: 1px solid #57534e; }
.row:first-child { border-top: 0; padding-top: 0; }
.row a { flex: 1 1 22rem; text-decoration: none; }
.row__say { display: block; color: var(--saffron); font: 900 clamp(1.65rem, 1.2rem + 2.2vw, 3rem)/1.06 var(--voice); text-indent: -0.42em; padding-left: 0.42em; }
.row__title { display: block; margin-top: 0.4rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; }

/* Every level. */
.level-list { display: grid; gap: 1.5rem var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-top: var(--gap); }
.level-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.level__who { font-weight: 600; }
.level__say { font: 900 clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem)/1.15 var(--voice); text-indent: -0.42em; padding-left: 0.42em; }

/* The status board. */
.board { margin-top: var(--section); padding-block: var(--section); background: var(--tint); }
.board__cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: var(--gap); align-items: start; }
.board__col h3 { font-size: 1.125rem; }
.board__col h3 .state { font-size: 1rem; }
.board__col > p { margin-top: 0.5rem; color: var(--soft); }
.board__col ul { margin-top: 0.75rem; }
.board__col li { padding-block: 0.4rem; border-top: 1px solid var(--rule); }
.board__rest { margin-top: var(--gap); font: 600 1.25rem/1.2 var(--sans); }

/* The comparison. */
.compare h3 { margin-top: 1.5rem; font: 600 1.125rem/1.3 var(--sans); }
.compare .note { margin-top: 1.25rem; }
.sources { margin-top: 0.75rem; color: var(--soft); font-size: 0.9375rem; }
.sources li { padding-block: 0.2rem; }

/* Plans. */
.plans { margin-top: var(--section); padding-block: var(--section); background: var(--tint); }
.plan-list { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: var(--gap); }
.plan { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-top: 0.9rem; border-top: 3px solid var(--text); }
.plan h3 { font: 900 clamp(1.8rem, 1.5rem + 1vw, 2.5rem)/1 var(--voice); }
.plan__price { font-weight: 600; font-size: 1.125rem; }
.plan p:not(.plan__price) { flex: 1; }
.plans .note { margin-top: 0.75rem; }

/* The way out is a way in. */
.close { background: var(--hero); color: var(--hero-text); padding-block: var(--section); }
.plans + .close { margin-top: 0; }
.close__doors { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: var(--gap); }
.close__doors p { margin-top: 0.5rem; color: var(--hero-soft); }
.close__doors .door { width: 100%; }
.close__doors li:last-child { grid-column: 1 / -1; max-width: 40rem; }
.close__doors .ask .door { width: auto; }

.foot { background: var(--wall); color: var(--parchment); padding-block: 2.5rem; }
.foot ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 1rem; }
.foot a { display: inline-block; padding-block: 0.3rem; }
.foot__built { margin-top: 1rem; color: #d6d3d1; font-size: 0.9375rem; }

/* A route Flutter renders: its first paint, until Flutter's first frame. */
.handoff { min-height: 100vh; background: var(--hero); color: var(--hero-text); }
.handoff main { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; padding-block: 2rem; }
.handoff .voice { margin-top: 2.5rem; }

/* Features with their line: the name leads, the line follows. */
.features--lines { max-width: 62rem; }
.features--lines li > span:not(.state) { flex: 1 1 24rem; min-width: 0; }
.features--lines b { font-weight: 600; }
.group { margin-top: 2rem; font: 600 1.0625rem/1.3 var(--sans); color: var(--accent); }
.role:last-of-type { padding-bottom: var(--section); }

/* By business size. */
.sizes__cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); align-items: start; }
.size h3 { font: 900 clamp(1.6rem, 1.3rem + 1vw, 2.25rem)/1.05 var(--voice); }
.size > p { margin-top: 0.5rem; color: var(--soft); }
.size .features li > span:not(.state) { flex-basis: 14rem; }

/* What it connects to. */
.partners li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; padding-block: 0.8rem; border-top: 1px solid var(--rule); max-width: 62rem; }
.partners li > span:nth-child(2) { flex: 1 1 22rem; min-width: 0; }
.partner { flex: 0 0 11rem; font-weight: 600; color: var(--accent); }
.partners b { font-weight: 600; }

/* Plans: volume prices and what the live plan includes. */
.plan__bands { color: var(--soft); font-size: 0.9375rem; }
.plan__includes { width: 100%; }
.plan__includes > p { font-weight: 600; }
.plan__includes .features { margin-top: 0.25rem; }
.plan__includes .features li { font-size: 0.9375rem; padding-block: 0.4rem; }

/* Help, from the screen guides. */
.help-apps { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.help-app ul { margin-top: 0.75rem; }
.help-app li { padding-block: 0.25rem; }
.help-app p { margin-top: 0.4rem; color: var(--soft); }
.help-toc { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 1.25rem; font-weight: 600; }
.guide { padding-block: 2.5rem; border-top: 1px solid var(--rule); max-width: 62rem; }
.guide:first-child { border-top: 0; padding-top: 0; }
.guide__area { color: var(--accent); font-weight: 600; font-size: 0.9375rem; }
.guide .title { margin-top: 0.25rem; }
.guide h3 { margin-top: 1.25rem; font: 600 1.0625rem/1.3 var(--sans); }
.guide h4 { margin-top: 1rem; font: 600 1rem/1.3 var(--sans); }
.guide .note { margin-top: 0.4rem; }
.guide dl { margin: 0.5rem 0 0; }
.guide dt { margin-top: 0.6rem; font-weight: 600; }
.guide dd { margin: 0.1rem 0 0; color: var(--soft); }
.guide ol { margin-top: 0.5rem; padding-left: 1.5rem; list-style: decimal; }
.guide ol li { padding-block: 0.2rem; }
.help + .close { margin-top: var(--section); }

/* The menu: every link on a narrow screen, where the bar has no room. */
.menu { position: relative; display: none; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid currentColor; border-radius: 0.35rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after { display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; content: ""; }
.menu summary span::before { position: absolute; top: -6px; }
.menu summary span::after { position: absolute; top: 6px; }
.menu[open] summary span { background: transparent; }
.menu[open] summary span::before { top: 0; transform: rotate(45deg); }
.menu[open] summary span::after { top: 0; transform: rotate(-45deg); }
.menu__panel { position: absolute; right: 0; top: calc(100% + 0.6rem); min-width: min(18rem, calc(100vw - 2 * var(--gutter))); display: grid; padding: 0.5rem; background: var(--paper); color: var(--ink); border-radius: 0.5rem; box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.25); }
.menu__panel a { padding: 0.8rem 0.9rem; border-radius: 0.35rem; font-size: 1.0625rem; }
.menu__panel a:hover { background: var(--tint); text-decoration: none; }
@media (max-width: 61.99rem) {
  .top__links { display: none; }
  .top__nav { justify-content: flex-end; }
  .menu { display: block; }
}
@media (max-width: 23rem) { .top__nav > .door--small { display: none; } }

/* What the product is, before the owner's sentence. */
.kicker { display: inline-block; margin-bottom: 1rem; padding: 0.35rem 0.7rem; border: 1.5px solid currentColor; border-radius: 2rem; font: 600 0.9375rem/1.3 var(--sans); }

/* The shop itself, under the hero. */
.core { padding-block: var(--section) 0; }
.core .say, .area .say, .kinds .say { color: var(--accent); }
.core { padding-bottom: var(--section); }
.core__tiles { margin-top: calc(var(--gap) * 1.2); display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.core__tiles li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 1.25rem; border: 1px solid var(--rule); border-radius: 0.6rem; background: var(--paper); color: var(--ink); }
.core__tiles a { text-decoration: none; flex: 1; }
.core__tiles h3 { font: 900 1.35rem/1.15 var(--voice); }
.core__tiles p { margin-top: 0.5rem; color: #57534e; }
.core__tiles a:hover h3 { text-decoration: underline; }

/* Features: the tally, the index, one band per part of the shop. */
.atlas { padding-block: calc(var(--gap) * 1.5) 0; }
.tally { display: grid; gap: 0.75rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.tally li { display: flex; align-items: flex-start; gap: 0.75rem; }
.tally li > span:not(.state) { color: var(--soft); }
.tally b { color: var(--text); font-size: 1.25rem; margin-right: 0.15rem; }
.atlas__index ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: calc(var(--gap) * 1.2); }
.atlas__index a { display: inline-flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.85rem; border: 1.5px solid var(--rule); border-radius: 2rem; text-decoration: none; font-weight: 600; }
.atlas__index a:hover { border-color: currentColor; }
.atlas__index li > span { display: none; }
.area { padding-block: var(--section) 0; }
.area + .area { margin-top: 0; }
.area__grid { display: grid; gap: var(--gap) calc(var(--gap) * 2); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; border-top: 2px solid var(--text); padding-top: 1.5rem; }
.area__grid--solo { grid-template-columns: minmax(0, 1fr); }
.area .title { font: 900 clamp(1.8rem, 1.3rem + 1.8vw, 3rem)/1.05 var(--voice); margin-top: 0; }
@media (max-width: 61.99rem) { .area__grid { grid-template-columns: minmax(0, 1fr); } }

/* Who it's for: one card per kind of shop. */
.kinds { padding-block: calc(var(--gap) * 1.5) 0; }
.kinds__grid { margin-top: calc(var(--gap) * 1.5); display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); align-items: start; }
.kind { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border: 1px solid var(--rule); border-radius: 0.6rem; background: var(--tint); }
.kind h2 { font: 900 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.1 var(--voice); }
.kind > p { margin-top: 0.6rem; color: var(--soft); }
.kind .features li > span:not(.state) { flex-basis: 100%; }
.kinds + .sizes { padding-top: var(--section); }
.hero--short { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }