/* ============================================================
   Cloud Connected — cloudconnected.ai
   styles.css — design tokens + base/shared styles
   ============================================================ */

:root{
  /* palette */
  --navy:#16243f;
  --navy-deep:#0f1a30;
  --teal:#2a8a86;
  --teal-bright:#33a39d;
  --gold:#c6a45c;
  --gold-soft:#d4b878;
  --paper:#f7f5ee;
  --paper-warm:#f0ece0;
  --ink:#1c2434;
  --muted:#454f5e;
  --line:rgba(22,36,63,.12);
  --line-strong:rgba(22,36,63,.22);
  --white:#ffffff;

  /* semantic aliases used across nav + pages */
  --bg-page:var(--paper);
  --bg-warm:var(--paper-warm);
  --bg-card:var(--white);
  --text-primary:var(--ink);
  --text-secondary:var(--muted);
  --text-bright:var(--navy);
  --accent:var(--teal);
  --accent-dim:var(--teal-bright);
  --accent-text:var(--teal);
  --border-subtle:var(--line);
  --border-default:var(--line-strong);

  /* type */
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Newsreader",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* layout */
  --content-max:1180px;
  --nav-h:68px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:18px;
  font-weight:450;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* offset for fixed nav */
  padding-top:var(--nav-h);
}
/* Smaller body/UI copy gets medium weight so Newsreader's thin strokes
   stay legible below ~17px (cards, captions, table cells, descriptions). */
p,li,td,th,label,.lead,input,select,textarea{font-weight:450}
::selection{background:var(--gold);color:var(--navy-deep)}

.container{max-width:var(--content-max);margin:0 auto;padding:0 32px}

h1,h2,h3{font-family:var(--font-display);line-height:1.05;font-weight:600;letter-spacing:-.015em;color:var(--navy)}
h2{font-size:clamp(32px,4.5vw,52px)}
h3{font-size:22px}
p{color:var(--muted)}

.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:18px}
.eyebrow.gold{color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;text-decoration:none;font-weight:500;padding:13px 24px;border-radius:3px;transition:all .2s;cursor:pointer;border:none}
.btn-primary{background:var(--navy);color:var(--paper)}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-1px)}
.btn-outline{border:1px solid var(--line-strong);color:var(--navy);background:transparent}
.btn-outline:hover{border-color:var(--navy);background:rgba(22,36,63,.03)}

.divider{height:1px;background:var(--line);margin:0}
.section{padding:96px 0}
.section-tight{padding:72px 0}

/* --- Mobile: full-width buttons in action rows for easier thumb taps --- */
@media (max-width:560px){
  .hero-actions, .mc-actions, .signin-actions, .nf-actions,
  .cta-actions, .btn-row, .ext-row{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions .btn, .mc-actions .btn, .signin-actions .btn,
  .nf-actions .btn, .cta-actions .btn, .btn-row .btn,
  .ext-row .btn{
    width:100%;
    justify-content:center;
  }
}