/* Framekeep / 2026-10-16. Original photo-studio presentation, shared real editor. */
:root{--paper:#f4f5f5;--paper-2:#e9edef;--surface:#fff;--ink:#17282b;--ink-2:#405155;--muted:#596a6d;--line:#dce3e4;--line-strong:#a6b5b8;--accent:#156956;--accent-hover:#105541;--accent-soft:#e6f1ec;--r-media:18px;--r-ctl:9px;--shadow-stage:0 8px 32px #15282b08}
body{background:var(--paper)}
.refresh-icon,.ratio-icon{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle}
.site-head{min-height:72px;padding:12px clamp(20px,3vw,40px);background:#fff;border-bottom:1px solid var(--line);gap:16px}
.brand{gap:12px}.brand-name{letter-spacing:-.05em;font-size:1.35rem;font-weight:780}.brand-desc{padding-left:12px;border-left:1px solid var(--line);font-size:.75rem}
.site-nav{margin-left:auto}.site-nav a{font-size:.8125rem;font-weight:600}
.language-menu{position:relative}.language-menu summary{display:flex;align-items:center;gap:7px;min-height:44px;cursor:pointer;font-size:.8125rem;list-style:none;padding:0 8px}
.language-menu summary::-webkit-details-marker,.work-menu summary::-webkit-details-marker{display:none}
.language-menu summary .refresh-icon:last-child{width:14px;height:14px}
.language-menu ul{position:absolute;right:0;top:100%;z-index:50;min-width:152px;display:grid;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #17282b16}
.language-menu ul a{padding:0 12px;border-radius:6px}.language-menu ul a:hover{background:var(--accent-soft)}
.language-menu:not([open]) ul{display:none}
.btn.primary,.btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover,.btn.accent:hover{background:var(--accent-hover)}
.hero{gap:48px;padding-block:52px 48px}.hero-copy{padding-top:24px}.hero-copy .eyebrow{letter-spacing:.06em;font-size:.75rem}
.hero h1{font-size:clamp(2.4rem,4vw,3.4rem);line-height:1.2;letter-spacing:-.055em;max-width:17em}
.hero .lead{font-size:1rem;color:var(--ink-2);line-height:1.8;max-width:30rem}
.hero-task-trail{display:flex;align-items:center;gap:20px;margin:24px 0;color:var(--accent);font-size:.75rem;font-weight:650}
.hero-task-trail span{display:flex;align-items:center;gap:7px}.hero-task-trail span+span{border-left:1px solid var(--line);padding-left:20px}
.hero .actions{gap:12px}.hero .demo-stage{padding:12px;background:#273336;border:0;border-radius:22px;box-shadow:0 16px 50px #1b303117}
.demo-toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--surface);margin-bottom:12px}
.demo-toggle .seg-btn{border:0;border-radius:7px;min-height:40px;font-size:.8125rem;padding-inline:20px}
.demo-strip{gap:10px}.demo-pv-frame{height:126px;background:#e5eaeb;border:1px solid #d9e0e1;border-radius:10px;padding:7px}
.demo figcaption{line-height:1.6;font-size:.6875rem}.demo-state{font-size:.75rem}
.evolution-section{padding-top:36px}.feature-grid{gap:16px}.feature-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:none}
.feature-card h3{font-size:1.1rem}.feature-card p{font-size:.875rem;line-height:1.8}.feature-number{margin-bottom:16px}.feature-visual{margin-top:18px}
.band{padding-block:32px}.site-foot{background:#fff}
.app{max-width:1560px;padding-inline:clamp(12px,2.5vw,36px)}
.intake{padding-top:28px}.dropzone{padding:32px;border:1px solid var(--line);gap:40px;border-radius:22px;box-shadow:0 12px 40px #263b3d06}
.intake h2{letter-spacing:-.04em;font-size:clamp(1.6rem,3vw,2.4rem)}
.intake-figure{background:#263235;padding:12px;border-radius:16px}.intake-figure img{border-radius:9px}.intake-figure figcaption{color:#e4eded;font-size:.6875rem;padding:5px 2px 0}
.mark-diagram{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.mark-diagram img{max-width:320px}.mark-diagram p{font-size:.8125rem}
.studio{gap:20px;padding-top:18px;align-items:start}
.studio-bar{display:flex;align-items:center;gap:12px;background:var(--surface);padding:8px 12px;border:1px solid var(--line);border-radius:13px}
.steps{background:transparent;padding:0;gap:6px;overflow:visible}.step-tab{font-size:.8125rem;min-height:44px;padding:0 14px 0 10px;border-radius:8px;font-weight:650}
.step-tab[aria-current="step"]{background:var(--accent-soft);color:var(--accent);box-shadow:none}.step-tab .step-n{border:0;background:var(--paper-2);font-size:.6875rem;width:21px;height:21px}.step-tab[aria-current="step"] .step-n{background:var(--accent)}
.studio-actions{align-items:center;flex-wrap:nowrap;gap:4px}.studio-actions .btn.hist{min-width:40px;min-height:40px;padding:0 10px}.hist-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.work-menu{position:relative}.work-menu>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;min-height:40px;background:#fff;padding:0 12px}
.work-menu-content{position:absolute;right:0;top:calc(100% + 8px);z-index:40;display:grid;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 12px 32px #17282b16;gap:4px}
.work-menu:not([open]) .work-menu-content{display:none}.work-menu-content .btn{justify-content:flex-start;min-height:44px;text-align:left;border:0;background:#fff;color:var(--ink);font-size:.8125rem;white-space:normal}
.work-menu-content .btn:hover{background:var(--paper)}.work-menu-content #clear{color:var(--err)}
.studio-caption{display:flex;align-items:center;gap:7px;font-size:.6875rem;font-weight:700;color:var(--muted);letter-spacing:.04em;margin:0 0 10px 3px}
.studio-caption-mark{width:6px;height:6px;background:var(--accent);border-radius:50%}
.stage-panel{padding:20px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-stage)}
.insp-title{display:flex;gap:9px;align-items:center;font-size:1.125rem;font-weight:750;letter-spacing:-.025em;margin-bottom:10px}.insp-title .refresh-icon{color:var(--accent);width:21px;height:21px}
.status-msg{font-size:.8125rem;line-height:1.6;font-weight:600;border-bottom:1px solid var(--line);padding:0 0 12px;margin-bottom:14px}
.view-toggle{background:var(--paper);padding:3px;gap:3px;border-radius:10px;margin-bottom:14px}.view-toggle .seg-btn{border:0;border-radius:7px;font-size:.8125rem;min-height:40px}.seg-btn[aria-pressed="true"]{background:var(--ink);color:#fff}
.filmstrip .rail-title{font-size:.6875rem;font-weight:600;letter-spacing:.025em;margin:0 0 9px}
.pv{padding:0;border:1px solid var(--line);overflow:hidden;border-radius:12px;box-shadow:none}.pv[data-output="true"]{border-color:#7da998;box-shadow:0 0 0 1px #7da99822}
.pv-frame{height:300px;padding:12px;background:#263235;border-radius:0;overflow:hidden}
.pv figcaption{padding:12px 10px;margin:0;gap:5px 7px;min-height:95px}.pv-name{display:inline-flex;align-items:center;gap:5px;font-size:.75rem}.ratio-icon{width:17px;height:17px;color:var(--muted)}
.pv-kind,.pv-cut{font-size:.6875rem}.badge{font-size:.6875rem;border-radius:5px}.pv-cut{font-weight:600}
.image-rail{gap:12px;padding-top:0;padding-bottom:4px}.image-rail>.pv{flex-basis:min(88%,340px)}
.rail-navigation{min-height:42px;margin:3px 0}.rail-navigation button{height:44px}
.preview-actions{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding-top:12px}.preview-actions .btn{font-size:.75rem;min-height:40px}.preview-actions .task-icon{width:17px;height:17px;margin-right:6px}
#preview-mode-help{font-size:.6875rem;margin:9px 0 6px;color:var(--muted)}.sim-note{font-size:.625rem;line-height:1.65;color:var(--muted)}
.inspector{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 8px 28px #1b303105}
.suggest{border:0;background:var(--paper);padding:16px;border-radius:11px}.suggest[data-kind="suggest"]{border:1px solid #bcd8cb;background:var(--accent-soft)}.suggest-text{font-size:.8125rem;line-height:1.8}.suggest-action-row .btn{min-height:42px;font-size:.8125rem;padding-inline:14px}
.studio-detail{padding:8px 0;margin-top:8px}.studio-detail>summary{font-size:.8125rem;min-height:46px;line-height:1.5}.inline-details>summary{font-size:.8125rem;min-height:46px}
.loss-table{font-size:.6875rem}.loss-table th,.loss-table td{padding-block:9px}
.zone-switch{gap:7px}.zone-button{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:7px;row-gap:3px;padding:9px;min-height:64px;border-radius:9px;font-size:.8125rem}
.zone-button .zone-dot{width:19px;height:19px}.zone-dot .task-icon{width:19px;height:19px}.zone-state{grid-column:2;margin:0;font-size:.625rem}.zone-button[aria-pressed="true"]{box-shadow:none;border:1px solid #7da998;background:var(--accent-soft)}
.mark-actions{margin-bottom:10px;gap:7px}.mark-actions .btn{min-height:40px;font-size:.75rem}.draw-hint{font-size:.6875rem;line-height:1.5;padding:7px 9px;border-left-width:2px}
.stage-scroll{padding:12px;border-radius:10px;background-color:#dfe5e6;background-image:linear-gradient(45deg,#d6dedf 25%,transparent 25%),linear-gradient(-45deg,#d6dedf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6dedf 75%),linear-gradient(-45deg,transparent 75%,#d6dedf 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.tool-row{gap:6px;margin-top:9px}.tool-row .chip,.tool-row .btn{min-height:40px;font-size:.75rem}
.result-frame,.cmp-frame{background:#263235;padding:12px;border-radius:12px}.result-frame.final{min-height:260px}.cmp-frame{height:300px}
.export-modes{margin:10px 0 16px;background:var(--paper);border-radius:10px}.export-modes button{font-size:.8125rem}
.set-stage-cards figure{padding:10px;background:#263235;border:0;border-radius:12px}.set-stage-cards figcaption{background:#fff;color:var(--ink);padding:10px;border-radius:7px;margin-top:10px}.set-stage-cards canvas{border-radius:4px}
.savebar{background:#fff;backdrop-filter:none;box-shadow:0 -4px 20px #17282b05;min-height:68px}.savebar .btn{min-height:44px;font-size:.8125rem}.save-reason,.notice{font-size:.6875rem;line-height:1.55}
.savebar .notice[data-kind="quiet"]{font-size:0}.spec{margin-bottom:18px}.spec div{font-size:.8125rem}.delivery-panel h3{font-size:1rem}
@media(min-width:1100px){
 .studio,.app[data-step="save"][data-export-mode="set"] .studio{grid-template-columns:minmax(0,1fr) 310px;gap:20px}
 .pv-list.image-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;cursor:default}
 .pv-list.image-rail>.pv{min-width:0}.pv-frame{height:285px}.filmstrip>.rail-navigation{display:none}
 .stage-panel{padding:22px}.preview-actions{margin-top:14px}.studio-caption{margin-top:2px}.inspector{margin-top:27px;position:sticky;top:16px}
 .set-stage-cards.image-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;cursor:default}#delivery-stage>.rail-navigation{display:none}
}
@media(max-width:1099px){.studio{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "stage" "insp"}.inspector{padding:16px}.pv-frame{height:min(330px,40vh)}}
@media(max-width:600px){
 .site-head{min-height:58px;padding:6px 14px;gap:10px;flex-wrap:nowrap}.brand-desc{display:none}.brand-name{font-size:1.15rem}.brand-mark{width:20px;height:20px}.brand{gap:7px}.site-nav{margin-left:auto}.site-nav a{font-size:.6875rem}.language-menu summary{gap:4px;padding:0;min-height:44px;font-size:.6875rem}.language-menu summary .refresh-icon:first-child{width:16px;height:16px}
 .app{padding-inline:10px}.studio{gap:12px;padding-top:12px}.studio-bar{padding:5px;gap:5px;flex-wrap:nowrap}.steps{display:flex;width:auto;flex:1;gap:1px}.step-tab{padding:0 7px;font-size:.625rem;gap:4px;min-height:42px;white-space:nowrap}.step-tab .step-n{width:16px;height:16px;font-size:.5625rem}.studio-actions{width:auto;gap:2px}.studio-actions .btn.hist{width:32px;min-width:32px;padding:0;min-height:42px}.work-menu>summary{padding:0 6px;border:0;min-height:42px}.work-menu summary>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.work-menu .refresh-icon{width:19px;height:19px}.work-menu-content{min-width:230px}
 .studio-caption{display:none}.stage-panel{padding:12px;border-radius:15px;box-shadow:none}.insp-title{font-size:1rem;line-height:1.4;margin-bottom:8px}.insp-title .refresh-icon{width:19px;height:19px}.status-msg{font-size:.75rem;line-height:1.6;padding-bottom:10px;margin-bottom:10px}.view-toggle{margin-bottom:11px}.view-toggle .seg-btn{font-size:.6875rem;min-height:42px;padding-inline:5px}
 .pv-frame{height:clamp(245px,36vh,310px);padding:10px}.pv figcaption{min-height:96px}.image-rail>.pv{flex-basis:88%}.preview-actions{display:flex;flex-wrap:nowrap;padding-top:10px}.preview-actions .btn{flex:1;min-width:0;padding-inline:8px;font-size:.6875rem;min-height:44px}.preview-actions .task-icon{width:16px;height:16px}
 .zone-button{padding:8px 6px;grid-template-columns:16px minmax(0,1fr);gap:3px 5px;font-size:.6875rem;min-height:62px}.zone-dot .task-icon{width:16px;height:16px}.zone-state{font-size:.5625rem;line-height:1.5}.protection-panel .fine{font-size:.625rem;margin-top:6px}.mark-actions .btn{min-height:44px}.tool-row .chip,.tool-row .btn{min-height:44px}.tool-row .zoom{margin-left:auto}
 .inspector{border-radius:15px;padding:14px}.suggest{padding:13px}.suggest-text{font-size:.75rem}.studio-detail summary{font-size:.75rem}.savebar{min-height:68px;padding-inline:12px;margin-inline:-10px}.save-text{min-width:0}.savebar #next-step{max-width:52%;padding-inline:14px;font-size:.75rem}.save-reason,.notice{font-size:.625rem}
 .hero{padding:30px 0 28px;gap:28px}.hero-copy{padding-top:0}.hero h1{font-size:2rem;line-height:1.3}.hero .lead{font-size:.875rem;line-height:1.85}.hero-task-trail{gap:10px;margin:20px 0;font-size:.6875rem}.hero-task-trail span+span{padding-left:10px}.hero-task-trail .refresh-icon{width:17px;height:17px}.hero .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero .btn.large{padding-inline:8px;font-size:.8125rem;min-height:48px}.hero .demo-stage{padding:9px;border-radius:17px}.demo-pv-frame{height:100px;padding:5px}.demo-strip{gap:7px}.demo-pv p{font-size:.625rem}.demo figcaption{font-size:.625rem}
 .intake{padding-block:20px 28px}.dropzone{padding:20px;gap:24px;border-radius:16px}.intake h2{font-size:1.5rem}.intake .lead{font-size:.875rem}.intake .actions{display:grid;grid-template-columns:1fr;gap:8px}.intake .actions .btn{min-height:46px;justify-content:center}.mark-diagram{padding-top:15px;margin-top:15px}.mark-diagram p{font-size:.75rem}.mark-diagram small{font-size:.625rem}.intake-figure{padding:9px}.feature-card{padding:20px}.evolution-section{padding-top:24px}
}
@media(max-width:359px){.step-tab{padding-inline:4px}.step-tab .step-n{display:none}.site-nav{display:none}.preview-actions{flex-wrap:wrap}.preview-actions .btn{flex-basis:100%}.tool-row .zoom{margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* First entry shows the same measured demo as the home page, with real next actions. */
.value-limit{font-size:.75rem;line-height:1.7;color:var(--muted);max-width:38em;margin-top:12px}
.value-zones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:.75rem;font-weight:600;color:var(--ink-2)}
.value-zones>span{display:flex;align-items:center;gap:6px}.value-zones .task-icon{width:18px;height:18px}.value-ratios{font-variant-numeric:tabular-nums;color:var(--accent)}
.intake-proof{min-width:0}.proof-label{font-size:.75rem;font-weight:700;color:var(--ink-2);margin-bottom:10px}
.intake-proof .demo-stage{background:#263235;border-radius:12px;padding:10px}.intake-proof .demo-pv-frame{height:104px}.intake-proof>.fine{font-size:.6875rem;margin-top:10px;line-height:1.7}
.intake h2{white-space:pre-line;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.3}.intake .lead{font-size:.9375rem;line-height:1.9;max-width:35em}
.dropzone{grid-template-areas:"copy" "proof" "start";align-items:start;gap:20px}.intake-copy{grid-area:copy}.intake-start{grid-area:start}.intake-proof{grid-area:proof}
@media(min-width:900px){.dropzone{grid-template-areas:"copy proof" "start proof";grid-template-rows:auto 1fr;gap:20px 40px}.intake-proof .demo-canvas{width:auto!important;height:auto!important;max-width:100%;max-height:300px}}
@media(max-width:600px){
 .dropzone{padding:18px;gap:26px}.intake .eyebrow{font-size:.625rem;line-height:1.7}.intake h2{font-size:1.75rem}.intake .lead{font-size:.8125rem;line-height:1.8}
 .value-limit{font-size:.6875rem}.value-zones{font-size:.6875rem;margin-top:18px;gap:10px}.intake-proof .demo-pv-frame{height:84px}.intake-proof .demo-toggle .seg-btn{min-height:44px}
 .studio-actions .btn.hist{width:44px;min-width:44px;min-height:44px}.work-menu>summary{min-width:40px;min-height:44px;justify-content:center}.step-tab{min-height:44px;padding-inline:6px}.step-tab .step-n{display:none}.view-toggle .seg-btn{min-height:44px}
 .dropzone{gap:16px}.intake-start .actions{margin-top:0}.intake-proof .demo-stage{display:none}.intake-proof .demo-state{display:none}.intake-proof .demo-strip{gap:6px}.intake-proof .demo-pv-frame{height:88px;padding:4px}.intake-proof .proof-label{font-size:.6875rem;margin-bottom:7px}.intake-proof figcaption{font-size:.625rem;line-height:1.6}.intake-proof .demo-toggle{margin-bottom:4px}.intake-start .btn.large{font-size:.75rem;padding-inline:10px}.intake-start .fine{font-size:.625rem;line-height:1.7}.intake-start .value-zones{display:none}
}
