:root {
	--paper: #F5F2EA;
	--paper-2: #ECE7DA;
	--white: #FFFFFF;
	--ink: #15335E;
	--text: #24344F;
	--ink-soft: #4A5B78;
	--line: #D8D1BF;
	--coral: #FF6B45;
	--coral-text: #B83A14; /* coral for text on paper: 5:1 (the brand coral is 2.8:1) */
	--on-coral: #0F2444;   /* text on coral fills: 5.5:1 */
	--amber: #F7D9A8;
	--gutter: 120px;
	--col: calc( ( 100% - var(--gutter) ) / 4 );
	--mono: 'JetBrains Mono', ui-monospace, monospace;
	--sans: 'Archivo', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.6 var(--sans); font-variation-settings: 'wdth' 100; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
b, strong { color: var(--ink); }

/* The day sheet: an hour gutter and four court columns run behind the page. */
.sheet { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.sheet::before {
	content: ''; position: absolute; inset: 0 32px; pointer-events: none; z-index: 0;
	background:
		linear-gradient( var(--line), var(--line) ) var(--gutter) 0 / 1px 100% no-repeat,
		repeating-linear-gradient( 90deg, transparent 0 calc( var(--col) - 1px ), color-mix( in srgb, var(--line) 60%, transparent ) calc( var(--col) - 1px ) var(--col) ) var(--gutter) 0 / calc( 100% - var(--gutter) ) 100% no-repeat;
}
.sheet > * { position: relative; z-index: 1; }

/* Top bar */
.bar { display: flex; align-items: center; gap: 26px; height: 76px; border-bottom: 1px solid var(--line); background: color-mix( in srgb, var(--paper) 94%, transparent ); backdrop-filter: blur( 8px ); position: sticky; top: 0; z-index: 40; margin: 0 -32px; padding: 0 32px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-variation-settings: 'wdth' 118; font-size: 21px; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand img { width: 32px; height: 32px; }
.bar nav { display: flex; gap: 24px; font-size: 15px; font-weight: 500; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 6px; font: 700 15.5px var(--sans); text-decoration: none; border: 2px solid var(--ink); color: var(--ink); background: var(--white); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate( -2px, -2px ); box-shadow: 4px 4px 0 var(--ink); }
.btn.primary { background: var(--coral); border-color: var(--coral); color: var(--on-coral); }
.btn.small { min-height: 42px; padding: 0 16px; font-size: 14.5px; }

/* An hour row: the time and section name in the gutter, content across the courts. */
.hour { display: grid; grid-template-columns: var(--gutter) repeat( 4, 1fr ); border-top: 1px solid var(--line); padding: 80px 0; }
.t { grid-column: 1; font: 600 13px/1.45 var(--mono); color: var(--ink-soft); padding: 6px 12px 0 0; letter-spacing: .02em; }
.t b { display: block; color: var(--ink); font-size: 15px; }
.label { font: 600 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--coral-text); margin: 0 0 14px; }
h1, h2, h3 { font-family: var(--sans); color: var(--ink); margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp( 40px, 4.5vw, 64px ); font-weight: 850; font-variation-settings: 'wdth' 118; line-height: 1; }
h2 { font-size: clamp( 32px, 3.6vw, 50px ); font-weight: 850; font-variation-settings: 'wdth' 118; line-height: 1.04; }
h3 { font-size: clamp( 26px, 2.5vw, 36px ); font-weight: 800; font-variation-settings: 'wdth' 114; line-height: 1.1; }
.lead { font-size: 20px; color: var(--ink-soft); max-width: 36em; margin: 18px 0 0; }
.c2-3 { grid-column: 2 / span 2; padding: 0 32px 0 8px; }
.c2-4 { grid-column: 2 / span 3; padding: 0 8px; }
.c2-5 { grid-column: 2 / span 4; padding: 0 8px; }
.c4-5 { grid-column: 4 / span 2; padding: 0 8px; }

/* Booking blocks, styled after the plugin's calendar. */
.block { border-radius: 8px; padding: 20px 22px; border: 1.5px solid var(--ink); background: var(--white); }
.block .when { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 10px; color: var(--ink-soft); }
.block.coral { background: var(--coral); border-color: var(--coral); color: var(--on-coral); }
.block.coral .when, .block.coral b { color: var(--on-coral); }
.block.hatched { background: repeating-linear-gradient( -45deg, var(--paper-2) 0 10px, #E2DCCB 10px 20px ); border-color: #CFC7B2; color: var(--text); }
.block.navy { background: var(--ink); border-color: var(--ink); color: #DCE4F0; }
.block.navy .when { color: #A9BBD6; }
.block.navy b, .block.navy h3 { color: #fff; }

/* Hero */
.hero { padding: 64px 0 72px; align-items: start; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero .nocard { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font: 500 13px var(--mono); color: var(--ink-soft); }
.trust span::before { content: '✓ '; color: var(--coral-text); font-weight: 700; }
.hero .card { grid-column: 4 / span 2; margin: 22px 8px 0 8px; }
.hero .card .block { padding: 0; overflow: hidden; box-shadow: 10px 10px 0 var(--ink); }
.hero .card .when { margin: 0; padding: 11px 16px; background: var(--coral); color: var(--on-coral); }
.shot { display: block; width: 100%; height: auto; background: #fff; }

/* Made for */
.who { padding: 40px 0; }
.who .block { grid-column: span 1; margin: 0 8px; }
.who .block b { display: block; font-size: 17px; }
.who .block p { margin: 4px 0 0; font-size: 15px; color: var(--ink-soft); }

/* Problems: each pain is a blocked slot; the answer is booked. */
.pains { grid-column: 3 / span 3; display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 16px; margin: 40px 8px 0; }
.pains .pair { display: grid; gap: 10px; align-content: start; }
.pains .pair:nth-child( 2 ) { margin-top: 40px; }
.pains .pair:nth-child( 3 ) { margin-top: 80px; }
.pains .q { font: 700 18px/1.35 var(--sans); font-variation-settings: 'wdth' 106; color: var(--ink); }
.pains .a { font-size: 15.5px; }
.head-left { grid-column: 2 / span 1; padding: 0 16px 0 8px; align-self: end; font-size: 15px; color: var(--ink-soft); }

/* Steps */
.steps { grid-column: 3 / span 3; display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 16px; margin: 40px 8px 0; }
.steps .block p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }
.steps .block b { display: block; font-size: 19px; font-variation-settings: 'wdth' 110; margin-bottom: 6px; }

/* Features: a sticky index in the first court column, the features across the other three. */
.features { padding-top: 80px; padding-bottom: 40px; row-gap: 0; }
.features > .intro { grid-column: 2 / span 4; padding: 0 8px; margin-bottom: 56px; }
.index { grid-column: 2; grid-row: 2 / span 12; align-self: start; position: sticky; top: 100px; padding: 0 20px 0 8px; font-size: 14.5px; }
.index .group { font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 6px; }
.index .group:first-child { margin-top: 0; }
.index a { display: block; padding: 6px 10px; margin-left: -10px; border-radius: 6px; text-decoration: none; border-left: 3px solid transparent; }
.index a:hover { background: var(--paper-2); }
.index a.on { background: var(--white); color: var(--ink); font-weight: 600; border-left-color: var(--coral); border-radius: 0 6px 6px 0; box-shadow: 0 1px 0 var(--line); }
.index .cta { margin-top: 20px; }
.index .cta .btn { display: flex; margin: 0; padding: 0 14px; border: 2px solid var(--coral); border-radius: 6px; }
.feature { display: contents; }
.feature > .t { padding-top: 74px; border-top: 1px solid var(--line); }
.feature > .t:first-of-type { }
.feature > .content { grid-column: 3 / span 3; padding: 70px 8px 72px; border-top: 1px solid var(--line); }
.feature .tag { font: 600 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--coral-text); margin: 0 0 10px; }
.feature .before { margin: 20px 0 0; max-width: 46em; }
.feature .before .when { margin-bottom: 6px; }
.feature .before p { margin: 0; font-size: 17px; }
.feature .body { margin: 18px 0 0; font-size: 17px; max-width: 46em; }
.feature ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; border-top: 1px solid var(--line); max-width: 820px; }
.feature li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.feature li span { font: 600 12px var(--mono); color: var(--coral-text); padding-top: 3px; }
.feature .outcome { margin: 22px 0 0; max-width: 820px; }
.feature .outcome p { margin: 0; font-size: 16.5px; }
.frame { border: 1.5px solid var(--ink); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 8px 8px 0 color-mix( in srgb, var(--ink) 14%, transparent ); margin-top: 30px; }
.frame .cap { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px; border-bottom: 1.5px solid var(--ink); display: flex; justify-content: space-between; gap: 12px; background: var(--paper); color: var(--ink); }
.frame svg, .frame > img { display: block; width: 100%; height: auto; }
.twin { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
.twin .frame { margin-top: 30px; }

/* Why ManageCourt */
.why .cols { grid-column: 2 / span 4; display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 16px; margin: 40px 8px 0; }
.why .big { font: 900 46px/1 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -0.03em; margin: 2px 0 14px; color: var(--ink); }
.why .block.coral .big { color: var(--on-coral); }
.why .block h3 { font-size: 22px; margin-bottom: 8px; }
.why .block p { margin: 0; font-size: 15.5px; }
.why .compare { grid-column: 2 / span 4; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 8px 0; }
.why .compare p { margin: 0; font-size: 15.5px; }
.why .legend { grid-column: 2 / span 4; padding: 0 8px; margin-top: 14px; font: 500 12.5px var(--mono); color: var(--ink-soft); }

/* Plan */
.plan .block.navy { grid-column: 2 / span 4; margin: 0 8px; padding: 0; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; }
.plan .main { padding: 40px; }
.plan .price { font: 900 76px/.9 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -0.04em; color: #fff; margin: 6px 0 8px; }
.plan .price small { font-size: 18px; font-weight: 600; letter-spacing: 0; font-variation-settings: 'wdth' 100; color: #A9BBD6; }
.plan .fine { font: 500 12.5px var(--mono); color: #A9BBD6; margin: 6px 0 0; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 0; }
.plan li { padding: 9px 0; border-bottom: 1px solid rgba( 255, 255, 255, .14 ); font-size: 15.5px; }
.plan li::before { content: '✓'; color: var(--coral); font-weight: 800; margin-right: 10px; }
.plan .btn { margin-top: 24px; width: 100%; }
.plan .trial { background: rgba( 255, 255, 255, .05 ); border-left: 1px solid rgba( 255, 255, 255, .14 ); padding: 40px; }
.plan .trial h3 { font-size: 24px; margin-bottom: 18px; }
.plan ol { list-style: none; padding: 0; margin: 0; }
.plan ol li { border: 0; padding: 0 0 18px; display: grid; grid-template-columns: 58px 1fr; gap: 10px; }
.plan ol li::before { content: none; }
.plan ol li span { font: 600 12.5px var(--mono); color: var(--coral); padding-top: 3px; }
.plan ol li b { display: block; color: #fff; }

/* FAQ */
.faq .qs { grid-column: 2 / span 4; margin: 36px 8px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.faq details { border-top: 1.5px solid var(--ink); padding: 18px 0 20px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font: 700 18.5px/1.35 var(--sans); font-variation-settings: 'wdth' 108; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 600 22px var(--mono); color: var(--coral-text); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 10px 0 0; color: var(--text); font-size: 16px; }

/* Last call */
.last .block.coral { grid-column: 2 / span 4; margin: 0 8px; padding: 48px; display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.last h2 { color: var(--on-coral); max-width: 14em; }
.last p { margin: 12px 0 0; font-size: 18px; }
.last .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.last .btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.last .btn:not(.primary) { border-color: var(--on-coral); background: transparent; color: var(--on-coral); }

/* Lights out */
.foot { padding: 72px 0 40px; }
.foot .name { grid-column: 2 / span 4; padding: 0 4px; font: 900 clamp( 36px, 10.5vw, 122px )/.85 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -0.045em; color: var(--ink); }
.foot .cols { grid-column: 2 / span 4; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; margin-top: 40px; padding: 0 8px; font-size: 15px; }
.foot .cols b { display: block; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.foot .cols a { display: block; text-decoration: none; padding: 3px 0; }
.foot .cols a:hover { text-decoration: underline; text-decoration-color: var(--coral); }
.foot .legal { grid-column: 2 / span 4; padding: 18px 8px 0; margin-top: 32px; border-top: 1px solid var(--line); font: 500 12px var(--mono); color: var(--ink-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* The clock: the club's day follows your scroll, 07:00 at the top to 22:00 at the bottom. */
.clock { position: fixed; left: max( 32px, calc( 50% - 660px + 32px ) ); bottom: 28px; z-index: 30; font: 600 13px var(--mono); background: var(--coral); color: var(--on-coral); padding: 5px 9px; border-radius: 4px; letter-spacing: .04em; }

@media ( prefers-reduced-motion: no-preference ) {
	html { scroll-behavior: smooth; }
	.rise { animation: rise .7s cubic-bezier( .2, .7, .2, 1 ) both; }
	.d1 { animation-delay: .06s; } .d2 { animation-delay: .14s; } .d3 { animation-delay: .24s; } .d4 { animation-delay: .34s; }
	@keyframes rise { from { opacity: 0; transform: translateY( 16px ); } }
}

/* Phones and tablets: the gutter becomes a label above each section; the index becomes chips. */
@media ( max-width: 980px ) {
	:root { --gutter: 0px; }
	html { scroll-padding-top: 132px; }
	.sheet { padding: 0 16px; }
	.sheet::before { display: none; }
	.bar { margin: 0 -16px; padding: 0 16px; height: 64px; gap: 12px; }
	.bar nav, .bar .btn:not(.primary) { display: none; }
	.brand { font-size: 19px; }
	.hour, .features { display: block; padding: 52px 0; }
	.t { display: block; padding: 0 0 14px; }
	.t b { display: inline; margin-right: 8px; }
	.c2-3, .c2-4, .c2-5, .c4-5, .head-left { padding: 0; }
	.head-left { margin-top: 14px; }
	.hero .card { margin: 36px 0 0; }
	.who .block { margin: 0 0 10px; }
	.pains, .steps, .why .cols, .why .compare, .faq .qs { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; }
	.pains .pair:nth-child( n ) { margin-top: 0; }
	.pains .pair { margin-bottom: 8px; }
	.features > .intro { padding: 0; margin-bottom: 18px; }
	.index { position: sticky; top: 64px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 10px 16px; background: color-mix( in srgb, var(--paper) 96%, transparent ); border-bottom: 1px solid var(--line); scrollbar-width: none; }
	.index .group, .index .cta { display: none; }
	.index a { flex: none; margin: 0; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; font-size: 14px; background: var(--white); }
	.index a.on { border-radius: 999px; border-color: var(--ink); box-shadow: none; }
	.feature { display: block; }
	.feature > .t { padding-top: 48px; }
	.feature > .content { padding: 0 0 52px; border-top: 0; }
	.feature ul, .twin { grid-template-columns: 1fr; }
	.plan .block.navy { grid-template-columns: 1fr; margin: 0; }
	.plan .main, .plan .trial { padding: 28px 22px; }
	.plan .trial { border-left: 0; border-top: 1px solid rgba( 255, 255, 255, .14 ); }
	.plan .price { font-size: 60px; }
	.last .block.coral { margin: 0; padding: 30px 22px; }
	.foot .name, .foot .legal { padding-left: 0; padding-right: 0; }
	.foot .cols { grid-template-columns: 1fr 1fr; padding: 0; }
	.clock { display: none; }
}

/* ---- Site pages (beyond the home page) ---- */
.bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--coral); text-decoration-thickness: 2px; color: var(--ink); font-weight: 600; }
.foot .about { margin: 0; color: var(--ink-soft); max-width: 22em; }
.index .all { display: block; margin-top: 12px; font: 600 12.5px var(--mono); color: var(--coral-text); border: 0; }
.lead a, .body a, .prose a, .card a.more, .doclist a { color: var(--ink); text-decoration-color: var(--coral); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Page hero: a shorter first section for inner pages. */
.page-hero { padding: 64px 0 56px; }
.page-hero h1 { font-size: clamp( 38px, 4.4vw, 62px ); max-width: 15em; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jump a { font: 600 13px var(--mono); padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--white); text-decoration: none; color: var(--ink); }
.jump a:hover { background: var(--ink); color: #fff; }

/* Feature cards */
.cards { grid-column: 2 / span 4; display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 16px; margin: 36px 8px 0; }
.cards.two { grid-template-columns: repeat( 2, 1fr ); }
.card { display: flex; flex-direction: column; }
.card h4 { margin: 0 0 6px; font: 750 19px/1.25 var(--sans); font-variation-settings: 'wdth' 110; color: var(--ink); letter-spacing: -0.01em; }
.card p { margin: 0; font-size: 15.5px; }
.card a.more { margin-top: auto; padding-top: 14px; font: 600 12.5px var(--mono); }
.card.wide { grid-column: span 2; }
.media-row { grid-column: 2 / span 4; display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin: 0 8px; align-items: start; }

/* Commission calculator */
.calc { grid-column: 2 / span 4; margin: 36px 8px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc .inputs { display: grid; gap: 16px; align-content: start; }
.field { display: grid; gap: 6px; }
.field label { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea { font: 500 17px var(--sans); color: var(--ink); background: var(--white); border: 1.5px solid var(--ink); border-radius: 6px; padding: 11px 13px; width: 100%; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid color-mix( in srgb, var(--coral) 55%, transparent ); outline-offset: 1px; }
.field .hint { font-size: 13.5px; color: var(--ink-soft); }
.calc .result .big { font: 900 clamp( 44px, 5vw, 72px )/1 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -0.03em; color: var(--on-coral); margin: 6px 0 10px; }
.calc .result p { margin: 0 0 8px; }
.calc .vs { margin-top: 18px; padding-top: 16px; border-top: 1.5px solid color-mix( in srgb, var(--on-coral) 30%, transparent ); }

/* Tour (demo page) */
.tour { grid-column: 2 / span 4; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 8px 0; }
.tour .block { display: grid; gap: 8px; align-content: start; }
.tour h4 { margin: 0; font: 750 20px/1.25 var(--sans); font-variation-settings: 'wdth' 110; color: var(--ink); }
.tour p { margin: 0; font-size: 15.5px; }
.tour .frame { margin-top: 10px; box-shadow: 5px 5px 0 color-mix( in srgb, var(--ink) 12%, transparent ); }
.tour .frame img, .tour .frame svg { max-height: 260px; object-fit: cover; object-position: top left; }

/* Docs list */
.doclist { grid-column: 2 / span 4; margin: 28px 8px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.doclist .group { grid-column: 1 / -1; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--coral-text); margin: 28px 0 4px; }
.doclist .group:first-child { margin-top: 0; }
.doclist a.row { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; }
.doclist a.row span { font: 600 12.5px var(--mono); color: var(--ink-soft); padding-top: 3px; }
.doclist a.row b { display: block; font-size: 17px; font-variation-settings: 'wdth' 108; }
.doclist a.row i { font-style: normal; display: block; font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
.doclist a.row:hover b { text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 4px; }

/* FAQ page: groups */
.faq-group .qs { grid-template-columns: 1fr; max-width: 900px; }

/* Contact form */
.form { grid-column: 2 / span 3; margin: 36px 8px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .full { grid-column: 1 / -1; }
.form .note { font-size: 14px; color: var(--ink-soft); margin: 0; }
.side { grid-column: 5; margin: 36px 8px 0; display: grid; gap: 16px; align-content: start; }
.side p { margin: 0; font-size: 15.5px; }

/* Legal placeholders */
.prose { grid-column: 2 / span 3; padding: 0 8px; max-width: 48em; }
.prose h3 { font-size: 24px; margin: 34px 0 8px; }
.prose p, .prose li { font-size: 16.5px; }
.prose ul { padding-left: 20px; }
.draft { grid-column: 2 / span 4; margin: 0 8px 28px; }

@media ( max-width: 980px ) {
	.page-hero { padding: 44px 0 36px; }
	.cards, .cards.two, .calc, .tour, .doclist, .form, .media-row { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; }
	.card.wide { grid-column: auto; }
	.side { margin: 24px 0 0; }
	.prose, .draft { padding: 0; margin-left: 0; margin-right: 0; }
	.form .full { grid-column: auto; }
}

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 24px; font-size: 15.5px; }
.ticks li::before { content: '✓'; position: absolute; left: 0; color: var(--coral-text); font-weight: 800; }
.nocard { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-soft); }
code { font: 500 .9em var(--mono); background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }

/* Plan: three ways to pay for the same plan. */
.prices { display: grid; gap: 8px; margin: 10px 0 10px; }
.prices .opt { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px; padding: 12px 16px; border: 1px solid rgba( 255, 255, 255, .2 ); border-radius: 6px; }
.prices .k { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #C4D2E6; }
.prices .v { font: 900 36px/1 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -0.03em; color: #fff; }
.prices .u { font-size: 14px; color: #C4D2E6; min-width: 4.2em; }
.prices .opt.best { border-color: var(--coral); background: rgba( 255, 107, 69, .12 ); }
.prices .opt.best .k { color: #FFC2B1; }
@media ( max-width: 980px ) { .prices .v { font-size: 30px; } }