/* SMART landing, the livelier layer on top of platform.css (landing only, so sign-up, terms and privacy stay as they
   are): the first screen takes the colour of the kind of business shown, the product window tilts in depth and follows
   the pointer, the cards float at their own depths, the messages type, the numbers count, and small text reads larger. */

/* the kind's colour is a real colour property, so the whole first screen fades from one kind to the next */
@property --tc { syntax: "<color>"; inherits: true; initial-value: #1E6FD9; }
.home .hero { --tc: #1E6FD9; transition: --tc .9s var(--ease); }
.home .hero:has(#stage[data-s=lab]) { --tc: #C62828; }
.home .hero:has(#stage[data-s=beauty]) { --tc: #C2185B; }
.home .hero:has(#stage[data-s=clinic]) { --tc: #00897B; }
.home .hero:has(#stage[data-s=physio]) { --tc: #E65100; }
.hero-stage[data-s=physio], .scene[data-s=physio] { --tc: #E65100; }
.home .hero::before {
  background: radial-gradient(640px 460px at 18% 34%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 70%),
    radial-gradient(520px 380px at 85% 8%, rgba(255, 142, 3, .24), transparent 70%),
    radial-gradient(520px 320px at 62% 96%, color-mix(in srgb, var(--tc) 14%, transparent), transparent 70%); }
.home .hero::after { background-image: linear-gradient(color-mix(in srgb, var(--tc) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--tc) 9%, transparent) 1px, transparent 1px); }
.home .hl { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 85%, #000), var(--tc) 55%, var(--accent)); -webkit-background-clip: text; background-clip: text; }
.home .eyebrow .pulse { background: var(--tc); }
.home .eyebrow .pulse::after { border-color: var(--tc); }
.home .f-kpi svg.spark path:last-child { stroke: var(--tc); }
.home .f-kpi svg.spark stop { stop-color: var(--tc); }
.home .f-kpi .up { color: color-mix(in srgb, var(--tc) 80%, #000); background: color-mix(in srgb, var(--tc) 10%, #fff); }

/* a bigger headline and easier small text */
.home .hero h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.12; letter-spacing: -.015em; }
.home .lead { font-size: 18px; color: #3E4E56; }
.home .hero-proof { font-size: 15px; color: #3E4E56; }
.home { font-size: 16px; }
.home .sec-head p { color: #3E4E56; }
.home .scene .plan-tbl .pill.wait { color: #7A4F00; }
.home .scene .plan-tbl .pill.ok { color: #12663F; }
.home .f-kpi .up, .home .f-tag small, .home .f-appt small { font-size: 12.5px; }

/* the product window stands in depth and follows the pointer a little; the cards float at their own depths */
.home .hero-stage { perspective: 1600px; --rx: 3deg; --ry: 9deg; --mx: 0; --my: 0; }
.home .win { transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-origin: 50% 50%; transition: transform .6s var(--ease), box-shadow .6s; will-change: transform;
  box-shadow: 0 50px 90px -40px color-mix(in srgb, var(--tc) 55%, rgba(11, 27, 43, .5)), 0 0 0 1px rgba(11, 27, 43, .05); }
.home .float { translate: calc(var(--mx) * var(--depth, 14px)) calc(var(--my) * var(--depth, 14px)); transition: translate .5s var(--ease); }
.home .f-kpi { --depth: 26px; }
.home .f-wa { --depth: 34px; }
.home .f-tag { --depth: 20px; }
.home .f-appt { --depth: 30px; }
@keyframes bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }

/* the new card: the visit confirmed, with a ring that draws itself */
.f-appt { inset-inline-start: -44px; top: 42%; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 14px; min-width: 240px; animation-delay: 1.2s, 3.2s; }
.f-appt .ok { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--tc) 14%, #fff); color: var(--tc); }
.f-appt .ok svg { width: 22px; height: 22px; stroke-width: 2.6; stroke-dasharray: 24; stroke-dashoffset: 0; }
.f-appt small { color: var(--muted); display: block; }
.f-appt b { font-size: 14px; }
.hero-stage.swap .f-appt .ok svg { animation: tick .7s var(--ease) .35s both; }
@keyframes tick { from { stroke-dashoffset: 24; } }

/* physiotherapy: the course of sessions and the pain coming down */
.pt-course { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 14px 0 12px; }
.pt-course span { height: 12px; border-radius: 4px; background: #EDF1F0; }
.pt-course .u { background: var(--tc); }
.pt-course .b { background: color-mix(in srgb, var(--tc) 30%, #fff); box-shadow: inset 0 0 0 1.5px var(--tc); }
.pt-pain small { color: var(--muted); font-size: 12px; }
.pt-bars { display: flex; align-items: flex-end; gap: 10px; height: 92px; margin: 6px 0 12px; }
.pt-bars span { flex: 1; height: calc(var(--v) * 10%); border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--tc) calc(30% + var(--v) * 7%), #fff); display: flex; justify-content: center; }
.pt-bars b { font-size: 12px; color: #fff; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* the scene that comes in fills in piece by piece */
.home .scene.on .mini-arch .t, .home .scene.on tbody tr, .home .scene.on .wallet span, .home .scene.on .q-list li, .home .scene.on .pt-course span, .home .scene.on .pt-bars span, .home .scene.on .kv > div {
  animation: pop .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
.home .scene.on .pt-bars span { animation-name: grow; transform-origin: bottom; }
@keyframes grow { from { transform: scaleY(0); } }
.home .f-kpi svg.spark path:last-child { stroke-dasharray: 600; }
.hero-stage.swap .f-kpi svg.spark path:last-child { animation: draw 1.2s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 600; } }

/* the reply in the message comes after a moment of typing */
.f-wa .typing { margin-top: 2px; }
.f-wa .bubble.wait { display: none; }
.f-wa .bubble.came { animation: pop .35s var(--ease) both; }

/* buttons and cards answer the pointer */
.home .btn-primary { transition: background-color .2s, transform .2s var(--ease); }
.home .btn-primary:hover { transform: translateY(-2px); }
.home .type-card { transition: background-color .25s, transform .3s var(--ease); }
.home .type-card:hover { transform: translateY(-4px); }

@media (max-width: 1080px) {
  .home .hero-stage { --rx: 2deg; --ry: 5deg; }
}
@media (max-width: 860px) {
  .f-appt { display: none; }
  .home .win { transform: none; }
  .home .float { translate: none; }
}
@media (max-width: 640px) {
  .home .hero h1 { font-size: clamp(32px, 9.4vw, 42px); }
  .home .lead { font-size: 16.5px; }
  .home .hero-proof { font-size: 14px; }
  .pt-bars { height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .home .hero { transition: none; }
  .home .win, .home .float { transition: none; transform: none; translate: none; }
  .home .scene.on .mini-arch .t, .home .scene.on tbody tr, .home .scene.on .wallet span, .home .scene.on .q-list li, .home .scene.on .pt-course span, .home .scene.on .pt-bars span, .home .scene.on .kv > div { animation: none; }
  .hero-stage.swap .f-appt .ok svg, .hero-stage.swap .f-kpi svg.spark path:last-child { animation: none; }
  .f-wa .bubble.wait { display: block; }
}

/* five kinds on the first screen: tighter tabs so they stay clear of the income card */
@media (min-width: 861px) {
  .home .hero-tabs { gap: 4px; margin-inline-end: 64px; }
  .home .ht { padding: 0 11px; font-size: 13.5px; }
  .home .f-kpi { inset-inline-end: -72px; top: -86px; }
  .home .f-appt { inset-inline-start: 0; top: -80px; }
}

/* the clinic-address box in the footer shrinks with the screen (a long platform address used to push the page wider) */
.home .foot-in > div { min-width: 0; }
.home .goto { max-width: 100%; }
.home .goto > span { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 42px; }
.home .goto input { flex: 1 1 80px; width: 80px; }

/* the closing band keeps its decorative shapes inside it (they pushed the phone page wider) */
.home .cta-band { overflow: hidden; }

/* ---------- the twelve kinds: a list beside one large panel that moves through them (no icons) ---------- */
@property --tx { syntax: "<color>"; inherits: true; initial-value: #1E6FD9; }
.home #typesGrid.tx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: stretch; --tx: var(--tc, #1E6FD9); transition: --tx .7s var(--ease); }
.tx-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.tx-tab { position: relative; overflow: hidden; text-align: start; border: 0; background: #fff; border-radius: 14px; padding: 16px 18px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s, box-shadow .3s, transform .25s var(--ease); }
.tx-tab b { font-size: 17px; font-weight: 600; color: var(--ink); transition: color .3s; }
.tx-tab::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--tc); transform: scaleY(0); transition: transform .35s var(--ease); }
.tx-tab:hover { transform: translateX(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 40%, var(--line)); }
.tx-tab[aria-pressed="true"] { background: color-mix(in srgb, var(--tc) 9%, #fff); box-shadow: inset 0 0 0 1.5px var(--tc); }
.tx-tab[aria-pressed="true"] b { color: color-mix(in srgb, var(--tc) 85%, #000); }
.tx-tab[aria-pressed="true"]::before { transform: scaleY(1); }
.tx-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--tc); transform: scaleX(0); transform-origin: right; }
.tx:not(.manual):not(.hold) .tx-tab[aria-pressed="true"] .tx-bar { animation: txfill 4.6s linear forwards; }
@keyframes txfill { to { transform: scaleX(1); } }

.tx-stage { position: relative; min-height: 460px; border-radius: 24px; overflow: hidden; color: #fff; background: var(--tx); isolation: isolate; }
.tx-stage::before { content: ""; position: absolute; inset: auto -12% -40% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .10); z-index: -1; animation: drift 14s ease-in-out infinite alternate; }
.tx-stage::after { content: ""; position: absolute; inset: -30% auto auto -15%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: rgba(11, 27, 43, .12); z-index: -1; animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { translate: 40px -30px; scale: 1.08; } }
.tx-p { position: absolute; inset: 0; padding: 40px 44px; display: none; flex-direction: column; gap: 18px; }
.tx-p.on { display: flex; }
.tx-p.on .tx-n { animation: txpop .4s var(--ease) both; }
.tx-n { font-size: 14px; font-weight: 600; opacity: .8; letter-spacing: .04em; }
.tx-p h3 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.1; font-weight: 700; }
.tx-f { display: grid; gap: 10px; margin-top: 6px; }
.tx-f li { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 500; }
.tx-f li::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .85); flex: none; }
.tx-sp { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tx-sp span { background: rgba(255, 255, 255, .16); padding: 6px 14px; border-radius: 999px; font-size: 15px; }
.tx-go { align-self: flex-start; background: #fff; color: color-mix(in srgb, var(--tc) 80%, #000); font-weight: 600; padding: 12px 22px; border-radius: 999px; transition: transform .2s var(--ease), background-color .2s; }
.tx-go:hover { transform: translateX(-4px); background: #F4F7F6; }
/* the panel that comes in builds up line by line */
.tx-p.on h3 { animation: txin .55s var(--ease) both; }
.tx-p.on .tx-f li { animation: txin .5s var(--ease) both; animation-delay: calc(.12s + var(--j) * .09s); }
.tx-p.on .tx-sp span { animation: txpop .4s var(--ease) both; animation-delay: calc(.45s + var(--j) * .06s); }
.tx-p.on .tx-go { animation: txin .5s var(--ease) .6s both; }
@keyframes txin { from { opacity: 0; transform: translateX(-28px); } }
@keyframes txpop { from { opacity: 0; transform: scale(.85); } }

@media (max-width: 860px) {
  .home #typesGrid.tx { grid-template-columns: 1fr; }
  .tx-stage { order: -1; min-height: 420px; }
  .tx-p { padding: 28px 24px; }
  .tx-f li { font-size: 17px; }
}
@media (max-width: 480px) {
  .tx-tab { padding: 13px 14px; }
  .tx-tab b { font-size: 15px; }
  .tx-stage { min-height: 440px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .home #typesGrid.tx, .tx-tab, .tx-tab::before, .tx-p { transition: none; }
  .tx-stage::before, .tx-stage::after, .tx-p.on h3, .tx-p.on .tx-f li, .tx-p.on .tx-sp span, .tx-p.on .tx-go { animation: none; }
}

/* no decorative icons: section labels, card titles, the floating tag card and the movements list read as words */
.home .kicker svg, .home .mcard h3 > svg, .home .tile h3 > svg, .home .exp-list li > i, .home .f-tag .tt, .home .f-appt .ok, .home .wf-tabs [role=tab] > svg { display: none; }
.home .f-tag, .home .f-appt { padding-inline-start: 18px; }
.home .tile h3 > i, .home .tn-ico { display: none; }
.home .exp-list li { grid-template-columns: 1fr auto; }

/* black and amber: the headline and the first screen's light stay SMART's own; each kind's colour lives in the window */
.home .hl { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
.home .hero::before { background: radial-gradient(640px 460px at 18% 34%, color-mix(in srgb, var(--tc) 16%, transparent), transparent 70%),
  radial-gradient(560px 400px at 85% 8%, rgba(255, 142, 3, .30), transparent 70%), radial-gradient(520px 320px at 62% 96%, rgba(255, 142, 3, .14), transparent 70%); }
.home .hero::after { background-image: linear-gradient(rgba(20, 22, 26, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 22, 26, .05) 1px, transparent 1px); }
.home .bars span { background: var(--warm); }
.home .bars span.e { background: rgba(255, 255, 255, .18); }
.home .money .key i:not(.e) { background: var(--warm); }