/* The MONCNÉ company site (moncne.ai), 2026-10-27. One idea carries the whole page: the world is monotone while it
   is full of small complaints, and colour comes back where one is put right (owner: 「モノトーンの中に、ちょっとずつ
   明るい色がある」). Grey everywhere; the few bright accents appear only on what has been resolved. The design was
   settled on the drafts in docs/marketing/moncne-site/ (flow-a.html), scene by scene, with the owner. */
:root{
  --ink:#111111; --ink2:#3A3A3A; --mute:#8A8A8A; --hair:#D9D9D6; --paper:#F4F4F2; --night:#0E0E0F;
  --coral:#FF6B4A; --sun:#FFC83D; --teal:#18B5A4; --sky:#3D8BFF;
  --katia-ink:#0C1530; --katia-ground:#F3F3F4;
  --wrap:1600px; --gutter:clamp(20px,4.5vw,72px); /* the KATIA site's measures (landing/web/site/site.css) */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* the KATIA site's faces, so the two read as one site */
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",Roboto,sans-serif;background:var(--night);color:#fff;line-height:1.7;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
html[lang=en] body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-feature-settings:normal}
img{display:block;max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:20;background:#fff;color:var(--ink);padding:8px 12px;border-radius:8px}

/* ── The header and footer MONCNÉ and KATIA share (owner, 2026-10-27: one site, not two). The same measures live in
   landing/web/site/site.css (.shead, .slang, .sfoot); change them together. The logo answers the width (vision §1.1):
   the wordmark on a wide screen, the M alone on a phone. */
.shead{position:fixed;inset:0 0 auto 0;z-index:10;background:#0E0E0F;color:#fff}
.shead-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.shead-logo{display:inline-flex;align-items:center;color:#fff;text-decoration:none;font:800 18px/1 Nunito,system-ui,sans-serif;letter-spacing:.08em}
.shead-logo svg{display:none;width:26px;height:26px}
.shead-logo path{fill:#fff;stroke:#fff}
.shead-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600}
.shead-nav>a{color:rgba(255,255,255,.75);text-decoration:none}.shead-nav>a:hover,.shead-nav>a[aria-current]{color:#fff}
.shead-nav>a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.slang{display:inline-flex;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:3px}
.slang a{padding:3px 10px;border-radius:999px;font:700 12px/1.4 Nunito,system-ui,sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.7);text-decoration:none}
.slang a:hover{color:#fff}.slang a.on{background:#fff;color:#0E0E0F}
/* Log in: the one filled control in the header, to KATIA's web app (owner, 2026-10-31); in the phone's menu it spans the
   panel above the language. The same in landing/web/site/site.css. */
.shead-nav>a.slogin,.slogin{background:#fff;color:#0E0E0F;border-radius:999px;padding:7px 16px;font-weight:700;text-decoration:none}
.shead-nav>a.slogin:hover,.slogin:hover{background:rgba(255,255,255,.88);color:#0E0E0F}
.dlogin{display:block;text-align:center;margin-top:16px;padding:12px 16px;font-size:15px}
/* the phone's menu: a button in the header, a panel from the right with the products, all products, the company
   page and the language (owner, 2026-10-27). The same in landing/web/site/site.css. */
.smenu{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.28);border-radius:12px;background:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.smenu span{display:block;width:16px;height:2px;border-radius:2px;background:#fff}
.sdrawer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5)}
.sdrawer[hidden]{display:none}
.sdrawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);background:#0E0E0F;color:#fff;padding:72px 24px 32px;
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;box-shadow:-20px 0 60px rgba(0,0,0,.4)}
.sclose{position:absolute;top:12px;right:16px;width:40px;height:40px;border:0;background:none;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.sdrawer-h{font:800 12px Nunito,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 6px}
.dprod{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.dprod b{font:800 16px Nunito,system-ui,sans-serif;letter-spacing:.1em}
.dprod span{font-size:13px;color:rgba(255,255,255,.65)}
.dall{margin:6px 0 18px;padding:6px 2px;font-size:14px;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none}
.dlink{padding:14px 2px;border-top:1px solid rgba(255,255,255,.12);font-size:15px;font-weight:600;color:#fff;text-decoration:none}
.sdrawer .slang{align-self:flex-start;margin-top:auto}
.drawer-open{overflow:hidden}
.sfoot{background:#0E0E0F;color:rgba(255,255,255,.72);font-size:13px}
.sfoot-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;max-width:var(--wrap);margin:0 auto;padding:56px var(--gutter) 36px}
.sfoot-logo{color:#fff;text-decoration:none;font:800 18px/1 Nunito,system-ui,sans-serif;letter-spacing:.08em}
.sfoot-brand p{margin-top:12px;color:rgba(255,255,255,.55);max-width:280px;line-height:1.7}
.sfoot-col{display:flex;flex-direction:column;gap:10px}
.sfoot-col b{color:#fff;font-size:12px;letter-spacing:.06em}
.sfoot-col a{color:rgba(255,255,255,.72);text-decoration:none}.sfoot-col a:hover{color:#fff}
.sfoot-copy{grid-column:1/-1;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45)}

/* ── A scene: the stage is as tall as the scroll it takes, the pin stays on screen while it plays. reveal.js writes
   --p (0 to 1) on each stage and --s0, --s1, … for each colour spot. */
.stage{position:relative}
.stage .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.reveal{position:absolute;inset:0}
.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reveal .mono{filter:grayscale(1);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}
.scene-copy{position:absolute;z-index:3;left:var(--gutter);max-width:620px}
.scene-copy h2{font-weight:800;font-size:clamp(28px,4.2vw,58px);line-height:1.25;letter-spacing:.01em}
html[lang=en] .scene-copy h2{letter-spacing:-.01em;line-height:1.15}
.scene-copy h2 span{display:block;white-space:nowrap}
.scene-copy p{margin-top:16px;font-size:16px;color:rgba(255,255,255,.86);max-width:470px;text-shadow:0 1px 14px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}
.scene-copy h2{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.fade-in{opacity:clamp(0,calc((var(--p) - var(--at,0)) * 6),1);transform:translateY(calc((1 - clamp(0,calc((var(--p) - var(--at,0)) * 6),1)) * 14px))}
.window{opacity:clamp(0,min(calc((var(--p) - var(--a)) * 14),calc((var(--b) - var(--p)) * 14)),1)}

/* 1. The world, as a film of one day: each complaint fills the screen in turn (a slow push-in, crossfaded), its
   time of day in the corner and its words as a subtitle; the line arrives on black before and after. Nothing here
   is resolved, so nothing here has colour. */
.film{height:520vh}
.film .pin{background:#000}
.film .shot{position:absolute;inset:0}
.film .shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.82) contrast(1.05);transform:scale(calc(1.03 + (var(--p) - var(--a)) * .5))}
.film .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 62%,rgba(0,0,0,.7))}
.film .time{position:absolute;z-index:2;left:var(--gutter);top:13vh;font:800 15px Nunito,sans-serif;letter-spacing:.18em;color:rgba(255,255,255,.7)}
.film .sub{position:absolute;z-index:2;left:0;right:0;bottom:11vh;text-align:center;font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:.06em;text-shadow:0 2px 18px rgba(0,0,0,.6)}
html[lang=en] .film .sub{letter-spacing:.01em}
.film .title{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:3;padding:0 var(--gutter)}
.film .title h1,.film .title h2{font-weight:800;font-size:clamp(30px,4.6vw,64px);line-height:1.3}
.film .cue{position:absolute;left:50%;bottom:6vh;width:1px;height:46px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.7));
  opacity:calc(1 - var(--p) * 12)}

/* 2. The city: closing in on one window, which takes colour (「まずは、家庭から。」). */
.city{height:280vh}
.city .reveal{transform-origin:61% 47%;transform:scale(calc(1 + var(--p) * var(--p) * 2.4))}
.city .scene-copy{bottom:12vh}
.city .shade{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(0,0,0,.55)),linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0) 45%)}

/* 3. The home: every complaint at once, then each answered by a KATIA card as its corner of the photo takes colour.
   The cards copy the app's own action card: a tag, a title, a line under it, 取り消す. */
.home{height:420vh}
.home .pin{background:#111}
.home .scene-copy{top:10vh}
.home .scene-copy h2{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.home .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0) 38%)}
.pairs{display:contents}
.pair{position:absolute;z-index:2;width:min(380px,32vw)}
.bubble{position:relative;display:inline-block;background:#fff;color:#111;font-weight:700;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.25);
  font-size:clamp(17px,1.65vw,23px);padding:12px 18px;border-radius:16px;opacity:calc(1 - var(--s) * 3)}
.bubble::after{content:"";position:absolute;bottom:-7px;left:22px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:2px}
.card{position:absolute;left:0;top:0;width:100%;background:#fff;color:var(--katia-ink);border-radius:18px;padding:14px 18px 16px;box-shadow:0 14px 40px rgba(0,0,0,.28);
  opacity:clamp(0,calc((var(--s) - .25) * 3),1);transform:translateY(calc((1 - clamp(0,calc((var(--s) - .25) * 3),1)) * 12px))}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card .tag,.card .undo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#3B4A6B;border-radius:99px;padding:3px 9px}
.card .tag{background:#EEF1F6}.card .undo{background:#F2F3F5}
.card .tag i{width:7px;height:7px;border-radius:50%;background:var(--dot)}
.card b{display:block;margin-top:10px;font-size:clamp(16px,1.45vw,20px);line-height:1.35}
.card small{display:block;margin-top:4px;font-size:clamp(13px,1.05vw,15px);color:#6B7280}
.home .closing{position:absolute;z-index:3;right:var(--gutter);bottom:9vh;text-align:right}
.home .closing h2{font-weight:800;font-size:clamp(24px,3vw,40px);line-height:1.3;text-shadow:0 2px 24px rgba(0,0,0,.6)}

/* 4. KATIA, as a scene of its own. The colour has fully come back, so the ground turns to the app's own light
   ground with its peach glow; the logo and 家庭 × AI on one side, the app's home on the other. No "products" heading:
   the menu's Products already says what this is (owner, 2026-10-27). */
.product{height:260vh} /* long enough to open the device and hold it open (devices.js, OPEN_AT) */
.product .pin{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6vw;padding:90px 9vw 6vh;background:var(--katia-ground);color:var(--katia-ink)}
.product .glow{position:absolute;left:-20%;right:-20%;bottom:-45%;height:85%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(252,190,150,.72),rgba(252,190,150,0));opacity:clamp(0,calc(var(--p) * 3),1)}
.product .copy{position:relative;z-index:1}
.product .katia-logo{width:min(300px,60vw);height:auto;margin-left:-14px}
.product h2{margin-top:18px;font-weight:800;font-size:clamp(44px,5.2vw,84px);line-height:1.05;letter-spacing:.01em;white-space:nowrap}
html[lang=en] .product h2{font-size:clamp(40px,5.4vw,78px);white-space:nowrap;letter-spacing:-.01em}
.product p{margin-top:22px;max-width:440px;font-size:16px;color:#3B4A6B}
.product .go{display:inline-block;margin-top:30px;background:var(--katia-ink);color:#fff;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.03em;border-radius:99px;padding:14px 24px}
.product .go:hover{background:#1B2A4F}
/* One iPhone Duo that opens, live (owner, 2026-10-27: 「畳み込まれた状態で…ポンって画面が開く…右側に今見てたKatiaのチャット
   があって、真ん中にダニエルに白いシャツをっていうタスクができている」), as on KATIA's own top (landing/web, DuoUnfold, the same
   measures): folded, its cover plays Mina's request; the scroll opens it on the task list with KATIA's chat on the
   right (devices.js) and it stays open to the scene's end; on every width for now (see the 721 to 1100 rule below). */
.duo{position:relative;z-index:1;min-width:0;display:flex;justify-content:flex-end;transform:translateY(calc((1 - clamp(0,calc(var(--p) * 2.5),1)) * 60px));opacity:clamp(0,calc(var(--p) * 4),1)}
/* the opening iPhone Duo (DuoUnfold), drawn after the iPhone Duo simulator and Apple's own page (owner, 2026-10-27:
   「本当の iPhone Duo のシミュレーターで撮った写真…そのように作ってほしい」「ちゃんと携帯が開くようなアニメーション」).
   Folded: the cover screen, its camera and status in a column on the right, the hinge on the left. It opens like a
   book: the cover half turns on the hinge toward you and over to the left while the device slides to stay centred,
   and the open screen lights as it comes into view. Inside .uf-dev every size is the device's own points (open: two
   halves of 490 x 701, the open screen 948 x 669 with its status column), scaled by --us. */
/* --uf is the folded device's scale, --uo the open one's. The folded device is drawn larger (up to --uf-max), since its
   cover is where the request plays and the app's words shrunk to half read soft, most of all on a standard-density
   screen (owner, 2026-10-27: 「なんで画質が汚いの」); it shrinks to --us as it opens, and on a phone to the screen's
   width. Open, it fills the room its column leaves, up to --uo-max and the window's height (owner, 2026-10-27: 「開いた後、
   もっとサイズ大きくして。スペース余ってる」). The page sets both from that room (devices.js on MONCNÉ, DuoUnfold on
   KATIA); --us is only the size before it has measured. The box is the larger of the two. */
.unfold{--us:.56;--uf:.74;--uo:var(--us);--uf-max:.74;--uo-max:.9;--bw:max(calc(992px * var(--uo)),calc(520px * var(--uf)));
  --bh:calc(717px * max(var(--uf),var(--uo)));position:relative;width:var(--bw);height:var(--bh);flex-shrink:0}
@media (max-width:720px){.unfold{--uf-max:.66;--uf:.66;--uo:.34}}
.uf-dev{position:absolute;left:0;top:0;width:980px;height:701px;transform-origin:0 0;perspective:2400px;
  transform:translate(calc(var(--bw) / 2 - 735px * var(--uf)),calc(var(--bh) / 2 - 350.5px * var(--uf))) scale(var(--uf));
  transition:transform 1.25s cubic-bezier(.6,0,.25,1)}
.unfold.open .uf-dev{transform:translate(calc(var(--bw) / 2 - 490px * var(--uo)),calc(var(--bh) / 2 - 350.5px * var(--uo))) scale(var(--uo))}
.uf-half,.uf-flap{position:absolute;top:0;left:490px;width:490px;height:701px}
.uf-half,.uf-face{background:#050505}
/* no line down the middle of the open device (owner, 2026-10-27: 「開いた時のど真ん中の線はいらない」): the shadow is one
   element under the whole device (the left half's own shadow fell across the right half), the open halves' rims stop at
   the hinge, and the right half's screen reaches a little under the left so their meeting edge shows no gap */
.uf-floor{position:absolute;top:0;left:490px;width:490px;height:701px;border-radius:16px 94px 94px 16px;box-shadow:0 26px 50px rgba(35,26,20,.2);
  transition:left .35s ease,width .35s ease,border-radius .35s ease}
/* it reaches under the left half only once that half has landed: ahead of it, the shadow's empty middle showed as a
   light frame where the half was about to be (owner, 2026-10-27: 「開く時、左に白い枠が見える」) */
.unfold.open .uf-floor{left:0;width:980px;border-radius:70px;transition:left .3s ease 1.05s,width .3s ease 1.05s,border-radius .3s ease 1.05s}
.uf-front{box-shadow:inset 0 0 0 2.5px #c6bfb3,inset 0 0 0 4px #5a564f}
.uf-half::after,.uf-back::after{content:'';position:absolute;inset:0;border-radius:inherit;border:2.5px solid #c6bfb3;pointer-events:none}
.uf-half::after{border-left:0}
.uf-back::after{border-right:0}
.unfold.open .uf-half .uf-scr{left:-2px}
.unfold.open .uf-half iframe{left:-472px}
/* closed, the back half takes the cover's corners so only one outline shows; they narrow to the open device's as it opens */
.uf-half,.uf-half .uf-scr{transition:border-radius 1.25s cubic-bezier(.6,0,.25,1)}
.uf-half{border-radius:16px 94px 94px 16px}
.unfold.open .uf-half{border-radius:0 70px 70px 0}
.uf-flap{transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.25s cubic-bezier(.6,0,.25,1)}
.unfold.open .uf-flap{transform:rotateY(-180deg)}
.uf-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* the two faces stand 2px off the flap, each on its own side: Safari ignores backface-visibility on an iframe, and
   with both on one plane the turned-over cover flickered through the open left screen on an iPhone (owner,
   2026-10-28: 「左の画面のところがピカピカ」). Apart, the face toward the viewer simply covers the other. */
.uf-front{transform:translateZ(2px);border-radius:16px 94px 94px 16px}
.uf-back{transform:rotateY(180deg) translateZ(2px);border-radius:70px 0 0 70px}
/* where the two halves meet, each edge is drawn soft and the page showed through as a fine mark in the frame (owner,
   2026-10-31: 「真ん中の線はいらない」, the open iPhone Duo shows no line down its middle), so once the turn is over the
   right half carries a black strip under the left half's edge; it goes the moment the device starts to fold, since
   beside the folded device it would show */
.unfold.open .uf-half{box-shadow:-3px 0 0 #050505;transition-property:border-radius,box-shadow;transition-duration:1.25s,0s;transition-delay:0s,1.25s}
.uf-scr{position:absolute;overflow:hidden;background:#F3F3F3}
.uf-half .uf-scr{top:16px;bottom:16px;left:0;right:16px;border-radius:0 82px 82px 0}
.unfold.open .uf-half .uf-scr{border-radius:0 54px 54px 0}
.uf-back .uf-scr{top:16px;bottom:16px;left:16px;right:0;border-radius:54px 0 0 54px}
.uf-front .uf-scr{top:11.5px;left:12px;width:466px;height:678px;border-radius:10px 82px 82px 10px}
.uf-scr iframe{position:absolute;top:0;left:0;border:0;display:block;pointer-events:none}
.uf-front iframe{width:376px;height:678px}
.uf-half iframe,.uf-back iframe{width:861px;height:669px}
.uf-half iframe{left:-474px}
/* the status column: the time and the network ring, under the camera on the cover */
.uf-col{position:absolute;top:0;right:0;bottom:0;width:87px;display:flex;flex-direction:column;align-items:center;
  font:700 16px/16px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#111;background:linear-gradient(#F3F3F3 80%,#F6E5DA)}
.uf-front .uf-col{width:90px;background:linear-gradient(#F3F3F3 87%,#F5E3D9)}
.uf-col i{width:37px;height:37px;margin-top:28px;border-radius:50%;background:#000}
.uf-col b{margin-top:31px}
.uf-col i + b{margin-top:19px}
.uf-col svg{width:40px;height:40px;margin-top:8px}
/* the buttons: the side one always, the two on top only once it is open (no hinge strip on the folded device: owner,
   2026-10-27, 「折り畳まれた時の左のヒンジはいらない」) */
.uf-key{position:absolute;border-radius:2px;background:linear-gradient(#d2cbbf,#8f897f)}
.uf-key.side{right:-3px;top:200px;width:4px;height:108px;background:linear-gradient(90deg,#d2cbbf,#8f897f)}
.uf-key.t1,.uf-key.t2{top:-3px;width:62px;height:4px;opacity:0;transition:opacity .3s}
.uf-key.t1{left:227px}
.uf-key.t2{left:305px}
.unfold.open .uf-key.t1,.unfold.open .uf-key.t2{opacity:1;transition-delay:.9s}
/* light: the cover darkens as it turns away, the open screen is dark until it faces you */
.uf-shade{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:#000;transition:opacity 1.25s cubic-bezier(.6,0,.25,1)}
.uf-front .uf-shade{opacity:0}
.unfold.open .uf-front .uf-shade{opacity:.7}
.uf-back .uf-shade{opacity:.9}
.uf-half .uf-shade{background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.45) 65%,rgba(0,0,0,.3))}
.unfold.open .uf-back .uf-shade,.unfold.open .uf-half .uf-shade{opacity:0}
@media (prefers-reduced-motion:reduce){.uf-dev,.uf-flap,.uf-shade,.uf-key,.uf-floor{transition:none}}
.dev-phone{display:none;--ps:.6;position:relative;width:calc(426px * var(--ps));height:calc(898px * var(--ps))}
.dev-phone .frame{width:426px;height:898px;transform:scale(var(--ps));transform-origin:top left;border-radius:54px;background:#111;padding:12px;box-shadow:0 30px 60px rgba(12,21,48,.25)}
.dev-phone .screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:42px;background:var(--katia-ground)}
.dev-phone iframe{width:402px;height:874px;border:0;display:block;pointer-events:none}
.dev-phone .status{position:absolute;top:18px;left:30px;font:700 15px -apple-system,system-ui,sans-serif;color:var(--katia-ink)}
.dev-phone .island{position:absolute;top:10px;left:50%;width:120px;height:34px;margin-left:-60px;background:#000;border-radius:20px}
@media (min-width:1400px){.unfold{--us:.62}}
.phone{position:relative;z-index:1;width:min(100%,calc((100vh - 150px) * .46));justify-self:center;padding:10px;border-radius:48px;background:#1C1C22;border:2px solid #3A3A44;
  box-shadow:0 30px 70px rgba(12,21,48,.22);transform:translateY(calc((1 - clamp(0,calc(var(--p) * 2.5),1)) * 60px));opacity:clamp(0,calc(var(--p) * 4),1)}
.phone .scr{position:relative;border-radius:39px;overflow:hidden;background:#fff}
.phone .scr img{width:100%;height:auto}
.phone .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:99px;background:#0B0B0D}

/* 5. The city again: pulling back from the one home, window after window takes its colour, until the whole city is
   lit, with a warm light rising from the street (owner, 2026-10-27: 「もうちょっと光ある量に」). */
.next{height:300vh}
.next .scene-copy{top:16vh}
.next .reveal{transform-origin:61% 47%;transform:scale(calc(1 + (1 - var(--p)) * (1 - var(--p)) * 1.4))}
.next .light{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(120% 70% at 55% 100%,rgba(255,176,92,.55),rgba(255,176,92,0) 70%);opacity:clamp(0,calc((var(--p) - .25) * 1.6),1)}
.next .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.25) 38%,rgba(0,0,0,0) 55%)}

/* ── The company page: plain and readable, on paper, under the same dark header. */
.page{background:var(--paper);color:var(--ink);padding:140px var(--gutter) 110px}
.page .inner{max-width:880px;margin:0 auto}
.page h1{font-weight:800;font-size:clamp(32px,4vw,52px);line-height:1.2}
.page .lead{margin-top:18px;font-size:17px;color:var(--ink2);max-width:640px}
.facts{margin-top:44px;border-top:1px solid var(--hair)}
.facts div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--hair)}
.facts dt{font-weight:700;color:var(--ink2)}
.facts dd a{text-decoration:underline;text-underline-offset:3px}
.message{margin-top:96px}
.message .kicker{font:800 12px Nunito,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.message h2{margin-top:12px;font-weight:800;font-size:clamp(26px,3vw,38px);line-height:1.35}
.message .body{margin-top:26px;display:grid;gap:18px;font-size:16.5px;line-height:1.95;color:#222}
html[lang=en] .message .body{line-height:1.75}
.message .sign{margin-top:34px;display:flex;align-items:baseline;gap:14px;font-weight:700}
.message .sign span{font-weight:400;color:var(--ink2);font-size:14px}

/* ── The products page: one card per product, on that product's own ground; a lone card spans the row. */
.page .inner.wide{max-width:1180px}
.pgrid{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:24px}
.pcard{position:relative;overflow:hidden;border:1px solid var(--hair);display:grid;grid-template-columns:1fr minmax(160px,240px);align-items:end;gap:24px;min-height:420px;
  padding:40px 40px 0;border-radius:28px;background:var(--pground);color:var(--pink);text-decoration:none;
  box-shadow:0 1px 0 var(--hair),0 18px 50px rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease}
.pcard:hover{transform:translateY(-3px);box-shadow:0 1px 0 var(--hair),0 26px 60px rgba(0,0,0,.1)}
.pcard::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-55%;height:90%;border-radius:50%;background:radial-gradient(closest-side,var(--pglow),transparent);pointer-events:none}
.pcard:only-child{grid-column:1/-1}
.pcopy{position:relative;align-self:center;padding-bottom:40px}
.pcopy .katia-logo{width:min(220px,50vw);height:auto;margin-left:-10px}
.pcopy h2{margin-top:14px;font-weight:800;font-size:clamp(32px,4vw,56px);line-height:1.1}
.pcopy p{margin-top:16px;max-width:440px;color:#3B4A6B;font-size:15.5px}
.pgo{display:inline-block;margin-top:22px;font-weight:700;font-size:15px}
.pshot{position:relative;align-self:end;border-radius:28px 28px 0 0;overflow:hidden;background:#1C1C22;padding:8px 8px 0;box-shadow:0 20px 50px rgba(12,21,48,.2)}
.pshot img{border-radius:21px 21px 0 0;width:100%;height:auto;aspect-ratio:720/1100;object-fit:cover;object-position:top}
/* the empty place beside the products, for the next one: it shows the page is a row of products, not one */
.pnext{display:grid;place-items:center;min-height:220px;border:1.5px dashed #C9C9C4;border-radius:28px;color:var(--mute);font-size:14px;text-align:center;padding:24px}

/* ── Phones (owner, 2026-10-27: 「スマートフォンで見たときでも、ちゃんと成立するように」). The pictures keep their
   subject in frame (object-position; reveal.js maps the colour spots through it), the home's four complaints and
   answers stack at the foot of the screen instead of floating over the photo, and the KATIA scene stops pinning so
   nothing is cut off. */
@media (max-width:720px){
  .shead-in{height:56px}
  .shead-logo span{display:none}.shead-logo svg{display:block}
  .shead-nav{display:none}
  .smenu{display:flex}
  .pcard{grid-template-columns:1fr;padding:28px 24px 0;min-height:0}
  .pshot{width:62%;justify-self:center}
  .sfoot-in{grid-template-columns:1fr 1fr;gap:28px 20px;padding-top:44px}
  .sfoot-brand{grid-column:1/-1}
  .scene-copy{left:var(--gutter);right:var(--gutter);max-width:none}
  .scene-copy h2 span{white-space:normal}
  .scene-copy p{font-size:14px}
  .film .time{top:76px}
  .film .sub{left:var(--gutter);right:var(--gutter);bottom:9vh;font-size:22px}
  .film .title h1,.film .title h2{font-size:24px}
  .city .reveal img{object-position:61% 50%}
  .city .reveal{transform:scale(calc(1 + var(--p) * var(--p) * 1.2))}
  .city .scene-copy{bottom:9vh}
  .home .reveal img{object-position:64% 50%}
  .home .scene-copy{top:72px;opacity:calc(1 - clamp(0,calc((var(--p) - .78) * 10),1))}
  .home .scene-copy h2{font-size:30px}
  .pairs{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:16px;display:flex;flex-direction:column;gap:8px}
  .pairs .pair{position:relative;left:auto!important;right:auto!important;top:auto!important;width:100%;min-height:98px;display:flex;align-items:center}
  .bubble{font-size:16px;padding:10px 14px}
  .card{padding:11px 14px 12px}
  .card b{font-size:16px;margin-top:6px}
  .card small{font-size:12px}
  .home .closing{top:72px;bottom:auto;left:var(--gutter);right:var(--gutter);text-align:left}
  .home .closing h2{font-size:26px}
  .home .shade{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55))}
  /* the KATIA scene holds on a phone too, like every other scene (owner, 2026-10-27: a hard flick skipped it): the
     words sit compact at the top, the app rises from the foot of the screen and runs past it */
  .product{height:260vh}
  .product .pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;padding:80px var(--gutter) 0;gap:22px}
  .duo{justify-content:center;align-self:start}
  .product .katia-logo{width:150px;margin-left:-7px}
  .product h2{font-size:42px;margin-top:10px}
  html[lang=en] .product h2{font-size:34px}
  .product p{font-size:14px;margin-top:12px}
  .product .go{margin-top:16px;padding:11px 20px;font-size:14px}
  .next .reveal img{object-position:61% 50%}
  .next .scene-copy{top:84px}
  .page{padding-top:104px}
  .facts div{grid-template-columns:1fr;gap:2px;padding:14px 0}
  .message{margin-top:64px}
  .message .body{font-size:16px}
}
/* every width shows the iPhone Duo for now (owner, 2026-10-27: 「スマートフォン表示でも iphone duo 仕様にしてみて。見づらかったら
   あとで戻す」), as on KATIA's top; between a phone and a wide screen the words sit above it. The phone (.dev-phone)
   stays in the markup so going back is putting `.unfold{display:none}.dev-phone{display:block}` here and above. */
@media (max-width:1100px) and (min-width:721px){
  .product .pin{grid-template-columns:1fr;align-content:center;gap:28px}
  .duo{justify-content:center}
}