/* =========================================================
   Ottermates brand layer
   Loaded AFTER style.css and responsive.css so it wins.
   Palette is derived from the mascot canon (two otters, coral
   sky, teal water). Sampled values, not invented:
     sky coral      #FC7D66
     cream sky/cloud#FDE7C6
     water teal     #359F9E
     otter brown    #DE8041
     otter cream    #F9D5AB
     pebble         #A18067
     outline brown  #5C301A
   Single source of truth for colour in this site: change it
   here, nowhere else. No literal hex outside this block.
   ========================================================= */

:root {
  /* --- brand core --- */
  --otter-coral: #fc7d66;
  --otter-coral-deep: #e8624a;
  --otter-cream: #fde7c6;
  --otter-cream-soft: #fdf4e8;
  --otter-teal: #359f9e;
  --otter-teal-deep: #23807f;
  --otter-brown: #de8041;
  --otter-fur-light: #f9d5ab;
  --otter-pebble: #a18067;
  --otter-ink: #3b2317;

  /* --- template variable overrides (every existing rule inherits) --- */
  --primery: var(--otter-coral);
  --primery-light: var(--otter-cream-soft);
  --light-yellow: #fdf4e8;
  --dark-black: var(--otter-ink);
  --dark-greay: #8b7a6d;
  --greay: #b9aa9d;
  --text-greay: #6f6055;
  --black: var(--otter-ink);
  --light-greay: #efe3d5;

  /* --- layout --- */
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --header-h: 88px;
}

body {
  color: var(--otter-ink);
  background-color: var(--otter-cream-soft);
}

/* Warm the section backgrounds the template painted cold */
.banner_section {
  background: linear-gradient(
    180deg,
    var(--otter-cream) 0%,
    var(--otter-cream-soft) 62%
  );
}

/* --- Buttons ------------------------------------------------ */
.btn.puprple_btn,
.btn.white_btn:hover {
  background: var(--otter-coral);
  border-color: var(--otter-coral);
  color: #fff;
  border-radius: var(--radius-pill);
}

.btn.puprple_btn:hover {
  background: var(--otter-coral-deep);
  border-color: var(--otter-coral-deep);
}

.btn.white_btn {
  border-radius: var(--radius-pill);
}

/* Secondary action uses the water teal so the palette reads as
   the canon (coral sky above, teal water below) rather than
   one flat brand colour. */
.btn.teal_btn {
  background: var(--otter-teal);
  border: 1px solid var(--otter-teal);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  display: inline-block;
  font-weight: 700;
  transition: 0.3s all;
}

.btn.teal_btn:hover {
  background: var(--otter-teal-deep);
  border-color: var(--otter-teal-deep);
  color: #fff;
}

/* The template sets overflow-x: hidden on .page_wrapper. Per spec, when one
   axis is not visible the other computes to auto, so the wrapper became a
   scroll container and every position: sticky inside it stopped pinning to
   the viewport. That silently killed the guide sidebars. clip contains the
   same horizontal overflow without creating a scrollport. */
.page_wrapper {
  overflow-x: clip;
}

/* --- Header: sticky + auto-hide on scroll down -------------- */
/* Scoped to the site header, not the bare element: every guide's title block
   is also a <header class="post_header">, so an unscoped rule pinned the
   article title over its own body text. */
.page_wrapper > header {
  position: sticky;
  top: 0;
  transition: transform 0.32s ease;
  will-change: transform;
  background: var(--otter-cream-soft);
}

.page_wrapper > header.header_hidden {
  transform: translateY(-100%);
}

/* --- Floating QR download dock (desktop only) --------------- */
/* A phone cannot scan itself, so this never renders on mobile. */
.qr_dock {
  display: none;
}

@media (min-width: 1200px) {
  .qr_dock {
    display: block;
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 60;
    background: #fff;
    border: 1px solid var(--light-greay);
    border-radius: var(--radius-md);
    padding: 14px 14px 10px;
    box-shadow: 0 12px 34px rgba(59, 35, 23, 0.16);
    text-align: center;
    max-width: 168px;
  }

  .qr_dock img {
    width: 128px;
    height: 128px;
    display: block;
    margin: 0 auto 8px;
  }

  .qr_dock .qr_label {
    font-size: 14px;
    font-weight: 700;
    color: var(--otter-ink);
    margin: 0;
    line-height: 1.3;
  }

  .qr_dock .qr_close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--otter-coral);
    cursor: pointer;
    padding: 2px 4px;
  }

  .qr_dock .qr_close:hover {
    color: var(--otter-coral-deep);
  }
}

/* --- In-content CTA callout (guides + pages) ---------------- */
.cta_callout {
  background: linear-gradient(120deg, var(--otter-cream) 0%, #eaf6f5 100%);
  border-left: 5px solid var(--otter-coral);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  margin: 34px 0;
}

.cta_callout p {
  margin-bottom: 14px;
}

/* --- Artwork: postcard treatment ---------------------------
   The canon illustration carries its own coral sky and teal
   water, so it needs a frame or its square edge fights the
   cream page. Rounded + shadow reads as intentional. */
.hero_otters,
.about_img img {
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(59, 35, 23, 0.18);
}

.hero_otters {
  max-width: 480px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

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

/* --- Section rhythm ---------------------------------------- */
.how_it_section,
.service_section,
.about_section,
.download_app {
  padding: 78px 0;
}

.section_title h2 {
  font-weight: 800;
  margin-bottom: 12px;
}

.section_title p {
  color: var(--text-greay);
}

.download_app {
  background: linear-gradient(
    180deg,
    var(--otter-cream-soft) 0%,
    var(--otter-cream) 100%
  );
}

.hero_pair {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: flex-end;
}

.hero_pair img {
  width: 46%;
  max-width: 280px;
  height: auto;
}

/* --- Accessibility: never remove focus outlines ------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--otter-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  header {
    transition: none;
  }

  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Store badges -------------------------------------------
   Apple and Google both require their official badges be used
   unmodified. The template wraps badge images in its own dark
   padded button, which would double-box ours, so the anchor is
   stripped back and the badge itself IS the button.
   Natural ratios differ (App Store 119.66x40, Play 180x54), so
   normalise on height and let width follow. */
.app_btn {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 18px 0 0;
}

.app_btn li {
  list-style: none;
  margin: 0 !important;
}

.banner_section .app_btn li a,
.download_app .app_btn li a,
footer .download_side .app_btn li a,
.app_btn li a {
  display: inline-block;
  background-color: transparent;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  transition: 0.3s transform;
}

.banner_section .app_btn li a:hover,
.download_app .app_btn li a:hover,
footer .download_side .app_btn li a:hover,
.app_btn li a:hover {
  background-color: transparent;
  transform: translateY(-2px);
}

.banner_section .app_btn li a img,
.download_app .app_btn li a img,
footer .download_side .app_btn li a img,
.app_btn li a img {
  height: 52px;
  width: auto;
  max-width: none;
}

/* The template's used_app block held a fabricated user count.
   It now carries an honest line about the free tier. */
.used_app h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--otter-ink);
}

.used_app p {
  color: var(--text-greay);
  margin: 0;
}

/* Footer badge anchors: the template outlines them, which fights
   the official badge artwork. Keep them clean. */
footer .download_side .app_btn li a,
footer .download_side .app_btn li a:hover {
  border: 0;
  background: transparent;
}

/* --- Dark panels: readable body text ------------------------
   The template's .white_text sections invert to a dark panel but
   the paragraph colour stays the light-background grey, which
   lands around 1.6:1 against our brown. Lift it to a warm cream
   so it clears the 4.5:1 minimum. */
.white_text .section_title p,
.pricing_section .section_title p,
.download_app .section_title p {
  color: #e8d9c8;
}

.pricing_section .pannel_block .heading span {
  color: var(--text-greay);
}

.pricing_section .highlited_block .heading h3,
.pricing_section .highlited_block .heading span,
.pricing_section .highlited_block .pricing h3,
.pricing_section .highlited_block .features li p {
  color: #fff;
}

/* The template's decorative hero sparkles, recreated as brand-coloured
   vectors (the originals were pruned with the rest of the placeholder art). */
.hero_image::before,
.hero_image::after {
  background-size: contain;
  background-repeat: no-repeat;
}

/* Footer "Cookie settings" trigger: a real button for accessibility,
   styled as a link. Consent must always be withdrawable. */
.link_button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.85;
}

.link_button:hover {
  opacity: 1;
  color: var(--otter-coral);
}

/* --- Legal pages (privacy, terms) ---------------------------
   Long-form reading: a measured column, generous line height,
   and headings that actually separate sections. */
.legal_section {
  padding: 70px 0 90px;
}

/* Scoped to the section so a template rule cannot flatten it. A measured
   column also keeps the text clear of the QR dock at the bottom left. */
.legal_section .legal_wrap {
  max-width: 760px;
  margin: 0 auto;
}

.legal_wrap h1 {
  font-weight: 800;
  margin-bottom: 8px;
}

.legal_meta {
  color: var(--text-greay);
  font-size: 15px;
  margin-bottom: 30px;
}

.legal_lede {
  font-size: 20px;
  line-height: 1.6;
  color: var(--otter-ink);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--light-greay);
  margin-bottom: 34px;
}

.legal_wrap h2 {
  font-size: 27px;
  font-weight: 800;
  margin: 42px 0 14px;
}

.legal_wrap h3 {
  font-size: 20px;
  font-weight: 800;
  margin: 28px 0 10px;
}

.legal_wrap p,
.legal_wrap li {
  color: var(--text-greay);
  line-height: 1.75;
}

.legal_wrap p {
  margin-bottom: 16px;
}

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

.legal_wrap ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.legal_wrap ul li {
  list-style: disc;
  margin-bottom: 10px;
}

.legal_wrap a {
  color: var(--otter-coral-deep);
  text-decoration: underline;
}

.legal_wrap a:hover {
  color: var(--otter-teal-deep);
}

/* Footer legal links */
footer .bottom_footer a {
  color: inherit;
  text-decoration: underline;
  opacity: 0.85;
}

footer .bottom_footer a:hover {
  opacity: 1;
  color: var(--otter-coral);
}

/* Hero side-note. Was an h3, which created an H1 to H3 jump in the outline;
   it is a styled paragraph now so the heading order stays clean. */
.used_app_title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--otter-ink);
  line-height: 1.3;
}

/* =========================================================
   Guide post template (2 columns + sticky sidebar).
   This is the shape every guide in the cluster uses, so it
   lives here once rather than being restyled per post.
   ========================================================= */
.post_section {
  padding: 46px 0 80px;
}

.breadcrumb_nav {
  font-size: 14px;
  color: var(--text-greay);
  margin-bottom: 16px;
}

.breadcrumb_nav a {
  color: var(--text-greay);
  text-decoration: underline;
}

.breadcrumb_nav a:hover {
  color: var(--otter-coral);
}

.post_header {
  max-width: 820px;
  margin: 0 auto 30px;
  text-align: center;
}

.post_header h1 {
  font-weight: 800;
  margin: 14px 0 12px;
  line-height: 1.12;
}

.post_meta {
  color: var(--text-greay);
  font-size: 15px;
  margin: 0;
}

.post_hero {
  margin: 0 0 44px;
}

.post_hero img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(59, 35, 23, 0.16);
  display: block;
}

.post_content {
  max-width: 720px;
}

.post_lede {
  font-size: 20px;
  line-height: 1.65;
  color: var(--otter-ink);
  margin-bottom: 30px;
}

.post_content h2 {
  font-size: 30px;
  font-weight: 800;
  margin: 44px 0 14px;
  line-height: 1.2;
}

.post_content h3 {
  font-size: 20px;
  font-weight: 800;
  margin: 30px 0 10px;
}

.post_content p,
.post_content li {
  color: var(--text-greay);
  line-height: 1.75;
}

.post_content p {
  margin-bottom: 16px;
}

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

.post_content > ul {
  margin: 0 0 22px;
  padding-left: 22px;
}

.post_content > ul li {
  list-style: disc;
  margin-bottom: 12px;
}

/* Numbered question lists: the substance of every guide in this
   cluster, so they get real styling rather than browser defaults. */
/* Numbering uses the built-in list-item counter, not a custom one, because
   list-item is the only counter that honours the <ol start> attribute. A
   custom counter reset per list restarts every section at 1, which silently
   breaks any guide whose sections continue one long numbered run: a page
   promising 160 questions would never show a number above 25. */
.question_list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.question_list li {
  position: relative;
  padding: 13px 16px 13px 52px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--light-greay);
  border-radius: var(--radius-md);
  color: var(--otter-ink);
  line-height: 1.6;
}

.question_list li::before {
  content: counter(list-item);
  position: absolute;
  left: 14px;
  top: 13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--otter-cream);
  color: var(--otter-coral-deep);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sticky sidebar CTA */
.post_sidebar {
  position: sticky;
  top: 108px;
}

.sidebar_cta {
  background: #fff;
  border: 1px solid var(--light-greay);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(59, 35, 23, 0.08);
}

.sidebar_cta img {
  display: block;
  margin: 0 auto 16px;
}

.sidebar_cta h2 {
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 8px;
}

.sidebar_cta p {
  color: var(--text-greay);
  font-size: 15px;
  margin-bottom: 16px;
}

.sidebar_cta .app_btn {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.sidebar_cta .app_btn li a img {
  height: 44px;
}

/* A phone cannot scan itself, and the sidebar collapses under the
   article on narrow screens, so the QR goes away there. */
@media (max-width: 991px) {
  .post_sidebar {
    position: static;
    margin-top: 40px;
  }

  .sidebar_cta > img {
    display: none;
  }
}

.post_content .cta_callout a.btn {
  margin-top: 4px;
}

/* The floating dock is fixed to the bottom left, so it sits on top of any
   layout whose content reaches that corner. Guides already carry a QR in
   their sticky sidebar, and the hub's card grid runs the full width, so the
   dock is suppressed on both. It stays where it reads as intentional: the
   home page (over the hero) and the narrow legal pages. */
body:has(.sidebar_cta) .qr_dock,
body:has(.hub_grid) .qr_dock {
  display: none;
}

/* --- Guides hub: image-card grid ---------------------------- */
.hub_section {
  padding: 46px 0 80px;
}

.hub_intro {
  max-width: 720px;
  margin: 0 auto 46px;
  text-align: center;
}

.hub_intro h1 {
  font-weight: 800;
  margin: 12px 0 14px;
}

.hub_group_title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 22px;
}

/* auto-fill keeps a full row tidy, and the per-card cap stops a single
   card stretching across the whole page while the cluster is still small. */
.hub_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 28px;
  margin-bottom: 54px;
  justify-content: start;
}

.hub_grid .hub_card {
  max-width: 430px;
}

.hub_card {
  background: #fff;
  border: 1px solid var(--light-greay);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.3s all;
  box-shadow: 0 8px 22px rgba(59, 35, 23, 0.06);
}

.hub_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(59, 35, 23, 0.13);
}

.hub_card_img {
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
}

.hub_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: 0.5s transform;
}

.hub_card:hover .hub_card_img img {
  transform: scale(1.04);
}

.hub_card_text {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hub_card_meta {
  font-size: 13px;
  color: var(--text-greay);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}

.hub_card_text h3 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 10px;
}

.hub_card_text h3 a {
  color: var(--otter-ink);
}

.hub_card_text h3 a:hover {
  color: var(--otter-coral-deep);
}

.hub_card_text p {
  color: var(--text-greay);
  line-height: 1.65;
  margin-bottom: 16px;
}

.hub_more {
  margin-top: auto;
  font-weight: 800;
  color: var(--otter-coral-deep);
}

.hub_more:hover {
  color: var(--otter-teal-deep);
}

.hub_coming {
  background: var(--otter-cream);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  margin-bottom: 34px;
}

.hub_coming h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
}

.hub_coming p {
  color: var(--text-greay);
  margin: 0;
  line-height: 1.7;
}

.hub_cta {
  max-width: 760px;
}

/* --- Use-case pages (product pages, not guides) --------------- */
.usecase_hero .section_title {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.usecase_hero_cta {
  text-align: center;
  margin-top: 6px;
}

.usecase_body .usecase_block {
  max-width: 760px;
  margin: 0 auto 34px;
}

.usecase_body .usecase_block h2 {
  margin-bottom: 14px;
}

.usecase_link_card {
  background: #fff;
  border: 1px solid var(--light-greay);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  height: 100%;
}

.usecase_link_card h3 {
  margin-bottom: 10px;
}

.usecase_link_card h3 a {
  color: var(--otter-ink);
}

.usecase_link_card h3 a:hover {
  color: var(--otter-coral-deep);
}

/* --- Question generator (the daily round) -------------------- */
.gen_section {
  padding-top: 0;
}

.gen_root {
  max-width: 640px;
  margin: 0 auto;
}

.gen_card {
  background: #fff;
  border: 1px solid var(--light-greay);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: 0 14px 40px rgba(59, 35, 23, 0.1);
  text-align: center;
}

.gen_card .gen_h {
  margin-bottom: 10px;
}

.gen_card .gen_sub {
  color: var(--text-greay);
  margin-bottom: 22px;
}

.gen_meta {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--otter-coral-deep);
  margin-bottom: 10px;
}

/* The question itself is the loudest thing on the page. */
.gen_q {
  font-size: 26px;
  line-height: 1.35;
  margin-bottom: 22px;
  color: var(--otter-ink);
}

.gen_who {
  font-size: 14px;
  font-weight: 700;
  color: var(--otter-teal-deep);
  margin-bottom: 6px;
}

.gen_input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--light-greay);
  border-radius: var(--radius-md);
  font: inherit;
  color: var(--otter-ink);
  margin-bottom: 18px;
  resize: vertical;
}

.gen_input:focus {
  border-color: var(--otter-teal);
}

.gen_answer {
  background: var(--otter-cream-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  text-align: left;
}

.gen_answer p:last-child {
  margin: 0;
}

.gen_skip {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: 0;
  padding: 4px 8px;
  color: var(--text-greay);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
}

.gen_skip:hover {
  color: var(--otter-coral-deep);
}

@media (max-width: 575px) {
  .gen_card {
    padding: 26px 20px;
  }

  .gen_q {
    font-size: 22px;
  }
}

.hub_tool_note {
  background: linear-gradient(120deg, var(--otter-cream) 0%, #eaf6f5 100%);
  border-left: 5px solid var(--otter-coral);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 34px;
}

.hub_tool_note p {
  margin: 0;
}

/* =========================================================
   Logo sizing (OTTERWEB-49)
   The real lockup is 7.34:1 where the placeholder it replaced
   was 4.64:1. The template pins a width and the markup carries
   a height attribute, so without this the SVG letterboxes
   inside a box taller than the artwork. Letting height follow
   width makes the box match the mark, and the width/height
   attributes in the markup still reserve space so there is no
   layout shift while it loads.
   ========================================================= */
.navbar-brand img,
footer .logo_side .logo img {
  height: auto;
}

/* =========================================================
   Logo intro overlay (OTTERWEB-50)
   The animated lockup that greets a first-time visitor, the
   web twin of the app's launch animation. Colour lives here
   like everything else; the script reads these variables
   rather than carrying hex of its own.

   These four are the LOGO's own colours, deliberately not the
   site palette. The mark is the same artwork the app ships and
   must not drift with the site's coral, which is a separate
   reconciliation question.
   ========================================================= */
:root {
  --otter-logo-rio: #ef8230;
  --otter-logo-mar: #eac69c;
  --otter-logo-ink: #2b2320;
  --otter-logo-cream: #faf6f1;
}

#om_intro {
  display: none;
}

/* Set synchronously by a tiny head script, so the ink field paints with the
   first frame instead of flashing the page and then covering it. */
html.om-intro-on #om_intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: block;
  background: var(--otter-logo-ink);
  cursor: pointer;
}

html.om-intro-on #om_intro svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The exit. Opacity only, so it composites on the GPU and never reflows. */
#om_intro.om-out {
  opacity: 0;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The head script never adds the class when this is on, so the overlay simply
   never exists for these visitors. This block is the belt to that braces. */
@media (prefers-reduced-motion: reduce) {
  html.om-intro-on #om_intro {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   The invite landing page (/join/<CODE>), OTTER-37.

   Deliberately small: the page has one job, which is to make a six-character
   code readable across a room and give two buttons. The code is set in a
   monospaced face with wide tracking because it is going to be typed by hand
   into another device, and a proportional face turns that into a guessing game
   between 8 and B.
--------------------------------------------------------------------------- */

.join_code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  margin: 24px 0 8px;
  color: var(--otter-ink);
}

.join_help {
  max-width: 460px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 15px;
  opacity: 0.75;
}

@media (max-width: 480px) {
  .join_code {
    font-size: 34px;
  }
}