/* Design CSS (native) that mirrors docs-based layout without Tailwind runtime */
:root{
  --primary-navy:#0A1628;
  --primary-navy-light:#1A2D4A;
  --secondary-gray-dark:#2D3748;
  --secondary-gray-medium:#4A5568;
  --secondary-gray-light:#E2E8F0;
  --accent-orange:#F97316;
  --accent-blue:#3B82F6;
  --background-dark:#0A1628;
  --background-light:#F1F5F9;
  --background-subtle:#F8FAFC;
  --text-primary:#1A202C;
  --text-secondary:#4A5568;
  --text-inverse:#FFFFFF;
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text-primary);
  background:var(--background-light);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%;display:block}

/* Legacy helpers (older templates) */
.section{padding:1.25rem 0}
.muted{color:var(--secondary-gray-medium)}
.card{background:#fff;border:1px solid var(--secondary-gray-light);border-radius:.75rem;padding:1.25rem}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:.5rem;padding:.625rem 1rem;border:2px solid transparent;transition:all 200ms ease-in-out}
.btn-cta{background:var(--accent-orange);color:#fff}
.btn-cta:hover{background:#EA580C}
.alert{border:1px solid var(--secondary-gray-light);background:#fff;border-radius:.75rem;padding:1rem}
.alert-error{border-color:#FCA5A5;color:#B91C1C;background:#FEF2F2}

/* Layout */
.container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
.max-w-container{max-width:1280px}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-md{max-width:28rem}
.mx-auto{margin-left:auto;margin-right:auto}
.min-h-screen{min-height:100vh}
.relative{position:relative}
.absolute{position:absolute}
.inset-0{top:0;right:0;bottom:0;left:0}
.right-0{right:0}
.top-0{top:0}
.z-10{z-index:10}
.z-50{z-index:50}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.hidden{display:none}
.block{display:block}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.flex{display:flex}
.grid{display:grid}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}
.flex-shrink-0{flex-shrink:0}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.text-left{text-align:left}
.text-center{text-align:center}
.w-full{width:100%}
.w-1\/3{width:33.333333%}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-10{width:2.5rem}
.w-12{width:3rem}
.w-16{width:4rem}
.w-52{width:13rem}
.h-full{height:100%}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-9{height:2.25rem}
.h-10{height:2.5rem}
.h-12{height:3rem}
.h-16{height:4rem}

/* Spacing */
.p-1{padding:.25rem}
.p-2{padding:.5rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.m-0{margin:0}
.p-0{padding:0}
.pt-3{padding-top:.75rem}
.pt-8{padding-top:2rem}
.pb-2{padding-bottom:.5rem}
.pb-4{padding-bottom:1rem}
.pl-4{padding-left:1rem}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-12{margin-top:3rem}
.mt-16{margin-top:4rem}
.mr-2{margin-right:.5rem}
.mr-3{margin-right:.75rem}

/* Gap / spacing utilities */
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-12{gap:3rem}
.space-x-1>*+*{margin-left:.25rem}
.space-x-2>*+*{margin-left:.5rem}
.space-x-8>*+*{margin-left:2rem}
.space-y-1>*+*{margin-top:.25rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-6>*+*{margin-top:1.5rem}

/* Grid columns */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Typography */
.font-mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.italic{font-style:italic}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:.025em}
.leading-tight{line-height:1.25}
.leading-relaxed{line-height:1.75}
.text-xs{font-size:.75rem}
.text-sm{font-size:.875rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}
.text-6xl{font-size:3.75rem}

/* Colors */
.bg-primary-navy{background-color:var(--primary-navy)}
.bg-primary-navy-light{background-color:var(--primary-navy-light)}
.bg-accent-orange{background-color:var(--accent-orange)}
.bg-background-light{background-color:var(--background-light)}
.bg-background-subtle{background-color:var(--background-subtle)}
.bg-secondary-gray-light{background-color:var(--secondary-gray-light)}
.bg-white{background-color:#fff}
.bg-green-100{background-color:#DCFCE7}
.text-text-primary{color:var(--text-primary)}
.text-secondary-gray-medium{color:var(--secondary-gray-medium)}
.text-secondary-gray-light{color:var(--secondary-gray-light)}
.text-text-inverse{color:var(--text-inverse)}
.text-accent-orange{color:var(--accent-orange)}
.text-white{color:#fff}
.text-red-500{color:#EF4444}

/* Borders / radius */
.border{border-width:1px;border-style:solid;border-color:var(--secondary-gray-light)}
.border-2{border-width:2px;border-style:solid;border-color:var(--secondary-gray-light)}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-l{border-left-width:1px;border-left-style:solid}
.border-secondary-gray-light{border-color:var(--secondary-gray-light)}
.border-primary-navy-light{border-color:var(--primary-navy-light)}
.rounded{border-radius:.25rem}
.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}
.rounded-full{border-radius:9999px}

/* Shadow */
.shadow-md{box-shadow:var(--shadow-md)}
.shadow-lg{box-shadow:var(--shadow-lg)}

/* Misc */
.sticky{position:sticky}
.cursor-pointer{cursor:pointer}
.resize-none{resize:none}
.object-cover{object-fit:cover}
.opacity-10{opacity:.1}
.list-none{list-style:none}

.aspect-square{aspect-ratio:1/1}
.aspect-video{aspect-ratio:16/9}

.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}

/* Transitions */
.transition-colors{transition:color 200ms ease-in-out,background-color 200ms ease-in-out,border-color 200ms ease-in-out}
.transition-shadow{transition:box-shadow 200ms ease-in-out}
.transition-transform{transition:transform 200ms ease-in-out}
.transition-all{transition:all 200ms ease-in-out}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}
.ease-in-out{transition-timing-function:ease-in-out}

/* Hover variants */
.hover\:bg-orange-600:hover{background-color:#EA580C}
.hover\:bg-accent-orange:hover{background-color:var(--accent-orange)}
.hover\:text-accent-orange:hover{color:var(--accent-orange)}
.hover\:text-white:hover{color:#fff}
.hover\:underline:hover{text-decoration:underline}
.hover\:shadow-lg:hover{box-shadow:var(--shadow-lg)}
.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1)}
.hover\:border-accent-orange:hover{border-color:var(--accent-orange)}

/* Focus variants */
.focus\:outline-none:focus{outline:0}
.focus\:border-transparent:focus{border-color:transparent}
.focus\:border-accent-orange:focus{border-color:var(--accent-orange)}
.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(249,115,22,.35)}
.focus\:ring-accent-orange:focus{box-shadow:0 0 0 2px rgba(249,115,22,.45)}
.focus\:ring-offset-2:focus{outline:2px solid transparent;outline-offset:2px}

/* Group hover variants */
.group:hover .group-hover\:text-accent-orange{color:var(--accent-orange)}
.group:hover .group-hover\:translate-x-1{transform:translateX(.25rem)}
.group:hover .group-hover\:scale-110{transform:scale(1.10)}
.group:hover .group-hover\:bg-primary-navy-light{background-color:var(--primary-navy-light)}

/* Disabled / active variants */
.disabled\:opacity-50:disabled{opacity:.5}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}
.active\:bg-orange-700:active{background-color:#C2410C}
.active\:bg-gray-700:active{background-color:#374151}
.active\:bg-gray-300:active{background-color:#D1D5DB}

/* Responsive variants */
@media (min-width:640px){
  .sm\:block{display:block}
  .sm\:flex-row{flex-direction:row}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
}
@media (min-width:768px){
  .md\:hidden{display:none}
  .md\:flex{display:flex}
  .md\:flex-row{flex-direction:row}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:space-y-0>*+*{margin-top:0}
  .md\:text-4xl{font-size:2.25rem}
  .md\:text-5xl{font-size:3rem}
  .md\:text-xl{font-size:1.25rem}
}
@media (min-width:1024px){
  .lg\:h-20{height:5rem}
  .lg\:w-64{width:16rem}
  .lg\:col-span-2{grid-column:span 2 / span 2}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:gap-12{gap:3rem}
  .lg\:gap-16{gap:4rem}
  .lg\:flex-row{flex-direction:row}
  .lg\:p-8{padding:2rem}
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:py-12{padding-top:3rem;padding-bottom:3rem}
  .lg\:py-16{padding-top:4rem;padding-bottom:4rem}
  .lg\:py-24{padding-top:6rem;padding-bottom:6rem}
  .lg\:text-6xl{font-size:3.75rem}
}
@media (min-width:1280px){
  .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}