/* ─────────────────────────────────────────────────────────────────────────────
   Twoly — trytwoly.com

   One stylesheet, no framework, no build step. The palette and type scale are
   lifted verbatim from app/src/theme/tokens.ts, so the site and the app are the
   same object seen from two angles. If you change a token in the app, change it
   here too — a near-match is worse than no match, because the eye reads it as
   sloppiness rather than as a different brand.

   The visual language, in four rules:
     1. Warm paper, never white. Nothing on this site is #FFFFFF.
     2. Ink outlines with a wobble — asymmetric border-radius, so nothing looks
        laser-cut. Real risograph edges are never perfectly round.
     3. Hard offset shadows, no blur. A printed sticker sitting on paper, not a
        Material card floating in space.
     4. Exactly one confident colour doing the pointing (butter yellow). Blush
        and mint are seasoning. If everything is accented, nothing is.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Paper */
  --paper: #f8f5ec;
  --paper-raised: #fffdf6;
  --paper-sunk: #efeadc;
  --paper-edge: #e3dcc9;

  /* The one confident colour */
  --butter: #f8e098;
  --butter-deep: #f2ce5a;
  --butter-press: #e0b93f;
  --butter-wash: #fdf4d8;

  /* Ink */
  --ink: #3a2a18;
  --ink-soft: #6b5638;
  --ink-faint: #9c8a6e;
  --ink-ghost: #c4b69c;

  /* Seasoning */
  --blush: #f7c9ce;
  --blush-deep: #ee8a97;
  --blush-wash: #fdeef0;
  --mint: #b7e0c4;
  --mint-deep: #5fae7c;

  --display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Nunito', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* Wobble presets. Reused so the wobble is a system, not a per-element whim. */
  --wob: 22px 26px 20px 28px / 26px 20px 28px 22px;
  --wob-sm: 14px 17px 13px 16px / 16px 13px 17px 14px;
  --wob-pill: 999px 999px 998px 999px / 999px 998px 999px 999px;

  --line: 2.5px solid var(--ink);
  --drop: 5px 6px 0 var(--ink);
  --drop-sm: 3px 4px 0 var(--ink);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchored headings on the doc pages must clear the sticky bar. */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Grain ────────────────────────────────────────────────────────────────────
   The halftone. Two offset dot grids at low opacity, fixed to the viewport so
   the texture belongs to the paper rather than scrolling with the content —
   which is how risograph ink actually behaves. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(58, 42, 24, 0.11) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(238, 138, 151, 0.07) 1px, transparent 0);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 2px 3px;
}

body > *:not(.grain) {
  position: relative;
  z-index: 1;
}

/* ── Type ─────────────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

a {
  color: var(--ink);
  text-decoration-color: var(--butter-press);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--blush-deep);
}

strong {
  font-weight: 800;
}

code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--butter-wash);
  border: 1.5px solid var(--paper-edge);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ── Header bar ───────────────────────────────────────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 5vw, 48px);
  background: rgba(248, 245, 236, 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 2.5px solid var(--ink);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* Two overlapping dots — the logo is the product: two people, mostly one shape. */
.mark {
  position: relative;
  width: 26px;
  height: 16px;
  flex: none;
}

.mark::before,
.mark::after {
  content: '';
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
}

.mark::before {
  left: 0;
  background: var(--butter-deep);
}

.mark::after {
  right: 0;
  background: var(--blush);
}

.bar-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  font-size: 15px;
  font-weight: 700;
}

.bar-nav a,
.bar-link {
  text-decoration: none;
  color: var(--ink-soft);
}

.bar-nav a:hover,
.bar-link:hover {
  color: var(--ink);
}

.bar-link {
  font-weight: 700;
  font-size: 15px;
}

.bar-hide {
  display: none;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  padding: 14px 28px;
  border: var(--line);
  border-radius: var(--wob-pill);
  background: var(--butter-deep);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--drop);
  cursor: pointer;
  transition:
    transform 0.09s ease,
    box-shadow 0.09s ease;
}

.btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 7px 0 var(--ink);
}

/* Presses *into* the paper. A button that doesn't move isn't a button. */
.btn:active {
  transform: translate(4px, 5px);
  box-shadow: 1px 1px 0 var(--ink);
  background: var(--butter-press);
}

.btn-quiet {
  background: var(--paper-raised);
}

/* ── Store buttons — honest about not existing yet ───────────────────────────
   These are deliberately not links. Nothing to link to, and a store badge that
   404s is worse than one that says "soon". */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px 11px 16px;
  border: 2.5px dashed var(--ink-faint);
  border-radius: var(--wob-sm);
  background: var(--paper-sunk);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.25;
}

.store svg {
  flex: none;
  opacity: 0.75;
}

.store b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 40px);
}

section {
  padding: clamp(58px, 9vw, 104px) 0;
}

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}

.lede {
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 18px 0 0;
}

h2.section-h {
  font-size: clamp(28px, 4.4vw, 40px);
  max-width: 22ch;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(40px, 6vw, 74px);
  padding-bottom: clamp(46px, 7vw, 88px);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  background: var(--butter-wash);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--drop-sm);
}

.pill .blip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint-deep);
  box-shadow: 0 0 0 3px rgba(95, 174, 124, 0.28);
}

h1.hero-h {
  font-size: clamp(40px, 7.4vw, 74px);
  line-height: 1.02;
  margin: 22px 0 0;
  max-width: 15ch;
}

/* The one word that carries the whole positioning gets the highlighter. */
.mark-hi {
  background: linear-gradient(transparent 58%, var(--butter) 58%, var(--butter) 94%, transparent 94%);
  padding: 0 2px;
}

.hero p.lede {
  max-width: 42ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.hero-note {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 14px 0 0;
}

/* ── Phone mock ───────────────────────────────────────────────────────────── */

.phone-stage {
  display: flex;
  justify-content: center;
}

.phone {
  position: relative;
  width: 100%;
  max-width: 310px;
  aspect-ratio: 9 / 18.6;
  padding: 15px 13px;
  background: linear-gradient(168deg, var(--blush-wash), var(--butter-wash) 55%, var(--paper-sunk));
  border: 3px solid var(--ink);
  border-radius: 42px 44px 42px 44px / 46px 42px 46px 42px;
  box-shadow: 8px 10px 0 var(--ink);
  transform: rotate(-1.6deg);
}

.notch {
  width: 78px;
  height: 7px;
  margin: 2px auto 16px;
  background: var(--ink);
  border-radius: 999px;
  opacity: 0.82;
}

.hs-time {
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

/* The widget. This is the product, so it gets the strongest treatment on the
   page — raised paper, full ink outline, hardest shadow. */
.widget {
  background: var(--paper-raised);
  border: 2.5px solid var(--ink);
  border-radius: var(--wob);
  box-shadow: var(--drop);
  padding: 14px;
}

.widget + .widget {
  margin-top: 13px;
}

.w-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.face {
  width: 46px;
  height: 46px;
  flex: none;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--butter);
  display: grid;
  place-items: center;
}

.face.blushy {
  background: var(--blush);
}

.w-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.15;
}

.w-status {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.3;
}

.w-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 2px dotted var(--paper-edge);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint-deep);
  flex: none;
}

/* The counter widget — the screenshot people actually post. */
.widget-count {
  text-align: center;
  background: var(--butter);
}

.count-n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.count-l {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.card {
  background: var(--paper-raised);
  border: var(--line);
  border-radius: var(--wob);
  box-shadow: var(--drop);
  padding: 26px 24px 28px;
}

.card h3 {
  font-size: 21px;
  margin-bottom: 9px;
}

.card p {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  border-radius: var(--wob-sm);
  margin-bottom: 16px;
  font-size: 22px;
  background: var(--butter);
}

.card:nth-child(2) .card-icon {
  background: var(--blush);
}

.card:nth-child(3) .card-icon {
  background: var(--mint);
}

/* ── Steps ────────────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 42px;
  counter-reset: step;
}

.step {
  position: relative;
  background: var(--paper-raised);
  border: var(--line);
  border-radius: var(--wob);
  box-shadow: var(--drop);
  padding: 34px 22px 26px;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -20px;
  left: 20px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  background: var(--butter-deep);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--drop-sm);
}

.step h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.step p {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ── The "not this" band ──────────────────────────────────────────────────── */

.band {
  background: var(--paper-sunk);
  border-top: var(--line);
  border-bottom: var(--line);
}

.nots {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.not {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  background: var(--paper-raised);
  border: 2.5px solid var(--ink);
  border-radius: var(--wob-pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  box-shadow: var(--drop-sm);
}

.not s {
  text-decoration-thickness: 2.5px;
  text-decoration-color: var(--blush-deep);
}

/* ── Pricing ──────────────────────────────────────────────────────────────── */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.price {
  background: var(--paper-raised);
  border: var(--line);
  border-radius: var(--wob);
  box-shadow: var(--drop);
  padding: 26px 24px;
}

.price.hero-price {
  background: var(--butter-wash);
}

.price-tag {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 14px;
  background: var(--butter-deep);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.price-n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.price-per {
  font-size: 15px;
  color: var(--ink-faint);
  font-weight: 700;
}

.price ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.price li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 8px;
}

.price li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 800;
  color: var(--mint-deep);
}

.price-fine {
  font-size: 13.5px;
  color: var(--ink-faint);
  margin: 24px 0 0;
  max-width: 62ch;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq {
  margin-top: 38px;
  max-width: 760px;
}

details {
  background: var(--paper-raised);
  border: var(--line);
  border-radius: var(--wob-sm);
  box-shadow: var(--drop-sm);
  padding: 16px 20px;
  margin-bottom: 14px;
}

summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '+';
  font-size: 24px;
  line-height: 1;
  color: var(--ink-faint);
}

details[open] summary::after {
  content: '–';
}

details p {
  margin: 12px 0 2px;
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ── Closing CTA ──────────────────────────────────────────────────────────── */

.close-cta {
  text-align: center;
  background: var(--butter-wash);
  border-top: var(--line);
}

.close-cta h2 {
  font-size: clamp(30px, 5vw, 48px);
  margin: 0 auto;
  max-width: 20ch;
}

.close-cta .lede,
.close-cta .hero-note {
  margin-left: auto;
  margin-right: auto;
}

.close-cta .hero-cta,
.close-cta .stores {
  justify-content: center;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.foot {
  border-top: var(--line);
  background: var(--paper-sunk);
  padding: 42px clamp(18px, 5vw, 40px) 52px;
  text-align: center;
  font-size: 15px;
}

.foot p {
  margin: 0 0 8px;
}

.foot-brand {
  font-family: var(--display);
  font-size: 18px;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 22px 0 18px;
  font-weight: 700;
  font-size: 14.5px;
}

.foot-links a {
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}

.foot-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--butter-press);
}

.fine {
  font-size: 13px;
  color: var(--ink-faint);
  max-width: 60ch;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Document pages (generated by build.mjs)
   ───────────────────────────────────────────────────────────────────────────── */

.doc-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px clamp(18px, 5vw, 40px);
  border-bottom: 2px solid var(--paper-edge);
  background: var(--paper-sunk);
  scrollbar-width: none;
}

.doc-nav::-webkit-scrollbar {
  display: none;
}

.doc-nav a {
  flex: none;
  padding: 7px 15px;
  border: 2px solid var(--paper-edge);
  border-radius: var(--wob-pill);
  background: var(--paper-raised);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.doc-nav a:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.doc-nav a[aria-current='page'] {
  background: var(--butter-deep);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 2px 3px 0 var(--ink);
}

.doc-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 52px) clamp(18px, 5vw, 40px) 72px;
  align-items: start;
}

.toc {
  position: sticky;
  top: 110px;
  font-size: 14px;
}

.toc-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}

.toc a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2.5px solid var(--paper-edge);
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.35;
}

.toc a:hover {
  border-left-color: var(--butter-press);
  color: var(--ink);
}

.sheet {
  background: var(--paper-raised);
  border: var(--line);
  border-radius: var(--wob);
  box-shadow: var(--drop);
  padding: clamp(26px, 4.5vw, 52px);
  min-width: 0;
}

.sheet h1 {
  font-size: clamp(30px, 4.6vw, 44px);
  padding-bottom: 20px;
  border-bottom: 3px solid var(--butter-deep);
  margin-bottom: 8px;
}

.sheet h2 {
  font-size: clamp(22px, 3vw, 27px);
  margin-top: 46px;
  margin-bottom: 12px;
}

.sheet h3 {
  font-size: 19.5px;
  margin-top: 32px;
  margin-bottom: 10px;
}

.sheet h4 {
  font-size: 17px;
  margin-top: 26px;
  margin-bottom: 8px;
  color: var(--ink-soft);
}

.sheet p,
.sheet li {
  font-size: 16.5px;
  color: var(--ink-soft);
}

.sheet strong {
  color: var(--ink);
}

.sheet ul {
  padding-left: 22px;
}

.sheet li {
  margin-bottom: 9px;
}

.sheet li::marker {
  color: var(--butter-press);
}

.sheet hr {
  border: none;
  border-top: 2px dotted var(--paper-edge);
  margin: 38px 0;
}

.sheet blockquote {
  margin: 26px 0;
  padding: 18px 22px;
  background: var(--butter-wash);
  border-left: 5px solid var(--butter-deep);
  border-radius: 4px 14px 14px 4px;
  font-size: 16.5px;
}

.sheet blockquote :last-child {
  margin-bottom: 0;
}

.table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  border: 2.5px solid var(--ink);
  border-radius: var(--wob-sm);
  background: var(--paper);
}

.sheet table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15.5px;
}

.sheet th,
.sheet td {
  padding: 11px 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 2px solid var(--paper-edge);
}

.sheet th {
  background: var(--butter);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.sheet tbody tr:last-child td {
  border-bottom: none;
}

.sheet tbody tr:nth-child(even) {
  background: var(--paper-sunk);
}

/* An unfilled {{PLACEHOLDER}}. Loud on purpose — a policy that ships with one of
   these visible says the same thing to a regulator and a store reviewer. */
mark.todo {
  background: var(--blush-deep);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

mark.todo::before {
  content: '⚠ FILL IN: ';
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 940px) {
  .doc-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .toc {
    display: none;
  }
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .phone-stage {
    order: -1;
  }

  .phone {
    max-width: 268px;
  }

  h1.hero-h {
    max-width: none;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16.5px;
  }

  .bar-hide {
    display: none;
  }

  .bar {
    padding: 12px 18px;
  }

  .btn {
    width: 100%;
  }

  .store {
    flex: 1 1 100%;
  }
}

/* Wide screens get the nav back. */
@media (min-width: 700px) {
  .bar-hide {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
    animation: none !important;
  }
}