/* Samsung devices for the Android section. Geometry is in cqw of each device's own width
   (100cqw = the body width), from Samsung's published millimetres; screens are in dp of the device. */

/* ---------------------------------------------------------------- shared */
.gx{position:relative;container-type:inline-size;width:var(--gw)}
.gx-status{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;
  font-family:Roboto,"Google Sans","DM Sans",system-ui,sans-serif;font-weight:500;letter-spacing:.01em;color:#1f1a14}
.gx-status .ic{display:flex;align-items:center}
.gx-status svg{display:block;height:auto}
.gx-bat{position:relative;display:block;border:1.4px solid currentColor;border-radius:3px;opacity:.95}
.gx-bat::after{content:"";position:absolute;top:30%;bottom:30%;right:-3px;width:1.6px;border-radius:0 1px 1px 0;background:currentColor}
.gx-bat i{position:absolute;inset:1.4px;right:22%;border-radius:1px;background:currentColor}
.is-dark > .gx-status{color:#F2EBE1}
.gx-hole{position:absolute;z-index:4;border-radius:50%;background:radial-gradient(circle at 38% 35%,#2a2d33 0,#0b0c0e 55%,#000 100%);box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.gx-handle{position:absolute;z-index:4;left:50%;translate:-50% 0;border-radius:99px;background:rgba(31,26,20,.55)}
.is-dark > .gx-handle{background:rgba(242,235,225,.7)}
.gx img{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- Galaxy S26 Ultra, Pink Gold
   78.1 x 163.6 mm: height 209.47cqw; screen inset 2.3 mm sides, 2.2 mm ends; screen 412 dp wide */
.s26 .gx-body{position:relative;width:100cqw;height:209.47cqw;border-radius:11.8cqw;
  background:linear-gradient(125deg,#F6E9E0 0%,#DCC3B6 22%,#EFDDD2 46%,#C8A99A 72%,#EAD6CB 100%);
  box-shadow:0 70px 110px -50px rgba(0,0,0,.8),0 30px 60px -30px rgba(0,0,0,.55),inset 0 0 0 .25cqw rgba(255,255,255,.5),inset 0 0 0 .7cqw rgba(160,120,105,.25)}
.s26 .gx-glass{position:absolute;inset:.75cqw;border-radius:11.1cqw;background:#050506;box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.06)}
.s26 .gx-screen{position:absolute;left:2.945cqw;right:2.945cqw;top:2.82cqw;bottom:2.82cqw;border-radius:8.8cqw;overflow:hidden;background:#FCF6F0;container-type:inline-size;--dp:calc(100cqw / 412)}
.s26 .gx-screen.is-dark{background:linear-gradient(90deg,#0f1319,#18181c 50%,#24201f)}
.s26 .gx-status{height:calc(36 * var(--dp));padding:0 calc(26 * var(--dp)) 0 calc(28 * var(--dp));font-size:calc(14.5 * var(--dp))}
.s26 .gx-status .ic{gap:calc(6 * var(--dp))}
.s26 .gx-status svg:first-child{width:calc(15 * var(--dp))}
.s26 .gx-status svg:nth-child(2){width:calc(13 * var(--dp))}
.s26 .gx-bat{width:calc(21 * var(--dp));height:calc(11 * var(--dp))}
.s26 .gx-shot{position:absolute;left:0;right:0;top:calc(36 * var(--dp))}
.s26 .gx-hole{width:calc(19 * var(--dp));height:calc(19 * var(--dp));left:50%;translate:-50% 0;top:calc(14.5 * var(--dp))}
.s26 .gx-handle{width:calc(108 * var(--dp));height:calc(4 * var(--dp));bottom:calc(8 * var(--dp))}
.s26 .gx-btn{position:absolute;right:-.42cqw;width:.62cqw;border-radius:0 .5cqw .5cqw 0;background:linear-gradient(90deg,#b69788,#ecdad0 60%,#c9ab9d)}
.s26 .gx-btn.vol{top:42cqw;height:27cqw}
.s26 .gx-btn.pwr{top:76cqw;height:13cqw}

/* ---------------------------------------------------------------- Galaxy Z Fold8 Ultra, open, Cream
   143.2 x 158.4 mm: height 110.61cqw; screen inset 3.6 mm sides, 3.7 mm ends; screen 857 dp wide = 94.98cqw.
   Two halves meet at the hinge; the left half swings open once, then rests flat. */
.fold{--dp:calc(94.98cqw / 857)}
.fold-rig{position:relative;width:100cqw;height:110.61cqw;perspective:2400px}
.fold-half{position:absolute;top:0;width:50cqw;height:100%;transform-style:preserve-3d}
.fold-half.l{left:0;width:calc(50cqw + 1.5px);transform-origin:100% 50%;z-index:2;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fold-half.r{right:0}
/* the metal runs round the outer edges only: at the hinge the two screens meet over black, so no light seam can bleed through */
.fh-body{position:absolute;inset:0;overflow:hidden;background:#050506;border:.7cqw solid #E6DDCE}
.fold-half.l .fh-body{border-radius:5cqw 0 0 5cqw;border-right:0;border-left-color:#DCD2C0;box-shadow:inset .25cqw 0 0 rgba(255,255,255,.05)}
.fold-half.r .fh-body{border-radius:0 5cqw 5cqw 0;border-left:0;border-right-color:#CFC4B0}
.fold-rig{filter:drop-shadow(0 50px 50px rgba(0,0,0,.45)) drop-shadow(0 16px 20px rgba(0,0,0,.35))}
.fh-glass{display:none}
.fh-screen{position:absolute;top:1.88cqw;bottom:1.88cqw;overflow:hidden;background:#FCF6F0}
.fh-screen.is-dark{background:linear-gradient(90deg,#0f1319,#18181c 100%)}
.fold-half.r .fh-screen.is-dark{background:linear-gradient(90deg,#18181c,#24201f)}
.fold-half.l .fh-screen{left:1.81cqw;right:0;border-radius:2.8cqw 0 0 2.8cqw}
.fold-half.r .fh-screen{right:1.81cqw;left:0;border-radius:0 2.8cqw 2.8cqw 0}
.fh-shot{position:absolute;top:calc(32 * var(--dp));width:94.98cqw}
.fold-half.l .fh-shot{left:0}
.fold-half.r .fh-shot{left:-47.49cqw}
.fold .gx-status{height:calc(32 * var(--dp));font-size:calc(13.5 * var(--dp));padding:0 calc(22 * var(--dp))}
.fold .gx-status .ic{gap:calc(5 * var(--dp))}
.fold .gx-status svg:first-child{width:calc(14 * var(--dp))}
.fold .gx-status svg:nth-child(2){width:calc(12 * var(--dp))}
.fold .gx-bat{width:calc(20 * var(--dp));height:calc(10 * var(--dp))}
.fold .gx-hole{width:2.1cqw;height:2.1cqw;left:calc(23.75cqw - 1.05cqw);top:calc(16 * var(--dp) - 1.05cqw)}
.fold .gx-handle{width:calc(108 * var(--dp));height:calc(4 * var(--dp));bottom:calc(8 * var(--dp));left:0;translate:-50% 0}
.fold-half.l .gx-handle{left:100%}
.fh-shade{position:absolute;inset:0;z-index:5;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.15));opacity:0;pointer-events:none}
/* the crease: all but gone on this generation, a breath of shading down the middle */
.fold-crease{position:absolute;z-index:3;top:2.58cqw;bottom:2.58cqw;left:50%;width:1.4cqw;translate:-50% 0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.035) 35%,rgba(0,0,0,.16) 50%,rgba(255,255,255,.035) 65%,transparent)}
.fold-notch{position:absolute;z-index:3;left:50%;translate:-50% 0;width:3.2cqw;height:.7cqw;background:linear-gradient(180deg,#9d917d,#6f6555)}
.fold-notch.t{top:0;border-radius:0 0 .4cqw .4cqw}
.fold-notch.b{bottom:0;border-radius:.4cqw .4cqw 0 0}

/* ---------------------------------------------------------------- the section */
.android-sec{position:relative;overflow:hidden;padding:136px 0 150px;color:#F2EBE1;
  background:radial-gradient(46% 42% at 72% 46%,rgba(224,168,92,.14),transparent 70%),radial-gradient(40% 36% at 18% 90%,rgba(154,85,100,.12),transparent 70%),#1E1A16}
.and-glow{position:absolute;left:58%;top:18%;width:720px;height:720px;border-radius:50%;translate:-50% 0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,235,225,.07),transparent 70%)}
.and-grid{position:relative;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:center}
.android-sec .eyebrow{color:#E0A85C}
.android-sec h2{margin-top:14px;color:#F2EBE1;max-width:12ch;font-size:clamp(40px,5vw,64px);line-height:1.04}
.android-sec h2 em{color:#E0A85C;font-style:italic}
.android-sec .lede{margin-top:20px;color:#A9A298;max-width:40ch;font-size:17.5px;line-height:1.6}
.and-cta{margin-top:30px}
.and-cta .badge-store{box-shadow:0 0 0 1px rgba(242,235,225,.18)}
.and-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:620px}
.and-visual .fold{--gw:clamp(300px,36vw,540px)}
.and-visual .s26{--gw:clamp(160px,19.6vw,295px);margin-left:calc(var(--gw) * -.36);margin-bottom:-26px;z-index:3}

@media (max-width:980px){
  .and-grid{grid-template-columns:1fr;gap:40px}
  .and-visual{min-height:0}
  .and-visual .fold{--gw:min(64vw,440px)}
  .and-visual .s26{--gw:min(34vw,240px)}
}
@media (max-width:640px){
  .android-sec{padding:96px 0 110px}
  .and-visual{justify-content:flex-start;padding-left:2vw}
  .and-visual .fold{--gw:66vw}
  .and-visual .s26{--gw:36vw;margin-left:-12vw}
}