/* On the Clock — The Studio (scoped, so no other page is affected).
   Geometry and type are expressed as fractions of --page, which is the mockup's
   4096px canvas mapped onto the viewport. That is what keeps the proportions
   the mockup specifies instead of a default that reads 1.3-1.6x too small. */
[data-view="studio2"]{
  --page:min(100vw,1560px);
  --paper:#fef8eb;
  --ink:#121212;
  --dark:#1e1e20;
  --bar:#161418;
  --lime:#d4fe3b;
  --lime-pale:#eaffa2;
  --muted:#5a5b54;
  --navy:#2a2f6b;
  --rule:#e6e0d2;
  --card-inset:6.1%;      /* panel + step rows, measured off the mockup */
  --app-inset:10%;        /* the app mock sits on a narrower column */
  --hero-inset:12.9%;

  /* type fractions of --page, matched to the mockup by measured width */
  --fs-hero-h1:0.04827;
  --fs-serif-head:0.03615;
  --fs-screen-head:0.04917;
  --fs-screen-sub:0.01722;
  --fs-ask-head:0.02663;
  --fs-ready-head:0.02341;
  --fs-close-head:.0241;
  --fs-team-head:.0264;
  --fs-panel-title:0.01502;
  --fs-code:.0120;
  --fs-input:0.00868;
  --fs-serif-sm:0.01384;
  --fs-ready-sub:0.00985;
  --fs-step-title:.0187;
  --fs-step-copy:.0116;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--paper); color:var(--ink);
}
[data-view="studio2"] .s-page,[data-view="studio2"] main{max-width:1560px;margin:0 auto}
[data-view="studio2"] h1,[data-view="studio2"] h2,[data-view="studio2"] h3{
  font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;margin:0}
[data-view="studio2"] p{margin:0;max-width:none}
[data-view="studio2"] img{display:block;width:100%;height:auto}

/* ---------- header over the hero ---------- */
[data-view="studio2"] .site-header{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;border:0;
  max-width:1560px;margin:0 auto;padding:calc(var(--page)*.016) var(--hero-inset)}
[data-view="studio2"] .site-header a,[data-view="studio2"] .site-header .wordmark{color:#fff}
[data-view="studio2"] .site-header .wordmark{font-size:calc(var(--page)*.0234);letter-spacing:-.05em}
[data-view="studio2"] .site-header nav{gap:calc(var(--page)*.021);font-size:calc(var(--page)*.0105);
  margin:0 auto 0 calc(var(--page)*.028)}
[data-view="studio2"] .site-header nav a{opacity:.94;padding:10px 0;display:inline-block}
[data-view="studio2"] .site-header nav a[aria-current]{border-bottom:2px solid #fff}
[data-view="studio2"] .site-header .nav-workspace{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85);
  border-radius:999px;padding:calc(var(--page)*.007) calc(var(--page)*.016);font-weight:600;font-size:calc(var(--page)*.0102)}
[data-view="studio2"] .site-header .menu-toggle{color:#fff;border-color:rgba(255,255,255,.6)}

/* ---------- hero ---------- */
[data-view="studio2"] .s-hero{position:relative;width:100%;aspect-ratio:4096/1240;min-height:calc(var(--page)*.2100);
  display:flex;align-items:flex-start;overflow:hidden;background:var(--dark);color:#fff}
[data-view="studio2"] .s-hero-img{position:absolute;inset:0;z-index:0}
[data-view="studio2"] .s-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
[data-view="studio2"] .s-hero-copy{position:relative;z-index:2;padding:calc(var(--page)*.0650) var(--hero-inset) 0;
  width:100%;box-sizing:border-box}
[data-view="studio2"] .s-eyebrow{display:inline-block;border:2px solid var(--lime);color:var(--lime);border-radius:999px;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-weight:600;
  font-size:calc(var(--page)*.0107);padding:calc(var(--page)*.0068) calc(var(--page)*.0156)}
[data-view="studio2"] .s-hero h1{font-size:calc(var(--page)*var(--fs-hero-h1));margin:calc(var(--page)*.0083) 0 0;
  letter-spacing:-.035em;line-height:.94}
[data-view="studio2"] .s-lead{font-family:var(--serif);font-size:calc(var(--page)*.0154);margin-top:calc(var(--page)*.0034)}
[data-view="studio2"] .s-badge{display:inline-block;background:var(--lime);color:#0c0c0c;border-radius:999px;font-weight:800;
  font-family:Clock,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;text-transform:uppercase;
  font-size:calc(var(--page)*.0177);padding:calc(var(--page)*.0044) calc(var(--page)*.0166);margin-top:calc(var(--page)*.0078);
  line-height:1.16}
[data-view="studio2"] .s-hero-note{font-family:var(--serif);font-size:calc(var(--page)*.0125);margin-top:calc(var(--page)*.0098);line-height:1.28}

/* ---------- we handle the technical bits ---------- */
[data-view="studio2"] .s-tech{padding:calc(var(--page)*.0164) 0 0}
[data-view="studio2"] .s-serif-head{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;text-align:center;
  font-size:calc(var(--page)*var(--fs-serif-head));line-height:1.06;padding:0 var(--card-inset);text-wrap:balance}
[data-view="studio2"] .s-panels{display:grid;grid-template-columns:1880fr 1726fr;margin:calc(var(--page)*.0176) var(--card-inset) 0;
  border-radius:calc(var(--page)*.0068);overflow:hidden}
[data-view="studio2"] .s-panel{position:relative;min-height:calc(var(--page)*.1944);box-sizing:border-box}
[data-view="studio2"] .s-panel-dark{background:var(--dark);color:#fff}
[data-view="studio2"] .s-panel-in{position:relative;z-index:2;padding:calc(var(--page)*.0150) calc(var(--page)*.0175);
  max-width:47%;box-sizing:border-box}
[data-view="studio2"] .s-panel-title{font-size:calc(var(--page)*var(--fs-panel-title));text-transform:uppercase;letter-spacing:-.005em}
[data-view="studio2"] .s-illus{font-family:var(--serif);font-size:calc(var(--page)*.0112);opacity:.82;margin-top:calc(var(--page)*.0024)}
[data-view="studio2"] .s-code{font-family:var(--mono);font-size:calc(var(--page)*var(--fs-code));margin:calc(var(--page)*.0132) 0 0;line-height:1.62}
[data-view="studio2"] .s-code div{display:block}
[data-view="studio2"] .s-code dt,[data-view="studio2"] .s-code dd{display:inline}
[data-view="studio2"] .s-code dt::after{content:" "}
[data-view="studio2"] .s-code dt{color:#fff;margin:0}
[data-view="studio2"] .s-code dd{margin:0;color:#fff}
[data-view="studio2"] .s-code dd.u{text-decoration:underline;text-underline-offset:.22em}
[data-view="studio2"] .s-panel-foot{font-family:var(--serif);font-size:calc(var(--page)*.0091);line-height:1.32;
  border-top:1px solid rgba(255,255,255,.34);padding-top:calc(var(--page)*.0059);margin-top:calc(var(--page)*.0088);
  width:190%;max-width:none}
[data-view="studio2"] .s-note{position:absolute;z-index:3;width:auto}
[data-view="studio2"] .s-note-code{top:1.3%;left:46.6%;height:54%;width:auto}
[data-view="studio2"] .s-curtain{position:absolute;top:0;right:0;bottom:0;width:21.8%;z-index:1;overflow:hidden}
[data-view="studio2"] .s-curtain img{width:100%;height:100%;object-fit:cover}
[data-view="studio2"] .s-panel-lime{position:relative;background:var(--lime-pale);color:var(--ink);
  padding:calc(var(--page)*.0186) calc(var(--page)*.0205);padding-right:19%}
[data-view="studio2"] .s-lime-title{color:#1a1a1a}
[data-view="studio2"] .s-bubble{display:flex;gap:calc(var(--page)*.0107);align-items:center;margin-top:calc(var(--page)*.0142)}
[data-view="studio2"] .s-bubble p{background:#fff;border-radius:calc(var(--page)*.0059);padding:calc(var(--page)*.0107) calc(var(--page)*.0132);
  font-size:calc(var(--page)*.0117);line-height:1.34;max-width:34ch;box-shadow:0 1px 3px #0000000f}
[data-view="studio2"] .s-avatar{flex:none;width:calc(var(--page)*.0450);height:calc(var(--page)*.0450);border-radius:50%;
  background:#d9d9db;display:grid;place-items:center;color:#3d3d3f}
[data-view="studio2"] .s-avatar svg{width:60%;height:60%}
[data-view="studio2"] .s-avatar-agent{background:#e2ddf5;color:#6c4fd0}
[data-view="studio2"] .s-note-lang{top:18.8%;right:1%;height:34%;width:auto}

/* ---------- your screen ---------- */
[data-view="studio2"] .s-screen{padding:calc(var(--page)*.0225) 0 0}
[data-view="studio2"] .s-screen-head{text-align:center;font-size:calc(var(--page)*var(--fs-screen-head));letter-spacing:-.035em}
[data-view="studio2"] .s-screen-sub{font-family:var(--serif);text-align:center;font-size:calc(var(--page)*var(--fs-screen-sub));
  margin-top:calc(var(--page)*.0083);padding:0 var(--card-inset)}
[data-view="studio2"] .s-app-outer{position:relative;margin-top:calc(var(--page)*.0161)}
[data-view="studio2"] .s-anno{position:absolute;z-index:3;width:calc(var(--page)*.0908)}
[data-view="studio2"] .s-anno-ask{left:calc(var(--page)*.0146);top:calc(var(--page)*.0195)}
[data-view="studio2"] .s-anno-check{left:calc(var(--page)*.0146);top:calc(var(--page)*.3298)}
[data-view="studio2"] .s-anno-approve{right:calc(var(--page)*.0010);top:calc(var(--page)*.3474);width:calc(var(--page)*.0972)}
[data-view="studio2"] .s-app{margin:0 var(--app-inset);background:#fff;border:2px solid #17161a;border-radius:calc(var(--page)*.0068);
  overflow:hidden;box-shadow:0 calc(var(--page)*.0034) calc(var(--page)*.0098) #0000000f}
[data-view="studio2"] .s-app-bar{background:var(--bar);color:#fff;display:flex;align-items:center;gap:calc(var(--page)*.0088);
  padding:calc(var(--page)*.0088) calc(var(--page)*.0132);font-family:var(--mono);font-size:calc(var(--page)*.0083);letter-spacing:.08em}
[data-view="studio2"] .s-app-brand{font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.03em;font-size:calc(var(--page)*.0107)}
[data-view="studio2"] .s-app-div{width:1px;height:calc(var(--page)*.0117);background:#ffffff4d}
[data-view="studio2"] .s-app-where{font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:calc(var(--page)*.0107)}
[data-view="studio2"] .s-app-right{margin-left:auto;display:flex;align-items:center;gap:calc(var(--page)*.0107)}
[data-view="studio2"] .s-app-meta{opacity:.78;font-size:calc(var(--page)*.0073)}
[data-view="studio2"] .s-demo{background:var(--lime);color:#111;border-radius:999px;font-weight:700;
  padding:calc(var(--page)*.0044) calc(var(--page)*.0107);font-size:calc(var(--page)*.0076);letter-spacing:.08em}
[data-view="studio2"] .s-app-body{padding:calc(var(--page)*.0156) calc(var(--page)*.0225) calc(var(--page)*.0176)}
[data-view="studio2"] .s-ask-head{font-size:calc(var(--page)*var(--fs-ask-head))}
[data-view="studio2"] .s-ask-row{display:grid;grid-template-columns:695fr 185fr;gap:2.1%;
  align-items:start;margin-top:calc(var(--page)*.0112)}
[data-view="studio2"] .s-input{border:1.5px solid #d9d3c6;border-radius:calc(var(--page)*.0044);background:#fffcf8;color:#767268;
  padding:calc(var(--page)*.0117) calc(var(--page)*.0107);font-size:calc(var(--page)*var(--fs-input))}
[data-view="studio2"] .s-send{display:flex;align-items:center;gap:calc(var(--page)*.0083);margin-top:calc(var(--page)*.0098);font-size:calc(var(--page)*.0098)}
[data-view="studio2"] .s-agent-pill{display:inline-flex;align-items:center;gap:.5em;border:1.5px solid #cfc9bc;border-radius:999px;
  padding:calc(var(--page)*.0054) calc(var(--page)*.0098);font-weight:700}
[data-view="studio2"] .s-preview{margin-left:auto;background:var(--lime);border-radius:calc(var(--page)*.0037);font-weight:700;
  padding:calc(var(--page)*.0059) calc(var(--page)*.0107)}
[data-view="studio2"] .s-chips{display:flex;flex-wrap:wrap;gap:calc(var(--page)*.0068);list-style:none;padding:0;margin:calc(var(--page)*.0098) 0 0}
[data-view="studio2"] .s-chip{display:inline-flex;align-items:center;gap:.55em;border:1.5px solid #d9d3c6;border-radius:999px;
  padding:calc(var(--page)*.0059) calc(var(--page)*.0107);font-size:calc(var(--page)*.0095)}
[data-view="studio2"] .s-chip svg{width:calc(var(--page)*.0117);height:calc(var(--page)*.0117);flex:none}
[data-view="studio2"] .s-tip{background:#fdf6ec;border-radius:calc(var(--page)*.0044);padding:calc(var(--page)*.0107);
  display:flex;gap:calc(var(--page)*.0068);font-size:calc(var(--page)*.0095);line-height:1.34}
[data-view="studio2"] .s-bulb svg{width:calc(var(--page)*.0132);height:calc(var(--page)*.0132)}
[data-view="studio2"] .s-team-head{display:flex;align-items:baseline;justify-content:space-between;gap:1em;margin-top:calc(var(--page)*.0176)}
[data-view="studio2"] .s-team-head h3{font-size:calc(var(--page)*var(--fs-team-head))}
[data-view="studio2"] .s-team-head p{font-size:calc(var(--page)*.0095);color:#4a4b44}
[data-view="studio2"] .s-team{list-style:none;padding:0;margin:calc(var(--page)*.0098) 0 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid #e2dccd;border-radius:calc(var(--page)*.0044);overflow:hidden}
[data-view="studio2"] .s-team-card{background:#fff;display:flex;flex-direction:column}
[data-view="studio2"] .s-team-card+.s-team-card{border-left:1.5px solid #e2dccd}
[data-view="studio2"] .s-team-card img{padding:calc(var(--page)*.0044) calc(var(--page)*.0044) 0}
[data-view="studio2"] .s-team-card img{aspect-ratio:1000/413;object-fit:cover}
[data-view="studio2"] .s-team-body{padding:calc(var(--page)*.0073) calc(var(--page)*.0088) calc(var(--page)*.0088);
  display:flex;flex-direction:column;flex:1}
[data-view="studio2"] .s-team-name{font-weight:700;font-size:calc(var(--page)*.0102);display:flex;align-items:center;gap:.5em}
[data-view="studio2"] .s-team-status{font-size:calc(var(--page)*.0090);color:#4a4b44;display:flex;align-items:center;gap:.5em;margin-top:calc(var(--page)*.0044)}
[data-view="studio2"] .s-dot{width:.62em;height:.62em;border-radius:50%;flex:none}
[data-view="studio2"] .s-dot-ready{background:#2fae55}
[data-view="studio2"] .s-dot-working{background:#e8a52a}
[data-view="studio2"] .s-glyph{width:.95em;height:.95em;flex:none;border-radius:2px;background:#9a6cf0}
[data-view="studio2"] .s-glyph-1{background:#8f7ae6;clip-path:polygon(12% 46%,42% 78%,90% 14%,100% 30%,44% 100%,0 58%)}
[data-view="studio2"] .s-glyph-0{clip-path:polygon(38% 0,62% 0,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0 62%,0 38%,38% 38%)}
[data-view="studio2"] .s-glyph-2{background:#f0432a;clip-path:polygon(0 0,28% 0,28% 66%,72% 66%,72% 0,100% 0,100% 100%,0 100%)}
[data-view="studio2"] .s-open{align-self:flex-start;border:1.5px solid #1b1a1e;border-radius:calc(var(--page)*.0037);
  padding:calc(var(--page)*.0054) calc(var(--page)*.0098);font-size:calc(var(--page)*.0090);font-weight:600;margin-top:auto;
  padding-top:calc(var(--page)*.0054)}
[data-view="studio2"] .s-review-row{display:grid;grid-template-columns:1826fr 1205fr;gap:calc(var(--page)*.0098);margin-top:calc(var(--page)*.0132)}
[data-view="studio2"] .s-ready,[data-view="studio2"] .s-example{border:1.5px solid #e2dccd;border-radius:calc(var(--page)*.0044);
  padding:calc(var(--page)*.0117);background:#fffefa}
[data-view="studio2"] .s-ready h3{font-size:calc(var(--page)*var(--fs-ready-head))}
[data-view="studio2"] .s-ready-sub{font-size:calc(var(--page)*var(--fs-ready-sub));margin-top:calc(var(--page)*.0037)}
[data-view="studio2"] .s-item{display:grid;grid-template-columns:calc(var(--page)*.1063) minmax(0,1fr) auto;gap:calc(var(--page)*.0098);
  align-items:center;border:1px solid #ece6d8;border-radius:calc(var(--page)*.0037);padding:calc(var(--page)*.0068);margin-top:calc(var(--page)*.0088)}
[data-view="studio2"] .s-item img{border-radius:calc(var(--page)*.0024);aspect-ratio:435/208;object-fit:cover}
[data-view="studio2"] .s-item-title{font-weight:700;font-size:calc(var(--page)*.0107)}
[data-view="studio2"] .s-item-who{display:flex;align-items:center;gap:.5em;font-size:calc(var(--page)*.0095);margin-top:calc(var(--page)*.0029)}
[data-view="studio2"] .s-item-desc{font-family:var(--serif);color:var(--navy);font-size:calc(var(--page)*.0095);margin-top:calc(var(--page)*.0029)}
[data-view="studio2"] .s-btn-lime{background:var(--lime);border-radius:calc(var(--page)*.0037);font-weight:700;white-space:nowrap;
  padding:calc(var(--page)*.0068) calc(var(--page)*.0107);font-size:calc(var(--page)*.0098)}
[data-view="studio2"] .s-serif-sm{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;font-size:calc(var(--page)*var(--fs-serif-sm))}
[data-view="studio2"] .s-letter{border:1px solid #e6e0d2;border-radius:calc(var(--page)*.0029);background:#fcfdfc;
  padding:calc(var(--page)*.0107);margin-top:calc(var(--page)*.0088);font-size:calc(var(--page)*.0093);line-height:1.5}
[data-view="studio2"] .s-letter p+p{margin-top:calc(var(--page)*.0068)}
[data-view="studio2"] .s-actions{display:flex;flex-wrap:wrap;gap:calc(var(--page)*.0068);margin-top:calc(var(--page)*.0098);align-items:center}
[data-view="studio2"] .s-btn-ghost{border:1.5px solid #1b1a1e;border-radius:calc(var(--page)*.0037);font-weight:600;
  padding:calc(var(--page)*.0068) calc(var(--page)*.0107);font-size:calc(var(--page)*.0098)}
[data-view="studio2"] .s-btn-plain{font-size:calc(var(--page)*.0098);color:#3d3e38}
[data-view="studio2"] .s-approve-note{font-size:calc(var(--page)*.0083);color:#6a6b62;margin-top:calc(var(--page)*.0068)}
[data-view="studio2"] .s-inprogress{display:flex;align-items:center;gap:calc(var(--page)*.0117);margin-top:calc(var(--page)*.0132);
  border-top:1.5px solid #e2dccd;padding-top:calc(var(--page)*.0112);font-size:calc(var(--page)*.0098)}
[data-view="studio2"] .s-inprogress h3{font-size:calc(var(--page)*.0142)}
[data-view="studio2"] .s-ip-item{display:inline-flex;align-items:center;gap:.55em}
[data-view="studio2"] .s-doc svg{width:calc(var(--page)*.0122);height:calc(var(--page)*.0122)}
[data-view="studio2"] .s-view{margin-left:auto;border:1.5px solid #1b1a1e;border-radius:calc(var(--page)*.0037);font-weight:600;
  padding:calc(var(--page)*.0059) calc(var(--page)*.0107)}

/* ---------- numbered row ---------- */
[data-view="studio2"] .s-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:calc(var(--page)*.0186) var(--card-inset) 0;padding:0;gap:calc(var(--page)*.0146)}
[data-view="studio2"] .s-steps li{display:flex;align-items:center;gap:calc(var(--page)*.0117);padding-left:calc(var(--page)*.0117)}
[data-view="studio2"] .s-steps li+li{border-left:1px solid var(--rule)}
[data-view="studio2"] .s-num{flex:none;width:calc(var(--page)*.0420);height:calc(var(--page)*.0420);border-radius:50%;
  background:var(--lime);display:grid;place-items:center;font-family:Clock,"Helvetica Neue",Arial,sans-serif;
  font-weight:800;font-size:calc(var(--page)*.0195);letter-spacing:-.04em}
[data-view="studio2"] .s-step-copy b{display:block;font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-weight:800;
  letter-spacing:-.02em;font-size:calc(var(--page)*var(--fs-step-title))}
[data-view="studio2"] .s-step-copy span{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-step-copy))}

/* ---------- closing band ---------- */
[data-view="studio2"] .s-close{position:relative;margin-top:calc(var(--page)*.0225);aspect-ratio:4096/483;
  min-height:calc(var(--page)*.1000);display:flex;align-items:center;overflow:hidden;background:var(--dark);color:#fff}
[data-view="studio2"] .s-close-img{position:absolute;inset:0;z-index:0}
[data-view="studio2"] .s-close-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
[data-view="studio2"] .s-close-copy{position:relative;z-index:2;padding:0 0 0 var(--card-inset);
  width:100%;box-sizing:border-box}
[data-view="studio2"] .s-close h2{font-size:calc(var(--page)*var(--fs-close-head));letter-spacing:-.03em;max-width:none;text-wrap:nowrap}
[data-view="studio2"] .s-close-cta{display:flex;flex-wrap:wrap;gap:calc(var(--page)*.0117);margin-top:calc(var(--page)*.0132)}
[data-view="studio2"] .s-cta-lime,[data-view="studio2"] .s-cta-ghost{border-radius:calc(var(--page)*.0044);font-weight:700;
  padding:calc(var(--page)*.0083) calc(var(--page)*.0146);font-size:calc(var(--page)*.0122);text-decoration:none;display:inline-block}
[data-view="studio2"] .s-cta-lime{background:var(--lime);color:#0c0c0c}
[data-view="studio2"] .s-cta-ghost{border:1.5px solid #fff;color:#fff}
[data-view="studio2"] .s-close-fine{font-size:calc(var(--page)*.0079);margin-top:calc(var(--page)*.0098);opacity:.9;
  max-width:none;white-space:nowrap}

/* ---------- footer bar ---------- */
[data-view="studio2"] .site-footer{background:#111013;color:#fff;padding:calc(var(--page)*.0107) 0;border:0;display:block;margin:0}
[data-view="studio2"] .s-foot{max-width:1560px;margin:0 auto;display:flex;align-items:center;gap:calc(var(--page)*.0146);
  padding:0 var(--card-inset)}
[data-view="studio2"] .s-foot .wordmark{font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.045em;
  font-size:calc(var(--page)*.0173);color:#fff;text-decoration:none}
[data-view="studio2"] .s-foot-div{width:1px;height:calc(var(--page)*.0146);background:#ffffff40}
[data-view="studio2"] .s-foot-mono{font-family:var(--mono);font-size:calc(var(--page)*.0083);letter-spacing:.14em}
[data-view="studio2"] .s-foot-right{margin-left:auto}

/* ---------- responsive ----------
   The mockup is a desktop composition. Below 900px the fixed hero and closing
   aspect ratios would crush their copy, so both revert to natural height with
   the photograph covering behind — the scene still flows behind the text,
   which is the one thing that must not change. */
@media (max-width:900px){
  [data-view="studio2"]{--card-inset:5.5%;--app-inset:5.5%;--hero-inset:6%;--page:min(100vw,900px)}
  /* Stack the photograph and the copy in one grid cell: the row takes whichever
     is taller, so the copy can never be clipped and the scene still runs behind. */
  [data-view="studio2"] .s-hero,[data-view="studio2"] .s-close{aspect-ratio:auto;min-height:0;display:grid}
  [data-view="studio2"] .s-hero-img,[data-view="studio2"] .s-close-img{position:relative;inset:auto;
    grid-area:1/1;height:100%;width:100%}
  [data-view="studio2"] .s-hero-img img,[data-view="studio2"] .s-close-img img{height:100%;width:100%;object-fit:cover}
  [data-view="studio2"] .s-hero-copy,[data-view="studio2"] .s-close-copy{grid-area:1/1}
  [data-view="studio2"] .s-hero-copy{padding:calc(var(--page)*.155) var(--hero-inset) calc(var(--page)*.055)}
  [data-view="studio2"] .s-close-copy{padding:calc(var(--page)*.055) var(--card-inset)}
  [data-view="studio2"] .s-panels{grid-template-columns:1fr}
  [data-view="studio2"] .s-panel{min-height:0}
  [data-view="studio2"] .s-panel-in{max-width:none;padding:calc(var(--page)*.038) calc(var(--page)*.040)}
  [data-view="studio2"] .s-curtain{display:none}
  [data-view="studio2"] .s-panel-foot{width:auto}
  [data-view="studio2"] .s-note-code{position:static;height:auto;width:66%;margin:0 auto calc(var(--page)*.030)}
  [data-view="studio2"] .s-panel-lime{padding:calc(var(--page)*.038) calc(var(--page)*.040)}
  [data-view="studio2"] .s-note-lang{position:static;height:auto;width:40%;margin-top:calc(var(--page)*.026)}
  [data-view="studio2"] .s-ask-row{grid-template-columns:1fr;gap:calc(var(--page)*.024)}
  [data-view="studio2"] .s-team{grid-template-columns:1fr}
  [data-view="studio2"] .s-team-card+.s-team-card{border-left:0;border-top:1.5px solid #e2dccd}
  [data-view="studio2"] .s-review-row{grid-template-columns:1fr;gap:calc(var(--page)*.024)}
  [data-view="studio2"] .s-steps{grid-template-columns:1fr;gap:0}
  [data-view="studio2"] .s-steps li{padding:calc(var(--page)*.026) 0 calc(var(--page)*.026) calc(var(--page)*.010)}
  [data-view="studio2"] .s-steps li+li{border-left:0;border-top:1px solid var(--rule)}
  /* the inset moves onto the wrapper so a 100% flex-basis cannot overflow it */
  [data-view="studio2"] .s-app-outer{display:flex;flex-direction:column;padding:0 var(--app-inset);box-sizing:border-box}
  [data-view="studio2"] .s-app{order:-1;margin:0}
  /* the three handwritten notes become one row under the screenshot */
  [data-view="studio2"] .s-anno{position:static;width:30%;margin:calc(var(--page)*.030) 0 0}
  [data-view="studio2"] .s-anno-ask{order:1}
  [data-view="studio2"] .s-anno-check{order:2}
  [data-view="studio2"] .s-anno-approve{order:3;width:32%}
  [data-view="studio2"] .s-app-outer{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
  [data-view="studio2"] .s-app{flex:0 0 100%;box-sizing:border-box}
  [data-view="studio2"] .s-inprogress{flex-wrap:wrap;row-gap:calc(var(--page)*.012)}
  [data-view="studio2"] .s-view{margin-left:0}
  [data-view="studio2"] .s-close-fine{white-space:normal}
  [data-view="studio2"] .s-close h2{text-wrap:balance}
}
@media (max-width:620px){
  [data-view="studio2"]{--page:min(100vw,620px)}
  /* Below this width the app mock is the whole point of the page, so its text
     stops scaling with the canvas and sits at sizes that stay readable. */
  [data-view="studio2"] .s-hero h1{font-size:calc(var(--page)*.086)}
  [data-view="studio2"] .s-lead{font-size:calc(var(--page)*.030);margin-top:calc(var(--page)*.014)}
  [data-view="studio2"] .s-hero-note{font-size:calc(var(--page)*.027);margin-top:calc(var(--page)*.020)}
  [data-view="studio2"] .s-badge{font-size:calc(var(--page)*.036);padding:calc(var(--page)*.011) calc(var(--page)*.030);
    margin-top:calc(var(--page)*.020)}
  [data-view="studio2"] .s-eyebrow{font-size:calc(var(--page)*.021);padding:calc(var(--page)*.011) calc(var(--page)*.024)}
  [data-view="studio2"] .s-serif-head,[data-view="studio2"] .s-screen-head{font-size:calc(var(--page)*.068)}
  [data-view="studio2"] .s-screen-sub{font-size:calc(var(--page)*.031)}
  [data-view="studio2"] .s-panel-title{font-size:calc(var(--page)*.042)}
  [data-view="studio2"] .s-code{font-size:calc(var(--page)*.031);line-height:1.75}
  [data-view="studio2"] .s-illus{font-size:calc(var(--page)*.027)}
  [data-view="studio2"] .s-panel-foot{font-size:calc(var(--page)*.027)}
  [data-view="studio2"] .s-bubble p{font-size:calc(var(--page)*.031);max-width:none;padding:calc(var(--page)*.026) calc(var(--page)*.030)}
  [data-view="studio2"] .s-avatar{width:calc(var(--page)*.090);height:calc(var(--page)*.090)}
  [data-view="studio2"] .s-app-bar{padding:calc(var(--page)*.022) calc(var(--page)*.026);gap:calc(var(--page)*.018)}
  [data-view="studio2"] .s-app-brand,[data-view="studio2"] .s-app-where{font-size:calc(var(--page)*.030)}
  [data-view="studio2"] .s-app-meta{display:none}
  [data-view="studio2"] .s-demo{font-size:calc(var(--page)*.022);padding:calc(var(--page)*.010) calc(var(--page)*.022)}
  [data-view="studio2"] .s-app-body{padding:calc(var(--page)*.034) calc(var(--page)*.034) calc(var(--page)*.040)}
  [data-view="studio2"] .s-ask-head{font-size:calc(var(--page)*.046)}
  [data-view="studio2"] .s-input{font-size:calc(var(--page)*.034);padding:calc(var(--page)*.030) calc(var(--page)*.026)}
  [data-view="studio2"] .s-send{font-size:calc(var(--page)*.032);flex-wrap:wrap;gap:calc(var(--page)*.018)}
  [data-view="studio2"] .s-agent-pill{padding:calc(var(--page)*.014) calc(var(--page)*.024)}
  [data-view="studio2"] .s-preview{margin-left:0;padding:calc(var(--page)*.016) calc(var(--page)*.026)}
  [data-view="studio2"] .s-chips{gap:calc(var(--page)*.016)}
  [data-view="studio2"] .s-chip{font-size:calc(var(--page)*.030);padding:calc(var(--page)*.016) calc(var(--page)*.026)}
  [data-view="studio2"] .s-chip svg{width:calc(var(--page)*.036);height:calc(var(--page)*.036)}
  [data-view="studio2"] .s-tip{font-size:calc(var(--page)*.030);padding:calc(var(--page)*.026);gap:calc(var(--page)*.020)}
  [data-view="studio2"] .s-bulb svg{width:calc(var(--page)*.040);height:calc(var(--page)*.040)}
  [data-view="studio2"] .s-team-head{flex-direction:column;align-items:flex-start;gap:.15em;margin-top:calc(var(--page)*.040)}
  [data-view="studio2"] .s-team-head h3{font-size:calc(var(--page)*.050)}
  [data-view="studio2"] .s-team-head p{font-size:calc(var(--page)*.029)}
  [data-view="studio2"] .s-team-body{padding:calc(var(--page)*.026) calc(var(--page)*.028) calc(var(--page)*.030)}
  [data-view="studio2"] .s-team-name{font-size:calc(var(--page)*.034)}
  [data-view="studio2"] .s-team-status{font-size:calc(var(--page)*.029)}
  [data-view="studio2"] .s-open{font-size:calc(var(--page)*.029);padding:calc(var(--page)*.016) calc(var(--page)*.026);
    margin-top:calc(var(--page)*.022)}
  [data-view="studio2"] .s-ready,[data-view="studio2"] .s-example{padding:calc(var(--page)*.030)}
  [data-view="studio2"] .s-ready h3{font-size:calc(var(--page)*.046)}
  [data-view="studio2"] .s-ready-sub{font-size:calc(var(--page)*.029)}
  [data-view="studio2"] .s-serif-sm{font-size:calc(var(--page)*.040)}
  [data-view="studio2"] .s-item{grid-template-columns:calc(var(--page)*.24) minmax(0,1fr);row-gap:calc(var(--page)*.020);
    padding:calc(var(--page)*.020);gap:calc(var(--page)*.024)}
  [data-view="studio2"] .s-item .s-btn-lime{grid-column:1/-1;text-align:center}
  [data-view="studio2"] .s-item-title{font-size:calc(var(--page)*.033)}
  [data-view="studio2"] .s-item-who,[data-view="studio2"] .s-item-desc{font-size:calc(var(--page)*.029)}
  [data-view="studio2"] .s-letter{font-size:calc(var(--page)*.029);padding:calc(var(--page)*.026)}
  [data-view="studio2"] .s-btn-lime,[data-view="studio2"] .s-btn-ghost,[data-view="studio2"] .s-btn-plain,
  [data-view="studio2"] .s-view{font-size:calc(var(--page)*.030);padding:calc(var(--page)*.018) calc(var(--page)*.028)}
  [data-view="studio2"] .s-btn-plain{padding:0}
  [data-view="studio2"] .s-approve-note{font-size:calc(var(--page)*.026)}
  [data-view="studio2"] .s-inprogress{font-size:calc(var(--page)*.030);gap:calc(var(--page)*.026);
    margin-top:calc(var(--page)*.030);padding-top:calc(var(--page)*.028)}
  [data-view="studio2"] .s-inprogress h3{font-size:calc(var(--page)*.040)}
  [data-view="studio2"] .s-doc svg{width:calc(var(--page)*.036);height:calc(var(--page)*.036)}
  [data-view="studio2"] .s-num{width:calc(var(--page)*.098);height:calc(var(--page)*.098);font-size:calc(var(--page)*.046)}
  [data-view="studio2"] .s-step-copy b{font-size:calc(var(--page)*.042)}
  [data-view="studio2"] .s-step-copy span{font-size:calc(var(--page)*.030)}
  [data-view="studio2"] .s-close h2{font-size:calc(var(--page)*.056)}
  [data-view="studio2"] .s-close-cta{flex-direction:column;gap:calc(var(--page)*.022)}
  [data-view="studio2"] .s-cta-lime,[data-view="studio2"] .s-cta-ghost{font-size:calc(var(--page)*.034);text-align:center;
    padding:calc(var(--page)*.026) calc(var(--page)*.030)}
  [data-view="studio2"] .s-close-fine{font-size:calc(var(--page)*.026)}
  [data-view="studio2"] .s-foot{flex-wrap:wrap;gap:calc(var(--page)*.022)}
  [data-view="studio2"] .s-foot .wordmark{font-size:calc(var(--page)*.048)}
  [data-view="studio2"] .s-foot-mono{font-size:calc(var(--page)*.022)}
  [data-view="studio2"] .s-foot-div{display:none}
  [data-view="studio2"] .s-foot-right{margin-left:0;width:100%}
  [data-view="studio2"] .s-note-code{width:78%}
  [data-view="studio2"] .s-note-lang{width:46%}
  [data-view="studio2"] .s-anno{width:31%}
  [data-view="studio2"] .s-anno-approve{width:32%}
}