/* worthly.si — pro layer v3: spacing system, forms, report display, motion.
   Loaded after site.css; it refines rather than replaces, so removal = one <link>. */
:root{
  /* spacing scale (4-based) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px; --sp-9:64px;
  --pad-card:clamp(18px,2.2vw,28px); --pad-wrap:clamp(16px,3vw,24px);
  --sp-section:clamp(44px,5.6vw,76px);
  --input-h:48px;
  --ring:0 0 0 4px rgba(31,91,255,.16);
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --sh-1:0 1px 2px rgba(10,22,51,.04),0 6px 18px -12px rgba(10,22,51,.16);
  --sh-2:0 2px 4px rgba(10,22,51,.05),0 18px 44px -22px rgba(20,71,204,.35);
  --z-nav:20; --z-drop:30; --z-toast:50;
  --t-fast:.14s; --t-base:.22s; --ease:cubic-bezier(.2,.7,.25,1);
}
.wrap{padding-left:var(--pad-wrap);padding-right:var(--pad-wrap)}
section{padding:var(--sp-section) 0}
.section-head{margin-bottom:var(--sp-6)}
.section-head h2{letter-spacing:-.024em}
.eyebrow-label{display:block;font:600 12px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--brand-600);margin-bottom:var(--sp-3)}
html{scroll-padding-top:84px}
body{font-size:16px;line-height:1.6}
p{max-width:72ch}

/* ── forms: real labels, 48px controls, inline errors ───────────────── */
.form-row{display:flex;flex-direction:column;gap:var(--sp-2)}
.field-label{font:600 13px/1.3 var(--sans);color:var(--ink-2);letter-spacing:.01em}
.field-hint{font-size:var(--fs-xs);color:var(--muted)}
.input-group{display:flex;align-items:stretch;width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  box-shadow:var(--sh-1);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.input-group:focus-within{border-color:var(--brand);box-shadow:var(--ring)}
.input-group input{flex:1 1 auto;min-width:0;height:var(--input-h);padding:0 var(--sp-4);border:0;background:transparent;
  font:500 16px/1 var(--sans);color:var(--ink);border-radius:var(--r-md) 0 0 var(--r-md)}
.input-group input:focus{outline:0}
.input-group .suffix{display:flex;align-items:center;padding:0 var(--sp-4) 0 var(--sp-3);font:600 15px var(--mono);color:var(--muted);
  border-left:1px solid var(--line);background:transparent;border-radius:0 var(--r-md) var(--r-md) 0}
.input-group .btn{height:var(--input-h);border-radius:0 var(--r-md) var(--r-md) 0;padding:0 var(--sp-5);min-width:148px;white-space:nowrap;justify-content:center}
.input-group.invalid{border-color:var(--bad);box-shadow:0 0 0 4px rgba(180,35,24,.12)}
.field-error{display:none;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--bad);font-weight:600}
.field-error.on{display:flex}
.hero .input-group, .hero .field-label, .hero .field-hint{color:#DDE7FF}
.hero .input-group{box-shadow:0 10px 30px -18px rgba(0,0,0,.55)}
.hero .field-label{color:#C6D4F5}
.hero .field-hint{color:#9FB4E4}
.suggest{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.suggest button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#E7EEFF;border-radius:999px;
  padding:6px 13px;font:500 var(--fs-xs) var(--mono);cursor:pointer;transition:background var(--t-fast) var(--ease)}
.suggest button:hover{background:rgba(255,255,255,.16)}

/* standalone form (appraise / filters pages) */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--pad-card)}
.filters input,.filters select{height:44px;border-radius:var(--r-sm)}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{min-height:var(--input-h);border-radius:var(--r-md);white-space:nowrap;transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn:active{transform:translateY(1px) scale(.995)}
.btn[aria-busy="true"]{opacity:.85;pointer-events:none}
.btn .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn.ghost .spin{border-color:rgba(31,91,255,.3);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── report: verdict + facts + appraisal ────────────────────────────── */
.report{display:flex;flex-direction:column;gap:var(--sp-5)}
.card-x{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--pad-card)}
.verdict-x{position:relative;overflow:hidden}
.verdict-x::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--muted)}
.verdict-x.is-available::before{background:linear-gradient(180deg,#12B76A,#0EA5A5)}
.verdict-x.is-registered::before{background:linear-gradient(180deg,#F04438,#B42318)}
.verdict-x.is-unknown::before{background:linear-gradient(180deg,#98A2B3,#667085)}
.report-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.report-head .dom{font:700 clamp(20px,2.6vw,30px)/1.1 var(--mono);letter-spacing:-.03em;overflow-wrap:anywhere}
.report-head .when{margin-left:auto;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.status{display:inline-flex;align-items:center;gap:7px;font:700 12.5px/1 var(--sans);padding:7px 12px;border-radius:999px}
.status svg{flex:none}
.status.ok{background:var(--ok-bg);color:var(--ok)}
.status.no{background:var(--bad-bg);color:var(--bad)}
.status.na{background:#F3F5FA;color:var(--muted)}
.status.warn{background:var(--brand-050);color:var(--brand-700)}
.report-lead{margin:var(--sp-4) 0 0;color:var(--ink-2);max-width:70ch}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:var(--sp-5);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.facts > div{background:var(--card);padding:var(--sp-4)}
.facts span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.facts b{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.actions{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5);
  padding-top:var(--sp-5);border-top:1px solid var(--line)}
.actions .note-inline{font-size:var(--fs-xs);color:var(--muted);max-width:46ch}

/* next steps (available names) */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-3);margin-top:var(--sp-5)}
.steps li{list-style:none;background:#F8FAFF;border:1px solid var(--brand-100);border-radius:var(--r-md);padding:var(--sp-4)}
.steps b{display:block;font-family:var(--display);font-size:14.5px;margin-bottom:4px}
.steps p{margin:0;font-size:var(--fs-xs);color:var(--muted)}

/* appraisal block */
.appr-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.appr-value{font-family:var(--mono);font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:-.035em;margin:var(--sp-4) 0 var(--sp-1)}
.appr-value small{font:500 14px/1.4 var(--sans);color:var(--muted);letter-spacing:0;margin-left:var(--sp-3)}
.gauge{margin-top:var(--sp-5)}
.gauge .track{position:relative;height:14px;border-radius:99px;background:linear-gradient(90deg,#EEF3FF,#F5F7FC);border:1px solid var(--line)}
.gauge .band{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#1F5BFF,#22D3EE);
  transform-origin:left center;animation:bandIn .5s var(--ease) both}
.gauge .mid{position:absolute;top:-6px;bottom:-6px;width:3px;background:var(--ink);border-radius:3px;box-shadow:0 0 0 3px var(--card)}
.gauge .axis{display:flex;justify-content:space-between;margin-top:var(--sp-3);font:500 var(--fs-xs) var(--mono);color:var(--muted)}
@keyframes bandIn{from{transform:scaleX(.02);opacity:.3}to{transform:scaleX(1);opacity:1}}
.drivers{margin:var(--sp-5) 0 0;display:grid;gap:var(--sp-2)}
.drivers li{list-style:none;display:flex;align-items:center;gap:var(--sp-3);justify-content:space-between;
  padding:var(--sp-3) 0;border-bottom:1px dashed var(--line)}
.drivers li:last-child{border-bottom:0}
.drivers .mult{font:600 12.5px var(--mono);background:var(--brand-050);color:var(--brand-700);border-radius:999px;padding:4px 10px}
.drivers .mult.down{background:#FFF4E5;color:#B54708}
.conf-note{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-4)}

/* notices + interactive bits */
.statusbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--muted)}
.iconbtn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);
  min-height:34px;padding:0 var(--sp-3);font:600 var(--fs-xs) var(--sans);color:var(--ink-2);cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.iconbtn:hover{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-700)}
.skeleton{position:relative;overflow:hidden;background:#EEF1F8;border-radius:var(--r-sm);color:transparent}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translateX(-100%);animation:shimmer 1.1s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.reveal{animation:rise .34s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:999px;font-size:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5);z-index:var(--z-toast);opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* hero v4 */
.hero{padding:clamp(36px,4.6vw,68px) 0 clamp(36px,4.2vw,60px)}
.hero-grid{gap:clamp(28px,4vw,56px)}
.hero h1{font-size:clamp(30px,4.4vw,50px);max-width:19ch;margin-bottom:var(--sp-5)}
.hero .lead{font-size:clamp(15.5px,1.5vw,18px);max-width:58ch;margin-bottom:var(--sp-6)}
.hero .trust{margin-top:var(--sp-5);gap:var(--sp-4)}
.hero .ticker{margin-top:var(--sp-6);padding-top:var(--sp-5)}
.hero-side{padding:var(--sp-5);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045))}
.hero-side .dom{font-size:20px;margin:var(--sp-3) 0 var(--sp-2)}
.hero-side .range{font-size:clamp(24px,2.6vw,30px)}
.hero-side .mods li{padding-bottom:6px;font-size:12.5px}
/* ── hero search panel: full-width glass card, tabs, glowing pill ─────── */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(320px,.94fr);gap:var(--sp-6) var(--sp-7);align-items:start}
.hero-copy{grid-column:1;grid-row:1}
.hero-side{grid-column:2;grid-row:1}
.hero-search{grid-column:1 / -1;grid-row:2;width:100%;max-width:none;margin-top:var(--sp-6);position:relative}
.hero-search::before{content:"";position:absolute;inset:-2px 8% 12%;border-radius:30px;pointer-events:none;
  background:linear-gradient(90deg,#3D77FF,#22D3EE 45%,#8B5CF6);filter:blur(26px);opacity:.42;z-index:0;
  transition:opacity var(--t-med) var(--ease)}
.hero-search:focus-within::before{opacity:.72}
.hero .checker{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--sp-3);max-width:none;
  padding:var(--sp-4) var(--sp-4) var(--sp-5);border-radius:26px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 34px 70px -34px rgba(4,10,30,.85),inset 0 1px 0 rgba(255,255,255,.14)}
.hero .checker .field-label{color:#C7D4F2;font-size:12.5px;letter-spacing:.02em}

.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;align-self:flex-start;
  background:rgba(8,16,38,.55);border:1px solid rgba(255,255,255,.10)}
.tab{display:inline-flex;align-items:center;min-height:38px;padding:0 var(--sp-4);border-radius:999px;
  font:600 13.5px var(--sans);color:#B9C8EC;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.tab:hover{color:#fff;background:rgba(255,255,255,.07)}
.tab.active{color:#fff;background:linear-gradient(180deg,#12224F,#0C1C44);border:1px solid rgba(255,255,255,.20);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);cursor:default}

.hero .checker .pill{display:flex;align-items:center;gap:var(--sp-2);min-height:66px;padding:6px 6px 6px var(--sp-5);border-radius:999px;
  background:#fff;border:1px solid rgba(255,255,255,.9);position:relative;
  box-shadow:0 18px 40px -20px rgba(4,10,30,.75),0 0 0 1px rgba(61,119,255,.16);
  transition:box-shadow var(--t-med) var(--ease),transform var(--t-fast) var(--ease)}
.hero .checker .pill:hover{box-shadow:0 22px 46px -20px rgba(4,10,30,.8),0 0 0 1px rgba(61,119,255,.34)}
.hero .checker .pill:focus-within{transform:translateY(-1px);box-shadow:0 26px 54px -22px rgba(4,10,30,.85),0 0 0 3px rgba(61,119,255,.35)}
.hero .checker .pill .ico{display:flex;color:#7C8DB8;flex:0 0 auto}
.hero .checker .pill input{flex:1 1 auto;min-width:0;height:54px;border:0;background:transparent;outline:0;
  font:500 clamp(17px,1.7vw,21px)/1 var(--sans);color:#0A1230;letter-spacing:-.01em}
.hero .checker .pill input::placeholder{color:#9AA8C6;font-weight:400}
.hero .checker .pill .suffix{font:600 17px var(--mono);color:#1F5BFF;padding-right:var(--sp-2);flex:0 0 auto}
.hero .checker .sbtn{flex:0 0 auto;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#3D77FF,#1F5BFF 55%,#1447CC);
  box-shadow:0 12px 26px -12px rgba(31,91,255,.9),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),filter var(--t-fast) var(--ease)}
.hero .checker .sbtn:hover{transform:scale(1.05);filter:saturate(115%)}
.hero .checker .sbtn:active{transform:scale(.97)}
.hero .checker .sbtn.busy{pointer-events:none}
.hero .checker .sbtn.busy svg{display:none}
.hero .checker .sbtn.busy::after{content:"";width:18px;height:18px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.hero .checker .field-hint{color:#9DB2E0}
.hero .checker .field-error{color:#FFC9C4}
.hero .checker.invalid .pill,.hero .checker .pill.invalid{box-shadow:0 0 0 3px rgba(255,120,110,.5)}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-copy,.hero-side,.hero-search{grid-column:1;grid-row:auto}
  .hero-side{margin-top:var(--sp-6)}
}
@media(max-width:640px){
  .hero .checker{padding:var(--sp-3) var(--sp-3) var(--sp-4);border-radius:20px}
  .tabs{width:100%;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{min-height:36px;padding:0 var(--sp-3);font-size:13px}
  .hero .checker .pill{min-height:60px;padding-left:var(--sp-4)}
  .hero .checker .pill input{height:50px;font-size:17px}
  .hero .checker .sbtn{width:48px;height:48px}
  .hero .checker .pill .ico{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-search::before{transition:none}
  .hero .checker .pill,.hero .checker .sbtn{transition:none}
}

/* hero copy: two short paragraphs, generous breathing room, nothing crowding the form */
.hero .lead{max-width:52ch}
.hero .lead-sub{margin-top:var(--sp-3);font-size:var(--fs-sm);color:#A9BDE6;max-width:54ch}
.hero-copy{padding-bottom:var(--sp-6)}
.hero .form-row{margin-top:var(--sp-6)}
.hero-side .cta{margin-top:var(--sp-5)}

/* tables: denser but breathable, sticky head, focus row */
.faq summary{display:flex;align-items:center;gap:var(--sp-2);min-height:36px;padding:6px 0}
.faq details{padding:10px 0}
.tablewrap{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
thead th{padding:13px 16px;background:#F9FBFE}
tbody td{padding:13px 16px}
tbody tr{transition:background var(--t-fast) var(--ease)}
tbody tr:focus-within{background:var(--brand-050)}
td a.mono{font-weight:600}

/* dark-mode + motion safety */
@media(prefers-color-scheme:dark){
  .input-group{background:#0B142C;border-color:var(--line-2)}
  .input-group .suffix{background:#0E1A38;border-color:var(--line-2);color:#9FB0D8}
  .steps li{background:#0D1936;border-color:#1E3163}
  .iconbtn{background:#0B142C;color:#C3CFEC}
  .skeleton{background:#131E3C}
  .gauge .track{background:#101B39}
}
@media (prefers-reduced-motion:reduce){
  .gauge .band,.reveal{animation:none!important}
  .skeleton::after{animation:none!important}
}
@media(max-width:640px){
  :root{--input-h:52px}
  .input-group{flex-wrap:wrap;border-radius:var(--r-md)}
  .input-group input{width:100%;flex:1 0 100%;border-radius:var(--r-md) var(--r-md) 0 0;border-bottom:1px dashed var(--line-2)}
  .input-group .suffix{display:none}
  .input-group .btn{flex:1 1 100%;border-radius:0 0 var(--r-md) var(--r-md)}
  .report-head .when{margin-left:0;width:100%}
}