/* ═══ RINGLIO'S OWN BRIEF (briefs.ringlioai.com/t/ringlio-ai) — the flagship ═══════════════════════
   5 Oct 2026, first cut: set as a page of ringlioai.com, in that site's own system (its site.css).
   5 Oct 2026, the overhaul (Ethan, on seeing it live: "the widgets need a lot more attention to
   detail and more customised… get some photos of me and Tane in there… the colours of the widgets
   are off and the accent colour is wrong"): blue is the ONE accent, the widgets are one family in
   two grounds, the founders are on the page. Its sunset opening was rejected that evening.
   5 Oct 2026, the third pass (Ethan, on the sunset opening live: "the top bar looks like a website
   bar, doesn't really belong in a brief, really this whole design looks like a web page not really
   like a brief, it's doing a bit too much, come up with a different design for the background…
   I want a very custom brief for the ringlio website that matches our brand"):
     the opening  the Ringlio mark itself, laid along the page: its C in blue holds the name, the
                  welcome and the record line; its two blocks are the founders' photographs. No
                  picture behind the page, no floating bar, no button in the masthead; plain paper
     blue         #3D5AFE is the ONE accent, everywhere: the mark, the italic phrase of every
                  headline, every marker, every action, and the widgets
     widgets      one family in two grounds, the mark's blue and night ink, each with a drawing
                  made for its own answer (lib/plate/pieces/software.ts)
   Unchanged: paper #F1EEE8 and ink #0F0F12; Newsreader at its display size with a light italic and
   Mona Sans for text and labels, sentence case, on fine rules; the site's glass header, pills and
   18 px cards. The row (tenants/ringlio-ai.json) still wears the agency genre: the markup is the same
   band, welcome and rail every dressed brief has, re-set here. The columns, the plate and the
   widgets are set inside the engine's shadow root, so their rules sit in the "plate-engine" block at
   the foot (lib/plate/engine/furniture.ts kitCss). Loaded through brand.fonts.css_url: on the page
   at first paint. The faces are the website's own files (both SIL OFL 1.1: FONTS-LICENCE.txt). */
@font-face { font-family: "Newsreader"; src: url("/brand/ringlio-ai/fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; 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: "Newsreader"; src: url("/brand/ringlio-ai/fonts/newsreader-ext.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Newsreader"; src: url("/brand/ringlio-ai/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("/brand/ringlio-ai/fonts/mona-sans.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; 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: "Mona Sans"; src: url("/brand/ringlio-ai/fonts/mona-sans-ext.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Mona Sans"; src: url("/brand/ringlio-ai/fonts/mona-sans-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

/* ── the site's tokens, by the names this page's own rules read ── */
html:root {
  --rg-ink: #0F0F12; --rg-ink-2: #26262C; --rg-ink-3: #55555E; --rg-ink-4: #86868F;
  --rg-paper: #F1EEE8; --rg-paper-2: #E7E3DB; --rg-paper-3: #FAF8F4; --rg-on-ink: #EDEAE3;
  --rg-blue: #3D5AFE; --rg-blue-2: #2C46E6; --rg-blue-deep: #2238C8; --rg-blue-lite: #8E9DFF;
  --rg-night: #14151C; --rg-mute: #8F8A82;
  --rg-rule: rgba(15, 15, 18, .14);
  --rg-ease: cubic-bezier(.22, 1, .36, 1);
  --ink-2: var(--rg-ink-2); --ink-3: var(--rg-ink-3); --ink-4: var(--rg-ink-4);
  --rule: rgba(15, 15, 18, .2); --rule-soft: rgba(15, 15, 18, .12); --rule-soft-2: rgba(15, 15, 18, .1);
}
html, body { overflow-x: clip; }
body { font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
::selection { background: var(--rg-blue); color: #fff; }

/* ═══ THE NAMEPLATE — the site's header as a letterhead: the lockup, and what this page is ═══════
   (5 Oct, the sixth pass. Ethan sent the Fogarty Foundation's Brief, built the same day in another
   session: "I thought this design was very well done… want this level of design detail in the
   Ringlio one." What that page does, done here with Ringlio's own things:
     the brand's colour as one bold slab, the welcome set large ON it
     the brand's mark as the slab's pattern (Fogarty: its ripple; here: the magnet and its blocks)
     a figure standing a head above the slab's edge (Fogarty: a speaker; here: the product, an
       iPhone showing a Brief. Ethan, on the first cut with the two founders cut out: "I actually
       quite like that design direction, but I think the images of us need to be replaced with
       other things. Maybe an iPhone render where I am?")
     a tall second card in the rail, in the brand's dark colour, with its own figure
     one shape carried through (--rg-c, the mark's round back) and the mark as every small marker
   Flat grounds throughout: the only tone-on-tone is the mark laid large behind a figure.)
   A flat band of the page's bright paper, edge to edge, closing on a rule of the blue. No menu, no
   button: the next step is the dock's. */
html:root { --rg-c: 76px 22px 22px 76px; --rg-c-rail: 22px 76px 76px 22px; --rg-white: #FBF9F5; }
.paper-shell.is-agency { background: none; }
.masthead__band.is-filled.masthead__band--plate { position: relative; z-index: 4; padding: 0; background: var(--rg-white); color: var(--rg-ink); border: 0; box-shadow: inset 0 -4px 0 var(--rg-blue); }
.masthead__band--plate .masthead__band-in { display: flex; align-items: center; gap: 13px; max-width: 1340px; height: 92px; padding: 0 var(--gutter) 4px; }
.masthead__band--plate .masthead__band-mark { flex: none; width: 43px; height: 32px; margin: 0; background: var(--rg-blue); }
.masthead__band--plate .masthead__np { display: contents; }
.masthead__band--plate .masthead__np .masthead__title { padding: 0; border: 0; margin: 0; font: 600 30px/1 var(--sans); letter-spacing: -.045em; text-transform: none; color: var(--rg-ink); }
.masthead__band--plate .masthead__np-sub { margin-left: 9px; padding: 4px 0 4px 20px; border-left: 1px solid rgba(15, 15, 18, .2); font: 400 18px/1.15 var(--serif); font-style: italic; letter-spacing: -.008em; text-transform: none; color: var(--rg-ink-2); opacity: 1; }
.masthead__band--plate .masthead__band-right { margin-left: auto; padding: 0; gap: 20px; }
.masthead__band--plate .masthead__band-line,
.masthead__band--plate .masthead__band-loc { font: 600 14px/1 var(--sans); letter-spacing: -.003em; text-transform: none; color: var(--rg-ink); opacity: 1; }
.masthead__band--plate .masthead__band-loc { padding-left: 20px; border-left: 1px solid rgba(15, 15, 18, .2); font-weight: 500; }
.masthead__band.is-filled .masthead__band-dot { width: 8px; height: 8px; margin: 0 8px 0 4px; border-radius: 50%; vertical-align: 0; background: var(--rg-blue); box-shadow: 0 0 0 3px rgba(61, 90, 254, .2); }
.masthead__band--plate .masthead__band-cta { display: none; }

/* the way back and the date, on one line over one fine rule */
.paper-shell.is-agency .masthead__util { position: absolute; z-index: 2; left: var(--gutter); top: 0; margin: 0; padding: 34px 0 0; line-height: 17px; }
.paper-shell.is-agency .masthead.masthead--agency { display: flex; justify-content: flex-end; min-height: 0; margin: 0; padding: 18px 0 14px; border-top: 0; border-bottom: 1px solid rgba(15, 15, 18, .14); }
.paper-shell.is-agency .masthead--agency .masthead__edition { display: none; }
.paper-shell.is-agency .masthead--agency .masthead__meta { margin: 0; padding: 0; line-height: 17px; }
.paper-shell.is-agency .masthead__home { font: 600 13px/1.3 var(--sans); letter-spacing: -.003em; text-transform: none; color: var(--rg-ink); opacity: 1; }
.paper-shell.is-agency .masthead--agency .masthead__meta,
.paper-shell.is-agency .masthead--agency .masthead__meta > div { font: 500 13px/1.3 var(--sans); letter-spacing: -.003em; text-transform: none; color: var(--rg-ink-2); font-variant-numeric: lining-nums; }
.paper-shell.is-agency .masthead--agency .masthead__meta > div > * { font: inherit; font-weight: 700; color: var(--rg-ink); }

/* ═══ THE WELCOME — one slab of the blue, in the shape of the mark's round back ════════════════
   The invitation is set large on the colour, in the display face: the statement in ink, its
   italic in white. At the slab's open end the mark is laid large in the blue's own lighter tone,
   and an iPhone stands in front of it, a head above the slab's top edge: our own render (Cycles,
   the LinkedIn banner's handset), its screen a real capture of a Brief's phone edition (the Buzza
   & Croon demo, an answer page). The white plate at the slab's foot is the row's record line. */
.paper-shell.is-agency .article--lead.article--plate {
  position: relative; z-index: 1; margin-top: 56px; min-height: 318px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--rg-blue); color: #fff; border-radius: var(--rg-c); box-shadow: none;
}
/* the mark, large (html:root: the product hides a fresh plate's ::before, its own printing sweep,
   by a longer selector; this layer always stands) */
html:root .paper-shell.is-agency .article--lead.article--plate::before {
  content: ""; display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: auto; height: auto; transform: none; animation: none; border-radius: inherit;
  background: url("/brand/ringlio-ai/mark-white.svg") right -64px top 50% / auto 136% no-repeat;
  opacity: .12;
}
/* the phone (cut by the slab's foot, as a figure standing behind a counter is) */
.paper-shell.is-agency .article--lead.article--plate::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  right: 62px; bottom: 0; width: 280px; height: calc(100% + 58px);
  background: url("/brand/ringlio-ai/devices/phone-article.webp") center top / auto 492px no-repeat;
}
.paper-shell.is-agency .article--lead.article--plate .article__plate-in { position: relative; z-index: 2; max-width: min(660px, calc(100% - 350px)); padding: 34px 0 38px 64px; background: none; border-radius: 0; display: block; min-height: 0; }
.article--plate .article__plate-slug { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 600 13.5px/1.2 var(--sans); letter-spacing: -.003em; text-transform: none; color: #fff; opacity: 1; }
.article--plate .article__plate-slug::before { content: ""; flex: none; width: 20px; height: 15px; background: url("/brand/ringlio-ai/mark-white.svg") center / contain no-repeat; }
.article--plate .article__plate-greet {
  font-family: var(--serif); font-weight: 400; font-size: 74px; line-height: .94; letter-spacing: -.038em;
  font-variation-settings: "opsz" 72; color: #0B0B12; text-wrap: balance;
}
.article--plate .article__plate-greet em { font-style: italic; font-weight: 300; letter-spacing: -.03em; color: #fff; padding-right: .04em; }
.article--plate .article__plate-mech { margin-top: 20px; padding: 0; border: 0; max-width: 450px; font: 500 15.5px/1.5 var(--sans); letter-spacing: -.004em; color: #fff; text-wrap: pretty; }
.article--plate .article__plate-mech b { display: none; }
/* the record: a white plate at the slab's foot */
.article--plate .article__plate-rec {
  z-index: 3; top: auto; left: auto; right: 26px; bottom: 16px; width: auto; max-width: 360px; padding: 9px 16px 9px 11px;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px;
  border-radius: 999px; background: #fff; color: var(--rg-ink); box-shadow: 0 8px 18px -12px rgba(12, 20, 90, .55);
}
.article--plate .article__plate-rec .article__plate-mark { display: block; flex: none; width: 20px; height: 15px; margin: 0; background: var(--rg-blue); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }
.article--plate .article__plate-rec p { margin: 0; font: 700 12.5px/1.15 var(--sans); letter-spacing: -.003em; white-space: nowrap; }
.article--plate .article__plate-rec em { font-style: normal; font-weight: 500; color: var(--rg-ink-3); }
.article--plate .article__plate-src,
.article--plate .article__plate-rec.is-tight .article__plate-src { display: none; }
.article--plate .article__plate-rec.is-tighter .article__plate-mark { display: block; }

/* ═══ THE RAIL — the second card ═══════════════════════════════════════════════════════════════
   The slab's partner, in ink and in the slab's shape turned round, so the two close the opening
   like the mark's two ends. Its line is the row's tile; at its foot a laptop stands in front of
   the mark, laid large in the blue: our own render again, its screen a real capture of another
   demo's desktop Brief (Halcyon Coffee Roasters). One phone, one laptop: the two editions. (Ethan,
   on a version with a second phone here: "It can't be two iPhones.") Its plate is the tile's
   second line. */
.paper-shell.is-agency .rail.rail--plate { padding-top: 0; }
.rail .rail__plate.rail__plate--head {
  position: relative; z-index: 1; overflow: hidden; margin: 28px 0 0; padding: 28px 26px 0; min-height: 440px; border-radius: var(--rg-c-rail);
  background: var(--rg-ink); color: #F7F5F0; box-shadow: none;
}
.rail .rail__plate-mark { position: relative; z-index: 2; width: 30px; height: 22px; margin: 0 0 22px; background: #fff; }
.rail .rail__plate-text { position: relative; z-index: 2; font: 400 32px/1.02 var(--serif); letter-spacing: -.03em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.rail .rail__plate-text em { font-style: italic; font-weight: 300; color: var(--rg-blue-lite); }
/* the mark in the blue, large, and the laptop in front of it */
.rail .rail__plate.rail__plate--head::before { content: ""; position: absolute; z-index: 0; left: -30px; bottom: 34px; width: 330px; height: 244px; background: url("/brand/ringlio-ai/mark-blue.svg") center / contain no-repeat; }
.rail .rail__plate.rail__plate--head::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 62px; height: 220px; background: url("/brand/ringlio-ai/devices/laptop.webp") center bottom / 250px auto no-repeat; pointer-events: none; }
.rail .rail__plate-sub {
  position: absolute; z-index: 3; left: 50%; bottom: 20px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 999px;
  background: #fff; color: var(--rg-ink); font: 700 12px/1.15 var(--sans); letter-spacing: -.003em; text-transform: none; white-space: nowrap; opacity: 1;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .7);
}

/* a narrow window: the figure shrinks, then the name plate goes; the rail leaves under 1001 px */
@media (max-width: 1240px) {
  .paper-shell.is-agency .article--lead.article--plate .article__plate-in { max-width: min(560px, calc(100% - 300px)); padding-left: 52px; }
  .article--plate .article__plate-greet { font-size: 68px; }
  .paper-shell.is-agency .article--lead.article--plate::after { right: 30px; width: 260px; background-size: auto 480px; }
  .rail .rail__plate-text { font-size: 28px; }
  .rail .rail__plate.rail__plate--head::after { background-size: 212px auto; }
  .rail .rail__plate.rail__plate--head::before { left: -34px; width: 290px; height: 215px; }
  .rail .rail__plate-sub { font-size: 11px; padding: 7px 11px; }
}
@media (max-width: 1040px) {
  html:root { --rg-c: 56px 20px 20px 56px; }
  .paper-shell.is-agency .article--lead.article--plate { min-height: 0; }
  .paper-shell.is-agency .article--lead.article--plate .article__plate-in { max-width: calc(100% - 250px); padding: 30px 0 32px 44px; }
  .article--plate .article__plate-greet { font-size: 56px; }
  .paper-shell.is-agency .article--lead.article--plate::after { right: 18px; width: 210px; height: calc(100% + 40px); background-size: auto 390px; }
  .article--plate .article__plate-rec { position: absolute; display: none; }
}
@media (max-width: 760px) {
  html:root { --rg-c: 40px 18px 18px 40px; }
  .paper-shell.is-agency .article--lead.article--plate { margin-top: 28px; }
  .paper-shell.is-agency .article--lead.article--plate .article__plate-in { max-width: none; padding: 26px 24px 28px 30px; }
  .paper-shell.is-agency .article--lead.article--plate::after { display: none; }
  .article--plate .article__plate-greet { font-size: 44px; }
  .masthead__band--plate .masthead__band-in { height: 74px; }
  .masthead__band--plate .masthead__band-mark { width: 34px; height: 25px; }
  .masthead__band--plate .masthead__np .masthead__title { font-size: 24px; }
  .masthead__band--plate .masthead__np-sub, .masthead__band--plate .masthead__band-loc { display: none; }
}

/* the rail's own lists, in the site's hand: a quiet label, then the lines */
.rail .rail__scroll { margin-top: 26px; }
.rail .rail__eyebrow, .rail .rail__eyebrow-title, .rail .brief-struct__loose-head {
  margin: 0; padding: 0; border: 0;
  font: 500 13px/1.25 var(--sans); letter-spacing: -.003em; text-transform: none; color: var(--rg-ink-4);
}
.rail .rail__eyebrow { padding-top: 12px; border-top: 1px solid var(--rg-rule); margin-bottom: 10px; }
.rail .brief-struct, .rail .brief-struct__loose { margin: 0; padding: 0; border: 0; }
.rail .brief-struct > .rail__eyebrow { display: none; }
.rail .brief-struct__loose-head { padding-top: 12px; border-top: 1px solid var(--rg-rule); margin-bottom: 8px; }
.rail .brief-struct__loose-list li { font: 400 14px/1.5 var(--sans); font-style: normal; letter-spacing: -.003em; color: var(--rg-ink-2); }
.rail .rail-index { margin-top: 22px; }
.rail .rail-index__item { font: 400 16px/1.3 var(--serif); letter-spacing: -.012em; color: var(--rg-ink); text-align: left; }
.rail .rail-index__list li { padding: 3px 0; }

/* the colophon: one fine rule and small notes, as the site's own foot */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px; border-top: 1px solid var(--rg-rule); font: 400 12.5px/1.5 var(--sans); letter-spacing: -.003em; color: var(--rg-ink-3); }
.foot span, .foot em, .foot a { font: inherit; font-style: normal; letter-spacing: inherit; text-transform: none; }
.foot a { color: var(--rg-ink); text-decoration-color: rgba(15, 15, 18, .3); text-underline-offset: 3px; }

/* ═══ THE EDITION DOCK — the site's dark pill, and its one blue button ═══════════════════════════ */
.edock { font-family: var(--sans); }
.edock__bar, .edock__recover { background: var(--rg-ink); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 24px -14px rgba(15, 15, 18, .55); }
.edock__bar { border-radius: 18px; corner-shape: round; }
.edock__no { font: 400 25px/1 var(--serif); letter-spacing: -.03em; font-variation-settings: "opsz" 72; color: var(--rg-on-ink); }
.edock__nol { font: 500 13px/1 var(--sans); font-style: normal; letter-spacing: -.003em; color: rgba(237, 234, 227, .55); }
.edock__act, .edock__cta { border-radius: 12px; corner-shape: round; }
.edock__act.is-on { color: var(--rg-blue-lite); }
.edock__act::after { font: 500 13px/1 var(--sans); border-radius: 10px; }
.edock__cta { background: var(--rg-blue); color: #fff; font: 500 14.5px/1 var(--sans); letter-spacing: -.01em; box-shadow: none; }
.edock__cta:hover { filter: none; background: var(--rg-blue-2); }
.edock__go { background: var(--rg-blue); color: #fff; font-family: var(--sans); }
.edock__badge { background: var(--rg-blue); color: #fff; font-family: var(--sans); }
.edock__form-l, .edock__in, .edock__ghost, .edock__note { font-family: var(--sans); font-style: normal; }
.edock__ask { font: 400 19px/1.2 var(--serif); letter-spacing: -.02em; }
.edock__in:focus { border-color: var(--rg-blue-lite); box-shadow: 0 0 0 3px rgba(124, 141, 255, .22); }
.edock :focus-visible:not(input) { outline-color: var(--rg-blue-lite); }
.edock__recover { font: 500 13.5px/1 var(--sans); }
.edock__recover .edock__g { color: var(--rg-blue-lite); }

/* ═══ THE ENQUIRY CARD — the site's form card: quiet labels, and one blue button ═══════════════ */
.register-modal .register-card { border-radius: 18px; }
.register-modal .register-card__kicker,
.register-modal .register-card__label { font: 500 12.5px/1.3 var(--sans); letter-spacing: -.003em; text-transform: none; color: var(--rg-ink-3); }
.register-modal .register-card__byline { font: 500 14px/1.3 var(--sans); letter-spacing: -.005em; }
.register-modal .register-card__title { font: 400 27px/1.08 var(--serif); letter-spacing: -.024em; font-variation-settings: "opsz" 72; }
.register-modal .register-card__sub { font: 400 14.5px/1.5 var(--sans); font-style: normal; letter-spacing: -.003em; color: var(--rg-ink-2); }
.register-modal .register-card__input { border-radius: 12px; font-family: var(--sans); }
.register-modal .register-card__send {
  height: 48px; border-radius: 999px; background: var(--rg-blue); color: #fff;
  font: 500 15px/1 var(--sans); letter-spacing: -.01em; text-transform: none;
}
.register-modal .register-card__send:hover { background: var(--rg-blue-2); }
.register-modal .register-card__send span { font: inherit; text-transform: none; }
.register-modal .register-card__consent { font-size: 12px; line-height: 1.45; color: var(--rg-ink-3); }

/* ═══ ON A PHONE — the Pocket edition, in the same hand ══════════════════════════════════════════
   The front page opens as the desktop's does: one slab of the blue with the mark laid large in its
   lighter tone, the name as the lockup, the invitation in display
   Newsreader, and the door as a white ask bar. Every page after it is set as the desktop columns
   are: the mark and a label, a regular headline with a blue italic, labels in the text face. Blue
   is the one thing to do: Ask, in the dock. (Each rule leads with the shell, so it outranks the
   edition's own.) */
.paper-shell.is-pocket .pocket.is-lastline .ll-band {
  position: relative; isolation: isolate; overflow: hidden; padding: 20px 22px 26px;
  background: var(--rg-blue); color: #fff;
}
.paper-shell.is-pocket .pocket.is-lastline .ll-band::before {
  content: ""; position: absolute; z-index: -1; right: -96px; top: 34px; width: 392px; height: 290px; pointer-events: none;
  background: url("/brand/ringlio-ai/mark-white.svg") center / contain no-repeat; opacity: .12;
}
.paper-shell.is-pocket .pocket.is-lastline .ll-band::after { content: none; }
.paper-shell.is-pocket .pocket.is-lastline .ll-band .pocket-masthead { position: relative; margin: 0; padding: 0 0 13px; border-bottom: 1px solid rgba(255, 255, 255, .3); text-align: left; }
.paper-shell.is-pocket .pocket.is-lastline .ll-band .pocket-masthead__title {
  display: flex; align-items: center; gap: 9px; justify-content: flex-start;
  font: 600 18px/1.2 var(--sans); letter-spacing: -.035em; text-transform: none; color: #fff; white-space: nowrap;
}
.paper-shell.is-pocket .pocket.is-lastline .ll-band .pocket-masthead__title::before { content: ""; flex: none; width: 26px; height: 19px; background: url("/brand/ringlio-ai/mark-white.svg") center / contain no-repeat; }
.paper-shell.is-pocket .pocket.is-lastline .ll-band .pocket-masthead__title em { margin-left: -.2em; font: italic 300 20px/1 var(--serif); letter-spacing: -.01em; }
.paper-shell.is-pocket .pocket.is-lastline .ll-band .ll-cover__head {
  margin: 22px 0 0; color: #fff;
  font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: .96; letter-spacing: -.034em; font-variation-settings: "opsz" 72;
}
.paper-shell.is-pocket .pocket.is-lastline .ll-band .ll-door {
  margin: 22px 0 0; border-radius: 18px; background: #fff;
  box-shadow: 0 10px 22px -14px rgba(12, 20, 90, .6);
}
.paper-shell.is-pocket .pocket.is-lastline .ll-band .ll-door [class$="-ph"] { color: var(--rg-mute); font-weight: 300; }
.paper-shell.is-pocket .pocket.is-lastline .ll-band .ll-door [class$="-caret"] { background: var(--rg-blue); }
.paper-shell.is-pocket .pocket.is-lastline .ll-band .ll-door [class$="-file"] {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--rg-ink); color: #fff; font-family: var(--sans); font-size: 17px; line-height: 1;
}
.paper-shell.is-pocket .pocket.is-lastline .pocket-cover-index__label,
.paper-shell.is-pocket .pocket.is-lastline .pk__next-label { font: 500 14px/1.4 var(--sans); letter-spacing: -.005em; text-transform: none; color: var(--rg-ink); }
.paper-shell.is-pocket .pocket.is-lastline .pocket-cover-index__label i { font: inherit; font-style: normal; font-weight: 400; color: var(--rg-ink-3); }
.paper-shell.is-pocket .pocket.is-lastline .ll-q,
.paper-shell.is-pocket .pocket.is-lastline .ll-q .pk__next-text { font-weight: 400; letter-spacing: -.016em; }
.paper-shell.is-pocket .pocket.is-lastline .pocket-cover__chip,
.paper-shell.is-pocket .pocket.is-lastline .pk__grounded { background: var(--rg-paper-2); color: var(--rg-ink-3); font: 500 12.5px/1 var(--sans); letter-spacing: -.003em; text-transform: none; }
.paper-shell.is-pocket .pocket.is-lastline .pocket__folio-brand span { font: 500 13px/1 var(--sans); letter-spacing: -.003em; text-transform: none; }
.paper-shell.is-pocket .pocket.is-lastline .ll-ask { font: 500 15.5px/1 var(--sans); letter-spacing: -.01em; }
.paper-shell.is-pocket .pocket.is-lastline .ll-ask__in { background: var(--rg-blue); color: #fff; box-shadow: 0 10px 22px -10px rgba(61, 90, 254, .8), 0 2px 5px rgba(0, 0, 0, .18); }
.paper-shell.is-pocket .pocket.is-lastline .ll-ask__mark { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.paper-shell.is-pocket .pocket .ppl-rh__b { font: 500 13px/1 var(--sans); letter-spacing: -.003em; text-transform: none; }

/* an answer's page */
.paper-shell.is-pocket .pocket.is-lastline .pk__kicker:not(.is-wait) {
  display: inline-block; padding: 0 0 0 26px; border-radius: 0; box-shadow: none;
  background: url("/brand/ringlio-ai/mark-blue.svg") left 46% / 17px auto no-repeat;
  font: 500 13.5px/1.3 var(--sans); letter-spacing: -.003em; text-transform: lowercase; color: var(--rg-ink);
}
.paper-shell.is-pocket .pocket.is-lastline .pk__kicker:not(.is-wait)::first-letter { text-transform: uppercase; }
/* (every answer's headline: a page just written carries .ppl-head, a restored one does not) */
.paper-shell.is-pocket .pocket.is-lastline .pk__headline { font-weight: 400; letter-spacing: -.028em; line-height: 1.02; font-variation-settings: "opsz" 72; }
/* its italic phrase in Ringlio blue (Ethan, 5 Oct: "the 'meter', etc words in the headline should
   have accent colour not grey") */
.paper-shell.is-pocket .pocket.is-lastline .pk__headline em { font-weight: 300; letter-spacing: -.02em; color: var(--rg-blue); }
.paper-shell.is-pocket .pocket.is-lastline .tw-cap { font-weight: 400; color: var(--rg-ink); font-variation-settings: "opsz" 72; }
.paper-shell.is-pocket .pocket.is-lastline .pk__actions-label,
.paper-shell.is-pocket .pocket.is-lastline .pk__action,
.paper-shell.is-pocket .pocket.is-lastline .sources-pill__btn,
.paper-shell.is-pocket .pocket.is-lastline .pocket-page__fold,
.paper-shell.is-pocket .pocket.is-lastline .pocket-slate__kicker { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: -.003em; text-transform: none; }
.paper-shell.is-pocket .pocket.is-lastline .pk__action { color: var(--rg-blue); }
.paper-shell.is-pocket .pocket.is-lastline .pocket-slate__head { font-weight: 400; letter-spacing: -.026em; font-variation-settings: "opsz" 72; }

/* the phone's widgets: the desktop family on a phone (see "the widgets" at the foot). The card is
   cut as the slab is, the mark laid large in its ground a tone off; two grounds, ink and the
   mark's blue; the figure in display Newsreader; what the reader holds is solid (a blue thumb on
   ink, an ink one on blue); every card signed with the mark before its label. */
.paper-shell.is-pocket .w--phone {
  --p-font: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --p-tile: #0F0F12; --p-card: #0F0F12; --p-tint: #3D5AFE; --p-on-tint: #FFFFFF; --p-hue: #8E9DFF; --p-on-hue: #0F0F12; --p-thumb: #3D5AFE; --p-on-thumb: #FFFFFF;
  --p-2: rgba(244, 242, 250, .86); --p-3: rgba(244, 242, 250, .58); --p-fill: rgba(255, 255, 255, .09); --p-fill-2: rgba(255, 255, 255, .13); --p-sep: rgba(244, 242, 250, .18); --p-wash: rgba(142, 157, 255, .2);
  --w-ink: #0F0F12; --w-gold: #3D5AFE; --w-em: #8E9DFF; --w-paper: #FBF9F5; --w-hi: #FBF9F5; --w-2: rgba(244, 242, 250, .86); --w-3: rgba(244, 242, 250, .58); --w-4: rgba(244, 242, 250, .2); --w-fill: rgba(255, 255, 255, .09); --w-fill-2: rgba(255, 255, 255, .18);
  --p-mark: url("/brand/ringlio-ai/mark-tone-ink.svg"); --p-sign: #3D5AFE; --p-em: #8E9DFF;
}
.paper-shell.is-pocket .w--phone .w-tile {
  padding: 20px 18px 16px 22px; border-radius: 38px 17px 17px 38px;
  background: var(--p-tile) var(--p-mark) right -52px top -46px / 286px auto no-repeat; box-shadow: none;
}
.paper-shell.is-pocket .w--phone .w-tile[data-piece="flat"],
.paper-shell.is-pocket .w--phone .w-tile[data-piece="next"],
.paper-shell.is-pocket .w--phone .w-tile[data-tone="blue"] {
  --p-tile: #3D5AFE; --p-card: #3D5AFE; --p-tint: #0F0F12; --p-on-tint: #FFFFFF; --p-thumb: #0F0F12; --p-on-thumb: #FFFFFF;
  --p-2: rgba(255, 255, 255, .94); --p-3: rgba(255, 255, 255, .78); --p-fill: rgba(255, 255, 255, .16); --p-fill-2: rgba(255, 255, 255, .2); --p-sep: rgba(255, 255, 255, .3); --p-wash: rgba(255, 255, 255, .22);
  --w-ink: #3D5AFE; --w-gold: #0F0F12; --w-em: #FFFFFF; --w-hi: #FFFFFF; --w-2: rgba(255, 255, 255, .94); --w-3: rgba(255, 255, 255, .78); --w-4: rgba(255, 255, 255, .34); --w-fill: rgba(255, 255, 255, .16); --w-fill-2: rgba(255, 255, 255, .26);
  --p-mark: url("/brand/ringlio-ai/mark-tone-blue.svg"); --p-sign: #FFFFFF; --p-em: #FFFFFF;
}
.paper-shell.is-pocket .w--phone .p-h { gap: 9px; min-height: 20px; margin-bottom: 11px; font-weight: 600; font-size: 13.5px; color: var(--p-em); }
.paper-shell.is-pocket .w--phone .p-h__r { color: var(--p-2); }
.paper-shell.is-pocket .w--phone .p-h__i { flex: none; width: 21px; height: 16px; background: var(--p-sign); -webkit-mask: url("/brand/ringlio-ai/mark.svg") center / contain no-repeat; mask: url("/brand/ringlio-ai/mark.svg") center / contain no-repeat; }
.paper-shell.is-pocket .w--phone .p-h__i .p-ic { display: none; }
.paper-shell.is-pocket .w--phone .p-hero { font: 400 44px/1.02 var(--serif); letter-spacing: -.038em; font-variation-settings: "opsz" 72; font-variant-numeric: lining-nums; color: #FBF9F5; }
.paper-shell.is-pocket .w--phone .p-hero .p-u,
.paper-shell.is-pocket .w--phone .p-hero.is-plain .p-u,
.paper-shell.is-pocket .w--phone .p-hero em { margin-left: .1em; font-size: 1em; font-style: italic; font-weight: 300; letter-spacing: -.03em; color: var(--p-em); }
.paper-shell.is-pocket .w--phone .w-tile[data-piece="flat"] .p-hero,
.paper-shell.is-pocket .w--phone .w-tile[data-tone="blue"] .p-hero { color: #0B0B12; }
.paper-shell.is-pocket .w--phone .p-line { margin-top: 8px; font-weight: 500; }
.paper-shell.is-pocket .w--phone .p-line b { font-weight: 700; }
.paper-shell.is-pocket .w--phone .p-seg { background: var(--p-fill); }
.paper-shell.is-pocket .w--phone .p-seg__th { box-shadow: none; }
.paper-shell.is-pocket .w--phone .p-seg__b { padding: 0 2px; font-weight: 600; font-size: 14px; letter-spacing: -.016em; }
.paper-shell.is-pocket .w--phone .p-cap { margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--p-sep); font-weight: 500; color: var(--p-3); }
.paper-shell.is-pocket .w--phone .p-cap i { font-style: normal; color: var(--p-2); }
.paper-shell.is-pocket .w--phone .p-node.is-done span { background: rgba(142, 157, 255, .22); color: #C9D0FF; }
.paper-shell.is-pocket .w--phone .p-next__t { font: 400 34px/1 var(--serif); letter-spacing: -.036em; font-variation-settings: "opsz" 72; color: #0B0B12; }
.paper-shell.is-pocket .w--phone .p-next__t em { font-style: italic; font-weight: 300; color: #FFFFFF; }
.paper-shell.is-pocket .w--phone .p-faces span { box-shadow: 0 0 0 2.5px #3D5AFE; }
.paper-shell.is-pocket .w--phone .p-held__r b { font-weight: 700; }
/* the scenes, as on the desktop (the same marks, set by the same rules at the foot) */
.paper-shell.is-pocket .w--phone .p-glyph { margin-top: 12px; }
.paper-shell.is-pocket .w--phone .w-sc__k { gap: 6px; font: 600 9px/1 var(--p-font); color: #0F0F12; }
.paper-shell.is-pocket .w--phone .w-sc__k::before { width: 11px; height: 8.2px; background: #3D5AFE; -webkit-mask: url("/brand/ringlio-ai/mark.svg") center / contain no-repeat; mask: url("/brand/ringlio-ai/mark.svg") center / contain no-repeat; }
.paper-shell.is-pocket .w--phone .w-sc__b > span { font: 500 13px/30px var(--p-font); }
.paper-shell.is-pocket .w--phone .w-sc__b u { color: #8E9DFF; }
.paper-shell.is-pocket .w--phone .w-sc--sheet { padding: 13px 11px 11px 18px; border-radius: 26px 10px 10px 26px; background: #FBF9F5; color: #0F0F12; }
.paper-shell.is-pocket .w--phone .w-sc__h { font-weight: 400; font-size: 18px; letter-spacing: -.03em; font-variation-settings: "opsz" 72; }
.paper-shell.is-pocket .w--phone .w-sc__h em { font-weight: 300; color: #3D5AFE; }
.paper-shell.is-pocket .w--phone .w-sc__p { font-family: var(--p-font); font-weight: 500; font-size: 7.4px; line-height: 1.45; opacity: .62; }
.paper-shell.is-pocket .w--phone .w-sc__ph { border-radius: 8px; background-color: #0F0F12; }
.paper-shell.is-pocket .w--phone .w-sc__w { padding: 10px 9px 9px 12px; border-radius: 18px 7px 7px 18px; background: #3D5AFE; }
.paper-shell.is-pocket .w--phone .w-sc__w > span { font: 600 7.6px/1 var(--p-font); opacity: 1; }
.paper-shell.is-pocket .w--phone .w-sc__w > b { color: #0B0B12; font-weight: 400; font-variation-settings: "opsz" 72; }
.paper-shell.is-pocket .w--phone .w-sc__w > b em { font-weight: 300; color: #FFFFFF; }
.paper-shell.is-pocket .w--phone .w-sc__slip { border-radius: 30px 11px 11px 30px; padding-left: 20px; background: #FBF9F5; color: #0F0F12; }
.paper-shell.is-pocket .w--phone .w-sc__under { border-radius: 16px 9px 9px 16px; background: #FBF9F5; }
.paper-shell.is-pocket .w--phone .w-sc__n { color: #3D5AFE; font-weight: 400; font-variation-settings: "opsz" 72; }
.paper-shell.is-pocket .w--phone .w-sc__q { font-weight: 400; font-variation-settings: "opsz" 72; }
.paper-shell.is-pocket .w--phone .w-sc__tag { background: #3D5AFE; color: #FFFFFF; font: 600 10.5px/22px var(--p-font); }
.paper-shell.is-pocket .w--phone .w-sc--slip[data-look="gap"] .w-sc__slip { background: #0F0F12; color: #FBF9F5; box-shadow: none; border: 1.5px dashed #8E9DFF; }
.paper-shell.is-pocket .w--phone .w-sc--slip[data-look="gap"] .w-sc__k { color: #8E9DFF; }
.paper-shell.is-pocket .w--phone .w-sc--slip[data-look="gap"] .w-sc__k::before { background: #8E9DFF; }
.paper-shell.is-pocket .w--phone .w-sc--slip[data-look="gap"] .w-sc__n { color: #8E9DFF; font-style: italic; font-weight: 300; }
.paper-shell.is-pocket .w--phone .w-sc--slip[data-look="call"] .w-sc__n { background: #3D5AFE; color: #FFFFFF; }
.paper-shell.is-pocket .w--phone .w-sc--device { border-radius: 0 0 11px 30px; }
.paper-shell.is-pocket .w--phone .w-sc__slab { height: 78px; border-radius: 30px 11px 11px 30px; background: #3D5AFE url("/brand/ringlio-ai/mark-tone-blue.svg") right -30px top 50% / auto 190% no-repeat; }
.paper-shell.is-pocket .w--phone .w-flat__cells > i { border-radius: 8px; }
.paper-shell.is-pocket .w--phone .w-dress { border-radius: 12px; box-shadow: none; }
.paper-shell.is-pocket .w--phone .w-dress__band b, .paper-shell.is-pocket .w--phone .w-dress__band em, .paper-shell.is-pocket .w--phone .w-dress__h, .paper-shell.is-pocket .w--phone .w-dress__tile b { font-variation-settings: "opsz" 72; }
.paper-shell.is-pocket .w--phone .w-dress__h em, .paper-shell.is-pocket .w--phone .w-dress__tile b em { font-weight: 300; }
.paper-shell.is-pocket .w--phone .p-sw i { border-radius: 8px; width: 30px; height: 30px; }

/* ═══ THE PAGE THE ENGINE SETS — columns, the plate, the widgets ═════════════════════════════════
   Lifted into the engine's shadow root (see the head of this file). Paint and type only: the
   engine measures what it sets with these rules in place, and nothing here moves a box it places. */
@media plate-engine {
  :host { --pe-shade: #0F0F12; }

  /* a column opens on the site's fine rule and its marker: a dot, a label, sentence case */
  .art::before { background: rgba(15, 15, 18, .22); }
  .kicker { font: 500 13px/1.2 var(--pe-sans); letter-spacing: -.003em; text-transform: none; color: var(--ink-3); padding-bottom: 10px; margin-bottom: 12px; font-variant-numeric: lining-nums; }
  .kicker::after { opacity: 0; }
  .kicker__label { gap: 10px; color: var(--ink); font-weight: 500; }
  /* the marker before every label is the mark itself (as the slab's and the cards' is) */
  .kicker__dot { width: 17px; height: 13px; border-radius: 0; background: url("/brand/ringlio-ai/mark-blue.svg") center / contain no-repeat; }
  /* a column's section is filed in capitals (every other brief tracks it out as caps); here it is
     set as the site sets a label, so the row's labels are words that carry no capital of their own */
  .kicker__label .flap > span { text-transform: lowercase; }
  .kicker__label .flap > span::first-letter { text-transform: uppercase; }
  .void-brief .vb-k { font: 500 13px/1.2 var(--pe-sans); letter-spacing: -.003em; text-transform: none; color: var(--ink); gap: 10px; }
  .void-brief .vb-k > i { width: 17px; height: 13px; border-radius: 0; background: url("/brand/ringlio-ai/mark-blue.svg") center / contain no-repeat; }
  .void-brief .vb-s { font: 400 12.5px/1.3 var(--pe-sans); font-style: normal; }

  /* headlines as the site's hero sets its line: display Newsreader, regular, tight; the italic
     phrase light, and in Ringlio blue (Ethan, 5 Oct: accent, not grey) */
  .title { font-weight: 400; letter-spacing: -.026em; line-height: 1.03; font-variation-settings: "opsz" 72; }
  .title em { font-weight: 300; letter-spacing: -.018em; color: #3D5AFE; padding-right: .03em; }
  .reel__row.title em { color: #3D5AFE; }
  .v-half .title, .v-narrow .title, .v-third .title { line-height: 1.08; letter-spacing: -.02em; }
  .dek { border-bottom: 1px solid var(--rule-soft); color: var(--ink-3); font-size: 15px; }
  .dropcap { font-weight: 400; color: var(--ink); font-variation-settings: "opsz" 72; }
  .byline { font: 400 12.5px/1.4 var(--pe-sans); font-style: normal; letter-spacing: -.003em; border-top-color: var(--rule-soft); }
  .byline strong { font-weight: 600; }
  .byline .time { font-size: 12.5px; }
  .byline .src { font: 500 12px/1 var(--pe-sans); letter-spacing: -.003em; text-transform: none; padding: 5px 10px; border-color: var(--rule); color: var(--ink-2); }
  .byline > .who::before { font: 500 12px/1 var(--pe-sans); padding: 5px 0; }

  /* photographs: the site's rounded picture, as shot (no wash), its caption in the text face */
  .hero { border: 0; border-radius: 14px; background: var(--paper-cool); }
  .hero img { filter: none; }
  .hero figcaption { padding: 26px 14px 10px; background: linear-gradient(to top, rgba(15, 15, 18, .7), rgba(15, 15, 18, 0)); font: 400 12.5px/1.35 var(--pe-sans); font-style: normal; letter-spacing: -.003em; }
  .hero figcaption .right { font: 500 12px/1.35 var(--pe-sans); letter-spacing: -.003em; text-transform: none; opacity: .7; }

  /* a pulled line: the site's light italic */
  .slack-quote__text { font-weight: 300; font-size: 23px; line-height: 1.26; letter-spacing: -.014em; font-variation-settings: "opsz" 72; }
  .slack-quote__mark, .slack-quote__close { color: #8F8A82; font-weight: 300; }
  /* its section is named in the marker over the column: the line stands alone */
  .slack-quote__ref { display: none; }
  .slack-mark__char { border-color: var(--rule-soft); box-shadow: none; }
  .slack-mark__char::before { font-weight: 300; color: var(--ink-3); }

  /* the plate: the site's card (its "Your column" form), on an 18 px corner */
  .plate__sheet { border-radius: 18px; }
  .plate { --bx: 22px; --bt: 16px; --bb: 22px; }
  .asks__h { font: 500 13px/1 var(--pe-sans); letter-spacing: -.003em; text-transform: none; color: var(--ink-3); margin-bottom: 4px; }
  .ask-row { font-size: 19px; letter-spacing: -.016em; border-bottom-color: var(--rule-soft); padding: 13px 2px 12px 0; }
  .ask-row .ask__go { font-family: var(--pe-sans); }
  .draft { letter-spacing: -.022em; font-variation-settings: "opsz" 72; }
  .ghost { color: #8F8A82; opacity: 1; font-weight: 300; }
  .file-btn, .stop-btn { font: 600 13px/1 var(--pe-sans); letter-spacing: -.003em; text-transform: none; }
  .ln::before { background: rgba(15, 15, 18, .08); border-radius: 4px; }
  .jump { padding: 10px 18px; border-color: rgba(15, 15, 18, .1); font: 500 13px/1 var(--pe-sans); letter-spacing: -.003em; text-transform: none; box-shadow: 0 12px 26px -14px rgba(15, 15, 18, .5); }
  .docket { border-radius: 14px; border: 1px solid rgba(15, 15, 18, .1); padding: 11px 16px; box-shadow: 0 16px 34px -18px rgba(15, 15, 18, .5); }
  .docket__k, .docket__hint { font: 500 12.5px/1 var(--pe-sans); letter-spacing: -.003em; text-transform: none; }
  .docket.is-queued .docket__k { border-radius: 6px; padding: 4px 7px; }

  /* ── the widgets (5 Oct, the third drawing. Ethan: "improve the production quality of the
     Ringlio Brief widgets to be the same quality level as the Fogarty brief widgets"). What that
     set does, done here with Ringlio's own things, as the opening already is:
       the card    the mark's round back, as the slab is cut (round at the left, tight at the right)
       the ground  the two the opening has: ink (the rail's card) for what a reader studies, the
                   mark's blue (the slab) for the price and the two slips that ask for the next
                   step; the mark laid large in each, a tone off its ground
       the type    the figure at display size, as the slab sets its line: on ink, paper with its
                   italic in the lifted blue; on blue, ink with its italic in white
       the hand    what the reader holds is solid: a blue lens on ink, an ink one on blue
       drawings    solid blocks, words set in the page's faces, our own renders. Flat throughout.
     Every tile is signed with the mark before its label. ── */
  .w {
    --w-r: 0px; --w-ink: #0F0F12; --w-gold: #3D5AFE; --w-em: #8E9DFF; --w-paper: #FBF9F5; --w-on: #FFFFFF;
    --w-hi: #FBF9F5; --w-2: rgba(244, 242, 250, .86); --w-3: rgba(244, 242, 250, .58); --w-4: rgba(244, 242, 250, .2);
    --w-fill: rgba(255, 255, 255, .09); --w-fill-2: rgba(255, 255, 255, .18); --w-face-ring: #0F0F12;
    --w-mark: url("/brand/ringlio-ai/mark-tone-ink.svg"); --w-sign: #3D5AFE;
  }
  .w-tile {
    corner-shape: round; border-radius: 44px 18px 18px 44px; padding: 22px 24px 15px 28px;
    background: var(--w-ink) var(--w-mark) right -58px top -52px / 316px auto no-repeat; box-shadow: none;
  }
  .w-tile[data-piece="flat"], .w-tile[data-piece="next"], .w-tile[data-tone="blue"] {
    --w-ink: #3D5AFE; --w-gold: #0F0F12; --w-em: #FFFFFF; --w-on: #FFFFFF;
    --w-hi: #FFFFFF; --w-2: rgba(255, 255, 255, .94); --w-3: rgba(255, 255, 255, .78); --w-4: rgba(255, 255, 255, .34);
    --w-fill: rgba(255, 255, 255, .16); --w-fill-2: rgba(255, 255, 255, .26); --w-face-ring: #3D5AFE;
    --w-mark: url("/brand/ringlio-ai/mark-tone-blue.svg"); --w-sign: #FFFFFF;
  }
  @container w (max-width: 340px) {
    .w-tile { border-radius: 38px 16px 16px 38px; padding: 20px 20px 13px 24px; background-size: 280px auto; }
    .w-viz, .w-ctl { margin-top: 12px; }
    .w .w-cap { margin-top: 12px; }
    .w .w-seg button { height: 32px; }
    .w-held__tray { padding: 0 5px 0 7px; }
    .w-held__n { padding-left: 7px; }
  }
  /* (flat grounds: a tile neither glows nor lifts on a coloured shadow) */
  @media (hover: hover) { .w-tile:hover, .w-tile:focus-within { box-shadow: none; } }
  /* the label: the mark, then the words; a note at the right is a quiet capsule */
  .w .w-k { gap: 9px; min-height: 20px; font: 600 13.5px/1.1 var(--pe-sans); letter-spacing: -.004em; text-transform: none; color: var(--w-em); }
  .w .w-k::before { width: 21px; height: 16px; background: var(--w-sign); -webkit-mask: url("/brand/ringlio-ai/mark.svg") center / contain no-repeat; mask: url("/brand/ringlio-ai/mark.svg") center / contain no-repeat; }
  .w .w-k b { padding: 6px 10px; border-radius: 999px; background: var(--w-fill); font: 600 12px/1 var(--pe-sans); letter-spacing: -.003em; color: var(--w-2); font-variant-numeric: lining-nums; }
  .w .w-k b:empty { display: none; }
  /* the figure: the slab's own line, at a tile's size */
  .w .w-fig { margin-top: 13px; font-weight: 400; font-size: clamp(40px, 12.3cqi, 58px); letter-spacing: -.038em; font-variation-settings: "opsz" 72; font-variant-numeric: lining-nums; color: var(--w-hi); }
  .w .w-fig em { font-style: italic; font-weight: 300; letter-spacing: -.03em; padding-right: .05em; color: var(--w-em); }
  .w-tile[data-piece="flat"] .w-fig, .w-tile[data-piece="next"] .w-fig, .w-tile[data-tone="blue"] .w-fig { color: #0B0B12; }
  .w .is-next .w-fig { font-size: clamp(34px, 9.4cqi, 46px); line-height: 1; }
  .w .w-line { margin-top: 9px; font: 500 14.5px/1.45 var(--pe-sans); font-size-adjust: none; letter-spacing: -.004em; color: var(--w-2); }
  .w .w-line b { font-weight: 700; color: var(--w-hi); }
  .w-viz, .w-ctl { margin-top: 14px; }
  .w .w-cap { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--w-4); font: 500 12px/1.35 var(--pe-sans); font-style: normal; font-size-adjust: none; letter-spacing: -.003em; color: var(--w-3); }
  .w .w-cap i, .w .w-cap > span:first-child { font-style: normal; }
  .w .w-cap i { color: var(--w-2); }
  /* the tile is signed at its head: no second credit at its foot */
  .w .w-cap .w-cr { display: none; }
  .w-ctl__l { font: 600 12.5px/1 var(--pe-sans); letter-spacing: -.003em; text-transform: none; }
  .w-lbl { font-family: var(--pe-sans); font-size-adjust: none; }
  /* what the reader holds: a solid lens (the blue on ink, ink on the blue) */
  .w .w-seg { padding: 3px; background: var(--w-fill); }
  .w-seg__th { background: var(--w-gold); box-shadow: none; }
  .w .w-seg button { height: 34px; font: 600 13px/1 var(--pe-sans); font-size-adjust: none; letter-spacing: -.006em; color: var(--w-2); }
  .w .w-seg button.is-on { color: var(--w-on); }
  .w-sl__lab { font: 500 12px/1 var(--pe-sans); font-size-adjust: none; letter-spacing: -.003em; color: var(--w-3); }
  .w-sl__kn { box-shadow: none; }
  /* the price: white blocks that fill, an ink handle, the price on an ink flag */
  .w-flat__cells > i { border-radius: 8px; }
  .w-flat .w-sl__kn { background: #0F0F12; box-shadow: 0 0 0 3px #3D5AFE; }
  .w-flat__tag { height: 28px; padding: 0 11px; border-radius: 9px; background: #0F0F12; color: #FFFFFF; font: 700 13px/28px var(--pe-sans); box-shadow: none; }
  /* the steps: solid stops on one run of the blue */
  .w-trk { fill: #24252D; height: 8px; y: 11px; rx: 4px; }
  .w-run { stroke: #3D5AFE; stroke-width: 8; }
  .w-stop circle { r: 14px; fill: #2C2D36; stroke: none; }
  .w-stop text { font: 700 12.5px var(--pe-sans); fill: rgba(244, 242, 250, .8); transform: translateY(.6px); }
  .w-stop.is-done circle { fill: #3D5AFE; stroke: none; }
  .w-stop.is-done text { fill: #FFFFFF; }
  .w-stop.is-on circle { fill: #FBF9F5; stroke: none; }
  .w-stop.is-on text { fill: #0F0F12; }
  /* a scene: words in the page's own faces on its bright paper, cut as the card is */
  .w-sc__k { gap: 6px; font: 600 9px/1 var(--pe-sans); color: #0F0F12; }
  .w-sc__k::before { width: 11px; height: 8.2px; background: #3D5AFE; -webkit-mask: url("/brand/ringlio-ai/mark.svg") center / contain no-repeat; mask: url("/brand/ringlio-ai/mark.svg") center / contain no-repeat; }
  .w-sc__b > span { font: 500 12.5px/30px var(--pe-sans); }
  .w-sc__b u { color: var(--w-em); }
  .w-sc--sheet { padding: 13px 11px 11px 18px; border-radius: 26px 10px 10px 26px; background: #FBF9F5; color: #0F0F12; }
  .w-sc__h { font-weight: 400; font-size: 18px; letter-spacing: -.03em; font-variation-settings: "opsz" 72; }
  .w-sc__h em { font-weight: 300; color: #3D5AFE; }
  .w-sc__p { font-family: var(--pe-sans); font-weight: 500; font-size: 7.4px; line-height: 1.45; opacity: .62; }
  .w-sc__ph { border-radius: 8px; background-color: #0F0F12; }
  .w-sc__w { padding: 10px 9px 9px 12px; border-radius: 18px 7px 7px 18px; background: #3D5AFE; }
  .w-sc__w > span { font: 600 7.6px/1 var(--pe-sans); opacity: 1; }
  .w-sc__w > b { color: #0B0B12; font-weight: 400; font-variation-settings: "opsz" 72; }
  .w-sc__w > b em { font-weight: 300; color: #FFFFFF; }
  .w-sc__slip { border-radius: 30px 11px 11px 30px; padding-left: 20px; background: #FBF9F5; color: #0F0F12; }
  .w-sc__under { border-radius: 16px 9px 9px 16px; background: #FBF9F5; }
  .w-sc__n { color: #3D5AFE; font-weight: 400; font-variation-settings: "opsz" 72; }
  .w-sc__q { font-weight: 400; font-variation-settings: "opsz" 72; }
  .w-sc__tag { background: #3D5AFE; color: #FFFFFF; font: 600 10.5px/22px var(--pe-sans); }
  .w-sc--slip[data-look="gap"] .w-sc__slip { background: #0F0F12; color: #FBF9F5; box-shadow: none; border: 1.5px dashed #8E9DFF; }
  .w-sc--slip[data-look="gap"] .w-sc__k { color: #8E9DFF; }
  .w-sc--slip[data-look="gap"] .w-sc__k::before { background: #8E9DFF; }
  .w-sc--slip[data-look="gap"] .w-sc__n { color: #8E9DFF; font-style: italic; font-weight: 300; }
  .w-sc--slip[data-look="call"] .w-sc__n { background: #3D5AFE; color: #FFFFFF; }
  .w-sc--device { border-radius: 0 0 11px 30px; }
  .w-sc__slab { height: 78px; border-radius: 30px 11px 11px 30px; background: #3D5AFE url("/brand/ringlio-ai/mark-tone-blue.svg") right -30px top 50% / auto 190% no-repeat; }
  /* another business's front, and the colours to point at: the mark's own blocks */
  .w-dress { border-radius: 12px; box-shadow: none; }
  .w-dress__band b, .w-dress__band em, .w-dress__h, .w-dress__tile b { font-variation-settings: "opsz" 72; }
  .w-dress__band span { font: 600 11px/1 var(--pe-sans); }
  .w-dress__h em, .w-dress__tile b em { font-weight: 300; }
  .w-dress__tile span { font: 600 7.6px/1 var(--pe-sans); }
  .w-sw { border-radius: 8px; }
  /* where it is kept: trays in the card's shape, each party one of the mark's blocks */
  .w-held__tray { border-radius: 23px 10px 10px 23px; padding: 0 8px 0 10px; }
  .w-held__s { font: 700 12.5px/1 var(--pe-sans); }
  .w-held__s.is-on { background: #FBF9F5; color: #0F0F12; }
  .w-held__n { font: 500 12px/1.1 var(--pe-sans); padding-left: 10px; }
  /* the one thing to do next: an ink pill, its arrow in the blue */
  .w .w-go { height: 44px; padding: 0 8px 0 20px; background: #0F0F12; color: #FFFFFF; font: 600 14.5px/1 var(--pe-sans); font-size-adjust: none; letter-spacing: -.01em; box-shadow: none; }
  .w-go i { width: 28px; height: 28px; background: #3D5AFE; color: #FFFFFF; }
  .w .w-go:hover { box-shadow: none; }
  /* (the pill stands beside the words only where the line under them still fits on one row) */
  .w-row__t { flex-basis: 270px; }
  .w-faces { top: 18px; right: 22px; }
  .w-faces span { width: 46px; height: 46px; }
}