/* PicText website: one stylesheet for every page.

   The palette, the radii and the type scale are the app's own, so the site and
   the app read as one product. Light values sit on :root, dark values on
   [data-theme="dark"]. Two rules carried over from the app's own design law:

     1. The backdrop is the base colour alone. One soft wash of the accent sits
        behind the hero and nothing else competes with the cards.
     2. A card is solid paper. It lifts with a hairline and a layered shadow.
        Only chrome that floats over content blurs, which here is the sticky
        header and nothing else. */

:root {
  color-scheme: light;

  --page: #F4F7F8;
  --card: #FFFFFF;
  --card-border: rgba(2, 14, 15, 0.08);
  --card-shadow: 0 1px 2px rgba(2, 14, 15, 0.05), 0 12px 32px rgba(2, 14, 15, 0.08);
  --card-shadow-lift: 0 2px 4px rgba(2, 14, 15, 0.06), 0 22px 52px rgba(2, 14, 15, 0.12);
  --nested: #EEF3F4;
  --rule: rgba(2, 14, 15, 0.09);

  --ink: #1A2122;
  --ink-2: #5F6A6B;
  --link: #1B5EBA;
  --accent: #4285E7;
  --wash: rgba(66, 133, 231, 0.13);

  --device-shell: #0B0E10;
  --device-shadow: 0 2px 8px rgba(2, 14, 15, 0.16), 0 34px 70px rgba(2, 14, 15, 0.24);

  --r-s: 12px;
  --r-m: 16px;
  --r-l: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --wrap: 1120px;
  --read: 680px;
  --pad: 24px;
  --section: 112px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --page: #071618;
  --card: #0F1F21;
  --card-border: #354648;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.45);
  --card-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.55), 0 28px 62px rgba(0, 0, 0, 0.55);
  --nested: #16292C;
  --rule: #253A3D;

  --ink: #F2F8F9;
  --ink-2: #959D9E;
  --link: #85B7FF;
  --accent: #5B9EFF;
  --wash: rgba(91, 158, 255, 0.14);

  --device-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 34px 70px rgba(0, 0, 0, 0.55);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.wrap--read {
  max-width: calc(var(--read) + var(--pad) * 2);
}

main {
  flex: 1 0 auto;
}

.section {
  padding: var(--section) 0 0;
}

.section--last {
  padding-bottom: var(--section);
}

/* ---------- type ---------- */

.eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 20px;
}

h1 {
  font-size: clamp(2.6rem, 2rem + 3vw, 4.4rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.05rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.012em;
}

p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
}

p + p,
p + ul,
p + ol,
ul + p,
ol + p {
  margin-top: 16px;
}

ul,
ol {
  color: var(--ink-2);
  padding-left: 1.15rem;
}

li {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

li::marker {
  color: var(--ink-2);
}

li:last-child {
  margin-bottom: 0;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

.section__head {
  max-width: 620px;
  margin-bottom: 44px;
}

.section__head p {
  max-width: 52ch;
  margin-top: 12px;
  text-wrap: pretty;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--page);
  background: color-mix(in srgb, var(--page) 80%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  min-height: 44px;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 11px;
  border-radius: var(--r-s);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
}

.site-nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.theme-toggle {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--r-s);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
}

/* The icon shows the theme a tap would switch TO. Driven by the attribute on
   <html>, never by JS: `hidden` is an HTML property and does not exist on SVG. */
.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* ---------- App Store badge ---------- */

.badge-store {
  display: inline-block;
  border-radius: 9px;
  transition: transform 0.2s ease;
}

.badge-store:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.badge-store svg {
  width: 168px;
  height: 56px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: 72px;
}

.hero__wash {
  position: absolute;
  inset: -160px 0 auto;
  height: 900px;
  background: radial-gradient(46% 52% at 62% 34%, var(--wash) 0%, transparent 72%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 40px;
  align-items: end;
}

.hero__text {
  max-width: 34rem;
}

.hero h1 {
  margin-bottom: 24px;
}

.hero__sub {
  max-width: 44ch;
  font-size: 1.1875rem;
  line-height: 1.5;
  margin-bottom: 32px;
  text-wrap: pretty;
}

.hero__note {
  margin-top: 18px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.hero__stage {
  position: relative;
  height: 524px;
  clip-path: inset(-80px -80px 0 -80px);
}

.hero__stage .device--front {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  animation: float 6s ease-in-out infinite;
}

.hero__stage .device--back {
  position: absolute;
  left: 0;
  top: 66px;
  z-index: 1;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---------- the phone ---------- */

.device {
  --bezel: calc(var(--dw) * 0.0272);
  --screen: calc(var(--dw) - var(--bezel) * 2);
  position: relative;
  width: var(--dw);
  flex: none;
  padding: var(--bezel);
  background: var(--device-shell);
  border-radius: calc(var(--screen) * 0.138 + var(--bezel));
  box-shadow: var(--device-shadow);
}

.device::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
  z-index: 3;
}

[data-theme="dark"] .device::after {
  border-color: rgba(255, 255, 255, 0.18);
}

.device img,
.device .device__ph {
  width: 100%;
  height: auto;
  border-radius: calc(var(--screen) * 0.138);
  background: linear-gradient(160deg, #DCE7E9 0%, #EFF4F5 46%, #CFDDE0 100%);
}

.device__island {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--bezel) + var(--screen) * 0.027);
  width: calc(var(--screen) * 0.312);
  height: calc(var(--screen) * 0.090);
  border-radius: var(--r-pill);
  background: var(--device-shell);
}

/* A phone whose foot runs out of its container: no bottom bezel, square bottom
   corners, and the container clips it. */
.device--cut {
  padding-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.device--cut img,
.device--cut .device__ph {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.device__ph--screen {
  aspect-ratio: 364 / 677;
}

.device__ph--full {
  aspect-ratio: 1206 / 2622;
}

/* ---------- bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.bento__card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-l);
  box-shadow: var(--card-shadow);
  padding: 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bento__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-lift);
}

.bento__card--wide {
  grid-column: span 3;
  border-radius: var(--r-xl);
  padding: 34px 34px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 560px;
}

.bento__card--third {
  grid-column: span 2;
}

.bento__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 250px;
  margin-top: 28px;
  clip-path: inset(-40px 0 0 0);
}

.tool__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tint, var(--accent)) 12%, transparent);
  color: var(--tint, var(--accent));
  margin-bottom: 18px;
}

.tool__icon svg {
  width: 24px;
  height: 24px;
}

.bento h3 {
  font-size: 1.3125rem;
  font-weight: 650;
  letter-spacing: -0.022em;
  margin-bottom: 2px;
}

.tool__lede {
  color: var(--ink);
  font-weight: 400;
  font-size: 1.0625rem;
}

.bento__card--wide h3 {
  font-size: 1.5rem;
}

.bento__card--wide .tool__lede {
  font-size: 1.1875rem;
}

.tool__body {
  margin-top: 10px;
  font-size: 1rem;
}

/* Each tool wears its own colour, exactly as its tile does in the app. */
.t-extract   { --tint: #467AC6; }
.t-translate { --tint: #06915F; }
.t-commands  { --tint: #9C5EAA; }
.t-pdftext   { --tint: #7F8006; }
.t-scanner   { --tint: #B16512; }

[data-theme="dark"] .t-extract   { --tint: #70A6F5; }
[data-theme="dark"] .t-translate { --tint: #4CBD88; }
[data-theme="dark"] .t-commands  { --tint: #C889D7; }
[data-theme="dark"] .t-pdftext   { --tint: #AAAB3F; }
[data-theme="dark"] .t-scanner   { --tint: #DF8F48; }

/* ---------- the screenshot strip ---------- */

.strip-section {
  position: relative;
}

.strip-mask {
  position: relative;
}

.strip-mask::before,
.strip-mask::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 2;
  pointer-events: none;
}

.strip-mask::before {
  left: 0;
  background: linear-gradient(to right, var(--page), transparent);
}

.strip-mask::after {
  right: 0;
  background: linear-gradient(to left, var(--page), transparent);
}

.strip {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  padding: 8px max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad))) 28px;
  scrollbar-width: none;
}

.strip::-webkit-scrollbar {
  display: none;
}

.frame {
  flex: none;
  width: 306px;
  scroll-snap-align: start;
  border-radius: var(--r-l);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  background: var(--card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.frame:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-lift);
}

.frame img,
.frame .frame__ph {
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 2868;
  background: linear-gradient(170deg, #E9F0F1 0%, #F7FAFA 44%, #DCE7E9 100%);
}

/* ---------- the extras grid ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tile {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-l);
  box-shadow: var(--card-shadow);
  padding: 26px 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-lift);
}

.tile__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--r-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  margin-bottom: 16px;
}

.tile__mark svg {
  width: 21px;
  height: 21px;
}

.tile h3 {
  margin-bottom: 6px;
}

.tile p {
  font-size: 0.9688rem;
}

.aside-line {
  margin-top: 24px;
  font-size: 1rem;
  color: var(--ink-2);
}

/* ---------- the offer, and the privacy note ---------- */

.panel {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  box-shadow: var(--card-shadow);
  padding: 48px;
}

.panel--offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: stretch;
}

.panel--offer h2 {
  margin-bottom: 16px;
}

.panel--offer p {
  font-size: 1.0625rem;
}

.panel--offer p + p {
  margin-top: 14px;
}

.panel__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--rule);
  padding-left: 40px;
}

.panel__price {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
}

.panel__plans {
  margin: 14px 0 22px;
  font-size: 1rem;
  color: var(--ink-2);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--link);
}

.textlink svg {
  width: 15px;
  height: 15px;
}

.privacy-note {
  max-width: 62ch;
}

.privacy-note h2 {
  margin-bottom: 16px;
}

.privacy-note p {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
}

.privacy-note .textlink {
  margin-top: 6px;
}

/* ---------- prose pages ---------- */

.page-head {
  padding-top: 72px;
}

.page-head h1 {
  font-size: clamp(2.2rem, 1.7rem + 2.2vw, 3.2rem);
  margin-bottom: 20px;
}

.page-head .lead {
  max-width: 60ch;
  font-size: 1.1875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.page-head .meta {
  margin-top: 16px;
  font-size: 0.9375rem;
}

.jumplist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  padding: 0;
  margin: 40px 0 0;
}

.jumplist li {
  margin: 0;
}

.jumplist a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(2, 14, 15, 0.05);
  color: var(--ink-2);
  font-size: 0.9063rem;
  font-weight: 500;
}

[data-theme="dark"] .jumplist a {
  box-shadow: none;
}

.jumplist a:hover {
  color: var(--ink);
  text-decoration: none;
}

.prose {
  padding-bottom: 96px;
}

.prose section {
  margin-top: 56px;
}

.prose h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.6rem);
  margin-bottom: 16px;
}

/* the header is sticky, so a jump link must not park its heading under it */
.prose section[id] {
  scroll-margin-top: 92px;
}

.prose ul {
  margin-top: 16px;
}

.note {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-m);
  box-shadow: var(--card-shadow);
  padding: 20px 24px;
  margin-top: 20px;
}

.note p {
  font-size: 1rem;
}

/* ---------- footer ---------- */

.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--rule);
  padding: 40px 0 48px;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: -12px;
}

.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.site-footer nav a:hover {
  color: var(--ink);
}

.site-footer p {
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* ---------- motion, added only once the page is alive ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--i, 0) * 60ms);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.stagger > *:nth-child(2) { --i: 1; }
.stagger > *:nth-child(3) { --i: 2; }
.stagger > *:nth-child(4) { --i: 3; }
.stagger > *:nth-child(5) { --i: 4; }
.stagger > *:nth-child(6) { --i: 5; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  :root {
    --section: 96px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  }

  .hero__stage .device--back {
    display: none;
  }

  .hero__stage .device--front {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    animation: none;
  }

  .bento__card--wide {
    min-height: 520px;
  }
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento__card--wide {
    grid-column: span 2;
    min-height: 0;
  }

  .bento__card--third {
    grid-column: span 1;
  }

  .bento__card--third:last-child {
    grid-column: span 2;
  }

  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .panel {
    padding: 36px;
  }

  .panel--offer {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .panel__aside {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 28px;
  }
}

@media (max-width: 780px) {
  .hero {
    padding-top: 44px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    text-align: center;
    justify-items: center;
  }

  .hero__text {
    max-width: 100%;
  }

  .hero__sub {
    margin-inline: auto;
  }

  .hero__stage {
    width: 100%;
    height: 336px;
    margin-top: 44px;
  }

  .hero__stage .device--front {
    top: 0;
  }

  .badge-store {
    display: inline-block;
  }

  .section__head {
    max-width: 100%;
    margin-bottom: 32px;
  }
}

@media (max-width: 640px) {
  :root {
    --pad: 20px;
    --section: 64px;
  }

  body {
    font-size: 16px;
  }

  .site-nav a {
    padding: 0 7px;
    font-size: 0.8125rem;
  }

  .brand {
    font-size: 1rem;
  }

  .bento {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* one column means every card spans one: a leftover span 2 would invent an
     implicit second column and squeeze the single column cards into a sliver */
  .bento__card--wide,
  .bento__card--third,
  .bento__card--third:last-child {
    grid-column: span 1;
  }

  .bento__card {
    padding: 24px;
  }

  .bento__card--wide {
    padding: 26px 26px 0;
  }

  .tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .panel {
    padding: 26px;
  }

  .strip-mask::before,
  .strip-mask::after {
    width: 28px;
  }

  .frame {
    width: 258px;
  }

  .page-head {
    padding-top: 44px;
  }

  .prose section {
    margin-top: 40px;
  }

  .privacy-note p {
    font-size: 1.0625rem;
  }

  .panel__price {
    font-size: 1.4rem;
  }

  .site-footer__inner {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- the phones, sized where they sit ---------- */

.hero__stage .device--front { --dw: 336px; }
.hero__stage .device--back { --dw: 252px; }

.bento__stage .device {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  --dw: 288px;
  box-shadow: 0 2px 6px rgba(2, 14, 15, 0.12), 0 18px 34px rgba(2, 14, 15, 0.14);
}

[data-theme="dark"] .bento__stage .device {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 34px rgba(0, 0, 0, 0.45);
}

@media (max-width: 1080px) {
  .hero__stage .device--front { --dw: 322px; }
}

@media (max-width: 780px) {
  .hero__stage .device--front { --dw: 286px; }
}

@media (max-width: 640px) {
  .hero__stage .device--front { --dw: 292px; }
  .bento__stage .device { --dw: 236px; }
}

/* ---------- pictures ---------- */

picture {
  display: block;
}

/* The home screen has a light and a dark shot. The site has its own switch, so
   the pair follows the attribute the switch writes, never prefers-color-scheme,
   which would disagree with it. */
.only-dark {
  display: none;
}

[data-theme="dark"] .only-light {
  display: none;
}

[data-theme="dark"] .only-dark {
  display: block;
}