/* =========================================================================
   Readable Content Analyser — the full-width card above the footer.

   Namespaced .rcx so nothing here can reach the rest of the home page.

   The design shipped two hand-tuned palettes: PAPER (warm off-white, clay
   accent) and ESPRESSO (warm dark brown, amber accent), switched by a class.
   Here they are wired to the site's theme instead — PAPER on the bare .rcx,
   ESPRESSO under html[data-theme="dark"] — and the accent, ink and rule
   colours read the site's own tokens so the card tracks a palette change
   rather than drifting away from it. Everything else is the design as
   supplied, minus its Google Fonts request: the two font stacks are the
   site's --font-body and --font-mono.
   ========================================================================= */

/* The section band. The knowledge-base section above already ends with 46px
   of air, so this one leads with almost none and keeps its own clearance from
   the footer instead of borrowing .qdt-home-section's 6px. */
.qdt-home-readable{background:var(--bg);padding:8px 0 52px}

.rcx{
  /* ---- PAPER (light) ---- */
  --rcx-surface:linear-gradient(152deg,#fffdf8 0%,#fbf5ea 58%,#f4ecdc 100%);
  --rcx-edge:#e7ddca;
  --rcx-fg:var(--ink,#1b1a17);
  --rcx-fg2:var(--ink-2,#5f594e);
  --rcx-fg3:var(--ink-3,#918878);
  --rcx-a:var(--mark,#b9552d);
  --rcx-a2:#e08a42;
  --rcx-a-soft:var(--mark-soft,#f7ebe0);
  --rcx-a-line:var(--mark-line,#eccdb6);
  --rcx-panel-bg:#fffefa;
  --rcx-panel-bd:#ece1cd;
  --rcx-hair:#ece1cd;
  --rcx-track:#efe6d5;
  --rcx-field-bg:#fff;
  --rcx-field-bd:#ded3bd;
  --rcx-field-fg:#1b1a17;
  --rcx-field-ph:#a79d8b;
  --rcx-btn:var(--invert,#1b1a17);
  --rcx-btn-fg:var(--on-invert,#fff);
  --rcx-btn-h:#000;
  --rcx-glow:rgba(185,121,31,.07);
  --rcx-grid:rgba(120,95,60,.05);
  --rcx-sh:78,58,30;

  position:relative;overflow:hidden;display:flex;flex-direction:column;
  box-sizing:border-box;width:100%;max-width:1330px;margin:0 auto;
  border:1px solid var(--rcx-edge);border-radius:16px;padding:20px 22px 17px;
  background:var(--rcx-surface);color:var(--rcx-fg);letter-spacing:-.005em;
  font-family:var(--font-body,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  box-shadow:0 1px 2px rgba(var(--rcx-sh),.06),0 20px 44px -28px rgba(var(--rcx-sh),.34);
  transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s;
}
.rcx *{box-sizing:border-box}
.rcx:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(var(--rcx-sh),.07),0 28px 56px -28px rgba(var(--rcx-sh),.4);
}

html[data-theme="dark"] .rcx{
  /* ---- ESPRESSO (dark) ---- */
  --rcx-surface:radial-gradient(70% 60% at 88% -8%,rgba(240,168,78,.18),rgba(255,255,255,0) 60%),
                linear-gradient(152deg,#4c3728 0%,#2c1e15 58%,#17100a 100%);
  --rcx-edge:rgba(255,255,255,.13);
  --rcx-fg:#fff8f0;
  --rcx-fg2:rgba(255,248,240,.74);
  --rcx-fg3:rgba(255,248,240,.5);
  --rcx-a:#f0a84e;
  --rcx-a2:#d97b3a;
  --rcx-a-soft:rgba(240,168,78,.12);
  --rcx-a-line:rgba(240,168,78,.3);
  --rcx-panel-bg:rgba(255,255,255,.06);
  --rcx-panel-bd:rgba(255,255,255,.13);
  --rcx-hair:rgba(255,255,255,.13);
  --rcx-track:rgba(255,255,255,.12);
  --rcx-field-bg:#fffdf9;
  --rcx-field-bd:rgba(255,255,255,.5);
  --rcx-field-fg:#1b1a17;
  --rcx-field-ph:#a79d8b;
  --rcx-btn:#150d06;
  --rcx-btn-fg:#fff;
  --rcx-btn-h:#0a0603;
  --rcx-glow:rgba(240,168,78,.1);
  --rcx-grid:rgba(255,255,255,.05);
  --rcx-sh:20,12,4;
}

.rcx::before{
  content:"";position:absolute;right:-70px;top:-96px;width:266px;height:266px;
  border-radius:50%;background:var(--rcx-glow);pointer-events:none;
}
.rcx::after{
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(0deg,var(--rcx-grid) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,var(--rcx-grid) 0 1px,transparent 1px 26px);
}
.rcx > *{position:relative;z-index:1}

/* ---------- header ---------- */
.rcx-top{display:flex;align-items:center;margin-bottom:12px}
.rcx-ico{
  width:34px;height:34px;border-radius:9px;flex:none;margin-right:10px;display:flex;
  align-items:center;justify-content:center;color:var(--rcx-a);
  background:var(--rcx-a-soft);border:1px solid var(--rcx-a-line);
}
.rcx-tag{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono,ui-monospace,Menlo,monospace);
  font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--rcx-a);
  background:var(--rcx-a-soft);border:1px solid var(--rcx-a-line);border-radius:99px;padding:5px 11px;
}
.rcx-tag i{width:6px;height:6px;border-radius:50%;background:var(--rcx-a);margin-right:8px;flex:none}

.rcx h2{
  margin:0;font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--rcx-fg);
  font-family:var(--font-display,var(--font-body,sans-serif));
}
.rcx h2 em{font-style:normal;color:var(--rcx-a)}
.rcx-lede{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--rcx-fg2);max-width:52ch}
.rcx-lede b{color:var(--rcx-fg);font-weight:700}

/* ---------- form ---------- */
.rcx-form{display:flex;gap:8px;margin:13px 0 0;flex-wrap:wrap}
.rcx-field{flex:1 1 200px;min-width:0;position:relative;display:flex;align-items:center}
.rcx-field > svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--rcx-fg3);
  pointer-events:none}
.rcx-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rcx .rcx-field input{
  width:100%;border:1px solid var(--rcx-field-bd);border-radius:10px;
  background:var(--rcx-field-bg);color:var(--rcx-field-fg);
  font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:13.5px;
  padding:11px 12px 11px 38px;outline:none;box-shadow:none;
  transition:box-shadow .16s,border-color .16s;
}
.rcx .rcx-field input::placeholder{color:var(--rcx-field-ph)}
.rcx .rcx-field input:focus{border-color:var(--rcx-a);box-shadow:0 0 0 3px var(--rcx-a-soft)}
.rcx .rcx-go{
  flex:none;cursor:pointer;border:0;border-radius:10px;padding:11px 17px;
  background:var(--rcx-btn);color:var(--rcx-btn-fg);font-family:inherit;font-size:14px;font-weight:700;
  letter-spacing:-.01em;display:inline-flex;align-items:center;
  box-shadow:0 8px 18px -10px rgba(var(--rcx-sh),.5);
  transition:transform .16s cubic-bezier(.2,.8,.25,1),background .16s;
}
.rcx .rcx-go svg{margin-left:9px;transition:transform .18s cubic-bezier(.2,.8,.25,1)}
.rcx .rcx-go:hover{background:var(--rcx-btn-h);transform:translateY(-2px)}
.rcx .rcx-go:hover svg{transform:translateX(4px)}
.rcx .rcx-go:active{transform:none}
.rcx :focus-visible{outline:2px solid var(--rcx-a);outline-offset:2px}

.rcx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.rcx-chips span{
  font-size:11.5px;font-weight:600;color:var(--rcx-fg2);background:var(--rcx-panel-bg);
  border:1px solid var(--rcx-panel-bd);border-radius:99px;padding:4px 10px;
}

/* ---------- two-column body ---------- */
.rcx-body{display:flex;gap:26px;flex-wrap:wrap;margin-top:2px}
.rcx-copy{flex:1 1 330px;min-width:0}
.rcx-panel{
  flex:1 1 460px;min-width:0;border-radius:13px;padding:13px 15px 14px;
  background:var(--rcx-panel-bg);border:1px solid var(--rcx-panel-bd);
}
.rcx-panel-h{display:flex;align-items:baseline;margin-bottom:11px}
.rcx-panel-h b{
  font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:10px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rcx-fg3);
}
.rcx-panel-h span{margin-left:auto;font-size:11px;color:var(--rcx-fg3)}

.rcx-stats{display:flex;flex-wrap:wrap;margin:0 0 12px}
.rcx-stats div{flex:1 1 25%;min-width:84px;padding:0 10px 0 0}
.rcx-stats b{
  display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.1;color:var(--rcx-fg);
}
.rcx-stats span{display:block;font-size:11px;color:var(--rcx-fg3);margin-top:3px}
.rcx-stats .hi{color:var(--rcx-a)}

.rcx-read{
  display:flex;align-items:center;padding:10px 0;margin-bottom:4px;
  border-top:1px solid var(--rcx-hair);border-bottom:1px solid var(--rcx-hair);
}
.rcx-read-l{display:block;flex:none;margin-right:14px}
.rcx-read-l b{display:block;font-size:12.5px;font-weight:700;color:var(--rcx-fg)}
.rcx-read-l span{display:block;font-size:11px;color:var(--rcx-fg3);margin-top:1px}
.rcx-scale{display:block;flex:1 1 auto;min-width:90px}
.rcx-scale-bar{
  display:block;height:7px;border-radius:99px;background:var(--rcx-track);
  position:relative;overflow:hidden;
}
.rcx-scale-bar i{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--rcx-a2),var(--rcx-a));
  transition:width .9s cubic-bezier(.2,.8,.25,1);
}
.rcx-scale-lab{
  display:flex;width:100%;justify-content:space-between;margin-top:5px;
  font-size:10px;color:var(--rcx-fg3);
}

.rcx-words{margin-top:10px}
.rcx-words-t{
  font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rcx-fg3);margin-bottom:8px;
}
.rcx-word{display:flex;align-items:center;padding:3px 0;font-size:12.5px}
.rcx-word em{
  font-style:normal;flex:0 0 96px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--rcx-fg);
}
.rcx-word .t{
  display:block;flex:1 1 auto;height:8px;border-radius:99px;background:var(--rcx-track);
  margin:0 10px;overflow:hidden;
}
.rcx-word .t i{
  display:block;height:8px;width:0;border-radius:99px;background:var(--rcx-a);
  transition:width .8s cubic-bezier(.2,.8,.25,1);
}
.rcx-word b{
  flex:none;font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:11.5px;
  font-weight:600;color:var(--rcx-fg3);font-variant-numeric:tabular-nums;
}

.rcx-links{display:flex;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid var(--rcx-hair)}
.rcx-links div{flex:1 1 33%;min-width:78px;font-size:12px;padding-right:8px}
.rcx-links b{
  display:block;font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:14px;
  font-weight:600;font-variant-numeric:tabular-nums;color:var(--rcx-fg);
}
.rcx-links span{display:block;color:var(--rcx-fg3);font-size:11px;margin-top:2px}

/* ---------- footer ---------- */
.rcx-foot{
  margin-top:auto;padding-top:12px;display:flex;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--rcx-hair);
}
.rcx-trust{
  display:inline-flex;align-items:flex-start;flex:1 1 auto;min-width:0;
  font-size:11.4px;line-height:1.45;
  color:var(--rcx-fg3);margin-right:auto;padding-right:16px;max-width:66ch;
}
.rcx-trust svg{margin:2px 8px 0 0;color:var(--rcx-a);flex:none}
.rcx-trust b{color:var(--rcx-fg2);font-weight:700}
.rcx .rcx-more{
  display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:var(--rcx-fg);
  text-decoration:none;border-bottom:1px solid var(--rcx-a);padding-bottom:1px;white-space:nowrap;
  margin-top:2px;background:none;
}
.rcx .rcx-more:hover{color:var(--rcx-a)}
.rcx .rcx-more svg{margin-left:7px;color:var(--rcx-a);transition:transform .18s cubic-bezier(.2,.8,.25,1)}
.rcx .rcx-more:hover svg{transform:translateX(4px)}

@media (max-width:620px){
  .rcx{padding:18px 17px 15px}
  .rcx-body{gap:16px}
  .rcx-panel{flex:1 1 100%;padding:12px 13px}
  .rcx-stats div{flex:1 1 50%;padding-bottom:8px}
  .rcx-word em{flex:0 0 78px}
  .rcx .rcx-go{width:100%;justify-content:center}
  .rcx-field{flex:1 1 100%}
  .rcx h2{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .rcx,.rcx *{transition:none !important}
}