@font-face{font-family:Galmuri11;src:url('/static/landing-v2/assets/fonts/Galmuri11.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Galmuri11;src:url('/static/landing-v2/assets/fonts/Galmuri11-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
body.concept-c{font-family:Galmuri11,'Apple SD Gothic Neo',sans-serif;font-weight:400;--ink:#344b60;--muted:#536f80;--accent:#365f83;--soft:#dfedf5;--second:#fff1c9}
.concept-c h2{font-family:Galmuri11,sans-serif;font-weight:400;letter-spacing:-.04em;line-height:1.55;font-size:clamp(28px,3.2vw,42px)}
.concept-c button,.concept-c .pixel-cta,.concept-c .nav-button,.concept-c .button,.concept-c .scene-pills button{font-family:Galmuri11,sans-serif;font-weight:400;letter-spacing:.015em}
.concept-c nav,.concept-c .record-links,.concept-c .hero-actions>a:not(.pixel-cta){font-family:Galmuri11,sans-serif;font-weight:400}
.concept-c p{font-size:16px;line-height:1.9;letter-spacing:-.015em}.concept-c .hero-copy>p:last-of-type{font-family:Galmuri11,sans-serif;font-size:19px;color:var(--ink)}
.concept-c nav{font-size:14px}.concept-c .nav-button{font-size:14px}.concept-c .pixel-cta{font-size:16px;padding:14px 24px}.concept-c .hero-actions{font-size:14px}.concept-c .call-button{font-size:15px;background:var(--second);padding:13px 19px}.concept-c .hero-product,.concept-c .story-product,.concept-c .film-product{background:transparent;border:0;outline:0;box-shadow:none;clip-path:none}
.concept-c .hero-product{max-width:1100px;width:100%;margin:0 auto}.concept-c .hero-product>img,.concept-c .story-product>img,.concept-c .film-product>img,.concept-c .yours figure>img{mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.concept-c .hero{background:var(--paper)}.concept-c .hero-bottom{max-width:1100px;margin:0 auto;padding-top:0}.concept-c .hero-bottom p{font-size:12px}.concept-c .hero-actions{margin-bottom:0}.concept-c .hero h1.hero-lettering{margin-top:8px}.concept-c .cloud-one{top:95px;left:8%;background:#fff4d8}.concept-c .cloud-two{top:230px;right:7%;background:#fff4d8}
.concept-c .moments{background:var(--paper)}.concept-c .intro{background:#fff3d5}.concept-c .days{background:var(--paper)}.concept-c .sticky-product{background:var(--paper)}.concept-c .yours figure{padding:0;background:transparent;clip-path:none}.concept-c .intro>p:last-child,.concept-c .chapters p:not(.eyebrow),.concept-c .yours-copy>p:not(.eyebrow),.concept-c .moments-heading p:last-child{font-size:17px}.concept-c .fine{font-size:12px!important}.concept-c .scene-pills button{font-size:15px}.concept-c .feature-note{font-size:12px}.concept-c .record-links span{font-size:16px}.concept-c .meet>p{font-size:17px}.concept-c .button{font-size:18px}.concept-c .eyebrow{font:11px monospace}.concept-c .film-controls button{font-size:15px}.concept-c .review-notes p{font-size:12px}
@media(max-width:760px){.concept-c .hero-product{width:110%;max-width:none;margin:0 -5%;border:0;box-shadow:none}.concept-c .hero-copy>p:last-of-type{font-size:17px}.concept-c .hero-actions{gap:18px}.concept-c .pixel-cta{font-size:14px;padding:13px 18px}.concept-c .hero-actions>a:not(.pixel-cta){font-size:13px}.concept-c .call-button{font-size:12px;padding:10px 13px;left:15%;top:66%}.concept-c .hero-bottom p{font-size:10px}.concept-c h2,.concept-c .intro h2,.concept-c .chapters h2,.concept-c .yours h2{font-size:28px;line-height:1.55}.concept-c .intro>p:last-child,.concept-c .chapters p:not(.eyebrow),.concept-c .yours-copy>p:not(.eyebrow),.concept-c .moments-heading p:last-child{font-size:16px}.concept-c .hero-bottom{padding:5px 6% 25px}.concept-c nav .nav-button{font-size:12px}.concept-c .scene-pills button{font-size:14px}.concept-c .hero h1.hero-lettering{height:117px}.concept-c .cloud-one{left:-15px;top:40px}.concept-c .cloud-two{right:-10px;top:215px}}

/* C: one pixel alphabet and a four-pixel component grid. */
body.concept-c{font-family:Galmuri11,monospace;font-size:16px;--paper:#edf6fa;--ink:#344b60;--accent:#416887;--muted:#526e80;--line:#bed7e3;--soft:#dfedf5;--second:#fff1c9;font-synthesis:none}
.concept-c h2,.concept-c .intro h2,.concept-c .chapters h2,.concept-c .yours h2{font-family:Galmuri11,monospace;font-size:32px;font-weight:700;line-height:1.6;letter-spacing:0;word-break:keep-all}
.concept-c p,.concept-c .hero-copy>p:last-of-type,.concept-c .intro>p:last-child,.concept-c .chapters p:not(.eyebrow),.concept-c .yours-copy>p:not(.eyebrow),.concept-c .moments-heading p:last-child,.concept-c .meet>p{font-family:Galmuri11,monospace;font-size:16px;letter-spacing:0;line-height:2}
.concept-c button,.concept-c nav,.concept-c .button,.concept-c .pixel-cta,.concept-c .hero-actions,.concept-c .record-links,.concept-c .concept-bar,.concept-c .eyebrow,.concept-c .pixel-label,.concept-c .chapter-indicator,.concept-c .film-controls,.concept-c footer,.concept-c figcaption,.concept-c .review-notes{font-family:Galmuri11,monospace;letter-spacing:0;font-weight:400}
.concept-c .eyebrow,.concept-c .pixel-label,.concept-c .concept-bar,.concept-c .hero-bottom,.concept-c figcaption,.concept-c .fine,.concept-c .feature-note,.concept-c .review-notes p{font-size:12px!important;line-height:2}
.concept-c .pixel-label{gap:16px}.concept-c .pixel-label:before{width:4px;height:4px;box-shadow:4px 0 var(--accent),0 4px var(--accent),4px 4px var(--accent),12px 4px var(--line),16px 4px var(--line)}
.concept-c .pixel-cta,.concept-c .nav-button,.concept-c .button,.concept-c .call-button,.concept-c .scene-pills button,.concept-c .film-controls button{font-size:16px;line-height:1.5;clip-path:var(--cut);border:0;border-bottom:4px solid #2c4d66;padding:12px 20px;min-height:48px;transition:transform .12s steps(2),background .12s steps(2)}
.concept-c .call-button{border-bottom-color:#d6bd7a;background:var(--second);font-size:12px;padding:12px 16px}.concept-c .call-icon{width:20px;height:20px;shape-rendering:crispEdges}.concept-c .call-icon path{stroke-linecap:square}
.concept-c .scene-pills button{min-width:80px;border-bottom-color:var(--line)}.concept-c .scene-pills button[aria-pressed=true]{border-bottom-color:#2c4d66}
.concept-c .pixel-cloud{height:40px;width:112px;opacity:1;clip-path:polygon(0 24px,8px 24px,8px 16px,24px 16px,24px 8px,40px 8px,40px 0,72px 0,72px 8px,88px 8px,88px 16px,104px 16px,104px 24px,112px 24px,112px 32px,104px 32px,104px 40px,8px 40px,8px 32px,0 32px)}
.concept-c .cloud-one{left:9%;top:100px;background:#fff1c9}.concept-c .cloud-two{right:9%;top:220px;background:#d2e6f0}
.concept-c .intro,.concept-c .records,.concept-c .meet{position:relative;border:0}.concept-c .intro:after,.concept-c .records:after,.concept-c .meet:before{content:'';position:absolute;left:0;right:0;height:8px;bottom:-8px;background:linear-gradient(90deg,var(--second) 50%,transparent 50%) 0 0/32px 8px}.concept-c .meet:before{top:-8px;bottom:auto;background:linear-gradient(90deg,var(--soft) 50%,transparent 50%) 0 0/32px 8px}
.concept-c .record-links span{font-size:16px;border-bottom:4px solid #d7d9c5;padding:24px 16px}.concept-c .feature-note{border-top:4px dotted var(--line)}.concept-c .yours em{font-style:normal}.concept-c .chapter-indicator{border-bottom:4px solid var(--soft);padding-bottom:12px}.concept-c .film-controls{font-size:12px;flex-wrap:wrap}.concept-c .hero-bottom a{font-size:12px}
.concept-c a:focus-visible,.concept-c button:focus-visible{outline:3px solid #416887;outline-offset:5px}
@media(max-width:760px){.concept-c h2,.concept-c .intro h2,.concept-c .chapters h2,.concept-c .yours h2{font-size:24px;line-height:1.7}.concept-c .hero-actions{gap:16px}.concept-c .pixel-cta,.concept-c .nav-button,.concept-c .hero-actions>a:not(.pixel-cta){font-size:12px}.concept-c .pixel-cta{padding:12px 16px}.concept-c .cloud-one{left:-40px;top:80px}.concept-c .cloud-two{right:-48px;top:212px}.concept-c .call-button{font-size:12px;padding:8px 12px;gap:8px}.concept-c .concept-bar,.concept-c .concept-bar span{font-size:8px!important}.concept-c .hero-bottom{gap:8px;flex-wrap:wrap}.concept-c .hero-bottom p{font-size:12px}.concept-c .film-controls{gap:12px}.concept-c footer>div{font-size:12px;flex-wrap:wrap}}

/* Soft handheld-game framing: keep the physical product in the foreground. */
.concept-c .hero{background-color:var(--paper);background-image:radial-gradient(#bfd8e5 1px,transparent 1px);background-size:24px 24px}
.concept-c .hero-copy{position:relative;z-index:2}.concept-c .hero-copy>p:last-of-type{margin-top:4px;margin-bottom:16px}
.concept-c .pixel-cta{background:#fff1c9;color:#344b60;border-bottom-color:#d9be79;font-weight:700;gap:12px;padding:14px 28px;animation:ready 3s steps(1,end) infinite}.concept-c .hero-actions{margin-bottom:24px}.concept-c .hero-actions>a:not(.pixel-cta){font-size:12px;text-decoration:underline;text-underline-offset:5px}
.concept-c .game-status{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:780px;width:85%;margin:28px auto 0;padding:12px 20px;background:#dcecf5;clip-path:var(--cut);border-bottom:4px solid #bfd8e5;font-size:12px;line-height:1.7}.game-status span:first-child{display:flex;align-items:center;gap:12px}.game-status i{width:8px;height:8px;background:#648c6d;box-shadow:4px 4px #bfd4b8}.concept-c .game-status.active{background:#fff1c9;border-bottom-color:#d9be79}
.concept-c .hero-product{margin-top:-16px}.concept-c .hero-bottom{position:relative;width:85%;max-width:780px;margin:-16px auto 40px;padding:16px 20px;display:flex;align-items:center;gap:16px;background:#fff8e5;clip-path:var(--cut);border-bottom:4px solid #e1d4ae;z-index:2}.concept-c .hero-bottom p{margin:0;flex:1}.concept-c .hero-bottom .hud-caption{font-size:8px;color:#6b7f88}.concept-c .hero-bottom a{font-size:12px}.concept-c .game-reaction{display:none;position:absolute;left:26%;top:20%;font-family:Galmuri11,monospace;font-size:24px;font-weight:700;background:#fff1c9;color:#344b60;padding:8px 16px;clip-path:var(--cut);pointer-events:none}.concept-c .game-reaction.show{display:block;animation:react 1s steps(3,end) infinite alternate}
.concept-c .pixel-divider{height:24px;background:linear-gradient(90deg,#d4e3c4 50%,transparent 50%) 0 0/32px 8px,linear-gradient(#d4e3c4,#d4e3c4) 0 8px/100% 8px no-repeat,linear-gradient(#b7cfa4,#b7cfa4) 0 16px/100% 8px no-repeat}.concept-c .intro{padding:64px 20px}.concept-c .mode-label{font-size:8px;text-align:center;color:var(--muted);margin:0 0 12px}.concept-c .scene-pills{padding:12px;gap:12px;background:#dcecf5;clip-path:var(--cut);width:max-content;max-width:100%;margin:auto}.concept-c .scene-pills button{padding:12px 16px;min-width:72px}.concept-c .scene-pills button[aria-pressed=true]:before{content:'▶';font-size:8px;margin-right:8px}.concept-c .chapter-indicator{background:#dcecf5;clip-path:var(--cut);padding:12px 20px;border:0}.concept-c .record-links span{background:#fffaf0;border-bottom-color:#d9be79}.concept-c .meet .button:before{content:'▶';margin-right:12px;font-size:12px}
@keyframes ready{50%{border-bottom-color:#bfa460}}@keyframes react{to{transform:translateY(-8px)}}
@media(max-width:760px){.concept-c .game-status{width:90%;padding:12px;font-size:8px;margin-top:24px}.concept-c .game-status span:last-child{font-size:8px}.concept-c .hero-product{margin-top:-4px}.concept-c .hero-bottom{width:90%;margin:0 auto 32px;gap:8px;padding:12px;flex-wrap:wrap}.concept-c .hero-bottom .hud-caption{width:100%}.concept-c .hero-bottom a{font-size:8px}.concept-c .hero-bottom p{font-size:12px}.concept-c .scene-pills{gap:8px;padding:8px}.concept-c .scene-pills button{padding:10px 12px;font-size:12px;min-width:72px}.concept-c .game-reaction{font-size:16px;padding:4px 12px;top:15%}.concept-c .hero-actions{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.concept-c .pixel-cta,.concept-c .game-reaction.show{animation:none}}

/* Solid pixel keycaps. Blending belongs to the logo, never the controls. */
.concept-c .hero-copy,.concept-c header,.concept-c footer{mix-blend-mode:multiply!important}
.concept-c .hero-actions{position:relative;z-index:3;mix-blend-mode:normal;isolation:isolate}
.concept-c :is(.pixel-cta,.nav-button,.button,.call-button,.scene-pills button,.film-controls button,[id=motion-toggle]){
  --key-face:#fffaf0;--key-edge:#536879;--key-depth:#d6d1c2;
  background:var(--key-face);color:#344b60;border:0;border-radius:0;clip-path:none;
  box-shadow:0 -2px 0 var(--key-edge),2px 0 0 var(--key-edge),-2px 0 0 var(--key-edge),0 2px 0 var(--key-edge),0 4px 0 var(--key-depth),2px 4px 0 var(--key-edge),-2px 4px 0 var(--key-edge),0 6px 0 var(--key-edge),inset 0 2px 0 #fff;
  animation:none;mix-blend-mode:normal;opacity:1;backdrop-filter:none;
  transform:translateY(0);transition:transform 80ms steps(2,end),box-shadow 80ms steps(2,end),background-color 100ms linear;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.concept-c .pixel-cta{--key-face:#ffeaa6;--key-depth:#cdb576}
.concept-c :is(.pixel-cta,.nav-button,.button,.call-button,.scene-pills button,.film-controls button,[id=motion-toggle]):hover{background:var(--key-face);transform:translateY(-1px)}
.concept-c :is(.pixel-cta,.nav-button,.button,.call-button,.scene-pills button,.film-controls button,[id=motion-toggle]):active,
.concept-c .scene-pills button[aria-pressed=true]{
  transform:translateY(4px);background:var(--key-face);color:#344b60;
  box-shadow:0 -2px 0 var(--key-edge),2px 0 0 var(--key-edge),-2px 0 0 var(--key-edge),0 2px 0 var(--key-edge),inset 0 2px 0 #d7dfdf;
}
.concept-c .scene-pills button[aria-pressed=true]{--key-face:#d6e7ef}
.concept-c :is(.pixel-cta,.nav-button,.button,.call-button,.scene-pills button,.film-controls button,[id=motion-toggle]):focus-visible{outline:2px dashed #416887;outline-offset:9px}
.concept-c .scene-pills{padding:16px;overflow:visible}
.concept-c .hero-actions{padding-bottom:6px}
@media(prefers-reduced-motion:reduce){.concept-c :is(.pixel-cta,.nav-button,.button,.call-button,.scene-pills button,.film-controls button,[id=motion-toggle]){transition:none}}
.concept-c .hero-actions .pixel-cta{--key-face:#ffeaa6;--key-depth:#cdb576}
.concept-c .scene-pills button[aria-pressed=true]{--key-face:#d6e7ef}

/* The same quiet game interface continues below the hero. */
.concept-c .level-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#dcecf5;color:var(--ink);border-bottom:2px solid #bed7e3;padding:14px 20px;font-size:12px;line-height:1.6;clip-path:var(--cut);text-align:left;position:relative;z-index:3}
.concept-c .level-bar i{font-style:normal;letter-spacing:4px;color:#7c9cad}.concept-c .level-bar span:first-child{font-size:8px;color:var(--muted)}
.concept-c .days{padding:40px 6% 64px;grid-template-columns:1.25fr 1fr;gap:0 6%;background:var(--paper)}
.concept-c .sticky-product{margin:64px 0 48px;top:32px}.concept-c .chapter-indicator{font-size:12px;border:2px solid #bed7e3;background:#e5f0f6;clip-path:none}
.concept-c .chapters article{min-height:520px;padding:80px 0;position:relative}.concept-c .chapters article:before{content:'';position:absolute;left:-24px;top:50%;width:8px;height:8px;background:#c6ddeb;box-shadow:4px 4px #a1bece}
.concept-c .chapters .eyebrow{width:fit-content;padding:4px 12px;background:#fff1c9;clip-path:var(--cut);color:var(--ink)}.concept-c .chapters h2{margin:16px 0}.concept-c .feature-note{max-width:100%;border:0;background:#e0edf3;padding:12px 16px;clip-path:var(--cut);line-height:1.8}
.concept-c .moments,.concept-c .yours{padding:40px 6% 64px;position:relative;border-top:8px solid #dcecf5;background:var(--paper)}
.concept-c .moments-heading,.concept-c .yours-copy{padding-top:40px}.concept-c .moments h2,.concept-c .yours h2{margin-top:12px;margin-bottom:16px}.concept-c .moments-heading .eyebrow,.concept-c .yours-copy .eyebrow{display:none}
.concept-c .film-product{margin:0 auto;max-width:1000px}.concept-c .film-controls{width:fit-content;max-width:100%;margin:8px auto 28px;padding:20px 24px;background:#dcecf5;clip-path:var(--cut);gap:24px}.concept-c .film-controls>span{font-size:12px}.concept-c .film-controls a{border:0;text-decoration:underline;text-underline-offset:5px}
.concept-c .yours{background-image:linear-gradient(#dcecf5 1px,transparent 1px),linear-gradient(90deg,#dcecf5 1px,transparent 1px);background-size:48px 48px}.concept-c .yours figure{margin-top:16px;max-width:1000px}.concept-c .yours img{border-radius:0}.concept-c .yours figcaption{display:inline-block;background:#fffaf0;padding:12px 24px;border-bottom:4px solid #d6d1c2;clip-path:var(--cut)}
.concept-c .yours .fine{max-width:600px;margin:16px auto;background:var(--paper);padding:8px}
.concept-c .records{display:grid;grid-template-columns:1fr;padding:40px 6% 64px;gap:0;text-align:center;background:#fff1d1}.concept-c .records>.level-bar{background:#f0e4c4;border-bottom-color:#d9cda9}.concept-c .records>div:nth-child(2){padding-top:40px}.concept-c .records .eyebrow{display:none}.concept-c .records h2{margin:12px 0 16px}.concept-c .record-links{max-width:900px;margin:24px auto;border:0;padding:0;gap:20px}.concept-c .record-links span{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 16px;background:#fffaf0;border-bottom:4px solid #d9cda9;clip-path:var(--cut)}.concept-c .record-links svg{width:40px;height:40px;fill:#647f91;shape-rendering:crispEdges}.concept-c .record-links small{font-size:8px;color:#73848b}.concept-c .record-links b{font-weight:400;font-size:16px}
.concept-c .meet{padding:72px 20px 88px;background-color:#dfeef5;background-image:radial-gradient(#bfd8e5 1px,transparent 1px);background-size:24px 24px}.concept-c .meet h2{margin-top:12px}.concept-c .meet .button{margin-top:24px}.concept-c .meet .eyebrow{display:inline-block;background:#edf6fa;padding:4px 12px}.concept-c .records:after{background:linear-gradient(90deg,#fff1d1 50%,transparent 50%) 0 0/32px 8px;z-index:2}
@media(max-width:760px){.concept-c .level-bar{padding:12px;gap:8px;font-size:12px}.concept-c .level-bar i{display:none}.concept-c .level-bar span:first-child{font-size:8px}.concept-c .days{display:block;padding:24px 6% 40px}.concept-c .days>.level-bar{margin-bottom:16px}.concept-c .sticky-product{margin:0;top:0;padding-top:12px;padding-bottom:20px}.concept-c .chapter-indicator{font-size:8px;padding:8px 12px}.concept-c .chapters article{min-height:520px;padding:320px 8px 40px;justify-content:end}.concept-c .chapters article:before{display:none}.concept-c .chapters h2{font-size:24px}.concept-c .moments,.concept-c .yours,.concept-c .records{padding:24px 6% 48px}.concept-c .moments-heading,.concept-c .yours-copy{padding-top:32px}.concept-c .film-product{width:112%;margin-left:-6%}.concept-c .film-controls{padding:16px;gap:16px}.concept-c .film-controls button{font-size:12px}.concept-c .record-links{grid-template-columns:1fr;gap:12px}.concept-c .record-links span{display:grid;grid-template-columns:40px 1fr;text-align:left;column-gap:20px;padding:20px}.concept-c .record-links svg{grid-row:1/3}.concept-c .record-links small,.concept-c .record-links b{grid-column:2}.concept-c .meet{padding:56px 20px 72px}}
@media(max-width:760px){.concept-c .chapters article{min-height:380px;padding:64px 8px 48px;justify-content:center}}

/* Distinct camera framing for life, motion and customization. */
.concept-c .story-closeup{overflow:hidden;width:100%;aspect-ratio:1/1.12;position:relative;margin:12px 0;background:var(--paper)}
.concept-c .story-closeup .story-product{width:210%;max-width:none;margin:-7% 0 0 -7%;background:transparent}
.concept-c .screen-view{max-width:620px;margin:32px auto 24px;background:#dcecf5;padding:12px;border:2px solid #aec7d5;box-shadow:6px 6px 0 #cfdfE8;text-align:left}
.concept-c .screen-view-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 8px 16px;font-size:12px;color:var(--muted)}
.concept-c .screen-view .film-product{width:100%;max-width:none;margin:0;aspect-ratio:1;background:#111724;overflow:hidden;isolation:isolate}
.concept-c .screen-detail canvas.device-display{position:relative;display:block;width:100%;height:auto;aspect-ratio:1;border-radius:0;transform:none!important;image-rendering:pixelated}
.concept-c .deck-details{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;max-width:1100px;margin:32px auto 0;text-align:left}
.concept-c .deck-details figure{margin:0;min-width:0;max-width:none;background:var(--paper);border:2px solid #bed7e3;padding:12px}
.concept-c .detail-crop{width:100%;overflow:hidden;aspect-ratio:1/1.05;position:relative}
.concept-c .deck-details .detail-crop img{width:225%;max-width:none;height:auto;aspect-ratio:3/2;mask-image:none;margin-top:-6%}
.concept-c .deck-front img{margin-left:-6%}.concept-c .deck-back img{margin-left:-111%}
.concept-c .deck-details figcaption{display:flex;flex-direction:column;gap:8px;clip-path:none;border:0;background:#fffaf0;padding:16px;width:100%}
.concept-c .deck-details figcaption small{font-size:8px;color:var(--muted)}.concept-c .deck-details figcaption b{font-size:16px;font-weight:400;line-height:1.8}
@media(max-width:760px){.concept-c .story-closeup{aspect-ratio:1.35;margin:8px 0}.concept-c .story-closeup .story-product{width:165%;margin:-9% 0 0 1%}.concept-c .screen-view{padding:8px;margin:24px auto}.concept-c .screen-view-bar{font-size:8px;padding:4px 4px 12px}.concept-c .screen-view .film-product{width:100%;margin:0}.concept-c .deck-details{grid-template-columns:1fr;gap:24px;margin-top:24px}.concept-c .deck-details figure{padding:8px}.concept-c .detail-crop{aspect-ratio:1.1}.concept-c .deck-details figcaption b{font-size:16px}}
@media(min-width:761px){.concept-c .sticky-product{width:100%;max-width:540px;justify-self:center}}

/* Context photography replaces repeated catalog crops. */
.concept-c .days{grid-template-columns:1.5fr 1fr}
.concept-c .sticky-product{max-width:800px}
.concept-c .story-closeup{aspect-ratio:auto;overflow:visible;margin:16px 0}
.concept-c .story-closeup .story-product{width:100%;margin:0;max-width:none}
.concept-c .story-closeup .story-product>img{mask-image:none;aspect-ratio:3/2}
.concept-c .scene-pills{flex-wrap:wrap;gap:12px;width:100%;padding:16px}
.concept-c .scene-pills button{font-size:12px;min-width:64px;padding:10px 12px}
.concept-c .use-context{font-size:12px!important;text-align:left;color:var(--muted);padding:0 4px;line-height:1.8}
.concept-c .work-scene{max-width:1100px;margin:32px auto 0;border:2px solid #bed7e3;background:var(--paper);padding:12px}
.concept-c .work-scene img{width:100%;height:auto;aspect-ratio:3/2;mask-image:none;border-radius:0}
.concept-c .work-scene figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;background:#fffaf0;clip-path:none;padding:20px;border:0;line-height:1.8}
.concept-c .work-scene figcaption small{font-size:8px;color:var(--muted)}
.concept-c .work-scene figcaption span{font-size:16px}
.concept-c .custom-detail-note{max-width:1100px;margin:16px auto 0;display:flex;align-items:center;justify-content:center;gap:16px;font-size:12px;background:#dcecf5;padding:16px;clip-path:var(--cut)}
@media(max-width:760px){.concept-c .story-closeup{aspect-ratio:auto;margin:12px 0}.concept-c .story-closeup .story-product{width:100%;margin:0}.concept-c .sticky-product{max-width:none}.concept-c .scene-pills{gap:10px;padding:12px}.concept-c .scene-pills button{min-width:58px;font-size:12px;padding:8px}.concept-c .scene-pills button[aria-pressed=true]:before{margin-right:4px}.concept-c .work-scene{padding:6px;margin-top:24px}.concept-c .work-scene figcaption{display:block;padding:16px}.concept-c .work-scene figcaption small{display:block;margin-bottom:8px}.concept-c .custom-detail-note{line-height:1.9;display:block;text-align:left}.concept-c .use-context{font-size:12px!important}}
.concept-c .yours .work-scene>img{mask-image:none}
.concept-c .motion-picks{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:660px;margin:24px auto}
.concept-c .motion-picks button{background:#fffaf0;color:var(--ink);border:2px solid #aec7d5;border-radius:0;font:12px Galmuri11,monospace;padding:12px 16px;box-shadow:0 3px #bed7e3;min-height:44px;transition:transform 80ms steps(2)}
.concept-c .motion-picks button[aria-pressed=true]{background:#fff1c9;border-color:#9a8863;box-shadow:0 1px #9a8863;transform:translateY(2px)}
.concept-c .motion-picks button:active{transform:translateY(3px);box-shadow:none}
.concept-c #film-action{font-weight:400}
/* Actual companion web UI, captured from the local themed application. */
.cloud-day .web-records,.web-records{display:block}
.web-records-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin:36px 0}
.web-records-heading p{line-height:1.9;color:#526e80}
.web-screen-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.web-screen{margin:0;min-width:0;border:2px solid #416887;background:#fffdf4;box-shadow:5px 5px 0 #bed7e3}
.web-window-bar{display:flex;justify-content:space-between;gap:12px;background:#dfedf5;border-bottom:2px solid #416887;padding:12px 16px;font-size:11px}
.web-screen a{display:block;background:#edf6fa}
.web-screen img{display:block;width:100%;height:auto;object-fit:contain}
.web-screen figcaption{padding:22px;border-top:2px solid #bed7e3}
.web-screen figcaption b{font-size:20px}.web-screen figcaption p{font-size:14px;line-height:1.8;margin-bottom:0;color:#526e80}
.records-next{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:2px solid #bed7e3;margin-top:40px;padding-top:24px}
.records-next p{font-size:14px;line-height:1.9}
@media(max-width:700px){.web-records-heading,.records-next{display:block}.web-screen-grid{grid-template-columns:1fr}.web-records-heading{margin:24px 0}.records-next .button{margin-top:12px}}
/* Mobile polish: the hero owns the brand; navigation and reading stay compact. */
.concept-c header{justify-content:flex-end}
.concept-c footer .brand{flex:0 0 105px}
.concept-c footer>div{flex-wrap:wrap;justify-content:flex-end;gap:12px 24px}
.web-screen figcaption small{display:block;color:#526e80;font-size:12px;margin-bottom:12px}
@media(max-width:760px){
 .concept-c header{padding:12px 20px;gap:12px}
 .concept-c header nav{gap:16px;margin-left:0}
 .concept-c header nav>a:first-child{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
 .concept-c header .nav-button{min-height:44px;font-size:12px;padding:10px 12px}
 .concept-c #motion-toggle{min-width:44px;min-height:44px;margin-left:0;flex-shrink:0}
 .concept-c .hero-product{width:100%;margin:0;max-width:100%}
 .concept-c .hero-product>img,.concept-c .work-scene>img{height:auto;aspect-ratio:3/2;object-fit:contain}
 .concept-c .intro{padding:64px 20px}
 .concept-c .chapters article{min-height:0;padding:44px 0}
 .concept-c .chapters article+article{border-top:1px solid #bed7e3}
 .concept-c .chapters h2{margin:16px 0}
 .concept-c .sticky-product{margin-bottom:24px}
 .concept-c .scene-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px}
 .concept-c .scene-pills button{min-width:0;width:100%;padding:10px 5px;min-height:44px;font-size:13px}
 .concept-c .motion-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .concept-c .motion-picks button{min-height:44px;padding:10px 6px;font-size:13px}
 .concept-c .film-controls{display:flex;flex-wrap:wrap;gap:14px;padding:16px}
 .concept-c .film-controls a{display:inline-flex;align-items:center;min-height:44px}
 .concept-c .moments,.concept-c .yours,.concept-c .web-records{padding-top:48px;padding-bottom:56px}
 .concept-c .web-records-heading{margin:28px 0}
 .concept-c .web-records-heading p{font-size:15px;line-height:1.85}
 .concept-c .web-screen figcaption{padding:20px 16px}
 .concept-c .web-screen figcaption b{display:block;font-size:19px;line-height:1.6}
 .concept-c .level-bar{gap:10px;font-size:11px}
 .concept-c .fine{line-height:1.8!important}
 .concept-c footer{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:32px 24px}
 .concept-c footer .brand{flex:0 0 auto;width:105px}
 .concept-c footer>div{justify-content:flex-start;gap:8px 20px;font-size:12px}
 .concept-c footer>div a{display:inline-flex;align-items:center;min-height:44px}
 .concept-c footer>div span{flex-basis:100%}
}
@media(max-width:360px){.concept-c header{padding:10px 14px;gap:8px}.concept-c header nav{gap:10px}.concept-c header nav>a:first-child{font-size:11px}.concept-c .hero-actions{gap:14px}.concept-c h2{font-size:25px}}

/* Handmade wordmark: preserve artwork proportions; frame its built-in margins. */
.concept-c .hero h1.hero-lettering{position:relative;width:360px;max-width:84vw;height:auto;aspect-ratio:2.6;margin:14px auto 8px;overflow:hidden}
.concept-c .hero h1.hero-lettering img{position:absolute;display:block;width:122%;max-width:none;height:auto;left:-11%;top:50%;margin:0;transform:translateY(-50%);mix-blend-mode:multiply}
.concept-c footer .brand{position:relative;display:block;width:125px;height:auto;aspect-ratio:2.6;overflow:hidden;flex-shrink:0}
.concept-c footer .brand .brand-lockup{position:absolute;width:122%;max-width:none;height:auto;left:-11%;top:50%;margin:0;transform:translateY(-50%)}
@media(max-width:760px){.concept-c .hero h1.hero-lettering{width:280px;margin:14px auto 10px}}

.concept-c .hero-lettering img,.concept-c footer .brand-lockup{filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply}

/* A quiet, one-time gathering of the wordmark pieces. */
.concept-c .hero h1.hero-lettering .logo-source-hidden{opacity:0}
.concept-c .hero h1.hero-lettering .logo-piece{pointer-events:none;animation:logo-gather 1100ms steps(7,end) both;will-change:transform,opacity}
@keyframes logo-gather{
0%,14%{opacity:1;transform:translateY(-50%) translate(calc(var(--piece-x)*2.8),calc(var(--piece-y)*2.8)) rotate(var(--piece-r)) scale(1)}
38%{opacity:1;transform:translateY(-50%) translate(calc(var(--piece-x)*1.6),calc(var(--piece-y)*1.6)) rotate(var(--piece-r)) scale(1)}
56%{opacity:1;transform:translateY(-50%) translate(calc(var(--piece-x)*.6),calc(var(--piece-y)*.6)) rotate(0) scale(1)}
68%{opacity:1;transform:translateY(-50%) translate(0,-2px) rotate(0) scale(1)}
76%{opacity:.78;transform:translateY(-50%) translate(2px,0) rotate(0) scale(1)}
84%{opacity:1;transform:translateY(-50%) translate(-1px,0) rotate(0) scale(1)}
92%,100%{opacity:1;transform:translateY(-50%) translate(0,0) rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.concept-c .hero h1.hero-lettering .logo-piece{display:none}.concept-c .hero h1.hero-lettering .logo-source-hidden{opacity:1}}

.concept-c .hero h1.hero-lettering:has(.logo-piece){overflow:visible}

.concept-c .hero h1.hero-lettering{margin-top:34px;margin-bottom:32px}

/* Keep the product high on mobile while reserving room for assembling pieces. */
@media(max-width:760px){
.concept-c .hero h1.hero-lettering{width:250px;margin:30px auto 26px}
.concept-c .hero-copy>p:last-of-type{font-size:16px;margin:6px 0 12px}
.concept-c .hero-actions{margin:6px 0}
.concept-c .hero-product{margin-top:12px}
}
@media(max-width:760px) and (max-height:700px){
.concept-c .hero{padding-top:4px}
.concept-c .hero h1.hero-lettering{width:230px}
}