/* 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 Apple's iPhone 18 Pro Max bezel (baked into each image) ---------- */

.phone {
  --w: 280px;
  width: var(--w); aspect-ratio: 1470 / 3000;
  filter: drop-shadow(0 24px 36px rgba(60, 50, 40, 0.22));
  flex: none;
}
.phone img { display: block; width: 100%; height: 100%; object-fit: contain; }
.phone-sm { --w: 230px; }

/* The Watch: its screen (416 x 496) in a plain dark case, since there's no bezel image for it. */
.watches { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 3vw, 32px); }
.watch {
  --w: 200px;
  width: var(--w); aspect-ratio: 416 / 496; flex: none;
  padding: calc(var(--w) * 0.06); box-sizing: content-box;
  background: #1c1c1e; border-radius: calc(var(--w) * 0.27);
  box-shadow: inset 0 0 0 2px #3a3a3c;
  filter: drop-shadow(0 20px 30px rgba(60, 50, 40, 0.22));
}
.watch img { display: block; width: 100%; height: 100%; border-radius: calc(var(--w) * 0.2); }
.watch + .watch { margin-top: 56px; }

/* The Mac: a capture of the meetings window, its corners already rounded. */
.mac-shot { display: block; width: 100%; max-width: 960px; height: auto; margin: clamp(28px, 4vw, 48px) auto 0;
            filter: drop-shadow(0 24px 40px rgba(60, 50, 40, 0.24)); }
@media (max-width: 520px) { .watch { --w: 140px; } .watch + .watch { margin-top: 36px; } }

/* ---------- The Assistant: the app's own screens stacked in the bezel, revealed in turn ---------- */

.ask-phone { position: relative; }
.ask-phone img + img { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); }
.ask-phone .ask-line { opacity: 1; transition: none; }
.ask-phone.asked .ask-thinking, .ask-phone.answering .ask-blank, .ask-phone.done .ask-answered { opacity: 1; }

/* ---------- 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; }
}

/* ---------- Call apps Sotto for Mac records from: names in pressed pills ---------- */

.call-apps { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.call-apps li { font-size: 15px; font-weight: 600; color: var(--ink); padding: 8px 16px; border-radius: 999px; box-shadow: var(--press-sm); }

/* ---------- 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: 0; }
@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); margin-inline: auto; filter: drop-shadow(0 18px 28px rgba(60, 50, 40, 0.2)); }

/* ---------- 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, .ask-phone img { transition: none; }
}

/* ---------- Looks: a button per look beside one phone that switches to it ---------- */

.look-list { display: grid; gap: 10px; margin-top: 28px; max-width: 32rem; }
.look-list button { all: unset; cursor: pointer; display: grid; gap: 2px; padding: 14px 18px; border-radius: 18px; box-shadow: var(--raise-sm); transition: box-shadow .25s var(--ease); }
.look-list button strong { font-size: 17px; color: var(--ink); }
.look-list button span { font-size: 15px; color: var(--muted); }
.look-list button[aria-selected="true"] { box-shadow: var(--press-sm), 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.look-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.look-phone { position: relative; }
.look-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.look-shot.on { opacity: 1; }
.look-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The clip sits exactly in the bezel's screen opening (1320 x 2868 at 75, 66 of 1470 x 3000), with its corners. */
.look-shot video { position: absolute; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; object-fit: cover; border-radius: 13.6% / 6.3%; opacity: 0; transition: opacity .3s var(--ease); }
.look-shot video.playing { opacity: 1; }
@media (max-width: 900px) {
  .look-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .look-list button { padding: 8px 16px; border-radius: 999px; }
  .look-list button strong { font-size: 15px; }
  .look-list button span { display: none; }
}