/* ============ C12 NATIVE PROTOTYPE ============ */
:root{
  --teal:#003B49; --teal2:#36606B; --teal3:#00404F; --gold:#E1B680; --sand:#FDD79A;
  --ink:#0B0F11; --paper:#F6F3EE; --text:#101418; --muted:#7E888F;
  --ios:-apple-system,"SF Pro Text","SF Pro Display","Helvetica Neue",Inter,sans-serif;
  --ui:'DM Sans',system-ui,sans-serif;
  --W:393px; --H:852px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--ui);background:
  radial-gradient(1100px 600px at 18% -8%, rgba(225,182,128,.10), transparent 62%),
  radial-gradient(900px 500px at 88% 105%, rgba(54,96,107,.22), transparent 60%),
  var(--ink);
  color:#E8EDEF;display:flex;min-height:100vh;overflow:hidden}

/* ---------- layout ---------- */
.rail{width:280px;flex:0 0 280px;border-right:1px solid rgba(255,255,255,.07);
  padding:22px 0 16px;display:flex;flex-direction:column;background:rgba(0,0,0,.24);backdrop-filter:blur(10px)}
.rail h1{font-size:15px;font-weight:700;letter-spacing:-.01em;padding:0 20px;color:#fff}
.rail .sub{font-size:11px;color:rgba(232,237,239,.42);padding:2px 20px 16px;letter-spacing:.2px}
.rail .sub a{color:var(--gold);text-decoration:none;border-bottom:1px dotted rgba(225,182,128,.4)}
.scenes{flex:1;overflow-y:auto;padding:0 12px}
.scenes::-webkit-scrollbar{width:5px}
.scenes::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.chap{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);
  font-weight:700;padding:16px 8px 7px;opacity:.75}
.sc{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:9px;cursor:pointer;
  border:1px solid transparent;transition:background .14s,border-color .14s}
.sc:hover{background:rgba(255,255,255,.05)}
.sc.on{background:rgba(225,182,128,.13);border-color:rgba(225,182,128,.32)}
.sc .n{font-size:9.5px;font-weight:700;color:rgba(232,237,239,.34);min-width:22px;padding-top:2px;font-variant-numeric:tabular-nums}
.sc.on .n{color:var(--gold)}
.sc .t{display:block;font-size:12.5px;font-weight:500;line-height:1.35;color:rgba(232,237,239,.78)}
.sc.on .t{color:#fff;font-weight:600}
.sc .d{display:block;font-size:10.5px;color:rgba(232,237,239,.35);margin-top:2px;line-height:1.3}
.rail-foot{padding:14px 20px 0;border-top:1px solid rgba(255,255,255,.07);margin-top:10px;
  font-size:10.5px;color:rgba(232,237,239,.34);line-height:1.7}
.rail-foot kbd{background:rgba(255,255,255,.1);border-radius:4px;padding:1px 5px;font-family:var(--ui);font-size:10px}

.stage{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:60px;position:relative;padding:40px 56px 104px;min-width:0}
.caption{flex:0 1 400px;max-width:400px;text-align:left}
.caption .k{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);font-weight:700}
.caption .h{font-size:34px;font-weight:700;letter-spacing:-.028em;color:#fff;margin-top:12px;line-height:1.14}
.caption .p{font-size:15px;color:rgba(232,237,239,.55);margin-top:16px;line-height:1.7}
.hintbar{margin-top:26px}
.hintbar span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#0C1A1F;
  background:var(--gold);padding:9px 17px;border-radius:22px;font-weight:600;
  box-shadow:0 8px 26px rgba(225,182,128,.22);opacity:0;transform:translateY(6px);
  transition:opacity .3s,transform .3s}
.hintbar span::before{content:"\261D";font-size:13px}
.hintbar span.show{opacity:1;transform:none}
.ctrl{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:26px;padding:7px 10px;
  backdrop-filter:blur(12px)}
.ctrl button{background:none;border:none;color:rgba(232,237,239,.75);font-family:var(--ui);font-size:12.5px;
  font-weight:600;padding:7px 14px;border-radius:18px;cursor:pointer;transition:background .14s,color .14s}
.ctrl button:hover{background:rgba(255,255,255,.09);color:#fff}
.ctrl button.pri{background:var(--gold);color:#0C1A1F}
.ctrl .pos{font-size:11.5px;color:rgba(232,237,239,.4);padding:0 8px;font-variant-numeric:tabular-nums;min-width:52px;text-align:center}

/* ---------- device ---------- */
.device{position:relative;width:var(--W);height:var(--H);flex:0 0 auto;
  transform:scale(var(--scale,1));transform-origin:center}
.bezel{position:absolute;inset:-12px;border-radius:66px;
  background:linear-gradient(145deg,#6E6A63 0%,#3A3833 16%,#22211E 40%,#39372F 62%,#7A756C 84%,#2C2B27 100%);
  box-shadow:0 44px 90px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.07), inset 0 0 2px rgba(255,255,255,.22)}
.bezel::after{content:"";position:absolute;inset:3px;border-radius:63px;background:#08090A}
.btn-s{position:absolute;background:linear-gradient(180deg,#5C5850,#302E2A);border-radius:2px}
.btn-s.vu{left:-15px;top:150px;width:4px;height:58px}
.btn-s.vd{left:-15px;top:220px;width:4px;height:58px}
.btn-s.act{left:-15px;top:96px;width:4px;height:34px}
.btn-s.pw{right:-15px;top:180px;width:4px;height:92px}
.screen{position:absolute;inset:0;border-radius:54px;overflow:hidden;background:#000;isolation:isolate}
.scene{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .34s ease}
.scene.on{opacity:1;pointer-events:auto}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:125px;height:37px;
  background:#000;border-radius:19px;z-index:60;transition:width .38s cubic-bezier(.3,1.2,.4,1),
  height .38s cubic-bezier(.3,1.2,.4,1),border-radius .38s;overflow:hidden}
.island.wide{width:353px;height:37px;border-radius:19px}
.island.big{width:363px;height:132px;border-radius:32px}
.island-in{position:absolute;inset:0;padding:0 13px;display:flex;align-items:center;
  justify-content:space-between;opacity:0;transition:opacity .2s}
.island.wide .island-in.compact{opacity:1}
.island-exp{position:absolute;inset:0;padding:15px 18px;opacity:0;transition:opacity .22s .1s}
.island.big .island-exp{opacity:1}
.island.big .island-in.compact{opacity:0;transition:opacity .1s}
.hind{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;
  border-radius:3px;background:rgba(255,255,255,.55);z-index:55;pointer-events:none}
.hind.dark{background:rgba(0,0,0,.34)}

/* ---------- ios surfaces ---------- */
.ios{font-family:var(--ios);-webkit-font-smoothing:antialiased;height:100%}
.statusbar{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;
  justify-content:space-between;padding:16px 30px 0;font-size:14px;font-weight:600;z-index:50;pointer-events:none}
.statusbar.light{color:#fff}.statusbar.dark{color:#101418}
.statusbar .r{display:flex;gap:5px;align-items:center;font-size:11px}

/* lock screen */
.lock{height:100%;display:flex;flex-direction:column;padding:0 14px 30px;position:relative}
.lock-wall{position:absolute;inset:0;background:
  radial-gradient(620px 420px at 72% 10%, rgba(126,158,168,.40), transparent 62%),
  radial-gradient(400px 320px at 18% 72%, rgba(225,182,128,.14), transparent 60%),
  linear-gradient(168deg,#31434B 0%,#1A2830 48%,#0A1216 100%)}
.lock-body{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding-top:70px}
.lock-date{text-align:center;color:rgba(255,255,255,.88);font-size:15px;font-weight:500;letter-spacing:.1px}
.lock-clock{text-align:center;color:#fff;font-size:80px;font-weight:600;letter-spacing:-.035em;line-height:1;margin-top:3px}
.lock-space{flex:1}
.lock-btns{display:flex;justify-content:space-between;padding:0 30px;margin-top:16px}
.lock-btns i{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.17);
  backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;font-size:19px;
  color:#fff;font-style:normal}

/* live activity */
.la{border-radius:24px;padding:15px 17px;background:rgba(255,255,255,.96);color:var(--text);
  box-shadow:0 10px 36px rgba(0,0,0,.34);cursor:pointer;transition:transform .16s}
.la:active{transform:scale(.978)}
.la-top{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.mark{width:21px;height:21px;border-radius:6px;background:var(--teal);color:var(--gold);
  font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
  letter-spacing:-.5px;flex:0 0 auto}
.la-app{font-size:12.5px;font-weight:600;color:#6A7681}
.la-chip{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;background:rgba(0,59,73,.10);color:var(--teal)}
.la-chip.live::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#E1584D;margin-right:5px;vertical-align:1px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
.la-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.la-title{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.22}
.la-sub{font-size:13px;color:#68747E;margin-top:3px}
.la-time{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.025em;
  color:var(--teal);white-space:nowrap;line-height:1}
.la-time .u{font-size:12px;font-weight:600;color:#8A949C;display:block;text-align:right;margin-top:3px;letter-spacing:.2px}
.bar{height:6px;border-radius:3px;background:rgba(0,59,73,.13);margin-top:13px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--teal2),var(--gold));
  transition:width .9s cubic-bezier(.4,0,.2,1)}
.la-foot{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12px;color:#7C8790}
.av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--teal2),var(--teal));
  color:var(--sand);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;border:1.5px solid rgba(255,255,255,.9)}
.av.lg{width:38px;height:38px;font-size:13px}
.av.sm{width:19px;height:19px;font-size:8px}

/* island contents */
.isl-l{font-size:11.5px;font-weight:800;color:var(--gold);letter-spacing:-.3px}
.isl-r{font-size:13.5px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.isl-head{display:flex;align-items:center;gap:11px}
.isl-head .nm{font-size:15px;font-weight:600;color:#fff;line-height:1.2}
.isl-head .ro{font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}
.isl-head .cd{margin-left:auto;text-align:right}
.isl-head .cd b{display:block;font-size:22px;font-weight:600;color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.isl-head .cd i{font-size:9.5px;font-style:normal;color:rgba(255,255,255,.4);letter-spacing:.9px;text-transform:uppercase}
.isl-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin-top:14px;overflow:hidden}
.isl-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal2),var(--gold))}
.isl-foot{display:flex;justify-content:space-between;margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.45)}

/* ---------- home screen + widgets ---------- */
.home{height:100%;background:
  radial-gradient(500px 340px at 22% 4%, rgba(225,182,128,.20), transparent 62%),
  linear-gradient(162deg,#2A3A42 0%,#18262E 55%,#0E181C 100%);
  padding:64px 22px 0;display:flex;flex-direction:column}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.w{border-radius:22px;background:#fff;color:var(--text);padding:15px 16px;min-height:158px;
  display:flex;flex-direction:column;box-shadow:0 8px 26px rgba(0,0,0,.30)}
.w.teal{background:linear-gradient(160deg,#00404F,#002C37);color:#fff}
.w.wide{grid-column:span 2;min-height:auto}
.w-head{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:#8B959D}
.w.teal .w-head{color:var(--gold)}
.w-mark{width:17px;height:17px;border-radius:5px;background:var(--teal);color:var(--gold);font-size:8px;
  font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:-.3px}
.w.teal .w-mark{background:var(--gold);color:var(--teal)}
.w-big{font-size:50px;font-weight:600;letter-spacing:-.04em;line-height:1;margin-top:auto}
.w-big small{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-left:4px;opacity:.55}
.w-when{font-size:12.5px;font-weight:500;margin-top:6px;opacity:.75;line-height:1.35;white-space:nowrap}
.w-chap{font-size:11px;margin-top:3px;opacity:.5;line-height:1.35}
.todo{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.5px;cursor:pointer;line-height:1.3}
.todo .bx{width:19px;height:19px;border-radius:50%;border:1.9px solid #C6CFD4;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;transition:all .22s}
.todo.done .bx{background:var(--teal2);border-color:var(--teal2);color:#fff}
.todo.done span{text-decoration:line-through;color:#A2ACB3}
.todo span{transition:color .22s}
.agenda{display:flex;gap:10px;padding:7px 0;align-items:flex-start}
.agenda .tm{font-size:11px;font-weight:600;color:#8B959D;min-width:52px;padding-top:2px;font-variant-numeric:tabular-nums}
.agenda .rail2{width:3px;border-radius:2px;background:#DDE3E6;align-self:stretch;min-height:22px}
.agenda.now .rail2{background:var(--gold)}
.agenda.now .tm{color:var(--teal)}
.agenda .ttl{font-size:13px;font-weight:500;line-height:1.35}
.agenda.now .ttl{font-weight:700}
.agenda .who{font-size:11px;color:#8B959D;margin-top:1px}
.dock{margin-top:auto;margin-bottom:26px;background:rgba(255,255,255,.17);backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);border-radius:28px;padding:11px 12px;
  display:flex;justify-content:space-around;border:.5px solid rgba(255,255,255,.14)}

/* Home-screen app tiles. iOS rounds its icons at 22.37% of the side, which is why
   a 12px radius on a 52px tile looks subtly wrong — it reads as a rounded square
   rather than a squircle. */
.dock i,.appsrow i{position:relative;display:flex;align-items:center;justify-content:center;
  font-style:normal;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.22)}
.dock i{width:52px;height:52px;border-radius:11.6px;flex:0 0 auto}
.dock i svg,.appsrow i svg{width:66%;height:66%;display:block}
.dock i::after,.appsrow i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 52%);pointer-events:none}
.dock i.c12,.appsrow i.c12{background:linear-gradient(160deg,#E6C08E,#B4884E);color:var(--teal);
  font-weight:800;font-size:15px;letter-spacing:-.5px}
.dock i.phone,.appsrow i.phone{background:linear-gradient(180deg,#6EE787,#23B14A)}
.dock i.msg,.appsrow i.msg{background:linear-gradient(180deg,#6BE86F,#1FB829)}
.dock i.mail,.appsrow i.mail{background:linear-gradient(180deg,#4AB4FF,#0A7BE8)}
.dock i.music,.appsrow i.music{background:linear-gradient(180deg,#FC5C6E,#F62C55)}
.dock i.safari,.appsrow i.safari{background:linear-gradient(180deg,#3EC8FB,#0B70E8)}
.dock i.photos,.appsrow i.photos{background:linear-gradient(180deg,#FFFFFF,#F0F0F2)}
.dock i.cal,.appsrow i.cal{background:linear-gradient(180deg,#FFFFFF,#F2F2F4)}
.dock i.photos svg,.appsrow i.photos svg,.dock i.cal svg,.appsrow i.cal svg{width:78%;height:78%}
.appsrow i.cal svg{width:88%;height:88%}

/* ---------- app ---------- */
.app{height:100%;background:var(--paper);color:var(--text);display:flex;flex-direction:column;position:relative}
.nav{padding:60px 22px 14px;background:linear-gradient(180deg,#00465A,#003B49);color:#fff;flex:0 0 auto}
.nav .eyebrow{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:700}
.nav h3{font-size:27px;font-weight:700;letter-spacing:-.025em;margin-top:4px}
.body{flex:1;overflow-y:auto;padding:16px 18px 104px;-webkit-overflow-scrolling:touch}
.body::-webkit-scrollbar{display:none}
.card{background:#fff;border-radius:16px;padding:14px 16px;margin-bottom:11px;
  box-shadow:0 1px 3px rgba(16,20,24,.09)}
.card .ct{font-size:15px;font-weight:600;line-height:1.32}
.card .cs{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.card .cx{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--teal2);font-weight:600}
.pillchip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:12px;background:rgba(0,59,73,.08);color:var(--teal2)}
.pillchip.due{background:rgba(225,88,77,.11);color:#B8443A}
.stat{display:flex;gap:11px;margin-bottom:11px}
.stat .s{flex:1;background:#fff;border-radius:16px;padding:13px 14px;box-shadow:0 1px 3px rgba(16,20,24,.09)}
.stat .s .k{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:#98A2A8;font-weight:700}
.stat .s .v{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.stat .s .t{font-size:11px;color:#5EA07A;margin-top:2px;font-weight:600}
.sechead{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#98A2A8;font-weight:700;
  margin:16px 2px 9px}

/* liquid glass tab bar */
.tabbar{position:absolute;left:14px;right:14px;bottom:26px;height:64px;border-radius:32px;display:flex;
  align-items:center;justify-content:space-around;padding:0 4px;z-index:40;
  background:rgba(0,48,60,.80);backdrop-filter:blur(34px) saturate(200%);-webkit-backdrop-filter:blur(34px) saturate(200%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 16px 40px rgba(0,22,29,.38), inset 0 1px 0 rgba(255,255,255,.30)}
.tb{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:9.5px;font-weight:500;letter-spacing:.05px;color:rgba(255,255,255,.58);
  padding:6px 4px;flex:1;min-width:0;cursor:pointer;transition:color .22s,transform .16s}
.tb .ic{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:1.65;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .22s}
.tb .ic circle{fill:currentColor;stroke:none}
.tb.on{color:var(--gold);font-weight:600}
.tb.on .ic{stroke-width:2.15}
.tb:active{transform:scale(.93)}
.tb .badge{position:absolute;top:1px;right:calc(50% - 20px);min-width:16px;height:16px;border-radius:9px;
  background:#E1584D;color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center;padding:0 4px;border:1.5px solid rgba(0,44,55,.9)}

/* the shipped app's standard bar, recreated */
.legacy-bar{position:absolute;left:0;right:0;bottom:0;height:83px;border-radius:0;padding:6px 0 22px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:none;border-top:.5px solid rgba(0,0,0,.14);box-shadow:none;align-items:flex-start}
.legacy-bar .tb{color:#8E9196;font-size:10px;gap:3px;padding-top:5px}
.legacy-bar .tb .ic{width:26px;height:26px;stroke-width:1.55}
.legacy-bar .tb.on{color:#2C5F6F;font-weight:500}
.legacy-bar .tb.on .ic{stroke-width:2}

/* ---------- the shipped app, recreated ---------- */
.legacy{height:100%;background:#F4F6F7;color:#1C2427;display:flex;flex-direction:column}
.legacy-nav{padding:52px 16px 12px;background:#2C5F6F;text-align:center;flex:0 0 auto}
.legacy-nav .lt{font-size:17px;font-weight:500;color:#fff;letter-spacing:-.01em}
.legacy-body{flex:1;overflow:hidden;padding:16px 15px 96px}
.lcard{background:#fff;border:1px solid #E4E9EB;border-radius:5px;padding:15px 16px;margin-bottom:16px}
.lcard.tight{padding:13px 16px}
.lrow{display:flex;gap:10px;font-size:14.5px;line-height:1.5;padding:3px 0}
.lrow .lk{font-weight:700;color:#1C2427;min-width:86px;flex:0 0 auto}
.lrow .lv{color:#31393D;flex:1}
.lrow .lv.link{color:#2C5F6F;font-weight:600}
.lline{font-size:14.5px;color:#31393D;padding:3px 0}
.lsep{height:1px;background:#E4E9EB;margin:12px 0}
.lbtn{display:inline-block;font-size:13.5px;color:#2C5F6F;border:1px solid #9FBDC6;border-radius:4px;
  padding:7px 13px;font-weight:500}
.lseg{display:flex;gap:18px;border-bottom:1px solid #DFE5E8;margin-bottom:14px;padding:0 2px}
.lseg span{font-size:14px;color:#8E9196;padding-bottom:9px;white-space:nowrap}
.lseg span.on{color:#2C5F6F;font-weight:700;box-shadow:inset 0 -3px 0 #2C5F6F}
.lhead{font-size:16px;font-weight:700;color:#2C5F6F;margin-bottom:10px}
.llink{font-size:15px;font-weight:700;color:#2C5F6F;line-height:1.6}

/* ---------- ai card ---------- */
.msg{display:flex;gap:10px;margin-bottom:12px}
.bub{background:#fff;border-radius:16px;padding:11px 14px;font-size:13.5px;line-height:1.45;
  box-shadow:0 1px 3px rgba(16,20,24,.08);flex:1}
.bub b{display:block;font-size:11.5px;color:var(--teal2);margin-bottom:3px;font-weight:700}
.aicard{border-radius:18px;padding:16px;margin:14px 0;color:#fff;box-shadow:0 10px 28px rgba(0,40,50,.30);
  background:linear-gradient(145deg,#00485A 0%,#003B49 52%,#0B535C 100%);position:relative;overflow:hidden}
.aicard::before{content:"";position:absolute;top:-40%;left:-20%;width:70%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);transform:skewX(-18deg)}
.ai-head{display:flex;align-items:center;gap:9px;margin-bottom:11px;position:relative}
.ai-head .sp{font-size:15px;color:var(--gold)}
.ai-head .lb{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.ai-head .ct2{margin-left:auto;font-size:11px;color:rgba(255,255,255,.5)}
.aicard ul{list-style:none;font-size:13.5px;line-height:1.55;position:relative}
.aicard li{padding-left:17px;position:relative;margin-bottom:9px;color:rgba(255,255,255,.92);
  opacity:0;transform:translateY(5px);transition:opacity .4s,transform .4s}
.aicard.revealed li{opacity:1;transform:none}
.aicard.revealed li:nth-child(1){transition-delay:.05s}
.aicard.revealed li:nth-child(2){transition-delay:.2s}
.aicard.revealed li:nth-child(3){transition-delay:.35s}
.aicard.revealed li:nth-child(4){transition-delay:.5s}
.aicard li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.aicard li b{color:#fff}
.ai-priv{display:flex;align-items:center;gap:7px;margin-top:13px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.15);font-size:11px;color:var(--sand);position:relative}
.ai-acts{display:flex;gap:8px;margin-top:12px;position:relative}
.ai-acts b{font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:19px;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:transform .14s}
.ai-acts b.primary{background:var(--gold);color:#0C1A1F}
.ai-acts b:active{transform:scale(.95)}
.thinking{display:flex;gap:5px;align-items:center;font-size:12.5px;color:rgba(255,255,255,.65);position:relative}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:bob 1.1s infinite}
.thinking i:nth-child(2){animation-delay:.16s}.thinking i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* composer sheet */
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;
  padding:18px 18px 34px;box-shadow:0 -12px 40px rgba(0,0,0,.24);z-index:45;
  transform:translateY(102%);transition:transform .42s cubic-bezier(.3,1,.35,1)}
.sheet.up{transform:none}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:#D6DCE0;margin:0 auto 14px}
.sheet h6{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:#98A2A8;font-weight:700;margin-bottom:10px}
.sheet .draft{background:var(--paper);border-radius:13px;padding:13px;font-size:13.5px;line-height:1.5;color:var(--text)}
.sheet .draft .cur{display:inline-block;width:2px;height:15px;background:var(--teal);
  vertical-align:-3px;animation:blink .9s step-end infinite}
@keyframes blink{50%{opacity:0}}
.sheet .row{display:flex;gap:9px;margin-top:13px;align-items:center}
.sheet .row .note2{font-size:11px;color:var(--muted);flex:1;line-height:1.4}
.sheet .row .send{background:var(--teal);color:var(--sand);font-size:13.5px;font-weight:600;
  padding:10px 20px;border-radius:21px;cursor:pointer}

/* ---------- notifications ---------- */
.notif{border-radius:22px;padding:14px 16px;background:rgba(255,255,255,.95);color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,.30);margin-bottom:12px;overflow:hidden;
  transition:opacity .35s,transform .35s,max-height .45s;max-height:280px}
.notif.gone{opacity:0;transform:translateY(-10px) scale(.96);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}
.notif-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.notif-top .nm{font-size:12px;font-weight:600;color:#78838B}
.notif-top .tm{margin-left:auto;font-size:12px;color:#9AA4AB}
.notif .nt{font-size:15px;font-weight:600;line-height:1.3}
.notif .nb{font-size:13.5px;color:#5A656D;margin-top:4px;line-height:1.42}
.nacts{display:flex;gap:7px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(16,20,24,.08)}
.nacts b{flex:1;text-align:center;font-size:12.5px;font-weight:600;padding:9px 4px;border-radius:11px;
  background:rgba(0,59,73,.07);color:var(--teal);cursor:pointer;transition:transform .14s}
.nacts b.primary{background:var(--teal);color:var(--sand)}
.nacts b:active{transform:scale(.95)}
.confirm{text-align:center;font-size:13.5px;font-weight:600;color:var(--teal);padding:8px 0 2px;
  opacity:0;transition:opacity .3s}
.confirm.show{opacity:1}

/* ---------- face id gate ---------- */
.gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;text-align:center;padding:34px;z-index:42;color:#fff;
  background:linear-gradient(180deg,rgba(0,34,43,.40) 0%,rgba(0,30,38,.74) 100%);
  backdrop-filter:blur(2px);transition:opacity .5s}
.gate.gone{opacity:0;pointer-events:none}
.gate-ic{width:62px;height:62px;border-radius:17px;border:2.4px solid var(--gold);display:flex;
  align-items:center;justify-content:center;font-size:28px;color:var(--gold);transition:transform .4s,border-color .4s}
.gate-ic.ok{border-color:#67C98C;color:#67C98C;transform:scale(1.08)}
.gate h4{font-size:20px;font-weight:600}
.gate p{font-size:13.5px;color:rgba(255,255,255,.74);max-width:28ch;line-height:1.5}
.gate .go{margin-top:6px;font-size:13.5px;font-weight:600;padding:11px 24px;border-radius:23px;
  background:var(--gold);color:#0C1A1F;cursor:pointer}
.blurred{filter:blur(7px);transition:filter .55s}
.blurred.clear{filter:none}

/* ---------- scan ---------- */
.cam{position:absolute;inset:0;background:#0A0E10;display:flex;flex-direction:column;
  justify-content:center;padding:60px 0 40px}
.doc{flex:0 0 auto;margin:18px;border-radius:12px;background:linear-gradient(170deg,#F4F1EC,#E2DDD3);
  padding:18px 17px;box-shadow:0 0 0 2.5px var(--gold),0 0 34px rgba(225,182,128,.32);position:relative}
.doc .dh{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#8C8579;margin-bottom:12px}
.dline{display:flex;justify-content:space-between;font-size:12.5px;color:#4E5A5F;padding:5px 6px;
  border-radius:5px;margin:1px -6px;transition:background .3s,box-shadow .3s}
.dline b{font-weight:600;font-variant-numeric:tabular-nums}
.dline.hit{background:rgba(225,182,128,.5);box-shadow:0 0 0 1.6px var(--gold)}
.cam-hud{text-align:center;color:rgba(255,255,255,.72);font-size:12.5px;padding:8px 24px;line-height:1.5}
.shutter{width:64px;height:64px;border-radius:50%;border:4px solid rgba(255,255,255,.92);margin:14px auto 0;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .14s}
.shutter::after{content:"";width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.92)}
.shutter:active{transform:scale(.9)}
.form{padding:0 18px}
.form h5{font-size:13px;font-weight:700;margin-bottom:12px;color:var(--text)}
.fld{background:#fff;border-radius:13px;padding:12px 14px;margin-bottom:9px;display:flex;align-items:center;
  gap:10px;box-shadow:0 1px 3px rgba(16,20,24,.08);opacity:0;transform:translateY(8px);
  transition:opacity .4s,transform .4s}
.fld.in{opacity:1;transform:none}
.fld .lb{font-size:11px;color:#8B959D;font-weight:600;letter-spacing:.4px;text-transform:uppercase;min-width:100px}
.fld .vl{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.fld .src{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:3px 8px;border-radius:11px;background:rgba(0,59,73,.09);color:var(--teal2)}
.fld.manual .src{background:rgba(0,0,0,.05);color:#98A2A8}
.formfoot{font-size:11.5px;color:var(--muted);margin-top:11px;display:flex;align-items:center;gap:7px;line-height:1.4}

/* ---------- audio / carplay ---------- */
.np{position:absolute;inset:0;padding:74px 26px 40px;color:#fff;display:flex;flex-direction:column;
  background:linear-gradient(168deg,#0E4655 0%,#00323E 52%,#001C24 100%)}
.np-art{width:210px;height:210px;border-radius:26px;margin:8px auto 24px;
  background:linear-gradient(140deg,var(--gold),#B4884E);color:var(--teal);display:flex;
  align-items:center;justify-content:center;font-size:44px;font-weight:800;letter-spacing:-2px;
  box-shadow:0 22px 52px rgba(0,0,0,.45)}
.np-ttl{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.np-sub{font-size:14px;color:rgba(255,255,255,.55);margin-top:5px}
.np-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin:24px 0 8px;overflow:hidden;cursor:pointer}
.np-bar i{display:block;height:100%;background:var(--gold);transition:width .3s linear}
.np-tm{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.np-ctl{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:22px}
.np-ctl .sk{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);cursor:pointer}
.np-ctl .play{width:66px;height:66px;border-radius:50%;background:var(--gold);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;transition:transform .14s}
.np-ctl .play:active{transform:scale(.93)}
.np-foot{display:flex;justify-content:space-between;margin-top:auto;font-size:12.5px;color:rgba(255,255,255,.5)}
.np-foot span{cursor:pointer}
.cpwrap{position:absolute;inset:0;background:#000;padding:60px 18px 30px;display:flex;flex-direction:column}
.cp-now{background:rgba(255,255,255,.07);border-radius:16px;padding:14px;display:flex;align-items:center;
  gap:13px;margin-bottom:14px}
.cp-now .a{width:52px;height:52px;border-radius:11px;background:linear-gradient(140deg,var(--gold),#B4884E);
  color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.cp-now .t3{font-size:14.5px;font-weight:600;color:#fff;line-height:1.25}
.cp-now .s3{font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}
.cp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.cp-tile{aspect-ratio:1.3;border-radius:15px;background:rgba(255,255,255,.08);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:10.5px;
  color:rgba(255,255,255,.62);font-weight:600}
.cp-tile.on{background:var(--teal);color:var(--sand)}
.cp-tile .ic{font-size:21px;font-style:normal}

/* ---------- wallet ---------- */
.walletbg{position:absolute;inset:0;padding:70px 20px 30px;
  background:linear-gradient(170deg,#1B262C 0%,#0D171C 100%);display:flex;flex-direction:column;gap:14px}
.pass{border-radius:19px;overflow:hidden;background:linear-gradient(158deg,#00485A,#002A34);color:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.46);transition:transform .5s cubic-bezier(.3,1,.35,1),opacity .4s}
.pass.stored{transform:translateY(34px) scale(.9);opacity:.55}
.pass-top{padding:17px 19px 14px;display:flex;align-items:flex-start;gap:12px}
.pass-top .nm{font-size:15px;font-weight:600}
.pass-top .ch{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}
.pass-top .mk{width:32px;height:32px;border-radius:9px;background:var(--gold);color:var(--teal);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pass-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:0 19px 17px}
.pass-grid .k{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);font-weight:700}
.pass-grid .v{font-size:15px;font-weight:600;margin-top:3px;line-height:1.22}
.perf{height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px);position:relative}
.perf::before,.perf::after{content:"";position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;background:#131E24}
.perf::before{left:-8px}.perf::after{right:-8px}
.pass-bot{padding:18px;text-align:center}
.qr{width:112px;height:112px;margin:0 auto;border:6px solid #fff;border-radius:9px;background:#fff;
  background-image:
    repeating-linear-gradient(0deg,#00303C 0 6px,transparent 6px 12px),
    repeating-linear-gradient(90deg,#00303C 0 6px,transparent 6px 12px);
  background-size:100% 100%;position:relative;overflow:hidden}
.qr::after{content:"C12";position:absolute;inset:36% 30%;background:#fff;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;color:var(--teal);border-radius:3px}
.pass-bot .cap2{font-size:12px;color:rgba(255,255,255,.52);margin-top:12px}
.pacts{display:flex;flex-direction:column;gap:1.5px;border-radius:15px;overflow:hidden}
.pacts div{display:flex;align-items:center;gap:11px;padding:14px 16px;font-size:13.5px;color:#fff;
  background:rgba(255,255,255,.07);cursor:pointer;transition:background .16s}
.pacts div:hover{background:rgba(255,255,255,.12)}
.pacts div.done2{color:var(--sand)}
.pacts div .ar{margin-left:auto;color:var(--gold);font-size:15px}

/* ---------- voice ---------- */
.rec-live{font-size:14.5px;line-height:1.55;color:#46535A;font-style:italic;min-height:96px}
.rec-live b{color:var(--text);font-style:normal}
.recbar{display:flex;align-items:center;gap:13px;background:#101A1E;border-radius:30px;padding:12px 15px;color:#fff}
.recbar .dot2{width:10px;height:10px;border-radius:50%;background:#FF4D4D;flex:0 0 auto;animation:pulse 1.3s infinite}
.wave{flex:1;display:flex;align-items:center;gap:3px;height:24px}
.wave i{flex:1;background:var(--gold);border-radius:1.5px;opacity:.85;animation:wv 1s ease-in-out infinite}
@keyframes wv{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.recbar .tm2{font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.82)}
.recbar .st{font-size:12.5px;font-weight:600;background:var(--gold);color:#0C1A1F;padding:7px 15px;
  border-radius:16px;cursor:pointer}
.commit{background:#fff;border-radius:13px;padding:12px 14px;margin-bottom:9px;display:flex;
  align-items:flex-start;gap:10px;box-shadow:0 1px 3px rgba(16,20,24,.08);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.commit.in{opacity:1;transform:none}
.commit .bx2{width:19px;height:19px;border-radius:6px;border:1.9px solid #C6CFD4;flex:0 0 auto;margin-top:1px}
.commit .tx2{font-size:13.5px;font-weight:500;line-height:1.38}
.commit .mt{font-size:11.5px;color:#8B959D;margin-top:3px}
.commit .who2{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(0,59,73,.08);color:var(--teal2);padding:3px 8px;border-radius:11px;white-space:nowrap}

/* ---------- reminders split ---------- */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{border-radius:17px;padding:14px;min-height:200px}
.mini.c12{background:linear-gradient(160deg,#00465A,#002C37);color:#fff}
.mini.apple{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(16,20,24,.09)}
.mini .mh{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;margin-bottom:12px;
  display:flex;align-items:center;gap:7px}
.mini.c12 .mh{color:var(--gold)}
.mini.apple .mh{color:#8B959D}
.mini .mi{font-size:13px;line-height:1.4;padding:8px 0;border-bottom:1px solid rgba(128,128,128,.14);
  display:flex;gap:9px;align-items:flex-start;cursor:pointer}
.mini .mi:last-child{border-bottom:none}
.mini .mi .c{width:17px;height:17px;border-radius:50%;border:1.8px solid currentColor;opacity:.4;
  flex:0 0 auto;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:9px;
  color:transparent;transition:all .22s}
.mini .mi.done .c{opacity:1;background:var(--teal2);border-color:var(--teal2);color:#fff}
.mini.c12 .mi.done .c{background:var(--gold);border-color:var(--gold);color:var(--teal)}
.mini .mi.done .tt{text-decoration:line-through;opacity:.5}
.mini .mi small{display:block;font-size:11px;opacity:.6;margin-top:2px}
.syncnote{text-align:center;font-size:12px;color:var(--muted);margin-top:14px;
  opacity:0;transition:opacity .35s}
.syncnote.show{opacity:1}
.autorow{display:flex;align-items:center;gap:11px;background:#fff;border-radius:14px;padding:12px 14px;
  margin-bottom:9px;box-shadow:0 1px 3px rgba(16,20,24,.08)}
.autorow .ic2{width:32px;height:32px;border-radius:9px;background:var(--teal);color:var(--gold);
  font-size:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.autorow .tx3{font-size:13px;font-weight:600;line-height:1.3}
.autorow .tx3 small{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}

/* ---------- dynamic type ---------- */
.typewrap{padding:0 18px}
.typerow{background:#fff;border-radius:15px;padding:14px 16px;margin-bottom:11px;
  box-shadow:0 1px 3px rgba(16,20,24,.08);transition:padding .35s}
.typerow .t4{font-weight:600;line-height:1.3;transition:font-size .35s}
.typerow .s4{color:var(--muted);margin-top:4px;line-height:1.38;transition:font-size .35s}
.app.ts1 .typerow .t4{font-size:15px}   .app.ts1 .typerow .s4{font-size:12.5px}
.app.ts2 .typerow .t4{font-size:19px}   .app.ts2 .typerow .s4{font-size:15.5px}
.app.ts3 .typerow .t4{font-size:25px}   .app.ts3 .typerow .s4{font-size:19px}
.app.ts3 .typerow{padding:18px 18px}
.app.ts2 .nav h3{font-size:31px}.app.ts3 .nav h3{font-size:36px}
.app.ts2 .tb{font-size:11px}.app.ts3 .tb{font-size:12.5px;padding:9px 9px}
.app.ts2 .tabbar,.app.ts3 .tabbar{height:70px}
.tsctl{display:flex;gap:8px;background:#fff;border-radius:14px;padding:10px 12px;align-items:center;
  box-shadow:0 1px 3px rgba(16,20,24,.08);margin-bottom:13px}
.tsctl .lab{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#98A2A8;font-weight:700;margin-right:auto}
.tsctl b{font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:15px;background:rgba(0,59,73,.07);
  color:var(--teal);cursor:pointer;transition:background .16s}
.tsctl b.on{background:var(--teal);color:var(--sand)}

/* ---------- title / end cards ---------- */
.titlecard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:40px 34px;color:#fff;
  background:radial-gradient(400px 300px at 50% 24%, rgba(225,182,128,.20), transparent 64%),
  linear-gradient(168deg,#00465A 0%,#00303C 55%,#001218 100%)}
.titlecard .bigmark{width:74px;height:74px;border-radius:21px;background:var(--gold);color:var(--teal);
  font-size:23px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:-1px;
  box-shadow:0 16px 40px rgba(0,0,0,.4)}
.titlecard h2{font-size:29px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.titlecard p{font-size:15px;color:rgba(255,255,255,.66);line-height:1.6;max-width:26ch}
.titlecard .tag{font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);font-weight:700}
.endlist{list-style:none;text-align:left;font-size:13.5px;line-height:1.9;color:rgba(255,255,255,.78);margin-top:4px}
.endlist li{padding-left:19px;position:relative}
.endlist li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---------- shot mode ---------- */
body.shot{background:transparent;display:block;overflow:visible}
body.shot .rail,body.shot .ctrl,body.shot .caption,body.shot .hintbar{display:none!important}
body.shot .stage{padding:0;min-height:0;height:auto;display:block}
body.shot .device{margin:26px auto;display:block}
body.shot .bezel{box-shadow:0 0 0 1px rgba(255,255,255,.07), inset 0 0 2px rgba(255,255,255,.22)}

.appsrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 16px;margin-top:24px}
.appsrow i{aspect-ratio:1;border-radius:22.37%;width:100%}

/* ---------- improved dashboard ---------- */
.hero-card{background:linear-gradient(158deg,#00465A,#002E3A);color:#fff;border-radius:18px;
  padding:18px 19px;margin-bottom:12px;box-shadow:0 8px 24px rgba(0,40,50,.22)}
.hero-card .hk{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:700}
.hero-card .hrow{display:flex;align-items:flex-end;gap:14px;margin-top:9px}
.hero-card .hd{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1}
.hero-card .hm{font-size:13px;color:rgba(255,255,255,.62);padding-bottom:3px}
.hero-card .hcount{margin-left:auto;text-align:right}
.hero-card .hcount b{display:block;font-size:26px;font-weight:600;color:var(--gold);line-height:1;letter-spacing:-.02em}
.hero-card .hcount i{font-size:10px;font-style:normal;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.45)}
.hero-card .hloc{font-size:12.5px;color:rgba(255,255,255,.58);margin-top:11px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.13);display:flex;align-items:center;gap:7px}
.prog{background:#fff;border-radius:16px;padding:15px 16px;margin-bottom:12px;
  box-shadow:0 1px 3px rgba(16,20,24,.09);display:flex;align-items:center;gap:15px}
.ring{width:52px;height:52px;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(var(--teal2) 0 33%, #E6EBED 33% 100%)}
.ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;
  font-size:13px;font-weight:700;color:var(--teal)}
.prog .pt{flex:1}
.prog .pt b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.prog .pt span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.forumcard{background:#fff;border-radius:16px;padding:14px 16px;margin-bottom:12px;
  box-shadow:0 1px 3px rgba(16,20,24,.09)}
.fr{display:flex;align-items:center;gap:11px;padding:8px 0;min-height:38px}
.fr + .fr{border-top:1px solid #EFF2F3}
.fr .fk{font-size:12.5px;color:var(--muted);flex:1}
.fr .fv{font-size:13.5px;font-weight:600;text-align:right}
.fr .fv.link{color:var(--teal2)}
.avstack{display:flex;align-items:center}
.avstack .av,.avstack .more2{width:31px;height:31px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;
  border:2.5px solid #fff;margin-left:-9px;box-sizing:border-box;letter-spacing:-.2px}
.avstack .av{background:linear-gradient(135deg,var(--teal2),var(--teal));color:var(--sand)}
.avstack > :first-child{margin-left:0}
.avstack .more2{background:#E6EBED;color:#6E787E}
.seg{display:flex;gap:6px;background:#E8ECEE;border-radius:11px;padding:3px;margin:16px 0 12px}
.seg span{flex:1;text-align:center;font-size:12.5px;font-weight:600;color:#6E787E;padding:7px 4px;
  border-radius:8px;cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}
.seg span.on{background:#fff;color:var(--teal);box-shadow:0 1px 2px rgba(16,20,24,.12)}
.linkrow{display:flex;align-items:center;gap:11px;background:#fff;border-radius:14px;padding:13px 15px;
  margin-bottom:9px;box-shadow:0 1px 3px rgba(16,20,24,.08)}
.linkrow .lic{width:30px;height:30px;border-radius:8px;background:rgba(0,59,73,.08);color:var(--teal2);
  font-size:13px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.linkrow .lt2{flex:1;font-size:13.5px;font-weight:600;line-height:1.3}
.linkrow .lt2 small{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.linkrow .lar{color:#B6BEC3;font-size:15px}

/* deterministic capture — kill transitions so the paint matches the DOM */
html.no-anim *, html.no-anim *::before, html.no-anim *::after{
  transition:none!important;animation:none!important}

/* ---------- film mode ---------- */
/* ?film=1 — what a recording should see. The scene rail and the transport are
   navigation for a person at a desk; on video they read as developer chrome and
   pull the eye away from the device. The caption stays: it is the only thing
   explaining what is on screen while the narration catches up. */
body.film{display:block;overflow:hidden;background:
  radial-gradient(1200px 700px at 20% -10%, rgba(225,182,128,.10), transparent 62%),
  radial-gradient(1000px 600px at 86% 108%, rgba(54,96,107,.22), transparent 60%),
  var(--ink)}
body.film .rail,body.film .ctrl,body.film .hintbar{display:none!important}
body.film .stage{height:100vh;padding:0 4.5vw;gap:5vw;justify-content:center;align-items:center}
body.film .device{transform:none}
body.film .caption{flex:1 1 auto;max-width:44ch;min-width:0}
body.film .caption .k{font-size:clamp(11px,1.05vw,15px);letter-spacing:2.6px}
body.film .caption .h{font-size:clamp(30px,3.5vw,52px);margin-top:.5em;line-height:1.1}
body.film .caption .p{font-size:clamp(15px,1.45vw,21px);margin-top:.8em;line-height:1.65}

/* ---------- CORE annual preparation ---------- */
.corehero{background:linear-gradient(158deg,#00465A,#002C37);color:#fff;border-radius:20px;
  padding:18px 20px;margin-bottom:12px}
.corehero .ck{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
.corehero .crow{display:flex;align-items:center;gap:16px;margin-top:13px}
.coredial{width:74px;height:74px;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(var(--gold) 0 58%, rgba(255,255,255,.16) 58% 100%)}
.coredial::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#003241}
.coredial b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;z-index:1;font-size:17px;font-weight:600;line-height:1}
.coredial b i{font-style:normal;font-size:8.5px;letter-spacing:.9px;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-top:2px;font-weight:600}
.corehero .cmeta{flex:1}
.corehero .cmeta .t{font-size:17px;font-weight:600;line-height:1.25}
.corehero .cmeta .s{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:4px;line-height:1.4}
.corehero .cbar{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12px;color:var(--sand);display:flex;align-items:center;gap:7px}
.seclist{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(16,20,24,.09);margin-bottom:12px}
.secrow{display:flex;align-items:center;gap:12px;padding:12px 15px}
.secrow + .secrow{border-top:1px solid #EFF2F3}
.secrow .tick{width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:11px;border:1.8px solid #C6CFD4;color:transparent}
.secrow.done .tick{background:var(--teal2);border-color:var(--teal2);color:#fff}
.secrow .sn{flex:1;font-size:13.5px;font-weight:500;line-height:1.3}
.secrow .sn small{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.secrow.done .sn{color:#8B959D}
.secrow .pos{font-size:10px;font-weight:700;color:#B6BEC3;min-width:18px;text-align:right}
.kq{background:#FFF8E9;border:1px solid #F0DCB8;border-radius:16px;padding:15px 16px;margin-bottom:12px}
.kq .kh{font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#946A1E;
  display:flex;align-items:center;gap:7px;margin-bottom:10px}
.kq .kitem{font-size:13.5px;line-height:1.45;color:#3E3015;padding:7px 0}
.kq .kitem + .kitem{border-top:1px solid #F0DCB8}
.kq .kitem b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#A07B2B;margin-bottom:3px}
.kq .kitem .tl{display:inline-block;font-size:10px;font-weight:700;background:#F0DCB8;color:#6B4E12;
  padding:2px 8px;border-radius:9px;margin-left:6px;vertical-align:1px}
.encnote{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);
  padding:2px 2px 0;line-height:1.45}


/* The screen clips with border-radius + overflow, but a scene that is taller than
   the viewport can still paint a square edge into the corner — the round mask is on
   the parent, and the child's own background box is what you see at the very bottom.
   So each scene clips itself, and the surfaces inside inherit that radius. */
.scene{border-radius:54px;overflow:hidden}
.scene > .ios,.scene > .and{border-radius:inherit;overflow:hidden}

/* Scroll fade. A scene taller than the frame was ending on a hard horizontal line,
   which reads as a rendering fault rather than as scrollable content. */
.body{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}

/* ---------- the real C12 app icon ---------- */
/* Everywhere an app badge appears — the dock tile, the Live Activity header, a
   notification, a widget header — iOS shows the app's own icon. Using the real
   one rather than a gold "C12" tile is the difference between a mockup and a
   screenshot. Source: Assets.xcassets/AppIcon.appiconset/appstore1024.png. */
.dock i.c12,.appsrow i.c12{background:#fff;padding:0}
.dock i.c12 img,.appsrow i.c12 img{width:100%;height:100%;display:block;object-fit:cover}
.mark,.la-mark,.w-mark{overflow:hidden;background:#fff;padding:0}
.mark img,.la-mark img,.w-mark img{width:100%;height:100%;display:block;object-fit:cover}
.w.teal .w-mark,.w.teal .w-mark img{background:#fff}
.bigmark{background:#fff;overflow:hidden;padding:0}
.bigmark img{width:100%;height:100%;display:block;object-fit:cover}
.np-art{background:#fff;overflow:hidden;padding:0}
.np-art img{width:100%;height:100%;display:block;object-fit:cover}

/* Meeting-day widget. Attendance, start time and what the member owes — all of it
   in Meeting and Todo today. A session-by-session running order is not. */
.w-h2{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:#8B959D}
.wmeet{display:flex;gap:10px;margin-top:12px}
.wm{flex:1}
.wm b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1}
.wm b i{font-style:normal;font-size:11px;font-weight:600;opacity:.5;margin-left:3px}
.wm span{display:block;font-size:11px;opacity:.55;margin-top:3px}
.wloc{font-size:11.5px;opacity:.55;margin-top:13px;padding-top:11px;border-top:1px solid rgba(128,128,128,.18)}
.w-mark,.w-mk{width:20px!important;height:20px!important}

/* ---------- capture ---------- */
/* Tapping the shutter jumped straight to a filled form, so nothing was ever seen
   to be captured. The page now flashes, freezes, and turns up as an attachment —
   which is also what the model does: has_many_attached :company_financials. */
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:70}
.flash.go{animation:flash .42s ease-out}
@keyframes flash{0%{opacity:0}8%{opacity:.92}100%{opacity:0}}
.doc.snap{animation:snap .5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes snap{to{transform:scale(.86);opacity:.35;filter:saturate(.4)}}
.shot-thumb{display:flex;align-items:center;gap:13px;background:#fff;border-radius:14px;padding:11px 13px;
  margin-bottom:12px;box-shadow:0 1px 3px rgba(16,20,24,.09);opacity:0;transform:translateY(8px);
  transition:opacity .45s,transform .45s}
.shot-thumb.in{opacity:1;transform:none}
.shot-thumb .pg{width:46px;height:60px;border-radius:5px;flex:0 0 auto;overflow:hidden;position:relative;
  background:linear-gradient(170deg,#F4F1EC,#E2DDD3);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.shot-thumb .pg::before{content:"";position:absolute;inset:7px 6px auto 6px;height:3px;border-radius:2px;
  background:#B9B2A4;box-shadow:0 7px 0 #CFC8BA,0 14px 0 #CFC8BA,0 21px 0 #CFC8BA,0 28px 0 #CFC8BA,0 35px 0 #CFC8BA}
.shot-thumb .pg::after{content:"";position:absolute;left:6px;right:6px;bottom:7px;height:3px;border-radius:2px;background:#CFC8BA}
.shot-thumb .tx4{flex:1;font-size:13px;font-weight:600;line-height:1.3}
.shot-thumb .tx4 small{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:3px}
.shot-thumb .ok2{width:22px;height:22px;border-radius:50%;background:#5EA07A;color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}

/* ---------- screen-only capture ---------- */
/* ?screen=1 — the screen and nothing else. rm-showcase device="phone" draws its
   own shell with depth slices and an island cutout, so feeding it a picture that
   already has a bezel gives you a phone inside a phone. */
body.screenonly{background:transparent;display:block;overflow:visible}
body.screenonly .rail,body.screenonly .ctrl,body.screenonly .caption{display:none!important}
body.screenonly .stage{padding:0;height:auto;display:block}
body.screenonly .device{margin:0;transform:none;zoom:1}
body.screenonly .bezel,body.screenonly .btn-s,body.screenonly .punch{display:none}
body.screenonly .screen{border-radius:0}
body.screenonly .scene{border-radius:0}

body.screenonly .island,body.screenonly .hind,body.screenonly .gesturebar{display:none}


/* ── app mode ──────────────────────────────────────────────────────────────
   The walkthrough shell is a reading device: a rail of scenes, a caption
   beside the phone, prev/next. That is the wrong frame for someone who was
   handed a link and told "try it" — the chrome is the first thing they read,
   and the thing they are meant to touch is two thirds the size it should be.

   app mode drops all of it and gives the phone the viewport. Animations stay
   ON, because a prototype that does not move is a picture. The scene picker
   is a floating pill rather than a rail, so it is there when you want to jump
   and invisible when you do not. */
body.app{background:#08090a;display:grid;place-items:center;min-height:100vh;overflow:hidden}
body.app .rail,body.app .ctrl,body.app .caption,body.app .hintbar{display:none!important}
body.app .stage{padding:0;min-height:0;height:auto;display:grid;place-items:center}
body.app .device{margin:0;transform:scale(var(--appScale,1));transform-origin:center}
body.app .bezel{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 90px -20px rgba(0,0,0,.75)}

/* the picker: a pill of scene dots, out of the way until you reach for it */
.apppick{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;
  display:flex;gap:6px;align-items:center;padding:8px 12px;border-radius:999px;
  background:rgba(22,24,26,.82);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.08);opacity:.28;transition:opacity .18s ease}
.apppick:hover{opacity:1}
.apppick b{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);
  cursor:pointer;transition:background .15s ease,transform .15s ease}
.apppick b:hover{background:rgba(255,255,255,.6);transform:scale(1.25)}
.apppick b.on{background:var(--gold);transform:scale(1.25)}
body.nopick .apppick{display:none}