/* mogit / Phase 04 Item 14 — mobile-first visual design */
:root{color-scheme:light;--ink:#342c24;--muted:#716a5f;--cream:#fffdf8;--soft:#fff7e6;--yellow:#ffd84e;--yellow-light:#fff0b8;--line:#efe7d7;--shadow:0 12px 34px rgba(96,68,21,.075);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;font-size:16px;line-height:1.85;background:var(--cream);color:var(--ink);font-synthesis:none}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-wrap:anywhere}img{display:block;max-width:100%;height:auto}a{color:inherit}a:focus-visible,summary:focus-visible{outline:3px solid #b87900;outline-offset:4px;border-radius:4px}::selection{background:#ffe386}.container{width:min(100% - 36px,1100px);margin-inline:auto}.narrow{max-width:830px}.skip-link{position:fixed;top:-100px;left:12px;z-index:99;background:#fff;padding:10px 16px}.skip-link:focus{top:10px}.site-header{position:relative;z-index:10;background:rgba(255,249,230,.97);border-bottom:1px solid #f4e9c9}.header-inner{width:min(100% - 36px,1100px);min-height:84px;margin:auto;display:flex;align-items:center;gap:clamp(12px,2vw,30px)}.brand{display:flex;align-items:center;gap:8px;font-size:1.65rem;font-weight:900;letter-spacing:-.05em;text-decoration:none;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:41px;height:41px;background:#ffe48a;border-radius:14px;font-size:1.4rem}.main-nav{display:flex;align-items:center;gap:clamp(10px,2vw,26px);margin-left:auto}.main-nav a{font-size:.87rem;font-weight:650;text-decoration:none;white-space:nowrap;transition:color .2s}.main-nav a:hover{color:#966900}.main-nav a[aria-current]{font-weight:850;text-decoration:underline;text-decoration-color:#efb900;text-decoration-thickness:3px;text-underline-offset:8px}.button,.header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;background:var(--yellow);color:#332700;border:1px solid #f5c836;border-radius:999px;padding:11px 26px;font-size:.95rem;font-weight:850;text-decoration:none;box-shadow:0 5px 0 rgba(209,159,11,.12);transition:transform .2s,background .2s,box-shadow .2s}.button:hover,.header-cta:hover{transform:translateY(-2px);background:#ffdf6c;box-shadow:0 8px 18px rgba(209,159,11,.17)}.header-cta{min-height:42px;font-size:.82rem;white-space:nowrap;padding:8px 17px}.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 92% 15%,#ffedaa 0,transparent 43%),linear-gradient(135deg,#fff6d9 0%,#fffaf0 100%);padding:clamp(66px,9vw,116px) 0}.hero::after{content:"";position:absolute;right:-100px;bottom:-180px;width:400px;height:400px;border:60px solid rgba(255,211,75,.12);border-radius:50%;pointer-events:none}.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px)}.eyebrow{margin:0 0 16px;color:#9c7000;font-weight:850;font-size:.82rem;letter-spacing:.08em}.hero h1,.page-heading h1{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.42;letter-spacing:-.065em;margin:0 0 24px;font-weight:900}.hero .lead{font-size:clamp(.99rem,1.7vw,1.15rem);line-height:2.05;margin:0 0 32px;color:#534638}.hero-art{position:relative;min-height:390px;display:grid;place-items:center;isolation:isolate}.hero-art::before{content:"";position:absolute;inset:11% 0 6%;border-radius:45% 55% 48% 52%;background:#ffdf82;opacity:.4;transform:rotate(-11deg);z-index:-1}.ticket-preview{position:relative;width:100%;max-width:480px;aspect-ratio:2128/1227;display:grid;place-items:center;filter:drop-shadow(0 16px 16px rgba(79,53,29,.15))}.ticket-preview img{width:100%;height:100%;object-fit:contain}.ticket-preview span{position:absolute;left:9%;top:50%;transform:translateY(-50%);width:62%;text-align:center;font-weight:850;font-size:clamp(.8rem,2vw,1.4rem);line-height:1.4;color:#453629;pointer-events:none}.hero-art>.ticket-preview:first-child{transform:rotate(-9deg) translate(-3%,0);width:92%}.hero-art .small{position:absolute;right:-3%;bottom:1%;width:59%;transform:rotate(10deg)}.hero-art .small span{font-size:clamp(.65rem,1.2vw,1rem)}.section{padding:clamp(56px,7vw,94px) 0}.section h2{font-size:clamp(1.55rem,3.2vw,2.35rem);font-weight:900;line-height:1.5;letter-spacing:-.045em;margin:0 0 30px}.section-tint{background:var(--soft)}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene,.idea-card{background:white;border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow)}.scene{overflow:hidden;text-align:center}.scene h3{font-size:1.15rem;margin:0 0 18px}.scene .ticket-preview{filter:drop-shadow(0 7px 9px rgba(79,53,29,.10))}.scene .ticket-preview span{font-size:clamp(.65rem,1.25vw,1.05rem)}.steps{display:grid;gap:18px}.steps article{position:relative;border:1px solid var(--line);border-radius:22px;background:white;padding:26px 28px;box-shadow:0 6px 18px rgba(75,53,27,.035)}.steps article>span{display:inline-block;color:#b17d00;background:#fff5d5;border-radius:100px;padding:2px 13px;font-size:.78rem;font-weight:900;letter-spacing:.06em}.steps article h3{font-size:1.15rem;margin:10px 0 7px}.steps article p{margin:0;color:var(--muted)}.text-link{display:inline-block;margin-top:20px;color:#8b6100;font-weight:800;text-underline-offset:4px}.link-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.link-cards a{display:grid;gap:10px;align-content:center;min-height:135px;text-decoration:none;background:white;border:1px solid var(--line);border-radius:23px;padding:26px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}.link-cards a:hover{transform:translateY(-3px);border-color:#f2c84c}.link-cards strong{font-size:1.08rem}.link-cards span{font-size:.9rem;color:var(--muted)}.cta-panel{background:linear-gradient(125deg,#fff0b3,#fff6da);border:1px solid #f4e2a4;border-radius:32px;padding:clamp(28px,5vw,54px);text-align:center}.cta-panel h2{margin:0 0 12px}.cta-panel p{color:#66573c;margin:0 0 25px}.page-heading{background:linear-gradient(125deg,#fff3cb,#fffaf0);padding:clamp(55px,7vw,95px) 0;border-bottom:1px solid #f6e9c4}.page-heading h1{margin-bottom:18px}.page-heading p:last-child{font-size:1.05rem;color:#655640;line-height:2}.idea-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.idea-card{padding:20px;display:flex;flex-direction:column}.idea-card img{width:100%;aspect-ratio:2128/1227;object-fit:contain;border-radius:16px;background:#fffbf1;margin-bottom:13px}.idea-card h3{font-size:1.02rem;line-height:1.5;margin:0 0 5px}.idea-card p{font-size:.88rem;color:var(--muted);margin:0}.section .narrow>h2:not(:first-child){margin-top:48px}details{background:white;border:1px solid var(--line);border-radius:15px;padding:0 19px;margin-bottom:12px}summary{cursor:pointer;list-style:none;font-weight:750;padding:17px 30px 17px 0;position:relative}summary::-webkit-details-marker{display:none}summary::after{content:"+";position:absolute;right:2px;top:13px;font-size:1.5rem;font-weight:400;color:#9b770d}details[open] summary::after{content:"−"}details p{color:var(--muted);margin:0;padding:0 0 18px}.note{padding:20px 23px;background:#fff4d6;border:1px solid #f5e5b7;border-radius:18px;color:#6a5a3d}.site-footer{background:#f8f3e9;border-top:1px solid #eee4d4;padding:52px 0;color:#605647}.site-footer strong{font-size:1.45rem;color:#3c3329}.site-footer p{margin:4px 0 22px}.site-footer nav{display:flex;flex-wrap:wrap;gap:10px 23px;font-size:.85rem}.site-footer nav a{text-decoration:none}.site-footer nav a:hover{text-decoration:underline}.site-footer small{display:block;margin-top:30px;color:#827a6d}.desktop-break{display:none}
@media(min-width:1000px){.desktop-break{display:block}}
@media(max-width:850px){.header-inner{flex-wrap:wrap;gap:8px 14px;padding:12px 0}.brand{margin-right:auto}.main-nav{order:3;width:100%;justify-content:space-between;gap:10px;padding:8px 0 3px;overflow-x:auto;margin-left:0}.main-nav a{font-size:.8rem}.hero-grid{grid-template-columns:1fr 1fr;gap:16px}.hero-art{min-height:300px}.scene{padding:16px}.scene-grid{gap:12px}}
@media(max-width:620px){.container{width:min(100% - 32px,1100px)}.header-inner{width:min(100% - 32px,1100px)}.brand{font-size:1.48rem}.brand-mark{width:35px;height:35px;font-size:1.1rem}.header-cta{font-size:.76rem;min-height:39px;padding:7px 13px}.hero{padding:54px 0 46px}.hero-grid{grid-template-columns:1fr;gap:12px}.hero h1{font-size:clamp(2rem,8vw,2.8rem);margin-bottom:20px}.hero .lead{font-size:1rem;margin-bottom:24px}.hero-art{min-height:260px;max-width:470px;width:100%;margin:auto}.hero-art>.ticket-preview:first-child{width:81%}.hero-art .small{width:55%;right:2%;bottom:0}.hero-art .small span{font-size:clamp(.65rem,2.6vw,.94rem)}.section{padding:52px 0}.section h2{margin-bottom:23px}.scene-grid{grid-template-columns:1fr;gap:14px}.scene{max-width:420px;width:100%;margin:auto;padding:18px}.scene .ticket-preview{max-width:340px;margin:auto}.scene .ticket-preview span{font-size:clamp(.78rem,3.5vw,1.2rem)}.link-cards,.idea-grid{grid-template-columns:1fr}.idea-card{padding:16px}.steps article{padding:22px}.page-heading{padding:55px 0}.page-heading h1{font-size:clamp(2rem,8vw,2.8rem)}.cta-panel{border-radius:24px}.cta-panel .button{width:100%;padding-inline:12px;font-size:.86rem}.site-footer{padding:40px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Visual review: real supplied SVG, app screenshots and video */
.brand-icon{display:block;width:42px;height:42px;object-fit:contain;border-radius:10px;flex:none}
.hero-art{min-height:445px;overflow:visible}
.hero-illustration{position:absolute;top:-5%;left:4%;width:86%;height:75%;object-fit:contain;z-index:0}
.hero-art>.ticket-preview:first-of-type{position:absolute;bottom:-1%;left:2%;width:68%;transform:rotate(-9deg);z-index:2}
.hero-art .ticket-preview.small{bottom:2%;right:-1%;width:45%;z-index:3}
.scene-illustration{width:100%;height:190px;object-fit:contain;object-position:center;margin:0 auto 18px}
.scene .ticket-preview{max-width:290px}
.app-showcase{background:#fffdf7}
.showcase-heading{text-align:center;margin-bottom:34px}.showcase-heading h2{margin-bottom:6px}.showcase-heading>p:last-child{color:var(--muted)}
.screen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:900px;margin:0 auto}
.screen-grid figure{margin:0;text-align:center}.screen-grid img{width:min(100%,235px);aspect-ratio:750/1200;object-fit:cover;object-position:top;border-radius:25px;border:5px solid #fff;box-shadow:0 14px 35px rgba(67,50,26,.16);margin:auto}.screen-grid figcaption{font-weight:800;margin-top:15px}.showcase-note{text-align:center;font-size:.77rem;color:var(--muted);margin-top:25px}
.design-feature{margin-top:44px;padding:30px 25px;border-radius:28px;background:#fff8e6;border:1px solid #f6e7c1}.design-feature h2{font-size:1.65rem!important;margin:0 0 12px!important}.design-feature>p{color:#675c47}.design-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}.design-gallery figure{margin:0;background:white;border-radius:17px;padding:14px 10px;text-align:center}.design-gallery img{width:100%;height:auto;aspect-ratio:2128/1227;object-fit:contain}.design-gallery figcaption{font-size:.82rem;font-weight:800;margin-top:8px}.design-caption{font-size:.82rem;margin:12px 0 0!important}
.step-screen{display:block;width:min(100%,220px);max-height:345px;object-fit:cover;object-position:top;margin:20px auto 0;border:4px solid white;border-radius:20px;box-shadow:0 10px 25px rgba(67,50,26,.12)}.step-video{display:block;width:min(100%,240px);max-height:420px;margin:22px auto 0;border-radius:20px;background:#fff5db;box-shadow:0 10px 25px rgba(67,50,26,.12)}.video-caption{text-align:center;font-size:.83rem;margin-top:12px!important}.subpage-illustration{display:none}
@media(max-width:620px){.brand-icon{width:36px;height:36px}.hero-art{min-height:340px}.hero-illustration{height:72%;top:-4%;left:8%;width:85%}.hero-art>.ticket-preview:first-of-type{width:70%;bottom:1%}.hero-art .ticket-preview.small{width:47%;bottom:4%}.scene-illustration{height:160px}.screen-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.screen-grid img{width:100%;border-radius:14px;border-width:2px}.screen-grid figcaption{font-size:.75rem;line-height:1.5}.design-feature{padding:22px 15px}.design-gallery{gap:6px}.design-gallery figure{padding:10px 5px}.design-gallery figcaption{font-size:.69rem}}

/* Phase 04: user-requested visual refinements */
.hero-art::before{z-index:0;}
.hero-art>.ticket-preview:first-of-type{z-index:3;}
.hero-art .ticket-preview.small{z-index:4;}
.hero-illustration{z-index:1;}
.cta-app-icon{width:76px;height:76px;object-fit:cover;border-radius:19px;margin:0 auto 17px;box-shadow:0 7px 20px rgba(77,58,21,.12);}
.idea-grid{grid-template-columns:minmax(0,1fr);gap:12px;max-width:870px;margin-inline:auto;}
.idea-card{display:grid;grid-template-columns:clamp(92px,17vw,145px) minmax(0,1fr);align-items:center;gap:clamp(12px,2.5vw,22px);padding:14px 18px;border-radius:20px;min-height:116px;}
.idea-card img{width:100%;height:auto;aspect-ratio:2128/1227;object-fit:contain;border-radius:0;background:transparent;margin:0;}
.idea-card h3{font-size:clamp(.92rem,1.8vw,1.08rem);line-height:1.45;margin:0 0 6px;}
.idea-card p{font-size:clamp(.78rem,1.45vw,.91rem);line-height:1.6;}
.step-screen-secondary{margin-bottom:8px;}
@media(max-width:620px){.idea-grid{grid-template-columns:1fr;gap:10px}.idea-card{grid-template-columns:90px minmax(0,1fr);gap:12px;padding:12px;min-height:94px;border-radius:16px}.idea-card h3{font-size:.9rem}.idea-card p{font-size:.78rem}.cta-app-icon{width:70px;height:70px;border-radius:17px}}
@media(max-width:360px){.idea-card{grid-template-columns:74px minmax(0,1fr);gap:9px}.idea-card h3{font-size:.84rem}.idea-card p{font-size:.74rem}}

/* Revision v2: explicit layering and single-column idea cards */
.hero-art{isolation:isolate;}
.hero-art::before{z-index:-1!important;pointer-events:none;}
.hero-art>.ticket-preview:first-of-type{z-index:2!important;}
.hero-art>.ticket-preview.small{z-index:3!important;}
.hero-illustration{z-index:0!important;}
.idea-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;max-width:880px!important;margin-inline:auto;}
.idea-card{display:grid!important;grid-template-columns:clamp(82px,14vw,128px) minmax(0,1fr)!important;flex-direction:row!important;align-items:center!important;gap:16px!important;padding:14px 18px!important;min-height:100px!important;}
.idea-card>img{width:100%!important;height:auto!important;max-height:82px!important;aspect-ratio:2128/1227!important;object-fit:contain!important;margin:0!important;background:transparent!important;border-radius:0!important;}
.idea-card>div{min-width:0;}
.idea-card h3{margin:0 0 4px!important;line-height:1.45;}
.idea-card p{margin:0!important;line-height:1.55;}
.cta-panel .cta-app-icon{display:block!important;width:76px;height:76px;object-fit:cover;border-radius:20px;margin:0 auto 18px!important;}
@media(max-width:620px){.idea-grid{grid-template-columns:minmax(0,1fr)!important}.idea-card{grid-template-columns:86px minmax(0,1fr)!important;gap:12px!important;padding:12px!important;min-height:90px!important}.idea-card>img{max-height:60px!important}.idea-card h3{font-size:.9rem!important}.idea-card p{font-size:.78rem!important}.cta-panel .cta-app-icon{width:70px;height:70px;border-radius:18px}}
@media(max-width:360px){.idea-card{grid-template-columns:72px minmax(0,1fr)!important;gap:9px!important}}

/* QA-02: optional analytics consent */
.analytics-consent[hidden] { display:none !important; }
.analytics-consent { position:fixed; bottom:12px; left:12px; right:12px; z-index:1000; max-width:640px; margin:auto; background:#fffdf5; border:1px solid #e6d6a4; border-radius:16px; box-shadow:0 8px 28px rgba(55,40,5,.18); padding:18px; color:#302a20; }
.analytics-consent p { margin:0 0 12px; font-size:14px; line-height:1.65; }
.analytics-actions { display:flex; gap:8px; flex-wrap:wrap; }
.analytics-actions button { border:1px solid #a98a3e; border-radius:10px; padding:9px 15px; background:#fff; color:#302a20; cursor:pointer; font:inherit; font-size:14px; }
.analytics-actions button:first-child { background:#ffe27a; border-color:#e1bc49; }
.analytics-settings { border:0; background:none; color:inherit; text-decoration:underline; cursor:pointer; font:inherit; font-size:13px; padding:0; margin-top:10px; }