@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* Light palette: bright background, white panels, navy text, green actions, yellow highlights */
:root {
  --ink: #F8FAFC;          /* page background */
  --panel: #FFFFFF;        /* cards and panels */
  --line: #E2E8F0;         /* borders */
  --text: #142033;         /* main text */
  --muted: #4A5A72;        /* secondary text */
  --green: #4F46E5;        /* brand indigo: buttons, focus (name kept for older rules) */
  --green-bright: #4F46E5; /* brand accent text */
  --caption: #F3C64B;      /* "Most popular" tag */
  --border-subtle: rgba(15, 27, 45, 0.08);
  --shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 8px 24px rgba(15, 27, 45, 0.06);
  /* Brand gradient: indigo -> violet (white text on it passes contrast) */
  --grad-brand: linear-gradient(135deg, #4F46E5 0%, #6D3FE6 50%, #7C3AED 100%);
  /* One colour per idea */
  --c-green: #15803D;  --c-green-soft: #E8F7EE;
  --c-amber: #B45309;  --c-amber-soft: #FEF3E2;
  --c-blue: #2563EB;   --c-blue-soft: #EAF1FF;
  --c-violet: #7C3AED; --c-violet-soft: #F2EDFF;
  --c-indigo: #4F46E5; --c-indigo-soft: #EEF2FF;
  --c-emerald: #047857; --c-emerald-soft: #E6F6EF;
}

/* Keep the page exactly centred in the window. Windows scrollbars take ~15px on the
   right only, so the same space is added on the left (0px on phones / Mac overlay scrollbars). */
html { padding-left: calc(100vw - 100%); }
/* Let the full-width top bar and footer also cover that left strip */
#navbar::before, footer::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 40px;
  background-color: inherit; border: 0 solid; border-color: inherit;
}
#navbar::before { border-bottom-width: 1px; bottom: -1px; }
footer::before { border-top-width: 1px; top: -1px; }

body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background-color: var(--ink);
  /* One soft indigo / violet / pink glow behind the hero; the rest of the page stays clean */
  background-image:
    radial-gradient(1100px 620px at 50% -220px, rgba(99, 102, 241, 0.20), transparent 70%),
    radial-gradient(700px 480px at 12% 8%, rgba(139, 92, 246, 0.12), transparent 70%),
    radial-gradient(640px 440px at 90% 10%, rgba(236, 72, 153, 0.09), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Logo: rounded icon tile (as in the original design), in the new green */
.logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--grad-brand);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.30);
}
.logo-tile svg { color: #FFFFFF; fill: #FFFFFF; }
.logo-tile { box-shadow: 0 4px 14px rgba(79, 70, 229, 0.30); }
.logo-tile--small { width: 22px; height: 22px; border-radius: 7px; box-shadow: none; }

/* Hero */
.caption-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 0 24px;   /* a little more room between the headline panel and the text below */
}
/* One even panel behind the whole headline */
.hero-title {
  margin: 0;
  display: inline-block;
  max-width: 100%;
  padding: 0.45em 0.8em;
  border-radius: 20px;
  /* Rich indigo -> violet panel so the headline is the focal point */
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(165, 180, 252, 0.35), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(240, 171, 252, 0.28), transparent 55%),
    linear-gradient(135deg, #312E81 0%, #4338CA 45%, #6D28D9 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 8px 20px rgba(67, 56, 202, 0.18);
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.65rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* "YouTube" in true YouTube red on a white highlight (red on indigo would be unreadable).
   Only the word is styled - never YouTube's logo or play button. */
.hl-youtube {
  color: #FF0000;
  background: #FFFFFF;
  padding: 0 0.22em;
  border-radius: 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}   /* the word only - never YouTube's logo or play button */
/* Brand gradient on the key words (large text, readable at 3:1+) */
.hl-green {
  background: linear-gradient(90deg, #A5F3FC, #C7D2FE 45%, #F0ABFC);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The workspace sits on the page like a frame, not a floating glass card */
.workspace {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0F1B2D;
  text-align: center;
}

/* Hero pill: the "zero wasted credits" promise */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  color: var(--green-bright);
  margin-bottom: 6px;
}
.hero-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: #10B981; }

/* Feature cards: coloured icon tile + "Learn more" details */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
/* Each feature card carries its colour on the top edge and "Learn more" link */
.feature-card.accent-indigo  { --accent: var(--c-indigo); }
.feature-card.accent-emerald { --accent: var(--c-emerald); }
.feature-card.accent-amber  { --accent: var(--c-amber); }
.feature-card.accent-blue   { --accent: var(--c-blue); }
.feature-card.accent-violet { --accent: var(--c-violet); }
.feature-card { box-shadow: inset 0 3px 0 var(--accent, var(--green)), var(--shadow); }
.feature-card:hover { border-color: var(--accent, var(--green-bright)); }
.feature-card .feature-more { color: var(--accent, var(--green-bright)); }
.feature-more { margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 600; color: var(--green-bright); }
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid transparent;
}
/* Details list inside the "Learn more" popup */
.feature-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feature-points li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.feature-points strong { color: #0F1B2D; font-weight: 600; }

.tile-indigo  { color: var(--c-indigo);  background: var(--c-indigo-soft);  border-color: #C7D2FE; }
.tile-emerald { color: var(--c-emerald); background: var(--c-emerald-soft); border-color: #B5E3CC; }
.tile-yellow { color: var(--c-amber);  background: var(--c-amber-soft);  border-color: #F8D9A8; }
.tile-blue   { color: var(--c-blue);   background: var(--c-blue-soft);   border-color: #C6D8FD; }
.tile-violet { color: var(--c-violet); background: var(--c-violet-soft); border-color: #DCCFFD; }

/* How it works: three numbered boxes */
.steps { list-style: none; padding: 0; margin: 0; }
.step-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.step-box-num {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--step, #8FCFAF);
  margin-bottom: 4px;
}
.step-indigo { --step: var(--c-indigo); background: linear-gradient(180deg, var(--c-indigo-soft), #FFFFFF 55%); }
.step-blue   { --step: var(--c-blue);   background: linear-gradient(180deg, var(--c-blue-soft), #FFFFFF 55%); }
.step-violet { --step: var(--c-violet); background: linear-gradient(180deg, var(--c-violet-soft), #FFFFFF 55%); }

/* "Most popular" tag in caption yellow */
.plan-tag { background: var(--caption); color: var(--ink); }

/* Download options: one slim row under the link box */
.dl-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px; padding: 8px 12px; border-radius: 12px;
  background: #F8FAFF; border: 1px solid #E5E9F7;
}
.dl-block { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dl-heading { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dl-panel .format-chip { height: 28px; padding: 0 11px; font-size: 12px; }
.ts-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.ts-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ts-switch {
  position: relative; flex-shrink: 0; width: 32px; height: 18px; border-radius: 999px;
  background: #CBD5E1; transition: background 0.15s ease;
}
.ts-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 27, 45, 0.25); transition: transform 0.15s ease;
}
.ts-check:checked + .ts-switch { background: var(--grad-brand); }
.ts-check:checked + .ts-switch::after { transform: translateX(14px); }
.ts-check:focus-visible + .ts-switch { outline: 2px solid var(--green); outline-offset: 2px; }
.ts-text { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1.3; }
.ts-title { font-size: 12.5px; font-weight: 600; color: #0F1B2D; }
.ts-hint { font-size: 11.5px; color: var(--muted); }
.ts-toggle.is-disabled { cursor: not-allowed; }
.ts-toggle.is-disabled .ts-switch, .ts-toggle.is-disabled .ts-title { opacity: 0.45; }
/* Format and Timestamps always share one line on tablets and computers */
@media (min-width: 640px) { .dl-panel { flex-wrap: nowrap; } .dl-block { flex-wrap: nowrap; } .ts-toggle { flex-shrink: 0; } }
@media (min-width: 640px) and (max-width: 899px) { .ts-hint { display: none; } }
@media (max-width: 639px) { .dl-panel { padding: 10px; } .ts-toggle { width: 100%; } }

/* Currency bar (centred above the price cards) and local-price pill */
.currency-bar {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 8px 10px 8px 14px; border-radius: 999px; background: #FFFFFF;
  border: 1px solid #C7D2FE; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
}
.currency-label { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  font-size: 13.5px; font-weight: 600; color: #0F1B2D; }
.currency-select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--green-bright);
  background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 999px;
  padding: 6px 12px; max-width: 240px; cursor: pointer; outline: none;
}
.currency-select:hover { border-color: var(--green-bright); }
.local-price:not(.hidden) {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 4px 10px; border-radius: 999px; background: #EEF2FF; border: 1px solid #C7D2FE;
  color: #3730A3; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.local-price .lp-note { font-weight: 400; color: var(--muted); margin-left: 4px; font-size: 11.5px; }

/* Support: floating button, contact popup, inline button */
.support-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--grad-brand); color: #FFFFFF; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.30); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.support-fab:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(79, 70, 229, 0.38); }
@media (max-width: 640px) { .support-fab { right: 12px; bottom: 12px; width: 46px; height: 46px; padding: 0; justify-content: center; } .support-fab span { display: none; } }
.contact-email-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px 10px 14px; border-radius: 12px; background: #F5F7FF; border: 1px solid #E0E7FF;
  font-size: 14px; font-weight: 600; color: #0F1B2D;
}
.contact-copy, .contact-inline-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  background: #FFFFFF; color: var(--green-bright); border: 1px solid #C7D2FE;
}
.contact-copy:hover, .contact-inline-btn:hover { background: #EEF2FF; }
.contact-app {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--grad-brand); color: #FFFFFF; transition: filter 0.15s ease;
}
.contact-app:hover { filter: brightness(1.08); }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Interactive Pill Tab Classes */
.tab-pill {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.tab-pill.active {
  background: var(--grad-brand) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.tab-pill:not(.active):hover {
  color: #0F1B2D;
  background: rgba(15, 27, 45, 0.04);
}

/* Format Chip Classes */
.format-chip {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  color: var(--muted);
  background: #FFFFFF;
  border: 1px solid var(--line);
  cursor: pointer;
}

.format-chip.active {
  background: #EEF2FF !important;
  color: var(--green-bright) !important;
  border-color: var(--green-bright) !important;
  box-shadow: none !important;
}

.format-chip:not(.active):hover {
  border-color: #94A3B8;
  color: #0F1B2D;
}

/* Custom Scrollbars */
#raw-text-display::-webkit-scrollbar,
#segments-display::-webkit-scrollbar {
  width: 6px;
}
#raw-text-display::-webkit-scrollbar-track,
#segments-display::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 4px;
}
#raw-text-display::-webkit-scrollbar-thumb,
#segments-display::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
#raw-text-display::-webkit-scrollbar-thumb:hover,
#segments-display::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}
/* Light theme: text on green buttons, the "Most popular" tag and the active tab stays white */
.bg-sky-500, .bg-sky-600, .hover\:bg-sky-600:hover, .tab-pill.active { color: #FFFFFF !important; }
.bg-sky-500 svg, .bg-sky-600 svg { color: #FFFFFF; }
/* Dialog and dropdown cards get a soft shadow on the light background */
#auth-modal-overlay > div, #feature-modal > div, #user-dropdown { box-shadow: 0 24px 60px rgba(15, 27, 45, 0.18); }

/* Main buttons: brand gradient */
.bg-sky-500 { background-image: var(--grad-brand); }
.bg-sky-500:hover, .bg-sky-600:hover { filter: brightness(0.94); }

/* Tinted full-width bands behind some sections */
.band { position: relative; isolation: isolate; padding-top: 56px; padding-bottom: 56px; }
.band::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
}
/* A clean white band with hairline borders */
.band-white::before { background: #FFFFFF; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Pricing: a colour per pack (top band, price, button) */
.pricing-card { background: #FFFFFF; border: 1px solid var(--line); box-shadow: inset 0 4px 0 var(--plan), var(--shadow); }
.plan-blue   { --plan: var(--c-blue);   --plan-soft: var(--c-blue-soft); }
.plan-indigo { --plan: var(--c-indigo); --plan-soft: var(--c-indigo-soft); }
.plan-violet { --plan: var(--c-violet); --plan-soft: var(--c-violet-soft); }
.pricing-card h3 { color: var(--plan); }
.pricing-card.selected { border-color: var(--plan); box-shadow: inset 0 4px 0 var(--plan), 0 0 0 2px var(--plan), 0 18px 40px rgba(15, 27, 45, 0.10); }
.pricing-card .checkout-btn:not(.bg-sky-500) { background: var(--plan-soft); color: var(--plan) !important; border-color: transparent; }
.pricing-card .checkout-btn:not(.bg-sky-500):hover { filter: brightness(0.96); }
/* Same pack colours inside the "Get more credits" popup */
#pricing-modal [data-plan="starter"]:not(.bg-sky-500) { background: var(--c-blue-soft); color: var(--c-blue) !important; }
#pricing-modal [data-plan="pro"]:not(.bg-sky-500)     { background: var(--c-violet-soft); color: var(--c-violet) !important; }

/* Hero pill with a soft gradient border */
.hero-pill {
  border: 1px solid transparent;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, #818CF8, #A78BFA, #F0ABFC) border-box;
}

/* One font family: hierarchy comes from weight only.
   Bold = headings & prices, semibold = titles, buttons & highlights, regular = body. */
.font-mono { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.step-box-num { font-weight: 600; letter-spacing: -0.01em; }
#raw-text-display, #segments-display { font-family: 'IBM Plex Sans', system-ui, sans-serif; line-height: 1.7; }

/* Contact page */
.nav-current { color: var(--green-bright); font-weight: 600; }
.contact-title { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; color: #0F1B2D; }
.contact-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px;
  box-shadow: inset 0 3px 0 var(--c-indigo), var(--shadow); scroll-margin-top: 90px;
}
.contact-card.flash { animation: card-flash 1.2s ease; }
@keyframes card-flash { 0% { box-shadow: inset 0 3px 0 var(--c-indigo), 0 0 0 4px #C7D2FE; } 100% { box-shadow: inset 0 3px 0 var(--c-indigo), var(--shadow); } }
.topic-select {
  width: 100%; font: inherit; font-size: 14px; color: #0F1B2D; background: #FFFFFF;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none; cursor: pointer;
}
.topic-select:focus { border-color: var(--green-bright); }
.help-card { cursor: default; }
.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.help-list li {
  position: relative; padding: 8px 10px 8px 28px; border-radius: 10px; background: #F8FAFC;
  border: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--muted);
}
.help-list li::before {
  content: ""; position: absolute; left: 11px; top: 14px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, var(--green-bright));
}
.topic-btn { text-align: left; background: none; border: 0; cursor: pointer; padding-left: 0; }
.topic-btn:hover { text-decoration: underline; }
.safety-box {
  display: flex; gap: 12px; padding: 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
}

/* Toolbar: Single/Bulk tabs on the left, Format + Timestamps on the right (same line on computers) */
.tool-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.tool-row .dl-panel { background: transparent; border: 0; padding: 0; }
.tool-row .ts-toggle { padding-left: 14px; border-left: 1px solid var(--line); }
/* Short note shown under the word "Timestamps" */
.tool-row .ts-text { flex-direction: column; align-items: flex-start; gap: 1px; }
.tool-row .ts-hint { font-size: 11px; white-space: nowrap; }
.tool-row .dl-block { gap: 6px 8px; }
.tool-row .dl-panel { gap: 10px 12px; }
.tool-row .format-chip { padding: 0 9px; }
.tool-row .ts-toggle { padding-left: 12px; }
@media (min-width: 1024px) { .tool-row .tab-pill { padding: 0 14px; } }
/* Not enough room next to the tabs: options move to their own line, in a soft panel */
@media (max-width: 1023px) {
  .tool-row .dl-panel { width: 100%; background: #F8FAFF; border: 1px solid #E5E9F7; padding: 8px 12px; }
}
@media (max-width: 639px) { .tool-row .dl-panel { padding: 10px; } .tool-row .ts-toggle { border-left: 0; padding-left: 0; } }

/* Room under the footer links so the floating Support button never covers them */
footer { padding-bottom: 80px !important; }

/* "New" badge for new features (playlists) */
.new-pill {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; vertical-align: 1px;
  color: #FFFFFF; background: var(--grad-brand);
}

/* Choice popup (playlist / channel questions) */
.choice-btn {
  padding: 10px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  background: #FFFFFF; color: #0F1B2D; border: 1px solid var(--line);
}
.choice-btn:hover { border-color: #C7D2FE; background: #F5F7FF; }
.choice-btn--primary { background: var(--grad-brand); color: #FFFFFF; border-color: transparent; }
.choice-btn--primary:hover { filter: brightness(1.06); background: var(--grad-brand); }
.choice-number {
  width: 100%; font: inherit; font-size: 15px; color: #0F1B2D; background: #FFFFFF;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none;
}
.choice-number:focus { border-color: var(--green-bright); }

/* "New" announcement next to the hero pill */
.hero-pill--new { color: #0F1B2D; text-decoration: none; }
.hero-pill--new:hover { box-shadow: 0 2px 10px rgba(79, 70, 229, 0.15); }

/* Announcement bar at the very top: messages scroll slowly sideways, pause on hover */
.announce-bar {
  position: relative; z-index: 41; display: flex; align-items: center; height: 38px;
  background: linear-gradient(90deg, #1E1B4B, #312E81 50%, #4C1D95);
  color: #E0E7FF; font-size: 13px; overflow: hidden;
  box-shadow: -40px 0 0 #1E1B4B;   /* also covers the small strip kept for the scrollbar on Windows */
}
.announce-viewport {
  flex: 1; overflow: hidden; height: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.announce-track { display: flex; width: max-content; height: 100%; animation: announce-scroll var(--announce-duration, 45s) linear infinite; }
.announce-bar:hover .announce-track, .announce-bar:focus-within .announce-track { animation-play-state: paused; }
.announce-items { display: flex; align-items: center; gap: 28px; padding-right: 28px; height: 100%; white-space: nowrap; }
.announce-item { display: inline-flex; align-items: center; gap: 8px; }
.announce-item::after { content: "•"; margin-left: 28px; color: #818CF8; }
.announce-tag {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  color: #1E1B4B; background: #FDE68A;
}
.announce-tag--soft { color: #E0E7FF; background: rgba(255, 255, 255, 0.14); }
.announce-close {
  flex-shrink: 0; width: 38px; height: 38px; font-size: 18px; line-height: 1;
  color: #C7D2FE; background: transparent; border: 0; cursor: pointer;
}
.announce-close:hover { color: #FFFFFF; }
@keyframes announce-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .announce-track { animation: none !important; }
}

/* "Coming soon" notes (AI transcripts for videos without captions) */
.soon-pill {
  display: inline-flex; align-items: center; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; vertical-align: 1px; color: #6D28D9; background: #F2EDFF; border: 1px solid #DCCFFD;
}
.soon-note { font-size: 12px; color: var(--muted); padding-top: 6px; border-top: 1px dashed var(--line); }
.soon-note .soon-pill { margin-left: 0; margin-right: 4px; }
.soon-callout {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(135deg, #F5F3FF, #FFFFFF 60%); border: 1px dashed #C4B5FD;
}
.announce-tag--soon { color: #FFFFFF; background: #7C3AED; }

/* Scrolling to results: leave room for the sticky top bar, and glow briefly to catch the eye */
#results-section, #transcript-viewer, #no-transcript-card { scroll-margin-top: 92px; }
.results-flash { animation: results-flash 1.6s ease-out; border-radius: 16px; }
@keyframes results-flash {
  0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
  25%  { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

/* "Coming soon" box: the same space above and below it (64px) */
#features > .grid { margin-bottom: 0 !important; }
#features > .soon-callout { margin-top: 64px !important; }
#features { margin-bottom: 0 !important; }
#how-it-works { margin-top: 64px !important; }

/* On/off switch (account menu: news & offers emails) */
.toggle-pill { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(148,163,184,.35); transition: background .2s; flex-shrink: 0; }
.toggle-pill > span { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle-pill.is-on { background: #4F46E5; }
.toggle-pill.is-on > span { transform: translateX(12px); }

/* Privacy Policy & Terms pages */
.legal-doc { font-size: 15px; line-height: 1.7; color: #33445C; }
.legal-doc h2 { font-size: 1.15rem; font-weight: 700; color: #0F1B2D; margin: 2rem 0 0.6rem; scroll-margin-top: 90px; letter-spacing: -0.01em; }
.legal-doc h2:first-of-type { margin-top: 1.5rem; }
.legal-doc p { margin: 0 0 0.8rem; }
.legal-doc strong { color: #0F1B2D; font-weight: 600; }
.legal-doc a { color: #4F46E5; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.legal-doc ul { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 6px; }
.legal-doc ul li { position: relative; padding-left: 1.25rem; }
.legal-doc ul li::before { content: ""; position: absolute; left: 0.25rem; top: 0.68em; width: 6px; height: 6px; border-radius: 50%; background: #4F46E5; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 1.25rem; border-bottom: 1px solid #E2E8F0; }
.legal-toc a { font-size: 12.5px; font-weight: 600; color: #33445C; text-decoration: none; background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 999px; padding: 5px 12px; }
.legal-toc a:hover { color: #4F46E5; border-color: #C7D2FE; background: #EEF2FF; }
.legal-contact { margin-top: 2rem; padding: 14px 16px; border-radius: 12px; background: #EEF2FF; border: 1px solid #C7D2FE; font-size: 14px; color: #33445C; }

/* SEO guide pages (playlist / channel / Excel) */
.guide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 6px; }
.guide-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 10px;
  color: #33445C; background: #FFFFFF; border: 1px solid #E2E8F0; text-decoration: none; transition: border-color .15s, color .15s, box-shadow .15s; }
.guide-btn:hover { color: #4F46E5; border-color: #C7D2FE; }
.guide-btn--primary { color: #FFFFFF; border-color: transparent; background: var(--grad-brand); box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28); }
.guide-btn--primary:hover { color: #FFFFFF; box-shadow: 0 8px 22px rgba(79, 70, 229, 0.38); }
.guide-links { display: grid; gap: 10px; }
.guide-link { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: #FFFFFF; border: 1px solid #E2E8F0; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.guide-link:hover { border-color: #C7D2FE; box-shadow: 0 6px 18px rgba(79, 70, 229, 0.10); }
.guide-link-kicker { grid-column: 1; font-size: 11.5px; font-weight: 600; color: #4F46E5; text-transform: uppercase; letter-spacing: .04em; }
.guide-link-title { grid-column: 1; font-size: 15px; font-weight: 600; color: #0F1B2D; margin-top: 2px; }
.guide-link-arrow { grid-column: 2; grid-row: 1 / span 2; color: #4F46E5; font-size: 18px; }
.footer-guides { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #E2E8F0; font-size: 12px; color: #4A5A72; }
.footer-guides span { font-weight: 600; }
.footer-guides a { color: #4A5A72; text-decoration: none; }
.footer-guides a:hover { color: #4F46E5; }
#app { scroll-margin-top: 84px; }
/* Tables and date line in the long guide */
.legal-doc table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 1rem; font-size: 14px; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid #E2E8F0; }
.legal-doc th { color: #0F1B2D; font-weight: 600; background: #F8FAFF; }
.legal-doc td:first-child { font-weight: 600; color: #0F1B2D; white-space: nowrap; }
.legal-updated { font-size: 12.5px; color: #5E6E86; margin-bottom: 12px !important; }

/* Caption language picker (next to the input labels) */
.input-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 20px; }
.bulk-head-right { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.lang-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #5E6E86; white-space: nowrap; }
.lang-select { font: inherit; font-size: 12px; font-weight: 600; line-height: 16px; height: 20px; color: #0F1B2D; background: #FFFFFF;
  border: 1px solid #E2E8F0; border-radius: 6px; padding: 0 4px; cursor: pointer; outline: none; max-width: 150px; }
.lang-select:focus { border-color: #4F46E5; }

/* Free preview card (one video without an account) */
.preview-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 18px; padding: 18px 20px; box-shadow: inset 0 3px 0 #4F46E5, 0 10px 30px rgba(15, 27, 45, 0.06); }
.preview-head { display: grid; gap: 3px; margin-bottom: 10px; }
.preview-badge { justify-self: start; font-size: 11.5px; font-weight: 700; color: #4F46E5; background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 999px; padding: 3px 10px; }
.preview-title { font-size: 1.1rem; font-weight: 700; color: #0F1B2D; margin-top: 4px; }
.preview-meta { font-size: 12.5px; color: #5E6E86; }
/* Height follows the window so the buttons below stay on screen on a laptop. */
.preview-text { max-height: clamp(150px, 32vh, 340px); overflow-y: auto; white-space: pre-wrap; font-size: 14px; line-height: 1.7; color: #33445C;
  background: #F8FAFF; border: 1px solid #E5E9F7; border-radius: 12px; padding: 14px 16px; }
.preview-text:empty { display: none; }
.preview-message { font-size: 14px; color: #33445C; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 12px; padding: 12px 14px; }
.preview-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.preview-note { font-size: 12.5px; color: #5E6E86; margin-top: 9px; line-height: 1.45; }
#preview-section { scroll-margin-top: 92px; }
/* Wide tables scroll sideways inside the card on phones instead of stretching the page */
@media (max-width: 640px) {
  .legal-doc table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legal-doc th, .legal-doc td { padding: 8px 10px; min-width: 120px; }
  .legal-doc th:first-child, .legal-doc td:first-child { min-width: 64px; }
}
.preview-turnstile:empty { display: none; }
.preview-turnstile:not(:empty) { margin-top: 12px; }
.cta-free { color: #059669; font-weight: 600; }
.payments-soon { margin: 10px auto 0; max-width: 34rem; font-size: 13px; line-height: 1.5; color: #7C2D12; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 12px; padding: 10px 14px; }
.payments-soon--modal { margin: 0 0 16px; max-width: none; }
.payments-soon strong { color: #7C2D12; }

/* Live progress while a run is going: one compact line in the page's own indigo, sitting
   quietly above the results rather than a heavy dark panel. */
.progress-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
  padding: 9px 18px; border-radius: 999px; background: #EEF2FF; border: 1px solid #C7D2FE; }
.progress-item { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.progress-label { font-size: 12px; font-weight: 500; color: #5E6E86; }
.progress-value { font-size: 14px; font-weight: 700; color: #312E81; font-variant-numeric: tabular-nums; }
.progress-value--good { color: #047857; }
.progress-value--warn { color: #B45309; }

/* The same pill once the run has finished, with the buttons beside it and any wordier
   explanation on its own line underneath so the numbers stay easy to read. */
.results-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.results-summary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.results-summary-note { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.5; color: #5E6E86; }
.summary-btn { padding: .34rem .7rem; border-radius: .5rem; background: #F8FAFF;
  border: 1px solid #C7D2FE; color: #4F46E5; font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.summary-btn:hover { background: #EEF2FF; border-color: #4F46E5; color: #3730A3; }

/* Paste box on the guide pages. Someone arriving from Google can try a video right where
   they landed instead of being sent to the app first. */
.gp-box { max-width: 46rem; margin: 0 auto; padding: 1.35rem 1.4rem 1.2rem;
  border-radius: 1.1rem; background: #EEF2FF; border: 1px solid #C7D2FE; text-align: left; }
.gp-title { font-size: 1rem; font-weight: 700; color: #312E81; margin-bottom: .2rem; }
.gp-sub { font-size: .82rem; color: #5E6E86; margin-bottom: .9rem; line-height: 1.5; }
.gp-form { display: flex; flex-wrap: wrap; gap: .55rem; }
.gp-input { flex: 1 1 18rem; min-width: 0; padding: .72rem .9rem; border-radius: .65rem;
  background: #fff; border: 1px solid #C7D2FE; color: #142033; font-size: .9rem;
  font-family: inherit; }
.gp-input::placeholder { color: #9AA6BC; }
.gp-input:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.gp-submit { padding: .72rem 1.35rem; border-radius: .65rem; background: #4F46E5; color: #fff;
  border: none; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s; font-family: inherit; }
.gp-submit:hover:not(:disabled) { background: #4338CA; }
.gp-submit:disabled { opacity: .6; cursor: default; }
.gp-note { margin-top: .6rem; font-size: .76rem; color: #5E6E86; }

.gp-result { margin-top: .95rem; padding: .95rem 1.05rem; border-radius: .8rem;
  background: #fff; border: 1px solid #DDE3F5; }
.gp-result[hidden] { display: none; }
.gp-result-head { margin-bottom: .6rem; }
.gp-result-title { font-size: .92rem; font-weight: 600; color: #142033; line-height: 1.4; }
.gp-result-meta { font-size: .74rem; color: #5E6E86; margin-top: .15rem; }
.gp-result-msg { font-size: .83rem; color: #33445C; line-height: 1.6; margin-top: .3rem; }
.gp-text { max-height: clamp(140px, 30vh, 300px); overflow-y: auto; white-space: pre-wrap;
  font-size: .82rem; line-height: 1.65; color: #33445C; padding: .7rem .8rem;
  border-radius: .55rem; background: #F8FAFF; border: 1px solid #E6EAF7; }
.gp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.gp-btn-ghost { padding: .42rem .85rem; border-radius: .5rem; background: #F8FAFF;
  border: 1px solid #C7D2FE; color: #4F46E5; font-size: .78rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
.gp-btn-ghost:hover { background: #EEF2FF; border-color: #4F46E5; }
.gp-cta { display: inline-block; padding: .42rem .85rem; border-radius: .5rem; background: #4F46E5;
  color: #fff; font-size: .78rem; font-weight: 600; text-decoration: none; transition: background .15s; }
.gp-cta:hover { background: #4338CA; color: #fff; }
.gp-foot { margin-top: .6rem; font-size: .73rem; color: #5E6E86; line-height: 1.5; }
@media (max-width: 480px) {
  .gp-box { padding: 1.1rem 1rem; }
  .gp-submit { flex: 1 1 100%; }
}

/* API keys panel: reaching this account from a script or an AI assistant. */
.ak-title { font-size: 1rem; font-weight: 700; color: #142033; }
.ak-intro { font-size: .82rem; line-height: 1.6; color: #5E6E86; margin-bottom: 1rem; }
.ak-intro a { color: #4F46E5; font-weight: 600; text-decoration: none; }
.ak-intro a:hover { text-decoration: underline; }

/* The one moment the key is visible. Deliberately loud, because it cannot be shown twice. */
.ak-new { margin-bottom: 1rem; padding: .9rem 1rem; border-radius: .8rem;
  background: #ECFDF5; border: 1px solid #A7F3D0; }
.ak-new.hidden { display: none; }
.ak-new-label { font-size: .74rem; font-weight: 700; color: #065F46; margin-bottom: .45rem; }
.ak-key { display: block; width: 100%; padding: .6rem .7rem; border-radius: .5rem;
  background: #fff; border: 1px solid #A7F3D0; color: #142033;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .76rem; word-break: break-all; line-height: 1.5; }
.ak-new-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.ak-warn { margin-top: .55rem; font-size: .72rem; line-height: 1.5; color: #047857; }

.ak-list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .9rem; }
.ak-row { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem;
  border-radius: .6rem; background: #F8FAFF; border: 1px solid #E6EAF7; }
.ak-row-main { flex: 1 1 auto; min-width: 0; }
.ak-row-name { font-size: .82rem; font-weight: 600; color: #142033;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-row-meta { font-size: .71rem; color: #5E6E86; margin-top: .1rem; }
.ak-empty { font-size: .8rem; color: #5E6E86; padding: .5rem 0; }

.ak-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.ak-input { flex: 1 1 14rem; min-width: 0; padding: .6rem .8rem; border-radius: .55rem;
  background: #fff; border: 1px solid #C7D2FE; color: #142033; font-size: .84rem;
  font-family: inherit; }
.ak-input::placeholder { color: #9AA6BC; }
.ak-input:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.ak-btn-primary { padding: .6rem 1.1rem; border-radius: .55rem; background: #4F46E5;
  color: #fff; border: none; font-size: .82rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; font-family: inherit; transition: background .15s; }
.ak-btn-primary:hover:not(:disabled) { background: #4338CA; }
.ak-btn-primary:disabled { opacity: .6; cursor: default; }
.ak-btn-revoke { padding: .35rem .7rem; border-radius: .45rem; background: #FFF1F2;
  border: 1px solid #FECDD3; color: #BE123C; font-size: .72rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit; transition: background .15s; }
.ak-btn-revoke:hover:not(:disabled) { background: #FFE4E6; }
.ak-btn-revoke:disabled { opacity: .6; cursor: default; }
.ak-error { margin: 0 0 .7rem; padding: .55rem .7rem; border-radius: .5rem;
  background: #FFF1F2; border: 1px solid #FECDD3; color: #9F1239; font-size: .78rem; }
.ak-error.hidden { display: none; }
@media (max-width: 480px) {
  .ak-btn-primary { flex: 1 1 100%; }
}

/* Download formats shown to signed-out visitors: clicking one invites them to sign up */
.preview-locked { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; }
.preview-locked-label { font-size: .7rem; font-weight: 600; color: #5E6E86; margin-right: .15rem; }
.preview-lock-btn { padding: .3rem .65rem; border-radius: .5rem; background: #F8FAFF;
  border: 1px solid #C7D2FE; color: #4F46E5; font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.preview-lock-btn:hover { background: #EEF2FF; border-color: #4F46E5; color: #3730A3; }

/* Shown after repeated fetch failures to people on the free route */
.retry-upsell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .85rem 1rem; border-radius: .9rem; border: 1px solid #FED7AA;
  background: #FFF7ED; }
.retry-upsell-body { min-width: 0; flex: 1 1 18rem; }
.retry-upsell-title { font-size: .82rem; font-weight: 700; color: #9A3412; margin: 0 0 .15rem; }
.retry-upsell-note { font-size: .74rem; line-height: 1.5; color: #5E6E86; margin: 0; }
.retry-upsell-btn { flex: 0 0 auto; padding: .45rem .9rem; border-radius: .6rem; border: 0;
  background: #4F46E5; color: #fff; font-size: .78rem; font-weight: 700; cursor: pointer; }
.retry-upsell-btn:hover { background: #4338CA; }

/* "Retry 12 failed" in the results summary bar */
.retry-failed-btn { padding: 4px 12px; border-radius: 8px; background: #FFF7ED;
  border: 1px solid #FED7AA; color: #9A3412; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .15s, border-color .15s; }
.retry-failed-btn:hover { background: #FFEDD5; border-color: #FB923C; }

/* MCP setup page: per-client config blocks. The pre scrolls inside itself so a long
   command cannot widen the page on a phone. */
.legal-doc h3 { font-size: 0.98rem; font-weight: 700; color: #0F1B2D; margin: 1.6rem 0 0.4rem; letter-spacing: -0.005em; }
.legal-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; background: #F1F5F9; color: #1E293B; padding: 0.1rem 0.3rem; border-radius: 4px; }
.mcp-config { background: #0F1B2D; border: 1px solid #1E2B43; border-radius: 10px; padding: 0.85rem 1rem; margin: 0.6rem 0 1.1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mcp-config code { display: block; white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.65; background: none; color: #E2E8F0; padding: 0; border-radius: 0; }

/* Connected apps: reuses the .ak-* rows; only the closing note is new. */
.ca-note { font-size: 0.72rem; line-height: 1.6; color: #64748B; margin: 0.9rem 0 0;
  border-top: 1px solid #E2E8F0; padding-top: 0.8rem; }


/* ---- Mobile navigation ---------------------------------------------------------------
   The desktop <nav> is "hidden md:flex", which left phones with no navigation at all —
   only the logo and the app button. This is the small-screen equivalent.

   No JavaScript: <details> opens and closes itself, and following a link changes the page,
   which closes it. It lives here rather than in Tailwind utilities because the purged
   tailwind.css build has no "md:hidden" class to hide a button on desktop. Colours come
   from the theme variables, so the panel matches a card instead of hard-coding light-theme
   values that would break if the palette changes. */
.mnav { position: relative; display: block; margin-left: auto; margin-right: 10px; }
.mnav > summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column;
  justify-content: center; gap: 4px; width: 40px; height: 36px; padding: 8px 9px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
  box-shadow: var(--shadow); -webkit-tap-highlight-color: transparent;
}
.mnav > summary::-webkit-details-marker { display: none; }
.mnav > summary::marker { content: ""; }
.mnav > summary > span { display: block; height: 2px; border-radius: 2px; background: var(--text); }
.mnav > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.mnav[open] > summary { border-color: var(--green); }
.mnav-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 216px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(15, 27, 45, 0.14);
}
.mnav-panel a {
  display: block; padding: 10px 12px; border-radius: 9px; font-size: 14px;
  font-weight: 500; color: var(--text); text-decoration: none;
}
.mnav-panel a:hover, .mnav-panel a:focus-visible { background: var(--ink); color: var(--green-bright); }
@media (min-width: 768px) { .mnav { display: none; } }

/* Where the menu button sits in the bar. The header is a flex row with the logo first and
   the sign-in / app buttons last, spaced by justify-between. Left alone, the button landed
   between the logo and those buttons rather than at an edge. Pushing the logo's free space
   to its right collapses everything else into one group on the right, and order:99 puts the
   menu button at the end of that group — the usual place for it. Both header variants have
   the logo as their first child, so one rule covers the homepage (which has Sign In / Sign
   Up in #auth-section) and every other page (which has a single "Open the app" link). */
@media (max-width: 767px) {
  #navbar > div { justify-content: flex-start; gap: 10px; }
  #navbar > div > a:first-child { margin-right: auto; }
  .mnav { order: 99; margin-left: 0; margin-right: 0; }
}