/* TeeDial's graphite, emerald and cyan palette. Layouts and motion are shared
   with the existing site; this sheet owns the surrounding page surfaces. */
:root {
  color-scheme: dark;
  --paper: #080e12;
  --white: #f3f8f5;
  --ink: #edf5f0;
  --forest: #123d2e;
  --muted: #a5b8af;
  --line: #253a33;
  --sage: #101f1b;
  --lime: #70e4b0;
  --accent: #48e0a6;
  --accent-cyan: #55d7d0;
  --surface: #0e191c;
  --surface-raised: #13241f;
  --text-soft: #b5c9bf;
  --text-muted: #93aca0;
}

body {
  background: var(--paper);
  color: var(--ink);
}

::selection {
  background: #277b5e;
  color: #fff;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline-color: var(--accent-cyan);
}

.skip-link {
  background: var(--accent);
  color: #062219;
}

/* Navigation remains quiet, allowing the supplied logo to carry the color. */
.announcement {
  background: #0c211b;
  color: #a1beaf;
  border-bottom: 1px solid #17372a;
}

.announcement a {
  color: #82e7b5;
}

.status-dot {
  background: #56e1a6;
  box-shadow: 0 0 8px #43d69a38;
}

.site-header {
  background: rgb(8 14 18 / 94%);
}

.site-header.is-scrolled {
  border-color: #20362e;
}

.desktop-nav a {
  color: #b4cbbf;
}

.desktop-nav a:hover {
  color: #f2faf5;
}

.desktop-nav a::after {
  background: #57dba7;
}

.mobile-nav:not([hidden]) {
  background: #0b1817;
  border-color: #294339;
  box-shadow: 0 15px 25px #0005;
  color: #dcece3;
}

.mobile-nav a:hover {
  color: #78e6b4;
}

/* Primary actions use the emerald found in the logo's illuminated dial. */
.button {
  background: #51e0a8;
  border-color: #65e9b7;
  color: #05251a;
  box-shadow: 0 3px 16px #25bd7e0c;
}

.button:hover {
  background: #83efc1;
  border-color: #93f4cd;
  color: #05251a;
}

.button-light {
  background: #143328;
  border-color: #356b52;
  color: #c2f7dc;
  box-shadow: none;
}

.button-light:hover {
  background: #1c4937;
  border-color: #5caa80;
  color: #e0ffed;
}

.text-link {
  color: #b8d7c7;
  border-color: #49745b;
}

.text-link:hover {
  color: #86edbc;
  border-color: #70dba4;
}

/* Hero copy. Product surfaces and controls are owned by hardware.css. */
.hero-note,
.hero-signature {
  color: #98b7a5;
}

.small-line {
  background: #4a8b67;
}

.hero-description {
  color: #aabeb3;
}

.hero-signature div > span {
  color: #90a99c;
}

.signature-orbit {
  color: #56cf96;
}

.promise-strip {
  border-color: var(--line);
}

.promise-strip p {
  color: #96ad9f;
}

.promise-strip > span {
  color: #c8ddd0;
}

.promise-strip > span::before {
  background: #4bc394;
}

/* Photography keeps its natural light; the frame and captions belong to night. */
.section-note {
  color: #84cba5;
}

.course-image {
  background: #10201b;
  box-shadow: 0 0 0 1px #2b4437;
}

.course-caption {
  color: #8fa99a;
}

.course-caption > span:first-child {
  color: #cedfd4;
}

.benefits,
.sample-stats {
  border-color: var(--line);
}

.benefits svg {
  stroke: #6cd3a2;
}

.benefits p,
.experience-copy > p:not(.section-note, .sample-caption),
.app-heading > p {
  color: #a5bcad;
}

.club-selector {
  background: #0f211b;
  border-color: #2a4838;
}

.club-selector button {
  color: #a1bcab;
}

.club-selector button:hover {
  color: #e3f5e9;
  background: #172f24;
}

.club-selector button[aria-pressed="true"] {
  color: #c9ffe2;
  background: #164a33;
  box-shadow: inset 0 0 0 1px #3b8760;
}

.sample-stats > div > span,
.sample-stats small,
.sample-caption,
.app-preview-note {
  color: #96b29f;
}

.dial-demo {
  background: radial-gradient(circle at 50% 37%, #183a2b, #0b211a 66%, #071912);
  box-shadow: inset 0 0 0 1px #2a513b;
}

.demo-topline {
  color: #a5c4b1;
}

.demo-topline > span:first-child {
  color: #d8ebdc;
}

.demo-topline i {
  background: #6de6a4;
}

.demo-bottomline {
  color: #99b9a4;
}

/* App previews sit on graphite rather than separate pale cards. */
.simulation-badge {
  color: #a5d9bd;
  background: #10291f;
  border-color: #2d5b41;
}

.screen-card {
  background: #0e191c;
  border-color: #283c34;
  color: #edf5f0;
}

.screen-card:hover {
  background: #11211f;
  border-color: #438b67;
  box-shadow: 0 14px 32px #0004;
}

.screen-thumbnail {
  background: #050c10;
}

.screen-zoom {
  color: #b5f4d5;
  background: #0b261ee8;
  border-color: #609a7e8c;
}

.screen-kicker {
  color: #a3bdb1;
}

.screen-kicker > span {
  color: #71dfa8;
}

.screen-description {
  color: #acbfb5;
}

.screen-lightbox {
  color: #edf6ef;
  background: #0a1518;
  border-color: #345544;
  box-shadow: 0 28px 100px #000b;
}

.screen-lightbox::backdrop {
  background: #020709e8;
}

.lightbox-toolbar {
  border-color: #254237;
}

.lightbox-eyebrow {
  color: #a2c0af;
}

.lightbox-close,
.lightbox-navigation button {
  color: #d7f2e2;
  background: #142b22;
  border-color: #3a6550;
}

.lightbox-close:hover,
.lightbox-navigation button:hover {
  color: #edfff4;
  background: #1c4230;
  border-color: #62a47d;
}

.screen-lightbox figure > img {
  background: #040a0e;
}

.screen-lightbox figcaption,
.lightbox-navigation > span {
  color: #aac6b5;
}

.screen-lightbox figcaption a {
  color: #a5edc6;
}

/* The setup drawings retain their forms, illuminated with the brand palette. */
.setup-section {
  background: #0b1819;
  box-shadow: inset 0 1px #1e352e, inset 0 -1px #1e352e;
}

.step-number {
  color: #7fbb98;
}

.setup-steps p {
  color: #a6bdae;
}

.phone-art .mini-phone {
  background: linear-gradient(145deg, #345749, #183c2f);
  border-color: #76a68b;
}

.mini-phone::before {
  border-color: #4a7d5f;
}

.mini-phone span {
  background: #1d4635;
}

.mini-phone span::before {
  border-color: #92c5a7;
  box-shadow: 4px 5px 0 -1px #7cb396, 0 9px 0 -1px #7cb396;
}

.mini-phone i {
  background: #506e58;
  box-shadow: inset 2px 0 #84a98a;
}

.tripod,
.tripod::before,
.tripod::after {
  background: #81ac8c;
}

.scan-lines {
  border-color: #3c7859;
}

.place-art .little-puck {
  color: #b9f5cc;
  background: radial-gradient(circle, #0c291d 0 59%, #6d9b80 61% 70%, #3c6650 71%);
  box-shadow: 3px 5px #315240;
}

.golf-ball {
  background: radial-gradient(circle at 30% 30%, #f3fff6, #b1c9ba 65%, #638575);
  box-shadow: inset -2px -2px 4px #486f5a;
}

.golf-ball::after {
  background: #9bc2a5;
}

.ground-line {
  background: #426d50;
}

.distance-line {
  border-color: #477d59;
}

.distance-line::before,
.distance-line::after {
  background: #6b9c78;
}

.flight-art svg {
  fill: #78e1a3;
}

.flight-art path {
  stroke: #6fc799;
}

.flight-art .flight-ground {
  stroke: #416c50;
}

.flight-art .flight-ghost {
  stroke: #458d69;
}

/* PhantomSync's bridge keeps a distinct cyan note within the shared night. */
.engine-section {
  background: #0b1c1d;
  color: #edf7f0;
  box-shadow: inset 0 0 0 1px #26483b;
}

.engine-copy .section-note {
  color: #8bceae;
}

.engine-copy > p:not(.section-note) {
  color: #a7c5b5;
}

.engine-caption {
  color: #96b8a4;
}

.engine-orbit {
  border-color: #49b9aa70;
}

.engine-orbit.orbit-two {
  border-color: #58cfbb85;
}

.engine-orbit.orbit-three {
  border-color: #8be2bc99;
}

.engine-time {
  color: #91d7b5;
}

/* Native questions remain visibly interactive in every open/closed state. */
.questions-list details,
.questions-list details:first-child {
  border-color: #2b4437;
}

.questions-list summary {
  color: #d6e9dc;
}

.questions-list summary:hover,
.questions-list details[open] summary {
  color: #8ce9b8;
}

.questions-list summary span {
  color: #76c79b;
}

.questions-list details > p {
  color: #aac1b2;
}

.questions-list details a {
  color: #8ce5b6;
}

/* A quiet emerald finish ties the launch invitation back to the supplied mark. */
.launch-section {
  background: radial-gradient(ellipse at 50% 35%, #123c2c, #0a211b 63%, #091a17);
  box-shadow: inset 0 1px #284e38, inset 0 -1px #1b392b;
}

.launch-section::before,
.launch-section::after {
  border-color: #55bc7930;
}

.launch-mark {
  color: #8ce8ac;
  border-color: #528d60;
}

.launch-status {
  color: #8ad9a7;
}

.launch-inner > p:not(.launch-status) {
  color: #afcbb5;
}

.launch-footnote {
  color: #a0c1aa;
}

.launch-guide {
  color: #91e3b0;
}

.launch-guide:hover {
  color: #c2f8d6;
}

.footer-top p,
.footer-bottom {
  color: #95b19e;
}

.footer-top > a:last-child {
  color: #b2e4c4;
}

.footer-top > a:last-child:hover,
.footer-bottom a:hover {
  color: #85edb2;
}

.footer-bottom {
  border-color: #294432;
}

@media (max-width: 680px) {
  .benefits article,
  .setup-steps article {
    border-color: #263f31;
  }
}

/* The launch seal uses the supplied emblem instead of the former lettermark. */
.launch-mark {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
}

.launch-mark img {
  display: block;
  width: 100%;
  height: 100%;
}