/* ===========================================================================
   Bakery site — "the order book".
   Loaded after styles.css on sites/bakery/index.html only. Palette stays in
   the page's inline <style>; this sheet reshapes the page: a light blush
   hero with a diary-page order card, a warm serif display face with a
   rounded body face, a bento feature grid with alternating tints, a
   calendar strip for the workflow and big soft corners throughout.
   Scoped to body.site-bakery.
   =========================================================================== */

.site-bakery {
  --display: "Lora", Georgia, serif;
  --font-sans: "Nunito", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 26px;
  --radius-sm: 18px;
  --blush: #fbeef3;
  --blush-2: #f6dfe8;
  --plum-soft: color-mix(in srgb, var(--steel-600) 10%, var(--white));
  --rule: rgba(33, 16, 29, 0.1);
}

.site-bakery h1, .site-bakery h2, .site-bakery h3, .site-bakery .stat .num, .site-bakery .flow-step .n, .site-bakery .cmp .plan-name {
  font-family: var(--display);
  letter-spacing: -0.01em;
}
.site-bakery h1 { font-weight: 500; font-size: clamp(2.5rem, 5.2vw, 4rem); line-height: 1.06; }
.site-bakery h2 { font-weight: 500; }
.site-bakery h3 { font-weight: 600; font-size: 1.28rem; }
.site-bakery h2 em, .site-bakery h1 .hl { font-style: italic; }
.site-bakery .eyebrow { letter-spacing: 0.16em; font-size: 0.74rem; background: var(--blush-2); color: var(--amber-text); padding: 5px 12px; border-radius: 999px; }
.site-bakery body, .site-bakery { font-weight: 500; }

.site-bakery .btn { font-weight: 700; }
.site-bakery .btn--primary { color: var(--white); }

/* ---- Header on blush ---- */
.site-bakery .site-header { background: color-mix(in srgb, var(--white) 86%, transparent); border-bottom: 0; }

/* ---- Hero: blush paper, soft blobs, an order card on the diary page ---- */
.site-bakery .hero {
  color: var(--steel-800);
  background:
    radial-gradient(560px 420px at 12% 20%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 70%),
    radial-gradient(640px 480px at 92% 90%, color-mix(in srgb, var(--steel-500) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--white), var(--blush));
}
.site-bakery .hero::after {
  /* confetti dots instead of the engineering grid */
  background-image: radial-gradient(color-mix(in srgb, var(--amber) 28%, transparent) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(700px 500px at 30% 30%, #000, transparent 80%);
  opacity: 0.9;
}
.site-bakery .hero-inner { grid-template-columns: 1fr 1fr; }
.site-bakery .hero h1 { color: var(--steel-900); }
.site-bakery .hero h1 .hl { color: var(--amber-text); font-weight: 500; }
.site-bakery .hero-sub { color: var(--steel-700); font-size: 1.15rem; }
.site-bakery .hero-points li { color: var(--steel-700); }
.site-bakery .btn--on-dark { color: var(--steel-800); border-color: color-mix(in srgb, var(--steel-500) 30%, transparent); background: rgba(255,255,255,0.5); }
.site-bakery .btn--on-dark:hover { color: var(--steel-950); background: var(--white); border-color: var(--steel-500); }

.site-bakery .pill {
  background: var(--white);
  border: 0;
  color: var(--amber-text);
  box-shadow: 0 6px 18px rgba(33,16,29,0.1);
  transform: rotate(-3deg);
  transform-origin: left center;
  font-weight: 800;
}

/* Order card: a page from the order book, ribbon header, ruled lines. */
.site-bakery .hero-media { position: relative; }
.site-bakery .device {
  background: var(--white);
  border: 0;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(33,16,29,0.18);
  transform: rotate(-1.5deg);
}
.site-bakery .device-bar {
  background: linear-gradient(90deg, var(--amber), var(--amber-600));
  padding: 14px 20px;
  justify-content: space-between;
}
.site-bakery .device-bar span { width: auto; height: auto; border-radius: 0; background: transparent !important; color: var(--white); font-family: var(--display); font-style: italic; font-size: 1.05rem; }
.site-bakery .device-bar span:nth-child(1)::after { content: "The order book"; }
.site-bakery .device-bar span:nth-child(2)::after { content: ""; }
.site-bakery .device-bar span:nth-child(3)::after { content: "Saturday"; font-family: var(--font-sans); font-style: normal; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.site-bakery .device-screen {
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
    var(--white);
  border-radius: 0;
  padding: 16px 20px 20px;
}
.site-bakery .mock-row { background: var(--blush); border: 0; border-radius: 14px; }
.site-bakery .mock-ico { background: var(--white); color: var(--amber-text); border-radius: 50%; }
.site-bakery .mock-title { color: var(--steel-900); font-weight: 700; }
.site-bakery .mock-sub { color: var(--steel-700); }
.site-bakery .tag--open { background: var(--plum-soft); color: var(--steel-700); }
.site-bakery .device .status-strip { border-radius: 12px; }
/* a sticker peeking over the corner */
.site-bakery .hero-media::before {
  content: "Deposit paid ✓";
  position: absolute; top: -18px; right: -10px; z-index: 2;
  background: var(--green); color: var(--white);
  font-weight: 800; font-size: 0.8rem; padding: 8px 14px; border-radius: 999px;
  transform: rotate(6deg);
  box-shadow: 0 8px 20px rgba(43,182,115,0.35);
}

/* ---- Trust: soft pills ---- */
.site-bakery .trust { background: transparent; border: 0; }
.site-bakery .trust .container { gap: 10px; padding-top: 18px; padding-bottom: 6px; }
.site-bakery .trust span { background: var(--white); border-radius: 999px; padding: 8px 14px; box-shadow: 0 2px 8px rgba(33,16,29,0.06); font-weight: 700; font-size: 0.82rem; }

/* ---- Features: bento tiles with alternating tints ---- */
.site-bakery #features .grid-3 { grid-template-columns: repeat(6, 1fr); gap: 16px; }
.site-bakery #features .card { grid-column: span 2; border: 0; box-shadow: none; background: var(--white); padding: 28px; }
.site-bakery #features .card:nth-child(1) { grid-column: span 4; background: var(--steel-900); color: var(--white); display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-content: start; }
.site-bakery #features .card:nth-child(1) h3 { color: var(--white); font-size: 1.7rem; grid-column: 2; }
.site-bakery #features .card:nth-child(1) p { color: var(--slate-200); grid-column: 2; font-size: 1.02rem; }
.site-bakery #features .card:nth-child(1) .ico { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 50%; background: var(--amber); color: var(--white); }
.site-bakery #features .card:nth-child(4) { grid-column: span 3; background: var(--blush); }
.site-bakery #features .card:nth-child(5) { grid-column: span 3; background: var(--plum-soft); }
.site-bakery #features .card:nth-child(9) { background: var(--blush); }
.site-bakery #features .card:nth-child(11) { background: var(--plum-soft); }
.site-bakery #features .card:nth-child(12) { grid-column: span 3; }
.site-bakery #features .card:nth-child(13) { grid-column: span 3; background: var(--blush); }
.site-bakery #features .card:hover { transform: none; box-shadow: 0 14px 30px rgba(33,16,29,0.1); }
.site-bakery #features .card .ico { border-radius: 50%; background: var(--white); color: var(--amber-text); box-shadow: 0 2px 8px rgba(33,16,29,0.08); }
.site-bakery #features .card:nth-child(n+2):nth-child(-n+3) .ico, .site-bakery #features .card:nth-child(6) .ico, .site-bakery #features .card:nth-child(7) .ico,
.site-bakery #features .card:nth-child(8) .ico, .site-bakery #features .card:nth-child(10) .ico, .site-bakery #features .card:nth-child(12) .ico { background: var(--blush); box-shadow: none; }

/* ---- How it works: a week strip from the diary ---- */
.site-bakery #how { background: var(--blush) !important; border: 0 !important; }
.site-bakery #how .flow { gap: 14px; position: relative; }
.site-bakery #how .flow::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; border-top: 2px dotted var(--amber-600); z-index: 0; }
.site-bakery #how .flow-step { position: relative; z-index: 1; border: 0; border-radius: 20px; box-shadow: 0 8px 22px rgba(33,16,29,0.08); padding: 0 18px 22px; background: var(--white); text-align: center; margin-top: 24px; }
.site-bakery #how .flow-step .n {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--amber); color: var(--white);
  font-size: 1.3rem; font-weight: 600; font-style: italic;
  margin-top: -26px;
  box-shadow: 0 0 0 6px var(--blush);
}
.site-bakery #how .flow-step h4 { font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin-top: 10px; }
.site-bakery #how .flow-step .arrow { display: none; }

/* ---- Screens ---- */
.site-bakery .screen-frame { border-radius: 34px; border: 0; padding: 12px; background: var(--blush); box-shadow: 0 20px 44px rgba(33,16,29,0.12); }
.site-bakery .screen-frame img { border-radius: 24px; }
.site-bakery .screen figcaption { font-family: var(--display); font-style: italic; font-size: 1.02rem; }

/* ---- Spotlights ---- */
.site-bakery #spotlights { background: var(--white); }
.site-bakery .spot-media { background: var(--blush); border: 0; box-shadow: none; border-radius: 30px; padding: 30px; }
.site-bakery .panel { border: 0; border-radius: 20px; box-shadow: 0 12px 30px rgba(33,16,29,0.1); }
.site-bakery .panel-head { background: var(--plum-soft); border: 0; font-family: var(--display); font-weight: 600; font-size: 1rem; }
.site-bakery .kv { border-bottom: 1px dotted var(--rule); }
.site-bakery .spot-media .status-strip { border-radius: 14px; }

/* ---- Stats: iced rounds ---- */
.site-bakery .stats { gap: 18px; }
.site-bakery .stat { background: var(--blush); border-radius: 999px; padding: 26px 16px; aspect-ratio: 1.7; display: grid; place-content: center; }
.site-bakery .stat:nth-child(even) { background: var(--plum-soft); }
.site-bakery .stat .num { font-weight: 500; }

/* ---- Who ---- */
.site-bakery .audience { border: 0; box-shadow: none; background: var(--blush); border-radius: 30px; }
.site-bakery .audience:nth-child(2) { background: var(--plum-soft); }
.site-bakery .audience .badge { border-radius: 50%; background: var(--white); color: var(--amber-text); }

/* ---- Pricing ---- */
.site-bakery .cmp { border-radius: 20px; }
.site-bakery .cmp thead th:nth-child(3) { background: var(--blush); border-radius: 20px 20px 0 0; }
.site-bakery .cmp tbody td:nth-child(3) { background: var(--blush); }
.site-bakery .cmp .grp th { background: transparent; }
.site-bakery #pricing .card { border: 0; background: var(--blush); box-shadow: none; }

/* ---- FAQ ---- */
.site-bakery .faq details { border: 0; box-shadow: none; background: var(--blush); border-radius: 18px; padding: 6px 24px; }
.site-bakery .faq details[open] { background: var(--white); box-shadow: 0 12px 30px rgba(33,16,29,0.1); }
.site-bakery .faq summary { font-family: var(--display); font-weight: 600; font-size: 1.06rem; }

/* ---- Closing band: plum, very round ---- */
.site-bakery .cta-band { border-radius: 40px; }

@media (max-width: 940px) {
  .site-bakery #features .grid-3 { grid-template-columns: 1fr 1fr; }
  .site-bakery #features .card, .site-bakery #features .card:nth-child(n) { grid-column: span 1; }
  .site-bakery #features .card:nth-child(1) { grid-column: span 2; }
  .site-bakery #how .flow::before { display: none; }
  .site-bakery .device { transform: none; }
  .site-bakery .stat { aspect-ratio: auto; }
}
@media (max-width: 600px) {
  .site-bakery #features .grid-3 { grid-template-columns: 1fr; }
  .site-bakery #features .card:nth-child(1) { grid-column: span 1; grid-template-columns: 1fr; }
  .site-bakery #features .card:nth-child(1) h3, .site-bakery #features .card:nth-child(1) p { grid-column: 1; }
  .site-bakery #features .card:nth-child(1) .ico { grid-row: auto; }
}
@media (max-width: 940px) {
  .site-bakery .hero-inner { grid-template-columns: 1fr; }
}