@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plexmono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plexmono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plexmono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plexmono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/grotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/grotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/grotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/grotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/grotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/grotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/grotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/grotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --ink:#16130f; --cream:#f5f6f7; --warm:#e9ecef; --accent:#176a92;
  --ink-70:rgba(22,19,15,0.70); --ink-45:rgba(22,19,15,0.45);
  --rule:#dde4ec; --muted:#665f50; --faint:#8e98a3;
  --brand:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
}
/* --accent (was #3989b3, 3.31:1 on --cream) and --muted (was #8a8377, 3.20:1)
   both failed WCAG AA text contrast (4.5:1) against --cream/--warm — they're
   the color for every nav link, section label, footer row, and inline link
   on the site. Darkened both, same hue family, to clear AA with margin
   (accent 5.1:1/4.6:1, muted 5.4:1/4.9:1 against cream/warm). 2026-08-16.

   --cream/--warm/--rule/--faint retuned 2026-08-16: the previous values
   (cream #f3ecdf, warm #ece1cd, hue 39°, 45% saturation) read as tan/kraft-
   paper rather than a neutral page background. Re-hued to a cool slate
   family (~210°) that sits with --accent instead of against it — "blueprint"
   rather than "coffee shop" — at the same lightness/saturation curve as
   before, so contrast for ink/accent/red/muted all held or improved (all
   ≥5:1 against the new cream, checked before shipping). --rule and --faint
   were re-hued the same way so borders/dividers stay in the same family as
   the page instead of leaving a warm-tan edge on a cool background. */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--brand);-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none;}
.mono{font-family:var(--mono);}

@keyframes iq-rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes iq-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
@keyframes iq-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;}}

/* backdrop */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 15%,#e9ecef 0%,#f5f6f7 46%,#edf0f2 100%);}
.bg svg{position:absolute;height:auto;transform-origin:center;}
.bg .b1{right:-9%;bottom:-16%;width:min(62vw,760px);opacity:.05;animation:iq-breathe 9s ease-in-out infinite;}
.bg .b2{left:-7%;top:-12%;width:min(34vw,380px);opacity:.04;animation:iq-breathe 11s ease-in-out infinite 1s;}

.wrap{position:relative;z-index:1;display:flex;flex-direction:column;padding:44px;max-width:960px;margin:0 auto;
  min-height:100vh;min-height:100dvh;}

/* top bar — sticky so the brand stays pinned top-left on every page, including
   the long scrolling ones (/ram, /contact). The negative top margin cancels
   .wrap's padding and the matching padding-top puts it back inside the header
   box, so the 44px gap above the logo travels with it when it sticks and the
   page layout is identical to the non-sticky version. */
.top{position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:-44px 0 0;padding:44px 0 20px;}
/* the rise animation lives on the children, not .top — a transform on a
   position:sticky element would become the containing block for the fixed
   ::before below and shrink the band to the content column while it runs. */
.top>*{animation:iq-rise .7s .05s both cubic-bezier(.2,.7,.2,1);}
/* The band that hides content passing under the brand. It is fixed rather than
   painted on .top so it spans the viewport instead of the 960px column (no seam
   at the gutters) without 100vw, which would overflow past a classic scrollbar.
   It repaints the same gradient as .bg at the same viewport size, so the colour
   matches exactly at every x; the mask fades its bottom edge so the decorative
   shapes and the rising body copy dissolve rather than cutting off at a line. */
.top::before{content:'';position:fixed;top:0;left:0;right:0;height:140px;z-index:-1;
  pointer-events:none;
  background:radial-gradient(120% 90% at 85% 15%,#e9ecef 0%,#f5f6f7 46%,#edf0f2 100%);
  background-size:100% 100vh;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(#000 0 96px,rgba(0,0,0,.72) 116px,transparent 140px);
  mask-image:linear-gradient(#000 0 96px,rgba(0,0,0,.72) 116px,transparent 140px);}
.brand{display:flex;align-items:center;gap:13px;color:var(--ink);}
.brand-name{display:flex;flex-direction:column;line-height:1;}
.brand-name b{font-size:21px;font-weight:700;letter-spacing:-.03em;}
.brand-name span{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.28em;margin-top:3px;}
.dot{transform-origin:center;animation:iq-pulse 3.4s ease-in-out infinite 1s;}
.navlink{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--muted);
  border-bottom:1px solid transparent;padding-bottom:3px;transition:color .18s,border-color .18s;white-space:nowrap;}
.navlink:hover{color:var(--ink);border-color:var(--accent);}

/* type */
h1{font-size:clamp(34px,6.4vw,52px);line-height:1.08;font-weight:700;letter-spacing:-.035em;
  margin:0 0 22px;max-width:18ch;text-wrap:balance;}
h2{font-size:clamp(27px,4.6vw,38px);line-height:1.14;font-weight:700;letter-spacing:-.03em;
  margin:0 0 20px;max-width:20ch;text-wrap:balance;}
h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:10px 0 9px;}
p{font-size:17px;line-height:1.72;color:var(--ink-70);max-width:60ch;margin:0 0 18px;}
p.lede{font-size:clamp(16px,2.2vw,19px);line-height:1.65;max-width:46ch;margin:0;}
strong{color:var(--ink);font-weight:600;}
.eyebrow{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.28em;
  color:var(--accent);margin-bottom:14px;}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted);margin:0 0 18px;}
.mark{background-image:linear-gradient(rgba(23,106,146,.18),rgba(23,106,146,.18));background-repeat:no-repeat;
  background-size:100% .42em;background-position:0 88%;font-style:normal;color:var(--ink);font-weight:500;}

/* hero — homepage only; scoped under .hero so /ram (which shares this
   stylesheet but doesn't use the .hero class) is unaffected. Sized to fit
   one screen at common laptop viewports without scrolling. */
.hero{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:22px 0;}
.hero .tagline{font-size:clamp(13px,1.5vw,15px);color:var(--muted);margin:0 0 20px;max-width:44ch;
  animation:iq-rise .7s .1s both cubic-bezier(.2,.7,.2,1);}
.hero .eyebrow{margin-bottom:8px;animation:iq-rise .7s .18s both cubic-bezier(.2,.7,.2,1);}
.hero h1{font-size:clamp(26px,4.4vw,42px);line-height:1.12;max-width:19ch;margin:0 0 18px;
  animation:iq-rise .8s .26s both cubic-bezier(.2,.7,.2,1);}
.hero p{font-size:clamp(14px,1.5vw,16px);line-height:1.56;margin:0 0 12px;max-width:58ch;}
.hero p:nth-of-type(1){animation:iq-rise .8s .38s both cubic-bezier(.2,.7,.2,1);}
.hero p:nth-of-type(2){animation:iq-rise .8s .48s both cubic-bezier(.2,.7,.2,1);margin-bottom:0;}
.hero p a{text-decoration:underline;text-decoration-color:rgba(23,106,146,.4);text-underline-offset:3px;
  transition:text-decoration-color .18s;}
.hero p a:hover{text-decoration-color:var(--accent);}

.section{border-top:1px solid var(--rule);padding-top:56px;}

/* /ram page — this site's CSP is style-src 'self' with no 'unsafe-inline',
   so the browser silently drops any inline style="" attribute. Page-specific
   spacing/animation has to live here instead, not on the elements. */
article.ram{padding:148px 0 52px;}
article.ram h1{max-width:22ch;animation:iq-rise .8s .1s both cubic-bezier(.2,.7,.2,1);}
article.ram .lede{max-width:52ch;margin-bottom:56px;animation:iq-rise .8s .24s both cubic-bezier(.2,.7,.2,1);}
article.ram .section + .section{margin-top:56px;}
article.ram .mb-0{margin-bottom:0;}
article.ram .mb-34{margin-bottom:34px;}
article.ram .ram-quote{margin:24px 0 0;padding:2px 0 2px 24px;border-left:2px solid var(--accent);}
article.ram .ram-quote p{font-style:italic;color:var(--ink);}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px;margin:0 0 36px;}
.card{border:1px solid var(--rule);border-radius:16px;padding:24px 22px;background:rgba(255,255,255,.55);}
.card .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:10px;}
.card h3{font-size:16px;line-height:1.35;margin:0 0 10px;max-width:24ch;}
.card p{font-size:14px;line-height:1.66;margin:0;}

/* ---- lens (CISO / director viewpoints) ----------------------------------
   The site's CSP allows no first-party script, so the two viewpoints are two
   real URLs (/ram/ciso, /ram/director) rather than a JS tab switcher. /ram
   carries the shared premise plus the chooser cards below; each viewpoint
   page carries .lens-switch so a reader can cross over without going back. */

/* chooser cards on /ram */
.lens-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;margin:0 0 40px;}
.lens-card{display:flex;flex-direction:column;color:var(--ink);
  border:1px solid var(--rule);border-radius:18px;padding:28px 26px 24px;
  background:rgba(255,255,255,.55);
  transition:border-color .18s,background-color .18s,transform .18s;}
.lens-card:hover,.lens-card:focus-visible{border-color:var(--accent);background:rgba(255,255,255,.85);
  transform:translateY(-2px);}
.lens-card .n{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.22em;
  color:var(--accent);display:block;margin-bottom:14px;}
.lens-card h3{font-size:20px;line-height:1.25;letter-spacing:-.02em;margin:0 0 12px;max-width:22ch;}
.lens-card p{font-size:14px;line-height:1.68;margin:0 0 20px;}
.lens-card .lens-go{margin-top:auto;font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--muted);
  transition:color .18s;}
.lens-card:hover .lens-go,.lens-card:focus-visible .lens-go{color:var(--accent);}

/* the switch that sits above the h1 on each viewpoint page */
.lens-switch{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 28px;
  animation:iq-rise .7s .04s both cubic-bezier(.2,.7,.2,1);}
.lens-switch-label{font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--faint);margin-right:4px;}
.lens-opt{font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--muted);
  border:1px solid var(--rule);border-radius:999px;padding:7px 15px;background:rgba(255,255,255,.45);
  transition:color .18s,border-color .18s,background-color .18s;}
a.lens-opt:hover,a.lens-opt:focus-visible{color:var(--ink);border-color:var(--accent);
  background:rgba(255,255,255,.85);}
.lens-opt.is-on{color:var(--cream);background:var(--ink);border-color:var(--ink);}

/* cross-link to the other viewpoint at the foot of an article */
.lens-cross{margin:56px 0 0;border-top:1px solid var(--rule);padding-top:26px;}
.lens-cross .n{font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--faint);
  display:block;margin-bottom:10px;}
.lens-cross p{font-size:15px;line-height:1.7;}
.lens-cross a{border-bottom:1px solid rgba(23,106,146,.35);padding-bottom:1px;transition:border-color .18s;}
.lens-cross a:hover{border-color:var(--accent);}

/* the six director questions */
ol.qs{margin:0 0 34px;padding:0;list-style:none;counter-reset:q;}
ol.qs li{counter-increment:q;position:relative;padding:0 0 20px 46px;max-width:62ch;
  font-size:16px;line-height:1.66;color:var(--ink-70);}
ol.qs li + li{border-top:1px solid var(--rule);padding-top:20px;}
ol.qs li::before{content:'0' counter(q);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--accent);}
ol.qs li + li::before{top:22px;}
ol.qs li:last-child{padding-bottom:0;}

/* soon marker */
.soon{display:flex;align-items:center;gap:11px;margin:0 0 56px;}
.soon i{display:block;width:7px;height:7px;border-radius:2px;background:var(--accent);
  animation:iq-pulse 3.4s ease-in-out infinite;}
.soon span{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;color:var(--muted);}

/* failure modes */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;margin:0 0 44px;}
.split h3{margin-top:0;}
.split .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#a03222;display:block;margin-bottom:8px;}
.split p{font-size:15px;line-height:1.7;margin:0;}

/* Qantas / Optus / Medibank comparison on /ram/director — three real
   outcomes from the same test, so the colour language matches .split's
   failure-mode red for the two still exposed, and --accent for the one
   the regulator cleared. */
.case-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:24px 0 14px;
  align-items:stretch;}
.case{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:16px;
  padding:20px 20px 22px;background:rgba(255,255,255,.55);border-top-width:3px;}
.case-name{display:block;font-family:var(--brand);font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:8px;}
.case-detail{display:block;font-size:13px;line-height:1.55;color:var(--ink-70);margin-bottom:14px;}
.case-outcome{display:flex;gap:9px;align-items:flex-start;font-family:var(--mono);font-size:12px;
  line-height:1.55;font-weight:500;margin-top:auto;}
.case-dot{flex:none;width:7px;height:7px;border-radius:50%;margin-top:4px;}
.case-cleared{border-top-color:var(--accent);}
.case-cleared .case-outcome{color:var(--ink);}
.case-cleared .case-dot{background:var(--accent);}
.case-exposed{border-top-color:#a03222;}
.case-exposed .case-outcome{color:#a03222;}
.case-exposed .case-dot{background:#a03222;}
.case-caption{font-size:14px;color:var(--muted);max-width:56ch;}

.foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  border-top:1px solid var(--rule);padding-top:22px;}
.foot span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted);}
.foot span+span{letter-spacing:.12em;color:var(--faint);}
.foot-link{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted);
  transition:color .15s;}
.foot-link:hover{color:var(--accent);}

/* contact form — CSP here is style-src 'self' with no 'unsafe-inline', so
   (as with the rest of article.ram) nothing here is ever an inline style. */
article.ram .contact-form{margin-top:32px;max-width:520px;display:flex;flex-direction:column;gap:20px;}
article.ram .contact-form .field{display:flex;flex-direction:column;gap:6px;}
article.ram .contact-form .field-label{letter-spacing:.18em;color:var(--muted);font-size:11px;}
article.ram .contact-form input,
article.ram .contact-form textarea{
  font-family:var(--brand);font-size:15px;color:var(--ink);
  /* was rgba(255,255,255,.55) — at narrow (mobile) widths the .bg decorative
     shape sits under the form column and showed through the fields, most
     visibly behind the message textarea. .92 keeps the same frosted-glass
     idea but is opaque enough that the shape no longer reads through. */
  background:rgba(255,255,255,.92);border:1px solid var(--rule);border-radius:8px;
  padding:10px 12px;outline:none;transition:border-color .15s;}
article.ram .contact-form input:focus,
article.ram .contact-form textarea:focus{border-color:var(--accent);}
article.ram .contact-form textarea{resize:vertical;min-height:120px;line-height:1.6;}
article.ram .contact-form .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}
article.ram .contact-form .submit-btn{
  align-self:flex-start;font-size:11px;letter-spacing:.22em;color:var(--ink);
  /* was background:none — an outline-only button on a light page had no fill
     contrast at all against --cream, so it read weakly as a button at a
     glance. --warm gives it a visible surface without breaking the minimal
     language (still just a hairline border + label at rest). */
  background:var(--warm);border:1px solid var(--ink);border-radius:999px;
  padding:12px 26px;cursor:pointer;transition:background-color .15s,color .15s;}
article.ram .contact-form .submit-btn:hover{background:var(--ink);color:var(--cream);}

@media (max-width:640px){
  .wrap{padding:26px 22px 30px;}
  /* same trick, matched to the smaller gutters */
  .top{margin:-26px 0 0;padding:26px 0 14px;}
  .top::before{height:112px;
    -webkit-mask-image:linear-gradient(#000 0 74px,rgba(0,0,0,.72) 92px,transparent 112px);
    mask-image:linear-gradient(#000 0 74px,rgba(0,0,0,.72) 92px,transparent 112px);}
  .hero{min-height:calc(100vh - 170px);padding:40px 0 30px;}
  article.ram{padding:96px 0 40px;}
  .lens-choice{gap:14px;}
  .lens-card{padding:24px 22px 22px;}
  .lens-card h3{font-size:18px;}
  ol.qs li{padding-left:38px;}
  .case-strip{grid-template-columns:1fr;}
}