/*
 * tMP Core: the roadmap.
 *
 * The pin-sheet design system — the same paper, ink, serif headings and reveal-on-scroll as the
 * rest of the site. Tokens are restated rather than imported because this page renders outside
 * the theme frame, and a page that half-inherits is worse than one that does not inherit at all.
 */

.tmp-rm-body {
	--paper: #F5F2EA; --card: #FFFDF8; --ink: #0F2029; --ink2: #3C4C55; --muted: #5F6E76;
	--line: rgba(15, 32, 41, 0.16); --line2: rgba(15, 32, 41, 0.09);
	--accent: #58B4E5; --blue-deep: #1A6A96; --green: #2D6A4F; --amber: #B4531C;
	--serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	margin: 0; background: var(--paper); color: var(--ink2);
	font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}

/*
 * Every box measures itself the way anybody reading the numbers expects it to. Without this the
 * full-bleed band below is its width PLUS its padding, which is how it ended up 1131px wide in a
 * 1068px page.
 */
.tmp-rm-body *, .tmp-rm-body *::before, .tmp-rm-body *::after { box-sizing: border-box; }

/*
 * The page itself is full width and holds no measurements; `__in` is the column everything sits
 * in. Done this way round on purpose.
 *
 * The obvious alternative — one narrow container, with the tinted band pulled back out of it
 * using `width: 100vw` and a negative margin — is wrong in a way that only shows up on a real
 * machine: `100vw` counts the scrollbar and the page's own width does not, so the band is a
 * scrollbar wider than the viewport, sits a few pixels left of everything else, and gives the
 * whole page a sideways scroll. It looked perfect in a headless browser, which has no scrollbar.
 *
 * A band that is simply a full-width element containing a centred column cannot have that bug.
 */
.tmp-rm { padding: 0 0 80px; }
.tmp-rm__in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.tmp-rm h1, .tmp-rm h2, .tmp-rm h3, .tmp-rm h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -0.01em; line-height: 1.08; margin: 0 0 18px; }
.tmp-rm h1 { font-size: clamp(40px, 6.4vw, 74px); }
/* Same rule as the headline: no hard breaks anywhere, let the measure and `balance` set them. */
.tmp-rm h2 { font-size: clamp(31px, 4.2vw, 48px); margin-bottom: 14px; text-wrap: balance; }
.tmp-rm h3 { font-size: clamp(20px, 2.2vw, 25px); margin-bottom: 8px; }
.tmp-rm h4 { font-size: 20px; margin-bottom: 6px; }
.tmp-rm p { margin: 0 0 16px; }
.tmp-rm b { color: var(--ink); font-weight: 600; }
.tmp-rm__eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }

/* The cap belongs to the TEXT. Put it on the section and the section's own centred column stops
   being centred, which left the hero 80px out of line with every other block on the page. */
.tmp-rm__hero { padding: clamp(66px, 11vh, 120px) 0 clamp(40px, 6vh, 64px); }
/*
 * The headline sets its own breaks.
 *
 * It used to carry a hard <br> AND a 15ch measure, and the measure won: the line wrapped before
 * it ever reached the break, so a four-word headline came out over four ragged lines with "the"
 * orphaned on one of them. A headline that is typeset twice is typeset badly. One measure, wide
 * enough for two lines at this size, and `balance` decides where they fall.
 */
.tmp-rm__hero h1 { max-width: 20ch; text-wrap: balance; }
.tmp-rm__hero .tmp-rm__lede, .tmp-rm__hero .tmp-rm__figures { max-width: 790px; }
.tmp-rm__lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; max-width: 66ch; }

.tmp-rm__figures { display: flex; flex-wrap: wrap; gap: 14px 44px; list-style: none; margin: 38px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); }
.tmp-rm__figures li { display: flex; flex-direction: column; }
.tmp-rm__n { font-family: var(--serif); font-size: clamp(32px, 4.4vw, 50px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tmp-rm__figures span { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 7px; }
.tmp-rm__figures i { font-style: normal; font-size: 12.5px; color: var(--muted); }

.tmp-rm__sec { padding: clamp(50px, 8vh, 84px) 0; border-top: 1px solid var(--line2); }
.tmp-rm__say { max-width: 62ch; color: var(--muted); margin-bottom: 34px; }

/* ======================================================= the time control */
.tmp-rm__map-sec { padding: clamp(40px, 6vh, 64px) 0 clamp(50px, 8vh, 80px); }
.tmp-rm__stage { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px clamp(18px, 3vw, 34px) 30px; }

/*
 * The control is one centred column, not three things that happen to sit above each other.
 *
 * The track used to run the full width of the card while the sentence under it sat hard left and
 * the Play row centred on something else again — three different centre lines in 120 pixels. They
 * now share one measure and one centre, so the whole cluster reads as a single control.
 */
.tmp-rm__drive-col { max-width: 840px; margin-inline: auto; }
.tmp-rm__track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0 20px; }
.tmp-rm__rail { position: absolute; left: 12.5%; right: 12.5%; top: 7px; height: 2px; background: var(--line); border-radius: 2px; }
.tmp-rm__rail-fill { display: block; height: 100%; width: 33.33%; background: var(--ink); border-radius: 2px; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.tmp-rm__stop { position: relative; background: none; border: 0; cursor: pointer; padding: 0; text-align: center; font-family: var(--sans); color: var(--muted); display: grid; justify-items: center; gap: 2px; }
.tmp-rm__stop-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.3,1.5,.5,1); }
.tmp-rm__stop.is-done .tmp-rm__stop-dot { border-color: var(--ink); background: var(--ink); }
.tmp-rm__stop.is-on .tmp-rm__stop-dot { border-color: var(--ink); background: var(--accent); transform: scale(1.35); }
.tmp-rm__stop-year { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }
.tmp-rm__stop-label { font-size: 13.5px; font-weight: 500; }
.tmp-rm__stop.is-on .tmp-rm__stop-year, .tmp-rm__stop.is-on .tmp-rm__stop-label { color: var(--ink); }
.tmp-rm__stop:hover .tmp-rm__stop-label { color: var(--ink); }

/* ---- the control says out loud that it is a control ---- */
.tmp-rm__drive { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -6px 0 16px; font-size: 13px; color: var(--muted); }
.tmp-rm__play { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px 7px 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.tmp-rm__play:hover { border-color: var(--ink); }
.tmp-rm__play::before { content: ''; width: 0; height: 0; border-left: 9px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.tmp-rm__play.is-playing::before { width: 9px; height: 11px; border: 0; background: linear-gradient(to right, var(--ink) 0 3px, transparent 3px 6px, var(--ink) 6px 9px); }

/* While it plays, the next stop leans forward so the track reads as the thing that is moving. */
.tmp-rm__stop.is-next .tmp-rm__stop-dot { animation: tmp-rm-nudge 1.4s ease-in-out infinite; }
@keyframes tmp-rm-nudge { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); border-color: var(--accent); } }

.tmp-rm__stop:hover .tmp-rm__stop-dot { border-color: var(--ink); }
.tmp-rm__stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }

/*
 * Note the doubled class. `.tmp-rm p` is (0,1,1) and beat the single class at (0,1,0), so the
 * `auto` side margins here were being replaced by zero and the sentence sat against the left edge
 * of the card. Any rule in this file that fights the base paragraph rule needs the same weight.
 *
 * `text-wrap: balance` is what stops a two-line sentence ending in a three-word orphan; where it
 * is not supported the measure alone still keeps the lines close in length.
 */
.tmp-rm__stage-say.tmp-rm__stage-say { font-family: var(--serif); font-size: clamp(19px, 2.3vw, 26px); line-height: 1.3; color: var(--ink); max-width: 34ch; margin: 0 auto 22px; text-align: center; text-wrap: balance; min-height: 2.6em; transition: opacity .25s ease; }
.tmp-rm__stage-say.is-swap { opacity: 0; }

/* ======================================================= the diagram */
.tmp-rm__canvas { display: grid; grid-template-columns: 1fr 296px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .tmp-rm__canvas { grid-template-columns: 1fr; } }
.tmp-rm__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* things arrive and leave */
.tmp-rm__node, .tmp-rm__edge, .tmp-rm__flow { transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.tmp-rm__node { cursor: pointer; opacity: 0; transform: translateY(8px); }
.tmp-rm__node.is-here { opacity: 1; transform: none; }
.tmp-rm__edge { opacity: 0; fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.tmp-rm__edge.is-here { opacity: 1; }
.tmp-rm__edge--quiet { stroke-dasharray: 3 6; stroke: rgba(15,32,41,.28); }
.tmp-rm__flow { opacity: 0; fill: var(--accent); }
.tmp-rm__flow.is-here { opacity: 1; animation: tmp-rm-run 3.4s linear infinite; }
@keyframes tmp-rm-run { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.tmp-rm__node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.7; transition: fill .2s ease, stroke .2s ease; }
.tmp-rm__node--person rect { fill: #fff; stroke-dasharray: 0; }
.tmp-rm__node--chip rect { fill: #fff; stroke: var(--line); stroke-width: 1.4; }
.tmp-rm__node--ghost rect { fill: rgba(15,32,41,.04); stroke: rgba(15,32,41,.3); stroke-dasharray: 5 5; }
/* A label swapped part-way through the story: both names are in the markup and the stage decides
   which one is showing, the same way every other part of this diagram arrives and leaves. */
.tmp-rm__node text[data-from] { opacity: 0; transition: opacity .3s ease; }
.tmp-rm__node text[data-from].is-here { opacity: 1; }

/* A membership is something the customer already on the diagram HAS, so it is drawn as a tag on
   them — filled in the accent, sitting right under the person — and never as a second person. */
.tmp-rm__node--tag rect { fill: var(--accent); stroke: none; }
.tmp-rm__node--tag .tmp-rm__node-t { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.13em; fill: #0C2733; }

/* Money passes THROUGH the rail; it does not rest there. So it is an open, dashed band rather than
   another filled box — the filled ones are the places that actually hold something. */
.tmp-rm__node--rail rect { fill: rgba(45,106,79,.06); stroke: var(--green); stroke-width: 1.4; stroke-dasharray: 6 5; }
.tmp-rm__node--rail .tmp-rm__node-t { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; fill: var(--green); text-transform: uppercase; }
.tmp-rm__node--end rect { fill: var(--ink); }
.tmp-rm__node--end .tmp-rm__node-t { fill: var(--card); }
.tmp-rm__node-t { font-family: var(--sans); font-size: 14px; font-weight: 600; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.tmp-rm__node-t--big { font-family: var(--serif); font-size: 26px; font-weight: 400; }
.tmp-rm__node-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--muted); text-anchor: middle; pointer-events: none; }
.tmp-rm__node--ghost .tmp-rm__node-t { fill: var(--muted); }

/* ---- the register: the middle of the picture, drawn as an object ----
   A focal point that is a flat filled rectangle is just the darkest rectangle. This one has a
   face with a gradient on it, a shadow under it and a lit top edge, so it sits above the diagram
   rather than in it — and the things it rings up are keys on a keypad rather than a crowded line
   of small text running to both edges. */
.tmp-rm__node[data-node="register"] rect { fill: url(#rm-reg-face); stroke: rgba(255,255,255,.14); stroke-width: 1; }
.tmp-rm__reg-lift { fill: #0C1A22; stroke: none !important; }
.tmp-rm__reg-rim { stroke: rgba(255,255,255,.3); stroke-width: 1.5; fill: none; }
.tmp-rm__reg-rule { stroke: rgba(255,255,255,.16); stroke-width: 1; fill: none; }
.tmp-rm__reg-dot { fill: var(--accent); stroke: none !important; }
.tmp-rm__reg-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; fill: rgba(255,255,255,.55); pointer-events: none; }
.tmp-rm__reg-n { font-family: var(--serif); font-size: 29px; fill: #fff; text-anchor: middle; pointer-events: none; }
.tmp-rm__reg-key rect { fill: rgba(255,255,255,.08) !important; stroke: rgba(255,255,255,.12) !important; stroke-width: 1 !important; }
.tmp-rm__reg-key text { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.09em; fill: rgba(255,255,255,.8); text-anchor: middle; pointer-events: none; }

/* The pulse belongs on the face, not on its outline — a stroke that thickens and thins makes the
   whole box appear to change size, which on the one thing everything points at reads as a fault. */
.tmp-rm__node[data-node="register"].is-here .tmp-rm__reg-dot { animation: tmp-rm-breathe 3.4s ease-in-out infinite; }
@keyframes tmp-rm-breathe { 0%,100% { opacity: 1; r: 3; } 50% { opacity: .45; r: 4.5; } }

.tmp-rm__node:hover > rect, .tmp-rm__node:focus > rect { stroke: var(--accent); stroke-width: 3; outline: none; }
.tmp-rm__node.is-picked > rect { stroke: var(--accent); stroke-width: 3; }
/* The register opens already selected, so its ring is on screen the whole time — at three pixels
   of solid accent it fought the card's own lit edge. Thinner and softer: still clearly chosen. */
.tmp-rm__node[data-node="register"].is-picked > rect,
.tmp-rm__node[data-node="register"]:hover > rect { stroke: rgba(88,180,229,.75); stroke-width: 2; }

/* ======================================================= the network */
.tmp-rm__net { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.tmp-rm__net.is-here { opacity: 1; pointer-events: auto; }
.tmp-rm__edge--net { stroke: rgba(15,32,41,.22); stroke-width: 1.6; opacity: 1; }
.tmp-rm__course circle { fill: var(--card); stroke: var(--ink); stroke-width: 1.7; }
.tmp-rm__course-t { font-family: var(--sans); font-size: 11.5px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.tmp-rm__net.is-here .tmp-rm__course { animation: tmp-rm-pop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: var(--d, 0s); }
@keyframes tmp-rm-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.tmp-rm__course { transform-box: fill-box; transform-origin: center; }

.tmp-rm__card { cursor: pointer; }
.tmp-rm__card rect { fill: var(--ink); stroke: var(--accent); stroke-width: 2; }
.tmp-rm__card line { stroke: rgba(255,255,255,.25); stroke-width: 1; }
.tmp-rm__card-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; fill: var(--accent); }
.tmp-rm__card-n { font-family: var(--serif); font-size: 24px; fill: #fff; }
.tmp-rm__card-m { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; fill: rgba(255,255,255,.55); }
.tmp-rm__net.is-here .tmp-rm__card { animation: tmp-rm-pop .6s cubic-bezier(.3,1.4,.5,1) .5s both; transform-box: fill-box; transform-origin: center; }

/* one golfer, moving between two courses — the idea in a single mark */
/* The marketplace they are all inside. Without a boundary the courses read as three separate
   diagrams that happen to be near each other, which is the opposite of the point. */
.tmp-rm__ring { fill: rgba(88,180,229,.05); stroke: rgba(15,32,41,.2); stroke-width: 1.5; stroke-dasharray: 5 7; }
.tmp-rm__ring-k, .tmp-rm__net-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; fill: var(--muted); }
.tmp-rm__net-k { text-anchor: middle; }
.tmp-rm__course rect { fill: var(--card); stroke: var(--ink); stroke-width: 1.6; }
.tmp-rm__course-t { font-family: var(--serif); font-size: 19px; fill: var(--ink); text-anchor: middle; }

/* A course is not one screen. The counter, the turn and the beer cart are all registers.
   Qualified with the parent because `.tmp-rm__course rect` would otherwise win on specificity
   and paint these the same colour as the block they sit in — which it did, leaving three empty
   white chips with white text inside them. */
.tmp-rm__course rect.tmp-rm__reg { fill: var(--ink); stroke: none; }
.tmp-rm__reg-t { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; fill: rgba(255,255,255,.55); text-anchor: middle; }
.tmp-rm__reg-s { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; fill: #fff; text-anchor: middle; }

/* The money leaves the marketplace. That is the whole argument against the booking portals, so
   it is drawn crossing the boundary rather than described underneath it. */
.tmp-rm__out { fill: none; stroke: var(--green); stroke-width: 1.8; stroke-dasharray: 4 5; }
.tmp-rm__flow--out { fill: var(--green); }
.tmp-rm__net.is-here .tmp-rm__flow--out { opacity: 1; animation: tmp-rm-run 2.8s linear infinite; }
.tmp-rm__bank { fill: var(--ink); }
.tmp-rm__bank-t { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--card); text-anchor: middle; }
.tmp-rm__net-foot { font-family: var(--sans); font-size: 12.5px; fill: var(--muted); text-anchor: middle; }

/* The rail is shared; the account on it is theirs. Outlined rather than filled, so it reads as
   something the money passes THROUGH rather than another box that holds it. */
.tmp-rm__connect { cursor: pointer; }
.tmp-rm__connect rect { fill: rgba(45,106,79,.07); stroke: var(--green); stroke-width: 1.4; stroke-dasharray: 5 5; }
.tmp-rm__connect-t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; fill: var(--green); text-anchor: middle; }
.tmp-rm__connect:hover rect, .tmp-rm__connect:focus rect { fill: rgba(45,106,79,.13); outline: none; }

/* Golfers moving between courses rather than belonging to one. Three, on different arcs, because
   one dot reads as a single transaction and the claim is about a pool. */
.tmp-rm__traveller { fill: var(--accent); opacity: 0; }
.tmp-rm__traveller--a { offset-path: path("M196,190 C240,120 420,110 500,106 C600,110 760,130 804,190"); }
.tmp-rm__traveller--b { offset-path: path("M804,190 C700,250 300,250 196,190"); }
.tmp-rm__traveller--c { offset-path: path("M500,190 C420,160 240,150 196,190"); }
.tmp-rm__net.is-here .tmp-rm__traveller--a { opacity: 1; animation: tmp-rm-run 9s linear 1s infinite; }
.tmp-rm__net.is-here .tmp-rm__traveller--b { opacity: .8; animation: tmp-rm-run 11s linear 2.2s infinite; }
.tmp-rm__net.is-here .tmp-rm__traveller--c { opacity: .65; animation: tmp-rm-run 7s linear .4s infinite reverse; }

/* ======================================================= the side panel */
.tmp-rm__panel { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px; min-height: 230px; }
.tmp-rm__panel-hint { color: var(--muted); font-size: 14px; margin: 0; }
.tmp-rm__panel h3 { font-size: 22px; margin-bottom: 6px; }
.tmp-rm__panel .tmp-rm__one { font-size: 15px; color: var(--ink2); margin-bottom: 10px; }
.tmp-rm__panel .tmp-rm__more { font-size: 14px; color: var(--muted); margin: 0; }
.tmp-rm__pstate { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.tmp-rm__pstate i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tmp-rm__pstate.is-live { color: var(--green); }
.tmp-rm__pstate.is-ready, .tmp-rm__pstate.is-building { color: var(--amber); }
.tmp-rm__pstate.is-gone { color: var(--muted); }

/* ======================================================= why keep the card */
.tmp-rm__does { margin-top: 30px; }
.tmp-rm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
/*
 * Five reasons, which auto-fit lays out as four and a stray. Three across with the last card
 * taking the rest of the second row fills both rows — and the card that gets the extra width is
 * the shared handicap, which is the one the other four rest on.
 */
@media (min-width: 940px) {
	.tmp-rm__does .tmp-rm__grid { grid-template-columns: repeat(3, 1fr); }
	.tmp-rm__does .tmp-rm__grid > :last-child { grid-column: span 2; }
}
.tmp-rm__does-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; }
.tmp-rm__does-card:hover, .tmp-rm__does-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15,32,41,.08); outline: none; }
.tmp-rm__does-card .tmp-rm__one { font-size: 14px; margin: 0; color: var(--muted); }
/*
 * Drawn, not clipped.
 *
 * These were CSS masks and clip-path polygons on a square div — cheap to ship and impossible to
 * get right: a nine-point polygon is not a golf flag, it is a shape that argues with one. They are
 * stroked SVG now, one weight across the set, inheriting their colour from the card so the icon
 * can answer a hover with the rest of it.
 */
.tmp-rm__ico {
	display: block; width: 28px; height: 28px; margin-bottom: 12px;
	color: var(--ink); fill: none; stroke: currentColor;
	stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
	transition: color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.tmp-rm__ico-s { fill: currentColor; stroke: none; }
.tmp-rm__does-card:hover .tmp-rm__ico, .tmp-rm__does-card:focus-visible .tmp-rm__ico { color: var(--blue-deep); transform: translateY(-1px); }

/* ======================================================= getting on it */
.tmp-rm__sec--tint { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tmp-rm__steps { list-style: none; margin: 0 0 38px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.tmp-rm__steps li { position: relative; padding-top: 52px; cursor: pointer; }
.tmp-rm__step-n { position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--card); font-family: var(--mono); font-size: 14px; display: grid; place-items: center; }
.tmp-rm__steps li::after { content: ''; position: absolute; top: 18px; left: 44px; right: -18px; height: 1px; background: var(--line); }
.tmp-rm__steps li:last-child::after { display: none; }
@media (max-width: 760px) { .tmp-rm__steps li::after { display: none; } }

.tmp-rm__one { margin: 0; color: var(--ink2); }
.tmp-rm__more { margin: 12px 0 0; font-size: 15px; color: var(--muted); display: none; }
.is-open > .tmp-rm__more { display: block; animation: tmp-rm-open .3s cubic-bezier(.2,.8,.2,1); }
@keyframes tmp-rm-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.tmp-rm__toggle { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-deep); }

.tmp-rm__price { background: var(--ink); color: rgba(255,255,255,.82); border-radius: 16px; padding: 28px 30px; }
.tmp-rm__price p { margin: 0 0 14px; }
.tmp-rm__price b { color: #fff; font-family: var(--serif); font-size: 38px; }
/* Two plans, side by side, with a rule between them — so the reader compares rather than reads
   down. One column on a phone, where side by side is two cramped columns of nothing. */
.tmp-rm__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-bottom: 18px; }
.tmp-rm__plan { display: grid; gap: 2px; padding-right: 24px; }
.tmp-rm__plan + .tmp-rm__plan { border-left: 1px solid rgba(255,255,255,.16); padding-left: 28px; padding-right: 0; }
.tmp-rm__plan b { line-height: 1.05; }
.tmp-rm__plan-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.tmp-rm__plan-b { font-size: 14.5px; color: rgba(255,255,255,.82); margin-top: 5px; }
@media (max-width: 620px) {
	.tmp-rm__plans { grid-template-columns: 1fr; gap: 20px; }
	.tmp-rm__plan + .tmp-rm__plan { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-left: 0; padding-top: 18px; }
}
.tmp-rm__price ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; font-size: 15px; }
.tmp-rm__price li span { display: inline-block; min-width: 130px; color: #fff; font-weight: 600; }
.tmp-rm__fine { font-size: 13.5px; color: rgba(255,255,255,.6); margin: 0; }

/* ======================================================= the opportunity */
.tmp-rm__sec--dark { background: var(--ink); color: rgba(255,255,255,.76); padding: clamp(46px,7vh,74px) clamp(24px,4vw,46px); border: 0; border-radius: 20px; margin: 22px 0 0; }
.tmp-rm__sec--dark h2, .tmp-rm__sec--dark h3 { color: #fff; }
.tmp-rm__sec--dark .tmp-rm__say, .tmp-rm__sec--dark .tmp-rm__eyebrow { color: rgba(255,255,255,.55); }
.tmp-rm__figures--dark { border-top-color: rgba(255,255,255,.16); }
.tmp-rm__figures--dark .tmp-rm__n { color: #fff; }
.tmp-rm__figures--dark span { color: rgba(255,255,255,.9); }
.tmp-rm__figures--dark i { color: rgba(255,255,255,.5); }

.tmp-rm__chapters { list-style: none; counter-reset: ch; margin: 34px 0 0; padding: 0; display: grid; gap: 12px; }
.tmp-rm__chapter { counter-increment: ch; position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; padding: 20px 22px 18px 62px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.tmp-rm__chapter::before { content: counter(ch, decimal-leading-zero); position: absolute; left: 22px; top: 21px; font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .08em; }
.tmp-rm__chapter:hover, .tmp-rm__chapter:focus-visible { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); outline: none; }
.tmp-rm__chapter .tmp-rm__one { color: rgba(255,255,255,.82); }
.tmp-rm__chapter .tmp-rm__more { color: rgba(255,255,255,.62); }
.tmp-rm__chapter .tmp-rm__toggle { color: var(--accent); }

/* ======================================================= foot */
.tmp-rm__lapsed { margin: 34px 0 0; padding: 14px 18px; border-left: 3px solid var(--amber); background: var(--card); border-radius: 0 10px 10px 0; font-size: 14.5px; color: var(--muted); }
.tmp-rm__foot { margin-top: 40px; border-top: 1px solid var(--line2); font-size: 13px; color: var(--muted); }
.tmp-rm__foot .tmp-rm__in { padding-top: 38px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.tmp-rm__foot p { margin: 0; }
.tmp-rm__foot a { color: var(--blue-deep); }

.tmp-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.tmp-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.tmp-rm *, .tmp-rm *::before, .tmp-rm *::after { animation: none !important; transition: none !important; }
	.tmp-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* =======================================================================
 * From a link to a member card
 *
 * Mock-ups in HTML rather than SVG on purpose: these are screens made of text, and text in SVG
 * has to be placed by hand at a coordinate, which is fine until a price changes or somebody
 * reads it on a phone. These reflow.
 * ==================================================================== */
.tmp-rm__jny { border-top: 1px solid var(--line2); }
.tmp-rm__acts { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }

.tmp-rm__act-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.tmp-rm__act-tab { position: relative; text-align: left; background: none; border: 0; border-right: 1px solid var(--line2); padding: 16px 18px; cursor: pointer; font-family: var(--sans); display: grid; gap: 2px; transition: background .18s ease; }
.tmp-rm__act-tab:last-child { border-right: 0; }
.tmp-rm__act-tab:hover { background: var(--paper); }
.tmp-rm__act-tab b { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 500; }
.tmp-rm__act-tab span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tmp-rm__act-tab i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink2); line-height: 1.25; }
.tmp-rm__act-tab.is-on { background: var(--paper); }
.tmp-rm__act-tab.is-on i { color: var(--ink); }
.tmp-rm__act-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
@media (max-width: 820px) { .tmp-rm__act-tabs { grid-template-columns: repeat(2, 1fr); } .tmp-rm__act-tab i { font-size: 13px; } }

.tmp-rm__act-body { background: var(--paper); padding: 30px clamp(16px, 3vw, 34px); }
.tmp-rm__mock { display: none; align-items: center; justify-content: center; gap: clamp(14px, 2.5vw, 30px); flex-wrap: wrap; }
.tmp-rm__mock.is-on { display: flex; animation: tmp-rm-open .35s cubic-bezier(.2,.8,.2,1); }
.tmp-rm__arrow { flex: none; width: 34px; height: 2px; background: var(--line); position: relative; }
.tmp-rm__arrow::after { content: ''; position: absolute; right: -1px; top: -4px; border-left: 8px solid var(--line); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
@media (max-width: 780px) { .tmp-rm__arrow { transform: rotate(90deg); } }

/* the shared bits of a fake screen */
.tmp-rm__pane { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; width: 320px; max-width: 100%; box-shadow: 0 8px 24px rgba(15,32,41,.06); }
.tmp-rm__pane--wide { width: 400px; }
.tmp-rm__pane h4, .tmp-rm__roster h4, .tmp-rm__welcome h4 { font-family: var(--serif); font-size: 21px; margin: 0 0 14px; }
.tmp-rm__fld { display: flex; align-items: baseline; gap: 10px; border: 1px solid var(--line2); border-radius: 9px; padding: 9px 11px; margin-bottom: 8px; background: var(--paper); }
.tmp-rm__fld span { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: none; min-width: 74px; }
.tmp-rm__fld i { font-style: normal; font-size: 13.5px; color: var(--ink); }
.tmp-rm__fld--ok { border-color: rgba(45,106,79,.4); background: rgba(45,106,79,.06); }
.tmp-rm__fld--ok i { color: var(--green); font-weight: 600; }
.tmp-rm__fld--hot { border-color: var(--accent); background: rgba(88,180,229,.08); }
.tmp-rm__grid2 { display: grid; gap: 0; }

.tmp-rm__mail { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; width: 260px; max-width: 100%; }
.tmp-rm__mail-from { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tmp-rm__mail p { font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--ink); margin: 8px 0 14px; }
.tmp-rm__btn-mock { display: inline-block; background: var(--ink); color: var(--card); border-radius: 8px; padding: 10px 16px; font-size: 13.5px; font-weight: 500; }
.tmp-rm__btn-mock--full { display: block; text-align: center; margin-top: 10px; }
.tmp-rm__paid { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2); }
.tmp-rm__paid b { font-family: var(--serif); font-size: 28px; color: var(--ink); }
.tmp-rm__paid span { font-size: 13px; color: var(--muted); margin-left: 6px; }

/* the quote, which is the whole argument for the builder */
.tmp-rm__quote { background: var(--ink); color: rgba(255,255,255,.8); border-radius: 14px; padding: 20px 22px; width: 340px; max-width: 100%; }
.tmp-rm__quote-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tmp-rm__quote-say { font-family: var(--serif); font-size: 21px; line-height: 1.22; color: #fff; margin: 8px 0 14px; }
.tmp-rm__quote ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.tmp-rm__quote li { display: grid; grid-template-columns: 84px auto; gap: 2px 10px; align-items: baseline; }
.tmp-rm__quote li span { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.tmp-rm__quote li b { font-size: 17px; color: #fff; }
.tmp-rm__quote li i { grid-column: 2; font-style: normal; font-size: 12px; color: rgba(255,255,255,.55); }
.tmp-rm__quote-fine { font-size: 11.5px; color: rgba(255,255,255,.45); margin: 0; }

/* the roster and the phone */
.tmp-rm__roster { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; width: 300px; max-width: 100%; }
.tmp-rm__bar { height: 7px; border-radius: 4px; background: rgba(15,32,41,.09); overflow: hidden; }
.tmp-rm__bar span { display: block; height: 100%; background: var(--green); }
.tmp-rm__roster-n { font-size: 13px; color: var(--muted); margin: 8px 0 12px; }
.tmp-rm__roster-n b { color: var(--ink); }
.tmp-rm__roster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tmp-rm__roster li { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; border-top: 1px solid var(--line2); padding-top: 7px; }
.tmp-rm__roster em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.tmp-rm__roster em.is-ok { color: var(--green); font-weight: 600; }
.tmp-rm__roster em b { background: var(--ink); color: var(--card); border-radius: 5px; padding: 2px 7px; margin-left: 6px; font-weight: 500; }

.tmp-rm__phone { width: 268px; max-width: 100%; background: var(--ink); border-radius: 26px; padding: 12px; box-shadow: 0 14px 34px rgba(15,32,41,.16); }
.tmp-rm__phone-in { background: var(--card); border-radius: 17px; padding: 20px 18px; }
.tmp-rm__phone-brand { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--muted); }
.tmp-rm__phone-in h4 { margin: 6px 0 4px; font-size: 22px; }
.tmp-rm__phone-say { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.tmp-rm__phone-alt { font-size: 11.5px; color: var(--blue-deep); margin-top: 6px; }

/* the card */
/* The card sizes to its own content; stretching it to match the column beside it left a
   third of it empty. */
.tmp-rm__mock--card { align-items: flex-start; }
.tmp-rm__tour { width: 420px; max-width: 100%; background: linear-gradient(150deg, #13303d 0%, var(--ink) 58%); border: 1px solid rgba(88,180,229,.35); border-radius: 16px; padding: 20px 22px; color: rgba(255,255,255,.8); box-shadow: 0 16px 38px rgba(15,32,41,.22); }
.tmp-rm__tour-top { display: flex; justify-content: space-between; align-items: baseline; }
.tmp-rm__tour-k { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; color: var(--accent); }
.tmp-rm__tour-yr { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; color: rgba(255,255,255,.45); }
.tmp-rm__tour-who { display: flex; align-items: center; gap: 13px; margin: 18px 0 16px; }
.tmp-rm__tour-pic { width: 52px; height: 52px; border-radius: 50%; flex: none; background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.3) 0 34%, transparent 35%), radial-gradient(ellipse at 50% 108%, rgba(255,255,255,.3) 0 46%, transparent 47%), rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.tmp-rm__tour-who b { display: block; font-family: var(--serif); font-size: 27px; color: #fff; line-height: 1.05; }
.tmp-rm__tour-who i { font-style: normal; font-size: 12.5px; color: rgba(255,255,255,.6); }
.tmp-rm__tour-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.tmp-rm__tour-nums span { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; color: rgba(255,255,255,.45); }
.tmp-rm__tour-nums b { font-family: var(--serif); font-size: 23px; color: #fff; }
.tmp-rm__tour-note { font-size: 11px; color: rgba(255,255,255,.42); margin: 12px 0 0; line-height: 1.45; }

/* the clubs the card is good at, on the card */
.tmp-rm__tour-at { margin-top: 16px; }
.tmp-rm__tour-atk { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: rgba(255,255,255,.4); }
.tmp-rm__crests { list-style: none; display: flex; gap: 8px; margin: 9px 0 0; padding: 0; }

/*
 * A crest, not a logo. The hue comes from the course's own name so it is stable, and it is a
 * monogram on purpose — inventing a golf club's branding and presenting it as theirs is not a
 * thing to do on a page that is otherwise careful about only showing what is true.
 */
.tmp-rm__crest { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%;
	background: hsl(var(--h) 42% 30%); border: 1.5px solid hsl(var(--h) 55% 62%);
	display: grid; place-items: center; }
.tmp-rm__crest > span { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: hsl(var(--h) 70% 86%); }
.tmp-rm__crest.is-home { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(88,180,229,.28); }
.tmp-rm__crest--lg { width: 40px; height: 40px; background: hsl(var(--h) 34% 92%); border-color: hsl(var(--h) 38% 62%); }
.tmp-rm__crest--lg > span { font-size: 12.5px; color: hsl(var(--h) 45% 28%); }
.tmp-rm__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tmp-rm__welcome { width: 300px; max-width: 100%; display: flex; flex-direction: column; justify-content: center; }
.tmp-rm__welcome p { font-size: 13.5px; color: var(--muted); }
.tmp-rm__clubs { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 9px; }
.tmp-rm__clubs li { display: flex; align-items: center; gap: 11px; }
.tmp-rm__clubs b { font-size: 14px; color: var(--ink); font-weight: 600; }
.tmp-rm__clubs i { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tmp-rm__welcome-fine { font-size: 11.5px !important; color: var(--muted); margin: 0; line-height: 1.5; }

/* the words under the screens */
.tmp-rm__act-say { border-top: 1px solid var(--line); padding: 24px clamp(16px, 3vw, 34px) 28px; background: var(--card); }
.tmp-rm__act-copy { display: none; max-width: 68ch; }
.tmp-rm__act-copy.is-on { display: block; animation: tmp-rm-open .35s cubic-bezier(.2,.8,.2,1); }
.tmp-rm__act-time { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tmp-rm__act-copy h3 { margin: 6px 0 6px; }
.tmp-rm__act-more { font-size: 15px; color: var(--muted); margin: 10px 0 0; }

/* the administrator's switcher — never shown to anybody else */
.tmp-rm__peek { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--ink); color: rgba(255,255,255,.72); font-size: 12.5px; padding: 9px 16px; }
.tmp-rm__peek b { color: #fff; }
.tmp-rm__peek a { color: var(--accent); }

.tmp-rm__eg { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; margin-bottom: 10px; }

/*
 * 2.51.0: the way on to /getting-started/, under the five steps.
 *
 * A link at the end of a list of steps is the one place somebody who has just read them is
 * deciding whether to look further, so it gets a line of its own rather than being folded into
 * the prose above.
 */
.tmp-rm__onward { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line2); }
.tmp-rm__onward a { display: inline-block; font-size: 17px; font-weight: 500; color: var(--blue-deep); text-decoration: none; border-bottom: 1px solid rgba(26, 106, 150, .35); }
.tmp-rm__onward a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.tmp-rm__onward span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--muted); max-width: 62ch; }