/* =============================================================================
   Shared styles for the signup / account screens
   =============================================================================
   Plain CSS with no build step: these pages must render before any JS runs and
   must keep working if the JS bundle fails, because they are the only path a
   new customer has into the product.
   ========================================================================== */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e3e6ea;
  --text: #14181d;
  --text-muted: #5d6873;
  /* Brand green, taken from the "Auto" half of the wordmark. */
  --accent: #3fbf4f;
  --accent-hover: #35a643;
  --wordmark: #1e2530;
  --accent-contrast: #ffffff;
  --danger: #c8372d;
  --danger-bg: #fdeceb;
  --success: #0f7b3f;
  --success-bg: #e8f6ee;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 24, 29, 0.04), 0 4px 16px rgba(20, 24, 29, 0.06);
}

/* テーマは3値: /settings の表示テーマで選んだ明示値（localStorage lh_theme →
   各ページ冒頭の inline script が data-theme に反映）が最優先、未選択なら OS に
   追従する。ダークの変数は2ブロックに同じ値で現れる — CSS に「この変数セットを
   別名で再利用」する構文が無いため。編集時は両方を揃えること。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14181d;
    --surface: #1c2127;
    --border: #2c333b;
    --text: #eef1f4;
    --text-muted: #9aa5b1;
    --wordmark: #eef1f4;
    --danger: #ff8b81;
    --danger-bg: #3a1e1c;
    --success: #6ee7a0;
    --success-bg: #16301f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme='dark'] {
  --bg: #14181d;
  --surface: #1c2127;
  --border: #2c333b;
  --text: #eef1f4;
  --text-muted: #9aa5b1;
  --wordmark: #eef1f4;
  --danger: #ff8b81;
  --danger-bg: #3a1e1c;
  --success: #6ee7a0;
  --success-bg: #16301f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px 64px;
  /* -apple-system first so this renders in SF on Apple devices, which is
     what carries most of the typographic character. */
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Segoe UI', sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: 420px; margin: 0 auto; }
.shell--wide { max-width: 880px; }

/* ── Brand lockup ──────────────────────────────────────────────────────────
   The mark is an <img> and the wordmark is live text rather than one flat
   image: the text stays selectable, scales with the user's font size, and
   recolours for dark mode, none of which a raster lockup can do.
   ------------------------------------------------------------------------ */

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 32px;
  text-decoration: none;
}

.brand__mark {
  width: 38px;
  height: 36px;
  flex: none;
}

.brand__text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wordmark);
  white-space: nowrap;
}

.brand__auto { color: var(--accent); }

/* Tagline. Shown on the landing and signup screens, where a first-time
   visitor still needs telling what this is. */
.brand__tagline {
  margin: -20px 0 32px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}

h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: 0.01em; }
h2 { margin: 32px 0 12px; font-size: 16px; }
.lede { margin: 0 0 28px; color: var(--text-muted); font-size: 14px; }

/* ── Forms ─────────────────────────────────────────────────────────────── */

.field { margin-bottom: 20px; }

label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.hint { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; font-weight: 400; }

/* Every text-like input, by exclusion rather than by listing types. The list
   version had missed `tel`, so the phone field on signup rendered unstyled
   next to four that were — and would have missed the next type added too. */
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='file']),
textarea {
  width: 100%;
  padding: 11px 13px;
  font-size: 16px; /* 16px stops iOS Safari zooming the page on focus */
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63, 191, 79, 0.18);
}

input[aria-invalid='true'] { border-color: var(--danger); }
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63, 191, 79, 0.18); }

/* ── Password reveal ──────────────────────────────────────────────────────
   Sits inside the field so the input keeps its full width; the input gets
   right padding so long text never slides under the button. */
.pw { position: relative; }
.pw input { padding-right: 46px; }
.pw__toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 8px;
}
.pw__toggle:hover { color: var(--text); }
.pw__toggle svg { width: 19px; height: 19px; }

.btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--accent-contrast);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  /* Anchors styled as buttons: without these an <a class="btn"> renders
     underlined and left-aligned, which reads as a broken button rather than
     a link. */
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

.btn:hover:not(:disabled) { background: var(--accent-hover); }
/* Grey, not just faded: a disabled button should read as unavailable at a
   glance, not as one that failed to render. */
.btn:disabled {
  opacity: 1;
  cursor: not-allowed;
  color: var(--text-muted);
  background: var(--bg);
  border-color: var(--border);
}

.btn--secondary {
  color: var(--text);
  background: transparent;
  border-color: var(--border);
}
.btn--secondary:hover:not(:disabled) { background: var(--bg); }

/* ── Feedback ──────────────────────────────────────────────────────────── */

.alert {
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.alert--error { color: var(--danger); background: var(--danger-bg); }
.alert--success { color: var(--success); background: var(--success-bg); }
.alert[hidden] { display: none; }

.meta {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.meta a { color: var(--text); }

a { color: var(--accent); }

/* ── Plans ─────────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 24px;
}

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.plan--featured { border-color: var(--accent); border-width: 2px; }

.plan__badge {
  position: absolute;
  top: -11px;
  left: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 999px;
}

.plan__name { font-size: 14px; font-weight: 700; margin: 0; }
.plan__price { margin: 8px 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.plan__price small { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.plan__audience { margin: 0 0 16px; font-size: 13px; color: var(--text-muted); }

.plan__features { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.plan__features li { padding: 4px 0 4px 20px; position: relative; }
.plan__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ── Usage ─────────────────────────────────────────────────────────────── */

.usage { margin: 4px 0 0; }
.usage__bar {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.usage__fill { height: 100%; background: var(--accent); border-radius: 999px; }
.usage__fill--warn { background: #e8a33d; }
.usage__fill--over { background: var(--danger); }

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.row:last-child { border-bottom: none; }
.row dt { color: var(--text-muted); margin: 0; }
.row dd { margin: 0; font-weight: 600; }

/* ── Onboarding steps ──────────────────────────────────────────────────── */

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 40px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.step:last-child { border-bottom: none; }
.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 14px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
}
.step--done::before {
  content: '✓';
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
}
.step__title { font-weight: 600; }
.step__body { color: var(--text-muted); font-size: 13px; }

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

/* ── Legal documents ───────────────────────────────────────────────────────
   Terms, privacy policy and the 特定商取引法 disclosure. Long-form prose, so
   the measure is narrower than the app screens and the type is set for reading
   rather than scanning.
   ------------------------------------------------------------------------ */

.legal { font-size: 14px; }
.legal h2 {
  margin: 36px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 16px;
}
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 24px; }
.legal h3 { margin: 20px 0 8px; font-size: 14px; }
.legal p { margin: 0 0 12px; }
.legal ol, .legal ul { margin: 0 0 12px; padding-left: 1.6em; }
.legal li { margin-bottom: 6px; }
.legal ol ol { margin-top: 6px; list-style-type: lower-roman; }

/* 特商法 disclosure: label/value pairs that must stay readable on a phone. */
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-table th,
.legal-table td {
  padding: 14px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.legal-table th {
  width: 34%;
  padding-right: 16px;
  font-weight: 600;
  color: var(--text-muted);
}
@media (max-width: 560px) {
  .legal-table th, .legal-table td { display: block; width: 100%; padding: 0; }
  .legal-table th { padding-top: 14px; border-bottom: none; }
  .legal-table td { padding: 2px 0 14px; }
}

/* Unfilled mandatory fields. Loud on purpose — 特商法 disclosure is a legal
   requirement, and shipping it with a gap is worse than shipping it late. */
.todo {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--danger);
}

.legal-updated { margin-top: 40px; font-size: 13px; color: var(--text-muted); text-align: right; }

/* =============================================================================
   Landing page
   =============================================================================
   Restrained, type-led layout: very large tight headlines, generous vertical
   rhythm, almost no borders, colour used only where it means something.
   Everything is prefixed .lp- so it cannot leak into the account screens,
   which share this stylesheet.
   ========================================================================== */

.lp { max-width: 1080px; margin: 0 auto; }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 56px;
}
.lp-nav .brand { margin: 0; min-width: 0; }
/* The actions keep their intrinsic width; the wordmark is what gives way. */
.lp-nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Pill buttons. The shape does most of the work in setting the tone. */
.btn--sm {
  display: inline-block;
  width: auto;
  /* Without this the nav's flex squeeze wins over the text: at 375px the
     buttons were compressed past their content width and Japanese, which has
     no spaces to break on, wrapped one character per line. */
  white-space: nowrap;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 980px;
  text-decoration: none;
  text-align: center;
}

.lp .btn {
  border-radius: 980px;
  padding: 14px 30px;
  font-size: 15px;
  letter-spacing: 0.01em;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.lp-hero { text-align: center; padding: 40px 0 0; }

.lp-hero h1 {
  margin: 0 0 24px;
  /* Tight tracking at display sizes is the single biggest lever on how
     considered large type looks. */
  /* Capped at 52px so the longer headline holds its two intended lines. At
     68px the first clause overflowed and pushed 「を、」 onto a line of its
     own — an orphaned particle, which reads as a mistake in Japanese. */
  font-size: clamp(28px, 5.2vw, 52px);
  line-height: 1.28;
  letter-spacing: -0.03em;
  font-weight: 700;
  /* Keep the browser from breaking inside a clause if it wraps anyway. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.lp-hero__sub {
  max-width: 640px;
  margin: 0 auto 36px;
  color: var(--text-muted);
  font-size: clamp(15px, 2.4vw, 19px);
  line-height: 1.75;
  letter-spacing: -0.01em;
}

.lp-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 460px;
  margin: 0 auto;
}
.lp-cta .btn { flex: 0 1 auto; min-width: 190px; text-decoration: none; text-align: center; }

.lp-hero__note { margin-top: 18px; font-size: 12.5px; color: var(--text-muted); }
/* The separator hangs off the END of each item, not the start of the next one.
   Attached to the next item it wraps together with it and ends up leading the
   line, which is exactly the thing being avoided. */
.lp-hero__note span { display: inline-block; }
.lp-hero__note span:not(:last-child)::after {
  content: '・';
  margin: 0 0.15em;
  opacity: 0.55;
}

/* Hero image, full-bleed within the measure and softly grounded. */
.lp-figure { margin: 64px auto 0; max-width: 940px; }
.lp-figure img,
.lp-figure svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}
.lp-figure img {
  box-shadow: 0 24px 70px -24px rgba(20, 24, 29, 0.28);
}
/* Guarded like the variable block at the top: OS-dark must lose to an
   explicit light choice in /settings, or these pieces stay dark in a page
   the user asked to be light. That exact bug shipped on .lp-card. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .lp-figure img { box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.7); }
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.lp-section { padding: 120px 0; }
/* Hairline dividers rather than boxes — the whitespace separates, the rule
   only confirms it. */
.lp-section + .lp-section { border-top: 1px solid var(--border); }

.lp-section__label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
}
.lp-section h2 {
  margin: 0 0 18px;
  font-size: clamp(26px, 4.6vw, 42px);
  line-height: 1.3;
  letter-spacing: -0.025em;
  font-weight: 700;
  border: none;
  padding: 0;
}
.lp-section__lede {
  margin: 0 0 52px;
  color: var(--text-muted);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.8;
  max-width: 620px;
}

.lp-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Cards are surfaces, not boxes: no border, just a lift off the page. */
.lp-card {
  background: var(--surface);
  border: none;
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.04), 0 8px 28px -12px rgba(20, 24, 29, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .lp-card { box-shadow: none; background: #20262e; }
}
.lp-card__icon { width: 42px; height: 42px; margin-bottom: 18px; display: block; }
.lp-card h3 {
  margin: 0 0 12px;
  font-size: 17px;
  letter-spacing: -0.015em;
  line-height: 1.5;
}
.lp-card p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--text-muted); }

/* Pain points: quiet rows, not celebratory cards. */
.lp-pains { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: 780px; }
.lp-pain {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  background: none;
  border-radius: 0;
  font-size: 15.5px;
  line-height: 1.75;
}
.lp-pain:first-child { border-top: 1px solid var(--border); }
.lp-pain::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--accent);
  color: transparent;
}

/* ── Feature list ──────────────────────────────────────────────────────── */

.lp-features { display: grid; gap: 44px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lp-features h3 {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.lp-features ul { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-muted); }
.lp-features li { padding: 7px 0 7px 16px; position: relative; line-height: 1.6; }
.lp-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 15px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.lp-features strong { color: var(--accent); font-size: 11px; }
.lp-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 980px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  vertical-align: 1px;
}

/* ── Steps ─────────────────────────────────────────────────────────────── */

.lp-steps { counter-reset: lpstep; display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-step { counter-increment: lpstep; padding-top: 56px; position: relative; }
.lp-step::before {
  content: counter(lpstep);
  position: absolute; top: 0; left: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 15px; font-weight: 700;
  color: var(--accent-contrast);
  background: var(--accent);
}
.lp-step h3 { margin: 0 0 10px; font-size: 16px; letter-spacing: -0.015em; }
.lp-step p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--text-muted); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.lp-faq details { border-bottom: 1px solid var(--border); padding: 24px 0; }
.lp-faq details:first-of-type { border-top: 1px solid var(--border); }
.lp-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.015em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: '+';
  color: var(--text-muted);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  flex: none;
  transition: transform 0.2s;
}
.lp-faq details[open] summary::after { content: '+'; transform: rotate(45deg); }
.lp-faq p { margin: 16px 0 0; font-size: 15px; line-height: 1.85; color: var(--text-muted); max-width: 760px; }

.lp-hero__pending {
  margin: 10px auto 0;
  max-width: 460px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
  opacity: 0.8;
}

/* ── Final CTA ─────────────────────────────────────────────────────────────
   The section existed in the markup but had no styling at all, so it read as
   one more paragraph rather than as the end of the argument — at the point a
   reader who has worked through every objection is most likely to act. */
.lp-final {
  margin: 96px 0 0;
  padding: 64px 28px;
  text-align: center;
  border-radius: 28px;
  background: var(--surface-raised, rgba(127, 127, 127, 0.06));
  border: 1px solid var(--border);
}
.lp-final h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.lp-final > p {
  max-width: 560px;
  margin: 0 auto 32px;
  color: var(--text-muted);
  font-size: clamp(14px, 2.2vw, 17px);
  line-height: 1.8;
}
.lp-final .lp-hero__note { margin-top: 20px; }

@media (max-width: 480px) {
  .lp-final { margin-top: 64px; padding: 44px 20px; border-radius: 22px; }
}

/* ── Japanese line breaking ────────────────────────────────────────────────
   Japanese has no spaces, so a browser left to itself breaks anywhere at all —
   mid-word, and worse, leaving a trailing particle stranded on its own line,
   which reads as a typo rather than as typography.

   `auto-phrase` breaks at phrase boundaries instead. Chrome-only for now; the
   others fall back to the default, so this improves where supported and
   changes nothing where it is not. `pretty` handles the orphan line on top. */
.lp h1,
.lp h2,
.lp h3,
.lp p,
.lp li,
.lp summary,
/* サインイン後の画面も同じ扱い。等幅で出す値（Webhook URL・TOTPキー）は
   要素側で break-all を指定しているので影響しない。 */
.portal h1, .portal h2, .portal p, .portal li,
.shell h1, .shell h2, .shell p, .shell li,
.acc__head, .acc__sub, .step__body, .hint, .lede {
  word-break: auto-phrase;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .lp-footer__top { gap: 32px; }
  .lp-footer__cols { gap: 28px 40px; }
}

/* ── Mobile nav ────────────────────────────────────────────────────────────
   At 375px the wordmark plus two pills genuinely do not fit — nothing short of
   removing something makes them. So the secondary action drops its pill and
   becomes a plain link: it still reads as tappable, costs ~36px of padding,
   and the contrast makes the primary action more prominent, not less. */
@media (max-width: 480px) {
  .lp-nav {
    gap: 10px;
    padding-bottom: 40px;
  }
  .lp-nav .brand__mark { width: 32px; height: 30px; }
  .lp-nav .brand__text { font-size: 19px; }
  .lp-nav__actions { gap: 14px; }

  .lp-nav__actions .btn--secondary {
    padding: 4px 0;
    border-color: transparent;
    background: none;
    font-size: 14px;
  }
  .lp-nav__actions .btn:not(.btn--secondary) {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* Named features on a plan card. Small and tight: the list is there to be
   scanned for one item, not read through. */
.plan__features {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-muted);
  text-align: left;
}
.plan__features li::before { content: '・'; opacity: 0.55; }

/* ── Portal header ────────────────────────────────────────────────────────
   Shared by every signed-in page outside /app. Lives here (with its
   renderer in app.js) so the pages cannot drift apart one nav at a time. */
.portal-top {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 16px; padding: 18px 0 22px;
}
/* brand takes the slack so everything else sits right — works with two
   children or three, which is what lets the phone layout reflow for free. */
.portal-top .brand { margin: 0 auto 0 0; }
.portal-top .brand__text { font-size: 17px; }
.portal-top__app { text-decoration: none; white-space: nowrap; }
.portal-top__nav { display: flex; align-items: center; gap: 18px; font-size: 13.5px; flex-wrap: wrap; }
.portal-top__nav a { color: var(--text-muted); text-decoration: none; }
.portal-top__nav a:hover { color: var(--text); }
.portal-top__nav a.btn { color: var(--accent-contrast); }
.portal-top__nav .is-active { color: var(--text); font-weight: 600; }

/* ── Collapsible section ──────────────────────────────────────────────────
   <details class="card acc"> with a <summary class="acc__head">. Native
   disclosure rather than JS: keyboard and screen readers already know it,
   Ctrl+F still finds closed text in modern browsers, and a page whose
   sections open without scripting cannot get stuck shut. */
.acc { padding: 0; }
.acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 28px; cursor: pointer; list-style: none;
  border-radius: var(--radius);
}
.acc__head::-webkit-details-marker { display: none; }
.acc__head:hover { background: var(--bg); }
.acc__head h1, .acc__head h2 { margin: 0; }
/* 見出し側が余白を吸うので、状態バッジと矢印は右端に揃う。 */
.acc__head > span:first-child { flex: 1 1 auto; min-width: 0; }
.acc__sub { display: block; font-size: 12.5px; color: var(--text-muted); font-weight: 400; margin-top: 3px; }
/* The chevron is the affordance — without it a summary reads as a heading. */
.acc__head::after {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-left: auto;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.acc[open] > .acc__head::after { transform: rotate(-135deg); }
.acc[open] > .acc__head { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.acc__body { padding: 22px 28px 28px; }

/* Nested (account sub-sections): lighter, no card chrome of its own. */
.acc--sub { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; box-shadow: none; }
.acc--sub > .acc__head { padding: 14px 16px; font-size: 15px; font-weight: 600; }
.acc--sub > .acc__body { padding: 4px 16px 18px; }

/* Status pill in the header: the state has to be readable while closed,
   or collapsing the section hides the one thing it was answering. */
.acc__state { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.acc__state--ok { background: var(--success-bg); color: var(--success); }
.acc__state--todo { background: var(--danger-bg); color: var(--danger); }
.acc__state--mute { background: var(--bg); color: var(--text-muted); }


/* ── Portal on a phone ─────────────────────────────────────────────────────
   Five nav items at 13.5px wrapped into three ragged lines beside the logo —
   200px of header before any content. Now: logo and the one primary action
   share the top row, and the links drop to a single full-width row with
   thumb-sized targets. */
@media (max-width: 560px) {
  .portal { padding: 0 16px 40px; }
  .portal-top { padding: 12px 0 10px; gap: 8px; }
  .portal-top .brand__mark { width: 26px; height: 24px; }
  .portal-top .brand__text { font-size: 16px; }

  .portal-top__nav {
    flex: 1 1 100%;
    gap: 0;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
  }
  /* 44px tall: the target is the row, not the glyphs. */
  .portal-top__nav a, .portal-top__nav .is-active {
    padding: 13px 2px;
    display: inline-block;
  }

  /* 32px of side padding is a tenth of the screen. */
  .card { padding: 22px 18px; }
  .acc__head { padding: 16px 18px; }
  .acc__body { padding: 16px 18px 22px; }
  .acc--sub > .acc__head { padding: 13px 14px; }
  .acc--sub > .acc__body { padding: 4px 14px 16px; }
  h1 { font-size: 19px; }

  /* 見出し・バッジ・矢印を1行に詰めると、320pxではタイトルが語中で
     3行に割れる。矢印は絶対配置にして幅をタイトルへ返し、バッジは
     状態テキストの下へ回す。 */
  .acc__head { flex-wrap: wrap; position: relative; padding-right: 42px; }
  .acc__head::after { position: absolute; right: 18px; top: 50%; margin-top: -7px; }
  .acc__head > span:first-child { flex: 1 1 100%; }
  .acc__head h1 { font-size: 16px; }
  .acc__state { align-self: flex-start; }

  /* 中央揃えの和文は行頭が毎行ずれて読みにくい。左揃えに戻す。 */
  .card--center { text-align: left !important; padding: 26px 18px !important; }
  .card--center .lede { margin-left: 0 !important; margin-right: 0 !important; }
  .card--center .btn { display: block !important; width: 100% !important; }
}

/* 使用量の行: ラベルは折り返してよいが、数値は割らない。
   「284 / 1,000」と「人」が別行に分かれると別の数字に見える。 */
.usage__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: 13px; margin-bottom: 6px;
}
.usage__row span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }