/* X-Links page CSS: only what sits inside a visual and the kit lacks (system.md). */

/* ---------- Hero collage pieces (sized in % of the collage, text in container units) ---------- */
.ly-collage { container-type: inline-size; }
.ly-collage .ly-piece { box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 22px 48px -22px rgb(38 37 30 / .45); }

.pc { background: #fff; color: var(--ink); padding: 3.2cqw 3.6cqw; display: grid; align-content: start; gap: 1.8cqw;
  font: 400 max(13px, 2cqw)/1.35 var(--font-text); }
.pc .lbl { color: var(--muted); font-size: max(13px, 1.7cqw); font-weight: 500; }
.pc .mono { font-family: var(--font-mono); font-size: max(13px, 1.9cqw); }
.pc .long { color: var(--muted); overflow-wrap: anywhere; }
.pc .short { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  border-radius: 1.4cqw; padding: 1.6cqw 2cqw; font-weight: 500; font-size: max(13px, 2.6cqw); }
.pc .short b { color: var(--action); font-weight: 500; }
.pc .chip { display: inline-flex; align-items: center; gap: 1cqw; font-size: max(13px, 1.7cqw); font-weight: 500; padding: .6cqw 1.6cqw;
  border-radius: 99px; background: color-mix(in oklab, var(--action) 12%, #fff); color: var(--action); justify-self: start; }
.pc .chip--ok { background: #e3f2e9; color: #1f6b43; }
.pc .copy { font-size: max(13px, 1.7cqw); color: var(--ink); border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); border-radius: 1cqw; padding: .6cqw 1.6cqw; }

.pc--qr { place-items: center; text-align: center; gap: 1.4cqw; }
.pc--qr svg { width: 100%; height: auto; display: block; }
.pc--qr .mono { color: var(--muted); }

.pc .big { font: var(--display-weight) max(20px, 6cqw)/1 var(--font-display); letter-spacing: var(--display-tracking); }
.pc .bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 1.2cqw; height: 16cqw; }
.pc .bars i { display: block; border-radius: .6cqw .6cqw 0 0; background: color-mix(in oklab, var(--action) 30%, #fff); }
.pc .bars i:last-child { background: var(--action); }
.pc .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.2cqw; color: var(--muted); font-size: max(13px, 1.5cqw); text-align: center; }

.pc .rank { display: grid; gap: 1.4cqw; }
.pc .rank div { display: grid; grid-template-columns: 1fr auto; gap: .6cqw 2cqw; }
.pc .rank span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.pc .rank i { grid-column: 1 / -1; height: .9cqw; border-radius: 99px; background: color-mix(in oklab, var(--ink) 8%, #fff); position: relative; overflow: hidden; }
.pc .rank i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--action); border-radius: inherit; }

.pc .field { display: grid; gap: .8cqw; }
.pc .field span:first-child { color: var(--muted); font-size: max(13px, 1.6cqw); }
.pc .field span:last-child { border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); border-radius: 1.2cqw; padding: 1.2cqw 1.8cqw; font-weight: 500; }
.pc .two { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }

.pc--term { background: #1d1c18; color: #e9e7e1; font-family: var(--font-mono); font-size: max(13px, 1.8cqw); gap: 1cqw; }
.pc--term .p { color: #8f8d85; }
.pc--term .ok { color: #8fd6a8; }
.pc--term .k { color: #9dbbff; }

/* ---------- The app frame: the links dashboard, big ---------- */
.app-mock { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: #fff; color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 30px 60px -30px rgb(38 37 30 / .35); font-family: var(--font-text); }
.app-mock__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app-mock__pane + .app-mock__pane { border-left: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); }
.app-mock__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.app-mock__bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); font-weight: 500; }
.app-mock__search { flex: 1; color: var(--muted); font-size: 14px; border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); border-radius: var(--r-sm); padding: 6px 10px; }
.app-mock__row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); }
.app-mock__row.is-open { background: color-mix(in oklab, var(--action) 7%, #fff); box-shadow: inset 3px 0 0 var(--action); }
.app-mock__row b { font-weight: 500; }
.app-mock__row small { grid-column: 1; color: var(--muted); font: 400 13px/1.4 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-mock__row em { font-style: normal; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.app-mock__open { padding: var(--s-6); display: grid; gap: var(--s-5); align-content: start; }
.app-mock__head { display: flex; justify-content: space-between; align-items: start; gap: var(--s-4); }
.app-mock__head h3 { font: var(--display-weight) 24px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 0; }
.app-mock__head p { margin: 4px 0 0; color: var(--muted); font: 400 14px/1.4 var(--font-mono); }
.app-mock__qr { width: 88px; height: 88px; flex: none; }
.app-mock__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.app-mock__stats div { border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); border-radius: var(--r-md); padding: var(--s-4); }
.app-mock__stats span { display: block; color: var(--muted); font-size: 13px; }
.app-mock__stats strong { font: var(--display-weight) 28px/1.2 var(--font-display); letter-spacing: -0.02em; }
.app-mock__chart { display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 6px; height: 120px; }
.app-mock__chart i { display: block; border-radius: 4px 4px 0 0; background: color-mix(in oklab, var(--action) 28%, #fff); }
.app-mock__chart i:last-child { background: var(--action); }
.app-mock__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.app-mock__cols h4 { margin: 0 0 var(--s-3); font-size: 13px; font-weight: 500; color: var(--muted); }
.app-mock__cols li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); font-size: 15px; }
.app-mock__cols ul { list-style: none; margin: 0; padding: 0; }
@media (max-width: 1023px) {
  .app-mock { grid-template-columns: minmax(0, 1fr); }
  .app-mock__pane--list { max-height: 252px; }
  .app-mock__pane--list::after { display: none; }
  .app-mock__pane + .app-mock__pane { border-left: 0; border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); }
}
@media (max-width: 639px) {
  .app-mock__pane--list { display: none; }
  .app-mock__pane + .app-mock__pane { border-top: 0; }
  .app-mock__cols { grid-template-columns: 1fr; }
}

/* ---------- Feature card panels ---------- */
#features .panel { --p-h: 300px; display: grid; place-items: center; padding: var(--s-6); }
#features .panel .pc { width: min(100%, 360px); container-type: normal; font-size: 15px; gap: 12px; padding: 20px 22px; border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 18px 40px -24px rgb(38 37 30 / .4); }
#features .panel .pc * { font-size: inherit; }
#features .panel .pc .lbl, #features .panel .pc .field span:first-child { font-size: 13px; }
#features .panel .pc .short { font-size: 16px; padding: 10px 12px; border-radius: 8px; }
#features .panel .pc .field span:last-child { padding: 8px 12px; border-radius: 8px; }
#features .panel .pc .chip { font-size: 13px; padding: 4px 10px; }
#features .panel .pc--qr svg { width: 150px; }

/* ---------- Code block (API section) ---------- */
.code { background: #1d1c18; color: #e9e7e1; border-radius: var(--r-lg); padding: var(--s-6); font: 400 14px/1.7 var(--font-mono); overflow-x: auto; margin: 0; }
.code .p { color: #8f8d85; } .code .s { color: #f2c48d; } .code .k { color: #9dbbff; } .code .ok { color: #8fd6a8; }

/* ---------- Plans ---------- */
.plan-note { color: var(--muted); font-size: 14px; }

/* ---------- Auth pages (sign in, sign up, password) ---------- */
.auth { min-height: 100svh; padding: calc(var(--nav) + var(--s-8)) 0 var(--s-8); }
.auth .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.auth__form { grid-column: 1 / span 5; display: grid; gap: var(--s-5); }
.auth__form h1 { font: var(--display-weight) clamp(34px, 3vw + 10px, 48px)/1.05 var(--font-display); letter-spacing: var(--display-tracking); margin: 0; }
.auth__form > p { margin: 0; font-size: var(--t-lead); color: var(--ink); max-width: 44ch; }
.auth__visual { grid-column: 7 / span 6; }
.auth .ly-collage { position: relative; aspect-ratio: 628 / 600; }
.form-stack { display: grid; gap: var(--s-4); }
.form-field { display: grid; gap: 6px; }
.form-field label { font-size: 13px; font-weight: 500; }
.form-field input[type="email"], .form-field input[type="password"], .form-field input[type="text"] {
  height: 48px; font: 400 16px/1 var(--font-text); color: var(--ink); background: #fff; padding: 0 14px;
  border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); border-radius: var(--r-sm); width: 100%; }
.form-field select, .form-field textarea {
  font: 400 16px/1.5 var(--font-text); color: var(--ink); background: #fff; padding: 0 14px;
  border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); border-radius: var(--r-sm); width: 100%; }
.form-field select { height: 48px; }
.form-field textarea { padding: 12px 14px; resize: vertical; min-height: 140px; }
.form-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action); }
.form-field small { color: var(--muted); font-size: 13px; }
.form-check-row { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.form-check-row input { width: 18px; height: 18px; accent-color: var(--action); }
.form-stack .btn { width: 100%; }
.auth__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: 15px; }
.form-errors { border: 1px solid #e3b4ab; background: #fbeeea; color: #7a2516; border-radius: var(--r-md); padding: var(--s-4); font-size: 15px; }
.form-errors ul { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.notice { border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: 15px; background: #fff; border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.notice--alert { background: #fbeeea; border-color: #e3b4ab; color: #7a2516; }
@media (max-width: 1023px) {
  .auth__form { grid-column: 1 / -1; max-width: 520px; }
  .auth__visual { display: none; }
}

/* ---------- About ---------- */
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.facts-list li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.facts-list strong { font-weight: 500; font-size: var(--t-card); }
.facts-list span { font-size: 16px; line-height: 1.6; }
@media (max-width: 639px) { .facts-list li { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ---------- How a short link works (still diagram, hand-built) ---------- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: var(--s-4); margin-top: var(--s-7); }
.flow__node { background: #fff; border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-2); min-height: 160px; align-content: start; }
.flow__node b { font-weight: 500; font-size: var(--t-card); }
.flow__node span { color: var(--ink); font-size: 15px; line-height: 1.5; }
.flow__node code { font: 400 13px/1.4 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.flow__node--core { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.flow__arrow { width: 40px; height: 2px; background: color-mix(in oklab, var(--ink) 30%, transparent); position: relative; }
.flow__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid color-mix(in oklab, var(--ink) 30%, transparent); border-right: 0; }
@media (max-width: 1023px) {
  .flow { grid-template-columns: 1fr; }
  .flow__arrow { width: 2px; height: 24px; justify-self: center; }
  .flow__arrow::after { right: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 7px solid color-mix(in oklab, var(--ink) 30%, transparent); border-bottom: 0; }
}

/* Skip link: first in the header, invisible until focused (system.md, Base). */
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; left: var(--s-4); top: var(--s-3); width: auto; height: auto; clip-path: none; z-index: 20;
  background: #fff; color: var(--ink); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); outline: 2px solid var(--action); }

/* The about hero's three steps stacked in the right column */
.flow.flow--stack { grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; gap: var(--s-4); counter-reset: none; }
.flow--stack .flow__node { min-height: 0; }
.hero .flow--stack { align-self: start; }

/* Collage pieces are white cards on the stone ground (the kit's piece rule sets --surface). */
.ly-collage .ly-piece.pc { background: #fff; }
.ly-collage .ly-piece.pc--term { background: #1d1c18; }
.pc--qr .mono { font-size: max(13px, 1.6cqw); overflow-wrap: anywhere; }

/* Section heights by width (layout-v4.md: --h 2 at the tablet when stacked content needs it). */
@media (min-width: 640px) and (max-width: 1279px) { #features { --h: 2; } }
@media (min-width: 640px) and (max-width: 1023px) { #pricing { --h: 2; } }
#features, #pricing, #api { --hm: 2; }
/* 1024 to 1279: keep the three plans on one screen. */
@media (min-width: 1024px) and (max-width: 1279px) { #pricing .plan-note { display: none; } #pricing .checks { gap: var(--s-2); } }

/* API section: endpoint rows under the checks. */
.endpoint-rows { list-style: none; margin: 0; padding: 0; }
.endpoint-rows li { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); font-size: 16px; }
.endpoint-rows code { font: 500 13px/1.9 var(--font-mono); color: var(--action); }

/* Client logo in the nav and footer */
.nav__logo img.brand-logo { width: 32px; height: 32px; border-radius: 8px; }
/* Buy Me a Coffee (a plain link: no third-party script, so the CSP stays strict) */
.coffee-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #26251e; background: #ffdd00;
  padding: 6px 12px; border-radius: var(--r-btn, 8px); text-decoration: none; transition: transform .15s ease; }
.coffee-link:hover { transform: translateY(-1px); }

/* Legal pages (privacy, terms, cookies): a readable single column. */
/* Legal pages are documents, not screens: their sections grow with the text instead of being
   pinned to one screen height like the rest of the marketing site. */
main.legal-page > :is(section, .section) { height: auto; min-height: 0; }
main.legal-page > :is(section, .section) > :is(.wrap, .container) { height: auto; }
main.legal-page > .hero--legal { padding: calc(var(--nav) + var(--s-7, 64px)) 0 var(--s-6, 48px); }
main.legal-page > .section--legal { padding: 0 0 var(--s-8, 96px); }
.legal-head { max-width: 760px; }
.legal-meta { font-size: 14px; color: color-mix(in oklab, var(--ink) 62%, transparent); }
.legal-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal-body { max-width: 72ch; font-size: 17px; line-height: 1.65; }
.legal-body h2 { font-size: var(--t-card, 22px); margin: 2.2em 0 0.6em; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 17px; font-weight: 600; margin: 1.6em 0 0.4em; }
.legal-body p, .legal-body ul { margin: 0 0 1em; }
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin-bottom: 0.45em; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; }
.legal-table { overflow-x: auto; margin: 0 0 1em; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.legal-table th { font-weight: 600; }
.footer__legal-links { display: flex; gap: var(--s-4, 16px); flex-wrap: wrap; }
.footer__legal-links a { color: inherit; }
.auth-legal { font-size: 13px; color: color-mix(in oklab, var(--ink) 62%, transparent); margin-top: var(--s-4, 16px); }
.auth-legal a { color: inherit; text-decoration: underline; }
/* Contact form honeypot: off-screen, never visible or focusable for people. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }