:root { /* Starts NediQR global design tokens. */
--nq-primary: #20275a; /* Stores the approved Primary Deep Navy brand color. */
--nq-primary-dark: #10163a; /* Stores the darker navy shade for premium depth. */
--nq-primary-soft: #2d3570; /* Stores the softer navy shade for layered UI. */
--nq-gold: #ee9d1b; /* Stores the approved Accent Gold brand color. */
--nq-gold-hover: #f7ad35; /* Stores the brighter gold hover color. */
--nq-gold-soft: #fff3da; /* Stores a soft gold background tint. */
--nq-blue-soft: #c3e0e9; /* Stores the approved Soft Tech Blue brand color. */
--nq-cream: #f9f6f0; /* Stores the approved Cream White page background. */
--nq-white: #ffffff; /* Stores pure white for cards and surfaces. */
--nq-text: #1f2937; /* Stores readable main text color. */
--nq-muted: #667085; /* Stores muted helper text color. */
--nq-border: #d9e2ec; /* Stores soft border color. */
--nq-success: #225923; /* Stores approved Success Green. */
--nq-alert: #dc143c; /* Stores approved Alert Red. */
--nq-plan-free-soft: #f4fbf4; /* Stores soft green tint for Free Trial pricing card. */
--nq-plan-lite-soft: #f4f8fc; /* Stores soft blue tint for Lite 10-Year pricing card. */
--nq-font-public: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Calibri, "Helvetica Neue", Arial, sans-serif; /* Stores the public website font stack. */
--nq-shadow-soft: 0 14px 34px rgba(32, 39, 90, 0.08); /* Stores soft elevation shadow. */
--nq-shadow-card: 0 24px 60px rgba(32, 39, 90, 0.14); /* Stores premium card shadow. */
--nq-shadow-strong: 0 30px 72px rgba(32, 39, 90, 0.18); /* Stores stronger premium hover shadow. */
--nq-shadow-dark: 0 38px 90px rgba(0, 0, 0, 0.28); /* Stores dark hero mockup shadow. */
--nq-radius-sm: 10px; /* Stores small rounded corner radius. */
--nq-radius-md: 20px; /* Stores medium rounded corner radius. */
--nq-radius-lg: 32px; /* Stores large rounded corner radius. */
--nq-header-height: 74px; /* Stores reusable public header height token for the separate header CSS file. */
--nq-page-edge: 42px; /* Stores desktop left and right page edge spacing. */
--nq-content-max: 1320px; /* Stores controlled premium content width for homepage body sections. */
--nq-hero-max: 1520px; /* Stores wider but still controlled hero content width. */
} /* Ends NediQR global design tokens. */

* { /* Starts universal sizing reset. */
box-sizing: border-box; /* Includes padding and border inside width calculations. */
} /* Ends universal sizing reset. */

html { /* Starts HTML root styling. */
scroll-behavior: smooth; /* Enables smooth scrolling. */
} /* Ends HTML root styling. */

body { /* Starts base body styling. */
margin: 0; /* Removes default body margin. */
font-family: var(--nq-font-public); /* Uses the public website font stack. */
background: var(--nq-cream); /* Applies cream background. */
color: var(--nq-text); /* Applies main text color. */
line-height: 1.6; /* Improves paragraph readability. */
-webkit-font-smoothing: antialiased; /* Improves font rendering on WebKit browsers. */
-moz-osx-font-smoothing: grayscale; /* Improves font rendering on macOS Firefox. */
text-rendering: geometricPrecision; /* Makes text feel cleaner and sharper where supported. */
} /* Ends base body styling. */

a { /* Starts default link reset. */
color: inherit; /* Makes links inherit text color. */
text-decoration: none; /* Removes default underline. */
} /* Ends default link reset. */

button { /* Starts default button reset. */
font-family: inherit; /* Makes buttons use body font. */
} /* Ends default button reset. */

img { /* Starts image safety styling. */
max-width: 100%; /* Prevents image overflow. */
height: auto; /* Preserves image ratio. */
} /* Ends image safety styling. */

[hidden] { /* Starts hidden attribute support. */
display: none !important; /* Forces hidden elements to stay hidden. */
} /* Ends hidden attribute support. */

.nq-container { /* Starts reusable main-page container styling. */
width: min(calc(100% - (var(--nq-page-edge) * 2)), var(--nq-content-max)); /* Keeps normal page sections premium and centered. */
margin: 0 auto; /* Centers the container within the page. */
} /* Ends reusable main-page container styling. */

.nq-home-hero .nq-container { /* Starts homepage hero container override. */
width: min(calc(100% - (var(--nq-page-edge) * 2)), var(--nq-hero-max)); /* Keeps hero wide but still professionally controlled. */
} /* Ends homepage hero container override. */

.nq-sr-only { /* Starts screen-reader-only utility. */
position: absolute; /* Removes element from visual layout. */
width: 1px; /* Makes element visually tiny. */
height: 1px; /* Makes element visually tiny. */
padding: 0; /* Removes padding. */
margin: -1px; /* Moves element out of normal view. */
overflow: hidden; /* Hides overflow. */
clip: rect(0, 0, 0, 0); /* Clips visible area. */
white-space: nowrap; /* Prevents wrapping. */
border: 0; /* Removes border. */
} /* Ends screen-reader-only utility. */

.nq-skip-link { /* Starts skip link styling. */
position: absolute; /* Positions skip link independently. */
top: -70px; /* Hides skip link by default. */
left: 16px; /* Places skip link from left. */
z-index: 9999; /* Keeps skip link above UI. */
padding: 10px 14px; /* Adds skip link spacing. */
border-radius: var(--nq-radius-sm); /* Rounds skip link. */
background: var(--nq-gold); /* Uses gold background. */
color: var(--nq-primary); /* Uses navy text. */
font-weight: 900; /* Makes skip link bold. */
} /* Ends skip link styling. */

.nq-skip-link:focus { /* Starts focused skip link state. */
top: 12px; /* Brings skip link into view. */
} /* Ends focused skip link state. */

.nq-btn { /* Starts reusable button base styling. */
display: inline-flex; /* Creates flexible button layout. */
align-items: center; /* Vertically centers button content. */
justify-content: center; /* Horizontally centers button content. */
min-height: 44px; /* Keeps button tap friendly. */
padding: 12px 20px; /* Adds button spacing. */
border: 1px solid transparent; /* Keeps stable button size. */
border-radius: var(--nq-radius-sm); /* Rounds button corners. */
font-size: 14px; /* Sets button font size. */
font-weight: 900; /* Makes button text bold. */
line-height: 1; /* Keeps button text compact. */
white-space: nowrap; /* Prevents button text wrapping. */
cursor: pointer; /* Shows pointer cursor. */
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; /* Adds smooth interactions. */
} /* Ends reusable button base styling. */

.nq-btn:hover { /* Starts button hover styling. */
transform: translateY(-2px); /* Lifts button on hover. */
} /* Ends button hover styling. */

.nq-btn:disabled { /* Starts disabled button styling. */
opacity: 0.48; /* Makes disabled buttons visually inactive. */
cursor: not-allowed; /* Shows disabled cursor. */
transform: none; /* Prevents disabled buttons from lifting. */
box-shadow: none; /* Removes disabled button shadow. */
} /* Ends disabled button styling. */

.nq-btn:disabled:hover { /* Starts disabled button hover override styling. */
transform: none; /* Keeps disabled button still on hover. */
} /* Ends disabled button hover override styling. */

.nq-btn-primary { /* Starts primary button styling. */
background: var(--nq-gold); /* Uses gold CTA background. */
color: var(--nq-primary); /* Uses navy CTA text. */
box-shadow: 0 16px 30px rgba(238, 157, 27, 0.32); /* Adds gold button shadow. */
} /* Ends primary button styling. */

.nq-btn-primary:hover { /* Starts primary button hover styling. */
background: var(--nq-gold-hover); /* Brightens gold on hover. */
} /* Ends primary button hover styling. */

.nq-btn-secondary { /* Starts secondary button styling. */
background: rgba(255, 255, 255, 0.14); /* Uses transparent white fill. */
color: var(--nq-white); /* Uses white text. */
border-color: rgba(255, 255, 255, 0.25); /* Adds soft white border. */
} /* Ends secondary button styling. */

.nq-btn-secondary:hover { /* Starts secondary hover styling. */
background: rgba(255, 255, 255, 0.22); /* Increases white fill on hover. */
} /* Ends secondary hover styling. */

.nq-btn-outline { /* Starts outline button styling. */
background: var(--nq-white); /* Uses white background. */
color: var(--nq-primary); /* Uses navy text. */
border-color: var(--nq-border); /* Uses soft border. */
} /* Ends outline button styling. */

.nq-btn-outline:hover { /* Starts outline hover styling. */
border-color: var(--nq-gold); /* Turns outline border gold. */
box-shadow: var(--nq-shadow-soft); /* Adds hover shadow. */
} /* Ends outline hover styling. */

.nq-btn-ghost { /* Starts ghost button styling. */
background: transparent; /* Keeps ghost background transparent. */
color: var(--nq-white); /* Uses white ghost text. */
border-color: rgba(255, 255, 255, 0.24); /* Adds subtle border. */
} /* Ends ghost button styling. */

.nq-btn-ghost:hover { /* Starts ghost hover styling. */
background: rgba(255, 255, 255, 0.12); /* Adds hover fill. */
} /* Ends ghost hover styling. */

.nq-btn-full { /* Starts full button utility. */
width: 100%; /* Makes button full width. */
} /* Ends full button utility. */

.nq-public-content { /* Starts public content wrapper styling. */
min-height: 60vh; /* Keeps short public pages visually balanced. */
} /* Ends public content wrapper styling. */

.nq-homepage { /* Starts homepage wrapper styling. */
overflow: hidden; /* Prevents decorative overflow. */
} /* Ends homepage wrapper styling. */

.nq-section-kicker { /* Starts shared section kicker styling. */
margin: 0 0 14px; /* Adds space below kicker. */
color: var(--nq-gold); /* Uses gold kicker color. */
font-size: 12px; /* Sets kicker size. */
font-weight: 900; /* Makes kicker bold. */
letter-spacing: 0.12em; /* Adds uppercase spacing. */
text-transform: uppercase; /* Converts kicker to uppercase. */
} /* Ends shared section kicker styling. */

.nq-home-hero { /* Starts homepage hero styling. */
position: relative; /* Allows decorative pseudo layers. */
padding: 74px 0 84px; /* Keeps hero premium while reducing oversized blank height. */
background: radial-gradient(circle at 16% 12%, rgba(195, 224, 233, 0.22), transparent 32%), radial-gradient(circle at 82% 24%, rgba(238, 157, 27, 0.16), transparent 26%), linear-gradient(135deg, var(--nq-primary), var(--nq-primary-dark)); /* Creates layered premium hero background. */
color: var(--nq-white); /* Uses white hero text. */
} /* Ends homepage hero styling. */

.nq-home-hero::before { /* Starts hero grid decoration. */
content: ""; /* Creates decoration element. */
position: absolute; /* Positions decoration inside hero. */
inset: 0; /* Covers full hero. */
background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); /* Creates subtle grid lines. */
background-size: 46px 46px; /* Sets grid size. */
opacity: 0.42; /* Keeps grid subtle. */
pointer-events: none; /* Keeps decoration non-clickable. */
} /* Ends hero grid decoration. */

.nq-home-hero__grid { /* Starts hero grid styling. */
position: relative; /* Keeps content above decoration. */
z-index: 1; /* Places content above decoration. */
display: grid; /* Creates two-column hero layout. */
grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.9fr); /* Keeps hero text and preview balanced. */
gap: 56px; /* Controls space between hero text and hero visual. */
align-items: center; /* Vertically centers hero columns. */
} /* Ends hero grid styling. */

.nq-home-hero__title { /* Starts hero title styling. */
margin: 0; /* Removes default title margin. */
max-width: 760px; /* Prevents the headline from becoming too wide. */
font-size: clamp(44px, 4.6vw, 68px); /* Sets premium responsive title size. */
line-height: 1.03; /* Keeps title tight. */
letter-spacing: -0.058em; /* Adds SaaS-style title compression. */
} /* Ends hero title styling. */

.nq-home-hero__subtitle { /* Starts hero subtitle styling. */
margin: 22px 0 0; /* Adds space above subtitle. */
max-width: 680px; /* Keeps subtitle readable. */
font-size: clamp(16px, 1.5vw, 18px); /* Sets responsive subtitle size. */
color: rgba(255, 255, 255, 0.84); /* Uses softer white subtitle. */
} /* Ends hero subtitle styling. */

.nq-home-hero__actions { /* Starts hero actions styling. */
display: flex; /* Places buttons in row. */
flex-wrap: wrap; /* Allows wrapping. */
gap: 14px; /* Adds button gap. */
margin-top: 30px; /* Adds space above buttons. */
} /* Ends hero actions styling. */

.nq-home-hero__pills { /* Starts hero pills styling. */
display: flex; /* Places pills in row. */
flex-wrap: wrap; /* Allows wrapping. */
gap: 10px; /* Adds pill gap. */
margin-top: 24px; /* Adds space above pills. */
} /* Ends hero pills styling. */

.nq-home-hero__pills span { /* Starts hero pill item styling. */
display: inline-flex; /* Aligns pill text. */
align-items: center; /* Vertically centers pill text. */
padding: 8px 12px; /* Adds pill spacing. */
border-radius: 999px; /* Makes pill round. */
background: rgba(255, 255, 255, 0.1); /* Adds glass fill. */
border: 1px solid rgba(255, 255, 255, 0.18); /* Adds glass border. */
font-size: 12px; /* Sets pill text size. */
font-weight: 800; /* Makes pill text bold. */
} /* Ends hero pill item styling. */

.nq-home-hero__proof-grid { /* Starts hero proof grid styling. */
display: grid; /* Creates proof card grid. */
grid-template-columns: repeat(2, minmax(0, 1fr)); /* Creates two proof columns. */
gap: 14px; /* Adds proof gap. */
max-width: 680px; /* Aligns proof cards with hero subtitle width. */
margin-top: 24px; /* Adds space above proof cards. */
} /* Ends hero proof grid styling. */

.nq-home-proof-card { /* Starts hero proof card styling. */
padding: 16px; /* Keeps proof card compact and readable. */
border-radius: 18px; /* Rounds proof card. */
background: rgba(255, 255, 255, 0.105); /* Increases proof card visibility. */
border: 1px solid rgba(255, 255, 255, 0.14); /* Adds translucent border. */
} /* Ends hero proof card styling. */

.nq-home-proof-card strong { /* Starts proof card title styling. */
display: block; /* Places title on own line. */
margin-bottom: 6px; /* Adds space below title. */
color: var(--nq-white); /* Uses white title. */
font-size: 14px; /* Sets title size. */
} /* Ends proof card title styling. */

.nq-home-proof-card span { /* Starts proof card text styling. */
display: block; /* Places text on own line. */
color: rgba(255, 255, 255, 0.74); /* Uses muted white text. */
font-size: 13px; /* Sets text size. */
} /* Ends proof card text styling. */

.nq-home-hero__visual { /* Starts hero visual wrapper styling. */
position: relative; /* Allows visual decoration. */
max-width: 660px; /* Prevents hero visual from becoming too huge. */
justify-self: end; /* Keeps hero visual aligned right. */
} /* Ends hero visual wrapper styling. */

.nq-dashboard-card { /* Starts dashboard preview card styling. */
position: relative; /* Allows card glow. */
padding: 28px; /* Adds dashboard card padding. */
border-radius: 34px; /* Rounds dashboard card. */
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,251,253,0.97)); /* Adds soft dashboard surface. */
border: 1px solid rgba(255, 255, 255, 0.78); /* Adds bright card edge. */
box-shadow: var(--nq-shadow-dark); /* Adds strong hero shadow. */
transform: rotate(1.4deg); /* Adds slight product-card energy. */
} /* Ends dashboard preview card styling. */

.nq-dashboard-card::before { /* Starts dashboard glow styling. */
content: ""; /* Creates glow element. */
position: absolute; /* Positions glow behind card. */
inset: -22px; /* Extends glow beyond card. */
z-index: -1; /* Places glow behind card. */
background: radial-gradient(circle at 50% 30%, rgba(238, 157, 27, 0.24), transparent 56%); /* Adds gold glow. */
filter: blur(10px); /* Softens glow. */
} /* Ends dashboard glow styling. */

.nq-dashboard-card__topbar { /* Starts dashboard topbar styling. */
display: flex; /* Places title and badge in row. */
align-items: center; /* Vertically centers topbar. */
justify-content: space-between; /* Separates title and badge. */
gap: 14px; /* Adds topbar gap. */
margin-bottom: 20px; /* Adds space below topbar. */
} /* Ends dashboard topbar styling. */

.nq-dashboard-card__status { /* Starts dashboard status group styling. */
display: inline-flex; /* Places dot and title in row. */
align-items: center; /* Vertically centers status. */
gap: 10px; /* Adds status gap. */
color: var(--nq-primary); /* Uses navy status text. */
font-size: 14px; /* Sets status text size. */
font-weight: 900; /* Keeps dashboard title strong. */
} /* Ends dashboard status group styling. */

.nq-dashboard-card__dot { /* Starts dashboard dot styling. */
width: 11px; /* Sets dot width. */
height: 11px; /* Sets dot height. */
border-radius: 999px; /* Makes dot circular. */
background: var(--nq-success); /* Uses success green dot. */
} /* Ends dashboard dot styling. */

.nq-dashboard-card__badge { /* Starts dashboard badge styling. */
padding: 7px 10px; /* Adds badge spacing. */
border-radius: 999px; /* Makes badge pill. */
background: #eef4fa; /* Uses soft blue badge fill. */
color: var(--nq-primary); /* Uses navy badge text. */
font-size: 11px; /* Sets badge text size. */
font-weight: 900; /* Makes badge bold. */
} /* Ends dashboard badge styling. */

.nq-dashboard-card__main { /* Starts dashboard main layout styling. */
display: grid; /* Creates QR and metrics grid. */
grid-template-columns: 170px 1fr; /* Gives QR clear space. */
gap: 20px; /* Adds QR and metric gap. */
align-items: center; /* Vertically aligns content. */
} /* Ends dashboard main layout styling. */

.nq-dashboard-qr { /* Starts QR mockup styling. */
display: grid; /* Creates QR cell grid. */
grid-template-columns: repeat(7, 1fr); /* Creates seven columns. */
grid-template-rows: repeat(7, 1fr); /* Creates seven rows. */
gap: 5px; /* Adds QR cell gap. */
width: 166px; /* Sets QR width. */
height: 166px; /* Sets QR height. */
padding: 13px; /* Adds QR quiet-zone spacing. */
border-radius: 20px; /* Rounds QR shell. */
background: var(--nq-white); /* Uses white QR surface. */
border: 1px solid var(--nq-border); /* Adds QR shell border. */
box-shadow: inset 0 0 0 6px var(--nq-cream); /* Adds inner quiet-zone border. */
} /* Ends QR mockup styling. */

.nq-qr-cell { /* Starts QR cell base styling. */
display: block; /* Makes cell visible. */
border-radius: 4px; /* Rounds QR cells. */
} /* Ends QR cell base styling. */

.nq-qr-dark { /* Starts dark QR cell styling. */
background: var(--nq-primary); /* Uses navy QR cell. */
} /* Ends dark QR cell styling. */

.nq-qr-gold { /* Starts gold QR cell styling. */
background: var(--nq-gold); /* Uses gold QR cell. */
} /* Ends gold QR cell styling. */

.nq-qr-light { /* Starts light QR cell styling. */
background: #edf4f8; /* Uses pale blue QR cell. */
} /* Ends light QR cell styling. */

.nq-dashboard-metrics { /* Starts dashboard metrics styling. */
display: grid; /* Stacks metric cards. */
gap: 14px; /* Adds metric gap. */
} /* Ends dashboard metrics styling. */

.nq-dashboard-metric { /* Starts metric card styling. */
padding: 18px; /* Adds metric card padding. */
border-radius: 18px; /* Rounds metric card. */
background: #f3f7fb; /* Uses dashboard metric fill. */
border: 1px solid var(--nq-border); /* Adds metric card border. */
} /* Ends metric card styling. */

.nq-dashboard-metric strong { /* Starts metric value styling. */
display: block; /* Places value on own line. */
font-size: 28px; /* Sets metric value size. */
line-height: 1; /* Keeps metric compact. */
color: var(--nq-primary); /* Uses navy metric value. */
} /* Ends metric value styling. */

.nq-dashboard-metric span { /* Starts metric label styling. */
display: block; /* Places label on own line. */
margin-top: 8px; /* Adds space above label. */
color: var(--nq-muted); /* Uses muted label. */
font-size: 13px; /* Sets label size. */
font-weight: 800; /* Makes label strong. */
} /* Ends metric label styling. */

.nq-dashboard-bars { /* Starts dashboard bars styling. */
display: grid; /* Stacks bars. */
gap: 10px; /* Adds bar gap. */
margin-top: 22px; /* Adds space above bars. */
} /* Ends dashboard bars styling. */

.nq-dashboard-bar { /* Starts dashboard bar styling. */
height: 12px; /* Sets bar height. */
border-radius: 999px; /* Makes bar pill. */
background: linear-gradient(90deg, var(--nq-blue-soft), #dceff5); /* Adds soft bar gradient. */
} /* Ends dashboard bar styling. */

.nq-dashboard-bar-1 { /* Starts first bar styling. */
width: 94%; /* Sets first bar width. */
} /* Ends first bar styling. */

.nq-dashboard-bar-2 { /* Starts second bar styling. */
width: 78%; /* Sets second bar width. */
} /* Ends second bar styling. */

.nq-dashboard-bar-3 { /* Starts third bar styling. */
width: 58%; /* Sets third bar width. */
} /* Ends third bar styling. */

.nq-dashboard-table { /* Starts dashboard table styling. */
display: grid; /* Stacks mini rows. */
gap: 10px; /* Adds row gap. */
margin-top: 18px; /* Adds space above mini table. */
} /* Ends dashboard table styling. */

.nq-dashboard-table__row { /* Starts dashboard row styling. */
display: grid; /* Creates row columns. */
grid-template-columns: 90px 1fr auto; /* Creates label, value, and status columns. */
gap: 10px; /* Adds column gap. */
align-items: center; /* Vertically centers row content. */
padding: 10px 12px; /* Adds row padding. */
border-radius: 14px; /* Rounds row. */
background: rgba(238, 244, 250, 0.78); /* Uses soft row fill. */
font-size: 12px; /* Sets row text size. */
} /* Ends dashboard row styling. */

.nq-dashboard-table__row span { /* Starts row label styling. */
color: var(--nq-muted); /* Uses muted row label. */
font-weight: 800; /* Makes label strong. */
} /* Ends row label styling. */

.nq-dashboard-table__row strong { /* Starts row value styling. */
color: var(--nq-primary); /* Uses navy value. */
font-weight: 900; /* Makes value bold. */
} /* Ends row value styling. */

.nq-dashboard-table__row em { /* Starts row status styling. */
font-style: normal; /* Removes italic. */
color: var(--nq-success); /* Uses success green. */
font-weight: 900; /* Makes status bold. */
} /* Ends row status styling. */

.nq-home-trust { /* Starts trust strip section styling. */
position: relative; /* Allows elevated trust strip. */
z-index: 3; /* Keeps strip above background. */
margin-top: -38px; /* Pulls strip upward into hero edge. */
} /* Ends trust strip section styling. */

.nq-home-trust .nq-container { /* Starts trust strip width control. */
width: min(calc(100% - (var(--nq-page-edge) * 2)), var(--nq-content-max)); /* Keeps trust strip aligned to controlled body width. */
} /* Ends trust strip width control. */

.nq-home-trust__grid { /* Starts trust strip grid styling. */
display: grid; /* Creates trust grid. */
grid-template-columns: repeat(3, minmax(0, 1fr)); /* Creates three trust columns. */
overflow: hidden; /* Clips inner dividers. */
border: 1px solid var(--nq-border); /* Adds strip border. */
border-radius: 24px; /* Rounds trust strip. */
background: var(--nq-white); /* Uses white strip surface. */
box-shadow: var(--nq-shadow-card); /* Adds floating shadow. */
} /* Ends trust strip grid styling. */

.nq-home-trust__item { /* Starts trust item styling. */
padding: 24px 28px; /* Adds trust item spacing. */
border-right: 1px solid var(--nq-border); /* Adds divider. */
} /* Ends trust item styling. */

.nq-home-trust__item:last-child { /* Starts last trust item styling. */
border-right: 0; /* Removes final divider. */
} /* Ends last trust item styling. */

.nq-home-trust__item strong { /* Starts trust heading styling. */
display: block; /* Places heading on own line. */
margin-bottom: 8px; /* Adds space below heading. */
color: var(--nq-primary); /* Uses navy heading. */
font-size: 15px; /* Sets heading size. */
font-weight: 900; /* Makes heading bold. */
} /* Ends trust heading styling. */

.nq-home-trust__item span { /* Starts trust description styling. */
display: block; /* Places description on own line. */
color: var(--nq-muted); /* Uses muted text. */
font-size: 13px; /* Sets text size. */
} /* Ends trust description styling. */

.nq-home-section { /* Starts common homepage section styling. */
padding: 68px 0; /* Tightens section rhythm. */
} /* Ends common homepage section styling. */

.nq-home-section-heading { /* Starts section heading block styling. */
max-width: 820px; /* Controls heading block width. */
margin-bottom: 36px; /* Reduces excess space below heading. */
} /* Ends section heading block styling. */

.nq-home-section-heading--center { /* Starts centered heading modifier. */
text-align: center; /* Centers heading text. */
margin-left: auto; /* Centers block horizontally. */
margin-right: auto; /* Centers block horizontally. */
} /* Ends centered heading modifier. */

.nq-home-section-heading--split { /* Starts split heading modifier. */
display: grid; /* Creates heading and action layout. */
grid-template-columns: minmax(0, 1fr) auto; /* Keeps heading wide and action compact. */
align-items: end; /* Aligns action near heading bottom. */
gap: 34px; /* Adds gap between heading and link. */
max-width: none; /* Allows full controlled container width. */
} /* Ends split heading modifier. */

.nq-home-section-heading h2 { /* Starts section heading styling. */
margin: 0; /* Removes default heading margin. */
font-size: clamp(32px, 3.35vw, 46px); /* Sets responsive heading size. */
line-height: 1.08; /* Keeps heading compact. */
letter-spacing: -0.043em; /* Adds premium letter spacing. */
color: var(--nq-primary); /* Uses navy heading. */
} /* Ends section heading styling. */

.nq-home-section-heading p:not(.nq-section-kicker) { /* Starts section intro styling. */
margin: 14px auto 0; /* Tightens intro spacing and centers text. */
max-width: 740px; /* Controls intro width. */
color: var(--nq-muted); /* Uses muted intro text. */
font-size: 16px; /* Sets intro text size. */
} /* Ends section intro styling. */

.nq-text-link { /* Starts text link styling. */
display: inline-flex; /* Keeps link inline but controllable. */
align-items: center; /* Vertically centers link text. */
color: var(--nq-primary); /* Uses navy link. */
font-weight: 900; /* Makes link bold. */
border-bottom: 2px solid var(--nq-gold); /* Adds gold underline. */
padding-bottom: 4px; /* Adds spacing above underline. */
} /* Ends text link styling. */

.nq-feature-grid { /* Starts feature grid styling. */
display: grid; /* Creates feature card grid. */
grid-template-columns: repeat(3, minmax(0, 1fr)); /* Creates three cards per row. */
gap: 22px; /* Sets feature card gap. */
} /* Ends feature grid styling. */

.nq-feature-card { /* Starts feature card styling. */
position: relative; /* Allows accent line. */
min-height: 224px; /* Keeps cards premium. */
padding: 28px; /* Adds card spacing. */
overflow: hidden; /* Clips accent line. */
border: 1px solid var(--nq-border); /* Adds card border. */
border-radius: 24px; /* Rounds feature card. */
background: var(--nq-white); /* Uses white feature surface. */
box-shadow: var(--nq-shadow-soft); /* Adds feature shadow. */
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; /* Adds card transition. */
} /* Ends feature card styling. */

.nq-feature-card::before { /* Starts feature accent line styling. */
content: ""; /* Creates accent line. */
position: absolute; /* Positions accent line. */
top: 0; /* Places line at top. */
left: 0; /* Starts line left. */
right: 0; /* Extends line right. */
height: 4px; /* Sets line height. */
background: linear-gradient(90deg, var(--nq-gold), var(--nq-blue-soft)); /* Creates gold-blue accent. */
} /* Ends feature accent line styling. */

.nq-feature-card:hover { /* Starts feature card hover styling. */
transform: translateY(-7px); /* Lifts card on hover. */
border-color: rgba(238, 157, 27, 0.46); /* Adds gold hover border. */
box-shadow: var(--nq-shadow-card); /* Adds stronger hover shadow. */
} /* Ends feature card hover styling. */

.nq-feature-card__icon { /* Starts feature icon styling. */
width: 52px; /* Sets icon width. */
height: 52px; /* Sets icon height. */
display: inline-flex; /* Centers icon text. */
align-items: center; /* Vertically centers icon. */
justify-content: center; /* Horizontally centers icon. */
margin-bottom: 20px; /* Adds space below icon. */
border-radius: 17px; /* Rounds icon badge. */
background: linear-gradient(135deg, var(--nq-blue-soft), #edf7fa); /* Adds soft blue icon gradient. */
color: var(--nq-primary); /* Uses navy icon text. */
font-size: 11px; /* Sets icon text size. */
font-weight: 900; /* Makes icon text bold. */
} /* Ends feature icon styling. */

.nq-feature-card h3 { /* Starts feature title styling. */
margin: 0 0 12px; /* Adds space below title. */
color: var(--nq-primary); /* Uses navy title. */
font-size: 20px; /* Sets feature title size. */
line-height: 1.18; /* Improves title readability. */
} /* Ends feature title styling. */

.nq-feature-card p { /* Starts feature description styling. */
margin: 0; /* Removes paragraph margin. */
color: var(--nq-muted); /* Uses muted text. */
font-size: 14px; /* Sets feature text size. */
} /* Ends feature description styling. */

.nq-home-workflow { /* Starts workflow section styling. */
padding-top: 62px; /* Reduces top whitespace. */
padding-bottom: 60px; /* Reduces bottom whitespace. */
background: linear-gradient(180deg, rgba(195, 224, 233, 0.14), rgba(249, 246, 240, 0)); /* Adds subtle section gradient. */
} /* Ends workflow section styling. */

.nq-workflow-grid { /* Starts workflow grid styling. */
display: grid; /* Creates workflow grid. */
grid-template-columns: repeat(3, minmax(0, 1fr)); /* Creates three workflow cards. */
gap: 22px; /* Sets workflow card gap. */
} /* Ends workflow grid styling. */

.nq-workflow-card { /* Starts workflow card styling. */
position: relative; /* Allows decorative overlays. */
min-height: 208px; /* Keeps workflow cards balanced. */
padding: 30px; /* Adds workflow spacing. */
overflow: hidden; /* Keeps decorative overlays inside the card. */
border: 1px solid var(--nq-border); /* Adds workflow border. */
border-radius: 26px; /* Rounds workflow card. */
background: var(--nq-white); /* Uses white workflow surface. */
box-shadow: var(--nq-shadow-soft); /* Adds workflow shadow. */
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease; /* Adds premium workflow card animation. */
} /* Ends workflow card styling. */

.nq-workflow-card::before { /* Starts workflow card top accent styling. */
content: ""; /* Creates the decorative accent element. */
position: absolute; /* Positions the accent inside the card. */
top: 0; /* Places the accent at the top. */
left: 0; /* Starts the accent from the left edge. */
right: 0; /* Extends the accent to the right edge. */
height: 5px; /* Sets the accent line thickness. */
background: linear-gradient(90deg, var(--nq-gold), var(--nq-blue-soft)); /* Uses a premium gold-to-blue accent. */
} /* Ends workflow card top accent styling. */

.nq-workflow-card::after { /* Starts workflow card glow styling. */
content: ""; /* Creates the glow overlay. */
position: absolute; /* Positions the glow inside the card. */
width: 130px; /* Sets glow width. */
height: 130px; /* Sets glow height. */
right: -46px; /* Moves glow partly outside card. */
bottom: -52px; /* Moves glow partly below card. */
border-radius: 999px; /* Makes glow circular. */
background: rgba(195, 224, 233, 0.42); /* Uses Soft Tech Blue glow. */
opacity: 0; /* Hides glow by default. */
transition: opacity 0.24s ease, transform 0.24s ease; /* Animates glow on hover. */
pointer-events: none; /* Prevents glow from blocking clicks. */
} /* Ends workflow card glow styling. */

.nq-workflow-card:hover { /* Starts workflow hover styling. */
transform: translateY(-8px); /* Lifts workflow card on hover. */
border-color: rgba(238, 157, 27, 0.5); /* Adds gold hover border. */
box-shadow: var(--nq-shadow-strong); /* Adds stronger hover shadow. */
} /* Ends workflow hover styling. */

.nq-workflow-card:hover::after { /* Starts workflow hover glow styling. */
opacity: 1; /* Shows glow on hover. */
transform: scale(1.08); /* Expands glow slightly on hover. */
} /* Ends workflow hover glow styling. */

.nq-workflow-card span { /* Starts workflow number styling. */
width: 48px; /* Sets badge width. */
height: 48px; /* Sets badge height. */
display: inline-flex; /* Centers number. */
align-items: center; /* Vertically centers number. */
justify-content: center; /* Horizontally centers number. */
margin-bottom: 22px; /* Adds space below number. */
border-radius: 16px; /* Rounds number badge. */
background: var(--nq-primary); /* Uses navy badge fill. */
color: var(--nq-gold); /* Uses gold number. */
font-weight: 900; /* Makes number bold. */
} /* Ends workflow number styling. */

.nq-workflow-card:nth-child(1) span { /* Starts Create workflow badge styling. */
background: var(--nq-primary); /* Uses Deep Navy for Create badge. */
color: var(--nq-gold); /* Uses Accent Gold for Create number. */
} /* Ends Create workflow badge styling. */

.nq-workflow-card:nth-child(2) span { /* Starts Style workflow badge styling. */
background: var(--nq-gold); /* Uses Accent Gold for Style badge. */
color: var(--nq-primary); /* Uses Deep Navy for Style number. */
} /* Ends Style workflow badge styling. */

.nq-workflow-card:nth-child(3) span { /* Starts Track workflow badge styling. */
background: var(--nq-success); /* Uses Success Green for Track badge. */
color: var(--nq-white); /* Uses white for Track number. */
} /* Ends Track workflow badge styling. */

.nq-workflow-card h3 { /* Starts workflow title styling. */
margin: 0 0 10px; /* Adds space below workflow title. */
color: var(--nq-primary); /* Uses navy title. */
font-size: 23px; /* Sets workflow title size. */
} /* Ends workflow title styling. */

.nq-workflow-card p { /* Starts workflow text styling. */
margin: 0; /* Removes paragraph margin. */
color: var(--nq-muted); /* Uses muted text. */
font-size: 14px; /* Sets workflow text size. */
} /* Ends workflow text styling. */

.nq-home-pricing { /* Starts pricing section-specific styling. */
padding-top: 64px; /* Reduces excess gap before pricing section. */
padding-bottom: 62px; /* Reduces excess gap after pricing section. */
} /* Ends pricing section-specific styling. */

.nq-home-pricing .nq-home-section-heading--split { /* Starts pricing heading layout styling. */
align-items: center; /* Vertically balances heading and Compare All Plans link. */
margin-bottom: 34px; /* Keeps pricing heading close to cards. */
} /* Ends pricing heading layout styling. */

.nq-home-pricing .nq-home-section-heading h2 { /* Starts pricing heading typography styling. */
max-width: 880px; /* Prevents pricing heading from stretching too wide. */
font-size: clamp(32px, 3.45vw, 47px); /* Keeps pricing heading strong but controlled. */
} /* Ends pricing heading typography styling. */

.nq-home-pricing .nq-home-section-heading p:not(.nq-section-kicker) { /* Starts pricing intro styling. */
margin-left: 0; /* Aligns pricing intro with pricing heading. */
margin-right: 0; /* Prevents pricing intro from floating awkwardly. */
max-width: 700px; /* Keeps pricing intro readable. */
} /* Ends pricing intro styling. */

.nq-home-pricing .nq-text-link { /* Starts pricing compare link styling. */
padding: 10px 0 6px; /* Gives pricing link better clickable rhythm. */
font-size: 15px; /* Makes pricing comparison link more visible. */
} /* Ends pricing compare link styling. */

.nq-plan-grid { /* Starts plan grid styling. */
display: grid; /* Creates plan grid. */
grid-template-columns: repeat(3, minmax(0, 1fr)); /* Creates three plan columns. */
gap: 24px; /* Adds plan gap. */
align-items: stretch; /* Keeps cards equal height. */
} /* Ends plan grid styling. */

.nq-plan-card { /* Starts plan card styling. */
position: relative; /* Allows featured badge placement and top accents. */
display: flex; /* Enables vertical card layout. */
flex-direction: column; /* Stacks content vertically. */
gap: 15px; /* Adds plan content gap. */
min-height: 376px; /* Gives plan card premium height. */
padding: 30px; /* Adds plan card padding. */
overflow: hidden; /* Keeps card decoration inside rounded card. */
border: 1px solid var(--nq-border); /* Adds plan border. */
border-radius: 24px; /* Rounds plan card. */
background: var(--nq-white); /* Uses white plan surface. */
box-shadow: var(--nq-shadow-soft); /* Adds plan shadow. */
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; /* Adds premium pricing card motion. */
} /* Ends plan card styling. */

.nq-plan-card::before { /* Starts plan card top accent styling. */
content: ""; /* Creates top accent element. */
position: absolute; /* Positions accent inside pricing card. */
top: 0; /* Places accent at card top. */
left: 0; /* Starts accent from left edge. */
right: 0; /* Extends accent to right edge. */
height: 6px; /* Makes pricing plan accent visible. */
background: var(--nq-border); /* Uses neutral accent by default. */
} /* Ends plan card top accent styling. */

.nq-plan-card:hover { /* Starts plan card hover styling. */
transform: translateY(-8px); /* Lifts pricing card on hover. */
box-shadow: var(--nq-shadow-strong); /* Adds stronger pricing hover shadow. */
} /* Ends plan card hover styling. */

.nq-plan-card--featured { /* Starts featured plan styling. */
border-color: var(--nq-gold); /* Adds gold featured border. */
background: linear-gradient(180deg, var(--nq-white), var(--nq-gold-soft)); /* Adds gold-tinted featured surface. */
box-shadow: 0 30px 70px rgba(238, 157, 27, 0.2); /* Adds stronger Growth emphasis. */
transform: translateY(-6px); /* Raises featured card slightly. */
} /* Ends featured plan styling. */

.nq-plan-grid .nq-plan-card:nth-child(1) { /* Starts Free Trial card distinction. */
border-color: rgba(34, 89, 35, 0.32); /* Gives Free Trial card a clear green border. */
background: linear-gradient(180deg, var(--nq-white), var(--nq-plan-free-soft)); /* Gives Free Trial card a soft success tint. */
} /* Ends Free Trial card distinction. */

.nq-plan-grid .nq-plan-card:nth-child(1)::before { /* Starts Free Trial top accent styling. */
background: linear-gradient(90deg, var(--nq-success), rgba(34, 89, 35, 0.25)); /* Uses a premium green accent for Free Trial. */
} /* Ends Free Trial top accent styling. */

.nq-plan-grid .nq-plan-card:nth-child(2) { /* Starts Growth card distinction. */
border-color: rgba(238, 157, 27, 0.84); /* Gives Growth card a stronger gold border. */
background: linear-gradient(180deg, var(--nq-white), var(--nq-gold-soft)); /* Gives Growth card a premium gold tint. */
box-shadow: 0 30px 70px rgba(238, 157, 27, 0.2); /* Adds stronger Growth emphasis. */
} /* Ends Growth card distinction. */

.nq-plan-grid .nq-plan-card:nth-child(2)::before { /* Starts Growth top accent styling. */
background: linear-gradient(90deg, var(--nq-gold), #ffd27a); /* Uses Accent Gold as Growth accent. */
} /* Ends Growth top accent styling. */

.nq-plan-grid .nq-plan-card:nth-child(3) { /* Starts Lite 10-Year card distinction. */
border-color: rgba(32, 39, 90, 0.34); /* Gives Lite card a clearer navy border. */
background: linear-gradient(180deg, var(--nq-white), var(--nq-plan-lite-soft)); /* Gives Lite card a soft blue-tinted background. */
} /* Ends Lite 10-Year card distinction. */

.nq-plan-grid .nq-plan-card:nth-child(3)::before { /* Starts Lite 10-Year top accent styling. */
background: linear-gradient(90deg, var(--nq-primary), var(--nq-blue-soft)); /* Uses Deep Navy and Soft Blue as Lite accent. */
} /* Ends Lite 10-Year top accent styling. */

.nq-plan-card__badge { /* Starts plan badge styling. */
align-self: flex-start; /* Keeps badge natural width. */
padding: 7px 11px; /* Adds badge padding. */
border-radius: 999px; /* Makes badge pill. */
background: var(--nq-gold); /* Uses gold badge. */
color: var(--nq-primary); /* Uses navy badge text. */
font-size: 11px; /* Sets badge text size. */
font-weight: 900; /* Makes badge text bold. */
box-shadow: 0 10px 22px rgba(238, 157, 27, 0.28); /* Adds premium badge depth. */
} /* Ends plan badge styling. */

.nq-plan-card__label { /* Starts plan label styling. */
display: inline-flex; /* Makes plan name look like a distinct premium label. */
align-items: center; /* Vertically centers label text. */
align-self: flex-start; /* Keeps plan label only as wide as needed. */
margin: 0; /* Removes label margin. */
padding: 7px 12px; /* Adds label padding. */
border-radius: 999px; /* Creates rounded label shape. */
border: 1px solid transparent; /* Keeps label shape stable. */
font-size: 13px; /* Keeps plan label compact but visible. */
line-height: 1; /* Keeps label height controlled. */
font-weight: 900; /* Makes label bold. */
letter-spacing: 0.02em; /* Adds polished label spacing. */
text-transform: uppercase; /* Makes package heading visibly different. */
} /* Ends plan label styling. */

.nq-plan-grid .nq-plan-card:nth-child(1) .nq-plan-card__label { /* Starts Free Trial label styling. */
color: var(--nq-success); /* Makes Free Trial plan name green and clear. */
background: rgba(34, 89, 35, 0.08); /* Adds subtle green label background. */
border-color: rgba(34, 89, 35, 0.2); /* Adds subtle green label border. */
} /* Ends Free Trial label styling. */

.nq-plan-grid .nq-plan-card:nth-child(2) .nq-plan-card__label { /* Starts Growth label styling. */
color: var(--nq-primary); /* Makes Growth plan name strong navy. */
background: rgba(238, 157, 27, 0.18); /* Adds gold label background. */
border-color: rgba(238, 157, 27, 0.42); /* Adds gold label border. */
} /* Ends Growth label styling. */

.nq-plan-grid .nq-plan-card:nth-child(3) .nq-plan-card__label { /* Starts Lite 10-Year label styling. */
color: var(--nq-primary); /* Makes Lite plan name navy and visible. */
background: rgba(32, 39, 90, 0.08); /* Adds subtle navy label background. */
border-color: rgba(32, 39, 90, 0.18); /* Adds subtle navy label border. */
} /* Ends Lite 10-Year label styling. */

.nq-plan-card h3 { /* Starts plan price styling. */
margin: 0; /* Removes heading margin. */
color: var(--nq-primary); /* Uses navy price. */
font-size: 31px; /* Makes price values clearer and stronger. */
line-height: 1.1; /* Keeps price compact. */
letter-spacing: -0.035em; /* Adds premium pricing typography. */
} /* Ends plan price styling. */

.nq-plan-card p { /* Starts plan paragraph styling. */
margin: 0; /* Removes paragraph margin. */
color: var(--nq-muted); /* Uses muted plan text. */
font-size: 14px; /* Sets plan text size. */
} /* Ends plan paragraph styling. */

.nq-plan-card ul { /* Starts plan list styling. */
margin: 4px 0 0; /* Adds small list spacing. */
padding-left: 20px; /* Adds bullet indentation. */
color: var(--nq-text); /* Uses readable list text. */
font-size: 14px; /* Sets list size. */
} /* Ends plan list styling. */

.nq-plan-card li { /* Starts plan list item styling. */
margin-bottom: 4px; /* Adds small breathing space between plan bullet points. */
} /* Ends plan list item styling. */

.nq-plan-card .nq-btn { /* Starts plan button styling. */
margin-top: auto; /* Pushes button to card bottom. */
} /* Ends plan button styling. */

.nq-plan-grid .nq-plan-card:nth-child(1) .nq-btn-outline { /* Starts Free Trial button distinction. */
border-color: rgba(34, 89, 35, 0.28); /* Gives Free Trial button a green-tinted border. */
} /* Ends Free Trial button distinction. */

.nq-plan-grid .nq-plan-card:nth-child(3) .nq-btn-outline { /* Starts Lite button distinction. */
border-color: rgba(32, 39, 90, 0.22); /* Gives Lite button a navy-tinted border. */
} /* Ends Lite button distinction. */

.nq-home-pricing__action { /* Starts pricing bottom action styling. */
display: flex; /* Enables CTA centering. */
justify-content: center; /* Centers pricing CTA. */
margin-top: 30px; /* Tightens space above pricing CTA button. */
} /* Ends pricing bottom action styling. */

.nq-home-pricing__action .nq-btn { /* Starts pricing bottom CTA styling. */
min-width: 210px; /* Gives pricing CTA a confident premium width. */
} /* Ends pricing bottom CTA styling. */

.nq-final-cta-card { /* Starts final CTA card styling. */
display: grid; /* Creates CTA grid. */
grid-template-columns: 1fr auto; /* Creates content and button columns. */
align-items: center; /* Vertically centers content. */
gap: 42px; /* Adds CTA gap. */
padding: 44px 50px; /* Adds premium CTA padding. */
border-radius: 32px; /* Rounds CTA card. */
background: radial-gradient(circle at 90% 22%, rgba(238, 157, 27, 0.18), transparent 28%), linear-gradient(135deg, var(--nq-primary), #182052); /* Adds navy-gold premium background. */
color: var(--nq-white); /* Uses white CTA text. */
box-shadow: var(--nq-shadow-card); /* Adds CTA shadow. */
} /* Ends final CTA card styling. */

.nq-final-cta-card h2 { /* Starts final CTA title styling. */
margin: 0 0 16px; /* Adds space below title. */
font-size: clamp(28px, 3vw, 39px); /* Sets responsive CTA title size. */
line-height: 1.12; /* Keeps title readable. */
letter-spacing: -0.04em; /* Adds premium title spacing. */
} /* Ends final CTA title styling. */

.nq-final-cta-card p:not(.nq-section-kicker) { /* Starts final CTA text styling. */
margin: 0; /* Removes paragraph margin. */
max-width: 790px; /* Controls CTA text width. */
color: rgba(255, 255, 255, 0.84); /* Uses soft white text. */
font-size: 15px; /* Sets CTA text size. */
} /* Ends final CTA text styling. */

.nq-final-cta-card__action { /* Starts final CTA action styling. */
display: flex; /* Aligns CTA button. */
justify-content: flex-end; /* Places button right. */
} /* Ends final CTA action styling. */

.nq-final-cta-card__action .nq-btn { /* Starts final CTA button styling. */
min-width: 150px; /* Keeps Contact Us button clean and readable. */
} /* Ends final CTA button styling. */

@media (max-width: 1200px) { /* Starts medium desktop responsive rules. */
.nq-home-hero__grid { /* Starts medium desktop hero grid styling. */
grid-template-columns: minmax(0, 1fr) minmax(390px, 0.9fr); /* Keeps hero balanced on smaller desktop screens. */
gap: 44px; /* Reduces hero gap on medium desktop. */
} /* Ends medium desktop hero grid styling. */

.nq-home-hero__title { /* Starts medium desktop hero title styling. */
font-size: clamp(42px, 5vw, 60px); /* Reduces hero title slightly on medium screens. */
} /* Ends medium desktop hero title styling. */

.nq-dashboard-card__main { /* Starts medium desktop dashboard layout styling. */
grid-template-columns: 150px 1fr; /* Reduces dashboard QR column slightly. */
} /* Ends medium desktop dashboard layout styling. */

.nq-dashboard-qr { /* Starts medium desktop QR styling. */
width: 148px; /* Reduces QR width on medium desktop. */
height: 148px; /* Reduces QR height on medium desktop. */
} /* Ends medium desktop QR styling. */
} /* Ends medium desktop responsive rules. */

@media (max-width: 1024px) { /* Starts tablet responsive rules. */
.nq-home-hero__grid { /* Starts tablet hero grid styling. */
grid-template-columns: 1fr; /* Stacks hero columns. */
gap: 44px; /* Reduces hero gap on tablet. */
} /* Ends tablet hero grid styling. */

.nq-home-hero__visual { /* Starts tablet hero visual styling. */
justify-self: start; /* Aligns visual with text on tablet. */
max-width: 680px; /* Controls visual width on tablet. */
} /* Ends tablet hero visual styling. */

.nq-dashboard-card { /* Starts tablet dashboard styling. */
transform: none; /* Removes dashboard tilt. */
} /* Ends tablet dashboard styling. */

.nq-feature-grid { /* Starts tablet feature grid styling. */
grid-template-columns: repeat(2, minmax(0, 1fr)); /* Shows two feature cards per row. */
} /* Ends tablet feature grid styling. */

.nq-workflow-grid { /* Starts tablet workflow grid styling. */
grid-template-columns: 1fr; /* Stacks workflow cards. */
} /* Ends tablet workflow grid styling. */

.nq-plan-grid { /* Starts tablet plan grid styling. */
grid-template-columns: 1fr; /* Stacks pricing cards on tablet for readability. */
} /* Ends tablet plan grid styling. */

.nq-plan-card--featured { /* Starts tablet featured plan styling. */
transform: none; /* Removes raised featured plan on tablet. */
} /* Ends tablet featured plan styling. */
} /* Ends tablet responsive rules. */

@media (max-width: 820px) { /* Starts mobile responsive rules. */
:root { /* Starts mobile design token override. */
--nq-page-edge: 14px; /* Reduces page edge spacing on mobile and tablet. */
} /* Ends mobile design token override. */

.nq-container { /* Starts mobile container styling. */
width: calc(100% - (var(--nq-page-edge) * 2)); /* Keeps mobile content away from screen edges. */
} /* Ends mobile container styling. */

.nq-home-hero { /* Starts mobile hero styling. */
padding: 58px 0 76px; /* Reduces mobile hero spacing. */
} /* Ends mobile hero styling. */

.nq-home-hero__title { /* Starts mobile hero title styling. */
font-size: clamp(38px, 12vw, 54px); /* Sets mobile title size. */
} /* Ends mobile hero title styling. */

.nq-home-hero__proof-grid { /* Starts mobile proof grid styling. */
grid-template-columns: 1fr; /* Stacks proof cards. */
} /* Ends mobile proof grid styling. */

.nq-dashboard-card__main { /* Starts mobile dashboard main styling. */
grid-template-columns: 1fr; /* Stacks QR and metrics. */
justify-items: center; /* Centers dashboard content. */
} /* Ends mobile dashboard main styling. */

.nq-dashboard-metrics { /* Starts mobile metrics styling. */
width: 100%; /* Makes metrics full width. */
} /* Ends mobile metrics styling. */

.nq-home-trust__grid { /* Starts mobile trust grid styling. */
grid-template-columns: 1fr; /* Stacks trust items. */
} /* Ends mobile trust grid styling. */

.nq-home-trust__item { /* Starts mobile trust item styling. */
border-right: 0; /* Removes right divider. */
border-bottom: 1px solid var(--nq-border); /* Adds bottom divider. */
} /* Ends mobile trust item styling. */

.nq-home-trust__item:last-child { /* Starts last mobile trust item styling. */
border-bottom: 0; /* Removes last divider. */
} /* Ends last mobile trust item styling. */

.nq-home-section { /* Starts mobile homepage section styling. */
padding: 58px 0; /* Keeps mobile sections compact and clean. */
} /* Ends mobile homepage section styling. */

.nq-home-section-heading--split { /* Starts mobile split heading styling. */
display: block; /* Stacks split heading. */
} /* Ends mobile split heading styling. */

.nq-home-section-heading--split .nq-text-link { /* Starts mobile split link styling. */
margin-top: 18px; /* Adds space above link. */
} /* Ends mobile split link styling. */

.nq-feature-grid { /* Starts mobile feature grid styling. */
grid-template-columns: 1fr; /* Stacks feature cards on mobile. */
} /* Ends mobile feature grid styling. */

.nq-final-cta-card { /* Starts mobile CTA card styling. */
grid-template-columns: 1fr; /* Stacks CTA content and button. */
gap: 24px; /* Reduces CTA gap. */
padding: 34px 26px; /* Reduces CTA padding. */
} /* Ends mobile CTA card styling. */

.nq-final-cta-card__action { /* Starts mobile CTA action styling. */
justify-content: flex-start; /* Aligns button left. */
} /* Ends mobile CTA action styling. */
} /* Ends mobile responsive rules. */

@media (max-width: 640px) { /* Starts small mobile rules. */
.nq-home-section { /* Starts small mobile section styling. */
padding: 54px 0; /* Reduces section spacing. */
} /* Ends small mobile section styling. */

.nq-feature-card, .nq-plan-card, .nq-workflow-card { /* Starts small mobile card padding styling. */
padding: 24px; /* Reduces card padding. */
} /* Ends small mobile card padding styling. */

.nq-dashboard-card { /* Starts small mobile dashboard styling. */
padding: 22px; /* Reduces dashboard padding. */
} /* Ends small mobile dashboard styling. */

.nq-dashboard-qr { /* Starts small mobile QR styling. */
width: 158px; /* Reduces QR width. */
height: 158px; /* Reduces QR height. */
} /* Ends small mobile QR styling. */
} /* Ends small mobile rules. */