/* Websites & Apps · hero — centred headline, then the device rig: browser centre, tablet rear-right, phone front-left,
   each with a p75 chip docked on its lower edge. Everything inside the devices is sized in em from container units,
   so the miniature pages scale with the rig instead of reflowing. */
.twa-hero{padding-top:var(--twa-hero-t);padding-bottom:clamp(72px,7vw,112px);overflow:hidden}
.twa-hero__head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1000px;margin-inline:auto}

.twa-crumb ol{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 0;font-size:var(--t-sm);color:var(--muted)}
.twa-crumb li+li::before{content:"\203A";margin-inline:10px;font-family:var(--f);color:var(--ghost)}
.twa-crumb a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:4px;transition:color var(--d1) var(--e-io),text-decoration-color var(--d1) var(--e-io)}
.twa-crumb a:hover{color:var(--ink);text-decoration-color:var(--blue)}
.twa-crumb [aria-current]{color:var(--ink);font-weight:500}

.twa-hero__eb{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;margin-top:clamp(28px,3vw,40px);padding:7px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.4}
.twa-hero__eb b{font-weight:500;color:var(--blue)}
.twa-hero__eb span[aria-hidden]{color:var(--ghost)}
.twa-hero__h{margin-top:clamp(22px,2.4vw,32px);max-width:19ch;font-family:var(--f-h);font-size:clamp(2.3rem,5.3vw,4.6rem);font-weight:500;line-height:1.03;letter-spacing:-.034em;color:var(--ink);text-wrap:balance}
.twa-hero__lead{margin-top:clamp(20px,2.2vw,28px);max-width:64ch;text-align:center;font-size:clamp(1rem,1.2vw,1.125rem)}
.twa-hero__act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(28px,3vw,38px)}

/* ---------- the rig ---------- */
.twa-hero__rig{position:relative;max-width:1180px;margin:clamp(64px,7vw,104px) auto 0}
.twa-hero__stage{position:relative;aspect-ratio:1180 / 640}
.twa-hero__tag{position:absolute;left:0;top:-2px;display:inline-flex;align-items:center;gap:10px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);z-index:4}
.twa-hero__floor{position:absolute;left:0;right:0;bottom:3%;height:1px;background:var(--line-3);z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}

.twa-dev{position:absolute;container-type:inline-size;transition:transform 1.1s var(--e),opacity .8s var(--e)}
.twa-dev--web{left:15.5%;top:5%;width:63.5%;z-index:2}
.twa-dev--tab{left:76.5%;top:1%;width:23.5%;z-index:1;transition-delay:.12s}
.twa-dev--phone{left:1.5%;top:19%;width:17.5%;z-index:3;transition-delay:.24s}

/* browser window */
.twa-dev__win{position:relative;display:flex;flex-direction:column;aspect-ratio:16 / 10.6;overflow:hidden;border:1px solid var(--line-3);border-radius:clamp(8px,1.4cqi,16px);background:var(--paper);box-shadow:var(--sh-2)}
.twa-dev__bar{flex:none;display:flex;align-items:center;gap:1.4cqi;height:4.6cqi;padding:0 1.6cqi;border-bottom:1px solid var(--line-2);background:var(--paper-2)}
.twa-dev__dots{display:inline-flex;gap:.7cqi;flex:none}
.twa-dev__dots i{width:.95cqi;height:.95cqi;border-radius:50%;background:var(--line-3)}
.twa-dev__url{display:inline-flex;align-items:center;gap:.7cqi;flex:1;min-width:0;height:2.9cqi;margin-inline:auto;max-width:48cqi;padding:0 1.2cqi;border-radius:2cqi;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--f);font-size:1.05cqi;color:var(--muted);white-space:nowrap;overflow:hidden}
.twa-dev__url i{width:.8cqi;height:.95cqi;flex:none;border-radius:.2cqi;background:var(--blue)}
.twa-dev__rel{flex:none;font-family:var(--f);font-size:1cqi;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.twa-dev__win .twa-dev__screen{flex:1;min-height:0}
.twa-dev__screen{position:relative;container-type:inline-size;overflow:hidden;background:var(--paper)}

/* tablet + phone bodies */
.twa-dev__body{position:relative;background:var(--ink);box-shadow:var(--sh-2)}
.twa-dev--tab .twa-dev__body{padding:3.6cqi;border-radius:7cqi}
.twa-dev--tab .twa-dev__screen{aspect-ratio:3 / 4.1;border-radius:3cqi}
.twa-dev__cam{position:absolute;left:50%;top:1.3cqi;width:1.1cqi;height:1.1cqi;border-radius:50%;background:var(--ink-2);transform:translateX(-50%)}
.twa-dev--phone .twa-dev__body{padding:3.4cqi;border-radius:15cqi}
.twa-dev--phone .twa-dev__screen{aspect-ratio:9 / 19;border-radius:11.5cqi}
.twa-dev__island{position:absolute;left:50%;top:6.4cqi;z-index:3;width:26cqi;height:6.6cqi;border-radius:4cqi;background:var(--ink);transform:translateX(-50%)}

/* ---------- field chips ---------- */
.twa-chip{position:absolute;left:50%;top:100%;z-index:6;display:grid;gap:7px;width:max-content;max-width:280px;padding:10px 13px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);box-shadow:var(--sh-1);
  font-family:var(--f);font-size:10.5px;line-height:1.3;letter-spacing:.02em;color:var(--muted);white-space:nowrap;transform:translate(-50%,-44%);transition:opacity .6s var(--e) .95s,transform .6s var(--e) .95s}
.twa-dev--tab .twa-chip{left:auto;right:0;transform:translate(0,-44%)}
.twa-dev--phone .twa-chip{left:6%;transform:translate(0,-30%)}
.twa-chip__top{display:flex;align-items:center;justify-content:space-between;gap:14px;text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.twa-chip__top .twa-rt{font-size:10px}
.twa-chip__m{display:flex;gap:14px}
.twa-chip__m b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.twa-hero__chips{display:none}

/* ---------- the miniature product page ---------- */
.twa-pp{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--f-b);line-height:1.25}
.twa-pp--web{font-size:1.36cqi}
.twa-pp--tab{font-size:3.9cqi}
.twa-pp--phone{font-size:6.2cqi}
.twa-pp i,.twa-pp em{font-style:normal}

.twa-pp__status{flex:none;display:flex;align-items:center;justify-content:space-between;padding:1.25em 1.9em .2em 2.3em;font-family:var(--f);font-size:.72em}
.twa-pp__status b{font-weight:600}
.twa-pp__status span{display:inline-flex;align-items:flex-end;gap:.2em;height:.9em}
.twa-pp__status span i{width:.28em;background:var(--ink);border-radius:.1em}
.twa-pp__status span i:nth-child(1){height:35%}.twa-pp__status span i:nth-child(2){height:55%}.twa-pp__status span i:nth-child(3){height:78%}.twa-pp__status span i:nth-child(4){height:100%;opacity:.3}

.twa-pp__nav{flex:none;display:flex;align-items:center;gap:1.8em;height:3.6em;padding:0 2.4em;border-bottom:1px solid var(--line-2)}
.twa-pp__logo{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-h);font-size:1.08em;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.twa-pp__logo i{position:relative;width:1.05em;height:1.05em;border-radius:.3em;background:var(--ink)}
.twa-pp__logo i::after{content:"";position:absolute;right:.2em;bottom:.2em;width:.32em;height:.32em;border-radius:50%;background:var(--blue)}
.twa-pp__links{display:flex;gap:1.6em;margin-left:auto;font-size:.86em;color:var(--muted)}
.twa-pp__bag{display:inline-flex;align-items:center;gap:.45em;font-size:.86em;font-weight:500}
.twa-pp__bag em{display:grid;place-items:center;min-width:1.55em;height:1.55em;padding:0 .3em;border-radius:1em;background:var(--blue);color:var(--on-ink);font-family:var(--f);font-size:.78em}
.twa-pp__burger{display:none;flex-direction:column;gap:.24em}
.twa-pp__burger i{width:1.15em;height:.13em;border-radius:.1em;background:var(--ink)}

.twa-pp__main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:2.6em;padding:2.4em 2.8em}
.twa-pp__media{display:flex;flex-direction:column;gap:.8em;min-height:0}
.twa-pp__pic{position:relative;display:block;flex:1;min-height:0;overflow:hidden;border-radius:.7em;background:var(--paper-3)}
.twa-pp__pic::after{content:"";position:absolute;inset:0;background:var(--paper-4);opacity:0;transition:opacity .35s var(--e)}
.twa-pp__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.02);transition:opacity .6s var(--e),transform .9s var(--e)}
.twa-pp__thumbs{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7em}
.twa-pp__thumbs i{aspect-ratio:1;border-radius:.45em;background:var(--paper-3)}
.twa-pp__thumbs i:first-child{box-shadow:inset 0 0 0 .12em var(--ink)}

.twa-pp__info{display:flex;flex-direction:column;align-items:flex-start;gap:.85em;min-width:0;padding-top:.4em}
.twa-pp__tx{position:relative;display:block;max-width:100%}
.twa-pp__tx::after{content:"";position:absolute;inset:.14em 0;border-radius:.3em;background:var(--paper-4);opacity:0;transition:opacity .35s var(--e)}
.twa-pp__tx>span{display:block;transition:opacity .45s var(--e)}
.twa-pp__v{display:grid}
.twa-pp__v>em{grid-area:1 / 1;transition:opacity .45s var(--e)}
.twa-pp[data-v="0"] .v1,.twa-pp[data-v="1"] .v0{opacity:0}
.twa-pp[data-v="0"] .twa-pp__img--1,.twa-pp[data-v="1"] .twa-pp__img--0{opacity:0}
.twa-pp__crumb{font-family:var(--f);font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.twa-pp__title{font-family:var(--f-h);font-size:2.15em;font-weight:500;line-height:1.06;letter-spacing:-.025em}
.twa-pp__stars>span{display:inline-flex;align-items:center;gap:.14em}
.twa-pp__stars i{width:.85em;height:.85em;background:var(--ink);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.twa-pp__stars small{margin-left:.5em;font-family:var(--f);font-size:.72em;color:var(--muted)}
.twa-pp__price{font-family:var(--f);font-size:1.35em;font-weight:500;font-variant-numeric:tabular-nums}
.twa-pp__sw{display:flex;gap:.5em}
.twa-pp__sw i{width:1.35em;height:1.35em;border-radius:50%;background:var(--paper-4);box-shadow:inset 0 0 0 1px var(--line-3)}
.twa-pp__sw i:nth-child(2){background:var(--faint)}
.twa-pp__sw i:nth-child(3){background:var(--ink)}
.twa-pp__sw i:first-child{box-shadow:0 0 0 .14em var(--paper),0 0 0 .26em var(--ink)}
.twa-pp__cta{align-self:stretch;margin-top:.5em}
.twa-pp__cta>span{display:flex;align-items:center;justify-content:center;height:3.1em;border-radius:.55em;background:var(--ink);color:var(--on-ink);font-size:.9em;font-weight:600}
.twa-pp__note{font-size:.74em;color:var(--muted)}
.twa-pp__spec{display:flex;flex-direction:column;align-self:stretch;margin-top:.9em;border-top:1px solid var(--line-2)}
.twa-pp__spec>.twa-pp__tx{padding-block:.75em;border-bottom:1px solid var(--line-2)}
.twa-pp__spec>.twa-pp__tx>span{display:flex;justify-content:space-between;gap:1em;font-size:.78em;color:var(--txt)}
.twa-pp__spec b{font-family:var(--f);font-size:.9em;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* stacked layouts */
.twa-pp--tab .twa-pp__nav,.twa-pp--phone .twa-pp__nav{gap:1em;padding:0 1.4em;height:3.2em}
.twa-pp--tab .twa-pp__burger,.twa-pp--phone .twa-pp__burger{display:flex}
.twa-pp--tab .twa-pp__links,.twa-pp--phone .twa-pp__links,.twa-pp--tab .twa-pp__thumbs,.twa-pp--phone .twa-pp__thumbs{display:none}
.twa-pp--tab .twa-pp__bag,.twa-pp--phone .twa-pp__bag{margin-left:auto}
.twa-pp--tab .twa-pp__main,.twa-pp--phone .twa-pp__main{display:flex;flex-direction:column;gap:1.1em;padding:1.3em 1.4em}
.twa-pp--tab .twa-pp__pic{flex:none;aspect-ratio:4 / 3.3}
.twa-pp--phone .twa-pp__pic{flex:none;aspect-ratio:1 / .84}
.twa-pp--phone .twa-pp__note{display:none}
.twa-pp--tab .twa-pp__media,.twa-pp--phone .twa-pp__media{flex:none}
.twa-pp--tab .twa-pp__info,.twa-pp--phone .twa-pp__info{gap:.62em;padding-top:0}
.twa-pp--tab .twa-pp__title{font-size:1.6em}
.twa-pp--phone .twa-pp__title{font-size:1.45em}
.twa-pp--phone .twa-pp__logo{font-size:.98em}
.twa-pp--phone .twa-pp__sw{display:none}
.twa-pp--phone .twa-pp__cta{position:absolute;left:1.2em;right:1.2em;bottom:1.5em;margin:0}
.twa-pp--phone .twa-pp__cta>span{height:2.9em;border-radius:1.5em}

/* stream states — the markup ships data-st="done" */
.twa-pp[data-st="skel"] .twa-pp__pic::after,.twa-pp[data-st="skel"] .twa-pp__tx::after,.twa-pp[data-st="img"] .twa-pp__tx::after{opacity:1}
.twa-pp[data-st="skel"] .twa-pp__img{opacity:0;transform:scale(1.03)}
.twa-pp[data-st="skel"] .twa-pp__tx>span,.twa-pp[data-st="img"] .twa-pp__tx>span{opacity:0}
.twa-pp__tx:nth-child(2)>span{transition-delay:.05s}.twa-pp__tx:nth-child(3)>span{transition-delay:.1s}.twa-pp__tx:nth-child(4)>span{transition-delay:.14s}
.twa-pp__tx:nth-child(6)>span{transition-delay:.2s}.twa-pp__tx:nth-child(7)>span{transition-delay:.24s}
.is-live .twa-pp[data-st="skel"] .twa-pp__tx::after{animation:twa-skel 1s var(--e-io) infinite alternate}
@keyframes twa-skel{to{opacity:.55}}

/* assembly — hero.js adds .is-pre before first paint and removes it on entry */
.twa-hero__rig.is-pre .twa-dev--web{opacity:0;transform:translateY(56px) scale(.97)}
.twa-hero__rig.is-pre .twa-dev--tab{opacity:0;transform:translate(48px,28px)}
.twa-hero__rig.is-pre .twa-dev--phone{opacity:0;transform:translate(-48px,72px)}
.twa-hero__rig.is-pre .twa-chip{opacity:0}
.twa-hero__rig.is-pre .twa-dev--web .twa-chip{transform:translate(-50%,-10%)}
.twa-hero__rig.is-pre .twa-dev--tab .twa-chip,.twa-hero__rig.is-pre .twa-dev--phone .twa-chip{transform:translate(0,4%)}

/* ---------- meta ---------- */
.twa-hero__meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:920px;margin:clamp(88px,8vw,120px) auto 0;border-top:1px solid var(--line)}
.twa-hero__meta>div{min-width:0;padding:20px 16px 0;text-align:center;border-right:1px solid var(--line-2)}
.twa-hero__meta>div:last-child{border-right:0}
.twa-hero__meta dt{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.3}
.twa-hero__meta dd{margin-top:10px;font-family:var(--f);font-size:var(--t-xs);font-weight:500;letter-spacing:.03em;color:var(--ink);line-height:1.45}

@media (max-width:1100px){
  .twa-chip{font-size:10px;padding:9px 11px}
  .twa-chip__m{gap:10px}
}
@media (max-width:860px){
  .twa-hero__rig{margin-top:56px}
  .twa-hero__stage{aspect-ratio:760 / 560}
  .twa-hero__tag{top:-30px}
  .twa-dev--web{left:10%;top:6%;width:88%}
  .twa-dev--tab{display:none}
  .twa-dev--phone{left:0;top:26%;width:27%}
  .twa-dev .twa-chip{display:none}
  .twa-hero__chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px;margin-top:28px}
  .twa-chip--list{position:static;width:auto;max-width:none;transform:none;transition:none}
  .twa-chip--list .twa-chip__m{justify-content:space-between}
}
@media (max-width:600px){
  .twa-hero__h{font-size:clamp(2.1rem,9vw,2.6rem)}
  .twa-crumb ol{font-size:var(--t-xs)}
  .twa-crumb li+li::before{margin-inline:7px}
  .twa-hero__act{flex-direction:column;align-self:stretch}
  .twa-hero__act .btn{justify-content:center}
  .twa-hero__meta{grid-template-columns:minmax(0,1fr);text-align:left}
  .twa-hero__meta>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-right:0;border-bottom:1px solid var(--line-2);text-align:left}
  .twa-hero__meta dd{margin-top:0;text-align:right}
  .twa-hero__tag{font-size:10px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){.twa-dev,.twa-chip,.twa-pp__img,.twa-pp__tx>span,.twa-pp__v>em{transition:none}}