/* ClockLap marketing site: shared look (chrome.css holds the tokens, nav, pills and footer).
   Monochrome (white sections, pure black bands joined by convex curves), one champagne accent,
   Geist at regular weight for big calm headlines, pill controls. The black bands stay black in dark mode. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- type */
.display { font-size: clamp(44px, 7.2vw, 104px); line-height: .98; letter-spacing: -0.035em; font-weight: 400; }
.h2 { font-size: clamp(36px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.032em; font-weight: 400; }
.h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.lede { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--fg-2); max-width: 60ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dim { color: var(--fg-3); }
.accent { color: var(--accent); }
.band .accent { color: var(--accent-hi); }

/* ---------------------------------------------------------------- sections and bands */
.sec { padding-block: clamp(80px, 10vw, 152px); }
.sec-tight { padding-block: clamp(56px, 7vw, 96px); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.sec-head > div:first-child { flex: 1 1 560px; min-width: 0; }
.sec-head .lede { margin-top: 22px; }
.band { position: relative; background: var(--black); color: var(--on-black); }
.band .lede { color: var(--on-black-2); }
.band .eyebrow { color: var(--on-black-3); }
/* Convex edges: the band bulges into the white section next to it. */
.curve-t { border-top-left-radius: 50% var(--curve); border-top-right-radius: 50% var(--curve); }
.curve-b { border-bottom-left-radius: 50% var(--curve); border-bottom-right-radius: 50% var(--curve); }
.band + .band, .band.flush-b { margin-bottom: 0; }
:root[data-theme="dark"] .band.curve-t { box-shadow: 0 -1px 0 rgb(255 255 255 / .09); }
:root[data-theme="dark"] .band.curve-b { box-shadow: 0 1px 0 rgb(255 255 255 / .09); }
:root[data-theme="dark"] .band.curve-t.curve-b { box-shadow: 0 -1px 0 rgb(255 255 255 / .09), 0 1px 0 rgb(255 255 255 / .09); }
.soft { background: var(--bg-2); }

/* Light theme: hero bands turn white (class "lite"); the dark story card, sync diagram and orbit inside stay dark,
   like a device on a white desk. In dark theme they stay black bands. */
:root:not([data-theme="dark"]) .band.lite { background: var(--bg); color: var(--fg); }
:root:not([data-theme="dark"]) .band.lite .lede { color: var(--fg-2); }
:root:not([data-theme="dark"]) .band.lite .eyebrow,
:root:not([data-theme="dark"]) .band.lite .hero-facts,
:root:not([data-theme="dark"]) .band.lite .legal-note { color: var(--fg-3); }
:root:not([data-theme="dark"]) .band.lite .accent { color: var(--accent); }
:root:not([data-theme="dark"]) .band.lite .pill-light { background: var(--fg); color: var(--bg); }
:root:not([data-theme="dark"]) .band.lite .pill-light .arr { background: var(--bg); color: var(--fg); }
:root:not([data-theme="dark"]) .band.lite .pill-line { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) .band.lite .pill-line:hover { box-shadow: inset 0 0 0 1px var(--fg-3); }
:root:not([data-theme="dark"]) .band.lite .pill-line .arr { background: var(--bg-2); color: var(--fg); }
:root:not([data-theme="dark"]) .band.lite .tags .tag { color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) .band.lite .tags .tag.gold { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
:root:not([data-theme="dark"]) .band.lite .crumbs { color: var(--fg-3); }
:root:not([data-theme="dark"]) .band.lite .crumbs a { color: var(--fg-2); }
:root:not([data-theme="dark"]) .band.lite .crumbs a:hover { color: var(--fg); }
:root:not([data-theme="dark"]) .band.lite .filters { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) .band.lite .filters button { color: var(--fg-2); }
:root:not([data-theme="dark"]) .band.lite .filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
:root:not([data-theme="dark"]) .band.lite .orbit { background: #0A0A0C; border-radius: 34px; padding: clamp(14px, 2vw, 28px); box-shadow: inset 0 0 0 1px #1C1C20; }
:root:not([data-theme="dark"]) .band.lite .hx-legend, :root:not([data-theme="dark"]) .band.lite .dim { color: var(--fg-3); }

.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 500 11.5px/1 var(--mono); letter-spacing: .02em; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.tag.solid { background: var(--fg); color: var(--bg); box-shadow: none; }
.tag.gold { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.band .tag, .card .tag { color: var(--on-black-2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.band .tag.gold, .card .tag.gold { color: var(--accent-hi); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.mono-tile { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font: 500 12px/1 var(--mono); letter-spacing: .02em; background: var(--bg-2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.band .mono-tile, .card .mono-tile { background: #1A1A1D; color: #fff; box-shadow: inset 0 0 0 1px #2A2A2F; }

/* ---------------------------------------------------------------- cards */
.card { position: relative; background: var(--card); color: var(--on-black); border-radius: 30px; padding: clamp(24px, 2.6vw, 36px); overflow: hidden; box-shadow: inset 0 0 0 1px var(--card-edge, transparent); }
.band .card { background: var(--card-2); box-shadow: inset 0 0 0 1px var(--card-line); }
.card p { color: var(--on-black-2); }
.card h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.panel { background: var(--bg-2); border-radius: 30px; padding: clamp(22px, 3vw, 40px); }

/* ---------------------------------------------------------------- reveal on scroll */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ---------------------------------------------------------------- marquee */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.marquee li { display: flex; align-items: center; gap: 40px; padding-right: 40px; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; color: var(--fg-3); white-space: nowrap; }
.marquee li a { color: inherit; text-decoration: none; transition: color .2s; }
.marquee li a:hover { color: var(--fg); }
.marquee li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .8; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .marquee { overflow-x: auto; } }

/* ---------------------------------------------------------------- FAQ (shared) */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 34px; height: 34px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 15px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div, .faq details > p { color: var(--fg-2); padding: 0 56px 26px 0; max-width: 78ch; }
.faq details > div p + p { margin-top: 10px; }

/* ---------------------------------------------------------------- forms (shared) */
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea { width: 100%; height: 50px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: 0 16px; font: 16px var(--font); transition: border-color .15s, box-shadow .15s; }
.field textarea { height: 104px; padding: 13px 16px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---------------------------------------------------------------- integration pages */
.ihero { padding: clamp(128px, 14vw, 172px) 0 clamp(72px, 9vw, 128px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 12.5px/1 var(--mono); letter-spacing: .04em; color: var(--on-black-3); margin-bottom: 28px; }
.crumbs a { color: var(--on-black-2); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-hidden] { opacity: .5; }
.ihero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ihero h1 { font-size: clamp(36px, 4.3vw, 60px); line-height: 1.04; letter-spacing: -0.03em; }
.ihero .lede { margin-top: 24px; }
.ihero .ctas { margin-top: 36px; }
.ihero .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
@media (max-width: 960px) { .ihero-grid { grid-template-columns: minmax(0, 1fr); } }

/* the sync diagram: ClockLap → provider */
.sync { position: relative; margin: 0; border-radius: 30px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--card-line); padding: clamp(18px, 2.4vw, 30px); overflow: hidden; }
.sync > svg { display: block; width: 100%; height: auto; overflow: visible; }
.sync .sync-v { display: none; max-width: 360px; margin: 0 auto; }
@media (max-width: 560px) { .sync .sync-h { display: none; } .sync .sync-v { display: block; } }
.sync .wire { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 1.2; }
.sync .wire.flow { stroke: var(--accent); stroke-opacity: .6; stroke-dasharray: 2 8; stroke-linecap: round; animation: dash 1.4s linear infinite; }
.sync .wire.back { stroke: rgb(255 255 255 / .35); animation-direction: reverse; }
.sync .node { fill: #19191C; stroke: #2C2C31; }
.sync .node.us { fill: #000; stroke: color-mix(in srgb, var(--accent) 70%, transparent); }
.sync text { font-family: var(--font); fill: #fff; }
.sync .lbl { font-size: 18px; letter-spacing: -0.015em; }
.sync .sub { font-size: 13px; fill: var(--on-black-2); }
.sync .mono { font: 500 13px var(--mono); }
.sync .chipbg { fill: #0B0B0D; stroke: #2E2E33; }
.sync .rowtxt { font: 400 11.5px var(--mono); fill: #E4E4E8; }
.sync .pkt { fill: var(--accent-hi); }
.sync .ring { fill: none; stroke: rgb(255 255 255 / .07); }
.sync .ring.faint { stroke: rgb(255 255 255 / .04); }
.sync figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #1F1F23; font: 400 12.5px/1.2 var(--mono); color: var(--on-black-2); }
.sync figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.sync figcaption span:first-child svg { color: var(--accent-hi); }
.sync figcaption span:last-child { color: var(--accent-hi); }
@keyframes dash { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .sync .wire.flow { animation: none; } .sync .pkt { display: none; } }

.ibody { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.ibody article > section { padding-top: clamp(48px, 5vw, 72px); }
.ibody article > section:first-child { padding-top: 0; }
.ibody h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -0.028em; }
.ibody h2 + p, .ibody h2 + .lede { margin-top: 16px; }
.ibody p { color: var(--fg-2); max-width: 72ch; }
.ibody p + p { margin-top: 12px; }
.ibody article a { color: var(--fg); }
.aside { position: sticky; top: 100px; border-radius: 26px; background: var(--bg-2); padding: 26px; font-size: 14.5px; }
.aside h3 { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.aside dl { margin: 0; display: grid; gap: 0; }
.aside dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.aside dt { color: var(--fg-3); }
.aside dd { margin: 0; color: var(--fg); }
.aside .pill { width: 100%; justify-content: space-between; margin-top: 20px; white-space: normal; line-height: 1.2; height: auto; min-height: 54px; padding-block: 7px; }
@media (max-width: 960px) { .ibody { grid-template-columns: minmax(0, 1fr); } .aside { position: static; order: -1; } }

.table-wrap { margin-top: 24px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.table-wrap th { text-align: left; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); padding: 16px 20px; background: var(--bg-2); }
.table-wrap td { padding: 15px 20px; border-top: 1px solid var(--line); vertical-align: top; color: var(--fg-2); }
.table-wrap td:first-child { color: var(--fg); white-space: nowrap; }
.table-wrap td code, .ibody code { font: 400 13px var(--mono); background: var(--bg-2); padding: 2px 7px; border-radius: 6px; color: var(--fg); white-space: nowrap; }
.table-wrap td .arrow { color: var(--accent); margin: 0 4px; }

.isteps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; counter-reset: s; }
.isteps li { counter-increment: s; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 18px; padding: 22px 24px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); }
.isteps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: 500 13px/1 var(--mono); color: var(--accent); padding-top: 6px; }
.isteps b { font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.isteps span { color: var(--fg-2); }

.ilist { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ilist li { position: relative; padding-left: 28px; color: var(--fg-2); }
.ilist li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 1.5px; background: var(--accent); }
.ilist b { color: var(--fg); font-weight: 500; }
.callout { margin-top: 24px; padding: 22px 24px; border-radius: 22px; background: var(--bg-2); color: var(--fg-2); }
.callout b { color: var(--fg); font-weight: 500; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.cols2 > div { padding: 22px 24px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); }
.cols2 h3 { font-size: 18px; letter-spacing: -0.01em; margin-bottom: 6px; }
.cols2 p { font-size: 15.5px; }
@media (max-width: 640px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
.ibody p code, .ibody li code { white-space: normal; overflow-wrap: anywhere; }
.filecode { margin-top: 20px; border-radius: 18px; background: var(--card); color: #D9D9DE; font: 12.5px/1.65 var(--mono); padding: 18px 20px; overflow-x: auto; white-space: pre; }
.filecode .h { color: var(--accent-hi); }

/* tiles linking to integration pages (hub, related, homepage) */
.itiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.itile { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 24px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--fg); min-width: 0; transition: box-shadow .2s, transform .25s var(--ease), background .2s; }
.itile:hover { box-shadow: inset 0 0 0 1px var(--fg-3); transform: translateY(-2px); }
.itile .top { display: flex; align-items: center; gap: 12px; }
.itile .top .tag { margin-left: auto; align-self: flex-start; }
.itile .nm { font-size: 18px; letter-spacing: -0.015em; line-height: 1.2; }
.itile .k { font: 500 11px/1 var(--mono); color: var(--fg-3); letter-spacing: .06em; text-transform: uppercase; margin-top: 5px; }
.itile p { color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.itile .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.soft .itile { background: var(--bg); }
.itile[hidden] { display: none; }

.filters { display: inline-flex; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.filters button { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--on-black-2); font: 500 14.5px var(--font); cursor: pointer; transition: background .2s, color .2s; }
.filters button[aria-pressed="true"] { background: #fff; color: #000; }

.orbit { margin: 0; max-width: 520px; justify-self: center; width: 100%; }
.orbit svg { display: block; width: 100%; height: auto; }
.orbit .oring { fill: none; stroke: rgb(255 255 255 / .1); }
.orbit .oring.gold { stroke: var(--accent); stroke-opacity: .6; }
.orbit .spin { transform-box: fill-box; transform-origin: center; animation: ospin 40s linear infinite; }
.orbit .spoke { stroke: rgb(255 255 255 / .07); fill: none; }
.orbit .otile { fill: #141416; stroke: #2C2C31; transition: stroke .2s, fill .2s; }
.orbit a:hover .otile, .orbit a:focus .otile { stroke: var(--accent); fill: #1C1C1F; }
.orbit .omono { font: 500 12px var(--mono); fill: #E4E4E8; pointer-events: none; }
.orbit .pkt { fill: var(--accent-hi); }
@keyframes ospin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit .spin { animation: none; } .orbit .pkt { display: none; } }
.hub-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
@media (max-width: 960px) { .hub-grid { grid-template-columns: minmax(0, 1fr); } .orbit { max-width: 360px; } }
@media (max-width: 600px) { .hide-sm { display: none !important; } }
.legal-note { font-size: 13px; color: var(--fg-3); margin-top: 28px; max-width: 90ch; }
.band .legal-note { color: var(--on-black-3); }

.cta-band { text-align: center; padding: clamp(96px, 12vw, 176px) 0 clamp(72px, 9vw, 120px); }
.cta-band .display { max-width: 14ch; margin: 0 auto; }
.cta-band .lede { margin: 26px auto 0; }
.cta-band .ctas { justify-content: center; margin-top: 40px; }