/* Primer.Institute, How It Works (the 5-5 plan).
   Scoped styles: every class is prefixed hiw-, all custom properties live on
   .hiw-root, and no rule here targets :root, body or a bare element selector.
   Depends on nothing in the build: no Tailwind, no theme tokens.
   Type: Figtree (700/800/900) and Space Mono, loaded in index.html's font link.

   Two changes from the handoff stylesheet, both about this host page:
     1. The .hiw-wrap rule is gone. index.html wraps the component in the
        site's own .container (max-width 1180px), per the handoff note that
        marked that rule as droppable.
     2. styles.css styles headings with a bare `h1, h2, h3, h4` selector, which
        outranks the inherited font-family on .hiw-root and would render the
        slide headings in Plus Jakarta Sans. The font-family:inherit rule below
        wins that on specificity. The component's scoping keeps it from leaking
        out, but bare element selectors on the page still leak in. */

.hiw-root{
  --cream:#EFE6D2;
  --cream-soft:#F6EFDD;
  --surface:#FFFFFF;
  --ink:#0F172A;
  --ink-soft:#6A6555;
  --line:#E2DAC9;
  --amber:#F59E0B;
  --burnt:#B45309;
  --product-bg:#0C1220;
  --product-line:#22304A;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 1px rgba(40,30,10,.10), 0 18px 44px -18px rgba(40,30,10,.34);
  color-scheme:light;
}
.hiw-root *,.hiw-root *::before,.hiw-root *::after{box-sizing:border-box}
.hiw-root{
  color:var(--ink);
  font-family:Figtree,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Reclaims the headings from the host page's bare h1..h4 rule. See note above. */
.hiw-root h2,.hiw-root h3,.hiw-root h4{font-family:inherit}

/* ---- shell ---------------------------------------------------------- */
.hiw-root{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:28px 28px 20px;
}
.hiw-hiw__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:22px;
}
.hiw-kicker{
  font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--burnt);margin:0;
}

/* ---- stage ---------------------------------------------------------- */
.hiw-stage{position:relative;min-height:446px}
@media (max-width:860px){.hiw-stage{min-height:560px}}

.hiw-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility 0s linear .5s;
}
.hiw-slide.hiw-is-on{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
@media (max-width:860px){.hiw-slide{position:relative;inset:auto;display:none}.hiw-slide.hiw-is-on{display:block}}

/* step slides: text left, screen right */
.hiw-step{display:grid;grid-template-columns:minmax(228px,29%) 1fr;gap:30px;align-items:center;height:100%}
@media (max-width:860px){.hiw-step{grid-template-columns:1fr;gap:18px}}

.hiw-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.hiw-num{
  font-family:"Space Mono",ui-monospace,monospace;font-weight:700;font-size:13px;
  background:var(--ink);color:var(--amber);
  border-radius:999px;padding:5px 13px;letter-spacing:.5px;
}
.hiw-track{
  font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--burnt);border:1px solid rgba(180,83,9,.34);
  border-radius:999px;padding:5px 12px;
}
.hiw-step h3{
  margin:0 0 12px;font-size:30px;line-height:1.1;font-weight:800;
  letter-spacing:-.9px;text-wrap:balance;
}
.hiw-step p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:34ch}
@media (max-width:860px){.hiw-step h3{font-size:24px}.hiw-step p{font-size:15px;max-width:none}}

/* the screenshot frame, navy so letterboxing melts into the product UI */
.hiw-media{
  background:var(--product-bg);display:flex;justify-content:center;
  border:1px solid var(--product-line);border-radius:16px;
  padding:clamp(10px,1.7vw,22px);
  width:fit-content;max-width:100%;margin-inline:auto;
  overflow:hidden;box-shadow:var(--shadow);
}
.hiw-media img{width:auto;max-width:100%;height:auto;max-height:376px;object-fit:contain;
  display:block;border-radius:6px;transform:scale(1)}
@media (max-width:860px){.hiw-media img{max-height:360px}}
/* Slow push-in over the slide's own duration. --kb is set per slide in the
   markup from data-dur; in the React handoff this was an inline style. */
.hiw-is-on .hiw-media img{transition:transform var(--kb,7000ms) linear;transform:scale(1.045)}

/* card slides */
.hiw-card{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;height:100%;gap:14px;padding:24px 12px}
.hiw-card h2{
  margin:0;font-weight:900;letter-spacing:-2px;line-height:1.02;
  font-size:clamp(34px,6.4vw,64px);text-wrap:balance;
}
.hiw-card .hiw-lede{margin:0;font-size:clamp(16px,2.2vw,21px);color:var(--ink-soft);max-width:44ch}
.hiw-card .hiw-lede span{display:inline-block}
.hiw-card .hiw-fine{margin:0;font-size:15px;color:var(--ink-soft);max-width:40ch;line-height:1.5}
.hiw-chapter h2{font-size:clamp(28px,5vw,50px)}
.hiw-end h2{font-size:clamp(30px,4.9vw,52px)}
.hiw-end .hiw-owl{width:clamp(104px,11vw,142px)}
.hiw-chapter .hiw-rule{width:52px;height:4px;border-radius:999px;background:var(--amber)}
.hiw-cta{
  margin-top:6px;background:var(--amber);color:var(--ink);
  font-weight:800;font-size:15px;border-radius:999px;padding:13px 26px;white-space:nowrap;
  border:none;box-shadow:0 1px 1px rgba(40,30,10,.12),0 10px 22px -10px rgba(245,158,11,.7);
}
.hiw-dot{color:var(--burnt)}
.hiw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hiw-card .hiw-note{margin:-4px 0 0;font-size:13.5px;color:var(--ink-soft)}
.hiw-owl{width:clamp(150px,21vw,244px);height:auto;display:block;margin-bottom:-4px}
@media (max-width:860px){.hiw-owl{width:clamp(126px,34vw,178px)}}

/* ---- controls ------------------------------------------------------- */
.hiw-rail{display:flex;gap:5px;margin:22px 0 12px}
.hiw-seg{
  flex:1;height:4px;border-radius:999px;background:var(--line);
  border:none;padding:0;cursor:pointer;position:relative;overflow:hidden;
}
.hiw-seg span{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:var(--amber);border-radius:999px}
.hiw-seg.hiw-is-chapter{flex:.45}
.hiw-seg:focus-visible{outline:2px solid var(--burnt);outline-offset:3px}

.hiw-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hiw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:8px 14px;font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;transition:border-color .16s var(--ease),background .16s var(--ease);
}
.hiw-btn:hover{border-color:#CFC4AC;background:var(--cream-soft)}
.hiw-btn:focus-visible{outline:2px solid var(--burnt);outline-offset:2px}
.hiw-btn svg{width:13px;height:13px;fill:currentColor}
.hiw-bar .hiw-spacer{flex:1}
.hiw-label{font-size:12.5px;color:var(--ink-soft)}
@media (max-width:560px){.hiw-label{display:none}}
@media (max-width:430px){.hiw-cta{font-size:13.5px;padding:12px 18px}}

@media (prefers-reduced-motion:reduce){
  .hiw-is-on .hiw-media img{transition:none!important;transform:scale(1)!important}
  .hiw-slide{transition:opacity .01s}
}