/* Pictansu: picture + tansu. The page is built out of the app icon: a teal room, a cream-and-wood chest of drawers,
   prints tucked into it. No web fonts, no scripts, no inline styles (strict CSP). */
:root{
  --teal:#1f5f6b;--teal-deep:#174a54;--night:#123d45;--wood:#e3cba4;--wood-deep:#d3b98f;--face:#f7eee0;--sky:#d6ecef;--mtn:#5e9aa5;--sun:#f0b44c;
  --face-ink:#12323a;--face-muted:#42585e;--on-teal:#fdf7ec;--on-teal-muted:#d6ecef;--sun-soft:#ffd690;
  --paper:#fbf6ec;--surface:#fffdf8;--ink:#12323a;--muted:#4b6066;--line:#e8dcc6;--link:#1f5f6b;--soft:#efe5d3;
  --foot:#e3cba4;--foot-ink:#12323a;--foot-muted:#3f5157;--foot-line:#d3b98f;
  --bezel:#0d1a1e;--phone-shadow:0 34px 60px -24px rgba(6,28,33,.65),0 10px 22px -12px rgba(6,28,33,.5);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,"Hiragino Sans","Hiragino Kaku Gothic ProN","Apple SD Gothic Neo","Noto Sans JP","Noto Sans KR",sans-serif;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);color-scheme:light}
:root:lang(ja){--display:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif CJK JP","Noto Serif JP",serif}
:root:lang(ko){--display:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}
@media (prefers-color-scheme:dark){:root{
  --paper:#0e1e22;--surface:#142a2f;--ink:#edf3f0;--muted:#a9bcbf;--line:#24393f;--link:#8fd0da;--soft:#1a3238;
  --foot:#2b2519;--foot-ink:#f1e6d2;--foot-muted:#c4b69e;--foot-line:#443a29;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--link)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);line-height:1.16;text-wrap:balance}
p,li{text-wrap:pretty}
:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:12px;top:-60px;background:var(--sun);color:var(--night);padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{top:12px}
.ico{width:20px;height:20px;flex:none}

/* Header: same teal as the room */
.top{position:sticky;top:0;z-index:10;background:var(--teal)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 21px/1 var(--display);text-decoration:none;color:inherit}
:root:lang(ja) .brand,:root:lang(ko) .brand{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.top .brand{color:var(--on-teal)}
.brand img{border-radius:9px;display:block;box-shadow:0 0 0 1px rgba(253,247,236,.28)}
.nav{display:flex;gap:2px;font-size:15px}
.nav a{color:var(--on-teal-muted);text-decoration:none;padding:7px 12px;border-radius:999px;font-weight:500}
.nav a:hover{color:var(--on-teal);background:rgba(253,247,236,.12)}
.nav a[aria-current]{color:var(--teal-deep);background:var(--face);font-weight:600}

/* Hero: the app icon, life-size. A phone stands in the chest where the icon has its photo. */
.hero{position:relative;overflow:clip;background:var(--teal);color:var(--on-teal)}
.hero::before{content:"";position:absolute;inset:auto 0 44px;height:min(30vw,250px);background:url(art/ridge.svg) right bottom/cover no-repeat}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:44px;background:var(--teal-deep)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:40px;align-items:end;padding-top:40px}
.hero-copy{padding:32px 0 104px;align-self:center}
.eyebrow{margin:0 0 16px;font-size:14px;font-weight:650;letter-spacing:.04em;color:var(--sun-soft)}
.hero h1{font-size:clamp(38px,5vw,66px);font-weight:700;letter-spacing:-.012em;margin:0 0 22px}
.hero h1:lang(ja){word-break:keep-all;font-size:clamp(36px,4.3vw,56px)}
h2:lang(ja),h3:lang(ja){word-break:auto-phrase}
.hero h1:lang(de){font-size:clamp(36px,4.3vw,56px)}
.hero .lead{font-size:clamp(17px,1.5vw,20px);color:var(--on-teal-muted);max-width:32em;margin:0 0 30px}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.badge{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 14px;border-radius:14px;min-width:172px}
.badge .ico{width:26px;height:26px}
.badge span{display:flex;flex-direction:column;font-weight:650;font-size:17px;line-height:1.15}
.badge small{font-size:12px;font-weight:500;letter-spacing:.01em}
.badge-live{background:var(--face);color:var(--teal-deep);text-decoration:none;box-shadow:0 3px 0 var(--wood-deep),0 14px 24px -14px rgba(6,28,33,.7)}
.badge-live small{color:#3f5a60}
.badge-live:hover{color:var(--teal-deep);background:#fffaf1}
.badge-soon{color:var(--on-teal);box-shadow:inset 0 0 0 1.5px rgba(253,247,236,.4)}
.badge-soon small{color:var(--on-teal-muted)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--on-teal);font-size:15px}
.chips li{display:inline-flex;align-items:center;gap:6px}
.chips .ico{width:17px;height:17px;color:var(--sun-soft);stroke-width:2.4}

.scene{position:relative;width:100%;max-width:560px;justify-self:end;aspect-ratio:560/680;margin-bottom:12px}
.sun{position:absolute;width:30%;aspect-ratio:1;left:66%;top:2%;border-radius:50%;background:var(--sun)}
.phone{position:relative;border-radius:46px;padding:9px;background:var(--bezel);box-shadow:var(--phone-shadow)}
.phone img{display:block;border-radius:37px;width:100%}
.phone-hero{position:absolute;width:48%;left:25%;top:1%;rotate:4deg}
.print{position:absolute;display:block;background:#fffdf8;padding:clamp(5px,.6vw,8px);border-radius:10px;box-shadow:0 18px 30px -16px rgba(6,28,33,.65)}
.print img{display:block;width:100%;border-radius:5px}
.p1{width:27%;left:4%;top:37%;rotate:-13deg}
.p2{width:26%;left:70.5%;top:34%;rotate:12deg}
.chest{position:absolute;display:block;left:5%;bottom:0;width:90%;height:auto;overflow:visible;filter:drop-shadow(0 10px 8px rgba(6,28,33,.28))}
.drawer-cast{opacity:0}

/* Sections */
.sec{padding:96px 0}
.sec-h{font-size:clamp(30px,3.8vw,46px);font-weight:700;letter-spacing:-.008em;margin:0 0 14px}
.sec-lead{margin:0;color:var(--muted);max-width:36em}

/* Five promises: an asymmetric tansu with a print tucked into its top */
.promises{padding-bottom:112px;overflow:clip}
.tansu{position:relative;margin-top:-22px;padding-top:78px}
.p3{width:172px;right:9%;top:0;rotate:9deg;padding:8px}
.drawers{position:relative;list-style:none;margin:0;padding:16px;display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--wood);border-radius:28px;box-shadow:0 8px 0 var(--wood-deep),0 30px 40px -28px rgba(18,50,58,.55)}
.drawers::before,.drawers::after{content:"";position:absolute;bottom:-30px;width:84px;height:26px;background:var(--wood-deep);border-radius:0 0 8px 8px}
.drawers::before{left:7%}.drawers::after{right:7%}
.drawer{position:relative;grid-column:span 2;display:flex;flex-direction:column;gap:14px;background:var(--face);color:var(--face-ink);border-radius:16px;padding:44px 28px 28px;box-shadow:inset 0 0 0 1px rgba(146,116,70,.14),0 2px 3px rgba(103,79,41,.22)}
.drawer:nth-child(1),.drawer:nth-child(4){grid-column:span 4}
.drawer:last-child{grid-column:1/-1;flex-direction:row;align-items:center;gap:18px;padding-top:40px}
.pull{position:absolute;top:16px;left:50%;width:62px;height:13px;margin-left:-31px;border-radius:7px;background:var(--teal)}
.drawer h3{font-size:clamp(21px,1.9vw,25px);font-weight:700;margin:0 0 8px;color:var(--face-ink)}
.drawer p{margin:0;font-size:16px;line-height:1.6;color:var(--face-muted)}
.ico-box{width:44px;height:44px;padding:11px;border-radius:50%;background:var(--teal);color:var(--face)}

/* A look inside: the inside of a pulled-out drawer, phones standing on a shelf */
.inside{position:relative;background:var(--night);color:var(--on-teal);padding:92px 0 72px;overflow:clip}
.inside::before{content:"";position:absolute;inset:0 0 auto;height:18px;background:var(--wood);box-shadow:0 5px 0 var(--wood-deep),0 24px 30px rgba(3,18,22,.5)}
.inside .sec-lead{color:var(--on-teal-muted)}
.gallery{list-style:none;margin:46px 0 0;padding:6px 28px 12px;display:flex;justify-content:safe center;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 28px;scrollbar-width:thin;scrollbar-color:var(--mtn) transparent}
.gallery li{flex:none;width:224px;padding:0 13px;display:flex;flex-direction:column;scroll-snap-align:start}
.gallery li::before{content:"";order:1;display:block;height:14px;margin:0 -13px;background:var(--wood);box-shadow:0 4px 0 var(--wood-deep)}
.gallery li:first-child::before{border-radius:7px 0 0 7px}
.gallery li:last-child::before{border-radius:0 7px 7px 0}
.gallery .phone{order:0;margin-bottom:-1px}
.gallery p{order:2;margin:20px 0 0;font-size:15px;font-weight:600;line-height:1.4;text-align:center;color:var(--on-teal)}
.phone-sm{border-radius:36px;padding:7px;box-shadow:0 0 0 1px rgba(214,236,239,.14)}
.phone-sm img{border-radius:29px}

/* How it works */
.steps{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.step-art{display:block;width:100%;max-width:220px;height:auto;margin-bottom:18px}
.steps li>div{display:flex;gap:14px;align-items:flex-start}
.steps p{margin:0;font-size:16.5px}
.num{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--face);font-weight:700;font-size:16px}

/* What we can't do: the closing statement, under lock */
.trust{background:var(--teal-deep);color:var(--on-teal);text-align:center;padding:96px 0;overflow:clip}
.trust .wrap{max-width:780px}
.keyhole{display:block;width:92px;height:92px;margin:0 auto;overflow:visible}
.keyhole-cover{transform-origin:60px 29px;rotate:-68deg}
.trust h2{font-size:clamp(32px,4.2vw,52px);font-weight:700;margin:26px 0 14px}
.trust p{font-size:clamp(17px,1.8vw,21px);color:var(--on-teal-muted);margin:0}

/* Document pages (privacy, terms, support, data deletion) */
.doc{max-width:800px;padding-top:60px;padding-bottom:88px}
.doc-head{padding-bottom:26px;margin-bottom:8px;border-bottom:4px solid var(--wood);border-radius:0 0 2px 2px}
.doc-head .eyebrow{color:var(--link)}
.doc-head h1{font-size:clamp(34px,5vw,50px);font-weight:700;margin:0 0 10px}
.meta{font-size:14px;color:var(--muted);margin:0}
.prose{font-size:17px}
.prose .lead{font-size:19px;color:var(--muted);margin:28px 0}
.prose h2{font-size:25px;font-weight:700;margin:44px 0 10px}
.prose ul,.prose ol{padding-left:22px}.prose li{margin:6px 0}
.prose pre{overflow-x:auto;background:var(--soft);padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.5}
.prose p code,.prose li code,.prose td+td code{overflow-wrap:anywhere}
.prose td:first-child code{white-space:nowrap}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose .table{overflow-x:auto;margin:16px 0}
.prose table{border-collapse:collapse;width:100%;font-size:15px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--line)}
.note{font-size:14px;color:var(--muted);background:var(--soft);padding:12px 16px;border-radius:12px;margin:24px 0 0}
code{font-size:.88em;background:var(--soft);padding:2px 6px;border-radius:6px}
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:12px 0}
summary{cursor:pointer;font-weight:650;padding:18px 52px 18px 22px;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);rotate:45deg;transition:rotate .2s}
details[open] summary::after{rotate:-135deg;margin-top:-2px}
details p{margin:0;padding:0 22px 20px;color:var(--muted)}

/* Footer: the chest's plinth */
.site-foot{background:var(--foot);color:var(--foot-muted);font-size:14.5px}
.site-foot a{color:var(--foot-ink)}
.site-foot .brand{color:var(--foot-ink)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-top:48px;padding-bottom:32px}
.foot-brand p{margin:12px 0 0;max-width:30em}
.foot,.langs{display:flex;flex-direction:column;gap:8px}
.foot a,.langs a{text-decoration:none;width:fit-content}
.foot a:hover,.langs a:hover{text-decoration:underline}
.langs a[aria-current]{font-weight:700}
.foot-bottom{padding-top:16px;padding-bottom:28px;font-size:13px}
.foot-bottom::before{content:"";display:block;height:1px;background:var(--foot-line);margin-bottom:16px}
.foot-bottom p{margin:0}

/* Responsive */
@media (max-width:1240px){.gallery{justify-content:flex-start}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:24px}
  .hero-copy{padding:20px 0 0;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .badges,.chips{justify-content:center}
  .scene{justify-self:center;max-width:460px;aspect-ratio:460/600}
  .hero::before{height:42vw}
  .sec{padding:72px 0}
  .drawers{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .drawer,.drawer:nth-child(1),.drawer:nth-child(4){grid-column:span 1}
  .drawer:nth-child(1),.drawer:nth-child(4),.drawer:last-child{grid-column:1/-1}
  .steps{grid-template-columns:minmax(0,1fr);gap:30px}
  .steps li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center}
  .step-art{margin:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .inside{padding-top:80px}.trust{padding:72px 0}
}
@media (max-width:620px){
  .wrap{padding-left:16px;padding-right:16px}
  .top-in{min-height:58px}
  .nav{gap:0;font-size:14px;margin:0 -8px;padding-bottom:6px;flex-wrap:wrap}
  .nav a{padding:6px 8px}
  .badge{min-width:0;flex:1 1 150px;justify-content:center;padding-right:14px}
  .scene{max-width:400px;aspect-ratio:343/462;margin-bottom:10px}
  .phone{border-radius:34px;padding:6px}.phone img{border-radius:28px}
  .phone-hero{width:54%;left:23%}
  .p1{width:29%;left:0;top:35%}.p2{width:28%;left:72%;top:31%}
  .chest{left:1%;width:98%}
  .tansu{margin-top:0;padding-top:62px}
  .drawer p:lang(de),.prose:lang(de),.hero .lead:lang(de){hyphens:auto;-webkit-hyphens:auto}
  .p3{width:118px;right:7%;padding:6px}
  .drawers{grid-template-columns:minmax(0,1fr);padding:10px;gap:10px;border-radius:20px}
  .drawer,.drawer:nth-child(1),.drawer:nth-child(4),.drawer:last-child{grid-column:auto;padding:40px 20px 22px}
  .drawer:last-child{flex-direction:column;align-items:flex-start;gap:14px}
  .drawers::before,.drawers::after{width:60px;height:22px;bottom:-26px}
  .gallery{padding:6px 16px 12px;scroll-padding:0 16px}
  .gallery li{width:204px;padding:0 11px}
  .gallery li::before{margin:0 -11px}
  .steps li{grid-template-columns:104px minmax(0,1fr);gap:14px}
  .steps li>div{flex-direction:column;gap:8px}
  .doc{padding-top:38px}
}

/* ---------- Motion. All off for prefers-reduced-motion; the base styles above are the finished state. ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .8s var(--ease) both}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.32s}
  /* Signature: the top drawer stands open, the prints drop in, the drawer shuts. */
  .sun{animation:sunup 1.3s .1s var(--ease) both}
  .phone-hero{animation:settle .9s .2s var(--ease) both}
  .p1{animation:tuck .85s .55s var(--ease) both}
  .p2{animation:tuck .85s .8s var(--ease) both,peek 12s 4s ease-in-out infinite}
  .chest-drawer{transform-box:fill-box;transform-origin:center;animation:shut .55s 1.4s cubic-bezier(.3,.9,.3,1.15) both}
  .drawer-cast{animation:cast .55s 1.4s ease both}
  .badge-live{transition:translate .2s var(--ease),box-shadow .2s}
  .badge-live:hover{translate:0 -2px}
  .drawer{transition:translate .25s var(--ease),box-shadow .25s}
  .drawer:hover{translate:0 -3px;box-shadow:inset 0 0 0 1px rgba(146,116,70,.14),0 12px 16px -6px rgba(103,79,41,.5)}
  .gallery .phone{transition:translate .3s var(--ease)}
  .gallery li:hover .phone{translate:0 -6px}
}
@keyframes rise{from{opacity:0;translate:0 20px}}
@keyframes sunup{from{opacity:0;translate:0 26%}}
@keyframes settle{from{opacity:0;translate:0 -5%}}
@keyframes tuck{0%{opacity:0;translate:0 -95%}35%{opacity:1}72%{translate:0 9%}100%{translate:0 0}}
@keyframes peek{0%,86%,100%{translate:0 0}93%{translate:0 -13%}}
@keyframes shut{from{transform:translateY(5px) scale(1.055)}}
@keyframes cast{from{opacity:.5}to{opacity:0}}

/* Scroll reveals only where the browser can drive them without a script; elsewhere everything is simply there. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 5% entry 75%}
    .drawer{animation:drawer-shut linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    .p3{animation:tuck-scroll linear both;animation-timeline:view();animation-range:entry 20% cover 42%}
    .gallery{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    .keyhole-cover{animation:swing linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
  }
}
@keyframes drawer-shut{from{opacity:.25;scale:1.035;translate:0 14px}}
@keyframes tuck-scroll{from{translate:0 -58%}}
@keyframes swing{from{rotate:0deg}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}summary::after{transition:none}}