/* =====================================================================
   PATA BOOK — public website look (home, about, contact, terms, privacy).
   Loaded only by resources/views/layouts/site.blade.php, on top of app.css.
   The logged-in panel never loads this file.

   Idea: dark "night shift" pages with a lime glow, cream pages for reading,
   and one moving thing — a sticker printing out of a printer in the hero.

   CONTENTS
     1. Tokens            5. Big verbs (Paste. Print. Post.)
     2. Base + buttons    6. Cream sections (compare, FAQ)
     3. Menu              7. Features + pricing (dark)
     4. Hero + printer    8. Inner pages, footer, phones
   ===================================================================== */


/* 1. TOKENS ----------------------------------------------------------- */
.site {
  --ink: #060a07;          /* page black, slightly green */
  --night: #0d1510;        /* dark panels */
  --night-2: #131d16;      /* raised dark panels */
  --rule: rgba(182, 242, 60, .14);
  --lime: #b6f23c;         /* the glow */
  --lime-deep: #8fd11f;
  --mist: #a3b0a7;         /* secondary text on dark */
  --cream: #eee8da;        /* reading sections */
  --cream-2: #e4dccb;
  --cream-ink: #18201a;
  --sans: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}


/* 2. BASE + BUTTONS --------------------------------------------------- */
.site { background: var(--ink); color: #edf3ee; font-family: var(--sans); }
.site .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.site a { color: inherit; }
.site :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font: 700 16px/1 var(--sans); text-decoration: none !important; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.s-btn-sm { padding: 10px 18px; font-size: 14px; }
.s-block { width: 100%; }
.s-btn-lime { background: var(--lime); color: #0a1206 !important; box-shadow: 0 0 0 1px rgba(182, 242, 60, .4), 0 10px 40px -10px rgba(182, 242, 60, .55); }
.s-btn-lime:hover { background: #c8ff55; }
.s-btn-ghost { border-color: rgba(237, 243, 238, .22); color: #edf3ee !important; background: rgba(255, 255, 255, .03); }
.s-btn-ghost:hover { border-color: var(--lime); color: var(--lime) !important; }
.s-btn-dark { background: var(--cream-ink); color: var(--cream) !important; }
.s-btn-dark:hover { background: #000; }


/* 3. MENU ------------------------------------------------------------- */
.s-nav-wrap { position: sticky; top: 0; z-index: 30; background: rgba(6, 10, 7, .78); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.s-nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.s-logo { display: flex; align-items: center; gap: 10px; font: 800 20px/1 var(--sans); letter-spacing: -.02em; text-decoration: none !important; }
.site .logo-mark { background: var(--lime); color: #0a1206; }
.s-links { display: flex; align-items: center; gap: 6px; }
.s-link { padding: 10px 12px; color: var(--mist) !important; font-weight: 600; font-size: 15px; text-decoration: none !important; border-radius: 8px; }
.s-link:hover { color: #fff !important; }


/* 4. HERO + PRINTER --------------------------------------------------- */
.s-hero { position: relative; overflow: hidden; padding: 72px 0 40px;
  background:
    radial-gradient(60% 55% at 78% 30%, rgba(182, 242, 60, .20), transparent 70%),
    radial-gradient(40% 40% at 10% 0%, rgba(182, 242, 60, .08), transparent 70%),
    var(--ink); }
/* faint dot grid, like a print head pattern */
.s-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(182, 242, 60, .12) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); pointer-events: none; }
.s-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.s-hero-grid > * { min-width: 0; }

.s-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(182, 242, 60, .06); color: #d9f7a4; font-size: 14px; font-weight: 600; margin: 0 0 22px; }
.s-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.s-h1 { font: 800 clamp(2.4rem, 5.4vw, 4.4rem)/1.02 var(--sans); letter-spacing: -.035em; margin: 0 0 22px; color: #f4fbef; text-wrap: balance; }
.s-lead { font-size: 1.15rem; line-height: 1.6; color: var(--mist); max-width: 34em; margin: 0 0 30px; }
.s-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.s-ticks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; gap: 22px; flex-wrap: wrap; color: var(--mist); font-size: 14px; }
.s-ticks li { display: flex; align-items: center; gap: 8px; }
.s-ticks li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(182, 242, 60, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23b6f23c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

/* The machine: chat bubble on top, printer below, sticker coming out */
.s-machine { position: relative; display: grid; gap: 18px; justify-items: center; }
.s-chat { width: min(360px, 100%); background: #0b1a12; border: 1px solid rgba(255, 255, 255, .07); border-radius: 18px; padding: 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.s-chat-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; font-size: 14px; }
.s-chat-head small { color: #6fd38a; margin-left: auto; }
.s-ava { width: 30px; height: 30px; border-radius: 50%; background: #2a3d31; display: grid; place-items: center; font-weight: 800; color: #cfe8d6; }
.s-bubble { position: relative; background: #154d30; color: #e8f6ec; border-radius: 4px 14px 14px 14px; padding: 10px 12px 18px; font-size: 14px; line-height: 1.55; }
.s-bubble time { position: absolute; right: 10px; bottom: 5px; font-size: 11px; color: #9cc8ab; }

.s-printer { position: relative; width: min(340px, 100%); padding-top: 4px; }
.s-printer-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 18px; border-radius: 18px 18px 8px 8px; background: linear-gradient(180deg, #1f2b23, #121a15); border: 1px solid rgba(255, 255, 255, .08); color: var(--mist); font-size: 13px; font-weight: 600; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); }
.s-led { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.s-slot { position: relative; z-index: 3; height: 8px; margin: -14px 26px 0; border-radius: 4px; background: #000; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .9); }
.s-paper { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: -4px; overflow: hidden; padding: 0 0 24px; }
.s-paper .lbl { box-shadow: 0 24px 50px -18px rgba(182, 242, 60, .35), 0 12px 30px rgba(0, 0, 0, .5); border-radius: 0 0 3px 3px; transform-origin: top center; }

/* The one moving moment: the sticker feeds out of the slot once */
@media (prefers-reduced-motion: no-preference) {
  .s-paper .lbl { animation: feed 2.2s cubic-bezier(.3, .7, .3, 1) .5s both; }
  .s-led { animation: blink .5s steps(2) 6 .4s; }
  @keyframes feed { from { transform: translateY(-100%); } to { transform: translateY(0); } }
  @keyframes blink { 50% { opacity: .2; } }
}

.s-hero .s-couriers { position: relative; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .07); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.s-couriers p { margin: 0; color: var(--mist); font-size: 14px; }
.s-couriers ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; }
.s-couriers li { font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: rgba(237, 243, 238, .55); }

/* 4b. HERO PANEL (framed version) ------------------------------------------
   The hero sits in a big rounded panel inset from the page edges, glowing lime
   from the bottom-right. Right side: the "machine" card with feature badges
   floating around it. */
.s-hero2 { padding: 14px 14px 0; background: var(--ink); }
.s-hero2::before { display: none; }
.s-frame { position: relative; overflow: hidden; border-radius: 28px; padding: 56px clamp(20px, 4vw, 56px) 48px;
  border: 1px solid rgba(182, 242, 60, .16);
  background:
    radial-gradient(70% 60% at 85% 100%, rgba(182, 242, 60, .42), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(120, 190, 40, .22), transparent 70%),
    radial-gradient(40% 35% at 60% 0%, rgba(182, 242, 60, .10), transparent 70%),
    linear-gradient(180deg, #0b130d 0%, #0e1a10 55%, #1c3312 100%); }
.s-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(182, 242, 60, .10) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); }
.s-hero2 .s-hero-grid { max-width: 1240px; margin: 0 auto; grid-template-columns: 1.02fr 1fr; gap: 36px; }
.s-hero2 .s-h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.02; }
.s-hl { color: var(--lime); }
.s-hero2 .s-lead { font-size: 1.08rem; margin: 22px 0 26px; }

/* Before / after box */
.s-vs { display: grid; grid-template-columns: 1.05fr 1fr auto 1.15fr; align-items: center; gap: 12px; padding: 14px; border-radius: 20px;
  background: rgba(6, 10, 7, .55); border: 1px solid rgba(255, 255, 255, .08); }
.s-vs > * { min-width: 0; }
.s-vs-q { margin: 0; font: 700 1.05rem/1.25 var(--sans); color: #f4fbef; padding: 0 6px; }
.s-vs-q small { display: block; font: 700 11px/1.4 var(--sans); letter-spacing: .12em; color: var(--lime); text-transform: uppercase; margin-bottom: 6px; }
.s-vs-old, .s-vs-new { border-radius: 14px; padding: 12px 14px; }
.s-vs-old { background: #101a13; border: 1px solid rgba(255, 255, 255, .07); color: var(--mist); }
.s-vs-new { background: var(--lime); color: #0a1206; }
.s-vs-old span, .s-vs-new span { display: block; font-size: 12px; font-weight: 600; opacity: .85; }
.s-vs-old b, .s-vs-new b { display: block; font: 800 1.9rem/1.05 var(--sans); letter-spacing: -.03em; margin: 4px 0 2px; }
.s-vs-old b { color: #ff9a7a; }
.s-vs-old small, .s-vs-new small { display: block; font-size: 12px; line-height: 1.35; }
.s-vs-x { font-weight: 700; color: var(--mist); font-size: 13px; }

/* White pill button (third CTA) */
.s-btn-white { background: #fff; color: #0a1206 !important; }
.s-btn-white:hover { background: #f1ffe0; }
.s-check { width: 18px; height: 18px; border-radius: 50%; background: #2e9e4f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Right side: the machine + floating badges */
.s-stage { position: relative; padding: 18px 112px 0; display: grid; justify-items: center; }
.s-device { position: relative; z-index: 2; width: min(380px, 100%); padding: 14px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(14, 24, 17, .96), rgba(8, 13, 9, .96)); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(182, 242, 60, .06);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
.s-device-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 14px; }
.s-device-head span:nth-child(2) { display: grid; line-height: 1.2; }
.s-device-head b { color: #f4fbef; font-size: 15px; }
.s-device-head small { color: var(--mist); font-size: 12px; }
.s-device-head em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--lime); padding: 4px 10px; border-radius: 999px; background: rgba(182, 242, 60, .12); }
.s-mini-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--lime); color: #0a1206; display: grid; place-items: center; font-weight: 800; }
.s-hero2 .s-chat { width: 100%; }
.s-hero2 .s-printer { width: 100%; margin-top: 14px; }
.s-hero2 .s-paper { padding-bottom: 6px; }
.s-stage-cap { position: relative; z-index: 2; white-space: nowrap; margin: 18px 0 0; display: flex; align-items: center; gap: 14px; color: #f4fbef; font: 700 1.05rem var(--sans); }
.s-stage-cap::before, .s-stage-cap::after { content: ""; width: 48px; height: 1px; background: rgba(244, 251, 239, .45); }

.s-float { position: absolute; z-index: 3; display: grid; justify-items: center; gap: 8px; }
.s-float .ic { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); }
.s-float .ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-float .ic svg .fill { fill: currentColor; stroke: none; }
.s-float b { background: #fff; color: #0a1206; font: 700 13px/1 var(--sans); padding: 8px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); }
.ic-wa { background: linear-gradient(160deg, #5be27a, #1f9e45); color: #fff; }
.ic-scan { background: linear-gradient(160deg, #ffd25a, #f08c1a); color: #2b1600; }
.ic-xls { background: linear-gradient(160deg, #3ccf7d, #138048); color: #fff; }
.ic-truck { background: #fff; color: #0a1206; }
.ic-print { background: linear-gradient(160deg, #e9ff9d, var(--lime)); color: #0a1206; }
.ic-a4 { background: linear-gradient(160deg, #7cb7ff, #2f6ff0); color: #fff; }
.f1 { left: 0; top: 30px; transform: rotate(-4deg); }
.f2 { left: -6px; top: 42%; transform: rotate(3deg); }
.f3 { left: 6px; bottom: 70px; transform: rotate(-2deg); }
.f4 { right: -10px; top: 10px; transform: rotate(3deg); }
.f5 { right: 0; top: 41%; transform: rotate(-3deg); }
.f6 { right: 4px; bottom: 76px; transform: rotate(2deg); }
@media (prefers-reduced-motion: no-preference) {
  .s-float { animation: bob 6s ease-in-out infinite; }
  .f2, .f5 { animation-delay: -2s; }
  .f3, .f6 { animation-delay: -4s; }
  @keyframes bob { 50% { translate: 0 -8px; } }
}
.s-hero2 .s-couriers { max-width: 1240px; margin: 28px auto 0; border-top: 0; padding: 0 clamp(20px, 4vw, 56px) 8px; }


/* 5. BIG VERBS -------------------------------------------------------- */
.s-verbs { padding: 70px 0 90px; background: var(--ink); }
.s-verb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; align-items: end; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.s-verb h2 { margin: 0; font: 800 clamp(4rem, 14vw, 11rem)/.86 var(--sans); letter-spacing: -.055em; }
.s-verb p { margin: 0 0 18px; color: var(--mist); font-size: 15px; line-height: 1.55; }
.v-solid { color: #f4fbef; }
.v-outline { color: transparent; -webkit-text-stroke: 2px var(--lime); }
.v-lime { color: var(--lime); text-shadow: 0 0 60px rgba(182, 242, 60, .35); }


/* 6. CREAM SECTIONS --------------------------------------------------- */
.s-cream { background: var(--cream); color: var(--cream-ink); padding: 96px 0; }
.s-serif { font: 400 clamp(2.4rem, 4.6vw, 3.8rem)/1.02 var(--serif); letter-spacing: -.01em; margin: 0 0 20px; color: var(--cream-ink); }
.s-cream-lead { font-size: 1.1rem; line-height: 1.65; color: #4b544c; max-width: 30em; margin: 0 0 28px; }

.s-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.s-compare > * { min-width: 0; }
.s-compare-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.s-cap { margin: 0 0 14px; font-size: 13px; font-weight: 700; color: #6c756d; }
.s-old { padding: 22px; border: 1px dashed #b9b09c; border-radius: 16px; }
.s-old ol { margin: 0; padding-left: 20px; color: #6c756d; line-height: 2.1; font-size: 15px; }
.s-old li { text-decoration: line-through; text-decoration-color: rgba(185, 50, 38, .55); }
.s-new { padding: 22px; border-radius: 20px; background: var(--ink); color: #edf3ee; box-shadow: 0 30px 60px -30px rgba(6, 10, 7, .6); margin-top: 40px; }
.s-new .s-cap { color: var(--lime); }
.s-new-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 12px; background: var(--night-2); }
.s-new-row b { display: block; }
.s-new-row small { color: var(--mist); }
.s-print-chip { padding: 8px 14px; border-radius: 999px; background: var(--lime); color: #0a1206; font-weight: 800; font-size: 14px; }
.s-new-note { margin: 14px 0 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }

.s-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.s-faq > * { min-width: 0; }
.s-faq-list details { border-top: 1px solid #cfc6b3; padding: 4px 0; }
.s-faq-list details:last-child { border-bottom: 1px solid #cfc6b3; }
.s-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 700; font-size: 1.08rem; }
.s-faq-list summary::-webkit-details-marker { display: none; }
.s-faq-list summary::after { content: "+"; font: 400 1.6rem/1 var(--sans); color: #6c756d; transition: transform .2s; }
.s-faq-list details[open] summary::after { transform: rotate(45deg); }
.s-faq-list p { margin: 0 0 20px; color: #4b544c; line-height: 1.65; max-width: 38em; }


/* 7. FEATURES + PRICING (dark) ---------------------------------------- */
.s-dark { background: var(--ink); padding: 96px 0; }
.s-h2 { font: 800 clamp(2rem, 3.8vw, 3rem)/1.05 var(--sans); letter-spacing: -.03em; margin: 0 0 14px; color: #f4fbef; max-width: 18em; }
.s-sub { color: var(--mist); font-size: 1.1rem; margin: 0 0 40px; }
.s-center { text-align: center; margin-left: auto; margin-right: auto; }

.s-bento { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 40px; }
.s-bento > * { min-width: 0; }
.s-tile { position: relative; overflow: hidden; padding: 28px; border-radius: 24px; background: var(--night); border: 1px solid rgba(255, 255, 255, .06); }
.s-tile h3 { font: 800 1.45rem/1.15 var(--sans); letter-spacing: -.02em; margin: 0 0 10px; color: #f4fbef; }
.s-tile p { color: var(--mist); margin: 0 0 22px; line-height: 1.6; max-width: 32em; }
.s-tile-scan { background: radial-gradient(70% 80% at 100% 100%, rgba(182, 242, 60, .14), transparent 70%), var(--night); }

.s-scan { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
.s-scan-card { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 16px; border-radius: 10px; background: #f6f2e8; color: #1c2a22; font-size: 13px; transform: rotate(-3deg); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .7); }
.s-scan-card b { font-size: 14px; color: #0e3d6b; }
.s-scan-card i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.s-scan-form { display: grid; gap: 8px; }
.s-scan-form label { display: grid; gap: 3px; margin: 0; font-size: 11px; font-weight: 700; color: var(--mist); }
.s-scan-form span { padding: 8px 10px; border-radius: 8px; background: #fff6cf; color: #1c2a22; font-size: 13px; font-weight: 600; }

.s-tile-sizes { display: flex; flex-direction: column; }
.s-tile-sizes .s-sizes { margin-top: auto; }
.s-sizes { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.sz { position: relative; background: #f6f2e8; border-radius: 4px; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .7); }
.sz span { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font-size: 12px; font-weight: 700; color: var(--mist); }
.sz-46 { width: 80px; height: 120px; background-image: linear-gradient(#1c2a22 0 0), linear-gradient(#1c2a22 0 0), linear-gradient(#c9c1ad 0 0), linear-gradient(#c9c1ad 0 0); background-size: 50% 6px, 34% 4px, 70% 3px, 60% 3px; background-position: 10px 14px, 10px 26px, 10px 40px, 10px 48px; background-repeat: no-repeat; }
.sz-a4 { width: 96px; height: 136px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px; }
.sz-a4 i { border: 1px dashed #b9b09c; border-radius: 2px; }
.sz-251 { width: 62px; height: 25px; }
.s-tile-sizes .s-sizes { margin-bottom: 30px; }

.s-list { grid-column: 1 / -1; list-style: none; margin: 0; padding: 10px 28px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .06); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
.s-list li { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.s-list li:nth-last-child(-n + 3) { border-bottom: 0; }
.s-list b { display: block; color: #f4fbef; margin-bottom: 3px; }
.s-list span { color: var(--mist); font-size: 14px; line-height: 1.5; }

.s-pricing { padding-top: 0; }
.s-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 20px; justify-content: center; }
.s-plan { padding: 30px; border-radius: 24px; background: var(--night); border: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; }
.s-plan h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--mist); font-weight: 700; }
.s-amt { margin: 0 0 20px; font: 800 3rem/1 var(--sans); letter-spacing: -.04em; color: #f4fbef; }
.s-amt small { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--mist); }
.s-plan ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; flex: 1; align-content: start; }
.s-plan li { padding-left: 26px; position: relative; color: #dbe5dd; }
.s-plan li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(182, 242, 60, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23b6f23c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.s-plan-pro { border-color: rgba(182, 242, 60, .45); background: radial-gradient(90% 60% at 50% 0%, rgba(182, 242, 60, .14), transparent 70%), var(--night); box-shadow: 0 40px 80px -40px rgba(182, 242, 60, .35); }
.s-fine { margin: 12px 0 0; text-align: center; color: var(--mist); font-size: 13px; }

.s-final { position: relative; overflow: hidden; padding: 110px 0 120px; text-align: center;
  background: radial-gradient(50% 70% at 50% 100%, rgba(182, 242, 60, .22), transparent 70%), var(--ink); }
.s-final .s-lead { margin-left: auto; margin-right: auto; }


/* 8. INNER PAGES, FOOTER, PHONES -------------------------------------- */
/* About / Contact / Terms / Privacy: light reading area under the dark menu */
.s-page { background: var(--cream); color: var(--cream-ink); padding: 56px 0 80px; min-height: 60vh; }
.s-page h1 { font: 400 clamp(2.6rem, 5vw, 4rem)/1 var(--serif); letter-spacing: -.01em; margin: 0 0 16px; }
.s-page h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; }
.s-page .section { padding: 0; }
.s-page .sub, .s-page .muted { color: #5a635b; }
.s-page a { color: #0d6b44; }
.s-page .card, .s-page .feature { background: #fbf8f1; border-color: #ddd4c2; box-shadow: none; }
.s-page .btn-primary { background: var(--cream-ink); border-color: var(--cream-ink); color: var(--cream); }
.s-page .btn-primary:hover { background: #000; border-color: #000; }
.s-page .cta-band { background: var(--ink); color: #edf3ee; background-image: radial-gradient(60% 80% at 50% 120%, rgba(182, 242, 60, .25), transparent 70%); }
.s-page .cta-band a { color: inherit; }
.s-page .cta-band .btn-primary { background: var(--lime); border-color: var(--lime); color: #0a1206; }
.s-page .cta-band .btn:not(.btn-primary) { background: transparent; color: #edf3ee; border-color: rgba(237, 243, 238, .25); }

/* Footer: same layout as before, recoloured to match */
.site .foot { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .06); margin-top: 0; }
.site .foot .logo { font-family: var(--sans); }
.site .foot-col svg { color: var(--lime); }
.site .foot-col a:hover { color: var(--lime); }
.site .foot h4 { text-transform: none; letter-spacing: 0; font-size: 15px; color: #f4fbef; }

/* Phones & tablets */
@media (max-width: 900px) {
  .s-hero-grid, .s-compare, .s-faq { grid-template-columns: 1fr; gap: 36px; }
  .s-hero { padding-top: 40px; }
  .s-bento { grid-template-columns: 1fr; }
  .s-list { grid-template-columns: 1fr 1fr; }
  .s-list li:nth-last-child(3) { border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .s-verb { grid-template-columns: 1fr; gap: 6px; padding-bottom: 18px; }
  .s-verb p { margin: 0; max-width: 30em; }
}
@media (max-width: 640px) {
  .site .wrap { padding: 0 16px; }
  .s-links .hide-m { display: none; }
  .s-cta .s-btn { flex: 1 1 100%; }
  .s-compare-cards { grid-template-columns: 1fr; }
  .s-new { margin-top: 0; }
  .s-list { grid-template-columns: 1fr; padding: 4px 20px; }
  .s-list li:nth-last-child(2), .s-list li:nth-last-child(3) { border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .s-plans { grid-template-columns: 1fr; }
  .s-scan { grid-template-columns: 1fr; }
  .s-dark, .s-cream { padding: 64px 0; }
  .s-couriers { gap: 14px; }
  .s-couriers ul { gap: 16px; }
  .s-couriers li { font-size: 15px; }
}
@media (max-width: 380px) {
  .hide-xs { display: none; }
}


/* Hero panel on smaller screens */
@media (max-width: 1100px) {
  .s-hero2 .s-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .s-stage { padding: 10px 96px 0; max-width: 660px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .s-hero2 { padding: 8px 8px 0; }
  .s-frame { border-radius: 22px; padding: 34px 16px 30px; }
  .s-vs { grid-template-columns: 1fr 1fr; }
  .s-vs-q { grid-column: 1 / -1; padding: 2px 4px 4px; }
  .s-vs-x { display: none; }
  .s-vs-old b, .s-vs-new b { font-size: 1.5rem; }
  /* badges stop floating and sit in a row under the machine */
  .s-stage { padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .s-device { order: -2; transform: none; }
  .s-stage-cap { order: -1; width: 100%; justify-content: center; margin: 10px 0 4px; font-size: .95rem; }
  .s-float { position: static; transform: none; animation: none; display: flex; gap: 0; }
  .s-float .ic { display: none; }
  .s-float b { font-size: 12px; padding: 7px 11px; background: rgba(255, 255, 255, .92); }
}