/* ==========================================================================
   BenePip redesign — design system
   Typeface: Wanted Sans Variable only.
   Six themes on <html data-theme="l1|l2|l3|d1|d2|d3">. L1 keeps the current BenePip cobalt.
   Component metrics follow the reference measurements (Apple Card bento, Toss PG doc layout,
   Olymp section heads / tilted cards / bento, Infinex centered cards / tags / pill nav).
   ========================================================================== */

/* ---------- 1. Theme tokens ---------- */
:root,
[data-theme="l1"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-alt: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --surface-3: #e9edf2;
  --ink: #13213b;
  --ink-2: #333d4b;
  --muted: #6b7684;
  --faint: #8b95a1;
  --line: #e5e8eb;
  --line-2: #d1d6db;
  --primary: #2455f5;
  --primary-ink: #ffffff;
  --primary-soft: #eaf0ff;
  --primary-weak: #cfdcff;
  --hl: #2455f5;
  --hl-dim: rgba(19, 33, 59, 0.36);
  --positive: #0f9d6e;
  --warn: #c2570c;
  --btn-bg: #2455f5;
  --btn-ink: #ffffff;
  --btn-hover: #1b47d8;
  --btn2-bg: #f2f4f6;
  --btn2-ink: #13213b;
  --bloom-1: #8eabff;
  --bloom-2: #c3b5ff;
  --bloom-3: #9fe1ff;
  --bloom-4: #ffd2bd;
  --tile-bg: #ffffff;
  --tile-shadow: 4px 12px 40px 6px rgba(0, 0, 0, 0.09);
  --tile-dark-bg: #0f1a33;
  --tile-dark-ink: #ffffff;
  --grad-tile-1: linear-gradient(140deg, #3f6dff 0%, #7a66ff 46%, #8fc6ff 100%);
  --grad-tile-2: linear-gradient(160deg, #5aa2ec 0%, #63c5a4 100%);
  --grad-tile-3: linear-gradient(150deg, #ff9fb8 0%, #b89bff 55%, #8db4ff 100%);
  --grad-text: linear-gradient(90deg, #2455f5, #7a5cff 52%, #18a0fb);
  --grad-text-2: linear-gradient(90deg, #5d8fc7, #63b787 50%, #e9b43b);
  --grad-card: linear-gradient(135deg, #f7f9ff 0%, #c9d8ff 34%, #d9ccff 62%, #ffe0cc 100%);
  --metal-a: #f6f8fd;
  --metal-b: #d7deeb;
  --metal-c: #eef2f8;
  --metal-ink: #13213b;
  --nav-bg: rgba(255, 255, 255, 0.74);
  --nav-line: rgba(19, 33, 59, 0.08);
  --nav-shadow: 0 8px 30px -12px rgba(19, 33, 59, 0.18);
  --app-bg: #f3f5f8;
  --app-card: #ffffff;
  --app-ink: #191f28;
  --app-muted: #8b95a1;
  --app-line: #eceff3;
  --tilt-b1: #e4e8ef;
  --tilt-b2: #ffffff;
  --tilt-f1: #ffffff;
  --tilt-f2: #f2f4f8;
  --tab-bg: #f2f4f6;
  --tab-ink: #4e5968;
  --tag-blue-ink: #2455f5;  --tag-blue-bg: #eaf0ff;
  --tag-green-ink: #0b8a5f; --tag-green-bg: #e2f6ee;
  --tag-orange-ink: #d9480f; --tag-orange-bg: #fff0e6;
  --tag-violet-ink: #6a43f0; --tag-violet-bg: #f0ebff;
  --tag-red-ink: #e03131;   --tag-red-bg: #ffecec;
  --tag-gray-ink: #4e5968;  --tag-gray-bg: #eef1f4;
  --giant: #f0f2f5;
  --logo-filter: none;
  --scrim: rgba(15, 23, 42, 0.36);
}

[data-theme="l2"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #e8e8ed;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --faint: #86868b;
  --line: #e8e8ed;
  --line-2: #d2d2d7;
  --primary: #0066cc;
  --primary-ink: #ffffff;
  --primary-soft: #f0f4fa;
  --primary-weak: #d6e4f5;
  --hl: #e8457c;
  --hl-dim: rgba(29, 29, 31, 0.34);
  --btn-bg: #1d1d1f;
  --btn-ink: #ffffff;
  --btn-hover: #000000;
  --btn2-bg: #f5f5f7;
  --btn2-ink: #1d1d1f;
  --bloom-1: #ff9cd3;
  --bloom-2: #c5a3ff;
  --bloom-3: #ffc48c;
  --bloom-4: #ffe48a;
  --tile-dark-bg: #000000;
  --grad-tile-1: linear-gradient(140deg, #b780ff 0%, #ff8fb1 48%, #ffc76b 100%);
  --grad-tile-2: linear-gradient(160deg, #68a3d0 0%, #85c964 100%);
  --grad-tile-3: linear-gradient(150deg, #ff8f8f 0%, #ff8fd1 55%, #c08bff 100%);
  --grad-text: linear-gradient(90deg, #f45d9a, #f48c3a 52%, #f2c335);
  --grad-text-2: linear-gradient(90deg, #68a3d0, #85c964 50%, #f1c235);
  --grad-card: linear-gradient(135deg, #fbfbfd 0%, #ffd1ea 30%, #e6d2ff 58%, #ffe2b8 100%);
  --metal-a: #fafafa;
  --metal-b: #d9d9de;
  --metal-c: #f2f2f5;
  --metal-ink: #1d1d1f;
  --nav-bg: rgba(251, 251, 253, 0.8);
  --nav-line: rgba(0, 0, 0, 0.08);
  --app-bg: #f2f2f7;
  --app-ink: #1d1d1f;
  --app-muted: #8e8e93;
  --app-line: #ececf0;
  --tilt-b1: #e2e2e7;
  --tilt-f2: #f3f3f6;
  --tab-bg: #f5f5f7;
  --tab-ink: #424245;
  --tag-blue-ink: #0066cc;   --tag-blue-bg: #eaf3fc;
  --tag-violet-ink: #8a3ffc; --tag-violet-bg: #f3ebff;
  --tag-orange-ink: #c4570f; --tag-orange-bg: #fff1e3;
  --giant: #f5f5f7;
}

[data-theme="l3"] {
  color-scheme: light;
  --bg: #fafaf7;
  --bg-alt: #f1f2ec;
  --surface: #ffffff;
  --surface-2: #f1f2ec;
  --surface-3: #e5e8de;
  --ink: #111410;
  --ink-2: #2e332b;
  --muted: #6a7064;
  --faint: #8d9387;
  --line: #e3e6dc;
  --line-2: #cdd2c3;
  --primary: #111410;
  --primary-ink: #d4ff3f;
  --primary-soft: #f1ffc9;
  --primary-weak: #dcf59a;
  --hl: #3a9a00;
  --hl-dim: rgba(17, 20, 16, 0.34);
  --positive: #2f8f00;
  --btn-bg: #111410;
  --btn-ink: #d4ff3f;
  --btn-hover: #000000;
  --btn2-bg: #e9ecdf;
  --btn2-ink: #111410;
  --bloom-1: #d4ff5e;
  --bloom-2: #8dfcc4;
  --bloom-3: #fff2a1;
  --bloom-4: #bff1ff;
  --tile-dark-bg: #111410;
  --tile-dark-ink: #f4ffd6;
  --grad-tile-1: linear-gradient(140deg, #c6f432 0%, #6fe08e 52%, #2fc7a4 100%);
  --grad-tile-2: linear-gradient(160deg, #a6e05b 0%, #3fbf8a 100%);
  --grad-tile-3: linear-gradient(150deg, #e6ff7a 0%, #9cf2b5 55%, #7fe3e0 100%);
  --grad-text: linear-gradient(90deg, #3a9a00, #79c400 50%, #00a878);
  --grad-text-2: linear-gradient(90deg, #4f9f1f, #9ccc2f 50%, #e3b51f);
  --grad-card: linear-gradient(135deg, #fbfff0 0%, #e2ff8a 34%, #b9f5c9 64%, #fff5c2 100%);
  --metal-a: #fbfff2;
  --metal-b: #dde6c6;
  --metal-c: #f3f7e7;
  --metal-ink: #111410;
  --nav-bg: rgba(250, 250, 247, 0.8);
  --nav-line: rgba(17, 20, 16, 0.08);
  --app-bg: #f3f4ee;
  --app-ink: #111410;
  --app-muted: #858b7e;
  --app-line: #e8eadf;
  --tilt-b1: #e1e5d6;
  --tilt-f2: #f3f5ec;
  --tab-bg: #ebede4;
  --tab-ink: #2e332b;
  --tag-blue-ink: #1e6b00;   --tag-blue-bg: #e7f8c9;
  --tag-green-ink: #00805a;  --tag-green-bg: #dcf5ea;
  --giant: #eef0e7;
}

[data-theme="d1"] {
  color-scheme: dark;
  --bg: #060a14;
  --bg-alt: #0a1020;
  --surface: #0d1526;
  --surface-2: #111a2e;
  --surface-3: #18233c;
  --ink: #f1f4fb;
  --ink-2: #c9d1e2;
  --muted: #8a95ab;
  --faint: #67728a;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --primary: #4f7dff;
  --primary-ink: #ffffff;
  --primary-soft: rgba(79, 125, 255, 0.14);
  --primary-weak: rgba(79, 125, 255, 0.3);
  --hl: #86a6ff;
  --hl-dim: rgba(241, 244, 251, 0.4);
  --positive: #34d39a;
  --warn: #ffa94d;
  --btn-bg: #4f7dff;
  --btn-ink: #ffffff;
  --btn-hover: #6a91ff;
  --btn2-bg: rgba(255, 255, 255, 0.08);
  --btn2-ink: #f1f4fb;
  --bloom-1: #2647c9;
  --bloom-2: #5233c4;
  --bloom-3: #1a6fb3;
  --bloom-4: #2b1d6b;
  --tile-bg: #0d1526;
  --tile-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --tile-dark-bg: #1b2a4f;
  --grad-tile-1: linear-gradient(140deg, #2347d6 0%, #5a35c9 50%, #1d78c4 100%);
  --grad-tile-2: linear-gradient(160deg, #1e5a8f 0%, #17806a 100%);
  --grad-tile-3: linear-gradient(150deg, #6a2f8f 0%, #3a3fb5 55%, #1d6fb5 100%);
  --grad-text: linear-gradient(90deg, #86a6ff, #b394ff 52%, #6fd3ff);
  --grad-text-2: linear-gradient(90deg, #7cb4e8, #7bd6a0 50%, #f3cd62);
  --grad-card: linear-gradient(135deg, #2b3b66 0%, #3b4fa8 36%, #5a46b8 64%, #2d6fa8 100%);
  --metal-a: #2a3654;
  --metal-b: #141c2f;
  --metal-c: #222d47;
  --metal-ink: #eef2fb;
  --nav-bg: rgba(13, 21, 38, 0.72);
  --nav-line: rgba(255, 255, 255, 0.08);
  --nav-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.6);
  --app-bg: #0a1020;
  --app-card: #121b30;
  --app-ink: #eef2fb;
  --app-muted: #8a95ab;
  --app-line: rgba(255, 255, 255, 0.06);
  --tilt-b1: #24314f;
  --tilt-b2: #0d1526;
  --tilt-f1: #16213a;
  --tilt-f2: #0e1628;
  --tab-bg: rgba(242, 242, 242, 0.08);
  --tab-ink: #c9d1e2;
  --tag-blue-ink: #86a6ff;   --tag-blue-bg: rgba(79, 125, 255, 0.16);
  --tag-green-ink: #4fe0a9;  --tag-green-bg: rgba(52, 211, 154, 0.14);
  --tag-orange-ink: #ffa94d; --tag-orange-bg: rgba(255, 146, 43, 0.14);
  --tag-violet-ink: #b394ff; --tag-violet-bg: rgba(140, 100, 255, 0.16);
  --tag-red-ink: #ff8787;    --tag-red-bg: rgba(255, 107, 107, 0.14);
  --tag-gray-ink: #c9d1e2;   --tag-gray-bg: rgba(255, 255, 255, 0.08);
  --giant: #0c1324;
  --logo-filter: none;
  --scrim: rgba(0, 0, 0, 0.6);
}

[data-theme="d2"] {
  color-scheme: dark;
  --bg: #121212;
  --bg-alt: #17171a;
  --surface: #1c1c1f;
  --surface-2: #242426;
  --surface-3: #2e2e31;
  --ink: #f4f4f5;
  --ink-2: #d1d3d8;
  --muted: #888d97;
  --faint: #6b6f78;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(218, 223, 233, 0.22);
  --primary: #4c86ff;
  --primary-ink: #ffffff;
  --primary-soft: rgba(76, 134, 255, 0.14);
  --primary-weak: rgba(76, 134, 255, 0.3);
  --hl: #ffffff;
  --hl-dim: rgba(255, 255, 255, 0.34);
  --positive: #3ddc97;
  --warn: #ffa94d;
  --btn-bg: #f4f4f5;
  --btn-ink: #121212;
  --btn-hover: #ffffff;
  --btn2-bg: rgba(214, 224, 239, 0.09);
  --btn2-ink: #dadfe9;
  --bloom-1: #33333a;
  --bloom-2: #2a4686;
  --bloom-3: #47474f;
  --bloom-4: #20315c;
  --tile-bg: #1c1c1f;
  --tile-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --tile-dark-bg: #2b2b2f;
  --grad-tile-1: linear-gradient(140deg, #2a2a2e 0%, #33467a 60%, #4c86ff 140%);
  --grad-tile-2: linear-gradient(160deg, #2b3a4f 0%, #21463c 100%);
  --grad-tile-3: linear-gradient(150deg, #3a2f48 0%, #2c3550 100%);
  --grad-text: linear-gradient(90deg, #ffffff, #9fbcff 60%, #4c86ff);
  --grad-text-2: linear-gradient(90deg, #a8c3ff, #8fe0bd 50%, #f1d27a);
  --grad-card: linear-gradient(135deg, #3a3a3e 0%, #2a2a2e 40%, #3c4766 75%, #2b2b2f 100%);
  --metal-a: #3a3a3e;
  --metal-b: #1f1f22;
  --metal-c: #2c2c30;
  --metal-ink: #f4f4f5;
  --nav-bg: rgba(28, 28, 31, 0.78);
  --nav-line: rgba(255, 255, 255, 0.07);
  --nav-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.7);
  --app-bg: #161618;
  --app-card: #222225;
  --app-ink: #f4f4f5;
  --app-muted: #888d97;
  --app-line: rgba(255, 255, 255, 0.06);
  --tilt-b1: #333333;
  --tilt-b2: #111111;
  --tilt-f1: #171717;
  --tilt-f2: #101010;
  --tab-bg: rgba(242, 242, 242, 0.08);
  --tab-ink: #d1d3d8;
  --tag-blue-ink: #8fb2ff;   --tag-blue-bg: rgba(76, 134, 255, 0.16);
  --tag-green-ink: #5fe0a8;  --tag-green-bg: rgba(61, 220, 151, 0.12);
  --tag-orange-ink: #ffa94d; --tag-orange-bg: rgba(255, 146, 43, 0.13);
  --tag-violet-ink: #b9a2ff; --tag-violet-bg: rgba(150, 120, 255, 0.15);
  --tag-red-ink: #ff8787;    --tag-red-bg: rgba(255, 107, 107, 0.13);
  --tag-gray-ink: #d1d3d8;   --tag-gray-bg: rgba(255, 255, 255, 0.08);
  --giant: #1e1e20;
  --scrim: rgba(0, 0, 0, 0.62);
}

[data-theme="d3"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-alt: #080808;
  --surface: #111111;
  --surface-2: #1f1f1f;
  --surface-3: #2a2a2a;
  --ink: #ffffff;
  --ink-2: #dddddd;
  --muted: #9a9a9a;
  --faint: #6e6e6e;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.18);
  --primary: #6aff41;
  --primary-ink: #000000;
  --primary-soft: rgba(106, 255, 65, 0.12);
  --primary-weak: rgba(106, 255, 65, 0.28);
  --hl: #6aff41;
  --hl-dim: rgba(255, 255, 255, 0.56);
  --positive: #6aff41;
  --warn: #ffd43b;
  --btn-bg: #6aff41;
  --btn-ink: #000000;
  --btn-hover: #8dff6b;
  --btn2-bg: rgba(242, 242, 242, 0.12);
  --btn2-ink: #ffffff;
  --bloom-1: #1f7a00;
  --bloom-2: #0b4d24;
  --bloom-3: #3aa300;
  --bloom-4: #112e0a;
  --tile-bg: #111111;
  --tile-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --tile-dark-bg: #1f1f1f;
  --tile-dark-ink: #ffffff;
  --grad-tile-1: linear-gradient(140deg, #0c2e00 0%, #1d7a00 55%, #6aff41 130%);
  --grad-tile-2: linear-gradient(160deg, #003f2e 0%, #0b6b3a 100%);
  --grad-tile-3: linear-gradient(150deg, #202020 0%, #1a3d0f 100%);
  --grad-text: linear-gradient(90deg, #6aff41, #00e7a8 60%, #3dff7a);
  --grad-text-2: linear-gradient(90deg, #00e7a8, #6aff41 50%, #e6ff3d);
  --grad-card: linear-gradient(135deg, #2d2d2d 0%, #121212 45%, #1e3d12 80%, #2d2d2d 100%);
  --metal-a: #2d2d2d;
  --metal-b: #0f0f0f;
  --metal-c: #1c1c1c;
  --metal-ink: #ffffff;
  --nav-bg: rgba(20, 20, 20, 0.8);
  --nav-line: rgba(255, 255, 255, 0.08);
  --nav-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.8);
  --app-bg: #0b0b0b;
  --app-card: #1a1a1a;
  --app-ink: #ffffff;
  --app-muted: #9a9a9a;
  --app-line: rgba(255, 255, 255, 0.07);
  --tilt-b1: #333333;
  --tilt-b2: #111111;
  --tilt-f1: #171717;
  --tilt-f2: #101010;
  --tab-bg: rgba(242, 242, 242, 0.12);
  --tab-ink: #ffffff;
  --tag-blue-ink: #6aff41;   --tag-blue-bg: rgba(106, 255, 65, 0.12);
  --tag-green-ink: #00e7a8;  --tag-green-bg: rgba(0, 231, 168, 0.12);
  --tag-orange-ink: #ffb347; --tag-orange-bg: rgba(255, 179, 71, 0.12);
  --tag-violet-ink: #c5a3ff; --tag-violet-bg: rgba(197, 163, 255, 0.12);
  --tag-red-ink: #ff7b7b;    --tag-red-bg: rgba(255, 123, 123, 0.12);
  --tag-gray-ink: #dddddd;   --tag-gray-bg: rgba(255, 255, 255, 0.1);
  --giant: #141414;
  --scrim: rgba(0, 0, 0, 0.66);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Wanted Sans Variable", "Wanted Sans", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: clip;
  transition: background-color 0.4s ease, color 0.4s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--primary-weak); color: var(--ink); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wrap--olymp { max-width: 1024px; padding: 0 40px; }
.wrap--narrow { max-width: 880px; }

/* ---------- 3. Type scale ---------- */
.t-hero { font-size: clamp(40px, 6.667vw, 96px); line-height: 1.06; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); }
.t-display { font-size: clamp(34px, 4.45vw, 64px); line-height: 1.28; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.t-title { font-size: clamp(30px, 3.35vw, 48px); line-height: 1.28; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.t-sub { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.4; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.t-lead { font-size: clamp(19px, 1.67vw, 24px); line-height: 1.6; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.t-body { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--ink-2); }
.t-small { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.t-micro { font-size: 14px; line-height: 1.6; color: var(--muted); }
.t-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-grad-2 { background: var(--grad-text-2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-hl { color: var(--hl); }

/* Toss-style section label: ● 통합 결제 */
.label-dot { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--ink-2); }
.label-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }

/* ---------- 4. Buttons, tags, chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 21px; min-height: 44px;
  border-radius: 980px; border: 1px solid transparent;
  background: var(--btn-bg); color: var(--btn-ink);
  font-size: 17px; font-weight: 600; line-height: 20px; letter-spacing: -0.02em;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(0.97); }
.btn--soft { background: var(--btn2-bg); color: var(--btn2-ink); }
.btn--soft:hover { background: var(--surface-3); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--line:hover { background: var(--surface-2); }
.btn--sm { padding: 0 20px; min-height: 48px; font-size: 16px; }
.btn--lg { padding: 15px 30px; min-height: 58px; font-size: 18px; }
.btn--xl { padding: 0 36px; min-height: 66px; font-size: 20px; }
.btn--block { width: 100%; }
.btn svg { width: 16px; height: 16px; }

.link-more { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 600; font-size: 18px; }
.link-more::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-top: 1.8px solid currentColor; transform: rotate(45deg); margin-left: 2px; transition: transform 0.2s; }
.link-more:hover::after { transform: translateX(3px) rotate(45deg); }
.link-more--ink { color: var(--ink); }

.tag {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap;
  color: var(--tag-blue-ink); background: var(--tag-blue-bg);
}
.tag--green { color: var(--tag-green-ink); background: var(--tag-green-bg); }
.tag--orange { color: var(--tag-orange-ink); background: var(--tag-orange-bg); }
.tag--violet { color: var(--tag-violet-ink); background: var(--tag-violet-bg); }
.tag--red { color: var(--tag-red-ink); background: var(--tag-red-bg); }
.tag--gray { color: var(--tag-gray-ink); background: var(--tag-gray-bg); }
.tag--sm { height: 32px; padding: 0 12px; font-size: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tag-gray-ink); background: var(--tag-gray-bg); white-space: nowrap; }
.chip--warn { color: var(--tag-orange-ink); background: var(--tag-orange-bg); }

.logo-plate { display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 14px; padding: 8px 12px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06); }
.logo-plate img { max-height: 24px; max-width: 120px; object-fit: contain; }
.logo-plate--text { font-weight: 800; font-size: 15px; color: #13213b; letter-spacing: 0.02em; }

/* ---------- 5. Ribbon + header (Apple ribbon, Infinex floating pill nav) ---------- */
.ribbon { position: relative; z-index: 51; background: var(--bg-alt); text-align: center; padding: 12px 20px; font-size: 14px; line-height: 20px; letter-spacing: -0.016em; color: var(--ink-2); }
.ribbon a { color: var(--primary); margin-left: 6px; }
.ribbon a::after { content: " ›"; }

.hdr { position: sticky; top: 12px; z-index: 50; height: 68px; margin: 12px 0 0; pointer-events: none; }
.hdr__in { position: relative; height: 68px; max-width: 1440px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hdr__logo { pointer-events: auto; display: flex; align-items: center; height: 52px; padding: 0 4px; }
.hdr__logo img { height: 36px; width: auto; filter: var(--logo-filter); }
[data-theme^="d"] .hdr__logo img { filter: brightness(0) invert(1); }
.hdr__pill { pointer-events: auto; position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; width: clamp(600px, 50vw, 780px); height: 68px; padding: 6px 10px; border-radius: 34px; background: var(--nav-bg); box-shadow: inset 0 0 0 1px var(--nav-line), var(--nav-shadow); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.hdr__pill a { position: relative; flex: 1; text-align: center; padding: 14px 10px; font-size: 18px; font-weight: 600; line-height: 26px; color: var(--muted); border-radius: 26px; white-space: nowrap; transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s; }
.hdr__pill a:hover { color: var(--ink); background: var(--surface-2); }
.hdr__pill a.is-on { color: var(--ink); background: var(--surface-2); }
.hdr__act { pointer-events: auto; display: flex; align-items: center; gap: 10px; }
.hdr__login { padding: 0 22px; height: 54px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 17px; font-weight: 600; color: var(--ink); background: var(--nav-bg); box-shadow: inset 0 0 0 1px var(--nav-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.hdr__act .btn { min-height: 54px; padding: 0 26px; font-size: 17px; }
.hdr__menu { display: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--nav-bg); box-shadow: inset 0 0 0 1px var(--nav-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); align-items: center; justify-content: center; color: var(--ink); }
.hdr__menu i { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform 0.3s; }
.hdr__menu i::before, .hdr__menu i::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s, top 0.3s; }
.hdr__menu i::before { top: -6px; }
.hdr__menu i::after { top: 6px; }
.menu-open .hdr__menu i { background: transparent; }
.menu-open .hdr__menu i::before { top: 0; transform: rotate(45deg); }
.menu-open .hdr__menu i::after { top: 0; transform: rotate(-45deg); }

.msheet { position: fixed; inset: 0; z-index: 45; background: var(--bg); padding: 96px 28px 40px; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s; }
.menu-open .msheet { opacity: 1; visibility: visible; transform: none; }
.msheet a { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); padding: 10px 0; }
.msheet .btn { margin-top: 24px; }

/* ---------- 6. Hero (Apple Card) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; margin-top: -80px; padding: 150px 36px 0; min-height: 980px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 34px; font-weight: 700; line-height: 50px; letter-spacing: -0.03em; color: var(--ink); }
.hero__eyebrow img { height: 36px; width: auto; }
[data-theme^="d"] .hero__eyebrow img { filter: brightness(0) invert(1); }
.hero__title { margin-top: 22px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .line > span { display: inline-block; transform: translateY(105%); animation: line-up 1s cubic-bezier(0.5, 1, 0.89, 1) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: 0.12s; }
.hero__sub { margin-top: 24px; font-size: clamp(19px, 1.67vw, 24px); line-height: 1.5; font-weight: 500; color: var(--ink-2); text-wrap: balance; opacity: 0; animation: fade-in 0.9s ease 0.35s forwards; }
.hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; opacity: 0; animation: fade-in 0.9s ease 0.5s forwards; }
.hero__stage { position: relative; margin-top: auto; padding-top: 64px; width: 100%; height: 560px; display: flex; justify-content: center; transform: translateY(100%); animation: phone-up 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0.25s forwards; }
.hero__stage .phone { --w: 390px; }

.bloom { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.bloom i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.9; will-change: transform; animation: bloom-drift 18s ease-in-out infinite alternate; }
.bloom i:nth-child(1) { width: 58vw; height: 58vw; left: -16vw; top: 22%; background: var(--bloom-2); }
.bloom i:nth-child(2) { width: 52vw; height: 52vw; left: 18vw; top: 34%; background: var(--bloom-1); animation-duration: 22s; animation-delay: -6s; }
.bloom i:nth-child(3) { width: 54vw; height: 54vw; right: -14vw; top: 24%; background: var(--bloom-4); animation-duration: 20s; animation-delay: -3s; }
.bloom i:nth-child(4) { width: 40vw; height: 40vw; left: 40vw; top: 58%; background: var(--bloom-3); animation-duration: 16s; animation-delay: -9s; }
.bloom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 26%, transparent 52%); }
.bloom::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0.18; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>"); }

/* hero artwork: the still plate is drawn twice (left / right half, complementary masks, added together),
   so the two building clusters can glide in from the sides and meet exactly; the coins are separate layers */
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #eef6fe 34%, #e6f1fd 70%); }
.hero__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg)); pointer-events: none; }
.hero__scene { position: absolute; left: 50%; bottom: 0; width: var(--scene-w, 100%); aspect-ratio: 1672 / 941; translate: -50% 0; isolation: isolate; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%); will-change: transform; }
.hero__half { position: absolute; inset: 0; background: url("../img/hero/plate.webp") center / 100% 100% no-repeat; }
.hero__half--l { -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%); mask-image: linear-gradient(90deg, #000 44%, transparent 56%); animation: half-in-l 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.hero__half--r { -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 56%); mask-image: linear-gradient(90deg, transparent 44%, #000 56%); mix-blend-mode: plus-lighter; animation: half-in-r 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.hero__coin { position: absolute; z-index: 2; will-change: transform; perspective: 700px; }
.hero__coin img { width: 100%; height: auto; animation: coin-in 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both, coin-flip 4.6s cubic-bezier(0.37, 0, 0.3, 1) 2s infinite; }
.hero__coin--l { left: 12.5%; top: 38.9%; width: 5.5%; }
.hero__coin--r { left: 89.53%; top: 22.42%; width: 7.36%; }
.hero__coin--r img { animation-name: coin-in, coin-hop; animation-delay: 0.75s, 3.2s; animation-duration: 1.3s, 5.4s; }
@keyframes half-in-l { from { opacity: 0; transform: translate3d(-7%, 3%, 0); } to { opacity: 1; transform: none; } }
@keyframes half-in-r { from { opacity: 0; transform: translate3d(7%, 3%, 0); } to { opacity: 1; transform: none; } }
@keyframes coin-in { from { opacity: 0; translate: 0 -70px; rotate: -28deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes coin-flip { 0% { transform: translateY(0) rotateY(0deg); } 9% { transform: translateY(6%) scale(1.04, 0.94) rotateY(0deg); } 30% { transform: translateY(-70%) rotateY(180deg); } 48% { transform: translateY(0) rotateY(360deg); } 54% { transform: translateY(5%) scale(1.03, 0.95) rotateY(360deg); } 62%, 100% { transform: translateY(0) rotateY(360deg); } }
@keyframes coin-hop { 0%, 100% { transform: translateY(0) rotate(0deg); } 8% { transform: translateY(5%) scale(1.04, 0.95); } 24% { transform: translateY(-62%) rotate(-18deg); } 40% { transform: translateY(0) rotate(7deg); } 47% { transform: translateY(-14%) rotate(0deg); } 54%, 99% { transform: translateY(0) rotate(0deg); } }
.hero .btn--soft { background: #ffffff; box-shadow: 0 8px 24px -12px rgba(16, 24, 40, 0.25); }
/* the artwork's own parts in motion: blue buildings grow and shrink like a live bar chart,
   the coin stack gains coins one by one, the floating coins jump. Layers sit exactly on the plate at rest. */
.hp { position: absolute; display: block; max-width: none; pointer-events: none; will-change: transform; }
.hp--ext { object-fit: fill; transform-origin: 50% 100%; transform: scaleY(0); }
.hp--tl-cap { left: 1.2759%; top: 28.1361%; width: 9.2903%; --rise: -171.368%; animation: bar-cap 5.8s cubic-bezier(0.45, 0, 0.25, 1) 1.9s infinite both; }
.hp--tl-ext { left: 1.2759%; top: 25.0201%; width: 9.37%; height: 7.0848%; animation: bar-ext 5.8s cubic-bezier(0.45, 0, 0.25, 1) 1.9s infinite both; }
.hp--dl-cap { left: 8.0941%; top: 48.3345%; width: 8.134%; --rise: -93.943%; animation: bar-cap 5.2s cubic-bezier(0.45, 0, 0.25, 1) 2.3s infinite both; }
.hp--dl-ext { left: 8.0542%; top: 48.4073%; width: 8.2137%; height: 5.8095%; animation: bar-ext 5.2s cubic-bezier(0.45, 0, 0.25, 1) 2.3s infinite both; }
.hp--dr-cap { left: 78.5885%; top: 50.815%; width: 8.6922%; --rise: -78.351%; animation: bar-cap 6.2s cubic-bezier(0.45, 0, 0.25, 1) 2.7s infinite both; }
.hp--dr-ext { left: 78.6683%; top: 52.2346%; width: 8.6124%; height: 6.4471%; animation: bar-ext 6.2s cubic-bezier(0.45, 0, 0.25, 1) 2.7s infinite both; }
.hp--tr-cap { left: 92.9825%; top: 35.2941%; width: 7.0574%; --rise: -163.578%; animation: bar-cap 6.6s cubic-bezier(0.45, 0, 0.25, 1) 3.1s infinite both; }
.hp--tr-ext { left: 92.9825%; top: 32.0367%; width: 7.0574%; height: 7.9349%; animation: bar-ext 6.6s cubic-bezier(0.45, 0, 0.25, 1) 3.1s infinite both; }
.hp--stack-cap { left: 72.7273%; top: 74.3444%; width: 6.4195%; --step: -57.792%; animation: stack-cap 7.4s cubic-bezier(0.22, 1, 0.36, 1) 2.4s infinite both; }
.hp--stack-band { left: 72.7273%; top: 70.8036%; width: 6.4195%; height: 8.0766%; background: url("../img/hero/stack-band.webp") 50% 100% / 100% 32.4558% repeat-y; clip-path: inset(100% 0 0 0); animation: stack-band 7.4s cubic-bezier(0.22, 1, 0.36, 1) 2.4s infinite both; }
@keyframes bar-cap { 0%, 10% { transform: translateY(0); } 38%, 56% { transform: translateY(var(--rise)); } 86%, 100% { transform: translateY(0); } }
@keyframes bar-ext { 0%, 10% { transform: scaleY(0); } 38%, 56% { transform: scaleY(1); } 86%, 100% { transform: scaleY(0); } }
@keyframes stack-cap { 0%, 8% { transform: translateY(0); } 16%, 26% { transform: translateY(var(--step)); } 34%, 44% { transform: translateY(calc(var(--step) * 2)); } 52%, 70% { transform: translateY(calc(var(--step) * 3)); } 84%, 100% { transform: translateY(0); } }
@keyframes stack-band { 0%, 8% { clip-path: inset(100% 0 0 0); } 16%, 26% { clip-path: inset(64.912% 0 0 0); } 34%, 44% { clip-path: inset(32.456% 0 0 0); } 52%, 70% { clip-path: inset(0 0 0 0); } 84%, 100% { clip-path: inset(100% 0 0 0); } }
@keyframes line-up { to { transform: translateY(0); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes phone-up { to { transform: translateY(0); } }
@keyframes bloom-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(6vw, -5vw, 0) scale(1.14); } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- 7. Intro statement (Apple) with scroll-lit words ---------- */
.intro { padding: 120px 0 60px; text-align: center; }
.intro__text { max-width: 1120px; margin: 0 auto; font-size: clamp(22px, 2.36vw, 34px); line-height: 1.5; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.js .intro__text .w { opacity: 0.18; transition: opacity 0.35s ease; }
.js .intro__text .w.on { opacity: 1; }

/* ---------- 8. Bento tiles (Apple) with flip ---------- */
.bento { padding: 50px 0 120px; }
.bento__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 1140px; margin: 0 auto; }
.tile { position: relative; perspective: 1600px; height: var(--tile-h, 720px); transition: transform 1s cubic-bezier(0.39, 0.575, 0.565, 1), opacity 1s cubic-bezier(0.39, 0.575, 0.565, 1); }
.tile--wide { grid-column: span 2; perspective: 3200px; --tile-h: 640px; }
.js .tile { transform: translateY(80px); opacity: 0; }
.js .tile:nth-child(odd):not(.tile--wide) { transition-delay: 0s; }
.js .tile:nth-child(even):not(.tile--wide) { transition-delay: 0.3s; }
.js .tile.is-in { transform: none; opacity: 1; }
.tile__in { position: absolute; inset: 0; border-radius: 40px; transform-style: preserve-3d; transition: transform 0.8s ease-in-out; }
.tile.is-flipped .tile__in { transform: rotateX(180deg); }
.tile__face { position: absolute; inset: 0; border-radius: 40px; overflow: hidden; background: var(--tile-bg); box-shadow: var(--tile-shadow); padding: 90px 80px; -webkit-backface-visibility: hidden; backface-visibility: hidden; color: var(--ink); }
.tile__face--back { transform: rotateX(180deg); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.tile__face--back h4 { font-size: clamp(30px, 3vw, 44px); line-height: 1.25; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); }
.tile__face--back p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; font-weight: 500; color: var(--ink-2); max-width: 760px; }
.tile__face--back ul { display: grid; gap: 14px; }
.tile__face--back li { position: relative; padding-left: 22px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; font-weight: 400; color: var(--ink-2); }
.tile__face--back li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.tile__h { position: relative; z-index: 2; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); }
.tile__h--xl { font-size: clamp(52px, 8.33vw, 120px); line-height: 1; letter-spacing: -0.045em; }
.tile__h--l { font-size: clamp(40px, 6.2vw, 88px); line-height: 1.05; letter-spacing: -0.04em; }
.tile__h--m { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.12; }
.tile__p { position: relative; z-index: 2; margin-top: 22px; font-size: clamp(19px, 1.67vw, 24px); line-height: 1.5; font-weight: 500; color: var(--ink-2); max-width: 470px; }
.tile [data-rise] { transform: translateY(40px); opacity: 0; transition: transform 1s cubic-bezier(0.5, 1, 0.89, 1) 0.5s, opacity 0.75s cubic-bezier(0.5, 1, 0.89, 1) 0.5s; }
.tile.is-in [data-rise] { transform: none; opacity: 1; }
.no-js .tile [data-rise] { transform: none; opacity: 1; }
.tile__plus { position: absolute; z-index: 5; right: 28px; bottom: 28px; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--ink); color: var(--bg); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s; }
.tile__plus:hover, .tile--flip:hover .tile__plus { transform: scale(1.08); }
.tile--flip { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tile__face--bottom { display: flex; flex-direction: column; justify-content: flex-end; }
.tile__plus svg { width: 14px; height: 14px; }
.tile__face--back .tile__plus svg { transform: rotate(45deg); }
.tile--grad .tile__face--front { background: var(--grad-tile-1); color: #fff; }
.tile--grad .tile__h, .tile--grad .tile__p { color: #fff; }
.tile--grad .tile__plus { background: rgba(255, 255, 255, 0.92); color: #13213b; }
.tile--grad2 .tile__face--front { background: var(--grad-tile-2); }
.tile--grad2 .tile__h, .tile--grad2 .tile__p { color: #fff; }
.tile--grad2 .tile__plus { background: rgba(255, 255, 255, 0.92); color: #13213b; }
.tile--dark .tile__face--front { background: var(--tile-dark-bg); }
.tile--dark .tile__h, .tile--dark .tile__p { color: var(--tile-dark-ink); }
.tile--dark .tile__plus { background: rgba(255, 255, 255, 0.92); color: #13213b; }
.tile .tile__face--back .tile__plus { background: var(--ink); color: var(--bg); }

/* gift tile: BenePip's gift photo fills the front face, copy in white over a soft shade */
.tile--photo .tile__face--front { background: #04112b; color: #fff; }
.tile--photo .gph { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 22%; transform: scale(1.08); transition: transform 2.6s cubic-bezier(0.22, 1, 0.36, 1); }
.tile--photo.is-in .gph { transform: scale(1); }
.tile--photo .tile__face--front::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(4, 17, 43, 0) 34%, rgba(4, 17, 43, 0.86) 70%); pointer-events: none; }
.tile--photo .tile__h { color: #fff; }
.tile--photo .tile__p { color: rgba(255, 255, 255, 0.86); }
.tile--photo .tile__face--front .tile__plus { background: rgba(255, 255, 255, 0.92); color: #13213b; }

/* tile art */
.tile-art { position: absolute; pointer-events: none; }
.big-num { font-weight: 800; letter-spacing: -0.06em; line-height: 0.86; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: clamp(96px, 11.2vw, 160px); }
.tile__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-bottom: 0 !important; }
.tile__split > :first-child { align-self: center; padding-bottom: 90px; }
.tile__split > :last-child { display: flex; justify-content: center; align-items: flex-start; padding-top: 10px; }
.ring { position: absolute; right: 56px; top: 56px; width: 300px; height: 300px; }
.ring svg { width: 100%; height: 100%; }
.ring circle { fill: none; stroke-width: 26; }
.ring .g-track { stroke: var(--surface-3); }
.ring .g-val { stroke: url(#gaugeGrad); stroke-linecap: round; stroke-dasharray: 830; stroke-dashoffset: 830; transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s; }
.tile.is-in .ring .g-val { stroke-dashoffset: 250; }
.ring__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.ring__c span { font-size: 18px; font-weight: 500; color: var(--ink-2); }
.ring__c b { font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; color: var(--positive); }
.icons-row { display: flex; gap: 12px; margin-bottom: 40px; }
.icons-row span { width: 92px; height: 92px; border-radius: 22px; display: grid; place-items: center; color: #fff; }
.icons-row svg { width: 44px; height: 44px; }
.icons-row span:nth-child(1) { background: #5d8fc7; }
.icons-row span:nth-child(2) { background: #5ea6a5; }
.icons-row span:nth-child(3) { background: #63b787; }
.icons-row span:nth-child(4) { background: #9cc35a; }
.icons-row span:nth-child(5) { background: #d9b941; }
/* 2x2 gift icons, centred and sized to sit level with the ring in the neighbouring tile */
.icons-grid { top: 66px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(2, 132px); grid-auto-rows: 132px; gap: 16px; }
.icons-grid span { display: grid; place-items: center; border-radius: 32px; color: #fff; transform: scale(0.8); opacity: 0; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease; }
.icons-grid span:nth-child(1) { background: #5d8fc7; transition-delay: 0.3s; }
.icons-grid span:nth-child(2) { background: #5ea6a5; transition-delay: 0.4s; }
.icons-grid span:nth-child(3) { background: #63b787; transition-delay: 0.5s; }
.icons-grid span:nth-child(4) { background: #9cc35a; transition-delay: 0.6s; }
.tile.is-in .icons-grid span, .no-js .icons-grid span { transform: none; opacity: 1; }
.icons-grid svg { width: 58px; height: 58px; }
.logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 44px; }
.logo-wall .logo-plate { height: 64px; border-radius: 16px; background: var(--surface-2); box-shadow: none; }
[data-theme^="d"] .logo-wall .logo-plate { background: #ffffff; }
.logo-wall .logo-plate img { max-height: 22px; max-width: 92px; }

/* ---------- 9. Credit-card visual (Apple titanium / pastel) ---------- */
.ccard { position: relative; aspect-ratio: 1.586; border-radius: 16px; overflow: hidden; color: var(--metal-ink); background: linear-gradient(135deg, var(--metal-a) 0%, var(--metal-b) 46%, var(--metal-c) 62%, var(--metal-b) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 14px 34px -14px rgba(16, 24, 40, 0.32); }
.ccard--pastel { background: var(--grad-card); }
.ccard::after { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.7) 50%, transparent 58%); transform: translateX(-55%); animation: sheen 5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.ccard__logo { position: absolute; left: 7%; top: 10%; }
.ccard__logo .logo-plate { padding: max(4px, 0.12em) max(6px, 0.2em); border-radius: max(8px, 0.22em); }
.ccard__logo .logo-plate img { max-height: max(13px, 0.36em); max-width: max(52px, 1.45em); }
.ccard__amt { position: absolute; left: 7%; bottom: 11%; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.ccard__amt small { display: block; font-size: max(12px, 0.34em); font-weight: 500; letter-spacing: -0.01em; opacity: 0.78; margin-bottom: 0.3em; }
.ccard__chip { position: absolute; right: 8%; top: 12%; width: 13%; aspect-ratio: 1.3; border-radius: 4px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.08)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.ccard__mark { position: absolute; right: 7%; bottom: 10%; font-size: max(11px, 0.27em); font-weight: 700; letter-spacing: 0.01em; opacity: 0.6; }
@keyframes sheen { 0%, 55% { transform: translateX(-55%); } 100% { transform: translateX(55%); } }
.tilt-card { transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- 10. Device mockups ---------- */
.phone { --w: 300px; --u: calc(var(--w) * 0.0033333); position: relative; width: var(--w); aspect-ratio: 300 / 620; border-radius: calc(var(--w) * 0.16); background: #0c0c0e; padding: calc(var(--w) * 0.034); box-shadow: inset 0 0 0 1.5px #2b2b30, inset 0 0 0 4px #0c0c0e, 0 50px 90px -30px rgba(16, 24, 40, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.12); flex: none; }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--w) * 0.128); overflow: hidden; background: var(--app-bg); color: var(--app-ink); }
.phone__island { position: absolute; z-index: 9; top: calc(var(--w) * 0.035); left: 50%; width: 31%; height: calc(var(--w) * 0.09); transform: translateX(-50%); border-radius: 999px; background: #050506; }
.phone--sm { --w: 240px; }

.win { border-radius: 18px; background: var(--app-card); overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 60px 120px -40px rgba(16, 24, 40, 0.4); color: var(--app-ink); }
.win__bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--app-line); background: var(--app-card); }
.win__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.win__bar i:nth-child(2) { background: #febc2e; }
.win__bar i:nth-child(3) { background: #28c840; }
.win__bar span { margin-left: 12px; font-size: 12px; color: var(--app-muted); }

/* in-app UI (phone + window).
   Inside a .phone every size is written as calc(var(--u) * n): --u is 1px at a 300px-wide phone,
   so the whole screen scales with the device instead of keeping tiny fixed text. Outside a phone --u falls back to 1px. */
.app, .win, .acard, .ccard { text-align: left; }
.app { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: calc(var(--u, 1px) * 13); line-height: 1.45; color: var(--app-ink); background: var(--app-bg); letter-spacing: -0.02em; }
.app__status { flex: none; height: calc(var(--u, 1px) * 46); display: flex; justify-content: space-between; align-items: flex-end; padding: 0 calc(var(--u, 1px) * 26) calc(var(--u, 1px) * 6); font-size: calc(var(--u, 1px) * 14); font-weight: 600; }
.app__status em { font-style: normal; display: flex; gap: calc(var(--u, 1px) * 5); align-items: center; }
.app__status em i { display: block; width: calc(var(--u, 1px) * 16); height: calc(var(--u, 1px) * 9); border-radius: calc(var(--u, 1px) * 2); border: calc(var(--u, 1px) * 1.5) solid currentColor; position: relative; }
.app__status em i::after { content: ""; position: absolute; inset: 1px 3px 1px 1px; background: currentColor; border-radius: 1px; }
.app__status em b { display: block; width: calc(var(--u, 1px) * 14); height: calc(var(--u, 1px) * 9); background: linear-gradient(90deg, currentColor 0 14%, transparent 14% 28%, currentColor 28% 42%, transparent 42% 57%, currentColor 57% 71%, transparent 71% 85%, currentColor 85% 100%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.app__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u, 1px) * 10) calc(var(--u, 1px) * 18) calc(var(--u, 1px) * 8); }
.app__title { font-size: calc(var(--u, 1px) * 22); font-weight: 800; letter-spacing: -0.04em; }
.app__back { display: flex; align-items: center; gap: calc(var(--u, 1px) * 6); font-size: calc(var(--u, 1px) * 16); font-weight: 700; }
.app__back::before { content: ""; width: calc(var(--u, 1px) * 8); height: calc(var(--u, 1px) * 8); border-left: calc(var(--u, 1px) * 2) solid currentColor; border-bottom: calc(var(--u, 1px) * 2) solid currentColor; transform: rotate(45deg); }
/* the app header carries the BenePip symbol where a profile circle would sit */
.app__brand { display: block; width: calc(var(--u, 1px) * 30); height: calc(var(--u, 1px) * 30); object-fit: contain; }
.app__avatar { width: calc(var(--u, 1px) * 30); height: calc(var(--u, 1px) * 30); border-radius: 50%; background: linear-gradient(135deg, var(--primary-weak), var(--primary)); }
.app__body { position: relative; flex: 1; padding: calc(var(--u, 1px) * 6) calc(var(--u, 1px) * 14) calc(var(--u, 1px) * 12); display: flex; flex-direction: column; gap: calc(var(--u, 1px) * 10); overflow: hidden; }
.app__tabs { flex: none; height: calc(var(--u, 1px) * 62); display: grid; grid-template-columns: repeat(4, 1fr); padding: calc(var(--u, 1px) * 7) calc(var(--u, 1px) * 6) calc(var(--u, 1px) * 16); border-top: 1px solid var(--app-line); background: var(--app-card); font-size: calc(var(--u, 1px) * 10.5); font-weight: 500; color: var(--app-muted); text-align: center; }
.app__tabs span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u, 1px) * 3); }
.app__tabs span::before { content: ""; width: calc(var(--u, 1px) * 18); height: calc(var(--u, 1px) * 18); border-radius: calc(var(--u, 1px) * 6); background: currentColor; opacity: 0.32; }
.app__tabs span.on { color: var(--primary); }
.app__tabs span.on::before { opacity: 1; }
.acard { position: relative; background: var(--app-card); border-radius: calc(var(--u, 1px) * 18); padding: calc(var(--u, 1px) * 14); box-shadow: 0 1px 0 var(--app-line); }
.acard__k { font-size: calc(var(--u, 1px) * 13); color: var(--app-muted); font-weight: 500; }
.acard__v { font-size: calc(var(--u, 1px) * 28); font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.app .acard > .logo-plate { flex: none; padding: calc(var(--u, 1px) * 6) calc(var(--u, 1px) * 8); border-radius: calc(var(--u, 1px) * 10); }
.app .acard > .logo-plate img { max-height: calc(var(--u, 1px) * 16); max-width: calc(var(--u, 1px) * 52); }
.arow { display: flex; align-items: center; gap: calc(var(--u, 1px) * 10); padding: calc(var(--u, 1px) * 10) calc(var(--u, 1px) * 2); border-bottom: 1px solid var(--app-line); }
.arow:last-child { border-bottom: 0; }
.arow .logo-plate { flex: none; width: calc(var(--u, 1px) * 40); height: calc(var(--u, 1px) * 30); padding: calc(var(--u, 1px) * 4); border-radius: calc(var(--u, 1px) * 9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.arow .logo-plate img { max-height: calc(var(--u, 1px) * 14); max-width: calc(var(--u, 1px) * 32); }
.arow__t { flex: 1; min-width: calc(var(--u, 1px) * 56); }
.arow__t b { display: block; font-size: calc(var(--u, 1px) * 14.5); font-weight: 600; }
.arow__t span { display: block; font-size: calc(var(--u, 1px) * 12.5); color: var(--app-muted); }
.arow__ph { flex: none; width: calc(var(--u, 1px) * 40); height: calc(var(--u, 1px) * 40); border-radius: calc(var(--u, 1px) * 11); object-fit: cover; }
.arow__v { font-weight: 700; font-size: calc(var(--u, 1px) * 14.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arow__v--pos { color: var(--positive); }
.apill { display: inline-flex; align-items: center; height: calc(var(--u, 1px) * 26); padding: 0 calc(var(--u, 1px) * 10); border-radius: 999px; font-size: calc(var(--u, 1px) * 12); font-weight: 600; white-space: nowrap; background: var(--primary-soft); color: var(--primary); }
.abtn { display: flex; align-items: center; justify-content: center; height: calc(var(--u, 1px) * 48); border-radius: calc(var(--u, 1px) * 14); background: var(--primary); color: var(--primary-ink); font-weight: 700; font-size: calc(var(--u, 1px) * 15); transition: transform 0.2s, filter 0.2s; }
[data-theme="l2"] .abtn, [data-theme="l3"] .abtn { background: var(--btn-bg); color: var(--btn-ink); }
.abtn.press { transform: scale(0.96); filter: brightness(0.9); }
.ainput { display: flex; align-items: center; gap: calc(var(--u, 1px) * 8); height: calc(var(--u, 1px) * 50); padding: 0 calc(var(--u, 1px) * 14); border-radius: calc(var(--u, 1px) * 14); background: var(--app-card); box-shadow: inset 0 0 0 1.5px var(--app-line); font-size: calc(var(--u, 1px) * 17); font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.ainput.focus { box-shadow: inset 0 0 0 2px var(--primary); }
.ainput .caret { width: 2px; height: calc(var(--u, 1px) * 20); background: var(--primary); animation: caret 1s steps(1) infinite; }
.ainput .ph { color: var(--app-muted); font-weight: 500; letter-spacing: -0.01em; font-size: calc(var(--u, 1px) * 15); }
@keyframes caret { 50% { opacity: 0; } }
.atimeline { display: grid; gap: 0; }
.atimeline li { position: relative; display: flex; align-items: center; gap: calc(var(--u, 1px) * 10); padding: calc(var(--u, 1px) * 9) 0; font-size: calc(var(--u, 1px) * 14); font-weight: 500; color: var(--app-muted); }
.atimeline li i { position: relative; width: calc(var(--u, 1px) * 20); height: calc(var(--u, 1px) * 20); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--app-line); flex: none; display: grid; place-items: center; transition: background 0.3s, box-shadow 0.3s; }
.atimeline li span { margin-left: auto; color: var(--app-muted); font-weight: 500; }
.atimeline li.done { color: var(--app-ink); }
.atimeline li.done i { background: var(--primary); box-shadow: none; }
.atimeline li.done i::after { content: ""; width: calc(var(--u, 1px) * 7); height: calc(var(--u, 1px) * 4); border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.atimeline li.doing { color: var(--app-ink); }
.atimeline li.doing i { box-shadow: inset 0 0 0 2px var(--primary); }
.atimeline li.doing i::after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--primary); animation: spin 0.9s linear infinite; position: absolute; inset: 0; box-sizing: border-box; }
@keyframes spin { to { transform: rotate(360deg); } }
.abars { display: flex; align-items: flex-end; gap: calc(var(--u, 1px) * 6); height: calc(var(--u, 1px) * 64); }
.abars i { flex: 1; border-radius: calc(var(--u, 1px) * 6) calc(var(--u, 1px) * 6) calc(var(--u, 1px) * 3) calc(var(--u, 1px) * 3); background: var(--primary-weak); height: 10%; transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.abars i.cur { background: var(--primary); }
.scr { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; }
.scr.on { opacity: 1; }
.pop-in { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.pop-in.on { opacity: 1; transform: none; }
.ripple { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: var(--primary); opacity: 0; pointer-events: none; }
.ripple.go { animation: ripple 0.7s ease-out; }
@keyframes ripple { 0% { opacity: 0.35; transform: scale(0.2); } 100% { opacity: 0; transform: scale(2.2); } }
.toast-in { position: absolute; left: calc(var(--u, 1px) * 14); right: calc(var(--u, 1px) * 14); top: calc(var(--u, 1px) * 54); z-index: 5; display: flex; align-items: center; gap: calc(var(--u, 1px) * 10); padding: calc(var(--u, 1px) * 12) calc(var(--u, 1px) * 14); border-radius: calc(var(--u, 1px) * 16); background: var(--app-card); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--app-line); font-size: calc(var(--u, 1px) * 13); transform: translateY(-140%); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.toast-in.on { transform: none; }
.toast-in b { display: block; font-size: calc(var(--u, 1px) * 14.5); }
.toast-in .dot { width: calc(var(--u, 1px) * 30); height: calc(var(--u, 1px) * 30); border-radius: calc(var(--u, 1px) * 10); background: var(--primary); flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; }

/* video slot (real screen recordings drop in later via data-video) */
.vslot { position: relative; }
.vslot > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ---------- 11. Scrollytelling steps (Toss PG accordion + sticky media) ---------- */
.flow { padding: 140px 0 80px; }
.flow__head { max-width: 1140px; margin: 0 auto 72px; }
.flow__grid { display: grid; grid-template-columns: minmax(0, 393px) minmax(0, 1fr); gap: 120px; max-width: 1140px; margin: 0 auto; }
.flow__list { padding: 8vh 0 4vh; }
.fstep { padding: 24px 0; border-bottom: 1px solid var(--line); min-height: 40vh; display: flex; flex-direction: column; justify-content: center; }
.fstep__n { font-size: 17px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.fstep__t { margin-top: 8px; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.4; font-weight: 700; letter-spacing: -0.03em; color: var(--hl-dim); transition: color 0.4s ease; }
.fstep__d { margin-top: 14px; font-size: 20px; line-height: 1.6; color: var(--ink-2); opacity: 0.35; transition: opacity 0.4s ease; }
.fstep.is-active .fstep__t { color: var(--ink); }
.fstep.is-active .fstep__n { color: var(--primary); }
.fstep.is-active .fstep__d { opacity: 1; }
.flow__media { position: sticky; top: 140px; height: 660px; border-radius: 40px; background: var(--surface-2); overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 64px; }
.flow__media .phone { --w: 340px; }
.flow__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to top, var(--surface-2), transparent); pointer-events: none; }
.flow__bar { position: absolute; z-index: 3; left: 32px; right: 32px; bottom: 28px; display: flex; gap: 6px; }
.flow__bar i { flex: 1; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; position: relative; }
.flow__bar i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.flow__bar i.done::after { transform: scaleX(1); }
.flow__bar i.run::after { animation: bar-run var(--dur, 6s) linear forwards; }
@keyframes bar-run { to { transform: scaleX(1); } }

/* ---------- 12. Olymp section heads, tabs, bento, tilted cards ---------- */
.osec { padding: 100px 0; }
.ohead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: 64px; }
.ohead h2 { font-size: clamp(34px, 4.45vw, 64px); line-height: 1.2; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); max-width: 1000px; }
.ohead p { font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); }
.ohl { transition: color 0.6s ease 0.3s; }
.js .ohl { color: inherit; }
.is-in .ohl, .no-js .ohl { color: var(--hl); }
.statement { font-size: clamp(42px, 6.95vw, 100px); line-height: 1.08; font-weight: 700; letter-spacing: -0.045em; color: var(--ink); text-align: center; max-width: 1100px; margin: 0 auto; }
.otabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.otab { padding: 12px 20px; border-radius: 14px; border: 0; background: var(--tab-bg); color: var(--tab-ink); font-size: 17px; font-weight: 600; line-height: 24px; transition: background-color 0.2s, color 0.2s; }
.otab:hover { color: var(--ink); }
.otab.is-on { background: var(--ink); color: var(--bg); }
.obento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 944px; margin: 0 auto; }
.ocard { position: relative; overflow: hidden; border-radius: 32px; padding: 32px 24px 24px; background: var(--surface-2); min-height: 438px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ocard--wide { grid-column: span 2; min-height: 300px; }
.ocard h3 { font-size: 26px; line-height: 1.3; font-weight: 700; letter-spacing: -0.03em; color: var(--hl-dim); }
.ocard h3 .ohl { color: var(--hl-dim); transition: color 0.6s ease 0.3s; }
.ocard.is-in h3 .ohl, .no-js .ocard h3 .ohl { color: var(--ink); }
.ocard .link-more { font-size: 17px; }
.ocard__art { margin-top: auto; width: 100%; display: flex; justify-content: center; align-items: flex-end; }

.tiltrow { position: relative; display: flex; justify-content: flex-start; padding: 12px 0 28px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tiltrow__track { display: flex; width: max-content; will-change: transform; animation: marquee var(--speed, 46s) linear infinite; }
.tiltrow + .tiltrow { margin-top: -8px; }
.tiltrow:hover .tiltrow__track { animation-play-state: paused; }
.tiltrow--rev .tiltrow__track { animation-direction: reverse; }
.tiltrow li { position: relative; width: 236px; height: 338px; margin-right: -66px; perspective: 200px; flex: none; }
.tilt { position: absolute; inset: 0; display: block; padding: 12px; border-radius: 40px; transform: rotateY(35deg); }
.tilt__b { width: 100%; height: 100%; padding: 1px; border-radius: 24px; background: linear-gradient(148.42deg, var(--tilt-b1) 13.56%, var(--tilt-b2) 80.96%); box-shadow: 0 24px 40px -24px rgba(16, 24, 40, 0.28); }
.tilt__f { position: relative; width: 100%; height: 100%; border-radius: 23px; background: radial-gradient(100.15% 191.04% at 15.32% 0%, var(--tilt-f1) 0%, var(--tilt-f2) 66.17%); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 0 14px; }
.tilt__f .logo-plate { box-shadow: none; background: #fff; padding: 7px 10px; }
.tilt__f .logo-plate img { max-height: 28px; max-width: 104px; }
.tilt__f span { font-size: 17px; font-weight: 600; color: var(--ink-2); }
@keyframes marquee { to { transform: translate3d(var(--shift, -50%), 0, 0); } }

/* ---------- 13. Infinex centered stacked cards + dots ---------- */
.stack { position: relative; padding: 120px 0 0; }
.stack > .wrap .ohead { margin-bottom: 48px; }
.stack__item { position: sticky; top: 104px; display: flex; align-items: flex-start; justify-content: center; padding: 0 20px 14vh; }
.stack__item:last-child { padding-bottom: 0; }
.icard { position: relative; width: min(720px, 100%); aspect-ratio: 384 / 367; max-height: calc(100vh - 130px); border-radius: 40px; padding: 72px; background: var(--surface-2); display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; overflow: hidden; transform-origin: 50% 0; will-change: transform; box-shadow: 0 0 0 1px var(--line); }
.icard__art { position: absolute; left: 0; right: 0; top: 0; height: 64%; display: flex; justify-content: center; align-items: flex-start; perspective: 1800px; overflow: hidden; }
.icard__art .ecard__val { white-space: nowrap; }
.icard__copy { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 16px; }
.icard > .icard__art, .icard > .icard__copy { opacity: var(--fade, 1); }
.icard__copy h3 { font-size: clamp(30px, 3.33vw, 48px); line-height: 1.12; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); }
.icard__sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; font-size: 19px; font-weight: 400; color: var(--ink-2); }
.icard__sub .logo-plate { padding: 6px 10px; border-radius: 10px; }
.icard__sub .logo-plate img { max-height: 18px; max-width: 64px; }
.icard::before { content: ""; position: absolute; left: 0; right: 0; top: 44%; height: 22%; z-index: 2; background: linear-gradient(to bottom, transparent, var(--surface-2)); pointer-events: none; }
.iso { transform: rotateX(42deg) rotateZ(-24deg) translateY(-6%); transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.icard.is-in .iso { transform: rotateX(38deg) rotateZ(-20deg) translateY(-2%); }
/* account steps: same isometric plane, drawn larger (sizes follow --u) */
.iso--steps { --u: 1.45px; width: 86%; margin-top: 4%; display: grid; gap: calc(var(--u) * 12); }
.iso--steps .acard:first-child { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 14) calc(var(--u) * 18); }
.iso--steps .acard:last-child { padding: calc(var(--u) * 6) calc(var(--u) * 18); }
.iso--steps .logo-plate { padding: calc(var(--u) * 6) calc(var(--u) * 9); border-radius: calc(var(--u) * 11); }
.iso--steps .logo-plate img { max-height: calc(var(--u) * 18); max-width: calc(var(--u) * 64); }
/* events: photos dealt down a diagonal, each overlapping the last; the edges may crop */
.cascade { position: absolute; inset: 0; opacity: 0.86; }
.cascade .ecard__img { position: absolute; width: 47%; aspect-ratio: 3 / 2; border-radius: 26px; clip-path: none; box-shadow: 0 30px 50px -26px rgba(16, 24, 40, 0.4); opacity: 0; transform: perspective(1600px) rotateX(44deg) rotateZ(-25deg) translate(-6%, -9%); transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease; }
.cascade .ecard__img:nth-child(1) { left: -5%; top: -8%; z-index: 1; transition-delay: 0.1s; }
.cascade .ecard__img:nth-child(2) { left: 25%; top: 11%; z-index: 2; transition-delay: 0.25s; }
.cascade .ecard__img:nth-child(3) { left: 56%; top: 30%; z-index: 3; transition-delay: 0.4s; }
.icard.is-in .cascade .ecard__img, .no-js .cascade .ecard__img { opacity: 1; transform: perspective(1600px) rotateX(38deg) rotateZ(-20deg); }
.cascade .ecard__img .logo-plate { left: 16px; top: 16px; }
.dots { position: fixed; z-index: 30; right: 29px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.dots.on { opacity: 1; pointer-events: auto; }
.dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--faint); transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.dots button.on { height: 16px; background: var(--ink); }

/* ---------- 14. Accordion / FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0; border: 0; background: none; text-align: left; font-size: clamp(18px, 1.6vw, 23px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.faq__q i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); }
.faq__q i::before, .faq__q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.8px; margin: -0.9px 0 0 -5.5px; background: var(--ink); border-radius: 2px; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.faq__q i::after { transform: rotate(90deg); }
.faq__item.is-open .faq__q i::after { transform: rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 60px 30px 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; color: var(--ink-2); }
.faq-wrap { display: grid; grid-template-columns: 293px minmax(0, 1fr); gap: 24px; max-width: 1224px; margin: 0 auto; }

/* ---------- 15. CTA collage (Infinex "Built different") ---------- */
.built { padding: 140px 0; }
.built__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 10px; max-width: 1180px; margin: 0 auto; }
.bt { position: relative; overflow: hidden; border-radius: 28px; background: var(--surface-2); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 500; color: var(--ink-2); }
.bt b { font-size: 26px; line-height: 1.2; color: var(--ink); font-weight: 700; letter-spacing: -0.03em; }
.bt { --u: 1.15px; }
.bt--r2 { grid-row: span 2; }
.bt .ccard { flex: none; width: 100%; }
.bt .bt__big { font-size: clamp(32px, 3.05vw, 44px); line-height: 1; font-weight: 800; letter-spacing: -0.045em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bt .bt__pos { color: var(--positive); }
.bt .bt__mid { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bt--steps .atimeline { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.bt--steps .atimeline li { padding: 0; gap: 12px; font-size: 19px; }
.bt--steps .atimeline li i { width: 26px; height: 26px; }
.bt--bars .abars { flex: 1; height: auto; min-height: 96px; gap: 8px; margin-top: 8px; }
.bt--c2 { grid-column: span 2; }
.built__center { grid-column: 2 / span 3; grid-row: 2 / span 2; border-radius: 28px; background: var(--surface-2); padding: 48px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.built__center h2 { font-size: clamp(32px, 3.9vw, 56px); line-height: 1.14; font-weight: 800; letter-spacing: -0.045em; color: var(--ink); }
.built__center p { max-width: 420px; font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--ink-2); }
.js .bt { opacity: 0; transform: scale(0.94); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.js .built.is-in .bt { opacity: 1; transform: none; }

/* ---------- 15b. Closing CTA, version B (시안 2): Toss PG copy column, Apple Card big numbers + card fan,
   Toss PG numbered steps joined by a line ---------- */
.fin { padding: 130px 0 140px; background: var(--bg-alt); overflow-x: clip; }
.fin__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; max-width: 1140px; margin: 0 auto; }
.fin__copy h2 { margin-top: 18px; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.16; font-weight: 800; letter-spacing: -0.045em; color: var(--ink); }
.fin__sub { margin-top: 20px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; font-weight: 500; color: var(--ink-2); }
.fin__copy .btn { margin-top: 32px; }
.fin__stats { display: flex; margin-top: 52px; }
.fin__stats > div { display: flex; flex-direction: column; gap: 8px; padding: 0 36px; border-left: 1px solid var(--line-2); }
.fin__stats > div:first-child { padding-left: 0; border-left: 0; }
.fin__stats b { font-size: clamp(36px, 3.4vw, 50px); line-height: 1; font-weight: 800; letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fin__stats > div > span { font-size: 17px; font-weight: 500; color: var(--ink-2); }
/* card fan: the three BenePip card designs, fanned out once the section is on screen */
.fin__cards { position: relative; height: 440px; }
.fin .fin__card { position: absolute; left: 50%; top: 50%; width: min(420px, 58%); font-size: clamp(26px, 3.1vw, 44px); translate: -50% -50%; opacity: 0; transform: translateY(70px) rotate(-4deg); box-shadow: 0 34px 60px -30px rgba(16, 24, 40, 0.42); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease; }
.fin__cards.is-in .fin__card { opacity: 1; }
/* a diagonal deck: logos and amounts sit on the left of every design, so each card behind steps up and to the left */
.fin__cards.is-in .fin__card--1 { transform: translate(-34%, -20%) rotate(-7deg); transition-delay: 0.05s; }
.fin__cards.is-in .fin__card--2 { transform: rotate(-4.5deg); transition-delay: 0.15s; }
.fin__cards.is-in .fin__card--3 { transform: translate(34%, 20%) rotate(-2deg); transition-delay: 0.25s; }
.fin__cards.is-in:hover .fin__card { transition-delay: 0s; }
.fin__cards.is-in:hover .fin__card--1 { transform: translate(-39%, -24%) rotate(-8deg); }
.fin__cards.is-in:hover .fin__card--2 { transform: rotate(-4.5deg) scale(1.02); }
.fin__cards.is-in:hover .fin__card--3 { transform: translate(39%, 24%) rotate(-1deg); }
/* numbered steps */
.fin__steps { --u: 1.2px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1140px; margin: 100px auto 0; padding-top: 34px; }
.fin__steps::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--line-2); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.fin__steps.is-in::before { transform: none; }
.fin__steps > li { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 26px; border-radius: 28px; background: var(--bg); box-shadow: 0 1px 0 var(--line); opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.fin__steps > li::before { content: ""; position: absolute; left: 26px; top: -34px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-alt); box-shadow: inset 0 0 0 3px var(--primary); }
.fin__steps.is-in > li { opacity: 1; transform: none; }
.fin__steps > li:nth-child(2) { transition-delay: 0.12s; }
.fin__steps > li:nth-child(3) { transition-delay: 0.24s; }
.fin__steps > li:nth-child(4) { transition-delay: 0.36s; }
.fin__n { font-size: 17px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.fin__steps h3 { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.fin__steps .ainput { margin-top: auto; height: 60px; font-size: 20px; background: var(--surface); }
.fin__steps .atimeline { margin-top: auto; }
.fin__steps .atimeline li { gap: 12px; padding: 6px 0; font-size: 18px; opacity: 0; transition: opacity 0.5s ease; }
.fin__steps .atimeline li i { width: 24px; height: 24px; }
.fin__steps.is-in .atimeline li { opacity: 1; }
.fin__steps.is-in .atimeline li:nth-child(1) { transition-delay: 0.5s; }
.fin__steps.is-in .atimeline li:nth-child(2) { transition-delay: 0.7s; }
.fin__steps.is-in .atimeline li:nth-child(3) { transition-delay: 0.9s; }
.fin__steps.is-in .atimeline li:nth-child(4) { transition-delay: 1.1s; }
.fin__big { margin-top: auto; font-size: clamp(34px, 3.2vw, 46px); line-height: 1; font-weight: 800; letter-spacing: -0.045em; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.fin__pos { color: var(--positive); }
.fin__mid { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fin__steps .abars { flex: 1; height: auto; min-height: 96px; gap: 8px; margin-top: 4px; }
.fin__steps:not(.is-in) .abars i { height: 8% !important; }
.fin__steps.is-in .abars i { transition-delay: 0.5s; }
@media (max-width: 900px) {
  .fin { padding: 96px 0 104px; }
  .fin__top { grid-template-columns: 1fr; gap: 16px; }
  .fin__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .fin__stats { justify-content: center; }
  .fin__cards { height: 400px; }
  .fin .fin__card { font-size: 48px; }
  .fin__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; padding-top: 0; }
  .fin__steps::before, .fin__steps > li::before { display: none; }
  .fin__steps > li { min-height: 250px; }
}
@media (max-width: 734px) {
  .fin { padding: 72px 0 80px; }
  .fin__copy h2 { font-size: 34px; }
  .fin__sub { font-size: 17px; margin-top: 14px; }
  .fin__copy .btn { margin-top: 26px; align-self: stretch; min-height: 58px; font-size: 18px; }
  .fin__stats { margin-top: 36px; }
  .fin__stats > div { padding: 0 26px; }
  .fin__stats b { font-size: 34px; }
  .fin__cards { height: 250px; }
  .fin .fin__card { font-size: 26px; }
  .fin__steps { --u: 1px; gap: 10px; margin-top: 32px; }
  .fin__steps > li { min-height: 0; padding: 20px 18px; gap: 10px; border-radius: 24px; }
  .fin__n { font-size: 15px; }
  .fin__steps h3 { font-size: 18px; }
  .fin__steps .ainput { height: 50px; font-size: 16px; padding: 0 12px; white-space: nowrap; }
  .fin__steps .atimeline li { font-size: 15px; gap: 8px; padding: 5px 0; }
  .fin__steps .atimeline li i { width: 20px; height: 20px; }
  .fin__big { font-size: 30px; }
  .fin__mid { font-size: 26px; }
  .fin__steps .abars { min-height: 72px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fin .fin__card, .fin__steps > li, .fin__steps .atimeline li { opacity: 1 !important; transition: none !important; }
  .fin__steps::before { transform: none !important; }
  .fin__cards .fin__card--1 { transform: translate(-34%, -20%) rotate(-7deg) !important; }
  .fin__cards .fin__card--2 { transform: rotate(-4.5deg) !important; }
  .fin__cards .fin__card--3 { transform: translate(34%, 20%) rotate(-2deg) !important; }
}

/* ---------- 15c. Closing CTA, version C (시안 3): Olymptrade centered head + Olymp card grid ---------- */
.fin3 { padding: 130px 0 140px; overflow-x: clip; }
.fin3__head .btn { margin-top: 12px; }
.fin3__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 0 auto; }
.fin3__card { min-height: 420px; padding: 40px 32px 34px; gap: 0; }
.fin3__card h3 { font-size: clamp(26px, 2.2vw, 32px); }
.fin3__art { margin-top: auto; width: min(100%, 380px); display: flex; flex-direction: column; text-align: left; }
/* credit cards tilted like Olymp's broker cards: each one turns its right edge away and overlaps the next */
.fin3__deck { position: relative; width: 100%; height: 320px; margin: auto 0; perspective: 760px; }
.fin3 .fin3__cc { position: absolute; top: 50%; width: 64%; font-size: clamp(24px, 2.5vw, 36px); translate: 0 -50%; transform-origin: 0 50%; opacity: 0; transform: rotateY(56deg) translateX(40px); box-shadow: 0 26px 44px -24px rgba(16, 24, 40, 0.4); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease; }
.fin3__cc--1 { left: 3%; }
.fin3__cc--2 { left: 20.5%; }
.fin3__cc--3 { left: 38%; }
.fin3 .is-in .fin3__cc { opacity: 1; transform: rotateY(34deg); }
.fin3 .is-in .fin3__cc--2 { transition-delay: 0.12s; }
.fin3 .is-in .fin3__cc--3 { transition-delay: 0.24s; }
.fin3 .is-in .fin3__deck:hover .fin3__cc { transform: rotateY(22deg); transition-delay: 0s; }
.fin3__card--stats { justify-content: center; gap: 0; }
.fin3__stat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 0; width: min(100%, 320px); }
.fin3__stat + .fin3__stat { border-top: 1px solid var(--line-2); }
.fin3__stat b { font-size: clamp(54px, 5.6vw, 80px); line-height: 1; font-weight: 800; letter-spacing: -0.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fin3__stat > span { font-size: 19px; font-weight: 500; color: var(--ink-2); }
.fin3__conn { --u: 1.2px; gap: 12px; }
.fin3__k { font-size: 17px; font-weight: 600; color: var(--ink-2); }
.fin3__conn .ainput { height: 60px; font-size: 20px; background: var(--surface); }
.fin3__conn .atimeline { margin-top: 10px; padding: 6px 22px; border-radius: 22px; background: var(--surface); }
.fin3__conn .atimeline li { gap: 12px; padding: 6px 0; font-size: 18px; }
.fin3__conn .atimeline li i { width: 24px; height: 24px; }
.fin3__pay { --u: 1.2px; gap: 16px; }
.fin3__pv { display: flex; flex-direction: column; gap: 6px; }
.fin3__pv > span { font-size: 18px; font-weight: 500; color: var(--ink-2); }
.fin3__pv b { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.fin3__pv .fin3__pos { font-size: clamp(48px, 4.6vw, 64px); line-height: 1; color: var(--positive); white-space: nowrap; }
.fin3__pv--row { flex-direction: row; justify-content: space-between; align-items: baseline; }
.fin3__pay .abars { height: 120px; gap: 8px; }
.fin3 .ocard:not(.is-in) .abars i { height: 8% !important; }
.fin3 .ocard.is-in .abars i { transition-delay: 0.4s; }

/* ---------- 15d. Closing CTA, version D (시안 4): Apple Card tile — card straightens on scroll, Wallet-style list ---------- */
.fin4 { padding: 110px 0 120px; overflow-x: clip; }
.fin4__tile { max-width: 1140px; margin: 0 auto; padding: 100px 40px 110px; border-radius: 48px; background: var(--surface-2); }
.fin4__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.fin4__head h2 { font-size: clamp(36px, 4.45vw, 64px); line-height: 1.16; font-weight: 800; letter-spacing: -0.045em; color: var(--ink); }
.fin4__head p { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; color: var(--ink-2); }
.fin4__head .btn { margin-top: 12px; }
.fin4__stage { --cw: min(460px, 84vw); margin: 72px auto 0; width: min(620px, 100%); }
.fin4 .fin4__card { position: relative; z-index: 2; width: var(--cw); margin: 0 auto calc(var(--cw) / -1.68 * 0.5); font-size: calc(var(--cw) * 0.12); transform: perspective(1500px) rotateX(calc(var(--t, 1) * 46deg)) rotateZ(calc(var(--t, 1) * -9deg)) translateY(calc(var(--t, 1) * 60px)); box-shadow: 0 40px 70px -34px rgba(16, 24, 40, 0.45); will-change: transform; }
.fin4 .ccard__amt small { font-size: max(15px, 0.34em); }
.fin4__list { position: relative; padding: calc(var(--cw) / 1.68 * 0.5 + 18px) 0 8px; border-radius: 32px; background: var(--bg); box-shadow: 0 1px 0 var(--line), 0 30px 60px -34px rgba(16, 24, 40, 0.25); }
.fin4__list > li { display: flex; align-items: center; gap: 16px; padding: 18px 30px; border-top: 1px solid var(--line); opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.fin4__list > li:first-child { border-top: 0; }
.fin4__list.is-in > li { opacity: 1; transform: none; }
.fin4__list.is-in > li:nth-child(2) { transition-delay: 0.08s; }
.fin4__list.is-in > li:nth-child(3) { transition-delay: 0.16s; }
.fin4__list.is-in > li:nth-child(4) { transition-delay: 0.24s; }
.fin4__list.is-in > li:nth-child(5) { transition-delay: 0.32s; }
.fin4__list.is-in > li:nth-child(6) { transition-delay: 0.4s; }
.fin4__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--c); color: #fff; font-style: normal; }
.fin4__ic svg { width: 24px; height: 24px; }
.fin4__k { flex: 1; min-width: 0; font-size: 19px; font-weight: 500; color: var(--ink-2); }
.fin4__list b { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin4__uid { letter-spacing: 0.04em; }
.fin4__pos { color: var(--positive) !important; }
.fin4__steps { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fin4__steps b { font-size: 20px; }
.fin4__seg { display: flex; gap: 5px; }
.fin4__seg i { width: 26px; height: 6px; border-radius: 6px; background: var(--line-2); }
.fin4__seg i.on { background: var(--primary); }
.fin4__seg i.now { background: linear-gradient(90deg, var(--primary) 50%, var(--line-2) 50%); background-size: 200% 100%; animation: seg-now 1.6s ease-in-out infinite alternate; }
@keyframes seg-now { from { background-position: 100% 0; } to { background-position: 0 0; } }
.fin4__month { display: flex; align-items: center; gap: 16px; }
.fin4__month .abars { --u: 1px; width: 92px; height: 34px; gap: 4px; }
.fin4__list:not(.is-in) .abars i { height: 10% !important; }
.fin4__list.is-in .abars i { transition-delay: 0.5s; }

@media (max-width: 900px) {
  .fin3, .fin4 { padding: 96px 0 104px; }
  .fin3__grid { grid-template-columns: 1fr; max-width: 620px; }
  .fin3 .fin3__card { min-height: 0; }
  .fin3__art { margin-top: 28px; }
  .fin3__deck { margin-top: 28px; }
  .fin4__tile { padding: 72px 28px 80px; border-radius: 40px; }
}
@media (max-width: 734px) {
  .fin3, .fin4 { padding: 64px 0 72px; }
  .fin3__card { padding: 32px 20px 26px; border-radius: 28px; }
  .fin3__card h3 { font-size: 24px; }
  .fin3__deck { height: 170px; }
  .fin3 .fin3__cc { font-size: 19px; }
  .fin3__card--stats { flex-direction: row; align-items: stretch; padding: 26px 12px; }
  .fin3__stat { padding: 8px 0; gap: 6px; }
  .fin3__stat + .fin3__stat { border-top: 0; border-left: 1px solid var(--line-2); }
  .fin3__stat b { font-size: 44px; }
  .fin3__stat > span { font-size: 16px; }
  .fin3__conn, .fin3__pay { --u: 1px; }
  .fin3__conn .ainput { height: 52px; font-size: 17px; }
  .fin3__conn .atimeline li { font-size: 16px; }
  .fin3__conn .atimeline li i { width: 22px; height: 22px; }
  .fin3__pv > span { font-size: 16px; }
  .fin3__pv .fin3__pos { font-size: 44px; }
  .fin3__pv b { font-size: 28px; }
  .fin3__pay .abars { height: 96px; }
  .fin4__tile { padding: 56px 16px 20px; border-radius: 32px; }
  .fin4__head h2 { font-size: 32px; }
  .fin4__head p { font-size: 17px; }
  .fin4__head .btn { align-self: stretch; min-height: 58px; font-size: 18px; }
  .fin4__stage { --cw: min(300px, 76vw); margin-top: 48px; }
  .fin4__list { border-radius: 24px; }
  .fin4__list > li { gap: 12px; padding: 15px 16px; }
  .fin4__ic { width: 38px; height: 38px; border-radius: 12px; }
  .fin4__ic svg { width: 20px; height: 20px; }
  .fin4__k { font-size: 16px; }
  .fin4__list b { font-size: 19px; }
  .fin4__steps b { font-size: 16px; }
  .fin4__seg i { width: 16px; height: 5px; }
  .fin4__month { gap: 10px; }
  .fin4__month .abars { width: 54px; height: 26px; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .fin3 .fin3__cc { opacity: 1 !important; transform: rotateY(34deg) !important; transition: none !important; }
  .fin4__list > li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fin4__seg i.now { animation: none !important; }
}

/* ---------- 16. Footer (Toss, giant wordmark) ---------- */
.ftr { position: relative; overflow: hidden; padding: 96px 0 0; border-top: 1px solid var(--line); }
.ftr__top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.ftr__brand p { margin-top: 18px; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.38; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.ftr__brand img { height: 34px; width: auto; }
[data-theme^="d"] .ftr__brand img { filter: brightness(0) invert(1); }
.ftr h4 { font-size: 16px; font-weight: 600; color: var(--muted); margin-bottom: 18px; }
.ftr li a { display: inline-block; padding: 7px 0; font-size: 19px; font-weight: 600; color: var(--ink-2); }
.ftr li a:hover { color: var(--ink); }
.ftr__bottom { margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.ftr__giant { margin: 0 0 0 -0.04em; padding-bottom: 36px; font-size: clamp(80px, 12.2vw, 176px); line-height: 0.82; font-weight: 800; letter-spacing: -0.06em; color: var(--giant); white-space: nowrap; user-select: none; }
.ftr__legal { display: grid; gap: 6px; padding-bottom: 48px; font-size: 13.5px; line-height: 1.7; color: var(--faint); }
.ftr__legal b { font-weight: 500; color: var(--muted); }

/* ---------- 17. Toss doc layout (detail pages) ---------- */
.doc { display: flex; gap: 24px; max-width: 1440px; margin: 0 auto; padding: 0 108px; }
/* table of contents: starts level with the first section label, then stays pinned under the header */
.doc__side { flex: 0 0 294px; align-self: flex-start; position: sticky; top: 112px; margin-top: var(--toc-top, 140px); display: flex; flex-direction: column; gap: 8px; }
.doc__side a { display: flex; align-items: center; gap: 10px; height: 34px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); opacity: 0.3; transition: opacity 0.2s ease; }
.doc__side a::before { content: ""; width: 0; height: 12px; margin-right: -10px; border-radius: 100%; background: var(--line-2); transition: width 0.25s ease, margin 0.25s ease; }
.doc__side a.is-on { opacity: 1; }
.doc__side a.is-on::before { width: 12px; margin-right: 0; background: var(--primary); }
.doc__side a:hover { opacity: 0.7; }
.doc__main { flex: 1 1 906px; max-width: 906px; min-width: 0; }
.doc-hero { display: flex; gap: 24px; max-width: 1440px; margin: 0 auto; padding: 120px 108px 0; }
.doc-hero__label { flex: 0 0 294px; font-size: 26px; line-height: 1.4; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.doc-hero__label a { display: block; margin-bottom: 10px; font-size: 18px; font-weight: 600; color: var(--muted); }
.doc-hero__main { flex: 1 1 906px; max-width: 906px; min-width: 0; display: flex; flex-direction: column; gap: 56px; }
.doc-hero__media { position: relative; border-radius: 32px; overflow: hidden; background: var(--surface-2); aspect-ratio: 906 / 480; }
.sharebar { position: sticky; top: 92px; z-index: 20; display: flex; justify-content: flex-end; gap: 4px; max-width: 1440px; margin: 0 auto; padding: 10px 108px; pointer-events: none; }
.sharebar a, .sharebar button { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 136px; border: 0; background: var(--nav-bg); box-shadow: inset 0 0 0 1px var(--nav-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 16px; font-weight: 600; color: var(--ink-2); }
.dsec { padding: 140px 0 0; display: flex; flex-direction: column; gap: 56px; }
.dsec:last-child { padding-bottom: 140px; }
.dsec__head { display: flex; flex-direction: column; gap: 20px; }
.dsec__head .t-lead { max-width: 760px; }
.cols { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 24px; }
.col { padding-left: 20px; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 12px; }
.col__art { height: 240px; margin-bottom: 24px; border-radius: 24px; background: var(--surface-2); position: relative; overflow: hidden; display: grid; place-items: center; }
.col__art > img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecard__body h3 a:hover { color: var(--primary); }
.col h3 { font-size: clamp(26px, 2.78vw, 40px); line-height: 1.4; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.col p { font-size: 20px; line-height: 1.6; color: var(--ink-2); }
.cols--text .col h3 { font-size: clamp(22px, 1.95vw, 28px); }
.cols--text .col p { font-size: 19px; }
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px; padding: 24px 0; }
.stat { padding-left: 20px; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 64px; }
.stat__k { font-size: 19px; color: var(--ink-2); font-weight: 500; }
.stat__v { font-size: clamp(28px, 2.78vw, 40px); line-height: 1.4; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.stat__v--dim { color: var(--faint); }
.ctable { border-top: 1px solid var(--line); }
.crow { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.crow__k { font-size: 19px; font-weight: 500; color: var(--ink-2); }
.crow__v { font-size: 20px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.crow__v--pending { color: var(--faint); font-weight: 500; }
.crow__s { display: flex; }
.actions { display: grid; gap: 0; border-top: 1px solid var(--line); }
.action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.action:hover { padding-left: 12px; }
.action h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.action p { margin-top: 8px; font-size: 19px; color: var(--ink-2); }
.wcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wcard { border-radius: 40px; background: var(--surface-2); overflow: hidden; display: flex; flex-direction: column; min-height: 390px; }
.wcard__art { height: 188px; position: relative; display: grid; place-items: center; overflow: hidden; }
.wcard__copy { padding: 20px 36px 36px; display: flex; flex-direction: column; gap: 10px; }
.wcard__copy h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.wcard__copy p { font-size: 18px; color: var(--ink-2); line-height: 1.6; }
.chartcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.chartcard { border-radius: 40px; background: var(--surface-2); overflow: hidden; }
.chartcard svg { display: block; width: 100%; height: 220px; }
.chartcard__c { padding: 12px 36px 36px; display: flex; flex-direction: column; gap: 4px; }
.chartcard__c span { font-size: 18px; color: var(--ink-2); }
.chartcard__c b { font-size: 26px; letter-spacing: -0.03em; color: var(--ink); }
.ln-draw { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }
.is-in .ln-draw { stroke-dashoffset: 0; }
.mediacard { position: relative; border-radius: 40px; background: var(--surface-2); overflow: hidden; display: flex; justify-content: center; padding-top: 56px; height: 520px; }
.mediacard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(to top, var(--surface-2), transparent); }
.acc { display: grid; }
.acc__i { padding: 24px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.acc__i h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--hl-dim); transition: color 0.3s; }
.acc__i p { margin-top: 12px; font-size: 19px; color: var(--ink-2); line-height: 1.6; display: none; }
.acc__i.is-on h3 { color: var(--ink); }
.acc__i.is-on p { display: block; animation: fade-in 0.5s ease both; }
.split { display: grid; grid-template-columns: minmax(0, 393px) minmax(0, 1fr); gap: 64px; align-items: start; }
.split--sticky > :last-child { position: sticky; top: 160px; }
.ba { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; align-items: center; }
.ba__t span { font-size: 18px; font-weight: 600; color: var(--muted); }
.ba__t h3 { margin-top: 8px; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.ba__t p { margin-top: 16px; font-size: 19px; color: var(--ink-2); line-height: 1.6; }
.readmore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rcard { display: flex; flex-direction: column; gap: 24px; }
.rcard__art { aspect-ratio: 441 / 266; border-radius: 32px; overflow: hidden; background: var(--surface-2); position: relative; display: grid; place-items: center; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.rcard__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rcard:hover .rcard__art { transform: scale(0.985); }
.rcard span { font-size: 17px; color: var(--muted); font-weight: 500; }
.rcard h3 { margin-top: 6px; font-size: 26px; line-height: 1.45; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }

/* steps pass (welcome pass / timeline in detail pages) */
.pass { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.pass li { position: relative; padding: 24px 12px 0 0; font-size: 21px; font-weight: 700; color: var(--hl-dim); transition: color 0.4s; }
.pass li::before { counter-increment: s; content: "0" counter(s); display: block; font-size: 17px; font-weight: 600; color: var(--faint); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.pass li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line); }
.pass li i { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--primary); z-index: 1; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.pass li.on { color: var(--ink); }
.pass li.on i { width: 100%; }

.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ticket { position: relative; border-radius: 24px; padding: 28px 24px; background: var(--surface-2); display: flex; flex-direction: column; gap: 32px; overflow: hidden; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--bg); }
.ticket::before { left: -12px; }
.ticket::after { right: -12px; }
.ticket b { font-size: 24px; letter-spacing: -0.03em; color: var(--ink); }
.ticket span { font-size: 17px; color: var(--muted); font-weight: 500; }
.ticket.on { background: var(--primary-soft); }
.ticket.on span { color: var(--primary); }

/* ---------- 18. Lists: brokers, events, compare tray ---------- */
.page-hero { padding: 120px 0 64px; text-align: center; }
.page-hero .statement { font-size: clamp(38px, 4.9vw, 70px); }
.page-hero p { margin-top: 22px; font-size: clamp(19px, 1.67vw, 24px); color: var(--ink-2); }
.page-hero .otabs { margin-top: 40px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; max-width: 1140px; margin: 0 auto 24px; }
.search { position: relative; flex: 1 1 320px; max-width: 420px; }
.search input { width: 100%; height: 60px; padding: 0 22px 0 54px; border-radius: 999px; border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px transparent; font-size: 18px; font-weight: 500; color: var(--ink); transition: box-shadow 0.2s; }
.search input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--primary); }
.search svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--faint); }
.note { max-width: 1140px; margin: 0 auto 28px; font-size: 14px; color: var(--faint); }
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; }
.bcard { position: relative; border-radius: 32px; padding: 32px; background: var(--surface-2); display: flex; flex-direction: column; gap: 18px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s; }
.bcard:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(16, 24, 40, 0.35); }
.bcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bcard__top .logo-plate { height: 64px; min-width: 120px; padding: 10px 16px; border-radius: 18px; }
.bcard__top .logo-plate img { max-height: 30px; max-width: 130px; }
.bcard h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); }
.bcard__line { font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.bcard__line b { font-weight: 700; color: var(--ink); }
.bcard__act { display: flex; gap: 10px; margin-top: auto; padding-top: 14px; }
.bcard__act .btn { flex: 1; min-height: 56px; font-size: 18px; }
.cmp { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--bg); color: var(--ink); display: grid; place-items: center; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.cmp svg { width: 18px; height: 18px; transition: transform 0.3s; }
.cmp[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.cmp[aria-pressed="true"] svg { transform: rotate(45deg); }
.tray { position: fixed; z-index: 60; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 24px; background: var(--nav-bg); box-shadow: inset 0 0 0 1px var(--nav-line), 0 20px 50px -20px rgba(16, 24, 40, 0.4); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); transform: translate(-50%, 160%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); font-size: 17px; font-weight: 600; color: var(--ink-2); }
.tray { visibility: hidden; }
.tray.on { transform: translate(-50%, 0); visibility: visible; }
.tray__logos { display: flex; gap: 6px; }
.tray__logos .logo-plate { width: 52px; height: 36px; padding: 4px 6px; border-radius: 10px; }
.tray__logos .logo-plate img { max-height: 16px; max-width: 40px; }
.egrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; max-width: 1180px; margin: 0 auto; }
.ecard { position: relative; display: flex; flex-direction: column; gap: 20px; }
.ecard__img { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 28px; overflow: hidden; clip-path: inset(0 round 28px); background: var(--surface-2); }
.ecard__img img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.ecard:hover .ecard__img img.ph { transform: scale(1.03); }
.ecard__img img.ph--c1 { scale: -1 1; }
.ecard__img img.ph--c2 { scale: 1.75; transform-origin: 74% 50%; }
.ecard__img .logo-plate { position: absolute; left: 18px; top: 18px; padding: 8px 12px; border-radius: 12px; }
.ecard__img .logo-plate img { max-height: 20px; max-width: 84px; }
.ecard__body { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.ecard__body h3 { font-size: 24px; line-height: 1.35; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.ecard__body p { font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.ecard__body .tags { margin-bottom: 4px; }
.ecard__art { position: relative; height: 170px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.ecard__art .logo-plate { align-self: flex-start; padding: 6px 9px; border-radius: 10px; }
.ecard__art .logo-plate img { max-height: 16px; max-width: 72px; }
.ecard__val { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -0.045em; }
.ecard__val small { font-size: 15px; font-weight: 700; opacity: 0.8; margin-left: 4px; letter-spacing: -0.02em; }
.ecard__c { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ecard__c h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.ecard__c .link-more { margin-top: auto; font-size: 15px; }
.ecard__heart { position: absolute; right: 16px; top: 16px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.86); color: #8b95a1; display: grid; place-items: center; backdrop-filter: blur(10px); transition: transform 0.2s, color 0.2s; }
.ecard__heart svg { width: 20px; height: 20px; }
.ecard__heart[aria-pressed="true"] { background: #fff; color: #f03e3e; }
.ecard__heart:active { transform: scale(0.88); }
.empty { grid-column: 1 / -1; padding: 80px 0; text-align: center; color: var(--muted); }
.sel { height: 60px; padding: 0 48px 0 22px; border-radius: 999px; border: 0; background: var(--surface-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238b95a1' stroke-width='1.8'/></svg>") no-repeat right 18px center; -webkit-appearance: none; appearance: none; font-size: 17px; font-weight: 600; color: var(--ink); }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch i { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--line-2); transition: background 0.2s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.switch input:checked + i { background: var(--primary); }
.switch input:checked + i::after { transform: translateX(16px); }

/* modal sheet (compare, event detail) */
.sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet.on { opacity: 1; visibility: visible; }
.sheet__box { position: relative; width: min(880px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 32px; background: var(--bg); padding: 48px; transform: translateY(24px) scale(0.98); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.5); }
.sheet.on .sheet__box { transform: none; }
.sheet__x { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; }
.sheet__x svg { width: 14px; height: 14px; transform: rotate(45deg); }
.ctable-grid { display: grid; grid-template-columns: 150px repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ctable-grid > div { padding: 18px 12px; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink); font-weight: 600; }
.ctable-grid > .k { color: var(--muted); font-weight: 600; padding-left: 0; }
.ctable-grid > .h { display: flex; align-items: center; }

/* forms */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 17px; font-weight: 600; color: var(--ink-2); }
.input, .textarea { width: 100%; min-height: 60px; padding: 0 20px; border-radius: 16px; border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px transparent; font-size: 18px; font-weight: 500; color: var(--ink); transition: box-shadow 0.2s; }
.textarea { padding: 16px 18px; min-height: 140px; resize: vertical; line-height: 1.6; }
.input:focus, .textarea:focus, .sel:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--primary); }
.check { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp input { height: 60px; border-radius: 14px; border: 0; background: var(--surface-2); text-align: center; font-size: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.otp input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--primary); }
.toast { position: fixed; z-index: 90; left: 50%; top: 84px; transform: translate(-50%, -20px); padding: 14px 20px; border-radius: 16px; background: var(--ink); color: var(--bg); font-size: 16px; font-weight: 600; opacity: 0; visibility: hidden; transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- 19. Dashboard UI ---------- */
.dash { display: grid; grid-template-columns: 188px minmax(0, 1fr); min-height: 520px; background: var(--app-bg); font-size: 12.5px; }
.dash--compact { min-height: 0; grid-template-columns: 150px minmax(0, 1fr); }
.dash__side { padding: 18px 12px; border-right: 1px solid var(--app-line); background: var(--app-card); display: flex; flex-direction: column; gap: 2px; }
.dash__side img { height: 18px; width: auto; margin: 2px 8px 16px; align-self: flex-start; }
[data-theme^="d"] .dash__side img { filter: brightness(0) invert(1); }
.dash__side span { padding: 8px 10px; border-radius: 10px; font-weight: 600; color: var(--app-muted); }
.dash__side span.on { background: var(--primary-soft); color: var(--primary); }
.dash__main { padding: 20px; display: grid; gap: 12px; align-content: start; }
.dash__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash__main .acard__v { font-size: 24px; }
.dash__grid2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.dtable { width: 100%; border-collapse: collapse; }
.dtable th, .dtable td { padding: 9px 6px; text-align: left; border-bottom: 1px solid var(--app-line); white-space: nowrap; }
.dtable th { font-size: 12px; color: var(--app-muted); font-weight: 500; }
.dtable td { font-weight: 600; }
.dtable td:last-child, .dtable th:last-child { text-align: right; }

/* Infinex feature explorer (dashboard page) */
.explore { display: grid; grid-template-columns: 512px minmax(0, 1fr); border-radius: 40px; background: var(--surface-2); overflow: hidden; min-height: 600px; max-width: 1280px; margin: 0 auto; }
.explore__l { padding: 64px 64px 64px 80px; display: flex; flex-direction: column; gap: 40px; }
.explore__l h2 { font-size: 40px; letter-spacing: -0.035em; color: var(--ink); font-weight: 700; }
.explore__pills { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.xpill { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 12px 32px 12px 16px; border-radius: 32px; border: 0; background: var(--surface-3); color: var(--ink-2); font-size: 19px; font-weight: 600; text-align: left; transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.xpill i { position: relative; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.xpill i::before, .xpill i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; margin: -0.75px 0 0 -4px; background: currentColor; }
.xpill i::after { transform: rotate(90deg); transition: transform 0.3s; }
.xpill.on { background: var(--ink); color: var(--bg); }
.xpill.on i::after { transform: rotate(0); }
.js .xpill { opacity: 0; transform: translateY(136px); transition: color 0.15s, background-color 0.15s, opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.js .is-in .xpill { opacity: 1; transform: none; }
.explore__r { position: relative; display: grid; place-items: center; padding: 40px; background: linear-gradient(160deg, var(--surface-3), var(--surface-2)); }
.xpanel { position: absolute; inset: 40px; display: grid; place-items: center; opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.xpanel.on { opacity: 1; transform: none; pointer-events: auto; }
.ihero { display: grid; grid-template-columns: 452px minmax(0, 1fr); gap: 48px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 120px 20px 80px; overflow-x: clip; }
.ihero h1 { font-size: clamp(36px, 3.33vw, 48px); line-height: 1.12; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); }
.ihero h1 { font-size: clamp(38px, 3.9vw, 56px); }
.ihero p { margin-top: 20px; font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); }
.ihero__art { position: relative; height: 560px; perspective: 2000px; }
.ihero__art .win { position: absolute; right: -40px; top: 0; width: 760px; transform: rotateY(-14deg) rotateX(6deg); transform-origin: left center; }
.ihero__art .vslot { position: absolute; left: 0; bottom: -40px; z-index: 2; }
.ihero__art .phone { --w: 230px; }

/* login */
.auth { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 60px 20px 100px; }
.auth__box { width: min(480px, 100%); text-align: center; }
.auth__box h1 { margin-top: 22px; font-size: 42px; line-height: 1.25; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); }
.auth__box > p { margin-top: 14px; font-size: 19px; color: var(--ink-2); }
.auth__card { margin-top: 36px; text-align: left; display: grid; gap: 16px; }
[data-theme^="d"] .auth__logo { filter: brightness(0) invert(1); }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.seg button { height: 52px; border: 0; border-radius: 11px; background: transparent; font-size: 17px; font-weight: 700; color: var(--muted); transition: background 0.2s, color 0.2s; }
.seg button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }

/* ---------- 20. Floating widgets ---------- */
.chatbtn { position: fixed; z-index: 55; right: 24px; bottom: 24px; display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border-radius: 50%; border: 0; background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 16px 34px -12px rgba(16, 24, 40, 0.5); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.chatbtn:hover { transform: translateY(-2px); }
.chatbtn svg { width: 32px; height: 32px; }
.themer { position: fixed; z-index: 70; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; background: rgba(18, 18, 22, 0.88); color: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 15px; font-weight: 700; }
.themer__label { padding: 0 8px 0 10px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.themer__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; padding: 0 12px; border-radius: 999px; color: rgba(255, 255, 255, 0.72); font-weight: 800; letter-spacing: 0.02em; }
.themer__btn--wide { margin-left: 4px; padding: 0 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.themer__btn:hover { color: #fff; }
.themer__btn[aria-current="page"] { background: #fff; color: #111; box-shadow: none; }
.themer__btn[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: #111; color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }

/* ---------- 20b. Page components (benefits, details) ---------- */
[hidden] { display: none !important; }
.credit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1140px; margin: 0 auto; }
.credit { display: flex; flex-direction: column; gap: 24px; }
.credit .ccard { font-size: clamp(40px, 4vw, 56px); border-radius: 22px; }
.credit .ccard__logo .logo-plate { padding: 7px 11px; border-radius: 11px; }
.credit .ccard__logo .logo-plate img { max-height: 20px; max-width: 92px; }
.credit__c { display: flex; flex-direction: column; gap: 16px; padding: 0 4px; }
.credit__c p { font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.credit__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.credit__h h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
/* BenePip card designs: artwork + broker logo + amount (the chip is part of the artwork) */
.ccard.ccard--art { aspect-ratio: 1200 / 714; background: var(--card-art) center / 100% 100% no-repeat; color: #14213d; box-shadow: 0 18px 38px -18px rgba(16, 24, 40, 0.34); }
.ccard.ccard--a1 { --card-art: url("../img/cards/card-a1.webp"); border-radius: 4.86% / 8.14%; background: radial-gradient(62% 58% at 16% 86%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 72%), var(--card-art) center / 100% 100% no-repeat; }
.ccard.ccard--a2 { --card-art: url("../img/cards/card-a2.webp"); border-radius: 3.16% / 5.41%; }
.ccard.ccard--a3 { --card-art: url("../img/cards/card-a3.webp"); border-radius: 3.89% / 6.49%; }
.ccard--art::after { opacity: 0.5; }
.ccard--art .ccard__chip, .ccard--art .ccard__mark { display: none; }
.ccard__logo .ccard__brand { display: block; height: max(18px, 0.5em); width: auto; }
.ccard--art .ccard__logo { left: 6%; top: 9.6%; z-index: 2; display: flex; line-height: 0; }
.ccard--art .ccard__amt { left: 6%; bottom: 11.5%; z-index: 2; }
.ccard--art .ccard__amt small { opacity: 0.72; }
/* the second design has its own glass slot for the logo */
.ccard--a2 .ccard__logo { left: 5.5%; top: 18.3%; width: 19.75%; height: 15.2%; display: flex; align-items: center; justify-content: center; }
.ccard--a2 .ccard__logo .logo-plate { width: 84%; height: 70%; padding: 0; background: transparent; box-shadow: none; }
.ccard--a2 .ccard__logo .logo-plate img { max-width: 100%; max-height: 100%; }
.gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 1140px; margin: 0 auto; }
.gift { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 480px; padding: 48px 40px 40px; border-radius: 40px; background: var(--tile-bg); box-shadow: var(--tile-shadow); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.gift:hover { transform: translateY(-6px); }
.gift__icon { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: var(--grad-tile-1); margin-bottom: auto; }
.gift:nth-child(2) .gift__icon { background: var(--grad-tile-3); }
.gift:nth-child(3) .gift__icon { background: linear-gradient(150deg, #f59f00, #f76707); }
.gift__icon svg { width: 36px; height: 36px; }
.gift h3 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.15; font-weight: 700; letter-spacing: -0.045em; color: var(--ink); }
.gift p { font-size: 19px; color: var(--ink-2); }
.gift .link-more { margin-top: 6px; font-size: 18px; }
.pass--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pass.is-in li { color: var(--ink); }
.pass.is-in li i { width: 100%; transition-delay: calc(var(--i, 0) * 0.35s); }
.cta-bar { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 96px; padding: 20px 28px; border-radius: 24px; background: var(--primary); color: var(--primary-ink); font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.04em; text-align: center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s; }
.cta-bar:hover { transform: scale(1.012); filter: brightness(1.06); }
.cta-bar::after { content: ""; width: 12px; height: 12px; border-right: 3px solid currentColor; border-top: 3px solid currentColor; transform: rotate(45deg); }
.hero-tile { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 48px; background: var(--surface-2); overflow: hidden; }
.hero-tile > .vslot { position: relative; z-index: 1; }
.hero-tile--soft { background: linear-gradient(160deg, var(--surface-3), var(--surface-2)); }
.hero-tile .phone { --w: 320px; }
.hero-tile > img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-logo-lg .logo-plate { height: 72px; min-width: 150px; padding: 14px 22px; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08); }
.b-logo-lg .logo-plate img { max-height: 34px; max-width: 170px; }
.col__art .ccard { width: 58%; position: absolute; font-size: 30px; }
.col__art .ccard:nth-child(1) { transform: rotate(-8deg) translate(-22%, 6%); }
.col__art .ccard:nth-child(2) { transform: rotate(4deg) translate(18%, -4%); }
.bigtype { font-size: clamp(54px, 6vw, 84px); font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rcard__art .bigtype { font-size: clamp(44px, 4.4vw, 64px); }
.ecard__art .logo-plate { min-height: 30px; min-width: 56px; }
.askform { max-width: 640px; }
.askform .sel { width: 100%; border-radius: 16px; height: 60px; }
/* dashboard explorer panels: in-app UI shown larger than in a phone */
.xpanel { --u: 1.3px; }
.xcard { width: min(500px, 100%); padding: calc(var(--u) * 6) calc(var(--u) * 16); }
.ihero__cta { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.notif { display: grid; gap: 12px; width: min(500px, 100%); }
.notif .acard { display: flex; gap: 14px; align-items: center; padding: 18px 20px; }
.notif .acard i { flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 18px; }
.notif .acard b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.notif .acard span { font-size: 17px; color: var(--app-muted); }
.thread { display: grid; gap: 12px; width: min(500px, 100%); }
.bubble { max-width: 84%; padding: 15px 18px; border-radius: 20px; font-size: 18px; line-height: 1.5; background: var(--app-card); color: var(--app-ink); box-shadow: 0 1px 0 var(--app-line); }
.bubble--me { justify-self: end; background: var(--primary); color: var(--primary-ink); border-bottom-right-radius: 6px; }
[data-theme="l2"] .bubble--me, [data-theme="l3"] .bubble--me { background: var(--btn-bg); color: var(--btn-ink); }
.bubble--bp { border-bottom-left-radius: 6px; }
@media (max-width: 900px) {
  .credit-grid, .gift-grid { grid-template-columns: 1fr; }
  .gift { min-height: 340px; padding: 36px 28px 30px; border-radius: 32px; }
  .pass--3 { grid-template-columns: 1fr; row-gap: 16px; }
}

/* ---------- 21. Reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.counter { font-variant-numeric: tabular-nums; }

/* ---------- 22. Responsive ---------- */
@media (max-width: 1200px) {
  .doc, .doc-hero, .sharebar { padding-left: 40px; padding-right: 40px; }
  .doc__side, .doc-hero__label { flex-basis: 220px; }
}
@media (max-width: 1240px) {
  .hdr { top: 0; margin-top: 0; height: 80px; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
  .hdr__in { height: 80px; }
  .is-scrolled .hdr { background: rgba(255, 255, 255, 0.86); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 var(--line); }
  .hdr__pill { display: none; }
  .hdr__menu { display: inline-flex; }
  .hdr__login { display: none; }
}
@media (max-width: 1068px) {
  .flow__grid { gap: 56px; }
  .explore { grid-template-columns: 1fr; }
  .explore__r { min-height: 520px; }
  .ihero { grid-template-columns: 1fr; padding-top: 80px; }
  .ihero__art { height: 480px; }
  .built__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(168px, auto); }
  .built__grid .bt--r2 { grid-row: auto; }
  .built__center { order: -1; grid-column: 1 / -1; grid-row: auto; }
  .bt--hide-md { display: none; }
}
@media (max-width: 900px) {
  .doc__side, .doc-hero__label { display: none; }
  .doc, .doc-hero, .sharebar { padding-left: 20px; padding-right: 20px; }
  .doc-hero { padding-top: 96px; }
  .sharebar { top: 84px; }
  .hero__scene { --scene-w: 128%; }
  .hero__coin--r { left: 80%; }
  .tile:not(.tile--wide) { --tile-h: 600px; }
  .tile__face { padding: 56px 40px; }
  .ring { width: 230px; height: 230px; right: 36px; top: 40px; }
  .ring__c b { font-size: 34px; }
  .ring__c span { font-size: 16px; }
  .icons-grid { top: 49px; grid-template-columns: repeat(2, 100px); grid-auto-rows: 100px; gap: 12px; }
  .icons-grid span { border-radius: 26px; }
  .icons-grid svg { width: 46px; height: 46px; }
  .flow__grid { display: flex; flex-direction: column; gap: 0; }
  .flow__media { position: sticky; top: 80px; z-index: 3; order: -1; flex: none; height: 480px; }
  .flow__list { padding: 8px 0 0; }
  .fstep { min-height: 36vh; justify-content: flex-start; padding: 28px 0; }
  .fstep:last-child { min-height: 0; border-bottom: 0; }
  .bgrid, .egrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcards, .chartcards { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; }
  .split, .ba { grid-template-columns: 1fr; }
  .split--sticky > :last-child { position: relative; top: 0; }
  .stats, .cols { grid-template-columns: 1fr; }
  .stat { gap: 18px; }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__bottom { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ftr__legal { order: -1; padding-bottom: 0; }
}
@media (max-width: 734px) {
  body { font-size: 16px; }
  .wrap--olymp { padding: 0 16px; }
  .hdr { top: 0; height: 68px; margin-top: 0; }
  .hdr__in { height: 68px; padding: 0 14px; }
  .hdr__logo img { height: 30px; }
  .hdr__act .btn { min-height: 48px; padding: 0 20px; font-size: 16px; }
  .hdr__menu { width: 48px; height: 48px; }
  .msheet { padding-top: 104px; }
  .hero { margin-top: -68px; padding: 112px 16px 0; min-height: 0; }
  .hero__eyebrow { font-size: 24px; line-height: 40px; }
  .hero__title { margin-top: 14px; }
  .hero__eyebrow img { height: 26px; }
  .hero__sub { font-size: 18px; }
  .hero__cta { margin-top: 30px; width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn { min-height: 58px; font-size: 18px; }
  .hero__stage { height: 400px; padding-top: 44px; }
  .hero__stage .phone { --w: 300px; }
  .hero__scene { --scene-w: 125%; }
  .hero__coin--l { left: 11.5%; top: 30%; width: 6.6%; }
  .hero__coin--r { left: 82%; top: 22%; width: 8%; }
  .intro { padding: 80px 0 30px; }
  .intro__text { font-size: 22px; }
  .bento { padding: 30px 0 48px; }
  .bento__grid { grid-template-columns: 1fr; gap: 12px; }
  .tile, .tile--wide { grid-column: auto; height: var(--tile-hm, 380px); perspective: 2400px; }
  .tile--wide { --tile-hm: 560px; }
  .tile--grad { --tile-hm: 370px; }
  .tile--note { --tile-hm: 330px; }
  .tile--ring, .tile--gift { --tile-hm: 390px; }
  .tile__in, .tile__face { border-radius: 28px; }
  .tile__face { padding: 30px 24px; }
  .tile__face--back { gap: 16px; }
  .tile__face--back h4 { font-size: 26px; }
  .tile__face--back li, .tile__face--back p { font-size: 17px; }
  .tile__p { font-size: 18px; margin-top: 16px; }
  .tile__plus { right: 16px; bottom: 16px; width: 38px; height: 38px; }
  .big-num { font-size: 88px; }
  .ring { width: 156px; height: 156px; right: 20px; top: 22px; }
  .ring__c b { font-size: 25px; }
  .ring__c span { font-size: 15px; }
  .icons-grid { top: 24px; grid-template-columns: repeat(2, 66px); grid-auto-rows: 66px; gap: 10px; }
  .icons-grid span { border-radius: 18px; }
  .icons-grid svg { width: 32px; height: 32px; }
  .tile__split { grid-template-columns: 1fr; gap: 16px; padding-top: 30px; }
  .tile__split > :first-child { padding-bottom: 0; }
  .tile__split .phone { --w: 250px; }
  .icons-row span { width: 58px; height: 58px; border-radius: 16px; }
  .icons-row svg { width: 28px; height: 28px; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
  .flow { padding: 64px 0 72px; }
  .flow__media { top: 68px; height: 380px; border-radius: 28px; padding-top: 26px; }
  .flow__media .phone { --w: 250px; }
  .flow__bar { left: 20px; right: 20px; bottom: 18px; }
  .fstep { min-height: 34vh; padding: 22px 0; }
  .fstep:last-child { min-height: 0; }
  .fstep__t { font-size: 24px; }
  .fstep__d { font-size: 18px; }
  .osec { padding: 64px 0; }
  .ohead { margin-bottom: 40px; }
  .ohead h2 { font-size: 34px; }
  .obento { grid-template-columns: 1fr; }
  .ocard--wide { grid-column: auto; }
  .ocard { min-height: 360px; }
  .otabs { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .otabs::-webkit-scrollbar { display: none; }
  .otab { flex: none; min-height: 48px; padding: 12px 18px; font-size: 17px; }
  .tiltrow { padding: 4px 0 14px; }
  .tiltrow li { width: 128px; height: 176px; margin-right: -30px; }
  .tilt { padding: 8px; }
  .tilt__b { border-radius: 18px; }
  .tilt__f { border-radius: 17px; padding: 0 9px; }
  .tilt__f .logo-plate { padding: 5px 7px; border-radius: 9px; }
  .tilt__f .logo-plate img { max-height: 18px; max-width: 60px; }
  .tilt__f > span:not(.logo-plate) { display: none; }
  .stack { padding-top: 40px; }
  .stack > .wrap .ohead { margin-bottom: 32px; }
  .stack__item { top: auto; height: auto; min-height: 0; padding: 6px 16px; position: relative; }
  .icard { aspect-ratio: auto; min-height: 0; max-height: none; padding: 0; border-radius: 28px; gap: 0; justify-content: flex-start; }
  .icard::before { display: none; }
  .icard__art { --u: 1.1px; position: relative; height: auto; display: block; padding: 22px 18px 0; perspective: none; overflow: visible; }
  .icard__art .iso { transform: none !important; width: 100% !important; margin: 0 !important; }
  .icard .win { box-shadow: 0 0 0 1px var(--line), 0 20px 40px -24px rgba(16, 24, 40, 0.3); }
  .icard .dash__main { padding: 14px; gap: 10px; }
  .icard .dash__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .icard .dash__row > :nth-child(3) { display: none; }
  .icard .ecard__img { aspect-ratio: 4 / 5; border-radius: 18px; clip-path: inset(0 round 18px); }
  .icard .ecard__img .logo-plate { left: 8px; top: 8px; padding: 4px 6px; border-radius: 8px; }
  .icard .ecard__img .logo-plate img { max-height: 14px; max-width: 56px; }
  .icard__art .iso--steps { --u: 1.1px; }
  .cascade { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .cascade { opacity: 1; }
  .cascade .ecard__img, .icard.is-in .cascade .ecard__img { position: relative; width: auto; opacity: 1; transform: none; box-shadow: none; }
  .cascade .ecard__img:nth-child(n) { left: auto; top: auto; }
  .cascade .ecard__img .logo-plate { left: 8px; top: 8px; }
  .icard__copy { padding: 22px 24px 28px; gap: 12px; }
  .icard__copy h3 { font-size: 28px; }
  .icard__sub { font-size: 17px; }
  .dots { display: none; }
  .faq__q { padding: 24px 0; font-size: 19px; }
  .faq__a p { padding-right: 0; font-size: 17px; }
  .built { padding: 80px 0; }
  .built__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(132px, auto); grid-auto-flow: row dense; }
  .built__grid .bt--r2 { grid-row: span 2; }
  .built__center { order: -1; grid-column: 1 / -1; grid-row: auto; padding: 32px 20px; }
  .built__center h2 { font-size: 32px; }
  .built__center p { font-size: 17px; }
  .bt { padding: 18px; font-size: 16px; }
  .bt b { font-size: 22px; }
  .bt .bt__big { font-size: 30px; }
  .bt .bt__mid { font-size: 26px; }
  .bt--steps .atimeline li { font-size: 17px; }
  .bt--steps .atimeline li i { width: 22px; height: 22px; }
  .bt .ainput { font-size: 15px; white-space: nowrap; padding: 0 12px; }
  .bt .ccard { font-size: 22px; }
  .dash--compact { grid-template-columns: 1fr; }
  .ftr { padding-top: 72px; }
  .ftr__top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .ftr li a { font-size: 17px; }
  .ftr__giant { font-size: 26vw; padding-bottom: 24px; }
  .bgrid, .egrid { grid-template-columns: 1fr; }
  .egrid { row-gap: 40px; }
  .page-hero { padding: 72px 0 36px; }
  .toolbar { padding: 0; }
  .search { max-width: none; }
  .toolbar .sel { width: 100%; }
  .dsec { padding-top: 88px; gap: 36px; }
  .dsec:last-child { padding-bottom: 88px; }
  .crow { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .stats { gap: 22px; padding: 8px 0; }
  .stat { gap: 6px; }
  .stat__v { font-size: 26px; }
  .action { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .action:hover { padding-left: 0; }
  .action h3 { font-size: 23px; }
  .action p { font-size: 17px; }
  .action .btn { justify-self: start; }
  .crow__k { font-size: 17px; }
  .crow__v { font-size: 19px; }
  .pass { grid-template-columns: 1fr 1fr; row-gap: 20px; column-gap: 12px; }
  .pass li { font-size: 19px; }
  .tickets { grid-template-columns: 1fr; }
  .mediacard { height: 440px; border-radius: 28px; }
  .readmore { grid-template-columns: 1fr; }
  .sheet__box { padding: 36px 20px; border-radius: 24px; }
  .ctable-grid { grid-template-columns: 96px repeat(var(--n, 3), minmax(0, 1fr)); }
  .ctable-grid > div { padding: 14px 6px; font-size: 15px; }
  .explore__l { padding: 40px 24px; }
  .explore__l h2 { font-size: 30px; }
  .xpill { font-size: 17px; height: 52px; }
  .explore__r { min-height: 400px; padding: 20px; }
  .xpanel { inset: 20px; --u: 1.1px; }
  .notif .acard { padding: 14px 16px; gap: 12px; }
  .notif .acard i { width: 36px; height: 36px; font-size: 16px; }
  .notif .acard b { font-size: 17px; }
  .notif .acard span { font-size: 15px; }
  .bubble { font-size: 16px; padding: 12px 15px; }
  .ihero__cta { flex-direction: column; align-items: stretch; }
  .ihero__cta .btn { min-height: 58px; font-size: 18px; }
  .ihero__art { height: 440px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
  .ihero__art .vslot { bottom: auto; top: 40px; }
  .explore__l { gap: 28px; }
  .ihero__art .win { width: 560px; right: -200px; }
  .ihero__art .phone { --w: 210px; }
  .dash { grid-template-columns: 1fr; }
  .dash__side { display: none; }
  .themer { left: 12px; bottom: 12px; font-size: 14px; }
  .themer__label { display: none; }
  .themer__btn { height: 36px; min-width: 34px; padding: 0 9px; }
  .chatbtn { right: 14px; bottom: 14px; width: 58px; height: 58px; }
  .chatbtn svg { width: 28px; height: 28px; }
  .tray { left: 12px; right: 12px; transform: translateY(160%); }
  .tray.on { transform: none; }
  .bcard { padding: 26px; }
  .bcard h3 { font-size: 26px; }
  .credit__h h3 { font-size: 26px; }
  .doc-hero__main { gap: 36px; }
  .doc-hero__media { aspect-ratio: 4 / 5; border-radius: 28px; }
  .hero-tile { padding-top: 36px; }
  .hero-tile .phone { --w: 260px; }
  .auth__box h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js .tile, .tile [data-rise], .js .bt, .js .xpill, .icons-grid span, .cascade .ecard__img { opacity: 1 !important; transform: none !important; }
  .hero__title .line > span, .hero__stage { transform: none !important; }
  .hero__sub, .hero__cta { opacity: 1 !important; }
  .tiltrow__track { animation: none !important; }
  .hero__half, .hero__coin img, .hp { animation: none !important; opacity: 1 !important; }
}

/* 국가 정책표 안내 (T-010) */
.geo-block{position:sticky;top:0;z-index:200;display:flex;flex-wrap:wrap;gap:6px 10px;padding:12px 16px;background:#1f2430;color:#fff;font-size:14px;line-height:1.5}
.geo-block b{font-weight:700}.geo-block span{opacity:.85}

/* 분석 쿠키 동의 (T-004) */
.ck-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:300;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:720px;margin:0 auto;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.15);font-size:14px}.ck-bar span{flex:1 1 260px}