@font-face { font-family:"Source Serif 4"; src:url("assets/fonts/SourceSerif4-Variable.woff2") format("woff2"); font-weight:200 900; font-display:swap; }
@font-face { font-family:"Libre Franklin"; src:url("assets/fonts/LibreFranklin-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
:root {
  color-scheme: light;
  --ink-950:#1c1917; --ink-800:#2c2723; --ink-600:#746a63; --ink-400:#9d9188;
  --ink-300:#c7beb6; --ink-200:#e0d9d1; --ink-100:#ede8e1; --ink-50:#f6f3ec;
  --white:#fffdf9; --cafe-700:#865d39; --cafe-600:#a87a4c; --cafe-500:#c69a6b;
  --cafe-200:#ead6bd; --cafe-100:#f4e9da; --accent:#a87a4c; --accent-soft:#f4e9da;
  --success:#2f7659; --error:#a53f3f;
}
* { box-sizing:border-box; }
html { background:var(--ink-50); }
body { margin:0; color:var(--ink-950); background:radial-gradient(circle at 12% 18%,rgba(198,154,107,.11),transparent 27rem),var(--ink-50); font-family:"Libre Franklin","Helvetica Neue",Arial,sans-serif; }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
.shell { width:min(1160px,calc(100% - 48px)); margin:0 auto; }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; border-bottom:1px solid var(--ink-200); }
.brand { display:flex; align-items:center; gap:11px; font-family:"Source Serif 4",Georgia,serif; font-size:1.27rem; font-weight:700; letter-spacing:-.035em; text-decoration:none; }
.brand span { white-space:nowrap; }
.brand img { width:39px; height:39px; object-fit:contain; }
.return-link { color:var(--ink-600); font-size:.86rem; font-weight:700; text-decoration:none; }
.return-link:hover { color:var(--cafe-700); }
main { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(500px,1.12fr); gap:clamp(44px,7vw,94px); align-items:start; padding:clamp(48px,7vw,90px) 0 72px; }
.intro { position:sticky; top:40px; padding-top:20px; }
.eyebrow,.step-label { margin:0 0 14px; color:var(--cafe-700); font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1,h2 { font-family:"Source Serif 4",Georgia,serif; font-weight:680; letter-spacing:-.047em; }
h1 { margin:0 0 24px; font-size:clamp(3.4rem,6.3vw,6.15rem); line-height:.88; }
h2 { margin:0; font-size:clamp(1.85rem,3vw,2.45rem); line-height:1.03; }
.lede { margin:0; max-width:485px; color:var(--ink-600); font-size:1.03rem; line-height:1.68; }
.privacy-callout { display:flex; gap:13px; align-items:flex-start; max-width:485px; margin-top:32px; padding:17px 18px; border:1px solid var(--cafe-200); border-radius:14px; background:var(--cafe-100); }
.privacy-callout svg { flex:0 0 22px; width:22px; fill:none; stroke:var(--cafe-700); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.privacy-callout p { margin:0; color:var(--ink-600); font-size:.81rem; line-height:1.55; }
.privacy-callout strong { color:var(--ink-800); }
.form-card { position:relative; overflow:hidden; padding:clamp(25px,4.2vw,46px); border:1px solid var(--ink-200); border-radius:24px; background:var(--white); box-shadow:0 20px 60px rgba(44,39,35,.08); }
.form-card:before { content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--accent); }
.form-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:32px; }
.product-chip { padding:8px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.72rem; font-weight:800; white-space:nowrap; }
.field { margin:0 0 23px; }
.field label,.field legend { display:block; margin-bottom:9px; color:var(--ink-800); font-size:.86rem; font-weight:750; }
.field label span,.field legend span { color:var(--ink-400); font-size:.73rem; font-weight:650; }
.label-row { display:flex; justify-content:space-between; gap:16px; align-items:baseline; }
.label-row span { color:var(--ink-400); font-size:.72rem; }
input[type="email"],select,textarea { width:100%; border:1px solid var(--ink-300); border-radius:11px; background:#fff; color:var(--ink-950); outline:none; transition:border-color .16s,box-shadow .16s; }
input[type="email"],select { min-height:48px; padding:0 13px; }
textarea { min-height:148px; resize:vertical; padding:13px; line-height:1.5; }
input[type="email"]:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
fieldset { min-width:0; padding:0; border:0; }
.drop-zone { display:flex!important; flex-direction:column; align-items:center; justify-content:center; min-height:142px; margin:0!important; padding:21px; border:1.5px dashed var(--ink-300); border-radius:13px; background:var(--ink-50); color:var(--ink-600)!important; text-align:center; cursor:pointer; transition:border-color .16s,background .16s; }
.drop-zone:hover,.drop-zone.is-dragging { border-color:var(--accent); background:var(--accent-soft); }
.drop-zone input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.drop-zone strong { color:var(--accent); }
.drop-zone small { margin-top:5px; color:var(--ink-400); font-size:.7rem; font-weight:600; }
.upload-icon { display:grid; place-items:center; width:36px; height:36px; margin-bottom:9px; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.upload-icon svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.attachment-preview { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px; border:1px solid var(--ink-200); border-radius:12px; background:var(--ink-50); }
.attachment-preview img { width:52px; height:52px; border-radius:8px; object-fit:cover; }
.attachment-preview strong,.attachment-preview small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-preview strong { font-size:.79rem; }.attachment-preview small { margin-top:3px; color:var(--ink-400); font-size:.69rem; }
.attachment-preview button { border:0; background:transparent; color:var(--cafe-700); font-size:.74rem; font-weight:750; cursor:pointer; }
.check-row { display:flex!important; gap:9px; align-items:center; margin:11px 0 0!important; color:var(--ink-600)!important; font-size:.78rem!important; font-weight:600!important; }
.check-row input { width:17px; height:17px; accent-color:var(--accent); }
.diagnostics { margin:28px 0 24px; border-top:1px solid var(--ink-200); border-bottom:1px solid var(--ink-200); }
.diagnostics summary { display:flex; justify-content:space-between; gap:16px; padding:16px 0; color:var(--ink-800); font-size:.82rem; font-weight:750; cursor:pointer; list-style:none; }
.diagnostics summary::-webkit-details-marker { display:none; }
.diagnostic-summary { color:var(--ink-400); font-size:.7rem; font-weight:650; text-align:right; }
.diagnostics>p { margin:0 0 15px; color:var(--ink-600); font-size:.75rem; line-height:1.5; }
.diagnostics dl { display:grid; grid-template-columns:minmax(110px,.6fr) minmax(0,1.4fr); gap:8px 16px; margin:0 0 18px; font-size:.72rem; }
.diagnostics dt { color:var(--ink-400); }.diagnostics dd { margin:0; color:var(--ink-800); overflow-wrap:anywhere; }
.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-error { margin:-7px 0 15px; padding:11px 13px; border-radius:9px; background:#f9e8e5; color:var(--error); font-size:.78rem; line-height:1.45; }
.submit-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:51px; border:1px solid var(--accent); border-radius:999px; background:var(--accent); color:#fff; font-weight:800; text-decoration:none; cursor:pointer; transition:filter .16s,transform .16s; }
.submit-button:hover { filter:brightness(.92); transform:translateY(-1px); }
.submit-button:disabled { opacity:.58; cursor:wait; transform:none; }
.submit-button svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fine-print { margin:13px 12px 0; color:var(--ink-400); font-size:.67rem; line-height:1.55; text-align:center; }
.success-view { padding:clamp(54px,9vw,100px) 8px; text-align:center; }
.success-mark { display:grid; place-items:center; width:62px; height:62px; margin:0 auto 23px; border-radius:50%; background:#e4f1e9; color:var(--success); }
.success-mark svg { width:31px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.success-view p:not(.step-label) { margin:17px auto 27px; max-width:390px; color:var(--ink-600); line-height:1.6; }
.return-button { max-width:340px; margin:0 auto; }
footer { display:flex; justify-content:space-between; gap:24px; padding:26px 0 42px; border-top:1px solid var(--ink-200); color:var(--ink-600); font-size:.82rem; }
[hidden] { display:none!important; }
body[data-product="caphe-puzzles"] { --accent:#a87a4c; --accent-soft:#f4e9da; }
body[data-product="caphe-codebusters"] { --accent:#476c83; --accent-soft:#e5eff4; }
@media (max-width:820px) {
  .shell { width:min(100% - 32px,680px); }
  main { grid-template-columns:1fr; gap:34px; padding:38px 0 54px; }
  .intro { position:static; padding-top:0; }
  h1 { font-size:clamp(3.25rem,15vw,5.2rem); }
  .lede,.privacy-callout { max-width:none; }
}
@media (max-width:520px) {
  .shell { width:min(100% - 24px,680px); }
  header { min-height:67px; }.brand img { width:34px;height:34px; }.brand { font-size:1.13rem; }
  .return-link { max-width:128px; text-align:right; font-size:.75rem; }
  main { padding-top:30px; }.intro { padding:0 6px; }.privacy-callout { margin-top:24px; }
  .form-card { margin:0 -4px; padding:28px 20px; border-radius:19px; }
  .form-heading { display:block; }.product-chip { display:inline-block; margin-top:13px; }
  footer { flex-direction:column; }
}
@media (prefers-color-scheme:dark) {
  :root { color-scheme:dark; --ink-950:#f5f0e9; --ink-800:#e9e1d8; --ink-600:#b7aaa0; --ink-400:#8e8178; --ink-300:#5c534d; --ink-200:#3b3531; --ink-100:#292521; --ink-50:#161412; --white:#211e1b; --cafe-700:#e1b17e; --cafe-600:#cc9562; --cafe-200:#594534; --cafe-100:#352a22; --success:#72bd96; --error:#ef9b91; }
  body { background:radial-gradient(circle at 12% 18%,rgba(198,154,107,.09),transparent 27rem),var(--ink-50); }
  input[type="email"],select,textarea { background:#1a1816; }
  .form-error { background:#442823; }.success-mark { background:#203a2d; }
  body[data-product="caphe-puzzles"] { --accent:#d6a16f; --accent-soft:#3b2e24; }
  body[data-product="caphe-codebusters"] { --accent:#86b3cb; --accent-soft:#243741; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }