/* MADHOUSE ChatGPT Ads landing, design comp 24.10.2026. Sibling of the audit landing (22.10).
   Direction (web-design-taste 1): theme = quiet premium neutral, navy / white / mist; background = solid, one faint mint depth in hero only;
   type = refined grotesk (Noto Sans Hebrew, one voice, weight contrast); hero = asymmetric split, text + the real card they clicked;
   sections = editorial blocks, different treatment per section, no card rows;
   signature components = (1) the sponsored card artifact, (2) hairline list, (3) one mint button, (4) paper-white form;
   motion = float-up reveal below the fold + button hover lift. Tokens: same names and values as _madhouse-clean-2026-10/style.css.
   NOT ChatGPT or OpenAI look: no chat bubbles, no OpenAI colours, no logo, no interface chrome. The card is drawn in MADHOUSE geometry. */
@font-face{font-family:"Noto Sans Hebrew";src:url(fonts/noto-hebrew.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Noto Sans Hebrew";src:url(fonts/noto-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* primitive */
  --navy-950:#0A111C; --navy-900:#0E1725; --navy-800:#142033; --navy-700:#1D2C43;
  --mist-50:#F3F5F8; --white:#FFFFFF;
  --mint-400:#46DDB4; --mint-700:#0A7A5C;
  --slate-700:#3E4B5E; --slate-500:#5B687A;
  --red-700:#B3261E; --edge:#75839A;
  /* semantic */
  --bg-dark:var(--navy-900); --bg-light:var(--white); --bg-soft:var(--mist-50);
  --ink:var(--navy-900); --ink-soft:var(--slate-700); --ink-mute:var(--slate-500);
  --on-dark:#F4F7FB; --on-dark-soft:#B4BFCE;
  --accent:var(--mint-400); --accent-ink:var(--mint-700); --danger:var(--red-700);
  --line-light:rgba(14,23,37,.12); --line-dark:rgba(244,247,251,.14);
  --font:"Noto Sans Hebrew","Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:24px; --wrap:1200px; --sec:128px; --r:14px;
  --ease:cubic-bezier(.22,.61,.27,1);
  /* component */
  --btn-h:56px; --field-h:54px; --bar-h:76px;
}
@media(max-width:767px){:root{--sec:72px;--gutter:20px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:18px;line-height:1.65;color:var(--ink);background:var(--bg-light);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.light :focus-visible,.f :focus-visible{outline-color:var(--navy-700)}
.skip{position:absolute;inset-inline-start:-9999px}.skip:focus{inset-inline-start:12px;top:12px;z-index:99;background:#fff;color:#000;padding:10px 14px;border-radius:8px}

/* type */
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(36px,4.6vw,64px);line-height:1.08}
h2{font-size:clamp(30px,3.6vw,50px)}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink-soft);max-width:34em}
.dark .lede{color:var(--on-dark-soft)}
.nw{white-space:nowrap}

/* button: one primary action on the page, always mint on navy */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--btn-h);padding:0 30px;border-radius:12px;font:700 17px/1 var(--font);cursor:pointer;border:0;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn-mint{background:var(--accent);color:var(--navy-950)}
.btn-mint:hover{transform:translateY(-2px);box-shadow:0 10px 28px -10px rgba(70,221,180,.55)}
.btn-mint:active{transform:translateY(1px) scale(.985);box-shadow:none}
.btn[disabled]{background:#9AA7B6;color:var(--navy-900);cursor:progress;transform:none;box-shadow:none}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--accent-ink);border-bottom:1.5px solid currentColor;padding-bottom:3px;transition:gap .2s var(--ease)}
.link:hover{gap:14px}

/* header: logo only, no navigation (landing, nothing to leak to) */
header.top{position:absolute;inset:0 0 auto 0;z-index:20}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:92px}
.brand{font-weight:900;font-size:24px;letter-spacing:.14em;color:#fff}
header .btn{min-height:46px;padding:0 22px;font-size:15px}
@media(max-width:767px){header.top .wrap{height:64px}header .btn{display:none}.brand{font-size:21px}}

/* 1 hero */
.hero{background:var(--bg-dark);color:var(--on-dark);position:relative;overflow:hidden;padding:150px 0 96px;display:flex;align-items:center;min-height:min(100dvh,860px)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 65% at 25% 50%,rgba(70,221,180,.07),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:72px;align-items:center;position:relative}
.hero h1{margin-bottom:28px;max-width:15.5em}
.hero .lede{margin-bottom:38px;max-width:29em}
.hero .btn{min-width:268px}
.hero small{display:block;margin-top:20px;color:var(--on-dark-soft);font-size:15px;line-height:1.55;max-width:30em}
.hero-art{display:flex;flex-direction:column;align-items:center;gap:20px}
.hero-art figcaption{font-size:14px;color:var(--on-dark-soft);text-align:center;max-width:26em;line-height:1.5;text-wrap:balance}
@media(max-width:900px){
  .hero{display:block;padding:92px 0 56px;min-height:0}
  .hero .wrap{grid-template-columns:1fr;gap:0}
  .hero h1{font-size:clamp(32px,8.8vw,42px);margin-bottom:16px}
  .hero .lede{margin-bottom:24px;font-size:17px}
  .hero .btn{width:100%}
  .hero small{margin-top:14px;font-size:14.5px}
  .hero-art{margin-top:40px}
}

/* the card they clicked, redrawn in our own geometry (white sheet, 10px radius, mint tag) */
.card{width:min(100%,360px);background:var(--white);color:var(--ink);border-radius:10px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.06),0 34px 60px -28px rgba(3,7,13,.8)}
.card .top{display:flex;align-items:center;gap:10px;padding:14px 16px}
.card .ic{width:30px;height:30px;border-radius:6px;background:var(--navy-900);color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px;letter-spacing:0}
.card .nm{font-size:14.5px;font-weight:700}
.card .tag{margin-inline-start:auto;font-size:13px;font-weight:700;background:var(--accent);color:var(--navy-950);padding:3px 10px;border-radius:5px;line-height:1.5}
.card .im{aspect-ratio:2/1;background:var(--accent);display:grid;place-items:center;color:var(--navy-950);font-weight:900;font-size:26px;letter-spacing:.24em;padding-inline-start:.24em}
.card .tx{padding:16px 16px 20px}
.card .tx b{display:block;font-size:21px;line-height:1.25;font-weight:800;margin-bottom:6px}
.card .tx span{display:block;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}

/* 2 what it is: lead sentence full width and large, the two mechanism paragraphs as a quiet pair below (no h2-right / text-left skeleton here) */
.what{padding:var(--sec) 0;background:var(--bg-light)}
.what h2{font-size:clamp(20px,1.7vw,24px);color:var(--ink-mute);font-weight:700;margin-bottom:28px}
.what .lead{font-size:clamp(23px,2.5vw,34px);line-height:1.4;font-weight:600;letter-spacing:-.008em;max-width:27em;text-wrap:balance;margin-bottom:56px}
.what .pair{display:grid;grid-template-columns:1fr 1fr;gap:96px;border-top:1px solid var(--line-light);padding-top:36px}
.what .pair p{font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:30em}
@media(max-width:900px){.what h2{margin-bottom:18px}.what .lead{font-size:clamp(21px,5.6vw,25px);margin-bottom:32px}.what .pair{grid-template-columns:1fr;gap:20px;padding-top:28px}.what .pair p{font-size:17.5px}}

/* 3 why now: the date sentence is the typographic event; full width, h2 sits small above it (breaks the h2-left / text-right beat of 2 and 4) */
.now{background:var(--bg-soft);padding:var(--sec) 0}
.now h2{font-size:clamp(20px,1.7vw,24px);color:var(--ink-mute);font-weight:700;margin-bottom:28px}
.now .big{font-size:clamp(30px,4.6vw,66px);line-height:1.14;font-weight:800;letter-spacing:-.02em;max-width:17em;text-wrap:balance;margin-bottom:56px;color:var(--ink)}
.now .big em{font-style:normal;color:var(--accent-ink);white-space:nowrap}
.now .small{font-size:18px;color:var(--ink-soft);max-width:34em}
@media(max-width:900px){.now h2{margin-bottom:18px}.now .big{margin-bottom:28px;font-size:clamp(27px,7.4vw,34px)}.now .small{font-size:17.5px}}

/* 4 how: dark, one hairline list, plain digits */
.how{background:var(--bg-dark);color:var(--on-dark);padding:var(--sec) 0}
.how .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:96px;align-items:start}
.how h2{position:sticky;top:48px;max-width:8em}
.how ol{list-style:none;border-top:1px solid var(--line-dark)}
.how li{display:grid;grid-template-columns:44px 1fr;gap:0 8px;padding:30px 0;border-bottom:1px solid var(--line-dark)}
.how li>i{font-style:normal;font-weight:800;font-size:20px;color:var(--accent);line-height:1.35;grid-row:1/3}
.how h3{font-size:clamp(21px,1.9vw,26px);line-height:1.3;margin-bottom:8px}
.how li p{font-size:17px;color:var(--on-dark-soft);max-width:33em;line-height:1.65}
.how .by{margin-top:36px;font-size:17px;color:var(--on-dark);max-width:33em;line-height:1.65}
@media(max-width:900px){.how .wrap{grid-template-columns:1fr;gap:28px}.how h2{position:static}.how li{grid-template-columns:34px 1fr;padding:22px 0}.how li p{font-size:16.5px}.how .by{margin-top:28px;font-size:16.5px}}

/* 5 who can advertise: a decision table, not cards */
.who{background:var(--bg-light);padding:var(--sec) 0}
.who .head{display:grid;grid-template-columns:.8fr 1.2fr;gap:96px;align-items:end;margin-bottom:56px}
.who h2{max-width:10em}
.who .head .lede{max-width:30em}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:96px}
.cols h3{font-size:19px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.cols .ok h3{color:var(--accent-ink);border-color:var(--accent-ink)}
.cols .no h3{color:var(--ink-mute);border-color:var(--ink-mute)}
.cols ul{list-style:none}
.cols li{padding:17px 0;border-bottom:1px solid var(--line-light);font-size:19px;font-weight:600}
.cols .no li{color:var(--ink-mute);font-weight:500}
.who .end{margin-top:48px;display:grid;grid-template-columns:.8fr 1.2fr;gap:96px;align-items:start}
.who .end p{font-size:18px;color:var(--ink-soft);max-width:34em;margin-bottom:22px}
@media(max-width:900px){.who .head,.who .end{grid-template-columns:1fr;gap:20px}.who .head{margin-bottom:36px}.cols{grid-template-columns:1fr;gap:36px}.cols li{font-size:18px;padding:14px 0}.who .end{margin-top:36px;gap:0}.who .end p{font-size:17px}}

/* 6 form */
.cta{background:var(--bg-dark);color:var(--on-dark);padding:var(--sec) 0;scroll-margin-top:0}
.cta .wrap{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.cta h2{margin-bottom:40px;max-width:11em}
.after h3{font-size:19px;margin-bottom:6px}
.after ol{list-style:none;border-top:1px solid var(--line-dark);margin-top:16px;counter-reset:s}
.after li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;padding:16px 0;border-bottom:1px solid var(--line-dark);font-size:17px;color:var(--on-dark-soft);line-height:1.6}
.after li::before{content:counter(s);font-weight:800;color:var(--accent)}
form{background:var(--white);color:var(--ink);border-radius:var(--r);padding:36px;display:grid;gap:20px}
.f label{display:block;font-size:15px;font-weight:600;margin-bottom:8px}
.f input{width:100%;min-height:var(--field-h);border:1px solid var(--edge);border-radius:10px;padding:0 16px;font:400 17px var(--font);color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.f input::placeholder{color:var(--ink-mute)}
.f input:focus{outline:0;border-color:var(--navy-700);box-shadow:0 0 0 4px rgba(70,221,180,.4)}
.f .err{display:none;margin-top:8px;font-size:14px;line-height:1.4;color:var(--danger);font-weight:600}
.f.bad input{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.f.bad .err{display:block}
.f input[dir=ltr]{text-align:right}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
form .btn{width:100%}
form small{font-size:14px;color:var(--ink-mute);text-align:center;line-height:1.55}
@media(max-width:900px){.cta .wrap{grid-template-columns:1fr;gap:36px}.cta h2{margin-bottom:0}.cta .wrap>div{display:contents}.cta h2{order:1}.cta form{order:2}.cta .after{order:3}form{padding:24px 20px;gap:18px}}

/* 7 faq */
.faq{background:var(--bg-soft);padding:var(--sec) 0}
.faq .wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:96px;align-items:start}
.faq h2{font-size:clamp(30px,3.3vw,46px)}
.qa{border-top:1px solid var(--line-light)}
.qa details{border-bottom:1px solid var(--line-light)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(18px,1.5vw,21px);font-weight:700;line-height:1.35;min-height:64px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform .25s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 0 24px;font-size:17px;color:var(--ink-soft);max-width:36em;line-height:1.65}
@media(max-width:900px){.faq .wrap{grid-template-columns:1fr;gap:28px}.qa summary{padding:18px 0}}

/* footer */
footer{background:var(--navy-950);color:var(--on-dark-soft);padding:48px 0;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:center}
footer .disc{grid-column:1/-1;font-size:14px;line-height:1.6;color:var(--on-dark-soft);border-top:1px solid var(--line-dark);padding-top:24px;margin-top:4px}
footer .brand{font-size:18px}
footer nav{display:flex;gap:28px}
footer a:hover{color:#fff}
@media(max-width:767px){footer{padding-bottom:calc(36px + var(--bar-h))}footer .wrap{grid-template-columns:1fr}}

/* sticky bar, mobile only. Shows after the hero, hides while the form is on screen. */
.bar{position:fixed;inset:auto 0 0 0;z-index:30;display:none;background:var(--navy-950);border-top:1px solid var(--line-dark);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .3s var(--ease)}
.bar.on{transform:none}
.bar .btn{width:100%;min-height:54px}
@media(max-width:767px){.bar{display:block}}

/* reveal: below the fold only */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}.btn,.bar{transition:none}}

/* submit failure, same behaviour as /audit/ */
.form-fail{display:none;font-size:15px;font-weight:700;color:var(--danger);line-height:1.55}
.form-fail.on{display:block}
.form-fail a{text-decoration:underline}

/* consent bar: same storage key and dataLayer event as the rest of the site (GTM gates Clarity and the ChatGPT pixel on it) */
.cookie{position:fixed;z-index:45;inset-inline:12px;bottom:12px;display:none;align-items:center;gap:12px;justify-content:space-between;padding:12px 14px;border-radius:10px;background:var(--navy-800);color:var(--on-dark-soft);box-shadow:inset 0 0 0 1px var(--line-dark),0 20px 40px -20px rgba(0,0,0,.6);font-size:14px;line-height:1.5;max-width:700px}
.cookie.show{display:flex}
.cookie a{color:var(--on-dark);text-decoration:underline}
.cookie .acts{display:flex;gap:8px;flex:none}
.cookie button{min-height:44px;padding:0 14px;border-radius:8px;border:0;font:700 14px var(--font);cursor:pointer}
.cookie .ok{background:var(--accent);color:var(--navy-950)}
.cookie .no{background:transparent;color:var(--on-dark-soft);box-shadow:inset 0 0 0 1px var(--line-dark)}
@media(min-width:768px){.cookie{inset-inline:auto;inset-inline-start:24px;bottom:24px}}
@media(max-width:767px){body:has(.bar.on) .cookie{bottom:88px}.cookie{flex-wrap:wrap}}