/* ==========================================================================
   Orix — shared foundation
   Base type, soft buttons, UI-slot frames, navs, suite switcher, the
   homepage product blocks and the design-system specimen. Section variants
   live in orix-sections.css. All colour / type / radius values come from
   the --p-* tokens in orix-themes.css (generated from _build/themes.js).
   ========================================================================== */

/* ---------------------------------------------------------------- base */
body.ox{background:var(--p-bg);color:var(--p-ink);font-size:16px}
body.ox ::selection{background:var(--p-primary);color:var(--p-on-primary)}
.ox h1,.ox h2,.ox h3,.ds-sys h1,.ds-sys h2,.ds-sys h3,.hp-card h3,.hx-name,.ox-word{
  font-family:var(--p-font);font-weight:var(--p-dw);letter-spacing:var(--p-tr);
  text-transform:var(--p-tt);font-stretch:var(--p-fs);color:inherit}
.ox h1{font-size:clamp(42px,6vw,76px);line-height:1.02;margin:0 0 22px}
.ox h2{font-size:clamp(30px,3.9vw,50px);line-height:1.06;margin-bottom:16px}
.ox h3{font-size:19px;line-height:1.25;letter-spacing:-.01em;margin-bottom:8px}
.ox p{max-width:62ch}
.ox :focus-visible{outline:2px solid var(--p-primary);outline-offset:3px;border-radius:6px}
.ox .ms,.hp-card .ms,.ds-sys .ms,.nav-menu .ms,.hx-tile .ms{font-variation-settings:'FILL' var(--p-icon-fill,0),'wght' 400}
.ox-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--p-primary);color:var(--p-on-primary);padding:10px 16px;border-radius:8px}
.ox-skip:focus{left:16px}

/* ------------------------------------------------- labels, heads, pills */
.ox-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--p-primary);margin-bottom:18px}
.ox-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ox-label{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--p-muted);margin-bottom:8px}
.ox-label--hi{color:var(--p-primary)}
.ox-lede{font-size:18px;line-height:1.6;color:var(--p-body)}
.ox-head{max-width:64ch;margin-bottom:56px}
.ox-head--center{margin-left:auto;margin-right:auto;text-align:center}
.ox-head--center .ox-lede{margin-left:auto;margin-right:auto}
.ox-head .ox-lede{margin-top:4px}
.ox-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;margin-bottom:26px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--p-ink);
  background:color-mix(in srgb,var(--p-bg) 70%,transparent);border:1px solid var(--p-line);box-shadow:0 1px 2px color-mix(in srgb,var(--p-ink) 6%,transparent)}
.ox-badge .ms{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:15px;background:var(--p-primary);color:var(--p-on-primary)}
.ox-pill{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:color-mix(in srgb,var(--p-primary) 12%,transparent);color:var(--p-primary)}
.ox-pill--muted{background:color-mix(in srgb,var(--p-ink) 6%,transparent);color:var(--p-body)}
.ox-held{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--p-muted);margin-top:24px;line-height:1.8;max-width:80ch}
.ox-held--center{text-align:center;margin-left:auto;margin-right:auto}

/* ------------------------------------------------------- soft buttons */
.ox-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.2;
  padding:14px 24px;border-radius:var(--p-btn-radius);border:1px solid transparent;background:var(--p-primary);color:var(--p-on-primary);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -12px color-mix(in srgb,var(--p-primary) 70%,transparent);
  transition:background var(--dur-exit) var(--ease-brand),border-color var(--dur-exit) var(--ease-brand),transform var(--dur-enter) var(--ease-brand),box-shadow var(--dur-enter) var(--ease-brand)}
.ox-btn:hover{background:var(--p-primary-hover);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 28px -12px color-mix(in srgb,var(--p-primary) 80%,transparent)}
.ox-btn:active{transform:translateY(0)}
.ox-btn .ms{font-size:18px;transition:transform var(--dur-enter) var(--ease-brand)}
.ox-btn:hover .ms{transform:translateX(3px)}
.ox-btn--sm{padding:10px 18px;font-size:14px}
.ox-btn--ghost{background:color-mix(in srgb,var(--p-ink) 4%,transparent);color:var(--p-ink);border-color:var(--p-line);box-shadow:none}
.ox-btn--ghost:hover{background:color-mix(in srgb,var(--p-ink) 7%,transparent);border-color:color-mix(in srgb,var(--p-ink) 25%,transparent);box-shadow:none}
.ox-btn--invert{background:var(--inv-bg,var(--p-band-accent));color:var(--inv-ink,var(--p-band));box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
.ox-btn--invert:hover{background:var(--inv-bg-hover,var(--p-band-ink));color:var(--inv-ink,var(--p-band))}
.ox-btn--ghost-invert{background:rgba(255,255,255,.06);color:var(--ginv-ink,var(--p-band-ink));border-color:var(--ginv-line,var(--p-band-line));box-shadow:none}
.ox-btn--ghost-invert:hover{background:rgba(255,255,255,.12);border-color:var(--ginv-ink,var(--p-band-ink));box-shadow:none}
.ox-actions{display:flex;flex-wrap:wrap;gap:12px}
.ox-actions--center{justify-content:center}

/* ---------------------------------------------------- lists and chips */
.ox-ticks{list-style:none;display:grid;gap:10px;align-content:start}
.ox-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--p-ink);line-height:1.45}
.ox-ticks .ms{font-size:19px;color:var(--p-primary);flex:none;margin-top:1px}
.ox-ticks--inline{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.ox-ticks--inline li{font-size:14px;color:var(--p-body)}
.ox-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ox-chips li{font-family:var(--font-mono);font-size:12px;color:var(--p-ink);border:1px solid var(--p-line);background:var(--p-bg);border-radius:999px;padding:8px 14px}
.ox-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;font-size:23px;margin-bottom:18px;
  border-radius:calc(var(--p-radius) + 2px);color:var(--p-primary);background:color-mix(in srgb,var(--p-primary) 10%,transparent)}

/* ------------------------------------------------------------ UI slots */
.ox-slot{margin:0;position:relative;background:var(--p-bg);border:1px solid var(--p-line);border-radius:var(--p-radius-lg);overflow:hidden;
  box-shadow:0 1px 2px color-mix(in srgb,var(--p-ink) 6%,transparent),0 30px 70px -30px color-mix(in srgb,var(--p-ink) 30%,transparent)}
.ox-slot-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--p-line);background:color-mix(in srgb,var(--p-surface) 60%,var(--p-bg))}
.ox-slot-bar i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--p-ink) 14%,transparent)}
.ox-slot-bar i:first-child{background:var(--p-primary)}
.ox-slot-bar em{font-style:normal;margin-left:10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--p-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ox-screen{position:relative;background:var(--p-bg)}
.ox-screen img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.ox-ph{position:absolute;inset:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;
  border:1.5px dashed color-mix(in srgb,var(--p-primary) 30%,var(--p-line));border-radius:calc(var(--p-radius-lg) - 8px);
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--p-primary) 7%,transparent),transparent 60%),
    repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--p-primary) 3.5%,transparent) 14px 15px)}
.ox-ph .ms{width:56px;height:56px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:28px;color:var(--p-primary);background:color-mix(in srgb,var(--p-primary) 10%,var(--p-bg))}
.ox-ph b{font-family:var(--font-body);font-weight:600;font-size:16px;color:var(--p-ink)}
.ox-ph small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--p-muted);line-height:1.7}
.ox-slot--clean .ox-ph{inset:12px}
/* tablet: a device bezel */
.ox-slot--tablet{border:12px solid var(--p-ink);border-radius:30px;background:var(--p-ink)}
.ox-slot--tablet .ox-screen{border-radius:18px;overflow:hidden}
.ox-slot--tablet .ox-ph{inset:10px;border-radius:12px}
/* phone */
.ox-slot--phone{width:min(290px,76vw);margin:0 auto;border-radius:44px;border:10px solid var(--p-ink);background:var(--p-ink);
  box-shadow:0 40px 80px -30px color-mix(in srgb,var(--p-ink) 50%,transparent)}
.ox-slot--phone .ox-screen{border-radius:34px;overflow:hidden}
.ox-slot--phone .ox-ph{inset:10px;border-radius:26px}
.ox-phone-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:82px;height:22px;border-radius:12px;background:var(--p-ink);z-index:2}

/* floating status cards (illustrative UI around screenshots) */
.ox-float{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;
  background:color-mix(in srgb,var(--p-bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--p-line);box-shadow:0 20px 40px -18px color-mix(in srgb,var(--p-ink) 40%,transparent)}
.ox-float>.ms{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;background:color-mix(in srgb,var(--p-primary) 12%,transparent);color:var(--p-primary)}
.ox-float span{display:flex;flex-direction:column;line-height:1.25}
.ox-float b{font-size:13.5px;font-weight:600;color:var(--p-ink);white-space:nowrap}
.ox-float small{font-size:12px;color:var(--p-muted);white-space:nowrap}

/* -------------------------------------------------- suite switcher bar */
.ox-family{background:#F7F8FA;border-bottom:1px solid #E4E9F0;position:relative;z-index:61}
.ox-family-in{display:flex;align-items:center;gap:16px;height:46px;overflow-x:auto;scrollbar-width:none}
.ox-family-in::-webkit-scrollbar{display:none}
.ox-family-home{
  display:inline-flex;align-items:center;gap:6px;padding-left:0!important;
  color:#5C6B7E;text-decoration:none;white-space:nowrap;
  font:500 13px/1 var(--font-body);transition:color var(--dur-exit);
}
.ox-family-home:hover{color:#12263F}
.ox-family-home .ms{font-size:15px}
.ox-family-label{
  color:#9AA5B3;padding-left:16px;border-left:1px solid #E4E9F0;white-space:nowrap;
  font:600 9.5px/1 var(--font-mono);letter-spacing:.16em;
}
.ox-family ul{display:flex;gap:3px;list-style:none}
.ox-family a{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap;
  padding:6px 13px 6px 8px;border-radius:999px;color:#44505E;
  font-family:var(--p-font,var(--font-body));font-weight:var(--p-dw,500);
  font-stretch:var(--p-fs,100%);text-transform:var(--p-tt,none);font-size:13.5px;
  transition:background var(--dur-exit),color var(--dur-exit);
}
.ox-family a .ox-mark{border-radius:30%}
.ox-family a:hover{background:#EBEEF2;color:#12263F}
.ox-family a[aria-current]{color:var(--p-on-primary,#fff);background:var(--p-primary,#2C79BE)}
.ox-family a[aria-current]:hover{background:var(--p-primary-hover,var(--p-primary,#2C79BE))}

/* ------------------------------------------------------------ navs */
.ox-nav{position:sticky;top:0;z-index:60}
.ox-nav-in{display:flex;align-items:center;gap:28px;height:72px}
.ox-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--p-ink);flex:none}
.ox-mark{flex:none;display:block}
.ox-brand-txt{display:flex;flex-direction:column;line-height:1}
.ox-word{font-size:23px;line-height:1;color:var(--p-ink)}
.ox-word span{color:var(--p-primary)}
.ox-brand-txt small{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;color:var(--p-muted);margin-top:5px}
.ox-links{display:flex;gap:4px;list-style:none;margin:0 auto}
.ox-links a{display:block;font-size:14.5px;color:var(--p-body);text-decoration:none;padding:8px 14px;border-radius:999px;transition:color var(--dur-exit),background var(--dur-exit)}
.ox-links a:hover{color:var(--p-ink);background:color-mix(in srgb,var(--p-ink) 5%,transparent)}
.ox-nav-end{display:flex;align-items:center;gap:10px;flex:none}
.ox-toggle{display:none;background:color-mix(in srgb,var(--p-ink) 4%,transparent);border:1px solid var(--p-line);color:var(--p-ink);width:44px;height:44px;border-radius:999px;align-items:center;justify-content:center;cursor:pointer}
/* bar (Dine, Care) */
.ox-nav--bar,.ox-nav--dark,.ox-nav--split{background:color-mix(in srgb,var(--p-bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--p-line) 70%,transparent)}
/* pill (HR, Edu) : a floating rounded bar */
.ox-nav--pill{top:12px;margin-top:12px;height:0;overflow:visible}
.ox-nav--pill .ox-nav-in{height:64px;padding:0 10px 0 18px;border-radius:999px;max-width:1100px;
  background:color-mix(in srgb,var(--p-bg) 78%,transparent);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  border:1px solid color-mix(in srgb,var(--p-line) 80%,transparent);box-shadow:0 12px 40px -18px color-mix(in srgb,var(--p-ink) 30%,transparent)}
.ox-nav--pill + main .ox-hero{padding-top:150px}
/* split (Stay) : links left, brand centred, CTA right */
.ox-nav--split .ox-nav-in{display:grid;grid-template-columns:1fr auto 1fr;height:80px}
.ox-nav--split .ox-links{margin:0;justify-self:start}
.ox-nav--split .ox-brand{justify-self:center}
.ox-nav--split .ox-nav-end{justify-self:end}

/* ---------------------------------------------------- other products */
.ox-more{padding:64px 0;background:var(--p-bg);border-top:1px solid var(--p-line)}
.ox-more .ox-label{margin-bottom:18px}
.ox-more ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ox-more a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:14px 12px;align-items:center;height:100%;padding:18px;
  background:var(--p-bg);border:1px solid var(--p-line);border-radius:var(--p-radius-lg);text-decoration:none;color:var(--p-ink);
  transition:border-color var(--dur-exit),transform var(--dur-enter) var(--ease-brand),box-shadow var(--dur-enter) var(--ease-brand)}
.ox-more a:hover{border-color:var(--p-primary);transform:translateY(-3px);box-shadow:0 20px 40px -24px color-mix(in srgb,var(--p-primary) 60%,transparent)}
.ox-more a>span{grid-column:1/-1;display:flex;flex-direction:column;gap:3px;min-width:0}
.ox-more b{font-family:var(--p-font,var(--font-body));font-weight:var(--p-dw,600);font-stretch:var(--p-fs,100%);text-transform:var(--p-tt,none);font-size:15px;color:var(--p-ink)}
.ox-more small{font-size:13px;line-height:1.35;color:var(--p-body)}
.ox-more .ms{grid-row:1;grid-column:2;justify-self:end;font-size:18px;color:var(--p-primary)}

/* =====================================================================
   Gravitorix homepage — product tiles + product cards (light, vibrant)
   --hv is each product's vivid colour that stays readable on white.
   ===================================================================== */
.hx-tile,.hp-card{--hv:var(--p-primary);--ht:var(--p-primary);--ha:var(--p-accent)}
.theme-stay:is(.hx-tile,.hp-card){--hv:#A3324F;--ht:#C2416A;--ha:#D9A441}
.theme-dine:is(.hx-tile,.hp-card){--hv:#C7361E;--ht:#F05A3A;--ha:#F7B32B}
.theme-care:is(.hx-tile,.hp-card){--hv:#0B7A83;--ht:#14B3BE;--ha:#4FD1A5}
.theme-edu:is(.hx-tile,.hp-card){--hv:#1E7F55;--ht:#2FAE76;--ha:#F7C531}
.theme-fit:is(.hx-tile,.hp-card){--hv:#3F7A0A;--ht:#9BD41E;--ha:#C8F23C}
.theme-hr:is(.hx-tile,.hp-card){--hv:#4338CA;--ht:#6366F1;--ha:#2DD4A7}

.hx-mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hx-tile{position:relative;display:flex;flex-direction:column;gap:4px;min-height:148px;padding:20px;text-decoration:none;overflow:hidden;border-radius:22px;
  background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--ha) 34%,transparent),transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--ht) 16%,#fff),color-mix(in srgb,var(--ht) 7%,#fff));
  border:1px solid color-mix(in srgb,var(--ht) 22%,#fff);box-shadow:0 1px 2px rgba(18,38,63,.05);
  transition:transform var(--dur-enter) var(--ease-brand),box-shadow var(--dur-enter) var(--ease-brand),border-color var(--dur-exit)}
.hx-tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ht) 45%,#fff);box-shadow:0 26px 46px -24px color-mix(in srgb,var(--ht) 70%,transparent)}
.hx-tile-motif{position:absolute;right:-50px;bottom:-60px;width:180px;height:180px;color:var(--ht);opacity:.22;pointer-events:none}
.hx-tile-motif svg{width:100%;height:100%}
.hx-tile .ox-mark rect{fill:var(--ht)}
.hx-tile .ox-mark circle:first-of-type{stroke:#fff}
.hx-tile .ox-mark circle:last-of-type{fill:var(--ha)}
.hx-name{position:relative;font-size:22px;margin-top:auto;color:var(--hv)}
.theme-fit .hx-name{color:#1F3A05}
.hx-cat{position:relative;font-size:12.5px;color:#5C6B7E}
.hx-go{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;
  background:#fff;color:var(--hv);box-shadow:0 4px 10px -4px rgba(18,38,63,.2);transition:transform var(--dur-enter) var(--ease-brand)}
.hx-tile:hover .hx-go{transform:rotate(45deg)}

/* cards always render light here, even for dark-first products */
a.hp-card{--p-bg:#fff;--p-ink:#12263F;--p-body:#5C6B7E;--p-line:#E4E9F0}
.hp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hp-card{display:flex;flex-direction:column;text-decoration:none;color:var(--p-ink);background:#fff;border:1px solid var(--p-line);border-radius:28px;overflow:hidden;
  box-shadow:0 1px 2px rgba(18,38,63,.05);
  transition:transform var(--dur-enter) var(--ease-brand),box-shadow var(--dur-enter) var(--ease-brand),border-color var(--dur-exit)}
.hp-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ht) 40%,#fff);box-shadow:0 34px 60px -32px color-mix(in srgb,var(--ht) 70%,transparent)}
.hp-card-art{position:relative;height:150px;margin:10px 10px 0;border-radius:20px;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;padding:18px;
  background:radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--ha) 55%,transparent),transparent 58%),linear-gradient(150deg,color-mix(in srgb,var(--ht) 26%,#fff),color-mix(in srgb,var(--ht) 10%,#fff))}
.hp-card-motif{position:absolute;right:-30px;top:-40px;width:210px;height:210px;color:var(--ht);opacity:.3}
.hp-card-motif svg{width:100%;height:100%}
.hp-card-art .ox-mark{position:relative;filter:drop-shadow(0 8px 14px color-mix(in srgb,var(--ht) 45%,transparent))}
.hp-card-art .ox-mark rect{fill:var(--ht)}
.hp-card-art .ox-mark circle:first-of-type{stroke:#fff}
.hp-card-art .ox-mark circle:last-of-type{fill:var(--ha)}
.theme-fit .hp-card-art .ox-mark rect,.theme-fit.hx-tile .ox-mark rect{fill:#3F7A0A}
.hp-card-cat{position:relative;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hv);
  background:rgba(255,255,255,.75);padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.hp-card-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px;flex:1}
.hp-card .ox-word{font-size:20px;color:#12263F}
.hp-card .ox-word span{color:var(--hv)}
.hp-card h3{font-size:22px;line-height:1.15;margin:0;color:#12263F}
.theme-fit.hp-card h3{font-size:26px;line-height:1}
.hp-card-body>p{font-size:14.5px;line-height:1.55;color:#5C6B7E;margin:0}
.hp-go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14.5px;color:var(--hv)}
.hp-go .ms{font-size:18px;transition:transform var(--dur-enter) var(--ease-brand)}
.hp-card:hover .hp-go .ms{transform:translateX(4px)}

/* =====================================================================
   Design-system specimen page
   ===================================================================== */
body.ds{background:var(--paper)}
.ds-top{background:var(--navy);color:var(--white);padding:64px 0 48px}
.ds-top h1{font-size:clamp(40px,5vw,64px);margin-bottom:18px}
.ds-top p{color:var(--text-body-on-dark);font-size:17px;max-width:72ch}
.ds-back{display:inline-flex;align-items:center;gap:6px;color:var(--steel);text-decoration:none;font-family:var(--font-mono);font-size:12px;margin-bottom:32px}
.ds-back .ms{font-size:15px}
.ds-back+.eyebrow{display:block}
.ds-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.ds-jump a{display:inline-flex;align-items:center;gap:8px;color:var(--white);text-decoration:none;border:1px solid rgba(228,233,240,.2);padding:8px 14px 8px 8px;border-radius:999px;font-size:14px;
  font-family:var(--p-font,var(--font-body));font-weight:var(--p-dw,500);font-stretch:var(--p-fs,100%);text-transform:var(--p-tt,none)}
.ds-jump a:hover{border-color:var(--white)}
.ds-shared{padding:64px 0}
.ds-shared h2{font-size:32px}
.ds-shared-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.ds-shared-grid>div{background:var(--white);padding:24px;border-radius:18px;border:1px solid var(--mist)}
.ds-shared-grid b{font-family:var(--font-display);font-size:17px}
.ds-shared-grid p{font-size:14.5px;color:var(--slate);margin-top:6px}
.ds-sys{background:var(--p-bg);color:var(--p-ink);padding:24px 0 72px;border-top:1px solid var(--mist)}
.ds-hero{position:relative;overflow:hidden;background:var(--p-surface);padding:56px 48px;max-width:1180px;margin:0 auto;border-radius:var(--p-radius-lg)}
.ds-hero-in{position:relative;z-index:2;max-width:640px}
.ds-hero-motif{position:absolute;top:-100px;right:-120px;width:480px;height:480px;color:var(--p-accent);opacity:.25}
.ds-hero-motif svg{width:100%;height:100%}
.ds-lockup{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.ds-lockup .ox-word{font-size:44px}
.ds-cat{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--p-primary);text-transform:uppercase;margin-bottom:12px}
.ds-pers{font-size:17px;color:var(--p-body);margin-bottom:24px}
.ds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1180px;margin:16px auto 0;padding:0 40px}
.ds-card{background:var(--p-bg);border:1px solid var(--p-line);border-radius:var(--p-radius-lg);padding:24px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.ds-wide{grid-column:1/-1}
.ds-h{font-family:var(--font-mono)!important;font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase!important;font-weight:500!important;font-stretch:100%!important;color:var(--p-muted)!important;margin:0!important}
.ds-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.ds-sw i{display:block;height:56px;border-radius:var(--p-radius);border:1px solid var(--p-line);margin-bottom:6px}
.ds-sw b{display:block;font-size:12px;font-weight:600}
.ds-sw code{font-family:var(--font-mono);font-size:11px;color:var(--p-muted)}
.ds-roles{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--p-body)}
.ds-roles b{color:var(--p-ink);text-transform:capitalize;margin-right:4px}
.ds-aa{font-family:var(--p-font);font-weight:var(--p-dw);font-stretch:var(--p-fs);font-size:84px;line-height:1;color:var(--p-primary)}
.ds-meta{font-family:var(--font-mono);font-size:11px;color:var(--p-muted);letter-spacing:.04em;line-height:1.6}
.ds-h1{font-family:var(--p-font);font-weight:var(--p-dw);letter-spacing:var(--p-tr);text-transform:var(--p-tt);font-stretch:var(--p-fs);font-size:26px;line-height:1.1}
.ds-body{font-size:14.5px;color:var(--p-body)}
.ds-shapes{display:flex;gap:10px}
.ds-shapes span{flex:1;height:72px;display:flex;align-items:flex-end;padding:10px;font-family:var(--font-mono);font-size:10.5px;background:var(--p-surface);border:1.5px solid var(--p-primary)}
.ds-icons{display:flex;flex-wrap:wrap;gap:8px}
.ds-icons .ox-ic{margin:0}
.ds-row{display:flex;flex-wrap:wrap;gap:10px}
.ds-mod{border:1px solid var(--p-line);border-radius:var(--p-radius-lg);padding:18px}
.ds-mod p{font-size:14px;color:var(--p-body)}
.ds-motif{height:160px;color:var(--p-accent);background:var(--p-surface);border-radius:var(--p-radius);overflow:hidden}
.ds-motif svg{width:100%;height:100%}
.ds-layout{list-style:none;counter-reset:l;display:grid;gap:4px;font-size:13.5px;color:var(--p-body)}
.ds-layout li{counter-increment:l;display:flex;gap:8px}
.ds-layout li::before{content:counter(l,decimal-leading-zero);font-family:var(--font-mono);font-size:11px;color:var(--p-muted);padding-top:2px}
.ds-layout b{color:var(--p-ink);font-weight:600}
.ds-band{background:var(--p-band);color:var(--p-band-ink);border-color:transparent;grid-column:span 2}
.ds-band .ds-h{color:var(--p-band-body)!important}
.ds-traits{font-family:var(--p-font);font-weight:var(--p-dw);font-stretch:var(--p-fs);text-transform:var(--p-tt);font-size:20px}
.ds-do,.ds-dont{font-size:15px;color:var(--p-band-body)}
.ds-band .ox-label{color:var(--p-band-accent)}
.ds-dont s{opacity:.7}

/* =====================================================================
   Foundation responsive
   ===================================================================== */
@media(max-width:1080px){
  .hp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:920px){
  .ox-links{display:none}
  .ox-links.open{display:flex;position:absolute;top:calc(100% + 8px);left:16px;right:16px;flex-direction:column;gap:2px;padding:10px;margin:0;
    background:var(--p-bg);border:1px solid var(--p-line);border-radius:20px;box-shadow:0 24px 50px -20px color-mix(in srgb,var(--p-ink) 40%,transparent)}
  .ox-links.open a{padding:12px 14px}
  .ox-toggle{display:inline-flex}
  .ox-nav-in{position:relative}
  .ox-nav-end{margin-left:auto}
  .ox-nav--split .ox-nav-in{display:flex}
  .ox-nav--split .ox-brand{order:-1}
  .ox-nav--pill .ox-nav-in{margin:0 12px;max-width:none}
  .ox-more ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ds-grid,.ds-shared-grid{grid-template-columns:1fr 1fr}
  .ds-hero{padding:40px 24px;margin:0 24px}
  .ds-grid{padding:0 24px}
  .ds-band{grid-column:1/-1}
}
@media(max-width:620px){
  .hp-grid,.ox-more ul,.ds-grid,.ds-shared-grid{grid-template-columns:1fr}
  .ox-brand-txt small{display:none}
  .ox-word{font-size:20px}
  .ox-nav .ox-btn--sm{display:none}
  .ox-slot-bar em{display:none}
  .ox-ph small{font-size:9.5px}
  .ox-ph .ms{width:44px;height:44px;font-size:22px}
  .ox-actions .ox-btn{flex:1 1 100%}
  .ox-float{display:none}
  .ox-badge{font-size:10px;letter-spacing:.06em;padding-right:12px}
}
@media(max-width:520px){
  .wrap{padding:0 16px}
  .hx-mosaic{gap:10px}
  .hx-tile{min-height:120px;padding:16px;border-radius:18px}
  .hx-name{font-size:19px}
}