/* Public pages: landing, pricing, login, legal. Tokens and small components come from base.css. */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-size: 15px; line-height: 1.6; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3, p { margin: 0; }
h2 { font: 500 34px/1.2 var(--serif); letter-spacing: -0.01em; }
h3 { font-size: 17px; font-weight: 600; line-height: 1.35; }
.lede { color: var(--text-2); font-size: 17px; max-width: 620px; }
.eyebrow { font-size: 14px; font-weight: 500; color: var(--muted); }
section { padding: 96px 0; }
.section-head { display: grid; gap: 12px; margin-bottom: 48px; }

/* ── Navigation ─────────────────────────────────────────── */
.topnav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(10px); }
.topnav.scrolled { border-bottom-color: var(--line); }
.topnav .container { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; text-decoration: none; }
.brand svg { width: 24px; height: 24px; flex: none; }
.links { display: flex; gap: 4px; margin-right: auto; }
.links a, .login-link { padding: 6px 12px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 14px; transition: color .12s var(--ease), background-color .12s var(--ease); }
.links a:hover, .login-link:hover, .links a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.menu { display: none; position: relative; margin-left: auto; }
.menu summary { list-style: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 44px; width: 220px; padding: 8px; display: grid; gap: 2px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.menu nav a { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--text-2); }
.menu nav a:hover { background: var(--surface-2); color: var(--text); }
.menu nav a[aria-current="true"] { color: var(--text); background: var(--surface-2); }
.menu-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.menu-langs span { grid-column: 1 / -1; padding: 4px 12px; font-size: 13px; color: var(--muted); }

/* Language choice: a small dropdown next to the actions; inside the mobile menu it is a row of links. */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 8px; cursor: pointer;
                     color: var(--text-2); font-size: 14px; transition: color .12s var(--ease), background-color .12s var(--ease); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--text); background: var(--surface-2); }
.lang-menu summary svg { width: 14px; height: 14px; color: var(--muted); }
.lang-menu nav { position: absolute; right: 0; top: 44px; min-width: 160px; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.lang-menu nav a { padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text-2); font-size: 14px; }
.lang-menu nav a:hover { background: var(--surface-2); color: var(--text); }
.lang-menu nav a[aria-current="true"] { color: var(--text); background: var(--accent-soft); }
.nav-actions.auth-nav { display: flex; margin-left: auto; }
.menu-theme { display: none; margin-left: auto; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding: 72px 0 0; text-align: center; overflow: hidden; }
.hero .eyebrow { margin: 0; }
.hero h1 { font: 500 60px/1.08 var(--serif); letter-spacing: -0.02em; max-width: 820px; margin: 20px auto 0; }
.hero .lede { margin: 20px auto 0; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* Reel carousel: five 9:16 reels in a fan. The middle one plays its caption word by word; where the
   brand is said, the viewfinder brackets snap around it and a result slides out. Driven by the
   script in landing.html; everything that moves uses transform or opacity. */
.reels { --rw: 216px; --rh: 384px; position: relative; margin: 48px auto 0; padding-bottom: 72px; }
.reels-stage { position: relative; height: calc(var(--rh) + 24px); }

.reel { position: absolute; top: 12px; left: 50%; width: var(--rw); height: var(--rh); margin-left: calc(var(--rw) / -2);
        display: flex; flex-direction: column; padding: 14px 16px 0; text-align: left; overflow: hidden;
        border: 1px solid var(--line-strong); border-radius: 18px; background: linear-gradient(180deg, var(--surface-2), var(--surface));
        isolation: isolate; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.reel[data-slot="0"] { z-index: 3; }
.reel[data-slot="1"] { z-index: 2; opacity: .42; transform: translateX(calc(var(--rw) * .92)) scale(.8); }
.reel[data-slot="-1"] { z-index: 2; opacity: .42; transform: translateX(calc(var(--rw) * -.92)) scale(.8); }
.reel[data-slot="2"] { z-index: 1; opacity: .18; transform: translateX(calc(var(--rw) * 1.62)) scale(.64); }
.reel[data-slot="-2"] { z-index: 1; opacity: .18; transform: translateX(calc(var(--rw) * -1.62)) scale(.64); }
.reel[data-slot="3"] { z-index: 0; opacity: 0; transform: translateX(calc(var(--rw) * 2.2)) scale(.5); }
.reel[data-slot="-3"] { z-index: 0; opacity: 0; transform: translateX(calc(var(--rw) * -2.2)) scale(.5); }
.reel.jump { transition: none; }
/* Footage under the text: poster first, the clip fades in once it plays. A dark layer in the page
   colour sits between footage and text; --scrim is measured per clip (see app/site.py), and the
   top and bottom bands get extra cover for the small handle and counts. */
.reel-media, .reel-media img, .reel-media video, .reel::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel-media { z-index: -1; }
.reel-media img, .reel-media video { object-fit: cover; }
.reel-media video { opacity: 0; transition: opacity .4s var(--ease); }
.reel-media video.live { opacity: 1; }
.reel::after { content: ""; z-index: -1; background:
    linear-gradient(180deg, hsl(250 24% 9% / .44) 0, hsl(250 24% 9% / .44) 48px, hsl(250 24% 9% / 0) 96px,
                    hsl(250 24% 9% / 0) calc(100% - 104px), hsl(250 24% 9% / .44) calc(100% - 56px), hsl(250 24% 9% / .44) 100%),
    hsl(250 24% 9% / var(--scrim, .65)); }
/* While a result is shown, the reels it covers step further back. */
@media (min-width: 821px) { .reels.hit .reel[data-slot="1"], .reels.hit .reel[data-slot="2"] { opacity: .08; } }
/* Light theme: a dark card faded out turns milky grey on a white page. Instead the reels beside the
   middle one drop most of their dark layer and their caption, show the footage, and dissolve into the
   page towards the outer edge. */
[data-theme="light"] .reel::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0;
                                     background: linear-gradient(90deg, transparent 10%, var(--page) 100%); transition: opacity .7s var(--ease); }
[data-theme="light"] .reel[data-slot^="-"]::before { background: linear-gradient(270deg, transparent 10%, var(--page) 100%); }
[data-theme="light"] .reel:not([data-slot="0"])::before { opacity: .9; }
[data-theme="light"] .reel::after { transition: opacity .7s var(--ease); }
[data-theme="light"] .reel:not([data-slot="0"])::after { opacity: .2; }
[data-theme="light"] .reel .caption { transition: opacity .4s var(--ease); }
[data-theme="light"] .reel:not([data-slot="0"]) .caption { opacity: 0; }
[data-theme="light"] .reel:not([data-slot="0"]) { border-color: transparent; }
[data-theme="light"] .reel[data-slot="1"], [data-theme="light"] .reel[data-slot="-1"] { opacity: .9; }
[data-theme="light"] .reel[data-slot="2"], [data-theme="light"] .reel[data-slot="-2"] { opacity: .5; }

.reel-top, .reel-foot { transition: opacity .4s var(--ease); }
.reel:not([data-slot="0"]) .reel-top, .reel:not([data-slot="0"]) .reel-foot { opacity: 0; }
.reel-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.reel-top .len { font: 11px/18px var(--mono); color: var(--text-2); }
.caption { flex: 1; display: flex; flex-wrap: wrap; align-content: center; gap: 0 .28em; margin: 0; font: 600 19px/1.32 var(--sans); color: var(--text); }
.caption .w { opacity: 1; transition: opacity .18s var(--ease), transform .24s var(--ease); }
.caption .w.off { opacity: 0; transform: translateY(6px); }
.caption .w { display: inline-block; }
/* The brand highlight is the regular mark colour, faded in on a layer behind the word. */
.reel mark { position: relative; z-index: 0; padding: 0; background: none; color: inherit; }
.reel mark::before { content: ""; position: absolute; z-index: -1; inset: 0 -4px; border-radius: 4px; background: var(--mark);
                     opacity: 0; transition: opacity .2s var(--ease); }
.reel mark.on::before { opacity: 1; }
.reel-foot { padding: 12px 0 10px; font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.reel .bar { height: 3px; margin: 0 -16px; background: var(--line); }
.reel .bar i { display: block; height: 100%; background: var(--accent-ink); transform-origin: left; transform: scaleX(0); }

/* The logo's viewfinder brackets, snapping around the middle reel. */
.finder { position: absolute; z-index: 4; top: 0; left: 50%; width: calc(var(--rw) + 24px); height: calc(var(--rh) + 24px); margin-left: calc((var(--rw) + 24px) / -2);
          pointer-events: none; opacity: 0; transform: scale(1.08); transition: opacity .16s var(--ease), transform .26s var(--ease); }
.finder.on { opacity: 1; transform: none; }
.finder i { position: absolute; width: 30px; height: 30px; border: 0 solid var(--accent-ink); }
.finder i:nth-child(1) { top: 0; left: 0; border-width: 3px 0 0 3px; border-top-left-radius: 12px; }
.finder i:nth-child(2) { top: 0; right: 0; border-width: 3px 3px 0 0; border-top-right-radius: 12px; }
.finder i:nth-child(3) { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 12px; }
.finder i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 12px; }

/* The result next to the middle reel; it sits above the dimmed neighbour. */
.result { position: absolute; z-index: 5; top: 12px; left: calc(50% + var(--rw) / 2 + 28px); width: 272px; height: var(--rh); display: flex; align-items: center; pointer-events: none; }
.result-card { width: 100%; display: grid; gap: 14px; padding: 16px; text-align: left; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface);
               opacity: 0; transform: translateX(-16px); transition: opacity .3s var(--ease), transform .36s var(--ease); }
.result.on .result-card { opacity: 1; transform: none; }
.r-said { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.r-score { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); }
.r-muted { font-size: 12px; color: var(--muted); }
.r-reply { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.r-reply p { font-size: 14px; color: var(--text); }
/* The ring fills by turning two half arcs (transform only); 0deg is empty, 180deg fills one half. */
.result .ring svg { transform: none; }
.result .ring .turn { fill: none; stroke-width: 3; stroke-linecap: butt; transform-origin: 24px 24px; transform: rotate(0deg); transition: transform 0s linear; }

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

@media (prefers-reduced-motion: reduce) {
  .reels *, .reels *::before { transition: none !important; }
}

/* ── Features: three points and the dashboard preview ───── */
.band { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.points h3 { margin-bottom: 8px; }
.points p { color: var(--text-2); }
.showcase { margin: 48px 0 0; }
/* The same app window as on /vorschau, with a bar on top; the frame below it keeps its old height. */
.showcase-frame { height: 802px; }
.showcase-frame iframe { pointer-events: none; }
.showcase-link { position: absolute; inset: 0; border-radius: inherit; }
.showcase-link:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.showcase figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; font-size: 14px; color: var(--muted); }

/* ── Preview page: the dashboard as an app window inside the site ── */
/* Same column and the same centred head as the other pages, so the window lines up with them. */
.preview-head { padding: 72px 0 40px; text-align: center; }
.preview-head h1 { font: 500 48px/1.1 var(--serif); letter-spacing: -0.02em; }
.preview-head .lede { margin: 12px auto 0; }
.preview-body { padding: 0 0 24px; }
/* The app window, also used for the dashboard on the landing page. */
.app-window { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px;
              background: var(--bg); box-shadow: var(--shadow); }
.app-window.tall { height: clamp(600px, calc(100vh - 120px), 880px); }
.app-window-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line);
                  background: var(--surface); font-size: 12px; color: var(--muted); }
.app-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.app-window-bar span { margin: 0 auto; padding-right: 48px; }
.app-window iframe { flex: 1; display: block; width: 100%; border: 0; }

/* ── Steps ──────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.step { padding: 28px 24px; display: grid; gap: 8px; align-content: start; }
.step + .step { border-left: 1px solid var(--line); }
.step .n { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.step p { color: var(--text-2); }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
.faq-list { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.faq-list details + details { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; font-weight: 500; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { margin-left: auto; color: var(--muted); transition: transform .15s var(--ease); }
.faq-list details[open] summary svg { transform: rotate(180deg); }
.faq-list p { padding: 0 20px 20px; color: var(--text-2); max-width: 640px; }

/* ── Closing call ───────────────────────────────────────── */
.closing { text-align: center; }
.closing .box { padding: 64px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.closing h2 { max-width: 640px; margin: 0 auto; }
.closing p { color: var(--text-2); margin-top: 12px; }

/* ── Reveal: blocks build up as they come into view ────── */
/* Only while the script in base.html runs (html.reveal), so nothing stays hidden without it.
   data-reveal: the block rises in, after --d ms. data-reveal="group": the block stays, its
   data-reveal-item children rise in one after another (--i). Check lists tick in after that (--j). */
html.reveal [data-reveal]:not(.in), html.reveal [data-reveal]:not(.in) :is([data-reveal-item], .checks li) { opacity: 0; }
html.reveal [data-reveal="group"]:not(.in) { opacity: 1; }
html.reveal [data-reveal].in:not([data-reveal="group"]) { animation: reveal-rise .6s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
html.reveal [data-reveal].in [data-reveal-item] { animation: reveal-rise .55s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms + var(--i, 0) * 90ms); }
html.reveal [data-reveal].in .checks li { animation: reveal-rise .45s var(--ease) both;
                                          animation-delay: calc(var(--d, 0) * 1ms + 250ms + var(--i, 0) * 90ms + var(--j, 0) * 60ms); }
html.reveal [data-reveal].in .checks svg { animation: reveal-pop .4s var(--ease) both;
                                           animation-delay: calc(var(--d, 0) * 1ms + 370ms + var(--i, 0) * 90ms + var(--j, 0) * 60ms); }
@keyframes reveal-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes reveal-pop { from { opacity: 0; transform: scale(.3); } }

/* ── Pricing ────────────────────────────────────────────── */
.page-head { padding: 80px 0 48px; display: grid; gap: 16px; }
.page-head h1 { font: 500 48px/1.1 var(--serif); letter-spacing: -0.02em; max-width: 760px; }
.plan-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; padding: 32px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface); }
.price { word-spacing: -0.35em; }
.price small { word-spacing: normal; }
.plan-now .price { font: 500 56px/1 var(--mono); margin: 16px 0 8px; }
.plan-now .price small { font: 14px var(--sans); color: var(--muted); margin-left: 8px; }
.plan-now p { color: var(--text-2); }
.plan-now .btn { margin-top: 24px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.checks li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start; color: var(--text-2); }
.checks svg { margin-top: 4px; color: var(--text-2); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); display: grid; gap: 16px; align-content: start; }
.plan .top { display: flex; align-items: baseline; gap: 12px; }
.plan .top h3 { margin-right: auto; }
.plan .state { font-size: 14px; color: var(--muted); }
.plan .price { font: 500 32px/1 var(--mono); }
.plan .price small { font: 13px var(--sans); color: var(--muted); margin-left: 8px; }
.plan .summary { color: var(--text-2); }
.plan .checks svg { color: var(--muted); }

/* ── Login, registration, setup ─────────────────────────── */
.auth { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 40px 24px 96px; }
.auth-col { width: min(420px, 100%); display: grid; gap: 20px; }
.auth-col.wide { width: min(560px, 100%); }
.auth-card { padding: 32px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface);
             box-shadow: 0 1px 0 hsl(0 0% 100% / .03) inset, 0 24px 48px -32px hsl(250 40% 2% / .6); }
.auth-card h1 { font: 500 28px/1.2 var(--serif); letter-spacing: -0.01em; }
.auth-card .sub { color: var(--text-2); margin: 8px 0 24px; }
.auth-card h1.solo { margin-bottom: 24px; }
.auth-card .btn { width: 100%; height: 42px; margin-top: 8px; }
.auth-card .btn.small { width: auto; height: 28px; margin: 0; }
.auth-card .switch-mode { margin-top: 20px; text-align: center; font-size: 14px; color: var(--muted); }
.auth-card .switch-mode a, .linklike { color: var(--text); text-underline-offset: 3px; }
.linklike { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.login-link.linklike { text-decoration: none; color: var(--text-2); }
.auth-card .note { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.auth-card.center { text-align: center; }
.auth-card.center .sub { margin-bottom: 20px; }
.field .opt { font-style: normal; font-weight: 400; color: var(--muted); }
.alert { padding: 10px 12px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--bad) 60%, transparent); border-radius: 8px; color: var(--bad); font-size: 14px; text-align: left; }
.notice { padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text-2); font-size: 14px; }
/* Password and code are two steps of one form; only one is shown. */
.auth-card .step { margin: 0; padding: 0; border: 0; min-width: 0; }
.code-input { font: 500 20px var(--mono) !important; letter-spacing: .2em; text-align: center; height: 48px; }

/* Password field with the show/hide button inside it */
.input-wrap { position: relative; display: block; }
.input-wrap input { padding-right: 44px; }
.reveal-pw { position: absolute; top: 50%; right: 4px; translate: 0 -50%; display: grid; place-items: center; width: 32px; height: 28px;
             padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.reveal-pw:hover { color: var(--text); background: var(--surface-2); }
.reveal-pw .off, .reveal-pw[aria-pressed="true"] .on { display: none; }
.reveal-pw[aria-pressed="true"] .off { display: block; }

/* Who is logging in, above the code field */
.who { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
       background: var(--bg); font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.who svg { color: var(--accent-ink); }

/* Authenticator setup */
.tf-grid { display: grid; grid-template-columns: 176px 1fr; gap: 24px; align-items: start; margin-bottom: 24px; }
/* Scanners want dark modules on a light ground, so the code keeps its white box in the dark theme too. */
.qr-box { width: 176px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: #fff; }
.qr-box svg { display: block; width: 100%; height: auto; }
.qr-wait { padding: 16px; font-size: 12px; text-align: center; color: hsl(248 6% 45%); }
.tf-text { display: grid; gap: 10px; min-width: 0; }
.tf-line { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.tf-line.muted { color: var(--muted); font-size: 13px; }
.num { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; flex: none; border: 1px solid var(--line-strong);
       border-radius: 50%; font: 500 11px var(--mono); color: var(--text-2); vertical-align: 1px; }
.tf-line .num { margin-right: 0; }
.secret-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.secret { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font: 13px var(--mono); color: var(--text);
          word-spacing: 4px; user-select: all; overflow-wrap: anywhere; }
.app-link { font-size: 13px; color: var(--text); text-underline-offset: 3px; }

/* Recovery codes */
.codes { margin: 0 0 16px; padding: 14px 16px 14px 40px; display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-between;
         gap: 8px 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font: 14px var(--mono); color: var(--text); }
.codes li::marker { color: var(--muted); font-size: 12px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.auth-card .row-actions .btn { width: auto; flex: 1; margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); }

/* Round icon at the top of the e-mail pages */
.badge-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 20px; border: 1px solid var(--accent-line);
              border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); }
.badge-icon svg { width: 22px; height: 22px; }

@media (max-width: 520px) {
  .auth { padding: 24px 16px 64px; place-items: start center; }
  .auth-card { padding: 24px 20px; }
  .tf-grid { grid-template-columns: 1fr; justify-items: center; }
  .tf-text { justify-items: start; width: 100%; }
  .codes { grid-template-columns: max-content; }
}

/* ── Admin area (read-only) ─────────────────────────────── */
.admin { padding-bottom: 96px; }
.admin-head { padding: 48px 0 32px; display: grid; gap: 12px; }
.admin-head h1 { font: 500 40px/1.15 var(--serif); letter-spacing: -0.02em; }
.admin-head .account-mail { font-size: 32px; overflow-wrap: anywhere; }
.admin-head .back { justify-self: start; font-size: 14px; color: var(--text-2); text-underline-offset: 3px; }
.admin h2 { font: 600 19px/1.4 var(--sans); letter-spacing: 0; }
.admin h2 .shown { margin-left: 8px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.stat span { font-size: 13px; color: var(--muted); }
.stat b { font: 500 28px/1.2 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.stat small { font-size: 13px; color: var(--text-2); }
.admin-section { margin-top: 40px; display: grid; gap: 16px; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.admin-search { display: flex; gap: 8px; flex: 1 1 320px; max-width: 520px; }
.admin-search input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.admin-search input:focus { outline: none; border-color: var(--accent-ink); }
.shown { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The table scrolls sideways inside its frame on narrow screens; the page itself never does. */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; white-space: nowrap; }
.admin-table th { font-size: 13px; font-weight: 500; color: var(--text-2); border-bottom: 1px solid var(--line); }
.admin-table th a { color: inherit; text-decoration: none; }
.admin-table th a:hover, .admin-table th[aria-sort] a { color: var(--text); }
.admin-table th .dir { margin-left: 4px; color: var(--muted); }
.admin-table td { color: var(--text-2); border-top: 1px solid var(--line); }
.admin-table tr:first-child td { border-top: 0; }
.admin-table tbody tr:hover td { background: var(--surface-2); }
.admin-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.admin-table .when { font-variant-numeric: tabular-nums; }
.admin-table .email a { color: var(--text); text-underline-offset: 3px; }
/* Long addresses and company names wrap instead of pushing the table wider than the page. */
.admin-table :is(.email, .company) { white-space: normal; overflow-wrap: anywhere; }
.admin-table .email { min-width: 15em; }
.admin-nav .login-link { white-space: nowrap; }
.admin-table .company { min-width: 9em; }
.admin .lost p { max-width: 560px; margin-left: auto; margin-right: auto; }
.admin-empty { color: var(--muted); }
.admin .facts .figure, .brand-card .figure { font: 500 15px var(--mono); color: var(--text); }
.breakdown { margin-top: 4px; font-size: 13px; color: var(--muted); }
.counts span + span::before { content: "·"; margin: 0 8px; color: var(--line-strong); }
.counts b { font: 500 13px var(--mono); color: var(--text-2); }
.brand-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.brand-card h3 { margin-bottom: 12px; overflow-wrap: anywhere; }
.brand-card dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 14px; }
.brand-card dt { color: var(--muted); }
.brand-card dd { margin: 0; color: var(--text); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.brand-card dd .breakdown { flex-basis: 100%; margin-top: 0; }
.brand-card .chip { white-space: normal; height: auto; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .admin-head { padding: 32px 0 24px; }
  .admin-head h1 { font-size: 32px; }
  .admin-head .account-mail { font-size: 24px; }
  .admin-nav { gap: 0; }
  .admin-nav :is(.login-link, .lang-menu summary) { padding: 6px 8px; }
  .brand-card dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .brand-card dd { margin-bottom: 8px; }
}

/* ── Legal pages and notices ────────────────────────────── */
.prose { max-width: 720px; padding-bottom: 96px; display: grid; gap: 16px; color: var(--text-2); }
.prose h2 { font: 600 19px/1.4 var(--sans); letter-spacing: 0; color: var(--text); margin-top: 24px; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.prose a { color: var(--text); text-underline-offset: 3px; }
.prose code { font: 13px var(--mono); color: var(--text); }
.prose address { font-style: normal; color: var(--text); }
/* Legal notice and privacy policy: contents on the left (privacy), the text in a reading column. */
.legal-body { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 64px; align-items: start; padding-bottom: 96px; }
.legal-body.single { grid-template-columns: minmax(0, 720px); }
.legal-body .prose { padding-bottom: 0; }
.toc { position: sticky; top: 96px; display: grid; gap: 2px; font-size: 14px; }
.toc span { padding: 0 10px 8px; font-size: 13px; color: var(--muted); }
.toc a { padding: 6px 10px; border-radius: 8px; color: var(--text-2); text-decoration: none; transition: color .12s var(--ease), background-color .12s var(--ease); }
.toc a:hover { color: var(--text); background: var(--surface-2); }
.toc a[aria-current="true"] { color: var(--text); background: var(--accent-soft); }
.prose section { display: grid; gap: 12px; padding: 0; }
.prose section + section { padding-top: 28px; border-top: 1px solid var(--line); }
.prose section h2 { margin-top: 0; }
.numbered { counter-reset: part; }
.numbered section h2::before { counter-increment: part; content: counter(part) ". "; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-weight: 500; color: var(--text); }
.facts { display: grid; grid-template-columns: 180px minmax(0, 1fr); margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.facts dt, .facts dd { margin: 0; padding: 14px 18px; }
.facts dt { color: var(--muted); }
.facts dd { color: var(--text); }
.facts dt:not(:first-of-type), .facts dt:not(:first-of-type) + dd { border-top: 1px solid var(--line); }
.facts small { font-size: 13px; color: var(--muted); }
.facts a { color: var(--text); text-underline-offset: 3px; }
.notice { padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 14px; }
.notice code { font: 13px var(--mono); }
.missing { color: var(--text); text-decoration: underline dotted var(--line-strong); text-underline-offset: 4px; }

.lost { min-height: calc(100vh - 64px - 160px); display: grid; place-items: center; text-align: center; padding: 48px 24px; }
.lost .code { font: 500 14px var(--mono); color: var(--muted); }
.lost h1 { font: 500 40px/1.15 var(--serif); margin: 12px 0; }
.lost p { color: var(--text-2); margin-bottom: 28px; }

/* ── Footer ─────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent); }
footer .container { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 32px; padding-bottom: 32px; color: var(--muted); font-size: 14px; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-left: auto; }
footer a { color: var(--text-2); text-decoration: none; }
footer a:hover { color: var(--text); }

/* With the Preview link the full navigation needs about 960px; below that it folds into the menu. */
@media (max-width: 1000px) {
  .links, .nav-actions { display: none; }
  .menu { display: block; margin-left: -24px; }
  .menu-theme { display: block; }
}
/* Below this width the result moves under the reel instead of beside it. */
@media (max-width: 820px) {
  .reels-stage { height: calc(var(--rh) + 268px); }
  .result { top: calc(var(--rh) + 44px); left: 0; right: 0; width: min(340px, 100%); height: auto; margin: 0 auto; align-items: flex-start; }
  .result-card { transform: translateY(-12px); }
  .r-reply p { font-size: 13px; }
}
@media (max-width: 600px) {
  .reels { --rw: 168px; --rh: 299px; margin-top: 48px; padding-bottom: 56px; }
  .reel { padding: 12px 12px 0; border-radius: 14px; }
  .reel .bar { margin: 0 -12px; }
  .reel[data-slot="2"], .reel[data-slot="-2"], [data-theme="light"] .reel[data-slot="2"], [data-theme="light"] .reel[data-slot="-2"] { opacity: 0; }
  .caption { font-size: 16px; }
}
@media (max-width: 900px) {
  section { padding: 64px 0; }
  h2 { font-size: 28px; }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: 40px; }
  .page-head h1 { font-size: 36px; }
  .points, .steps, .plans, .faq, .plan-now { grid-template-columns: 1fr; }
  .points { gap: 24px; }
  .showcase-frame { height: 680px; }
  .preview-head h1 { font-size: 36px; }
  .step + .step { border-left: 0; border-top: 1px solid var(--line); }
  .faq, .plan-now { gap: 32px; }
  footer nav { margin-left: 0; }
  .legal-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .toc { display: none; }
}
@media (max-width: 520px) {
  .container { padding: 0 16px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dd { padding-top: 0; }
  .facts dt:not(:first-of-type) + dd { border-top: 0; }
  .prose table, .prose tbody, .prose tr, .prose td { display: block; }
  .prose tr:first-child { display: none; }
  .prose tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .prose td { padding: 2px 0; border: 0; }
  .hero h1 { font-size: 34px; }
}