/* ============================================================
   Thinking Board — shared site stylesheet  (v2, 8 July 2026)
   Fonts & colours per the IAL Brand Guide (Brand Toolkit):
     Typography — Raleway for all web applications:
       Large headlines .... Raleway Light (300)
       Headlines/emphasis . Raleway Semibold (600)
       Body text .......... Raleway Medium (500)
     Colours:
       Logo teal .......... #00A499  (Pantone 3272)
       Dark grey .......... #454142  (Pantone 4287)
       Pale blue .......... #DFE6EF  (Pantone 656 65%)
       Dark blue .......... #007096  (Pantone 7705)
       Blue ............... #0095C8  (Pantone 639)
       Highlight yellow ... #F2C75C  (Pantone 141)
   All pages link to this file, so future brand tweaks happen here.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');

:root{
  --color-teal: #00A499;        /* primary brand accent */
  --color-teal-dark: #00877E;   /* hover state */
  --color-grey: #454142;        /* brand dark grey — headings, dark sections */
  --color-grey-deep: #37393A;   /* footer */
  --color-paleblue: #DFE6EF;    /* brand pale blue — soft banners */
  --color-blue-dark: #007096;   /* secondary blue */
  --color-blue: #0095C8;        /* secondary blue */
  --color-yellow: #F2C75C;      /* data / highlight only */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F2F5F9;      /* soft section background (pale blue tint) */
  --color-text: #454142;
  --color-text-muted: #6B6B6D;
  --color-border: #E4E7EC;

  --font-heading: 'Raleway', Arial, sans-serif;
  --font-body: 'Raleway', Arial, sans-serif;

  --max-width: 1180px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  font-weight: 500;               /* Raleway Medium for body text */
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
strong{ font-weight:700; color: var(--color-grey); }
/* body-copy emphasis: darker + heavier than surrounding muted text */
.lede strong, p strong, .audience-card p strong, .pain-card p strong, .more-card p strong,
.diff-card p strong, .stat .label strong{ font-weight:700; color: var(--color-teal-dark); }
/* keep light-on-dark contexts white */
.trust-bar li strong, .different-card p strong, .final-cta strong{ color:#fff; }
.features h2 strong{ color:#3BF0E2; }
.feature-item p strong{ color:#fff; font-weight:700; }

.wrap{ max-width: var(--max-width); margin:0 auto; padding: 0 24px; }
section{ padding: 51px 0; }
@media (max-width: 720px){ section{ padding: 36px 0; } }

/* Large headlines — Raleway Light; sub-heads — Semibold */
h1,h2{ font-family: var(--font-heading); font-weight:300; color: var(--color-grey); letter-spacing:-0.005em; }
h1{ font-size: clamp(2.3rem, 5vw, 3.5rem); line-height:1.12; }
h2{ font-size: clamp(1.7rem, 2.6vw, 2.15rem); line-height:1.25; }
h1 strong, h2 strong{ font-weight:600; color: var(--color-teal); }
h3{ font-family: var(--font-heading); font-weight:600; color: var(--color-grey); font-size:1.2rem; }
.eyebrow{ font-size:1.37rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--color-teal); margin-bottom:14px; display:block; }
.lede{ font-size:1.13rem; color: var(--color-text-muted); max-width:640px; }

.btn{ display:inline-block; padding:14px 30px; border-radius:4px; font-weight:600; font-size:0.98rem; transition:all .15s ease; border:2px solid transparent; }
.btn-primary{ background: var(--color-teal); color:#fff; }
.btn-primary:hover{ background: var(--color-teal-dark); }
.btn-secondary{ background:transparent; border-color: var(--color-grey); color: var(--color-grey); }
.btn-secondary:hover{ background: var(--color-grey); color:#fff; }
.btn-ghost{ background:transparent; border-color: var(--color-teal); color: var(--color-teal-dark); }
.btn-ghost:hover{ background: var(--color-teal); color:#fff; }

/* ---------- Header ---------- */
header{ position:sticky; top:0; z-index:50; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); border-bottom:1px solid var(--color-border); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.logo{ display:flex; align-items:center; gap:13px; font-family: var(--font-heading); font-weight:600; font-size:1.65rem; color: var(--color-grey); letter-spacing:0.01em; }
.logo .wordmark{ display:inline-flex; align-items:baseline; gap:0; white-space:nowrap; }
.logo .thin{ font-weight:300; color: var(--color-teal); }
.logo-mark{ width:46px; height:46px; flex-shrink:0; object-fit:contain; }
.nav-links{ display:flex; gap:36px; font-size:0.95rem; font-weight:500; }
.nav-links a.active{ color: var(--color-teal-dark); font-weight:600; }
.nav-cta{ display:flex; align-items:center; gap:22px; }
.nav-login{ font-size:0.92rem; font-weight:500; color: var(--color-text-muted); }
.nav-login:hover{ color: var(--color-grey); }
.nav-links a:hover{ color: var(--color-teal-dark); }
/* Mobile navigation */
.nav-toggle{ display:none; background:none; border:none; padding:8px; cursor:pointer; }
.nav-toggle span{ display:block; width:24px; height:3px; background: var(--color-grey); border-radius:2px; margin:5px 0; transition: transform .2s ease, opacity .2s ease; }
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .nav.menu-open .nav-links{ display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--color-border); box-shadow:0 16px 32px rgba(69,65,66,0.12); padding:8px 0; z-index:50; }
  .nav.menu-open .nav-links a{ padding:14px 24px; border-bottom:1px solid var(--color-border); }
  .nav.menu-open .nav-links a:last-child{ border-bottom:none; }
  .nav.menu-open .nav-toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .nav.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.menu-open .nav-toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
}
header{ position:relative; }
.nav{ position:relative; }

/* ---------- Page header banner (non-homepage pages) ---------- */
.page-hero{ background: var(--color-paleblue); color: var(--color-grey); padding:84px 0 64px; }
.page-hero h1{ color: var(--color-grey); white-space:nowrap; font-size: clamp(1.9rem, 4vw, 3rem); }
@media (max-width:1100px){ .page-hero h1{ white-space:normal; } }
.page-hero .lede{ color: #4E5560; margin-top:18px; max-width:700px; }

/* ---------- Hero (homepage) ---------- */
.hero{ padding-top: 76px; padding-bottom: 0;
    background: linear-gradient(180deg, #EEF3F9 0%, var(--color-paleblue) 100%); }
.hero .wrap{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap:28px; align-items:center; }
@media (max-width: 900px){ .hero .wrap{ grid-template-columns:1fr; } }
.hero h1{ color: var(--color-grey); white-space:nowrap; }
@media (max-width:1100px){ .hero h1{ white-space:normal; } }
.hero-headline{ display:block !important; margin-bottom:40px; }
.hero .lede{ color:#4E5560; margin:22px 0 34px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-ctas .btn{ min-width:210px; text-align:center; }
.hero-visual{ background:#fff; border:1px solid #CFD9E6; border-radius:12px; padding:14px; box-shadow: 0 24px 48px rgba(69,65,66,0.10); }
.hero-visual img{ border-radius:8px; }
.hero-visual .bar{ height:10px; border-radius:6px; background:#EDF1F6; margin-bottom:14px; overflow:hidden; }
.hero-visual .bar span{ display:block; height:100%; background: var(--color-teal); border-radius:6px; }
.hero-visual .bar.alt span{ background: var(--color-blue); }
.hero-visual .cap{ font-size:0.8rem; color:#8A93A0; margin-top:18px; }

.trust-bar{ background: var(--color-grey); }
.hero .trust-bar{ margin-top: 64px; }
.trust-bar .wrap{ display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; gap:0 30px; padding:22px 24px; }
@media (max-width:980px){ .trust-bar .wrap{ display:grid; grid-template-columns:repeat(2,auto); justify-content:center; gap:16px 60px; } }
@media (max-width:600px){ .trust-bar .wrap{ grid-template-columns:1fr; justify-content:start; } .trust-bar li{ white-space:normal; } }
.trust-bar li{ color:#E8E6E6; font-size:clamp(0.72rem, 1.05vw, 0.95rem); font-weight:500; display:flex; gap:8px; align-items:center; white-space:nowrap; }

@media (max-width:900px){ .trust-bar li{ white-space:normal; } }
.trust-bar li:before{ content:"✓"; color: var(--color-teal); font-weight:700; }
.trust-bar li strong{ color:#fff; }

/* ---------- Problem ---------- */
.problem{ background: var(--color-bg-alt); }
.problem-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:start; }
@media (max-width: 860px){ .problem-grid{ grid-template-columns:1fr; } }
.pain-points{ display:grid; gap:20px; margin-top:8px; }
.pain-card{ background:#fff; border:1px solid var(--color-border); border-left:4px solid var(--color-teal); border-radius:10px; padding:26px 26px 28px; box-shadow: 0 10px 24px rgba(69,65,66,0.08); transition: transform .2s ease, box-shadow .2s ease; }
.pain-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(69,65,66,0.13); }
.pain-card h3{ font-size:1.38rem; margin-bottom:12px; color: var(--color-teal-dark); }
.pain-card p{ color: var(--color-text-muted); font-size:0.95rem; margin-top:0; }

/* ---------- How it works / steps ---------- */
.steps{ counter-reset: step; display:grid; grid-template-columns: repeat(4,1fr); gap:28px; margin-top:36px; }
@media (max-width: 980px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .steps{ grid-template-columns: 1fr; } }
.step{ position:relative; background:#fff; border:1px solid var(--color-border); border-top:4px solid var(--color-teal); border-radius:10px; padding:30px 26px 32px; box-shadow: 0 12px 28px rgba(69,65,66,0.10); transition: transform .2s ease, box-shadow .2s ease; }
.step:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px rgba(69,65,66,0.14); }
.step-num{ font-family: var(--font-heading); font-size:1.5rem; font-weight:700; color:#fff; background: var(--color-teal); width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.step h3{ margin-bottom:10px; font-size:1.22rem; text-align:center; }
.step p{ color: var(--color-text-muted); font-size:0.96rem; }
.section-head{ max-width:none; }
.section-head .lede{ max-width:680px; }
.section-head-row{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; }
.more-link{ font-weight:600; font-size:0.92rem; color: var(--color-teal-dark); white-space:nowrap; }
.more-link:hover{ text-decoration:underline; }
.steps-note{ margin-top:44px; font-size:1.02rem; font-weight:600; color: var(--color-blue-dark); }

/* ---------- Features ---------- */
.features{ background: #767174; color:#fff; }
.features h2{ color:#fff; }
.features .eyebrow{ color:#3BF0E2; }
.features h2 strong{ color: #3BF0E2; }
.feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; margin-top:36px; }
@media (max-width: 860px){ .feature-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .feature-grid{ grid-template-columns: 1fr; } }
.feature-item{ background: rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); border-radius:10px; padding:28px 26px 30px; }
.feature-item .mark{ width:38px; height:38px; border-radius:8px; background: rgba(0,164,153,0.35); color: #3BF0E2; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:16px; }
.feature-item h3{ color:#fff; font-size:1.25rem; margin-bottom:10px; display:flex; align-items:center; gap:12px; }
.feature-item p{ color:#EEECED; font-size:0.92rem; }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; margin-top:36px; align-items:stretch; }
@media (max-width: 940px){ .pricing-grid{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; } }
.price-card{ border:1px solid var(--color-border); border-radius:10px; padding:30px 30px 34px; display:flex; flex-direction:column; background:#fff; color: var(--color-teal); }
.price-alt{ color: var(--color-teal-dark); }
.price-blue{ color: var(--color-blue-dark); }
.tier-icon{ width:34px; height:34px; flex-shrink:0; }
.price-card.featured{ border-color: var(--color-teal); box-shadow: 0 18px 40px rgba(69,65,66,0.12); position:relative; }
.price-card.featured:before{ content:"Most popular"; position:absolute; top:-13px; left:30px; background: var(--color-teal); color:#fff; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:5px 12px; border-radius:20px; }
.tier-name{ font-size:1.75rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color: currentColor; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.price-card p.desc{ color: var(--color-text); font-weight:700; font-size:0.92rem; margin-bottom:20px; min-height:66px; }
.price-card ul{ display:flex; flex-direction:column; justify-content:flex-start; gap:12px; margin-bottom:26px; flex:1; }
.price-card ul li{ font-size:0.92rem; padding-left:22px; position:relative; color: var(--color-text); }
.price-card ul li:before{ content:"+"; position:absolute; left:0; color: var(--color-teal); font-weight:700; }
.price-card .btn{ width:100%; text-align:center; }
.included-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px 26px; margin-top:36px; max-width:920px; margin-left:auto; margin-right:auto; }
@media (max-width: 700px){ .included-list{ grid-template-columns:1fr; } }
.included-list li{ font-size:1.02rem; font-weight:600; padding:16px 22px 16px 54px; min-height:92px; display:flex; align-items:center; position:relative; color: var(--color-grey); background:#fff; border:1px solid var(--color-border); border-left:4px solid var(--color-teal); border-radius:10px; box-shadow: 0 10px 24px rgba(69,65,66,0.08); transition: transform .2s ease, box-shadow .2s ease; }
.included-list li:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(69,65,66,0.12); }
.included-list li:before{ content:"✓"; position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#fff; background: var(--color-teal); width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; }

/* ---------- "Looking for something more?" ---------- */
.more-grid{ display:grid; grid-template-columns: repeat(2,1fr); grid-auto-rows:1fr; gap:24px; margin-top:36px; align-items:stretch; }
@media (max-width: 780px){ .more-grid{ grid-template-columns:1fr; } }
.more-card{ background:#fff; border:1px solid var(--color-border); border-radius:10px; padding:26px 26px 28px; color: var(--color-blue-dark); box-shadow: 0 10px 24px rgba(69,65,66,0.08); transition: transform .2s ease, box-shadow .2s ease; }
.more-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(69,65,66,0.13); }
.more-icon{ width:30px; height:30px; flex-shrink:0; }
.more-card h3{ font-size:1.38rem; margin-bottom:12px; color: currentColor; display:flex; align-items:center; gap:12px; }
.more-card p{ color: var(--color-text-muted); font-size:0.94rem; }
.more-card a{ color: var(--color-teal-dark); font-weight:600; }
.more-card a:hover{ text-decoration:underline; }

/* ---------- Who it's for ---------- */
.audience-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:36px; }
@media (max-width: 940px){ .audience-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .audience-grid{ grid-template-columns: 1fr; } }
.audience-card{ background:#fff; border:1px solid var(--color-border); border-radius:12px; padding:28px 26px 30px; text-align:left; box-shadow: 0 12px 28px rgba(69,65,66,0.10); transition: transform .2s ease, box-shadow .2s ease; color: var(--color-teal); }
.audience-alt{ color: var(--color-teal-dark); }
.audience-blue{ color: var(--color-blue-dark); }
.audience-grey{ color: var(--color-grey); }
.audience-icon{ width:40px; height:40px; margin-bottom:16px; }
.audience-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(69,65,66,0.15); }
.audience-card h3{ font-size:1.28rem; font-weight:600; color: currentColor; margin-bottom:12px; min-height:2.6em; display:flex; align-items:flex-start; }
.audience-card p{ font-size:0.96rem; color: var(--color-text); }
.audience-note{ margin-top:34px; font-size:0.92rem; color: var(--color-text-muted); border-top:1px solid var(--color-border); padding-top:26px; }

/* ---------- Credibility & testimonials ---------- */
.credibility{ background: #fff; border-top:1px solid var(--color-border); }
.cred-grid{ display:grid; grid-template-columns: 0.72fr 1.28fr; gap:44px; align-items:center; }
@media (max-width: 860px){ .cred-grid{ grid-template-columns:1fr; } }
.stat-block{ display:grid; grid-template-columns:1fr; gap:14px; }
.stat{ background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:10px; padding:18px 20px; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:16px; color: var(--color-teal); transition: transform .2s ease, box-shadow .2s ease; }
.stat:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(69,65,66,0.12); }
.stat-alt{ color: var(--color-teal-dark); }
.stat-blue{ color: var(--color-blue-dark); }
.stat-icon{ width:30px; height:30px; grid-row:span 2; }
.stat .num{ font-family: var(--font-heading); font-size:1.85rem; color: currentColor; font-weight:400; line-height:1.05; letter-spacing:-0.01em; }
.stat .label{ font-size:0.88rem; color: var(--color-text-muted); margin-top:3px; grid-column:2; }
.cred-text p{ margin-top:16px; color: var(--color-text-muted); }
.quote-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:36px; }
@media (max-width: 860px){ .quote-grid{ grid-template-columns:1fr; } }
.quote-card{ background:#fff; border:1px solid var(--color-border); border-top:4px solid var(--color-teal); border-radius:10px; padding:30px 28px 26px; position:relative; box-shadow: 0 12px 28px rgba(69,65,66,0.10); transition: transform .2s ease, box-shadow .2s ease; }
.quote-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px rgba(69,65,66,0.14); }
.quote-card:before{ content:"\201C"; font-family: var(--font-heading); font-weight:600; font-size:4.2rem; line-height:0.8; color: var(--color-teal); display:block; margin-bottom:6px; }
.quote-card p{ font-size:1.12rem; line-height:1.55; color: var(--color-grey); font-style:italic; font-weight:600; }

/* ---------- Differentiators (How It Works page) ---------- */
.diff-grid{ display:grid; grid-template-columns: repeat(2,1fr); grid-auto-rows:1fr; gap:24px; margin-top:36px; align-items:stretch; }
@media (max-width: 780px){ .diff-grid{ grid-template-columns:1fr; } }
.diff-card{ background:#fff; border:1px solid var(--color-border); border-radius:10px; padding:26px 26px 28px; color: var(--color-teal-dark); box-shadow: 0 10px 24px rgba(69,65,66,0.08); transition: transform .2s ease, box-shadow .2s ease; }
.diff-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(69,65,66,0.13); }
.diff-icon{ width:30px; height:30px; flex-shrink:0; }
.diff-card h3{ font-size:1.15rem; margin-bottom:10px; color: currentColor; display:flex; align-items:center; gap:12px; }
.diff-card p{ color: var(--color-text); font-size:0.97rem; }

/* ---------- FAQ ---------- */
.faq-list{ margin-top:36px; display:grid; gap:0; max-width:820px; }
.faq-item{ border-bottom:1px solid var(--color-border); padding:26px 0; }
.faq-item h3{ font-size:1.05rem; margin-bottom:10px; }
.faq-item p{ color: var(--color-text-muted); font-size:0.96rem; }

/* ---------- Final CTA ---------- */
.final-cta{ background: var(--color-grey); color:#fff; text-align:center; padding:44px 0; }
.final-cta h2{ color:#fff; }
.final-cta .lede{ color:#D8D6D6; margin:16px auto 28px; }
.final-cta .reassure{ margin-top:18px; font-size:0.88rem; color:#A9A6A7; }

/* ---------- Footer ---------- */
footer{ background: var(--color-grey-deep); color:#B4B1B2; padding:50px 0 30px; font-size:0.88rem; }
.footer-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:22px; align-items:center; }
footer .logo{ color:#fff; }
footer .logo-mark{ background:#fff; border-radius:8px; padding:3px; }
footer a:hover{ color:#fff; }

/* ---------- Utility ---------- */
.draft-flag{ display:inline-block; background:#FDF3DC; color:#7A5B12; font-size:0.72rem; font-weight:700; padding:2px 8px; border-radius:4px; margin-left:8px; vertical-align:middle; letter-spacing:0.02em; }

/* ---------- Resources page ---------- */
.resource-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; margin-top:36px; }
@media (max-width: 940px){ .resource-grid{ grid-template-columns:1fr; max-width:460px; } }
.resource-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-border); border-radius:10px; padding:26px 26px 28px; transition: box-shadow .2s ease, transform .2s ease; }
.resource-card:hover{ box-shadow: 0 14px 32px rgba(69,65,66,0.12); transform: translateY(-2px); color: inherit; }
.resource-card h3{ font-size:1.12rem; margin:10px 0 8px; color: var(--color-grey); }
.resource-card p{ color: var(--color-text-muted); font-size:0.94rem; flex:1; }
.resource-tag{ font-size:0.74rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--color-teal); }
.resource-thumb{ background: var(--color-paleblue); border-radius:8px; height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.play-icon{ width:52px; height:52px; border-radius:50%; background: var(--color-teal); position:relative; }
.play-icon:after{ content:""; position:absolute; left:20px; top:15px; border-left:16px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; }
.resource-link{ margin-top:14px; font-weight:600; color: var(--color-teal); font-size:0.92rem; }

/* ---------- Client logo marquee ---------- */
.logo-marquee{ padding: 30px 0 36px; background:#fff; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); overflow:hidden; }
.marquee-caption{ text-align:center; font-size:0.8rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--color-text-muted); margin-bottom:26px; }
.marquee{ display:flex; width:max-content; animation: marquee-scroll 75s linear infinite; }
.marquee:hover{ animation-play-state: paused; }
.marquee-track{ display:flex; align-items:center; gap:72px; padding-right:72px; }
.marquee-track img{ height:auto; max-height:46px; width:auto; max-width:170px; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; } .marquee-track[aria-hidden]{ display:none; } }

/* ---------- Case studies ---------- */
.case-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:26px; margin-top:36px; }
@media (max-width: 860px){ .case-grid{ grid-template-columns:1fr; } }
.case-card{ background:#fff; border:1px solid var(--color-border); border-radius:10px; padding:28px 28px 30px; transition: box-shadow .2s ease, transform .2s ease; box-shadow: 0 10px 24px rgba(69,65,66,0.08); }
.case-card:hover{ box-shadow: 0 14px 32px rgba(69,65,66,0.12); transform: translateY(-2px); color:inherit; }
.case-card h3{ font-size:1.15rem; margin:10px 0 8px; color: var(--color-grey); }
.case-card p{ color: var(--color-text-muted); font-size:0.95rem; flex:1; }

.lede-oneline{ text-align:center; white-space:nowrap; }
@media (max-width:1020px){ .lede-oneline{ white-space:normal; } }

/* ---------- Section divider ---------- */
.section-divider{ border:none; border-top:1px solid var(--color-border); margin:0 0 56px; }

@media (max-width:720px){ h2[style*='nowrap']{ white-space:normal !important; } }

/* ---------- Report showcase (product page) ---------- */
.report-showcase{ margin-top:44px; }
.showcase-caption{ text-align:center; margin-top:18px; font-size:0.95rem; font-weight:600; color: var(--color-blue-dark); }

/* ---------- 'Thinking Board is different' cards ---------- */
.different-stack{ display:flex; flex-direction:column; justify-content:space-between; gap:20px; height:100%; }
.different-card{ flex:1; display:flex; flex-direction:column; justify-content:center; background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%); color:#fff; border-radius:12px; padding:30px 30px 32px; box-shadow: 0 16px 36px rgba(0,164,153,0.32); transition: transform .2s ease, box-shadow .2s ease; }
.different-card:hover{ transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0,164,153,0.4); }
.different-card h3{ color:#fff; font-size:1.35rem; margin-bottom:10px; }
.different-card h3:before{ content:"✓"; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.22); font-size:0.85rem; font-weight:700; margin-right:12px; vertical-align:2px; }
.different-card p{ color: rgba(255,255,255,0.94); font-size:1rem; }

/* ---------- Featured audience note ---------- */
.audience-note-feature{ margin-top:40px; background:#fff; border:none; border-left:5px solid var(--color-teal); border-radius:10px; padding:28px 32px; font-size:1.08rem; color: var(--color-grey); box-shadow: 0 12px 28px rgba(69,65,66,0.10); }

/* ---------- Hero intro card (matches chart card) ---------- */
.hero-intro-card{ display:flex; flex-direction:column; justify-content:center; gap:26px; padding:34px 32px; }
.hero-intro-card .lede{ margin:0; }

/* ---------- Registered trademark symbol ---------- */
.reg{ font-size:0.62em; vertical-align:0.42em; line-height:1; font-weight:400; letter-spacing:0; }
h1 .reg, h2 .reg, h3 .reg{ font-size:0.42em; vertical-align:0.78em; }
strong .reg, b .reg{ font-weight:400; }
.logo sup{ font-size:0.4em; font-weight:400; vertical-align:baseline; position:relative; top:-0.85em; margin-left:1px; }

/* ---------- Feature icons ---------- */
.feature-icon{ width:30px; height:30px; flex-shrink:0; color:#3BF0E2; }

/* ---------- About page ---------- */
.timeline{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
@media (max-width:860px){ .timeline{ grid-template-columns:1fr; } }
.timeline-step{ background:#fff; border:1px solid var(--color-border); border-top:4px solid currentColor; border-radius:12px; padding:28px 26px 30px; color: var(--color-teal); box-shadow: 0 14px 32px rgba(69,65,66,0.12); position:relative; transition: transform .2s ease, box-shadow .2s ease; }
.timeline-step:hover{ transform: translateY(-3px); box-shadow: 0 20px 42px rgba(69,65,66,0.16); }
.timeline-alt{ color: var(--color-teal-dark); }
.timeline-blue{ color: var(--color-blue-dark); }
.timeline-year{ font-family: var(--font-heading); font-size:2.3rem; font-weight:400; line-height:1; color: currentColor; margin-bottom:14px; }
.timeline-step h3{ font-size:1.15rem; color: var(--color-grey); margin-bottom:8px; }
.timeline-step p{ color: var(--color-text); font-size:0.96rem; }

.sector-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
@media (max-width:860px){ .sector-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sector-grid{ grid-template-columns:1fr; } }
.sector{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--color-border); border-left:4px solid var(--color-teal); border-radius:10px; padding:18px 20px; color: var(--color-teal); font-weight:600; box-shadow: 0 10px 24px rgba(69,65,66,0.09); transition: transform .2s ease, box-shadow .2s ease; }
.sector:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(69,65,66,0.14); }
.sector span{ color: var(--color-grey); font-size:1.02rem; }
.sector-icon{ width:26px; height:26px; flex-shrink:0; padding:7px; box-sizing:content-box; background:rgba(0,164,153,0.10); border-radius:50%; }

.mission-panel{ margin-top:36px; background:var(--color-bg-alt); border-left:5px solid var(--color-teal); border-radius:10px; padding:30px 34px; box-shadow: 0 12px 28px rgba(69,65,66,0.10); }
.mission-quote{ font-family: var(--font-heading); font-weight:300; font-size:1.7rem; line-height:1.35; color: var(--color-grey); }

.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px; }
@media (max-width:860px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
.team-card{ text-align:center; }
.team-photo{ aspect-ratio:1/1; background:var(--color-paleblue); border:1px solid var(--color-border); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#8FA0B4; font-size:0.85rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; box-shadow: 0 10px 24px rgba(69,65,66,0.08); }
.team-card h3{ font-size:1.05rem; color: var(--color-grey); margin-bottom:2px; }
.team-card p{ font-size:0.9rem; color: var(--color-text-muted); }

/* ---------- Process flow diagram ---------- */
.process-flow{ margin-top:34px; background:#fff; border:1px solid var(--color-border); border-radius:12px; padding:18px 22px; box-shadow: 0 12px 28px rgba(69,65,66,0.08); overflow-x:auto; }
.process-flow img{ min-width:760px; width:100%; }

/* ---------- About page intro bar ---------- */
.about-intro-bar{ color:#E8E6E6; font-size:1.15rem; font-weight:500; text-align:center; max-width:900px; margin:0 auto; }
.about-intro-bar strong{ color:#fff; }

/* ---------- ULTIMATE option heading (product page) ---------- */
.ultimate-heading{ margin-top:34px; font-size:1.35rem; font-weight:600; color: var(--color-teal-dark); text-align:left; max-width:860px; line-height:1.35; }

/* ---------- Bulletin thumbnails ---------- */
.bulletin-thumb{ background:#fff; border:1px solid var(--color-border); border-radius:8px; overflow:hidden; margin-bottom:16px; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.bulletin-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center top; }

/* ---------- Expandable case studies ---------- */
.case-grid{ grid-auto-rows:1fr; align-items:stretch; }
.case-card{ display:flex; flex-direction:column; }
.case-card > summary{ display:flex; flex-direction:column; height:100%; }
.case-card:not([open]) > summary > p{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.case-card:not([open]) > summary > .resource-link{ margin-top:auto; padding-top:14px; }
.case-card[open]{ grid-row:auto; }
.case-card-wide{ grid-column:1 / -1; }
.case-card > summary{ list-style:none; cursor:pointer; }
.case-card > summary::-webkit-details-marker{ display:none; }
.case-card > summary::marker{ content:''; }
.case-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(69,65,66,0.13); }
.case-card[open]{ transform:none; box-shadow: 0 16px 34px rgba(69,65,66,0.13); }
.case-card .resource-link{ display:inline-block; margin-top:14px; }
.case-card[open] > summary .resource-link{ display:none; }
.case-body{ margin-top:20px; padding-top:20px; border-top:1px solid var(--color-border); }
.case-body h4{ font-family: var(--font-heading); font-size:0.82rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--color-teal-dark); margin:0 0 8px; }
.case-body h4 + p{ margin-bottom:18px; }
.case-body p:last-child{ margin-bottom:0; }
.case-body p{ color: var(--color-text); font-size:0.95rem; }

/* ---------- Video thumbnail with image ---------- */
.resource-thumb.has-image{ position:relative; padding:0; overflow:hidden; }
.resource-thumb.has-image img{ width:100%; height:100%; object-fit:cover; }
.resource-thumb.has-image .play-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 6px 18px rgba(0,0,0,0.28); }

/* ---------- Single-video layout ---------- */
.resource-grid-single{ grid-template-columns:minmax(0,520px); justify-content:center; }

/* thumbnail already carries its own play overlay — show it whole, 16:9 */
.resource-thumb.has-image{ aspect-ratio:16/9; height:auto; }
.resource-thumb.has-image img{ object-fit:cover; object-position:center; }

/* ---------- Team profile cards ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:36px; align-items:start; }
@media (max-width:860px){ .team-grid{ grid-template-columns:1fr; } }
.profile-card{ display:grid; grid-template-columns:120px 1fr; gap:22px; background:#fff; border:1px solid var(--color-border); border-left:4px solid var(--color-teal); border-radius:12px; padding:26px 28px 28px; box-shadow: 0 12px 28px rgba(69,65,66,0.10); }
@media (max-width:520px){ .profile-card{ grid-template-columns:1fr; } }
.profile-photo{ width:120px; height:120px; border-radius:50%; object-fit:cover; object-position:center top; }
.profile-photo-empty{ background:var(--color-paleblue); display:flex; align-items:center; justify-content:center; color:#8FA0B4; font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; }
.profile-body h3{ font-size:1.25rem; color: var(--color-teal-dark); margin-bottom:2px; }
.profile-body p{ color: var(--color-text); font-size:0.95rem; margin-bottom:10px; }
.profile-body p:first-of-type{ color: var(--color-text-muted); font-size:0.9rem; margin-bottom:12px; }
.profile-body p:last-child{ margin-bottom:0; }
.profile-pending{ border-left-color: var(--color-border); }

/* ---------- Footer legal links ---------- */
.footer-legal{ margin-top:12px; font-size:0.88rem; }
.footer-legal a{ text-decoration:underline; }
.footer-sep{ opacity:0.5; margin:0 8px; }
.footer-company{ margin-top:12px; font-size:0.8rem; line-height:1.6; opacity:0.72; max-width:760px; }

/* ---------- Legal pages ---------- */
.legal{ max-width:860px; }
.legal-intro{ font-size:1.05rem; color: var(--color-text-muted); margin-bottom:34px; padding-bottom:24px; border-bottom:1px solid var(--color-border); }
.legal-h{ font-size:1.25rem; font-weight:600; color: var(--color-teal-dark); margin:34px 0 14px; }
.legal-h:first-of-type{ margin-top:0; }
.clause{ display:grid; grid-template-columns:62px 1fr; gap:10px; margin-bottom:12px; font-size:0.97rem; color: var(--color-text); line-height:1.65; }
.clause-num{ color: var(--color-text-muted); font-weight:600; font-variant-numeric:tabular-nums; }
.clause-plain{ display:block; padding-left:72px; }
@media (max-width:620px){ .clause{ grid-template-columns:52px 1fr; } .clause-plain{ padding-left:0; } }
.legal a{ color: var(--color-teal-dark); text-decoration:underline; }

/* ---------- Problem section: cards below the text, 2x2 ---------- */
.pain-grid{ display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; gap:24px; margin-top:36px; align-items:stretch; }
@media (max-width:780px){ .pain-grid{ grid-template-columns:1fr; } }