/* ═══════════════════════════════════════════════════════════════════════════
   design-visuals.css — what each design direction actually looks like.

   design-direction-data.js carries a `visual` class on every direction and on
   every quiz answer — v-minimal, v-brutal, v-neon and the rest.

   These were three abstract bars on a coloured square: a field, a fat rule
   where a headline would go, a thin one for a supporting line. As a designer's
   shorthand that is fine. In front of somebody choosing a look for their
   business it is not — a grey rectangle with two grey bars on it is what a
   page looks like when the images have failed to load, and that is how it was
   read. Somebody being asked to pick between forty of them could not tell the
   options from the breakage.

   So each tile is now a miniature post rather than a diagram of one: a real
   headline, a real supporting line, and a real call to action, laid out the way
   that direction lays a post out. Same forty classes, same four elements, and
   the copy comes from the markup so it can be Arabic on an Arabic page:

     <span class="dd-vis v-minimal"><i></i><b>headline</b><u>line</u><em>CTA</em></span>

       i   the field — imagery, pattern, colour
       b   the headline
       u   the supporting line
       em  the call to action

   They carry their own colour rather than the page's tokens: a Neon direction
   is neon in a light theme too. That is the point of looking at it.
   ═══════════════════════════════════════════════════════════════════════════ */

.dd-vis {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  aspect-ratio: 4 / 5; border-radius: 10px;
  background: #f4f4f5; color: #18181b;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
  font-family: 'DM Sans', system-ui, sans-serif;
  /* Everything below sizes off this, so one tile scales from the 108px strip
     on a result card to the full-width tile on an answer button without a
     single media query. */
  font-size: 8cqw;
  line-height: 1.15;
  text-align: start;
}
html[dir="rtl"] .dd-vis { font-family: 'Cairo', system-ui, sans-serif; }

.dd-vis i, .dd-vis b, .dd-vis u, .dd-vis em { position: absolute; display: block; }

/* The field. Everything a photograph, a pattern or a wash would occupy. */
.dd-vis i { inset: 0 0 42% 0; background: #e4e4e7; }

/* The headline. Two lines at most — a third would set at a size nobody can
   read at 108px and would push the call to action off the tile. */
.dd-vis b {
  inset-inline: 9%; bottom: 26%;
  font-weight: 800; font-size: 1em; letter-spacing: -.01em;
  text-decoration: none; font-style: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dd-vis u {
  inset-inline: 9%; bottom: 16%;
  font-size: .68em; font-weight: 500; opacity: .72;
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The call to action, as a pill. This is the element that does the most work
   of all four: a square with a button on it reads as an advertisement, and a
   square without one reads as a picture. */
.dd-vis em {
  inset-inline-start: 9%; bottom: 5%;
  font-style: normal; font-size: .6em; font-weight: 700;
  padding: .34em .8em; border-radius: 999px;
  background: currentColor; color: inherit;
  mix-blend-mode: normal;
  white-space: nowrap; max-inline-size: 82%; overflow: hidden;
}
/* The pill's label has to sit on the pill, so it is drawn as a knockout: the
   background is currentColor and the text is punched out of it. */
.dd-vis em { -webkit-text-fill-color: transparent; }
.dd-vis em::before {
  content: attr(data-cta); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; -webkit-text-fill-color: #fff;
}

/* ── Tone ─────────────────────────────────────────────────────────────── */

.v-minimal   { background: #fbfbfa; color: #1c1c1c; }
.v-minimal i { inset: 8% 8% 46%; background: #e8e8e6; border-radius: 3px; }
.v-minimal b { font-weight: 500; letter-spacing: -.02em; }
.v-minimal em { background: #1c1c1c; }

.v-bold      { background: #111; color: #fff; }
.v-bold i    { inset: 0; background: linear-gradient(160deg, #ff3d00, #111 62%); }
.v-bold b    { bottom: 28%; font-size: 1.25em; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; }
.v-bold u    { opacity: .85; }
.v-bold em   { background: #ff3d00; }

.v-editorial   { background: #faf8f4; color: #14110c; }
.v-editorial i { inset: 7% 7% 48%; background: #ded8cc; }
.v-editorial b { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: 0; }
.v-editorial u { font-size: .6em; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.v-editorial em { background: #14110c; border-radius: 2px; }

.v-corporate   { background: #fff; color: #123a6b; }
.v-corporate i { inset: 0 0 52% 0; background: #123a6b; }
.v-corporate b { bottom: 27%; font-weight: 700; }
.v-corporate em { background: #123a6b; border-radius: 4px; }

.v-friendly    { background: #fff7ed; color: #7c3f12; }
.v-friendly i  { inset: 7% 7% 46%; background: #fdba74; border-radius: 14px; }
.v-friendly b  { font-weight: 700; }
.v-friendly em { background: #ea6a11; }

.v-luxury      { background: #0e0c09; color: #d8c9a3; }
.v-luxury i    { inset: 7% 7% 50%; background: none; box-shadow: inset 0 0 0 1px #6b5c3c; }
.v-luxury b    { font-family: Georgia, serif; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: .82em; }
.v-luxury u    { font-size: .58em; letter-spacing: .1em; }
.v-luxury em   { background: none; box-shadow: inset 0 0 0 1px #b79b62; border-radius: 0; }
.v-luxury em::before { color: #d8c9a3; -webkit-text-fill-color: #d8c9a3; }

.v-dark        { background: #0b0b0f; color: #e6e6ea; }
.v-dark i      { inset: 0; background: radial-gradient(70% 55% at 50% 24%, #2a2a38, #0b0b0f 74%); }
.v-dark b      { font-weight: 600; }
.v-dark em     { background: #e6e6ea; }
.v-dark em::before { color: #0b0b0f; -webkit-text-fill-color: #0b0b0f; }

.v-playful     { background: #fef3c7; color: #9a3412; }
.v-playful i   { inset: 6% 8% 48%;
                 background: conic-gradient(from 30deg, #f472b6, #facc15, #4ade80, #38bdf8, #f472b6);
                 border-radius: 14px; }
.v-playful b   { font-weight: 900; }
.v-playful em  { background: #db2777; }

.v-mono        { background: #f5f5f5; color: #000; }
.v-mono i      { inset: 8% 8% 46%; background: repeating-linear-gradient(45deg, #000 0 3px, #f5f5f5 3px 7px); }
.v-mono b      { font-weight: 700; }
.v-mono em     { background: #000; border-radius: 0; }

/* ── Colour ───────────────────────────────────────────────────────────── */

.v-gradient    { background: #12021f; color: #fff; }
.v-gradient i  { inset: 0; background: linear-gradient(145deg, #ff2fb1, #7c3aed 46%, #22d3ee); }
.v-gradient b  { font-weight: 800; }
.v-gradient em { background: #fff; }
.v-gradient em::before { color: #7c3aed; -webkit-text-fill-color: #7c3aed; }

.v-duotone     { background: #05203a; color: #ffd6e7; }
.v-duotone i   { inset: 0 0 44% 0; background: linear-gradient(120deg, #0b3f7a 0 50%, #ff2d78 50% 100%); }
.v-duotone b   { font-weight: 800; }
.v-duotone em  { background: #ff2d78; }

.v-neon        { background: #06040f; color: #6ef7ff; }
.v-neon i      { inset: 6% 6% 46%; background: #0b0820;
                 box-shadow: 0 0 0 1px #ff2fd0, inset 0 0 18px 3px rgba(110, 247, 255, .45); border-radius: 6px; }
.v-neon b      { font-weight: 800; text-shadow: 0 0 10px rgba(110, 247, 255, .8); }
.v-neon em     { background: #ff2fd0; box-shadow: 0 0 10px rgba(255, 47, 208, .7); }

.v-block       { background: #fff; color: #101010; }
.v-block i     { inset: 0 0 44% 0; background:
                   linear-gradient(#ef4444 0 40%, transparent 40%),
                   linear-gradient(90deg, #2563eb 0 46%, #facc15 46% 100%); }
.v-block b     { font-weight: 900; text-transform: uppercase; font-size: .92em; }
.v-block em    { background: #2563eb; border-radius: 0; }

.v-pastel      { background: #fdf2f8; color: #6b4b6b; }
.v-pastel i    { inset: 7% 7% 46%; border-radius: 12px; background:
                   radial-gradient(40% 40% at 30% 30%, #c7d2fe, transparent),
                   radial-gradient(40% 40% at 70% 65%, #fbcfe8, transparent), #fdf2f8; }
.v-pastel b    { font-weight: 600; }
.v-pastel em   { background: #b784b7; }

/* ── Layout ───────────────────────────────────────────────────────────── */

.v-type        { background: #101010; color: #f5f5f5; }
.v-type i      { display: none; }
.v-type b      { inset-inline: 8%; top: 12%; bottom: auto; font-size: 1.35em; font-weight: 800;
                 -webkit-line-clamp: 3; letter-spacing: -.03em; }
.v-type u      { inset-inline: 8%; top: 62%; bottom: auto; }
.v-type em     { background: #f5f5f5; }
.v-type em::before { color: #101010; -webkit-text-fill-color: #101010; }

.v-grid        { background: #fafafa; color: #171717; }
.v-grid i      { inset: 7% 7% 44%;
                 background: linear-gradient(#d4d4d8 0 0) 0 0 / 49% 49% no-repeat,
                             linear-gradient(#a1a1aa 0 0) 100% 0 / 49% 49% no-repeat,
                             linear-gradient(#a1a1aa 0 0) 0 100% / 49% 49% no-repeat,
                             linear-gradient(#d4d4d8 0 0) 100% 100% / 49% 49% no-repeat; }
.v-grid b      { font-weight: 700; }
.v-grid em     { background: #171717; border-radius: 3px; }

.v-asym        { background: #f7f7f5; color: #18181b; }
.v-asym i      { inset: 6% 46% 34% 6%; background: #27272a; }
.v-asym b      { inset-inline-start: 56%; inset-inline-end: 7%; top: 14%; bottom: auto;
                 font-size: .88em; -webkit-line-clamp: 3; }
.v-asym u      { inset-inline-start: 56%; inset-inline-end: 7%; top: 52%; bottom: auto; }
.v-asym em     { inset-inline-start: 6%; bottom: 7%; background: #18181b; }

.v-headline    { background: #fffbea; color: #1a1a1a; }
.v-headline i  { display: none; }
.v-headline b  { inset-inline: 7%; top: 9%; bottom: auto; font-size: 1.5em; font-weight: 900;
                 -webkit-line-clamp: 3; letter-spacing: -.035em; }
.v-headline u  { inset-inline: 7%; top: 66%; bottom: auto; }
.v-headline em { background: #1a1a1a; }

.v-icons       { background: #fff; color: #0f172a; }
.v-icons i     { inset: 9% 9% 46%; background:
                   radial-gradient(circle at 25% 50%, #0f172a 0 14%, transparent 14%),
                   radial-gradient(circle at 50% 50%, #0f172a 0 14%, transparent 14%),
                   radial-gradient(circle at 75% 50%, #0f172a 0 14%, transparent 14%); }
.v-icons b     { font-weight: 700; }
.v-icons em    { background: #0f172a; border-radius: 4px; }

.v-pattern     { background: #0f3d3e; color: #f0fdfa; }
.v-pattern i   { inset: 0; background:
                   repeating-conic-gradient(#0f3d3e 0 25%, #14b8a6 0 50%) 0 0 / 22% 22%; opacity: .85; }
.v-pattern b   { font-weight: 800; }
.v-pattern em  { background: #f0fdfa; }
.v-pattern em::before { color: #0f3d3e; -webkit-text-fill-color: #0f3d3e; }

/* ── People and proof ─────────────────────────────────────────────────── */

.v-ugc         { background: #f4f4f5; color: #18181b; }
.v-ugc i       { inset: 0 0 40% 0; background:
                   radial-gradient(circle at 50% 74%, #a1a1aa 0 26%, transparent 26%),
                   radial-gradient(circle at 50% 34%, #d4d4d8 0 16%, transparent 16%), #e4e4e7; }
.v-ugc b       { font-weight: 600; }
.v-ugc em      { background: #18181b; }

.v-life        { background: #fef6ee; color: #43302b; }
.v-life i      { inset: 0 0 42% 0; background: linear-gradient(#fbbf77, #f59e0b); }
.v-life b      { font-weight: 700; }
.v-life em     { background: #b45309; }

.v-product     { background: #fff; color: #111; }
.v-product i   { inset: 8% 22% 46%; background: linear-gradient(150deg, #d4d4d8, #71717a);
                 border-radius: 6px; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .5); }
.v-product b   { font-weight: 700; }
.v-product em  { background: #111; border-radius: 4px; }

.v-testimonial { background: #f8fafc; color: #0f172a; }
.v-testimonial i { inset: 7% 7% 44%; background: #fff; box-shadow: inset 0 0 0 1px #cbd5e1; border-radius: 6px; }
.v-testimonial b { font-style: italic; font-weight: 600; }
.v-testimonial em { background: #0f172a; }

.v-authority   { background: #10233f; color: #e2e8f0; }
.v-authority i { inset: 0 0 44% 0; background: #1e3a5f; }
.v-authority b { font-weight: 700; }
.v-authority em { background: #c8a34a; }

.v-community   { background: #f0fdf4; color: #14532d; }
.v-community i { inset: 8% 7% 46%; background:
                   radial-gradient(circle at 22% 50%, #22c55e 0 22%, transparent 22%),
                   radial-gradient(circle at 50% 50%, #4ade80 0 22%, transparent 22%),
                   radial-gradient(circle at 78% 50%, #86efac 0 22%, transparent 22%); }
.v-community b { font-weight: 700; }
.v-community em { background: #16a34a; }

/* ── Experimental ─────────────────────────────────────────────────────── */

.v-collage     { background: #efe9dd; color: #1c1917; }
.v-collage i   { inset: 5% 5% 44%; background:
                   linear-gradient(#f43f5e 0 0) 4% 8% / 46% 52% no-repeat,
                   linear-gradient(#0ea5e9 0 0) 58% 20% / 40% 56% no-repeat,
                   linear-gradient(#facc15 0 0) 16% 62% / 38% 34% no-repeat; }
.v-collage b   { font-weight: 800; transform: rotate(-2deg); }
.v-collage em  { background: #1c1917; transform: rotate(-2deg); border-radius: 2px; }

.v-surreal     { background: #1b1035; color: #fde68a; }
.v-surreal i   { inset: 8% 16% 46%; background: radial-gradient(circle, #fbbf24 0 34%, #7c3aed 34% 62%, transparent 62%);
                 border-radius: 50%; }
.v-surreal b   { font-weight: 600; }
.v-surreal em  { background: #7c3aed; }
.v-surreal em::before { color: #fde68a; -webkit-text-fill-color: #fde68a; }

.v-abstract    { background: #fafaf9; color: #0c0a09; }
.v-abstract i  { inset: 7% 7% 44%; background:
                   conic-gradient(from 210deg at 40% 40%, #0c0a09 0 25%, transparent 0 100%),
                   linear-gradient(#f97316 0 0) 70% 60% / 34% 30% no-repeat; }
.v-abstract b  { font-weight: 700; }
.v-abstract em { background: #f97316; border-radius: 0; }

.v-brutal      { background: #ffe600; color: #000; box-shadow: inset 0 0 0 3px #000; }
.v-brutal i    { inset: 7% 7% 46%; background: #fff; box-shadow: 4px 4px 0 #000, inset 0 0 0 3px #000; }
.v-brutal b    { font-family: 'Courier New', monospace; font-weight: 700; text-transform: uppercase; }
.v-brutal u    { font-family: 'Courier New', monospace; opacity: 1; }
.v-brutal em   { background: #000; border-radius: 0; box-shadow: 3px 3px 0 #ff2d78; }

.v-cyber       { background: #030712; color: #22d3ee; }
.v-cyber i     { inset: 0; background:
                   repeating-linear-gradient(0deg, rgba(34, 211, 238, .16) 0 1px, transparent 1px 5px),
                   linear-gradient(150deg, #0f172a, #030712); }
.v-cyber b     { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.v-cyber u     { font-family: ui-monospace, Consolas, monospace; }
.v-cyber em    { background: #22d3ee; border-radius: 2px; box-shadow: 0 0 10px rgba(34, 211, 238, .6); }
.v-cyber em::before { color: #030712; -webkit-text-fill-color: #030712; }

/* ── Native and raw ───────────────────────────────────────────────────── */

.v-meme        { background: #fff; color: #000; }
.v-meme i      { inset: 20% 4% 26%; background: #d4d4d8; }
.v-meme b      { inset-inline: 5%; top: 3%; bottom: auto; text-align: center;
                 font-family: Impact, 'Arial Black', sans-serif; text-transform: uppercase;
                 -webkit-line-clamp: 1; }
.v-meme u      { inset-inline: 5%; bottom: 13%; text-align: center; opacity: 1;
                 font-family: Impact, 'Arial Black', sans-serif; text-transform: uppercase; }
.v-meme em     { inset-inline-start: 50%; transform: translateX(-50%); bottom: 3%; background: #000; }
html[dir="rtl"] .v-meme em { transform: translateX(50%); }

.v-trend       { background: #111; color: #fff; }
.v-trend i     { inset: 0; background: linear-gradient(200deg, #ec4899, #111 55%); }
.v-trend b     { font-weight: 800; }
.v-trend em    { background: #ec4899; }

.v-chat        { background: #e5ddd5; color: #0b141a; }
.v-chat i      { display: none; }
.v-chat b      { inset-inline-start: 7%; inset-inline-end: 30%; top: 10%; bottom: auto;
                 background: #fff; border-radius: 8px 8px 8px 2px; padding: .5em .6em;
                 font-size: .68em; font-weight: 500; -webkit-line-clamp: 2;
                 box-shadow: 0 1px 1px rgba(0, 0, 0, .18); }
.v-chat u      { inset-inline-start: 30%; inset-inline-end: 7%; top: 46%; bottom: auto; opacity: 1;
                 background: #d9fdd3; border-radius: 8px 8px 2px 8px; padding: .5em .6em;
                 font-size: .62em; white-space: normal; }
.v-chat em     { background: #0b141a; }

.v-bts         { background: #f5f5f4; color: #292524; }
.v-bts i       { inset: 5% 5% 44%; background: linear-gradient(#a8a29e, #78716c); transform: rotate(-1.5deg); }
.v-bts b       { font-weight: 600; transform: rotate(-1deg); }
.v-bts em      { background: #292524; }

/* ── Illustration ─────────────────────────────────────────────────────── */

.v-flat        { background: #eef2ff; color: #312e81; }
.v-flat i      { inset: 8% 8% 46%; background:
                   linear-gradient(#818cf8 0 0) 0 100% / 100% 42% no-repeat,
                   radial-gradient(circle at 70% 30%, #fbbf24 0 22%, transparent 22%); }
.v-flat b      { font-weight: 700; }
.v-flat em     { background: #4f46e5; }

.v-3d          { background: #f1f5f9; color: #0f172a; }
.v-3d i        { inset: 8% 20% 46%; border-radius: 18px;
                 background: linear-gradient(150deg, #a5b4fc, #6366f1 60%, #4338ca);
                 box-shadow: 0 14px 22px -10px rgba(67, 56, 202, .8); }
.v-3d b        { font-weight: 700; }
.v-3d em       { background: #4338ca; }

.v-doodle      { background: #fffdf5; color: #1c1917; }
.v-doodle i    { inset: 8% 8% 46%; background: none;
                 box-shadow: inset 0 0 0 2px #1c1917; border-radius: 22px 6px 20px 8px;
                 transform: rotate(-1deg); }
.v-doodle b    { font-weight: 600; transform: rotate(-.8deg); }
.v-doodle em   { background: #1c1917; }

.v-comic       { background: #fff; color: #111; box-shadow: inset 0 0 0 2px #111; }
.v-comic i     { inset: 5% 5% 46%; background: #fde047; box-shadow: inset 0 0 0 2px #111; }
.v-comic b     { background: #fff; box-shadow: inset 0 0 0 2px #111; border-radius: 6px;
                 padding: .3em .5em; font-size: .8em; font-weight: 700; -webkit-line-clamp: 1; }
.v-comic em    { background: #111; border-radius: 3px; }

/* ── Where they sit ───────────────────────────────────────────────────── */

/* On an answer button: a tile above the label, tall enough that the headline
   and the call to action are both legible. It used to be 3/2, which cropped
   the bottom third off every layout and took the button with it. */
.dd-ans .dd-vis { width: 100%; margin-bottom: 10px; aspect-ratio: 5 / 4; }

/* On a result card: a strip of the top three, side by side with the copy. */
.dd-vis-lg { max-width: 132px; }

.dd-card-vis { display: flex; gap: 14px; align-items: flex-start; }
.dd-card-vis > .dd-vis { flex: none; width: 116px; }
.dd-card-vis > div { min-width: 0; flex: 1; }

@media (max-width: 560px) {
  .dd-card-vis { flex-direction: column; }
  .dd-card-vis > .dd-vis { width: 100%; max-width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-vis, .dd-vis * { transition: none !important; }
}

/* A tile is a picture of a post, not a caption. Screen readers get the
   direction's name from the aria-label on the wrapper and nothing from the
   sample copy inside it, which would otherwise be read out forty times. */
.dd-vis b, .dd-vis u, .dd-vis em { user-select: none; }

/* ── The palette and the prompt on a visual-style result ─────────────────
   The tool names a direction; these are the two things that let somebody
   act on it without a second meeting. */
.dd-swatches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin: 4px 0 14px; }
.dd-swatch { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.dd-chip { width: 30px; height: 30px; border-radius: 7px; flex: none; border: 1px solid rgba(0,0,0,.14); }
.dd-swatch strong { display: block; font-size: 12.5px; }
.dd-swatch code { font-size: 11.5px; opacity: .75; }

.dd-type { width: 100%; border-collapse: collapse; font-size: 13px; }
.dd-type td { padding: 7px 0; border-top: 1px solid var(--border, #e5e7eb); }
.dd-type td:first-child { width: 90px; opacity: .7; }

.dd-prompt {
  white-space: pre-wrap; font: 12.5px/1.65 ui-monospace, Consolas, monospace;
  margin: 0; padding: 12px 14px; border-radius: 10px;
  background: rgba(127,127,127,.08); border: 1px solid var(--border, #e5e7eb);
}