/* WebletGPT — Responsible Art & Science Explainer.

   Light, plain and legible, on white. Type is Verdana for text with Helvetica Neue for
   chrome and headings — both system faces, so nothing is fetched before the page can
   be read and the site looks the same offline as on.

   Verdana is wide and loosely spaced, which it was drawn to be. The measure is kept
   narrower and the sizes smaller than a Helvetica-based layout would use, or lines run
   too long to track. */

:root {
  --bg: #ffffff;
  --bg-2: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f4f6f8;
  --raise: #eceff3;
  --line: #dfe3e8;
  --line-soft: #eceff3;

  --ink: #14181d;
  --muted: #55606c;
  --faint: #7b8794;

  --brand: #1657c8;
  --brand-2: #0b66a3;
  --brand-ink: #ffffff;
  --accent: #b45309;

  --ok: #1a7f44; --ok-bg: #e7f4ec;
  --warn: #8a5a00; --warn-bg: #fdf3e2;
  --bad: #a52020; --bad-bg: #fcebeb;

  --radius: 10px;
  --radius-s: 7px;
  --shadow: 0 1px 2px rgba(20,24,29,.06), 0 6px 18px rgba(20,24,29,.07);
  --shadow-s: 0 1px 2px rgba(20,24,29,.05), 0 2px 8px rgba(20,24,29,.05);
  --body: Verdana, Helvetica, Arial, sans-serif;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
/* The HTML `hidden` attribute hides via the UA stylesheet's display:none, which any
   author `display` rule beats. Anything given display:grid/flex below would otherwise
   ignore `hidden` entirely — which is exactly how a tabbed gallery ends up showing
   every tab at once. */
[hidden] { display: none !important; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  /* Verdana runs large for its point size, so 15px here sets the same apparent size
     as 16px would in a narrower face. */
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-2); text-decoration: none; }
a:hover { color: #67e8f9; text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.08; margin: .2em 0 .35em; }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.2; margin: 0 0 .5em; }
h3 { font-size: 1.08rem; line-height: 1.35; margin: .2em 0 .35em; font-weight: 700; }
p { margin: 0 0 1em; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.section { padding: clamp(48px, 8vw, 96px) 20px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.muted-sm { font-size: .82rem; color: var(--faint); }
.mt { margin-top: 40px; } .mt-s { margin-top: 18px; }
.ok { color: var(--ok); font-weight: 700; }
.warn { color: var(--warn); }
.danger { color: var(--bad) !important; }
.lead { font-size: clamp(.98rem, 1.2vw, 1.1rem); color: var(--muted); max-width: 52ch; }
.center.lead { margin-left: auto; margin-right: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--brand-2);
}
.eyebrow::before {
  content: ""; width: 20px; height: 1px; background: currentColor; opacity: .6;
}

/* ---------------------------------------------------------------- nav */
.nav {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 14px; }
.brand {
  font-weight: 700; font-size: 1.04rem; color: var(--ink);
  display: flex; align-items: center; gap: 10px; white-space: nowrap; letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.logo { display: block; width: 30px; height: 30px; border-radius: 9px; flex: none; }
.nav nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.nav nav a { color: var(--muted); font-weight: 500; font-size: .93rem; transition: color .15s var(--ease); }
.nav nav a:hover { color: var(--ink); text-decoration: none; }
.nav nav a.btn { color: var(--brand-ink); }
.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .93rem; cursor: pointer; }
button.link:hover { color: var(--ink); text-decoration: underline; }
.devbar {
  background: var(--warn-bg); color: var(--warn); text-align: center;
  font-size: .82rem; padding: 7px 16px; border-bottom: 1px solid #f0dcb8;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand);
  color: var(--brand-ink); border: 1px solid var(--brand);
  padding: 11px 20px; border-radius: 11px;
  font-weight: 600; font-size: .95rem; cursor: pointer; font-family: inherit;
  text-decoration: none !important;
  box-shadow: var(--shadow-s);
  transition: transform .14s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover { background: #0f49ad; border-color: #0f49ad; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.btn-sm { padding: 7px 13px; font-size: .86rem; border-radius: 9px; }
.btn-lg { padding: 14px 26px; font-size: 1rem; border-radius: 12px; }
.btn-block { width: 100%; }
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none;
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--raise); box-shadow: none; }
.btn-light { background: #fff; color: #0b1220; border-color: #fff; }
.btn-danger { background: transparent; color: var(--bad); border-color: rgba(248,113,113,.35); box-shadow: none; }
.btn-danger:hover { background: var(--bad-bg); border-color: rgba(248,113,113,.5); }
.btn-disabled, .btn[disabled] {
  background: var(--surface-2); color: var(--faint); border-color: var(--line);
  cursor: not-allowed; box-shadow: none; transform: none;
}
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }

/* ---------------------------------------------------------------- hero */
.hero { padding: clamp(52px, 9vw, 104px) 0 clamp(36px, 5vw, 64px); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 em { font-style: normal; color: var(--brand); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 12px; }

/* The hero card is a device, not a box: it leans, catches light, and shows the product. */
.hero-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}
.hc-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: .93rem; color: var(--muted);
}
.hc-row strong { color: var(--ink); }
.hc-sep { border-top: 1px solid var(--line); margin: 10px 0; }

/* ---------------------------------------------------------------- steps / tools */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.num {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--raise); color: var(--brand-2);
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.step p, .tool p { color: var(--muted); margin: 0; font-size: .94rem; }
.step-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.step-head h2 { margin: 0; }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 26px; }
.tool {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.tool:hover { border-color: var(--raise); transform: translateY(-2px); }
.tool-icon { font-size: 1.6rem; }

.band {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--radius); padding: 34px;
  display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.band h2 { margin: 0; } .band p { margin: 6px 0 0; color: var(--muted); }

/* ---------------------------------------------------------------- plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; margin-top: 34px; align-items: stretch; }
.plan {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-s);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.plan:hover { border-color: var(--raise); transform: translateY(-2px); }
.plan .btn { margin-top: auto; }
.plan-featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset, var(--shadow); }
.ribbon {
  position: absolute; top: -11px; left: 24px;
  background: var(--brand); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: 4px 11px; border-radius: 99px;
}
.price { font-family: var(--display); font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; }
.price span { font-family: var(--body); font-size: .95rem; font-weight: 500; color: var(--muted); }
.checks { list-style: none; padding: 0; margin: 16px 0 24px; }
.checks li { padding: 6px 0 6px 27px; position: relative; color: var(--muted); font-size: .94rem; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.matrix, table.simple { width: 100%; border-collapse: collapse; background: var(--surface); }
table.matrix { margin-top: 0; }
.matrix th, .matrix td, .simple th, .simple td {
  padding: 12px 15px; border-bottom: 1px solid var(--line); text-align: left; font-size: .92rem;
}
.matrix tr:last-child td, .simple tr:last-child td { border-bottom: 0; }
.matrix th { background: var(--surface-2); font-weight: 600; }
.simple th {
  color: var(--faint); font-weight: 700; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .08em; background: var(--surface-2);
}
.matrix tbody tr:hover, .simple tbody tr:hover { background: rgba(255,255,255,.02); }

/* ---------------------------------------------------------------- cards & forms */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-s);
}
.auth { display: flex; justify-content: center; padding: clamp(36px, 7vw, 76px) 20px; }
.auth .card { width: 100%; max-width: 470px; }
label { display: block; font-weight: 500; font-size: .91rem; margin-bottom: 15px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url],
input[type=search], input[type=tel], input:not([type]),
label select, textarea, .inp {
  display: block; width: 100%; margin-top: 7px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  font: inherit; font-size: .95rem; background: var(--bg-2); color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus, .inp:focus {
  outline: 2px solid rgba(79,140,255,.5); outline-offset: -1px;
  border-color: var(--brand); background: var(--surface-2);
}
textarea { font-size: .9rem; line-height: 1.55; resize: vertical; }

.flashes { padding-top: 18px; }
.flash {
  padding: 12px 15px; border-radius: var(--radius-s); margin-bottom: 10px;
  font-size: .93rem; background: var(--surface-2); border: 1px solid var(--line);
}
.flash-success { background: var(--ok-bg); color: var(--ok); border-color: rgba(74,222,128,.3); }
.flash-error { background: var(--bad-bg); color: var(--bad); border-color: rgba(248,113,113,.3); }
.flash-info { background: var(--warn-bg); color: var(--warn); border-color: rgba(245,165,36,.3); }
.notice {
  background: var(--warn-bg); color: var(--warn); padding: 11px 14px;
  border: 1px solid rgba(245,165,36,.28); border-radius: var(--radius-s);
  font-size: .91rem; margin: 14px 0;
}
#paypal-button { margin: 18px 0 8px; min-height: 50px; }

/* ---------------------------------------------------------------- dashboard */
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.dash-head h1 { margin-bottom: 0; }
.dash-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
.label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 700; }
.big { font-family: var(--display); font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; }
.pill {
  display: inline-block; padding: 4px 11px; border-radius: 99px;
  font-size: .76rem; font-weight: 700; letter-spacing: .03em;
  background: var(--raise); color: var(--muted); margin-top: 6px;
}
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tools-list { display: flex; flex-direction: column; }
.tool-row { display: grid; grid-template-columns: 1fr 200px auto; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.tool-row:last-child { border-bottom: 0; }
.tool-row.locked .tr-name { opacity: .5; }
.tr-name { display: flex; gap: 13px; align-items: center; }
.tr-icon { font-size: 1.4rem; width: 32px; text-align: center; }
.bar { height: 7px; background: var(--raise); border-radius: 99px; overflow: hidden; margin-bottom: 5px; }
.bar div { height: 100%; background: var(--brand); border-radius: 99px; }
.bar div.hot { background: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; }
.howto li { margin-bottom: 11px; color: var(--muted); }
.howto ul { margin: 6px 0; }
details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 13px 17px; margin-bottom: 10px;
}
summary { cursor: pointer; font-weight: 600; }
summary:hover { color: var(--brand-2); }
.prose p { margin: 0 0 1em; color: var(--muted); }

label.check { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; font-size: .9rem; }
label.check input { margin-top: 4px; width: auto; }
.filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.filters select, .filters input {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-s);
  font: inherit; background: var(--surface); color: var(--ink); margin: 0;
}
.filters input { display: inline-block; width: auto; min-width: 220px; }

/* ---------------------------------------------------------------- legal */
.privacy h2 { margin-top: 40px; scroll-margin-top: 90px; }
.privacy ul { padding-left: 20px; color: var(--muted); }
.privacy li { margin-bottom: 7px; }
.privacy .table-wrap { margin: 14px 0 18px; }
.privacy td { vertical-align: top; }
.toc { margin: 24px 0 8px; }
.toc ol { columns: 2; margin: 8px 0 0; padding-left: 20px; font-size: .92rem; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* ---------------------------------------------------------------- admin */
.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.admin-tabs a {
  padding: 10px 15px; color: var(--muted); font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tabs a:hover { color: var(--ink); text-decoration: none; }
.admin-tabs a.on { color: var(--brand-2); border-bottom-color: var(--brand-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.form-grid .full { grid-column: 1 / -1; }
fieldset {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 14px 16px; margin: 0 0 15px; display: flex; flex-direction: column; gap: 4px;
}
legend { font-weight: 600; font-size: .89rem; padding: 0 5px; color: var(--muted); }
.plan-field { display: grid; grid-template-columns: 220px 140px auto; gap: 10px; align-items: center; }
.plan-field label.check { margin: 0; }
.plan-field input[type=text] { margin: 0; }
dl.setup { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 9px 17px; margin: 18px 0; align-items: center; }
dl.setup dt { font-weight: 600; font-size: .89rem; color: var(--muted); }
dl.setup dd { margin: 0; display: flex; gap: 8px; align-items: center; min-width: 0; }
dl.setup code, .wrapcode {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 9px; font-size: .83rem; overflow-wrap: anywhere; color: var(--brand-2);
}
code.secret { background: var(--warn-bg); border-color: rgba(245,165,36,.4); color: var(--warn); }
.row-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-form input[type=text] { margin: 0; width: auto; min-width: 260px; }
pre.code {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 14px; overflow-x: auto; font-size: .82rem; color: var(--muted);
}

/* ---------------------------------------------------------------- footer */
.footer {
  border-top: 1px solid var(--line); margin-top: 60px; padding: 36px 0 30px;
  background: var(--surface-2);
}
.footer-inner { display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: .92rem; }
.footer-links a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .hero-grid, .dash-grid, .steps { grid-template-columns: 1fr; }
  .tool-row { grid-template-columns: 1fr; gap: 8px; }
  .nav nav { gap: 14px; }
  .nav nav a:not(.btn):not(.keep) { display: none; }
  .band { padding: 26px; }
}
@media (max-width: 760px) {
  .form-grid, dl.setup { grid-template-columns: 1fr; }
  .plan-field { grid-template-columns: 1fr 1fr; }
}