@font-face {
  font-family:'Figtree';
  src:url('/assets/fonts/Figtree-VF.woff2') format('woff2');
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
}
@font-face {
  font-family:'Figtree';
  src:url('/assets/fonts/Figtree-Italic-VF.woff2') format('woff2');
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
}
/* Bloomgrove: botanical editorial, built on the native app's ivory / forest palette. */
:root {
  --paper:#f6f3ea;
  --white:#fffdf7;
  --ink:#193e32;
  --green:#235d47;
  --muted:#526457;
  --sage:#e4e9dc;
  --pale:#eef0e7;
  --line:#ccd2c2;
  --clay:#8d543c;
  --forest:#173f33;
  --display:'Figtree',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Figtree',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1240px;
  --gutter:clamp(22px,4.5vw,72px)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:104px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased
}
img {
  display:block;
  max-width:100%;
  height:auto
}
picture {
  display:block
}
a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:4px
}
a:hover {
  text-decoration-color:var(--clay)
}
button,input {
  font:inherit
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--clay);
  outline-offset:6px;
  border-radius:4px
}
figure,p,h1,h2,h3,ul,ol {
  margin:0
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:550;
  line-height:1.07;
  letter-spacing:-.045em;
  text-wrap:balance
}
h1 {
  font-size:clamp(58px,6.9vw,100px)
}
h2 {
  font-size:clamp(42px,4.7vw,68px)
}
h3 {
  font-size:32px
}
em {
  font-weight:400;
  color:var(--green)
}
p {
  color:var(--muted)
}
p+p {
  margin-top:16px
}
ul,ol {
  padding:0
}
::selection {
  background:#d8dfc8;
  color:#173f33
}
.wrap {
  width:min(var(--wrap),calc(100% - var(--gutter)*2));
  margin-inline:auto
}
.section-space {
  padding-block:120px
}
.eyebrow {
  font:600 11px/1.6 var(--sans);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:24px
}
.intro {
  font-size:19px;
  line-height:1.7
}
.fine {
  font-size:13px;
  line-height:1.7
}
.text-link {
  display:inline-block;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  padding-block:12px;
  border-bottom:1px solid currentColor
}
.text-link span {
  margin-left:18px;
  display:inline-block;
  transition:transform .2s
}
.text-link:hover span {
  transform:translateX(4px)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:52px;
  padding:15px 23px;
  background:var(--green);
  color:var(--white);
  border:1px solid var(--green);
  border-radius:5px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  transition:background .2s,transform .2s
}
.button:hover {
  background:#153d2e;
  border-color:#153d2e;
  transform:translateY(-2px)
}
.button-outline {
  background:transparent;
  color:var(--green)
}
.button-outline:hover {
  background:var(--sage);
  color:var(--ink);
  border-color:var(--green)
}
.skip {
  position:fixed;
  z-index:20;
  left:20px;
  top:-100px;
  padding:12px 22px;
  color:var(--white);
  background:var(--forest)
}
.skip:focus {
  top:12px
}
.site-head {
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(246,243,234,.97);
  border-bottom:1px solid rgba(25,62,50,.13)
}
.header-inner {
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.identity {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  font:550 27px/1 var(--display);
  letter-spacing:-.045em;
  flex-shrink:0
}
.identity img {
  border-radius:10px
}
.site-head nav {
  display:flex;
  gap:28px;
  align-items:center
}
.site-head nav a {
  font-size:12px;
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap
}
.site-head nav a:hover {
  color:var(--clay)
}
.site-head .nav-cta {
  border:1px solid #9aa991;
  border-radius:5px;
  padding:10px 17px;
  gap:20px
}
.hero {
  display:grid;
  grid-template-columns:1.03fr 1fr;
  gap:4%;
  padding-block:64px 88px;
  align-items:center;
  min-height:790px
}
.hero-copy {
  position:relative;
  z-index:1
}
.hero .eyebrow {
  letter-spacing:.12em;
  margin-bottom:28px;
  white-space:nowrap
}
.tiny-leaf {
  font:28px/0 var(--display);
  vertical-align:-3px;
  margin-right:6px
}
.hero h1 {
  max-width:650px
}
.hero h1 em {
  display:block
}
.hero .intro {
  max-width:435px;
  margin-top:28px;
  font-size:18px
}
.hero-actions {
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  align-items:center
}
.hero-actions .text-link {
  font-size:12px
}
.release-note {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:5px;
  font-size:11px;
  line-height:1.8;
  margin-top:24px
}
.release-note>span {
  width:6px;
  height:6px;
  display:inline-block;
  border-radius:50%;
  background:#678758;
  margin-right:3px
}
.hero-visual {
  position:relative;
  min-width:0;
  min-height:622px;
  margin-left:0
}
.hero-landscape {
  position:absolute;
  right:0;
  top:0;
  width:88%;
  height:560px;
  border-radius:46% 46% 4px 4px;
  overflow:hidden
}
.hero-landscape img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 45%
}
.phone {
  width:270px;
  border:6px solid #263b30;
  border-radius:38px;
  background:#f5f6ee;
  overflow:hidden;
  box-shadow:0 28px 50px -28px #132e2a70;
  position:relative;
  flex-shrink:0
}
.phone img {
  width:100%;
  height:auto
}
.hero-phone {
  position:relative;
  top:86px;
  width:255px;
  transform:rotate(-7deg);
  z-index:2;
  box-shadow:0 28px 55px -12px #192b2866
}
.hero-visual>figcaption {
  position:absolute;
  bottom:0;
  right:0;
  font-size:10px;
  color:var(--muted)
}
.photo-note {
  position:absolute;
  bottom:72px;
  right:10px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 16px 16px 22px;
  background:var(--white);
  box-shadow:0 8px 30px #173f3317;
  transform:rotate(4deg);
  border:1px solid #e4e0d3
}
.photo-note img {
  height:100px;
  width:60px
}
.note-number {
  font:italic 23px/1.3 var(--display);
  color:var(--green);
  letter-spacing:-.03em
}
.garden-world {
  border-top:1px solid var(--line);
  padding-top:56px;
  padding-bottom:24px
}
.world-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 65px;
  align-items:end;
  margin-bottom:38px
}
.world-heading .eyebrow {
  grid-column:1/-1;
  margin:0
}
.world-heading h2 {
  font-size:40px;
  line-height:1.15
}
.world-heading>p:last-child {
  max-width:320px;
  justify-self:end;
  font-size:15px
}
.world-images {
  display:grid;
  grid-template-columns:1fr 1.25fr 1fr;
  gap:22px;
  align-items:start
}
.world-images figure {
  min-width:0
}
.world-images figure:nth-child(2) {
  padding-top:42px
}
.world-images picture {
  height:280px;
  overflow:hidden;
  border-radius:3px
}
.world-images figure:nth-child(2) picture {
  height:324px
}
.world-images img {
  width:100%;
  height:100%;
  object-fit:cover
}
.world-images figure:first-child img {
  object-position:50% 50%
}
.world-images figcaption {
  font-size:12px;
  margin-top:14px
}
.world-images figcaption span {
  font-size:10px;
  color:var(--clay);
  margin-right:12px
}
.organize {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  align-items:center
}
.organize-art {
  position:relative;
  padding-bottom:42px
}
.screen-plinth {
  min-height:640px;
  background:var(--sage);
  border-radius:48% 48% 4px 4px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:38px 25px
}
.screen-plinth .phone {
  width:266px;
  transform:rotate(-3deg)
}
.organize-branch {
  position:absolute;
  right:-48px;
  bottom:30px;
  width:145px;
  transform:rotate(13deg)
}
.art-label {
  position:absolute;
  left:24px;
  bottom:0;
  letter-spacing:.15em;
  font-size:9px
}
.editorial-copy h2 {
  margin-bottom:28px
}
.editorial-copy .intro {
  margin-bottom:24px
}
.editorial-copy>.text-link {
  margin-top:24px
}
.quiet-list {
  list-style:none;
  margin-top:26px
}
.quiet-list li {
  position:relative;
  padding:12px 0 12px 22px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  line-height:1.6
}
.quiet-list li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--green);
  font-size:12px;
  top:13px
}
.care-section {
  background:var(--forest);
  color:var(--white);
  padding-block:98px;
  overflow:hidden
}
.care-layout {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:12%;
  align-items:center
}
.care-section .eyebrow,.care-section em {
  color:#d3dfc5
}
.care-section p {
  color:#ced8cb
}
.care-section .intro {
  max-width:485px
}
.care-section .fine {
  margin-top:25px;
  max-width:490px;
  color:#bdcbbc
}
.care-details {
  margin-top:30px;
  display:grid;
  gap:24px;
  grid-template-columns:1fr 1fr
}
.care-details h3 {
  font-size:23px;
  letter-spacing:-.025em;
  line-height:1.2;
  margin-bottom:12px
}
.care-details p {
  font-size:13px;
  line-height:1.8
}
.small-label {
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  margin-bottom:8px;
  color:#d3dfc5
}
.care-art {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:25px
}
.care-art .phone {
  transform:rotate(5deg);
  border-color:#8b9c86;
  width:265px
}
.care-art figcaption {
  font:italic 19px/1.4 var(--display);
  color:#d3dfc5;
  text-align:center;
  max-width:240px
}
.memory-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:8%;
  align-items:end
}
.memory-heading .eyebrow {
  grid-column:1/-1;
  margin-bottom:18px
}
.memory-heading .intro {
  max-width:330px;
  justify-self:end;
  padding-bottom:6px
}
.memory-layout {
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:42px 11%;
  position:relative;
  margin-top:50px;
  align-items:center
}
.memory-photo {
  align-self:start;
  padding-top:22px
}
.memory-photo picture {
  height:330px;
  overflow:hidden
}
.memory-photo img {
  height:100%;
  width:100%;
  object-fit:cover
}
.memory-photo figcaption {
  margin-top:16px;
  font:italic 21px/1.5 var(--display);
  color:var(--muted)
}
.memory-screens {
  grid-column:2;
  grid-row:1/3;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  position:relative;
  min-height:608px;
  padding-top:20px
}
.memory-screens .phone {
  width:235px;
  border-width:5px;
  border-radius:33px
}
.journal-phone {
  transform:rotate(-7deg)
}
.gallery-phone {
  transform:rotate(8deg);
  margin-left:-65px;
  margin-top:65px
}
.memory-copy h3 {
  font-size:27px;
  margin-bottom:18px;
  line-height:1.2
}
.memory-copy p {
  font-size:15px
}
.memory-copy .text-link {
  margin-top:15px
}
.studio-section {
  background:#e5e7da;
  padding-block:100px;
  overflow:hidden
}
.studio-heading {
  max-width:820px;
  margin-bottom:65px
}
.studio-heading h2 {
  font-size:clamp(45px,5.2vw,75px)
}
.studio-heading .intro {
  max-width:520px;
  margin-top:26px
}
.studio-layout {
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:11%;
  align-items:center
}
.collage-art {
  position:relative;
  padding:18px 16px 36px
}
.collage-print {
  transform:rotate(-5deg);
  box-shadow:0 25px 50px #243b2d28
}
.collage-print img {
  width:100%;
  height:auto
}
.collage-art figcaption {
  position:relative;
  margin-top:45px;
  font-size:10px;
  text-align:center
}
.studio-copy h3 {
  font-size:37px;
  line-height:1.15;
  margin-bottom:25px
}
.studio-copy>p {
  font-size:15px
}
.layout-names {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-block:26px
}
.layout-names li {
  border:1px solid #aeb9a5;
  border-radius:3px;
  font-size:11px;
  padding:5px 9px
}
.studio-access {
  border-top:1px solid #b9c2af;
  padding-top:22px
}
.studio-access p {
  font-size:13px
}
.studio-access strong {
  color:var(--ink)
}
.studio-bottom {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  align-items:center;
  max-width:890px;
  margin:90px auto 0;
  padding-top:70px;
  border-top:1px solid #b9c2af
}
.studio-device {
  display:flex;
  flex-direction:column;
  align-items:center
}
.studio-device .phone {
  width:240px
}
.studio-device figcaption {
  font-size:10px;
  margin-top:22px;
  text-align:center
}
.share-copy h3 {
  font-size:42px;
  margin-bottom:22px
}
.share-copy .fine {
  margin-top:22px
}
.discover {
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  align-items:center;
  gap:13%
}
.discover-photo {
  align-self:center;
  position:relative
}
.discover-photo picture {
  aspect-ratio:3/4;
  border-radius:48% 48% 3px 3px;
  overflow:hidden
}
.discover-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:45%
}
.photo-script {
  font:italic 26px/1.4 var(--display);
  text-align:center;
  margin-top:24px;
  color:var(--green)
}
.discovery-list {
  list-style:none;
  counter-reset:discover;
  margin-top:30px
}
.discovery-list li {
  counter-increment:discover;
  position:relative;
  padding:18px 0 18px 38px;
  border-top:1px solid var(--line)
}
.discovery-list li:before {
  content:'0' counter(discover);
  position:absolute;
  left:0;
  top:20px;
  color:var(--clay);
  font-size:10px
}
.discovery-list h3 {
  font-size:24px;
  letter-spacing:-.025em;
  line-height:1.3;
  margin-bottom:9px
}
.discovery-list p {
  font-size:14px
}
.discover .fine {
  margin-top:22px
}
.inside-section {
  background:#eeeee3;
  padding-block:90px
}
.section-heading {
  text-align:center;
  max-width:820px;
  margin:0 auto 46px
}
.section-heading>p:last-child {
  margin-top:22px
}
.feature-tabs {
  display:flex;
  justify-content:center;
  gap:5px;
  border-bottom:1px solid #c7cfbc;
  margin-inline:auto;
  padding-bottom:0;
  max-width:800px
}
.feature-tabs a {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:57px;
  padding:12px 20px;
  font-size:14px;
  text-decoration:none;
  color:var(--muted);
  border-bottom:3px solid transparent
}
.feature-tabs a:hover {
  color:var(--green);
  background:#e3e7d9
}
.feature-tabs a[aria-selected=true] {
  border-bottom-color:var(--green);
  color:var(--green);
  font-weight:600
}
.app-panels {
  max-width:950px;
  margin:0 auto
}
.app-panel {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  align-items:center;
  padding-top:54px;
  scroll-margin-top:115px;
  min-height:690px
}
.app-panel[hidden] {
  display:none
}
.panel-copy h3 {
  font-size:43px;
  line-height:1.12;
  margin-bottom:22px
}
.panel-copy .intro {
  font-size:17px
}
.panel-copy .fine {
  margin-top:24px
}
.panel-screen {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:20px
}
.panel-screen .phone {
  width:257px
}
.panel-screen figcaption {
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase
}
.sample-note {
  font-size:11px;
  text-align:center;
  max-width:680px;
  margin:32px auto 0
}
.records {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:13%;
  align-items:start
}
.records h2 {
  margin-bottom:25px
}
.records .intro {
  max-width:330px;
  margin-bottom:30px
}
.record-list article {
  display:flex;
  gap:24px;
  border-top:1px solid var(--line);
  padding-block:25px
}
.record-list article>span {
  font-size:10px;
  letter-spacing:.08em;
  color:var(--clay);
  padding-top:5px
}
.record-list h3 {
  font-size:28px;
  letter-spacing:-.03em;
  margin-bottom:15px
}
.record-list p {
  font-size:14px
}
.pricing-section {
  padding-block:95px;
  background:#ecece0
}
.pricing-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:1000px;
  margin-inline:auto;
  gap:25px;
  align-items:start
}
.price-card {
  padding:40px;
  border:1px solid #c5cbb8;
  background:var(--white);
  border-radius:5px;
  display:flex;
  flex-direction:column;
  align-self:stretch
}
.price-card .eyebrow {
  font-size:10px;
  margin-bottom:20px
}
.price-card h3 {
  font-size:32px
}
.price {
  font:52px/1.2 var(--display);
  color:var(--ink);
  margin-block:27px 20px;
  letter-spacing:-.04em
}
.price span {
  font:13px/1.4 var(--sans);
  letter-spacing:0;
  white-space:nowrap
}
.price-card>p:not(.price):not(.eyebrow) {
  font-size:14px;
  min-height:46px
}
.price-card .quiet-list {
  margin-bottom:30px;
  margin-top:18px
}
.price-card .quiet-list li {
  font-size:13px;
  padding-block:11px
}
.price-card .button {
  margin-top:auto;
  text-align:center;
  font-size:13px
}
.lifetime {
  border-top:4px solid var(--green);
  padding-top:37px;
  background:#f3f5ea
}
.pricing-notes {
  max-width:1000px;
  margin:28px auto 0;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:36px
}
.pricing-notes p {
  font-size:12px;
  margin:0
}
.questions {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:12%
}
.questions .text-link {
  margin-top:30px
}
details {
  border-top:1px solid var(--line)
}
details:last-child {
  border-bottom:1px solid var(--line)
}
summary {
  cursor:pointer;
  position:relative;
  list-style:none;
  padding:23px 33px 23px 0;
  font-size:15px;
  font-weight:500;
  line-height:1.5
}
summary::-webkit-details-marker {
  display:none
}
summary:after {
  content:'+';
  position:absolute;
  right:3px;
  top:20px;
  font-size:21px;
  font-weight:300;
  color:var(--green)
}
details[open] summary:after {
  content:'−'
}
details>div {
  padding:0 25px 24px 0
}
details p {
  font-size:14px
}
details a {
  text-underline-offset:3px
}
.final-section {
  background:var(--forest);
  color:var(--white);
  padding-block:85px
}
.final-layout {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  text-align:center
}
.final-layout>div {
  max-width:820px
}
.final-layout .eyebrow {
  color:#cedcc1
}
.final-layout h2 em {
  color:#d5dec5
}
.final-layout .intro {
  color:#d3ddcf;
  margin:28px auto;
  font-size:17px
}
.final-layout>.final-branch {
  transform:scaleX(-1) rotate(-16deg)
}
.final-layout>img {
  width:115px;
  opacity:.8;
  filter:brightness(1.7);
  transform:rotate(-16deg)
}
.final-layout .button {
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper)
}
.final-layout .button:hover {
  background:#dde4cd
}
.final-layout .fine {
  color:#c5d1bf;
  margin-top:22px;
  font-size:11px
}
.site-foot {
  padding-block:45px 28px
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-bottom:35px
}
.footer-top>p {
  font:italic 23px/1.4 var(--display)
}
.footer-top .identity {
  font-size:26px
}
.back-top {
  font-size:11px;
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font-size:10px
}
.footer-bottom a {
  text-decoration:none
}
.footer-bottom nav {
  display:flex;
  gap:24px
}
.footer-bottom nav a {
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.document {
  max-width:850px;
  padding-block:75px 110px;
  min-height:65vh
}
.document h1 {
  font-size:clamp(47px,6vw,78px);
  line-height:1.08;
  margin-bottom:28px
}
.document-head {
  margin-bottom:32px
}
.document h2 {
  font-size:31px;
  line-height:1.2;
  margin-bottom:20px;
  letter-spacing:-.025em
}
.document h3 {
  font-size:21px;
  line-height:1.35;
  letter-spacing:-.025em
}
.document section {
  margin-top:45px
}
.document .updated {
  font-size:12px
}
.document p {
  line-height:1.8
}
.document .intro {
  font-size:20px
}
.document .credit-list {
  list-style:none
}
.credit-list li {
  padding-block:15px;
  border-top:1px solid var(--line)
}
.credit-list p {
  font-size:13px;
  margin-top:5px
}
.document details {
  margin-top:0
}
.document .button {
  margin-top:25px
}
@media(min-width:1550px) {
  .hero {
    padding-block:82px 104px
  }
  .hero-visual {
    min-height:655px
  }
  .hero-landscape {
    height:600px
  }
  .hero-phone {
    width:273px
  }
  .photo-note {
    bottom:65px
  }
}
@media(max-width:1100px) {
  .site-head nav {
    gap:18px
  }
  .site-head nav a {
    font-size:11px
  }
  .hero {
    min-height:720px;
    gap:3%;
    padding-top:45px
  }
  .hero .eyebrow {
    white-space:normal;
    max-width:300px
  }
  .hero-visual {
    min-height:570px
  }
  .hero-landscape {
    height:500px
  }
  .hero-phone {
    width:224px;
    top:90px
  }
  .photo-note {
    right:0;
    bottom:44px;
    padding:12px
  }
  .photo-note img {
    width:43px;
    height:75px
  }
  .note-number {
    font-size:20px
  }
  .hero-visual>figcaption {
    font-size:9px
  }
  .organize {
    gap:8%
  }
  .screen-plinth {
    min-height:570px
  }
  .screen-plinth .phone {
    width:235px
  }
  .organize-branch {
    right:-25px;
    width:110px
  }
  .care-layout {
    gap:7%
  }
  .care-art .phone {
    width:235px
  }
  .memory-layout {
    gap:36px 7%
  }
  .memory-screens .phone {
    width:203px
  }
  .memory-screens {
    min-height:540px
  }
  .studio-layout {
    gap:8%
  }
  .studio-copy h3 {
    font-size:32px
  }
  .studio-bottom {
    gap:9%
  }
  .discover {
    gap:9%
  }
  .records {
    gap:9%
  }
  .price-card {
    padding:30px
  }
  .lifetime {
    padding-top:27px
  }
  .price-card h3 {
    font-size:29px
  }
  .final-layout>img {
    width:80px
  }
  .footer-top>p {
    font-size:20px
  }
}
@media(max-width:800px) {
  :root {
    --gutter:30px
  }
  .header-inner {
    min-height:80px;
    gap:18px
  }
  .site-head nav a:not(.nav-cta) {
    display:none
  }
  .site-head .nav-cta {
    padding:8px 13px;
    font-size:12px
  }
  .identity {
    font-size:26px
  }
  .hero {
    min-height:auto;
    grid-template-columns:1fr 1fr;
    padding-block:48px 65px
  }
  .hero h1 {
    font-size:61px
  }
  .hero .intro {
    font-size:16px
  }
  .hero-visual {
    min-height:525px
  }
  .hero-landscape {
    height:440px;
    width:94%;
    top:24px
  }
  .hero-phone {
    width:201px;
    top:100px;
    left:-12px
  }
  .hero-actions .text-link {
    display:none
  }
  .photo-note {
    bottom:20px;
    right:-4px
  }
  .hero-visual>figcaption {
    bottom:-15px;
    right:-8px
  }
  .world-heading {
    gap:20px
  }
  .world-heading h2 {
    font-size:32px
  }
  .world-images {
    gap:16px
  }
  .world-images picture {
    height:220px
  }
  .world-images figure:nth-child(2) picture {
    height:260px
  }
  .world-images figcaption {
    font-size:11px
  }
  .section-space {
    padding-block:85px
  }
  .organize {
    gap:8%
  }
  .editorial-copy h2 {
    font-size:42px
  }
  .screen-plinth {
    min-height:495px;
    padding:25px 10px
  }
  .screen-plinth .phone {
    width:205px
  }
  .editorial-copy .intro {
    font-size:17px
  }
  .editorial-copy p {
    font-size:15px
  }
  .quiet-list li {
    font-size:13px
  }
  .care-layout {
    grid-template-columns:1.2fr .8fr;
    gap:6%
  }
  .care-details {
    grid-template-columns:1fr;
    gap:20px
  }
  .care-art .phone {
    width:218px
  }
  .care-art figcaption {
    font-size:17px
  }
  .memory-heading .intro {
    font-size:17px
  }
  .memory-layout {
    gap:28px 6%
  }
  .memory-screens .phone {
    width:166px;
    border-radius:27px;
    border-width:4px
  }
  .memory-screens {
    min-height:425px;
    padding-top:35px
  }
  .gallery-phone {
    margin-left:-45px
  }
  .memory-photo picture {
    height:230px
  }
  .memory-photo figcaption {
    font-size:18px
  }
  .memory-copy h3 {
    font-size:24px
  }
  .memory-copy p {
    font-size:13px
  }
  .studio-section {
    padding-block:80px
  }
  .studio-layout {
    gap:6%;
    grid-template-columns:1fr 1fr
  }
  .studio-copy h3 {
    font-size:28px
  }
  .studio-copy>p {
    font-size:14px
  }
  .collage-art {
    padding:8px
  }
  .collage-art figcaption {
    font-size:9px;
    margin-top:30px
  }
  .studio-access p {
    font-size:12px
  }
  .studio-bottom {
    gap:9%;
    margin-top:60px;
    padding-top:60px
  }
  .studio-device .phone {
    width:215px
  }
  .share-copy h3 {
    font-size:34px
  }
  .share-copy p {
    font-size:14px
  }
  .discover {
    grid-template-columns:.8fr 1.2fr;
    gap:8%
  }
  .discovery-list h3 {
    font-size:22px
  }
  .photo-script {
    font-size:22px
  }
  .discovery-list p {
    font-size:13px
  }
  .discover .fine {
    font-size:12px
  }
  .app-panel {
    gap:8%;
    min-height:640px
  }
  .panel-screen .phone {
    width:225px
  }
  .panel-copy h3 {
    font-size:37px
  }
  .panel-copy .intro {
    font-size:15px
  }
  .records {
    gap:9%;
    grid-template-columns:.9fr 1.1fr
  }
  .record-list h3 {
    font-size:25px
  }
  .record-list p {
    font-size:13px
  }
  .pricing-grid {
    gap:18px
  }
  .price-card {
    padding:26px
  }
  .lifetime {
    padding-top:23px
  }
  .price-card h3 {
    font-size:27px
  }
  .price {
    font-size:45px
  }
  .price span {
    font-size:11px
  }
  .pricing-notes {
    gap:25px
  }
  .questions {
    gap:7%;
    grid-template-columns:.8fr 1.2fr
  }
  .final-layout>img {
    width:50px
  }
  .footer-top>p {
    display:none
  }
}
@media(max-width:600px) {
  :root {
    --gutter:22px
  }
  html {
    scroll-padding-top:92px
  }
  .header-inner {
    min-height:75px
  }
  .identity {
    font-size:25px
  }
  .identity img {
    width:36px;
    height:36px;
    border-radius:9px
  }
  .site-head .nav-cta {
    font-size:11px;
    gap:12px;
    min-height:42px;
    padding-inline:12px
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:40px;
    padding-bottom:50px;
    gap:32px
  }
  .hero .eyebrow {
    max-width:none;
    font-size:9px;
    letter-spacing:.11em;
    margin-bottom:22px
  }
  .tiny-leaf {
    font-size:24px
  }
  .hero h1 {
    font-size:clamp(49px,12vw,73px);
    letter-spacing:-.052em;
    max-width:520px
  }
  .hero h1 em {
    display:inline
  }
  .hero .intro {
    font-size:16px;
    max-width:420px;
    margin-top:22px
  }
  .hero-actions {
    margin-top:24px;
    gap:14px
  }
  .hero-actions .button {
    min-height:50px;
    padding:14px 21px;
    font-size:13px
  }
  .hero-actions .text-link {
    display:inline-block;
    font-size:11px
  }
  .release-note {
    font-size:10px;
    margin-top:19px
  }
  .hero-visual {
    min-height:520px;
    width:min(100%,430px);
    align-self:center;
    margin-top:12px
  }
  .hero-landscape {
    height:440px;
    width:85%;
    top:0;
    right:0;
    border-radius:45% 45% 3px 3px
  }
  .hero-phone {
    width:221px;
    top:52px;
    left:8px;
    border-width:5px;
    border-radius:33px
  }
  .photo-note {
    right:0;
    bottom:55px;
    padding:10px 12px;
    gap:8px;
    max-width:180px
  }
  .note-number {
    font-size:18px
  }
  .photo-note img {
    width:35px;
    height:65px
  }
  .hero-visual>figcaption {
    bottom:0;
    right:0;
    font-size:9px
  }
  .garden-world {
    padding-top:40px
  }
  .world-heading {
    display:block;
    margin-bottom:28px
  }
  .world-heading .eyebrow {
    margin-bottom:17px;
    font-size:10px
  }
  .world-heading h2 {
    font-size:32px
  }
  .world-heading>p:last-child {
    margin-top:19px;
    font-size:14px
  }
  .world-images {
    grid-template-columns:1fr 1fr;
    gap:20px 15px
  }
  .world-images figure:nth-child(2) {
    padding-top:35px
  }
  .world-images picture {
    height:205px
  }
  .world-images figure:nth-child(2) picture {
    height:225px
  }
  .world-images figure:nth-child(3) {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:15px
  }
  .world-images figure:nth-child(3) picture {
    height:180px
  }
  .world-images figure:nth-child(3) figcaption {
    font:italic 23px/1.3 var(--display);
    margin:0;
    padding-right:15px
  }
  .world-images figure:nth-child(3) figcaption span {
    display:block;
    font:10px/2 var(--sans);
    margin-bottom:10px
  }
  .section-space {
    padding-block:70px
  }
  .organize {
    grid-template-columns:1fr;
    gap:40px
  }
  .organize-art {
    grid-row:2;
    width:min(100%,355px);
    margin-inline:auto
  }
  .screen-plinth {
    min-height:550px;
    padding:28px 20px
  }
  .screen-plinth .phone {
    width:235px
  }
  .organize-branch {
    width:100px;
    right:-7px;
    bottom:5px
  }
  .editorial-copy h2 {
    font-size:43px
  }
  .eyebrow {
    font-size:10px;
    margin-bottom:20px
  }
  .editorial-copy .intro {
    font-size:17px;
    margin-bottom:20px
  }
  .editorial-copy p {
    font-size:15px
  }
  .quiet-list li {
    font-size:14px
  }
  .care-section {
    padding-block:65px
  }
  .care-layout {
    grid-template-columns:1fr;
    gap:44px
  }
  .care-details {
    grid-template-columns:1fr 1fr;
    gap:22px
  }
  .care-details h3 {
    font-size:22px
  }
  .care-details p {
    font-size:13px
  }
  .care-section .fine {
    font-size:12px
  }
  .care-art .phone {
    width:235px;
    transform:rotate(3deg)
  }
  .care-art figcaption {
    max-width:300px
  }
  .memory-heading {
    display:block
  }
  .memory-heading .intro {
    margin-top:22px;
    max-width:270px
  }
  .memory-layout {
    display:flex;
    flex-direction:column;
    gap:35px;
    margin-top:33px;
    align-items:stretch
  }
  .memory-photo {
    width:100%;
    padding:0
  }
  .memory-photo picture {
    height:245px
  }
  .memory-photo figcaption {
    font-size:19px
  }
  .memory-screens {
    order:2;
    min-height:508px;
    padding-top:10px
  }
  .memory-screens .phone {
    width:205px;
    border-radius:30px
  }
  .gallery-phone {
    margin-top:35px;
    margin-left:-55px
  }
  .memory-copy {
    order:1;
    max-width:430px
  }
  .memory-copy h3 {
    font-size:28px
  }
  .memory-copy p {
    font-size:15px
  }
  .studio-section {
    padding-block:65px
  }
  .studio-heading {
    margin-bottom:32px
  }
  .studio-heading h2 {
    font-size:45px;
    letter-spacing:-.05em
  }
  .studio-heading .intro {
    font-size:17px;
    margin-top:22px
  }
  .studio-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .collage-art {
    width:min(100%,360px);
    margin:auto;
    padding-inline:13px;
    padding-top:20px
  }
  .collage-print {
    transform:rotate(-4deg)
  }
  .collage-art figcaption {
    margin-top:28px;
    font-size:9px
  }
  .studio-copy h3 {
    font-size:33px
  }
  .studio-copy>p {
    font-size:15px
  }
  .studio-access p {
    font-size:13px
  }
  .layout-names li {
    font-size:11px
  }
  .studio-bottom {
    grid-template-columns:1fr;
    gap:35px;
    margin-top:45px;
    padding-top:45px
  }
  .studio-device {
    grid-row:2
  }
  .studio-device .phone {
    width:235px
  }
  .share-copy h3 {
    font-size:36px
  }
  .share-copy p {
    font-size:15px
  }
  .share-copy .fine {
    font-size:12px
  }
  .discover {
    display:flex;
    flex-direction:column;
    gap:38px
  }
  .discover-photo {
    width:75%;
    max-width:300px;
    order:2
  }
  .photo-script {
    font-size:24px
  }
  .discovery-list h3 {
    font-size:24px
  }
  .discovery-list p {
    font-size:14px
  }
  .discover .fine {
    font-size:12px
  }
  .inside-section {
    padding-block:65px
  }
  .section-heading h2 {
    font-size:42px
  }
  .section-heading>p:last-child {
    font-size:15px
  }
  .section-heading {
    margin-bottom:30px
  }
  .feature-tabs {
    gap:0;
    scroll-margin-top:95px
  }
  .feature-tabs a {
    font-size:12px;
    padding:12px 7px;
    min-height:52px
  }
  .app-panel {
    grid-template-columns:1fr;
    gap:32px;
    padding-top:34px;
    min-height:auto
  }
  .panel-copy h3 {
    font-size:36px;
    max-width:350px;
    margin-bottom:20px
  }
  .panel-copy .intro {
    font-size:15px
  }
  .panel-copy .eyebrow {
    margin-bottom:14px
  }
  .panel-copy .quiet-list {
    margin-top:20px
  }
  .panel-copy .fine {
    margin-top:19px
  }
  .panel-screen .phone {
    width:242px
  }
  .sample-note {
    font-size:10px;
    margin-top:28px
  }
  .records {
    grid-template-columns:1fr;
    gap:36px
  }
  .records .intro {
    font-size:17px;
    max-width:300px
  }
  .records .text-link {
    font-size:13px
  }
  .record-list h3 {
    font-size:28px
  }
  .record-list p {
    font-size:14px
  }
  .record-list article {
    gap:19px;
    padding-block:22px
  }
  .pricing-section {
    padding-block:65px
  }
  .pricing-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .price-card {
    padding:28px
  }
  .lifetime {
    padding-top:25px
  }
  .price-card h3 {
    font-size:32px
  }
  .price {
    font-size:50px;
    margin-block:24px 18px
  }
  .price span {
    font-size:12px
  }
  .price-card>p:not(.price):not(.eyebrow) {
    min-height:0
  }
  .price-card .quiet-list li {
    font-size:14px
  }
  .price-card .button {
    font-size:13px
  }
  .pricing-notes {
    grid-template-columns:1fr;
    gap:19px
  }
  .pricing-notes p {
    font-size:12px
  }
  .questions {
    grid-template-columns:1fr;
    gap:30px
  }
  .questions h2 br {
    display:none
  }
  .questions h2 {
    font-size:42px
  }
  .questions .text-link {
    margin-top:18px
  }
  .question-list summary {
    font-size:15px;
    padding-block:21px
  }
  .question-list details p {
    font-size:14px
  }
  .final-section {
    padding-block:65px
  }
  .final-layout>img {
    display:none
  }
  .final-layout {
    justify-content:center
  }
  .final-layout h2 {
    font-size:44px
  }
  .final-layout .intro {
    font-size:16px;
    margin-block:23px
  }
  .final-layout .intro br {
    display:none
  }
  .final-layout .fine {
    font-size:10px
  }
  .site-foot {
    padding-block:35px 20px
  }
  .footer-top {
    padding-bottom:24px
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    font-size:11px
  }
  .footer-bottom nav {
    gap:26px
  }
  .footer-bottom p:last-child {
    margin:0
  }
  .document {
    padding-block:45px 75px
  }
  .document h1 {
    font-size:45px
  }
  .document .intro {
    font-size:18px
  }
  .document h2 {
    font-size:29px
  }
  .document h3 {
    font-size:21px
  }
  .document section {
    margin-top:35px
  }
  .credit-list h3 a {
    overflow-wrap:anywhere
  }
}
@media(max-width:360px) {
  :root {
    --gutter:18px
  }
  .hero h1 {
    font-size:47px
  }
  .hero .eyebrow {
    font-size:8px
  }
  .hero-actions {
    gap:13px
  }
  .hero-actions .text-link {
    font-size:10px
  }
  .hero-actions .button {
    font-size:12px;
    gap:15px;
    padding-inline:17px
  }
  .hero-visual {
    min-height:475px
  }
  .hero-landscape {
    height:395px
  }
  .hero-phone {
    width:202px;
    top:40px;
    left:4px
  }
  .photo-note {
    bottom:51px;
    font-size:16px;
    max-width:150px
  }
  .note-number {
    font-size:16px
  }
  .photo-note img {
    display:none
  }
  .memory-screens .phone {
    width:175px
  }
  .memory-screens {
    min-height:440px
  }
  .world-images figcaption {
    font-size:10px
  }
  .care-details {
    grid-template-columns:1fr
  }
  .feature-tabs a {
    font-size:11px;
    padding-inline:4px
  }
  .site-head .nav-cta {
    font-size:10px
  }
  .identity {
    font-size:23px
  }
  .identity img {
    width:32px;
    height:32px
  }
  .studio-heading h2 {
    font-size:41px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .button:hover,.text-link:hover span {
    transform:none
  }
}
@media print {
  .site-head,.site-foot,.hero-actions,.button,.feature-tabs {
    display:none
  }
  .wrap {
    width:100%
  }
  .section-space,.care-section,.studio-section,.inside-section,.pricing-section {
    padding-block:30px
  }
  .app-panel[hidden] {
    display:grid
  }
  .phone {
    box-shadow:none
  }
  .hero {
    min-height:auto
  }
  body {
    font-size:12px
  }
}
/* Keep the paired photographic composition inside small-screen reading margins. */
@media(max-width:600px) {
  .hero-actions .text-link {
    display:none
  }
  .organize-branch {
    right:14px;
    width:80px
  }
  .memory-screens .phone {
    width:185px
  }
  .memory-screens {
    min-height:475px
  }
}
@media(max-width:360px) {
  .memory-screens .phone {
    width:164px
  }
  .memory-screens {
    min-height:425px
  }
}

/* Paired tour views keep both the overview and its useful next step readable. */
.app-panels { max-width:1100px }
.app-panel:has(.panel-screens) { grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); gap:6% }
.panel-screens { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start }
.panel-screens .panel-screen { margin:0; min-width:0 }
.panel-screens .phone { width:100%; max-width:250px }
.panel-screens figcaption { text-align:center; letter-spacing:.04em; line-height:1.6; font-size:11px }
@media(max-width:900px) {
 .app-panel:has(.panel-screens) { grid-template-columns:1fr; gap:32px }
 .panel-screens { max-width:560px; width:100%; margin:0 auto }
}
@media(max-width:540px) {
 .panel-screens { grid-template-columns:1fr; gap:38px }
 .panel-screens .phone { width:min(76vw,280px) }
}

/* Compact tour: keep section choices and the current screenshots in one viewport. */
.tour-enhanced .feature-tabs {
 position:sticky; top:var(--tour-header-height,91px); z-index:9;
 background:#eeeee3; scroll-margin-top:var(--tour-header-height,91px);
}
.tour-enhanced .app-panel {
 display:flex; flex-direction:column; gap:24px; padding-top:12px; min-height:0;
}
.tour-enhanced .app-panel[hidden] { display:none }
.tour-enhanced .panel-screens {
 display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px;
 width:100%; max-width:600px; margin:0 auto; align-items:start;
}
.tour-enhanced .panel-screen { gap:8px; margin:0; min-width:0 }
.tour-enhanced .panel-screens .phone {
 height:clamp(160px,calc(100vh - var(--tour-header-height,91px) - var(--tour-tabs-height,74px) - 124px),480px);
 height:clamp(160px,calc(100svh - var(--tour-header-height,91px) - var(--tour-tabs-height,74px) - 124px),480px);
 width:auto; max-width:100%; aspect-ratio:1206 / 2622; border-radius:30px;
}
.tour-enhanced .panel-screens .phone picture { display:block; height:100% }
.tour-enhanced .panel-screens .phone img { width:100%; height:100%; object-fit:contain }
.tour-enhanced .panel-copy { max-width:680px; margin:0 auto; text-align:center }
.tour-enhanced .panel-copy h3 { margin-left:auto; margin-right:auto; max-width:600px }
.tour-enhanced .panel-copy .quiet-list { width:fit-content; max-width:100%; margin-inline:auto; text-align:left }
.viewer-controls { display:none }
@media(max-width:600px) {
 .tour-enhanced .feature-tabs { justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin }
 .tour-enhanced .feature-tabs a { flex:0 0 auto; min-height:52px; padding:10px 12px; white-space:nowrap }
 .tour-enhanced .panel-screens {
  position:relative; display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:100%;
  gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
 }
 .tour-enhanced .panel-screens::-webkit-scrollbar { display:none }
 .tour-enhanced .panel-screen { scroll-snap-align:start; scroll-snap-stop:always; padding-bottom:4px }
 .tour-enhanced .viewer-controls { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:-14px }
 .viewer-controls button { min-width:44px; min-height:44px; border:1px solid #9aa991; border-radius:50%; background:transparent; color:var(--green); font:inherit; font-size:22px; cursor:pointer }
 .viewer-controls button:disabled { opacity:.35; cursor:default }
 .viewer-controls [role=status] { min-width:48px; text-align:center; font-size:13px }
}
@media print {
 .tour-enhanced .feature-tabs,.viewer-controls { display:none }
 .tour-enhanced .app-panel[hidden] { display:flex }
 .tour-enhanced .panel-screens { display:grid; grid-template-columns:1fr 1fr; overflow:visible }
 .tour-enhanced .panel-screens .phone { height:400px }
}