/* iPhone 18 Pro Max in Burgundy, drawn in CSS 3D (no Apple artwork is used).
   Geometry from Apple's published specs: body 78.0 x 163.4 x 8.75 mm, 6.9" display at 2868 x 1320,
   so the glass border is 2.55 mm (0.0327 of the width) on every side. Narrower 18 Pro Dynamic Island.
   Button and camera positions measured from Apple's product photos. Burgundy anodised aluminium, satin.
   Everything scales from --w, so one variable sizes the whole phone. */
.iphone{--w:320px;--t:calc(var(--w) * .1122);--r:calc(var(--w) * .16);
  --ti-1:#D8A9B2;--ti-2:#9A5564;--ti-3:#6E2F3D;--ti-4:#3F1821;
  position:relative;width:var(--w);height:calc(var(--w) * 2.0949);transform-style:preserve-3d}
.ip-rig{position:absolute;inset:0;transform-style:preserve-3d}

/* the side band: stacked outlines give the edge real thickness when the phone turns */
.ip-edge{position:absolute;inset:0;transform-style:preserve-3d}
.ip-edge i{position:absolute;inset:0;border-radius:var(--r);
  background:linear-gradient(90deg,var(--ti-4) 0%,var(--ti-2) 7%,var(--ti-3) 22%,var(--ti-3) 78%,var(--ti-2) 93%,var(--ti-4) 100%);
  transform:translateZ(calc(var(--t) * (.5 - var(--k))))}
.ip-edge i:last-child{background:#2A1016;box-shadow:0 0 0 1px #1a0a0e}

/* front: titanium rim, black bezel, glass */
.ip-front{position:absolute;inset:0;border-radius:var(--r);padding:calc(var(--w) * .0135);transform:translateZ(calc(var(--t) * .5));
  background:
    linear-gradient(140deg,var(--ti-1) 0%,var(--ti-2) 12%,var(--ti-3) 30%,#B9727F 47%,var(--ti-3) 62%,var(--ti-4) 82%,var(--ti-2) 100%);
  box-shadow:inset 0 0 0 .6px rgba(255,220,226,.45),inset 0 0 calc(var(--w) * .006) rgba(40,10,18,.6)}
.ip-bezel{position:relative;height:100%;border-radius:calc(var(--r) - var(--w) * .0135);background:#050404;padding:calc(var(--w) * .0192);
  box-shadow:inset 0 0 0 calc(var(--w) * .003) #1d1916}
.ip-screen{position:relative;height:100%;border-radius:calc(var(--r) - var(--w) * .0327);overflow:hidden;background:var(--sb,#FDF9F5);isolation:isolate;container-type:inline-size}
.ip-island{position:absolute;z-index:6;top:calc(var(--w) * .0426);left:50%;width:calc(var(--w) * .22);height:calc(var(--w) * .0786);translate:-50% 0;border-radius:999px;background:#000;
  box-shadow:inset calc(var(--w) * -.02) 0 calc(var(--w) * .012) rgba(40,40,60,.35)}
.ip-island::after{content:"";position:absolute;right:14%;top:31%;width:calc(var(--w) * .027);height:calc(var(--w) * .027);border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a3550,#0a0c14 60%)}

/* glass: one soft diagonal sheen plus a thin highlight on the rim, both above the pixels */
.ip-glass{position:absolute;inset:calc(var(--w) * .0327);z-index:5;border-radius:calc(var(--r) - var(--w) * .0327);pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 22%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 72%,rgba(255,255,255,.07) 100%)}

/* status bar drawn over screenshots that were captured without one; the time and icons
   sit on the Dynamic Island's centre line, as on the device */
.ip-status{position:absolute;z-index:4;left:0;right:0;top:0;height:calc(var(--w) * .115);display:flex;align-items:flex-start;justify-content:space-between;
  padding:calc(var(--w) * .04) calc(var(--w) * .09) 0 calc(var(--w) * .12);font-family:-apple-system,"SF Pro Text","DM Sans",sans-serif;
  font-weight:600;font-size:calc(var(--w) * .045);line-height:1;letter-spacing:-.01em;color:#1f1a14}
.ip-status .sig{display:flex;align-items:center;gap:calc(var(--w) * .014);margin-top:calc(var(--w) * .004)}
.ip-status .sig svg{height:calc(var(--w) * .032);width:auto;display:block}
/* the screen below the status bar; screenshots keep their aspect (only the home-indicator
   strip at the bottom can be trimmed) */
.ip-shot{position:absolute;left:0;right:0;bottom:0;top:calc(var(--w) * .115)}
.ip-shot > img,.ip-shot > picture,.ip-shot > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* hardware buttons sit on the mid-plane just outside the silhouette */
.ip-btn{position:absolute;width:calc(var(--w) * .012);border-radius:3px;background:linear-gradient(90deg,var(--ti-4),var(--ti-2) 60%,var(--ti-3));transform:translateZ(0)}
.ip-btn.l{left:calc(var(--w) * -.01)}
.ip-btn.r{right:calc(var(--w) * -.01);background:linear-gradient(270deg,var(--ti-4),var(--ti-2) 60%,var(--ti-3))}
.ip-btn.action{top:19.5%;height:4.6%}
.ip-btn.vup{top:27%;height:7.2%}
.ip-btn.vdn{top:35.2%;height:7.2%}
.ip-btn.power{top:27%;height:10%}
/* Camera Control: flush sapphire, darker than the aluminium around it */
.ip-btn.cam{top:56%;height:7%;width:calc(var(--w) * .008);background:linear-gradient(90deg,#2a1419,#5b2a35)}
.ip-btn.r.cam{right:calc(var(--w) * -.006)}
.ip-btn.l.cam{left:calc(var(--w) * -.006);background:linear-gradient(270deg,#2a1419,#5b2a35)}

/* contact shadow on the floor, kept out of the 3D rig so it stays soft */
.ip-floor{position:absolute;left:8%;right:8%;bottom:-7%;height:9%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(42,37,32,.38),rgba(42,37,32,.12) 55%,transparent);filter:blur(calc(var(--w) * .03));transform:translateZ(calc(var(--t) * -2))}

/* ---------- the back of the phone: burgundy aluminium, full-width camera plateau ---------- */
.iphone.is-back .ip-front{padding:0;background:none;box-shadow:none}
.ip-backface{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;
  background:
    radial-gradient(120% 60% at 18% 8%,rgba(255,214,222,.22),transparent 55%),
    radial-gradient(90% 50% at 90% 95%,rgba(20,4,8,.35),transparent 60%),
    linear-gradient(162deg,#8A4150 0%,#6E2F3D 34%,#5E2733 62%,#4C1D28 100%);
  box-shadow:inset 0 0 0 calc(var(--w) * .006) rgba(255,210,218,.28),inset 0 0 calc(var(--w) * .05) rgba(30,6,12,.45)}
/* satin grain, fixed to the part so it never repaints on scroll */
.ip-backface::after{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* the glass panel below the plateau, a touch lighter than the metal */
.ip-glasspanel{position:absolute;left:7%;right:7%;top:36%;bottom:4.5%;border-radius:calc(var(--w) * .1);
  background:linear-gradient(170deg,rgba(255,225,232,.1),rgba(255,225,232,.03) 40%,rgba(0,0,0,.05));box-shadow:inset 0 0 0 .5px rgba(255,220,228,.14)}
.ip-plateau{position:absolute;left:0;right:0;top:0;height:31%;border-radius:var(--r) var(--r) calc(var(--w) * .05) calc(var(--w) * .05);
  background:linear-gradient(175deg,#93495A 0%,#733343 45%,#632A37 100%);
  box-shadow:0 calc(var(--w) * .012) calc(var(--w) * .03) rgba(30,6,12,.45),inset 0 calc(var(--w) * -.004) 0 rgba(255,200,210,.22),inset 0 calc(var(--w) * .006) calc(var(--w) * .01) rgba(255,220,228,.18)}
.ip-lens{position:absolute;width:21%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 210deg,#4A1C27,#B77583 18%,#6E2F3D 38%,#3F1821 55%,#A5606F 75%,#4A1C27);
  box-shadow:0 calc(var(--w) * .012) calc(var(--w) * .024) rgba(20,4,8,.55),inset 0 0 0 calc(var(--w) * .004) rgba(255,215,222,.35)}
.ip-lens::before{content:"";position:absolute;inset:11%;border-radius:50%;background:#0c0709;box-shadow:inset 0 0 0 calc(var(--w) * .006) #26141a}
.ip-lens::after{content:"";position:absolute;inset:25%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(170,190,255,.55) 0,rgba(90,70,160,.35) 18%,transparent 40%),radial-gradient(circle at 60% 65%,rgba(120,40,70,.55),transparent 55%),radial-gradient(circle,#1b1726 0,#07060a 70%);
  box-shadow:inset 0 0 calc(var(--w) * .02) rgba(0,0,0,.9)}
.ip-lens.a{left:15%;top:15%}
.ip-lens.b{left:15%;top:54%}
.ip-lens.c{left:41.5%;top:39%}
.ip-flash{position:absolute;right:8.75%;top:37.5%;width:8.5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffaf2,#e9ddcf 55%,#b9a99a);box-shadow:inset 0 0 0 calc(var(--w) * .003) rgba(0,0,0,.25)}
.ip-lidar{position:absolute;right:9.25%;top:79%;width:7.5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2a2230,#08060a 70%)}
.ip-mic{position:absolute;right:11.5%;top:64%;width:2%;aspect-ratio:1;border-radius:50%;background:#2a1117}

/* ---------- straight-on presentation ----------
   The phone is shown flat, the way Apple shoots product fronts: a 3D tilt keystones the screen and makes the
   browser resample the screenshot, which is what made the UI look squeezed and soft. */
.ip-front{transform:none;box-shadow:inset 0 0 0 .6px rgba(255,220,226,.45),inset 0 0 calc(var(--w) * .006) rgba(40,10,18,.6),
  0 calc(var(--w) * .09) calc(var(--w) * .16) calc(var(--w) * -.07) rgba(60,20,30,.38),0 calc(var(--w) * .02) calc(var(--w) * .05) calc(var(--w) * -.02) rgba(60,20,30,.22)}
.ip-edge{display:none}
.ip-floor{transform:none;bottom:-5%}
.ip-screen img{image-rendering:auto}

/* ---------- iOS 26 Liquid Glass tab bar and home indicator, drawn in vector so they stay sharp ----------
   Measured off the app running on the owner's iPhone (light and dark, 2026-09-26): a 63 pt capsule 21 pt in from
   the edges, a bright rim, the selected tab as a soft capsule, SF-style glyphs in the label colour.
   Sized in points of a 440 pt screen (1pt = 100cqw / 440 of the screen container). */
.ios-tabbar{--p:calc(100cqw / 440);position:absolute;z-index:5;left:calc(21 * var(--p));right:calc(21 * var(--p));bottom:calc(21 * var(--p));height:calc(63 * var(--p));
  display:grid;grid-template-columns:repeat(5,1fr);padding:0 calc(8.5 * var(--p));border-radius:999px;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,253,250,.95),rgba(254,249,243,.92));
  -webkit-backdrop-filter:blur(calc(12 * var(--p))) saturate(170%);backdrop-filter:blur(calc(12 * var(--p))) saturate(170%);
  box-shadow:0 0 0 calc(.5 * var(--p)) rgba(60,45,35,.17),
    inset 0 calc(1.2 * var(--p)) 0 #fff,inset 0 calc(-1.2 * var(--p)) 0 rgba(255,255,255,.92),
    inset calc(3 * var(--p)) 0 calc(5 * var(--p)) calc(-1 * var(--p)) rgba(255,255,255,.95),
    inset calc(-3 * var(--p)) 0 calc(5 * var(--p)) calc(-1 * var(--p)) rgba(255,255,255,.95),
    0 calc(10 * var(--p)) calc(28 * var(--p)) rgba(60,40,30,.10),0 calc(2 * var(--p)) calc(6 * var(--p)) rgba(60,40,30,.06)}
.tb-item{position:relative;display:block;height:100%;color:#0b0a09;font-family:-apple-system,"SF Pro Text","DM Sans",sans-serif}
.tb-item svg{position:absolute;left:50%;top:calc(10.5 * var(--p));width:calc(29 * var(--p));height:calc(27.1 * var(--p));translate:-50% 0}
.tb-item b{position:absolute;left:-10%;right:-10%;top:calc(40.2 * var(--p));text-align:center;font-size:calc(10.5 * var(--p));font-weight:510;letter-spacing:0;line-height:1.1;white-space:nowrap}
.tb-item.on b{font-weight:680}
.tb-item.on::before{content:"";position:absolute;z-index:-1;top:calc(4 * var(--p));bottom:calc(4 * var(--p));left:50%;width:calc(84 * var(--p));translate:-50% 0;border-radius:999px;
  background:linear-gradient(160deg,#EFE9E3,#E6E0D9);box-shadow:inset 0 0 0 calc(.5 * var(--p)) rgba(0,0,0,.025)}
.ios-tabbar.dark{background:linear-gradient(180deg,rgba(50,54,62,.95),rgba(45,49,57,.93));
  box-shadow:0 0 0 calc(.5 * var(--p)) rgba(0,0,0,.6),
    inset 0 calc(1.2 * var(--p)) 0 rgba(118,123,135,.95),inset 0 calc(-1.2 * var(--p)) 0 rgba(88,94,105,.85),
    inset calc(3 * var(--p)) 0 calc(5 * var(--p)) calc(-1 * var(--p)) rgba(150,156,168,.3),
    inset calc(-3 * var(--p)) 0 calc(5 * var(--p)) calc(-1 * var(--p)) rgba(150,156,168,.3),
    0 calc(10 * var(--p)) calc(28 * var(--p)) rgba(0,0,0,.45)}
.ios-tabbar.dark .tb-item{color:#fff}
.ios-tabbar.dark .tb-item.on::before{background:linear-gradient(160deg,#181D26,#12171F);box-shadow:inset 0 0 0 calc(.5 * var(--p)) rgba(255,255,255,.03)}
.ip-home{position:absolute;z-index:6;left:50%;bottom:calc(8 * 100cqw / 440);width:calc(144 * 100cqw / 440);height:calc(5 * 100cqw / 440);translate:-50% 0;border-radius:999px;background:#0b0908}
/* iOS 26 softens content that scrolls under the tab bar (scroll edge effect) */
.ios-tabbar::before{content:"";position:absolute;z-index:-1;left:calc(-21 * 100cqw / 440);right:calc(-21 * 100cqw / 440);bottom:calc(-21 * 100cqw / 440);height:calc(96 * 100cqw / 440);pointer-events:none;
  background:linear-gradient(180deg,rgba(252,246,240,0) 0%,rgba(252,246,240,.86) 45%,#FCF6F0 100%);
  -webkit-mask:linear-gradient(180deg,transparent,#000 35%);mask:linear-gradient(180deg,transparent,#000 35%)}
/* seen from the front, the buttons only just clear the rim */
.ip-btn{width:calc(var(--w) * .007)}
.ip-btn.l{left:calc(var(--w) * -.005)}
.ip-btn.r{right:calc(var(--w) * -.005)}