/* Product Page Optimization — the deep-dive page.
 *
 * Every mock here is CSS. A screenshot of a real store is either taken without
 * permission or invented, and it goes soft the moment anyone zooms. A built
 * mock is honest about being an illustration and stays sharp.
 *
 * The before/after pattern repeats ten times, so .mk / .pox-row / .mk-tag /
 * .mk-note are defined once and every section inherits them.
 */

/* ══════════ HERO ══════════ */
.po-hero{
  background:var(--night);color:var(--night-ink);
  padding:clamp(54px,7vw,88px) 0 clamp(48px,6vw,76px);position:relative;overflow:hidden;
}
.po-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 420px at 8% -10%,rgba(124,108,255,.26),transparent 62%),
    radial-gradient(620px 380px at 96% 106%,rgba(79,216,255,.12),transparent 60%);
}
.po-hero > *{position:relative;z-index:1}
.po-hero h1{color:#fff;margin-bottom:20px}
.po-h1{font-size:clamp(30px,3.4vw,46px);line-height:1.12}
.po-h1 .grad-text{display:block;margin-top:4px}
.po-hero .lead{color:var(--night-ink-2);max-width:520px}
.po-hero .eyebrow{margin-bottom:22px}
.po-hero .btns{margin-top:30px}
/* The ghost button inherits its ink colour from the light-page default, which
   on this near-black hero is #0B0D12 on #070912: about 1.05:1, invisible.
   Shared by both deep-dive pages, so it is fixed once here. */
.po-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.04)}
.po-hero .btn-ghost:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.09)}
.po-hero-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,64px);align-items:center}

/* ---- the 3D exploded stack ----
   A flat mock could only show what a shopper already sees. The argument of this
   page is that there are layers underneath, and the deepest one is why a product
   gets cited, so the stack separates to make the invisible layer the visible
   point. Transform-only, so it composites on the GPU and never blocks paint.
   Under prefers-reduced-motion it settles into a flat readable list. */
.stage3d{
  perspective:1500px;perspective-origin:52% 44%;
  display:grid;align-items:center;min-height:clamp(360px,34vw,440px);
  padding:16px 0 26px;
}
.stack{
  position:relative;transform-style:preserve-3d;
  --tx:0deg;--ty:0deg;--sc:.78;
  transform:rotateX(calc(44deg + var(--ty))) rotateZ(calc(-32deg + var(--tx))) scale(var(--sc));
  animation:stackIn 1.6s cubic-bezier(.2,.8,.3,1) both, stackFloat 9s ease-in-out 1.6s infinite;
  will-change:transform;
}
/* No opacity in the entrance. If the timeline never advances the visitor still
   gets a drawn stack, just a tighter one. */
@keyframes stackIn{
  from{transform:rotateX(calc(56deg + var(--ty))) rotateZ(calc(-42deg + var(--tx))) scale(calc(var(--sc) * .88))}
  to{transform:rotateX(calc(44deg + var(--ty))) rotateZ(calc(-32deg + var(--tx))) scale(var(--sc))}
}
@keyframes stackFloat{
  0%,100%{transform:rotateX(calc(44deg + var(--ty))) rotateZ(calc(-32deg + var(--tx))) scale(var(--sc))}
  50%{transform:rotateX(calc(41deg + var(--ty))) rotateZ(calc(-28.5deg + var(--tx))) scale(var(--sc))}
}

.lyr{position:absolute;left:0;right:0;top:0;transform-style:preserve-3d;transform:translateZ(var(--z));
  animation:lyrIn 1.1s cubic-bezier(.2,.8,.3,1) both}
.lyr-1{position:relative;--z:200px;animation-delay:.12s}
.lyr-2{--z:122px;--lift:212px;--dyfix:26px;animation-delay:.26s}
.lyr-3{--z:44px;--lift:268px;--dyfix:33px;animation-delay:.38s}
.lyr-4{--z:-34px;--lift:324px;--dyfix:44px;animation-delay:.5s}
.lyr-5{--z:-112px;--lift:381px;--dyfix:59px;animation-delay:.62s}
.lyr-6{--z:-190px;--lift:437px;--dyfix:76px;animation-delay:.74s}
.lyr-7{--z:-268px;--lift:493px;--dyfix:99px;animation-delay:.86s}
@keyframes lyrIn{
  from{transform:translateZ(calc(var(--z) * .34))}
  to{transform:translateZ(var(--z))}
}

/* The label undoes the stack's transform in reverse order, so it faces the
   screen at full size, then lifts along the camera axis to float in front of
   the whole model. Without the lift the top two labels were painted behind the
   product frame: its plane is tilted 44deg across 527px, so its NEAR CORNER
   sits far deeper than its centre, and clearing the centre is not enough.
   Every label lands at the same camera depth, so they all render the same size.
   .lyr-card carries preserve-3d for this; a flat card would collapse the lift
   into a plain 2D offset and drop the label back onto its own plane. */
.lyr-lab{
  position:absolute;left:15px;top:50%;z-index:4;white-space:nowrap;align-self:flex-start;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:#D7DCEC;
  padding:5px 9px;border-radius:6px;
  background:rgba(9,11,16,.88);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 22px rgba(0,0,0,.5);transform-origin:0 50%;
  transform:
    scale(calc(1 / var(--sc)))
    rotateZ(calc(32deg - var(--tx)))
    rotateX(calc(-44deg - var(--ty)))
    translateZ(var(--lift,0px))
    translateY(calc(-50% - var(--dyfix,0px)));
}
.lyr-lab.glow{
  color:#fff;background:linear-gradient(100deg,#7C6CFF,#4FD8FF);border-color:transparent;
  animation:tagPulse 2.6s ease-in-out infinite;
}

.lyr-card{
  border-radius:14px;padding:13px 15px;display:flex;flex-wrap:wrap;gap:7px;
  align-items:center;
  transform-style:preserve-3d;
  background:rgba(20,25,48,.86);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
/* Every plane below the top one is inset, and reserves a gutter on its own
   left edge for the label. 150 local px projects to about 143 on screen. */
.lyr-2 .lyr-card,.lyr-3 .lyr-card,.lyr-4 .lyr-card,
.lyr-5 .lyr-card,.lyr-6 .lyr-card,.lyr-7 .lyr-card{
  margin-left:19%;padding-left:150px;position:relative;min-height:56px;
}

/* copy */
.copy-lyr{flex-direction:column;align-items:stretch;gap:6px}
.copy-lyr b{font-size:11.5px;font-weight:600;color:#EDF0FA;line-height:1.35}
.copy-lyr u{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.copy-lyr u.sh{width:58%}

/* images */
.img-lyr i{flex:1;height:32px;border-radius:6px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1)}
.img-lyr i.on{background:linear-gradient(140deg,rgba(124,108,255,.55),rgba(79,216,255,.3));
  border-color:rgba(155,140,255,.5)}

/* variants */
.var-lyr i{width:20px;height:28px;border-radius:5px;display:block;border:1.5px solid transparent}
.var-lyr i.on{border-color:#7C6CFF}

/* reviews */
.rev-lyr em{font-style:normal;font-size:12px;color:#FFC24B;letter-spacing:1px}
.rev-lyr u{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.14);
  flex-basis:100%}
.rev-lyr u.sh{width:44%;flex-basis:auto}
.chip{
  font-size:10px;padding:5px 10px;border-radius:99px;
  background:rgba(255,255,255,.09);color:#D3D8EA;border:1px solid rgba(255,255,255,.13);
}
.ents{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.ents i{height:16px;border-radius:4px;background:rgba(255,255,255,.1);display:block}
.ents i.hit{background:linear-gradient(100deg,#7C6CFF,#4FD8FF);box-shadow:0 0 12px rgba(124,108,255,.6)}
.code3d{
  flex-direction:column;gap:5px;
  background:linear-gradient(150deg,rgba(30,22,86,.95),rgba(12,16,40,.95));
  border-color:rgba(155,140,255,.42);
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 60px rgba(124,108,255,.34);
}
.code3d > span:not(.lyr-lab){font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:#A7B0D0;white-space:nowrap}
.code3d b{color:#4FD8FF;font-weight:500}

.scanline{
  position:absolute;left:-6%;right:-6%;height:2px;top:44%;
  background:linear-gradient(90deg,transparent,#4FD8FF,transparent);
  box-shadow:0 0 22px #4FD8FF;opacity:0;
  animation:scan 4.5s ease-in-out 2s infinite;
}
@keyframes scan{
  0%{transform:translateZ(260px);opacity:0}
  12%{opacity:.95}
  85%{opacity:.95}
  100%{transform:translateZ(-320px);opacity:0}
}

/* ---- the product page, now the top plane ---- */
.pa-frame{background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14)}
.pa-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#EEF0F6;border-bottom:1px solid #DFE3ED}
.pa-bar i{width:8px;height:8px;border-radius:50%;background:#CBD1DE}
.pa-bar i:first-child{background:#FF6058}
.pa-bar i:nth-child(2){background:#FFBD2E}
.pa-bar i:nth-child(3){background:#28C840}
.pa-bar span{font-size:10px;color:#7B8496;margin-left:6px}
.pa-body{padding:12px}
.pa-main{display:grid;grid-template-columns:.84fr 1.16fr;gap:12px}

.pa-shot{height:124px;border-radius:8px;border:1px solid #E4E8F2;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,#FFFFFF,#EDF0F7)}
.pa-thumbs{display:flex;gap:4px;margin-top:5px}
.pa-thumbs u{flex:1;height:18px;border-radius:4px;background:#EDF0F7;border:1px solid #E2E6F0}
.pa-thumbs u.on{border-color:#7C6CFF;background:#F0EEFF}

.wch{display:flex;flex-direction:column;align-items:center}
.wch-strap{width:24px;background:linear-gradient(90deg,#5E3620,#8A5531 45%,#6E3F22);position:relative}
.wch-strap.top{height:24px;border-radius:5px 5px 2px 2px}
.wch-strap.bot{height:28px;border-radius:2px 2px 6px 6px}
.wch-strap::after{content:"";position:absolute;inset:3px 4px;
  border-left:1px dashed rgba(255,225,200,.5);border-right:1px dashed rgba(255,225,200,.5)}
.wch-case{width:60px;height:60px;border-radius:50%;position:relative;margin:-3px 0;
  background:conic-gradient(from 220deg,#E7EAF0,#AAB2BE 25%,#F2F4F8 50%,#9AA2AE 75%,#E7EAF0);
  box-shadow:0 5px 14px rgba(11,13,18,.32);display:grid;place-items:center}
.wch-dial{width:47px;height:47px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 38% 30%,#2C3444,#141922 78%);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.55)}
.wch-h{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px;background:#EEF1F8}
.wch-h.hr{width:2.5px;height:12px;margin-left:-1.25px;transform:rotate(38deg)}
.wch-h.mn{width:2px;height:18px;margin-left:-1px;transform:rotate(-104deg);background:#4FD8FF}
.wch-pip{position:absolute;background:rgba(255,255,255,.72);border-radius:1px}
.wch-pip.p12{width:2px;height:5px;top:4px;left:50%;margin-left:-1px}
.wch-pip.p6{width:2px;height:5px;bottom:4px;left:50%;margin-left:-1px}
.wch-pip.p3{width:5px;height:2px;right:4px;top:50%;margin-top:-1px}
.wch-pip.p9{width:5px;height:2px;left:4px;top:50%;margin-top:-1px}
.wch-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:#EEF1F8;left:50%;top:50%;transform:translate(-50%,-50%)}
.wch-crown{position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:5px;height:9px;
  border-radius:2px;background:linear-gradient(90deg,#B7BEC9,#8B939F)}

.pa-info{display:flex;flex-direction:column;gap:6px}
.pa-ttl{font-size:11px;line-height:1.3;font-weight:600;color:#202634;margin:0}
.pa-price{display:flex;align-items:baseline;gap:6px}
.pa-price b{font-size:14px;color:#12181F}
.pa-price s{font-size:10.5px;color:#98A0B4}
.pa-price em{font-style:normal;font-size:10px;padding:2px 5px;border-radius:4px;background:#EAF7F1;color:#0E7A5B}
.pa-bdgs{display:flex;gap:4px;flex-wrap:wrap}
.pa-bdg{font-size:10px;padding:3px 6px;border-radius:4px;border:1px solid}
.pa-bdg.ok{background:#EAF7F1;color:#0E7A5B;border-color:#CDEBE0}
.pa-bdg.warn{background:#FFF4E3;color:#95611A;border-color:#FFE3BC}
.pa-sd{font-size:10px;line-height:1.5;color:#5C6478;margin:0}
.pa-sws{display:flex;gap:4px}
.pa-sws i{width:18px;height:24px;border-radius:4px;display:block;border:1.5px solid transparent}
.pa-sws i.on{border-color:#7C6CFF}
.s-leather{background:linear-gradient(180deg,#8A5531,#6E3F22)}
.s-mesh{background:repeating-linear-gradient(0deg,#9AA0A9,#9AA0A9 1px,#767C86 1px,#767C86 2px)}
.s-steel{background:linear-gradient(180deg,#C3C9D2,#9BA2AC)}
.s-rubber{background:linear-gradient(180deg,#33363E,#1B1D23)}
.pa-pains{display:flex;gap:4px;flex-wrap:wrap}
.pa-pains b{font-size:10px;font-weight:600;padding:3px 5px;border-radius:4px;
  background:#F2F4FA;color:#4A5266;border:1px solid #E4E8F2}
.pa-buy{text-align:center;padding:7px;border-radius:6px;background:linear-gradient(100deg,#7C6CFF,#4FD8FF);
  color:#fff;font-size:10.5px;font-weight:600;box-shadow:0 5px 14px rgba(124,108,255,.34)}

@media (prefers-reduced-motion:reduce){
  .stack,.lyr,.scanline,.lyr-lab.glow{animation:none!important}
  .stack{transform:none}
  .lyr{position:relative;transform:none;margin-bottom:36px;left:auto;right:auto;top:auto}
  .lyr-lab{position:relative;transform:none;left:auto;top:auto;display:inline-block;margin-bottom:9px}
  .lyr .lyr-card{margin-left:0;padding-left:15px}
  .scanline{display:none}
}
@media (max-width:1000px){
  .stage3d{perspective:1000px}
  .stack{--sc:.72}

}

/* ══════════ DUPLICATE COPY ══════════ */
.dup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px)}
.dup-card{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);
  padding:20px;position:relative;
}
.dup-store{font-size:11px;color:var(--ink-3);display:block;margin-bottom:10px}
.dup-text{font-size:14px;line-height:1.55;color:var(--ink-2);background:rgba(255,92,138,.09);
  padding:8px 10px;border-radius:7px;border-left:2px solid #FF5C8A}
.dup-flag{
  position:absolute;top:14px;right:14px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#C2453F;font-family:'IBM Plex Mono',monospace;
}
.dup-note{text-align:center;margin-top:26px;font-size:16px;color:var(--ink-2)}

/* ══════════ ELEMENT SECTIONS ══════════ */
.po-sec{padding:clamp(42px,5vw,68px) 0}
.po-sec.po-alt{background:var(--paper-2)}
.po-two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-width:0;gap:clamp(30px,4.5vw,60px);align-items:center}
/* Alternate sides by ORDER, not by direction:rtl. The rtl flip inherited into
   children and produced the uneven alignment this page shipped with first. */
.po-sec.po-alt .po-copy{order:2}
.po-sec.po-alt .po-vis{order:1}

.po-num{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;
  color:var(--violet);background:rgba(124,108,255,.09);border:1px solid rgba(124,108,255,.2);
  padding:5px 11px;border-radius:99px;margin-bottom:16px;
}
.po-copy h2{margin-bottom:14px;font-size:clamp(26px,3.1vw,38px)}
.po-copy .lead{margin-bottom:24px}
.po-do{list-style:none;display:flex;flex-direction:column;gap:14px}
.po-do li{position:relative;padding-left:26px}
.po-do li::before{
  content:'';position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:3px;
  background:var(--grad);
}
.po-do b{display:block;font-size:15px;font-weight:600;margin-bottom:3px;letter-spacing:-.01em}
.po-do span{font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ══════════ SHARED MOCK CHROME ══════════ */
.mk{display:flex;flex-direction:column;gap:16px;min-width:0}
.pox-row{
  display:block;                 /* stated, not assumed: an earlier stylesheet
                                    once set this to flex and silently laid the
                                    children out side by side */
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:20px;position:relative;
}
.po-alt .pox-row{background:#fff}
.pox-row.bad{border-color:rgba(255,92,138,.26)}
.pox-row.good{border-color:rgba(18,169,122,.3);box-shadow:0 14px 40px rgba(18,169,122,.09)}
.mk-tag{
  position:absolute;top:-9px;left:16px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:3px 9px;border-radius:5px;
}
.pox-row.bad .mk-tag{background:#FFE9EF;color:#C2453F;border:1px solid #FFD2DE}
.pox-row.good .mk-tag{background:#E6F7F0;color:#0E7A5B;border:1px solid #C6EBDC}
.mk-note{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin-top:12px;padding-top:10px;
  border-top:1px dashed var(--line-2)}
.mk-note.good-note{color:#0E7A5B}
.pox-row p{font-size:14px;line-height:1.6}

/* ── title ── */
.mk-title{font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.pox-row.bad .mk-title{color:var(--ink-3)}
.mk-title em{font-style:normal;padding:1px 4px;border-radius:4px;margin-right:2px}
.t-brand{background:rgba(124,108,255,.16);color:#5546C8}
.t-prod{background:rgba(79,216,255,.18);color:#0B7C93}
.t-attr{background:rgba(255,182,92,.22);color:#95611A}
.t-fit{background:rgba(18,169,122,.16);color:#0E7A5B}
.mk-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--ink-3)}
.mk-legend span{display:flex;align-items:center;gap:5px}
.mk-legend i{width:9px;height:9px;border-radius:3px;display:block}
.mk-ruler{margin-top:12px;display:flex;align-items:center;gap:9px}
.mk-ruler u{flex:1;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--cyan) 96%,#E4E8F2 96%)}
.mk-ruler b{font-size:10.5px;color:var(--ink-3);font-weight:500;font-family:'IBM Plex Mono',monospace;white-space:nowrap}

/* ── images ── */
.mk.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.shot{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);
  padding:11px;position:relative;transition:transform .2s,box-shadow .2s;
}
.shot:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.shot-n{
  position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:5px;
  background:var(--grad);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;
}
.shot-art{height:52px;border-radius:7px;margin-bottom:9px;background:linear-gradient(135deg,#E6EAF4,#F4F6FB);border:1px solid #E4E8F2}
.shot.pox-hero .shot-art{background:linear-gradient(135deg,#D9DFF0,#EFF2F9)}
.shot.scale .shot-art{background:linear-gradient(115deg,#E6EAF4 60%,#CFD6E8 60%)}
.shot.use .shot-art{background:linear-gradient(135deg,#DCE7F5,#F0F4FB)}
.shot.detail .shot-art{background:repeating-linear-gradient(45deg,#E6EAF4,#E6EAF4 5px,#DDE3F0 5px,#DDE3F0 10px)}
.shot.box .shot-art{background:linear-gradient(135deg,#EDE7DC,#F7F4EE)}
.shot.dim .shot-art{background:linear-gradient(90deg,#E6EAF4 48%,#B9C3DC 48%,#B9C3DC 52%,#E6EAF4 52%)}
.shot.cmp .shot-art{background:linear-gradient(90deg,#E0E6F3 49%,#fff 49%,#fff 51%,#E9EDF6 51%)}
.shot.vid .shot-art{background:linear-gradient(135deg,#2B3243,#4A5468)}
.shot.mach .shot-art{background:repeating-linear-gradient(0deg,#EEF1F8,#EEF1F8 4px,#E3E8F3 4px,#E3E8F3 8px)}
.shot b{display:block;font-size:12.5px;font-weight:600;margin-bottom:2px}
.shot-q{font-size:11px;color:var(--ink-3);line-height:1.4;display:block}

/* ── variations ── */
.var-label{font-size:13px;font-weight:600;margin-bottom:12px}
.var-sel{font-weight:400;color:var(--ink-3)}
.var-dots{display:flex;gap:9px}
.var-dots i{width:26px;height:26px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.12);display:block}

/* The straps are drawn as straps, not as colour tiles. The whole argument of
   this section is that a buyer decides on material, so a swatch that does not
   show material would be arguing against itself. Each is a band segment with
   the detail that identifies it: stitching on leather, weave on mesh, links on
   steel, perforations on rubber. */
.var-swatches{display:flex;gap:12px;flex-wrap:wrap}
.sw{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative}
.sw u{
  width:54px;height:72px;border-radius:9px;display:block;position:relative;overflow:hidden;
  border:2px solid transparent;box-shadow:0 3px 10px rgba(11,13,18,.14);
}
.sw.pox-on u{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,108,255,.2),0 4px 14px rgba(11,13,18,.16)}

/* leather: grain, a darker centre crease, stitching down both edges */
.sw.leather u{
  background:
    linear-gradient(90deg,rgba(0,0,0,.22),transparent 18%,transparent 82%,rgba(0,0,0,.22)),
    linear-gradient(180deg,#8A5531,#6E3F22 48%,#7A4A2B);
}
.sw.leather u::before{
  content:'';position:absolute;inset:7px 6px;border-radius:4px;
  border-left:1.5px dashed rgba(255,225,200,.55);
  border-right:1.5px dashed rgba(255,225,200,.55);
}
.sw.leather u::after{
  content:'';position:absolute;left:0;right:0;top:58%;height:36%;
  background:radial-gradient(ellipse at 50% 0,rgba(0,0,0,.3),transparent 70%);
}

/* mesh: fine milanese weave with a diagonal sheen */
.sw.mesh u{
  background:
    linear-gradient(115deg,rgba(255,255,255,.4),transparent 34%,transparent 62%,rgba(255,255,255,.28)),
    repeating-linear-gradient(0deg,#9AA0A9,#9AA0A9 1.5px,#767C86 1.5px,#767C86 3px);
}
.sw.mesh u::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,.14) 1px,transparent 1px,transparent 3px);
}

/* steel: a link bracelet, three columns with centre-link highlight */
.sw.steel u{background:linear-gradient(180deg,#C3C9D2,#9BA2AC)}
.sw.steel u::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.55) 0 2px, transparent 2px 9px,
    rgba(0,0,0,.22) 9px 11px, transparent 11px 13px);
}
.sw.steel u::after{
  content:'';position:absolute;left:33%;right:33%;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(255,255,255,.5) 45%,rgba(0,0,0,.16));
}

/* rubber: matte, with the perforation holes a sports strap has */
.sw.rubber u{background:linear-gradient(180deg,#33363E,#1B1D23)}
.sw.rubber u::before{
  content:'';position:absolute;inset:10px 16px;
  background:radial-gradient(circle,rgba(0,0,0,.85) 34%,transparent 36%);
  background-size:10px 16px;
}
.sw.rubber u::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 42%);
}

.sw b{font-size:12px;font-weight:600}
.sw.oos u{opacity:.42;filter:grayscale(.5)}
.sw.oos b{color:var(--ink-3)}
.sw.oos em{font-size:10.5px;font-style:normal;color:#C2453F;position:absolute;bottom:-15px;white-space:nowrap}

/* ── badges ── */
.bdg-row{display:flex;gap:7px;flex-wrap:wrap}
.bdg-row i{
  font-style:normal;font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;
  background:#EEF1F8;color:var(--ink-2);border:1px solid var(--line-2);
}
.bdg-row.noise i{background:#FFF0F4;color:#C2453F;border-color:#FFD9E3;font-size:10px;letter-spacing:.05em}
.bdg-row i.ok{background:#E9F8F2;color:#0E7A5B;border-color:#C9EBDD}
.bdg-row i.warn{background:#FFF4E3;color:#95611A;border-color:#FFE3BC}
.buybox{border:1px solid var(--line-2);border-radius:var(--r);padding:16px;background:var(--paper-2)}
.bb-price{display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.bb-price b{font-size:24px;font-family:'Unbounded',sans-serif}
.bb-price s{color:var(--ink-3);font-size:14px}
.bb-btn{
  margin-top:12px;height:42px;border-radius:10px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:14.5px;
  box-shadow:0 8px 20px rgba(124,108,255,.3);
}
.bb-ship{margin-top:9px;font-size:12px;color:var(--ink-2);text-align:center}

/* ── pain points ── */
.para{display:flex;flex-direction:column;gap:6px}
.para u{height:6px;border-radius:3px;background:#E4E8F2;display:block}
.para u.sh{width:52%}
.para u.pox-hl{background:rgba(255,182,92,.5)}
.pain-row{display:flex;flex-direction:column;gap:9px}
.pain{display:grid;grid-template-columns:auto 1fr;gap:4px 11px;align-items:start;
  padding:11px 13px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line-2)}
.pi{grid-row:span 2;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:14px}
.pain b{font-size:13.5px;font-weight:600}
.pain em{font-style:normal;font-size:12px;color:var(--ink-2);line-height:1.45}

/* ── specs / entities ── */
.ent-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.ent-head b{font-size:15px}
.ent-head span{font-size:11.5px;color:#C2453F}
.ent-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.ent{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:6px 9px;border-radius:7px}
.ent i{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;font-size:10px;font-style:normal;flex:none}
.ent.has{background:#EAF7F1;color:#0E7A5B}
.ent.has i{background:#12A97A;color:#fff}
.ent.missing{background:#FFF0F4;color:#9B3B37}
.ent.missing i{background:#E05A55;color:#fff}
.ent-filter{margin-top:15px;padding:14px;border-radius:10px;background:var(--night);color:var(--night-ink-2)}
.ent-filter b{display:block;color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace;margin-bottom:7px}
.ent-filter p{font-size:13px;line-height:1.6;color:var(--night-ink-2)}
.ent-filter em{font-style:normal;color:var(--cyan)}

/* ── reviews ── */
.rv-avg{display:flex;align-items:center;gap:10px}
.rv-avg b{font-size:26px;font-family:'Unbounded',sans-serif}
.rv-avg .stars{color:#FFB65C;font-size:15px;letter-spacing:1px}
.rv-avg em{font-style:normal;font-size:12px;color:var(--ink-3)}
.rv-line{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.rv-line u{height:6px;border-radius:3px;background:#E4E8F2;display:block}
.rv-line u.sh{width:60%}
.rv-pin{padding:12px;border-radius:10px;background:#E9F8F2;border:1px solid #C9EBDD;margin-bottom:9px}
.rv-badge{display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#0E7A5B;font-family:'IBM Plex Mono',monospace;margin-bottom:6px}
.rv-pin b{display:block;font-size:13px;margin-bottom:4px;color:#0B5F47}
.rv-pin em,.rv-neg em{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--ink-2);display:block}
.rv-neg{padding:12px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line-2);margin-bottom:9px}
.rv-neg b{display:block;font-size:13px;margin-bottom:5px}
.rv-reply{padding-left:11px;border-left:2px solid var(--violet);margin-top:6px}
.rv-reply span{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--violet);font-family:'IBM Plex Mono',monospace;margin-bottom:3px}
.rv-qa{font-size:12.5px;padding:10px 12px;border-radius:9px;background:var(--paper-2);
  border:1px solid var(--line-2);color:var(--ink-2)}
.rv-qa span{font-size:10.5px;letter-spacing:.1em;color:var(--violet);margin-right:7px}

/* ── related ── */
.rel-dumb{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rel-dumb u{height:64px;border-radius:8px;background:#E7EBF4;border:1px solid #DDE2EE;display:block}
.rel-smart{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rl{padding:11px 12px;border-radius:9px;background:var(--paper-2);border:1px solid var(--line-2)}
.rl-why{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--violet);font-family:'IBM Plex Mono',monospace;margin-bottom:4px}
.rl b{font-size:12.5px;font-weight:600;line-height:1.35}

/* ── schema ── */
.code{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.65;
  background:var(--night);color:#C7CEE4;padding:14px;border-radius:10px;
  overflow-x:auto;white-space:pre;
}
.code .pox-k{color:var(--cyan)}
.code .pox-s{color:#8CE0B4}
.code .pox-c{color:#7B849C;font-style:italic}

/* ══════════ STAKEHOLDERS ══════════ */
.stake-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.8vw,18px)}
.stake{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark-2);
  border-radius:var(--r-lg);padding:22px 18px;transition:border-color .22s,background .22s;
}
.stake:hover{border-color:rgba(155,140,255,.4);background:rgba(124,108,255,.08)}
.stake b{display:block;color:#fff;font-size:15px;margin-bottom:7px}
.stake span{font-size:13px;color:var(--night-ink-2);line-height:1.5}

/* ══════════ SOURCES ══════════ */
.src-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
.src-card{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px 24px;
  border-top:3px solid var(--violet);transition:transform .22s,box-shadow .22s;
}
.src-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.src-card h4{margin-bottom:9px}
.src-card p{font-size:14.5px;line-height:1.6}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1000px){
  .po-hero-in{grid-template-columns:1fr;gap:38px}
  .po-two{grid-template-columns:minmax(0,1fr);gap:32px}
  .po-sec:nth-child(even) .po-two{direction:ltr}
  .stake-grid{grid-template-columns:repeat(2,1fr)}
  .dup-grid,.src-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .mk.shots{grid-template-columns:repeat(2,1fr)}
  .ent-grid,.rel-smart{grid-template-columns:1fr}
  .stake-grid{grid-template-columns:1fr}
  .pa-main{grid-template-columns:1fr}
  .rel-dumb{grid-template-columns:repeat(2,1fr)}
}

/* ══════════ WORKFLOW ══════════ */
.flow-sec{background:var(--paper)}
.flow{display:flex;flex-direction:column;gap:0}
.flow-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,18px);position:relative}
.flow-stages::before{
  content:'';position:absolute;top:30px;left:9%;right:9%;height:2px;
  background:linear-gradient(90deg,transparent,var(--line),var(--line),transparent);
}
.fstage{
  position:relative;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:22px 20px;
}
.fs-n{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--grad);color:#fff;font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;margin-bottom:14px;
  box-shadow:0 8px 20px rgba(124,108,255,.3);position:relative;z-index:1;
}
.fstage b{display:block;font-size:15.5px;font-weight:600;margin-bottom:7px;letter-spacing:-.01em}
.fs-d{font-size:13.5px;line-height:1.55;color:var(--ink-2)}

.flow-arrow{display:flex;align-items:center;gap:14px;margin:26px 0}
.flow-arrow::before,.flow-arrow::after{content:'';flex:1;height:1px;background:var(--line)}
.flow-arrow span{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);flex:none;
}

.flow-out{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,24px)}
.fout{background:var(--night);border-radius:var(--r-lg);padding:20px;position:relative;overflow:hidden}
.fo-lab{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--violet-2);margin-bottom:14px;
}

/* google mock */
.serp-mock{background:#fff;border-radius:10px;padding:12px}
.sm-bar{display:flex;align-items:center;gap:8px;background:#F1F3F9;border-radius:99px;padding:7px 12px;margin-bottom:11px}
.sm-bar i{width:11px;height:11px;border-radius:50%;border:2px solid #9AA3B8;flex:none}
.sm-bar span{font-size:11px;color:#5C6478}
.sm-ai{background:linear-gradient(135deg,rgba(124,108,255,.08),rgba(79,216,255,.06));
  border:1px solid rgba(124,108,255,.2);border-radius:9px;padding:10px;margin-bottom:9px}
.sm-ai em{font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violet);font-family:'IBM Plex Mono',monospace;display:block;margin-bottom:7px}
.sm-ai u{display:block;height:5px;border-radius:3px;background:#D5DAEA;margin-bottom:4px}
.sm-ai u.sh{width:56%}
.sm-src{display:flex;gap:5px;margin-top:9px}
.sm-src span{font-size:10px;padding:3px 7px;border-radius:5px;background:#EEF1F8;color:#7B8496}
.sm-src span.pox-win{background:var(--grad);color:#fff;font-weight:600}
.sm-res{padding:7px 0;border-top:1px solid #EEF1F8}
.sm-res b{display:block;font-size:11.5px;color:#1A3FBF;margin-bottom:4px}
.sm-res u{display:block;height:5px;border-radius:3px;background:#E2E6F0;width:78%}
.sm-res.pox-win b{color:#0E7A5B}
.sm-res:not(.pox-win) b{height:8px;width:60%;background:#E2E6F0;border-radius:4px}

/* assistant mock */
.llm-mock{background:#0F1226;border:1px solid var(--line-dark);border-radius:10px;padding:13px}
.lm-q{font-size:12px;color:#9AA3C0;padding-bottom:10px;border-bottom:1px solid var(--line-dark-2);margin-bottom:11px}
.lm-a p{font-size:12.5px;line-height:1.6;color:#DCE0F0}
.lm-a b{color:var(--cyan);font-weight:600}
.lm-cite{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-dark-2)}
.lm-cite span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7B849C;font-family:'IBM Plex Mono',monospace}
.lm-cite i{font-style:normal;font-size:10.5px;padding:3px 8px;border-radius:5px;background:rgba(255,255,255,.07);color:#B9C0D4}
.lm-cite i:first-of-type{background:var(--grad);color:#fff;font-weight:600}

@media (max-width:900px){
  .flow-stages{grid-template-columns:1fr 1fr}
  .flow-stages::before{display:none}
  .flow-out{grid-template-columns:1fr}
}
@media (max-width:560px){ .flow-stages{grid-template-columns:1fr} }

/* The copy and mock columns must be allowed to be narrower than their widest
   child, or one pre block sets the width of the whole section. */
.po-copy,.po-vis,.pox-row{min-width:0}
.code{max-width:100%}

/* ---- phones: flatten the stack ----
   Scaled small enough to fit 375px the mock's own type falls under 7px, which
   is worse than no 3D at all. */
@media (max-width:768px){
  .stage3d{perspective:none;display:block;min-height:0;padding:0}
  .stack{transform:none;animation:none;--sc:1}
  .lyr{
    position:relative;left:auto;right:auto;top:auto;
    transform:none;animation:none;margin-bottom:34px;
  }
  .lyr:last-of-type{margin-bottom:0}
  .lyr-lab{position:relative;transform:none;left:auto;top:auto;
    display:inline-block;margin-bottom:9px;--lift:0px}
  .lyr .lyr-card{margin-left:0;padding-left:15px}
  .scanline{display:none}
}