:root {
  --mint: #00c99a;
  --mint-light: #7ff3c0;
  --mint-dark: #007d66;
  --ink: #17202f;
  --paper: #f4fbf8;
  --white: #ffffff;
  --ease: cubic-bezier(.2,.75,.25,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  transition: background .35s var(--ease), color .35s var(--ease);
}

button, a { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: .5rem;
  left: .5rem;
  padding: .65rem 1rem;
  background: #fff;
  color: #101521;
  border: 2px solid currentColor;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.design-switcher {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: max-content;
  max-width: calc(100vw - 1.25rem);
  padding: .55rem .65rem .55rem 1rem;
  color: #17202f;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(23,32,47,.14);
  border-radius: 999px;
  box-shadow: 0 16px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}
.switcher-label {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.switcher-options { display: flex; gap: .25rem; }
.style-button {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 2.45rem;
  padding: .45rem .7rem;
  color: #4b5563;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.style-button:hover { background: #edf5f1; }
.style-button:focus-visible { outline: 3px solid #06c99a; outline-offset: 2px; }
.style-button.is-active { color: #101521; background: #dffaf1; font-weight: 750; }
.swatch { width: .8rem; height: .8rem; border: 2px solid #17202f; border-radius: 50%; }
.swatch-modern { background: #00c99a; }
.swatch-informal { background: #f7d76e; }
.swatch-cartoon { background: #ff6fa5; }

.site-shell { overflow: hidden; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 1.8rem 0;
}
.brand img { width: 176px; height: auto; }
.site-header nav { display: flex; gap: 2rem; }
.site-header nav a { text-decoration: none; font-size: .9rem; font-weight: 750; }
.site-header nav a:hover { color: var(--mint-dark); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-areas: "copy mark" "notes notes";
  gap: 3rem;
  align-items: center;
  width: min(1180px, calc(100% - 3rem));
  min-height: 650px;
  margin: 0 auto;
  padding: 5rem 0 3rem;
}
.hero-copy { grid-area: copy; }
.eyebrow, .section-label {
  margin: 0 0 1rem;
  color: var(--mint-dark);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
h1, h2, h3, p { overflow-wrap: break-word; }
h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(4rem, 8vw, 7.8rem);
  line-height: .9;
  letter-spacing: -.075em;
}
h1 span { color: var(--mint); }
.hero-intro { max-width: 580px; margin: 2rem 0; color: #556273; font-size: 1.15rem; }
.primary-action {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.2rem;
  color: #071b17;
  background: var(--mint);
  border: 2px solid var(--mint);
  border-radius: .4rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.primary-action:hover { transform: translateY(-3px); box-shadow: 0 14px 24px rgba(0,201,154,.22); }
.hero-mark {
  grid-area: mark;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 390px;
  margin-inline: auto;
  color: #e9fff8;
  background: #142031;
  border-radius: 50%;
  isolation: isolate;
}
.mark-letter { font-size: clamp(8rem, 17vw, 13rem); font-weight: 900; line-height: 1; letter-spacing: -.12em; }
.hero-mark p {
  position: absolute;
  bottom: 2rem;
  margin: 0;
  color: var(--mint-light);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.orbit { position: absolute; inset: -1.2rem; border: 1px solid rgba(0,201,154,.35); border-radius: 50%; }
.orbit-two { inset: -2.4rem; border-style: dashed; animation: orbit 24s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.hero-notes {
  grid-area: notes;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 2rem;
  border-top: 1px solid #cfddd7;
}
.hero-notes span { padding-left: 1.25rem; border-left: 3px solid var(--mint); font-size: .87rem; font-weight: 750; }

.about {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 3rem;
  width: min(1180px, calc(100% - 3rem));
  margin: 5rem auto;
  padding: 4rem;
  color: #fff;
  background: #142031;
}
.about .section-label { color: var(--mint-light); }
.about h2 { margin: 0 0 1rem; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.055em; }
.about-copy p { max-width: 680px; margin: 0; color: #bfccd6; font-size: 1.08rem; }

.apps-section { width: min(1180px, calc(100% - 3rem)); margin: 7rem auto 9rem; }
.section-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 2.5rem; }
.section-heading .section-label { grid-column: 1 / -1; }
.section-heading h2 { margin: 0; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1; letter-spacing: -.06em; }
.section-heading > p:last-child { max-width: 320px; margin: 0; color: #617064; }
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.app-card {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: 1.6rem;
  background: #fff;
  border: 1px solid #d8e6e0;
  border-radius: 1rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.app-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(20,32,49,.12); }
.card-topline { display: flex; justify-content: space-between; color: #67746f; font-size: .74rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.app-icon {
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  margin: 3.2rem 0 2.5rem;
  color: #0c342b;
  background: var(--mint-light);
  border-radius: .8rem;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.05em;
}
.golf-card .app-icon { color: #fff; background: #17202f; }
.board-card .app-icon { background: #d9fff3; border: 2px solid var(--mint); }
.made-by { margin: 0; color: var(--mint-dark); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.app-card h3 { margin: .25rem 0 .7rem; font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.card-copy > p:last-child { margin: 0; color: #647069; }
.download-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid #dbe5e0;
  color: #103b31;
  font-weight: 850;
  text-decoration: none;
}
.download-link:hover { color: var(--mint-dark); }
.download-link.is-disabled {
  color: #75817b;
  cursor: default;
}
.download-link.is-disabled span { color: var(--mint); font-size: .72rem; }

footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 3rem max(1.5rem, calc((100vw - 1180px) / 2));
  color: #b9c8c4;
  background: #111a27;
  font-size: .82rem;
}
footer img { width: 142px; filter: brightness(0) invert(1); opacity: .9; }
footer p { margin: 0; }
footer p:last-child { justify-self: end; }
.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 6rem;
  width: min(420px, calc(100% - 2rem));
  padding: 1rem 1.2rem;
  color: #fff;
  background: #101521;
  border-radius: .75rem;
  box-shadow: 0 18px 55px rgba(0,0,0,.24);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1rem);
  transition: opacity .2s, transform .2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Informal direction: warm paper, conversational type, loose cards and scrapbook energy. */
body[data-design="informal"] {
  --paper: #fff9e9;
  --ink: #23342e;
  --mint-dark: #087c61;
  background-image: radial-gradient(#b7decf 1.25px, transparent 1.25px);
  background-size: 24px 24px;
  font-family: "Trebuchet MS", ui-rounded, system-ui, sans-serif;
}
body[data-design="informal"] .site-shell { width: min(1320px, calc(100% - 2rem)); margin: 1rem auto 6rem; background: rgba(255,252,240,.92); border: 2px solid #244339; border-radius: 2rem; box-shadow: 12px 14px 0 #b9e6d5; }
body[data-design="informal"] .site-header { width: calc(100% - 4rem); padding: 1.4rem 0; border-bottom: 2px dashed #9ac9b9; }
body[data-design="informal"] .brand img { width: 160px; }
body[data-design="informal"] .site-header nav a { padding: .35rem .75rem; border: 2px solid transparent; border-radius: 999px; }
body[data-design="informal"] .site-header nav a:hover { background: #fff; border-color: #244339; }
body[data-design="informal"] .hero { grid-template-columns: 1fr .9fr; grid-template-areas: "copy notes" "copy mark"; width: calc(100% - 5rem); min-height: 610px; padding: 4rem 0; }
body[data-design="informal"] .eyebrow { display: inline-block; padding: .25rem .65rem; color: #23342e; background: #f6d96f; transform: rotate(-1.5deg); }
body[data-design="informal"] h1 { font-size: clamp(4.2rem, 8vw, 7.5rem); line-height: .92; letter-spacing: -.065em; }
body[data-design="informal"] h1 span { position: relative; color: #087c61; }
body[data-design="informal"] h1 span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.18rem; height: .24rem; background: #f6d96f; border-radius: 50%; transform: rotate(-1deg); }
body[data-design="informal"] .hero-intro { color: #53645e; font-size: 1.22rem; }
body[data-design="informal"] .primary-action { color: #23342e; background: #baf3dc; border-color: #23342e; border-radius: 999px; box-shadow: 5px 5px 0 #23342e; transform: rotate(-1deg); }
body[data-design="informal"] .primary-action:hover { box-shadow: 2px 2px 0 #23342e; transform: translate(3px,3px) rotate(-1deg); }
body[data-design="informal"] .hero-notes { display: flex; flex-wrap: wrap; gap: .7rem; padding: 0; border: 0; align-self: end; }
body[data-design="informal"] .hero-notes span { padding: .35rem .75rem; background: #fff; border: 2px solid #244339; border-radius: 999px; font-weight: 800; }
body[data-design="informal"] .hero-notes span:nth-child(2) { background: #f8dda0; transform: rotate(2deg); }
body[data-design="informal"] .hero-mark { justify-self: start; width: 220px; margin: 0; color: #23342e; background: #84e4c0; border: 3px solid #23342e; border-radius: 42% 58% 54% 46% / 55% 43% 57% 45%; box-shadow: 9px 9px 0 #f6d96f; transform: rotate(4deg); }
body[data-design="informal"] .hero-mark .mark-letter { font-size: 7rem; }
body[data-design="informal"] .hero-mark p { bottom: 1.2rem; color: #23342e; }
body[data-design="informal"] .orbit { display: none; }
body[data-design="informal"] .about { grid-template-columns: .55fr 1.45fr; width: calc(100% - 5rem); margin: 2rem auto 6rem; padding: 3.5rem; color: #23342e; background: #c8f2e3; border: 3px solid #244339; border-radius: 1.25rem 3rem 1.25rem 3rem; box-shadow: 10px 10px 0 #f6d96f; transform: rotate(-.35deg); }
body[data-design="informal"] .about .section-label { color: #087c61; }
body[data-design="informal"] .about-copy p { color: #41564e; }
body[data-design="informal"] .apps-section { width: calc(100% - 5rem); }
body[data-design="informal"] .section-heading { grid-template-columns: 1fr; }
body[data-design="informal"] .section-heading > p:last-child { margin-top: .8rem; }
body[data-design="informal"] .app-grid { gap: 1.4rem; }
body[data-design="informal"] .app-card { border: 3px solid #244339; border-radius: 1.4rem; box-shadow: 7px 8px 0 #244339; }
body[data-design="informal"] .app-card:nth-child(1) { transform: rotate(-1.2deg); }
body[data-design="informal"] .app-card:nth-child(2) { transform: translateY(1.2rem) rotate(1deg); }
body[data-design="informal"] .app-card:nth-child(3) { transform: rotate(-.6deg); }
body[data-design="informal"] .app-card:hover { box-shadow: 3px 4px 0 #244339; transform: translate(4px,4px) rotate(0); }
body[data-design="informal"] .app-icon { border: 2px solid #244339; border-radius: 50%; }
body[data-design="informal"] .golf-card .app-icon { background: #f6d96f; color: #23342e; }
body[data-design="informal"] .board-card .app-icon { background: #f3b4c9; }
body[data-design="informal"] footer { width: calc(100% - 2rem); margin: 0 auto 1rem; color: #52675f; background: transparent; border-top: 2px dashed #9ac9b9; }
body[data-design="informal"] footer img { filter: none; }

/* Cartoon direction: loud outlines, stacked title, oversized badges and playful panels. */
body[data-design="cartoon"] {
  --paper: #8ff0ce;
  --ink: #182035;
  --mint-dark: #0a715d;
  background: #8ff0ce;
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}
body[data-design="cartoon"] .site-shell { background: linear-gradient(180deg, #8ff0ce 0 34%, #fff8d9 34% 72%, #c8b9ff 72%); }
body[data-design="cartoon"] .site-header { width: min(1240px, calc(100% - 2rem)); margin-top: 1rem; padding: .8rem 1.1rem; background: #fff; border: 4px solid #182035; border-radius: 999px; box-shadow: 6px 6px 0 #182035; }
body[data-design="cartoon"] .brand img { width: 154px; }
body[data-design="cartoon"] .site-header nav a { padding: .4rem .8rem; background: #f7d65e; border: 3px solid #182035; border-radius: 999px; box-shadow: 3px 3px 0 #182035; }
body[data-design="cartoon"] .hero { grid-template-columns: 1fr .7fr; grid-template-areas: "copy mark" "notes mark"; width: min(1240px, calc(100% - 3rem)); min-height: 670px; padding: 4rem 0 5rem; }
body[data-design="cartoon"] .eyebrow { display: inline-block; color: #182035; background: #fff; border: 3px solid #182035; border-radius: 999px; padding: .35rem .8rem; box-shadow: 4px 4px 0 #182035; transform: rotate(-2deg); }
body[data-design="cartoon"] h1 { font-size: clamp(4.6rem, 9vw, 8.7rem); line-height: .78; letter-spacing: -.08em; text-transform: uppercase; -webkit-text-stroke: 3px #182035; color: #fff; text-shadow: 8px 8px 0 #182035; }
body[data-design="cartoon"] h1 span { color: #ff6fa5; }
body[data-design="cartoon"] .hero-intro { max-width: 610px; color: #243047; font-weight: 700; }
body[data-design="cartoon"] .primary-action { color: #182035; background: #f7d65e; border: 4px solid #182035; border-radius: 999px; box-shadow: 6px 6px 0 #182035; text-transform: uppercase; }
body[data-design="cartoon"] .primary-action:hover { box-shadow: 2px 2px 0 #182035; transform: translate(4px,4px); }
body[data-design="cartoon"] .hero-mark { width: 330px; color: #182035; background: #ff6fa5; border: 5px solid #182035; border-radius: 38% 62% 42% 58% / 56% 38% 62% 44%; box-shadow: 12px 12px 0 #f7d65e, 17px 17px 0 #182035; transform: rotate(6deg); }
body[data-design="cartoon"] .hero-mark p { color: #182035; font-weight: 950; }
body[data-design="cartoon"] .orbit-one { inset: -1.7rem; border: 5px dotted #182035; }
body[data-design="cartoon"] .orbit-two { display: none; }
body[data-design="cartoon"] .hero-notes { display: flex; gap: .7rem; padding: 0; border: 0; }
body[data-design="cartoon"] .hero-notes span { padding: .35rem .65rem; background: #fff; border: 3px solid #182035; border-radius: .4rem; box-shadow: 3px 3px 0 #182035; font-weight: 900; transform: rotate(-1deg); }
body[data-design="cartoon"] .hero-notes span:nth-child(2) { background: #c8b9ff; transform: rotate(2deg); }
body[data-design="cartoon"] .hero-notes span:nth-child(3) { background: #f7d65e; transform: rotate(-2deg); }
body[data-design="cartoon"] .about { position: relative; grid-template-columns: .7fr 1.3fr; width: min(1240px, calc(100% - 3rem)); margin: 0 auto 8rem; padding: 4rem; color: #182035; background: #fff; border: 5px solid #182035; border-radius: 3rem; box-shadow: 12px 12px 0 #182035; transform: rotate(-.45deg); }
body[data-design="cartoon"] .about .section-label { color: #0a715d; }
body[data-design="cartoon"] .about-copy p { color: #37415a; font-weight: 650; }
body[data-design="cartoon"] .apps-section { width: min(1240px, calc(100% - 3rem)); margin-bottom: 10rem; }
body[data-design="cartoon"] .section-heading h2 { text-transform: uppercase; -webkit-text-stroke: 2px #182035; color: #fff; text-shadow: 5px 5px 0 #182035; }
body[data-design="cartoon"] .section-heading > p:last-child { color: #182035; font-weight: 800; }
body[data-design="cartoon"] .app-grid { gap: 1.5rem; }
body[data-design="cartoon"] .app-card { min-height: 520px; border: 5px solid #182035; border-radius: 2rem; box-shadow: 9px 9px 0 #182035; }
body[data-design="cartoon"] .app-card:nth-child(1) { background: #d7fff1; transform: rotate(-1deg); }
body[data-design="cartoon"] .app-card:nth-child(2) { background: #fff0a8; transform: translateY(2rem) rotate(1deg); }
body[data-design="cartoon"] .app-card:nth-child(3) { background: #f8c3d7; transform: rotate(-1.3deg); }
body[data-design="cartoon"] .app-card:hover { box-shadow: 4px 4px 0 #182035; transform: translate(5px,5px) rotate(0); }
body[data-design="cartoon"] .card-topline { color: #182035; font-weight: 950; }
body[data-design="cartoon"] .app-icon { width: 6rem; height: 6rem; color: #182035; border: 4px solid #182035; border-radius: 36% 64% 48% 52%; box-shadow: 5px 5px 0 #182035; transform: rotate(-6deg); }
body[data-design="cartoon"] .golf-card .app-icon { color: #182035; background: #ff6fa5; transform: rotate(6deg); }
body[data-design="cartoon"] .board-card .app-icon { background: #c8b9ff; }
body[data-design="cartoon"] .app-card h3 { font-size: 2.35rem; text-transform: uppercase; }
body[data-design="cartoon"] .made-by, body[data-design="cartoon"] .download-link { color: #182035; }
body[data-design="cartoon"] .card-copy > p:last-child { color: #354057; font-weight: 650; }
body[data-design="cartoon"] .download-link { padding: .8rem 1rem; background: #fff; border: 3px solid #182035; border-radius: 999px; box-shadow: 3px 3px 0 #182035; }
body[data-design="cartoon"] footer { color: #182035; background: #8ff0ce; border-top: 5px solid #182035; font-weight: 800; }
body[data-design="cartoon"] footer img { filter: none; }

@media (max-width: 900px) {
  .site-header, .hero, .about, .apps-section { width: calc(100% - 2rem); }
  .hero, body[data-design="informal"] .hero, body[data-design="cartoon"] .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "mark" "notes";
    min-height: 0;
  }
  .hero-mark, body[data-design="informal"] .hero-mark, body[data-design="cartoon"] .hero-mark { justify-self: center; width: min(330px, 82vw); }
  .about, body[data-design="informal"] .about, body[data-design="cartoon"] .about { grid-template-columns: 1fr; width: calc(100% - 2rem); }
  .app-grid { grid-template-columns: 1fr; }
  .app-card { min-height: 420px; }
  body[data-design="informal"] .apps-section, body[data-design="cartoon"] .apps-section { width: calc(100% - 2rem); }
  body[data-design="informal"] .app-card:nth-child(n), body[data-design="cartoon"] .app-card:nth-child(n) { transform: none; }
}

@media (max-width: 620px) {
  .design-switcher { align-items: stretch; width: calc(100% - 1rem); padding: .5rem; border-radius: 1.1rem; }
  .switcher-label { display: none; }
  .switcher-options { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .style-button { justify-content: center; padding-inline: .35rem; font-size: .78rem; }
  .site-header nav { gap: .5rem; }
  .site-header nav a { font-size: .8rem; }
  .brand img { width: 135px; }
  .hero { padding-top: 3rem; }
  h1, body[data-design="informal"] h1, body[data-design="cartoon"] h1 { font-size: clamp(3.55rem, 19vw, 5.2rem); }
  body[data-design="cartoon"] h1 { -webkit-text-stroke-width: 2px; text-shadow: 5px 5px 0 #182035; }
  .hero-notes, body[data-design="informal"] .hero-notes, body[data-design="cartoon"] .hero-notes { display: grid; grid-template-columns: 1fr; }
  .about, body[data-design="informal"] .about, body[data-design="cartoon"] .about { padding: 2.2rem 1.5rem; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading > p:last-child { margin-top: .8rem; }
  footer { grid-template-columns: 1fr; justify-items: start; padding-bottom: 8rem; }
  footer p:last-child { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}