/* Convert+ website, drawn like the app: blue and red ballpoint on cream paper, coloured-pencil hatching,
   Caveat headings and Patrick Hand body. Colours are the app's DoodleColors (core/ui/Doodle.kt).
   Layout: one readable column (max 1040px) of stacked "pages"; the hero and the how-it-works row go
   two-column on wide screens and stack on a phone. */
:root {
  --sheet: #F8F3E7;  /* the page everything sits on */
  --paper: #F1EBDC;  /* a little darker, for wells */
  --ink: #283A8C;    /* blue ballpoint: titles, buttons */
  --red: #B4432E;    /* red ballpoint: links, rings, underlines */
  --lead: #4A3D30;   /* brown-grey ink: body text and borders */
  --muted: #84765F;  /* faded ink */
  --green: #8BB070; --yellow: #E6B545; --pink: #E2846B; --blue: #8396DA;
  --orange: #E99A52; --brown: #B88D60;
  --note: #F5E49C; --tape: rgba(214, 200, 152, .6); --shade: rgba(84, 62, 26, .16); --glint: #FFFDF6;
  --display: 'Caveat', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  --body: 'Patrick Hand', 'Segoe Print', 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  color-scheme: light;
}
/* Light by default, like the app. Dark only when the viewer picks it with the sun/moon button (assets/theme.js). */
:root[data-theme="dark"] {
  --sheet: #1E2230; --paper: #171A24; --ink: #A8B7FF; --red: #FF917A; --lead: #DDD3C2; --muted: #9D9483;
  --green: #6F9A5C; --yellow: #C99A35; --pink: #C66A55; --blue: #6377C2; --orange: #C47C3C; --brown: #9A7550;
  --note: #3D3622; --tape: rgba(190, 180, 140, .22); --shade: rgba(0, 0, 0, .45); --glint: #1E2230;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--lead);
  font-family: var(--body);
  font-size: 1.2rem;
  line-height: 1.5;
  overflow-x: hidden;
}
.wrap {
  max-width: 1040px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-style: wavy; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.05; margin: 0; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.6rem, 7vw, 4.8rem); max-width: 12ch; }
h2 { font-size: clamp(2.2rem, 4.5vw, 3rem); }
h3 { font-size: 1.75rem; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.red { color: var(--red); }
.hidden-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Hand-drawn borders: the line is a pseudo-element put through an SVG displacement filter, so the text inside stays sharp. */
.sketch { position: relative; }
.sketch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 2px solid var(--lead); border-radius: 4px; z-index: 2;
  filter: url(#wobble);
}
.sketch > * { position: relative; }
.pill, .pill::before { border-radius: 999px; }

/* Buttons: pill outline in blue ink; the main one is filled with blue pencil hatching, like Home's Photos button */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .55em 1.35em; min-height: 3.1rem;
  font: inherit; font-size: 1.3rem; line-height: 1.1; color: var(--ink);
  text-decoration: none; cursor: pointer; background: transparent; border: 0;
  transition: transform .15s ease;
}
.btn::before { border-color: var(--ink); }
.btn:hover { transform: translateY(-2px) rotate(-.6deg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: repeating-linear-gradient(135deg, var(--blue) 0 2.5px, transparent 2.5px 9px); }
.btn-primary::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--glint); opacity: .25; z-index: 0; }
.btn-primary > * { position: relative; z-index: 1; }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn-red { color: var(--red); }
.btn-red::before { border-color: var(--red); }

/* The red pen underline that sits under the app name */
.underline { display: block; width: 100%; height: 10px; color: var(--red); margin-top: -.15em; }

/* Sticky note with a strip of tape at the top */
.note {
  position: relative; background: var(--note); color: var(--lead);
  padding: 1rem 1.25rem; transform: rotate(-1.4deg);
  box-shadow: 3px 4px 0 var(--shade);
}
.note::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 110px; height: 24px; margin-left: -55px;
  background: var(--tape); transform: rotate(3deg);
}

/* Top bar */
.topbar { padding-block: 1rem .5rem; }
.topbar .nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 12px; }
.brand b { font-family: var(--display); font-size: 2.1rem; color: var(--ink); font-weight: 700; line-height: 1; }
.brand b i { color: var(--red); font-style: normal; }
.links { display: flex; gap: .25rem 1.25rem; flex-wrap: wrap; font-size: 1.15rem; }
.links a { color: var(--lead); text-decoration: none; }
.links a:hover { color: var(--red); text-decoration: underline wavy; }
.nav .links { margin-left: auto; }
/* On a phone the sun/moon sits beside the app name and the links take the next line */
@media (max-width: 640px) {
  .nav .links { order: 3; flex-basis: 100%; margin-left: 0; }
  .nav .theme-btn { margin-left: auto; }
}

/* Sun/moon button: a ringed circle like the app's search and settings buttons */
.theme-btn {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; flex: none;
  background: transparent; border: 0; color: var(--ink); cursor: pointer;
}
.theme-btn::before { border-color: var(--lead); }
.theme-btn svg { width: 24px; height: 24px; }
.theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: block; }
.theme-btn:hover { color: var(--red); }

/* Sections */
section { padding-block: 2.75rem; }
.section-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section-head p { font-size: 1.25rem; color: var(--muted); }

/* Hero */
.hero { padding-block: 2rem 3rem; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; }
.hero-copy { min-width: 0; display: grid; gap: 1.25rem; justify-items: start; }
.hero-copy .lede { font-size: 1.4rem; max-width: 34ch; }
.cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .25rem; }
.shield { display: inline-flex; align-items: center; gap: .5rem; color: var(--lead); }
.shield svg { width: 1.3em; height: 1.3em; color: var(--muted); }
.hero-art { position: relative; justify-self: center; width: min(100%, 320px); }
.phone { padding: 8px; background: var(--glint); }
.phone::before { border-radius: 30px; border-width: 3px; }
.phone img { border-radius: 22px; width: 100%; }
.jadoo { position: absolute; right: -38px; bottom: -18px; width: 150px; transform: rotate(8deg); border: 2px solid var(--lead); border-radius: 10px; box-shadow: 2px 3px 0 var(--shade); }
.hero-note { max-width: 420px; margin-top: 2.5rem; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { width: min(100%, 260px); margin-top: 1.5rem; }
  .jadoo { width: 120px; right: -30px; }
}

/* How it works: three numbered steps (a real sequence) beside the share-wheel screenshot */
.how { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 2.5rem; align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; min-width: 0; }
.steps li::before {
  counter-increment: step; content: counter(step);
  font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--red);
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border: 2px solid var(--red); border-radius: 48% 52% 50% 50% / 55% 45% 55% 45%;
}
.steps h3 { margin-bottom: .2rem; }
.wheel { justify-self: center; width: 100%; }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; } .wheel { width: min(100%, 260px); } }

/* Tool groups: a card per group, each with a coloured-pencil creature */
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; }
.group { padding: 1.25rem 1.3rem 1.4rem; background: var(--sheet); display: grid; gap: .6rem; align-content: start; min-width: 0; }
.group .creature { width: 54px; height: 54px; }
.group ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .15rem; }
.group li::marker { color: var(--red); }
.creature { stroke: var(--lead); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* Why Convert+ */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem 2rem; }
.why div { display: grid; gap: .3rem; align-content: start; }
.why h3 { display: flex; align-items: center; gap: .5rem; }
.why .tick { width: 1.5rem; height: 1.5rem; color: var(--green); flex: none; }

/* Screenshot strip */
.shots { display: flex; gap: 1.25rem; overflow-x: auto; padding: .75rem .25rem 1.25rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.shots figure { flex: 0 0 220px; margin: 0; scroll-snap-align: start; display: grid; gap: .5rem; }
.shots .phone { padding: 6px; }
.shots .phone::before { border-radius: 24px; }
.shots .phone img { border-radius: 18px; }
.shots figcaption { text-align: center; font-size: 1.1rem; color: var(--muted); }

/* Privacy band */
.privacy-band { padding: 1.75rem 1.5rem; background: var(--paper); display: grid; gap: .75rem; }
.privacy-band p { max-width: 62ch; }

/* Footer */
footer { padding-block: 2rem 3rem; color: var(--muted); font-size: 1.05rem; border-top: 2px dashed var(--muted); margin-top: 2rem; }
footer .wrap { display: grid; gap: .75rem; }
footer .links a { color: var(--lead); }
footer small { display: block; max-width: 70ch; line-height: 1.4; }

/* Privacy policy page */
.policy { max-width: 70ch; display: grid; gap: 1.25rem; padding-block: 1.5rem 3rem; }
.policy h1 { font-size: clamp(2.6rem, 6vw, 4rem); }
.policy h2 { font-size: 2rem; margin-top: 1rem; }
.policy ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.policy li::marker { color: var(--red); }
.policy .stamp {
  display: inline-block; align-self: start; padding: .3rem .9rem; color: var(--red);
  border: 2px solid var(--red); border-radius: 6px; transform: rotate(-2deg);
  font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: .02em;
}
.policy code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--paper); padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; }
.policy .contact { background: var(--paper); padding: 1rem 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:hover { transition: none; transform: none; }
}

/* ---------- Doodle effects (assets/doodle.js), after the app's core/ui/Doodle.kt ---------- */
header, main, footer { position: relative; z-index: 1; }
/* Faint creases in the paper, like the home screen's */
.creases { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.creases path { fill: none; stroke: var(--lead); stroke-opacity: .07; stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* Pen borders drawn by script: the CSS border steps aside, an SVG rect draws itself in (650 ms, like DrawOnEnter) */
.js .sketch::before { display: none; }
.sketch > .pen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.pen rect {
  fill: none; stroke: var(--pen, var(--lead)); stroke-width: var(--pen-w, 2px); stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .65s cubic-bezier(.4, 0, .2, 1);
  filter: url(#wobble);
}
.drawn > .pen rect { stroke-dashoffset: 0; }
.btn { --pen: var(--ink); }
.btn-red { --pen: var(--red); }
.theme-btn { --pen: var(--lead); }
.phone { --pen-w: 3px; --pen-r: 30px; }
.shots .phone { --pen-r: 24px; }
/* The boil: three wobbles, one after another, 8 times a second */
:root[data-boil="1"] .pen rect, :root[data-boil="1"] .ink-ring rect, :root[data-boil="1"] .seg path, :root[data-boil="1"] .hole, :root[data-boil="1"] .overshoot { filter: url(#wobble1); }
:root[data-boil="2"] .pen rect, :root[data-boil="2"] .ink-ring rect, :root[data-boil="2"] .seg path, :root[data-boil="2"] .hole, :root[data-boil="2"] .overshoot { filter: url(#wobble2); }

/* Press: a springy squash with a little tilt (doodleClickable), then a red ink ring draws round the tap (inkRing) */
.doodle { transition: transform .32s cubic-bezier(.34, 1.56, .64, 1); }
.doodle.pressed { transform: scale(.95) rotate(-.6deg); transition-duration: .18s; }
.note.doodle.pressed { transform: rotate(-1.4deg) scale(.96); }
.ink-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.ink-ring rect {
  fill: none; stroke: var(--red); stroke-width: 1.8px; stroke-dasharray: 1; stroke-dashoffset: 1; filter: url(#wobble);
  animation: inkDraw .42s cubic-bezier(.4, 0, .2, 1) forwards, inkFade .25s .5s forwards;
}
@keyframes inkDraw { to { stroke-dashoffset: 0; } }
@keyframes inkFade { to { opacity: 0; } }
.theme-btn svg { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.theme-btn:hover svg { transform: rotate(25deg); }
.note:hover { transform: rotate(-.4deg); transition: transform .3s; }
.shots .phone { transition: transform .3s; }
.shots .phone:hover { transform: translateY(-4px) rotate(-1deg); }

/* Creatures breathe, blink on their own clock, and hop when touched (Creatures.kt) */
.creature { transform-origin: 50% 100%; animation: breathe 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.creature .eye { transform-box: fill-box; transform-origin: center; animation: blink var(--b, 4.6s) infinite; animation-delay: var(--d, 0s); }
.creature.hop { animation: hop .55s cubic-bezier(.3, .8, .4, 1); }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.12); } }
@keyframes hop {
  0% { transform: scale(1.12, .86); }
  35% { transform: translateY(-9px) scale(.94, 1.08); }
  70% { transform: translateY(0) scale(1.06, .94); }
  100% { transform: scale(1, 1); }
}

/* Robo Jadoo bobs on the corner of the phone, sparkles twinkle, a tap makes him wiggle */
.jadoo-wrap { position: absolute; right: -38px; bottom: -18px; width: 150px; height: 150px; }
.jadoo { position: static; width: 100%; height: 100%; animation: bob 3.4s ease-in-out infinite; cursor: pointer; }
.jadoo.wiggle { animation: wiggle .55s ease-out; }
@keyframes bob { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-4px); } }
@keyframes wiggle { 0% { transform: rotate(8deg) scale(1.1, .9); } 35% { transform: rotate(-4deg) translateY(-10px) scale(.94, 1.08); } 70% { transform: rotate(12deg) scale(1.05, .95); } 100% { transform: rotate(8deg); } }
.spark { position: absolute; width: 18px; height: 18px; fill: var(--orange); animation: twinkle 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); pointer-events: none; }
.spark.s1 { left: -14px; top: 30px; }
.spark.s2 { right: -8px; top: 8px; --d: -.9s; }
.spark.s3 { right: -16px; top: 70px; width: 12px; height: 12px; --d: -1.8s; }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0deg); opacity: .3; } 50% { transform: scale(1) rotate(25deg); opacity: 1; } }
@media (max-width: 860px) { .jadoo-wrap { width: 120px; height: 120px; right: -30px; } }

/* The red pen underline writes itself */
.underline path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: inkDraw .6s .35s cubic-bezier(.4, 0, .2, 1) forwards; }

/* The format wheel: the share pop-up's wheel, live */
.wheel-demo { display: grid; gap: .9rem; justify-items: center; width: 100%; max-width: 340px; justify-self: center; }
.wheel-title { font-family: var(--display); font-size: 1.9rem; color: var(--lead); font-weight: 600; justify-self: start; }
.file-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .9rem; justify-self: start; cursor: default; }
.file-chip .creature { width: 36px; height: 36px; }
.file-chip b { color: var(--ink); font-weight: normal; }
.file-chip small { color: var(--muted); font-size: .95rem; }
#wheel { width: 100%; height: auto; aspect-ratio: 1; max-width: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
#wheel .seg path { fill: var(--sheet); stroke: var(--lead); stroke-width: 1.6px; stroke-linejoin: round; transition: fill .15s; filter: url(#wobble); }
#wheel .seg:hover path, #wheel .seg.hot path { fill: var(--paper); }
#wheel .seg.chosen path { fill: url(#h-blue); }
#wheel .seg:focus { outline: none; }
#wheel .seg:focus-visible path { stroke: var(--red); stroke-width: 2.4px; }
#wheel .seg text { font-family: var(--display); font-size: 17px; font-weight: 600; fill: var(--ink); pointer-events: none; }
#wheel .hole { fill: none; stroke: var(--lead); stroke-width: 2px; filter: url(#wobble); }
#wheel .overshoot { fill: none; stroke: var(--lead); stroke-width: 1.6px; stroke-linecap: round; }
.wheel-say { min-height: 2.2rem; color: var(--muted); text-align: center; display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.wheel-say.done { color: var(--lead); }
.wheel-say .scribble { width: 44px; height: 16px; }
.wheel-say .scribble path { fill: none; stroke: var(--ink); stroke-width: 1.8px; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: scribble 1s linear infinite; }
@keyframes scribble { to { stroke-dashoffset: -1; } }
.wheel-say .tick { width: 1.5rem; height: 1.5rem; }
.wheel-say .tick circle { fill: none; stroke: var(--green); stroke-width: 2px; }
.wheel-say .tick path { fill: none; stroke: var(--green); stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: inkDraw .35s .1s forwards; }
.wheel-say .stamp { display: inline-block; padding: 0 .5rem; border: 2px solid var(--red); border-radius: 5px; color: var(--red); font-family: var(--display); font-size: 1.25rem; font-weight: 600; transform: rotate(-6deg); animation: stamp .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes stamp { from { transform: rotate(-20deg) scale(1.6); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.js .nojs-only { display: none; }
@media (max-width: 760px) { .wheel-demo { max-width: 320px; } }

@media (prefers-reduced-motion: reduce) {
  .creature, .creature .eye, .creature.hop, .jadoo, .spark, .underline path, .wheel-say .scribble path, .wheel-say .stamp, .wheel-say .tick path { animation: none; }
  .pen rect, .underline path, .wheel-say .tick path { stroke-dashoffset: 0; transition: none; }
  .doodle, .theme-btn svg, .note, .shots .phone { transition: none; }
}

/* SEO additions: tagline under the headline, FAQ as hand-drawn fold-outs */
.tagline { font-size: 1.3rem; color: var(--muted); margin-top: .6rem; }
.faq { display: grid; gap: 1rem; max-width: 760px; }
.faq-item details { padding: .9rem 1.2rem; }
.faq summary { cursor: pointer; font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 1.8rem; line-height: 1; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: .5rem; max-width: 62ch; }