/* /devices page. Load after kit.css (the illustration kit's tokens: the pale blue panel behind each
   crayon drawing, the cobalt kicker, the bold italic keyword). Every rule starts at .par-devices;
   the host's tokens win, these are fallbacks. Nothing here draws an image. Without the module (no
   JavaScript, or before it mounts) each screen of the race pair shows its B frame, the turn done;
   the module adds data-dev-ready and the motion. */
.par-devices {
  --pd-bg: var(--bg, #f7f0e1);
  --pd-surface: var(--surface, #fffdf8);
  --pd-text: var(--text, #211a10);
  --pd-soft: var(--text-soft, #4d4434);
  --pd-muted: var(--text-muted, #6e6350);
  --pd-border: var(--border, #e9dec7);
  --pd-accent: var(--accent, #2b231b);
  --pd-band: #2b231b;
  --pd-display: var(--font-display, "Newsreader", Georgia, serif);
  --pd-body: var(--font-body, "Geist", system-ui, sans-serif);
  --pd-mono: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  --pd-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --pd-loop: 4.2s;
  --pd-gutter: clamp(16px, 4.4vw, 56px);
  --gutter: var(--pd-gutter); /* the kit bleeds drawings to the screen edge by this much on phones */
  display: block;
  color: var(--pd-text);
  font: 400 16px/1.5 var(--pd-body);
}
.par-devices *, .par-devices *::before, .par-devices *::after { box-sizing: border-box; }
.par-devices .pd-wrap { max-width: calc(1168px + 2 * var(--pd-gutter)); margin: 0 auto; padding: 0 var(--pd-gutter); }
.par-devices h1, .par-devices h2 { font-family: var(--pd-display); font-weight: 400; letter-spacing: -0.015em; margin: 0; }
.par-devices .pil-kicker { margin: 0 0 12px; }
.par-devices .pd-sub { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.4; color: var(--pd-soft); max-width: 46ch; margin: 18px 0 0; text-wrap: balance; }
.par-devices .pd-chip { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.25 var(--pd-body); color: var(--pd-soft); background: var(--pd-surface); border: 1px solid var(--pd-border); border-radius: 999px; padding: 9px 14px; }
.par-devices .pd-chip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pil-green, #2f6b45); }
.par-devices .pd-btn { display: inline-block; background: var(--pd-accent); color: var(--pd-bg); font: 500 15px/1 var(--pd-body); padding: 15px 22px; border-radius: 999px; text-decoration: none; }

/* one idea, one drawing, one sentence */
.par-devices .pd-hero { padding: 40px 0 0; }
.par-devices .pd-hero h1 { font-size: clamp(44px, 7vw, 92px); line-height: 1; max-width: 12ch; }
.par-devices .pd-hero .pd-chip { margin-top: 18px; }
.par-devices .pd-sec { padding: 112px 0 0; }
.par-devices .pd-sec h2 { font-size: clamp(36px, 5vw, 62px); line-height: 1.04; max-width: 16ch; }
@media (min-width: 761px) {
  .par-devices .pd-sec--split { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
  .par-devices .pd-sec--split .pil-art { margin: 0; }
}
.par-devices .pd-fig { margin: 0; }

/* the Mac: the meeting panel is the app's own screen, a screenshot that lights up once */
.par-devices .pd-shot { margin: clamp(20px, 3vw, 40px) 0 0; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 22px 44px -24px rgba(43, 35, 27, 0.5); }
.par-devices .pd-shot img { display: block; width: 100%; height: auto; }
.par-devices .pd-shot--glow { position: relative; }
.par-devices .pd-glow {
  position: absolute; left: var(--pd-gl, 0); top: var(--pd-gt, 0); width: var(--pd-gw, 0); height: var(--pd-gh, 0);
  border-radius: 1.7% / 10.5%; pointer-events: none; opacity: 0;
}
.par-devices[data-dev-ready] .is-lit .pd-glow { animation: pd-light 2.4s var(--pd-ease) forwards; }
.par-devices[data-dev-ready].pd-reduced .pd-glow { opacity: 1; box-shadow: 0 0 0 1.5px rgba(255, 214, 150, 0.75), 0 0 28px 4px rgba(255, 190, 110, 0.35); }
@keyframes pd-light {
  0% { opacity: 0; box-shadow: 0 0 0 0 rgba(255, 214, 150, 0), 0 0 0 0 rgba(255, 190, 110, 0), 0 0 0 200vmax rgba(24, 16, 8, 0); }
  35% { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 214, 150, 0.95), 0 0 44px 8px rgba(255, 190, 110, 0.6), 0 0 0 200vmax rgba(24, 16, 8, 0.4); }
  100% { opacity: 1; box-shadow: 0 0 0 1.5px rgba(255, 214, 150, 0.75), 0 0 28px 4px rgba(255, 190, 110, 0.35), 0 0 0 200vmax rgba(24, 16, 8, 0.16); }
}
.par-devices .pd-get { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.par-devices .pd-get small { font: 400 14px/1.4 var(--pd-body); color: var(--pd-muted); }

/* the second screen: the person's app stays a screenshot, the turn on the phone and on the big
   screen at the same instant, on a band of ink so it reads as a different thing */
.par-devices .pd-band { background: var(--pd-band); color: #f7f0e1; margin-top: 104px; padding: 110px 0 100px; }
.par-devices .pd-band .pil-kicker { color: var(--pil-pink, #f2a7c3); }
.par-devices .pd-band h2 { font-size: clamp(40px, 6vw, 80px); line-height: 1; max-width: 12ch; }
.par-devices .pd-pair { display: grid; grid-template-columns: 4fr auto 7fr; gap: 20px; align-items: center; margin-top: 40px; }
.par-devices .pd-screen { display: grid; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7); }
.par-devices .pd-screen > img { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.par-devices .pd-a { opacity: 0; }
.par-devices .pd-sync { font: 400 14px/1.3 var(--pd-body); color: var(--pil-pink, #f2a7c3); text-align: center; width: 72px; }
.par-devices .pd-sync span { display: block; font: 400 30px/1 var(--pd-body); margin-bottom: 6px; }
.par-devices .pd-band figcaption { font-size: clamp(16px, 1.5vw, 19px); color: #d9cdb4; margin-top: 26px; max-width: 52ch; }
.par-devices .pd-band figcaption a { color: #f7f0e1; }
.par-devices .pd-band figcaption small { display: block; margin-top: 8px; font: 400 14px/1.45 var(--pd-body); color: #a8997f; }

/* with the module: the loop starts at frame A and runs only while the pair is on screen */
.par-devices[data-dev-ready] .pd-pair .pd-a { opacity: 1; }
.par-devices[data-dev-ready] .pd-pair .pd-b { opacity: 0; }
.par-devices[data-dev-ready] .pd-pair.is-live .pd-b { animation: pd-swap var(--pd-loop) var(--pd-ease) infinite; }
.par-devices[data-dev-ready] .pd-pair.is-live .pd-phone { animation: pd-tilt var(--pd-loop) var(--pd-ease) infinite; }
.par-devices[data-dev-ready] .pd-pair.is-live .pd-sync { animation: pd-ping var(--pd-loop) var(--pd-ease) infinite; }
.par-devices[data-dev-ready].pd-reduced .pd-pair .pd-b { opacity: 1; animation: none; }
@keyframes pd-swap { 0%, 28% { opacity: 0; } 40%, 78% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes pd-tilt { 0%, 28% { transform: rotate(0deg); } 40%, 78% { transform: rotate(-8deg); } 90%, 100% { transform: rotate(0deg); } }
@keyframes pd-ping { 0%, 28% { opacity: 0.45; } 34% { opacity: 1; } 60%, 100% { opacity: 0.45; } }


.par-devices .pd-today { padding: 104px 0 0; }
.par-devices .pd-today h2, .par-devices .pd-faq h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.05; }
.par-devices .pd-rows { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--pd-border); }
.par-devices .pd-rows li { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--pd-border); align-items: baseline; font-size: 17px; }
.par-devices .pd-rows .pd-chip { justify-self: start; }
.par-devices .pd-faq { padding: 90px 0 0; }
.par-devices .pd-faq dl { margin: 16px 0 0; max-width: 720px; }
.par-devices .pd-faq dt { font: 500 17px/1.4 var(--pd-body); margin-top: 22px; }
.par-devices .pd-faq dd { color: var(--pd-soft); margin: 6px 0 0; }
.par-devices .pd-cta { text-align: center; padding: 110px 0 120px; }
.par-devices .pd-cta h2 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.05; }
.par-devices .pd-cta .pd-sub { max-width: 36ch; margin: 16px auto 28px; }

@media (max-width: 760px) {
  .par-devices .pd-hero { padding-top: 20px; }
  .par-devices .pd-sec { padding-top: 80px; }
  .par-devices .pd-rows li { grid-template-columns: 1fr; gap: 8px; }
  .par-devices .pd-band { margin-top: 80px; padding: 80px 0 72px; }
  .par-devices .pd-pair { grid-template-columns: 1fr; gap: 10px; }
  .par-devices .pd-sync { width: auto; }
  .par-devices .pd-sync span { display: inline-block; transform: rotate(90deg); }
}