/* Selr AI form system.
   Values follow the selr-design-language skill, measured off www.selrai.com.au.
   The site governs the branding; nothing in this file may drift from it. */

:root {
  /* ground is warm off-white, never pure white. everything follows from this */
  --ground:      #F7F5EF;
  --surface:     #fcfcfa;
  --surface-hi:  #fffffa;
  --alt:         #fafaf7;

  --ink-max:     #0d0d0d;
  --display:     #1f1f1f;
  --body:        #242424;
  --ink:         #292929;
  --ink-2:       #3d3d3d;
  --muted:       #616161;

  /* exactly one accent, on a tiny fraction of pixels */
  --accent:      #6736E2;
  --signal-bad:  #c25d5d;

  /* hairlines are alpha, never solid. no shadows anywhere in this system */
  --hair:        rgba(227, 227, 227, 0.45);
  --ring:        rgba(255, 255, 255, 0.75);
  --field:       rgba(255, 255, 255, 0.35);
  --field-focus: #fafaf7;

  --r-field:  20px;
  --r-card:   30px;
  --r-btn:    40px;

  --spring: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  /* Manrope does everything. The variable face carries display at wght 585. */
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ---------------------------------------------------------------- chrome */

/* a form page is standalone: one lockup, no nav, nowhere else to go */
.brand {
  width: min(680px, calc(100% - 40px));
  margin: 44px auto 0;
}
.brand a { display: inline-block; }
.brand img { height: 26px; width: auto; display: block; }

.brand-links { margin-left: auto; display: flex; gap: 26px; }
.brand-links a {
  color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: 15px; letter-spacing: -0.03em;
}
.brand-links a:hover { color: var(--accent); }
.brand.bar { display: flex; align-items: center; gap: 28px; }

.wrap { width: min(680px, calc(100% - 40px)); margin: 0 auto; }
.wrap.wide { width: min(1160px, calc(100% - 40px)); }
.brand.wide { width: min(1160px, calc(100% - 40px)); }

.page-head { padding: 52px 0 36px; }
.eyebrow {
  font-family: Manrope, sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: -0.025em; color: var(--muted);
  margin: 0 0 14px;
}

/* the offer name IS the heading, at the site's display scale */
h1 {
  font-weight: 585; letter-spacing: -0.04em; line-height: 1.05;
  font-size: clamp(42px, 8vw, 64px); color: var(--display);
  margin: 0 0 12px;
}
/* the site's two-tone line: lead clause ink, resolving clause muted */
.sub {
  font-size: clamp(21px, 3.5vw, 27px); font-weight: 585;
  letter-spacing: -0.035em; line-height: 1.25;
  color: var(--display); margin: 0 0 16px;
}
h1 .dim, .sub .dim { color: var(--muted); }
.lede { font-size: clamp(17px, 2vw, 20px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink-2); max-width: 58ch; margin: 0; line-height: 1.5; }

/* ------------------------------------------------------- signature footer
   Ported from the drop-page builder via selr-links SelrSignature.tsx.
   If the drop-page footer changes, re-copy the values — do not hand-edit. */

footer {
  margin-top: 64px; padding: 26px 0 52px;
  border-top: 1px solid var(--hair);
  color: var(--muted); font-size: 13px; letter-spacing: -0.025em;
}
footer.sig { display: flex; flex-direction: column; gap: 14px; color: var(--body); font-size: 16px; }
.sig-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sig-logo { height: 20px; width: auto; display: block; align-self: flex-start; }
.sig-id { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sig-details {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.025em;
  color: var(--muted); line-height: 1.5;
}
/* Claude Partner Network credential. Mark first, one line under it — the same
   order and the same words as the VSL page footer and the email signature
   (Luke 2026-08-19: the membership goes on every footer, at a size that reads).
   34px -> 40px in that pass. WORDING: "member" is the cleared form. Never
   "certified", never "official Anthropic partner" (memory/claude-partner-network). */
.cred { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cred-label { font-size: 12px; font-weight: 600; letter-spacing: -0.015em; color: var(--muted); }
.cred-mark { height: 40px; width: auto; display: block; }
.sig-eyebrow {
  margin: 0; display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.025em; color: var(--accent);
}
.sig-eyebrow::before {
  content: ""; width: 24px; height: 2px; background: var(--accent);
  flex: none; border-radius: 2px; transform: translateY(-5px);
}
.sig-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
a.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--hair); border-radius: 100%;
  color: var(--ink-2); background: var(--surface-hi); text-decoration: none;
  transition: border-color .3s var(--spring), color .3s var(--spring), background-color .3s var(--spring);
}
a.ico svg { width: 18px; height: 18px; display: block; }
a.ico:hover { border-color: var(--accent); color: var(--surface-hi); background: var(--accent); }
a.ico:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.site {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0;
  font-size: 17px; font-weight: 600; color: var(--surface-hi); background: var(--accent);
  text-decoration: none; letter-spacing: -0.03em; border-radius: var(--r-btn); padding: 15px 20px;
  transition: background-color .3s var(--spring);
}
a.site:hover { background: #5024C0; }
a.site:active { transform: scale(.98); }
a.site:hover .sig-note { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.025em; color: var(--muted); }
@media (max-width: 520px) {
  .cred { margin-left: 0; align-items: flex-start; }
  a.site { margin-left: 0; }
}

/* ------------------------------------------------------------ form card */

.card {
  background: rgba(227, 227, 227, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--ring);
  padding: 34px;
}

.fields { display: flex; flex-direction: column; gap: 16px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

label { display: block; }
.label {
  display: block;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em;
  color: #242424; margin-bottom: 7px;
}
.optional { color: var(--muted); font-weight: 500; }

/* the wrapper carries the padding and the surface, the control itself is bare */
.field {
  background: var(--surface-hi);
  border: 1px solid var(--hair);
  border-radius: var(--r-field);
  padding: 12px 16px;
  transition: background .3s var(--spring), border-color .3s var(--spring);
}
.field:focus-within { background: var(--surface-hi); border-color: var(--accent); }

.field input,
.field textarea,
.field select {
  width: 100%; border: 0; outline: 0; background: transparent; padding: 0;
  font-family: Manrope, sans-serif;
  font-size: 16px; font-weight: 500; letter-spacing: -0.03em;
  color: #242424; line-height: 1.2;
}
.field textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.field select { appearance: none; cursor: pointer; }
.field.select { position: relative; }
.field.select::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
::placeholder { color: var(--muted); opacity: 1; }

.field.invalid { border-color: var(--signal-bad); }
.err {
  display: none; margin: 6px 0 0;
  font-size: 13px; color: var(--signal-bad); letter-spacing: -0.01em;
}
.invalid + .err { display: block; }

/* checkbox and radio groups, used by the feedback form */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices.under { margin-top: 10px; }   /* a toggle that belongs to the field above it */
.choice {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  background: var(--surface-hi);
  border: 1px solid var(--hair);
  border-radius: var(--r-btn);
  font-size: 14px; letter-spacing: -0.025em; cursor: pointer;
  transition: background .2s var(--spring), border-color .2s var(--spring);
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:hover { background: rgba(255, 255, 255, 0.6); }
/* .on is set by forms.js on change. :has() alone was not repainting reliably,
   and a pill that does not visibly select is the whole control broken. */
.choice.on,
.choice:has(input:checked) {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.choice.on:hover, .choice:has(input:checked):hover { background: var(--accent); }

/* honeypot. a real person never sees it, a bot fills it in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0;
  height: 44px; padding: 0 26px;
  border-radius: var(--r-btn);
  background: var(--ink-max); color: var(--surface-hi);
  font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
  transition: background .3s var(--spring), transform .3s var(--spring);
}
.btn:hover { background: var(--accent); }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: .5; cursor: default; }

.fineprint { font-size: 13px; color: var(--muted); margin: 0; letter-spacing: -0.01em; }

/* success replaces the form in place, no redirect */
.done { display: none; text-align: left; padding: 18px 0 8px; }
.done h2 {
  font-weight: 600; font-size: 26px; letter-spacing: -0.03em;
  color: var(--display); margin: 0 0 10px;
}
.done p { margin: 0; color: var(--ink-2); }
form.sent { display: none; }
form.sent + .done { display: block; }

/* ------------------------------------------------- staging index only */

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tile {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--hair);
  padding: 26px;
  transition: box-shadow .3s var(--spring), transform .3s var(--spring);
}
.tile:hover { box-shadow: 0 0 0 1px var(--accent); transform: translateY(-2px); }
.tile h3 {
  font-weight: 600; font-size: 20px; letter-spacing: -0.03em;
  color: var(--display); margin: 0 0 8px;
}
.tile p { margin: 0 0 16px; font-size: 15px; color: var(--ink-2); }
.meta { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
  font-family: Manrope, sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: -0.01em;
  padding: 5px 11px; border-radius: var(--r-btn);
  background: var(--field); border: 1px solid var(--hair); color: var(--ink-2);
}
.pill.new { background: var(--accent); border-color: var(--accent); color: #fff; }

.note {
  background: var(--alt);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--hair);
  padding: 22px 26px; margin: 34px 0 0;
  font-size: 15px; color: var(--ink-2);
}
.note strong { color: var(--display); }

/* Framer's own breakpoints, 810 and 1200. Not Tailwind's. */
@media (max-width: 810px) {
  .row, .grid { grid-template-columns: 1fr; }
  .card { padding: 26px; }
  .page-head { padding: 40px 0 28px; }
  .brand { margin-top: 28px; }
  .brand img { height: 22px; }
  .brand-links { gap: 16px; }
  .brand-links a { font-size: 14px; }
}

/* ------------------------------------------------ ABN register lookup

   The widget injects its own stylesheet at runtime, after ours, so these
   overrides carry an extra `body` to win on specificity. It ships generic
   greys, greens and blues, none of which belong on this site. Same ground,
   same hairlines, same one accent, same 20px corners as every other field. */

body .abnw-dropdown {
  background: var(--surface-hi);
  border: 1px solid var(--hair);
  border-radius: var(--r-field);
  box-shadow: none;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  overflow: hidden;
}
body .abnw-item { color: var(--body); border-bottom: 1px solid var(--hair); padding: 11px 16px; }
body .abnw-item:hover, body .abnw-item.abnw-active { background: var(--alt); }
body .abnw-item .abnw-n { font-family: Manrope, sans-serif; font-weight: 600; letter-spacing: -0.02em; }
body .abnw-item .abnw-m { color: var(--muted); font-size: 12px; }

body .abnw-badge {
  background: var(--field); color: var(--ink-2);
  border: 1px solid var(--hair); border-radius: var(--r-btn);
  padding: 1px 8px; font-size: 11px;
}
body .abnw-badge.ok { background: var(--accent); border-color: var(--accent); color: #fff; }

body .abnw-empty { color: var(--muted); padding: 12px 16px; }
body .abnw-empty a { color: var(--accent); }

body .abnw-verified {
  background: var(--field);
  border: 1px solid var(--hair);
  border-radius: var(--r-field);
  padding: 12px 16px;
}
body .abnw-verified.warn { background: var(--field); border-color: var(--signal-bad); }
body .abnw-verified.unv  { background: var(--field); border-color: var(--hair); }
body .abnw-chk { background: var(--accent); }
body .abnw-verified.warn .abnw-chk { background: var(--signal-bad); }
body .abnw-verified.unv .abnw-chk  { background: var(--muted); }
body .abnw-vlabel { color: var(--accent); font-family: Manrope, sans-serif; }
body .abnw-verified.warn .abnw-vlabel { color: var(--signal-bad); }
body .abnw-verified.unv .abnw-vlabel  { color: var(--muted); }
body .abnw-vname { font-family: Manrope, sans-serif; color: var(--display); }
body .abnw-vdet  { color: var(--ink-2); }
body .abnw-change { color: var(--accent); }

/* Bullet list for page copy. Added for the ads webinar page, kept here rather
   than inline so any later form page gets the same dot. */
.points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; max-width: 58ch; }
.points li { position: relative; padding-left: 20px; font-size: 16px; color: var(--ink-2); line-height: 1.55; }
.points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.note .points { margin: 0; }
.note .points li { font-size: 15px; }