/* ============================================================
   PDF Daisy — Sketchnote Landing Page
   Design system: tokens, type, sketchnote components
   ============================================================ */

/* ---- Rapid-Leroy (hosted) + friendly hand-drawn fallback ---- */
@font-face{
  font-family:"Rapid-Leroy";
  src:url("https://www.widgetgadget.com/cw1/ai-stuff/ai-fonts/RapidLeroy-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Rapid-Leroy";
  src:url("https://www.widgetgadget.com/cw1/ai-stuff/ai-fonts/RapidLeroy-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Rapid-Leroy";
  src:url("https://www.widgetgadget.com/cw1/ai-stuff/ai-fonts/RapidLeroy-Italic.ttf") format("truetype");
  font-weight:400; font-style:italic; font-display:swap;
}
/* Bold-italic: synthesize from Italic (no dedicated file exists) */
@font-face{
  font-family:"Rapid-Leroy";
  src:url("https://www.widgetgadget.com/cw1/ai-stuff/ai-fonts/RapidLeroy-Italic.ttf") format("truetype");
  font-weight:700; font-style:italic; font-display:swap;
}

:root{
  /* paper + ink */
  --paper:#fffdf7;
  --paper-white:#ffffff;
  --ink:#141414;
  --ink-soft:#333333;
  --pencil-gray:#6f6f6f;

  /* brand */
  --daisy-orange:#ff6b1a;       /* sampled from production logo */
  --daisy-orange-dark:#d94f00;
  --daisy-yellow:#ffe27a;

  /* sketchnote accents */
  --mint:#cfeedd;
  --sky:#cfe8f7;
  --soft-coral:#ffd0c2;
  --soft-blue:#d9eef8;
  --soft-green:#dcefd9;
  --soft-yellow:#fff1a8;

  --shadow-soft:rgba(0,0,0,0.12);

  --page-max:1180px;
  --radius-large:28px;
  --radius-card:22px;

  --font:"Rapid-Leroy","Patrick Hand","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.04) 1px, transparent 0),
    var(--paper);
  background-size:22px 22px;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

img{max-width:100%;display:block;}

a{color:inherit;}

/* ---- layout ---- */
.section{padding:92px 24px;position:relative;}
.section-inner{max-width:var(--page-max);margin:0 auto;}
.section--tight{padding:64px 24px;}

/* tinted section bands */
.band-mint{background:linear-gradient(180deg, color-mix(in srgb,var(--mint) 35%,var(--paper)) 0%, var(--paper) 100%);}
.band-blue{background:linear-gradient(180deg, color-mix(in srgb,var(--soft-blue) 55%,var(--paper)) 0%, var(--paper) 100%);}
.band-yellow{background:linear-gradient(180deg, color-mix(in srgb,var(--soft-yellow) 45%,var(--paper)) 0%, var(--paper) 100%);}
.band-coral{background:linear-gradient(180deg, color-mix(in srgb,var(--soft-coral) 45%,var(--paper)) 0%, var(--paper) 100%);}
.band-green{background:linear-gradient(180deg, color-mix(in srgb,var(--soft-green) 60%,var(--paper)) 0%, var(--paper) 100%);}
.band-orange{background:linear-gradient(180deg, color-mix(in srgb,var(--daisy-orange) 14%,var(--paper)) 0%, var(--paper) 100%);}

/* ---- type ---- */
.hero-title{
  font-weight:700;
  font-size:clamp(2.6rem,5.4vw,4.5rem);
  line-height:1.02;
  letter-spacing:-0.01em;
  margin:0;
  text-wrap:balance;
}
.section-title{
  font-weight:700;
  font-size:clamp(2rem,3.6vw,3.1rem);
  line-height:1.05;
  margin:0 0 .35em;
  text-wrap:balance;
}
.subhead{
  font-weight:400;
  font-size:clamp(1.2rem,1.6vw,1.55rem);
  color:var(--ink-soft);
  line-height:1.5;
  margin:0;
  max-width:48ch;
}
.body-copy{
  font-weight:400;
  font-size:1.28rem;
  color:var(--ink-soft);
  line-height:1.6;
  max-width:56ch;
}
.eyebrow{
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.02em;
  color:var(--daisy-orange-dark);
  display:inline-flex;align-items:center;gap:.5em;
  margin:0 0 .9rem;
}
.note{ font-style:italic; color:var(--pencil-gray); font-size:1.05rem; }

/* marker highlight behind words */
.hl{
  background:linear-gradient(transparent 12%, var(--soft-yellow) 12%, var(--soft-yellow) 86%, transparent 86%);
  padding:0 .12em; border-radius:2px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hl-mint{background:linear-gradient(transparent 12%, var(--mint) 12%, var(--mint) 86%, transparent 86%);}
.ink-orange{color:var(--daisy-orange);}
.ink-orange-d{color:var(--daisy-orange-dark);}

/* ---- sketch card / frame ---- */
.sketch-card{
  border:3px solid var(--ink);
  border-radius:var(--radius-card);
  background:var(--paper-white);
  box-shadow:6px 6px 0 var(--shadow-soft);
}
/* hand-drawn-ish border via slightly irregular radius */
.wobble{ border-radius:255px 18px 225px 20px/18px 225px 20px 255px; }
.wobble-2{ border-radius:18px 225px 20px 255px/225px 18px 255px 20px; }
.rotate-s{ transform:rotate(-0.6deg); }
.rotate-s-r{ transform:rotate(0.6deg); }

/* image / screenshot frame */
.shot-frame{
  border:3px solid var(--ink);
  border-radius:16px;
  background:var(--paper-white);
  box-shadow:8px 8px 0 var(--shadow-soft);
  overflow:hidden;
  position:relative;
}
.shot-frame .shot-bar{
  display:flex;align-items:center;gap:7px;
  padding:10px 14px;border-bottom:3px solid var(--ink);
  background:#f3f1ea;
}
.shot-bar .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);}
.shot-bar .dot.r{background:#ff8b73;}
.shot-bar .dot.y{background:var(--daisy-yellow);}
.shot-bar .dot.g{background:#a9dcb6;}
.shot-bar .bar-title{margin-left:8px;font-size:.95rem;color:var(--pencil-gray);}
/* the actual image slot — degrades to a labelled placeholder if a remote img fails */
.shot-img{
  width:100%;display:block;background:
    repeating-linear-gradient(45deg, #f6f4ec 0 12px, #efece2 12px 24px);
  min-height:120px;object-fit:cover;
}

/* ---- badges ---- */
.badge-row{display:flex;flex-wrap:wrap;gap:12px;}
.badge{
  display:inline-flex;align-items:center;gap:.45em;
  padding:9px 16px;
  border:2.5px solid var(--ink);
  border-radius:999px;
  background:var(--soft-yellow);
  box-shadow:3px 3px 0 var(--shadow-soft);
  font-weight:700;font-size:1rem;
  white-space:nowrap;
}
.badge .tick{color:var(--daisy-orange-dark);font-weight:700;}
.badge--free{background:var(--daisy-orange);color:#fff;}
.badge--mint{background:var(--mint);}
.badge--sky{background:var(--sky);}
.badge--white{background:var(--paper-white);}

/* ---- buttons ---- */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:16px 30px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:var(--daisy-orange);
  color:#fff;
  font-family:var(--font);
  font-size:1.28rem;font-weight:700;
  text-decoration:none;cursor:pointer;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn-primary:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);background:var(--daisy-orange-dark);}
.btn-primary:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink);}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 24px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:var(--paper-white);
  color:var(--ink);
  font-family:var(--font);
  font-size:1.12rem;font-weight:700;
  text-decoration:none;cursor:pointer;
  box-shadow:4px 4px 0 var(--shadow-soft);
  transition:transform 120ms ease, box-shadow 120ms ease;
}
.btn-ghost:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow-soft);}

/* ---- bullet list w/ daisy / tick markers ---- */
.proof-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.proof-list li{
  display:flex;align-items:flex-start;gap:.7em;
  font-size:1.26rem;font-weight:400;color:var(--ink-soft);
}
.proof-list li .mk{
  flex:0 0 auto;margin-top:.15em;width:24px;height:24px;
  display:grid;place-items:center;
}
.proof-list li .mk svg{width:24px;height:24px;}

/* ---- daisy mark (reusable) ---- */
.daisy{display:inline-block;line-height:0;}

/* ---- header / nav ---- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 86%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:2.5px solid var(--ink);
}
.nav{
  max-width:var(--page-max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 24px;
}
.nav-logo{height:38px;width:auto;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{text-decoration:none;font-weight:400;font-size:1.05rem;color:var(--ink-soft);}
.nav-links a:hover{color:var(--daisy-orange-dark);}
.nav-links .nav-cta{padding:9px 20px;font-size:1rem;}

/* hand-drawn underline accent */
.underline-sketch{position:relative;display:inline-block;}
.underline-sketch::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.18em;height:.32em;
  background:var(--daisy-orange);
  border-radius:60% 40% 55% 45%/100% 100% 100% 100%;
  opacity:.85;transform:rotate(-.6deg);
}

/* sketchy divider — full-bleed dashed line between sections */
.divider-sketch{border:0;border-top:3px dashed rgba(20,20,20,.26);height:0;margin:0;}

/* clean section illustration (transparent cutout art) */
.section-art{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 20px rgba(0,0,0,.14));}
.tools-art-wrap{margin-top:30px;display:flex;justify-content:center;}
.tools-art{max-width:800px;}

/* callout bubble */
.callout{
  position:relative;display:inline-block;
  background:var(--paper-white);
  border:2.5px solid var(--ink);
  border-radius:16px;
  padding:10px 16px;
  font-style:italic;font-size:1.02rem;color:var(--ink);
  box-shadow:3px 3px 0 var(--shadow-soft);
  max-width:230px;
}

/* footer */
.site-footer{
  border-top:2.5px solid var(--ink);
  background:var(--paper-white);
  padding:40px 24px;
}
.footer-inner{
  max-width:var(--page-max);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.footer-inner .foot-logo{height:30px;}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;}
.footer-links a{text-decoration:none;color:var(--pencil-gray);font-size:1rem;}
.footer-links a:hover{color:var(--daisy-orange-dark);}
.foot-note{color:var(--pencil-gray);font-size:.98rem;width:100%;}
.foot-note a{color:var(--daisy-orange-dark);text-decoration:underline;text-underline-offset:2px;}
.foot-note a:hover{color:var(--daisy-orange);}

/* ---- scroll reveal (subtle, optional) ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1;transform:none;}
}

/* ---- screenshot callouts (hand-drawn labels pinned to a frame) ---- */
.shot-stage{position:relative;}
.shot-callout{
  position:absolute;z-index:5;
  background:var(--paper-white);
  border:2.5px solid var(--ink);
  border-radius:14px;
  padding:8px 14px;
  font-weight:700;font-size:.98rem;white-space:nowrap;
  box-shadow:3px 3px 0 var(--shadow-soft);
}
.shot-callout.c-mint{background:var(--mint);}
.shot-callout.c-yellow{background:var(--soft-yellow);}
.shot-callout.c-sky{background:var(--sky);}
.shot-callout.c-coral{background:var(--soft-coral);}
/* little arrow nub */
.shot-callout::after{
  content:"";position:absolute;width:14px;height:14px;
  background:inherit;border:inherit;border-top:none;border-left:none;
  transform:rotate(45deg);
}
.shot-callout.arrow-bl::after{left:18px;bottom:-9px;}
.shot-callout.arrow-br::after{right:18px;bottom:-9px;}
.shot-callout.arrow-tl::after{left:18px;top:-9px;transform:rotate(-135deg);}
.shot-callout.arrow-tr::after{right:18px;top:-9px;transform:rotate(-135deg);}

/* ---- feature cards ---- */
.feature-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;
}
.feature-card{
  border:3px solid var(--ink);
  border-radius:var(--radius-card);
  background:var(--paper-white);
  box-shadow:6px 6px 0 var(--shadow-soft);
  padding:26px 22px 24px;
  transition:transform 140ms ease, box-shadow 140ms ease;
}
.feature-card:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--shadow-soft);}
.feature-card .ic-badge{
  width:58px;height:58px;border:3px solid var(--ink);border-radius:16px;
  display:grid;place-items:center;margin-bottom:16px;
  background:var(--soft-yellow);
}
.feature-card:nth-child(1) .ic-badge{background:var(--soft-blue);}
.feature-card:nth-child(2) .ic-badge{background:var(--soft-yellow);}
.feature-card:nth-child(3) .ic-badge{background:var(--mint);}
.feature-card:nth-child(4) .ic-badge{background:var(--soft-coral);}
.feature-card h3{font-weight:700;font-size:1.35rem;margin:0 0 .35em;}
.feature-card p{margin:0;color:var(--ink-soft);font-size:1.02rem;line-height:1.45;}
.ic{stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:900px){
  .feature-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .feature-grid{grid-template-columns:1fr;}
}

/* ---- responsive helpers ---- */
.two-col{
  display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;
}
.two-col.flip{grid-template-columns:.95fr 1.05fr;}
@media (max-width:900px){
  .two-col,.two-col.flip{grid-template-columns:1fr;gap:36px;}
  .section{padding:64px 20px;}
  .nav-links{display:none;}
}