/* Live phone screens — crisp, large, built in the page instead of small video clips.
   Markup is rendered by /phones.js from <div class="iphone" data-scene="…">. */
.iphone {
  --p-cream:#F2E6D2; --p-orange:#D94A1E; --p-tobacco:#C9A24B; --p-muted:#A79F8E; --p-dim:#8A8375;
  --p-serif: Georgia, 'Times New Roman', serif;
  --p-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position:relative; flex:none; width:380px; height:786px; border-radius:56px; background:#100E0B;
  border:10px solid #2B2723; box-shadow:0 0 0 1.5px #4A443D, 0 30px 70px rgba(0,0,0,.5);
  overflow:hidden; font-family:var(--p-sans); color:var(--p-cream); text-align:left; line-height:1.3;
  -webkit-font-smoothing:antialiased; margin:0 auto;
}
@media (max-width:430px){ .iphone{ zoom:.84; } }
@media (max-width:360px){ .iphone{ zoom:.72; } }
.iphone * { box-sizing:border-box; margin:0; padding:0; }
.iphone img { display:block; }

/* status bar + Dynamic Island */
.ip-status { position:absolute; inset:0 0 auto; z-index:6; display:flex; justify-content:space-between; align-items:center; padding:18px 28px 0 32px; height:50px; font-weight:600; font-size:15px; pointer-events:none; }
.ip-status svg { width:56px; height:13px; }
.ip-island { position:absolute; z-index:7; top:11px; left:50%; transform:translateX(-50%); width:112px; height:32px; background:#000; border-radius:20px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; transition:width .5s cubic-bezier(.3,1.3,.5,1); }
.ip-island > * { opacity:0; transition:opacity .25s; }
.iphone.live .ip-island { width:228px; }
.iphone.live .ip-island > * { opacity:1; transition-delay:.25s; }
.ip-island svg { width:12px; height:16px; color:var(--p-orange); }
.ip-island .ip-clock { color:var(--p-orange); font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; }

/* views stack inside the screen and cross-fade */
.ip-view { position:absolute; inset:0; padding-top:50px; transition:opacity .35s, filter .35s; }
.ip-view.off { opacity:0; pointer-events:none; }
.ip-view.dim { filter:brightness(.45); }

/* tap indicator */
.ip-tap { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:rgba(242,230,210,.38); pointer-events:none; animation:ipTap .55s ease-out forwards; z-index:5; }
@keyframes ipTap { 0% { opacity:0; transform:scale(1.3); } 35% { opacity:1; transform:scale(1); } 60% { transform:scale(.86); } 100% { opacity:0; transform:scale(1); } }

/* ---------- Today ---------- */
.ip-today { padding:50px 16px 0; text-align:center; }
.ip-top { display:flex; justify-content:space-between; align-items:flex-start; padding:8px 4px 0; }
.ip-top svg { width:20px; height:20px; color:var(--p-tobacco); }
.ip-logo { width:46px; height:46px; border-radius:12px; background:var(--p-cream); padding:3px; margin:0 auto; }
.ip-today h4 { font:700 28px/1.1 var(--p-serif); margin:10px 0 6px; }
.ip-sub { font-size:12.5px; color:var(--p-muted); padding:0 18px; margin-bottom:14px; }

.ip-pack { background:linear-gradient(180deg,#F6ECDA,#EADCC2); color:#1A1A1A; border-radius:16px; padding:14px 16px 12px; text-align:left; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:0 10px; transition:filter .35s; }
.ip-pk-dot { width:26px; height:26px; border-radius:50%; background:var(--p-orange); box-shadow:inset 0 0 0 2px rgba(0,0,0,.08), 0 0 0 2px #F6ECDA, 0 0 0 3.5px var(--p-orange); }
.ip-pack .ip-mini { width:30px; height:30px; }
.ip-pk-name { font:700 15px var(--p-serif); }
.ip-pk-n { text-align:right; line-height:1; }
.ip-num { display:inline-block; font:800 32px/1 var(--p-serif); color:var(--p-orange); font-variant-numeric:tabular-nums; transition:transform .2s; }
.ip-num.bump { transform:scale(1.18); }
.ip-pk-n small { display:block; font:700 8.5px var(--p-sans); letter-spacing:.18em; color:var(--p-orange); margin-top:3px; }
.ip-dots { grid-column:1/-1; display:grid; grid-template-columns:repeat(10,15px); gap:7px 9px; justify-content:center; margin:12px 0 10px; }
.ip-dots i { width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 50% 50%, #E2C064 0 38%, #C9A24B 40% 62%, #E8D39B 64%); transition:background .3s, transform .3s; }
.ip-dots i.used { background:#1F1A16; transform:scale(1.1); }
.ip-pk-q { grid-column:1/-1; text-align:center; font:italic 12px var(--p-serif); color:#B4432A; }

.ip-litline { font:italic 700 12.5px var(--p-serif); color:#E07A4F; height:0; overflow:hidden; opacity:0; transition:all .3s; display:flex; justify-content:center; align-items:center; gap:5px; }
.ip-litline svg { width:10px; height:13px; color:var(--p-orange); }
.iphone.lit .ip-litline { height:26px; opacity:1; margin-top:8px; }
.ip-btn { position:relative; margin-top:12px; border:1.5px solid #4A3E26; border-radius:14px; height:46px; display:flex; align-items:center; justify-content:center; gap:7px; font:700 16px var(--p-serif); color:var(--p-tobacco); transition:opacity .3s; }
.ip-btn svg { width:13px; height:17px; }
.iphone.lit .ip-btn { opacity:.35; }
.ip-cap { font-size:11.5px; color:#CFC6B4; margin:7px 0 14px; min-height:15px; font-variant-numeric:tabular-nums; }

.ip-week { background:#221E1A; border-radius:14px; padding:12px 14px 10px; text-align:left; }
.ip-wk-h { display:flex; align-items:center; gap:8px; }
.ip-wk-h span { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#CFC6B4; flex:1; }
.ip-wk-h em { font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--p-orange); color:#fff; border-radius:99px; padding:3px 8px; }
.ip-wk-h b { font-size:20px; }
.ip-wk-h b small { font-size:8.5px; letter-spacing:.1em; margin-left:2px; text-transform:uppercase; }
.ip-bars { display:grid; grid-template-columns:repeat(7,1fr); align-items:end; height:92px; gap:10px; margin-top:8px; text-align:center; }
.ip-bars div { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; gap:5px; font-size:9px; color:var(--p-dim); }
.ip-bars i { width:20px; border-radius:3px; background:#3A342D; height:2px; }
.ip-bars i.r { background:#C6362A; height:70px; }
.ip-bars i.g { background:var(--p-tobacco); height:4px; }
.ip-diag { display:flex; justify-content:space-between; font-size:9.5px; font-weight:700; letter-spacing:.14em; color:#6B645A; text-transform:uppercase; padding:14px 4px 0; }
.ip-tagline { font:italic 12px var(--p-serif); color:#7C7568; margin-top:18px; }

/* ---------- Home Screen ---------- */
.ip-home { background:radial-gradient(120% 70% at 30% 0%, #2E5A44 0%, #1B3A2B 45%, #0E1A14 100%); padding:56px 18px 0; }
.ip-widget { background:linear-gradient(180deg,#F6ECDA,#EADCC2); color:#1A1A1A; border-radius:22px; padding:14px 16px 12px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:0 10px; }
.ip-widget-l { text-align:center; font-size:11.5px; font-weight:500; margin:6px 0 16px; }
.ip-apps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px 10px; }
.ip-app { text-align:center; font-size:11px; font-weight:500; position:relative; }
.ip-app i { display:block; width:60px; height:60px; border-radius:15px; margin:0 auto 5px; position:relative; }
.ip-app img { width:60px; height:60px; border-radius:15px; margin:0 auto 5px; background:var(--p-cream); padding:5px; }
.ip-dock { position:absolute; left:12px; right:12px; bottom:12px; height:84px; border-radius:30px; background:rgba(255,255,255,.14); display:flex; justify-content:space-around; align-items:center; padding:0 10px; }
.ip-dock i { width:58px; height:58px; border-radius:15px; display:block; }
.c-green { background:linear-gradient(#6EE07A,#2FB548); } .c-blue { background:linear-gradient(#6DB6FF,#2B7BF0); } .c-white { background:linear-gradient(#FFFFFF,#E4E4E4); } .c-orange { background:linear-gradient(#FF9A5A,#F0582B); }
.c-yellow { background:linear-gradient(#FFE07A,#F6B92B); } .c-violet { background:linear-gradient(#A48BFF,#6F4CF0); } .c-pink { background:linear-gradient(#FF8AB3,#EC3F78); }
.c-mint { background:linear-gradient(#8FF0C4,#3CC08A); } .c-sky { background:linear-gradient(#8EC5FF,#4C8EF5); } .c-amber { background:linear-gradient(#FFC37A,#F08A2B); } .c-grey { background:linear-gradient(#D6D8DD,#9EA2AA); }

/* ---------- Shield ---------- */
.ip-shield { background:#1C1B1A; text-align:center; padding:130px 30px 0; }
.ip-cig { width:64px; height:96px; margin:0 auto 18px; border-radius:4px; background:linear-gradient(90deg,#E9DCC1,#F6ECDA 40%,#E3D3B4); position:relative; box-shadow:0 6px 16px rgba(0,0,0,.4); overflow:hidden; }
.ip-cig::before { content:""; position:absolute; inset:0 0 auto; height:14px; background:linear-gradient(#E05A2A,#C4421A); }
.ip-cig img { width:46px; height:46px; margin:24px auto 0; }
.ip-cig small { display:block; font:800 6px/1.1 var(--p-sans); letter-spacing:.06em; color:#7A3A1A; margin-top:3px; }
.ip-shield h5 { font-size:22px; font-weight:700; margin-bottom:6px; }
.ip-shield p { font-size:15px; color:#B9B2A6; line-height:1.4; }
.ip-shield .ip-q { font:italic 18px/1.35 var(--p-serif); color:#CFC6B4; margin-top:4px; }
.ip-sbtns { position:absolute; left:0; right:0; bottom:60px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.ip-sbtns span { position:relative; width:180px; height:50px; border-radius:25px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; }
.ip-sbtns .a { background:var(--p-orange); color:#fff; }
.ip-sbtns .b { background:#3A3936; color:#E8E2D6; }

/* ---------- NFC sheet + lit ---------- */
.ip-sheet { position:absolute; z-index:4; left:8px; right:8px; bottom:8px; height:370px; border-radius:42px; background:#2C2C2E; text-align:center; padding:30px 24px 0; transform:translateY(110%); transition:transform .45s cubic-bezier(.2,.9,.3,1); }
.iphone.scan .ip-sheet { transform:none; }
.ip-sheet h5 { font-size:24px; font-weight:600; margin-bottom:8px; }
.ip-sheet p { font-size:14.5px; color:#D6D6D8; }
.ip-sheet .x { position:absolute; top:18px; right:18px; width:28px; height:28px; border-radius:50%; background:#3A3A3C; color:#AEAEB2; font-size:14px; line-height:28px; }
.ip-ring { width:104px; height:104px; border-radius:50%; border:4px solid #0A84FF; margin:30px auto 32px; display:flex; align-items:center; justify-content:center; color:#0A84FF; }
.ip-ring svg { width:44px; height:52px; }
.ip-ring .ok { display:none; }
.iphone.ok .ip-ring .ph { display:none; }
.iphone.ok .ip-ring .ok { display:block; }
.ip-sheet .cancel { display:block; height:52px; border-radius:16px; background:#0A84FF; color:#fff; font-size:17px; font-weight:600; line-height:52px; }
.ip-lit { background:radial-gradient(90% 50% at 50% 40%, #2A1C14, #120F0C 70%); text-align:center; padding-top:250px; }
.ip-lit svg { width:76px; height:96px; }
.ip-lit h5 { font:700 34px var(--p-serif); margin:14px 0 8px; }
.ip-lit p { font-size:15px; color:#B9B2A6; }
.ip-lit em { display:block; font:italic 15px var(--p-serif); color:#E07A4F; margin-top:30px; }

/* ---------- Settings ---------- */
.ip-set { background:#100E0B; }
.ip-nav { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:8px 18px 12px; font-size:16px; border-bottom:1px solid #2A2520; background:#100E0B; }
.ip-nav b { font-weight:600; }
.ip-done { justify-self:end; color:var(--p-tobacco); font-weight:600; }
.ip-scrollbox { position:absolute; top:94px; left:0; right:0; bottom:0; overflow:hidden; }
.ip-scroll { padding:4px 14px 30px; }
.iphone[data-scene="settings"] .ip-scroll { animation:ipScroll 12s ease-in-out infinite; }
.ip-eyebrow { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--p-tobacco); margin:18px 6px 8px; }
.ip-card { background:#221E1A; border-radius:14px; padding:4px 14px; position:relative; }
.ip-qq { font-size:14px; color:#D8CDBA; padding:12px 0 2px; }
.ip-opt { display:flex; align-items:center; gap:12px; padding:12px 0; position:relative; }
.ip-opt + .ip-opt { border-top:1px solid #34302A; }
.ip-opt > div { flex:1; min-width:0; }
.ip-opt b { display:block; font:700 15.5px/1.25 var(--p-serif); }
.ip-opt small { display:block; font-size:12.5px; line-height:1.35; color:var(--p-muted); margin-top:3px; }
.ip-opt .red { color:#E0572A; }
.ip-foot { font-size:12.5px; color:var(--p-muted); padding:2px 0 14px; }
.ip-radio { flex:none; width:20px; height:20px; border-radius:50%; border:1.6px solid #8A8375; position:relative; }
.ip-radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--p-orange); opacity:0; }
.ip-radio.on { border-color:var(--p-orange); } .ip-radio.on::after { opacity:1; }
.ip-ic { width:20px; height:20px; color:var(--p-tobacco); flex:none; }
.ip-chev { color:var(--p-dim); font-size:22px; line-height:1; flex:none; }
.ip-toggle { flex:none; width:50px; height:30px; border-radius:15px; background:#4A4640; position:relative; }
.ip-toggle::after { content:""; position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%; background:#fff; }
.ip-sfoot { text-align:center; font-size:11.5px; color:var(--p-dim); padding-top:22px; line-height:1.6; }
.ip-sfoot em { font:italic 700 13px var(--p-serif); color:var(--p-tobacco); }
.iphone[data-scene="settings"] .ip-r2 { animation:ipR2 12s infinite; } .iphone[data-scene="settings"] .ip-r2::after { animation:ipR2dot 12s infinite; }
.iphone[data-scene="settings"] .ip-r3 { animation:ipR3 12s infinite; } .iphone[data-scene="settings"] .ip-r3::after { animation:ipR3dot 12s infinite; }
.ip-touch { position:absolute; left:-14px; top:50%; width:48px; height:48px; margin-top:-24px; border-radius:50%; background:rgba(242,230,210,.32); opacity:0; pointer-events:none; animation:ipTouch 12s infinite; }
.iphone[data-scene="settings"] .ip-lighter { animation:ipGlow 12s infinite; }
@keyframes ipScroll { 0%,38% { transform:translateY(0); } 50%,90% { transform:translateY(-195px); } 96%,100% { transform:translateY(0); } }
@keyframes ipR2 { 0%,26% { border-color:var(--p-orange); } 28%,95% { border-color:#8A8375; } 97%,100% { border-color:var(--p-orange); } }
@keyframes ipR2dot { 0%,26% { opacity:1; } 28%,95% { opacity:0; } 97%,100% { opacity:1; } }
@keyframes ipR3 { 0%,26% { border-color:#8A8375; } 28%,95% { border-color:var(--p-orange); } 97%,100% { border-color:#8A8375; } }
@keyframes ipR3dot { 0%,26% { opacity:0; } 28%,95% { opacity:1; } 97%,100% { opacity:0; } }
@keyframes ipTouch { 0%,16% { opacity:0; transform:scale(1.25); } 21% { opacity:1; transform:scale(1); } 27% { opacity:1; transform:scale(.88); } 33%,100% { opacity:0; transform:scale(1); } }
@keyframes ipGlow { 0%,54% { box-shadow:0 0 0 0 rgba(201,162,75,0); } 60%,84% { box-shadow:0 0 0 1.5px var(--p-tobacco); } 90%,100% { box-shadow:0 0 0 0 rgba(201,162,75,0); } }

@media (prefers-reduced-motion:reduce){
  .iphone *, .iphone *::after { animation:none !important; transition:none !important; }
  .iphone[data-scene="settings"] .ip-r2 { border-color:var(--p-orange); }
  .iphone[data-scene="settings"] .ip-r2::after { opacity:1; }
}