:root{
  --ink:#0e1726;
  --muted:#64748b;
  --border:#e5e7eb;
  --card:#ffffff;
  --bg:#fafafa;

  /* NEW: teal accents used by links/buttons/focus rings */
  --accent:#0e7490;     /* dark teal */
  --accent-2:#0b5e73;   /* darker teal (hover/gradient end) */
  --accent-3:#99f6e4;   /* light teal (subtle borders) */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
.wrap{ max-width:980px; margin:0 auto; padding:24px; }

h1{ margin:.2rem 0 1rem; }
h2{ margin:1.2rem 0 .6rem; }
h3{ margin:1rem 0 .4rem; }
p{ line-height:1.55; }
.muted{ color:var(--muted); }

/* Cards, grids, form helpers */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin:16px 0;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; }
.choices{ display:flex; gap:12px; align-items:center; }
.actions{ grid-column:1 / -1; display:flex; justify-content:flex-end; }
.req{ color:#dc2626; }
.help{ color:var(--muted); font-size:.9rem; }

/* Buttons */
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  font-weight:600;
  padding:10px 16px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
}
.btn:hover{ filter:brightness(1.05); }

/* Flash messages */
.flash-wrap{ margin:16px 0; }
.flash{
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  background:#fff;
}
.flash.error{ border-color:#fca5a5; background:#fee2e2; }
.flash.warning{ border-color:#fde68a; background:#fef3c7; }
.flash.success{ border-color:#86efac; background:#dcfce7; }

/* Code blocks */
pre.code{
  margin:0;
  padding:12px;
  background:#f0fdf4;        /* light green */
  color:#0f1d15;
  border:1px solid var(--accent-3);
  border-radius:10px;
  max-height:40vh;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Two-column sections */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){
  .form-grid, .two-col { grid-template-columns:1fr; }
}

/* Links */
a{ color:var(--accent); }

/* Form focus */
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(14,116,144,.25); /* teal focus ring */
}

/* Wrap long tokens/IDs inside cards and notes */
.card, .note, .success, .alert, p, li, a{
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* -------- Screenshots -------- */
/* Center the screenshot block */

.screenshot{
  display: grid;
  place-items: center;
  margin: 12px 0 20px;
}
.screenshot img{
  display: block;
  width: auto !important;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.hero-img{
  display:block;
  width:543px;        /* forces the same width as the old page */
  height:auto;        /* keeps the image’s aspect ratio */
  margin: 0 auto;     /* center it; remove if you don’t want centered */
}
@media (max-width: 560px){
  .hero-img{ width:100%; height:auto; } /* small screens */
}
/* === WP typography + colors === */
:root{
  --teal:#007B8A;      /* heading/link teal from WP */
}

/* Use Century Gothic for headings */
h1,h2,h3{
  font-family:"Century Gothic","CenturyGothic","Avant Garde",ui-sans-serif,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  color:var(--teal);
  margin:0 0 12px;
}

/* Big H1 like WP (≈60px) */
.wp-h1{
  font-size:50px;
  line-height:1.1;
  padding:6px 0;
  position:relative;
}
.wp-h1::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px;
  height:8px; 
}

/* Section H2 like WP (≈32px) with same decoration */
.wp-h2{
  font-size:32px;
  line-height:1.2;
  padding:4px 0;
  position:relative;
}
.wp-h2::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:6px; 
}

/* Labels look teal like the WP form */
label{ 
  font-family:"Century Gothic","CenturyGothic","Avant Garde",ui-sans-serif,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--teal); 
  font-size:17px;
}

/* Make sure the form isn’t dark */
.card{ background:#ffffff; border:1px solid #e5e7eb; }
input,select,textarea{ background:#fff; color:#111; border:1px solid #cfd8e3; }

/* === Logo sizing (tweak to match WP exactly) === */
:root{
  --logo-top-w: 190px;     /* top Analytica logo width */
  --logo-bottom-w: 100px;  /* bottom "analytica by Lumina" width */
}

/* keep them aligned to the left edge of the text column */
.header-logo{ margin: 8px 0 6px; }
.header-logo img{
  display:block; width:var(--logo-top-w); height:auto;
}

.footer-logo{ margin: 40px 0 16px; }
.footer-logo img{
  display:block; width:var(--logo-bottom-w); height:auto;
}

/* responsive: don’t spill on small screens */
@media (max-width: 680px){
  .header-logo img{ width:min(60vw, var(--logo-top-w)); }
  .footer-logo img{ width:min(60vw, var(--logo-bottom-w)); }
}
.header-logo{
  margin: 8px 0 6px;
  text-align: left !important;   /* override any centered parent */
}
.header-logo a{ display:inline-block; }
.header-logo img{
  display:block;
  width:210px;   /* keep in sync with the HTML width */
  height:auto;
}
/* Left-align and size the footer logo */
.footer-logo{
  margin: 40px 0 16px;
  text-align: left !important;   /* override any centered parent */
}
.footer-logo img{
  display: block;
  width: 100px;                  /* match the HTML width */
  height: auto;
}
/* === Left-align the column like the WP page === */
:root{
  --page-width: 627px;   /* your measured column width */
  --edge-pad: 56px;      /* distance from viewport’s left edge to the logos (tweak) */
  --logo-top-w: 190px;   /* header logo width */
  --logo-bottom-w: 100px;/* footer logo width */
}

/* Keep images at known sizes */
.header-logo img{ width: var(--logo-top-w); height: auto; display:block; }
.footer-logo img{ width: var(--logo-bottom-w); height: auto; display:block; }

/* Out-dent ONLY the logo blocks to align near the viewport’s left edge */
.header-logo,
.footer-logo{
  text-align: left;
  /* shift left by half the leftover space, then add a small gutter */
  margin-left: calc( var(--edge-pad) - (100vw - var(--page-width)) / 2 );
}

/* On small screens, don’t out-dent; just follow the column */
@media (max-width: 700px){
  .header-logo,
  .footer-logo{ margin-left: 0; }
  .header-logo img{ width: min(60vw, var(--logo-top-w)); }
  .footer-logo img{ width: min(60vw, var(--logo-bottom-w)); }
}

/* Tighten on small screens so it doesn’t hug the edge */
@media (max-width: 900px){
  :root{ --left-gutter: 24px; }
}