/* Self-hosted Nunito (variable, weights 100–900) — no external Google Fonts.
   Two subsets cover the site's Cyrillic + Latin text. Files in /static/fonts. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* GrannyVPN — warm cream + terracotta. Friendly, rounded, soft shadows.
   Palette mirrors the Tailwind theme used on the landing (cream/terracotta/
   sage) so the app pages and the home page share one visual language. */
:root {
  --bg: #fbf5ec;
  --bg-soft: #f3ede3;
  --card: #ffffff;
  --ink: #1f1f1f;
  --ink-soft: #5f574e;
  --muted: #9c9286;
  --line: #ede4d6;
  --accent: #d9542b;
  --accent-dark: #c14826;
  --accent-soft: #f6ddce;
  --ok: #6e8b5e;
  --ok-soft: #e6eddd;
  --err: #c0492b;
  --err-soft: #f6dbd0;
  --warn: #9a7b1f;
  --warn-soft: #f7ebc6;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* Force a permanent vertical scrollbar so opening <details> never jolts the
   layout horizontally. Triple-belt-and-suspenders: scrollbar-gutter,
   overflow-y:scroll, and we constrain details animations to NOT touch
   inline-size so child cards can't reshape during open/close. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
/* On mobile there's no fixed-width scrollbar — disabling overflow-y: scroll
   prevents 100vw-wide children (like the marquee) from causing horizontal
   overflow due to scrollbar-width mismatch. */
@media (max-width: 720px) {
  html { overflow-y: auto; }
}
/* Scope interpolate-size to <details> only — globally enabling it can cause
   unexpected width interpolation on flex/grid children. */
details { interpolate-size: allow-keywords; }
body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main.container { flex: 1; }
img, video, code, pre { max-width: 100%; }
.conn-link, .msgr-msg-text { overflow-wrap: anywhere; word-break: break-word; }

a { color: var(--accent-dark); }
/* Hover accent only for links WITHOUT an explicit text-* utility — otherwise
   it out-specifies .text-white and repaints button text terracotta on hover.
   ponytail: substring match; a class like "context-menu" would also opt out. */
a:not([class*="text-"]):hover { color: var(--accent); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Header — two-row layout:
        col 1 (logo) [spans both rows, vertically centered]
        col 2 row 1: brand text — centered
        col 2 row 2: nav        — centered
        col 3 (auth) [spans both rows, vertically centered]
   This gives a compact, symmetric header with the brand floating above the
   navigation, while the avatar/login button stays in the corner. */
/* Navbar is now a Tailwind "pill" (see base.html) — keep the wrapper bare. */
.site-header { background: transparent; border-bottom: none; }
.header-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 24px;
  row-gap: 4px;
  padding: 12px 22px;
}
.header-row > .logo       { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.header-row > .logo-text  { grid-column: 2; grid-row: 1; justify-self: center; }
.header-row > .nav        { grid-column: 2; grid-row: 2; justify-self: center; }
.header-row > .auth-block { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; }
.logo, .logo-text { text-decoration: none; color: var(--ink); }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { display: block; flex-shrink: 0; }
.logo-text { font-weight: 700; font-size: 22px; flex-shrink: 0; line-height: 1.1; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.nav a { text-decoration: none; color: var(--ink-soft); }
.nav a:hover { color: var(--accent-dark); }
.nav-short { display: none; }
.nav-full { display: inline; }
.auth-block { display: flex; align-items: center; gap: 10px; }
.me { color: var(--ink-soft); font-size: 14px; }
/* Email avatar — round pill with the first letter, used everywhere (PC + mobile).
   Full email is in the title= tooltip and (visually-hidden) span.email-text. */
.me-link {
  text-decoration: none;
  padding: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  overflow: hidden;
  line-height: 1;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.me-link::before { content: attr(data-initial); }
.me-link:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
/* Guest variant — same circle, person icon instead of an initial */
.me-link--guest::before {
  content: "";
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23944928'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.me-link--guest:hover::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/></svg>");
}
.me-link span.email-text {
  /* visually hidden, kept for accessibility / right-click "copy email" */
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Buttons — rounded, bold, soft terracotta shadow (matches landing CTAs) */
.btn {
  display: inline-block; padding: 11px 22px; border-radius: 14px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  font-size: 16px; font-family: inherit; font-weight: 800;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(217,84,43,.28); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: var(--bg-soft); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #eae1d3; }
.btn-danger { background: var(--err); color: #fff; }
.btn-danger:hover { background: #9d3a22; }
.btn-link { background: transparent; border: none; color: var(--accent-dark); cursor: pointer; padding: 6px 8px; font: inherit; font-weight: 700; }
.btn-link:hover { text-decoration: underline; }
.btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 12px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Forms */
.form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.form label { display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); font-size: 14px; }
.form input, .form textarea, .form select {
  padding: 12px 14px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form textarea { min-height: 120px; resize: vertical; }
.form .row { display: flex; gap: 10px; flex-wrap: wrap; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline { display: inline; }

/* Flash */
@keyframes flash-slide-out {
  0%   { opacity: 1; transform: translateY(0); max-height: 80px; margin-bottom: 0; }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-18px); max-height: 0; padding: 0; margin: 0; border: none; }
}
.flash-wrap { padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 12px 16px; border-radius: 14px; border: 1px solid;
  overflow: hidden; font-weight: 600;
}
/* Only auto-dismiss flashes that came from URL query params (in .flash-wrap).
   Static .flash blocks inside templates stay put. */
.flash-wrap > .flash {
  animation: flash-slide-in .3s cubic-bezier(.2,.8,.2,1.3) both,
             flash-slide-out 0.4s ease-in 4s forwards;
}
@keyframes flash-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.flash-ok { background: var(--ok-soft); border-color: #c4d3b4; color: #46603a; }
.flash-err { background: var(--err-soft); border-color: #ecbfae; color: #9d3a22; }
.flash-warn { background: var(--warn-soft); border-color: #e6d49b; color: #7a611a; }

/* Hero */
.hero { padding: 56px 0 32px; }
.hero h1 { font-size: 44px; margin: 0 0 16px; line-height: 1.15; }
.hero p { font-size: 19px; color: var(--ink-soft); max-width: 640px; }
.hero .cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* Features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 32px 0; }
.feature {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px;
}
.feature h3 { margin: 0 0 6px; font-size: 18px; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* Pricing grid (home + buy/select) */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 28px 0 48px;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 4px 24px rgba(120,80,40,.05);
  transition: box-shadow .15s, transform .15s;
}
.pricing-card:hover { box-shadow: 0 16px 40px -12px rgba(120,80,40,.20); transform: translateY(-3px); }
.pricing-card--popular {
  border-color: var(--accent);
  border-width: 2px;
  padding: 31px 23px 27px;
}
.pricing-card--admin {
  border-color: #c4a35a;
  border-style: dashed;
  border-width: 2px;
  background: #fdf8e9;
  padding: 31px 23px 27px;
}
.pricing-badge {
  position: absolute;
  top: -13px;
  left: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pricing-name { font-size: 18px; color: var(--ink); font-weight: 700; margin-bottom: 12px; }
.pricing-price {
  font-size: 40px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
  margin: 0 0 4px;
}
.pricing-period { font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  flex: 1;
}
.pricing-features li {
  position: relative;
  padding-left: 22px;
}
.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}
.pricing-features li.muted { color: var(--muted); }
.pricing-features li.muted::before { color: var(--muted); }
.pricing-features li.cross { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted); }
.pricing-features li.cross::before {
  content: "✗";
  color: #c44;
  text-decoration: none;
  display: inline-block;
}
.pricing-btn-form { margin-top: auto; }
.pricing-btn { margin-top: auto; width: 100%; text-align: center; }

/* Section header */
.section-title { font-size: 28px; margin: 32px 0 8px; }
.section-sub { color: var(--ink-soft); margin: 0 0 16px; }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 24px; margin: 18px 0;
  box-shadow: 0 4px 24px rgba(120,80,40,.05);
}
.card h2 { margin: 0 0 12px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 8px; overflow: hidden; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15px; }
.table th { background: var(--bg-soft); color: var(--ink-soft); font-weight: 600; }
.table tr:last-child td { border-bottom: none; }

/* Subscription */
.sub-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sub-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.sub-card h3 { margin: 0; font-size: 18px; }
.sub-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; }
.sub-status.active { background: var(--ok-soft); color: var(--ok); }
.sub-status.inactive { background: var(--warn-soft); color: var(--warn); }
.sub-status.unknown { background: var(--bg-soft); color: var(--ink-soft); }
.sub-meta { color: var(--ink-soft); font-size: 14px; }

/* Auth pages */
.auth-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: 32px; max-width: 460px; margin: 36px auto;
  box-shadow: 0 16px 50px -16px rgba(120,80,40,.18);
}
.auth-card h1 { margin-top: 0; }
.auth-alt { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--ink-soft); font-size: 14px; }

/* Pending payment */
.pending {
  background: var(--warn-soft); border: 1px solid #e6d49b; color: var(--ink);
  padding: 20px; border-radius: 12px; margin: 16px 0;
}
.pending h2 { margin: 0 0 8px; color: var(--warn); }

/* Connection link */
.conn-link {
  display: block; padding: 12px 14px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 8px; word-break: break-all;
  font-family: 'Courier New', monospace; font-size: 14px;
}

/* Messenger-style chat (cabinet/support + admin/support_thread)

   When the page sets body.chat-page, we lock body scroll and make the
   messenger fill the remaining viewport area. This kills the "elozит"
   page-jump on every screen size — chat is a fixed-height app shell, only
   the message list scrolls inside. */
body.chat-page {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}
body.chat-page main.container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0;
}
body.chat-page .site-footer { display: none; }

.msgr {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif;
  margin: 16px 0;
}
.msgr--with-sidebar {
  flex-direction: row;
}
@media (min-width: 900px) {
  /* PC: more spacious messenger like Telegram desktop */
  .msgr { font-size: 16px; }
  .msgr-sidebar { width: 340px; }
  .msgr-messages { padding: 24px 28px; gap: 12px; }
  .msgr-msg { max-width: 65%; padding: 12px 16px; font-size: 15.5px; }
  .msgr-input-area { padding: 16px 22px; }
  .msgr-input-area input[type="text"] { padding: 13px 18px; font-size: 16px; }
  .msgr-input-area button { padding: 13px 28px; font-size: 16px; }
  .msgr-header { height: 64px; padding: 0 24px; }
  .msgr-title { font-size: 18px; }
}
.msgr-sidebar {
  width: 320px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
}
.msgr-sidebar-header {
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.msgr-sidebar-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.msgr-chat-list { flex: 1; overflow-y: auto; }
.msgr-chat-item {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s;
}
.msgr-chat-item:hover { background: var(--bg); color: var(--ink); }
.msgr-chat-item.active { background: var(--accent-soft); color: var(--ink); }
.msgr-chat-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.msgr-chat-meta { font-size: 12px; color: var(--ink-soft); }
.msgr-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.msgr-header {
  height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.msgr-back {
  font-size: 22px;
  color: var(--ink);
  text-decoration: none;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background .15s;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .msgr-back { display: inline-flex; }
}
.msgr-back:hover { background: var(--bg-soft); color: var(--ink); }
.msgr-title { font-weight: 600; font-size: 17px; color: var(--ink); }
.msgr-subtitle { font-size: 13px; color: var(--ink-soft); margin-left: auto; }
.msgr-messages {
  flex: 1;
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  position: relative;
}
.msgr-msg {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 14px;
  word-wrap: break-word;
  font-size: 15px;
  line-height: 1.4;
  position: relative;
}
.msgr-msg.sent {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msgr-msg.received {
  align-self: flex-start;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.msgr-msg-text { white-space: pre-wrap; }
.msgr-msg-time {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 4px;
}
.msgr-msg.sent .msgr-msg-time { color: rgba(255,255,255,.85); }
.msgr-msg.received .msgr-msg-time { color: var(--ink-soft); }
.msgr-empty {
  margin: auto;
  color: var(--muted);
  font-style: italic;
  font-size: 15px;
}
.msgr-input-area {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.msgr-input-area input[type="text"] {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  font-size: 15px;
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.msgr-input-area input[type="text"]:focus { border-color: var(--accent); }
.msgr-input-area button {
  padding: 11px 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  transition: background .15s;
}
.msgr-input-area button:hover { background: var(--accent-dark); }
@media (max-width: 760px) {
  .msgr--with-sidebar { flex-direction: column; }
  .msgr-sidebar { width: 100%; max-height: 38vh; border-right: none; border-bottom: 1px solid var(--line); flex-shrink: 0; }
  body.chat-page .container { padding: 0 8px; }
  body.chat-page .site-header { padding: 0; }
  body.chat-page .header-row { padding: 8px 12px; }
}

/* Legacy chat fallback (kept for older includes that may still use .chat-msg) */
.chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 65vh;
  min-height: 380px;
  overflow-y: auto;
  padding: 18px 16px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--line);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif;
}
.chat-msg {
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 70%;
  word-wrap: break-word;
  font-size: 15px;
  line-height: 1.4;
  position: relative;
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.support {
  align-self: flex-start;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-msg .when {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 4px;
  display: block;
}
.chat-msg.user .when { color: rgba(255,255,255,.85); }
.chat-msg.support .when { color: var(--ink-soft); }
.chat-empty {
  color: var(--muted);
  font-style: italic;
  padding: 36px 20px;
  text-align: center;
}

/* Hero tagline strip on home */
.tagline-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  padding: 10px 0 36px;
}
.tagline-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
}
.tagline-item h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--accent-dark);
}
.tagline-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

/* Error pages */
.error-card { text-align: center; padding: 60px 20px; }
.error-card .error-code { font-size: 96px; color: var(--accent); font-weight: 700; line-height: 1; }
.error-card h1 { margin: 12px 0 6px; }

/* Footer — symmetric, everything centered on its own line */
.site-footer { margin-top: 60px; background: transparent; border-top: 1px solid var(--line); padding: 28px 0 30px; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.footer-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--ink-soft); }
.footer-links a.muted { color: var(--muted); font-size: 13px; }

/* Admin */
.admin-banner {
  margin: 24px 0 18px;
  font-size: 15px;
  font-weight: 500;
  color: #4a3c00;
}
.admin-banner span {
  background: linear-gradient(120deg, #fff48a 0%, #ffe566 100%);
  padding: 4px 10px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 1px 1px 0 rgba(0,0,0,.04);
}
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; align-items: center; }
.admin-tabs a {
  padding: 8px 14px; border-radius: 8px; text-decoration: none;
  background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--line);
}
.admin-tabs a.active, .admin-tabs a:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.admin-tabs a.admin-tab--primary {
  padding: 12px 22px;
  font-size: 17px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.admin-tabs a.admin-tab--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.admin-tabs a.admin-tab--primary.active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; align-items: baseline; }
.kv dt { color: var(--ink-soft); font-size: 14px; }
.kv dd { margin: 0; }

/* Cabinet page — wider container and consistent panel sizing so closed
   and expanded panels look like they belong to the same column. */
body.cabinet-page main.container { max-width: 1320px; padding: 0 28px; }
body.cabinet-page .collapsible { padding: 0 28px; min-height: 64px; }
body.cabinet-page .collapsible > summary { padding: 22px 0; }

/* On mobile, cabinet panels go ALMOST edge-to-edge.
   Using !important here as a final caretaker against any global .container
   mobile rule that resets padding to 14px. */
@media (max-width: 720px) {
  body.cabinet-page main.container {
    padding: 0 6px !important;
    max-width: 100% !important;
  }
  body.cabinet-page .collapsible {
    padding: 0 16px !important;
    margin: 12px 0 !important;
    width: 100% !important;
  }
  body.cabinet-page h1 { margin: 18px 8px; }
}

/* Tariff selection page — flexbox so that an incomplete bottom row is
   centered (CSS Grid auto-fit can't do that). Each card has a fixed-ish
   width so the rows look like a tidy product wall. */
body.tariff-page main.container { max-width: 1180px; }
body.tariff-page .tariff-page-h1 { text-align: center; margin: 28px 0 22px; }
body.tariff-page .pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 0 48px;
}
body.tariff-page .pricing-card {
  flex: 0 0 300px;
  max-width: 300px;
  min-width: 0;
}

/* Mobile: one card per row, full available width, no horizontal overflow */
@media (max-width: 720px) {
  body.tariff-page main.container { max-width: 100%; padding: 0 14px; }
  body.tariff-page .pricing-grid {
    gap: 14px;
    max-width: 100%;
    padding: 18px 0 32px;
  }
  body.tariff-page .pricing-card {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 22px 18px 20px;
  }
}

/* Cabinet — dashboard variant A */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 22px 0 6px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
  text-align: left;
}
.stat-num {
  font-size: 38px;
  font-weight: 700;
  color: var(--accent-dark);
  line-height: 1.05;
}
.stat-label {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.cabinet-details {
  margin: 28px 0 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 18px;
}
.cabinet-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.cabinet-details > summary::-webkit-details-marker { display: none; }
.cabinet-details > summary::before {
  content: "›";
  display: inline-block;
  font-size: 22px;
  color: var(--accent);
  transition: transform .2s;
  line-height: 1;
}
.cabinet-details[open] > summary::before { transform: rotate(90deg); }
.cabinet-details-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding: 0 0 16px;
}
.cabinet-details-body .card { margin: 0; }

/* Smooth open/close for <details> (kills the abrupt jump in cabinet).
   Uses the modern ::details-content pseudo + interpolate-size. Falls back to
   instant open/close in browsers that don't support it — no broken layout. */
details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.22s ease, content-visibility 0.22s allow-discrete;
}
details[open]::details-content {
  block-size: auto;
}

/* Collapsible cards (used on /partner, /cabinet).

   contain: inline-size — the strongest form of horizontal containment:
   the panel's inline-size cannot depend on its descendants AT ALL. So no
   matter how wide an inner card or form is, the panel stays exactly the
   width of its container, both when closed and when expanded.

   Without this rule, an inner grid like .sub-list with `minmax(300px, 1fr)`
   could push the parent past the container width when opened. */
.collapsible {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 22px;
  margin: 18px 0;
  width: 100%;
  box-sizing: border-box;
  contain: inline-size;
}
.collapsible > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::before {
  content: "›";
  display: inline-block;
  font-size: 22px;
  color: var(--accent);
  transition: transform .2s;
  line-height: 1;
}
.collapsible[open] > summary::before { transform: rotate(90deg); }
.collapsible-body { padding: 0 0 18px; }

/* Subscription card collapsible (cabinet) */
.muted-count { color: var(--muted); font-weight: 500; font-size: 16px; margin-left: 6px; }
.sub-card-collapsible {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.sub-card-summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  flex-wrap: wrap;
}
.sub-card-summary::-webkit-details-marker { display: none; }
.sub-card-summary::before {
  content: "›";
  display: inline-block;
  font-size: 22px;
  color: var(--accent);
  transition: transform .2s;
  line-height: 1;
  flex-shrink: 0;
}
.sub-card-collapsible[open] > .sub-card-summary::before { transform: rotate(90deg); }
.sub-card-summary-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.sub-card-summary-meta { font-size: 13px; color: var(--ink-soft); margin-left: auto; }
.sub-card-body {
  padding: 0 18px 18px 38px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Cabinet logout button */
.cabinet-logout { margin: 18px 0 0; }

/* Danger zone (delete account) */
.danger-zone {
  margin: 32px 0 18px;
  background: #fdeae5;
  border: 1px solid #e8b8a8;
  border-radius: 14px;
  padding: 22px;
}
.danger-zone h3 { margin: 0 0 8px; color: #8d2818; font-size: 18px; }
.danger-zone p { margin: 0 0 16px; color: #6e3325; font-size: 14px; }
.danger-zone .form { max-width: none; }
.danger-zone label { color: #6e3325; }
.danger-zone input { background: #fff; border-color: #e8b8a8; }
.danger-zone input:focus { border-color: var(--err); outline: none; }

/* ================================================================
   Test landing (/test) — beautiful, no tariffs on first screen
   ================================================================ */
body.landing-test main.container { max-width: 1180px; }

.lt-hero { padding: 32px 0 24px; position: relative; }
.lt-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.lt-eyebrow {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.lt-hero-text h1 {
  font-size: 52px;
  line-height: 1.08;
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
.lt-hero-text p {
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0 0 26px;
  max-width: 540px;
}
.lt-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.lt-btn-lg { padding: 14px 28px; font-size: 17px; border-radius: 12px; }
.lt-hero-meta { margin-top: 22px; font-size: 14px; color: var(--ink-soft); display: flex; gap: 4px; flex-wrap: wrap; }

.lt-hero-art {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lt-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
}
.lt-orb-1 { width: 280px; height: 280px; background: var(--accent-soft); top: 20px; left: 30px; }
.lt-orb-2 { width: 220px; height: 220px; background: #ffe9c8; bottom: 20px; right: 20px; }
.lt-orb-3 { width: 160px; height: 160px; background: #d6ecd9; top: 40%; right: 40%; }
.lt-card-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  z-index: 1;
}
.lt-mini-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 30px -12px rgba(180, 96, 58, .25);
  font-family: 'Inter', system-ui, sans-serif;
}
.lt-mini-card:nth-child(1) { transform: translateX(-18px); }
.lt-mini-card:nth-child(2) { transform: translateX(8px); }
.lt-mini-card:nth-child(3) { transform: translateX(-6px); }
.lt-mini-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.lt-dot-ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.lt-dot-warm { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.lt-mini-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.lt-mini-s { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.lt-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 40px 0;
}
.lt-pillar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 20px;
  transition: transform .15s, box-shadow .15s;
}
.lt-pillar:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.12); }
.lt-icon { font-size: 32px; line-height: 1; margin-bottom: 10px; }
.lt-pillar h3 { font-size: 17px; margin: 0 0 6px; }
.lt-pillar p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

.lt-quote {
  text-align: center;
  padding: 36px 24px;
  margin: 30px 0;
  background: linear-gradient(135deg, var(--accent-soft), #fff4e6);
  border-radius: 20px;
}
.lt-quote blockquote {
  font-size: 24px;
  font-style: italic;
  margin: 0 auto 12px;
  max-width: 720px;
  color: var(--ink);
  line-height: 1.4;
}
.lt-quote cite { color: var(--ink-soft); font-style: normal; font-size: 15px; }

.lt-steps { padding: 30px 0; }
.lt-steps h2 { font-size: 30px; margin: 0 0 24px; text-align: center; }
.lt-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.lt-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  position: relative;
}
.lt-step-num {
  display: inline-flex;
  width: 36px; height: 36px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 12px;
}
.lt-step h3 { margin: 0 0 6px; font-size: 18px; }
.lt-step p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.lt-faq { padding: 30px 0; max-width: 760px; margin: 0 auto; }
.lt-faq h2 { font-size: 28px; margin: 0 0 18px; text-align: center; }
.lt-faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 0 18px;
}
.lt-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lt-faq-item > summary::-webkit-details-marker { display: none; }
.lt-faq-item > summary::before {
  content: "+";
  display: inline-block;
  width: 22px;
  text-align: center;
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
  transition: transform .2s;
}
.lt-faq-item[open] > summary::before { content: "−"; }
.lt-faq-body { padding: 0 0 16px 32px; color: var(--ink-soft); font-size: 15px; }
.lt-faq-body p { margin: 0; }

.lt-cta {
  text-align: center;
  padding: 50px 24px 60px;
  margin: 40px 0 20px;
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
  border: 1px solid var(--line);
  border-radius: 24px;
}
.lt-cta h2 { font-size: 34px; margin: 0 0 10px; }
.lt-cta p { font-size: 17px; color: var(--ink-soft); margin: 0 0 22px; }
.lt-cta-sub { margin-top: 14px; color: var(--ink-soft); font-size: 14px; }

@media (max-width: 900px) {
  .lt-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .lt-hero-text h1 { font-size: 38px; }
  .lt-hero-art { height: 320px; order: -1; }
  .lt-pillars { grid-template-columns: 1fr 1fr; }
  .lt-steps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .lt-hero { padding: 16px 0 8px; }
  .lt-hero-text h1 { font-size: 30px; line-height: 1.15; }
  .lt-hero-text p { font-size: 16px; }
  .lt-btn-lg { padding: 12px 22px; font-size: 16px; width: 100%; text-align: center; }
  .lt-hero-cta { flex-direction: column; gap: 10px; }
  .lt-hero-art { height: 260px; }
  .lt-mini-card { padding: 12px 14px; }
  .lt-mini-t { font-size: 13px; }
  .lt-mini-s { font-size: 11px; }
  .lt-pillars { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .lt-pillar { padding: 18px 16px; }
  .lt-quote { padding: 24px 18px; margin: 20px 0; border-radius: 16px; }
  .lt-quote blockquote { font-size: 18px; }
  .lt-steps h2, .lt-faq h2 { font-size: 24px; }
  .lt-cta { padding: 32px 18px 36px; border-radius: 18px; }
  .lt-cta h2 { font-size: 26px; }
  .lt-cta p { font-size: 15px; }
}

/* ================================================================
   Test landing 2 (/test2) — bento + comparison style
   ================================================================ */
body.landing-t2 main.container { max-width: 1200px; }

.t2-hero {
  position: relative;
  padding: 60px 0 40px;
  overflow: hidden;
}
.t2-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 30%, transparent 80%);
  opacity: .6;
  z-index: 0;
}
.t2-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.t2-hero-content h1 {
  font-size: 60px;
  line-height: 1.05;
  margin: 0 0 20px;
  letter-spacing: -.02em;
}
.t2-accent {
  background: linear-gradient(120deg, var(--accent), #d8845e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.t2-hero-content p {
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0 auto 28px;
  max-width: 560px;
  line-height: 1.5;
}
.t2-cta-row {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.t2-btn-big { padding: 16px 32px; font-size: 17px; border-radius: 999px; }
.t2-link-arrow {
  text-decoration: none;
  font-weight: 600;
  color: var(--accent-dark);
  font-size: 15px;
}
.t2-link-arrow:hover { text-decoration: underline; }

.t2-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 0;
}
.t2-stat { text-align: center; padding: 0 14px; border-right: 1px solid var(--line); }
.t2-stat:last-child { border-right: none; }
.t2-stat-num {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-dark);
  line-height: 1;
  margin-bottom: 6px;
}
.t2-stat-label { font-size: 13px; color: var(--ink-soft); }

.t2-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  padding: 50px 0;
}
.t2-bento-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px;
  transition: transform .15s, box-shadow .15s;
}
.t2-bento-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.15); }
.t2-bento-wide { grid-column: span 2; }
.t2-bento-dark { grid-column: span 2; background: var(--ink); color: #f6e8d4; border-color: var(--ink); }
.t2-bento-dark p { color: #d3c4a8; }
.t2-bento-icon { font-size: 36px; line-height: 1; margin-bottom: 16px; }
.t2-bento-card h3 { font-size: 22px; margin: 0 0 8px; }
.t2-bento-card p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

.t2-compare { padding: 30px 0 50px; }
.t2-compare h2 { text-align: center; font-size: 32px; margin: 0 0 28px; }
.t2-compare-table {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.t2-compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 16px;
}
.t2-compare-row:last-child { border-bottom: none; }
.t2-compare-head { background: var(--bg-soft); font-weight: 700; }
.t2-compare-us { color: var(--ok); font-weight: 600; text-align: center; }
.t2-compare-them { color: var(--ink-soft); text-align: center; }

.t2-final { padding: 40px 0 60px; }
.t2-final-card {
  background: linear-gradient(135deg, var(--accent), #c97048);
  color: #fff;
  border-radius: 24px;
  padding: 60px 40px;
  text-align: center;
}
.t2-final-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 14px;
}
.t2-final-card h2 { font-size: 38px; margin: 0 0 14px; }
.t2-final-card p { font-size: 18px; max-width: 520px; margin: 0 auto 28px; opacity: .9; }
.t2-final-card .btn-primary {
  background: #fff;
  color: var(--accent-dark);
}
.t2-final-card .btn-primary:hover { background: var(--bg); }

@media (max-width: 900px) {
  .t2-hero-content h1 { font-size: 44px; }
  .t2-stats { grid-template-columns: 1fr 1fr; gap: 0; padding: 14px 0; }
  .t2-stat { padding: 14px; border-right: none; border-bottom: 1px solid var(--line); }
  .t2-stat:nth-child(2n) { border-right: none; }
  .t2-stat:nth-last-child(-n+2) { border-bottom: none; }
  .t2-bento { grid-template-columns: 1fr 1fr; }
  .t2-bento-wide, .t2-bento-dark { grid-column: span 2; }
  .t2-final-card h2 { font-size: 28px; }
}
@media (max-width: 560px) {
  .t2-hero { padding: 30px 0 24px; }
  .t2-hero-content h1 { font-size: 34px; }
  .t2-hero-content p { font-size: 16px; }
  .t2-btn-big { padding: 13px 22px; font-size: 16px; }
  .t2-bento { grid-template-columns: 1fr; gap: 12px; padding: 30px 0; }
  .t2-bento-wide, .t2-bento-dark { grid-column: span 1; }
  .t2-bento-card { padding: 22px 18px; }
  .t2-compare h2 { font-size: 24px; }
  .t2-compare-row { padding: 12px 14px; font-size: 14px; }
  .t2-final-card { padding: 36px 22px; border-radius: 18px; }
  .t2-final-card h2 { font-size: 24px; }
  .t2-final-card p { font-size: 15px; }
}

/* ================================================================
   Test landing 3 (/test3) — editorial / story style with photo card
   ================================================================ */
body.landing-t3 main.container { max-width: 980px; }

.t3-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
  padding: 50px 0 30px;
}
.t3-hero-text h1 {
  font-size: 56px;
  line-height: 1.05;
  margin: 0 0 22px;
  letter-spacing: -.01em;
}
.t3-hero-text h1 em {
  font-style: italic;
  color: var(--accent-dark);
}
.t3-hero-text p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 520px;
}

.t3-hero-photo {
  display: flex;
  justify-content: center;
}
.t3-photo-frame {
  position: relative;
  background: #fff;
  padding: 16px 16px 50px;
  border-radius: 4px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.25), 0 0 0 1px var(--line);
  transform: rotate(-3deg);
  width: 280px;
  font-family: 'Caveat', 'Comic Sans MS', cursive;
}
.t3-photo-image {
  width: 100%;
  height: 280px;
  background:
    radial-gradient(circle at 50% 35%, #f3d6c4 0%, #e6b89a 60%, #c98969 100%);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.t3-photo-image::before {
  content: "👵";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 130px;
}
.t3-photo-tape {
  position: absolute;
  width: 80px;
  height: 22px;
  background: rgba(255, 235, 180, .65);
  border: 1px solid rgba(0,0,0,.04);
}
.t3-tape-1 { top: -8px; left: 30px; transform: rotate(-12deg); }
.t3-tape-2 { top: -8px; right: 30px; transform: rotate(8deg); }
.t3-photo-caption {
  text-align: center;
  font-size: 22px;
  color: var(--ink);
  margin-top: 12px;
}

.t3-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  margin: 30px 0 50px;
}
.t3-strip-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.t3-strip-num { font-size: 28px; font-weight: 700; color: var(--accent-dark); line-height: 1; }
.t3-strip-label { font-size: 13px; color: var(--ink-soft); }
.t3-strip-divider { width: 1px; height: 40px; background: var(--line); }

.t3-story {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.t3-story-alt { background: var(--card); margin: 0 -24px; padding: 32px 24px; border-radius: 16px; border: 1px solid var(--line); }
.t3-story-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 56px;
  font-weight: 200;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.04em;
}
.t3-story-content h2 { font-size: 30px; margin: 0 0 14px; line-height: 1.2; }
.t3-story-content p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.t3-list { padding-left: 0; list-style: none; margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.t3-list li { padding-left: 24px; position: relative; }
.t3-list li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.t3-list b { color: var(--ink); }

.t3-cta-band {
  margin: 50px 0 30px;
  padding: 50px 24px;
  background: linear-gradient(180deg, var(--accent-soft), #fef0e2);
  border-radius: 24px;
  text-align: center;
}
.t3-cta-content h2 { font-size: 36px; margin: 0 0 12px; }
.t3-cta-content p { font-size: 17px; color: var(--ink-soft); max-width: 540px; margin: 0 auto 26px; }
.t3-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.t3-btn-big { padding: 14px 28px; font-size: 16px; border-radius: 999px; }

@media (max-width: 900px) {
  .t3-hero { grid-template-columns: 1fr; gap: 30px; padding: 30px 0 20px; }
  .t3-hero-text h1 { font-size: 40px; }
  .t3-hero-photo { order: -1; }
  .t3-strip { flex-wrap: wrap; gap: 16px; padding: 20px; }
  .t3-strip-divider { display: none; }
}
@media (max-width: 560px) {
  .t3-hero-text h1 { font-size: 30px; }
  .t3-hero-text p { font-size: 15px; }
  .t3-photo-frame { width: 220px; padding: 12px 12px 40px; }
  .t3-photo-image { height: 220px; }
  .t3-photo-image::before { font-size: 100px; }
  .t3-photo-caption { font-size: 18px; }
  .t3-story { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .t3-story-num { font-size: 36px; }
  .t3-story-content h2 { font-size: 22px; }
  .t3-story-content p { font-size: 15px; }
  .t3-story-alt { margin: 0 -10px; padding: 24px 16px; border-radius: 12px; }
  .t3-list { font-size: 15px; }
  .t3-cta-band { padding: 32px 18px; border-radius: 16px; margin: 32px 0 18px; }
  .t3-cta-content h2 { font-size: 24px; }
  .t3-cta-content p { font-size: 15px; }
}

/* ================================================================
   Test landing 4 (/test4) — modern, big type + status cards + FAQ
   ================================================================ */
body.landing-t4 main.container { max-width: 1120px; }

.t4-hero { text-align: center; padding: 70px 0 40px; max-width: 820px; margin: 0 auto; }
.t4-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.t4-hero h1 {
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 24px;
  font-weight: 700;
}
.t4-grad {
  background: linear-gradient(120deg, var(--accent), #d8845e 60%, #e3b07f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.t4-sub { font-size: 19px; color: var(--ink-soft); max-width: 560px; margin: 0 auto 30px; line-height: 1.5; }
.t4-cta { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.t4-btn { padding: 16px 32px; font-size: 16px; border-radius: 999px; font-weight: 600; }
.t4-link { font-family: 'Inter', system-ui, sans-serif; color: var(--accent-dark); text-decoration: none; font-weight: 600; font-size: 15px; }
.t4-link:hover { text-decoration: underline; }

.t4-status {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 30px 0 50px;
  max-width: 1100px;
  margin: 0 auto;
}
.t4-status-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  transition: transform .15s, box-shadow .15s;
}
.t4-status-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0,0,0,.12); }
.t4-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.t4-dot-ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.t4-dot-warm { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.t4-status-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.t4-status-s { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.t4-feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 50px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.t4-feature h3 { font-size: 24px; line-height: 1.15; margin: 16px 0 10px; }
.t4-feature p { color: var(--ink-soft); margin: 0; font-size: 15px; line-height: 1.5; }
.t4-feature-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .1em;
}

.t4-faq-block {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  padding: 60px 0;
  align-items: start;
}
.t4-faq-mini {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 12px;
}
.t4-faq-side h2 { font-size: 38px; line-height: 1.1; margin: 0 0 16px; }
.t4-faq-side p { color: var(--ink-soft); font-size: 16px; max-width: 320px; }
.t4-faq-list { display: flex; flex-direction: column; gap: 10px; }
.t4-faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 22px;
}
.t4-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.t4-faq-item > summary::-webkit-details-marker { display: none; }
.t4-faq-item > summary::after {
  content: "+";
  font-size: 24px;
  color: var(--accent);
  transition: transform .2s;
  line-height: 1;
}
.t4-faq-item[open] > summary::after { content: "−"; }
.t4-faq-body { padding: 0 0 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }

.t4-final {
  text-align: center;
  padding: 70px 32px 80px;
  margin: 40px 0 30px;
  background: linear-gradient(180deg, var(--ink) 0%, #1f1812 100%);
  color: #f6e8d4;
  border-radius: 28px;
}
.t4-final-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 700;
}
.t4-final h2 { font-size: 44px; line-height: 1.1; margin: 0 0 14px; color: #fff; letter-spacing: -.01em; }
.t4-final p { font-size: 17px; color: #d3c4a8; max-width: 540px; margin: 0 auto 30px; line-height: 1.5; }
.t4-btn-final { background: #fff; color: var(--ink); }
.t4-btn-final:hover { background: var(--bg); color: var(--ink); }

@media (max-width: 900px) {
  .t4-hero { padding: 40px 0 24px; }
  .t4-hero h1 { font-size: 50px; }
  .t4-status { grid-template-columns: 1fr 1fr; }
  .t4-feature-row { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
  .t4-faq-block { grid-template-columns: 1fr; gap: 26px; padding: 36px 0; }
  .t4-final h2 { font-size: 32px; }
}
@media (max-width: 560px) {
  .t4-hero { padding: 24px 0 16px; }
  .t4-hero h1 { font-size: 38px; }
  .t4-sub { font-size: 16px; }
  .t4-cta { flex-direction: column; gap: 12px; }
  .t4-btn { width: 100%; padding: 14px; }
  .t4-status { grid-template-columns: 1fr; gap: 10px; padding: 20px 0 30px; }
  .t4-feature h3 { font-size: 20px; }
  .t4-faq-side h2 { font-size: 28px; }
  .t4-final { padding: 44px 22px 50px; border-radius: 18px; }
  .t4-final h2 { font-size: 26px; }
  .t4-final p { font-size: 15px; }
}

/* ================================================================
   Test landing 5 (/test5) — staggered headline + marquee + dark final
   ================================================================ */
body.landing-t5 main.container { max-width: 1100px; }

.t5-hero { padding: 60px 0 30px; max-width: 880px; margin: 0 auto; }
.t5-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 28px;
}
.t5-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.t5-hero h1 { font-size: 80px; line-height: .96; letter-spacing: -.03em; margin: 0 0 26px; font-weight: 700; }
.t5-line { display: block; }
.t5-line-em {
  font-style: italic;
  color: transparent;
  background: linear-gradient(120deg, var(--accent), #d8845e);
  -webkit-background-clip: text;
  background-clip: text;
  padding-left: 24px;
}
.t5-hero p { font-size: 19px; color: var(--ink-soft); max-width: 540px; line-height: 1.5; margin: 0 0 28px; }
.t5-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.t5-btn-big { padding: 16px 32px; font-size: 17px; border-radius: 14px; font-weight: 600; }
.t5-arrow { color: var(--accent-dark); font-weight: 600; text-decoration: none; font-size: 15px; }
.t5-arrow::after { content: " →"; }
.t5-arrow:hover { text-decoration: underline; }
.t5-trust { display: flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 14px; color: var(--ink-soft); font-family: 'Inter', system-ui, sans-serif; }
.t5-trust-stars { color: #e0a85c; letter-spacing: 1px; }

.t5-marquee {
  background: var(--ink);
  color: #f6e8d4;
  padding: 20px 0;
  margin: 40px 0;
  overflow: hidden;
  position: relative;
}
.t5-marquee-inner {
  display: flex;
  gap: 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  animation: t5-scroll 30s linear infinite;
}
.t5-marquee-inner span:nth-child(2n) { color: var(--accent); }
@keyframes t5-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.t5-section-h { font-size: 32px; margin: 0 0 24px; letter-spacing: -.01em; }

.t5-status { padding: 30px 0 50px; }
.t5-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.t5-status-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', system-ui, sans-serif;
}
.t5-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.t5-dot-ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.t5-dot-warm { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.t5-status-t { font-size: 14px; font-weight: 600; }
.t5-status-s { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.t5-bigtype {
  padding: 60px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
.t5-bigtype-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.t5-bigtype h2 { font-size: 64px; line-height: 1.05; margin: 0 0 16px; letter-spacing: -.02em; }
.t5-bigtype h2 em { font-style: italic; color: var(--accent-dark); }
.t5-bigtype p { font-size: 18px; color: var(--ink-soft); max-width: 560px; margin: 0 auto; line-height: 1.55; }

.t5-faq { padding: 50px 0; max-width: 760px; margin: 0 auto; }
.t5-faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.t5-faq-item:first-of-type { border-top: 1px solid var(--line); }
.t5-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.t5-faq-item > summary::-webkit-details-marker { display: none; }
.t5-plus {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.t5-plus::before, .t5-plus::after {
  content: "";
  position: absolute;
  background: var(--accent);
  border-radius: 1px;
  transition: transform .2s;
}
.t5-plus::before { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }
.t5-plus::after { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.t5-faq-item[open] .t5-plus::after { transform: rotate(90deg); }
.t5-faq-body { padding: 0 0 22px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

.t5-final {
  padding: 40px 0 30px;
}
.t5-final-card {
  background: linear-gradient(135deg, var(--ink) 0%, #2d251c 100%);
  color: #f6e8d4;
  border-radius: 28px;
  padding: 70px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.t5-final-card::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: .25;
}
.t5-final-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 700;
  position: relative;
}
.t5-final h2 { font-size: 44px; margin: 0 0 14px; color: #fff; letter-spacing: -.01em; position: relative; }
.t5-final p { font-size: 17px; color: #d3c4a8; max-width: 540px; margin: 0 auto 30px; line-height: 1.55; position: relative; }
.t5-final .btn-primary { background: #fff; color: var(--ink); position: relative; }
.t5-final .btn-primary:hover { background: var(--bg); color: var(--ink); }

@media (max-width: 900px) {
  .t5-hero { padding: 40px 0 20px; }
  .t5-hero h1 { font-size: 60px; }
  .t5-status-grid { grid-template-columns: 1fr 1fr; }
  .t5-bigtype h2 { font-size: 44px; }
  .t5-section-h { font-size: 26px; }
}
@media (max-width: 560px) {
  .t5-hero { padding: 24px 0 12px; }
  .t5-hero h1 { font-size: 40px; }
  .t5-line-em { padding-left: 12px; }
  .t5-hero p { font-size: 16px; }
  .t5-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .t5-btn-big { width: 100%; text-align: center; padding: 14px; }
  .t5-marquee { padding: 14px 0; }
  .t5-marquee-inner { font-size: 14px; gap: 18px; }
  .t5-status-grid { grid-template-columns: 1fr; gap: 10px; }
  .t5-bigtype { padding: 36px 0; }
  .t5-bigtype h2 { font-size: 32px; }
  .t5-bigtype p { font-size: 15px; }
  .t5-faq-item > summary { font-size: 16px; padding: 18px 0; }
  .t5-faq-body { font-size: 15px; }
  .t5-final-card { padding: 44px 22px; border-radius: 18px; }
  .t5-final h2 { font-size: 28px; }
  .t5-final p { font-size: 15px; }
}

/* ================================================================
   Test landing 6 (/test6) — vap.studio-style: bold typography, dark
   palette, kinetic strip, asymmetric grid. "Crazy" turned down to ~40%.
   ================================================================ */
body.landing-t6 {
  background: var(--bg);
  color: var(--ink);
}
body.landing-t6 main.container { max-width: 1280px; padding: 0 32px; }
body.landing-t6 .site-header { background: var(--bg-soft); border-bottom-color: var(--line); }

.t6-hero { padding: 60px 0 70px; position: relative; text-align: center; }

.t6-h1 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 1.12;            /* enough headroom for italic descenders/ascenders */
  letter-spacing: -.04em;
  font-weight: 700;
  margin: 0 0 60px;
  color: var(--ink);
}
.t6-h1 em {
  /* The italic 'р/б' glyphs in Georgia run taller than upright ones, so they
     can crash into the line above. A tiny inline-block + extra top padding
     fixes the overlap without affecting the visual baseline of the page. */
  display: inline-block;
  padding-top: .08em;
}
.t6-h1-row { display: block; }
/* Light "kinetic" asymmetry — second line a touch to the right, but centered overall */
.t6-h1-row-shift { padding-left: 0; }
.t6-h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* Hero buttons — centered */
.t6-hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.t6-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--bg);
  padding: 18px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid var(--ink);
  transition: background .2s, transform .2s;
}
.t6-btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.t6-btn-arrow {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  background: var(--bg);
  color: var(--ink);
  border-radius: 50%;
  font-size: 11px;
  transition: transform .2s;
}
.t6-btn-primary:hover .t6-btn-arrow { transform: rotate(45deg); background: #fff; }
.t6-btn-ghost {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.t6-btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

/* Edge-to-edge marquee. Two identical track copies sit side-by-side and
   the wrapper translates by exactly -100% of one track — when the first
   ends the second is already in view, so there's no visible reset. */
.t6-marquee {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 80px;
  background: var(--ink);
  color: var(--bg);
  padding: 26px 0;
  overflow: hidden;
  display: flex;
  gap: 0;
  /* Visual separation from the page sections above and below — thin
     accent rules + soft drop-shadow give it presence without "clouds".
     rgba of var(--accent) #d4322a at .35 opacity. */
  border-top: 1px solid rgba(212, 50, 42, .35);
  border-bottom: 1px solid rgba(212, 50, 42, .35);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.18), 0 -10px 24px -12px rgba(0,0,0,.18);
}
.t6-marquee-track {
  display: flex;
  align-items: center;
  font-family: 'Georgia', serif;
  font-size: 32px;
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
  animation: t6-scroll 40s linear infinite;
}
.t6-marquee-track > span { padding: 0 22px; }
.t6-marquee-sep { color: var(--accent); font-style: normal; font-size: 14px; padding: 0 8px !important; }
@keyframes t6-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.t6-section-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.t6-section-h {
  font-family: 'Georgia', serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 700;
  max-width: 900px;
}
.t6-em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.t6-em-line {
  display: inline-block;
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.t6-cards-section { padding: 40px 0 100px; }
.t6-section-head { margin-bottom: 50px; }
.t6-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.t6-card {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 36px 28px 40px;
  background: transparent;
  position: relative;
}
.t6-card:last-child { border-right: none; }
.t6-card h3 {
  font-family: 'Georgia', serif;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  font-weight: 700;
}
.t6-card p {
  font-family: 'Georgia', serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 320px;
}

.t6-bigtype { padding: 60px 0 100px; border-top: 1px solid var(--line); }
.t6-bigtype-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.t6-bigtype-h {
  font-family: 'Georgia', serif;
  font-size: clamp(48px, 8vw, 110px);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 56px;
  font-weight: 700;
}
.t6-bigtype-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1080px;
}
.t6-bigtype-grid h4 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 12px;
  font-weight: 700;
}
.t6-bigtype-grid p {
  font-family: 'Georgia', serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.t6-faq { padding: 60px 0 100px; border-top: 1px solid var(--line); max-width: 920px; }
.t6-faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.t6-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 28px 0;
  font-family: 'Georgia', serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: var(--ink);
  transition: color .2s;
}
.t6-faq-item > summary:hover { color: var(--accent); }
.t6-faq-item > summary::-webkit-details-marker { display: none; }
.t6-faq-mark {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.t6-faq-mark::before, .t6-faq-mark::after {
  content: "";
  position: absolute;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .25s, background .2s;
}
.t6-faq-mark::before { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }
.t6-faq-mark::after { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.t6-faq-item[open] .t6-faq-mark::before { background: var(--accent); }
.t6-faq-item[open] .t6-faq-mark::after { transform: rotate(90deg); background: var(--accent); }
.t6-faq-body {
  padding: 0 0 28px;
  font-family: 'Georgia', serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 640px;
}

.t6-final {
  padding: 90px 60px 100px;
  margin: 60px 0;
  background: var(--accent);
  color: #fff;
  text-align: center;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
}
.t6-final-h {
  font-family: 'Georgia', serif;
  font-size: clamp(48px, 8vw, 110px);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 auto 36px;
  color: #fff;
  font-weight: 700;
  position: relative;
}
.t6-final-h em { color: var(--ink); font-style: italic; font-weight: 400; }
.t6-btn-final { background: var(--ink); color: #fff; border-color: var(--ink); position: relative; }
.t6-btn-final:hover { background: #fff; border-color: #fff; color: var(--accent-dark); transform: translateY(-2px); }
.t6-btn-final .t6-btn-arrow { background: var(--accent); color: #fff; }
.t6-btn-final:hover .t6-btn-arrow { background: var(--accent); color: #fff; transform: rotate(45deg); }

@media (max-width: 900px) {
  body.landing-t6 main.container { padding: 0 18px; }
  .t6-hero { padding: 36px 0 48px; }
  .t6-h1 {
    font-size: clamp(54px, 14vw, 96px);
    line-height: 1.12;
    letter-spacing: -.025em;
    margin-bottom: 40px;
    overflow-wrap: anywhere;
  }
  .t6-section-h {
    font-size: clamp(34px, 8vw, 52px);
    line-height: 1.08;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
  }
  .t6-marquee { margin-bottom: 50px; padding: 16px 0; }
  .t6-marquee-track { font-size: 22px; }
  .t6-marquee-track > span { padding: 0 14px; }
  .t6-cards { grid-template-columns: 1fr; border-top: none; }
  .t6-card { border-right: none; padding: 26px 18px 30px; }
  .t6-card h3 { font-size: 22px; }
  .t6-card p { font-size: 15px; }
  .t6-bigtype { padding: 40px 0 60px; }
  .t6-bigtype-h {
    font-size: clamp(44px, 11vw, 72px);
    line-height: 1.05;
    letter-spacing: -.025em;
    margin-bottom: 32px;
    overflow-wrap: anywhere;
  }
  .t6-bigtype-grid { grid-template-columns: 1fr; gap: 22px; }
  .t6-bigtype-grid h4 { font-size: 12px; }
  .t6-bigtype-grid p { font-size: 16px; line-height: 1.5; }
  .t6-faq { padding: 40px 0 60px; }
  .t6-faq-item > summary { font-size: 18px; padding: 20px 0; }
  .t6-faq-body { font-size: 15px; }
  .t6-final {
    padding: 50px 22px 60px;
    margin: 40px 0;
    border-radius: 20px;
  }
  .t6-final-h {
    font-size: clamp(40px, 10vw, 64px);
    line-height: 1.05;
    letter-spacing: -.025em;
    margin-bottom: 30px;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  body.landing-t6 main.container { padding: 0 14px; }
  .t6-h1 { font-size: clamp(46px, 13vw, 64px); }
  .t6-section-h { font-size: clamp(28px, 8vw, 38px); }
  .t6-bigtype-h { font-size: clamp(38px, 11vw, 54px); }
  .t6-final-h { font-size: clamp(34px, 10vw, 46px); }
  .t6-marquee-track { font-size: 20px; }
  .t6-marquee-track > span { padding: 0 12px; }
  .t6-btn-primary { padding: 14px 22px; font-size: 14px; }
  .t6-hero-actions { gap: 12px; }
  .t6-card h3 { font-size: 22px; }
}

/* Mobile */
@media (max-width: 720px) {
  body { font-size: 16px; overflow-x: hidden; }
  .container { padding: 0 14px; max-width: 100%; }
  h1 { font-size: 26px; }
  h2 { font-size: 20px; }
  .hero { padding: 28px 0 16px; }
  .hero h1 { font-size: 28px; line-height: 1.2; }
  .hero p { font-size: 16px; }
  .section-title { font-size: 22px; margin: 22px 0 6px; }

  /* Mobile: same two-row layout as desktop, but tighter.
        row 1: [logo 36px]    [brand text centered]    [auth 36px]
        row 2: [        nav (full width, smaller font, no scrollbar)        ] */
  .header-row {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 8px 12px;
  }
  .header-row > .logo       { grid-column: 1; grid-row: 1; align-self: center; }
  .header-row > .logo-text  { grid-column: 2; grid-row: 1; justify-self: center; }
  .header-row > .nav        { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .header-row > .auth-block { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; }
  .logo img { width: 36px; height: 36px; border-radius: 10px; }
  .logo-text {
    font-size: 17px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
  }
  /* Nav: full labels, centered, smaller font so they fit on one line.
     Falls back to horizontal scroll if everything still doesn't fit. */
  .nav {
    gap: 8px;
    font-size: 12px;
    width: 100%;
    justify-content: space-between;  /* spread links across full width */
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;                /* no scrollbar, no overflow */
    padding: 0 4px 2px;
    margin-top: 2px;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 12px; white-space: nowrap; flex-shrink: 1; }
  .auth-block .btn { padding: 6px 10px; font-size: 13px; }

  /* Use short nav labels on phone */
  .nav-full { display: none; }
  .nav-short { display: inline; }

  /* Compact footer — single line on mobile */
  .site-footer { padding: 10px 0; margin-top: 24px; font-size: 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .footer-row { gap: 6px; flex-direction: column; align-items: center; text-align: center; }
  .footer-links { gap: 10px; font-size: 12px; flex-wrap: wrap; justify-content: center; }

  /* Cards / forms */
  .card { padding: 16px; margin: 14px 0; border-radius: 10px; }
  .card-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 20px; margin: 16px auto; }
  .form { max-width: none; }
  .form input, .form textarea, .form select { font-size: 16px; } /* prevents iOS zoom */
  .form-actions { width: 100%; }
  .btn { padding: 10px 14px; font-size: 15px; }

  /* Pricing — single column on phones */
  .pricing-grid { grid-template-columns: 1fr; gap: 14px; padding: 18px 0 28px; }
  .pricing-card { padding: 24px 18px 22px; }
  .pricing-price { font-size: 32px; }

  /* Subscription cards */
  .sub-list { grid-template-columns: 1fr; }
  .sub-card { padding: 14px; }

  /* Stats / details */
  .stats-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px 12px; }
  .stat-num { font-size: 26px; }
  .cabinet-details, .collapsible { padding: 0 14px; }
  .collapsible > summary { font-size: 17px; padding: 14px 0; }
  .cabinet-details-body { grid-template-columns: 1fr; }

  /* KV */
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 6px; }

  /* Tables — wrap in a horizontal-scroll wrapper, but the table itself still
     looks like a table. Use the .table-wrap container or rely on overflow on
     the parent .card. */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { font-size: 13px; min-width: 520px; }
  .table th, .table td { padding: 6px 8px; }

  /* Danger zone */
  .danger-zone { padding: 16px; }

  /* Admin — banner shown on mobile too, but compact */
  .admin-banner { font-size: 12px; margin: 10px 0 8px; line-height: 1.4; }
  .admin-banner span { padding: 3px 8px; font-weight: 500; }
  .admin-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; gap: 6px; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs a { white-space: nowrap; flex-shrink: 0; padding: 7px 12px; font-size: 14px; }
  .admin-tabs a.admin-tab--primary { padding: 9px 14px; font-size: 14px; font-weight: 700; }

  /* Connection link */
  .conn-link { font-size: 12px; padding: 10px 12px; }
}

/* Chat — full-screen on mobile, input pinned to viewport bottom (bulletproof).

   Approach: don't rely on the flex chain reaching the bottom. Instead pin the
   input bar to the viewport via position: fixed + interactive-widget=resizes-content
   in the meta viewport, which lets Chrome on Android resize the visual
   viewport when the keyboard opens so the fixed bar stays visible above it. */
@media (max-width: 720px) {
  body.chat-page { overflow: visible; height: auto; }
  body.chat-page main.container { padding: 0; }
  body.chat-page .site-footer { display: none; }
  body.chat-page .container.flash-wrap { padding: 0 10px; }
  body.chat-page .site-header { padding: 0; flex-shrink: 0; }
  body.chat-page .header-row { padding: 6px 10px; gap: 6px; }
  /* Banner is shown on chat-page on mobile too — keep it small */
  body.chat-page .admin-banner { display: block; margin: 8px 10px 6px; font-size: 11px; }
  body.chat-page .admin-banner span { padding: 2px 7px; }
  body.chat-page .admin-tabs { margin: 8px 10px 12px; }

  /* msgr is no longer height-locked — it can grow naturally, page scrolls */
  .msgr {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    height: auto;
    min-height: calc(100dvh - 220px); /* roughly viewport minus header+nav+tabs */
    display: flex;
    flex-direction: column;
    padding-bottom: 70px; /* room for fixed input bar */
  }
  .msgr-main { min-height: 0; min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
  .msgr-header { height: 44px; padding: 0 12px; gap: 8px; flex-shrink: 0; }
  .msgr-title { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msgr-subtitle { font-size: 12px; }
  /* Chat container goes edge-to-edge with NO horizontal padding on mobile —
     bubbles handle their own margins via width: 86%. */
  .msgr-messages {
    padding: 12px 0 !important;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* WhatsApp-style: flat 86% width on every bubble + 4% margin from the
     anchored side. Everything is !important so no inherited rule overrides. */
  .msgr-msg {
    font-size: 14px;
    padding: 11px 14px;
    width: 86% !important;
    max-width: 86% !important;
    min-width: 86% !important;
    box-sizing: border-box !important;
    margin: 0 8px !important;
  }
  .msgr-msg.sent     { align-self: flex-end !important;   margin-right: 8px !important; margin-left: auto !important; }
  .msgr-msg.received { align-self: flex-start !important; margin-left: 8px !important;  margin-right: auto !important; }
  .msgr-msg-time { white-space: nowrap; }

  /* Pin the input bar to viewport bottom — always visible, no flex maths */
  .msgr-input-area {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px -6px rgba(0,0,0,.12);
  }
  .msgr-input-area input[type="text"] { padding: 10px 12px; font-size: 16px; min-width: 0; flex: 1 1 0; }
  .msgr-input-area button { padding: 10px 16px; font-size: 14px; flex-shrink: 0; }

  /* Admin support — INDEX (no thread): show only the chat list, hide empty main.
     Sidebar collapses to its content height — no empty space below. */
  .msgr--with-sidebar {
    flex-direction: column;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .msgr--with-sidebar .msgr-sidebar {
    width: 100%;
    max-height: none;
    flex: 0 0 auto;
    min-height: 0;
    border-right: none;
    border-bottom: none;
    overflow-y: visible;
  }
  .msgr--with-sidebar .msgr-main { display: none; }

  /* Admin support — THREAD view: hide sidebar (back-link returns to list), show main */
  .msgr--thread.msgr--with-sidebar .msgr-sidebar { display: none; }
  .msgr--thread.msgr--with-sidebar .msgr-main { display: flex; flex: 1 1 auto; min-height: 0; }

  .msgr-sidebar-header { height: 44px; padding: 0 12px; }
  .msgr-sidebar-title { font-size: 14px; }
  .msgr-chat-item { padding: 12px 14px; }
  .msgr-chat-name { font-size: 14px; }
  .msgr-chat-meta { font-size: 12px; }
}

/* ===== Home landing: lively entrance + float animations (pure CSS) =====
   Per-element stagger/variety is set inline in home.html (animation-delay,
   animation-duration) — inline wins over these class rules, so the classes
   only set name/timing/iteration and never fight the stagger. */
@keyframes home-rise {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: none; }
}
/* Bob animates the standalone `translate` property: it composes with each
   card's Tailwind rotate() natively, and avoids var()-in-@keyframes, which is
   unreliable in WebKit (iOS Safari) — there the bob silently didn't play. */
@keyframes home-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@keyframes home-blob-drift {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%      { transform: translate(-50%, -52%) scale(1.05) rotate(3deg); }
}
.home-rise {
  animation-name: home-rise;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1.3); /* slight overshoot = playful */
  animation-fill-mode: both;
}
.home-float {
  animation-name: home-float;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.home-blob {
  animation-name: home-blob-drift;
  animation-duration: 14s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
  .home-rise, .home-float, .home-blob { animation: none !important; }
}

/* ===== Site-wide micro-animations (every page) ===== */
@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes page-fade {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes logo-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-7deg); }
  75%      { transform: rotate(7deg); }
}
/* Same wiggle, separate name: a load-time animation and a hover animation that
   share a name never restart each other (the animation-name list is unchanged). */
@keyframes logo-wiggle-land {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-7deg); }
  75%      { transform: rotate(7deg); }
}
@keyframes card-pop {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: none; }
}

/* Navbar pill drops in, page content drops in from above on every load */
.site-header nav { animation: nav-drop .9s cubic-bezier(.2,.8,.2,1.2) both; }
main.container { animation: page-fade .35s ease-out both; }

/* Granny logo wiggles when you hover the brand — or tap it (iOS has no real hover) */
.site-header nav > a:first-child:hover img,
.site-header nav > a:first-child:active img { animation: logo-wiggle .45s ease-in-out; }

/* Tapping the logo navigates away mid-wiggle, killing the animation with the page.
   The .logo-nav flag (set by the tap, read in base.html <head>) makes the home page
   replay it on arrival — so it only wiggles after a logo tap, not on every visit. */
.logo-nav .home-page .site-header nav > a:first-child img { animation: logo-wiggle-land .45s ease-in-out; }

/* Buttons: lift on hover, press on click (.btn transition already covers transform) */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }

/* Pricing cards (/buy): staggered pop-in; hover lift already exists */
.pricing-card { animation: card-pop .55s cubic-bezier(.2,.8,.2,1.25) both; }
.pricing-card:nth-child(2) { animation-delay: .08s; }
.pricing-card:nth-child(3) { animation-delay: .16s; }
.pricing-card:nth-child(4) { animation-delay: .24s; }

/* Home hero: feature pills + OS tiles pop on hover */
body.home-page ul.home-rise li { transition: transform .18s ease; }
body.home-page ul.home-rise li:hover { transform: translateY(-3px); }
body.home-page .home-rise span[title] { transition: transform .18s ease; }
body.home-page .home-rise span[title]:hover { transform: translateY(-3px) rotate(-6deg); }

/* Footer links: underline slides in */
.footer-links a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease, color .2s ease;
}
.footer-links a:hover { background-size: 100% 1.5px; }

@media (prefers-reduced-motion: reduce) {
  .site-header nav, main.container, .pricing-card, .flash-wrap > .flash,
  .site-header nav > a:first-child:hover img { animation: none !important; }
  .btn, .pricing-card, .footer-links a,
  body.home-page ul.home-rise li, body.home-page .home-rise span[title] { transition: none; }
  .btn:hover, .btn:active, .pricing-card:hover,
  body.home-page ul.home-rise li:hover, body.home-page .home-rise span[title]:hover { transform: none; }
}

/* ===== Home landing: single viewport on desktop — footer always visible ===== */
@media (min-width: 1024px) {
  body.home-page { height: 100dvh; overflow: hidden; }
  body.home-page main.container {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Clip at main's own edges so a too-tall hero on short laptops trims
       gracefully instead of overlapping the navbar/footer. */
    overflow: hidden;
  }
  /* Slim footer so the hero has more vertical room on one screen. */
  body.home-page .site-footer { margin-top: 0; padding-top: 8px; padding-bottom: 8px; }
}