/* Ink and Lime /industries pages (Vytas, 2026-11-03), English on dev only. Template: frontend/industries/industry_ink.pug.
   Loads after ink/home.css (tokens, header, footer, shared sections) and ink/for.css (story cards, facts, price row).
   This file adds only what an industry page has that those two do not: the booking page with class times, the four
   automations in the list-and-stage layout (a fourth scene, a profile, a Story, a drawn post) and the DM step mock. */

/* ---------- 2. The booking tool page: class times under the trial ---------- */
html body.ik:not(#_) .ixw { gap: 8px; }
html body.ik:not(#_) ul.ixw__rows { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
html body.ik:not(#_) .ixw__rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; border: 1px solid #e4e4e7; border-radius: 9px; font-size: 12px; line-height: 1.3; color: #3f3f46; }
html body.ik:not(#_) .ixw__rows li b { font-weight: 600; color: #111; }
html body.ik:not(#_) .ixw__rows li.is-on { border-color: var(--cf-ink); background: var(--cf-ink); color: #d4d4d8; }
html body.ik:not(#_) .ixw__rows li.is-on b { color: #fff; }
html body.ik:not(#_) .ixw .ikf-web__body img { width: 46px; height: 46px; object-position: 40% 50%; }
html body.ik:not(#_) .ixw .ikf-web__btn { padding: 7px 10px; }

/* ---------- 3. Four automations: the homepage list and stage, with a fourth scene ---------- */
html body.ik:not(#_) .ixa ul.ik-aud__list { gap: 4px; }
html body.ik:not(#_) .ixa .ik-aud__item { padding-top: 14px; padding-bottom: 14px; }
html body.ik:not(#_) .ixa .ik-aud__stage { min-height: 600px; }
html body.ik:not(#_) .ik-aud[data-on="3"] .ik-aud__scene:nth-child(4) { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  html body.ik:not(#_) .ik-aud[data-on="3"] .ik-aud__scene:nth-child(4) { transition: opacity .4s var(--ease); }
  html body.ik:not(#_) .ik-aud[data-on="3"] .ik-aud__scene:not(:nth-child(4)) .ik-aud__ui { transform: translateY(16px) rotate(1.5deg); }
}
/* The stage cards are white on a white stage, so their words take the light-surface colours. */
html body.ik:not(#_) .ixa .ik-aud__scene { color: #111; }
html body.ik:not(#_) .ixa .ik-ucard__cmt { color: #111; }
html body.ik:not(#_) .ixa-rest { font-weight: 400; color: #3f3f46; }
html body.ik:not(#_) .ixa .ik-aud__ui p.ik-dm__btn { align-self: stretch; }
html body.ik:not(#_) .ixa-pre { white-space: pre-line; }

/* The gym's Instagram profile: logo, name, the bio line that asks for PRICE, the latest posts. */
html body.ik:not(#_) .ik-aud__post.ixa-prof { display: flex; flex-direction: column; gap: 10px; aspect-ratio: auto; padding: 16px; transform: rotate(-2deg); }
html body.ik:not(#_) .ixa-prof__top { display: flex; align-items: center; gap: 12px; }
html body.ik:not(#_) .ixa-prof__top img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
html body.ik:not(#_) .ixa-prof__top span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
html body.ik:not(#_) .ixa-prof__top b { font-size: 15px; font-weight: 600; }
html body.ik:not(#_) .ixa-prof__top i { font-style: normal; font-size: 13px; color: #63636b; }
html body.ik:not(#_) p.ixa-prof__bio { font-size: 13px; line-height: 1.4; color: #27272a; }
html body.ik:not(#_) .ixa-prof__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html body.ik:not(#_) .ixa-prof__btns span { padding: 6px; border-radius: 8px; background: #efefef; font-size: 12px; font-weight: 600; text-align: center; }
html body.ik:not(#_) .ixa-prof__btns span:first-child { background: var(--cf-ig); color: #fff; }
html body.ik:not(#_) .ixa-prof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
html body.ik:not(#_) .ixa-prof__grid img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; object-fit: cover; object-position: center 25%; }

/* Tonight's Story: the photo, the progress bars, the gym's name, one sticker and the reply line. */
html body.ik:not(#_) .ik-aud__post.ixa-story { aspect-ratio: 9 / 16; width: 38%; top: 6%; background: #111; }
html body.ik:not(#_) .ixa-story > img { object-position: center 30%; }
html body.ik:not(#_) .ixa-story__bar { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; }
html body.ik:not(#_) .ixa-story__bar i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
html body.ik:not(#_) .ixa-story__bar i.is-on { background: #fff; }
html body.ik:not(#_) .ixa-story__by { position: absolute; top: 18px; left: 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #fff; }
html body.ik:not(#_) .ixa-story__by img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
html body.ik:not(#_) .ixa-story__by b { font-weight: 600; }
html body.ik:not(#_) .ixa-story__stk { position: absolute; top: 30%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 2px; width: max-content; max-width: 86%; padding: 8px 12px; border-radius: 12px; background: #fff; transform: translateX(-50%) rotate(-3deg); color: #111; text-align: center; }
html body.ik:not(#_) .ixa-story__stk b { font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
html body.ik:not(#_) .ixa-story__stk span { font-size: 12px; font-weight: 500; }
html body.ik:not(#_) .ixa-story__ask { position: absolute; left: 10px; right: 10px; bottom: 54px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; font-size: 12px; color: #fff; }

/* The free plan as a drawn post: the gym's name, a label, the headline and the keyword line. */
html body.ik:not(#_) .ik-aud__post.ixa-tile { gap: 8px; padding: 16px 16px 64px; background: #f3efe6; }
html body.ik:not(#_) .ixa-tile .ikf-tile__by { font-size: 12px; }
html body.ik:not(#_) .ixa-tile .ikf-tile__by img { width: 22px; height: 22px; }
html body.ik:not(#_) .ixa-tile .ikf-tile__k { margin-top: 18px; font-size: 12px; }
html body.ik:not(#_) .ixa-tile b.ikf-tile__h { font-size: 30px; line-height: 1; letter-spacing: -.035em; }
html body.ik:not(#_) .ixa-tile__ask { align-self: flex-start; margin-top: 6px; padding: 5px 11px; border-radius: 999px; background: var(--cf-ink); font-size: 12px; font-weight: 600; color: #fff; }

/* ---------- 5. Setup step 3: the DM the person gets, with the booking link as a button ---------- */
html body.ik:not(#_) .ixs-dm { display: flex; flex-direction: column; gap: 8px; width: min(330px, 100%); padding: 14px; border-radius: 16px; background: #fff; color: #111; }
html body.ik:not(#_) .ixs-dm p.ik-ui__label { margin: 0; }
html body.ik:not(#_) p.ixs-dm__txt { padding: 9px 11px; border: 1px solid #e4e4e7; border-radius: 10px; font-size: 13px; line-height: 1.35; }
html body.ik:not(#_) .ixs-dm__link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--cf-mist); color: #52525b; }
html body.ik:not(#_) .ixs-dm__link span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
html body.ik:not(#_) .ixs-dm__link b { font-size: 13px; font-weight: 600; color: #111; }
html body.ik:not(#_) .ixs-dm__link i { overflow: hidden; font-style: normal; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
html body.ik:not(#_) .ixs-dm__go { align-self: flex-end; padding: 6px 12px; border-radius: 8px; background: var(--cf-ink); font-size: 12px; font-weight: 600; color: #fff; }
html body.ik.ikf:not(#_) .ikf-steps .ik-art:has(.ixs-dm), html body.ik.ikf:not(#_) .ikf-steps .ik-art:has(.ik-ui--pick) { justify-content: center; padding: 16px; }

/* ---------- Tablets ---------- */
@media (min-width: 900px) and (max-width: 1199px) {
  html body.ik:not(#_) .ixa .ik-aud__stage { min-height: 0; }
}

/* ---------- Phones ---------- */
@media (max-width: 899px) {
  html body.ik:not(#_) .ixa .ik-aud__stage { min-height: 0; }
}
@media (max-width: 767px) {
  html body.ik:not(#_) .ixa .ik-aud__stage { height: 380px; }
  html body.ik:not(#_) .ik-aud__post.ixa-prof { width: 46%; padding: 10px; gap: 7px; }
  html body.ik:not(#_) .ixa-prof__top { gap: 7px; }
  html body.ik:not(#_) .ixa-prof__top img { width: 34px; height: 34px; }
  html body.ik:not(#_) .ixa-prof__top b { font-size: 12px; }
  html body.ik:not(#_) .ixa-prof__top i, html body.ik:not(#_) p.ixa-prof__bio { font-size: 11px; }
  html body.ik:not(#_) .ixa-prof__btns span { padding: 4px; font-size: 10px; }
  html body.ik:not(#_) .ik-aud__post.ixa-story { width: 36%; }
  html body.ik:not(#_) .ixa-story__stk { padding: 5px 8px; }
  html body.ik:not(#_) .ixa-story__stk b { font-size: 12px; }
  html body.ik:not(#_) .ixa-story__stk span, html body.ik:not(#_) .ixa-story__ask { font-size: 10px; }
  html body.ik:not(#_) .ixa-story__ask { bottom: 40px; padding: 4px 8px; }
  html body.ik:not(#_) .ik-aud__post.ixa-tile { padding: 10px 10px 48px; }
  html body.ik:not(#_) .ixa-tile b.ikf-tile__h { font-size: 19px; }
  html body.ik:not(#_) .ixa-tile .ikf-tile__k { margin-top: 8px; font-size: 10px; }
  html body.ik:not(#_) .ixa-tile__ask { font-size: 10px; }
  html body.ik:not(#_) .ixa .ik-aud__cmts .ixa-rest { display: none; }
}
html body.ik:not(#_) .ixx-nb { white-space: nowrap; }

/* The booking page fits the 230px frame: smaller gaps and rows. */
html body.ik:not(#_) .ikf-story .ixw { gap: 6px; padding: 8px; }
html body.ik:not(#_) .ikf-story .ixw .ikf-web__url { padding: 4px 9px; }
html body.ik:not(#_) .ikf-story .ixw__rows li { padding: 4px 8px; }
@media (max-width: 767px) {
  /* Stage DM on a phone: the link card shows its words, not a thumbnail they would be cut beside. */
  html body.ik:not(#_) .ixa .ik-aud__ui .ik-dm__card img { display: none; }
  html body.ik:not(#_) .ixa .ik-aud__ui .ik-dm__card span { white-space: normal; }
  html body.ik:not(#_) .ixa .ik-aud__ui .ik-dm__card i { display: none; }
  /* By hand vs CreatorFlow: a long comment wraps instead of being cut. */
  html body.ik.ikx:not(#_) .ik-vs .ik-inbox__txt { white-space: normal; line-height: 1.35; }
}

/* The H2 beside the stage: balance left "Instagram" alone on a line, plain wrap left "spots" alone. */
html body.ik:not(#_) .ixa h2.ik-h2 { text-wrap: pretty; }
/* The plan's four weeks fill the post, as the cover of a real plan would. */
html body.ik:not(#_) ul.ixa-tile__weeks { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
html body.ik:not(#_) .ixa-tile__weeks li { display: flex; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .7); font-size: 12px; line-height: 1.3; color: #3f3f46; }
html body.ik:not(#_) .ixa-tile__weeks b { flex: none; width: 50px; font-weight: 600; color: #111; }
@media (max-width: 767px) {
  html body.ik:not(#_) .ik-aud__post.ixa-prof { width: 42%; }
  html body.ik:not(#_) .ixa-prof__btns { display: none; }
  html body.ik:not(#_) .ixa-story .ik-ucard__cmt b, html body.ik:not(#_) .ixa-tile .ik-ucard__cmt b { display: none; }
  html body.ik:not(#_) .ixa-tile__ask, html body.ik:not(#_) ul.ixa-tile__weeks { display: none; }
}

/* Story mock on bright photos (2026-11-04): the account name and the reply bar are white, so they vanished on light Story
   photos (pet, salon, insurance, online classes). Instagram shades the top and bottom of a Story; the mock does the same. */
html body.ik:not(#_) .ixa-story::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .5)); pointer-events: none; }
html body.ik:not(#_) .ixa-story > :not(img) { z-index: 2; }