/* ==========================================================================
   Compact layout for the public pages (home, features, pricing, about,
   contact, changelog, legal). Same content, less scrolling:
   - phones: cards become tight rows (icon left, text right), pricing becomes a
     swipeable row, tables stack, spacing is tighter;
   - desktop: slightly tighter sections and cards, the spec table in two columns.
   Loaded after style.css on public pages only (never the logged-in app).
   ========================================================================== */

/* ---------- info cards (lists we check, principles, ...): icon left, text right - every screen ---------- */
.info-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
.info-card-top { display: contents; }
.info-card-icon { grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; }
.info-card .info-tag { grid-column: 2; justify-self: start; margin-bottom: 2px; }
.info-card h3 { grid-column: 2; margin: 0; }
.info-card p { grid-column: 2; }
.info-card.info-card-wide { display: flex; align-items: center; }
.info-card-wide .info-wide-copy { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
@media (max-width: 1100px) { .info-card.info-card-wide { flex-direction: column; align-items: stretch; gap: 12px; } }

/* ---------- desktop & tablet ---------- */
@media (min-width: 761px) {
  .section { padding-top: 76px; padding-bottom: 76px; }
  .cta-banner { padding-top: 68px; padding-bottom: 68px; }
  .page-hero { padding-top: 60px; padding-bottom: 52px; }
  .feature-card { padding: 22px; }
  .feature-card .feature-icon { margin-bottom: 14px; }
  .feature-card h3 { font-size: 1.1rem; }
  .info-card { padding: 18px 20px 20px; }
  .tile { padding: 24px; }
  .price-card { padding: 26px; }
  .price-card ul { margin: 16px 0; }
  .price-card li { padding: 8px 0; }
}

/* Spec table: two columns of rows on wide screens (half the height) */
@media (min-width: 1101px) {
  #specs .section-inner { max-width: 1180px !important; }
  .spec-table-wrap { padding: 0; }
  .spec-table, .spec-table tbody { display: block; }
  .spec-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .spec-table tr { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 62%); border-bottom: 1px solid var(--border-soft); }
  .spec-table tr:nth-child(odd) { border-right: 1px solid var(--border-soft); }
  .spec-table th, .spec-table td { border-bottom: 0; padding: 12px 18px; }
  .spec-table th { width: auto; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  /* rhythm */
  .section { padding-top: 44px; padding-bottom: 44px; }
  .section-head { margin-bottom: 22px; }
  .section-title { font-size: 1.6rem; line-height: 1.2; }
  .section-sub { font-size: 0.92rem; }
  .group-head { margin-bottom: 16px; gap: 12px; }
  .group-head h2 { font-size: 1.3rem; }
  .group-head p { font-size: 0.86rem; }
  .cta-banner { padding-top: 48px; padding-bottom: 48px; }
  .page-hero { padding-top: 44px; padding-bottom: 38px; }

  /* card rows: icon on the left, title + text on the right */
  .feature-grid, .info-grid, .info-grid-4, .usecase-grid, .why-grid, .data-grid { gap: 10px !important; }
  .feature-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 13px; row-gap: 3px; align-items: start; padding: 14px 16px; }
  .feature-card .feature-icon { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; }
  .feature-card h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
  .feature-card p { grid-column: 2; font-size: 0.85rem; line-height: 1.5; }

  .info-card { padding: 14px 16px; }
  .info-card h3 { font-size: 0.98rem; }
  .info-card p { font-size: 0.85rem; line-height: 1.5; }

  .usecase { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; padding: 14px 16px; }
  .usecase > svg, .usecase > [data-lucide] { grid-row: 1 / span 2; margin: 2px 0 0; width: 24px; height: 24px; }
  .usecase h3 { margin: 0; font-size: 0.98rem; }
  .usecase p { grid-column: 2; font-size: 0.85rem; line-height: 1.5; }

  .why-item { gap: 12px; }
  .why-item p, .data-item p { font-size: 0.85rem; line-height: 1.5; }
  .data-item { padding: 12px 14px; }

  .tile { padding: 16px; }
  .tile .tile-icon { width: 38px; height: 38px; margin-bottom: 10px; }
  .tile h3 { font-size: 1.04rem; margin-bottom: 4px; }
  .tile p { font-size: 0.86rem; line-height: 1.5; }
  .tile-more { padding-top: 10px; }
  .bento, .bento-more { gap: 10px !important; margin-top: 10px; }

  /* home hero: the feature list in two columns */
  .hero-feats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px !important; }
  .hero-feats li { align-items: flex-start; }
  .hero-feats .hf-txt b { font-size: 0.86rem; line-height: 1.3; }
  .hero-feats .hf-txt small { font-size: 0.76rem; line-height: 1.35; }

  /* How it works / process steps: compact rows */
  .steps-flow { gap: 14px; }
  .step-flow-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; text-align: left; align-items: start; }
  .step-flow-item > :first-child { grid-row: 1 / span 2; margin: 0 !important; transform: scale(.82); transform-origin: top left; }
  .step-flow-item h3 { margin: 4px 0 2px; font-size: 1.02rem; }
  .step-flow-item p { max-width: none; margin: 0; font-size: 0.85rem; line-height: 1.5; }
  .timeline { gap: 14px; }
  .timeline-item p { font-size: 0.86rem; line-height: 1.55; }
  .timeline-item h3 { margin-top: 4px; font-size: 1rem; }
  .about-facts { gap: 10px; }
  .about-fact { padding: 14px 12px; }
  .about-fact b { font-size: 1.55rem; }

  /* home capability tiles: compact rows like the feature cards (the big tile keeps its visual) */
  .tile:not(.tile-big) { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 13px; row-gap: 3px; align-items: start; }
  .tile:not(.tile-big) .tile-icon { grid-row: 1 / span 2; margin: 0; }
  .tile:not(.tile-big) h3 { margin: 0; }
  .tile:not(.tile-big) p, .tile:not(.tile-big) .tile-more { grid-column: 2; }
  .tile-big .tile-visual { margin-top: 12px; }

  /* contact */
  .contact-line { flex-wrap: nowrap !important; gap: 10px !important; padding: 10px 12px !important; align-items: center; }
  .contact-line-body { flex: 1 1 auto !important; min-width: 0; }
  .contact-person .contact-line-body a { font-size: 0.84rem !important; }
  .contact-line .copy-btn { width: 34px !important; height: 34px !important; padding: 0 !important; justify-content: center; flex: none; }
  .contact-line .copy-btn .copy-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
  .contact-line-name { min-height: 0 !important; }
  .contact-person { gap: 8px; }
  .contact-card { padding: 18px; }
  .link-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .link-card { padding: 12px 14px; }

  /* pricing: the nine packages as a swipeable row (chips above jump to each) */
  .subs-grid { display: grid !important; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: 12px !important;
    padding: 6px 16px 14px !important; margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .subs-grid::-webkit-scrollbar { display: none; }
  .subs-grid > .price-card { scroll-snap-align: center; padding: 22px; }
  .subs-swipe { display: flex !important; }
  .price-card ul { margin: 14px 0; }
  .price-card li { padding: 7px 0; }

  /* spec tables stack: label above value */
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table tr { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
  .spec-table tr:last-child { border-bottom: 0; }
  .spec-table th, .spec-table td { padding: 0; border: 0; }
  .spec-table th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400, #8a8d91); margin-bottom: 2px; }
  .spec-table td { font-size: 0.9rem; color: var(--ink-700); }

  /* FAQ */
  .faq-question { padding-top: 14px; padding-bottom: 14px; }
}

@media (max-width: 360px) {
  .contact-person .contact-line-body a { white-space: normal !important; overflow-wrap: anywhere !important; }
}

/* "Swipe" hint above the pricing row - phones only */
.subs-swipe { display: none; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-500); }
.subs-swipe svg { width: 16px; height: 16px; color: var(--accent); }

/* ---------- changelog: one collapsible block per month ---------- */
.cl-month { border: 1px solid var(--border-subtle, var(--border)); border-radius: 14px; background: var(--surface);
  box-shadow: var(--shadow-card); margin: 0 0 14px; overflow: hidden; }
.cl-month > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.cl-month > summary::-webkit-details-marker { display: none; }
.cl-month > summary h2 { margin: 0 !important; font-size: 1.15rem; border: 0 !important; padding: 0 !important; }
.cl-month > summary .cl-count { font-size: 0.78rem; font-weight: 700; color: var(--ink-500); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; }
.cl-month > summary .cl-chev { margin-left: auto; width: 18px; height: 18px; color: var(--ink-400, #8a8d91); transition: transform .2s ease; }
.cl-month[open] > summary .cl-chev { transform: rotate(180deg); }
.cl-month > summary:hover h2 { color: var(--accent); }
.cl-month > ul { margin: 0 !important; padding: 4px 20px 16px !important; }
@media (max-width: 760px) {
  .cl-month > summary { padding: 14px 16px; }
  .cl-month > ul { padding: 2px 16px 14px !important; }
  .cl-month > ul li { font-size: 0.88rem; line-height: 1.55; }
}

/* ---------- pricing: the package chips ----------
   Desktop: all nine in a single row. Phones: one swipeable row (they also jump
   to each package in the swipeable package row below). */
@media (min-width: 1101px), (min-width: 861px) and (orientation: landscape) {
  .pkg-strip { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; gap: 8px !important; }
  .pkg-strip > .pkg-chip:last-child:nth-child(4n+1) { grid-column: auto !important; justify-self: stretch !important; width: auto !important; }
  .pkg-chip { padding-left: 6px !important; padding-right: 6px !important; }
}
@media (max-width: 760px) {
  .pkg-strip { display: flex !important; overflow-x: auto; scroll-snap-type: x proximity; gap: 8px !important;
    padding: 12px 16px 6px !important; margin-left: -16px; margin-right: -16px; scrollbar-width: none; }
  .pkg-strip::-webkit-scrollbar { display: none; }
  .pkg-strip > .pkg-chip, .pkg-strip > .pkg-chip:last-child:nth-child(2n+1) { flex: 0 0 116px; width: auto !important; justify-self: auto !important; grid-column: auto !important; scroll-snap-align: start; }
}

/* ==========================================================================
   In-between screens. Phones (<=520px) and desktops keep their layouts; these
   rules stop large phones / small tablets (521-760px) and tablets (761-860px,
   mobile header) from showing a stretched single column or a squeezed desktop
   layout.
   ========================================================================== */

/* section quick-nav: one swipeable line up to tablet size (centred when it fits) */
@media (max-width: 1100px) {
  .quick-nav { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .quick-nav::-webkit-scrollbar { display: none; }
  .quick-nav-link { flex-shrink: 0; }
  .quick-nav > :first-child { margin-left: auto; }
  .quick-nav > :last-child { margin-right: auto; }
}

/* phones: an odd last stat sits centred under the others */
@media (max-width: 520px) {
  .stats-strip > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* large phones & small tablets: two-column card grids */
@media (min-width: 521px) and (max-width: 760px) {
  .info-grid, .info-grid-4, .data-grid, .usecase-grid, .why-grid, .link-grid, .check-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .why-grid { gap: 16px 18px !important; }
  .bento-more { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stats-strip { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px 8px !important; }
  .stat-box .stat-num { font-size: 1.55rem; }
  .stat-box .stat-label { font-size: 0.72rem; line-height: 1.35; display: block; }
  .hero-actions { flex-direction: row !important; }
  .hero-actions > * { flex: 1 1 0; }
}

/* tablets (portrait iPads, 761-860px) */
@media (min-width: 761px) and (max-width: 860px) {
  .bento-more { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stats-strip { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px 10px !important; }
  .stat-box .stat-num { font-size: 1.75rem; }
  .stat-box .stat-label { font-size: 0.76rem; line-height: 1.35; display: block; }
  /* How it works: the three steps side by side */
  .steps-flow { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
  .step-flow-item h3 { font-size: 1.02rem; }
  .step-flow-item p { font-size: 0.84rem; line-height: 1.55; }
  /* feature cards: icon left, text right (shorter cards) */
  .feature-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 18px; }
  .feature-card .feature-icon { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; }
  .feature-card h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
  .feature-card p, .feature-card > :not(.feature-icon):not(h3) { grid-column: 2; }
  .feature-card p { font-size: 0.86rem; line-height: 1.55; }
}

/* home capability tiles: two columns on large phones and tablets */
@media (min-width: 521px) and (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: "big big" "mid1 mid2" "mid3 mid4" !important; }
  /* an odd last card spans the row instead of sitting alone */
  .bento-more > :last-child:nth-child(odd), .link-grid > :last-child:nth-child(odd),
  .usecase-grid > :last-child:nth-child(odd), .why-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* contact: the two people cards stack until there is room for both */
@media (min-width: 521px) and (max-width: 900px) {
  .contact-people { grid-template-columns: minmax(0, 1fr) !important; max-width: 620px; }
}
/* a fifth quick-answer link spans the row on every two-column screen */
@media (min-width: 521px) { .link-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* four feature cards: an even 2 x 2 on tablets and small laptops */
@media (min-width: 641px) and (max-width: 1100px) {
  .feature-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- pricing on iPads in portrait (768-1024px) - the phone pattern, sized for a tablet ----------
   the nine package chips become one swipeable line (each jumps to its plan) and
   the plans become a swipeable row: two at a time with the next one peeking in. */
@media (min-width: 761px) and (max-width: 860px), (min-width: 861px) and (max-width: 1100px) and (orientation: portrait) {
  .pkg-strip { display: flex !important; overflow-x: auto; scroll-snap-type: x proximity; gap: 10px !important;
    padding: 14px 24px 8px !important; margin-bottom: 18px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pkg-strip::-webkit-scrollbar { display: none; }
  .pkg-strip > .pkg-chip, .pkg-strip > .pkg-chip:last-child:nth-child(4n+1) { flex: 0 0 118px; width: auto !important; justify-self: auto !important; grid-column: auto !important; scroll-snap-align: start; }
  .pkg-strip > .pkg-chip:first-child { margin-left: auto; }
  .pkg-strip > .pkg-chip:last-child { margin-right: auto; }

  .subs-grid { display: grid !important; grid-auto-flow: column; grid-auto-columns: 44%; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: 18px !important;
    padding: 8px 24px 18px !important; max-width: none !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .subs-grid::-webkit-scrollbar { display: none; }
  .subs-grid > .price-card { scroll-snap-align: start; scroll-margin-left: 24px; }
  .subs-swipe { display: flex !important; margin-bottom: 4px; }
}