/* Exact V13 phone render extracted from approved mockup. */
.reflection-main{
  inset:-12%;
  border-radius:64px;
  background:linear-gradient(116deg,transparent 0 25%,rgba(255,255,255,.10) 32%,rgba(255,255,255,.024) 38%,transparent 46% 100%);
  mix-blend-mode:screen;
  opacity:.5;
}
.reflection-soft{
  width:46%;
  height:74%;
  left:-10%;
  top:-11%;
  transform:rotate(18deg);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.07),transparent 70%);
  filter:blur(6px);
  opacity:.5;
}

/* ===== FRSHLD app screen =====
   Transplanted verbatim from 02_FRSHLD_WORKOUT_PREVIEW_FINAL.html.
   Every selector is namespaced under .frshld-screen and every px length is x2,
   so proportions are identical to the 390x844 design while the UI rasterizes at
   double density before the 3D tilt resamples it. Do not hand-edit sizes here;
   change the source file and re-double. */
.frshld-screen{
  --paper:#ebecee;
  --white:#f7f7f6;
  --page:#d6d8dc;
  --row:#f0f1f2;
  --surface:#f7f7f6;
  --charcoal:#24272d;
  --ink:#1b1e23;
  --red:#e5402a;
  --red-wash:rgba(229,64,42,.055);
  --line:rgba(27,30,35,.10);
  --line2:rgba(27,30,35,.20);
  --mute:rgba(27,30,35,.56);
  --faint:rgba(27,30,35,.36);
  --space:"Space Mono",ui-monospace,monospace;
  --inter:"Inter",system-ui,sans-serif;
  --archivo:"Archivo",Arial Black,sans-serif;
  --raj:"Rajdhani",Arial Narrow,sans-serif;
}

.frshld-screen{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  overflow:hidden;
  width:780px;
  height:calc(780px * var(--ui-aspect,2.208));
  transform:scale(var(--ui-scale,.5603));
  transform-origin:0 0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--inter);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.frshld-screen .island{
  position:absolute;
  z-index:30;
  top:20px;
  left:50%;
  width:192px;
  height:56px;
  transform:translateX(-50%);
  border-radius:32px;
  background:#090a0c;
}
.frshld-screen .statusbar{
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  right:0;
  height:96px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:0 48px 12px;
  font:700 24px/1 var(--space);
}
.frshld-screen .status-icons{display:flex;align-items:center;gap:12px}
.frshld-screen .topnav{
  position:absolute;
  z-index:18;
  top:96px;
  left:0;
  right:0;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 36px;
  border-bottom:2px solid var(--line);
  background:rgba(247,247,246,.985);
}
.frshld-screen .wordmark-row{display:flex;align-items:center}
.frshld-screen .wordmark{font:700 26px/1 var(--space);letter-spacing:3.64px;text-transform:uppercase}
.frshld-screen .wordmark-dot{width:16px;height:16px;margin-left:16px;background:var(--red)}
.frshld-screen .back{
  min-width:108px;
  min-height:64px;
  border:2px solid var(--line);
  background:rgba(27,30,35,.025);
  color:var(--mute);
  font:700 19px/24px var(--space);
  letter-spacing:2px;
  text-transform:uppercase;
}
.frshld-screen .preview-scroll{
  position:absolute;
  z-index:1;
  top:196px;
  left:0;
  right:0;
  bottom:156px;
  overflow:hidden;
  padding-bottom:192px;
  scrollbar-width:none;
}
.frshld-screen .preview-scroll::-webkit-scrollbar{display:none}
.frshld-screen .preview-head{padding:40px 36px 36px;border-bottom:2px solid var(--line);background:var(--surface)}
.frshld-screen .crumb{
  display:flex;
  justify-content:flex-start;
  gap:24px;
  margin-bottom:26px;
  color:var(--faint);
  font:700 19px/24px var(--space);
  letter-spacing:1.56px;
  text-transform:uppercase;
}
.frshld-screen .crumb .live{color:var(--red)}
.frshld-screen .title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.frshld-screen .preview-title{flex:1;margin:0;font:700 62px/68px var(--space);letter-spacing:-2.1px;text-transform:uppercase}
.frshld-screen .preview-tools{display:flex;flex:0 0 auto}
.frshld-screen .refresh{
  min-width:152px;
  height:72px;
  border:2px solid rgba(229,64,42,.72);
  background:rgba(229,64,42,.035);
  color:var(--red);
  font:700 20px/1 var(--space);
  letter-spacing:1.44px;
  text-transform:uppercase;
}
.frshld-screen .story{max-width:584px;margin:22px 0 0;color:var(--mute);font-size:23px;line-height:1.55}
.frshld-screen .specs{display:grid;grid-template-columns:repeat(2,1fr);margin:24px 28px 0;border:2px solid var(--line);background:rgba(247,247,246,.75)}
.frshld-screen .spec{min-height:124px;padding:24px 26px;border-right:2px solid var(--line)}
.frshld-screen .spec:last-child{border-right:0}
.frshld-screen .spec span{display:block;color:var(--faint);font:700 19px/24px var(--space);letter-spacing:1.1px;text-transform:uppercase}
.frshld-screen .spec strong{display:block;margin-top:14px;font:700 28px/34px var(--space);letter-spacing:-.56px;text-transform:uppercase}
.frshld-screen .session-map{display:grid;grid-template-columns:.95fr 1.1fr .95fr;margin:20px 28px 0;border:2px solid var(--line);background:rgba(247,247,246,.72)}
.frshld-screen .phase{min-height:112px;display:grid;place-items:center;padding:14px 10px;border-right:2px solid var(--line);color:var(--faint);text-align:center;font:700 19px/26px var(--space);letter-spacing:.9px;text-transform:uppercase}
.frshld-screen .phase:last-child{border-right:0}
.frshld-screen .phase-title{display:block;color:var(--ink);font-weight:700}
.frshld-screen .phase-sub{display:block;margin-top:4px;color:var(--faint);font-weight:700}
.frshld-screen .phase.main .phase-title,.frshld-screen .phase.main .phase-sub{color:var(--paper)}
.frshld-screen .phase.main{background:var(--charcoal);color:var(--paper);box-shadow:inset 0 2px 0 rgba(255,255,255,.045)}
.frshld-screen .coach-note{margin:24px 28px;padding:26px 28px;border:2px solid rgba(229,64,42,.18);border-left:6px solid var(--red);background:rgba(229,64,42,.035)}
.frshld-screen .coach-note b{display:block;margin-bottom:14px;font:700 19px/24px var(--space);letter-spacing:2px;text-transform:uppercase}
.frshld-screen .coach-note p{margin:0;color:var(--mute);font-size:20.4px;line-height:1.5}
.frshld-screen .optional-rail,.frshld-screen .programme{margin:0 28px 24px;border:2px solid var(--line);background:var(--surface);box-shadow:0 14px 36px -36px rgba(27,30,35,.48)}
.frshld-screen .rail-head,.frshld-screen .programme-head{
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 26px;
  border-bottom:2px solid var(--charcoal);
  background:var(--charcoal);
  color:var(--paper);
  text-transform:uppercase;
}
.frshld-screen .section-head-title{font:700 28px/34px var(--space);letter-spacing:-.56px}
.frshld-screen .section-head-meta{font:700 19px/24px var(--space);letter-spacing:1.1px;color:rgba(235,236,238,.72);text-align:right}
.frshld-screen .tag{padding:6px 10px;border:2px solid var(--red);color:var(--red);font:700 19px/24px var(--space);letter-spacing:1px;text-transform:uppercase}
.frshld-screen .simple-row{min-height:110px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border-bottom:2px solid var(--line)}
.frshld-screen .simple-row:last-child{border-bottom:0}
.frshld-screen .row-no{color:var(--red);font:700 19px/24px var(--space)}
.frshld-screen .row-copy strong{display:block;font:700 28px/34px var(--space);letter-spacing:-.56px;text-transform:uppercase}
.frshld-screen .row-copy small{display:block;margin-top:8px;color:var(--mute);font-size:22px;line-height:30px}
.frshld-screen .dose{font:700 20px/26px var(--space);white-space:nowrap;text-align:right}
.frshld-screen .exercise-row{
  min-height:184px;
  display:grid;
  grid-template-columns:60px minmax(0,1fr) 136px 108px;
  gap:20px;
  align-items:center;
  padding:24px 22px;
  border-bottom:2px solid var(--line);
  background:var(--surface);
}
.frshld-screen .exercise-row:nth-child(odd){background:var(--surface)}
.frshld-screen .exercise-row:last-child{border-bottom:0}
.frshld-screen .finisher-row,.frshld-screen .finisher-row:nth-child(odd){background:#eff0f1}
.frshld-screen .exercise-no{color:var(--red);font:700 19px/1 var(--space);align-self:start;padding-top:8px}
.frshld-screen .exercise-copy{min-width:0}
.frshld-screen .exercise-name{display:block;font:700 28px/34px var(--space);letter-spacing:-.6px;text-transform:uppercase}
.frshld-screen .exercise-role{display:block;margin-top:10px;color:var(--mute);font-size:22px;line-height:30px}
.frshld-screen .pair-note{display:none}
.frshld-screen .exercise-dose{text-align:right;font:700 20px/26px var(--space)}
.frshld-screen .exercise-dose span{display:block;margin-top:12px;color:var(--faint);font-size:19px;line-height:20px;letter-spacing:.6px;text-transform:uppercase}
.frshld-screen .swap{
  width:104px;
  height:64px;
  border:2px solid var(--line2);
  background:rgba(27,30,35,.025);
  color:rgba(27,30,35,.60);
  font:700 19px/24px var(--space);
  letter-spacing:1.16px;
  text-transform:uppercase;
}
.frshld-screen .sticky-action{position:absolute;z-index:22;left:0;right:0;bottom:156px;padding:22px 28px 24px;background:linear-gradient(to top,rgba(247,247,246,1) 76%,rgba(247,247,246,.94) 88%,transparent)}
.frshld-screen .start{width:100%;height:120px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border:2px solid #d93622;background:var(--red);color:var(--paper);box-shadow:0 20px 44px -32px rgba(229,64,42,.78);font:700 21px/1 var(--space);letter-spacing:2px;text-transform:uppercase}
.frshld-screen .start-arrow{width:48px;height:48px;display:block;color:var(--paper)}
.frshld-screen .start-arrow svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.frshld-screen .bottom{position:absolute;z-index:25;left:0;right:0;bottom:0;height:156px;display:flex;padding:12px 12px 14px;border-top:2px solid var(--line);background:rgba(247,247,246,.985)}
.frshld-screen .nav-item{flex:1;min-height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--faint);font:700 19px/20px var(--space);letter-spacing:0;text-transform:uppercase}
.frshld-screen .nav-icon{width:76px;height:68px;border-radius:24px;display:grid;place-items:center}
.frshld-screen .nav-icon svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.frshld-screen .nav-item.active{color:var(--ink)}
.frshld-screen .nav-item.active .nav-icon{background:transparent;color:var(--ink)}
.frshld-screen .nav-item.active .nav-icon svg{width:48px;height:48px;stroke-width:2.35}
.frshld-screen .nav-label{width:128px;margin-top:10px;white-space:normal;text-align:center;font-size:19px;line-height:20px}
.frshld-screen .home-indicator{position:absolute;z-index:30;left:50%;bottom:8px;width:240px;height:8px;transform:translateX(-50%);border-radius:8px;background:rgba(27,30,35,.24)}