/* Ink and Lime /for pages (Vytas, 2026-11-03), English on dev only. Template: frontend/for/for_ink.pug.
   Loads after ink/home.css, which owns the tokens, header, footer and every shared section. This file adds only what a
   /for page has that the homepage does not: the founder's-view cards, the builder pictures, the facts and price row. */

/* Hero: the homepage H1 size (Vytas, 2026-11-03: "h1 font size should be like in homepage"). Only the sentence is a little wider. */
html body.ik.ikf:not(#_) .is-left p.ik-hero__sub { max-width: 540px; }

/* ---------- 2. The founder's view: four cards, one picture each ---------- */
html body.ik.ikf:not(#_) .ikf-story .ik-art { justify-content: center; height: 230px; padding: 16px; }
.ikf-reel { width: 168px; transform: rotate(-2deg); }
.ikf-reel .ik-post__top { padding: 8px 10px; font-size: 12px; }
html body.ik:not(#_) .ikf-reel .ik-post__top img { width: 22px; height: 22px; }
.ikf-reel .ik-post__pic { aspect-ratio: 3 / 2; }
html body.ik:not(#_) .ikf-reel .ik-post__pic img { object-position: center 20%; }
html body.ik:not(#_) p.ikf-reel__ask { padding: 8px 10px 10px; font-size: 12px; font-weight: 500; line-height: 1.3; color: #111; }
.ikf-cmts { width: min(270px, 100%); }
/* Sam's comment wraps, so the whole question shows. */
html body.ik:not(#_) .ikf-cmts .ik-inbox__row.is-on .ik-inbox__txt { white-space: normal; line-height: 1.5; }
html body.ik:not(#_) .ikf-cmts .ik-inbox__row.is-on { margin: 0 -6px; padding: 6px 8px; border-top-color: transparent; border-radius: 10px; background: var(--cf-mist); }
html body.ik:not(#_) .ikf-cmts .ik-inbox__row.is-on + .ik-inbox__row { border-top-color: transparent; }
.ikf-dm { width: min(250px, 100%); transform: rotate(1.5deg); }
.ikf-dm .ik-dm__msgs { gap: 6px; padding-top: 10px; font-size: 13px; }
html body.ik:not(#_) .ikf-dm :is(p.ik-dm__in, p.ik-dm__btn) { max-width: 100%; padding: 8px 11px; border-radius: 16px; }
html body.ik:not(#_) .ikf-dm p.ik-dm__btn { align-self: stretch; padding: 7px 10px; font-size: 13px; }
.ikf-web { display: flex; flex-direction: column; gap: 10px; width: min(250px, 100%); padding: 10px; border-radius: 18px; background: #fff; color: #111; transform: rotate(-1.5deg); }
html body.ik:not(#_) p.ikf-web__url { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--cf-mist); font-size: 12px; color: #52525b; }
.ikf-web__body { display: flex; align-items: center; gap: 10px; }
html body.ik:not(#_) .ikf-web__body img { flex: none; width: 54px; height: 54px; border-radius: 12px; object-fit: cover; object-position: center 20%; }
.ikf-web__body span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.3; }
.ikf-web__body b { font-weight: 600; }
.ikf-web__body i { font-style: normal; font-size: 12px; color: #63636b; }
.ikf-web__btn { padding: 9px 10px; border-radius: 10px; background: var(--cf-ink); font-size: 13px; font-weight: 600; color: #fff; text-align: center; }

/* ---------- 3. Offers: the homepage use-case card, with a longer DM ---------- */
html body.ik.ikf:not(#_) .ik-ucard .ik-art { height: 220px; }
/* The post on the left, the DM on the right, side by side so neither hides the other. */
html body.ik.ikf:not(#_) .ik-ucard__pic.ikf-tile { width: 38%; }
html body.ik.ikf:not(#_) .ik-ucard__cmt { right: auto; padding: 4px 8px 4px 5px; }
html body.ik.ikf:not(#_) .ik-ucard__dm { width: 54%; }
html body.ik.ikf:not(#_) .ik-ucard__dm p.ik-dm__btn { align-self: stretch; text-align: center; }

/* The coach's posts as text tiles: her handle, a label, the headline, the keyword line. One colour per trigger. */
html body.ik:not(#_) .ikf-tile { display: flex; flex-direction: column; gap: 5px; padding: 9px 9px 10px; color: var(--cf-ink); }
.ikf-tile--comment { background: #f3efe6; }
html body.ik:not(#_) .ikf-tile--story { background: var(--cf-ink); color: #fff; }
.ikf-tile--dm { background: #fff; }
.ikf-tile__by { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 600; opacity: .8; }
html body.ik:not(#_) .ikf-tile__by img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.ikf-tile__k { margin-top: 4px; font-size: 9px; font-weight: 600; letter-spacing: .1em; color: #8a6d3b; }
.ikf-tile--story .ikf-tile__k { color: var(--cf-lime); }
.ikf-tile--dm .ikf-tile__k { color: #6b4fd8; }
.ikf-tile__ask { margin-top: auto; align-self: flex-start; padding: 4px 8px; border-radius: 999px; background: var(--cf-ink); font-size: 10px; font-weight: 600; color: #fff; }
.ikf-tile__h { font-size: 15px; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
/* Photo tiles: the creator's own photo fills the post; the label and title sit on a dark fade at the top. */
html body.ik:not(#_) .ikf-tile--photo { position: relative; color: #fff; background: #222; }
html body.ik:not(#_) .ikf-tile--photo img.ikf-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
html body.ik:not(#_) .ikf-tile--photo::before { content: ""; position: absolute; z-index: 1; inset: 0 0 45% 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent); }
html body.ik:not(#_) .ikf-tile--photo > :not(img):not(.ik-ucard__cmt) { position: relative; z-index: 2; }
html body.ik:not(#_) .ikf-tile--photo > .ik-ucard__cmt { z-index: 2; }
html body.ik:not(#_) .ikf-tile--photo .ikf-tile__k { color: var(--cf-lime); }
html body.ik:not(#_) .ikf-tile--photo .ikf-tile__by { opacity: 1; }
html body.ik:not(#_) .ikf-tile--photo .ikf-tile__ask { position: relative; z-index: 1; background: #fff; color: var(--cf-ink); }
/* The follower's keyword sits on the tile's lower edge, as a comment on the post. */
html body.ik.ikf:not(#_) .ikf-tile .ik-ucard__cmt { color: #111; }

/* ---------- 5. Setup: the real builder pictures, cut at the frame ---------- */
html body.ik.ikf:not(#_) .ikf-steps .ik-art { height: 210px; padding: 18px; }
/* The steps are white cards on the ink band, so their words take the light-surface colours. */
html body.ik:not(#_) .ikf-steps h3.ik-h3 { color: var(--cf-text); }
html body.ik:not(#_) .ikf-steps p.ik-p { color: var(--cf-text-2); }
html body.ik.ikf:not(#_) .ikf-steps .ik-art:has(.ikf-shot) { justify-content: flex-start; padding: 18px 18px 0; }
/* The builder picture fades out at the frame edge, so the cut reads as a crop, not a fault. */
.ikf-shot { width: min(330px, 100%); overflow: hidden; border-radius: 14px 14px 0 0; background: #fff; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
html body.ik:not(#_) .ikf-shot img { width: 100%; height: auto; }
html body.ik:not(#_) p.ikf-test { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--cf-on-ink-2); }
.ikf-test b { font-weight: 600; color: var(--cf-on-ink); }

/* ---------- 6. Facts: three white lists, then the price row ---------- */
html body.ik:not(#_) .ikf-know { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body.ik:not(#_) .ikf-list { display: flex; flex-direction: column; padding: 22px 24px 24px; border-radius: 28px; background: #fff; color: var(--cf-text); }
html body.ik:not(#_) p.ikf-list__t { margin-bottom: 8px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
html body.ik:not(#_) .ikf-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--cf-text-2); }
.ikf-list li > i { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--cf-lime); color: var(--cf-ink); }
.ikf-list li > i.is-dot { background: var(--cf-mist); }
.ikf-list li > i.is-dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8a8a92; }
html body.ik:not(#_) a.ikf-list__link { align-self: flex-start; margin-top: auto; padding-top: 16px; font-size: 15px; font-weight: 600; color: var(--cf-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body.ik:not(#_) .ikf-price { display: grid; grid-template-columns: minmax(0, 1.1fr) auto auto; gap: 32px; align-items: center; margin-top: 12px; padding: 20px 24px; border-radius: 28px; background: #fff; color: var(--cf-text); }
html body.ik:not(#_) p.ikf-price__t { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
html body.ik:not(#_) p.ikf-price__p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--cf-text-2); }
html body.ik:not(#_) .ikf-price__plans { display: flex; gap: 8px; }
html body.ik:not(#_) .ikf-price__plans li { display: flex; flex-direction: column; min-width: 128px; padding: 10px 14px; border-radius: 16px; background: var(--cf-mist); }
.ikf-price__plans span { font-size: 13px; font-weight: 500; color: var(--cf-text-2); }
.ikf-price__plans b { font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.03em; }
.ikf-price__plans b small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--cf-text-3); }
.ikf-price__plans i { font-style: normal; font-size: 12px; color: var(--cf-text-3); white-space: nowrap; }
html body.ik:not(#_) a.ikf-price__link { font-size: 15px; font-weight: 600; color: var(--cf-text); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- 7. Proof: only the rating line under the quotes ---------- */
html body.ik:not(#_) .ikf-tp { padding: 16px 24px; }
html body.ik:not(#_) .ikf-tp .ik-tp__top a { padding: 8px 0; }

/* ---------- 8. FAQ: related pages as one inline line under the heading ---------- */
/* pricing-redesign-2026-07.css paints #faq white with !important; the sheet stays mist like every other sheet. */
html body.ik.ikf:not(#_) section#faq.ik-sheet { background: var(--cf-mist) !important; }
html body.ik:not(#_) p.ikf-more { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 24px; font-size: 15px; color: var(--cf-text-2); }
.ikf-more span { width: 100%; font-weight: 600; color: var(--cf-text); }
html body.ik:not(#_):not(#_) [role="main"] p.ikf-more a { color: var(--cf-text-2); }
html body.ik:not(#_):not(#_) [role="main"] p.ikf-more a:hover { color: var(--cf-text); }


/* ---------- Tablets ---------- */
@media (max-width: 1099px) {
  html body.ik:not(#_) .ikf-know { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.ik:not(#_) .ikf-price { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html body.ik:not(#_) .ikf-price__plans li { flex: 1; min-width: 0; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  html body.ik.ikf:not(#_) .ikf-story .ik-art { height: 220px; }
  html body.ik.ikf:not(#_) .ikf-steps .ik-art { height: 190px; }
  /* Rows swipe sideways like every other card row (INK-SYSTEM.md, section 2). */
  html body.ik:not(#_):not(#_) .ikf-know.ik-scroll { display: flex; }
  html body.ik:not(#_) .ikf-list { padding: 20px; }
  html body.ik:not(#_) .ikf-price { padding: 20px; }
  html body.ik:not(#_) .ikf-price__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  html body.ik:not(#_) .ikf-price__plans li { padding: 10px; }
  .ikf-price__plans i { white-space: normal; font-size: 11px; line-height: 1.3; }
  /* Offer cards: the post a little wider, the DM over its lower right corner. */
  html body.ik.ikf:not(#_) .ik-ucard__pic.ikf-tile { width: 42%; }
  html body.ik.ikf:not(#_) .ik-ucard__dm { width: 55%; right: 8px; }
  /* The keyword alone on the post's edge, so it clears the DM card. */
  html body.ik.ikf:not(#_) .ikf-tile .ik-ucard__cmt img { display: none; }
  html body.ik.ikf:not(#_) .ikf-tile .ik-ucard__cmt { left: 4px; bottom: 4px; padding: 3px; }
  .ikf-tile__h { font-size: 13px; }
  .ikf-price__plans b { font-size: 22px; }
  .ikf-price__plans b small { display: block; font-size: 12px; }
  html body.ik:not(#_) p.ikf-test { font-size: 14px; }
  /* By hand vs CreatorFlow: the whole comment fits next to its tag on a phone. */
  html body.ik.ikf:not(#_) .ik-vs__card .ik-art { padding: 10px 6px; }
  html body.ik.ikf:not(#_) .ik-vs .ik-inbox { width: 100%; padding: 8px 10px; }
  html body.ik.ikf:not(#_) .ik-vs .ik-inbox__row { gap: 6px; font-size: 12px; }
  html body.ik.ikf:not(#_) .ik-vs .ik-inbox__row img { display: none; }
  html body.ik.ikf:not(#_) .ik-vs .ik-inbox__row .ik-kw { padding: 1px 5px; }
  html body.ik.ikf:not(#_) .ik-vs .ik-inbox__tag { padding: 3px 7px; font-size: 10px; }
}

/* Reel card in the story frame on phones (2026-11-04): the 220px frame squeezed the card, so a two-line caption lost its
   last line. The card keeps its height and its photo is a little shorter. */
html body.ik:not(#_) .ikf-reel { flex-shrink: 0; }
@media (max-width: 480px) {
  html body.ik:not(#_) .ikf-reel .ik-post__pic { aspect-ratio: 16 / 9; }
}