/* ---------- the head and the index, on ink ---------- */

.fhead { background: var(--ink); padding: 96px var(--inset); }
.fhead .h-close { max-width: 980px; color: var(--paper); letter-spacing: -0.04em; }
.fhead .lead { margin-top: 24px; max-width: 620px; color: var(--on-ink-2); }
.disclose { margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--on-ink-2); }
.findex { margin-top: 48px; padding: 24px 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.index-group { display: flex; flex-direction: column; gap: 2px; }
.index-group h2 { padding-bottom: 8px; font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.index-group ul { list-style: none; }
.index-group a {
  min-height: 36px; display: flex; align-items: center; border-bottom: 1px solid var(--row);
  font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.index-group li:last-child a { border-bottom: 0; }
.index-group a:hover { color: var(--action-ink); }
.index-group a:focus-visible { outline: 2px solid var(--action-ink); outline-offset: 2px; }

/* ---------- the three parts ---------- */

.fpart { padding: 152px var(--inset) 0; }
.fpart:first-of-type { padding-top: 120px; }
.part {
  display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.part span { color: var(--ink); }
.flead { margin-top: 20px; font-size: 19px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.shot { display: flex; flex-direction: column; gap: 14px; }
.shot figcaption { gap: 6px; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.shot .phone { --s: 0.8; }

/* 1: the usual before and after, the correction under it, then the three ways in */
.usual-scene { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: start; }
.usual-copy { padding-top: 40px; }
.fix { margin-top: 48px; padding: 20px; }
.fix .crop { border-radius: 14px; }
.fix h4 { margin-top: 18px; font-size: 22px; line-height: 1.2; }
.fix p, .tool p, .trend p { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.usual-pair { display: flex; gap: 24px; align-items: flex-start; }
.shot-after { margin-top: 72px; }

.ways-head { margin: 152px auto 0; max-width: 760px; text-align: center; }
.ways-head .flead { margin: 20px auto 0; max-width: 620px; }
.fways { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 40px; align-items: end; list-style: none; }
.fway { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.fway .phone { --s: 0.76; }
.fway-plate .phone { --s: 0.86; }
.fway h3 { justify-content: center; font-size: 21px; line-height: 1.3; font-weight: 700; text-wrap: balance; }
.fway p { margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--text-2); }
.keyline.centred { justify-content: center; }
.fpart > .keyline { margin-top: 28px; }

/* 2: four tools, each a window on its screen */
.tools-h { margin-top: 56px; max-width: 760px; letter-spacing: -0.03em; }
.tools { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; list-style: none; }
.tool { padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.tool.text-only { align-self: start; }
.tool .crop, .trend .crop { max-width: 482px; margin: 0 auto; }
.tool p, .trend p { margin-top: 8px; font-size: 17px; }

/* 3: the recap pair, the trend and the extras */
.progress-scene { margin-top: 72px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 72px; align-items: center; }
.recap-pair { display: flex; gap: 24px; align-items: flex-start; }
.shot-week { margin-top: 72px; }
.progress-more { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.trend { padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.trend h4 { font-size: 24px; line-height: 1.2; }
.extras { display: flex; flex-direction: column; gap: 16px; list-style: none; }
.extra { padding: 24px; display: flex; gap: 16px; align-items: flex-start; }
.extra-glyph { width: 48px; height: 48px; border-radius: 14px; background: var(--row); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.extra-glyph .icon { width: 24px; height: 24px; }
.extra h3 { font-size: 19px; line-height: 1.3; font-weight: 700; text-wrap: balance; }
.extra p { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* ---------- the close ---------- */

.fclose { margin-top: 160px; }
.fclose .closemark { right: -100px; bottom: -200px; width: 600px; height: 600px; }
.fclose .close-in { padding: 120px; display: flex; flex-direction: column; gap: 36px; }
.fclose-line { max-width: 900px; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.fclose .signup, .fclose .receipt { width: 100%; }

/* ---------- widths between the two drawn ---------- */

@media (max-width: 1193px) and (min-width: 744px) {
  .usual-scene, .progress-scene, .progress-more { grid-template-columns: minmax(0, 1fr); }
  .fways { gap: 16px; }
  .fway .phone { --s: 0.5; }
  .fway-plate .phone { --s: 0.58; }
  .tools { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .fclose .close-in { padding: 120px var(--inset); }
}

/* ---------- phone width ---------- */

@media (max-width: 743px) {
  .fhead { padding: 48px 24px 56px; }
  .fhead .h-close { font-size: 44px; line-height: 1.02; letter-spacing: -0.035em; }
  .fhead .lead { margin-top: 16px; font-size: 18px; }
  .disclose { margin-top: 8px; }
  .findex { margin-top: 28px; padding: 0 20px 8px; display: flex; flex-direction: column; gap: 0; }
  .index-group { padding-top: 16px; gap: 0; }
  .index-group h2 { padding-bottom: 4px; line-height: 16px; }
  .index-group a { min-height: 44px; line-height: 1.3; }
  .index-group:not(:last-child) li:last-child a { border-bottom: 1px solid var(--row); }

  .fpart { padding: 88px 0 0; }
  .fpart:first-of-type { padding-top: 72px; }
  .part { margin: 0 24px; gap: 8px; padding-bottom: 12px; }
  .flead { margin-top: 14px; font-size: 17px; }
  .shot { gap: 12px; }

  .usual-scene { margin-top: 32px; display: flex; flex-direction: column; gap: 28px; }
  .usual-copy { display: contents; }
  .usual-copy > .h-scene, .usual-copy > .flead { padding: 0 24px; }
  .usual-copy > .flead { margin-top: -14px; }
  .usual-pair { order: 1; align-self: center; }
  .shot-before { display: none; }
  .shot-after { margin-top: 0; align-items: center; }
  .shot-after .phone { --s: 0.82; }
  .fix { order: 2; margin: 0 24px; padding: 16px; }
  .fix .crop { border-radius: 12px; }
  .fix h4 { margin-top: 14px; font-size: 20px; }

  .ways-head { margin: 88px 24px 0; text-align: left; }
  .ways-head .flead { margin-top: 14px; max-width: none; }
  .fways { margin-top: 28px; display: flex; gap: 16px; }
  .fway { width: 266px; align-items: stretch; gap: 14px; text-align: left; }
  .fway-plate { order: -1; }
  .fway .phone, .fway-plate .phone { --s: 0.62; }
  .fway h3 { justify-content: flex-start; font-size: 19px; }
  .fway p { margin-top: 4px; font-size: 15px; }
  .fpart > .keyline { margin: 20px 24px 0; }
  .keyline.centred { justify-content: flex-start; }

  .tools-h { margin: 32px 24px 0; font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; }
  .tools { margin: 24px 24px 0; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tool, .trend { padding: 16px; gap: 16px; }
  .tool .crop, .trend .crop { border-radius: 12px; }
  .tool p, .trend p { margin-top: 6px; font-size: 16px; }
  .trend { gap: 14px; }
  .trend h4 { font-size: 20px; }

  .progress-scene { margin-top: 32px; display: flex; flex-direction: column-reverse; gap: 28px; }
  .progress-scene > div:last-child { padding: 0 24px; }
  .shot-week { order: -1; margin-top: 0; }
  .recap-pair { gap: 16px; }
  .shot-day .phone, .shot-week .phone { --s: 0.62; }
  .progress-more { margin: 24px 24px 0; display: block; }
  .extras { margin-top: 16px; gap: 0; padding: 4px 16px; background: var(--white); border-radius: var(--radius); box-shadow: var(--card-shadow); }
  .extra { padding: 14px 0; gap: 14px; background: none; border-radius: 0; box-shadow: none; }
  .extra + .extra { border-top: 1px solid var(--row); }
  .extra-glyph { width: auto; height: 26px; background: none; }
  .extra h3 { font-size: 17px; line-height: 26px; }
  .extra p { margin-top: 2px; font-size: 15px; }

  .fclose { margin-top: 72px; }
  .fclose .closemark { right: -70px; bottom: -64px; width: 320px; height: 320px; }
  .fclose .close-in { padding: 72px 24px; gap: 24px; }
  .fclose-line { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
}