:root{
  --cream:#fff8f1; --paper:#ffffff; --ink:#2b2230; --soft:#6d6170; --berry:#a3324f; --berry-d:#82243d;
  --gold:#e9a93b; --blush:#fbe3e6; --line:#ecdcd6; --sage:#e6efe6;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:Nunito,system-ui,Arial,sans-serif;font-size:17px;line-height:1.55}
h1,h2,h3,.brand{font-family:Fraunces,Georgia,serif;line-height:1.15;margin:0 0 .4em}
a{color:var(--berry)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
header.top{padding:18px 0}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{font-size:1.45rem;font-weight:700;color:var(--ink);text-decoration:none}
.brand span{color:var(--berry)}
.btn{display:inline-block;border:0;border-radius:999px;background:var(--berry);color:#fff;font-weight:800;font-size:1.05rem;padding:14px 26px;cursor:pointer;text-decoration:none;font-family:inherit}
.btn:hover{background:var(--berry-d)}
.btn.ghost{background:transparent;color:var(--berry);border:2px solid var(--berry)}
.btn.small{padding:9px 16px;font-size:.92rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.hero{padding:30px 0 50px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem)}
.hero h1 em{color:var(--berry);font-style:italic}
.hero p.lead{font-size:1.2rem;color:var(--soft);max-width:34em}
.price-tag{display:inline-block;background:var(--gold);color:#3a2600;font-weight:800;border-radius:999px;padding:4px 14px;margin-left:8px;font-size:.95rem}
.sample{background:var(--paper);border-radius:var(--r);box-shadow:0 18px 40px rgba(80,30,40,.13);padding:22px;transform:rotate(1.5deg);border:1px solid var(--line)}
.sample h3{font-size:1.25rem;text-align:center;margin-bottom:10px}
.sample .mini{font-size:.82rem;color:var(--soft)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:10px 0 40px}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.step b.n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blush);color:var(--berry);font-weight:900;margin-bottom:8px}
.occasions{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 30px}
.occasions span{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.92rem}
section.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;margin:0 0 30px}
label{font-weight:700;display:block;margin:0 0 6px}
input[type=text],select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;font-family:inherit;background:#fff;color:var(--ink)}
input[type=text]:focus,select:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.qlist{display:grid;gap:10px}
.q{display:grid;grid-template-columns:1fr 1fr 34px;gap:10px;align-items:center;background:var(--cream);border-radius:12px;padding:10px}
.q .clue{font-weight:600;font-size:.97rem}
.q input.clue-in{font-weight:600}
.q .x{background:none;border:0;font-size:1.3rem;color:var(--soft);cursor:pointer}
.hint{color:var(--soft);font-size:.9rem}
.counter{font-weight:800;color:var(--berry)}
.err{color:#b00020;font-weight:700;margin:10px 0}
.addrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.preview-wrap{position:relative}
.preview-wrap .wm{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:Fraunces,serif;font-size:clamp(2rem,8vw,5rem);color:rgba(163,50,79,.16);transform:rotate(-18deg);font-weight:700}
.blur{filter:blur(5px);user-select:none}
.paybox{background:var(--blush);border-radius:var(--r);padding:22px;text-align:center;margin-top:20px}
.paybox .big{font-size:2rem;font-family:Fraunces,serif;font-weight:700}
.cw-svg{display:block;margin:0 auto}
.clues{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.clues h4{margin:0 0 6px;font-family:Fraunces,serif;font-size:1.1rem;color:var(--berry)}
.clues ol{list-style:none;padding:0;margin:0}
.clues li{margin:0 0 6px;font-size:.95rem}
.clues .len{color:var(--soft);font-size:.82rem}
.ws-grid{border-collapse:collapse;margin:0 auto;font-family:"Courier New",monospace;font-weight:700}
.ws-grid td{width:calc(min(560px,90vw)/var(--n));height:calc(min(560px,90vw)/var(--n));text-align:center;font-size:calc(min(560px,90vw)/var(--n)*.58);padding:0}
.ws-key td{color:#c9bcc0}
.ws-key td.hit{color:var(--berry);background:var(--blush)}
.ws-words{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:14px;font-weight:700;letter-spacing:.04em}
footer{padding:30px 0 50px;color:var(--soft);font-size:.9rem;text-align:center}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.faq summary{font-weight:800;cursor:pointer}
.shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.shop a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px;text-decoration:none;color:var(--ink);font-weight:700}
.shop a small{display:block;color:var(--soft);font-weight:400}
.page{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px;margin:0 auto 26px;max-width:820px}
.page h2{text-align:center;font-size:2rem}
.page .sub{text-align:center;color:var(--soft);margin-top:-6px;margin-bottom:18px}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.keys .ws-grid td{width:calc(min(340px,85vw)/var(--n));height:calc(min(340px,85vw)/var(--n));font-size:calc(min(340px,85vw)/var(--n)*.58)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:20px 0 26px}
@media (max-width:760px){
  .hero .wrap,.steps,.row2,.clues,.keys{grid-template-columns:1fr}
  .q{grid-template-columns:1fr 34px}
  .q .clue,.q .clue-in{grid-column:1/2}
  .q input.ans{grid-column:1/2}
  .q .x{grid-row:1/3;grid-column:2}
  .sample{transform:none}
  .page{padding:20px}
}
@media print{
  @page{size:letter;margin:.5in}
  body{background:#fff;font-size:12pt}
  header.top,footer,.toolbar,.noprint{display:none!important}
  .page{border:0;border-radius:0;padding:0;margin:0;max-width:none;page-break-after:always;break-after:page}
  .page:last-of-type{page-break-after:auto;break-after:auto}
  .ws-grid td{width:calc(7in/var(--n));height:calc(7in/var(--n));font-size:calc(7in/var(--n)*.55)}
  .keys .ws-grid td{width:calc(3.5in/var(--n));height:calc(3.5in/var(--n));font-size:calc(3.5in/var(--n)*.55)}
}