/* TalkingSites: navy and Glory on white, on top of SpaceClub's styles */

:root {
  --ts-navy: #111E6C;
  --ts-navy-deep: #080C27;
  --ts-navy-mid: #0D1543;
  --ts-sky: #C5D7F2;
  --ts-mist: #EEF2FB;
  --ts-lilac: #7A89C2;
}

body,
.btn,
input,
textarea,
select {
  font-family: "Glory", system-ui, sans-serif;
}

body { font-size: 1.15rem; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; color: var(--ts-navy); }

.btn { border-radius: 0.8rem; font-weight: 700; padding: 0.6rem 1.4rem; }
.btn-sm { padding: 0.35rem 0.9rem; }

/* navbar: navy band like the old sidebar */
#navbar-main { background: var(--ts-navy) !important; }
#navbar-main .sc-site-title,
#navbar-main .navbar-brand { color: #fff !important; font-weight: 800; letter-spacing: -0.02em; }
#navbar-main .nav-link { color: rgb(255 255 255 / 75%) !important; }
#navbar-main .nav-link:hover,
#navbar-main .nav-link.active { color: #fff !important; background: rgb(255 255 255 / 10%); }
#navbar-main .btn-outline-primary { color: #fff; }
#navbar-main .btn-outline-primary:hover { background: rgb(255 255 255 / 10%); color: #fff; }
#navbar-main .navbar-toggler { border-color: rgb(255 255 255 / 40%); }
#navbar-main .navbar-toggler-icon { filter: invert(1); }

/* footer */
#footer-main a, #footer-main .nav-link { color: rgb(255 255 255 / 80%); }
#footer-main a:hover, #footer-main .nav-link:hover { color: #fff; }

/* sections: full-width bands */
.ts-band { padding: 4.5rem 0; }
.ts-band-mist { background: var(--ts-mist); }
.ts-band-navy { background: var(--ts-navy); color: #fff; }
.ts-band-navy h1, .ts-band-navy h2, .ts-band-navy h3 { color: #fff; }
.ts-band-navy a:not(.btn) { color: var(--ts-sky); }
.ts-lead { font-size: 1.35rem; max-width: 46rem; }
.ts-center { text-align: center; }
.ts-center .ts-lead { margin-left: auto; margin-right: auto; }
.ts-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.ts-center .ts-buttons { justify-content: center; }

/* hero */
.ts-hero { padding: 5.5rem 0 4.5rem; background: linear-gradient(180deg, #fff 0%, var(--ts-mist) 100%); }
.ts-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.02; max-width: 15ch; }
.ts-hero .ts-lead { margin-top: 1.25rem; }
.btn-light-on-navy { background: #fff; color: var(--ts-navy); }
.btn-light-on-navy:hover { background: var(--ts-sky); color: var(--ts-navy); }
.btn-outline-on-navy { border: 2px solid rgb(255 255 255 / 60%); color: #fff; }
.btn-outline-on-navy:hover { border-color: #fff; color: #fff; background: rgb(255 255 255 / 10%); }

/* feature grid */
.ts-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2rem; }
.ts-tile { background: #fff; border: 1px solid var(--ts-sky); border-radius: 1rem; padding: 1.5rem; }
.ts-band-mist .ts-tile { border-color: transparent; box-shadow: 0 1px 2px rgb(17 30 108 / 8%); }
.ts-band-navy .ts-tile { background: var(--ts-navy-mid); border-color: rgb(255 255 255 / 12%); }
.ts-tile i { font-size: 1.75rem; color: var(--ts-lilac); display: block; margin-bottom: 0.6rem; }
.ts-band-navy .ts-tile i { color: var(--ts-sky); }
.ts-tile h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.ts-tile p { margin: 0; opacity: 0.9; }

/* stack list (Solutions) */
.ts-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1rem 0 0; list-style: none; }
.ts-stack li { background: var(--ts-mist); color: var(--ts-navy); border-radius: 999px; padding: 0.3rem 0.9rem; font-weight: 600; font-size: 1rem; }
.ts-band-mist .ts-stack li { background: #fff; }

/* work cards */
.ts-work { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); margin-top: 2rem; }
.ts-work-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ts-sky); border-radius: 1rem; overflow: hidden; text-decoration: none; color: var(--ts-navy); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.ts-work-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(17 30 108 / 14%); color: var(--ts-navy); }
.ts-work-shot { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--ts-sky); }
.ts-work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ts-work-body { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.1rem 1.25rem 1.3rem; }
.ts-work-title { font-weight: 800; font-size: 1.3rem; }
.ts-work-url { font-size: 0.95rem; color: var(--ts-lilac); }
.ts-work-summary { margin-top: 0.35rem; font-size: 1.05rem; }

/* case study rows */
.ts-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .ts-split { grid-template-columns: 1fr 1fr; } }
.ts-split > img, .ts-split > a > img { width: 100%; border-radius: 1rem; border: 1px solid var(--ts-sky); box-shadow: 0 10px 30px rgb(17 30 108 / 12%); }

/* plain pages and posts */
.ts-page { max-width: 52rem; }
.ts-page h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; margin-bottom: 1rem; }
.ts-page h2 { margin-top: 2.25rem; }
.ts-page img { max-width: 100%; border-radius: 0.75rem; }

/* SpaceClub's form partial inside a band: full width of the column, no white panel */
.ts-band section.bg-body { background: transparent !important; margin-top: 0 !important; }
.ts-band section.bg-body > div { width: 100%; max-width: 40rem; margin: 0 auto; background: #fff !important; }
.ts-band section.bg-body .btn { background: var(--ts-navy); color: #fff; }

/* four tiles: two by two */
@media (min-width: 768px) { .ts-grid-2 { grid-template-columns: 1fr 1fr; } }

code { color: var(--ts-navy); background: var(--ts-mist); padding: 0.1em 0.35em; border-radius: 0.3em; }
pre code { padding: 0; background: none; }

/* four work cards in a row on wide screens, two by two below */
@media (min-width: 768px) { .ts-work-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ts-work-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---- home: the site as a folder ---- */
.ts-split-top { align-items: start; }
.ts-tree { margin: 0; background: var(--ts-navy-deep); color: #DCE6F8; border-radius: 1rem; padding: 1.5rem 1.75rem; font-size: 0.95rem; line-height: 1.6; overflow-x: auto; box-shadow: 0 18px 40px rgb(8 12 39 / 25%); }
.ts-tree code { color: inherit; background: none; padding: 0; }
.ts-tree b { color: #fff; }
.ts-tree i { color: var(--ts-lilac); font-style: normal; }
.ts-subhead { font-size: 1.3rem; margin: 3rem 0 1rem; }
.ts-tryrow { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.ts-try { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; padding: 0.9rem 1rem; border: 1px solid var(--ts-sky); border-radius: 0.8rem; background: #fff; color: var(--ts-navy); text-decoration: none; font: inherit; transition: border-color 0.15s, background 0.15s; }
.ts-try:hover { border-color: var(--ts-navy); background: var(--ts-mist); color: var(--ts-navy); }
.ts-try code { font-size: 0.95rem; background: var(--ts-mist); align-self: flex-start; }
.ts-try:hover code { background: #fff; }
.ts-try span { font-weight: 700; }

/* ---- swaps: one comparison table ---- */
.ts-hero-tight { padding-bottom: 3rem; }
.ts-compare { border: 1px solid var(--ts-sky); border-radius: 1.25rem; overflow: hidden; background: #fff; }
.ts-compare-head, .ts-compare-row { display: grid; grid-template-columns: 11rem minmax(12rem, 1fr) 2fr; gap: 1.5rem; align-items: center; padding: 1rem 1.75rem; }
.ts-compare-head { background: var(--ts-navy); color: #fff; font-weight: 700; font-size: 1rem; }
.ts-compare-head span:nth-child(2) { color: #FFB4B4; }
.ts-compare-head span:nth-child(3) { color: var(--ts-sky); }
.ts-compare-row + .ts-compare-row { border-top: 1px solid var(--ts-sky); }
.ts-compare-row:nth-child(odd) { background: #FAFBFE; }
.ts-compare-job { font-weight: 800; font-size: 1.25rem; }
.ts-compare-old { display: flex; align-items: center; gap: 0.75rem; color: #6B7393; }
.ts-compare-old s { text-decoration-color: #D33A3A; text-decoration-thickness: 2px; }
.ts-compare-new { display: flex; align-items: center; gap: 1rem; }
.ts-compare-new img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.ts-compare-new strong { display: block; font-size: 1.2rem; }
.ts-compare-new span span { display: block; font-size: 1.02rem; line-height: 1.35; }
@media (max-width: 767px) {
  .ts-compare-head { display: none; }
  .ts-compare-row { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.25rem; }
  .ts-compare-old::before { content: "Instead of"; font-size: 0.85rem; margin-right: 0.25rem; }
}
.ts-swap-old { position: relative; display: inline-flex; flex: none; }
.ts-swap-old::after { content: ""; position: absolute; inset: -3px; background:
  linear-gradient(45deg, transparent calc(50% - 1.5px), #D33A3A calc(50% - 1.5px), #D33A3A calc(50% + 1.5px), transparent calc(50% + 1.5px)),
  linear-gradient(-45deg, transparent calc(50% - 1.5px), #D33A3A calc(50% - 1.5px), #D33A3A calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
/* the paid tool keeps its colours, faded, under a red cross */
.ts-swap-old img { display: block; width: 28px; height: 28px; object-fit: contain; opacity: 0.45; }



/* ---- about ---- */
.ts-prose p { font-size: 1.2rem; }
.ts-prose p:last-child { margin-bottom: 0; }
.ts-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.ts-points li { display: flex; gap: 1rem; font-size: 1.15rem; }
.ts-points i { font-size: 1.6rem; color: var(--ts-lilac); line-height: 1.2; }
.ts-points li:last-child i { color: #D33A3A; }
@media (min-width: 992px) { .ts-split-top > h2 { font-size: 2.2rem; } }

/* ---- contact ---- */
.ts-contact-ways { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.ts-contact-ways li { display: flex; gap: 0.85rem; align-items: baseline; font-size: 1.15rem; }
.ts-contact-ways i { color: var(--ts-lilac); font-size: 1.3rem; }
.ts-form { display: flex; flex-direction: column; gap: 0.35rem; background: #fff; border: 1px solid var(--ts-sky); border-radius: 1.25rem; padding: 2rem; box-shadow: 0 18px 40px rgb(17 30 108 / 10%); }
.ts-form label { font-weight: 700; margin-top: 0.6rem; }
.ts-form input, .ts-form select, .ts-form textarea { border: 1px solid var(--ts-sky); border-radius: 0.6rem; padding: 0.65rem 0.8rem; font: inherit; color: var(--ts-navy); background: #fff; }
.ts-form input:focus, .ts-form select:focus, .ts-form textarea:focus { outline: 3px solid rgb(17 30 108 / 20%); border-color: var(--ts-navy); }
.ts-form .btn { margin-top: 1.25rem; align-self: flex-start; }


/* ---- back links: a quiet text link, no box ---- */
.ts-back { padding: 0.9rem 0; font-size: 0.95rem; }
.ts-back a { display: inline-flex; align-items: center; gap: 0.35rem; color: #6B7393; text-decoration: none; font-weight: 600; }
.ts-back a:hover { color: var(--ts-navy); }
.ts-back a:hover i { transform: translateX(-3px); }
.ts-back i { transition: transform 0.15s; }
/* above a page that starts with a hero, the link floats on the hero itself */
.ts-back-top:has(+ main > :is(.ts-hero, .sc-hero):first-child) { position: absolute; left: 0; right: 0; z-index: 2; background: transparent; }
.ts-back-top:has(+ main > .sc-hero:first-child) a { color: rgb(255 255 255 / 70%); }
.ts-back-top:has(+ main > .sc-hero:first-child) a:hover { color: #fff; }
main > :is(.ts-hero, .sc-hero):first-child { padding-top: 4.5rem; }
/* above a page that starts with a hero, the link floats on the hero itself */
/* below a page that ends on a dark band, the link joins it */
main:has(> .ts-band-navy:last-child) + .ts-back-bottom { background: var(--ts-navy); margin-top: -1px; }
main:has(> .ts-band-navy:last-child) + .ts-back-bottom a { color: rgb(255 255 255 / 65%); }
main:has(> .ts-band-navy:last-child) + .ts-back-bottom a:hover { color: #fff; }
main:has(> .ts-band-mist:last-child) + .ts-back-bottom { background: var(--ts-mist); }
.ts-back a:focus-visible { outline: 2px solid var(--ts-navy); outline-offset: 3px; border-radius: 4px; }

/* ---- try it row: plain words first, the address small ---- */
.ts-try strong { font-size: 1.1rem; display: flex; align-items: center; gap: 0.45rem; }
.ts-try strong i { color: var(--ts-lilac); }
.ts-try .ts-try-what { font-weight: 400; font-size: 1rem; line-height: 1.35; flex: 1; }
.ts-try code { font-size: 0.8rem; margin-top: 0.3rem; }

/* ---- webmcp guide ---- */
.ts-askai { margin-top: 2rem; max-width: 46rem; }
.ts-askai-label { font-weight: 700; margin-bottom: 0.5rem; }
.ts-askai-box { display: flex; gap: 0.75rem; align-items: center; background: #fff; border: 2px solid var(--ts-navy); border-radius: 1rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; }
.ts-askai-box code { flex: 1; background: none; padding: 0; font-size: 1rem; color: var(--ts-navy); }
@media (max-width: 575px) { .ts-askai-box { flex-direction: column; align-items: stretch; } }
.ts-guide pre { background: var(--ts-navy-deep); color: #DCE6F8; border-radius: 0.8rem; padding: 1.25rem; font-size: 0.85rem; }
.ts-guide pre code { color: inherit; background: none; }
.ts-guide table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.ts-guide th, .ts-guide td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--ts-sky); text-align: left; vertical-align: top; }
.ts-guide h2 { margin-top: 3rem; }
.ts-guide h3 { margin-top: 2rem; font-size: 1.35rem; }

/* ================= SpaceClub's own look on /spaceclub ================= */
@font-face { font-family: "Ubuntu Sans"; src: url("/assets/fonts/UbuntuSans-VariableFont_wdth,wght.ttf") format("truetype"); font-weight: 100 900; }
:root {
  --sc-space: #0E0A24;
  --sc-gradient: linear-gradient(135deg, #3BC7F6 0%, #A855F7 29.8%, #CC4D9E 69.3%, #EF4444 100%);
}
.sc-hero { position: relative; background: radial-gradient(60% 80% at 80% 30%, rgb(168 85 247 / 35%), transparent 70%), radial-gradient(50% 70% at 10% 90%, rgb(59 199 246 / 25%), transparent 70%), var(--sc-space); color: #E9E4FF; padding: 4rem 0 5rem; overflow: hidden; }
.sc-hero h1 { font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 800; line-height: 1; background: var(--sc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-hero .ts-lead { color: #D9D2F5; margin-top: 1.25rem; }
.sc-hero-logo { width: min(100%, 26rem); justify-self: center; filter: drop-shadow(0 20px 60px rgb(168 85 247 / 45%)); }
.btn.sc-btn { background: var(--sc-gradient); color: #fff; border: 0; }
.btn.sc-btn:hover { color: #fff; filter: brightness(1.08); }
.btn.sc-btn-ghost { border: 2px solid rgb(255 255 255 / 45%); color: #fff; }
.btn.sc-btn-ghost:hover { border-color: #fff; color: #fff; }
.sc-band h2 { color: #2A1B5E; }
.sc-features { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin-top: 2rem; }
.sc-feature { position: relative; padding: 1.5rem; border-radius: 1rem; background: #fff; border: 1px solid #E6DDFB; overflow: hidden; }
.sc-feature::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--sc-gradient); }
.sc-feature i { font-size: 1.8rem; display: inline-block; background: var(--sc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.5rem; }
.sc-feature h3 { font-size: 1.2rem; color: #2A1B5E; margin-bottom: 0.35rem; }
.sc-feature p { margin: 0; color: #3E3566; }
.sc-feature a { color: #A855F7; }
.sc-code { margin: 0; background: var(--sc-space); color: #E9E4FF; border-radius: 1rem; padding: 1.5rem 1.75rem; font-size: 1.05rem; line-height: 1.8; border: 1px solid rgb(168 85 247 / 40%); box-shadow: 0 20px 50px rgb(14 10 36 / 30%); }
.sc-code code { color: inherit; background: none; padding: 0; }
.sc-code span { background: var(--sc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 0.5rem; }

.ts-split > img.sc-hero-logo { border: 0; border-radius: 0; box-shadow: none; }

/* the footer runs straight on from whatever is above it */
#footer-main { border-top: 0 !important; }

/* Solutions: the table sits inside the hero, so the background runs behind it */
.ts-hero-with-table { padding-bottom: 4.5rem; }
.ts-hero-with-table .ts-compare { margin-top: 3rem; box-shadow: 0 18px 40px rgb(17 30 108 / 10%); }
/* no seam between a navy bottom strip and the navy footer */
main:has(> .ts-band-navy:last-child) + .ts-back-bottom { position: relative; z-index: 1; box-shadow: 0 1px 0 var(--ts-navy); }
main:has(> .ts-band-navy:last-child) + .ts-back-bottom + .footer-wrapper { margin-top: -1px; }

/* home: the first four swaps as short rows */
.ts-swapmini { list-style: none; padding: 0; margin: 1.5rem 0 0; border: 1px solid var(--ts-sky); border-radius: 1rem; background: #fff; overflow: hidden; }
.ts-swapmini li { display: grid; grid-template-columns: 7.5rem 1fr auto 1fr; align-items: center; gap: 0.75rem; padding: 0.8rem 1.1rem; }
.ts-swapmini li + li { border-top: 1px solid var(--ts-sky); }
.ts-swapmini-job { font-weight: 800; }
.ts-swapmini-old, .ts-swapmini-new { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ts-swapmini-old { color: #6B7393; }
.ts-swapmini-old s { text-decoration-color: #D33A3A; text-decoration-thickness: 2px; }
.ts-swapmini .ts-swap-old img { width: 22px; height: 22px; }
.ts-swapmini-new img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.ts-swapmini i { color: var(--ts-lilac); }
@media (max-width: 575px) { .ts-swapmini li { grid-template-columns: 1fr auto 1fr; } .ts-swapmini-job { grid-column: 1 / -1; } }

/* ================= home: two cards up top ================= */
.ts-home-top { padding-top: 3rem; }
.ts-home-cards { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .ts-home-cards { grid-template-columns: 1.15fr 1fr; } }
.ts-home-card { border-radius: 1.5rem; padding: 2.25rem; display: flex; flex-direction: column; }
.ts-home-card h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.1; margin-bottom: 0.75rem; }
.ts-home-card > p { font-size: 1.15rem; }
.ts-home-card .ts-buttons { margin-top: auto; padding-top: 1.5rem; }
.ts-home-selfhost { background: var(--ts-mist); }
.ts-home-selfhost .ts-swapmini { margin-top: 0.5rem; }
.ts-home-spaceclub { background: radial-gradient(70% 60% at 85% 10%, rgb(168 85 247 / 40%), transparent 70%), radial-gradient(60% 60% at 0% 100%, rgb(59 199 246 / 25%), transparent 70%), var(--sc-space); color: #D9D2F5; font-family: "Ubuntu Sans", "Glory", system-ui, sans-serif; }
.ts-home-spaceclub img { width: 150px; height: auto; margin-bottom: 1rem; filter: drop-shadow(0 10px 30px rgb(168 85 247 / 45%)); }
.ts-home-spaceclub h2 { font-family: inherit; background: var(--sc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; align-self: flex-start; }
.ts-home-sc-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.6rem; font-size: 1.1rem; color: #fff; }
.ts-home-sc-list i { margin-right: 0.6rem; background: var(--sc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
a.ts-swapmini-new { text-decoration: none; color: var(--ts-navy); }
a.ts-swapmini-new:hover strong { text-decoration: underline; }

/* ================= case studies ================= */
.ts-cases { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.ts-case { display: grid; gap: 2rem; background: #fff; border: 1px solid var(--ts-sky); border-top: 6px solid var(--case-colour); border-radius: 1.25rem; padding: 2rem; }
@media (min-width: 992px) { .ts-case { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.ts-case-logo { height: 56px; width: auto; max-width: 220px; object-fit: contain; object-position: left; margin-bottom: 1rem; }
.ts-case-title { font-size: 1.6rem; margin-bottom: 0.4rem; }
.ts-case-title a { color: var(--ts-navy); text-decoration: none; }
.ts-case-title a:hover { text-decoration: underline; }
.ts-case-summary { font-size: 1.12rem; }
.ts-case-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.ts-case-visual img { width: 100%; border-radius: 1rem; border: 1px solid var(--ts-sky); box-shadow: 0 10px 30px rgb(17 30 108 / 12%); }
.ts-case-brandpanel { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 1rem; background: color-mix(in srgb, var(--case-colour) 8%, #fff); border: 1px solid color-mix(in srgb, var(--case-colour) 25%, #fff); }
.ts-case-brandpanel img { width: 60%; height: auto; border: 0; box-shadow: none; border-radius: 0; }
.ts-case-full { border-top-width: 6px; }

/* ================= tool pages ================= */
.ts-tool-head { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
.ts-tool-head img { width: 96px; height: 96px; object-fit: contain; flex: none; background: #fff; border: 1px solid var(--ts-sky); border-radius: 1.25rem; padding: 0.9rem; }
.ts-tool-head h1 { margin: 0; }
.ts-tool-job { margin: 0; font-weight: 700; color: var(--ts-lilac); }
.ts-tool-replaces { margin: 0.25rem 0 0; color: #6B7393; }
.ts-tool-replaces s { text-decoration-color: #D33A3A; text-decoration-thickness: 2px; }
.ts-tool-body h2 { font-size: 1.5rem; margin-top: 2rem; }
.ts-tool-body h2:first-child { margin-top: 0; }
.ts-tool-side { background: var(--ts-mist); border-radius: 1.25rem; padding: 1.75rem; }
.ts-tool-used { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
.ts-tool-used a { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 1rem; background: #fff; border-radius: 0.8rem; text-decoration: none; color: var(--ts-navy); font-weight: 700; }
.ts-tool-used img { height: 36px; width: auto; max-width: 110px; object-fit: contain; }
.ts-tool-used i { margin-left: auto; }
a.ts-compare-new { text-decoration: none; color: var(--ts-navy); border-radius: 0.6rem; }
a.ts-compare-new:hover strong { text-decoration: underline; }

/* ================= posts ================= */
.ts-post-container { max-width: 52rem; }
.ts-post-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; }
.ts-post-meta { color: #6B7393; font-weight: 600; margin-bottom: 0.5rem; }
.ts-post-image { margin-top: -2rem; position: relative; }
.ts-post-image img { width: 100%; border-radius: 1rem; border: 1px solid var(--ts-sky); box-shadow: 0 18px 40px rgb(17 30 108 / 12%); }
.ts-post-case { padding: 3rem 0; }

/* /spaceclub ends the way SpaceClub sites do: the stars and rockets on the page, over a band,
   with SpaceClub's gradient blended into both (the package's .footer-wrapper and .divider) */
.sc-end { background: #fff; }
.sc-end .sc-end-band { height: 3.5rem; background: #000; }

/* case study: one card holding the tools (login in the middle) and what it's built with */
.ts-case .ts-hub { display: block; margin: 1.5rem 0 0; padding: 1.25rem 1.5rem; background: #fff; border: 1px solid var(--ts-sky); border-radius: 1rem; }
.ts-hub-label { margin: 0 0 0.75rem; font-size: 0.9rem; font-weight: 700; color: #6B7393; }
.ts-hub-tools + .ts-hub-label { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--ts-sky); }
.ts-hub-tools { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.25rem 1rem; }
.ts-hub-tools a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; min-width: 5.2rem; padding: 0.4rem 0.3rem; border-radius: 0.7rem; text-decoration: none; color: var(--ts-navy); transition: background 0.15s; }
.ts-hub-tools a:hover { background: var(--ts-mist); }
.ts-hub-tools img { width: 36px; height: 36px; object-fit: contain; margin-bottom: 0.2rem; }
.ts-hub-tools strong { font-size: 0.98rem; line-height: 1.1; }
.ts-hub-tools small { font-size: 0.82rem; color: #6B7393; line-height: 1.15; }
.ts-hub-tools a.ts-hub-centre { padding-right: 1.25rem; margin-right: 0.25rem; border-right: 2px dashed var(--ts-sky); border-radius: 0.7rem 0 0 0.7rem; }
.ts-hub-tools a.ts-hub-centre img { width: 40px; height: 40px; }
.ts-hub-tech { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.ts-hub-tech span { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.98rem; }
.ts-hub-tech img { width: 26px; height: 26px; object-fit: contain; }
.sc-end .footer-wrapper::after { background: var(--sc-gradient); }
.sc-end .sc-end-band { height: 1.5rem; }
/* the bottom Back link carries on the gradient band */
main:has(> .sc-end:last-child) + .ts-back-bottom { background: var(--sc-gradient); margin-top: -1px; }
main:has(> .sc-end:last-child) + .ts-back-bottom a { color: #fff; }
@media (min-width: 992px) { .sc-features { grid-template-columns: repeat(3, 1fr); } }
.sc-end .sc-end-band { height: 4vw; }
@media (max-width: 992px) { .sc-end .sc-end-band { height: 8vw; } }

/* home: tools grouped by type of organisation */
.ts-home-intro h2 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.1; }
.ts-bundles { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 992px) { .ts-bundles { grid-template-columns: repeat(3, 1fr); } }
.ts-bundle { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ts-sky); border-radius: 1.25rem; padding: 1.75rem; }
.ts-bundle h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.ts-bundle h3 i { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; background: var(--ts-navy); color: #fff; font-size: 1.15rem; }
.ts-bundle-who { font-size: 1.05rem; line-height: 1.45; }
.ts-bundle-tools { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.5rem; }
.ts-bundle-tools a { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.75rem; border-radius: 0.8rem; background: var(--ts-mist); text-decoration: none; color: var(--ts-navy); transition: background 0.15s; }
.ts-bundle-tools a:hover { background: #E3EAF8; }
.ts-bundle-tools img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.ts-bundle-tools strong { display: block; line-height: 1.15; }
.ts-bundle-tools small { display: block; color: #6B7393; font-size: 0.88rem; line-height: 1.2; }
.ts-bundle-tools i { margin-left: auto; font-size: 1.3rem; color: var(--ts-lilac); }
.ts-bundle-example { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; padding-top: 1.25rem; font-weight: 700; color: var(--ts-navy); text-decoration: none; }
.ts-bundle-example img { height: 28px; width: auto; max-width: 90px; object-fit: contain; }
.ts-bundle-example:hover span { text-decoration: underline; }
.ts-home-more { margin: 1.5rem 0 0; font-weight: 700; }
.ts-bundle-cut { margin-top: auto; padding-top: 1.25rem; }
.ts-bundle-cut p { margin: 0 0 0.6rem; padding-top: 1rem; border-top: 1px dashed var(--ts-sky); font-size: 0.9rem; font-weight: 700; color: #6B7393; }
.ts-bundle-cut ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.ts-bundle-cut li { display: inline-flex; align-items: center; gap: 0.45rem; color: #6B7393; font-weight: 600; font-size: 0.98rem; }
.ts-bundle-cut s { text-decoration-color: #D33A3A; text-decoration-thickness: 2px; }
.ts-bundle-cut .ts-swap-old img { width: 24px; height: 24px; }

/* a form an AI assistant just filled in flashes briefly */
.ts-form-filled { outline: 3px solid var(--ts-lilac); outline-offset: 4px; transition: outline-color 0.6s; }

/* about: photo in the header, Join us at the bottom */
.ts-about-head { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .ts-about-head { grid-template-columns: 1fr auto; } }
.ts-about-photo { margin: 0; text-align: center; justify-self: center; }
.ts-about-photo img { width: min(18rem, 70vw); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 18px 40px rgb(17 30 108 / 18%); }
.ts-about-photo figcaption { margin-top: 0.9rem; color: #6B7393; font-size: 1rem; }
.ts-about-photo figcaption strong { display: block; color: var(--ts-navy); font-size: 1.2rem; }
.ts-join-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.ts-join-list li { display: flex; gap: 0.85rem; font-size: 1.1rem; }
.ts-join-list i { color: var(--ts-sky); font-size: 1.4rem; line-height: 1.2; }
.ts-join-form section.bg-body { background: transparent !important; margin-top: 0 !important; }
.ts-join-form section.bg-body > div { width: 100%; max-width: none; background: #fff !important; color: var(--ts-navy); border-radius: 1.25rem !important; padding: 2rem !important; text-align: left !important; }
.ts-join-form h2 { color: var(--ts-navy) !important; }
.ts-join-form .btn { background: var(--ts-navy); color: #fff; }