/* Fort Mill Ventures — fortmillventures.com
 *
 * Brazilian flag palette. Carlos 2026-07-30: the PAGE is yellow, the BOXES are
 * green — the flag's own construction, a green lozenge on yellow ground.
 * Still colors only: no flag imagery, no shapes borrowed from it.
 *
 * Official colours, per the hex values Wikipedia carries from government files:
 * green #009C3B (Pantone 355c), yellow #FFDF00, blue #002776 (Pantone 280c).
 * Lei 5.700 fixes no shade, so these are the accepted reference.
 *
 * Where a shade is DEEPENED it is for one measured reason and it is noted:
 * white on official green is only 3.61:1, so any green field carrying white
 * text uses #0B6B33. Official green is used at full strength wherever the text
 * on it is dark, and for large type.
 *
 * Yellow can be the page precisely because it never carries light text: dark
 * ink on it is 12.8-14.8:1. The reverse — light text on yellow — appears nowhere.
 *
 * The flag's own green (#009C3B) cannot carry body text — white on it measures
 * 3.61:1. So surfaces that hold text use a deepened green (#0B6B33, 6.63:1
 * white; #075A2A, 8.38:1 as link text on white), and the pure flag green
 * appears where nothing has to be read: chip borders, large accents, the
 * gradient edge. Yellow appears big (kicker, product band, hovers) but only
 * ever under dark text (12.8:1). Every pair is asserted in
 * shared/design-system/check-contrast.mjs.
 */

:root {
  --flag-green:  #009C3B;
  --green-deep:  #0B6B33;   /* text-bearing green field */
  --green-link:  #075A2A;   /* green as TEXT on light surfaces */
  --flag-yellow: #FFDF00;
  --yellow-soft: #FFF7CC;   /* yellow as a large surface, under dark text */
  --flag-blue:   #002776;   /* demoted: one card accent + legal line */

  --bg: #FFF0A0;          /* the page itself, dark ink only: 14.8:1 */
  --bg-card: #0B6B33;     /* boxes are the green field */
  --ink: #1A1A2E;
  --ink-2: #4A4F63;
  --border: rgba(11, 107, 51, 0.45);

  --font-voice: 'Georgia', 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --measure: 62ch;
  --page-max: 960px;
  --sp: 8px;
}

/* No dark-mode inversion. Carlos 2026-07-30: the page is yellow, full stop —
   an inverted dark theme turned the products band a muddy brown, which is not
   a flag colour at all. Yellow with dark ink is already high-contrast in either
   ambient condition, so the one adjustment is a slightly deeper yellow at night
   to cut glare. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #F5E27A;
    --bg-card: #0B6B33;
    --ink: #14140F;
    --ink-2: #3A3A2E;
  }
}

* { margin: 0; box-sizing: border-box; }

body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); line-height: 1.6; font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

p { max-width: var(--measure); }

:focus-visible { outline: 3px solid var(--flag-yellow); outline-offset: 2px; }

.skip-link {
  position: absolute; left: calc(var(--sp) * 2); top: -100%;
  z-index: 100; padding: var(--sp) calc(var(--sp) * 2);
  background: var(--bg); color: var(--green-link);
  border: 2px solid var(--green-deep); border-radius: 8px;
}
.skip-link:focus { top: calc(var(--sp) * 2); }

/* Hero: the green field — the flag's ground, and the page's. White text on
   #0B6B33 measures 6.63:1. The pure flag green lives on the edge gradient,
   where nothing has to be read. */
.hero {
  background: linear-gradient(180deg, var(--flag-green) 0, var(--green-deep) 120px);
  color: #FFFFFF;
  padding: calc(var(--sp) * 10) calc(var(--sp) * 3) calc(var(--sp) * 12);
}
.hero > * { max-width: var(--page-max); margin-inline: auto; }
.hero__kicker {
  display: inline-block; margin-bottom: calc(var(--sp) * 3);
  padding: calc(var(--sp) * 0.75) calc(var(--sp) * 2);
  background: var(--flag-yellow); color: #1A1A2E;
  border-radius: 999px; font-size: 0.875rem; font-weight: 600;
  position: relative; left: 50%; transform: translateX(-50%);
}
.hero__title {
  font-family: var(--font-voice);
  font-size: clamp(2rem, 5.5vw, 3.25rem); line-height: 1.15;
  margin-bottom: calc(var(--sp) * 3); text-align: center;
}
.hero__lede {
  font-size: clamp(1.05rem, 2vw, 1.25rem); color: rgba(255, 255, 255, 0.94);
  text-align: center; margin-inline: auto;
}

.section {
  max-width: var(--page-max);
  margin: 0 auto; padding: calc(var(--sp) * 8) calc(var(--sp) * 3);
}
.section__title {
  font-family: var(--font-voice); font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin-bottom: calc(var(--sp) * 4);
}

/* Products sit on the yellow band — yellow as a SURFACE under dark text
   (15.8:1 on the soft tone), which is the only way yellow gets to be big. */
/* The products band is flag yellow edge to edge with a green heading.
   Official green on official yellow is 2.72:1 — it fails even the 3:1 large-text
   bar, which is why the heading uses --green-deep (4.99:1). Two saturated flag
   colours next to each other look bold and read badly; the deepening is the
   minimum that makes it legible while still reading as flag green. */
.section--products {
  max-width: none;
  background: var(--flag-yellow);
}
.section--products > * { max-width: var(--page-max); margin-inline: auto; }
.section--products .section__title { color: var(--green-deep); }
.section--products > * { max-width: var(--page-max); margin-inline: auto; }


.products { display: grid; gap: calc(var(--sp) * 3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); max-width: var(--page-max); margin-inline: auto; }
/* The green lozenge on yellow ground. White text inside measures 6.63:1. */
.product {
  background: var(--bg-card); color: #FFFFFF;
  border: 1px solid var(--border);
  /* Top accent must contrast with the YELLOW PAGE it sits against, not with
     the green box. Flag yellow there measures 1.15:1 — invisible. Deep green
     gives 5.76:1. */
  border-top: 5px solid var(--green-link);
  border-radius: 14px; padding: calc(var(--sp) * 3);
}
/* Blue's one appearance in the body: Krateo is the money product. */
/* Blue's one appearance: Krateo is the money product. #002776 on the yellow
   page is 11.7:1 — the strongest edge on the page, which suits the live one. */
.product--krateo { border-top-color: var(--flag-blue); }
.product__name { font-family: var(--font-voice); font-size: 1.5rem; display: flex; align-items: center; gap: var(--sp); flex-wrap: wrap; }
.product__status {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  padding: 2px calc(var(--sp) * 1.5); border-radius: 999px;
  border: 1.5px solid var(--flag-yellow); color: #FFFFFF;
}
.product__tag { font-style: italic; color: rgba(255,255,255,0.90); margin: var(--sp) 0 calc(var(--sp) * 2); }
.product__body { color: rgba(255,255,255,0.92); margin-bottom: calc(var(--sp) * 3); }
/* Yellow as link text INSIDE the green box: 6.9:1 there, and it ties the two
   flag colours together without yellow ever meeting light text. */
.product__cta {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--flag-yellow);
}

/* Contact is the blue field — the flag's globe. White on official blue is
   13.5:1; the address itself is yellow on blue at 10.2:1. */
.section--contact {
  max-width: none;
  background: var(--flag-blue); color: #FFFFFF;
}
.section--contact > * { max-width: var(--page-max); margin-inline: auto; }
.section--contact p { color: rgba(255, 255, 255, 0.94); }
.contact-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1.125rem; font-weight: 600; color: var(--flag-yellow);
}

/* Footer: green field again; the legal line is blue's second, quiet moment —
   on yellow it reads as the flag without drawing it. */
.footer {
  background: var(--green-deep); color: rgba(255, 255, 255, 0.94);
  padding: calc(var(--sp) * 4) calc(var(--sp) * 3);
  border-top: 6px solid var(--flag-yellow);
}
.footer > * { max-width: var(--page-max); margin-inline: auto; }
.footer__note { font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); margin-top: var(--sp); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}