/* ──────────────────────────────────────────────────────────────────────────
   Nookal Automation Landing — utility CSS
   Loaded only on pages using the "Landing — Automation" template, or when
   any landing-* pattern is detected in the post content. All selectors are
   scoped under .nookal-landing so the existing site styles are untouched.

   Source of truth: Variation A.html in the JSX wireframe bundle. Every
   pattern carries the verbatim inline styles for pixel-perfect rendering;
   this stylesheet supplies the utility classes those inline styles depend
   on (animations, gradient text, hover lift, font-family resolution, etc.).
   ────────────────────────────────────────────────────────────────────────── */

/* ──── Webfonts — extra weights not shipped in the live theme. ─────── */
/* Theme already loads Lato 400/700 + italics and BG-Headings 400/700 as
   woff2. The landing also uses Lato 100/300/900 + italics, and BG-Headings
   as a variable display weight — those come from /assets/fonts/landing/ */
@font-face {
  font-family: "BG-Headings";
  src: url("../fonts/landing/BG-Headings.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/landing/Lato-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/landing/Lato-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/landing/Lato-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/landing/Lato-BlackItalic.ttf") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/landing/Lato-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/landing/Lato-ThinItalic.ttf") format("truetype");
  font-weight: 100; font-style: italic; font-display: swap;
}

/* ──── Scope: every utility lives under .nookal-landing ───────────── */
.nookal-landing {
  /* Tokens — values lifted verbatim from window.NK */
  --nk-ink:        #323C41;
  --nk-ink-2:      #5A6469;
  --nk-ink-3:      #8E979C;
  --nk-line:       #E6EAEC;
  --nk-line-strong:#C4CDD1;
  --nk-bg:         #FFFFFF;
  --nk-bg-alt:     #F5F7F8;
  --nk-blue:       #5E6BF3;
  --nk-cyan:       #21D6FF;
  --nk-purple:     #A059F8;
  --nk-pink:       #FA6EC9;
  --nk-orange:     #F99B6A;
  --nk-dark:       #323C41;
  --nk-success:    #2EC27E;
  --nk-gradient-cool:   linear-gradient(135deg,#21D6FF 0%,#5E6BF3 35%,#A059F8 68%,#FA6EC9 100%);
  --nk-gradient-cool-h: linear-gradient(90deg,#21D6FF 0%,#5E6BF3 35%,#A059F8 68%,#FA6EC9 100%);
  --nk-gradient-warm:   linear-gradient(135deg,#A059F8 0%,#FA6EC9 40%,#F99B6A 100%);

  /* Ease + duration */
  --nk-ease:     cubic-bezier(.2,.7,.2,1);
  --nk-ease-out: cubic-bezier(.16,1,.3,1);
  --nk-dur:      220ms;
  --nk-dur-fast: 150ms;

  /* Body type baseline. WordPress sets `var(--wp--preset--font-family--lato)`
     globally; this re-asserts the same family + weight so heading/body in
     the patterns can't get accidentally overridden by a child theme. */
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--nk-ink);
}
.nookal-landing *,
.nookal-landing *::before,
.nookal-landing *::after { box-sizing: border-box; }
.nookal-landing img { display: block; max-width: 100%; }
.nookal-landing button { font-family: inherit; cursor: pointer; }

/* The live theme wraps the post content in a constrained <main> at
   1280px. Landing sections need to be full-bleed, so widen the wrapper
   to whatever's available. Each section's inner .container handles its
   own max-width (1240px). */
.nookal-landing .container {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px;
}
.nookal-landing .section { padding: 96px 0; }
.nookal-landing .section--tight { padding: 56px 0; }

/* Pill / eyebrow */
.nookal-landing .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--nk-blue);
  background: rgba(94,107,243,0.10);
  padding: 6px 14px; border-radius: 999px;
}
.nookal-landing .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--nk-blue);
}

/* Buttons */
.nookal-landing .btn {
  font-family: inherit; font-weight: 700; font-size: 15px;
  padding: 14px 22px; border-radius: 12px; border: none;
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  transition: transform var(--nk-dur-fast) var(--nk-ease),
              box-shadow var(--nk-dur) var(--nk-ease),
              background var(--nk-dur) var(--nk-ease),
              border-color var(--nk-dur) var(--nk-ease);
}
.nookal-landing .btn:active { transform: scale(0.98); }
.nookal-landing .btn-primary {
  background: var(--nk-dark); color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(50,60,65,0.20), 0 2px 6px rgba(50,60,65,0.08);
}
.nookal-landing .btn-primary:hover {
  background: #20272b;
  box-shadow: 0 12px 28px rgba(50,60,65,0.28);
}
.nookal-landing .btn-blue {
  background: var(--nk-blue); color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(94,107,243,0.30);
}
.nookal-landing .btn-blue:hover {
  background: #4D5BE0;
  box-shadow: 0 12px 28px rgba(94,107,243,0.42);
}
.nookal-landing .btn-outline {
  background: transparent; color: var(--nk-ink);
  border: 1px solid var(--nk-line-strong);
}
.nookal-landing .btn-outline:hover {
  background: rgba(50,60,65,0.04); border-color: var(--nk-ink);
}
.nookal-landing .btn-ghost { background: transparent; color: var(--nk-ink); }
.nookal-landing .btn-ghost:hover { background: rgba(50,60,65,0.06); }
.nookal-landing .btn-sm {
  padding: 10px 16px; font-size: 14px; border-radius: 10px;
}

/* Heading helpers — page uses single-weight BG-Headings */
.nookal-landing .h-display,
.nookal-landing .h-1,
.nookal-landing .h-2,
.nookal-landing .h-3 {
  font-family: "BG-Headings", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700; line-height: 1.1; letter-spacing: -0.025em;
  margin: 0; color: var(--nk-ink);
}
.nookal-landing .h-display { font-size: clamp(48px, 6.2vw, 80px); }
.nookal-landing .h-1       { font-size: clamp(40px, 4.6vw, 60px); }
.nookal-landing .h-2       { font-size: clamp(30px, 3.2vw, 44px); }
.nookal-landing .h-3       { font-size: clamp(22px, 1.7vw, 28px); }
.nookal-landing .h-eyebrow {
  font-family: inherit; font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--nk-ink-2);
}

.nookal-landing .lead {
  font-size: 18px; line-height: 1.55; color: var(--nk-ink-2);
  max-width: 60ch;
}
.nookal-landing .muted { color: var(--nk-ink-2); }

/* Gradient text */
.nookal-landing .grad-text {
  background: var(--nk-gradient-cool);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nookal-landing .warm-text {
  background: var(--nk-gradient-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Card */
.nookal-landing .card {
  background: #FFFFFF; border-radius: 24px;
  box-shadow: 0 4px 14px rgba(50,60,65,.08), 0 1px 3px rgba(50,60,65,.05);
  border: 1px solid var(--nk-line);
}
.nookal-landing .card-flat {
  background: #FFFFFF; border-radius: 24px;
  border: 1px solid var(--nk-line);
}

/* Surfaces */
.nookal-landing .surface-tint { background: var(--nk-bg-alt); }
.nookal-landing .surface-dark { background: var(--nk-dark); color: #FFFFFF; }

/* Ribbon */
.nookal-landing .ribbon-strip { height: 10px; background: var(--nk-gradient-cool-h); }

/* Subtle background blobs — used in hero */
.nookal-landing .bg-blob {
  position: absolute; border-radius: 999px; filter: blur(80px);
  opacity: 0.5; pointer-events: none; z-index: 0;
}

/* Static patterns: WordPress doesn't run the JSX IntersectionObserver,
   so the fade-in class would leave content invisible. Force it visible. */
.nookal-landing .fade-in { opacity: 1; transform: none; }

/* Decorative grid lines (used in product mockups) */
.nookal-landing .mock-card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 4px 14px rgba(50,60,65,.08), 0 1px 3px rgba(50,60,65,.05);
  border: 1px solid var(--nk-line); overflow: hidden;
}

.nookal-landing .divider {
  height: 1px; background: var(--nk-line); width: 100%;
}

/* Header sticky surface */
.nookal-landing .sticky-blur {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid var(--nk-line);
}

/* FAQ chevron */
.nookal-landing .chev { transition: transform var(--nk-dur) var(--nk-ease); }
.nookal-landing .chev.open { transform: rotate(180deg); }

/* Input */
.nookal-landing .input {
  display: block; width: 100%;
  font-family: inherit; font-size: 15px; color: var(--nk-ink);
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--nk-line-strong); background: #FFFFFF;
  transition: border-color var(--nk-dur) var(--nk-ease),
              box-shadow var(--nk-dur) var(--nk-ease);
}
.nookal-landing .input::placeholder { color: var(--nk-ink-3); }
.nookal-landing .input:focus {
  outline: none; border-color: var(--nk-blue);
  box-shadow: 0 0 0 3px rgba(94,107,243,.22);
}
.nookal-landing .input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6469' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 40px;
}
.nookal-landing .label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--nk-ink-2); letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 6px;
}

/* Toggle dot */
.nookal-landing .pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--nk-success);
  box-shadow: 0 0 0 0 rgba(46,194,126,0.6);
  animation: nookal-landing-pulse 1.8s var(--nk-ease) infinite;
}
@keyframes nookal-landing-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,194,126,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(46,194,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,194,126,0); }
}

/* Bar chart bars rise on mount */
@keyframes nookal-landing-bar-rise {
  from { transform: scaleY(0.18); }
  to   { transform: scaleY(1); }
}
.nookal-landing .bar {
  transform-origin: bottom;
  animation: nookal-landing-bar-rise 900ms var(--nk-ease-out) both;
}

/* Toast slide in */
@keyframes nookal-landing-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.nookal-landing .toast {
  animation: nookal-landing-toast-in 500ms var(--nk-ease-out) both;
}

/* Workflow connector line */
.nookal-landing .flow-line {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--nk-line-strong) 0 8px, transparent 8px 14px);
}

/* Subtle hover lift for feature cards */
.nookal-landing .lift {
  transition: transform var(--nk-dur) var(--nk-ease),
              box-shadow var(--nk-dur) var(--nk-ease);
}
.nookal-landing .lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(50,60,65,.14), 0 4px 12px rgba(50,60,65,.08);
}

/* Soft gradient backgrounds for tinted blocks */
.nookal-landing .tint-cool {
  background:
    radial-gradient(1200px 400px at 80% -20%, rgba(33,214,255,0.10), transparent 60%),
    radial-gradient(900px 400px at 0% 100%, rgba(160,89,248,0.10), transparent 60%),
    #FFFFFF;
}
.nookal-landing .tint-warm {
  background:
    radial-gradient(900px 380px at 100% 0%, rgba(249,155,106,0.14), transparent 60%),
    radial-gradient(900px 400px at 0% 100%, rgba(250,110,201,0.12), transparent 60%),
    #FFFFFF;
}

/* Avatar */
.nookal-landing .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--nk-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--nk-ink-2);
  flex-shrink: 0;
}
.nookal-landing .avatar-gradient { color: #fff; background: var(--nk-gradient-cool); }

/* Stat tile big numeral */
.nookal-landing .stat-num {
  font-family: "BG-Headings", system-ui, -apple-system, sans-serif;
  font-weight: 700; font-size: 64px; line-height: 0.9;
  letter-spacing: -0.03em; color: var(--nk-ink);
}

/* Force the patterns' typography to ignore the parent theme's tightening
   (the live theme has heading line-height 0.9 globally; we already match
   that, but reasserting prevents WP from overriding our inline values). */
.nookal-landing h1,
.nookal-landing h2,
.nookal-landing h3,
.nookal-landing h4,
.nookal-landing h5,
.nookal-landing h6 { margin: 0; color: var(--nk-ink); }
.nookal-landing p { margin: 0 0 12px; max-width: none; }
.nookal-landing a { color: inherit; text-decoration: none; }

/* The patterns intentionally render full-bleed sections. WordPress's
   constrained <main> caps content at 1280px — break out of that when we
   detect the .nookal-landing wrapper sits inside .wp-block-html. */
.wp-block-html .nookal-landing > section,
.wp-block-html .nookal-landing > header,
.wp-block-html .nookal-landing > footer,
.wp-block-html .nookal-landing > div { max-width: none; }

/* Hide the WordPress block-wrapper margins around stacked landing
   patterns so adjacent sections butt up like the source. */
.wp-block-html:has(.nookal-landing) { margin: 0; }

/* Sticky-header offset for in-page anchors. The landing header is 72px,
   add a small visual breath. */
.nookal-landing section[id] { scroll-margin-top: 84px; }


/* ──────────────────────────────────────────────────────────────────────
   Motion — keyframes + utility classes from the source-2 styles.css.
   Scoped under .nookal-landing so the wider site stays calm.
   These reproduce the "conversion-focused, calm easing" loops that the
   source uses on hero callouts, the workflow runner, SMS typing dots,
   etc. Static patterns capture the RESTING state of motion.jsx hooks
   (count-ups at their final values, step-loops at their last step);
   these CSS-only loops keep the page lightly alive at runtime.
   ────────────────────────────────────────────────────────────────────── */

/* Gentle vertical float for hero callout cards (sub-pixel, breathing) */
@keyframes nookal-landing-floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.nookal-landing .float-y      { animation: nookal-landing-floatY 5.4s ease-in-out infinite; }
.nookal-landing .float-y-slow { animation: nookal-landing-floatY 7.2s ease-in-out infinite; animation-delay: -1.4s; }
.nookal-landing .float-y-fast { animation: nookal-landing-floatY 4.4s ease-in-out infinite; animation-delay: -2.8s; }

/* Success ring pulse — used on the auto-rebooked appt cell and "live" callouts */
@keyframes nookal-landing-ringPulseSuccess {
  0%   { box-shadow: 0 0 0 0  rgba(46,194,126,0.45), 0 0 0 1px rgba(46,194,126,0.40); }
  70%  { box-shadow: 0 0 0 14px rgba(46,194,126,0.00), 0 0 0 1px rgba(46,194,126,0.40); }
  100% { box-shadow: 0 0 0 0  rgba(46,194,126,0.00), 0 0 0 1px rgba(46,194,126,0.40); }
}
.nookal-landing .ring-pulse-success { animation: nookal-landing-ringPulseSuccess 2.4s ease-out infinite; }

/* Now-line shimmer — subtle traveling highlight along the "now" indicator */
@keyframes nookal-landing-shimmerX {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.nookal-landing .now-line {
  background: linear-gradient(90deg, rgba(94,107,243,0.45) 0%, rgba(94,107,243,0.85) 50%, rgba(94,107,243,0.45) 100%);
  background-size: 200% 100%;
  animation: nookal-landing-shimmerX 3.2s linear infinite;
}

/* Workflow connector — traveling dot along the gradient line */
@keyframes nookal-landing-connectorRun {
  0%   { left: 0%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.nookal-landing .connector-runner {
  position: absolute; top: 50%; width: 10px; height: 10px;
  margin-top: -5px; margin-left: -5px;
  border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18), 0 0 18px rgba(255,255,255,0.85);
  animation: nookal-landing-connectorRun 5.2s cubic-bezier(.65,.05,.36,1) infinite;
}

/* Workflow step badge — gentle scale pulse on the "active" step */
@keyframes nookal-landing-stepActive {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.nookal-landing .step-active { animation: nookal-landing-stepActive 1.6s ease-in-out 1; }

/* Live "happening now" tag — subtle blink on the dot */
@keyframes nookal-landing-liveBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.nookal-landing .live-blink { animation: nookal-landing-liveBlink 1.4s ease-in-out infinite; }

/* SMS typing indicator dots */
@keyframes nookal-landing-typingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1;   }
}
.nookal-landing .typing-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #8E979C; margin: 0 1.5px;
  animation: nookal-landing-typingDot 1.2s ease-in-out infinite;
}
.nookal-landing .typing-dot:nth-child(2) { animation-delay: 0.15s; }
.nookal-landing .typing-dot:nth-child(3) { animation-delay: 0.30s; }

/* Attention nudge for the primary CTA arrow on hover */
@keyframes nookal-landing-arrowNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}
.nookal-landing .btn-primary:hover svg,
.nookal-landing .btn-blue:hover svg {
  animation: nookal-landing-arrowNudge 0.9s ease-in-out infinite;
}

/* Strike-through pen sweep for "cancellation" demo cell */
@keyframes nookal-landing-strikeSweep {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
.nookal-landing .strike-sweep {
  position: absolute; left: 8px; right: 8px; top: 50%;
  height: 2px; background: #B33687; transform-origin: left center;
  animation: nookal-landing-strikeSweep 320ms ease-out both;
}

/* Subtle pop on appearance — used by the "waitlist filled" toast */
@keyframes nookal-landing-popIn {
  0%   { transform: scale(0.92); opacity: 0; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.nookal-landing .pop-in { animation: nookal-landing-popIn 420ms cubic-bezier(.2,.7,.2,1) both; }

/* Stat numeral tabular-nums for clean count-up */
.nookal-landing .tnum { font-variant-numeric: tabular-nums; }

/* Reduced-motion: kill the decorative loops, preserve transitions. */
@media (prefers-reduced-motion: reduce) {
  .nookal-landing .float-y,
  .nookal-landing .float-y-slow,
  .nookal-landing .float-y-fast,
  .nookal-landing .ring-pulse-success,
  .nookal-landing .now-line,
  .nookal-landing .connector-runner,
  .nookal-landing .step-active,
  .nookal-landing .live-blink,
  .nookal-landing .typing-dot,
  .nookal-landing .pulse-dot,
  .nookal-landing .toast,
  .nookal-landing .bar { animation: none !important; }
  .nookal-landing .now-line { background: rgba(94,107,243,0.7); }
}

/* ╔═══ AUTO-APPENDED RESPONSIVE LAYER FROM source-3/styles.css ═══╗ */
/* ============================================================
   RESPONSIVE LAYER
   The page is built with React inline styles — inline grid/flex
   templates can only be defeated via `!important`. We pair that
   with attribute-substring selectors that match the most common
   inline `grid-template-columns` shapes used across the
   variations, plus targeted classNames on key shell chrome.
   Breakpoints:
     ≤ 1080px  Large tablet  — tighten gutters, stack feature rows
     ≤ 880px   Tablet/mobile — switch to mobile header, collapse 4-col → 2-col
     ≤ 640px   Phone         — single-column everywhere, hide hero floating cards
   ============================================================ */

/* Mobile header chrome is hidden by default and revealed at ≤ 880px. */

.nookal-landing .nk-header__menu-btn {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  color: var(--ink);
  align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.nookal-landing .nk-header__menu-btn:hover { background: var(--bg-alt); }

.nookal-landing .nk-header__menu-btn:active { transform: scale(0.96); }


.nookal-landing .nk-header__drawer {
  display: none;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 20px 20px;
  box-shadow: 0 12px 24px rgba(50,60,65,0.06);
}

.nookal-landing .nk-header__drawer.is-open { display: block; }

.nookal-landing .nk-header__drawer-nav {
  display: flex; flex-direction: column;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.nookal-landing .nk-header__drawer-nav a {
  padding: 14px 6px;
  font-size: 16px; font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
}

.nookal-landing .nk-header__drawer-nav a:hover { background: var(--bg-alt); }

.nookal-landing .nk-header__drawer-cta {
  display: flex; gap: 10px;
}

/* ───── ≤ 1080px : large-tablet adjustments ──────────────────── */
@media (max-width: 1080px) {

  
.nookal-landing .container { padding: 0 24px; }
  
.nookal-landing .section { padding: 64px 0; }

  /* Section padding rhythm — override the inline `paddingTop/Bottom: 96` that
     React serialises onto every `<section style={{ paddingTop: 96, ... }}>`.
     Without these explicit overrides the inline declaration beats `.section`. */
  
.nookal-landing section[style*="padding-top: 96px"], .nookal-landing section[style*="padding-bottom: 96px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  
.nookal-landing section[style*="padding: 96px 0"] { padding: 64px 0 !important; }
  
.nookal-landing section[style*="padding-top: 80px"], .nookal-landing section[style*="padding-bottom: 80px"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  
.nookal-landing section[style*="padding-top: 72px"] { padding-top: 52px !important; }
  
.nookal-landing section[style*="padding-top: 64px"] { padding-top: 36px !important; }

  /* The CTA banner card uses inline `padding: 64px 56px` — too wide on tablet. */
  
.nookal-landing [style*="padding: 64px 56px"] { padding: 44px 32px !important; }

  /* Inter-section / inter-block top margins step down too. */
  
.nookal-landing [style*="margin-top: 96px"] { margin-top: 56px !important; }
  
.nookal-landing [style*="margin-top: 80px"] { margin-top: 48px !important; }
  
.nookal-landing [style*="margin-top: 72px"] { margin-top: 44px !important; }
  
.nookal-landing [style*="margin-top: 64px"] { margin-top: 40px !important; }
  
.nookal-landing [style*="margin-top: 56px"] { margin-top: 32px !important; }

  /* Form fields tighten — inputs are big at desktop, leaner here. */
  
.nookal-landing .input { padding: 11px 14px !important; font-size: 14px !important; }
  
.nookal-landing .label { font-size: 11px; margin-bottom: 4px !important; }
  /* The form card wraps in an inline `border-radius: 22px; padding: 28px` div. */
  
.nookal-landing [style*="border-radius: 22px"][style*="padding: 28px"] { padding: 20px !important; }
  
.nookal-landing form [style*="grid-template-columns: 1fr 1fr"] { gap: 10px !important; margin-top: 14px !important; }

  /* Generic 2-col page grids → single column.
     Covers feature rows, reporting top half, FAQ, CTA card, etc. */
  
.nookal-landing [style*="grid-template-columns: 1fr 1fr"], .nookal-landing [style*="grid-template-columns: 1fr 1.1fr"], .nookal-landing [style*="grid-template-columns: 1.1fr 1fr"], .nookal-landing [style*="grid-template-columns: 0.85fr 1.15fr"], .nookal-landing [style*="grid-template-columns: 1.15fr 0.85fr"], .nookal-landing [style*="grid-template-columns: 0.95fr 1.05fr"], .nookal-landing [style*="grid-template-columns: 1.05fr 0.95fr"], .nookal-landing [style*="grid-template-columns: 1.05fr 1fr"], .nookal-landing [style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    /* The feature rows alternate via `direction: rtl` — force ltr when
       stacked so the eyebrow / heading sits above the visual every time. */
    direction: ltr !important;
  }

  /* Feature-row visuals use absolute positioning at desktop (cards float at
     opposite edges of a tall block). Once the parent feature row stacks, that
     creates an empty middle — flatten them here too, not just on phone. */
  
.nookal-landing .nk-booking-stack { height: auto !important; display: flex !important; flex-direction: column; gap: 20px; max-width: 520px; margin: 0 auto; }
  
.nookal-landing .nk-booking-stack > .card { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; }
  
.nookal-landing .nk-reminders-stack { height: auto !important; display: flex !important; flex-direction: column; align-items: center; gap: 20px; max-width: 380px; margin: 0 auto; }
  
.nookal-landing .nk-reminders-stack > div { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; }
  
.nookal-landing .nk-recall-stack { height: auto !important; }
  
.nookal-landing .nk-notes-stack { height: auto !important; max-width: 640px; margin: 0 auto; }

  /* The hero product mockup pads to negative offsets that overflow viewport. */
  
.nookal-landing .nk-hero-float { display: none !important; }

  /* Reporting bar chart has 12 columns — keep narrower bars + reduce gaps. */
  
.nookal-landing [style*="grid-template-columns: repeat(12, 1fr)"] { gap: 4px !important; }
}

/* ───── ≤ 880px : mobile breakpoint ──────────────────────────── */
@media (max-width: 880px) {

  
.nookal-landing .section { padding: 64px 0; }
  
.nookal-landing .section--tight { padding: 44px 0; }

  /* Header: hide desktop nav + signin link, show hamburger. */
  
.nookal-landing .nk-header__nav { display: none !important; }
  
.nookal-landing .nk-header__signin { display: none !important; }
  
.nookal-landing .nk-header__menu-btn { display: inline-flex; }
  
.nookal-landing .nk-header__bar { gap: 12px !important; }

  /* Variation switcher bar: stack pieces. */
  
.nookal-landing .nk-variations-bar { padding: 10px 20px !important; gap: 10px !important; }
  
.nookal-landing .nk-variations-bar .nk-variations-bar__note, .nookal-landing .nk-variations-bar > span:last-child { display: none; }

  /* 4-col grids (workflow steps, footer 5-col, reporting KPI tiles) → 2-col. */
  
.nookal-landing [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 20px !important;
  }

  /* Footer 5-col explicit. */
  
.nookal-landing .nk-footer__grid, .nookal-landing [style*="grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 28px !important;
  }
  /* Brand block spans full row so the 4 link/contact columns become a 2×2 grid below. */
  
.nookal-landing .nk-footer__grid > :first-child { grid-column: 1 / -1; }
  
.nookal-landing .nk-footer__inner { padding: 56px 24px 28px !important; }

  /* Heroes: trim vertical breathing room. */
  
.nookal-landing section { padding-left: 0; padding-right: 0; }

  /* Hero product mockup at tablet: original 540px diary height works fine. */
  
.nookal-landing .nk-hero-mockup { min-height: 0 !important; margin-top: 36px !important; }

  /* Workflow connector line + runner make no sense when steps stack. */
  
.nookal-landing .nk-workflow-line { display: none !important; }

  /* Form 2-col grid (CTA) → 1-col on small phones. */
}

/* ───── ≤ 640px : phone ──────────────────────────────────────── */
@media (max-width: 640px) {

  
.nookal-landing .container { padding: 0 18px; }
  
.nookal-landing .section { padding: 44px 0; }
  
.nookal-landing .section--tight { padding: 32px 0; }

  /* Compress all the inline `padding: 96px 0` / `paddingTop: 96` sections. */
  
.nookal-landing section[style*="padding-top: 96px"], .nookal-landing section[style*="padding-bottom: 96px"] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  
.nookal-landing section[style*="padding: 96px 0"] { padding: 44px 0 !important; }
  
.nookal-landing section[style*="padding-top: 80px"], .nookal-landing section[style*="padding-bottom: 80px"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  
.nookal-landing section[style*="padding-top: 72px"] { padding-top: 36px !important; }
  
.nookal-landing section[style*="padding-top: 64px"] { padding-top: 28px !important; }

  /* Drop the giant marginTop on the WorkflowStats / inter-section spacers. */
  
.nookal-landing [style*="margin-top: 96px"] { margin-top: 36px !important; }
  
.nookal-landing [style*="margin-top: 80px"] { margin-top: 32px !important; }
  
.nookal-landing [style*="margin-top: 72px"] { margin-top: 32px !important; }
  
.nookal-landing [style*="margin-top: 64px"] { margin-top: 28px !important; }
  
.nookal-landing [style*="margin-top: 56px"] { margin-top: 24px !important; }

  /* CTA banner card — tighten further. */
  
.nookal-landing [style*="padding: 64px 56px"] { padding: 36px 22px !important; }

  /* Feature-row stacking: the dual columns should have a small vertical gap on phone. */
  
.nookal-landing [style*="grid-template-columns: 1fr"][style*="64px"] { gap: 28px !important; }

  /* All multi-col grids → single column. */
  
.nookal-landing [style*="grid-template-columns: repeat(3, 1fr)"], .nookal-landing [style*="grid-template-columns: repeat(4, 1fr)"], .nookal-landing [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Day-picker (5 day buttons) keeps its grid so the row still reads as a strip. */
  
.nookal-landing [style*="grid-template-columns: repeat(5, 1fr)"][style*="6px"] {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
  }
  /* Recall-plan mini-grid (W1/W3/…) and time-slot grids stay multi-col. */
  
.nookal-landing [style*="grid-template-columns: repeat(4, 1fr)"][style*="6px"], .nookal-landing [style*="grid-template-columns: repeat(3, 1fr)"][style*="6px"] {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  
.nookal-landing [style*="grid-template-columns: repeat(3, 1fr)"][style*="6px"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Reporting bar chart — keep all 12 bars in a row but reduce inner widths. */
  
.nookal-landing [style*="grid-template-columns: repeat(12, 1fr)"] {
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 3px !important;
  }
  
.nookal-landing [style*="grid-template-columns: repeat(12, 1fr)"] .bar { width: 5px !important; }

  /* Footer: 1.4fr 1fr 1fr → single column. */
  
.nookal-landing .nk-footer__grid, .nookal-landing [style*="grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* CTA inner form grid: 1fr 1fr inputs → single column. */
  /* (Caught by the generic 1fr-1fr rule above.) */

  /* Variation bar: shrink padding. */
  
.nookal-landing .nk-variations-bar { padding: 8px 16px !important; gap: 8px !important; }

  /* Hero product mockup — scale the whole diary to fit viewport rather than
     forcing horizontal scroll. Source design is 720px wide.
     CSS calc(<length> / <length>) yields a length, not a unitless number, so
     we use the tan(atan2(y,x)) trick: atan2 returns an angle, tan strips the
     unit and yields the unitless ratio y/x — exactly what scale() needs. */
  
.nookal-landing .nk-hero-mockup {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin-top: 28px !important;
    height: calc(540px * tan(atan2(calc(100vw - 36px), 720px)));
    overflow: hidden;
  }
  
.nookal-landing .nk-hero-mockup .mock-card {
    width: 720px !important;
    height: 540px;
    transform-origin: top left;
    transform: scale(tan(atan2(calc(100vw - 36px), 720px)));
    overflow: hidden !important;
  }
  
.nookal-landing .nk-hero-mockup .mock-card > div {
    min-width: 0 !important;
    width: 720px !important;
    height: 540px !important;
  }
  /* Stepped fallback for engines without tan/atan2 support. */
  @supports not (transform: scale(tan(atan2(1px, 1px)))) {

    
.nookal-landing .nk-hero-mockup .mock-card { transform: scale(0.85); }
    
.nookal-landing .nk-hero-mockup { height: 459px; }
  }

  /* Form — tighten further on phone for shorter overall height. */
  
.nookal-landing .input { padding: 10px 12px !important; font-size: 14px !important; border-radius: 10px !important; }
  
.nookal-landing .label { font-size: 10.5px; margin-bottom: 4px !important; letter-spacing: 0.06em !important; }
  
.nookal-landing [style*="border-radius: 22px"][style*="padding: 28px"] {
    padding: 18px !important;
    border-radius: 16px !important;
  }
  
.nookal-landing form [style*="grid-template-columns: 1fr 1fr"] { gap: 8px !important; margin-top: 12px !important; }
  /* The submit button has marginTop: 20 inline; tighten. */
  
.nookal-landing form button[type="submit"] { margin-top: 14px !important; padding: 13px 18px !important; }
  /* Form terms note. */
  
.nookal-landing form [style*="font-size: 12px"][style*="text-align: center"] { margin-top: 10px !important; }

  /* Hero diary mockup — `transform: scale()` to fit viewport (handled above
     via `nk-hero-mockup` rules in the tan(atan2(...)) block).
     The feature-visual flatten rules live in the ≤ 1080px block since the
     parent feature row stacks there. */

  /* Tighten heading clamps slightly on phone */
  
.nookal-landing .h-display { font-size: clamp(40px, 9vw, 56px) !important; }
  
.nookal-landing .h-1 { font-size: clamp(32px, 7vw, 44px) !important; }
  
.nookal-landing .h-2 { font-size: clamp(26px, 6vw, 36px) !important; }

  /* Buttons reflow tighter */
  
.nookal-landing .btn { padding: 12px 18px; font-size: 14px; }
  
.nookal-landing .btn-sm { padding: 9px 14px; font-size: 13px; }
}

/* ───── ≤ 420px : narrow phones ──────────────────────────────── */
@media (max-width: 420px) {

  
.nookal-landing .container { padding: 0 14px; }
  
.nookal-landing .nk-variations-bar .nk-variations-bar__list, .nookal-landing .nk-variations-bar > div { font-size: 11px; }
}