@font-face { font-family:'DM Sans'; src:url('/fonts/DMSans-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:'DM Sans'; src:url('/fonts/DMSans-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
  @font-face { font-family:'DM Sans'; src:url('/fonts/DMSans-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
  @font-face { font-family:'DM Serif Display'; src:url('/fonts/DMSerifDisplay-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
  @font-face { font-family:'DM Serif Display'; src:url('/fonts/DMSerifDisplay-latin-ext.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

  :root{
    --bg:hsl(210 20% 98%); --surface:#fff; --ink:hsl(222.2 47.4% 11.2%);
    --body:hsl(215 25% 27%); --muted:hsl(215 16% 47%); --line:hsl(214 20% 93%);
    --inset:hsl(210 20% 97%); --chip:hsl(210 20% 96%);
    --accent:#064948; --accent-hover:#0a6360; --accent-tint:rgba(6,73,72,0.08);
    --accent-shadow:rgba(6,73,72,0.45); --green:#2CC157;
    --wrap:1160px;
  }
  *{box-sizing:border-box;}
  /* author display rules outrank the UA's [hidden] rule, so .done{display:flex}
     left the success pane on screen under the live form. Make hidden mean hidden. */
  [hidden]{display:none!important;}
  html{-webkit-text-size-adjust:100%;}
  body{margin:0;background:var(--bg);color:var(--body);
    font-family:'DM Sans',-apple-system,BlinkMacSystemFont,ui-sans-serif,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;}
  a{color:var(--accent);text-decoration:none;}
  a:hover{color:var(--accent-hover);}
  img{max-width:100%;}
  h1,h2{margin:0;font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:var(--ink);}
  p{margin:0;}
  .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;}
  .eyebrow{font-size:11px;font-weight:600;letter-spacing:0.16em;color:var(--accent);}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
    box-shadow:0 1px 2px rgba(15,23,42,0.05),0 12px 32px -12px rgba(15,23,42,0.10);}
  .lockup{display:flex;align-items:center;gap:10px;}
  .lockup img{width:30px;height:30px;display:block;flex-shrink:0;}
  .lockup .name{font-weight:700;font-size:17px;letter-spacing:0.14em;color:var(--ink);}
  .lockup .sub{font-weight:600;font-size:17px;letter-spacing:0.02em;color:var(--muted);}

  /* 0.72 let headings read straight through the bar on scroll. Opaque-ish
     base, with the translucent+blur treatment only where blur is supported. */
  header{border-bottom:1px solid var(--line);background:var(--surface);
    position:sticky;top:0;z-index:10;}
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    header{background:rgba(255,255,255,0.9);
      -webkit-backdrop-filter:saturate(180%) blur(12px);
      backdrop-filter:saturate(180%) blur(12px);}
  }
  header .wrap{height:78px;display:flex;align-items:center;justify-content:space-between;}
  nav{display:flex;align-items:center;gap:8px;}
  nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;
    font-size:14px;font-weight:600;color:var(--body);}
  nav a:hover{color:var(--accent);}

  .hero{padding:96px 0 78px;}
  .hero .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:80px;}
  .hero-copy{flex:1 1 620px;min-width:0;display:flex;flex-direction:column;gap:22px;}
  .hero h1{font-size:62px;line-height:1.08;letter-spacing:-0.01em;text-wrap:pretty;}
  .hero-copy p{max-width:560px;font-size:17px;line-height:1.65;color:var(--muted);}
  .hero-copy strong{color:var(--body);font-weight:600;}

  .creators{flex:0 0 400px;padding:26px;display:flex;flex-direction:column;gap:16px;}
  .creators .badge{width:34px;height:34px;border-radius:10px;background:var(--accent-tint);
    display:flex;align-items:center;justify-content:center;}
  .creators h2{font-size:27px;line-height:1.18;}
  .creators p{font-size:14px;line-height:1.6;color:var(--muted);}
  .soon{display:flex;align-items:center;justify-content:center;gap:9px;height:50px;
    border-radius:12px;background:var(--inset);border:1px solid var(--line);
    color:var(--body);font-size:15px;font-weight:600;}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;}

  .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:rgba(255,255,255,0.6);padding:26px 0 28px;}
  .strip .label{text-align:center;font-size:11px;font-weight:600;letter-spacing:0.16em;
    color:var(--muted);margin-bottom:14px;}
  .marquee{position:relative;overflow:hidden;height:30px;}
  .marquee-row{display:flex;align-items:center;height:100%;width:max-content;
    animation:marquee 34s linear infinite;}
  .marquee-set{display:flex;align-items:center;gap:54px;padding-right:54px;}
  .marquee-set span{font-weight:600;font-size:15px;letter-spacing:0.06em;
    color:var(--muted);white-space:nowrap;}
  .fade{position:absolute;top:0;width:140px;height:100%;pointer-events:none;}
  .fade.l{left:0;background:linear-gradient(90deg,hsl(210 20% 99%),transparent);}
  .fade.r{right:0;background:linear-gradient(270deg,hsl(210 20% 99%),transparent);}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion:reduce){.marquee-row{animation:none;}}

  .group{padding:82px 0 90px;}
  .group .head{display:flex;flex-direction:column;gap:10px;margin-bottom:34px;}
  .group h2{font-size:38px;line-height:1.15;}
  .agencies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
  .agency{padding:34px;display:flex;flex-direction:column;gap:18px;}
  .agency .name{display:flex;align-items:flex-end;min-height:46px;}
  .agency .name svg{display:block;}
  .agency .line{font-family:'DM Serif Display',Georgia,serif;font-size:23px;line-height:1.3;color:var(--accent);}
  .agency p{font-size:15px;line-height:1.65;color:var(--muted);}
  .chips{display:flex;flex-wrap:wrap;gap:8px;}
  .chips span{font-size:12px;font-weight:600;color:var(--body);background:var(--chip);
    border:1px solid var(--line);border-radius:8px;padding:6px 11px;}
  .note{display:flex;gap:10px;align-items:flex-start;background:var(--inset);
    border-radius:10px;padding:13px 14px;font-size:13px;line-height:1.5;color:var(--muted);}
  .note svg{flex-shrink:0;margin-top:1px;}
  .agency .out{display:flex;align-items:center;min-height:44px;gap:7px;
    font-size:14px;font-weight:600;margin-top:auto;}

  footer{border-top:1px solid var(--line);background:var(--surface);padding:40px 0 44px;}
  footer .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;}
  footer .lockup img{width:26px;height:26px;}
  footer .lockup .name{font-size:15px;}
  footer .lockup .sub{font-size:15px;}
  .legal{font-size:13px;color:var(--muted);margin-top:10px;}
  .fcols{display:flex;gap:44px;}
  .fcol{display:flex;flex-direction:column;gap:2px;}
  .fcol .h{font-size:11px;font-weight:600;letter-spacing:0.12em;color:var(--muted);margin-bottom:7px;}
  .fcol a{display:flex;align-items:center;min-height:44px;font-size:14px;}
  .fcol .txt{font-size:13px;color:var(--muted);}

  @media (max-width:900px){
    .hero{padding:40px 0 30px;}
    /* flex-basis flips from width to HEIGHT once this is a column, so
       `flex:1 1 620px` forced a 620px-tall block and a huge empty gap. */
    .hero .wrap{flex-direction:column;gap:28px;}
    .hero-copy{flex:0 0 auto;}
    .hero h1{font-size:40px;line-height:1.1;}
    .hero-copy p{font-size:15px;}
    .creators{flex:1 1 auto;width:100%;padding:24px 20px;}
    .creators h2{font-size:26px;}
    .group{padding:34px 0 34px;}
    .group h2{font-size:29px;line-height:1.16;}
    .agencies{grid-template-columns:minmax(0,1fr);gap:16px;}
    .agency{padding:24px 20px;gap:14px;}
    .agency p{font-size:14px;line-height:1.6;}
    .strip{padding:20px 0 22px;}
    .marquee{height:26px;}
    .marquee-set{gap:40px;padding-right:40px;}
    .fade{width:48px;}
    header .wrap{height:64px;}
    nav a{padding:0 8px;font-size:13px;}
    .lockup img{width:26px;height:26px;}
    .lockup .name,.lockup .sub{font-size:14px;}
    footer .wrap{flex-direction:column;gap:22px;}
    .fcols{gap:40px;}
  }

/* ---- /creators : the lead form ---------------------------------------- */
.apply{padding:64px 0 80px;}
.apply .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:72px;}
.apply-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px;}
.apply h1{font-size:52px;line-height:1.1;letter-spacing:-0.01em;text-wrap:pretty;}
.apply-copy p{max-width:520px;font-size:17px;line-height:1.65;color:var(--muted);}
.points{display:flex;flex-direction:column;gap:14px;margin-top:4px;}
.point{display:flex;gap:12px;align-items:flex-start;}
.point svg{flex-shrink:0;margin-top:2px;}
.point b{display:block;font-size:15px;font-weight:600;color:var(--ink);}
.point span{font-size:14px;line-height:1.55;color:var(--muted);}

.form-card{flex:0 0 440px;box-sizing:border-box;padding:30px;display:flex;flex-direction:column;gap:18px;}
.form-card h2{font-size:25px;line-height:1.2;}
#formPane{display:flex;flex-direction:column;gap:8px;}
.form-card .lede{font-size:14px;line-height:1.55;color:var(--muted);}
.field{display:flex;flex-direction:column;gap:6px;}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
label{font-size:12px;font-weight:600;color:var(--body);}
input[type=text],input[type=email],input[type=tel]{
  height:48px;border:1px solid hsl(214 20% 88%);border-radius:10px;padding:0 12px;
  font-size:16px;font-family:inherit;color:var(--body);background:var(--surface);
  width:100%;box-sizing:border-box;outline:none;}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
input::placeholder{color:hsl(215 16% 65%);}
input[aria-invalid="true"]{border-color:#E40000;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
button.submit{height:52px;border:0;border-radius:12px;background:var(--accent);color:#fff;
  font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 10px 24px -10px var(--accent-shadow);}
button.submit:hover{background:var(--accent-hover);}
button.submit[disabled]{opacity:.55;cursor:default;box-shadow:none;}
.err{font-size:13px;line-height:1.5;color:#E40000;}
.smallprint{font-size:12px;line-height:1.55;color:var(--muted);}

.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:26px 8px;}
.done .tick{width:56px;height:56px;border-radius:50%;background:var(--accent-tint);
  display:flex;align-items:center;justify-content:center;}
.done h2{font-size:27px;line-height:1.2;}
.done p{font-size:15px;line-height:1.6;color:var(--muted);max-width:320px;}

@media (max-width:900px){
  .apply{padding:32px 0 40px;}
  .apply .wrap{flex-direction:column;gap:28px;}
  .apply-copy{flex:0 0 auto;}
  .apply h1{font-size:36px;}
  .apply-copy p{font-size:15px;}
  .form-card{flex:0 0 auto;width:100%;padding:24px 20px;}
  .form-card h2{font-size:23px;}
}

/* shared call-to-action — the homepage links to /creators now it exists */
.cta{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;
  border-radius:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:600;
  box-shadow:0 10px 24px -10px var(--accent-shadow);}
.cta:hover{background:var(--accent-hover);color:#fff;}
.cta-sm{height:44px;padding:0 18px;font-size:14px;box-shadow:0 8px 20px -10px var(--accent-shadow);}
@media (max-width:900px){ .cta-sm{padding:0 14px;font-size:13px;} }