/* Phramed marketing site, Direction A: Contact Sheet (2026-11-13, P1 of the public-site redesign).
   Built from the Nov 11 spec (phramed-refresh/build-a/html/tokens.css) minus its mockup-only strip
   (.wip) and minus its Google Fonts @import: every face is self-hosted here, same as site.css.
   Loads AFTER /site.css and replaces /site-v2.css (the Nov 7 gold and crimson layer). P1 swapped it
   in on /; P2 (Nov 13) moved the seven other marketing pages and /guide. site-v2.css is kept on
   disk but nothing links it. Rollback is git history: P2 rebuilt the page markup, so putting the
   old link back on its own does not restore a page.

   Final decisions (Keegan, Nov 13): Paper #f1f0eb ground, Ink #111111, Plum #8a3d63 for the one
   action, lime #c6f432 only for a pick and always with an Ink edge, never Plum text on Ink.
   Anton is the only title face; Archivo and IBM Plex Mono do everything else. */

/* Anton, OFL 1.1 (license: /fonts/anton-OFL.txt). Latin subset, the same file Google serves. */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/anton-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* approved colors */
  --paper:#f1f0eb; --ink:#111111; --plum:#8a3d63; --lime:#c6f432;
  /* derived neutrals: tints and shades of the four, no new hues */
  --sheet:#f7f6f2;            /* raised print surface */
  --mut:#4a4945;              /* secondary text on Paper */
  --mut-ink:#bdbcb6;          /* secondary text on Ink */
  --rule:rgba(17,17,17,.16);  /* hairlines */
  --rule-strong:#111111;      /* section rules */
  --plum-press:#723251;       /* Plum, 18% Ink, hover and press */
  --on-plum:#ffffff;
  /* site.css names, pointed at the new values so any shared rule left on this page agrees */
  --muted:var(--mut); --faint:#5c5b56; --card:var(--sheet); --accent:var(--plum); --accent-deep:var(--plum-press);
  --rule-soft:var(--rule);
  /* type */
  --disp:"Anton",Impact,sans-serif;          /* page title only, one per page */
  --sans:"Archivo",Arial,sans-serif;         /* headings, body, buttons */
  --mono:"IBM Plex Mono",ui-monospace,monospace; /* frame numbers, times, counts, labels */
  --t-title:112px; --t-title-m:60px;
  --t-h2:46px; --t-h2-m:32px;
  --t-h3:22px;
  --t-lede:20px; --t-lede-m:17px;
  --t-body:16.5px;
  --t-small:14px;
  --t-mono:12.5px;
  /* spacing, 4 px base */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --gutter:56px; --gutter-m:18px; --max:1328px;
  /* radius encodes role */
  --r-print:0; --r-label:2px; --r-control:4px; --r-pick:50%;
  /* shadows: prints on paper, never hard offset */
  --sh-print:0 1px 2px rgba(17,17,17,.14),0 24px 40px -30px rgba(17,17,17,.6);
  --sh-print-lg:0 2px 4px rgba(17,17,17,.2),0 40px 70px -34px rgba(17,17,17,.7);
  --sh-sheet:0 1px 0 #fff inset,0 1px 2px rgba(17,17,17,.12),0 30px 50px -36px rgba(17,17,17,.6);
  --sh-btn:0 1px 0 rgba(255,255,255,.2) inset,0 10px 24px -12px rgba(138,61,99,.8);
  --hard-1:none; --hard-2:none; --hard-accent:none;
  --glow:radial-gradient(closest-side,rgba(255,255,255,.8),rgba(255,255,255,0));
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.07  0 0 0 0 0.07  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- Undo the site.css globals this look does not use -------------------------------------- */
body{padding-inline:0;font-stretch:100%}
body::before{display:none}            /* site.css grain overlay; the grain is now on the body ground */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---- Base ---------------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 var(--t-body)/1.6 var(--sans);color:var(--ink);background:var(--paper) var(--grain);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1.title{font:400 var(--t-title)/.9 var(--disp);text-transform:uppercase;letter-spacing:.004em}
h2{font:700 var(--t-h2)/1.04 var(--sans);letter-spacing:-.02em}
h3{font:700 var(--t-h3)/1.2 var(--sans);letter-spacing:-.01em}
.lede{font:400 var(--t-lede)/1.55 var(--sans);color:var(--mut);max-width:32em}
.mono{font-family:var(--mono)}
.lbl{font:500 var(--t-mono)/1.4 var(--mono);color:var(--mut)}
.num{display:inline;font:500 var(--t-mono)/1 var(--mono);letter-spacing:0;color:var(--ink)}

/* ---- Buttons: the action shape. 4 px, Plum. Labels never look like this. -------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:0;font:600 15px/1 var(--sans);letter-spacing:0;text-transform:none;
  padding:15px 22px;border-radius:var(--r-control);background:var(--plum);color:var(--on-plum);text-decoration:none;box-shadow:var(--sh-btn);border:0;white-space:nowrap;
  transform:none;transition:background-color .15s}
.btn:hover,.btn.hover{background:var(--plum-press);color:var(--on-plum);transform:none;box-shadow:var(--sh-btn)}
.btn:active{background:var(--plum-press);transform:none;box-shadow:none}
.btn:focus-visible,.btn.focus{outline:2px solid var(--ink);outline-offset:3px}
.btn.disabled{background:#d9d8d2;color:var(--mut);box-shadow:none}
.btn.sm{padding:11px 16px;font-size:14px}
.ghost{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--sans);padding:11px 15px;border-radius:var(--r-control);border:1px solid var(--ink);background:var(--sheet);color:var(--ink);text-decoration:none;white-space:nowrap}
.link{font:600 15px/1.3 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.link:hover{text-decoration-thickness:2px}

/* ---- Pick: the client's choice. Lime always carries an Ink edge. ---------------------------- */
.pick{display:inline-block;width:20px;height:20px;border-radius:var(--r-pick);border:1.5px solid var(--ink);background:transparent;flex:none}
.pick.on{background:var(--lime) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23111111' stroke-width='2.2' stroke-linecap='square'/></svg>") center/16px no-repeat;border-color:var(--ink)}
.picked{box-shadow:0 0 0 3px var(--lime),0 0 0 4.5px var(--ink)}
.count{display:inline-block;background:var(--lime);color:var(--ink);border:1px solid var(--ink);border-radius:var(--r-label);padding:2px 7px;font:600 12.5px/1.3 var(--mono)}
.ck{width:20px;height:20px;border:1.5px solid var(--ink);border-radius:3px;flex:none;background:var(--sheet)}
.ck.on{background:var(--lime) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23111111' stroke-width='2.2' stroke-linecap='square'/></svg>") center/16px no-repeat}

/* ---- Inputs --------------------------------------------------------------------------------- */
.field{display:block}
.field .lbl{display:block;margin-bottom:6px}
.input{display:block;width:100%;font:400 15.5px/1.2 var(--sans);color:var(--ink);background:var(--sheet);border:1px solid rgba(17,17,17,.5);border-radius:var(--r-control);padding:13px 14px}
.input:focus,.input.focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.input.error{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--plum)}
.input::placeholder{color:#6b6a65}
.help{font:400 13.5px/1.45 var(--sans);color:var(--mut);margin-top:6px}
.must{font:500 12px/1.3 var(--mono);color:var(--plum)}

/* ---- Prints and sheets ---------------------------------------------------------------------- */
.print{box-shadow:var(--sh-print);border-radius:0}
.print-lg{box-shadow:var(--sh-print-lg)}
.sheetbox{background:var(--sheet);box-shadow:var(--sh-sheet)}
.contact{position:relative;background:var(--ink);padding:20px 20px 14px;box-shadow:var(--sh-print-lg)}
.contact:before{content:"";position:absolute;inset:-48px -40px;z-index:-1;background:var(--glow)}
.contact .frames{display:grid;gap:8px}
.contact figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
.contact figcaption{margin-top:6px;font:500 11px/1 var(--mono);color:var(--mut-ink);display:flex;justify-content:space-between}
.contact figure.pk img{box-shadow:0 0 0 3px var(--lime)}
.contact figure.pk figcaption{color:var(--lime)}
.contact .cap{display:flex;justify-content:space-between;margin-top:12px;font:500 11.5px/1.3 var(--mono);color:var(--mut-ink)}
/* Selected toggle: Ink fill. Plum stays the action, so state never looks like a button. */
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:var(--r-control);padding:3px;background:var(--sheet)}
.seg span{font:600 14px/1 var(--sans);padding:9px 14px;border-radius:2px;color:var(--ink)}
.seg span.on{background:var(--ink);color:var(--paper)}
/* The striped placeholder (.ph) from the spec is left out on purpose: it never ships. */

/* ---- Site chrome ---------------------------------------------------------------------------- */
.site-h{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--gutter);border-bottom:1px solid var(--rule);background:var(--paper) var(--grain)}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;font:700 19px/1 var(--sans);letter-spacing:-.01em;text-transform:none;text-decoration:none;color:var(--ink)}
.logo img{width:30px;height:30px}
.site-h nav{display:flex;gap:28px;align-items:center;font:500 15px var(--sans)}
.site-h nav a{text-decoration:none;text-underline-offset:6px}
.site-h nav>a:not(.btn):hover,.site-h nav>a[aria-current="page"]{text-decoration:underline}
/* Phones: the same <details> menu as every other page (works with JavaScript off; site.js adds
   Escape and tap-outside). Collapses at 860, where the five links stop fitting. */
.site-h .menu{display:none;position:static}
.site-h .menu>summary{font:600 14px/1 var(--sans);border:1px solid var(--ink);border-radius:var(--r-control);padding:11px 12px;background:var(--sheet);color:var(--ink);list-style:none;cursor:pointer}
.site-h .menu>summary::-webkit-details-marker{display:none}
.site-h .menu[open]>summary{background:var(--ink);color:var(--paper)}
.site-h .menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--sheet);border:0;border-bottom:1px solid var(--ink);box-shadow:var(--sh-sheet);
  display:flex;flex-direction:column;z-index:100;max-height:calc(100svh - 72px);overflow-y:auto;overscroll-behavior:contain}
.site-h .menu-panel a{font:600 16px/1 var(--sans);text-transform:none;letter-spacing:0;text-decoration:none;min-height:52px;display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--gutter);border-bottom:1px solid var(--rule)}
.site-h .menu-panel a::after{content:"\2192";color:var(--mut)}
.site-h .menu-panel a[aria-current="page"]{background:var(--paper)}
.site-h .menu-panel a:last-child{border-bottom:0}
.site-h .menu-panel a:active{background:var(--ink);color:var(--paper)}
@media(max-width:860px){
  .site-h nav>a:not(.btn){display:none}
  .site-h nav{gap:10px}
  .site-h .menu{display:block}
}

/* Footer: Paper under an Ink rule (design answer 1, Nov 13). */
.site-f{margin-top:var(--s9);border-top:1px solid var(--ink);padding:36px var(--gutter) 44px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;font-size:14.5px;
  max-width:var(--max);margin-inline:auto}
.site-f .own{color:var(--mut);margin-top:10px;max-width:24em}
.site-f ul{list-style:none;display:grid;gap:2px;align-content:start}
.site-f ul a{text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.site-f ul a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- Sections ------------------------------------------------------------------------------- */
/* top only: the spec had "padding:96px 0 0", which wiped the .wrap side gutter on every .wrap.sec */
.sec{padding-top:var(--s9);border-bottom:0}
.rule-h{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.list{list-style:none;border-top:1px solid var(--ink)}
.list li{display:grid;grid-template-columns:56px 1fr;gap:8px 16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.list li .num{padding-top:5px}
.list li b{display:block;font:700 17px/1.35 var(--sans)}
.list li span{color:var(--mut);font-size:15.5px}
.close{margin-top:var(--s9);padding:var(--s8) 0;border-top:1px solid var(--ink);display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end}
.acts{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

@media(max-width:700px){
  :root{--gutter:var(--gutter-m)}
  h1.title{font-size:var(--t-title-m)}
  h2{font-size:var(--t-h2-m)}
  .lede{font-size:var(--t-lede-m)}
  .site-h{padding:10px var(--gutter)}
  .site-h .btn{padding:11px 14px;font-size:14px}
  .site-f{grid-template-columns:1fr 1fr;padding:28px var(--gutter) 32px}
  .site-f>div:first-child{grid-column:1/-1}
  .sec{padding-top:var(--s8)}
  .close{grid-template-columns:1fr;gap:22px;margin-top:var(--s8);padding:var(--s7) 0}
  .list li{grid-template-columns:40px 1fr}
  .contact:before{inset:-24px 0}
}
/* ---- Page components (P2, Nov 13) -----------------------------------------------------------
   Moved out of the homepage's own <style> once a second page needed them, rule for rule, so the
   homepage renders the same. Page-only layout still lives in each page's <style>. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;padding-top:72px;align-items:start;border:0}
.hero .lede{margin-top:28px}
.hero .acts{margin-top:30px}
.trial-note{margin-top:12px;font:500 var(--t-mono)/1.4 var(--mono);color:var(--mut)}
.quote{margin-top:46px;padding-top:18px;border-top:1px solid var(--ink);max-width:32em;font-size:16px;line-height:1.55}
.quote cite{display:block;margin-top:10px;font:500 12.5px/1.5 var(--mono);color:var(--mut);font-style:normal}
.m-only{display:none}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start;border:0}
.sec h2+.lede{margin-top:16px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:40px}
.mod{border-top:1px solid var(--ink);padding-top:18px}
.mod h3{margin-top:12px}
.mod ul{list-style:none;margin-top:12px;display:grid;gap:6px;color:var(--mut);font-size:15.5px}
.mod p{margin-top:10px;color:var(--mut);font-size:15.5px;max-width:30em}
.mod .link{display:inline-block;margin-top:16px;font-size:14.5px}
.cap{display:flex;justify-content:space-between;gap:20px;margin-top:12px;font:500 12.5px/1.4 var(--mono);color:var(--mut)}
.glowbox{position:relative;margin-top:36px}
.glowbox:before{content:"";position:absolute;inset:-60px -50px;z-index:-1;background:var(--glow)}
/* Real screenshots, no browser frame. */
.shot{display:block;box-shadow:var(--sh-print-lg);background:var(--sheet)}
.shot img{width:100%;height:auto}
.close .acts{justify-content:flex-end}
.rule-h .link{white-space:nowrap}

/* FAQ: a ruled accordion, plus and minus in Plex Mono. The first answer ships open. */
.fq{border-top:1px solid var(--ink);margin-top:26px}
.fq details{border-bottom:1px solid var(--rule)}
.fq summary{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;font:600 17px/1.35 var(--sans);list-style:none;cursor:pointer}
.fq summary::-webkit-details-marker{display:none}
.fq summary:after{content:"+";font:500 18px/1 var(--mono);flex:none}
.fq details[open] summary:after{content:"\2212"}
.fq details p{margin:-6px 0 20px;color:var(--mut);max-width:44em}
.fq a{text-underline-offset:4px}

/* The plan: one raised Sheet. The price is Archivo, not the title face. */
.plan{background:var(--sheet);box-shadow:var(--sh-print-lg);padding:30px}
.plan h3+.pr{margin-top:12px}
.plan .pr{display:flex;align-items:baseline;gap:12px;margin-top:22px}
.plan .pr b{font:800 88px/1 var(--sans);letter-spacing:-.03em}
.plan .pr span{color:var(--mut)}
.plan .alt{font-size:14.5px;color:var(--mut);margin-top:6px}
.plan ul{list-style:none;margin-top:24px;border-top:1px solid var(--ink)}
.plan li{padding:11px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.plan .btn,.plan .ghost{width:100%;justify-content:center;margin-top:24px}
.plan .trial-note,.plan .help{text-align:center}
/* Monthly and Yearly as real buttons: same look as .seg span, state in Ink, never Plum. */
/* site.css styles .seg as a two-column mono grid; undo that here. */
.seg{display:inline-flex;grid-template-columns:none;margin-bottom:0}
.seg button{min-height:0;font:600 14px/1 var(--sans);text-transform:none;letter-spacing:0;padding:9px 14px;border-radius:2px;color:var(--ink);background:transparent;border:0;cursor:pointer}
.seg button+button{border-left:0}
.seg button:active{transform:none}
.seg button.on{background:var(--ink);color:var(--paper)}

@media(max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr);gap:48px;padding-top:48px}
  .split{grid-template-columns:minmax(0,1fr);gap:30px}
}
@media(max-width:700px){
  .hero{padding-top:30px;gap:34px}
  .d-only{display:none}.m-only{display:block}
  .three{grid-template-columns:1fr;gap:24px}
  .glowbox:before{inset:-24px 0}
  .cap{flex-wrap:wrap}
  .rule-h{flex-wrap:wrap}
  .close .acts{justify-content:flex-start}
  .plan{padding:22px 18px}
  .plan .pr b{font-size:72px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}