@font-face {
  font-family:Bricolage;
  src:url('assets/fonts/BricolageGrotesque.ttf') format('truetype');
  font-weight:200 800;
  font-display:swap
}
@font-face {
  font-family:Instrument;
  src:url('assets/fonts/InstrumentSans.ttf') format('truetype');
  font-weight:400 700;
  font-display:swap
}
:root {
  --paper:#eceef8;
  --ink:#171a45;
  --blue:#3857f0;
  --sun:#f7d154;
  --pink:#ff8da1;
  --mint:#6fd8b0;
  --muted:#5b6089;
  --line:#c5caee;
  --white:#fff;
  --display:Bricolage,system-ui,sans-serif;
  --body:Instrument,system-ui,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
a,button,summary {
  touch-action:manipulation
}
button:disabled {
  cursor:default
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:6px
}
::selection {
  background:var(--sun);
  color:var(--ink)
}
img,svg {
  display:block;
  max-width:100%
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:700
}
h2 {
  font-size:clamp(34px,4.2vw,56px);
  line-height:1.08;
  letter-spacing:-2px
}
h3 {
  line-height:1.2
}
button {
  border:0
}
.container {
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto
}
.section-space {
  padding-block:108px
}
.eyebrow {
  font-size:11px;
  line-height:1.5;
  letter-spacing:1.6px;
  font-weight:700
}
.mini-label {
  font-size:9px;
  letter-spacing:1.2px;
  line-height:1.5;
  font-weight:700
}
.blue-text {
  color:var(--blue)
}
.skip-link {
  position:fixed;
  z-index:30;
  left:20px;
  top:-100px;
  padding:12px 20px;
  background:var(--ink);
  color:white
}
.skip-link:focus {
  top:12px
}
.button {
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:14px 23px;
  border:1.5px solid var(--ink);
  border-radius:9px;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  box-shadow:3px 4px 0 var(--ink);
  transition:transform .15s,box-shadow .15s;
  background:white
}
.button:hover {
  transform:translate(-1px,-2px);
  box-shadow:4px 6px 0 var(--ink)
}
.button:active {
  transform:translate(2px,3px);
  box-shadow:0 1px 0 var(--ink)
}
.button span {
  font-size:20px;
  line-height:1
}
.button-blue {
  background:var(--blue);
  color:white
}
.button-ink {
  background:var(--ink);
  color:white;
  box-shadow:3px 4px 0 var(--line)
}
.button-small {
  min-height:44px;
  padding:10px 17px;
  font-size:12px;
  gap:20px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:600;
  background:none;
  padding:10px 0;
  border:0
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.text-link>span:last-child {
  font-size:22px
}
.site-header {
  height:109px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid var(--line)
}
.brand {
  display:inline-flex;
  flex-shrink:0;
  align-items:center
}
.brand img {
  object-fit:contain
}
.site-header nav {
  display:flex;
  gap:30px;
  font-size:12px;
  font-weight:600
}
.site-header nav a {
  padding:12px 0
}
.site-header nav a:hover {
  color:var(--blue)
}
/* One visual story, from loose paper to a clear plan. */
.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:center;
  padding-block:74px 78px;
  min-height:724px
}
.hero-copy {
  padding-bottom:12px;
  position:relative;
  z-index:2
}
.hero-copy .eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:25px
}
.tiny-sun {
  font-size:24px;
  color:var(--blue);
  line-height:1
}
h1 {
  font-size:clamp(62px,6.8vw,92px);
  letter-spacing:-5px;
  line-height:.99;
  font-weight:700
}
.highlight {
  display:inline-block;
  position:relative;
  z-index:0
}
.highlight svg {
  position:absolute;
  left:0;
  bottom:-12px;
  width:100%;
  height:22px;
  z-index:-1;
  overflow:visible
}
.highlight path {
  fill:none;
  stroke:var(--sun);
  stroke-width:9;
  stroke-linecap:round
}
.hero-description {
  font-size:17px;
  line-height:1.8;
  color:var(--muted);
  max-width:410px;
  margin-top:32px
}
.hero-actions {
  display:flex;
  gap:26px;
  align-items:center;
  margin-top:29px;
  flex-wrap:wrap
}
.play-icon {
  width:25px;
  height:25px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border:1px solid var(--ink);
  border-radius:50%;
  font-size:15px!important
}
.platform-line {
  font-size:10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:23px;
  flex-wrap:wrap
}
.status-dot {
  width:6px;
  height:6px;
  background:var(--blue);
  border-radius:50%
}
.platform-divider {
  margin-inline:2px
}
.hero-art {
  position:relative;
  height:698px;
  min-width:0;
  isolation:isolate
}
.art-orbit {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  overflow:visible
}
.art-orbit ellipse {
  fill:none;
  stroke:#abb2d9;
  stroke-width:1.2;
  stroke-dasharray:5 7
}
.art-orbit path {
  fill:none;
  stroke:var(--blue);
  stroke-width:2;
  stroke-linecap:round
}
.art-spark {
  position:absolute;
  line-height:1
}
.spark-one {
  right:9px;
  top:40px;
  font-size:64px;
  color:var(--blue);
  transform:rotate(15deg)
}
.spark-two {
  left:30px;
  bottom:76px;
  font-size:70px;
  color:var(--blue)
}
.brain-note {
  position:absolute;
  left:-8px;
  top:29px;
  background:#f9da7b;
  width:238px;
  padding:30px 24px 28px;
  transform:rotate(-9deg);
  box-shadow:3px 5px 0 #c9b367;
  border:1px solid #dfc06b;
  z-index:1
}
.note-pin {
  position:absolute;
  width:57px;
  height:21px;
  background:#f7edf1b8;
  border:1px solid #dfccd280;
  top:-10px;
  left:86px;
  transform:rotate(4deg)
}
.note-eyebrow {
  font-size:8px;
  letter-spacing:1px;
  font-weight:700
}
.brain-note p {
  font-family:var(--display);
  font-size:21px;
  line-height:1.4;
  letter-spacing:-.5px;
  margin-top:14px
}
.note-scribble {
  height:23px;
  width:145px;
  margin-top:9px
}
.note-scribble path {
  stroke:#795e32;
  stroke-width:1.5;
  fill:none
}
.plan-paper {
  position:absolute;
  right:6px;
  top:99px;
  width:365px;
  padding:22px;
  background:#fffefc;
  border:1.5px solid var(--ink);
  border-radius:15px;
  box-shadow:7px 8px 0 var(--line);
  transform:rotate(5deg);
  z-index:2
}
.paper-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e5e6f0;
  padding-bottom:13px
}
.date-pill {
  font-size:7px;
  font-weight:600;
  letter-spacing:.5px;
  padding:5px 7px;
  border:1px solid var(--line);
  border-radius:20px
}
.paper-intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:18px
}
.paper-intro .mini-label {
  font-size:6px;
  letter-spacing:.8px
}
.paper-intro h2 {
  font-size:22px;
  letter-spacing:-.7px;
  margin-top:5px
}
.small-flower {
  font-size:38px;
  color:var(--blue)
}
.focus-preview {
  background:var(--ink);
  color:white;
  padding:18px 19px 16px;
  border-radius:11px;
  position:relative;
  overflow:hidden
}
.focus-top {
  display:flex;
  justify-content:space-between;
  font-size:7px;
  letter-spacing:1px;
  color:#c3c8ed;
  position:relative;
  z-index:1
}
.focus-top>span:first-child {
  display:flex;
  gap:5px;
  align-items:center
}
.focus-top i {
  width:5px;
  height:5px;
  background:var(--sun);
  border-radius:50%;
  display:inline-block
}
.focus-preview h3 {
  font-size:22px;
  letter-spacing:-.5px;
  margin-top:10px;
  text-align:center;
  position:relative;
  z-index:1
}
.focus-preview p {
  font-size:10px;
  color:#c3c8ed;
  margin-top:5px;
  text-align:center
}
.focus-bottom {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:12px;
  position:relative;
  z-index:1
}
.mini-timer {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:96px;
  height:96px;
  border:2px solid transparent;
  border-radius:50%;
  background:#292e60;
  box-shadow:inset 0 0 0 5px var(--ink);
  font-family:var(--display);
  font-size:32px;
  line-height:1.1;
  font-weight:600;
  letter-spacing:-2px;
  font-variant-numeric:tabular-nums
}
.mini-timer::before {
  content:'';
  position:absolute;
  inset:-2px;
  border:2px dashed var(--sun);
  border-radius:50%;
  pointer-events:none;
  animation:mini-ring-spin 50s linear infinite
}
@keyframes mini-ring-spin { to { transform:rotate(360deg) } }
.mini-liquid {
  position:absolute;
  inset:5px;
  border-radius:50%;
  overflow:hidden;
  background:#292e60;
  z-index:-1
}
.mini-liquid::before,
.mini-liquid::after {
  content:'';
  position:absolute;
  left:-50%;
  width:200%;
  height:200%;
  border-radius:43%;
  background:var(--blue)
}
.mini-liquid::before {
  top:var(--mini-liquid-level,40%);
  transform:rotate(-4deg)
}
.mini-liquid::after {
  top:calc(var(--mini-liquid-level,40%) - 6%);
  opacity:.4;
  transform:rotate(8deg)
}
.mini-bubbles {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  clip-path:inset(clamp(0%,var(--mini-liquid-level,40%),100%) 0 0 0)
}
.mini-bubble {
  position:absolute;
  left:23%;
  bottom:-6px;
  width:5px;
  height:5px;
  border:1px solid #ffffffb3;
  border-radius:50%;
  animation:mini-bubble-rise 6s ease-in infinite;
  animation-delay:-1s
}
.mini-bubble:nth-child(2) { left:52%;width:4px;height:4px;animation-delay:-3s }
.mini-bubble:nth-child(3) { left:75%;animation-delay:-5s }
@keyframes mini-bubble-rise {
  0% { transform:translateY(0);opacity:.8 }
  100% { transform:translateY(-84px);opacity:0 }
}
.mini-timer-clock {
  display:flex;
  position:relative;
  color:white;
  text-shadow:1px 2px 0 var(--ink)
}
.hero-art.is-arriving .mini-liquid::before {
  animation:mini-wave-settle 1.6s .3s ease-out both
}
@keyframes mini-wave-settle {
  0% { transform:translateY(6px) rotate(-10deg) }
  50% { transform:rotate(6deg) }
  100% { transform:rotate(-4deg) }
}
.focus-play {
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--sun);
  color:var(--ink);
  font-size:20px;
  text-align:center;
  line-height:30px;
  flex-shrink:0
}
.focus-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:8px;
  position:relative;
  z-index:1
}
.focus-footer>span:first-child {
  color:#c3c8ed;
  font-size:7px;
  font-weight:600;
  letter-spacing:1px
}
.focus-controls {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
  position:relative;
  z-index:1
}
.focus-control {
  min-width:0;
  min-height:44px;
  border:1px solid #ffffff47;
  border-radius:9px;
  padding:8px 5px;
  background:#343968;
  color:white;
  font:600 12px/1.2 var(--display);
  transition:background .12s,transform .12s
}
.focus-control:hover:not(:disabled) { background:#454b80 }
.focus-control:active:not(:disabled) { transform:translateY(2px) }
.focus-control:focus-visible { outline-color:var(--sun);outline-offset:3px }
.focus-finish { background:var(--sun);border-color:var(--sun);color:var(--ink) }
.focus-finish:hover:not(:disabled) { background:#ffe07a }
.focus-control:disabled { opacity:.5;cursor:default }
.focus-preview.is-paused .mini-liquid::before { animation-play-state:paused }
.focus-preview.is-complete .mini-liquid { opacity:.4 }
.focus-preview.is-expired .mini-liquid::before,
.focus-preview.is-expired .mini-liquid::after { opacity:0 }
.focus-preview.is-expired .mini-bubbles { visibility:hidden }
.focus-preview:is(.is-paused,.is-complete,.is-expired,.is-motion-suspended) .mini-timer::before,
.focus-preview:is(.is-paused,.is-complete,.is-expired,.is-motion-suspended) .mini-bubble,
html:not(.has-js) .mini-timer::before,
html:not(.has-js) .mini-bubble { animation-play-state:paused }
.focus-dots {
  position:absolute;
  right:-13px;
  top:20px;
  width:110px;
  height:145px;
  transform:rotate(-20deg);
  background-image:radial-gradient(#ffffff24 1px,transparent 1px);
  background-size:8px 8px;
  pointer-events:none
}
.ticket {
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  border:1px solid var(--line);
  background:#f3f4fb;
  border-radius:9px;
  margin-top:12px;
  min-height:63px;
  box-shadow:2px 3px 0 #dddff0;
  padding-right:10px
}
.ticket-break {
  background:#e2f6ed;
  border-color:#b9e5d2
}
.ticket-time {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  align-self:stretch;
  width:62px;
  flex-shrink:0;
  font-family:var(--display);
  font-weight:600;
  font-size:16px;
  border-right:1px dashed #a5afce;
  position:relative
}
.ticket-time:before,.ticket-time:after {
  content:'';
  position:absolute;
  right:-5px;
  width:8px;
  height:8px;
  background:#fffefc;
  border:1px solid var(--line);
  border-radius:50%
}
.ticket-time:before {
  top:-5px
}
.ticket-time:after {
  bottom:-5px
}
.ticket-time>span {
  font:9px var(--body);
  color:var(--muted)
}
.ticket-label {
  font-size:6px;
  letter-spacing:1px;
  display:block;
  margin-bottom:4px
}
.ticket strong {
  font-size:11px;
  font-weight:600;
  display:block;
  line-height:1.35
}
.ticket-symbol {
  font-size:20px;
  margin-left:auto
}
.paper-footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:8px;
  color:var(--muted);
  padding-top:17px
}
.little-check {
  color:#237455;
  font-size:12px
}
.graphic-caption {
  position:absolute;
  bottom:-55px;
  left:50%;
  transform:translateX(-50%);
  color:var(--muted);
  font-size:9px;
  white-space:nowrap
}
.hero-art.is-arriving .brain-note {
  animation:note-arrive .8s cubic-bezier(.2,.7,.2,1) both
}
.hero-art.is-arriving .plan-paper {
  animation:plan-arrive 1.1s .25s cubic-bezier(.2,.7,.2,1) both
}
.hero-art.is-arriving .focus-preview {
  animation:focus-arrive .7s 1s both
}
.hero-art.is-arriving .ticket {
  animation:ticket-arrive .6s 1.2s both
}
.hero-art.is-arriving .ticket+.ticket {
  animation-delay:1.4s
}
@keyframes note-arrive {
  from {
    opacity:0;
    transform:translate(10px,14px) rotate(-7deg)
  }
  to {
    opacity:1;
    transform:rotate(-9deg)
  }
}
@keyframes plan-arrive {
  from {
    opacity:0;
    transform:translate(-12px,18px) rotate(2deg)
  }
  to {
    opacity:1;
    transform:rotate(5deg)
  }
}
@keyframes focus-arrive {
  from {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes ticket-arrive {
  from {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

.manifesto-strip {
  border-block:1px solid var(--line);
  background:#e4e7f4
}
.manifesto-strip>.container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:21px;
  font-family:var(--display);
  font-size:15px;
  font-weight:500
}
.manifesto-strip span[aria-hidden] {
  font-size:25px;
  color:var(--blue);
  line-height:1
}
.recognition {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}
.recognition .eyebrow {
  margin-bottom:21px
}
.recognition h2 {
  font-size:44px;
  line-height:1.15
}
.serif-word {
  position:relative;
  display:inline-block
}
.serif-word:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:8px;
  bottom:-4px;
  background:var(--pink);
  z-index:-1;
  transform:rotate(-3deg)
}
.recognition-copy {
  font-size:17px;
  color:var(--muted);
  max-width:465px
}
.recognition-copy .ink-copy {
  color:var(--ink);
  margin-top:20px;
  font-weight:500
}
.walkthrough-section {
  background:#f8f9fd;
  border-block:1px solid #dce0f0
}
.section-heading {
  text-align:center
}
.section-heading>.eyebrow {
  margin-bottom:19px
}
.section-heading>p:last-child {
  color:var(--muted);
  margin-top:20px;
  font-size:16px
}
.walkthrough {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
  margin-top:64px;
  align-items:center
}
.step-list {
  display:flex;
  flex-direction:column;
  gap:4px
}
.step {
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:21px 20px 21px 0;
  border-bottom:1px solid #dfe2f0;
  position:relative
}
.step-number {
  font:500 13px var(--display);
  background:#eceef8;
  width:35px;
  height:35px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-shrink:0;
  transition:background .2s,color .2s
}
.step h3 {
  font-size:27px;
  letter-spacing:-.8px;
  margin-bottom:8px
}
.step p {
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  max-width:306px
}
.step-arrow {
  font-size:23px;
  margin-left:auto;
  color:var(--muted)
}
.step.is-active .step-number {
  background:var(--blue);
  color:white
}
.step.is-active h3,.step.is-active .step-arrow {
  color:var(--blue)
}
.step:hover h3 {
  color:var(--blue)
}
.demo-stage {
  padding:28px;
  background:#e6e9f7;
  border:1px solid #d8ddee;
  border-radius:20px;
  min-width:0;
  position:relative;
  background-image:radial-gradient(#c3cae4 1px,transparent 1px);
  background-size:12px 12px
}
.demo-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:7px;
  letter-spacing:.6px;
  color:var(--muted);
  margin-bottom:25px
}
.demo-badge {
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700
}
.demo-badge>i {
  width:5px;
  height:5px;
  background:var(--blue);
  border-radius:50%
}
.demo-panel {
  scroll-margin-top:30px
}
.demo-panel+.demo-panel {
  margin-top:32px
}
.interactive-demo .demo-panel+.demo-panel {
  margin-top:0
}
.demo-panel[hidden] {
  display:none
}
.demo-card {
  background:white;
  border:1.5px solid var(--ink);
  border-radius:13px;
  padding:28px;
  box-shadow:5px 6px 0 var(--line);
  min-height:420px;
  display:flex;
  flex-direction:column
}
.demo-card>.mini-label {
  color:var(--muted)
}
.demo-card h3 {
  font-size:29px;
  letter-spacing:-1px;
  margin-top:14px;
  max-width:330px
}
.demo-card>p {
  color:var(--muted);
  font-size:12px;
  margin-top:8px
}
.example-input {
  margin-top:28px;
  border:1px solid #dfe2ee;
  background:#f7f8fc;
  border-radius:8px;
  padding:20px;
  min-height:183px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:18px;
  line-height:1.6
}
.input-doodle {
  font-size:30px;
  color:var(--blue);
  line-height:1;
  margin-top:12px
}
.demo-card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:24px
}
.demo-card-footer>span {
  font-size:9px;
  max-width:110px;
  color:var(--muted)
}
.demo-card-footer .button {
  font-size:11px;
  min-height:44px;
  padding:10px 12px;
  gap:12px
}
.demo-caption {
  font-size:10px;
  text-align:center;
  margin-top:22px;
  color:var(--muted);
  min-height:32px
}
.demo-caption span {
  font-size:15px;
  vertical-align:middle;
  margin-right:4px
}
.review-task {
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #e7e9f3;
  padding-block:15px;
  font-size:11px
}
.review-task:first-of-type {
  margin-top:15px
}
.review-task>div {
  flex:1;
  min-width:0
}
.review-task>div>span {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px
}
.review-task>strong {
  flex:1
}
.task-checkbox {
  width:13px;
  height:13px;
  border:1.5px solid #aeb6d9;
  border-radius:3px;
  flex-shrink:0
}
.duration-chip {
  font-size:9px;
  background:var(--paper);
  border-radius:20px;
  white-space:nowrap;
  padding:4px 8px
}
.demo-timeline {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:24px
}
.demo-timeline>div {
  display:flex;
  align-items:center;
  gap:12px
}
.demo-timeline time {
  font-size:10px;
  font-variant-numeric:tabular-nums;
  color:var(--muted)
}
.timeline-block {
  display:flex;
  flex-direction:column;
  flex:1;
  border-radius:7px;
  padding:13px 15px;
  border:1px solid #d7dcef
}
.timeline-block>strong {
  font-size:13px
}
.timeline-block>span {
  font-size:9px;
  opacity:.85;
  margin-top:3px
}
.blue-block {
  color:white;
  background:var(--blue);
  border-color:var(--blue)
}
.mint-block {
  background:#ddf5e9
}
.paper-block {
  background:var(--paper)
}
.focus-demo {
  background:var(--ink);
  color:white;
  align-items:center;
  text-align:center;
  position:relative
}
.focus-demo>.mini-label,.focus-demo>p {
  color:#b9beea
}
.focus-demo h3 {
  font-size:26px;
  margin-top:16px
}
.liquid-timer {
  width:215px;
  height:215px;
  flex-shrink:0;
  position:relative;
  border:1.5px dashed #777fa8;
  border-radius:50%;
  margin-top:22px;
  isolation:isolate;
  overflow:hidden;
  background:#292e60
}
.liquid-fill {
  position:absolute;
  width:360px;
  height:360px;
  border-radius:42%;
  background:#f7d154;
  top:53%;
  left:50%;
  margin-left:-180px;
  transform:rotate(0);
  z-index:-1
}
.liquid-number {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100%;
  font:600 51px var(--display);
  letter-spacing:-2px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 0 #171a45
}
.liquid-number>span {
  font:600 7px var(--body);
  letter-spacing:1.5px;
  margin-top:6px;
  background:var(--ink);
  padding:5px 10px;
  border-radius:20px
}
.liquid-timer.is-playing .liquid-fill {
  animation:liquid 8s linear infinite
}
.liquid-timer.is-suspended .liquid-fill {
  animation-play-state:paused
}
@keyframes liquid {
  to {
    transform:rotate(360deg)
  }
}
.focus-demo-bottom {
  margin-top:auto;
  padding-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  width:100%
}
.focus-demo-tag {
  font-size:9px;
  color:#c4caee
}
.motion-toggle {
  background:#343968;
  color:white;
  border:1px solid #6f78b0;
  border-radius:6px;
  padding:8px 10px;
  min-height:44px;
  font-size:10px
}
.motion-toggle:focus-visible {
  outline-color:var(--sun)
}
.motion-toggle:disabled {
  opacity:.8
}
.is-switching {
  animation:panel-switch .35s both
}
@keyframes panel-switch {
  from {
    opacity:.4;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.recovery {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:112px;
  align-items:center
}
.recovery-art {
  padding:31px 27px;
  background:#dcefe7;
  border:1px solid #b8d9cb;
  border-radius:17px;
  box-shadow:6px 7px 0 #c5ddd3;
  transform:rotate(-2deg)
}
.recovery-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:25px
}
.recovery-heading .mini-label {
  font-size:8px;
  letter-spacing:1px
}
.recovery-heading>span:last-child {
  font-size:31px;
  line-height:1
}
.recovery-task {
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 16px;
  background:white;
  border:1px solid #afc8bd;
  border-radius:8px;
  box-shadow:2px 3px 0 #bcd3c8
}
.recovery-check {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--mint);
  border:1px solid #2d7056;
  width:24px;
  height:24px;
  border-radius:50%;
  font-size:13px
}
.recovery-task strong {
  font-size:12px;
  line-height:1.5;
  display:block
}
.recovery-task>div>span {
  font-size:9px;
  color:var(--muted);
  display:block;
  margin-top:3px
}
.extra-time {
  color:#765100;
  background:#fff1c3;
  padding:3px 6px;
  font-size:9px;
  border-radius:5px;
  margin-left:auto
}
.recovery-track {
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-top:22px
}
.recovery-track>div {
  display:flex;
  align-items:center;
  gap:14px
}
.recovery-time {
  font-size:11px;
  font-variant-numeric:tabular-nums;
  width:33px;
  flex-shrink:0
}
.recovery-track>div>div {
  display:flex;
  align-items:center;
  gap:10px;
  padding:17px 16px;
  border:1px dashed #8dbba6;
  border-radius:8px;
  flex:1;
  min-width:0
}
.recovery-break {
  background:#c7ebd9
}
.recovery-next {
  background:#ffffff80
}
.recovery-track strong {
  font-size:12px
}
.recovery-track>div>div>span:last-child {
  font-size:9px;
  margin-left:auto;
  white-space:nowrap
}
.recovery-bottom {
  margin-top:27px;
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between
}
.recovery-bottom p {
  font-size:10px;
  color:#215c48
}
.recovery-stamp {
  font-size:8px;
  font-weight:700;
  border:1.5px solid #436d5c;
  padding:5px 8px;
  transform:rotate(-6deg);
  border-radius:3px;
  white-space:nowrap
}
.recovery-copy .eyebrow {
  margin-bottom:22px
}
.recovery-copy h2 {
  font-size:58px
}
.underline-pink {
  position:relative;
  display:inline-block;
  z-index:0
}
.underline-pink:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--pink);
  height:11px;
  z-index:-1;
  transform:rotate(-2deg)
}
.recovery-copy>p:not(.eyebrow) {
  font-size:16px;
  color:var(--muted);
  margin-top:25px;
  max-width:355px
}
.adjustment-button {
  margin-top:16px
}
.recovery-art.is-adjusting .recovery-track {
  animation:adjust-plan .6s both
}
@keyframes adjust-plan {
  0% {
    transform:translateY(0)
  }
  40% {
    transform:translateY(12px)
  }
  100% {
    transform:translateY(0)
  }
}
.download-section {
  padding-top:16px;
  padding-bottom:8px
}
.download-panel {
  background:var(--ink);
  color:#f4f5ff;
  border-radius:22px;
  padding:66px 68px;
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:25px;
  position:relative;
  overflow:hidden
}
.download-panel .eyebrow {
  color:#b9beea;
  font-size:9px;
  margin-bottom:22px
}
.download-panel h2 {
  font-size:59px;
  letter-spacing:-2.5px
}
.download-panel h2>span {
  color:var(--sun)
}
.download-copy>p:not(.eyebrow) {
  color:#c0c5e9;
  font-size:15px;
  margin-top:22px
}
.store-options {
  display:flex;
  gap:12px;
  margin-top:28px;
  flex-wrap:wrap
}
.store-option {
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid #676c9b;
  border-radius:10px;
  padding:14px 18px;
  min-width:192px;
  background:#222653
}
.store-option svg {
  width:24px;
  height:29px;
  fill:#e5e8ff
}
.store-option>div {
  display:flex;
  flex-direction:column
}
.store-option span {
  font-size:7px;
  letter-spacing:1px;
  color:#c0c5e9
}
.store-option strong {
  font-family:var(--display);
  font-size:21px;
  font-weight:600;
  line-height:1.2;
  margin-top:3px;
  letter-spacing:-.5px
}
.store-option small {
  font-size:9px;
  color:var(--sun);
  margin-top:5px
}
.download-copy>.store-note {
  font-size:10px!important;
  max-width:390px;
  line-height:1.7
}
.download-art {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.download-art>img {
  width:265px;
  height:265px;
  filter:drop-shadow(7px 9px 0 #080a27)
}
.download-art>p {
  font-family:var(--display);
  font-size:23px;
  text-align:center;
  line-height:1.2;
  transform:rotate(-6deg);
  color:var(--sun);
  margin-top:-10px
}
.download-spark {
  font-size:75px;
  position:absolute;
  right:5px;
  top:8px;
  color:var(--sun);
  line-height:1
}
.download-art>svg {
  width:130px;
  height:45px;
  transform:rotate(-6deg);
  margin-top:5px
}
.download-art>svg path {
  stroke:#b9beea;
  stroke-width:1.5;
  fill:none;
  stroke-linecap:round
}
.faq {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px
}
.faq-heading .eyebrow {
  font-size:9px;
  margin-bottom:24px
}
.faq-heading h2 {
  font-size:49px
}
.faq-doodle {
  display:inline-block;
  font-family:var(--display);
  font-size:82px;
  line-height:1;
  background:var(--sun);
  border:1.5px solid var(--ink);
  box-shadow:3px 4px 0 var(--line);
  border-radius:48% 52% 46% 54%;
  padding:9px 24px;
  margin-top:30px;
  transform:rotate(-14deg)
}
.faq-list {
  border-top:1px solid var(--line)
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding-block:24px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
summary>span {
  font-size:25px;
  font-weight:400;
  line-height:1;
  transition:transform .2s
}
details[open] summary>span {
  transform:rotate(45deg)
}
details>p {
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  padding:0 35px 25px 0
}
.closing {
  border-top:1px solid var(--line);
  padding-block:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.closing>span {
  font-size:58px;
  line-height:1;
  color:var(--blue)
}
.closing>p {
  font-family:var(--display);
  font-size:27px;
  letter-spacing:-.7px;
  line-height:1.25;
  margin-right:auto
}
.closing>p strong {
  font-weight:600
}
.site-footer {
  border-top:1px solid var(--line);
  padding-block:34px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.site-footer>.footer-note {
  font-size:10px;
  color:var(--muted);
  text-align:right;
  line-height:1.8
}
.site-footer>div>p {
  font-size:10px;
  color:var(--muted);
  margin-top:8px
}
.footer-links {
  display:flex;
  gap:25px;
  font-size:11px;
  font-weight:500
}
.footer-links a:hover {
  text-decoration:underline
}
.no-script-note {
  display:none
}
/* Interactive controls enhance an otherwise complete static walkthrough. */
.download-wordmark {
  width:130px;
  height:auto;
  margin-bottom:25px
}
.paper-brand {
  width:88px;
  height:auto
}
html:not(.has-js) [data-next],html:not(.has-js) .motion-toggle,html:not(.has-js) .adjustment-button {
  display:none
}
.liquid-fill {
  background:var(--blue)
}
@media(min-width:1440px) {
  .hero {
    gap:35px
  }
  .hero-art {
    margin-left:20px
  }
  .brain-note {
    left:0
  }
  .plan-paper {
    right:25px
  }
}
@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px)
  }
  .site-header nav {
    gap:19px
  }
  .hero {
    gap:5px;
    padding-top:55px;
    min-height:690px
  }
  h1 {
    font-size:77px
  }
  .hero-copy .eyebrow {
    font-size:9px
  }
  .hero-art {
    height:676px
  }
  .plan-paper {
    width:325px;
    right:0;
    padding:19px;
    top:106px
  }
  .brain-note {
    width:210px;
    left:0;
    top:25px;
    padding:24px 20px
  }
  .brain-note p {
    font-size:19px
  }
  .paper-intro h2 {
    font-size:19px
  }
  .focus-preview h3 {
    font-size:20px
  }
  .hero-actions {
    gap:16px
  }
  .hero-actions .button {
    font-size:12px;
    padding-inline:17px;
    gap:15px
  }
  .hero-actions .text-link {
    font-size:12px;
    gap:8px
  }
  .spark-one {
    right:0;
    top:50px;
    font-size:50px
  }
  .recognition {
    gap:50px
  }
  .recognition h2 {
    font-size:39px
  }
  .walkthrough {
    gap:35px
  }
  .demo-stage {
    padding:23px
  }
  .demo-card {
    padding:23px
  }
  .demo-card h3 {
    font-size:25px
  }
  .example-input {
    font-size:17px
  }
  .demo-card-footer {
    flex-wrap:wrap
  }
  .demo-card-footer>span {
    max-width:100%
  }
  .recovery {
    gap:65px
  }
  .recovery-copy h2 {
    font-size:49px
  }
  .recovery-art {
    padding:26px 20px
  }
  .download-panel {
    padding:55px 45px
  }
  .download-panel h2 {
    font-size:53px
  }
  .download-art>img {
    width:220px;
    height:220px
  }
  .store-option {
    min-width:180px;
    padding:12px 14px
  }
  .faq {
    gap:60px
  }
}
@media(max-width:850px) {
  .site-header nav {
    gap:20px
  }
  .site-header nav a:nth-child(2) {
    display:none
  }
  .site-header .button {
    gap:12px;
    font-size:11px
  }
  .hero {
    grid-template-columns:1fr 1fr;
    min-height:620px;
    padding-block:55px 60px;
    gap:20px
  }
  h1 {
    font-size:63px;
    letter-spacing:-3.5px
  }
  .hero-description {
    font-size:15px;
    line-height:1.7
  }
  .hero-copy .eyebrow {
    font-size:8px;
    letter-spacing:1px
  }
  .hero-actions {
    gap:12px;
    margin-top:24px
  }
  .hero-actions .text-link {
    padding-top:5px
  }
  .hero-art {
    height:606px
  }
  .plan-paper {
    width:280px;
    padding:16px;
    top:94px;
    right:-6px
  }
  .brain-note {
    width:190px;
    font-size:15px;
    left:-15px;
    top:0;
    padding:24px 17px
  }
  .brain-note p {
    font-size:17px
  }
  .paper-intro {
    padding-block:14px
  }
  .paper-intro h2 {
    font-size:17px
  }
  .paper-intro .mini-label {
    font-size:5px
  }
  .small-flower {
    font-size:29px
  }
  .focus-preview {
    padding:14px
  }
  .focus-preview h3 {
    font-size:17px
  }
  .focus-preview p {
    font-size:8px
  }
  .mini-timer {
    width:80px;
    height:80px;
    font-size:26px
  }
  .focus-play {
    width:26px;
    height:26px;
    line-height:26px;
    font-size:18px
  }
  .focus-bottom {
    margin-top:8px
  }
  .ticket {
    min-height:52px;
    gap:8px;
    margin-top:9px
  }
  .ticket strong {
    font-size:9px
  }
  .ticket-time {
    width:49px;
    font-size:14px
  }
  .ticket-label {
    font-size:5px
  }
  .paper-footer {
    font-size:7px;
    padding-top:13px
  }
  .date-pill {
    font-size:5px
  }
  .spark-one {
    font-size:42px;
    right:-8px;
    top:30px
  }
  .spark-two {
    font-size:53px;
    left:-14px;
    bottom:60px
  }
  .graphic-caption {
    bottom:-27px
  }
  .manifesto-strip>.container {
    font-size:12px;
    gap:12px
  }
  .manifesto-strip span[aria-hidden] {
    font-size:19px
  }
  .section-space {
    padding-block:80px
  }
  .recognition {
    gap:35px
  }
  .recognition h2 {
    font-size:35px
  }
  .recognition-copy {
    font-size:15px
  }
  .recognition .eyebrow {
    font-size:9px
  }
  .walkthrough {
    grid-template-columns:1fr;
    gap:30px;
    margin-top:38px
  }
  .step-list {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px
  }
  .step {
    flex-direction:column;
    gap:10px;
    padding:15px 12px;
    border:1px solid #dfe2f0;
    border-radius:10px
  }
  .step h3 {
    font-size:22px;
    margin:0
  }
  .step p,.step-arrow {
    display:none
  }
  .step-number {
    width:28px;
    height:28px;
    font-size:11px
  }
  .step.is-active {
    border-color:var(--blue);
    background:#eff1ff
  }
  .demo-stage {
    max-width:570px;
    width:100%;
    margin-inline:auto;
    padding:28px 35px
  }
  .demo-card {
    min-height:420px;
    padding:28px
  }
  .demo-card-footer {
    flex-wrap:nowrap
  }
  .demo-card h3 {
    font-size:29px
  }
  .example-input {
    font-size:18px
  }
  .recovery {
    gap:35px
  }
  .recovery-copy h2 {
    font-size:43px
  }
  .recovery-copy .eyebrow {
    font-size:8px
  }
  .recovery-copy>p:not(.eyebrow) {
    font-size:14px
  }
  .recovery-art {
    padding:22px 17px
  }
  .recovery-task {
    padding:15px 12px;
    gap:7px
  }
  .recovery-task strong {
    font-size:10px
  }
  .recovery-task>div>span {
    font-size:8px
  }
  .recovery-check {
    width:20px;
    height:20px
  }
  .recovery-track>div {
    gap:8px
  }
  .recovery-track strong {
    font-size:10px
  }
  .recovery-track>div>div {
    padding:14px 10px;
    gap:5px
  }
  .recovery-heading .mini-label {
    font-size:6px
  }
  .recovery-bottom {
    flex-direction:column;
    gap:10px
  }
  .download-panel {
    padding:42px 35px;
    grid-template-columns:1fr .55fr;
    gap:10px
  }
  .download-panel h2 {
    font-size:44px
  }
  .download-art>img {
    width:175px;
    height:175px
  }
  .download-art>p {
    font-size:20px
  }
  .download-spark {
    font-size:43px;
    right:0;
    top:28px
  }
  .download-panel .eyebrow {
    font-size:8px
  }
  .store-option {
    min-width:175px
  }
  .download-copy>p:not(.eyebrow) {
    font-size:13px
  }
  .faq {
    gap:40px;
    grid-template-columns:.7fr 1.3fr
  }
  .faq-heading h2 {
    font-size:40px
  }
  .faq-heading .eyebrow {
    font-size:8px
  }
  .footer-links {
    gap:15px
  }
  .site-footer {
    flex-wrap:wrap
  }
}
@media(max-width:640px) {
  .container {
    width:calc(100% - 40px)
  }
  .site-header {
    height:84px;
    gap:12px
  }
  .brand img {
    width:117px;
    height:auto
  }
  .site-header nav {
    display:none
  }
  .site-header .button {
    min-height:44px;
    font-size:10px;
    padding:9px 12px;
    gap:13px;
    box-shadow:2px 3px 0 var(--line)
  }
  .hero {
    display:flex;
    flex-direction:column;
    gap:30px;
    padding-block:43px 50px;
    min-height:0;
    align-items:stretch
  }
  .hero-copy {
    padding:0
  }
  .hero-copy .eyebrow {
    font-size:8px;
    letter-spacing:1px;
    margin-bottom:22px
  }
  .tiny-sun {
    font-size:22px
  }
  h1 {
    font-size:clamp(58px,13.5vw,83px);
    line-height:1.01;
    letter-spacing:-3.7px
  }
  h1>br:nth-child(2) {
    display:none
  }
  .highlight {
    margin-top:2px
  }
  .highlight svg {
    bottom:-8px;
    height:16px
  }
  .hero-description {
    font-size:16px;
    max-width:400px;
    margin-top:27px;
    line-height:1.75
  }
  .hero-actions {
    gap:20px;
    margin-top:25px
  }
  .hero-actions .button {
    font-size:12px;
    padding:13px 16px;
    min-height:50px;
    gap:16px
  }
  .hero-actions .text-link {
    font-size:11px;
    padding:10px 0;
    gap:7px
  }
  .platform-line {
    margin-top:20px;
    font-size:9px;
    gap:6px
  }
  .hero-art {
    height:634px;
    width:min(390px,100%);
    align-self:center;
    margin-top:12px
  }
  .brain-note {
    left:0;
    top:14px;
    width:200px;
    padding:25px 20px
  }
  .brain-note p {
    font-size:18px
  }
  .plan-paper {
    right:7px;
    top:108px;
    width:292px;
    padding:18px
  }
  .paper-intro h2 {
    font-size:18px
  }
  .focus-preview h3 {
    font-size:18px
  }
  .paper-intro .mini-label {
    font-size:5.5px
  }
  .spark-one {
    right:10px;
    top:34px;
    font-size:47px
  }
  .spark-two {
    left:6px;
    bottom:65px;
    font-size:53px
  }
  .graphic-caption {
    bottom:-30px
  }
  .manifesto-strip>.container {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:8px 14px;
    font-size:12px;
    padding-block:17px;
    text-align:center
  }
  .manifesto-strip span:nth-child(4) {
    display:none
  }
  .manifesto-strip span:nth-child(6) {
    grid-column:2;
    grid-row:2
  }
  .manifesto-strip span:nth-child(5) {
    grid-column:1;
    grid-row:2
  }
  .manifesto-strip span:nth-child(7) {
    grid-column:3;
    grid-row:2
  }
  .manifesto-strip span[aria-hidden] {
    font-size:18px
  }
  .section-space {
    padding-block:60px
  }
  .recognition {
    grid-template-columns:1fr;
    gap:25px
  }
  .recognition h2 {
    font-size:36px;
    letter-spacing:-1.5px
  }
  .recognition .eyebrow {
    font-size:9px;
    margin-bottom:18px
  }
  .recognition-copy {
    font-size:16px;
    max-width:none
  }
  .recognition-copy .ink-copy {
    margin-top:16px
  }
  .section-heading {
    text-align:left
  }
  .section-heading>.eyebrow {
    font-size:8px;
    margin-bottom:20px
  }
  .section-heading h2 {
    font-size:38px;
    letter-spacing:-1.5px
  }
  .section-heading>p:last-child {
    font-size:14px;
    margin-top:17px;
    max-width:310px
  }
  .walkthrough {
    margin-top:30px;
    gap:23px
  }
  .step-list {
    gap:6px
  }
  .step {
    padding:12px 8px;
    gap:10px;
    border-radius:8px
  }
  .step h3 {
    font-size:17px;
    letter-spacing:-.5px
  }
  .step-number {
    width:24px;
    height:24px;
    font-size:10px
  }
  .demo-stage {
    padding:19px 15px;
    border-radius:14px
  }
  .demo-meta {
    font-size:5.5px;
    letter-spacing:.4px;
    margin-bottom:19px
  }
  .demo-badge {
    gap:5px
  }
  .demo-card {
    min-height:405px;
    padding:22px 18px;
    border-radius:10px;
    box-shadow:3px 4px 0 var(--line)
  }
  .demo-card>.mini-label {
    font-size:7px;
    letter-spacing:.8px
  }
  .demo-card h3 {
    font-size:26px;
    letter-spacing:-1px;
    margin-top:14px
  }
  .demo-card>p {
    font-size:10px
  }
  .example-input {
    font-size:17px;
    line-height:1.65;
    padding:18px 15px;
    margin-top:22px;
    min-height:185px
  }
  .demo-card-footer {
    gap:12px;
    padding-top:22px
  }
  .demo-card-footer>span {
    font-size:8px;
    max-width:90px
  }
  .demo-card-footer .button {
    font-size:9px;
    gap:8px;
    padding:9px;
    min-height:44px
  }
  .demo-card-footer .button>span {
    font-size:16px
  }
  .demo-caption {
    font-size:8px;
    margin-top:19px;
    min-height:26px
  }
  .review-task {
    font-size:10px;
    gap:8px;
    padding-block:16px
  }
  .review-task>div>span {
    font-size:8px
  }
  .duration-chip {
    font-size:8px;
    padding:3px 6px
  }
  .demo-timeline time {
    font-size:9px
  }
  .timeline-block {
    padding:15px 11px
  }
  .timeline-block>strong {
    font-size:11px
  }
  .timeline-block>span {
    font-size:8px
  }
  .focus-demo h3 {
    font-size:24px
  }
  .focus-demo-bottom {
    gap:8px
  }
  .focus-demo-tag {
    font-size:8px
  }
  .motion-toggle {
    font-size:9px;
    padding:7px 8px
  }
  .recovery {
    grid-template-columns:1fr;
    gap:38px
  }
  .recovery-copy {
    grid-row:1
  }
  .recovery-copy h2 {
    font-size:44px;
    letter-spacing:-1.7px
  }
  .recovery-copy h2>br:nth-child(2) {
    display:none
  }
  .recovery-copy>p:not(.eyebrow) {
    font-size:15px;
    max-width:400px;
    margin-top:22px
  }
  .recovery-copy .eyebrow {
    font-size:9px;
    margin-bottom:20px
  }
  .recovery-art {
    max-width:420px;
    width:calc(100% - 10px);
    justify-self:center;
    padding:27px 23px
  }
  .recovery-heading .mini-label {
    font-size:7px
  }
  .recovery-task {
    padding:17px 13px;
    gap:10px
  }
  .recovery-task strong {
    font-size:11px
  }
  .recovery-task>div>span {
    font-size:8px
  }
  .recovery-track {
    gap:12px;
    margin-top:23px
  }
  .recovery-track>div {
    gap:13px
  }
  .recovery-track>div>div {
    padding:16px 11px;
    gap:9px
  }
  .recovery-track strong {
    font-size:11px
  }
  .recovery-bottom {
    flex-direction:row;
    gap:12px
  }
  .recovery-bottom p {
    font-size:8px
  }
  .recovery-stamp {
    font-size:6px
  }
  .download-section {
    padding-top:10px
  }
  .download-panel {
    grid-template-columns:1fr;
    padding:35px 25px 32px;
    border-radius:16px;
    gap:16px
  }
  .download-panel .eyebrow {
    font-size:7px;
    letter-spacing:1.1px;
    margin-bottom:21px
  }
  .download-panel h2 {
    font-size:40px;
    letter-spacing:-1.8px
  }
  .download-copy>p:not(.eyebrow) {
    font-size:13px;
    margin-top:20px
  }
  .store-options {
    flex-direction:column;
    gap:10px;
    margin-top:24px
  }
  .store-option {
    min-width:0;
    width:100%;
    gap:16px;
    padding:14px 17px
  }
  .store-option>svg {
    width:23px;
    height:27px
  }
  .store-option>div {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    flex:1;
    gap:2px 10px
  }
  .store-option span {
    font-size:6px;
    grid-column:1;
    grid-row:1
  }
  .store-option strong {
    font-size:21px;
    grid-column:1;
    grid-row:2
  }
  .store-option small {
    font-size:8px;
    grid-column:2;
    grid-row:1 / 3;
    margin:0
  }
  .download-copy>.store-note {
    font-size:9px!important
  }
  .download-art {
    display:none
  }
  .faq {
    grid-template-columns:1fr;
    gap:32px
  }
  .faq-heading {
    position:relative
  }
  .faq-heading .eyebrow {
    font-size:8px;
    margin-bottom:18px;
    max-width:220px
  }
  .faq-heading h2 {
    font-size:40px;
    max-width:250px
  }
  .faq-doodle {
    position:absolute;
    right:7px;
    bottom:2px;
    font-size:54px;
    padding:6px 18px;
    margin:0
  }
  .faq-list summary {
    font-size:13px;
    padding-block:22px
  }
  .faq-list details>p {
    font-size:13px;
    padding-right:15px
  }
  .closing {
    padding-block:29px;
    gap:18px;
    flex-wrap:wrap
  }
  .closing>span {
    font-size:42px
  }
  .closing>p {
    font-size:24px
  }
  .closing .text-link {
    margin-left:60px;
    font-size:12px
  }
  .site-footer {
    display:grid;
    grid-template-columns:1fr;
    padding-block:28px 32px;
    gap:23px
  }
  .site-footer .brand img {
    width:117px
  }
  .site-footer>div>p {
    font-size:9px
  }
  .footer-links {
    gap:25px;
    font-size:12px;
    flex-wrap:wrap
  }
  .site-footer>.footer-note {
    text-align:left;
    font-size:9px
  }
}
@media(max-width:360px) {
  .site-header .button {
    font-size:9px;
    gap:7px
  }
  .site-header .brand img {
    width:104px
  }
  .hero-actions {
    gap:14px
  }
  .hero-actions .button {
    font-size:11px;
    padding-inline:12px;
    gap:10px
  }
  .hero-actions .text-link {
    font-size:10px
  }
  .hero-art {
    height:604px
  }
  .plan-paper {
    width:259px;
    right:4px;
    padding:14px;
    top:105px
  }
  .brain-note {
    width:185px;
    left:0;
    padding:22px 17px
  }
  .brain-note p {
    font-size:16px
  }
  .paper-intro h2 {
    font-size:16px
  }
  .focus-preview h3 {
    font-size:16px
  }
  .focus-preview {
    padding:13px
  }
  .focus-top {
    font-size:6px
  }
  .paper-footer {
    font-size:6px
  }
  .ticket {
    min-height:49px
  }
  .ticket strong {
    font-size:8px
  }
  .ticket-time {
    width:43px
  }
  .spark-one {
    right:0
  }
  .spark-two {
    left:0;
    font-size:42px
  }
  .demo-card {
    padding:20px 14px
  }
  .demo-card h3 {
    font-size:23px
  }
  .demo-card-footer {
    flex-wrap:wrap
  }
  .demo-card-footer>span {
    max-width:none
  }
  .duration-chip {
    font-size:7px;
    padding-inline:5px
  }
  .review-task {
    font-size:9px
  }
  .review-task>div>span {
    font-size:7px
  }
  .store-option {
    padding-inline:12px
  }
  .store-option small {
    font-size:7px
  }
  .download-panel {
    padding-inline:20px
  }
  .download-panel h2 {
    font-size:35px
  }
  .recognition h2 {
    font-size:32px
  }
  .section-heading h2 {
    font-size:33px
  }
  .recovery-art {
    padding-inline:16px
  }
  .recovery-stamp {
    font-size:5px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .hero-art .brain-note {
    transform:rotate(-9deg)
  }
  .hero-art .plan-paper {
    transform:rotate(5deg)
  }
}