/* How it works (Figma web 2026-10 Students, mix 1586:122184 at 1440 and 1586:122313 at 390).
 *
 * The high-five doodle right of the title (no panel), the three steps beside the campus lanyard model inside the
 * white scalloped band, the three ways as tone-topped cards, the proof questions beside a sticky intro column with
 * the ID card doodle at its own drawn angle, and the chai band with the hijab doodle whole and centred.
 * Dark mode comes from company-theme.css (tokens, header, footer) plus the few rules at the end of this file.
 */

/* ---------- hero ---------- */
/* The title starts 148px from the top at 1440 (76 header + 26 + 44 crumbs + 2), as on every page. */
.ls-howpage .hw-hero { padding-top: 26px; }
.ls-howpage .hw-hero .ls-crumbs { margin: 0; }
.ls-howpage .hw-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.ls-howpage .hw-hero-copy { flex: 0 1 565px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ls-howpage .hw-hero h1 { max-width: none; text-wrap: wrap; font-size: 66px; line-height: .98; letter-spacing: -0.045em; }
.ls-howpage .hw-hero .ls-trust { gap: 12px; margin: 0; }
.ls-howpage .hw-hero .ls-trust li { color: var(--ls-ink); font-size: 15px; }
/* The doodle sits in the frame's 515 x 395 box, centred on the title block, whole and upright. */
.ls-howpage .hw-hero-art { flex: none; display: block; width: 515px; height: 395px; margin-block: -40px; }
.ls-howpage .hw-hero-art img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- the three steps, in the white scalloped band ---------- */
.ls-howpage .hw-band { position: relative; margin-top: 92px; padding: 72px 0 80px; background: var(--ls-paper); border-bottom: 1px solid var(--ls-line); }
/* The scalloped top edge: half discs of the paper standing on the band's top line. */
.ls-howpage .hw-band::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: radial-gradient(circle at 12px 6px, var(--ls-paper) 6px, transparent 6.5px) 0 0 / 24px 6px repeat-x; }
.ls-howpage .hw-steps { display: flex; align-items: center; gap: 72px; }
.ls-howpage .hw-model-box { flex: none; display: grid; place-items: center; width: 420px; height: 380px; }
.ls-howpage .hw-model { display: block; width: 164px; line-height: 0; transform-origin: 50% 100%; }
.ls-howpage .hw-model img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 680; object-fit: contain; -webkit-user-drag: none; }
:root:not([data-theme="dark"]) .ls-howpage .hw-model-dark, :root[data-theme="dark"] .ls-howpage .hw-model-light { display: none; }
.ls-howpage .hw-steps-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.ls-howpage .hw-steps-copy h2, .ls-howpage .hw-head h2 { font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.ls-howpage .hw-step-list { gap: 28px; }
.ls-howpage .hw-step-list li { row-gap: 6px; }
.ls-howpage .hw-step-list li::before { font-size: 16px; }
/* The title sits at the top of its numeral, the line under it close, as in the frame. */
.ls-howpage .hw-step-list h3 { display: block; min-height: 0; padding-top: 6px; }
.ls-howpage .hw-step-list p { margin-top: 0; line-height: 25px; }

/* The model answers the hand (tilt.js, data-tilt) and settles in (data-hm-settle), as on the homepage:
   an even press from the foot and a hold-and-drag shift, flat moves only. Touch scrolls the page up and down. */
.ls-howpage .tud-tilt { position: relative; z-index: 3; display: block; line-height: 0; transform-origin: 50% 100%; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ls-howpage .tud-tilt.is-grabbing { cursor: grabbing; }
.ls-howpage .hw-model.is-before { transform: translateY(20px) scale(.9); }

/* ---------- three ways to use a deal ---------- */
.ls-howpage .hw-ways-section { padding-top: 96px; }
.ls-howpage .hw-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.ls-howpage .hw-way { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ls-line-2); border-radius: 18px; background: var(--ls-paper); }
.ls-howpage .hw-way-art { display: grid; place-items: center; height: 200px; }
.ls-howpage .hw-way-art img { grid-area: 1 / 1; display: block; width: 180px; height: 160px; object-fit: contain; }
.ls-howpage .hw-tone-fashion { background: var(--ls-fashion); }
.ls-howpage .hw-tone-food { background: var(--ls-food); }
.ls-howpage .hw-tone-chai { background: var(--ls-chai); }
.ls-howpage .hw-way-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.ls-howpage .hw-way h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.ls-howpage .hw-way p { color: var(--ls-soft); font-size: 16px; font-weight: 500; line-height: 1.5; }

/* ---------- your proof, plainly ---------- */
.ls-howpage .hw-proof { display: flex; align-items: flex-start; gap: 72px; padding-top: 96px; }
.ls-howpage .hw-proof-intro { flex: none; width: 420px; display: flex; flex-direction: column; }
/* The ID card keeps the angle it was drawn at (founder, 18 Oct), centred in the column. The questions are the
   site's own 68 rows (as on Support), so the five closed rows are 345 and the card is drawn 214 tall to stand on the
   last one, as on Verify: the intro and the list end together, and the intro sticks while open rows grow. */
.ls-howpage .hw-proof-art { display: flex; justify-content: center; padding-top: 44px; }
.ls-howpage .hw-proof-art img { display: block; width: auto; height: 214px; }
.ls-howpage .hw-faq { flex: 1 1 0; min-width: 0; border-top: 0; }
.ls-howpage .hw-faq details { border-top: 1px solid var(--ls-line-2); border-bottom: 0; }
/* The short intro column follows the reader past the questions, only where it fits. */
@media (min-width: 900px) and (min-height: 760px) {
  .ls-howpage .hw-proof-intro { position: sticky; top: 100px; }
}

/* ---------- get your pass ready ---------- */
.ls-howpage .hw-cta-wrap { padding-top: 96px; }
.ls-howpage .hw-cta { display: flex; align-items: center; gap: 32px; padding: 28px 48px; border-radius: 22px; background: var(--ls-chai); box-shadow: 0 18px 40px -18px rgba(201, 63, 18, .55); }
.ls-howpage .hw-cta-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ls-howpage .hw-cta h2 { text-wrap: wrap; font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.ls-howpage .hw-cta p { color: var(--ls-ink-2); font-size: 17px; font-weight: 500; line-height: 1.5; }
.ls-howpage .hw-cta-btn { flex: none; min-height: 52px; }
/* The hijab doodle whole and upright at its own shape, 28px clear above and below inside the band. */
.ls-howpage .hw-cta-art { flex: none; display: grid; place-items: center; width: 160px; height: 163px; }
.ls-howpage .hw-cta-art img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
  .ls-howpage .hw-hero-art { width: 420px; height: 322px; margin-block: -20px; }
  .ls-howpage .hw-model-box { width: 320px; }
  .ls-howpage .hw-steps, .ls-howpage .hw-proof { gap: 56px; }
  .ls-howpage .hw-proof-intro { width: 360px; }
}
@media (max-width: 900px) {
  .ls-howpage .hw-hero-row { flex-direction: column; align-items: stretch; gap: 20px; }
  .ls-howpage .hw-hero-copy { flex: none; }
  .ls-howpage .hw-hero-art { align-self: center; width: 340px; max-width: 100%; height: 262px; margin: 0; }
  .ls-howpage .hw-steps { flex-direction: column; align-items: stretch; gap: 24px; }
  .ls-howpage .hw-model-box { width: 100%; height: 200px; }
  .ls-howpage .hw-model { width: 86px; }
  .ls-howpage .hw-ways { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ls-howpage .hw-proof { flex-direction: column; align-items: stretch; gap: 20px; }
  .ls-howpage .hw-proof-intro { width: 100%; }
}
@media (max-width: 760px) {
  .ls-howpage .hw-hero { padding-top: 0; }
  .ls-howpage .hw-hero h1 { font-size: 42px; line-height: .98; letter-spacing: -0.045em; }
  .ls-howpage .hw-hero-copy { gap: 18px; }
  .ls-howpage .hw-band { margin-top: 56px; padding: 44px 0 53px; }
  .ls-howpage .hw-steps-copy { gap: 24px; }
  .ls-howpage .hw-steps-copy h2, .ls-howpage .hw-head h2 { font-size: 30px; line-height: 1.12; }
  .ls-howpage .hw-step-list { gap: 22px; }
  .ls-howpage .hw-ways-section, .ls-howpage .hw-proof { padding-top: 56px; }
  .ls-howpage .hw-ways { margin-top: 16px; }
  .ls-howpage .hw-way-art { height: 150px; }
  .ls-howpage .hw-way-art img { width: 140px; height: 120px; }
  .ls-howpage .hw-proof-art { padding-top: 20px; }
  .ls-howpage .hw-proof-art img { width: 216px; height: auto; }
  .ls-howpage .hw-cta-wrap { padding-top: 56px; }
  .ls-howpage .hw-cta { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 18px 12px; padding: 28px 22px; }
  .ls-howpage .hw-cta h2 { font-size: 30px; line-height: 1.1; }
  .ls-howpage .hw-cta p { font-size: 16px; line-height: 1.6; }
  .ls-howpage .hw-cta-art { grid-column: 2; grid-row: 1; align-self: center; width: 120px; height: 122px; }
  .ls-howpage .hw-cta-btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 374px) {
  .ls-howpage .hw-hero h1 { font-size: 36px; }
  .ls-howpage .hw-cta { grid-template-columns: minmax(0, 1fr) 96px; }
  .ls-howpage .hw-cta-art { width: 96px; height: 98px; }
}
@media (prefers-reduced-motion: reduce) { .ls-howpage .hw-model.is-before { transform: none; } }

/* ---------- dark ----------
   Tokens, header and footer come from company-theme.css. The tone tops and the chai band take its deep tones,
   the drawings swap to their cream versions (site.css .theme-art), the lanyard to its dark render. */
:root[data-theme="dark"] .ls-howpage .hw-band { border-bottom-color: var(--ls-line-2); }
:root[data-theme="dark"] .ls-howpage .hw-cta { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(246, 239, 228, .06); }
:root[data-theme="dark"] .ls-howpage .hw-cta p { color: var(--ls-ink-2); }