/* ============================================
   notiontemplates.in — design system
   Concept: "the page cover" — templates presented like Notion
   pages themselves: pastel cover blocks, icon tiles, toggle
   disclosures. Paper-white surface, warm ink, four cover pastels.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --paper: #ffffff;
  --paper-soft: #faf9f6;
  --ink: #211f1b;
  --ink-soft: #6b6860;
  --line: #e8e5dd;
  --yellow: #ffd666;
  --blue: #aec8ff;
  --pink: #ffc2d1;
  --green: #bfe6c4;
  --accent: #211f1b;
  --radius-s: 6px;
  --radius-m: 10px;
  --measure: 40rem;
  --wide: 74rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .5em;
  color: var(--ink);
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
h3 { font-size: 1.18rem; }

p { margin: 0 0 1em; color: #454239; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

code, .mono { font-family: 'IBM Plex Mono', monospace; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.75rem; }
.measure { max-width: var(--measure); }

section { padding: 5.5rem 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: none; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.75rem; max-width: var(--wide); margin: 0 auto; }
.brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.brand .dot { width: 9px; height: 9px; border-radius: 2px; background: var(--yellow); display: inline-block; }
.nav ul { list-style: none; display: flex; gap: 1.8rem; margin: 0; padding: 0; }
.nav ul a { color: #4d4a42; font-size: .94rem; text-decoration: none; }
.nav ul a:hover { color: var(--ink); }
.btn { display: inline-block; padding: .68rem 1.3rem; border-radius: var(--radius-s); font-size: .95rem; font-weight: 600; border: 1.5px solid var(--ink); cursor: pointer; text-decoration: none !important; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #383530; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--paper-soft); }

/* ---------- hero ---------- */
.hero { padding: 5rem 0 5.5rem; border-bottom: 1px solid var(--line); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.hero .kicker { display: inline-flex; align-items: center; gap: .5rem; background: var(--yellow); color: #3d2f00; font-size: .82rem; font-weight: 600; padding: .35rem .75rem; border-radius: 20px; margin-bottom: 1.2rem; }
.hero p.lead { font-size: 1.12rem; color: #4d4a42; max-width: 32rem; }
.hero-ctas { display: flex; gap: 1rem; margin-top: 1.8rem; flex-wrap: wrap; }

.cover-tile {
  border: 1.5px solid var(--ink); border-radius: var(--radius-m); overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink);
}
.cover-tile .cover { height: 110px; background: linear-gradient(120deg, var(--blue), var(--pink)); position: relative; }
.cover-tile .icon { position: absolute; bottom: -22px; left: 24px; width: 52px; height: 52px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.cover-tile .body { padding: 2.2rem 1.6rem 1.6rem; background: var(--paper); }
.cover-tile .body h3 { margin-bottom: .4rem; }
.cover-tile .body p { font-size: .92rem; margin-bottom: 0; }
.cover-tile .tags { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.cover-tile .tags span { font-size: .74rem; background: var(--paper-soft); border: 1px solid var(--line); padding: .25rem .6rem; border-radius: 20px; color: var(--ink-soft); }

/* ---------- section headers ---------- */
.section-head { max-width: 34rem; margin-bottom: 2.6rem; }
.section-head p { color: var(--ink-soft); }

/* ---------- why / education grid ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.why-grid .swatch { width: 30px; height: 30px; border-radius: 7px; margin-bottom: .9rem; border: 1.5px solid var(--ink); }
.why-grid h3 { font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 1.05rem; }
.why-grid p { font-size: .95rem; }

/* ---------- category / template tiles (varied, not uniform) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; }
.cat-card { grid-column: span 3; border: 1.5px solid var(--ink); border-radius: var(--radius-m); padding: 1.6rem; background: var(--paper-soft); position: relative; }
.cat-card:nth-child(4n+1) { grid-column: span 4; background: var(--yellow); }
.cat-card:nth-child(4n+2) { grid-column: span 2; background: var(--blue); }
.cat-card:nth-child(4n+3) { grid-column: span 2; background: var(--pink); }
.cat-card:nth-child(4n+4) { grid-column: span 4; background: var(--green); }
.cat-card h3 { margin-bottom: .4rem; }
.cat-card p { font-size: .9rem; margin-bottom: 0; color: #3a382f; }
.cat-card .count { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: #3a382f; display: block; margin-bottom: .5rem; }

/* ---------- featured pack / sell section ---------- */
.pack { background: var(--paper-soft); border: 1.5px solid var(--ink); border-radius: var(--radius-m); padding: 2.8rem; display: grid; grid-template-columns: 1.3fr .7fr; gap: 2.5rem; align-items: center; }
.pack ul { padding-left: 1.1rem; color: #454239; }
.pack ul li { margin-bottom: .5rem; }
.price-box { text-align: left; border-left: 1.5px solid var(--ink); padding-left: 2.2rem; }
.price-box .new { font-family: 'Space Grotesk', sans-serif; font-size: 1.9rem; margin: .2rem 0 1rem; }

/* ---------- blog preview (auto-populated) ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.blog-card { border: 1.5px solid var(--ink); border-radius: var(--radius-m); overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.blog-card .thumb { height: 100px; border-bottom: 1.5px solid var(--ink); }
.blog-card:nth-child(3n+1) .thumb { background: var(--yellow); }
.blog-card:nth-child(3n+2) .thumb { background: var(--blue); }
.blog-card:nth-child(3n+3) .thumb { background: var(--pink); }
.blog-card .body { padding: 1.3rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card time { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--ink-soft); }
.blog-card h3 { font-size: 1.03rem; margin: .5rem 0 .5rem; }
.blog-card p { font-size: .9rem; flex: 1; }
.blog-card a.read { font-size: .88rem; font-weight: 700; }

/* ---------- faq (Notion-style toggle) ---------- */
.faq-item { border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
.faq-item summary { cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); list-style: none; display: flex; gap: .7rem; align-items: baseline; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '▸'; color: var(--ink-soft); font-size: .85rem; transition: transform .15s; flex-shrink: 0; }
.faq-item[open] summary::before { content: '▾'; }
.faq-item .a { padding: .8rem 0 0 1.4rem; color: #454239; max-width: 40rem; }

/* ---------- footer ---------- */
footer.site { padding: 3.5rem 0 2.5rem; background: var(--paper-soft); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.foot-grid h4 { font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: .8rem; color: var(--ink-soft); margin-bottom: .9rem; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .55rem; }
.foot-grid a { color: #454239; font-size: .92rem; }
.foot-bottom { border-top: 1px solid var(--line); padding-top: 1.6rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--ink-soft); }

/* ---------- generic inner-page layout ---------- */
.page-hero { padding: 4rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.page-hero .kicker { display: inline-flex; background: var(--yellow); color: #3d2f00; font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 20px; margin-bottom: .9rem; }
.prose { padding: 3.5rem 0; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 1.05rem; }
.prose ul, .prose ol { color: #454239; padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }
.callout { background: var(--paper-soft); border: 1.5px solid var(--ink); border-radius: var(--radius-m); padding: 1.2rem 1.4rem; margin: 1.4rem 0; }
.callout p { margin-bottom: 0; font-size: .95rem; }

/* contact form */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
label { display: block; font-size: .85rem; color: var(--ink-soft); margin-bottom: .4rem; }
input, textarea { width: 100%; background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--radius-s); color: var(--ink); padding: .75rem .9rem; font-family: 'Public Sans', sans-serif; font-size: .95rem; margin-bottom: 1.2rem; }
textarea { min-height: 130px; resize: vertical; }

/* steps (real sequence) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--ink); border-radius: var(--radius-m); overflow: hidden; }
.step { padding: 2rem 1.9rem; border-right: 1px solid var(--line); background: var(--paper); }
.step:nth-child(1) { background: var(--yellow); }
.step:nth-child(2) { background: var(--blue); }
.step:nth-child(3) { background: var(--pink); }
.step:last-child { border-right: none; }
.step .num { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; display: block; margin-bottom: .5rem; }
.step h3 { font-size: 1.02rem; }
.step p { font-size: .9rem; margin-bottom: 0; color: #3a382f; }

/* stats strip */
.stats-strip { padding: 2.2rem 0; border-bottom: 1px solid var(--line); background: var(--paper-soft); }
.stats-strip .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }
.stat b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.7rem; }
.stat span { font-size: .84rem; color: var(--ink-soft); }

/* blog listing */
.blog-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }

@media (max-width: 900px) {
  .nav ul { display: none; }
  .hero .wrap { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card, .cat-card:nth-child(4n+1), .cat-card:nth-child(4n+2), .cat-card:nth-child(4n+3), .cat-card:nth-child(4n+4) { grid-column: span 1; }
  .pack { grid-template-columns: 1fr; }
  .price-box { border-left: none; padding-left: 0; border-top: 1.5px solid var(--ink); padding-top: 1.6rem; }
  .blog-grid, .blog-list-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--line); }
}

::selection { background: var(--yellow); color: var(--ink); }