@font-face { font-family: "Cormorant"; src: url("/landing/fonts/cormorant-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/landing/fonts/inter-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/landing/fonts/inter-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root { --bg: #F2EDF9; --deep: #E8E0F3; --text: #241C35; --muted: #655773; --accent: #542F83; --line: rgba(84,47,131,.16); --bubble: #DFD4EE; --card: #FFFFFF; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.55 "Inter Tight", system-ui, sans-serif; }
.wrap { width: 100%; max-width: 1040px; margin-left: auto; margin-right: auto; padding: 0 20px; }
section { margin-top: 56px; }
h1, h2, h3 { font-family: "Cormorant", Georgia, serif; font-weight: 500; line-height: 1.12; margin: 0; }
h1 { font-size: 46px; }
h2 { font-size: 34px; margin-bottom: 20px; }
h3 { font-size: 25px; margin: 12px 0 6px; }
p { margin: 0 0 12px; }

.top { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
.brand { font: 500 24px/1 "Cormorant", Georgia, serif; }
.age { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 14px; color: var(--muted); }

.hero { display: grid; gap: 32px; margin-top: 36px; }
.lead { font-size: 19px; color: var(--muted); margin: 16px 0 24px; }
.cta { display: inline-block; background: var(--accent); color: #FFF; font-weight: 600; text-decoration: none; text-align: center; padding: 16px 36px; border-radius: 999px; min-height: 54px; }
.cta:hover { background: #452570; }
.cta:focus-visible, a:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.note { font-size: 15px; color: var(--muted); margin-top: 12px; }

.dialog { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 20px; }
.dialog figcaption { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.msg { padding: 12px 16px; border-radius: 20px; }
.msg.me { background: var(--bubble); margin-left: 32px; }
.msg.oracle { background: var(--bg); margin: 0 32px 0 0; }

.cards { display: grid; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 20px; }
.card img { display: block; object-fit: cover; border-radius: 20px; }
.card p { margin: 0; color: var(--muted); }

.memory { display: grid; gap: 24px; align-items: center; }
.memory img { display: block; width: 180px; height: auto; border-radius: 20px; }
.memory p { color: var(--muted); }

.steps { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.steps li { counter-increment: step; position: relative; padding-left: 52px; min-height: 40px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--deep); color: var(--accent); font-weight: 600; display: flex; align-items: center; justify-content: center; }

.honest { background: var(--deep); border-radius: 26px; padding-top: 28px; padding-bottom: 20px; max-width: 1000px; width: calc(100% - 40px); }
.honest h2 { font-size: 30px; }
.honest ul { margin: 0; padding-left: 20px; }
.honest li { margin-bottom: 10px; }


.ask { display: grid; gap: 10px; margin: 0; }
.ask label { font-weight: 600; }
.ask textarea { width: 100%; resize: vertical; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; }
.ask textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
button.cta { border: 0; cursor: pointer; font: 600 17px/1.2 "Inter Tight", system-ui, sans-serif; }

.draw { display: grid; gap: 24px; align-items: center; justify-items: start; }
.draw-card { position: relative; width: 200px; }
.draw-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 20px; }
.draw-btn img { display: block; width: 200px; height: auto; border-radius: 20px; }
.draw-btn:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.draw-open { width: 200px; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; text-align: center; background: var(--accent); color: #FFF; border-radius: 20px; }
.draw-btn[hidden], .draw-open[hidden], #drawn-text[hidden] { display: none; }
.draw-label { font-size: 14px; opacity: .85; }
.draw-open strong { font: 500 34px/1.1 "Cormorant", Georgia, serif; }
.draw-question { font-weight: 600; }
.draw-text > p { color: var(--muted); }
#drawn-meaning { color: var(--text); }

.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 10px 0 0; color: var(--muted); }
.faq a { color: var(--accent); }

@media (max-width: 799px) { .cta { display: block; } }

.notfound { padding-top: 18vh; padding-bottom: 40px; max-width: 560px; }

.foot { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 44px; padding-bottom: 32px; font-size: 15px; color: var(--muted); }
.foot a { color: var(--accent); }
.foot .req { flex-basis: 100%; }

@media (min-width: 800px) {
  h1 { font-size: 64px; }
  h2 { font-size: 42px; }
  section { margin-top: 84px; }
  .hero { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; margin-top: 60px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .memory { grid-template-columns: 240px 1fr; gap: 48px; }
  .draw { grid-template-columns: 240px 1fr; gap: 48px; }
  .draw-text { max-width: 560px; }
  .memory img { width: 240px; }
  .memory div { max-width: 560px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .honest { padding: 36px 44px 26px; }
}