/* Vakana.mg
   ------------------------------------------------------------------
   Cappuccino: the app's own palette tokens, so the page and the
   screenshots sit in the same world. Charter for the text; the sans
   is for pills, version lines and the checksum.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat-400.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f5ead5;
  --surface: #ebe0c9;
  --ink: #2b1d14;
  --ink-mute: #6b513c;
  --ink-faint: #a89378;
  --primary: #8b5e3c;
  --on-primary: #fff8ec;
  --border: #d6c5a7;
  --border-strong: #bba47e;
  --shadow: 0 1px 0 rgba(0,0,0,.04), 0 12px 32px -16px rgba(43,29,20,.18);

  --serif: 'Charter', 'Bitstream Charter', 'Iowan Old Style', 'Sitka Text',
           Cambria, 'Palatino Linotype', Palatino, 'URW Palladio L', Georgia, serif;
  --hand:  'Caveat', 'Snell Roundhand', 'Apple Chancery', cursive;
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1310;
    --surface: #2a1f1a;
    --ink: #ebe0c9;
    --ink-mute: #a89378;
    --ink-faint: #6b513c;
    --primary: #c9a368;
    --on-primary: #1c1310;
    --border: #3d2e25;
    --border-strong: #5a4536;
    --shadow: 0 1px 0 rgba(0,0,0,.2), 0 16px 40px -16px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--serif);
  font-feature-settings: 'kern', 'liga', 'onum';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

code { font-family: var(--mono); }

a {
  color: var(--primary);
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}
a:hover { text-decoration-color: var(--primary); }

img { max-width: 100%; height: auto; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 2rem; }

/* ---- alternating blocks: text beside a screenshot -------------------- */
.block {
  display: grid; grid-template-columns: 1fr 300px;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
  padding: 4rem 0;
}
.block.flip { grid-template-columns: 300px 1fr; }
.block.wide { grid-template-columns: 1fr 460px; }
.block.wide-flip { grid-template-columns: 460px 1fr; }
.block + .block, .trio + .block, .block + .trio { border-top: 1px solid var(--border); }

.shot img {
  display: block; width: 100%;
  border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.shot.duo { display: flex; gap: 1.25rem; }
.shot.duo img { width: calc(50% - .625rem); }

/* a plain phone frame, for the hero shot only */
.frame {
  border: 10px solid #40332a; background: #40332a;
  border-radius: 38px; overflow: hidden; box-shadow: var(--shadow);
}
.frame img { border: 0; border-radius: 28px; box-shadow: none; }

.txt h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 500;
  letter-spacing: -0.015em; margin: 0 0 .7rem;
}
.txt p { margin: 0 0 .9rem; color: var(--ink-mute); max-width: 54ch; }
.txt p:last-child { margin-bottom: 0; }
.txt em { font-style: italic; }

@media (max-width: 860px) {
  .block, .block.flip, .block.wide, .block.wide-flip {
    grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0;
  }
  .block .txt { order: 1; }
  .block .shot { order: 2; max-width: 250px; margin: 0 auto; }
  .block .shot.duo { max-width: 100%; justify-content: center; }
  .block .shot.duo img { width: min(46%, 220px); }
}

/* ---- hero: the first block ------------------------------------------- */
.hero { padding-top: clamp(2.5rem, 7svh, 5rem); }
.hero .word { width: 190px; height: auto; margin-bottom: 1.6rem; display: block; }
.hero h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 500;
  line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1rem; max-width: 20ch;
}
.hero .sub { color: var(--ink-mute); max-width: 46ch; margin: 0 0 1.7rem; }

.pills { display: flex; gap: .6rem; flex-wrap: wrap; }
.pill, .btn {
  display: inline-block; text-decoration: none;
  font-family: var(--sans); font-size: .94rem; letter-spacing: .01em;
  padding: .58rem 1.5rem; border-radius: 999px;
  border: 1px solid var(--border-strong);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
/* .btn is what partials/download.hbs (regenerated by publish-apk.sh) emits;
   it renders as the solid pill. */
.pill.solid, .btn {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary);
}
.pill.solid:hover, .btn:hover {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
.pill.quiet { background: var(--surface); color: var(--ink-mute); }
.pill.quiet:hover { border-color: var(--primary); color: var(--primary); }
.pill svg { vertical-align: -1px; margin-left: .3rem; }

.hero .meta {
  margin: 1.4rem 0 0; font-family: var(--sans);
  font-size: .8rem; color: var(--ink-faint); letter-spacing: .02em;
}

/* ---- the three main views -------------------------------------------- */
.trio { padding: 4rem 0; }
.trio-head { text-align: center; margin-bottom: 2.5rem; }
.trio-head h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 500;
  letter-spacing: -0.015em; margin: 0;
}
.trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
@media (max-width: 860px) {
  .trio-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 250px; margin: 0 auto; }
}
.trio figure { margin: 0; text-align: center; }
.trio img {
  display: block; width: 100%; max-width: 260px; margin: 0 auto 1rem;
  border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.trio h3 { font-size: 1.15rem; font-weight: 500; margin: 0; }
.trio .name { font-family: var(--hand); font-size: 1.1rem; color: var(--primary); margin: .05rem 0 .45rem; }
.trio figcaption p { margin: 0; font-size: .93rem; color: var(--ink-mute); }

/* ---- download --------------------------------------------------------- */
.get {
  text-align: center; padding: 4rem 0 3.5rem;
  border-top: 1px solid var(--border);
}
.facts {
  margin: 1.1rem 0 0; font-family: var(--sans); font-size: .82rem;
  color: var(--ink-faint); line-height: 1.7;
}
.facts b { color: var(--ink-mute); font-weight: 600; }
.facts code { display: block; font-size: .7rem; word-break: break-all; margin-top: .4rem; }
.freedom {
  margin: 1.8rem auto 0; font-style: italic;
  color: var(--ink-mute); font-size: .96rem; max-width: 44ch;
}

/* ---- subscribe --------------------------------------------------------- */
.signup { margin: 1.6rem 0 0; max-width: 24rem; }
.signup-note { font-size: .95rem; color: var(--ink-mute); margin: 0 0 .6rem; }
.signup-row { display: flex; gap: .5rem; }
.signup input[type="email"] {
  flex: 1; min-width: 0;
  font-family: var(--sans); font-size: .92rem;
  padding: .58rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink);
  outline: none; transition: border-color 160ms ease;
}
.signup input[type="email"]:focus { border-color: var(--primary); }
.signup button {
  font-family: var(--sans); font-size: .92rem; letter-spacing: .01em;
  padding: .58rem 1.4rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--primary); color: var(--on-primary);
  transition: background 180ms ease;
}
.signup button:hover { background: var(--ink); color: var(--bg); }
.signup.loading button { opacity: .6; pointer-events: none; }
.signup-ok, .signup-err { display: none; font-size: .9rem; margin: .7rem 0 0; }
.signup.success .signup-row, .signup.success .signup-note { display: none; }
.signup.success .signup-ok { display: block; color: var(--primary); }
.signup.error .signup-err { display: block; color: #b3401f; }
@media (max-width: 480px) { .signup-row { flex-direction: column; } }

/* ---- back to top ------------------------------------------------------ */
.fab {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 20;
  width: 52px; height: 52px; border-radius: 999px; border: 0;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px -6px rgba(43,29,20,.45);
  cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, background 180ms ease;
}
.fab.show { opacity: 1; pointer-events: auto; transform: none; }
.fab:hover { background: var(--ink); color: var(--bg); }

/* ---- posts and pages --------------------------------------------------
   The landing page is the point of this theme, but Ghost needs somewhere
   to put writing. Same palette, same measure. */
.site-head { padding: 3rem 0 2.25rem; }
.site-head img { display: block; width: 172px; height: auto; }

.stream { padding: 1rem 0 2rem; }
.entry { padding: 1.6rem 0; border-top: 1px solid var(--border); max-width: 72ch; }
.entry:first-child { border-top: none; }
.entry h2 { font-size: 1.35rem; font-weight: 500; margin: 0 0 .2rem; letter-spacing: -0.01em; }
.entry h2 a { color: var(--ink); text-decoration: none; }
.entry h2 a:hover { color: var(--primary); }
.entry p { margin: 0; color: var(--ink-mute); }
.entry-meta {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--ink-faint);
  margin: 0 0 .5rem !important;
}
.empty { color: var(--ink-faint); font-style: italic; }

.prose { max-width: 40rem; padding: 1rem 0 3rem; }
.prose h1 { font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 .3rem; }
.prose h2 { font-size: 1.4rem; font-weight: 500; margin: 2.2rem 0 .5rem; }
.prose h3 { font-size: 1.15rem; font-style: italic; font-weight: 500; margin: 1.8rem 0 .4rem; }
.prose p, .prose li { color: var(--ink-mute); }
.prose img, .prose .feature { border-radius: 10px; border: 1px solid var(--border); margin: 1.5rem 0; }
.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--border-strong);
  color: var(--ink);
  font-style: italic;
}
.prose pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: .88rem;
}
.prose :not(pre) > code {
  background: var(--surface);
  padding: .05rem .3rem;
  border-radius: 3px;
  font-size: .88em;
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

.pagination {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink-faint);
}

.kg-width-wide { max-width: 48rem; }
.kg-width-full { max-width: 100%; }

/* ---- onboarding phone (hero): the D-blend slide deck as live HTML ---- */
/* Scoped under .obp-* — lifted from docs/explorations/onboarding-slides-prototype.html (Tower) */

.obp-phone {
  width: 320px;
  background: #241c14;
  border-radius: 42px;
  padding: 11px;
  box-shadow: 0 24px 48px -20px rgba(20, 12, 4, 0.45), 0 2px 0 rgba(255, 255, 255, 0.06) inset;
  flex: none;
}
.obp-screen {
  position: relative;
  width: 100%;
  height: 660px;
  border-radius: 32px;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background: #f5ead5;
  color: #2b1d14;
}

.obp-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 54px 24px 66px;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  font-family: Caveat, cursive;
}
.obp-slide.on { opacity: 1; transform: none; pointer-events: auto; }

.obp-skip {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 5;
  font-size: 18px;
  font-family: Caveat, cursive;
  font-weight: 400;
  color: #8b5e3c;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
}
.obp-dots {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.obp-dot {
  width: 7px;
  height: 7px;
  border-radius: 7px;
  border: none;
  padding: 0;
  background: #d6c5a7;
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.obp-dot.on { width: 20px; background: #8b5e3c; }

.obp-art {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  min-height: 0;
}
.obp-headline {
  margin: 0 0 6px;
  font-size: 32px;
  font-weight: 400;
  text-align: center;
  color: #7a5b3e;
  line-height: 1.05;
}
.obp-copy {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  text-align: center;
  color: #6b513c;
}
.obp-eyebrow-step {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a89378;
  margin-bottom: 10px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.obp-logo {
  width: 200px !important;       /* reset .shot img width:100% (higher specificity) */
  height: 200px !important;
  margin: 12px 0 8px;
  display: block;
  border: 0 !important;          /* reset .shot img theme rule */
  border-radius: 0 !important;   /* reset .shot img theme rule */
  box-shadow: none !important;   /* reset .shot img theme rule */
  max-width: none !important;    /* reset img { max-width: 100% } */
}

/* ---- beads (ChainPreview ratios) ---- */
.obp-bead {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s);
  height: var(--s);
  font-weight: 700;
  color: #fff;
  font-size: calc(var(--s) * 0.46);
  box-shadow: 0 4px 10px rgba(43, 29, 20, 0.28);
}
.obp-bead.sq { border-radius: 18%; }
.obp-bead.rd { border-radius: 50%; }
.obp-bead.ov { width: calc(var(--s) * 1.4); border-radius: var(--s); }
.obp-bead.lz { width: calc(var(--s) * 0.78); height: calc(var(--s) * 0.78); border-radius: 13%; transform: rotate(45deg); }
.obp-bead.lz > span { transform: rotate(-45deg); }

.m-sun   { background: #e8b94f; color: #3a2a05; }
.m-ember { background: #d6552f; color: #fff5ec; }
.m-rose  { background: #e08aa1; color: #3a1320; }
.m-forest{ background: #5a8a5e; color: #f3f8ee; }
.m-ocean { background: #4f88a8; color: #f1f7fb; }
.m-plum  { background: #7a4c7a; color: #f7eef7; }
.m-char  { background: #3a3a3e; color: #ededed; }

.glossy {
  background-image: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 22%, rgba(255, 255, 255, 0) 46%);
}

/* ---- note cards ---- */
.obp-card {
  background: #ebe0c9;
  border: 1px solid #d6c5a7;
  border-radius: 14px;
  padding: 12px 14px;
  width: 220px;
  display: flex;
  gap: 11px;
  align-items: center;
  box-shadow: 0 2px 6px rgba(43, 29, 20, 0.06);
  /* notes render in the app's real note face */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.obp-card .t { font-size: 14px; font-weight: 700; }
.obp-card .s { font-size: 12px; color: #6b513c; margin-top: 2px; line-height: 1.3; }

.obp-blabel { font-size: 20px; color: #8b5e3c; margin-top: 8px; }
.obp-cand { display: flex; gap: 12px; align-items: center; margin-top: 20px; opacity: 0.5; }

/* ---- slide 5 chain: staggered appear ---- */
.obp-chain { display: flex; flex-direction: column; align-items: center; }
.obp-chain .link { width: 2.5px; height: 26px; background: var(--gold, #c9a24a); }
.obp-chain .joint { width: 7px; height: 7px; border-radius: 7px; margin: 2px 0; background: var(--gold, #c9a24a); }
.obp-ch-item { opacity: 0; }
.obp-slide.play .obp-ch-item { animation: obp-drop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.obp-slide.play .obp-ch-item:nth-child(1) { animation-delay: 0.15s; }
.obp-slide.play .obp-ch-item:nth-child(2) { animation-delay: 0.4s; }
.obp-slide.play .obp-ch-item:nth-child(3) { animation-delay: 0.65s; }
.obp-slide.play .obp-ch-item:nth-child(4) { animation-delay: 0.9s; }
.obp-slide.play .obp-ch-item:nth-child(5) { animation-delay: 1.15s; }
.obp-slide.play .obp-ch-item:nth-child(6) { animation-delay: 1.4s; }
.obp-slide.play .obp-ch-item:nth-child(7) { animation-delay: 1.65s; }
@keyframes obp-drop {
  from { opacity: 0; transform: translateY(-14px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}

/* phase 2: chain glides left + zooms out, notes open beside their beads */
.obp-stage { position: relative; width: 254px; height: 250px; }
.obp-chwrap {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  transform-origin: top center;
}
.obp-slide.play .obp-chwrap { animation: obp-shiftLeft 0.5s cubic-bezier(0.3, 0.7, 0.2, 1) 2.2s forwards; }
@keyframes obp-shiftLeft {
  to { transform: translateX(-50%) translateX(-60px) scale(0.86); }
}
.obp-nt {
  position: absolute;
  left: 104px;
  width: 130px;
  transform: translateY(-50%);
  opacity: 0;
  font-size: 11.5px;
  line-height: 1.35;
  border-radius: 8px;
  padding: 8px 10px;
  box-sizing: border-box;
  background: #ebe0c9;
  border: 1px solid #d6c5a7;
  color: #6b513c;
  box-shadow: 0 2px 6px rgba(43, 29, 20, 0.06);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.obp-nt.nt1 { top: 61px; }
.obp-nt.nt2 { top: 117px; }
.obp-nt.nt3 { top: 168px; }
@keyframes obp-noteShow {
  0%   { opacity: 0; transform: translate(10px, -50%); }
  15%  { opacity: 1; transform: translate(0, -50%); }
  80%  { opacity: 1; transform: translate(0, -50%); }
  100% { opacity: 0; transform: translate(0, -50%); }
}
@keyframes obp-noteStay {
  from { opacity: 0; transform: translate(10px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}
.obp-slide.play .obp-nt.nt1 { animation: obp-noteShow 1.05s ease 2.8s both; }
.obp-slide.play .obp-nt.nt2 { animation: obp-noteShow 1.05s ease 3.9s both; }
.obp-slide.play .obp-nt.nt3 { animation: obp-noteStay 0.4s ease 5.0s forwards; }

/* the date stays centered; only the chain glides left */
.obp-pfix { opacity: 0; margin: 0 0 10px; text-align: center; }
.obp-slide.play .obp-pfix { animation: obp-fadeIn 0.4s ease 0.1s forwards; }

/* ---- slide 6: hand-strung thread ---- */
.obp-tname { font-family: Caveat, cursive; font-size: 24px; color: #8b5e3c; margin-bottom: 18px; opacity: 0; }
.obp-hchain { display: flex; align-items: center; }
.obp-hchain .obp-hlink { width: 13px; height: 2.5px; flex: none; background: var(--gold, #c9a24a); }
.obp-hchain > * { opacity: 0; }
.obp-slide.play .obp-hchain > * { animation: obp-drop 0.35s ease forwards; }
.obp-slide.play .obp-hchain > :nth-child(1)  { animation-delay: 0.10s; }
.obp-slide.play .obp-hchain > :nth-child(2)  { animation-delay: 0.18s; }
.obp-slide.play .obp-hchain > :nth-child(3)  { animation-delay: 0.26s; }
.obp-slide.play .obp-hchain > :nth-child(4)  { animation-delay: 0.34s; }
.obp-slide.play .obp-hchain > :nth-child(5)  { animation-delay: 0.42s; }
.obp-slide.play .obp-hchain > :nth-child(6)  { animation-delay: 0.50s; }
.obp-slide.play .obp-hchain > :nth-child(7)  { animation-delay: 0.58s; }
.obp-slide.play .obp-hchain > :nth-child(8)  { animation-delay: 0.66s; }
.obp-slide.play .obp-hchain > :nth-child(9)  { animation-delay: 0.74s; }
.obp-slide.play .obp-hchain > :nth-child(10) { animation-delay: 0.82s; }
.obp-slide.play .obp-hchain > :nth-child(11) { animation-delay: 0.90s; }
/* fade-only for elements carrying a static transform (the 45° lozenge, the title tilt) */
@keyframes obp-fadeIn { from { opacity: 0; } to { opacity: 1; } }
.obp-slide.play .obp-hchain > .obp-bead.lz { animation-name: obp-fadeIn; }
.obp-slide.play .obp-tname { animation: obp-fadeIn 0.4s ease 1.1s forwards; }

.obp-begin {
  align-self: center;
  margin-top: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 8px 32px;
  font-size: 21px;
  font-family: Caveat, cursive;
  background: #8b5e3c;
  color: #fff8ec;
}

@media (prefers-reduced-motion: reduce) {
  .obp-slide, .obp-dot { transition: none; }
  .obp-slide.play .obp-ch-item, .obp-slide.play .obp-nt, .obp-slide.play .obp-hchain > *,
  .obp-slide.play .obp-tname, .obp-slide.play .obp-pfix { animation: none; opacity: 1; }
  .obp-slide.play .obp-chwrap { animation: none; transform: translateX(-50%) translateX(-60px) scale(0.86); }
}

/* ---- hero grid for the onboarding phone (desktop only) -----------------
   Must stay inside min-width: the theme's own mobile rule stacks .block
   at 860px; an unconditional override here would defeat it (equal
   specificity, later in the file wins) and keep the hero two-column
   on phones — horizontal scroll. */
@media (min-width: 861px) {
  .hero { grid-template-columns: 1fr 380px; }
}

/* ---- mobile: stack (theme's rule applies again), phone centered -------- */
@media (max-width: 860px) {
  .hero .shot.obp-holder {
    max-width: none;          /* reset the theme's 250px cap */
    width: 342px;             /* phone + bezel */
    margin: 0 auto;
  }
}
/* narrow phones: shrink the phone to the wrap's content box (2rem padding
   each side). zoom, not transform, so the layout box shrinks with it. */
@media (max-width: 420px) {
  .hero .shot.obp-holder { width: auto; }
  .obp-phone { zoom: min(1, calc((100vw - 4rem) / 342)); }
}