/* ============================================
   Timeline Tagger landing page (/timeline-tagger/)
   Extends the "Warm Heirloom Album" system in styles.css and reuses the
   shared product-masthead chrome (.nav--product / .footer--product, both
   in styles.css, driven by --product-accent).

   Deliberately much smaller than css/frontback.css: this page has one
   hand-built app mock instead of four animated demo loops. Everything
   page-specific carries the tt- prefix.
   ============================================ */

/* ---------- Product accent ----------
   Every product page sets its own --product-accent so the masthead, the
   footer rule, and the download pill wear the product's color. Photo
   Dater's is a stamp-pad brick red: distinct from FrontBack's cyan and
   the scanning service's green, and, more importantly, distinct from
   Timeline Scan's amber, which stays reserved for the "way home" pill so
   leaving the product always looks like leaving. */
body[data-product="timelinetagger"] {
  --product-accent: #A24A3C;
  --product-accent-hover: #8B3E32;
  --product-accent-soft: rgba(162, 74, 60, 0.10);
  --product-accent-contrast: #FFFDF8;
  --tt-stage: #E3D9C7;
  --tt-hand: #33506B;
}

[data-theme="dark"] body[data-product="timelinetagger"] {
  --product-accent: #E08A76;
  --product-accent-hover: #EDA08D;
  --product-accent-soft: rgba(224, 138, 118, 0.14);
  --product-accent-contrast: #2A1512;
  --tt-stage: #201B17;
  --tt-hand: #8FB4D4;
}

/* Platform glyph on a download control. Same markup contract as
   css/frontback.css (.btn__os / .btn__os--mac), redeclared here because
   the two product stylesheets never load on the same page. */
.btn__os {
  flex: none;
  margin-right: 0.55em;
  vertical-align: -0.16em;
}

.btn__os--mac {
  width: 1.05em;
  height: 1.05em;
}

/* The nav wordmark's brand mark: a stamped date square, drawn inline so
   the masthead costs no extra request. */
.tt-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  background: var(--product-accent);
  color: var(--product-accent-contrast);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.tt-mark svg {
  width: 1.45rem;
  height: 1.45rem;
  display: block;
}

/* ---------- Shared section furniture ---------- */

.tt-kicker {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.tt-head {
  max-width: 44rem;
  margin: 0 auto 2.8rem;
  text-align: center;
}

.tt-head p {
  font-size: 1.08rem;
}

/* ---------- Hero ---------- */

.tt-hero {
  padding: 4.5rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.tt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 10%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}

.tt-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 3rem;
  align-items: center;
  position: relative;
}

/* Sized so the h1 sets in two lines in this column: at 2.6rem the last
   word dropped to a line of its own. */
.tt-hero__copy h1 {
  font-size: 2.3rem;
  margin-bottom: 1rem;
}

.tt-hero__sub {
  font-size: 1.15rem;
  max-width: 34rem;
}

.tt-hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.tt-hero__flag-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--product-accent);
  border: 1.5px solid var(--product-accent);
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
}

.tt-hero__buttons {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  gap: 0.75rem;
  margin: 1.6rem 0 1.1rem;
}

.tt-hero__buttons .btn {
  width: auto;
  max-width: none;
}

/* The outline button carries a 2px border the solid one doesn't, so
   without this it stands 4px taller in a stack that otherwise lines up. */
.tt-hero__buttons .btn--primary {
  border: 2px solid transparent;
}

.tt-hero__meta {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  align-items: center;
  margin-bottom: 0;
}

/* The separator belongs to the item before it, not the one after: as a
   ::before it starts a new line whenever the row wraps, hanging a lone
   dot under the buttons. */
.tt-hero__meta > span:not(:last-child)::after {
  content: '·';
  margin: 0 0.55rem;
  color: var(--border);
}

/* The shipping version, so someone who already installed the app can tell
   at a glance whether theirs is current (theirs is in the About panel).
   attach.sh rewrites the number inside .tt-version and .tt-mac-size. */
.tt-version {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------- The app window mock ----------
   Pure CSS and one real photo. Real screenshots replace it later, so it
   is built to stand on its own: every label is text, nothing depends on
   an asset that does not exist yet. */

.tt-app {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--font-ui);
  max-width: 100%;
}

.tt-app__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.85rem;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-light);
}

.tt-app__dots {
  display: inline-flex;
  gap: 0.32rem;
  flex: none;
}

.tt-app__dots span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--border);
}

.tt-app__title {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tt-app__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.4rem;
  gap: 0.7rem;
  padding: 0.8rem;
  /* The whole body is the recessed stage the prints lie on; the index card
     floats on top of it, which is the real window's arrangement. */
  background: var(--tt-stage);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Deliberately roomier than the two prints on it: the app's stage is where
   a photo is looked at, so it keeps margin around whatever is on it. */
.tt-app__stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  align-content: center;
}

/* Each print sits slightly proud of the recessed stage, so it reads as a
   physical object rather than a thumbnail. */
.tt-print {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  background: #FFFDF8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.tt-print img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tt-print__label {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.1rem 0.32rem;
  border-radius: 3px;
  background: rgba(28, 25, 23, 0.62);
  color: #FAF3E8;
}

.tt-print--back {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3ECDD;
  text-align: center;
}

.tt-hand {
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--tt-hand);
  transform: rotate(-2.5deg);
  /* Bottom padding keeps the second line clear of the BACK chip. */
  padding: 0 0.5rem 0.9rem;
}

/* The index card: the right rail of the real app, condensed. */
.tt-card {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.7rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.tt-card__kicker {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The signature element: the entered date rendered as an archival stamp
   line above the segmented field. */
.tt-card__stamp {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--product-accent);
  letter-spacing: 0.01em;
}

.tt-card__segs {
  display: flex;
  gap: 0.25rem;
}

.tt-card__segs span {
  flex: 1;
  text-align: center;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  padding: 0.22rem 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  min-width: 0;
}

.tt-card__segs .is-empty {
  color: var(--text-muted);
  border-style: dashed;
}

.tt-card__place {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-primary);
  min-width: 0;
}

.tt-card__place span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-card__pin {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--product-accent);
  flex: none;
}

.tt-card__coords {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.58rem;
  color: var(--text-muted);
}

.tt-card__map {
  position: relative;
  height: 2.2rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background-color: var(--bg-warm);
  background-image:
    linear-gradient(var(--border-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
  background-size: 0.7rem 0.7rem;
}

.tt-card__map::after {
  content: '';
  position: absolute;
  left: 52%;
  top: 46%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--product-accent);
}

/* The handwriting the app read off the back, offered as the caption. Mirrors
   the real rail: eyebrow, the quote in italic, a small Use chip. */
.tt-card__ocr {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 0.4rem;
  padding: 0.32rem 0.45rem;
  border-radius: 4px;
  border: 1px dashed var(--border);
  background: var(--bg-warm);
}

.tt-card__ocr-eyebrow {
  grid-column: 1 / -1;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tt-card__ocr-text {
  font-style: italic;
  font-size: 0.62rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tt-card__ocr-use {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
}

.tt-card__save {
  margin-top: auto;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.4rem 0.3rem;
  border-radius: 999px;
  background: var(--product-accent);
  color: var(--product-accent-contrast);
}

/* Filmstrip: one thumbnail per photo in the folder, like the app's own strip.
   Each tile is a tiny gradient "scan"; the marks mirror the app: a check disc
   once dated this session, an amber dot when the file already carried a date,
   and a ring around wherever the user is. */
.tt-strip {
  display: flex;
  gap: 0.28rem;
  padding: 0.5rem 0.85rem 0.6rem;
  background: var(--bg-warm);
  border-top: 1px solid var(--border-light);
  overflow: hidden;
}

.tt-strip span {
  position: relative;
  flex: 1;
  height: 1.3rem;
  border-radius: 3px;
  background: linear-gradient(165deg, #e3c493 0%, #c29465 55%, #7d5533 100%);
  border: 1px solid rgba(0, 0, 0, 0.14);
  min-width: 0;
}

.tt-strip span:nth-child(3n) {
  background: linear-gradient(165deg, #d9cdb4 0%, #a98f6b 60%, #63492e 100%);
}

.tt-strip span:nth-child(4n + 2) {
  background: linear-gradient(165deg, #e8d3a8 0%, #b57f4e 65%, #56381f 100%);
}

.tt-strip .is-done::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--product-accent)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.6 4.6L19 7.5"/></svg>')
    center / 62% no-repeat;
  box-shadow: 0 0 0 1.5px var(--bg-warm);
}

.tt-strip .is-tagged::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1.5px var(--bg-warm);
}

.tt-strip .is-current {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.tt-app__caption {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0.9rem auto 0;
  max-width: 30rem;
}

/* ---------- Steps ---------- */

.tt-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.tt-step {
  text-align: center;
}

.tt-step__icon {
  width: 4.2rem;
  height: 4.2rem;
  margin: 0 auto 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--product-accent-soft);
  color: var(--product-accent);
}

.tt-step__icon svg {
  width: 2.1rem;
  height: 2.1rem;
  display: block;
}

.tt-step h3 {
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}

.tt-step p {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0;
}

.tt-step__num {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

/* ---------- What gets written ---------- */

.tt-written {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
}

.tt-written p {
  font-size: 1.02rem;
}

.tt-tags {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  overflow-x: auto;
}

.tt-tags__head {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}

.tt-tags__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.32rem 0;
  border-bottom: 1px dashed var(--border-light);
  white-space: nowrap;
}

.tt-tags__row:last-child {
  border-bottom: none;
}

.tt-tags__key {
  color: var(--text-muted);
}

.tt-tags__val {
  color: var(--product-accent);
}

.tt-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 0;
  list-style: none;
}

.tt-apps li {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* ---------- Two-up feature cards (pairing, saved places, partial dates) ---------- */

.tt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.6rem;
  max-width: 1000px;
  margin: 0 auto;
}

.tt-tile {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.7rem 1.6rem;
}

.tt-tile h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.tt-tile p {
  font-family: var(--font-ui);
  font-size: 0.94rem;
  color: var(--text-secondary);
}

.tt-tile p:last-child {
  margin-bottom: 0;
}

.tt-tile code {
  font-size: 0.86em;
  background: var(--accent-light);
  border-radius: 4px;
  padding: 0.06em 0.32em;
}

/* The paired filenames, drawn as two files that belong together. Stacked
   rather than inline: side by side, the second name wrapped under the "+"
   and the pair stopped reading as a pair. */
.tt-pairfiles {
  display: grid;
  justify-items: start;
  gap: 0.25rem;
  margin: 0 0 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}

.tt-pairfiles b {
  display: inline-block;
  padding: 0.34rem 0.6rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  font-weight: 500;
  color: var(--text-primary);
}

.tt-pairfiles b em {
  font-style: normal;
  color: var(--product-accent);
  font-weight: 700;
}

.tt-pairfiles span {
  color: var(--text-muted);
  padding-left: 0.75rem;
  line-height: 1;
}

/* Saved places, drawn as the app's numbered rows. */
.tt-placelist {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.35rem;
}

.tt-placelist li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-primary);
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-secondary);
}

.tt-placelist kbd {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 1.3rem;
  text-align: center;
  padding: 0.12rem 0.3rem;
  border-radius: 4px;
  background: var(--product-accent-soft);
  color: var(--product-accent);
  border: 1px solid var(--product-accent);
}

/* Partial-date chips: "a year is enough". */
.tt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.tt-chips span {
  font-family: var(--font-display);
  font-size: 1rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px dashed var(--product-accent);
  color: var(--product-accent);
}

/* With a fourth tile, the row needs narrower columns and a tighter gap to
   stay one line of cards on a desktop and a clean 2x2 on a tablet. */
.tt-cards--four {
  max-width: 1120px;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* The OCR tile's visual: the same block the app shows under the caption. */
.tt-ocr {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.1rem 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: var(--bg-warm);
  margin-bottom: 1.1rem;
}

.tt-ocr__eyebrow {
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tt-ocr__text {
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.tt-ocr__use {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
}

/* The rest of the box, one line per feature. Icons carry the meaning so the
   text can stay at a handful of words. */
.tt-mini {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.7rem 1.6rem;
  max-width: 1000px;
  margin: 2.4rem auto 0;
  padding: 0;
}

.tt-mini li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.tt-mini__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--card-bg);
  color: var(--product-accent);
}

.tt-mini__icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---------- Free band + platform notes ---------- */

.tt-free {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.4rem 2rem;
}

.tt-free__amount {
  display: block;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--product-accent);
  margin-bottom: 0.4rem;
}

.tt-free__amount sup {
  font-size: 0.45em;
  vertical-align: super;
}

.tt-free__list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.6rem;
  display: grid;
  gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.tt-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  max-width: 640px;
  margin: 1.8rem auto 0;
}

.tt-platform {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  text-align: left;
  font-family: var(--font-ui);
}

.tt-platform b {
  display: block;
  font-size: 0.92rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.tt-platform span {
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* ---------- Timeline Scan bridge ---------- */

.tt-bridge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.6rem;
  max-width: 940px;
  margin: 0 auto;
}

.tt-bridge__card {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.8rem 1.7rem;
  display: flex;
  flex-direction: column;
}

.tt-bridge__card--quiet {
  border-left-color: var(--product-accent);
}

.tt-bridge__chip {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}

.tt-bridge__card--quiet .tt-bridge__chip {
  color: var(--product-accent);
}

.tt-bridge__card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.tt-bridge__card p {
  font-family: var(--font-ui);
  font-size: 0.94rem;
  color: var(--text-secondary);
}

.tt-bridge__card .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- Final CTA ---------- */

.tt-dl-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .tt-hero__grid,
  .tt-written {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
  }

  .tt-hero__copy h1 {
    font-size: 2.15rem;
  }

  .tt-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.2rem;
  }
}

@media (max-width: 640px) {
  .tt-hero {
    padding: 3rem 0 2.6rem;
  }

  .tt-hero__copy h1 {
    font-size: 1.85rem;
  }

  .tt-hero__sub {
    font-size: 1.02rem;
  }

  .tt-hero__buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Below this the index card and the two prints cannot all be legible
     side by side, so the card drops under the stage at full width. */
  .tt-app__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .tt-card__stamp {
    font-size: 1.5rem;
  }

  .tt-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .tt-free {
    padding: 1.8rem 1.3rem;
  }

  .tt-free__amount {
    font-size: 3.2rem;
  }

  .tt-tile,
  .tt-bridge__card {
    padding: 1.4rem 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-app,
  .tt-tile,
  .tt-bridge__card {
    transition: none;
  }
}

/* ============================================
   Application help (/timeline-tagger/help/)
   Everything below is the help page only. It carries no new visual
   language: the guides reuse the product accent, the album typography,
   and the same card furniture as the landing page above.

   The screenshots are the page. They come from tools/help_shots.sh,
   which compiles the real app offscreen and snapshots real SwiftUI
   views, so no mock of the app is ever drawn in CSS here.
   ============================================ */

/* ---------- Hero ---------- */

.tt-help-hero {
  padding: 3.6rem 0 2.4rem;
  text-align: center;
}

.tt-help-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.7rem;
}

.tt-help-hero__sub {
  font-family: var(--font-ui);
  font-size: 1.08rem;
  color: var(--text-secondary);
  max-width: 42rem;
  margin: 0 auto;
}

.tt-help-hero__meta {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.9rem;
  margin-top: 1.2rem;
}

.tt-help-hero__meta > span:not(:last-child)::after {
  content: '\00B7';
  margin-left: 0.9rem;
  opacity: 0.5;
}

.tt-help-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.8rem;
}

.tt-help-toc a {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 0.35em 0.95em;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tt-help-toc a:hover {
  border-color: var(--product-accent);
  background: var(--product-accent-soft);
}

/* ---------- A guide: the player and its steps ---------- */

/* The stage takes the full width it can get. These are screenshots of a
   1440pt app window, and a reader who cannot make out the rail is being
   shown a picture of a help page rather than a help page. */
.tt-guide {
  max-width: 1180px;
  margin: 0 auto;
}

/* The stage holds every frame of a guide stacked on one another and
   cross-fades between them. The ratio is the full app window's, and the
   frames that are not full windows (the map sheet is its own smaller
   window) sit inside it on the app's own table colour, which is what a
   sheet looks like in the app. */
.tt-player__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--tt-stage);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.tt-player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.55s ease;
}

/* Without JavaScript the first frame is the one on screen, so the guide
   is a screenshot with its steps written beside it rather than a blank
   rectangle. */
.tt-player__frame.is-active {
  opacity: 1;
}

.tt-player__dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.tt-player__dot {
  width: 0.62rem;
  height: 0.62rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.tt-player__dot:hover {
  border-color: var(--product-accent);
}

.tt-player__dot.is-active {
  width: 1.6rem;
  background: var(--product-accent);
  border-color: var(--product-accent);
}

.tt-guide__steps {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.5rem;
}

.tt-guide__step {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  gap: 0.15rem 0.7rem;
  align-content: start;
  height: 100%;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tt-guide__step:hover {
  background: var(--bg-secondary);
}

.tt-guide__step.is-active {
  background: var(--product-accent-soft);
  border-color: var(--product-accent);
}

.tt-guide__step-num {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(128, 128, 128, 0.1);
}

.tt-guide__step.is-active .tt-guide__step-num {
  color: var(--product-accent-contrast);
  background: var(--product-accent);
}

.tt-guide__step b {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
}

.tt-guide__step-note {
  grid-column: 2;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- Screenshot figures outside a player ---------- */

.tt-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.tt-fig {
  margin: 0;
  text-align: center;
  min-width: 0;
}

.tt-fig img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}

.tt-fig figcaption {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 0.75rem;
}

.tt-fig figcaption b {
  color: var(--text-primary);
}

/* ---------- Keyboard reference ---------- */

kbd {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 0.82em;
  font-weight: 600;
  border: 1px solid var(--border-light);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.12em 0.5em;
  background: rgba(128, 128, 128, 0.08);
  white-space: nowrap;
}

.tt-keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.6rem;
  max-width: 1000px;
  margin: 0 auto 2.2rem;
}

.tt-keys__head {
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--product-accent);
  margin: 0.6rem 0 0.1rem;
}

.tt-key {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
}

.tt-key kbd {
  flex: none;
  font-size: 0.85rem;
  min-width: 3.1rem;
  text-align: center;
}

.tt-key span {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-secondary);
  min-width: 0;
}

/* ---------- Troubleshooting ---------- */

.tt-fixes {
  display: grid;
  gap: 0.7rem;
  max-width: 900px;
  margin: 0 auto;
}

.tt-fix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 0.3rem 1.4rem;
  align-items: baseline;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--product-accent);
  border-radius: 10px;
  padding: 0.95rem 1.1rem;
}

.tt-fix b {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
}

.tt-fix span {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.tt-fix code {
  font-size: 0.85em;
}

/* ---------- Closing cross-links ---------- */

.tt-help-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

.tt-help-link {
  display: block;
  min-width: 0;
  padding: 1.15rem 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.tt-help-link:hover {
  border-color: var(--product-accent);
  transform: translateY(-2px);
}

.tt-help-link b {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  margin-bottom: 0.3rem;
}

.tt-help-link span {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .tt-help-hero h1 {
    font-size: 2.05rem;
  }
}

@media (max-width: 640px) {
  .tt-help-hero {
    padding: 2.6rem 0 1.8rem;
  }

  .tt-help-hero h1 {
    font-size: 1.8rem;
  }

  .tt-help-hero__sub {
    font-size: 1rem;
  }

  .tt-fix {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
}

/* The step-through is a photograph of an app being used, and that is the
   kind of movement this setting is asking us not to make: no auto-advance
   (js/timelinetagger-help.js checks the same query) and no cross-fade, so
   the frames become a still sequence the dots step through. */
@media (prefers-reduced-motion: reduce) {
  .tt-player__frame,
  .tt-player__dot,
  .tt-guide__step,
  .tt-help-link {
    transition: none;
  }

  .tt-help-link:hover {
    transform: none;
  }
}

/* ---------- Product nav room ----------
   The Help link made the tagger's link row longer than the space the
   1260px nav column leaves it, and between 1361px (where the row appears)
   and roughly 1440px the switch pill was landing past the right edge. The
   price flag is the first thing this nav already gives up when room runs
   short (styles.css drops it at 1360px), so it goes a little earlier for
   this product rather than the row poking off screen. */
@media (max-width: 1520px) {
  body[data-product="timelinetagger"] .nav__product-flag {
    display: none;
  }
}