/* Greens — brianrossen.com/greens
   The app's own palette: cream paper, felt green, cream rails, a red flag.
   No web fonts: ui-serif is New York on Apple devices, the same serif the app uses. */

:root {
  color-scheme: light;
  --paper: #F6F0E0;
  --paper-deep: #EDE4CC;
  --sheet: #FBF7EC;
  --ink: #1F3A2A;
  --ink-soft: #4E6356;
  --rule: #DCCFAE;
  --felt: #3E9B57;
  --felt-stripe: #44A25E;
  --felt-deep: #2B7442;
  --club: #1E4D32;
  --lawn: #557F45;
  --rail: #F2E8D0;
  --rail-shade: #D8CAA8;
  --flag: #D8433A;
  --gold: #D4A23A;
  --silver: #98A9A0;
  --bronze: #BE7F46;
  --display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --radius: 22px;
  --gutter: clamp(16px, 4vw, 32px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--felt-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--flag); }
::selection { background: var(--felt); color: #fff; }
:focus-visible { outline: 3px solid var(--flag); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }

/* Type */
.display, h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; }
h1 { font-size: clamp(42px, 7vw, 76px); line-height: 1.02; font-weight: 800; font-style: italic; letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; font-weight: 800; font-style: italic; letter-spacing: -0.015em; }
h3 { font-size: 22px; line-height: 1.2; font-weight: 700; }
.caps {
  font: 800 12px/1.3 var(--body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink-soft); max-width: 34em; }
.price-note { margin-top: 12px; font-size: 15px; color: var(--ink-soft); max-width: 34em; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 34px; border-radius: 23%; box-shadow: 0 2px 8px rgba(16,34,18,.25); }
.brand span { font: italic 800 25px/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 26px); font-size: 15px; font-weight: 600; }
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 620px) { .nav .hide-sm { display: none; } }
/* Phones: the hero already has the store button, so the header keeps just the name and Support. */
@media (max-width: 480px) { .nav .store, .nav .appstore { display: none; } .brand span { font-size: 19px; } }
@media (max-width: 360px) { .brand span { font-size: 17px; } .brand { gap: 8px; } }
.nav .store { white-space: nowrap; }

/* Buttons */
.store {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--rail);
  padding: 12px 20px 12px 16px; border-radius: 14px;
  text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.15;
  box-shadow: 0 6px 18px rgba(16,34,18,.22);
}
.store small { display: block; font-weight: 500; font-size: 11px; opacity: .8; letter-spacing: .02em; }
.store svg { width: 24px; height: 24px; flex: none; }
.store:hover { color: #fff; background: #183020; }
.store.soon { background: var(--felt-deep); cursor: default; }
/* Apple's official App Store badge, unmodified. Apple's minimum on screen is 40px tall. */
.appstore { display: inline-block; line-height: 0; border-radius: 9px; }
.appstore img { display: block; height: 48px; width: auto; }
.nav .appstore img { height: 40px; }
.pill {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: var(--sheet); border: 1px solid var(--rule);
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
}

/* Hero */
.hero { position: relative; padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.hero .copy { position: relative; z-index: 1; }
.hero .copy > * + * { margin-top: 22px; }
.hero .facts { display: flex; flex-wrap: wrap; gap: 8px; }
.hero .stage { position: relative; display: flex; justify-content: center; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .stage { order: -1; }
}

/* Scenery sprites from the game, scattered round the edges */
.sprite { position: absolute; pointer-events: none; user-select: none; }

/* Devices: Apple's own frames (Tools/Art/make_web_devices.py), transparent, buttons and all */
.device { width: min(310px, 76vw); height: auto; filter: drop-shadow(0 26px 30px rgba(16,34,18,.3)); }
/* The top iPhone: a looping video behind Apple's frame, its screen placed where the frame's is. */
.device-video { position: relative; }
.device-video img { position: relative; display: block; width: 100%; height: auto; }
.device-video video { position: absolute; left: 5.161%; top: 2.445%; width: 89.677%; height: 95.110%;
  object-fit: cover; border-radius: 12%/5.6%; background: #4E7A40; }
.device.small { width: min(240px, 64vw); filter: drop-shadow(0 18px 22px rgba(16,34,18,.24)); }
.duo-device { width: 100%; max-width: 660px; height: auto; filter: drop-shadow(0 30px 40px rgba(8,24,12,.45)); }

/* Sections */
section { padding: clamp(56px, 8vw, 104px) 0; }
.head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); }
.head > * + * { margin-top: 14px; }

/* Felt band: a strip of green carpet with the mowing stripes and a cream rail */
.felt {
  position: relative;
  background:
    repeating-linear-gradient(-58deg, var(--felt) 0 34px, var(--felt-stripe) 34px 68px);
  border-top: 14px solid var(--rail);
  border-bottom: 14px solid var(--rail);
  box-shadow: inset 0 6px 10px rgba(16,34,18,.25), inset 0 -6px 10px rgba(16,34,18,.18);
  color: #fff;
}
.felt h2, .felt h3 { color: #fff; }
.felt .caps { color: rgba(255,255,255,.8); }
/* Apple's product names keep their own capitals inside an all-caps label ("MADE FOR iPhone Duo"):
   Apple asks for them exactly as written, never IPHONE. */
.caps .tm { text-transform: none; letter-spacing: 0.06em; font-size: 1.08em; }
.felt .lede { color: rgba(255,255,255,.88); }

/* iPhone Duo */
.duo-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.duo-grid .copy > * + * { margin-top: 16px; }
.duo-stage { display: flex; justify-content: center; }
.duo-gallery { width: 100%; max-width: 680px; }
/* The shadow belongs to the strip, not each picture: a scroller clips its pictures' own
   shadows to a hard-edged box. A filter on the scroller itself draws outside it. */
.duo-track { filter: drop-shadow(0 30px 40px rgba(8,24,12,.45)); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.duo-track::-webkit-scrollbar { display: none; }
.duo-track:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 6px; border-radius: 12px; }
.duo-slide { flex: 0 0 100%; margin: 0; padding: 8px 16px 24px; aspect-ratio: 1300 / 1020; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; }
.duo-slide .duo-device { width: auto; max-width: 100%; max-height: 100%; filter: none; }
.duo-dots { display: flex; justify-content: center; gap: 2px; margin-top: 20px; }
/* A 28 px target around a 9 px dot. */
.duo-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.duo-dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .2s; }
.duo-dots button[aria-current]::before { background: #fff; }
@media (max-width: 860px) { .duo-grid { grid-template-columns: 1fr; } }

/* How it plays */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step { background: rgba(16,34,18,.18); border-radius: var(--radius); padding: 24px; }
.step svg { width: 100%; height: 120px; display: block; margin-bottom: 14px; }
.step p { margin: 8px 0 0; color: rgba(255,255,255,.88); font-size: 16px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* Screens row */
.shots {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px var(--gutter) 28px; margin: 0 calc(var(--gutter) * -1);
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shots figure { margin: 0; flex: none; scroll-snap-align: center; }
.shots figcaption { text-align: center; margin-top: 14px; font-weight: 600; font-size: 15px; color: var(--ink-soft); }

/* Courses */
.classic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* The two kinds of course, each under its own heading. */
.course-group + .course-group { margin-top: clamp(44px, 6vw, 72px); }
.group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 22px; border-bottom: 2px solid var(--rule); }
.group-head h3 { font-size: clamp(28px, 3.4vw, 36px); font-style: italic; font-weight: 800; }
.group-head p { margin: 6px 0 0; color: var(--ink-soft); font-size: 17px; }
.group-tag { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.3;
  background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); }
.group-tag.free { background: var(--felt-deep); border-color: var(--felt-deep); color: #fff; }
.courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.course {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 8px 22px rgba(16,34,18,.08);
}
.course img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; }
.course .body { padding: 18px 20px 20px; }
.course .body p { margin: 4px 0 0; color: var(--ink-soft); font-size: 16px; }
.course .meta { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
/* What's new: one collapsible row per version. */
.releases { margin-top: 8px; }
.release { border-top: 1px solid var(--rule); }
.release:last-child { border-bottom: 1px solid var(--rule); }
.release summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 18px; padding: 20px 0; }
.release summary::-webkit-details-marker { display: none; }
.release summary::after { content: "+"; margin-left: auto; font: 400 28px/1 var(--body); color: var(--felt-deep); }
.release[open] summary::after { content: "–"; }
.release .ver { font: italic 800 26px/1.1 var(--display); color: var(--ink); white-space: nowrap; }
.release .what { color: var(--ink-soft); font-size: 17px; }
.release-body { padding: 0 0 28px; }
.release-body > p { margin: 0 0 12px; color: var(--ink-soft); max-width: 46em; }
.release-body .also-head { margin-top: 28px; }
@media (max-width: 560px) { .release summary { flex-wrap: wrap; gap: 4px 14px; } .release .what { order: 3; flex-basis: 100%; } }
/* The "Also new" list under the new courses. */
/* A swipeable row of App Store screenshots (iPhone and iPad), all the same height. */
.store-shots { display: flex; gap: 14px; overflow-x: auto; margin: 8px 0 32px; padding-bottom: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.store-shots img { height: 460px; width: auto; flex: none; border-radius: 16px; border: 1px solid var(--rule); scroll-snap-align: start; }
@media (max-width: 620px) { .store-shots img { height: 380px; } }
.also-head { margin: 40px 0 14px; font-size: 22px; }
.also-new { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.also-new li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.also-new li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--felt); }
.also-new strong { color: var(--ink); }
@media (max-width: 720px) { .also-new { grid-template-columns: 1fr; } }
.classic .course { display: flex; flex-direction: column; justify-content: space-between; padding: 26px; }
.classic .course h3 { font-size: 30px; font-style: italic; font-weight: 800; }
@media (max-width: 900px) { .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Course thumbnails: a square crop of one of the course's holes (Tools/web/course_thumbs.py). */
.course img.thumb { width: 72px; height: 72px; aspect-ratio: 1; object-fit: cover; flex: none; border-radius: 16px;
  box-shadow: 0 4px 12px rgba(16, 34, 18, .18); }
.courses .course { display: flex; align-items: center; }
.courses .course img.thumb { margin-left: 16px; }
.courses .course .body { padding: 16px 18px; }
.classic .course img.thumb { width: 88px; height: 88px; margin-bottom: 18px; }
.classic .course { justify-content: flex-start; }
.classic .course .meta { margin-top: auto; padding-top: 16px; }
@media (max-width: 900px) {
  .classic { grid-template-columns: 1fr; }
  .classic .course { display: grid; grid-template-columns: 88px 1fr; column-gap: 18px; align-items: center; }
  .classic .course img.thumb { grid-row: 1 / span 2; margin-bottom: 0; align-self: start; }
}
@media (max-width: 560px) {
  .classic .course { grid-template-columns: 64px 1fr; column-gap: 16px; padding: 20px; }
  .classic .course img.thumb { width: 64px; height: 64px; }
  .classic .course h3 { font-size: 26px; }
}
@media (max-width: 560px) { .courses, .classic { grid-template-columns: 1fr; } }

/* Medals */
.medals { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.medal { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--ink-soft); }
.coin { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }

/* Features */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px; }
.feature .glyph { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--felt); color: #fff; margin-bottom: 16px; }
.feature .glyph svg { width: 24px; height: 24px; }
.feature p { margin: 8px 0 0; color: var(--ink-soft); font-size: 16px; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* The promise */
.promise { text-align: center; }
.promise h2 { font-size: clamp(34px, 6vw, 64px); }
.promise .lede { margin: 18px auto 0; }

/* Scorecard-style CTA */
.card {
  background: var(--sheet); border-radius: var(--radius); padding: clamp(28px, 5vw, 48px);
  box-shadow: 0 18px 40px rgba(16,34,18,.16); text-align: center;
}
.card > * + * { margin-top: 16px; }

/* Legal / support pages */
.page { padding: clamp(40px, 7vw, 80px) 0 clamp(64px, 9vw, 110px); }
.page .card { text-align: left; }
.prose h2 { font-size: clamp(26px, 3.4vw, 32px); margin: 40px 0 10px; }
.prose h2:first-of-type { margin-top: 28px; }
.prose h3 { margin: 26px 0 6px; font-size: 19px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose p { margin: 0 0 14px; }
.prose ul { padding-left: 1.2em; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--ink); }
.faq details { border-top: 1px solid var(--rule); padding: 16px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--body); color: var(--felt-deep); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }

/* Footer */
footer { border-top: 1px solid var(--rule); padding: 34px 0 44px; font-size: 14px; color: var(--ink-soft); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
footer nav { display: flex; gap: 22px; }
footer a { color: var(--ink-soft); }

/* What players say: App Store review quotes on sheet cards. */
.quotes { columns: 3 260px; column-gap: 18px; }
.quotes .quote { break-inside: avoid; margin-bottom: 18px; }
.quote { margin: 0; padding: 24px 26px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 12px; }
.quote .stars { color: var(--gold); letter-spacing: 3px; font-size: 17px; }
.quote blockquote { margin: 0; font: italic 500 clamp(18px, 2vw, 21px)/1.45 var(--display); color: var(--ink); }
.quote figcaption { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--ink-soft); }

/* "Tee off now." over Greens' App Store featuring art (2026-10-28): the windmill up top, the
   card down on the fairway. */
.cta-art { background: #8cc2e4; position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100vw * 2950 / 5244); display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px calc(100vw * 2950 / 5244 * 0.05); }
.cta-art .narrow { width: 100%; position: relative; z-index: 1; }
/* The art, covering the section from the top: its own aspect ratio, at least as wide as the section. */
.cta-scene { position: absolute; z-index: 0; top: 0; left: 50%; transform: translateX(-50%);
  width: max(100%, calc(var(--cta-h, 100%) * 5244 / 2950)); aspect-ratio: 5244 / 2950; min-height: 100%; }
.cta-sheet { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.cta-piece { position: absolute; max-width: none; will-change: transform; }
/* The same gentle moves as the in-game course scenes (CourseScene): clouds cross the sky slowly
   and come round again, birds fly across left to right, smoke sways, lava glows, flags squeeze
   and rock from their poles, the ship bobs, the sails turn once every 14 seconds. --from and
   --to (written by Tools/Featuring/web_art.py) put a piece just off the left edge and just off
   the right. */
.cta-cloud-1, .cta-cloud-2, .cta-cloud-3, .cta-cloud-4, .cta-cloud-5, .cta-cloud-6 { animation: cta-cross linear infinite; }
.cta-cloud-1 { animation-duration: 190s; animation-delay: -60s; }
.cta-cloud-2 { animation-duration: 230s; animation-delay: -150s; }
.cta-cloud-3 { animation-duration: 210s; animation-delay: -40s; }
.cta-cloud-4 { animation-duration: 250s; animation-delay: -190s; }
.cta-cloud-5 { animation-duration: 200s; animation-delay: -20s; }
.cta-cloud-6 { animation-duration: 240s; animation-delay: -110s; }
@keyframes cta-cross { from { translate: var(--from) 0; } to { translate: var(--to) 0; } }
.cta-birds { animation: cta-fly 40s linear -12s infinite, cta-flap 1.4s ease-in-out infinite alternate; }
@keyframes cta-fly {
  from { translate: var(--from) 8%; } 50% { translate: calc((var(--from) + var(--to)) / 2) -6%; } to { translate: var(--to) 4%; }
}
@keyframes cta-flap { from { scale: 1 1; } to { scale: 1 .8; } }
.cta-smoke { transform-origin: 70% 100%; animation: cta-sway 6s ease-in-out infinite alternate; }
@keyframes cta-sway { from { rotate: -3deg; opacity: .95; } to { rotate: 3deg; opacity: .75; } }
.cta-lava { animation: cta-glow 2.8s ease-in-out infinite alternate; }
@keyframes cta-glow { from { opacity: 1; filter: brightness(1); } to { opacity: .86; filter: brightness(1.18); } }
.cta-pennant, .cta-flag { transform-origin: 0% 50%; animation: cta-wave 1.6s ease-in-out infinite alternate; }
.cta-pennant { animation-duration: 1.9s; animation-delay: -.7s; }
@keyframes cta-wave { from { transform: scaleX(.88) rotate(-2.5deg); } to { transform: scaleX(1) rotate(2.5deg); } }
.cta-ship { transform-origin: 50% 92%; animation: cta-bob 5s ease-in-out infinite alternate; }
@keyframes cta-bob { from { translate: 0 0; rotate: -1deg; } to { translate: 0 -1.6%; rotate: 1deg; } }
.cta-sails { animation: cta-turn 14s linear infinite; }
@keyframes cta-turn { to { rotate: 360deg; } }
.cta-art:not(.is-visible) .cta-piece { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cta-piece { animation: none; } }
.cta-art .card { background: rgba(251, 248, 239, .55); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1); border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 24px 60px rgba(10, 30, 14, .35); }
@media (max-width: 860px) {
  .cta-art { min-height: 0; padding-top: 46vw; padding-bottom: 32px; }
}