/* Sotto website. "Paper and ink": warm paper with a fine grain, ink type in Figtree set light and tight,
   hairline rules with crop marks at the corners, flat ink buttons, and one soft blue for play and live.
   Figtree is served from this site (SIL Open Font License, assets/fonts). No third-party requests. */
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}
:root {
  --paper: #f3f2ec;
  --sheet: #fcfcf9;
  --deep: #e9e8df;
  --ink: #181818;
  --graphite: #6a6963;
  --pencil: #8c8b84;
  --rule: rgba(0, 0, 0, 0.1);
  --rule-strong: rgba(0, 0, 0, 0.18);
  --blue: #81acec;
  --on-blue: #15171c;
  --stage: #000;
  --stage-sheet: #1c1c1a;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* A corner mark: a small square on paper, outlined. */
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect x='.5' y='.5' width='8' height='8' fill='%23f3f2ec' stroke='%23a3a29b'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}
/* Grain, so the flat colour reads as paper. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pencil); }
::selection { background: var(--blue); color: var(--on-blue); }

.wrap { width: min(1080px, 100% - 40px); margin: 0 auto; }

/* Construction lines: a hairline runs past the top and bottom edges of a frame, with a square on each corner. */
.framed { position: relative; }
.framed::before, .framed::after {
  content: ""; position: absolute; left: -28px; right: -28px; height: 9px; pointer-events: none; z-index: 1;
  background:
    var(--mark) 23.5px 0 / 9px 9px no-repeat,
    var(--mark) calc(100% - 23.5px) 0 / 9px 9px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 4px / 100% 1px no-repeat;
}
.framed::before { top: -4px; }
.framed::after { bottom: -4px; }

/* Navigation. */
.nav {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--rule);
  background: rgba(243, 242, 236, 0.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 16px; }
.nav-links a { color: var(--ink); }
.nav-links a:not(.btn):hover { color: var(--graphite); text-decoration: none; }

/* Buttons: flat ink for the main action, an outline on the sheet for the rest. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; padding: 0 18px; border-radius: 6px;
  font: 500 16px/1 var(--sans); letter-spacing: 0; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule-strong);
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.btn:hover { text-decoration: none; border-color: var(--ink); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn small { font-size: 13px; font-weight: 400; color: var(--graphite); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary small { color: rgba(243, 242, 236, 0.6); }
.btn-primary:hover { background: #000; }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: var(--paper); }
.btn-small { height: 34px; padding: 0 13px; font-size: 15px; }
.btn.soon { cursor: default; }

/* Type: light and tight for headings. A heading's second line continues it in pencil grey. */
h1, h2, h3 { margin: 0; font-weight: 380; letter-spacing: -0.02em; }
h1 span, h2 em, h2 span { display: block; font-style: normal; color: var(--pencil); }
h3 { font-weight: 600; letter-spacing: -0.01em; }

/* Hero. */
.hero { padding: 96px 0 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--graphite);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
h1 { font-size: clamp(42px, 6.4vw, 72px); line-height: 1.02; margin: 18px 0 22px; max-width: 20ch; }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--ink); max-width: 44ch; margin: 0 0 32px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.fineprint { margin-top: 14px; font-size: 14px; color: var(--graphite); }

/* Notch demo: a Mac screen drawn on the canvas, with the black prompter tab hanging from the top. */
.stage { margin: 80px auto 0; max-width: 1080px; }
.screen {
  position: relative; height: 440px; overflow: hidden;
  background: var(--deep);
  border: 1px solid var(--rule);
}
.menubar {
  position: absolute; inset: 0 0 auto; height: 28px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; font-size: 13px; color: var(--ink);
  background: rgba(252, 252, 249, 0.7); border-bottom: 1px solid var(--rule);
}
.menubar span { display: inline-flex; gap: 14px; }
.notch-wrap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(464px, 84%); height: 150px; z-index: 2; }
.notch-wrap .ear { position: absolute; top: 0; width: 12px; height: 12px; background: radial-gradient(circle at 0 100%, transparent 11.5px, #0b0b0d 12px); z-index: 1; }
.notch-wrap .ear.l { left: 0; }
.notch-wrap .ear.r { right: 0; transform: scaleX(-1); }
/* Smoked glass, as in the app: a tinted blur of the screen behind, deepening towards the black notch. */
.notch {
  position: absolute; top: 0; bottom: 0; left: 12px; right: 12px; border-radius: 0 0 22px 22px; overflow: hidden;
  background: linear-gradient(rgba(11, 11, 13, 0.97) 0, rgba(11, 11, 13, 0.97) 12px, rgba(24, 24, 28, 0.72) 70px, rgba(24, 24, 28, 0.66));
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2), inset 1px 0 0 rgba(255, 255, 255, 0.08), inset -1px 0 0 rgba(255, 255, 255, 0.08), 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}
.notch .viewport { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(transparent 0, transparent 22px, #000 40px, #000 58%, transparent 94%); mask-image: linear-gradient(transparent 0, transparent 22px, #000 40px, #000 58%, transparent 94%); }
.notch .lens { position: absolute; top: 9px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #262626; }
.notch .text {
  position: absolute; left: 0; right: 0; top: 34px; padding: 0 30px; text-align: center;
  font: 600 16px/1.6 var(--sans); color: #fff;
  animation: scroll 26s linear infinite;
}
.notch .glow {
  position: absolute; left: 50%; bottom: -36px; width: 220px; height: 76px; margin-left: -110px;
  background: radial-gradient(closest-side, rgba(129, 172, 236, 0.9), rgba(129, 172, 236, 0));
  filter: blur(8px); animation: breathe 2.6s ease-in-out infinite;
}
@keyframes scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes breathe { 0%, 100% { opacity: 0.25; transform: scale(0.92); } 45% { opacity: 0.9; transform: scale(1.05); } 60% { opacity: 0.7; } }
/* Guides along the tab's edges, as if it had just been placed on the canvas. */
.stage:not(.try) .screen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: min(440px, calc(84% - 24px)); transform: translateX(-50%);
  border-left: 1px dashed var(--rule-strong); border-right: 1px dashed var(--rule-strong); pointer-events: none;
}
.call { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 12px; width: min(620px, 90%); z-index: 1; }
.tile {
  flex: 1; height: 168px; position: relative; overflow: hidden;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px;
}
.tile .who { position: absolute; left: 12px; bottom: 9px; font-size: 13px; color: var(--graphite); }
.tile .avatar { position: absolute; left: 50%; top: 46%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: var(--deep); }
.tile.you { border-color: var(--rule-strong); }
.tile.you .avatar { background: var(--blue); opacity: 0.55; }
.badge-hidden {
  position: absolute; right: 16px; top: 44px; height: 28px; padding: 0 11px; display: inline-flex; align-items: center; z-index: 2;
  border-radius: 6px; font-size: 13px; color: var(--ink); border: 1px solid var(--rule-strong); background: var(--sheet);
}
.caption { color: var(--graphite); font-size: 14px; margin-top: 22px; }

/* Sections. */
section { padding: 136px 0 0; }
.section-head { max-width: 640px; margin: 0 0 44px; }
.section-head.center { margin: 0 0 44px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.04; margin-bottom: 16px; }
.section-head p { color: var(--ink); margin: 0; font-size: 18px; max-width: 52ch; }
.kicker { font-size: 15px; font-weight: 500; color: var(--graphite); margin-bottom: 14px; }

/* Features: cells of one hairline grid. */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.card { padding: 30px 28px 32px; background: var(--sheet); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.card .icon {
  width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; margin-bottom: 22px;
  border: 1px solid var(--rule-strong); color: var(--ink); background: var(--paper);
}
.card .icon svg { width: 17px; height: 17px; }
.card h3 { font-size: 17px; margin-bottom: 6px; }
.card p { margin: 0; color: var(--graphite); font-size: 16px; line-height: 1.55; }

/* Phones. */
.phones { display: flex; justify-content: center; gap: 24px; align-items: flex-end; }
.phone {
  width: 250px; border-radius: 42px; padding: 7px; flex: none;
  background: var(--ink);
}
.phone img { border-radius: 35px; }
.phone.lift { transform: translateY(-32px); width: 268px; }

/* Price and platforms: two cells of one grid. */
.split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); background: var(--sheet); }
.split > div + div { border-left: 1px solid var(--rule); }
.price, .platforms { padding: 44px 40px; }
.price h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.04; margin-bottom: 16px; }
.price > p, .platforms p { color: var(--graphite); margin: 0; }
.price ul, .platforms ul { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 0; font-size: 16px; border-top: 1px solid var(--rule); }
.price li, .platforms li { padding: 11px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.platforms h3 { font-size: 19px; margin-bottom: 6px; }
.platforms .cta { justify-content: flex-start; }

/* FAQ. */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-size: 18px; font-weight: 500; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--graphite); font-weight: 300; font-size: 24px; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--graphite); max-width: 66ch; }
.faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }

/* Closing call to action. */
.closing { padding: 160px 0 0; }
.closing h2 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.02; margin-bottom: 30px; }
.closing .waitlist { justify-content: flex-start; margin: 0; }

/* Footer. */
footer { margin: 128px 0 0; padding: 28px 0 44px; border-top: 1px solid var(--rule); color: var(--graphite); font-size: 15px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer nav { display: flex; gap: 22px; }

/* Document pages (privacy, support). */
.doc { max-width: 720px; margin: 80px auto 0; }
.doc h1 { font-size: clamp(38px, 6vw, 56px); margin: 0 0 10px; max-width: none; }
.doc .meta { color: var(--graphite); margin: 0 0 36px; font-size: 15px; }
.doc h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 44px 0 10px; }
.doc p, .doc li { color: var(--ink); }
.doc ol, .doc ul { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc strong { font-weight: 600; }
.doc .summary { padding: 20px 22px; background: var(--sheet); border: 1px solid var(--rule); }
.doc a { text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 3px; }
kbd, code {
  font: 600 13px/1 var(--sans); padding: 4px 7px; border-radius: 5px; white-space: nowrap;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-bottom-width: 2px; color: var(--ink);
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .split, .faq-layout { grid-template-columns: 1fr; }
  .split > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .faq-layout { gap: 8px; }
  .phone { width: 200px; }
  .phone.lift { width: 214px; }
}
@media (max-width: 640px) {
  .nav-links a:not(.btn) { display: none; }
  .hero { padding-top: 64px; }
  .grid { grid-template-columns: 1fr; }
  .screen { height: 340px; }
  .call .tile:nth-child(n+3) { display: none; }
  .tile { height: 120px; }
  .badge-hidden { display: none; }
  .menubar span:first-child { visibility: hidden; }
  .phones { gap: 10px; }
  .phone { width: 46%; border-radius: 28px; padding: 5px; }
  .phone img { border-radius: 24px; }
  .phone.lift { width: 50%; }
  .phone:nth-child(3) { display: none; }
  .price, .platforms { padding: 28px 22px; }
  section { padding-top: 96px; }
  .framed::before, .framed::after { left: -14px; right: -14px; background-position: 9.5px 0, calc(100% - 9.5px) 0, 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .notch .text, .notch .glow { animation: none; }
  html { scroll-behavior: auto; }
}