/* ===========================================================================
   Cafe site — "the menu board".
   Loaded after styles.css on sites/cafe/index.html only. The palette stays in
   the page's inline <style> (theming contract); this sheet changes the
   *shape* of the page: a warm cream hero with a chalkboard, a serif display
   face, features laid out as a menu card, receipts for the mock panels and a
   caramel closing band. Everything here is scoped to body.site-cafe.
   =========================================================================== */

.site-cafe {
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --radius: 10px;
  --radius-sm: 6px;
  --cream: #fbf7f0;
  --rule: rgba(64, 42, 20, 0.14);
}

.site-cafe h1, .site-cafe h2, .site-cafe h3, .site-cafe .stat .num, .site-cafe .flow-step .n {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 60;
  letter-spacing: -0.015em;
}
.site-cafe h1 { font-weight: 600; font-size: clamp(2.5rem, 5.4vw, 4.1rem); line-height: 1.05; }
.site-cafe h2 { font-weight: 600; }
.site-cafe h3 { font-weight: 600; font-size: 1.3rem; }
.site-cafe .eyebrow { letter-spacing: 0.2em; font-size: 0.72rem; }
.site-cafe .eyebrow::before { content: "— "; letter-spacing: 0; }

.site-cafe .btn { border-radius: 8px; }
.site-cafe .btn--primary { color: var(--steel-950); }

/* ---- Header: sits on the cream, with a hairline rule ---- */
.site-cafe .site-header { background: color-mix(in srgb, var(--cream) 92%, transparent); border-bottom: 1px solid var(--rule); }

/* ---- Hero: cream paper, espresso type, chalkboard on the right ---- */
.site-cafe .hero {
  color: var(--steel-800);
  background:
    radial-gradient(700px 360px at 90% 0%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 65%),
    linear-gradient(180deg, #fdfbf7, var(--cream));
}
.site-cafe .hero::after {
  /* Subtle "linen" instead of the engineering grid. */
  background-image: repeating-linear-gradient(0deg, rgba(64,42,20,0.035) 0 1px, transparent 1px 7px);
  background-size: auto;
  mask-image: none;
  opacity: 0.8;
}
.site-cafe .hero-inner { grid-template-columns: 1.1fr 0.9fr; padding-top: clamp(48px, 7vw, 84px); }
.site-cafe .hero h1 { color: var(--steel-900); }
.site-cafe .hero h1 .hl { color: var(--amber-text); font-style: italic; font-weight: 500; }
.site-cafe .hero-sub { color: var(--steel-700); font-size: 1.14rem; }
.site-cafe .hero-points li { color: var(--steel-700); }
.site-cafe .btn--on-dark { color: var(--steel-800); border-color: var(--rule); }
.site-cafe .btn--on-dark:hover { color: var(--steel-950); background: var(--white); border-color: var(--steel-700); }

/* Rubber-stamp badge instead of a glowing pill. */
.site-cafe .pill {
  background: transparent;
  border: 2px solid var(--amber-text);
  color: var(--amber-text);
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  padding: 6px 12px;
  transform: rotate(-2deg);
  transform-origin: left center;
}
.site-cafe .pill .dot { display: none; }

/* Chalkboard: a dark slate in a wooden frame, chalk hand-drawn inner rule. */
.site-cafe .hero-media { position: relative; }
.site-cafe .device {
  background: linear-gradient(180deg, var(--steel-800), var(--steel-900));
  border: 10px solid #8a5a34;
  border-image: linear-gradient(180deg, #a06a3e, #6e4424) 1;
  border-radius: 4px;
  box-shadow: 0 24px 50px rgba(50, 30, 10, 0.28), inset 0 0 0 1px rgba(255,255,255,0.08);
  padding: 18px 16px 16px;
  transform: rotate(1.2deg);
}
.site-cafe .device-bar { display: none; }
.site-cafe .device-screen {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.28);
  border-radius: 2px;
  padding: 14px 12px 12px;
  position: relative;
}
.site-cafe .device-screen::before {
  content: "Today's orders";
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.35rem;
  color: #f4ead8;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.site-cafe .mock-row { background: transparent; border: 0; border-bottom: 1px dotted rgba(255,255,255,0.22); border-radius: 0; padding: 10px 4px; margin: 0; }
.site-cafe .mock-row:last-of-type { border-bottom: 0; }
.site-cafe .mock-ico { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #f4ead8; border-radius: 50%; width: 30px; height: 30px; }
.site-cafe .mock-title { color: #f7efe1; font-weight: 500; }
.site-cafe .mock-sub { color: rgba(247,239,225,0.62); }
.site-cafe .tag { border-radius: 3px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; }
.site-cafe .device .status-strip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #f4ead8; border-radius: 3px; }
/* A chalk stub resting on the frame's ledge. */
.site-cafe .hero-media::after {
  content: "";
  position: absolute; right: 34px; bottom: -6px;
  width: 54px; height: 9px; border-radius: 3px;
  background: #f4ead8; box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  transform: rotate(-4deg);
}

/* ---- Trust: an espresso ribbon, items separated by bullets ---- */
.site-cafe .trust { background: var(--steel-900); border: 0; }
.site-cafe .trust span { color: #e9dcc7; font-weight: 500; font-size: 0.84rem; }
.site-cafe .trust svg { color: var(--amber); }
.site-cafe .trust span + span::before { content: "·"; color: var(--amber); margin-right: 22px; font-size: 1.2rem; line-height: 0; }

/* ---- Features: a two-column menu card, no boxes ---- */
.site-cafe #features { background: var(--cream); }
.site-cafe #features .grid-3 {
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 8px;
  border-top: 1px solid var(--rule);
}
.site-cafe #features .card {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 4px 16px;
  align-content: start;
  padding: 24px 0 22px;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--rule);
  border-radius: 0;
  box-shadow: none;
}
.site-cafe #features .card:hover { transform: none; box-shadow: none; }
.site-cafe #features .card .ico {
  grid-row: 1 / span 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--amber-text);
  color: var(--amber-text);
  margin: 0;
}
.site-cafe #features .card h3 { font-size: 1.28rem; margin: 2px 0 0; }
.site-cafe #features .card p { font-size: 0.94rem; line-height: 1.55; }

/* ---- How it works: a strip of receipt tickets on caramel ---- */
.site-cafe #how {
  background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 22%, var(--cream)), color-mix(in srgb, var(--amber) 34%, var(--cream))) !important;
  border: 0 !important;
}
.site-cafe #how .flow { gap: 0; background: var(--white); border-radius: 6px; box-shadow: 0 18px 40px rgba(64,42,20,0.16); overflow: hidden; }
.site-cafe #how .flow-step { border: 0; border-right: 1px dashed var(--rule); border-radius: 0; box-shadow: none; padding: 26px 22px; background: transparent; }
.site-cafe #how .flow-step:last-child { border-right: 0; }
.site-cafe #how .flow-step .n { font-size: 2rem; font-weight: 500; color: var(--amber-text); line-height: 1; font-style: italic; }
.site-cafe #how .flow-step h4 { margin-top: 10px; font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.site-cafe #how .flow-step .arrow { display: none; }

/* ---- Screens: cream, captions in italic serif ---- */
.site-cafe #screens { background: var(--cream); }
.site-cafe .screen-frame { border-radius: 14px; border-color: var(--rule); box-shadow: 0 16px 36px rgba(64,42,20,0.14); }
.site-cafe .screen-frame img { border-radius: 8px; }
.site-cafe .screen figcaption { font-family: var(--display); font-style: italic; font-size: 1.02rem; color: var(--steel-800); }

/* ---- Spotlights: mock panels become till receipts ---- */
.site-cafe #spotlights { background: var(--white); border-top: 1px solid var(--rule); }
.site-cafe .spot-media { background: transparent; border: 0; box-shadow: none; padding: 26px 20px 32px; }
.site-cafe .spot-media::before { display: none; }
.site-cafe .panel {
  font-family: var(--font-mono);
  border: 0;
  border-radius: 0;
  background: #fffdf9;
  box-shadow: 0 14px 30px rgba(64,42,20,0.16);
  transform: rotate(-1deg);
  /* zig-zag bottom edge like a torn receipt */
  padding-bottom: 10px;
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,
    conic-gradient(from 135deg at 50% 100%, #000 90deg, transparent 0) bottom/16px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,
    conic-gradient(from 135deg at 50% 100%, #000 90deg, transparent 0) bottom/16px 10px repeat-x;
}
.site-cafe .panel-head { border-bottom: 1px dashed var(--rule); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; }
.site-cafe .kv { border-bottom: 0; font-size: 0.86rem; padding: 7px 0; }
.site-cafe .kv .v { font-weight: 700; }
.site-cafe .role-row { font-size: 0.78rem; }
.site-cafe .status-strip { border-radius: 4px; }
.site-cafe .spot-copy ul svg { color: var(--amber-text); }

/* ---- Stats: big serif numerals on a rule ---- */
.site-cafe .stats { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 30px 0; }
.site-cafe .stat .num { font-weight: 500; font-style: italic; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.site-cafe .stat .num b { font-weight: 600; font-style: normal; }
.site-cafe .stat + .stat { border-left: 1px dashed var(--rule); }

/* ---- Who: cream cards with a caramel top rule ---- */
.site-cafe #who { background: var(--cream); }
.site-cafe .audience { border: 1px solid var(--rule); border-top: 4px solid var(--amber); box-shadow: none; border-radius: 6px; }
.site-cafe .audience .badge { border-radius: 50%; background: transparent; border: 1.5px solid var(--amber-text); color: var(--amber-text); }

/* ---- Pricing: a printed price list ---- */
.site-cafe #pricing { background: var(--white) !important; }
.site-cafe .cmp thead th { border-bottom: 2px solid var(--steel-900); }
.site-cafe .cmp .plan-name { font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.site-cafe .cmp .grp th { background: var(--cream); }
.site-cafe #pricing .card { border-radius: 6px; box-shadow: none; border-color: var(--rule); }

/* ---- FAQ: notebook lines ---- */
.site-cafe #faq { background: var(--cream); }
.site-cafe .faq details { border: 0; border-left: 3px solid var(--amber); border-radius: 0 6px 6px 0; box-shadow: none; background: var(--white); }
.site-cafe .faq summary { font-family: var(--display); font-weight: 600; font-size: 1.06rem; }

/* ---- Closing band: caramel with espresso type ---- */
.site-cafe .cta-band {
  background: linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 70%, #ffd9a8));
  color: var(--steel-950);
  border-radius: 8px;
}
.site-cafe .cta-band h2 { color: var(--steel-950); }
.site-cafe .cta-band p { color: var(--steel-800); }
.site-cafe .cta-band .btn--primary { background: var(--steel-950); color: #f7efe1; }
.site-cafe .cta-band .btn--primary:hover { background: var(--steel-800); box-shadow: none; }
.site-cafe .cta-band .btn--on-dark { color: var(--steel-950); border-color: rgba(23,16,8,0.35); }
.site-cafe .cta-band .btn--on-dark:hover { background: rgba(255,255,255,0.35); color: var(--steel-950); }

/* ---- Small screens ---- */
@media (max-width: 940px) {
  .site-cafe #features .grid-3 { grid-template-columns: 1fr; gap: 0; }
  .site-cafe #how .flow { grid-template-columns: 1fr; }
  .site-cafe #how .flow-step { border-right: 0; border-bottom: 1px dashed var(--rule); }
  .site-cafe #how .flow-step:last-child { border-bottom: 0; }
  .site-cafe .stat + .stat { border-left: 0; }
  .site-cafe .device { transform: none; }
}
@media (max-width: 680px) {
  .site-cafe .spotlight > * { min-width: 0; }
  .site-cafe .panel { overflow: hidden; }
  .site-cafe .kv { flex-wrap: wrap; gap: 2px 10px; }
}
@media (max-width: 940px) {
  .site-cafe .hero-inner { grid-template-columns: 1fr; }
  .site-cafe .trust span + span::before { display: none; }
}