/* r14 (client 3 Oct: "more sections, the UI of Sendly, designs from Taskly and Instapair"; docs/design/REF-r14.md).
   Four sections in Sendly's inset-panel system, Forest & Mint colours, no shadows, no borders:
     links     Sendly feature row: copy left, the art running to the panel's right edge
     features  numbered white cards in a quiet panel, centred head (r17)
     why       r16: one light centred read, the two proofs joined by TrustPay
     vision    Instapair guided read: each line brightens as it reaches the middle of the screen */

.btn-ink { background: #0F201B; color: #FFFFFF; }
.btn-ink:hover { background: #24433A; }
.mr-btn { margin-top: 28px; }
.tint-quiet::before { background: var(--ground-2); }
.tint-quiet::after { display: none; }

/* ---------------------------------------------------------------- links (feature row) */
.mr-sec { padding-block: 0; }
.mr { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: stretch; max-width: var(--max); min-height: clamp(620px, 50vw, 760px); }
.mr-copy { align-self: center; padding-block: clamp(64px, 7vw, 112px); }
.mr-copy .sub { max-width: 26rem; font-size: clamp(1.0625rem, .4vw + .95rem, 1.25rem); }
/* the art: a soft field running to the panel's right, top and bottom edges (clipped by the panel's corners) */
.mr-art { position: relative; display: grid; place-items: center; margin-right: calc(-1 * max(var(--gut), (100vw - 2 * var(--inset) - var(--max)) / 2)); padding: 56px clamp(24px, 4vw, 64px); background: linear-gradient(180deg, #E4F8EE 0%, #CDEFDE 100%); }

.lk { width: min(100%, 480px); padding: 28px 28px 26px; border-radius: 32px; background: #FFFFFF; color: var(--ink); }
.lk-url { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 14px; background: var(--ground-2); color: var(--muted); font-size: 15px; }
.lk-url .i { width: 16px; height: 16px; flex: none; color: var(--brand-text); }
.lk-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-who { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.lk-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--warm-soft); color: #8A3A12; font-weight: 650; font-size: 15px; }
.lk-who b { display: block; font-size: 17px; font-weight: 600; }
.lk-who small { display: block; color: var(--muted); font-size: 14px; }
.lk-amt { display: block; margin-top: 18px; font-size: clamp(44px, 4.4vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.lk-rows { display: grid; margin: 18px 0 0; }
.lk-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 16px; }
.lk-rows dt { color: var(--muted); }
.lk-rows dd { margin: 0; font-weight: 600; text-align: right; }
.lk-act { display: grid; margin-top: 20px; }
.lk-fund, .lk-done { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 99px; font-weight: 650; font-size: 17px; }
.lk-fund { background: var(--brand); color: var(--on-brand); }
.lk-done { background: var(--lock-soft); color: var(--lock-text); opacity: 0; }
.lk-done .i { width: 17px; height: 17px; }
/* once seen: the rows land one by one, Fund is pressed, the money locks (and stays locked) */
html.motion .lk.is-in .lk-rows div { animation: lk-row .6s var(--ease) both; }
html.motion .lk.is-in .lk-rows div:nth-child(1) { animation-delay: .35s; }
html.motion .lk.is-in .lk-rows div:nth-child(2) { animation-delay: .5s; }
html.motion .lk.is-in .lk-rows div:nth-child(3) { animation-delay: .65s; }
html.motion .lk.is-in .lk-fund { animation: lk-press 1.9s var(--ease) both; }
html.motion .lk.is-in .lk-done { animation: lk-lock .5s var(--ease) 1.75s both; }
@keyframes lk-row { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes lk-press { 0%, 72% { transform: none; opacity: 1; } 80% { transform: scale(.96); opacity: 1; } 92%, 100% { transform: none; opacity: 0; } }
@keyframes lk-lock { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .mr { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
  .mr-copy { padding-block: 56px 40px; }
  .mr-art { margin: 0 calc(-1 * var(--gut)); padding: 40px var(--gut); }
}

/* ---------------------------------------------------------------- features (r17: light, centred head, white cards) */
.ft-head { display: grid; justify-items: center; text-align: center; }
.ft-head .mr-btn { margin-top: 24px; }
.ft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1080px; margin: clamp(40px, 4.4vw, 60px) auto 0; }
/* every card the same build: icon + number, then the title and its line; a row shares the tallest card's height */
.ft-card { position: relative; display: flex; flex-direction: column; padding: 26px 26px 28px; border-radius: 22px; background: #FFFFFF; color: var(--ink); }
.ft-card i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); }
.ft-card i .i { width: 22px; height: 22px; }
.ft-card small { position: absolute; top: 38px; right: 26px; color: var(--muted); font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.ft-card b { margin-top: 26px; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.ft-card span { margin-top: 8px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.ft-card .soon { margin-left: 6px; vertical-align: 3px; background: var(--ground-2); color: var(--muted); }
@media (hover: hover) {
  html.motion .ft-card { transition: transform var(--t2) var(--ease); }
  html.motion .ft-card i { transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease); }
  html.motion .ft-card:hover { transform: translate3d(0, -4px, 0); }
  html.motion .ft-card:hover i { background: var(--brand); color: #0F201B; }
}
@media (max-width: 1023px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ft-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ft-card { padding: 22px; } .ft-card small { top: 34px; right: 22px; } .ft-card b { margin-top: 22px; } }

/* ---------------------------------------------------------------- why (r16: light, centred) */
.wy { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); align-items: stretch; max-width: 1040px; margin: clamp(40px, 4.4vw, 60px) auto 0; }
.wy-card { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 26px 28px 30px; border-radius: 24px; background: var(--ground-2); }
.wy-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.wy-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; color: var(--brand-text); }
.wy-ic .i { width: 24px; height: 24px; }
.wy-card small { color: var(--muted); font-size: 14px; }
.wy-card b { margin-top: 4px; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.wy-mid { position: relative; display: grid; justify-items: center; align-content: center; gap: 14px; }
/* the joining line runs card to card behind the mark */
.wy-line { position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; margin-top: -18px; background: var(--brand); transform-origin: 50% 50%; }
.wy-mark { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--brand-soft); }
.wy-mark .tp-mark { width: 34px; height: 38px; }
.wy-say { position: relative; max-width: 180px; text-wrap: balance; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; }
html.motion .wy .wy-line { transform: scaleX(0); transition: transform 1.1s var(--ease) .25s; }
html.motion .wy .wy-mark { transform: scale(.86); opacity: 0; transition: transform .7s var(--ease) .9s, opacity .5s var(--ease) .9s; }
html.motion .wy .wy-say { opacity: 0; transition: opacity .6s var(--ease) 1.15s; }
html.motion .wy.is-in .wy-line { transform: none; }
html.motion .wy.is-in .wy-mark { transform: none; opacity: 1; }
html.motion .wy.is-in .wy-say { opacity: 1; }
@media (max-width: 860px) {
  .wy { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
  .wy-mid { padding-block: 20px; gap: 8px; }
  .wy-line { left: 50%; right: auto; top: -2px; bottom: -2px; width: 2px; height: auto; margin: 0 0 0 -1px; transform-origin: 50% 0; }
  .wy-mark { width: 60px; height: 60px; }
  .wy-mark .tp-mark { width: 27px; height: 30px; }
  .wy-say { max-width: none; padding: 4px 12px; border-radius: 99px; background: var(--ground); }
  html.motion .wy .wy-line { transform: scaleY(0); }
}

/* ---------------------------------------------------------------- vision (guided read) */
.vs { max-width: 900px; }
.vs-k { color: var(--brand-text); font-family: var(--sans); font-size: 15px; font-weight: 650; letter-spacing: .02em; }
.vs p { margin-top: clamp(16px, 2vw, 28px); font-family: var(--display); font-size: clamp(30px, 2.6vw + 14px, 52px); font-weight: 650; letter-spacing: -.03em; line-height: 1.12; color: var(--ink); text-wrap: balance; }
.vs p:last-child { color: var(--brand-text); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.motion .vs p { animation: vs-read linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
  }
}
@keyframes vs-read { from { opacity: .22; } to { opacity: 1; } }