/* ========================================================= SELF-HOSTED FONTS — deliberately not Google's CDN. Loading fonts from fonts.googleapis.com costs: - a render-blocking stylesheet request - a 3-deep critical chain (HTML -> css -> woff2) - DNS + TLS to two extra origins - your visitors' IPs sent to Google (a live GDPR problem; German courts have ruled against it) Self-hosting kills all four. Subset to Latin: 85 KB total. font-display:swap = text is readable immediately, no FOIT. ========================================================= */ @font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap; src:url('/assets/fonts/dmserifdisplay-400.woff2') format('woff2')} @font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap; src:url('/assets/fonts/dmserifdisplay-400i.woff2') format('woff2')} @font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap; src:url('/assets/fonts/firasans-400.woff2') format('woff2')} @font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap; src:url('/assets/fonts/firasans-600.woff2') format('woff2')} /* 500 and 700 map onto 600 rather than pulling two more files */ @font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap; src:url('/assets/fonts/firasans-600.woff2') format('woff2')} @font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap; src:url('/assets/fonts/firasans-600.woff2') format('woff2')} /* ========================================================= REIMAGINE WEB DESIGN — EDITORIAL DESIGN SYSTEM Palette : paper / forest / terracotta / peach / sage Type : DM Serif Display (display) · Fira Sans (body) Note : Hand-written CSS, no framework. The Tailwind CDN build compiles in-browser (slow + FOUC) and is blocked by our CSP, so the design is ported here. ========================================================= */ :root{ --paper:#F7F3EA; --paper-2:#FFFDF8; --forest:#4A6741; --forest-deep:#374D31; --forest-ink:#2B3B25; --sage:#87A878; --terracotta:#C4654A; --terracotta-deep:#A4523A; --peach:#E8A87C; --line:rgba(74,103,65,.14); --shadow:0 18px 50px rgba(43,59,37,.13); /* -------------------------------------------------------------- CONTRAST TOKENS — measured, not eyeballed. WCAG AA = 4.5:1 for normal text, 3:1 for large (>=24px, or >=18.66px bold). We sell accessibility, so these are not suggestions. --text #4A6741 on paper = 5.73 AA --text-mute #5B7552 on paper = 4.61 AA (was rgba .82 = 3.91 FAIL) --terracotta-deep #A4523A = 4.93 AA — ALL small text & buttons --terracotta #C4654A = 3.57 AA-LARGE ONLY — never small text --on-dark-mute #C3D1BD on ink = 7.51 AA --on-forest-mute #DBDDCF = 4.61 AA (was rgba .72 = 3.86 FAIL) -------------------------------------------------------------- */ --text:#4A6741; --text-mute:#5B7552; --on-dark-mute:#C3D1BD; --on-forest-mute:#DBDDCF; } /* ========================================================= THEME: DARK — applied via . Set by: (1) saved visitor choice in localStorage, else (2) system prefers-color-scheme, via inline script in before first paint (no flash). Toggle in nav. ========================================================= */ :root[data-theme="dark"]{ --paper:#1E2A1A; --paper-2:#232F1E; --forest:#9DB392; --forest-deep:#B8CCAF; --forest-ink:#C3D1BD; --text:#C3D1BD; --text-mute:#9DB392; --on-dark:#F7F3EA; --on-dark-mute:#C3D1BD; --line:rgba(155,185,145,.18); --shadow:0 18px 50px rgba(0,0,0,.45); } [data-theme="dark"] nav{background:rgba(30,42,26,.92);border-bottom-color:rgba(155,185,145,.12)} [data-theme="dark"] .option-card{background:rgba(255,255,255,.04);border-color:rgba(155,185,145,.14)} [data-theme="dark"] .option-card.selected{background:rgba(155,185,145,.10);border-color:rgba(155,185,145,.4)} [data-theme="dark"] .faq-item{border-bottom-color:rgba(155,185,145,.14)} [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select{ background:rgba(255,255,255,.05); border-color:rgba(155,185,145,.25); color:var(--text); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{color:var(--text-mute)} [data-theme="dark"] .layer{background:rgba(255,255,255,.04);border-left-color:rgba(155,185,145,.4)} [data-theme="dark"] .layer:nth-child(3){background:rgba(74,103,65,.12)} [data-theme="dark"] .err{background:rgba(196,101,74,.08)} /* Machine bands, dark bands — already dark, must not inherit paper bg */ [data-theme="dark"] .band-dark, [data-theme="dark"] .band-deep, [data-theme="dark"] .machine{background-color:var(--forest-ink) !important} [data-theme="dark"] .band-dark{background-color:#151E12 !important} [data-theme="dark"] .band-deep{background-color:#111810 !important} [data-theme="dark"] section.machine:not(.band-dark):not(.band-deep){background-color:var(--machine-floor) !important} [data-theme="dark"] ::-webkit-scrollbar{width:8px} [data-theme="dark"] ::-webkit-scrollbar-track{background:#1E2A1A} [data-theme="dark"] ::-webkit-scrollbar-thumb{background:#374D31;border-radius:4px} [data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#4A6741} /* ========================================================= MOBILE + TABLET — safe areas, touch targets, breakpoints. iPhone SE 375 · iPhone 15 Pro 393 · iPad Mini 768 · iPad Pro 1024 · Android 360-412 ========================================================= */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-overflow-scrolling:touch} a,button{-webkit-tap-highlight-color:transparent} @supports(padding:env(safe-area-inset-left)){ .wrap{ padding-left:max(24px,calc(24px + env(safe-area-inset-left))); padding-right:max(24px,calc(24px + env(safe-area-inset-right))); } footer .wrap{ padding-bottom:max(16px,calc(16px + env(safe-area-inset-bottom))); } } /* 44px minimum touch targets (Apple HIG / Android material) */ .btn,.price,.tag,.seg-btn,.nav-link, .faq-btn,.option-card .opt-label{min-height:44px} .btn{display:inline-flex;align-items:center;justify-content:center} @media(hover:none){ .btn:hover{opacity:1;transform:none;filter:none} nav a:hover{opacity:1} } /* iPhone SE / small Android */ @media(max-width:390px){ .wrap{padding-left:16px;padding-right:16px} .svc .num{font-size:4rem} .hero-title{font-size:clamp(2.4rem,11vw,3.2rem)} .promise blockquote{font-size:clamp(1.3rem,6vw,1.8rem)} .health{display:grid;grid-template-columns:1fr 1fr} .health .cell{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)} .health .cell:nth-last-child(-n+2){border-bottom:none} } /* Tablet portrait 768–1023 */ @media(min-width:768px) and (max-width:1023px){ .svc-grid{grid-template-columns:repeat(3,1fr);gap:20px} .svc .num{font-size:4rem} .rig-panels{grid-template-columns:repeat(2,1fr)} .migrate{grid-template-columns:1fr 1fr} } /* iPad Pro 12.9" landscape */ @media(min-width:1024px) and (max-width:1180px){ .wrap{padding:0 32px} } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Fira Sans',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--forest); line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative} h1,h2,h3,h4{font-family:'DM Serif Display',Georgia,serif;letter-spacing:-.015em;line-height:1.04;font-weight:400;scroll-margin-top:96px} [id]{scroll-margin-top:96px} ::selection{background:var(--terracotta);color:var(--paper)} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} @media(min-width:1024px){.wrap{padding:0 40px}} a{color:inherit;text-decoration:none} p a:not(.btn):not(.link-underline){color:var(--terracotta-deep);text-decoration:underline;text-underline-offset:3px} img{max-width:100%;height:auto;display:block} section{padding:88px 0} @media(min-width:768px){section{padding:118px 0}} :focus-visible{outline:2px solid var(--terracotta);outline-offset:3px} .skip{position:absolute;left:-9999px;background:var(--forest);color:var(--paper);padding:12px 18px;z-index:120} .skip:focus{left:0;top:0} .accent{color:var(--terracotta);font-style:italic} /* ------------------------------------------------------------------ LAYOUT RULE — read before editing. .wrap supplies the page gutter (24px, 40px >=1024) and the 1180px max-width. Two things break it, and both did: 1. A padding SHORTHAND on a .wrap element (padding:18px 0) zeroes the horizontal gutter. Always use padding-top/padding-bottom. 2. A max-width on a .wrap element. .wrap is margin:0 auto, so a narrower max-width CENTRES the block instead of left-aligning it — and it stops lining up with the nav and every section. Constrain the CHILDREN instead: .wrap.thing > * { max-width: X } ------------------------------------------------------------------ */ /* Centred band: narrow + centred is CORRECT here, unlike page-hero/prose which must stay left-aligned to the gutter. Use this instead of an inline max-width so the rule lives in one place. */ .wrap.band-narrow{max-width:52rem;text-align:center} .wrap.band-narrow.w48{max-width:48rem} .wrap.band-narrow.w46{max-width:46rem} .wrap.band-narrow.w44{max-width:44rem} .wrap.band-narrow.w50{max-width:50rem} .band-narrow .eyebrow{justify-content:center} /* Paper grain — makes it feel printed, not rendered */ .grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:var(--terracotta-deep);margin-bottom:26px} .eyebrow::before{content:"";width:24px;height:1px;background:var(--terracotta)} .eyebrow.ctr{justify-content:center} .eyebrow.light{color:var(--peach)} .eyebrow.light::before{background:var(--peach)} h2.big{font-size:clamp(2.3rem,5vw,3.7rem)} .lede{font-size:1.08rem;line-height:1.75;color:var(--text-mute);max-width:36rem} /* Buttons — squared and editorial, not pills */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:500; font-size:.95rem;padding:15px 30px;border-radius:2px;border:1px solid transparent;cursor:pointer; transition:transform .2s,background .2s,color .2s;text-align:center} .btn-primary{background:var(--terracotta-deep);color:var(--paper);box-shadow:0 14px 30px rgba(164,82,58,.25)} /* deep = 4.93:1 with paper text */ .btn-primary:hover{background:#8A4229;transform:translateY(-2px)} .btn-ghost{border-color:var(--forest);color:var(--forest)} .btn-ghost:hover{background:var(--forest);color:var(--paper)} .btn-light{background:var(--paper);color:var(--forest)} .btn-light:hover{background:var(--forest);color:var(--paper)} .btn-lg{padding:17px 36px;font-size:1rem} .link-underline{font-weight:500;border-bottom:2px solid var(--forest);padding:0 2px 3px;transition:.2s} .link-underline:hover{color:var(--terracotta);border-color:var(--terracotta)} /* Nav */ nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(12px);background:rgba(247,243,234,.78); border-bottom:1px solid rgba(74,103,65,.06)} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px;position:relative} .logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap} .logo-mark{width:30px;height:30px;flex-shrink:0;fill:var(--forest);stroke:var(--forest)} .logo-text{display:flex;flex-direction:column;line-height:1} .logo-word{font-family:'DM Serif Display',Georgia,serif;font-size:1.32rem;color:var(--forest);letter-spacing:-.012em} .logo-desc{font-size:7.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--terracotta-deep);font-weight:600;margin-top:4px} .nav-links{display:flex;gap:24px;font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;white-space:nowrap} .nav-links a:hover,.nav-links a[aria-current]{color:var(--terracotta)} .nav-cta{background:var(--forest);color:var(--paper);padding:11px 20px;border-radius:999px;font-size:.8rem; font-weight:500;transition:background .2s;white-space:nowrap;flex-shrink:0} .nav-cta:hover{background:var(--terracotta)} .nav-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--forest);padding:6px} @media(max-width:1120px){ .nav-toggle{display:grid;place-items:center;order:3;min-width:44px;min-height:44px;border-radius:8px;line-height:1} .nav-cta{display:none} .nav-links{display:none;position:absolute;z-index:70;top:100%;left:50%;right:auto; width:100vw;max-width:100vw;max-height:calc(100dvh - 76px);overflow-y:auto; transform:translateX(-50%);background:var(--paper);border-top:1px solid var(--line); border-bottom:1px solid var(--line);box-shadow:0 18px 36px rgba(43,59,37,.14); flex-direction:column;align-items:stretch;gap:2px;padding:14px 24px 20px} .nav-links.open{display:flex} .nav-links{white-space:normal} .nav-links a{display:flex;align-items:center;width:100%;min-height:46px;padding:10px 4px; border-bottom:1px solid var(--line);font-size:.76rem;line-height:1.3} .nav-links a:last-child{border-bottom:0} body.nav-menu-open{overflow:hidden} } @supports(padding-left:env(safe-area-inset-left)){ @media(max-width:1120px){ .nav-links{padding-left:max(24px,calc(16px + env(safe-area-inset-left))); padding-right:max(24px,calc(16px + env(safe-area-inset-right)))} } } @media(max-width:390px){ .nav-links{padding-left:16px;padding-right:16px} } /* Hero */ .hero{padding:70px 0 110px} .hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:start} @media(max-width:1023px){.hero-grid{grid-template-columns:1fr;gap:60px}} .hero h1{font-size:clamp(3rem,7.5vw,6.4rem);line-height:.94} .hero .lede{margin:32px 0 0;font-size:1.1rem} .hero-ctas{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:24px} .hero-note{margin-top:26px;font-size:.85rem;color:var(--text-mute)} .hero-note strong{color:var(--forest)} /* Keep the decorative blob inside the viewport on small screens */ @media(max-width:1023px){.blob{width:130px;height:130px;top:-18px;right:-6px}} /* Marquee */ .marquee-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:rgba(135,168,120,.1);padding:34px 0;overflow:hidden} .marquee{display:flex;white-space:nowrap;animation:marquee 44s linear infinite;width:max-content} .marquee-row{display:flex;gap:60px;align-items:center;flex-shrink:0;padding-right:60px} .marquee-row .lbl{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.28em;color:var(--text)} .marquee-row .item{font-family:'DM Serif Display',serif;font-style:italic;font-size:1.45rem;color:var(--text)} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Numbered services */ .svc-head{display:flex;flex-direction:column;gap:22px;justify-content:space-between;align-items:flex-start;margin-bottom:70px} @media(min-width:768px){.svc-head{flex-direction:row;align-items:flex-end}} .svc-rule{width:128px;height:1px;background:var(--terracotta);margin-bottom:12px;flex-shrink:0} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} @media(max-width:900px){.svc-grid{grid-template-columns:1fr;gap:64px}} .svc{position:relative;padding-top:46px} .svc .num{position:absolute;top:-18px;left:0;font-family:'DM Serif Display',serif;font-size:5.5rem;z-index:-1;line-height:1} .svc:nth-child(1) .num{color:rgba(232,168,124,.5)} .svc:nth-child(2) .num{color:rgba(196,101,74,.3)} .svc:nth-child(3) .num{color:rgba(74,103,65,.25)} @media(min-width:900px){.svc:nth-child(2){transform:rotate(-1deg);margin-top:56px}.svc:nth-child(3){transform:rotate(1deg);margin-top:28px}} .svc h3{font-size:1.85rem;font-style:italic;margin-bottom:14px} .svc p{color:var(--text-mute);margin-bottom:20px;font-size:.96rem} .svc .price{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.16em; color:var(--terracotta-deep);border:1px solid rgba(196,101,74,.3);padding:6px 12px} /* Dark bands */ .band-dark{background:var(--forest-deep);color:var(--paper)} /* forest was too light for peach text (3.12) */ .band-dark h2,.band-dark h3{color:var(--paper)} .band-dark p{color:var(--on-dark-mute)} .band-deep{background:var(--forest-ink);color:var(--paper)} .band-deep h2{color:var(--paper)} .band-deep p{color:var(--on-dark-mute)} /* Showcase image band */ @media(max-width:960px){.show-grid{grid-template-columns:1fr;gap:52px}} @media(max-width:600px){.show-tag{position:static;margin-top:14px;max-width:none}} /* Layer stack */ .stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px} @media(max-width:920px){.stack-grid{grid-template-columns:1fr}} .layer{padding:34px 30px;border-left:3px solid var(--sage);background:rgba(135,168,120,.12)} .layer:nth-child(2){border-left-color:var(--terracotta);background:rgba(232,168,124,.14)} .layer:nth-child(3){border-left-color:var(--forest);background:rgba(74,103,65,.07)} .layer .tag{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--terracotta-deep);display:block;margin-bottom:12px} .layer h3{font-size:1.5rem;font-style:italic;margin-bottom:10px} .layer p{font-size:.94rem;color:var(--text-mute);margin-bottom:16px} .layer .stat{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-mute)} /* Steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:56px} @media(max-width:820px){.steps{grid-template-columns:1fr}} .step{border-top:1px solid var(--line);padding-top:26px} .step .n{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta-deep);display:block;margin-bottom:14px} .step h3{font-size:1.55rem;font-style:italic;margin-bottom:12px} .step p{color:var(--text-mute);font-size:.94rem} .step .time{display:inline-block;margin-top:18px;font-size:10px;letter-spacing:.18em;text-transform:uppercase; background:rgba(135,168,120,.2);color:var(--forest-deep);padding:6px 11px} /* The studio promise (NOT a fabricated testimonial) */ .promise{text-align:center;max-width:56rem;margin:0 auto;padding:0 24px} .promise .mark{font-family:'DM Serif Display',serif;color:var(--terracotta);font-size:9rem;line-height:.6; opacity:.25;display:block;margin-bottom:6px} .promise blockquote{font-family:'DM Serif Display',serif;font-style:italic;font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.2} .promise .attrib{margin-top:40px;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--on-dark-mute)} /* Differentiators */ .diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;background:var(--line)} @media(max-width:920px){.diff-grid{grid-template-columns:1fr}} .diff{background:var(--paper);padding:34px 30px} .diff .ic{font-size:1.4rem;margin-bottom:16px;display:block} .diff h3{font-size:1.3rem;font-style:italic;margin-bottom:10px} .diff p{font-size:.92rem;color:var(--text-mute)} .diff.feature{background:var(--forest);color:var(--paper)} .diff.feature h3{color:var(--paper)} .diff.feature p{color:var(--on-dark-mute)} /* Ranking rescue */ .rescue-card{display:grid;grid-template-columns:1fr 1fr;background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow)} @media(max-width:900px){.rescue-card{grid-template-columns:1fr}} .rescue-copy{padding:52px 46px} .rescue-copy h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-bottom:18px} .rescue-copy p{color:var(--text-mute);margin-bottom:16px;font-size:.96rem} .pill{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.18em; background:rgba(232,168,124,.28);color:var(--terracotta-deep);padding:7px 12px;margin-bottom:20px} .rescue-vis{background:var(--forest-ink);padding:46px 40px;display:flex;flex-direction:column;justify-content:center;gap:15px} .rv-lab{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute)} .rv-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:16px 18px} .rv-url{font-size:.76rem;color:var(--peach);word-break:break-all;margin-bottom:11px;letter-spacing:.02em} .rv-old{height:8px;background:rgba(255,255,255,.15);margin-bottom:6px} .rv-old.s{width:55%} .rv-new{height:8px;background:linear-gradient(90deg,var(--terracotta),var(--peach));margin-bottom:6px} .rv-new.s{width:70%} .rv-arrow{text-align:center;color:var(--peach);font-size:1.2rem} .rv-same{text-align:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--peach); border:1px dashed rgba(232,168,124,.4);padding:10px} /* Pricing builder */ .seg{display:inline-flex;background:rgba(74,103,65,.07);border:1px solid var(--line);padding:5px;margin:0 0 12px} .seg button{font-family:inherit;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--text-mute);background:transparent;border:none;padding:11px 24px;cursor:pointer;transition:.2s} .seg button.on{background:var(--forest);color:var(--paper)} .seg-sub{font-size:.9rem;color:var(--text-mute);margin-bottom:44px} .builder{display:grid;grid-template-columns:1.4fr .6fr;gap:26px;align-items:start} @media(max-width:960px){.builder{grid-template-columns:1fr}} .build-panel{background:var(--paper-2);border:1px solid var(--line);padding:38px 34px} .bl{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--terracotta-deep);margin-bottom:16px} .opts{display:grid;gap:12px;margin-bottom:36px;list-style:none} .opt{border:1px solid var(--line);padding:18px 20px;cursor:pointer;display:flex;gap:15px;align-items:flex-start; background:transparent;width:100%;text-align:left;font-family:inherit;font-size:1rem;color:inherit;transition:.16s} .opt:hover{border-color:var(--terracotta)} .opt.sel{border-color:var(--terracotta);border-left-width:3px;background:rgba(232,168,124,.12)} .mark{width:18px;height:18px;border:1px solid rgba(74,103,65,.3);flex-shrink:0;margin-top:3px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:.6rem;color:transparent;transition:.16s} .mark.sq{border-radius:0} .opt.sel .mark{background:var(--terracotta);border-color:var(--terracotta);color:var(--paper)} .opt-body{flex:1} .opt-t{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:600;font-size:.97rem} .opt-t .pr{color:var(--terracotta-deep);font-weight:500;white-space:nowrap;font-size:.86rem} .opt-d{display:block;font-size:.84rem;color:var(--text-mute);margin-top:4px;font-weight:400} .best{font-size:9px;letter-spacing:.14em;text-transform:uppercase;background:var(--terracotta);color:var(--paper); padding:3px 7px;margin-left:8px;font-weight:600} .summary{background:var(--forest);color:var(--paper);padding:34px 30px;position:sticky;top:100px} .summary .bl{color:var(--peach)} .sum-rows{display:grid;gap:11px;margin-bottom:20px;font-size:.86rem;color:var(--on-dark-mute);min-height:44px} .sum-row{display:flex;justify-content:space-between;gap:12px} .sum-row span:last-child{color:var(--paper);white-space:nowrap} .sum-div{height:1px;background:rgba(247,243,234,.18);margin:6px 0} .total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} .total .lab{font-size:.75rem;color:var(--on-dark-mute);text-transform:uppercase;letter-spacing:.14em} .total .amt{font-family:'DM Serif Display',serif;font-size:2.6rem;color:var(--peach)} .total .per{font-size:.75rem;color:var(--on-dark-mute);margin-left:3px} .setup{font-size:.74rem;color:var(--on-dark-mute);margin-bottom:24px} .summary .btn{width:100%} .sum-note{margin-top:16px;font-size:.71rem;line-height:1.6;color:var(--on-dark-mute);text-align:center} .zero{margin-top:28px;background:rgba(135,168,120,.14);border-left:3px solid var(--sage);padding:24px 28px; display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;font-size:.93rem} /* Tiers */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:920px){.tiers{grid-template-columns:1fr}} .tier{background:rgba(135,168,120,.12);border-left:3px solid var(--sage);padding:40px 34px; display:flex;flex-direction:column;position:relative} .tier.hot{background:rgba(232,168,124,.16);border-left-color:var(--terracotta)} .tier .flag{position:absolute;top:-12px;right:20px;background:var(--terracotta);color:var(--paper); padding:5px 11px;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase} .tier h3{font-size:1.65rem;margin-bottom:2px} .tier .for{font-size:.82rem;color:var(--text-mute);margin-bottom:18px} .price-line{display:flex;align-items:baseline;gap:6px} .price-line .amt{font-family:'DM Serif Display',serif;font-size:2.3rem;color:var(--terracotta)} .price-line .per{font-size:.78rem;color:var(--text-mute)} .build{display:inline-block;align-self:flex-start;margin:12px 0 22px;font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--terracotta-deep);border:1px solid rgba(196,101,74,.3);padding:5px 10px} .tier ul{list-style:none;display:grid;gap:12px;margin-bottom:32px;font-size:.91rem;color:var(--text-mute)} .tier li{display:flex;gap:11px} .tier li::before{content:"•";color:var(--terracotta);font-family:'DM Serif Display',serif;font-size:1.2rem;line-height:1.1} .tier .btn{margin-top:auto} /* Prose */ .page-hero{padding-top:66px;padding-bottom:20px} /* When page-hero/prose sit ON a .wrap, the wrap keeps its full width and we constrain the CHILDREN — otherwise max-width + margin:0 auto centres the whole block and it stops aligning with the nav and every other section. */ .wrap.page-hero{max-width:1180px} .wrap.page-hero > *{max-width:46rem} .page-hero h1{font-size:clamp(2.4rem,5.4vw,4rem);margin-bottom:20px} .prose{max-width:44rem} .wrap.prose{max-width:1180px} .wrap.prose > *{max-width:44rem} .prose h2{font-size:1.85rem;margin:44px 0 14px} .prose h3{font-size:1.3rem;font-style:italic;margin:32px 0 10px} .prose p{margin-bottom:16px;color:var(--text-mute)} .prose ul,.prose ol{margin:0 0 20px 22px;color:var(--text-mute)} .prose li{margin-bottom:9px} .prose .answer{background:rgba(135,168,120,.14);border-left:3px solid var(--sage);padding:20px 24px;margin-bottom:22px;color:var(--forest)} .prose small{font-size:.84rem;color:var(--text-mute)} .legal{padding-top:54px}.legal-wrap{padding-bottom:72px}.legal-wrap>h1{margin-bottom:10px}.legal-wrap table{width:100%;border-collapse:collapse;margin:20px 0 30px;color:var(--text-mute);font-size:.92rem}.legal-wrap th,.legal-wrap td{text-align:left;vertical-align:top;padding:14px 16px;border:1px solid var(--line)}.legal-wrap th{color:var(--forest);background:var(--paper-2);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.legal-wrap td:first-child{width:30%;font-weight:700;color:var(--forest)} .callout{background:rgba(232,168,124,.15);border-left:3px solid var(--terracotta);padding:24px 28px;margin:28px 0} .callout strong{color:var(--forest-deep)} /* FAQ */ .faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:52px} @media(max-width:820px){.faq-grid{grid-template-columns:1fr;gap:32px}} .faq-grid h2{font-size:clamp(2rem,4vw,2.9rem);font-style:italic;margin-bottom:18px} .faq-grid .sub{color:var(--text-mute);max-width:22rem} details{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:22px} summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;list-style:none} summary::-webkit-details-marker{display:none} summary .q{font-family:'DM Serif Display',serif;font-size:1.2rem;line-height:1.3} .plus{font-size:1.5rem;color:var(--terracotta);transition:transform .2s;flex-shrink:0} details[open] .plus{transform:rotate(45deg)} details p{margin-top:16px;color:var(--text-mute);max-width:44rem;font-size:.95rem} /* Forms */ .form-card{background:var(--paper-2);border:1px solid var(--line);padding:40px 36px} .field{margin-bottom:22px} .field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px} .field .hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-mute);font-size:.8rem} .field input,.field textarea,.field select{width:100%;padding:14px 16px;border:1px solid var(--line); background:var(--paper);font-family:inherit;font-size:.95rem;color:var(--forest);border-radius:0} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--terracotta)} .field textarea{min-height:120px;resize:vertical} .hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0;overflow:hidden} .err{background:rgba(196,101,74,.12);border-left:3px solid var(--terracotta);padding:16px 18px;margin-bottom:24px;font-size:.9rem} .err ul{margin:8px 0 0 18px} /* CTA band */ .cta-band{background:var(--terracotta-deep);color:var(--paper);padding:60px 40px;position:relative;overflow:hidden} /* deep: paper text = 4.93 */ @media(min-width:768px){.cta-band{padding:82px 76px}} .cta-band .orb{position:absolute;top:-80px;right:-80px;width:320px;height:320px;border-radius:50%; background:rgba(232,168,124,.18);mix-blend-mode:overlay} .cta-inner{position:relative;max-width:46rem} .cta-band h2{color:var(--paper);font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:20px} .cta-band p{color:var(--paper);font-size:1.03rem;margin-bottom:30px;max-width:32rem} .checks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;list-style:none} .chk{font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:transparent; border:1px solid rgba(255,253,248,.5);padding:7px 13px;color:var(--paper)} .audit-small{margin-top:18px;font-size:.77rem;color:var(--paper)} /* no opacity: .92 dropped it to 4.43 */ /* Footer */ footer{background:var(--forest-ink);color:var(--on-dark-mute);padding:78px 0 44px} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:52px} @media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:38px}} .foot-brand .logo{margin-bottom:14px} .foot-brand .logo-mark{width:36px;height:36px;fill:var(--paper);stroke:var(--paper)} .foot-brand .logo-word{font-size:1.6rem;color:var(--paper)} .foot-brand .logo-desc{color:var(--peach);font-size:8.5px} .slogan{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--peach);margin-bottom:20px} .foot-brand>p{color:var(--on-dark-mute);max-width:26rem;margin-bottom:22px;font-size:.92rem} .nap{font-style:normal;line-height:1.9;font-size:.87rem;color:var(--on-dark-mute)} .nap strong{color:var(--paper)} .nap a:hover{color:var(--peach)} .foot-areas{margin-top:16px;font-size:.77rem;color:var(--on-dark-mute)} .foot-col h3{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--paper);margin-bottom:20px} .foot-col a{display:block;margin-bottom:11px;font-size:.89rem;color:var(--on-dark-mute)} .foot-col a:hover{color:var(--peach)} .foot-legal{margin-top:52px;padding-top:26px;border-top:1px solid rgba(247,243,234,.1); display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px; font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute)} .foot-legal .accent-txt{color:var(--peach)} /* Motion */ .fade-up{animation:fade-up .9s cubic-bezier(.16,1,.3,1) both} @keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .reveal,.fade-up{opacity:1;transform:none;animation:none;transition:none} .marquee{animation:none} html{scroll-behavior:auto} *{transition:none!important} } /* Footer legal row links */ .foot-legal a{color:var(--on-dark-mute);text-decoration:none} .foot-legal a:hover{color:var(--peach)} /* Contact page layout */ .contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px}} .form-card{max-width:none} /* Hero without art — single-column editorial */ .wrap.hero-solo{max-width:1180px} .hero-solo > *{max-width:52rem} .hero-solo h1{font-size:clamp(3rem,8vw,6.8rem)} .hero-solo .lede{max-width:38rem} /* ---------- Blog index ---------- */ .post-list{display:grid;gap:2px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .post-card{background:var(--paper);padding:38px 0} .post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--text-mute);margin-bottom:14px} .post-tag{background:rgba(232,168,124,.28);color:var(--terracotta-deep);padding:5px 10px;font-weight:600;letter-spacing:.12em} .post-card h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:12px;max-width:36rem} .post-card h2 a:hover{color:var(--terracotta)} .post-card p{color:var(--text-mute);max-width:44rem;margin-bottom:18px} /* ---------- Article ---------- */ .article-head{padding-top:56px;padding-bottom:8px} .article-head > *{max-width:46rem} .crumb{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);margin-bottom:22px} .crumb a{color:var(--terracotta-deep)} .article-head h1{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:20px} .byline{margin-top:26px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute); display:flex;gap:10px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)} .article-body{padding-top:34px} .article-body > p:first-of-type{font-size:1.12rem;line-height:1.75} .article-body h2{font-size:1.7rem;margin:48px 0 14px;scroll-margin-top:90px} .article-body ol{margin:0 0 20px 22px;color:var(--text-mute)} .article-body ol li{margin-bottom:10px} /* ---------- Instant site check ---------- */ .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .scan-form{display:flex;gap:12px;flex-wrap:wrap;max-width:44rem} .scan-form input[type=text]{flex:1;min-width:240px;padding:17px 20px;border:1.5px solid var(--line); background:var(--paper-2);font-family:inherit;font-size:1.05rem;color:var(--forest);border-radius:2px} .scan-form input[type=text]:focus{outline:none;border-color:var(--terracotta)} .scan-note{margin-top:12px;font-size:.8rem;color:var(--text-mute)} .scan-result{margin-top:44px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;overflow:hidden} .score-head{display:flex;gap:32px;align-items:center;padding:36px 34px;flex-wrap:wrap;border-bottom:1px solid var(--line)} .score-ring{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; border:6px solid var(--sage);background:rgba(135,168,120,.1);line-height:1} .score-ring.good{border-color:var(--sage);background:rgba(135,168,120,.14)} .score-ring.mid{border-color:var(--peach);background:rgba(232,168,124,.16)} .score-ring.bad{border-color:var(--terracotta);background:rgba(196,101,74,.12)} .score-num{font-family:'DM Serif Display',serif;font-size:2.7rem;color:var(--forest)} .score-of{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);margin-top:2px} .score-copy{flex:1;min-width:16rem} .scanned{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta-deep);margin-bottom:8px} .score-copy h2{font-size:clamp(1.3rem,2.6vw,1.9rem);margin-bottom:8px} .score-copy p{font-size:.86rem;color:var(--text-mute)} .check-list{list-style:none;padding:8px 0} .check-list li{display:flex;gap:15px;align-items:flex-start;padding:15px 34px;border-bottom:1px solid #EDF2EE} .check-list li:last-child{border-bottom:none} .check-list .ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.7rem; flex-shrink:0;margin-top:2px;color:#fff} .check-list .p .ico{background:var(--sage)} .check-list .f .ico{background:var(--terracotta)} .cbody{flex:1;min-width:0} .clabel{display:block;font-weight:600;font-size:.94rem} .cdetail{display:block;font-size:.84rem;color:var(--text-mute);margin-top:2px} .csign{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute); white-space:nowrap;padding-top:4px;flex-shrink:0} .csign:hover{color:var(--terracotta)} .check-list .f .clabel{color:var(--terracotta-deep)} .scan-cta{background:rgba(232,168,124,.14);border-top:1px solid var(--line);padding:34px} .scan-cta h3{font-size:1.35rem;font-style:italic;margin-bottom:10px} .scan-cta p{font-size:.93rem;color:var(--text-mute);margin-bottom:20px;max-width:44rem} @media(max-width:600px){ .score-head,.check-list li,.scan-cta{padding-left:22px;padding-right:22px} .csign{display:none} } /* ---------- Scan recommendations ---------- */ .rec-block{margin-top:44px;max-width:46rem} .rec-block h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:14px} .rec-group{margin-top:26px;border-radius:12px;overflow:hidden;border:1px solid var(--line)} .rec-group.free{background:rgba(135,168,120,.09);border-color:rgba(135,168,120,.4)} .rec-group.paid{background:var(--paper-2)} .rec-head{padding:24px 30px;border-bottom:1px solid var(--line)} .rec-tag{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600; padding:6px 11px;margin-bottom:10px} .free .rec-tag{background:var(--sage);color:#fff} .paid .rec-tag{background:var(--terracotta);color:#fff} .rec-head p{font-size:.9rem;color:var(--text-mute);max-width:44rem} .rec-item{padding:22px 30px;border-bottom:1px solid #EDF2EE} .rec-item:last-child{border-bottom:none} .rec-item h3{font-size:1.12rem;font-style:italic;margin-bottom:8px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap} .rec-sign{font-size:9px;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)} .rec-why{font-size:.92rem;color:var(--text-mute);margin-bottom:8px} .rec-fix{font-size:.88rem;color:var(--text-mute);margin-bottom:10px} .rec-plan{margin-top:26px;background:var(--forest-ink);color:var(--paper);border-radius:12px;padding:36px 34px} .rec-plan h3{font-size:1.6rem;color:var(--paper);margin-bottom:10px} .rec-plan p{color:var(--on-dark-mute);max-width:44rem} .scan-cta.standalone{margin-top:26px;border:1px solid var(--line);border-radius:12px} .scan-attached{background:rgba(135,168,120,.16);border-left:3px solid var(--sage);padding:15px 18px; margin-bottom:22px;font-size:.88rem;border-radius:0 6px 6px 0} .scan-attached strong{display:block;margin-bottom:3px} .scan-attached span{color:var(--text-mute)} @media(max-width:600px){.rec-head,.rec-item{padding-left:20px;padding-right:20px}} /* ========================================================= THE MACHINE ROOM — zoned glow system (merge proposal, rolled in) Neon and paper don't blend, so we zone them: paper = the human story (serif, warm, UNCHANGED above) dark = the machine room (panels, connectors, mono, glow) Discipline: 1. Glow never touches paper — these classes render only on dark surfaces (.machine bands, .rescue-vis, .health). 2. Max two dark bands per page. Punctuation, not paragraph. 3. Panels state facts. If a panel isn't true, delete it. 4. Serif stays on paper; mono stays in the machine. Contrast — measured, same rules as the tokens at the top: peach #E8A87C on floor #202C1B = 7.18 AA · on deep = 4.55 AA sage #87A878 on floor = 5.50 AA dim #9DB392 on floor = 6.47 AA (mono labels) terracotta on floor = 3.69 — glow/rules ONLY, never small text ========================================================= */ :root{ --machine-floor:#202C1B; --mono-dim:#9DB392; --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace; --glow-p:rgba(232,168,124,.32); --glow-s:rgba(135,168,120,.38); --glow-t:rgba(196,101,74,.42); } /* Ambient machine light — lives INSIDE dark bands only */ .machine{position:relative;overflow:hidden} .machine::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(560px 300px at 16% 24%,rgba(196,101,74,.13),transparent 65%), radial-gradient(680px 360px at 84% 70%,rgba(135,168,120,.12),transparent 65%)} .machine>.wrap{position:relative;z-index:1} /* Panels */ .panel{background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015) 55%),var(--machine-floor); border:1px solid rgba(232,168,124,.22);border-radius:6px;padding:15px 17px;text-align:left; font-family:var(--mono);font-size:.72rem;line-height:1.55;color:var(--on-dark-mute); box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 14px 34px rgba(0,0,0,.32),0 0 26px -8px var(--glow-p)} .panel.gs{border-color:rgba(135,168,120,.3);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 14px 34px rgba(0,0,0,.32),0 0 26px -8px var(--glow-s)} .panel-head{display:flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--mono-dim);margin-bottom:11px;white-space:nowrap} .pdot{width:6px;height:6px;border-radius:50%;background:var(--peach);box-shadow:0 0 8px var(--glow-p);flex-shrink:0} .pdot.s{background:var(--sage);box-shadow:0 0 8px var(--glow-s)} .pdot.t{background:var(--terracotta);box-shadow:0 0 8px var(--glow-t)} /* decorative dot, never text */ .prow{display:flex;justify-content:space-between;gap:12px;padding:3px 0} .prow .k{color:var(--mono-dim)}.prow .v{color:var(--peach)} .pchips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px} .pchip{border:1px solid rgba(135,168,120,.4);color:var(--sage);padding:2px 8px;border-radius:2px;font-size:.66rem} .pchip.on{background:rgba(135,168,120,.16);color:#A8C79A} .pbar{height:5px;background:rgba(255,255,255,.08);border-radius:3px;margin:7px 0;position:relative;overflow:hidden} .pbar i{position:absolute;inset:0;right:auto;background:linear-gradient(90deg,var(--terracotta),var(--peach));border-radius:3px} .pcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:4px 0 9px} .pcal b{height:18px;border-radius:2px;background:rgba(255,255,255,.07)} .pcal b.bk{background:rgba(135,168,120,.35)} .pcal b.hot{background:var(--peach);box-shadow:0 0 8px var(--glow-p)} .pcode{color:var(--sage);font-size:.68rem;white-space:pre;overflow:hidden} .pcode .ck{color:var(--peach)} /* The rig: panels -> dotted connectors -> the page surface */ .rig{margin-top:52px} .rig-panels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch} .rig-connect{display:block;width:100%;height:74px;margin:-2px 0} .rig-connect line{stroke:var(--peach);stroke-width:1.2;stroke-dasharray:1 5;stroke-linecap:round;opacity:.65} .rig-connect line.s{stroke:var(--sage)} .rig-connect circle{fill:var(--peach)} .surface{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),var(--machine-floor); border:1px solid rgba(135,168,120,.32);border-radius:8px;overflow:hidden; box-shadow:0 -1px 0 rgba(168,199,154,.35),0 0 34px -6px var(--glow-s),0 18px 44px rgba(0,0,0,.35)} .surface-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08)} .surface-bar b{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)} .surface-bar .u{font-family:var(--mono);font-size:.68rem;color:var(--mono-dim);margin-left:8px;letter-spacing:.04em} .surface-body{padding:18px 20px 22px} .sk{background:rgba(255,255,255,.09);border-radius:3px} .sk.h1{height:14px;width:44%;margin-bottom:9px} .sk.tx{height:7px;width:62%;margin-bottom:16px} .sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .sk-card{border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:10px} .sk-card .im{height:34px;background:rgba(135,168,120,.18);border-radius:3px;margin-bottom:8px} .sk-card .l1{height:6px;width:80%;background:rgba(255,255,255,.1);border-radius:3px;margin-bottom:5px} .sk-card .l2{height:6px;width:52%;background:rgba(232,168,124,.35);border-radius:3px} .rig-caption{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mono-dim);text-align:center;margin-top:16px} @media(max-width:900px){ .rig-panels{grid-template-columns:1fr 1fr} .rig-connect{display:none} .surface{margin-top:18px} } @media(max-width:520px){.rig-panels{grid-template-columns:1fr}} /* Hero site-health strip — the signature ticker, restored as proof. A dark instrument on paper: the glow stays inside its own surface. */ .health{display:inline-flex;flex-wrap:wrap;align-items:stretch;margin-top:34px;border-radius:6px; background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0) 60%),var(--machine-floor); border:1px solid rgba(135,168,120,.32);box-shadow:0 14px 34px rgba(43,59,37,.22),0 0 26px -8px var(--glow-s); font-family:var(--mono);overflow:hidden} .health .cell{display:flex;flex-direction:column;gap:4px;padding:12px 18px;border-right:1px solid rgba(255,255,255,.08)} .health .cell:last-child{border-right:none} .health .hk{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mono-dim)} .health .hv{font-size:.74rem;color:var(--peach);display:flex;align-items:center;gap:7px;white-space:nowrap} .health .hv.ok{color:#9CC98B} .hdot{width:6px;height:6px;border-radius:50%;background:#9CC98B;box-shadow:0 0 8px var(--glow-s);animation:hpulse 2.4s ease-in-out infinite} @keyframes hpulse{0%,100%{opacity:1}50%{opacity:.35}} @media(prefers-reduced-motion:reduce){.hdot{animation:none}} @media(max-width:640px){.health{display:grid;grid-template-columns:1fr 1fr} .health .cell{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)} .health .cell:nth-last-child(-n+2){border-bottom:none}} /* Before/after cards: the panel treatment (rescue-vis + redesign page) */ .rv-card{font-family:var(--mono);border-radius:6px} .rv-card.pn-before{background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),var(--machine-floor); border:1px solid rgba(255,255,255,.14)} .rv-card.pn-after{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),var(--machine-floor); border:1px solid rgba(135,168,120,.38);box-shadow:0 0 26px -6px var(--glow-s)} .rv-arrow.machine-arrow{color:var(--sage);font-size:1rem;letter-spacing:.3em;text-align:left} .migrate{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;margin-top:48px} .migrate .step-arrow{font-family:var(--mono);color:var(--sage);font-size:1.15rem;letter-spacing:.28em;white-space:nowrap;text-shadow:0 0 12px var(--glow-s)} @media(max-width:820px){.migrate{grid-template-columns:1fr} .migrate .step-arrow{text-align:center;transform:rotate(90deg);margin:2px 0}} .gate{margin-top:22px} .gate .prow .v.ok{color:#9CC98B} /* ---- Sitewide rollout: the machine reaches every page ---- */ /* Footer = the studio's own machine room (renders on all pages) */ footer.machine::before{background:radial-gradient(700px 340px at 12% 10%,rgba(196,101,74,.10),transparent 65%), radial-gradient(760px 380px at 88% 90%,rgba(135,168,120,.10),transparent 65%)} .health.foot{display:flex;margin:0 0 40px;width:100%;justify-content:space-between; border-color:rgba(135,168,120,.24);box-shadow:0 0 22px -10px var(--glow-s)} .health.foot .cell{flex:1;padding:11px 16px} @media(max-width:640px){.health.foot{display:grid}} /* CTA band chips become instrument tags (mono, no glow — terracotta zone) */ .cta-band .chk{font-family:var(--mono);letter-spacing:.12em} /* Pricing plan builder summary: the calculator gets the panel treatment */ .summary{background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015) 55%),var(--machine-floor); border:1px solid rgba(135,168,120,.32);border-radius:6px; box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 16px 38px rgba(0,0,0,.3),0 0 28px -8px var(--glow-s)} .summary .sum-rows,.summary .total,.summary .setup,.summary .sum-note{font-family:var(--mono)} .summary .sum-rows{font-size:.8rem} .summary .sum-note{font-size:.66rem} /* Compact fact panel used inside per-page dark bands */ .band-panel{max-width:30rem;margin:34px auto 0} .band-panel .prow .v.ok{color:#9CC98B} /* Inside the machine, even the big number is mono */ .summary .total .amt{font-family:var(--mono);font-size:2.15rem;letter-spacing:-.02em} /* Error pages: a status instrument on paper (glow stays inside its own dark surface) */ .status-panel,.wrap.page-hero > .status-panel{max-width:26rem;margin-top:30px} /* ---- Theme toggle (nav) ---- */ .theme-toggle{ background:none;border:1px solid var(--line);border-radius:50%; width:38px;height:38px;min-height:38px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; font-size:1rem;line-height:1;color:var(--forest); transition:border-color .2s ease;margin-left:6px;flex-shrink:0} .theme-toggle:hover{border-color:var(--forest)} .theme-toggle .ico-moon{display:inline} .theme-toggle .ico-sun{display:none} [data-theme="dark"] .theme-toggle .ico-moon{display:none} [data-theme="dark"] .theme-toggle .ico-sun{display:inline} [data-theme="dark"] .theme-toggle{color:var(--peach);border-color:rgba(232,168,124,.35)} @media(max-width:1023px){.theme-toggle{margin-left:auto;margin-right:10px}} /* ========================================================= CLIENT + ADMIN PORTAL — calm operational workspace ========================================================= */ .portal-section{padding:12px 0 84px} .portal-nav{display:flex!important;align-items:center;gap:20px;flex-wrap:wrap} .portal-nav form{margin:0}.portal-nav-button{appearance:none;border:0;background:none;color:var(--text);font:inherit;font-size:.86rem;cursor:pointer;padding:8px 0} .portal-nav-button:hover{text-decoration:underline} .portal-back{display:inline-block;margin-bottom:24px;font-weight:600} .portal-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:46px} .portal-card{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:0 10px 30px rgba(43,59,37,.06)} .portal-card-accent{background:var(--forest-ink);color:var(--paper)} .portal-card-accent p,.portal-card-accent .portal-kicker{color:var(--on-dark-mute)} .portal-card>strong{display:block;font-family:'DM Serif Display',serif;font-size:2.65rem;line-height:1;margin:10px 0} .portal-card>strong.portal-card-text{font-family:'Fira Sans',sans-serif;font-size:1.15rem;line-height:1.35} .portal-kicker{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-mute);margin-bottom:8px} .portal-grid-main{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:28px;align-items:start} .portal-grid-main>aside{display:grid;gap:20px;position:sticky;top:90px} .portal-section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 0 20px} .portal-section-head h2{margin:4px 0 0}.portal-project-list{display:grid;gap:18px} .portal-project-card{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:26px;transition:transform .18s ease,border-color .18s ease} .portal-project-card:hover{transform:translateY(-2px);border-color:rgba(74,103,65,.38)} .portal-project-card h3{font-size:1.55rem;margin:3px 0}.portal-project-top{display:flex;justify-content:space-between;gap:20px;align-items:start} .portal-pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;padding:5px 10px;font-family:var(--mono);font-size:.65rem;letter-spacing:.04em;white-space:nowrap;color:var(--text-mute)} .portal-progress-label{display:flex;justify-content:space-between;gap:20px;font-size:.82rem;font-weight:600;margin:20px 0 8px} .portal-progress{height:8px;background:rgba(74,103,65,.12);border-radius:8px;overflow:hidden;margin-bottom:18px} .portal-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--forest),var(--sage));border-radius:8px} .portal-progress-large{height:12px;margin:14px 0 28px} .portal-empty{border:1px dashed rgba(74,103,65,.3);border-radius:12px;padding:32px;text-align:center;color:var(--text-mute)} .portal-activity{list-style:none;padding:0;margin:22px 0 0}.portal-activity li{display:grid;grid-template-columns:10px 1fr;gap:12px;padding:0 0 20px;position:relative} .portal-activity li:not(:last-child)::before{content:"";position:absolute;left:4px;top:11px;bottom:0;border-left:1px solid var(--line)} .portal-dot{width:9px;height:9px;border-radius:50%;background:var(--sage);margin-top:5px;z-index:1}.portal-activity strong,.portal-activity time{display:block}.portal-activity time{font-size:.75rem;color:var(--text-mute);margin-top:3px} .portal-next{border-left:4px solid var(--terracotta-deep);margin-bottom:20px}.portal-next h2{margin:8px 0 0} .portal-stages{list-style:none;padding:0;margin:0}.portal-stages li{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)} .portal-stage-num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);font-family:var(--mono);font-size:.76rem}.portal-stages li div>strong,.portal-stages li div>span{display:block}.portal-stages li div>span{font-size:.76rem;color:var(--text-mute)} .portal-stages .is-complete .portal-stage-num{background:var(--forest);border-color:var(--forest);color:var(--paper)}.portal-stages .is-in_progress .portal-stage-num,.portal-stages .is-ready_review .portal-stage-num,.portal-stages .is-waiting_client .portal-stage-num{border-color:var(--terracotta-deep);color:var(--terracotta-deep)} .portal-link-list>div,.portal-resource-row,.portal-document-list li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .portal-link-list>div>div:first-child{display:grid;gap:7px}.portal-document-list{list-style:none;padding:0}.portal-document-list li div span,.portal-resource-row div span{display:block;font-size:.75rem;color:var(--text-mute)} .portal-price{font-family:'DM Serif Display',serif;font-size:2rem}.portal-price small{font-family:'Fira Sans',sans-serif;font-size:.8rem}.portal-checks{padding-left:0;list-style:none}.portal-checks li{padding:7px 0 7px 24px;position:relative}.portal-checks li::before{content:"✓";position:absolute;left:0;color:var(--forest);font-weight:700} .portal-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin-bottom:42px}.portal-table{width:100%;border-collapse:collapse;background:var(--paper-2);font-size:.88rem}.portal-table th,.portal-table td{text-align:left;padding:15px 17px;border-bottom:1px solid var(--line);vertical-align:middle}.portal-table th{font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-mute)}.portal-table tbody tr:last-child td{border-bottom:0} .portal-form{max-width:46rem;margin:40px auto 0}.portal-meta{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--mono);font-size:.7rem;color:var(--text-mute);margin-top:20px}.portal-request-body{white-space:normal;line-height:1.75} .portal-comments{display:grid;gap:14px;margin:20px 0 28px}.portal-comments article{border-left:3px solid var(--sage);background:rgba(135,168,120,.08);padding:16px 18px;border-radius:0 8px 8px 0}.portal-comments article.is-private{border-left-color:var(--terracotta-deep);background:rgba(196,101,74,.08)}.portal-comments article>div{display:flex;justify-content:space-between;gap:16px}.portal-comments time{font-size:.72rem;color:var(--text-mute)}.portal-comments p{margin:8px 0 0} .portal-admin-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:30px;align-items:start}.portal-admin-forms{display:grid;gap:16px;position:sticky;top:90px}.portal-card summary{cursor:pointer;padding:4px 0}.portal-card details,.portal-card form{margin-top:18px}.portal-admin-stages{display:grid}.portal-admin-stages form{display:grid;grid-template-columns:minmax(150px,1fr) minmax(160px,.7fr) auto auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);margin:0}.portal-inline-form{display:flex;gap:10px}.portal-inline-form input{flex:1}.portal-check-field{display:flex;align-items:center;gap:10px}.portal-check-field input{width:auto}.portal-check-field label{margin:0}.portal-notify-check{display:flex;align-items:center;gap:7px;font-size:.76rem;white-space:nowrap}.portal-notify-check input{width:auto} .portal-upload{padding-top:18px}.portal-upload progress{width:100%;height:9px;margin-top:12px;accent-color:var(--forest)}.portal-upload-status{min-height:1.5em;margin-top:10px;font-size:.82rem;color:var(--text-mute)} .portal-mfa-qr{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0 20px}.portal-mfa-qr img{display:block}.portal-mfa-secret{display:block;overflow-wrap:anywhere;padding:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:7px;margin:10px 0 18px;user-select:all} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} [data-theme="dark"] .portal-card,[data-theme="dark"] .portal-project-card,[data-theme="dark"] .portal-table{background:var(--paper-2)} @media(max-width:900px){.portal-summary{grid-template-columns:1fr 1fr}.portal-grid-main,.portal-admin-grid{grid-template-columns:1fr}.portal-grid-main>aside,.portal-admin-forms{position:static}.portal-summary .portal-card:last-child{grid-column:1/-1}} @media(max-width:640px){.portal-section{padding-bottom:56px}.portal-summary{grid-template-columns:1fr}.portal-summary .portal-card:last-child{grid-column:auto}.portal-card,.portal-project-card{padding:20px}.portal-project-top,.portal-section-head,.portal-link-list>div,.portal-document-list li{align-items:flex-start;flex-direction:column}.portal-table th,.portal-table td{padding:12px}.portal-admin-stages form{grid-template-columns:1fr}.portal-inline-form{flex-direction:column}.portal-comments article>div{display:block}.portal-nav{gap:12px}} @media(prefers-reduced-motion:reduce){.portal-project-card{transition:none}.portal-project-card:hover{transform:none}} /* CRM-light client directory and relationship record */ .crm-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.45fr);gap:24px;align-items:start;margin-bottom:44px} .crm-filters{display:grid;grid-template-columns:minmax(220px,1fr) repeat(2,minmax(140px,.45fr)) auto;gap:12px;align-items:end;margin:0} .crm-filters .field,.crm-form-grid .field{margin:0}.crm-create{padding:20px}.crm-create>summary{list-style:none}.crm-create>summary::-webkit-details-marker{display:none} .crm-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px} .crm-client-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .crm-client-card{display:flex;flex-direction:column;min-height:235px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:24px;color:var(--text);box-shadow:0 10px 30px rgba(43,59,37,.05);transition:transform .18s ease,border-color .18s ease} .crm-client-card:hover{transform:translateY(-2px);border-color:rgba(74,103,65,.42)}.crm-client-card h2{font-size:1.45rem;margin:5px 0 0}.crm-client-card>p{color:var(--text-mute);overflow-wrap:anywhere} .crm-client-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.crm-card-meta{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px;font-size:.76rem;color:var(--text-mute)} .crm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.crm-tags span{padding:4px 8px;border-radius:99px;background:rgba(135,168,120,.14);font-family:var(--mono);font-size:.62rem;color:var(--forest)} .crm-health-healthy{border-color:rgba(74,103,65,.35);color:var(--forest)}.crm-health-attention{border-color:rgba(232,168,124,.7);color:#8a552f}.crm-health-at_risk{border-color:rgba(196,101,74,.55);color:var(--terracotta-deep)} .crm-record-head{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;margin-bottom:30px}.crm-record-head h2{font-size:clamp(2rem,4vw,3.2rem);margin:10px 0}.crm-record-head p{max-width:48rem;color:var(--text-mute)} .crm-record-status,.crm-record-actions,.crm-checks{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.crm-record-actions{justify-content:flex-end} .crm-summary{margin-bottom:30px}.crm-record-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,.78fr);gap:28px;align-items:start}.crm-record-main,.crm-record-aside{display:grid;gap:24px}.crm-record-aside{position:sticky;top:90px} .crm-contact{border-top:1px solid var(--line);padding:17px 0}.crm-contact>summary{display:flex;justify-content:space-between;gap:18px;align-items:center;cursor:pointer}.crm-contact>summary span:first-child{display:grid;gap:3px}.crm-contact>summary small{color:var(--text-mute)}.crm-contact>form{margin-top:20px} .crm-checks{margin:2px 0 18px}.crm-checks label,.crm-checkbox{display:flex;gap:8px;align-items:center;font-size:.82rem}.crm-checks input,.crm-checkbox input{width:auto}.crm-invite-form{margin-top:12px!important}.crm-add{border-top:1px solid var(--line);padding-top:18px}.crm-add>summary{cursor:pointer} .crm-project-list{display:grid}.crm-project-list>a{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:17px 0;border-top:1px solid var(--line);color:var(--text)}.crm-project-list>a>div{display:grid;gap:4px}.crm-project-list>a span:not(.portal-pill){font-size:.78rem;color:var(--text-mute)} .crm-interaction-form{padding:20px;background:rgba(135,168,120,.08);border:1px solid rgba(135,168,120,.25);border-radius:10px;margin-bottom:28px}.crm-timeline{list-style:none;padding:0;margin:0}.crm-timeline li{display:grid;grid-template-columns:34px 1fr;gap:13px;padding:0 0 24px}.crm-timeline-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--forest);color:var(--paper);font-family:var(--mono);font-size:.7rem}.crm-timeline li>div>div{display:flex;justify-content:space-between;gap:16px}.crm-timeline time,.crm-timeline small{font-size:.72rem;color:var(--text-mute)}.crm-timeline p{margin:8px 0;line-height:1.65} [data-theme="dark"] .crm-client-card{background:var(--paper-2)}[data-theme="dark"] .crm-tags span{color:var(--sage)} @media(max-width:1080px){.crm-client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-toolbar{grid-template-columns:1fr}.crm-filters{grid-template-columns:minmax(220px,1fr) repeat(2,minmax(130px,.5fr)) auto}} @media(max-width:800px){.crm-record-grid{grid-template-columns:1fr}.crm-record-aside{position:static}.crm-record-head{align-items:flex-start;flex-direction:column}.crm-record-actions{justify-content:flex-start}} @media(max-width:640px){.crm-client-grid,.crm-form-grid,.crm-filters{grid-template-columns:1fr}.crm-client-card{min-height:0}.crm-client-heading,.crm-card-meta,.crm-contact>summary,.crm-project-list>a,.crm-timeline li>div>div{align-items:flex-start;flex-direction:column}.crm-filters .btn{width:100%}} @media(prefers-reduced-motion:reduce){.crm-client-card{transition:none}.crm-client-card:hover{transform:none}} /* Project templates */ .template-layout{display:grid;grid-template-columns:minmax(250px,.65fr) minmax(0,2fr);gap:28px;align-items:start}.template-sidebar{position:sticky;top:90px}.template-main{display:grid;gap:24px}.template-list{display:grid;margin-bottom:22px}.template-list>a{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 12px;border-bottom:1px solid var(--line);color:var(--text);border-radius:7px}.template-list>a.is-current{background:rgba(135,168,120,.14)}.template-list span:first-child{display:grid;gap:3px}.template-list small{color:var(--text-mute)}.template-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.template-heading h2{margin:10px 0}.template-heading form{margin:0}.template-stages{display:grid;gap:18px;margin-bottom:22px}.template-stage{border:1px solid var(--line);border-radius:10px;padding:18px}.template-stage-name{display:grid;grid-template-columns:34px minmax(160px,1fr) auto;gap:12px;align-items:center;margin:0!important}.template-items{list-style:none;padding:0;margin:14px 0 0}.template-items li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}.template-items li>details{min-width:0}.template-items li>details>summary{display:grid;gap:4px;cursor:pointer}.template-items li>details>form{margin-top:16px}.template-items small{color:var(--text-mute)}.template-add-item{margin-top:22px} /* Jira-style internal project board */ .project-board-shell{margin-bottom:38px}.board-add{position:relative}.board-add>summary{list-style:none}.board-add>summary::-webkit-details-marker{display:none}.board-add[open]>form{position:absolute;z-index:20;right:0;top:42px;width:min(680px,90vw);max-height:75vh;overflow:auto}.project-board{display:grid;grid-template-columns:repeat(6,minmax(255px,1fr));gap:14px;overflow-x:auto;padding:4px 2px 20px;scrollbar-color:var(--sage) transparent}.board-column{min-height:360px;background:rgba(74,103,65,.055);border:1px solid var(--line);border-radius:10px;padding:12px;transition:background .15s ease,border-color .15s ease}.board-column>header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:6px 5px 13px}.board-column>header h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.board-column>header span{display:grid;place-items:center;min-width:24px;height:24px;border-radius:99px;background:var(--paper-2);font-size:.72rem}.board-cards{display:grid;gap:10px}.board-card{background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:8px;padding:13px;box-shadow:0 6px 18px rgba(43,59,37,.05);cursor:grab}.board-card.priority-high{border-left-color:var(--peach)}.board-card.priority-urgent{border-left-color:var(--terracotta-deep)}.board-card.priority-low{border-left-color:rgba(135,168,120,.45)}.board-card>summary{list-style:none;display:grid;gap:7px;cursor:pointer}.board-card>summary::-webkit-details-marker{display:none}.board-card>summary strong{font-size:.9rem;line-height:1.35}.board-card>summary small{font-size:.7rem;color:var(--text-mute)}.board-card>form{cursor:default;margin-top:16px}.board-card .crm-form-grid{grid-template-columns:1fr}.board-card.is-dragging{opacity:.4}.board-column.is-drag-over{background:rgba(135,168,120,.18);border-color:var(--sage)}.board-move-form{display:none} [data-theme="dark"] .board-column{background:rgba(255,255,255,.025)}[data-theme="dark"] .board-card,[data-theme="dark"] .board-column>header span{background:var(--paper-2)} @media(max-width:900px){.template-layout{grid-template-columns:1fr}.template-sidebar{position:static}} @media(max-width:640px){.template-stage-name{grid-template-columns:34px 1fr}.template-stage-name .btn{grid-column:2}.template-heading{flex-direction:column}.board-add[open]>form{position:fixed;inset:10vh 4vw auto;width:92vw}.project-board{grid-template-columns:repeat(6,82vw)}} @media(prefers-reduced-motion:reduce){.board-column{transition:none}} /* Artifacts and client approval gates */ .project-head-actions{display:flex;align-items:center;gap:10px}.delivery-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}.delivery-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,.65fr);gap:28px;align-items:start}.delivery-main,.delivery-aside{display:grid;gap:24px}.delivery-aside{position:sticky;top:90px}.delivery-add{position:relative}.delivery-add>summary{list-style:none}.delivery-add>summary::-webkit-details-marker{display:none}.delivery-add[open]>form{position:absolute;z-index:20;right:0;top:42px;width:min(720px,90vw);max-height:76vh;overflow:auto;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 20px 50px rgba(43,59,37,.2)} .artifact-list{display:grid;gap:12px}.artifact-card{border:1px solid var(--line);border-radius:10px;background:var(--paper-2);padding:18px}.artifact-card>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;cursor:pointer;list-style:none}.artifact-card>summary::-webkit-details-marker{display:none}.artifact-card>summary div{display:grid;gap:4px}.artifact-card small,.artifact-type,.approval-links{color:var(--text-mute);font-size:.72rem}.artifact-type{display:inline-flex;padding:5px 8px;border-radius:5px;background:rgba(135,168,120,.15);font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}.artifact-body{padding:18px 0 0 0}.artifact-copy{white-space:normal;background:rgba(135,168,120,.09);border-left:3px solid var(--sage);padding:16px 18px;margin:14px 0;line-height:1.7}.artifact-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.client-artifacts .artifact-card h3{margin:10px 0} .approval-list{display:grid;gap:14px}.approval-card,.client-approval{border:1px solid var(--line);border-left:4px solid var(--peach);border-radius:10px;padding:20px;background:var(--paper-2)}.approval-card.status-approved,.client-approval.status-approved{border-left-color:var(--sage)}.approval-card.status-changes_requested,.client-approval.status-changes_requested{border-left-color:var(--terracotta-deep)}.approval-card.status-withdrawn{opacity:.7}.approval-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.approval-head h3,.client-approval h3{margin:9px 0}.approval-head>span,.client-approval>div>span:not(.portal-pill){font-size:.75rem;color:var(--text-mute)}.approval-card blockquote,.client-approval blockquote{margin:16px 0;padding:14px 18px;border-left:3px solid var(--terracotta-deep);background:rgba(196,101,74,.07)}.approval-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.approval-create{margin-top:22px}.client-approvals{border-top:4px solid var(--peach)}.client-approval{margin-top:14px}.client-approval form{margin-top:18px} [data-theme="dark"] .artifact-card,[data-theme="dark"] .approval-card,[data-theme="dark"] .client-approval,[data-theme="dark"] .delivery-add[open]>form{background:var(--paper-2)} @media(max-width:900px){.delivery-grid{grid-template-columns:1fr}.delivery-aside{position:static}.delivery-summary{grid-template-columns:1fr 1fr}.delivery-summary .portal-card:last-child{grid-column:1/-1}} @media(max-width:640px){.delivery-summary{grid-template-columns:1fr}.delivery-summary .portal-card:last-child{grid-column:auto}.project-head-actions,.approval-head{align-items:flex-start;flex-direction:column}.delivery-add[open]>form{position:fixed;inset:8vh 4vw auto;width:92vw}.artifact-card>summary{grid-template-columns:1fr}.approval-actions .btn{width:100%}} /* Client action center, collaboration, launch readiness, and CRM reporting */ .client-project-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px}.client-project-nav a{padding:8px 12px;border:1px solid var(--line);border-radius:99px;color:var(--text);font-size:.75rem}.client-action-center{margin:8px 0 40px}.client-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.client-action-grid>a{display:block;color:var(--text);padding:20px}.client-action-grid h3{font-size:1rem;margin:14px 0 7px}.client-action-grid p{font-size:.75rem;color:var(--text-mute)}.client-action-grid .action-arrow{font-family:var(--body);font-size:.75rem;margin-top:15px;color:var(--forest)} .discussion-thread{padding:20px 0;border-top:1px solid var(--line)}.discussion-head,.discussion-settings{display:flex;gap:12px;align-items:center;justify-content:space-between}.discussion-settings{margin:0 0 18px}.discussion-settings input{flex:1}.discussion-settings label{display:flex;align-items:center;gap:7px;font-size:.75rem}.discussion-settings label input{width:auto}.discussion-messages{display:grid;gap:10px;margin:16px 0}.discussion-messages article{max-width:86%;padding:13px 15px;border-radius:9px;background:rgba(135,168,120,.1)}.discussion-messages article.is-client{margin-left:auto;background:rgba(232,168,124,.16)}.discussion-messages article.is-internal{border-left:3px solid var(--terracotta-deep);background:rgba(196,101,74,.08)}.discussion-messages p{margin:5px 0 8px;line-height:1.55}.discussion-messages time{font-size:.68rem;color:var(--text-mute)}.admin-discussion-grid{display:grid;gap:20px;margin-bottom:44px}.admin-discussion-grid>.discussion-thread{padding:24px}.launch-checklist,.launch-admin-list{display:grid;gap:10px;margin-top:18px}.launch-checklist article{display:flex;justify-content:space-between;align-items:center;gap:18px;border:1px solid var(--line);border-radius:9px;padding:15px}.launch-checklist article>div{display:grid;gap:4px}.launch-checklist article.is-complete{opacity:.7}.launch-checklist article.is-complete strong{text-decoration:line-through}.launch-checklist form{margin:0}.launch-admin-fields{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr)) auto auto;gap:10px;align-items:center}.launch-admin-fields label{display:flex;gap:7px;align-items:center;font-size:.72rem}.launch-admin-fields label input{width:auto} .crm-opportunity{display:grid;grid-template-columns:1fr minmax(460px,.8fr);align-items:end;gap:24px;margin-bottom:24px}.crm-opportunity form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin:0}.crm-opportunity .field{margin:0}.report-toolbar{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:18px}.report-toolbar .crm-filters{grid-template-columns:repeat(2,minmax(160px,1fr)) auto;margin:0}.report-save{display:flex;gap:8px;margin:0}.saved-view-list{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 24px}.saved-view{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}.saved-view a{padding:7px 4px 7px 12px;color:var(--text)}.saved-view form{margin:0}.saved-view button{border:0;background:transparent;padding:6px 10px;cursor:pointer;color:var(--text-mute)}.report-summary{grid-template-columns:repeat(4,1fr)}.report-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,.7fr);gap:24px;align-items:start}.report-grid aside{display:grid;gap:20px}.report-table-wrap{overflow:auto}.report-row{display:grid;gap:4px;padding:13px 0;border-top:1px solid var(--line);color:var(--text)}.report-row span{font-size:.72rem;color:var(--text-mute)} @media(max-width:1000px){.client-action-grid{grid-template-columns:repeat(2,1fr)}.report-summary{grid-template-columns:repeat(2,1fr)}.report-grid,.crm-opportunity{grid-template-columns:1fr}.launch-admin-fields{grid-template-columns:repeat(2,1fr)}.report-toolbar{align-items:stretch;flex-direction:column}} @media(max-width:640px){.client-action-grid,.report-summary,.crm-opportunity form,.launch-admin-fields{grid-template-columns:1fr}.discussion-settings,.launch-checklist article{align-items:flex-start;flex-direction:column}.discussion-messages article{max-width:100%}.report-save{flex-direction:column}} /* CRM portal-user administration */ .crm-access-list{display:grid;gap:20px}.crm-access-card{display:grid;gap:20px}.crm-access-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.crm-access-head h3{font-size:1.5rem;margin:7px 0 2px}.crm-access-head p{margin:0;color:var(--text-mute)}.crm-auth-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}.crm-auth-facts>div{padding:13px;border:1px solid var(--line);border-radius:8px}.crm-auth-facts dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-mute)}.crm-auth-facts dd{margin:7px 0 0;font-size:.78rem;overflow-wrap:anywhere}.crm-auth-facts code{font-size:.66rem}.crm-access-actions{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap}.crm-access-actions>form,.crm-danger>form{margin:0}.crm-danger{border:1px solid rgba(196,101,74,.35);border-radius:8px;padding:10px 13px}.crm-danger>summary{color:var(--terracotta-deep);font-size:.75rem}.crm-danger p{max-width:34rem;font-size:.76rem}.crm-danger input{margin-bottom:9px}.crm-danger .btn{border-color:var(--terracotta-deep);color:var(--terracotta-deep)} @media(max-width:800px){.crm-auth-facts{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.crm-access-head{flex-direction:column}.crm-auth-facts{grid-template-columns:1fr}.crm-access-actions{display:grid}.crm-access-actions .btn{width:100%}}