@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500&family=Poppins:wght@300;400;500;600&display=swap');

/* =========================================================
   CHURCHMEMBERSAPP — the register

   The thing this software replaces is a hardback membership
   register: ruled columns, a name in ink, a photograph
   stapled in, a note in the margin. That is the visual
   language the people buying this already trust, so the site
   is built from it — hairline rules, real columns, one red
   used the way a register uses red.

   WHAT IS DELIBERATELY ABSENT

   Rounded cards with soft grey shadows. Numbered 01/02/03
   markers over things that are not a sequence. An all-caps
   label over every heading. A geometric sans headline. Those
   four together are what every other small software site
   looks like, and none of them say anything about a church.
========================================================= */

:root{
  --paper:#efede6;        /* cool paper, not cream */
  --paper-2:#e7e4db;
  --card:#ffffff;
  --ink:#14181f;          /* near-black, very slightly blue */
  --ink-2:#49525f;
  --ink-3:#7b8491;
  --rule:#cfcabd;         /* the ruled line */
  --rule-2:#e2ddd1;      /* overridden per palette below */
  --ledger:#8e2f28;       /* oxblood: rules, marks, one button */
  --ledger-soft:#f3e6e3;
  --ochre:#b8860f;        /* used four times on the whole page */
  --ochre-soft:#b8860f22;  /* both overridden per palette below */
  --ochre-line:#b8860f66;
  --focus:#8e2f28;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:84px}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Poppins,system-ui,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:Lora,Georgia,serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.012em;
  margin:0;
}

h1{font-size:clamp(38px,5vw,62px)}
h2{font-size:clamp(28px,3.4vw,40px)}
h3{font-size:20px;line-height:1.3}

p{margin:0 0 18px;color:var(--ink-2)}
p:last-child{margin-bottom:0}

a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}

.lede{font-size:18px;line-height:1.75;max-width:52ch}

/* ---------------------------------------------------------
   THE RULE

   A hairline with a short red tick at its left end — the way
   a ruled ledger starts a column. Used to open every section
   instead of a label.
--------------------------------------------------------- */
.rule{display:flex;align-items:center;gap:0;margin-bottom:28px}
.rule:before{content:'';width:34px;height:2px;background:var(--ledger);flex:none}
.rule:after{content:'';height:1px;background:var(--rule);flex:1}

.kicker{
  font-size:13px;font-weight:500;color:var(--ledger);
  letter-spacing:.01em;margin:0 0 10px;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
.top{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  /* Solid rather than translucent: a hardcoded rgba() here was
     the one thing on the page that ignored the palette. */
  border-bottom:1px solid var(--rule);
}
.top-in{display:flex;align-items:center;gap:28px;height:72px}
/* The wordmark is the one place on the page set in the sans,
   not the serif: it is a logo, not a sentence, and it has to
   match the mark beside it. */
.brand{display:flex;align-items:center;gap:10px}
.brand svg{display:block;flex-shrink:0}
.brand-word{
  font-family:Poppins,sans-serif;font-weight:600;font-size:21px;
  line-height:1;letter-spacing:-.045em;white-space:nowrap;
}
.brand em{font-style:normal;color:var(--ledger)}
.brand small{
  display:block;font-size:9px;font-weight:600;
  letter-spacing:.24em;margin-top:5px;color:var(--ink-3);
}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:14.5px;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.nav-cta{
  padding:9px 16px;border:1px solid var(--ink);border-radius:2px;
  color:var(--ink);font-weight:500;font-size:14px;
}
.nav-cta:hover{background:var(--ink);color:var(--paper)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  border-radius:2px;padding:7px 12px;font:inherit;font-size:14px;cursor:pointer}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.hero{padding:76px 0 72px;border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:64px;align-items:center}
.hero h1 em{font-style:italic;font-weight:500}
.hero .lede{margin-top:22px}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:2px;
  background:var(--ledger);color:#fff;border:1px solid var(--ledger);
  font-size:15px;font-weight:500;
}
/* Darkened from the palette rather than written in, so the
   hover state is not still oxblood on a blue site. */
.btn:hover{filter:brightness(.86)}
.btn-plain{
  background:none;color:var(--ink);border-color:var(--ink);
}
.btn-plain:hover{background:var(--ink);color:var(--paper)}
.under{font-size:13.5px;color:var(--ink-3);margin-top:16px}

/* ---------------------------------------------------------
   THE RECORD PLATE
   A member's record, drawn the way the register would hold
   it. This is the hero image, and it is live markup rather
   than a screenshot so it stays sharp and reflows on a
   phone.
--------------------------------------------------------- */
.plate{
  background:var(--card);
  border:1px solid var(--rule);
  border-top:3px solid var(--ledger);
  padding:26px 28px 22px;
}
.plate-top{display:flex;align-items:flex-start;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--rule-2)}
.portrait{
  width:62px;height:62px;flex:none;border-radius:1px;
  background:var(--paper-2);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-family:Lora,serif;font-size:21px;color:var(--ink-2);
}
.plate-name{font-family:Lora,serif;font-size:23px;font-weight:600;line-height:1.2}
.plate-sub{font-size:13.5px;color:var(--ink-3);margin-top:4px}
.plate-no{
  margin-left:auto;text-align:right;font-size:12px;color:var(--ink-3);
  line-height:1.5;flex:none;
}
.plate-no b{display:block;font-size:15px;color:var(--ink);font-weight:500;letter-spacing:.02em}

.rows{margin:0;padding:0}
.rows div{
  display:grid;grid-template-columns:118px 1fr;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--rule-2);font-size:14px;
}
.rows dt{color:var(--ink-3);font-size:13px}
.rows dd{margin:0;color:var(--ink)}

.plate-fam{padding-top:16px}
.plate-fam h4{margin:0 0 12px;font-size:13px;font-weight:500;color:var(--ink-3)}
.fam-row{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:14px}
.fam-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--ledger)}
.fam-row span{color:var(--ink-3);font-size:13px;margin-left:auto}

/* ---------------------------------------------------------
   THE BAND OF FACTS
--------------------------------------------------------- */
.facts{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.facts-in div{background:var(--paper-2);padding:26px 24px}
.facts b{display:block;font-family:Lora,serif;font-size:30px;font-weight:600;line-height:1}
.facts span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:7px;line-height:1.5}

/* ---------------------------------------------------------
   SECTIONS
--------------------------------------------------------- */
.band{padding:84px 0;border-bottom:1px solid var(--rule)}
.band-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:46px}
.band-head p{margin:0}

/* the book vs the record */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:stretch}
.versus > figure{margin:0;display:flex;flex-direction:column}
.versus figcaption{
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:14px;font-size:14px;color:var(--ink-2);
}
.versus figcaption b{font-family:Lora,serif;font-size:17px;font-weight:600;color:var(--ink)}

/* the ruled book page */
/* The ruled page. Every colour comes from the palette, so the
   book changes with the rest of the site instead of staying
   the one cream thing on a blue page. */
.book{
  flex:1;background:var(--card);border:1px solid var(--rule);
  padding:24px 26px 26px 54px;position:relative;overflow:hidden;
  font-family:Lora,serif;
}
.book:before{content:'';position:absolute;left:34px;top:0;bottom:0;width:1px;
  background:var(--ledger);opacity:.45}
.book-line{
  border-bottom:1px solid var(--rule-2);padding:11px 0 7px;font-size:15px;
  display:flex;gap:12px;align-items:baseline;color:var(--ink-2);
}
.book-line small{margin-left:auto;font-size:12px;color:var(--ink-3);font-family:Poppins,sans-serif}
.struck{text-decoration:line-through;color:var(--ink-3)}
.margin-note{
  font-family:Lora,serif;font-style:italic;font-size:13.5px;color:var(--ledger);
  margin-top:14px;
}

/* the same thing, in the app */
.record{flex:1;background:var(--card);border:1px solid var(--rule);padding:22px 24px}
.record-line{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--rule-2);font-size:14px;
}
.record-line:last-child{border-bottom:0}
.tag{
  margin-left:auto;font-size:11.5px;padding:3px 9px;border:1px solid var(--rule);
  color:var(--ink-2);border-radius:2px;
}
.tag-live{border-color:var(--ledger);background:var(--ledger-soft);color:var(--ledger)}

/* ---------------------------------------------------------
   CAPABILITIES — alternating, each with a real plate
--------------------------------------------------------- */
.cap{display:grid;grid-template-columns:1fr 1.05fr;gap:58px;align-items:center;padding:52px 0;border-bottom:1px solid var(--rule-2)}
.cap:last-child{border-bottom:0;padding-bottom:0}
.cap:first-child{padding-top:0}
.cap.flip .cap-art{order:-1}
.cap h3{margin-bottom:12px}
.cap p{font-size:15px}
.cap-note{
  margin-top:16px;padding-left:16px;border-left:2px solid var(--ledger);
  font-size:14px;color:var(--ink-2);font-style:italic;
}

.mini{background:var(--card);border:1px solid var(--rule);padding:20px 22px}
.mini-head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:12px;border-bottom:1px solid var(--rule-2);
  font-size:13px;color:var(--ink-3);
}
.mini-head b{font-family:Lora,serif;font-size:18px;color:var(--ink);font-weight:600}
.mini-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:14px}
.mini-row:last-child{border-bottom:0}
.who{line-height:1.35}
.who small{display:block;font-size:12px;color:var(--ink-3)}
.send{margin-left:auto;font-size:12px;padding:5px 12px;background:var(--ink);color:var(--paper);border-radius:2px}
.mini-foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule-2);font-size:13px;color:var(--ink-2)}
.mini-foot b{color:var(--ink);font-weight:500}

.search-box{
  border:1px solid var(--rule);padding:11px 14px;font-size:14px;
  display:flex;align-items:center;gap:9px;color:var(--ink);margin-bottom:4px;
}
.caret{width:1.5px;height:16px;background:var(--ledger);display:inline-block}
mark{background:#f6e7b8;color:inherit;padding:0 1px}

.branches div{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:14px}
.branches div:last-child{border-bottom:0}
.branches i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-3);font-style:normal}
.branches i.main{background:var(--ledger)}
.branches b{margin-left:auto;font-weight:400;color:var(--ink-3);font-size:13px}

/* Separated tiles in a soft outer card, rather than the
   hairline grid the rest of the page uses. The reports block
   is the one place a count belongs on its own card: each
   number is a different question, not a row of one table. */
.sheet{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  background:var(--card);border:1px solid var(--rule);
  border-radius:14px;padding:14px;
  box-shadow:0 18px 40px rgb(0 0 0 / .05);
}
.sheet div{
  background:var(--card);border:1px solid var(--rule-2);
  border-radius:9px;padding:15px 14px;
}
.sheet b{display:block;font-family:Lora,serif;font-size:25px;font-weight:600;line-height:1}
.sheet span{display:block;font-size:12px;color:var(--ledger);margin-top:6px;line-height:1.4}
/* The one that is a job to do rather than a number to know. */
.sheet div.mark{background:var(--ochre-soft);border-color:var(--ochre-line)}
.sheet div.mark span{color:var(--ink-2)}

/* ---------------------------------------------------------
   THE HOME HERO

   Flat colour rather than a gradient: on a flat field the
   laptop screen is the brightest thing on the page, which is
   where the eye should go. The art sits in the FIRST column,
   so it is read before the words.
--------------------------------------------------------- */
/* Light grey rather than a block of colour. The trade is worth
   knowing: on the coloured version the laptop screen was the
   brightest thing on the page and the eye went to it on its
   own. Here the screen and the background are close in value,
   so the frame and its shadow are doing that work instead —
   which is why the shadow below is heavier than it looks like
   it should be. */
.mast{
  background:var(--paper-2);color:var(--ink);
  padding:62px 0 70px;overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.mast-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
.mast h1{font-size:clamp(33px,4.1vw,50px);line-height:1.1;margin:0 0 20px}
.mast h1 em{font-style:normal;color:var(--ledger)}
.mast-lede{color:var(--ink-2);font-size:17.5px;line-height:1.72;margin:0;max-width:44ch}
.mast-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn-light,.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;padding:14px 24px;
  border-radius:3px;font-weight:600;font-size:15px;
}
.btn-light{background:var(--ledger);color:#fff;border:1px solid var(--ledger)}
.btn-light:hover{filter:brightness(.86)}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.mast-under{margin-top:18px;font-size:13.5px;color:var(--ink-3)}
.mast-caption{margin:14px 0 0;font-size:11.5px;color:var(--ink-3)}

/* ---------- the device frames ----------
   A laptop with a phone at its corner, not a row of phones:
   this is a web app a secretary uses on a desk, and a page
   full of floating phones promises something from an app
   store that does not exist. */
.mast-art{position:relative}
.laptop{position:relative;z-index:1}
.screen{
  background:var(--paper);border:9px solid #171a21;border-radius:11px;
  box-shadow:0 30px 64px rgb(0 0 0 / .18);overflow:hidden;color:var(--ink);
}
/* ---------- the laptop ----------
   A lid with a real bezel and a camera, sitting on a deck that
   is wider than the lid and tapers outward, with a lip cut into
   its front edge. Those three things are what make a dark
   rectangle read as a laptop; without them it is a picture in
   a border. All drawn in CSS — no image, nothing to load. */
.laptop .screen{
  background:#171a21;border:0;border-radius:14px 14px 5px 5px;
  padding:14px 13px 17px;overflow:visible;
  box-shadow:0 26px 54px rgb(0 0 0 / .22);
}
.laptop .screen:before{            /* the camera */
  content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:#39404e;
}
.laptop .screen{position:relative}
.laptop .screen img{display:block;width:100%;height:auto;border-radius:3px}
.laptop-base{
  height:15px;width:116%;position:relative;left:-8%;
  background:linear-gradient(#262c38,#171a21);
  /* wider at the bottom than the top: the deck seen at an angle */
  clip-path:polygon(1.6% 0, 98.4% 0, 100% 100%, 0 100%);
  border-radius:0 0 9px 9px;
}
.laptop-base:after{                /* the lip you open it by */
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:84px;height:5px;background:#10131a;border-radius:0 0 7px 7px;
}
.phone-float{
  position:absolute;right:-26px;bottom:14px;z-index:2;width:152px;
  background:#171a21;border-radius:20px;padding:7px 6px;
  box-shadow:0 18px 38px rgb(0 0 0 / .22);
}
.phone-in{background:var(--paper);border-radius:14px;overflow:hidden;color:var(--ink)}

/* ---------- the drawn dashboard ---------- */
.appwin{display:flex;min-height:300px;background:var(--paper)}
.aw-side{
  width:34px;flex:none;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:13px;padding:11px 0;
}
.aw-mark{width:17px;height:17px;color:var(--ochre)}
.aw-side i{width:15px;height:3px;border-radius:2px;background:#ffffff33}
.aw-main{flex:1;min-width:0;padding:12px 13px}
.aw-top{display:flex;align-items:baseline;gap:9px;font-size:9.5px;color:var(--ink-3);margin-bottom:11px}
.aw-top b{font-family:Lora,serif;font-size:12.5px;font-weight:600;color:var(--ink)}
.aw-when{margin-left:auto}
.aw-k{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.aw-k div{background:var(--card);border:1px solid var(--rule-2);border-radius:5px;padding:8px 9px}
.aw-k b{display:block;font-family:Lora,serif;font-size:19px;font-weight:600;line-height:1}
.aw-k span{display:block;font-size:8px;color:var(--ink-3);margin-top:3px}
.aw-k-mark{background:var(--ledger-soft)!important;border-color:var(--ledger)!important}
.aw-k-mark b{color:var(--ledger)}
.aw-panel{background:var(--card);border:1px solid var(--rule-2);border-radius:5px;padding:9px 10px;margin-top:8px}
.aw-panel-head{display:flex;align-items:baseline;font-size:9.5px;color:var(--ink-3)}
.aw-panel-head b{font-size:10px;color:var(--ink);font-weight:500}
.aw-panel-head span{margin-left:auto}
.aw-chart{display:block;width:100%;height:auto;margin-top:5px}
.aw-list{margin-top:8px;background:var(--card);border:1px solid var(--rule-2);border-radius:5px;padding:2px 10px}
.aw-list > div{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--rule-2)}
.aw-list > div:last-child{border-bottom:0}
.aw-list b{display:block;font-size:10px;font-weight:500}
.aw-list span{display:block;font-size:8.5px;color:var(--ink-3)}
.aw-list em{
  margin-left:auto;font-style:normal;font-size:8px;
  border:1px solid var(--rule);border-radius:9px;padding:2px 7px;color:var(--ink-2);
}
.aw-face{
  width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--ledger-soft);color:var(--ledger);
  display:grid;place-items:center;font-size:8.5px;font-weight:600;font-style:normal;
}

/* ---------- the phone's list ---------- */
.ph-top{font-size:9px;color:var(--ink-3);padding:10px 11px 8px;border-bottom:1px solid var(--rule-2)}
.ph-row{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--rule-2)}
.ph-row:last-child{border-bottom:0}
.ph-row b{display:block;font-size:10px;font-weight:500}
.ph-row span{display:block;font-size:8.5px;color:var(--ink-3)}

/* ---------------------------------------------------------
   THE SIX

   Left-aligned, not centred. Centred is prettier; left is
   easier to read, because the eye finds the start of every
   line in the same place.
--------------------------------------------------------- */
/* Icon flush left, words to the right of it — the same shape
   as the three points on the demo page, so the site has one
   way of showing an icon with a line of text rather than two. */
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 40px;margin-top:8px}
.six > div{display:flex;gap:15px;align-items:flex-start}
.ic{width:30px;height:30px;display:block;color:var(--ledger);margin-bottom:14px}
.six .ic{margin:0}
.six h3{font-size:18px;margin:0 0 8px}
.six p{font-size:14.5px;line-height:1.65;margin:0;color:var(--ink-2)}
.six-more{margin:48px 0 0}
.text-link{
  font-size:14.5px;font-weight:500;color:var(--ledger);
  text-decoration:underline;text-underline-offset:5px;
}

.fam-band{background:var(--paper-2)}
.fam-band .cap{padding:0;border-bottom:0}
/* Outside .band-head these headings have no bottom margin of
   their own, and the paragraph crowds them. */
.fam-band h2,.close h2{margin-bottom:18px}

/* ---------------------------------------------------------
   THE FAMILY TREE

   Two generations and the line between them. The connector is
   three borders on an empty box rather than an SVG, so it
   stretches with the names instead of being a fixed drawing.
--------------------------------------------------------- */
.tree{background:var(--card);border:1px solid var(--rule);padding:22px 26px 24px}
.tree-head{
  display:flex;align-items:baseline;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--rule-2);
}
.tree-head b{font-family:Lora,serif;font-size:16px;font-weight:600}
.tree-head span{margin-left:auto;font-size:11.5px;color:var(--ink-3)}

/* Two equal columns rather than a flex row, so each person sits
   at the 25% and 75% marks - which is what lets the connector
   below land exactly on their heads at any width. */
.tree-gen{
  display:grid;grid-template-columns:1fr 1fr;
  width:min(100%,330px);margin-inline:auto;text-align:center;
}
.tree-gen:first-of-type{margin-top:24px}
.person b{display:block;font-size:13.5px;font-weight:500;margin-top:9px}
.person span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.face{
  width:58px;height:58px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ledger);color:var(--card);
  font-style:normal;font-size:16px;font-weight:600;letter-spacing:.02em;
}
.face-gold{background:var(--ochre);color:var(--ink)}
.face-soft{background:var(--ledger-soft);color:var(--ledger);width:50px;height:50px;font-size:14px}

/* the line: down from the parents, across, down to each child */
/* Half the tree's width: the two ends then sit over the 25%
   and 75% marks, directly above each child. */
.tree-join{
  width:min(50%,165px);height:26px;margin:16px auto 0;
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
  border-right:1px solid var(--rule);
  position:relative;
}
.tree-join:before{
  content:'';position:absolute;left:50%;top:-17px;height:17px;
  border-left:1px solid var(--rule);
}
.tree-gen + .tree-join + .tree-gen{margin-top:0}

.tree-foot{
  margin-top:24px;padding-top:14px;border-top:1px solid var(--rule-2);
  text-align:center;font-size:12.5px;color:var(--ink-3);
}

/* the short list beside it */
.ticks{list-style:none;padding:0;margin:18px 0 0;font-size:14.5px}
.ticks li{position:relative;padding:7px 0 7px 26px;color:var(--ink-2)}
.ticks li:before{
  content:'';position:absolute;left:2px;top:14px;
  width:9px;height:5px;border-left:1.6px solid var(--ledger);
  border-bottom:1.6px solid var(--ledger);transform:rotate(-45deg);
}

/* ---------------------------------------------------------
   THE DASHBOARD

   The app's first screen, drawn rather than screenshotted, so
   it stays sharp on a phone and follows the palette. The frame
   is deliberately plain - one bar, one border, no fake traffic
   lights - because the numbers are the thing being shown.
--------------------------------------------------------- */
.dash-band{background:var(--paper-2)}
.screen{
  background:var(--card);border:1px solid var(--rule);
  box-shadow:0 24px 60px rgb(0 0 0 / .07);
}
.screen-bar{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--rule);
  background:var(--paper);font-size:12.5px;color:var(--ink-3);
}
.screen-dot{width:9px;height:9px;border-radius:50%;background:var(--ledger);flex:none}
.screen-bar b{font-weight:500;color:var(--ink);font-size:13.5px}
.screen-church{border-left:1px solid var(--rule);padding-left:12px}
.screen-when{margin-left:auto}
.screen-body{padding:22px}

/* the four numbers */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.kpis>div{background:var(--card);padding:15px 16px}
.kpis span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.kpis b{display:block;font-family:Lora,serif;font-size:32px;font-weight:600;line-height:1.15;margin-top:6px}
.kpis em{display:block;font-style:normal;font-size:12px;color:var(--ink-2);margin-top:3px}
.kpis .kpi-mark{background:var(--ledger-soft)}
.kpis .kpi-mark b{color:var(--ledger)}

.panels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
        border:1px solid var(--rule);border-top:0;margin-top:-1px}
.panel{background:var(--card);padding:16px 18px 18px}
.panel-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.panel-head b{font-family:Lora,serif;font-size:16px;font-weight:600}
.panel-head span{font-size:11.5px;color:var(--ink-3);margin-left:auto}

.growth{width:100%;height:auto;display:block}
.panel-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:6px}

/* age groups */
.bars div{display:grid;grid-template-columns:118px 1fr 28px;align-items:center;gap:10px;
          padding:7px 0;font-size:13px}
.bars span i{font-style:normal;color:var(--ink-3)}
.bars u{display:block;height:8px;background:var(--ledger);text-decoration:none;min-width:4px}
.bars div:nth-child(even) u{background:var(--ochre)}
.bars b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.bars-foot{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-2);
  font-size:12.5px;line-height:1.6;color:var(--ink-2);
}

/* the two lists */
.feed div{display:grid;grid-template-columns:1fr auto;gap:2px 12px;
          padding:9px 0;border-bottom:1px solid var(--rule-2);font-size:13.5px}
.feed div:last-child{border-bottom:0}
.feed b{font-weight:500}
.feed span{grid-column:1;font-size:12.5px;color:var(--ink-2)}
.feed em{
  grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:11px;
  border:1px solid var(--ledger);color:var(--ledger);padding:3px 10px;
}
.feed-plain div{grid-template-columns:1fr}

.screen-note{margin-top:16px;font-size:12.5px;color:var(--ink-3)}

/* ---------------------------------------------------------
   EVERYTHING ELSE — a plain ruled table, like an index
--------------------------------------------------------- */
.index-list{margin-top:44px;border-top:1px solid var(--rule)}
.index-list div{
  display:grid;grid-template-columns:200px 1fr;gap:28px;
  padding:16px 0;border-bottom:1px solid var(--rule-2);font-size:14.5px;
}
.index-list b{font-weight:500}
.index-list span{color:var(--ink-2)}

/* ---------------------------------------------------------
   THE MAKER — inverted band
--------------------------------------------------------- */
.maker{background:var(--ink);color:#e9e6dd;border-bottom:0}
.maker h2{color:#fff}
.maker p{color:#b3b9c2}
.maker .rule:after{background:#39414d}
.maker-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.maker-card{border:1px solid #2c333d;padding:26px 28px}
.maker-card dl{margin:0}
.maker-card div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid #262c35;font-size:14px}
.maker-card div:last-child{border-bottom:0}
.maker-card dt{color:#8b94a1;font-size:13px}
.maker-card dd{margin:0;color:#e9e6dd}

/* ---------------------------------------------------------
   CLOSE
--------------------------------------------------------- */
.close{padding:84px 0 92px;text-align:left}
.close-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
.close h2{max-width:16ch}

footer{border-top:1px solid var(--rule);background:var(--paper-2)}
.foot-in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;padding:28px 0;font-size:13.5px;color:var(--ink-3)}
.foot-in a:hover{color:var(--ink)}
.foot-in .spacer{margin-left:auto}

/* ---------------------------------------------------------
   NARROW
--------------------------------------------------------- */
/* ---------------------------------------------------------
   THE INNER PAGES

   Features, the demo, contact and privacy. They share one
   heading block so the site does not look like four sites.
--------------------------------------------------------- */
.skip{position:absolute;left:16px;top:-60px;background:var(--card);color:var(--ink);
      padding:10px 14px;border:1px solid var(--ink);z-index:100}
.skip:focus{top:12px}
.nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ledger)}

.page-head{padding:56px 0 46px;border-bottom:1px solid var(--rule)}
.page-head h1{font-size:clamp(34px,5vw,56px);margin:0 0 18px}
.page-head .lede{margin:0}

/* The compact version: heading and sentence side by side
   instead of stacked, so the first real section is on screen
   without scrolling. */
.page-head-tight{
  padding:44px 0 0;background:var(--paper-2);overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.page-head-tight h1{font-size:clamp(28px,3.4vw,40px);margin:0 0 16px}
.page-head-tight h1 em{font-style:normal;color:var(--ledger)}
.head-row{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.head-row > div:first-child{padding-bottom:44px}
.head-row .lede{font-size:16px;margin:0}

/* The window is cropped by the bottom of the band instead of
   being scaled down to fit inside it: a screen shrunk to hero
   height is unreadable, and a cropped one reads as a window
   you are looking into. */
.head-art{position:relative;height:218px}
.head-art .screen{
  position:absolute;left:0;top:0;right:auto;
  width:720px;max-width:none;
  border-width:8px;border-bottom:0;border-radius:10px 10px 0 0;
  box-shadow:0 -4px 40px rgb(0 0 0 / .12);
}
/* A real screenshot, cropped by the band. It is wider than the
   column, so it is pinned to its left edge at its natural scale
   rather than squeezed to fit — shrinking a screenshot to hero
   height makes the rows unreadable, which defeats showing it. */
.head-art img{
  display:block;width:100%;height:auto;
}
/* The window is wider than its column on purpose: it runs off
   the right edge of the page, and the band's overflow:hidden
   does the cropping. Sized to fit the column it would be a
   thumbnail, and a screenshot nobody can read proves nothing. */
.head-art .aw-list{margin-top:0;border-radius:5px 5px 0 0}

/* ---------------------------------------------------------
   SPLIT AROUND ONE TALL THING

   Three items down each side of a printed report. The middle
   is deliberately not a phone: "every one of these prints" is
   the part a church board cares about.
--------------------------------------------------------- */
.split-band{background:var(--paper-2)}
.split{display:grid;grid-template-columns:1fr 320px 1fr;gap:40px;align-items:center}
.split-col > div{display:flex;gap:15px;padding:18px 0}
.split-col .ic{width:24px;height:24px;flex:none;margin:2px 0 0}
.split-col b{display:block;font-size:16.5px;font-weight:600;margin-bottom:5px}
.split-col span{font-size:14px;color:var(--ink-2);line-height:1.6}
.split-col.right > div{flex-direction:row-reverse;text-align:right}
.split-note{margin:36px 0 0;font-size:13.5px;color:var(--ink-3);max-width:60ch}

/* ---------- the middle: two handsets ----------
   Built the way the reference site does it: one phone behind
   and to the side, one in front, both tall enough to run past
   the text on either side. The frames, the notch and the home
   bar are drawn in CSS, so they stay sharp at any size and
   the screens inside stay editable text rather than a picture.
*/
.handset-stack{position:relative;height:540px}
.handset{
  position:absolute;top:0;left:0;width:258px;
  background:#171a21;border-radius:36px;padding:10px;
  box-shadow:0 30px 60px rgb(0 0 0 / .28), 0 0 0 1px #2b2f38 inset;
}
.handset:before{                      /* the notch */
  content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:92px;height:22px;background:#171a21;border-radius:0 0 13px 13px;z-index:2;
}
/* The one behind is pushed left and down and tipped slightly,
   which is what stops the pair reading as one fat phone. */
.handset.back{
  z-index:1;transform:translate(-38px,30px) rotate(-4deg) scale(.96);
  box-shadow:0 24px 46px rgb(0 0 0 / .2), 0 0 0 1px #2b2f38 inset;
}
.handset.front{z-index:2;transform:translate(32px,0)}
.handset-screen{
  background:var(--card);border-radius:27px;overflow:hidden;
  height:508px;display:flex;flex-direction:column;
}
.hs-status{
  display:flex;align-items:center;gap:5px;flex:none;
  height:30px;padding:0 15px;font-size:10px;font-weight:600;color:#fff;
  background:var(--ledger);
}
.hs-status span{margin-right:auto}
.hs-status i{width:11px;height:7px;border-radius:1px;background:#ffffff99}

/* the coloured app header, as in the reference */
.hs-head{flex:none;background:var(--ledger);color:#fff;padding:4px 15px 16px}
.hs-head b{display:block;font-family:Lora,serif;font-size:19px;font-weight:600}
.hs-head > span{display:block;font-size:10.5px;color:#ffffffbb;margin-top:3px}
.hs-search{
  margin-top:12px;background:#ffffff26;border-radius:4px;
  padding:8px 10px;font-size:10.5px;color:#ffffffcc;
}
.hs-body{flex:1;min-height:0;padding:4px 15px;overflow:hidden}
.hs-row{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--rule-2)}
.hs-row b{display:block;font-size:11px;font-weight:500}
.hs-row span{display:block;font-size:9px;color:var(--ink-3)}
.hs-rep{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:12.5px;
}
.hs-rep span{color:var(--ink-2)}
.hs-rep b{margin-left:auto;font-weight:500;font-variant-numeric:tabular-nums}
.hs-tags{display:flex;gap:7px;padding-top:13px}
.hs-bar{
  flex:none;width:84px;height:4px;border-radius:3px;background:var(--rule);
  margin:0 auto 9px;
}
.paper-head{padding-bottom:12px;border-bottom:2px solid var(--ink)}
.paper-head b{display:block;font-family:Lora,serif;font-size:17px;font-weight:600}
.paper-head span{display:block;font-size:11px;color:var(--ink-3);margin-top:3px}
.paper-rows div{
  display:flex;align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--rule-2);font-size:13px;
}
.paper-rows span{color:var(--ink-2)}
.paper-rows b{margin-left:auto;font-weight:500;font-variant-numeric:tabular-nums}
.paper-foot{display:flex;align-items:center;gap:7px;padding-top:14px}
.paper-tag{
  font-size:11px;border:1px solid var(--ledger);color:var(--ledger);
  padding:3px 10px;border-radius:2px;
}
.paper-foot em{font-style:normal;font-size:11px;color:var(--ink-3);white-space:nowrap}

/* ---------------------------------------------------------
   ICON CARDS
--------------------------------------------------------- */
.cards-band{border-bottom:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:22px 20px;box-shadow:0 14px 34px rgb(0 0 0 / .04);
}
.card .ic{width:26px;height:26px;margin-bottom:14px}
.card b{display:block;font-size:16.5px;font-weight:600;margin-bottom:6px}
.card span{font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* Five across rather than six in two rows: these are steps in
   an order, and a second row would read as a second group.

   The numerals are gone. With the icons centred and large the
   corner numbers were a second thing to read in each card, and
   the order is already carried by left-to-right. */
.cards-5{grid-template-columns:repeat(5,1fr)}
.step-card{text-align:center;padding:26px 18px 24px}
.step-card .ic{width:40px;height:40px;margin:0 auto 16px}
.step-card .step-text{font-size:13px}
.steps-band{background:var(--paper-2);border-bottom:1px solid var(--rule)}

/* ---------------------------------------------------------
   THE DEMO PANEL
--------------------------------------------------------- */
.demo-panel{
  background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:30px 32px;box-shadow:0 18px 44px rgb(0 0 0 / .05);
  max-width:720px;
}
.demo-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.demo-panel{max-width:none}
/* Icon flush left, words to the right of it. The icon sits in
   a tinted square rather than floating: at this size a bare
   stroke icon beside text reads as a stray mark, and the
   square gives the row a left edge for the eye to follow. */
.demo-aside > div{display:flex;gap:16px;align-items:flex-start;padding:0 0 26px}
.demo-aside > div:last-child{padding-bottom:0}
.aside-ic,.ic-box{
  flex:none;width:44px;height:44px;border-radius:10px;
  background:var(--ledger-soft);
  display:grid;place-items:center;
}
.aside-ic .ic,.ic-box .ic{width:22px;height:22px;margin:0}
.demo-aside b{display:block;font-size:17px;font-weight:600;margin-bottom:5px}
.demo-aside span{font-size:14px;color:var(--ink-2);line-height:1.6}
.demo-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.demo-head h2{font-size:27px;margin:0}
.demo-head .tag{margin-left:0}
.demo-panel p{font-size:15px;margin:0 0 12px}
.demo-panel .rows{margin:22px 0}
.demo-panel .actions{margin-top:26px}

/* What is in the practice church. Four facts rather than a
   paragraph: somebody deciding whether to spend five minutes
   scans, and a block of prose at this point is skipped. */
.demo-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);border:1px solid var(--rule);
  margin-top:24px;
}
.demo-facts > div{background:var(--card);padding:15px 16px}
.demo-facts b{
  display:block;font-family:Lora,serif;font-size:21px;
  font-weight:600;line-height:1.1;
}
.demo-facts span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.45}

/* ----- the demo ----- */
.demo-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:start}
.demo-panel{background:var(--card);border:1px solid var(--rule);padding:28px 30px}
.demo-panel h2{font-size:26px;margin:0 0 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.demo-panel .tag{margin-left:0}
.demo-panel .rows{margin:22px 0}
.demo-panel .actions{margin-top:24px}
.demo-guide h3{margin:0 0 10px}
.demo-guide ol{list-style:none;counter-reset:step;padding:0;margin:0}
.demo-guide li{
  counter-increment:step;position:relative;padding:14px 0 14px 42px;
  border-bottom:1px solid var(--rule-2);font-size:14.5px;
}
.demo-guide li:before{
  content:counter(step);position:absolute;left:0;top:14px;
  width:24px;height:24px;display:grid;place-items:center;
  border:1px solid var(--rule);font-size:12px;color:var(--ink-2);
}
.demo-guide li b{display:block;font-weight:500}
.demo-guide li span{display:block;color:var(--ink-2);font-size:13.5px;margin-top:2px}

/* ----- contact ----- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:start}
.contact-grid aside h2{font-size:27px;margin:0 0 16px}
.contact-grid aside h3{margin:0 0 14px}
.side-rows{margin:26px 0 16px}

/* The one offer worth making to somebody not ready to write:
   go and look instead. */
.side-note{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:18px 20px;margin-top:24px;
}
.side-note b{display:block;font-size:16px;font-weight:600;margin-bottom:5px}
.side-note span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:10px}
.side-note .text-link{font-size:13.5px}

/* The form sits in a card with a titled bar, so it reads as a
   thing to fill in rather than fields loose on the page. */
.form-panel{
  background:var(--card);border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;box-shadow:0 18px 44px rgb(0 0 0 / .05);
}
.panel-heading{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:16px 30px;background:var(--ledger);color:#fff;
}
.panel-heading b{font-family:Lora,serif;font-size:17px;font-weight:600}
.panel-heading span{margin-left:auto;font-size:12.5px;color:#ffffffbb}
.panel-body{padding:28px 30px 30px}

/* The sum. Narrow on purpose — a wide box invites a sentence,
   and the answer is one or two digits. */
.sum{display:block;margin:4px 0 18px}
.sum span{display:block;font-size:13.5px;font-weight:500;margin-bottom:7px}
.sum b{font-weight:600}
/* Same trap as the checkbox: the global input rule is
   width:100% and sits later in the file. */
.sum input[type=text]{width:96px}

/* The agreement line, and the warning under the button. */
.consent{
  display:flex;gap:11px;align-items:flex-start;
  font-weight:400;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  margin:4px 0 22px;
}
/* The global input rule is display:block;width:100% and it
   comes later in this file, so the checkbox needs the extra
   specificity of [type=checkbox] or it stretches to the full
   width and squeezes the sentence into a column. */
.consent input[type=checkbox]{
  display:inline-block;width:16px;height:16px;
  margin:3px 0 0;padding:0;flex:none;accent-color:var(--ledger);
}
.consent a{text-decoration:underline;text-underline-offset:3px}
.micro{margin:16px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
label{display:block;font-size:13px;font-weight:500;margin-bottom:18px}
label small{font-weight:400;color:var(--ink-3)}
input:not([type=hidden]),textarea{
  display:block;width:100%;margin-top:7px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;padding:11px 12px;
}
input:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:1px}
textarea{resize:vertical}
.form-panel .btn{margin-top:4px}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.note{border:1px solid var(--rule);border-left:3px solid var(--ink-3);
      padding:16px 18px;margin-bottom:24px;font-size:14px}
.note b{display:block;font-weight:500;margin-bottom:4px}
.note span{color:var(--ink-2)}
.note ul{margin:6px 0 0;padding-left:18px;color:var(--ink-2)}
.note-good{border-left-color:var(--ledger);background:var(--ledger-soft)}
.note-bad{border-left-color:var(--ochre)}

/* ----- privacy, and any other page of plain writing ----- */
.prose{max-width:66ch}
.prose h2{font-size:23px;margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px}
.prose a{text-decoration:underline;text-underline-offset:3px}

@media(max-width:940px){
  .demo-grid,.contact-grid{grid-template-columns:1fr;gap:34px}
  .hero-grid,.band-head,.versus,.cap,.maker-grid,.close-grid{grid-template-columns:1fr;gap:34px}
  /* The words come first once the two columns stack — a
     screenshot with no sentence above it explains nothing. */
  .mast-grid,.head-row{grid-template-columns:1fr;gap:40px}
  /* No room to crop a window beside the words. */
  .head-row{gap:0}
  .head-row > div:first-child{padding-bottom:34px}
  .head-art{display:none}
  /* The paper sits between the two columns on a wide screen
     and under them on a narrow one, where a 250px middle
     column would squeeze both sides to nothing. */
  .split{grid-template-columns:1fr;gap:6px}
  .split-col.right > div{flex-direction:row;text-align:left}
  /* Stacked: one phone, centred, no offset partner. */
  .handset-stack{height:auto;display:flex;justify-content:center;margin:30px 0 6px}
  .handset{position:static;width:264px}
  .handset.back{display:none}
  .handset.front{transform:none}
  .cards,.cards-5{grid-template-columns:1fr 1fr}
  .demo-wrap{grid-template-columns:1fr;gap:30px}
  .demo-facts{grid-template-columns:1fr}
  .demo-panel{padding:24px 22px}
  .mast-art{order:2}
  .mast{padding:48px 0 56px}
  .six{grid-template-columns:1fr 1fr;gap:34px 30px}
  .cap.flip .cap-art{order:0}
  .band-head{align-items:start}
  .facts-in{grid-template-columns:1fr 1fr}
  .hero{padding:52px 0 54px}
  .band{padding:60px 0}
  .cap{padding:38px 0}
  .nav{display:none}
  .nav.open{
    display:flex;flex-direction:column;align-items:flex-start;gap:16px;
    position:absolute;left:0;right:0;top:72px;background:var(--paper);
    border-bottom:1px solid var(--rule);padding:22px 24px;margin:0;
  }
  .menu-btn{display:block}
}
@media(max-width:560px){
  .wrap{width:calc(100% - 32px)}
  .six,.cards,.cards-5{grid-template-columns:1fr}
  .phone-float{width:112px;right:-8px;bottom:8px}
  .aw-k{grid-template-columns:1fr 1fr}
  .aw-side{width:26px}
  .facts-in{grid-template-columns:1fr}
  /* Two numbers across, one panel down, and the church name off the
     title bar - at this width it was the thing that pushed the date
     off the end. */
  .kpis{grid-template-columns:1fr 1fr}
  .panels{grid-template-columns:1fr}
  .screen-church{display:none}
  .screen-body{padding:14px}
  .kpis b{font-size:27px}
  .bars div{grid-template-columns:104px 1fr 26px;font-size:12.5px}
  .form-grid{grid-template-columns:1fr}
  .demo-panel{padding:20px}
  .panel-heading{padding:14px 20px}
  .panel-body{padding:20px}
  .sheet{grid-template-columns:1fr 1fr}
  .index-list div{grid-template-columns:1fr;gap:4px}
  .rows div{grid-template-columns:100px 1fr;gap:10px}
  .book{padding-left:44px}
  .book:before{left:26px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* On the narrowest phones still in use here, the wordmark and
   the menu button together are wider than the screen, and the
   whole page could be dragged sideways. */
@media(max-width:400px){
  /* An email address is one unbreakable word. Beside a 100px
     label on a 320px screen it pushes the page sideways, so
     the pairs stack and the address is allowed to break. */
  .rows div{grid-template-columns:1fr;gap:2px}
  .rows dd{overflow-wrap:anywhere}
  .brand{gap:8px}
  .brand-word{font-size:17px}
  .brand small{font-size:8px;letter-spacing:.2em;margin-top:4px}
  .brand svg{width:30px;height:30px}
  .top-in{height:64px;gap:12px}
  .nav.open{top:64px}
  h1{font-size:34px}
}