/* Iris — editorial lifestyle × real product UI. Colours from the onigiri mascot guide: light ground, rice-white, nori,
   deep green for the main action, green-black text; status colours always come with words. */
:root{
  --paper:#FAF9F6; --paper2:#F4EBDD; --ink:#28312C; --ink2:#3F4842; --mute:#646B66; --line:#E6E0D4;
  --act:#3E5748; --nori:#454936; --mist:#BDB0C8;
  --ok:#276447; --warn:#8A4A10; --err:#9F3640;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Inter","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang=zh-CN] body{font-family:"Inter","PingFang SC","Noto Sans SC","Noto Sans JP","Hiragino Sans",sans-serif}
h1,h2,h3{font-feature-settings:"palt";letter-spacing:.02em;line-height:1.3;word-break:auto-phrase;font-weight:500}
p{word-break:auto-phrase}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;background:var(--act);color:#fff;font-weight:500;font-size:15px;letter-spacing:.06em;transition:transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn.light{background:#fff;color:var(--ink)}
.btn.line{background:transparent;color:inherit;border:1px solid currentColor}
.lbl{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;color:var(--mute)}
.lbl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--nori)}
.note{font-size:12px;color:var(--mute);line-height:1.7}
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}

/* header: transparent over the hero photo, paper once scrolled */
header{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .3s,color .3s,box-shadow .3s;color:#fff}
header.solid{background:rgba(250,249,246,.92);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:68px;gap:30px}
.logo{display:flex;align-items:center;gap:10px;font-family:Inter,sans-serif;font-weight:700;font-size:21px;letter-spacing:0}
.logo i{width:30px;height:30px;border-radius:50%;background:#F4EBDD url("/assets/iris-face.6de64afb581817a4de548e972753b77f4eaa2f100ba5920a59a0b7f6eed8e8d2.webp") center 62%/78% no-repeat;position:relative}
nav{display:flex;gap:30px;font-size:14.5px;opacity:.92}
header .btn{height:40px;padding:0 18px;font-size:13.5px;justify-self:end}
header:not(.solid) .btn{background:#fff;color:var(--ink)}

/* hero: full-bleed photograph, type over it, phone overlapping */
.hero{position:relative;z-index:2;min-height:100vh;display:flex;align-items:flex-end;color:#fff}
.hero .bg{position:absolute;inset:0;overflow:hidden}
.hero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,14,.72) 0%,rgba(20,18,14,.35) 48%,rgba(20,18,14,.05) 75%),linear-gradient(0deg,rgba(20,18,14,.55),transparent 45%)}
.hero .wrap{position:relative;width:100%;display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:40px;padding-bottom:84px;padding-top:140px}
.hero h1{font-size:clamp(40px,5.6vw,80px);font-weight:500;line-height:1.18;letter-spacing:.01em}
/* Japanese headline is longer: size it to its own column */
html[lang=ja] .hero h1{font-size:clamp(36px,4.9vw,66px)}
.hero .lead{font-size:18px;opacity:.92;margin:22px 0 34px;max-width:28em}
.hero .row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;width:fit-content;max-width:100%}
.hero .row .note{color:rgba(255,255,255,.75)}
ruby rt{font-size:.45em;letter-spacing:.1em;opacity:.8}
.hero .phone{justify-self:end;margin-bottom:-170px}

/* phone: product UI modelled on Muse and Cue — white screen, real status bar, centred agent, bubbles, rich cards, input, floating tab bar */
.phone{width:288px;height:600px;border-radius:50px;background:#0e0e0d;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.35),inset 0 0 0 1.5px #3b3a36;position:relative;flex:none}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#000;z-index:3}
.scr{position:relative;width:100%;height:100%;border-radius:41px;overflow:hidden;background:#fff;color:var(--ink);font-size:12px;line-height:1.55;letter-spacing:.01em}
.sb{display:flex;justify-content:space-between;align-items:center;height:38px;padding:12px 22px 0 32px;font:600 13px Inter,sans-serif;letter-spacing:0}
.sb::after{content:"";width:66px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='12' viewBox='0 0 66 12'%3E%3Cg fill='%23111'%3E%3Crect y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3C/g%3E%3Cpath d='M24 4.2a9 9 0 0 1 12 0M26.3 6.6a5.6 5.6 0 0 1 7.4 0M28.6 9a2.2 2.2 0 0 1 2.8 0' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='41.5' y='1.5' width='20' height='9' rx='2.6' fill='none' stroke='%23111' stroke-opacity='.4'/%3E%3Crect x='43' y='3' width='15' height='6' rx='1.6' fill='%23111'/%3E%3Crect x='62.5' y='4.5' width='1.6' height='3' rx='.8' fill='%23111' fill-opacity='.4'/%3E%3C/svg%3E") no-repeat}
.call .sb::after{filter:invert(1)}
.nv{display:grid;grid-template-columns:30px 1fr 30px;align-items:start;padding:6px 12px 2px}
.ib{width:30px;height:30px;border-radius:50%;background:#f2f2f4 center/14px no-repeat}
.ib.menu{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 4h10M2 7h10M2 10h10' stroke='%23222' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.ib.more{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='%23222'%3E%3Ccircle cx='3' cy='7' r='1.3'/%3E%3Ccircle cx='7' cy='7' r='1.3'/%3E%3Ccircle cx='11' cy='7' r='1.3'/%3E%3C/g%3E%3C/svg%3E")}
.nv .who{text-align:center;font-size:10px;font-weight:600;color:#333}
.nv .who .av{width:34px;height:34px;margin:0 auto 1px;display:block}
.av{width:26px;height:26px;border-radius:50%;background:#F4EBDD url("/assets/iris-face.6de64afb581817a4de548e972753b77f4eaa2f100ba5920a59a0b7f6eed8e8d2.webp") center 62%/78% no-repeat;box-shadow:inset 0 0 0 1px rgba(48,40,31,.12);position:relative;flex:none}
.chat{display:flex;flex-direction:column;gap:7px;padding:6px 12px}
.ts{align-self:center;font:500 9.5px Inter,sans-serif;color:#9a9aa0}
.u{align-self:flex-end;max-width:80%;background:#ECE7F1;color:#2F2838;border-radius:18px;padding:8px 12px}
.a{align-self:flex-start;max-width:92%;background:#f2f2f4;border-radius:18px;padding:8px 12px}
.a b{font-weight:700}
.card{border:1px solid #ececef;border-radius:16px;overflow:hidden;background:#fff}
.card img{display:block;width:100%;height:84px;object-fit:cover}
.card .bd{padding:8px 11px 10px}
.card h5,.dc h5{font-size:12.5px;font-weight:700;line-height:1.45}
.card .m{display:block;font-size:10px;color:#8a8a90}
.card .pr{display:flex;justify-content:space-between;font-size:11px;padding-top:4px;margin-top:4px;border-top:1px solid #f0f0f2}
.card .pr s{color:#9a9aa0}
.card .pr b{font-weight:700}
.go{display:block;margin-top:8px;background:var(--act);color:#fff;border-radius:999px;text-align:center;padding:6px 12px;font-size:11px;font-weight:600}
.inp{position:absolute;left:10px;right:10px;bottom:62px;height:34px;border-radius:17px;border:1px solid #e6e6ea;background:#fff;display:flex;align-items:center;gap:8px;padding:0 12px;color:#a0a0a6;font-size:11px}
.inp::before{content:"+";font:300 19px/1 Inter,sans-serif;color:#444}
.inp::after{content:"";margin-left:auto;width:8px;height:13px;border:1.6px solid #555;border-radius:5px}
.tab{position:absolute;left:16px;right:16px;bottom:14px;height:40px;border-radius:20px;background:rgba(242,242,245,.94);display:flex;justify-content:space-around;align-items:center}
.tab i{width:58px;height:30px;border-radius:15px;display:grid;place-items:center}
.tab i.on{background:#e1e1e6}
.tab svg{width:17px;height:17px;fill:none;stroke:#222;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ttl{font-weight:700;font-size:22px;padding:10px 16px 8px}
.dc{margin:0 12px 10px;border-radius:18px;overflow:hidden;background:#f5f5f7}
.dc img{display:block;width:100%;height:120px;object-fit:cover;object-position:80% 50%}
.dc .bd{padding:9px 12px 12px}
.dc .src{font-size:9.5px;color:#8a8a90}
.dc h5{margin:2px 0 5px}
.dc .when{display:flex;align-items:baseline;gap:8px}
.dc .when strong{font:700 19px Inter,sans-serif}
.dc .when span{font-size:10px;color:#55555b}
.dc .go{display:inline-block}
.dc .fn{display:block;font-size:9.5px;color:#9a9aa0;margin-top:6px}
.mini{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;margin:0 12px;padding:8px;border-radius:14px;background:#f5f5f7}
.mini img{width:38px;height:38px;border-radius:9px;object-fit:cover}
.mini b{display:block;font-size:11px;font-weight:700}
.mini span{font-size:9.5px;color:#8a8a90}
.hero .chat>*{opacity:0;transform:translateY(10px);animation:up .6s forwards}
.hero .chat>:nth-child(2){animation-delay:.3s}.hero .chat>:nth-child(3){animation-delay:1s}.hero .chat>:nth-child(4){animation-delay:1.6s}
@keyframes up{to{opacity:1;transform:none}}

/* statement (Today-like single sentence, magazine inline photos) */
.statement{padding:200px 0 150px;text-align:center}
.statement p{font-size:clamp(28px,3.6vw,50px);line-height:1.6;font-weight:500;max-width:1120px;margin:0 auto;letter-spacing:.02em;text-wrap:balance}
.statement .chip{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;top:-.08em;min-width:2.1em;height:1.15em;padding:0 .6em;border-radius:999px;overflow:hidden;margin:0 .12em}
.statement .chip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
.statement .chip em{position:relative;font-style:normal;font-size:max(11px,.34em);font-weight:600;letter-spacing:.04em;color:#fff;white-space:nowrap;line-height:1}
.statement .sub{display:block;font-size:16px;color:var(--mute);margin-top:30px;font-weight:400;letter-spacing:.06em}

/* feature rows: photograph + phone (LINE product rows) */
.feat{padding:70px 0 120px}
.feat .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
.feat.flip .wrap{grid-template-columns:1.15fr .85fr}
.feat.flip .txt{order:2}
.feat h2{font-size:clamp(30px,3.4vw,48px);margin:18px 0 20px}
.feat .txt p{color:var(--ink2);font-size:16.5px;line-height:1.85;max-width:26em}
.feat .txt .note{margin-top:18px}
.comp{position:relative;height:620px}
.comp .ph{position:absolute;inset:0 0 60px 0;border-radius:6px;overflow:hidden}
.comp .ph img{width:100%;height:115%;object-fit:cover;will-change:transform}
.comp .phone{position:absolute;right:7%;bottom:-20px;transform:scale(.86);transform-origin:bottom right}
.feat.flip .comp .phone{right:auto;left:7%;transform-origin:bottom left}

/* tools (four, no cards) */
.tools{padding:120px 0;background:var(--paper2)}
.tools .head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:64px}
.tools h2{font-size:clamp(30px,3.4vw,48px);margin-top:16px}
.tools .head p{color:var(--ink2);max-width:26em}
.four{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #DCD2C0}
.four div{padding:30px 26px 10px 0;border-right:1px solid #DCD2C0;margin-right:26px}
.four div:last-child{border-right:0;margin-right:0}
.four svg{width:34px;height:34px;stroke:var(--ink);fill:none;stroke-width:1.4;margin-bottom:22px}
.four h3{font-size:20px;margin-bottom:8px}
.four p{font-size:14px;color:var(--ink2)}

/* more scenes: type tabs, photo cards with the request in the user's words */
.asks{padding:110px 0 120px;overflow:hidden}
.asks .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:34px;flex-wrap:wrap}
.asks h2{font-size:clamp(30px,3.4vw,48px);margin-top:16px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{font:inherit;font-size:13.5px;border:1px solid #DCD2C0;background:transparent;color:var(--ink2);border-radius:999px;padding:7px 15px;cursor:pointer}
.tabs button.on{background:var(--act);border-color:var(--act);color:#fff}
.scn{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 32px 6px max(32px,calc((100vw - 1200px)/2 + 32px));scroll-padding-left:max(32px,calc((100vw - 1200px)/2 + 32px));scrollbar-width:none}
.scn::-webkit-scrollbar{display:none}
.sc{flex:none;width:300px;scroll-snap-align:start}
.sc[hidden]{display:none}
.sc .ph{position:relative;height:220px;border-radius:6px;overflow:hidden}
.sc .ph img{width:100%;height:100%;object-fit:cover}
.sc .tg{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600}
.sc .q{font-size:14.5px;line-height:1.65;margin-top:10px;color:var(--ink)}
.sc .q::before{content:"「"}.sc .q::after{content:"」"}
.sc .d{font-size:13px;color:var(--ok);font-weight:600;margin-top:8px}
.sc .d::before{content:"✓";display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--ok);color:#fff;font-size:9px;margin-right:6px;vertical-align:1px}

/* safety: four columns, rule on top */
.safety{padding:120px 0;border-top:1px solid var(--line)}
.safety h2{font-size:clamp(30px,3.4vw,48px);margin:16px 0 56px}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.rules>div{padding-top:0}
.rules h3{font-size:18px;margin-bottom:10px}
.rules p{font-size:14px;color:var(--ink2)}
.safety .note{margin-top:40px}

/* faq */
.faq{padding:0 0 120px}
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
.faq h2{font-size:clamp(28px,3vw,40px);margin-top:16px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:16.5px;position:relative}
summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:24px;font-weight:300}
details[open] summary::after{content:"−"}
details p{padding:0 0 22px;color:var(--ink2);font-size:15px}

/* closing: full-bleed photograph */
.close{position:relative;min-height:88vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.close .bg{position:absolute;inset:0}
.close .bg img{width:100%;height:100%;object-fit:cover}
.close .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,14,.62),rgba(20,18,14,.15) 70%)}
.close .wrap{position:relative;width:100%}
.close h2{font-size:clamp(36px,5vw,72px);line-height:1.22}
.close p{font-size:18px;opacity:.9;margin:20px 0 34px}
.close .row{display:flex;gap:14px;flex-wrap:wrap}

footer{background:var(--ink);color:#BFC5C0;font-size:13px;padding:64px 0 34px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
footer h4{color:#fff;font-size:13px;font-weight:500;margin-bottom:12px}
footer li{list-style:none;line-height:2.3}
footer .logo{color:#fff}
footer .copy{border-top:1px solid #3B4540;margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:20px}
.mbar{display:none}

@media (max-width:900px){
  .wrap{padding:0 20px}
  nav{display:none}
  header .wrap{display:flex}
  header .btn{margin-left:auto}
  .hero{min-height:auto}
  .hero .wrap{grid-template-columns:1fr;padding:120px 20px 40px}
  .hero .phone{justify-self:center;margin:30px 0 -140px;transform:scale(.9)}
  .hero h1{font-size:40px}
  .statement{padding:190px 0 90px}
  .statement p{font-size:26px}
  .feat{padding:40px 0 80px}
  .feat .wrap,.feat.flip .wrap{grid-template-columns:1fr;gap:34px}
  .feat.flip .txt{order:0}
  .comp{height:520px}
  .comp .phone{transform:scale(.72)}
  .tools{padding:80px 0}
  .tools .head{grid-template-columns:1fr;gap:16px;margin-bottom:36px}
  .four{grid-template-columns:1fr 1fr}
  .four div{border-right:0;margin-right:0;padding-right:14px;border-bottom:1px solid #DCD2C0}
  .asks{padding:90px 0 80px}
  .scn{padding-left:20px;scroll-padding-left:20px}
  .sc{width:68vw}
  .idc{max-width:none}
  .strip{padding-left:20px;scroll-padding-left:20px}
  .arrows{display:none}
  .rules{grid-template-columns:1fr;gap:26px}
  .faq .wrap{grid-template-columns:1fr;gap:20px}
  .close{min-height:70vh}
  footer .cols{grid-template-columns:1fr 1fr}
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:35}
  .mbar .btn{width:100%;justify-content:center}
  body{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hero .chat>*,.tl,.done{opacity:1!important;transform:none!important}
}

.close .eyebrow{font:500 13px Inter,sans-serif;letter-spacing:.2em;opacity:.8;margin-bottom:16px}
.close .note{color:rgba(255,255,255,.75);margin:16px 0 0;font-size:13px}
@media (min-width:901px){
}

/* activity log beside each phone: what Iris looked at or did, in order, each row checked off (after Cue's "uses them, manages them") */
.log{position:absolute;z-index:4;width:272px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-radius:18px;padding:10px 10px 4px;box-shadow:0 16px 40px rgba(0,0,0,.2);color:var(--ink);line-height:1.4}
.lh{display:flex;align-items:center;gap:8px;padding:2px 4px 8px;font-size:11.5px}
.lh .av{width:20px;height:20px}
.lh b{font-weight:600}
.lh .t{margin-left:auto;font:500 10.5px Inter,sans-serif;color:#9a9aa0}
.li{display:grid;grid-template-columns:32px 1fr 18px;gap:10px;align-items:center;padding:8px 4px;border-top:1px solid #f0efeb;opacity:0}
.li small{display:block;font-size:10px;color:#8a8a90}
.li b{display:block;font-size:12px;font-weight:600}
.ck{width:18px;height:18px;border-radius:50%;background:#dcdce0;position:relative}
.ck::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.rv.in .li,.hero .li{animation:li .5s forwards}
.rv.in .ck,.hero .ck{animation:ck .35s forwards}
.li:nth-child(2),.li:nth-child(2) .ck{animation-delay:.5s!important}
.li:nth-child(3),.li:nth-child(3) .ck{animation-delay:1.3s!important}
.li:nth-child(4),.li:nth-child(4) .ck{animation-delay:2.1s!important}
.li:nth-child(2) .ck{animation-delay:.9s!important}.li:nth-child(3) .ck{animation-delay:1.7s!important}.li:nth-child(4) .ck{animation-delay:2.5s!important}
@keyframes li{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ck{to{background:var(--ok)}}
.ic{width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center}
.ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic.mail{background:linear-gradient(#45a6f8,#1c6de6)}
.ic.tel{background:linear-gradient(#63d873,#2db14a)}
.ic.web{background:linear-gradient(#7c8696,#4b5463)}
.ic.mem{background:#efe9dd}.ic.mem svg{stroke:#6b5f4a}
.ic.cal{background:#fff;border:1px solid #e3e3e8;display:flex;flex-direction:column;justify-content:center;align-items:center;font:600 14px/1 Inter,sans-serif;color:var(--ink)}
.ic.cal em{font-style:normal;font-size:7px;font-weight:700;color:#e5483b;margin-bottom:2px}
@media (max-width:900px){
  .hero .log{display:none}
  .comp .log{transform:scale(.74);transform-origin:left top}
  .feat.flip .comp .log{left:auto!important;right:2%!important;transform-origin:right top}
}
@media (prefers-reduced-motion:reduce){.li{opacity:1!important;animation:none!important}.ck{background:var(--ok)!important;animation:none!important}}

/* identity card */
.tools .head p{margin-top:18px}
.idc{justify-self:end;width:100%;max-width:420px;background:#fff;border-radius:22px;padding:24px 26px 20px;box-shadow:0 24px 60px rgba(40,30,10,.12);position:relative;overflow:hidden;transform:rotate(-2deg)}
.idc::after{content:"";position:absolute;left:0;bottom:0;width:34%;height:5px;background:var(--nori);border-radius:0 3px 0 0}
.idc .top{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid #eee9df}
.idc .top .av{width:54px;height:54px}
.idc .top b{display:block;font:600 24px/1.1 Inter,sans-serif}
.idc .top span{font-size:12.5px;color:var(--mute)}
.idc dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin-top:16px;font-size:14px}
.idc dt{color:var(--mute)}
.idc dd{font-family:Inter,"Noto Sans JP","Noto Sans SC",sans-serif;font-weight:500}
.sc .who{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:var(--mute)}
.sc .who img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.sc .who b{color:var(--ink);font-weight:600;font-size:13px}
.asks .sub,.safety .sub{color:var(--ink2);font-size:16.5px;line-height:1.85;max-width:34em;margin-top:16px}
.safety h2{margin-bottom:0}
.safety .rules{margin-top:48px}
.tools .head p{line-height:1.85;max-width:30em}
/* connected apps around Iris (after Cue's connector frame); the apps this suggestion came from are lit */
.cnx{position:relative;width:360px;height:250px;margin-top:30px}
.cnx .ln{position:absolute;inset:0;width:100%;height:100%}
.cnx line{stroke:#d9d2c4;stroke-width:1;stroke-dasharray:3 4}
.cnx line.on{stroke:var(--ok);stroke-width:1.6;stroke-dasharray:none}
.cnx .hub{position:absolute;width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,255,255,.55),0 10px 26px rgba(0,0,0,.12)}
.cnx .hub .av{width:38px;height:38px}
.cnx .nd{position:absolute;width:40px;display:flex;flex-direction:column;align-items:center}
.cnx .nd .ic{width:40px;height:40px;border-radius:11px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.cnx .nd:not(.on) .ic{opacity:.55}
.cnx .nd small{margin-top:5px;font-size:10px;color:var(--mute);white-space:nowrap}
.cnx .nd b{margin-top:6px;font-size:10.5px;font-weight:600;white-space:nowrap;background:var(--ink);color:#fff;border-radius:999px;padding:2px 8px}
.rv.in .cnx .nd.on .ic,.cnx.rv.in .nd.on .ic{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 6px rgba(39,100,71,.18),0 4px 12px rgba(0,0,0,.1)}}
.ic.line{background:linear-gradient(#4ccf6a,#21a84a)}
.ic.map{background:linear-gradient(#ff8a65,#e8553d)}
.ic.fav{background:linear-gradient(#ffcf5a,#f0a81c)}
.ic.train{background:linear-gradient(#6fb6ff,#2f7de1)}
.ic.health{background:#fff;border:1px solid #e3e3e8}.ic.health svg{stroke:#ef4f6a}
.ic.shop{background:linear-gradient(#b48cff,#7b55e0)}
.ic.pay{background:linear-gradient(#3a3a40,#111)}
@media (max-width:900px){.cnx{transform:scale(.9);transform-origin:left top;margin-bottom:-20px}}
/* a delegated task finishing on the phone: messages appear in turn once the row is in view */
.chat.seq>*{opacity:0}
.rv.in .chat.seq>*{animation:up .55s forwards}
.rv.in .chat.seq>:nth-child(2){animation-delay:.2s}.rv.in .chat.seq>:nth-child(3){animation-delay:.9s}.rv.in .chat.seq>:nth-child(4){animation-delay:1.3s}.rv.in .chat.seq>:nth-child(5){animation-delay:1.8s}
@media (prefers-reduced-motion:reduce){.chat.seq>*{opacity:1!important;animation:none!important}}
/* discovery feed (X / Muse style): every card says why Iris is showing it */
.ttl .tabs2{display:flex;gap:16px;font-size:12px;font-weight:600;margin-top:8px;border-bottom:1px solid #efeff2}
.ttl .tabs2 b{padding-bottom:7px;border-bottom:2px solid var(--ink)}
.ttl .tabs2 span{color:#9a9aa0;padding-bottom:7px}
.feedx{padding:0 12px}
.post{padding:10px 2px 12px;border-bottom:1px solid #efeff2}
.post .ph-row{display:flex;align-items:center;gap:6px;font-size:11.5px}
.post .ph-row .av{width:22px;height:22px}
.post .ph-row b{font-weight:700}
.post .when{color:#9a9aa0}
.post .dots{margin-left:auto;color:#9a9aa0;letter-spacing:1px}
.post .why{margin:0;font-size:10px;line-height:1.45;color:#5B4B32;background:var(--paper2);border-radius:8px;padding:4px 8px}
.post .why::before{content:"💡 "}
.post .tx{margin:6px 0 0;font-size:12.5px;line-height:1.5}
.post .tx b{font-weight:700}
.post img{display:block;margin:7px 0 0;width:100%;height:84px;object-fit:cover;border-radius:12px}
.post .meta{margin:5px 0 0;font-size:10px;color:#8a8a90}
.post .acts{display:flex;gap:12px;align-items:center;margin:8px 0 0;font-size:10.5px;color:#55555b}
.post .acts .go{margin:0;padding:4px 11px;font-size:10.5px}
/* safety: one small product component per rule */
.viz{height:214px;border-radius:18px;background:var(--paper2);display:grid;place-items:center;margin-bottom:22px;padding:14px;overflow:hidden}
.viz>div{width:100%;max-width:236px;background:#fff;border-radius:14px;box-shadow:0 10px 26px rgba(40,30,10,.1);padding:11px 12px;font-size:11px;color:var(--ink)}
.appr .tag{display:inline-block;font-size:9.5px;font-weight:600;color:var(--warn);background:#F6EADB;border-radius:999px;padding:2px 8px}
.appr>b{display:block;font-size:12px;margin:6px 0 4px}
.appr .r{display:flex;justify-content:space-between;padding:3px 0;border-top:1px solid #f0efeb;font-size:10.5px}
.appr .r.warn b{color:var(--warn)}
.appr .bt{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.appr .bt span{text-align:center;border-radius:999px;padding:5px;background:#f2f2f4;font-weight:600}
.appr .bt .ok{background:var(--act);color:#fff}
.steps>div{display:flex;align-items:center;gap:8px;padding:4px 0;position:relative}
.steps i{width:14px;height:14px;border-radius:50%;background:var(--ok);flex:none;position:relative}
.steps i::after{content:"";position:absolute;left:4.5px;top:2.5px;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.steps span{font-weight:600}.steps em{margin-left:auto;font:500 10px Inter,sans-serif;color:#9a9aa0;font-style:normal}
.steps .tc{margin-top:6px;padding:6px 8px;border-radius:8px;background:#E7F0EA;color:var(--ok);font-size:10px;font-weight:600}
.login .bar{display:flex;gap:6px;align-items:center;font-size:10px;color:#55555b;background:#f2f2f4;border-radius:8px;padding:4px 8px;margin-bottom:6px}
.login .fld{border:1px solid #e6e6ea;border-radius:8px;padding:4px 8px;margin-top:5px;font-size:9.5px;color:#8a8a90}
.login .fld b{display:block;font-size:11px;color:var(--ink);letter-spacing:.04em}
.login .nt{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:10px;font-weight:600}
.login .nt .av{width:16px;height:16px}
.sw>div{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f0efeb}
.sw i{width:28px;height:16px;border-radius:999px;background:#d8d8dc;position:relative;flex:none}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw i.on{background:var(--ok)}.sw i.on::after{left:14px}
.sw .del{border:0;color:var(--err);font-weight:600;padding-top:7px}
.scn{scroll-snap-type:none}
/* hero subline: one of three "you are busy, Iris is on it" lines, swapped every 3 s */
.rot{display:grid;margin-top:10px;min-height:1.7em}
.rot>span{grid-area:1/1;display:flex;align-items:center;gap:10px;font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.rot>span.on{opacity:1;transform:none}
.rot i{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.rot svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.rot>span{transition:none}}
/* mascot renders (brand guide master and poses): light backgrounds blend away with multiply */
.mascot{display:block;mix-blend-mode:multiply;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent);mask-image:radial-gradient(closest-side,#000 80%,transparent)}
.feat .txt .mascot{width:132px;margin-top:30px}
@media (max-width:900px){.feat .txt .mascot{width:96px;margin-top:18px}.tools .mascot{display:none}}
/* hero activity panel sits in the gap between the headline and the phone, covering neither */
.hero .hlog{left:auto;right:calc(100% + 14px);top:250px;width:236px}
@media (max-width:1180px){.hero .hlog{display:none}}
/* identity: the waving master sits beside the card in the layout */
.idrow{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px}
.idrow .mascot{width:150px;flex:none;margin-bottom:-10px}
.idrow .idc{flex:1 1 auto;min-width:0}
/* proactive: comparing two prepared options, beside the connected apps */
.cnxrow{display:flex;align-items:flex-end;gap:4px}
.cnxrow .mascot{width:118px;flex:none;margin-bottom:6px}
/* scenes: travel outfit above the type tabs; safety: asks before acting */
.asks .head{position:relative}
.scn-m{position:absolute;right:20px;top:-46px;width:118px}
.shead{position:relative;padding-right:170px}
.shead .mascot{position:absolute;right:0;bottom:-26px;width:140px}
@media (max-width:1100px){.idrow .mascot{width:120px}}
@media (max-width:900px){.idrow .mascot,.cnxrow .mascot,.scn-m,.shead .mascot{display:none}.shead{padding-right:0}}

/* legal pages (/privacy, /terms): one reading column after Today and Manus — title, summary card, numbered sections */
footer a:hover,a.ul{text-decoration:underline;text-underline-offset:3px}
.legal{padding:132px 0 96px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(32px,4vw,48px);margin-bottom:28px}
.legal .meta{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 26px;font-size:14px;line-height:2.1;color:var(--ink2);margin-bottom:40px}
.legal .meta a,.legal article a{text-decoration:underline;text-underline-offset:3px}
.legal h2{font-size:21px;margin:52px 0 14px;scroll-margin-top:96px}
.legal h3{font-size:16px;font-weight:600;margin:26px 0 8px}
.legal article p,.legal article li{font-size:15px;line-height:2;color:var(--ink2)}
.legal article p{margin:10px 0}
.legal article ul,.legal article ol{padding-left:1.6em;margin:10px 0}
.legal article strong{color:var(--ink);font-weight:600}

/* pre-launch: the closing call is a label, not a link */
.btn.soon{cursor:default}
.btn.soon:hover{transform:none}

/* language switcher beside the header button; English request quotes */
header .hr{justify-self:end;display:flex;align-items:center;gap:18px}
.lng{display:flex;gap:12px;font-size:12.5px;letter-spacing:.04em}
.lng a{opacity:.8}
.lng a[aria-current]{opacity:1;font-weight:600}
html[lang=en] .sc .q::before{content:"\201C"}
html[lang=en] .sc .q::after{content:"\201D"}
html[lang=en] body{letter-spacing:0}
@media (max-width:900px){header .hr{margin-left:auto;gap:12px}.lng{font-size:12px;gap:9px}}
header .hr,.lng,header .btn{white-space:nowrap}
/* the language switcher needs the room: below 1100px the section nav folds away, as on phones */
@media (max-width:1100px){nav{display:none}header .wrap{display:flex}header .hr{margin-left:auto}}