/* =========================================================
   01. ROOT TOKENS
========================================================= */

   :root {
     --bg-obsidian: #071018;
     --card-deep: #101722;
     --neon-mint: #10b981;
     --text-slate: #a7b4c7;
   }


   /* =========================================================
   02. GLOBAL BASE
========================================================= */

   html {
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
   }

   body {
     background-color: var(--bg-obsidian);
     background-image: radial-gradient(circle at 50% -18%, #1a2436 0%, #0c1420 42%, var(--bg-obsidian) 82%);
     color: #f8fafc;
     font-family: 'Inter', sans-serif;
     overflow-x: hidden;
     line-height: 1.6;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

   section,
   div[id] {
     scroll-margin-top: 90px;
   }


   /* =========================================================
   03. LAYOUT
========================================================= */

   .bento-grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-auto-rows: minmax(140px, auto);
     gap: 1.5rem;
   }

   .bento-card {
     background: var(--card-deep);
     border: 1px solid rgba(255, 255, 255, 0.03);
     border-radius: 24px;
     padding: 2rem;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
   }

   .bento-card:hover {
     border-color: rgba(16, 185, 129, 0.3);
     transform: translateY(-5px);
     background: rgba(15, 18, 26, 0.9);
     box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
   }


   /* =========================================================
   04. MICRO UI
========================================================= */

   .glow-dot {
     width: 8px;
     height: 8px;
     background: var(--neon-mint);
     border-radius: 50%;
     box-shadow: 0 0 12px var(--neon-mint);
     display: inline-block;
     animation: pulse-glow 2s infinite;
   }

   @keyframes pulse-glow {
     0% {
       opacity: 1;
       transform: scale(1);
       box-shadow: 0 0 5px var(--neon-mint);
     }

     50% {
       opacity: 0.5;
       transform: scale(1.1);
       box-shadow: 0 0 15px var(--neon-mint);
     }

     100% {
       opacity: 1;
       transform: scale(1);
       box-shadow: 0 0 5px var(--neon-mint);
     }
   }

   .btn-primary {
     background: var(--neon-mint);
     color: #05070a;
     transition: all 0.3s ease;
     box-shadow: 0 4px 0 0 #065f46;
   }

   .btn-primary:hover {
     box-shadow: 0 2px 0 0 #065f46, 0 0 20px rgba(16, 185, 129, 0.3);
     transform: translateY(2px);
     filter: brightness(1.05);
   }

   .section-divider {
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
   }


   /* =========================================================
   05. NAV / MENU
========================================================= */

   nav a.active {
     color: var(--neon-mint) !important;
   }

   nav a.active::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 100%;
     height: 2px;
     background: var(--neon-mint);
     border-radius: 2px;
     box-shadow: 0 0 8px var(--neon-mint);
   }

   #mobile-menu {
     display: none;
     transform: translateY(-10px);
     transition: all 0.3s ease;
   }

   #mobile-menu.open {
     display: block;
     transform: translateY(0);
   }


   /* =========================================================
   06. FORM CONTROLS
========================================================= */

   input,
   select,
   textarea {
     accent-color: var(--neon-mint);
   }

   select {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 1rem center;
     background-size: 1rem;
   }

   select:focus {
     border-color: var(--neon-mint) !important;
     box-shadow: 0 0 0 1px var(--neon-mint) !important;
     outline: none;
   }

   select option {
     background-color: #0f121a;
     color: #f8fafc;
   }


   /* =========================================================
   07. SCROLLBARS
========================================================= */

   .no-scrollbar::-webkit-scrollbar {
     display: none;
   }

   .no-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }

   .modal-scroll::-webkit-scrollbar {
     width: 4px;
   }

   .modal-scroll::-webkit-scrollbar-thumb {
     background: rgba(16, 185, 129, 0.2);
     border-radius: 10px;
   }

   .modal-open {
     overflow: hidden;
   }

   #orderModal {
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
     align-items: center;
   }

   #modalCard {
     width: min(100%, 860px);
     max-height: calc(100dvh - 2rem);
     margin: auto;
     overscroll-behavior: contain;
     box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
   }

   #snapshotRequestForm {
     padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
   }

   #snapshotRequestForm > div:last-child {
     position: sticky;
     bottom: 0;
     background: linear-gradient(180deg, rgba(15, 18, 26, 0) 0%, rgba(15, 18, 26, 0.92) 16%, rgba(15, 18, 26, 0.98) 100%);
     backdrop-filter: blur(12px);
     margin-left: -0.25rem;
     margin-right: -0.25rem;
     padding-left: 0.25rem;
     padding-right: 0.25rem;
     padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
   }


   /* =========================================================
   08. TABS / SAMPLE INTERACTIONS
========================================================= */

   .tab-btn.active {
     color: var(--neon-mint);
     border-bottom-color: var(--neon-mint);
   }

   .tab-content {
     opacity: 1;
     transform: translateX(0);
   }

   .tab-content.tab-enter-right,
   .sample-panel.sample-enter-right {
     animation: slideFadeInRight 0.28s ease both;
   }

   .tab-content.tab-enter-left,
   .sample-panel.sample-enter-left {
     animation: slideFadeInLeft 0.28s ease both;
   }

   @keyframes slideFadeInRight {
     from {
       opacity: 0;
       transform: translateX(22px);
     }

     to {
       opacity: 1;
       transform: translateX(0);
     }
   }

   @keyframes slideFadeInLeft {
     from {
       opacity: 0;
       transform: translateX(-22px);
     }

     to {
       opacity: 1;
       transform: translateX(0);
     }
   }

   .sample-panel {
     display: none;
   }

   .sample-panel.active {
     display: block;
   }

   .sample-tier-btn.active {
     color: var(--neon-mint);
     border-color: rgba(16, 185, 129, 0.4);
     background: rgba(16, 185, 129, 0.08);
   }

   .sample-nav-btn {
     width: 42px;
     height: 42px;
     border-radius: 999px;
     border: 1px solid rgba(16, 185, 129, 0.16);
     background: rgba(16, 185, 129, 0.05);
     color: #34d399;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: all 0.25s ease;
   }

   .sample-nav-btn:hover {
     background: rgba(16, 185, 129, 0.12);
     border-color: rgba(16, 185, 129, 0.28);
   }

   .sample-nav-btn:disabled {
     opacity: 0.35;
     cursor: not-allowed;
   }


   /* =========================================================
   09. SAMPLE / DEMO CONTENT
========================================================= */

   .sample-tier-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     font-size: 10px;
     line-height: 1;
     text-transform: uppercase;
     letter-spacing: 0.14em;
     font-weight: 800;
     padding: 0.55rem 0.75rem;
     border-radius: 999px;
     border: 1px solid rgba(16, 185, 129, 0.2);
     background: rgba(16, 185, 129, 0.08);
     color: #34d399;
   }

   .sample-metric-card {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.07);
     border-radius: 20px;
     padding: 1rem;
   }

   .sample-metric-card h6 {
     color: #f8fafc;
     font-weight: 700;
     margin-bottom: 0.5rem;
     font-size: 0.95rem;
     line-height: 1.35;
   }

   .sample-metric-card p {
     color: #94a3b8;
     font-size: 14px;
     line-height: 1.65;
   }

   .sample-next-step {
     background: rgba(16, 185, 129, 0.06);
     border: 1px solid rgba(16, 185, 129, 0.16);
     border-radius: 20px;
     padding: 1rem;
   }

   .sample-next-step strong {
     color: #f8fafc;
     display: block;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     margin-bottom: 0.4rem;
   }

   .sample-next-step p {
     color: #cbd5e1;
     font-size: 14px;
     line-height: 1.65;
   }

   .sample-tier-note {
     color: #10b981;
     font-size: 13px;
     line-height: 1.6;
     font-weight: 600;
     border-top: 1px solid rgba(255, 255, 255, 0.06);
     padding-top: 1rem;
   }

   .demo-mobile-status,
   .sample-mobile-status {
     display: none;
   }

   .demo-mobile-status__top,
   .sample-mobile-status__top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     margin-bottom: 0.6rem;
   }

   .demo-mobile-status__label,
   .sample-mobile-status__label {
     font-size: 11px;
     font-weight: 800;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: #e2e8f0;
   }

   .demo-mobile-status__hint,
   .sample-mobile-status__hint {
     font-size: 11px;
     color: #94a3b8;
     white-space: nowrap;
   }

   .demo-mobile-dots,
   .sample-mobile-dots {
     display: flex;
     align-items: center;
     gap: 0.45rem;
   }

   .demo-mobile-dot,
   .sample-mobile-dot {
     width: 8px;
     height: 8px;
     border-radius: 999px;
     background: rgba(148, 163, 184, 0.35);
     transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
     opacity: 0.8;
   }

   .demo-mobile-dot.is-active,
   .sample-mobile-dot.is-active {
     background: rgba(16, 185, 129, 0.95);
     transform: scale(1.12);
     opacity: 1;
   }

   /* =========================================================
   10. MAIN PAGE READABILITY BUMP
========================================================= */

   #hero p,
   #lens p,
   #demos p,
   #sample p,
   #faq p,
   #what-it-is p,
   #pricing p,
   #footer p {
     font-size: calc(1em + 1px);
   }


   /* =========================================================
   11. LANDING PAGE UX LAYOUT TUNING
========================================================= */

   #hero {
     max-width: 1100px;
     margin-left: auto;
     margin-right: auto;
   }

   #hero h1 {
     letter-spacing: -0.045em;
   }

   #hero h1 > span {
     max-width: 980px;
     margin-left: auto;
     margin-right: auto;
     font-size: clamp(1.55rem, 3.2vw, 3.55rem) !important;
     line-height: 1.08;
   }

   #hero p {
     max-width: 920px;
   }

   #hero ul {
     max-width: 860px;
     padding: 1.2rem 1.25rem;
     border-radius: 24px;
     border: 1px solid rgba(255, 255, 255, 0.06);
     background: rgba(15, 18, 26, 0.5);
     backdrop-filter: blur(10px);
   }

   #hero ul li {
     line-height: 1.55;
   }

   #hero .btn-primary,
   #hero a[href="#sample"] {
     min-height: 60px;
   }

   #benefits {
     align-items: start;
   }

   #benefits > div:first-child > div {
     display: grid;
     gap: 1rem;
   }

   #benefits > div:first-child > div > div {
     padding: 1.35rem;
     border-radius: 24px;
     border: 1px solid rgba(255, 255, 255, 0.06);
     background: rgba(15, 18, 26, 0.58);
     box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
   }

   #benefits > div:last-child {
     background: linear-gradient(180deg, rgba(16, 185, 129, 0.07), rgba(15, 18, 26, 0.96));
     box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2);
   }

   #sample > div {
     overflow: hidden;
   }

   #pricing .bento-card {
     min-height: 100%;
   }

   #pricing .bento-card ul li {
     align-items: flex-start;
     line-height: 1.55;
   }

   #pricing .bento-card p {
     font-size: 0.92rem;
   }

   #pricing-signal-note,
   #hero-pilot-msg,
   #pilot-deadline-date,
   #countdown-timer {
     letter-spacing: 0.08em;
   }

   @media (min-width: 1025px) {
     #benefits > div:last-child {
       position: sticky;
       top: 108px;
     }
   }

   @media (min-width: 700px) and (max-width: 1024px) {
     #benefits {
       grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
       gap: 1.35rem;
     }

     #benefits > div:last-child {
       position: sticky;
       top: 96px;
       padding: 1.4rem;
       border-radius: 26px;
     }

     #sample > div > div:first-child {
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
       gap: 1rem 1.25rem;
       align-items: start;
     }

     #sample > div > div:first-child .order-1 {
       grid-column: 1;
       grid-row: 1;
     }

     #sample > div > div:first-child .order-2 {
       grid-column: 1;
       grid-row: 2;
       justify-self: start;
     }

     #sample > div > div:first-child .order-3 {
       grid-column: 2;
       grid-row: 1 / span 2;
       align-self: stretch;
       justify-content: center;
     }

     #sample > div > div:first-child .order-3 .sample-tier-btn {
       width: 100%;
       text-align: left;
     }

     #orderModal {
       padding-top: 1rem;
       padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
       align-items: flex-start;
     }

     #modalCard {
       max-height: calc(100dvh - 2rem);
       margin-top: 0.5rem;
       margin-bottom: 0.5rem;
     }
   }


   /* =========================================================
   12. WRITING ARCHIVE - BASE
========================================================= */

   .writing-page-shell {
     width: 100%;
     overflow-x: clip;
   }

   .writing-top-grid {
     align-items: stretch;
   }

   .writing-top-card {
     position: relative;
     z-index: 1;
     min-width: 0;
   }

   .writing-hero-card,
   .author-identity-card,
   .writing-controls-card,
   .writing-card,
   .writing-feature-card {
     background: var(--card-deep);
     background-image: none;
   }

   .writing-hero-layout {
     min-height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: 2rem;
   }

   .writing-stats-grid {
     margin-top: auto;
   }

   .writing-stat-card {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
     border-radius: 20px;
     padding: 1rem;
     background: rgba(255, 255, 255, 0.035);
     border: 1px solid rgba(255, 255, 255, 0.06);
   }

   .writing-stat-number {
     color: #f8fafc;
     font-size: 1.6rem;
     font-weight: 800;
     line-height: 1;
   }

   .writing-stat-label {
     color: #cbd5e1;
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     font-weight: 700;
   }


   /* =========================================================
   13. WRITING ARCHIVE - AUTHOR BLOCK
========================================================= */

   .author-identity-card .space-y-5 {
     height: 100%;
   }

   .author-portrait-shell {
     display: grid;
     gap: 0.9rem;
     min-width: 0;
     margin-top: 0.75rem;
   }

   .author-portrait-frame {
     position: relative;
     display: block;
     width: 100%;
     min-height: 220px;
     max-height: none;
     border-radius: 22px;
     overflow: hidden;
     background-color: rgba(255, 255, 255, 0.03);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center 18%;
     border: 1px solid rgba(255, 255, 255, 0.06);
   }

   .author-portrait-overlay {
     position: absolute;
     inset: 0;
     background: none;
   }

   .author-portrait-overlay::before {
     content: none;
   }

   /* =========================================================
   14. WRITING ARCHIVE - FILTERS / SEARCH
========================================================= */

   .writing-controls-card {
     padding: 1.5rem;
     overflow: hidden;
   }

   .writing-search-wrap {
     position: relative;
   }

   .writing-search-input {
     width: 100%;
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: #f8fafc;
     padding: 0.95rem 1rem;
     font-size: 15px;
     line-height: 1.45;
   }

   .writing-search-input::placeholder {
     color: #64748b;
   }

   .writing-search-input:focus {
     outline: none;
     border-color: rgba(16, 185, 129, 0.5);
     box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.45);
   }

   .writing-filter-row {
     display: flex;
     gap: 0.75rem;
     overflow-x: auto;
     max-width: 100%;
     padding-bottom: 0.2rem;
     overscroll-behavior-x: contain;
     align-items: center;
   }

   @media (min-width: 1024px) {
     .writing-filter-row {
       flex-wrap: wrap;
       overflow-x: visible;
       padding-bottom: 0;
     }
   }

   .writing-filter-pill {
     flex: 0 0 auto;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     background: rgba(255, 255, 255, 0.035);
     color: #cbd5e1;
     padding: 0.8rem 1rem;
     font-size: 12px;
     line-height: 1;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     transition: all 0.2s ease;
     white-space: nowrap;
   }

   .writing-filter-pill:hover {
     color: #f8fafc;
     background: rgba(255, 255, 255, 0.06);
   }

   .writing-filter-pill.is-active {
     color: #10b981;
     border-color: rgba(16, 185, 129, 0.35);
     background: rgba(16, 185, 129, 0.08);
     box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15) inset;
   }


   /* =========================================================
   15. WRITING ARCHIVE - CARDS
========================================================= */

   .writing-card,
   .writing-feature-card {
     display: flex;
     flex-direction: column;
     gap: 1.35rem;
     border-radius: 24px;
     padding: 1.1rem;
     background: #0f121a;
     border: 1px solid rgba(255, 255, 255, 0.08);
     box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
     transition:
       transform 0.25s ease,
       border-color 0.25s ease,
       background 0.25s ease,
       opacity 0.25s ease;
     min-width: 0;
   }

   .writing-card:hover,
   .writing-feature-card:hover {
     transform: translateY(-4px);
     border-color: rgba(16, 185, 129, 0.22);
     background: rgba(15, 18, 26, 0.98);
   }

   .writing-card.is-hidden {
     display: none !important;
   }

   .writing-thumb {
     min-height: 158px;
     border-radius: 16px;
     overflow: hidden;
     position: relative;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
     border: 1px solid rgba(255, 255, 255, 0.05);
   }

   .writing-thumb.has-image {
     background-size: cover;
     background-position: center;
   }

   .writing-thumb-inner {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 1rem;
   }

   .writing-thumb-lines {
     display: flex;
     flex-direction: column;
     gap: 0.45rem;
   }

   .writing-thumb-lines span {
     display: block;
     height: 8px;
     border-radius: 999px;
     background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
     opacity: 0.65;
   }

   .writing-thumb-lines span:nth-child(1) {
     width: 72%;
   }

   .writing-thumb-lines span:nth-child(2) {
     width: 88%;
   }

   .writing-thumb-lines span:nth-child(3) {
     width: 52%;
   }

   .writing-tag {
     display: inline-flex;
     align-items: center;
     border-radius: 999px;
     padding: 0.45rem 0.7rem;
     background: rgba(16, 185, 129, 0.08);
     border: 1px solid rgba(16, 185, 129, 0.18);
     color: #34d399;
     font-size: 10px;
     line-height: 1;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     font-weight: 800;
   }

   .writing-meta {
     color: #cbd5e1;
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     font-weight: 700;
   }

   .writing-cta-link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 44px;
     border-radius: 12px;
     padding: 0.85rem 0.95rem;
     background: rgba(16, 185, 129, 0.08);
     border: 1px solid rgba(16, 185, 129, 0.22);
     color: #6ee7b7;
     font-size: 13px;
     line-height: 1.1;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     transition: all 0.2s ease;
   }

   .writing-cta-link:hover {
     background: rgba(16, 185, 129, 0.14);
     border-color: rgba(16, 185, 129, 0.34);
     color: #6ee7b7;
   }


   /* =========================================================
   16. WRITING ARCHIVE - BRANDED PLACEHOLDER THUMBS
========================================================= */

   .writing-brand-thumb {
     position: relative;
     isolation: isolate;
     background: linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(11, 16, 24, 0.96));
     overflow: hidden;
   }

   .writing-brand-thumb::before,
   .writing-brand-thumb::after {
     content: '';
     position: absolute;
     border-radius: 999px;
     pointer-events: none;
     opacity: 0.28;
     filter: blur(1px);
   }

   .writing-brand-thumb::before {
     width: 96px;
     height: 96px;
     right: -18px;
     top: -18px;
   }

   .writing-brand-thumb::after {
     width: 58px;
     height: 58px;
     left: -14px;
     bottom: -16px;
   }

   .writing-brand-overlay {
     position: absolute;
     inset: 0;
     background:
       linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 32%),
       linear-gradient(180deg, rgba(5, 7, 10, 0.02), rgba(5, 7, 10, 0.1));
   }

   .writing-brand-thumb .writing-thumb-inner::before {
     content: '';
     position: absolute;
     top: 14px;
     left: 14px;
     width: 48px;
     height: 3px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.14);
   }

   .writing-brand-topline {
     width: 62px;
     height: 4px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.16);
   }

   .writing-brand-center {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 0.55rem;
     padding: 0.45rem 0;
   }

   .writing-brand-mark {
     width: 42px;
     height: 42px;
     border-radius: 14px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.08);
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
   }

   .writing-brand-mark img {
     width: 22px;
     height: 22px;
     object-fit: contain;
   }

   .writing-brand-text {
     color: #f8fafc;
     font-size: 10px;
     line-height: 1;
     text-transform: uppercase;
     letter-spacing: 0.16em;
     font-weight: 800;
     opacity: 0.9;
   }


   /* =========================================================
   17. WRITING ARCHIVE - CATEGORY COLOUR VARIANTS
========================================================= */

   .writing-brand-thumb--frameworks {
     background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(12, 18, 30, 0.94));
     border-color: rgba(59, 130, 246, 0.22);
     box-shadow: inset 0 1px 0 rgba(96, 165, 250, 0.08);
   }

   .writing-brand-thumb--frameworks::before,
   .writing-brand-thumb--frameworks::after {
     background: radial-gradient(circle, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.02) 65%, transparent 72%);
   }

   .writing-brand-thumb--frameworks .writing-thumb-inner::before {
     background: rgba(96, 165, 250, 0.8);
   }

   .writing-brand-thumb--pattern-analysis {
     background: linear-gradient(180deg, rgba(20, 23, 31, 0.96), rgba(14, 18, 24, 0.94));
     border-color: rgba(244, 114, 182, 0.2);
     box-shadow: inset 0 1px 0 rgba(244, 114, 182, 0.07);
   }

   .writing-brand-thumb--pattern-analysis::before,
   .writing-brand-thumb--pattern-analysis::after {
     background: radial-gradient(circle, rgba(244, 114, 182, 0.16), rgba(244, 114, 182, 0.02) 65%, transparent 72%);
   }

   .writing-brand-thumb--pattern-analysis .writing-thumb-inner::before {
     background: rgba(244, 114, 182, 0.8);
   }

   .writing-brand-thumb--case-reading {
     background: linear-gradient(180deg, rgba(25, 22, 20, 0.96), rgba(17, 14, 12, 0.94));
     border-color: rgba(251, 146, 60, 0.22);
     box-shadow: inset 0 1px 0 rgba(251, 146, 60, 0.07);
   }

   .writing-brand-thumb--case-reading::before,
   .writing-brand-thumb--case-reading::after {
     background: radial-gradient(circle, rgba(251, 146, 60, 0.16), rgba(251, 146, 60, 0.02) 65%, transparent 72%);
   }

   .writing-brand-thumb--case-reading .writing-thumb-inner::before {
     background: rgba(251, 146, 60, 0.8);
   }

   .writing-brand-thumb--workforce-safety {
     background: linear-gradient(180deg, rgba(10, 18, 28, 0.96), rgba(8, 14, 22, 0.94));
     border-color: rgba(16, 185, 129, 0.24);
     box-shadow: inset 0 1px 0 rgba(52, 211, 153, 0.08);
   }

   .writing-brand-thumb--workforce-safety::before,
   .writing-brand-thumb--workforce-safety::after {
     background: radial-gradient(circle, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.02) 65%, transparent 72%);
   }

   .writing-brand-thumb--workforce-safety .writing-thumb-inner::before {
     background: rgba(52, 211, 153, 0.9);
   }

   .writing-brand-thumb--safeguarding {
     background: linear-gradient(180deg, rgba(29, 20, 24, 0.96), rgba(18, 12, 15, 0.94));
     border-color: rgba(239, 68, 68, 0.22);
     box-shadow: inset 0 1px 0 rgba(248, 113, 113, 0.08);
   }

   .writing-brand-thumb--safeguarding::before,
   .writing-brand-thumb--safeguarding::after {
     background: radial-gradient(circle, rgba(239, 68, 68, 0.16), rgba(239, 68, 68, 0.02) 65%, transparent 72%);
   }

   .writing-brand-thumb--safeguarding .writing-thumb-inner::before {
     background: rgba(248, 113, 113, 0.85);
   }

   .writing-brand-thumb--governance {
     background: linear-gradient(180deg, rgba(16, 20, 30, 0.96), rgba(12, 15, 24, 0.94));
     border-color: rgba(14, 165, 233, 0.22);
     box-shadow: inset 0 1px 0 rgba(56, 189, 248, 0.08);
   }

   .writing-brand-thumb--governance::before,
   .writing-brand-thumb--governance::after {
     background: radial-gradient(circle, rgba(14, 165, 233, 0.16), rgba(14, 165, 233, 0.02) 65%, transparent 72%);
   }

   .writing-brand-thumb--governance .writing-thumb-inner::before {
     background: rgba(56, 189, 248, 0.85);
   }

   .writing-brand-thumb--external-risk-insight {
     background: linear-gradient(180deg, rgba(18, 25, 22, 0.96), rgba(12, 18, 16, 0.94));
     border-color: rgba(45, 212, 191, 0.22);
     box-shadow: inset 0 1px 0 rgba(45, 212, 191, 0.08);
   }

   .writing-brand-thumb--external-risk-insight::before,
   .writing-brand-thumb--external-risk-insight::after {
     background: radial-gradient(circle, rgba(45, 212, 191, 0.16), rgba(45, 212, 191, 0.02) 65%, transparent 72%);
   }

   .writing-brand-thumb--external-risk-insight .writing-thumb-inner::before {
     background: rgba(45, 212, 191, 0.85);
   }


   /* =========================================================
   18. TABLET / FOLD OPEN STATE
========================================================= */

   @media (min-width: 700px) and (max-width: 1024px) {
     .author-identity-card .space-y-5 {
       display: grid !important;
       grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
       gap: 1.1rem !important;
       align-items: stretch;
     }

     .author-identity-card .space-y-3 {
       display: flex;
       flex-direction: column;
       justify-content: center;
       min-width: 0;
     }

     .author-portrait-shell {
       margin-top: 0 !important;
       height: 100%;
     }

     .author-portrait-frame {
       min-height: 100% !important;
       height: 100%;
       max-height: none !important;
       background-position: center 20% !important;
     }
   }


   /* =========================================================
   19. MOBILE
========================================================= */

   .mobile-sticky-cta {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 120;
     pointer-events: none;
     opacity: 0;
     transform: translateY(18px);
     transition: opacity 0.22s ease, transform 0.22s ease;
     padding: 0 0.9rem calc(env(safe-area-inset-bottom) + 0.9rem);
     display: block;
   }

   .mobile-sticky-cta.is-visible {
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
   }

   .mobile-sticky-cta__inner {
     max-width: 640px;
     margin: 0 auto;
     border-radius: 20px;
     background: rgba(7, 16, 24, 0.92);
     backdrop-filter: blur(14px);
     border: 1px solid rgba(16, 185, 129, 0.16);
     box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
     padding: 0.7rem;
   }

   .mobile-sticky-cta__button {
     width: 100%;
     border: 0;
     border-radius: 14px;
     background: linear-gradient(135deg, #10b981, #34d399);
     color: #03120d;
     font-size: 12px;
     font-weight: 900;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     padding: 1rem 1.1rem;
     box-shadow: 0 12px 26px rgba(16, 185, 129, 0.24);
   }

   @media (min-width: 1280px) {
     .mobile-sticky-cta {
       display: none !important;
     }
   }

   @media (max-width: 768px) {
     body {
       background-image: radial-gradient(circle at 50% -10%, #202c40 0%, #101927 42%, #071018 84%);
       padding-bottom: calc(env(safe-area-inset-bottom) + 5.6rem);
     }

     p,
     li {
       line-height: 1.7;
     }

     p {
       font-size: 13px;
     }

     .bento-grid {
       display: flex;
       flex-direction: column;
     }

     h1 {
       font-size: 2.6rem !important;
       letter-spacing: -0.035em;
     }

     h2 {
       font-size: 2rem !important;
       line-height: 1.2 !important;
     }

     h3 {
       font-size: 1.25rem !important;
     }

     .pricing-highlight {
       transform: none !important;
       margin-top: 1rem;
       margin-bottom: 1rem;
     }

     .bento-card {
       padding: 1.5rem;
       border-radius: 20px;
     }

     section {
       margin-bottom: 4rem !important;
     }

     #hero {
       padding-top: 0.75rem !important;
       margin-bottom: 3rem !important;
     }

     #hero h1 {
       font-size: clamp(2.65rem, 12vw, 4rem) !important;
       line-height: 0.98 !important;
       margin-bottom: 1rem !important;
     }

     #hero h1 > span {
       font-size: 1.2rem !important;
       line-height: 1.24 !important;
       margin-top: 0.85rem !important;
       max-width: 100%;
     }

     #hero p {
       font-size: 1rem !important;
       line-height: 1.62 !important;
       margin-bottom: 1.1rem !important;
     }

     #hero ul {
       padding: 1rem 1rem 1rem 0.9rem;
       margin-bottom: 1.25rem !important;
       gap: 0.85rem;
       border-radius: 20px;
     }

     #hero ul li span:last-child {
       font-size: 0.98rem;
     }

     #hero .flex.flex-col.sm\:flex-row {
       gap: 0.85rem !important;
     }

     #hero .btn-primary,
     #hero a[href="#sample"] {
       font-size: 1.02rem !important;
       padding: 1rem 1.25rem !important;
       min-height: 56px;
     }

     #hero p,
     #benefits,
     #demos,
     #sample,
     #faq,
     #what-it-is,
     #pricing {
       transform: translateY(-2px);
     }

     #benefits > div:first-child > div > div {
       padding: 1.1rem;
       border-radius: 20px;
     }

     #benefits > div:last-child {
       padding: 1.2rem !important;
       border-radius: 22px;
     }

     #sample > div > div:first-child {
       gap: 0.9rem;
     }

     #sample > div > div:first-child .order-2 {
       order: 2;
     }

     #sample > div > div:first-child .order-3 {
       order: 3;
     }

     #pricing .bento-card p {
       font-size: 0.88rem !important;
     }

     #pricing-signal-note {
       font-size: 10px !important;
     }

     #hero-pilot-msg {
       font-size: 10px !important;
       margin-top: 0.85rem !important;
     }

     #orderModal {
       padding: 0.75rem;
       align-items: flex-start;
     }

     #modalCard {
       width: 100%;
       max-height: calc(100dvh - 1rem);
       border-radius: 24px;
     }

     #snapshotRequestForm {
       padding-bottom: calc(env(safe-area-inset-bottom) + 0.9rem);
     }

     .mobile-lift {
       transform: translateY(-4px);
     }

     .mobile-tight {
       margin-top: -0.25rem;
     }

     .tab-btn {
       font-size: 0.75rem !important;
       line-height: 1.3;
       padding-top: 1rem !important;
       padding-bottom: 1rem !important;
     }

     .sample-tier-btn {
       font-size: 0.75rem !important;
     }

     .sample-metric-card p,
     .sample-next-step p {
       font-size: 0.95rem;
     }

     .writing-page-shell {
       padding-top: 1.25rem !important;
       padding-bottom: 3rem !important;
     }

     .writing-top-grid {
       display: grid !important;
       grid-template-columns: 1fr !important;
       gap: 1rem !important;
       align-items: stretch;
     }

     .writing-top-grid > .writing-top-card {
       width: 100%;
       min-width: 0;
     }

     .writing-hero-card,
     .author-identity-card,
     .writing-controls-card,
     .writing-card,
     .writing-feature-card {
       padding: 1rem !important;
       border-radius: 18px !important;
     }

     .writing-hero-layout {
       gap: 1.15rem;
     }

     .writing-hero-layout h1,
     .writing-hero-card h1 {
       font-size: 2rem !important;
       line-height: 1.06 !important;
       letter-spacing: -0.03em;
     }

     .author-identity-card h2,
     #featured-writing-title,
     #archive-controls-title,
     #all-writing-title {
       font-size: 1.4rem !important;
       line-height: 1.18 !important;
     }

     .writing-hero-layout p,
     .writing-hero-card p,
     .author-identity-card p,
     .writing-card p,
     .writing-feature-card p,
     #writing-results-count {
       font-size: 0.96rem !important;
       line-height: 1.6 !important;
       color: #e2e8f0 !important;
     }

     .writing-stats-grid {
       display: grid;
       grid-template-columns: 1fr !important;
       gap: 0.75rem !important;
       margin-top: 0;
       padding-top: 0.25rem !important;
     }

     .writing-stat-card {
       padding: 0.95rem 1rem !important;
     }

     .writing-stat-number {
       font-size: 1.5rem !important;
     }

     .writing-stat-label {
       font-size: 12px !important;
       color: #cbd5e1 !important;
     }

     .author-identity-card .space-y-5 {
       display: flex !important;
       flex-direction: column;
       gap: 1rem !important;
       justify-content: flex-start !important;
       height: auto !important;
     }

     .author-portrait-frame {
       min-height: 170px !important;
       max-height: none !important;
       width: 100%;
       border-radius: 18px !important;
       background-position: center 16% !important;
     }

     .writing-filter-row {
       gap: 0.55rem !important;
       padding-bottom: 0.2rem !important;
       scroll-padding-left: 0.25rem;
     }

     .writing-filter-pill {
       font-size: 11px !important;
       padding: 0.75rem 0.85rem !important;
     }

     .writing-search-input {
       font-size: 16px !important;
     }

     .writing-card,
     .writing-feature-card {
       gap: 0.85rem !important;
       border: 1px solid rgba(255, 255, 255, 0.1) !important;
       box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
     }

     .writing-thumb {
       min-height: 118px !important;
       border-radius: 14px !important;
     }

     .writing-brand-thumb::before {
       width: 72px;
       height: 72px;
       right: -12px;
       top: -10px;
       opacity: 0.22;
     }

     .writing-brand-thumb::after {
       width: 40px;
       height: 40px;
       left: -10px;
       bottom: -10px;
       opacity: 0.16;
     }

     .writing-brand-mark {
       width: 34px;
       height: 34px;
       border-radius: 11px;
     }

     .writing-brand-mark img {
       width: 18px;
       height: 18px;
     }

     .writing-brand-text {
       font-size: 9px;
       letter-spacing: 0.14em;
     }

     .writing-thumb-lines {
       display: none;
     }

     .writing-card h3,
     .writing-feature-card h3 {
       font-size: 1.15rem !important;
       line-height: 1.28 !important;
     }

     .writing-meta,
     .writing-tag {
       font-size: 11px !important;
     }

     .writing-card .flex.items-center.justify-between,
     .writing-feature-card .flex.items-center.justify-between {
       flex-direction: row !important;
       align-items: center !important;
       justify-content: space-between !important;
       gap: 0.75rem !important;
       flex-wrap: wrap;
     }

     .writing-cta-link {
       width: auto !important;
       min-width: 140px;
       justify-content: center;
       padding: 0.8rem 0.95rem !important;
       font-size: 13px !important;
     }
   }

   /* =========================================================
   20. WRITING ARCHIVE - AUTHOR CONTEXT TABLET SPLIT
========================================================= */

   @media (min-width: 700px) and (max-width: 1180px) {
     #pricing .grid {
       gap: 1.15rem;
     }

     #pricing .pricing-highlight {
       transform: none !important;
     }

     #pricing .bento-card {
       padding: 1.4rem;
       border-radius: 22px;
     }

     #pricing .bento-card h4 {
       font-size: 1.1rem;
     }

     #pricing .bento-card ul {
       margin-bottom: 1.5rem;
     }
   }

   /* =========================================================
   21. WRITING ARCHIVE - AUTHOR CONTEXT TABLET SPLIT
========================================================= */

   @media (min-width: 700px) and (max-width: 1024px) {
     .author-identity-card .space-y-5 {
       display: grid !important;
       grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
       gap: 1.2rem !important;
       align-items: stretch;
       height: auto !important;
     }

     .author-identity-card .space-y-3 {
       display: flex;
       flex-direction: column;
       justify-content: center;
       min-width: 0;
     }

     .author-portrait-shell {
       margin-top: 0 !important;
       height: 100%;
       display: block;
     }

     .author-portrait-frame {
       height: 100%;
       min-height: 100%;
       max-height: none !important;
       background-position: center 20% !important;
     }
   }

   /* =========================================================
   22. Thumbnail?
========================================================= */

   .writing-thumb.has-image {
     position: relative;
     overflow: hidden;
     background: #0f121a;
     aspect-ratio: 16 / 9;
   }

   .writing-thumb-image {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     object-position: center;
   }

   /* =========================================================
   23. WRITING ARCHIVE - CATEGORY TAG COLOURS
========================================================= */

   .writing-tag--frameworks {
     background: rgba(59, 130, 246, 0.10);
     border-color: rgba(96, 165, 250, 0.28);
     color: #93c5fd;
   }

   .writing-tag--pattern-analysis {
     background: rgba(244, 114, 182, 0.10);
     border-color: rgba(244, 114, 182, 0.24);
     color: #f9a8d4;
   }

   .writing-tag--case-reading {
     background: rgba(251, 146, 60, 0.10);
     border-color: rgba(251, 146, 60, 0.24);
     color: #fdba74;
   }

   .writing-tag--workforce-safety {
     background: rgba(16, 185, 129, 0.10);
     border-color: rgba(52, 211, 153, 0.24);
     color: #6ee7b7;
   }

   .writing-tag--safeguarding {
     background: rgba(239, 68, 68, 0.10);
     border-color: rgba(248, 113, 113, 0.24);
     color: #fca5a5;
   }

   .writing-tag--governance {
     background: rgba(14, 165, 233, 0.10);
     border-color: rgba(56, 189, 248, 0.24);
     color: #7dd3fc;
   }

   .writing-tag--external-risk-insight {
     background: rgba(45, 212, 191, 0.10);
     border-color: rgba(45, 212, 191, 0.24);
     color: #99f6e4;
   }


   /* =========================================================
   24. WRITING ARCHIVE - IMAGE THUMBS
========================================================= */

   /* Image thumb rules consolidated in section 22 to preserve reserved height and prevent column jump. */



   /* =========================================================
   25. WRITING ARCHIVE - DESKTOP MASONRY
========================================================= */

   #writing-grid.writing-masonry {
     column-gap: 1.25rem;
     column-fill: balance;
   }

   #writing-grid.writing-masonry > .writing-masonry-item {
     display: inline-flex;
     flex-direction: column;
     width: 100%;
     margin: 0 0 1.25rem;
     break-inside: avoid;
     break-inside: avoid-column;
     -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
     vertical-align: top;
   }

   @media (min-width: 1280px) {
     #writing-grid.writing-masonry {
       column-count: 3;
     }
   }

   @media (min-width: 700px) and (max-width: 1279px) {
     #writing-grid.writing-masonry {
       column-count: 2;
     }
   }

   @media (max-width: 699px) {
     #writing-grid.writing-masonry {
       column-count: 1;
     }

     #writing-grid.writing-masonry > .writing-masonry-item {
       margin-bottom: 1rem;
     }
   }