/* MetaCool Systems site. Light only. Patent applied for. */
:root{
  --paper:#F7F9FA;      /* cool white page */
  --panel:#FFFFFF;
  --ink:#1C2B36;        /* steel navy text */
  --ink-2:#4A5B67;      /* secondary text */
  --rule:#D5DEE3;
  --cool:#0B7A84;       /* coolant teal: actions and links */
  --cool-tint:#E3F2F3;
  --heat-1:#F2B33D; --heat-2:#E57A2E; --heat-3:#C8361F;   /* used only in the heat band */
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.55}
a{color:var(--cool);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--heat-2);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
@media (max-width:480px){.wrap{padding:0 16px}}

/* header */
.top{border-bottom:1px solid var(--rule);background:var(--panel)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:"Barlow Semi Condensed","Barlow",sans-serif;font-weight:700;font-size:22px;letter-spacing:.2px}
.brand svg{flex:none}
.nav{display:flex;gap:20px;font-size:16px}
.nav a{color:var(--ink-2);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--cool)}

/* hero */
.hero{padding:64px 0 40px}
.hero h1{font-family:"Barlow Semi Condensed","Barlow",sans-serif;font-weight:700;
  font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-.5px;margin:0 0 20px;max-width:15ch}
.hero p.lede{font-size:21px;color:var(--ink-2);max-width:56ch;margin:0 0 28px}

/* the heat band: the one bold element */
.band{margin:8px 0 0;padding:0}
.band .bar{position:relative;height:56px;border-radius:6px;
  background:linear-gradient(90deg,#BFE3E6 0%,#DCEFE6 18%,var(--heat-1) 42%,var(--heat-2) 68%,var(--heat-3) 100%)}
.band .tick{position:absolute;top:0;bottom:0;width:2px;background:var(--ink)}
.band .tick span{position:absolute;top:-30px;left:-1px;white-space:nowrap;font-size:15px;font-weight:600}
.band .scale{display:flex;justify-content:space-between;font-family:"Barlow Semi Condensed",sans-serif;
  font-size:15px;color:var(--ink-2);margin-top:6px}
.band figcaption{font-size:15px;color:var(--ink-2);margin-top:10px;max-width:70ch}

/* the hero's bold element: what you say and what MetaCool does */
.said{margin-top:56px;display:grid;gap:28px;max-width:860px}
.exchange{border-left:4px solid var(--cool);padding:4px 0 4px 20px}
.exchange .you{font-family:"Barlow Semi Condensed","Barlow",sans-serif;font-weight:600;
  font-size:clamp(24px,3.2vw,34px);line-height:1.2;margin:0 0 8px;color:var(--ink)}
.exchange .ai{margin:0;font-size:19px;color:var(--cool);font-weight:600}
.lede-2{font-size:19px;color:var(--ink-2);max-width:62ch;margin:0 0 36px}
#heat .band{margin-top:48px}

.btn{display:inline-block;background:var(--cool);color:#fff;text-decoration:none;font-weight:600;
  padding:14px 22px;border-radius:6px;font-size:18px}
.btn:hover{background:#086770}
.btn.ghost{background:transparent;color:var(--cool);border:2px solid var(--cool);padding:12px 20px}
.actions{display:flex;gap:14px;flex-wrap:wrap}

/* sections */
section{padding:56px 0;border-top:1px solid var(--rule)}
h2{font-family:"Barlow Semi Condensed","Barlow",sans-serif;font-weight:700;font-size:36px;line-height:1.1;margin:0 0 18px}
h3{font-size:21px;margin:0 0 6px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.three p{margin:0;color:var(--ink-2)}
@media (max-width:820px){.three{grid-template-columns:1fr;gap:24px}}

.talk{background:var(--cool-tint);border-top:0;border-radius:10px;padding:48px 40px;margin:56px 0}
@media (max-width:600px){.talk{padding:32px 20px}}
.talk .cols{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
@media (max-width:820px){.talk .cols{grid-template-columns:1fr}}
.talk ol{margin:0;padding-left:1.3em}
.talk li{margin:0 0 12px}
.note{font-size:16px;color:var(--ink-2)}
.warn{font-weight:600;color:var(--heat-3)}

/* documents: privacy, terms, support */
.doc{max-width:72ch;padding:48px 0 64px}
.doc h1{font-family:"Barlow Semi Condensed","Barlow",sans-serif;font-size:44px;line-height:1.05;margin:0 0 8px}
.doc h2{font-size:26px;margin:36px 0 8px}
.doc .meta{color:var(--ink-2);font-size:16px;margin:0 0 24px}
.draft{background:#FFF4DC;border-left:4px solid var(--heat-1);padding:12px 16px;font-size:16px;margin:0 0 24px}

footer{border-top:1px solid var(--rule);background:var(--panel);padding:28px 0;font-size:15px;color:var(--ink-2)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer nav{display:flex;gap:18px;flex-wrap:wrap}