/* Local fallback faces. CDN fonts are requested in index.html first. */
@font-face {
  font-family: "Roboto Local";
  src: url("./assets/fonts/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "Roboto Local";
  src: url("./assets/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 100 900;
}

@font-face {
  font-family: "Noto Sans Display Local";
  src: url("./assets/fonts/NotoSansDisplay-VariableFont_wdth,wght.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

/* Defaults: remove browser spacing noise and make width calculations predictable. */

* {
  box-sizing: border-box;
}

body,
h1,
h2,
p,
ul {
  margin: 0;
}

ul {
  padding-left: 0;
}

img {
  display: block;
}
/* The body padding is the outer green frame around the white content panel.
   The page is a vertical flex container so the panel can stretch to the viewport bottom. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px;
  color: #454545;
  background-color: #E7F586;
}

/* Main is the translucent white panel that sits above the animated body background. */
main {
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background-color: rgb(255 255 255 / 0.88);
}

/* Content blocks stay above the background canvas. */
.header,
.tagline,
.features,
.coming-soon,
.contact,
.footer {
  position: relative;
  z-index: 1;
}

/* Full-viewport animated canvas behind the panel. */
.background-clouds {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* Header */

/* Wordmark color only; size and placement are defined later. */
.header {
  color: #6f68d9;
}

/* Brand wordmark: italic Roboto, slightly heavier and wider to echo the old Flex feel. */
header h1 {
  font-family: "Roboto", "Roboto Local", sans-serif;
  font-size: 38px;
  font-style: italic;
  font-synthesis: none;
  font-weight: 790;
  letter-spacing: 0.4px;
}


/* Tagline */

/* Primary tagline line uses upright Roboto. */
.tagline {
  font-family: "Roboto", "Roboto Local", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-synthesis: none;
  font-weight: 470;
}

/* Secondary tagline line uses the italic face directly; no synthetic italic. */
.tagline em {
  font-style: italic;
  font-synthesis: none;
  font-weight: 330;
}


/* Features */

/* Section title and list use Noto Sans Display. */
.features h2 {
  font-family: "Noto Sans Display", "Noto Sans Display Local", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 460;
}

.features ul {
  font-family: "Noto Sans Display", "Noto Sans Display Local", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 340;
}

/* Coming Soon */

/* Promotional line is lighter and italic to separate it from the main tagline. */
.coming-soon {
  font-family: "Roboto", "Roboto Local", sans-serif;
  font-size: 16px;
  font-style: italic;
  font-synthesis: none;
  font-weight: 400;
}

/* Second line is even lighter for a softer emphasis. */
.coming-soon em {
  font-weight: 280;
}


/* Contact */

/* Contact and footer return to the Noto text system. */
.contact {
  font-family: "Noto Sans Display", "Noto Sans Display Local", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 330;
}

/* Keep the email visibly interactive. */
.contact a {
  color: #0066ff;
}


/* Footer */

.footer {
  font-family: "Noto Sans Display", "Noto Sans Display Local", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 320;
}


/* Position rules */

/* Vertical padding for the white panel itself. */
main {
  padding-top: 66px;
  padding-bottom: 32px;
}

/* Header uses a single-row flex layout so logo and wordmark stay aligned. */
.header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 66px;
}

/* Logo size only. */
.header img {
  display: block;
  width: 48px;
}

/* Small optical nudge so the wordmark sits better against the logo. */
.header h1 {
  position: relative;
  top: 4px;
}

/* Shared left rhythm for all text sections under the header. */
.tagline,
.features,
.coming-soon,
.contact,
.footer {
  padding-left: 132px;
}

/* Vertical spacing between sections. */
.tagline {
  margin-top: 66px;
}

.features {
  margin-top: 48px;
}

.features h2 {
  margin-bottom: 12px;
}

.features ul {
  padding-left: 36px;
}

.coming-soon {
  margin-top: 60px;
}

.contact {
  margin-top: 36px;
}

.footer {
  margin-top: 72px;
}

/* Narrow-screen layout:
   - keep desktop vertical rhythm
   - reduce horizontal frame and indents by 6px
   - layout width bottoms out at 360px total; below that the page can scroll horizontally */
@media (max-width: 720px) {
  body {
    padding: 16px;
    overflow-x: auto;
  }

  /* 328px content panel + 16px left frame + 16px right frame = 360px minimum total width. */
  main {
    min-width: 328px;
  }

  /* Keep the header compact enough to fit, but preserve the desktop vertical spacing. */
  .header {
    padding-left: 32px;
  }

  .header img {
    width: 40px;
  }

  .header h1 {
    font-size: 31px;
    top: 3px;
  }

  /* Shared content indent shifts 6px left from desktop. */
  .tagline,
  .features,
  .coming-soon,
  .contact,
  .footer {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Bullet indent is reduced so long feature lines wrap more cleanly. */
  .features ul {
    padding-left: 24px;
  }
}