/* ════════════════════════════════════════════════════════════════
   PROGNYX — content pages (/about, /methodology, the service page,
   the alternatives pages, /sample-brief, /privacy, /terms).

   This file deliberately speaks the HOMEPAGE's design language rather than
   inventing a second, safer one. The first version of it did the latter —
   everything became a rounded rectangle with a border and a tinted fill on
   flat cream, which is the generic-template look, and it read as cheaper than
   the site it belongs to.

   The rules borrowed from css/style.css, and why:
     · Paper is NEVER flat. Two radial tints + a vertical gradient + an SVG
       grain overlay + a vignette. Flat cream is what made these pages feel
       like a different, lesser object.
     · Structure comes from 1px hairlines and generous space, not from boxes.
       A container gets `gap:1px; background:var(--line)` and its children sit
       on paper — so the grid IS the line work.
     · Numbers are typography. A price is set at display scale like the
       homepage's stat numerals, not centred inside a panel.
     · Eyebrows are 11.5px mono at .26em tracking, in cobalt. Exactly the
       homepage value — this is the single most recognisable detail on the site.
     · Radius is reserved for genuinely card-like objects (the brief card, an
       inset note). Sections, tables, lists and figures get none.
   ════════════════════════════════════════════════════════════════ */

:root{
  --paper:#ECE7DC; --paper-2:#E4DDCF; --card:#F3EFE7;
  --ink:#16140F; --ink-soft:#3c372d; --mut:#6b6457; --faint:#a99f8c;
  --line:rgba(22,20,15,.14); --line-2:rgba(22,20,15,.26);
  --accent:#1f2be0; --accent-2:#4b5bff; --accent-lt:#a6b4ff; --accent-em:#141ab8;
  --accent-bright:#8190ff;
  --good:#1d7a55; --heat:#e0461f; --heat-2:#f1a02f;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,Segoe UI,sans-serif;
  --mono:'Space Mono','SF Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1180px;
  --measure:70ch;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17.5px;line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ░░ PAPER ░░ — the homepage's background system. Without this the pages are
   flat cream, which is most of why they looked machine-made. */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(31,43,224,.07), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(224,70,31,.05), transparent 55%),
    linear-gradient(180deg,#EFEAE0,#E7E0D3);
}
/* Grain + vignette in one fixed layer. Opacity is lower than the homepage's
   .42 because these pages are long-form reading, and grain over 1,500 words of
   body copy costs legibility the homepage doesn't have to pay for. */
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.30;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 240px rgba(22,20,15,.10);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent-em);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}

/* Fraunces ships playful alternates; the homepage pins them off. */
.brand,h1,h2,h3,.fig,.mono{font-optical-sizing:none;font-variation-settings:'opsz' 48,'WONK' 0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:10px 16px;z-index:99;font-family:var(--mono);font-size:13px}
.skip-link:focus{left:8px;top:8px}

/* ░░ HEADER ░░ ─────────────────────────────────────────────────── */
header.site{border-bottom:1px solid var(--line);position:relative;z-index:3}
header.site::before{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,#5562ff 45%,var(--accent-em) 100%)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px 20px;min-height:72px;padding-top:14px;padding-bottom:14px}
.brand{display:inline-flex;align-items:center;font-family:var(--display);font-weight:600;
  letter-spacing:.04em;font-size:18px;color:var(--ink);white-space:nowrap;flex:0 0 auto}
.brand::before{content:"";flex:0 0 auto;margin-right:12px;width:22px;height:22px;
  border:1.5px solid var(--ink);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--accent) 0 4px,transparent 4.5px);
  animation:ping 2.6s var(--ease) infinite}
.brand b{font-weight:inherit}
.brand:hover{text-decoration:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,43,224,.4)}70%,100%{box-shadow:0 0 0 9px rgba(31,43,224,0)}}
@media(prefers-reduced-motion:reduce){.brand::before{animation:none}}

.site nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px}
.site nav>a{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;color:var(--ink-soft);position:relative;padding:4px 1px}
.site nav>a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1.5px;
  background:var(--accent);transition:right .3s var(--ease)}
.site nav>a:hover{color:var(--accent-em);text-decoration:none}
.site nav>a:hover::after{right:0}
.site nav>a[aria-current="page"]{color:var(--accent-em)}
.site nav>a[aria-current="page"]::after{right:0}
/* Outline pill, not a filled blob — matches the homepage's .nav-cta. */
.site nav>a.nav-cta{border:1.4px solid var(--line-2);border-radius:50px;padding:9px 18px;
  color:var(--ink);letter-spacing:.12em;transition:background .35s var(--ease),color .35s,border-color .35s}
.site nav>a.nav-cta::after{display:none}
.site nav>a.nav-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lang{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;white-space:nowrap;
  display:inline-flex;align-items:center;border:1.4px solid var(--line-2);border-radius:50px;overflow:hidden}
.lang a{color:var(--mut);padding:7px 11px;line-height:1;transition:color .3s,background .35s var(--ease)}
.lang a:hover{text-decoration:none;color:var(--ink)}
.lang a.on{background:var(--ink);color:var(--paper)}

/* ░░ PAGE HEAD ░░ ──────────────────────────────────────────────── */
main{position:relative;z-index:3;padding-bottom:20px}
.crumbs{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);padding:26px 0 0;margin:0;position:relative;z-index:3}
.crumbs a{color:var(--mut)}
.crumbs a:hover{color:var(--accent-em)}
.crumbs span{padding:0 8px;color:var(--line-2)}

.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin:0 0 26px}
.page-head{padding:44px 0 0;margin-bottom:70px;border-bottom:1px solid var(--line)}
.page-head h1{font-family:var(--display);font-weight:330;
  font-size:clamp(38px,6.4vw,84px);line-height:1.0;letter-spacing:-.035em;margin:0 0 26px;
  max-width:24ch;font-optical-sizing:auto}
.page-head h1 em{font-style:italic;font-weight:540;color:var(--accent-em)}
.page-head .dek{font-size:clamp(19px,2vw,23px);line-height:1.45;color:var(--ink-soft);
  margin:0 0 44px;max-width:46ch}

/* ░░ PROSE ░░ ──────────────────────────────────────────────────── */
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,40px);
  line-height:1.1;letter-spacing:-.025em;margin:76px 0 20px;max-width:30ch;font-optical-sizing:auto}
.prose h2 em{font-style:italic;font-weight:540;color:var(--accent-em)}
.prose h3{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.01em;margin:44px 0 10px}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 20px;max-width:var(--measure)}
/* First paragraph after an H2 carries the section — set it slightly larger. */
.prose h2 + p{font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:64ch}
.prose ol{margin:0 0 24px;padding-left:0;max-width:var(--measure);list-style:none;counter-reset:step}
.prose ol>li{counter-increment:step;position:relative;padding:18px 0 18px 46px;border-top:1px solid var(--line)}
.prose ol>li:last-child{border-bottom:1px solid var(--line)}
.prose ol>li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:20px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.prose ul:not(.ticks){margin:0 0 24px;padding-left:22px;max-width:var(--measure)}
.prose ul:not(.ticks) li{margin:8px 0}
.prose ul:not(.ticks) li::marker{color:var(--accent)}
.prose strong{font-weight:640}
.prose em{font-style:italic}
.prose hr{border:0;border-top:1px solid var(--line);margin:56px 0}
.prose small{display:block;font-size:14px;color:var(--mut);margin:-8px 0 24px;max-width:var(--measure)}

/* Tick list — the homepage's hairline rows with a cobalt ring, NOT a checklist. */
.ticks{list-style:none;padding:0;margin:0 0 32px;max-width:78ch}
.ticks li{position:relative;padding:20px 0 20px 36px;color:var(--mut);font-size:16px;
  border-top:1px solid var(--line);line-height:1.55}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks li strong,.ticks li b{color:var(--ink);font-weight:600}
.ticks li::before{content:"";position:absolute;left:0;top:26px;width:10px;height:10px;
  border-radius:50%;border:1.5px solid var(--accent);transition:background .4s}
.ticks li:hover::before{background:var(--accent)}

/* ░░ NOTE ░░ — an inset aside. One cobalt rule, no bubble. */
.callout{background:var(--paper-2);border-left:2px solid var(--accent);
  padding:26px 30px;margin:0 0 44px;max-width:80ch}
.callout .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.callout p{margin:0 0 14px;font-size:17px;line-height:1.6;max-width:none}
.callout p:last-child{margin-bottom:0}

/* ░░ TILE GRID ░░ — hairline grid, borderless cells, mono index, cobalt
   underline drawn on hover. Identical construction to the homepage .cards-3. */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:0 0 44px}
@media(max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.card-grid{grid-template-columns:1fr}}
.tile{position:relative;padding:34px 30px 40px;background:var(--paper);overflow:hidden;
  transition:background .5s}
.tile:hover{background:var(--card)}
.tile::after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.tile:hover::after{transform:scaleX(1)}
.tile .no{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--accent)}
.tile h3{font-family:var(--display);font-weight:450;font-size:23px;letter-spacing:-.01em;margin:20px 0 12px}
.tile p{font-size:15.5px;color:var(--mut);margin:0;max-width:none;line-height:1.55}

/* ░░ AUTHOR ░░ — a hairline band, not a profile card. */
.author{display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);
  padding:34px 0;margin:0 0 52px}
/* When it opens the page it sits right under .page-head's rule — two hairlines
   70px apart with nothing between them reads as a mistake. */
.prose>.author:first-child{border-top:0;padding-top:0;margin-top:-14px}
.author .mono{flex:0 0 auto;width:64px;height:64px;display:grid;place-items:center;
  font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:.08em;
  color:var(--accent);border:1.5px solid var(--line-2)}
.author .who{flex:1 1 380px;min-width:0}
.author .who h3{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:-.015em;margin:0 0 6px}
.author .who .role{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);margin:0 0 18px}
.author .who p{font-size:16.5px;margin:0 0 10px;max-width:62ch;color:var(--ink-soft)}
.author .who .links{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  display:flex;gap:24px;flex-wrap:wrap;margin-top:20px}

/* ░░ PRICE ░░ — set as typography. The figure is display-scale like the
   homepage stat numerals and the unit sits on its own mono baseline, which is
   also what stops the long French line ("À partir de 2 000 €") colliding with
   it the way a nowrap inline <small> did. */
.price{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:36px 0 0;margin:0 0 48px}
.price .k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin:0 0 22px}
.price .fig{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  font-family:var(--display);font-weight:430;font-size:clamp(38px,6vw,74px);
  line-height:.96;letter-spacing:-.04em;margin:0 0 26px;font-optical-sizing:auto}
.price .fig small{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut);white-space:nowrap;
  transform:translateY(-.35em)}   /* hangs off the numeral, never under it */
.price>p{font-size:16.5px;color:var(--ink-soft);margin:0 0 30px;max-width:62ch}
.price .step{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:8px 28px;
  border-top:1px solid var(--line);padding:22px 0;font-size:16px;align-items:baseline}
.price .step:last-child{border-bottom:0}
.price .step b{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:400;line-height:1.7}
.price .step span{color:var(--ink-soft);max-width:60ch}
@media(max-width:560px){.price .step{grid-template-columns:1fr;gap:8px}}

/* ░░ TABLE ░░ — the homepage compare-table vocabulary: mono head on paper-2,
   hairlines, no radius, no fill. Scrolls inside itself on narrow screens. */
.table-scroll{overflow-x:auto;margin:0 0 44px;border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15.5px;background:transparent}
caption{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);padding:16px 0 14px}
th,td{text-align:left;padding:18px 22px 18px 0;border-top:1px solid var(--line);vertical-align:top;
  line-height:1.5}
thead th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);font-weight:400;white-space:nowrap;padding-top:12px;padding-bottom:12px;border-top:0}
/* Last column = the one being argued for (Prognyx on the alternatives pages,
   "Humain" on /methodology). Tinted like .col-x on the homepage compare table.
   If a future table puts something else last, override it there. */
thead th:last-child{color:var(--ink);font-weight:700}
tbody th{font-weight:600;color:var(--ink);width:22%;padding-right:28px}
tbody td:last-child,thead th:last-child{background:rgba(31,43,224,.045);padding-left:22px}
td.yes{color:var(--good);font-weight:600}
td.no{color:var(--faint)}

/* ░░ FAQ ░░ — hairline per question; the answer sits immediately under it,
   which is both the readable order and the snippet-winning one. */
.faq{position:relative;z-index:3;margin:80px auto 0;max-width:var(--maxw);
  padding:0 clamp(20px,5vw,48px)}
.faq>h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:-.025em;margin:0 0 8px;font-optical-sizing:auto}
.faq .q{font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:-.01em;
  border-top:1px solid var(--line);padding-top:26px;margin:32px 0 10px;max-width:60ch}
.faq .a{margin:0;max-width:var(--measure)}
.faq .a p{margin:0 0 12px;max-width:var(--measure)}
.faq .a p:last-child{margin-bottom:0}

/* ░░ FORMS ░░ ──────────────────────────────────────────────────── */
.mini-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin:20px 0 8px}
.mini-form input[type=email],.mini-form input[type=text]{flex:1 1 250px;min-width:0;
  font-family:var(--body);font-size:16px;padding:14px 0;background:transparent;
  border:0;border-bottom:1.5px solid var(--line-2);color:var(--ink)}
.mini-form input::placeholder{color:var(--faint)}
.mini-form input:focus{outline:0;border-bottom-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;
  font-size:15.5px;padding:14px 26px;border-radius:50px;border:1.4px solid var(--ink);cursor:pointer;
  background:var(--ink);color:var(--paper);white-space:nowrap;
  transition:background .35s var(--ease),color .35s,border-color .35s,transform .35s var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.form-status{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;margin:10px 0 0;
  min-height:1.4em;color:var(--mut)}
.form-status.ok{color:var(--good)}
.form-status.err{color:var(--heat)}
.form-status a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.form-note{font-size:13.5px;color:var(--mut);margin:10px 0 0;max-width:60ch}

/* ░░ CLOSING CTA ░░ — the ink panel from the homepage. It breaks the run of
   cream, and it is the same object the visitor already met at the bottom of
   the homepage, which is what makes the site feel like one property. */
.cta-block{position:relative;z-index:3;margin:96px 0 0;background:var(--ink);color:var(--paper);
  text-align:center;padding:clamp(56px,9vw,104px) clamp(24px,6vw,64px);overflow:hidden;
  /* Full-bleed out of the padded .wrap, like the homepage CTA — a dark panel
     with cream gutters on both sides reads as a widget; edge-to-edge reads as a
     section of the same site. body has overflow-x:hidden, so the scrollbar
     width can't turn this into a horizontal scroll. */
  margin-inline:calc(50% - 50vw);padding-inline:max(clamp(24px,6vw,64px),calc(50vw - 560px))}
.cta-block::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 50% -20%,rgba(75,91,255,.20),transparent 60%)}
.cta-block>*{position:relative}
.cta-block h2{font-family:var(--display);font-weight:330;font-size:clamp(30px,5.2vw,60px);
  line-height:1.0;letter-spacing:-.03em;margin:0 auto 22px;max-width:22ch;font-optical-sizing:auto}
.cta-block h2 em{font-style:italic;font-weight:500;color:var(--accent-2)}
.cta-block p{margin:0 auto 34px;max-width:52ch;color:rgba(236,231,220,.72);font-size:17px}
.cta-block .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);margin:0 6px 10px}
.cta-block .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.cta-block .btn-line{background:transparent;color:var(--paper);border-color:rgba(236,231,220,.38)}
.cta-block .btn-line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ░░ SEE ALSO ░░ — hairline rows with a mono index. */
.also{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;
  padding:72px clamp(20px,5vw,48px) 0}
.also .k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);margin:0 0 4px}
.also ul{list-style:none;padding:0;margin:0;counter-reset:also}
.also li{counter-increment:also;border-top:1px solid var(--line)}
.also li:last-child{border-bottom:1px solid var(--line)}
.also a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:0 8px;
  padding:22px 0;font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.01em;
  color:var(--ink);transition:color .3s}
.also a::before{content:counter(also,decimal-leading-zero);font-family:var(--mono);font-size:11px;
  font-weight:400;letter-spacing:.16em;color:var(--accent)}
.also a::after{content:"→";font-family:var(--body);font-size:16px;color:var(--faint);
  transition:transform .35s var(--ease),color .3s}
.also a:hover{text-decoration:none;color:var(--accent-em)}
.also a:hover::after{transform:translateX(6px);color:var(--accent-em)}
.also a i{grid-column:2;font-style:normal;font-family:var(--body);font-weight:400;font-size:14.5px;
  color:var(--mut);display:block;margin-top:6px;letter-spacing:0}

/* ░░ LEGAL ░░ — denser, plainer; nobody reads these for pleasure. */
.legal{font-size:16.5px}
.legal h2{font-size:clamp(23px,2.6vw,30px);margin:60px 0 14px}
.legal h3{font-size:19px;margin:34px 0 8px}
.legal p,.legal li{max-width:80ch}
.legal .callout p{max-width:none}
.updated{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--faint);
  text-transform:uppercase;margin:0 0 40px}
.disclaimer{font-size:13px;color:var(--faint);margin:44px 0 0;line-height:1.55;max-width:80ch;
  padding-top:20px;border-top:1px solid var(--line)}

/* ░░ FOOTER ░░ ─────────────────────────────────────────────────── */
footer.site{position:relative;z-index:3;border-top:1px solid var(--line);margin-top:96px;color:var(--mut)}
footer.site .wrap{padding:56px clamp(20px,5vw,48px) 30px}
.foot-grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding-bottom:44px}
.foot-grid h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);margin:0 0 18px;font-weight:400}
.foot-grid a{display:block;font-size:15px;color:var(--ink-soft);margin:0;padding:9px 0;
  border-top:1px solid var(--line);transition:color .3s,padding-left .3s var(--ease)}
.foot-grid a:last-child{border-bottom:1px solid var(--line)}
.foot-grid a:hover{color:var(--accent-em);text-decoration:none;padding-left:6px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding-top:26px;
  border-top:1px solid var(--line)}

@media (max-width:640px){
  body{font-size:17px}
  .page-head{padding-top:32px;margin-bottom:52px}
  .prose h2{margin-top:56px}
  .author{gap:20px}
  .author .mono{width:52px;height:52px;font-size:17px}
  .cta-block{margin-top:72px}
}