/* Sakura pink, income emerald, and berry are shared across the product story. */
.how-section,.product-section{--story-pink:#cb2f73;--story-emerald:#087f65;--story-berry:#87325f;--story-ink:#382333;--story-paper:#fffdfb}
/* Product-led homepage refinement. Bootstrap remains the editable foundation. */
.hero {
  background: #fff9fc;
  border-bottom: 1px solid #f1e5eb;
}
.hero-inner {
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  min-height: 0;
  padding-block: 28px 30px;
}
.hero h1 {
  font-size: clamp(3.2rem, 5vw, 4.75rem);
  letter-spacing: -0.04em;
  line-height: 1.17;
  max-width: 570px;
}
.hero h1 em {
  font-size: 1em;
  white-space: normal;
}
.hero-copy > p {
  max-width: 420px;
  font-size: 1.1rem;
  margin-top: 28px;
  line-height: 1.8;
}
.hero-product {
  max-width: 520px;
  justify-self: center;
}
.app-demo-frame {
  display: block;
  width: 100%;
  height: 665px;
  border: 1px solid #ded8df;
  border-radius: 26px;
  background: #f7f8fb;
  box-shadow: 0 16px 36px #3420330b;
}
.button {
  border-radius: 25px;
  transition:
    background 0.2s,
    color 0.2s;
}
.button:hover {
  transform: none;
  box-shadow: none;
}
.button-small {
  border-radius: 22px;
}
.hero .petal-field {
  opacity: 0.7;
}
.section-heading {
  align-items: center;
  gap: 40px;
  margin-bottom: 36px;
}
.section-heading h2,
.skin-copy h2,
.centered h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.22;
}
.section-heading > div > p {
  max-width: 370px;
  color: var(--soft);
  line-height: 1.75;
  margin-top: 18px;
  font-size: 1rem;
}
.product-section {
  padding-block: 75px 90px;
}
.shared-flow { width:350px;max-width:42%;flex-shrink:0; }
.shared-flow>svg { width:100%;height:auto;overflow:visible;stroke-width:1.8; }
.flow-line { fill:none;stroke:#d96b96;stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round; }
.flow-person { fill:var(--story-pink);stroke:#9d2255;stroke-width:1; }
.flow-person.second { fill:var(--story-emerald);stroke:#055b48; }
.flow-face { fill:var(--story-paper);stroke:#62203f;stroke-width:1.8; }
.flow-profile.second .flow-face { stroke:#054d3d; }
.flow-halo { fill:none;stroke:var(--story-pink);stroke-width:3;stroke-dasharray:2 5; }
.flow-center { fill:#fffaf5;stroke:#d75c8e;stroke-width:2; }
.flow-house { fill:#ee609f;stroke:#87325f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.flow-house .flow-door { fill:#fffaf5; }
.flow-love { fill:var(--story-pink);stroke:none;transform-box:fill-box;transform-origin:center; }
.flow-token { opacity:0; }
.flow-token rect { fill:#c6487d;stroke:#fffaf5;stroke-width:2; }
.flow-token text { font:700 14px Quicksand,sans-serif;fill:#fff;stroke:none; }
.flow-token.second rect { fill:#278366;stroke:#fffaf5; }
.motion-scene .flow-token.first { animation:record-flow-left 7.6s ease-in-out infinite; }
.motion-scene .flow-token.second { animation:record-flow-right 8.3s 1.8s ease-in-out infinite; }
.motion-scene .flow-love { animation:step-affection 8.3s 2.4s ease-in-out infinite; }
.shared-flow:hover .flow-center { stroke:#a62b5c; }
.shared-flow:hover .flow-love { fill:#b83268; }
.feature-tour {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 75px;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 30px;
}
.tour-options {
  display: grid;
  gap: 0;
}
.tour-options > button {
  display: flex;
  gap: 20px;
  align-items: start;
  padding: 27px 20px 27px 0;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--soft);
}
.tour-options > button > svg {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tour-options strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}
.tour-options small {
  display: block;
  font-size: 0.95rem;
  margin-top: 8px;
  line-height: 1.7;
}
.tour-options [aria-pressed="true"] > svg,
.tour-options [aria-pressed="true"] strong {
  color: var(--pink);
}
.tour-options [aria-pressed="true"] {
  border-bottom-color: var(--pink);
}
.tour-screen {
  padding: 0 22px;
}
.tour-screen .app-demo-frame {
  max-width: 405px;
  height: 600px;
  margin: auto;
}
.skin-section {
  padding-block: 80px;
  background: #fbf8fa;
  border: 0;
}
.skin-grid {
  gap: 80px;
}
.skin-preview {
  background: none;
  padding: 0;
  min-height: 0;
  overflow: visible;
  border-radius: 0;
}
.skin-preview .app-demo-frame {
  max-width: 405px;
  margin: auto;
  height: 630px;
}
.skin-copy > .text-link {
  font-size: 0.875rem;
}
.skin-choices {
  margin-top: 35px;
}
.skin-choices b {
  font-size: 0.75rem;
}
.skin-status {
  margin-top: 27px;
  margin-bottom: 20px;
}
.skin-status span {
  font-size: 0.9375rem;
}
.skin-status small {
  font-size: 0.8125rem;
}
.plans-section {
  padding-block: 80px 50px;
}
.section-heading.centered {
  align-items: flex-start;
  text-align: left;
  margin-bottom: 20px;
}
.centered > p {
  margin-top: 16px;
}
.household-picker {
  margin: 0 0 32px;
}
.plan-grid {
  max-width: none;
  gap: 30px;
}
.plan-card {
  border-radius: 16px;
  box-shadow: none;
  padding: 30px;
}
.plan-card h3 {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
}
.plan-card li {
  font-size: 0.9375rem;
}
.plan-disclaimer {
  font-size: 0.8125rem;
  text-align: left;
  max-width: none;
  margin-inline: 0;
}
.coming-pill {
  border-width: 0;
  top: 23px;
  right: 22px;
  padding: 5px 9px;
  font-size: 0.6875rem;
}
.premium-plan .plan-heading {
  padding-right: 150px;
}
.premium-plan .plan-heading span {
  font-size: 1rem;
}
.plan-heading {
  margin-bottom: 22px;
}
.roadmap {
  margin-top: 45px;
}
.roadmap-heading h3 {
  font-size: 1.5rem;
}
.roadmap-grid [data-slot="accordion-trigger"] {
  font-size: 0.95rem;
}
.faq-section {
  padding-block: 35px 65px;
}
.faq-section h2 {
  font-size: 2.5rem;
}
.closing-section {
  background: #f9edf3;
  padding: 60px 25px;
}
.closing-content h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.25;
  color: var(--ink);
}
.closing-content > .text-link {
  font-size: 0.9rem;
}
.footer-top {
  padding-bottom: 22px;
}
.footer-bottom {
  color: #74636e;
}
.footer-bottom nav {
  font-size: 0.8125rem;
}
.desktop-nav {
  gap: 32px;
}
.eyebrow {
  letter-spacing: 0.08em;
}
.app-demo-frame:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 4px;
}
@keyframes record-flow-left {0%,12%{transform:translate(67px,70px);opacity:0}23%{opacity:1}58%{transform:translate(143px,70px);opacity:1}72%,100%{transform:translate(159px,70px);opacity:0}}
@keyframes record-flow-right {0%,12%{transform:translate(293px,70px);opacity:0}23%{opacity:1}58%{transform:translate(217px,70px);opacity:1}72%,100%{transform:translate(201px,70px);opacity:0}}
@media (max-width: 1100px) {
  .hero-inner {
    gap: 40px;
  }
  .hero h1 {
    font-size: 3.6rem;
  }
  .hero-product {
    max-width: 395px;
  }
  .feature-tour {
    gap: 45px;
  }
  .skin-grid {
    gap: 45px;
  }
  .coming-pill {
    position: static;
    display: inline-block;
    margin-bottom: 18px;
  }
  .premium-plan .plan-heading {
    padding: 0;
  }
}
@media (max-width: 850px) {
  .hero-inner {
    gap: 25px;
  }
  .hero h1 {
    font-size: 3rem;
  }
  .hero-copy > p {
    font-size: 1rem;
  }
  .app-demo-frame {
    height: 650px;
  }
  .hero-actions {
    gap: 15px;
  }
  .feature-tour {
    gap: 25px;
  }
  .tour-screen {
    padding: 0;
  }
  .tour-options > button {
    gap: 13px;
  }
  .tour-options strong {
    font-size: 1.15rem;
  }
  .tour-options small {
    font-size: 0.875rem;
  }
  .skin-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 30px;
  }
}
@media (max-width: 650px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 36px;
    padding-bottom: 44px;
  }
  .hero-copy {
    padding: 0;
  }
  .hero h1 {
    font-size: clamp(2.8rem, 10vw, 3.8rem);
    max-width: 400px;
    margin-inline: auto;
  }
  .hero-copy > p {
    font-size: 1rem;
    max-width: 330px;
    margin: 20px auto 0;
  }
  .hero-product {
    width: 100%;
    max-width: 390px;
  }
  .app-demo-frame {
    height: 650px;
    border-radius: 22px;
  }
  .section-heading {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
  }
  .section-heading > div > p {
    font-size: 0.9375rem;
    margin-top: 14px;
  }
  .section-heading h2 {
    font-size: 2rem;
  }
  .shared-flow {
    max-width: none;
    width: 120px;
  }
  .shared-flow text {
    font-size: 18px;
  }
  .product-section {
    padding-block: 45px 55px;
  }
  .feature-tour {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 8px;
  }
  .tour-controls,
  .tour-screen {
    width: 100%;
  }
  .tour-options {
    display: flex;
    gap: 12px;
  }
  .tour-options > button {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 0;
  }
  .tour-options strong {
    font-size: 0.8125rem;
    line-height: 1.4;
  }
  .tour-options small {
    display: none;
  }
  .tour-options > button > svg {
    width: 23px;
    height: 23px;
  }
  .tour-screen .app-demo-frame {
    height: 585px;
  }
  .skin-section {
    padding-block: 45px;
  }
  .skin-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .skin-copy h2 {
    font-size: 2.3rem;
  }
  .skin-preview .app-demo-frame {
    height: 620px;
  }
  .skin-choices {
    gap: 12px;
    margin-top: 25px;
  }
  .skin-choices > button {
    width: 57px;
  }
  .skin-choices b {
    font-size: 0.6875rem;
  }
  .skin-status {
    min-height: 0;
    margin-top: 20px;
  }
  .plans-section {
    padding-block: 50px 25px;
  }
  .centered h2 {
    font-size: 2.25rem;
  }
  .household-picker {
    margin-bottom: 28px;
  }
  .plan-grid {
    gap: 20px;
  }
  .plan-card {
    padding: 26px;
  }
  .plan-disclaimer {
    font-size: 0.75rem;
  }
  .roadmap-heading h3 {
    font-size: 1.35rem;
  }
  .faq-section {
    padding-bottom: 40px;
  }
  .closing-content h2 {
    font-size: 2rem;
  }
  .closing-section {
    padding: 45px 20px;
  }
  .footer-top {
    gap: 15px;
  }
  .footer-bottom nav {
    gap: 17px;
    font-size: 0.75rem;
  }
}
@media (max-width: 370px) {
  .shared-flow {
    width: 95px;
  }
  .section-heading h2 {
    font-size: 1.8rem;
  }
  .skin-choices {
    gap: 5px;
  }
  .skin-choices > button {
    width: 53px;
  }
  .hero-actions {
    gap: 16px;
  }
  .hero-actions > .text-link {
    font-size: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flow-token {
    animation: none !important;
    opacity: 0;
  }
  .flow-center {
    animation: none !important;
  }
}
/* Each preview is a section, with its height supplied by its content. */
.app-demo-frame,
.hero-product .app-demo-frame,
.tour-screen .app-demo-frame,
.skin-preview .app-demo-frame {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
  width: 100%;
}
.hero-product .app-demo-frame {
  height: 430px;
}
.tour-screen .app-demo-frame {
  height: 410px;
}
.skin-preview .app-demo-frame {
  height: 235px;
}
.skin-preview {
  min-height: 0;
  background: transparent;
}
.tour-screen {
  min-height: 0;
}
.feature-tour {
  align-items: start;
}
/* Clear interactive controls and a compact mobile hierarchy. */
.tour-options {
  gap: 12px;
}
.tour-options > button {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.tour-options > button:hover {
  background: #fdf2f7;
  border-color: #d88daf;
}
.tour-options > button[aria-pressed="true"] {
  background: #fcedf3;
  border-color: #cf6798;
  box-shadow: inset 0 0 0 1px #cf6798;
}
.tour-options > button::after {
  content: "›";
  margin-left: auto;
  color: #b75080;
  font-size: 26px;
  line-height: 1;
}
.tour-screen {
  min-height: 390px;
}
.tour-screen.demo-changing .app-demo-frame {
  animation: demo-screen-settle 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}
.guided-demo-active .tour-options > button[aria-pressed="true"] {
  box-shadow:
    inset 0 0 0 1px #cf6798,
    0 8px 24px rgb(184 80 126 / 10%);
}
@keyframes demo-screen-settle {
  0% {
    transform: translateY(10px) scale(0.992);
    opacity: 0.48;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.skin-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--preview-bg);
  color: var(--preview-text);
  transition:
    background 0.45s,
    color 0.45s;
}
.skin-section h2,
.skin-section .skin-status > span,
.skin-section .skin-status > small,
.skin-section .text-link,
.skin-section .skin-choices button {
  color: var(--preview-text);
}
.skin-section .skin-status > small {
  opacity: 0.75;
}
.skin-section > .skin-grid {
  position: relative;
  z-index: 1;
}
.skin-tour-active .skin-choices button[aria-pressed="true"] > span {
  animation: skin-choice-arrive 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.skin-status.skin-status-changing {
  animation: skin-status-arrive 0.5s ease both;
}
@keyframes skin-choice-arrive {
  0% {
    transform: translateY(5px) scale(0.9);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--preview-accent) 0%, transparent);
  }
  65% {
    transform: translateY(0) scale(1.05);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--preview-accent) 10%, transparent);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--preview-accent) 0%, transparent);
  }
}
@keyframes skin-status-arrive {
  from {
    transform: translateY(5px);
    opacity: 0.45;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 650px) {
  .hero-inner {
    padding-top: 25px;
    padding-bottom: 28px;
    gap: 24px;
  }
  .hero h1 {
    font-size: clamp(2.1rem, 8.8vw, 2.7rem);
    line-height: 1.14;
  }
  .hero-copy > p {
    font-size: 0.94rem;
    line-height: 1.55;
    margin-top: 15px;
    max-width: 300px;
  }
  .hero-actions {
    margin-top: 20px;
    gap: 18px;
  }
  .hero-actions .button {
    min-height: 44px;
    padding: 12px 20px;
  }
  .hero-product {
    max-width: 390px;
  }
  .section-heading {
    display: block;
  }
  .section-heading h2 {
    font-size: 1.8rem;
    line-height: 1.2;
  }
  .section-heading h2 br {
    display: none;
  }
  .section-heading > div > p {
    max-width: 100%;
    margin-top: 12px;
  }
  .shared-flow {
    display: none;
  }
  .tour-options {
    gap: 8px;
  }
  .tour-options > button {
    padding: 13px 5px;
    border-radius: 14px;
    position: relative;
  }
  .tour-options > button::after {
    display: none;
  }
  .tour-options strong {
    font-size: 0.82rem;
  }
  .tour-screen {
    min-height: 360px;
  }
  .skin-copy h2 {
    font-size: 1.9rem;
    line-height: 1.2;
  }
  .skin-choices {
    justify-content: space-between;
    gap: 8px;
  }
  .skin-choices > button {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .skin-choices b {
    font-size: 0.72rem;
  }
  .skin-grid {
    gap: 22px;
  }
  .skin-status {
    margin-top: 18px;
  }
  .skin-status > span {
    font-size: 0.9rem;
  }
  .skin-status > small {
    font-size: 0.8rem;
  }
}
.skin-section .skin-status strong {
  color: var(--preview-text);
}
@media (max-width: 650px) {
  .hero h1 br {
    display: none;
  }
}
/* The same ambient skin particles, timing, assets, and interactions used in the app. */
.app-skin-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  --tilt-x-soft: 0px;
  --tilt-x: 0px;
  --tilt-y-soft: 0px;
  --tilt-y: 0px;
}
.hero > .app-skin-ambient {
  opacity: 0.78;
}
.app-skin-petal {
  position: absolute;
  top: -48px;
  display: block;
  aspect-ratio: 0.56;
  animation: app-petal-fall linear infinite;
  filter: drop-shadow(0 2px 2px rgb(133 36 76 / 8%));
  will-change: transform;
}
.app-petal-reactor {
  display: block;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transition: transform 1100ms cubic-bezier(0.2, 0.72, 0.24, 1);
  will-change: transform;
}
.app-skin-petal img {
  display: block;
  width: 100%;
  height: auto;
  animation: app-petal-sway var(--sway-duration) ease-in-out infinite alternate;
  will-change: transform;
}
.app-skin-particle {
  aspect-ratio: 1;
}
.app-skin-particle .app-petal-reactor i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--preview-accent, #df5f90);
  box-shadow: 0 0 12px
    color-mix(in srgb, var(--preview-accent, #df5f90) 55%, transparent);
  animation: app-skin-pulse var(--sway-duration) ease-in-out infinite alternate;
}
.app-skin-particle-ocean .app-petal-reactor i {
  border: 1.5px solid color-mix(in srgb, var(--preview-accent) 70%, white);
  background: transparent;
  box-shadow: inset 0 0 4px rgb(255 255 255 / 45%);
}
.app-skin-particle-cozy .app-petal-reactor i {
  border-radius: 60% 40% 55% 45%;
  background: #d78a48;
  box-shadow: 0 0 13px rgb(221 120 53 / 34%);
}
.app-skin-particle-sunset .app-petal-reactor i {
  background: rgb(255 182 117 / 62%);
  box-shadow: 0 0 18px rgb(245 110 110 / 42%);
}
@keyframes app-skin-pulse {
  from {
    transform: scale(0.65);
    opacity: 0.35;
  }
  to {
    transform: scale(1.12);
    opacity: 0.95;
  }
}
@keyframes app-petal-fall {
  0% {
    transform: translate3d(0, -8%, 0);
  }
  42% {
    transform: translate3d(
      calc(var(--petal-drift) + var(--tilt-x-soft)),
      43vh,
      0
    );
  }
  72% {
    transform: translate3d(
      calc(var(--petal-drift-soft) + var(--tilt-x-soft)),
      74vh,
      0
    );
  }
  100% {
    transform: translate3d(
      calc(var(--petal-drift-end) + var(--tilt-x)),
      112vh,
      0
    );
  }
}
@keyframes app-petal-sway {
  0% {
    transform: translateX(-8px) rotate(-38deg) rotateY(0deg);
  }
  48% {
    transform: translateX(9px) rotate(32deg) rotateY(62deg);
  }
  100% {
    transform: translateX(-3px) rotate(118deg) rotateY(154deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-skin-petal,
  .app-skin-petal img,
  .app-skin-particle .app-petal-reactor i {
    animation: none;
  }
}

#skins .app-skin-ambient[data-skin="sunset"] { z-index:0; }

.skin-household-note{max-width:430px;line-height:1.5;margin:14px 0 18px;color:#5b6573}.guides-teaser{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:80px;padding-bottom:80px}.guides-teaser h2{font-size:clamp(1.9rem,4vw,3rem)}.guides-teaser p{margin:8px 0}@media(max-width:650px){.guides-teaser{display:block}.guides-teaser .button{margin-top:20px}}

.skin-section .skin-copy > .skin-household-note{color:var(--preview-text);opacity:.82;max-width:430px;line-height:1.55;margin:15px 0 20px}

/* The hero and the introduction share one uninterrupted petal field. */
.hero-intro {position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(#fff9fc 0 72%,#fff 100%);}.hero-intro .hero {background:transparent;overflow:visible;border-bottom:0;}.hero-intro>.app-skin-ambient {height:100%;opacity:.78;}.hero-intro .hero-inner,.hero-intro .how-section {position:relative;z-index:1;}.hero-intro .app-skin-petal {animation-name:intro-petal-fall;}.how-section {background:transparent;}.hero-intro .app-skin-ambient {container-type:size;}
@keyframes intro-petal-fall {0%{transform:translate3d(0,-40px,0);}42%{transform:translate3d(calc(var(--petal-drift) + var(--tilt-x-soft)),43cqh,0);}72%{transform:translate3d(calc(var(--petal-drift-soft) + var(--tilt-x-soft)),74cqh,0);}100%{transform:translate3d(calc(var(--petal-drift-end) + var(--tilt-x)),calc(100cqh + 80px),0);}}
.icon-playback {display:grid;place-items:center;width:32px;height:32px;margin-top:14px;border:1px solid #e4dce3;border-radius:50%;}.icon-playback svg {width:15px;height:15px;}.icon-playback:hover {background:#fcedf3;}.animation-top {margin-bottom:26px;}
/* Compact hero: content determines its height at every screen size. */
.hero-inner {min-height:0;align-items:start;}
.hero-copy {padding-bottom:0;}
@media(min-width:651px){.hero-product {max-width:680px;align-self:center;}.hero-inner {width:min(1360px,calc(100% - 64px));grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;}}
@media(max-width:650px){.hero-inner {gap:8px;padding-top:24px;}.hero-product {width:calc(100% + 32px);max-width:none;justify-self:center;}}

/* Warm, distinct feature accents, shared by controls and illustrations. */
.feature-tour{gap:clamp(24px,4vw,56px);align-items:center;border-top:0;padding-top:12px}
.tour-options>button{--accent:var(--story-pink);--tint:#fff3f8;--icon-bg:var(--story-pink);align-items:center;gap:16px;padding:20px;border:1px solid #e8dce3;background:var(--story-paper);border-radius:22px;color:#65525c;transition:background .2s,border-color .2s,transform .2s}
.tour-options>button[data-demo-view="plan"]{--accent:var(--story-emerald);--tint:#f1faf7;--icon-bg:var(--story-emerald)}
.tour-options>button[data-demo-view="mail"]{--accent:var(--story-berry);--tint:#faf2f7;--icon-bg:var(--story-berry)}
.tour-options>button>svg{box-sizing:content-box;width:26px;height:26px;flex:none;padding:13px;margin:0;border-radius:18px;background:var(--icon-bg);color:#fff}
.tour-options>button>span{min-width:0}
.tour-options>button strong{font-size:1.2rem;color:#382c34}
.tour-options>button small{font-size:.9rem;line-height:1.5;margin-top:6px}
.tour-options>button::after{color:var(--accent);align-self:center}
.tour-options>button:hover{background:var(--tint);border-color:var(--accent);transform:translateY(-2px)}
.tour-options>button[aria-pressed="true"],.guided-demo-active .tour-options>button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tour-options>button[aria-pressed="true"] strong,.tour-options>button[aria-pressed="true"]::after{color:#fff}
.tour-options>button[aria-pressed="true"]>svg{background:#ffffff20}
.tour-options>button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.tour-screen{padding:14px 0;min-height:0;min-width:0}
.feature-animation{--scene:var(--story-pink);--petal:#ffb7d7;position:relative;isolation:isolate;width:100%;min-width:0;min-height:360px;display:grid;align-items:center;background:var(--scene);border:0;border-radius:34px 34px 70px 34px;padding:34px 28px;box-shadow:none;color:#382c34}
.feature-animation[data-view="plan"]{--scene:var(--story-emerald);--petal:#73e0bb}
.feature-animation[data-view="mail"]{--scene:var(--story-berry);--petal:#f093bf}
.feature-animation::before,.feature-animation::after{content:"";position:absolute;pointer-events:none;z-index:-1;width:42px;height:80px;border-radius:100% 0 100% 0;background:var(--petal);opacity:.45}
.feature-animation::before{top:14px;right:22px;transform:rotate(28deg)}
.feature-animation::after{bottom:12px;left:18px;transform:rotate(-65deg);width:24px;height:48px}
.feature-animation svg,.iou-example svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* A warm paper note: one IOU, from amount owed to repayment. */
.iou-band{background:#fff0e3;margin:0 0 80px;padding:60px 0;border-block:1px solid #f3ddc9}
.iou-story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,75px);align-items:center}
.iou-story-heading{max-width:420px}
.iou-connection{display:flex;align-items:center;gap:10px;margin-bottom:24px;color:#b13768}
.iou-connection>span{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:#f7bbd1;transform:rotate(-7deg)}
.iou-connection>span:last-child{background:#a9dfc8;color:#216d57;transform:rotate(7deg)}
.iou-connection svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iou-connection>svg{width:23px;height:23px;fill:#d95e8c;stroke:none}
.iou-kicker{font-size:.7rem;letter-spacing:.12em;font-weight:700;color:#9a4a27}
.iou-story-heading h2{font-size:clamp(2rem,3.3vw,3.1rem);line-height:1.2;letter-spacing:-.035em;margin:16px 0 0;color:#9d355c}
.iou-story-heading>p{line-height:1.7;color:#6d5147;max-width:370px;margin:18px 0 0}
.iou-example{position:relative;width:100%;max-width:430px;justify-self:center;background:#fffdf8;border:1px solid #e7c9b4;border-radius:26px;padding:26px;color:#382c34;box-shadow:0 12px 0 -5px #f2d3bd,0 24px 40px -28px #91573666}
.iou-example::before{content:"";position:absolute;pointer-events:none;width:68px;height:21px;top:-11px;left:calc(50% - 34px);background:#e887abcc;transform:rotate(-5deg);border-radius:3px}
.iou-example svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iou-example-header{display:flex;align-items:center;gap:11px;padding-bottom:18px;border-bottom:1px dashed #dfc5b4}
.iou-example-avatar{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:16px;background:#f9c5d9;color:#96335e;font-weight:700}
.iou-example-header strong{display:block;font-size:.95rem}.iou-example-header small{display:block;font-size:.75rem;color:#765c51;margin-top:3px}

.iou-example-stage{padding-top:20px}.iou-example-caption{font-size:.9rem;color:#765c51;margin:0 0 7px}
.iou-example-amount{display:flex;flex-wrap:wrap;align-items:center;gap:14px}.iou-example-amount>strong{font-size:2.5rem;line-height:1.2;letter-spacing:-.035em;color:#a53661}
.iou-example-stage[data-step="2"] .iou-example-amount>strong{color:#206b51}
.iou-example-status{border-radius:30px;background:#ffe0ad;color:#79430c;padding:6px 11px;font-size:.7rem;font-weight:700}
.iou-example-status.paid{color:#1c6249;background:#bce8d2}
.iou-example-detail{min-height:98px;display:flex;align-items:center;padding-block:15px}
.iou-example-dinner,.iou-example-settled{display:flex;align-items:center;gap:9px;font-size:.85rem;color:#765c51;margin:0}.iou-example-settled{color:#206b51}
.iou-example-dinner>svg,.iou-example-settled>svg{box-sizing:content-box;padding:9px;background:#ffe6c4;color:#8d4b1e;border-radius:13px}.iou-example-settled>svg{background:#bce8d2;color:#206b51}
.iou-example-message{display:flex;align-items:flex-start;gap:10px;border-radius:16px 16px 16px 3px;padding:14px;background:#fce0eb;color:#8e3156;width:100%}
.iou-example-message p{margin:0;font-size:.82rem;line-height:1.55}
.iou-example-stage[data-step="1"] .iou-example-message,.iou-example-stage[data-step="2"] .iou-example-settled{animation:iou-arrive .4s ease both}
.iou-example-steps{display:grid;grid-template-columns:1fr 14px 1fr 14px 1fr;align-items:center;gap:4px;border-top:1px dashed #dfc5b4;padding-top:17px}
.iou-example-steps button{--step-color:#9b345e;--step-bg:#fce0eb;border:1px solid transparent;border-radius:12px;background:transparent;min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--step-color);font:700 .76rem Quicksand,sans-serif;padding:8px 4px}
.iou-example-steps button[data-iou-step="1"]{--step-color:#854611;--step-bg:#ffe3bd}
.iou-example-steps button[data-iou-step="2"]{--step-color:#206b51;--step-bg:#bce8d2}
.iou-example-steps button[aria-pressed="true"]{background:var(--step-bg);border-color:var(--step-color)}
.iou-example-steps button:hover{background:var(--step-bg)}.iou-example-steps button:focus-visible{outline:3px solid var(--step-color);outline-offset:3px}
.iou-example-steps .iou-step-arrow{width:14px;color:#9b7560}
@keyframes iou-arrive{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.feature-tour{display:flex;flex-direction:column;gap:18px}.tour-controls,.tour-screen{width:100%}.tour-screen{max-width:560px}.tour-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.tour-options>button{flex-direction:column;text-align:center;padding:16px 8px;gap:10px;min-width:0}.tour-options>button strong{font-size:1rem;line-height:1.4}.tour-options>button small,.tour-options>button::after{display:none}}
@media(max-width:760px){.feature-animation{min-height:320px;padding:28px 22px}.iou-story{grid-template-columns:1fr;gap:36px}.iou-band{padding-block:42px;margin-bottom:55px}.iou-story-heading{max-width:none}.iou-story-heading>p{max-width:100%}.iou-story-heading h2{font-size:2rem}.iou-connection{margin-bottom:18px}}
@media(max-width:400px){.tour-options>button{padding:16px;gap:12px}.tour-options>button>svg{width:24px;height:24px;padding:10px}.tour-options>button strong{font-size:1.1rem}.feature-animation{padding:24px 16px}.simple-spending{padding:20px 14px}.simple-email{padding:24px 10px}.email-path{gap:3px;grid-template-columns:1fr 12px 1fr 12px 1fr}.email-symbol{width:52px;height:60px;border-radius:18px}.email-approved{border-radius:50%}.email-node strong{font-size:.75rem}.email-link{padding-top:18px}.email-link svg{width:12px}.spending-bar{padding-inline:10px}.spending-bar>span{gap:7px}.iou-example{padding:22px}.iou-example-header strong{font-size:.875rem}.iou-example-steps button{gap:5px;font-size:.72rem}.iou-example-steps button svg{width:17px}}
@media(max-width:650px){.tour-options{gap:8px}.tour-options>button{padding:14px 5px;gap:9px;border-radius:18px}.tour-options>button>svg{width:24px;height:24px;padding:10px}.tour-options>button strong{font-size:.82rem}.feature-tour{gap:12px}}
@media(prefers-reduced-motion:reduce){.iou-example *,.tour-options>button{animation:none!important;transition:none!important}.tour-options>button:hover{transform:none}}

/* Content-led section spacing: compact introductions, room for the working demos. */
#main{--section-space:clamp(48px,6vw,80px)}
#main .product-section{padding-block:var(--section-space)}
#main .iou-band{padding-block:clamp(40px,5vw,64px);margin:0}
#main .plans-section{padding-block:var(--section-space)}
#main .skin-section{padding-block:clamp(44px,5vw,68px)}
#main .faq-section{padding-block:var(--section-space)}
#main .guides-teaser{padding-block:32px 44px;border-top:1px solid #eadfe6;gap:24px}
#main .guides-teaser h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.25}
#main .guides-teaser .eyebrow{font-size:.72rem;margin:0 0 10px}
#main .guides-teaser>div{max-width:46ch}
#main .guides-teaser>.button{flex:none}
#main .closing-section{padding-block:clamp(48px,6vw,72px)}
.hero-copy>.hero-release-note,.closing-content>.closing-release-note{font-size:.8125rem;line-height:1.4;color:#716571;margin:12px 0 0;max-width:none}
@media(max-width:650px){#main .guides-teaser{padding-block:28px 36px}.hero-copy>.hero-release-note{margin-top:10px}}