/* ==========================================================================
   Ai Tool Factory — 10-tool storefront layer
   Consumes the existing --mpt-* tokens, so the gold/green theme, the light
   toggle and white-label colour overrides all keep working untouched.
   Everything is namespaced .tl- so it cannot collide with mpt-landing-v2.
   ========================================================================== */

.tl-wrap { width: min(1200px, 100% - 44px); margin-inline: auto; }
@media (max-width: 640px) { .tl-wrap { width: calc(100% - 32px); } }

.tl-sec { padding: 96px 0; position: relative; }
.tl-sec--tight { padding: 60px 0; }
.tl-sec--alt { background: var(--mpt-canvas-2); }

.tl-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  color: var(--mpt-gold); margin: 0 0 16px;
}
.tl-eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--mpt-grad-gold); }
.tl-center { text-align: center; }
.tl-center .tl-eyebrow { justify-content: center; }

.tl-h2 { font-size: clamp(1.95rem, 3.7vw, 2.95rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 14px; font-weight: 800; }
.tl-lead { color: var(--mpt-muted); font-size: 1.06rem; line-height: 1.68; max-width: 66ch; margin: 0; }
.tl-center .tl-lead { margin-inline: auto; }
/* Solid first: if background-clip:text is unavailable or fails to paint, the
   headline still reads. The gradient is layered on only where it is supported. */
.tl-gold { color: var(--mpt-gold); display: inline-block; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tl-gold {
    background-image: var(--mpt-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ------------------------------------------------------------------ hero */

.tl-hero { padding: 80px 0 64px; position: relative; overflow: hidden; }
.tl-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto; height: 620px; pointer-events: none;
  background:
    radial-gradient(760px 420px at 16% 0%, rgba(255,201,77,.15), transparent 62%),
    radial-gradient(680px 380px at 88% 8%, rgba(43,184,148,.15), transparent 60%);
}
.tl-hero-inner { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center; }
@media (max-width: 1000px) { .tl-hero-inner { grid-template-columns: 1fr; gap: 42px; } }

.tl-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px;
  border-radius: 999px; border: 1px solid var(--mpt-border-gold);
  background: rgba(255,201,77,.08); color: var(--mpt-gold);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 22px;
}
.tl-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--mpt-emerald); box-shadow: 0 0 0 4px rgba(43,184,148,.20); }

.tl-hero h1 { font-size: clamp(2.35rem, 5.2vw, 4.05rem); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 20px; font-weight: 900; }
.tl-hero .tl-lead { font-size: 1.14rem; margin-bottom: 30px; }
.tl-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.tl-chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--mpt-border);
  background: var(--mpt-card); font-size: 12.5px; font-weight: 600; color: var(--mpt-muted);
}
.tl-chip b { color: var(--mpt-emerald); }

/* hero: the ten, stacked */
.tl-hero-panel {
  border: 1px solid var(--mpt-border); border-radius: 20px; background: var(--mpt-card);
  box-shadow: var(--mpt-shadow-soft); padding: 8px; position: relative; overflow: hidden;
}
.tl-hero-panel::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--mpt-grad-gold); }
.tl-mini { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; }
.tl-mini + .tl-mini { border-top: 1px solid var(--mpt-border); border-radius: 0; }
.tl-mini-n {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--mpt-on-gold); background: var(--mpt-grad-gold);
}
.tl-mini.alt .tl-mini-n { background: linear-gradient(135deg, var(--mpt-emerald-soft), var(--mpt-emerald)); color: #fff; }
.tl-mini b { display: block; font-size: 13.5px; font-weight: 700; color: var(--mpt-text); }
.tl-mini small { display: block; font-size: 11.5px; color: var(--mpt-muted); font-weight: 600; }
.tl-mini span.tag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--mpt-emerald); white-space: nowrap; }

/* ----------------------------------------------------------------- stats */

.tl-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--mpt-border); border: 1px solid var(--mpt-border);
  border-radius: 18px; overflow: hidden;
}
@media (max-width: 760px) { .tl-stats { grid-template-columns: repeat(2, 1fr); } }
.tl-stat { background: var(--mpt-card); padding: 26px 22px; }
.tl-stat b { display: block; font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 900; letter-spacing: -.04em; color: var(--mpt-text); }
.tl-stat span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--mpt-muted); line-height: 1.45; }

/* --------------------------------------------------------- tool sections */

.tl-tool {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 58px 0; border-top: 1px solid var(--mpt-border);
}
.tl-tool:first-of-type { border-top: 0; }
.tl-tool.is-flip .tl-tool-copy { order: 2; }
.tl-tool.is-flip .tl-tool-shot { order: 1; }
@media (max-width: 980px) {
  .tl-tool { grid-template-columns: 1fr; gap: 32px; padding: 44px 0; }
  .tl-tool.is-flip .tl-tool-copy, .tl-tool.is-flip .tl-tool-shot { order: initial; }
}

.tl-tool-num {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mpt-muted);
}
.tl-tool-num b {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: color-mix(in srgb, var(--tc, #ffc94d) 18%, transparent);
  color: var(--tc, var(--mpt-gold));
  border: 1px solid color-mix(in srgb, var(--tc, #ffc94d) 36%, transparent);
  font-size: 12.5px; letter-spacing: 0;
}
.tl-tool h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 8px; font-weight: 800; }
.tl-tool-tag { color: var(--tc, var(--mpt-gold)); font-size: 14.5px; font-weight: 700; margin: 0 0 14px; }
.tl-tool-desc { color: var(--mpt-muted); font-size: 15px; line-height: 1.68; margin: 0 0 20px; }

.tl-points { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.tl-points li { display: flex; gap: 11px; font-size: 14px; line-height: 1.55; color: var(--mpt-muted); }
.tl-points li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--mpt-emerald); }

.tl-tool-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tl-tool-meta span {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--mpt-border);
  background: var(--mpt-canvas-2); font-size: 12px; font-weight: 600; color: var(--mpt-muted);
}

/* preview card — a stylised app shot, never a live tool */
.tl-shot {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--mpt-border); background: var(--mpt-card);
  box-shadow: var(--mpt-shadow-soft);
}
.tl-shot::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--tc, #ffc94d), transparent 78%);
}
.tl-shot-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  border-bottom: 1px solid var(--mpt-border); background: var(--mpt-canvas-2);
}
.tl-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--mpt-border); flex: none; }
.tl-shot-bar i:nth-child(1) { background: #ef4444aa; }
.tl-shot-bar i:nth-child(2) { background: #f5b93aaa; }
.tl-shot-bar i:nth-child(3) { background: #2bb894aa; }
.tl-shot-url {
  margin-left: 8px; flex: 1; padding: 4px 11px; border-radius: 999px;
  background: var(--mpt-canvas); border: 1px solid var(--mpt-border);
  font-size: 11px; font-weight: 600; color: var(--mpt-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-shot-body { padding: 22px 22px 26px; position: relative; }

.tl-shot-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tl-shot-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--tc, #ffc94d) 17%, transparent);
  color: var(--tc, var(--mpt-gold));
  border: 1px solid color-mix(in srgb, var(--tc, #ffc94d) 34%, transparent);
}
.tl-shot-head b { display: block; font-size: 15px; font-weight: 800; color: var(--mpt-text); }
.tl-shot-head small { display: block; font-size: 11.5px; color: var(--mpt-muted); font-weight: 600; }
.tl-shot-pill {
  margin-left: auto; padding: 4px 11px; border-radius: 999px; flex: none;
  background: var(--mpt-canvas-2); border: 1px solid var(--mpt-border);
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mpt-muted);
}

.tl-shot-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.tl-shot-field { border: 1px solid var(--mpt-border); border-radius: 10px; padding: 9px 11px; background: var(--mpt-canvas); }
.tl-shot-field span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mpt-muted); margin-bottom: 5px; }
.tl-shot-field b { display: block; font-size: 12px; font-weight: 600; color: var(--mpt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-shot-lines { display: grid; gap: 7px; }
.tl-shot-line { height: 8px; border-radius: 4px; background: var(--mpt-border); }
.tl-shot-line.w9 { width: 92%; } .tl-shot-line.w7 { width: 74%; } .tl-shot-line.w5 { width: 56%; }
.tl-shot-line.gold { background: linear-gradient(90deg, var(--tc, #ffc94d), transparent); opacity: .55; }

/* --------------------------------------------------------- locked preview */
/* A solid scrim, not a translucent wash: the mock-up behind it was showing
   through and leaving the heading and the button unreadable. Every part is
   addressed by its own class, because a bare `span` rule here was overriding
   the button's colour and the icon's centring. */

.tl-shot-lock {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  padding: 26px; cursor: pointer; border: 0; width: 100%; font: inherit; text-align: center;
  color: var(--mpt-text);
  background:
    radial-gradient(150% 100% at 50% 0%, rgba(255,201,77,.10), transparent 62%),
    color-mix(in srgb, var(--mpt-canvas) 94%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: background .2s ease;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .tl-shot-lock { background: var(--mpt-canvas); }
}
.tl-shot-lock:hover {
  background:
    radial-gradient(150% 100% at 50% 0%, rgba(255,201,77,.16), transparent 62%),
    color-mix(in srgb, var(--mpt-canvas) 90%, transparent);
}
.tl-shot-lock:focus-visible { outline: 2px solid var(--mpt-gold); outline-offset: -4px; }

.tl-lock-inner { display: grid; justify-items: center; gap: 0; max-width: 34ch; }

.tl-lock-ico {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 15px; margin: 0 0 14px;
  background: var(--mpt-grad-gold); color: var(--mpt-on-gold);
  box-shadow: 0 8px 22px var(--mpt-glow);
}
.tl-lock-ico svg { display: block; }

.tl-lock-title {
  display: block; margin: 0 0 6px;
  font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: var(--mpt-text);
}
.tl-lock-note {
  display: block; margin: 0 0 16px;
  font-size: 12.8px; line-height: 1.55; color: var(--mpt-muted);
}
.tl-lock-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  background: var(--mpt-grad-gold);
  color: var(--mpt-on-gold);   /* dark ink on gold, so it actually reads */
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 6px 16px var(--mpt-glow);
  transition: transform .16s ease;
}
.tl-lock-cta svg { display: block; width: 14px; height: 14px; }
.tl-shot-lock:hover .tl-lock-cta { transform: translateY(-1px); }

.tl-shot.is-open .tl-shot-lock { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tl-shot-lock, .tl-lock-cta { transition: none; }
  .tl-shot-lock:hover .tl-lock-cta { transform: none; }
}

/* unlock message revealed on click */
.tl-unlock-msg {
  display: none; margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--mpt-border-gold); background: rgba(255,201,77,.09);
  font-size: 13.5px; line-height: 1.6; color: var(--mpt-muted);
}
.tl-unlock-msg.is-on { display: block; }
.tl-unlock-msg b { color: var(--mpt-text); }

/* ----------------------------------------------------------------- steps */

.tl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .tl-steps { grid-template-columns: 1fr; } }
.tl-step { border: 1px solid var(--mpt-border); border-radius: 18px; background: var(--mpt-card); padding: 30px 26px; }
.tl-step-n {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--mpt-grad-gold); color: var(--mpt-on-gold); font-weight: 900; font-size: 16px;
  margin-bottom: 18px; box-shadow: 0 8px 20px var(--mpt-glow);
}
.tl-step h3 { font-size: 1.1rem; margin: 0 0 9px; font-weight: 800; }
.tl-step p { color: var(--mpt-muted); font-size: 14px; margin: 0 0 12px; line-height: 1.62; }
.tl-step-time { font-size: 12px; font-weight: 800; color: var(--mpt-emerald); letter-spacing: .04em; }

/* -------------------------------------------------------------- features */

.tl-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .tl-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tl-feats { grid-template-columns: 1fr; } }
.tl-feat {
  border: 1px solid var(--mpt-border); border-radius: 18px; background: var(--mpt-card);
  padding: 26px 24px; transition: border-color .18s ease, transform .18s ease;
}
.tl-feat:hover { border-color: var(--mpt-border-gold); transform: translateY(-3px); }
.tl-feat-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(255,201,77,.14); color: var(--mpt-gold); border: 1px solid var(--mpt-border-gold);
}
.tl-feat.alt .tl-feat-ico { background: rgba(43,184,148,.14); color: var(--mpt-emerald); border-color: rgba(43,184,148,.30); }
.tl-feat h3 { font-size: 1.04rem; margin: 0 0 8px; font-weight: 800; }
.tl-feat p { color: var(--mpt-muted); font-size: 13.8px; line-height: 1.62; margin: 0; }

/* ----------------------------------------------------------------- tiers */

.tl-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .tl-tiers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.tl-tier {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--mpt-border); border-radius: 22px; background: var(--mpt-card); padding: 32px 27px 27px;
}
.tl-tier.is-hot {
  border-color: var(--mpt-border-gold);
  box-shadow: 0 0 0 1px var(--mpt-border-gold), var(--mpt-shadow-soft);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mpt-gold) 8%, var(--mpt-card)), var(--mpt-card) 58%);
}
.tl-tier-flag {
  position: absolute; top: -12px; left: 27px; padding: 5px 14px; border-radius: 999px;
  background: var(--mpt-grad-gold); color: var(--mpt-on-gold);
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  box-shadow: 0 8px 20px var(--mpt-glow);
}
.tl-tier-badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
  border: 1px solid var(--mpt-border-gold); color: var(--mpt-gold);
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
}
.tl-tier h3 { font-size: 1.45rem; margin: 0 0 7px; font-weight: 800; }
.tl-tier > p { color: var(--mpt-muted); font-size: 14px; margin: 0 0 20px; line-height: 1.6; }
.tl-tier-pick { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.tl-pick {
  flex: 1 1 86px; text-align: center; padding: 11px 8px; border-radius: 12px;
  border: 1px solid var(--mpt-border); background: var(--mpt-canvas-2);
}
.tl-pick b { display: block; font-size: 1.1rem; font-weight: 900; color: var(--mpt-emerald); }
.tl-pick span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mpt-muted); }
.tl-tier ul { display: flex; flex-direction: column; gap: 11px; margin: 0 0 22px; padding: 0; list-style: none; flex: 1; }
.tl-tier ul li { display: flex; gap: 10px; font-size: 13.8px; line-height: 1.55; color: var(--mpt-muted); }
.tl-tier ul li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--mpt-emerald); }
.tl-tier ul li.off { color: var(--mpt-muted); opacity: .6; }
.tl-tier ul li.off svg { color: var(--mpt-muted); }
.tl-tier-note { font-size: 12px; color: var(--mpt-muted); margin: 12px 0 0; text-align: center; }

/* ------------------------------------------------------------------- faq */

.tl-faq { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; }
.tl-q { border: 1px solid var(--mpt-border); border-radius: 14px; background: var(--mpt-card); overflow: hidden; }
.tl-q[open] { border-color: var(--mpt-border-gold); }
.tl-q summary { padding: 19px 22px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 14px; color: var(--mpt-text); }
.tl-q summary::-webkit-details-marker { display: none; }
.tl-q summary::after { content: "+"; margin-left: auto; font-size: 21px; font-weight: 400; color: var(--mpt-gold); line-height: 1; }
.tl-q[open] summary::after { content: "\2013"; }
.tl-q-body { padding: 0 22px 20px; color: var(--mpt-muted); font-size: 14.2px; line-height: 1.7; }

/* ------------------------------------------------------------------ band */

.tl-band {
  border: 1px solid var(--mpt-border-gold); border-radius: 26px; padding: 56px 46px; text-align: center;
  background: linear-gradient(140deg, color-mix(in srgb, var(--mpt-gold) 10%, var(--mpt-card)), var(--mpt-card) 52%, color-mix(in srgb, var(--mpt-emerald) 11%, var(--mpt-card)));
  box-shadow: var(--mpt-shadow-soft);
}
.tl-band h2 { font-size: clamp(1.75rem, 3.5vw, 2.6rem); margin: 0 0 12px; font-weight: 900; letter-spacing: -.03em; }
.tl-band p { color: var(--mpt-muted); max-width: 60ch; margin: 0 auto 28px; line-height: 1.66; }
@media (max-width: 640px) { .tl-band { padding: 38px 24px; } }

/* --------------------------------------------------------- index strip */

.tl-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 12px; }
.tl-index a {
  display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 14px;
  border: 1px solid var(--mpt-border); background: var(--mpt-card); text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.tl-index a:hover { border-color: var(--mpt-border-gold); transform: translateY(-2px); }
.tl-index b {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--mpt-on-gold); background: var(--mpt-grad-gold);
}
.tl-index span { line-height: 1.25; }
.tl-index span strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--mpt-text); }
.tl-index span small { display: block; font-size: 11px; color: var(--mpt-muted); font-weight: 600; }

/* ------------------------------------------------------- locked tool card */

.mpt-uniform-card.is-locked { position: relative; }
.mpt-uniform-card.is-locked::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--mpt-canvas) 34%, transparent);
}
.mpt-lock-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: var(--mpt-grad-gold); color: var(--mpt-on-gold);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 6px 16px var(--mpt-glow);
}
.mpt-lock-badge svg { width: 11px; height: 11px; }
.mpt-uniform-cta.is-locked {
  background: var(--mpt-card-hover) !important; color: var(--mpt-muted) !important;
  border: 1px solid var(--mpt-border) !important; box-shadow: none !important; cursor: not-allowed;
}
.mpt-uniform-card.is-locked h3, .mpt-uniform-card.is-locked p { opacity: .72; }

/* --------------------------------------------------------- account view */

.tl-acct { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .tl-acct { grid-template-columns: 1fr; } }

.tl-card {
  border: 1px solid var(--mpt-border); border-radius: 18px; background: var(--mpt-card);
  padding: 26px 24px; margin-bottom: 20px;
}
.tl-card h2 { font-size: 1.16rem; margin: 0 0 6px; font-weight: 800; }
.tl-card > p { color: var(--mpt-muted); font-size: 13.8px; margin: 0 0 18px; line-height: 1.6; }

.tl-acct-id { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.tl-acct-av {
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; flex: none;
  background: var(--mpt-grad-gold); color: var(--mpt-on-gold); font-size: 24px; font-weight: 900;
  box-shadow: 0 10px 26px var(--mpt-glow);
}
.tl-acct-id h3 { margin: 0 0 4px; font-size: 1.28rem; font-weight: 800; }
.tl-acct-id p { margin: 0; color: var(--mpt-muted); font-size: 13.5px; }

.tl-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.tl-status.on { background: rgba(43,184,148,.15); border: 1px solid rgba(43,184,148,.36); color: var(--mpt-emerald); }
.tl-status.on i { width: 7px; height: 7px; border-radius: 50%; background: var(--mpt-emerald); box-shadow: 0 0 0 3px rgba(43,184,148,.22); }
.tl-status.plan { background: rgba(255,201,77,.14); border: 1px solid var(--mpt-border-gold); color: var(--mpt-gold); }

.tl-rows { display: grid; gap: 1px; background: var(--mpt-border); border: 1px solid var(--mpt-border); border-radius: 14px; overflow: hidden; }
.tl-row { background: var(--mpt-card); padding: 14px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tl-row > span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mpt-muted); min-width: 132px; }
.tl-row > b { font-size: 14px; font-weight: 600; color: var(--mpt-text); word-break: break-word; }
.tl-row .tl-row-act { margin-left: auto; }

.tl-field { margin-bottom: 15px; }
.tl-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; color: var(--mpt-muted); }
.tl-field input {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 14.5px;
  border: 1px solid var(--mpt-border); background: var(--mpt-canvas); color: var(--mpt-text);
}
.tl-field input:focus { outline: 0; border-color: var(--mpt-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpt-gold) 20%, transparent); }
.tl-field input[readonly] { opacity: .72; cursor: not-allowed; }
.tl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .tl-field-row { grid-template-columns: 1fr; } }

.tl-alert { padding: 13px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; margin-bottom: 18px; border: 1px solid var(--mpt-border); background: var(--mpt-canvas-2); }
.tl-alert.ok { border-color: rgba(43,184,148,.40); background: rgba(43,184,148,.10); color: var(--mpt-emerald); }
.tl-alert.err { border-color: rgba(239,68,68,.40); background: rgba(239,68,68,.10); color: #f87171; }
.mpt-theme-light .tl-alert.err { color: #b91c1c; }

.tl-owned { display: grid; gap: 9px; }
.tl-owned-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--mpt-border); background: var(--mpt-canvas-2); font-size: 13.5px; font-weight: 600;
}
.tl-owned-item i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mpt-emerald); }
.tl-owned-item.locked i { background: var(--mpt-muted); opacity: .5; }
.tl-owned-item .tag { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mpt-gold); }

@media (prefers-reduced-motion: reduce) {
  .tl-feat, .tl-index a, .tl-shot-lock { transition: none !important; }
}


/* ==========================================================================
   Motion layer — animated graphics for the storefront.
   Everything degrades to a static page under prefers-reduced-motion.
   ========================================================================== */

/* drifting colour fields behind the hero */
.tl-hero::before { animation: tl-drift 22s ease-in-out infinite alternate; }
@keyframes tl-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.02); }
}

/* live dot on the hero badge */
.tl-badge i { animation: tl-pulse 2.4s ease-out infinite; }
@keyframes tl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43,184,148,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(43,184,148,0); }
  100% { box-shadow: 0 0 0 0 rgba(43,184,148,0); }
}

/* hero panel rows deal themselves in */
.tl-hero-panel .tl-mini { opacity: 0; animation: tl-deal .55s cubic-bezier(.22,.9,.3,1) forwards; }
.tl-hero-panel .tl-mini:nth-child(1) { animation-delay: .05s; }
.tl-hero-panel .tl-mini:nth-child(2) { animation-delay: .13s; }
.tl-hero-panel .tl-mini:nth-child(3) { animation-delay: .21s; }
.tl-hero-panel .tl-mini:nth-child(4) { animation-delay: .29s; }
.tl-hero-panel .tl-mini:nth-child(5) { animation-delay: .37s; }
.tl-hero-panel .tl-mini:nth-child(6) { animation-delay: .45s; }
.tl-hero-panel .tl-mini:nth-child(7) { animation-delay: .53s; }
.tl-hero-panel .tl-mini:nth-child(8) { animation-delay: .61s; }
@keyframes tl-deal {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* light sweeps across the hero panel every few seconds */
.tl-hero-panel { position: relative; }
.tl-hero-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.11) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: tl-sweep 7s ease-in-out 1.6s infinite;
}
@keyframes tl-sweep { 0% { transform: translateX(-120%); } 55%,100% { transform: translateX(120%); } }

/* the marquee ribbon of tool names */
.tl-ribbon {
  overflow: hidden; border-block: 1px solid var(--mpt-border);
  background: var(--mpt-canvas-2); padding: 15px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tl-ribbon-track { display: flex; width: max-content; animation: tl-marquee 42s linear infinite; }
.tl-ribbon:hover .tl-ribbon-track { animation-play-state: paused; }
.tl-ribbon-item {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 30px;
  font-size: 14px; font-weight: 700; color: var(--mpt-muted); white-space: nowrap;
}
.tl-ribbon-item b {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none;
  font-size: 10.5px; font-weight: 800; color: var(--mpt-on-gold); background: var(--mpt-grad-gold);
}
.tl-ribbon-item i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--mpt-emerald); flex: none; margin-left: 20px;
}
@keyframes tl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* counters and sections reveal as they scroll in */
.tl-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1); }
.tl-reveal.is-in { opacity: 1; transform: none; }
.tl-reveal[data-tl-delay="1"] { transition-delay: .08s; }
.tl-reveal[data-tl-delay="2"] { transition-delay: .16s; }
.tl-reveal[data-tl-delay="3"] { transition-delay: .24s; }

/* stat tiles glow once when they land */
.tl-stat.is-in b { animation: tl-pop .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes tl-pop { from { transform: scale(.86); opacity: .3; } to { transform: none; opacity: 1; } }

/* preview cards breathe and shimmer under the lock */
.tl-shot { transition: transform .35s cubic-bezier(.22,.9,.3,1), box-shadow .35s ease; }
.tl-tool:hover .tl-shot { transform: translateY(-5px); box-shadow: 0 30px 70px rgba(0,0,0,.32); }
.mpt-theme-light .tl-tool:hover .tl-shot { box-shadow: 0 26px 54px rgba(6,22,23,.14); }

.tl-shot-line.gold { position: relative; overflow: hidden; }
.tl-shot-line.gold::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-100%); animation: tl-shimmer 3.2s ease-in-out infinite;
}
@keyframes tl-shimmer { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

.tl-lock-ico { animation: tl-float 3.6s ease-in-out infinite; }
@keyframes tl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* step cards draw a connecting line on wide screens */
@media (min-width: 881px) {
  .tl-steps { position: relative; }
  .tl-steps::before {
    content: ""; position: absolute; top: 52px; left: 12%; right: 12%; height: 2px;
    background: linear-gradient(90deg, var(--mpt-gold), var(--mpt-emerald), var(--mpt-gold));
    background-size: 200% 100%; animation: tl-flow 6s linear infinite; opacity: .28; z-index: 0;
  }
  .tl-step { position: relative; z-index: 1; }
}
@keyframes tl-flow { from { background-position: 0 0; } to { background-position: 200% 0; } }

.tl-step-n { position: relative; }
.tl-step:hover .tl-step-n { animation: tl-nudge .5s ease; }
@keyframes tl-nudge { 0%,100% { transform: none; } 40% { transform: translateY(-5px) rotate(-6deg); } }

/* feature tiles lift with a soft gold rim */
.tl-feat { position: relative; overflow: hidden; }
.tl-feat::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--mpt-grad-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .34s cubic-bezier(.22,.9,.3,1);
}
.tl-feat:hover::after { transform: scaleX(1); }
.tl-feat:hover .tl-feat-ico { animation: tl-nudge .5s ease; }

/* tier cards */
.tl-tier { transition: transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s ease; }
.tl-tier:hover { transform: translateY(-5px); }
.tl-tier.is-hot .tl-tier-flag { animation: tl-float 4s ease-in-out infinite; }

/* closing band gets a slow aurora */
.tl-band { position: relative; overflow: hidden; }
.tl-band::before {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(255,201,77,.13), transparent 30%, rgba(43,184,148,.13), transparent 60%);
  animation: tl-spin 26s linear infinite;
}
.tl-band > * { position: relative; z-index: 1; }
@keyframes tl-spin { to { transform: rotate(1turn); } }

/* index chips stagger in */
.tl-index a { transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.tl-index a:hover { box-shadow: 0 10px 26px var(--mpt-glow); }
.tl-index a:hover b { animation: tl-nudge .5s ease; }

@media (prefers-reduced-motion: reduce) {
  .tl-hero::before, .tl-badge i, .tl-hero-panel .tl-mini, .tl-hero-panel::before,
  .tl-ribbon-track, .tl-shot-line.gold::after, .tl-lock-ico, .tl-steps::before,
  .tl-band::before, .tl-stat.is-in b {
    animation: none !important;
  }
  .tl-hero-panel .tl-mini { opacity: 1; }
  .tl-reveal { opacity: 1; transform: none; transition: none; }
  .tl-tool:hover .tl-shot, .tl-tier:hover { transform: none; }
}

/* ---------------------------------------- invite unlock summary (auth) -- */

.mpt-invite-unlock {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--mpt-border-gold); border-radius: 14px;
  background: rgba(255,201,77,.08); padding: 14px 16px; margin: 0 0 20px;
}
.mpt-invite-unlock-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--mpt-grad-gold); color: var(--mpt-on-gold);
}
.mpt-invite-unlock-ico svg { width: 17px; height: 17px; }
.mpt-invite-unlock-body { display: block; min-width: 0; }
.mpt-invite-unlock-body strong {
  display: block; font-size: 14px; font-weight: 700; color: var(--mpt-text); margin-bottom: 3px;
}
.mpt-invite-unlock-body > span {
  display: block; font-size: 12.8px; line-height: 1.55; color: var(--mpt-muted);
}

/* ==========================================================================
   Form fixes — readable inputs, a real password reveal, round avatars.
   ========================================================================== */

/* Typed text must always be legible, including over Chrome's autofill wash. */
.mpt-wrap input[type="text"],
.mpt-wrap input[type="email"],
.mpt-wrap input[type="password"],
.mpt-wrap input[type="search"],
.mpt-wrap input[type="url"],
.mpt-wrap input[type="number"],
.mpt-wrap input[type="tel"],
.mpt-wrap input[type="date"],
.mpt-wrap textarea,
.mpt-wrap select {
  color: var(--mpt-text);
  -webkit-text-fill-color: var(--mpt-text);
  caret-color: var(--mpt-gold);
}
.mpt-wrap input::placeholder,
.mpt-wrap textarea::placeholder {
  color: var(--mpt-muted);
  -webkit-text-fill-color: var(--mpt-muted);
  opacity: 1;
}

/* Chrome paints its own background on autofilled fields and keeps it for
   seconds; the long inset shadow is the only reliable way to override it. */
.mpt-wrap input:-webkit-autofill,
.mpt-wrap input:-webkit-autofill:hover,
.mpt-wrap input:-webkit-autofill:focus,
.mpt-wrap input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--mpt-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--mpt-card) inset !important;
  box-shadow: 0 0 0 1000px var(--mpt-card) inset !important;
  caret-color: var(--mpt-gold);
  transition: background-color 100000s ease-in-out 0s;
}

/* ------------------------------------------------------- password reveal */

.aptf-pw {
  position: relative;
  display: block;
}
.aptf-pw > input {
  width: 100%;
  /* Room for the button, and never under it. */
  padding-right: 46px !important;
}
.aptf-pw-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mpt-muted);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.aptf-pw-btn:hover { color: var(--mpt-gold); background: color-mix(in srgb, var(--mpt-gold) 12%, transparent); }
.aptf-pw-btn:focus-visible { outline: 2px solid var(--mpt-gold); outline-offset: 1px; }
.aptf-pw-btn svg { width: 18px; height: 18px; display: block; pointer-events: none; }
.aptf-pw-btn .aptf-pw-off { display: none; }
.aptf-pw-btn[aria-pressed="true"] .aptf-pw-on { display: none; }
.aptf-pw-btn[aria-pressed="true"] .aptf-pw-off { display: block; }

/* Chrome and Edge add their own reveal control; two would be confusing. */
.aptf-pw > input::-ms-reveal,
.aptf-pw > input::-ms-clear { display: none; }

/* ------------------------------------------------------------- avatars -- */

/* Without flex:none these squash to an oval inside a flex header. */
.mpt-avatar-chip,
.mpt-user-avatar,
.tl-acct-av {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.mpt-avatar-chip { width: 42px; height: 42px; min-width: 42px; }
.mpt-user-avatar { width: 38px; height: 38px; min-width: 38px; }
.tl-acct-av { width: 62px; height: 62px; min-width: 62px; border-radius: 18px; }

/* --------------------------------------------------------- DNS records -- */

.aptf-dns-table {
  border: 1px solid var(--mpt-border); border-radius: 12px; overflow: hidden;
  background: var(--mpt-card); margin: 0 0 14px;
}
.aptf-dns-row {
  display: grid; grid-template-columns: 90px 160px 1fr; gap: 14px;
  padding: 12px 14px; align-items: start;
  border-top: 1px solid var(--mpt-border);
}
.aptf-dns-row:first-child { border-top: 0; }
.aptf-dns-head {
  background: var(--mpt-canvas-2);
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mpt-muted);
}
.aptf-dns-type {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,201,77,.14); border: 1px solid var(--mpt-border-gold);
  color: var(--mpt-gold); font-size: 11px; font-weight: 800; letter-spacing: .05em;
}
.aptf-dns-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--mpt-canvas-2); border: 1px solid var(--mpt-border);
  padding: 2px 8px; border-radius: 6px; color: var(--mpt-text);
  display: inline-block; max-width: 100%; overflow-wrap: anywhere;
}
.aptf-dns-row small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--mpt-muted); line-height: 1.5; }
@media (max-width: 720px) {
  .aptf-dns-row { grid-template-columns: 1fr; gap: 6px; }
  .aptf-dns-head { display: none; }
}

.aptf-dns-warn {
  border: 1px solid var(--mpt-border-gold); border-radius: 12px;
  background: rgba(255,201,77,.08); padding: 13px 16px;
  font-size: 13.2px; line-height: 1.65; color: var(--mpt-muted);
}
.aptf-dns-warn strong { color: var(--mpt-text); }
.aptf-dns-warn code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--mpt-card); border: 1px solid var(--mpt-border);
  padding: 1px 6px; border-radius: 5px; color: var(--mpt-text); overflow-wrap: anywhere;
}

/* -------------------------------------------------------- copy controls -- */

.aptf-copy-wrap { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.aptf-copy-wrap code { flex: 0 1 auto; }

.aptf-copy {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--mpt-border); background: var(--mpt-canvas-2); color: var(--mpt-muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.aptf-copy:hover { color: var(--mpt-gold); border-color: var(--mpt-border-gold); }
.aptf-copy:focus-visible { outline: 2px solid var(--mpt-gold); outline-offset: 2px; }
.aptf-copy svg { width: 14px; height: 14px; display: block; pointer-events: none; }
.aptf-copy .aptf-copy-ok { display: none; }
.aptf-copy.is-done { color: var(--mpt-emerald); border-color: rgba(43,184,148,.4); background: rgba(43,184,148,.12); }
.aptf-copy.is-done .aptf-copy-i { display: none; }
.aptf-copy.is-done .aptf-copy-ok { display: block; }

.aptf-dns-alt {
  margin: 12px 0 14px; font-size: 13px; line-height: 1.7; color: var(--mpt-muted);
}
.aptf-dns-alt strong { color: var(--mpt-text); }
.aptf-dns-alt code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--mpt-canvas-2); border: 1px solid var(--mpt-border);
  padding: 2px 8px; border-radius: 6px; color: var(--mpt-text);
}

/* ------------------------------------------------- connected domain list -- */

.mpt-domain-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 18px;
}
.mpt-domain-badge {
  display: inline-flex; align-items: center; flex: none;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--mpt-canvas-2); color: var(--mpt-muted);
  border: 1px solid var(--mpt-border); white-space: nowrap;
}
.mpt-domain-badge.is-live {
  background: rgba(43,184,148,.12); color: var(--mpt-emerald);
  border-color: rgba(43,184,148,.36);
}

.aptf-domlist { margin-top: 4px; }
.aptf-domlist-head-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 4px;
}
.aptf-domlist-head-row h3 { margin: 0 0 4px; }
.aptf-domains-search {
  position: relative; display: flex; align-items: center;
  min-width: min(100%, 260px); flex: 1 1 200px; max-width: 320px;
}
.aptf-domains-search svg {
  position: absolute; left: 12px; color: var(--mpt-muted); pointer-events: none;
}
.aptf-domains-search input {
  width: 100%; padding: 10px 12px 10px 38px; border-radius: 12px;
  border: 1px solid var(--mpt-border); background: var(--mpt-canvas-2);
  color: var(--mpt-text); font: inherit; font-size: 13px;
}
.aptf-domains-search input:focus {
  outline: none; border-color: var(--mpt-border-gold);
  box-shadow: 0 0 0 3px rgba(255,201,77,.14);
}

.aptf-domlist-table {
  border: 1px solid var(--mpt-border); border-radius: 12px; overflow: hidden;
  background: var(--mpt-card); margin-top: 14px;
}
.aptf-domlist-row {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 14px;
  align-items: center; padding: 13px 16px; border-top: 1px solid var(--mpt-border);
}
.aptf-domlist-row:first-child { border-top: 0; }
.aptf-domlist-head {
  background: var(--mpt-canvas-2);
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mpt-muted);
}
.aptf-domlist-name { font-weight: 600; color: var(--mpt-text); overflow-wrap: anywhere; }
.aptf-domlist-dns { font-size: 12.5px; color: var(--mpt-muted); }
.aptf-domlist-dns.is-ok { color: var(--mpt-emerald); }
.aptf-domlist-dns.is-bad { color: #ef4444; }
.mpt-theme-light .aptf-domlist-dns.is-bad { color: #b91c1c; }

.aptf-domlist-pill {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.aptf-domlist-pill.is-live { background: rgba(43,184,148,.15); border: 1px solid rgba(43,184,148,.36); color: var(--mpt-emerald); }
.aptf-domlist-pill.is-pending { background: rgba(255,201,77,.13); border: 1px solid var(--mpt-border-gold); color: var(--mpt-gold); }

.aptf-domlist-actions { display: flex; gap: 6px; justify-content: flex-end; }
.aptf-domlist-btn {
  width: 36px; height: 36px; display: grid; place-items: center; flex: none;
  border-radius: 10px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--mpt-border); background: var(--mpt-canvas-2); color: var(--mpt-muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.aptf-domlist-btn:hover { color: var(--mpt-gold); border-color: var(--mpt-border-gold); background: rgba(255,201,77,.08); }
.aptf-domlist-btn svg { width: 15px; height: 15px; }

@media (max-width: 760px) {
  .aptf-domlist-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .aptf-domlist-head { display: none; }
  .aptf-domlist-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

.aptf-dns-intro { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--mpt-muted); }
.aptf-dns-intro code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--mpt-canvas-2); border: 1px solid var(--mpt-border);
  padding: 1px 7px; border-radius: 5px; color: var(--mpt-text);
}

/* ==========================================================================
   AI Tools Hub — the ten-tool catalogue screen (public/views/tool-catalog.php)
   Restored in 2.6.3. These rules were lost when the 2.6.1 form-fix patch
   rewrote the span between two section markers; the hub markup depends on
   them entirely, so without this block the screen renders unstyled.
   ========================================================================== */

.atf-hub { max-width: 1240px; margin: 0 auto; padding: 4px 0 40px; }

/* ------------------------------------------------------------- hub header */

.atf-hub-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; margin: 0 0 26px;
}
.atf-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  color: var(--mpt-gold); margin: 0 0 10px;
}
.atf-eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--mpt-grad-gold); }
.atf-hub-title {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em;
  font-weight: 800; margin: 0 0 10px; color: var(--mpt-text);
}
.atf-hub-lead { margin: 0; max-width: 62ch; color: var(--mpt-muted); font-size: 13.8px; line-height: 1.66; }

.atf-hub-metrics { display: flex; gap: 1px; background: var(--mpt-border); border: 1px solid var(--mpt-border); border-radius: 14px; overflow: hidden; flex: none; }
.atf-metric { background: var(--mpt-card); padding: 13px 20px; text-align: center; min-width: 86px; }
.atf-metric b { display: block; font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; color: var(--mpt-text); line-height: 1.1; }
.atf-metric span { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mpt-muted); }
@media (max-width: 720px) { .atf-hub-metrics { width: 100%; } .atf-metric { flex: 1; min-width: 0; padding: 12px 8px; } }

/* --------------------------------------------------------------- admin bar */

.atf-admin-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; margin: 0 0 22px;
  border: 1px solid var(--mpt-border); border-radius: 13px; background: var(--mpt-card);
}
.atf-admin-hint { font-size: 12px; color: var(--mpt-muted); margin-left: 4px; }
.atf-export-bar { margin: -8px 0 22px; }

/* ------------------------------------------------------------------- bands */

.atf-band { margin: 0 0 34px; }
.atf-band:last-child { margin-bottom: 0; }
.atf-band-head { margin: 0 0 16px; }
.atf-band-head h2 { font-size: 1.16rem; font-weight: 800; letter-spacing: -.015em; margin: 0; color: var(--mpt-text); }
.atf-band-head p { margin: 7px 0 0; max-width: 72ch; font-size: 13px; line-height: 1.6; color: var(--mpt-muted); }

.atf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 640px) { .atf-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- card */

.atf-card {
  --tc: var(--mpt-gold);
  position: relative; display: flex; flex-direction: column;
  padding: 17px 18px 15px; border-radius: 16px;
  border: 1px solid var(--mpt-border); background: var(--mpt-card);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.atf-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--tc), transparent 78%);
  opacity: .85;
}
a.atf-card:hover { transform: translateY(-3px); border-color: var(--mpt-border-gold); box-shadow: var(--mpt-shadow-soft); }
a.atf-card:focus-visible { outline: 2px solid var(--mpt-gold); outline-offset: 3px; }
.atf-card.is-locked { opacity: .82; }
.atf-card.is-locked:hover { opacity: 1; }

.atf-card-head { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 13px; }
.atf-card-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent);
}
.atf-card-ico svg { display: block; }
.atf-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atf-card-cat { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mpt-muted); }
.atf-card-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; color: var(--tc); letter-spacing: .04em; }

/* Badges stack, so the gold "Upgrade plan" chip never overlaps the number. */
.atf-card-badges { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.atf-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3.5px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.atf-chip svg { width: 10px; height: 10px; flex: none; }
.atf-chip--own { background: rgba(43,184,148,.14); border: 1px solid rgba(43,184,148,.36); color: var(--mpt-emerald); }
.atf-chip--lock { background: rgba(255,201,77,.13); border: 1px solid var(--mpt-border-gold); color: var(--mpt-gold); }
.atf-card-num { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--mpt-muted); opacity: .7; }

.atf-card-title { margin: 0 0 7px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; color: var(--mpt-text); }
.atf-card-desc { margin: 0 0 15px; font-size: 12.8px; line-height: 1.6; color: var(--mpt-muted); }

.atf-card-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--mpt-border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.atf-card-meta { font-size: 11.5px; font-weight: 600; color: var(--mpt-muted); }
.atf-card-go {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 800; color: var(--mpt-gold);
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer;
}
.atf-card-go.is-muted { color: var(--mpt-muted); cursor: pointer; }
.atf-card-go.is-muted:hover { color: var(--mpt-gold); }
/* The arrow is sized here — the inline SVG carries no intrinsic dimensions. */
.atf-go-ico { width: 13px; height: 13px; flex: none; display: inline-block; transition: transform .18s ease; }
a.atf-card:hover .atf-go-ico { transform: translateX(3px); }

.atf-lock-note {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--mpt-border-gold); background: rgba(255,201,77,.08);
  font-size: 12px; line-height: 1.6; color: var(--mpt-muted);
}

.atf-card-admin { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity .16s ease; }
.atf-card:hover .atf-card-admin,
.atf-card:focus-within .atf-card-admin { opacity: 1; }
.atf-icon-btn {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--mpt-border); background: var(--mpt-canvas-2); color: var(--mpt-muted);
  transition: color .15s ease, border-color .15s ease;
}
.atf-icon-btn:hover { color: var(--mpt-gold); border-color: var(--mpt-border-gold); }
.atf-icon-btn svg { display: block; }
/* Admin selection checkbox sits beside the export button when export mode is on. */
.atf-card-admin .mpt-card-check { display: inline-flex; align-items: center; }

/* ------------------------------------------------------------ empty states */

.atf-empty { color: var(--mpt-muted); font-size: 13.5px; }
.atf-empty-card {
  padding: 26px 24px; border-radius: 16px; text-align: center;
  border: 1px dashed var(--mpt-border-gold); background: rgba(255,201,77,.05);
}
.atf-empty-card h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: var(--mpt-text); }
.atf-empty-card p { margin: 0 auto; max-width: 56ch; font-size: 13px; line-height: 1.65; color: var(--mpt-muted); }

/* ==========================================================================
   Agency — tool picker (public/views/agency-dashboard.php)
   Toggle-style cards, capped by the owner's own tool count.
   ========================================================================== */

.aptf-agency-counter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--mpt-border); background: var(--mpt-canvas-2);
  font-size: 12px; font-weight: 700; color: var(--mpt-muted);
}
.aptf-agency-counter .aptf-agency-count { color: var(--mpt-gold); font-weight: 800; }
.aptf-agency-counter .aptf-agency-max { color: var(--mpt-text); font-weight: 800; }
.aptf-agency-counter.is-full {
  border-color: rgba(43,184,148,.4); background: rgba(43,184,148,.12); color: var(--mpt-emerald);
}
.aptf-agency-counter.is-full .aptf-agency-count { color: var(--mpt-emerald); }

.aptf-agency-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 10px; }
@media (max-width: 620px) { .aptf-agency-tools { grid-template-columns: 1fr; } }

.atf-pick { --pc: var(--mpt-gold); display: block; cursor: pointer; }
.atf-pick input { position: absolute; opacity: 0; width: 0; height: 0; }

.atf-pick-body {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 13px;
  border: 1px solid var(--mpt-border); background: var(--mpt-card);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.atf-pick:hover .atf-pick-body { transform: translateY(-1px); border-color: var(--mpt-border-gold); }

.atf-pick-n {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 32%, transparent);
}
.atf-pick-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atf-pick-txt strong { font-size: 13px; font-weight: 700; color: var(--mpt-text); line-height: 1.3; }
.atf-pick-txt small { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mpt-muted); }

.atf-pick-switch {
  margin-left: auto; flex: none; position: relative; display: block;
  width: 40px; height: 23px; border-radius: 999px;
  background: var(--mpt-canvas-2); border: 1px solid var(--mpt-border);
  transition: background .16s ease, border-color .16s ease;
}
.atf-pick-switch i {
  position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--mpt-muted); transition: transform .16s ease, background .16s ease;
}
.atf-pick input:checked + .atf-pick-body {
  border-color: color-mix(in srgb, var(--pc) 55%, transparent);
  background: color-mix(in srgb, var(--pc) 9%, var(--mpt-card));
}
.atf-pick input:checked + .atf-pick-body .atf-pick-switch {
  background: linear-gradient(135deg, var(--mpt-emerald-soft, #3ecfa6), var(--mpt-emerald));
  border-color: transparent;
}
.atf-pick input:checked + .atf-pick-body .atf-pick-switch i { transform: translateX(17px); background: #fff; }
.atf-pick input:focus-visible + .atf-pick-body { outline: 2px solid var(--mpt-gold); outline-offset: 2px; }

/* At the pack ceiling the remaining tools are disabled, not hidden. */
.atf-pick input:disabled + .atf-pick-body { opacity: .42; cursor: not-allowed; }
.atf-pick:has(input:disabled) { cursor: not-allowed; }
.atf-pick:has(input:disabled):hover .atf-pick-body { transform: none; border-color: var(--mpt-border); }

/* ==========================================================================
   Whitelabel — domain scope (public/views/whitelabel.php)
   ========================================================================== */

.mpt-wl-domain-gate {
  max-width: 620px; margin: 24px auto; padding: 30px 28px; text-align: center;
  border: 1px dashed var(--mpt-border-gold); border-radius: 18px;
  background: rgba(255,201,77,.05);
}
.mpt-wl-domain-gate h2 { margin: 0 0 10px; font-size: 1.24rem; font-weight: 800; color: var(--mpt-text); }
.mpt-wl-domain-gate p { margin: 0 auto 18px; max-width: 54ch; font-size: 13.5px; line-height: 1.68; color: var(--mpt-muted); }

.mpt-wl-scope {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--mpt-border-gold); background: rgba(255,201,77,.08);
  font-size: 12.3px; line-height: 1.5; color: var(--mpt-muted);
}
.mpt-wl-scope strong { color: var(--mpt-text); overflow-wrap: anywhere; }
.mpt-wl-scope > span:first-child {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mpt-gold); box-shadow: 0 0 0 4px rgba(255,201,77,.18);
}
.mpt-wl-scope.is-live { border-color: rgba(43,184,148,.4); background: rgba(43,184,148,.1); }
.mpt-wl-scope.is-live > span:first-child { background: var(--mpt-emerald); box-shadow: 0 0 0 4px rgba(43,184,148,.2); }

/* Inline links inside the whitelabel panels follow the theme, not the UA blue. */
.mpt-wl .mpt-muted a { color: var(--mpt-gold); text-decoration: none; font-weight: 700; }
.mpt-wl .mpt-muted a:hover { text-decoration: underline; }

/* Placeholder tile when no favicon is set — the base rule targets an <img>. */
.mpt-wl-favicon-empty {
  display: grid; place-items: center; flex: 0 0 auto;
  color: var(--mpt-muted); font-size: 15px; font-weight: 700; line-height: 1;
}

/* ==========================================================================
   Landing footer — four columns, matching the ten-tool footer layout.
   ========================================================================== */

.mpt-footer-col { display: grid; gap: 12px; align-content: start; }

/* Three columns that use the full width: brand, the ten tools two-up, account.
   A fourth narrow column left dead space at the right-hand end. */
.mpt-landing .mpt-footer-container { grid-template-columns: 1.15fr 1.5fr .85fr; }
.mpt-footer-nav-list--split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 22px; align-content: start;
}
@media (max-width: 900px) {
  .mpt-landing .mpt-footer-container { grid-template-columns: 1fr 1fr; }
  .lp-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .mpt-landing .mpt-footer-container { grid-template-columns: 1fr; }
  .mpt-footer-nav-list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Whitelabel lock — every control stays off until the member's own domain
   is serving the site, because branding has nowhere else to apply.
   ========================================================================== */

.mpt-wl-fields { border: 0; margin: 0; padding: 0; min-width: 0; }

.mpt-wl-lock-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--mpt-border-gold); background: rgba(255,201,77,.07);
}
.mpt-wl-lock-pill {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--mpt-border-gold); background: rgba(255,201,77,.1);
  font-size: 13px; line-height: 1.45; color: var(--mpt-text); max-width: 100%;
}
.mpt-wl-lock-pill > span:not(.mpt-wl-lock-ico) { flex: 1 1 220px; min-width: 0; }
.mpt-wl-lock-pill .mpt-btn { flex: none; }
.mpt-wl-lock-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: var(--mpt-gold); background: rgba(255,201,77,.13); border: 1px solid var(--mpt-border-gold);
}
.mpt-wl-lock-pill .mpt-wl-lock-ico {
  width: 28px; height: 28px; border-radius: 999px;
}
.mpt-wl-lock-banner > div { flex: 1 1 320px; min-width: 0; }
.mpt-wl-lock-banner strong { display: block; font-size: 14px; font-weight: 800; color: var(--mpt-text); margin-bottom: 3px; }
.mpt-wl-lock-banner p { margin: 0; font-size: 12.8px; line-height: 1.6; color: var(--mpt-muted); }
.mpt-wl-lock-banner .mpt-btn { flex: none; }

.aptf-domlist-btn--danger:hover { color: #ef4444; border-color: rgba(239,68,68,.45); }
.mpt-domain-disconnect { color: #ef4444 !important; border-color: rgba(239,68,68,.4) !important; }
.mpt-domain-disconnect:hover { background: rgba(239,68,68,.1) !important; }
.mpt-domain-disconnect-form { display: none; }

/* Locked fields read as unavailable, not broken. */
.mpt-wl-is-locked .mpt-wl-fields { opacity: .5; filter: saturate(.55); pointer-events: none; user-select: none; }
.mpt-wl-is-locked .mpt-wl-switch { opacity: .45; cursor: not-allowed; }
.mpt-wl-is-locked .mpt-wl-form .mpt-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   Per-tool publishing — the panel on each owned card in the AI Tools Hub.
   ========================================================================== */

.atf-pub { margin: 12px -18px -15px; border-top: 1px solid var(--mpt-border); }

.atf-pub-summary {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 18px; cursor: pointer; text-align: left;
  border: 0; background: transparent; font: inherit; color: var(--mpt-muted);
  transition: background .15s ease, color .15s ease;
}
.atf-pub-summary:hover { background: var(--mpt-canvas-2); color: var(--mpt-text); }
.atf-pub-summary:focus-visible { outline: 2px solid var(--mpt-gold); outline-offset: -2px; }

.atf-pub-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mpt-muted); opacity: .55;
}
.atf-pub.is-live .atf-pub-dot { background: var(--mpt-emerald); opacity: 1; box-shadow: 0 0 0 3px rgba(43,184,148,.18); }

.atf-pub-state { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.atf-pub.is-live .atf-pub-state { color: var(--mpt-emerald); }
.atf-pub-host {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--mpt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.atf-pub-caret { margin-left: auto; flex: none; display: grid; place-items: center; transition: transform .18s ease; }
.atf-pub-summary[aria-expanded="true"] .atf-pub-caret { transform: rotate(180deg); }

.atf-pub-panel { padding: 4px 18px 16px; border-top: 1px solid var(--mpt-border); background: var(--mpt-canvas-2); }

.atf-pub-form { display: grid; gap: 11px; padding-top: 13px; }

/* Live toggle */
.atf-pub-live { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.atf-pub-live input { position: absolute; opacity: 0; width: 0; height: 0; }
.atf-pub-switch {
  position: relative; flex: none; display: block; width: 38px; height: 22px; border-radius: 999px;
  background: var(--mpt-card); border: 1px solid var(--mpt-border);
  transition: background .16s ease, border-color .16s ease;
}
.atf-pub-switch i {
  position: absolute; top: 2.5px; left: 2.5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--mpt-muted); transition: transform .16s ease, background .16s ease;
}
.atf-pub-live input:checked + .atf-pub-switch {
  background: linear-gradient(135deg, var(--mpt-emerald-soft, #3ecfa6), var(--mpt-emerald)); border-color: transparent;
}
.atf-pub-live input:checked + .atf-pub-switch i { transform: translateX(16px); background: #fff; }
.atf-pub-live input:focus-visible + .atf-pub-switch { outline: 2px solid var(--mpt-gold); outline-offset: 2px; }
.atf-pub-live-txt { font-size: 12.5px; font-weight: 700; color: var(--mpt-text); }

.atf-pub-field { display: grid; gap: 5px; }
.atf-pub-field > span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mpt-muted); }
.atf-pub-field select {
  width: 100%; padding: 8px 11px; border-radius: 9px; font: inherit; font-size: 12.8px;
  border: 1px solid var(--mpt-border); background: var(--mpt-card); color: var(--mpt-text);
}
.atf-pub-field select:focus-visible { outline: 2px solid var(--mpt-gold); outline-offset: 1px; }
.atf-pub-field small { font-size: 11px; line-height: 1.5; color: var(--mpt-muted); }

.atf-pub-form .mpt-btn { justify-self: start; }

/* The shareable link */
.atf-pub-link {
  margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--mpt-border);
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
}
.atf-pub-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  padding: 7px 10px; border-radius: 8px; color: var(--mpt-text);
  background: var(--mpt-card); border: 1px solid var(--mpt-border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.atf-pub-acts { display: flex; gap: 6px; flex: none; }
.atf-pub-note { grid-column: 1 / -1; font-size: 11px; line-height: 1.5; color: var(--mpt-muted); }

/* The title and Open link now carry the hover, since the card is not a link. */
.atf-card-title a { color: inherit; text-decoration: none; }
.atf-card-title a:hover { color: var(--mpt-gold); }
.atf-card:hover { border-color: var(--mpt-border-gold); box-shadow: var(--mpt-shadow-soft); }
a.atf-card-go { text-decoration: none; }
a.atf-card-go:hover .atf-go-ico { transform: translateX(3px); }

/* ==========================================================================
   A share link that is closed to this visitor.
   ========================================================================== */

.aptf-share-closed-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--mpt-canvas); }
.aptf-share-closed {
  max-width: 480px; text-align: center; padding: 34px 30px; border-radius: 18px;
  border: 1px solid var(--mpt-border); background: var(--mpt-card); box-shadow: var(--mpt-shadow-soft);
}
.aptf-share-closed-ico {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 15px; color: var(--mpt-gold);
  background: rgba(255,201,77,.11); border: 1px solid var(--mpt-border-gold);
}
.aptf-share-closed h1 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 800; color: var(--mpt-text); }
.aptf-share-closed p { margin: 0 0 20px; font-size: 13.5px; line-height: 1.68; color: var(--mpt-muted); }

/* ==========================================================================
   Edit mode — the one switch, on the Whitelabel screen.
   ========================================================================== */

.aptf-editmode {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--mpt-border); background: var(--mpt-card);
}
.aptf-editmode:has(input:checked) {
  border-color: rgba(43,184,148,.42);
  background: linear-gradient(90deg, rgba(43,184,148,.09), transparent 60%), var(--mpt-card);
}

.aptf-editmode-switch { flex: none; display: inline-flex; cursor: pointer; }
.aptf-editmode-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.aptf-editmode-track {
  position: relative; display: block; width: 50px; height: 28px; border-radius: 999px;
  background: var(--mpt-canvas-2); border: 1px solid var(--mpt-border);
  transition: background .16s ease, border-color .16s ease;
}
.aptf-editmode-track i {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mpt-muted); transition: transform .16s ease, background .16s ease;
}
.aptf-editmode-switch input:checked + .aptf-editmode-track {
  background: linear-gradient(135deg, var(--mpt-emerald-soft, #3ecfa6), var(--mpt-emerald));
  border-color: transparent;
}
.aptf-editmode-switch input:checked + .aptf-editmode-track i { transform: translateX(22px); background: #fff; }
.aptf-editmode-switch input:focus-visible + .aptf-editmode-track { outline: 2px solid var(--mpt-gold); outline-offset: 3px; }
.aptf-editmode-switch input:disabled + .aptf-editmode-track { opacity: .45; cursor: not-allowed; }

.aptf-editmode-copy { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.aptf-editmode-copy strong { font-size: 14.5px; font-weight: 800; color: var(--mpt-text); }
.aptf-editmode-copy small { font-size: 12.5px; line-height: 1.55; color: var(--mpt-muted); }
.aptf-editmode:has(input:checked) .aptf-editmode-copy strong { color: var(--mpt-emerald); }

@media (prefers-reduced-motion: reduce) {
  .aptf-editmode-track, .aptf-editmode-track i { transition: none; }
}

/* ==========================================================================
   Edit mode in the header — the same switch as the Whitelabel screen, put
   where the thing being rebranded is, so it can be flipped without leaving
   the page. Sits to the left of the search field.
   ========================================================================== */

.aptf-navedit {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 5px 12px 5px 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mpt-border); background: var(--mpt-card);
  transition: border-color .15s ease, background .15s ease;
}
.aptf-navedit:hover { border-color: var(--mpt-border-gold); }
.aptf-navedit input { position: absolute; opacity: 0; width: 0; height: 0; }
a.aptf-navedit, a.aptf-navedit:hover, a.aptf-navedit:focus { color: inherit; text-decoration: none; }

.aptf-navedit-track {
  position: relative; display: block; flex: none; width: 32px; height: 19px;
  border-radius: 999px; background: var(--mpt-canvas-2); border: 1px solid var(--mpt-border);
  transition: background .16s ease, border-color .16s ease;
}
.aptf-navedit-track i {
  position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--mpt-muted); transition: transform .16s ease, background .16s ease;
}
.aptf-navedit input:checked + .aptf-navedit-track {
  background: linear-gradient(135deg, var(--mpt-emerald-soft, #3ecfa6), var(--mpt-emerald));
  border-color: transparent;
}
.aptf-navedit input:checked + .aptf-navedit-track i { transform: translateX(13px); background: #fff; }
.aptf-navedit input:focus-visible + .aptf-navedit-track { outline: 2px solid var(--mpt-gold); outline-offset: 3px; }

.aptf-navedit-txt {
  font-size: 12.5px; font-weight: 700; color: var(--mpt-muted); white-space: nowrap;
}
.aptf-navedit.is-on { border-color: rgba(43,184,148,.45); background: rgba(43,184,148,.09); }
.aptf-navedit.is-on .aptf-navedit-txt { color: var(--mpt-emerald); }

/* On a narrow header the switch keeps its dot and drops the words. */
@media (max-width: 900px) {
  .aptf-navedit { padding: 5px 7px; }
  .aptf-navedit-txt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aptf-navedit, .aptf-navedit-track, .aptf-navedit-track i { transition: none; }
}

/* ==========================================================================
   Choose your AI tools — the step between buying a Tier 1 pack and the
   dashboard. Built on the same toggle cards as the agency picker.
   ========================================================================== */

.aptf-pick-wrap { min-height: 100vh; background: var(--mpt-canvas); padding: 40px 16px 64px; }
.aptf-pick-shell { width: min(1080px, 100%); margin-inline: auto; }

.aptf-pick-head { text-align: center; margin: 0 0 26px; }
.aptf-pick-logo { height: 34px; width: auto; margin: 0 auto 22px; display: block; }
.aptf-pick-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid rgba(43,184,148,.38); background: rgba(43,184,148,.11);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mpt-emerald);
}
.aptf-pick-head h1 {
  margin: 0 0 12px; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.12;
  letter-spacing: -.03em; font-weight: 800; color: var(--mpt-text);
}
.aptf-pick-lead {
  margin: 0 auto; max-width: 60ch; font-size: 14px; line-height: 1.65; color: var(--mpt-muted);
}
.aptf-pick-lead strong { color: var(--mpt-gold); }

.aptf-pick-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 11px 15px; border-radius: 13px;
  border: 1px solid var(--mpt-border); background: var(--mpt-card);
  position: sticky; top: 12px; z-index: 5;
}
.aptf-pick-counter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--mpt-border); background: var(--mpt-canvas-2);
  font-size: 12.5px; font-weight: 700; color: var(--mpt-muted);
}
.aptf-pick-counter .aptf-pick-count { color: var(--mpt-gold); font-weight: 800; }
.aptf-pick-counter.is-full {
  border-color: rgba(43,184,148,.4); background: rgba(43,184,148,.12); color: var(--mpt-emerald);
}
.aptf-pick-counter.is-full .aptf-pick-count { color: var(--mpt-emerald); }
.aptf-pick-bar .mpt-btn { margin-left: auto; }

.aptf-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
@media (max-width: 640px) { .aptf-pick-grid { grid-template-columns: 1fr; } }

/* The card reuses .atf-pick from the agency picker and adds a description. */
.aptf-pick-card .atf-pick-body { border-radius: 13px 13px 0 0; border-bottom: 0; }
.aptf-pick-desc {
  display: block; padding: 0 13px 12px; margin-top: -1px;
  border: 1px solid var(--mpt-border); border-top: 0; border-radius: 0 0 13px 13px;
  background: var(--mpt-card); font-size: 12.2px; line-height: 1.55; color: var(--mpt-muted);
  transition: border-color .16s ease, background .16s ease;
}
.aptf-pick-card input:checked ~ .aptf-pick-desc,
.aptf-pick-card input:checked + .atf-pick-body {
  border-color: color-mix(in srgb, var(--pc) 55%, transparent);
  background: color-mix(in srgb, var(--pc) 9%, var(--mpt-card));
}

/* At the limit the rest go quiet instead of disappearing. */
.atf-pick.is-blocked { opacity: .4; cursor: not-allowed; }
.atf-pick.is-blocked:hover .atf-pick-body { transform: none; border-color: var(--mpt-border); }

.aptf-pick-card.is-held { opacity: .55; cursor: default; }
.aptf-pick-held {
  margin-left: auto; flex: none; padding: 3.5px 9px; border-radius: 999px;
  background: rgba(43,184,148,.14); border: 1px solid rgba(43,184,148,.36); color: var(--mpt-emerald);
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}

.aptf-pick-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mpt-border);
}
.aptf-pick-submit:disabled { opacity: .45; cursor: not-allowed; }
.aptf-pick-note { font-size: 12.3px; color: var(--mpt-muted); }