/* ============================================
   Timeline Upright landing page (/timeline-upright/)
   Extends the "Warm Heirloom Album" system in styles.css and reuses the
   shared product chrome (.subnav / .footer__product, both in styles.css,
   driven by --product-accent). Built on the Timeline Tagger page's
   layout, redeclared here with its own tu- prefix so a change to one
   product page can never move the other. The screenshot gallery is
   FrontBack Scanner's (.fb-shots in frontback.css), redeclared the same way.
   ============================================ */

/* ---------- Product accent ----------
   A deep scanner blue: distinct from FrontBack's cyan, the tagger's brick
   red, the scanning service's green and Timeline Scan's amber. --tu-good and
   --tu-rescan are the app's own "Turned upright" green and "Scan again" red,
   each with a soft tint for the chips that carry them. */
body[data-product="timelineupright"] {
  --product-accent: #2F5D8C;
  --product-accent-hover: #264D75;
  --product-accent-soft: rgba(47, 93, 140, 0.10);
  --product-accent-contrast: #FFFDF8;
  /* The FastFoto FF-680W's own background, as measured on a real capture. */
  --tu-backing: #CCD7DF;
  --tu-good: #3F6B47;
  --tu-good-soft: rgba(63, 107, 71, 0.12);
  --tu-rescan: #A23B30;
  --tu-rescan-soft: rgba(162, 59, 48, 0.10);
}

[data-theme="dark"] body[data-product="timelineupright"] {
  --product-accent: #86B4E3;
  --product-accent-hover: #A1C6EC;
  --product-accent-soft: rgba(134, 180, 227, 0.14);
  --product-accent-contrast: #111D2A;
  --tu-backing: #9FAAB2;
  --tu-good: #8DBB92;
  --tu-good-soft: rgba(141, 187, 146, 0.16);
  --tu-rescan: #E0785F;
  --tu-rescan-soft: rgba(224, 120, 95, 0.16);
}

/* Platform glyph on a download control (the .btn__os contract every
   product stylesheet redeclares; an unmatched SVG renders full width). */
.btn__os {
  flex: none;
  margin-right: 0.55em;
  vertical-align: -0.16em;
}

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

.btn__os--win {
  width: 0.92em;
  height: 0.92em;
}

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

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

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

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

/* The icon tile: the site's 58px outlined circle (.ab-tool__icon on /about,
   .op-step__icon on the export pages), with the glyph in the product accent.
   Every glyph is a 24-unit stroke drawing at 1.7, one idea per icon. */
.tu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--product-accent);
}

.tu-icon svg {
  width: 35px;
  height: 35px;
}

/* A short label in a pill: a scan's state ("Sideways", "Turned upright",
   "Scan this photo again"), in the app's own colours. */
.tu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--border-light);
  color: var(--text-secondary);
}

.tu-chip svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.tu-chip--good,
.tu-chip--after {
  background: var(--tu-good-soft);
  color: var(--tu-good);
}

.tu-chip--rescan {
  background: var(--tu-rescan-soft);
  color: var(--tu-rescan);
}

/* Headings break into even lines, so a last word never hangs alone. */
.tu-head h2,
.tu-hero__copy h1 {
  text-wrap: balance;
}

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

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

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

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

.tu-hero__copy h1 {
  font-size: 2.3rem;
  margin-bottom: 1rem;
}

.tu-hero__sub {
  font-size: 1.15rem;
  max-width: 34rem;
  margin-bottom: 0;
}

/* The app's three jobs, an icon and a few words each. */
.tu-hero__points {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: grid;
  gap: 0.75rem;
}

.tu-hero__points li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-ui);
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--text-primary);
}

.tu-hero__point-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--product-accent);
}

.tu-hero__point-icon svg {
  width: 24px;
  height: 24px;
}

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

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

/* Mac, Windows and "See how it works" stacked in one max-content column:
   the longest label sets the width and every button matches it. */
.tu-hero__buttons {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  gap: 0.75rem;
  margin: 1.6rem 0 1.1rem;
}

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

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

.tu-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, so a wrapped row never
   starts with a lone dot. */
.tu-hero__meta > span:not(:last-child)::after {
  content: '\00B7';
  margin: 0 0.55rem;
  color: var(--border);
}

/* The shipping versions, one per platform, so someone who already has the
   app can tell at a glance whether theirs is current. The Mac release
   script rewrites the numbers inside .tu-version and .tu-mac-size; the
   Windows one (windows/attach.ps1) rewrites .tu-win-version and
   .tu-win-size. */
.tu-version,
.tu-win-version {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------- The hero screenshot ----------
   The real app, watching a scanner folder (shot-watching). */

.tu-hero__shot {
  display: block;
}

.tu-hero__shot img,
.tu-shots__slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

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

/* A scan whose crop missed: the print sits crooked on the scanner's own
   blue-gray background. Used in the rescan section. */
.tu-missed {
  position: relative;
  background: var(--tu-backing);
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tu-missed img {
  width: 64%;
  height: auto;
  display: block;
  transform: rotate(-7deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ---------- Sideways in, upright out (#how) ----------
   Four prints as they were scanned: on their side, upside down, on the
   other side, and one already upright. While the strip is on screen
   (js/timeline-upright.js adds .is-playing) each turns upright in turn, its
   chip changes to "Turned upright", and after a pause it starts again. A
   visitor who asks for less motion sees them upright, chips and all. */

.tu-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  max-width: 900px;
  margin: 0 auto 3rem;
}

.tu-strip__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tu-strip__slot {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A square print: the photo inside a white border, as it came off the
   scanner. The print turns, border and all. */
.tu-strip__print {
  width: 86%;
  background: #FFFDF8;
  padding: 5%;
  border-radius: 3px;
  box-shadow: var(--shadow-md);
  transform: rotate(var(--tu-from, 0deg));
}

.tu-strip__print img {
  display: block;
  width: 100%;
  height: auto;
}

.tu-strip__item--right { --tu-from: 90deg; }
.tu-strip__item--down { --tu-from: 180deg; }
.tu-strip__item--left { --tu-from: -90deg; }

.tu-strip__chips {
  display: grid;
  justify-items: center;
  margin-top: 0.9rem;
}

/* Before and after share one cell and cross-fade. */
.tu-strip__chips .tu-chip {
  grid-area: 1 / 1;
}

.tu-strip__item:not(.tu-strip__item--still) .tu-strip__print {
  animation: tu-turn 7s ease-in-out infinite both paused;
}

.tu-strip__item:not(.tu-strip__item--still) .tu-chip--before {
  animation: tu-chip-before 7s ease-in-out infinite both paused;
}

.tu-strip__item:not(.tu-strip__item--still) .tu-chip--after {
  animation: tu-chip-after 7s ease-in-out infinite both paused;
}

/* One after another, the way a batch goes through. */
.tu-strip__item:nth-child(2) .tu-strip__print,
.tu-strip__item:nth-child(2) .tu-chip { animation-delay: 0.45s; }
.tu-strip__item:nth-child(3) .tu-strip__print,
.tu-strip__item:nth-child(3) .tu-chip { animation-delay: 0.9s; }

.tu-strip.is-playing .tu-strip__print,
.tu-strip.is-playing .tu-chip {
  animation-play-state: running;
}

@keyframes tu-turn {
  0%, 24% { transform: rotate(var(--tu-from)); opacity: 1; }
  36%, 86% { transform: rotate(0deg); opacity: 1; }
  92% { transform: rotate(0deg); opacity: 0; }
  93% { transform: rotate(var(--tu-from)); opacity: 0; }
  100% { transform: rotate(var(--tu-from)); opacity: 1; }
}

@keyframes tu-chip-before {
  0%, 26% { opacity: 1; }
  32%, 93% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes tu-chip-after {
  0%, 30% { opacity: 0; }
  36%, 88% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* The two ways in: an icon, the name the app uses, when to pick it, and the
   steps as icon rows of a few words each. */
.tu-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.6rem;
  max-width: 1000px;
  margin: 0 auto;
}

.tu-way {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--product-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.7rem 1.7rem 1.8rem;
}

.tu-way__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.tu-way__head h3 {
  font-size: 1.3rem;
  margin: 0;
}

.tu-way__when {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0.2rem 0 0;
}

.tu-way__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.tu-way__steps li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-ui);
  font-size: 1.02rem;
  color: var(--text-primary);
}

.tu-way__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--product-accent-soft);
  color: var(--product-accent);
}

.tu-way__step-icon svg {
  width: 21px;
  height: 21px;
}

/* ---------- Real app screens (#screenshots) ----------
   Every slide sits in the same grid cell and they cross-fade, so the
   section keeps one height however far the reader flips. Arrows, dots,
   arrow keys and a swipe drive it (js/timeline-upright.js). The dots draw
   FrontBack's small ring but take a 28px target, and the arrows are 48px,
   the app's own minimum for this audience. */

.tu-shots {
  max-width: 980px;
  margin: 0 auto;
}

.tu-shots__track {
  display: grid;
}

.tu-shots__slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.tu-shots__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.tu-shots__slide figure {
  margin: 0;
}

.tu-shots__slide figcaption {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  max-width: 40rem;
  margin: 1.1rem auto 0;
}

.tu-shots__slide figcaption b {
  color: var(--text-primary);
}

.tu-shots__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.3rem;
}

.tu-shots__arrow {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.tu-shots__arrow:hover {
  color: var(--product-accent);
  border-color: var(--product-accent);
  transform: scale(1.06);
}

.tu-shots__dots {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.tu-shots__dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tu-shots__dot::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--product-accent);
  box-sizing: border-box;
  transition: background 0.2s ease, transform 0.2s ease;
}

.tu-shots__dot:hover::before {
  transform: scale(1.25);
}

.tu-shots__dot[aria-current="true"]::before {
  background: var(--product-accent);
}

.tu-shots__arrow:focus-visible,
.tu-shots__dot:focus-visible {
  outline: 3px solid var(--product-accent);
  outline-offset: 2px;
}

/* ---------- The rescan section ---------- */

.tu-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  max-width: 760px;
  margin: 0 auto;
}

.tu-compare figure {
  margin: 0;
  font-family: var(--font-ui);
}

/* Each picture's caption leads with its state, in the app's own words. */
.tu-compare figcaption {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.tu-good {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tu-good img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.tu-compare .tu-missed img {
  width: 70%;
}

/* ---------- Icon tiles: the signals (#rescan) and the promises (#details) ----------
   An icon, a few bold words and one short line. The signals stand in a row
   of four, centred; the promises are cards with the words beside the icon,
   three to a row. */

.tu-signals,
.tu-promises {
  list-style: none;
  padding: 0;
  margin: 2.6rem auto 0;
  display: grid;
  font-family: var(--font-ui);
}

.tu-signals {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  max-width: 980px;
}

.tu-signals li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tu-signals .tu-tile__text {
  margin-top: 0.85rem;
}

.tu-tile__text b {
  display: block;
  font-size: 1.04rem;
  line-height: 1.35;
  color: var(--text-primary);
}

.tu-tile__text span {
  display: block;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.tu-promises {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1000px;
}

.tu-promises li {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem;
}

/* ---------- Front, back and copies, turned as one (#details) ---------- */

.tu-together {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem 2rem 1.9rem;
}

.tu-together__art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  max-width: 760px;
  margin: 0 auto;
}

.tu-together__pair {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tu-together__prints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}

/* Each print sits in a square, so it fits whichever way it lies. */
.tu-together__slot {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tu-together__slot img {
  display: block;
  width: 94%;
  height: auto;
  border: 3px solid #FFFDF8;
  box-shadow: var(--shadow-sm);
}

.tu-together__pair--before .tu-together__slot img {
  transform: rotate(-90deg);
}

.tu-together__pair figcaption {
  margin-top: 0.7rem;
}

.tu-together__arrow {
  flex: none;
  color: var(--product-accent);
}

.tu-together__arrow svg {
  display: block;
  width: 30px;
  height: 30px;
}

.tu-together__copy {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border-light);
}

.tu-together__copy h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* The three files of one print, each name over what it is. */
.tu-files {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.6rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.tu-files li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.tu-files code {
  font-size: 0.88em;
  background: var(--accent-light);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 0.12em 0.4em;
}

/* ---------- Setup steps (#setup) ----------
   Four numbered icon cards, the round badge on the icon's corner as the
   export pages and the homepage draw it; then the scanners it works with,
   as chips, and the one note a Mac needs. */

.tu-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}

.tu-step {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tu-step__art {
  position: relative;
  margin-bottom: 1rem;
}

.tu-step__num {
  position: absolute;
  top: -0.35rem;
  right: -0.45rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  background: var(--product-accent);
  color: var(--product-accent-contrast);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tu-step h3 {
  font-size: 1.12rem;
  margin: 0 0 0.45rem;
}

.tu-step p {
  font-family: var(--font-ui);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

/* A word as it appears on screen in FastFoto or the app: a menu, a tab,
   a setting or a button. A chevron between two is a path through menus. */
.tu-ui {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9em;
  line-height: 1.35;
  color: var(--text-primary);
  background: var(--border-light);
  border-radius: 5px;
  padding: 0.08em 0.45em;
  margin: 0.12em 0;
}

.tu-ui__sep {
  margin: 0 0.3em;
  color: var(--text-muted);
}

.tu-works {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 0.8rem;
  max-width: 900px;
  margin: 2rem auto 0;
}

.tu-works__label {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tu-works__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.tu-works__list li {
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}

.tu-note {
  max-width: 760px;
  margin: 1.8rem auto 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--text-secondary);
  border-left: 3px solid var(--product-accent);
  padding: 0.3rem 0 0.3rem 1rem;
}

/* ---------- Free band ---------- */

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

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

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

.tu-free__list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.6rem;
  display: grid;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  color: var(--text-secondary);
}

.tu-free__list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
}

.tu-free__list svg {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: var(--tu-good);
}

/* The two downloads under the price. The card is narrower than the pair
   laid side by side, so they always stack, in a max-content column that
   the longer label sizes and both buttons match (Timeline Tagger's pair). */
.tu-free__buttons {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  justify-content: center;
  gap: 0.75rem;
}

.tu-free__buttons .btn {
  width: auto;
  max-width: none;
}

.tu-free__req {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  color: var(--text-muted);
  margin: 1.1rem 0 0;
}

/* The one line about the Mac App Store: coming, so no badge and no link. */
.tu-free__store {
  max-width: 640px;
  margin: 1.4rem auto 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--text-secondary);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* The sub-bar (styles.css) scrolls sideways at 900px and below. Above that
   it is one row, and this product's row is the widest of the three free
   apps (two download buttons and longer section names), so from 901px to
   about 1000px it ran past the right edge, where the page's overflow clip
   left the Windows button unreachable. In that band it tightens its
   spacing instead; the product-page spec measures it. */
@media (min-width: 901px) and (max-width: 1080px) {
  body[data-product="timelineupright"] .subnav__inner {
    gap: 0.8rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  body[data-product="timelineupright"] .subnav__links a {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  body[data-product="timelineupright"] .subnav__cta {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* The last 20px of that band: the "Free" pill steps aside (the hero, the
   $0 section and the footer band all say it). */
@media (min-width: 901px) and (max-width: 940px) {
  body[data-product="timelineupright"] .subnav__flag {
    display: none;
  }
}

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

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

  .tu-steps,
  .tu-promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Below this .btn--large caps every button at 300px, narrower than
   "Download Free for Windows" needs with its default side padding, so the
   label would break and strand its glyph. The cap sets the width either
   way; trimming the padding only moves the break point. */
@media (max-width: 768px) {
  .tu-dl-row .btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (max-width: 700px) {
  .tu-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1rem;
  }
}

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

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

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

  .tu-hero__points li {
    font-size: 1rem;
  }

  .tu-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 1rem;
    margin-bottom: 2.4rem;
  }

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

  .tu-together {
    padding: 1.4rem 1.1rem;
  }

  .tu-together__art {
    flex-direction: column;
    gap: 0.6rem;
  }

  .tu-together__pair {
    width: 100%;
  }

  .tu-together__arrow {
    transform: rotate(90deg);
  }

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

  .tu-free__buttons .btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

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

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

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

  .tu-way,
  .tu-bridge__card {
    padding: 1.4rem 1.2rem;
  }

  .tu-shots__slide figcaption {
    font-size: 0.95rem;
    text-align: left;
  }

  .tu-shots__controls {
    gap: 0.5rem;
  }
}

/* One step card to a row once two would squeeze the FastFoto menu path. */
@media (max-width: 560px) {
  .tu-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .tu-step {
    flex-direction: row;
    gap: 1rem;
  }

  .tu-step__art {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tu-shots__slide,
  .tu-shots__arrow,
  .tu-shots__dot::before {
    transition: none;
  }

  /* The strip holds still, upright, each chip on its "after". */
  .tu-strip__item:not(.tu-strip__item--still) .tu-strip__print,
  .tu-strip__item:not(.tu-strip__item--still) .tu-chip--before,
  .tu-strip__item:not(.tu-strip__item--still) .tu-chip--after {
    animation: none;
  }

  .tu-strip__print {
    transform: none;
  }

  .tu-strip__chips .tu-chip--before {
    opacity: 0;
  }
}