/* ==========================================================================
   MAIVIZEN LTD — public website
   Shared stylesheet. Phase 1: homepage.

   Shared stylesheet. Homepage + legal pages.

   Order of this file:
     1. Variables
     2. Reset / base
     3. Typography
     4. Layout / container
     5. Header / navigation
     6. Buttons, links, focus
     7. Footer
     8. Homepage sections
     9. Legal pages
    10. Responsive
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {

  /* --- Brand palette ---------------------------------------------------- */
  --green-deep:   #2D4F2B;
  --cream-brand:  #FFF1CA;
  --amber:        #FFB823;
  --olive:        #708A58;
  --white:        #FFFFFF;
  --warm-surface: #FFFBF0;

  /* Channel values, so opacity variants keep the same base colour. */
  --green-deep-rgb:  45 79 43;
  --cream-brand-rgb: 255 241 202;
  --olive-rgb:       112 138 88;

  /* --- Text roles -------------------------------------------------------
     Muted text on light surfaces is deep green at reduced opacity, never
     olive. Each opacity below is set so the pairing still clears WCAG AA. */
  --text-strong:       var(--green-deep);
  --text-muted:        rgb(var(--green-deep-rgb) / 0.80);
  --text-on-dark:      var(--cream-brand);
  --text-on-dark-mute: rgb(var(--cream-brand-rgb) / 0.85);

  /* --- Lines and dividers (olive is decorative only) -------------------- */
  --line-soft:   rgb(var(--olive-rgb) / 0.28);
  --line-on-dark: rgb(var(--cream-brand-rgb) / 0.22);

  /* --- Focus ring --------------------------------------------------------
     Deep green on light surfaces, amber on dark. The variable inherits, so
     any dark container re-declares it once and everything focusable inside
     picks up the correct ring. */
  --focus-ring: var(--green-deep);

  /* --- Typefaces --------------------------------------------------------
     Phase 1 uses the local system sans stack only. To introduce the
     approved self-hosted face later, add its @font-face rule and change
     --font-brand alone; no other rule in this file needs to move. */
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: var(--font-sans);

  /* --- Type scale (desktop) ---------------------------------------------
     Sizes calibrated against the approved desktop mockup. */
  --fs-display:  60px;
  --fs-h1:       26px;
  --fs-h2:       34px;
  --fs-h2-side:  28px;
  --fs-h3:       16px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-eyebrow:  13px;

  /* --- Layout ------------------------------------------------------------ */
  --container-max:  1200px;
  --container-pad:  24px;
  --header-height:  72px;
  --radius-card:    10px;
  --radius-btn:     6px;
  --platform-gap:   46px;
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p { margin: 0; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

.eyebrow {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.eyebrow--on-dark { color: var(--amber); }


/* ==========================================================================
   4. LAYOUT / CONTAINER
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Anchor targets land with a little breathing room. */
#platform,
#company { scroll-margin-top: 24px; }


/* ==========================================================================
   5. HEADER / NAVIGATION
   ========================================================================== */

.site-header { background: var(--green-deep); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-height);
}

.site-header__brand {
  display: inline-flex;
  flex: none;
  text-decoration: none;
}

/* The wordmark PNG is transparent, with generous empty margin around the
   lettering (art box ≈ 76% x 28% of the canvas, centred at 50% 48%).
   object-fit crops that margin so the visible lettering reads at ~22px in
   the header, per the approved mockup, without touching the 72px header. */
.wordmark {
  width: 141px;
  height: 40px;
  object-fit: cover;
  object-position: 50% 46.5%;
}

/* Footer shows the mark a step smaller: ~20px visible lettering. */
.site-footer .wordmark {
  width: 129px;
  height: 36px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.site-nav__list a {
  color: var(--text-on-dark);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible { border-bottom-color: var(--amber); }

.site-nav__list .site-nav__cta {
  background: var(--amber);
  color: var(--green-deep);
  border-radius: var(--radius-btn);
  padding: 9px 20px;
  border-bottom: 0;
}

.site-nav__list .site-nav__cta:hover { background: var(--cream-brand); }


/* ==========================================================================
   6. BUTTONS, LINKS, FOCUS
   ========================================================================== */

a { color: inherit; }

.btn {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
}

.btn--primary {
  background: var(--green-deep);
  color: var(--cream-brand);
  border-radius: var(--radius-btn);
  padding: 14px 26px;
}

.btn--primary:hover { background: rgb(var(--green-deep-rgb) / 0.88); }

.btn--text {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 14px 4px;
}

.btn--text:hover { text-decoration-thickness: 2px; }

/* Keyboard focus: 2px ring, 2px offset. Deep green on light surfaces,
   amber on dark surfaces, so the ring always separates from its backdrop. */
.site-header,
.site-footer,
.platform,
.responsible__panel,
.layer-card--accent { --focus-ring: var(--amber); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amber);
  color: var(--green-deep);
  font-weight: 700;
  padding: 12px 20px;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
  outline: 2px solid var(--green-deep);
  outline-offset: 2px;
}


/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--green-deep);
  color: var(--text-on-dark);
  padding-block: 52px 36px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.site-footer__heading {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: var(--fs-small);
  color: var(--text-on-dark-mute);
}

.site-footer__list a {
  color: var(--text-on-dark-mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--text-on-dark);
  border-bottom-color: var(--amber);
}

.site-footer__legal {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-small);
  color: var(--text-on-dark-mute);
}


/* ==========================================================================
   8. HOMEPAGE SECTIONS
   ========================================================================== */

/* --- 8.1 Hero ------------------------------------------------------------ */

.hero {
  background: var(--warm-surface);
  padding-block: 80px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

.hero__product {
  margin-top: 26px;
  font-family: var(--font-brand);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.hero__heading {
  margin-top: 16px;
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-strong);
}

/* Decorative amber rule under the heading. */
.hero__heading::after {
  content: "";
  display: block;
  width: 76px;
  height: 4px;
  border-radius: 2px;
  background: var(--amber);
  margin-top: 26px;
}

.hero__body {
  margin-top: 30px;
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.hero__company-line {
  margin-top: 30px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Illustrative system view */

.hero__system { margin: 0; }

.system__caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.system__caption-name {
  font-family: var(--font-brand);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-strong);
}

.system__caption-note {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.system__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.layer-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 22px;
}

.layer-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--cream-brand);
  color: var(--green-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.layer-card__title {
  margin-top: 18px;
  font-family: var(--font-brand);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-strong);
}

.layer-card__body {
  margin-top: 8px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.layer-card--accent {
  background: var(--green-deep);
  border-color: var(--green-deep);
}

.layer-card--accent .layer-card__num {
  background: var(--amber);
  color: var(--green-deep);
}

.layer-card--accent .layer-card__title { color: var(--cream-brand); }
.layer-card--accent .layer-card__body  { color: var(--text-on-dark-mute); }


/* --- 8.2 The Platform ---------------------------------------------------- */

.platform {
  background: var(--green-deep);
  padding-block: 88px;
}

.platform__head {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.platform__heading {
  margin-top: 24px;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--cream-brand);
  max-width: 30ch;
  margin-inline: auto;
}

.platform__support {
  margin-top: 20px;
  color: var(--text-on-dark-mute);
  max-width: 68ch;
  margin-inline: auto;
}

.platform__layers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--platform-gap);
  margin-top: 48px;
}

.stage-card {
  position: relative;
  background: var(--cream-brand);
  border-radius: var(--radius-card);
  padding: 28px 22px;
}

/* Connectors sit in the grid gap. Drawn in CSS, no text content. */
.stage-card:not(:last-child)::before,
.stage-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
}

.stage-card:not(:last-child)::before {
  right: -31px;
  width: 16px;
  height: 2px;
  background: var(--amber);
  transform: translateY(-50%);
}

.stage-card:not(:last-child)::after {
  right: -18px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--amber);
  border-right: 2px solid var(--amber);
  transform: translateY(-50%) rotate(45deg);
}

.stage-card__num {
  font-family: var(--font-brand);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-strong);
}

.stage-card__title {
  margin-top: 22px;
  font-size: var(--fs-h3);
  color: var(--text-strong);
}

.stage-card__body {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.platform__note {
  margin-top: 40px;
  background: var(--cream-brand);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  font-size: 15px;
  color: var(--text-strong);
}


/* --- 8.3 Responsible Operations ------------------------------------------ */

.responsible {
  background: var(--warm-surface);
  padding-block: 80px;
}

.responsible__grid {
  display: grid;
  grid-template-columns: 0.73fr 1fr;
  gap: 64px;
  align-items: start;
}

.responsible__panel {
  background: var(--green-deep);
  border-radius: var(--radius-card);
  padding: 30px 28px 34px;
}

.responsible__heading {
  margin-top: 24px;
  font-size: var(--fs-h2-side);
  color: var(--cream-brand);
}

.responsible__intro { color: var(--text-strong); }

.principles {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 32px;
}

.principle {
  position: relative;
  padding-left: 28px;
}

/* Decorative amber marker. */
.principle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--amber);
  transform: rotate(45deg);
}

.principle__title {
  font-size: var(--fs-h3);
  color: var(--text-strong);
}

.principle__body {
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.responsible__disclaimer {
  margin-top: 36px;
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 62ch;
}


/* --- 8.4 The Company ----------------------------------------------------- */

.company {
  background: var(--white);
  padding-block: 80px;
}

.company__grid {
  display: grid;
  grid-template-columns: 0.63fr 1fr;
  gap: 64px;
  align-items: center;
}

.company__mark { margin: 0; }

.company-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 20px;
}

/* The owl PNG is transparent; the deep-green circular badge is painted by
   the element itself. padding + object-fit scale the visible artwork to
   ~58px inside the 72px circle, centred and clear of the edge. */
.company-card__owl {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 50%;
  background: var(--green-deep);
  padding: 4px;
  object-fit: cover;
  object-position: center 62.4%;
}

.company-card__name {
  font-family: var(--font-brand);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-strong);
}

.company-card__line {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.55;
}

.company-card__line a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.company-card__line a:hover { color: var(--text-strong); }

.company__caption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.company__heading {
  margin-top: 24px;
  font-size: var(--fs-h2-side);
  color: var(--text-strong);
  max-width: 36ch;
}

.company__body {
  margin-top: 22px;
  color: var(--text-muted);
  max-width: 62ch;
}


/* ==========================================================================
   9. LEGAL PAGES

   Shared by /privacy and reusable as-is by /terms and /data-deletion.
   No page-specific selectors below — only .legal-* building blocks.
   ========================================================================== */

/* --- 9.1 Title area ------------------------------------------------------ */

.legal-hero {
  background: var(--warm-surface);
  border-bottom: 1px solid var(--line-soft);
  padding-block: 36px 28px;
}

.legal-hero__title {
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--text-strong);
}

/* --- 9.2 Layout ---------------------------------------------------------- */

.legal-body {
  background: var(--white);
  padding-block: 64px 88px;
}

.legal-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 64px;
  align-items: start;
}

/* --- 9.3 Table of contents ----------------------------------------------- */

.legal-toc {
  position: sticky;
  top: 32px;
  background: var(--warm-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 24px 22px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

.legal-toc__heading {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.legal-toc__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
  line-height: 1.45;
}

.legal-toc__list a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}

.legal-toc__list a:hover,
.legal-toc__list a:focus-visible {
  color: var(--text-strong);
  border-bottom-color: var(--amber);
}

/* --- 9.4 Content --------------------------------------------------------- */

.legal-content { max-width: 68ch; }

.legal-section { scroll-margin-top: 24px; }

.legal-section + .legal-section { margin-top: 44px; }

.legal-section h2 {
  font-size: 20px;
  line-height: 1.35;
  color: var(--text-strong);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.legal-section p {
  margin-top: 16px;
  line-height: 1.7;
  color: var(--text-strong);
}

.legal-address { line-height: 1.6; }

.legal-section ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.legal-section li {
  position: relative;
  padding-left: 22px;
  line-height: 1.7;
  color: var(--text-strong);
}

/* Decorative amber marker, matching the homepage principle list. */
.legal-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--amber);
  transform: rotate(45deg);
}

.legal-section a {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-section a:hover { text-decoration-thickness: 2px; }


/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

/* --- Up to 1100px: four-column layer grid halves; connectors retire ------ */
@media (max-width: 1100px) {

  :root {
    --fs-display: 52px;
    --fs-h2:      32px;
  }

  .hero__grid { gap: 40px; }

  .platform__layers {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .stage-card:not(:last-child)::before,
  .stage-card:not(:last-child)::after { display: none; }

  .responsible__grid,
  .company__grid { gap: 44px; }
}


/* --- Up to 900px: two-column sections stack ------------------------------ */
@media (max-width: 900px) {

  :root {
    --fs-display: 46px;
    --fs-h1:      24px;
    --fs-h2:      30px;
    --fs-h2-side: 26px;
  }

  /* Hero text stays ahead of the system view; source order already does. */
  .hero__grid,
  .responsible__grid,
  .company__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .hero__heading { max-width: 32ch; }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .site-footer__brand { grid-column: 1 / -1; }

  /* Legal: contents list stacks above the text as a plain section list. */
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .legal-toc {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .legal-content { max-width: none; }
}


/* --- Up to 640px: single column throughout ------------------------------- */
@media (max-width: 640px) {

  :root {
    --fs-display: 38px;
    --fs-h1:      20px;
    --fs-h2:      26px;
    --fs-h2-side: 26px;
    --fs-h3:      16px;
  }

  /* Header wraps to as many rows as it needs. No hamburger, no drawer;
     every item — Contact included — stays visible. */
  .site-header__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    min-height: 0;
    padding-block: 18px;
  }

  .site-nav__list {
    justify-content: center;
    gap: 14px 18px;
  }

  .hero,
  .responsible,
  .company { padding-block: 56px; }

  .platform { padding-block: 60px; }

  .hero__grid,
  .responsible__grid,
  .company__grid { gap: 36px; }

  .system__grid,
  .platform__layers { grid-template-columns: 1fr; }

  .platform__layers { margin-top: 40px; }

  .platform__note { padding: 20px; }

  .hero__actions { gap: 18px; }

  .company-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .site-footer__grid { grid-template-columns: 1fr; }

  .site-footer__brand { grid-column: auto; }

  /* Legal */
  .legal-hero { padding-block: 22px 18px; }

  .legal-body { padding-block: 40px 56px; }

  .legal-toc { padding: 20px 18px; }

  .legal-section + .legal-section { margin-top: 36px; }

  .legal-section h2 { font-size: 19px; }
}