/* CutPA site. Tokens are the authoritative ones from docs/brand/ICON-HANDOFF.md.
   Dark ground, because the app is full-screen video and the site should feel
   like it. No webfont: the CSP forbids third-party loads and the brief forbids
   third-party anything, so Archivo is used if present and falls back if not. */
:root {
  --ground:#0B0D10; --text:#F4F5F6; --teal:#6FB3A9; --deep:#0F3A3A;
  --muted:#98A0A8; --dim:#767E87; --hairline:rgba(255,255,255,0.08);
}
*,*::before,*::after { box-sizing:border-box; }
html,body { background:var(--ground); }
body { margin:0; color:var(--text);
       font-family:Archivo,'Helvetica Neue',Helvetica,'Segoe UI',sans-serif;
       font-weight:400; -webkit-font-smoothing:antialiased; }
::selection { background:var(--teal); color:var(--deep); }
a { color:var(--teal); text-decoration:none; }
a:hover { opacity:0.85; transition:opacity 120ms ease-out; }
a:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }
img { max-width:100%; }

.wrap { max-width:720px; margin:0 auto; padding:clamp(40px,8vw,72px) 24px clamp(64px,10vw,110px); }
.back { font-size:13px; color:var(--dim); display:inline-block; margin-bottom:clamp(32px,6vw,52px); }
.back:hover { color:var(--text); opacity:1; }

/* Wordmark: two-tone PA suffix, the family device shared with MeetPA. */
.mark { display:flex; align-items:center; gap:14px; margin:0 0 clamp(28px,5vw,40px); }
.mark img { width:52px; height:52px; border-radius:12px; display:block; }
.mark .word { font-size:28px; font-weight:600; letter-spacing:-0.03em; line-height:1; }
.mark .word b { font-weight:600; color:var(--text); }
.mark .word i { font-weight:600; font-style:normal; color:var(--teal); }

h1 { margin:0 0 12px; font-size:clamp(32px,7vw,46px); font-weight:600;
     letter-spacing:-0.03em; text-wrap:balance; line-height:1.1; }
h2 { margin:clamp(32px,5vw,44px) 0 10px; font-size:clamp(19px,4.5vw,22px);
     font-weight:600; letter-spacing:-0.02em; }
p { margin:0 0 14px; font-size:17px; line-height:1.6; color:var(--muted); max-width:62ch; }
p.lead { color:var(--text); font-size:clamp(18px,4.4vw,21px); line-height:1.55; }
.updated { margin:0 0 clamp(32px,5vw,44px); font-size:14px; color:var(--dim); }
strong { color:var(--text); font-weight:600; }

ul { margin:0 0 14px; padding:0; list-style:none; max-width:62ch; }
ul li { font-size:17px; line-height:1.6; color:var(--muted); padding:0 0 0 20px;
        position:relative; margin-bottom:6px; }
ul li::before { content:""; position:absolute; left:2px; top:12px; width:6px; height:6px;
                border-radius:50%; background:var(--teal); opacity:0.7; }

.rule { border:0; border-top:1px solid var(--hairline); margin:clamp(40px,7vw,64px) 0 0; }
.price { display:inline-block; margin:clamp(24px,4vw,32px) 0 0; padding:14px 22px;
         border:1px solid var(--hairline); border-radius:10px; color:var(--text);
         font-size:17px; }
.price b { color:var(--teal); font-weight:600; }
footer { border-top:1px solid var(--hairline); margin-top:clamp(48px,8vw,80px);
         padding-top:24px; font-size:13px; color:var(--dim); }

/* The app, actually running. A real screenshot rather than a mockup: the point
   of the page is that this thing exists and works, and a rendered mockup of an
   editor is exactly what an editor that does not exist would show. */
.shot { margin: clamp(30px,6vw,44px) 0 0; text-align: center; }
.shot img { width: 322px; max-width: 86%; border-radius: 22px;
            border: 1px solid var(--hairline);
            box-shadow: 0 18px 50px rgba(0,0,0,0.55); }
.shot figcaption { margin-top: 14px; font-size: 13px; color: var(--dim);
                   max-width: 42ch; margin-inline: auto; line-height: 1.5; }