/* KuduDoc v6 — rendered-hardware phone showing the public file checker.
   Beat: "years later, a stranger checks it". Illustration only; the records are fictional.

   Sizing: everything is in em off one number. font-size = --phone-w / 30, so 1em = 10px at the
   default 300px and the device is 30em x 65em (9 : 19.5). Set --phone-w on .phone or any ancestor.
   Hardware, back to front: glass (bezel + screen + notch + glare) -> titanium frame ring with a
   polished chamfer -> four wall layers stepped back in Z (read only under perspective, i.e. in
   .phone--tilt) -> side keys at mid-depth -> the grounding shadow on the backmost layer.
   Needs tokens.css. Motion: transform / opacity only. */

.phone {
  --pw: var(--phone-w, min(300px, 74vw));
  --fw: .52em;          /* titanium frame ring seen from the front */
  --bz: 1.05em;         /* black glass bezel */
  --R: 4.75em;          /* outer corner radius */
  --depth: 3.7em;       /* body thickness, visible only in perspective */
  --glass: #040506;
  /* satin graphite titanium, reflections running along the length of the wall */
  --metal: linear-gradient(180deg, #8b9098 0%, #5b5f66 7%, #9a9fa7 19%, #62666d 33%, #7f848b 50%, #555960 66%, #8e939a 82%, #4f5359 94%, #6f737a 100%);
  /* antenna breaks: thin dark ticks across the front ring (kept off the stepped wall layers, where they would stair-step) */
  --bands: linear-gradient(180deg, rgba(0, 0, 0, 0) 0 10.7%, rgba(22, 24, 27, .78) 10.7% 11.05%, rgba(0, 0, 0, 0) 11.05% 88.95%, rgba(22, 24, 27, .78) 88.95% 89.3%, rgba(0, 0, 0, 0) 89.3%);
  --scan-ms: 900ms;
  position: relative;
  display: block;
  width: 30em;
  height: 65em;
  margin: 0;
  padding: 0;
  font-size: calc(var(--pw) / 30);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.phone *,
.phone *::before,
.phone *::after { box-sizing: border-box; }
:where(.phone) :where(p, dl, dd) { margin: 0; }

.phone .icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ the body */
.phone__device {
  position: absolute;
  inset: 0;
  padding: var(--fw);
  border-radius: var(--R);
  transform-style: preserve-3d;
  /* graphite titanium: environment reflections run round the ring (conic), top-lit on top */
  background:
    var(--bands),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 6%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, .28)),
    linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 5%, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, .20)),
    conic-gradient(from 0deg at 50% 50%, #7a7f86 0deg, #c3c8ce 22deg, #8a8f96 30deg, #50545a 52deg, #43474c 92deg, #54585e 138deg, #b9bec5 157deg, #4d5157 172deg, #36393e 204deg, #484c52 246deg, #60646b 276deg, #8f949b 316deg, #e4e8ec 336deg, #a2a7ae 348deg, #7a7f86 360deg);
  box-shadow:
    inset 0 0 0 .045em rgba(255, 255, 255, .55),         /* polished outer chamfer */
    inset 0 0 0 .1em rgba(20, 22, 25, .35),              /* the chamfer's shadowed underside */
    inset 0 .09em .05em rgba(255, 255, 255, .35),        /* top lip catching the light */
    inset .07em 0 .05em rgba(255, 255, 255, .18),
    inset 0 -.09em .07em rgba(0, 0, 0, .40);
}

/* the wall: six layers stepped back in Z. Front ones carry the chamfer's light, back ones fall off */
.phone__edge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.phone__device::before,
.phone__device::after,
.phone__edge::before,
.phone__edge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--R);
  pointer-events: none;
}
.phone__edge--a::before {   /* front chamfer: the brightest band */
  transform: translateZ(calc(var(--depth) * -.12));
  background: linear-gradient(rgba(255, 255, 255, .26), rgba(255, 255, 255, .26)), var(--metal);
}
.phone__edge--a::after {
  transform: translateZ(calc(var(--depth) * -.3));
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)), var(--metal);
}
.phone__edge--b::before {
  transform: translateZ(calc(var(--depth) * -.48));
  background: var(--metal);
}
.phone__edge--b::after {
  transform: translateZ(calc(var(--depth) * -.66));
  background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), var(--metal);
}
.phone__device::after {
  transform: translateZ(calc(var(--depth) * -.84));
  background: linear-gradient(rgba(0, 0, 0, .26), rgba(0, 0, 0, .26)), var(--metal);
}
/* backmost layer carries the grounding shadow: tight contact + mid + wide soft ambient */
.phone__device::before {
  transform: translateZ(calc(var(--depth) * -1));
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), var(--metal);
  box-shadow:
    0 .06em .1em rgba(6, 22, 42, .40),
    .06em .3em .5em -.05em rgba(6, 22, 42, .24),
    .3em 1.6em 2.6em -.7em rgba(6, 22, 42, .30),
    .7em 4.4em 6.4em -1.8em rgba(6, 22, 42, .30),
    0 8em 12em -4em rgba(6, 22, 42, .16);
}

/* side keys at mid-depth: in the flat view only the protruding sliver shows */
.phone__key {
  position: absolute;
  width: .8em;
  border-radius: .3em;
  transform: translateZ(calc(var(--depth) * -.4));
  pointer-events: none;
}
.phone__key--power {
  right: -.34em;
  top: 25.5%;
  height: 15%;
  background: linear-gradient(90deg, #2a2d31 0%, #2a2d31 58%, #121315 61%, #5e6269 65%, #b8bdc4 74%, #7c8188 85%, #e1e4e8 93%, #43474c 100%);
  box-shadow: inset 0 .06em .04em rgba(255, 255, 255, .25), inset 0 -.06em .05em rgba(0, 0, 0, .5);
}
.phone__key--action,
.phone__key--volup,
.phone__key--voldown {
  left: -.34em;
  background: linear-gradient(270deg, #2a2d31 0%, #2a2d31 58%, #121315 61%, #585c63 65%, #a9aeb5 75%, #6f747b 86%, #d4d8dd 93%, #3d4045 100%);
  box-shadow: inset 0 .06em .04em rgba(255, 255, 255, .25), inset 0 -.06em .05em rgba(0, 0, 0, .5);
}
.phone__key--action { top: 17.2%; height: 4.4%; }
.phone__key--volup { top: 25.2%; height: 8.2%; }
.phone__key--voldown { top: 35.2%; height: 8.2%; }

/* ------------------------------------------------------------------ the glass */
.phone__glass {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--bz);
  border-radius: calc(var(--R) - var(--fw));
  background: var(--glass);
  box-shadow:
    0 0 0 .03em #000,                          /* gasket */
    0 0 0 .13em rgba(12, 13, 15, .55),         /* darker band where frame meets glass */
    0 0 0 .2em rgba(12, 13, 15, .18),
    inset 0 0 0 .035em rgba(255, 255, 255, .16), /* the glass edge catching light */
    inset 0 .08em .1em rgba(255, 255, 255, .08);
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--R) - var(--fw) - var(--bz));
  background: #fcfdfe;
  isolation: isolate;
}
/* faint diagonal glare across the whole glass (bezel, notch and screen together) */
.phone__glare {
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 0 37%, rgba(255, 255, 255, .1) 37.2%, rgba(255, 255, 255, .035) 57%, rgba(255, 255, 255, 0) 57.3%),
    linear-gradient(118deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 22%),
    linear-gradient(0deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0) 16%);
}

/* the notch: cut from the bezel, with concave shoulders, a speaker slot and a camera */
.phone__notch {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 7;
  width: 13em;
  height: 2.5em;
  margin-left: -6.5em;
  border-radius: 0 0 1.5em 1.5em;
  background: var(--glass);
  pointer-events: none;
}
.phone__notch::before,
.phone__notch::after {
  content: "";
  position: absolute;
  top: 0;
  width: .64em;
  height: .64em;
}
.phone__notch::before {
  right: 100%;
  background: radial-gradient(circle at 0 100%, rgba(4, 5, 6, 0) .6em, var(--glass) .64em);
}
.phone__notch::after {
  left: 100%;
  background: radial-gradient(circle at 100% 100%, rgba(4, 5, 6, 0) .6em, var(--glass) .64em);
}
.phone__speaker {
  position: absolute;
  top: .8em;
  left: 50%;
  width: 4.1em;
  height: .5em;
  margin-left: -2.05em;
  border-radius: 1em;
  background:
    repeating-linear-gradient(90deg, rgba(120, 128, 140, .16) 0 .07em, rgba(0, 0, 0, 0) .07em .17em),
    linear-gradient(180deg, #0a0b0d, #1b1e22);
  box-shadow: inset 0 .06em .08em rgba(0, 0, 0, .95), 0 .035em 0 rgba(255, 255, 255, .08);
}
.phone__camera {
  position: absolute;
  top: .6em;
  left: 50%;
  width: .9em;
  height: .9em;
  margin-left: 3.05em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 33%, rgba(200, 225, 255, .85) 0 .035em, rgba(110, 150, 235, .42) .09em, rgba(40, 62, 130, .32) .18em, rgba(10, 16, 40, 0) .28em),
    radial-gradient(circle at 63% 66%, rgba(90, 120, 210, .28) 0 .04em, rgba(0, 0, 0, 0) .1em),
    radial-gradient(circle at 50% 50%, #0b1122 0 .19em, #05070c .29em, #000 .37em, #16181b .4em, #0b0c0e .45em);
  box-shadow: 0 0 0 .05em rgba(255, 255, 255, .05), inset 0 0 .08em rgba(0, 0, 0, .9);
}
.phone__home {
  position: absolute;
  left: 50%;
  bottom: .72em;
  z-index: 7;
  width: 9.4em;
  height: .44em;
  margin-left: -4.7em;
  border-radius: 1em;
  background: #0d1116;
  opacity: .9;
  pointer-events: none;
}

/* ------------------------------------------------------------------ the page on screen */
.phone__ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.phone__chrome {
  flex: none;
  padding: 3.05em 1.05em .75em;
  background: #f3f5f8;
  box-shadow: 0 1px 0 #e3e8ee;
  position: relative;
}
.phone__status {
  position: absolute;
  top: .2em;
  left: 0;
  right: 0;
  height: 2.5em;
  color: #0b1017;
}
.phone__time,
.phone__glyphs {
  position: absolute;
  top: 0;
  width: 6.99em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone__time {
  left: 0;
  padding-left: .5em;
  font-size: 1em;
}
.phone__time span {
  font-size: 1.14em;
  font-weight: 600;
  letter-spacing: -.01em;
}
.phone__glyphs {
  right: 0;
  gap: .32em;
  padding-right: .45em;
}
.phone__glyphs svg { display: block; fill: currentColor; }
.phone__g-signal { width: 1.45em; height: 1.02em; }
.phone__g-wifi { width: 1.36em; height: 1.02em; }
.phone__g-batt { width: 2.2em; height: 1.02em; }

.phone__url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .38em;
  height: 2.75em;
  border-radius: .95em;
  background: #e7ebf0;
  color: #2b3542;
  font-size: 1em;
}
.phone__url .icon { width: .92em; height: .92em; stroke-width: 2.2; color: #56697f; }
.phone__url span { font-size: 1em; font-weight: 500; letter-spacing: -.005em; }

.phone__page {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.7em 1.45em 0;
  background: #fcfdfe;
}
.phone__brand {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.36em;
  line-height: 1;
  letter-spacing: -.015em;
}
.phone__brand-a { color: #006bcb; font-weight: 400; letter-spacing: -.026em; }
.phone__brand-b { color: #ff762b; font-weight: 700; letter-spacing: -.026em; }
.phone__title {
  margin-top: 1.1em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.14em;
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--ink);
}
.phone__sub {
  margin-top: .5em;
  font-size: 1.04em;
  color: var(--slate);
}

/* the drop zone with the file being checked */
.phone__drop {
  position: relative;
  margin-top: 1.5em;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1.05em;
  border: 1px solid var(--line-cool);
  border-radius: 1.2em;
  background: var(--white);
  box-shadow: 0 .05em .1em rgba(16, 45, 73, .05), 0 .3em .9em rgba(16, 45, 73, .06);
  overflow: hidden;
}
/* THE SLOT: the page's travelling document lands exactly on this box. Keep it empty in idle. */
.phone__slot {
  position: relative;
  flex: none;
  width: 6.6em;              /* 22% of the phone width */
  height: 8.58em;            /* 1 : 1.3 */
  border: .1em dashed #a9b8c9;
  border-radius: .5em;
  background: rgba(238, 246, 255, .7);
}
.phone:not([data-phase="idle"]) .phone__slot {
  border-style: solid;
  border-color: rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0);
}
/* built-in thumbnail, shown once a file is in the slot; .phone--external-doc leaves it to the page */
.phone__paper {
  position: absolute;
  inset: -.1em;
  padding: .85em .7em;
  border-radius: .3em;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(16, 45, 73, .08), 0 .1em .2em rgba(6, 22, 42, .10), 0 .5em 1em rgba(6, 22, 42, .10);
  opacity: 0;
  transform: scale(.96);
  transition: opacity 300ms var(--ease), transform 400ms var(--ease);
}
.phone__paper i {
  display: block;
  height: .26em;
  margin-bottom: .48em;
  border-radius: 1em;
  background: #d9e0e8;
}
.phone__paper i:nth-child(1) { width: 70%; height: .4em; background: #b6c3d2; margin-bottom: .7em; }
.phone__paper i:nth-child(3) { width: 88%; }
.phone__paper i:nth-child(5) { width: 64%; }
.phone__paper i:nth-child(7) { width: 40%; margin-top: 1em; background: #c7d1dc; }
.phone:not([data-phase="idle"]) .phone__paper { opacity: 1; transform: none; }
.phone--external-doc .phone__paper { display: none; }

.phone__meta { flex: 1; min-width: 0; }
.phone__file {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.phone__cap {
  margin-top: .55em;
  font-size: .84em;
  color: var(--slate);
}
.phone__hash {
  position: relative;
  display: inline-block;
  margin-top: .35em;
  font-family: var(--font-mono);
  font-size: .8em;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink-2);
  white-space: nowrap;
}
/* skeleton in idle; it slides off in step with the scan bar and the digits are revealed */
.phone__hash::after {
  content: "";
  position: absolute;
  inset: .2em -.1em;
  border-radius: .3em;
  background: #e9eef4;
  transform-origin: 100% 50%;
  transition: transform var(--scan-ms) var(--ease-io);
}
.phone[data-phase="scanning"] .phone__hash::after,
.phone[data-phase="result"] .phone__hash::after { transform: scaleX(0); }

.phone__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.phone__scan::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  background: linear-gradient(90deg, rgba(47, 147, 234, 0) 0%, rgba(47, 147, 234, .07) 55%, rgba(47, 147, 234, .2) 93%, rgba(0, 107, 203, .95) 97.5%, rgba(79, 179, 255, 0) 100%);
  opacity: 0;
  transform: translateX(-104%);
}
.phone[data-phase="scanning"] .phone__scan::before {
  opacity: 1;
  animation: kdphone-sweep var(--scan-ms) var(--ease-io) infinite;
}
@keyframes kdphone-sweep {
  from { transform: translateX(-104%); }
  to { transform: translateX(296%); }
}

/* the lower slot: the call to action, or one of three result cards, stacked in one grid cell */
.phone__lower {
  margin-top: 1.2em;
  display: grid;
}
.phone__cta,
.phone__result {
  grid-area: 1 / 1;
  align-self: start;
}
.phone__cta {
  transition: opacity 260ms var(--ease), transform 420ms var(--ease);
}
.phone__btn {
  position: relative;
  display: grid;
  height: 3.5em;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 .15em .4em rgba(0, 78, 153, .22);
  font-size: 1em;
  font-weight: 600;
}
.phone__btn span {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  font-size: 1.04em;
  transition: opacity 240ms var(--ease), transform 360ms var(--ease);
}
.phone__btn-busy { opacity: 0; transform: translateY(.4em); }
.phone[data-phase="scanning"] .phone__btn-idle { opacity: 0; transform: translateY(-.4em); }
.phone[data-phase="scanning"] .phone__btn-busy { opacity: 1; transform: none; }
.phone[data-phase="scanning"] .phone__btn { background: var(--blue-700); }
.phone[data-phase="result"] .phone__cta {
  opacity: 0;
  transform: translateY(-.6em);
  visibility: hidden;
  transition: opacity 200ms var(--ease), transform 300ms var(--ease), visibility 0s linear 300ms;
}

.phone__result {
  opacity: 0;
  transform: translateY(1.6em);
  visibility: hidden;
  transition: opacity 300ms var(--ease), transform 420ms var(--ease), visibility 0s linear 420ms;
}
.phone[data-phase="result"][data-result="unchanged"] .phone__result--unchanged,
.phone[data-phase="result"][data-result="changed"] .phone__result--changed,
.phone[data-phase="result"][data-result="none"] .phone__result--none {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 420ms var(--ease) 80ms, transform 620ms var(--ease) 80ms, visibility 0s;
}
.phone__card {
  padding: 1.2em 1.15em 1.05em;
  border: 1px solid var(--line-cool);
  border-radius: 1.2em;
  background: var(--white);
  box-shadow: 0 .05em .1em rgba(16, 45, 73, .05), 0 .4em 1.2em rgba(16, 45, 73, .08);
}
.phone__result-head {
  display: flex;
  align-items: center;
  gap: .75em;
}
.phone__glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
}
.phone__glyph .icon { width: 1.5em; height: 1.5em; }
.phone__result--unchanged .phone__glyph { color: #006bcb; background: #e3f2ff; }
.phone__result--changed .phone__glyph { color: #ff4d2b; background: #fff0e6; }
.phone__result--none .phone__glyph { color: #56697f; background: #edf1f5; }
.phone__result-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4em;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ink);
}
.phone__result-line {
  margin-top: .8em;
  font-size: .96em;
  line-height: 1.42;
  color: var(--ink-2);
}
.phone__rows {
  margin-top: .8em;
  border-top: 1px solid var(--line-cool);
}
.phone__rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8em;
  padding: .62em 0;
  border-bottom: 1px solid #edf1f5;
}
.phone__rows > div:last-child { border-bottom: 0; padding-bottom: .1em; }
.phone__rows dt {
  flex: none;
  font-size: .87em;
  color: var(--slate);
}
.phone__rows dd {
  font-size: .87em;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.phone__kdid {
  margin-top: .75em;
  padding-top: .6em;
  border-top: 1px solid var(--line-cool);
  font-family: var(--font-mono);
  font-size: .74em;
  color: var(--mute);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone__kdid b {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--slate);
  margin-right: .4em;
}
.phone__note {
  margin-top: .8em;
  padding: .65em .8em;
  border-radius: .7em;
  background: #f1f4f7;
  font-size: .88em;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.phone__again {
  margin-top: 1.15em;
  text-align: center;
  font-size: .98em;
  font-weight: 600;
  color: var(--blue);
}
.phone__foot {
  margin-top: auto;
  padding: 1em 0 1.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  font-size: .82em;
  color: var(--slate);
}
.phone__foot .icon { width: 1.05em; height: 1.05em; stroke-width: 2; }

/* browser toolbar along the bottom; the home indicator floats over its lower band */
.phone__toolbar {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 5.3em;
  padding: 1.05em 2.2em 0;
  background: #f3f5f8;
  box-shadow: 0 -1px 0 #e3e8ee;
  color: #3b4a5c;
}
.phone__toolbar .icon { width: 1.55em; height: 1.55em; stroke-width: 2; }
.phone__toolbar .phone__tool-off { color: #b4bfcb; }
.phone__tabs {
  display: grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  margin-top: .05em;
  border: .16em solid currentColor;
  border-radius: .38em;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
}

/* ------------------------------------------------------------------ perspective */
.phone--tilt {
  perspective: calc(var(--pw) * 4.2);
  perspective-origin: 40% 45%;
}
.phone--tilt .phone__device {
  transform: rotateY(var(--tilt-y, -16deg)) rotateX(var(--tilt-x, 6deg)) rotateZ(var(--tilt-z, 2deg));
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .phone *,
  .phone *::before,
  .phone *::after {
    transition: none !important;
    animation: none !important;
  }
  .phone .phone__scan { display: none; }
}

/* the slanted mark beside the checker's wordmark, as in the site header */
.phone__brand { display: flex; align-items: center; gap: 0; }
.phone__brand-mark { width: 1.3em; height: auto; flex: none; margin-right: .38em; }