/* ============================================================
   HOMEPAGE "m2": frosted pastel, glass composer, pill nav.
   Loaded after redesign.css, only on index.html (body.m2).
   Restyle only: ids, hooks and behaviours are untouched.
   ============================================================ */

body.m2 {
  --bg: #F3EFFA;
  --bg-elevated: #FFFFFF;
  --bg-card: rgba(255,255,255,.78);
  --bg-input: #FFFFFF;
  --bg-soft: #F7F4FC;
  --border: #E6E0F3;
  --border-strong: #D9D0EE;
  --border-accent: #1D1B2E;
  --text: #1D1B2E;
  --text-secondary: #3b3856;
  --muted: #5B5775;
  --muted-light: #8a86a3;
  --accent: #1D1B2E;
  --accent-light: #2d2a45;
  --accent-dark: #000;
  --accent-glow: rgba(29,27,46,.1);
  --accent-2: #6B4DFF;
  --accent-2-dark: #5438DB;
  --accent-2-glow: rgba(107,77,255,.16);
  --pill-bg: #F0EBFA;
  --glow-1: #FFD9C2;
  --glow-2: #F3EFFA;
  --soft-panel: #F0EBFA;
  --nav-active-bg: #E9E1FF;
  --nav-active-fg: #4b32c7;
  --shadow-hero: 0 30px 70px rgba(90,67,168,.15);
  --shadow-soft: 0 24px 48px -32px rgba(90,67,168,.3);
  --m2-glass: rgba(255,255,255,.72);
  --m2-glass-border: rgba(255,255,255,.9);
  --m2-grad: linear-gradient(135deg, #6B4DFF, #9D6BFF);
  background: #F3EFFA;
}
html[data-theme="dark"] body.m2 {
  --bg: #111613;
  --bg-elevated: #171E19;
  --bg-card: rgba(26,34,29,.82);
  --bg-input: #1A221D;
  --bg-soft: #1A221D;
  --border: #2B362F;
  --border-strong: #3A483F;
  --border-accent: #EDEBE4;
  --text: #EDEBE4;
  --text-secondary: #D3D1C9;
  --muted: #A3A89E;
  --muted-light: #8E948A;
  --accent: #EDEBE4;
  --accent-light: #fff;
  --accent-dark: #fff;
  --accent-fg: #111613;
  --accent-2: #7FCBA0;
  --accent-2-dark: #A6DDBF;
  --accent-2-glow: rgba(127,203,160,.18);
  --pill-bg: #222C26;
  --glow-1: rgba(127,203,160,.16);
  --glow-2: transparent;
  --soft-panel: #171E19;
  --nav-active-bg: #2B362F;
  --nav-active-fg: #BFE6D0;
  --shadow-hero: 0 30px 70px rgba(0,0,0,.5);
  --m2-glass: rgba(26,34,29,.72);
  --m2-glass-border: rgba(255,255,255,.08);
  --m2-grad: linear-gradient(135deg, #2d6a50, #1F4D3A);
  --card-dark-bg: #1F4D3A; --card-dark-fg: #fff; --card-dark-muted: rgba(255,255,255,.78);
  background: #111613;
}

/* ===== page background: soft mesh ===== */
body.m2::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px 420px at 10% 6%, #FFD9C2, transparent 70%),
    radial-gradient(640px 460px at 94% 18%, #D8CCFF, transparent 70%),
    radial-gradient(700px 480px at 55% 108%, #BDEBD7, transparent 70%);
}
html[data-theme="dark"] body.m2::before {
  background:
    radial-gradient(600px 420px at 8% 4%, rgba(127,203,160,.10), transparent 70%),
    radial-gradient(640px 460px at 96% 14%, rgba(127,203,160,.07), transparent 70%);
}
.m2 .app-main::before { display: none; }
.m2 .app-shell, .m2 .app-main { position: relative; z-index: 1; }

/* ===== no sidebar: pill nav on top ===== */
.m2 .sidebar { display: none; }
.m2 .app-main, body.m2.sidebar-collapsed .app-main { margin-left: 0; }
.m2 .tb-menu { display: none; }
.m2 .topbar {
  position: relative; height: auto; min-height: 64px; padding: 16px 40px;
  background: transparent; border: 0; backdrop-filter: none;
  display: flex; align-items: center; gap: 12px;
}
.m2-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: var(--text); margin-right: auto; }
.m2-brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.m2-pills {
  display: flex; gap: 4px; padding: 5px; border-radius: 999px; font-size: .875rem;
  background: var(--m2-glass); border: 1px solid var(--m2-glass-border); backdrop-filter: blur(10px);
}
.m2-pills a { padding: 7px 16px; border-radius: 999px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.m2-pills a:hover { color: var(--text); }
.m2-pills a.on { background: var(--bg-elevated); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(29,27,46,.08); }
@media (min-width: 1180px) {
  .m2-pills { position: absolute; left: 50%; transform: translateX(-50%); }
}
.m2 .tb-spacer, .m2 .tb-link, .m2 .tb-pricing-m, .m2 .tb-cta { display: none; }
.m2 .tb-search { flex: 0 1 210px; margin-left: 0; }
.m2 .tb-search input { background: var(--m2-glass); border-color: var(--m2-glass-border); height: 38px; font-size: .8125rem; backdrop-filter: blur(10px); }
.m2 .tb-search input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-2-glow); }
.m2 .tb-icon-btn { background: var(--m2-glass); border: 1px solid var(--m2-glass-border); }
.m2 #sb-signin-top { width: auto; padding: 0 18px; border-radius: 999px; background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; gap: 6px; }
.m2 #sb-signin-top .tb-ico { display: none; }
.m2 #sb-signin-top .tb-label { display: inline; font-size: .875rem; }
.m2 #sb-signin-top.hidden { display: none; }

/* ===== hero ===== */
.m2 .shell-content { padding-top: 14px; }
.m2 .page-head { gap: 10px; margin-bottom: 26px; max-width: 760px; }
.m2 .hero-eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m2 .hero-pill { min-height: 36px; padding: 6px 16px; font-size: .8125rem; background: var(--m2-glass); border-color: var(--m2-glass-border); color: var(--accent-2-dark); backdrop-filter: blur(10px); }
.m2 .page-head h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); letter-spacing: -.035em; line-height: 1.06; }
.m2 .page-head > p { font-size: 1.05rem; color: var(--muted); max-width: 560px; }

/* ===== generator: glass composer ===== */
.m2 .gen-layout { max-width: 880px; gap: 20px; }
.m2 .gen-panel { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.m2 .gen-panel:focus-within { box-shadow: none; border: 0; }
.m2-composer {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center;
  background: var(--m2-glass); border: 1px solid var(--m2-glass-border); border-radius: 26px; padding: 20px 22px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow-hero);
  transition: box-shadow .2s;
}
.m2-composer:focus-within { box-shadow: var(--shadow-hero), 0 0 0 3px var(--accent-2-glow); }
.m2-composer > * { grid-column: 1 / -1; min-width: 0; }
.m2 .gen-field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m2 .gen-input { order: 0; font-size: clamp(1.1rem, 2.2vw, 1.4rem); min-height: 84px; padding: 2px 6px; color: var(--text); }
.m2 .gen-hint { margin: 4px 6px 12px; font-size: .8125rem; color: var(--muted-light); }
.m2-composer .gen-tabs { grid-column: 1; grid-row: 4; margin: 0; width: fit-content; background: var(--pill-bg); padding: 4px; }
.m2-composer .gen-submit-row { grid-column: 2; grid-row: 4; margin: 0; justify-content: flex-end; flex-wrap: wrap; }
.m2-composer .gen-input { grid-row: 1; }
.m2-composer .gen-hint { grid-row: 2; }
.m2-composer .gen-options-toggle { grid-row: 3; }
.m2-composer .gen-toolbar { grid-row: 5; margin-top: 14px; padding-top: 0; border-top: 0; }
.m2-composer #ab-upsell { grid-row: 6; }
.m2-composer #gen-error { grid-row: 7; }
.m2 .gen-tabs .mode-tab { min-height: 38px; font-size: .875rem; padding: 0 16px; }
.m2 .gen-tabs .mode-tab.active { background: var(--text); color: var(--bg); }
.m2 .gen-submit { height: 48px; padding: 0 26px; background: var(--m2-grad); border: 0; color: #fff; box-shadow: 0 10px 24px rgba(107,77,255,.3); }
.m2 .gen-submit:hover { background: var(--m2-grad); filter: brightness(1.06); border: 0; color: #fff; }
html[data-theme="dark"] .m2 .gen-submit { background: var(--m2-grad); color: #fff; }
.m2 .gen-toolbar select { background: var(--bg-input); border-color: var(--border); border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--text-secondary); }
.m2 .gen-toolbar .toggle { border-radius: 999px; background: var(--bg-input); border-color: var(--border); font-size: .8125rem; font-weight: 600; color: var(--text-secondary); }
.m2 .gen-memory summary { font-size: .8125rem; }

/* example chips sit under the glass, centered */
.m2 .example-chips { justify-content: center; margin-top: 18px; align-items: center; }
.m2 .example-chips::before { content: "Try"; font-size: .8125rem; color: var(--muted); margin-right: 2px; }
.m2 .example-chip { background: var(--m2-glass); border-color: var(--m2-glass-border); color: var(--text-secondary); border-radius: 999px; backdrop-filter: blur(8px); }
.m2 .example-chip:hover, .m2 .example-chip:focus-visible { border-color: var(--accent-2); color: var(--accent-2-dark); background: var(--bg-input); }

/* result card appears once there is output */
.m2-result {
  margin-top: 18px; background: var(--m2-glass); border: 1px solid var(--m2-glass-border); border-radius: 22px; padding: 22px 24px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-soft);
}
.m2-result:has(#output.empty:not(.is-loading)):not(:has(#variants-wrap:not(.hidden))) { display: none; }
.m2-result > div:first-child { margin-top: 0 !important; }
.m2-result .gen-field-label { position: static; width: auto; height: auto; clip: auto; font-size: .8125rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--accent-2-dark); margin-bottom: 10px; }
.m2 .gen-output { background: transparent; border: 0; padding: 0; font-size: 1.02rem; line-height: 1.75; min-height: 0; }
.m2 .gen-output.is-loading { min-height: 120px; }
.m2-result .btn { border-radius: 999px; }
.m2-result #copy-btn { background: var(--text); color: var(--bg); border-color: var(--text); }

/* account strip under the generator: quiet glass */
.m2 .rail-compact { max-width: 880px; margin: 0 auto; }
.m2 .rail-compact .rail-card { background: var(--m2-glass); border: 1px solid var(--m2-glass-border); border-radius: 18px; backdrop-filter: blur(10px); }

/* ===== sections below the fold: let the mesh show through ===== */
.m2 .shell-section { position: relative; }
.m2 .shell-footer { position: relative; }
.m2 .lib-card, .m2 .bento-card { background: var(--m2-glass); border-color: var(--m2-glass-border); }

/* ===== phone ===== */
@media (max-width: 860px) {
  .m2 .topbar { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .m2-brand { margin-right: auto; }
  .m2 .tb-search { order: 5; flex: 1 1 100%; }
  .m2 .tb-search input { width: 100%; padding: 0 14px 0 36px; cursor: text; }
  .m2 .tb-search input::placeholder { color: var(--muted-light, #8d89a3); }
  .m2 .example-chips { justify-content: flex-start; margin-right: -14px; }
  .m2 .example-chips::before { display: none; }
  .m2 .acct-strip .status-pill { white-space: nowrap; flex-shrink: 0; }
  .m2-pills { order: 4; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .m2-pills::-webkit-scrollbar { display: none; }
  .m2 .page-head h1 { font-size: 2rem; }
  .m2-composer { padding: 16px; border-radius: 22px; }
  .m2-composer .gen-tabs { grid-column: 1 / -1; grid-row: 3; margin: 8px 0 0; max-width: 100%; overflow-x: auto; }
  .m2-composer .gen-options-toggle { grid-row: 4; justify-self: start; }
  .m2-composer .gen-toolbar { grid-row: 5; }
  .m2-composer .gen-submit-row { grid-column: 1 / -1; grid-row: 6; margin: 12px -16px -16px; }
  .m2-composer #ab-upsell { grid-row: 7; }
  .m2-composer #gen-error { grid-row: 8; }
  .m2-result { padding: 18px; }
}

/* ===== cleaner first view: only headline, box, chips ===== */
.m2 .hero-pill, .m2 .hero-eyebrow, .m2 .gen-hint { display: none; }
.m2-composer .gen-options-toggle { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--m2-glass-border); border-radius: 999px; background: var(--bg-input); color: var(--muted); font: 600 .8125rem inherit; font-family: inherit; cursor: pointer; justify-self: start; }
.m2-composer .gen-options-toggle[aria-expanded="true"] { color: var(--accent-2-dark); border-color: var(--accent-2); }
.m2-composer #gen-toolbar:not(.is-open) { display: none; }
.m2-composer #gen-toolbar { margin-top: 10px; }
@media (min-width: 861px) {
  .m2-composer .gen-options-toggle { grid-row: 4; grid-column: 1; justify-self: start; margin-top: 12px; }
  .m2-composer .gen-tabs { grid-row: 4; }
  .m2-composer .gen-submit-row { grid-row: 3; grid-column: 2; }
  .m2-composer .gen-tabs { grid-row: 3; }
  .m2-composer .gen-toolbar { grid-row: 4; grid-column: 1 / -1; }
}

/* ===== minimal: headline, box, chips ===== */
.m2 .page-head > p:not(.hero-eyebrow) { display: none; }
.m2 .tb-search { display: none; }
.m2 #clear-btn { display: none; }
.m2 .works-strip { display: none; }
.m2-composer .gen-submit-row { margin-left: auto; }
@media (min-width: 861px) { .m2 .topbar { min-height: 56px; } }
@media (min-width: 861px) { .m2 .page-head { padding-top: 56px; } }

/* ===== match mockup: separate pills, inline target picker, no toggle ===== */
.m2 #tb-theme { display: inline-flex; width: 40px; height: 40px; border-radius: 999px; align-items: center; justify-content: center; }
.m2-composer .gen-tabs { background: transparent; padding: 0; gap: 8px; box-shadow: none; border: 0; }
.m2 .gen-tabs .mode-tab { border: 1px solid var(--m2-glass-border); background: var(--bg-input); border-radius: 999px; min-height: 34px; padding: 0 16px; font-size: .8125rem; }
.m2 .gen-tabs .mode-tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }
@media (min-width: 861px) {
  .m2-composer { grid-template-columns: auto auto 1fr auto; }
  .m2-composer > #prompt-input, .m2-composer > textarea { grid-column: 1 / -1; }
  .m2-composer .gen-tabs { grid-row: 3; grid-column: 1; }
  .m2-composer .gen-submit-row { grid-row: 3; grid-column: 4; margin-left: 0; }
  .m2-composer .gen-options-toggle { grid-row: 4; grid-column: 1 / -1; }
  .m2-composer #gen-toolbar:not(.is-open) { display: contents; }
  .m2-composer #gen-toolbar:not(.is-open) > :not(:nth-child(2)) { display: none; }
  .m2-composer #gen-toolbar:not(.is-open) > :nth-child(2) { grid-row: 3; grid-column: 2; margin: 0 0 0 8px; align-self: center; }
  .m2-composer #gen-toolbar.is-open { grid-row: 5; grid-column: 1 / -1; }
}
@media (min-width: 861px) { .m2 .page-head { padding-top: 28px; } }

/* ===== extension vibe: cream + forest + Instrument Serif (light theme) ===== */
html:not([data-theme="dark"]) body.m2 {
  --bg: #F5F2EC; --bg-soft: #EFEBE2; --pill-bg: #ECE7DB;
  --border: #E3DED3; --border-strong: #D3CCBC;
  --text: #1A1A17; --text-secondary: #3a3a33; --muted: #6B675C; --muted-light: #8f8a7c;
  --accent: #1F4D3A; --accent-light: #2a6049; --accent-dark: #173a2c; --accent-glow: rgba(31,77,58,.14);
  --accent-2: #1F4D3A; --accent-2-dark: #173a2c; --accent-2-glow: rgba(31,77,58,.16);
  --nav-active-bg: #E4EDE7; --nav-active-fg: #1F4D3A;
  --shadow-hero: 0 30px 70px rgba(60,55,40,.12); --shadow-soft: 0 24px 48px -32px rgba(60,55,40,.25);
  --m2-glass: rgba(255,255,255,.7); --m2-glass-border: rgba(255,255,255,.9);
  --m2-grad: linear-gradient(135deg, #1F4D3A, #2d6a50);
  background: #F5F2EC;
}
html:not([data-theme="dark"]) body.m2::before {
  background:
    radial-gradient(600px 420px at 8% 4%, rgba(236,220,190,.7), transparent 70%),
    radial-gradient(640px 460px at 96% 14%, rgba(214,226,214,.7), transparent 70%),
    radial-gradient(700px 480px at 55% 108%, rgba(200,224,208,.55), transparent 70%);
}
html:not([data-theme="dark"]) .m2 .gen-submit { box-shadow: 0 10px 24px rgba(31,77,58,.28); }
.m2 .page-head h1 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.01em; font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.02; }
.m2 .page-head > p:not(.hero-eyebrow) { display: block; text-align: center; color: var(--muted); font-size: 1.0625rem; margin-top: 10px; }

/* ===== Instrument Serif, self-hosted (same face as the extension) ===== */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
.m2 #prompt-input::placeholder { font-family: "Instrument Serif", Georgia, serif; font-size: 1.35em; color: var(--muted-light); }
.m2 #prompt-input { font-size: 1.0625rem; }
.m2 .section-head h2, .m2 main h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
.m2 main h2 em { font-style: italic; }

/* ===== phone polish ===== */
.m2 .page-head h1, .m2 .page-head > p { text-wrap: balance; }
@media (max-width: 860px) {
  .m2 .page-head { padding-top: 8px; }
  .m2 .page-head h1 { font-size: 2.35rem; }
  .m2 .page-head > p:not(.hero-eyebrow) { font-size: 1rem; margin-top: 6px; }
  .m2-composer #prompt-input { min-height: 96px; }
  .m2-composer .gen-submit-row { margin: 12px 0 0; width: 100%; }
  .m2-composer .gen-submit { width: 100%; justify-content: center; height: 52px; }
  .m2 .gen-tabs .mode-tab, .m2-composer .gen-options-toggle, .m2-pills a { min-height: 44px; display: inline-flex; align-items: center; }
  .m2 .gen-tabs .mode-tab { padding: 0 14px; }
  .m2-pills { padding: 4px; }
}

/* ===== quiet options: inline dropdowns + switches (m4 style) ===== */
body.m2 .m2-composer #gen-toolbar { display: contents; }
body.m2 .m2-composer #gen-toolbar > .select-wrap { display: inline-flex; grid-row: 3; align-self: center; margin: 0; }
body.m2 .m2-composer #gen-toolbar > .select-wrap:nth-child(1) { grid-column: 2; margin-left: 4px; }
body.m2 .m2-composer #gen-toolbar > .select-wrap:nth-child(2) { grid-column: 3; justify-self: start; }
body.m2 .m2-composer #gen-toolbar > .m2-more { display: none; grid-row: 5; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border); }
body.m2 .m2-composer #gen-toolbar.is-open > .m2-more { display: flex; }
body.m2 .m2-composer #gen-toolbar select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; box-shadow: none;
  color: var(--muted); font: 500 .875rem "Inter", sans-serif; padding: 8px 22px 8px 8px; height: auto; min-height: 36px; border-radius: 10px; cursor: pointer; max-width: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%236B675C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
}
body.m2 .m2-composer #gen-toolbar select:hover { color: var(--text); background-color: var(--pill-bg); }
/* switches instead of square checkboxes */
.m2-more .toggle { border: 0; background: transparent; padding: 4px 0; min-height: 36px; gap: 8px; font-size: .875rem; font-weight: 500; color: var(--muted); }
.m2-more .toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px; background: var(--border-strong); border: 0; position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; }
.m2-more .toggle input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.m2-more .toggle input[type="checkbox"]:checked { background: var(--accent-2); }
.m2-more .toggle input[type="checkbox"]:checked::after { transform: translateX(14px); }
.m2-more .pro-badge { font-size: .625rem; }
.m2-more details.gen-memory { flex-basis: 100%; }
/* Options: quiet text link */
.m2-composer .gen-options-toggle { border: 0 !important; background: transparent !important; padding: 0 4px; min-height: 32px; color: var(--muted); font-weight: 500; }
.m2-composer .gen-options-toggle::after { content: " ▾"; font-size: .75em; }
.m2-composer .gen-options-toggle[aria-expanded="true"]::after { content: " ▴"; }
@media (max-width: 860px) {
  body.m2 .m2-composer #gen-toolbar > .select-wrap { grid-row: 4; }
  body.m2 .m2-composer #gen-toolbar > .select-wrap:nth-child(1) { grid-column: 1; margin-left: -8px; justify-self: start; }
  body.m2 .m2-composer #gen-toolbar > .select-wrap:nth-child(2) { grid-column: 2; justify-self: end; }
  .m2-composer .gen-options-toggle { grid-row: 5; min-height: 44px; }
  body.m2 .m2-composer #gen-toolbar > .m2-more { grid-row: 6; }
  .m2-composer .gen-submit-row { grid-row: 7; }
  .m2-composer #ab-upsell { grid-row: 8; }
  .m2-composer #gen-error { grid-row: 9; }
}
.m2 .m2-more .toggle, .m2 .gen-toolbar .m2-more .toggle { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.m2-composer .gen-options-toggle::after { margin-left: 4px; }

/* ===== shorter input, clearer labels ===== */
.m2 .gen-input { min-height: 56px; resize: none; }
@media (max-width: 860px) { .m2-composer #prompt-input { min-height: 64px; } }
body.m2 .m2-composer #gen-toolbar > .select-wrap::before { font-size: .8125rem; color: var(--muted-light); margin-right: -2px; padding-left: 8px; }
body.m2 .m2-composer #gen-toolbar > .select-wrap:nth-child(1)::before { content: "Style"; }
body.m2 .m2-composer #gen-toolbar > .select-wrap:nth-child(2)::before { content: "For"; }
body.m2 .m2-composer #gen-toolbar select { padding-left: 4px; font-weight: 600; color: var(--text-secondary); }
@media (max-width: 860px) {
  .m2-composer .gen-submit-row { flex-wrap: wrap; }
  .m2-composer .gen-submit-row .gen-status { flex-basis: 100%; text-align: center; order: 2; margin-top: 6px; }
  .m2-composer .gen-submit-row .gen-status:empty { display: none; }
}

/* ===== simplest first view: tabs + Generate only; Style/For/A-B/Memory all live in Options ===== */
body.m2 .m2-composer #gen-toolbar > .select-wrap { display: none; }
body.m2 .m2-composer #gen-toolbar.is-open {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; grid-row: 5; grid-column: 1 / -1;
  padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border);
}
body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap { display: inline-flex; grid-row: auto; grid-column: auto; margin: 0; }
body.m2 .m2-composer #gen-toolbar.is-open > .m2-more { display: contents; border: 0; padding: 0; margin: 0; }
body.m2 .m2-composer #gen-toolbar.is-open details.gen-memory { flex-basis: 100%; }
@media (min-width: 861px) {
  .m2-composer { grid-template-columns: 1fr auto; }
  .m2-composer .gen-tabs { grid-column: 1; }
  .m2-composer .gen-submit-row { grid-column: 2; }
}
@media (max-width: 860px) {
  .m2-composer .gen-options-toggle { grid-row: 4; }
  body.m2 .m2-composer #gen-toolbar.is-open { grid-row: 5; }
  .m2-composer .gen-submit-row { grid-row: 6; }
  .m2-composer #ab-upsell { grid-row: 7; }
  .m2-composer #gen-error { grid-row: 8; }
}

/* ===== mode selector moved to the top of the box, as quiet text tabs ===== */
.m2-composer .gen-tabs, .m2-composer .gen-tabs[class] { grid-row: 1; grid-column: 1 / -1; width: auto; max-width: 100%; margin: 0 0 6px; padding: 0; background: transparent; border: 0; box-shadow: none; gap: 4px; justify-self: start; }
.m2 .gen-tabs .mode-tab { min-height: 32px; padding: 0 12px; background: transparent; border: 0; border-radius: 999px; color: var(--muted-light); font-size: .875rem; font-weight: 500; }
.m2 .gen-tabs .mode-tab:hover { color: var(--text); background: var(--pill-bg); }
.m2 .gen-tabs .mode-tab.active { background: var(--pill-bg); color: var(--accent-2); border: 0; font-weight: 700; }
.m2-composer #prompt-input, .m2-composer .gen-input { grid-row: 2; }
.m2-composer .gen-options-toggle { grid-row: 3; grid-column: 1; }
.m2-composer .gen-submit-row { grid-row: 3; }
body.m2 .m2-composer #gen-toolbar.is-open { grid-row: 4; }
.m2-composer #ab-upsell { grid-row: 5; }
.m2-composer #gen-error { grid-row: 6; }
@media (min-width: 861px) { .m2-composer .gen-options-toggle { align-self: center; margin-top: 0; } }
@media (max-width: 860px) {
  .m2-composer .gen-tabs, .m2-composer .gen-tabs[class] { margin: 0 0 4px -4px; overflow-x: auto; }
  .m2 .gen-tabs .mode-tab { min-height: 44px; }
  .m2-composer .gen-options-toggle { grid-row: 3; grid-column: 1 / -1; }
  body.m2 .m2-composer #gen-toolbar.is-open { grid-row: 4; }
  .m2-composer .gen-submit-row { grid-row: 5; }
  .m2-composer #ab-upsell { grid-row: 6; }
  .m2-composer #gen-error { grid-row: 7; }
}

/* ===== Inter, self-hosted (variable, latin) so pages need no third-party font request ===== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
.m2 .final-cta h2 em, .m2 main h2 em { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-style: italic; }

/* ===== below the fold: bring every section onto the cream/forest palette (light theme) ===== */
html:not([data-theme="dark"]) body.m2 {
  --soft-panel: #ECE8DD; --card-dark-bg: #1F4D3A; --card-dark-fg: #fff; --card-dark-muted: rgba(255,255,255,.78);
  --wa-fg: #1F4D3A; --glow-1: rgba(214,226,214,.9); --glow-2: rgba(245,242,236,0);
}
.m2 .lib-tag { color: var(--accent-2); border-color: rgba(31,77,58,.25); }
.m2 .feat:nth-child(4) .feat-num { background: rgba(255,255,255,.16); color: #fff; }
.m2 .faq-list summary::before, .m2 .faq-list summary::marker { color: var(--accent-2); }
.m2 .faq-list { max-width: 820px; width: 100%; margin-left: auto; margin-right: auto; }
.m2 .faq-list details { width: 100%; }
.m2 .final-cta { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(236,232,221,.7)); border-color: var(--border); }
.m2 .final-cta .cta-btn, .m2 .final-cta .btn { background: var(--accent-2); color: #fff; }
.m2 .shell-section:has(.steps-row) { background: var(--soft-panel); }
.m2 .step-number { background: var(--accent-2); color: #fff; }
.m2 .mode-links a { background: var(--bg-input); }
@media (max-width: 860px) {
  .m2 .mode-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0; list-style: none; }
  .m2 .mode-links li { display: block; }
  .m2 .mode-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; font-size: .875rem; }
}
.m2 .shell-footer { background: transparent; border-top-color: var(--border); position: relative; z-index: 1; }

/* ===== result card: Copy first, nudge last ===== */
.m2-result .m2-out { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: 0 !important; }
.m2-result .m2-out > .gen-field-label { flex: 1 1 100%; order: 1; margin: 0; }
.m2-result .m2-out > #output { flex: 1 1 100%; order: 2; }
.m2-result .m2-out > .m2-copyrow { order: 3; margin: 6px 0 0 !important; gap: 8px; flex-wrap: nowrap; }
.m2-result .m2-out > #output-actions { order: 4; margin: 6px 0 0 !important; }
.m2-result .m2-out > #output-meta { order: 5; margin: 6px 0 0 auto !important; }
.m2-result .m2-out > #after-result { order: 6; flex: 1 1 100%; margin-top: 8px; }
.m2-result #copy-msg { display: none; }
.m2-result #copy-btn { background: var(--accent-2); color: #fff; border-color: var(--accent-2); font-weight: 600; min-height: 44px; padding: 0 22px; }
.m2-result #copy-btn:hover { background: var(--accent-2-dark); border-color: var(--accent-2-dark); }
.m2-result #share-btn, .m2-result #output-actions .btn { min-height: 44px; padding: 0 16px; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); }
/* the loading/"Done" line next to Generate is noise: the button already says "Generating…"; errors have their own box */
.m2-composer #gen-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) {
  .m2-result .m2-out > #output-meta { margin-left: 0 !important; flex: 1 1 100%; order: 5; }
}
/* Clear comes back once there is something to clear */
.m2 .gen-panel:has(#output.has-content) #clear-btn, .m2 .gen-main:has(#output.has-content) #clear-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: transparent; border: 0; color: var(--muted); }

/* ===== mode picker: one quiet dropdown instead of tabs ===== */
.m2-composer .gen-tabs, .m2-composer .gen-tabs[class] { position: relative; overflow: visible; display: block; margin: 0 0 8px; }
.m2 .mode-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--m2-glass-border); background: var(--bg-input); color: var(--muted-light); border-radius: 999px; font: inherit; font-size: .875rem; cursor: pointer; }
.m2 .mode-trigger b { color: var(--accent-2); font-weight: 700; }
.m2 .mode-trigger svg { color: var(--muted-light); margin-left: 2px; }
.m2 .mode-trigger:hover { border-color: var(--accent-2); }
.m2 .mode-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 260px; padding: 6px; background: var(--bg-input); border: 1px solid var(--m2-glass-border); border-radius: 16px; box-shadow: 0 12px 32px rgba(31,77,58,.16); }
.m2 .mode-menu[hidden] { display: none; }
.m2 .gen-tabs .mode-menu .mode-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 10px; text-align: left; background: transparent; color: var(--text); font-size: .9375rem; font-weight: 600; }
.m2 .gen-tabs .mode-menu .mode-tab small { font-size: .75rem; font-weight: 400; color: var(--muted-light); }
.m2 .gen-tabs .mode-menu .mode-tab:hover { background: var(--pill-bg); }
.m2 .gen-tabs .mode-menu .mode-tab.active { background: var(--pill-bg); color: var(--accent-2); }
@media (max-width: 860px) {
  .m2-composer .gen-tabs, .m2-composer .gen-tabs[class] { margin: 0 0 8px; overflow: visible; }
  .m2 .mode-trigger { min-height: 44px; }
  .m2 .mode-menu { min-width: min(300px, calc(100vw - 48px)); }
  .m2 .gen-tabs .mode-menu .mode-tab { min-height: 52px; }
}
.m2 .gen-main { position: relative; z-index: 5; }
.m2-composer { position: relative; z-index: 20; }
.m2 #example-chips { position: relative; z-index: 1; }

/* ===== account strip: always reachable (usage, sign in/out, upgrade), but quiet ===== */
.m2 .rail-compact { margin-top: 14px; }
.m2 .rail-compact .rail-card.acct-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; font-size: .8125rem; }
.m2 .acct-strip .acct-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m2 .acct-strip .usage-bar { display: none; }
.m2 .acct-strip #usage-label { margin: 0; }
.m2 .acct-strip .acct-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.m2 .acct-strip .btn { min-height: 36px; border-radius: 999px; }
.m2 .acct-strip #upgrade-btn { background: transparent; color: var(--accent-2); border: 1px solid var(--accent-2); box-shadow: none; }
.m2 .acct-strip #signin-btn { display: none; } /* the top-right Sign in pill does this */
.m2 .acct-strip #signin-btn:not(.hidden) { display: none; }
@media (max-width: 860px) { .m2 .acct-strip .acct-actions { margin-left: 0; width: 100%; } .m2 .acct-strip .btn { min-height: 44px; } .m2 .acct-strip #upgrade-btn { flex: 1; } }
.m2 .rail-compact .rail-link { display: none; } /* History is in the top nav */
.m2 .rail-compact .rail-card.acct-strip { justify-content: center; }

/* ===== spacing + rhythm pass ===== */
.m2 .shell-section, .m2 .shell-content > section { max-width: 1040px; margin-left: auto; margin-right: auto; }
.m2 .shell-section { margin-bottom: 88px; }
.m2 .shell-section-head, .m2 #how .shell-section-head { align-items: center; text-align: center; margin-bottom: 28px; gap: 8px; }
.m2 #how .shell-section-head p { margin-left: auto; }
.m2 #how { padding: 40px; }
.m2 #how .steps-row { gap: 28px; }
.m2 .feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.m2 .feat:nth-child(n) { grid-column: auto; min-height: 0; padding: 28px; }
.m2 .feat h3 { margin-bottom: 8px; }
.m2 .feat-num { margin-bottom: 18px; }
.m2 .faq-list { margin-top: 0; }
.m2 .final-cta { padding: 56px 32px; }
.m2 .acct-strip .acct-top { gap: 10px; }
.m2 .rail-compact { margin-top: 20px; margin-bottom: 72px; }
.m2 .m2-composer + #example-chips, .m2 #example-chips { margin-top: 18px; }
@media (max-width: 860px) {
  .m2 .shell-section { margin-bottom: 64px; }
  .m2 #how { padding: 28px 20px; }
  .m2 #how .steps-row { gap: 22px; }
  .m2 .feat-list { grid-template-columns: 1fr; gap: 12px; }
  .m2 .feat:nth-child(n) { padding: 22px; }
  .m2 .final-cta { padding: 40px 20px; }
  .m2 .rail-compact { margin-bottom: 56px; }
}
.m2 #lib-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.m2 #lib-grid .lib-card { padding: 20px; }
.m2 .lib-tabs { margin-bottom: 4px; }
.m2 .feat:nth-child(n) { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.m2 .feat .feat-num { flex: none; }
@media (max-width: 1000px) { .m2 #lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .m2 #lib-grid { grid-template-columns: 1fr; gap: 10px; }
  .m2 #lib-grid .lib-card:nth-child(n+5) { display: none; }
  .m2 .lib-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 22px; padding: 4px; gap: 4px; }
  .m2 .lib-tab { padding: 0 10px; justify-content: center; }
  .m2 .mode-links ul { gap: 8px; }
  .m2 .acct-strip .acct-top { justify-content: center; text-align: center; width: 100%; }
  .m2 .rail-compact .rail-card.acct-strip { justify-content: center; text-align: center; padding: 6px 8px; }
  .m2 #usage-label { width: 100%; text-align: center; }
}

/* ===== options panel: clean two-column fields, then toggles, then memory ===== */
body.m2 .m2-composer #gen-toolbar.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; align-items: start; padding: 18px 0 4px; margin-top: 14px; border-top: 1px solid var(--border); }
body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; padding: 0; grid-row: auto; grid-column: auto; justify-self: stretch; position: relative; }
body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap::before { padding: 0; margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-light); }
body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap:nth-child(1)::before { content: "Style"; }
body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap:nth-child(2)::before { content: "Write it for"; }
body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap select { width: 100%; min-height: 44px; padding: 0 36px 0 16px; border-radius: 12px; font-size: .9375rem; font-weight: 500; color: var(--text); background-color: var(--bg-input); border: 1px solid var(--border); }
body.m2 .m2-composer #gen-toolbar.is-open > .m2-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; grid-column: 1 / -1; padding: 0; margin: 0; border: 0; }
body.m2 .m2-composer #gen-toolbar.is-open .m2-more .toggle { min-height: 40px; padding: 0; }
body.m2 .m2-composer #gen-toolbar.is-open details.gen-memory { flex: 1 1 100%; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
body.m2 .m2-composer #gen-toolbar.is-open .gen-memory summary { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-light); cursor: pointer; }
@media (max-width: 860px) {
  body.m2 .m2-composer #gen-toolbar.is-open { grid-template-columns: 1fr; gap: 14px; }
  body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap:nth-child(n) { margin: 0; justify-self: stretch; }
  body.m2 .m2-composer #gen-toolbar.is-open > .m2-more { gap: 2px 24px; }
}
body.m2 .m2-composer #gen-toolbar.is-open { grid-auto-rows: auto; align-content: start; }
body.m2 .m2-composer #gen-toolbar.is-open > .m2-more, body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap:nth-child(n) { grid-row: auto; }
body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap:nth-child(1) { grid-column: 1; }
body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap:nth-child(2) { grid-column: 2; }
@media (max-width: 860px) { body.m2 .m2-composer #gen-toolbar.is-open > .select-wrap:nth-child(n) { grid-column: 1; } }

/* ===== brand + extension ===== */
.m2-brand { gap: 10px; }
.m2-brand img { width: 36px; height: 36px; border-radius: 10px; }
.m2-brand span { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; line-height: 1; }
.m2-ext { display: none; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--m2-glass-border); background: var(--m2-glass); color: var(--text); font-size: .875rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.m2-ext:hover { border-color: var(--accent-2); color: var(--accent-2); }
@media (min-width: 1000px) { .m2-ext { display: inline-flex; } }
.m2-extcard { display: flex; align-items: center; gap: 16px; max-width: 880px; margin: 0 auto 72px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 20px; background: var(--m2-glass); backdrop-filter: blur(10px); }
.m2-extcard img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.m2-extcard div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .875rem; color: var(--muted); }
.m2-extcard strong { color: var(--text); font-size: 1rem; font-weight: 600; }
.m2-extcard-btn { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--accent-2); color: #fff; font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
html[data-theme="dark"] .m2-extcard-btn { color: #0E1A13; }
.m2 .rail-compact { margin-bottom: 24px; }
@media (max-width: 860px) {
  .m2-brand span { font-size: 1.375rem; }
  .m2-extcard { flex-wrap: wrap; margin: 0 0 56px; padding: 16px; }
  .m2-extcard-btn { width: 100%; justify-content: center; }
}

/* ===== usage line + limit nudge: calm, centered, no yellow box ===== */
.m2 .acct-strip { flex-direction: column; align-items: center; gap: 10px; }
.m2 .acct-strip .acct-top { display: contents; }
.m2 .acct-strip .acct-who { order: 2; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8125rem; }
.m2 .acct-strip .acct-who .status-pill.free { display: none; }
.m2 .acct-strip .auth-row { order: 3; }
.m2 .acct-strip #usage-label { order: 1; margin: 0; font-size: .8125rem; color: var(--text-secondary); font-weight: 500; }
.m2 .acct-strip .usage-nudge { order: 4; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; width: 100%; max-width: 560px; margin: 4px auto 0; padding: 12px 16px; background: var(--soft-panel); border: 1px solid var(--border); border-radius: 16px; color: var(--text); font-size: .875rem; text-align: center; }
.m2 .acct-strip .usage-nudge.warn, .m2 .acct-strip .usage-nudge.soft { background: var(--soft-panel); border: 1px solid var(--border); color: var(--text); }
.m2 .acct-strip .usage-nudge span { flex: 0 1 auto; }
.m2 .acct-strip .usage-nudge .btn { align-self: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--accent-2); color: #fff; border-color: var(--accent-2); font-weight: 600; box-shadow: none; }
html[data-theme="dark"] .m2 .acct-strip .usage-nudge .btn { color: #0E1A13; }
.m2 .acct-strip .acct-actions { order: 5; margin-left: 0; justify-content: center; }
@media (max-width: 860px) {
  .m2 .acct-strip .usage-nudge { flex-direction: column; }
  .m2 .acct-strip .usage-nudge .btn { width: 100%; min-height: 44px; }
  .m2 .acct-strip .acct-top { width: auto; }
}
@media (min-width: 861px) { .m2 .acct-strip .usage-nudge .btn { width: auto !important; flex: 0 0 auto; } }
.m2 .acct-strip:has(.usage-nudge:not(.hidden)) .acct-who { display: none; }
.m2 #user-label[data-guest] { display: none; } /* the top-right Sign in already covers this */
.m2 .acct-strip:has(#user-label[data-guest]) .acct-who { display: none; }

/* ===== extension mention: a quiet line, desktop only ===== */
.m2-extcard { display: none; }
.m2-extline { max-width: 880px; margin: 0 auto 72px; text-align: center; font-size: .875rem; color: var(--muted); }
.m2-extline a { color: var(--accent-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.m2-extline a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* phones can't install Chrome extensions: no extension promos at all */
@media (max-width: 860px) {
  .m2-extline, .m2-ext, .m2 .tb-cta, .m2 .hero-pill, .m2 .shell-footer a[href*="chromewebstore"], .nav .cta, .nav nav a.cta { display: none !important; }
  .m2 .shell-footer li:has(> a[href*="chromewebstore"]) { display: none; }
}

/* ===== signed-in account: one tidy row (plan, manage, sign out) + Account link in the top bar ===== */
.m2 .rail-compact .rail-card.acct-strip { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; }
.m2 .acct-strip #usage-label { flex: 1 1 100%; text-align: center; }
.m2 .acct-strip .acct-who, .m2 .acct-strip .auth-row, .m2 .acct-strip .acct-actions { order: 2; width: auto; margin: 0; }
.m2 .acct-strip .acct-actions { display: inline-flex; gap: 8px; }
.m2 .acct-strip .auth-row .btn, .m2 .acct-strip #portal-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text); min-height: 36px; padding: 0 16px; border-radius: 999px; font-weight: 600; }
.m2 .acct-strip #upgrade-msg { flex-basis: 100%; text-align: center; }
.m2 .m2-account { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: .875rem; font-weight: 600; text-decoration: none; }
.m2 .m2-account.hidden { display: none; }
@media (max-width: 860px) { .m2 .m2-account { min-height: 44px; } .m2 .acct-strip .acct-actions { width: auto; } .m2 .acct-strip .auth-row .btn, .m2 .acct-strip #portal-btn { min-height: 44px; } }
.m2 .acct-strip .auth-row .btn, .m2 .acct-strip #portal-btn { white-space: nowrap; padding: 0 12px; font-size: .8125rem; }
.m2 .acct-strip .acct-who { flex: 1 1 100%; justify-content: center; text-align: center; }

/* ===== homepage polish: flat, airy sections instead of beige slabs ===== */
.m2 .shell-section:has(.steps-row), .m2 #how { background: transparent; border: 0; box-shadow: none; padding: 24px 0 8px; }
.m2 #how .steps-row { gap: 20px; counter-reset: s; }
.m2 #how .step-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: 0 1px 2px rgba(60,55,40,.04); }
.m2 #how .step-number { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(31,77,58,.1); color: var(--accent-2); font-weight: 700; font-size: .8125rem; margin-bottom: 14px; }
.m2 #how .step-card h3 { margin-bottom: 6px; }
.m2 .feat:nth-child(-n+3) { background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(60,55,40,.04); }
.m2 .feat:nth-child(-n+3) .feat-num { background: rgba(31,77,58,.1); color: var(--accent-2); }
.m2 .shell-section { margin-top: 72px; }
.m2 .shell-section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); }
.m2 .final-cta { background: var(--accent-2); border-color: var(--accent-2); }
.m2 .final-cta h2, .m2 .final-cta h2 em { color: #fff; }
.m2 .final-cta p { color: rgba(255,255,255,.78); }
.m2 .final-cta .cta-btn, .m2 .final-cta .btn { background: #fff; color: var(--accent-2); border-color: #fff; box-shadow: none; }
@media (max-width: 860px) { .m2 .shell-section { margin-top: 52px; } .m2 #how { padding: 8px 0; } }
.m2 .mode-pro { font-style: normal; font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; margin-left: 6px; border-radius: 999px; background: rgba(31,77,58,.12); color: var(--accent-2); vertical-align: 1px; }
.m2 .mode-tab.is-locked { opacity: .8; cursor: pointer; }
.m2 .mode-tab.is-locked:hover { background: var(--bg-soft); }

/* ===== account strip, final layout (supersedes the layered rules above) =====
   1. usage line   2. upgrade panel (only near/at the limit)   3. one quiet row:
   "Signed in as …" · Sign out · Manage subscription / Upgrade                    */
.m2 .rail-compact .rail-card.acct-strip { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; padding: 8px 12px; text-align: center; }
.m2 .acct-strip #usage-label { order: 1 !important; flex: 1 1 100% !important; text-align: center; margin: 0; }
.m2 .acct-strip .usage-nudge { order: 2 !important; margin: 2px auto 4px !important; }
.m2 .acct-strip .acct-who { order: 3 !important; flex: 0 0 auto !important; display: inline-flex !important; width: auto; margin: 0; font-size: .8125rem; color: var(--muted); }
.m2 .acct-strip .auth-row { order: 4 !important; flex: 0 0 auto; width: auto; margin: 0; }
.m2 .acct-strip .acct-actions { order: 5 !important; flex: 0 0 auto; width: auto !important; margin: 0 !important; display: inline-flex; gap: 10px; }
.m2 .acct-strip #upgrade-msg { order: 6; flex: 1 1 100%; text-align: center; }
.m2 .acct-strip:has(#user-label[data-guest]) .acct-who { display: none !important; }
/* quiet text-style controls in that last row */
.m2 .acct-strip .auth-row .btn, .m2 .acct-strip #portal-btn { background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 32px; padding: 0 4px; font-size: .8125rem; font-weight: 600; color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.m2 .acct-strip #upgrade-btn { min-height: 34px; padding: 0 14px; font-size: .8125rem; }
/* the panel already carries an Upgrade button, so hide the duplicate */
.m2 .acct-strip:has(.usage-nudge:not(.hidden)) #upgrade-btn { display: none !important; }
.m2 .acct-strip .auth-row { display: inline-flex !important; align-items: center; }
.m2 .acct-strip .usage-nudge { flex: 1 1 100% !important; max-width: 560px !important; }
.m2 .acct-strip .acct-who { align-items: center; }
@media (max-width: 860px) {
  .m2 .acct-strip .auth-row .btn, .m2 .acct-strip #portal-btn { min-height: 40px; padding: 0 8px; }
  .m2 .acct-strip #upgrade-btn { min-height: 44px; flex: none; }
}
/* force the account links onto their own line below the panel */
.m2 .acct-strip::after { content: ""; order: 2; flex: 1 1 100%; height: 0; }
.m2 .acct-strip .usage-nudge { max-width: 560px !important; }

/* Name, Sign out and billing live on the Account page now; the home strip is just usage + upgrade. */
.m2 .acct-strip .acct-who, .m2 .acct-strip .auth-row, .m2 .acct-strip #portal-btn { display: none !important; }

/* before/after: the short "You type" card keeps its own height */
.ba-grid { align-items: start; }
.ba-arrow { align-self: center; }
.how-ext { max-width: 760px; margin: 20px auto 0; text-align: center; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.how-ext a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
body.m2 { --accent-2-ring: rgba(31,77,58,.18); }
/* phones: spread the four nav pills evenly so the bar is centered */
@media (max-width: 760px) {
  .m2-pills { display: flex; justify-content: space-between; gap: 2px; }
  .m2-pills a { flex: 1 1 auto; justify-content: center; padding-left: 12px; padding-right: 12px; }
}
.m2 .example-chip:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }