:root{
    --ink:    oklch(0.22 0.018 260);
    --paper:  oklch(0.975 0.012 95);
    --paper-2: oklch(0.945 0.016 95);
    --cobalt: oklch(0.55 0.20 255);
    --cobalt-deep: oklch(0.46 0.18 258);
    --cobalt-soft: oklch(0.93 0.05 255);
    --line: oklch(0.88 0.01 95);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Hanken Grotesk',system-ui,sans-serif;
    color:var(--ink); background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  .bric{font-family:'Bricolage Grotesque',system-ui,sans-serif;}
  .tag{text-transform:uppercase;font-weight:600;letter-spacing:0.18em;}

  .wrap{ min-height:100vh; display:grid; grid-template-columns:1.08fr 0.92fr; }

  /* left content panel: cap inner column width and centre it as one unit,
     so logo, headline and footer share a left edge and sit centred */
  .left{ display:flex; flex-direction:column; align-items:center;
         padding:clamp(28px,4vw,56px); position:relative; }

  .brand,
  .center,
  .foot{ width:100%; max-width:560px; }

  .brand{ display:flex; align-items:center; gap:12px; }
  .brand .wm{ font-size:clamp(19px,1.5vw,22px); font-weight:800; letter-spacing:-0.03em; }

  .center{ flex:1; display:flex; flex-direction:column; justify-content:center; }
  .eyebrow{ font-size:12px; color:var(--cobalt); margin-bottom:18px; }
  h1{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-0.035em;
      font-size:clamp(40px,5.2vw,68px); line-height:0.98; }
  h1 .muted{ color:var(--cobalt); }
  .sub{ font-size:clamp(15px,1.25vw,18px); line-height:1.55; color:color-mix(in oklch, var(--ink) 72%, transparent);
        margin-top:20px; max-width:500px; }

  form{ display:flex; gap:10px; margin-top:30px; max-width:480px; }
  input[type=email]{
    flex:1; font-family:inherit; font-size:16px; color:var(--ink);
    background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:15px 18px; outline:none;
    transition:border-color .15s, box-shadow .15s;
  }
  input[type=email]::placeholder{ color:color-mix(in oklch, var(--ink) 40%, transparent); }
  input[type=email]:focus{ border-color:var(--cobalt); box-shadow:0 0 0 4px color-mix(in oklch, var(--cobalt) 16%, transparent); }
  button{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:16px; color:#fff;
    background:var(--cobalt); border:none; border-radius:12px; padding:15px 26px; cursor:pointer;
    transition:transform .12s, background .15s; white-space:nowrap;
  }
  button:hover{ background:var(--cobalt-deep); transform:translateY(-1px); }
  button:active{ transform:translateY(0); }
  button:disabled{ opacity:0.6; cursor:default; transform:none; }
  .fine{ font-size:13px; color:color-mix(in oklch, var(--ink) 50%, transparent); margin-top:14px; }

  .foot{ display:flex; align-items:center; gap:10px; font-size:13.5px;
         color:color-mix(in oklch, var(--ink) 55%, transparent); }
  .foot .dot{ width:5px; height:5px; border-radius:50%; background:var(--cobalt); flex:none; }

  .ok{ display:none; margin-top:30px; padding:16px 20px; border-radius:12px;
       background:var(--cobalt-soft); color:var(--cobalt-deep); font-weight:600; font-size:15px; max-width:480px; }
  .ok.show{ display:block; }

  /* right cobalt panel */
  .right{ background:var(--cobalt); position:relative; overflow:hidden;
          display:flex; flex-direction:column; align-items:center; justify-content:center;
          padding:clamp(28px,4vw,56px); }
  .right .ghost{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
                 width:160%; opacity:0.13; pointer-events:none; }
  .hero-line{ width:min(78%,360px); position:relative; z-index:1; }
  .hero-cap{ font-family:'Bricolage Grotesque',sans-serif; color:#fff; font-weight:800;
             font-size:clamp(20px,1.9vw,26px); letter-spacing:-0.025em; text-align:center;
             line-height:1.22; margin-top:28px; position:relative; z-index:1; }
  .hero-sub{ color:rgba(255,255,255,0.72); font-size:14px; margin-top:14px; text-align:center;
             position:relative; z-index:1; letter-spacing:0.02em; }

  /* responsive: stack to one column */
  @media (max-width:880px){
    .wrap{ grid-template-columns:1fr; min-height:auto; }
    .left{ align-items:stretch; padding:32px 24px 44px; }
    .brand, .center, .foot{ max-width:none; }
    .right{ min-height:28vh; }
    .foot{ margin-top:32px; }
  }