@import url("../../styles.css");

:root {
  --ctb-ink: #17273b;
  --ctb-blue: #2f6ed8;
  --ctb-blue-soft: #eaf1ff;
  --ctb-orange: #c46a24;
  --ctb-purple: #7251b5;
  --ctb-green: #258057;
  --ctb-paper: #f8fafc;
  --ctb-line: #d7e0ec;
  --ctb-muted: #607085;
}

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

.clocktobill-site,
.clocktobill-doc { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }

.clocktobill-language { margin: 18px 0 0; }
.clocktobill-language a.active,
.clocktobill-site .button.primary { border-color: var(--ctb-ink); background: var(--ctb-ink); }

.clocktobill-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.62fr);
  gap: clamp(32px, 8vw, 100px);
  align-items: center;
  min-height: 520px;
  padding: 52px 0 72px;
}

.clocktobill-brand-lockup { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; color: var(--ctb-ink); font-weight: 820; }
.clocktobill-mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #aabddb;
  border-radius: 10px;
  background: #fff;
  color: var(--ctb-blue);
  font-size: 0.85rem;
  font-weight: 850;
  letter-spacing: 0;
}

.clocktobill-hero h1 { max-width: 14ch; margin: 0; color: var(--ctb-ink); font-size: clamp(2.2rem, 4.7vw, 3.85rem); font-weight: 720; line-height: 1.04; }
.clocktobill-hero .lead { max-width: 59ch; margin: 20px 0 0; color: var(--ctb-muted); font-size: 1.08rem; line-height: 1.7; }
.clocktobill-status { max-width: 58ch; margin: 16px 0 0; color: #42546c; font-size: 0.94rem; font-weight: 700; line-height: 1.6; }
.clocktobill-site .button.secondary { border-color: var(--ctb-line); background: #fff; color: var(--ctb-ink); }

.clocktobill-hero-illustration { width: min(100%, 470px); justify-self: end; margin: 0; }
.clocktobill-hero-illustration img { display: block; width: 100%; height: auto; max-height: 360px; border: 1px solid var(--ctb-line); background: #fff; object-fit: contain; }
.clocktobill-hero-illustration figcaption { margin-top: 10px; color: var(--ctb-muted); font-size: .78rem; line-height: 1.5; }

.clocktobill-ledger-card {
  width: min(100%, 410px);
  justify-self: end;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--ctb-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(28, 50, 81, 0.08);
}

.clocktobill-ledger-card > p { margin: 0; color: var(--ctb-muted); font-size: 0.82rem; font-weight: 760; letter-spacing: 0.04em; text-transform: uppercase; }
.clocktobill-ledger-card h2 { margin: 14px 0 22px; color: var(--ctb-ink); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.14; }
.clocktobill-ledger-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ctb-line); }
.clocktobill-ledger-row > span:first-child { width: 10px; height: 10px; border-radius: 50%; background: var(--ctb-blue); }
.clocktobill-ledger-row:nth-of-type(4) > span:first-child { background: var(--ctb-orange); }
.clocktobill-ledger-row strong { font-size: 0.94rem; }
.clocktobill-ledger-row small { color: var(--ctb-muted); font-size: 0.78rem; }
.clocktobill-ledger-row time { color: var(--ctb-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.clocktobill-card-foot { margin: 20px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--ctb-blue-soft); color: #38588d; font-size: 0.84rem; font-weight: 700; }

.clocktobill-section { padding: 68px 0; border-top: 1px solid var(--ctb-line); }
.clocktobill-section-heading { max-width: 720px; }
.clocktobill-section h2,
.clocktobill-policy-band h2,
.clocktobill-doc-content h2 { margin: 0; color: var(--ctb-ink); font-size: clamp(1.7rem, 3.2vw, 2.55rem); line-height: 1.12; }
.clocktobill-section-heading > p:last-child { max-width: 62ch; margin: 15px 0 0; color: var(--ctb-muted); line-height: 1.7; }

.clocktobill-surfaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.clocktobill-surface { min-height: 190px; padding: 22px; border: 1px solid var(--ctb-line); border-radius: 10px; background: #fff; }
.clocktobill-surface > span { color: var(--ctb-blue); font-size: 0.82rem; font-weight: 850; letter-spacing: 0.06em; }
.clocktobill-surface:nth-child(2) > span { color: var(--ctb-orange); }
.clocktobill-surface:nth-child(3) > span { color: var(--ctb-purple); }
.clocktobill-surface h3 { margin: 15px 0 8px; color: var(--ctb-ink); font-size: 1.24rem; }
.clocktobill-surface p { margin: 0; color: var(--ctb-muted); line-height: 1.62; }

.clocktobill-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 6vw, 78px); }
.clocktobill-detail-grid h2 { margin-bottom: 16px; }
.clocktobill-detail-grid p,
.clocktobill-detail-grid li { color: var(--ctb-muted); line-height: 1.72; }
.clocktobill-detail-grid ul { margin: 0; padding-left: 20px; }

.clocktobill-policy-band { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(250px, 0.72fr); gap: clamp(28px, 6vw, 70px); align-items: center; margin: 4px 0 72px; padding: clamp(30px, 5vw, 60px); background: var(--ctb-ink); color: #e6efff; }
.clocktobill-policy-band .eyebrow { color: #a9c6ff; }
.clocktobill-policy-band h2 { color: #fff; }
.clocktobill-policy-band p:last-child { margin: 15px 0 0; color: #cbd8ee; line-height: 1.68; }
.clocktobill-policy-band ul { margin: 0; padding-left: 20px; color: #d8e3f5; line-height: 1.75; }

.clocktobill-doc { padding: 22px 0 82px; }
.clocktobill-doc-article { max-width: 820px; margin: 34px auto 0; }
.clocktobill-doc-heading { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 30px; border-bottom: 1px solid var(--ctb-line); }
.clocktobill-doc-heading h1 { margin: 4px 0 8px; color: var(--ctb-ink); font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.1; }
.clocktobill-doc-heading p:last-child { margin: 0; color: var(--ctb-muted); line-height: 1.65; }
.clocktobill-doc-content { padding-top: 28px; color: var(--ctb-ink); line-height: 1.76; }
.clocktobill-doc-content h2 { margin: 40px 0 12px; font-size: clamp(1.36rem, 2.5vw, 1.85rem); }
.clocktobill-doc-content h3 { margin: 28px 0 8px; color: var(--ctb-ink); font-size: 1.15rem; }
.clocktobill-doc-content p { max-width: 70ch; }
.clocktobill-doc-content li { margin: 7px 0; }
.clocktobill-doc-content a { color: var(--ctb-blue); font-weight: 760; }
.clocktobill-note { margin: 24px 0; padding: 18px 20px; border-left: 3px solid var(--ctb-blue); background: var(--ctb-blue-soft); color: #395278; }
.clocktobill-warning { border-left-color: var(--ctb-orange); background: #fff4e9; color: #76451d; }

@media (max-width: 820px) {
  .clocktobill-hero,
  .clocktobill-policy-band { grid-template-columns: 1fr; }
  .clocktobill-hero { min-height: 0; padding-bottom: 60px; }
  .clocktobill-ledger-card, .clocktobill-hero-illustration { justify-self: start; }
  .clocktobill-surfaces { grid-template-columns: 1fr; }
  .clocktobill-surface { min-height: 0; }
}

@media (max-width: 560px) {
  .clocktobill-site,
  .clocktobill-doc { width: min(calc(100% - 28px), 1080px); }
  .clocktobill-hero h1 { font-size: 2.25rem; }
  .clocktobill-section { padding: 50px 0; }
  .clocktobill-detail-grid { grid-template-columns: 1fr; }
  .clocktobill-policy-band { margin-inline: -14px; margin-bottom: 52px; padding: 42px 22px; }
}