/* SortGlass Website V2: homepage.
   Layout follows width, height, orientation and input, not just
   "desktop or phone". Sizes inside the Organize recreation use
   container units, so it scales as one piece. */

.solid { position: relative; background: var(--bg); }

/* Registered colors, so themes blend into each other instead of
   switching at once. */
@property --og-bg { syntax: "<color>"; inherits: true; initial-value: #1a1a1d; }
@property --og-fg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --sec { syntax: "<color>"; inherits: true; initial-value: rgba(235, 235, 245, 0.6); }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #0a84ff; }
@property --fav { syntax: "<color>"; inherits: true; initial-value: #ffd60a; }
@property --og-glass { syntax: "<color>"; inherits: true; initial-value: rgba(72, 72, 78, 0.42); }
@property --og-line { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.12); }
@property --og-control { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.1); }
@property --og-control-line { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.16); }
@property --og-tab-on { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.42); }
@property --glow { syntax: "<color>"; inherits: true; initial-value: #0a84ff; }

/* ================================================================
   ORGANIZE: a faithful recreation of SortGlass's Organize tab on an
   iPhone. Every position below comes from a real screenshot
   (640 px wide): inside the screen, 1cqw = 6.4 px of that screenshot.
   ================================================================ */
.og {
  --accent: #0a84ff;
  --accent-soft: color-mix(in srgb, var(--accent) 30%, transparent);
  --fav: #ffd60a;
  --ios-red: #ff453a;
  --og-bg: #1a1a1d;
  --og-fg: #fff;
  --sec: rgba(235, 235, 245, 0.6);
  --og-glass: rgba(72, 72, 78, 0.42);
  --og-line: rgba(255, 255, 255, 0.12);
  --og-control: rgba(255, 255, 255, 0.1);
  --og-control-line: rgba(255, 255, 255, 0.16);
  --og-tab-on: rgba(0, 0, 0, 0.42);
  position: relative;
  width: var(--og-w, 360px);
  flex: none;
  container-type: inline-size;
  /* Theme changes blend; Make It Yours sets a slower --blend while it turns. */
  transition-property: --og-bg, --og-fg, --sec, --accent, --fav, --og-glass, --og-line, --og-control, --og-control-line, --og-tab-on;
  transition-duration: var(--blend, 0.9s);
  transition-timing-function: var(--blend-ease, ease-in-out);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.og.is-light {
  --og-fg: #000;
  --sec: rgba(60, 60, 67, 0.62);
  --og-glass: rgba(255, 255, 255, 0.62);
  --og-line: rgba(0, 0, 0, 0.06);
  --og-control: rgba(255, 255, 255, 0.82);
  --og-control-line: rgba(0, 0, 0, 0.08);
  --og-tab-on: rgba(0, 0, 0, 0.07);
}
/* The phone: a dark metal band, a black bezel drawn by the screen's own
   shadow, and hardware buttons placed as on iPhone 18 Pro. */
.og-phone {
  position: relative;
  padding: 2.9cqw;
  border-radius: 16cqw;
  background: linear-gradient(145deg, #74777e 0%, #34363b 14%, #1c1d20 42%, #232528 62%, #3a3c41 86%, #6b6e75 100%);
  box-shadow:
    inset 0 0 0 0.22cqw rgba(255, 255, 255, 0.1),
    inset 0 0 0 0.9cqw rgba(0, 0, 0, 0.25),
    0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.6),
    0 70px 140px -50px rgba(0, 0, 0, 0.95);
}
.og-hw {
  position: absolute;
  width: 0.8cqw;
  border-radius: 0.45cqw;
  background: linear-gradient(90deg, #232428, #6d7077 55%, #3a3c41);
  box-shadow: inset 0 0 0 0.12cqw rgba(0, 0, 0, 0.45), 0 0 0.3cqw rgba(0, 0, 0, 0.5);
}
.og-action, .og-volup, .og-voldown { left: -0.6cqw; }
.og-side, .og-camera { right: -0.6cqw; background: linear-gradient(270deg, #232428, #6d7077 55%, #3a3c41); }
.og-action { top: 17%; height: 5.2%; }
.og-volup { top: 26%; height: 8.4%; }
.og-voldown { top: 36.4%; height: 8.4%; }
.og-side { top: 27.5%; height: 12.5%; }
/* Camera Control sits nearly flush: a dark sapphire face in a thin metal rim. */
.og-camera {
  top: 57%; height: 7.4%;
  right: -0.35cqw;
  width: 0.6cqw;
  background: linear-gradient(270deg, #15171b, #3b414b 60%, #22262c);
  box-shadow: 0 0 0 0.15cqw #55585f, inset 0 0 0.2cqw rgba(0, 0, 0, 0.7);
}

.og-screen {
  position: relative;
  aspect-ratio: 640 / 1387;
  border-radius: 13.1cqw;
  box-shadow: 0 0 0 2cqw #000;
  overflow: hidden;
  isolation: isolate;
  background: var(--og-bg);
  container-type: inline-size;
}
.og-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.07), transparent 32%, transparent 78%, rgba(255, 255, 255, 0.03));
  pointer-events: none;
}
.og-island {
  position: absolute;
  top: 2.9cqw; left: 50%;
  z-index: 8;
  width: 20.5cqw; height: 9.2cqw;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
}
/* The front camera, inside the island */
.og-island::after {
  content: "";
  position: absolute;
  top: 50%; right: 2.6cqw;
  width: 3.4cqw; height: 3.4cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2c3a5a 0 18%, #0d1018 45%, #050608 70%);
  box-shadow: 0 0 0 0.3cqw #0b0c0f;
  transform: translateY(-50%);
}

.og-glass {
  background: var(--og-glass);
  border: 1px solid var(--og-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .og-glass { background: rgba(48, 48, 52, 0.95); }
}

/* Status bar */
.og-status {
  position: absolute;
  inset: 0 0 auto;
  z-index: 7;
  height: 13.4cqw;
  color: var(--og-fg);
  pointer-events: none;
}
.og-time {
  position: absolute;
  left: 12.4cqw; top: 6.7cqw;
  font-size: 4.1cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
  transform: translateY(-50%);
}
.og-sys {
  position: absolute;
  right: 8.2cqw; top: 6.7cqw;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  transform: translateY(-50%);
}
.og-sys svg { height: 3.4cqw; width: auto; fill: var(--og-fg); }
.og-sys svg [stroke] { stroke: var(--og-fg); }

/* Photo: 4:5, between the header and the dock */
.og-photo {
  position: absolute;
  left: 0; right: 0;
  top: 45.5cqw;
  height: 125cqw;
  outline: none;
}
.og-photo:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 3px solid #8cc7ff;
  pointer-events: none;
}
.og-card {
  position: absolute;
  inset: 0;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
}
.og-card:active { cursor: grabbing; }
.og.is-armed .og-card { touch-action: pan-y; }
.og-card .og-ghost { position: absolute; inset: 0; }
.og-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Header panel, behind the status bar */
.og-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 41cqw;
  border-top: 0;
  border-radius: 0 0 7cqw 7cqw;
}
.og-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 10cqw; height: 10cqw;
  padding: 0;
  border: 1px solid var(--og-control-line);
  border-radius: 50%;
  background: var(--og-control);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--og-fg);
  cursor: pointer;
  transition: transform 0.25s var(--spring), background-color 0.2s;
}
.og-btn:active { transform: scale(0.9); }
.og-btn:disabled { color: var(--sec); opacity: 0.6; cursor: default; }
.og-btn .icon { width: 4.6cqw; height: 4.6cqw; stroke-width: 2.1; }
.og-hist { left: 3cqw; top: 13.9cqw; }
.og-trash { right: 3cqw; top: 13.9cqw; }
.og-sort { left: 3cqw; top: 26.7cqw; }
.og-infob { left: 16cqw; top: 28.3cqw; width: 6.9cqw; height: 6.9cqw; }
.og-infob .icon { width: 3.6cqw; height: 3.6cqw; }
/* Larger tap area than the small circle it shows, as with the app's own hit area. */
.og-infob::before { content: ""; position: absolute; inset: -1.6cqw; border-radius: 50%; }
.og-undo { left: 75.9cqw; top: 26.7cqw; }
.og-redo { left: 87.1cqw; top: 26.7cqw; }
.og-title {
  position: absolute;
  left: 0; right: 0; top: 18.9cqw;
  margin: 0;
  color: var(--sec);
  font-size: 2.35cqw;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-50%);
}
.og-title b { margin-right: 0.35em; color: var(--og-fg); font-size: 1.2em; font-weight: 700; letter-spacing: 0.16em; }
.og-date {
  position: absolute;
  left: 0; right: 0; top: 26.6cqw;
  color: var(--sec);
  font-size: 2.7cqw;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-50%);
}
.og-heart {
  position: absolute;
  left: 50%; top: 33.1cqw;
  display: grid;
  place-items: center;
  width: 9cqw; height: 9cqw;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sec);
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.og-heart .icon { width: 4.6cqw; height: 4.6cqw; stroke-width: 1.9; transition: transform 0.35s var(--spring); }
.og-heart[aria-pressed="true"] { color: var(--fav); }
.og-heart[aria-pressed="true"] .icon { fill: var(--fav); }
.og-heart.is-pulse .icon { transform: scale(1.4); }
.og-badge {
  position: absolute;
  top: -1cqw; right: -1cqw;
  min-width: 4.2cqw; height: 4.2cqw;
  padding: 0 1cqw;
  border-radius: 99px;
  background: var(--ios-red);
  color: #fff;
  font-size: 2.3cqw;
  font-weight: 700;
  line-height: 4.2cqw;
  text-align: center;
}
.og-badge[hidden] { display: none; }

/* Dock panel: caption, Set Rating's stars when open, the album row, and
   the tab bar. It grows upward over the photo, as in the app. */
.og-dock {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 1.9cqw 0 5cqw;
  border-bottom: 0;
  border-radius: 7cqw 7cqw 0 0;
}
.og-caption {
  height: 3.2cqw;
  margin: 0;
  color: var(--sec);
  font-size: 2cqw;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 3.2cqw;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s;
}
.og-caption.is-trash { color: var(--ios-red); }
.og-caption.is-fav { color: var(--fav); }
.og-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 61cqw;
  height: 0;
  margin: 0 auto;
  padding: 0 3cqw;
  border-radius: 99px;
  opacity: 0;
  overflow: hidden;
  transform: scale(0.5);
  transform-origin: left bottom;
  transition: height 0.44s var(--ease-out), margin 0.44s var(--ease-out), opacity 0.3s, transform 0.44s var(--ease-out);
}
.og.is-rating .og-rating { height: 11.2cqw; margin: 1.5cqw auto 0; opacity: 1; transform: none; }
.og-star {
  display: grid;
  place-items: center;
  width: 9.6cqw; height: 9.6cqw;
  padding: 0;
  border: 0;
  background: none;
  color: var(--og-fg);
  cursor: pointer;
}
.og-star .icon { width: 5.9cqw; height: 5.9cqw; stroke-width: 1.7; transition: transform 0.3s var(--spring); }
.og-star.is-on .icon { fill: currentColor; }
.og-star.is-hot .icon { transform: scale(1.22); }
.og-chips {
  display: flex;
  gap: 3.1cqw;
  margin-top: 1.5cqw;
  padding: 0 4.7cqw;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.og-chip {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  height: 12.8cqw;
  padding: 0 2.5cqw;
  border: 1px solid var(--og-control-line);
  border-radius: 2.8cqw;
  background: var(--og-control);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--og-fg);
  font: inherit;
  font-size: 2.65cqw;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--spring), background-color 0.25s, border-color 0.25s;
}
.og-chip .icon { width: 3.8cqw; height: 3.8cqw; fill: currentColor; stroke: none; }
.og-chip:active, .og-chip.is-press { transform: scale(0.92); }
.og-chip[aria-pressed="true"].og-setrating { background: color-mix(in srgb, var(--og-fg) 20%, transparent); }
.og-chip.is-member { background: var(--accent-soft); border-color: var(--accent); }
.og-chip.is-member .icon { color: var(--accent); }

/* Tab bar */
.og-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 89.8cqw;
  height: 14cqw;
  margin: 1.7cqw auto 0;
  padding: 0 1.5cqw;
  border-radius: 99px;
  pointer-events: none;
}
.og-tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6cqw;
  width: 18.5cqw;
  height: 11.4cqw;
  border-radius: 99px;
  color: var(--og-fg);
  font-size: 2.2cqw;
  font-weight: 600;
}
.og-tabs .icon { width: 5cqw; height: 5cqw; fill: currentColor; stroke: none; }
.og-tabs .is-on { background: var(--og-tab-on); color: var(--accent); }

/* Messages over the photo */
.og-note {
  position: absolute;
  left: 50%; top: 47cqw;
  z-index: 4;
  width: max-content;
  max-width: 84cqw;
  padding: 2cqw 3.6cqw;
  border-radius: 4cqw;
  color: var(--og-fg);
  font-size: 2.8cqw;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -2cqw);
  transition: opacity 0.25s, transform 0.4s var(--spring);
  pointer-events: none;
}
.og-note.is-on { opacity: 1; transform: translate(-50%, 0); }

.og-info {
  position: absolute;
  left: 4cqw; right: 4cqw; top: 146cqw;
  z-index: 4;
  padding: 3.2cqw 4cqw;
  border-radius: 5cqw;
  color: #fff;
  font-size: 2.8cqw;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6cqw);
  transition: opacity 0.25s, transform 0.45s var(--spring);
  pointer-events: none;
}
.og.is-info .og-info { opacity: 1; transform: none; pointer-events: auto; }
.og-info b { display: block; margin-bottom: 0.6cqw; color: inherit; font-size: 1.1em; }
.og-info span { color: var(--sec); }

.og-try {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: end center;
  padding-bottom: 8cqw;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.og-try span {
  padding: 2.4cqw 4.4cqw;
  border-radius: 99px;
  font-size: 3.2cqw;
  font-weight: 600;
}
.og.can-arm:not(.is-armed) .og-try { display: grid; }

.og-done {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  padding: 8cqw;
  color: var(--sec);
  font-size: 3.2cqw;
  text-align: center;
}
.og.is-empty .og-done { display: flex; }
.og-done button {
  min-height: 9cqw;
  padding: 0 4cqw;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* ================================================================
   PHOTOGRAPHIC COVER / WORKING DEMO
   Real photographs provide the color; the page itself stays quiet.
   ================================================================ */
.home { --section: clamp(64px, 8vw, 112px); }
.hero { padding: clamp(36px, 5vw, 76px) 0 clamp(48px, 6vw, 88px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "title photograph" "copy photograph";
  align-items: center; gap: 24px 7%;
}
.hero-title { grid-area: title; align-self: end; }
.hero-copy { grid-area: copy; align-self: start; max-width: 31em; }
.hero h1 { font-family: var(--font-display); font-size: clamp(4.3rem, 7.4vw, 7rem); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.hero h1 em { font-weight: 400; }
.hero .eyebrow { letter-spacing: .06em; font-weight: 500; font-size: .75rem; }
.hero .lede { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.65; }
.hero .cta-row { margin-top: 26px; gap: 24px; }
.hero-note { margin-top: 14px; }
.device-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; color: var(--text-2); font-size: .875rem; text-decoration: none; }
.device-link span { color: var(--text-3); }
.device-link:hover { color: var(--link); text-decoration: underline; }
.hero-photograph { grid-area: photograph; margin: 0; }
.contact-sheet { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: clamp(380px, 39vw, 560px); }
.contact-sheet img { width: 100%; height: 100%; object-fit: cover; min-width: 0; min-height: 0; }
.contact-sheet .cover-photo { grid-row: 1 / -1; }
.workflow { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.workflow .section-head { margin-bottom: 44px; }
.workflow-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 7%; }
.hero-demo { --og-w: clamp(250px, 26vw, 310px); justify-self: center; width: var(--og-w); max-width: 100%; }
.rail { display: none; }
.demo-controls { display: grid; grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr) 44px; gap: 4px; width: calc(100% + 32px); margin: 22px 0 0 -16px; }
.demo-controls button[data-demo-action="exit"] { grid-column: 1 / -1; justify-self: center; }
.demo-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.demo-controls button:hover { border-color: var(--control-line); background: var(--surface-2); }
.demo-controls button:disabled { opacity: .45; cursor: default; }
.demo-controls button .icon { color: currentColor; }
.demo-controls button[data-demo-action="favorite"] .icon { color: #ffd34f; }
.demo-controls button[data-demo-action="trash"] .icon { color: #ff6b7c; }
.demo-controls button[hidden], .no-js .demo-controls { display: none; }
.demo-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 12px; text-align: center; }
.demo-meta .fineprint { font-size: .75rem; }
.demo-pause { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--text-2); font: inherit; font-size: .8125rem; cursor: pointer; }
.demo-pause:hover { color: var(--text); background: var(--surface); }
.demo-pause .icon { width: 14px; height: 14px; }
.demo-pause[hidden] { display: none; }
.workflow-list { list-style: none; }
.workflow-list li { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 20px; padding: 28px 0; border-top: 1px solid var(--line-2); }
.step-number { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; color: var(--text-3); }
.workflow-copy h3 { font-family: var(--font); font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; text-transform: uppercase; }
.workflow-copy p { margin-top: 14px; color: var(--text-2); line-height: 1.6; }
.workflow-copy .fineprint { margin-top: 10px; }
.gesture-guide { display: grid; gap: 10px; margin: 18px 0 0; }
.gesture-guide > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.gesture-guide dt { min-width: 166px; font-weight: 600; }
.gesture-guide dt span { display: inline-block; width: 24px; font-size: 1.2rem; }
.gesture-guide dd { margin: 0; color: var(--text-2); font-size: .9375rem; }
.gesture-favorite dt { color: #ffd34f; }
.gesture-trash dt { color: #ff9b92; }
.gesture-next dt { color: #7cc8ff; }
@media (max-width: 479px) {
  .gesture-guide > div { display: block; }
  .gesture-guide dd { padding-left: 24px; }
}
.workflow-link { margin-top: 14px; }
.sync-note { display: flex; align-items: start; gap: 16px; padding: 24px 0; margin-top: 28px; border-top: 1px solid var(--line); color: var(--text-2); font-size: .9375rem; }
.sync-note .icon { width: 28px; height: 28px; color: var(--text-2); }
.devices p { max-width: 24em; color: var(--text-2); font-size: .9375rem; margin-top: 8px; }
@media (max-width: 899px) {
  .hero-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "title" "copy" "photograph"; gap: 24px; }
  .hero h1 { font-size: clamp(4rem, 11vw, 6.5rem); }
  .hero-copy { max-width: 37em; }
  .hero-photograph { margin-top: 10px; }
  .contact-sheet { height: clamp(200px, 40vw, 330px); grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr; gap: 8px; }
  .contact-sheet .cover-photo { grid-row: auto; }
  .workflow-layout { grid-template-columns: minmax(0,1fr); gap: 48px; }
  .hero-demo { --og-w: min(76vw,310px); }
  .workflow-copy { max-width: 40em; width: 100%; justify-self: center; }
}
@media (max-width: 479px) {
  .hero { padding-top: 36px; }
  .hero .cta-row { gap: 18px; }
  .hero .lede { font-size: 1.0625rem; }
  .hero h1 { font-size: clamp(3.5rem, 14vw, 4.8rem); }
  .contact-sheet { height: 190px; }
  .workflow .section-head { margin-bottom: 32px; }
}

/* ================================================================
   NO SECOND PHOTO LIBRARY: one state, two views
   ================================================================ */
.one {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(64px, 10vw, 144px) minmax(0, 1fr);
  align-items: stretch;
}
.one-pane {
  position: relative;
  padding: clamp(20px, 3vw, 36px);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.one-pane h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.one-pane h3 img { width: 24px; height: 24px; border-radius: 6px; }
.one-pane h3 { min-height: 24px; }
.one-app-label { margin: -8px 0 18px; color: var(--text-3); font-size: .8125rem; }
.one-pane h3 .icon { width: 20px; height: 20px; color: var(--text); }
.one-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; background: #000; }
.one-photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s, filter 0.4s; }
.one-photo.is-queued img { filter: saturate(0.4) brightness(0.6); }
.one-photo.is-deleted img { opacity: 0.15; }
.one-photo .chiprow {
  position: absolute;
  left: 10px; bottom: 10px;
  display: flex;
  gap: 6px;
}
.one-photo .chiprow span {
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.one-photo .chiprow span:empty { display: none; }
.one-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.one-actions button {
  --demo-ink: #52baff;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.25s var(--spring);
}
.one-actions .a-fav { --demo-ink: #ffd34f; }
.one-actions .a-rate { --demo-ink: #c2a0ff; }
.one-actions .a-trash { --demo-ink: #ff6b7c; }
.one-actions button:hover { border-color: var(--control-line); background: var(--surface-2); }
.one-actions button:active { transform: scale(0.97); }
.one-actions button[aria-pressed="true"] { border-color: var(--text-2); background: var(--surface-2); }
.one-actions button:disabled { opacity: 0.4; cursor: default; }
.one-actions .icon { width: 18px; height: 18px; flex: none; color: var(--demo-ink); }
.one-actions .a-fav[aria-pressed="true"] .icon { fill: currentColor; }
.one-confirm { grid-column: 1 / -1; }
.one-confirm[hidden] { display: none !important; }
.one-confirm.button { justify-content: center; min-height: 48px; border-radius: 4px; background: #a13228; color: #fff; border: 0; }
.one-confirm.button:hover { background: #b02c24; }

.one-beam { display: grid; place-items: center; }
.one-beam > span {
  position: relative;
  width: calc(100% - 20px); height: 24px;
}
.one-beam > span::before, .one-arrow-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--spectrum-stops)) 0 0 / 120px 100% repeat-x;
  -webkit-mask: url('../spectrum-arrow.svg') center / 100% 100% no-repeat;
  mask: url('../spectrum-arrow.svg') center / 100% 100% no-repeat;
}
/* Blur outside the mask, so the aura is not clipped to the arrow itself. */
.one-arrow-glow { position: absolute; inset: 0; filter: blur(3px); opacity: .4; }
@media (prefers-reduced-motion: no-preference) {
  .one-beam > span::before, .one-arrow-glow::before { animation: spectrum-arrow 8s linear infinite; animation-play-state: paused; }
  html:not(.is-page-hidden) .one-beam.is-motion-visible > span::before,
  html:not(.is-page-hidden) .one-beam.is-motion-visible .one-arrow-glow::before { animation-play-state: running; }
}
@keyframes spectrum-arrow { to { background-position: -120px 0; } }

.one-state { list-style: none; }
.one-state li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.one-state li:first-child { border-top: 0; }
.one-state .k { color: var(--text-2); font-size: 0.9375rem; }
.one-state .v { color: var(--text-3); font-size: 0.9375rem; font-weight: 600; text-align: right; transition: color 0.3s; }
.one-state .v.is-on { color: var(--text); }
.one-state li.is-changed { animation: one-row 0.9s var(--ease-out); }
@keyframes one-row {
  from { background: rgba(98, 225, 238, 0.14); }
  to { background: transparent; }
}
.one-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 22px; }
.one-foot .fineprint { max-width: 46em; }
@media (max-width: 479px) {
  .one-actions button { min-height: 56px; padding: 8px; gap: 6px; font-size: .8125rem; }
}


/* ================================================================
   MAKE IT YOURS: real theme combinations on the Organize screen
   ================================================================ */
#yours { overflow-x: clip; }
.yours {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy demo" "pick demo" "note demo";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, 6vw, 112px);
  align-items: start;
  margin-bottom: clamp(64px, 10vw, 120px);
}
.yours-copy { grid-area: copy; }
.yours-copy .lede { margin-top: 18px; }
.yours-pick { grid-area: pick; margin-top: 32px; }
.yours-demo {
  grid-area: demo;
  position: relative;
  justify-self: center;
  --og-w: min(34vw, 330px, calc((100svh - 120px) / 2.11));
  --glow: #0a84ff;
  transition: --glow var(--blend, 0.9s) var(--blend-ease, ease-in-out);
}

.yours-label { margin-bottom: 12px; color: var(--text-2); font-size: 0.875rem; font-weight: 600; }
.themes { display: flex; flex-wrap: wrap; gap: 8px; }
.theme {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 14px 6px 7px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.theme:hover { color: var(--text); background: var(--surface); }
.theme[aria-pressed="true"] { border-color: var(--cyan); background: var(--surface); color: var(--text); }
.sw {
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--t-bg) 50%, var(--t-accent) 50%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.t0 { --t-bg: #000000; --t-accent: #0a84ff; }
.t1 { --t-bg: #122129; --t-accent: #50d7e6; }
.t2 { --t-bg: #141118; --t-accent: #b566f2; }
.t3 { --t-bg: #f7c6dc; --t-accent: #80172c; }
.t4 { --t-bg: #181511; --t-accent: #db7846; }
.t5 { --t-bg: #000000; --t-accent: #52d996; }
.t6 { --t-bg: #e0ecfb; --t-accent: #1d71cc; }
.t7 { --t-bg: #faf2de; --t-accent: #b8470f; }
.t8 { --t-bg: #ffffff; --t-accent: #0d3785; }
.yours-pick .demo-pause { margin-top: 10px; }
.yours-note { grid-area: note; margin-top: 16px; max-width: 40em; }
/* Full-panel photographs, with source-matched metadata over the current image. */
.photo-stories { border-top: 1px solid var(--line); padding-bottom: 0; }
.photo-stories .title { max-width: 22ch; }
.photo-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px); }
.photo-story { position: relative; display: flex; align-items: flex-end; min-width: 0; min-height: clamp(940px, 104svh, 1120px); overflow: hidden; isolation: isolate; border-radius: clamp(32px, 4.2vw, 56px); background: #0b0e0d; }
.photo-story-backdrop { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.photo-story::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 10%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.5)); pointer-events: none; }
/* The reading scrim follows the copy, even when text wraps on a narrow screen. */
.photo-story-copy { position: relative; width: 100%; padding: 48px clamp(24px, 3vw, 40px); background: linear-gradient(180deg, rgba(0,0,0,.64), rgba(0,0,0,.78)); }
.photo-story-copy::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 140px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.64)); pointer-events: none; }
.photo-story .eyebrow { color: #dce0db; margin-bottom: 16px; }
.photo-story h3 { max-width: 15em; font-family: var(--font); font-size: clamp(1.9rem, 3.1vw, 3rem); font-weight: 700; line-height: 1.13; letter-spacing: .02em; }
.photo-story-copy > p:not(.eyebrow) { margin-top: 18px; max-width: 29em; color: #dce0db; }
.photo-story .link-arrow { margin-top: 22px; font-size: .9375rem; }
.photo-story-weekend .photo-story-backdrop { object-position: 48% 30%; }
.weekend-photos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; max-width: 430px; margin-top: 28px; }
.weekend-photos img { width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 3px; }
.weekend-photos img:nth-child(3) { object-position: 30% center; }
.weekend-photos img:nth-child(4) { object-position: 50% 25%; }
.weekend-photos img:nth-child(5) { object-position: 75% center; }
.metadata-example { max-width: 380px; margin-top: 28px; }
.metadata-images { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; overflow: hidden; padding: 0; border: 0; border-radius: inherit; background: #080a08; color: inherit; font: inherit; text-align: inherit; appearance: none; cursor: pointer; }
.metadata-images:focus-visible { outline-offset: -6px; }
.metadata-images:disabled { cursor: default; }
.metadata-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Focal points keep each subject in the narrower phone and split-screen crops. */
.metadata-image[data-photo="fern"],
.metadata-image[data-photo="canyon"],
.metadata-image[data-photo="x100-sunset-street"],
.metadata-image[data-photo="x100-city-lights"] { object-position: 48% 50%; }
.metadata-image[data-photo="bridge"],
.metadata-image[data-photo="x100-foggy-coast"] { object-position: 38% 50%; }
.metadata-image[data-photo="hibiscus"] { object-position: 51% 50%; }
.metadata-image[data-photo="redsun"] { object-position: 58% 50%; }
.metadata-image[data-photo="x100-redwoods"] { object-position: 49% 50%; }
.metadata-image[data-photo="x100-orange-cockpit"] { object-position: 36% 50%; }
.metadata-image[data-photo="x100-classic-interior"] { object-position: 54% 50%; }
.metadata-image[data-photo="x100-alpine-rain"] { object-position: 40% 50%; }
.metadata-image[data-photo="x100-autumn-river"] { object-position: 43% 50%; }
.metadata-image[data-photo="x100-peach-rose"] { object-position: 53% 50%; }
.metadata-image[data-photo="x100-neon-waterfront"] { object-position: 81% 50%; }
.metadata-image[data-photo="x100-city-reflections"] { object-position: 42% 50%; }
.metadata-image[data-photo="x100-neon-garage"] { object-position: 75% 50%; }
.metadata-image[data-photo="x100-shadow"] { object-position: 62% 50%; }
/* Quiet, non-interactive pills keep each value legible over the photograph. */
.metadata-camera, .metadata-fields > div { border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.2); }
.metadata-camera { display: inline-flex; align-items: center; max-width: 100%; min-height: 40px; padding: 9px 16px; border-radius: 24px; color: var(--text); font-size: .9375rem; line-height: 1.3; font-weight: 600; letter-spacing: .02em; overflow-wrap: anywhere; }
.metadata-fields { display: grid; gap: 7px; margin: 10px 0 0; }
.metadata-fields > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 42px; padding: 9px 14px; border-radius: 24px; }
.metadata-fields > div[hidden] { display: none; }
.metadata-fields dt { color: #bec4c0; font-size: .75rem; }
.metadata-fields dd { margin: 0; color: #f4f3ef; font-size: .8125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.photo-location { max-width: 430px; }
.photo-location .link-arrow > .icon:first-child { width: 18px; color: #b6d9f2; }
.photo-location p { margin: 6px 0 0; color: var(--text-2); font-size: .8125rem; }
@media (max-width: 899px) {
  .photo-story-grid { grid-template-columns: minmax(0,1fr); }
  .photo-story { min-height: 820px; }
  .photo-story-details { min-height: 820px; }
  .photo-story-copy { padding: 40px clamp(24px, 4vw, 40px); }
}

.icons-title { margin-bottom: 20px; color: var(--text-2); font-family: var(--font); font-size: 0.875rem; font-weight: 500; }
.icon-collection { padding-top: 24px; border-top: 1px solid var(--line); }

@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  /* Choices above the phone, so a tap shows its result right away. */
  .yours { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "pick" "demo" "note"; }
  .yours-note { margin-top: 28px; }
  .yours-pick { margin-top: 24px; min-width: 0; }
  .themes {
    flex-wrap: nowrap;
    margin: 0 calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .themes::-webkit-scrollbar { display: none; }
  .theme { flex: none; scroll-snap-align: start; }
  .yours-demo { margin-top: 28px; --og-w: min(70vw, 300px, max(220px, calc((100svh - 230px) / 2.11))); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .yours { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy demo" "pick demo" "note demo"; }
  .yours-demo { margin-top: 0; --og-w: calc((100svh - 40px) / 2.11); }
}

.icons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(5px, .8vw, 12px);
  margin: 0;
  list-style: none;
  perspective: 900px;
}
.icons li {
  flex: 0 1 48px;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 22.4%;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.4s var(--spring);
}
.icons li img { width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
  .icons li:hover { transform: translateY(-6%) scale(1.06); }
}
.icons-note { margin-top: 16px; }
.icon-collection .icons-title, .icon-collection .icons-note { text-align: center; }
@media (max-width: 899px) {
  .icons { flex-wrap: wrap; gap: 12px; }
  .icons li { flex: 0 0 48px; }
}

/* ================================================================
   DEVICES, PRICING, PRIVACY, FAQ, FINAL
   ================================================================ */
.devices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.devices li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(28px, 4vw, 48px) 12px; text-align: center; }
.devices li + li { border-left: 1px solid var(--line); }
.devices .icon { width: 44px; height: 44px; stroke-width: 1.3; color: var(--text); }
.devices b { font-family: var(--font); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; }
.devices span { color: var(--text-2); font-size: 0.9375rem; }
.os-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 28px 0 0;
  list-style: none;
}
.os-notes li { color: var(--text-2); font-size: 0.9375rem; }
.os-notes b { display: block; margin-bottom: 4px; }

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.compare > div { padding: 28px 0; }
.compare > div + div { padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--line); }
.compare h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font-family: var(--font); font-weight: 700; font-size: 1.5rem; letter-spacing: .02em; }
.compare h3 span { color: var(--text-2); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; }
.compare ul { display: grid; gap: 10px; margin-top: 18px; list-style: none; }
.compare li { display: flex; gap: 10px; color: var(--text-2); line-height: 1.5; }
.compare li .icon { margin-top: 3px; color: var(--cyan); stroke-width: 2.2; }
/* The live site's Spectrum core and outward bloom, with extra clearance
   from neighboring pricing rules. Keep the card out of its own stacking
   context so its opaque surface covers the bloom behind it. */
@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.compare { position: relative; z-index: 0; column-gap: clamp(20px, 3vw, 40px); }
.compare > .compare-pro {
  position: relative;
  isolation: auto;
  z-index: auto;
  overflow: visible;
  margin: 56px 0;
  padding: clamp(22px, 3vw, 32px);
  border-left: 0;
  border-radius: 40px;
  background: linear-gradient(160deg, rgba(98, 225, 238, 0.06), rgba(169, 143, 255, 0.05) 50%, rgba(255, 184, 79, 0.06)), #06070a;
}
.compare-pro::before,
.compare-pro::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  background: conic-gradient(from var(--spin, 0deg), hsl(22.5 100% 52%), hsl(52.5 100% 52%), hsl(82.5 100% 52%), hsl(112.5 100% 52%), hsl(142.5 100% 52%), hsl(172.5 100% 52%), hsl(202.5 100% 52%), hsl(232.5 100% 52%), hsl(262.5 100% 52%), hsl(292.5 100% 52%), hsl(322.5 100% 52%), hsl(352.5 100% 52%), hsl(382.5 100% 52%));
  pointer-events: none;
}
/* Core line, as rendered on the live site. */
.compare-pro::before {
  inset: 0;
  padding: 1.6px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .94;
}
/* Keep the live colors and intensity, but spread the faint outer tail more
   gradually into black. The opaque card still covers all inward color;
   vertical clearance lets this wider falloff finish before either rule. */
.compare-pro::after {
  inset: -3px;
  z-index: -1;
  filter: blur(20px);
  opacity: .4;
}
@media (prefers-reduced-motion: no-preference) {
  .compare-pro::before { animation: pro-spin 8.75s linear infinite; animation-play-state: paused; }
  .compare-pro::after { animation: pro-spin 8.75s linear infinite, pro-breathe 3.75s ease-in-out infinite; animation-play-state: paused; }
  html:not(.is-page-hidden) .compare-pro.is-motion-visible::before,
  html:not(.is-page-hidden) .compare-pro.is-motion-visible::after { animation-play-state: running; }
}
@keyframes pro-spin { to { --spin: 360deg; } }
@keyframes pro-breathe {
  0%, 100% { opacity: .4; }
  33% { opacity: .32; }
  67% { opacity: .43; }
}


.plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.plan { display: flex; flex-direction: column; gap: 4px; padding: 24px 20px 24px 0; }
.plan + .plan { padding-left: 20px; border-left: 1px solid var(--line); }
.plan-name { color: var(--text-2); font-size: 0.875rem; font-weight: 600; }
.plan-price {
  font-family: var(--font);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.plan-price span { margin-left: 4px; color: var(--text-2); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; }
.plan-note { color: var(--text-3); font-size: 0.8125rem; }
.other-options { border-bottom: 1px solid var(--line); }
.other-options summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.other-options summary:hover { color: var(--text); }
.other-options summary::-webkit-details-marker { display: none; }
.other-options summary .icon { width: 16px; height: 16px; color: var(--text-3); transition: transform 0.3s var(--ease-out); }
.other-options[open] summary .icon { transform: rotate(45deg); }
.plan-lifetime { padding: 4px 0 22px; }
.sale-pill {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--amber) 60%, transparent);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: 1px;
  white-space: nowrap;
}
.other-options summary .sale-pill { margin-right: auto; }
@media (max-width: 420px) { .other-options summary .sale-pill { margin-left: 6px; padding: 2px 7px; font-size: 0.6875rem; } }
.other-options[open] summary .sale-pill { display: none; }
.plan-price .plan-was { margin-left: 8px; color: var(--text-3); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; }
.pricing-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 24px; }
.pricing-foot .fineprint { max-width: 62em; }

.privacy-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.facts { list-style: none; }
.facts li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 14px; padding: 20px 0; border-top: 1px solid var(--line); }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts .icon { grid-row: span 2; width: 22px; height: 22px; margin-top: 2px; color: var(--text); }
.facts b { font-size: 1.0625rem; }
.facts span { color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; }

.final {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(85svh, 800px);
  padding: clamp(80px, 12svh, 160px) 0 clamp(56px, 9svh, 120px);
  overflow: hidden;
  isolation: isolate;
}
.final-photo { position: absolute; inset: 0; z-index: -2; }
.final-photo img { width: 100%; height: 100%; object-fit: cover; }
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5,6,8,.05), rgba(5,6,8,.15) 30%, rgba(5,6,8,.88));
}
.final h2 {
  max-width: 9em;
  margin-bottom: 20px;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 0.92;
  letter-spacing: -.035em;
  font-family: var(--font-display);
  font-weight: 400;
  color: #f2f0e8;
}
.final .lede { color: #f2f0e8; }

/* ================================================================
   RESPONSIVE FOR THE REST OF THE PAGE
   ================================================================ */
@media (orientation: landscape) and (max-height: 520px) {
  .final { min-height: 100svh; }
  .final h2 { font-size: min(9vw, 22svh); }
}

@media (max-width: 760px) {
  .one { grid-template-columns: 1fr; }
  .one-beam { height: 88px; }
  .one-beam > span { width: 64px; transform: rotate(90deg); }
  .devices { grid-template-columns: 1fr; }
  .devices li { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 2px 14px; padding: 22px 4px; text-align: left; }
  .devices p { grid-column: 2 / -1; }
  .devices li + li { border-left: 0; border-top: 1px solid var(--line); }
  .devices .icon { grid-row: span 2; width: 32px; height: 32px; }
  .devices b { font-size: 1.375rem; }
  .os-notes { grid-template-columns: 1fr; gap: 14px; }
  .compare { grid-template-columns: 1fr; }
  .compare > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .compare > .compare-pro { padding: 22px 20px; border-top: 0; }
  .plans { grid-template-columns: 1fr; }
  .plan, .plan + .plan { padding: 16px 0; border-left: 0; }
  .plans .plan + .plan { border-top: 1px solid var(--line); }
  .privacy-grid { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .os-notes { grid-template-columns: 1fr; gap: 14px; }
}

/* Touch-first screens, tablets included: the demo keeps the app's real
   sizes, but each button answers to a larger area around it. */
@media (pointer: coarse) {
  .og-btn::before, .og-heart::before, .og-star::before {
    content: "";
    position: absolute;
    inset: -1.6cqw;
    border-radius: 50%;
  }
  .og-star { position: relative; }
}

@media (forced-colors: active) {
  .og-glass, .one-pane, .compare-pro { border: 1px solid CanvasText; }
  .compare-pro::before, .compare-pro::after { display: none; }
  .one-arrow-glow { display: none; }
  .one-beam > span::before { background: CanvasText; }
  .photo-story { background: Canvas; border: 1px solid CanvasText; }
  .photo-story-copy { background: Canvas; }
  .photo-story-backdrop, .metadata-images, .photo-story::before, .photo-story-copy::before { display: none; }
  .photo-story .eyebrow, .photo-story-copy > p, .metadata-camera, .metadata-fields dt, .metadata-fields dd, .photo-location p { color: CanvasText; }
  .metadata-camera, .metadata-fields > div { border-color: CanvasText; background: Canvas; }
}

@media print {
  .hero-demo, .demo-meta { display: none !important; }
  .compare-pro::before, .compare-pro::after { display: none; }
  .photo-story { min-height: 0; background: #fff; border: 1px solid #ccc; }
  .photo-story-copy { background: #fff; }
  .photo-story-backdrop, .metadata-images, .photo-story::before, .photo-story-copy::before { display: none; }
  .photo-story .eyebrow, .photo-story-copy > p, .metadata-camera, .metadata-fields dt, .metadata-fields dd, .photo-location p { color: #000; }
  .metadata-camera, .metadata-fields > div { border-color: #aaa; background: #fff; }
  .one-beam { display: none; }
}