@font-face{
  font-family:"Inter";
  src:url("assets/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#202020;
  --navy:#292929;
  --mute:#505050;
  --line:#d4d4d4;
  --bg:#ffffff;
  --accent:#111111;
  --rgb:32,32,32;
  --w:1120px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.55 var(--font);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
img{filter:grayscale(1)}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
.trap{position:absolute;left:-9999px}


.top{display:flex;align-items:center;height:72px;padding:0 max(24px,calc((100% - var(--w))/2));border-bottom:1px solid var(--line);background:var(--bg)}
.top .btn{margin-left:auto}
.btn{display:inline-block;padding:.8em 1.8em;border:0;border-radius:999px;background:#111111;color:#ffffff;font-family:inherit;font-weight:600;font-size:1rem;line-height:1;text-decoration:none;cursor:pointer}
.btn-sm{padding:.65em 1.4em;font-size:.9rem}
.btn:hover{background:#2a2a2a}
:focus-visible{outline:2px solid #111111;outline-offset:3px}

section{padding:96px max(24px,calc((100% - var(--w))/2))}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.02em;font-weight:700;color:var(--navy)}
h3{font-size:1.125rem;font-weight:650;color:var(--navy)}

/* Product-led hero on a plain light background */
.hero{display:flex;flex-direction:column;padding:56px max(24px,calc((100% - var(--w))/2)) 48px;background:#ffffff}
.hero-text{max-width:46rem}
.hero h1{font-size:clamp(2.15rem,4.2vw,3.25rem);line-height:1.08;letter-spacing:-.03em;font-weight:800;color:var(--navy);max-width:11.6em}
.sub{margin-top:1.1rem;max-width:44em;color:var(--mute);font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.45}
.hero-visual{margin:40px auto 0;width:min(1200px,100%)}
.hero-visual img{width:100%;height:auto;filter:grayscale(1) drop-shadow(0 28px 36px rgba(32,32,32,.12))}

.how{background:#f3f3f3;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how-figure{margin:0 auto 40px;width:min(var(--w),100%)}
.how-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,260px);gap:16px 56px;align-items:center}
.how-frame{position:relative;overflow:visible}
.how-img{width:100%;height:auto;margin:0;display:block}
.how-marks{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none;z-index:2}
.mark{position:absolute;display:grid;place-items:center;width:28px;height:28px;margin:0;border:2px solid #ffffff;border-radius:50%;background:#111111;color:#ffffff;font-size:13px;font-weight:700;line-height:1;letter-spacing:0;box-shadow:0 1px 2px rgba(0,0,0,.28);transform:translate(-50%,-50%);z-index:2}
.mark-1{left:calc(950 / 1587 * 100%);top:calc(618 / 946 * 100%)}
.mark-2{left:calc(631 / 1587 * 100%);top:calc(635 / 946 * 100%)}
.mark-3{left:calc(900 / 1587 * 100%);top:calc(532 / 946 * 100%)}
.how-legend{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.leg{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
.leg-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#111111;color:#ffffff;font-size:13px;font-weight:700;line-height:1}
.leg-body{padding-top:.15rem}
.leg-name{display:block;color:#333333;font-size:1rem;font-weight:500;line-height:1.3}
.leg-1 .leg-name{color:#111111;font-size:1.0625rem;font-weight:650}
.leg-note{display:block;margin-top:.15rem;color:#707070;font-size:.8rem;font-weight:400;line-height:1.3}
.how-figure figcaption{margin:18px 0 0;color:var(--mute);font-size:.9rem;line-height:1.4;text-align:center}
.how-copy{max-width:28em;margin:0 auto;color:var(--mute);font-size:clamp(1.0625rem,1.6vw,1.2rem);line-height:1.55;text-align:center}

.homeroom{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:64px;background:#ffffff}
.eyebrow{margin:0 0 .7rem;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#555555}
.hr-sub{margin-top:.85rem;color:var(--mute);font-size:1.0625rem;line-height:1.45;max-width:22em}
.hr-art{width:100%;height:auto}
.hr-window{fill:#ffffff;stroke:#292929;stroke-width:2}
.hr-chrome{stroke:#d4d4d4;stroke-width:1.5}
.hr-dot{fill:#c4c4c4}
.hr-panel{fill:#f7f7f7;stroke:#292929;stroke-width:1.6}
.hr-hub{fill:none;stroke:#292929;stroke-width:2}
.hr-tick{fill:none;stroke:#292929;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.hr-links path{fill:none;stroke:#888888;stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round}
.hr-m{fill:#ffffff;stroke:#292929;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:#f3f3f3}
form{display:grid;gap:16px}
label{display:grid;gap:6px;font-size:.9rem;color:var(--mute)}
input,textarea{width:100%;padding:.75em .9em;border:1px solid #cfcfcf;border-radius:10px;background:#ffffff;color:var(--ink);font:inherit}
form .btn{justify-self:start}

.foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:28px max(24px,calc((100% - var(--w))/2));border-top:1px solid var(--line);font-size:.9rem}
.foot span{color:var(--mute)}
.foot small{margin-left:auto;color:var(--mute);font-size:inherit}

@media (max-width:820px){
  section{padding:64px 24px}
  .hero{padding:36px 24px 48px}
  .hero-text{max-width:none}
  .hero h1{font-size:clamp(2rem,8.6vw,2.7rem)}
  .hero-visual{margin-top:36px}
  .how-figure{margin-bottom:32px}
  .how-stage{grid-template-columns:1fr;gap:28px}
  .how-frame{overflow:visible}
  .mark,.leg-num{width:26px;height:26px;font-size:12px}
  .how-legend{gap:18px;max-width:22em;margin:0 auto;width:100%}
  .leg{grid-template-columns:26px 1fr;gap:12px}
  .contact,.homeroom{grid-template-columns:1fr;gap:16px}
  .contact,.homeroom{gap:32px}
  .foot small{margin-left:0;width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}