/* ============================================
   Photo Dater landing page (/photo-dater/)
   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 pd- 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="photodater"] {
  --product-accent: #A24A3C;
  --product-accent-hover: #8B3E32;
  --product-accent-soft: rgba(162, 74, 60, 0.10);
  --product-accent-contrast: #FFFDF8;
  --pd-stage: #E3D9C7;
  --pd-hand: #33506B;
}

[data-theme="dark"] body[data-product="photodater"] {
  --product-accent: #E08A76;
  --product-accent-hover: #EDA08D;
  --product-accent-soft: rgba(224, 138, 118, 0.14);
  --product-accent-contrast: #2A1512;
  --pd-stage: #201B17;
  --pd-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. */
.pd-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);
}

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

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

.pd-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;
}

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

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

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

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

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

.pd-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. */
.pd-hero__copy h1 {
  font-size: 2.3rem;
  margin-bottom: 1rem;
}

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

.pd-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;
}

.pd-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;
}

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

.pd-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. */
.pd-hero__buttons .btn--primary {
  border: 2px solid transparent;
}

.pd-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. */
.pd-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 .pd-version and .pd-mac-size. */
.pd-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. */

.pd-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%;
}

.pd-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);
}

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

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

.pd-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;
}

.pd-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(--pd-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. */
.pd-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. */
.pd-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;
}

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

.pd-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;
}

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

.pd-hand {
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--pd-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. */
.pd-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;
}

.pd-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. */
.pd-card__stamp {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--product-accent);
  letter-spacing: 0.01em;
}

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

.pd-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;
}

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

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

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

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

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

.pd-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;
}

.pd-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);
}

.pd-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 tick per photo in the folder, done ones filled. */
.pd-strip {
  display: flex;
  gap: 0.22rem;
  padding: 0.5rem 0.85rem 0.6rem;
  background: var(--bg-warm);
  border-top: 1px solid var(--border-light);
  overflow: hidden;
}

.pd-strip span {
  flex: 1;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--border-light);
  border: 1px solid var(--border);
  min-width: 0;
}

.pd-strip .is-done {
  background: var(--product-accent);
  border-color: var(--product-accent);
}

.pd-strip .is-current {
  background: var(--accent);
  border-color: var(--accent);
}

.pd-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 ---------- */

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

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

.pd-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);
}

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

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

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

.pd-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 ---------- */

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

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

.pd-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;
}

.pd-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;
}

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

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

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

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

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

.pd-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) ---------- */

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

.pd-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;
}

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

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

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

.pd-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. */
.pd-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;
}

.pd-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);
}

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

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

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

.pd-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);
}

.pd-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". */
.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.pd-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);
}

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

.pd-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;
}

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

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

.pd-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);
}

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

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

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

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

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

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

.pd-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;
}

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

.pd-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

  .pd-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. */
  .pd-app__body {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

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

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

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

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