/* URSY.cloud design revamp — concatenated design system (Claude Design v2).
   Source order per functions.php: tokens → base → aurora → components → landing → mobile → perf.
   Fonts: branded woff2 (Instrument Sans / JetBrains Mono) are NOT bundled and their
   licence is unconfirmed by the designer; tokens fall back to the system stack so there
   is zero third-party font call. Drop licensed woff2 + @font-face in to activate brand type. */

/* ==== tokens.css ==== */
/* ==========================================================================
   URSY.CLOUD — design tokens (single source of truth)
   Law: NO hex/oklch literal outside this file. If a colour is not a token,
   it does not exist. Accessibility tooling reads this file.
   ========================================================================== */
:root{
  /* surfaces */
  --bg:#fbfbfa; --ink:#131518; --ink2:#5c6167; --ink3:#686c72;
  /* hairlines + washes */
  --line:rgba(18,20,24,.08); --line2:rgba(18,20,24,.15); --hover:rgba(18,20,24,.05);
  /* glass */
  --glass:rgba(255,255,255,.72); --card:rgba(255,255,255,.82); --sheet:rgba(255,255,255,.92);
  --field:rgba(255,255,255,.9); --topline:rgba(255,255,255,.75);
  --scrim:rgba(250,250,249,.34); --sideveil:rgba(252,252,251,.66);
  --lift:0 30px 90px -30px rgba(16,18,22,.5);
  /* THE ACCENT. One bright cyan for interaction: hovers, focus, selection,
     primary emphasis. Owner-approved value — change only here. */
  --neon:#15E7F4; --neon-soft:rgba(21,231,244,.14);
  /* status */
  --ok:oklch(.52 .14 155); --danger:oklch(.55 .17 25);
  /* aurora orb palette (runtime-overridable by theme.js colour profiles) */
  --o1:oklch(.76 .22 208); --o2:oklch(.66 .30 272); --o3:oklch(.86 .21 92); --o4:oklch(.66 .30 312);
  --spec:rgba(255,255,255,.95);
  --vig:radial-gradient(130% 90% at 50% -22%, rgba(255,255,255,.6), rgba(255,255,255,0) 56%),
        radial-gradient(130% 100% at 50% 120%, rgba(18,20,24,.075), rgba(18,20,24,0) 52%);
  /* per-module identity (icons, tiles, active nav) */
  --m-drive:oklch(.56 .16 285); --m-notes:oklch(.68 .14 75); --m-docs:oklch(.56 .17 258);
  --m-sheets:oklch(.54 .13 158); --m-slides:oklch(.70 .14 80); --m-publish:oklch(.54 .17 300);
  --m-pdf:oklch(.55 .18 28); --m-photos:oklch(.60 .13 200); --m-backup:oklch(.55 .10 262);
  /* type — two faces and there is no third */
  --font-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* geometry */
  --rail:252px; --rail-collapsed:68px; --radius-s:8px; --radius-m:14px; --radius-l:22px;
  --header-h:64px; --reading:72ch;
}
[data-theme="dark"]{
  --bg:#050506; --ink:#f6f4f1; --ink2:#a5abb2; --ink3:#8e959d;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.17); --hover:rgba(255,255,255,.06);
  --glass:rgba(17,17,20,.7); --card:rgba(17,17,20,.8); --sheet:rgba(13,13,16,.93);
  --field:rgba(20,20,23,.9); --topline:rgba(255,255,255,.07);
  --scrim:rgba(5,5,6,.3); --sideveil:rgba(8,8,10,.56);
  --lift:0 34px 100px -30px rgba(0,0,0,.85);
  --neon:#15E7F4; --neon-soft:rgba(21,231,244,.18);
  --ok:oklch(.7 .13 155); --danger:oklch(.7 .15 25);
  --o1:oklch(.72 .25 205); --o2:oklch(.62 .33 274); --o3:oklch(.82 .24 90); --o4:oklch(.64 .33 314);
  --vig:radial-gradient(130% 90% at 50% -22%, rgba(255,255,255,.05), rgba(255,255,255,0) 56%),
        radial-gradient(130% 100% at 50% 120%, rgba(0,0,0,.5), rgba(0,0,0,0) 55%);
  --m-drive:oklch(.72 .13 285); --m-notes:oklch(.80 .12 82); --m-docs:oklch(.72 .13 258);
  --m-sheets:oklch(.72 .12 158); --m-slides:oklch(.82 .12 88); --m-publish:oklch(.72 .13 300);
  --m-pdf:oklch(.70 .15 28); --m-photos:oklch(.74 .12 200); --m-backup:oklch(.70 .09 262);
}

/* ==== base.css ==== */
/* URSY.CLOUD — base: resets, type, focus, scrollbars. Tokens only. */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:14px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
@supports (overflow-x: clip){ html,body{ overflow-x:clip; } } /* hidden kills position:sticky */
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--neon); text-decoration:underline; text-underline-offset:3px; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,textarea,select{ font-family:inherit; }
.mono{ font-family:var(--font-mono); } /* machine speech only: counts, sizes, timestamps */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--neon); outline-offset:2px; border-radius:var(--radius-s); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; border:3.5px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--line2); background-clip:padding-box; }
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{ background:transparent; }
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
@keyframes rise{ from{opacity:0;transform:translate3d(0,14px,0)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ==== aurora.css ==== */
/* URSY.CLOUD — the veiled aurora field.
   App surfaces get WASHES ONLY behind a veil (no orb spheres over work).
   Marketing/hero/empty states may raise opacity slightly. */
.ursy-field{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.ursy-field__washes{ position:absolute; inset:-25%; filter:blur(110px) saturate(110%); opacity:.45; }
.ursy-field__washes i{ position:absolute; display:block; border-radius:50%; }
.ursy-field__washes i:nth-child(1){ left:-5%; top:-12%; width:64%; height:70%; opacity:.5;
  background:radial-gradient(circle at 45% 40%, var(--o1) 0%, var(--o2) 52%, transparent 74%);
  animation:aurora1 46s ease-in-out infinite; }
.ursy-field__washes i:nth-child(2){ right:-8%; bottom:-16%; width:58%; height:62%; opacity:.4;
  background:radial-gradient(circle at 55% 55%, var(--o2) 0%, var(--o1) 50%, transparent 72%);
  animation:aurora2 54s ease-in-out infinite; }
.ursy-field__scrim{ position:absolute; inset:0; background:var(--scrim); }
.ursy-field__vig{ position:absolute; inset:0; background:var(--vig); }
@keyframes aurora1{ 0%,100%{transform:translate3d(-14%,-10%,0) scale(1.1) rotate(0deg)} 50%{transform:translate3d(16%,12%,0) scale(1.38) rotate(14deg)} }
@keyframes aurora2{ 0%,100%{transform:translate3d(12%,14%,0) scale(1.28) rotate(0deg)} 50%{transform:translate3d(-16%,-12%,0) scale(1.04) rotate(-16deg)} }
@keyframes hueCycle{ 0%{filter:hue-rotate(0deg) saturate(1.15)} 25%{filter:hue-rotate(90deg) saturate(1.35)} 50%{filter:hue-rotate(180deg) saturate(1.15)} 75%{filter:hue-rotate(270deg) saturate(1.35)} 100%{filter:hue-rotate(360deg) saturate(1.15)} }
/* iOS/tablet compositor rule: below 1024px never stack backdrop-filter over
   fixed layers — blur the field directly, veil becomes a plain tint. */
@media (max-width:1024px){
  .ursy-field__washes{ filter:blur(60px) saturate(112%); transform:scale(1.14); }
}

/* ==== components.css ==== */
/* URSY.CLOUD — shared components. */
.u-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 16px;
  border-radius:10px; font-size:13.5px; font-weight:500; white-space:nowrap; flex:none;
  transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.u-btn--primary{ background:var(--ink); color:var(--bg); }
.u-btn--primary:hover{ background:var(--neon); color:#fff; }
.u-btn--hero{ height:48px; padding:0 26px; border-radius:12px; font-size:15px; }
.u-btn--hero:hover{ transform:translateY(-1px); box-shadow:0 18px 40px -16px var(--neon); background:var(--neon); color:#fff; }
.u-btn--ghost{ box-shadow:inset 0 0 0 1px var(--line2); }
.u-btn--ghost:hover{ background:var(--hover); color:var(--neon); }
.u-btn--accent{ background:var(--neon); color:#fff; font-weight:600; }
.u-btn--accent:hover{ opacity:.88; }
.u-iconbtn{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; color:var(--ink2);
  transition:color .15s ease, background .15s ease; }
.u-iconbtn:hover{ color:var(--ink); background:var(--hover); }
.u-card{ background:var(--card); border-radius:var(--radius-m);
  box-shadow:inset 0 0 0 1px var(--line2), inset 0 1px 0 var(--topline);
  transition:transform .16s ease, box-shadow .16s ease; }
.u-card--hover:hover{ transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--line2), 0 16px 34px -20px rgba(16,18,22,.5); }
.u-chip{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px; border-radius:999px;
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line2), inset 0 1px 0 var(--topline);
  font-size:12.5px; color:var(--ink2); transition:color .14s ease, box-shadow .14s ease; }
.u-chip:hover{ color:var(--neon); box-shadow:inset 0 0 0 1px var(--neon); text-decoration:none; }
.u-tag{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.16em; color:var(--neon);
  background:var(--neon-soft); border-radius:5px; padding:3px 8px; white-space:nowrap; }
.u-field{ height:44px; padding:0 14px; border:1px solid var(--line2); border-radius:10px;
  background:var(--field); color:var(--ink); font-size:14px; outline:none; width:100%; }
.u-field:focus-visible{ outline:2px solid var(--neon); outline-offset:1px; }
.u-toolbar{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:5px;
  border-radius:12px; background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line2), 0 2px 10px -6px rgba(16,18,22,.18); }
.u-toolbar__btn{ min-width:30px; height:30px; padding:0 8px; display:grid; place-items:center;
  border-radius:8px; font-size:12.5px; color:var(--ink2); transition:background .13s ease, color .13s ease; }
.u-toolbar__btn:hover{ background:var(--hover); color:var(--ink); }
.u-toolbar__btn.is-active{ background:var(--neon-soft); color:var(--neon); font-weight:700; }
.u-toolbar__rule{ width:1px; height:16px; background:var(--line2); margin:0 6px; }
.u-row{ display:grid; grid-template-columns:32px minmax(0,1fr) 130px 80px; gap:12px; align-items:center;
  height:46px; padding:0 12px; border-radius:11px; text-align:left; transition:background .13s ease; }
.u-row:hover{ background:var(--hover); }
.u-meta{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink3); white-space:nowrap; }
.u-eyebrow{ font-family:var(--font-mono); font-size:9px; letter-spacing:.22em; color:var(--ink3); }

/* ==== landing.css ==== */
/* URSY.CLOUD — public landing: header, hero, demo window, footer. */
.ursy-top{ position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px; height:68px;
  padding:0 clamp(18px,4vw,44px); background:var(--glass); box-shadow:inset 0 -1px 0 var(--line);
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%); }
.ursy-top__nav{ display:flex; align-items:center; gap:2px; margin:0 auto; padding:4px; border-radius:999px;
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 0 var(--topline); }
.ursy-top__nav a, .ursy-top__nav button{ display:flex; align-items:center; flex:none; white-space:nowrap;
  height:34px; padding:0 12px; border-radius:999px; font-size:12.5px; font-weight:500; color:var(--ink2);
  text-decoration:none; transition:background .14s ease, color .14s ease; }
.ursy-top__nav a:hover, .ursy-top__nav button:hover{ background:var(--hover); color:var(--ink); text-decoration:none; }
.ursy-hero{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:clamp(48px,8vh,84px) 26px 30px; }
.ursy-hero h1{ margin:26px 0 0; font-size:clamp(3rem,6.5vw,6rem); font-weight:700; line-height:1.02;
  letter-spacing:-.037em; text-wrap:balance; max-width:20ch; }
.ursy-hero h1 .accent{ color:var(--neon); }
.ursy-hero__lead{ margin:26px 0 0; max-width:66ch; font-size:clamp(17px,1.7vw,21px); line-height:1.6;
  color:var(--ink2); text-wrap:pretty; }
.ursy-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px;
  width:min(940px,100%); margin-top:32px; }
.ursy-stat{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:13px;
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line2), inset 0 1px 0 var(--topline); text-align:left; }
.ursy-stat b{ font-family:var(--font-mono); font-size:24px; font-weight:400; letter-spacing:-.02em; }
/* demo window (the animated product tour) */
.ursy-demo{ width:min(1200px,100%); margin-top:54px; position:relative; }
.ursy-demo__win{ position:relative; border-radius:18px; overflow:hidden; text-align:left; background:var(--sheet);
  box-shadow:var(--lift), inset 0 0 0 1px var(--line2), inset 0 1px 0 var(--topline);
  backdrop-filter:blur(30px) saturate(140%); -webkit-backdrop-filter:blur(30px) saturate(140%); }
.ursy-demo__frame{ position:absolute; inset:0; display:flex; opacity:0;
  animation:heroFrame 25s linear infinite both; }
.ursy-demo__frame:nth-of-type(2){ animation-delay:5s; } .ursy-demo__frame:nth-of-type(3){ animation-delay:10s; }
.ursy-demo__frame:nth-of-type(4){ animation-delay:15s; } .ursy-demo__frame:nth-of-type(5){ animation-delay:20s; }
.ursy-demo__labels{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; gap:3px; padding:4px; border-radius:999px; background:var(--sheet);
  box-shadow:0 12px 30px -14px rgba(16,18,22,.45), inset 0 0 0 1px var(--line2); }
.ursy-demo__labels span{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em;
  padding:5px 11px; border-radius:999px; animation:heroLabel 25s linear infinite both; }
.ursy-demo__labels span:nth-child(2){ animation-delay:5s; } .ursy-demo__labels span:nth-child(3){ animation-delay:10s; }
.ursy-demo__labels span:nth-child(4){ animation-delay:15s; } .ursy-demo__labels span:nth-child(5){ animation-delay:20s; }
@keyframes heroFrame{ 0%{opacity:0;visibility:hidden;transform:translateY(12px)}
  2%,18%{opacity:1;visibility:visible;transform:none}
  20.5%,100%{opacity:0;visibility:hidden;transform:translateY(-6px)} }
@keyframes heroLabel{ 0%{color:var(--ink3);background:transparent}
  2%,18%{color:#fff;background:var(--neon)} 20.5%,100%{color:var(--ink3);background:transparent} }
@keyframes heroType{ 0%,4.5%{width:0} 16.5%{width:100%} 100%{width:100%} }
@keyframes caretBlink{ 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes tickOn{ 0%{opacity:0;transform:scale(.5)} 2.5%,100%{opacity:1;transform:scale(1)} }
@keyframes slideSwap{ 0%,9%{opacity:0;transform:translateY(8px)} 12%,100%{opacity:1;transform:none} }
@keyframes cloudDrift{ 0%{transform:translateX(-7%)} 100%{transform:translateX(7%)} }
@keyframes shimmer{ 0%,100%{opacity:.4} 50%{opacity:.8} }
@keyframes corePulse{ 0%,100%{opacity:.55;transform:scale(.92)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes throb{ 0%,100%{transform:scale(.86)} 35%{transform:scale(1.12)} 62%{transform:scale(.94)} }
/* footer */
.ursy-foot{ position:relative; z-index:2; background:var(--sheet); box-shadow:inset 0 1px 0 var(--line);
  backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); }
.ursy-foot__inner{ max-width:1080px; margin:0 auto; padding:56px clamp(18px,4vw,44px) 28px; }
.ursy-foot__cols{ display:flex; flex-wrap:wrap; gap:40px 52px; }
.ursy-foot__head{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.2em; color:var(--ink3); padding-bottom:8px; }
.ursy-foot a{ display:flex; align-items:center; min-height:30px; font-size:13px; color:var(--ink2); text-decoration:none; }
.ursy-foot a:hover{ color:var(--neon); }
@media (max-width:600px){
  .ursy-top__nav{ display:none; } /* phones: hamburger sheet instead */
  .ursy-hero{ padding-top:40px; }
}

/* ==== mobile.css ==== */
/* URSY.CLOUD — mobile & iPad optimisation. Breakpoints 1040 / 860 / 600.
   Phones are their own product: reordered, folded, thumb-first. */

/* iPad portrait (768–1040): rail collapses to icons, canvas gets the room. */
@media (max-width:1040px){
  .ursy-shell{ grid-template-columns:var(--rail-collapsed) minmax(0,1fr); }
  .ursy-rail .ursy-nav span:not(.ursy-nav__icon), .ursy-rail__tag,
  .ursy-quota, .ursy-plan, .ursy-account__meta{ display:none; }
  .ursy-nav{ justify-content:center; padding:0; }
  .ursy-header{ gap:8px; padding:0 14px; }
  .ursy-search{ min-width:0; flex:1; }
}

/* Tablet/large phone (≤860): drawer rail + sticky bottom tab bar. */
@media (max-width:860px){
  .ursy-shell{ position:static; min-height:100svh; display:block; }
  .ursy-main{ min-height:100svh; }
  .ursy-burger{ display:grid; }
  .ursy-scrim{ position:fixed; inset:0; z-index:45; background:rgba(6,7,9,.4);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .ursy-bottombar{ position:fixed; left:0; right:0; bottom:0; z-index:44;
    display:flex; align-items:stretch; gap:2px;
    padding:6px 10px calc(6px + env(safe-area-inset-bottom));
    background:var(--sheet); box-shadow:inset 0 1px 0 var(--line);
    backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); }
  .ursy-bottombar a, .ursy-bottombar button{ flex:1; display:grid; place-items:center; gap:3px;
    min-height:48px; border-radius:11px; font-size:10.5px; color:var(--ink2); text-decoration:none; }
  .ursy-bottombar .is-active{ color:var(--ink); background:var(--hover); }
  .ursy-view{ padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
  /* editors: horizontal surfaces scroll INSIDE their pane, never the page */
  .ursy-sheet-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Phones (≤600): landing reorders; long copy folds into native accordions. */
@media (max-width:600px){
  .ursy-top{ height:60px; gap:8px; }
  .ursy-top__nav{ display:none; }
  .ursy-hero{ padding:36px 18px 24px; }
  .ursy-hero h1{ font-size:clamp(2.2rem,11vw,3rem); }
  .ursy-hero__lead{ font-size:15.5px; }
  .ursy-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .ursy-stat{ padding:11px 13px; } .ursy-stat b{ font-size:19px; }
  .ursy-demo{ margin-top:34px; }
  .ursy-demo__labels{ bottom:8px; }
  .ursy-cta-sticky{ position:fixed; left:12px; right:12px; z-index:40;
    bottom:calc(12px + env(safe-area-inset-bottom)); height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center; gap:9px;
    background:var(--ink); color:var(--bg); font-size:15px; font-weight:600;
    box-shadow:var(--lift); }
  .ursy-foot__cols{ gap:26px 32px; }
  details.ursy-fold{ border-top:1px solid var(--line); }
  details.ursy-fold summary{ display:flex; align-items:center; min-height:48px;
    font-size:14px; font-weight:600; cursor:pointer; list-style:none; }
  details.ursy-fold summary::after{ content:"+"; margin-left:auto; color:var(--ink3); }
  details.ursy-fold[open] summary::after{ content:"–"; }
}

/* Touch ergonomics everywhere. */
@media (pointer:coarse){
  a, button, input, summary{ touch-action:manipulation; }
  .u-btn, .u-iconbtn, .ursy-nav{ min-height:48px; }
  .u-toolbar__btn{ min-width:40px; height:40px; }
}
@media (max-height:560px) and (orientation:landscape){
  .ursy-hero{ padding-top:24px; padding-bottom:16px; }
}

/* ==== perf.css ==== */
/* URSY.CLOUD — performance layer (Lighthouse mobile).
   Glass is expensive on phone GPUs: below 860px translucency becomes solid
   sheets, the aurora wash goes static, and below-fold sections defer paint. */
@media (max-width:860px){
  .u-card, .u-chip, .u-toolbar, .ursy-rail, .ursy-header, .ursy-top, .ursy-foot,
  .ursy-demo__win, .ursy-bottombar{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .ursy-header, .ursy-top, .ursy-bottombar{ background:var(--sheet); }
  .ursy-field__washes, .ursy-field__washes i{ animation:none !important; }
  .ursy-field__washes{ filter:blur(60px) saturate(112%); transform:scale(1.14); }
}
/* Defer offscreen rendering of below-fold landing sections: add .u-defer. */
.u-defer{ content-visibility:auto; contain-intrinsic-size:auto 620px; }
/* CLS guards */
img, video{ max-width:100%; height:auto; }
.ursy-demo__win > div:last-of-type{ contain:layout paint; }


/* ==== URSY.cloud public portal layout (design-system classes, tokens only) ==== */
.ursy-public{ position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column; }
.ursy-wordmark{ display:flex; align-items:baseline; gap:1px; font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.ursy-wordmark .mono{ font-family:var(--font-mono); font-size:12px; font-weight:400; color:var(--ink3); letter-spacing:0; }
.ursy-top__actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.ursy-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.ursy-hero__trust{ margin-top:18px; font-size:9.5px; letter-spacing:.16em; color:var(--ink3); }
.ursy-hero .accent{ color:var(--neon); }
.ursy-section-head{ text-align:center; margin:0 auto 26px; max-width:60ch; }
.ursy-section-head h2{ margin:10px 0 0; font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:700; letter-spacing:-.025em; }
.ursy-section-head p{ margin:12px 0 0; color:var(--ink2); font-size:16px; line-height:1.6; }
.ursy-apps,.ursy-free{ position:relative; z-index:2; width:min(1120px,100%); margin:0 auto; padding:clamp(48px,7vh,84px) 26px; }
.ursy-app-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.ursy-app{ display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:var(--radius-m);
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line2), inset 0 1px 0 var(--topline);
  transition:transform .16s ease, box-shadow .16s ease; text-align:left; }
.ursy-app:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--line2), 0 16px 34px -20px rgba(16,18,22,.5); text-decoration:none; }
.ursy-app__icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff;
  font-family:var(--font-mono); font-size:16px; background:linear-gradient(180deg, var(--m), color-mix(in oklab, var(--m) 90%, #fff)); }
.ursy-app strong{ font-size:15px; font-weight:600; color:var(--ink); }
.ursy-app span{ font-size:13px; color:var(--ink2); }
.ursy-soon{ margin-top:26px; padding-top:22px; box-shadow:inset 0 1px 0 var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.ursy-soon__item{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:var(--hover); color:var(--ink3); font-size:13px; }
.ursy-free{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:32px; align-items:center; }
.ursy-free h2{ margin:10px 0 12px; font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:700; letter-spacing:-.025em; }
.ursy-free p{ color:var(--ink2); line-height:1.6; }
.ursy-free ul{ margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.ursy-free li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink2); }
.ursy-free li::before{ content:"✓"; color:var(--neon); font-weight:700; }
.ursy-signup-card{ padding:26px; border-radius:var(--radius-l); text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--sheet); box-shadow:var(--lift), inset 0 0 0 1px var(--line2), inset 0 1px 0 var(--topline); }
.ursy-signup-card strong{ font-family:var(--font-mono); font-size:44px; font-weight:400; letter-spacing:-.02em; margin-top:6px; color:var(--ink); }
.ursy-signup-card > p{ color:var(--ink3); font-size:13px; margin:0 0 10px; }
.ursy-signup-card small{ display:block; margin-top:10px; font-size:11.5px; color:var(--ink3); line-height:1.5; }
.ursy-existing{ margin-top:12px; font-size:13px; color:var(--ink2); }
.ursy-btn-disabled{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 26px; border-radius:12px;
  font-size:15px; font-weight:600; color:var(--ink3); background:var(--hover); box-shadow:inset 0 0 0 1px var(--line2); cursor:not-allowed; }
.ursy-demoui{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:20px 22px 52px; }
.ursy-demoui__bar{ display:flex; align-items:center; gap:10px; }
.ursy-demoui__ic{ width:26px; height:26px; border-radius:7px; background:linear-gradient(180deg,var(--m),color-mix(in oklab,var(--m) 90%,#fff)); flex:none; }
.ursy-demoui__row{ height:30px; border-radius:9px; background:var(--hover); }
.ursy-foot__brand{ display:flex; flex-direction:column; gap:8px; max-width:280px; }
.ursy-foot__brand p{ font-size:13px; color:var(--ink3); line-height:1.6; }
.ursy-foot__col{ display:flex; flex-direction:column; }
@media (max-width:760px){ .ursy-free{ grid-template-columns:1fr; } }
@media (max-width:600px){ .ursy-hero__cta .u-btn, .ursy-hero__cta .ursy-btn-disabled{ width:100%; } }

/* a11y: the demo indicator's active label sits on the bright --neon pill; use dark
   text (not white) so it meets WCAG contrast in both themes. Brand accent unchanged. */
@keyframes heroLabel{ 0%{color:var(--ink3);background:transparent}
  2%,18%{color:#04141b;background:var(--neon)} 20.5%,100%{color:var(--ink3);background:transparent} }