/* sga-tours.com -- the consumer site.
   Shares the association's palette with the specification site so the two read
   as one organisation, but it is a different job: that site is a technical
   reference, this one is a front door. Bigger type, full-bleed art, fewer words
   per screen.

   Every hero and figure keeps a coloured background UNDER its image. Art is
   produced page by page, and a page whose photograph has not landed yet should
   look deliberate rather than broken. */

:root {
  --deep:#0C3025; --mid:#14513C; --lime:#8DC63F; --lime-dk:#6FA22F;
  /* --lime-dk is an accent only: 3.05:1 on white, below the 4.5:1 floor for
     type. Anything that carries text on a light ground uses --lime-ink. */
  --lime-ink:#4D7C18;
  --ink:#15201C; --body:#3A4642;
  /* At least 4.5:1 on cream and white: captions and small print use it. */
  --mute:#5F6C67;
  --cream:#FBFAF6; --line:#E2E7E2; --gold:#C9A227;
  --max:76rem;
}

* { box-sizing:border-box; }
/* An explicit display value beats the browser's [hidden] rule, so without this
   an element with display:flex stays on screen while claiming to be hidden. */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }
body {
  margin:0; background:#fff; color:var(--body);
  font:16px/1.65 "Segoe UI",-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; }
a { color:var(--mid); text-decoration:none; }
a:hover { text-decoration:underline; }

.wrap { max-width:var(--max); margin:0 auto; padding:4.5rem 1.5rem; }
.band-tight { padding-top:2.5rem; padding-bottom:2.5rem; }
.center { text-align:center; }
.muted { color:var(--mute); font-size:.93rem; }

h1,h2,h3,h4 { color:var(--ink); line-height:1.12; letter-spacing:-.02em; margin:0 0 .7rem; }
h1 { font-size:clamp(2.4rem, 5.4vw, 4rem); font-weight:800; }
h2 { font-size:clamp(1.7rem, 3.2vw, 2.5rem); font-weight:800; margin-bottom:1rem; }
h3 { font-size:1.08rem; font-weight:700; }
h4 { font-size:.88rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
     color:var(--mute); margin:0 0 .8rem; }
p { margin:0 0 1rem; }
.big { font-size:1.3rem; line-height:1.45; color:var(--ink); font-weight:600;
       letter-spacing:-.01em; margin-bottom:1.1rem; }
.lede { font-size:1.2rem; line-height:1.55; max-width:42rem; }
/* The lime labels sit on dark grounds in a heavily letterspaced uppercase, and
   both of those make type read smaller than its size. They are set larger than
   a caption would normally be for that reason. */
.eyebrow { font-size:.92rem; font-weight:700; letter-spacing:.14em;
           text-transform:uppercase; color:var(--lime); margin:0 0 1rem; }

/* ---------------------------------------------------------------- header */
.top {
  position:sticky; top:0; z-index:50; display:flex; align-items:center;
  gap:1.25rem; padding:.55rem 1.5rem; background:var(--deep);
  border-bottom:3px solid var(--lime);
}
/* The mark carries the header on its own -- no wordmark beside it. It is set a
   little larger than it was with text next to it, so the left of the bar still
   has something to stand on. */
.top .brand { display:flex; align-items:center; color:#fff; }
.top .brand:hover { text-decoration:none; }
.top .brand img { height:2.35rem; width:auto; }
.top nav { margin-left:auto; display:flex; gap:.2rem; }
.top nav a {
  color:#CFE3DA; padding:.45rem .8rem; border-radius:5px; font-size:.92rem;
  font-weight:500; white-space:nowrap;
}
.top nav a:hover { background:rgba(255,255,255,.08); text-decoration:none; color:#fff; }
.top nav a.on { background:var(--lime); color:var(--deep); font-weight:700; }
.top .actions { display:flex; align-items:center; gap:.7rem; }
.menu { display:none; background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer; }

/* -------------------------------------------------------------- sign in */
.usermenu { position:relative; }
.usericon {
  display:grid; place-items:center; width:2.1rem; height:2.1rem;
  border-radius:50%; color:#CFE3DA; text-decoration:none;
  border:1px solid rgba(255,255,255,.22);
}
.usericon:hover, .usericon[aria-expanded="true"] {
  color:var(--deep); background:var(--lime); border-color:var(--lime);
  text-decoration:none;
}
.usericon:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
.userpanel {
  position:absolute; right:0; top:calc(100% + .55rem); width:17.5rem; z-index:60;
  background:#fff; color:var(--body); border:1px solid var(--line);
  border-radius:10px; padding:1rem 1.1rem 1.1rem;
  box-shadow:0 14px 34px rgba(6,22,16,.28);
}
.userpanel label { display:block; margin:.65rem 0 0; font-size:.8rem;
                   font-weight:600; color:var(--mid); }
.userpanel input { width:100%; font:inherit; font-size:.92rem; margin-top:.25rem;
                   padding:.5rem .6rem; border:1px solid var(--line);
                   border-radius:6px; background:var(--cream); }
.userpanel input:focus { outline:none; border-color:var(--lime); background:#fff;
                         box-shadow:0 0 0 3px rgba(141,198,63,.25); }
.userpanel .btn { width:100%; margin-top:.9rem; text-align:center; }
.userpanel p { margin:.75rem 0 0; font-size:.86rem; }
.userpanel p.join { border-top:1px solid var(--line); padding-top:.7rem;
                    margin-top:.9rem; font-weight:600; }

/* --------------------------------------------------------------- buttons */
.btn {
  display:inline-block; background:var(--lime); color:var(--deep);
  font-weight:700; font-size:1rem; padding:.85rem 1.6rem; border-radius:7px;
  border:2px solid var(--lime); cursor:pointer; text-decoration:none;
  transition:background .15s, border-color .15s, transform .15s;
}
.btn:hover { background:var(--lime-ink); border-color:var(--lime-ink); color:#fff;
             text-decoration:none; transform:translateY(-1px); }
.btn.sm { font-size:.88rem; padding:.5rem 1rem; }
.btn.big { font-size:1.12rem; padding:1rem 2.2rem; }
.btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn.ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.btn.ghost.dark { color:var(--mid); border-color:var(--line); }
.btn.ghost.dark:hover { background:var(--cream); border-color:var(--mid); color:var(--mid); }
.cta { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.8rem; }
.cta.center { justify-content:center; }
.more { font-weight:700; color:var(--mid); }

/* ------------------------------------------------------------------ hero
   Each hero keeps ITS OWN height -- home is deliberately the tall one -- and
   holds that height at every width.

   Left to itself a hero's height comes from its content, so as the window
   narrows and the headline rewraps the frame changes shape, `cover` rescales to
   match, and the picture jumps at each reflow -- four separate jumps between a
   desktop and a phone on the home page.

   Pinning the height stops all of it. Once the frame is narrower than the image
   renders, `cover` locks the scale to the HEIGHT -- which no longer moves -- and
   narrowing simply slides the left edge out of view. Above that width the image
   already fills the frame, so the per-page anchor is inert. One number per page
   serves both ends.

   The pinned numbers below are the heights these heroes already had on a
   desktop, so nothing changes there; what changes is that a phone now gets the
   same height instead of a shrunken one. Padding is a floor, not a spacer --
   flex centering places the content, and at desktop it lands exactly where the
   old 6.5rem padding put it. */
.hero {
  position:relative; background-color:var(--deep); color:#fff;
  background-size:cover; background-position:center;
  background-repeat:no-repeat;
  display:flex; align-items:center;
  min-height:31rem;            /* 496px -- what six of the seven measured, plus a hair */
}
.hero::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,20,15,.94) 0%, rgba(6,20,15,.86) 32%,
                                     rgba(6,20,15,.52) 66%, rgba(6,20,15,.20) 100%);
}
.hero .wrap { position:relative; width:100%; padding-top:3rem; padding-bottom:3rem; }
.hero h1 { color:#fff; margin-bottom:1.2rem; }
.hero .lede { color:#D6E6DD; }
.hero .cta { margin-top:2.2rem; }

/* Two pages carry more than the shared height allows.
   Home is the tall one on purpose -- it is the first thing anyone sees.
   Membership only needs the extra because its two buttons stack on a phone. */
.hero.h-home { min-height:44rem; }        /* 704px */
.hero.h-membership { min-height:33rem; }  /* 528px */

/* Where each photograph's subject sits, as x in the 2400px original. These
   decide what a phone sees, and every one of them is inert on a desktop. */
.hero.h-home { background-image:url("../media/hero-home.jpg");
               background-position:78% center; }  /* golfer 1490-1800, club tip 1992 */
/* x0-740 of this one is blank dark wall. Anchored past it, so a phone opens on
   the lit bay and the row beyond instead of spending a quarter of the frame on
   nothing -- and what wall is left falls under the headline, where it belongs. */
.hero.h-about { background-image:url("../media/hero-about.jpg");
                background-position:74% center; }  /* lit bay 1420-1620, next bay and its player beyond */
.hero.h-membership { background-image:url("../media/hero-membership.jpg");
                     background-position:65% center; }  /* the phone and the hand on it, 1300-1700 */
/* The ball is the subject and the clubface is the impact. Anchored so the ball
   sits mid-frame with the face beside it -- further right and the face
   dominates, further left and it disappears entirely. */
.hero.h-sim { background-image:url("../media/hero-sim.jpg");
              background-position:76% center; }  /* ball 1560-1770, face 1788-2088 */
.hero.h-tourn { background-image:url("../media/hero-tournaments.jpg");
                background-position:68% center; }  /* the player mid-swing, 1400-1620 */
.hero.h-tech { background-image:url("../media/hero-technology.jpg");
               background-position:81% center; }  /* monitor and camera on the rail, 1400-2100 */
.hero.h-cert { background-image:url("../media/hero-certification.jpg");
               background-position:50% center; }  /* symmetric down the centre line */
/* The commercial landing page. Borrows the wide bay shot rather than the
   certification hero: the reader is standing in a room full of these, and the
   two pages sit one click apart, so sharing one image would read as an error. */
.hero.h-commercial { background-image:url("../media/bay-wide.jpg");
                     background-position:60% center; }

/* The error page. No photograph on purpose: it is served at whatever address
   failed -- including deep inside the specification -- so it cannot assume the
   reader was ever on the consumer site, and a hero of somebody enjoying golf
   over the words "out of bounds" reads as a taunt. Shorter than the rest, too:
   nobody came here to look at it. */
.hero.h-oob { min-height:24rem;
              background-image:linear-gradient(145deg,var(--mid),var(--deep)); }
/* The address that failed, quoted back. anywhere rather than break-word: a long
   path has no spaces to break at, and without it one pasted URL widens the
   whole page on a phone. */
.askedfor { margin:.3rem 0 1.4rem; }
.askedfor code { display:inline-block; max-width:100%; padding:.45rem .75rem;
                 border:1px solid var(--line); border-radius:8px;
                 background:var(--cream); color:var(--ink);
                 font-size:1rem; overflow-wrap:anywhere; }
.guess { font-size:1.05rem; margin-top:0; }
/* The destination cards on that page are links, so their headings are too. */
.card h3 a { color:inherit; }
.card h3 a:hover { color:var(--lime-ink); }

/* Says a section describes something unbuilt. Set apart from body copy so a
   skimming reader cannot mistake the paragraph above it for a description of
   something they can go and use today. */
.soon { display:inline-block; margin-top:.4rem; padding:.3rem .7rem;
        border:1px solid var(--line); border-radius:999px;
        background:var(--cream); color:var(--ink); font-size:.82rem;
        font-weight:600; letter-spacing:.02em; }

/* ------------------------------------------------------------------ bands */
.band { background:var(--cream); border-top:1px solid var(--line);
        border-bottom:1px solid var(--line); }
.band.dark { background:var(--deep); border-color:var(--deep); color:#CFE3DA; }
.band.dark h2, .band.dark h3 { color:#fff; }
.band.dark .big { color:#fff; }
.band.dark .card { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.band.dark .card h3 { color:var(--lime); }
.band.dark .card p { color:#B9CFC4; }
.band.dark .muted { color:#9DB4A8; }

/* ------------------------------------------------------------------ split */
.split { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.split.reverse figure { order:-1; }
.split h2 { margin-top:0; }

/* A figure is a coloured tile first and a photograph second, so an image that
   has not been produced yet still holds the layout at the right shape. */
.shot {
  margin:0; border-radius:14px; overflow:hidden; aspect-ratio:4/3;
  background:linear-gradient(150deg, var(--mid), var(--deep));
  box-shadow:0 22px 50px rgba(6,22,16,.22);
}
.shot img { width:100%; height:100%; object-fit:cover; display:block; }
.shot.phone { aspect-ratio:3/4; max-width:22rem; margin-inline:auto;
              background:linear-gradient(150deg,#1d6a4d,#08211a); }

/* ------------------------------------------------------------------ cards */
.cards { display:grid; gap:1.5rem; }
.cards.four  { grid-template-columns:repeat(4,1fr); }
.cards.three { grid-template-columns:repeat(3,1fr); }
.card {
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:1.6rem 1.5rem;
}
.card h3 { color:var(--mid); margin-bottom:.5rem; }
.card p { margin:0; font-size:.96rem; }
.band .card { background:#fff; }

/* ------------------------------------------------------------------ stats */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
         text-align:center; }
.stats b { display:block; font-size:2.6rem; font-weight:800; color:var(--mid);
           letter-spacing:-.03em; line-height:1; }
.stats span { display:block; margin-top:.5rem; font-size:.93rem; color:var(--mute); }

/* ------------------------------------------------------------------- misc */
.steps { counter-reset:s; list-style:none; padding:0; margin:1.4rem 0 0; }
.steps li { position:relative; padding-left:3rem; margin-bottom:1.15rem; }
.steps li b { color:var(--ink); }
.steps li::before {
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:.02rem; font-weight:800; font-size:.98rem;
  color:var(--lime-ink); letter-spacing:.05em;
}
.nots { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem 2.5rem;
        margin-top:1.5rem; }
.nots div { border-left:3px solid var(--lime); padding-left:1.1rem; }
.nots b { color:var(--ink); }
/* Wide enough that a short closing line is not broken in two while there is
   still room beside it -- 44rem clipped "Built with the industry, not against
   it." by a few characters. balance then splits the genuinely long ones into
   even lines rather than a long line and an orphan. */
.closing h2 { max-width:56rem; margin-inline:auto; text-wrap:balance; }
.closing p { max-width:38rem; margin-inline:auto; text-wrap:pretty; }

/* ----------------------------------------------------------------- footer */
.foot { background:var(--deep); color:#9DB4A8; font-size:.92rem; }
.foot .wrap { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem;
              padding-top:3.5rem; padding-bottom:2.5rem; }
/* The wordmark now carries the association's name itself, so the text line
   under it went and the tagline moved up to sit directly beneath. It can run
   larger here than in the header, where the nav competes for the bar.

   display:block matters more than the margin does: an inline image sits on the
   text baseline and leaves descender space under it, so the gap was several
   pixels wider than any margin admitted to. With that gone, a small negative
   top margin absorbs the line box's own leading and the tagline closes up
   under the mark as part of the same lockup. */
/* Shrink this cell to its own widest line -- the tagline -- so that centring
   the mark inside it centres it over the text rather than over the whole grid
   column. Doing it this way means the offset tracks the tagline if the wording
   or the font ever changes, instead of being a magic number. */
.foot .wrap > div:first-child { width:max-content; max-width:100%; }
/* The translate is an optical correction, not a geometric one. Measured by ink
   mass the mark already sits ~2px left of centre; what pulls the eye right is
   the TM, an isolated glyph at the edge that draws attention out of proportion
   to its weight. A transform keeps this out of layout, so the centring maths
   above stays honest. */
.foot .fmark { display:block; height:3.5rem; width:auto; margin:0 auto;
               transform:translateX(-3px); }
.foot .fmark + p { margin-top:.3rem; line-height:1.3; }
.foot b { color:#fff; }
/* Column labels, not headings: the footer is not part of the page's outline,
   and an h4 here skipped levels after a page's h2. Styled as h4 is. */
.foot .fh { font-size:.88rem; font-weight:700; letter-spacing:.1em;
            text-transform:uppercase; line-height:1.12; margin:0 0 .8rem;
            color:#7C9C8C; }
.foot a { display:block; color:#CFE3DA; margin-bottom:.4rem; }
.foot .legal {
  border-top:1px solid rgba(255,255,255,.12); max-width:var(--max);
  margin:0 auto; padding:1.1rem 1.5rem; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:.6rem; font-size:.86rem;
}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px) {
  .cards.four { grid-template-columns:repeat(2,1fr); }
  .foot .wrap { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .menu { display:block; order:1; margin-left:auto; }
  .top { flex-wrap:wrap; gap:.6rem; }
  .top .actions { order:2; }
  .top nav { display:none; order:3; width:100%; flex-wrap:wrap;
             margin-left:0; padding-bottom:.4rem; }
  body.navopen .top nav { display:flex; }
  .userpanel { position:fixed; right:.75rem; left:.75rem; width:auto; }
  .split, .split.reverse { grid-template-columns:1fr; gap:2.2rem; }
  .split.reverse figure { order:0; }
  .stats { grid-template-columns:1fr; gap:2rem; }
  .nots { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .cards.four, .cards.three { grid-template-columns:1fr; }
  .wrap { padding:3rem 1.25rem; }
  .foot .wrap { grid-template-columns:1fr; gap:1.8rem; }
}

/* ------------------------------------------------------- rating lander
   /player-rating, a page people land on from search. Everything here is
   prefixed rl- and used nowhere else. The moving parts -- the ring, the
   meters, the counters, the live feed -- start in their final state and are
   only rewound by main.js when it is about to animate them, so a reader with
   JavaScript off or reduced motion on sees a finished page, never empty
   bars. */
.eyebrow.dark { color:var(--lime-ink); }
.rl-center { margin-inline:auto; max-width:44rem; }
.rl-note { margin-top:1.4rem; }
.center .rl-note { margin-inline:auto; max-width:40rem; }

/* Hero: copy on the left, an example rating card on the right. */
.rl-hero { min-height:38rem; }
/* Two lines on a desktop, where the break in the markup falls; a phone drops
   the break and wraps. */
.rl-hero h1 { font-size:clamp(2.2rem, 3.6vw, 3.25rem); }
@media (max-width:900px) { .rl-br { display:none; } }
.rl-hero-grid { display:grid; grid-template-columns:1.25fr .9fr; gap:3rem;
                align-items:center; }
.rl-card {
  justify-self:end; width:100%; max-width:21rem; padding:1.6rem 1.5rem 1.2rem;
  border-radius:18px; color:#fff;
  background:linear-gradient(160deg, rgba(20,81,60,.82), rgba(6,20,15,.88));
  border:1px solid rgba(141,198,63,.35);
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  animation:rl-float 6s ease-in-out infinite;
}
@keyframes rl-float { 50% { transform:translateY(-8px); } }
.rl-ring { position:relative; width:11rem; height:11rem; margin:0 auto; }
.rl-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.rl-ring circle { fill:none; stroke-width:9; stroke-linecap:round; }
.rl-ring-bg { stroke:rgba(255,255,255,.1); }
/* 2*pi*52 = 326.7. The offset is what is left unfilled. */
.rl-ring-fg { stroke:var(--lime);
              stroke-dasharray:326.7;
              stroke-dashoffset:calc(326.7 * (1 - var(--p, .724)));
              filter:drop-shadow(0 0 6px rgba(141,198,63,.55));
              transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); }
.rl-ring-num { position:absolute; inset:0; display:flex; flex-direction:column;
               align-items:center; justify-content:center; }
.rl-ring-num b { font-size:2.5rem; font-weight:800; letter-spacing:-.03em;
                 line-height:1; font-variant-numeric:tabular-nums; }
.rl-ring-num span { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
                    color:#B9CFC4; margin-top:.35rem; }
.rl-card-meta { display:flex; justify-content:center; gap:.6rem; margin:1rem 0 1.1rem;
                flex-wrap:wrap; }
.rl-badge { background:var(--lime); color:var(--deep); font-weight:800;
            font-size:.78rem; padding:.22rem .7rem; border-radius:99px;
            letter-spacing:.04em; }
.rl-up { color:var(--lime); font-weight:700; font-size:.85rem; }
.rl-mini { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.rl-mini li { display:grid; grid-template-columns:5.6rem 1fr 1.8rem;
              align-items:center; gap:.6rem; font-size:.85rem; color:#CFE3DA; }
.rl-mini i { display:block; height:7px; border-radius:99px;
             background:rgba(255,255,255,.1); position:relative; overflow:hidden; }
.rl-mini i::after { content:""; position:absolute; inset:0 auto 0 0;
                    width:calc(var(--v) * 1%); border-radius:inherit;
                    background:linear-gradient(90deg, var(--lime-dk), var(--lime));
                    transition:width 1.2s cubic-bezier(.2,.8,.2,1) .3s; }
.rl-mini b { text-align:right; color:#fff; font-variant-numeric:tabular-nums; }
.rl-example { margin:1rem 0 0; text-align:center; font-size:.72rem;
              letter-spacing:.12em; text-transform:uppercase; color:#8FAA9C; }

/* The opening: what the rating is for, and an example tip. */
.rl-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem;
                 align-items:center; }
.rl-tip { position:relative; overflow:hidden; background:var(--deep); color:#CFE3DA;
          border-radius:16px; padding:1.7rem 1.6rem 1.3rem;
          box-shadow:0 22px 50px rgba(6,22,16,.22);
          transition:transform .3s ease; }
.rl-tip:hover { transform:translateY(-4px) rotate(-.4deg); }
.rl-tip::before { content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(141,198,63,.2), transparent 60%); }
.rl-tip > * { position:relative; }
.rl-tip-head { display:flex; align-items:center; gap:.5rem; margin:0 0 .6rem;
               font-size:.78rem; font-weight:800; letter-spacing:.12em;
               text-transform:uppercase; color:var(--lime); }
.rl-tip-ico { display:grid; place-items:center; width:1.7rem; height:1.7rem;
              border-radius:8px; background:rgba(141,198,63,.18); }
.rl-tip h3 { color:#fff; font-size:1.3rem; margin-bottom:1.1rem; }
.rl-tip-cmp { display:grid; gap:.8rem; margin-bottom:1.2rem; }
.rl-tip-cmp span { display:block; font-size:.85rem; margin-bottom:.3rem; }
.rl-tip .rl-meter { background:rgba(255,255,255,.12); }
.rl-tip .rl-meter-ref i { background:linear-gradient(90deg, #6E8B7E, #A9C2B5); }
.rl-tip-try { margin:0; padding:.9rem 1rem; border-radius:10px;
              background:rgba(255,255,255,.06); border-left:3px solid var(--lime);
              font-size:.95rem; }
.rl-tip-try b { color:#fff; }
.rl-tip-foot { margin:.9rem 0 0; font-size:.72rem; letter-spacing:.12em;
               text-transform:uppercase; color:#8FAA9C; }

/* The four categories. */
.rl-cat { position:relative; overflow:hidden;
          transition:transform .25s ease, box-shadow .25s ease, border-color .25s; }
.rl-cat::before { content:""; position:absolute; inset:0 0 auto 0; height:4px;
                  background:linear-gradient(90deg, var(--lime-dk), var(--lime)); }
.rl-cat:hover { transform:translateY(-6px); border-color:var(--lime);
                box-shadow:0 18px 40px rgba(12,48,37,.16); }
.rl-ico { width:2.6rem; height:2.6rem; padding:.45rem; border-radius:12px;
          background:var(--deep); stroke:var(--lime); fill:none; stroke-width:2.2;
          stroke-linecap:round; stroke-linejoin:round; margin-bottom:1rem;
          transition:transform .3s ease; }
.rl-cat:hover .rl-ico { transform:rotate(-8deg) scale(1.08); }
.rl-cat p { margin-bottom:1.2rem; }
.rl-meter { height:9px; border-radius:99px; background:var(--line); overflow:hidden; }
.rl-meter i { display:block; height:100%; width:calc(var(--v, 0) * 1%);
              border-radius:inherit;
              background:linear-gradient(90deg, var(--lime-dk), var(--lime));
              transition:width 1.4s cubic-bezier(.2,.8,.2,1); }
.rl-val { display:block; margin-top:.55rem; font-size:1.7rem; font-weight:800;
          color:var(--mid); letter-spacing:-.02em; line-height:1;
          font-variant-numeric:tabular-nums; }

/* Rankings. */
.rl-ranks { background:
  radial-gradient(70% 90% at 50% 0%, rgba(141,198,63,.16), transparent 70%),
  var(--deep); }
.rl-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
            margin:2.6rem auto 0; max-width:62rem; }
.rl-tile { position:relative; padding:2rem 1.2rem 1.7rem; border-radius:18px;
           background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
           transition:transform .3s ease, border-color .3s, background .3s; }
.rl-tile:hover { transform:translateY(-6px) scale(1.02);
                 border-color:var(--lime); background:rgba(141,198,63,.08); }
.rl-tile b { display:flex; justify-content:center; align-items:baseline; gap:.15rem;
             font-size:clamp(3.2rem, 6vw, 4.6rem); font-weight:800; color:#fff;
             line-height:1; letter-spacing:-.04em; margin:.6rem 0 .4rem;
             font-variant-numeric:tabular-nums; }
.rl-tile b small { font-size:.42em; color:var(--lime); letter-spacing:0; }
.rl-tile-k { font-size:.76rem; font-weight:700; letter-spacing:.14em;
             text-transform:uppercase; color:#9DB4A8; }
.rl-tile-s { display:block; color:#CFE3DA; font-size:1.02rem; }
.rl-gold { border-color:rgba(201,162,39,.6);
           background:linear-gradient(170deg, rgba(201,162,39,.2), rgba(255,255,255,.04)); }
.rl-gold b, .rl-gold b small { color:#F3D46B; }
.rl-gold::after { content:"\2605"; position:absolute; top:.8rem; right:1rem;
                  color:#F3D46B; font-size:1.1rem; }

/* Live round: the phone, and a feed that plays in beside it. */
.rl-live { position:relative; }
.rl-feed { position:absolute; left:-1.5rem; bottom:2rem; width:17.5rem;
           background:#fff; border-radius:14px; padding:1rem 1.1rem .6rem;
           box-shadow:0 24px 55px rgba(6,22,16,.28); border:1px solid var(--line); }
.rl-feed-head { margin:0 0 .6rem; font-size:.78rem; font-weight:800;
                letter-spacing:.1em; text-transform:uppercase; color:var(--mid);
                display:flex; align-items:center; gap:.5rem; }
.rl-live-dot { width:.6rem; height:.6rem; border-radius:50%; background:#E0412F;
               box-shadow:0 0 0 0 rgba(224,65,47,.6); animation:rl-pulse 1.6s infinite; }
@keyframes rl-pulse { 70% { box-shadow:0 0 0 .55rem rgba(224,65,47,0); }
                      100% { box-shadow:0 0 0 0 rgba(224,65,47,0); } }
.rl-feed ul { list-style:none; margin:0; padding:0; }
.rl-feed li { display:grid; grid-template-columns:5rem 1fr; gap:.4rem;
              padding:.5rem 0; border-top:1px solid var(--line); font-size:.88rem;
              transition:opacity .5s ease, transform .5s ease; }
.rl-feed li b { color:var(--ink); }
.rl-feed li span { color:var(--body); }
.rl-feed li:last-child span { color:var(--lime-ink); font-weight:700; }
.rl-feed li.rl-wait { opacity:0; transform:translateX(-12px); }

/* Levels, as a track that fills. */
.rl-track { list-style:none; margin:2rem 0 2.6rem; padding:0; display:grid;
            grid-template-columns:repeat(4,1fr); position:relative; }
.rl-track::before, .rl-track::after { content:""; position:absolute; top:.85rem;
  left:12.5%; height:4px; border-radius:99px; }
.rl-track::before { right:12.5%; background:var(--line); }
.rl-track::after { width:calc(75% * var(--fill, 1));
                   background:linear-gradient(90deg, var(--lime-dk), var(--lime));
                   transition:width 1.8s cubic-bezier(.2,.8,.2,1); }
.rl-track li { position:relative; z-index:1; text-align:center; }
.rl-track li::before { content:""; display:block; width:1.75rem; height:1.75rem;
  margin:0 auto .7rem; border-radius:50%; background:#fff;
  border:4px solid var(--lime); box-shadow:0 0 0 5px rgba(141,198,63,.18); }
.rl-track li:last-child::before { background:var(--lime); }
.rl-track b { display:block; color:var(--ink); }
.rl-track span { font-size:.88rem; color:var(--mute); }
.rl-rules .card { transition:transform .25s ease, box-shadow .25s ease; }
.rl-rules .card:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(12,48,37,.12); }

/* Handicap vs rating. */
.rl-vs { display:grid; grid-template-columns:1fr auto 1fr; gap:1.5rem;
         align-items:stretch; margin:2.2rem auto 1.4rem; max-width:58rem; }
.rl-vs-col { border:1px solid var(--line); border-radius:14px; padding:1.6rem 1.5rem; }
.rl-vs-col ul { margin:0; padding-left:1.1rem; }
.rl-vs-col li { margin-bottom:.45rem; }
.rl-vs-sga { border-color:var(--lime); background:linear-gradient(170deg, #F4FAEC, #fff);
             box-shadow:0 14px 34px rgba(12,48,37,.1); }
.rl-vs-sga h3 { color:var(--lime-ink); }
.rl-vs-mid { align-self:center; width:3rem; height:3rem; border-radius:50%;
             display:grid; place-items:center; background:var(--deep); color:var(--lime);
             font-weight:800; }

.rl-close { background:
  radial-gradient(60% 100% at 50% 100%, rgba(141,198,63,.2), transparent 70%),
  var(--deep); }

@media (max-width:900px) {
  .rl-hero-grid, .rl-intro-grid { grid-template-columns:1fr; gap:2.4rem; }
  .rl-card { justify-self:center; }
  .rl-tiles { grid-template-columns:1fr; max-width:22rem; }
  .rl-feed { position:relative; left:auto; bottom:auto; margin:-3rem auto 0;
             width:min(19rem, 92%); }
  .rl-vs { grid-template-columns:1fr; }
  .rl-vs-mid { justify-self:center; }
}
@media (max-width:620px) {
  .rl-track { grid-template-columns:repeat(2,1fr); row-gap:1.6rem; }
  .rl-track::before, .rl-track::after { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .rl-card, .rl-live-dot { animation:none; }
}