/* The Screenshots steps. Screens and art sit on a neutral stage so their own
   colours read true; the selection is the one blue ring. */

.proof { margin: 0; }
.proof img { display: block; width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--shadow-1); }

.tiles {
  list-style: none; margin: 0; padding: var(--s4); display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); background: var(--stage); border-radius: var(--r-lg);
}
.tiles:empty { display: none; }
.tile { display: grid; gap: 6px; }
.tile-bar { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.tile-n { margin-inline-end: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.dropzone {
  margin-top: 14px; padding: 28px 20px; display: grid; justify-items: center; gap: 4px; text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
}
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }

.brand-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 20px; margin: 14px 0; }
.brand-image { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.brand-image img, .brand-image .placeholder { width: 64px; height: 64px; object-fit: contain; border-radius: 22.37%; background: var(--stage); }
.brand-image .placeholder { display: grid; place-items: center; color: var(--ink-2); font-size: 12px; }
.swatches { display: flex; flex-wrap: wrap; gap: 20px; }
.swatch { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; }

/* ---------------------------------------------------------------- templates and strips */

.templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--s4); margin-top: 14px; }
.template-group { margin-top: var(--s5); }
.template-group > h2 { margin: 0; font-size: 20px; }
.template-group > p { margin: var(--s1) 0 0; }
/* A labelled choice: a segmented switch and its options on one line, wrapping when narrow. */
.choice-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.template { display: grid; gap: var(--s2); align-content: start; padding: 18px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.template.is-current { box-shadow: 0 0 0 2px var(--accent); }
.template-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.template-head h2 { margin: 0; font-size: 18px; }
.template-in-use { display: flex; align-items: center; gap: var(--s2); }
.card-after { margin: 0; display: grid; gap: 6px; }
.card-after .shot-open { padding: 10px; background: var(--stage); border-radius: var(--r-md); }
.card-after img { width: 100%; height: auto; display: block; border-radius: 4px; }
.card-after figcaption { margin: 0; }
/* The marker choices as pictures, one pressed. */
.marker-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 10px; margin: var(--s3) 0; }
.marker-option {
  display: grid; gap: 4px; justify-items: start; padding: 10px; text-align: start; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); cursor: pointer;
}
.marker-option img { width: 100%; height: auto; display: block; border-radius: 6px; margin-bottom: 4px; }
.marker-option:hover { background: var(--hover); }
.marker-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
/* The template picked on the Templates page, shown on the new-app form. */
.picked-template { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s3); align-items: center; margin: 14px 0; padding: 10px; background: var(--surface-2); border-radius: var(--r-md); }
.picked-template img { width: 100%; height: auto; display: block; border-radius: 4px; }
.picked-template p { margin: 2px 0 0; }
.pick-app { min-width: min(90vw, 40rem); }
.pick-app .app-grid { margin-top: var(--s3); }
/* A card picture is a button: an "Open" chip sits on it all the time, and turns blue on hover or focus. */
.shot-open { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 4px; background: none; cursor: zoom-in; }
.shot-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shot-open img { transition: filter var(--t-fast) ease; }
.shot-open:hover img { filter: brightness(0.94); }
.shot-open-hint {
  position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
  border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #fff; font: 600 11.5px/1 var(--font); pointer-events: none;
  transition: background var(--t-fast) ease;
}
.shot-open:hover .shot-open-hint, .shot-open:focus-visible .shot-open-hint { background: var(--accent); }
/* The before/after window: a switch on top, three slides side by side, fitted to the window. */
.example { display: grid; gap: var(--s3); }
.example-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding-right: 40px; }
.example-head h2 { margin: 0; font-size: 17px; }
.example-head .button { margin-left: auto; }
.example-note { margin: 0; }
.example-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.example-shots img { display: block; width: 100%; height: auto; max-height: calc(100vh - 210px); object-fit: contain; border-radius: 6px; }
.trial { padding: 10px; background: var(--stage); border-radius: var(--r-md); }
.trial p { margin: 0 0 6px; }

.strip { display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: 6px; }
.strip img { height: 360px; width: auto; flex: none; display: block; border-radius: 6px; }
.trial .strip img { height: 220px; }
.strip.is-seamless { gap: 0; }
.strip.is-seamless img { border-radius: 0; }
.strip.is-wide img { height: 180px; }
.store-group { margin-top: var(--s5); }
.store-group + .store-group { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line-strong); }
.store-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.store-group-head h2 { margin: 0; font-size: 20px; }
.store-group-head p { margin: 2px 0 0; }
.preview-size { scroll-margin-top: 96px; margin: 14px 0; padding: 4px var(--s4) var(--s4); background: var(--stage); border-radius: var(--r-lg); }
.size-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: var(--s3) 0 2px; font-size: 14px; }
.size-title .muted { font-weight: 400; }
.size-use { margin: 0 0 var(--s3); }

/* ---------------------------------------------------------------- art */

.brief { padding-inline-start: 14px; border-inline-start: 3px solid var(--accent); color: var(--ink-2); }
.candidates { display: grid; gap: 20px; }
.candidate { margin: 0; padding: var(--s3); background: var(--stage); border-radius: var(--r-lg); }
.candidate.is-current { box-shadow: inset 0 0 0 2px var(--accent); }
.windows { position: relative; }
.windows img { display: block; width: 100%; height: auto; border-radius: 4px; }
.aspect-9x16, .aspect-1x1 { max-width: 28rem; }
.window-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-inline-start: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--s3); margin-top: var(--s4); }
.idea { display: grid; gap: 10px; align-content: start; padding: var(--s4); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }

/* ---------------------------------------------------------------- copy */

.copy-help { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s4); align-items: start; }
/* The feature graphic is wide: a wider picture column, and the text beside it. */
.panel > .copy-help { grid-template-columns: 260px minmax(0, 1fr); margin-bottom: 4px; }
.panel > .copy-help p:first-child { margin-top: 0; }
.copy-help img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: var(--shadow-1); }
.copy-help h2 { margin-top: 0; }
.copy-help-list { margin: var(--s2) 0 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 13px; }
.field-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.field-foot .linkish { font-size: 12px; }
/* The art step of a template without art: the ones that use a picture, as small cards. */
.art-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 10px; margin: var(--s3) 0; }
.art-other { display: grid; gap: 6px; padding: 8px; font: inherit; color: inherit; text-align: start; background: var(--stage); border: 0; border-radius: var(--r-md); cursor: zoom-in; }
.art-other img { width: 100%; height: auto; display: block; border-radius: 4px; }
.art-other span { font-size: 12.5px; font-weight: 600; }

.copy-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); padding: 20px 0; border-bottom: 1px solid var(--line); }
[id^="copy-"] { scroll-margin-top: 140px; }
[id^="copy-"].is-flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: var(--accent-soft); } to { background: transparent; } }
.copy-shot { display: grid; gap: var(--s2); align-content: start; justify-items: start; }
.copy-fields h3 { margin-bottom: 4px; }
.cropper { position: relative; width: 100%; cursor: crosshair; touch-action: none; user-select: none; }
.cropper img { display: block; width: 100%; border-radius: 6px; pointer-events: none; }
.copy-shot .shot-plain { display: block; width: 100%; border-radius: 6px; }
.crop-box { position: absolute; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 2px; }
.meter { font-size: 12px; color: var(--ink-2); }
.meter.is-bad { color: var(--bad); font-weight: 600; }

/* ---------------------------------------------------------------- sizes */

.sizes { list-style: none; margin: 0; padding: 0; }
.size { display: grid; gap: 6px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.size:last-child { border-bottom: 0; }
.size-pick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; cursor: pointer; }
.size-pick input { align-self: center; }
.size-name { font-weight: 600; min-width: 10rem; }
.req { font-size: 12px; color: var(--ink-2); }
.req-yes, .req-april-2027 { color: var(--ink); font-weight: 600; }
.size-screens { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-inline-start: 25px; }
.size-note { padding-inline-start: 25px; }
/* A size with a shape of its own: the iPhone screens or captures of its own, as two pressed options. */
.screens-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 10px; padding-inline-start: 25px; }
.screens-option { align-content: start; }
.screens-option:disabled { opacity: 0.5; cursor: default; }
.screens-option:disabled:hover { background: var(--surface); }
.own-thumbs { display: flex; gap: 4px; }
.own-thumbs img { height: 64px; width: auto; border-radius: 4px; box-shadow: var(--shadow-1); }
.screens-choice-foot { grid-column: 1 / -1; }
/* The languages to make the set in, ticked in a grid. */
.lang-grid { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 8px 16px; }
.lang-grid .toggle { font-size: 14px; }

/* ---------------------------------------------------------------- icon */

.icon-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--s4); }
.icon-card { display: grid; gap: var(--s3); align-content: start; padding: 18px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.icon-card.is-current { box-shadow: 0 0 0 2px var(--accent); }
.icon-card.is-new:not(.is-current) { box-shadow: 0 0 0 2px var(--ok-dot), var(--shadow-1); }

.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 10px; margin: var(--s3) 0; }
.way {
  display: grid; gap: 4px; align-content: start; padding: 12px 14px; text-align: start; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); cursor: pointer;
}
.way:hover { background: var(--hover); }
.way[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.way:disabled { cursor: default; opacity: 0.6; }
.way strong { font-size: 14px; }
.way-what { font-size: 12.5px; color: var(--ink-2); }
.way-cost { justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--select); }
.way-cost.is-free { color: var(--ok); }
.way-detail { padding: var(--s4); background: var(--surface-2); border-radius: var(--r-lg); }
.way-detail > p:first-child { margin-top: 0; }
.way-detail .field { margin-bottom: var(--s3); }
.way-step { margin: var(--s4) 0 var(--s2); font-size: 14px; }
.way-detail .ideas { margin-top: var(--s3); }
.icon-main { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.icon-main h3 { margin-bottom: 4px; }
/* iOS draws the icon in a continuous-corner square; 22.37% is the usual stand-in. */
.icon-square { width: 120px; height: 120px; border-radius: 22.37%; display: block; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.icon-square.placeholder { display: grid; place-items: center; background: var(--stage); color: var(--ink-2); font-size: 12px; }
.icon-row { display: flex; flex-wrap: wrap; gap: 14px; padding: var(--s3); background: var(--stage); border-radius: var(--r-md); }
.icon-row figure { margin: 0; display: grid; justify-items: center; gap: 4px; }
.icon-row figure > img { width: 64px; height: 64px; display: block; }
.icon-row figcaption { font-size: 11.5px; color: var(--ink-2); }
.adaptive { position: relative; width: 64px; height: 64px; overflow: hidden; display: block; }
.adaptive img { position: absolute; width: 150%; height: 150%; max-width: none; left: -25%; top: -25%; }
.adaptive.circle { border-radius: 50%; }
.adaptive.squircle { border-radius: 30%; }
.adaptive.themed { background: #D7E3FF; }
.adaptive.themed img { opacity: 0.8; }
.search-row { display: flex; gap: 14px; overflow-x: auto; padding: 10px 0; border-bottom: 1px solid var(--line); }
.search-row.is-now { background: var(--accent-soft); border-radius: var(--r); padding-inline: 8px; }
.tile-icon.is-now figcaption { font-weight: 700; }
.now-icon { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s5); align-items: center; }
.now-icon h2 { margin: 0 0 4px; }
.tile-icon { margin: 0; width: 76px; flex: none; display: grid; justify-items: center; gap: 5px; }
.tile-icon img { width: 60px; height: 60px; border-radius: 22.37%; display: block; }
.tile-icon figcaption { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.2; text-align: center; }
.homes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--s4); }
.home { display: grid; grid-template-columns: repeat(4, 76px); justify-content: center; gap: var(--s4) var(--s2); padding: var(--s5) var(--s4); border-radius: 24px; }
.home.light { background: linear-gradient(160deg, #F6D6C2, #C9D8F2); color: #14171A; }
.home.dark { background: linear-gradient(160deg, #1C2440, #0A0B10); color: #F2F3F5; }

@media (max-width: 760px) {
  .copy-row { grid-template-columns: minmax(0, 1fr); }
  .copy-shot { max-width: 220px; }
  .picked-template { grid-template-columns: minmax(0, 1fr); }
  .strip img { height: 260px; }
  .panel { padding: var(--s4); }
}

/* ---------------------------------------------------------------- coming soon */

/* Looks on the way: smaller cards, each with an impression of the look drawn in CSS, no picture file. */
.upcoming-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.upcoming { display: grid; gap: var(--s2); align-content: start; justify-items: start; padding: 14px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.upcoming .template-head { justify-self: stretch; }
.upcoming p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.upcoming-badge { color: var(--paid-text); background: var(--paid-soft); }
.upcoming-art { position: relative; justify-self: stretch; height: 150px; border-radius: var(--r-md); overflow: hidden; }
.upcoming-phone {
  position: absolute; left: 50%; top: 22px; width: 62px; height: 128px; margin-left: -31px;
  border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 3px #1D1D1F, 0 10px 24px rgba(0, 0, 0, 0.25);
}
.upcoming-art::before, .upcoming-art::after { content: ''; position: absolute; }

/* Comic: halftone dots on yellow, a speech bubble. */
.upcoming-art.is-comic { background: radial-gradient(circle, rgba(0, 0, 0, 0.22) 1.4px, transparent 1.8px) 0 0 / 9px 9px, #FFD84D; }
.upcoming-art.is-comic::before { left: 14px; top: 16px; width: 74px; height: 34px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 2.5px #1D1D1F; }
.upcoming-art.is-comic::after { left: 34px; top: 46px; border: 9px solid transparent; border-top: 11px solid #1D1D1F; }
.upcoming-art.is-comic .upcoming-phone { transform: rotate(4deg); }

/* Blueprint: a fine grid and a heavier one on blue, a dashed callout. */
.upcoming-art.is-blueprint {
  background:
    linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px) 0 0 / 12px 12px,
    #1E4F8F;
}
.upcoming-art.is-blueprint::before { left: 18px; top: 58px; width: calc(50% - 40px); border-top: 2px dashed rgba(255, 255, 255, 0.85); }
.upcoming-art.is-blueprint::after { left: 12px; top: 52px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #FFFFFF; }
.upcoming-art.is-blueprint .upcoming-phone { background: transparent; box-shadow: 0 0 0 2px #FFFFFF; }

/* Clay: soft blobs with an inner light, a phone with round corners. */
.upcoming-art.is-clay {
  background:
    radial-gradient(circle at 18% 78%, #E98F73 0 26px, transparent 27px),
    radial-gradient(circle at 84% 30%, #8EC3A7 0 30px, transparent 31px),
    radial-gradient(circle at 76% 86%, #F2C14E 0 18px, transparent 19px),
    #F4DCCB;
}
.upcoming-art.is-clay .upcoming-phone { border-radius: 20px; box-shadow: 0 0 0 4px #FFF4EC, 0 12px 22px rgba(160, 90, 60, 0.35); }

/* Neon: a dark ground, a pink tube around the phone, a cyan line. */
.upcoming-art.is-neon { background: radial-gradient(circle at 50% 120%, #2A1E5C, #0E0B1E 70%); }
.upcoming-art.is-neon::before { left: 16px; top: 28px; width: 70px; height: 4px; border-radius: 2px; background: #47E5FF; box-shadow: 0 0 8px #47E5FF, 0 0 18px #47E5FF; }
.upcoming-art.is-neon::after { left: 16px; top: 42px; width: 46px; height: 4px; border-radius: 2px; background: #47E5FF; box-shadow: 0 0 8px #47E5FF; }
.upcoming-art.is-neon .upcoming-phone { background: #15112B; box-shadow: 0 0 0 2px #FF4FD8, 0 0 14px #FF4FD8, 0 0 30px rgba(255, 79, 216, 0.5); }

/* Scrapbook: paper, two strips of tape over a tilted screen. */
.upcoming-art.is-scrapbook { background: repeating-linear-gradient(0deg, transparent 0 19px, rgba(120, 90, 50, 0.12) 19px 20px), #F4EBDB; }
.upcoming-art.is-scrapbook .upcoming-phone { transform: rotate(-5deg); box-shadow: 0 0 0 5px #FFFFFF, 0 8px 18px rgba(80, 60, 30, 0.3); }
.upcoming-art.is-scrapbook::before { left: calc(50% - 46px); top: 14px; width: 40px; height: 14px; background: rgba(242, 200, 90, 0.75); transform: rotate(-24deg); z-index: 1; }
.upcoming-art.is-scrapbook::after { left: calc(50% + 10px); top: 130px; width: 40px; height: 14px; background: rgba(140, 200, 220, 0.75); transform: rotate(-18deg); z-index: 1; }

/* Retro: curved colour bands from a corner. */
.upcoming-art.is-retro {
  background: radial-gradient(circle at 0 100%, #2F5D62 0 34%, #6B9E78 34% 48%, #F2B134 48% 62%, #E8743B 62% 76%, #F6E7CB 76%);
}
.upcoming-art.is-retro .upcoming-phone { box-shadow: 0 0 0 3px #3A2A20, 0 10px 22px rgba(60, 30, 10, 0.3); }

.upcoming-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: var(--s5); }

/* Languages on the way, as chips that ask for one. */
.lang-upcoming { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.lang-upcoming p { margin: 0 0 8px; }
.wish-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wish-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px dashed var(--line-strong);
  border-radius: 999px; background: none; color: var(--ink-2); font: 500 12.5px/1 var(--font); cursor: pointer;
}
.wish-chip:hover:not(:disabled) { color: var(--paid-text); border-color: var(--paid); background: var(--paid-soft); }
.wish-chip[aria-pressed="true"] { border-style: solid; border-color: transparent; color: var(--paid-text); background: var(--paid-soft); cursor: default; }