:root {
  --brand: #33285F;
  --head: #221A45;
  --dark: #18122F;
  --tint: #F3F1FA;
  --sun: #E2DDF3;
  --orbit: #ABA3CF;
  --ring: #E9E6F4;
  --accent: #FFC94A;
  --on-accent: #1E1838;
  --ink: #1C1830;
  --muted: #50496A;
  --body2: #474060;
  --nav: #443D5A;
  --page: #FFFDFB;
  --white: #FFFFFF;
  --line: #ECE8F2;
  --fine: #5E5775;
  --on-brand: #FFFFFF;
  --on-brand-2: #E2DCF5;
  --frame: #14101F;
  --spark: #E5A800;
  --hot-title: #FFC94A;
  --tag-text: #221A45;
  --success-bg: #DDF3E3;
  --success-ink: #146127;
  --pets: #43257C;
  --pets-head: #33186A;
  --pets-tint: #F4EFFF;
  --pets-sun: #DBCCFA;
  --pets-accent: #FFD330;
  --pets-on-accent: #21183A;
  --motors: #23517A;
  --motors-head: #16324A;
  --motors-tint: #EEF3F8;
  --motors-sun: #D3E1EE;
  --motors-accent: #FFB21A;
  --motors-on-accent: #1A0E04;
  --homes: #245C46;
  --homes-head: #173F30;
  --homes-tint: #EEF3EC;
  --homes-sun: #D5E5D9;
  --homes-accent: #E9A13B;
  --homes-on-accent: #14241C;
  --tone-lilac: #ECE5FB;
  --tone-butter: #FFF0B9;
  --tone-blush: #FCE6DC;
  --tone-amber: #FFF1D6;
  --tone-sky: #E0F0FB;
  --tone-mist: #E3ECF5;
  --tone-sage: #E2EEE5;
  --tone-brass: #FBEBD0;
}
@font-face { font-family: "DM Sans"; src: url("fonts/dmsans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Young Serif"; src: url("fonts/YoungSerif.woff") format("woff"); font-weight: 400; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.6 "DM Sans", -apple-system, BlinkMacSystemFont,
  "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
a { color: var(--brand); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
h1, h2, h3 { text-wrap: balance; font-family: "Fredoka", "DM Sans", sans-serif; font-weight: 700; color: var(--head); margin: 0; }
p, li { text-wrap: pretty; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--white); padding: 8px 12px; }

/* Top bar: wordmark, links, the Call Us pill centered in the open space, then the trial button. */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { min-height: 84px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand); white-space: nowrap; }
.brand img { width: 40px; height: 40px; border-radius: 11px; }
.links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 700; }
.links a { color: var(--nav); text-decoration: none; white-space: nowrap; }
.links a:hover { color: var(--brand); }
.callwrap { flex: 1; display: flex; justify-content: center; }
.call { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); background: var(--white);
  border: 2px solid var(--brand); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 700;
  text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.call svg { width: 15px; height: 15px; }
.call:hover { background: var(--brand); color: var(--on-brand); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; border-radius: 999px;
  padding: 15px 24px; font-weight: 700; font-size: 15px; text-decoration: none; text-wrap: balance;
  transition: transform .2s, box-shadow .2s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .14); }
.btn-try { background: var(--brand); color: var(--on-brand); font-size: 14px; padding: 14px 22px; white-space: nowrap; }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-ghost { background: var(--white); color: var(--brand); border: 2px solid var(--brand); }
.btn-light { background: transparent; color: var(--on-brand); border: 2px solid var(--on-brand); }
@media (max-width: 1060px) {
  .nav { flex-wrap: wrap; gap: 10px 16px; padding-top: 12px; min-height: 0; }
  .links { order: 3; width: 100%; overflow-x: auto; gap: 22px; padding: 2px 0 12px; }
  .callwrap { justify-content: flex-end; }
}
@media (max-width: 640px) { .btn-try { display: none; } .wrap { padding: 0 16px; } .call { font-size: 13px; padding: 7px 12px; }
  .call svg { display: none; } .brand img { width: 34px; height: 34px; } }

/* Hero: a soft tinted panel, the question on the left, real app screens on the right. */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--tint); border-radius: 28px; margin-top: 4px; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 500px; height: 500px; right: -120px; top: -240px;
  border: 1px solid var(--orbit); border-radius: 50%; box-shadow: 0 0 0 56px var(--ring), 0 0 0 112px var(--ring); opacity: .7; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 24px; min-height: 560px; padding: 0 56px; }
.intro { padding: 44px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brand); }
.eyebrow::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
h1 { font-size: clamp(44px, 5vw, 70px); line-height: .98; letter-spacing: -.035em; margin: 22px 0; }
.swoosh { position: relative; z-index: 0; white-space: nowrap; }
.swoosh::after { content: ""; position: absolute; z-index: -1; left: 2%; bottom: -2px; width: 97%; height: 12px;
  border-radius: 100%; background: var(--accent); transform: rotate(-2deg); }
.lede { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--muted); max-width: 540px; margin: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 28px 0 16px; }
.text-link { font-size: 15px; font-weight: 700; color: var(--brand); text-decoration: none;
  border-bottom: 2px solid var(--orbit); padding: 5px 0; }
.fine { font-size: 13.5px; color: var(--fine); margin: 0; max-width: 540px; }
.scene { position: relative; min-height: 600px; display: flex; align-items: center; justify-content: center; }
.sun { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--sun); }
.orbit { position: absolute; width: 530px; height: 530px; border-radius: 50%; border: 1px dashed var(--orbit); }
.spark { position: absolute; z-index: 3; width: 30px; height: 30px; color: var(--spark); }
.spark svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.spark.s1 { right: 7%; top: 9%; }
.spark.s2 { left: 5%; bottom: 20%; width: 20px; height: 20px; }
.spark.s3 { right: 20%; bottom: 5%; width: 15px; height: 15px; }
.devices { position: relative; z-index: 2; width: 440px; height: 500px; animation: float 7s ease-in-out infinite; }
.devices.solo { width: 250px; height: 520px; }
.ipad { position: absolute; left: 0; top: 34px; width: 300px; padding: 10px; background: var(--frame); border-radius: 28px;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .2); transform: rotate(-4deg); }
.ipad img { display: block; width: 100%; height: auto; border-radius: 18px; }
.phone { position: absolute; right: 4px; top: 62px; width: 196px; padding: 7px; background: var(--frame); border-radius: 36px;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .25); transform: rotate(4deg); }
.solo .phone { right: auto; left: 8px; top: 10px; width: 232px; padding: 8px; border-radius: 40px; transform: rotate(3deg); }
.phone img { display: block; width: 100%; height: auto; border-radius: 29px; }
.solo .phone img { border-radius: 32px; }
.phone::after { content: ""; position: absolute; top: 13px; left: 50%; width: 54px; height: 15px; margin-left: -27px;
  border-radius: 999px; background: #0B0F14; }
.bubble { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; max-width: 250px; background: var(--white);
  border-radius: 17px; padding: 11px 16px 11px 11px; box-shadow: 0 12px 35px rgba(0, 0, 0, .12); font-size: 12.5px; line-height: 1.3; }
.bubble strong { display: block; font-size: 14px; color: var(--head); }
.bubble small { display: block; font-size: 12px; color: var(--muted); }
.dot { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; }
.dot svg { width: 18px; height: 18px; }
.dot.check { background: #DDF3E3; color: #146127; }
.dot.alert { background: #FDE6DA; color: #A23B1E; }
.dot.clock { background: #FFF1D6; color: #8A4B00; }
.b1 { left: -3%; top: 9%; transform: rotate(-5deg); }
.b2 { right: -4%; bottom: 9%; transform: rotate(4deg); }
.b3 { left: -1%; bottom: 19%; transform: rotate(-2deg); }

/* The ribbon: one continuous band in the brand accent, edge to edge, the items rolling across in a line. */
.ribbon { overflow: hidden; background: var(--accent); border-top: 2px solid var(--dark); border-bottom: 2px solid var(--dark);
  margin: 56px 0 0; }
.ribbon-track { display: flex; align-items: center; width: max-content; padding: 13px 0; font: 600 16px/1.2 "Fredoka", sans-serif;
  color: var(--on-accent); animation: slide 46s linear infinite; }
.ribbon-track span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 0 20px; }
.ribbon-track svg { width: 24px; height: 24px; }

/* Sections. */
/* Mario 2026-11-10: big padding back by a third; the ribbon to the first section by half. */
.section { padding: 70px 0 0; }
.ribbon + .wrap > .section:first-child { padding-top: 52px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 30px; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; max-width: 680px; margin: 0 auto 40px; gap: 0; }
h2.big { font-size: clamp(38px, 4.3vw, 60px); line-height: 1.02; letter-spacing: -.03em; margin: 14px 0 0; }
.section-sub { max-width: 390px; color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0; }
.center .section-sub { max-width: 600px; margin-top: 14px; }
.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rel-card { display: flex; flex-direction: column; min-height: 250px; border-radius: 21px; padding: 25px; transition: transform .25s; }
.rel-card:hover { transform: translateY(-6px); }
.tone-lilac { background: var(--tone-lilac); }
.tone-butter { background: var(--tone-butter); }
.tone-blush { background: var(--tone-blush); }
.tone-amber { background: var(--tone-amber); }
.tone-sky { background: var(--tone-sky); }
.tone-mist { background: var(--tone-mist); }
.tone-sage { background: var(--tone-sage); }
.tone-brass { background: var(--tone-brass); }
.rel-card h3 { font-size: 19px; line-height: 1.25; }
.rel-card p { margin: auto 0 0; padding-top: 18px; font-size: 14px; line-height: 1.55; color: var(--body2); }
.tag { align-self: flex-start; margin-top: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tag-text); background: var(--white); border-radius: 99px; padding: 5px 10px; }
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feat { border: 1px solid var(--line); border-radius: 23px; padding: 30px; background: var(--white); transition: box-shadow .25s, transform .25s; }
.feat:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, .08); transform: translateY(-4px); }
.num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: var(--on-brand);
  font: 700 15px/1 "Fredoka", sans-serif; }
.feat h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.01em; margin: 18px 0 10px; }
.feat ul { margin: 0; padding: 0; list-style: none; }
.feat li { position: relative; padding: 7px 0 7px 26px; font-size: 14.5px; line-height: 1.5; color: var(--body2); border-bottom: 1px dashed var(--line); }
.feat li:last-child { border: 0; }
.feat li::before { content: "\2726"; position: absolute; left: 2px; top: 9px; color: var(--spark); font-size: 11px; }

/* Purple-style bands in the brand color: the cost question, and the closing invitation. */
.band { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 28px; background: var(--brand); color: var(--on-brand); border-radius: 26px; padding: 44px 5%; }
.band::after { content: ""; position: absolute; z-index: -1; width: 360px; height: 360px; right: -110px; top: -170px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 0 0 46px rgba(255, 255, 255, .05); }
.band h2 { color: var(--on-brand); font-size: clamp(34px, 4vw, 54px); line-height: 1.02; letter-spacing: -.03em; margin: 12px 0; }
.band p { margin: 0; color: var(--on-brand-2); line-height: 1.6; max-width: 760px; font-size: 17px; }
.band .eyebrow { color: var(--on-brand-2); font-size: 12px; }
.band .copy { flex: 1 1 520px; }
.band a:not(.btn) { color: var(--on-brand); }
.band .row { display: flex; flex-wrap: wrap; gap: 12px; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.store { border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; }
.call-line { margin-top: 14px !important; }

/* Pricing. */
.trial-banner { display: flex; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto 30px; background: var(--success-bg);
  color: var(--success-ink); font-weight: 700; font-size: 14px; text-align: center; border-radius: 99px; padding: 12px 22px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; border-radius: 24px; padding: 34px 30px; background: var(--tint); border: 1px solid var(--line); }
.plan.hot { background: var(--brand); color: var(--on-brand); border-color: var(--brand); box-shadow: 0 24px 60px rgba(0, 0, 0, .18); }
.plan h3 { font-size: 24px; color: var(--brand); }
.plan.hot h3 { color: var(--hot-title); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin: 20px 0 8px; color: var(--muted); }
.price strong { font: 700 52px/1 "Fredoka", sans-serif; color: var(--head); letter-spacing: -.02em; }
.price s { font-size: 19px; color: var(--fine); }
.plan.hot .price, .plan.hot .price s { color: var(--on-brand-2); }
.plan.hot .price strong { color: var(--on-brand); }
.plan .note { margin: 0 0 24px; font-size: 14.5px; line-height: 1.55; color: var(--body2); }
.plan.hot .note { color: var(--on-brand-2); }
.plan .btn { margin-top: auto; }
.trifecta { margin-top: 20px; display: grid; grid-template-columns: 1.25fr 2fr auto; gap: 24px; align-items: center;
  border: 1px solid var(--line); background: var(--white); border-radius: 24px; padding: 28px 30px; }
.trifecta h3 { font-size: 22px; }
.trifecta p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.tri-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--body2); }
.tri-prices strong { display: block; font: 700 28px/1.1 "Fredoka", sans-serif; color: var(--head); }
.tri-prices span, .tri-prices s { display: block; }
.tri-prices s { font-size: 13px; color: var(--fine); }

/* Questions: native details/summary, as on petstrak.com. */
.faq-list { max-width: 820px; margin: 0 auto; }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 22px 4px; font: 600 19px/1.35 "Fredoka", "DM Sans", sans-serif; color: var(--head); text-wrap: balance; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--tint); color: var(--brand); font: 700 20px/1 "DM Sans", sans-serif; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
details p { margin: 0; padding: 0 4px 24px; color: var(--body2); line-height: 1.65; max-width: 680px; }

footer { border-top: 1px solid var(--line); margin-top: 104px; }
footer .in { max-width: 1240px; margin: 0 auto; padding: 40px 32px 48px; font-size: 13.5px; color: var(--fine); }
footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 14px; }
footer ul { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; }
footer ul a { color: var(--nav); text-decoration: none; }
footer ul a:hover { text-decoration: underline; }
footer p { margin: 6px 0; }
.tagline { font-size: 13px; color: var(--muted); }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes slide { to { transform: translateX(-50%); } }

.wordmark { font-family: "Young Serif", Georgia, "Times New Roman", serif; font-size: 25px; color: var(--head);
  white-space: nowrap; letter-spacing: -.01em; }
.wordmark b { font-weight: 400; color: var(--brand); }
.wordmark sup { font-family: "DM Sans", sans-serif; font-size: .42em; margin-left: 2px; }
.dots { display: inline-flex; gap: 5px; }
.dots i { display: block; width: 12px; height: 12px; border-radius: 50%; }
.d-pets { background: var(--pets); } .d-motors { background: var(--motors); } .d-homes { background: var(--homes); }

/* Each app's colors; inside an app block the shared classes (eyebrow, num, buttons) pick them up. */
.pets { --app: var(--pets); --app-head: var(--pets-head); --app-tint: var(--pets-tint); --app-sun: var(--pets-sun);
  --app-accent: var(--pets-accent); --app-on-accent: var(--pets-on-accent); }
.motors { --app: var(--motors); --app-head: var(--motors-head); --app-tint: var(--motors-tint); --app-sun: var(--motors-sun);
  --app-accent: var(--motors-accent); --app-on-accent: var(--motors-on-accent); }
.homes { --app: var(--homes); --app-head: var(--homes-head); --app-tint: var(--homes-tint); --app-sun: var(--homes-sun);
  --app-accent: var(--homes-accent); --app-on-accent: var(--homes-on-accent); }

/* The kinds line sits over the top of the app name (Mario 2026-11-10: "over the top, not under"). */
.over { display: inline-flex; flex-direction: column; align-items: flex-start; vertical-align: bottom; line-height: 1.1; }
.over.c { align-items: center; }
.over small { font: 700 10.5px/1.3 "DM Sans", sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; margin-bottom: 3px; }
.eyebrow.trio { align-items: flex-end; gap: 10px; }
.eyebrow.trio .over small { font-size: 9.5px; letter-spacing: .05em; color: var(--muted); margin-bottom: 1px; }
.tagline-hero { font: 600 22px/1.2 "Fredoka", sans-serif; color: var(--brand); margin: 0 0 10px; }

/* Hero: three phones, one per app, fanned together. Only this group floats. */
.devices.trio-devices { width: 470px; height: 520px; }
.trio-devices .phone { top: 70px; width: 176px; }
.trio-devices .p-motors { left: 0; right: auto; transform: rotate(-7deg); }
.trio-devices .p-homes { right: 0; transform: rotate(7deg); }
.trio-devices .p-pets { left: 50%; right: auto; top: 8px; width: 204px; margin-left: -102px; transform: none; z-index: 2; }
.hero .b1 { left: -4%; top: 6%; }
.hero .b2 { right: -3%; bottom: 7%; }
.hero .b3 { left: 3%; bottom: 24%; }  /* covers the old "Add A Machine" button on the Motors screen */

/* Three apps at a glance. */
.apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.app-card { display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--line);
  border-top: 6px solid var(--app); border-radius: 24px; padding: 28px; }
.app-card img { width: 64px; height: 64px; border-radius: 16px; }
.app-card h3 { font-size: 28px; line-height: 1.1; color: var(--app-head); }
.app-card p { margin: 0; color: var(--body2); font-size: 15px; }
.app-card .app-tag, .app .app-tag { font: 600 19px/1.3 "Fredoka", sans-serif; color: var(--app); }
.app-card .row { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.btn-app { background: var(--app); color: #FFFFFF; padding: 13px 20px; font-size: 14px; }

/* A Day In Your Life. */
.day-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.day-card { background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--app); border-radius: 21px;
  padding: 24px 24px 22px; }
.when { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.time { font: 700 22px/1 "Fredoka", sans-serif; color: var(--head); }
.chip { font-size: 12px; font-weight: 700; color: var(--app); background: var(--app-tint); border-radius: 99px; padding: 5px 11px; }
.day-card h3 { font-size: 20px; line-height: 1.2; margin-bottom: 8px; }
.day-card p:last-child { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--body2); }

/* One big block per app, in that app's colors. */
.app { --brand: var(--app); --head: var(--app-head); --tint: var(--app-tint); --sun: var(--app-sun); --accent: var(--app-accent);
  --on-accent: var(--app-on-accent); --spark: var(--app); position: relative; overflow: hidden; isolation: isolate;
  background: var(--app-tint); border-radius: 28px; padding: 52px 52px 44px; }
.app::before { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; right: -150px; top: -230px;
  border-radius: 50%; border: 1px solid var(--app-sun); box-shadow: 0 0 0 56px rgba(255, 255, 255, .45); }
.app-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; margin-bottom: 36px; }
.app h2.big { margin: 14px 0 6px; }
.app .lede { margin: 14px 0 0; color: var(--body2); }
.app .actions { margin: 26px 0 0; }
.soon { font-size: 13px; font-weight: 700; color: var(--app); background: var(--white); border-radius: 99px; padding: 8px 14px; }
.shot { position: relative; min-height: 470px; display: flex; align-items: center; justify-content: center; }
.shot .sun { width: 380px; height: 380px; }
.shot .devices { animation: none; }
.app .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.app .feat { padding: 24px; border-color: transparent; }
.app .feat h3 { font-size: 20px; margin: 14px 0 8px; }
.app .feat li { font-size: 14px; padding: 6px 0 6px 22px; }
.app .feat li::before { color: var(--app); }
.app .num { width: 38px; height: 38px; font-size: 14px; }

/* Why One Family. */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why-card { background: var(--white); border: 1px solid var(--line); border-radius: 21px; padding: 26px 24px; }
.why-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--tint); color: var(--brand); }
.why-ico svg { width: 24px; height: 24px; }
.why-card h3 { font-size: 19px; line-height: 1.25; margin: 16px 0 8px; }
.why-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--body2); }

/* Pricing: the Trifecta first, then each app on its own. */
.tri-hot { display: grid; grid-template-columns: 1fr 1.45fr; gap: 26px 36px; align-items: start; background: var(--brand);
  color: var(--on-brand); border-radius: 28px; padding: 42px; box-shadow: 0 24px 60px rgba(0, 0, 0, .18); }
.badge { display: inline-block; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 99px; padding: 6px 12px; }
.tri-hot h3 { color: var(--on-brand); font-size: clamp(28px, 3vw, 40px); line-height: 1.05; margin: 16px 0 10px; }
.tri-copy > p { margin: 0; color: var(--on-brand-2); }
.steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; padding: 12px 8px; font: 600 15px/1.2 "Fredoka", sans-serif; }
.steps .over small { color: var(--on-brand-2); font-size: 8.5px; letter-spacing: .04em; white-space: normal; }
.steps em { font: 700 12px/1.2 "DM Sans", sans-serif; font-style: normal; color: var(--hot-title); }
.tri-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tri-tiles li { display: flex; flex-direction: column; gap: 4px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 20px; padding: 22px 20px; color: var(--on-brand-2); font-size: 14px; }
.tri-tiles .pn { font-weight: 700; color: var(--hot-title); min-height: 2.5em; }
.tri-tiles strong { font: 700 44px/1 "Fredoka", sans-serif; color: var(--on-brand); letter-spacing: -.02em; margin: 6px 0 2px; }
.tri-tiles .sep { font-size: 13px; }
.tri-tiles s { color: var(--on-brand-2); }
.tri-tiles .later { color: var(--on-brand); font-weight: 700; font-size: 13px; }
.tri-note { grid-column: 1 / -1; margin: 0; color: var(--on-brand-2); font-size: 14.5px; border-top: 1px solid rgba(255, 255, 255, .2);
  padding-top: 18px; }
h3.pick { text-align: center; font-size: 26px; margin: 48px 0 22px; }
.plan .price span { flex-basis: 100%; font-size: 15px; }
sup.tm { font-size: .38em; vertical-align: super; margin-left: 1px; letter-spacing: 0; }
.legal { max-width: 820px; margin: 26px auto 0; text-align: center; font-size: 13.5px; color: var(--fine); }
.still { text-align: center; color: var(--muted); margin: 28px 0 0; }

.about { max-width: 760px; margin: 0 auto; text-align: center; }
.about p:not(.eyebrow) { color: var(--muted); font-size: 17px; margin: 16px 0 0; }

footer .fapps { gap: 10px 30px; align-items: flex-end; }
footer .fapps a { color: var(--head); font-weight: 700; font-size: 16px; }

@media (max-width: 1100px) {
  .day-grid, .app .feat-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .apps-grid { grid-template-columns: 1fr; }
  .tri-hot { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .app { padding: 32px 26px; }
  .app-top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wordmark { font-size: 20px; } .dots i { width: 9px; height: 9px; } .dots { gap: 4px; }
  .devices.trio-devices { width: 330px; height: 390px; }
  .trio-devices .phone { top: 62px; width: 122px; padding: 5px; border-radius: 24px; }
  .trio-devices .phone img { border-radius: 19px; }
  .trio-devices .p-pets { top: 10px; width: 144px; margin-left: -72px; }
  .hero .b1 { left: -2px; top: 1%; } .hero .b2 { right: -2px; bottom: 3%; }
  .day-grid, .app .feat-grid, .why-grid, .steps, .tri-tiles { grid-template-columns: 1fr; }
  .app { padding: 26px 18px; border-radius: 22px; }
  .shot { min-height: 400px; margin: 0 -10px; }
  .shot .sun { width: 290px; height: 290px; }
  .tri-hot { padding: 28px 20px; border-radius: 22px; }
  .tri-tiles .pn { min-height: 0; }
  h3.pick { margin-top: 36px; }
}

@media (max-width: 1100px) { .rel-grid { grid-template-columns: repeat(2, 1fr); } .feat-grid { grid-template-columns: 1fr; }
  .trifecta { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .hero-grid { display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 0 28px; }
  .intro { padding: 44px 0 4px; }
  .scene { width: 100%; min-height: 540px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { border-radius: 22px; } .hero-grid { padding: 0 20px; }
  .scene { min-height: 450px; margin: 0 -8px; }
  .sun { width: 300px; height: 300px; } .orbit { width: 370px; height: 370px; }
  .devices { width: 320px; height: 380px; } .devices.solo { width: 190px; height: 410px; }
  .ipad { width: 214px; top: 30px; padding: 7px; border-radius: 20px; } .ipad img { border-radius: 13px; }
  .phone { width: 142px; top: 58px; right: 2px; padding: 5px; border-radius: 27px; } .phone img { border-radius: 22px; }
  .solo .phone { width: 176px; left: 6px; top: 8px; padding: 6px; border-radius: 32px; } .solo .phone img { border-radius: 26px; }
  .phone::after { top: 10px; width: 40px; height: 11px; margin-left: -20px; }
  .bubble { max-width: 200px; font-size: 11.5px; padding: 8px 12px 8px 8px; gap: 8px; } .bubble strong { font-size: 12.5px; }
  .dot { width: 26px; height: 26px; border-radius: 8px; } .dot svg { width: 15px; height: 15px; }
  .b1 { left: -2px; top: 4%; } .b2 { right: -2px; bottom: 5%; } .b3 { display: none; }
  .rel-grid { grid-template-columns: 1fr; } .rel-card { min-height: 0; }
  .section { padding: 51px 0 0; }
  .feat { padding: 24px 20px; }
  .band { padding: 44px 24px; border-radius: 22px; }
  .tri-prices { grid-template-columns: 1fr; }
  .trial-banner { border-radius: 18px; }
  footer .in { padding: 32px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}