/* Local photographic backgrounds. Shared treatment keeps the seven chapters connected. */
.topbar{height:66px;background:rgba(7,12,20,.91)}
.brand,.brand img{width:48px;height:48px}
.brand{border-radius:8px}
.brand img{border-radius:8px}
.screen{background:#080e18}
.screen::before{
  z-index:-2;
  opacity:1;
  background-image:linear-gradient(90deg,rgba(6,11,20,.96) 0%,rgba(7,13,23,.91) 27%,rgba(7,13,24,.77) 52%,rgba(7,13,24,.66) 100%),var(--chapter-photo);
  background-repeat:no-repeat;
  background-position:center,var(--chapter-position,center);
  background-size:cover,cover;
}
.screen::after{z-index:-1;background:linear-gradient(0deg,rgba(7,12,20,.31),transparent 24%,transparent 76%,rgba(7,12,20,.13))}
.screen-hero{--chapter-photo:url('assets/photo-hero.jpg');--chapter-position:63% center}
.screen-flow{--chapter-photo:url('assets/photo-workflow.jpg');--chapter-position:67% center}
.screen-story{--chapter-photo:url('assets/photo-story.jpg');--chapter-position:73% center}
.screen-canvas{--chapter-photo:url('assets/photo-canvas.jpg');--chapter-position:62% center}
.screen-edit{--chapter-photo:url('assets/photo-editor.jpg');--chapter-position:75% center}
.screen-end{--chapter-photo:url('assets/photo-next.jpg');--chapter-position:60% center}
.screen-contact{--chapter-photo:url('assets/photo-contact.jpg');--chapter-position:68% center}
.hero-orbit,.hero-orbit-two,.end-mark,.end-glow{display:none}
.hero-switcher{overflow:visible}
.hero-switcher button{position:relative;min-width:0;overflow:visible}
.hero-switcher button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transition:background .25s}
.hero-switcher button.active::after{background:#a9c8ff}
.hero-switcher button.active{background:rgba(111,159,231,.1)}
.hero-visual{width:56%}
.hero-product{transition:top .72s cubic-bezier(.2,.8,.2,1),right .72s cubic-bezier(.2,.8,.2,1),width .72s cubic-bezier(.2,.8,.2,1),height .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1),opacity .55s,box-shadow .4s}
.hero-product-story{right:8%;top:13%;width:295px}
.hero-product-canvas{right:15%;top:28%}
.hero-product-editor{right:5%;top:68%;width:370px}
.hero-editor-preview{display:none}
.hero-visual[data-scene="canvas"] .hero-product-canvas{right:15%;top:28%;transform:rotate(-3deg) scale(1);opacity:1}
.hero-visual[data-scene="story"] .hero-product-story{right:16%;top:32%;width:505px;transform:rotate(-2deg) scale(1);opacity:1}
.hero-visual[data-scene="story"] .hero-product-canvas{right:3%;top:11%;transform:rotate(3deg) scale(.65);transform-origin:top right;opacity:.26}
.hero-visual[data-scene="story"] .hero-product-editor{opacity:.2}
.hero-visual[data-scene="editor"] .hero-product-editor{right:15%;top:28%;width:510px;transform:rotate(-3deg) scale(1);opacity:1}
.hero-visual[data-scene="editor"] .hero-product-canvas{right:3%;top:11%;transform:rotate(3deg) scale(.65);transform-origin:top right;opacity:.24}
.hero-visual[data-scene="editor"] .hero-product-story{opacity:.23}
.hero-visual[data-scene="editor"] .hero-editor-preview{display:flex;position:relative;height:150px;margin:13px 0 16px;padding:13px;align-items:flex-start;justify-content:space-between;background:linear-gradient(120deg,rgba(10,24,47,.15),rgba(7,17,34,.63)),url('assets/photo-next.jpg') center 48%/cover;border:1px solid rgba(179,208,253,.23);color:#e9f2ff;font-size:11px}
.hero-editor-preview i{align-self:center;font-size:25px;font-style:normal;color:white}
.hero-visual[data-scene="editor"] .hero-tracks{gap:10px}
.hero-visual[data-scene="editor"] .hero-tracks i{height:15px}
.resource-links{margin-top:28px}
/* Obsidian and warm ivory form one palette across the whole landing page. */
:root{--bg:#0b0d0f;--panel:#191b1e;--panel-2:#242528;--line:rgba(224,214,198,.18);--text:#f6f3ed;--muted:#bdb7ae;--blue:#e5d3b6;--blue-2:#bfa98e}
body{background:#0b0d0f;color:var(--text)}
.topbar{background:rgba(11,13,15,.91);border-color:rgba(225,214,199,.16)}
.topbar-context{color:#d4cdc3}
.topbar-link{color:#f4efe7;background:rgba(229,211,182,.04);border-color:rgba(229,211,182,.39)}
.topbar-link:hover,.topbar-link:focus-visible{color:#fffaf1;background:rgba(229,211,182,.15);border-color:#e5d3b6}
.scroll-line span{background:#d9c4a3;box-shadow:0 0 13px rgba(215,188,151,.3)}
.dot-nav button:before{background:#8e8980}
.dot-nav button.active:before{background:#ead7ba;box-shadow:0 0 0 5px rgba(226,201,168,.15)}
.dot-nav span,.kicker,.hero-switcher span{color:#e5d3b6}
.kicker span{background:#e5d3b6}
h1,h2{color:#f7f5f0}
h1 em,h2 em{color:#dfcbb0}
.lede{color:#d0cac1}
.primary{background:#e7d5b9;color:#171514;border-color:#f1e0c6;box-shadow:0 10px 30px rgba(144,115,82,.12)}
.primary:hover{background:#f4e8d6}
.secondary{color:#f2ece2;background:rgba(20,19,18,.22);border-color:rgba(229,214,190,.48)}
.secondary:hover{background:rgba(228,210,182,.12);border-color:#e5d3b6}
.line-link,.capability-trigger{color:#f1e8da;border-color:#dcc8aa}
.line-link:hover,.capability-trigger:hover{color:#e7d2b1}
.screen{background:#0b0e11}
.screen::before{background-image:linear-gradient(90deg,rgba(8,10,12,.97) 0%,rgba(9,11,13,.91) 30%,rgba(10,11,13,.76) 58%,rgba(9,10,12,.65) 100%),var(--chapter-photo)}
.screen-hero::before{background-image:linear-gradient(90deg,rgba(7,9,11,.97) 0%,rgba(8,10,12,.9) 28%,rgba(9,10,11,.65) 53%,rgba(8,9,10,.44) 100%),var(--chapter-photo);background-position:center,center 45%}
.screen::after{background:linear-gradient(0deg,rgba(9,10,11,.25),transparent 27%,transparent 76%,rgba(9,10,11,.13))}
.hero-switcher{border-color:rgba(232,217,195,.24)}
.hero-switcher button{color:#c8c0b3;border-color:rgba(232,217,195,.15)}
.hero-switcher button:hover,.hero-switcher button.active{color:#fff9ef;background:rgba(218,189,151,.085)}
.hero-switcher button.active::after{background:#e5d3b6}
.hero-switcher small{color:#aca499}
.hero-product,.product-ui,.flow-node{background:linear-gradient(150deg,rgba(34,34,34,.96),rgba(15,17,18,.97));border-color:rgba(224,208,184,.27);box-shadow:0 28px 65px rgba(0,0,0,.32),inset 0 1px rgba(251,239,220,.06)}
.hero-product-canvas,.hero-visual[data-scene="canvas"] .hero-product-canvas,.hero-visual[data-scene="story"] .hero-product-story,.hero-visual[data-scene="editor"] .hero-product-editor{border-color:rgba(231,210,180,.72);box-shadow:0 28px 75px rgba(0,0,0,.45),0 0 34px rgba(209,176,132,.09)}
.mini-top,.hero-editor-row,.hero-story-chapter,.flow-node span{color:#cfc4b4}
.hero-editor-row b,.hero-story-chapter span,.hero-story-chapter b{color:#ecd5b4}
.hero-canvas-body,.canvas-grid{background-color:#17191a;background-image:radial-gradient(rgba(219,199,171,.17) 1px,transparent 1px)}
.hero-node,.canvas-node{background:#242527;border-color:rgba(215,192,161,.46);box-shadow:0 10px 28px rgba(0,0,0,.23)}
.hero-node small,.canvas-node small,.canvas-node b,.hero-play,.wave-bars,.node-wave{color:#e5d0ad}
.hero-node span,.canvas-node span{color:#bdb6aa}
.hero-link{background:#dbbf99}
.frame-art,.node-image{background:linear-gradient(145deg,#35373a,#8e8072 60%,#c6a98e)}
.node-video{background:linear-gradient(145deg,#343538,#786f68 57%,#b29a83)}
.hero-tracks i,.clip-1{background:#c8aa7f}
.hero-tracks i:nth-child(2),.clip-2,.clip.caption{background:#a9a39b}
.hero-tracks i:nth-child(3),.clip-3,.clip.audio{background:#81796f}
.flow-node small,.flow-note{color:#dec8a7}
.flow-node.node-e{border-color:#d9c3a3;box-shadow:0 0 28px rgba(220,186,143,.08)}
.connection-layer path{stroke:#cfbea5;opacity:.7}
.connection-layer circle{fill:#e7d2b0}
.ui-bar{color:#ece5da;border-color:rgba(227,211,185,.18)}
.ui-bar b,.story-input button,.edit-btn{background:#e5d3b6;color:#181715}
.ui-bar small,.story-input small,.story-progress b,.chapter-list small,.ai-panel small,.timeline-time{color:#d7c2a3}
.story-input{background:rgba(218,186,142,.06);border-color:rgba(221,196,162,.32)}
.story-input button:hover,.edit-btn:hover{background:#f4e5d0}
.story-progress .current{border-color:#d4bb99;background:rgba(209,177,133,.1)}
.chapter-list>div{background:#292725}
.chapter-list em,.chapter-list>div:last-child em{color:#d9c9af}
.story-ui footer{color:#b7aa98}
.canvas-status{background:#2a2927;color:#e8dccb;border-color:rgba(218,195,161,.35)}
.canvas-node:hover,.canvas-node.selected{border-color:#e8d4b3;box-shadow:0 0 0 1px #d9c3a2,0 18px 42px rgba(0,0,0,.37)}
.mini-stage i{background:linear-gradient(0deg,#d5b991,transparent)}
.preview-scene{background:linear-gradient(0deg,rgba(16,17,18,.5),rgba(16,17,18,.1)),url('assets/photo-next.jpg') center 58%/cover}
.preview-scene::after{display:none}
.ai-panel{background:#292725}
.ai-panel p{color:#c4b6a3}
.clip.audio{color:#f4e8d5}
.contact-panel{background:linear-gradient(155deg,rgba(35,33,30,.96),rgba(17,18,18,.97));border-color:rgba(223,204,176,.33);box-shadow:0 35px 85px rgba(0,0,0,.4)}
.contact-panel-head,.contact-row span,.contact-row small,.contact-panel-foot{color:#c9baa6}
.contact-row,.contact-panel-foot{border-color:rgba(224,207,180,.17)}
.contact-panel-foot span{color:#e9d2af}
.resource-links a{color:#e5d0b0;border-color:rgba(222,194,155,.44)}
.mobile-menu{background:#1d1d1c;border-color:rgba(223,201,170,.22)}
.mobile-edit-demo{background:#3a332b;border-color:#d3b990;color:#f8f0e5}
.capability-dialog{background:#1c1c1b url('assets/photo-story.jpg') center/cover;border-color:rgba(227,208,178,.46);color:#f7f2e9}
.capability-dialog::before{content:"";position:absolute;inset:0;background:rgba(18,18,18,.88);z-index:-1}
.capability-dialog-tabs button[aria-selected="true"]{border-color:#e5d3b6}
.dialog-close{background:#302b25;border-color:#86745c}
.capability-columns>div{border-color:rgba(225,207,180,.22)}
.capability-columns p{color:#c6bbab}
.hero-visual[data-scene="editor"] .hero-editor-preview{background-image:linear-gradient(120deg,rgba(18,18,17,.13),rgba(18,18,17,.5)),url('assets/photo-next.jpg');border-color:rgba(229,208,177,.3);color:#f7eedf}
@media(max-width:1250px) and (min-width:701px){
  .hero-visual[data-scene="story"] .hero-product-story{right:7%;width:430px}
  .hero-visual[data-scene="editor"] .hero-product-editor{right:7%;width:430px}
}
@media(max-width:950px) and (min-width:701px){
  .hero-visual[data-scene="story"] .hero-product-story,.hero-visual[data-scene="editor"] .hero-product-editor{right:1%;width:390px}
}
@media(max-width:700px){
  .topbar{height:60px}
  .brand,.brand img{width:43px;height:43px}
  .mobile-menu{top:60px}
  .screen::before{opacity:1;background-image:linear-gradient(90deg,rgba(8,10,12,.94),rgba(9,10,11,.78)),var(--chapter-photo);background-position:center,65% center}
  .hero-visual{width:100%}
  .hero-product-editor{right:0;top:56%;width:375px}
  .hero-visual[data-scene="editor"] .hero-product-editor{right:2%;top:4%;width:350px;transform:scale(.67) rotate(-2deg);transform-origin:top right}
  .hero-visual[data-scene="editor"] .hero-product-canvas{right:0;top:17%;transform:scale(.31);transform-origin:top right}
  .hero-visual[data-scene="editor"] .hero-editor-preview{height:95px;margin:7px 0 9px;font-size:9px}
  .hero-visual[data-scene="story"] .hero-product-story{right:2%;top:9%;width:290px;transform:scale(.69) rotate(-2deg);transform-origin:top right}
  .hero-visual[data-scene="story"] .hero-product-canvas{right:0;top:25%;transform:scale(.28);transform-origin:top right}
  .hero-visual[data-scene="canvas"] .hero-product-canvas{right:3%;top:10%;transform:scale(.48) rotate(-4deg);transform-origin:top right}
}

/* Header hierarchy and locale control */
html,body{height:100%;overflow:hidden}
.stage{height:100svh;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
.stage::-webkit-scrollbar{width:0;height:0;display:none}
.topbar{position:fixed}
.brand{width:auto;height:48px;display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;overflow:visible;background:transparent;box-shadow:none;border-radius:0}
.brand img{width:48px;height:48px;flex:0 0 48px}
.brand-name{color:#f7f3ec;font-size:17px;font-weight:800;letter-spacing:.06em;line-height:1}
.topbar-context{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  color:#f3eee6;
  font-size:clamp(14px,1.15vw,18px);
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.25;
  text-wrap:balance;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.topbar-actions{position:relative;display:flex;align-items:center;gap:18px;margin-left:auto}
.locale-control{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:30px}
.locale-label{display:none}
.locale-toggle{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:5px 0;border:0;background:none;color:#f4eee5;font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer}
.locale-toggle img{width:16px;height:16px;display:block;filter:invert(1);opacity:.82}
.locale-chevron{width:10px;height:10px;display:grid;place-items:center;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.locale-toggle[aria-expanded="true"] .locale-chevron{transform:translateY(2px) rotate(225deg)}
.locale-menu{position:absolute;z-index:75;top:calc(100% + 8px);right:0;display:grid;min-width:142px;padding:6px;background:rgba(20,18,17,.98);border:1px solid rgba(229,211,182,.38);box-shadow:0 18px 40px rgba(0,0,0,.35);backdrop-filter:blur(16px)}
.locale-menu[hidden]{display:none}
.locale-menu button,.locale-menu a{min-height:36px;padding:8px 10px;border:0;background:transparent;color:#cfc7bb;text-align:left;font-size:11px;cursor:pointer;transition:background .2s,color .2s}
.locale-menu button:focus-visible,.locale-menu a:focus-visible,.locale-toggle:focus-visible{outline:2px solid #e5d3b6;outline-offset:3px}
.locale-menu button:hover,.locale-menu a:hover,.locale-menu button[aria-selected="true"],.locale-menu a[aria-selected="true"]{background:rgba(229,211,182,.13);color:#fff8ed}
.topbar-link{font-size:12px;font-weight:700;letter-spacing:.02em}
.end-footer a,.contact-footer a{color:#d9c3a5;text-decoration:underline;text-decoration-color:rgba(217,195,165,.5);text-underline-offset:3px}
.end-footer a:hover,.contact-footer a:hover{color:#fff5e5}
.contact-footer{z-index:6;min-width:0}

/* Contact values stay readable while the copy controls remain keyboard accessible. */
.contact-row{grid-template-columns:minmax(140px,1fr) minmax(0,1.45fr) auto;gap:20px}
.contact-label{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-width:0}
.contact-label b{font-size:13px;font-weight:700;letter-spacing:.08em;color:#f0e8dc;line-height:1.25}
.contact-label small{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:#d4c5b1;line-height:1.25}
.contact-row strong{min-width:0;overflow-wrap:anywhere}
.contact-copy-button{width:34px;height:34px;display:grid;place-items:center;padding:7px;border:1px solid rgba(229,211,182,.42);background:rgba(229,211,182,.06);color:#f5eee4;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.contact-copy-button img{width:16px;height:16px;filter:invert(1);opacity:.88}
.contact-copy-button:hover,.contact-copy-button:focus-visible{background:rgba(229,211,182,.16);border-color:#e5d3b6}
.contact-copy-button:active{transform:translateY(1px)}
.contact-copy-button[data-copy-state="success"]{border-color:#b6d6bd;background:rgba(126,177,137,.16)}
.contact-copy-button[data-copy-state="error"]{border-color:#dca9a0;background:rgba(180,105,91,.14)}
.contact-copy-button:disabled{cursor:wait;opacity:.65}
.contact-copy-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:700px){
  .topbar{padding-left:18px;padding-right:16px}
  .brand{height:43px;gap:7px}
  .brand img{width:43px;height:43px;flex-basis:43px}
  .brand-name{font-size:13px;letter-spacing:.04em}
  .topbar-context{position:static;transform:none;display:block;flex:1;min-width:0;max-width:none;margin:0 8px;font-size:11px;letter-spacing:.04em;text-align:center;white-space:normal}
  .topbar-actions{min-width:auto;margin-left:auto;margin-right:4px;gap:8px}
  .locale-toggle{font-size:10px}
  .topbar-link{display:none}
  .menu{margin-left:0}
  .locale-menu{right:-2px}
  .end-footer,.contact-footer{font-size:8px;letter-spacing:.04em}
}

@media(max-width:950px){
  .contact-row{grid-template-columns:minmax(128px,1fr) minmax(0,1.35fr) auto}
}

@media(max-width:700px){
  .contact-row{grid-template-columns:minmax(84px,.72fr) minmax(0,1fr) auto;gap:8px}
  .contact-label b,.contact-label small{font-size:10px}
  .contact-copy-button{width:30px;height:30px;padding:6px}
  .contact-copy-button img{width:14px;height:14px}
  .contact-copy,.contact-panel,.contact-panel-head,.contact-panel-foot,.contact-row{min-width:0}
  .contact-panel{width:100%}
  .contact-panel-head span,.contact-panel-foot span,.contact-row strong{min-width:0;overflow-wrap:anywhere;word-break:break-word}
  .contact-panel-foot{gap:10px}
  .contact-copy h2{margin-bottom:12px}
  .contact-back{margin-top:8px}
  .contact-back .line-link{margin-top:0}
  .contact-footer{padding-top:7px;background:linear-gradient(180deg,transparent,rgba(10,12,13,.82) 38%,rgba(10,12,13,.94));}
}

@media(max-width:700px) and (max-height:700px){
  .screen-contact{justify-content:flex-start;gap:12px;padding-top:70px;padding-bottom:42px}
  .contact-panel{padding:11px 14px 8px}
  .contact-panel-head{padding-bottom:10px}
  .contact-row{min-height:50px}
  .contact-row strong{font-size:clamp(15px,4.7vw,18px)}
  .contact-panel-foot{padding-top:10px;padding-bottom:2px}
  .contact-panel-foot span{font-size:clamp(14px,4vw,17px);line-height:1.3}
}

@media(max-width:390px){
  .contact-row{grid-template-columns:minmax(78px,.65fr) minmax(0,1fr) auto}
}