:root {
  color-scheme: light dark;
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #1c1b19;
  --muted: #70695f;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #e6edfc;
  --border: #e1dcd0;
  --danger: #b3401f;
  --input-bg: #ffffff;
  --button-bg: #2563eb;
  --button-bg-hover: #1d4ed8;
  --button-text: #ffffff;
  --grid-dot: rgba(28, 27, 25, 0.06);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  background-color: var(--bg);
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.6;
}

main {
  width: 100%;
  max-width: 480px;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

@media (min-width: 860px) {
  main {
    max-width: 600px;
    padding: 1.25rem 1rem;
  }

  /* Trim the vertical chrome around the hero tool so it — and the rest of the
     page — has a realistic chance of fitting a laptop viewport without scrolling. */
  .viewfinder-frame {
    padding: 1rem 1.25rem;
  }

  .viewfinder-frame .card {
    padding: 1.1rem 1.5rem;
  }

  h1 {
    margin-bottom: 1rem;
  }

  .viewfinder-frame h1 {
    font-size: 1.3rem;
  }

  .mode-tabs {
    margin-bottom: 1rem;
  }

  .mode-tab {
    padding: 0.45rem 0.5rem;
  }

  .form-row {
    margin-top: 0.6rem;
  }

  #submit-button {
    margin-top: 0.4rem;
  }

  .site-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
  }
}

@media (min-width: 1400px) {
  main {
    max-width: 720px;
  }
}

/* Hidden below 1100px (single centered card, unchanged); the media query below turns it back
   on once there is room to show it beside the form. */
.home-hero-intro {
  display: none;
}

/* Before a result exists, the tool is the only content on the page. Below 1100px it stays a
   single centered card (unchanged from the compact mobile/laptop layout above); at 1100px+
   there is finally room to explain the product beside the form instead of surrounding a small
   card with empty page. */
@media (min-width: 1100px) {
  main:has(.home-hero-intro) {
    max-width: 1080px;
  }

  .home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    align-items: center;
    gap: 3.5rem;
  }

  .home-hero-intro {
    display: block;
  }

  .tool-eyebrow {
    display: none;
  }
}

/* Once a result exists, there is something worth putting beside the form —
   switch to a two-column layout instead of leaving the wide viewport empty. */
@media (min-width: 1100px) {
  main:has(#result:not(.hidden)) {
    max-width: 980px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
  }

  main:has(#result:not(.hidden)) > .site-footer {
    grid-column: 1 / -1;
  }

  main:has(#result:not(.hidden)) > .home-content {
    grid-column: 1 / -1;
  }

  /* The marketing copy loses to the actual result; give the form frame the full column back. */
  main:has(#result:not(.hidden)) .home-hero-intro {
    display: none;
  }

  main:has(#result:not(.hidden)) .home-hero {
    display: block;
  }
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 1.25rem;
}

p.lead {
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

form label {
  margin-top: 0.9rem;
}

form label:first-of-type {
  margin-top: 0;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.4rem 1rem;
  margin-top: 0.9rem;
}

.form-field label {
  margin-top: 0;
}

/* Anchors the hint bubble. The trigger itself sits near the right edge of this row, so
   anchoring the bubble to the trigger pushed it past the viewport and gave the whole page a
   horizontal scrollbar — a hidden bubble still takes up layout space. */
.field-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hint-wrap {
  display: inline-flex;
}

.hint-wrap > summary {
  list-style: none;
}

.hint-wrap > summary::-webkit-details-marker {
  display: none;
}

.hint-trigger {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}

.hint-trigger:hover,
.hint-trigger:focus-visible,
.hint-wrap[open] > .hint-trigger {
  border-color: var(--accent);
  color: var(--accent);
}

.hint-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: min(220px, 100%);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.hint-wrap[open] > .hint-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hint-bubble {
    transition: none;
  }
}

#submit-button {
  margin-top: 0.6rem;
}

.mode-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.25rem;
}

.mode-tab {
  flex: 1;
  padding: 0.55rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.mode-tab:hover {
  background: transparent;
  color: var(--text);
}

.mode-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.mode-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}

label {
  font-size: 0.875rem;
  font-weight: 600;
}

input[type="url"],
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--font-mono);
  background: var(--input-bg);
  color: var(--text);
}

textarea {
  resize: vertical;
  min-height: 6rem;
}

input[type="url"]:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Honeypot field for spam bots: hidden from sighted users and screen readers alike, but
   still present in the DOM/tab order for naive bots that fill in every field they can see. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.hint {
  color: var(--muted);
  font-size: 0.8rem;
  margin: -0.4rem 0 0;
}

button {
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--button-text);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

button:hover {
  background: var(--button-bg-hover);
}

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

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error {
  margin: 0;
  color: var(--danger);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.error:empty {
  display: none;
}

.hidden {
  display: none !important;
}

.qr-image {
  display: block;
  width: 240px;
  height: 240px;
  margin: 0 auto 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.field {
  margin-bottom: 1rem;
}

.field:last-child {
  margin-bottom: 0;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.section-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.copy-row {
  display: flex;
  gap: 0.5rem;
}

.copy-row input {
  flex: 1;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  background: var(--input-bg);
  color: var(--text);
}

.copy-row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.copy-row button {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  white-space: nowrap;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
}

.copy-row button:hover {
  background: var(--accent);
  color: var(--surface);
}

/* Saving the QR image is the whole point of the result card, but both download actions were
   bare text links — a 19px-tall tap target on a phone. Give them the same affordance as the
   secondary buttons used elsewhere. */
#download-link,
#text-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

#download-link:hover,
#text-download-link:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.notice {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-top: 1rem;
}

.home-hero-intro .eyebrow {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
}

.home-hero-lead {
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 1rem;
}

.home-hero-sub {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0;
  max-width: 32rem;
}

.tool-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.tool-heading h1 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.35;
}

.tool-eyebrow {
  margin: 0 0 0.2rem;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tool-heading-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}

.form-safety,
.form-footer-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.form-safety a {
  color: inherit;
  text-underline-offset: 0.15em;
}

.advanced-options {
  margin-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.advanced-options > summary {
  min-height: 2.75rem;
  padding: 0.7rem 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  list-style-position: inside;
}

.advanced-options > summary:hover,
.advanced-options[open] > summary {
  color: var(--accent);
}

.advanced-options > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.advanced-options-body {
  padding: 0 0 0.8rem;
}

.advanced-options-body input {
  margin-top: 0.35rem;
}

.form-footer-note {
  text-align: center;
}

.home-use-cases {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
}

.home-use-cases a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.home-use-cases a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.home-use-cases a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.use-case-page {
  max-width: 720px;
  margin: 0 auto;
}

.use-case-hero {
  margin-bottom: 1.75rem;
}

.use-case-hero .lead {
  max-width: 42rem;
}

.use-case-section h2,
.use-case-tips > h2,
.use-case-cta h2 {
  margin: 0 0 0.6rem;
  font-size: 1.12rem;
}

.use-case-section > p,
.use-case-tip p,
.use-case-cta p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.use-case-list,
.use-case-steps {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding-left: 1.35rem;
}

.use-case-list li::marker,
.use-case-steps li::marker {
  color: var(--accent);
  font-weight: 700;
}

.use-case-tips {
  margin: 1.75rem 0;
}

.use-case-tip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.use-case-tip {
  height: 100%;
  margin-bottom: 0;
}

.use-case-tip h3 {
  margin: 0 0 0.45rem;
  font-size: 0.98rem;
}

.use-case-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.use-case-cta .eyebrow {
  margin-bottom: 0.35rem;
}

.use-case-cta .button-link {
  flex: 0 0 auto;
}

/* The compact form is the first thing people see below the desktop breakpoint, so repeat
   the essential reassurance inside it rather than relying on the adjacent desktop-only copy. */
.generator-eyebrow,
.generator-description {
  display: none;
}

.home-content {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.home-section {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.home-section > h2 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.45;
}

.home-step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.home-step-list li {
  display: flex;
  gap: 0.65rem;
  min-width: 0;
}

.home-step-number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
}

.home-step-list h3,
.home-scene-card h3,
.home-plan-card h3 {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.45;
}

.home-step-list p,
.home-scene-card p,
.home-plan-card p,
.home-pro-copy {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.home-feature-grid li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.home-feature-grid li::before {
  position: absolute;
  left: 0;
  color: var(--accent);
  content: "✓";
  font-weight: 800;
}

.home-scene-grid,
.home-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.home-scene-card,
.home-plan-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.home-scene-card .text-link {
  display: inline-block;
  margin-top: 0.85rem;
}

.home-plan-card--pro {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: var(--accent-soft);
}

.home-plan-card .notice {
  margin-top: 0.85rem;
  padding: 0.5rem 0.65rem;
}

.home-pro-copy {
  margin-top: 1rem;
}

.home-pro-copy a {
  margin-left: 0.35rem;
  color: var(--accent);
  font-weight: 700;
}

.home-waitlist {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
}

.home-waitlist h3 {
  margin: 0;
  font-size: 0.98rem;
}

.home-waitlist > p {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.home-waitlist form,
.pricing-waitlist-form {
  margin-top: 0.85rem;
}

.home-waitlist-row,
.pricing-waitlist-row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-end;
  margin-top: 0.35rem;
}

.home-waitlist-row input,
.pricing-waitlist-row input {
  min-width: 0;
  flex: 1 1 14rem;
}

.home-waitlist-row button,
.pricing-waitlist-row button {
  flex: 0 0 auto;
}

.home-waitlist [data-pro-waitlist-message],
.pricing-waitlist [data-pro-waitlist-message] {
  margin: 0.75rem 0 0;
}

#generator {
  scroll-margin-top: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1099px) {
  .generator-eyebrow,
  .generator-description {
    display: block;
  }

  .generator-eyebrow {
    margin: 0 0 0.35rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .generator-description {
    margin: -0.35rem 0 1rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
  }
}

/* viewfinder-framed card: echoes a QR code's 3 finder squares */
.viewfinder-frame {
  position: relative;
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.25rem;
}

.viewfinder-frame > .card {
  margin-bottom: 0;
}

.viewfinder-frame::before,
.viewfinder-frame::after,
.viewfinder-frame .corner-bl {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent);
}

.viewfinder-frame::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
  border-radius: 4px 0 0 0;
}

.viewfinder-frame::after {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
  border-radius: 0 4px 0 0;
}

.viewfinder-frame .corner-bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 4px;
}

.stat-total {
  font-size: 2.5rem;
  font-weight: 700;
}

.stat-total-label {
  color: var(--muted);
  font-size: 0.85rem;
}

.chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  margin-top: 1rem;
  overflow-x: auto;
  padding-bottom: 1.5rem;
  position: relative;
}

.chart-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 auto;
  height: 100%;
  min-width: 8px;
  position: relative;
}

.chart-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.chart-bar-wrap .chart-date {
  position: absolute;
  bottom: -1.3rem;
  font-size: 0.6rem;
  color: var(--muted);
  writing-mode: horizontal-tb;
  white-space: nowrap;
}

.target-url {
  word-break: break-all;
  font-size: 0.9rem;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

.chart-heading {
  margin-top: 1.5rem;
}

.rotated-url-row {
  margin-top: 0.75rem;
}

a.back-link {
  color: var(--accent);
  font-size: 0.85rem;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.history-header button {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}

.history-header button:hover {
  background: var(--border);
  color: var(--text);
  border-color: var(--muted);
}

.history-empty {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.history-item {
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}

.history-item:first-child {
  padding-top: 0;
  border-top: none;
}

.history-item-meta {
  color: var(--muted);
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
  word-break: break-all;
}

.history-item .copy-row {
  margin-bottom: 0.4rem;
}

.history-actions {
  display: flex;
  justify-content: flex-end;
}

.history-delete {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  background: var(--bg);
  color: var(--danger);
  border: 1px solid var(--border);
}

.history-delete:hover {
  background: var(--danger);
  color: var(--surface);
  border-color: var(--danger);
}

.site-announcement {
  width: 100%;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
}

.site-announcement p {
  max-width: 480px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  box-sizing: border-box;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 860px) {
  .site-announcement p {
    max-width: 600px;
  }
}

@media (min-width: 1400px) {
  .site-announcement p {
    max-width: 720px;
  }
}

.site-nav {
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-nav-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-sizing: border-box;
}

@media (min-width: 860px) {
  .site-nav-inner {
    max-width: 600px;
  }
}

@media (min-width: 1400px) {
  .site-nav-inner {
    max-width: 720px;
  }
}

.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 0;
}

.site-nav-brand > span:not(.site-nav-brand-copy) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav-brand-copy {
  display: grid;
  gap: 0.02rem;
  min-width: 0;
  line-height: 1.15;
}

.site-nav-brand-copy strong {
  color: var(--accent);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.site-nav-brand-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-nav-external {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav-external:hover {
  color: var(--text);
}

.site-nav-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.site-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.5rem;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: center;
}

@media (min-width: 500px) {
  .site-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .site-footer-links {
    justify-content: flex-end;
  }
}

.site-footer-links a,
.footer-link-button {
  color: var(--muted);
  font-size: 0.8rem;
}

.footer-link-button {
  display: none;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.analytics-settings-available .footer-link-button {
  display: inline;
}

.footer-link-button:hover {
  background: transparent;
  color: var(--text);
}

.analytics-consent {
  position: fixed;
  z-index: 1000;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 36px rgb(0 0 0 / 18%);
  gap: 1rem;
  align-items: center;
}

.analytics-consent-copy {
  flex: 1;
}

.analytics-consent-copy p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.analytics-consent-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
}

.analytics-consent-actions button {
  width: auto;
  min-height: 2.5rem;
  padding: 0.5rem 0.8rem;
  font-size: 0.82rem;
}

.analytics-consent-actions .analytics-consent-decline {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

@media (max-width: 600px) {
  .analytics-consent {
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
  }

  .analytics-consent-actions button {
    flex: 1;
  }
}

.site-footer-external {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.external-icon {
  font-size: 0.75em;
}

.site-footer-copyright {
  color: var(--muted);
  font-size: 0.75rem;
  margin: 0;
}

/* Dark palette. theme.js stamps data-theme before first paint, so the attribute rule is what
   normally applies; the media query below it is the no-JavaScript fallback. The two token
   lists must stay in sync — change one, change the other. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17181a;
  --surface: #1e2023;
  --text: #f1efe9;
  --muted: #9a978c;
  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-soft: #1e2a3f;
  --border: #34373a;
  --danger: #e2795a;
  --input-bg: #1c1f23;
  --grid-dot: rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] .qr-image {
  background: white;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17181a;
    --surface: #1e2023;
    --text: #f1efe9;
    --muted: #9a978c;
    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-soft: #1e2a3f;
    --border: #34373a;
    --danger: #e2795a;
    --input-bg: #1c1f23;
    --grid-dot: rgba(255, 255, 255, 0.05);
  }

  :root:not([data-theme="light"]) .qr-image {
    background: white;
  }
}

.legal-updated {
  margin-top: -0.9rem;
  margin-bottom: 1.5rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.breadcrumbs {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li + li::before {
  margin-right: 0.35rem;
  color: var(--muted);
  content: "/";
}

.breadcrumbs a,
.related-pages a {
  color: var(--accent);
}

.seo-cta {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--accent-soft);
}

.related-pages-list {
  display: grid;
  gap: 0.55rem;
  margin: 0.8rem 0 0;
  padding-left: 1.2rem;
}

.legal-draft-notice {
  margin: 0 0 1.25rem;
}

.legal-section h2 {
  margin: 0 0 0.7rem;
  font-size: 1.08rem;
}

.legal-section > h2:not(:first-child) {
  margin-top: 1.7rem;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-definition-list {
  padding: 0;
  overflow: hidden;
}

.legal-definition-list > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.7fr);
  border-top: 1px solid var(--border);
}

.legal-definition-list > div:first-child {
  border-top: none;
}

.legal-definition-list dt,
.legal-definition-list dd {
  margin: 0;
  padding: 0.9rem 1rem;
  overflow-wrap: anywhere;
}

.legal-definition-list dt {
  background: var(--accent-soft);
  font-size: 0.85rem;
  font-weight: 700;
}

.legal-definition-list dd {
  color: var(--text);
  font-size: 0.9rem;
}

.privacy-definition-list {
  margin: 0.8rem 0 1rem;
}

.privacy-table-wrap {
  overflow-x: auto;
}

.privacy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.privacy-table th,
.privacy-table td {
  min-width: 9rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.privacy-table th {
  background: var(--accent-soft);
}

.auth-main {
  max-width: 480px !important;
}

.page-heading {
  margin-bottom: 1.5rem;
}

.page-heading--with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.page-heading--centered {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.page-heading h1 {
  margin-bottom: 0.45rem;
}

.page-heading .lead {
  margin-bottom: 0;
}

.page-heading-action {
  flex: 0 0 auto;
}

.eyebrow {
  margin: 0 0 0.25rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-heading {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
}

.card-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-complete-card {
  max-width: 560px;
  margin: 3rem auto;
  text-align: center;
}

.auth-complete-card .lead {
  margin-bottom: 1.25rem;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--button-bg);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--button-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.button-link:hover {
  background: var(--button-bg-hover);
  color: var(--button-text);
  text-decoration: none;
}

.button-link:focus-visible,
.text-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.button-link--secondary {
  border-color: var(--border);
  background: var(--surface);
  color: var(--accent);
}

.button-link--secondary:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.button-link--full {
  width: 100%;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.text-link {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
}

.auth-cta {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.auth-cta a {
  color: var(--accent);
}

.auth-card {
  margin-right: auto;
  margin-left: auto;
}

.auth-card .lead {
  margin-bottom: 1.25rem;
}

.auth-card .notice {
  margin-top: 1rem;
}

.dashboard-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-summary-grid .card {
  margin-bottom: 0;
}

.dashboard-card-heading,
.qr-card-header,
.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.dashboard-plan-card {
  display: flex;
  flex-direction: column;
}

.dashboard-plan-card .button-row {
  margin-top: auto;
  padding-top: 1rem;
}

.plan-badge,
.qr-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.plan-badge--pro {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.usage-number {
  margin: 0.15rem 0 0.4rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.usage-limit {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
}

.subscription-status {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 0.85rem;
}

.claim-panel {
  margin-bottom: 1.75rem;
}

.claim-panel summary,
.qr-target-editor summary {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.claim-panel-body {
  padding-top: 1rem;
}

.claim-panel form {
  margin-top: 1rem;
}

.dashboard-list-section {
  margin-top: 0.5rem;
}

.section-header {
  align-items: flex-end;
  margin-bottom: 0.75rem;
}

.section-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.dashboard-qr-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.dashboard-qr-list .qr-card {
  height: 100%;
  margin-bottom: 0;
}

.qr-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.qr-card-title {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.qr-status {
  flex: 0 0 auto;
  color: #22733d;
}

.qr-status--inactive {
  color: var(--danger);
}

.qr-card-field {
  margin-top: 1rem;
}

.qr-card-field .field-label {
  margin: 0 0 0.25rem;
}

.qr-card-field .target-url {
  margin: 0;
}

.qr-short-url {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.qr-short-url a {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.copy-button {
  flex: 0 0 auto;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  white-space: nowrap;
}

.copy-button:hover {
  background: var(--accent);
  color: var(--surface);
}

.qr-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.qr-metric {
  min-width: 0;
}

.qr-metric-label,
.qr-metric-value {
  display: block;
}

.qr-metric-label {
  color: var(--muted);
  font-size: 0.68rem;
}

.qr-metric-value {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.8rem;
}

.qr-retention,
.qr-upgrade-hint {
  margin: 0.8rem 0 0;
}

.qr-target-editor {
  margin-top: 1rem;
}

.qr-analytics-panel {
  margin-top: 1rem;
}

.qr-analytics-panel > summary {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.qr-analytics-panel-body {
  padding-top: 0.75rem;
}

.qr-analytics-panel-body .hint {
  margin: 0;
  font-size: 0.82rem;
}

.dashboard-analytics-chart {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 7rem;
  margin: 0.8rem 0;
  padding: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
}

.dashboard-analytics-bar-wrap {
  display: flex;
  flex: 1 1 1px;
  align-items: flex-end;
  min-width: 1px;
  height: 100%;
}

.dashboard-analytics-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

.dashboard-analytics-data {
  margin-top: 0.5rem;
}

.dashboard-analytics-data > summary {
  cursor: pointer;
}

.dashboard-analytics-data-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.3rem 0.75rem;
  margin: 0.65rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.qr-target-form {
  margin-top: 0.75rem;
}

.qr-target-form .error {
  margin: 0.1rem 0 0;
}

.qr-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
}

.billing-toggle {
  display: flex;
  gap: 0.25rem;
  width: fit-content;
  margin: 0 auto 1.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.billing-toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.billing-toggle-option:hover {
  color: var(--text);
}

.billing-toggle-option.is-selected {
  background: var(--accent);
  color: var(--button-text);
}

.billing-toggle-badge {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
}

.billing-toggle-option.is-selected .billing-toggle-badge {
  background: rgba(255, 255, 255, 0.22);
  color: var(--button-text);
}

.pricing-price-note {
  margin: -0.25rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 780px;
  margin: 0 auto 1.25rem;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.pricing-card--featured {
  border: 2px solid var(--accent);
}

.pricing-recommendation {
  position: absolute;
  top: -0.75rem;
  right: 1rem;
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
}

.pricing-name {
  margin: 0;
  font-size: 1.3rem;
}

.pricing-price {
  margin: 0.5rem 0;
  line-height: 1;
}

.pricing-price span {
  font-size: 2rem;
  font-weight: 700;
}

.pricing-price small {
  color: var(--muted);
  font-size: 0.8rem;
}

.feature-list {
  display: grid;
  gap: 0.55rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: 0.88rem;
}

.feature-list li {
  position: relative;
  padding-left: 1.35rem;
}

.feature-list li::before {
  position: absolute;
  left: 0;
  color: var(--accent);
  content: "✓";
  font-weight: 700;
}

.pricing-card .button-link,
.pricing-card #pricing-action {
  margin-top: auto;
}

.plan-highlight {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
  color: var(--muted);
  font-size: 0.78rem;
}

.plan-highlight strong {
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1.2;
}

.plan-highlight--pro {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: var(--accent-soft);
}

.plan-highlight--pro strong {
  color: var(--accent);
}

.feature-list--plan {
  margin: 1rem 0 1.25rem;
}

.feature-list--plan li {
  line-height: 1.5;
}

.plan-comparison {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  overflow: hidden;
}

.plan-comparison-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1rem;
}

.plan-comparison-heading > p {
  max-width: 18rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}

.plan-comparison-scroll {
  overflow-x: auto;
  border-top: 1px solid var(--border);
}

.plan-comparison table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.plan-comparison th,
.plan-comparison td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.plan-comparison thead th {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.plan-comparison tbody th {
  width: 32%;
  font-weight: 600;
}

.plan-comparison tbody tr:last-child th,
.plan-comparison tbody tr:last-child td {
  border-bottom: 0;
}

.plan-comparison-pro {
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
}

.plan-comparison thead .plan-comparison-pro {
  color: var(--accent);
}

.comparison-yes,
.comparison-no {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
}

.comparison-yes {
  background: var(--accent);
  color: var(--surface);
}

.comparison-no {
  border: 1px solid var(--border);
  color: var(--muted);
}

.pricing-notes {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
}

.pricing-waitlist {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
}

.feature-list--compact {
  margin: 0.8rem 0;
}

.notice--error {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 11%, var(--surface));
}

.notice--success {
  border-color: #22733d;
  background: color-mix(in srgb, #22733d 11%, var(--surface));
}

.site-nav-links {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
}

.site-nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.site-nav-sign-out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.site-nav-sign-out svg {
  width: 17px;
  height: 17px;
}

.site-nav-sign-out:hover {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
}

.site-nav-sign-out:disabled {
  opacity: 0.5;
}

/* Phones only — desktop keeps the horizontal header nav. */
.mobile-tabbar {
  display: none;
}

/* Redundant on desktop, where 料金 is still a header link. */
.site-footer-mobile-only {
  display: none;
}

/* Hidden until theme.js stamps data-theme, so a no-JavaScript visitor is not shown a dead
   control they cannot use. */
.hero-reassurance {
  display: none;
}

.theme-toggle {
  display: none;
}

:root[data-theme] .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.theme-toggle:hover {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

/* Each theme offers the one you would switch to. */
:root[data-theme="dark"] .theme-icon-moon,
:root[data-theme="light"] .theme-icon-sun {
  display: none;
}

.site-nav-login {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-weight: 700;
}

.site-nav-login svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

/* The person icon is the control at every width; the accessible name lives on the link's
   aria-label, and the destination page is titled ログイン. */
.site-nav-login-text {
  display: none;
}

.site-nav-login:hover {
  color: var(--accent-hover);
}

@media (max-width: 700px) {
  .app-shell-page main.app-main {
    max-width: 600px;
  }

  .dashboard-summary-grid,
  .pricing-grid,
  .home-step-list,
  .home-feature-grid,
  .home-scene-grid,
  .home-plan-grid {
    grid-template-columns: 1fr;
  }

  .home-waitlist-row,
  .pricing-waitlist-row {
    align-items: stretch;
    flex-direction: column;
  }

  .home-waitlist-row button,
  .pricing-waitlist-row button {
    width: 100%;
  }

  .dashboard-qr-list {
    grid-template-columns: 1fr;
  }

  .plan-comparison-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .plan-comparison-heading > p {
    max-width: none;
    text-align: left;
  }

  /* The two-column comparison table can't fit a phone screen without hiding the Pro
     column off to the side, so each row becomes its own stacked card instead. */
  .plan-comparison-scroll {
    overflow-x: visible;
  }

  .plan-comparison table {
    min-width: 0;
  }

  /* display: none would drop the scope="col" headers from the accessibility tree, leaving
     screen-reader users unable to tell a value apart from Free vs Pro. Hide them visually
     only, so the real header-to-cell association still reaches assistive tech. */
  .plan-comparison thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .plan-comparison tbody tr {
    --row-padding-x: 1rem;
    --row-padding-bottom: 0.85rem;
    display: block;
    padding: 0.85rem var(--row-padding-x) var(--row-padding-bottom);
    border-bottom: 1px solid var(--border);
  }

  .plan-comparison tbody tr:last-child {
    border-bottom: 0;
  }

  .plan-comparison th,
  .plan-comparison td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  .plan-comparison tbody th {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
  }

  .plan-comparison td {
    padding: 0.4rem 0;
  }

  .plan-comparison td + td {
    margin-top: 0.25rem;
  }

  .plan-comparison td[data-label]::before {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    content: attr(data-label);
  }

  .plan-comparison-pro {
    margin: 0.15rem calc(-1 * var(--row-padding-x)) calc(-1 * var(--row-padding-bottom));
    padding: 0.6rem var(--row-padding-x) var(--row-padding-bottom) !important;
    border-radius: 0 0 8px 8px;
  }

  .use-case-tip-grid {
    grid-template-columns: 1fr;
  }

  .use-case-cta {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  main {
    padding: 0.9rem 0.75rem 1.25rem;
  }

  /* iOS Safari zooms the whole page when a focused field's text is under 16px, which threw
     the layout around every time someone tapped a result URL to copy it by hand. */
  .copy-row input {
    min-height: 2.75rem;
    font-size: 1rem;
  }

  .copy-row button,
  .mode-tab {
    min-height: 2.75rem;
  }

  #download-link,
  #text-download-link {
    width: 100%;
  }

  /* Still under the 44px ideal, but an invisible larger hit area here would sit on top of the
     URL field directly above it and swallow taps meant for the input. */
  .hint-trigger {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.85rem;
  }

  .viewfinder-frame {
    padding: 0;
    margin-bottom: 1rem;
  }

  .viewfinder-frame .card {
    padding: 1.1rem 1rem;
  }

  .viewfinder-frame::before,
  .viewfinder-frame::after,
  .viewfinder-frame .corner-bl {
    display: none;
  }

  .tool-heading {
    margin-bottom: 0.9rem;
  }

  .tool-heading h1 {
    font-size: 1.22rem;
  }

  .mode-tabs {
    margin-bottom: 0.9rem;
  }

  .advanced-options > summary {
    min-height: 2.9rem;
  }

  .legal-definition-list > div {
    grid-template-columns: 1fr;
  }

  .legal-definition-list dt,
  .legal-definition-list dd {
    padding: 0.7rem 0.85rem;
  }

  .page-heading--with-action {
    flex-direction: column;
  }

  .page-heading-action {
    width: 100%;
  }

  h1 {
    font-size: 1.3rem;
  }

  .generator-eyebrow,
  .generator-description {
    display: block;
  }

  .generator-eyebrow {
    margin: 0 0 0.35rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .generator-description {
    margin: -0.35rem 0 1rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .home-section {
    padding: 1.2rem;
  }

  /* The four page links live in the bottom tab bar on phones, so the header collapses to a
     single row: identity on the left, account state on the right. */
  .site-nav-inner {
    align-items: center;
    padding: 0.7rem 1rem;
  }

  .site-nav-page-link {
    display: none;
  }

  .site-footer-mobile-only {
    display: inline;
  }

  .site-nav-login svg {
    width: 22px;
    height: 22px;
  }

  .hero-reassurance {
    display: block;
    margin: -0.6rem 0 1rem;
    color: var(--muted);
    font-size: 0.85rem;
  }

  .site-nav-links {
    max-width: none;
    justify-content: flex-end;
    gap: 0.4rem 0.7rem;
  }

  .mobile-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 3.25rem;
    padding: 0.4rem 0.25rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
  }

  .mobile-tabbar a[aria-current="page"] {
    color: var(--accent);
  }

  .mobile-tabbar svg {
    width: 22px;
    height: 22px;
  }

  /* Keep the fixed bar from covering the end of the page. */
  body {
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }

  .site-nav-external {
    font-size: 0.74rem;
  }

  .site-nav-auth {
    gap: 0.55rem;
  }

  .qr-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .site-nav-inner {
    max-width: 1080px;
  }
}