:root {
      --bg: #f6f7fb;
      --bg-2: #edf2f7;
      --surface: #ffffff;
      --surface-soft: #f3f6fb;
      --border: rgba(15, 23, 42, 0.1);
      --text: #111827;
      --muted: #667085;
      --ink: #111827;
      --teal: #0f766e;
      --teal-deep: #115e59;
      --teal-soft: #ccfbf1;
      --coral: #2563eb;
      --coral-soft: #dbeafe;
      --gold: #b45309;
      --gold-soft: #fef3c7;
      --berry: #7c3aed;
      --danger: #dc2626;
      --sand: #fef3c7;
      --shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.11);
      --shadow-md: 0 14px 32px rgba(15, 23, 42, 0.09);
      --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.07);
      --radius-xl: 16px;
      --radius-lg: 12px;
      --radius-md: 10px;
      --radius-sm: 8px;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      color: var(--text);
      font-family: "Aptos", "Segoe UI", sans-serif;
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    }

    body {
      padding: 24px;
    }

    body.landing-mode {
      background:
        radial-gradient(circle at 88% 6%, rgba(37, 99, 235, 0.12), transparent 26rem),
        radial-gradient(circle at 6% 28%, rgba(15, 118, 110, 0.11), transparent 30rem),
        #f8fafc;
    }

    .landing-page {
      width: min(1320px, 100%);
      margin: 0 auto;
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 30px 90px rgba(15, 23, 42, 0.09);
    }

    .landing-header {
      min-height: 76px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 28px;
      padding: 0 42px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.07);
      background: rgba(255, 255, 255, 0.86);
      backdrop-filter: blur(18px);
    }

    .landing-brand {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-size: 20px;
      font-weight: 850;
      letter-spacing: -0.03em;
      text-decoration: none;
    }

    .landing-brand-mark {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: linear-gradient(145deg, var(--teal), #0b4f4a);
      color: #fff;
      font-size: 17px;
      font-weight: 900;
      box-shadow: 0 8px 20px rgba(15, 118, 110, 0.2);
    }

    .landing-nav {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .landing-nav a {
      color: #475467;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }

    .landing-nav a:hover { color: var(--teal-deep); }

    .landing-login {
      justify-self: end;
      padding: 10px 18px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: #fff;
      color: var(--ink);
    }

    .landing-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(390px, .96fr);
      align-items: center;
      gap: 70px;
      padding: 92px 72px 104px;
    }

    .landing-kicker,
    .landing-section-heading > span,
    .landing-price-copy > span,
    .landing-final-cta > span {
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .landing-kicker {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .landing-kicker span {
      width: 28px;
      height: 2px;
      background: var(--teal);
    }

    .landing-hero h1 {
      margin: 22px 0 22px;
      color: #0b1220;
      font-size: clamp(48px, 6vw, 82px);
      line-height: .96;
      letter-spacing: -.065em;
    }

    .landing-hero h1 em {
      color: var(--teal);
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 500;
    }

    .landing-lead {
      max-width: 640px;
      margin: 0;
      color: #536174;
      font-size: 19px;
      line-height: 1.65;
    }

    .landing-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-top: 32px;
    }

    .landing-primary-cta {
      min-height: 54px;
      padding-inline: 24px;
      background: var(--teal) !important;
      box-shadow: 0 14px 30px rgba(15, 118, 110, 0.2) !important;
    }

    .landing-text-button {
      background: transparent;
      color: #344054;
    }

    .landing-trust-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 26px;
      margin-top: 34px;
      color: #667085;
      font-size: 12px;
    }

    .landing-trust-row span { position: relative; }
    .landing-trust-row span + span::before {
      content: "";
      position: absolute;
      left: -14px;
      top: 50%;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #cbd5e1;
    }
    .landing-trust-row b { color: #1d2939; }

    .landing-product-card {
      position: relative;
      padding: 24px;
      border: 1px solid rgba(15, 118, 110, 0.15);
      border-radius: 22px;
      background: linear-gradient(155deg, #ffffff 0%, #f0fdfa 100%);
      box-shadow: 0 34px 70px rgba(15, 23, 42, 0.13);
      transform: rotate(1.2deg);
    }

    .landing-product-card::before {
      content: "";
      position: absolute;
      inset: -18px 18px 18px -18px;
      z-index: -1;
      border-radius: 24px;
      background: rgba(37, 99, 235, 0.07);
      transform: rotate(-3deg);
    }

    .landing-product-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .landing-product-top > div { display: grid; gap: 5px; }
    .landing-product-label,
    .landing-result-card > span {
      color: #7a889b;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .landing-product-top strong { font-size: 18px; }

    .landing-ready {
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--teal-soft);
      color: var(--teal-deep);
      font-size: 11px;
      font-weight: 800;
    }

    .landing-wave {
      height: 58px;
      display: flex;
      align-items: center;
      gap: 5px;
      margin: 18px 0;
      padding: 0 12px;
      border-radius: 12px;
      background: #0f172a;
    }

    .landing-wave span {
      flex: 1;
      height: 18px;
      border-radius: 999px;
      background: linear-gradient(#5eead4, #2dd4bf);
    }
    .landing-wave span:nth-child(3n) { height: 36px; }
    .landing-wave span:nth-child(4n) { height: 26px; }
    .landing-wave span:nth-child(5n) { height: 44px; }

    .landing-result-card {
      margin-top: 10px;
      padding: 16px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.88);
    }

    .landing-result-accent { border-left: 3px solid var(--teal); }
    .landing-result-card p,
    .landing-result-card ul {
      margin: 8px 0 0;
      color: #475467;
      font-size: 12px;
      line-height: 1.55;
    }
    .landing-result-card ul { padding-left: 17px; }
    .landing-formats {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 16px;
      color: #7a889b;
      font-size: 10px;
      font-weight: 800;
    }
    .landing-formats i {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #cbd5e1;
    }

    .landing-section { padding: 96px 72px; }
    .landing-section-heading {
      max-width: 720px;
      margin: 0 auto 44px;
      text-align: center;
    }
    .landing-section-heading-left {
      margin-left: 0;
      text-align: left;
    }
    .landing-section-heading h2,
    .landing-price h2,
    .landing-final-cta h2 {
      margin: 12px 0 14px;
      color: #101828;
      font-size: clamp(34px, 4vw, 52px);
      line-height: 1.05;
      letter-spacing: -.045em;
    }
    .landing-section-heading p,
    .landing-price-copy p {
      margin: 0;
      color: #667085;
      font-size: 16px;
      line-height: 1.65;
    }

    .landing-step-grid,
    .landing-use-grid {
      display: grid;
      gap: 16px;
    }
    .landing-step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .landing-step {
      min-height: 250px;
      padding: 30px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 18px;
      background: #fff;
    }
    .landing-step-featured {
      background: #102a2a;
      color: #fff;
      transform: translateY(-10px);
      box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
    }
    .landing-step-number {
      color: #94a3b8;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
    }
    .landing-step h3,
    .landing-use-grid h3 {
      margin: 58px 0 10px;
      font-size: 21px;
      letter-spacing: -.02em;
    }
    .landing-step p,
    .landing-use-grid p {
      margin: 0;
      color: #667085;
      line-height: 1.6;
    }
    .landing-step-featured p { color: rgba(255, 255, 255, .72); }

    .landing-use-cases { background: #f8fafc; }
    .landing-use-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .landing-use-grid article {
      padding: 24px;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
    }
    .landing-use-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: #e6fffb;
      color: var(--teal-deep);
      font-size: 20px;
      font-weight: 800;
    }
    .landing-use-grid h3 { margin-top: 28px; }

    .landing-price {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
      align-items: center;
      gap: 72px;
      padding: 96px 72px;
    }
    .landing-price-card {
      padding: 28px;
      border-radius: 20px;
      background: #0f172a;
      color: #fff;
      box-shadow: 0 25px 55px rgba(15, 23, 42, .2);
    }
    .landing-price-card > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(255,255,255,.1);
      color: #cbd5e1;
    }
    .landing-price-card strong { color: #fff; font-size: 28px; }
    .landing-price-card small { color: #94a3b8; font-size: 11px; }
    .landing-price-card .button {
      width: 100%;
      margin-top: 22px;
      background: #fff;
      color: #0f172a;
    }
    .landing-price-card > small {
      display: block;
      margin-top: 12px;
      text-align: center;
    }

    .landing-final-cta {
      margin: 0 24px 24px;
      padding: 76px 28px;
      border-radius: 20px;
      background: linear-gradient(135deg, #0f766e, #115e59 55%, #0f3f3c);
      color: #fff;
      text-align: center;
    }
    .landing-final-cta > span { color: #99f6e4; }
    .landing-final-cta h2 { color: #fff; }
    .landing-final-cta .button {
      margin-top: 18px;
      padding: 15px 24px;
      background: #fff;
      color: #0f3f3c;
    }

    .landing-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 30px 42px;
      border-top: 1px solid rgba(15, 23, 42, 0.07);
    }
    .landing-footer p {
      max-width: 600px;
      margin: 0;
      color: #667085;
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
    }
    .landing-footer > button {
      padding: 8px;
      background: transparent;
      color: var(--teal-deep);
      font-size: 12px;
    }

    .page {
      width: min(1560px, 100%);
      min-height: calc(100vh - 48px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      background: var(--teal-soft);
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .button,
    button,
    label.button {
      appearance: none;
      border: 0;
      cursor: pointer;
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      font: inherit;
      font-weight: 700;
      transition: transform .15s ease, opacity .15s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .button:hover,
    button:hover,
    label.button:hover {
      transform: translateY(-1px);
    }

    .button:disabled,
    button:disabled,
    label.button:disabled {
      opacity: 0.56;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .button.primary,
    button.primary {
      background: var(--ink);
      color: #fff;
      box-shadow: var(--shadow-sm);
    }

    .button.secondary,
    button.secondary,
    label.button.secondary {
      background: var(--surface);
      color: var(--teal-deep);
      border: 1px solid var(--border);
    }

    .button.ghost,
    button.ghost {
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.22);
    }

    .button.warn,
    button.warn {
      background: linear-gradient(180deg, var(--coral), var(--berry));
      color: #fff;
    }

    .button.danger {
      background: #fef2f2;
      color: var(--danger);
      border: 1px solid #fecaca;
    }

    .library-search {
      display: grid;
      gap: 8px;
      margin-top: 20px;
    }

    .library-search label {
      font-size: 14px;
      font-weight: 700;
    }

    .library-search .search-input:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    .web-shell {
      min-width: 0;
    }

    .web-app {
      min-height: calc(100vh - 48px);
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: var(--surface);
      box-shadow: var(--shadow-lg);
      display: grid;
      grid-template-columns: 236px minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      position: relative;
    }

    .statusbar {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 12px 18px 12px 22px;
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      border-bottom: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.95);
    }

    .statusbar > span:first-child {
      color: var(--text);
      font-size: 15px;
      font-weight: 900;
    }

    .statusbar-meta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
    }

    .screen {
      grid-column: 2;
      grid-row: 2;
      min-width: 0;
      padding: 26px 30px 36px;
      display: none;
    }

    .screen.active {
      display: block;
    }

    #screen-home.active {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
      gap: 20px;
      align-items: start;
    }

    #screen-home > .screen-title,
    #screen-home > .preprocess-card,
    #screen-home > .hero {
      grid-column: 1 / -1;
      margin-bottom: 0;
    }

    #screen-home > .section {
      min-width: 0;
      margin-top: 0;
    }

    #screen-home > .section:nth-child(4) {
      grid-column: 1 / -1;
    }

    #screen-home > .section:nth-child(5),
    #processingSection {
      grid-column: 1;
    }

    #screen-home > .section:nth-child(6),
    #screen-home > .section:nth-child(8) {
      grid-column: 2;
    }

    #libraryList {
      grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
      align-items: stretch;
    }

    #recentList,
    #processingList {
      grid-template-columns: 1fr;
    }

    .screen-title {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 20px;
    }

    .screen-title small {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 4px;
    }

    .screen-title h2 {
      margin: 0;
      font-size: 34px;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .usage-pill {
      padding: 9px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
      color: var(--teal-deep);
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }

    .usage-pill.runtime-safe {
      background: var(--teal-deep);
      color: #fff;
      border-color: transparent;
    }

    .usage-pill.runtime-live {
      background: var(--surface-soft);
      color: var(--teal-deep);
    }

    .preprocess-card {
      padding: 14px;
      border-radius: var(--radius-sm);
      background: var(--surface-soft);
      border: 1px solid var(--border);
      box-shadow: none;
      margin-bottom: 18px;
    }

    .preprocess-head,
    .speaker-mode-row,
    .speaker-count-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .preprocess-head {
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .preprocess-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .preprocess-title {
      margin-top: 2px;
      color: var(--text);
      font-size: 18px;
      font-weight: 900;
    }

    .preprocess-badge {
      min-width: 58px;
      padding: 7px 10px;
      border-radius: var(--radius-sm);
      background: var(--teal-soft);
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
    }

    .speaker-mode-row {
      margin-bottom: 10px;
    }

    .speaker-mode-btn,
    .speaker-count-btn {
      min-height: 40px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .speaker-mode-btn {
      flex: 1;
    }

    .speaker-mode-btn.active {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    .preprocess-status {
      margin: -2px 0 10px;
      color: var(--coral-deep);
      font-size: 11px;
      line-height: 16px;
      font-weight: 800;
    }

    .transcription-language-select {
      width: 100%;
      min-height: 44px;
      margin-bottom: 8px;
      padding: 10px 36px 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text);
      font: inherit;
      font-weight: 800;
    }

    .transcription-language-select:focus-visible {
      outline: 3px solid rgba(36, 101, 97, 0.2);
      border-color: var(--teal);
    }

    .preprocess-hint {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 12px;
      line-height: 18px;
    }

    .speaker-count-row {
      flex-wrap: wrap;
    }

    .speaker-count-input {
      width: 62px;
      min-height: 40px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      text-align: center;
      font-size: 16px;
      font-weight: 900;
    }

    .speaker-count-btn {
      flex: 1;
      min-width: 34px;
      padding: 0 8px;
    }

    .speaker-count-btn.active {
      background: var(--sand);
      color: var(--text);
      border-color: rgba(210,155,75,0.55);
    }

    .hero {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      padding: 24px;
      border-radius: var(--radius-lg);
      color: #fff;
      background: linear-gradient(135deg, #111827 0%, #0f766e 62%, #2563eb 100%);
      box-shadow: var(--shadow-md);
      margin-bottom: 20px;
      animation: reveal-up .55s ease both;
    }

    .hero::after {
      content: none;
    }

    .hero > * {
      position: relative;
      z-index: 1;
    }

    .hero h3 {
      margin: 14px 0 10px;
      max-width: 780px;
      font-size: 34px;
      line-height: 1.06;
      letter-spacing: 0;
    }

    .hero p {
      max-width: 800px;
      margin: 0;
      color: rgba(255,255,255,0.9);
      line-height: 1.5;
      font-size: 15px;
    }

    .hero-note {
      margin-top: 14px;
      font-size: 12px;
      line-height: 1.5;
      color: rgba(255,255,255,0.78);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
    }

    .tag.light {
      color: #fff;
      background: rgba(255,255,255,0.14);
    }

    .hero-actions,
    .chip-row,
    .control-row,
    .toolbar-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .hero-actions {
      margin-top: 16px;
    }

    .chip-row {
      margin-top: 14px;
    }

    .mini-chip,
    .pill {
      padding: 8px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .mini-chip {
      background: rgba(255,255,255,0.14);
      color: #fff;
    }

    .pill.teal { background: var(--teal-soft); color: var(--teal-deep); }
    .pill.coral { background: var(--coral-soft); color: var(--coral); }
    .pill.gold { background: var(--gold-soft); color: var(--gold); }
    .pill.neutral { background: var(--surface-soft); color: var(--muted); }

    .pill.filter-pill {
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
    }

    .pill.filter-pill.active {
      background: var(--teal);
      border-color: rgba(23, 21, 19, 0.2);
      color: #fff;
    }

    .section {
      margin-top: 20px;
    }

    .section.reveal {
      animation: reveal-up .55s ease both;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      margin-bottom: 10px;
    }

    .section-head strong { font-size: 18px; }
    .section-head span { font-size: 12px; color: var(--muted); }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

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

    .card {
      padding: 14px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.86);
      border: 1px solid var(--border);
      box-shadow: none;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .card.soft-teal { background: linear-gradient(180deg, rgba(45,41,38,0.08), rgba(251,250,248,0.94)); }
    .card.soft-coral { background: linear-gradient(180deg, #f5f1ec, #fbf8f4); }
    .card.soft-gold { background: linear-gradient(180deg, #f3efe9, #fbfaf8); }
    .card.soft-mint { background: linear-gradient(180deg, #efebe6, #fbfaf8); }
    .card.runtime-card { background: linear-gradient(180deg, rgba(45,41,38,0.09), rgba(251,250,248,0.96)); }

    .action-card {
      min-height: 112px;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: start;
      gap: 10px;
      cursor: pointer;
    }

    .card:hover,
    .action-card:hover,
    .row-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: rgba(39, 35, 31, 0.16);
    }

    .icon-box {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      font-size: 16px;
    }

    .icon-record { background: var(--coral-soft); color: var(--coral); }
    .icon-import { background: var(--teal-soft); color: var(--teal-deep); }
    .icon-telegram { background: var(--gold-soft); color: var(--gold); }

    .action-card strong {
      font-size: 13px;
      line-height: 1.2;
    }

    .action-card p,
    .card p,
    .text-muted {
      margin: 0;
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .progress {
      height: 8px;
      border-radius: 999px;
      background: rgba(45,41,38,0.08);
      overflow: hidden;
      margin: 10px 0 0;
    }

    .progress > span {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--teal), var(--gold));
    }

    .dashboard-grid,
    .library-overview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .library-overview-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-card,
    .library-kpi {
      padding: 16px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.9);
      border: 1px solid var(--border);
      box-shadow: none;
      animation: reveal-up .55s ease both;
    }

    .dashboard-card span,
    .library-kpi span {
      display: block;
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .dashboard-card strong,
    .library-kpi strong {
      display: block;
      font-size: 18px;
      line-height: 1.3;
      margin-bottom: 4px;
    }

    .dashboard-card p,
    .library-kpi p {
      margin: 0;
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .feature-card,
    .library-overview {
      background: linear-gradient(180deg, #ffffff, #f8fafc);
      animation: reveal-up .6s ease both;
    }

    .feature-card h4 {
      margin: 10px 0 8px;
      font-size: 22px;
      line-height: 1.15;
    }

    .feature-card p,
    .library-overview p {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--muted);
    }

    .feature-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .feature-footer {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 14px;
    }

    .feature-footnote {
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .library-overview {
      padding: 18px;
      margin-top: 16px;
    }

    .library-overview-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: start;
      margin-bottom: 12px;
    }

    .library-overview-head strong {
      display: block;
      font-size: 17px;
      line-height: 1.25;
      margin-bottom: 4px;
    }

    .library-overview-note {
      margin-top: 12px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .account-card {
      background: linear-gradient(180deg, #ffffff, #f8fafc);
    }

    .profile-avatar {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      font-size: 16px;
      font-weight: 800;
      background: var(--teal);
      color: #fff;
      box-shadow: var(--shadow-sm);
    }

    .profile-identity-meta {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .session-note {
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .launch-card {
      background: linear-gradient(180deg, #ffffff, #f8fafc);
    }

    .launch-note {
      margin-top: 12px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .list {
      display: grid;
      gap: 10px;
    }

    .row-card {
      cursor: pointer;
    }

    .row-top,
    .between {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .row-top {
      align-items: start;
      margin-bottom: 8px;
    }

    .row-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.3;
    }

    .meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }

    .search-input,
    .field {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.86);
      box-shadow: none;
      font: inherit;
      color: var(--text);
    }

    .search-input::placeholder,
    .field::placeholder {
      color: #9a938b;
    }

    .empty {
      text-align: center;
      padding: 22px;
    }

    .empty strong {
      display: block;
      margin-bottom: 8px;
      font-size: 18px;
    }

    .empty-actions {
      justify-content: center;
      margin-top: 14px;
    }

    .nav {
      grid-column: 1;
      grid-row: 2;
      position: sticky;
      top: 0;
      align-self: start;
      min-height: calc(100vh - 102px);
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 16px;
      background: #f8fafc;
      border-right: 1px solid var(--border);
      box-shadow: none;
    }

    .nav-item {
      position: relative;
      padding: 11px 12px;
      border-radius: var(--radius-sm);
      text-align: left;
      font-size: 14px;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
      transition: background .16s ease, color .16s ease, transform .16s ease;
    }

    .nav-item.active {
      background: var(--ink);
      color: #fff;
      box-shadow: none;
    }

    .nav-item:hover {
      transform: translateY(-1px);
    }

    .hidden { display: none !important; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(28, 24, 20, 0.34);
      backdrop-filter: blur(10px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 40;
    }

    .modal-backdrop.active {
      display: flex;
    }

    .modal {
      width: min(1120px, 100%);
      max-height: min(92vh, 980px);
      overflow: auto;
      border-radius: var(--radius-xl);
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(255,255,255,0.5);
      box-shadow: var(--shadow-lg);
      padding: 24px;
    }

    .auth-modal {
      width: min(560px, 100%);
    }

    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 5px;
      margin-bottom: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-soft);
    }

    .auth-tab {
      min-height: 42px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 13px;
      font-weight: 800;
    }

    .auth-tab.active {
      background: #fff;
      color: var(--text);
      box-shadow: var(--shadow-sm);
    }

    .auth-bonus {
      display: grid;
      gap: 4px;
      margin-bottom: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(15, 118, 110, .16);
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    }

    .auth-bonus strong {
      color: var(--teal-deep);
      font-size: 14px;
    }

    .auth-bonus span {
      color: #4b6570;
      font-size: 12px;
      line-height: 1.5;
    }

    .auth-form {
      display: grid;
      gap: 10px;
    }

    .auth-field-card {
      padding: 14px;
    }

    .auth-field-card label {
      display: block;
      margin-bottom: 9px;
      font-size: 13px;
    }

    .auth-field-card .field {
      background: #fff;
    }

    .auth-error {
      margin: 0;
      padding: 11px 13px;
      border: 1px solid rgba(220, 38, 38, 0.2);
      border-radius: var(--radius-sm);
      background: rgba(254, 226, 226, 0.72);
      color: #991b1b;
      font-size: 13px;
      line-height: 1.45;
    }

    .auth-submit {
      width: 100%;
      min-height: 46px;
      margin-top: 2px;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: start;
      margin-bottom: 18px;
    }

    .modal-header h3 {
      margin: 0;
      font-size: 28px;
      line-height: 1.08;
    }

    .modal-header p {
      margin: 8px 0 0;
      color: var(--muted);
      line-height: 1.5;
      font-size: 14px;
    }

    .close-btn {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.86);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 18px;
      padding: 0;
    }

    .transcript-grid,
    .paywall-grid,
    .record-grid {
      display: grid;
      gap: 16px;
    }

    .summary-card {
      background: var(--surface-soft);
    }

    .export-bar {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface-soft);
    }

    .export-copy {
      display: grid;
      gap: 5px;
      max-width: 560px;
    }

    .export-copy strong {
      font-size: 14px;
    }

    .export-copy span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .export-controls {
      display: grid;
      grid-template-columns: minmax(150px, 190px) auto;
      gap: 8px 10px;
      align-items: end;
      flex: 0 0 auto;
    }

    .export-controls label {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .export-select {
      width: 100%;
      min-height: 43px;
      padding: 10px 34px 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: #fff;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 650;
    }

    .export-select:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    .transcript-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .stat-card {
      padding: 14px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.84);
      border: 1px solid var(--border);
      box-shadow: none;
    }

    .stat-card span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      margin-bottom: 6px;
    }

    .stat-card strong {
      display: block;
      font-size: 15px;
      line-height: 1.3;
    }

    .key-list {
      display: grid;
      gap: 10px;
    }

    .key-item {
      display: flex;
      gap: 10px;
      align-items: start;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--teal);
      margin-top: 6px;
      flex: 0 0 auto;
    }

    .key-item strong {
      display: block;
      font-size: 13px;
      line-height: 1.35;
      margin-bottom: 4px;
    }

    .key-item p {
      margin: 0;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .transcript-body {
      margin: 0;
      white-space: pre-wrap;
      line-height: 1.65;
      font-size: 14px;
      color: var(--text);
    }

    .transcript-body.placeholder {
      color: var(--muted);
    }

    #paywallModal {
      z-index: 60;
    }

    .paywall-modal {
      width: min(1080px, 100%);
      padding: 28px;
      background:
        radial-gradient(circle at 4% 0%, rgba(204, 251, 241, 0.72), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(219, 234, 254, 0.65), transparent 36%),
        rgba(255, 255, 255, 0.99);
    }

    .paywall-header {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 18px;
    }

    .paywall-header h3 {
      max-width: 720px;
      margin: 14px 0 0;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.04;
      letter-spacing: -0.035em;
    }

    .paywall-header p {
      max-width: 720px;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
    }

    .paywall-balance {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px 16px;
      border: 1px solid rgba(15, 118, 110, 0.16);
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.76);
    }

    .paywall-balance > div:first-child {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .paywall-balance span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .paywall-balance strong {
      font-size: 20px;
    }

    .paywall-rates {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .paywall-rates span {
      padding: 7px 9px;
      border-radius: 999px;
      background: var(--surface-soft);
      color: var(--teal-deep);
      font-size: 11px;
    }

    .paywall-reason {
      margin-top: 12px;
      padding: 12px 14px;
      border: 1px solid rgba(180, 83, 9, 0.2);
      border-radius: var(--radius-sm);
      background: var(--gold-soft);
      color: #78350f;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .paywall-layout {
      display: grid;
      grid-template-columns: minmax(260px, 0.82fr) minmax(480px, 1.3fr);
      gap: 18px;
      margin-top: 18px;
    }

    .paywall-value,
    .paywall-offer {
      min-width: 0;
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, 0.86);
    }

    .paywall-value {
      display: grid;
      align-content: start;
      gap: 4px;
    }

    .paywall-value-card {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 10px;
      padding: 13px 0;
      border-bottom: 1px solid var(--border);
    }

    .paywall-check {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--teal-soft);
      color: var(--teal-deep);
      font-size: 13px;
      font-weight: 900;
    }

    .paywall-value-card strong {
      display: block;
      font-size: 13px;
      line-height: 1.35;
    }

    .paywall-value-card p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .paywall-guarantee {
      display: grid;
      gap: 5px;
      margin-top: 12px;
      padding: 13px;
      border-radius: var(--radius-sm);
      background: var(--surface-soft);
    }

    .paywall-guarantee strong {
      font-size: 12px;
    }

    .paywall-guarantee span {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
    }

    .paywall-section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }

    .paywall-section-head strong {
      font-size: 16px;
    }

    .paywall-section-head span {
      color: var(--muted);
      font-size: 11px;
    }

    .paywall-topup-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 22px;
      border: 1px solid rgba(15, 118, 110, .34);
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #f0fdfa, #ffffff);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, .06);
    }

    .paywall-topup-card > div {
      display: grid;
      gap: 7px;
    }

    .paywall-topup-label {
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .paywall-topup-card > div strong {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .paywall-topup-price {
      flex: 0 0 auto;
      font-size: 28px;
      white-space: nowrap;
    }

    .paywall-summary {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    .paywall-summary > div {
      display: grid;
      gap: 3px;
    }

    .paywall-summary span,
    .paywall-fineprint {
      color: var(--muted);
      font-size: 11px;
    }

    .paywall-summary > strong {
      font-size: 22px;
    }

    .paywall-cta {
      width: 100%;
      min-height: 48px;
      margin-top: 14px;
    }

    .paywall-fineprint {
      margin: 9px 0 0;
      text-align: center;
      line-height: 1.45;
    }

    .paywall-checkout-notice {
      margin-top: 10px;
      padding: 11px 12px;
      border: 1px solid rgba(15, 118, 110, 0.18);
      border-radius: var(--radius-sm);
      background: var(--teal-soft);
      color: var(--teal-deep);
      font-size: 12px;
      line-height: 1.45;
    }

    .paywall-later {
      width: 100%;
      margin-top: 4px;
      padding: 9px;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
    }

    .badge {
      padding: 7px 10px;
      border-radius: var(--radius-sm);
      background: var(--gold-soft);
      color: var(--teal-deep);
      font-size: 11px;
      font-weight: 800;
    }

    .record-timer {
      font-size: 42px;
      font-weight: 800;
      line-height: 1;
      margin: 6px 0;
    }

    .circle-hero {
      width: 168px;
      height: 168px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px;
      font-size: 50px;
      border: 1px solid rgba(255,255,255,0.18);
      position: relative;
      isolation: isolate;
      --audio-scale: 1;
      --audio-ring-scale: 1.04;
      --audio-ring-opacity: 0.18;
      transition: background 180ms ease, color 180ms ease, transform 80ms linear;
    }

    .circle-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      border: 2px solid currentColor;
      opacity: 0;
      transform: scale(1);
      transition: opacity 180ms ease, transform 80ms linear;
    }

    .circle-hero.recording {
      transform: scale(var(--audio-scale));
    }

    .circle-hero.recording::before {
      opacity: var(--audio-ring-opacity);
      transform: scale(var(--audio-ring-scale));
    }

    .record-circle-icon {
      line-height: 1;
    }

    .record-level-bars {
      height: 74px;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .circle-hero.recording .record-circle-icon {
      display: none;
    }

    .circle-hero.recording .record-level-bars {
      display: flex;
    }

    .record-level-bar {
      width: 6px;
      height: 10px;
      min-height: 10px;
      max-height: 68px;
      border-radius: 999px;
      background: currentColor;
      transition: height 70ms linear;
    }

    .mic-live-status {
      width: fit-content;
      min-height: 28px;
      margin: 0 auto 10px;
      padding: 5px 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 999px;
      background: var(--coral-soft);
      color: var(--coral);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    .mic-live-status[hidden] {
      display: none;
    }

    .mic-live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 var(--mic-ring-size, 2px) rgba(218, 103, 80, 0.18);
    }

    .circle-hero.idle { background: var(--coral-soft); color: var(--coral); }
    .circle-hero.recording { background: rgba(76,70,64,0.18); color: var(--coral); }
    .circle-hero.paused { background: var(--gold-soft); color: var(--gold); }
    .circle-hero.finished { background: var(--teal-soft); color: var(--teal-deep); }

    @media (prefers-reduced-motion: reduce) {
      .circle-hero,
      .circle-hero::before,
      .record-level-bar {
        transition: none;
      }

      .circle-hero.recording,
      .circle-hero.recording::before {
        transform: none;
      }
    }

    .alert-stack {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 100;
      width: min(420px, calc(100vw - 48px));
      display: grid;
      gap: 10px;
      pointer-events: none;
    }

    .alert {
      padding: 14px 16px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.88);
      border: 1px solid var(--border);
      box-shadow: none;
      font-size: 13px;
      line-height: 1.5;
    }

    .alert.error {
      background: linear-gradient(180deg, #f4efea, #faf7f3);
      color: var(--teal-deep);
      border-color: rgba(106,87,80,0.18);
    }

    .alert.success {
      background: linear-gradient(180deg, #f0ece6, #fbf8f4);
      color: var(--teal-deep);
      border-color: rgba(45,41,38,0.14);
    }

    @keyframes reveal-up {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    input[type="file"] {
      display: none;
    }

    .language-switch {
      display: inline-flex;
      gap: 6px;
      padding: 6px;
      border-radius: var(--radius-sm);
      background: rgba(251, 250, 248, 0.94);
      border: 1px solid rgba(39, 35, 31, 0.08);
      box-shadow: none;
    }

    .lang-btn {
      appearance: none;
      border: 0;
      cursor: pointer;
      border-radius: var(--radius-sm);
      min-width: 44px;
      padding: 10px 12px;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
      background: transparent;
      transition: background .15s ease, color .15s ease, transform .15s ease;
    }

    .lang-btn.active {
      background: linear-gradient(180deg, var(--teal), var(--teal-deep));
      color: #fff;
      box-shadow: var(--shadow-sm);
    }

    @media (max-width: 1080px) {
      .landing-hero {
        gap: 38px;
        padding-inline: 44px;
      }

      .landing-section,
      .landing-price {
        padding-inline: 44px;
      }

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

      .web-app {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
      }

      .nav {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
        position: static;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }

      .nav-item {
        text-align: center;
      }

      .screen {
        grid-column: 1;
        grid-row: 3;
      }

      #screen-home.active {
        grid-template-columns: 1fr;
      }

      #screen-home.active > .section {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 900px) {
      .landing-header {
        grid-template-columns: 1fr auto;
        padding-inline: 28px;
      }

      .landing-nav { display: none; }

      .landing-hero,
      .landing-price {
        grid-template-columns: 1fr;
      }

      .landing-hero {
        padding-block: 64px 76px;
      }

      .landing-product-card {
        max-width: 600px;
        transform: none;
      }

      .landing-step-grid {
        grid-template-columns: 1fr;
      }

      .landing-step {
        min-height: 0;
      }

      .landing-step-featured { transform: none; }

      .landing-price { gap: 38px; }

      .paywall-layout {
        grid-template-columns: 1fr;
      }

      .paywall-value {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .paywall-value-card {
        grid-template-columns: 24px minmax(0, 1fr);
        border: 0;
        padding: 4px 0;
      }

      .paywall-guarantee {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 560px) {
      body { padding: 14px; }
      body.landing-mode { padding: 0; }
      .landing-page {
        border: 0;
        border-radius: 0;
      }
      .landing-header {
        min-height: 66px;
        padding-inline: 18px;
      }
      .landing-brand { font-size: 18px; }
      .landing-brand-mark {
        width: 30px;
        height: 30px;
      }
      .landing-login { padding: 9px 13px; }
      .landing-hero,
      .landing-section,
      .landing-price {
        padding: 58px 20px;
      }
      .landing-hero { gap: 48px; }
      .landing-hero h1 { font-size: 46px; }
      .landing-lead { font-size: 16px; }
      .landing-actions,
      .landing-actions .button { width: 100%; }
      .landing-text-button { min-height: 44px; }
      .landing-trust-row { gap: 10px 18px; }
      .landing-trust-row span + span::before { display: none; }
      .landing-product-card { padding: 18px; }
      .landing-section-heading { text-align: left; }
      .landing-step { padding: 24px; }
      .landing-step h3 { margin-top: 38px; }
      .landing-use-grid { grid-template-columns: 1fr; }
      .landing-final-cta {
        margin: 0 12px 12px;
        padding: 58px 18px;
      }
      .landing-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px 20px;
      }
      .landing-footer p { text-align: left; }
      .paywall-topup-card {
        align-items: flex-start;
        flex-direction: column;
      }
      .statusbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 18px;
      }
      .statusbar-meta {
        width: 100%;
        justify-content: space-between;
      }
      .screen {
        padding: 18px;
      }
      .grid-3 {
        grid-template-columns: 1fr;
      }
      .dashboard-grid,
      .library-overview-grid {
        grid-template-columns: 1fr;
      }
      .modal {
        padding: 18px;
      }
      .paywall-modal {
        padding: 18px;
      }
      .paywall-header h3 {
        font-size: 28px;
      }
      .paywall-balance,
      .paywall-balance > div:first-child {
        align-items: flex-start;
        flex-direction: column;
      }
      .paywall-rates {
        justify-content: flex-start;
      }
      .paywall-value {
        grid-template-columns: 1fr;
      }
      .paywall-guarantee {
        grid-column: auto;
      }
      .export-bar {
        align-items: stretch;
        flex-direction: column;
      }
      .export-controls {
        grid-template-columns: 1fr;
      }
      .export-controls label {
        grid-column: auto;
      }
      .export-controls .button {
        width: 100%;
      }
      .screen-title h2 {
        font-size: 26px;
      }
    }