/* How it Works (founder, 2026-10-08): a scroll story in three chapters -
   conversion, studio management, automation - each step a real product
   picture beside a short explanation. Same design language as the homepage
   and Features: Inter, BML blue, soft blue ground, white framed pictures. */
.hiw-page { background: #fff; }

.hiw-hero { padding: 56px 0 40px; text-align: center; background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); }
.hiw-eyebrow { display: inline-flex; padding: 6px 13px; border: 1px solid #dbe6ff; border-radius: 999px; background: #f3f7ff; color: #0b55ff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hiw-hero h1 { max-width: 860px; margin: 18px auto 0; color: #071735; font-size: clamp(34px, 4.4vw, 54px); font-weight: 900; line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.hiw-hero > .container > p { max-width: 660px; margin: 16px auto 0; color: #4b5b73; font-size: 17px; line-height: 1.55; }

.hiw-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 34px auto 0; padding: 0; list-style: none; text-align: left; }
.hiw-map a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; border: 1px solid #dce5f1; border-radius: 16px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 18px 40px -32px rgba(7, 23, 53, .45); transition: border-color .15s ease, transform .15s ease; }
.hiw-map a:hover { border-color: #0b55ff; transform: translateY(-2px); }
.hiw-map b { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #0b55ff; color: #fff; font-size: 16px; font-weight: 900; }
.hiw-map strong { display: block; color: #071735; font-size: 15px; font-weight: 800; line-height: 1.25; }
.hiw-map small { display: block; margin-top: 3px; color: #64748b; font-size: 13px; font-weight: 600; }

.hiw-chapter { padding: 72px 0 24px; scroll-margin-top: 80px; }
.hiw-chapter.is-tinted { background: linear-gradient(180deg, #f7faff 0%, #f3f7ff 100%); }
.hiw-chapter-head { display: flex; align-items: flex-start; gap: 18px; max-width: 760px; margin-bottom: 30px; }
.hiw-chapter-num { flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, #0b55ff, #3f7bff); color: #fff; font-size: 24px; font-weight: 900; box-shadow: 0 16px 30px -18px rgba(11, 85, 255, .8); }
.hiw-kicker { color: #0b55ff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hiw-chapter-head h2 { margin: 6px 0 0; color: #071735; font-size: clamp(28px, 3vw, 40px); font-weight: 900; line-height: 1.04; letter-spacing: -.045em; }
.hiw-chapter-head p { margin: 10px 0 0; color: #4b5b73; font-size: 16px; line-height: 1.55; }

.hiw-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; align-items: center; padding: 26px 0 48px; }
.hiw-row.is-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.hiw-row.is-flip .hiw-shot { order: 2; }

.hiw-shot { position: relative; margin: 0; min-width: 0; aspect-ratio: 16 / 10; display: grid; place-items: center; border: 1px solid #dce5f1; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 2px 4px rgba(7, 23, 53, .04), 0 38px 86px -50px rgba(7, 23, 53, .5); }
.hiw-shot img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: left top; }
.hiw-shot.is-contain img { object-fit: contain; object-position: center; }
.hiw-shot.is-top img { object-position: center top; }
.hiw-shot.is-soft { background: radial-gradient(circle at 20% 0%, #eef4ff, transparent 60%), #f5f8fe; }
.hiw-shot.is-soft.is-contain img { width: 92%; height: 92%; }
.hiw-shot.is-browser { grid-template-rows: 34px minmax(0, 1fr); place-items: stretch; }
.hiw-browser-bar { display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid #e3eaf5; background: #fff; }
.hiw-browser-bar i { width: 9px; height: 9px; border-radius: 50%; }
.hiw-browser-bar i:nth-child(1) { background: #ff6b6b; } .hiw-browser-bar i:nth-child(2) { background: #f9c74f; } .hiw-browser-bar i:nth-child(3) { background: #43c463; }
.hiw-browser-bar em { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #f2f5fa; color: #64748b; font-size: 11px; font-style: normal; font-weight: 600; }
.hiw-shot.is-browser img { min-height: 0; }

.hiw-copy { min-width: 0; }
.hiw-step { display: inline-flex; padding: 5px 11px; border-radius: 999px; background: #eaf1ff; color: #0b55ff; font-size: 12px; font-weight: 800; }
.hiw-copy h3 { margin: 12px 0 0; color: #071735; font-size: clamp(22px, 2.2vw, 28px); font-weight: 900; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.hiw-copy p { margin: 12px 0 0; color: #4b5b73; font-size: 15.5px; line-height: 1.6; }
.hiw-points { display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.hiw-points li { position: relative; padding-left: 28px; color: #17233a; font-size: 14.5px; font-weight: 700; }
.hiw-points li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: #0b55ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }

.hiw-page .cta { padding-top: 40px; }

@media (max-width: 900px) {
  .hiw-hero { padding: 38px 0 28px; }
  .hiw-map { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .hiw-chapter { padding: 48px 0 8px; }
  .hiw-chapter-head { gap: 14px; margin-bottom: 18px; }
  .hiw-chapter-num { width: 44px; height: 44px; font-size: 20px; border-radius: 13px; }
  .hiw-row, .hiw-row.is-flip { grid-template-columns: 1fr; gap: 20px; padding: 14px 0 34px; }
  .hiw-row.is-flip .hiw-shot { order: 0; }
  .hiw-shot { border-radius: 14px; }
}
.hiw-map li::before, .hiw-map li::marker { content: none; display: none; }
.hiw-map li { padding: 0; margin: 0; }

/* Simple top like Features (founder, 2026-10-08): a plain blue label, the
   headline and subheadline - no pill, no cards, no tinted band. */
.hiw-hero { padding: 48px 0 8px; background: #fff; }
.hiw-eyebrow { display: block; padding: 0; border: 0; background: none; color: #0b55ff; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hiw-hero h1 { margin-top: 10px; }

/* Hero on the same light blue as chapter 2 (founder, 2026-10-09). */
.hiw-hero { background: linear-gradient(180deg, #f7faff 0%, #f3f7ff 100%); padding-bottom: 48px; }

/* A picture that must show whole (the booking app) keeps its own shape. */
.hiw-shot.is-tall { aspect-ratio: 1060 / 1000; }
.hiw-shot.is-tall img { width: 94%; height: 94%; }

/* Picture on its own, no frame (founder, 2026-10-09) - like Features. */
.hiw-shot.is-bare { aspect-ratio: auto; display: block; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.hiw-shot.is-bare img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 70px -42px rgba(7, 23, 53, .5); }

/* Phones (founder, 2026-10-09): a shorter subheadline, and each blue badge
   sits on top of its picture - badge, picture, headline, text, checks - so
   the picture and its headline read as one idea. Rows without a badge just
   start with the picture. Desktop is unchanged. */
@media (max-width: 900px) {
  .hiw-hero > .container > p { text-wrap: balance; }
  .hiw-row, .hiw-row.is-flip { gap: 0; }
  .hiw-copy { display: contents; }
  .hiw-step { order: -1; justify-self: start; margin-bottom: 12px; }
  .hiw-shot, .hiw-row.is-flip .hiw-shot { order: 0; }
  .hiw-copy h3 { margin-top: 16px; }
  .hiw-copy p { margin-top: 10px; }
}

/* The opening as a 1-2-3 path (founder, 2026-10-11: "the weakest shit on the
   entire marketing first impression... on desktop a graphic like one side
   1 2 3"). Desktop: words on the left, the three chapters on the right as a
   numbered path, each with a slice of the real product. Phones: the headline,
   then the same path as three compact rows. Each step jumps to its chapter;
   the words are the chapter labels below, so the page says one thing. */
.hiw-hero { padding: 64px 0 72px; text-align: left; }
.hiw-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.hiw-hero-copy { min-width: 0; }
.hiw-hero .hiw-hero-copy h1 { margin: 12px 0 0; max-width: 560px; font-size: clamp(40px, 4.6vw, 64px); line-height: .98; }
.hiw-hero .hiw-hero-copy > p { max-width: 500px; margin: 20px 0 0; color: #4b5b73; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
/* Desktop keeps the long subheadline; phones get the short line (founder, 2026-10-11). */
.hiw-sub-short { display: none; }
.hiw-hero-cta { margin-top: 28px; }

.hiw-path { position: relative; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.hiw-path::before { content: ""; position: absolute; left: 27px; top: 75px; bottom: 75px; width: 2px; background: linear-gradient(180deg, #0b55ff, rgba(11, 85, 255, .18)); }
.hiw-path li { margin: 0; padding: 0; }
.hiw-path li::before, .hiw-path li::marker { content: none; display: none; }
.hiw-path a { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 280px; align-items: center; gap: 20px; color: inherit; text-decoration: none; }
.hiw-path b { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #0b55ff, #3f7bff); color: #fff; font-size: 24px; font-weight: 900; box-shadow: 0 0 0 6px #f5f8ff, 0 16px 30px -16px rgba(11, 85, 255, .9); }
.hiw-path-text { min-width: 0; }
.hiw-path small { display: block; color: #0b55ff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hiw-path strong { display: block; margin-top: 4px; color: #071735; font-size: 21px; font-weight: 900; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.hiw-path-pic { position: relative; display: block; height: 150px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgba(7, 23, 53, .05), 0 28px 54px -30px rgba(7, 23, 53, .55); transition: transform .18s ease; }
.hiw-path img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: var(--focus, 50% 50%); transform: scale(var(--zoom, 1)); object-position: var(--focus, 50% 50%); }
/* Zoom toward the part worth seeing: the open times, the week grid, the reminder text. */
.hiw-path img.is-book { --focus: 80% 58%; --zoom: 1.9; }
.hiw-path img.is-cal { --focus: 72% 86%; --zoom: 2; }
.hiw-path img.is-text { --focus: 76% 42%; --zoom: 1.5; }
.hiw-path a:hover .hiw-path-pic { transform: translateY(-3px); }
.hiw-path a:hover strong { color: #0b55ff; }
@media (max-width: 1240px) and (min-width: 901px) {
  .hiw-hero-grid { gap: 36px; }
  .hiw-path a { grid-template-columns: 48px minmax(0, 1fr) 200px; gap: 16px; }
  .hiw-path b { width: 48px; height: 48px; font-size: 21px; }
  .hiw-path::before { left: 23px; top: 60px; bottom: 60px; }
  .hiw-path strong { font-size: 18px; }
  .hiw-path-pic { height: 120px; }
}

@media (max-width: 900px) {
  .hiw-hero { padding: 36px 0 40px; text-align: center; }
  .hiw-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hiw-hero .hiw-hero-copy h1 { margin: 10px auto 0; font-size: clamp(36px, 10vw, 46px); }
  .hiw-hero .hiw-hero-copy > p { margin: 12px auto 0; font-size: 17px; }
  .hiw-hero-cta { display: none; }
  .hiw-path { gap: 14px; text-align: left; }
  .hiw-path::before { left: 21px; top: 44px; bottom: 44px; }
  .hiw-sub-full { display: none; }
  .hiw-sub-short { display: inline; }
  .hiw-hero .hiw-hero-copy > p { text-wrap: balance; }
  .hiw-path a { grid-template-columns: 44px minmax(0, 1fr) 124px; gap: 14px; }
  .hiw-path b { width: 44px; height: 44px; font-size: 19px; box-shadow: 0 0 0 5px #f5f8ff, 0 12px 24px -14px rgba(11, 85, 255, .9); }
  .hiw-path small { font-size: 10.5px; }
  .hiw-path strong { font-size: 17px; }
  .hiw-path-pic { height: 88px; border-radius: 12px; }
}

/* Readable pictures (founder, 2026-10-12: "those pictures ain't going to work
   at all... we got to zoom out so you can see those fucking pictures" and
   "whatever you did to make the features pictures crispier, we need to do
   the same thing on how it works"). Features reads because each picture
   shows ~1,000px wide; here they were squeezed to ~640px beside the text.
   Hero: the whole picture, never a zoomed slice. (A stacked-rows layout was
   tried and reverted - founder: "I liked the original design".) */
.hiw-path img, .hiw-path img.is-book, .hiw-path img.is-cal, .hiw-path img.is-text { --zoom: 1; --focus: 50% 50%; object-fit: contain; transform: none; background: #fff; }
.hiw-path-pic { height: auto; aspect-ratio: 16 / 10; }
.hiw-path a { grid-template-columns: 56px minmax(0, 1fr) 300px; }
@media (max-width: 1240px) and (min-width: 901px) {
  .hiw-path a { grid-template-columns: 48px minmax(0, 1fr) 220px; }
  .hiw-path-pic { height: auto; }
}
@media (max-width: 900px) {
  .hiw-path a { grid-template-columns: 44px minmax(0, 1fr) 132px; }
  .hiw-path-pic { height: auto; }
}