/* Sotto site, built the same way as Bloodline's. Soft, raised surfaces (neumorphism) on one quiet
   ground, Apple type, and the app's own amber. Every surface is the ground colour lifted or pressed by light and shadow, never
   a tint, so the page reads as one material. */

:root {
  --ground: #e9e7e2;
  --ink: #1c1c1e;
  --muted: #6e6c68;
  --accent: #c96a1c;
  --accent-deep: #9c4f10;
  --accent-bright: #ec8a3a;
  --light: rgba(255, 255, 255, 0.95);
  --dark: rgba(176, 170, 158, 0.6);
  --hairline: rgba(29, 29, 31, 0.08);
  --raise: 10px 10px 26px var(--dark), -10px -10px 26px var(--light);
  --raise-sm: 5px 5px 12px var(--dark), -5px -5px 12px var(--light);
  --press: inset 6px 6px 14px var(--dark), inset -6px -6px 14px var(--light);
  --press-sm: inset 3px 3px 7px var(--dark), inset -3px -3px 7px var(--light);
  --radius: 28px;
  --measure: 72rem;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #201f1d;
    --ink: #f5f5f7;
    --muted: #a8a59f;
    --accent: #f0954a;
    --accent-deep: #c96a1c;
    --accent-bright: #ffad68;
    --light: rgba(52, 50, 47, 0.9);
    --dark: rgba(8, 9, 11, 0.75);
    --hairline: rgba(245, 245, 247, 0.08);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.wrap { width: min(var(--measure), 100% - 32px); margin-inline: auto; }

/* ---------- Navigation: one raised capsule that floats over the page ---------- */

.nav {
  position: sticky; top: 14px; z-index: 50;
  width: min(var(--measure), 100% - 24px); margin: 14px auto 0;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--raise-sm);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand-icon { width: 30px; height: 30px; border-radius: 8px; background: transparent; overflow: hidden; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.brand-icon img { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  color: var(--muted); font-size: 15px; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  transition: color .2s, box-shadow .25s var(--ease);
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ink); box-shadow: var(--press-sm); }
.nav .btn { margin-left: 4px; }
/* A phone gets one compact row: the icon (which goes home) and the pages. The App Store badge on
   every page, and Safari's own app banner, stand in for the Get the app button. */
@media (max-width: 760px) {
  .nav { top: 10px; margin-top: 10px; padding: 6px; gap: 4px; }
  .nav .brand-name, .nav .nav-get, .nav .nav-links .nav-home { display: none; }
  .nav-links { margin-left: auto; }
  .nav-links a { padding: 8px 11px; font-size: 14.5px; }
}

/* ---------- Buttons: raised, and pressed in while held ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 0;
  font: 600 16px/1 var(--font); color: var(--ink); background: var(--ground);
  box-shadow: var(--raise-sm); cursor: pointer;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), color .2s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { box-shadow: var(--press-sm); transform: none; }
.btn-accent { color: #fff; background: linear-gradient(135deg, var(--accent-bright), var(--accent) 55%, var(--accent-deep)); }
.btn-sm { padding: 9px 16px; font-size: 15px; }

/* ---------- Type ---------- */

h1, h2, h3 { margin: 0; letter-spacing: -0.03em; line-height: 1.05; font-weight: 700; }
.display { font-size: clamp(44px, 8vw, 92px); letter-spacing: -0.045em; }
.title { font-size: clamp(34px, 5.2vw, 60px); }
.subtitle { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; line-height: 1.15; }
.lede { font-size: clamp(19px, 2.2vw, 23px); color: var(--muted); line-height: 1.45; max-width: 38rem; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.center { text-align: center; margin-inline: auto; }

/* ---------- Surfaces ---------- */

.card { background: var(--ground); border-radius: var(--radius); box-shadow: var(--raise); padding: clamp(24px, 3.4vw, 40px); }
.well { background: var(--ground); border-radius: var(--radius); box-shadow: var(--press); padding: clamp(24px, 3.4vw, 40px); }
.card h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 10px; }
.card p { margin: 0; color: var(--muted); }

section { padding-block: clamp(64px, 10vw, 128px); }
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { text-align: center; }
.section-head .lede { margin-top: 18px; }
.section-head.center .lede { margin-inline: auto; }

.grid { display: grid; gap: clamp(20px, 2.6vw, 32px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Phones: the app's own screens in a raised frame ---------- */

.phone {
  --w: 280px;
  width: var(--w); aspect-ratio: 1320 / 2868;
  padding: calc(var(--w) * 0.035);
  border-radius: calc(var(--w) * 0.17);
  background: var(--ground);
  box-shadow: 18px 18px 40px var(--dark), -14px -14px 36px var(--light), inset 0 0 0 1px var(--hairline);
  flex: none;
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--w) * 0.135); }
.phone-sm { --w: 230px; }

/* ---------- The Assistant, answering live in a phone frame ---------- */

.chat-screen {
  --s: calc(var(--w) / 440);          /* points on a 440 pt wide iPhone, at this frame's size */
  height: 100%; border-radius: calc(var(--w) * 0.135); overflow: hidden;
  background: #ecebe6; color: #1c1c1e; color-scheme: light;
  display: flex; flex-direction: column;
  padding: calc(18 * var(--s)) calc(20 * var(--s)) calc(26 * var(--s));
  font-size: calc(17 * var(--s)); line-height: 1.32;
}
.chat-status { display: flex; justify-content: space-between; font-weight: 600; font-size: calc(17 * var(--s)); padding: calc(6 * var(--s)) calc(14 * var(--s)) 0; }
.chat-status-icons { width: calc(66 * var(--s)); height: calc(12 * var(--s)); border-radius: 3px; background: linear-gradient(90deg, #1d1d1f 0 58%, transparent 58% 64%, #34c759 64%); opacity: .85; }
.chat-title { color: #8a8a8e; font-weight: 600; font-size: calc(22 * var(--s)); margin: calc(30 * var(--s)) 0 calc(18 * var(--s)); }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: calc(14 * var(--s)); overflow: hidden; }
.chat-q { align-self: flex-end; max-width: 84%; margin: 0; background: #1c1c1e; color: #f5f3ee; padding: calc(12 * var(--s)) calc(16 * var(--s)); border-radius: calc(22 * var(--s)); opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.chat-a { align-self: flex-start; max-width: 92%; background: #fff; padding: calc(12 * var(--s)) calc(16 * var(--s)); border-radius: calc(22 * var(--s)); opacity: 0; transition: opacity .35s var(--ease); min-height: calc(46 * var(--s)); }
.chat-text:empty { display: none; }
.chat-text.streaming::after { content: ""; display: inline-block; width: .5em; height: .9em; margin-left: 2px; vertical-align: -.1em; border-radius: 2px; background: #c96a1c; opacity: .55; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chat-dots { display: inline-flex; gap: calc(5 * var(--s)); padding: calc(6 * var(--s)) 0; }
.chat-dots i { width: calc(8 * var(--s)); height: calc(8 * var(--s)); border-radius: 50%; background: #b8b8bd; animation: dot 1.1s ease-in-out infinite; }
.chat-dots i:nth-child(2) { animation-delay: .15s; }
.chat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-35%); opacity: 1; } }
.chat-composer { margin-top: calc(14 * var(--s)); border-radius: 999px; border: 1px solid rgba(0, 0, 0, .1); background: rgba(255, 255, 255, .7); color: #a1a1a6; padding: calc(14 * var(--s)) calc(20 * var(--s)); }
.chat-phone.asked .chat-q { opacity: 1; transform: none; }
.chat-phone.answering .chat-a { opacity: 1; }
.chat-phone.streaming .chat-dots { display: none; }

/* ---------- Hero ---------- */

.hero { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero .lede { margin: 24px 0 36px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.store-badge { display: inline-block; height: 52px; padding: 0; border-radius: 12px; box-shadow: var(--raise-sm); transition: transform .2s var(--ease), box-shadow .2s; }
.store-badge:hover { transform: translateY(-1px); }
.store-badge:active { box-shadow: var(--press-sm); }
.store-badge img { height: 52px; width: auto; }
/* Sized from the phones themselves (their height is their width times the screen's 2868/1320,
   plus the second one's drop and room for the float and shadow), so they never run into the next
   section whatever the screen's width. */
.hero-phones { --w: 280px; --drop: 64px; position: relative; perspective: 1400px;
               height: calc(var(--w) * 2868 / 1320 + var(--drop) + 40px); }
.hero-phones .phone { --w: inherit; position: absolute; transition: transform .6s var(--ease); }
.hero-phones .phone:nth-child(1) { left: 2%; top: 14px; animation: float 7s ease-in-out infinite; }
.hero-phones .phone:nth-child(2) { right: 2%; top: calc(14px + var(--drop)); animation: float 7s ease-in-out -3.5s infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-phones { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 520px) {
  .hero-phones { --w: 210px; --drop: 48px; }
}

/* ---------- The range track, the app's signature: a row of pips with the reading lit ---------- */

.track-demo { display: grid; gap: 18px; }
.marker-row { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 22px; box-shadow: var(--press-sm); }
.marker-row .name { font-weight: 600; }
.marker-row .value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.marker-row .unit { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.pips { display: flex; align-items: center; gap: 5px; height: 26px; }
.pip { width: 4px; height: 13px; border-radius: 2px; background: color-mix(in srgb, var(--status) 32%, transparent); transition: height .5s var(--ease), background .5s var(--ease); }
.pip.out { background: color-mix(in srgb, var(--status) 16%, transparent); }
.pip.on { height: 24px; background: var(--status); }
/* One width for every status, so the tracks beside them line up down the card as they do in
   the app's lists. */
.chip { min-width: 118px; text-align: center; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; color: var(--status); background: color-mix(in srgb, var(--status) 13%, transparent); white-space: nowrap; transition: color .5s, background .5s; }
.status-in { --status: #3e8e5a; }
.status-out { --status: var(--accent); }
@media (prefers-color-scheme: dark) { .status-in { --status: #6cc58a; } }
@media (max-width: 560px) {
  .marker-row { grid-template-columns: 1fr auto; }
  .marker-row .pips { grid-column: 1 / -1; order: 3; }
}

/* ---------- Feature rows: text beside a screen, alternating ---------- */

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.feature + .feature { margin-top: clamp(72px, 10vw, 140px); }
.feature.flip > :first-child { order: 2; }
.feature .phone { margin-inline: auto; }
.feature p { color: var(--muted); font-size: 19px; margin: 18px 0 0; max-width: 32rem; }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .feature.flip > :first-child { order: 0; }
}

/* ---------- Steps (How it works): a sticky phone that changes with the step in view ---------- */

.steps { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.steps-list { display: grid; gap: clamp(24px, 4vw, 40px); padding-block: 10vh 30vh; }
.step { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); transition: box-shadow .45s var(--ease), opacity .45s; box-shadow: var(--press-sm); opacity: .55; }
.step.is-current { box-shadow: var(--raise); opacity: 1; }
.step .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--accent); box-shadow: var(--raise-sm); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.step h3 { font-size: 26px; letter-spacing: -0.02em; }
.step p { color: var(--muted); margin: 10px 0 0; }
.steps-phone { position: sticky; top: 14vh; display: grid; place-items: center; }
.steps-phone .phone { --w: 300px; position: relative; }
.steps-phone img { transition: opacity .45s var(--ease); }
.steps-phone img + img { position: absolute; inset: calc(var(--w) * 0.035); width: calc(100% - var(--w) * 0.07); height: calc(100% - var(--w) * 0.07); }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; }
  .steps-phone { display: none; }
  .steps-list { padding-block: 0; }
  .step { opacity: 1; }
  .step .inline-shot { display: block; margin-top: 24px; }
}
.inline-shot { display: none; width: min(62%, 260px); border-radius: 30px; box-shadow: var(--raise-sm); margin-inline: auto; }

/* ---------- Pricing ---------- */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 14px; }
.plan .price { font-size: 44px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.plan .per { font-size: 16px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; color: var(--muted); }
.plan li { padding-left: 26px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.plan.featured { box-shadow: var(--raise), 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.billing { display: inline-flex; padding: 5px; border-radius: 999px; box-shadow: var(--press-sm); margin-bottom: 36px; }
.billing button { border: 0; background: transparent; font: 600 15px var(--font); color: var(--muted); padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: box-shadow .25s var(--ease), color .2s; }
.billing button[aria-pressed="true"] { color: var(--ink); box-shadow: var(--raise-sm); }
.save-tag { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--accent); }
/* The yearly saving, shown only while Yearly is chosen, as the app's paywall does. */
.plan .saving { margin: -4px 0 0; font-size: 15px; color: var(--accent); font-weight: 600;
                max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .4s var(--ease); }
.plans.yearly .saving { max-height: 4em; opacity: 1; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }

/* ---------- Statements: big, quiet lines ---------- */

.statement { font-size: clamp(30px, 4.6vw, 54px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; max-width: 52rem; }
.statement .muted { font-weight: 700; }

.pcc { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.cloud-orb { width: clamp(120px, 16vw, 180px); aspect-ratio: 1; border-radius: 50%; box-shadow: var(--raise); display: grid; place-items: center; }
.cloud-orb svg { width: 44%; height: 44%; color: var(--accent); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@media (max-width: 640px) { .pcc { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Legal pages ---------- */

.doc { width: min(44rem, 100% - 32px); margin: clamp(48px, 8vw, 96px) auto 0; }
.doc h1 { font-size: clamp(40px, 6vw, 56px); letter-spacing: -0.035em; }
.doc .updated { color: var(--muted); margin: 14px 0 36px; font-variant-numeric: tabular-nums; }
.doc h2 { font-size: 22px; letter-spacing: -0.015em; margin: 44px 0 12px; }
.doc p, .doc li { color: color-mix(in srgb, var(--ink) 82%, var(--ground)); }
.doc p { margin: 0 0 16px; }
.doc ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.doc li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.doc li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.doc .summary { margin: 0 0 28px; }
.doc .summary h2 { margin-top: 0; }
.doc .summary ul { margin-bottom: 0; }
.doc .lede { color: var(--ink); max-width: none; }

/* ---------- Footer ---------- */

footer { padding: 48px 0 56px; margin-top: clamp(64px, 10vw, 120px); }
.foot { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--hairline); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--muted); font-size: 15px; }
.foot a:hover { color: var(--ink); }
.foot small { color: var(--muted); font-size: 14px; }
.disclaimer { color: var(--muted); font-size: 14px; max-width: 46rem; margin: 0 0 22px; }

/* ---------- Reveal on scroll ---------- */

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-phones .phone, .cloud-orb svg { animation: none; }
  .pip, .chip, .step, .steps-phone img, .chat-q, .chat-a { transition: none; }
  .chat-dots i, .chat-text.streaming::after { animation: none; }
}