/* GymCams: shared styles. Chalk paper, rubber-floor black, one teal from the barbell mark.
   Status colors (overdue, due soon, done) belong to the app screens; they never decorate the page. */
:root {
  --chalk:#F4F3EE; --chalk-2:#EAE8E0; --card:#FFFFFF; --ink:#12161A; --ink-2:#2A3138; --soft:#4B5560; --mute:#5E6872;
  --line:#DDDBD3; --line-2:#ECEAE3; --teal:#0B6E5F; --teal-d:#08574B; --teal-l:#DDF1EB; --mint:#5FD4B5;
  --rubber:#16191C; --rubber-2:#20252A; --rubber-3:#2C333A; --on-dark:#C9D1D6;
  --red:#C2362B; --red-l:#FCE8E5; --amber:#9A5B00; --amber-dot:#E59A1A; --amber-l:#FFF1D6; --green:#1E7F4A; --green-l:#E1F3E8;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--chalk); color:var(--ink); font:17px/1.6 'Hanken Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; display:block; }
h1, h2, h3 { margin:0; }
h1, h2, .h { font-family:'Cabinet Grotesk',sans-serif; font-weight:800; letter-spacing:-.025em; line-height:1.02; }
h1 { font-size:clamp(38px,5.2vw,70px); }
h2 { font-size:clamp(28px,3.4vw,44px); }
h3 { font-family:'Cabinet Grotesk',sans-serif; font-size:21px; font-weight:800; line-height:1.2; letter-spacing:-.01em; }
p { margin:0 0 1em; }
.num, .mono { font-family:'Martian Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.lede { font-size:20px; color:var(--soft); max-width:36em; }
.small { font-size:14px; color:var(--mute); }
:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
.top :focus-visible, .foot :focus-visible, .dark :focus-visible { outline-color:var(--mint); }
.skip { position:absolute; left:-999px; top:8px; background:var(--card); padding:8px 12px; z-index:20; }
.skip:focus { left:8px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* header */
.top { background:rgba(244,243,238,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.top .wrap { display:flex; align-items:center; gap:24px; height:70px; }
.logo { display:flex; text-decoration:none; color:var(--ink); flex:none; }
.logo svg { height:34px; width:auto; display:block; }
.top nav { display:flex; gap:20px; margin-left:auto; font-size:15px; font-weight:600; }
.top nav a { text-decoration:none; color:var(--ink-2); padding:6px 0; border-bottom:2px solid transparent; }
.top nav a:hover { color:var(--teal); }
.top nav a[aria-current] { color:var(--ink); border-color:var(--teal); }
.btn { display:inline-block; text-decoration:none; font-weight:700; font-size:15px; padding:12px 20px; border-radius:8px; background:var(--ink); color:#fff; border:2px solid var(--ink); cursor:pointer; font-family:inherit; line-height:1.2; }
.btn:hover { background:var(--ink-2); border-color:var(--ink-2); }
.btn.go { background:var(--teal); border-color:var(--teal); color:#fff; }
.btn.go:hover { background:var(--teal-d); border-color:var(--teal-d); }
.btn.line { background:transparent; color:inherit; border-color:currentColor; }
.btn.line:hover { background:rgba(18,22,26,.05); }
.dark .btn.line:hover { background:rgba(255,255,255,.08); }
.btns { display:flex; gap:12px; flex-wrap:wrap; }
.menu-toggle { display:none; margin-left:auto; background:none; border:2px solid var(--ink); color:var(--ink); border-radius:8px; padding:8px 12px; font:700 14px 'Hanken Grotesk',sans-serif; }

/* sections */
.hero { padding:64px 0 52px; }
.hero .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero p.lede { margin:20px 0 28px; }
.kicker { display:inline-flex; align-items:center; gap:8px; font:600 14px/1 'Hanken Grotesk',sans-serif; color:var(--teal); margin-bottom:18px; }
.kicker::before { content:''; width:18px; height:4px; border-radius:2px; background:var(--teal); }
.dark .kicker { color:var(--mint); } .dark .kicker::before { background:var(--mint); }
.photo { border-radius:14px; overflow:hidden; margin:0; background:var(--chalk-2); }
.photo img { width:100%; height:100%; object-fit:cover; }
.sec { padding:84px 0; }
.sec.white { background:var(--card); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.sec.dark, .dark { background:var(--rubber); color:#F1F3F4; }
.sec.dark .lede, .dark .lede { color:var(--on-dark); }
.sec h2 { margin-bottom:14px; }
.sec .lede { margin-bottom:36px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px; }
.dark .card { background:var(--rubber-2); border-color:var(--rubber-3); }
.card h3 { margin-bottom:8px; }
.card p { margin:0; color:var(--soft); font-size:16px; }
.dark .card p { color:var(--on-dark); }
.plate { border-left:4px solid var(--teal); padding:2px 0 2px 18px; }
.plate h3 { margin-bottom:6px; } .plate p { margin:0; color:var(--soft); font-size:16px; }
.dark .plate { border-color:var(--mint); } .dark .plate p { color:var(--on-dark); }
.list { list-style:none; margin:0; padding:0; }
.list li { padding:10px 0 10px 30px; border-top:1px solid var(--line); position:relative; }
.list li::before { content:''; position:absolute; left:2px; top:17px; width:14px; height:8px; border-left:3px solid var(--teal); border-bottom:3px solid var(--teal); transform:rotate(-45deg); }
.dark .list li { border-color:var(--rubber-3); } .dark .list li::before { border-color:var(--mint); }
.steps { list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li { counter-increment:s; display:grid; grid-template-columns:60px 1fr; gap:18px; padding:24px 0; border-top:1px solid var(--line); }
.steps li::before { content:counter(s); font:800 34px/1 'Cabinet Grotesk',sans-serif; color:var(--teal); padding-top:2px; }
.steps h3 { margin-bottom:6px; } .steps p { margin:0; color:var(--soft); }
.tag { display:inline-block; white-space:nowrap; font:600 12px/1 'Hanken Grotesk',sans-serif; padding:6px 9px; border-radius:20px; background:var(--chalk-2); color:var(--ink-2); vertical-align:middle; }
.tag.works { background:var(--green-l); color:var(--green); }
.tag.plan { background:var(--amber-l); color:var(--amber); }
.tbl { width:100%; border-collapse:collapse; font-size:15px; background:var(--card); }
.tbl th, .tbl td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.tbl th { font-weight:700; background:var(--chalk); font-size:14px; }
.tblwrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.prose { max-width:46em; }
.prose h1 { margin-bottom:20px; }
.prose h2 { font-size:26px; margin:38px 0 10px; }
.prose ul, .prose ol { padding-left:22px; } .prose li { margin:6px 0; }
.prose p, .prose li { color:var(--ink-2); }
details { border-top:1px solid var(--line); padding:16px 0; }
details:last-of-type { border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:700; font-size:18px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; font:800 24px/1 'Cabinet Grotesk',sans-serif; color:var(--teal); flex:none; }
details[open] summary::after { content:'–'; }
details p { margin:10px 0 0; color:var(--ink-2); max-width:44em; }
.cta { background:var(--teal); color:#fff; border-radius:16px; padding:44px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; position:relative; overflow:hidden; }
.cta::after { content:''; position:absolute; right:-40px; bottom:-60px; width:300px; height:220px; opacity:.12; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='%23fff'%3E%3Crect x='8' y='114' width='240' height='28' rx='14'/%3E%3Crect x='34' y='92' width='30' height='72' rx='9'/%3E%3Crect x='74' y='72' width='30' height='112' rx='9'/%3E%3Crect x='114' y='50' width='30' height='156' rx='9'/%3E%3Crect x='154' y='24' width='34' height='208' rx='10'/%3E%3Crect x='198' y='100' width='18' height='56' rx='5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; pointer-events:none; }
.cta h2 { margin-bottom:8px; } .cta p { margin:0; color:#D9F0EA; max-width:40em; }
.cta .btn { background:#fff; border-color:#fff; color:var(--teal-d); position:relative; z-index:1; }
.cta .btn:hover { background:var(--chalk); border-color:var(--chalk); }
.cta .btn.line { background:transparent; color:#fff; border-color:#fff; }
.status { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:10px; padding:18px 20px; }
.status b { font:700 14px 'Hanken Grotesk',sans-serif; color:var(--teal); padding-top:2px; white-space:nowrap; }
.status p { margin:0; color:var(--ink-2); }

/* the demo frame shared by the three app demos */
.app { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 40px 80px -50px rgba(18,22,26,.45); overflow:hidden; }
.app-bar { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-2); background:var(--chalk); font-size:14px; }
.app-bar b { font-weight:700; } .app-bar .sp { margin-left:auto; }
.demo-badge { font:600 11px/1 'Martian Mono',monospace; text-transform:uppercase; letter-spacing:.06em; background:var(--ink); color:#fff; padding:6px 8px; border-radius:5px; }
.dark .app { border-color:var(--rubber-3); }

/* forms (pilot and contact): they open the visitor's email app */
.form { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.form label, .form legend { display:block; font-weight:700; font-size:15px; margin-bottom:6px; padding:0; }
.form input:not([type=checkbox]), .form select, .form textarea { width:100%; font:16px 'Hanken Grotesk',sans-serif; color:var(--ink); border:1.5px solid var(--line); border-radius:8px; padding:11px 12px; background:var(--card); }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(11,110,95,.18); }
.form .full { grid-column:1 / -1; }
.form .sub { grid-column:1 / -1; font:800 18px 'Cabinet Grotesk',sans-serif; margin:6px 0 -4px; padding-top:14px; border-top:1px solid var(--line-2); }
.form .sub:first-child { border-top:0; padding-top:0; margin-top:0; }
.form fieldset { border:0; margin:0; padding:0; min-width:0; }
.checks { display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; }
.checks label { font-weight:400; display:flex; gap:10px; align-items:flex-start; margin:0; cursor:pointer; }
.checks input { width:18px; height:18px; margin-top:3px; accent-color:var(--teal); flex:none; }
.form textarea { min-height:110px; resize:vertical; }
.form .err { color:var(--red); font-size:14px; min-height:20px; margin:0 0 8px; }
.ways { display:grid; gap:14px; align-content:start; }
.ways .card p { margin:0; } .ways .card a { font-weight:700; text-decoration:none; border-bottom:2px solid var(--teal); }
.cgrid { display:grid; grid-template-columns:.75fr 1.25fr; gap:32px; align-items:start; }
@media (max-width:980px) { .cgrid { grid-template-columns:1fr; } }
@media (max-width:760px) { .form { grid-template-columns:1fr; padding:20px; } .checks { grid-template-columns:1fr; } }

/* footer */
.foot { background:var(--rubber); color:#A9B3BA; padding:60px 0 36px; font-size:15px; }
.foot-g { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; }
.foot .logo { margin-bottom:16px; color:#fff; } .foot .logo svg { height:32px; }
.foot-about p { margin:0 0 10px; max-width:30em; }
.foot-h { color:#fff; font-weight:700; margin:0 0 10px; }
.foot-g a { text-decoration:none; } .foot-g a:hover { color:#fff; }
.foot-g div > a { display:block; margin:6px 0; }
.foot .fine { border-top:1px solid var(--rubber-3); margin-top:36px; padding-top:18px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; }
.foot .fine a { text-decoration:underline; text-underline-offset:2px; }

@media (max-width:1060px) { .top nav { gap:14px; font-size:14px; } }
@media (max-width:980px) {
  .hero .wrap, .grid2 { grid-template-columns:1fr; } .hero .wrap { gap:30px; }
  .grid3 { grid-template-columns:1fr 1fr; } .grid4 { grid-template-columns:1fr 1fr; }
  .foot-g { grid-template-columns:1fr 1fr; }
  .menu-toggle { display:block; }
  .top nav { display:none; position:absolute; top:70px; left:0; right:0; background:var(--chalk); flex-direction:column; gap:0; padding:6px 24px 16px; border-bottom:1px solid var(--line); font-size:16px; }
  .top nav.open { display:flex; }
  .top nav a { padding:12px 0; border-bottom:1px solid var(--line); }
  .top .cta-head { display:none; }
  .cta { grid-template-columns:1fr; padding:30px; }
}
@media (max-width:620px) {
  body { font-size:16px; } .wrap { padding:0 16px; }
  .grid3, .grid4 { grid-template-columns:1fr; } .sec { padding:56px 0; } .hero { padding:40px 0 36px; }
  .foot-g { grid-template-columns:1fr; } .lede { font-size:18px; }
  .steps li { grid-template-columns:40px 1fr; gap:12px; }
  .top nav { padding:6px 16px 16px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@media print {
  .top, .foot, .skip, .no-print { display:none !important; }
  body { background:#fff; }
}