/* =============================================
   Loft — product page theme

   Loads after the shared style.css and rethemes it
   by overriding the token layer, so the shared nav,
   footer, and link rows follow without duplication.

   Colour and type are taken from Loft's own iOS design
   system (kmp1: iosApp/.../ContentRedesigned/DesignSystem.swift)
   rather than the website default. The rule the page
   follows throughout: cool surfaces are what you copied,
   warm surfaces are what Loft shows.
   ============================================= */

:root {
  /* Shared tokens, rethemed for this page */
  --paper: #EEF1F6;         /* slate ground — the world outside Loft */
  --ink: #1E293B;           /* DesignSystem.textPrimary */
  --ink-2: #475569;         /* DesignSystem.textSectionHeader */
  --ink-3: #5F6F85;         /* DesignSystem.textSecondary, AA-adjusted */
  --line: #DDE3EC;
  --line-strong: #C6CFDA;
  --accent: #3B82F6;        /* DesignSystem.primaryBlue */
  --accent-dark: #2563EB;

  --font-display: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  --font-body: 'Literata', 'Noto Sans SC', Georgia, serif;
  --font-mono: 'IBM Plex Mono', 'Noto Sans SC', monospace;

  /* Loft-specific */
  --loft-paper: #FFF9F1;    /* DesignSystem.brandMarkSurface — every reading surface */
  --loft-deep: #20252B;     /* DesignSystem.brandMarkCard */
  --loft-deep-ink: #F8F2E8; /* DesignSystem.brandMarkInk */
  --loft-deep-line: rgba(248, 242, 232, 0.18);
  --loft-orange: #F97316;   /* DesignSystem.ctaOrange — CTA and Pro only */
  --loft-orange-dark: #C2410C;

  --doc-gutter: 44px;
  --label-col: 136px;
}

.loft-page {
  font-size: 1rem;
  line-height: 1.72;
}

.loft-page .section-container {
  padding: 76px 24px;
}

.loft-page .navbar.scrolled {
  background: rgba(238, 241, 246, 0.9);
}

/* Selection is an affordance on this page — the source block
   asks to be copied — so it carries the product's own accent. */
.loft-page ::selection {
  background: var(--loft-orange);
  color: #fff;
}

/* =============================================
   Document heads

   Loft draws a rule under every heading it renders.
   The page borrows that, and leaves the Markdown
   source mark hanging in the margin beside it.
   ============================================= */

.doc-head {
  display: grid;
  grid-template-columns: var(--doc-gutter) minmax(0, 1fr);
  align-items: baseline;
  margin-bottom: 40px;
}

.doc-head > :last-child {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.doc-mark {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.doc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* =============================================
   Hero — the pitch, the source, and the screen
   it produces, in one composition
   ============================================= */

.loft-hero {
  padding: 132px 24px 40px;
}

.loft-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.loft-hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.loft-hero-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.loft-hero-meta .mono-label {
  color: var(--ink-3);
  line-height: 1.5;
}

.loft-hero-head {
  max-width: calc(var(--doc-gutter) + 960px);
  margin-bottom: 32px;
}

.loft-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.4vw, 4.1rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.loft-hero-title span {
  display: block;
}

.loft-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 52ch;
  margin-left: var(--doc-gutter);
  margin-bottom: 36px;
}

.loft-lede code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--ink);
  background: rgba(148, 163, 184, 0.2);
  border-radius: 4px;
  padding: 1px 5px;
}

.loft-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-left: var(--doc-gutter);
  margin-bottom: 56px;
}

.loft-cta .mono-label {
  color: var(--ink-3);
}

.loft-page .app-badge img {
  height: 46px;
}

/* --- The specimen: the source and the screen it becomes, side by side --- */

.specimen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 312px);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
  max-width: 960px;
  margin-left: var(--doc-gutter);
}

.spec-label {
  display: block;
  margin-bottom: 14px;
  color: var(--ink-3);
}

.spec-code {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 30px 26px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  line-height: 2.05;
  color: var(--ink);
  tab-size: 2;
}

.spec-code code {
  font: inherit;
  white-space: pre;
}

/* The syntax glyphs sit one step back from the content so the block
   reads as source without becoming a colour chart. They are still text
   a reader needs, so they stay above the AA contrast floor. */
.spec-code .md {
  color: var(--ink-3);
}

.spec-note {
  margin-top: 18px;
  font-size: 0.92rem;
  color: var(--ink-2);
  max-width: 46ch;
}

/* --- The specimen: screen --- */

.spec-shot {
  border-radius: 26px;
  overflow: hidden;
  background: var(--loft-paper);
  box-shadow: 0 30px 60px -30px rgba(30, 41, 59, 0.45),
              0 0 0 1px rgba(30, 41, 59, 0.08);
}

.spec-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* =============================================
   What Loft reads — the source marks as content
   ============================================= */

.syntax-list {
  margin-left: var(--doc-gutter);
}

.syntax-row {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: 12px 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.syntax-mark {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink-3);
  word-break: break-word;
}

.syntax-desc {
  font-size: 0.98rem;
  color: var(--ink);
}

/* =============================================
   After the first read
   ============================================= */

.after-list {
  margin-left: var(--doc-gutter);
}

.after-row {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.after-row .mono-label {
  color: var(--ink-3);
}

.after-row p {
  font-size: 0.98rem;
  color: var(--ink-2);
  max-width: 60ch;
}

/* =============================================
   Save, share, and Loft Pro
   ============================================= */

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-left: var(--doc-gutter);
}

.plan {
  background: var(--loft-paper);
  border: 1px solid #EFE2D2;
  border-radius: 14px;
  padding: 30px 28px;
}

.plan-pro {
  border-top: 3px solid var(--loft-orange);
}

.plan > .mono-label {
  display: block;
  margin-bottom: 14px;
  color: var(--ink-3);
}

.plan-pro > .mono-label {
  color: var(--loft-orange-dark);
}

.plan p {
  font-size: 0.96rem;
  color: var(--ink-2);
}

.craft-list {
  margin-top: 22px;
  border-top: 1px solid #EFE2D2;
}

.craft-list li {
  padding: 12px 0;
  border-bottom: 1px solid #EFE2D2;
  font-size: 0.92rem;
  color: var(--ink);
}

.craft-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.plan-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #EFE2D2;
  font-size: 0.92rem;
  color: var(--ink-3);
}

/* =============================================
   On your device — Loft's own dark surface
   ============================================= */

.device-band {
  background: var(--loft-deep);
  color: var(--loft-deep-ink);
}

.device-band .doc-head > :last-child {
  border-bottom-color: var(--loft-deep-line);
}

.device-band .doc-mark {
  color: rgba(248, 242, 232, 0.45);
}

.device-band p {
  font-size: 1.02rem;
  color: rgba(248, 242, 232, 0.82);
  max-width: 58ch;
  margin: 0 0 20px var(--doc-gutter);
}

.device-limit {
  margin: 36px 0 0 var(--doc-gutter);
  padding-top: 22px;
  border-top: 1px solid var(--loft-deep-line);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.8;
  color: rgba(248, 242, 232, 0.6);
  max-width: 62ch;
}

/* =============================================
   Screenshots and learn-more, reusing the shared
   components with this page's surfaces
   ============================================= */

.loft-page .app-shots-grid {
  margin-left: var(--doc-gutter);
}

.loft-page .shot-frame {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 44px -24px rgba(30, 41, 59, 0.4);
}

.loft-page .shot-frame img {
  border-radius: 0;
}

.loft-page .app-shot figcaption {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink-2);
}

.loft-page .app-link-rows {
  border-top: 0;
  margin-left: var(--doc-gutter);
}

.loft-page .app-link-row-text strong {
  font-weight: 700;
}

.loft-page .footer-brand p,
.loft-page .footer-links-col a,
.loft-page .footer-bottom p {
  font-family: var(--font-body);
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 860px) {
  .specimen {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .spec-screen {
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  :root {
    --doc-gutter: 0px;
    --label-col: 120px;
  }

  .loft-hero {
    padding: 108px 20px 24px;
  }

  .doc-head {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 32px;
  }

  .doc-mark {
    display: block;
    margin-bottom: 8px;
  }

  .loft-hero-meta {
    gap: 14px;
    margin-bottom: 28px;
  }

  .loft-hero-icon {
    width: 52px;
    height: 52px;
  }

  .plans {
    grid-template-columns: 1fr;
  }

  .spec-code {
    font-size: 0.78rem;
    padding: 20px 18px;
  }

  .syntax-row,
  .after-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}