/* ═══════════════════════════════════════════════════════════════
   SHIPSHOT — start chooser
   The "How do you want to start?" dialog behind every public
   "Start free" call to action, on the static Home and in the SPA.

   Two panes. On the left, the question and four answers as a plain
   numbered list — rows and hairlines, the way the pricing ledger on
   Home is set, not a grid of boxed cards. On the right, a stage that
   shows what the answer under the cursor actually opens.

   Self-contained on purpose: Home (public/home/home.css) and the
   React shell (src/styles.css) define different token names for the
   same palette, and this sheet loads on both. Everything it needs is
   declared on .ssc-root, so neither surface can shift it and it can
   never leak a rule onto theirs.
   ═══════════════════════════════════════════════════════════════ */

.ssc-root {
  --ssc-space: #0E0D13;
  --ssc-paper: #14131B;
  --ssc-card: #1D1B26;
  --ssc-ink: #F1EFF7;
  --ssc-soft: #B2ADBF;
  --ssc-faint: #8B859A;
  --ssc-coral: #F38B70;
  --ssc-amber: #F3C493;
  --ssc-lilac: #C6B7E2;
  --ssc-line: rgba(255, 255, 255, .08);
  --ssc-line-strong: rgba(255, 255, 255, .14);
  --ssc-font: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ssc-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ssc-ease: cubic-bezier(.16, 1, .3, 1);

  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ssc-ink);
  font-family: var(--ssc-font);
  /* The dialog carries its own direction (see build() in start-chooser.js), so
     it carries its own alignment too. Home pins `text-align: left` on Arabic
     pages for its page grids; inheriting that would left-align every Arabic
     line inside a dialog that reads right to left. */
  text-align: start;
  -webkit-font-smoothing: antialiased;
}

.ssc-root[hidden] { display: none !important; }
.ssc-root * { box-sizing: border-box; }
.ssc-root ::selection { background: var(--ssc-coral); color: #201720; }

.ssc-veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 12, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: ssc-veil-in .26s ease both;
}

.ssc-panel {
  position: relative;
  width: min(1000px, 100%);
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  overflow: hidden;
  border: 1px solid var(--ssc-line);
  border-radius: 18px;
  background: var(--ssc-paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(0, 0, 0, .5), 0 40px 80px -20px rgba(0, 0, 0, .85);
  animation: ssc-panel-in .4s var(--ssc-ease) both;
}

.ssc-main {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px 36px 28px;
}

/* ─────────────────────────── header ─────────────────────────── */

.ssc-head { position: relative; }

/* Block-level rather than inline: an inline-flex box is an atomic inline with
   no strong character of its own, so under Home's Arabic `unicode-bidi:
   plaintext` its line resolved left-to-right and the lockup sat against the
   wrong edge. As a block-level flex its items simply pack at the inline start.
   Same reasoning for .ssc-back and .ssc-cap below. */
.ssc-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--ssc-coral);
  font: 500 10px/1.5 var(--ssc-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.ssc-kicker::before { content: ''; width: 18px; height: 1px; background: currentColor; }
.ssc-kicker i { font-style: normal; color: var(--ssc-faint); }

.ssc-title {
  margin: 0;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -.045em;
  font-weight: 600;
  text-wrap: balance;
}

.ssc-title em { font-style: normal; color: var(--ssc-coral); }

.ssc-lede {
  margin: 10px 0 0;
  max-width: 52ch;
  color: var(--ssc-soft);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}

.ssc-close {
  position: absolute;
  z-index: 2;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--ssc-soft);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color .18s, background .18s;
}

.ssc-close:hover { color: var(--ssc-ink); background: rgba(255, 255, 255, .08); }
.ssc-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ──────────────────────────── doors ─────────────────────────── */

.ssc-doors {
  margin-top: 26px;
  border-top: 1px solid var(--ssc-line);
}

.ssc-door {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 14px;
  width: 100%;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid var(--ssc-line);
  border-radius: 0;
  color: inherit;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* A quiet wash behind the whole row, bleeding past the column so the hairlines
   stay put. Drawn as a pseudo so the border-bottom does not move with it. */
.ssc-door::before {
  content: '';
  position: absolute;
  inset: 0 -14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  opacity: 0;
  transition: opacity .2s;
}

.ssc-door:hover::before,
.ssc-door:focus-visible::before,
.ssc-door.is-active::before { opacity: 1; }

.ssc-door > * { position: relative; }

.ssc-door-n {
  color: var(--ssc-faint);
  font: 500 11px/1 var(--ssc-mono);
  letter-spacing: .06em;
  transition: color .2s;
}

.ssc-door:hover .ssc-door-n,
.ssc-door:focus-visible .ssc-door-n,
.ssc-door.is-active .ssc-door-n { color: var(--ssc-coral); }

.ssc-door-body { display: block; min-width: 0; }

.ssc-door b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.ssc-door-desc {
  display: block;
  margin-top: 4px;
  color: var(--ssc-faint);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}

.ssc-door-end {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline-start: 6px;
}

.ssc-tag {
  color: var(--ssc-coral);
  font: 500 10px/1 var(--ssc-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ssc-tag--pro { color: var(--ssc-lilac); }

.ssc-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ssc-line-strong);
  border-radius: 50%;
  color: var(--ssc-soft);
  transition: color .2s, background .2s, border-color .2s, transform .3s var(--ssc-ease);
}

.ssc-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[dir='rtl'] .ssc-arrow svg { transform: scaleX(-1); }

.ssc-door:hover .ssc-arrow,
.ssc-door:focus-visible .ssc-arrow {
  color: #291A1A;
  border-color: var(--ssc-coral);
  background: var(--ssc-coral);
  transform: translateX(2px);
}

[dir='rtl'] .ssc-door:hover .ssc-arrow,
[dir='rtl'] .ssc-door:focus-visible .ssc-arrow { transform: translateX(-2px); }

/* ──────────────────────────── footer ────────────────────────── */

.ssc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  margin-top: 18px;
  color: var(--ssc-faint);
  font-size: 12.5px;
  line-height: 1.5;
}

.ssc-foot-note { display: flex; align-items: center; gap: 9px; }

.ssc-foot-note i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ssc-coral);
  box-shadow: 0 0 0 4px rgba(243, 139, 112, .1);
}

.ssc-foot a {
  color: var(--ssc-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .22);
}

.ssc-foot a:hover { color: var(--ssc-ink); }

/* ──────────────────────────── stage ─────────────────────────── */

/* What the answer under the cursor opens. Decorative: the rows carry the
   words, this carries the picture. */
.ssc-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-inline-start: 1px solid var(--ssc-line);
  background:
    radial-gradient(70% 50% at 50% 100%, rgba(243, 139, 112, .1), transparent 70%),
    var(--ssc-space);
}

.ssc-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 36px 28px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .5s var(--ssc-ease);
  pointer-events: none;
}

.ssc-scene.is-active { opacity: 1; transform: none; }

.ssc-art { position: relative; display: flex; align-items: center; justify-content: center; }

.ssc-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ssc-soft);
  font: 500 10.5px/1.5 var(--ssc-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ssc-cap::before { content: ''; width: 14px; height: 1px; background: var(--ssc-coral); }

/* Template: three free sets, fanned. */
.ssc-peek { display: flex; align-items: flex-end; }

.ssc-peek img {
  width: 92px;
  height: 199px;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--ssc-card);
  box-shadow: 0 18px 34px -10px rgba(0, 0, 0, .7);
  transition: transform .5s var(--ssc-ease);
}

.ssc-peek img:nth-child(1) { transform: translate(14px, 10px) rotate(-7deg); }
.ssc-peek img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-6px); }
.ssc-peek img:nth-child(3) { transform: translate(-14px, 10px) rotate(7deg); }


/* Upload: a phone under viewfinder marks, the same brackets as the app icon. */
.ssc-vf {
  position: relative;
  width: 178px;
  height: 250px;
  display: grid;
  place-items: center;
}

.ssc-vf::before,
.ssc-vf::after,
.ssc-vf i::before,
.ssc-vf i::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ssc-coral);
}

.ssc-vf::before { top: 0; left: 0; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.ssc-vf::after { top: 0; right: 0; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.ssc-vf i::before { bottom: 0; left: 0; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.ssc-vf i::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

.ssc-phone {
  width: 104px;
  height: 214px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 22px;
  background: #0A0A0F;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(0, 0, 0, .8);
}

.ssc-phone span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .1), transparent 45%),
    linear-gradient(180deg, #2B2536, #1A1723);
}

/* A few strokes standing in for a screen, so the frame is not framing nothing. */
.ssc-phone span::before {
  content: '';
  position: absolute;
  inset: 22px 12px auto;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .28);
  box-shadow: 0 16px 0 -2px rgba(255, 255, 255, .12), 0 30px 0 -2px rgba(255, 255, 255, .12), 0 44px 0 -2px rgba(255, 255, 255, .08);
}

.ssc-phone span::after {
  content: '';
  position: absolute;
  inset: auto 12px 14px;
  height: 26px;
  border-radius: 8px;
  background: var(--ssc-coral);
  opacity: .9;
}

.ssc-readout {
  position: absolute;
  inset-inline-end: 0;
  top: -22px;
  color: var(--ssc-faint);
  font: 500 10px/1 var(--ssc-mono);
  letter-spacing: .08em;
  white-space: nowrap;
}

/* Store link: an address, then the drafts it turns into. */
.ssc-store { display: flex; flex-direction: column; align-items: center; gap: 0; }

.ssc-field-art {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 256px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ssc-line-strong);
  border-radius: 10px;
  background: rgba(0, 0, 0, .3);
  color: var(--ssc-soft);
  font: 500 11.5px/1 var(--ssc-mono);
  direction: ltr;
  white-space: nowrap;
}

.ssc-field-art::after {
  content: '';
  width: 6px;
  height: 14px;
  background: var(--ssc-coral);
  animation: ssc-blink 1.1s steps(2, start) infinite;
}

.ssc-store-wire {
  width: 1px;
  height: 34px;
  background: repeating-linear-gradient(180deg, var(--ssc-line-strong) 0 3px, transparent 3px 7px);
}

.ssc-drafts { display: flex; gap: 8px; }

.ssc-drafts i {
  width: 38px;
  height: 82px;
  border: 1px solid var(--ssc-line-strong);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent);
}

.ssc-drafts i:nth-child(1) { border-color: rgba(243, 139, 112, .6); background: linear-gradient(180deg, rgba(243, 139, 112, .28), rgba(243, 139, 112, .06)); }
.ssc-drafts i:nth-child(3) { opacity: .7; }
.ssc-drafts i:nth-child(4) { opacity: .45; }
.ssc-drafts i:nth-child(5) { opacity: .25; }

/* Blank: one empty page on a dot grid. */
.ssc-page {
  position: relative;
  width: 128px;
  height: 262px;
  border: 1px solid var(--ssc-line-strong);
  border-radius: 8px;
  background:
    radial-gradient(rgba(255, 255, 255, .16) .8px, transparent 1px) 0 0 / 14px 14px,
    var(--ssc-card);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8);
}

.ssc-page::before,
.ssc-page::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ssc-coral);
  transform: translate(-50%, -50%);
}

.ssc-page::before { width: 16px; height: 1.5px; }
.ssc-page::after { width: 1.5px; height: 16px; }

/* ─────────────────────── store-link view ────────────────────── */

.ssc-view[hidden] { display: none !important; }

.ssc-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin: -6px 0 18px -6px;
  padding: 6px 8px 6px 6px;
  border: 0;
  border-radius: 8px;
  color: var(--ssc-soft);
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 520;
  cursor: pointer;
  transition: color .18s, background .18s;
}

[dir='rtl'] .ssc-back { margin-inline-start: -6px; margin-inline-end: 0; }
.ssc-back:hover { color: var(--ssc-ink); background: rgba(255, 255, 255, .06); }
.ssc-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir='rtl'] .ssc-back svg { transform: scaleX(-1); }

.ssc-form { margin-top: 24px; }

.ssc-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ssc-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--ssc-line-strong);
  border-radius: 10px;
  color: var(--ssc-ink);
  background: rgba(0, 0, 0, .28);
  font: inherit;
  font-size: 14px;
  transition: border-color .18s, background .18s;
}

/* A store URL reads left to right in every language, and so does the example
   in the placeholder. Home's Arabic rules set `direction: rtl` on every input
   on the page; this one is the exception. */
.ssc-input { direction: ltr; text-align: start; }
.ssc-input::placeholder { color: #6E6879; }
.ssc-input:focus { outline: none; border-color: rgba(243, 139, 112, .7); background: rgba(0, 0, 0, .36); }
.ssc-input[aria-invalid='true'] { border-color: #E07A7A; }

.ssc-submit {
  flex: none;
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  color: #291A1A;
  background: var(--ssc-coral);
  box-shadow: inset 0 1px rgba(255, 212, 188, .55);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.ssc-submit:hover { background: #FFA189; transform: translateY(-1px); }
.ssc-submit:active { transform: none; }

.ssc-hint {
  margin: 14px 0 0;
  color: var(--ssc-faint);
  font-size: 12.5px;
  line-height: 1.55;
}

.ssc-error {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #F0B0B0;
  font-size: 12.5px;
  line-height: 1.5;
}

/* The mark is drawn rather than written into the element: the message itself
   is replaced as text, and a child node would be wiped with it. */
.ssc-error::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E07A7A;
}

.ssc-examples {
  margin: 22px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--ssc-line);
  color: var(--ssc-faint);
  font: 500 10.5px/1.6 var(--ssc-mono);
  letter-spacing: .04em;
}

.ssc-examples b { display: block; margin-bottom: 4px; color: var(--ssc-soft); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.ssc-examples span { direction: ltr; unicode-bidi: isolate; }
.ssc-examples span + span::before { content: '·'; margin: 0 8px; color: var(--ssc-line-strong); }

/* ───────────────────────── focus ring ───────────────────────── */

.ssc-root :where(a, button):focus-visible {
  outline: 2px solid var(--ssc-amber);
  outline-offset: 3px;
}

/* The field shows focus through its own border; a second ring around a box
   that already has one reads as an error. */
.ssc-input:focus-visible { outline: none; }

.ssc-door:focus-visible { outline-offset: -2px; border-radius: 12px; }

/* ─────────────────────────── narrow ─────────────────────────── */

@media (max-width: 860px) {
  .ssc-panel { grid-template-columns: minmax(0, 1fr) 300px; }
  .ssc-main { padding: 28px 28px 24px; }
}

@media (max-width: 760px) {
  .ssc-root { padding: 0; place-items: end center; }

  .ssc-panel {
    width: 100%;
    max-height: 94dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 136px minmax(0, 1fr);
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    animation-name: ssc-sheet-in;
  }

  /* The stage becomes a short band across the top of the sheet. It shows the
     template scene and does not follow a finger the way it follows a cursor. */
  .ssc-stage { order: -1; border-inline-start: 0; border-bottom: 1px solid var(--ssc-line); }
  .ssc-scene { padding: 0; gap: 0; }
  .ssc-cap { display: none; }
  .ssc-art { zoom: .5; }
  .ssc-readout { display: none; }

  .ssc-main { padding: 22px 20px 20px; }
  .ssc-kicker { margin-bottom: 12px; }
  .ssc-title { font-size: 24px; }
  .ssc-lede { margin-top: 8px; font-size: 13px; }
  .ssc-close { inset-block-start: 10px; inset-inline-end: 10px; background: rgba(14, 13, 19, .7); }
  .ssc-doors { margin-top: 18px; }
  .ssc-door { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 10px; padding: 14px 0; }
  .ssc-door::before { inset: 0 -10px; }
  .ssc-door b { font-size: 15px; }
  .ssc-door-desc { font-size: 12.5px; }
  /* No cursor on a phone, so no row is "under" it: drop the standing wash and
     the arrow chips, keep the flags. The row itself is the button. */
  .ssc-door.is-active::before { opacity: 0; }
  .ssc-door.is-active .ssc-door-n { color: var(--ssc-faint); }
  .ssc-arrow { display: none; }
  .ssc-door-end { padding-inline-start: 4px; }
  .ssc-foot { margin-top: 14px; }
  .ssc-field { flex-direction: column; }
  .ssc-submit { width: 100%; }
}

@media (max-width: 760px) and (max-height: 620px) {
  .ssc-panel { max-height: 100dvh; border-radius: 0; grid-template-rows: minmax(0, 1fr); }
  .ssc-stage { display: none; }
}

/* ───────────────────────────── motion ───────────────────────── */

@keyframes ssc-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssc-blink { to { visibility: hidden; } }

@keyframes ssc-panel-in {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to { opacity: 1; transform: none; }
}

@keyframes ssc-sheet-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ssc-veil,
  .ssc-panel { animation-duration: .01ms; }

  .ssc-scene,
  .ssc-arrow,
  .ssc-peek img,
  .ssc-submit { transition-duration: .01ms; }

  .ssc-field-art::after { animation: none; }
  .ssc-door:hover .ssc-arrow,
  .ssc-door:focus-visible .ssc-arrow,
  .ssc-submit:hover { transform: none; }
}

@media (forced-colors: active) {
  .ssc-panel,
  .ssc-door,
  .ssc-input,
  .ssc-arrow { border-color: CanvasText; }
  .ssc-door::before { background: Highlight; }
}

.ssc-resume[hidden] { display: none; }
.ssc-resume { border: 1px solid #f58b6d; border-radius: 16px; margin-bottom: 12px; }