/* =====================================================
   TalkTello — main stylesheet
   Dark earthy background, chunky cream cards with hard
   shadows, hover highlights on everything, custom cursor.
   (Layout basics shared with other pages: common.css)

   Change colors here ↓
   ===================================================== */
:root {
  /* page */
  --bg: #2a221c;         /* dark espresso / walnut — the main background */
  --bg-2: #342a22;       /* slightly lighter walnut — alternate sections */
  --bg-3: #1f3127;       /* deep forest — "how it works" section */
  --cream: #f3e9d8;      /* text on the dark background */
  --soft: #c7b9a3;       /* softer text on the dark background */

  /* cards */
  --paper: #fbf5ea;      /* card / box background */
  --ink: #120e0b;        /* borders, shadows and text on cards */
  --muted: #625a4f;      /* softer text on cards */

  /* accents */
  --forest: #2f4a3a;
  --clay: #c0683f;       /* terracotta — main buttons, banner */
  --ochre: #d9a84e;
  --sage: #b4c09a;
  --sand: #e3cfa9;
  --slate: #a9bcbc;
  --hl: #e8c068;         /* ← hover highlight color (golden ochre) */

  --text: var(--cream);
  --line: rgba(243, 233, 216, .14);
  --menu-bg: var(--bg);
  --b: 2.5px solid var(--ink);
  --shadow: 5px 5px 0 var(--ink);
  --shadow-up: 8px 8px 0 var(--ink);
  --font-body: "Archivo", system-ui, sans-serif;
  --font-head: "Archivo", system-ui, sans-serif;
  --dot: var(--cream);
}

/* dark background with soft warm glows + a fine grain so it never looks flat.
   (All painted once as part of the page — nothing extra redraws while scrolling.) */
body {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"),
    radial-gradient(900px 600px at 0% 0%, rgba(192, 104, 63, .16), transparent 60%),
    radial-gradient(800px 600px at 100% 600px, rgba(47, 74, 58, .32), transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat;
}

h1, h2 { font-weight: 900; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.6rem, 5.2vw, 4.5rem); line-height: 1; }
h2 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.02; }
h3 { font-size: 1.2rem; font-weight: 800; }
.narrow { max-width: 780px; }
.muted { color: var(--soft); }

/* every light card uses dark text */
.box, .tag, .chip, .faq, .email, .sticker, .btn-alt, .msg.bot, .chat, .badge, .toast { color: var(--ink); }
.box { border: var(--b); border-radius: 18px; box-shadow: var(--shadow); background: var(--paper); }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border: var(--b); border-radius: 99px; background: var(--paper); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 18px; }
.tag-live { background: var(--sage); }
.tag-light { background: var(--hl); }

/* =====================================================
   CUSTOM CURSOR (mouse/trackpad only — phones & iPads skip this)
   · normally: a cream arrow with a hard shadow + golden sparkle
   · over clickable things: a golden pointing hand
   Images: static/img/cursor.svg and cursor-hover.svg
   (The old trailing-ring cursor is saved in /saved/trailing-cursor)
   ===================================================== */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url("../img/cursor.svg") 3 3, auto; }
  a, button, summary, label, .chip, [data-copy], [role="button"], a *, button *, summary * {
    cursor: url("../img/cursor-hover.svg") 10 2, pointer;
  }
  input, textarea { cursor: text; }
}

/* =====================================================
   HOVER HIGHLIGHT — anything you can click lights up
   (also shows when tabbing with the keyboard, and on tap)
   ===================================================== */
.btn, .chip, .copy, .chat-form button, .switch, .faq, .burger {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover, .btn:focus-visible,
.chip:hover, .chip:focus-visible,
.copy:hover, .copy:focus-visible,
.chat-form button:hover, .chat-form button:focus-visible {
  background: var(--hl) !important; color: var(--ink) !important;
  transform: translate(-3px, -3px); box-shadow: var(--shadow-up); outline: none;
}
.btn:active, .chip:active, .copy:active, .chat-form button:active {
  transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink);
}
/* text links get a highlighter-pen swipe */
.links a:not(.btn), .footer-grid a:not(.brand), .email a, .footer-bottom a, .prose a {
  background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat;
  background-size: 0% 100%; background-position: 0 0; transition: background-size .2s ease, color .2s ease;
  border-radius: 4px; padding: 1px 4px; margin: -1px -4px;
}
.links a:not(.btn):hover, .footer-grid a:not(.brand):hover, .email a:hover, .footer-bottom a:hover, .prose a:hover,
.links a:not(.btn):focus-visible, .email a:focus-visible { background-size: 100% 100%; color: var(--ink); opacity: 1; outline: none; }
/* logo wiggles */
.brand:hover img { animation: wiggle .5s ease; }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
/* FAQ rows */
.faq:hover, .faq:has(summary:focus-visible) { background: var(--hl); box-shadow: 6px 6px 0 var(--ink); }
/* pricing switch & menu button */
.switch:hover, .switch:focus-visible { background: var(--hl) !important; outline: none; }
.burger:hover, .burger:focus-visible { background: var(--hl); color: var(--ink); border-radius: 10px; outline: none; }
/* form fields light up when you click into them */
.form input:focus, .form textarea:focus, .chat-form input:focus { background: var(--paper); box-shadow: 4px 4px 0 var(--clay); border-color: var(--ink); }

/* =====================================================
   CONTENT HIGHLIGHTS — features, store types, stats, steps,
   reviews and plan items pop out in their own color on hover
   ===================================================== */
.feature, .stat, .step, .quote, .plan, .plan li, .band-track span {
  transition: box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
}
@media (hover: hover) {
  /* cards light up in place (they don't move, so nothing flickers under the mouse) */
  .feature:hover { box-shadow: 9px 9px 0 var(--ink); }
  .feature:hover .f-icon { background: var(--paper) !important; transform: rotate(-8deg) scale(1.08); }
  .f-icon { transition: transform .2s ease, background-color .2s ease; }
  .c1:hover { background: var(--forest); color: var(--paper); }
  .c2:hover { background: var(--clay); color: var(--paper); }
  .c3:hover { background: var(--ochre); }
  .c4:hover { background: var(--sage); }
  .c5:hover { background: var(--slate); }
  .c6:hover { background: var(--sand); }
  .feature:hover p { color: var(--ink); }
  .feature.c1:hover p, .feature.c2:hover p { color: rgba(251, 245, 234, .85); }

  .band:hover .band-track { animation-play-state: paused; }
  .band-track span { padding: 2px 12px; border-radius: 99px; border: 2px solid transparent; }
  .band-track span:hover { background: var(--hl); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

  .stat:hover { box-shadow: 8px 8px 0 var(--ink); filter: brightness(1.06); }
  .step:hover { background: var(--paper); color: var(--ink); border-color: var(--hl); box-shadow: 6px 6px 0 var(--hl); }
  .step:hover p { opacity: .8; }
  .quote:hover { box-shadow: 9px 9px 0 var(--ink); }
  .q1:hover { background: var(--sage); } .q2:hover { background: var(--hl); } .q3:hover { background: var(--slate); }
  .quote:hover small { color: var(--ink); }

  .plan li { border-radius: 8px; padding: 3px 8px; margin: 0 -8px; }
  .plan li:hover { background: var(--hl); }
  .plan:hover { box-shadow: 10px 10px 0 var(--ink); }
}

/* ---------- buttons ---------- */
.btn { border: var(--b); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); font-weight: 800; }
.btn-main { background: var(--clay); color: var(--paper); }
.btn-alt { background: var(--paper); color: var(--ink); }

/* ---------- nav ---------- */
.nav { background: var(--bg); border-bottom: var(--b); }
/* TalkTello wordmark font */
.brand { gap: 11px; }
.brand img { width: 36px; height: 36px; }
.brand span { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1; color: var(--cream); }
.links a:not(.btn) { font-weight: 700; color: var(--cream); }
.burger { color: var(--cream); }
.nav-cta { box-shadow: 3px 3px 0 var(--ink); }

/* ---------- hero ---------- */
.hero { padding: 80px 0 104px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
mark { background: var(--hl); color: var(--ink); padding: 0 .16em; border: var(--b); border-radius: 14px; box-shadow: var(--shadow); display: inline-block; transform: rotate(2deg); transition: opacity .35s, transform .35s; }
#rotator { display: inline-grid; }
.rot-word { grid-area: 1 / 1; text-align: center; transition: opacity .35s ease, transform .35s ease; }
.rot-word:not(.on) { opacity: 0; transform: translateY(10px); }
.lead { font-size: 1.2rem; color: var(--soft); max-width: 540px; margin-top: 26px; font-weight: 500; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.note { font-size: .9rem; font-weight: 600; margin-top: 18px; color: var(--soft); }
.hero-art { position: relative; }
.chat-card { height: 440px; display: flex; flex-direction: column; overflow: hidden; background: var(--sand); transform: rotate(-2deg); box-shadow: 10px 10px 0 var(--ink); }
.chat-card .chat-head { background: var(--paper); border-bottom: var(--b); }
.sticker { position: absolute; padding: 8px 14px; border: var(--b); border-radius: 99px; box-shadow: 4px 4px 0 var(--ink); font-weight: 800; font-size: .92rem; white-space: nowrap; }
.s1 { top: -22px; right: -10px; background: var(--sage); transform: rotate(5deg); }
.s2 { bottom: -24px; left: -18px; background: var(--slate); transform: rotate(-4deg); }
.s3 { bottom: -20px; right: 36px; background: var(--hl); transform: rotate(5deg); }

/* ---------- messages ---------- */
.msg { border: var(--b); border-radius: 16px; font-weight: 600; }
.msg.bot { background: var(--paper); border-bottom-left-radius: 4px; }
.msg.user { background: var(--forest); color: var(--paper); border-bottom-right-radius: 4px; }
.typing { color: var(--ink); }

/* ---------- band (store types) ---------- */
.band { background: var(--clay); color: var(--paper); border-top: var(--b); border-bottom: var(--b); overflow: hidden; padding: 16px 0; transform: rotate(1.5deg); margin: 0 -20px; box-shadow: 0 6px 0 var(--ink); }
.band-track { display: flex; gap: 28px; width: max-content; animation: band 30s linear infinite; font-weight: 900; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em; }
.band b { color: var(--ink); opacity: .7; }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- stats ---------- */
.stats-sec { padding: 96px 0 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stat { padding: 24px; text-align: center; border-radius: 99px; }
.stat:nth-child(1) { background: var(--slate); transform: rotate(-1.5deg); }
.stat:nth-child(2) { background: var(--hl); }
.stat:nth-child(3) { background: var(--sage); transform: rotate(1.5deg); }
.stat strong { display: block; font-size: 2.3rem; line-height: 1.05; font-weight: 900; }
.stat span { font-weight: 700; }

/* ---------- features ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { padding: 28px; background: var(--paper); }
.feature .f-icon { display: grid; place-items: center; width: 54px; height: 54px; border: var(--b); border-radius: 50%; font-size: 1.5rem; margin-bottom: 18px; box-shadow: 3px 3px 0 var(--ink); }
.c1 .f-icon { background: var(--forest); } .c2 .f-icon { background: var(--sand); } .c3 .f-icon { background: var(--sage); }
.c4 .f-icon { background: var(--clay); } .c5 .f-icon { background: var(--slate); } .c6 .f-icon { background: var(--ochre); }
.feature p { margin: 0; color: var(--muted); font-weight: 500; }

/* ---------- steps ---------- */
.inv { background: var(--bg-3); border-top: var(--b); border-bottom: var(--b); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { display: flex; gap: 18px; align-items: flex-start; padding: 26px; border: 2.5px solid rgba(243, 233, 216, .75); border-radius: 18px; background: rgba(255, 255, 255, .04); }
.step-n { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--sage); color: var(--ink); font-size: 1.4rem; font-weight: 900; border: var(--b); transform: rotate(-6deg); box-shadow: 3px 3px 0 var(--ink); }
.step:nth-child(2) .step-n { background: var(--clay); transform: rotate(5deg); }
.step:nth-child(3) .step-n { background: var(--hl); }
.step p { margin: 0; opacity: .75; }

/* ---------- demo ---------- */
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.demo-copy p { font-size: 1.1rem; color: var(--soft); font-weight: 500; }
.chip { background: var(--paper); border: var(--b); border-radius: 99px; box-shadow: 3px 3px 0 var(--ink); font-weight: 700; }
.chat-wrap { overflow: hidden; }
.chat { background: #efe4d1; }
.chat-head { background: var(--slate); border-bottom: var(--b); }
.chat-head small { opacity: 1; }
.chat-form { border-top: var(--b); background: var(--paper); }
.chat-form input { border: var(--b); border-radius: 12px; padding: 10px 14px; background: var(--paper); color: var(--ink); font-weight: 600; }
.chat-form button { width: 46px; height: 46px; border: var(--b); border-radius: 12px; background: var(--clay); color: var(--paper); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- pricing ---------- */
.hl { background: var(--bg-2); border-top: var(--b); border-bottom: var(--b); }
.billing { margin-top: 6px; font-weight: 800; }
.billing span { opacity: .6; }
.billing em { background: var(--sage); color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; padding: 1px 8px; }
.switch { background: var(--paper); border: var(--b); height: 30px; width: 54px; }
.switch span { background: var(--ink); top: 2px; left: 2px; }
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 900px; margin: 0 auto; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 26px; padding: 36px; }
.plan.featured { background: var(--sand); box-shadow: 10px 10px 0 var(--ink); }
.badge { position: absolute; top: -16px; right: 24px; padding: 5px 14px; border: var(--b); border-radius: 99px; background: var(--hl); font-weight: 800; font-size: .82rem; box-shadow: 3px 3px 0 var(--ink); transform: rotate(3deg); }
.plan-top p { color: var(--muted); font-weight: 500; }
.price { font-size: 4rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; margin: 18px 0 26px; }
.price small { font-size: 1.1rem; letter-spacing: 0; color: var(--muted); font-weight: 600; }
.plan ul { list-style: none; margin: 0; padding: 22px 0 0; display: grid; gap: 10px; border-top: 2px dashed rgba(18, 14, 11, .25); }
.plan li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.plan li::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--sage); font-size: .8rem; font-weight: 900; }
/* if you ever go back to a single plan */
.plans.single { grid-template-columns: 1fr; }
.plans.single .plan { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.plans.single .plan ul { border-top: 0; padding-top: 0; }

/* ---------- quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { margin: 0; padding: 26px; display: flex; flex-direction: column; gap: 20px; }
.q1 { background: var(--paper); } .q2 { background: var(--sand); } .q3 { background: var(--paper); }
.stars { color: var(--clay); letter-spacing: 2px; }
.quote blockquote { margin: 0; flex: 1; font-size: 1.05rem; font-weight: 600; }
.quote figcaption { display: flex; gap: 12px; align-items: center; }
.quote small { display: block; color: var(--muted); }
.avatar { width: 42px; height: 42px; border: var(--b); border-radius: 12px; background: var(--forest); color: var(--paper); display: grid; place-items: center; font-weight: 900; }

/* ---------- faq ---------- */
.hl2 { background: var(--bg-2); border-top: var(--b); border-bottom: var(--b); }
.faqs { display: grid; gap: 14px; }
.faq { background: var(--paper); border: var(--b); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
.faq summary { padding: 18px 22px; font-size: 1.05rem; font-weight: 800; }
.faq p { padding: 0 22px 18px; margin: 0; color: var(--muted); font-weight: 500; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact p { color: var(--soft); font-size: 1.05rem; font-weight: 500; }
.emails { margin-top: 24px; gap: 12px; }
.email { padding: 14px 18px; background: var(--paper); border: var(--b); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }
.email small { opacity: 1; color: var(--muted); font-weight: 800; }
.copy { background: var(--clay); color: var(--paper); border: 2px solid var(--ink); border-radius: 10px; font-weight: 800; box-shadow: 2px 2px 0 var(--ink); }
.form-box { padding: 30px; background: var(--sage); }
.form label { font-weight: 800; }
.form input, .form textarea { border: var(--b); border-radius: 12px; background: var(--paper); color: var(--ink); }

/* ---------- cta ---------- */
.cta-sec { padding: 0 0 100px; }
.cta { background: var(--clay); color: var(--paper); padding: 72px 32px; text-align: center; box-shadow: 10px 10px 0 var(--ink); }
.cta h2 { color: var(--paper); text-shadow: 3px 3px 0 var(--ink); }
.cta p { font-size: 1.15rem; font-weight: 600; margin-bottom: 28px; }
.cta .btn-main { background: var(--paper); color: var(--ink); }

/* ---------- footer ---------- */
.footer { background: #17120e; color: var(--cream); border-top: var(--b); }
.footer .brand span { color: var(--hl); }
.footer-grid > div > a:not(.brand):hover { color: var(--ink); }
.footer-bottom { border-top: 1px solid var(--line); }

/* ---------- toast ---------- */
.toast { background: var(--sage); border: var(--b); border-radius: 14px; box-shadow: var(--shadow); }
.toast.bad { background: var(--clay); color: var(--paper); }

/* ---------- small pages (privacy, terms, admin, 404) ---------- */
.page { padding: 72px 0 96px; min-height: 60vh; }
.page-box { max-width: 820px; margin: 0 auto; padding: 44px; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.prose h3 { margin-top: 1.6em; }
.prose p { color: var(--muted); font-weight: 500; }
.big-404 { font-size: clamp(6rem, 18vw, 10rem); line-height: 1; margin: 0 0 32px; }
.big-404 mark { transform: rotate(-3deg); }
.page-center { text-align: center; }
.page-center p { color: var(--soft); font-size: 1.1rem; }
.admin-login { max-width: 440px; }
.admin-login .form { margin-top: 20px; }
.error { color: var(--clay); font-weight: 800; margin: 0; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.admin-head h1, .admin-head h3 { margin: 0; }
.admin-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 24px; }
.admin-stats .box { padding: 22px; }
.admin-stats small { color: var(--muted); font-weight: 700; }
.admin-stats strong { display: block; font-size: 2.2rem; font-weight: 900; }
.admin-stats strong.sm { font-size: 1.2rem; padding-top: 10px; word-break: break-all; }
.table-card { padding: 26px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px; border-bottom: 2px solid rgba(18, 14, 11, .12); vertical-align: top; font-size: .95rem; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
td a { font-weight: 700; }

/* ---------- iPad landscape ---------- */
@media (max-width: 1024px) {
  .hero-grid, .demo, .contact { gap: 48px; }
  .s2 { left: -8px; }
}
/* ---------- iPad portrait ---------- */
@media (max-width: 860px) {
  .hero { padding: 64px 0 80px; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 56px; }
  .lead { margin-inline: auto; }
  .actions { justify-content: center; }
  .hero-art { max-width: 480px; width: 100%; margin: 0 auto; }
  .chat-card { height: 380px; text-align: left; }
  .stats-sec { padding-top: 72px; }
  .features { grid-template-columns: 1fr 1fr; gap: 18px; }
  .steps { grid-template-columns: 1fr; max-width: 560px; }
  .demo { grid-template-columns: 1fr; gap: 36px; }
  .demo-copy { text-align: center; max-width: 560px; margin: 0 auto; }
  .demo-copy .chips { justify-content: center; }
  .chat-wrap { max-width: 560px; width: 100%; margin: 0 auto; }
  .plans { gap: 22px; }
  .plan { padding: 28px; }
  .price { font-size: 3.4rem; }
  .quotes { gap: 16px; }
  .quote { padding: 20px; }
  .quote blockquote { font-size: .95rem; }
  .contact { grid-template-columns: 1fr; gap: 36px; }
  .cta-sec { padding-bottom: 80px; }
  .page-box { padding: 32px; }
}
/* ---------- phones (calmer: no tilts, tap = highlight) ---------- */
@media (max-width: 600px) {
  :root { --b: 2px solid var(--ink); --shadow: 3px 3px 0 var(--ink); --shadow-up: 3px 3px 0 var(--ink); }
  .brand img { width: 30px; height: 30px; }
  .brand span { font-size: 1.35rem; }
  h1 { font-size: 2.5rem; line-height: 1.04; }
  h2 { font-size: 1.85rem; }
  .hero { padding: 48px 0 40px; }
  .lead { font-size: 1.02rem; margin-top: 20px; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; padding: 15px; }
  mark { box-shadow: 3px 3px 0 var(--ink); transform: none; }
  #rotator.out { transform: none; }
  .stats-sec { padding-top: 8px; }
  .stats { gap: 10px; }
  .stat, .stat:nth-child(1), .stat:nth-child(2), .stat:nth-child(3) { padding: 14px 6px; background: var(--paper); transform: none; border-radius: 16px; }
  .stat strong { font-size: 1.35rem; }
  .stat span { font-size: .8rem; }
  .features { grid-template-columns: 1fr; gap: 12px; }
  .feature { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px; }
  .feature .f-icon { grid-row: span 2; width: 44px; height: 44px; font-size: 1.2rem; margin: 0; box-shadow: none; }
  .feature h3 { margin-bottom: 4px; font-size: 1.05rem; }
  .feature p { font-size: .9rem; }
  .step { padding: 18px; }
  .step-n, .step:nth-child(2) .step-n { width: 42px; height: 42px; font-size: 1.1rem; transform: none; box-shadow: none; }
  .hl, .hl2 { background: transparent; border: 0; }
  .plans { grid-template-columns: 1fr; gap: 26px; }
  .plan { padding: 26px 22px; gap: 20px; box-shadow: var(--shadow); }
  .plan.featured { box-shadow: 5px 5px 0 var(--ink); }
  .plan-top { text-align: center; }
  .badge { right: 50%; transform: translateX(50%); }
  .price { font-size: 3.2rem; }
  .plans.single .plan { grid-template-columns: 1fr; }
  .q2 { background: var(--paper); }
  .quote { box-shadow: var(--shadow); }
  .faq { box-shadow: none; }
  .faq:hover { transform: none; box-shadow: none; }
  .faq summary { padding: 16px 18px; font-size: .97rem; }
  .faq p { font-size: .92rem; padding: 0 18px 16px; }
  .email { box-shadow: none; }
  .form-box { padding: 20px; }
  .cta-sec { padding-bottom: 56px; }
  .cta { padding: 40px 20px; box-shadow: var(--shadow); }
  .cta h2 { text-shadow: none; }
  .cta .btn { width: 100%; }
  .page { padding: 40px 0 56px; }
  .page-box { padding: 24px 20px; }
  .admin-stats { grid-template-columns: 1fr; }
}
/* touch screens: show the highlight while a finger is on the button */
@media (hover: none) {
  .btn:active, .chip:active, .copy:active, .chat-form button:active, .faq summary:active { background: var(--hl) !important; color: var(--ink) !important; }
}


/* TALKTELLO CURSOR FIX START */
@media (hover: hover) and (pointer: fine) {

  /* Custom arrow everywhere on the website */
  html, body, body *,
  body *::before, body *::after {
    cursor: url("../img/cursor.svg") 3 3, auto !important;
  }

  /* Golden hand on every clickable control */
  :is(
    a[href],
    button:not(:disabled),
    summary,
    label,
    select,
    [role="button"],
    [role="link"],
    [data-q],
    [data-copy],
    .chip,
    .copy,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    input[type="checkbox"],
    input[type="radio"]
  ),
  :is(
    a[href],
    button:not(:disabled),
    summary,
    label,
    select,
    [role="button"],
    [role="link"],
    [data-q],
    [data-copy],
    .chip,
    .copy
  ) *,
  a[href]::before,
  a[href]::after,
  button:not(:disabled)::before,
  button:not(:disabled)::after,
  summary::before,
  summary::after,
  a[href] *::before,
  a[href] *::after,
  button:not(:disabled) *::before,
  button:not(:disabled) *::after {
    cursor: url("../img/cursor-hover.svg") 10 2, pointer !important;
  }

  /* Keep text fields usable for typing */
  input:not([type="button"]):not([type="submit"])
       :not([type="reset"]):not([type="checkbox"])
       :not([type="radio"]),
  textarea,
  [contenteditable="true"] {
    cursor: text !important;
  }
}
/* TALKTELLO CURSOR FIX END */