:root{--sheet:#EFF1F0;--card:#E4E7E6;--ink:#14181A;--second:#5C635F;--blue:#2436C6;--red:#E2482F;--ochre:#F0B43C;--cream:#F4EEDC;--night:#1B2A6B}
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--sheet);color:var(--ink)}
  body{font-family:"DM Sans",system-ui,sans-serif;font-size:16px;line-height:1.5}
  header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px clamp(16px,3vw,40px);font:500 13px "Host Grotesk";letter-spacing:.06em;text-transform:uppercase}
  header b{font-weight:800;font-size:19px;letter-spacing:0;text-transform:none}
  header span{color:var(--second)}
  .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
  .hero{background:var(--card);padding:clamp(20px,4vw,56px);display:flex;justify-content:center}
  .hero>div{width:min(880px,100%)}
  .hero .label{width:100%;transform:rotate(-.6deg)}
  /* a box lying on the table, seen a little from above: the lid (.label) with light on the white sleeve (no right face:
     a grey strip inside the lid read as a stray line); the bottom face hangs below the lid (.label::after, height --face); the cast shadow starts
     under the bottom face, sharp at the base and spreading with distance, one direction for every box (light from top left, low, so the shadow runs out under the box at a steep angle to the right, about 33°).
     Every shadow layer is shrunk (negative spread) and pushed down by the same amount, so its edge still starts right under
     the face but its ends sit inside the face's narrower base: no hard shadow corners stick out at the sides. The first layer is the contact shadow along the
     right side, which the shrunk layers would otherwise leave as a pale gap between the box and its shadow */
  .label{--face:5px;position:relative;background:linear-gradient(135deg,#fff 0%,#f7f6f3 60%,#efeee9 100%);padding:10px;
    box-shadow:inset 0 1px 0 #fff,0 0 1px rgba(20,24,26,.2),
      2px 2px 3px -1px rgba(20,24,26,.16),1.5px calc(var(--face) + 3px) 1px -2px rgba(20,24,26,.20),3px calc(var(--face) + 5px) 3px -2px rgba(20,24,26,.14),
      6px calc(var(--face) + 10px) 7px -3px rgba(20,24,26,.11),12px calc(var(--face) + 19px) 14px -4px rgba(20,24,26,.10),
      19px calc(var(--face) + 30px) 24px -5px rgba(20,24,26,.085),29px calc(var(--face) + 45px) 38px -6px rgba(20,24,26,.07),
      40px calc(var(--face) + 63px) 54px -8px rgba(20,24,26,.045)}
  .hero .label{--face:9px}
  .label svg{display:block;width:100%;height:auto;box-shadow:0 0 0 .5px rgba(20,24,26,.14)}
  /* the bottom face: a neutral grey, lightest at the top edge where the lit lid turns away and darkening down into the
     contact shadow; its lower edge is a touch narrower (perspective), so the table and the shadow show at its corners.
     The boxes are tilted, so a 1px line between lid and face breaks into stair-steps and a seam lets the dark shadow through:
     the face starts 1.5px up on the lid and fades in over those 1.5px: short enough to stay a crisp cardboard fold, long
     enough that no line forms (the lid's edge glow above is blurred for the same reason) */
  .label::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1.5px);height:calc(var(--face) + 1.5px);
    background:linear-gradient(to bottom,rgba(222,224,222,0) 0,#dee0de 1.5px,#d2d4d2 calc(1.5px + var(--face)*.5),#bfc2c0 100%);
    clip-path:polygon(0 0,100% 0,100% 1.5px,calc(100% - 2px) 100%,2px 100%,0 1.5px)}
  .cap{text-align:left;padding:14px 4px 0}
  .cap small{display:block;font:500 11px "Host Grotesk";letter-spacing:.14em;color:var(--second);text-transform:uppercase}
  .cap b{overflow-wrap:anywhere;display:block;font:500 15px "Host Grotesk";letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin-top:4px}
  .cap span{display:block;font-size:14px;color:var(--ink);margin-top:2px}
  .cap span+small{margin-top:8px}
  /* the source line: under the caption in the top blocks, at the very bottom of the tag in the series */
  .cap i,.tag i{display:block;font:400 12px "DM Mono",monospace;font-style:normal;color:var(--second);margin-top:6px}
  .cap i a,.tag i a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  /* a quiet service tag: one mono size, one grey, number and name alike */
  .tag{font:400 11px/1.4 "DM Mono",monospace;color:var(--second);padding:12px 4px 0}
  .tag small,.tag b{display:block;font:inherit;color:inherit}
  .lead{display:grid;grid-template-columns:1fr 2fr;gap:24px;padding:56px 0 8px}
  .lead h1,.lead h2{grid-column:2;font:500 clamp(26px,3vw,40px)/1.12 "Host Grotesk";margin:0}
  .lead p{grid-column:2;margin:0;max-width:62ch;font-size:17px}
  .lead .k{font:500 13px "Host Grotesk";color:var(--second);letter-spacing:.06em;text-transform:uppercase;padding-top:8px}
  /* the boxes of a section lie on one continuous surface, no tile per box */
  .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);padding:32px 0 8px;background:var(--card)}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);padding:32px 0 8px;background:var(--card)}
  .series{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);padding:32px 0 24px;background:var(--card)}
  .cell{padding:clamp(14px,2vw,26px) clamp(14px,2vw,26px) 18px}
  .cell .label{transform:rotate(var(--r,0deg))}
  /* four series layouts under test, switched from the devnote (data-layout on .series); the cell markup is the same in all:
     .cap (description), .label, .tag (number, name, source) */
  /* under: description above the label, the method tag below; the cells of one grid row share their row heights
     (subgrid), so the labels in a row start at the same line however long the description, which sits close to the label */
  .series[data-layout="under"] .cell{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .series[data-layout="under"] .cap{padding:0 4px 12px;align-self:end}
  /* hover: only boxes on the table; hovering or focusing a box lays a cream slip over it with the description on top
     and the tag at the bottom, tilted with the box */
  .series[data-layout="hover"] .cell{display:grid;cursor:default}
  .series[data-layout="hover"] .cell>*,.series[data-layout="hover"] .cell::after{grid-area:1/1}
  .series[data-layout="hover"] .cell::after{content:"";background:var(--cream);transform:rotate(var(--r,0deg));opacity:0;transition:opacity .2s;pointer-events:none}
  .series[data-layout="hover"] .cap,.series[data-layout="hover"] .tag{position:relative;z-index:1;padding:18px;transform:rotate(var(--r,0deg));opacity:0;transition:opacity .2s}
  .series[data-layout="hover"] .cap{align-self:start}
  /* the description fills about 83% of the slip's free height (fitHover sets --fs per cell) */
  .series[data-layout="hover"] .cap span{font:500 var(--fs,20px)/1.12 "Host Grotesk";margin:0}
  .series[data-layout="hover"] .tag{align-self:end}
  .series[data-layout="hover"] .cell:is(:hover,:focus-within)::after{opacity:.96}
  .series[data-layout="hover"] .cell:is(:hover,:focus-within) :is(.cap,.tag){opacity:1}
  /* side: every method takes two columns, the box and its text, so a row reads picture, text, picture, text;
     the description starts at the top of the box, the tag ends at its base */
  .series[data-layout="side"] .cell{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(14px,2vw,24px)}
  .series[data-layout="side"] .label{grid-column:1;grid-row:1/3}
  .series[data-layout="side"] .cap{grid-column:2;grid-row:1;padding:0 4px}
  /* the description is set nearly as large as the section headings (.lead h2) */
  .series[data-layout="side"] .cap span,.series[data-layout="text"] .cap span{font:500 clamp(20px,2.3vw,30px)/1.15 "Host Grotesk";margin:0}
  /* text only: no boxes, two methods to a row, the large description over the tag, a hairline above each method */
  .series[data-layout="text"] .cell{grid-column:span 2;display:flex;flex-direction:column;border-top:1px solid rgba(20,24,26,.2);margin:0 clamp(14px,2vw,26px);padding:18px 0 22px}
  .series[data-layout="text"] .label{display:none}
  .series[data-layout="text"] .cap{padding:0 4px}
  .series[data-layout="text"] .tag{margin-top:auto;padding:16px 4px 0}
  .series[data-layout="side"] .tag{grid-column:2;grid-row:2;align-self:end;padding:12px 4px 0}
  .tog{font:800 12px "Host Grotesk";letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--ink);background:transparent;color:var(--ink);padding:3px 8px;cursor:pointer;margin-left:4px}
  .tog[aria-pressed="true"]{background:var(--ink);color:var(--ochre)}
  .devnote{border:1.5px dashed var(--second);color:var(--second);font:500 12px "Host Grotesk";letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;margin:8px 0 0;display:inline-block}
  .usage{grid-column:2;margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
  .usage li{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:14px;align-items:baseline;font-size:15px}
  .usage code{font:500 14px "DM Mono",monospace;background:var(--ink);color:var(--ochre);padding:3px 8px}
  .install{background:var(--ink);color:var(--cream);margin:40px 0 0;padding:clamp(20px,4vw,48px);display:grid;grid-template-columns:1fr 2fr;gap:24px}
  .install .k{font:500 13px "Host Grotesk";letter-spacing:.06em;text-transform:uppercase;color:var(--ochre)}
  .install h2{font:800 clamp(24px,2.6vw,34px)/1.1 "Host Grotesk";margin:0 0 10px;text-transform:uppercase;letter-spacing:.02em}
  .install p{margin:0 0 18px;max-width:60ch}
  .install pre{margin:0 0 22px;background:var(--cream);color:var(--ink);padding:18px 20px;font:400 13.5px/1.55 "DM Mono",monospace;white-space:pre-wrap;word-break:break-word;border:3px solid var(--ochre)}
  .stamps{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
  .stamp{font:800 17px "Host Grotesk";letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--cream);background:var(--blue);padding:14px 22px;border:3px solid #fff;outline:2px solid var(--blue);cursor:pointer}
  .stamp.s{background:var(--red);outline-color:var(--red)}
  .stamp:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
  .copied{font:500 13px "Host Grotesk";letter-spacing:.06em;text-transform:uppercase;color:var(--ochre);min-height:1em}
  footer{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px clamp(16px,3vw,40px) 40px;margin-top:56px;border-top:1px solid var(--ink);font:500 12px/1.5 "Host Grotesk";letter-spacing:.06em;text-transform:uppercase;color:var(--second)}
  footer b{color:var(--ink);font-weight:800}
  svg text{font-family:"Host Grotesk",sans-serif}
  /* series columns: 4, then 3 at 1080px or less, then 2 at 720px or less. Side by side and Text only keep a 4-column
     grid down to 720px, because each of their methods spans two columns */
  @media (max-width:1080px){.series:is([data-layout="under"],[data-layout="hover"]){grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (max-width:720px){.series,.series:is([data-layout="under"],[data-layout="hover"]){grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:900px){
    .facts,.steps{grid-template-columns:1fr;max-width:420px;margin:0 auto}
    .lead,.install{grid-template-columns:1fr}
    .lead h1,.lead h2,.lead p,.usage{grid-column:1}
    footer{grid-template-columns:1fr 1fr}
    header span:nth-of-type(1){display:none}
  }
  @media (max-width:520px){.usage li{grid-template-columns:1fr;gap:4px}}

  /* mobile first; everything below sits on top of the landing's own styles */
  html,body{overflow-x:clip}
  @media (hover:none){.deck.chart .back{display:none}}
  header{padding:14px 16px}
  header span{display:inline}
  header[hidden]{display:none}
  .page{max-width:1240px;margin:0 auto;padding:0 16px}
  .sec{padding:56px 0 0}
  .claim{font:800 clamp(33px,9.6vw,68px)/1.04 "Host Grotesk";letter-spacing:-.01em;margin:0}
  .sub{font:700 clamp(22px,6vw,34px)/1.12 "Host Grotesk";margin:0}
  .note{font:500 15px/1.3 "DM Mono",monospace;color:var(--second);margin:24px 0 0}
  .src{display:block;font:400 12px/1.4 "DM Mono",monospace;color:var(--second);margin-top:6px}
  .hero2{padding:8px 0 0}
  .hero2 .label{--face:7px;padding:7px;transform:rotate(-.6deg)}
  .hero2 .claim{margin-top:28px}
  .say{margin:0}
  .say small{display:block;font:500 12px "DM Mono",monospace;letter-spacing:.08em;color:var(--second);margin-bottom:4px}
  .say+.say{margin-top:18px}
  .hero2 .say{margin-top:28px}
  .portrait{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:start}
  .portrait .label{--face:3px;padding:3px;transform:rotate(1deg)}
  .pl{display:grid;grid-template-columns:36% minmax(0,1fr);gap:16px;align-items:center}
  .pl+.pl{margin-top:24px}
  .pl .label{--face:4px;padding:4px;transform:rotate(var(--r,0deg))}
  .pl .sub{font-size:clamp(21px,5.6vw,30px)}
  .plist{margin-top:28px}
  .cmds{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:8px}
  .cmds li{font:500 14px/1.3 "DM Mono",monospace;background:var(--ink);color:var(--ochre);padding:8px 10px}
  .install{margin:56px 0 0;display:block}
  .install h2{text-transform:none;letter-spacing:0;font:800 clamp(26px,7vw,44px)/1.08 "Host Grotesk";margin:0 0 20px}
  .install pre{max-height:220px;overflow:auto}
  .install .note{color:var(--cream)}
  .stamp{font-size:15px;padding:12px 16px}
  footer{display:flex;justify-content:space-between;grid-template-columns:none;margin-top:48px;padding:18px 16px 96px}
  .deckline{margin-bottom:24px}
  .dt{display:none}
  @media (hover:hover){.dt{display:inline}.ph{display:none}}
  /* count: the first numeral of a line is a stamp */
  .n{display:block;font:800 clamp(56px,17vw,104px)/.92 "Host Grotesk";letter-spacing:-.02em}
  .n.max{font-size:clamp(120px,40vw,220px)}
  .fall{display:grid;grid-template-columns:27% minmax(0,1fr);gap:14px;align-items:center}
  .fall+.fall{margin-top:16px}
  .fall .label{--face:3px;padding:3px;transform:rotate(var(--r,0deg))}
  .fall.solo{grid-template-columns:auto minmax(0,1fr)}
  .fall .sub{font-size:clamp(18px,5vw,28px)}
  .run{margin-top:40px}
  /* ratio: one number big, the other small */
  .big{font-size:1.9em;line-height:.9;font-weight:800}
  .small{font-size:.8em;font-weight:700}
  /* test: one picture that turns over, opened on purpose */
  .testrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
  .c.solo{width:min(62%,300px);margin:28px auto 0;--bf:24px}
  .c.solo .back{justify-content:center}
  /* the fuse of 4, 5 and 6: the first screen is nine matchboxes, full bleed, not one label */
  section,#test{scroll-margin-top:80px}
  .h7{margin:0 calc(50% - 50vw);background:var(--blue);color:var(--cream);min-height:100svh;padding:64px 16px 28px;display:flex;flex-direction:column;box-sizing:border-box}
  .h7 .hd{font:500 14px "DM Mono",monospace;margin:0}
  .h7 h1{font:800 44px/1.04 "Host Grotesk";letter-spacing:-.01em;margin:16px 0 0}
  .boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px auto 0;width:min(100%,calc(100svh - 436px))}
  .bx{aspect-ratio:1}
  .bx .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:turn .4s calc(2.5s + var(--i)*.12s) cubic-bezier(.3,.7,.3,1) forwards}
  .bx .f{position:absolute;inset:0;background:var(--cream);display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
  .bx .f svg{display:block;height:100%}
  .bx .f.bk{transform:rotateY(180deg)}
  @keyframes turn{to{transform:rotateY(180deg)}}
  .h7 .h2{font:800 28px/1.1 "Host Grotesk";margin:14px 0 14px;opacity:0;animation:fadein .3s 3.9s forwards}
  @keyframes fadein{to{opacity:1}}
  .h7 .go{height:56px;border:0;background:var(--red);color:var(--cream);font:800 18px "Host Grotesk";cursor:pointer;width:100%}
  /* s7: twelve factory labels around one bulb (hero-3, method34 round seed 7201e4f6) in place of the flipping boxes, no motion */
  .p7 .h7 .fac{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,calc((100svh - 396px)*.75 + 16px))}
  .p7 .h7 .fac{gap:14px}
  .p7 .h7 .fac .label{--face:4px;padding:clamp(3px,.45vw,6px);transform:rotate(var(--r,0deg))}  /* the series' box: sleeve, light, face, shadow */
  .p7 .h7 .fac .dt3{display:none}
  /* on the blue table the bottom face catches blue from below: light grey at the fold, bluing and darkening toward the base */
  .p7 .h7 .fac .label::after{background:linear-gradient(to bottom,rgba(214,217,228,0) 0,#d6d9e4 1.5px,#aab2d6 calc(1.5px + var(--face)*.5),#6f7cc4 100%)}
  .btn1>div:last-child{display:flex;flex-direction:column}
  .btn1 .stamps{order:1;margin-bottom:16px}
  .btn1 pre{order:2}
  .said{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
  .said li{font:700 clamp(22px,6vw,34px)/1.12 "Host Grotesk"}
  .said small{display:block;font:500 12px "DM Mono",monospace;letter-spacing:.08em;color:var(--second);margin-bottom:3px;text-transform:uppercase}
  .said b{color:var(--red);font-weight:800}
  .cmdlink{color:inherit;text-decoration:underline;cursor:pointer}
  .ans{margin-top:48px}
  /* Fuse 3: the action is the loudest thing on the test screen; two-row swipe on a phone; a composed desktop */
  /* the answers are quoted machine output: printed slips in mono, apart from the page's own voice */
  .said.reply{gap:10px}
  .said.reply li{background:var(--cream);padding:12px 14px;font:500 17px/1.35 "DM Mono",monospace;box-shadow:0 1px 3px rgba(20,24,26,.16)}
  .said.reply b{font-weight:500}
  /* the call and its button are one object */
  .nowl{margin-top:24px}
  .ask{display:flex;align-items:stretch;border:3px solid var(--red);background:var(--cream);margin-top:10px}
  .ask span{flex:1;align-self:center;padding:8px 12px;font:500 16px/1.3 "DM Mono",monospace;user-select:all;-webkit-user-select:all}
  .cta{flex:none;min-width:88px;height:60px;border:0;background:var(--red);color:var(--cream);font:800 20px "Host Grotesk";cursor:pointer}
  .t3 .tm{margin-top:28px;width:52%}
  .t3 .tm .label{--face:4px;padding:4px}
  .pr .pics{margin-top:24px}
  .pr .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .pr .two .label{--face:3px;padding:3px}
  .p3 .sec{padding-top:72px}
  .band{margin:56px calc(50% - 50vw) 0;background:var(--blue);color:var(--cream);padding:40px 16px}
  .lead3{font:800 clamp(24px,6.4vw,38px)/1.14 "Host Grotesk";letter-spacing:-.01em;margin:0}
  .lead3.deckline{margin:6px 0 24px}
  .how3{margin-top:32px}
  .band .why{font:700 clamp(20px,5.4vw,24px)/1.2 "Host Grotesk";margin:16px 0 0}
  .cmd3 dl{margin:0;display:grid;gap:14px}
  .cmd3 dt{font:500 16px/1.3 "DM Mono",monospace;background:var(--ink);color:var(--ochre);padding:10px 12px}
  .cmd3 dd{margin:6px 0 0;font:700 18px/1.2 "Host Grotesk"}
  .cmd3 .claim{margin-top:32px;font-size:clamp(30px,8vw,52px)}
  .cmd3 .ins{margin-top:18px}
  /* Fuse 3: the back of a card is the same box as its front, same size and same paper; nothing spreads over a neighbour */
  .p3 .deck.chart{--bw:0px}
  .p3 .c .back{left:0;top:0;width:100%;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;transform:rotateY(180deg);border:clamp(2px,.7vw,8px) solid transparent;background:linear-gradient(var(--cream),var(--cream)) padding-box,linear-gradient(135deg,#fff 0%,#f7f6f3 60%,#efeee9 100%) border-box;padding:10px;gap:6px;box-shadow:0 8px 16px rgba(20,24,26,.2)}
  .p3 .c .back .tag small,.p3 .c .back .tag b,.p3 .c .back .tag i{font-size:10px;line-height:1.2;margin:0}
  .strip2{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:42vw;gap:14px 12px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;--bf:15px}
  .strip2 .c{scroll-snap-align:start}
  .p7 .strip2{gap:28px 24px;scroll-padding-inline:16px;overflow-y:hidden;padding-bottom:72px;margin-bottom:-48px}
  .btn3{display:block;background:var(--ink)}
  .btn3>div:first-child{display:none}
  .btn3>div:last-child{display:flex;flex-direction:column}
  .btn3 .pboxes{order:1}
  .btn3 .stamps{order:2;margin:28px 0 0}
  /* Short: the 7 screens of the Fuse short wireframe; the payoff is the blue band, the answers are slips like the rivers */
  .p7 .t7 .claim{font-size:clamp(30px,8vw,56px)}
  .p7 .t7 .ask{margin-top:20px}
  .p7 .t7 .ask span{margin:8px;padding:8px 12px;border:1.5px dashed var(--second)}  /* dashed: the copyable text */
  .p7 .t7 .cta{height:auto;min-height:60px}
  .p7 .t7 .vid{display:block;width:100%;aspect-ratio:1200/864;margin-top:20px;background:#fff;box-shadow:0 1px 3px rgba(20,24,26,.16)}
  .p7 .studies{font:500 16px/1.35 "Host Grotesk";margin:28px 0 0}
  .p7 .t7 .note{margin-top:12px}
  .p7 .pay{display:block}
  .p7 .pay .claim{font-size:clamp(30px,8vw,56px)}
  /* the three method34 answers as cards: a picture in front, the answer on the back (hover on desktop, tap on a phone) */
  .p7 .pay .ans3{display:grid;gap:20px;margin-top:28px}
  .p7 .pay .face{aspect-ratio:1;border-color:var(--cream);color:var(--cream);backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .p7 .pay img.face{display:block;width:100%;height:auto}  /* a made picture replaces the dashed placeholder */
  .p7 .pay .back{color:var(--ink);padding:clamp(16px,2vw,24px)}  /* the band sets cream text; the back is cream */
  .p7 .lead-sec .after{margin-top:24px;font-size:clamp(20px,5.4vw,28px)}
  .i7 h2{order:0}
  .i7 .note{order:3;margin-top:14px}
  .who7{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start}
  .who7 .claim{font-size:clamp(28px,7.4vw,52px)}
  .who7 .sub{margin-top:16px}
  .who7 .note{margin-top:12px}
  .miss{aspect-ratio:1;border:2px dashed var(--second);display:flex;align-items:center;justify-content:center;text-align:center;font:500 11px/1.3 "DM Mono",monospace;color:var(--second)}
  .exits{display:grid;gap:10px;margin-top:32px}
  .exits>*{display:block;border:0;background:var(--ink);color:var(--cream);font:800 20px "Host Grotesk";padding:18px 20px;text-align:left;text-decoration:none;cursor:pointer}
  .exits>:first-child{background:var(--red)}
  .tapme{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--red);color:var(--cream);font:800 15px "Host Grotesk";padding:8px 12px;white-space:nowrap}

  /* the deck: a card turns over; .back may be wider than a small card */
  .deck{background:var(--card);margin:0 -16px;padding:24px 16px}
  .c{position:relative;perspective:1400px;min-width:0;cursor:pointer;outline:0}
  .c.on{z-index:5}
  .c .in{position:relative;transform:rotate(var(--r,0deg));transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.3,1)}
  .c.on .in{transform:rotateY(180deg)}
  .c .label{--face:3px;padding:clamp(2px,.7vw,8px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .c .label::after{display:none}
  .c:focus-visible .label{outline:3px solid var(--blue);outline-offset:2px}
  .back{position:absolute;left:50%;top:50%;width:max(100%,var(--bw,0px));min-height:100%;transform:translate(calc(-50% + var(--dx,0px)),-50%) rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--cream);padding:16px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;box-shadow:0 10px 30px rgba(20,24,26,.28)}
  .c.pop .back{pointer-events:none}
  .back p,.rowslip p{font:500 var(--bf,20px)/1.14 "Host Grotesk";margin:0}
  .back .tag,.rowslip .tag{padding:0}
  /* strip: a swipe row on a phone */
  .deck.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;--bf:24px}
  .deck.strip .c{flex:0 0 68vw;scroll-snap-align:center}
  /* chart: rows of falling size */
  .deck.chart{display:grid;gap:clamp(10px,1.6vw,22px);--bw:260px}
  .row{display:flex;justify-content:center;gap:clamp(8px,1.4vw,20px)}
  .row .c{flex:0 0 var(--w)}
  .c.sel .label{outline:3px solid var(--red);outline-offset:1px}
  .rowslip{background:var(--cream);padding:16px;display:grid;gap:12px;transform-origin:top;animation:unfold .4s ease-out;--bf:22px}
  @keyframes unfold{from{transform:rotateX(-80deg);opacity:0}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){.c .in,.pin{transition:none}.rowslip{animation:none}.bx .in{animation:none;transform:rotateY(180deg)}.h7 .h2{animation:none;opacity:1}}

  @media (min-width:900px){
    .h7{min-height:100svh;padding:0 64px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;column-gap:64px;align-items:center}
    .h7 .hd{grid-column:1;grid-row:1;padding-top:20px}
    .h7 .txt{grid-column:1;grid-row:2}
    .h7 .boxes{grid-column:2;grid-row:1/4;grid-template-columns:repeat(3,minmax(0,240px));gap:16px;margin:0;width:min(752px,calc(100svh - 104px))}
    .duo .pl:only-child{grid-column:1/-1;grid-template-columns:240px minmax(0,1fr)}
    #test{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:48px;align-items:center}
    #test .c.solo{grid-column:2;grid-row:1/4;width:100%;margin:0}
    .h7 h1{font-size:72px;margin:0}
    .h7 .h2{font-size:36px;margin-top:24px}
    .h7 .go{width:auto;padding:0 32px;margin-top:18px}
    .p3 .sec{padding-top:120px}
    .p3 .lead-sec{padding-top:150px}
    .p3 .h7 .boxes{width:min(640px,calc(100svh - 104px));grid-template-columns:repeat(3,minmax(0,1fr))}
    .p3 .h7 h1{font-size:clamp(72px,6.2vw,92px)}
    .p3 .h7 .go{height:68px;font-size:22px;padding:0 48px}
    /* narrow desktop windows: the boxes take at most ~half the width, the headline and the button shrink with the text column */
    .p7 .h7 .fac{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:min(720px,calc(100svh - 88px),48vw)}
    .p7 .h7 h1{font-size:clamp(44px,5.4vw,92px)}
    .p7 .h7 .go{white-space:nowrap;font-size:clamp(17px,1.6vw,22px);padding:0 clamp(20px,2.6vw,48px)}
    .p7 .h7 .fac{gap:20px}
    .p7 .h7 .fac .label{--face:6px}
    .p7 .h7 .fac .dt3{display:block}
    #test.t3{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:64px;align-items:start}
    .t3 .said.reply li{font-size:clamp(20px,1.9vw,26px);padding:16px 20px}
    .t3 .sub{font-size:clamp(26px,2.5vw,36px)}
    .ask{width:fit-content;min-width:520px}
    .ask span{font-size:22px;padding:0 24px}
    .t3 .cta{height:76px;font-size:24px;min-width:160px}
    .t3 .tm{margin:0;width:auto;order:-1}
    .t3 .tm .label{--face:5px;padding:5px}
    .pr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;align-items:center}
    .pr .pics{margin:0}
    /* test screen split like the hero: words on the left, the video on the right, both fitting one screen */
    /* the block (question and prompt left, video right) fills the screen; the facts run as a quiet strip under it */
    #test.t7{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr auto;column-gap:56px;min-height:calc(100svh - 160px)}
    .p7 .t7 .claim{grid-column:1;grid-row:2;font-size:clamp(34px,3.2vw,52px)}
    .p7 .t7 .ask{grid-column:1;grid-row:3;min-width:0;width:100%}
    .p7 .t7 .ask span{margin:10px;padding:10px 16px;font-size:clamp(15px,1.35vw,19px)}
    .p7 .t7 .vid{grid-column:2;grid-row:1/5;align-self:center;margin:0;width:min(100%,calc((100svh - 230px)*1200/864))}
    .p7 .t7 .studies{grid-column:1;grid-row:5;margin-top:32px}
    .p7 .t7 .note{grid-column:2;grid-row:5;margin-top:32px;align-self:start;justify-self:end;text-align:right}
    .p7 .pay .ans3{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px}
    .p7 .studies{font-size:clamp(15px,1.2vw,17px)}
    .p7 .cmd3 dl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
    .p7 .cmd3{display:block}
    .i7 .note{grid-column:1;margin:16px 0 0}
    .i7 .pbox pre{max-height:none}
    .who7{grid-template-columns:200px minmax(0,1fr);gap:48px}
    .exits{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
    .band{margin-top:72px;padding:64px max(40px,calc(50vw - 580px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:center}
    .band .why{font-size:30px;margin:0}
    .how3{margin-top:48px}
    .cmd3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:center}
    .cmd3 .claim{margin-top:0}
    .cmd3 dd{font-size:20px}
    .how3 .sub{font-size:26px}
    /* s7: the three steps run top to bottom, a smaller picture on the left and its caption beside it */
    .p7 .how3{grid-template-columns:minmax(0,1fr);gap:32px;max-width:820px}
    .p7 .how3 .pl{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:40px;align-items:center}
    .p7 .how3 .pl .sub{margin:0}
    .btn3>div:last-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:48px;align-items:start}
    .install.btn3{display:block}
    .btn3 h2{grid-column:1;grid-row:1}
    .btn3 .stamps{grid-column:1;grid-row:2;margin:0}
    .btn3 .pboxes{grid-column:2;grid-row:1/5}
    .fall .label{max-width:170px}
    .fall{grid-template-columns:170px minmax(0,1fr)}
    .page{padding:0 40px}
    header{padding:18px 40px}
    .sec{padding:96px 0 0}
    .hero2{padding-top:8px}
    .hero2.mid{max-width:760px;margin:0 auto;text-align:center}
    .hero2.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center}
    .hero2.split .say:first-child{margin-top:0}
    .deck{margin:0 -40px;padding:32px 40px}
    .deck.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;overflow:visible;--bf:25px}
    .plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
    .pl{display:block}
    .pl+.pl{margin-top:0}
    .pl .sub{margin-top:18px}
    .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
    .duo .pl{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:center}
    .duo .pl .sub{margin-top:0}
    .cmds{grid-template-columns:repeat(3,auto);justify-content:start}
    .install{display:grid;grid-template-columns:1fr 2fr;margin-top:96px}
    footer{padding:22px 40px 96px}
  }
  /* s7 heading scale: hero 78 (desktop); every section heading one size; captions 20-26 */
  .p7 .t7 .claim,.p7 .pay .claim,.p7 .bm7 .claim,.p7 .lead-sec .lead3,.p7 .i7 h2,.p7 .who7 .claim{font-size:30px;line-height:1.06}
  /* s7: a step row carries its commands */
  .cmd7{margin:14px 0 0;display:grid;gap:10px}
  .pay .made7{position:relative;z-index:1;margin:28px 0 0}
  @media (min-width:900px){.pay .made7{margin-top:40px}}
  .made7 .nw7{white-space:nowrap}
  .p7 .lead-sec.open .more7{display:none}
  .p7 .c.on{z-index:auto}
  .p7 .lead-sec .dk.chart::after{transition:opacity .5s}
  .p7 .lead-sec.opening .dk.chart::after{opacity:0}
  .p7 .lead-sec .more7{transition:opacity .2s}
  .p7 .lead-sec.opening .more7{opacity:0;pointer-events:none}
  .p7 .bm7 .claim{color:var(--blue)}
  /* author block after the art director and strategist review: one tight claim group, calmer offer line, the biggest gap
     before the buttons, credits as a colophon line under them, sources close below, both on the text column on desktop */
  .p7 .who7 .sub{font-weight:500;font-size:20px;line-height:1.25;margin-top:12px}
  .p7 .who7 .note{margin-top:12px}
  .p7 .exits{margin-top:40px}
  .p7 .built7{margin:24px 0 0;font:400 13px/1.5 "DM Mono",monospace;color:var(--second)}
  .p7 .src-sec7{padding-top:0}
  .p7 .src-sec7 .srcs7{margin-top:24px}
  @media (min-width:900px){.p7 .who7 .sub{font-size:26px}.p7 .exits{margin-top:56px}.p7 .built7,.p7 .src-sec7{padding-left:308px}}
  /* author offers: three columns, each a line and a raised button in the Show all 34 style; the first one is red */
  .p7 .offers7{display:grid;gap:36px;margin-top:40px}
  .p7 .of7{display:flex;flex-direction:column;align-items:flex-start;gap:20px;border-top:2px solid var(--ink);padding-top:16px}
  .p7 .of7 p{flex:1;margin:0;font:500 20px/1.3 "Host Grotesk";color:var(--ink)}
  .p7 .of7>:last-child{--edge:6px;display:inline-block;height:56px;line-height:56px;padding:0 24px;margin:0 var(--edge) var(--edge) 0;border:0;background:transparent;color:var(--ink);font:800 18px/56px "Host Grotesk";text-decoration:none;cursor:pointer;box-shadow:inset 0 0 0 2px var(--ink),var(--edge) var(--edge) 0 var(--ink);transition:transform .08s ease-out,box-shadow .08s ease-out}
  .p7 .of7>button:last-child{background:var(--red);color:var(--cream);box-shadow:var(--edge) var(--edge) 0 var(--ink)}
  .p7 .of7>:last-child:hover{transform:translate(3px,3px);box-shadow:inset 0 0 0 2px var(--ink),3px 3px 0 var(--ink)}
  .p7 .of7>button:last-child:hover{box-shadow:3px 3px 0 var(--ink)}
  .p7 .of7>:last-child:active{transform:translate(var(--edge),var(--edge));box-shadow:inset 0 0 0 2px var(--ink)}
  .p7 .of7>button:last-child:active{box-shadow:none}
  .p7 .of7>:last-child:focus-visible{outline:3px solid var(--ochre);outline-offset:4px}
  @media (min-width:900px){.p7 .offers7{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px}}
  @media (prefers-reduced-motion:reduce){.p7 .of7>:last-child{transition:none}}
  .p7 .srcs7{margin-top:28px;font:400 14px/1.45 "DM Mono",monospace;color:var(--second);max-width:820px}
  .p7 .srcs7 summary{cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:15px;width:max-content}
  .p7 .srcs7 summary:hover{color:var(--blue)}
  .p7 .srcs7 h3{font:500 15px/1.3 "DM Mono",monospace;color:var(--ink);margin:24px 0 8px}
  .p7 .srcs7 ol{list-style:none;margin:0;padding:0}
  .p7 .srcs7 li{padding:8px 0;border-top:1px solid rgb(20 24 26 / .1);display:grid;gap:2px}
  .p7 .srcs7 .m7{color:var(--ink)}
  .p7 .srcs7 .p7t{font-style:italic}
  .p7 .srcs7 a{color:inherit;transition:color .15s}
  .p7 .srcs7 a:hover,.p7 .srcs7 a:focus-visible{color:var(--blue)}
  .p7 .who7 .claim a{color:inherit;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em;transition:color .15s}
  .p7 .who7 .claim a:hover,.p7 .who7 .claim a:focus-visible{color:var(--blue)}
  .p7 .who7{grid-template-columns:minmax(0,1fr)}
  .p7 .who7 .ascii7{display:block;width:100%;max-width:260px;margin:0 auto;touch-action:pan-y}
  @media (max-width:899px){.p7 .who7{padding-top:clamp(40px,calc((100vw - 260px)/2),80px)}}
  @media (min-width:900px){.p7 .who7{grid-template-columns:260px minmax(0,1fr)}.p7 .who7 .ascii7{max-width:none;margin:0}}
  .p7 .lead-sec .lede7{font:500 20px/1.3 "Host Grotesk";margin:16px 0 24px}
  @media (min-width:900px){.p7 .lead-sec .lede7{font-size:22px;margin-top:20px}}
  .bm7 .lede7{font:500 20px/1.3 "Host Grotesk";margin:16px 0 0;max-width:640px}
  .cc7{margin:14px 0 0}
  .cc7 .cmd7{margin:0}
  .k7{font:500 14px/1.35 "Host Grotesk";color:var(--second);margin:0 0 8px}
  .k7.lt7{margin:12px 0 0}
  .k7 code{font:500 13px "DM Mono",monospace;color:var(--ink);white-space:nowrap}
  @media (min-width:900px){.bm7 .lede7{font-size:22px;margin-top:20px}.p7 .how3 .cc7{margin:0}.p7 .how3 .cc7,.p7 .how3 .pl>div>.cmd7{border-left:1px solid rgb(20 24 26 / .15);padding:4px 0 4px 24px}}
  .cmd7 dt{display:inline-block;font:500 14px/1.3 "DM Mono",monospace;background:var(--ink);color:var(--ochre);padding:7px 10px}
  .cmd7 dd{margin:4px 0 0;font:700 16px/1.25 "Host Grotesk"}
  @media (min-width:900px){
    .p7 .t7 .claim,.p7 .pay .claim,.p7 .bm7 .claim,.p7 .lead-sec .lead3,.p7 .i7 h2,.p7 .who7 .claim{font-size:clamp(40px,3.6vw,52px)}
    .p7 .how3{max-width:none}
    .p7 .how3 .pl{grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);column-gap:48px}
    .p7 .how3 .pl>div:not(.label){display:contents}
    .p7 .how3 .cmd7{margin:0}
    .cmd7 dt{font-size:16px}
    .cmd7 dd{font-size:18px}
  }
  /* s7: the Time pictures in the page's box; one main-action colour (red), secondary actions outlined */
  .p7 .pay .label{--face:6px;padding:clamp(4px,.6vw,8px)}
  .p7 .pay .label img{display:block;width:100%;height:auto}
  .p7 .i7 .stamp{background:var(--red);border:0;outline:0;box-shadow:none;text-transform:none;letter-spacing:0;font:800 18px "Host Grotesk";padding:14px 24px}
  .p7 .i7 .stamp.s{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px var(--cream)}
  .p7 .i7 .stamp:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
  .p7 .exits>*:not(:first-child){background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
  .more7{display:none}
  @media (min-width:900px){
    /* clip only the height, so the boxes' shadows still fall past the deck's sides; the fade is a sheet-coloured veil,
     wider than the deck, since a mask would cut the shadows at the deck's edge */
    .p7 .lead-sec:not(.open) .dk.chart{max-height:var(--cut,none);overflow-x:visible;overflow-y:clip;position:relative}
    .p7 .lead-sec:not(.open) .dk.chart::after{content:"";position:absolute;left:-120px;right:-120px;bottom:0;height:var(--fade,150px);background:linear-gradient(to bottom,rgb(239 241 240 / 0),var(--sheet));pointer-events:none;z-index:6}
    .more7{display:inline-block;margin-top:28px;height:52px;padding:0 28px;border:0;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);font:800 18px "Host Grotesk";cursor:pointer}
  }
  /* s7 phone: the four Time cards run as a swipe strip, like the deck, instead of a 1,600 px column */
  @media (max-width:899px){
    .p7 .pay .ans3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:28px;margin:-32px -16px -122px;padding:64px 16px 140px;overflow-y:hidden;scroll-padding-inline:16px;scrollbar-width:none}
    .p7 .pay .ans3::-webkit-scrollbar{display:none}
    .p7 .pay .ans3 .c{flex:0 0 min(78vw,340px);scroll-snap-align:start}
  }
  /* s7: a thin electric-blue frame, the colour of the blue bands, keeps the test video a frame even on its white screens */
  .p7 .t7 .vid{box-shadow:0 0 0 2px var(--blue)}
  /* s7 desktop: the button sits right under the headline; the pair is centred against the boxes (phone keeps it at the bottom) */
  @media (min-width:900px){
    .p7 .h7{grid-template-rows:1fr auto auto 1fr}
    .p7 .h7 .txt{grid-row:2}
    .p7 .h7 .fac~.txt{grid-row:3;margin-top:0!important;align-self:start}
    .p7 .h7 .fac{grid-row:1/-1}
    .p7 .h7 .go{margin-top:clamp(28px,3vw,40px)}
  }
  /* s7: a short thin rule in the method line's own grey separates the method from the answer on the card back */
  .p7 .pay .back .tag{margin-top:16px}
  .p7 .pay .back .tag::before{content:"";display:block;width:100%;height:1px;background:currentColor;margin-bottom:10px}
  /* s7 hero button: a solid block with a hard dark edge; on hover it snaps a little into the screen, on press all the way */
  .p7 .h7 .go{--edge:6px;box-shadow:var(--edge) var(--edge) 0 var(--ink);transition:transform .08s ease-out,box-shadow .08s ease-out;transform:translate(0,0);margin-right:var(--edge);margin-bottom:var(--edge)}
  .p7 .h7 .go:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
  .p7 .h7 .go:active{transform:translate(var(--edge),var(--edge));box-shadow:0 0 0 var(--ink)}
  .p7 .h7 .go:focus-visible{outline:3px solid var(--ochre);outline-offset:4px}
  @media (prefers-reduced-motion:reduce){.p7 .h7 .go{transition:none}}
  @media (min-width:900px){.p7 .h7 .go{height:76px;padding:0 44px}}
  .p7 .pay .back p{line-height:1.3}  /* s7: more air between lines of the Time answers */
  /* s7: Show all 34 is a big electric-blue block centred under the deck, with the hero button's edge and press */
  @media (min-width:900px){
    .more7{display:block;margin:40px auto 0;height:76px;padding:0 56px;min-width:320px;background:var(--blue);color:var(--cream);font:800 22px "Host Grotesk";--edge:6px;box-shadow:var(--edge) var(--edge) 0 var(--ink);transition:transform .08s ease-out,box-shadow .08s ease-out}
    .more7:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
    .more7:active{transform:translate(var(--edge),var(--edge));box-shadow:0 0 0 var(--ink)}
    .more7:focus-visible{outline:3px solid var(--ochre);outline-offset:4px}
    /* the caption belongs to the deck, the button closes the block; both sit on the deck's own centre axis */
    .p7 .lead-sec .after{margin-top:32px;text-align:center}
    .p7 .lead-sec .more7{margin-top:32px}
  }
  @media (prefers-reduced-motion:reduce){.more7{transition:none}}
  /* s7: the 34 boxes sit straight on the page sheet, no grey shelf behind them */
  .p7 .deck{background:none}
  /* s7: every card is a solid matchbox. The lid (.label) and the back sit half a box-depth in front of and behind the
     centre, two striker sides and two ends close the box; box7() in the script sizes and turns it and draws its shadow.
     The sides and ends hang on the lid's own edges (positioned at 100%, turned about that edge), not on measured pixels:
     a card is rarely a whole number of pixels tall, and a face placed by a rounded size leaves a hairline gap that
     shows the ground while the box turns. The sides hang 1px inside the lid's edge, like a tray inside its sleeve, so
     the lid and the back overhang them, and the ends, which hang exactly on the lid's edge, run 1px past the sides and
     cover the corners. The ends never move: the bottom end is only a few pixels tall, and a 1px shift reads as a jump
     The bottom end carries the ground's reflex (blue on the blue band, grey on the sheet), one layer per side that can
     lie on the table, shown only while that side rests there */
  .p7{--rx0:#dee0de;--rx1:#d2d4d2;--rx2:#bfc2c0}
  .p7 .pay{--rx0:#d6d9e4;--rx1:#aab2d6;--rx2:#6f7cc4}
  .p7 .c .in{transition:none}
  .p7 .c .label{box-shadow:inset 0 1px 0 #fff;transform:translateZ(calc(var(--d,0px)/2))}
  .p7 .c .label::after{display:none}
  .p7 .c .back{transform:rotateY(180deg) translateZ(calc(var(--d,0px)/2));box-shadow:none}
  .p7 .c .s7,.p7 .c .e7{position:absolute;display:block;box-sizing:border-box;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .p7 .c .s7{top:0;height:100%;width:var(--d);background:#f3f1ec;padding:3.2% 2px}
  .p7 .c .s7 i{display:block;height:100%;background:radial-gradient(rgba(255,255,255,.16) .7px,transparent 1.1px) 0 0/3px 3px,radial-gradient(rgba(0,0,0,.3) .7px,transparent 1.1px) 1.5px 1.5px/3px 3px,#6b452c}
  .p7 .c .s7.r{left:100%;transform-origin:0 50%;transform:translateZ(calc(var(--d)/2)) rotateY(90deg)}
  .p7 .c .s7.l{right:100%;transform-origin:100% 50%;transform:translateZ(calc(var(--d)/2)) rotateY(-90deg);filter:brightness(.9)}
  .p7 .c .e7{left:0;width:100%;height:var(--d);background:#ebe7de}
  .p7 .c .e7.t{bottom:100%;transform-origin:50% 100%;transform:translateZ(calc(var(--d)/2)) rotateX(90deg);box-shadow:inset 0 0 0 1px rgba(20,24,26,.12)}
  .p7 .c .e7.b{top:100%;transform-origin:50% 0;transform:translateZ(calc(var(--d)/2)) rotateX(-90deg);background:#d2d4d2}  /* its own shade, facing down; the reflex lies over it at rest */
  .p7 .c .e7.b::before,.p7 .c .e7.b::after{content:"";position:absolute;inset:0}
  .p7 .c .e7.b::before{background:linear-gradient(to bottom,var(--rx0) 0,var(--rx1) 50%,var(--rx2) 100%);opacity:var(--rf0,1)}
  .p7 .c .e7.b::after{background:linear-gradient(to top,var(--rx0) 0,var(--rx1) 50%,var(--rx2) 100%);opacity:var(--rf1,0)}
  .p7 .c .cv7{position:absolute;display:block;pointer-events:none}
  /* s7: a source link on a card back turns electric blue, the hero's colour, under the pointer or keyboard focus */
  .p7 .tag i a{transition:color .15s}
  .p7 .tag i a:hover,.p7 .tag i a:focus-visible{color:var(--blue)}

/* ---- the site: footer, plain pages (contact, privacy, license, impressum, 404) ---- */
.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;max-width:1240px;margin:56px auto 0;padding:22px 16px 40px;border-top:1px solid var(--ink);font:500 13px/1.5 "DM Mono",monospace;color:var(--second);text-transform:none;letter-spacing:0}
.site-foot a{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .15s}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--blue)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
@media (min-width:900px){.site-foot{padding:22px 40px 48px}}
html{scrollbar-gutter:stable}
/* a short page still has its footer at the bottom of the screen: the page is a column, the content takes the free height */
body{display:flex;flex-direction:column;min-height:100svh}
body>main{flex:1 0 auto;width:100%}
.site-foot{width:100%}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;z-index:50;background:var(--ink);color:var(--cream);padding:8px 12px}
.sitehead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0;padding:18px 16px;font:500 13px "Host Grotesk";letter-spacing:.06em;text-transform:uppercase}
.sitehead a{color:var(--ink);text-decoration:none;transition:color .15s}.sitehead b{font-weight:800;font-size:19px;letter-spacing:0;text-transform:none}
.sitehead a:hover,.sitehead a:focus-visible{color:var(--blue)}
.sitehead nav{display:flex;align-items:center;gap:20px}
.sitehead .gh{display:inline-flex;align-items:center;gap:8px;border:1.5px solid currentColor;padding:7px 12px}
.sitehead .gh svg{display:block;flex:none}
.sitehead .gh span{color:inherit;display:inline}
.sitehead .gh:hover,.sitehead .gh:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--cream)}
/* on the home page the bar lies over the blue first screen */
.sitehead.over{position:absolute;top:0;left:0;right:0;z-index:5;width:100%}
.sitehead.over a{color:var(--cream)}
.sitehead.over a:hover,.sitehead.over a:focus-visible{color:var(--ink)}
.sitehead.over .gh:hover,.sitehead.over .gh:focus-visible{background:var(--cream);border-color:var(--cream);color:var(--ink)}
@media (min-width:900px){.sitehead{padding:18px 64px}}
.doc{max-width:760px;margin:0 auto;padding:24px 16px 8px}
.doc h1{font:800 clamp(34px,6vw,64px)/1.02 "Host Grotesk";letter-spacing:-.01em;margin:8px 0 24px}
.doc h2{font:800 clamp(22px,3vw,30px)/1.15 "Host Grotesk";margin:44px 0 12px}
.doc h3{font:700 18px/1.3 "Host Grotesk";margin:28px 0 8px}
.doc p,.doc li{font:400 17px/1.55 "DM Sans";margin:0 0 14px}
.doc ul{padding-left:22px;margin:0 0 14px}
.doc a{color:var(--blue);text-underline-offset:3px}
.doc a:hover,.doc a:focus-visible{color:var(--ink)}
.doc .mono{font:400 15px/1.55 "DM Mono",monospace}
.doc .intro{font:500 21px/1.4 "DM Sans";color:var(--ink);margin-bottom:28px}
.doc address{font:400 16px/1.6 "DM Mono",monospace;font-style:normal;margin:0 0 14px}
.doc .note{color:var(--second);font-size:15px}
.doc code{font:500 .92em "DM Mono",monospace;background:var(--card);padding:1px 5px}
.doc .tbd{background:#F0B43C33;padding:1px 4px}
/* the contact form */
.cform{display:grid;gap:22px;margin-top:8px}
.cform fieldset{border:0;margin:0;padding:0}
.cform legend{font:500 13px "DM Mono",monospace;color:var(--second);padding:0;margin-bottom:8px}
.cform label.lbl{display:grid;gap:6px;font:500 13px "DM Mono",monospace;color:var(--second)}
.cform input[type=text],.cform input[type=email],.cform textarea{font:400 17px/1.4 "DM Sans";color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:0;padding:12px 14px;width:100%}
.cform textarea{min-height:170px;resize:vertical}
.cform input:focus-visible,.cform textarea:focus-visible,.csubj input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.csubj{display:flex;flex-wrap:wrap;gap:10px}
.csubj label{position:relative}
.csubj input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.csubj span{display:inline-block;padding:10px 16px;border:1.5px solid var(--ink);font:500 15px "Host Grotesk";background:#fff}
.csubj input:checked+span{background:var(--ink);color:var(--cream)}
.cform .miss{outline:2px dashed var(--red);outline-offset:3px}
.cform button[type=submit]{--edge:6px;justify-self:start;font:800 17px "Host Grotesk";background:var(--blue);color:#fff;border:0;padding:14px 28px;margin:0 var(--edge) var(--edge) 0;box-shadow:var(--edge) var(--edge) 0 var(--ink);cursor:pointer;transition:transform .08s ease-out,box-shadow .08s ease-out}
/* same press as the other buttons on the site: it snaps a little towards the lower right, then all the way */
.cform button[type=submit]:hover:not(:disabled){transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.cform button[type=submit]:active:not(:disabled){transform:translate(var(--edge),var(--edge));box-shadow:none}
.cform button[type=submit]:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.doc .cmail{font:500 17px/1.4 "DM Sans";margin:28px 0 0}
.cmail a{color:var(--ink);text-underline-offset:3px}
.cmail a:hover,.cmail a:focus-visible{color:var(--blue)}
.cform button[type=submit]:disabled{opacity:.6;cursor:default}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#cfTurnstile{min-height:0}#cfTurnstile.ask{min-height:70px}
.cnote{font:500 15px/1.4 "DM Mono",monospace;min-height:1.4em;margin:0}
.cform-legal{font:400 14px/1.5 "DM Sans";color:var(--second);margin:0}
.cform-legal a{color:inherit}
/* the licence link under the install block is yellow on the dark panel */
.install .note a{color:var(--ochre);text-decoration:underline;text-underline-offset:3px;transition:color .15s}
.install .note a:hover,.install .note a:focus-visible{color:var(--cream)}
/* the two prompts: a label, the window, its own Copy button */
.pbox{margin:0 0 28px}.pbox:last-child{margin-bottom:0}
.pbox .k{font:500 13px "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ochre);margin:0 0 8px}
.install .pbox pre{margin:0 0 14px}
.pact{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.install .pbox .pdesc{font:400 15px/1.45 "DM Sans";margin:0 0 12px;max-width:52ch}
.install #prompt-install{max-height:none;overflow:visible} /* the short install prompt shows whole on a phone; only the long check scrolls */

/* the check is optional: a closed disclosure under the install window, so the two columns stay level */
.pbox.opt{margin:24px 0 0;padding-top:16px;border-top:1px dashed rgba(240,230,210,.35)}
.pbox.opt>summary{list-style:none;cursor:pointer;margin:0;display:flex;align-items:center;gap:10px}
.pbox.opt>summary::-webkit-details-marker{display:none}
.pbox.opt>summary::before{content:"";width:0;height:0;border:6px solid transparent;border-left:9px solid currentColor;border-right:0;transition:transform .15s}
.pbox.opt[open]>summary::before{transform:rotate(90deg)}
.pbox.opt[open]>summary{margin-bottom:12px}
.pbox.opt>summary:focus-visible{outline:3px solid var(--ochre);outline-offset:4px}
.install .pbox .pdesc{text-wrap:balance}
.p7 .i7 .pbox.opt .stamp{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px var(--cream)}

/* top bar: fixed, blue on every page, a little smaller once scrolled, never hidden */
:root{--hbar:60px}
body{padding-top:var(--hbar)}
.sitehead,.sitehead.over{position:fixed;top:0;left:0;right:0;width:100%;z-index:50;height:var(--hbar);box-sizing:border-box;padding-top:0;padding-bottom:0;background:var(--blue);transition:height .2s ease}
.sitehead.small{height:48px}
.sitehead a{color:var(--cream)}
.sitehead a:hover,.sitehead a:focus-visible{color:var(--ink)}
.sitehead .gh:hover,.sitehead .gh:focus-visible{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.sitehead b,.sitehead nav a,.sitehead .gh{transition:font-size .2s ease,padding .2s ease}
.sitehead nav{gap:16px}
.sitehead a.inst{background:var(--red);color:var(--cream);font-weight:800;padding:9px 14px;border:0}
.sitehead a.inst:hover,.sitehead a.inst:focus-visible{background:var(--cream);color:var(--ink)}
.sitehead a:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.sitehead .inst .l{display:none}
.sitehead.small b{font-size:16px}
.sitehead.small{font-size:12px}
.sitehead.small .gh{padding:5px 10px}
.sitehead.small a.inst{padding:6px 12px}
.h7{min-height:calc(100svh - var(--hbar));padding-top:16px}
#install,.install{scroll-margin-top:calc(var(--hbar) + 12px)}
@media (max-width:519px){.sitehead .gh .gt{display:none}.sitehead .gh{padding:7px 9px}.sitehead.small .gh{padding:5px 8px}}
@media (min-width:700px){.sitehead .inst .l{display:inline}.sitehead .inst .s{display:none}.sitehead nav{gap:20px}}
@media (min-width:900px){:root{--hbar:72px}.sitehead.small{height:52px}.h7{min-height:calc(100svh - var(--hbar));padding-top:0}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.sitehead,.sitehead b,.sitehead nav a,.sitehead .gh{transition:none}}
.sitehead a span{color:inherit}

/* top bar, second pass: one height for the two buttons, a hard edge on the main one, a quiet line before the outside link */
:root{--bh:40px}
.sitehead a.inst,.sitehead a.gh{box-sizing:border-box;height:var(--bh);display:inline-flex;align-items:center;transition:height .2s ease,padding .2s ease,transform .1s ease,box-shadow .1s ease}
.sitehead a.inst{padding:0 16px;box-shadow:3px 3px 0 var(--ink)}
.sitehead a.inst:hover,.sitehead a.inst:focus-visible{background:var(--red);color:var(--cream);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.sitehead a.inst:active{transform:translate(3px,3px);box-shadow:none}
.sitehead a.gh{border-width:1.5px;padding:0 12px}
.sitehead.small{--bh:32px}
.sitehead.small a.inst{padding:0 14px}
.sitehead.small a.gh{padding:0 10px}
.sitehead .sep{width:1px;height:24px;background:rgba(244,238,220,.35);flex:none}
.sitehead.small .sep{height:18px}
.sitehead .gh .ext{font-size:1.1em;line-height:1;margin-left:-2px;display:inline}
@media (max-width:519px){.sitehead .gh .ext{display:none}.sitehead a.gh{padding:0 9px}.sitehead.small a.gh{padding:0 8px}.sitehead .sep{height:20px}}
header.sitehead nav>span.sep{display:block}

/* quiet bar: only the name on the first screen of the home page; the buttons fade in on scroll (hidden = not focusable, not read) */
.sitehead nav{transition:opacity .2s ease,visibility .2s ease}
.sitehead.q nav{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.sitehead nav{transition:none}}

/* typed commands look like the prompt windows: cream, dark text, yellow frame */
.cmd7 dt,.cmd3 dt{background:var(--cream);color:var(--ink);border:2px solid var(--ochre)}
.cmd7 dt{padding:5px 10px}
.cmd3 dt{padding:8px 12px}

/* pulling the page down at the top (rubber band) shows blue like the bar; pulling up at the bottom shows the page colour.
   The canvas is a fixed two-colour gradient; the body paints its own page colour over the document, so only the pulled-out areas show it. */
html{background:linear-gradient(to bottom,var(--blue) 50%,var(--sheet) 50%) fixed}

/* more air between the headline and the copy plate under it */
.p7 .t7 .ask{margin-top:32px}
@media (min-width:900px){.p7 .t7 .ask{margin-top:48px}}

/* the second screen (the metaphor test) fills exactly what is left under the small top bar, so the hero button lands on a full screen with no edge of the next band */
:root{--hs:48px}
@media (min-width:900px){:root{--hs:52px}}
#test.t7{box-sizing:border-box;min-height:calc(100svh - var(--hs));padding-top:24px;padding-bottom:24px}
#test{scroll-margin-top:var(--hs)}