/* Theme 2 "Command" for /dotcom — scoped build for rentech-website-next-v2 (loaded by Theme2Layout).
   Source: theme-2-next/app/globals.css. Everything lives under <div class="t2">, every class is
   prefixed "t2-" and every keyframe "t2-", so nothing clashes with Bootstrap or the repo's CSS. */
/* ===== from theme-2/style.css ===== */
/* =========================================================
   Dotcom — Theme 2 "Command"
   Minimal, dark-first layout inspired by raycast.com.
   Brand tokens are identical to the live Dotcom site.
   ========================================================= */

.t2 {
  /* Dotcom brand (unchanged) */
  --dc-primary: #6F5AEC;
  --dc-primary-txt: #6A5AEC;
  --dc-primary-soft: #F0EEFD;
  --dc-pink: #EB5A95;
  --dc-sky: #00BBFF;
  --dc-orange: #FF9D4E;
  --dc-grad-brand: linear-gradient(300.06deg, #825CE1 15.58%, #BC3FDC 34.66%, #DA40B9 52.35%, #ED41A4 70.97%, #F47D72 86.8%, #FD9853 104.48%);
  --dc-grad-sunset: linear-gradient(93.92deg, #FDCD71 1.86%, #F47E72 20.07%, #D151B8 48.33%, #9A57D1 76.32%, #7245DE 103.17%);
  --dc-grad-darkcard: linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,.2)), linear-gradient(226deg, #1B1B1B 2.98%, #343434 100%);

  /* Curves (unchanged) */
  --r-sm: 6px; --r-btn: 10px; --r-card: 12px; --r-lg: 16px; --r-xl: 30px; --r-pill: 50px;
  --sh-btn: 0 11px 22px rgba(111, 90, 236, .25);
  --sh-btn-pink: 0 11px 22px rgba(253, 73, 138, .25);
  --sh-inset: inset 1px .7px 6px 2px rgba(10, 37, 64, .35);

  /* Dark surfaces (Dotcom's own black sections, extended) */
  --bg: #07080A;
  --bg-2: #0C0D10;
  --surface: #111216;
  --surface-2: #17181D;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --txt: #FFFFFF;
  --txt-2: rgba(255, 255, 255, .64);
  --txt-3: rgba(255, 255, 255, .42);

  --container: 1160px;
  --font: "Inter", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, Menlo, monospace;
}

/* Scoped reset: undo author styles from Bootstrap / the repo's style.css on elements inside the
   theme (a:hover colour, ul padding, heading margins …) so they render as in the standalone
   theme-2-next app. Zero specificity, so every theme rule below still wins. */
.t2 :where(a, p, h1, h2, h3, h4, h5, h6, ul, ol, li, button, input, table, caption, thead, tbody, tr, th, td,
  small, strong, b, kbd, bdi, section, header, footer, main, nav, aside, article, address, figure, figcaption,
  blockquote, label, time, form, hr, i) { all: revert; }
/* img and svg are not reverted (all: revert would drop their HTML attributes); Bootstrap only adds vertical-align */
.t2 :where(img, svg) { vertical-align: baseline; }
.t2 a:hover { color: inherit; }
/* after the reset, which would otherwise put box-sizing back to content-box */
.t2 *, .t2 *::before, .t2 *::after { box-sizing: border-box; }

.t2 {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6;
  color: var(--txt); background: var(--bg); -webkit-font-smoothing: antialiased;
  /* clip both ways: decorations under the footer would otherwise make the page taller than the theme
     and show the repo's white body background in a strip at the very bottom */
  overflow: clip;
}
.t2 img { max-width: 100%; display: block; }
.t2 a { color: inherit; text-decoration: none; }
.t2 h1, .t2 h2, .t2 h3, .t2 h4, .t2 p { margin: 0; }
.t2 button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.t2 ::selection { background: rgba(111, 90, 236, .5); }

.t2 .t2-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.t2 .t2-section { padding: 140px 0; position: relative; }
.t2 .t2-center { text-align: center; }

/* ---------- Type ---------- */
.t2 .t2-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
  color: var(--txt-2); letter-spacing: .02em; margin-bottom: 18px;
}
.t2 .t2-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dc-primary); box-shadow: 0 0 12px var(--dc-primary); }
.t2 .t2-kicker.t2-pink::before { background: var(--dc-pink); box-shadow: 0 0 12px var(--dc-pink); }
.t2 .t2-kicker.t2-sky::before { background: var(--dc-sky); box-shadow: 0 0 12px var(--dc-sky); }
.t2 .t2-kicker.t2-orange::before { background: var(--dc-orange); box-shadow: 0 0 12px var(--dc-orange); }

.t2 h1.t2-display { font-size: 72px; line-height: 1.04; font-weight: 600; letter-spacing: -.035em; }
.t2 .t2-h2 { font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.t2 .t2-h2 .t2-dim, .t2 .t2-display .t2-dim { color: var(--txt-3); }
.t2 .t2-lead { font-size: 18px; line-height: 1.6; color: var(--txt-2); }
.t2 .t2-head { max-width: 760px; margin-bottom: 64px; }
.t2 .t2-head.t2-center { margin-left: auto; margin-right: auto; }
.t2 .t2-head .t2-lead { margin-top: 18px; }
.t2 .t2-c-purple { color: #8C7BF2; } .t2 .t2-c-pink { color: var(--dc-pink); } .t2 .t2-c-sky { color: var(--dc-sky); } .t2 .t2-c-orange { color: var(--dc-orange); }
.t2 .t2-grad { background: var(--dc-grad-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }

.t2 kbd {
  font-family: var(--font); font-size: 12px; font-weight: 500; min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-grid; place-items: center; border-radius: var(--r-sm);
  background: linear-gradient(180deg, #24252B, #18191E); border: 1px solid var(--line-2);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.6); color: var(--txt-2);
}

/* ---------- Buttons ---------- */
.t2 .t2-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--r-btn);
  font-size: 15px; font-weight: 500; transition: background .2s, transform .2s, box-shadow .2s, border-color .2s; white-space: nowrap;
}
.t2 .t2-btn-primary { background: var(--dc-primary); color: #fff; box-shadow: var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.2); }
.t2 .t2-btn-primary:hover { background: #7E6BF0; box-shadow: 0 0 0 4px rgba(111,90,236,.25), var(--sh-btn); }
.t2 .t2-btn-pink { background: var(--dc-pink); color: #fff; box-shadow: var(--sh-btn-pink), inset 0 1px 0 rgba(255,255,255,.2); }
.t2 .t2-btn-pink:hover { box-shadow: 0 0 0 4px rgba(235,90,149,.25), var(--sh-btn-pink); }
.t2 .t2-btn-ghost { background: rgba(255,255,255,.04); border: 1px solid var(--line-2); color: #fff; }
.t2 .t2-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.t2 .t2-btn-soft { background: rgba(111,90,236,.14); color: #B5A9F7; border-radius: var(--r-xl); justify-content: center; }
.t2 .t2-btn-soft:hover { background: var(--dc-primary); color: #fff; }
.t2 .t2-btn-white { background: #fff; color: #07080A; border-radius: var(--r-xl); justify-content: center; }
.t2 .t2-btn-white:hover { background: var(--dc-primary-soft); }
.t2 .t2-btn kbd { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); box-shadow: none; }
.t2 .t2-btn-sm { padding: 8px 14px; font-size: 14px; }
.t2 .t2-btn-block { width: 100%; }

/* ---------- Header ---------- */
.t2 .t2-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.t2 .t2-header.t2-scrolled { background: rgba(7,8,10,.72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-color: var(--line); }
.t2 .t2-header .t2-container { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.t2 .t2-brand { display: flex; align-items: center; gap: 4px; position: relative; }
.t2 .t2-brand img { height: 30px; width: auto; }
.t2 .t2-brand-toggle { padding: 4px; color: var(--txt-3); display: flex; transition: color .2s; }
.t2 .t2-brand-toggle:hover { color: #fff; }
.t2 .t2-products-menu {
  position: absolute; top: calc(100% + 14px); left: 0; width: 320px; padding: 8px;
  background: rgba(17,18,22,.96); backdrop-filter: blur(20px); border: 1px solid var(--line-2); border-radius: var(--r-card);
  box-shadow: 0 30px 60px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transition: .2s;
}
.t2 .t2-brand.t2-open .t2-products-menu { opacity: 1; visibility: visible; transform: none; }
.t2 .t2-products-menu .t2-label { display: block; font-size: 11px; font-weight: 600; color: var(--txt-3); letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; }
.t2 .t2-products-menu a { display: block; padding: 10px; border-radius: var(--r-btn); }
.t2 .t2-products-menu a:hover { background: rgba(255,255,255,.06); }
.t2 .t2-products-menu strong { display: block; font-size: 14px; font-weight: 500; }
.t2 .t2-products-menu span { font-size: 13px; color: var(--txt-3); }
.t2 .t2-nav { display: flex; gap: 2px; }
.t2 .t2-nav a { padding: 8px 14px; font-size: 14px; color: var(--txt-2); border-radius: var(--r-btn); transition: color .2s, background .2s; }
.t2 .t2-nav a:hover, .t2 .t2-nav a.t2-active { color: #fff; }
.t2 .t2-nav a.t2-active { background: rgba(255,255,255,.06); }
.t2 .t2-header-cta { display: flex; align-items: center; gap: 10px; }
.t2 .t2-search-trigger {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border-radius: var(--r-btn);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--txt-3); font-size: 13px; transition: .2s;
}
.t2 .t2-search-trigger:hover { color: #fff; border-color: rgba(255,255,255,.22); }
.t2 .t2-menu-btn { display: none; padding: 6px; }

/* ---------- Hero ---------- */
.t2 .t2-hero { padding: 180px 0 120px; text-align: center; overflow: hidden; position: relative; isolation: isolate; }
.t2 .t2-hero::before {
  content: ""; position: absolute; left: 50%; top: -260px; width: 1200px; height: 900px; transform: translateX(-50%); z-index: -1;
  background:
    radial-gradient(closest-side, rgba(111,90,236,.38), transparent 70%),
    radial-gradient(400px 300px at 70% 60%, rgba(235,90,149,.18), transparent 70%);
  filter: blur(10px);
}
.t2 .t2-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000, transparent 75%);
}
.t2 .t2-hero-logo {
  width: 96px; height: 96px; margin: 0 auto 36px; border-radius: 24px; display: grid; place-items: center;
  background: linear-gradient(180deg, #1C1D23, #0F1014); border: 1px solid var(--line-2);
  box-shadow: 0 0 0 8px rgba(255,255,255,.02), 0 0 80px rgba(111,90,236,.55), inset 0 1px 0 rgba(255,255,255,.1);
  animation: t2-pulse 4s ease-in-out infinite;
}
.t2 .t2-hero-logo img { width: 48px; height: 48px; object-fit: contain; }
@keyframes t2-pulse { 50% { box-shadow: 0 0 0 8px rgba(255,255,255,.02), 0 0 120px rgba(235,90,149,.5), inset 0 1px 0 rgba(255,255,255,.1); } }
.t2 .t2-hero .t2-lead { max-width: 560px; margin: 24px auto 0; }
.t2 .t2-hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.t2 .t2-hero-meta { margin-top: 18px; font-size: 13px; color: var(--txt-3); }

/* Command palette mock (the hero's centrepiece) */
.t2 .t2-palette-stage { position: relative; max-width: 760px; margin: 90px auto 0; }
.t2 .t2-palette-stage .t2-bg-shot {
  position: absolute; inset: -40px -180px auto; opacity: .18; border-radius: var(--r-lg); z-index: -1; filter: blur(1px);
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent);
}
.t2 .t2-palette {
  text-align: left; border-radius: var(--r-lg); overflow: hidden;
  background: rgba(20,21,26,.82); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--line-2); box-shadow: 0 50px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.t2 .t2-palette-search { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: 18px; }
.t2 .t2-palette-search .t2-caret { width: 2px; height: 22px; background: var(--dc-primary); animation: t2-blink 1s steps(1) infinite; }
.t2 .t2-palette-search .t2-typed { color: #fff; }
.t2 .t2-palette-search .t2-ph { color: var(--txt-3); }
@keyframes t2-blink { 50% { opacity: 0; } }
.t2 .t2-palette-group { padding: 8px; }
.t2 .t2-palette-group .t2-gl { font-size: 12px; color: var(--txt-3); padding: 8px 12px 6px; font-weight: 500; }
.t2 .t2-p-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-btn); font-size: 14px; color: var(--txt-2); transition: background .15s, color .15s; }
.t2 .t2-p-item .t2-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 28px; color: #fff; }
.t2 .t2-p-item .t2-ic img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.t2 .t2-p-item .t2-sub { color: var(--txt-3); margin-left: 4px; }
.t2 .t2-p-item .t2-tag { margin-left: auto; font-size: 12px; color: var(--txt-3); }
.t2 .t2-p-item.t2-sel, .t2 .t2-p-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.t2 .t2-palette-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--txt-3); background: rgba(0,0,0,.2); }
.t2 .t2-palette-foot img { height: 16px; width: auto; opacity: .7; }
.t2 .t2-palette-foot .t2-act { margin-left: auto; display: flex; align-items: center; gap: 6px; color: #fff; }
.t2 .t2-palette-foot .t2-sep { width: 1px; height: 14px; background: var(--line-2); }

/* ---------- Logos ---------- */
.t2 .t2-logos { padding: 30px 0 0; }
.t2 .t2-logos p { text-align: center; color: var(--txt-3); font-size: 13px; margin-bottom: 28px; }
.t2 .t2-logo-row { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.t2 .t2-logo-track { display: flex; align-items: center; gap: 64px; padding-right: 64px; animation: t2-slide 45s linear infinite; flex: none; }
.t2 .t2-logo-track img { height: 28px; width: auto; opacity: .45; filter: grayscale(1) brightness(2); transition: opacity .2s; }
.t2 .t2-logo-track img:hover { opacity: 1; }
@keyframes t2-slide { to { transform: translateX(-100%); } }

/* ---------- Keycaps (features) ---------- */
.t2 .t2-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; perspective: 1200px; }
.t2 .t2-key {
  position: relative; padding: 26px 22px 24px; border-radius: var(--r-lg); min-height: 200px;
  background: linear-gradient(180deg, #1A1B21 0%, #121318 100%);
  border: 1px solid var(--line-2);
  box-shadow: 0 6px 0 #050507, 0 8px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.4);
  transition: transform .12s ease, box-shadow .12s ease, border-color .3s;
  cursor: default; overflow: hidden;
}
.t2 .t2-key::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(111,90,236,.28), transparent 60%);
}
.t2 .t2-key:hover { border-color: rgba(111,90,236,.5); }
.t2 .t2-key:hover::before { opacity: 1; }
.t2 .t2-key:active, .t2 .t2-key.t2-pressed { transform: translateY(5px); box-shadow: 0 1px 0 #050507, 0 2px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.4); }
.t2 .t2-key .t2-legend { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 34px; }
.t2 .t2-key .t2-legend img { width: 30px; height: 30px; filter: brightness(0) invert(1); opacity: .9; }
.t2 .t2-key .t2-legend kbd { font-family: var(--mono); }
.t2 .t2-key h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em; }
.t2 .t2-key p { font-size: 14px; color: var(--txt-3); line-height: 1.5; }
.t2 .t2-key.t2-accent { background: linear-gradient(180deg, #7B67F0 0%, #5D49DE 100%); border-color: rgba(255,255,255,.2); box-shadow: 0 6px 0 #3A2AA8, 0 12px 40px rgba(111,90,236,.45), inset 0 1px 0 rgba(255,255,255,.3); }
.t2 .t2-key.t2-accent p { color: rgba(255,255,255,.8); }
.t2 .t2-key.t2-accent.t2-pressed, .t2 .t2-key.t2-accent:active { box-shadow: 0 1px 0 #3A2AA8, 0 4px 16px rgba(111,90,236,.45), inset 0 1px 0 rgba(255,255,255,.3); }
.t2 .t2-key.t2-accent kbd { background: rgba(0,0,0,.2); color: #fff; }
.t2 .t2-key.t2-wide { grid-column: span 2; }
.t2 .t2-keys-hint { text-align: center; margin-top: 32px; color: var(--txt-3); font-size: 13px; }

/* ---------- Tabs + template store ---------- */
.t2 .t2-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255,255,255,.03); margin-bottom: 40px; flex-wrap: wrap; justify-content: center; }
.t2 .t2-tabs button { padding: 8px 18px; border-radius: var(--r-pill); font-size: 14px; color: var(--txt-2); transition: .2s; }
.t2 .t2-tabs button:hover { color: #fff; }
.t2 .t2-tabs button.t2-active { background: var(--dc-primary); color: #fff; box-shadow: var(--sh-btn); }
.t2 .t2-store { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.t2 .t2-ext {
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden;
  transition: border-color .25s, transform .25s, background .25s; display: flex; flex-direction: column;
}
.t2 .t2-ext:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-4px); }
.t2 .t2-ext .t2-shot { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line); background: #000; }
.t2 .t2-ext .t2-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .85; transition: transform .5s, opacity .3s; }
.t2 .t2-ext:hover .t2-shot img { transform: scale(1.05); opacity: 1; }
.t2 .t2-ext .t2-info { padding: 14px 16px 16px; display: flex; align-items: center; gap: 12px; }
.t2 .t2-ext .t2-info .t2-dot { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.t2 .t2-ext .t2-info strong { display: block; font-size: 14px; font-weight: 600; }
.t2 .t2-ext .t2-info span { font-size: 12px; color: var(--txt-3); }
.t2 .t2-ext .t2-info .t2-go { margin-left: auto; color: var(--txt-3); transition: transform .2s, color .2s; }
.t2 .t2-ext:hover .t2-info .t2-go { color: #fff; transform: translateX(3px); }
.t2 .t2-ext.t2-hide { display: none; }
.t2 .t2-more { text-align: center; margin-top: 40px; }

/* ---------- Glass card / generic ---------- */
.t2 .t2-card {
  position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); padding: 28px;
  transition: border-color .25s, background .25s;
}
.t2 .t2-card:hover { border-color: var(--line-2); background: var(--surface-2); }
.t2 .t2-glow-edge { position: relative; }
.t2 .t2-glow-edge::after {
  content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140,123,242,.9), transparent);
}

/* ---------- Steps: workflow list + terminal ---------- */
.t2 .t2-flow { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: stretch; }
.t2 .t2-flow-list { display: grid; gap: 6px; align-content: start; }
.t2 .t2-flow-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; text-align: left; padding: 16px 18px; border-radius: var(--r-card);
  border: 1px solid transparent; transition: .25s; color: var(--txt-3); width: 100%;
}
.t2 .t2-flow-item .t2-n { font-family: var(--mono); font-size: 13px; padding-top: 2px; }
.t2 .t2-flow-item h3 { font-size: 16px; font-weight: 600; color: var(--txt-2); transition: color .25s; }
.t2 .t2-flow-item p { font-size: 14px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s, opacity .35s, margin .35s; }
.t2 .t2-flow-item:hover h3 { color: #fff; }
.t2 .t2-flow-item.t2-active { background: var(--surface); border-color: var(--line-2); color: var(--txt-2); }
.t2 .t2-flow-item.t2-active .t2-n { color: #8C7BF2; }
.t2 .t2-flow-item.t2-active h3 { color: #fff; }
.t2 .t2-flow-item.t2-active p { max-height: 80px; opacity: 1; margin-top: 6px; }
.t2 .t2-terminal { border-radius: var(--r-lg); border: 1px solid var(--line-2); background: #0B0C0F; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px rgba(0,0,0,.5); }
.t2 .t2-terminal .t2-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.t2 .t2-terminal .t2-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2A2B31; }
.t2 .t2-terminal .t2-bar i:nth-child(1) { background: #EB5A95; } .t2 .t2-terminal .t2-bar i:nth-child(2) { background: #FF9D4E; } .t2 .t2-terminal .t2-bar i:nth-child(3) { background: #00B8AF; }
.t2 .t2-terminal .t2-bar span { margin-left: 10px; font-size: 12px; color: var(--txt-3); font-family: var(--mono); }
.t2 .t2-terminal .t2-screen { position: relative; flex: 1; min-height: 360px; }
.t2 .t2-terminal .t2-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.03); transition: opacity .5s, transform .6s; }
.t2 .t2-terminal .t2-screen img.t2-on { opacity: 1; transform: none; }
.t2 .t2-terminal .t2-log { font-family: var(--mono); font-size: 12.5px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--txt-3); }
.t2 .t2-terminal .t2-log b { color: #00B8AF; font-weight: 500; }

/* ---------- Split ---------- */
.t2 .t2-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.t2 .t2-split .t2-lead { margin: 18px 0 30px; }
.t2 .t2-window { border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.5); }
.t2 .t2-window .t2-bar { display: flex; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.t2 .t2-window .t2-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2A2B31; }
.t2 .t2-window img { width: 100%; }
.t2 .t2-ticks { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; }
.t2 .t2-ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--txt-2); }
.t2 .t2-ticks li::before {
  content: ""; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 6px; background: rgba(111,90,236,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A595F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat;
  border: 1px solid rgba(111,90,236,.4);
}
.t2 .t2-ticks.t2-pink li::before { background-color: rgba(235,90,149,.15); border-color: rgba(235,90,149,.4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EB5A95' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }

/* ---------- Pricing ---------- */
.t2 .t2-switch { display: inline-flex; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255,255,255,.03); margin-bottom: 48px; }
.t2 .t2-switch button { padding: 9px 28px; border-radius: var(--r-pill); font-size: 14px; color: var(--txt-2); transition: .2s; }
.t2 .t2-switch button.t2-active { background: var(--dc-primary); color: #fff; box-shadow: var(--sh-btn); }
.t2 .t2-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; }
.t2 .t2-plan { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); padding: 28px 24px; display: flex; flex-direction: column; transition: border-color .25s, transform .25s; position: relative; }
.t2 .t2-plan:hover { border-color: var(--line-2); transform: translateY(-4px); }
.t2 .t2-plan h3 { font-size: 15px; font-weight: 600; text-transform: capitalize; color: #A595F5; display: flex; align-items: center; gap: 8px; }
.t2 .t2-plan .t2-badge { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: var(--r-pill); background: var(--dc-grad-brand); color: #fff; }
.t2 .t2-plan .t2-price { font-size: 44px; font-weight: 600; letter-spacing: -.03em; margin: 22px 0 2px; }
.t2 .t2-plan .t2-price small { font-size: 14px; color: var(--txt-3); font-weight: 400; letter-spacing: 0; }
.t2 .t2-plan .t2-setup { font-size: 13px; color: var(--txt-3); min-height: 20px; }
.t2 .t2-plan .t2-desc { font-size: 14px; color: var(--txt-2); margin: 16px 0 22px; min-height: 66px; }
.t2 .t2-plan .t2-btn { margin-bottom: 24px; }
.t2 .t2-plan h4 { font-size: 12px; font-weight: 600; color: var(--txt-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.t2 .t2-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.t2 .t2-plan li { font-size: 14px; color: var(--txt-2); display: flex; gap: 10px; }
.t2 .t2-plan li::before { content: "✓"; color: #8C7BF2; font-weight: 700; }
.t2 .t2-plan .t2-renew { margin-top: auto; padding-top: 22px; font-size: 12px; color: var(--txt-3); }
.t2 .t2-plan.t2-popular { border-color: rgba(111,90,236,.55); background: linear-gradient(180deg, rgba(111,90,236,.14), var(--surface) 45%); box-shadow: 0 0 60px rgba(111,90,236,.18); }
.t2 .t2-plan.t2-popular::before { content: ""; position: absolute; left: 15%; right: 15%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #B5A9F7, transparent); }
.t2 .t2-plan.t2-enterprise { background: var(--dc-primary); border-color: #D8D6DE; }
.t2 .t2-plan.t2-enterprise h3, .t2 .t2-plan.t2-enterprise li::before { color: #fff; }
.t2 .t2-plan.t2-enterprise .t2-setup, .t2 .t2-plan.t2-enterprise .t2-renew, .t2 .t2-plan.t2-enterprise h4 { color: rgba(255,255,255,.7); }
.t2 .t2-plan.t2-enterprise .t2-desc, .t2 .t2-plan.t2-enterprise li { color: rgba(255,255,255,.9); }

/* ---------- Impact (bento of switchable panels) ---------- */
.t2 .t2-impact { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; }
.t2 .t2-impact-list { display: grid; gap: 8px; }
.t2 .t2-impact-list button {
  text-align: left; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--dc-grad-darkcard); box-shadow: var(--sh-inset); display: flex; align-items: center; gap: 14px; color: var(--txt-2); transition: .25s;
}
.t2 .t2-impact-list button kbd { font-family: var(--mono); }
.t2 .t2-impact-list button:hover { color: #fff; border-color: var(--line-2); }
.t2 .t2-impact-list button.t2-active { color: #fff; border-color: rgba(235,90,149,.6); background: linear-gradient(226deg, rgba(235,90,149,.16), rgba(111,90,236,.16)), #121318; }
.t2 .t2-impact-list button.t2-active kbd { background: var(--dc-pink); color: #fff; border-color: transparent; }
.t2 .t2-impact-view { border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--dc-grad-darkcard); box-shadow: var(--sh-inset); padding: 48px; position: relative; overflow: hidden; }
.t2 .t2-impact-view::after { content: ""; position: absolute; width: 420px; height: 420px; right: -160px; bottom: -200px; border-radius: 50%; background: var(--dc-grad-brand); filter: blur(90px); opacity: .35; }
.t2 .t2-impact-view .t2-big { font-size: 34px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 18px; position: relative; z-index: 1; }
.t2 .t2-impact-view p { color: var(--txt-2); font-size: 16px; line-height: 1.75; position: relative; z-index: 1; }
.t2 .t2-impact-view .t2-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; position: relative; z-index: 1; }
.t2 .t2-impact-view .t2-tags span { font-size: 12px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--txt-2); background: rgba(255,255,255,.03); }
.t2 .t2-swap { animation: t2-swap .4s ease; }
@keyframes t2-swap { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Foundation grid (hairline) ---------- */
.t2 .t2-grid6 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.t2 .t2-cell { padding: 40px 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; transition: background .3s; }
.t2 .t2-cell::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(111,90,236,.14), transparent 60%); }
.t2 .t2-cell:hover::before { opacity: 1; }
.t2 .t2-cell .t2-ic { width: 40px; height: 40px; border-radius: var(--r-btn); display: grid; place-items: center; margin-bottom: 22px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); transition: .3s; position: relative; }
.t2 .t2-cell:hover .t2-ic { box-shadow: 0 0 30px currentColor; border-color: currentColor; }
.t2 .t2-cell h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; position: relative; }
.t2 .t2-cell p { color: var(--txt-3); font-size: 14px; position: relative; }

/* ---------- Quotes ---------- */
.t2 .t2-quotes { columns: 2; column-gap: 14px; }
.t2 .t2-quote { break-inside: avoid; margin-bottom: 14px; }
.t2 .t2-quote p { color: var(--txt-2); font-size: 15px; line-height: 1.7; }
.t2 .t2-quote .t2-who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.t2 .t2-quote .t2-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--dc-grad-brand); }
.t2 .t2-quote strong { display: block; font-size: 14px; font-weight: 600; }
.t2 .t2-quote span { font-size: 12px; color: var(--txt-3); text-transform: capitalize; }

/* ---------- CTA ---------- */
.t2 .t2-cta { text-align: center; padding: 160px 0; position: relative; overflow: hidden; isolation: isolate; }
.t2 .t2-cta::before { content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(111,90,236,.35), transparent); z-index: -1; }
.t2 .t2-cta .t2-rings { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; }
.t2 .t2-cta .t2-rings i { position: absolute; left: 50%; top: 50%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%, -50%); }
.t2 .t2-cta .t2-h2 { font-size: 64px; }
.t2 .t2-cta .t2-lead { margin: 20px auto 40px; max-width: 520px; }

/* ---------- Footer ---------- */
.t2 .t2-footer { border-top: 1px solid var(--line); padding: 70px 0 30px; color: var(--txt-3); font-size: 14px; }
.t2 .t2-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: 32px; }
.t2 .t2-footer .t2-flogo { height: 30px; width: auto; margin-bottom: 18px; }
.t2 .t2-footer h4 { color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 16px; }
.t2 .t2-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.t2 .t2-footer a { transition: color .2s; }
.t2 .t2-footer a:hover { color: #fff; }
.t2 .t2-footer .t2-tag { font-size: 11px; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(235,90,149,.15); color: var(--dc-pink); margin-left: 6px; }
.t2 .t2-footer .t2-partners { display: flex; gap: 12px; margin-top: 20px; align-items: center; }
.t2 .t2-footer .t2-partners img { height: 34px; width: auto; opacity: .8; }
.t2 .t2-footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.t2 .t2-footer-bottom .t2-hint { display: flex; align-items: center; gap: 6px; }

/* ---------- Inner pages ---------- */
.t2 .t2-page-hero { padding: 170px 0 70px; text-align: center; position: relative; overflow: hidden; }
.t2 .t2-page-hero::before { content: ""; position: absolute; left: 50%; top: -300px; width: 1000px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(111,90,236,.3), transparent); z-index: -1; }
.t2 .t2-page-hero h1.t2-display { font-size: 60px; max-width: 880px; margin: 0 auto; }
.t2 .t2-page-hero .t2-lead { max-width: 600px; margin: 20px auto 0; }
.t2 .t2-page-hero .t2-hero-actions { margin-top: 32px; }

.t2 .t2-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.t2 .t2-compare th, .t2 .t2-compare td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: center; }
.t2 .t2-compare th { color: #A595F5; font-weight: 600; text-transform: capitalize; font-size: 14px; }
.t2 .t2-compare td:first-child, .t2 .t2-compare th:first-child { text-align: left; color: var(--txt-2); }
.t2 .t2-compare td { color: #fff; }
.t2 .t2-compare .t2-y { color: #8C7BF2; }
.t2 .t2-compare tr:hover td { background: rgba(255,255,255,.02); }
.t2 .t2-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }

.t2 .t2-faq { max-width: 760px; margin: 0 auto; }
.t2 .t2-faq details { border-bottom: 1px solid var(--line); }
.t2 .t2-faq summary { list-style: none; padding: 22px 0; font-size: 17px; font-weight: 500; display: flex; justify-content: space-between; gap: 20px; cursor: pointer; }
.t2 .t2-faq summary::-webkit-details-marker { display: none; }
.t2 .t2-faq summary::after { content: "+"; color: var(--txt-3); font-size: 22px; line-height: 1; transition: transform .25s, color .25s; }
.t2 .t2-faq details[open] summary::after { transform: rotate(45deg); color: #8C7BF2; }
.t2 .t2-faq details p { padding-bottom: 22px; color: var(--txt-2); }
.t2 .t2-faq a { color: #A595F5; }

.t2 .t2-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
.t2 .t2-toolbar .t2-tabs { margin-bottom: 0; }
.t2 .t2-filter-input { display: flex; align-items: center; gap: 10px; min-width: 300px; padding: 10px 14px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--surface); color: var(--txt-3); }
.t2 .t2-filter-input input { flex: 1; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 14px; }
.t2 .t2-filter-input:focus-within { border-color: rgba(111,90,236,.6); box-shadow: 0 0 0 4px rgba(111,90,236,.15); }
.t2 .t2-empty { text-align: center; color: var(--txt-3); padding: 60px 0; display: none; }

.t2 .t2-post-feature { display: grid; grid-template-columns: 1.2fr 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); margin-bottom: 60px; transition: border-color .25s; }
.t2 .t2-post-feature:hover { border-color: var(--line-2); }
.t2 .t2-post-feature img { width: 100%; height: 100%; object-fit: cover; }
.t2 .t2-post-feature .t2-txt { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.t2 .t2-post-feature h2 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin: 14px 0; }
.t2 .t2-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.t2 .t2-post { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, transform .25s; }
.t2 .t2-post:hover { border-color: var(--line-2); transform: translateY(-4px); }
.t2 .t2-post img { aspect-ratio: 16/9; object-fit: cover; width: 100%; border-bottom: 1px solid var(--line); }
.t2 .t2-post .t2-b { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.t2 .t2-post .t2-cat { font-size: 12px; color: var(--dc-pink); font-weight: 500; }
.t2 .t2-post h3 { font-size: 16px; font-weight: 600; line-height: 1.45; margin: 8px 0 16px; letter-spacing: -.01em; }
.t2 .t2-post time { margin-top: auto; font-size: 13px; color: var(--txt-3); }
.t2 .t2-pager { display: flex; justify-content: center; gap: 6px; margin-top: 48px; }
.t2 .t2-pager button { width: 40px; height: 40px; border-radius: var(--r-btn); border: 1px solid var(--line-2); color: var(--txt-2); transition: .2s; }
.t2 .t2-pager button:hover { color: #fff; border-color: rgba(255,255,255,.25); }
.t2 .t2-pager button.t2-active { background: var(--dc-primary); border-color: var(--dc-primary); color: #fff; }
.t2 .t2-subscribe { display: flex; gap: 8px; max-width: 440px; margin: 30px auto 0; padding: 5px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--surface); }
.t2 .t2-subscribe input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: inherit; padding: 0 12px; }

.t2 .t2-legal { display: grid; grid-template-columns: 240px 1fr; gap: 60px; align-items: start; }
.t2 .t2-legal-nav { position: sticky; top: 100px; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.t2 .t2-legal-nav a { padding: 7px 0 7px 16px; font-size: 13px; color: var(--txt-3); margin-left: -1px; border-left: 1px solid transparent; transition: .2s; }
.t2 .t2-legal-nav a:hover { color: #fff; border-color: var(--dc-primary); }
.t2 .t2-legal-body h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 44px 0 14px; scroll-margin-top: 100px; }
.t2 .t2-legal-body h2:first-child { margin-top: 0; }
.t2 .t2-legal-body p, .t2 .t2-legal-body li { color: var(--txt-2); line-height: 1.8; }
.t2 .t2-legal-body p + p { margin-top: 12px; }

/* ---------- Command palette overlay (⌘K) ---------- */
.t2 .t2-cmdk { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center; padding-top: 14vh; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.t2 .t2-cmdk.t2-open { display: flex; animation: t2-fade .18s ease; }
.t2 .t2-cmdk .t2-palette { width: min(640px, calc(100% - 32px)); animation: t2-pop .22s cubic-bezier(.2,.9,.3,1.2); }
.t2 .t2-cmdk input { flex: 1; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 17px; }
.t2 .t2-cmdk .t2-palette-group { max-height: 360px; overflow-y: auto; }
@keyframes t2-fade { from { opacity: 0; } }
@keyframes t2-pop { from { opacity: 0; transform: scale(.96) translateY(-8px); } }

/* ---------- Reveal ---------- */
.t2 .t2-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.t2 .t2-reveal.t2-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .t2 .t2-keys, .t2 .t2-store, .t2 .t2-plans { grid-template-columns: repeat(2, 1fr); }
  .t2 .t2-footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .t2 .t2-section { padding: 96px 0; }
  .t2 h1.t2-display { font-size: 46px; } .t2 .t2-page-hero h1.t2-display { font-size: 40px; }
  .t2 .t2-h2, .t2 .t2-cta .t2-h2 { font-size: 34px; }
  .t2 .t2-split, .t2 .t2-flow, .t2 .t2-impact, .t2 .t2-post-feature, .t2 .t2-legal { grid-template-columns: 1fr; }
  .t2 .t2-grid6 { grid-template-columns: 1fr 1fr; }
  .t2 .t2-posts { grid-template-columns: 1fr 1fr; }
  .t2 .t2-quotes { columns: 1; }
  .t2 .t2-legal-nav { position: static; }
  .t2 .t2-nav, .t2 .t2-search-trigger, .t2 .t2-header-cta .t2-btn-ghost { display: none; }
  .t2 .t2-menu-btn { display: block; }
  .t2 .t2-header.t2-open { background: rgba(7,8,10,.96); }
  .t2 .t2-header.t2-open .t2-nav { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; padding: 12px 20px 20px; background: rgba(7,8,10,.96); border-bottom: 1px solid var(--line); }
  .t2 .t2-palette-stage .t2-bg-shot { display: none; }
  .t2 .t2-terminal .t2-screen { min-height: 240px; }
}
@media (max-width: 560px) {
  .t2 .t2-container { padding: 0 16px; }
  .t2 h1.t2-display { font-size: 38px; }
  .t2 .t2-hero { padding-top: 140px; }
  .t2 .t2-keys, .t2 .t2-store, .t2 .t2-plans, .t2 .t2-grid6, .t2 .t2-posts { grid-template-columns: 1fr; }
  .t2 .t2-key.t2-wide { grid-column: auto; }
  .t2 .t2-footer-grid { grid-template-columns: 1fr 1fr; }
  .t2 .t2-footer-grid > div:first-child { grid-column: 1 / -1; }
  .t2 .t2-impact-view { padding: 30px; }
  .t2 .t2-filter-input { min-width: 0; width: 100%; }
  .t2 .t2-p-item .t2-tag, .t2 .t2-palette-foot .t2-hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .t2 *, .t2 *::before, .t2 *::after { animation: none !important; transition: none !important; }
  .t2 .t2-reveal { opacity: 1; transform: none; }
}

.t2 .t2-grad-brand { background: linear-gradient(90deg, #8C7BF2 0%, #BC3FDC 55%, #EB5A95 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t2 .t2-key.t2-space { grid-column: 1 / -1; min-height: 0; display: flex; align-items: center; gap: 22px; padding: 22px 26px; }
.t2 .t2-key.t2-space .t2-legend { margin: 0; }
.t2 .t2-key.t2-space .t2-spacekey { margin-left: auto; min-width: 180px; height: 30px; font-family: var(--mono); }
@media (max-width: 560px) { .t2 .t2-key.t2-space { flex-wrap: wrap; } .t2 .t2-key.t2-space .t2-spacekey { display: none; } }
.t2 .t2-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .t2 .t2-grid3 { grid-template-columns: 1fr; } }


/* ===== from theme-2/color.css ===== */
/* =========================================================
   Theme 2 "Command" — colour layer
   Brings back Dotcom's white / lavender sections and makes every
   card carry a brand colour. Dark Raycast-style sections stay, but glow.
   ========================================================= */

/* ---------- Light section tokens (components read these vars) ---------- */
.t2 .t2-light {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FBFAFF;
  --line: rgba(17, 24, 39, .08);
  --line-2: rgba(17, 24, 39, .14);
  --txt: #0B0B12;
  --txt-2: #495567;
  --txt-3: #6B7280;
  background: var(--bg); color: var(--txt);
}
.t2 .t2-light.t2-lav {
  --bg: #F7F6FE;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(111, 90, 236, .14) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.t2 .t2-light .t2-c-purple { color: var(--dc-primary-txt); }
.t2 .t2-light .t2-h2 .t2-dim { color: #9CA3AF; }
.t2 .t2-light ::selection { background: rgba(111, 90, 236, .25); }

.t2 .t2-light kbd { background: linear-gradient(180deg, #fff, #F3F2FB); border-color: #DCD8F5; color: #495567; box-shadow: inset 0 -1px 0 #DCD8F5; }
.t2 .t2-light .t2-btn-ghost { background: #fff; border-color: var(--line-2); color: var(--txt); }
.t2 .t2-light .t2-btn-ghost:hover { border-color: var(--dc-primary); color: var(--dc-primary-txt); background: var(--dc-primary-soft); }
.t2 .t2-light .t2-btn-soft { background: var(--dc-primary-soft); color: var(--dc-primary-txt); }
.t2 .t2-light .t2-btn-soft:hover { background: var(--dc-primary); color: #fff; }
.t2 .t2-light .t2-tabs, .t2 .t2-light .t2-switch { background: #fff; box-shadow: 0 4px 18px rgba(47, 43, 61, .08); }

/* ---------- Coloured kicker pills ---------- */
.t2 .t2-kicker {
  --k: var(--dc-primary);
  padding: 6px 14px 6px 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--k) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--k) 35%, transparent);
  color: color-mix(in srgb, var(--k) 55%, #fff);
}
.t2 .t2-kicker::before { background: var(--k); box-shadow: 0 0 12px var(--k); }
.t2 .t2-kicker.t2-pink { --k: var(--dc-pink); }
.t2 .t2-kicker.t2-sky { --k: var(--dc-sky); }
.t2 .t2-kicker.t2-orange { --k: var(--dc-orange); }
.t2 .t2-light .t2-kicker { color: color-mix(in srgb, var(--k) 80%, #000); background: color-mix(in srgb, var(--k) 10%, #fff); }

/* ---------- Dark sections get coloured auras ---------- */
.t2 .t2-aura { position: relative; isolation: isolate; overflow: hidden; }
.t2 .t2-aura::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0;
  background:
    radial-gradient(600px 380px at 15% 10%, color-mix(in srgb, var(--a1, #6F5AEC) 30%, transparent), transparent 70%),
    radial-gradient(560px 380px at 90% 90%, color-mix(in srgb, var(--a2, #EB5A95) 26%, transparent), transparent 70%);
}
.t2 .t2-aura.t2-pink { --a1: #EB5A95; --a2: #6F5AEC; }
.t2 .t2-aura.t2-sunset { --a1: #FF9D4E; --a2: #BC3FDC; }
.t2 .t2-aura.t2-sky { --a1: #00BBFF; --a2: #6F5AEC; }

/* hero: richer multi-colour glow + gradient hairline under header */
.t2 .t2-hero::before {
  background:
    radial-gradient(closest-side, rgba(111, 90, 236, .55), transparent 70%),
    radial-gradient(380px 300px at 25% 65%, rgba(0, 187, 255, .22), transparent 70%),
    radial-gradient(420px 320px at 78% 55%, rgba(235, 90, 149, .32), transparent 70%),
    radial-gradient(300px 240px at 60% 85%, rgba(255, 157, 78, .2), transparent 70%);
}
.t2 .t2-hero-logo { box-shadow: 0 0 0 8px rgba(255,255,255,.03), 0 0 90px rgba(111,90,236,.75), 0 0 160px rgba(235,90,149,.35), inset 0 1px 0 rgba(255,255,255,.1); }
.t2 .t2-header.t2-scrolled::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--dc-grad-brand); opacity: .7; }

/* palette rows: coloured selection bar */
.t2 .t2-p-item.t2-sel { background: linear-gradient(90deg, rgba(111, 90, 236, .28), rgba(111, 90, 236, .06)); box-shadow: inset 2px 0 0 var(--dc-primary); }

/* ---------- Keycaps: each key carries its own brand colour ---------- */
.t2 .t2-keys .t2-key:nth-child(8n+1) { --kc: #6F5AEC; }
.t2 .t2-keys .t2-key:nth-child(8n+2) { --kc: #EB5A95; }
.t2 .t2-keys .t2-key:nth-child(8n+3) { --kc: #00BBFF; }
.t2 .t2-keys .t2-key:nth-child(8n+4) { --kc: #FF9D4E; }
.t2 .t2-keys .t2-key:nth-child(8n+5) { --kc: #00B8AF; }
.t2 .t2-keys .t2-key:nth-child(8n+6) { --kc: #BC3FDC; }
.t2 .t2-keys .t2-key:nth-child(8n+7) { --kc: #ED41A4; }
.t2 .t2-keys .t2-key:nth-child(8n+8) { --kc: #6F5AEC; }
.t2 .t2-key .t2-legend img {
  width: 48px; height: 48px; padding: 11px; border-radius: var(--r-card); opacity: 1; filter: none;
  background: color-mix(in srgb, var(--kc, #6F5AEC) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--kc, #6F5AEC) 30%, #fff);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--kc, #6F5AEC) 30%, transparent);
}
.t2 .t2-key::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--kc, #6F5AEC) 35%, transparent), transparent 60%); }
.t2 .t2-key:hover { border-color: color-mix(in srgb, var(--kc, #6F5AEC) 60%, transparent); }
.t2 .t2-key::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--kc, var(--dc-primary)); opacity: .9; box-shadow: 0 0 16px var(--kc, var(--dc-primary));
}
.t2 .t2-key.t2-accent::after { display: none; }
.t2 .t2-key.t2-accent .t2-legend img { background: rgba(255, 255, 255, .95); border-color: transparent; box-shadow: 0 8px 20px rgba(0,0,0,.18); }

/* light keycaps */
.t2 .t2-light .t2-key {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F5FD 100%);
  border-color: #E4E1F6; color: var(--txt);
  box-shadow: 0 6px 0 #DCD8F5, 0 14px 30px rgba(111, 90, 236, .12), inset 0 1px 0 #fff;
}
.t2 .t2-light .t2-key:active, .t2 .t2-light .t2-key.t2-pressed { box-shadow: 0 1px 0 #DCD8F5, 0 4px 10px rgba(111, 90, 236, .12), inset 0 1px 0 #fff; }
.t2 .t2-light .t2-key.t2-accent { color: #fff; background: linear-gradient(180deg, #7B67F0 0%, #5D49DE 100%); border-color: transparent; box-shadow: 0 6px 0 #3A2AA8, 0 16px 40px rgba(111, 90, 236, .45), inset 0 1px 0 rgba(255,255,255,.3); }
.t2 .t2-light .t2-key.t2-accent p { color: rgba(255, 255, 255, .85); }
.t2 .t2-light .t2-key.t2-accent kbd { background: rgba(0, 0, 0, .18); color: #fff; border-color: rgba(255,255,255,.25); box-shadow: none; }
.t2 .t2-light .t2-keys-hint { color: var(--txt-3); }

/* ---------- Template store cards ---------- */
.t2 .t2-ext { --ec: #6F5AEC; }
.t2 .t2-ext[data-cat="business"] { --ec: #6F5AEC; }
.t2 .t2-ext[data-cat="technology"] { --ec: #00BBFF; }
.t2 .t2-ext[data-cat="healthcare"] { --ec: #00B8AF; }
.t2 .t2-ext[data-cat="realestate"] { --ec: #FF9D4E; }
.t2 .t2-ext[data-cat="ecommerce"] { --ec: #EB5A95; }
.t2 .t2-ext[data-cat="government"] { --ec: #BC3FDC; }
.t2 .t2-ext { position: relative; }
.t2 .t2-ext::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ec); opacity: 0; transition: opacity .25s; }
.t2 .t2-ext:hover { border-color: color-mix(in srgb, var(--ec) 55%, transparent); box-shadow: 0 20px 50px color-mix(in srgb, var(--ec) 25%, transparent); }
.t2 .t2-ext:hover::after { opacity: 1; }
.t2 .t2-ext .t2-info .t2-dot { background: var(--ec) !important; color: #fff !important; }
.t2 .t2-light .t2-ext { box-shadow: 0 4px 18px rgba(47, 43, 61, .08); }
.t2 .t2-light .t2-ext .t2-shot { background: #F4F3FB; }
.t2 .t2-tabs button.t2-active { background: var(--dc-grad-brand); }

/* ---------- Workflow (light) ---------- */
.t2 .t2-light .t2-flow-item.t2-active { background: #fff; border-color: rgba(111, 90, 236, .35); box-shadow: 0 10px 30px rgba(111, 90, 236, .12), inset 3px 0 0 var(--dc-primary); }
.t2 .t2-light .t2-flow-item.t2-active .t2-n { color: var(--dc-primary-txt); }
.t2 .t2-flow-item .t2-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; padding: 0; border: 1px solid var(--line-2); }
.t2 .t2-flow-item.t2-active .t2-n { background: var(--dc-primary); color: #fff !important; border-color: transparent; box-shadow: var(--sh-btn); }
.t2 .t2-light .t2-terminal { box-shadow: 0 40px 80px rgba(47, 43, 61, .25); }

/* ---------- Pricing ---------- */
.t2 .t2-light .t2-plan { box-shadow: 0 4px 18px rgba(47, 43, 61, .1); }
.t2 .t2-light .t2-plan h3 { color: var(--dc-primary); }
.t2 .t2-light .t2-plan.t2-popular { background: linear-gradient(#fff, #fff) padding-box, var(--dc-grad-brand) border-box; border: 2px solid transparent; box-shadow: 0 24px 60px rgba(237, 65, 164, .18); }
.t2 .t2-light .t2-plan.t2-popular::before { display: none; }
.t2 .t2-light .t2-plan.t2-enterprise { box-shadow: 0 24px 60px rgba(111, 90, 236, .35); }
.t2 .t2-light .t2-plan.t2-enterprise h3 { color: #fff; }
.t2 .t2-plan.t2-enterprise { background: linear-gradient(160deg, #7B67F0, #5D49DE 70%); }
.t2 .t2-light .t2-plan .t2-renew, .t2 .t2-light .t2-plan .t2-setup, .t2 .t2-light .t2-plan h4 { color: var(--txt-3); }
.t2 .t2-light .t2-plan.t2-enterprise .t2-renew, .t2 .t2-light .t2-plan.t2-enterprise .t2-setup, .t2 .t2-light .t2-plan.t2-enterprise h4 { color: rgba(255,255,255,.75); }
.t2 .t2-switch button.t2-active { background: var(--dc-primary); }

/* ---------- Windows / ticks ---------- */
.t2 .t2-window .t2-bar i:nth-child(1) { background: #EB5A95; }
.t2 .t2-window .t2-bar i:nth-child(2) { background: #FF9D4E; }
.t2 .t2-window .t2-bar i:nth-child(3) { background: #00B8AF; }
.t2 .t2-light .t2-window { background: #fff; box-shadow: 0 40px 80px rgba(47, 43, 61, .18); }

/* ---------- Impact (dark) ---------- */
.t2 .t2-impact-list button.t2-active { box-shadow: var(--sh-inset), 0 0 30px rgba(235, 90, 149, .25); }
.t2 .t2-impact-view .t2-tags span { border-color: rgba(235, 90, 149, .35); background: rgba(235, 90, 149, .1); color: #F6A6C7; }

/* ---------- Foundation cells: solid colour icon tiles ---------- */
.t2 .t2-cell .t2-ic { background: currentColor; border: 0; }
.t2 .t2-cell .t2-ic svg { stroke: #fff; }
.t2 .t2-cell::before { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 90, 236, .1), transparent 60%); }
.t2 .t2-light .t2-cell:hover { background: #FBFAFF; }
.t2 .t2-light .t2-cell .t2-ic { box-shadow: 0 8px 20px color-mix(in srgb, currentColor 35%, transparent); }

/* ---------- Cards / quotes on light ---------- */
.t2 .t2-light .t2-card { box-shadow: 0 4px 18px rgba(47, 43, 61, .08); }
.t2 .t2-light .t2-card:hover { border-color: rgba(111, 90, 236, .35); box-shadow: 0 18px 40px rgba(111, 90, 236, .12); }
.t2 .t2-light .t2-quote .t2-av { color: #fff; }
.t2 .t2-light .t2-compare th { color: var(--dc-primary); background: var(--dc-primary-soft); }
.t2 .t2-light .t2-compare td { color: var(--txt); }
.t2 .t2-light .t2-compare .t2-y { color: var(--dc-primary); font-weight: 700; }
.t2 .t2-light .t2-table-wrap { box-shadow: 0 4px 18px rgba(47, 43, 61, .08); }
.t2 .t2-light .t2-faq a { color: var(--dc-primary-txt); }
.t2 .t2-light .t2-faq details[open] summary::after { color: var(--dc-primary); }
.t2 .t2-light .t2-legal-nav a:hover { color: var(--dc-primary-txt); }
.t2 .t2-light .t2-post .t2-cat { color: var(--dc-pink); }
.t2 .t2-light .t2-post, .t2 .t2-light .t2-post-feature { box-shadow: 0 4px 18px rgba(47, 43, 61, .08); }
.t2 .t2-light .t2-pager button.t2-active { color: #fff; }
.t2 .t2-light .t2-filter-input { background: #fff; }
.t2 .t2-light .t2-filter-input input { color: var(--txt); }

/* ---------- CTA becomes a full brand-gradient card ---------- */
.t2 .t2-cta { padding: 120px 0; }
.t2 .t2-cta::before { display: none; }
.t2 .t2-cta .t2-container {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 1160px; padding: 90px 24px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #6F5AEC 0%, #8A4FE0 40%, #BC3FDC 65%, #EB5A95 100%);
  box-shadow: 0 40px 100px rgba(111, 90, 236, .45);
}
.t2 .t2-cta .t2-container::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%); mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
}
.t2 .t2-cta .t2-rings { z-index: 0; }
.t2 .t2-cta .t2-rings i { border-color: rgba(255, 255, 255, .14); }
.t2 .t2-cta .t2-h2 .t2-grad { background: linear-gradient(90deg, #FDCD71, #FFFFFF); -webkit-background-clip: text; background-clip: text; }
.t2 .t2-cta .t2-lead { color: rgba(255, 255, 255, .85); }
.t2 .t2-cta .t2-hero-logo { background: #fff; box-shadow: 0 0 0 8px rgba(255,255,255,.15), 0 20px 60px rgba(0,0,0,.25); animation: none; }
.t2 .t2-cta .t2-btn-primary { background: #fff; color: var(--dc-primary-txt); box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.t2 .t2-cta .t2-btn-primary:hover { background: var(--dc-primary-soft); }
.t2 .t2-cta .t2-btn-ghost { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); }
.t2 .t2-cta .t2-btn-ghost:hover { background: rgba(255,255,255,.2); }

/* ---------- Footer ---------- */
.t2 .t2-footer { position: relative; }
.t2 .t2-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--dc-grad-brand); }
.t2 .t2-footer h4 { color: #fff; }
.t2 .t2-footer a:hover { color: #B5A9F7; }

/* ---------- Inner page heroes: colour too ---------- */
.t2 .t2-page-hero::before {
  background:
    radial-gradient(closest-side, rgba(111, 90, 236, .45), transparent),
    radial-gradient(360px 260px at 25% 70%, rgba(0, 187, 255, .2), transparent 70%),
    radial-gradient(380px 280px at 78% 60%, rgba(235, 90, 149, .28), transparent 70%);
}

@media (max-width: 560px) {
  .t2 .t2-cta .t2-container { padding: 60px 20px; border-radius: 24px; }
}
.t2 .t2-cta .t2-container { width: calc(100% - 32px); }


/* ===== from theme-2/creative.css ===== */
/* =========================================================
   Theme 2 "Command" — CREATIVE layer
   Bold layouts, colour blocks and hover play.
   Brand colours / logo / font / radii stay Dotcom's.
   ========================================================= */

/* ---------- Custom cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  .t2.t2-has-cursor, .t2.t2-has-cursor a, .t2.t2-has-cursor button { cursor: none; }
  .t2.t2-has-cursor input { cursor: text; }
}
.t2 .t2-cur-dot, .t2 .t2-cur-ring { position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); }
.t2 .t2-cur-dot { width: 8px; height: 8px; background: #fff; mix-blend-mode: difference; }
.t2 .t2-cur-ring {
  width: 38px; height: 38px; border: 1.5px solid rgba(111, 90, 236, .9);
  transition: width .25s, height .25s, background .25s, border-color .25s;
}
.t2 .t2-cur-ring.t2-hover { width: 70px; height: 70px; background: rgba(235, 90, 149, .18); border-color: var(--dc-pink); }
.t2 .t2-cur-ring.t2-down { width: 26px; height: 26px; }

/* ---------- Floating "island" header ---------- */
.t2 .t2-header { top: 14px; left: 50%; right: auto; transform: translateX(-50%); width: min(980px, calc(100% - 24px)); border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.1); background: rgba(12, 13, 16, .55); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); transition: width .4s cubic-bezier(.6,.2,.2,1), background .3s, box-shadow .3s; }
.t2 .t2-header .t2-container { height: 58px; padding: 0 10px 0 22px; max-width: none; }
.t2 .t2-header.t2-scrolled { width: min(860px, calc(100% - 24px)); background: rgba(12, 13, 16, .82); box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(111,90,236,.25); border-color: rgba(255,255,255,.1); }
.t2 .t2-header.t2-scrolled::after { display: none; }
.t2 .t2-header .t2-btn-primary { border-radius: var(--r-pill); }
.t2 .t2-nav a { border-radius: var(--r-pill); }
.t2 .t2-nav a.t2-active { background: var(--dc-primary); color: #fff; }
@media (max-width: 860px) { .t2 .t2-header.t2-open .t2-nav { top: 66px; border-radius: 20px; border: 1px solid var(--line-2); } }

/* ---------- Mesh hero ---------- */
.t2 .t2-c-hero { position: relative; min-height: 100vh; padding: 150px 0 90px; overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.t2 .t2-mesh { position: absolute; inset: -20%; z-index: -2; filter: blur(90px) saturate(140%); opacity: .85; }
.t2 .t2-mesh i { position: absolute; border-radius: 50%; animation: t2-drift 18s ease-in-out infinite alternate; }
.t2 .t2-mesh i:nth-child(1) { width: 46vw; height: 46vw; left: 8%; top: 6%; background: #6F5AEC; }
.t2 .t2-mesh i:nth-child(2) { width: 34vw; height: 34vw; right: 6%; top: 18%; background: #EB5A95; animation-duration: 22s; animation-delay: -6s; }
.t2 .t2-mesh i:nth-child(3) { width: 30vw; height: 30vw; left: 30%; bottom: 0; background: #00BBFF; opacity: .55; animation-duration: 26s; animation-delay: -12s; }
.t2 .t2-mesh i:nth-child(4) { width: 22vw; height: 22vw; right: 24%; bottom: 8%; background: #FF9D4E; opacity: .6; animation-duration: 20s; animation-delay: -3s; }
@keyframes t2-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, -4vw) scale(1.15); } 100% { transform: translate(-5vw, 5vw) scale(.9); } }
.t2 .t2-c-hero::after { /* vignette + grain */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(7,8,10,.85) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
.t2 .t2-c-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
/* max 112px (was 124px): at 1440px+ the hero column is 622px wide and "Websites" ran out of its white chip */
.t2 .t2-mega { font-size: clamp(54px, 8.4vw, 112px); line-height: .92; font-weight: 700; letter-spacing: -.055em; margin: 22px 0 28px; }
.t2 .t2-mega .t2-chip {
  display: inline-flex; align-items: center; gap: .18em; padding: .04em .28em .08em .14em; border-radius: .26em;
  background: #fff; color: #07080A; transform: rotate(-3deg); box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transition: transform .4s cubic-bezier(.3,.7,.4,1.5);
}
.t2 .t2-mega .t2-chip img { width: .78em; height: .78em; }
.t2 .t2-mega .t2-chip:hover { transform: rotate(3deg) scale(1.04); }
.t2 .t2-mega .t2-and { font-weight: 300; font-style: italic; letter-spacing: -.03em; color: rgba(255,255,255,.75); }
.t2 .t2-mega .t2-outline { color: transparent; -webkit-text-stroke: 2px #fff; transition: color .4s; }
.t2 .t2-mega .t2-outline:hover { color: #fff; -webkit-text-stroke-color: transparent; background: var(--dc-grad-sunset); -webkit-background-clip: text; background-clip: text; }
.t2 .t2-c-hero .t2-lead { max-width: 520px; color: rgba(255,255,255,.8); }
.t2 .t2-c-hero .t2-hero-actions { justify-content: flex-start; }
.t2 .t2-c-hero .t2-hero-meta { text-align: left; color: rgba(255,255,255,.6); }
.t2 .t2-stack { position: relative; height: 520px; perspective: 1400px; }
.t2 .t2-stack > * { position: absolute; transition: transform .2s ease-out; will-change: transform; }
.t2 .t2-stack .t2-palette { width: 440px; right: 0; top: 70px; z-index: 3; }
.t2 .t2-stack .t2-s-card {
  border-radius: var(--r-lg); background: rgba(255,255,255,.95); color: #0B0B12; padding: 16px 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,.4); display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600;
}
.t2 .t2-stack .t2-s-card small { display: block; font-weight: 400; color: #6B7280; font-size: 12px; }
.t2 .t2-stack .t2-s-card .t2-dot { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 18px; }
.t2 .t2-stack .t2-s1 { left: 0; top: 0; z-index: 4; }
.t2 .t2-stack .t2-s2 { right: -10px; bottom: 30px; z-index: 4; }
.t2 .t2-stack .t2-s3 { left: 20px; bottom: 90px; z-index: 2; width: 300px; padding: 0; overflow: hidden; }
.t2 .t2-stack .t2-s3 img { width: 100%; border-radius: var(--r-lg); }
.t2 .t2-scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 12px; letter-spacing: .2em; color: rgba(255,255,255,.55); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.t2 .t2-scroll-cue::after { content: ""; width: 1px; height: 40px; background: linear-gradient(#fff, transparent); animation: t2-cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes t2-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Crossing bands ---------- */
.t2 .t2-xband { position: relative; height: 230px; overflow: hidden; margin: -40px 0 0; z-index: 2; }
.t2 .t2-band { position: absolute; left: -5%; right: -5%; padding: 20px 0; display: flex; overflow: hidden; }
.t2 .t2-band .t2-track { display: flex; align-items: center; gap: 46px; padding-right: 46px; flex: none; animation: t2-slide 30s linear infinite; }
.t2 .t2-band.t2-b1 { top: 40px; transform: rotate(-4deg); background: var(--dc-grad-brand); box-shadow: 0 20px 50px rgba(237,65,164,.35); z-index: 2; }
.t2 .t2-band.t2-b1 .t2-track span { font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: #fff; text-transform: uppercase; white-space: nowrap; }
.t2 .t2-band.t2-b1 .t2-track i { font-style: normal; font-size: 26px; color: #FDCD71; }
.t2 .t2-band.t2-b2 { top: 110px; transform: rotate(3deg); background: #0C0D10; border-block: 1px solid rgba(255,255,255,.1); }
.t2 .t2-band.t2-b2 .t2-track { animation-direction: reverse; animation-duration: 40s; gap: 60px; }
.t2 .t2-band.t2-b2 img { height: 30px; width: auto; opacity: .7; filter: grayscale(1) brightness(2.2); transition: opacity .2s, filter .2s; }
.t2 .t2-band.t2-b2 img:hover { opacity: 1; filter: none; }
.t2 .t2-xband:hover .t2-track { animation-play-state: paused; }

/* ---------- Keyboard ---------- */
.t2 .t2-kb-section { background: #F0EEFD; color: #0B0B12; padding: 140px 0; position: relative; overflow: hidden; }
.t2 .t2-kb-section .t2-h2 { color: #0B0B12; }
.t2 .t2-kb-section .t2-h2 .t2-dim { color: #9CA3AF; }
.t2 .t2-kb-section .t2-lead { color: #495567; }
.t2 .t2-kb {
  max-width: 980px; margin: 0 auto; padding: 26px; border-radius: 30px; position: relative;
  background: linear-gradient(180deg, #2A2B33 0%, #15161B 100%);
  box-shadow: 0 2px 0 #3A3B44 inset, 0 50px 100px rgba(47, 43, 61, .45), 0 0 0 1px #0B0C10;
}
.t2 .t2-kb::before { /* RGB underglow */
  content: ""; position: absolute; inset: 30px 20px -30px; z-index: -1; border-radius: 40px; filter: blur(40px);
  background: linear-gradient(90deg, #6F5AEC, #EB5A95, #FF9D4E, #00BBFF, #6F5AEC); background-size: 200% 100%;
  animation: t2-rgb 6s linear infinite; opacity: .8;
}
@keyframes t2-rgb { to { background-position: 200% 0; } }
.t2 .t2-kb-screen {
  height: 116px; margin-bottom: 22px; border-radius: 16px; padding: 18px 24px; position: relative; overflow: hidden;
  background: #0A120F; border: 1px solid #000; box-shadow: inset 0 0 30px rgba(0,0,0,.8);
  font-family: var(--mono); color: #8CF2C6; display: flex; flex-direction: column; justify-content: center;
}
.t2 .t2-kb-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.25) 2px 3px); pointer-events: none; }
.t2 .t2-kb-screen .t2-t { font-size: 22px; font-weight: 500; color: var(--scr, #8CF2C6); text-shadow: 0 0 12px var(--scr, #8CF2C6); }
.t2 .t2-kb-screen .t2-t::after { content: "▌"; animation: t2-blink 1s steps(1) infinite; margin-left: 4px; }
.t2 .t2-kb-screen .t2-d { font-size: 14px; color: rgba(255,255,255,.7); margin-top: 8px; }
.t2 .t2-kb-row { display: flex; gap: 12px; margin-bottom: 12px; }
.t2 .t2-kb-row.t2-r2 { padding-left: 52px; }
.t2 .t2-kb-row.t2-r3 { padding-left: 104px; padding-right: 104px; margin-bottom: 0; }
.t2 .t2-kk {
  --kc: #6F5AEC; flex: 1; aspect-ratio: 1 / .82; border-radius: 14px; position: relative; text-align: left;
  padding: 14px; display: flex; flex-direction: column; justify-content: space-between; color: #E5E7EB;
  background: linear-gradient(180deg, #33343D 0%, #23242B 100%);
  box-shadow: 0 6px 0 #0E0F13, 0 8px 16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .1s, box-shadow .1s, background .3s, color .3s;
}
.t2 .t2-kk .t2-top { display: flex; justify-content: space-between; align-items: flex-start; }
.t2 .t2-kk .t2-top b { font-family: var(--mono); font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55); transition: color .3s; }
.t2 .t2-kk img { width: 26px; height: 26px; filter: brightness(0) invert(1); opacity: .75; transition: opacity .3s, transform .3s; }
.t2 .t2-kk h3 { font-size: 13px; font-weight: 600; line-height: 1.25; }
.t2 .t2-kk p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.t2 .t2-kk::after { /* backlight */
  content: ""; position: absolute; inset: -2px; border-radius: 16px; z-index: -1; opacity: 0; transition: opacity .25s;
  box-shadow: 0 0 24px 4px var(--kc), 0 0 60px 10px color-mix(in srgb, var(--kc) 50%, transparent);
}
.t2 .t2-kk:hover, .t2 .t2-kk.t2-on { background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 85%, #fff) 0%, var(--kc) 100%); color: #fff; }
.t2 .t2-kk:hover::after, .t2 .t2-kk.t2-on::after { opacity: 1; }
.t2 .t2-kk:hover .t2-top b, .t2 .t2-kk.t2-on .t2-top b { color: #fff; }
.t2 .t2-kk:hover img, .t2 .t2-kk.t2-on img { opacity: 1; transform: scale(1.12) rotate(-6deg); }
.t2 .t2-kk:active, .t2 .t2-kk.t2-pressed { transform: translateY(5px); box-shadow: 0 1px 0 #0E0F13, 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); }
.t2 .t2-kk.t2-space { aspect-ratio: auto; height: 86px; flex-direction: row; align-items: center; gap: 16px; }
.t2 .t2-kk.t2-space h3 { font-size: 15px; }
.t2 .t2-kk.t2-space .t2-top { gap: 14px; align-items: center; }
.t2 .t2-kb-legend { display: flex; justify-content: center; gap: 22px; margin-top: 46px; color: #495567; font-size: 14px; flex-wrap: wrap; }
.t2 .t2-kb-legend kbd { background: #fff; border-color: #DCD8F5; color: #495567; box-shadow: inset 0 -1px 0 #DCD8F5; }

/* ---------- Deck (categories) ---------- */
.t2 .t2-deck-section { padding: 140px 0 120px; position: relative; overflow: hidden; }
.t2 .t2-deck-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.t2 .t2-deck-head .t2-lead { margin-top: 0; }
.t2 .t2-deck { position: relative; height: 420px; margin-top: 30px; }
.t2 .t2-deck .t2-dc {
  position: absolute; left: 50%; bottom: 0; width: 290px; margin-left: -145px; border-radius: var(--r-lg); overflow: hidden;
  background: #fff; color: #0B0B12; transform-origin: 50% 100%;
  transform: translateX(calc(var(--i) * 118px)) translateY(calc(var(--a) * 22px)) rotate(calc(var(--i) * 6deg));
  box-shadow: 0 30px 60px rgba(0,0,0,.5); transition: transform .5s cubic-bezier(.3,.7,.3,1), box-shadow .3s; z-index: calc(10 - var(--a, 0));
}
.t2 .t2-deck .t2-dc img { aspect-ratio: 16/11; width: 100%; object-fit: cover; object-position: top; }
.t2 .t2-deck .t2-dc .t2-cap { padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.t2 .t2-deck .t2-dc .t2-cap span { font-weight: 400; color: #6B7280; margin-left: auto; font-size: 12px; }
.t2 .t2-deck .t2-dc .t2-cap i { width: 10px; height: 10px; border-radius: 50%; background: var(--ec, #6F5AEC); }
.t2 .t2-deck:hover .t2-dc { transform: translateX(calc(var(--i) * 150px)) translateY(calc(var(--a) * 26px)) rotate(calc(var(--i) * 8deg)); }
.t2 .t2-deck .t2-dc:hover { transform: translateX(calc(var(--i) * 150px)) translateY(-60px) rotate(0deg) scale(1.15) !important; z-index: 20; box-shadow: 0 40px 80px color-mix(in srgb, var(--ec, #6F5AEC) 50%, transparent); }
.t2 .t2-deck-foot { display: flex; justify-content: center; gap: 12px; margin-top: 40px; position: relative; z-index: 30; }
.t2 .t2-stickers { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.t2 .t2-sticker { padding: 8px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: #fff; transform: rotate(var(--r, -3deg)); transition: transform .3s cubic-bezier(.3,.7,.4,1.5); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.t2 .t2-sticker:hover { transform: rotate(0) scale(1.12); }

/* ---------- Path (steps) ---------- */
.t2 .t2-path-section { background: #fff; color: #0B0B12; padding: 140px 0; position: relative; overflow: hidden; }
.t2 .t2-path-section .t2-h2 { color: #0B0B12; }
.t2 .t2-path-section .t2-lead { color: #495567; }
.t2 .t2-path { position: relative; max-width: 1000px; margin: 0 auto; }
.t2 .t2-path .t2-rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #EEECFB; border-radius: 4px; }
.t2 .t2-path .t2-rail i { position: absolute; left: 0; top: 0; width: 100%; height: var(--p, 0%); border-radius: 4px; background: linear-gradient(#6F5AEC, #EB5A95, #FF9D4E); box-shadow: 0 0 20px rgba(235,90,149,.5); }
.t2 .t2-pstep { position: relative; width: 50%; padding: 0 70px 70px 0; }
.t2 .t2-pstep:nth-child(odd of .t2-pstep) { margin-left: 50%; padding: 0 0 70px 70px; }
.t2 .t2-pstep .t2-node {
  position: absolute; top: 18px; right: -22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 3px solid #EEECFB; font-weight: 700; font-size: 14px; color: #9CA3AF; z-index: 2; transition: .4s;
}
.t2 .t2-pstep:nth-child(odd of .t2-pstep) .t2-node { right: auto; left: -22px; }
.t2 .t2-pstep.t2-lit .t2-node { background: var(--sc); border-color: #fff; color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--sc) 25%, transparent), 0 10px 24px color-mix(in srgb, var(--sc) 50%, transparent); }
.t2 .t2-pcard {
  border-radius: 22px; padding: 28px 30px; background: #F7F6FE; border: 1px solid #ECEAFB; position: relative; overflow: hidden;
  transform: rotate(var(--rot, -1.5deg)); transition: transform .45s cubic-bezier(.3,.7,.4,1.5), background .35s, color .35s, box-shadow .35s;
}
.t2 .t2-pstep:nth-child(odd of .t2-pstep) .t2-pcard { --rot: 1.5deg; }
.t2 .t2-pcard .t2-big { position: absolute; right: 18px; top: -10px; font-size: 110px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--sc) 35%, transparent); transition: .35s; }
.t2 .t2-pcard h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; position: relative; }
.t2 .t2-pcard p { color: #495567; position: relative; transition: color .35s; }
.t2 .t2-pstep:hover .t2-pcard { transform: rotate(0) scale(1.03); background: var(--sc); color: #fff; box-shadow: 0 30px 60px color-mix(in srgb, var(--sc) 40%, transparent); }
.t2 .t2-pstep:hover .t2-pcard p { color: rgba(255,255,255,.85); }
.t2 .t2-pstep:hover .t2-pcard .t2-big { -webkit-text-stroke-color: rgba(255,255,255,.5); transform: translateY(10px) rotate(-8deg); }

/* ---------- Ticket pricing ---------- */
.t2 .t2-ticket-zone { background: linear-gradient(160deg, #6F5AEC 0%, #5B45DA 55%, #4A33C4 100%); position: relative; overflow: hidden; isolation: isolate; color: #fff; }
.t2 .t2-ticket-zone::before {
  content: "PRICING"; position: absolute; left: 50%; top: 40px; transform: translateX(-50%); z-index: -1;
  font-size: clamp(90px, 18vw, 260px); font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.12); white-space: nowrap;
}
.t2 .t2-ticket-zone .t2-kicker { --k: #FDCD71; color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.t2 .t2-ticket-zone .t2-h2, .t2 .t2-ticket-zone .t2-h2 .t2-dim { color: #fff; }
.t2 .t2-ticket-zone .t2-h2 .t2-dim { opacity: .7; }
.t2 .t2-ticket-zone .t2-lead { color: rgba(255,255,255,.8); }
.t2 .t2-ticket-zone .t2-switch { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); box-shadow: none; }
.t2 .t2-ticket-zone .t2-switch button { color: rgba(255,255,255,.8); }
.t2 .t2-ticket-zone .t2-switch button.t2-active { background: #fff; color: var(--dc-primary-txt); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.t2 .t2-ticket-zone .t2-plans { gap: 22px; align-items: start; }
.t2 .t2-ticket-zone .t2-plan {
  --notch: #5B45DA;
  background: #fff; color: #0B0B12; border: 0; border-radius: 22px; padding: 28px 24px 24px;
  box-shadow: 0 24px 50px rgba(17, 10, 70, .35); transform: rotate(var(--tr, -2deg)) translateY(var(--ty, 0));
  transition: transform .45s cubic-bezier(.3,.7,.4,1.5), box-shadow .35s;
}
.t2 .t2-ticket-zone .t2-plan:nth-child(1) { --tr: -3deg; --ty: 14px; }
.t2 .t2-ticket-zone .t2-plan:nth-child(2) { --tr: 1.5deg; --ty: -10px; }
.t2 .t2-ticket-zone .t2-plan:nth-child(3) { --tr: -1.5deg; --ty: 6px; }
.t2 .t2-ticket-zone .t2-plan:nth-child(4) { --tr: 3deg; --ty: 20px; }
.t2 .t2-ticket-zone .t2-plan:hover { transform: rotate(0) translateY(-14px) scale(1.04); box-shadow: 0 40px 80px rgba(17, 10, 70, .5); z-index: 2; }
.t2 .t2-ticket-zone .t2-plan::before { display: none; }
.t2 .t2-ticket-zone .t2-plan h3 { color: var(--dc-primary); }
.t2 .t2-ticket-zone .t2-plan .t2-price { color: #0B0B12; }
.t2 .t2-ticket-zone .t2-plan .t2-desc, .t2 .t2-ticket-zone .t2-plan li { color: #495567; }
.t2 .t2-ticket-zone .t2-plan .t2-setup, .t2 .t2-ticket-zone .t2-plan .t2-renew, .t2 .t2-ticket-zone .t2-plan h4 { color: #6B7280; }
.t2 .t2-ticket-zone .t2-plan h4 { position: relative; border-top: 2px dashed #E4E1F6; padding-top: 22px; margin-top: 2px; }
.t2 .t2-ticket-zone .t2-plan h4::before, .t2 .t2-ticket-zone .t2-plan h4::after {
  content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--notch);
}
.t2 .t2-ticket-zone .t2-plan h4::before { left: -37px; }
.t2 .t2-ticket-zone .t2-plan h4::after { right: -37px; }
.t2 .t2-ticket-zone .t2-plan .t2-btn-soft { background: var(--dc-primary-soft); color: var(--dc-primary-txt); }
.t2 .t2-ticket-zone .t2-plan .t2-btn-soft:hover { background: var(--dc-primary); color: #fff; }
.t2 .t2-ticket-zone .t2-plan.t2-popular { background: linear-gradient(160deg, #EB5A95 0%, #BC3FDC 60%, #8A4FE0 100%); color: #fff; border: 0; }
.t2 .t2-ticket-zone .t2-plan.t2-popular h3, .t2 .t2-ticket-zone .t2-plan.t2-popular .t2-price, .t2 .t2-ticket-zone .t2-plan.t2-popular li { color: #fff; }
.t2 .t2-ticket-zone .t2-plan.t2-popular .t2-desc, .t2 .t2-ticket-zone .t2-plan.t2-popular .t2-setup, .t2 .t2-ticket-zone .t2-plan.t2-popular .t2-renew, .t2 .t2-ticket-zone .t2-plan.t2-popular h4 { color: rgba(255,255,255,.8); }
.t2 .t2-ticket-zone .t2-plan.t2-popular h4 { border-color: rgba(255,255,255,.35); }
.t2 .t2-ticket-zone .t2-plan.t2-popular li::before { color: #FDCD71; }
.t2 .t2-ticket-zone .t2-plan.t2-popular .t2-badge { background: #fff; color: var(--dc-pink); }
.t2 .t2-ticket-zone .t2-plan.t2-popular .t2-btn-soft { background: #fff; color: var(--dc-pink); }
.t2 .t2-ticket-zone .t2-plan.t2-enterprise { background: #0C0D10; color: #fff; border: 1px solid rgba(255,255,255,.12); }
.t2 .t2-ticket-zone .t2-plan.t2-enterprise h3, .t2 .t2-ticket-zone .t2-plan.t2-enterprise .t2-price, .t2 .t2-ticket-zone .t2-plan.t2-enterprise li { color: #fff; }
.t2 .t2-ticket-zone .t2-plan.t2-enterprise .t2-desc { color: rgba(255,255,255,.7); }
.t2 .t2-ticket-zone .t2-plan.t2-enterprise h4 { border-color: rgba(255,255,255,.15); }
.t2 .t2-ticket-zone .t2-plan.t2-enterprise li::before { color: var(--dc-pink); }
.t2 .t2-ticket-zone .t2-plan.t2-enterprise .t2-btn-white { background: var(--dc-grad-brand); color: #fff; }

/* ---------- Duo expanding panels ---------- */
.t2 .t2-duo { display: flex; gap: 16px; padding: 0 16px; min-height: 640px; }
.t2 .t2-duo .t2-panel {
  flex: 1; border-radius: 30px; position: relative; overflow: hidden; padding: 56px 50px; display: flex; flex-direction: column; color: #fff;
  transition: flex .6s cubic-bezier(.6,.2,.2,1); isolation: isolate;
}
.t2 .t2-duo .t2-panel:hover { flex: 1.7; }
.t2 .t2-duo .t2-panel.t2-pink { background: linear-gradient(150deg, #EB5A95 0%, #D1409A 50%, #BC3FDC 100%); }
.t2 .t2-duo .t2-panel.t2-purple { background: linear-gradient(150deg, #6F5AEC 0%, #5B45DA 60%, #3A2AA8 100%); }
.t2 .t2-duo .t2-panel .t2-h2 { font-size: 42px; max-width: 560px; }
.t2 .t2-duo .t2-panel .t2-lead { color: rgba(255,255,255,.85); max-width: 520px; margin: 16px 0 26px; font-size: 16px; }
.t2 .t2-duo .t2-panel .t2-more-txt { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s, opacity .4s; }
.t2 .t2-duo .t2-panel:hover .t2-more-txt { max-height: 300px; opacity: 1; }
.t2 .t2-duo .t2-panel .t2-ticks li { color: rgba(255,255,255,.92); }
.t2 .t2-duo .t2-panel .t2-ticks li::before { background-color: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.t2 .t2-duo .t2-panel .t2-shot { margin-top: auto; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.35); transform: translateY(30px) rotate(-2deg); transition: transform .6s cubic-bezier(.3,.7,.3,1); }
.t2 .t2-duo .t2-panel:hover .t2-shot { transform: translateY(0) rotate(0); }
.t2 .t2-duo .t2-panel .t2-bigword { position: absolute; right: -20px; top: 10px; z-index: -1; font-size: 180px; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: rgba(255,255,255,.08); }
.t2 .t2-duo .t2-panel .t2-btn { align-self: flex-start; }
.t2 .t2-duo .t2-btn-white { border-radius: var(--r-btn); }

/* ---------- Orbit (impact) ---------- */
.t2 .t2-orbit-section { position: relative; overflow: hidden; padding: 140px 0; background: radial-gradient(ellipse at center, #2A1E7A 0%, #120C3A 45%, #07080A 80%); isolation: isolate; }
.t2 .t2-orbit-section::before { /* stars */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 85% 70%, #fff, transparent), radial-gradient(1px 1px at 10% 85%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 45%, #fff, transparent);
  background-size: 300px 300px;
}
.t2 .t2-orbit { position: relative; width: 620px; height: 620px; margin: 0 auto; }
.t2 .t2-orbit .t2-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255,255,255,.18); }
.t2 .t2-orbit .t2-ring.t2-r2 { inset: 90px; border-style: solid; border-color: rgba(255,255,255,.08); }
.t2 .t2-orbit .t2-spin { position: absolute; inset: 0; animation: t2-orbit 50s linear infinite; }
.t2 .t2-orbit:hover .t2-spin, .t2 .t2-orbit:hover .t2-planet button { animation-play-state: paused; }
@keyframes t2-orbit { to { transform: rotate(360deg); } }
.t2 .t2-planet { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-310px); }
.t2 .t2-planet span {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); display: block;
}
.t2 .t2-planet button { animation: t2-counter 50s linear infinite; }
@keyframes t2-counter { from { rotate: 0deg; } to { rotate: -360deg; } }
.t2 .t2-planet button {
  white-space: nowrap; padding: 12px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: #fff;
  background: var(--pc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc) 25%, transparent), 0 14px 30px color-mix(in srgb, var(--pc) 50%, transparent);
  transition: transform .3s cubic-bezier(.3,.7,.4,1.5);
}
.t2 .t2-planet button:hover { transform: scale(1.12); }
.t2 .t2-planet button.t2-active { background: #fff; color: var(--pc); }
.t2 .t2-core {
  position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.14), rgba(255,255,255,.03) 60%); border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 50px;
  box-shadow: 0 0 80px rgba(111,90,236,.45), inset 0 0 60px rgba(235,90,149,.15);
}
.t2 .t2-core img { width: 44px; height: 44px; margin-bottom: 14px; }
.t2 .t2-core h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.t2 .t2-core p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.78); }
.t2 .t2-orbit-list { display: none; }

/* ---------- Flip cards (foundation) ---------- */
.t2 .t2-flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1600px; }
.t2 .t2-flip { height: 270px; position: relative; }
.t2 .t2-flip .t2-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,.7,.3,1); }
.t2 .t2-flip:hover .t2-in, .t2 .t2-flip:focus-within .t2-in { transform: rotateY(180deg); }
.t2 .t2-flip .t2-face { position: absolute; inset: 0; border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 30px; display: flex; flex-direction: column; overflow: hidden; }
.t2 .t2-flip .t2-front { background: var(--fc); color: #fff; justify-content: space-between; }
.t2 .t2-flip .t2-front svg { width: 56px; height: 56px; stroke: #fff; }
.t2 .t2-flip .t2-front h3 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.t2 .t2-flip .t2-front .t2-hint { font-size: 12px; opacity: .75; display: flex; align-items: center; gap: 6px; }
.t2 .t2-flip .t2-front::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; right: -60px; top: -60px; background: rgba(255,255,255,.14); }
.t2 .t2-flip .t2-back { background: #12131A; border: 1px solid color-mix(in srgb, var(--fc) 60%, transparent); transform: rotateY(180deg); justify-content: center; box-shadow: inset 0 0 60px color-mix(in srgb, var(--fc) 25%, transparent); }
.t2 .t2-flip .t2-back h3 { font-size: 18px; font-weight: 700; color: var(--fc); margin-bottom: 10px; }
.t2 .t2-flip .t2-back p { color: rgba(255,255,255,.8); line-height: 1.7; }
.t2 .t2-flip:nth-child(1) { --fc: #6F5AEC; } .t2 .t2-flip:nth-child(2) { --fc: #EB5A95; } .t2 .t2-flip:nth-child(3) { --fc: #00BBFF; }
.t2 .t2-flip:nth-child(4) { --fc: #FF9D4E; } .t2 .t2-flip:nth-child(5) { --fc: #00B8AF; } .t2 .t2-flip:nth-child(6) { --fc: #BC3FDC; }
.t2 .t2-flip:nth-child(even) { transform: translateY(30px); }

/* ---------- Giant CTA with spinning badge ---------- */
.t2 .t2-gcta { position: relative; padding: 150px 0 110px; overflow: hidden; isolation: isolate; }
.t2 .t2-gcta::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1100px; height: 600px; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(closest-side, rgba(111,90,236,.35), transparent); }
.t2 .t2-gcta-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.t2 .t2-gcta h2 { font-size: clamp(56px, 9vw, 140px); line-height: .9; font-weight: 800; letter-spacing: -.06em; }
.t2 .t2-gcta h2 .t2-o { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.85); }
.t2 .t2-gcta h2 .t2-g { background: var(--dc-grad-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t2 .t2-gcta p { color: var(--txt-2); font-size: 18px; margin-top: 26px; max-width: 520px; }
.t2 .t2-gcta .t2-actions { display: flex; gap: 12px; margin-top: 30px; }
.t2 .t2-badge-spin { position: relative; width: 220px; height: 220px; border-radius: 50%; display: grid; place-items: center; background: var(--dc-grad-brand); box-shadow: 0 30px 80px rgba(237,65,164,.45); transition: transform .4s cubic-bezier(.3,.7,.4,1.5); }
.t2 .t2-badge-spin svg.t2-txt { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); animation: t2-orbit 14s linear infinite; }
.t2 .t2-badge-spin:hover { transform: scale(1.08) rotate(-8deg); }
.t2 .t2-badge-spin:hover svg.t2-txt { animation-duration: 3s; }
.t2 .t2-badge-spin .t2-center { width: 92px; height: 92px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: transform .4s; }
.t2 .t2-badge-spin:hover .t2-center { transform: rotate(45deg); }
.t2 .t2-badge-spin .t2-center svg { width: 34px; height: 34px; stroke: var(--dc-primary); }

/* ---------- Footer wordmark ---------- */
/* 76px–290px (was 90px–330px): at 330px the hover letter-spacing made "dotcom" wider than the container,
   so it grew to the right only and the "m" was cut off */
.t2 .t2-wordmark { font-size: clamp(76px, 21vw, 290px); font-weight: 800; letter-spacing: -.07em; line-height: .78; text-align: center; margin-top: 50px; user-select: none;
  background: linear-gradient(180deg, rgba(111,90,236,.9), rgba(235,90,149,.25) 70%, transparent); -webkit-background-clip: text; background-clip: text; color: transparent; transition: letter-spacing .6s; }
.t2 .t2-wordmark:hover { letter-spacing: -.03em; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .t2 .t2-c-hero-grid { grid-template-columns: 1fr; }
  .t2 .t2-stack { height: 440px; max-width: 520px; }
  .t2 .t2-orbit { transform: scale(.8); margin: -60px auto; }
  .t2 .t2-ticket-zone .t2-plan { --tr: 0deg !important; --ty: 0 !important; }
}
@media (max-width: 860px) {
  .t2 .t2-deck-head, .t2 .t2-gcta-grid { grid-template-columns: 1fr; }
  .t2 .t2-stickers { justify-content: flex-start; }
  .t2 .t2-deck { height: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 4px 30px; }
  .t2 .t2-deck .t2-dc { position: relative; left: auto; margin: 0; flex: 0 0 260px; transform: none !important; scroll-snap-align: center; }
  .t2 .t2-kb-row.t2-r2, .t2 .t2-kb-row.t2-r3 { padding-left: 0; padding-right: 0; }
  .t2 .t2-kb-row { flex-wrap: wrap; }
  .t2 .t2-kk { flex: 1 1 calc(50% - 6px); aspect-ratio: auto; min-height: 96px; }
  .t2 .t2-path .t2-rail { left: 22px; }
  .t2 .t2-pstep, .t2 .t2-pstep:nth-child(odd of .t2-pstep) { width: 100%; margin-left: 0; padding: 0 0 40px 64px; }
  .t2 .t2-pstep .t2-node, .t2 .t2-pstep:nth-child(odd of .t2-pstep) .t2-node { left: 0; right: auto; }
  .t2 .t2-duo { flex-direction: column; }
  .t2 .t2-duo .t2-panel:hover { flex: 1; }
  .t2 .t2-duo .t2-panel .t2-more-txt { max-height: none; opacity: 1; }
  .t2 .t2-duo .t2-panel { padding: 40px 28px; }
  .t2 .t2-orbit { display: none; }
  .t2 .t2-orbit-list { display: grid; gap: 10px; margin-top: 30px; }
  .t2 .t2-orbit-list .t2-core-m { border-radius: 24px; padding: 28px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
  .t2 .t2-flip-grid { grid-template-columns: 1fr 1fr; }
  .t2 .t2-flip:nth-child(even) { transform: none; }
  .t2 .t2-badge-spin { width: 170px; height: 170px; }
}
@media (max-width: 560px) {
  .t2 .t2-flip-grid { grid-template-columns: 1fr; }
  .t2 .t2-stack .t2-palette { width: 100%; }
  .t2 .t2-stack .t2-s3 { display: none; }
  .t2 .t2-mega .t2-chip { transform: rotate(-2deg); }
  .t2 .t2-duo .t2-panel .t2-bigword { font-size: 110px; }
  .t2 .t2-ticket-zone .t2-plan h4::before { left: -37px; }
}
@media (prefers-reduced-motion: reduce) {
  .t2 .t2-mesh i, .t2 .t2-orbit .t2-spin, .t2 .t2-planet button, .t2 .t2-band .t2-track, .t2 .t2-kb::before, .t2 .t2-badge-spin svg.t2-txt { animation: none !important; }
}


/* ===== Next.js additions ===== */
/* Content stays visible without JS (crawlers, AI agents, no-JS users) */
.t2.t2-no-js .t2-reveal, .t2.t2-no-js .t2-split .t2-w > span { opacity: 1 !important; transform: none !important; filter: none !important; }
/* skip link for keyboard + screen-reader users */
.t2 .t2-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--r-btn); background: var(--dc-primary); color: #fff; font-weight: 600; transition: top .2s; }
.t2 .t2-skip:focus { top: 12px; }
.t2 :focus-visible { outline: 2px solid #A595F5; outline-offset: 3px; border-radius: 6px; }
.t2 .t2-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* next/image wrappers inherit the old img rules */
.t2 img { height: auto; }
.t2 .t2-ext .t2-shot img, .t2 .t2-deck .t2-dc img, .t2 .t2-flip img { height: 100%; }
.t2 .t2-breadcrumbs { display: flex; gap: 8px; justify-content: center; font-size: 13px; color: var(--txt-3); margin-bottom: 16px; }
.t2 .t2-breadcrumbs a:hover { color: #fff; }

/* active step title must stay dark on light sections */
.t2 .t2-light .t2-flow-item.t2-active h3 { color: var(--txt); }
/* template cards on a light section: the hover arrow was white on a white card */
.t2 .t2-light .t2-ext:hover .t2-info .t2-go { color: var(--dc-primary-txt); }
/* hover on a light section: keep the step title dark (the dark-section hover colour is white = invisible here) */
.t2 .t2-light .t2-flow-item:hover h3 { color: var(--txt); }

/* ===== Live-site parity additions ===== */
/* pricing: "Most Popular" badge, bdi prices, feature table */
.t2 .t2-plan .t2-most-popular { align-self: flex-start; margin-bottom: 10px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--dc-grad-brand); color: #fff; }
.t2 .t2-ticket-zone .t2-plan.t2-popular .t2-most-popular { background: #fff; color: var(--dc-pink); }
.t2 .t2-plan li b { font-weight: 800; }
.t2 .t2-plan-table { text-align: left; }
.t2 .t2-ticket-zone .t2-plan-table .t2-h2 { color: #fff; text-align: center; }
.t2 .t2-ticket-zone .t2-compare { background: #fff; color: #0B0B12; border-radius: 18px; overflow: hidden; }
.t2 .t2-ticket-zone .t2-compare th { background: var(--dc-primary-soft); color: var(--dc-primary-txt); }
.t2 .t2-ticket-zone .t2-compare th[scope="row"] { background: #fff; color: #0B0B12; }
.t2 .t2-ticket-zone .t2-compare td { color: #0B0B12; border-bottom: 1px solid #ECEAF6; }
.t2 .t2-ticket-zone .t2-compare .t2-y { color: var(--dc-primary); font-weight: 800; }
.t2 .t2-ticket-zone .t2-table-wrap { border: 0; background: transparent; }

/* homepage deck with all 16 live sites */
.t2 .t2-deck.t2-deck-16 { height: 400px; }
.t2 .t2-deck.t2-deck-16 .t2-dc { width: 240px; margin-left: -120px; transform: translateX(calc(var(--i) * 58px)) translateY(calc(var(--a) * 9px)) rotate(calc(var(--i) * 3deg)); }
.t2 .t2-deck.t2-deck-16:hover .t2-dc { transform: translateX(calc(var(--i) * 72px)) translateY(calc(var(--a) * 11px)) rotate(calc(var(--i) * 4deg)); }
.t2 .t2-deck.t2-deck-16 .t2-dc:hover { transform: translateX(calc(var(--i) * 72px)) translateY(-70px) rotate(0) scale(1.18) !important; }
.t2 .t2-deck .t2-dc .t2-cap { font-size: 12px; }

/* growth CTA + footer */
.t2 .t2-gcta p b { color: #fff; }
.t2 .t2-gcta .t2-actions li { display: inline-flex; }
.t2 .t2-footer-b2b { color: var(--txt-2); font-size: 15px; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.t2 .t2-footer address .t2-addr { display: flex; gap: 10px; align-items: flex-start; }
.t2 .t2-footer address .t2-addr img { flex: 0 0 22px; margin-top: 2px; }
.t2 .t2-footer .t2-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.t2 .t2-footer .t2-social a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); color: #fff; transition: background .2s, transform .2s; }
.t2 .t2-footer .t2-social a:hover { background: var(--dc-primary); transform: translateY(-2px); }
.t2 .t2-wa-float { position: fixed; left: 20px; bottom: 20px; z-index: 90; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #25D366; box-shadow: 0 10px 24px rgba(37, 211, 102, .4); transition: transform .2s; }
.t2 .t2-wa-float:hover { transform: scale(1.08); }

/* ecommerce: inline store icon, testimonials, site carousel */
.t2 .t2-key .t2-legend .t2-store-ic { width: 48px; height: 48px; border-radius: var(--r-card); box-shadow: 0 8px 20px rgba(188, 63, 220, .3); }
.t2 .t2-quote .t2-t-logo { height: 32px; width: auto; margin-bottom: 18px; object-fit: contain; }
.t2 .t2-quote .t2-t-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.t2 .t2-quote span { text-transform: none; letter-spacing: .04em; font-size: 11px; }
.t2 .t2-site-carousel { position: relative; }
.t2 .t2-sc-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 24px; scrollbar-width: none; }
.t2 .t2-sc-track::-webkit-scrollbar { display: none; }
.t2 .t2-sc-item { flex: 0 0 300px; scroll-snap-align: start; }
.t2 .t2-sc-arrows { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.t2 .t2-sc-arrows button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .2s; }
.t2 .t2-sc-arrows button:hover { transform: scale(1.08); }

/* impact tabs on small screens */
.t2 .t2-chip-tab { padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,.08); border: 1px solid var(--line-2); }
.t2 .t2-chip-tab.t2-active { background: var(--pc); border-color: transparent; }

/* blog */
.t2 .t2-blog-search { max-width: 420px; margin-bottom: 30px; }
.t2 .t2-pager a { min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--r-btn); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--txt-2); transition: .2s; }
.t2 .t2-pager a:hover { color: var(--dc-primary-txt); border-color: var(--dc-primary); }
.t2 .t2-pager a.t2-active { background: var(--dc-primary); border-color: var(--dc-primary); color: #fff; }
.t2 .t2-latest-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; scroll-snap-type: x mandatory; }
.t2 .t2-latest-row .t2-post { flex: 0 0 320px; scroll-snap-align: start; }

/* article pages */
.t2 .t2-article-hero { padding-bottom: 30px; }
.t2 .t2-article-title { font-size: clamp(32px, 4.6vw, 56px) !important; max-width: 980px; margin: 0 auto; }
.t2 .t2-article-cover { margin: 40px auto 0; max-width: 1100px; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.t2 .t2-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 60px; align-items: start; }
.t2 .t2-article-toc { position: sticky; top: 100px; padding: 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 18px rgba(47,43,61,.08); }
.t2 .t2-article-toc .t2-toc-title { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--txt-3); margin-bottom: 12px; }
.t2 .t2-article-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.t2 .t2-article-toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 14px; color: var(--txt-2); }
.t2 .t2-article-toc a:hover { background: var(--dc-primary-soft); color: var(--dc-primary-txt); }
.t2 .t2-prose { color: #2D3748; font-size: 17px; line-height: 1.8; }
.t2 .t2-prose section { scroll-margin-top: 100px; }
.t2 .t2-prose h2 { font-size: 30px; line-height: 1.25; font-weight: 700; color: #0B0B12; letter-spacing: -.02em; margin: 48px 0 16px; }
.t2 .t2-prose h3 { font-size: 22px; font-weight: 700; color: #0B0B12; margin: 32px 0 12px; }
.t2 .t2-prose h4 { font-size: 18px; font-weight: 700; color: #0B0B12; margin: 24px 0 10px; }
.t2 .t2-prose p { margin: 0 0 18px; }
.t2 .t2-prose ul, .t2 .t2-prose ol { margin: 0 0 18px; padding-left: 22px; }
.t2 .t2-prose li { margin-bottom: 8px; }
.t2 .t2-prose a { color: var(--dc-primary-txt); text-decoration: underline; text-underline-offset: 3px; }
.t2 .t2-prose img { display: block; max-width: 100%; height: auto; margin: 24px auto 6px; border-radius: 12px; }
.t2 .t2-prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; display: block; overflow-x: auto; }
.t2 .t2-prose th, .t2 .t2-prose td { border: 1px solid #E5E7EB; padding: 10px 12px; text-align: left; }
.t2 .t2-prose th { background: var(--dc-primary-soft); color: var(--dc-primary-txt); }
.t2 .t2-legal-body h2 { scroll-margin-top: 100px; }
.t2 .t2-legal-body a { color: var(--dc-primary-txt); }

@media (max-width: 960px) {
  .t2 .t2-article-grid { grid-template-columns: minmax(0, 1fr); }
  .t2 .t2-article-toc { position: static; order: -1; }
}
@media (max-width: 860px) {
  .t2 .t2-deck.t2-deck-16 { height: auto; }
  .t2 .t2-deck.t2-deck-16 .t2-dc { margin: 0; width: auto; flex: 0 0 240px; transform: none !important; }
}
.t2 .t2-article-date { color: var(--txt-3); font-size: 14px; margin-bottom: 10px; }
.t2 .t2-article-grid { grid-template-columns: 40px minmax(0, 1fr) 300px; gap: 40px; }
.t2 .t2-share-bar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; position: sticky; top: 110px; }
.t2 .t2-share-bar a { display: block; border-radius: 8px; overflow: hidden; transition: transform .2s; }
.t2 .t2-share-bar a:hover { transform: translateY(-2px); }
@media (max-width: 960px) {
  .t2 .t2-article-grid { grid-template-columns: minmax(0, 1fr); }
  .t2 .t2-share-bar { position: static; display: flex; order: 1; }
}


/* ===== rentech-website-next-v2 additions ===== */
/* style.css has a global "th { padding: 15px 12px !important }" (from .ups-table-1); keep the theme's padding */
.t2 .t2-compare th { padding: 16px 18px !important; }
.t2 .t2-prose th { padding: 10px 12px !important; }
/* Blog: search form, category chips, pager (same behaviour as the repo's PaginationModal), "no data" image */
.t2 .t2-blog-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.t2 .t2-blog-tools .t2-blog-search { margin-bottom: 0; }
.t2 .t2-blog-search button { display: grid; place-items: center; color: inherit; }
.t2 .t2-tabs a { padding: 8px 18px; border-radius: var(--r-pill); font-size: 14px; color: var(--txt-2); transition: .2s; }
.t2 .t2-tabs a:hover { color: var(--txt); }
.t2 .t2-tabs a.t2-active { background: var(--dc-grad-brand); color: #fff; box-shadow: var(--sh-btn); }
.t2 .t2-blog-tools .t2-tabs { margin-bottom: 0; justify-content: flex-start; }
.t2 .t2-pager { flex-wrap: wrap; }
.t2 .t2-pager span { min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--r-btn); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--txt-2); }
.t2 .t2-pager span.t2-active { background: var(--dc-primary); border-color: var(--dc-primary); color: #fff; }
.t2 .t2-pager .t2-pager-arrow { color: var(--dc-pink); }
.t2 .t2-pager .t2-pager-arrow.t2-is-disabled { opacity: .35; }
.t2 .t2-empty.t2-empty-img { display: block; padding: 40px 0; }
.t2 .t2-empty.t2-empty-img img { margin: 0 auto; max-width: 100%; height: auto; }
@media (max-width: 560px) {
  .t2 .t2-pager { gap: 4px; row-gap: 8px; }
  .t2 .t2-pager a, .t2 .t2-pager span { flex: 0 0 32px; min-width: 32px; width: 32px; height: 32px; padding: 0; font-size: 13px; }
  .t2 .t2-blog-tools .t2-tabs { width: 100%; }
}

/* Ecommerce: the heading inside the pricing box (live: DotcomPricingPlanModal) */
.t2 .t2-pricing-head { margin: 0 auto 40px; max-width: 640px; }
.t2 .t2-pricing-head h3 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.t2 .t2-pricing-head p { margin-top: 10px; color: rgba(255,255,255,.8); }
.t2 .t2-ticket-zone .t2-pricing-head .t2-dim { color: #fff; opacity: .7; }

/* Footer: the big "dotcom" wordmark (line-height .78) reaches up over the social buttons and took their
   clicks; keep the copyright + social row above it */
.t2 .t2-footer-bottom { position: relative; z-index: 1; }

/* Ecommerce: "Trusted by top companies" — the client logos are dark artwork, so on the dark page they were
   invisible; show the strip on white like the live site, logos in their own colours */
.t2 .t2-logos { background: #fff; padding: 40px 0 44px; }
.t2 .t2-logos p { color: #6B7280; }
.t2 .t2-logos p b { color: #0B0B12; }
.t2 .t2-logo-track img { opacity: .8; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.t2 .t2-logo-track img:hover { opacity: 1; filter: none; }

/* Data deletion page (/dotcom/data-deletion) */
.t2 .t2-dd { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.t2 .t2-dd-info h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 36px 0 14px; }
.t2 .t2-dd-info h2:first-child { margin-top: 0; }
.t2 .t2-dd-info p { color: var(--txt-2); line-height: 1.8; }
.t2 .t2-dd-info a { color: var(--dc-primary-txt); text-decoration: underline; text-underline-offset: 3px; }
.t2 .t2-dd-info .t2-ticks { margin-bottom: 0; }
.t2 .t2-dd-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; box-shadow: 0 24px 60px rgba(111, 90, 236, .12); }
.t2 .t2-dd-card h2 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 22px; }
.t2 .t2-dd-field { display: block; margin-bottom: 18px; }
.t2 .t2-dd-field > span { display: block; font-size: 14px; font-weight: 500; color: var(--txt); margin-bottom: 8px; }
.t2 .t2-dd-field > span b { color: var(--dc-pink); }
.t2 .t2-dd-field input, .t2 .t2-dd-field textarea { display: block; width: 100%; padding: 12px 14px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: #fff; color: var(--txt); font: inherit; font-size: 15px; outline: 0; transition: border-color .2s, box-shadow .2s; resize: vertical; }
.t2 .t2-dd-field input:focus, .t2 .t2-dd-field textarea:focus { border-color: rgba(111,90,236,.6); box-shadow: 0 0 0 4px rgba(111,90,236,.15); }
.t2 .t2-dd-field input[aria-invalid="true"], .t2 .t2-dd-field textarea[aria-invalid="true"] { border-color: var(--dc-pink); }
.t2 .t2-dd-field em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: #D63C7A; }
.t2 .t2-dd-error { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-btn); background: rgba(235,90,149,.1); color: #B5245F; font-size: 14px; }
.t2 .t2-dd-card .t2-btn-block { justify-content: center; margin-top: 6px; }
.t2 .t2-dd-card .t2-btn[disabled] { opacity: .6; cursor: progress; }
.t2 .t2-dd-done { text-align: center; padding: 20px 0; }
.t2 .t2-dd-done p { color: var(--txt-2); margin-bottom: 24px; }
.t2 .t2-dd-check { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff; background: var(--dc-primary); box-shadow: var(--sh-btn); }
@media (max-width: 860px) { .t2 .t2-dd { grid-template-columns: 1fr; gap: 36px; } .t2 .t2-dd-card { padding: 24px; } }

/* Article: related blogs */
.t2 .t2-related { margin-top: 70px; }
.t2 .t2-related .t2-h2 { font-size: 34px; margin-bottom: 28px; }

/* Template preview (/dotcom/templates/<slug>) — same layout as the repo's templates/[...slug].js */
.t2.t2-preview { min-height: 100vh; display: flex; flex-direction: column; }
.t2 .t2-preview-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 24px; background: rgba(12, 13, 16, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-2); }
.t2 .t2-preview-logo img { height: 30px; width: auto; }
.t2 .t2-preview-devices { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255,255,255,.04); }
.t2 .t2-preview-devices button { width: 46px; height: 38px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--txt-2); transition: background .2s, color .2s; }
.t2 .t2-preview-devices button svg { width: 22px; height: 22px; }
.t2 .t2-preview-devices button:hover { color: #fff; }
.t2 .t2-preview-devices button.t2-active { background: var(--dc-primary); color: #fff; box-shadow: var(--sh-btn); }
.t2 .t2-preview-stage { flex: 1; display: flex; justify-content: center; padding: 24px; }
.t2 .t2-preview-frame { display: flex; flex-direction: column; max-width: 100%; height: calc(100vh - 116px); border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 40px 80px rgba(0,0,0,.5); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.t2 .t2-preview-frame .t2-bar { display: flex; gap: 7px; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.t2 .t2-preview-frame .t2-bar i { width: 10px; height: 10px; border-radius: 50%; }
.t2 .t2-preview-frame .t2-bar i:nth-child(1) { background: #EB5A95; }
.t2 .t2-preview-frame .t2-bar i:nth-child(2) { background: #FF9D4E; }
.t2 .t2-preview-frame .t2-bar i:nth-child(3) { background: #00B8AF; }
.t2 .t2-preview-frame iframe { flex: 1; width: 100%; border: 0; display: block; }
@media (max-width: 991px) { .t2 .t2-preview-devices { display: none; } .t2 .t2-preview-bar { justify-content: center; } }