/* Hallmark · shape: Workbench · genre: modern-minimal · theme: Dose (deal 2/3) · job: sign up · draw: 268a80 · hero: Stage · nav: edge-aligned · footer: mast · imagery: product built · signature: eight-court schedule with a visible collision · dose: white · axes: light/grotesk-sans/chromatic-green · posture: committed · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: R, removed decorative sport illustrations so the court schedule carries the page */
/* Hallmark · dismissed 46a · Dink District dashboard figures are fictional data explicitly requested by the user; no customer proof is claimed */
/* Hallmark · dismissed 3 · the pricing grid is the three plans supplied by the user; small list checkmarks are not icon tiles */
/* Hallmark · dismissed 58 · measured 87 words where the operations and supplied three-plan pricing comparison share a viewport; retaining plan limits makes the comparison useful */
/* Hallmark · hero-review: in-thread · ship after fixing the hero-copy selector ambiguity and confirming four viewport captures */
@import url('./tokens.css');
@import url('./base.css');
@import url('./common.css');
.site-header { display: flex; align-items: center; justify-content: space-between; height: 96px; gap: var(--space-lg); }
.site-header nav { display: flex; align-items: center; gap: var(--space-xl); font-size: var(--text-sm); }
.hero { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); align-items: center; gap: var(--space-2xl); min-height: calc(100svh - 96px); padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
.intro-copy h1 { font-size: clamp(3rem,5.3vw,5.1rem); line-height: 1.05; letter-spacing: -.055em; }
.intro-copy .lead { margin-top: var(--space-lg); max-width: 33ch; color: var(--color-ink-2); font-size: 19px; }
.hero-actions { display: flex; gap: var(--space-lg); align-items: center; margin-top: var(--space-xl); flex-wrap: wrap; }
.trial-terms { color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-md); }
.product-preview { background: var(--color-mint); padding: var(--space-lg); border-radius: var(--radius-panel); min-height: 548px; }
.preview-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-bottom: var(--space-lg); }
.preview-heading h2 { font-size: 25px; margin-top: var(--space-xs); letter-spacing: -.035em; }
.preview-club { font-size: var(--text-xs); font-weight: 500; color: var(--color-green-ink); }
.club-monogram { display: grid; place-items: center; border: 1px solid var(--color-green-ink); border-radius: 50%; width: 40px; height: 40px; color: var(--color-green-ink); font-size: var(--text-sm); }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); }
.mini-tag { font-size: var(--text-xs); }
.preview-times { display: grid; grid-template-columns: 65px repeat(4,minmax(0,1fr)); font-size: 11px; color: var(--color-muted); padding-block: var(--space-xs); }
.preview-lane { display: grid; grid-template-columns: 65px minmax(0,1fr); align-items: center; min-height: 43px; }
.court-label { font-size: 11px; color: var(--color-green-ink); }
.preview-track { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-2xs); height: 37px; background: repeating-linear-gradient(to right, var(--color-rule) 0 1px, transparent 1px 25%); }
.preview-book { grid-column: calc(var(--start) + 1) / span var(--span); padding: 0 var(--space-xs); display: flex; align-items: center; gap: var(--space-2xs); font-size: 10px; font-weight: 500; color: var(--color-ink-2); border-radius: 4px; overflow: clip; white-space: nowrap; }
.conflict { background: var(--color-conflict); outline: 1px solid var(--color-ink-2); outline-offset: -1px; }
.preview-book .icon { width: 14px; height: 14px; }
.preview-foot { display: flex; gap: var(--space-md); font-size: 11px; margin-top: var(--space-lg); flex-wrap: wrap; }
@media (min-width: 1600px) { .hero { min-height: 804px; } }
@media (max-width: 1100px) { .hero { gap: var(--space-xl); } .hero-actions { gap: var(--space-md); } .product-preview { padding: var(--space-md); } }
@media (max-width: 760px) { .site-header { height: 80px; } .site-header nav { display: none; } .hero { grid-template-columns: minmax(0,1fr); padding-top: var(--space-xl); gap: var(--space-2xl); } .intro-copy h1 { font-size: clamp(3rem,9vw,4.5rem); } .intro-copy .lead { max-width: 35ch; } .product-preview { min-height: auto; padding-bottom: var(--space-lg); } .preview-heading h2 { font-size: 22px; } .preview-foot { gap: var(--space-sm); } }
.club-section { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.operations { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-columns); }
.operations .lead { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-md); }
.operation-list { margin: 0; }
.operation-list>div { border-top: 1px solid var(--color-rule); padding-block: var(--space-lg); }
.operation-list>div:first-child { padding-top: 0; border-top: 0; }
.operation-list>div:last-child { padding-bottom: 0; }
.operation-list dt { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.025em; }
.operation-list dd { margin: var(--space-xs) 0 0; font-size: var(--text-md); color: var(--color-muted); max-width: 45ch; }
.pricing-section { padding-block: var(--section-gap); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--gap-columns); margin-bottom: var(--space-2xl); }
.section-heading p { font-size: var(--text-md); color: var(--color-muted); }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--gap-columns); }
.plan { display: flex; flex-direction: column; padding-block: var(--space-lg); border-top: 2px solid var(--color-rule); }
.plan:nth-child(2) { border-color: var(--color-accent); }
.plan-name { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); min-height: 32px; }
.plan-name h3 { font-size: 23px; }
.plan-name>span { color: var(--color-green-ink); font-size: var(--text-xs); }
.price { font-family: var(--font-display); font-size: 60px; font-weight: 700; letter-spacing: -.05em; line-height: 1.2; margin-top: var(--space-lg); font-variant-numeric: tabular-nums; }
.price>span { font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; letter-spacing: 0; color: var(--color-muted); margin-left: var(--space-2xs); }
.plan-scope { margin-top: var(--space-xs); }
.plan ul { list-style: none; padding: 0; margin: var(--space-xl) 0; flex: 1; }
.plan li { display: flex; gap: var(--space-sm); align-items: center; margin-top: var(--space-sm); font-size: var(--text-sm); }
.plan li .icon { width: 16px; height: 16px; color: var(--color-green-ink); }
.plan .button { width: 100%; }
.pricing-note { text-align: center; font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-lg); }
.worked-section { background: var(--color-mint); padding-block: var(--section-gap-s); }
.worked-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--gap-columns); align-items: center; }
.worked-copy .lead { font-size: var(--text-md); margin-block: var(--space-lg); }
.worked-product { background: var(--color-paper); border-radius: var(--radius-panel); padding: var(--space-xl); }
.worked-title { display: flex; gap: var(--space-sm); align-items: center; padding-bottom: var(--space-lg); }
.worked-title h3 { font-size: 20px; }
.worked-title>span { margin-left: auto; font-size: var(--text-xs); white-space: nowrap; }
.worked-row { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); gap: var(--space-md); font-size: var(--text-sm); }
.worked-row strong { font-weight: 500; }
.worked-row p { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); }
.worked-row>span { font-size: var(--text-xs); white-space: nowrap; }
.worked-resolution { display: flex; align-items: center; gap: var(--space-sm); border-top: 1px solid var(--color-rule); padding-block: var(--space-lg); font-size: var(--text-sm); color: var(--color-green-ink); }
.faq-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-columns); padding-block: var(--section-gap); }
details { border-bottom: 1px solid var(--color-rule); }
summary { cursor: pointer; font-size: 18px; padding-block: var(--space-lg); }
details:first-child summary { padding-top: 0; }
details p { color: var(--color-muted); padding-bottom: var(--space-lg); }
.site-footer { background: var(--color-paper-3); padding-block: var(--space-2xl) var(--space-xl); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.footer-top .brand { font-size: 64px; }
.footer-top .brand svg { width: 56px; height: 56px; }
.footer-top p { font-size: var(--text-md); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-xl); margin-top: var(--space-2xl); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); }
.footer-bottom nav { display: flex; gap: var(--space-lg); }
@media(max-width:760px) { .operations,.worked-layout,.faq-section { grid-template-columns: minmax(0,1fr); gap: var(--space-xl); } .section-heading { align-items: start; flex-direction: column; } .section-heading h2 { font-size: 40px; } .pricing-grid { grid-template-columns: minmax(0,1fr); } .plan { padding-bottom: var(--space-xl); } .plan ul { margin-block: var(--space-lg); } .worked-product { padding: var(--space-lg); } .worked-title { flex-wrap: wrap; } .worked-title h3 { font-size: 18px; } .worked-title>span { margin-left: 0; } .footer-top { flex-wrap: wrap; gap: var(--space-lg); } .footer-top p { flex-basis: 60%; } .footer-bottom { flex-direction: column; gap: var(--space-md); } }