/* All features: self-contained RC sub-page. Base, header/nav, FAQ, CTA and footer copied from integrations/ (MKT-1946). */
  :root {
    --paper: #F7F5F1; --white: #FFFFFF;
    --ink: #23262A; --ink-600: #505763; --ink-500: #6B7280; --ink-400: #B9BEC6;
    --gray-300: #D5D8DD; --gray-200: #E3E5E8; --gray-100: #F1F2F4;
    --orange: #ED5A29; --orange-hover: #F17E58; --orange-ink: #B8410F; --orange-100: #FEEFEA; --orange-200: #F8CDBB;
    --green-100: #E6F4EC; --green-ink: #1F6B42;
    --dark: #23262A; --dark-panel: #1A1C1F; --dark-border: #3A3E44;
    --shadow: 0 1px 2px 0 rgba(16,24,40,.04), 0 1px 3px 0 rgba(16,24,40,.06);
    --shadow-md: 0 18px 40px -22px rgba(35,38,42,.38);
    --shadow-lg: 0 28px 66px -24px rgba(35,38,42,.40);
    --r-btn: 9px; --r-input: 12px; --r-card: 16px; --r-lg: 22px; --r-pill: 999px;
    --font: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
    --container: min(1160px, 100% - 48px);
    --h1-size: 40px; --h1-lh: 48px; --h2-size: 28px; --h2-lh: 36px;
    --lead-size: 16px; --lead-lh: 25px; --section-gap: 72px;
  }
  @media (min-width: 700px) { :root { --h1-size: 52px; --h1-lh: 60px; --h2-size: 34px; --h2-lh: 42px; --lead-size: 17px; --lead-lh: 27px; --section-gap: 100px; } }
  @media (min-width: 1280px) { :root { --container: min(1200px, 100% - 48px); --h1-size: 62px; --h1-lh: 70px; --h2-size: 40px; --h2-lh: 48px; --lead-size: 19px; --lead-lh: 29px; --section-gap: 128px; } }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: var(--font); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
  a { color: var(--orange); text-decoration: none; }
  a:hover { color: var(--orange); }
  button { font-family: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }

  .container { width: var(--container); max-width: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 1; }
  @media (min-width: 1440px) { :root { --container: min(1360px, 100% - 48px); --h1-size: 64px; --h1-lh: 72px; --lead-size: 20px; --lead-lh: 30px; --section-gap: 144px; } }
  @media (max-width: 767px) { :root { --container: min(1160px, 100% - 40px); } }
  .narrow { max-width: 740px; margin: 0 auto; text-align: center; }
  .section { padding: var(--section-gap) 0; position: relative; overflow: hidden; }
  .band { background: var(--white); }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin: 0 0 16px; }
  .h1 { font-size: var(--h1-size); line-height: var(--h1-lh); font-weight: 700; margin: 0 0 22px; letter-spacing: -0.025em; }
  .h2 { font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: 600; margin: 0 0 16px; letter-spacing: -0.015em; }
  .lead { font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--ink-600); margin: 0; }
  .muted { font-size: 14px; color: var(--ink-500); margin: 0; }
  .accent { color: var(--orange); }
  .decor { position: absolute; pointer-events: none; z-index: 0; user-select: none; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 24px; border-radius: var(--r-btn); font-size: 16px; font-weight: 600; border: 1px solid transparent; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
  .btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 20px -10px rgba(237,90,41,.7); }
  .btn-primary:hover { background: var(--orange-hover); color: #fff; transform: translateY(-1px); }
  .btn-ghost { background: var(--white); color: var(--ink); border-color: var(--gray-300); }
  .btn-ghost:hover { border-color: var(--ink-400); color: var(--ink); }
  .btn-link { background: transparent; color: var(--ink); padding: 10px 6px; border: none; }
  .btn-link:hover { color: var(--orange); }
  .btn-sm { min-height: 44px; padding: 8px 18px; font-size: 15px; }

  /* reveal on scroll (homepage-rc pattern) */
  .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .rv.in { opacity: 1; transform: none; }

  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(237,90,41,.45); } 100% { box-shadow: 0 0 0 12px rgba(237,90,41,0); } }
  @keyframes popin { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes drift { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(10px,-14px) rotate(4deg); } }
  @keyframes flow { to { stroke-dashoffset: -24; } }
  @keyframes scan { 0% { top: -12%; } 100% { top: 100%; } }
  @keyframes type { 0% { width: 0; } 55%, 100% { width: 100%; } }
  @keyframes chipin { 0%, 15% { opacity: 0; transform: translateY(6px) scale(.92); } 25%, 100% { opacity: 1; transform: none; } }
  @keyframes fillbar { 0% { width: 8%; } 80%, 100% { width: 100%; } }
  @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* ===== header + nav (copied from homepage-rc) ===== */
  :root { --header-h: 80px; --ease: cubic-bezier(.16,1,.3,1); }
  .wrap { width: var(--container); max-width: 100%; margin: 0 auto; padding: 0; }
  .site-header button { border: 0; background: transparent; font-family: inherit; padding: 0; }
  .site-header .btn { min-height: 40px; padding: 8px 18px; font-size: 15px; font-weight: 500; box-shadow: none; }
  .site-header .btn-primary { font-weight: 600; }
  .btn-outline { background: var(--white); border: 1px solid var(--gray-200); color: var(--ink); }
  .btn-outline:hover { background: #FAFAFA; border-color: var(--gray-300); color: var(--ink); }

.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);transition:background 220ms ease,box-shadow 220ms ease,border-color 220ms ease;border-bottom:1px solid transparent}
.site-header.is-stuck{background:rgba(247,245,241,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:transparent}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.nav-links{display:flex;align-items:center;gap:6px}
/* The panels are absolutely positioned against the header itself (the sticky header is the
   nearest positioned ancestor), so the items stay static and the panel can be centred on
   .wrap regardless of which trigger opened it. */
.nav-item{position:static;display:flex;align-items:center}
.nav-trigger{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-btn);background:transparent;font-size:15px;font-weight:500;color:var(--ink-600);cursor:pointer;transition:background 140ms ease,color 140ms ease}
.nav-trigger:hover,.nav-item.is-open>.nav-trigger{background:var(--gray-100);color:var(--ink)}
.nav-trigger a,.nav-trigger button{color:inherit}
.nav-trigger-plain{color:var(--ink-600)}
.nav-trigger-split{padding:0}
.nav-trigger-label{display:flex;align-items:center;min-height:44px;padding:0 4px 0 14px}
.nav-caret{display:flex;align-items:center;min-height:44px;padding:0 14px 0 2px;cursor:pointer}
.nav-trigger svg{transition:transform 160ms ease}
.nav-item.is-open .nav-trigger svg{transform:rotate(180deg)}
.header-actions{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-btn);color:var(--ink);cursor:pointer}
.nav-burger-x{display:none}
.nav-burger[aria-expanded="true"] .nav-burger-bars{display:none}
.nav-burger[aria-expanded="true"] .nav-burger-x{display:block}

/* ===== header dropdowns (nav) =====
   "B" style from the approved artboards: bare 20px line icons (no tile), --ink-600 going
   --ink on hover, 500-weight titles, white panel on a 1px --gray-200 border. */
.nav-panel{position:absolute;top:100%;left:50%;z-index:2;width:min(var(--nav-w,1000px),var(--container));margin-top:9px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-4px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
.nav-item.is-open>.nav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s,0s,0s}
/* 9px, not 8: top:100% lands on the header's padding box, and the header's 1px bottom
   border sits outside it — this puts the panel exactly 8px under the visible header edge */
/* invisible bridge over the 8px gap, so the pointer can cross from the trigger into the
   panel without ever leaving .nav-item */
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-panel-in{background:var(--white);border:1px solid var(--gray-200);border-radius:14px;box-shadow:0 8px 20px -10px rgba(35,38,42,.12),0 1px 2px rgba(35,38,42,.04);overflow:hidden}
.nav-panel-product{--nav-w:1000px}
.nav-panel-library{--nav-w:1020px}
.nav-panel-res{--nav-w:860px}
.nav-sec{display:flex;flex-direction:column;gap:12px}
.nav-sec-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:0 12px}
.nav-sec-title-flush{padding:0}
.nav-col{display:flex;flex-direction:column;gap:12px;padding:28px 16px 20px}
.nav-col-side{background:var(--white);border-left:1px solid var(--gray-200)}
.nav-list{display:flex;flex-direction:column;gap:4px}
.nav-list-tight{display:flex;flex-direction:column;gap:2px}
/* rich row: icon + title (+ chip) + description, arrow revealed at the right edge on hover */
.nav-row{display:flex;gap:14px;padding:12px;border-radius:12px;color:var(--ink);transition:background 120ms ease}
.nav-row:hover{background:var(--gray-100);color:var(--ink)}
.nav-ico{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink-600);transition:color 120ms ease}
.nav-row:hover .nav-ico,.nav-row-c:hover .nav-ico{color:var(--ink)}
.nav-row-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-row-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:22px}
.nav-row-desc{font-size:13px;line-height:19px;color:var(--ink-600)}
/* always in the box, only faded — revealing it must not reflow the row */
.nav-row-go{margin-left:auto;align-self:center;display:flex;color:var(--ink);opacity:0;transition:opacity 120ms ease}
.nav-row:hover .nav-row-go,.nav-row:focus-visible .nav-row-go{opacity:1}
/* compact one-line row (Popup Library columns) */
.nav-row-c{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease}
.nav-row-c:hover{background:var(--gray-100);color:var(--ink)}
/* plain text row (Resources / Company) */
.nav-row-p{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:var(--r-btn);font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease}
.nav-row-p:hover{background:var(--gray-100);color:var(--ink)}
.nav-chip{font-size:11px;font-weight:600;line-height:16px;padding:1px 8px;border-radius:var(--r-pill);background:var(--orange-100);color:#B23A12}
.nav-ai-logos{display:flex;align-items:center;gap:8px;margin-top:6px}
.nav-ai-logos img{width:16px;height:16px}
.nav-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-top:1px solid var(--gray-200);background:var(--white)}
.nav-foot-center{justify-content:center}
.nav-foot-note{font-size:15px;color:var(--ink-600)}
.nav-foot-link,.nav-link-go{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--ink)}
.nav-link-go{min-height:40px}
.nav-foot-link:hover,.nav-link-go:hover{color:var(--ink);text-decoration:underline}
/* Product panel */
.nav-prod-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.nav-usecases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
/* Popup Library panel */
.nav-lib-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px}
.nav-lib-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:28px 20px 24px}
.nav-seasons{display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;border-left:1px solid var(--gray-200)}
.nav-season-body{display:flex;flex-direction:column;gap:12px}
.nav-season-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nav-season-name{font-size:18px;font-weight:600;line-height:24px}
.nav-season-when{font-size:13px;line-height:19px;color:var(--ink-600);white-space:nowrap}
.nav-season-shot{display:block;padding:14px;border-radius:12px;background:var(--paper)}
.nav-season-shot img{width:100%;height:auto;border-radius:6px;box-shadow:0 6px 16px -8px rgba(35,38,42,.35)}
.nav-season-list{display:flex;flex-direction:column;border-top:1px solid var(--gray-200);padding-top:6px}
.nav-season-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;font-size:15px;font-weight:500;color:var(--ink)}
.nav-season-row:hover{color:var(--ink);text-decoration:underline}
/* Resources panel: the artboard's per-column padding keeps the three columns optically even */
.nav-res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 240px}
.nav-col-l{padding:28px 8px 24px 16px}
.nav-col-r{padding:28px 16px 24px 8px}
.nav-col-c{padding:28px 12px 24px}
/* the mobile sheet only exists under the nav breakpoint */
.mnav{display:none}
/* ===== responsive ===== */
@media (max-width:1059px){
  /* the seasons column needs its 380px; below this the two link columns get the panel */
  .nav-lib-grid{grid-template-columns:minmax(0,1fr)}
  .nav-seasons{display:none}
}
/* ===== tablet ===== */

@media (max-width:767px){
  :root{--header-h:64px}
  .nav-links,.header-signin{display:none}
  .nav-burger{display:flex}
  /* full-height sheet under the (sticky) header; z-index stays below the header's 50 */
  .mnav{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;display:flex;flex-direction:column;background:var(--white);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
  .mnav-nav{display:flex;flex-direction:column}
  .mnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:0 20px;border-bottom:1px solid var(--gray-200);font-size:17px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
  .mnav-row svg{flex-shrink:0;color:var(--ink-600)}
  .mnav-chev{transition:transform 160ms ease}
  .mnav-row[aria-expanded="true"] .mnav-chev{transform:rotate(180deg)}
  .mnav-sub{display:none;background:#FCFBF9;border-bottom:1px solid var(--gray-200);padding-bottom:10px}
  .mnav-sub.is-open{display:block}
  .mnav-sub-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:14px 20px 4px}
  .mnav-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;font-size:15px;font-weight:500;color:var(--ink)}
  .mnav-link:hover{color:var(--ink)}
  .mnav-ico{display:flex;color:var(--ink-600)}
  .mnav-arrow{padding:6px 20px 0}
  .mnav-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:16px 20px 24px;border-top:1px solid var(--gray-200)}
  .mnav-cta{font-size:16px}
    .mnav.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}

}
  /* faq */
  .faq-item { border-bottom: 1px solid var(--gray-200); }
  .faq-item:first-child { border-top: 1px solid var(--gray-200); }
  .faq-q { width: 100%; background: transparent; border: none; text-align: left; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); min-height: 44px; }
  .faq-q-text { font-size: 17px; font-weight: 600; }
  .faq-icon { flex-shrink: 0; transition: transform .2s ease; }
  .faq-icon-open { transform: rotate(45deg); }
  .faq-a { padding: 0 0 22px; margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-600); max-width: 720px; animation: popin .25s ease both; }

  .cta-sec { position: relative; overflow: hidden; background: var(--paper); padding: var(--section-gap) 0 96px; }
  .motif-enso { position: absolute; right: -140px; top: -60px; width: 520px; height: auto; opacity: .9; pointer-events: none; animation: spin 120s linear infinite; }
  .motif-bamboo { position: absolute; right: -20px; bottom: -180px; width: 300px; height: auto; opacity: .85; pointer-events: none; }
  .cta-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .cta-monk { width: 260px; height: auto; animation: float 6s ease-in-out infinite; }
  .cta-h { font-size: 52px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 0; }
  .btn-lg { min-height: 52px; padding: 13px 30px; font-size: 17px; }
  @media (max-width: 900px) { .motif-enso { width: 360px; right: -120px; opacity: .6; } .motif-bamboo { width: 200px; bottom: -100px; opacity: .6; } }
  @media (max-width: 640px) { .cta-h { font-size: 32px; line-height: 40px; } .cta-monk { width: 190px; } }
  .drift { animation: drift 12s ease-in-out infinite; }

  .site-footer { border-top: 1px solid var(--gray-200); position: relative; z-index: 1; background: var(--paper); }
  .foot-grid { padding: 56px 0 40px; display: grid; grid-template-columns: 320px repeat(4, minmax(0, 1fr)); gap: 40px; }
  .foot-brand { display: flex; flex-direction: column; gap: 12px; }
  .foot-brand img { height: 32px; width: auto; align-self: flex-start; }
  .foot-tag { font-size: 14px; color: var(--ink-600); }
  .foot-h { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
  .foot-link { display: block; font-size: 14px; color: var(--ink-600); line-height: 26px; }
  .foot-link:hover { color: var(--ink); }
  .foot-bottom { display: flex; justify-content: space-between; padding: 0 0 32px; font-size: 12px; color: var(--ink-500); gap: 16px; flex-wrap: wrap; }
  .foot-legal { display: flex; gap: 20px; }
  .foot-legal .foot-link { font-size: 12px; line-height: 16px; }
  @media (max-width: 1100px) { .foot-grid { grid-template-columns: 240px repeat(4, minmax(0, 1fr)); gap: 24px; } }
  @media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 40px 0 28px; } .foot-brand { grid-column: 1 / -1; } .foot-bottom { padding: 0 0 28px; flex-direction: column; gap: 10px; } }
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rv{transition-delay:var(--d,0ms)}

/* ===================== All features (MKT-1948): hub (C · Stepping stones) + feature subpage ===================== */
.sec-head{display:flex;flex-direction:column;gap:12px;max-width:720px;margin-bottom:40px}
.sec-head .h2{margin:0}
.sec-head .eyebrow{margin:0}
.cta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:28px}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--gray-100);color:var(--ink-600);font-size:14px;font-weight:500}
a.tag:hover{background:var(--orange-100);color:var(--orange)}

/* hero */
.hero{position:relative;overflow:hidden;padding:56px 0 24px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.hero-copy .h1{margin-bottom:18px}
.hero-mist{left:0;right:0;bottom:-40px;width:100%;max-width:none;opacity:.28}
.hero-art{position:relative;min-height:420px}
.hero-stones{position:absolute;right:-40px;top:20px;width:640px;max-width:none;opacity:.92}
.hero-monk{position:absolute;right:190px;top:-10px;width:250px;animation:float 6s ease-in-out infinite}
.finder{position:relative;display:flex;align-items:center;gap:12px;max-width:560px;height:60px;padding:0 16px 0 18px;margin:28px 0 14px;background:var(--white);border:1px solid var(--gray-200);border-radius:16px;box-shadow:0 4px 16px rgba(16,24,40,.06)}
.finder:focus-within{border-color:var(--ink-400)}
.finder-ico{color:var(--ink-400);flex-shrink:0}
.finder input,.ix-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--ink)}
.finder-kbd{font-family:var(--mono);font-size:12px;color:var(--ink-500);border:1px solid var(--gray-200);border-radius:6px;padding:2px 6px}
.hero .muted a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* the path */
.path-sec{padding-top:56px}
.path{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.path-line{position:absolute;left:0;top:14px;width:100%;height:90px;overflow:visible;clip-path:inset(0 100% 0 0);transition:clip-path 2.2s cubic-bezier(.45,.05,.35,1) .2s}
.path-line path{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:6 8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.path.in .path-line{clip-path:inset(0 0 0 0)}
.stop{position:relative;display:flex;flex-direction:column;gap:12px}
.stop-1{padding-top:40px}.stop-2{padding-top:0}.stop-3{padding-top:56px}.stop-4{padding-top:12px}.stop-5{padding-top:30px}
.stone{width:64px;height:64px;border-radius:50%;background:var(--white);border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;color:var(--orange);box-shadow:0 10px 24px -12px rgba(35,38,42,.35);transition:transform .2s ease,background .2s ease,color .2s ease}
.stone:hover{transform:translateY(-3px);background:var(--orange);color:#fff}
.stop-1 .stone{background:var(--orange);border-color:var(--orange);color:#fff}
.stop.rv{transform:translateY(40px) scale(.96)}
.stop.rv.in{transform:none}
.stop-step{font-family:var(--mono);font-size:12px;color:var(--ink-500)}
.stop-name{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em;margin:0}
.stop-line{font-size:15px;line-height:23px;color:var(--ink-600);margin:0}
.stop-fams{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.stop-fam{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 12px;background:var(--white);border:1px solid var(--gray-200);border-radius:10px;font-size:14px;font-weight:500;color:var(--ink);transition:border-color .15s ease,transform .15s ease}
.stop-fam svg{color:var(--ink-400);flex-shrink:0}
a.stop-fam:hover{border-color:var(--orange-200);color:var(--ink);transform:translateX(2px)}
a.stop-fam:hover svg{color:var(--orange)}
.stop-all{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 4px;font-size:14px;font-weight:600;color:var(--orange)}
.stop-all svg{transition:transform .15s ease}.stop-all:hover svg{transform:translateX(3px)}
.tag-all{gap:6px;background:transparent;color:var(--orange);font-weight:600}
.base{position:relative;overflow:hidden;margin-top:64px;padding:28px 32px;border-radius:20px;background:var(--white);border:1px solid var(--gray-200);display:flex;align-items:center;gap:24px}
.base-mist{right:0;bottom:0;width:420px;opacity:.35}
.base-ico{width:44px;height:44px;border-radius:12px;background:var(--orange-100);color:var(--orange);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.base-copy{flex:1;position:relative}
.base-kicker{font-family:var(--mono);font-size:12px;color:var(--ink-500)}
.base-name{font-size:22px;font-weight:700;margin:2px 0}
.base-line{margin:0;font-size:15px;color:var(--ink-600)}
.base-tags{display:flex;gap:8px;flex-wrap:wrap;position:relative}

/* all features: filter sidebar + card grid (the old /features layout) */
/* .section clips with overflow:hidden, which makes it the sticky sidebar's scroll box; clip without that */
#all{overflow:visible;overflow-x:clip}
.ix{display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start}
.ix-side{position:sticky;top:calc(var(--header-h,72px) + 24px);padding:24px;background:var(--white);border:1px solid var(--gray-200);border-radius:20px;box-shadow:var(--shadow)}
.ix-search{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;background:var(--paper);border:1px solid var(--gray-200);border-radius:14px}
.ix-search:focus-within{border-color:var(--ink-400);background:var(--white)}
.ix-search input{font-size:16px}
.flts{border:0;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--gray-200);display:flex;flex-direction:column;gap:2px}
.flts-h{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:0 0 10px}
.flt{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-size:16px;color:var(--ink)}
.flt input{position:absolute;opacity:0;width:1px;height:1px}
.flt-box{width:22px;height:22px;border:1.5px solid var(--gray-300);border-radius:6px;display:flex;align-items:center;justify-content:center;color:transparent;flex-shrink:0;transition:background .15s ease,border-color .15s ease}
.flt input:checked + .flt-box{background:var(--orange);border-color:var(--orange);color:#fff}
.flt input:focus-visible + .flt-box{outline:2px solid var(--orange);outline-offset:2px}
.flt:hover .flt-box{border-color:var(--ink-400)}
.flt-name{flex:1}
.flt-n{font-size:14px;color:var(--ink-500);font-variant-numeric:tabular-nums}
.flt-clear{margin-top:10px;min-height:44px;padding:0;border:0;background:none;font-size:14px;font-weight:600;color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.ix-count{font-size:18px;color:var(--ink-600);margin:0 0 20px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--gray-200);border-radius:20px;overflow:hidden;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;animation:popin .35s ease both}
.fcard:hover{border-color:var(--orange-200);box-shadow:var(--shadow-md);color:var(--ink);transform:translateY(-3px)}
.fcard[hidden]{display:none}
.fcard-media{position:relative;display:block;aspect-ratio:16/9;background:#FDF1EB;overflow:hidden}
.fcard-media>img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fcard:hover .fcard-media>img{transform:scale(1.03)}
.fcard-new{position:absolute;left:14px;top:14px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--orange);border-radius:var(--r-pill);padding:4px 10px}
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 20% 0%,#FFF6F1 0%,#FCE6DB 60%,#F9DCCD 100%)}
.ph-enso{position:absolute;width:62%;opacity:.16;animation:spin 120s linear infinite}
.ph-ico{position:relative;width:76px;height:76px;border-radius:50%;background:rgba(237,90,41,.12);color:var(--orange);display:flex;align-items:center;justify-content:center;transition:transform .3s ease}
.fcard:hover .ph-ico{transform:scale(1.06)}
.ph-formats{background:radial-gradient(120% 90% at 80% 0%,#FFF6F1 0%,#FCE6DB 60%,#F9DCCD 100%)}
.ph-target{background:radial-gradient(120% 90% at 50% 100%,#FFF6F1 0%,#FCE6DB 60%,#F9DCCD 100%)}
.ph-ecom{background:radial-gradient(120% 90% at 0% 100%,#FFF6F1 0%,#FCE6DB 60%,#F9DCCD 100%)}
.ph-optimize{background:radial-gradient(120% 90% at 100% 100%,#FFF6F1 0%,#FCE6DB 60%,#F9DCCD 100%)}
.ph-trust{background:radial-gradient(120% 90% at 50% 0%,#FFF6F1 0%,#FCE6DB 60%,#F9DCCD 100%)}
.fcard-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;flex:1}
.fcard-tag{font-family:var(--mono);font-size:12px;color:var(--ink-500)}
.fcard-name{font-size:21px;line-height:27px;font-weight:700;letter-spacing:-.01em}
.fcard-desc{font-size:15.5px;line-height:24px;color:var(--ink-600)}
.fcard-more{margin-top:auto;padding-top:10px;align-self:flex-end;display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--orange)}
.fcard-more svg{transition:transform .15s ease}
.fcard:hover .fcard-more svg{transform:translateX(3px)}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fam{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-card);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.band .fam{background:var(--paper)}
a.fam:hover{border-color:var(--orange-200);box-shadow:var(--shadow-md);color:var(--ink);transform:translateY(-2px)}
.fam.is-out{display:none}
.fam-top{display:flex;align-items:center;gap:8px}
.fam-name{font-size:18px;font-weight:700;flex:1}
.fam-arrow{color:var(--orange);flex-shrink:0;transition:transform .15s ease}
a.fam:hover .fam-arrow{transform:translateX(3px)}
.fam-badge{font-size:12px;font-weight:600;color:var(--orange);background:var(--orange-100);border-radius:var(--r-pill);padding:3px 9px}
.fam-kicker{font-family:var(--mono);font-size:12px;color:var(--ink-500)}
.fam-line{font-size:14px;line-height:21px;color:var(--ink-600)}
.fam-members{display:flex;flex-wrap:wrap;gap:6px}
.fm{font-size:13px;line-height:18px;color:var(--ink-600);background:var(--gray-100);border-radius:var(--r-pill);padding:3px 9px}
.fm.is-hit{background:var(--orange-100);color:var(--orange)}
.ix-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:40px;border:1px dashed var(--gray-300);border-radius:var(--r-card)}
.ix-empty[hidden]{display:none}
.ix-empty-h{font-size:22px;font-weight:700;margin:0}
.faq-wrap{display:grid;grid-template-columns:360px minmax(0,1fr);gap:80px}
.faq-a a{color:var(--orange);text-decoration:underline}

/* subpage */
.sub-hero{padding-top:40px}
.sub-enso{right:40px;top:40px;width:560px;opacity:.2;animation:spin 120s linear infinite}
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--ink-600);margin-bottom:20px}
.crumbs a{color:var(--ink-600)}.crumbs a:hover{color:var(--ink)}
.crumbs svg{color:var(--ink-400)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:var(--ink-600);margin-bottom:6px}
.back:hover{color:var(--ink)}
.back-ico{transform:rotate(180deg);transition:transform .15s ease}
.back:hover .back-ico{transform:rotate(180deg) translateX(3px)}
.hero-media{position:relative}
.fmedia{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--gray-200);box-shadow:var(--shadow-lg);background:#FDF1EB}
.fmedia img{width:100%;height:100%;object-fit:cover}
/* exit-intent demo: one 7s loop — cursor drifts up, the exit zone lights, the popup lands */
.xdemo{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--white);border:1px solid var(--gray-200);box-shadow:var(--shadow-lg)}
.xd-bar{height:40px;display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--gray-100);border-bottom:1px solid var(--gray-200)}
.xd-dots{display:flex;gap:6px}.xd-dots i{width:10px;height:10px;border-radius:50%;background:var(--gray-300)}
.xd-url{flex:1;height:24px;border-radius:7px;background:var(--white);font-family:var(--mono);font-size:12px;color:var(--ink-500);display:flex;align-items:center;padding:0 10px}
.xd-zone{position:absolute;left:0;right:0;top:40px;height:26px;border:2px dashed transparent;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:transparent;animation:xzone 7s ease-in-out infinite}
.xd-page{padding:34px 28px;display:flex;flex-direction:column;gap:12px}
.xd-row{height:12px;border-radius:6px;background:var(--gray-100)}
.xd-w60{width:60%;height:18px;background:#E9EAED}.xd-w40{width:40%}.xd-w70{width:70%}.xd-w50{width:50%}
.xd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0}
.xd-grid i{aspect-ratio:1;border-radius:10px;background:#F4EEE8}
.xd-shade{position:absolute;inset:40px 0 0;background:rgba(35,38,42,.38);opacity:0;animation:xshade 7s ease-in-out infinite}
.xd-pop{position:absolute;left:50%;top:54%;width:62%;transform:translate(-50%,-40%) scale(.94);opacity:0;padding:24px;border-radius:16px;background:var(--white);box-shadow:var(--shadow-lg);text-align:center;display:flex;flex-direction:column;gap:10px;animation:xpop 7s cubic-bezier(.2,.7,.2,1) infinite}
.xd-pop-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.xd-pop-h{font-size:20px;line-height:26px;font-weight:700}
.xd-pop-code{align-self:center;font-family:var(--mono);font-size:14px;letter-spacing:.1em;padding:6px 14px;border:1.5px dashed var(--orange);border-radius:8px;color:var(--orange)}
.xd-pop-btn{height:40px;border-radius:9px;background:var(--orange);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}
.xd-cursor{position:absolute;left:62%;top:78%;animation:xcur 7s cubic-bezier(.45,.05,.35,1) infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
@keyframes xcur{0%{left:62%;top:78%}12%{left:62%;top:78%}38%{left:48%;top:9.5%}78%{left:48%;top:9.5%;opacity:1}86%{opacity:0}94%{left:62%;top:78%;opacity:0}100%{left:62%;top:78%;opacity:1}}
@keyframes xzone{0%,34%{border-color:transparent;color:transparent;background:transparent}40%,80%{border-color:var(--orange);color:var(--orange);background:rgba(237,90,41,.08)}88%,100%{border-color:transparent;color:transparent;background:transparent}}
@keyframes xshade{0%,40%{opacity:0}46%,82%{opacity:1}90%,100%{opacity:0}}
@keyframes xpop{0%,41%{opacity:0;transform:translate(-50%,-40%) scale(.94)}48%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}90%,100%{opacity:0;transform:translate(-50%,-50%) scale(.98)}}
.ov{display:grid;grid-template-columns:360px minmax(0,1fr);gap:80px;align-items:start}
.ov-head{position:sticky;top:calc(var(--header-h,72px) + 32px)}
.ov-head .h2{margin:0}
.ov-body{max-width:720px}
.ov-body p{font-size:18px;line-height:30px;color:var(--ink-600);margin:0 0 20px}
.ov-body p:first-child{font-size:21px;line-height:32px;color:var(--ink)}
#overview{overflow:visible;overflow-x:clip}
.bens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ben{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--paper);border:1px solid var(--gray-200);border-radius:20px}
.ben-n{font-family:var(--mono);font-size:13px;color:var(--orange)}
.ben-h{font-size:20px;line-height:27px;font-weight:700;margin:0}
.ben-p{font-size:15.5px;line-height:25px;color:var(--ink-600);margin:0}
.hw-mist{left:0;right:0;bottom:0;width:100%;max-width:none;opacity:.22}
.hw-wrap{display:grid;grid-template-columns:360px minmax(0,1fr);gap:80px;align-items:start}
.hw{position:relative;list-style:none;margin:0;padding:0 0 0 88px;display:flex;flex-direction:column;gap:48px}
.hw::before{content:"";position:absolute;left:31px;top:32px;bottom:32px;border-left:2px dashed var(--orange);transform:scaleY(0);transform-origin:top;transition:transform 1.8s cubic-bezier(.45,.05,.35,1) .2s}
.hw.in::before{transform:none}
.hw-step{position:relative}
.hw-stone{position:absolute;left:-88px;top:0;width:64px;height:64px;border-radius:50%;background:var(--white);border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--orange);box-shadow:0 10px 24px -12px rgba(35,38,42,.35)}
.hw-step:first-child .hw-stone{background:var(--orange);border-color:var(--orange);color:#fff}
.hw-step.rv{transform:translateY(30px) scale(.97)}.hw-step.rv.in{transform:none}
.hw-k{font-family:var(--mono);font-size:12px;color:var(--ink-500);margin-bottom:6px}
.hw-h{font-size:22px;line-height:29px;font-weight:700;margin:0 0 8px}
.hw-p{font-size:16px;line-height:26px;color:var(--ink-600);margin:0}
.rel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){.path-line{clip-path:none;transition:none}.hero-monk,.sub-enso,.ph-enso{animation:none}.hw::before{transform:none;transition:none}
  .xd-cursor,.xd-zone,.xd-shade,.xd-pop{animation:none}.xd-cursor{left:48%;top:9.5%}.xd-shade{opacity:1}.xd-pop{opacity:1;transform:translate(-50%,-50%)}.xd-zone{border-color:var(--orange);color:var(--orange)}}

/* responsive */
@media (max-width:1100px){
  .hero-stones{width:520px;right:-80px}.hero-monk{right:130px;width:200px}
  .path{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px}
  .path-line{display:none}
  .stop{padding-top:0!important}
  .bens{grid-template-columns:minmax(0,1fr)}
  .ov,.hw-wrap{grid-template-columns:minmax(0,1fr);gap:24px}
  .ov-head{position:static}
  .faq-wrap{grid-template-columns:minmax(0,1fr);gap:24px}
  .ix{grid-template-columns:260px minmax(0,1fr);gap:32px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* copy and search first; the art follows, sized by the stones image so the monk sits on the big stone */
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .hero-art{min-height:0;width:100%;max-width:420px;aspect-ratio:815/544;margin:24px auto 0}
  .hero-stones{position:absolute;inset:0;right:auto;top:auto;width:100%;height:auto}
  .hero-monk{right:auto;left:24%;top:12%;width:30%}
  .sub-hero .hero-art{aspect-ratio:auto}
  .sub-hero .hero-grid{gap:32px}
  /* the sidebar turns into a sticky bar: search on top, areas as a scrolling row of chips */
  .ix{display:block}
  .ix-side{position:sticky;top:var(--header-h,64px);z-index:5;margin:0 -20px 20px;padding:12px 20px;border-radius:0;border-width:0 0 1px;box-shadow:none}
  .ix-search{height:46px}
  .flts{flex-direction:row;overflow-x:auto;gap:8px;margin:10px -20px 0;padding:0 20px;border-top:0;scrollbar-width:none}
  .flts::-webkit-scrollbar{display:none}
  .flts-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .flt{flex-shrink:0;min-height:40px;padding:0 14px;gap:8px;border:1px solid var(--gray-200);border-radius:var(--r-pill);font-size:14px;white-space:nowrap}
  .flt-box{display:none}
  .flt:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
  .flt:has(input:checked) .flt-n{color:#C5C9D0}
  .flt:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
  .flt-clear{display:none}
  .base{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .hero{padding-top:24px;padding-bottom:0}
  .hero-art{max-width:320px}
  /* the path turns vertical: one dashed line beside the stones, drawn top to bottom */
  .path{grid-template-columns:minmax(0,1fr);row-gap:36px;padding-left:40px}
  .path::before{content:"";position:absolute;left:23px;top:32px;bottom:32px;border-left:2px dashed var(--orange);transform:scaleY(0);transform-origin:top;transition:transform 2s cubic-bezier(.45,.05,.35,1) .2s}
  .path.in::before{transform:none}
  .stone{position:absolute;left:-40px;top:0;width:48px;height:48px}
  .stone svg{width:20px;height:20px}
  .stop{padding-left:20px;padding-top:4px!important}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .hw{padding-left:68px}
  .hw::before{left:23px}
  .hw-stone{left:-68px;width:48px;height:48px;font-size:18px}
  .xd-pop{width:78%;padding:18px}
  .xd-pop-h{font-size:17px;line-height:22px}
  .finder{height:56px}
  .finder-kbd{display:none}
}
@media (max-width:640px) and (prefers-reduced-motion: reduce){.path::before{transform:none;transition:none}}

/* ===== feature hero illustrations (MKT-1948): six reusable mock types ===== */
.il{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--white);border:1px solid var(--gray-200);box-shadow:var(--shadow-lg)}
.il-bar{height:40px;display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--gray-100);border-bottom:1px solid var(--gray-200)}
.il-page{padding:34px 28px;display:flex;flex-direction:column;gap:12px}
.il-shade{position:absolute;inset:40px 0 0;background:rgba(35,38,42,.38);opacity:0;animation:ilshade 7s ease-in-out infinite}
.il-shade-on{animation:none;opacity:1}
.il-pop{position:absolute;left:50%;top:56%;width:58%;transform:translate(-50%,-40%) scale(.94);opacity:0;padding:22px;border-radius:16px;background:var(--white);box-shadow:var(--shadow-lg);text-align:center;display:flex;flex-direction:column;gap:10px;animation:ilpop 7s cubic-bezier(.2,.7,.2,1) infinite}
.il-pk{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.il-ph{font-size:19px;line-height:25px;font-weight:700}
.il-pbtn{height:40px;border-radius:9px;background:var(--orange);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}
.il-sig{position:absolute;right:16px;top:54px;padding:6px 10px;border-radius:999px;background:var(--orange-100);color:var(--orange);font-size:12px;font-weight:600;opacity:0;animation:ilsig 7s ease-in-out infinite}
@keyframes ilshade{0%,40%{opacity:0}46%,84%{opacity:1}92%,100%{opacity:0}}
@keyframes ilpop{0%,41%{opacity:0;transform:translate(-50%,-40%) scale(.94)}48%,84%{opacity:1;transform:translate(-50%,-50%) scale(1)}92%,100%{opacity:0;transform:translate(-50%,-50%) scale(.98)}}
@keyframes ilsig{0%,30%{opacity:0;transform:translateY(-4px)}36%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
/* trigger: scroll */
.il-scroll{position:absolute;right:8px;top:48px;bottom:8px;width:6px;border-radius:3px;background:var(--gray-100)}
.il-scroll i{position:absolute;left:0;right:0;top:0;height:0;border-radius:3px;background:var(--orange);animation:ilscroll 7s ease-in-out infinite}
.il-scroll ~ .il-sig{right:24px}
.il-scroll-page{animation:ilpage 7s ease-in-out infinite}
@keyframes ilscroll{0%,6%{height:0}36%,86%{height:50%}96%,100%{height:0}}
/* rule card */
.il-rule{display:flex;align-items:center;justify-content:center;background:var(--paper)}
.il-panel{width:82%;display:flex;flex-direction:column;gap:12px}
.il-ptitle{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.il-rcard{padding:18px;border-radius:14px;background:var(--white);border:1px solid var(--gray-200);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;animation:ilcard 7s cubic-bezier(.2,.7,.2,1) infinite}
.il-rhead{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700}
.il-rdot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.il-rrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:34px}
.il-rlabel{font-size:14px;color:var(--ink-600)}
.il-chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;background:var(--orange-100);color:var(--orange);font-size:14px;font-weight:600;opacity:0;animation:ilchip 7s ease-out infinite;animation-delay:calc(var(--i,0) * .35s + var(--j,0) * .25s)}
.il-rnote{font-size:13px;color:var(--ink-500);padding-left:2px}
.il-save{align-self:flex-end;height:36px;padding:0 14px;border-radius:9px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center}
@keyframes ilcard{0%{opacity:0;transform:translateY(12px)}10%,100%{opacity:1;transform:none}}
@keyframes ilchip{0%,12%{opacity:0;transform:scale(.9)}20%,90%{opacity:1;transform:none}100%{opacity:0}}
/* popup: wheel */
.il-pop-wide{width:78%;flex-direction:row;align-items:center;gap:18px;text-align:left;animation:none;opacity:1;transform:translate(-50%,-50%)}
.il-wtext{display:flex;flex-direction:column;gap:10px;flex:1}
.il-wheel{position:relative;width:44%;aspect-ratio:1;flex-shrink:0}
.il-wheel-disc{position:absolute;inset:0;border-radius:50%;border:4px solid var(--white);box-shadow:0 0 0 2px var(--orange-200);background:conic-gradient(var(--orange) 0 45deg,#FCE3D8 45deg 90deg,#F7B59F 90deg 135deg,#FFF6F1 135deg 180deg,var(--orange) 180deg 225deg,#FCE3D8 225deg 270deg,#F7B59F 270deg 315deg,#FFF6F1 315deg 360deg);animation:ilspin 7s cubic-bezier(.2,.7,.1,1) infinite}
.il-wheel-pin{position:absolute;left:50%;top:-6px;width:0;height:0;margin-left:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:14px solid var(--ink)}
@keyframes ilspin{0%,10%{transform:rotate(0)}70%,100%{transform:rotate(1125deg)}}
/* chat */
.il-chatwrap{display:flex;background:var(--paper)}
.il-chat{margin:auto;width:86%;display:flex;flex-direction:column;gap:12px}
.il-ask{align-self:flex-end;max-width:80%;padding:10px 14px;border-radius:14px 14px 4px 14px;background:var(--ink);color:#fff;font-size:14px;line-height:20px;animation:ilin 7s ease-out infinite}
.il-reply{align-self:flex-start;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px 14px 14px 4px;background:var(--white);border:1px solid var(--gray-200);font-size:14px;color:var(--ink-600)}
.il-typing{display:inline-flex;gap:3px}.il-typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-400);animation:iltype 1.2s ease-in-out infinite}.il-typing i:nth-child(2){animation-delay:.15s}.il-typing i:nth-child(3){animation-delay:.3s}
.il-concepts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.il-concept{position:relative;aspect-ratio:3/4;border-radius:10px;background:var(--white);border:1px solid var(--gray-200);padding:6px;opacity:0;animation:ilconcept 7s ease-out infinite;animation-delay:calc(var(--i) * .3s)}
.il-concept i{display:block;height:100%;border-radius:6px}
.il-concept:first-child{border:2px solid var(--orange)}
.il-letter{position:absolute;left:10px;top:10px;width:20px;height:20px;border-radius:6px;background:var(--white);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
@keyframes ilin{0%{opacity:0;transform:translateY(6px)}8%,100%{opacity:1;transform:none}}
@keyframes iltype{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes ilconcept{0%,22%{opacity:0;transform:translateY(8px)}32%,92%{opacity:1;transform:none}100%{opacity:0}}
/* dashboard */
.il-abwrap{display:flex;background:var(--paper)}
.il-dash{margin:auto;width:86%;padding:20px;border-radius:14px;background:var(--white);border:1px solid var(--gray-200);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.il-dtitle{font-size:16px;font-weight:700}
.il-abrow{display:grid;grid-template-columns:130px minmax(0,1fr) auto;align-items:center;gap:10px}
.il-ablabel{font-size:13px;color:var(--ink-600)}
.il-abbar{height:14px;border-radius:7px;background:var(--gray-100);overflow:hidden}
.il-abbar i{display:block;height:100%;width:0;border-radius:7px;background:#D9DCE1;animation:ilbar 7s cubic-bezier(.2,.7,.2,1) infinite}
.il-win i{background:var(--orange)}.il-muted i{background:var(--gray-300)}
.il-badge{font-size:12px;font-weight:700;color:var(--orange);background:var(--orange-100);border-radius:999px;padding:3px 9px;opacity:0;animation:ilsig 7s ease-in-out infinite}
.il-dfoot{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-500);border-top:1px solid var(--gray-200);padding-top:10px}
.il-uplift{color:var(--orange);font-weight:600}
@keyframes ilbar{0%,8%{width:0}40%,90%{width:var(--w)}100%{width:0}}
/* alerts */
.il-alertwrap{display:flex;background:var(--paper)}
.il-camp{margin:auto;width:86%;display:flex;flex-direction:column;gap:10px}
.il-chead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:12px;background:var(--white);border:1px solid var(--gray-200)}
.il-cname{font-size:16px;font-weight:700}
.il-active{font-size:12px;font-weight:700;color:var(--green-ink);background:var(--green-100);border-radius:999px;padding:4px 10px}
.il-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:13px;line-height:19px;opacity:0;animation:ilalert 7s ease-out infinite}
.il-alert.il-amber{animation-delay:.5s}
.il-red{background:#FDECEC;color:#8A1F1F}.il-amber{background:#FFF4E0;color:#7A4A00}
.il-adot{width:8px;height:8px;margin-top:6px;border-radius:50%;flex-shrink:0;background:currentColor}
.il-fix{align-self:flex-start;font-size:14px;font-weight:600;color:var(--orange);opacity:0;animation:ilalert 7s ease-out infinite;animation-delay:1s}
@keyframes ilalert{0%,10%{opacity:0;transform:translateY(6px)}18%,92%{opacity:1;transform:none}100%{opacity:0}}
@media (max-width:640px){.il{aspect-ratio:auto;min-height:300px}.il-pop{width:78%;padding:16px}.il-ph{font-size:16px;line-height:21px}.il-pop-wide{width:90%}.il-abrow{grid-template-columns:96px minmax(0,1fr) auto}}
@media (prefers-reduced-motion: reduce){.il *,.il{animation:none!important}.il-pop,.il-chip,.il-concept,.il-alert,.il-fix,.il-sig,.il-badge{opacity:1}.il-pop{transform:translate(-50%,-50%)}.il-shade{opacity:1}.il-abbar i{width:var(--w)}.il-scroll i{height:50%}}

/* ----- more types (rollout) ----- */
.il-pop-still{animation:none;opacity:1;transform:translate(-50%,-50%)}
.il-sig-on{animation:none;opacity:1}
.il-shade-on{animation:none;opacity:1}
.il-sig-l{left:16px;right:auto;top:16px}
.il-field{height:38px;border-radius:9px;border:1px solid var(--gray-300);background:var(--paper)}
/* trigger: time, click, idle, js */
.il-timer{position:absolute;right:18px;top:56px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.il-timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
.il-timer circle{fill:none;stroke:var(--orange);stroke-width:3;stroke-dasharray:95;stroke-dashoffset:95;animation:iltime 7s linear infinite}
.il-timer b{font-size:15px;color:var(--ink)}
.il--time .il-sig{top:108px}
@keyframes iltime{0%{stroke-dashoffset:95}40%,100%{stroke-dashoffset:0}}
.il-cta{position:absolute;left:28px;bottom:26px;height:34px;padding:0 14px;border-radius:9px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;animation:ilpress 7s ease-in-out infinite}
.il-cursor{position:absolute;left:70%;top:80%;animation:ilclick 7s cubic-bezier(.45,.05,.35,1) infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
@keyframes ilclick{0%,10%{left:70%;top:80%}34%,90%{left:24%;top:86%}100%{left:70%;top:80%}}
@keyframes ilpress{0%,36%,44%,100%{transform:none}40%{transform:scale(.94)}}
.il-idle{position:absolute;right:24px;top:62px;display:flex;gap:4px;font-weight:700;color:var(--ink-400)}
.il-idle span{animation:ilzz 7s ease-in-out infinite;opacity:0}.il-idle span:nth-child(2){animation-delay:.3s}.il-idle span:nth-child(3){animation-delay:.6s}
.il--idle .il-sig{top:96px}
@keyframes ilzz{0%,6%{opacity:0;transform:translateY(4px)}14%,40%{opacity:1;transform:none}46%,100%{opacity:0}}
.il-code{position:absolute;left:18px;right:18px;bottom:18px;padding:10px 12px;border-radius:10px;background:var(--dark);color:#E6E7EA;font-family:var(--mono);font-size:12px;opacity:0;animation:ilsig 7s ease-in-out infinite}
.il-code em{color:#F7B59F;font-style:normal}
/* phone */
.il--phonewrap{display:flex;align-items:center;justify-content:center;background:var(--paper)}
.il-phone{position:relative;height:88%;aspect-ratio:9/18;border-radius:28px;background:var(--white);border:6px solid var(--ink);overflow:hidden}
.il-notch{position:absolute;left:50%;top:6px;width:30%;height:10px;margin-left:-15%;border-radius:6px;background:var(--ink);z-index:2}
.il-ppage{padding:28px 14px;display:flex;flex-direction:column;gap:9px}
.il-pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.il-pgrid i{aspect-ratio:1;border-radius:8px;background:#F4EEE8}
.il-mshade{position:absolute;inset:0;background:rgba(35,38,42,.38);opacity:0;animation:ilshade 7s ease-in-out infinite}
.il-mpop{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-40%);opacity:0;padding:16px;border-radius:14px;background:var(--white);text-align:center;display:flex;flex-direction:column;gap:8px;animation:ilmpop 7s cubic-bezier(.2,.7,.2,1) infinite}
.il-mpop .il-ph{font-size:15px;line-height:20px}.il-mpop .il-pbtn{height:32px;font-size:12px}
@keyframes ilmpop{0%,41%{opacity:0;transform:translateY(-40%)}48%,84%{opacity:1;transform:translateY(-50%)}92%,100%{opacity:0}}
.il-mload{position:absolute;left:12%;right:12%;bottom:18%;display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--ink-600);text-align:center}
.il-mload i{height:6px;border-radius:3px;background:var(--gray-100);position:relative;overflow:hidden}
.il-mload i::after{content:"";position:absolute;inset:0;width:0;background:var(--orange);animation:ilload 7s ease-in-out infinite}
@keyframes ilload{0%,6%{width:0}40%,90%{width:100%}100%{width:0}}
/* code block */
.il--code{display:flex;background:var(--paper)}
.il-codebox{margin:auto;width:86%;border-radius:14px;background:var(--dark);box-shadow:var(--shadow-lg);overflow:hidden}
.il-codelabel{padding:10px 16px;font-size:12px;color:#C5C9D0;border-bottom:1px solid var(--dark-border)}
.il-codein{padding:16px;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:13px;color:#E6E7EA}
.il-cl{opacity:0;animation:ilchip 7s ease-out infinite;animation-delay:calc(var(--i) * .4s)}
/* products */
.il-pop-prods{width:74%}
.il-prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.il-prod{display:flex;flex-direction:column;gap:5px;padding:6px;border-radius:10px;border:1px solid var(--gray-200);opacity:0;animation:ilchip 7s ease-out infinite;animation-delay:calc(var(--i) * .3s)}
.il-prod i{aspect-ratio:1;border-radius:7px}.il-pname{height:6px;width:70%;border-radius:3px;background:#D9DCE1}.il-pprice{font-size:12px;font-weight:700;text-align:left}
/* dashboard tiles */
.il-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.il-tile{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid var(--gray-200);opacity:0;animation:ilchip 7s ease-out infinite;animation-delay:calc(var(--i) * .2s)}
.il-tile span{font-size:11px;color:var(--ink-500)}.il-tile b{font-size:18px}
.il-tile i{height:4px;border-radius:2px;background:var(--orange-100);position:relative}
.il-tile i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:2px;background:var(--orange)}
.il-chart svg{width:100%;height:56px}.il-chart path{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-dasharray:420;stroke-dashoffset:420;animation:ildraw 7s ease-out infinite}
@keyframes ildraw{0%,10%{stroke-dashoffset:420}50%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:420}}
/* uptime */
.il-srow{display:grid;grid-template-columns:120px minmax(0,1fr) 48px;align-items:center;gap:10px}
.il-sname{font-size:13px;color:var(--ink-600)}.il-sval{font-size:13px;font-weight:700;text-align:right}
.il-sbar{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px}
.il-sbar i{height:18px;border-radius:2px;background:#9ED3AE;opacity:0;animation:ilchip 7s ease-out infinite;animation-delay:calc(var(--i) * .3s)}
.il-sbar i.il-sdip{background:#F2C46B}
/* map */
.il--map{background:var(--paper)}
.il-map{position:absolute;inset:0}
.il-land{position:absolute;inset:18% 10%;border-radius:40% 55% 45% 50%;background:radial-gradient(circle at 30% 40%,#EDE6DD 0 30%,transparent 31%),radial-gradient(circle at 70% 55%,#EDE6DD 0 28%,transparent 29%),radial-gradient(circle at 50% 30%,#EDE6DD 0 18%,transparent 19%)}
.il-edge{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--orange-200);box-shadow:0 0 0 4px rgba(237,90,41,.08)}
.il-edge:nth-of-type(4){background:var(--orange);animation:ilpulse 2s ease-in-out infinite}
.il-visitor{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink)}
.il-maplabel{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--white);border:1px solid var(--gray-200);font-size:12px;font-weight:600;color:var(--ink-600)}
@keyframes ilpulse{0%,100%{box-shadow:0 0 0 4px rgba(237,90,41,.12)}50%{box-shadow:0 0 0 14px rgba(237,90,41,0)}}
/* timeline */
.il-trow{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px}
.il-tl{font-size:13px;color:var(--ink-600)}
.il-ttrack{height:14px;border-radius:7px;background:var(--gray-100);position:relative;overflow:hidden}
.il-ttrack i{position:absolute;top:0;bottom:0;left:var(--s);width:0;border-radius:7px;animation:iltl 7s ease-out infinite}
.il-tpage{background:#D9DCE1}.il-tom{background:var(--orange-200)}.il-tready{background:var(--orange)}
@keyframes iltl{0%,8%{width:0}50%,92%{width:var(--w)}100%{width:0}}
/* email */
.il--mail{display:flex;background:var(--paper)}
.il-mail{margin:auto;width:78%;padding:20px;border-radius:14px;background:var(--white);border:1px solid var(--gray-200);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.il-mhead{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-500)}.il-mfrom{font-weight:700;color:var(--ink)}
.il-msub{font-size:17px;font-weight:700}
.il-mtext{display:flex;flex-direction:column;gap:6px}.il-mtext i{height:8px;border-radius:4px;background:var(--gray-100)}.il-mtext i:nth-child(2){width:80%}.il-mtext i:nth-child(3){width:60%}
.il-mbtn{align-self:flex-start;height:38px;padding:0 16px;border-radius:9px;background:var(--orange);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;animation:ilpress 7s ease-in-out infinite}
.il-mcheck{font-size:13px;font-weight:600;color:var(--green-ink);opacity:0;animation:ilsig 7s ease-in-out infinite;animation-delay:.6s}
/* editor */
.il--editor{background:var(--paper)}
.il-ed{position:absolute;inset:14px;border-radius:12px;background:var(--white);border:1px solid var(--gray-200);display:flex;flex-direction:column;overflow:hidden}
.il-edbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--gray-200);font-size:11px;color:var(--ink-500)}
.il-edtoggle{display:flex;gap:2px;padding:2px;border-radius:7px;background:var(--gray-100)}.il-edtoggle b,.il-edtoggle i{font-style:normal;font-weight:600;padding:3px 8px;border-radius:5px}.il-edtoggle b{background:var(--white);color:var(--ink)}
.il-edsave{height:24px;padding:0 10px;border-radius:6px;background:var(--orange);color:#fff;font-weight:600;display:flex;align-items:center}
.il-edbody{flex:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.il-edcanvas{margin:auto;width:82%;padding:16px;border-radius:12px;border:1px dashed var(--orange-200);text-align:center;display:flex;flex-direction:column;gap:8px}
.il-edh{font-size:15px;line-height:20px}.il-edbtn{animation:ilgrow 7s ease-in-out infinite}
@keyframes ilgrow{0%,40%{transform:none;box-shadow:none}50%,90%{transform:scale(1.06);box-shadow:0 8px 20px -8px rgba(237,90,41,.7)}100%{transform:none}}
.il-edside{border-left:1px solid var(--gray-200);padding:10px;display:flex;flex-direction:column;gap:8px}
.il-edtabs{display:flex;gap:6px;font-size:11px}.il-edtabs b,.il-edtabs i{font-style:normal;padding:3px 8px;border-radius:5px;background:var(--gray-100)}.il-edtabs i{background:var(--orange-100);color:var(--orange);font-weight:700}
.il-edask{font-size:11px;line-height:15px;padding:8px;border-radius:8px;background:var(--ink);color:#fff;opacity:0;animation:ilin2 7s ease-out infinite}
.il-edrow{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink-600);padding:6px 8px;border-radius:6px;border:1px solid var(--gray-200)}
.il-sw{width:12px;height:12px;border-radius:3px;background:var(--orange)}
@keyframes ilin2{0%,12%{opacity:0;transform:translateY(4px)}20%,92%{opacity:1;transform:none}100%{opacity:0}}
/* devices */
.il--devices{background:var(--paper)}
.il-devs{position:absolute;inset:0}
.il-dsk{position:absolute;left:8%;top:14%;width:66%;aspect-ratio:16/10;border-radius:12px;background:var(--white);border:1px solid var(--gray-200);box-shadow:var(--shadow);overflow:hidden}
.il-dskpop{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:58%;padding:12px;border-radius:10px;background:var(--white);box-shadow:var(--shadow-lg);text-align:center;display:flex;flex-direction:column;gap:6px}
.il-dskpop .il-ph{font-size:13px;line-height:17px}.il-dskpop .il-pbtn{height:26px;font-size:11px}
.il-mob{position:absolute;right:9%;top:24%;width:22%;aspect-ratio:9/18;border-radius:18px;background:var(--white);border:4px solid var(--ink);overflow:hidden;animation:ilcard 7s cubic-bezier(.2,.7,.2,1) infinite}
.il-mobpop{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);padding:8px;border-radius:8px;background:var(--white);box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column;gap:4px}
.il-mobpop .il-pk{font-size:8px}.il-mobpop .il-ph{font-size:11px;line-height:14px}.il-mobpop .il-pbtn{height:20px;font-size:9px}
.il-devlabel{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--white);border:1px solid var(--gray-200);font-size:12px;font-weight:600;color:var(--ink-600)}
/* concept board */
.il-cb{margin:auto;width:86%;display:flex;flex-direction:column;gap:12px}
.il-cbplan{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px}
.il-cbpane{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:10px;background:var(--white);border:1px solid var(--gray-200);font-size:11px;color:var(--ink-500)}
.il-cbpane i{aspect-ratio:16/10;border-radius:7px;background:#FCE3D8;animation:ilwarm 7s ease-in-out infinite}.il-cbm i{aspect-ratio:9/12}
@keyframes ilwarm{0%,40%{background:#E4E9EE}55%,100%{background:#FCE3D8}}
.il-cbask{animation:ilin 7s ease-out infinite}
.il-cbv{display:flex;gap:8px;font-size:12px}.il-cbv span{padding:4px 10px;border-radius:999px;background:var(--white);border:1px solid var(--gray-200);color:var(--ink-600)}
.il-cbcur{border-color:var(--orange)!important;color:var(--orange)!important;font-weight:700;opacity:0;animation:ilsig 7s ease-in-out infinite}
/* spa */
.il-routes{position:absolute;left:18px;right:18px;bottom:20px;display:flex;gap:8px;flex-wrap:wrap}
.il-route{font-family:var(--mono);font-size:12px;padding:5px 10px;border-radius:8px;background:var(--dark);color:#E6E7EA;opacity:0;animation:ilchip 7s ease-out infinite;animation-delay:calc(var(--i) * .6s)}
/* shield */
.il-shieldbox{margin:auto;width:84%;display:flex;align-items:center;gap:22px}
.il-shield{width:88px;height:104px;flex-shrink:0;background:var(--orange-100);clip-path:polygon(50% 0,100% 16%,100% 55%,50% 100%,0 55%,0 16%);position:relative}
.il-shield::after{content:"";position:absolute;left:32%;top:40%;width:34%;height:16%;border-left:5px solid var(--orange);border-bottom:5px solid var(--orange);transform:rotate(-45deg)}
.il-chks{display:flex;flex-direction:column;gap:10px;flex:1}
.il-chk{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--white);border:1px solid var(--gray-200);opacity:0;animation:ilchip 7s ease-out infinite;animation-delay:calc(var(--i) * .35s)}
.il-chk b{display:block;font-size:13px}.il-chk em{display:block;font-style:normal;font-size:12px;color:var(--ink-500)}
.il-tick{width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--green-100);position:relative;flex-shrink:0}
.il-tick::after{content:"";position:absolute;left:4px;top:4px;width:7px;height:4px;border-left:2px solid var(--green-ink);border-bottom:2px solid var(--green-ink);transform:rotate(-45deg)}
/* queue (protector) */
.il-q{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid var(--gray-200);font-size:13px;opacity:0;animation:ilchip 7s ease-out infinite;animation-delay:calc(var(--i) * .35s)}
.il-q em{font-style:normal;font-size:12px;color:var(--ink-500)}.il-qon{border-color:var(--orange);background:var(--orange-100)}.il-qon em{color:var(--orange);font-weight:600}
/* menu (priority, goals) */
.il-menu{padding:8px;border-radius:12px;background:var(--white);border:1px solid var(--gray-200);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:2px;width:62%;align-self:flex-end;animation:ilcard 7s cubic-bezier(.2,.7,.2,1) infinite}
.il-mtitle{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);padding:4px 8px}
.il-mi{font-size:14px;padding:8px;border-radius:8px;color:var(--ink-600)}
.il-mion{background:var(--orange-100);color:var(--orange);font-weight:700;animation:ilpick 7s ease-in-out infinite}
@keyframes ilpick{0%,30%{background:transparent;color:var(--ink-600)}40%,100%{background:var(--orange-100);color:var(--orange)}}
/* schedule */
.il-sched{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;font-size:12px;color:var(--ink-500)}
.il-sched i{height:6px;border-radius:3px;background:var(--gray-100);position:relative;overflow:hidden}
.il-sched i::after{content:"";position:absolute;inset:0;width:0;background:var(--orange);animation:ilload 7s ease-in-out infinite}
/* checkout */
.il-co{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-600)}
.il-coapply{color:var(--green-ink);font-weight:600;opacity:0;animation:ilchip 7s ease-out infinite;animation-delay:.6s}
.il-cototal{border-top:1px solid var(--gray-200);padding-top:10px;color:var(--ink);font-weight:700}
/* coupons */
.il-codebadge{align-self:center;font-family:var(--mono);font-size:15px;letter-spacing:.08em;padding:8px 14px;border:1.5px dashed var(--orange);border-radius:8px;color:var(--orange);animation:ilpress 7s ease-in-out infinite}
.il-pool{display:flex;justify-content:center;gap:8px;font-size:11px;color:var(--ink-500)}.il-pool span{padding:3px 8px;border-radius:999px;background:var(--gray-100)}
/* fullscreen */
.il-full{position:absolute;inset:40px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(120% 90% at 30% 20%,#FFE3D6 0%,#F7B59F 55%,#ED5A29 100%);text-align:center;padding:24px}
.il-fullh{font-size:26px;line-height:32px;color:var(--ink)}.il-fullf{width:56%;background:rgba(255,255,255,.8);border:0}
.il-full .il-pbtn{width:56%;background:var(--ink)}
/* scratch */
.il-scratch{position:relative;height:74px;border-radius:12px;background:var(--orange-100);display:flex;align-items:center;justify-content:center;overflow:hidden}
.il-prize{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--orange);letter-spacing:.1em}
.il-foil{position:absolute;inset:0;background:linear-gradient(135deg,#C9CCD1,#EEF0F2 40%,#B8BCC2);animation:ilfoil 7s ease-in-out infinite}
@keyframes ilfoil{0%,20%{clip-path:inset(0 0 0 0)}60%,90%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 0)}}
/* survey */
.il-opt{height:36px;border-radius:9px;border:1px solid var(--gray-300);display:flex;align-items:center;padding:0 12px;font-size:14px;text-align:left}
.il-optpick{animation:ilpickopt 7s ease-in-out infinite}
@keyframes ilpickopt{0%,34%{border-color:var(--gray-300);background:transparent}42%,92%{border-color:var(--orange);background:var(--orange-100);color:var(--orange);font-weight:600}100%{border-color:var(--gray-300)}}
/* countdown */
.il-cd{display:flex;justify-content:center;gap:8px}
.il-cd span{display:flex;align-items:baseline;gap:2px;padding:8px 10px;border-radius:9px;background:var(--dark);color:#fff;font-size:11px}
.il-cd b{font-family:var(--mono);font-size:20px}
.il-cdsec b{animation:iltick 1s steps(1) infinite}
@keyframes iltick{50%{opacity:.55}}
@media (max-width:640px){.il-phone{height:270px}.il--phonewrap{min-height:300px}.il-srow{grid-template-columns:90px minmax(0,1fr) 42px}.il-trow{grid-template-columns:76px minmax(0,1fr)}.il-edbody{grid-template-columns:minmax(0,1fr)}.il-edside{display:none}.il-fullh{font-size:20px;line-height:26px}.il-shield{width:64px;height:76px}}
@media (prefers-reduced-motion: reduce){.il-mpop,.il-code,.il-cl,.il-prod,.il-tile,.il-sbar i,.il-edask,.il-cbcur,.il-route,.il-chk,.il-q,.il-coapply,.il-mcheck,.il-idle span{opacity:1}.il-mpop{transform:translateY(-50%)}.il-mshade{opacity:1}.il-chart path{stroke-dashoffset:0}.il-ttrack i{width:var(--w)}.il-foil{clip-path:inset(0 0 0 100%)}}