/* Product shots, drawn in HTML. Everything is sized in em on a 120 × 80em artboard
   (1em = 1/120 of the host width), so a shot scales cleanly to any box. */
.ab {
  position: absolute; inset: 0;
  transform: scale(var(--zoom, 1));
  font-size: calc(100cqw / 120);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: #1d1d1f; line-height: 1.35; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.9s cubic-bezier(.2,.75,.2,1);
}
.ab * { box-sizing: border-box; }
.ab svg { display: block; }
.ab b { font-weight: 600; }
.ab small { display: block; color: #6e6e73; font-weight: 400; }
.ab em { font-style: italic; }

/* ---------- Shared: iPhone ---------- */
.ph { position: absolute; left: 66em; top: 5em; width: 31em; height: 65em; padding: 0.9em; border-radius: 5.8em; background: #1d1d1f; box-shadow: 0 3em 6em -2.4em rgba(0,0,0,.35), 0 1em 2em -1em rgba(0,0,0,.25), inset 0 0 0 .25em #3a3a3c; }
.scr { position: relative; height: 100%; border-radius: 5em; background: #fff; overflow: hidden; padding: 5em 2.2em 2em; }
.island { position: absolute; z-index: 3; top: 1.4em; left: 50%; transform: translateX(-50%); width: 9.4em; height: 2.7em; border-radius: 2em; background: #000; }
.sb { position: absolute; z-index: 3; top: 1.75em; left: 3.2em; right: 2.8em; display: flex; justify-content: space-between; font-size: 1.25em; font-weight: 600; }
.sb i { display: inline-block; width: 1.1em; height: .75em; border-radius: .2em; background: currentColor; margin-left: .25em; }
.sb.light { color: #fff; }
.appic { flex: none; width: 3.2em; height: 3.2em; border-radius: .8em; display: inline-grid; place-items: center; color: #fff; font-size: 1.5em; line-height: 1; }

/* ---------- Apple Pay: desktop checkout + payment sheet ---------- */
.ab.apple-pay { background: #e7e9ee; }
.apple-pay .browser { position: absolute; left: 14em; top: 8em; width: 66em; height: 47em; border-radius: 1.3em; background: #fff; overflow: hidden; box-shadow: 0 2.6em 5em -2em rgba(30,36,56,.3); }
.apple-pay .bar { height: 3.8em; background: #f2f2f4; border-bottom: 1px solid #e3e3e8; display: flex; align-items: center; gap: .6em; padding: 0 1.4em; }
.apple-pay .bar i { width: 1em; height: 1em; border-radius: 50%; background: #d1d1d6; }
.apple-pay .url { margin-left: 1.4em; flex: 1; max-width: 32em; height: 2.2em; border-radius: .7em; background: #fff; border: 1px solid #e3e3e8; display: flex; align-items: center; padding: 0 1em; font-size: 1.05em; color: #6e6e73; }
.apple-pay .page { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3em; padding: 3em 3.4em; opacity: .5; }
.apple-pay .browser::after { content: ''; position: absolute; inset: 3.8em 0 0; background: rgba(28, 28, 32, .08); pointer-events: none; }
.apple-pay .h { display: block; font-size: 2.2em; letter-spacing: -0.03em; margin-bottom: 1em; }
.apple-pay .item { display: grid; grid-template-columns: 4.4em 1fr auto; gap: 1.2em; align-items: center; padding: 1em 0; border-bottom: 1px solid #ececf0; font-size: 1.15em; }
.apple-pay .thumb { width: 4.4em; height: 4.4em; border-radius: .8em; }
.apple-pay .sum { display: flex; justify-content: space-between; padding-top: 1.2em; font-size: 1.3em; }
.apple-pay .pay { display: grid; gap: 1em; align-content: start; padding-top: 4.4em; }
.apple-pay .apbtn { height: 4em; border-radius: .9em; background: #000; color: #fff; display: grid; place-items: center; font-size: 1.15em; font-weight: 600; }
.apple-pay .or { text-align: center; font-size: 1em; color: #8e8e93; }
.apple-pay .field { height: 3.4em; border-radius: .8em; border: 1px solid #e3e3e8; }
.apple-pay .half { width: 48%; display: inline-block; }
.apple-pay .modal { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 30em; padding: 2.6em 2.6em 2.2em; border-radius: 1.8em; background: #fff; text-align: center; box-shadow: 0 2em 5em -1em rgba(0,0,0,.28); display: grid; justify-items: center; gap: .5em; }
.apple-pay .qr { width: 14em; height: 14em; padding: .6em; border-radius: 1em; border: 1px solid #ececf0; margin-bottom: 1em; }
.apple-pay .modal b { font-size: 1.55em; letter-spacing: -0.02em; }
.apple-pay .modal span { font-size: 1.1em; color: #6e6e73; max-width: 24em; }
.apple-pay .modal small { font-size: 1em; margin-top: .4em; }
.apple-pay .ph { left: 77em; top: 12em; }
.apple-pay .scr.dim { background: radial-gradient(80% 40% at 50% 28%, #2e3138, #0c0d10 70%); }
.apple-pay .cam { position: absolute; left: 0; right: 0; top: 6.6em; display: grid; justify-items: center; gap: 1.2em; }
.apple-pay .target { position: relative; width: 12em; height: 12em; padding: 1.4em; }
.apple-pay .qr.sm { display: block; width: 100%; height: 100%; padding: 0; border: 0; margin: 0; border-radius: .4em; overflow: hidden; transform: rotate(-4deg); opacity: .92; }
.apple-pay .k { position: absolute; width: 2.4em; height: 2.4em; border: .3em solid #ffd60a; }
.apple-pay .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: .8em 0 0 0; }
.apple-pay .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 .8em 0 0; }
.apple-pay .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 .8em; }
.apple-pay .br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 .8em 0; }
.apple-pay .pill { padding: .4em 1.1em; border-radius: 2em; background: #ffd60a; color: #1d1d1f; font-size: 1.05em; font-weight: 600; }
.apple-pay .sheet { position: absolute; left: .6em; right: .6em; bottom: .6em; border-radius: 4.2em; background: #fff; padding: 2.6em 2.2em 2.4em; display: grid; gap: .2em; }
.apple-pay .sheet > div { display: flex; align-items: center; gap: 1.2em; padding: 1em 0; border-bottom: 1px solid #ededf0; font-size: 1.12em; }
.apple-pay .merchant { border-bottom: 0 !important; padding-top: 0 !important; }
.apple-pay .mlogo { width: 3.4em; height: 3.4em; border-radius: .9em; background: #2c3e50; color: #fff; display: grid; place-items: center; font-weight: 700; }
.apple-pay .cardart { flex: none; width: 5em; height: 3.2em; border-radius: .5em; background: linear-gradient(135deg, #ff7a18, #af002d 70%); }
.apple-pay .opt { justify-content: space-between; }
.apple-pay .tog { flex: none; width: 3.8em; height: 2.2em; border-radius: 2em; background: #e5e5ea; position: relative; }
.apple-pay .tog::after { content: ''; position: absolute; left: .25em; top: .25em; width: 1.7em; height: 1.7em; border-radius: 50%; background: #fff; box-shadow: 0 .1em .3em rgba(0,0,0,.2); }
.apple-pay .tog.on { background: #34c759; }
.apple-pay .tog.on::after { left: auto; right: .25em; }
.apple-pay .chev { font-size: 1.6em; color: #c7c7cc; }
.apple-pay .total { justify-content: space-between; border-bottom: 0 !important; font-size: 1.25em !important; }
.apple-pay .total b { font-size: 1.3em; letter-spacing: -0.02em; }
.apple-pay .confirm { justify-content: center; border-bottom: 0 !important; color: #1d1d1f; font-weight: 500; gap: .8em !important; }
.apple-pay .side { width: .5em; height: 2.6em; border-radius: .3em; background: #007aff; box-shadow: 0 0 0 .3em rgba(0,122,255,.18); }

/* ---------- Summaries: Lock Screen ---------- */
.ab.summaries { background: #e6e3f2; }
.summaries .ph { left: 72em; top: 4em; }
.summaries .scr.lock { background: radial-gradient(120% 70% at 30% 10%, #6b5bd2, transparent 60%), radial-gradient(90% 60% at 90% 90%, #e2669a, transparent 60%), #241c4f; color: #fff; padding: 4.6em 1.4em 2em; }
.summaries .clock { text-align: center; margin: 1.6em 0 2.4em; }
.summaries .clock small { color: rgba(255,255,255,.85); font-size: 1.3em; font-weight: 500; }
.summaries .clock b { display: block; font-size: 7.4em; line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.summaries .note { background: rgba(255,255,255,.82); color: #1d1d1f; border-radius: 2em; padding: 1.4em 1.5em; margin-bottom: .9em; backdrop-filter: blur(1em); font-size: 1.05em; }
.summaries .nh { display: flex; align-items: center; gap: .7em; margin-bottom: .7em; }
.summaries .nh .appic { width: 2.3em; height: 2.3em; font-size: 1.1em; border-radius: .6em; }
.summaries .nh b { font-size: 1.05em; }
.summaries .nh em { font-size: .95em; color: #5e5ce6; }
.summaries .t { margin-left: auto; color: #6e6e73; font-size: .9em; }
.summaries p { margin: 0; }
.summaries .lead { font-size: 1.1em; margin-bottom: .5em; color: #3a3a3c; }
.summaries ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.summaries li { display: grid; gap: .1em; padding: .55em .8em; border-radius: .9em; background: rgba(0,0,0,.04); font-weight: 600; }
.summaries .pub { font-size: .85em; font-weight: 500; color: #6e6e73; }
.summaries li.upd { background: none; padding: 0 .8em; font-weight: 400; color: #3a3a3c; }
.summaries .orig { display: inline-block; margin-top: .8em; padding: .35em .9em; border-radius: 2em; background: rgba(0,0,0,.07); font-size: .9em; font-weight: 600; }
.summaries .fb { font-size: .95em; color: #6e6e73; margin-bottom: .4em; }
.callout { position: absolute; width: 22em; padding: 1.2em 1.4em; border-radius: 1.2em; background: #fff; box-shadow: 0 1.4em 3em -1.2em rgba(40,30,90,.3); font-size: 1.05em; }
.callout b { display: block; font-size: 1.15em; margin-bottom: .2em; }
.callout span { color: #6e6e73; }
.callout::after { content: ''; position: absolute; top: 50%; right: -5em; width: 5em; border-top: 1.5px dashed #8e86d8; }
.summaries .c1 { left: 40em; top: 30em; }
.summaries .c2 { left: 40em; top: 44em; }

/* ---------- Siri: answer with receipts ---------- */
.ab.siri { background: #f3e5db; }
.siri .ph { left: 72em; top: 4em; }
.siri .scr.home { background: linear-gradient(160deg, #c9d6ff, #f6d5c6 60%, #f3c7d9); padding: 5em 2em 2em; }
.siri .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2em 1.8em; padding: 1em .6em; filter: blur(.35em); opacity: .7; }
.siri .grid i { aspect-ratio: 1; border-radius: 1.1em; background: rgba(255,255,255,.75); }
.siri .glow { position: absolute; inset: 0; border-radius: 5em; padding: .55em; background: conic-gradient(from var(--a, 0deg), #ff6b9a, #ffb057, #7c6bff, #3ec5ff, #ff6b9a); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); filter: blur(.25em); opacity: .9; }
.siri .answer { position: absolute; left: 1em; right: 1em; bottom: 1em; border-radius: 3.8em; background: rgba(255,255,255,.92); backdrop-filter: blur(1.4em); padding: 2.2em 2em 2em; display: grid; gap: .6em; box-shadow: 0 1em 3em -1em rgba(0,0,0,.25); }
.siri .q { font-size: 1.1em; color: #6e6e73; }
.siri .a { font-size: 2em; line-height: 1.12; letter-spacing: -0.03em; }
.siri .sub { font-size: 1.05em; color: #3a3a3c; margin-bottom: .6em; }
.siri .rcpt { display: grid; gap: .5em; padding: .9em 0; border-top: 1px solid #ececf0; border-bottom: 1px solid #ececf0; }
.siri .rcpt span { display: grid; grid-template-columns: 2.4em 1fr; column-gap: .9em; align-items: center; font-size: 1em; }
.siri .rcpt .appic { grid-row: span 2; width: 2.4em; height: 2.4em; border-radius: .6em; font-size: 1.1em; }
.siri .rcpt small { font-size: .9em; }
.siri .act { display: flex; flex-direction: column; gap: .8em; padding-top: .4em; }
.siri .draft { font-size: 1.1em; }
.siri .btns { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.siri .btns i, .ask .choice { font-style: normal; }
.siri .btns i { height: 3.4em; border-radius: 1.7em; display: grid; place-items: center; background: #007aff; color: #fff; font-weight: 600; font-size: 1.05em; }
.siri .btns i.ghost { background: rgba(0,0,0,.06); color: #1d1d1f; }
.ask { position: absolute; left: 38em; top: 14em; width: 27em; padding: 1.6em 1.6em 1.4em; border-radius: 1.8em; background: rgba(255,255,255,.95); box-shadow: 0 1.6em 3.4em -1.2em rgba(90,50,30,.3); display: grid; gap: .6em; font-size: 1.05em; }
.ask .sk { font-size: .9em; color: #6e6e73; }
.ask > b { font-size: 1.35em; letter-spacing: -0.02em; margin-bottom: .2em; }
.ask .choice { display: flex; gap: .8em; align-items: baseline; padding: .8em 1em; border-radius: 1em; border: 1px solid #e5e5ea; color: #3a3a3c; }
.ask .choice.on { border-color: #007aff; box-shadow: 0 0 0 .2em rgba(0,122,255,.15); }

/* ---------- Subscriptions: Wallet ---------- */
.ab.subscriptions { background: #dce9e2; }
.subscriptions .ph { left: 72em; top: 4em; }
.subscriptions .scr { background: #f2f2f7; padding: 5em 1.6em 2em; }
.subscriptions .back { display: block; color: #007aff; font-size: 1.2em; margin: .4em 0 1em; }
.subscriptions .title { display: block; font-size: 2.6em; letter-spacing: -0.03em; }
.subscriptions .total { display: block; font-size: 1.1em; color: #6e6e73; margin: .3em 0 1.4em; }
.subscriptions .total b { color: #1d1d1f; }
.subscriptions .row { display: grid; grid-template-columns: 3.2em 1fr auto; gap: 1em; align-items: center; padding: 1.1em 1.2em; background: #fff; border-radius: 1.2em; margin-bottom: .6em; font-size: 1.05em; }
.subscriptions .row .appic { width: 3em; height: 3em; font-size: 1.3em; border-radius: .75em; }
.subscriptions .row small { font-size: .9em; }
.subscriptions .warn { color: #d70015 !important; font-weight: 500 !important; }
.subscriptions .row .p { font-variant-numeric: tabular-nums; }
.subscriptions .row.hl { grid-template-columns: 3.2em 1fr; box-shadow: 0 0 0 .2em rgba(255,107,61,.35); }
.subscriptions .row.hl .btns { grid-column: 1 / -1; }
.subscriptions .btns, .push .btns { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.subscriptions .btns i, .push .btns i { font-style: normal; height: 3em; border-radius: 1.5em; display: grid; place-items: center; background: #1d1d1f; color: #fff; font-weight: 600; font-size: .95em; }
.subscriptions .btns i.ghost, .push .btns i.ghost { background: rgba(0,0,0,.06); color: #1d1d1f; }
.subscriptions .foot { display: block; margin-top: 1em; font-size: .95em; color: #007aff; }
.push { position: absolute; left: 36em; top: 12em; width: 30em; padding: 1.5em 1.6em; border-radius: 2em; background: rgba(255,255,255,.95); box-shadow: 0 1.6em 3.4em -1.2em rgba(20,60,40,.3); display: grid; gap: .5em; font-size: 1.05em; }
.push .nh { display: flex; align-items: center; gap: .7em; }
.push .nh .appic { width: 2.2em; height: 2.2em; font-size: 1em; border-radius: .55em; }
.push .t { margin-left: auto; color: #6e6e73; font-size: .9em; }
.push .ttl { font-size: 1.2em; }
.push > span { color: #3a3a3c; margin-bottom: .4em; }

/* ---------- Motion ----------
   Quiet loops only. One-off moments wait for the host page to add .play. */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
@keyframes rise { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(1em) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes popc { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
.siri .glow { animation: spin 9s linear infinite; }
:host(.anim) .callout, :host(.anim) .ask, :host(.anim) .push, :host(.anim) .apple-pay .modal, :host(.anim) .siri .answer { opacity: 0; }
:host(.anim.play) .callout, :host(.anim.play) .ask, :host(.anim.play) .push { animation: pop .9s cubic-bezier(.2,.75,.2,1) .6s both; }
:host(.anim.play) .callout.c2 { animation-delay: .8s; }
:host(.anim.play) .apple-pay .modal { animation: popc .9s cubic-bezier(.2,.75,.2,1) .5s both; }
:host(.anim.play) .siri .answer { animation: rise 1s cubic-bezier(.2,.75,.2,1) .35s both; }
@media (prefers-reduced-motion: reduce) {
  .ab *, .ab *::before, .ab *::after { animation: none !important; }
  :host(.anim) .callout, :host(.anim) .ask, :host(.anim) .push, :host(.anim) .apple-pay .modal, :host(.anim) .siri .answer { opacity: 1; }
}