/* ═══════════════════════════════════════════════════════════
   TRAKVEN — added interactive sections
   timeline · trio · email · calendar stack · themes · alarm ·
   cross-device sync · navigation features
   ═══════════════════════════════════════════════════════════ */

/* ── TODAY'S TIMELINE (interactive) ── */
.timeline-feature{padding:90px 0;background:linear-gradient(180deg,var(--bg),#F3EFFA 50%,var(--bg))}
.tl-stage{margin-top:8px}
.tl-toggle-wrap{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:44px;flex-wrap:wrap}
.tl-toggle-label{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink-3);transition:color .3s;cursor:pointer}
.tl-toggle-label.active{color:var(--violet)}
.tl-toggle{width:64px;height:34px;border-radius:100px;border:none;background:var(--violet);
  position:relative;cursor:pointer;padding:0;transition:background .3s;box-shadow:inset 0 1px 4px rgba(0,0,0,.15)}
.tl-toggle[aria-checked="false"]{background:#CBD0DA}
.tl-toggle-thumb{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.tl-toggle[aria-checked="true"] .tl-toggle-thumb{transform:translateX(30px)}
.tl-phones{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:60px;align-items:center;justify-items:center}
.tl-phone{position:relative}
.tl-phone .shot-device{width:308px}
#tlImg{transition:opacity .35s var(--ease)}
.tl-callouts{display:flex;flex-direction:column;gap:14px;max-width:420px;width:100%}
.tl-callout{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm);opacity:.4;transition:opacity .4s,transform .4s,border-color .4s}
.tl-callout.lit{opacity:1;border-color:color-mix(in srgb,var(--violet) 25%,var(--line))}
.tl-callout-ic{width:40px;height:40px;min-width:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 25%,transparent)}
.tl-callout b{display:block;font-size:14.5px;font-weight:700;margin-bottom:2px}
.tl-callout span{font-size:13px;color:var(--ink-2);line-height:1.5}

/* ── TRIO (upcoming / quick tags) + email ── */
.trio{padding:90px 0}
.trio-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:30px}
.trio-card{display:flex;gap:26px;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:28px;padding:28px;box-shadow:var(--shadow-md)}
.trio-shot{flex:0 0 auto}
.trio-shot .shot-device{width:188px}
.trio-copy{min-width:0}
.trio-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;font-size:13px;
  color:var(--c);margin-bottom:12px}
.trio-tag ion-icon{font-size:16px}
.trio-copy h3{font-family:var(--font-head);font-size:21px;font-weight:700;letter-spacing:-.4px;margin-bottom:10px;line-height:1.15}
.trio-copy p{font-size:14px;color:var(--ink-2);line-height:1.6}
.trio-copy p b,.cal-list b{color:var(--ink);font-weight:700}

.email-banner{display:flex;align-items:center;gap:40px;background:linear-gradient(120deg,#FFF1F6,#F4ECFE);
  border:1px solid #F3D9E6;border-radius:28px;padding:36px 40px;overflow:hidden;position:relative}
.email-art{position:relative;flex:0 0 auto;width:140px;height:140px;display:flex;align-items:center;justify-content:center}
.email-envelope{width:92px;height:92px;border-radius:26px;background:linear-gradient(135deg,#DB2777,#9333EA);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;box-shadow:0 18px 40px rgba(219,39,119,.35);z-index:2}
.email-ping{position:absolute;border-radius:50%;border:2px solid rgba(219,39,119,.4);animation:emailPing 2.6s ease-out infinite}
.email-ping-1{width:120px;height:120px;animation-delay:0s}
.email-ping-2{width:140px;height:140px;animation-delay:.8s}
@keyframes emailPing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.1);opacity:0}}
.email-copy h3{font-family:var(--font-head);font-size:clamp(20px,2.4vw,28px);font-weight:800;letter-spacing:-.6px;line-height:1.15;margin-bottom:12px}
.email-copy p{font-size:15px;color:var(--ink-2);line-height:1.65;max-width:620px}
.email-unique{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#DB2777,#9333EA);padding:2px 8px;border-radius:100px;vertical-align:middle}

/* ── CALENDAR multi-view stack ── */
.cal-showcase{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;margin-bottom:40px}
.cal-views{display:flex;flex-direction:column;align-items:center;gap:22px}
.cal-view-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cvc{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:7px 14px;border-radius:100px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink-3)}
.cvc.active{background:color-mix(in srgb,var(--c) 12%,#fff);border-color:color-mix(in srgb,var(--c) 30%,transparent);color:var(--c)}
.cvc ion-icon{font-size:15px}
.cal-stack{position:relative;width:320px;height:500px}
.cal-card{position:absolute;transition:transform .5s var(--ease),box-shadow .5s}
.cal-card .shot-device{width:260px}
.cal-card-1{left:30px;top:0;z-index:3}
.cal-card-2{left:-20px;top:30px;z-index:2;transform:rotate(-8deg) scale(.92);opacity:.96}
.cal-card-3{left:80px;top:34px;z-index:1;transform:rotate(8deg) scale(.9);opacity:.93}
.cal-showcase:hover .cal-card-2{transform:rotate(-12deg) translateX(-16px) scale(.92)}
.cal-showcase:hover .cal-card-3{transform:rotate(12deg) translateX(16px) scale(.9)}
.cal-list{list-style:none;display:flex;flex-direction:column;gap:16px}
.cal-list li{display:flex;gap:14px;align-items:flex-start}
.cl-ic{width:42px;height:42px;min-width:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 24%,transparent)}
.cal-list b{display:block;font-size:15px;font-weight:700;margin-bottom:2px}
.cal-list span{font-size:13.5px;color:var(--ink-2);line-height:1.5}

.analytics-band{display:grid;grid-template-columns:1fr .8fr;gap:50px;align-items:center;
  background:linear-gradient(120deg,#EAF7FE,#F0F5FF);border:1px solid #D6EAF7;border-radius:30px;padding:44px 46px}
.ab-copy h3{font-family:var(--font-head);font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.6px;line-height:1.15;margin:18px 0 12px}
.ab-copy p{font-size:15px;color:var(--ink-2);line-height:1.65;margin-bottom:24px}
.ab-stats{display:flex;gap:30px}
.ab-stat .ab-v{font-family:var(--font-head);font-size:34px;font-weight:800;letter-spacing:-1px;color:var(--teal)}
.ab-stat .ab-l{font-size:11px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.ab-shot{display:flex;justify-content:center}
.ab-shot .shot-device{width:230px}

/* ── THEMES PLAYGROUND ── */
.themes-feature{padding:90px 0;background:linear-gradient(180deg,var(--bg),#F6F1FB 60%,var(--bg))}
.theme-stage{display:grid;grid-template-columns:minmax(360px,460px) 1fr;gap:48px;align-items:center;justify-items:center;margin-top:10px}
.theme-phone-col{display:flex;flex-direction:column;align-items:center;gap:4px}
/* Dual-phone: Overview (front) + Timeline (back), fanned */
.theme-duo{position:relative;width:380px;height:560px}
.theme-ph{position:absolute}
.theme-ph .shot-device{width:212px;transition:box-shadow .5s}
.theme-ph img{transition:opacity .3s var(--ease)}
.theme-ph-back{top:34px;left:4px;transform:rotate(-6deg);z-index:1;filter:drop-shadow(0 24px 40px rgba(60,40,90,.18))}
.theme-ph-front{top:0;right:4px;transform:rotate(4deg);z-index:2;filter:drop-shadow(0 28px 50px rgba(60,40,90,.22))}
.theme-ph-label{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-sm);color:var(--ink-2)}
.theme-ph-label ion-icon{font-size:14px;color:#7C3AED}
.theme-ph-front .theme-ph-label{color:#7C3AED;border-color:color-mix(in srgb,#7C3AED 32%,var(--line-2))}
.theme-name{font-family:var(--font-head);font-weight:800;font-size:20px;margin-top:18px;letter-spacing:-.4px}
.theme-sub{font-size:13px;color:var(--ink-3)}
.theme-picker{width:100%;max-width:460px}
.theme-swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}
.theme-swatch{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;cursor:pointer;
  background:var(--surface);border:2px solid var(--line-2);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.theme-swatch:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.theme-swatch.active{border-color:var(--swatch-accent);box-shadow:0 8px 22px color-mix(in srgb,var(--swatch-accent) 25%,transparent)}
.ts-chip{width:38px;height:38px;min-width:38px;border-radius:11px;border:1px solid rgba(0,0,0,.12);position:relative;overflow:hidden}
.ts-chip::after{content:'';position:absolute;right:6px;bottom:6px;width:10px;height:10px;border-radius:50%;background:var(--swatch-accent)}
.ts-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.ts-sub{font-size:11px;color:var(--ink-3)}
.theme-pair-note{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.55;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.theme-pair-note ion-icon{font-size:20px;color:var(--violet);flex-shrink:0}

/* ── ALARM PLAYGROUND ── */
.alarm-feature{padding:90px 0;background:linear-gradient(180deg,var(--bg),#1a1216 55%,#0e0a0c);position:relative;overflow:hidden}
.alarm-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.alarm-feature .feature-h{color:#fff}
.alarm-feature .feature-lead{color:rgba(255,255,255,.66)}
.alarm-feature .feature-lead em{color:#FFB15C;font-style:normal;font-weight:600}
.alarm-feature .feature-tag{background:rgba(255,112,40,.14);border-color:rgba(255,112,40,.4);color:#FF924E}
.alarm-swatches{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.alarm-swatch{width:46px;height:46px;border-radius:14px;cursor:pointer;border:2px solid rgba(255,255,255,.16);
  transition:transform .25s var(--ease),border-color .25s;position:relative}
.alarm-swatch:hover{transform:translateY(-3px) scale(1.05)}
.alarm-swatch.active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.alarm-options{display:flex;flex-direction:column;gap:10px}
.alarm-opt{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.72);font-weight:500}
.alarm-opt ion-icon{font-size:18px;color:#FF924E}
.alarm-visual{display:flex;justify-content:center}
.alarm-device{width:300px;background:#0a0809}
.alarm-screen{height:600px;border-radius:36px;overflow:hidden;position:relative;display:flex;flex-direction:column;
  justify-content:space-between;padding:54px 26px 40px;color:#fff;text-align:center;
  background:linear-gradient(170deg,#7A350D,#2B1812 55%,#0E0B0C);transition:background .6s var(--ease)}
.alarm-glitter{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 70% 20%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 40% 60%,rgba(255,255,255,.45),transparent),radial-gradient(2px 2px at 80% 70%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 55% 85%,rgba(255,255,255,.4),transparent)}
.alarm-top{position:relative;z-index:2}
.alarm-now{font-family:var(--font-head);font-size:72px;font-weight:800;line-height:1;letter-spacing:-2px}
.alarm-ampm{font-size:18px;font-weight:700;opacity:.85;margin-top:2px}
.alarm-date{font-size:13px;opacity:.7;margin-top:10px}
.alarm-mid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.alarm-bell{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;
  font-size:38px;color:#fff;animation:alarmShake 1.4s ease-in-out infinite}
@keyframes alarmShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
.alarm-label{font-family:var(--font-head);font-size:22px;font-weight:700}
.alarm-tag{font-size:12px;font-weight:600;opacity:.85;padding:4px 12px;border-radius:100px;background:rgba(255,255,255,.16)}
.alarm-actions{position:relative;z-index:2;display:flex;gap:12px}
.alarm-btn{flex:1;padding:15px 0;border-radius:16px;border:none;font-family:var(--font-body);font-size:15px;font-weight:700;cursor:pointer}
.alarm-snooze{background:rgba(255,255,255,.16);color:#fff}
.alarm-dismiss{background:#fff;color:#1a1212}

/* ── CROSS-DEVICE SYNC ── */
.sync-feature{padding:100px 0;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg),#EAF7FE 50%,var(--bg))}
.sync-diagram{display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,70px);margin:60px 0 56px;flex-wrap:wrap}
.sync-device{display:flex;flex-direction:column;align-items:center;gap:9px;position:relative}
.sd-glass{width:78px;height:78px;border-radius:22px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--teal);box-shadow:var(--shadow-md)}
.sync-device span{font-size:13px;font-weight:600;color:var(--ink-2)}
.sd-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:100px;
  background:#EDE7FB;color:var(--violet);border:1px solid color-mix(in srgb,var(--violet) 25%,transparent)}
.sd-badge-on{background:#E7F8F1;color:#059669;border-color:#A7F0D4}
.sync-core{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center}
.sync-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(14,165,233,.35);animation:syncPulse 2.4s ease-in-out infinite}
.sr-1{width:70px;height:70px;animation-delay:0s}.sr-2{width:104px;height:104px;animation-delay:.5s}.sr-3{width:140px;height:140px;animation-delay:1s}
@keyframes syncPulse{0%,100%{opacity:.3;transform:scale(.95)}50%{opacity:.9;transform:scale(1.03)}}
.sync-cloud{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#38BDF8,#0EA5E9);
  display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;box-shadow:0 16px 36px rgba(14,165,233,.4);z-index:2}
.sync-orbit{position:absolute;inset:0;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#F97316;box-shadow:0 0 8px #F97316}
.od-1{top:0;left:50%;margin-left:-4px}.od-2{bottom:8px;left:8px;background:#7C3AED;box-shadow:0 0 8px #7C3AED}
.od-3{bottom:8px;right:8px;background:#10B981;box-shadow:0 0 8px #10B981}
.sync-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1080px;margin:0 auto}
.sync-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.9),var(--surface));
  border:1px solid var(--line);border-radius:22px;padding:26px 24px;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.sync-card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--c);opacity:.85}
.sync-card::after{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 18%,transparent),transparent 70%);opacity:0;transition:opacity .35s}
.sync-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg,0 24px 48px rgba(20,40,80,.14));border-color:color-mix(in srgb,var(--c) 34%,var(--line))}
.sync-card:hover::after{opacity:1}
.sync-card-ic{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:24px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--c) 18%,#fff),color-mix(in srgb,var(--c) 8%,#fff));
  color:var(--c);border:1px solid color-mix(in srgb,var(--c) 26%,transparent);margin-bottom:16px;
  box-shadow:0 8px 18px color-mix(in srgb,var(--c) 18%,transparent)}
.sync-card h4{font-family:var(--font-head);font-size:16px;font-weight:700;margin-bottom:8px}
.sync-card p{font-size:13px;color:var(--ink-2);line-height:1.55}

/* ── NAVIGATION FEATURES ── */
.nav-feature{padding:90px 0}
.nav-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:22px}
.nav-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s}
.nav-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.nav-card h3{font-family:var(--font-head);font-size:19px;font-weight:700;letter-spacing:-.3px;margin-bottom:10px;line-height:1.18}
.nav-card p{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.nav-card-wide{display:flex;gap:28px;align-items:center}
.nav-card-copy{flex:1}
.nav-card-demo{flex:0 0 auto}
.snap-demo{width:150px;height:200px;display:flex;align-items:center;justify-content:center}
.snap-phone{position:relative;width:120px;height:190px;border-radius:24px;background:#111016;padding:7px;box-shadow:var(--shadow-md)}
.snap-screen{width:100%;height:100%;border-radius:18px;background:linear-gradient(160deg,#FFF3E6,#EAF7FE)}
.snap-widget{position:absolute;width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,#FB923C,#F97316);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 8px 18px rgba(249,115,22,.5);
  right:-12px;top:40px;animation:snapMove 5s ease-in-out infinite}
@keyframes snapMove{0%,100%{right:-12px;left:auto;top:40px}25%{right:-12px;left:auto;top:120px}50%{left:-12px;right:auto;top:120px}75%{left:-12px;right:auto;top:40px}}
.fab-demo{position:relative;height:120px;margin-top:18px;display:flex;align-items:flex-end;justify-content:center}
.fab-main{position:absolute;bottom:0;width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,#FB923C,#F97316);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 10px 22px rgba(249,115,22,.45);z-index:3}
.fab-mini{position:absolute;bottom:6px;width:38px;height:38px;border-radius:13px;background:var(--surface);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c);box-shadow:var(--shadow-sm);
  animation:fabFan 4s ease-in-out infinite}
@keyframes fabFan{0%,55%,100%{transform:translate(0,0);opacity:0}68%{opacity:1}70%,90%{transform:translate(var(--fx,0),var(--fy,-64px));opacity:1}}
.fab-demo .fab-mini:nth-child(1){--fx:-56px;--fy:-30px}
.fab-demo .fab-mini:nth-child(2){--fx:0;--fy:-66px}
.fab-demo .fab-mini:nth-child(3){--fx:56px;--fy:-30px}
.bottomnav-demo{display:flex;justify-content:space-between;align-items:center;margin-top:20px;background:var(--bg);
  border:1px solid var(--line-2);border-radius:16px;padding:10px 14px}
.bn-item{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--ink-3)}
.bn-item.active{background:color-mix(in srgb,var(--orange) 12%,#fff);color:var(--orange)}

/* responsive */
@media(max-width:1024px){
  .tl-phones{grid-template-columns:1fr;gap:36px}
  .trio-grid{grid-template-columns:1fr}
  .email-banner{flex-direction:column;text-align:center;gap:24px}
  .email-copy p{margin:0 auto}
  .cal-showcase{grid-template-columns:1fr;gap:40px;justify-items:center}
  .cal-copy{max-width:460px}
  .analytics-band{grid-template-columns:1fr;text-align:center;gap:30px}
  .ab-shot{order:-1}.ab-stats{justify-content:center}
  .theme-stage{grid-template-columns:1fr;gap:36px}
  .theme-duo{transform:scale(.92)}
  .alarm-inner{grid-template-columns:1fr;gap:40px}
  .alarm-visual{order:-1}
  .alarm-copy{text-align:center}.alarm-swatches,.alarm-options{align-items:center;justify-content:center}
  .alarm-copy .feature-tag,.alarm-copy .feature-lead{margin-left:auto;margin-right:auto}
  .sync-cards{grid-template-columns:repeat(2,1fr)}
  .nav-grid{grid-template-columns:1fr}
  .nav-card-wide{flex-direction:column;text-align:center}
}
@media(max-width:620px){
  .trio-card{flex-direction:column;text-align:center}
  .theme-duo{width:330px;height:500px;transform:scale(.86);transform-origin:top center}
  .theme-ph .shot-device{width:200px}
  .theme-swatches{grid-template-columns:1fr}
  .sync-cards{grid-template-columns:1fr}
  .ab-stats{gap:18px}
  .cal-stack{transform:scale(.85)}
}