/* Audit page: blueprint */
.theme-bp { --paper: #0E2033; --raised: #13293F; --ink: #EAF1F8; --ink-soft: #A3B6CA; --deep: #EAF1F8; --line: rgba(150,190,230,.2); --line-soft: rgba(150,190,230,.1); --pine: #7FD0C0; --pine-tint: rgba(127,208,192,.18); --red: #FF6B57; color-scheme: dark;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(150,190,230,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(150,190,230,.07) 1px, transparent 1px), linear-gradient(rgba(150,190,230,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(150,190,230,.035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; }
.theme-bp .label { color: #FFB27A; }
.theme-bp .soft { color: #7F95AC; }
.theme-bp nav.top .bar, .theme-bp nav.top.solid .bar, .theme-bp nav.top.scrolled .bar { background: rgba(19,41,63,.85); border-color: var(--line); box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }
.theme-bp .links a:not(.btn) { color: var(--ink); }
.theme-bp .links a:not(.btn):hover, .theme-bp .links a[aria-current="page"] { background: rgba(255,255,255,.08); }
.theme-bp .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(234,241,248,.25); }
.theme-bp .menu-btn { background: var(--ink); color: var(--paper); }
@media (max-width: 980px) { .theme-bp .links { background: rgba(19,41,63,.98); } }
.theme-bp .form { background: rgba(19,41,63,.92); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.theme-bp .field input, .theme-bp .field select, .theme-bp .field textarea { background: #0B1A2A; }
.theme-bp .field input:hover, .theme-bp .field select:hover, .theme-bp .field textarea:hover { border-color: rgba(150,190,230,.4); }
.theme-bp .chips label { background: #0B1A2A; }
.theme-bp .chips input:checked + label { background: var(--ink); color: var(--paper); }
.theme-bp .cta-band { border: 1px solid var(--line); background: #0B1A2A; }
.theme-bp footer.site { background: #0A1828; }
.theme-bp .mbar { background: rgba(14,32,51,.92); border-color: var(--line); }

/* hero */
.audit-hero { position: relative; overflow: hidden; padding: clamp(120px, 15vh, 160px) 0 clamp(56px, 8vw, 100px); border-bottom: 1px solid var(--line); }
.bp-grid { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 75% 45%, rgba(80,140,210,.18), transparent 70%); }
.ah-wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.audit-hero h1 { font-size: clamp(2.8rem, 6.2vw, 5.6rem); line-height: .92; letter-spacing: -0.05em; color: var(--ink); margin-top: 16px; }
.audit-hero h1 .em { display: block; font-family: var(--serif); font-weight: 300; font-style: italic; letter-spacing: -0.03em; color: #FFB27A; }
.audit-hero .lede { color: var(--ink-soft); font-size: 1.1rem; max-width: 50ch; margin: 22px 0 26px; }
.audit-hero .notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; margin-bottom: 30px; max-width: 560px; }
.audit-hero .notes p { margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--ink-soft); font-size: .92rem; }
.audit-hero .notes b { display: block; color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; margin-bottom: 3px; }

/* scanned phone */
.scan { position: relative; width: min(100%, 520px); aspect-ratio: 560 / 640; margin-left: auto; }
.phone { position: absolute; left: 30%; top: 4%; width: 41%; aspect-ratio: 390 / 800; border-radius: 34px; padding: 9px; background: linear-gradient(160deg, #2A3A4C, #142233); box-shadow: 0 0 0 1px rgba(160,200,240,.25), 0 40px 80px -30px rgba(0,0,0,.8); }
.ph-screen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: #F4F1EA; }
.ph-screen i, .ph-screen b { display: block; }
.fs-nav { display: flex; align-items: center; gap: 8%; padding: 12% 8% 6%; }
.fs-nav .logo { width: 18%; height: 10px; border-radius: 3px; background: #3C6E8F; }
.fs-nav .ln { width: 14%; height: 5px; border-radius: 3px; background: #C9C3B6; }
.fs-nav .burger { margin-left: auto; width: 14px; height: 10px; border-top: 2px solid #555; border-bottom: 2px solid #555; }
.fs-hero { position: relative; margin: 0 6%; height: 30%; border-radius: 8px; background: linear-gradient(135deg, #8DB4C9, #4D7E9C); overflow: hidden; }
.fs-hero .slide { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.12) 22px 44px); animation: slidey 3s linear infinite; }
@keyframes slidey { to { transform: translateX(-44px); } }
.fs-hero .dots { position: absolute; bottom: 8px; left: 50%; width: 30px; height: 5px; margin-left: -15px; background: radial-gradient(circle, #fff 2px, transparent 2.5px) 0 0 / 10px 5px; }
.fs-body { padding: 8% 8% 0; display: grid; gap: 8px; }
.fs-body i { height: 6px; border-radius: 3px; background: #D3CDBF; }
.fs-body .t1 { width: 80%; height: 11px; background: #3A3A3A; } .fs-body .t2 { width: 95%; } .fs-body .t3 { width: 70%; }
.fs-body .btn-ghosty { width: 40%; height: 18px; border-radius: 9px; border: 1.5px dashed #B9B2A3; background: none; margin-top: 4px; }
.fs-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 7% 8% 9%; background: #2E3640; display: grid; gap: 6px; }
.fs-foot i { height: 5px; width: 60%; border-radius: 3px; background: #56606C; }
.fs-foot .num { font: 600 9px/1 var(--mono); color: #B9C2CC; letter-spacing: .04em; }
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 70px; background: linear-gradient(180deg, transparent, rgba(255,120,80,.25) 85%, rgba(255,120,80,.95) 98%, transparent); mix-blend-mode: multiply; animation: scan 3.6s cubic-bezier(.5,0,.5,1) infinite; }
.scanline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: #FF6B57; box-shadow: 0 0 14px 2px rgba(255,107,87,.8); }
@keyframes scan { 0% { transform: translateY(-70px); } 60%, 100% { transform: translateY(calc(var(--ph-h, 520px))); } }
.dim { position: absolute; display: flex; align-items: center; gap: 8px; font: 500 .66rem/1 var(--mono); color: rgba(170,205,240,.7); letter-spacing: .06em; }
.dim i { flex: 1; height: 1px; background: rgba(170,205,240,.45); position: relative; }
.dim-h { left: 30%; width: 41%; top: 0; }
.dim-h i::before, .dim-h i:last-child::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: rgba(170,205,240,.6); }
.dim-h i:first-child::before { left: 0; } .dim-h i:last-child::after { right: 0; }
.dim-v { left: calc(30% - 34px); top: 4%; height: 80%; flex-direction: column; width: 20px; writing-mode: vertical-rl; }
.dim-v i { width: 1px; height: auto; }
.markup { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk { stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw .9s ease forwards; filter: drop-shadow(0 0 6px rgba(255,107,87,.35)); }
.m1 { animation-delay: 1.4s; } .a1 { animation-delay: 1.9s; }
.m2 { animation-delay: 2.5s; } .a2 { animation-delay: 3s; }
.m3 { animation-delay: 3.6s; } .a3 { animation-delay: 4.1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hand { position: absolute; font: 600 clamp(1.15rem, 1.9vw, 1.55rem)/1 "Caveat", cursive; color: var(--red); opacity: 0; transform: rotate(var(--r, -4deg)) translateY(6px); animation: pop .5s ease forwards; white-space: nowrap; }
.hand.h1 { left: -4%; top: 10%; --r: -6deg; animation-delay: 2.2s; }
.hand.h2 { right: -4%; top: 19%; --r: 4deg; animation-delay: 3.3s; text-align: right; }
.hand.h3 { right: -2%; top: 73%; --r: -3deg; animation-delay: 4.4s; text-align: right; }
@keyframes pop { to { opacity: 1; transform: rotate(var(--r)) translateY(0); } }
.scan-read { position: absolute; left: 0; bottom: 0; display: grid; gap: 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(11,26,42,.8); font: 500 .7rem/1.2 var(--mono); color: var(--ink-soft); letter-spacing: .04em; }
.scan-read b { font-weight: 500; color: #FFB27A; text-transform: uppercase; }
.scan-read b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 7px; animation: blink 1s steps(2) infinite; }
.scan-read em { font-style: normal; color: var(--ink); }
@keyframes blink { 50% { opacity: 0; } }

/* sample audit as a stamped paper report */
.theme-bp .sample.report { position: relative; background: #FBF8F1; color: #1C231B; border: 0; border-radius: 4px; padding: 30px 26px 96px; transform: rotate(-1.2deg); box-shadow: 0 2px 0 #E6E0D2, 0 30px 60px -24px rgba(0,0,0,.65);
  background-image: repeating-linear-gradient(#FBF8F1 0 27px, #EDE7DA 27px 28px); }
.report .sample-top, .report .scores { border-color: #D9D2C2; }
.report .label { color: #6A7470 !important; }
.report .sample-top small, .report .scores span, .report .finds span { color: #5D665E; }
.report .finds li { border-color: #E6DFD0; }
.report .finds li::before { color: #A9501A; }
.report .scores b { color: #3F6B4A; }
.report .ring::before { background: #FBF8F1; }
.report .clip { position: absolute; top: -18px; left: 34px; width: 22px; height: 56px; border: 3px solid #9AA6B2; border-radius: 12px; border-bottom-color: transparent; transform: rotate(6deg); }
.report .clip::after { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 40px; border: 3px solid #9AA6B2; border-radius: 8px; border-top-color: transparent; }
.report .stamp { position: absolute; right: 22px; bottom: 26px; padding: 8px 14px 6px; border: 3px solid #C2402E; border-radius: 6px; color: #C2402E; font: 800 1.35rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-12deg); opacity: .82; mix-blend-mode: multiply; text-align: center; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.55) 61%, #000 75%); mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.55) 61%, #000 75%); }
.report .stamp small { display: block; font: 500 .62rem/1 var(--mono); letter-spacing: .16em; margin-top: 4px; }
.report.in .stamp, .report .stamp { animation: stamp .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: .6s; }
@keyframes stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.8); } }

@media (max-width: 980px) {
  .ah-wrap { grid-template-columns: 1fr; }
  .scan { margin: 10px auto 0; width: min(100%, 440px); }
}
@media (max-width: 620px) {
  .audit-hero .notes { grid-template-columns: 1fr; }
  .hand { font-size: 1rem; }
  .scan { width: 80%; }
  .hand.h1 { left: -12%; top: 4%; } .hand.h2 { right: -14%; } .hand.h3 { right: -12%; }
  .dim-v { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk { animation: none; stroke-dashoffset: 0; } .hand { animation: none; opacity: 1; transform: rotate(var(--r)); }
  .scanline, .fs-hero .slide { animation: none; } .scanline { display: none; } .report .stamp { animation: none; }
}