/* SOP Heroes — LA Build Expo landing pages */
:root{
  --red:#e3101b; --red-dark:#b50b14; --red-soft:#fdecec;
  --ink:#141414; --ink-2:#3a3a3a; --muted:#6b6b6b;
  --line:#e6e6e6; --bg:#ffffff; --bg-alt:#f6f6f4; --sky:#e3f2ff;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.10);
  --display:'Anton','Oswald','Impact',sans-serif;
  --body:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--red)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}

/* Header */
.topbar{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:10px}
.brand{text-decoration:none;color:var(--ink);line-height:1;display:flex;align-items:center;gap:10px}
.brand .logo-art{flex:0 0 auto;height:52px;width:auto;display:block}
.brand-text{display:block}
.brand .word{font-size:26px;letter-spacing:-.5px;font-weight:500}
.brand .word b{color:var(--red);font-weight:800}
.brand .tag{display:block;font-size:11px;font-weight:600;letter-spacing:.2px;margin-top:5px;color:var(--ink-2);line-height:1.3}
.brand .tag .tl{display:block}
.r{color:var(--red)}
.brand .r{font-weight:800}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:var(--ink);color:#fff;padding:7px 11px;border-radius:999px;white-space:nowrap}

/* Type */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.5px;margin:0}
.display .r{color:var(--red)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--red);margin:0 0 10px}
h2.display{font-size:clamp(34px,6vw,54px)}
.lead{font-size:17px;color:var(--ink-2);margin:14px 0 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:800;font-size:16px;letter-spacing:.4px;text-transform:uppercase;text-decoration:none;border:0;border-radius:10px;padding:16px 22px;cursor:pointer;transition:transform .08s ease,background .2s ease;min-height:54px}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#000}
.btn-ghost{background:#fff;color:var(--ink);border:2px solid var(--ink)}.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--red)}.btn-white:hover{background:#ffeaea}
.btn[disabled]{opacity:.6;cursor:wait}
.btn-block{width:100%}

/* ===== Entry page ===== */
.entry-hero{background:#fff;padding:18px 0 40px}
.entry-grid{display:grid;gap:20px;grid-template-areas:"copy" "form" "prize"}
.entry-copy{grid-area:copy}.form-card{grid-area:form}.prize{grid-area:prize}
.prize{margin:0;position:relative}
.prize img{width:100%;height:auto;aspect-ratio:980/660;object-fit:contain}

.entry-copy h1{font-size:clamp(44px,12vw,84px)}
.entry-copy .sub{font-size:17px;font-weight:600;margin:12px 0 0;color:var(--ink-2)}
.entry-copy .sub strong{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.chips li{font-size:12px;font-weight:700;background:var(--red-soft);color:var(--red-dark);padding:7px 11px;border-radius:999px}

.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);padding:24px}
.form-card h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:30px;margin:0 0 4px;letter-spacing:.5px}
.form-card .hint{margin:0 0 18px;color:var(--muted);font-size:14px}
.field{margin:0 0 14px}
.field label{display:block;font-weight:700;font-size:14px;margin:0 0 6px}
.field label .req{color:var(--red)}
.field input{width:100%;font:inherit;font-size:16px;padding:14px 14px;border:1.5px solid #cfcfcf;border-radius:10px;background:#fff;color:var(--ink);transition:border-color .15s, box-shadow .15s}
.field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(227,16,27,.18)}
.field input[aria-invalid="true"]{border-color:var(--red);background:#fff8f8}
.field .err{display:none;color:var(--red-dark);font-size:13px;font-weight:600;margin-top:5px}
.field input[aria-invalid="true"] + .err{display:block}
.two{display:grid;gap:0 14px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);margin:6px 0 16px}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--red);flex:0 0 auto}
.consent.invalid{color:var(--red-dark)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-status{display:none;margin:12px 0 0;padding:12px 14px;border-radius:10px;font-weight:600;font-size:14px}
.form-status.error{display:block;background:#fff1f1;color:var(--red-dark);border:1px solid #f5c2c2}
.form-status.ok{display:block;background:#eefaf0;color:#17692c;border:1px solid #bfe5c8}
.fine{font-size:12px;color:var(--muted);margin:14px 0 0;text-align:center}
.fine a{color:var(--muted)}
.skip-link{display:block;text-align:center;margin-top:12px;font-size:14px;font-weight:700;color:var(--ink)}

/* ===== Resource hub ===== */
.thanks{position:relative;overflow:hidden;color:var(--ink);border-bottom:1px solid var(--line);
  background:radial-gradient(60% 80% at 88% 45%,#e3f2ff 0%,rgba(227,242,255,0) 70%),linear-gradient(180deg,#fbfcfd 0%,#fff 100%)}
.thanks:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(#d9e1e8 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 55%);mask-image:linear-gradient(90deg,#000 0%,transparent 55%)}
.thanks .wrap{position:relative;display:grid;gap:8px;align-items:center;padding-top:30px;padding-bottom:10px}
.confirm{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.05);border-radius:999px;padding:6px 14px 6px 6px;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.confirm .dot{width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:13px}
.thanks h1{font-size:clamp(44px,9vw,76px);margin:18px 0 0}
.thanks-copy p{margin:14px 0 0;font-size:17px;color:var(--ink-2);max-width:540px}
.thanks .btn-row{margin-top:24px}
.facts{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;font-weight:600;color:var(--ink-2)}
.facts li{display:flex;align-items:center;gap:8px}
.facts svg{width:20px;height:20px;fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.thanks-art img{width:100%;max-width:420px;margin:0 auto}
.section{padding:56px 0}
.section.alt{background:var(--bg-alt)}
.blueprint{display:grid;gap:26px;align-items:center}
.bp-cover{background:linear-gradient(145deg,#1b1b1b,#2c2c2c);color:#fff;border-radius:var(--radius);padding:28px 28px 84px;box-shadow:var(--shadow);position:relative;overflow:hidden;min-height:250px}
.bp-cover:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-40px;height:96px;background:var(--red);transform:rotate(-6deg)}
.bp-cover .k{font-size:11px;letter-spacing:2.4px;font-weight:800;color:#ff7a80;text-transform:uppercase}
.bp-cover .t{font-family:var(--display);font-size:46px;line-height:.95;text-transform:uppercase;margin:12px 0 0;position:relative;z-index:1}
.bp-cover .t span{color:var(--red)}
.bp-cover .s{position:relative;z-index:1;margin-top:14px;font-size:13px;opacity:.8;max-width:240px}
.ticks{list-style:none;padding:0;margin:18px 0 22px}
.ticks li{position:relative;padding-left:30px;margin:0 0 10px;font-weight:500}
.ticks li:before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:5px;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.pillars{display:grid;gap:14px;margin-top:26px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;gap:14px;align-items:flex-start}
.pillar .ic{flex:0 0 44px;height:44px;border-radius:10px;background:var(--red-soft);display:grid;place-items:center}
.pillar .ic svg{width:24px;height:24px;stroke:var(--red);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pillar h3{margin:0;font-size:15px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.pillar h3 span{color:var(--red)}
.pillar p{margin:4px 0 0;font-size:14px;color:var(--ink-2)}

.tips{display:grid;gap:14px;margin-top:26px}
.tip{background:#fff;border-radius:var(--radius);border:1px solid var(--line);padding:22px;position:relative}
.tip .n{font-family:var(--display);font-size:40px;color:var(--red);line-height:1}
.tip h3{margin:8px 0 6px;font-size:18px;font-weight:800}
.tip p{margin:0;font-size:15px;color:var(--ink-2)}

.magnets{display:grid;gap:16px;margin-top:26px}
.magnet{border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);background:#fff}
.magnet.feature{background:var(--ink);color:#fff;border-color:var(--ink)}
.magnet .tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;padding:5px 9px;border-radius:6px;background:var(--red-soft);color:var(--red-dark)}
.magnet.feature .tag{background:var(--red);color:#fff}
.magnet h3{margin:4px 0 0;font-size:21px;font-weight:800;line-height:1.25}
.magnet p{margin:0;font-size:15px;opacity:.85;flex:1}
.magnet .btn{margin-top:8px;align-self:flex-start}

.notion{display:grid;gap:22px;align-items:center;background:var(--sky);border-radius:20px;padding:28px}
.notion .mock{background:#fff;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;font-size:12px}
.notion .mock .bar{display:flex;gap:6px;padding:10px 12px;background:#f1f1f1}
.notion .mock .bar i{width:9px;height:9px;border-radius:50%;background:#d0d0d0;display:block}
.notion .mock .body{padding:16px}
.notion .mock .ttl{font-weight:800;font-size:15px;margin-bottom:10px}
.notion .mock .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.notion .mock .grid div{background:var(--bg-alt);border-radius:8px;padding:10px 8px;font-weight:700;color:var(--ink-2)}
.notion .mock .grid div:before{content:"";display:block;height:26px;border-radius:5px;background:linear-gradient(135deg,var(--red-soft),#ffd6d8);margin-bottom:6px}

.clients{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
.client{border:1px solid var(--line);border-radius:12px;background:#fff;height:96px;padding:14px 16px;display:grid;place-items:center}
.client img{max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain}

.cta-band{background:var(--red);color:#fff;text-align:center;padding:56px 0}
.cta-band h2{font-size:clamp(38px,7vw,64px)}
.cta-band p{max-width:620px;margin:14px auto 24px;font-size:17px}
.cta-band .btn-row{justify-content:center}

footer{background:var(--ink);color:#bdbdbd;padding:30px 0;font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
footer a{color:#fff}
footer .brand{color:#fff}

/* Rules page */
.doc{max-width:780px;margin:0 auto;padding:40px 20px 60px}
.doc h1{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:44px;margin:0 0 6px}
.doc h2{font-size:17px;margin:28px 0 6px}
.doc p,.doc li{color:var(--ink-2);font-size:15px}
.doc mark{background:#fff3b0;padding:0 3px}

/* Desktop */
@media (min-width:860px){
  .entry-hero{background:linear-gradient(90deg,#fff 0%,#fff 58%,var(--bg-alt) 58%);padding:44px 0 64px}
  .entry-grid{grid-template-columns:1.1fr .9fr;grid-template-areas:"copy form" "prize form";gap:24px 44px;align-items:start}
  .entry-copy{padding-top:10px}
  .form-card{position:sticky;top:84px}
  .two{grid-template-columns:1fr 1fr}
  .thanks .wrap{grid-template-columns:1.15fr .85fr;gap:40px;padding-top:64px;padding-bottom:64px}
  .brand .tag .tl{display:inline}
  .clients{grid-template-columns:repeat(3,1fr)}
  .client{height:110px}
  .blueprint{grid-template-columns:.85fr 1.15fr;gap:44px}
  .pillars{grid-template-columns:repeat(4,1fr)}
  .tips{grid-template-columns:repeat(3,1fr)}
  .magnets{grid-template-columns:1.2fr 1fr 1fr}
  .magnets.no-hub{grid-template-columns:1.2fr 1fr}
  .notion{grid-template-columns:1fr 1fr;padding:44px}
  .section{padding:80px 0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* When the Notion hub is hidden, the tips and offers sections touch: drop the doubled spacing */
#hub[hidden] + .section{padding-top:0}
.section:has(+ #hub[hidden]){padding-bottom:40px}

/* Header fit on small phones */
@media (max-width:420px){.brand{gap:6px}.brand .logo-art{height:44px}.brand .word{font-size:22px}.brand .tag{font-size:10.5px}.pill{font-size:10px;padding:7px 9px;letter-spacing:1.2px}}
@media (min-width:860px){.brand .logo-art{height:60px}}