/* Better Instinct: the Better Design app's own light tokens (packages/web/src/app/globals.css),
   its type (Sunghyun Sans), its pill controls and its card radii. */
@font-face { font-family: "Sunghyun Sans"; src: url("/fonts/SunghyunSans-Regular-core.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sunghyun Sans"; src: url("/fonts/SunghyunSans-Medium-core.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Sunghyun Sans"; src: url("/fonts/SunghyunSans-SemiBold-core.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --background: oklch(0.957 0.008 85);
  --foreground: oklch(0.31 0.006 75);
  --card: oklch(1 0 0);
  --primary: oklch(0.235 0.004 75);
  --primary-foreground: oklch(0.985 0.003 90);
  --secondary: oklch(0.93 0.012 86);
  --muted: oklch(0.94 0.009 86);
  --muted-foreground: oklch(0.51 0.009 80);
  --accent: oklch(0.915 0.013 86);
  --destructive: oklch(0.55 0.2 30);
  --border: oklch(0.895 0.01 85);
  --input: oklch(0.99 0.003 88);
  --ring: oklch(0.46 0.17 248);
  --blue: oklch(0.64 0.17 248);
  --blue-surface: oklch(0.93 0.045 248);
  --blue-ink: oklch(0.46 0.17 248);
  --green-surface: oklch(0.94 0.05 150);
  --green-ink: oklch(0.4 0.12 150);
  --red-ink: oklch(0.47 0.17 32);
  --red: oklch(0.63 0.235 32);
  --green: oklch(0.74 0.2 150);
  --font-sans: "Sunghyun Sans", "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 72rem;
  --radius-card: 1.5rem;
  --radius-panel: 2rem;
  --shadow-lg: 0 0 0 0.0625rem oklch(0.3 0.01 75 / 0.035), 0 0.5rem 1.5rem -0.875rem oklch(0.3 0.01 75 / 0.08), 0 1.75rem 4rem -1.75rem oklch(0.3 0.01 75 / 0.13);
  --shadow-card: 0 0.0625rem 0.125rem oklch(0.2 0.01 75 / 0.05), 0 0.5rem 1.5rem oklch(0.2 0.01 75 / 0.06);
  --inset: 1.5rem;
  --layout-density: comfortable;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; color: var(--primary); }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 0.125rem solid var(--ring); outline-offset: 0.1875rem; }
.icon { width: 1.125rem; height: 1.125rem; flex: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--inset); }
.container.narrow { max-width: 52rem; }

/* Buttons: the app's pill controls, flat, with the near-black primary. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 999rem; font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 150ms ease, transform 150ms ease; }
.btn:active { transform: scale(0.97); }
.btn-lg { min-height: 3rem; padding: 0 1.5rem; font-size: 0.9375rem; }
.btn-sm { min-height: 2.75rem; padding: 0 1.125rem; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn:disabled { opacity: 0.5; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: color-mix(in oklab, var(--primary) 88%, var(--background)); }
  .btn-ghost:hover { background: var(--secondary); }
}

/* Header: the mark, with the name and a small Better Design credit stacked beside it. */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--background) 86%, transparent); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); border-bottom: 0.0625rem solid color-mix(in oklab, var(--border) 70%, transparent); }
.header-row { display: flex; align-items: center; gap: 2rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; min-height: 2.75rem; }
.brand-mark { width: 2rem; height: 2rem; border-radius: 0.5625rem; }
.brand-text { display: flex; flex-direction: column; gap: 0.125rem; }
.brand-name { font-size: 1.0625rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--primary); }
.brand-by { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; line-height: 1; color: var(--muted-foreground); }
.brand-by img { width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; }
.header-nav { display: flex; gap: 0.25rem; margin-left: auto; }
.header-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 999rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; color: var(--foreground); }
@media (hover: hover) and (pointer: fine) { .header-nav a:hover { background: var(--secondary); } }

/* Headings: the weights, sizes and tracking better-design.com renders. */
main { display: flex; flex-direction: column; gap: 2rem; }
.hero { padding: 5rem 0 4rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; container-type: inline-size; }
/* The longer line needs about ten times the font size, so the size follows the column and each sentence keeps one line. */
.hero-title { font-size: clamp(2.5rem, 9.6cqi, 5.25rem); font-weight: 600; line-height: 0.96; letter-spacing: -0.055em; }
.hero-title .line { display: block; white-space: nowrap; }
.hero-lead { max-width: 32rem; font-size: 1.125rem; line-height: 1.75; color: var(--muted-foreground); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hero-note { font-size: 0.875rem; color: var(--muted-foreground); }

/* Hero picture: a real photo, with two cards of what we run for that person. */
.hero-visual { position: relative; margin: 0; padding: 0 0 2rem 2rem; }
.hero-photo { border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.float { position: absolute; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 1rem; background: var(--card); box-shadow: var(--shadow-lg); font-size: 0.8125rem; }
.float p { display: flex; flex-direction: column; gap: 0.125rem; }
.float b { font-weight: 600; color: var(--primary); }
.float span { color: var(--muted-foreground); }
.float-search { left: 0; bottom: 0; width: 16rem; flex-direction: column; align-items: stretch; gap: 0.625rem; }
.float-query { flex-direction: row !important; align-items: center; gap: 0.5rem !important; padding: 0.5rem 0.75rem; border-radius: 999rem; background: var(--muted); }
.float-query .icon { width: 0.875rem; height: 0.875rem; color: var(--muted-foreground); }
.float-query span { color: var(--foreground); }
.float-result { padding: 0 0.75rem; }
.float-result b { color: var(--blue-ink); }

/* Sections */
.section { padding: 4rem 0; }
.section-title { font-size: 2.25rem; font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; }
@media (min-width: 40rem) { .section-title { font-size: 3rem; } }
@media (min-width: 48rem) { .section-title { font-size: 3.75rem; } }
.section-title.center { text-align: center; }
.section .section-title + * { margin-top: 3rem; }

.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }

/* Trades: real people at work, each with its trade's icon. */
.trades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.trade { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); }
.trade img { width: 100%; height: 100%; object-fit: cover; }
.trade p { position: absolute; left: 0.75rem; bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem 0.375rem 0.375rem; border-radius: 999rem; background: var(--card); box-shadow: var(--shadow-card); font-size: 0.875rem; white-space: nowrap; }
.trade b { font-weight: 600; color: var(--primary); }
.trade-icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--muted); color: var(--primary); }
.trade-icon .icon { width: 1rem; height: 1rem; }
.trade-cta { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: var(--primary); }
.trade-cta p { position: static; padding: 0; white-space: normal; background: none; box-shadow: none; font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--primary-foreground); }
.trade-cta .btn-primary { background: var(--primary-foreground); color: var(--primary); }

/* The worry table, as the comparison on better-design.com draws it. */
.compare { max-width: 64rem; margin-inline: auto; border-radius: var(--radius-panel); border: 0.0625rem solid color-mix(in oklab, var(--border) 60%, transparent); background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden; }
.compare-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; border-top: 0.0625rem solid color-mix(in oklab, var(--border) 60%, transparent); }
.compare-row > * { padding: 1rem 1.25rem; }
.compare-head { border-top: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; color: var(--primary); }
.compare-head > * { padding: 1.25rem; }
.compare-head .muted { color: var(--muted-foreground); }
.compare .q { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; letter-spacing: 0; }
.compare .q .icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.compare .no, .compare .yes { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; }
.compare .no { color: var(--red-ink); }
.compare .yes { color: var(--green-ink); }
.dot { display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: var(--primary-foreground); }
.dot .icon { width: 0.75rem; height: 0.75rem; }
.dot-no { background: var(--red); }
.dot-yes { background: var(--green); }
.cell-h { display: none; }

/* Steps and weekly cards */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.step { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; }
.step h3 { display: flex; align-items: center; gap: 0.75rem; }
.step-num { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--blue-surface); color: var(--blue-ink); font-size: 0.875rem; font-weight: 600; }
.step h3, .get h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
.step p, .get p { color: var(--muted-foreground); font-size: 0.9375rem; }

.gets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.get { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; }
.get-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--muted); color: var(--primary); }

/* Apply */
.apply-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.apply-copy { position: sticky; top: 7rem; display: flex; flex-direction: column; gap: 2rem; }
.apply-points { display: grid; gap: 1rem; }
.apply-points li { display: flex; gap: 0.75rem; font-size: 1rem; }
.apply-points .icon { margin-top: 0.1875rem; color: var(--green-ink); }
.apply-card { padding: 2rem; }
.apply-form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }
.label { font-size: 0.875rem; font-weight: 500; color: var(--primary); }
.input { width: 100%; min-height: 2.75rem; padding: 0 1rem; border: 0.0625rem solid var(--border); border-radius: 0.875rem; background: var(--input); color: var(--foreground); font: inherit; font-size: 1rem; transition: border-color 150ms ease, box-shadow 150ms ease; }
.input::placeholder { color: oklch(0.6 0.008 80); }
.input:focus { outline: 0; border-color: var(--ring); box-shadow: 0 0 0 0.1875rem color-mix(in oklab, var(--ring) 22%, transparent); }
.input[aria-invalid="true"] { border-color: var(--destructive); }
.select { appearance: none; padding-right: 3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 7l4.5 4.5L13.5 7' fill='none' stroke='%23736d66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.125rem; }
.field-error, .form-error { font-size: 0.875rem; color: var(--destructive); }
.form-note { font-size: 0.8125rem; color: var(--muted-foreground); }
.form-note a { color: var(--foreground); }
.apply-form .btn { justify-self: start; margin-top: 0.25rem; }
.apply-done { display: grid; gap: 0.75rem; }
.apply-done h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.apply-done p { color: var(--muted-foreground); }
.trap { position: absolute; left: -100rem; width: 0.0625rem; height: 0.0625rem; overflow: hidden; }

/* FAQ */
.faq { border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; }
.qa + .qa { border-top: 0.0625rem solid var(--border); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 1rem 1.5rem; list-style: none; cursor: pointer; font-weight: 500; color: var(--primary); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .icon { color: var(--muted-foreground); transition: transform 150ms ease; }
.qa[open] summary .icon { transform: rotate(180deg); }
.qa p { padding: 0 1.5rem 1.25rem; max-width: 42rem; color: var(--muted-foreground); }

/* Footer */
.site-footer { padding: 3rem 0; border-top: 0.0625rem solid var(--border); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.875rem; min-height: 2.75rem; text-decoration: none; }
.footer-brand img { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; }
.footer-brand > span { display: flex; flex-direction: column; gap: 0.125rem; }
.footer-brand b { font-weight: 600; color: var(--primary); }
.footer-brand > span > span { font-size: 0.875rem; color: var(--muted-foreground); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 999rem; font-size: 0.875rem; text-decoration: none; color: var(--foreground); }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { background: var(--secondary); } }

/* Tablet */
@media (max-width: 64rem) {
  .hero-grid, .apply-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .hero-visual { max-width: 40rem; }
  .apply-copy { position: static; }
  .gets, .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone */
@media (max-width: 40rem) {
  :root { --inset: 1.25rem; }
  .header-nav { display: none; }
  .header-row { justify-content: space-between; gap: 1rem; }
  .hero { padding: 3rem 0 2rem; }
  .hero-title { font-size: 3rem; }
  .hero-title .line { white-space: normal; }
  .hero-lead { font-size: 1.0625rem; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-visual { padding: 0 0 4.5rem; }
  .float-search { left: 0.75rem; right: 0.75rem; width: auto; }
  .section { padding: 3rem 0; }
  .trades { gap: 0.75rem; }
  .trade p { left: 0.5rem; bottom: 0.5rem; gap: 0.375rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; font-size: 0.8125rem; }
  .trade-icon { width: 1.5rem; height: 1.5rem; }
  .trade-icon .icon { width: 0.875rem; height: 0.875rem; }
  .trade-cta { padding: 1rem; }
  .trade-cta p { font-size: 1rem; }
  .compare-head { display: none; }
  .compare-row { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 1rem; }
  .compare-row > * { padding: 0; }
  .compare .q { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
  .cell-h { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--muted-foreground); }
  .compare .no, .compare .yes { font-size: 1rem; line-height: 1.5rem; }
  /* The column label sits above the value, so the dot drops to the value's line. */
  .compare .dot { margin-top: 1.125rem; }
  .steps, .gets { grid-template-columns: minmax(0, 1fr); }
  .apply-card { padding: 1.5rem; }
  .apply-form .btn { justify-self: stretch; width: 100%; }
  .footer-row { flex-direction: column; align-items: flex-start; }
}

.sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Phone demo */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 4rem; align-items: center; }
.demo-copy { display: flex; flex-direction: column; gap: 1.25rem; }
.demo-copy .section-title + * { margin-top: 0; }
.demo-lead { max-width: 30rem; font-size: 1.125rem; line-height: 1.75; color: var(--muted-foreground); }
.demo-note { font-size: 0.875rem; color: var(--muted-foreground); }

/* The phone is an iPhone at 390 by 844, drawn to scale. Inside it, type and colours follow the
   messaging app the visitor picked, not the page: system font, the app's bubble colours and its bar. */
.demo-phone { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.skin-switch { display: inline-flex; padding: 0.25rem; border-radius: 999rem; background: var(--muted); }
.skin-btn { min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 999rem; background: transparent; color: var(--muted-foreground); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.skin-btn[aria-pressed="true"] { background: var(--card); color: var(--primary); box-shadow: var(--shadow-card); }

.phone { --bezel: 0.625rem; width: min(100%, 22.5rem); aspect-ratio: 390 / 844; padding: var(--bezel); border-radius: 3.5rem; background: oklch(0.2 0.004 75); box-shadow: var(--shadow-lg); }
.phone-screen { --ink: #000; --sub: #8e8e93; --tint: #007aff; --bg: #fff; --bar: rgb(249 249 249 / 0.94); --in: #e9e9eb; --in-ink: #000; --out: #0b84fe; --out-ink: #fff; --bubble: 1.125rem;
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 2.875rem; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.01em; }
.phone[data-skin="whatsapp"] .phone-screen { --tint: #007aff; --bg: #efeae2; --bar: #f6f6f6; --in: #fff; --out: #d9fdd3; --out-ink: #111b21; --in-ink: #111b21; --bubble: 0.5rem; }

.phone-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 3.25rem; padding: 0.5rem 1.75rem 0; background: var(--bar); font-size: 0.9375rem; font-weight: 600; }
.phone-status svg { justify-self: end; width: 4.125rem; height: 0.75rem; }
.phone-island { width: 6.5rem; height: 1.75rem; border-radius: 999rem; background: #000; }

.phone-head { display: grid; align-items: center; gap: 0.125rem 0.5rem; padding: 0.25rem 0.75rem 0.5rem; background: var(--bar); border-bottom: 0.03125rem solid rgb(0 0 0 / 0.2); color: var(--tint); }
.head-back svg { display: block; width: 0.75rem; height: 1.25rem; }
.head-actions { display: flex; align-items: center; gap: 1.125rem; }
.head-actions svg { display: block; width: 1.625rem; height: 1.125rem; }
.head-call svg { width: 1.25rem; height: 1.25rem; }
.phone-avatar { display: grid; place-items: center; border-radius: 999rem; background: linear-gradient(#a5abb8, #858994); color: #fff; font-weight: 600; }
.head-name { display: flex; flex-direction: column; min-width: 0; color: var(--ink); line-height: 1.2; }
.head-name b { font-weight: 600; }
.head-sub { color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* iMessage: the avatar sits over the name, centred, with back on the left and video on the right. */
.phone[data-skin="imessage"] .phone-head { grid-template-columns: 2.5rem 1fr 2.5rem; grid-template-areas: "back avatar actions" "back name actions"; justify-items: center; }
.phone[data-skin="imessage"] .head-back { grid-area: back; justify-self: start; }
.phone[data-skin="imessage"] .phone-avatar { grid-area: avatar; width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }
.phone[data-skin="imessage"] .head-name { grid-area: name; align-items: center; text-align: center; }
.phone[data-skin="imessage"] .head-name b { font-size: 0.6875rem; font-weight: 400; }
.phone[data-skin="imessage"] .head-sub { font-size: 0.625rem; }
.phone[data-skin="imessage"] .head-actions { grid-area: actions; justify-self: end; }
.phone[data-skin="imessage"] .head-call { display: none; }
/* WhatsApp: back, avatar and name in one row on the left, video and call on the right. */
.phone[data-skin="whatsapp"] .phone-head { grid-template-columns: auto auto 1fr auto; padding-bottom: 0.625rem; }
.phone[data-skin="whatsapp"] .phone-avatar { width: 2.25rem; height: 2.25rem; font-size: 0.9375rem; background: #dfe5e7; color: #54656f; }
.phone[data-skin="whatsapp"] .head-name b { font-size: 1rem; }
.phone[data-skin="whatsapp"] .head-sub { font-size: 0.75rem; }

.phone-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.75rem 0.75rem; overscroll-behavior: contain; scrollbar-width: none; }
.thread-day { align-self: center; margin: 0.25rem 0 0.5rem; font-size: 0.6875rem; font-weight: 500; color: var(--sub); }
.phone[data-skin="whatsapp"] .thread-day span { display: block; padding: 0.25rem 0.625rem; border-radius: 0.5rem; background: #fff; color: #54656f; box-shadow: 0 0.0625rem 0.03125rem rgb(11 20 26 / 0.13); }
.msg { position: relative; max-width: 78%; margin-top: 0.375rem; }
.msg p { position: relative; padding: 0.4375rem 0.75rem; border-radius: var(--bubble); font-size: 1.0625rem; line-height: 1.29; overflow-wrap: anywhere; }
.msg-in { align-self: flex-start; }
.msg-in p { background: var(--in); color: var(--in-ink); }
.msg-out { align-self: flex-end; }
.msg-out p { background: var(--out); color: var(--out-ink); }
.msg-error p { color: #d70015; }
.msg-meta { display: none; }
/* iMessage tails: a curl at the bottom corner of each bubble. */
.phone[data-skin="imessage"] .msg p::before, .phone[data-skin="imessage"] .msg p::after { content: ""; position: absolute; bottom: 0; height: 1.125rem; }
.phone[data-skin="imessage"] .msg-in p::before { left: -0.4375rem; width: 1.25rem; background: var(--in); border-bottom-right-radius: 1rem; z-index: -1; }
.phone[data-skin="imessage"] .msg-in p::after { left: -0.625rem; width: 0.625rem; background: var(--bg); border-bottom-right-radius: 0.625rem; z-index: -1; }
.phone[data-skin="imessage"] .msg-out p::before { right: -0.4375rem; width: 1.25rem; background: var(--out); border-bottom-left-radius: 1rem; z-index: -1; }
.phone[data-skin="imessage"] .msg-out p::after { right: -0.625rem; width: 0.625rem; background: var(--bg); border-bottom-left-radius: 0.625rem; z-index: -1; }
.phone[data-skin="imessage"] .msg { z-index: 0; }
.msg-delivered { align-self: flex-end; margin: 0.125rem 0.125rem 0; font-size: 0.6875rem; font-weight: 500; color: var(--sub); }
.phone[data-skin="whatsapp"] .msg-delivered { display: none; }
/* WhatsApp: square-ish bubbles with a soft shadow, the time and ticks inside. */
.phone[data-skin="whatsapp"] .msg { max-width: 82%; }
.phone[data-skin="whatsapp"] .msg p { padding: 0.375rem 0.5625rem 0.4375rem; font-size: 1rem; line-height: 1.31; box-shadow: 0 0.0625rem 0.03125rem rgb(11 20 26 / 0.13); }
.phone[data-skin="whatsapp"] .msg-in p { border-top-left-radius: 0; }
.phone[data-skin="whatsapp"] .msg-out p { border-top-right-radius: 0; }
.phone[data-skin="whatsapp"] .msg-meta { display: inline-block; float: right; margin: 0.4375rem 0 -0.1875rem 0.75rem; font-size: 0.6875rem; line-height: 1; color: #667781; }
.phone[data-skin="whatsapp"] .msg-out .msg-meta::after { content: " ✓✓"; color: #53bdeb; letter-spacing: -0.2em; }

.msg-typing p { display: flex; align-items: center; gap: 0.25rem; padding: 0.75rem 0.875rem; }
.msg-typing i { width: 0.5rem; height: 0.5rem; border-radius: 999rem; background: #8e8e93; animation: typing 1.2s ease-in-out infinite; }
.msg-typing i:nth-child(2) { animation-delay: 0.2s; }
.msg-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }

/* A change card is a plain incoming bubble with a tick before its title. No coloured edge. */
.change { align-self: flex-start; max-width: 82%; margin-top: 0.375rem; padding: 0.5rem 0.75rem 0.5625rem; border-radius: var(--bubble); background: var(--in); }
.phone[data-skin="whatsapp"] .change { box-shadow: 0 0.0625rem 0.03125rem rgb(11 20 26 / 0.13); }
.change-title { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--in-ink); }
.change-title::before { content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 999rem; background: #34c759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.3 4.7-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.phone[data-skin="whatsapp"] .change-title::before { background-color: #1daa61; }
.change-detail { margin-top: 0.1875rem; font-size: 0.8125rem; line-height: 1.35; color: var(--sub); }
.phone[data-skin="whatsapp"] .change-detail { color: #667781; }

.phone-starters { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0 0.75rem 0.5rem; }
.phone-starters[hidden] { display: none; }
.starter { min-height: 2.75rem; padding: 0 0.875rem; border: 0.0625rem solid rgb(0 0 0 / 0.12); border-radius: 999rem; background: #fff; color: var(--tint); font: inherit; font-size: 0.875rem; cursor: pointer; }
.phone[data-skin="whatsapp"] .starter { color: #008069; }

.phone-form { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem 0.5rem; background: var(--bg); }
.phone[data-skin="whatsapp"] .phone-form { background: var(--bar); }
.form-plus { display: grid; place-items: center; flex: none; width: 2.125rem; height: 2.125rem; border-radius: 999rem; background: #e9e9eb; color: #7c7c80; }
.form-plus svg { width: 1.125rem; height: 1.125rem; }
.phone[data-skin="whatsapp"] .form-plus { background: transparent; color: var(--tint); }
.phone-input { flex: 1; min-width: 0; height: 2.25rem; padding: 0 0.875rem; border: 0.0625rem solid #c6c6c8; border-radius: 999rem; background: transparent; color: var(--ink); font: inherit; font-size: 1.0625rem; outline: none; }
.phone-input::placeholder { color: #c4c4c6; }
.phone[data-skin="whatsapp"] .phone-input { background: #fff; border-color: #dadada; }
.phone-input:focus-visible { border-color: var(--tint); }
.phone-send { position: relative; display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; margin: -0.25rem -0.375rem -0.25rem -0.25rem; border: 0; background: transparent; cursor: pointer; }
.phone-send::before { content: ""; position: absolute; inset: 0.3125rem; border-radius: 999rem; background: var(--out); }
.phone[data-skin="whatsapp"] .phone-send::before { background: #1daa61; }
.phone-send svg { position: relative; width: 1.125rem; height: 1.125rem; color: #fff; }
.phone[data-skin="imessage"] .send-plane, .phone[data-skin="whatsapp"] .send-up { display: none; }
.phone-send:disabled { opacity: 0.5; cursor: default; }
.phone-home { display: grid; place-items: start center; flex: none; height: 1.25rem; background: var(--bg); }
.phone-home::after { content: ""; width: 8.5rem; height: 0.3125rem; margin-top: 0.375rem; border-radius: 999rem; background: #000; }
.phone[data-skin="whatsapp"] .phone-home { background: var(--bar); }

@media (prefers-reduced-motion: reduce) { .msg-typing i { animation: none; opacity: 0.6; } }
@media (max-width: 56rem) { .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }