/* Timeback Solutions brand refresh - August 2026 */
:root {
  --bg: #f6f9fd;
  --bg-2: #eaf1f9;
  --ink: #081f3e;
  --ink-2: #12345f;
  --ink-soft: #53677f;
  --line: #081f3e1a;
  --line-2: #081f3e0d;
  --accent: #0673f2;
  --accent-2: #045fc9;
  --live: #0be0d5;
  --frost: #c5ddfb;
  --pine: #0b7080;
  --coral: #fa4f2f;
  --white: #ffffff;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --font-serif: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background:
    radial-gradient(circle at 92% 8%, #0673f20d 0 18rem, transparent 36rem),
    var(--bg);
}

::selection { background: var(--accent); color: var(--white); }

.italic {
  color: var(--accent);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: inherit;
}

.eyebrow { color: var(--accent); font-weight: 600; }
.eyebrow::before { background: var(--live); box-shadow: 0 0 0 4px #0be0d526; }

/* Official visual mark replaces the retired clock icon. */
.brand { gap: 11px; }
.brand > svg { display: none; }
.brand::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: url("assets/timeback-mark.svg") center / contain no-repeat;
}
.brand .dot { display: none; }
.brand .light { font-weight: 500; color: inherit; }

.nav { color: var(--white); background: #081f3e; }
.nav.scrolled {
  background: #081f3e;
  border-bottom-color: #ffffff1f;
  box-shadow: 0 14px 42px #020b1730;
}
.nav .brand { color: var(--white); font-weight: 650; }
.nav .brand .light { color: var(--white); }
.nav .brand::before { filter: drop-shadow(0 0 12px #0673f266); }
.brand.official-brand::before { display: none; }
.official-brand {
  width: 220px;
  flex: 0 0 220px;
  line-height: 0;
}
.official-logo { display: block; width: 100%; height: auto; }
.nav-links {
  background: #ffffff0e;
  border-color: #ffffff1a;
}
.nav-links a { color: #e5effb; }
.nav-links a:hover { background: #ffffff18; color: var(--white); }

.btn { border-radius: 8px; }
.btn-accent {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 10px 26px -12px #0673f2cc, 0 1px 0 #ffffff42 inset;
}
.btn-accent:hover { background: var(--accent-2); }
.btn-primary { background: var(--ink); color: var(--white); }
.btn-outline-gold { border-color: var(--accent); }
.btn-outline-gold:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* Hero mirrors the guide's dark, high-contrast digital identity. */
.hero {
  min-height: 780px;
  color: var(--white);
  background: var(--ink);
}
.hero-bg {
  background:
    linear-gradient(90deg, #030b17 0%, #06172d 42%, #081f3e80 70%, #081f3e1a 100%),
    url("assets/hero-hourglass.jpg") 72% center / cover no-repeat;
}
.hero-bg::before {
  background:
    linear-gradient(180deg, #020b18a8 0%, transparent 32%, #020b18b8 100%),
    radial-gradient(700px 440px at 24% 52%, #0673f22e, transparent 70%);
  opacity: 1;
}
.hero-topo { display: none; }
.hero-spotlight {
  background: radial-gradient(420px 420px at var(--mx, 50%) var(--my, 40%), #0673f21f, transparent 65%);
}
.hero-grid { align-items: center; }
.hero-copy { max-width: 760px; }
.hero-eyebrow-row .chip {
  background: #ffffff0d;
  border-color: #ffffff24;
  color: #dbe8f8;
  backdrop-filter: blur(10px);
}
.hero-title { max-width: 11ch; letter-spacing: -0.055em; }
.hero-title .italic { color: #58a7ff; }
.hero-title .underlined::after { background: var(--accent); }
.hero-sub { color: #c9d9ea; max-width: 63ch; }
.hero-sub strong { color: var(--white); }
.hero .btn-ghost { color: var(--white); border-color: #ffffff4a; background: #081f3e66; }
.hero .btn-ghost:hover { background: #ffffff; color: var(--ink); }
.hero-card {
  background: #06172de0;
  border-color: #2d75ba66;
  box-shadow: 0 34px 90px -35px #000, 0 0 0 1px #0673f21f inset;
  backdrop-filter: blur(16px);
}
.hero-card .label, .tally-label, .hero-card-foot { color: #bed0e4; }
.hero-card .status { color: var(--live); }
.tally-check { color: var(--live); background: #0be0d51c; border-color: #0be0d552; }
.tally-count, .hero-card-foot strong { color: var(--white); }

.stats { background: var(--white); border-color: var(--line); }
.stat .n { color: var(--ink); }
.stat .unit, .benefit .num, .demo .tot, .demo-foot .accent { color: var(--accent); }

.benefit {
  background: var(--white);
  border-color: #081f3e14;
  box-shadow: 0 18px 44px -34px #081f3e7a;
}
.benefit:hover { border-color: #0673f24a; box-shadow: 0 28px 56px -34px #0673f27a; }

.process { background: var(--ink); }
.process::before {
  background:
    linear-gradient(90deg, #020a16de, #081f3ee0),
    url("assets/brand-texture.jpg") center / cover no-repeat;
  opacity: .62;
}
.steps li.active .num, .steps li:hover .num, .step-detail .label { color: var(--live); }
.steps li.active::after { background: var(--accent); }
.step-detail { border-color: #2c6ca75c; background: #ffffff0b; }

.custom { background: linear-gradient(180deg, #f6f9fd, #eaf1f9); }
.demo { background: var(--white); border-color: #081f3e17; box-shadow: 0 28px 70px -45px #081f3e6b; }
.demo-tabs button.on { background: var(--accent); color: var(--white); }

.cody {
  gap: clamp(64px, 7vw, 96px);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.cody-card { border-color: #081f3e1f; box-shadow: 0 24px 70px -48px #081f3e7a; }
.pull-quote { border-left-color: var(--accent); }

.cta {
  background: var(--ink);
  color: var(--white);
}
.cta-bg {
  background:
    linear-gradient(100deg, #020a17e8 0 45%, #081f3e73 72%, #0673f242),
    url("assets/hero-hourglass.jpg") center / cover no-repeat;
}
.cta .eyebrow { color: var(--live); }
.cta h2 { color: var(--white); }
.cta h2 .italic { color: #58a7ff; }
.cta p { color: #d4e2f1; }
.cta .micro { color: #a9bed4; }
.cta .btn-ghost { color: var(--white); border-color: #ffffff4a; }
.cta .btn-ghost:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

footer { background: #030d1c; color: #dbe8f8; border-color: #ffffff12; }
footer .brand { color: var(--white); }
footer .brand .light { color: var(--white); }
footer .footer-logo {
  width: 244px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #081f3e;
}
footer .foot-brand p { color: #b9cbe0; }
footer .foot a, footer .foot .link-btn { color: #c9d8e8; }
footer .foot-row { color: #9fb4ca; border-top-color: #ffffff1f; }
footer a:hover, footer .link-btn:hover { color: var(--white); }
footer .foot h5 { color: var(--live); }

/* Consent form */
.consent-section {
  padding: clamp(86px, 10vw, 140px) 0;
  background:
    linear-gradient(115deg, #030b18ed 0 50%, #081f3edc 78%, #0673f2b3),
    url("assets/brand-texture.jpg") center / cover no-repeat;
  color: var(--white);
}
.consent-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  gap: clamp(52px, 7vw, 96px);
  align-items: start;
}
.consent-copy { position: sticky; top: 116px; }
.consent-copy .eyebrow { color: var(--live); }
.consent-copy h2 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.045em;
  margin: 18px 0 24px;
  max-width: 10ch;
}
.consent-copy p { color: #c2d3e5; font-size: 17px; max-width: 46ch; }
.consent-points { display: grid; gap: 12px; margin-top: 30px; }
.consent-point { display: flex; gap: 12px; align-items: flex-start; color: #dbe8f8; font-size: 14px; }
.consent-point::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 6px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 5px #0be0d518;
}
.consent-form {
  background: var(--white);
  color: var(--ink);
  padding: clamp(26px, 4vw, 48px);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 90px -42px #000;
}
.consent-form h3 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.025em; }
.form-intro { margin: 0 0 28px; color: var(--ink-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: grid; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 650; }
.form-field input {
  width: 100%;
  border: 1px solid #081f3e2b;
  border-radius: 10px;
  background: #f8fbff;
  color: var(--ink);
  padding: 14px 15px;
  font: inherit;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.form-field input:focus { background: var(--white); border-color: var(--accent); box-shadow: 0 0 0 4px #0673f218; }
.form-field input[aria-invalid="true"] { border-color: var(--coral); box-shadow: 0 0 0 4px #fa4f2f17; }
.optional { color: var(--ink-soft); font-weight: 400; }
.sms-choice {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 4px;
  padding: 18px;
  border: 1px solid #0673f22e;
  border-radius: 12px;
  background: #0673f208;
}
.sms-choice input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.sms-choice label { font-size: 13px; line-height: 1.58; color: #354b65; }
.sms-choice a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.form-note { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 12px; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-actions .btn { justify-content: center; }
.form-status { min-height: 22px; margin: 0; font-size: 13px; color: var(--ink-soft); }
.form-status.success { color: #087a72; }
.form-status.error { color: #b32f1d; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

:focus-visible { outline: 3px solid var(--live); outline-offset: 3px; }

@media (max-width: 920px) {
  .cody { gap: 32px; }
  .consent-layout { grid-template-columns: 1fr; }
  .consent-copy { position: static; }
  .consent-copy h2 { max-width: 13ch; }
}

@media (max-width: 620px) {
  .hero { min-height: 0; }
  .hero-bg { background-position: 65% center; }
  .hero-bg::before { background: linear-gradient(90deg, #020b18fa 0%, #06172de8 72%, #081f3ea8); }
  .brand { font-size: 15px; }
  .official-brand { width: 160px; flex-basis: 160px; }
  footer .footer-logo { width: 210px; }
  .brand::before { width: 27px; height: 27px; flex-basis: 27px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full, .sms-choice, .form-note, .form-actions { grid-column: auto; }
  .consent-form { border-radius: 22px; }
}