/* ─────────────────────────────────────────────────────────────────────────────────────────
   /spreadsheet-to-database — the landing page for "spreadsheet to database" searches.

   Loaded by that page alone, after marketing.css and alternative.css, and it builds on both:
   the hero, the framed app window with its pins, the split sections, the screenshot frames,
   the honest lists and the FAQ are alternative.css's `.alt-*` kit, used as it is. What is here
   is what this page adds to it: a drawn spreadsheet (the visitor's own side of the story), the
   "typed / read back" list under the import's review step, and two small card grids.

   The same two rules as alternative.css, for the same reasons. A link needs two classes to
   take a colour (`body.marketing a { color: inherit }`), and the drawing is HTML and not SVG so
   its type stays the size it was set at.
   ───────────────────────────────────────────────────────────────────────────────────────── */

/* The four habits of the sheet, one colour each, used on the drawn cells and again on the
   list that says what the import made of them. Soft grounds from the field-type palette, so a
   date here is the colour a Date is in the product's own pictures. */
.ss {
    --ss-h: var(--amber-soft);      --ss-h-ink: var(--amber-ink-2);     --ss-h-dot: var(--amber);
    --ss-c: var(--relation-soft);   --ss-c-ink: #3F2CA8;                --ss-c-dot: var(--violet);
    --ss-d: var(--lookup-soft);     --ss-d-ink: #12527F;                --ss-d-dot: var(--sky);
    --ss-m: var(--formula-soft);    --ss-m-ink: #0C5C3B;                --ss-m-dot: var(--mint);
}

/* The app frame is 1,600px wide with a 290px rail, so on a phone the canvas starts further in
   than alternative.css's 1,728px frame does: at the grid, past the rail. */
@media (max-width: 640px) {
    .ss .alt-window-canvas { margin-left: -181px; }
}

/* ── The sheet as typed, and what came back ───────────────────────────────────────────── */
.ss-read {
    padding: clamp(18px, 2.6vw, 36px);
    border: 1px solid var(--border); border-radius: 22px; background: var(--card);
}
.ss-in .mini-label { display: block; margin-bottom: 12px; }
.ss-pan { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-2); border-radius: 10px; }
.ss-sheet {
    width: 100%; min-width: 720px; border-collapse: collapse; background: #fff;
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.35; color: var(--ink-900);
}
.ss-sheet th, .ss-sheet td { padding: 7px 10px; border: 1px solid #E3E1DA; text-align: left; white-space: nowrap; }
/* Column letters and row numbers: the two strips that say "this is a spreadsheet". */
.ss-sheet thead th, .ss-sheet tbody th {
    background: #F1EFE8; color: #8A8778; font-weight: 500; font-size: 11px; text-align: center;
}
.ss-sheet tbody th { width: 34px; }
.ss-sheet .is-head td { font-weight: 700; }
.ss-sheet .ss-num { text-align: right; }
.ss-sheet .ss-h { background: var(--ss-h); color: var(--ss-h-ink); }
.ss-sheet .ss-c { background: var(--ss-c); color: var(--ss-c-ink); }
.ss-sheet .ss-d { background: var(--ss-d); color: var(--ss-d-ink); }
.ss-sheet .ss-m { background: var(--ss-m); color: var(--ss-m-ink); }
.ss-in-foot { margin: 12px 0 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }

/* The hand-off between the two pictures: a rule, a sentence, a rule. */
.ss-arrow { display: flex; align-items: center; gap: 16px; margin: clamp(22px, 3vw, 34px) 0; }
.ss-arrow i { flex: 1 1 0; height: 1px; background: var(--border-2); }
.ss-arrow span {
    color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; text-align: center;
}

/* Typed, then read: four habits, each in its colour. */
.ss-said {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
    margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; list-style: none;
}
.ss-said li {
    display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 16px 18px;
    border: 1px solid var(--border); border-left: 4px solid var(--ss-dot); border-radius: 4px 14px 14px 4px;
    background: var(--ss-ground);
}
.ss-said .is-h { --ss-ground: var(--ss-h); --ss-dot: var(--ss-h-dot); }
.ss-said .is-c { --ss-ground: var(--ss-c); --ss-dot: var(--ss-c-dot); }
.ss-said .is-d { --ss-ground: var(--ss-d); --ss-dot: var(--ss-d-dot); }
.ss-said .is-m { --ss-ground: var(--ss-m); --ss-dot: var(--ss-m-dot); }
.ss-said b { color: var(--ink-900); font-size: 15.5px; letter-spacing: -.008em; }
.ss-said span { color: var(--ink-700, #3A4157); font-size: 13.5px; line-height: 1.45; }
.ss-said em { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(14,20,40,.12); color: var(--ink-900); font-size: 14px; font-style: normal; line-height: 1.5; }

.ss-actions { margin-top: clamp(28px, 3.6vw, 44px); }

/* ── The import's last screen, under the schema map ───────────────────────────────────── */
/* 546px of capture, shown at its own size: any wider and it is an enlargement. */
.ss-done { max-width: 546px; margin: clamp(32px, 4vw, 56px) auto 0; text-align: center; }

/* ── One customer ─────────────────────────────────────────────────────────────────────── */
/* The drawer is 560px wide and a thousand tall: shown at a width its type can be read at. */
.alt-shot-narrow.ss-drawer img { max-width: min(100%, 420px); }
/* The grid of customers, then the review card its two totals came from. Stacked: side by side
   each is drawn at half its size and neither can be read. */
/* minmax(0, 1fr), not the default track: an auto track is as wide as its widest content,
   which on a phone is a frame that pans, and the page then scrolls sideways with it. */
.ss-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.4vw, 44px); margin-top: clamp(40px, 5vw, 72px); }
.ss-wide { max-width: 1146px; }
.ss-origin { max-width: 900px; }

/* ── What it can do on day one ────────────────────────────────────────────────────────── */
.ss-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ss-cards li { padding: 22px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-lg); background: rgba(255,255,255,.04); }
.ss-cards b { display: block; color: var(--paper); font-size: 17px; letter-spacing: -.01em; }
.ss-cards span { display: block; margin-top: 8px; color: var(--ink-300); font-size: 14.5px; line-height: 1.55; }
.ss-rest-actions { justify-content: flex-start; margin-top: clamp(28px, 3.6vw, 44px); }

/* ── Where the file comes from ────────────────────────────────────────────────────────── */
.ss-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ss-ways li { display: flex; flex-direction: column; padding: 24px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.ss-ways b { font-size: 19px; letter-spacing: -.012em; }
.ss-ways p { margin: 10px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.ss-ways .alt-more { margin-top: auto; padding-top: 16px; align-self: flex-start; }

/* ── Narrower ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ss-said { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .ss-cards, .ss-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ss-said { grid-template-columns: minmax(0, 1fr); }
    .ss-read { padding: 16px 14px; border-radius: 16px; }
    .ss-arrow span { letter-spacing: .06em; }
    .ss-arrow i { flex-basis: 12px; flex-grow: 0; }
    .ss-arrow { justify-content: center; }
    .ss-actions .btn, .ss-rest-actions .btn { width: 100%; justify-content: center; }
    /* The drawer is a tall, narrow frame: less of the dotted field around it, more of it. */
    .alt-shot-narrow.ss-drawer { padding: 14px; }
}