@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

 :root {
     /* --- 1. Global Optimization --- */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
     font-size: 100%;

     /* --- 2. Typography Mapping (Space Grotesk & Inter) --- */
     --ff: "Inter", sans-serif;
     --fh: "Space Grotesk", sans-serif;

     /* Editorial Scale Contrast */
     --h1: 700 3.5rem/1.1 var(--fh);
     /* Adjusted slightly for standard screens, keeps display scale */
     --h2: 700 2.5rem/1.2 var(--fh);
     --h3: 700 1.75rem/1.2 var(--fh);
     --h4: 700 1.5rem/1.4 var(--fh);
     --big: 400 1.25rem/1.6 var(--ff);
     --p: 400 1.125rem/1.7 var(--ff);
     --a: 600 1rem/1.6 var(--ff);
     --small: 500 .75rem/2em var(--ff);

     /* --- 3. Color Remapping (Digital Sentinel Palette) --- */
     /* Base Layers */
     --bg-dark: #0f1512;
     /* surface */
     --bg: #171d1a;
     /* surface-container-low */
     --bg-light: #1b211e;
     /* surface-container */

     /* Content & Accents */
     --text: #ffffff;
     --text-muted: #91d6a5;
     --primary: #ffffff;
     --secondary: #66d9cc;

     /* Borders (The Ghost Border Rule) */
     --border: rgba(64, 73, 65, 0.15);
     --border-muted: transparent;
     --danger: #ffb4ab;
     --warning: #fbc02d;
     --success: #91d6a5;
     --info: #1ea296;

     --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Mobile Typography fallbacks */
 @media (max-width: 768px) {
     :root {
         --h1: 700 2.5rem/1.2 var(--fh);
         --h2: 700 2rem/1.2 var(--fh);
         --h3: 700 1.5rem/1.2 var(--fh);
     }
 }

 /* Mobile: stack label and link/number on separate lines for clarity */
 @media (max-width: 480px) {
     .contact-method {
         align-items: flex-start;
     }

     .contact-method div strong,
     .contact-method div a {
         display: block;
         margin-top: 6px;
     }

     .contact-method div a {
         margin-bottom: 6px;
     }

     .card {
         padding: 20px;
     }
 }

 body {
     font: var(--p);
     background-color: var(--bg-dark);
     color: var(--text);
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .container {
     max-width: 800px;
     margin: 30px auto;
 }

 .header {
     text-align: center;
 }

 .header h1 {
     font: var(--h1);
     color: var(--primary);
     margin-bottom: 15px;
     margin-top: 0;
 }

 .header p {
     font: var(--big);
     color: var(--text-muted);
 }

 /* Compact subtext for the small header note */
 .header .site-note {
     font: 400 0.95rem/1.1 var(--ff);
     color: var(--text-muted);
     margin: 6px 0 4px;
     opacity: 0.92;
 }

 /* Button-style link for main site */
 .header .site-link {
     margin-top: 6px;
 }

 .header .site-button {
     display: inline-block;
     margin-top: 10px;
     padding: 7px 12px;
     background: linear-gradient(90deg, var(--secondary), #4fd0c7);
     color: var(--bg-dark);
     border-radius: 8px;
     text-decoration: none;
     font: 600 0.9rem/1.2 var(--ff);
     border: 1px solid rgba(255, 255, 255, 0.06);
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
     transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
 }

 .header .site-button:hover {
     transform: translateY(-1px);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
     opacity: 0.98;
 }

 .header .site-button:focus {
     outline: 3px solid rgba(102, 217, 204, 0.22);
     outline-offset: 2px;
 }

 a {
     font: var(--a);
     color: var(--secondary);
     text-decoration: none;
     transition: color var(--transition);
 }

 a:hover {
     color: var(--primary);
 }

 .card {
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 35px;
     margin-bottom: 24px;
     transition: border-color var(--transition), transform var(--transition);
 }

 .card:hover {
     border-color: rgba(64, 73, 65, 0.4);
     transform: translateY(-2px);
 }

 .card-header {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
 }

 .card-header .material-icons-outlined {
     font-size: 32px;
     color: var(--secondary);
     margin-right: 15px;
 }

 .card-header h2 {
     font: var(--h3);
     color: var(--primary);
     margin: 0;
 }

 .card p {
     font: var(--p);
     color: var(--text);
 }

 .contact-method {
     background: var(--bg-light);
     padding: 18px 24px;
     border-radius: 8px;
     margin: 15px 0;
     display: flex;
     align-items: center;
     border: 1px solid var(--border);
     transition: border-color var(--transition);
 }

 .contact-method:hover {
     border-color: rgba(64, 73, 65, 0.4);
 }

 .qr-image {
     height: 200px;
     width: auto;
     max-width: 320px;
     border-radius: 6px;
     border: 1px solid var(--border);
     display: block;
 }

 @media (max-width: 768px) {
     .qr-image {
         height: 140px;
         max-width: 220px;
     }
 }

 .contact-method .material-icons-outlined {
     margin-right: 15px;
     color: var(--secondary);
 }

 .contact-method strong {
     color: var(--primary);
     margin-right: 8px;
 }

 ul.process-list {
     padding-left: 20px;
     color: var(--text-muted);
     font: var(--p);
 }

 ul.process-list li {
     margin-bottom: 10px;
 }

 /* Urgent Card Styling overrides */
 .card-urgent {
     border-color: rgba(255, 180, 171, 0.2);
     /* Muted danger border */
 }

 .card-urgent:hover {
     border-color: rgba(255, 180, 171, 0.5);
 }

 .card-urgent .card-header .material-icons-outlined,
 .card-urgent .card-header h2 {
     color: var(--danger);
 }

 .card-urgent .contact-method {
     border-color: rgba(255, 180, 171, 0.2);
 }

 .card-urgent .contact-method .material-icons-outlined {
     color: var(--danger);
 }

 .card-urgent .contact-method a {
     color: var(--danger);
 }

 .card-urgent .contact-method a:hover {
     color: var(--primary);
 }

 /* Legal / MSA card (compact) */
 .card-legal {
     background: transparent;
     border-left: 3px solid rgba(102, 217, 204, 0.18);
     padding: 14px 18px;
     border-radius: 10px;
     margin-top: 12px;
     font: 400 0.95rem/1.25 var(--ff);
 }

 .card-legal .card-header .material-icons-outlined {
     color: var(--secondary);
     font-size: 20px;
     margin-right: 10px;
 }

 .card-legal .card-header h2 {
     font: 700 1rem/1.1 var(--fh);
     margin: 0;
 }

 .card-legal .muted-text {
     margin: 0;
     font-size: 0.95rem;
     color: var(--text-muted);
 }

 /* Emphasis texts */
 .muted-text {
     color: var(--text-muted);
 }

 .small-italic {
     font: var(--small);
     color: var(--text-muted);
     font-style: italic;
     display: block;
     margin-top: 15px;
 }

/* Collapsible details styling: smooth expand/collapse, full width of parent card */
details.small-italic {
    width: 100%;
}

details.small-italic summary {
    font: var(--small);
    color: var(--text-muted);
    font-style: italic;
    cursor: pointer;
    list-style: none;
    outline: none;
    display: block;
    margin-top: 10px;
}

/* hide default marker and add a chevron */
details.small-italic summary::-webkit-details-marker { display: none; }
details.small-italic summary::marker { display: none; }
details.small-italic summary::after {
    content: "▸";
    float: right;
    transform-origin: center;
    transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}
details.small-italic[open] summary::after {
    transform: rotate(90deg);
}

/* Container for animated content */
.details-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 300ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms ease-in-out;
}

.details-content p {
    margin: 8px 0 0 0;
}

/* Ensure the details content uses the small-italic font styling */
.details-content.small-italic {
    font: var(--small);
    color: var(--text-muted);
    font-style: italic;
}

/* Ensure paragraph inside details-content uses exact styling */
.details-content.small-italic p {
    font: var(--small);
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

 .footer {
     text-align: center;
     padding: 40px 20px;
     color: var(--text-muted);
     font: var(--small);
     border-top: 1px solid var(--border);
     width: 100%;
     margin-top: 40px;
 }

 .footer a {
     font: var(--small);
     color: var(--text-muted);
 }

 .footer a:hover {
     color: var(--secondary);
 }