/* ═══════════════════════════════════════════════════════════════════════════
   scrapbook.riseinnovations.in — shared shell styles for the landing, form, pay and share
   pages. The palette is lifted from the sixtybuzz storefront tokens so the
   scrapbook product sits inside the same brand rather than beside it.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#faf8f5; --surface:#ffffff; --surface-2:#fdfbf8;
  --border:#e8e2da; --border-strong:#d8d0c5;

  --text:#14110f; --text-muted:#5c554e; --text-subtle:#8a807a;

  --accent:#ff5a24; --accent-strong:#cc471c; --accent-soft:#fff1eb;
  --pink:#ff2e7e; --pink-deep:#c41b5c;
  --dark:#0b0710; --dark-2:#16101c; --dark-border:#2a2233; --dark-muted:#a79fb0;

  --ok:#0e7d3e; --err:#cc2b31; --whatsapp:#17853f;

  --radius:16px; --radius-lg:24px;
  --shadow:0 6px 22px rgba(30,18,10,.07);
  --shadow-lg:0 22px 60px rgba(30,18,10,.13);
  --shadow-accent:0 12px 30px rgba(204,71,28,.26);

  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --font-hand:"Caveat",cursive;

  --heart-bit:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88 C50 88 8 60 8 33 C8 18 20 9 32 9 C41 9 47 15 50 21 C53 15 59 9 68 9 C80 9 92 18 92 33 C92 60 50 88 50 88 Z' fill='%23ff2e7e'/></svg>");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.15;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:clamp(30px,6vw,48px)}
h2{font-size:clamp(23px,4.4vw,32px)}
h3{font-size:clamp(17px,2.6vw,21px)}
p{margin:0 0 1em}
a{color:var(--accent-strong)}
img{max-width:100%;display:block}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:660px}
.center{text-align:center}
.muted{color:var(--text-muted)}
.subtle{color:var(--text-subtle);font-size:14px}
.hand{font-family:var(--font-hand);font-size:1.35em;color:var(--accent-strong)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-strong);font-weight:600;margin-bottom:14px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,90,36,.17);
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:15.5px;
  padding:14px 26px;border-radius:999px;border:none;cursor:pointer;
  text-decoration:none;white-space:nowrap;position:relative;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.1),box-shadow .18s ease,background .18s ease;
}
.btn:active{transform:scale(.97)}
/* The bordered and unbordered variants must agree on height or a row of mixed
   buttons sits 3px uneven. A transparent border costs nothing and squares them. */
.btn-primary,.btn-dark,.btn-whatsapp{border:1.5px solid transparent}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--pink-deep));color:#fff;box-shadow:var(--shadow-accent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(204,71,28,.34)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{transform:translateY(-2px);background:var(--dark-2)}
.btn-outline{background:var(--surface);border:1.5px solid var(--border-strong);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-strong)}
.btn-whatsapp{background:var(--whatsapp);color:#fff}
.btn-whatsapp:hover{transform:translateY(-2px)}
.btn-block{width:100%}
.btn-sm{padding:9px 17px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:default;transform:none;filter:grayscale(.3)}

.spinner{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── surfaces ────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;
}
.card-lg{border-radius:var(--radius-lg);padding:clamp(22px,4.4vw,34px)}

/* ── forms ───────────────────────────────────────────────────────────── */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea,.field select{
  width:100%;padding:12px 14px;border-radius:11px;border:1.5px solid var(--border);
  background:var(--surface-2);font-family:inherit;font-size:15.5px;color:var(--text);
  resize:vertical;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;background:#fff;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,90,36,.15);
}
.field textarea{min-height:120px;line-height:1.7}
.hint{font-size:12.5px;color:var(--text-subtle);margin-top:5px}
.counter{float:right;font-size:12px;color:var(--text-subtle);font-variant-numeric:tabular-nums}
.counter.over{color:var(--err);font-weight:600}

/* ── toast ───────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:300;
  background:var(--dark);color:#fff;padding:12px 22px;border-radius:999px;
  font-size:14px;font-weight:500;box-shadow:0 14px 32px rgba(0,0,0,.26);
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px);
  transition:opacity .2s ease,transform .2s ease;max-width:calc(100vw - 32px);text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--err)}

/* ── misc ────────────────────────────────────────────────────────────── */
.pill{
  display:inline-block;padding:4px 11px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-strong);
  font-size:12px;font-weight:600;letter-spacing:.02em;
}
.pill-dark{background:var(--dark);color:#fff}
.divider{height:1px;background:var(--border);border:0;margin:26px 0}
.stack>*+*{margin-top:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row-tight{gap:8px}
.grow{flex:1;min-width:0}

/* ── the floating WhatsApp button ────────────────────────────────────────
   Bottom right, above everything, on every page. Its message is pre-written in
   flourish.js: somebody who has to compose their own opener usually closes the
   app instead of asking. */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:400;
  display:inline-flex;align-items:center;gap:0;
  height:56px;padding:0 16px;border-radius:999px;
  background:var(--whatsapp);color:#fff;text-decoration:none;
  box-shadow:0 10px 26px rgba(12,90,42,.4);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.1),box-shadow .2s ease,gap .22s ease,padding .22s ease;
}
.wa-float svg{width:26px;height:26px;fill:currentColor;flex-shrink:0}
.wa-float-label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:14.5px;font-weight:600;
  transition:max-width .26s ease;
}
/* The label unrolls on hover so the resting state is a small circle and the
   intent is still spelled out the moment somebody looks at it. */
.wa-float:hover,.wa-float:focus-visible{
  transform:translateY(-2px);gap:10px;
  box-shadow:0 16px 34px rgba(12,90,42,.48);
}
.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label{max-width:180px}
.wa-float:active{transform:scale(.96)}

/* It must never cover the form's sticky action bar. */
@media (max-width:600px){
  .wa-float{right:14px;bottom:14px;height:52px;padding:0 14px}
  .wa-float svg{width:24px;height:24px}
}
body.has-actionbar .wa-float{bottom:86px}
@media (max-width:600px){ body.has-actionbar .wa-float{bottom:80px} }

/* ── the heart trail ─────────────────────────────────────────────────────
   Hearts dropped behind the cursor as it moves and as the page scrolls. The
   layer never takes a click, and the whole thing is skipped on touch screens
   and under prefers-reduced-motion — see flourish.js. */
.heart-trail{position:fixed;inset:0;pointer-events:none;z-index:390;overflow:hidden}
.heart-bit{
  position:absolute;pointer-events:none;
  transform:translate(-50%,-50%);
  background-image:var(--heart-bit);
  background-size:100% 100%;background-repeat:no-repeat;
  animation:heart-float 1.5s cubic-bezier(.25,.6,.35,1) forwards;
}
@keyframes heart-float{
  0%   {opacity:inherit;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}
  22%  {transform:translate(-50%,-50%) scale(1) rotate(calc(var(--rot) * .35))}
  100% {opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% - 46px)) scale(.55) rotate(var(--rot))}
}

@media (prefers-reduced-motion:reduce){
  .heart-trail{display:none}
  .wa-float,.wa-float-label{transition:none}
}

/* ── contact strip ───────────────────────────────────────────────────────
   Rendered by contact.js into any [data-contact] element. It appears on every
   page, including the 404 and both payment screens, because the moment someone
   needs us is the moment they are least willing to go looking. */
.contact-strip{width:100%}
.contact-note{
  font-size:13.5px;color:var(--text-muted);margin:0 0 10px;
}
.contact-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.contact-link{
  display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:8px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:border-color .16s ease,color .16s ease,transform .16s ease;
}
.contact-link:hover{border-color:var(--accent);color:var(--accent-strong);transform:translateY(-1px)}
.contact-link svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.contact-link:first-child{border-color:#bfe6cd;background:#f2fbf5;color:var(--whatsapp)}
.contact-link:first-child:hover{border-color:var(--whatsapp)}

/* On a dark surface the pills invert. */
.on-dark .contact-note{color:var(--dark-muted)}
.on-dark .contact-link{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#fff;
}
.on-dark .contact-link:hover{border-color:rgba(255,255,255,.4);color:#fff}
.on-dark .contact-link:first-child{background:rgba(23,133,63,.22);border-color:rgba(80,220,140,.4);color:#b9f5cd}

@media (max-width:420px){
  .contact-row{gap:6px}
  .contact-link{padding:8px 11px;font-size:12.5px;gap:6px}
}

/* ── tap targets ─────────────────────────────────────────────────────────
   The responsive audit measured the inline links at 11-27px tall: fine with a
   mouse, a poke-and-hope with a thumb. Padding grows the hit box and the
   matching negative margin keeps the surrounding layout exactly where it was,
   so nothing visibly moves. Margins are written per-side because .back-link
   relies on margin-left:auto and a shorthand would wipe it out. */
.brand{
  display:inline-flex;align-items:center;
  padding:11px 8px;margin:-11px -8px;
}
.back-link{
  display:inline-flex;align-items:center;
  padding:11px 8px;
  margin-top:-11px;margin-bottom:-11px;margin-right:-8px;
  margin-left:auto;
}
footer a{
  display:inline-flex;align-items:center;
  padding:11px 6px;margin:-11px -6px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}