/* thailandgolfindex.com: the TGI app's look on a computer screen. Colours match src/constants/theme.ts. */
:root {
  --navy: #0B1A5C;
  --navy-light: #1F3A93;
  --red: #C8102E;
  --green: #1C7C3A;
  --green-dark: #145C2B;
  --surface: #F4F6FB;
  --card: #FFFFFF;
  --text: #111827;
  --muted: #5B6475;
  --border: #E1E5EE;
  --plan-on: #EEF1F8;
  --radius: 16px;
  --wide: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font: 17px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
img { max-width: 100%; display: block; }
a { color: var(--navy-light); }
h1, h2, h3 { color: var(--navy); line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 900; letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; font-weight: 800; }
p { margin: 0; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
section { padding: 56px 0; }
.stack { display: grid; gap: 16px; }
.lead { font-size: 1.15rem; color: var(--text); max-width: 46rem; }
.muted { color: var(--muted); }
.label { font-size: 1.15rem; font-weight: 800; color: var(--navy); margin-bottom: 16px; }

/* Header: plain white bar with the TGI mark, like the app's top bar. */
.top { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.top { background: #fff url(img/silk.jpg) center 30% / cover; box-shadow: 0 2px 14px rgba(11, 26, 92, .12); }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 136px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.brand img { width: 190px; height: auto; }
.brand span { font-weight: 900; color: var(--navy); font-size: 1.2rem; letter-spacing: .08em; line-height: 1.15; }
.nav {
  display: flex; gap: 4px; margin-left: auto; padding: 5px; background: rgba(255, 255, 255, .85);
  border: 1px solid var(--border); border-radius: 999px;
}
.nav a {
  text-decoration: none; color: var(--navy); font-weight: 700; font-size: .95rem; padding: 9px 16px;
  border-radius: 999px; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s;
}
.nav a:hover { background: #fff; }
.nav a[aria-current="page"] { background: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(28, 124, 58, .35); }
.nav a:focus-visible, .btn:focus-visible, .sample:focus-visible, .langs summary:focus-visible { outline: 3px solid var(--navy-light); outline-offset: 2px; }

/* Buttons: green rounded-10, as in the app. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 10px; border: 2px solid var(--green);
  background: var(--green); color: #fff; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn.secondary { background: #fff; color: var(--green); }
.btn.secondary:hover { background: var(--surface); }
.btn.navy { background: var(--navy); border-color: var(--navy); }
.btn.red { background: var(--red); border-color: var(--red); }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }

.pill {
  display: inline-block; background: var(--red); color: #fff; font-weight: 800; font-size: .9rem;
  padding: 4px 14px; border-radius: 999px;
}

/* The white silk hero with the Thai flag and TGI logo, like the Membership page and the TGI card. */
.hero {
  position: relative; overflow: hidden; border-radius: 20px; border: 1.5px solid var(--navy);
  background: #fff url(img/silk.jpg) center / cover; box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  padding: 190px 48px 48px; display: grid; gap: 16px; margin-top: 32px;
}
.hero > :not(.flag):not(.logo) { position: relative; }
.hero .flag { position: absolute; top: 0; left: 0; width: min(380px, 52%); }
.hero .logo { position: absolute; top: 24px; right: 32px; width: min(230px, 36%); }
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px;
}
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.feature { display: flex; gap: 16px; align-items: flex-start; }
.icon {
  flex: none; width: 48px; height: 48px; border-radius: 24px; background: var(--navy); color: #fff;
  display: grid; place-items: center;
}
.icon svg { width: 26px; height: 26px; fill: currentColor; }
.icon.red { background: var(--red); }
.icon.green { background: var(--green); }
.feature h3 { margin-bottom: 4px; font-size: 1.1rem; }
.feature p { color: var(--muted); font-size: .97rem; }

/* Plans: the app's plan cards, with the full "includes" list since a computer has room. */
.plan { border-width: 2px; display: grid; gap: 14px; align-content: start; }
.plan.first { border-color: var(--navy); background: var(--plan-on); }
.plan .head { display: flex; gap: 14px; align-items: center; }
.plan .head img { width: 48px; }
.plan h3 { font-size: 1.3rem; }
.price { font-size: 1.9rem; font-weight: 900; color: var(--red); line-height: 1; }
.per { font-size: .9rem; color: var(--muted); }
.who { color: var(--muted); font-size: .97rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; font-size: .97rem; }
.ticks li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 10px; background: #15803D
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}
.note { font-size: .92rem; color: var(--muted); }

/* PSC banner on the Membership page. */
.psc-banner {
  display: flex; gap: 20px; align-items: center; text-decoration: none; color: inherit;
  background: #fff; border: 1.5px solid var(--navy); border-radius: var(--radius); padding: 20px 24px;
}
.psc-banner img { width: 64px; flex: none; }
.psc-banner .price { margin-left: auto; text-align: right; }

/* PSC pages in PSC's own navy, red and white. */
.psc-hero {
  background: #fff url(img/silk.jpg) center / cover; color: var(--text); border-radius: 20px;
  border: 1.5px solid var(--navy); box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  padding: 40px 32px; text-align: center; display: grid; gap: 16px; justify-items: center; margin-top: 32px;
}
.psc-hero img { width: 150px; }
.psc-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.psc-hero h1 strong { color: var(--red); }
.psc-hero p { max-width: 40rem; font-size: 1.1rem; color: var(--text); }
.psc-panel { border: 1.5px solid var(--navy); }
.fees { width: 100%; border-collapse: collapse; }
.fees td { padding: 12px 0; border-bottom: 1px solid var(--border); }
.fees td:last-child { text-align: right; font-weight: 900; color: var(--red); white-space: nowrap; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.steps li { counter-increment: step; display: flex; gap: 16px; align-items: flex-start; }
.steps li::before {
  content: counter(step); flex: none; width: 36px; height: 36px; border-radius: 18px; background: var(--green);
  color: #fff; font-weight: 900; display: grid; place-items: center;
}

.notice { background: #EEF6F0; border: 1px solid #CFE6D6; border-radius: var(--radius); padding: 16px 20px; }
.test {
  background: #FFF4D6; border: 1px solid #F1D48A; color: #6B4E00; border-radius: var(--radius); padding: 14px 20px;
}

.band { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.split { display: grid; gap: 40px; grid-template-columns: 1.1fr 1fr; align-items: center; }

/* Footer stays fixed at the bottom of the screen; the page scrolls under it (David 27 Oct) */
body { padding-bottom: 72px; }
footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: #fff url(img/silk.jpg) center / cover; color: var(--muted); padding: 8px 0; font-size: .9rem;
  border-top: 1px solid var(--border); box-shadow: 0 -4px 14px rgba(11, 26, 92, .08);
}
footer .wrap { display: flex; gap: 18px; align-items: center; min-height: 56px; }
footer strong { color: var(--navy); }
footer a { color: var(--navy); font-weight: 700; white-space: nowrap; }
footer .links { display: flex; gap: 18px; margin-left: auto; }
footer img { width: 64px; flex: none; }
@media (max-width: 820px) {
  body { padding-bottom: 60px; }
  footer { padding: 6px 0; font-size: .85rem; }
  footer .wrap { min-height: 46px; gap: 12px; }
  footer .wrap > div:not(.links) { display: none; }
  footer img { width: 48px; }
  footer .links { gap: 14px; overflow-x: auto; scrollbar-width: none; margin-left: 0; }
  footer .links::-webkit-scrollbar { display: none; }
}

@media (max-width: 820px) {
  .top .wrap { flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .top .wrap { min-height: 0; }
  .brand img { width: 128px; }
  .brand span { display: none; }
  .nav { margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 12px; }
  .split { grid-template-columns: 1fr; }
  .hero { padding: 96px 24px 32px; }
  .hero .logo { top: 16px; right: 16px; }
  section { padding: 40px 0; }
  .wrap { padding: 0 16px; }
  .psc-banner { flex-wrap: wrap; }
  .psc-banner .price { margin-left: 0; text-align: left; }
}

/* Language picker with flags, English first (same order as the app). */
.langs { position: relative; }
.langs summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; font-weight: 700; color: var(--navy); white-space: nowrap;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: "▾"; font-size: .8rem; }
.flag-icon { display: inline-flex; width: 26px; height: 18px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none; }
.flag-icon svg { width: 100%; height: 100%; display: block; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(11, 26, 92, .15); padding: 6px; min-width: 190px; display: grid; z-index: 20;
}
.lang-menu a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none;
  color: var(--text); font-weight: 600;
}
.lang-menu a:hover { background: var(--surface); }
.lang-menu a[aria-current] { background: var(--plan-on); color: var(--navy); font-weight: 800; }
@media (max-width: 820px) {
  .langs { margin-left: auto; order: 2; }
  .nav { order: 3; }
  .langs .lang-name { display: none; }
}

@media (max-width: 1180px) and (min-width: 821px) { .brand span { display: none; } }

/* Sample button and screen viewer. */
.stack-sm { display: grid; gap: 4px; align-content: start; justify-items: start; }
.sample {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 8px;
  border: 1px solid rgba(11, 26, 92, .12); background: rgba(11, 26, 92, .05); color: var(--navy); font: inherit;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  justify-self: start; align-self: start; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.sample svg { width: 13px; height: 13px; fill: currentColor; opacity: .8; }
.sample:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-1px); }
.sample:hover svg { opacity: 1; }
.sample-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sample-btns .sample { margin-top: 0; }
.viewer {
  border: 0; border-radius: 20px; padding: 0; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(11, 26, 92, .35);
}
.viewer::backdrop { background: rgba(11, 26, 92, .55); }
.viewer-head { display: flex; align-items: center; gap: 16px; padding: 18px 24px 0; }
.viewer-head h3 { font-size: 1.4rem; }
.viewer-close {
  margin-left: auto; width: 40px; height: 40px; border-radius: 20px; border: 0; background: #fff; color: var(--navy);
  font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 0 0 1px var(--border);
}
.viewer { width: min(1240px, calc(100vw - 32px)); }
.viewer-body { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 8px; align-items: start; }
.viewer-info {
  margin: 16px 0 24px 24px; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  display: grid; gap: 12px; max-height: calc(100vh - 170px); overflow-y: auto;
}
.viewer-info p { font-size: .98rem; }
.viewer-info .label { margin: 4px 0 0; font-size: 1rem; }
.viewer-shots { min-width: 0; }
.viewer-note { padding: 16px 24px 0; color: var(--muted); font-size: .92rem; }
.viewer-strip { display: flex; gap: 18px; overflow-x: auto; padding: 14px 24px 24px; scroll-snap-type: x mandatory; }
@media (max-width: 820px) {
  .viewer { max-height: calc(100vh - 24px); overflow-y: auto; }
  .viewer-body { grid-template-columns: 1fr; }
  .viewer-info { margin: 12px 16px 0; max-height: none; overflow: visible; }
  .viewer-note, .viewer-strip { padding-left: 16px; padding-right: 16px; }
}
.viewer-strip figure { position: relative; margin: 0; flex: none; scroll-snap-align: start; }
.viewer-strip img {
  height: min(600px, calc(100vh - 200px)); width: auto; max-width: none; border-radius: 22px;
  border: 6px solid #111827; background: #fff;
}
.viewer-strip figure.wide img { border-radius: 14px; border-width: 8px; }
.stamp {
  position: absolute; top: 18px; right: -6px; background: var(--red); color: #fff; font-weight: 900;
  font-size: .8rem; letter-spacing: .12em; padding: 4px 12px; border-radius: 6px 0 0 6px; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
@media (max-width: 820px) { .viewer-strip img { height: min(520px, calc(100vh - 220px)); } }
@media (prefers-reduced-motion: reduce) { .nav a { transition: none; } }
.grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.five .feature { flex-direction: column; }
@media (max-width: 1080px) { .grid.five { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grid.five .feature { flex-direction: row; } }

.viewer-strip figure.wide img { height: min(520px, calc(100vh - 220px)); }
@media (max-width: 820px) { .viewer-strip figure.wide img { height: auto; width: calc(100vw - 72px); } }
.sample-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-right: 2px; }
.sample-btns { align-items: center; }
.sample-btns { gap: 0; }
.sample-lbl { flex-basis: 100%; margin: 0 0 4px; }
.sample-btns .sample { border-radius: 0; padding: 4px 9px 4px 7px; }
.sample-btns .sample:nth-child(2) { border-radius: 8px 0 0 8px; }
.sample-btns .sample:last-child { border-radius: 0 8px 8px 0; }
.sample-btns .sample:nth-child(2):last-child { border-radius: 8px; }
.sample-btns .sample + .sample { border-left: 0; }
.sample-btns .sample { padding: 3px 7px 3px 6px; gap: 4px; font-size: .72rem; }
.sample-btns .sample svg { width: 12px; height: 12px; }

/* Header actions: Sign In and Join TGI. */
.acts { display: flex; align-items: center; gap: 12px; flex: none; }
.signin { font-weight: 700; color: var(--navy); text-decoration: none; }
.signin:hover { text-decoration: underline; }
.btn.join-btn { min-height: 40px; padding: 0 16px; font-size: .95rem; }
.btn.join { min-height: 40px; justify-self: start; font-size: .95rem; }
@media (max-width: 1240px) { .brand span { display: none; } }

/* Join and Sign In pages. */
.wrap.narrow { max-width: 900px; padding-top: 32px; padding-bottom: 48px; }
.page-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--navy); }
.demo-note { background: #FFF7E6; border: 1px solid #F2C46D; border-radius: 12px; padding: 12px 16px; font-size: .95rem; }
.demo-note strong { color: var(--red); }
.small { font-size: .9rem; }
.center { text-align: center; }
.join-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: s; }
.join-steps li { counter-increment: s; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); font-size: .92rem; }
.join-steps li::before {
  content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--border); color: var(--muted); font-size: .85rem;
}
.join-steps li.on { color: var(--navy); }
.join-steps li.on::before { background: var(--navy); border-color: var(--navy); color: #fff; }
.join-steps li.done::before { content: "✓"; background: var(--green); border-color: var(--green); color: #fff; }
.join-card, .signin-card { padding: 28px; display: grid; gap: 18px; }
.step { display: grid; gap: 18px; }
.step[hidden] { display: none; }
.step h2 { font-size: 1.5rem; color: var(--navy); }
.opts { display: grid; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 14px;
  cursor: pointer; background: #fff; transition: border-color .15s, background .15s;
}
.opt:hover { border-color: var(--navy); }
.opt:has(input:checked) { border-color: var(--navy); background: var(--plan-on); box-shadow: 0 0 0 1px var(--navy); }
.opt input { accent-color: var(--navy); width: 18px; height: 18px; flex: none; }
.opt img { width: 40px; flex: none; }
.opt .icon { width: 40px; height: 40px; }
.opt .icon svg { width: 22px; height: 22px; }
.opt-text { display: grid; }
.opt-text small, .summary small { color: var(--muted); font-size: .88rem; }
.opt-price { margin-left: auto; font-weight: 900; color: var(--red); font-size: 1.25rem; white-space: nowrap; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .wide, .grid .wide { grid-column: 1 / -1; }
.plan-extra { display: grid; gap: 6px; }
.plan-extra[hidden], [data-for][hidden] { display: none !important; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 700; color: var(--navy); font-size: .92rem; }
.field small { color: var(--muted); font-size: .84rem; }
.field input, .field select {
  font: inherit; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: var(--text);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11, 26, 92, .12); }
.field input[readonly] { background: var(--surface); color: var(--muted); }
.check { display: flex; gap: 10px; align-items: center; font-size: .95rem; }
.check input { width: 18px; height: 18px; accent-color: var(--green); }
.step-btns { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.step-btns .btn:last-child { margin-left: auto; }
.summary { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; background: var(--surface); }
.summary > div:first-child { display: grid; }
.renew-note { margin: 6px 2px 0; color: var(--muted); font-size: .82rem; }
.summary .price { margin-left: auto; font-size: 1.6rem; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; background: var(--surface); border-radius: 14px; }
.tab {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 0; border-radius: 10px;
  background: transparent; font: inherit; font-weight: 700; color: var(--navy); cursor: pointer;
}
.tab .icon { width: 28px; height: 28px; background: transparent; color: var(--navy); }
.tab .icon svg { width: 20px; height: 20px; }
.tab.on { background: #fff; box-shadow: 0 1px 6px rgba(11, 26, 92, .15); }
.pay { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.pay[data-pane="card"], .pay[data-pane="app"] { grid-template-columns: 1fr; }
.pay[hidden] { display: none; }
.brands { display: flex; flex-wrap: wrap; gap: 6px; }
.brands span, .store { font-size: .8rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: var(--surface); color: var(--navy); border: 1px solid var(--border); }
.store { padding: 10px 14px; font-size: .9rem; }
.done { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 8px 0; }
.done-tick .icon { width: 64px; height: 64px; border-radius: 32px; }
.done-tick .icon svg { width: 36px; height: 36px; }
.ticks.left { justify-self: stretch; text-align: left; max-width: 520px; margin: 0 auto; }
.member-card {
  display: grid; grid-template-columns: 96px repeat(3, 1fr); gap: 14px; align-items: center; text-align: left; width: 100%;
  padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--navy); background: #fff url(img/silk.jpg) center / cover;
}
.member-card img { width: 96px; }
.member-card > div { display: grid; }
.member-card small, .details small { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.member-card strong { color: var(--navy); }
.member-card .status { color: var(--green); }
.acct-head { display: flex; align-items: center; gap: 16px; }
.acct-head h2 { color: var(--navy); }
.acct-head .btn { margin-left: auto; }
.pay-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pay-table th { text-align: left; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; }
.pay-table td { padding: 10px 8px; border-top: 1px solid var(--border); }
.rounds, .details { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rounds li { display: flex; justify-content: space-between; gap: 12px; }
.rounds .ok, .rounds .wait { font-size: .8rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.rounds .ok { background: #E3F4E8; color: var(--green); }
.rounds .wait { background: #FFF1D6; color: #9A6200; }
.details li { display: grid; }
@media (max-width: 820px) {
  .acts { order: 1; margin-left: auto; }
  .acts .signin { font-size: .9rem; }
  .form-grid { grid-template-columns: 1fr; }
  .join-steps li { font-size: 0; gap: 0; justify-content: center; }
  .pay { grid-template-columns: 1fr; justify-items: center; }
  .member-card { grid-template-columns: 1fr 1fr; }
  .member-card img { grid-column: 1 / -1; }
  .tab span { font-size: .8rem; }
  .pay-table { font-size: .82rem; }
  .pay-table th:nth-child(3), .pay-table td:nth-child(3) { display: none; }
}
.field { align-content: start; }
@media (max-width: 1400px) { .brand span { display: none; } .top .wrap { gap: 14px; } }
@media (max-width: 1180px) and (min-width: 821px) { .langs .lang-name { display: none; } .acts .signin { display: none; } }
#signin[hidden], #account[hidden] { display: none; }
.grid.two .member-card { grid-template-columns: 1fr 1fr; }
.grid.two .member-card img { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .langs { order: 1; margin-left: auto; }
  .acts { order: 1; margin-left: 0; gap: 8px; }
  .nav { order: 3; }
  .btn.join-btn { min-height: 36px; padding: 0 12px; font-size: .88rem; }
  .tab .icon { display: none; }
}
@media (max-width: 480px) {
  .opt .icon, .opt img { display: none; }
  .opt { padding: 12px; gap: 10px; }
  .acts .signin { display: none; }
}
.opt.off { opacity: .55; cursor: not-allowed; }
.opt.off .opt-price { font-size: .95rem; }
.plan .price:only-child, .price { overflow-wrap: anywhere; }

/* The app's own coloured icons on a white tile, like the app's home screen. */
.icon.app { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 2px 6px rgba(11, 26, 92, .08); }
.icon.app img { width: 70%; height: 70%; object-fit: contain; }
.tab .icon.app, .opt .icon.app { border: 0; box-shadow: none; background: transparent; }
.tab .icon.app img { width: 100%; height: 100%; }
.done-tick .icon.app { border-radius: 32px; }
@media (max-width: 1400px) and (min-width: 821px) { .langs .lang-name { display: none; } }
.acts .btn.join-btn { white-space: nowrap; }
.step h2, .step h3, .join-card h2 { margin: 0; }
.step { align-content: start; }
section.step { padding: 0; }
.summary .price { font-size: 1.35rem; white-space: nowrap; flex: none; }
.summary > div:first-child { min-width: 0; }
.price { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 1180px) and (min-width: 821px) { .brand img { width: 140px; } .top .wrap { gap: 10px; } }
@media (max-width: 1400px) and (min-width: 821px) { .nav a { padding: 9px 11px; } .brand img { width: 150px; } }
@media (max-width: 1180px) and (min-width: 821px) { .nav a { padding: 8px 9px; font-size: .9rem; } .brand img { width: 120px; } }
@media (max-width: 1000px) and (min-width: 821px) { .top .wrap { flex-wrap: wrap; padding-bottom: 10px; } .nav { order: 3; margin-left: 0; } .langs { margin-left: auto; } }
@media (max-width: 1640px) and (min-width: 821px) { .brand span { display: none; } .langs .lang-name { display: none; } }
/* Header with six tabs: logo, tabs, flag, Sign In, Join. The words beside the logo and the language name go, so it fits every width. */
@media (min-width: 821px) {
  .brand span, .langs .lang-name { display: none; }
  .nav a { padding: 9px clamp(8px, .85vw, 16px); }
  .top .wrap { max-width: 1400px; }
}

/* Membership cards (David 27 Oct): PSC, Silver, Gold, Platinum */
.cards-sec { padding-bottom: 0; }
.tier-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tier { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink, #0B1A5C); }
.tier img { width: 100%; height: auto; aspect-ratio: 1.586; object-fit: contain; /* dark grey halo so the cards look raised (David 27 Oct) */ filter: drop-shadow(0 0 1.5px rgba(90,90,90,.6)) drop-shadow(0 4px 7px rgba(80,80,80,.35)) drop-shadow(0 8px 13px rgba(80,80,80,.18)); transition: transform .2s; }
.tier:hover img { transform: translateY(-3px); }
.tier-name { margin-top: 8px; font-weight: 800; font-size: 1.05rem; }
.tier-plan { font-size: .92rem; opacity: .75; }
@media (max-width: 1080px) { .tier-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tier-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tier-cards { grid-template-columns: 1fr; } }
.grid.plans6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid.plans6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid.plans6 { grid-template-columns: 1fr; } }

/* Phones (David 27 Oct): all six tabs fit on screen as a 3 x 2 grid, no sideways scrolling. */
@media (max-width: 600px) {
  .nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; overflow: visible; border-radius: 18px; }
  .nav a { padding: 7px 4px; font-size: .8rem; line-height: 1.15; text-align: center; white-space: normal; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; min-height: 34px; }
}
@media (max-width: 600px) {
  .brand img { width: 96px; }
  .top .wrap { flex-wrap: wrap; }
  .acts { order: 2; }
  .join-btn { padding: 8px 12px; font-size: .82rem; white-space: nowrap; }
  .langs summary { padding: 6px 8px; }
}
@media (max-width: 380px) {
  .brand img { width: 84px; }
  .nav a { font-size: .72rem; padding: 6px 2px; overflow-wrap: anywhere; }
  .join-btn { padding: 7px 10px; font-size: .76rem; }
}
@media (max-width: 380px) { .btn { white-space: normal; text-align: center; } }
/* Narrow phones: grid children may shrink, long buttons wrap. */
.stack { grid-template-columns: minmax(0, 1fr); }
.grid > *, .stack > * { min-width: 0; }
input, select, textarea { min-width: 0; max-width: 100%; }
@media (max-width: 600px) { .btn { white-space: normal; text-align: center; } }
@media (max-width: 400px) {
  .fees td:last-child { white-space: normal; }
  .fees td .per { display: block; }
  .join-card, .signin-card { padding: 18px 14px; }
  .opt { padding: 10px; gap: 8px; }
  .opt .opt-text { min-width: 0; }
  .opt-price { font-size: .95rem; }
  .join-card h2 { overflow-wrap: anywhere; }
}

/* Payment methods with their own icons (David 27 Oct). */
.pay-tabs { flex-wrap: wrap; }
.pay-tabs .tab { display: inline-flex; align-items: center; gap: 8px; }
.pay-tabs .tab img { height: 20px; width: auto; }
.pay-tabs .tab img.pp { height: 18px; }
.ico3 { display: inline-flex; gap: 3px; align-items: center; }
.ico3 img { height: 18px !important; }
.brands.icons { gap: 10px; }
.brands.icons img { height: 30px; width: auto; }
.h-ico { height: 22px; vertical-align: -4px; margin-right: 6px; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; background: #000; color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.1; }
.store-badge img { height: 26px; width: auto; }
.store-badge img[src$="apple.svg"] { filter: invert(1); }
.store-badge small { display: block; font-size: .66rem; font-weight: 500; opacity: .85; }
.h-ico { display: inline-block; }
.pay-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pay-tabs .tab { justify-content: center; white-space: nowrap; font-size: .88rem; }
@media (max-width: 600px) { .pay-tabs { grid-template-columns: 1fr 1fr; } .pay-tabs .tab { white-space: normal; font-size: .8rem; } }
.ico3, .pay-tabs .tab img { flex: none; }
.ico3 img { width: auto; flex: none; }
.pay-tabs { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
@media (max-width: 600px) { .pay-tabs { grid-template-columns: 1fr 1fr; } }

/* Plan boxes: one row on Home, membership card at the bottom of each box (David 27 Oct). */
.grid.plans5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .grid.plans5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid.plans5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid.plans5 { grid-template-columns: 1fr; } }
.card.plan { display: flex; flex-direction: column; }
.plan-card-art { margin-top: auto; padding-top: 14px; display: block; }
.plan-card-art img { width: 100%; height: auto; aspect-ratio: 1.586; object-fit: contain; filter: drop-shadow(0 0 1.5px rgba(90,90,90,.6)) drop-shadow(0 4px 7px rgba(80,80,80,.35)) drop-shadow(0 8px 13px rgba(80,80,80,.18)); }
.grid.plans5 .card.plan { padding: 20px 16px; }
.grid.plans5 .plan h3 { font-size: 1.05rem; }
.grid.plans5 .plan .price { font-size: 1.7rem; }
.plan-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 12px; justify-items: stretch; }
.plan-foot .sample-btns { justify-self: start; }
.plan-card-art { margin-top: 0; padding-top: 2px; }
footer a.social { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--border); text-decoration: none; }
footer a.social img { width: 20px; height: 20px; }
footer .wrap > div:not(.links) { white-space: nowrap; }
@media (max-width: 1380px) { footer .wrap > div:not(.links) { display: none; } }
@media (max-width: 820px) {
  footer a.social { order: -1; padding: 5px; font-size: 0; gap: 0; }
  footer a.social img { width: 22px; height: 22px; }
}
/* Keep the footer clear of Netlify's "Powered by Netlify" badge on *.netlify.app (David 28 Oct). */
html.nf-badge footer .wrap { padding-right: 230px; }
@media (max-width: 820px) {
  html.nf-badge body { padding-bottom: 116px; }
  html.nf-badge footer { padding-bottom: 58px; }
  html.nf-badge footer .wrap { padding-right: 16px; }
}
.card.refer { display: flex; gap: 16px; align-items: flex-start; }
/* TV instructions (David 28 Oct): navy dots, number centred in the dot. */
.grid.tv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid.tv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid.tv-steps { grid-template-columns: 1fr; } }
.steps.navy { gap: 12px; }
.steps.navy li { gap: 12px; font-size: .95rem; }
.steps.navy li::before { background: var(--navy); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: .9rem; }

.qr-steps { counter-reset: q; list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.qr-steps li { counter-increment: q; display: flex; gap: 10px; align-items: flex-start; }
.qr-steps li::before { content: counter(q); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.qr-chat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.chat-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 12px; font-weight: 700; text-decoration: none; color: #fff; }
.chat-btn img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.chat-btn.line { background: #06C755; }
.chat-btn.messenger { background: #0866FF; }
.btn[hidden] { display: none; }
.qr-chat { width: 100%; }
.invite-note { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #EAF6EE; border: 1px solid #BFE3CB; }
.invite-note[hidden] { display: none; }
.invite-note > svg, .invite-note > img { flex: none; width: 36px; height: 36px; }
.invite-note small { display: block; color: var(--muted, #5b6475); margin-top: 2px; }
.invite-mail { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font-size: .92rem; line-height: 1.5; }
.invite-mail p { margin: 0 0 10px; }
.invite-link { word-break: break-all; color: #1C7C3A; font-weight: 600; }
.invite-out { display: grid; gap: 10px; }
.check-first { padding: 12px 14px; border-radius: 12px; background: #EAF6EE; border: 1px solid #BFE3CB; }
.pay-tabs .tab[hidden] { display: none; }
.cap-banner { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 18px; border-radius: 16px; border: 1.5px solid #BFE3CB; background: #EAF6EE; cursor: pointer; font: inherit; color: var(--navy); }
.cap-banner > svg, .cap-banner > img { flex: none; width: 44px; height: 44px; }
.cap-banner strong { display: block; font-size: 1.15rem; }
.cap-banner small { display: block; color: var(--muted, #5b6475); margin-top: 2px; }
.cap-qr { display: grid; justify-items: center; gap: 10px; text-align: center; }
.cap-qr img { width: min(280px, 100%); border-radius: 14px; border: 1px solid var(--border); }
form[hidden] { display: none; }
.btn.small { padding: 6px 12px; font-size: .85rem; }
#join[data-paymode="qr"] .renew-note, #join[data-paymode="cash"] .renew-note,
#join[data-paymode="qr"] .check-first, #join[data-paymode="cash"] .check-first { display: none !important; }
.cap-who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.cap-who > span { display: grid; }
.cap-who small { color: var(--muted, #5b6475); }
.cap-who select { flex: 1 1 200px; }
.cap-qr img[hidden], .cap-qr p[hidden] { display: none; }
.cap-msg.err { padding: 10px 12px; border-radius: 10px; background: #FDECEE; color: #9B1C2C; font-size: .92rem; }
#cap-desk[hidden], #cap-signin[hidden] { display: none; }

/* TGI membership card: Clubhouse Editorial series (David 30 Oct), drawn at 856 x 540 design units and scaled with the
   card's width. Five stocks: Junior mint, Silver, Gold, Platinum graphite, Holiday white pearl. Seal, QR and PSC badge kept. */
@font-face { font-family: 'TGI Num'; font-weight: 100 900; src: url(fonts/tgi-font-3.ttf) format('truetype'); unicode-range: U+0030-0039, U+002B-002F, U+003A, U+0025; }
.tgi-card-wrap { container-type: inline-size; width: 100%; max-width: 520px; margin: 0 auto; font-family: var(--sans); line-height: normal; }
.tgi-card-wrap * { box-sizing: border-box; }
.tgi-card-wrap .cs-card span, .tgi-card-wrap .cs-card i, .tgi-card-wrap .cs-card strong { margin: 0; padding: 0; }
/* ---------- the card: a page from the club yearbook, on tier stock ---------- */
.tgi-card-wrap .cs-card{--u:calc(100cqw/856);
  --txt:#14283A;--lab:#384F40;--sub:#2E4A63;--frame:#8E7743;--line:rgba(142,119,67,.07);--fline:rgba(142,119,67,.55);--dot:#486552;--act:#384F40;
  --stock:linear-gradient(135deg,#F2E8C8 0%,#E5D4A2 48%,#D8C287 100%);--glow:rgba(255,250,232,.75);
  --big:linear-gradient(100deg,#7C6533 0%,#B39654 35%,#8A7039 60%,#6E5A2C 100%);--qrring:rgba(142,119,67,.6);
  position:relative;width:100cqw;aspect-ratio:856/540;border-radius:calc(26*var(--u));overflow:hidden;color:var(--txt);
  background:
    repeating-linear-gradient(0deg,var(--line) 0 calc(1*var(--u)),transparent calc(1*var(--u)) calc(7*var(--u))),
    radial-gradient(ellipse 70% 90% at 78% 30%,var(--glow),transparent 70%),
    var(--stock);
  box-shadow:0 calc(8*var(--u)) calc(28*var(--u)) rgba(20,40,58,.20),0 calc(1*var(--u)) calc(3*var(--u)) rgba(20,40,58,.18),inset 0 0 0 calc(1.5*var(--u)) rgba(255,255,255,.55);
  -webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums tabular-nums}
.tgi-card-wrap .cs-card::before{content:"";position:absolute;inset:calc(18*var(--u));border:calc(1.6*var(--u)) solid var(--frame);border-radius:calc(12*var(--u));opacity:.75;pointer-events:none}
.tgi-card-wrap .cs-card::after{content:"";position:absolute;inset:calc(24*var(--u));border:calc(1*var(--u)) solid var(--frame);border-radius:calc(8*var(--u));opacity:.45;pointer-events:none}
.tgi-card-wrap .cs-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.28) 46%,rgba(255,255,255,0) 60%)}

/* tiers */
.tgi-card-wrap .cs-junior{--frame:#4E7A5C;--line:rgba(72,101,82,.07);--fline:rgba(72,101,82,.5);--qrring:rgba(72,101,82,.55);
  --stock:linear-gradient(135deg,#EEF6EC 0%,#D6EAD8 50%,#BDDCC4 100%);--glow:rgba(250,255,248,.8);
  --big:linear-gradient(100deg,#2C5539 0%,#4F8A62 40%,#33634A 70%,#264A33 100%)}
.tgi-card-wrap .cs-silver{--lab:#2E4A63;--frame:#7A828C;--line:rgba(90,98,110,.07);--fline:rgba(110,118,128,.5);--qrring:rgba(110,118,128,.6);
  --stock:linear-gradient(135deg,#F5F6F7 0%,#DDE0E4 45%,#C3C8CF 100%);--glow:rgba(255,255,255,.85);
  --big:linear-gradient(100deg,#4A515B 0%,#8E96A0 38%,#5A626C 62%,#3B4149 100%)}
.tgi-card-wrap .cs-gold{}
.tgi-card-wrap .cs-platinum{--txt:#F1F2F4;--lab:#C6CCD3;--sub:#B4BBC4;--frame:#A8AFB8;--line:rgba(255,255,255,.035);--fline:rgba(196,202,210,.32);--dot:#8FC09F;--act:#A9D3B6;--qrring:rgba(255,255,255,.25);
  --stock:linear-gradient(135deg,#454A52 0%,#2A2E34 45%,#1A1D21 100%);--glow:rgba(170,178,190,.22);
  --big:linear-gradient(100deg,#FFFFFF 0%,#B8BFC8 38%,#EEF0F3 60%,#9AA2AC 100%);
  box-shadow:0 calc(8*var(--u)) calc(28*var(--u)) rgba(10,14,20,.38),0 calc(1*var(--u)) calc(3*var(--u)) rgba(10,14,20,.3),inset 0 0 0 calc(1.5*var(--u)) rgba(255,255,255,.18)}
.tgi-card-wrap .cs-platinum .cs-sheen{background:linear-gradient(112deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.10) 46%,rgba(255,255,255,0) 60%)}
/* Platinum (David 30 Oct): full graphite card; the TGI logo in the same light grey as the card's text */
.tgi-card-wrap .cs-platinum .cs-logo{content:url(img/kit/tgi-mark-grey.webp);filter:drop-shadow(0 calc(1*var(--u)) calc(2*var(--u)) rgba(0,0,0,.45))}
.tgi-card-wrap .cs-platinum .cs-plan .cs-big{font-size:calc(74*var(--u))}
.tgi-card-wrap .cs-holiday{--lab:#2E4A63;--frame:#7E8C9A;--line:rgba(46,74,99,.04);--fline:rgba(46,74,99,.28);--qrring:rgba(46,74,99,.3);
  --stock:radial-gradient(ellipse 60% 70% at 12% 100%,rgba(198,230,255,.35),transparent 70%),radial-gradient(ellipse 50% 60% at 95% 0%,rgba(247,215,236,.35),transparent 70%),linear-gradient(135deg,#FFFFFF 0%,#F8F7F2 50%,#ECEBE4 100%);--glow:rgba(255,255,255,.9);
  --big:linear-gradient(100deg,#14283A 0%,#3F6182 45%,#1E3850 100%)}
.tgi-card-wrap .cs-holiday .cs-plan .cs-big{font-size:calc(76*var(--u))}

/* masthead */
.tgi-card-wrap .cs-logo{position:absolute;left:calc(48*var(--u));top:calc(42*var(--u));height:calc(84*var(--u));width:auto}
.tgi-card-wrap .cs-mast{position:absolute;left:calc(208*var(--u));top:calc(52*var(--u));padding-left:calc(20*var(--u));border-left:calc(1.6*var(--u)) solid var(--frame)}
.tgi-card-wrap .cs-mast .cs-k{display:block;font-size:calc(17*var(--u));letter-spacing:.2em;font-weight:700;color:var(--lab);text-transform:uppercase;white-space:nowrap}
.tgi-card-wrap .cs-mast .cs-t{display:block;font-family:'TGI Num','Playfair Display',Georgia,serif;font-weight:500;font-size:calc(38*var(--u));line-height:1.05;letter-spacing:.02em;margin-top:calc(8*var(--u));white-space:nowrap}
.tgi-card-wrap .cs-platinum .cs-mast .cs-t{font-size:calc(35*var(--u));letter-spacing:.01em}
.tgi-card-wrap .cs-folio{position:absolute;right:calc(50*var(--u));top:calc(49*var(--u));display:flex;align-items:center;gap:calc(12*var(--u));white-space:nowrap}
.tgi-card-wrap .cs-folio .cs-act{display:flex;align-items:center;gap:calc(8*var(--u));font-size:calc(17*var(--u));letter-spacing:.18em;font-weight:700;color:var(--act)}
.tgi-card-wrap .cs-folio .cs-act::before{content:"";width:calc(10*var(--u));height:calc(10*var(--u));border-radius:50%;background:var(--dot);box-shadow:0 0 0 calc(3*var(--u)) color-mix(in srgb,var(--dot) 25%,transparent)}
.tgi-card-wrap .cs-folio .cs-bar{width:calc(1.6*var(--u));height:calc(24*var(--u));background:var(--frame)}
.tgi-card-wrap .cs-folio .cs-no{font-family:'TGI Num','Playfair Display',Georgia,serif;font-weight:600;font-size:calc(20*var(--u));color:var(--frame)}
.tgi-card-wrap .cs-rule{position:absolute;left:calc(48*var(--u));right:calc(48*var(--u));top:calc(146*var(--u));border-top:calc(1.6*var(--u)) solid var(--frame);opacity:.8}

/* numbered field list */
.tgi-card-wrap .cs-fields{position:absolute;left:calc(48*var(--u));top:calc(160*var(--u));width:calc(370*var(--u))}
.tgi-card-wrap .cs-f{display:grid;grid-template-columns:calc(36*var(--u)) 1fr;align-items:baseline;padding:calc(9*var(--u)) 0 calc(10*var(--u));border-bottom:calc(1.2*var(--u)) solid var(--fline)}
.tgi-card-wrap .cs-f:last-child{border-bottom:0}
.tgi-card-wrap .cs-f i{font-style:normal;font-family:'TGI Num','Playfair Display',Georgia,serif;font-size:calc(16*var(--u));color:var(--frame)}
.tgi-card-wrap .cs-f span{display:block;font-size:calc(16.5*var(--u));letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--lab)}
.tgi-card-wrap .cs-f strong{display:block;font-family:'TGI Num','Playfair Display',Georgia,serif;font-weight:600;font-size:calc(31*var(--u));line-height:1.12;letter-spacing:.01em;margin-top:calc(3*var(--u));white-space:nowrap}
.tgi-card-wrap .cs-f.cs-hcp strong{font-size:calc(38*var(--u));line-height:1.02}

/* tier statement */
.tgi-card-wrap .cs-plan{position:absolute;left:calc(452*var(--u));right:calc(50*var(--u));top:calc(170*var(--u))}
.tgi-card-wrap .cs-plan .cs-k{display:block;font-size:calc(16.5*var(--u));letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--lab)}
.tgi-card-wrap .cs-plan .cs-big{display:block;font-family:'TGI Num','Playfair Display',Georgia,serif;font-weight:500;font-size:calc(84*var(--u));line-height:.95;letter-spacing:-.01em;margin-top:calc(4*var(--u));padding-bottom:calc(12*var(--u));margin-bottom:calc(-12*var(--u));white-space:nowrap;
  background:var(--big);-webkit-background-clip:text;background-clip:text;color:transparent}
.tgi-card-wrap .cs-plan .cs-sub{display:block;font-size:calc(17*var(--u));color:var(--sub);font-weight:500;margin-top:calc(8*var(--u));white-space:nowrap}

/* PSC */
.tgi-card-wrap .cs-psc{position:absolute;left:calc(442*var(--u));top:calc(354*var(--u));width:calc(104*var(--u));text-align:center}
.tgi-card-wrap .cs-psc img{width:calc(80*var(--u));height:auto;display:block;margin:0 auto;filter:drop-shadow(0 calc(2*var(--u)) calc(3*var(--u)) rgba(0,0,0,.25))}
.tgi-card-wrap .cs-cap2{font-size:calc(15*var(--u));font-weight:700;color:var(--txt);margin-top:calc(6*var(--u));white-space:nowrap;letter-spacing:.02em}

/* hologram seal: silver foil disc, unchanged */
.tgi-card-wrap .cs-holo{position:absolute;left:calc(548*var(--u));top:calc(338*var(--u));width:calc(140*var(--u));text-align:center}
.tgi-card-wrap .cs-disc{position:relative;width:calc(128*var(--u));height:calc(128*var(--u));margin:0 auto;border-radius:50%;overflow:hidden;clip-path:circle(50%);isolation:isolate;
  background:
    linear-gradient(125deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.85) 46%,rgba(255,255,255,0) 60%),
    conic-gradient(from 210deg,#e3e8f2,#f7c9e8,#c6e6ff,#d6f7c8,#ffeab4,#d9caff,#c3f0f5,#e3e8f2),
    radial-gradient(circle,#ffffff,#c9cfdb);
  background-blend-mode:screen,normal,normal;
  box-shadow:0 calc(2*var(--u)) calc(6*var(--u)) rgba(0,0,0,.28),inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.9),inset 0 0 calc(14*var(--u)) rgba(120,130,160,.35)}
.tgi-card-wrap .cs-disc::before{content:'';position:absolute;inset:-20%;
  background:conic-gradient(from 0deg,rgba(255,150,220,.35),rgba(120,210,255,.35),rgba(170,255,150,.35),rgba(255,230,120,.35),rgba(190,150,255,.35),rgba(255,150,220,.35));
  mix-blend-mode:color;transform:rotate(var(--tilt,0deg))}
.tgi-card-wrap .cs-disc::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.85) 48%,rgba(255,215,245,.45) 52%,transparent 62%);
  background-size:300% 300%;background-position:var(--shine,100%) 50%;mix-blend-mode:screen;}
.tgi-card-wrap .cs-disc img{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.tgi-card-wrap .cs-holo .cs-cap2{font-family:'TGI Num','Playfair Display',Georgia,serif;font-weight:600;font-size:calc(19*var(--u));letter-spacing:.14em;margin:calc(5*var(--u)) calc(-30*var(--u)) 0}

/* QR on a white tile */
.tgi-card-wrap .cs-qr{position:absolute;left:calc(696*var(--u));top:calc(350*var(--u));width:calc(124*var(--u));background:#fff;border-radius:calc(4*var(--u));padding:calc(9*var(--u)) calc(9*var(--u)) calc(5*var(--u));text-align:center;
  box-shadow:0 0 0 calc(1.2*var(--u)) var(--qrring),0 calc(1*var(--u)) calc(4*var(--u)) rgba(0,0,0,.16)}
.tgi-card-wrap .cs-qr img{width:100%;display:block}
.tgi-card-wrap .cs-qr .cs-cap2{font-size:calc(14*var(--u));margin-top:calc(4*var(--u));color:#2E4A63}

@keyframes tgiFoilSpin { to { transform: rotate(360deg); } }
@keyframes tgiFoilSweep { 0%, 100% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } }
.tgi-card-wrap .cs-folio .cs-act.wait { color: #B26A00; }
.tgi-card-wrap .cs-folio .cs-act.wait::before { background: #D08A1C; }
.tgi-card-wrap .cs-disc::before { animation: tgiFoilSpin 9s linear infinite; z-index: 1; pointer-events: none; opacity: .9; }
.tgi-card-wrap .cs-disc::after { animation: tgiFoilSweep 4.5s ease-in-out infinite; z-index: 2; }
.tgi-card-wrap .cs-sheen { animation: tgiSheen 6s ease-in-out infinite; background-size: 250% 100%; }
@keyframes tgiSheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tgi-card-wrap .cs-disc::before, .tgi-card-wrap .cs-disc::after, .tgi-card-wrap .cs-sheen { animation: none; } }
.card-status { color: var(--green); font-weight: 700; }
.qr-steps li[hidden] { display: none; }
.tv-shot { width: 100%; max-width: 960px; height: auto; margin: 8px auto 0; display: block; border-radius: 12px; }
.field .soc-search { margin-bottom: 8px; }
.nav a.nav-captain { background: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(28, 124, 58, .35); }
.nav a.nav-captain:hover { background: #166a31; }

/* ===== Professional theme (Bart's style package, 30 Oct 2026) =====
   Warm paper, navy ink, editorial green, muted gold rules, Playfair Display headings, DM Sans text, 2px corners.
   Loaded last on purpose: it re-skins everything above without changing any page's content or behaviour. */
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(fonts/tgi-font-0.ttf) format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url(fonts/tgi-font-1.ttf) format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url(fonts/tgi-font-2.ttf) format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url(fonts/tgi-font-3.ttf) format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-weight: 400; font-display: swap; src: url(fonts/tgi-font-4.ttf) format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-weight: 500; font-display: swap; src: url(fonts/tgi-font-5.ttf) format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-weight: 600; font-display: swap; src: url(fonts/tgi-font-6.ttf) format('truetype'); }
:root {
  --navy: #14283A; --navy-light: #2E4A63; --red: #AF382F; --green: #486552; --green-dark: #384F40;
  --gold: #B5A277; --surface: #F7F6EF; --card: #FFFFFF; --text: #14283A; --muted: #667167;
  --border: #D9DACF; --plan-on: #EEEFE6; --radius: 2px;
  --serif: 'Playfair Display', Georgia, serif; --sans: 'DM Sans', Arial, sans-serif;
}
body { background: var(--surface); color: var(--text); font-family: var(--sans); line-height: 1.7; }
button, input, select, textarea { font-family: var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3, .label { font-family: var(--sans); font-weight: 700; }
a { color: var(--green); }
.lead { color: var(--muted); line-height: 1.8; }
:focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 4px !important; }

/* Header: paper bar with a fine rule, text links, Captain's Corner as the one solid button. */
.top { background: var(--surface); box-shadow: none; border-bottom: 1px solid var(--border); }
.top .wrap { min-height: 100px; }
.brand img { width: 150px; }
.nav { background: none; border: 0; border-radius: 0; padding: 0; gap: 2px; }
.nav a { font-weight: 500; font-size: .95rem; border-radius: 0; padding: 8px 12px; border-bottom: 2px solid transparent; }
.nav a:hover { background: none; border-bottom-color: var(--border); }
.nav a[aria-current="page"] { background: none; color: var(--navy); box-shadow: none; border-bottom-color: var(--green); }
.nav a.nav-captain { background: var(--green); color: #fff; border-radius: 2px; border-bottom-color: var(--green); margin-left: 8px; font-weight: 600; }
.nav a.nav-captain:hover { background: var(--green-dark); border-bottom-color: var(--green-dark); }
.signin { font-weight: 500; }

/* Buttons and controls: square-cornered, navy primary, green and paper secondary. */
.btn { border-radius: 2px; font-weight: 600; border-color: var(--navy); background: var(--navy); }
.btn:hover { background: #0D1C29; border-color: #0D1C29; }
.btn.secondary { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.btn.secondary:hover { background: #ECEDE3; }
.btn.green, .btn.join-btn { background: var(--green); border-color: var(--green); }
.btn.green:hover, .btn.join-btn:hover { background: var(--green-dark); border-color: var(--green-dark); }
input, select, textarea { border-radius: 2px !important; border-color: #C7CFC0 !important; }
.pill { border-radius: 2px; background: var(--red); font-weight: 600; letter-spacing: .04em; }
.sample, .sample-btns .sample, .sample-btns .sample:nth-child(2), .sample-btns .sample:last-child,
.sample-btns .sample:nth-child(2):last-child { border-radius: 2px; }

/* Surfaces: paper sections, white cards with 1px rules, gold accents. */
.hero, .psc-hero { background: var(--card); border: 1px solid var(--border); border-radius: 2px; box-shadow: none; }
.hero::after { content: ""; position: absolute; left: 48px; right: 48px; bottom: 0; height: 3px; background: var(--gold); }
.card, .psc-banner, .psc-panel, .plan { border-radius: 2px; border: 1px solid var(--border); box-shadow: none; }
.plan.first { border: 1px solid var(--navy); background: var(--card); box-shadow: inset 0 3px 0 var(--gold); }
.band { background: #EFEEE5; border-color: var(--border); }
.notice { background: #E9ECDF; border-color: #D3D9C8; color: var(--green-dark); border-radius: 2px; }
.test, .demo-note { border-radius: 2px; }
.price { font-family: var(--serif); font-weight: 600; color: var(--red); }
.icon { border-radius: 2px; }
.icon.green { background: var(--green); }
.steps li::before, .join-steps li::before { border-radius: 2px; font-weight: 600; }
.ticks li::before { color: var(--green); }
.opt { border-radius: 2px; }
.opt:has(input:checked) { background: #F1F2EA; }
footer { background: var(--surface); box-shadow: none; }
.lang-menu, .viewer { border-radius: 2px; }
.viewer::backdrop { background: rgba(20, 40, 58, .6); }
.eyebrow { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--green); font-weight: 600; }
.nav a.nav-captain { box-shadow: none; padding: 9px 16px; }
/* Professional theme, header sizes per screen (website check 30 Oct): the theme's larger links fit only on wide screens. */
@media (max-width: 1400px) and (min-width: 821px) { .nav a { padding: 8px 9px; font-size: .9rem; } .brand img { width: 130px; } }
@media (max-width: 1180px) and (min-width: 821px) {
  .top .wrap { flex-wrap: wrap; padding-bottom: 10px; min-height: 0; }
  .nav { order: 3; margin-left: 0; width: 100%; justify-content: space-between; }
  .langs { margin-left: auto; }
  .brand img { width: 120px; }
  .nav a.nav-captain { margin-left: 0; }
}
@media (max-width: 820px) {
  .top .wrap { min-height: 0; }
  .brand img { width: 96px; }
  .nav a { font-size: .8rem; padding: 7px 4px; }
  .nav a.nav-captain { margin-left: 0; padding: 7px 4px; }
  footer .links { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
}
@media (max-width: 380px) {
  .brand img { width: 84px; }
  .nav a, .nav a.nav-captain { font-size: .72rem; padding: 6px 2px; overflow-wrap: normal; word-break: normal; hyphens: auto; }
}
.acts a.signin { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
/* Phones: the header scrolls away with the page so it never takes a third of the screen (website check 30 Oct). */
@media (max-width: 600px) { .top { position: static; } }

/* ===== Page layouts from Bart's page images (30 Oct 2026) =====
   Split hero with the painted fairway, editorial sections with fine rules, gold-ruled eyebrows. */
.hero {
  display: grid; grid-template-columns: 48fr 52fr; gap: 0; padding: 0; margin-top: 0; min-height: 600px;
  background: none; border: 0; box-shadow: none; overflow: visible;
}
.hero::after { display: none; }
.hero > .hero-copy { position: static; } .hero > .hero-art { position: relative; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; padding: 64px 7% 64px 0; }
.hero-copy h1 { font-size: clamp(2.8rem, 5vw, 5rem); line-height: 1.08; letter-spacing: -0.04em; margin: 0; }
.hero-copy h1 em { font-style: italic; font-weight: 400; color: var(--green); }
.hero-copy .lead { font-size: 1.02rem; line-height: 1.9; color: var(--muted); max-width: 30rem; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; }
.eyebrow .rule { width: 45px; height: 1px; background: var(--gold); flex: none; }
.hero-art {
  position: relative; overflow: hidden; margin: 24px 0; min-height: 520px;
  background: linear-gradient(#A9C1BB 0%, #DCE2CD 40%, #C3C6A5 43%, #76936E 44%, #627E57 100%);
}
.hero-art span { position: absolute; display: block; }
.hero-art .sun { top: 14%; left: 45%; width: 96px; height: 96px; border-radius: 50%; background: #F1EDCF; box-shadow: 0 0 90px #E5E3BD; }
.hero-art .mountain { width: 100%; height: 210px; top: 21%; background: #829B87; opacity: .75;
  clip-path: polygon(0 80%, 17% 24%, 25% 50%, 47% 0, 65% 61%, 75% 38%, 100% 81%, 100% 100%, 0 100%); }
.hero-art .hill { width: 130%; height: 340px; left: -10%; top: 48%; border-radius: 50%; background: #64835E; transform: rotate(-9deg); }
.hero-art .hill.two { background: #8DA17A; top: 62%; left: 10%; transform: rotate(15deg); }
.hero-art .fairway { bottom: -8%; left: 5%; width: 65%; height: 69%; border-radius: 75% 20% 55% 20%; transform: rotate(28deg);
  background: linear-gradient(90deg, #9BB389, #B5C69C); box-shadow: 0 0 0 14px #718F62; }
.hero-art .green { width: 46%; height: 18%; bottom: 23%; right: 4%; border-radius: 50%; background: #A4BB88; transform: rotate(-8deg); }
.hero-art .pin { bottom: 33%; right: 25%; width: 2px; height: 110px; background: #E8E4CE; }
.hero-art .pin::after { content: ""; position: absolute; top: 0; left: 2px; border-top: 10px solid var(--red); border-bottom: 10px solid transparent; border-left: 34px solid var(--red); }
.hero .stores { margin-top: 4px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 40px 0 24px; }
  .hero-art { min-height: 320px; margin: 0 0 24px; }
}

/* Section headings: small green eyebrow over a serif heading, fine rules between sections. */
section { border-top: 1px solid var(--border); padding: 72px 0; }
.label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green); font-weight: 700; margin-bottom: 22px; }
h2 { font-weight: 400; }
section h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.band { background: #E9ECDF; }

/* Feature boxes read as editorial columns: a fine rule above, quiet icon, serif title. */
.grid > .feature, .grid.two > .feature { border-top: 1px solid #B4BEA9; padding-top: 22px; }
.feature .icon { background: none !important; color: var(--green); width: 34px; height: 34px; border: 1px solid #B6BFA9; border-radius: 50%; }
.feature .icon svg { width: 18px; height: 18px; }
.feature h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; margin-bottom: 8px; }
.feature p { font-size: .95rem; line-height: 1.85; color: var(--muted); }

/* Plan boxes as in the Membership image: white panel, serif name, large navy price, navy button with an arrow. */
.plan { padding: 26px 26px 28px; background: var(--card); }
.plan .head img, .plan .head .icon { display: none; }
.plan .head::before { content: "TGI"; font-size: .68rem; letter-spacing: .16em; color: var(--green); font-weight: 600; }
.plan .head { display: grid; gap: 8px; }
.plan h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.price { font-family: var(--sans); font-weight: 700; font-size: 2.1rem; color: var(--navy); letter-spacing: -.01em; }
.plan.first { background: #E4EADB; border-color: #8C9F7E; box-shadow: none; }
.btn.join::after, .hero .btn:not(.secondary)::after, .btns .btn:not(.secondary)::after { content: "↗"; font-size: .9em; margin-left: 4px; }
.ticks li::before { content: "·"; font-weight: 700; color: var(--green); }

/* Page heads on the form pages: eyebrow-style spacing and a large serif title. */
.page-head { padding: 24px 0 8px; display: grid; gap: 10px; }
.page-head h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); letter-spacing: -.04em; }
.notice { border: 0; padding: 22px 26px; }
/* Account overview tiles, as in the Golfer image. */
.stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { background: var(--card); border: 1px solid var(--border); padding: 22px 22px 20px; display: grid; gap: 6px; min-width: 0; }
.stat small { color: var(--muted); font-size: .82rem; }
.stat strong { font-size: 1.9rem; font-weight: 700; color: var(--navy); line-height: 1.15; overflow-wrap: anywhere; }
.stat span { color: var(--green); font-size: .78rem; }
@media (max-width: 900px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sample and notice bands in the images' pale stone, not yellow or mint. */
.demo-note, .test { background: #E9ECDF; border: 0; color: var(--text); }
.cap-banner { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 2px !important; }
.stat strong { font-size: clamp(1.25rem, 1.9vw, 1.9rem); overflow-wrap: normal; white-space: nowrap; }
/* Home: the picture area holds the identity line and its description (Bart 30 Oct), in place of the painted fairway. */
.hero-panel {
  margin: 24px 0; min-height: 520px; padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; gap: 26px;
  background: var(--navy) linear-gradient(160deg, rgba(72, 101, 82, .35), rgba(20, 40, 58, 0) 60%); color: #FAF9EF; position: relative; overflow: hidden;
}
.hero-panel .eyebrow { color: #B3C3A4; }
.hero-panel .panel-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: 1.08; letter-spacing: -.035em; margin: 0; color: #FAF9EF; }
.hero-panel .panel-title em { font-style: italic; font-weight: 400; color: #B3C3A4; }
.hero-panel .panel-text { color: #C2CDC5; line-height: 1.9; max-width: 30rem; margin: 0; }
.hero-panel img { position: absolute; right: 36px; bottom: 32px; width: 92px; opacity: .9; background: #fff; padding: 8px; }
@media (max-width: 900px) { .hero-panel { min-height: 0; padding: 40px 28px; margin: 0 0 24px; } }

/* Home: the second band under the hero (Bart's 02 Published TGI Scope image, 30 Oct). */
.scope-band { background: #E9EBE0; border-top: 1px solid var(--line, #D9DACF); border-bottom: 1px solid var(--line, #D9DACF); padding: 30px 0; margin: 0; }
.scope-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 28px 56px; align-items: center; }
.scope-label { margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #667167); }
.scope-value { margin: 0; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; color: var(--navy, #14283A); white-space: nowrap; }
.scope-note { margin: 0; max-width: 460px; font-size: 13px; line-height: 1.6; color: var(--muted, #667167); }
@media (max-width: 820px) { .scope-row { grid-template-columns: 1fr 1fr; } .scope-note { grid-column: 1 / -1; max-width: none; } }
@media (max-width: 420px) { .scope-row { grid-template-columns: 1fr; } .scope-value { white-space: normal; } }

/* Home: numbered chapters (Bart's 03 From the first tee image, 30 Oct). */
.chapter { padding: 64px 0 56px; border-bottom: 1px solid var(--line, #D9DACF); }
.chapter-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 24px 64px; align-items: end; margin-bottom: 44px; }
.chapter-kicker { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green, #486552); }
.chapter-head h2 { margin: 0; font-family: var(--serif); font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; color: var(--navy, #14283A); }
.chapter-intro { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted, #667167); }
.chapter-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.chapter-col { border-top: 1px solid #B9BDB0; padding-top: 26px; }
.chapter-no { margin: 0 0 10px; font-family: var(--serif); font-size: 12px; color: var(--gold, #B5A277); }
.chapter-col h3 { margin: 0 0 14px; font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--navy, #14283A); }
.chapter-col p:not(.chapter-no) { margin: 0 0 20px; font-size: 13px; line-height: 1.75; color: var(--muted, #667167); }
.chapter-link { display: inline-block; font-size: 12px; color: var(--navy, #14283A); text-decoration: none; border-bottom: 1px solid var(--navy, #14283A); padding-bottom: 6px; }
.chapter-link::after { content: " ↗"; }
.chapter-link:hover { color: var(--green, #486552); border-color: var(--green, #486552); }
@media (max-width: 820px) { .chapter-head, .chapter-cols { grid-template-columns: 1fr; } .chapter { padding: 44px 0 40px; } }
.chapter-fine { margin: 40px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted, #667167); }

/* Home: split chapter with the game day journey panel (Bart's 05 Good golf image, 30 Oct). */
.chapter-split { border-bottom: 1px solid var(--line, #D9DACF); }
.split-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 484px); gap: 40px 90px; align-items: start; }
.chapter-split h2 { margin: 0 0 26px; font-family: var(--serif); font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; color: var(--navy, #14283A); }
.split-text { margin: 0 0 18px; font-size: 14px; line-height: 1.9; color: var(--muted, #667167); max-width: 480px; }
.journey { background: #E9EBE0; border: 1px solid var(--line, #D9DACF); padding: 30px 34px 32px; margin-top: 14px; }
.journey-top { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy, #14283A); padding-bottom: 20px; border-bottom: 1px solid #C9CCBE; }
.journey-title { margin: 22px 0 18px; font-family: var(--serif); font-size: 23px; color: var(--navy, #14283A); }
.journey-list { list-style: none; margin: 0; padding: 0; }
.journey-list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 12.5px; color: var(--navy, #14283A); }
.journey-list b { font-weight: 400; }
@media (max-width: 900px) { .split-row { grid-template-columns: 1fr; } .journey { padding: 24px 22px; } }

/* Home: dark chapter in TGI green (Bart 30 Oct: "the darker green we already have", not navy). */
.chapter-dark { background: var(--green, #486552); border-bottom: 0; }
.chapter-dark .chapter-kicker { color: #C9D3C6; }
.chapter-dark h2, .chapter-dark h3 { color: #fff; }
.chapter-dark .chapter-intro, .chapter-dark .chapter-col p { color: #E3E8DF; }
.chapter-dark .chapter-col { border-top-color: rgba(255,255,255,.35); }
.chapter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 44px; }

/* Home: plan tiles (Bart's 08 Choose how you play image, 30 Oct). */
.plan-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line, #D9DACF); padding: 26px 20px 24px; text-decoration: none; color: inherit; }
.plan-tile.on { background: #E3E8DA; }
.plan-tile:hover { border-color: var(--green, #486552); }
.tile-name { font-family: var(--serif); font-size: 20px; color: var(--navy, #14283A); }
.tile-price { margin-top: 20px; font-family: var(--serif); font-size: 30px; color: var(--navy, #14283A); }
.tile-per { margin-top: 4px; font-size: 11px; color: var(--muted, #667167); }
.tile-line { margin: 26px 0 24px; font-size: 12.5px; line-height: 1.65; color: var(--muted, #667167); flex: 1; }
.plan-tile .chapter-link { align-self: flex-start; }
@media (max-width: 1100px) { .plan-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plan-tiles { grid-template-columns: 1fr; } }
.tile-prices { display: flex; gap: 28px; }
.tile-prices > span { display: flex; flex-direction: column; }
.plan-tile { cursor: pointer; transition: background-color .15s; }
.plan-tile:focus-visible { outline: 2px solid var(--green, #486552); outline-offset: 2px; }

/* Home: Captain Platinum and Junior golfers (Bart's 10 image, 30 Oct). */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 90px; }
.duo-title { margin: 0 0 16px; font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--navy, #14283A); }
.duo-text { margin: 0; font-size: 13px; line-height: 1.75; color: var(--muted, #667167); max-width: 540px; }
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } }

/* Top menu and footer links in the style of Bart's 01 home image (30 Oct): small regular text, outlined Captain's Office button. */
@media (min-width: 821px) {
  .nav a { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--navy, #14283A); padding: 8px 14px; }
  .nav a.nav-captain { background: transparent; color: var(--navy, #14283A); border: 1px solid #9DA59B; border-radius: 0; padding: 11px 18px; margin-left: 16px; font-weight: 400; }
  .nav a.nav-captain::after { content: " ↗"; }
  .nav a.nav-captain:hover { background: #fff; border-color: var(--navy, #14283A); }
  .acts a.signin { font-size: 13px; font-weight: 400; }
  .acts .btn.join-btn { font-size: 13px; font-weight: 400; padding: 11px 18px; border-radius: 0; }
}
footer .links a { font-size: 13px; font-weight: 400; text-decoration: none; color: var(--navy, #14283A); }
footer .links a:hover { text-decoration: underline; text-underline-offset: 3px; }
footer .links a.social { font-size: 13px; font-weight: 400; }
/* Section numbers, only with ?numbers in the address. */
.has-no { position: relative; }
.sec-no { position: absolute; top: 8px; left: 8px; z-index: 20; min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; background: #AF382F; color: #fff; font: 700 15px/1 var(--sans, sans-serif); border-radius: 15px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
/* Home closing band (Bart 30 Oct, image 12). */
.closing-band { background: #E8EBDF; border-top: 1px solid #D9DDD0; border-bottom: 1px solid #D9DDD0; padding: 56px 0 64px; }
.closing-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.closing-band h2 { margin: 6px 0 10px; font-size: clamp(28px, 3.4vw, 38px); }
.closing-band p:not(.chapter-kicker) { margin: 0; font-size: 14px; color: #5E6A63; }
.closing-btn { background: #14283A; color: #fff; padding: 16px 24px; min-width: 200px; display: inline-flex; justify-content: space-between; gap: 24px; font-size: 13px; }
.closing-btn::after { content: "↗"; }
@media (max-width: 640px) { .closing-band .wrap { display: block; } .closing-btn { margin-top: 22px; width: 100%; } }
/* Home 02 in the mid-green of the chosen plan tile (Bart 30 Oct). */
.chapter-mid { background: #E3E8DA; }
/* Top bar brand (Bart 30 Oct): smaller logo with "Thailand Golf Index" on two lines beside it, as in the footer. */
.top .brand { gap: 12px; }
.top .brand img { width: 112px; }
.top .brand span { display: block; font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: 0; line-height: 1.15; color: var(--navy, #14283A); white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 821px) { .top .brand img { width: 96px; } .top .brand span { font-size: 15px; } }
@media (max-width: 820px) { .top .brand img { width: 84px; } .top .brand span { font-size: 15px; } }
@media (max-width: 380px) { .top .brand span { display: none; } }
/* Brand lettering as in Bart's full logo (30 Oct): heavy navy capitals after a thin divider line. */
.top .brand span { font-family: 'Inter', var(--sans); font-weight: 700; text-transform: uppercase; font-size: 17px; line-height: 1.02; letter-spacing: .01em; color: #0F2257; border-left: 2px solid #0F2257; padding: 3px 0 3px 12px; }
@media (max-width: 1180px) { .top .brand span { font-size: 15px; padding-left: 10px; } }
/* Features page boxes (Bart 30 Oct, images 13-18). */
.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fx { background: #FBFAF5; border: 1px solid #DCDDD3; border-radius: 2px; padding: 30px 24px 26px; }
.fx-no { margin: 0 0 14px; font-size: 10px; letter-spacing: .1em; color: #6E766F; }
.fx h3 { margin: 0 0 12px; font-family: var(--sans); font-size: 19px; font-weight: 700; color: var(--navy, #14283A); }
.fx > p:not(.fx-no) { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: #2A3A45; }
.fx-more summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--green, #486552); }
.fx-more summary::-webkit-details-marker { display: none; }
.fx-more summary::before { content: "▶"; display: inline-block; font-size: 9px; margin-right: 6px; transition: transform .15s; }
.fx-more[open] summary::before { transform: rotate(90deg); }
.fx-more p, .fx-more li { font-size: 13px; line-height: 1.65; color: #555F58; }
.fx-more p { margin: 12px 0 0; }
.fx-more .label { margin-top: 14px; }
@media (max-width: 980px) { .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fx-grid { grid-template-columns: 1fr; } }
/* Membership "Choose how you play" cards (Bart 30 Oct, images 22-24). */
.mc-sec { padding: 56px 0 64px; border-bottom: 1px solid var(--line, #D9DACF); }
.mc-title { margin: 0 0 36px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 50px); color: var(--navy, #14283A); }
.mc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mc { background: #FBFAF5; border: 1px solid #DCDDD3; border-radius: 2px; padding: 30px 24px 40px; }
.mc-kicker { margin: 0 0 40px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6E766F; }
.mc h3 { margin: 0 0 34px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.08; color: var(--navy, #14283A); }
.mc-price { margin: 0 0 12px; font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--navy, #14283A); }
.mc-per { margin: 0 0 18px; font-size: 11px; color: #6E766F; }
.mc ul { margin: 0 0 22px; padding-left: 20px; }
.mc li { font-size: 13.5px; line-height: 1.75; color: #2A3A45; }
.mc-btn { display: inline-block; background: var(--navy, #14283A); color: #fff; font-size: 13px; padding: 10px 14px; text-decoration: none; border-radius: 2px; }
.mc-btn::after { content: " ↗"; }
.mc-btn:hover { background: var(--green, #486552); }
@media (max-width: 980px) { .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .mc-grid { grid-template-columns: 1fr; } .mc h3 { margin-bottom: 20px; } .mc-kicker { margin-bottom: 22px; } }
.mc-note { margin-top: 16px; background: #E8EBDF; padding: 22px 22px; border-radius: 2px; }
.mc-note p { margin: 0; font-size: 13px; line-height: 1.75; color: #4E5B52; }
.mc-note p + p { margin-top: 4px; }
.mc-note strong { color: var(--green, #486552); }
/* Painted hero pictures from Bart (30 Oct). */
.hero-art.hero-img { background: none; }
.hero-art.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Courses page (Bart 30 Oct): the app's course cards, in the website's mid-green. */
.cc-search { display: flex; flex-direction: column; gap: 6px; max-width: 420px; font-size: 13px; color: var(--muted); }
.cc-search input { padding: 12px 14px; border: 1px solid #C9D2BE; border-radius: 2px; background: #fff; font-size: 15px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chip { border: 1px solid #C9D2BE; background: transparent; color: var(--navy, #14283A); padding: 7px 12px; font-size: 13px; border-radius: 2px; cursor: pointer; }
.cc-chip.on { background: #E3E8DA; border-color: var(--green, #486552); color: var(--green, #486552); font-weight: 700; }
.cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cc { display: flex; align-items: center; gap: 16px; background: #E3E8DA; border: 1px solid #C9D2BE; border-radius: 2px; padding: 16px; }
.cc[hidden] { display: none; }
.cc-logo { flex: none; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; }
.cc-logo img { max-width: 68px; max-height: 68px; object-fit: contain; }
.cc-initials { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: #F3F5EE; color: var(--green, #486552); font-weight: 900; font-size: 24px; letter-spacing: .03em; }
.cc h3 { margin: 0 0 4px; font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--navy, #14283A); }
.cc-area { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green, #486552); }
.cc-detail { margin: 2px 0 0; font-size: 12.5px; color: #5E6A63; }
@media (max-width: 980px) { .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cc-grid { grid-template-columns: 1fr; } }
/* Seven tabs since Courses (30 Oct): tighter top bar on laptop widths. */
@media (max-width: 1440px) and (min-width: 1181px) { .nav a { padding: 8px 9px; } .top .wrap { gap: 10px; } .top .brand img { width: 96px; } .top .brand span { font-size: 15px; } .nav a.nav-captain { padding: 10px 12px; } }
@media (max-width: 1300px) and (min-width: 1181px) { .nav a { padding: 8px 7px; font-size: 12.5px; } .top .brand span { display: none; } }
.baht { font-family: var(--sans); font-weight: 400; font-size: .62em; margin-right: 3px; vertical-align: .18em; }
/* Membership cards four across (Bart 30 Oct), Holiday Pass with both prices. */
.mc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mc { padding: 24px 20px 30px; }
.mc-kicker { margin-bottom: 26px; }
.mc h3 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 22px; }
.mc-price { font-size: 26px; }
.mc-price-sm { margin-bottom: 4px; }
.mc-len { font-family: var(--sans); font-weight: 400; font-size: 13px; color: #5E6A63; }
.mc-price-sm + .mc-per { margin-top: 8px; }
.mc li { font-size: 13px; }
@media (max-width: 1180px) { .mc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mc-grid { grid-template-columns: 1fr; } }
/* Promoter Member across the full row under the other cards (Bart 30 Oct). */
.mc-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px 32px; align-items: center; background: #E3E8DA; border-color: #C9D2BE; }
.mc-wide ul { margin: 0; }
.mc-wide .mc-per { margin-bottom: 0; }
@media (max-width: 860px) { .mc-wide { grid-template-columns: 1fr; align-items: start; } .mc-wide ul { margin-bottom: 8px; } .mc-wide .mc-per { margin-bottom: 18px; } }
/* ===== Fairway Modern (David 30 Oct, the app's chosen layout, website too) =====
   Mid-green tiles with 6px corners, bold DM Sans labels, one navy primary button, and every digit in bold DM Sans
   ('TGI Num' covers digits only, so Playfair headings keep their letters). Loaded last: it re-skins, content unchanged. */
:root { --radius: 6px; --tile: #E3E8DA; --tile-line: #C9D2BE; --serif: 'TGI Num', 'Playfair Display', Georgia, serif; }
body { font-variant-numeric: lining-nums; }
.btn, .mc-btn, .nav a.nav-captain, .closing-btn, .chat-btn, .store-badge { border-radius: 6px; }
.btn { font-weight: 700; min-height: 52px; }
.btn.secondary { background: #fff; border: 2px solid var(--navy); color: var(--navy); }
.btn.secondary:hover { background: var(--tile); }
.mc-btn { font-weight: 700; padding: 13px 18px; }
.card, .plan, .psc-banner, .psc-panel, .hero, .psc-hero, .notice, .test, .demo-note, .opt, .summary, .tabs,
.lang-menu, .viewer, .icon, .mc, .fx, .cc, .mc-note, .closing-band .wrap > *, .cc-initials { border-radius: 6px; }
input, select, textarea { border-radius: 6px !important; }
.pill, .sample, .cc-chip { border-radius: 6px; }
/* Labels: bold DM Sans, green, spaced capitals. */
.eyebrow, .chapter-kicker, .mc-kicker, .fx-no, .cc-area { font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.mc-kicker, .fx-no { font-size: 11px; }
/* Big green tiles: features, membership cards and courses. */
.fx, .mc { background: var(--tile); border: 1px solid var(--tile-line); }
.mc-note { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--gold); }
/* Promoter Member keeps its full-width row, now the one navy tile, its price in gold. */
.mc-wide { background: var(--navy); border-color: var(--navy); color: #F7F6EF; }
.mc-wide h3, .mc-wide .mc-price { color: #F7F6EF; }
.mc-wide .mc-price { color: var(--gold); }
.mc-wide .mc-kicker { color: #C9D2BE; }
.mc-wide .mc-per, .mc-wide li { color: #D9D2BC; }
.mc-wide .mc-btn { background: #F7F6EF; color: var(--navy); }
.mc-wide .mc-btn:hover { background: var(--tile); }
/* Courses: chips as tiles, the chosen one navy; search box with a firm navy edge. */
.cc-chip { background: var(--tile); border-color: var(--tile); color: var(--green-dark); font-weight: 700; min-height: 44px; padding: 0 14px; }
.cc-chip.on { background: var(--navy); border-color: var(--navy); color: #F7F6EF; }
.cc-search input { border: 2px solid var(--navy) !important; min-height: 52px; }
.cc-initials { border-bottom: 3px solid var(--gold); font-family: var(--serif); font-weight: 600; }
/* Numbers read at a glance: prices and figures stay bold DM Sans wherever they sit. */
.mc-price, .price, .scope-value, .chapter-no { font-variant-numeric: lining-nums tabular-nums; }
/* On a mid-green band the tiles turn white, so they still stand apart. */
.chapter-mid .fx, .chapter-mid .mc, .chapter-mid .cc { background: #fff; border-color: var(--border); }
/* Live cards in the plan tiles and the card row (so the seal shimmers): raised like the old pictures. */
.tier .tgi-card-wrap, .plan-card-art .tgi-card-wrap { max-width: none; transition: transform .2s; }
.tier:hover .tgi-card-wrap, .plan-card-art:hover .tgi-card-wrap { transform: translateY(-3px); }
/* Selling line under each price (David 30 Oct): bold DM Sans, smaller than the price, green. */
.under { display: block; font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--green); letter-spacing: .01em; margin-top: 4px; }
.mc-under { margin: -4px 0 10px; }
.mc-price-sm + .mc-under { margin: -2px 0 8px; }
.mc-wide .under { color: var(--gold); }
.opt-price .under { font-size: 12px; text-align: right; }
.under-hero { font-size: 18px; margin: -6px 0 10px; }
/* New LINE logo (David 30 Oct): shown in full colour on a white tile inside the green LINE button. */
.chat-btn.line img { filter: none; background: #fff; border-radius: 6px; padding: 1px; }
/* Premium Platinum family step on Join (David 30 Oct). */
.family { background: var(--tile); border: 1px solid var(--tile-line); border-radius: 6px; padding: 18px 18px 20px; }
.family h3 { margin: 0 0 4px; }
.fam-row { display: grid; grid-template-columns: 1fr 1fr 150px 150px auto; gap: 10px 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--tile-line); margin-top: 12px; }
.fam-row[hidden], .family [data-fam-add][hidden] { display: none; }
.fam-no { grid-column: 1 / -1; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.fam-row .field { margin: 0; }
.fam-remove { background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0; margin-top: 44px; }
.family [data-fam-add] { margin-top: 10px; }
@media (max-width: 700px) { .fam-row { grid-template-columns: 1fr 1fr; } .fam-remove { justify-self: start; margin-top: 0; } }
/* LINE group link band (David 31 Oct): steps on the left, a sample LINE group message on the right. */
.line-band { padding: 64px 0; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.line-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.line-steps { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: ls; display: grid; gap: 12px; }
.line-steps li { counter-increment: ls; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; background: var(--tile); border-radius: 6px; padding: 14px 16px; }
.line-steps li::before { content: counter(ls, decimal-leading-zero); grid-row: span 2; font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--green); }
.line-steps strong { font-size: 16px; color: var(--navy); }
.line-steps span { font-size: 14px; line-height: 1.55; color: #3E4B45; }
.btn.line-btn { background: #06C755; border-color: #06C755; display: inline-flex; align-items: center; gap: 10px; }
.btn.line-btn:hover { background: #05A948; border-color: #05A948; }
.btn.line-btn img { width: 24px; height: 24px; background: #fff; border-radius: 5px; padding: 1px; }
.line-chat { background: #8CABD9; background: linear-gradient(180deg, #9DB7DD, #7F9FCF); border-radius: 6px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 10px 28px rgba(20, 40, 58, .16); }
.line-chat-head { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; color: #fff; font-weight: 700; font-size: 15px; }
.line-chat-head img { width: 28px; height: 28px; background: #fff; border-radius: 6px; padding: 2px; }
.line-chat-head small { margin-left: auto; font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.line-msg { background: #fff; border-radius: 4px 16px 16px 16px; padding: 12px 16px; max-width: 92%; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.line-msg p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #1E2A33; }
.line-msg .line-from { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #06A04A; margin-bottom: 2px; }
.line-msg .line-link { margin-top: 6px; color: #06A04A; font-weight: 700; }
@media (max-width: 900px) { .line-row { grid-template-columns: 1fr; gap: 28px; } .line-band { padding: 44px 0; } }
/* Feature boxes in the Fairway Modern look (David 31 Oct): mid-green tiles, 6px corners, icons on a white 6px
   square with no shadow, bold DM Sans titles. */
.card.feature { background: var(--tile); border: 1px solid var(--tile-line); border-radius: 6px; box-shadow: none; padding: 20px; }
.card.feature h3 { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.card.feature p { color: #3E4B45; }
.card.feature { flex-direction: column; gap: 14px; }
.card.feature .icon { flex: none; width: 52px; height: 52px; border-radius: 6px; background: #fff !important; border: 0; box-shadow: none; color: var(--green); }
.card.feature .icon.app { border: 0; box-shadow: none; }
.card.feature .icon.app img { width: 64%; height: 64%; }
.card.feature .icon.green, .card.feature .icon.red { background: #fff; color: var(--green); }
.chapter-mid .card.feature, .band .card.feature { background: #fff; border-color: var(--border); }
.chapter-mid .card.feature .icon, .band .card.feature .icon { background: var(--tile) !important; }

/* Nationality picker: flag beside the list (David 31 Oct). */
.nat-pick{display:flex;align-items:center;gap:10px;min-width:0}
.form-grid > .field{min-width:0}
.nat-pick img{width:36px;height:27px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none}
.nat-pick select{flex:1;min-width:0;width:100%}
/* Premium Platinum (David 1 Nov): row 1 is the partner, rows 2-3 are family members with the member's surname. */
.fam-who { grid-column: 1 / -1; margin: -4px 0 0; font-weight: 700; }
.fam-err { color: #C0392B; font-weight: 700; margin: 10px 0 0; }
.fam-err[hidden] { display: none; }
/* Home: who TGI is designed for (David 1 Nov). */
.hero .for-who { margin: 0 0 18px; color: var(--muted); font-size: .98rem; max-width: 34em; }
/* Features: what makes TGI different (David 1 Nov). */
.different { padding: 8px 0 32px; }
.diff-hero { background: var(--card, #fff); border: 1px solid var(--tile-line); border-radius: 6px; padding: 18px 22px; text-align: center; }
.diff-hero h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; margin: 0 0 6px; color: var(--navy, #0B1A5C); }
.diff-hero p { margin: 0 auto; max-width: 40em; }
.diff-label { margin: 22px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.diff { display: flex; gap: 14px; align-items: flex-start; background: var(--card, #fff); border: 1px solid var(--tile-line); border-radius: 6px; padding: 14px 16px; }
.diff h3 { margin: 0 0 2px; font-size: 1.05rem; }
.diff p { margin: 0; color: var(--muted); font-size: .95rem; }
.quiz-banner { display: block; margin-top: 18px; padding: 16px 20px; border-radius: 6px; background: var(--green); color: #fff; text-align: center; text-decoration: none; }
.quiz-banner strong { display: block; font-size: 1.2rem; }
.quiz-banner span { opacity: .9; }
/* Find my membership questionnaire (David 1 Nov). */
.quiz { padding: 24px 0 48px; }
.quiz .wrap { max-width: 620px; }
.qz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.qz-back, .qz-again { background: none; border: 0; color: var(--green); font-weight: 800; font-size: 1rem; cursor: pointer; padding: 6px 0; }
.qz-step { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qz-head { text-align: center; margin-bottom: 18px; }
.qz-head h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0; }
.qz-head p { margin: 4px 0 0; color: var(--muted); }
.qz-q h2 { font-size: 1.35rem; text-align: center; margin: 0 0 6px; }
.qz-hint { text-align: center; color: var(--muted); margin: 0 0 14px; }
.qz-answers { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.qz-a { background: var(--green); color: #fff; border: 0; border-radius: 6px; padding: 16px 18px; font-size: 1.08rem; font-weight: 800; cursor: pointer; }
.qz-a:hover { filter: brightness(1.06); }
.qz-r { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.qz-r[hidden], .qz-q[hidden] { display: none; }
.qz-sug { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.qz-card { width: 220px; max-width: 70%; margin: 0 auto; }
.qz-title { margin: 4px 0 0; font-size: 1.4rem; }
.qz-deal { margin: 0; font-size: 2rem; font-weight: 900; color: var(--green); }
.qz-price { margin: 0; color: var(--muted); font-weight: 700; }
.qz-why { text-align: left; background: var(--card, #fff); border: 1px solid var(--tile-line); border-radius: 6px; padding: 14px 18px; }
.qz-why h3 { margin: 0 0 8px; font-size: 1.05rem; }
.qz-list { list-style: none; margin: 0; padding: 0; }
.qz-list li { position: relative; padding: 4px 0 4px 26px; }
.qz-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 900; }
.qz-list li[hidden] { display: none; }
.pw-hint { color: #C0392B; font-weight: 700; }
/* Sign In drop-down: Member or Admin (David 1 Nov) */
.signin-dd { position: relative; }
.signin-dd > summary { list-style: none; cursor: pointer; }
.signin-dd > summary::-webkit-details-marker { display: none; }
.signin-dd > summary::after { content: ' ▾'; font-size: .8em; }
.signin-dd .dd { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid rgba(15,34,64,.12); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,34,64,.15); padding: 6px; min-width: 190px; z-index: 50; display: grid; }
.signin-dd .dd a { padding: 10px 12px; border-radius: 8px; color: var(--navy); font-weight: 600; text-decoration: none; white-space: nowrap; }
.signin-dd .dd a:hover { background: rgba(15,34,64,.06); }
.nav a.nav-admin { color: var(--navy); font-weight: 700; border: 1px solid var(--navy); border-radius: 8px; margin-left: 6px; }
.nav a.nav-admin[hidden] { display: none; }
/* Handicap System drop-down and page (David 1 Nov) */
.nav-dd { position: relative; }
.nav-dd > summary { list-style: none; cursor: pointer; }
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after { content: ' ▾'; font-size: .8em; }
.nav-dd .dd { position: absolute; left: 0; top: calc(100% + 6px); background: #fff; border: 1px solid rgba(15,34,64,.12); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,34,64,.15); padding: 6px; min-width: 200px; z-index: 60; display: grid; }
.nav-dd .dd a { padding: 9px 12px; border-radius: 8px; white-space: nowrap; border: 0 !important; }
.nav-dd .dd a:hover { background: rgba(15,34,64,.06); }
.hc-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 8px; }
.hc-tabs a { padding: 8px 14px; border: 1px solid rgba(15,34,64,.18); border-radius: 999px; color: var(--navy); font-weight: 700; text-decoration: none; background: #fff; }
.hc-tabs a:hover { border-color: var(--green); }
.hc-card h4 { margin: 14px 0 4px; color: var(--navy); }
.hc-card p { margin: 6px 0; }
.formula { font-weight: 700; color: var(--navy); background: #EEF1F8; border-radius: 8px; padding: 8px 12px; font-variant-numeric: tabular-nums; overflow-x: auto; }
.hc-steps { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 8px; }
section[id] { scroll-margin-top: 90px; }
.nav .nav-dd > summary { font-family: inherit; font-weight: 500; font-size: .95rem; padding: 8px 12px; color: var(--navy); border-bottom: 2px solid transparent; white-space: nowrap; }
.nav .nav-dd > summary:hover { border-bottom-color: var(--border); }
.nav .nav-dd > summary[aria-current="page"] { border-bottom-color: var(--green); }
@media (max-width: 820px) { .nav .nav-dd > summary { white-space: normal; text-align: center; padding: 8px 6px; } .nav-dd { min-width: 0; } }
.join-soc .soc-list { width: 100%; max-width: none; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.join-soc .soc-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.join-soc .soc-list li span:first-child { display: grid; }
.join-soc .soc-st { font-weight: 700; color: var(--green); white-space: nowrap; }
.join-soc .js-q { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; }
.join-soc[hidden], .card[hidden] { display: none !important; }
/* Phones (David 2 Nov): nothing wider than the screen; logo-only social buttons. */
html, body { max-width: 100%; overflow-x: hidden; }
footer a.social { padding: 5px !important; gap: 0 !important; border-radius: 50%; }
footer a.social img { width: 24px !important; height: 24px !important; display: block; }
@media (max-width: 820px) {
  .scope-value { white-space: normal; font-size: clamp(22px, 6vw, 28px); }
  .scope-row { gap: 18px 24px; }
}
@media (max-width: 520px) {
  .scope-row { grid-template-columns: 1fr; }
  footer .links { gap: 10px; }
}
footer .links { align-items: center; }

/* TGI ScoreScan: Scan. Sense. Sync. (Bart 1 Nov), the headline feature on Home and Features. */
.scorescan { background: linear-gradient(180deg, #fff 0%, #EEF4EF 100%); border-top: 4px solid var(--green); border-bottom: 1px solid var(--border); padding: 44px 0 48px; text-align: center; }
.ss-kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.ss-wordmark { width: min(440px, 86%); height: auto; margin: 0 auto 14px; }
.scorescan h2 { max-width: 30em; margin: 0 auto 8px; }
.ss-lead { font-size: 1.1rem; color: var(--muted); max-width: 38em; margin: 0 auto 26px; }
.ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.ss-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px 20px; box-shadow: 0 6px 20px rgba(11,26,92,.07); }
.ss-card img { width: 160px; height: auto; aspect-ratio: 524 / 367; object-fit: contain; margin: 0 0 12px; }
.ss-card h3 { font-size: 1.45rem; font-weight: 900; color: var(--navy); }
.ss-tag { color: var(--green); font-weight: 800; margin: 2px 0 8px; }
.ss-card p:last-child { color: var(--text); font-size: .98rem; }
.ss-step { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.ss-note { margin: 20px auto 0; color: var(--muted); max-width: 40em; }
.ss-btns { justify-content: center; margin-top: 22px; }
@media (max-width: 820px) {
  .ss-grid { grid-template-columns: 1fr; }
  .ss-card { display: grid; grid-template-columns: 92px 1fr; column-gap: 14px; align-items: start; padding: 18px 16px; }
  .ss-card img { width: 92px; height: auto; grid-row: span 3; margin: 4px 0 0; }
  .ss-step { top: 10px; right: 12px; width: 26px; height: 26px; font-size: 13px; }
  .ss-card h3 { font-size: 1.25rem; padding-right: 30px; }
}
.ss-card h3 { color: #0B1A5C; }
.ss-card h3 span { color: #1E7A34; }
.ss-kicker { color: var(--green); }
.ss-guide { margin: 0 auto 26px; max-width: 520px; }
.ss-guide img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 30px rgba(11,26,92,.18); }
.ss-guide figcaption { margin-top: 10px; color: var(--muted); font-size: .95rem; }
.ss-more { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; text-align: left; }
.ss-more > div { background: #fff; border: 1px solid var(--border); border-left: 4px solid #1E7A34; border-radius: 12px; padding: 16px 18px; }
.ss-more h3 { font-size: 1.1rem; margin-bottom: 6px; }
.ss-more p { color: var(--text); font-size: .97rem; }
@media (max-width: 820px) { .ss-more { grid-template-columns: 1fr; } }