/* ============================================================
   solutions/individuals.html — the four-tile section (#perks).
   Structure and spacing follow monzo.com/credit-cards' "Available with
   all our credit cards" row (user, 2026-10-05): a left-aligned heading
   and line, then four equal square tiles, each a picture with a heading
   and two lines under it. Type, colour, radii and spacing are the house
   system's (tokens.css / styles.css). Images and copy are placeholders
   from the site's existing assets until the client supplies final ones.
   ============================================================ */

.iv-perks { padding-block: var(--sp-40); }
.iv-perks__head { max-width: 46rem; }
.iv-perks__line {
  margin-top: var(--sp-12);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}

.iv-perks__grid {
  list-style: none;
  margin: var(--sp-40) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-20);
}
.iv-perks__media {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius--2xl);
  background: var(--color--grey-50);
}
.iv-perks__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iv-perks__media--top img { object-position: 50% 0; }   /* app screens: keep the phone's top */
/* app-vocab.png's phone starts 124px down (of 848×1136), goal-roadmap.jpg's at
   64px (of 848×848), same phone width: show y 60–908 so both phones start at
   the same height (user 2026-10-11). 60 / (1136 − 848) = 20.833%. */
.iv-perks__media--vocab img { object-position: 50% 20.833%; }
.iv-perks__title {
  margin-top: var(--sp-20);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--kern-heading);
  color: var(--color--grey-1000);
}
.iv-perks__text {
  margin-top: var(--sp-8);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}

/* The FAQ follows straight after: keep the usual section gap. */
/* The sections run straight on: keep one section gap between them. */
.iv-perks + .section { padding-top: var(--sp-40); }

@media (max-width: 960px) {
  .iv-perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-32); }
}
@media (max-width: 560px) {
  .iv-perks__grid { grid-template-columns: minmax(0, 1fr); }
}

/* §4.1.2 Hangul */
:lang(ko) .iv-perks h2,
:lang(ko) .iv-perks__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); word-break: keep-all; }
:lang(ko) .iv-perks p { line-height: var(--lh-ko-body); word-break: keep-all; }

/* ============================================================
   #daily — bevel.health's "Start the day with confidence" section, whole
   (user, 2026-10-05: measured live at 1440, down to its last card):
   - a centred heading and line;
   - three tall cards (437 × 739, radius 24, title at 48/48, 40px/600),
     each with a phone 77% wide rising from y 238 and running off the
     bottom edge;
   - then two full-width cards (1376 × 658): "text left, two columns of
     screens bleeding off the top and bottom on the right", and "phone left
     with icon tiles floating round it, text right" (title 64px/600).
   - Every card is a light ground tinting towards its foot.
   Colours are Lattice's pastel rungs from tokens.css (lime, purple, teal,
   violet, blue 200 over sand-100); type is the house DM Sans ladder; the
   phone is the site's frame (assets/belief/phone-frame-noshadow-tall.webp, 848 units, its
   last rows stretched below the square as on the business page). Images and
   copy are placeholders until the client supplies final ones.
   ============================================================ */

.iv-daily { padding-block: var(--sp-40); }
.iv-daily .wrap { max-width: calc(1376px + 2 * var(--gutter)); }   /* Bevel's row: 1376px of cards at 1440 */
.iv-daily__head { text-align: center; }
.iv-daily__line {
  margin: var(--sp-12) auto 0;
  max-width: 36rem;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}
.iv-daily__grid {
  list-style: none;
  margin: var(--sp-40) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-20);
}

/* Every card: a neutral light ground (grey-50, as Bevel's cool grey) that
   picks up a soft Lattice pastel from a third of the way down. The 100 rungs,
   full only at the foot, keep the colour gentle (user, 2026-10-05: "너무 강해,
   좀더 부드럽게"). */
.iv-daily__card,
.iv-daily__wide {
  --_tint: var(--color--lime-100);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius--2xl);
  background-color: var(--color--white);
  background-image:
    linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--_tint) 60%, transparent) 75%, var(--_tint) 100%),
    linear-gradient(var(--color--grey-50), var(--color--grey-50));
}
.iv-daily [data-tint='purple'] { --_tint: var(--color--purple-100); }
.iv-daily [data-tint='teal']   { --_tint: var(--color--brand-100); }
.iv-daily [data-tint='violet'] { --_tint: var(--color--violet-100); }
.iv-daily [data-tint='blue']   { --_tint: var(--color--blue-50); }

/* The three tall cards: Lattice MCP's tile gradient pairs, top colour to
   bottom colour (lattice.com/platform/mcp), each mixed to 35% with white so
   the colour stays faint (user picked option B, 2026-10-05: "35% — 아주
   연하게"). Speak yellow → aqua, Learn aqua → green, Grow pink → lavender. */
.iv-daily__card[data-tint] {
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--_from) 35%, var(--color--white)),
    color-mix(in oklab, var(--_to) 35%, var(--color--white)));
}
.iv-daily__card[data-tint='lime']   { --_from: var(--color--yellow-100); --_to: var(--color--blue-100); }
.iv-daily__card[data-tint='purple'] { --_from: var(--color--blue-100);   --_to: var(--color--green-100); }
.iv-daily__card[data-tint='teal']   { --_from: var(--color--pink-100);   --_to: var(--color--purple-100); }

/* §4.1 puts 500 on every heading row, jumbo through h6; §9.3.2 scopes the only
   600 on this page to the hero's rotating word. These cards are not that hero.
   Line-height and tracking follow the rank the size lands on: h3 here, h1 on
   the wide cards below. (Was 600 / 1.2 / −0.016em — the Hangul row from §4.1.2
   applied to English type.) */
.iv-daily__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-snug);          /* §4.1 h3 row: 1.1 */
  letter-spacing: var(--kern-heading);  /* §4.1 h3 row: −0.016em */
  color: var(--color--grey-1000);
}
/* §4.1.2: Hangul keeps 1.2 / −0.016em at every heading rank. */
:lang(ko) .iv-daily__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
.iv-daily__text {
  margin-top: var(--sp-8);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}

/* ---- Tall cards ---- */
.iv-daily__card { aspect-ratio: 437 / 739; }
.iv-daily__card .iv-daily__body { position: relative; z-index: 2; padding: 11% 11% 0; }

/* The phone: ONE image, phone-frame-noshadow-tall.webp (848 x 1400 units) —
   the frame's 848 square with its last row baked down to 1400. It used to be
   the square <img> plus a CSS background stretching that row below it; the two
   were resampled differently, so at some widths and zooms the rails stepped
   sideways at the join (user, 2026-10-06: "약간 깨져 보이는데"). One image has
   no join. The app screen sits under the opening. */
.iv-phone {
  position: absolute;
  aspect-ratio: 848 / 1400;
}
.iv-phone__screen {
  position: absolute;
  left: calc(143 / 848 * 100%);
  top: calc(218 / 1400 * 100%);
  width: calc(560 / 848 * 100%);
  height: auto;
  display: block;
}
.iv-phone__frame { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
/* Bevel: the phone's body is 77% of the card's width, its top at 32% of
   the card's height. Our frame's body spans x 122–723 and starts at y 111
   of 848, so the box is sized and offset to put the body there. */
.iv-daily__card .iv-phone { left: -4.3%; width: 109%; top: 23.8%; }
/* Responsive fix (user, 2026-10-06: at ~1000px the line ran into the phone).
   The phone now follows the text in the flow instead of sitting at a fixed
   23.8% of the card: the body is at least tall enough to put the phone box
   exactly there (so wide screens look as before), and when the line wraps
   longer the phone moves down with it, its frame always a 1rem gap below the
   last line. 111/848 of the phone box is the frame's transparent top. */
.iv-daily__card { container-type: size; display: flex; flex-direction: column; }
.iv-daily__card .iv-daily__body {
  flex: none;
  min-height: calc(23.8cqh + 111 / 848 * 109cqw - var(--sp-16));
}
.iv-daily__card .iv-phone {
  position: relative;
  flex: none;
  left: auto;
  top: auto;
  margin: calc(var(--sp-16) - 111 / 848 * 109cqw) 0 0 -4.3cqw;
}
/* Where the three lines wrap to different lengths (one card four lines, the
   others three), every line holds four lines' room, so the three phones keep
   one top across the row. */
@media (min-width: 961px) and (max-width: 1240px) {
  .iv-daily__card .iv-daily__text { min-height: 4lh; }
  :lang(ko) .iv-daily__card .iv-daily__text { min-height: 3lh; }   /* the KO lines run one shorter */
}

/* ---- Wide cards ---- */
.iv-daily__wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  margin-top: var(--sp-20);
  aspect-ratio: 1376 / 658;
}
/* The inset is the one the three .iv-daily__card siblings use: 11% of their own
   card, 47.5px at 1440. The wide cards share those cards' left edge, so their
   titles have to start on the same line - at 5.8% of this card's narrower body
   column the title began 17.4px left of its siblings' and broke the section's
   reading edge (system critic, 2026-10-06). 9.14% of the column is that same
   47.5px. The rem floor keeps the share off the 20px minimum when the column
   narrows. */
.iv-daily__wide .iv-daily__body { position: relative; z-index: 2; padding-inline: max(1.25rem, 9.14%); }
/* The wide cards set the h1 rank, so they take the h1 row with it. */
.iv-daily__wide .iv-daily__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);          /* §4.1 h1 row: 1.0 */
  letter-spacing: var(--kern-headline);  /* §4.1 h1 row: −0.024em */
}
:lang(ko) .iv-daily__wide .iv-daily__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
.iv-daily__wide .iv-daily__text { max-width: 26rem; font-size: var(--fs-body-2xl); }   /* 1.6rem — exactly half the 3.2rem heading */

/* Wide card 1: text left, two devices on the right — praktika.ai's card,
   measured 2026-10-05 and written up in bar-roadmap-card.md.

   The three numbers that make that card work: the device is TALLER than the
   card (115% of its height, so it cannot read as a picture inside a box), the
   two devices are the SAME size, and the bleed is symmetric — one off the
   bottom, one off the top, 25% of the card's height each.

   Our frame asset is narrower than the reference's (its body spans 122–723 of
   848, so the visible device is 0.71 of the box), so the BOX is 33.3% of the
   card where the reference's device is 26%. Same device on screen, different
   wrapper. */
.iv-daily__cols { position: static; }
/* This card uses a WHOLE device: `phone-frame-full.webp` carries the top cap,
   the rails and a bottom cap, so the phone that ends inside the card ends with a
   device bottom instead of the sawn-off rails the `__ext` trick produced. The
   box is the device — no transparent padding — so the bar's height and bleed are
   measured on what the eye sees. */
.iv-daily__wide--cols .iv-phone { aspect-ratio: 880 / 1833; }
.iv-daily__wide--cols .iv-phone__frame { height: 100%; }
/* The opening measured on the asset: x 42-838, y 35-1798 of 880 x 1833. The
   frame paints over the screenshot, so its bezel masks the shot's square
   corners - the screen needs no radius of its own. `contain` keeps the
   screenshot an unaltered crop; the white ground behind it continues the app's
   own white background into the last 2% of the opening. */
.iv-daily__wide--cols .iv-phone__screen {
  left: calc(42 / 880 * 100%);
  top: calc(35 / 1833 * 100%);
  width: calc(797 / 880 * 100%);
  height: calc(1764 / 1833 * 100%);
  object-fit: contain;
  object-position: top center;
  background: #fff;
  /* The opening's own corner radius, measured on the asset: ~100 of 880 units
     (inner edge reaches full width ~105 rows in at top and bottom). Without it
     the screen's white square corners showed past the bezel's rounded bottom
     corners (user, 2026-10-06: "튀어 나왔는데 흰색 부분"). */
  border-radius: calc(90 / 797 * 100%) / calc(90 / 1764 * 100%);
}
/* Our device is now 0.480 wide-to-tall against the reference's 0.49, so the
   bar's original 26% applies and the width amendment is retired. */
.iv-daily__wide--cols .iv-phone { width: 26%; }
/* The right-hand device stops with its black bezel WHOLE against the card's
   right edge. The client checked the reference and pointed this out directly
   (2026-10-06: "praktika는 오른쪽 목업 검정 라인이 보이는데, 아보링고 홈페이지는
   목업 라인이 안보여서 어색해") - praktika does not cut that bezel at all, it
   stands the device at the edge. The asset carries a 7px transparent margin, so
   the image box still crosses the edge while the painted device stops just
   inside it. Only the TOP of this device bleeds; only the BOTTOM of the other. */
.iv-daily__wide--cols .iv-phone--one { left: 43.4%; top: 12%;    z-index: 1; }
.iv-daily__wide--cols .iv-phone--two { left: 74%;   top: -25.3%; z-index: 2; }

.iv-daily__wide--cols { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
.iv-daily__wide--cols .iv-daily__body {
  grid-column: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* the reference parks the heading at the top and the line at the foot */
  padding-block: 7% 9%;
}

/* Wide card 2: phone left with flag tiles floating round it, text right. */
.iv-daily__wide--flags .iv-daily__body { grid-column: 2; padding-left: 16%; }
.iv-daily__wide--flags .iv-phone { left: -0.8%; width: 39%; top: 9%; }
.iv-flag {
  position: absolute;
  z-index: 1;
  /* 2026-10-09: the official Tossface flag (css/site.css .toss-flag) with its
     language name under it, so a flag is never read as the only label. */
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.7rem 0.5rem;
  border-radius: var(--radius--l);
  background: var(--color--white);
  box-shadow: var(--shadow--card);
  transform: rotate(var(--r, 0deg));
}
.iv-flag .toss-flag { font-size: 1.6rem; }
.iv-flag__name { font-size: var(--fs-label); font-weight: 500; line-height: 1.2; color: var(--color--grey-1000); white-space: nowrap; }

@media (max-width: 960px) {
  .iv-daily__grid { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; }
  .iv-daily__wide { display: block; aspect-ratio: auto; max-width: 30rem; margin-inline: auto; padding-top: var(--sp-40); }
  .iv-daily__wide .iv-daily__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--kern-heading);
  }
  .iv-daily__wide .iv-daily__body,
  .iv-daily__wide--flags .iv-daily__body { padding: 0 11%; }
  .iv-daily__wide--cols { height: 40rem; }
  /* Stacked: copy first, devices in a band of their own underneath, so a phone
     can never sit on top of the paragraph (craft critic, 2026-10-06). */
  /* Stacked: copy first, then a band that holds the pair in flow. The band is a
     share of the card's width (aspect-ratio), and so is the devices' height, so
     the two cannot drift apart as the root size changes. The front device ends
     inside the band with its bottom bezel whole; the back one hangs 12.5% of the
     card's width past it and is cut by the card, well clear of its bezel - a
     bleed, never the thin nick a fixed rem band produced at 860 (brief critic,
     2026-10-06). */
  .iv-daily__wide--cols { height: auto; grid-template-columns: minmax(0, 1fr); }
  .iv-daily__wide--cols .iv-daily__body { padding-block: 7% 0; justify-content: flex-start; }
  .iv-daily__wide--cols .iv-daily__text { margin-top: var(--sp-16); }
  .iv-daily__wide--cols .iv-daily__cols {
    display: flex;
    min-height: 0;   /* the grid row is the aspect-ratio band, not the taller device */
    justify-content: center;
    align-items: flex-start;
    gap: 4%;
    aspect-ratio: 1 / 0.95;
    margin-top: var(--sp-16);
  }
  .iv-daily__wide--cols .iv-phone { position: relative; left: auto; top: auto; width: 42%; }
  .iv-daily__wide--cols .iv-phone--one { margin-top: 20%; }   /* % of the band's width */
  .iv-daily__wide--cols .iv-phone--two { margin-top: 0; }
  /* Stacked like the card above: copy first, then a band of its own for the
     phone and the flags, so a long paragraph (bigger text, longer languages)
     can never run under the phone (user, 2026-10-14: cut off on iPhone). The
     band is the grid's second row, sized by ::after; the phone and flags are
     placed in that row, so their absolute positions are shares of the band. */
  .iv-daily__wide--flags {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--sp-24);
  }
  .iv-daily__wide--flags .iv-daily__body { grid-row: 1; grid-column: 1; }
  .iv-daily__wide--flags::after { content: ''; grid-row: 2; grid-column: 1; aspect-ratio: 1 / 1.08; }
  .iv-daily__wide--flags .iv-phone,
  .iv-daily__wide--flags .iv-flag { grid-row: 2; grid-column: 1; }
  .iv-daily__wide--flags .iv-phone { left: 22%; width: 56%; top: 2%; }
  .iv-flag { padding: 0.45rem 0.55rem 0.4rem; }
  .iv-flag .toss-flag { font-size: 1.35rem; }
  /* Flags either side of the phone, down the band (inline desktop positions
     overridden). The right-hand column is anchored to the right edge, so a
     long name (Französisch, Tiếng Pháp) grows inwards instead of being cut. */
  .iv-daily__wide--flags .iv-flag:nth-of-type(1) { left: 5% !important;  top: 10% !important; }
  .iv-daily__wide--flags .iv-flag:nth-of-type(2) { left: auto !important; right: 4% !important; top: 7% !important; }
  .iv-daily__wide--flags .iv-flag:nth-of-type(3) { left: 3% !important;  top: 32% !important; }
  .iv-daily__wide--flags .iv-flag:nth-of-type(4) { left: auto !important; right: 3% !important; top: 29% !important; }
  .iv-daily__wide--flags .iv-flag:nth-of-type(5) { left: 6% !important;  top: 54% !important; }
  .iv-daily__wide--flags .iv-flag:nth-of-type(6) { left: auto !important; right: 5% !important; top: 51% !important; }
  .iv-daily__wide--flags .iv-flag:nth-of-type(7) { left: 4% !important;  top: 76% !important; }
  .iv-daily__wide--flags .iv-flag:nth-of-type(8) { left: auto !important; right: 3% !important; top: 73% !important; }
}

:lang(ko) .iv-daily h2,
:lang(ko) .iv-daily__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); word-break: keep-all; }
:lang(ko) .iv-daily p { line-height: var(--lh-ko-body); word-break: keep-all; }

/* Nav alignment: the same as the homepage (site.css, "NAV ALIGNMENT —
   HOMEPAGE ONLY"). With the full-bleed photo hero (#hero, .iv-hero), the
   logo and the right-hand button sit at the homepage's --stage-edge, not the
   72rem .wrap (user, 2026-10-05: "원래 아보링고 메인 랜딩 페이지랑 위치가
   동일하게"). */
body:has(.iv-hero) .nav > .wrap {
  max-width: none;
  padding-inline: var(--stage-edge);
}

/* Square bottom corners (user, 2026-10-06 "아래는 radius 안들어가야") were
   reversed the same day: every box takes the same --radius--2xl on all four
   corners as its top ("다 radius 박스 윗부분처럼 동일하게"). */

/* 2026-10-09 audit (individuals 01): two fixed sentences under the staircase
   headline, so the page says what you do even while line 3 rotates. White on
   the hero's full-frame tint, left on the content edge (centred below 960). */
.iv-hero__sub {
  max-width: 34rem;
  margin: var(--sp-20) 0 0;
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body);
  color: var(--color--white);
  text-wrap: pretty;
}
:lang(ko) .iv-hero__sub { line-height: var(--lh-ko-body); word-break: keep-all; }
@media (max-width: 959.98px) {
  .iv-hero__sub { margin-inline: auto; text-align: center; font-size: var(--fs-body-l); }
}

/* 2026-10-09 phase 2 (individuals): the tags section's plan line, the
   example note under the three phone cards, and the FAQ's pointer to the
   organisation solutions (moved out of the FAQ list). */
.iv-tags__line {
  max-width: 40rem;
  margin: var(--sp-20) auto 0;
  text-align: center;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
  text-wrap: pretty;
}
.iv-daily__note,
.iv-faq__more {
  margin: var(--sp-16) auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color--grey-600);
}
.iv-daily__note { margin-bottom: var(--sp-20); }
.iv-faq__more { margin-top: var(--sp-32); font-size: var(--fs-body); color: var(--color--grey-800); }
:lang(ko) .iv-tags__line,
:lang(ko) .iv-daily__note,
:lang(ko) .iv-faq__more { line-height: var(--lh-ko-body); word-break: keep-all; }