/* =============================================================
   CABOO · FRONTDESK — demo + start surfaces (legacy fd- system).
   Self-contained (own reset; does not depend on site.css). The
   /frontdesk landing now lives on the main shell via site.css +
   frontdesk.css; these inner pages keep their own dark chrome.
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.fd-page { overflow-x: hidden; }
.fd-shell {
  width: min(1160px, calc(100% - clamp(32px, 6vw, 72px)));
  margin: 0 auto;
}
.fd-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1160px, calc(100% - clamp(32px, 6vw, 72px)));
  margin: 0 auto;
  padding-top: clamp(18px, 3vw, 32px);
  color: #fff;
}
.fd-topbar--solid {
  position: relative;
  color: var(--ink);
  padding-bottom: 22px;
}
.fd-brand img { width: auto; height: clamp(25px, 2vw, 31px); }
.fd-topbar:not(.fd-topbar--solid) .fd-brand img { filter: brightness(0) invert(1); }
.fd-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px clamp(12px, 2vw, 20px);
  margin-left: auto;
  font-size: var(--fs-small);
}
.fd-nav a {
  color: inherit;
  opacity: .86;
  padding: 8px 2px;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fd-nav a:hover { opacity: 1; }
.fd-nav__pill {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 10px 18px !important;
  font-weight: 650;
  opacity: 1 !important;
}
.fd-topbar--solid .fd-nav__pill {
  border-color: var(--rule);
  background: #efeae2;
}

.fd-hero {
  position: relative;
  min-height: min(760px, 88vh);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  color: #fff;
  background: #1f1a16;
}
.fd-hero__media,
.fd-hero__media picture,
.fd-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fd-hero__media img {
  object-fit: cover;
  object-position: 50% 44%;
}
.fd-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 16, 13, .52), rgba(20, 16, 13, .08) 34%, rgba(20, 16, 13, .74) 100%),
    linear-gradient(90deg, rgba(20, 16, 13, .78), rgba(20, 16, 13, .22) 58%, rgba(20, 16, 13, .56));
}
.fd-hero__inner {
  position: relative;
  z-index: 1;
  width: min(1160px, calc(100% - clamp(32px, 6vw, 72px)));
  margin: 0 auto;
  padding: clamp(132px, 18vh, 190px) 0 clamp(42px, 9vh, 86px);
}
.fd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral-1);
}
.fd-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.fd-hero h1 {
  margin: 0;
  max-width: 930px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 1.55rem + 6vw, 6.75rem);
  line-height: .91;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.fd-hero__copy {
  max-width: 660px;
  margin: clamp(18px, 3vh, 28px) 0 0;
  font-size: clamp(1.05rem, .95rem + .34vw, 1.28rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
}
.fd-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 4vh, 36px);
}
.fd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  border-radius: 999px;
  padding: 13px 22px;
  border: 1px solid transparent;
  font-weight: 750;
  font-size: var(--fs-small);
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fd-btn:active { transform: scale(.985); }
.fd-btn:focus-visible { outline: 2px solid var(--coral-1); outline-offset: 3px; }
.fd-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--coral-1), var(--coral-2));
  box-shadow: var(--shadow-btn);
}
.fd-btn--primary:hover { filter: saturate(108%) brightness(1.02); }
.fd-btn--ghost {
  color: inherit;
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .08);
}
.fd-btn--ghost:hover { background: rgba(255, 255, 255, .14); }
.fd-btn--soft {
  color: var(--ink);
  border-color: var(--rule);
  background: #efeae2;
}
.fd-btn--soft:hover { background: #e7e1d7; }
.fd-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.fd-strip {
  background: #211a16;
  color: rgba(255, 255, 255, .75);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.fd-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}
.fd-strip span {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-left: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fd-strip span:last-child { border-right: 1px solid rgba(255, 255, 255, .08); }

.fd-section { padding: clamp(58px, 9vh, 112px) 0; }
.fd-section--tight { padding-block: clamp(42px, 6vh, 74px); }
.fd-section--paper { background: #fff; border-block: 1px solid var(--rule-soft); }
.fd-section--dark { background: #1f1a16; color: #fff; }
.fd-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr);
  gap: clamp(22px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(30px, 5vh, 56px);
}
.fd-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sechead);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--head-mute);
  text-wrap: balance;
}
.fd-section--dark .fd-head h2 { color: rgba(255, 255, 255, .72); }
.fd-head h2 em {
  font-style: normal;
  color: var(--espresso);
}
.fd-section--dark .fd-head h2 em { color: #fff; }
.fd-head p {
  margin: 0;
  max-width: 42ch;
  color: var(--ink-2);
}
.fd-section--dark .fd-head p { color: rgba(255, 255, 255, .72); }

.fd-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.fd-step {
  min-height: 230px;
  padding: clamp(18px, 2.5vw, 28px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, .56);
}
.fd-step__num {
  display: block;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  color: var(--coral-ink);
}
.fd-step h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.18rem + .64vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--espresso);
}
.fd-step p {
  margin: 12px 0 0;
  font-size: var(--fs-small);
  line-height: 1.48;
  color: var(--ink-2);
}

.fd-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.fd-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 1px 2px rgba(26, 22, 19, .04), 0 22px 42px -34px rgba(26, 22, 19, .24);
}
.fd-card__tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(216, 73, 44, .24);
  background: rgba(242, 94, 64, .1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--coral-ink);
}
.fd-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.05vw, 2.2rem);
  line-height: 1.02;
  color: var(--espresso);
  letter-spacing: -.01em;
}
.fd-card p {
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.fd-card ul {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.fd-card li {
  position: relative;
  padding-left: 17px;
}
.fd-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral-2);
}

.fd-proof {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.fd-sticker {
  max-width: 470px;
  margin-inline: auto;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 30px 80px -44px rgba(0, 0, 0, .5);
}
.fd-sticker__top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 34px;
}
.fd-sticker__brand {
  display: grid;
  gap: 5px;
}
.fd-sticker__brand strong {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.45rem);
  line-height: .95;
  color: var(--espresso);
}
.fd-sticker__brand span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fd-qr {
  flex: 0 0 auto;
  width: clamp(116px, 12vw, 150px);
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  background:
    linear-gradient(90deg, var(--espresso) 8px, transparent 8px) 0 0 / 18px 18px,
    linear-gradient(var(--espresso) 8px, transparent 8px) 0 0 / 18px 18px,
    #fff;
  image-rendering: pixelated;
}
.fd-sticker h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 1.7rem + 2.6vw, 4rem);
  line-height: .9;
  color: var(--espresso);
  letter-spacing: -.03em;
}
.fd-sticker p {
  margin: 16px 0 0;
  color: var(--ink-2);
  line-height: 1.45;
}
.fd-proof__copy .fd-eyebrow { color: var(--coral-1); }
.fd-proof__copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sechead);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: rgba(255, 255, 255, .72);
}
.fd-proof__copy h2 em {
  font-style: normal;
  color: #fff;
}
.fd-proof__copy p {
  max-width: 48ch;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .72);
}

.fd-demo-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
  padding-bottom: clamp(54px, 8vh, 96px);
}
.fd-demo-hero {
  padding-top: clamp(34px, 5vh, 58px);
}
.fd-demo-hero h1,
.fd-start-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.68rem + 5.5vw, 6.5rem);
  line-height: .91;
  letter-spacing: var(--tracking-display);
  color: var(--head-mute);
  text-wrap: balance;
}
.fd-demo-hero h1 em,
.fd-start-hero h1 em {
  font-style: normal;
  color: var(--espresso);
}
.fd-demo-hero p,
.fd-start-hero p {
  max-width: 650px;
  margin: 18px 0 0;
  color: var(--ink-2);
  font-size: clamp(1.04rem, .98rem + .25vw, 1.2rem);
  line-height: 1.55;
}
.fd-scenarios {
  display: grid;
  gap: 9px;
  margin-top: 26px;
}
.fd-scenario {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: start;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: rgba(255, 255, 255, .64);
  color: var(--ink);
  padding: 16px;
  text-align: left;
}
.fd-scenario:hover { border-color: rgba(216, 73, 44, .32); background: #fff; }
.fd-scenario.is-active {
  border-color: rgba(216, 73, 44, .45);
  background: rgba(242, 94, 64, .09);
}
.fd-scenario__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: var(--coral-ink);
}
.fd-scenario strong {
  display: block;
  color: var(--espresso);
}
.fd-scenario span:last-child {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: var(--fs-small);
}
.fd-launcher {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26, 22, 19, .04), 0 30px 64px -44px rgba(26, 22, 19, .28);
  overflow: hidden;
}
.fd-launcher__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 4vw, 36px);
  padding: clamp(20px, 3vw, 34px);
  border-bottom: 1px solid var(--rule-soft);
}
.fd-demo-qr {
  width: clamp(142px, 18vw, 220px);
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--canvas);
  padding: 10px;
}
.fd-demo-qr img,
.fd-demo-qr [data-fd-qr],
.fd-demo-qr [data-fd-qr] svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.fd-launcher__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem);
  line-height: .98;
  color: var(--espresso);
  letter-spacing: -.02em;
}
.fd-launcher__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.fd-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
}
.fd-launcher__body {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 34px);
}
.fd-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fd-provider {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px;
  text-align: left;
}
.fd-provider:hover { border-color: rgba(216, 73, 44, .32); background: #fff; }
.fd-provider img { width: 26px; height: 26px; }
.fd-provider strong {
  display: block;
  font-size: var(--fs-small);
  color: var(--ink);
}
.fd-provider span {
  display: block;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fd-provider__tag {
  border-radius: 999px;
  border: 1px solid rgba(216, 73, 44, .24);
  background: rgba(242, 94, 64, .09);
  color: var(--coral-ink);
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fd-copy-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.fd-status {
  min-height: 22px;
  color: var(--coral-ink);
  font-size: var(--fs-small);
}
.fd-prompt-box {
  width: 100%;
  min-height: 210px;
  resize: vertical;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--canvas);
  color: var(--ink);
  padding: 15px;
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.55;
}
.fd-prompt-box:focus { outline: 2px solid var(--coral-1); outline-offset: 2px; }
.fd-start-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-bottom: clamp(64px, 9vh, 110px);
}
.fd-start-hero {
  padding-top: clamp(34px, 5vh, 58px);
}
.fd-start-panel {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 1px 2px rgba(26, 22, 19, .04), 0 30px 64px -44px rgba(26, 22, 19, .28);
}
.fd-start-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.55rem);
  line-height: 1;
  color: var(--espresso);
}
.fd-start-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.fd-start-option {
  min-height: 148px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px;
  background: var(--canvas);
}
.fd-start-option strong {
  display: block;
  color: var(--espresso);
}
.fd-start-option span {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-small);
  line-height: 1.42;
  color: var(--ink-2);
}
.fd-start-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
}
.fd-start-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink-2);
  font-size: var(--fs-small);
}
.fd-start-list b {
  color: var(--coral-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
}
.fd-start-panel .fd-actions { margin-top: 30px; }

.fd-endcap {
  text-align: center;
  padding: clamp(62px, 9vh, 110px) 0;
}
.fd-endcap h2 {
  margin: 0 auto;
  max-width: 820px;
  font-family: var(--font-display);
  font-size: var(--fs-sechead);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--head-mute);
  text-wrap: balance;
}
.fd-endcap h2 em {
  font-style: normal;
  color: var(--espresso);
}
.fd-endcap .fd-actions { justify-content: center; }

.fd-footer {
  background: #1f1a16;
  color: rgba(255, 255, 255, .72);
  padding: 38px 0;
}
.fd-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.fd-footer img { width: 102px; height: auto; }
.fd-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-size: var(--fs-small);
}
.fd-footer a:hover { color: #fff; }

@media (max-width: 980px) {
  .fd-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-use-grid { grid-template-columns: 1fr; }
  .fd-proof,
  .fd-demo-grid,
  .fd-start-layout,
  .fd-head { grid-template-columns: 1fr; }
  .fd-demo-grid { gap: 28px; }
  .fd-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .fd-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .fd-nav { justify-content: flex-start; margin-left: 0; }
  .fd-hero { min-height: 820px; }
  .fd-hero__media img { object-position: 58% 50%; }
  .fd-hero__media::after {
    background:
      linear-gradient(180deg, rgba(20, 16, 13, .72), rgba(20, 16, 13, .18) 35%, rgba(20, 16, 13, .82) 100%),
      linear-gradient(90deg, rgba(20, 16, 13, .72), rgba(20, 16, 13, .38));
  }
  .fd-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-flow { grid-template-columns: 1fr; }
  .fd-launcher__top { grid-template-columns: 1fr; }
  .fd-demo-qr { width: min(220px, 58vw); }
  .fd-provider-grid,
  .fd-start-options,
  .fd-copy-row { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .fd-shell,
  .fd-topbar,
  .fd-hero__inner { width: min(100% - 28px, 1160px); }
  .fd-actions { align-items: stretch; }
  .fd-btn { width: 100%; }
  .fd-strip__inner { grid-template-columns: 1fr; }
}