:root {
  color-scheme:light;
  --ink:#203d32;
  --muted:#5a685f;
  --green:#234f3c;
  --coral:#b44735;
  --cream:#f8f9f5;
  --sage:#eaf0e7;
  --line:#dce3d9;
  --ease:cubic-bezier(.22,1,.36,1)
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font:1rem/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%;
  height:auto
}
p,h1,h2,h3,figure {
  margin:0
}
p {
  text-wrap:pretty
}
h1,h2,h3 {
  text-wrap:balance;
  overflow-wrap:anywhere
}
h1,h2 {
  font-weight:550;
  letter-spacing:-.055em;
  line-height:1.06
}
h3 {
  letter-spacing:-.035em;
  line-height:1.2;
  font-weight:500
}
h2 span {
  color:var(--muted)
}
button,a,summary {
  touch-action:manipulation
}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--coral);
  outline-offset:5px
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default
}
a,button,summary {
  min-height:44px
}
.container {
  max-width:1320px;
  padding-inline:64px;
  margin-inline:auto
}
.section {
  padding-block:110px
}
.section-index {
  font-size:.75rem;
  font-weight:550;
  letter-spacing:1.3px;
  line-height:1.5;
  margin-bottom:22px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:1.65rem;
  font-weight:650;
  letter-spacing:-1.2px
}
.brand img {
  width:38px;
  height:38px;
  object-fit:contain
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:106px
}
.site-header nav {
  display:flex;
  gap:28px;
  align-items:center;
  font-size:.8125rem;
  font-weight:500
}
.site-header nav a {
  display:flex;
  align-items:center
}
.header-cta {
  display:inline-flex;
  align-items:center;
  gap:22px;
  border-bottom:1px solid var(--ink);
  font-size:.8125rem;
  font-weight:550
}
.hero {
  text-align:center;
  padding-top:64px;
  padding-bottom:50px
}
.hero-kicker {
  font-size:.875rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px
}
.hero-kicker>span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--coral)
}
h1 {
  font-size:clamp(3.75rem,6.8vw,6rem);
  margin-top:27px;
  line-height:1.02
}
h1>span {
  color:#687c69
}
.hero-intro {
  max-width:690px;
  margin:27px auto 0;
  font-size:1.125rem;
  line-height:1.7;
  color:var(--muted)
}
.hero-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  margin-top:21px
}
.app-store-badge {
  display:inline-flex;
  padding:13px
}
.app-store-badge img {
  width:189px;
  height:auto
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:24px;
  font-size:.875rem;
  border-bottom:1px solid currentColor;
  padding-block:9px
}
.text-link span,.button span,.header-cta span {
  display:inline-block;
  transition:transform 220ms var(--ease)
}
.availability {
  font-size:.75rem;
  color:var(--muted);
  margin-top:6px
}
.availability>span {
  margin-inline:12px;
  color:#899688
}
.availability a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:underline;
  text-underline-offset:4px
}
.product-demo {
  padding-bottom:100px
}
.demo-shell {
  border-radius:32px;
  background:radial-gradient(ellipse at 50% 20%,#dcebdc,transparent 65%),radial-gradient(ellipse at 90% 100%,#fbe6dc,transparent 65%),#f5f8f2;
  overflow:clip
}
.demo-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:28px 32px 0
}
.demo-toolbar[hidden] {
  display:none
}
.demo-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.demo-tabs button {
  border:1px solid transparent;
  border-radius:99px;
  background:transparent;
  padding:10px 18px;
  font-size:.75rem;
  color:var(--muted);
  position:relative;
  overflow:visible;
  overflow-wrap:anywhere
}
.demo-tabs button span {
  margin-left:8px;
  font-size:.875rem
}
.demo-tabs button[aria-selected=true] {
  background:#fff;
  color:var(--ink);
  border-color:#dbe3d4
}
.demo-tabs button[aria-selected=true]::after {
  content:'';
  height:2px;
  position:absolute;
  bottom:0;
  left:15px;
  right:15px;
  background:var(--green);
  transform-origin:left;
  animation:demo-timer 7s linear forwards
}
.demo-shell[data-paused=true] .demo-tabs button::after {
  animation-play-state:paused
}
.demo-pause {
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:.75rem;
  padding:8px
}
.demo-panels {
  position:relative
}
.demo-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,300px) minmax(0,1fr);
  align-items:center;
  gap:42px;
  padding:35px 50px 40px
}
.demo-panel[hidden] {
  display:none
}
.demo-copy h2 {
  font-size:2.625rem;
  font-weight:500
}
.demo-copy>p:last-child {
  font-size:.9375rem;
  color:var(--muted);
  margin-top:22px;
  line-height:1.85
}
.screen-wrap {
  position:relative;
  border:7px solid #fff;
  border-radius:38px;
  overflow:hidden;
  background:#f9f7f1;
  outline:1px solid #00000014;
  box-shadow:0 18px 48px #203d3214
}
.screen-wrap img {
  width:100%;
  height:auto;
  aspect-ratio:440/956;
  object-fit:cover
}
.demo-aside {
  padding-left:14px
}
.aside-mark {
  display:block;
  font-size:2.5rem;
  line-height:1;
  color:var(--green);
  margin-bottom:25px
}
.demo-aside h3 {
  font-size:1.625rem;
  font-weight:450
}
.demo-aside p {
  font-size:.875rem;
  color:var(--muted);
  line-height:1.8;
  margin-top:18px
}
.screen-note {
  display:block;
  font-size:.75rem;
  color:var(--muted);
  line-height:1.6;
  margin-top:40px
}
.demo-caption {
  text-align:center;
  font-size:.8125rem;
  color:var(--muted);
  margin-top:25px
}
.demo-shell:not([data-enhanced]) .demo-panel+.demo-panel {
  border-top:1px solid var(--line)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:var(--ink);
  color:white;
  border-radius:7px;
  padding:15px 22px;
  font-size:.875rem;
  font-weight:500;
  transition:background 200ms var(--ease),transform 200ms var(--ease)
}
.button-light {
  background:#f7f8f0;
  color:var(--ink)
}
.marketplace {
  background:var(--ink);
  color:#f8f9f3
}
.marketplace-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:100px;
  align-items:center
}
.market-copy>h2 {
  font-size:3.5rem
}
.market-copy>h2 span {
  color:#d7bca8
}
.market-copy>p:not(.section-index) {
  font-size:1rem;
  color:#d5dfd0;
  margin-top:25px;
  max-width:470px
}
.connection-steps {
  list-style:none;
  padding:0;
  margin:30px 0
}
.connection-steps li {
  display:flex;
  gap:22px;
  border-top:1px solid #ffffff24;
  padding:20px 0
}
.connection-steps li>span {
  font-size:.75rem;
  color:#d7bca8;
  padding-top:3px
}
.connection-steps h3 {
  font-size:1.25rem
}
.connection-steps p {
  font-size:.875rem;
  color:#d5dfd0;
  line-height:1.7;
  margin-top:8px
}
.market-visual {
  align-self:stretch;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:25px;
  background:#dfe8d7;
  border-radius:28px;
  color:var(--ink);
  padding:30px 35px;
  overflow:hidden
}
.market-visual-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  font-size:.875rem
}
.market-visual-head>span:last-child {
  font-size:1.75rem
}
.market-visual .screen-wrap {
  width:260px;
  max-width:100%
}
.market-visual>p {
  font-size:.875rem
}
.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:100px;
  align-items:end;
  margin-bottom:45px
}
.section-heading .section-index {
  grid-column:1/-1
}
.section-heading h2 {
  font-size:3.5rem
}
.section-heading>p:last-child {
  font-size:1rem;
  line-height:1.8;
  color:var(--muted);
  max-width:390px;
  padding-bottom:3px
}
.support-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:20px
}
.support-grid article {
  background:#f1f4ee;
  border-radius:22px;
  padding:30px;
  min-width:0;
  overflow:hidden
}
.support-grid article:nth-child(2) {
  background:#f8eee8
}
.support-grid article:nth-child(3) {
  background:#ebf0ed
}
.feature-number {
  display:block;
  font-size:.6875rem;
  letter-spacing:.8px;
  font-weight:550;
  margin-bottom:25px
}
.support-grid h3 {
  font-size:1.875rem
}
.support-grid p {
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.8;
  margin-top:18px
}
.support-grid small {
  display:block;
  font-size:.75rem;
  color:var(--muted);
  margin-top:22px
}
.feature-glyph {
  display:block;
  font-size:3rem;
  margin:32px 0 40px;
  color:var(--green)
}
.program-art {
  background:#fff;
  border-radius:14px;
  padding:22px;
  margin-top:28px;
  font-size:.75rem;
  transform:rotate(-3deg)
}
.program-art>span {
  font-size:.875rem;
  font-weight:550
}
.program-art>div {
  display:grid;
  grid-template-columns:60px 1fr;
  gap:7px;
  margin-top:16px
}
.program-art b {
  font-weight:500;
  grid-row:span 2
}
.program-art i {
  height:5px;
  background:#dce7d7;
  align-self:center;
  border-radius:3px
}
.program-art i:last-child {
  width:65%;
  background:#eceee6
}
.professional {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:100px;
  align-items:center;
  padding-top:0
}
.pro-visual {
  background:#f6eee7;
  border-radius:28px;
  padding:40px 40px 0;
  max-height:650px;
  overflow:hidden;
  position:relative
}
.pro-visual .screen-wrap {
  max-width:280px;
  margin:auto
}
.pro-visual-label {
  display:block;
  text-align:center;
  background:#fff;
  padding:18px;
  font-size:.8125rem;
  position:absolute;
  bottom:0;
  inset-inline:0
}
.pro-copy h2 {
  font-size:3.5rem
}
.pro-copy>p:not(.section-index) {
  font-size:1rem;
  color:var(--muted);
  line-height:1.85;
  margin-top:25px
}
.pro-list {
  list-style:none;
  padding:0;
  margin:26px 0 30px
}
.pro-list li {
  border-top:1px solid var(--line);
  padding:14px 0;
  font-size:.9375rem
}
.pro-list li::before {
  content:'↗';
  margin-right:14px;
  color:var(--green)
}
.pro-contact {
  display:block;
  width:fit-content;
  font-size:.8125rem;
  color:var(--muted);
  margin-top:17px;
  padding-block:10px;
  overflow-wrap:anywhere
}
.privacy-band {
  background:#edf1e7;
  padding-block:60px
}
.privacy-inner {
  display:grid;
  grid-template-columns:50px 1fr 1fr;
  gap:35px;
  align-items:start
}
.privacy-mark {
  font-size:3rem;
  line-height:1
}
.privacy-inner h2 {
  font-size:2.25rem;
  letter-spacing:-.04em;
  line-height:1.2
}
.privacy-inner p {
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.8
}
.privacy-inner .text-link {
  margin-top:16px
}
.faq {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:100px
}
.faq h2 {
  font-size:3.5rem
}
.faq-list {
  border-top:1px solid var(--line);
  min-width:0
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  padding:23px 0;
  list-style:none;
  cursor:pointer;
  font-size:1rem;
  font-weight:500
}
summary::-webkit-details-marker {
  display:none
}
summary span {
  font-size:1.5rem;
  flex-shrink:0;
  transition:transform 250ms var(--ease);
  font-weight:300
}
details[open] summary span {
  transform:rotate(45deg)
}
details p {
  font-size:.9375rem;
  line-height:1.8;
  color:var(--muted);
  padding:0 28px 25px 0
}
details p a {
  text-decoration:underline;
  text-underline-offset:4px;
  overflow-wrap:anywhere
}
.contact {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px;
  border-top:1px solid var(--line);
  padding-top:80px
}
.contact h2 {
  font-size:3rem
}
.contact>div>p:last-child {
  font-size:.9375rem;
  color:var(--muted);
  max-width:400px;
  margin-top:23px
}
.contact-links {
  align-self:center
}
.contact-links>a {
  display:block;
  position:relative;
  padding:24px 35px 24px 0;
  border-bottom:1px solid var(--line)
}
.contact-links span {
  display:block;
  font-size:.75rem;
  color:var(--muted)
}
.contact-links strong {
  display:block;
  font-size:clamp(1.125rem,1.8vw,1.5rem);
  font-weight:500;
  letter-spacing:-.6px;
  overflow-wrap:anywhere;
  margin-top:8px
}
.contact-links i {
  position:absolute;
  right:0;
  top:45%;
  font-size:1.25rem;
  font-style:normal
}
.final-cta {
  padding-block:50px 65px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.final-cta h2 {
  font-size:3rem
}
.site-footer {
  border-top:1px solid var(--line);
  padding-top:40px;
  padding-bottom:25px
}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.footer-top>p {
  font-size:.875rem;
  color:var(--muted)
}
.footer-top>a:last-child {
  font-size:.8125rem;
  display:flex;
  align-items:center;
  overflow-wrap:anywhere
}
.legal-links {
  display:flex;
  flex-wrap:wrap;
  gap:4px 22px;
  margin-top:30px
}
.legal-links>a {
  font-size:.75rem;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--muted)
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:25px;
  border-top:1px solid var(--line);
  padding-top:25px;
  margin-top:18px;
  font-size:.6875rem;
  color:var(--muted)
}
.footer-bottom p {
  max-width:420px
}
.footer-bottom a {
  overflow-wrap:anywhere
}
.skip {
  position:fixed;
  top:-100px;
  left:24px;
  padding:12px;
  background:var(--ink);
  color:#fff;
  z-index:10
}
.skip:focus {
  top:12px
}
.section>* {
  min-width:0
}
p,summary,.text-link {
  overflow-wrap:anywhere
}

@keyframes demo-timer {
  from {
    transform:scaleX(0)
  }
  to {
    transform:scaleX(1)
  }

}

@media(hover:hover) {
  a:hover:not(.app-store-badge) {
    color:var(--coral)
  }
  .button:hover {
    background:#365e48;
    color:#fff;
    transform:translateY(-2px)
  }
  .button-light:hover {
    background:#fff;
    color:var(--ink)
  }
  .text-link:hover span,.header-cta:hover span {
    transform:translate(3px,-3px)
  }
  .demo-tabs button:hover {
    background:#ffffff80
  }
  .demo-pause:hover {
    color:var(--coral)
  }

}

.button:active {
  transform:scale(.96)
}

@media(max-width:1100px) {
  .container {
    padding-inline:36px
  }
  .site-header nav {
    gap:18px;
    font-size:.75rem
  }
  .demo-panel {
    grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);
    gap:25px;
    padding-inline:32px
  }
  .demo-copy h2 {
    font-size:2.25rem
  }
  .demo-aside h3 {
    font-size:1.375rem
  }
  .marketplace-grid,.professional,.faq {
    gap:55px
  }
  .market-copy>h2,.pro-copy h2 {
    font-size:3rem
  }
  .market-visual {
    padding-inline:22px
  }
  .support-grid {
    gap:15px
  }
  .support-grid article {
    padding:24px
  }
  .support-grid h3 {
    font-size:1.625rem
  }
  .privacy-inner {
    grid-template-columns:40px 1fr 1fr;
    gap:24px
  }
  .contact {
    gap:45px
  }
  .section-heading {
    column-gap:50px
  }

}

@media(max-width:780px) {
  .container {
    padding-inline:24px
  }
  .section {
    padding-block:72px
  }
  .site-header {
    min-height:85px;
    flex-wrap:wrap;
    gap:12px
  }
  .site-header nav {
    order:3;
    width:100%;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    padding-bottom:12px
  }
  .site-header nav a {
    font-size:.6875rem
  }
  .brand {
    font-size:1.5rem
  }
  .header-cta {
    font-size:.75rem;
    gap:14px
  }
  .hero {
    padding-top:32px;
    padding-bottom:30px
  }
  h1 {
    font-size:clamp(2.75rem,8.8vw,4.25rem);
    margin-top:20px
  }
  .hero-kicker {
    font-size:.75rem
  }
  .hero-intro {
    font-size:1rem;
    margin-top:23px
  }
  .hero-intro br {
    display:none
  }
  .hero-actions {
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px
  }
  .hero-actions .text-link {
    font-size:.8125rem
  }
  .availability {
    font-size:.6875rem
  }
  .availability>span {
    margin-inline:8px
  }
  .product-demo {
    padding-bottom:60px;
    padding-inline:12px
  }
  .demo-shell {
    border-radius:24px
  }
  .demo-toolbar {
    padding:18px 14px 0;
    flex-wrap:wrap;
    gap:8px
  }
  .demo-tabs {
    width:100%;
    justify-content:center;
    gap:3px
  }
  .demo-tabs button {
    padding:9px 10px;
    font-size:.625rem
  }
  .demo-tabs button span {
    font-size:.6875rem;
    margin-left:4px
  }
  .demo-pause {
    margin-left:auto;
    font-size:.6875rem;
    min-height:40px
  }
  .demo-panel {
    grid-template-columns:minmax(0,1fr);
    padding:17px 24px 28px;
    gap:25px;
    text-align:center
  }
  .demo-copy .section-index {
    display:none
  }
  .demo-copy h2 {
    font-size:2rem
  }
  .demo-copy h2 br {
    display:none
  }
  .demo-copy>p:last-child {
    font-size:.875rem;
    max-width:420px;
    margin:15px auto 0
  }
  .demo-panel .screen-wrap {
    width:260px;
    max-width:90%;
    margin:auto
  }
  .demo-aside {
    padding:0
  }
  .demo-aside .aside-mark,.demo-aside h3,.demo-aside>p {
    display:none
  }
  .screen-note {
    margin:0;
    font-size:.6875rem
  }
  .screen-note br {
    display:none
  }
  .demo-caption {
    padding-inline:12px;
    font-size:.75rem
  }
  .marketplace-grid,.professional,.faq,.contact {
    grid-template-columns:minmax(0,1fr);
    gap:38px
  }
  .market-copy>h2,.pro-copy h2 {
    font-size:2.625rem
  }
  .market-copy>p:not(.section-index) {
    font-size:.9375rem
  }
  .market-visual {
    max-height:620px;
    padding:25px 25px 0
  }
  .market-visual .screen-wrap {
    width:250px
  }
  .market-visual>p {
    background:#dfe8d7;
    position:absolute;
    bottom:0;
    padding:17px;
    inset-inline:0;
    text-align:center;
    font-size:.8125rem
  }
  .section-heading {
    display:block;
    margin-bottom:30px
  }
  .section-heading h2 {
    font-size:2.625rem
  }
  .section-heading>p:last-child {
    font-size:.9375rem;
    margin-top:22px
  }
  .support-grid {
    grid-template-columns:minmax(0,1fr);
    gap:16px
  }
  .support-grid article {
    padding:28px
  }
  .support-grid h3 {
    font-size:2rem
  }
  .feature-glyph {
    font-size:2.5rem;
    margin:0 0 20px
  }
  .support-wide {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
    column-gap:20px
  }
  .support-wide .feature-number {
    grid-column:1/-1
  }
  .support-wide p {
    grid-column:1
  }
  .program-art {
    grid-column:2;
    grid-row:2/4;
    margin:0 -8px 0 0;
    padding:16px;
    align-self:center
  }
  .program-art>div {
    grid-template-columns:1fr;
    margin-top:13px
  }
  .professional {
    padding-top:0
  }
  .pro-visual {
    order:2;
    max-height:530px;
    padding:30px 30px 0
  }
  .pro-copy>p:not(.section-index) {
    font-size:.9375rem
  }
  .pro-list li {
    font-size:.875rem
  }
  .privacy-band {
    padding-block:45px
  }
  .privacy-inner {
    grid-template-columns:minmax(0,1fr);
    gap:22px
  }
  .privacy-mark {
    font-size:2.5rem
  }
  .privacy-inner h2 {
    font-size:2rem
  }
  .privacy-inner p {
    font-size:.875rem
  }
  .faq h2 {
    font-size:2.625rem
  }
  .faq h2 br {
    display:none
  }
  summary {
    font-size:.9375rem;
    padding-block:20px
  }
  .contact {
    padding-top:55px
  }
  .contact h2 {
    font-size:2.5rem
  }
  .contact-links strong {
    font-size:1.3rem
  }
  .contact-links>a {
    padding-block:22px
  }
  .final-cta {
    display:block;
    padding-block:20px 55px
  }
  .final-cta h2 {
    font-size:2.5rem
  }
  .final-cta .button {
    margin-top:25px
  }
  .footer-top {
    flex-wrap:wrap;
    gap:12px
  }
  .footer-top>p {
    order:3;
    width:100%
  }
  .footer-top>a:last-child {
    font-size:.75rem
  }
  .legal-links {
    gap:0 18px;
    margin-top:22px
  }
  .footer-bottom {
    display:block
  }
  .footer-bottom p {
    margin-top:12px
  }
  .footer-bottom a {
    display:inline-flex;
    align-items:center;
    margin-top:8px;
    font-size:.75rem
  }

}

@media(max-width:370px) {
  .container {
    padding-inline:18px
  }
  .site-header nav {
    gap:6px 13px
  }
  .hero h1 {
    font-size:2.65rem
  }
  .hero-actions {
    gap:0
  }
  .product-demo {
    padding-inline:10px
  }
  .demo-tabs button {
    padding-inline:7px
  }
  .demo-tabs button span {
    font-size:.625rem
  }
  .demo-panel {
    padding-inline:18px
  }
  .support-wide {
    display:block
  }
  .program-art {
    margin:25px 0 0
  }
  .program-art>div {
    grid-template-columns:60px 1fr
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .button:hover,.text-link:hover span,.header-cta:hover span {
    transform:none
  }
  .demo-tabs button[aria-selected=true]::after {
    transform:scaleX(1)
  }

}

/* Small utility copy stays legible on narrow screens. */
.site-header nav a, .availability, .demo-tabs button, .demo-tabs button span, .demo-pause, .screen-note, .feature-number, .footer-bottom { font-size: .75rem; }
@media(max-width:370px) { .demo-tabs button { padding-inline:5px; } .demo-tabs button span { font-size:.6875rem; } }
.hero-intro { margin-top: 20px; }
.market-copy > p:not(.section-index), .pro-copy > p:not(.section-index) { margin-top: 22px; }
@media(min-width:781px) { .privacy-inner { grid-template-columns: 3rem minmax(0,1fr) minmax(0,1fr); } }

/* Interface-craft: stable panels, keyboard focus, and an honest image-failure state. */
.demo-shell[data-enhanced] .demo-panels { display: grid; }
.demo-shell[data-enhanced] .demo-panel { grid-area: 1 / 1; }
.demo-shell[data-enhanced] .demo-panel[hidden] { display: grid; visibility: hidden; pointer-events: none; }
.demo-panel:focus-visible { outline-offset: -6px; }
.demo-tabs button[aria-selected=true]::after { animation: none; transform: scaleX(1); }
.screen-wrap { aspect-ratio: 440 / 956; }
.screen-wrap[data-failed] { display: grid; place-items: center; background: #edf1e7; padding: 24px; box-shadow: none; }
.screen-fallback { font-size: .875rem; line-height: 1.8; color: var(--ink); text-align: center; }
.pause-label { display: inline; }
/* These panels sit on an even tonal surface; no decorative elevation is needed. */
.screen-wrap { box-shadow: none; }
@media(max-width:780px) {
  .site-header nav a[href="#uygulama"] { display: none; }
  .hero { padding-top: 22px; padding-bottom: 20px; }
  .hero-actions .text-link { font-size: .75rem; gap: 12px; }
  .demo-toolbar { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 8px; }
  .demo-toolbar[hidden] { display: none; }
  .demo-tabs { width: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; }
  .demo-tabs button { min-width: 0; padding: 9px 5px; }
  .demo-tabs button span { margin: 0; font-size: .75rem; }
  .demo-pause { width: 44px; height: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .demo-pause .pause-label { display: none; }
  .demo-copy { display: contents; }
  .demo-copy h2 { grid-row: 1; font-size: 1.875rem; }
  .demo-panel > .screen-wrap { grid-row: 2; }
  .demo-copy > p:last-child { grid-row: 3; margin-top: 0; }
  .demo-aside { grid-row: 4; }
}
.screen-wrap img[hidden] { display: none; }

@media(max-width:780px) { .support-wide { display: block; } }
@media(max-width:370px) { .hero h1 { font-size: 2.1rem; } }
/* Product-led hero and the three real steps of a dietitian connection. */
html { scroll-padding-top: 100px; }
.site-header { position: relative; z-index: 5; }
.hero-layered { position: relative; isolation: isolate; max-width: none; padding: 65px 0 0; margin: 0 12px; overflow: clip; border-radius: 32px; background: #f3f6f0; }
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 20% 65%,#e0eacf 0,transparent 50%),radial-gradient(ellipse at 85% 55%,#f8dfd4 0,transparent 48%),linear-gradient(#f6f8f3,#edf3ed 65%,#fff); }
.hero-content { position: relative; z-index: 3; text-align: center; }
.hero-layered h1 { font-size: clamp(2.65rem,5.6vw,5rem); line-height: 1.04; letter-spacing: -.05em; font-weight: 600; max-width: 1050px; margin: 0 auto; color: var(--ink); }
.hero-layered .hero-intro { font-size: clamp(1rem,1.55vw,1.3rem); line-height: 1.55; margin: 25px auto 0; max-width: 700px; }
.hero-layered .hero-actions { justify-content: center; margin-top: 26px; }
.hero-layered .availability { margin-top: 19px; }
.hero-stage { position: relative; width: min(1120px,100%); height: 700px; margin: 44px auto 0; }
.hero-device { position: absolute; width: 270px; transform-origin: 50% 60%; margin: 0; }
.device-shell { background: #faf8f1; border: 7px solid #fff; border-radius: 39px; overflow: hidden; outline: 1px solid #dce1d9; }
.device-shell img { width: 100%; height: auto; }
.hero-device-home { width: 314px; left: calc(50% - 157px); top: 0; z-index: 3; }
.hero-device-photo { left: calc(50% - 430px); top: 72px; rotate: -10deg; z-index: 1; }
.hero-device-message { left: calc(50% + 170px); top: 92px; rotate: 10deg; z-index: 2; }
.hero-device figcaption { text-align: center; color: var(--ink); font-size: .875rem; margin-top: 18px; font-weight: 500; }
.hero-detail { position: absolute; z-index: 4; left: calc(50% + 130px); top: 400px; width: 255px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid #dce3d9; }
.hero-detail > span { font-size: .65rem; letter-spacing: .08em; color: var(--muted); }
.hero-detail p { font-size: 1.35rem; font-weight: 500; line-height: 1.2; letter-spacing: -.03em; margin-top: 9px; }
.hero-detail a { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: .8rem; border-top: 1px solid var(--line); padding-top: 8px; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; z-index: 4; padding-block: 22px 30px; font-size: .75rem; color: var(--muted); }
.hero-bottom a { display: inline-flex; align-items: center; gap: 20px; }
.motion-toggle { border: 1px solid var(--line); border-radius: 99px; padding: 7px 15px; background: #fff; color: var(--ink); font-size: .75rem; }
.motion-toggle[hidden] { display: none; }
.product-demo { padding-top: 110px; }
.dietitian-journey { background: #183e30; color: #fff; margin-top: 110px; overflow: clip; }
.journey-heading { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 80px; align-items: end; margin-bottom: 48px; }
.journey-heading .section-index { grid-column: 1/-1; color: #bed1c4; }
.journey-heading h2 { font-size: clamp(2.5rem,4.8vw,4.1rem); letter-spacing: -.045em; font-weight: 600; }
.journey-heading > p:last-child { color: #d1dfd5; font-size: 1.05rem; max-width: 450px; padding-bottom: 4px; }
.journey-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding: 0; margin: 0; list-style: none; }
.journey-step { min-width: 0; color: var(--ink); background: #f1f5ee; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; }
.journey-copy { padding: 28px 28px 24px; }
.journey-number { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; margin-bottom: 25px; color: #456450; }
.journey-number > span { font-size: .65rem; letter-spacing: .08em; }
.journey-copy h3 { font-size: clamp(1.55rem,2.25vw,2rem); line-height: 1.08; font-weight: 550; letter-spacing: -.04em; margin-bottom: 18px; }
.journey-copy p { font-size: .875rem; line-height: 1.65; color: var(--muted); }
.journey-art { margin-top: auto; position: relative; height: 360px; overflow: hidden; background: linear-gradient(160deg,#dbe7d7,#eaf0e6); }
.journey-art .device-shell { width: 245px; position: absolute; top: 35px; left: calc(50% - 122px); border-width: 5px; border-radius: 31px; rotate: -5deg; }
.journey-message { background: linear-gradient(145deg,#eee7df,#f5d8cc); }
.journey-message .device-shell { rotate: 5deg; top: 25px; }
.journey-connected { background: linear-gradient(145deg,#e1e4ee,#d8dce7); }
.journey-connected .device-shell { rotate: -4deg; top: 35px; }
.journey-image { position: absolute; top: 80px; left: 20px; width: calc(100% - 40px); height: 110px; overflow: hidden; border-radius: 22px; rotate: -6deg; background: #10101e; }
.journey-image img { width: 100%; position: absolute; top: 0; transform: translateY(-19.4%); }
.journey-callout { position: absolute; bottom: 24px; left: 20px; right: 20px; padding: 15px 18px; background: #fff; border-radius: 16px; font-size: .8rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
.journey-art-note { position: absolute; top: 220px; width: 100%; text-align: center; font-size: .75rem; color: #456450; }
.journey-footer { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 38px; }
.journey-footer > p { color: #c7d7cc; font-size: .75rem; line-height: 1.8; }
.journey-footer .button { color: #183e30; background: #fff; max-width: 100%; }
@media(min-width:1600px) { .hero-stage { height: 730px; } }
@media(max-width:900px) {
 .hero-layered { padding-top: 48px; }
 .hero-stage { height: 580px; }
 .hero-device-home { width: 260px; left: calc(50% - 130px); }
 .hero-device-photo { width: 225px; left: calc(50% - 320px); }
 .hero-device-message { width: 225px; left: calc(50% + 90px); }
 .hero-detail { top: 345px; left: calc(50% + 25px); width: 220px; }
 .journey-heading { column-gap: 35px; }
 .journey-grid { gap: 12px; }
 .journey-copy { padding: 24px 18px; }
 .journey-art .device-shell { width: 205px; left: calc(50% - 102px); }
 .journey-image { left: 12px; width: calc(100% - 24px); height: 85px; }
 .journey-callout { left: 12px; right: 12px; padding: 12px; }
}
@media(max-width:650px) {
 .hero-layered { margin-inline: 8px; border-radius: 24px; padding-top: 38px; }
 .hero-content { padding-inline: 16px; }
 .hero-layered h1 { font-size: clamp(2rem,7.8vw,3rem); letter-spacing: -.055em; line-height: 1.08; }
 .hero-layered .hero-intro { font-size: 1rem; margin-top: 20px; max-width: 360px; }
 .hero-layered .hero-intro br { display: none; }
 .hero-layered .hero-actions { margin-top: 24px; }
 .hero-stage { margin-top: 35px; height: 455px; }
 .hero-device-home { width: 196px; left: calc(50% - 98px); }
 .hero-device-photo { width: 166px; left: calc(50% - 228px); top: 65px; rotate: -12deg; }
 .hero-device-message { width: 166px; left: calc(50% + 63px); top: 85px; rotate: 12deg; }
 .device-shell { border-width: 4px; border-radius: 26px; }
 .hero-device figcaption { display: none; }
 .hero-detail { top: 285px; left: auto; right: 16px; width: 185px; padding: 15px 17px; border-radius: 16px; }
 .hero-detail > span { font-size: .55rem; }
 .hero-detail p { font-size: 1.1rem; }
 .hero-detail a { font-size: .75rem; }
 .hero-bottom { flex-wrap: wrap; justify-content: center; gap: 8px 20px; text-align: center; padding: 0 18px 24px; }
 .hero-bottom > p { width: 100%; }
 .hero-bottom a { gap: 8px; }
 .motion-toggle { font-size: .6875rem; padding-inline: 12px; }
 .product-demo { padding-top: 65px; }
 .dietitian-journey { margin-top: 65px; }
 .journey-heading { display: block; margin-bottom: 32px; }
 .journey-heading h2 { font-size: 2.55rem; }
 .journey-heading > p:last-child { margin-top: 24px; font-size: 1rem; }
 .journey-grid { grid-template-columns: 1fr; gap: 24px; }
 .journey-copy { padding: 26px; }
 .journey-copy h3 { font-size: 2rem; }
 .journey-copy p { font-size: .9375rem; }
 .journey-art { height: 350px; }
 .journey-art .device-shell { width: 250px; left: calc(50% - 125px); }
 .journey-image { height: 115px; top: 75px; left: 24px; width: calc(100% - 48px); }
 .journey-art-note { top: 210px; }
 .journey-callout { left: 20px; right: 20px; font-size: .875rem; }
 .journey-footer { flex-direction: column; align-items: flex-start; gap: 24px; }
 .journey-footer .button { font-size: .875rem; }
}
@media(prefers-reduced-motion:reduce) { [data-depth] { transform: none !important; } }
html[data-motion=paused] [data-depth] { transform: none !important; }
/* Let explanatory copy grow independently of the device composition. */
.hero-stage { height: auto; min-height: 700px; padding-top: 400px; padding-bottom: 80px; }
.hero-detail { position: relative; top: auto; left: auto; margin-left: calc(50% + 130px); }
.hero-device figcaption { display: none; }
.hero-detail > span, .journey-number > span, .motion-toggle { font-size: .75rem; }
.journey-callout { background: #f8faf6; border-radius: 0; border-left: 2px solid #456450; font-weight: 400; padding: 10px 14px; }
.profile-outline { margin: 35px 26px 0; padding: 24px; background: #fff; border-radius: 20px; rotate: -4deg; }
.profile-monogram { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #234f3c; color: #fff; font-size: 1rem; }
.profile-outline > p { font-size: 1.15rem; font-weight: 500; margin-top: 14px; }
.profile-outline ul { list-style: none; padding: 0; margin: 16px 0 0; font-size: .8rem; color: var(--muted); }
.profile-outline li + li { border-top: 1px solid var(--line); margin-top: 7px; padding-top: 7px; }
.journey-profile { min-height: 360px; height: auto; padding-bottom: 50px; }
.journey-profile .journey-art-note { top: auto; bottom: 16px; }
@media(max-width:900px) {
 .hero-stage { min-height: 580px; padding-top: 345px; padding-bottom: 50px; }
 .hero-detail { margin-left: calc(50% + 25px); }
 .profile-outline { margin-inline: 16px; padding: 18px; }
}
@media(max-width:650px) {
 .hero-stage { min-height: 455px; padding-top: 285px; padding-bottom: 24px; }
 .hero-detail { margin-left: auto; margin-right: 16px; right: auto; }
 .hero-detail > span, .motion-toggle { font-size: .75rem; }
 .profile-outline { margin-inline: 26px; padding: 24px; }
 .journey-profile { min-height: 350px; }
}
.device-shell { aspect-ratio: 440 / 956; }
.device-shell[data-failed] { display: flex; align-items: center; padding: 20px; }
.device-shell[data-failed] .screen-fallback { font-size: .8rem; line-height: 1.5; }
/* At larger text sizes tabs wrap as whole controls, not isolated letters. */
@media(max-width:650px) {
 .demo-tabs { display: flex; flex-wrap: wrap; }
 .demo-tabs button { flex: 1 1 4rem; }
 .hero-detail { width: min(255px,calc(100% - 32px)); }
}
.journey-profile { padding-bottom: 24px; }
.journey-profile .journey-art-note { position: relative; display: block; top: auto; bottom: auto; margin-top: 35px; padding-inline: 20px; }

/* Discoverable public tools navigation and explicit return paths. */
.site-header{flex-wrap:wrap}
.site-header nav{flex-wrap:wrap;min-width:0}
.site-header nav .nav-tools{padding:8px 14px;min-height:44px;border-radius:8px;background:var(--sage);font-weight:650;color:var(--ink)}
.page-return{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding-block:20px}
.page-return a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.page-return a:first-child{font-weight:600}
.page-return a:not(:first-child){color:var(--muted)}
@media(max-width:1100px){.site-header nav{order:3;flex-basis:100%;justify-content:center;gap:8px 16px;padding-bottom:12px}}
@media(max-width:780px){.page-return{padding-block:12px}.site-header nav .nav-tools{font-size:.8125rem}}

.tool-result .result-back{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;text-decoration:underline;text-underline-offset:4px;font-weight:600}