/* landing-sw.css — SchradWorks, the front door of schrad.works.
 *
 * The mark is a rainbow badge over navy. A page in that whole palette would
 * be hard to read for long, so the page takes the badge's NAVY as its ink and
 * its LIME as the one accent; the rainbow lives in the sign and in a slow
 * glow behind the hero, nowhere else. Everything is a token, the same in every
 * section, high contrast, predictable. */
:root {
  --navy: #1B2140;        /* the badge's outline */
  --navy-2: #2A3260;
  --ink: #171A2B;
  --ink-2: #4A5070;
  --paper: #FFFFFF;
  --slab: #F3F4F9;
  --slab-2: #E8EAF3;
  --line: #D6D9E6;
  --lime: #C8F542;        /* the badge's green-yellow */
  --lime-ink: #12160A;
  --sky: #2F7CF6;         /* the badge's blue, for links only */
  --r: 14px; --r-lg: 22px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(23,26,43,.06), 0 8px 24px rgba(23,26,43,.08);
  --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--display); color: var(--ink); background: var(--paper); line-height: 1.5; font-size: 17px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sky); }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(34px, 5.2vw, 60px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 800; }
p { margin: 0; }

/* The bar */
.sw-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s5); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.sw-brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--navy); text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: .01em; }
.sw-brand img { border-radius: 8px; }
.sw-bar nav { display: flex; align-items: center; gap: var(--s4); }
.sw-bar nav a { color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: 15px; }
.sw-bar nav a:hover { color: var(--navy); }
@media (max-width: 720px) { .sw-bar nav a:not(.sw-btn) { display: none; } }

/* Buttons: one solid go in lime, one quiet in navy outline */
.sw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s5); border-radius: 999px;
  border: 2px solid var(--navy); background: var(--paper); color: var(--navy) !important; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.sw-btn:hover { background: var(--slab); }
.sw-btn-go { background: var(--lime); border-color: var(--navy); color: var(--lime-ink) !important; }
.sw-btn-go:hover { filter: brightness(.96); }
.sw-btn-quiet { min-height: 40px; padding: 0 var(--s4); }

/* The hero and the sign */
.sw-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 340px 1fr; gap: var(--s7); align-items: center;
  padding: var(--s7) max(var(--s5), calc((100% - var(--max)) / 2)) var(--s8); }
/* The badge's colours, once, as weather behind the sign: full width, soft, and gone by the first section. */
.sw-hero-glow { position: absolute; inset: -30% -20% auto -20%; height: 90%; z-index: -1; pointer-events: none; opacity: .5; filter: blur(70px);
  background: conic-gradient(from 200deg at 30% 40%, #F7D53A, #2FE39A, #2F7CF6, #8F4CF7, #F45BA9, #F7913A, #F7D53A);
  -webkit-mask-image: linear-gradient(#000 45%, transparent 100%); mask-image: linear-gradient(#000 45%, transparent 100%); }
.sw-sign { position: relative; width: 320px; height: 330px; margin: 0 auto; transform-origin: 160px 8px; }
.sw-rail { position: absolute; left: 0; top: 0; width: 320px; height: 60px; fill: var(--navy); }
.sw-sign-img { position: absolute; left: 32px; top: 56px; width: 256px; height: 256px; border-radius: 28px;
  filter: drop-shadow(0 14px 22px rgba(23,26,43,.25)); }
.sw-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-2); margin-bottom: var(--s3); }
.sw-lead { font-size: 20px; color: var(--ink-2); margin: var(--s4) 0 var(--s5); max-width: 42ch; }
.sw-sub { font-size: 18px; color: var(--ink-2); max-width: 60ch; margin-top: var(--s3); }
.sw-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s5); }
.sw-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); color: var(--ink-2); font-size: 16px; }
.sw-facts b { color: var(--ink); }
@media (max-width: 860px) { .sw-hero { grid-template-columns: 1fr; gap: var(--s5); padding-top: var(--s5); } .sw-sign { transform-origin: 160px 8px; } }

/* Sections */
.sw-section { max-width: var(--max); margin: 0 auto; padding: var(--s8) var(--s5); }
.sw-head { max-width: 62ch; margin-bottom: var(--s6); }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s4); }
.sw-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .sw-grid-2 { grid-template-columns: 1fr; } }
.sw-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow); display: grid; gap: var(--s3); align-content: start; }
.sw-card p { color: var(--ink-2); font-size: 16px; }
.sw-card-plain { background: var(--slab); border-color: transparent; box-shadow: none; }
.sw-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--lime); border: 2px solid var(--navy); display: grid; place-items: center; }
.sw-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Proof */
.sw-proof { background: var(--slab); max-width: none; }
.sw-proof .sw-head, .sw-shot { max-width: var(--max); margin-left: auto; margin-right: auto; }
.sw-shot { margin: 0 auto var(--s6); display: grid; gap: var(--s3); }
.sw-shot img { border-radius: var(--r-lg); border: 2px solid var(--navy); box-shadow: 0 18px 40px rgba(23,26,43,.18); background: var(--paper); }
.sw-shot figcaption { font-size: 16px; color: var(--ink-2); max-width: 70ch; }
.sw-shot-phone { grid-template-columns: minmax(0, 360px) 1fr; align-items: center; gap: var(--s6); }
.sw-shot-phone img { border-radius: 36px; border-width: 4px; }
@media (max-width: 720px) { .sw-shot-phone { grid-template-columns: 1fr; } }
.sw-shot figcaption b { color: var(--ink); }

/* Your trade */
.sw-trades { display: grid; gap: var(--s4); }
.sw-seg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sw-seg button { font: inherit; font-weight: 800; font-size: 15px; min-height: 44px; padding: 0 var(--s4); border-radius: 999px;
  border: 2px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.sw-seg button.on { border-color: var(--navy); background: var(--navy); color: var(--paper); }
.sw-tradecard { background: var(--paper); border: 2px solid var(--navy); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow); max-width: 680px; display: grid; gap: var(--s3); }
.sw-tradecard ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s2); }
.sw-tradenote { color: var(--ink-2); font-size: 15px; }

/* How we work */
.sw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); counter-reset: s; }
.sw-steps li { display: grid; grid-template-columns: 48px 1fr; gap: var(--s4); align-items: start; }
.sw-steps p { color: var(--ink-2); font-size: 16px; margin-top: var(--s1); }
.sw-num { width: 48px; height: 48px; border-radius: 50%; background: var(--lime); border: 2px solid var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 20px; }

/* Ask */
.sw-ask { background: var(--navy); color: var(--paper); max-width: none; }
.sw-ask .sw-head { max-width: var(--max); margin-left: auto; margin-right: auto; }
.sw-ask .sw-eyebrow { color: var(--lime); }
.sw-ask .sw-sub { color: rgba(255,255,255,.78); }
.sw-form { max-width: 720px; margin: 0 auto; display: grid; gap: var(--s4); }
.sw-form label { display: grid; gap: var(--s1); font-weight: 700; font-size: 15px; }
.sw-form input, .sw-form textarea { font: inherit; font-size: 17px; padding: var(--s3) var(--s4); border-radius: var(--r); border: 2px solid transparent; background: var(--paper); color: var(--ink); width: 100%; }
.sw-form input:focus, .sw-form textarea:focus { outline: none; border-color: var(--lime); }
.sw-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 640px) { .sw-row { grid-template-columns: 1fr; } }
.sw-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sw-said { padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--lime); color: var(--lime-ink); font-weight: 700; }
.sw-said.sw-bad { background: #FFD9D9; color: #7A1B1B; }
.sw-form .sw-btn-go { justify-self: start; }

/* Footer */
.sw-foot { display: flex; align-items: center; gap: var(--s4); max-width: var(--max); margin: 0 auto; padding: var(--s6) var(--s5); color: var(--ink-2); font-size: 15px; }
.sw-foot img { border-radius: 10px; }
.sw-foot b { color: var(--ink); }

/* Brought to you by — the colophon.
 *
 * Who made it, at the very bottom, where somebody who has read the whole page
 * goes looking. A dark plate rather than more page, so it reads as something
 * screwed to the bottom of the thing; and one pass of light across it as it
 * arrives, so the eye catches it on the way past. It is a link, because the
 * point of it is that they can go and find out.
 */
.sw-colophon { background: var(--navy); padding: var(--s5) var(--s5) var(--s6); display: grid; place-items: center; }
.sw-powered { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5); border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05); color: var(--paper) !important; text-decoration: none; }
.sw-powered:hover { background: rgba(255,255,255,.10); border-color: var(--lime); }
.sw-powered .eye { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55); white-space: nowrap; }
.sw-powered b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.sw-powered .dom { font-size: 14px; font-weight: 700; color: var(--lime); white-space: nowrap; }
.sw-powered .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--lime); flex: 0 0 auto; }
/* Parked off the left edge. Nothing moves it but the script, so with the
 * script gone, or motion turned down, it simply never appears. */
.sw-sheen { position: absolute; top: 0; bottom: 0; left: -60%; width: 42%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent); }
@media (max-width: 560px) {
  .sw-powered { flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s2);
    padding: var(--s3) var(--s4); border-radius: var(--r-lg); text-align: center; }
  .sw-powered .dot { display: none; }
  .sw-powered .eye { flex: 0 0 100%; }
}

/* Reveals: a final state that stands on its own without a script. */
.rv { opacity: 1; transform: none; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The conversation on the front page. */
.sw-chat { max-width: 720px; margin: 0 auto; display: grid; gap: var(--s4); }
.sw-chat label { display: grid; gap: var(--s1); font-weight: 700; font-size: 15px; }
.sw-chat input, .sw-chat textarea { font: inherit; font-size: 17px; padding: var(--s3) var(--s4); border-radius: var(--r); border: 2px solid transparent; background: var(--paper); color: var(--ink); width: 100%; }
.sw-chat input:focus, .sw-chat textarea:focus { outline: none; border-color: var(--lime); }
.sw-chatbar { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.sw-presence { font-size: 15px; color: rgba(255,255,255,.78); }
.sw-presence b { color: var(--lime); }
.sw-thread { display: grid; gap: var(--s2); max-height: 46vh; overflow: auto; padding: var(--s2); border-radius: var(--r); background: rgba(255,255,255,.06); }
.sw-thread[hidden] { display: none; }
.sw-msg { max-width: 82%; padding: var(--s2) var(--s3); border-radius: 16px; font-size: 16px; line-height: 1.45; }
.sw-msg.them { justify-self: end; background: var(--lime); color: var(--lime-ink); border-bottom-right-radius: 5px; }
.sw-msg.us { justify-self: start; background: var(--paper); color: var(--ink); border-bottom-left-radius: 5px; }
.sw-msg .sw-from { display: block; font-size: 12px; font-weight: 800; opacity: .65; margin-bottom: 2px; }