/* syn.cy landing (index.html, el/index.html): layout B of the Claude Design handoff. */
.wrap { max-width: 77.5rem; margin: 0 auto; }
section { padding: clamp(3.5rem, 7vw, 6.875rem) var(--pad); }
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 700; }
h2 { font-size: clamp(2rem, 3.8vw, 3.375rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
h3 { font-size: 1.1875rem; line-height: 1.25; }
p { margin: 0; }
.muted { color: var(--muted); }
.sunken { background: var(--sunken); }

/* Hero: the band with the headline, then a mock of the Appointments page rising out of it. */
.hero { padding-bottom: 0; overflow: hidden; background: var(--band); color: var(--on-band); }
.hero .wrap { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.hero h1 { max-width: 16ch; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.hero .lead { max-width: 34em; color: var(--band-muted); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); }

/*
 * The two mocks of the Appointments page share one frame: the desktop one above 45rem, the phone one
 * under it. Neither reflows: --u is each mock's unit (1rem at full size), set from the frame's width,
 * and every size inside is in em of it, so a mock shrinks as one picture. --u stays a token stream,
 * so its cqw resolves wherever it is used, always against .mock-frame.
 */
.mock-frame { container-type: inline-size; width: 100%; margin-top: 1.75rem; }

.mock {
  --u: calc(100cqw / 77.5);
  display: grid;
  grid-template-columns: 12.5em minmax(0, 1fr);
  margin: 0;
  border-radius: 1.25em 1.25em 0 0;
  background: var(--surface);
  color: var(--text);
  font-size: var(--u);
  text-align: left;
  box-shadow: 0 -1.875em 5em -1.875em rgb(0 0 0 / 60%);
}

.mock-rail { display: flex; flex-direction: column; gap: 0.375em; padding: 1.125em 0.875em; border-right: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.mock-rail .wordmark { height: 1.25em; margin: 0 0 0.75em 0.25em; color: var(--text); }
.mock-rail span { padding: 0.575em 0.725em; font-size: 0.875em; }
.mock-rail .on { border-radius: 0.575em; background: var(--sunken); color: var(--text); font-weight: 800; }
.mock-main { display: flex; flex-direction: column; gap: 0.875em; padding: 1.375em 1.5em 1.75em; }
.mock-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em; }
.mock-head .title { display: flex; align-items: center; gap: 0.45em; font: 700 1.375em var(--font-head); }
.mock-pills { display: flex; gap: 0.3em; font-size: 0.8125em; font-weight: 700; }
.mock-pills span { padding: 0.46em 0.92em; color: var(--muted); }
.mock-pills .on { border-radius: 0.615em; background: var(--primary); color: var(--on-primary); }
.mock-table { overflow: hidden; border: 1px solid var(--line); border-radius: 0.75em; }
.mock-row { display: grid; grid-template-columns: 4em minmax(0, 1fr) 10.5em 9em; gap: 0.75em; align-items: center; padding: 0.75em 1em; border-top: 1px solid var(--line); }
.mock-row.head { border-top: 0; background: var(--sunken); color: var(--muted); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mock-row.head > span { display: flex; align-items: center; gap: 0.727em; font-size: 0.6875em; }
:is(.mock-row, .phone-card) > strong { font-size: 0.875em; }
:is(.mock-row, .phone-card) .time { font: 600 0.875em var(--font-mono); }
:is(.mock-row, .phone-card) .rem { color: var(--muted); font-size: 0.8125em; }

.chip { display: inline-block; padding: 0.25em 0.75em; border-radius: 999px; font-size: 0.75em; font-weight: 700; white-space: nowrap; }
.chip.ok { background: var(--success-tint); color: var(--success); }
.chip.wait { background: var(--warning-tint); color: var(--warning); }
.chip.bad { background: var(--danger-tint); color: var(--danger); }

/* The phone: a dark bezel around the admin app's phone shell (top bar, day cards, tab bar). */
.mock-phone {
  --u: min(1rem, 100cqw / 18);
  display: none;
  width: 18em;
  margin: 0 auto;
  padding: 0.625em;
  border-radius: 2.75em;
  background: #05080f;
  color: var(--text);
  font-size: var(--u);
  text-align: left;
  box-shadow: 0 0 0 1px var(--band-line), 0 1.5em 4em -1em rgb(0 0 0 / 60%);
}

.phone-screen { position: relative; overflow: hidden; border-radius: 2.125em; background: var(--bg); }
.phone-screen::before { content: ""; position: absolute; top: 0.5em; left: 50%; width: 5.5em; height: 1.375em; border-radius: 1em; background: #05080f; translate: -50% 0; }
.phone-top { display: flex; align-items: center; gap: 0.625em; padding: 2.375em 1em 0.75em; border-bottom: 1px solid var(--line); background: var(--surface); }
.phone-top img { width: 1.75em; height: 1.75em; }
.phone-top strong { font-size: 0.9375em; }
.phone-avatar { width: 2em; height: 2em; margin-left: auto; border-radius: 50%; background: var(--accent-fill); }
.phone-main { display: flex; flex-direction: column; gap: 0.875em; padding: 1em 0.75em 1.25em; }
.phone-cards { overflow: hidden; border: 1px solid var(--line); border-radius: 0.875em; background: var(--surface); }
.phone-card { display: grid; grid-template-columns: 3.25em minmax(0, 1fr); grid-template-areas: "t n" "t c" "t r"; gap: 0.3em 0.75em; align-items: center; padding: 0.75em 1em; }
.phone-card + .phone-card { border-top: 1px solid var(--line); }
.phone-card > :nth-child(1) { grid-area: t; align-self: start; }
.phone-card > :nth-child(2) { grid-area: n; }
.phone-card > :nth-child(3) { grid-area: c; }
.phone-card > :nth-child(4) { grid-area: r; }
.phone-card > :nth-child(n + 3) { display: flex; align-items: center; gap: 0.5em; }
.phone-tabs { display: flex; justify-content: space-around; padding: 0.25em 0.25em 1em; border-top: 1px solid var(--line); background: var(--surface); }
.phone-tabs span { display: flex; flex-direction: column; align-items: center; gap: 0.25em; padding: 0.45em 0.25em; color: var(--muted); font-size: 0.6875em; font-weight: 700; white-space: nowrap; }
.phone-tabs .on { color: var(--primary); }
.phone-tabs svg { width: 2em; height: 2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.phone-tabs span:last-child svg { stroke-width: 3; }

@media (max-width: 45rem) {
  .hero { padding-bottom: 3.5rem; }
  .mock { display: none; }
  .mock-phone { display: block; }
}

/* The numbered sky dots: on the mocks (sized in the mock's --u), and again before the three notes under them. */
.pin {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: calc(1.5 * var(--u, 1rem));
  height: calc(1.5 * var(--u, 1rem));
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--on-accent);
  font: 700 calc(0.75 * var(--u, 1rem)) / 1 var(--font-head);
  letter-spacing: 0;
  box-shadow: 0 0 0 calc(0.25 * var(--u, 1rem)) var(--accent-ring);
}

.pins { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.75rem; }
.pins li { display: flex; gap: 0.875rem; }
.pins .pin { width: 1.875rem; height: 1.875rem; font-size: 0.875rem; box-shadow: none; }
.pins h3 { font-size: 1.25rem; }
ol.pins, .features ul, .trust ul { margin: 0; padding: 0; list-style: none; }
/* The notes list is also a .wrap: keep its centring, which the reset above would drop. */
ol.pins { margin-inline: auto; }

.features .wrap { display: flex; flex-direction: column; gap: 1.75rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.section-head h2 { max-width: 40rem; }
.section-head p { max-width: 30em; }
.features ul.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21.25rem), 1fr)); gap: 0.75rem; }
.card { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.card .icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--accent-tint); color: var(--text); }
.card h3 { margin-top: 0.25rem; }
.card p { color: var(--muted); font-size: 1rem; }




.faq .wrap { display: flex; flex-direction: column; gap: 1.5rem; max-width: 55rem; }
.faq .list { display: flex; flex-direction: column; gap: 0.625rem; }
.faq details { padding: 0 1.375rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; font: 700 clamp(1.125rem, 1.7vw, 1.3125rem) var(--font-head); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.5rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { max-width: 40em; margin-bottom: 1.375rem; color: var(--muted); text-wrap: pretty; }

.trust { background: var(--band); color: var(--on-band); }
.trust .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22.5rem), 1fr)); gap: 2.5rem; align-items: start; }
.trust h2 { font-size: clamp(1.875rem, 3.4vw, 3rem); }
.trust ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1.125rem 1.75rem; }
.trust li { padding-top: 0.75rem; border-top: 1px solid var(--band-line); }
.trust strong { display: block; }
.trust span { color: var(--band-muted); font-size: 0.875rem; }

.contact { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.contact h2 { max-width: 16ch; font-size: clamp(2.125rem, 4.4vw, 4rem); letter-spacing: -0.025em; }
.contact p { color: var(--muted); font-size: 1.125rem; }