.guide-visual { height: min(25svh, 240px); display: flex; align-items: center; justify-content: center; padding: 16px; border: 1px solid #8f7e643d; background: #eee7da; border-radius: 12px; overflow: hidden; }
.guide-grid .guide-visual img { width: auto; height: auto; max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 20px #3c352a14; }
.guide-visual.timeline-preview { background: #e9e0d0 url('assets/paper-texture.png') center/500px; }
.guide-grid .timeline-preview img { width: 100%; max-height: none; max-width: none; flex: none; }
.news-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.news-feature h3 { font-family: 'Barchive Serif', serif; font-size: clamp(30px, 3vw, 43px); line-height: 1.5; margin-top: 28px; }
.news-date { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.news-date span { font: 10px Karla, sans-serif; letter-spacing: 1.4px; }
.news-feature .button { margin-top: 30px; font-size: 13px; }
.news-art { position: relative; aspect-ratio: 1.15; background: #e9e0d0 url('assets/paper-texture.png') center/700px; border: 1px solid #8f7e643d; border-radius: 16px; padding: 24px; text-align: left; color: var(--muted); }
.news-timeline { position: absolute; left: 7%; top: 6%; height: 81%; width: auto; border-radius: 8px; box-shadow: 0 12px 28px #3c352a18; }
.news-growth { position: absolute; right: 5%; top: 32%; width: 58%; height: auto; border-radius: 8px; box-shadow: 0 12px 28px #3c352a20; border: 1px solid #8f7e6444; }
.news-art > span { position: absolute; bottom: 5%; left: 7%; font-size: 11px; }
dialog[data-content='update'], dialog[data-content='first'], dialog[data-content='record'], dialog[data-content='share'] { max-width: 960px; padding: 48px; }
dialog > .dialog-close { position: sticky; top: -30px; float: right; margin-right: -24px; z-index: 1; background: #f6efe3eb; border-radius: 50%; }
dialog .article-lead { font-size: 18px; line-height: 1.9; margin: 24px 0 32px; color: var(--ink); }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 12px; color: var(--muted); border-top: 1px solid #8f7e6444; padding-top: 20px; }
.article-figure { margin: 28px 0; }
.article-figure img { width: auto; height: auto; max-width: 100%; max-height: 640px; margin-inline: auto; border-radius: 10px; }
.article-figure figcaption { font-size: 11px; line-height: 1.7; color: var(--muted); text-align: center; margin-top: 12px; }
.article-figure.timeline-figure img { max-height: 700px; }
.guide-steps { display: grid; gap: 28px; margin: 36px 0; }
.guide-steps section { border-top: 1px solid #8f7e6444; padding-top: 22px; }
dialog .guide-steps h3 { font-size: 19px; margin-bottom: 10px; }
.story-section { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin-top: 54px; padding-top: 40px; border-top: 1px solid #8f7e6444; }
.story-section .eyebrow { font-size: 10px; margin-bottom: 16px; }
.story-section h3 { font-family: 'Barchive Serif', serif; font-size: 28px; line-height: 1.55; margin-bottom: 22px; }
.story-section p + p { margin-top: 16px; }
.story-section.stack { display: block; }
.story-section .article-figure { margin-block: 0; }
.article-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin: 28px 0; }
.article-pair .article-figure { margin: 0; }
.article-pair img { max-height: 470px; }
.article-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.article-themes .swatch { height: 70px; }
.article-themes b { display: block; margin-top: 10px; font: 14px Karla, sans-serif; }
dialog .article-end { padding-block: 32px 0; margin-top: 42px; border-top: 1px solid #8f7e6444; font-size: 17px; color: var(--ink); }
@media (max-width: 1050px) and (min-width: 701px) {
  .news-feature { gap: 32px; }
  .news-feature h3 { font-size: 32px; }
  .news-date { flex-wrap: wrap; gap: 6px 16px; }
}
@media (max-width: 700px) {
  .guide-grid > button { grid-template-columns: 110px 1fr; }
  .guide-visual { grid-row: 1 / 4; height: 110px; width: 110px; padding: 8px; }
  .guide-grid .guide-visual img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
  .guide-grid .timeline-preview img { width: 100%; max-height: none; }
  .news-feature { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .news-feature h3 { font-size: 28px; line-height: 1.45; margin-top: 18px; }
  .news-date { margin-top: 16px; gap: 12px; font-size: 11px; }
  .news-date span { font-size: 9px; }
  .news-feature .description { font-size: 13px; }
  .news-feature .description br { display: none; }
  .news-feature .button { min-height: 44px; margin-top: 20px; font-size: 12px; }
  .news-art { width: min(100%, calc((var(--scene-height, 100svh) - 440px) * 1.15)); align-self: center; border-radius: 12px; }
  .news-art > span { font-size: 9px; }
  dialog[data-content='update'], dialog[data-content='first'], dialog[data-content='record'], dialog[data-content='share'] { padding: 32px 24px; }
  dialog > .dialog-close { top: -16px; margin-right: -12px; }
  dialog .article-lead { font-size: 16px; margin-top: 22px; }
  .story-section { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; margin-top: 36px; }
  .story-section h3 { font-size: 24px; }
  .article-pair { gap: 14px; }
  .article-pair .article-figure figcaption { font-size: 10px; }
  .article-themes { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  dialog .guide-steps h3 { font-size: 17px; }
}
@media (max-width: 700px) and (max-height: 760px) {
  .news-art { width: min(100%, calc((var(--scene-height, 100svh) - 500px) * 1.15)); }
}
/* Full-window walkthroughs: previews preserve the complete application surface. */
.guide-showcase{display:grid;grid-template-columns:.72fr 1.28fr;gap:64px;align-items:center;margin-top:30px}
.guide-selector{display:grid;gap:12px}
.guide-selector :is(button,a){border:1px solid transparent;border-radius:14px;background:none;padding:18px 20px;text-align:left;color:var(--ink)}
.guide-selector :is(button,a)[aria-selected=true]{background:#e9e0d080;border-color:#8f7e6455}
.guide-selector h3{font-size:18px;margin:0 0 7px}
.guide-selector p{font-size:13px;line-height:1.8;color:var(--muted)}
.guide-selector span{display:block;margin-top:8px;font-size:11px;color:var(--gold)}
.guide-stage{display:flex;align-items:center;justify-content:center;min-width:0}
.guide-stage button{border:0;padding:0;background:none;width:100%;color:var(--muted)}
.guide-stage img{width:auto;height:auto;max-width:100%;max-height:calc(var(--scene-height, 100svh) - 360px);margin:auto;object-fit:contain}
.guide-stage span{display:block;font-size:12px;margin-top:14px}
/* The scrollable content sits inside a consistently rounded, clipped shell. */
dialog,dialog[data-content]{padding:0;overflow:hidden;max-height:88dvh;border-radius:22px;border-color:#a8997c66}
dialog[open]{display:flex;flex-direction:column}
.dialog-header{position:relative;flex:none;padding:30px 48px 22px;border-bottom:1px solid #8f7e6433}
.dialog-header .eyebrow{margin-bottom:10px;font-size:10px}
.dialog-header h2{padding-right:30px;margin:0;font-size:27px}
.dialog-header>.dialog-close{position:absolute;top:17px;right:19px;float:none;margin:0;width:38px;height:38px;border-radius:50%;background:transparent;font-size:25px}
.dialog-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 44px 38px 48px;margin:12px 8px 12px 0;scrollbar-width:thin;scrollbar-color:#aa9777 transparent}
.dialog-scroll::-webkit-scrollbar{width:6px}
.dialog-scroll::-webkit-scrollbar-thumb{background:#aa9777;border-radius:8px}
.dialog-scroll::-webkit-scrollbar-track{background:transparent}
.app-capture,.editor-detail,.article-figure img[src*='share-editor-paper-desktop']{border:0;border-radius:0;clip-path:inset(0 round 3.2% / 4.1%)}
.article-figure img[src*='guide-register']{clip-path:inset(0 round 5.2% / 3.9%);border-radius:0}
.article-figure img[src*='guide-timeline'],.article-figure img[src*='guide-large']{border-radius:0}
.record-modes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:30px 0;align-items:start}
.record-modes .article-figure{margin:0}
.record-modes h4{font-size:17px;font-weight:500;margin:0 0 10px}
.record-modes p{font-size:13px;margin-bottom:18px}
.record-modes img{max-height:680px}
.record-modes .large-mode img{width:100%;max-height:none}
.record-modes .large-mode{position:sticky;top:0}
.story-section.record-story{display:block}
@media(max-width:1050px) and (min-width:701px){.guide-showcase{gap:28px;grid-template-columns:.85fr 1.15fr}.guide-selector :is(button,a){padding:14px}.guide-selector h3{font-size:16px}}
@media(max-width:700px){
 .guide-showcase{display:flex;flex-direction:column;gap:20px;margin-top:20px}
 .guide-selector{display:flex;gap:6px;width:100%}
 .guide-selector :is(button,a){flex:1;padding:9px 6px;text-align:center;border-color:#8f7e6433;border-radius:9px}
 .guide-selector h3{font-size:11px;line-height:1.6;margin:0}
 .guide-selector p,.guide-selector span{display:none}
 .guide-stage{width:100%}
 .guide-stage img{max-height:calc(var(--scene-height, 100svh) - 375px)}
 .guide-stage span{font-size:11px;margin-top:10px}
 .dialog-header{padding:23px 24px 18px}
 .dialog-header h2{font-size:23px}
 .dialog-scroll{padding:0 18px 24px 24px;margin-right:6px}
 .record-modes{grid-template-columns:1fr;gap:30px}
 .record-modes .large-mode{position:static}
 .record-modes img{max-height:none;width:100%}
}
/* Match the actual 26px registration shell; no extra frame around captures. */
.guide-stage img[src*='guide-register'],.article-figure img[src*='guide-register']{clip-path:inset(0 round 5% / 3.56%)}
.article-figure img[src*='share-editor-paper-desktop'],.guide-stage img[src*='share-editor-paper-desktop'],.editor-detail{clip-path:inset(0 round 3.18% / 4.12%)}
@media(max-width:700px){.editor-detail{clip-path:inset(0 round 7.46% / 4.17%)}}
@media(min-width:701px){
 #guides>.wrap{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:64px;row-gap:14px;align-items:start}
 #guides>.wrap>.eyebrow,#guides>.wrap>h2,#guides>.wrap>.description{grid-column:1;margin:0}
 #guides>.wrap>.description{font-size:14px}
 .guide-showcase{display:contents}
 .guide-selector{grid-column:1;gap:8px;margin-top:10px}
 .guide-selector :is(button,a){padding:14px 18px}
 .guide-stage{grid-column:2;grid-row:1/5;align-self:center}
 .guide-stage img{max-height:calc(var(--scene-height, 100svh) - 220px)}
}
@media(min-width:701px) and (max-height:850px){
 #guides>.wrap{row-gap:10px;column-gap:40px}
 #guides h2{font-size:32px}
 .guide-selector :is(button,a){padding:10px 14px}
 .guide-selector h3{font-size:16px;margin-bottom:4px}
 .guide-selector p{font-size:12px}
 .guide-selector span{margin-top:4px}
}
@media(max-width:700px){.guide-stage img{max-height:calc(var(--scene-height, 100svh) - 430px)}}
/* Independent columns prevent image intrinsic size from stretching text rows. */
@media(min-width:701px){
 #guides>.wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
 .guide-copy{min-width:0}
 #guides .guide-copy>.eyebrow{margin:0 0 18px}
 #guides .guide-copy>.description{margin:20px 0 0;font-size:14px}
 #guides .guide-selector{margin-top:24px;gap:8px}
 #guides .guide-stage{grid-column:auto;grid-row:auto;height:calc(var(--scene-height, 100svh) - 220px);min-width:0;position:relative;align-self:center}
 #guides .guide-stage button{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;height:100%;padding-bottom:34px}
 #guides .guide-stage img{max-height:100%;max-width:100%;width:auto;height:auto;margin:0}
 #guides .guide-stage span{position:absolute;bottom:0;left:0;right:0;margin:0}
}
@media(min-width:701px) and (max-height:850px){#guides>.wrap{gap:40px}.guide-selector span{display:none}#guides .guide-copy>.description{margin-top:14px}#guides .guide-selector{margin-top:18px}}
@media(max-width:700px){
 #guides>.wrap{display:block}
 .guide-copy>.description{margin-bottom:20px}
 .guide-stage{position:relative;height:calc(var(--scene-height, 100svh) - 430px);margin-top:20px}
 .guide-stage button{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;height:100%;padding-bottom:26px}
 .guide-stage img{max-height:100%;max-width:100%;width:auto;height:auto;margin:0}
 .guide-stage span{position:absolute;bottom:0;left:0;right:0;margin:0}
}
/* The header already separates the article. Both examples scroll with the text. */
.article-meta{border-top:0;padding-top:0;margin-top:18px}
.record-modes .large-mode{position:static;top:auto}
.dialog-scroll:focus{outline:none}
.pro-heading{display:flex;align-items:center;gap:14px}
.paid-plan-label{font-family:'Barchive Sans',sans-serif;font-size:12px;letter-spacing:0;font-weight:500;color:var(--gold);padding:3px 10px;border:1px solid #8f7e6455;border-radius:20px}
@media(min-width:701px) and (max-height:850px){
 .hero .garden-window{max-width:min(580px,calc((var(--scene-height, 100svh) - 270px)*1.08))}
 #record .record-window{max-width:460px}
 #record .benefits{margin-top:24px;padding-top:18px}
 #guides>.wrap{grid-template-columns:.95fr 1.05fr}
 #guides .guide-selector :is(button,a){padding:9px 14px}
 #guides .guide-selector h3{font-size:15px}
 #guides .guide-selector p{font-size:12px;line-height:1.7}
 #guides .guide-selector span{display:none}
}
@media(max-width:700px) and (max-height:760px){
 .hero .garden-window{width:min(100%,calc((var(--scene-height, 100svh) - 530px)*1.1))}
 .pro-benefit{padding-block:7px}
}
.plan-kind{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:6px}
@media(max-width:700px){.plan-kind{font-size:10px;margin-top:3px}}
@media(max-width:700px) and (max-height:760px){
 .pro-story figure>img{width:29%;max-height:105px}
 .pro .section-intro .description{font-size:12px;line-height:1.7}
 .pro .section-intro{margin-bottom:12px}
 .pro .plan-line{padding-top:9px}
}
@media(min-width:701px) and (max-height:850px){
 .hero .garden-window{max-width:min(530px,calc((var(--scene-height, 100svh) - 315px)*1.08))}
 .pro-benefit{padding-block:9px}
 .pro .section-intro{margin-bottom:20px}
}
@media(max-width:700px) and (max-height:760px){.hero .garden-window{width:min(100%,calc((var(--scene-height, 100svh) - 533px)*1.1))}}
/* Fit the complete editor, including Save/Share, inside its image viewer. */
#guide-dialog[data-content="editor"] { height: 88dvh; }
#guide-dialog[data-content="editor"] .dialog-scroll { flex: 1; display: flex; }
#guide-dialog[data-content="editor"] #guide-body { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; grid-template-columns: minmax(0,1fr); gap: 14px; }
#guide-dialog[data-content="editor"] #guide-body > picture { display: flex; min-height: 0; width: 100%; height: 100%; justify-content: center; }
#guide-dialog[data-content="editor"] .editor-detail { width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; margin: 0; }
#guide-dialog[data-content="editor"] #guide-body > p { width: 100%; margin: 0; }

.pro-story .capture-label{display:block;margin-top:6px;font-family:"Barchive Sans",sans-serif;font-size:12px;line-height:1.6;font-style:normal;color:var(--muted);white-space:nowrap}
.pro-story .caption-name{font-style:italic}

/* Keep the phone composition balanced without shrinking text to fit a thumbnail. */
@media(max-width:700px){
 .pro-story figure>img{width:29%;max-height:120px}
 .pro-benefit{padding-block:7px}
 .pro-story{gap:12px}
 .pro-story .caption-name{font-size:17px}
}
@media(max-width:700px) and (max-height:760px){
 .hero .garden-window{width:min(100%,220px)}
 .hero.scene{gap:14px}
 .hero .plant-card figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hero .app-section>span:last-child{font-size:7px;white-space:nowrap}
}
@media(max-width:700px) and (max-height:650px){
 .hero .garden-window{width:min(100%,200px)}
 .hero .app-header{padding:6px 8px}
 .hero .app-content{padding:8px}
 .hero .plant-card figcaption{font-size:8px;padding:2px 3px;line-height:1.4}
 .hero .app-nav{padding-block:5px}
 .scene h2{font-size:25px;line-height:1.4}
 #record .split{gap:16px}
 #record .description{font-size:13px;line-height:1.65}
 #record .record-window>.micro:nth-child(2){display:none}
 #record .record-pair img{max-height:90px}
 #record .benefits{margin-top:16px;padding-top:12px}
 .pro h2{font-size:25px}
 .pro>.wrap>.eyebrow{margin-bottom:10px}
 .pro .section-intro{margin-bottom:10px}
 .pro-story{gap:10px}
 .pro-story figure>img{width:24%;max-height:76px}
 .pro-benefit{padding-block:5px}
 .pro-facts>.text-action{margin-top:10px}
 .theme-spectrum{gap:16px}
 .start footer.wrap{margin-top:30px}
 .start .button{margin-top:22px}
}