/* Tier pages (/services/foundation/, /services/the-os/): styles for the page body only.
   The header, footer, buttons and popups are the home page's own (the pages are built from index.html by
   tools/build_service_pages.py). Every class here is prefixed tp- so it never clashes with the home page. */
.tp { --btn-grad: linear-gradient(90deg, #D9CFFE 0%, #B3A8FA 45%, #8FB6FF 100%); --ink-2: #D6D6DE; --core: #7869F5; }
.tp h1, .tp h2, .tp h3 { color: var(--ink); letter-spacing: -.025em; }
.tp a:not(.btn) { color: var(--lavender); text-underline-offset: 3px; }
.tp a:not(.btn):hover { color: var(--ink); }
.tp .tp-hero { padding-top: clamp(28px, 3.5vw, 48px); }       /* the menu bar is sticky, so only a small lead-in is needed */
.tp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* read by screen readers only */

/* ---------- sections ---------- */
.tp-sec { padding: clamp(64px, 8vw, 112px) 0; position: relative; }
.tp-sec + .tp-sec::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1280px, 100% - 2 * var(--gutter)); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent); }
.tp-kicker { margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lavender); }
.tp-sec-h { margin: 0; max-width: 22ch; font-size: clamp(30px, 3.8vw, 48px); font-weight: 900; line-height: 1.08; }
.tp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.tp-sec-head p { margin: 0; max-width: 46ch; color: var(--muted); }

/* reveal on scroll */
.tp-rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.tp-rv.tp-in { opacity: 1; transform: none; }
.tp-rv[data-d="1"] { transition-delay: .08s; } .tp-rv[data-d="2"] { transition-delay: .16s; } .tp-rv[data-d="3"] { transition-delay: .24s; }
.tp-rv[data-d="4"] { transition-delay: .32s; } .tp-rv[data-d="5"] { transition-delay: .4s; }

/* ---------- 1 · hero ---------- */
.tp-hero { padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); }
.tp-hero .wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
/* breadcrumb: one segmented pill. A back link to Services, then the page you're on */
.tp-crumbs { display: inline-flex; align-items: stretch; margin: 0 0 28px; padding: 4px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  background: rgba(255,255,255,.03); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.tp .tp-crumbs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border-radius: 999px; color: var(--muted); text-decoration: none;
  transition: color .2s, background .2s; }
.tp .tp-crumbs a svg { transition: transform .25s var(--ease); }
.tp .tp-crumbs a:hover { color: var(--ink); background: rgba(196,181,253,.08); }
.tp .tp-crumbs a:hover svg { transform: translateX(-3px); }
.tp-crumbs [aria-current] { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px; color: #FFFFFF;
  background: linear-gradient(90deg, rgba(139,124,246,.45), rgba(92,156,255,.32)); box-shadow: 0 0 0 1px rgba(196,181,253,.35) inset; }
.tp-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.tp-hero-top .tp-kicker { margin: 0; }
/* "Most recommended": a dark pill with a gradient edge that light travels round, a lit star, and a sheen that passes now and then */
.tp-badge { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; overflow: hidden; isolation: isolate;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(90deg, rgba(139,124,246,.22), rgba(92,156,255,.10)); box-shadow: 0 0 0 1px rgba(196,181,253,.35) inset, 0 10px 26px -14px rgba(120,105,245,.9); }
.tp-badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--sa, 0deg), transparent 0deg 250deg, #C4B5FD 300deg, #5C9CFF 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: spOrbit 4s linear infinite; }
.tp-badge::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); animation: tpSheen 5s ease-in-out 1.2s infinite; }
@keyframes tpSheen { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.tp-badge-star { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #0F0F12; background: var(--btn-grad);
  box-shadow: 0 0 12px rgba(196,181,253,.6); }
.tp-badge-star svg { width: 11px; height: 11px; }
.tp-hero h1 { margin: 0; font-size: clamp(40px, 5.4vw, 74px); font-weight: 900; line-height: 1.02; letter-spacing: -.035em; }
/* headline: liquid fill. The letters sit as a fine outline; a wave of colour rises up inside them (white for the
   words, the brand gradient for the phrase), the surface rolling as it climbs. It holds full, drains, and fills again
   every 7 seconds. The outline copy is the real text; the filled copy is a masked duplicate added by script. */
.tp-hero h1 .tp-w { display: inline-block; }
.tp-hero h1 .tp-w.tp-g { padding-bottom: .08em; background-size: 220% 100%; animation: tpFlow 6s ease-in-out 2s infinite alternate; }
.tp-hero h1.tp-lq { position: relative; }
.tp-hero h1.tp-lq .tp-h1-in { display: block; }
.tp-hero h1.tp-lq > .tp-h1-in:not(.tp-lq-fill) { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px rgba(244,244,247,.28); }
.tp-hero h1.tp-lq > .tp-h1-in:not(.tp-lq-fill) .tp-g { background: none; -webkit-text-stroke-color: rgba(196,181,253,.45); animation: none; }
.tp-lq-fill { position: absolute; left: 0; top: 0; right: 0; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q25 90 50 100 T100 100 T150 100 T200 100 T250 100 T300 100 T350 100 T400 100 V300 H0Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 200% 300% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q25 90 50 100 T100 100 T150 100 T200 100 T250 100 T300 100 T350 100 T400 100 V300 H0Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 200% 300% repeat-x;
  animation: tpLiquid 7s cubic-bezier(.45, 0, .3, 1) .3s infinite both; }
@keyframes tpLiquid {
  0%        { -webkit-mask-position: 0% 0%;    mask-position: 0% 0%; }      /* empty: the wave sits under the letters */
  32%       { -webkit-mask-position: -140% 56%; mask-position: -140% 56%; }   /* risen just past the top, surface rolling */
  80%       { -webkit-mask-position: -260% 56%; mask-position: -260% 56%; }   /* full, still gently moving */
  100%      { -webkit-mask-position: -320% 0%;  mask-position: -320% 0%; }   /* drains */
}
@keyframes tpFlow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.tp-def { margin: 28px 0 0; max-width: 58ch; color: var(--muted); font-size: 18.5px; line-height: 1.7; }
.tp-def strong { color: var(--ink); font-weight: 700; }
.tp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.tp-trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.tp-trust li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2);
  background: rgba(255,255,255,.025); box-shadow: 0 0 0 1px var(--line) inset; }
.tp-trust svg { color: var(--lavender); flex: none; }

/* hero visual: a window, like the home page's architecture card */
.tp-vis { position: relative; border-radius: 22px; padding: 22px; background: radial-gradient(120% 70% at 0% 0%, rgba(139,124,246,.18), transparent 60%), #121119;
  box-shadow: 0 0 0 1px var(--line-strong) inset, 0 40px 80px -40px rgba(0,0,0,.95); }
.tp-vis::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--sa, 0deg), transparent 0deg 220deg, rgba(196,181,253,.7) 280deg, rgba(92,156,255,.6) 320deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: spOrbit 10s linear infinite; }
@property --sa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spOrbit { to { --sa: 360deg; } }
.tp-vis-bar { display: flex; align-items: center; gap: 7px; margin: -4px 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.tp-vis-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2E2D3A; }
.tp-vis-bar i:first-child { background: #8B7CF6; }
.tp-vis-bar span { margin-left: 10px; }
.tp-vis-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--faint); }
.tp-vis-foot b { color: var(--ink); font-weight: 700; }

/* Foundation visual: the 15-day build, deliverables lighting up one after another */
.tp-build { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tp-build li { position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.02); box-shadow: 0 0 0 1px var(--line) inset; font-size: 15px; font-weight: 500; color: var(--muted); }
.tp-build .tp-tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--line-strong) inset; color: transparent; transition: all .4s var(--ease); }
.tp-build .tp-day { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--faint); }
.tp-build li.tp-on { color: var(--ink); background: linear-gradient(90deg, rgba(139,124,246,.14), rgba(92,156,255,.03) 70%); box-shadow: inset 2px 0 0 #8B7CF6; }
.tp-build li.tp-on .tp-tick { color: #0F0F12; background: var(--btn-grad); box-shadow: none; }
.tp-build li.tp-on .tp-day { color: var(--lavender); }
.tp-meter { position: relative; height: 6px; margin-top: 16px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.tp-meter i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--grad); transition: width .6s var(--ease); }

/* The OS visual: the five layers running, one lit at a time */
.tp-layers { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tp-layers li { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; color: var(--muted);
  background: rgba(255,255,255,.02); box-shadow: 0 0 0 1px var(--line) inset; transition: background .45s var(--ease), box-shadow .45s, color .45s; }
.tp-layers b { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: var(--faint); transition: color .45s; }
.tp-layers .tp-st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.tp-layers .tp-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3A394A; transition: background .45s, box-shadow .45s; }
.tp-layers li.tp-on { color: var(--ink); background: linear-gradient(90deg, rgba(139,124,246,.16), rgba(92,156,255,.04) 70%); box-shadow: inset 2px 0 0 #8B7CF6, 0 0 0 1px rgba(196,181,253,.22) inset; }
.tp-layers li.tp-on b { color: var(--lavender); }
.tp-layers li.tp-on .tp-st { color: var(--lavender); }
.tp-layers li.tp-on .tp-st::before { background: #8FE3B4; box-shadow: 0 0 0 4px rgba(143,227,180,.18); }

/* ---------- 2 · who it's for ---------- */
.tp-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tp-fit-card { padding: 30px 30px 26px; border-radius: var(--radius); background: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset; }
.tp-fit-card.tp-yes { background: radial-gradient(110% 60% at 0% 0%, rgba(139,124,246,.14), transparent 65%), var(--bg-2); box-shadow: 0 0 0 1px rgba(139,124,246,.4) inset; }
.tp-fit-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lavender); }
.tp-fit-card.tp-no h3 { color: var(--faint); }
.tp-fit-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.tp-fit-card li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 16.5px; line-height: 1.55; }
.tp-fit-card.tp-yes li { color: var(--ink); }
.tp-fit-card.tp-no li { color: var(--muted); }
.tp-mk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.tp-yes .tp-mk { color: #0F0F12; background: var(--btn-grad); }
.tp-no .tp-mk { color: var(--faint); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset; }

/* ---------- 3 · tiles ---------- */
.tp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* same card as the home page's earlier service grid: icon box, spotlight, a gradient line drawing across the top
   on hover, and a highlight that moves from card to card */
.tp-tile { position: relative; padding: 26px 26px 24px; border-radius: var(--radius); isolation: isolate;
  background-color: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset;
  transition: box-shadow .5s var(--ease), background-color .5s var(--ease), translate .35s var(--ease), opacity .8s var(--ease), transform .8s var(--ease); }
.tp-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(196,181,253,.12), transparent 60%); }
.tp-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--radius); border: 2px solid transparent; border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--grad) border-box; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.tp-tile:hover { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(196,181,253,.28) inset, 0 22px 40px -24px rgba(0,0,0,.9); }
.tp-tile:hover::before { opacity: 1; }
.tp-tile:hover::after { transform: scaleX(1); }
.tp-tile.tp-feat { background-color: #1b1830; box-shadow: 0 0 0 1px rgba(120,105,245,.55) inset; }
.tp-tile.tp-feat .tp-ic { background: rgba(196,181,253,.16); }
.tp-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--lavender); background: rgba(196,181,253,.08);
  box-shadow: 0 0 0 1px var(--line) inset; transition: transform .4s var(--ease), background .3s, color .3s; }
.tp-tile:hover .tp-ic { transform: rotate(-8deg) scale(1.08); background: var(--lavender); color: var(--bg); }
.tp-tile h3 { margin: 18px 0 8px; font-size: 20px; line-height: 1.25; transition: color .3s; }
.tp-tile p { margin: 0; font-size: 15px; color: var(--muted); }

/* info icon + tooltip: hover, keyboard focus and tap */
.tp-tip { position: relative; }
.tp-tip-btn { width: 30px; height: 30px; display: grid; place-items: center; font: italic 700 15px/1 Georgia, "Times New Roman", serif; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted);
  background: rgba(196,181,253,.06); box-shadow: 0 0 0 1px var(--line-strong) inset; transition: color .2s, background .2s; }
.tp-tip-btn:hover, .tp-tip-btn[aria-expanded="true"] { color: #0F0F12; background: var(--lavender); }
.tp-tip-pop { position: absolute; right: -6px; bottom: calc(100% + 10px); z-index: 5; width: max-content; max-width: 250px; padding: 10px 13px; border-radius: 11px;
  font-size: 13.5px; font-weight: 500; line-height: 1.45; color: #17152A; background: #EDE8FF; box-shadow: 0 16px 30px -12px rgba(0,0,0,.8);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s, transform .2s, visibility .2s; }
.tp-tip-pop::after { content: ""; position: absolute; right: 16px; top: 100%; border: 6px solid transparent; border-top-color: #EDE8FF; }
.tp-tip:hover .tp-tip-pop, .tp-tip-btn:focus-visible + .tp-tip-pop, .tp-tip-btn[aria-expanded="true"] + .tp-tip-pop { opacity: 1; visibility: visible; transform: none; }

.tp-scope { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 18px 22px; border-radius: 14px; color: var(--ink-2);
  background: rgba(92,156,255,.06); box-shadow: 0 0 0 1px rgba(92,156,255,.24) inset; }
.tp-scope svg { flex: none; margin-top: 3px; color: var(--blue); }
.tp-scope p { margin: 0; }
.tp-scope strong { color: var(--ink); }

/* ---------- 4 · how it runs ---------- */
.tp-rail { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; position: relative; }
.tp-rail::before { content: ""; position: absolute; z-index: 0; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(180deg, #C4B5FD, #8B7CF6 50%, #5C9CFF); opacity: .5; }
.tp-rail li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; padding: 14px 0; }
.tp-rail .tp-dot { position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 11px; font-weight: 900; letter-spacing: .08em;
  color: var(--lavender); background: #15141D; box-shadow: 0 0 0 1px rgba(196,181,253,.35) inset; }
.tp-rail::after { content: ""; position: absolute; z-index: 1; left: 27px; top: 28px; width: 2px; height: calc((100% - 56px) * var(--p, 0)); border-radius: 2px;
  background: linear-gradient(180deg, #C4B5FD, #8B7CF6 60%, #5C9CFF); box-shadow: 0 0 12px 1px rgba(139,124,246,.8);
  transition: height .9s cubic-bezier(.65, 0, .35, 1); }
.tp-rail li > div { transition: opacity .5s var(--ease); }
.tp-rail.tp-go li > div { opacity: .5; }
.tp-rail.tp-go li.tp-on > div, .tp-rail li:hover > div { opacity: 1; }
.tp-rail li.tp-on .tp-dot, .tp-rail li:hover .tp-dot { color: #0F0F12; background: var(--btn-grad); box-shadow: 0 0 0 6px rgba(139,124,246,.16), 0 10px 26px -8px rgba(139,124,246,.9); }
.tp-rail li.tp-on .tp-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 1.5px solid rgba(196,181,253,.7); animation: tpRing 1.6s ease-out infinite; }
@keyframes tpRing { from { opacity: .9; transform: scale(.92); } to { opacity: 0; transform: scale(1.22); } }
.tp-rail li.tp-on h3 { color: var(--lavender); }
.tp-rail li h3 { transition: color .4s; }
.tp-rail .tp-dot { transition: background .4s, color .4s, box-shadow .4s, transform .4s var(--ease); }
.tp-rail li.tp-on .tp-dot { transform: scale(1.06); }
.tp-rail h3 { margin: 6px 0 4px; font-size: 19px; }
.tp-rail p { margin: 0; color: var(--muted); }
.tp-run-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.tp-side-card { display: flex; flex-direction: column; justify-content: center; }
.tp-side-card > p { margin-bottom: 22px !important; }
.tp-side-card { padding: 28px; border-radius: var(--radius); background: radial-gradient(120% 60% at 100% 0%, rgba(92,156,255,.12), transparent 65%), var(--bg-2); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.tp-side-card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lavender); }
.tp-side-card p { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.tp-lead { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
/* Sohail's photo in a circle, zoomed onto his face (face centre sits at about 48% across, 36% down the source) */
.tp-av { position: relative; flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #221d4a;
  box-shadow: 0 0 0 2px rgba(196,181,253,.55), 0 0 0 6px rgba(139,124,246,.12); }
.tp-av img { position: absolute; width: 135%; height: 135%; max-width: none; left: -17%; top: -12%; }   /* face, shoulders and tee */
.tp-lead span { font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.tp-lead strong { display: block; color: var(--ink); font-size: 15.5px; }
.tp-closer { margin: 30px 0 0; font-size: clamp(20px, 2vw, 26px); font-weight: 700; color: var(--ink); letter-spacing: -.02em; }

/* ---------- 5 · what it asks of you ---------- */
.tp-ask { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: center; }   /* same columns as .tp-weeks below */
.tp-time-strip { display: flex; gap: 12px; }
.tp-time { position: relative; flex: 1 1 0; min-width: 0; padding: 22px 22px 20px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(139,124,246,.11), transparent 60%), var(--bg-2);
  box-shadow: 0 0 0 1px var(--line) inset, 0 1px 0 rgba(255,255,255,.05) inset; transition: box-shadow .3s ease, transform .3s ease; }
.tp-time::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(196,181,253,.5), transparent); }
.tp-time:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(196,181,253,.3) inset, 0 1px 0 rgba(255,255,255,.07) inset, 0 14px 30px -18px rgba(139,92,246,.55); }
.tp-time-ic { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(139,92,246,.10); box-shadow: 0 0 0 1px rgba(196,181,253,.16) inset; }
.tp-time-ic svg { width: 15px; height: 15px; fill: none; stroke: #C4B5FD; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-time b { display: block; font-size: 38px; font-weight: 900; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-time b sup { font-size: .42em; vertical-align: top; position: relative; top: .3em; margin-left: 3px; }
.tp-time > span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }   /* the label, not the counting number */
.tp-ask blockquote { margin: 0; padding: 0 26px; font-size: 18px; line-height: 1.7; color: var(--ink-2); }   /* text lines up with Our week's */
.tp-weeks { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-top: 40px; }
/* Your week / Our week: icon + title, check rows split by hairlines, and a time-share bar at the foot */
.tp-week { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset, 0 1px 0 rgba(255,255,255,.04) inset; }
.tp-week.tp-ours { background: radial-gradient(90% 70% at 100% 0%, rgba(139,124,246,.18), transparent 65%), radial-gradient(60% 50% at 0% 100%, rgba(92,156,255,.07), transparent 70%), var(--bg-2);
  box-shadow: 0 0 0 1px rgba(139,124,246,.42) inset, 0 24px 60px -36px rgba(139,92,246,.6); }
.tp-week.tp-ours::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, #C4B5FD, #8FB6FF, transparent); }
.tp-wk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tp-wk-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.tp-wk-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-week.tp-ours .tp-wk-ic { background: rgba(139,92,246,.16); box-shadow: 0 0 0 1px rgba(196,181,253,.34) inset; }
.tp-week.tp-ours .tp-wk-ic svg { stroke: #C4B5FD; }
.tp-week h3 { margin: 0; font-size: 20px; }
.tp-week ul { margin: 0; padding: 0; list-style: none; display: grid; }
.tp-week li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 12px 0; font-size: 15.5px; color: var(--ink-2); }
.tp-week li + li { border-top: 1px solid rgba(214,206,255,.07); }
.tp-week li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='none' stroke='%23C4B5FD' stroke-opacity='.35' stroke-width='1.5'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23C4B5FD' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.tp-week.tp-ours li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23D9CFFE'/%3E%3Cstop offset='1' stop-color='%238FB6FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%231B1530' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tp-week.tp-ours li { color: var(--ink); }
.tp-wk-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 14px; }
.tp-wk-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(214,206,255,.08); overflow: hidden; }
.tp-wk-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #C4B5FD; transition: width 1.6s var(--ease) .35s; }
.tp-week.tp-ours .tp-wk-bar i { background: linear-gradient(90deg, #D9CFFE, #B3A8FA 45%, #8FB6FF); }
.tp-week.tp-in .tp-wk-bar i { width: var(--w); }
.tp-wk-foot small { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.tp-week.tp-ours .tp-wk-foot small { color: var(--lavender); }

/* ---------- 7 · compare ---------- */
/* comparison: equal tier columns, the current tier lit as a raised column; components as chips, PR as a status */
.tp-cmp-wrap { overflow-x: auto; padding-top: 14px; }
.tp-cmp { width: 100%; min-width: 820px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.tp-cmp col.tp-lbl { width: 19%; }
.tp-cmp th, .tp-cmp td { padding: 20px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tp-cmp tbody tr:last-child th, .tp-cmp tbody tr:last-child td { border-bottom: 0; }
.tp-cmp thead td { border-bottom: 1px solid var(--line); }
.tp-cmp thead th { padding-top: 24px; padding-bottom: 22px; vertical-align: bottom; }
.tp-cmp-name { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
.tp-cmp-sub { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; color: var(--faint); }
.tp-cmp-here, .tp-cmp-soon { display: inline-block; margin-top: 14px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tp-cmp-here { color: #0F0F12; background: var(--btn-grad); }
.tp-cmp-soon { color: var(--faint); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.tp .tp-cmp-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--lavender); text-decoration: none; }
.tp .tp-cmp-go:hover { color: var(--ink); }
.tp-cmp-go .arrow { transition: transform .25s var(--ease); }
.tp-cmp-go:hover .arrow { transform: translateX(3px); }
.tp-cmp tbody th { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding-top: 23px; }
.tp-cmp td { color: var(--muted); line-height: 1.55; transition: background .25s; }
.tp-cmp tbody tr:hover td, .tp-cmp tbody tr:hover th { background-color: rgba(196,181,253,.025); }
/* the current tier: a raised, lit column with rounded ends */
.tp-cmp .tp-cur { position: relative; color: var(--ink); background: linear-gradient(180deg, rgba(139,124,246,.13), rgba(139,124,246,.07));
  box-shadow: inset 1px 0 0 rgba(139,124,246,.5), inset -1px 0 0 rgba(139,124,246,.5); border-bottom-color: rgba(196,181,253,.14); }
.tp-cmp thead .tp-cur { border-radius: 18px 18px 0 0; background: linear-gradient(180deg, rgba(139,124,246,.30), rgba(139,124,246,.13));
  box-shadow: inset 1px 0 0 rgba(139,124,246,.5), inset -1px 0 0 rgba(139,124,246,.5), inset 0 1px 0 rgba(196,181,253,.6), 0 -14px 40px -20px rgba(139,124,246,.8); }
.tp-cmp tbody tr:last-child .tp-cur { border-radius: 0 0 18px 18px; box-shadow: inset 1px 0 0 rgba(139,124,246,.5), inset -1px 0 0 rgba(139,124,246,.5), inset 0 -1px 0 rgba(139,124,246,.5); }
/* frame the whole table softly */
.tp-cmp-wrap > .tp-cmp { border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line) inset; background: var(--bg-2); }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip { padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--lavender);
  background: rgba(196,181,253,.06); box-shadow: 0 0 0 1px rgba(196,181,253,.22) inset; }
.tp-chip-x { color: #0F0F12; background: var(--btn-grad); box-shadow: none; }
.tp-stat { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.tp-stat svg { flex: none; }
.tp-stat.tp-yes { color: #8FE3B4; background: rgba(52,199,123,.10); box-shadow: 0 0 0 1px rgba(143,227,180,.32) inset; }
.tp-stat.tp-add { color: var(--muted); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.tp-cmp-note { margin: 16px 0 0; font-size: 14.5px; color: var(--faint); }

/* ---------- 8 · FAQ ---------- */
.tp-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 72px); align-items: stretch; }
/* left column runs the full height of the questions: heading at the top, the ask card level with the last question */
.tp-faq-side { display: flex; flex-direction: column; }
/* the gap between heading and card carries a gradient divider, centred in it (same line as the menu bar's) */
.tp-faq-div { display: block; height: 1.5px; margin: auto 0; min-height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(196,181,253,.6) 22%, rgba(139,124,246,.75) 50%, rgba(196,181,253,.6) 78%, transparent); }
.tp-faq-side .tp-sec-h { margin-bottom: 30px; }
.tp-faq-side .tp-ask-card { margin-top: 30px; }
/* under the heading: a way to ask what the list doesn't answer, so the column carries its weight */
.tp-ask-card { padding: 24px; border-radius: var(--radius);
  background: radial-gradient(120% 70% at 0% 0%, rgba(139,124,246,.18), transparent 62%), var(--bg-2); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.tp-ask-who { display: flex; align-items: center; gap: 16px; }
.tp-ask-who .tp-av { width: 72px; height: 72px; }
.tp-ask-who span { font-size: 15px; line-height: 1.5; color: var(--muted); }
.tp-ask-who strong { display: block; margin-bottom: 2px; font-size: 18px; color: var(--ink); }
.tp-ask-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tp-ask-btns .btn { flex: 1 1 auto; }
.tp-faq { display: grid; gap: 10px; }
.tp-faq details { border-radius: 16px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset; transition: box-shadow .3s, background .3s; }
.tp-faq details[open] { background: radial-gradient(120% 70% at 0% 0%, rgba(139,124,246,.10), transparent 60%), var(--bg-2); box-shadow: 0 0 0 1px rgba(196,181,253,.3) inset; }
.tp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 700; color: var(--ink); }
.tp-faq summary::-webkit-details-marker { display: none; }
.tp-faq summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong) inset; transition: transform .3s var(--ease), background .3s; }
.tp-faq summary i::before, .tp-faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; border-radius: 2px; background: var(--lavender); }
.tp-faq summary i::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.tp-faq details[open] summary i { background: rgba(196,181,253,.12); }
.tp-faq details[open] summary i::after { transform: rotate(0); }
.tp-faq .tp-ans { padding: 0 22px 20px; color: var(--muted); }
.tp-faq .tp-ans p { margin: 0; }

/* ---------- 10 · closing ---------- */
.tp-close-card { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 64px); border-radius: 26px; text-align: center;
  background: radial-gradient(70% 90% at 50% 120%, rgba(139,124,246,.35), transparent 70%), radial-gradient(50% 60% at 0% 0%, rgba(92,156,255,.14), transparent 70%), #13121B;
  box-shadow: 0 0 0 1px rgba(196,181,253,.28) inset; }
.tp-close-card h2 { margin: 0 auto; max-width: 18ch; font-size: clamp(32px, 4.4vw, 56px); font-weight: 900; line-height: 1.05; }
.tp-close-card > p { margin: 18px auto 0; max-width: 56ch; font-size: 18px; color: var(--ink-2); }
.tp-close-card .tp-hero-cta { justify-content: center; }
.tp-close-meta { margin: 26px auto 0; max-width: 64ch; font-size: 14px; color: var(--faint); }
.tp-close-meta time { display: block; margin-top: 6px; font-size: 12.5px; letter-spacing: .06em; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .tp-hero .wrap, .tp-run-grid, .tp-ask, .tp-faq-grid { grid-template-columns: 1fr; }
  .tp-faq-div { margin: 0; }
  .tp-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .tp-sec-head { flex-direction: column; align-items: flex-start; }
  .tp-hero-cta .btn { flex: 1 1 100%; }
  .tp-tip-pop { right: -4px; max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tp-rv { opacity: 1; transform: none; }
  .tp-wk-bar i { width: var(--w); }
}

/* ---------- page bar: a reading-progress line under the menu + one small tag naming the page and section ---------- */
.tp-pbar { position: fixed; left: 0; right: 0; top: var(--nav-h, 84px); z-index: 35; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); }
.tp-pbar.tp-on { opacity: 1; }
.tp-pbar-line { position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--read, 0) * 100%); opacity: .55;   /* a faint hairline */
  background: linear-gradient(90deg, rgba(196,181,253,.6), rgba(139,124,246,.9) 55%, rgba(92,156,255,.9)); }
/* the tag takes the Ecosystem tab's place on the right edge once that tab has slid away. Horizontal text,
   page name on top and the section under it, same glass, dot and border as the Ecosystem tab */
/* letters stacked upright, one under the other (F / o / u / n …), so the tag stays a slim strip on the edge */
.tp .tp-pbar-tag { position: fixed; right: 0; top: 50%; display: flex; align-items: center;
  padding: 14px 10px 16px; writing-mode: vertical-rl; text-orientation: upright; pointer-events: auto; text-decoration: none; transform: translate(100%, -50%);
  font-size: 13px; line-height: 1.3; color: var(--muted);
  background: rgba(26,26,33,.92); border: 1px solid var(--line-strong); border-right: 0; border-radius: 14px 0 0 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .4s cubic-bezier(.2, .8, .2, 1), background .2s; }
.tp-pbar.tp-tag-on .tp-pbar-tag { transform: translate(0, -50%); }
.tp .tp-pbar-tag:hover { color: var(--muted); background: rgba(36,34,52,.96); }
.tp-pbar-tag b { display: flex; align-items: center; gap: 12px; white-space: nowrap; color: var(--ink);   /* same soft mono type as the Ecosystem tab */
  font: 500 11.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.tp-pbar-tag b::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5FA882; box-shadow: 0 0 0 3px rgba(95,168,130,.16); animation: tpLive 2.4s ease-in-out infinite; }   /* muted green: you are here */
@keyframes tpLive { 50% { box-shadow: 0 0 0 5px rgba(95,168,130,.06); } }
.tp-pbar-sec { padding-left: 17px; font-size: 12.5px; font-weight: 500; color: var(--lavender); transition: opacity .25s; }
.tp-pbar-sec:empty { display: none; }
.tp-pbar-sec.tp-swap { opacity: 0; }
@media (max-width: 1199px) { .tp .tp-pbar-tag { display: none; } }   /* no side room on smaller screens: the progress line alone */
.tp .tp-sec { scroll-margin-top: 120px; }

/* closing card: the footer's drifting, twinkling stars only (the rising lines stay in the footer) */
.tp-stars .st { position: absolute; bottom: 0; width: var(--s, 2px); height: var(--s, 2px); animation: starUp var(--d, 14s) linear infinite; animation-delay: var(--w, 0s); }
.tp-stars .st::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #EDE8FF; opacity: 0; animation: twinkle var(--tw, 2.6s) ease-in-out infinite; animation-delay: var(--w2, 0s); }
.tp-close-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.tp-close-card > :not(.tp-close-fx) { position: relative; z-index: 1; }

/* The OS hero card: the lit layer's detail (as on the home page architecture card) */
.tp-vis-detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.tp-vd-k { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--lavender); }
.tp-vd-p { margin: 0; min-height: 3.2em; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.tp-vd-chips { margin-top: 12px; min-height: 30px; }
.tp-vd-chips .tp-chip { padding: 6px 12px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); background: transparent; box-shadow: 0 0 0 1px var(--line-strong) inset; }
.tp-vis-detail .tp-vis-foot { margin-top: 14px; padding-top: 0; border-top: 0; }
.tp-vd-p, .tp-vd-chips, .tp-vd-t { transition: opacity .3s ease, transform .3s ease; }
.tp-vis-detail.tp-swap .tp-vd-p, .tp-vis-detail.tp-swap .tp-vd-chips, .tp-vis-detail.tp-swap .tp-vd-t { opacity: 0; transform: translateY(4px); }
.tp-layers li { cursor: default; }

/* The OS · "And in AI search": a small AI-answer illustration fills the top of the card (placeholder bars, no claims) */
.tp-ai { display: grid; gap: 10px; margin-bottom: 26px; }
.tp-ai-q { justify-self: end; max-width: 88%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  font-size: 14px; color: var(--ink); background: rgba(196,181,253,.10); box-shadow: 0 0 0 1px rgba(196,181,253,.22) inset; }
.tp-ai-you { flex: none; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0F0F12; background: var(--btn-grad); }
.tp-ai-a { display: grid; gap: 9px; padding: 14px 16px 16px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.03); box-shadow: 0 0 0 1px var(--line) inset; }
.tp-ai-bot { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lavender); }
.tp-ai-l { display: block; height: 7px; width: var(--w, 80%); border-radius: 99px; background: linear-gradient(90deg, rgba(196,181,253,.10) 30%, rgba(196,181,253,.28) 50%, rgba(196,181,253,.10) 70%) 0 0 / 220% 100%;
  animation: tpBar 2.4s ease-in-out infinite; }
.tp-ai-l:nth-of-type(2) { animation-delay: .2s; } .tp-ai-l:nth-of-type(3) { animation-delay: .4s; }
@keyframes tpBar { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.tp-ai-src { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: #9DBEFF; background: rgba(92,156,255,.10); box-shadow: 0 0 0 1px rgba(92,156,255,.3) inset; }

/* Scorecard popup on these pages: the audit form only (Book a call is already on the page), so one column */
.sc-modal.sc-solo { width: min(560px, 100% - 24px); }
.sc-modal.sc-solo .sc-opts { grid-template-columns: 1fr; }

/* hero → first section: a clear break. The hero is its own band (soft glow behind it, fading out at its foot);
   a brighter divider with a soft glint drifting along it closes it, so "Who it's for" reads as a new section */
.tp-hero { position: relative; isolation: isolate; }
.tp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 18% 30%, rgba(120,105,245,.10), transparent 70%), radial-gradient(40% 60% at 85% 40%, rgba(92,156,255,.07), transparent 70%);
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.tp-hero + .tp-sec { position: relative; }
.tp-hero + .tp-sec::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1280px, 100% - 2 * var(--gutter)); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(196,181,253,.45) 25%, rgba(139,124,246,.7) 50%, rgba(196,181,253,.45) 75%, transparent); }
/* instead of a dot: a short soft glint drifts along the divider now and then */
.tp-hero + .tp-sec::after { content: ""; position: absolute; top: -1px; left: 50%; width: 160px; height: 3px; pointer-events: none; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(228,222,255,.9), transparent); filter: blur(.5px);
  animation: tpGlint 7s ease-in-out 1s infinite; }
@keyframes tpGlint { 0% { transform: translateX(calc(-1 * min(600px, 44vw))); opacity: 0; } 12% { opacity: .9; } 48% { opacity: .9; } 60%, 100% { transform: translateX(calc(min(600px, 44vw) - 160px)); opacity: 0; } }   /* stays within the line 

/* tighter hand-off from the hero to "Who it's for": smaller gap above and below the divider */
.tp .tp-hero { padding-bottom: clamp(36px, 4vw, 56px); }
.tp .tp-hero + .tp-sec { padding-top: clamp(44px, 5vw, 72px); }

/* the hero fills the first screen under the menu bar, content centred in it, so "Who it's for" starts on the next screen */
.tp .tp-hero { min-height: calc(100vh - 85px - 44px); min-height: calc(100svh - 85px - 44px); display: flex; align-items: center; }   /* 44px short of the screen so the divider shows at the foot 
.tp .tp-hero > .wrap { flex: 0 1 auto; }   /* keeps its own centred width inside the flex hero */
@media (max-width: 1080px) { .tp .tp-hero { min-height: 0; display: block; } }   /* stacked layouts are taller than a screen anyway */

/* FAQ, long lists (9–14 questions): the left column stays one compact block (heading, divider, ask card) and travels
   down beside the questions as you scroll, so there's never a tall empty gap; it comes to rest level with the last one */
.tp .tp-faq-grid { align-items: start; }
.tp .tp-faq-side { position: sticky; top: 120px; display: block; }
.tp .tp-faq-div { margin: 30px 0; }
.tp .tp-faq-side .tp-ask-card { margin-top: 0; }
@media (max-width: 1080px) { .tp .tp-faq-side { position: static; } }

/* side card with two blocks (Authority: the opportunity layer, then AI search), split by a hairline */
.tp-side-split { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Authority hero visual: the reputation radar. Concentric rings turn slowly round "You"; six doors sit on the outer
   ring; one at a time a signal runs out along its spoke and the door lights in the brand gradient */
.tp-radar { --r: 132px; position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 4px auto 0; }
.tp-radar::before, .tp-radar::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.tp-radar::before { width: calc(var(--r) * 2); height: calc(var(--r) * 2); border: 1px dashed rgba(196,181,253,.22); animation: tpRadarSpin 60s linear infinite; }
.tp-radar::after { width: calc(var(--r) * 1.2); height: calc(var(--r) * 1.2); border: 1px solid rgba(196,181,253,.10);
  background: radial-gradient(circle, rgba(139,124,246,.16), transparent 70%); }
@keyframes tpRadarSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.tp-radar-you { position: absolute; left: 50%; top: 50%; z-index: 3; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 30%, #2A2450, #15141D 70%);
  box-shadow: 0 0 0 1px rgba(196,181,253,.45), 0 0 0 8px rgba(139,124,246,.08), 0 0 40px -6px rgba(139,124,246,.7); }
.tp-radar-you b { font-size: 18px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
.tp-radar-you small { margin-top: 2px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lavender); }
.tp-radar-doors { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.tp-radar-doors li { position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
/* the spoke runs from the door back to the centre */
.tp-radar-doors li::before { content: ""; position: absolute; left: 0; top: 0; width: var(--r); height: 1px; transform-origin: 0 0; z-index: 0;
  transform: rotate(calc(var(--a) + 180deg)); background: linear-gradient(90deg, rgba(196,181,253,.22), rgba(196,181,253,.05)); transition: background .4s; }
.tp-radar-doors li::after { content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; z-index: 1; opacity: 0;
  background: #FFFFFF; box-shadow: 0 0 10px 2px rgba(196,181,253,.9); transform: rotate(calc(var(--a) + 180deg)) translateX(0); }
.tp-radar-doors li.tp-on::before { height: 1.5px; background: linear-gradient(90deg, #C4B5FD, #8B7CF6 55%, rgba(92,156,255,.3)); }
.tp-radar-doors li.tp-on::after { animation: tpSignal 1.4s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes tpSignal { from { opacity: 1; transform: rotate(calc(var(--a) + 180deg)) translateX(var(--r)); } 85% { opacity: 1; } to { opacity: 0; transform: rotate(calc(var(--a) + 180deg)) translateX(0); } }
.tp-radar-doors .tp-node { position: absolute; left: 0; top: 0; z-index: 2; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: #15141D; box-shadow: 0 0 0 1px var(--line-strong) inset; transition: color .4s, background .4s, box-shadow .4s, transform .4s var(--ease); }
.tp-radar-doors li.tp-on .tp-node { color: #0F0F12; background: var(--btn-grad); box-shadow: 0 10px 26px -8px rgba(139,124,246,.9); transform: translate(-50%, -50%) scale(1.08); }
.tp-radar + .tp-vis-detail { margin-top: 6px; }
@media (max-width: 520px) { .tp-radar { --r: 108px; } .tp-radar-doors .tp-node { font-size: 11px; padding: 6px 9px; } }
.tp-vd-chips[hidden] { display: none !important; }   /* the radar card has no chips */

/* Who it's for: light polish. Labels and tick/cross markers unchanged. More breathing room, a hairline under the
   label, a soft gradient line across the top of the "For" card, quiet row hover, and a gentle lift on hover */
.tp .tp-fit { align-items: stretch; }
.tp .tp-fit-card { position: relative; overflow: hidden; padding: 32px 34px 30px; border-radius: 22px;
  transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
.tp .tp-fit-card:hover { translate: 0 -3px; }
.tp .tp-fit-card.tp-yes { box-shadow: 0 0 0 1px rgba(139,124,246,.4) inset, 0 28px 60px -40px rgba(92,76,220,.55); }
.tp .tp-fit-card.tp-yes::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(196,181,253,.7), rgba(92,156,255,.45), transparent); }
.tp .tp-fit-card h3 { margin-bottom: 20px; }   /* no divider under the label */
.tp .tp-fit-card ul { gap: 18px; }
.tp .tp-fit-card li { transition: color .25s; }
.tp .tp-fit-card.tp-no li:hover { color: var(--ink-2); }
.tp .tp-fit-card.tp-no a { text-decoration-color: rgba(196,181,253,.4); }
.tp .tp-fit-card.tp-no a:hover { text-decoration-color: currentColor; }

.tp-vd-chips .tp-chip { display: inline-flex; align-items: center; gap: 6px; }