/* On the Clock — How it works (scoped, so no other page is affected).
   Geometry and type are fractions of --page, which maps the mockup's 4096px
   canvas onto the viewport. Type fractions were set by measuring each string's
   width in the mockup against the rendered width, not by eye. */
[data-view="how2"]{
  --page:min(100vw,1560px);
  --paper:#fffefa;
  --ink:#14140f;
  --body:#2a2a24;
  --muted:#5a5b54;
  --dark:#1f2326;
  --foot:#1d2125;
  --lime:#daf938;
  --rule:#e7e2d6;
  --gut:2.37%;         /* card rows, measured off the mockup */
  --hero-inset:13.16%; /* header and hero copy sit on a narrower inset */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* type fractions of --page */
  --fs-h1:.03828;
  --fs-hero-sub:0.01543;
  --fs-intro:0.02993;
  --fs-intro-sub:0.0228;
  --fs-step-title:.02671;
  --fs-step-para:0.01566;
  --fs-link:0.01045;
  --fs-note:0.01583;
  --fs-ex-head:0.03164;
  --fs-caption:0.01632;
  --fs-strip:0.02298;
  --fs-close-head:0.0285;
  --fs-close-sub:0.01523;

  background:var(--paper); color:var(--ink);
}
[data-view="how2"] main{max-width:1560px;margin:0 auto}
[data-view="how2"] h1,[data-view="how2"] h2,[data-view="how2"] h3{
  font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;margin:0}
[data-view="how2"] p{margin:0;max-width:none}
[data-view="how2"] img{display:block;width:100%;height:auto}

/* ---------- header floating over the hero ---------- */
[data-view="how2"] .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)*.0155) var(--hero-inset)}
[data-view="how2"] .site-header a,[data-view="how2"] .site-header .wordmark{color:#fff}
[data-view="how2"] .site-header .wordmark{font-size:calc(var(--page)*.0232);letter-spacing:-.05em}
[data-view="how2"] .site-header nav{gap:calc(var(--page)*.0205);font-size:calc(var(--page)*.0104);
  margin:0 auto 0 calc(var(--page)*.028)}
[data-view="how2"] .site-header nav a{opacity:.95;padding:10px 0;display:inline-block}
[data-view="how2"] .site-header nav a[aria-current]{border-bottom:2px solid var(--lime)}
[data-view="how2"] .site-header .nav-workspace{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85);
  border-radius:999px;padding:calc(var(--page)*.0068) calc(var(--page)*.0156);font-weight:600;font-size:calc(var(--page)*.0101)}
[data-view="how2"] .site-header .menu-toggle{color:#fff;border-color:rgba(255,255,255,.6)}

/* ---------- hero ---------- */
[data-view="how2"] .h2-hero{position:relative;width:100%;aspect-ratio:4096/1306;min-height:calc(var(--page)*.2200);
  display:flex;align-items:flex-start;overflow:hidden;background:#15161a;color:#fff}
[data-view="how2"] .h2-hero-img{position:absolute;inset:0;z-index:0}
[data-view="how2"] .h2-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* The copy sits on the real scene, so it must stop before the artwork's own
   "Marketing Manager" chair label, whose ink starts at 0.4658 of the width.
   This cap is the backstop; --fs-h1 is what actually sets the headline. */
[data-view="how2"] .h2-hero-copy{position:relative;z-index:2;width:100%;box-sizing:border-box;
  padding:calc(var(--page)*.0625) var(--hero-inset) 0}
[data-view="how2"] .h2-hero-copy>*{max-width:calc(var(--page)*.3300)}
[data-view="how2"] .h2-eyebrow{display:inline-block;border:2px solid var(--lime);color:var(--lime);border-radius:999px;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  font-size:calc(var(--page)*.0105);padding:calc(var(--page)*.0019) calc(var(--page)*.0146);line-height:1.2}
[data-view="how2"] .h2-hero h1{font-size:calc(var(--page)*var(--fs-h1));margin-top:calc(var(--page)*.0129);
  letter-spacing:-.035em;line-height:.956}
[data-view="how2"] .h2-hero-sub{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-hero-sub));
  line-height:1.26;margin-top:calc(var(--page)*.0083)}
[data-view="how2"] .h2-cta{display:inline-flex;align-items:center;gap:.7em;background:var(--lime);color:#14140f;
  border-radius:999px;text-decoration:none;font-weight:800;font-family:Clock,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.02em;font-size:calc(var(--page)*.0215);
  padding:calc(var(--page)*.0039) calc(var(--page)*.0205);margin-top:calc(var(--page)*.0090);line-height:1.16}

/* ---------- intro ---------- */
[data-view="how2"] .h2-intro{padding:calc(var(--page)*.0075) var(--gut) 0;text-align:center}
[data-view="how2"] .h2-intro h2{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;
  font-size:calc(var(--page)*var(--fs-intro));line-height:1.05;text-wrap:balance}
[data-view="how2"] .h2-intro p{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-intro-sub));
  margin-top:calc(var(--page)*.0068);color:var(--body)}

/* ---------- the three steps ---------- */
[data-view="how2"] .h2-step{display:grid;align-items:center;gap:1.69%;
  padding:calc(var(--page)*.0080) var(--gut) 0}
[data-view="how2"] .h2-step-a{grid-template-columns:51.2fr 47.1fr}
[data-view="how2"] .h2-step-b{grid-template-columns:47.8fr 50.5fr}
[data-view="how2"] .h2-step-c{grid-template-columns:53.5fr 44.8fr}
[data-view="how2"] .h2-step-b .h2-step-media{order:2}
[data-view="how2"] .h2-step-b .h2-step-copy{order:1}
[data-view="how2"] .h2-step-media img{border-radius:calc(var(--page)*.0044)}
[data-view="how2"] .h2-step h2{display:flex;align-items:center;gap:calc(var(--page)*.0100);
  font-size:calc(var(--page)*var(--fs-step-title));letter-spacing:-.035em;line-height:1}
[data-view="how2"] .h2-num{flex:none;width:calc(var(--page)*.0600);height:calc(var(--page)*.0600);border-radius:50%;
  background:var(--lime);display:grid;place-items:center;font-size:calc(var(--page)*.0300);letter-spacing:-.04em}
[data-view="how2"] .h2-step-para{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-step-para));
  line-height:1.34;color:var(--body);margin-top:calc(var(--page)*.0117)}
[data-view="how2"] .h2-link{display:inline-block;font-family:var(--mono);font-size:calc(var(--page)*var(--fs-link));
  color:var(--ink);text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px;
  margin-top:calc(var(--page)*.0132)}
[data-view="how2"] .h2-step-note{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-note));
  color:var(--muted);margin-top:calc(var(--page)*.0146)}

/* ---------- dark examples band ---------- */
[data-view="how2"] .h2-examples{background:var(--dark);color:#fff;margin-top:calc(var(--page)*.0150);
  padding:calc(var(--page)*.0110) var(--gut) calc(var(--page)*.0125)}
[data-view="how2"] .h2-ex-head{display:flex;align-items:baseline;justify-content:center;position:relative}
[data-view="how2"] .h2-ex-head h2{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;
  font-size:calc(var(--page)*var(--fs-ex-head))}
[data-view="how2"] .h2-ex-label{position:absolute;right:0;bottom:.15em;font-family:var(--mono);
  font-size:calc(var(--page)*.0098);letter-spacing:.14em;text-transform:uppercase;opacity:.92}
[data-view="how2"] .h2-ex-grid{list-style:none;padding:0;margin:calc(var(--page)*.0117) 0 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--page)*.0129)}
[data-view="how2"] .h2-ex-grid figure{margin:0;border:1px solid #ffffff2e;border-radius:calc(var(--page)*.0037);
  overflow:hidden;background:#00000026}
[data-view="how2"] .h2-ex-grid figcaption{font-weight:800;font-family:Clock,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.02em;font-size:calc(var(--page)*var(--fs-caption));
  padding:calc(var(--page)*.0088) calc(var(--page)*.0107) calc(var(--page)*.0073)}
[data-view="how2"] .h2-ex-grid img{aspect-ratio:1265/621;object-fit:cover;height:auto;width:100%}

/* ---------- studio strip ---------- */
[data-view="how2"] .h2-strip{display:flex;align-items:center;justify-content:center;gap:calc(var(--page)*.0195);
  padding:calc(var(--page)*.0062) var(--gut);flex-wrap:wrap}
[data-view="how2"] .h2-strip p{font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-weight:800;
  letter-spacing:-.03em;font-size:calc(var(--page)*var(--fs-strip))}
[data-view="how2"] .h2-cta-sm{display:inline-flex;align-items:center;gap:.6em;background:var(--lime);color:#14140f;
  border-radius:999px;text-decoration:none;font-weight:800;font-family:Clock,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.02em;font-size:calc(var(--page)*.0165);
  padding:calc(var(--page)*.0068) calc(var(--page)*.0156)}

/* ---------- closing band ---------- */
[data-view="how2"] .h2-close{position:relative;aspect-ratio:4096/649;min-height:calc(var(--page)*.1200);
  display:flex;align-items:center;overflow:hidden;background:#15161a;color:#fff}
[data-view="how2"] .h2-close-img{position:absolute;inset:0;z-index:0}
[data-view="how2"] .h2-close-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
[data-view="how2"] .h2-close-copy{position:relative;z-index:2;width:100%;box-sizing:border-box;
  padding:0 var(--gut) 0 7.32%}
[data-view="how2"] .h2-close h2{font-size:calc(var(--page)*var(--fs-close-head));letter-spacing:-.035em}
[data-view="how2"] .h2-close p{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-close-sub));
  margin-top:calc(var(--page)*.0083)}
[data-view="how2"] .h2-close .h2-cta{margin-top:calc(var(--page)*.0107)}

/* ---------- footer bar ---------- */
[data-view="how2"] .site-footer{background:var(--foot);color:#fff;padding:calc(var(--page)*.0068) 0;border:0;
  display:block;margin:0}
[data-view="how2"] .h2-foot{max-width:1560px;margin:0 auto;display:flex;align-items:center;
  gap:calc(var(--page)*.0146);padding:0 var(--gut)}
[data-view="how2"] .h2-foot .wordmark{font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-weight:800;
  letter-spacing:-.045em;font-size:calc(var(--page)*.0180);color:#fff;text-decoration:none}
[data-view="how2"] .h2-foot-div{width:1px;height:calc(var(--page)*.0146);background:#ffffff40}
[data-view="how2"] .h2-foot-mono{font-family:var(--mono);font-size:calc(var(--page)*.0083);letter-spacing:.14em}
[data-view="how2"] .h2-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 runs behind the text. */
@media (max-width:900px){
  [data-view="how2"]{--page:min(100vw,900px);--gut:5.5%;--hero-inset:6%}
  [data-view="how2"] .h2-hero,[data-view="how2"] .h2-close{aspect-ratio:auto;min-height:0;display:grid}
  [data-view="how2"] .h2-hero-img,[data-view="how2"] .h2-close-img{position:relative;inset:auto;grid-area:1/1;
    width:100%;height:100%}
  [data-view="how2"] .h2-hero-img img,[data-view="how2"] .h2-close-img img{width:100%;height:100%;object-fit:cover}
  [data-view="how2"] .h2-hero-copy,[data-view="how2"] .h2-close-copy{grid-area:1/1}
  [data-view="how2"] .h2-hero-copy{padding:calc(var(--page)*.150) var(--hero-inset) calc(var(--page)*.055)}
  [data-view="how2"] .h2-close-copy{padding:calc(var(--page)*.060) var(--gut)}
  [data-view="how2"] .h2-step{grid-template-columns:1fr;gap:calc(var(--page)*.030)}
  [data-view="how2"] .h2-step-b .h2-step-media{order:0}
  [data-view="how2"] .h2-step-b .h2-step-copy{order:0}
  [data-view="how2"] .h2-ex-grid{grid-template-columns:1fr;gap:calc(var(--page)*.024)}
  [data-view="how2"] .h2-ex-head{flex-direction:column;align-items:flex-start;gap:.35em}
  [data-view="how2"] .h2-ex-label{position:static}
  [data-view="how2"] .h2-strip{flex-direction:column;align-items:flex-start;gap:calc(var(--page)*.022)}
  [data-view="how2"] .h2-strip p{text-align:left}
  [data-view="how2"] .h2-intro{text-align:left}
}
@media (max-width:620px){
  [data-view="how2"]{--page:min(100vw,620px)}
  [data-view="how2"] .h2-hero h1{font-size:calc(var(--page)*.084)}
  [data-view="how2"] .h2-hero-sub{font-size:calc(var(--page)*.031);margin-top:calc(var(--page)*.018)}
  [data-view="how2"] .h2-eyebrow{font-size:calc(var(--page)*.021);padding:calc(var(--page)*.011) calc(var(--page)*.024)}
  [data-view="how2"] .h2-cta{font-size:calc(var(--page)*.036);padding:calc(var(--page)*.020) calc(var(--page)*.038);
    margin-top:calc(var(--page)*.026)}
  [data-view="how2"] .h2-intro h2{font-size:calc(var(--page)*.062)}
  [data-view="how2"] .h2-intro p{font-size:calc(var(--page)*.030);margin-top:calc(var(--page)*.016)}
  [data-view="how2"] .h2-step{padding-top:calc(var(--page)*.050)}
  [data-view="how2"] .h2-step h2{font-size:calc(var(--page)*.056);gap:calc(var(--page)*.028);align-items:flex-start}
  [data-view="how2"] .h2-num{width:calc(var(--page)*.105);height:calc(var(--page)*.105);font-size:calc(var(--page)*.050)}
  [data-view="how2"] .h2-step-para{font-size:calc(var(--page)*.031);margin-top:calc(var(--page)*.020)}
  [data-view="how2"] .h2-link{font-size:calc(var(--page)*.027);margin-top:calc(var(--page)*.024)}
  [data-view="how2"] .h2-step-note{font-size:calc(var(--page)*.026);margin-top:calc(var(--page)*.022)}
  [data-view="how2"] .h2-ex-head h2{font-size:calc(var(--page)*.056)}
  [data-view="how2"] .h2-ex-label{font-size:calc(var(--page)*.022)}
  [data-view="how2"] .h2-ex-grid figcaption{font-size:calc(var(--page)*.036);padding:calc(var(--page)*.024) calc(var(--page)*.028) calc(var(--page)*.018)}
  [data-view="how2"] .h2-strip p{font-size:calc(var(--page)*.048)}
  [data-view="how2"] .h2-cta-sm{font-size:calc(var(--page)*.032);padding:calc(var(--page)*.018) calc(var(--page)*.030)}
  [data-view="how2"] .h2-close h2{font-size:calc(var(--page)*.056)}
  [data-view="how2"] .h2-close p{font-size:calc(var(--page)*.030);margin-top:calc(var(--page)*.016)}
  [data-view="how2"] .h2-foot{flex-wrap:wrap;gap:calc(var(--page)*.020)}
  [data-view="how2"] .h2-foot .wordmark{font-size:calc(var(--page)*.046)}
  [data-view="how2"] .h2-foot-mono{font-size:calc(var(--page)*.021)}
  [data-view="how2"] .h2-foot-div{display:none}
  [data-view="how2"] .h2-foot-right{margin-left:0;width:100%}
}