/* It's Mint public website (www, C52, C54). Loaded only by website/layout.html, after app.css.
   A faithful copy of the live www.itsmint.com page, which was built with Tailwind CSS v3 (default scale) and
   shadcn/ui: each rule below is the plain-CSS translation of the live page's utility classes, so sizes, spacing,
   breakpoints (sm 640px, md 768px, lg 1024px) and colours match it. The page is light only (Karl): its tokens are
   the live site's light theme, kept as HSL channels (--web-*) so a colour takes an alpha the way Tailwind's
   `bg-mint/8` does: hsl(var(--web-mint) / .08). Fredoka (headings) and Caveat (sticky notes) come from
   website-fonts.css; body text is Tailwind's system stack, as on the live page. */

/* ================= Tokens (the live site's light theme) ================= */
.web {
  --web-background: 160 30% 98%;
  --web-foreground: 180 40% 10%;
  --web-card: 0 0% 100%;
  --web-muted: 160 20% 94%;
  --web-muted-foreground: 180 20% 35%;
  --web-border: 160 20% 88%;
  --web-input: 160 20% 88%;
  --web-ring: 160 60% 45%;
  --web-radius: .75rem;
  --web-mint: 158 64% 52%;
  --web-mint-light: 158 70% 72%;
  --web-mint-accent: 175 70% 45%;
  --web-mint-deep: 195 75% 32%;
  --web-ink: 195 55% 11%;
  --web-ink-foreground: 160 30% 96%;
  --web-linkedin: 210 90% 40%; /* LinkedIn blue (0A66C2) */
  --web-sticky-yellow: 48 100% 96%;
  --web-sticky-yellow-border: 48 100% 84%;
  --web-sticky-cyan: 190 60% 92%;
  --web-sticky-cyan-border: 190 60% 80%;
  --web-sticky-pink: 340 80% 94%;
  --web-sticky-pink-border: 340 70% 82%;
  --web-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --web-font-display: "Fredoka", sans-serif;
  --web-font-note: "Caveat", cursive;
  --web-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --web-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --web-ease: cubic-bezier(.4, 0, .2, 1);

  min-height: 100vh;
  background: hsl(var(--web-background));
  color: hsl(var(--web-foreground));
  font-family: var(--web-font-sans);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
}

/* ================= Reset (Tailwind's preflight, scoped to the page) ================= */
:where(.web) *,
:where(.web) *::before,
:where(.web) *::after { border: 0 solid hsl(var(--web-border)); }

.web :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.web :where(p, ul, ol, figure, fieldset, legend) { margin: 0; padding: 0; }
.web :where(ul, ol) { list-style: none; }
.web :where(a) { color: inherit; text-decoration: inherit; }
.web :where(strong, b) { font-weight: 700; }
.web :where(img, svg) { display: block; vertical-align: middle; }
.web :where(img) { max-width: 100%; }

.web a:focus-visible,
.web button:focus-visible,
.web input:focus-visible {
  outline: 2px solid hsl(var(--web-ink));
  outline-offset: 2px;
}

.web section[id] { scroll-margin-top: 2rem; }

/* ================= Shared pieces ================= */
.web-container { width: 100%; margin-inline: auto; }
.web-max-7xl { max-width: 80rem; }
.web-max-6xl { max-width: 72rem; }
.web-max-5xl { max-width: 64rem; }
.web-max-4xl { max-width: 56rem; }
.web-max-3xl { max-width: 48rem; }

.web-section {
  position: relative;
  padding: 6rem 1.5rem;
}

.web-clip { overflow: hidden; }

.web-fredoka { font-family: var(--web-font-display); }
.web-text-deep { color: hsl(var(--web-mint-deep)); }
.web-text-fg { color: hsl(var(--web-foreground)); }
.web-text-muted { color: hsl(var(--web-muted-foreground)); }
.web-semibold { font-weight: 600; }
.web-bold { font-weight: 700; }

.web-heading { text-align: center; }

/* EYEBROW: inline-block px-5 py-2 rounded-full bg-mint/15 border-2 border-mint/30 text-mint-deep text-base font-bold
   uppercase tracking-wide (mb-5 above a heading) */
.web-eyebrow {
  display: inline-block;
  padding: .5rem 1.25rem;
  border: 2px solid hsl(var(--web-mint) / .3);
  border-radius: 9999px;
  background: hsl(var(--web-mint) / .15);
  color: hsl(var(--web-mint-deep));
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .025em;
}

.web-eyebrow-gap { margin-bottom: 1.25rem; }

/* Section headings: text-3xl md:text-5xl lg:text-6xl font-bold leading-tight font-fredoka. Tailwind's responsive
   font sizes carry their own line height, which wins over leading-* from md up. */
.web-h2 {
  font-family: var(--web-font-display);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: hsl(var(--web-foreground));
}

.web-h2-tight { line-height: 1.25; }
.web-h2-lg { font-size: 2.25rem; line-height: 2.5rem; }

/* text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed */
.web-sub {
  max-width: 48rem;
  margin-inline: auto;
  color: hsl(var(--web-muted-foreground));
  font-size: 1.125rem;
  line-height: 1.625;
}

.web-mb-4 { margin-bottom: 1rem; }
.web-mb-6 { margin-bottom: 1.5rem; }
.web-mt-6 { margin-top: 1.5rem; }
.web-mb-10 { margin-bottom: 2.5rem; }
.web-mb-12 { margin-bottom: 3rem; }
.web-mb-14 { margin-bottom: 3.5rem; }
.web-mb-16 { margin-bottom: 4rem; }

/* Icons from the Lucide sprite (components/icons.html#icon) */
.web .web-icon-5 { width: 1.25rem; height: 1.25rem; }
.web .web-icon-6 { width: 1.5rem; height: 1.5rem; }
.web .web-icon-7 { width: 1.75rem; height: 1.75rem; }

/* Decorative blur circles */
.web-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
  pointer-events: none;
}

/* ================= Logo (the PNG wordmark, with the optional tagline) ================= */
.web-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  transition: transform 300ms var(--web-ease);
}

.web-logo:hover { transform: translateY(-.125rem) scale(1.05); }

/* Sized by width, not the live h-12 / h-24 md:h-28 / h-14 / h-8: the live SVG has transparent padding and its
   glyphs fill about 72% of its width, so these widths match the live site's visible wordmark (header 115px, hero
   230px and 269px from md, leadership heading 134px, footer 77px) */
.web-logo-img {
  width: 115px;
  height: auto;
  user-select: none;
}

.web-logo-hero .web-logo-img { width: 230px; }
.web-logo-heading .web-logo-img { width: 134px; }
.web-logo-footer .web-logo-img { width: 77px; }

.web-logo-tagline {
  margin-top: .25rem;
  color: hsl(var(--web-muted-foreground));
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.web-logo-footer .web-logo-tagline { font-size: 10px; }

/* ================= Header ================= */
.web-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  border-bottom: 1px solid hsl(var(--web-border) / .5);
  background: hsl(var(--web-background) / .8);
  backdrop-filter: blur(16px);
}

.web-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.web-nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1rem;
}

/* ghost button: rounded-md text-sm font-medium h-10 px-4 py-2 hidden sm:inline-flex */
.web-nav-link {
  display: none;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: .5rem 1rem;
  border-radius: calc(var(--web-radius) - 2px);
  color: hsl(var(--web-muted-foreground));
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 150ms var(--web-ease), background-color 150ms var(--web-ease);
}

.web-nav-link:hover {
  background: hsl(var(--web-muted));
  color: hsl(var(--web-foreground));
}

/* Register interest: bg-mint rounded-full px-6 h-10 text-sm font-bold, a 4px ink offset shadow */
.web-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.5rem;
  padding: .5rem 1.5rem;
  border-radius: 9999px;
  background: hsl(var(--web-mint));
  box-shadow: 4px 4px 0 0 hsl(var(--web-ink));
  color: hsl(var(--web-foreground));
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color 150ms var(--web-ease), background-color 150ms var(--web-ease);
}

.web-pill:hover {
  background: hsl(var(--web-mint-accent));
  box-shadow: 2px 2px 0 0 hsl(var(--web-ink));
  transform: translate(.125rem, .125rem);
}

/* On a phone the tagline may wrap, so the header fits a 360px screen */
.web-header .web-logo { min-width: 0; }

/* ================= Buttons ================= */
/* px-7 py-4 rounded-full bg-gradient-to-r from-mint to-mint-accent text-lg font-bold, a 6px ink offset shadow */
.web-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 1.75rem;
  border-radius: 9999px;
  background-image: linear-gradient(to right, hsl(var(--web-mint)), hsl(var(--web-mint-accent)));
  box-shadow: 6px 6px 0 0 hsl(var(--web-ink));
  color: hsl(var(--web-foreground));
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  transition: all 150ms var(--web-ease);
}

.web-btn:hover {
  background-image: linear-gradient(to right, hsl(var(--web-mint-accent)), hsl(var(--web-mint)));
  box-shadow: 2px 2px 0 0 hsl(var(--web-ink));
  transform: translate(.25rem, .25rem);
}

/* The demo day button beside it: white and outlined, the same offset shadow */
.web-btn-outline,
.web-btn-outline:hover {
  border: 2px solid hsl(var(--web-ink));
  background: hsl(var(--web-card));
}

/* The form submit: w-full h-12 text-lg rounded-xl */
.web-btn-block {
  width: 100%;
  height: 3rem;
  padding: 0 1rem;
  border-radius: .75rem;
}

.web-btn-block .web-icon-5 { margin-left: .5rem; }

/* ================= Sticky notes (decorative, aria-hidden, hidden below 1024px) ================= */
.web-note-wrap {
  position: absolute;
  z-index: 20;
  display: none;
}

.web-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 12rem;
  padding: 1.25rem;
  border-bottom: 4px solid;
  border-radius: .125rem;
  box-shadow: var(--web-shadow-xl);
  color: hsl(var(--web-foreground));
  font-family: var(--web-font-note);
  font-size: 1.875rem;
  line-height: 1.375;
  font-weight: 600;
  text-align: center;
}

.web-note-yellow { border-color: hsl(var(--web-sticky-yellow-border)); background: hsl(var(--web-sticky-yellow)); }
.web-note-cyan { border-color: hsl(var(--web-sticky-cyan-border)); background: hsl(var(--web-sticky-cyan)); }
.web-note-pink { border-color: hsl(var(--web-sticky-pink-border)); background: hsl(var(--web-sticky-pink)); }

.web-note-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}

.web-note-shout {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.web-note-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .025em;
  text-decoration: underline 2px;
  text-underline-offset: 4px;
}

/* Each note's tilt and place on the live page */
.web-note-hero-a { top: 20rem; left: 1.5rem; transform: rotate(-6deg); }
.web-note-hero-b { right: 2rem; bottom: 8rem; transform: rotate(2deg); }
.web-note-different { right: 1.5rem; bottom: 2.5rem; transform: rotate(-2deg); }
.web-note-building-a { top: .5rem; left: 1rem; transform: rotate(3deg); }
.web-note-building-b { top: 30rem; right: .5rem; transform: rotate(-3deg); }
.web-note-commitments { top: 26rem; left: .5rem; transform: rotate(-3deg); }
.web-note-leadership { top: 28rem; right: 3rem; transform: rotate(3deg); }
.web-note-register { top: 3rem; left: .5rem; transform: rotate(-3deg); }

/* ================= Hero ================= */
.web-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 8rem 1.5rem 5rem;
  overflow: hidden;
  background-image: linear-gradient(to bottom right, hsl(var(--web-background)), hsl(var(--web-mint) / .03),
    hsl(var(--web-mint-accent) / .05));
}

.web-hero-blob-a { top: 5rem; left: 2.5rem; width: 18rem; height: 18rem; background: hsl(var(--web-mint) / .08); }
.web-hero-blob-b {
  right: 2.5rem;
  bottom: 5rem;
  width: 24rem;
  height: 24rem;
  background: hsl(var(--web-mint-accent) / .08);
}

.web-hero-blob-c {
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: hsl(var(--web-mint-light) / .05);
  transform: translate(-50%, -50%);
}

.web-hero-inner {
  position: relative;
  z-index: 10;
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}

.web-hero-inner > * + * { margin-top: 1.75rem; }
.web-hero-logo { display: flex; justify-content: center; }

.web-h1 {
  color: hsl(var(--web-foreground));
  font-family: var(--web-font-display);
  font-size: 2.25rem;
  line-height: 1.25;
  font-weight: 700;
}

.web-lead {
  max-width: 48rem;
  margin-inline: auto;
  color: hsl(var(--web-muted-foreground));
  font-size: 1.25rem;
  line-height: 1.625;
}

.web-lead strong { color: hsl(var(--web-foreground)); }

.web-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: .5rem;
}

.web-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 2.5rem;
}

.web-trust-line,
.web-dots li {
  color: hsl(var(--web-foreground));
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.web-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.web-dots li { display: flex; align-items: center; gap: .5rem; }

.web-dots li::before {
  width: .5rem;
  height: .5rem;
  border-radius: 9999px;
  background: hsl(var(--web-mint));
  content: "";
}

/* ================= Why we are different ================= */
.web-different { background-image: linear-gradient(to bottom, hsl(var(--web-mint) / .03), hsl(var(--web-background))); }
.web-different-blob { top: 2.5rem; right: 2.5rem; width: 20rem; height: 20rem; background: hsl(var(--web-mint) / .05); }
.web-different-inner { position: relative; z-index: 10; }

.web-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.web-chips li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border: 2px solid hsl(var(--web-mint) / .4);
  border-radius: 9999px;
  background: hsl(var(--web-background));
  color: hsl(var(--web-foreground));
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

/* ================= Cards (what we are building, commitments) ================= */
.web-building { background-image: linear-gradient(to bottom, hsl(var(--web-background)), hsl(var(--web-mint) / .03)); }
.web-commitments { background-image: linear-gradient(to bottom, hsl(var(--web-mint) / .05), hsl(var(--web-background))); }

.web-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}

.web-card {
  position: relative;
  padding: 2rem;
  border: 2px solid hsl(var(--web-border) / .5);
  border-radius: 1.5rem;
  background: hsl(var(--web-card));
  transition: all 300ms var(--web-ease);
}

.web-card:hover {
  border-color: hsl(var(--web-mint) / .4);
  box-shadow: 6px 6px 0 0 hsl(var(--web-mint) / .2);
}

.web-card-lift { box-shadow: var(--web-shadow-sm); }
.web-card-lift:hover { transform: translateY(-.25rem); }

.web-card-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.web-card-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background-image: linear-gradient(to bottom right, hsl(var(--web-mint) / .2), hsl(var(--web-mint-accent) / .2));
  color: hsl(var(--web-mint-deep));
  transition: transform 300ms var(--web-ease);
}

.web-card:hover .web-card-icon-grow { transform: scale(1.1); }
.web-card-icon-sm { width: 3rem; height: 3rem; }

/* The faint 01-04 numbers are decoration (WCAG 1.4.3 exempts it): drawn from a CSS counter, so no low-contrast
   text is in the page */
.web-grid { counter-reset: web-card; }

.web-card-num::before,
.web-person-num::before {
  content: counter(web-card, decimal-leading-zero);
  counter-increment: web-card;
}

.web-card-num {
  color: hsl(var(--web-mint) / .3);
  font-family: var(--web-font-display);
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 700;
}

.web-card-kicker {
  margin-bottom: .5rem;
  color: hsl(var(--web-mint-deep));
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .025em;
}

.web-h3 {
  color: hsl(var(--web-foreground));
  font-family: var(--web-font-display);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.web-card .web-h3 { margin-bottom: .75rem; }
.web-card-row .web-h3 { margin-bottom: .5rem; }

.web-card-text {
  color: hsl(var(--web-muted-foreground));
  line-height: 1.625;
}

.web-card-row { display: flex; align-items: flex-start; gap: 1rem; }

.web-closing {
  max-width: 48rem;
  margin: 3.5rem auto 0;
  color: hsl(var(--web-muted-foreground));
  font-size: 1.125rem;
  line-height: 1.625;
  text-align: center;
}

.web-closing strong { color: hsl(var(--web-foreground)); }

/* ================= Leadership ================= */
.web-leadership { background-image: linear-gradient(to bottom, hsl(var(--web-background)), hsl(var(--web-mint) / .03)); }

.web-humans {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: .75rem;
}

.web-motto {
  margin-bottom: 1rem;
  font-family: var(--web-font-display);
  font-size: 1.5rem;
  line-height: 2rem;
}

.web-intro {
  max-width: 42rem;
  margin-inline: auto;
  color: hsl(var(--web-muted-foreground));
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.web-people { max-width: 56rem; margin-inline: auto; }

.web-person {
  position: relative;
  overflow: hidden;
  border: 2px solid hsl(var(--web-mint) / .2);
  border-radius: var(--web-radius);
  background: hsl(var(--web-card));
  box-shadow: var(--web-shadow-sm);
  transition: all 300ms var(--web-ease);
}

.web-person:hover {
  border-color: hsl(var(--web-mint) / .5);
  box-shadow: 8px 8px 0 0 hsl(var(--web-ink));
}

.web-person-body { display: flex; align-items: flex-start; gap: 1.25rem; padding: 2rem; }

.web-person-num {
  flex-shrink: 0;
  color: hsl(var(--web-mint-deep) / .4);
  font-family: var(--web-font-display);
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
}

.web-person-text { flex: 1 1 0%; }
.web-person .web-h3 { margin-bottom: .25rem; }

.web-person-role {
  margin-bottom: .5rem;
  color: hsl(var(--web-mint-deep));
  font-weight: 600;
}

.web-linkedin {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .375rem .75rem;
  border: 1px solid hsl(var(--web-mint) / .3);
  border-radius: 9999px;
  background: hsl(var(--web-mint) / .1);
  color: hsl(var(--web-mint-deep));
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms var(--web-ease), background-color 150ms var(--web-ease), border-color 150ms var(--web-ease);
}

.web-linkedin:hover,
.web-linkedin:focus-visible {
  border-color: hsl(var(--web-linkedin));
  background: hsl(var(--web-linkedin));
  color: hsl(var(--web-card));
}

.web-icon-linkedin { width: 1rem; height: 1rem; flex-shrink: 0; }

.web-person-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
  border-bottom-left-radius: 9999px;
  background: hsl(var(--web-mint) / .05);
}

/* ================= The deal ================= */
.web-deal-section { background: hsl(var(--web-card)); }

.web-deal {
  position: relative;
  padding: 2rem;
  overflow: hidden;
  border-radius: 2.5rem;
  background: hsl(var(--web-ink));
  box-shadow: var(--web-shadow-xl);
}

.web-deal-blob-a {
  right: -2rem;
  bottom: -2rem;
  width: 16rem;
  height: 16rem;
  background: hsl(var(--web-mint) / .15);
}

.web-deal-blob-b {
  top: -2rem;
  left: -2rem;
  width: 14rem;
  height: 14rem;
  background: hsl(var(--web-mint-accent) / .1);
}

.web-deal-inner { position: relative; z-index: 10; }

.web-deal-title {
  margin-bottom: 2.5rem;
  color: hsl(var(--web-ink-foreground));
  font-family: var(--web-font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

.web-deal-cols {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

.web-deal-col {
  position: relative;
  padding: 2rem;
  border: 1px solid hsl(var(--web-ink-foreground) / .1);
  border-radius: 1rem;
  background: hsl(var(--web-ink-foreground) / .05);
}

.web-deal-head {
  margin-bottom: 1rem;
  color: hsl(var(--web-ink-foreground));
  font-family: var(--web-font-display);
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
}

.web-deal-head-mint { color: hsl(var(--web-mint)); }

.web-deal-intro {
  margin-bottom: 1.5rem;
  color: hsl(var(--web-ink-foreground) / .7);
  line-height: 1.625;
}

.web-checks { color: hsl(var(--web-ink-foreground) / .6); }
.web-checks > li + li { margin-top: .75rem; }
.web-checks li { display: flex; align-items: flex-start; gap: .75rem; }
.web-checks .web-icon-5 { flex-shrink: 0; margin-top: .125rem; color: hsl(var(--web-mint)); }

/* ================= Forms (demo days, register) ================= */
.web-register { background-image: linear-gradient(to top, hsl(var(--web-mint) / .05), hsl(var(--web-background))); }
.web-demo { background-image: linear-gradient(to bottom, hsl(var(--web-background)), hsl(var(--web-mint) / .05)); }

.web-form-sub {
  margin-top: 1rem;
  color: hsl(var(--web-muted-foreground));
  font-size: 1.25rem;
  line-height: 1.625;
}

.web-form-title { margin-top: 1.5rem; }

/* bg-card rounded-3xl p-8 shadow-[8px_8px_0px_0px_hsl(var(--ink))] border-2 border-mint/20 */
.web-form-card {
  padding: 2rem;
  border: 2px solid hsl(var(--web-mint) / .2);
  border-radius: 1.5rem;
  background: hsl(var(--web-card));
  box-shadow: 8px 8px 0 0 hsl(var(--web-ink));
}

.web-form > * + * { margin-top: 1.5rem; }

.web-fields-pair {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

.web .mint-field { gap: 0; }

.web .form-label {
  margin-bottom: .5rem;
  color: hsl(var(--web-foreground));
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

/* h-10 w-full border border-input bg-background px-3 py-5 text-base md:text-sm rounded-xl */
.web .form-control {
  width: 100%;
  height: calc(2.5rem + 2px);
  padding: 0 .75rem;
  border: 1px solid hsl(var(--web-input));
  border-radius: .75rem;
  background: hsl(var(--web-background));
  color: hsl(var(--web-foreground));
  font-size: 1rem;
  line-height: 1.5rem;
}

.web .form-control::placeholder { color: hsl(var(--web-muted-foreground)); opacity: 1; }

.web .form-control:focus,
.web .form-control:focus-visible {
  outline: none;
  border-color: hsl(var(--web-input));
  box-shadow: 0 0 0 2px hsl(var(--web-background)), 0 0 0 4px hsl(var(--web-ring));
}

.web .form-control.is-invalid { border-color: var(--bs-form-invalid-border-color); }

.web .form-control.is-invalid:focus {
  box-shadow: 0 0 0 2px hsl(var(--web-background)), 0 0 0 4px var(--bs-form-invalid-border-color);
}

.web .invalid-feedback { margin-top: .375rem; font-size: .875rem; }
.web .mint-error-summary { border: 1px solid var(--bs-danger-border-subtle); border-radius: .75rem; }

.web-privacy {
  color: hsl(var(--web-muted-foreground));
  font-size: .875rem;
  line-height: 1.25rem;
  text-align: center;
}

/* The demo day choices: one bordered row per day */
.web-sessions > * + * { margin-top: .5rem; }

.web-sessions legend {
  float: none;
  width: auto;
  margin-bottom: .5rem;
  padding: 0;
}

.web-session {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid hsl(var(--web-input));
  border-radius: .75rem;
  background: hsl(var(--web-background));
  cursor: pointer;
}

.web-session:has(input:checked) {
  border-color: hsl(var(--web-mint-deep));
  background: hsl(var(--web-mint) / .08);
}

.web-session input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .1875rem;
  accent-color: hsl(var(--web-mint-deep));
}

.web-session-body { display: flex; flex-direction: column; }
.web-session-date { font-weight: 700; }
.web-session-time { color: hsl(var(--web-muted-foreground)); font-size: .875rem; }

.web-session-left {
  color: hsl(var(--web-mint-deep));
  font-size: .875rem;
  font-weight: 700;
}

/* ================= Thanks ================= */
.web-thanks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-top: 8rem;
}

.web-thanks .web-form-card { text-align: center; }
.web-thanks-icon { margin: 0 auto 1.5rem; }
.web-thanks .web-btn { margin-top: 2rem; }

/* ================= Footer ================= */
.web-footer {
  padding: 3rem 1.5rem;
  border-top: 1px solid hsl(var(--web-border));
  background: hsl(var(--web-card));
}

.web-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.web-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.web-footer-note {
  color: hsl(var(--web-muted-foreground));
  font-size: .875rem;
  line-height: 1.25rem;
}

/* ================= sm (640px) ================= */
@media (min-width: 640px) {
  .web-nav-link { display: inline-flex; }
  .web-hero-actions { flex-direction: row; }
  .web-lead strong { white-space: nowrap; }
}

/* ================= md (768px) ================= */
@media (min-width: 768px) {
  .web-logo-hero .web-logo-img { width: 269px; }
  .web-h1 { font-size: 3.75rem; line-height: 1; }
  .web-lead { font-size: 1.5rem; line-height: 2rem; }
  .web-h2 { font-size: 3rem; line-height: 1; }
  .web-sub { font-size: 1.25rem; line-height: 1.75rem; }
  .web-grid,
  .web-deal-cols,
  .web-fields-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-deal { padding: 3rem; }
  .web-deal-title { font-size: 1.875rem; line-height: 2.25rem; }
  .web-deal-cols { gap: 2rem; }
  .web-deal-head { font-size: 3rem; line-height: 1; }
  .web .form-control { font-size: .875rem; }
  .web-footer-inner { flex-direction: row; }
  .web-footer-brand { align-items: flex-start; }
}

/* ================= lg (1024px) ================= */
@media (min-width: 1024px) {
  .web-note-wrap { display: block; }
  .web-h1 { font-size: 4.5rem; line-height: 1; }
  .web-h2-xl { font-size: 3.75rem; line-height: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .web-logo,
  .web-pill,
  .web-btn,
  .web-card,
  .web-card-icon,
  .web-person,
  .web-linkedin { transition: none; }
}