/* Freshly Pressed Comics. Built from "FPC brand rules v2".
   Colours: Press Blue #2185F5 (trust), Burst Red #CA1414 (accent, sparingly), dark #262526.
   Type: Rubik One for headlines (all caps, +tracking), Inter for everything else.
   Halftone only as a 5-12% texture in empty space. Motion is linear and short. */

:root {
  --blue: #2185f5;
  --red: #ca1414;
  --ink: #262526;
  --ink-2: #3a393a;
  --paper: #ffffff;
  --mist: #f2f2f2;
  --line: #d9d9d9;
  --muted: #5d5d5d;
  --on-dark: #f2f2f2;
  --muted-dark: #b9b9b9;
  --display: "Rubik One", "Arial Black", Impact, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1120px;
  --gutter: 20px;
  --track: 0.04em;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--text);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 14px; font-weight: 700;
}
.skip:focus { left: 8px; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.dark :focus-visible { outline-color: #fff; }

/* Headlines: Rubik One, all caps, tracking +2 to +5 */
.display, h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track);
  line-height: 1.08;
}
h1 { font-size: clamp(2.1rem, 6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font: 700 1.15rem/1.3 var(--text); }
.eyebrow {
  font: 700 0.8rem/1 var(--text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin: 0 0 14px;
}
.lede { font-size: 1.15rem; max-width: 60ch; }

/* Header */
.site-header { background: var(--ink); color: var(--on-dark); border-bottom: 4px solid var(--red); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 16px; }
.brand { display: block; line-height: 0; }
.brand img { height: 68px; width: auto; }
.nav { display: flex; gap: 6px; align-items: center; }
.nav a {
  font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; padding: 10px 14px; border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: var(--blue); }
.nav a[aria-current="page"] { border-bottom-color: var(--blue); }
.nav a.cta { background: var(--red); color: #fff; margin-left: 8px; border-bottom: 0; }
.nav a.cta:hover { background: #a91010; }
.menu-btn {
  display: none; background: none; border: 2px solid var(--on-dark); color: var(--on-dark);
  font: 700 0.85rem var(--text); letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 14px; cursor: pointer;
}

@media (max-width: 820px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 84px; background: var(--ink); flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 20px; border-bottom: 4px solid var(--red); z-index: 20; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--ink-2); }
  .nav a.cta { margin: 12px 0 0; text-align: center; border: 0; padding: 14px; }
  .site-header { position: relative; }
  .brand img { height: 60px; }
}

/* Sections */
section { padding: 72px 0; }
@media (max-width: 640px) { section { padding: 52px 0; } }
.dark { background: var(--ink); color: var(--on-dark); }
.dark .eyebrow { color: #6db0ff; }
.mist { background: var(--mist); }
.bar { display: block; width: 64px; height: 6px; background: var(--red); margin: 0 0 22px; }

/* Halftone texture: dead space only, 5-12% */
.halftone { position: relative; isolation: isolate; }
.halftone::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, #fff 2.2px, transparent 2.6px);
  background-size: 18px 18px;
  opacity: 0.08;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(115deg, #000 0%, transparent 55%);
}
.halftone.right::before {
  -webkit-mask-image: linear-gradient(245deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(245deg, #000 0%, transparent 55%);
}
.mist.halftone::before, .halftone.light::before { background-image: radial-gradient(circle, #000 2.2px, transparent 2.6px); opacity: 0.07; }

/* Hero */
.hero { padding: 64px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero p { color: var(--muted-dark); max-width: 56ch; font-size: 1.1rem; }
.hero .logo-big { justify-self: center; width: min(100%, 380px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 820px) {
  .hero { padding: 44px 0 52px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .logo-big { order: -1; width: 200px; justify-self: start; }
}
.page-head { padding: 56px 0 52px; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
.page-head p { color: var(--muted-dark); max-width: 60ch; margin: 18px 0 0; font-size: 1.1rem; }

/* Buttons */
.btn {
  display: inline-block; font-family: var(--display); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding: 15px 26px; border: 3px solid var(--red); background: var(--red); color: #fff; cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.btn:hover { background: #a91010; border-color: #a91010; }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost:hover { background: var(--blue); border-color: var(--blue); color: var(--ink); }

/* Grids and cards */
.grid { display: grid; gap: 24px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid.three { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid.two { grid-template-columns: 1fr; } }
.card { background: var(--paper); border: 2px solid var(--ink); padding: 28px 26px 30px; display: flex; flex-direction: column; }
.card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track); font-size: 1.15rem; margin-bottom: 10px; }
.card p { color: var(--muted); }
.card .from { margin-top: auto; padding-top: 14px; font-weight: 700; border-top: 2px solid var(--blue); }
.card .from span { font-family: var(--display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.02em; }

.section-head { margin-bottom: 38px; max-width: 62ch; }
.section-head p { color: var(--muted); font-size: 1.1rem; margin-top: 14px; }
.dark .section-head p { color: var(--muted-dark); }

/* Process */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 76px 1fr; gap: 6px 22px; padding: 26px 0; border-top: 2px solid var(--ink); }
.steps li:last-child { border-bottom: 2px solid var(--ink); }
.dark .steps li { border-color: #55545a; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--display); font-size: 2.2rem; line-height: 1; color: var(--blue); grid-row: span 2; }
.steps h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track); font-size: 1.1rem; }
.steps p { margin: 0; color: var(--muted); max-width: 66ch; }
.dark .steps p { color: var(--muted-dark); }
@media (max-width: 560px) { .steps li { grid-template-columns: 56px 1fr; gap: 4px 14px; } .steps li::before { font-size: 1.8rem; } }

/* Pricing */
.price-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 2px solid var(--ink); background: var(--paper); }
table.price { width: 100%; border-collapse: collapse; min-width: 560px; font-variant-numeric: tabular-nums; }
.price caption { text-align: left; padding: 16px 18px; font-weight: 700; border-bottom: 2px solid var(--ink); background: var(--mist); }
.price caption small { display: block; font-weight: 400; color: var(--muted); }
.price th, .price td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.price thead th { font: 700 0.8rem var(--text); letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: var(--on-dark); border-bottom: 0; }
.price thead th:not(:first-child), .price td { text-align: right; }
.price tbody th { font-weight: 700; }
.price tbody tr:last-child > * { border-bottom: 0; }
.price td { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.02em; }
.note { margin-top: 18px; color: var(--muted); max-width: 70ch; }
.callout { border-left: 6px solid var(--blue); background: var(--mist); padding: 20px 24px; margin-top: 22px; }
.callout strong { display: block; margin-bottom: 4px; }
.callout p { margin: 0; color: var(--muted); }
.big-fee { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: center; border: 2px solid var(--ink); padding: 24px 26px; margin-top: 24px; background: var(--paper); }
.big-fee .n { font-family: var(--display); font-size: 2.4rem; letter-spacing: 0.02em; color: var(--red); line-height: 1; }
.big-fee p { margin: 0; color: var(--muted); }
.big-fee h3 { margin-bottom: 2px; }
@media (max-width: 560px) { .big-fee { grid-template-columns: 1fr; } }

/* Forms */
form.fpc { display: grid; gap: 18px; max-width: 640px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 0.92rem; }
.dark .field .hint { color: var(--muted-dark); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 0; padding: 13px 14px;
}
.field textarea { min-height: 140px; resize: vertical; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }
.form-status { padding: 14px 16px; border-left: 6px solid var(--blue); background: var(--mist); color: var(--ink); display: none; }
.form-status.show { display: block; }
.form-status.error { border-left-color: var(--red); }
.fine { font-size: 0.92rem; color: var(--muted); }
.dark .fine { color: var(--muted-dark); }
.hp { position: absolute; left: -9999px; }

/* Split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.checks { list-style: none; padding: 0; margin: 18px 0 0; }
.checks li { padding: 10px 0 10px 34px; position: relative; border-top: 1px solid var(--line); }
.checks li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 14px; height: 14px; background: var(--blue); }
.dark .checks li { border-color: #55545a; }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-dark); padding: 52px 0 36px; border-top: 4px solid var(--red); }
.site-footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; }
.site-footer img { height: 84px; width: auto; margin-bottom: 14px; }
.site-footer p { color: var(--muted-dark); max-width: 36ch; }
.site-footer h2, .site-footer h3 { font-size: 0.85rem; letter-spacing: 0.12em; margin-bottom: 14px; color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-block; padding: 5px 0; text-decoration: none; color: var(--muted-dark); }
.site-footer li a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.legal { grid-column: 1 / -1; border-top: 1px solid #55545a; padding-top: 22px; font-size: 0.9rem; color: var(--muted-dark); }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }

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

/* ---- Orders, account and admin ---- */
.ocard { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.ocard h3 { margin-bottom: 10px; }
.ocard .rm { float: right; background: none; border: 0; color: var(--red); font-weight: 700; cursor: pointer; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 700px) { .three-col { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 5px; }
.est { background: var(--ink); color: var(--on-dark); border-radius: 10px; padding: 16px 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.est b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; color: #4a4a4a; background: #ececec; border: 1px solid #d6d6d6; }
.pill.blue { background: #e8f1fd; color: #1b4f9c; border-color: #bfd7f7; } .pill.green { background: #e8f5ec; color: #1d5e37; border-color: #bfdfca; } .pill.amber { background: #fff4de; color: #7a5200; border-color: #f0d9a6; } .pill.red { background: #fdeceb; color: #9b2218; border-color: #f2c4c0; }
table.t { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.t th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--line); }
table.t td { padding: 10px; border-bottom: 1px solid var(--mist); vertical-align: top; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover { background: var(--mist); }
.tablewrap { overflow-x: auto; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn.small { padding: 8px 14px; font-size: 0.9rem; }
.muted { color: var(--muted); }
.stack > * + * { margin-top: 14px; }
.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.note-box { background: var(--mist); border-radius: 8px; padding: 12px 14px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpis .ocard { margin: 0; text-align: center; } .kpis b { font-family: var(--display); font-weight: 400; font-size: 1.8rem; display: block; }

/* Radio buttons and tick boxes sit beside their words, not stretched across the form */
.field label.check, label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; margin-bottom: 8px; }
.field .check input, .check input { width: auto; flex: none; padding: 0; margin-top: 5px; border: 0; }
.field label.check span, label.check span { flex: 1; }

/* The printed copy of an order (admin > order > Print) */
#sheet { display: none; }
@media print {
  .site-header, .site-footer, .page-head, #app, .skip { display: none !important; }
  body { background: #fff; }
  #sheet { display: block; font: 12px/1.45 Inter, system-ui, Arial, sans-serif; color: #000; padding: 0; }
  #sheet h1 { font-size: 24px; margin: 0 0 2px; }
  #sheet h2 { font-family: Inter, Arial, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 6px; border-bottom: 2px solid #000; padding-bottom: 3px; }
  #sheet .top { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 4px solid #2185f5; padding-bottom: 8px; }
  #sheet .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  #sheet table { width: 100%; border-collapse: collapse; }
  #sheet th { text-align: left; font-size: 10px; text-transform: uppercase; border-bottom: 1.5px solid #000; padding: 4px 6px; }
  #sheet td { padding: 7px 6px; border-bottom: 1px solid #bbb; vertical-align: top; }
  #sheet .box { display: inline-block; width: 11px; height: 11px; border: 1.5px solid #000; vertical-align: -2px; margin-right: 4px; }
  #sheet .line { display: inline-block; min-width: 70px; border-bottom: 1px solid #000; }
  #sheet tr { break-inside: avoid; }
  @page { margin: 14mm; }
}

/* ---- Design pass: lighter, rounder, readable at small sizes ----
   Rubik One stays for the big headlines only. Navigation, buttons, small headings, forms and tables use Inter,
   which stays legible when small. Everything below overrides the earlier rules in this file. */
:root { --radius: 10px; --line: #d7dae0; --focus: rgba(33, 133, 245, 0.28); }

/* Header: white, so the logo sits on white */
.site-header { background: #fff; color: var(--ink); border-bottom: 4px solid var(--red); }
.site-header .wrap { min-height: 82px; }
.brand img { height: 62px; }
.nav a { font-family: var(--text); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; border-bottom: 0; border-radius: 8px; padding: 10px 14px; color: var(--ink); }
.nav a:hover { background: var(--mist); }
.nav a[aria-current="page"] { background: #e8f2fe; color: #0b57b7; }
.nav a.cta { background: var(--red); color: #fff; margin-left: 8px; padding: 11px 18px; }
.nav a.cta:hover { background: #a91010; }
.menu-btn { border-color: var(--ink); color: var(--ink); border-radius: 8px; }
@media (max-width: 820px) {
  .nav { top: 82px; background: #fff; border-bottom: 4px solid var(--red); box-shadow: 0 12px 24px rgba(0,0,0,.12); }
  .nav a { border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 4px; }
  .nav a.cta { border: 0; border-radius: 8px; margin: 12px 0 0; }
  .brand img { height: 54px; }
}

/* Buttons */
.btn { font-family: var(--text); font-weight: 800; font-size: 0.86rem; letter-spacing: 0.07em; border-width: 2px; border-radius: var(--radius); padding: 14px 24px; }
.btn.small { padding: 9px 16px; font-size: 0.8rem; }

/* Small headings in Inter; big headlines keep Rubik One */
.card h3, .steps h3, .big-fee h3 { font-family: var(--text); font-weight: 800; letter-spacing: 0.04em; font-size: 1.02rem; }
.steps li::before { font-family: var(--text); font-weight: 800; }
.price td, .card .from span { font-family: var(--text); font-weight: 800; letter-spacing: 0; }
.big-fee .n { font-family: var(--text); font-weight: 800; }

/* Cards and tables */
.card { border: 1px solid var(--line); border-radius: 14px; }
.price-wrap { border: 1px solid var(--line); border-radius: 14px; }
.big-fee { border: 1px solid var(--line); border-radius: 14px; }
.callout { border-radius: 0 10px 10px 0; }
.ocard { border: 1px solid var(--line); border-radius: 12px; }

/* Forms */
#order { background: #f4f6f9; }
form.fpc h2 { font-family: var(--text); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; }
.fsec { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: grid; gap: 18px; }
@media (max-width: 560px) { .fsec { padding: 18px; } }
.field label { font-weight: 600; font-size: 0.95rem; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: 1rem; line-height: 1.3; background: #fff;
  transition: border-color 120ms linear, box-shadow 120ms linear;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px var(--focus); }
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23262526' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.field textarea { min-height: 110px; }
.form-status { border-radius: 8px; }
form.fpc .btn[type=submit] { width: 100%; max-width: 360px; font-size: 0.95rem; padding: 16px 24px; }

/* One look for every tick box and choice: rounded squares with a tick, in a card you can click anywhere on */
label.check, .field label.check {
  display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--radius); font-weight: 400; font-size: 0.97rem; cursor: pointer;
}
label.check:hover { border-color: #aab1bb; }
label.check:has(input:checked) { border-color: var(--blue); background: #f2f8ff; }
.check input[type=checkbox], .check input[type=radio], .field .check input {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; padding: 0;
  border: 2px solid #8a9099; border-radius: 6px; background: #fff; display: grid; place-content: center; cursor: pointer; box-shadow: none;
}
.check input:checked { background: var(--blue); border-color: var(--blue); }
.check input:checked::after { content: ""; width: 11px; height: 6px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.check input:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--focus); }

/* Comic cards inside the form */
#order .ocard { background: #fafbfc; padding: 20px; margin: 0; }
#order .ocard h3 { font-size: 0.95rem; }
.ocard .rm { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; font-size: 0.85rem; }
.est { position: sticky; bottom: 12px; z-index: 5; border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); align-items: baseline; }
.est b { font-family: var(--text); font-weight: 800; font-size: 1.35rem; }
.kpis b { font-family: var(--text); font-weight: 800; }
.pill { letter-spacing: 0.02em; }

.two-col, .three-col { align-items: end; }
#order form.fpc, #done { margin-left: auto; margin-right: auto; }

/* Home: the logo lives in the header, so the hero is just words */
.hero .wrap { grid-template-columns: 1fr; }
.hero .wrap > div { max-width: 760px; }

/* Show-password tick */
.field label.showpw, label.showpw { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-weight: 400; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.field label.showpw input, label.showpw input { width: auto; padding: 0; margin: 0; border: 0; box-shadow: none; -webkit-appearance: auto; appearance: auto; accent-color: var(--blue); }

/* ---- Sticky header, light footer ---- */
.site-header { position: sticky; top: 0; z-index: 60; }
.site-footer { background: #fff; color: var(--ink); border-top: 4px solid var(--red); }
.site-footer p { color: var(--muted); }
.site-footer h2, .site-footer h3 { color: var(--ink); font-family: var(--text); font-weight: 800; }
.site-footer li a { color: var(--ink); }
.site-footer li a:hover { color: var(--blue); text-decoration-color: var(--blue); }
.legal { border-top: 1px solid var(--line); color: var(--muted); }

/* ---- Working pages (workshop and your orders) ---- */
.page-head.compact { padding: 26px 0 24px; }
.page-head.compact h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.page-head.compact .eyebrow { margin-bottom: 8px; }
.page-head.compact .bar { margin-bottom: 12px; }
.page-head.compact p { margin-top: 8px; font-size: 1rem; }
#app { font-size: 0.97rem; }
#app input[type=text], #app input[type=password], #app input[type=email], #app select, #app textarea {
  width: 100%; min-height: 42px; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 12px;
  transition: border-color 120ms linear, box-shadow 120ms linear;
}
#app textarea { min-height: 96px; resize: vertical; }
#app input::placeholder, #app textarea::placeholder { color: #9aa0a8; }
#app input:focus, #app select:focus, #app textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px var(--focus); }
#app select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23262526' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
.f label { display: block; margin-bottom: 5px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.grid-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; }
.grid-f.top { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.grid-f > .btn { justify-self: start; min-height: 42px; }
.settings { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; margin-top: 18px; }
@media (max-width: 760px) { .settings { grid-template-columns: 1fr; gap: 24px; } }
details.ocard > summary { cursor: pointer; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; padding: 2px 0; }
.ocard h3 { font-family: var(--text); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.01em; text-transform: none; margin: 0 0 14px; }
.ocard h4 { font: 800 0.8rem/1.2 var(--text); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0 10px; }
.ocard { padding: 22px; margin-bottom: 18px; }
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.order-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 6px; }
.who { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); }
.who b { color: var(--ink); } .who a { color: var(--blue); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { background: var(--mist); border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; font-size: 0.82rem; font-weight: 600; }
.chip.hot { background: #fde8e8; border-color: #f2b3b3; color: #8a1010; }
.alert { border-radius: 10px; padding: 14px 16px; margin: 0 0 18px; background: #fdecec; border: 1px solid #f2b3b3; border-left: 6px solid var(--red); font-weight: 600; }
.alert.info { background: #eef5fe; border-color: #c4dcfb; border-left-color: var(--blue); font-weight: 400; }
.comic-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.comic-card { border-left: 5px solid var(--blue); }
.sub { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
pre.notes { white-space: pre-wrap; margin: 0 0 12px; font: 0.88rem/1.5 var(--text); background: var(--mist); border-radius: 8px; padding: 12px 14px; }
.small { font-size: 0.85rem; }
.back { text-decoration: none; font-weight: 700; color: var(--blue); }
label.check.tight { padding: 9px 12px; min-height: 42px; align-items: center; }
.kpis .ocard { padding: 18px 12px; }
.kpis .ocard span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.85rem; }
.kpis .ocard.hot { border-color: #f2b3b3; background: #fff6f6; } .kpis .ocard.hot b { color: var(--red); }
table.t tr.click:hover { background: #f2f8ff; }
table.t td, table.t th { padding: 12px 12px; }

/* Honest copy pass: client quote, limits lists, footer location */
.card ul { margin: 6px 0 0; padding-left: 20px; color: var(--muted); }
.card li { margin: 8px 0; }
.quote { margin: 22px 0 0; max-width: 70ch; padding: 20px 24px; background: var(--mist); border-left: 6px solid var(--blue); border-radius: 0 10px 10px 0; }
.quote p { margin: 0 0 10px; font-size: 1.05rem; }
.quote footer { color: var(--muted); font-size: 0.9rem; }
.site-footer .where { margin-top: 8px; font-weight: 600; }

/* Before and after results; social links */
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.tile { display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: zoom-in; }
.tile:hover { border-color: var(--blue); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tile .thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.tile .thumbs span { display: flex; flex-direction: column; gap: 4px; }
.tile .thumbs img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 8px; background: var(--mist); }
.tile .thumbs b { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tile .cap { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.tile .cap strong { font-weight: 800; font-size: 0.98rem; }
.tile .cap small { color: var(--muted); font-size: 0.8rem; }
.tile .cap em { font-style: normal; font-weight: 700; font-size: 0.82rem; color: var(--blue); margin-top: 4px; }
.site-footer .social { display: flex; gap: 10px; margin-top: 14px; }
.site-footer .social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); background: #fff; transition: color .15s, border-color .15s, background .15s; }
.site-footer .social a:hover, .site-footer .social a:focus-visible { color: #fff; background: var(--blue); border-color: var(--blue); }
.site-footer .social svg { width: 20px; height: 20px; fill: currentColor; }
.site-footer .social svg[fill="none"] { fill: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Before and after viewer */
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(18,18,20,.98); color: #fff; padding: 12px 16px 14px; gap: 10px; }
.lb[hidden] { display: none; }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-title { display: flex; flex-direction: column; min-width: 0; }
.lb-title b { font-size: 1.05rem; }
.lb-title span { font-size: 0.82rem; color: #c9c9ce; }
.lb-btn { font: inherit; font-weight: 700; font-size: 0.9rem; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 8px; padding: 9px 14px; min-height: 40px; cursor: pointer; }
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lb-btn:focus-visible, .lb-range:focus-visible { outline: 3px solid #7db6ff; outline-offset: 2px; }
.lb-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 10px; background: #0c0c0e; touch-action: none; cursor: crosshair; user-select: none; }
.lb-stage.zoomed { cursor: grab; }
.lb-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-origin: 50% 50%; will-change: transform; }
.lb-frame { position: relative; line-height: 0; }
.lb-after { display: block; max-width: calc(100vw - 34px); max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); width: auto; height: auto; -webkit-user-drag: none; }
.lb-before { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-user-drag: none; }
.lb-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); transform: translateX(-50%); pointer-events: none; }
.lb-tag { position: absolute; top: 10px; padding: 4px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(0,0,0,.6); pointer-events: none; }
.lb-tag.l { left: 10px; } .lb-tag.r { right: 10px; }
.lb-controls { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-range { flex: 1; min-width: 120px; accent-color: #fff; height: 36px; }
.lb-note { margin: 0; font-size: 0.92rem; color: #e6e6ea; max-width: 80ch; }
.lb-hint { margin: 0; font-size: 0.78rem; color: #a9a9b0; }
@media (max-width: 640px) { .lb { padding: 8px 10px 10px; } .lb-hint { display: none; } .lb-after { max-height: calc(100vh - 290px); max-height: calc(100dvh - 290px); } }

/* Report card for one comic on the client's order page */
.report h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 16px 0 8px; }
.report .note-box { margin-top: 12px; } .report .note-box p { color: var(--ink); margin: 4px 0 0; }
.report .small { font-size: 0.85rem; margin-top: 8px; word-break: break-all; }
.report .photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.85rem; margin: 18px 0 14px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.gbtn { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 99px; padding: 10px 20px; font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.gbtn:hover { background: #f6f8fc; }
/* Workshop: photos on a comic card */
.sub .photos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-bottom: 10px; }
.sub .photos figure { margin: 0; font-size: 0.8rem; } .sub .photos figure.hidden img { opacity: .35; }
.sub .photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.sub .photos figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 4px; }

/* Client pages: order list with a cover photo, comic cards with a before/after pair, and the photo viewer */
.orders { display: grid; gap: 14px; margin: 18px 0 24px; }
.ordrow { display: grid; grid-template-columns: 104px 1fr 24px; gap: 18px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ordrow:hover, .ordrow:focus-visible { border-color: var(--blue); box-shadow: 0 4px 16px rgba(20, 30, 50, .08); }
.ordrow .cover { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--mist); }
.ordrow .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ordrow .cover b { position: absolute; left: 6px; bottom: 6px; background: rgba(20, 20, 24, .72); color: #fff; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.ordrow .nophoto { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 8px; color: var(--muted); font-size: .8rem; }
.ordrow .body { display: grid; gap: 7px; min-width: 0; }
.ordrow .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ordrow .top strong { font-size: 1.1rem; }
.ordrow .bar { display: block; height: 6px; border-radius: 99px; background: #e4e7ec; overflow: hidden; max-width: 320px; }
.ordrow .bar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.ordrow .go { font-size: 1.8rem; color: var(--muted); text-align: center; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; margin-top: 8px; }
.ccard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ccard .chead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ccard h3 { font-size: 1.05rem; margin: 0; } .ccard p { margin: 0; }
.ccard .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ccard .pair.one { grid-template-columns: minmax(0, 60%); justify-content: center; }
.ccard figure { margin: 0; } .ccard figcaption { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); text-align: center; padding-top: 5px; }
.ccard .ph { display: block; width: 100%; padding: 0; border: 0; background: var(--mist); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.ccard .ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform .2s; } .ccard .ph:hover img { transform: scale(1.03); }
.ccard .more summary { cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--blue); } .ccard .more[open] summary { margin-bottom: 8px; }
.ccard .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ccard .thumbs .ph img { aspect-ratio: 1; } .ccard .thumbs .a { outline: 2px solid #bfdfca; outline-offset: -2px; }
.ccard .note-box b { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .ccard .note-box p { color: var(--ink); margin-top: 4px; }
.ccard .id { margin-top: auto; padding-top: 4px; word-break: break-all; }
body.lbx-open { overflow: hidden; }
.lbx { position: fixed; inset: 0; z-index: 100; background: rgba(14, 14, 16, .985); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lbx[hidden] { display: none; }
.lbx figure { margin: 0; min-width: 0; display: grid; gap: 10px; justify-items: center; }
.lbx img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 6px; background: none; border: 0; padding: 0; box-shadow: none; }
.lbx figcaption { color: #e8e8ea; font-size: .9rem; display: flex; gap: 14px; align-items: baseline; } .lbx-cap { margin: 0; font-weight: 600; } .lbx-n { color: #a8a8ae; }
.lbx button { background: none; border: 0; color: #fff; cursor: pointer; font-size: 2.6rem; line-height: 1; height: 64px; }
.lbx button:hover, .lbx button:focus-visible { background: rgba(255, 255, 255, .12); border-radius: 12px; }
.lbx .lbx-close { position: absolute; top: 8px; right: 12px; width: 52px; height: 52px; font-size: 2.2rem; }
@media (max-width: 640px) {
  .ordrow { grid-template-columns: 84px 1fr; gap: 12px; } .ordrow .go { display: none; }
  .lbx { grid-template-columns: 1fr; } .lbx-nav { position: absolute; top: 50%; width: 48px; background: rgba(0,0,0,.35); } .lbx-prev { left: 4px; } .lbx-next { right: 4px; }
}
.payrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--mist); }
.payrow:first-of-type { border-top: 0; } .payrow .what { display: flex; gap: 14px; align-items: baseline; flex: 1 1 200px; } .payrow .amt { font-weight: 700; }
.paydetail { padding-bottom: 8px; } .paydetail summary { cursor: pointer; font-size: .85rem; color: var(--blue); font-weight: 600; } .paydetail p { margin: 6px 0 0; }
.ccard figure { min-width: 0; } .ccard .pair { min-width: 0; }

/* ================= Phones: bigger targets, full-screen menu, pinned Submit, swipe rows, price picker ================= */
.picker, .stickycta { display: none; }
@media (max-width: 820px) {
  html { scroll-padding-top: 96px; }
  input, select, textarea { font-size: 16px !important; }
  .btn, button.btn, summary, .menu-btn { min-height: 48px; }
  .menu-btn { padding: 0 18px; border-width: 2px; }
  .site-footer li a, .site-footer .legal a { display: inline-block; padding: 12px 0; }
  .site-footer .social a { width: 48px; height: 48px; }
  body.has-sticky { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  body.menu-open { overflow: hidden; }
  body.menu-open .stickycta { display: none; }

  /* Full-screen menu */
  .nav { position: fixed; left: 0; right: 0; top: 86px; bottom: 0; overflow-y: auto; background-color: var(--ink); background-image: radial-gradient(rgba(255,255,255,.08) 1.4px, transparent 1.6px); background-size: 14px 14px; padding: 8px 24px calc(40px + env(safe-area-inset-bottom)); border-bottom: 0; box-shadow: none; z-index: 40; }
  .nav a { font-family: var(--display); font-weight: 400; font-size: 1.45rem; letter-spacing: 0.04em; text-transform: uppercase; color: #f2f2f2; padding: 18px 0; min-height: 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #3a393a; border-radius: 0; background: none; }
  .nav a::after { content: "\203A"; color: var(--red); font-size: 1.6rem; }
  .nav a:hover { background: none; }
  .nav a[aria-current="page"] { color: #fff; background: none; box-shadow: inset 4px 0 0 var(--blue); padding-left: 14px; }
  .nav a.cta { font-family: var(--text); font-weight: 800; font-size: .85rem; letter-spacing: .09em; justify-content: center; margin: 24px 0 0; border: 0; border-radius: 12px; min-height: 56px; background: var(--red); color: #fff; }
  .nav a.cta::after { content: none; }

  /* Pinned Submit button */
  .stickycta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .stickycta a { display: flex; align-items: center; justify-content: center; height: 54px; border-radius: 12px; background: var(--red); color: #fff; font: 800 .85rem var(--text); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }

  /* Swipe rows: the five steps and the before-and-after tiles */
  .steps, .results { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .steps::-webkit-scrollbar, .results::-webkit-scrollbar { display: none; }
  .steps li { flex: 0 0 80%; scroll-snap-align: start; display: block; border: 1px solid var(--line) !important; border-radius: 16px; padding: 20px; background: var(--paper); }
  .steps li:last-child { border-bottom: 1px solid var(--line) !important; }
  .dark .steps li { background: #2f2e30; border-color: #55545a !important; }
  .steps li::before { display: block; font-size: 2rem; margin-bottom: 8px; }
  .results .tile { flex: 0 0 82%; scroll-snap-align: start; }

  /* Price picker replaces the wide table */
  .price-wrap { display: none; }
  .picker { display: block; margin-bottom: 24px; }
  .picker-q { font-weight: 800; margin: 0 0 8px; }
  .picker-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #eef0f4; border-radius: 14px; padding: 5px; }
  .picker-seg button { min-height: 48px; border: 0; border-radius: 10px; background: transparent; font: 700 .9rem var(--text); color: #4a4a4a; cursor: pointer; }
  .picker-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
  .picker-out { display: grid; gap: 10px; margin-top: 14px; }
  .picker-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
  .picker-card b { display: block; font-size: 1.05rem; } .picker-card span { display: block; color: var(--muted); font-size: .9rem; }
  .picker-card strong { font-family: var(--text); font-weight: 800; font-size: 1.6rem; white-space: nowrap; }
  .picker-fine { color: var(--muted); font-size: .9rem; margin: 12px 0 0; }

  /* Reading pages as one row per heading */
  .sec { border: 1px solid var(--line); border-radius: 14px; background: #fff; margin: 0 0 10px; overflow: hidden; }
  .sec summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; min-height: 56px; font-weight: 800; font-size: 1.02rem; }
  .sec summary::-webkit-details-marker { display: none; }
  .sec summary::after { content: "+"; font-size: 1.5rem; color: var(--muted); font-weight: 400; }
  .sec[open] summary::after { content: "\2013"; }
  .sec .sec-body { padding: 0 16px 8px; }
}

/* ================= Signed-in pages: an account, not a website ================= */
.btn.white { background: #fff; color: var(--ink); border: 2px solid var(--line); } .btn.white:hover { background: var(--mist); }
.btn.blue { background: var(--blue); border-color: var(--blue); } .btn.blue:hover { background: #166fd4; }
/* Sign-in page: the Google button and the sign-in button are as wide as the fields, text centred */
#login-form .btn, #login-form button[type="submit"] { width: 100%; }
.gbtn { display: flex; width: 100%; justify-content: center; align-items: center; gap: 12px; min-height: 52px; border-radius: 12px; }
body.app { background: #f6f7f9; }
.app-head { background: #fff; border-bottom: 4px solid var(--red); position: sticky; top: 0; z-index: 25; }
.app-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.app-head .brand img { height: 48px; width: auto; }
.app-title { font: 800 .8rem var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-left: 18px; border-left: 2px solid var(--line); }
.app-nav { display: flex; gap: 4px; margin-left: 10px; flex: 1; }
.app-nav a { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; color: var(--ink); text-decoration: none; font: 800 .8rem var(--text); letter-spacing: .06em; text-transform: uppercase; }
.app-nav a svg { width: 20px; height: 20px; } .app-nav a:hover { background: var(--mist); }
.app-nav a.on { background: #e8f2fe; color: #0b57b7; }
.app-out { border: 2px solid var(--line); background: #fff; border-radius: 10px; min-height: 44px; padding: 0 16px; font: 800 .75rem var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.app-out:hover { background: var(--mist); }
.app-main { padding: 22px 0 60px; }
.apph { font: 400 1.7rem var(--display); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 14px; }
.viewas { position: sticky; top: 72px; z-index: 24; background: #fff4de; border-bottom: 1px solid #f0d9a6; }
.viewas:not([hidden]) { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px max(16px, calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.viewas button { background: var(--ink); color: #fff; border: 0; border-radius: 10px; min-height: 40px; padding: 0 16px; font: 800 .75rem var(--text); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.search { width: 100%; height: 50px; border: 1.5px solid #c8ccd4; border-radius: 12px; padding: 0 16px; background: #fff; margin: 4px 0 12px; }
.chiprow { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; } .chiprow::-webkit-scrollbar { display: none; }
.chiprow .chip { flex: none; min-height: 40px; border: 1.5px solid var(--line); border-radius: 99px; background: #fff; padding: 0 16px; font: 700 .85rem var(--text); color: var(--ink); cursor: pointer; }
.chiprow .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.olist { display: grid; gap: 10px; margin: 6px 0 20px; }
.orow { display: grid; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.orow:hover, .orow:focus-visible { border-color: var(--blue); box-shadow: 0 4px 14px rgba(20,30,50,.08); }
.orow .l1, .orow .l2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.orow .l1 strong { font-size: 1.05rem; } .orow .l2 { font-size: .9rem; }
.orow.client { grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px; }
.orow.client .nm { display: grid; min-width: 0; } .orow.client .nm .l2 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow.client .meta { display: grid; justify-items: end; gap: 4px; font-size: .85rem; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: #e8f1fd; color: #1b4f9c; display: grid; place-items: center; font: 800 1rem var(--text); flex: none; } .avatar.big { width: 64px; height: 64px; font-size: 1.3rem; }
.chead2 { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; } .chead2 .apph { margin: 0 0 2px; }
.actrow { display: flex; gap: 10px; margin-bottom: 12px; } .actrow .btn { flex: 1; text-decoration: none; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--mist); } .kv > :first-child { flex: none; white-space: nowrap; } .kv > :last-child { text-align: right; } .kv:first-child { border-top: 0; }
.viewbtn { width: 100%; margin: 4px 0 8px; } .center { text-align: center; }
.sech { font: 800 .85rem var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; }
.rowlist { display: grid; gap: 0; margin: 14px 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rowlist > * { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--mist); padding: 16px; min-height: 56px; font: 700 1rem var(--text); color: var(--ink); text-decoration: none; cursor: pointer; } .rowlist > *:first-child { border-top: 0; }
.outbtn { width: 100%; color: var(--red); border-color: var(--line); background: #fff; margin-top: 8px; }
details.ocard.flat > summary { display: none; }
@media (max-width: 820px) {
  .app-head .wrap { min-height: 60px; justify-content: space-between; } .app-head .brand img { height: 42px; } .app-title { flex: 1; }
  .app-nav { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; gap: 0; padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 30; }
  .app-nav a { flex: 1; flex-direction: column; gap: 3px; padding: 6px 4px; font-size: .68rem; letter-spacing: .04em; text-transform: none; font-weight: 700; color: #6b7280; border-radius: 10px; min-height: 52px; justify-content: center; }
  .app-nav a svg { width: 26px; height: 26px; } .app-nav a.on { background: none; color: var(--red); }
  body.app { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .viewas { top: 64px; }
  .apph { font-size: 1.45rem; }
  .app-main { padding-top: 16px; }
}
@media (max-width: 820px) { .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; } .kpis .ocard { padding: 10px 8px; } .kpis b { font-size: 1.5rem; } }
@media (max-width: 820px) {
  /* Signed-in tables become one small card per row, so nothing scrolls sideways */
  .app-main .tablewrap { overflow: visible; }
  .app-main table.t, .app-main table.t tbody, .app-main table.t tr, .app-main table.t td { display: block; width: 100%; }
  .app-main table.t thead { display: none; }
  .app-main table.t tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
  .app-main table.t td { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 0; padding: 6px 0; text-align: right; }
  .app-main table.t td::before { content: attr(data-label); font: 700 .78rem var(--text); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: left; flex: none; }
  .app-main table.t td[data-label=""]::before { content: none; }
  .app-main table.t td:empty { display: none; }
  .app-main table.t td .row { justify-content: flex-end; }
}

/* Order form: sign-in prompt and filled-in note */
.signin-note { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 18px; background: var(--mist); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.signin-note[hidden] { display: none; }
.signin-note.ok { background: #e8f5ec; border-color: #bfdfca; } .signin-note.warn { background: #fff4de; border-color: #f0d9a6; }
.signin-note .sn-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; width: 100%; }
.signin-note .gbtn.small { width: auto; min-height: 44px; padding: 0 18px; background: #fff; text-decoration: none; font-weight: 600; }
.signin-note .sn-link { font-weight: 700; color: var(--blue); padding: 10px 4px; }
.signin-note .sn-or { width: 100%; color: var(--muted); font-size: .9rem; }
/* ================= Home-screen app: launcher, tiny footer, who is signed in ================= */
.launch { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; color: var(--muted); }
.app-foot { padding: 6px 0 28px; color: var(--muted); font-size: .8rem; }
.app-foot .wrap { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.app-foot img { width: 26px; height: 26px; opacity: .85; } .app-foot .links { display: flex; gap: 14px; margin-left: 6px; }
.app-foot a { color: inherit; padding: 10px 2px; }
.whoami { display: none; }
@media (max-width: 820px) {
  .whoami { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #3a393a; color: #bdbdc2; font-size: .9rem; }
  .whoami button { flex: none; white-space: nowrap; background: none; border: 2px solid #55545a; color: #fff; border-radius: 10px; min-height: 44px; padding: 0 16px; font: 800 .75rem var(--text); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .whoami span { overflow-wrap: anywhere; }
}

/* Client's own photos on a comic */
.ccard .yours { border-top: 1px solid var(--mist); padding-top: 12px; display: grid; gap: 8px; } .ccard .yours h4 { margin: 0; }
.ccard .yours .btn { justify-self: start; cursor: pointer; } .ccard .yours .small { margin: 0; }
.ycell { position: relative; display: block; } .ycell .yx { position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(20,20,24,.78); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }

/* Order page: heading and filter chips above a long list of comics */
.apph2 { font: 400 1.2rem var(--display); text-transform: uppercase; letter-spacing: .03em; margin: 22px 0 8px; }
.ccard[hidden] { display: none; }

/* Phones: the order form in four steps */
.stepped .stephead { position: sticky; top: 0; z-index: 6; background: var(--bg, #fff); padding: 10px 0 8px; margin: 0 0 12px; }
.steprow { display: flex; justify-content: space-between; font: 800 .72rem var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stepbar { display: block; height: 6px; border-radius: 99px; background: var(--mist); overflow: hidden; } .stepbar i { display: block; height: 100%; width: 25%; background: #1a6fd0; transition: width .2s; }
.stepped [hidden] { display: none !important; }
.stepmsg { color: #b3261e; font-weight: 700; margin: 0 0 10px; min-height: 0; } .stepmsg:empty { display: none; }
.stepnav { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); z-index: 7; }
.stepnav .btn { min-height: 54px; justify-content: center; } .stepnav [hidden] + .stepnext, .stepnav .stepback[hidden] ~ .stepnext { grid-column: 1 / -1; }
.stepped .est { bottom: 84px; }
.revbox { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; background: #fff; }
.revhead, .revrow { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .revrow span { color: var(--muted); font-size: .92rem; }
.revrow .dep { color: var(--red); font-size: 1.15rem; }
.linkbtn { background: none; border: 0; color: #1a6fd0; font: 700 .95rem var(--text); cursor: pointer; padding: 8px; min-height: 40px; }
.stepped .fsec.review ~ .fsec { border: 0; padding: 0; }
.stepped .fsec:last-of-type button[type=submit] { width: 100%; min-height: 54px; }

/* Workshop Photos tab */
.segs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--mist); border-radius: 12px; padding: 4px; margin: 12px 0; }
.seg { min-height: 44px; border: 0; border-radius: 9px; background: transparent; font: 700 .95rem var(--text); color: var(--muted); cursor: pointer; }
.seg[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.takebox { display: grid; place-items: center; min-height: 150px; border: 2px dashed #6aa9e8; border-radius: 14px; background: #f6faff; cursor: pointer; position: relative; }
.takebox .take { font: 800 1.05rem var(--text); color: #1a6fd0; display: flex; align-items: center; gap: 8px; }
.takebox .take::before { content: "\1F4F7"; font-size: 1.4rem; }
.takebox input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 16px; }
.takebox:focus-within { outline: 3px solid #1a6fd0; outline-offset: 2px; }
.upbar { height: 8px; background: var(--mist); border-radius: 99px; margin: 12px 0 4px; overflow: hidden; } .upbar[hidden] { display: none; } .upbar i { display: block; height: 100%; width: 0; background: #1a6fd0; transition: width .2s; }

/* The tiles on the workshop orders list are the filter buttons */
button.kpi { font: inherit; color: inherit; cursor: pointer; width: 100%; min-height: 44px; border: 1.5px solid var(--line); background: #fff; }
button.kpi.on { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
button.kpi.hot.on { border-color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.kpis button.kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Photo tags (workshop Photos tab and the tag sheet) */
.segs.seg3 { grid-template-columns: repeat(3, 1fr); }
.tagctl { display: grid; gap: 4px; }
.tagchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tagchips .chip, .morebox .chip { min-height: 40px; background: #fff; border: 1.5px solid var(--line); border-radius: 99px; padding: 0 14px; font: 700 .85rem var(--text); color: var(--ink); cursor: pointer; }
.tagchips .chip.on, .morebox .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tagchips select { min-height: 40px; border-radius: 99px; border: 1.5px solid var(--line); padding: 0 12px; font-size: 16px; background: #fff; }
.morebox { display: flex; flex-wrap: wrap; gap: 8px; background: var(--mist); border-radius: 12px; padding: 10px; margin: 4px 0 2px; } .morebox[hidden], .notebox[hidden] { display: none; }
.notebox { margin-top: 6px; } .notebox input { font-size: 16px; }
.takebox.short { min-height: 84px; margin-bottom: 10px; }
.visually { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 16px; }
.photos.tagged { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }
.ph.tagthumb { position: relative; display: block; padding: 0; border: 0; height: 104px; background: var(--mist); border-radius: 12px; overflow: hidden; cursor: pointer; } .ph.tagthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph.tagthumb.hidden { opacity: .45; }
.tagthumb .tg { position: absolute; left: 4px; top: 4px; right: 4px; width: fit-content; max-width: calc(100% - 8px); background: rgba(20,20,24,.8); color: #fff; font: 700 9.5px/1.25 var(--text); letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 9px; text-align: left; } .tagthumb .tg.none { background: rgba(202,20,20,.92); }
.ph.big { height: 260px; margin: 10px 0; border-radius: 14px; overflow: hidden; background: var(--mist); } .ph.big img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ph.sm { width: 40px; height: 52px; flex: none; border-radius: 8px; overflow: hidden; display: block; } .ph.sm img { width: 100%; height: 100%; object-fit: cover; }
.rapidhead { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0; }
.lbl { display: block; font: 800 .74rem var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0 6px; }
.shots { padding: 4px 12px 8px; margin-top: 10px; } .shotrow { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); } .shotrow:first-child { border-top: 0; }
.shotrow .n { font: 400 1rem var(--display); color: #1a6fd0; width: 18px; } .shotrow .rest { flex: 1; display: grid; gap: 6px; min-width: 0; } .shotrow select, .shotrow input { font-size: 16px; min-height: 40px; width: 100%; }
.doneok { text-align: center; margin: 10px 0; display: grid; gap: 6px; justify-items: center; } .doneok .tick { width: 54px; height: 54px; border-radius: 50%; background: #e8f5ec; color: #1d5e37; display: grid; place-items: center; font-size: 1.7rem; }
.stack > .btn { width: 100%; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row .btn { flex: 1; }
.sheetshade { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow: auto; background: #fff; border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); z-index: 81; display: grid; gap: 10px; }
.sheet .ph.big { height: 200px; }
.ycell .tg { position: absolute; left: 3px; bottom: 3px; background: rgba(20,20,24,.8); color: #fff; font: 700 9px/1.2 var(--text); text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 8px; pointer-events: none; }

/* Order form: title suggestions and the issue check */
.titlefield { position: relative; } .titlefield[hidden], .chosen[hidden], .issuecheck[hidden], .suggest[hidden] { display: none; }
.suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.18); overflow: hidden; max-height: 60vh; overflow-y: auto; }
.sughead { padding: 9px 14px; background: var(--mist); font: 800 .72rem var(--text); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .sughead.warm { background: #fff4de; color: #7a5200; }
.sug { display: grid; gap: 1px; width: 100%; text-align: left; padding: 11px 14px; min-height: 52px; border: 0; border-top: 1px solid #eef0f3; background: #fff; font: inherit; color: var(--ink); cursor: pointer; } .sug b { font-size: .98rem; line-height: 1.25; }
.sug:hover, .sug.hot { background: #eef5fe; } .sug.plain { color: #1a6fd0; font-weight: 700; }
.chosen { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; border: 1.5px solid #1d8a4a; background: #f1faf4; border-radius: 12px; padding: 10px 12px; margin: -4px 0 12px; } .chosen .rest { flex: 1 1 140px; display: grid; min-width: 0; } .chosen .linkbtn { margin-left: auto; padding: 4px 0; min-height: 32px; }
.coverph { width: 24px; height: 36px; flex: none; border-radius: 5px; background: linear-gradient(90deg, rgba(0,0,0,.22) 0 12%, #c9402c 12%); box-shadow: 0 1px 4px rgba(0,0,0,.25); } .coverph.big { width: 46px; height: 68px; }
.issuecheck { display: flex; gap: 12px; align-items: center; background: var(--mist); border-radius: 12px; padding: 12px; margin: 0 0 12px; } .issuecheck .rest { flex: 1; display: grid; gap: 2px; min-width: 0; } .issuecheck .caps { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.issuecheck .row2 { display: flex; gap: 8px; margin-top: 6px; } .issuecheck .btn { min-height: 40px; width: auto; padding: 0 18px; } .issuecheck .yes { background: #1d8a4a; border-color: #1d8a4a; color: #fff; }
.issueok { display: grid; gap: 2px; }
.attribution { margin: 0; }
.coverimg { width: 46px; height: 68px; flex: none; object-fit: cover; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.3); background: var(--mist); }

/* What it is worth, and the collection card (client) */
.worth { border-top: 1px solid var(--mist); padding-top: 12px; display: grid; gap: 8px; } .worth h4 { margin: 0; }
.wrow { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 4px 0; border-top: 1px solid #eef0f3; } .wrow:first-of-type { border-top: 0; } .wrow b.up { color: #1d5e37; }
.wedit { display: flex; gap: 8px; align-items: stretch; } .wedit input, .wedit select { flex: 1; min-height: 44px; font-size: 16px; } .wedit .btn { width: auto; min-height: 44px; padding: 0 18px; }
.gradeadd summary { cursor: pointer; font-weight: 700; color: #1a6fd0; min-height: 40px; display: flex; align-items: center; } .gradeadd .segs { margin: 6px 0; }
.collect { background: #262526; color: #f2f2f2; border-radius: 16px; padding: 16px; margin: 0 0 16px; display: grid; gap: 10px; }
.collect .caps { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7fb4ff; } .collect .lite { color: #bdbdc2; }
.cnums { display: flex; justify-content: space-between; gap: 12px; } .cnums .r { text-align: right; } .cnums b { font: 800 1.6rem var(--text); display: block; } .cnums b.up { color: #6fe39a; } .cnums b.down { color: #ff9a8f; }
.cbar { display: grid; gap: 4px; font-size: .85rem; } .cbar i { display: block; height: 10px; border-radius: 99px; background: #9aa0aa; } .cbar.now i { background: #2185f5; }

/* Values and stats (workshop) */
.vrow { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid #eef0f3; flex-wrap: wrap; } .vrow:first-of-type { border-top: 0; } .vrow.pt { align-items: center; }
.sub.values .note-box { margin-top: 10px; }
.kpis.k3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 820px) { .kpis.k3 { grid-template-columns: repeat(3, 1fr); } .kpis.k3 .ocard b { font-size: 1.15rem; } }

/* Reviews (public) */
.reviews-home[hidden] { display: none; }
.rv-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 8px; }
.rv-list { display: grid; gap: 14px; max-width: 760px; margin: 0 0 24px; }
.rv { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--blue); border-radius: 0 12px 12px 0; padding: 18px 20px; display: grid; gap: 10px; align-content: start; }
.rv-stars { color: #e0a526; letter-spacing: 3px; font-size: 1.1rem; }
.rv-body p { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.55; } .rv-body p:last-child { margin: 0; }
.rv-body.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rv footer { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: .9rem; } .rv footer a { margin-left: auto; font-weight: 700; }
.rv .linkbtn { justify-self: start; }
.rv-filters { margin-bottom: 18px; } .rv-filters[hidden] { display: none; }
.rv-filters .chip { cursor: pointer; min-height: 40px; background: #fff; } .rv-filters .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 820px) {
  .rv-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 8px; padding: 0 16px 8px; scrollbar-width: none; } .rv-strip::-webkit-scrollbar { display: none; }
  .rv-strip .rv { flex: 0 0 84%; scroll-snap-align: start; }
}

/* Reviews (workshop) */
.rowlink { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-bottom: 14px; min-height: 52px; }
.rvhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .rvhead .btn { width: auto; }
.segs.seg4 { grid-template-columns: repeat(4, 1fr); margin: 8px 0 12px; } .segs.seg4 .seg { font-size: .78rem; padding: 0 2px; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.reviewbox { display: grid; gap: 10px; } .reviewbox textarea { width: 100%; font-size: 16px; }
.starrow { display: flex; gap: 4px; } .starrow button { font-size: 2rem; line-height: 1; padding: 4px 6px; min-width: 44px; min-height: 44px; border: 0; background: none; color: #d7dae0; cursor: pointer; } .starrow button.on { color: #e0a526; }

/* Practice log (workshop) */
.presslog .cyc { padding: 10px 12px; margin: 8px 0; display: grid; gap: 2px; } .presslog .cyc .vrow { border: 0; padding: 0; }
.presslog .btn { margin-top: 6px; width: auto; }
.sugbox { display: grid; gap: 0; margin: -4px 0 8px; } .sugbox:empty { display: none; }
.sugbox .sug { display: grid; width: 100%; text-align: left; padding: 10px 12px; min-height: 48px; border: 1px solid var(--line); border-top: 0; background: #fff; font: inherit; cursor: pointer; } .sugbox .sug:first-child { border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; } .sugbox .sug:last-child { border-radius: 0 0 10px 10px; } .sugbox .sug:hover { background: #eef5fe; }
.eqrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; } .eqrow.retired { opacity: .6; } .eqrow .row2 { display: flex; gap: 12px; }
.pbar { margin-bottom: 10px; } .pbar .vrow { border: 0; padding: 2px 0; } .pbar .bar-progress { height: 10px; }
.bar-progress { height: 10px; border-radius: 99px; background: #e4e7ec; overflow: hidden; } .bar-progress i { display: block; height: 100%; background: #2185f5; border-radius: 99px; }

/* Tags and labels (workshop) */
.qr { width: 25mm; height: 25mm; flex: none; display: block; background: #fff; }
.lbl { font-family: Helvetica, Arial, sans-serif; color: #000; background: #fff; box-sizing: border-box; overflow: hidden; }
.small-lbl { width: 90mm; height: 29mm; padding: 2mm; display: flex; gap: 2.5mm; align-items: center; }
.small-lbl .lbl-txt { flex: 1; min-width: 0; line-height: 1.15; }
.lbl-id { font-weight: 800; font-size: 5.4mm; letter-spacing: .01em; }
.lbl-title { font-weight: 700; font-size: 4.2mm; margin-top: .6mm; max-height: 9.6mm; overflow: hidden; line-height: 1.12; }
.lbl-meta { font-size: 3.1mm; margin-top: .8mm; color: #000; }
.lbl-dup { background: #000; color: #fff; font-weight: 800; font-size: 3mm; padding: .7mm 1.4mm; margin-top: 1.2mm; letter-spacing: .02em; }
.card-lbl { width: 62mm; height: 100mm; padding: 3mm; display: flex; flex-direction: column; gap: 3mm; border: 0; }
.card-lbl .qr { width: 34mm; height: 34mm; margin: 0 auto; } .card-lbl .lbl-top { display: flex; flex-direction: column; gap: 2.5mm; align-items: center; text-align: center; }
.card-lbl .lbl-id { font-size: 6.6mm; } .card-lbl .lbl-title { font-size: 4.6mm; max-height: none; } .card-lbl .lbl-meta { font-size: 3.4mm; }
.lbl-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2mm 2mm; font-size: 3.3mm; font-weight: 600; border-top: .3mm dashed #000; padding-top: 2.5mm; margin-top: auto; }
.lbl-foot { font-size: 2.5mm; text-align: center; }
.lblprev { display: grid; gap: 12px; margin: 12px 0 90px; } .lblbox { border: 1px solid var(--line); border-radius: 6px; width: fit-content; max-width: 100%; overflow: hidden; background: #fff; } .lblbox.framed .lbl { outline: .3mm solid #000; outline-offset: -.3mm; }
.stickybar { position: sticky; bottom: 70px; background: rgba(255,255,255,.96); padding: 10px 0; z-index: 4; }
#labelsheet { display: none; }
@media print {
  body.printing-labels > *:not(#labelsheet) { display: none !important; }
  body.printing-labels { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.printing-labels #labelsheet { display: block !important; }
  .lbl-page { page-break-after: always; break-after: page; overflow: hidden; position: relative; }
  .lbl-page.rot-page { width: 29mm; height: 90mm; } .lbl-page.rot-page .lbl { position: absolute; left: 29mm; top: 0; transform-origin: 0 0; transform: rotate(90deg); }
  .lbl-page.land-page { width: 90mm; height: 29mm; } .lbl-page.card-page { width: 62mm; height: 100mm; }
}
.tagcard { display: flex; gap: 14px; align-items: flex-start; } .tagcard .big { font-size: 1.15rem; display: block; }
.tagpic { position: relative; width: 96px; height: 132px; flex: none; border-radius: 8px; overflow: hidden; background: var(--mist); } .tagpic img { width: 100%; height: 100%; object-fit: cover; display: block; } .tagpic.none { display: grid; place-items: center; text-align: center; font-size: .75rem; color: var(--muted); padding: 6px; }
.tagpic .tg { position: absolute; left: 4px; top: 4px; background: rgba(20,20,24,.8); color: #fff; font: 700 9px/1.2 var(--text); text-transform: uppercase; padding: 2px 6px; border-radius: 8px; }
.warnbox { background: #fff4de; border-color: #f0d9a6; border-left-color: #e0a526; font-weight: 600; }
.stagegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; } .stagegrid .btn { width: 100%; min-height: 46px; justify-content: center; }
.xs.caps { font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.lbl-title.long { font-size: 3.5mm; }
.looks a { white-space: nowrap; }

/* Catalogue matching: one tap per candidate, cover on the left */
.mask { padding: 10px 12px; margin-bottom: 8px; } .mask > b { font-size: 15px; }
.mcand { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-top: 6px; padding: 6px 8px; background: var(--paper, #fff); border: 1.5px solid var(--line, #d8dce2); border-radius: 10px; cursor: pointer; font: inherit; color: inherit; }
.mcand img, .mcand .nocover { width: 40px; height: 60px; flex: none; object-fit: cover; border-radius: 4px; background: #e9ecf0; display: grid; place-items: center; color: #8a93a0; }
.mcand span span { display: block; } .mcand b { text-transform: none; letter-spacing: 0; font-size: 14px; }
.mask .linkbtn { margin-top: 6px; }

.mline { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 12px; margin-bottom: 7px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mcand[aria-pressed="true"] { border: 2px solid #2185f5; background: #eef5ff; }
.mlinks { display: flex; justify-content: space-between; margin-top: 12px; } .btn.off { opacity: .5; }
.card.mrow { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; margin-bottom: 7px; } .card.mrow .chev { margin-left: auto; }
.mask { text-align: left; }
.mask .btn { display: block; text-align: center; width: 100%; box-sizing: border-box; } .stickybar .btn:disabled { opacity: .45; }

/* Matching, tighter: candidates sit in a grid on wide screens; the chooser stays a readable width */
.mhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .mhead b { font-size: 16px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 8px; margin-top: 4px; } .mgrid .mcand { margin-top: 6px; }
.mcand img, .mcand .nocover { width: 34px; height: 51px; }
.mask { max-width: 820px; padding: 8px 12px; } .mask .mlinks { margin-top: 8px; } .mask .linkbtn { margin-top: 4px; }
@media (min-width: 700px) { .card.mrow, .mline { max-width: 820px; } }

/* Orders header: the Practice comic button gets its own row height and a gap above the tiles */
.rvhead { margin-bottom: 12px; } .rvhead .apph { margin: 0; }

/* Client progress: six steps, a stage bar, and the tiles on the orders list */
.ctiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 14px; }
.ctile { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 8px 4px; text-align: center; }
.ctile b { display: block; font-size: 1.5rem; line-height: 1.15; } .ctile.good b { color: #2e9e55; } .ctile span { font-size: .8rem; color: var(--muted, #5b6470); }
.segs6 { display: flex; gap: 4px; margin: 6px 0 2px; } .segs6 i { flex: 1; height: 6px; border-radius: 4px; background: #d3d7de; } .segs6 i.done { background: #2e9e55; } .segs6 i.now { background: #2185f5; }
.stepline { display: flex; justify-content: space-between; align-items: baseline; } .stepline b { color: #1a6fd0; }
.stackbar { display: flex; height: 10px; border-radius: 9px; overflow: hidden; background: #e6e9ee; margin: 6px 0 2px; } .stackbar i { display: block; }
.stackbar .fin, .stackkey .fin { background: #2e9e55; } .stackbar .prs, .stackkey .prs { background: #2185f5; } .stackbar .asd, .stackkey .asd { background: #9fd3b2; } .stackbar .away, .stackkey .away { background: #d3d7de; }
.stackkey { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .88rem; } .stackkey i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.tracker { list-style: none; margin: 0 0 6px; padding: 0; } .tracker li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.tracker li:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 24px; bottom: -8px; width: 2.5px; background: #d3d7de; } .tracker li.done:not(:last-child)::before { background: #2e9e55; }
.tracker .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; border: 2.5px solid #d3d7de; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; }
.tracker li.done .dot { background: #2e9e55; border-color: #2e9e55; } .tracker li.now .dot { border: 6px solid #2185f5; background: #fff; }
.tracker li.todo b { color: #8a93a0; } .tracker b { display: block; } .tracker .xs { display: block; }

.progress-sample { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 18px 0 6px; max-width: 520px; } .progress-sample p { margin: 8px 0 0; }

/* Catalogue page */
.mtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; max-width: 820px; }
.mtile { background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 4px; text-align: center; font: inherit; color: inherit; cursor: pointer; } .mtile b { display: block; font-size: 1.4rem; line-height: 1.15; } .mtile.hot b { color: #c01818; }
.mtile.on { border: 2.5px solid #262526; padding: 7.5px 3.5px; } .mtile span { font-size: .82rem; }
#mrows, .mrun, .mtiles + input { max-width: 820px; } .mtiles + input { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 8px; }
.mrun { margin: 4px 0; } .mrow .mtext { flex: 1; min-width: 0; text-align: left; } .mrow .mtext b, .mrow .mtext span { display: block; }
.mform { display: grid; grid-template-columns: 3fr 1fr; gap: 8px; margin-bottom: 8px; } .mask .input { width: 100%; box-sizing: border-box; }
.card.mrow { width: 100%; box-sizing: border-box; font: inherit; color: inherit; cursor: pointer; }
.mtiles + input { padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; background: var(--paper); }

.mthumb { width: 34px; height: 51px; flex: none; border-radius: 4px; object-fit: cover; background: #e9ecf0; border: 1px solid var(--line); } .mthumb.none { display: block; }
.mlinked { display: flex; gap: 12px; align-items: center; margin: 8px 0; } .mlinked .mthumb { width: 56px; height: 84px; }
.mform label { display: block; font-weight: 700; font-size: .85rem; } .mform .input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font-weight: 400; }
.mmore { display: grid; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); } .mmore .btn { width: 100%; box-sizing: border-box; text-align: center; } .mmore p { margin: 4px 0 0; }
.stickybar[hidden] { display: none; } .mform { grid-template-columns: 2fr 1fr; align-items: end; } .mform label { white-space: nowrap; }