:root {
  --ink: #292613;
  --ink-2: #3d3518;
  --paper: #fffaf0;
  --violet: #a96808;
  --peach: #a54b0f;
  --line: rgba(45, 38, 19, .16);
  --line-dark: #e6d8b8;
  --muted: #786c50;
  --text: #4d452f;
}
body { background: var(--paper); }
em { color: #ad5417; }
.site-header { background: #ffde59; color: var(--ink); border-bottom: 1px solid #e8ba32; }
.brand-mark span { background: var(--ink); }
.desktop-nav { color: #4f4529; }
.desktop-nav a:hover, .footer a:hover { color: #b65a13; }
.nav-account { border-color: #8b742a; background: rgba(255,255,255,.22); }
.nav-account:hover { background: var(--ink); color: #fff; }
.hero { background: #ffde59; color: var(--ink); }
.hero-copy { padding-top: 64px; padding-bottom: 72px; }
.eyebrow { color: #8a4b08; }
.hero h1 { margin: 30px 0 26px; white-space: normal; max-width: 700px; overflow-wrap: normal; }
.hero-lead { color: #514626; max-width: 530px; margin-bottom: 28px; }
.hero-studio { background: #f5c941; border-left: 1px solid rgba(80,56,13,.09); }
.hero-studio:after { background: #f6a52c; opacity: .5; }
.hero-canvas { border: 1px solid #eadcb3; box-shadow: 0 24px 64px rgba(91,56,0,.13); }
.floating-note { color: var(--ink); background: #fff6d8; border: 1px solid #e8ce82; box-shadow: 0 14px 40px rgba(71,47,0,.13); }
.floating-note small { color: #8d7549; }
.note-dot { background: #ef8e29; box-shadow: 0 0 0 7px rgba(239,142,41,.17); }
.note-icon { color: #c16b13; }
.vertical-label, .hero-index { color: #6a581e; }
.hero-index { border-top-color: #d9ad29; }
.button-primary { background: var(--ink); color: #fff; }
.button-primary:hover { background: #794a0c; color: #fff; }
.button-ghost { color: var(--ink); border-color: #806d39; }
.button-ghost:hover { background: var(--ink); color: #fff; }
.hero-start { max-width: 550px; background: rgba(255,249,223,.86); border: 1px solid #e4bc45; border-radius: 19px; padding: 18px 20px 14px; box-shadow: 0 10px 28px rgba(108,70,0,.07); }
.start-kicker { display: block; font: 700 10px Archivo,Arial,sans-serif; letter-spacing: .13em; color: #9b6311; margin-bottom: 13px; }
.hero-start label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.hero-start-fields { display: flex; gap: 9px; }
.hero-start input { min-width: 0; flex: 1; height: 55px; padding: 0 16px; background: #fff; color: var(--ink); border: 1px solid #cfbb7c; border-radius: 9px; outline: none; }
.hero-start input:focus { border-color: #a9610b; box-shadow: 0 0 0 3px rgba(197,115,19,.18); }
.hero-start .button { border-radius: 9px; min-width: 160px; }
.hero-start p { margin: 11px 0 0; color: #6b5b36; font-size: 11px; line-height: 1.5; }
.hero-start .form-error { margin: 0 0 13px; }
.hero-under { color: #655424; margin-top: 24px; }
.hero-under a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.sparkle { color: #b96015; }
.intro-section, .faq-section { background: #fffaf0; }
.faq-layout { grid-template-columns: minmax(0,2fr) minmax(0,3fr); }
.section-topline { color: #766848; }
.section-heading-row h2 span, .frames-section h2 span, .story-detail-section h2 span, .faq-layout h2 span { color: #a1814c; }
.section-heading-row p, .story-next p, .story-feature-copy p, .catalog-content p { color: #625942; }
.story-feature, .catalog-card { background: #fff0c4; }
.story-feature-copy, .catalog-content { background: #fff0c4; }
.small-label { color: #a45e0c; }
.meta-line span { border-color: #ccb98b; color: #584b32; }
.story-next>span, .catalog-more-icon, .empty-icon { color: #d78b12; }
.text-link:hover, .project-row:hover strong { color: #a45e0c; }
.process-section, .frames-section { background: #fff1cd; }
.step { background: #fffdf7; border: 1px solid #f0dfa8; }
.step-symbol { color: #da8a11; }
.step p, .process-footnote { color: #6e624a; }
.statement-section { background: #f6b53f; color: #30270e; }
.statement-inner .small-label { color: #76501a; }
.statement-star { color: #fff2b6; opacity: .75; }
.end-cta { background: #ffe078; }
.end-cta .button-primary { background: var(--ink); }
.end-cta .button-primary:hover { background: #794a0c; }
.footer { background: #312b18; }
.footer .brand-mark span { background: #ffdb61; }
.footer-main p, .footer-bottom { color: #d3c9a8; }
.footer-links { color: #f4eacb; }
.page-hero, .story-page-hero { background: #ffde59; color: var(--ink); }
.page-hero p, .story-page-copy p, .story-stats span, .quiet-note { color: #554927; }
.story-page-copy .small-label { color: #985609; }
.back-link { color: #66532b; }
.back-link:hover { color: #aa5610; }
.story-detail-text { color: #5d553e; }
.detail-rule span { color: #8d784f; }
.catalog-header { color: #806e48; border-bottom-color: #e7d9b8; }
.catalog-more { border-color: #d8c596; }
.auth-section, .form-page, .project-page, .account-section, .document-page, .photo-step-section { background: #fff5dc; color: var(--ink); }
.auth-intro .small-label, .form-page .small-label, .account-top .small-label, .project-head .small-label, .document-page .small-label { color: #ad6611; }
.auth-intro p, .form-page-grid>div:first-child>p, .account-top p, .project-head p, .document-lead, .document-page p:not(.document-lead) { color: #685c40; }
.form-page-grid>div:first-child>p a { text-decoration: underline; }
.auth-panel, .account-panel { background: #fffdf7; border: 1px solid #eee0be; box-shadow: 0 12px 38px rgba(102,77,25,.05); }
.auth-panel .panel-index, .account-panel .panel-index { color: #9e651d; }
.auth-panel>p, .transaction-panel p, .empty-state p { color: #6b614d; }
.auth-panel input:not([type=hidden]):not([type=checkbox]), .auth-panel select { border-color: #dacba9; }
.auth-panel input:focus, .auth-panel select:focus { border-color: #bd7b18; box-shadow: 0 0 0 3px rgba(204,137,24,.16); }
.auth-panel .button-primary:hover, .button-small:hover { background: #84530d; }
.fineprint { color: #766c58!important; }
.demo-code { background: #fff0bf; color: #5b451d; }
.checkline input { accent-color: #b87516; }
.soft-panel { background: #fff0c6; }
.soft-panel p, .balance-card p { color: #655638; }
.balance-card { background: #ffdf6b; border: 1px solid #e5bd3f; }
.balance-card .panel-index { color: #8a590e; }
.balance-value span { color: #c27713; }
.button-disabled { background: #d7c489; color: #6d5c32; }
.project-row small, .progress-list li { color: #84775f; }
.project-row .project-thumb { overflow: hidden; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-preview { overflow: hidden; border: 1px solid #ebdbb9; }
.project-photo { width: 100%; height: 530px; object-fit: contain; background: #fff; }
.status-pill { border-color: #bba569; }
.delete-photo-form { margin-top: 22px; }
.delete-photo-form button { border: 0; padding: 0; background: none; color: #954916; text-decoration: underline; font-size: 13px; }
.photo-step-section { min-height: calc(100vh - 82px); padding: 80px 0 115px; }
.photo-step-grid { display: grid; grid-template-columns: 1fr 470px; gap: 10%; align-items: center; }
.photo-step-copy h1 { font-size: clamp(50px,6vw,88px); line-height: 1.02; letter-spacing: -.05em; margin: 28px 0; }
.photo-step-copy>p { max-width: 590px; color: #61563d; line-height: 1.75; font-size: 17px; }
.photo-guidance { display: flex; align-items: center; gap: 14px; margin-top: 38px; padding: 20px; max-width: 540px; background: #ffe48a; border-radius: 12px; }
.photo-guidance>span { font-size: 27px; color: #9e6110; }
.photo-guidance strong, .photo-guidance small { display: block; }
.photo-guidance strong { font-size: 14px; }
.photo-guidance small { font-size: 11px; color: #675634; margin-top: 4px; }
.upload-panel { background: #fffdf8; border: 1px solid #e8d8b2; border-radius: 17px; padding: 34px; box-shadow: 0 20px 55px rgba(91,67,20,.08); }
.upload-panel .panel-index { color: #a86b19; }
.upload-drop { min-height: 320px; margin-top: 20px; border: 2px dashed #dcb64d; border-radius: 12px; background: #fff8e1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; padding: 25px; cursor: pointer; }
.upload-drop:hover { background: #fff2cb; }
.upload-symbol { display: grid; place-items: center; width: 65px; height: 65px; border-radius: 50%; background: #ffdf66; color: #5d4111; font-size: 40px; line-height: 1; margin-bottom: 8px; }
.upload-drop strong { font-size: 19px; }
.upload-drop small { color: #766849; font-size: 12px; }
.upload-drop input { max-width: 100%; margin-top: 11px; font-size: 12px; }
.upload-panel .checkline { margin: 24px 0 8px; }
.upload-panel .form-button { width: 100%; }
.upload-panel .fineprint { margin-top: 19px; }
.upload-demo { cursor: default; }
@media(max-width:1100px) { .hero h1 { font-size: clamp(40px,4.7vw,61px); } .hero-start-fields { flex-wrap: wrap; } .hero-start-fields .button { width: 100%; } .photo-step-grid { gap: 4%; grid-template-columns: 1fr 430px; } }
@media(max-width:760px) {
  .site-header { border-bottom-color: #d5a522; }
  .mobile-menu summary span { background: var(--ink); }
  .mobile-menu-panel { background: #fff6d5; border-color: #d6bb6b; box-shadow: 0 16px 35px rgba(68,49,11,.18); }
  .mobile-menu-panel a { border-bottom-color: #e8d5a5; }
  .hero-copy { padding-top: 55px; padding-bottom: 45px; }
  .hero h1 { font-size: clamp(42px,10vw,66px); }
  .hero-studio { background: #f5c941; border-left: 0; border-top: 1px solid #d9b33e; }
  .hero-start { max-width: none; }
  .hero-start-fields { flex-direction: row; flex-wrap: nowrap; }
  .hero-start-fields .button { width: auto; }
  .photo-step-section { min-height: calc(100vh - 66px); padding: 46px 0 82px; }
  .photo-step-grid { display: block; }
  .photo-step-copy .back-link { margin-bottom: 35px; }
  .photo-step-copy h1 { margin: 20px 0; }
  .photo-step-copy>p { font-size: 15px; }
  .photo-guidance { margin-top: 22px; }
  .upload-panel { margin-top: 30px; padding: 24px; }
  .upload-drop { min-height: 280px; }
  .project-photo { height: 360px; }
}
@media(max-width:500px) {
  .hero-start-fields { flex-direction: column; }
  .hero-start-fields .button { width: 100%; }
  .hero-start { padding: 16px; }
  .upload-drop { min-height: 245px; }
  .photo-guidance { align-items: flex-start; }
  .project-photo { height: 310px; }
}

/* Middle-inspired Lumetrix direction: bold type, playful bento blocks and
   yellow/violet contrast. The reference informs the system, not its assets. */
:root {
  --ink: #35235e;
  --ink-2: #503784;
  --paper: #fffdf7;
  --violet: #503784;
  --violet-light: #ddd0f3;
  --peach: #fbc71f;
  --line: rgba(53, 35, 94, .2);
  --line-dark: #ded7e7;
  --muted: #756b83;
  --text: #43374f;
}
body { background: var(--paper); }
h1, h2, h3 { font-family: Manrope, Arial, sans-serif; font-weight: 800; }
em { color: var(--violet); }
.site-header { background: #fbc71f; border-bottom: 1px solid rgba(53,35,94,.16); }
.brand { font-weight: 800; }
.brand-mark span { background: var(--violet); }
.desktop-nav { color: var(--ink); font-weight: 700; }
.desktop-nav a:hover, .footer a:hover { color: #ae70f2; }
.nav-account { background: var(--violet); border: 1px solid var(--violet); color: #fff; font-weight: 700; border-radius: 7px; }
.nav-account:hover { background: #6f46ab; color: #fff; }
.button { border-radius: 7px; font-weight: 700; }
.button-primary { background: var(--violet); color: #fff; }
.button-primary:hover, .auth-panel .button-primary:hover, .button-small:hover { background: #7145b0; color: #fff; }
.hero { background: #fbc71f; position: relative; }
.hero-centered { min-height: 700px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 78px 0 68px; position: relative; }
.hero .eyebrow { justify-content: center; gap: 13px; color: var(--violet); font-size: 11px; letter-spacing: .15em; }
.hero .eyebrow-line { width: 23px; }
.hero h1 { margin: 30px 0 22px; max-width: 1140px; font-size: clamp(59px, 7.2vw, 113px); font-weight: 800; line-height: .99; letter-spacing: -.078em; }
.hero h1 em { color: var(--violet); }
.hero-lead { max-width: 650px; color: #4f3b36; font-size: 19px; line-height: 1.55; margin: 0 0 32px; }
.hero-start { width: min(100%, 650px); max-width: none; margin: 0 auto; padding: 18px 20px 15px; text-align: left; background: #fff; border: 1px solid rgba(80,55,132,.24); border-radius: 8px; box-shadow: 9px 9px 0 #a66ae5; }
.start-kicker { color: var(--violet); font-size: 10px; margin-bottom: 11px; }
.hero-start label { color: var(--ink); font-size: 13px; }
.hero-start input { border: 1px solid #cec3df; border-radius: 6px; }
.hero-start input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(80,55,132,.15); }
.hero-start .button { background: var(--violet); border-radius: 6px; min-width: 174px; }
.hero-start .button:hover { background: #7145b0; }
.hero-start p { color: #766b80; font-size: 11px; }
.hero-scroll { margin-top: 34px; color: var(--violet); font-size: 13px; font-weight: 800; border-bottom: 1px solid currentColor; padding-bottom: 6px; }
.hero-scroll span { margin-left: 13px; }
.hero-decoration { position: absolute; color: var(--violet); pointer-events: none; font-family: Arial,sans-serif; line-height: 1; }
.hero-decoration-left { left: 3%; top: 28%; font-size: clamp(60px,8vw,120px); transform: rotate(-16deg); }
.hero-decoration-right { right: 5%; top: 49%; font-size: clamp(52px,7vw,100px); transform: rotate(13deg); }
.example-section { background: #503784; color: #fff; }
.example-section .section-topline { border-top-color: rgba(255,255,255,.34); color: #efe5ff; }
.example-heading { display: flex; justify-content: space-between; align-items: end; gap: 60px; padding: 58px 0 44px; }
.example-heading .small-label { color: #e8c5ff; }
.example-heading h2 { font-size: clamp(49px,6vw,88px); line-height: 1.02; letter-spacing: -.065em; margin: 20px 0 0; }
.example-heading h2 em { color: #fbc71f; }
.example-heading p { max-width: 350px; margin: 0 0 5px; color: #eee5fa; line-height: 1.7; font-size: 15px; }
.example-stage { padding: 22px; background: #b06cf5; border-radius: 8px; }
.example-screen { aspect-ratio: 16 / 8.3; min-height: 440px; border-radius: 4px; border: 1px solid #e7dff0; background: #fff; position: relative; }
.example-screen-label { position: absolute; inset: 0; display: grid; place-items: center; color: #8b8394; font-size: 14px; text-align: center; padding: 24px; }
.example-screen-corner { position: absolute; right: 22px; bottom: 19px; color: #9d94a9; font: 700 11px Archivo,Arial,sans-serif; letter-spacing: .11em; }
.example-stage-bottom { display: flex; justify-content: space-between; gap: 20px; color: var(--ink); padding: 19px 7px 1px; font-size: 13px; font-weight: 800; }
.example-stage-bottom i { font-style: normal; font-size: 21px; vertical-align: -2px; margin-right: 6px; }
.example-stage-bottom a { text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.section-topline { color: #635474; border-top-color: #cfc5db; }
.section-heading-row h2 span, .frames-section h2 span, .story-detail-section h2 span, .faq-layout h2 span { color: var(--violet); }
.section-heading-row p, .story-next p, .story-feature-copy p, .catalog-content p { color: #625771; }
.process-section { background: #fffdf7; }
.steps-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.step { min-height: 360px; border-radius: 7px; border: 1px solid #cbb5e7; background: #e6d4ff; padding: 29px; }
.step:nth-child(2) { background: #fbc71f; border-color: #efba16; }
.step:nth-child(3) { background: #fff; }
.step-number { color: var(--violet); font-weight: 800; letter-spacing: .08em; }
.step-symbol { color: var(--violet); font-size: 70px; margin: 33px 0 37px; }
.step h3 { font-size: 28px; line-height: 1.15; color: var(--ink); }
.step p { color: #534567; }
.process-footnote { color: #756884; }
.intro-section, .faq-section { background: #f4effb; }
.story-feature, .catalog-card { border-radius: 7px; background: var(--violet); }
.story-feature-copy, .catalog-content { background: var(--violet); color: #fff; }
.story-feature-copy p, .catalog-content p { color: #ece3f8; }
.story-feature-copy .small-label, .catalog-content .small-label { color: #fbc71f; }
.story-feature-copy h3 { color: #fff; }
.story-feature .meta-line span, .catalog-card .meta-line span { border-color: #b9a0d5; color: #fff; }
.story-feature .text-link, .catalog-card .text-link { color: #fff; }
.story-feature .text-link:hover, .catalog-card .text-link:hover { color: #fbc71f; }
.story-next>span, .catalog-more-icon, .empty-icon { color: var(--violet); }
.statement-section { background: #fbc71f; color: var(--ink); }
.statement-inner .small-label { color: var(--violet); }
.statement-inner em { color: var(--violet); }
.statement-star { color: #a66ae5; opacity: .85; }
.faq-list { border-top-color: #cbbdda; }
.faq-list details { border-bottom-color: #cbbdda; }
.end-cta { background: #ddc4f6; }
.end-cta .button-primary { background: var(--violet); }
.footer { background: #35235e; }
.footer .brand-mark span { background: #fbc71f; }
.footer-main p, .footer-bottom { color: #d9c7ed; }
.footer-links { color: #fff; }
.page-hero, .story-page-hero { background: #fbc71f; }
.page-hero p, .story-page-copy p, .story-stats span, .quiet-note { color: #5c4a6c; }
.story-page-copy .small-label, .small-label { color: var(--violet); }
.auth-section, .form-page, .project-page, .account-section, .document-page, .photo-step-section { background: #f4effb; }
.auth-intro .small-label, .form-page .small-label, .account-top .small-label, .project-head .small-label, .document-page .small-label { color: var(--violet); }
.auth-intro p, .form-page-grid>div:first-child>p, .account-top p, .project-head p, .document-lead, .document-page p:not(.document-lead) { color: #60536f; }
.auth-panel, .account-panel, .upload-panel { background: #fff; border-color: #d9cce9; border-radius: 7px; }
.auth-panel .panel-index, .account-panel .panel-index { color: var(--violet); }
.soft-panel { background: #e5d4fa; }
.balance-card { background: #fbc71f; border-color: #e9b622; border-radius: 7px; }
.balance-card .panel-index, .balance-value span { color: var(--violet); }
.button-disabled { background: #e2d3ed; color: #675777; }
.photo-guidance { background: #fbc71f; border-radius: 7px; }
.photo-guidance>span { color: var(--violet); }
.upload-drop { background: #f9f5ff; border-color: #b792e2; border-radius: 7px; }
.upload-drop:hover { background: #eee2ff; }
.upload-symbol { background: #e0c4ff; color: var(--violet); }

@media(max-width:1100px) {
  .hero h1 { font-size: clamp(58px,7.1vw,85px); }
  .hero-decoration-left { left: 0; top: 27%; }
  .hero-decoration-right { right: 0; top: 46%; }
}
@media(max-width:760px) {
  .mobile-menu summary span { background: var(--violet); }
  .mobile-menu-panel { background: #fff; border-color: #d4c3e7; }
  .mobile-menu-panel a { border-bottom-color: #e8def4; color: var(--ink); }
  .hero-centered { min-height: auto; padding: 75px 0 64px; }
  .hero .eyebrow { font-size: 9px; line-height: 1.4; }
  .hero h1 { font-size: clamp(46px,10.5vw,72px); margin: 26px 0 20px; }
  .hero-lead { font-size: 16px; max-width: 550px; margin-bottom: 26px; }
  .hero-decoration { opacity: .2; }
  .hero-decoration-left { left: -12px; top: 16%; }
  .hero-decoration-right { right: -10px; top: 42%; }
  .hero-start { width: min(100% - 10px,600px); }
  .example-heading { display: block; padding: 40px 0 30px; }
  .example-heading h2 { font-size: clamp(44px,9vw,65px); }
  .example-heading p { max-width: 600px; margin-top: 20px; }
  .example-stage { padding: 12px; }
  .example-screen { min-height: 260px; }
  .example-stage-bottom { font-size: 11px; }
  .steps-grid { grid-template-columns: 1fr; }
  .step { min-height: 240px; }
  .step-symbol { font-size: 45px; margin: 18px 0 26px; }
  .story-feature-copy { background: var(--violet); }
}
@media(max-width:500px) {
  .hero-centered { padding: 58px 0 52px; }
  .hero h1 { font-size: clamp(40px,10vw,52px); letter-spacing: -.07em; }
  .hero-lead { font-size: 15px; }
  .hero-start { padding: 17px; box-shadow: 6px 6px 0 #a66ae5; }
  .hero-start-fields { flex-direction: column; }
  .hero-start-fields .button { width: 100%; }
  .hero-scroll { margin-top: 28px; }
  .example-heading h2 { font-size: 42px; }
  .example-screen { width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
  .example-screen-label { font-size: 11px; }
  .example-stage-bottom { display: block; line-height: 1.5; }
  .example-stage-bottom > span { display: block; }
  .example-stage-bottom a { display: inline-block; margin-top: 8px; }
  .section-topline span:last-child { text-align: right; }
}