.landing-page {
  --landing-ink: #172033;
  --landing-muted: #5d6878;
  --landing-subtle: #66707f;
  --landing-line: #d8e2e8;
  --landing-blue: #0068e8;
  --landing-blue-strong: #004fb8;
  --landing-blue-soft: #eaf3ff;
  --landing-green: #16775a;
  --landing-paper: rgba(255, 255, 255, 0.9);
  --landing-paper-soft: rgba(248, 252, 251, 0.92);
  --landing-control-height: 54px;
  --landing-radius-sm: 8px;
  --landing-radius-lg: 16px;
}

/* The 44px target stays — this is a touch surface — but it is now the row height rather
   than a floor with an 8px gap stacked on top of a 16px body size. Footer navigation is
   navigation, not prose; 14px reads as a list you scan. */
.landing-page .site-footer .footer-link-group a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.004em;
}

.landing-page .site-footer .footer-link-group a:hover,
.landing-page .site-footer .footer-link-group a:focus-visible {
  color: var(--blue-strong);
}

/* Demo: public form to Google record */
.landing-demo-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(340px, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: 24px;
}

/* Raised, tactile glass. The interactive preview is the one surface on the page a visitor
   should want to reach out and touch, so it gets a deeper two-layer shadow and a crisp
   bevel rather than the ambient lift other public cards use. */
:is(.landing-demo-console, .landing-sheet-preview) {
  min-width: 0;
  border: 1px solid var(--demo-glass-border);
  outline: 1px solid var(--demo-glass-outline);
  outline-offset: -1px;
  border-radius: var(--landing-radius-lg);
  background: var(--demo-glass-fill);
  box-shadow: var(--demo-glass-shadow);
  backdrop-filter: blur(16px) saturate(1.1);
}

.landing-demo-console {
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 24px;
}

.landing-demo-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.landing-demo-header h3 {
  margin: 0;
  color: var(--landing-ink);
  font-size: 16px;
}

.landing-demo-kicker,
.landing-sheet-preview__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--landing-blue-strong);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.landing-demo-tabs {
  height: var(--landing-control-height);
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(76px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--landing-line);
  border-radius: 8px;
  background: #f3f6f7;
}

.landing-demo-tab {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: var(--landing-muted);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.landing-demo-tab svg,
.landing-demo-submit svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-demo-tab:hover {
  color: var(--landing-blue-strong);
  background: rgba(255, 255, 255, 0.7);
}

.landing-demo-tab.active,
.landing-demo-tab[aria-selected="true"] {
  color: var(--landing-blue-strong);
  background: var(--landing-blue-soft);
  box-shadow: inset 0 0 0 1px rgba(0, 104, 232, 0.1);
}

.landing-demo-panel {
  min-width: 0;
  margin: 0;
}

.landing-demo-panel[hidden] {
  display: none;
}

.landing-demo-form label {
  display: grid;
  gap: 8px;
  color: var(--landing-muted);
  font-size: 14px;
  font-weight: 600;
}

.landing-demo-form label + label {
  margin-top: 14px;
}

.landing-demo-form :is(input, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 12px 12px;
  border: 1px solid var(--landing-line);
  border-radius: var(--landing-radius-sm);
  outline: 0;
  color: var(--landing-ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 2px rgba(23, 67, 92, 0.04);
}

.landing-demo-form textarea {
  min-height: 118px;
  resize: vertical;
}

/* iOS zooms the whole page when a form control under 16px takes focus, and these take focus: they
   are `readonly` with `tabindex="-1"`, which keeps them out of the tab order but does nothing about
   a tap. So the preview would swallow the page the first time a phone reader touched it. The size
   is raised only where the pointer is coarse, which leaves the panel's desktop proportions alone. */
@media (pointer: coarse) {
  .landing-demo-form :is(input, textarea) {
    font-size: 16px;
  }
}

.landing-demo-form input:focus,
.landing-demo-form textarea:focus {
  border-color: var(--landing-blue);
  box-shadow: 0 0 0 3px rgba(0, 104, 232, 0.11);
}

.landing-demo-submit {
  min-height: 48px;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid #005fd6;
  border-radius: var(--landing-radius-sm);
  color: #ffffff;
  background: var(--landing-blue);
  box-shadow: 0 5px 14px rgba(0, 104, 232, 0.2);
  cursor: pointer;
  font-weight: 500;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.landing-demo-submit:hover {
  background: var(--landing-blue-strong);
  box-shadow: 0 7px 18px rgba(0, 79, 184, 0.22);
  transform: translateY(-1px);
}

.landing-demo-submit:active {
  transform: translateY(1px);
}

/* This button plays the "sending" beat of an automated show, not a real control - the
   press/lift affordances would promise a click does something. Left full-colour rather
   than dimmed, since it is not broken, it just is not the reader's to press. */
.landing-demo-submit:disabled {
  cursor: default;
}

.landing-demo-submit:disabled:hover,
.landing-demo-submit:disabled:active {
  background: var(--landing-blue);
  box-shadow: 0 5px 14px rgba(0, 104, 232, 0.2);
  transform: none;
}

.landing-demo-status {
  min-height: 24px;
  margin: 12px 0 0;
  color: var(--landing-muted);
  font-size: 14px;
}

.landing-demo-status.success {
  color: var(--landing-green);
}

.landing-demo-status.error {
  color: #a33443;
}

.landing-demo-note {
  margin: 12px 0 0;
  color: var(--landing-muted);
  font-size: 14px;
}

.landing-sheet-preview {
  overflow: hidden;
}

.landing-sheet-preview__header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px;
  border-bottom: 1px solid var(--landing-line);
  background: var(--landing-paper-soft);
}

.landing-sheet-preview__header strong {
  display: block;
  color: var(--landing-ink);
  font-size: 16px;
  font-weight: 500;
}

.landing-preview-status {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #cce6dc;
  border-radius: 999px;
  color: #12664e;
  background: #edf9f4;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.landing-preview-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1b8a68;
  box-shadow: 0 0 0 3px rgba(27, 138, 104, 0.12);
}

.landing-sheet-preview__body {
  min-width: 0;
  overflow-x: auto;
}

/* A real <table> rather than a grid of divs: native table layout keeps the row-number
   gutter and the data cells in the same row exactly the same height with no JS measuring,
   which a separately-positioned gutter column could not promise once rows wrap to
   different heights. The column-letter bar and row-number gutter are ordinary header
   cells styled to read as Sheets chrome - see the aria-hidden ones in the markup. */
.landing-preview-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  --gsheet-line: #e1e3e6;
  --gsheet-gutter-bg: #f8f9fa;
  --gsheet-gutter-ink: #5f6368;
}

.landing-preview-table :is(th, td) {
  padding: 12px 12px;
  border: 1px solid var(--gsheet-line);
  border-top: 0;
  border-left: 0;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}

.landing-preview-table th {
  color: var(--landing-subtle);
  background: rgba(247, 250, 251, 0.72);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-wrap: normal;
}

.landing-preview-table td {
  color: var(--landing-ink);
  font-size: 14px;
  line-height: 1.42;
}

/* Column-letter bar and row-number gutter: the sheet's own chrome, not data. Centred,
   monospaced-feeling, and a shade greyer than the field-name header row so the two
   header idioms (Sheets chrome vs. this workflow's column names) stay legible as two
   different things. */
.gsheet-colbar :is(.gsheet-corner, .gsheet-colletter),
.gsheet-rownum {
  padding: 4px 6px;
  border-color: var(--gsheet-line);
  background: var(--gsheet-gutter-bg);
  color: var(--gsheet-gutter-ink);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
}

.gsheet-colletter {
  min-width: 0;
}

td.gsheet-rownum {
  color: var(--gsheet-gutter-ink);
  font-size: 12px;
}

.landing-preview-table th:nth-child(1),
.landing-preview-table td:nth-child(1) { width: 36px; }
.landing-preview-table th:nth-child(2),
.landing-preview-table td:nth-child(2) { width: 12%; }
.landing-preview-table th:nth-child(3),
.landing-preview-table td:nth-child(3) { width: 18%; }
.landing-preview-table th:nth-child(4),
.landing-preview-table td:nth-child(4) { width: 25%; }
.landing-preview-table th:nth-child(5),
.landing-preview-table td:nth-child(5) { width: 45%; }

/* The row the simulation just wrote gets the same blue selection ring Sheets draws
   around the active cell, so "a row just landed" reads the way it does in the product
   this is a preview of, not as a generic table highlight. */
.landing-preview-row-flash {
  animation: landingRowFlash 1400ms ease;
  position: relative;
}

.landing-preview-row-flash td:not(.gsheet-rownum) {
  box-shadow: inset 0 0 0 1.5px var(--landing-blue);
}

@keyframes landingRowFlash {
  0% { background: rgba(0, 104, 232, 0.14); }
  100% { background: transparent; }
}

@media (max-width: 1120px) {
}

@media (max-width: 960px) {
  .landing-page .landing-demo-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 620px) {
  body.landing-page {
    --landing-control-height: 54px;
  }

  .landing-page .landing-demo-console {
    gap: 16px;
    padding: 16px;
  }

  .landing-page .landing-demo-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .landing-page .landing-demo-tabs {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-page .landing-demo-submit {
    width: 100%;
  }

  .landing-page .landing-sheet-preview__header {
    min-height: 72px;
    padding: 12px 16px;
  }

  .landing-page .landing-preview-status {
    min-height: 30px;
    padding: 0 8px;
  }

  .landing-page .landing-sheet-preview__body {
    overflow: visible;
    padding: 12px;
  }

  .landing-page :is(.landing-preview-table, .landing-preview-table tbody, .landing-preview-table tr, .landing-preview-table td) {
    width: 100%;
    display: block;
  }

  .landing-page .landing-preview-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .landing-page .landing-preview-table tbody {
    display: grid;
    gap: 8px;
  }

  .landing-page .landing-preview-table tr {
    overflow: hidden;
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
  }

  .landing-page .landing-preview-table td,
  .landing-page .landing-preview-table td:nth-child(n) {
    width: 100%;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* The Sheets row-number gutter is chrome for the grid layout, not a field this card
     view has room to spare a row for. */
  .landing-page .landing-preview-table td.gsheet-rownum {
    display: none;
  }

  .landing-page .landing-preview-table td::before {
    content: attr(data-label);
    color: var(--landing-subtle);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }

  .landing-page .landing-preview-table td:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 360px) {
  body.landing-page .landing-sheet-preview__header {
    align-items: flex-start;
  }

  body.landing-page .landing-preview-status {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.landing-page .landing-demo-submit {
    transition: none;
  }

  body.landing-page .landing-preview-row-flash {
    animation: none;
  }
}