/* Think Shares — legal site.
 * Light document pages on white, with deep blue hero sections.
 * Palette and type tokens live in :root; everything else references them.
 */

:root{
  --ink:#0A2540;
  --muted:#4A5A73;
  --blue:#2563EB;
  --blue-dark:#1D4ED8;
  --blue-light:#3B82F6;
  --cyan:#06B6D4;
  --cyan-light:#22D3EE;
  --line:#E2E8F5;
  --paper:#F5F8FF;
  --surface:#FFFFFF;
  --soft:#EFF4FF;
  --night:#061024;
  --night-2:#0B1B38;
  --on-night:#A9BEDC;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  font-synthesis:none;
}
/* No background on <html>, so the body's colour propagates to the canvas and
 * the dark home page stays dark past the end of the content. */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--paper)}
body[data-page="home"]{background:var(--night)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
a:focus-visible{outline:2px solid var(--cyan-light);outline-offset:5px;border-radius:4px}
::selection{background:#CFE3FF;color:var(--ink)}
.skip-link{position:fixed;left:16px;top:-80px;background:var(--blue);color:#fff;padding:14px;border-radius:0 0 8px 8px;z-index:20}
.skip-link:focus{top:0}

/* Fallback shown only when scripts are unavailable. */
noscript main{display:block;max-width:680px;margin:auto;padding:70px 24px}
body[data-page="home"] noscript main{color:#fff}

/* ---------- Header ---------- */

.site-header{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.header-inner{max-width:1200px;margin:auto;padding:0 48px;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;font-size:21px;font-weight:700;letter-spacing:-.6px}
.brand:hover{color:inherit}
.brand-divider{width:1px;height:20px;background:var(--line);margin:0 14px}
.brand-label{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.header-inner nav{display:flex;gap:28px;font-size:13px;font-weight:500}
.header-inner nav a{padding:30px 0 27px;border-bottom:2px solid transparent}
.header-inner nav a[aria-current]{color:var(--blue);border-color:var(--blue)}
.read-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.read-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan-light));transform:scaleX(0);transform-origin:0 50%}

/* Over the home hero the header goes dark to match. */
body[data-page="home"] .site-header{background:rgba(6,16,36,.72);border-bottom-color:rgba(255,255,255,.08)}
body[data-page="home"] .brand{color:#fff}
body[data-page="home"] .brand-divider{background:rgba(255,255,255,.2)}
body[data-page="home"] .brand-label,
body[data-page="home"] .header-inner nav a{color:var(--on-night)}
body[data-page="home"] .header-inner nav a:hover{color:var(--cyan-light)}

/* ---------- Hero backdrop (shared) ---------- */

.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:
  radial-gradient(90% 120% at 12% -10%,#123163 0%,transparent 60%),
  radial-gradient(70% 110% at 92% 8%,#0C3B63 0%,transparent 58%),
  linear-gradient(165deg,var(--night-2),var(--night) 68%)}

/* ---------- Home hero ---------- */

.home-main{position:relative;isolation:isolate;overflow:hidden;padding:96px 0 0;color:#fff}
.hero-inner{position:relative;z-index:1;max-width:1200px;margin:auto;padding:0 48px}
.eyebrow{color:var(--cyan-light);font-size:10px;font-weight:700;letter-spacing:2.4px;line-height:1.6}
h1{font-size:clamp(42px,5vw,64px);font-weight:700;letter-spacing:-2.2px;line-height:1.06;margin:18px 0 22px}
.home-main h1{font-size:clamp(46px,6.4vw,82px)}
.home-main h1 em{font-style:normal;background:linear-gradient(100deg,#60A5FA,#22D3EE 52%,#A5F3FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro{font-size:16px;line-height:1.8;max-width:580px;margin:0;color:var(--on-night)}

.policy-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.policy-card{display:flex;flex-direction:column;padding:34px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.055);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;transition:transform .3s ease,border-color .3s,box-shadow .3s}
.policy-card:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.42);box-shadow:0 26px 60px -28px rgba(37,99,235,.8);color:#fff}
.card-index{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--cyan-light)}
.policy-card h2{font-size:31px;font-weight:600;letter-spacing:-1px;margin:34px 0 12px}
.policy-card p{color:var(--on-night);font-size:14px;line-height:1.8;margin:0 0 22px;max-width:360px}
.card-meta{font-size:11px;letter-spacing:.4px;color:#7D93B4;margin-top:auto}
.card-action{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:500;color:var(--cyan-light)}
.card-arrow{font-size:18px;transition:transform .3s ease}
.policy-card:hover .card-arrow{transform:translateX(6px)}
.home-contact{display:flex;gap:18px;align-items:center;margin-top:44px;padding-bottom:96px;font-size:14px;color:var(--on-night)}
.home-contact a{color:var(--cyan-light)}

/* ---------- Document hero ---------- */

.page-hero{position:relative;isolation:isolate;overflow:hidden;padding:44px 0 56px;color:#fff}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,var(--blue),var(--cyan-light),transparent)}
.breadcrumb{display:inline-flex;gap:10px;align-items:center;color:rgba(255,255,255,.62);font-size:12px;margin-bottom:40px;transition:gap .25s}
.breadcrumb:hover{color:#fff;gap:14px}
.page-hero h1{color:#fff}
.metadata{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:11px;color:#8FA7C8;margin-top:26px}
.status-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--cyan-light);box-shadow:0 0 10px 2px rgba(34,211,238,.55)}
.metadata-divider{color:#42587A;margin:0 6px}

/* ---------- Document body ---------- */

.document-layout{max-width:1200px;margin:auto;padding:48px 48px 76px;display:grid;grid-template-columns:235px minmax(0,1fr);gap:76px}
.contents{align-self:start;position:sticky;top:120px}
.contents-title{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--ink);margin-bottom:18px}
.contents ol{list-style:none;margin:0;padding:0}
.contents li a{display:flex;align-items:baseline;gap:13px;padding:10px 12px;border-left:2px solid var(--line);border-radius:0 7px 7px 0;font-size:12px;line-height:1.5;color:var(--muted);transition:color .2s,background .2s,border-color .2s}
.contents li a span{font-size:10px;color:#8FA0BC;font-variant-numeric:tabular-nums}
.contents li a:hover{background:var(--soft);border-color:#B6CBFF}
.contents li a[aria-current]{border-color:var(--blue);background:var(--soft);color:var(--blue-dark);font-weight:700}
.contents li a[aria-current] span{color:var(--blue)}
.help-box{margin-top:34px;border-top:1px solid var(--line);padding:24px 12px 0}
.help-box h2{font-size:14px;margin:0 0 8px}
.help-box p{font-size:12px;line-height:1.7;color:var(--muted)}
.help-box a{font-size:12px;color:var(--blue);overflow-wrap:anywhere}

.summary{position:relative;overflow:hidden;background:linear-gradient(135deg,#F0F6FF,var(--surface) 70%);border:1px solid var(--line);border-radius:14px;padding:24px 28px;margin-bottom:40px}
.summary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--blue),var(--cyan-light))}
.summary .eyebrow{color:var(--blue)}
.summary p{font-size:14px;line-height:1.85;margin:10px 0 0;color:#33456B}

.legal-section{padding-bottom:30px;margin-bottom:28px;border-bottom:1px solid var(--line);scroll-margin-top:120px}
.legal-section h2{display:flex;gap:15px;align-items:baseline;font-size:22px;font-weight:600;letter-spacing:-.6px;margin:0 0 17px}
.section-number{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:0;min-width:18px;font-variant-numeric:tabular-nums}
.heading-anchor{opacity:0;font-size:15px;margin-left:10px;color:var(--blue-light);transition:opacity .2s}
.legal-section h2 a:hover .heading-anchor,.legal-section h2 a:focus-visible .heading-anchor{opacity:1}
.legal-section p,.legal-section li{font-size:14px;line-height:1.9;color:var(--muted)}
.legal-section p{margin:12px 0}
.legal-section ul{padding-left:20px;margin:15px 0 0}
.legal-section li{padding-left:5px;margin:6px 0}
.legal-section li::marker{color:var(--blue-light)}
.contact-link a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.document-end{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted)}
.document-end a{margin-left:auto;color:var(--blue);font-weight:500}

/* ---------- Footer ---------- */

.site-footer{max-width:1200px;margin:auto;padding:32px 48px 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:11px;color:var(--muted)}
.footer-brand{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.6px}
.site-footer p{margin-bottom:0;font-size:10px}
body[data-page="home"] .site-footer{border-top-color:rgba(255,255,255,.1);color:#7D93B4}
body[data-page="home"] .footer-brand{color:#fff}
body[data-page="home"] .site-footer a:hover{color:var(--cyan-light)}

/* ---------- Responsive ---------- */

@media(min-width:1500px){.home-main{padding-top:120px}}
@media(max-width:900px){
  .document-layout{gap:35px;grid-template-columns:210px minmax(0,1fr);padding-left:32px;padding-right:32px}
  .header-inner,.hero-inner,.site-footer{padding-left:32px;padding-right:32px}
}
@media(max-width:650px){
  .header-inner{min-height:68px;padding:0 20px;gap:14px}
  .brand{font-size:18px}
  .brand-divider{margin:0 8px}
  .brand-label{font-size:12px}
  .desktop-text{display:none}
  .header-inner nav{gap:16px;font-size:12px}
  .header-inner nav a{padding:23px 0 21px}
  .hero-inner{padding:0 22px}
  .page-hero{padding:26px 0 34px}
  .breadcrumb{margin-bottom:28px}
  h1{letter-spacing:-1.5px}
  .intro{font-size:15px}
  .metadata{font-size:10px;gap:6px}
  .home-main{padding-top:60px}
  .policy-cards{grid-template-columns:1fr;margin-top:36px;gap:18px}
  .policy-card{padding:27px}
  .policy-card h2{font-size:27px;margin-top:26px}
  .home-contact{display:block;line-height:2;margin-top:34px;padding-bottom:60px}
  .document-layout{display:block;padding:28px 22px 60px}
  .contents{position:static;margin-bottom:30px}
  .contents nav{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:18px 12px}
  .contents-title{margin-left:12px;margin-bottom:10px}
  .contents ol{display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .contents li a{font-size:11px;padding:9px 8px;gap:7px}
  .help-box{display:none}
  .summary{padding:21px}
  .legal-section h2{font-size:20px}
  .document-end{gap:8px}
  .document-end a{flex-basis:100%;margin:4px 0 0}
  .site-footer{padding:26px 22px 32px;flex-wrap:wrap;gap:20px}
}

/* ---------- Motion & print ---------- */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
@media print{
  .site-header,.contents,.site-footer,.breadcrumb,.document-end,.skip-link,.hero-bg{display:none}
  body,body[data-page="home"]{background:#fff}
  .page-hero{padding:0;color:#000}
  .page-hero::after{display:none}
  .page-hero h1,h1{color:#000;font-size:36px}
  .intro,.metadata{color:#333}
  .document-layout{display:block;padding:25px 0;max-width:none}
  .legal-section{break-inside:avoid}
  .heading-anchor{display:none}
  .summary{background:#fff}
  .legal-section p,.legal-section li{color:#222}
}
