/* ==========================================================================
   DigiPaws — stylesheet
   Implements DESIGN.md. The palette and the shape language come straight
   from the existing DigiPaws logo: magenta → violet → blue, chrome, white,
   and rounded, flowing shapes throughout.
   ========================================================================== */

/* --- Locally hosted fonts (no CDN) ------------------------------------ */

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

/* --- Design tokens ------------------------------------------------------ */

:root {
  color-scheme: light;

  /* brand colors, straight from the logo */
  --magenta: #EC1C9D;
  --violet: #8E3BBB;
  --blue: #1785BD;

  /* deep variants — the only ones allowed to carry white text */
  --magenta-deep: #C4177F;
  --violet-deep: #7B3AAF;
  --blue-deep: #10658F;

  /* tints for soft surfaces */
  --magenta-tint: rgba(236, 28, 157, 0.10);
  --violet-tint: rgba(142, 59, 187, 0.10);
  --blue-tint: rgba(23, 133, 189, 0.10);

  /* chrome, from the paw print */
  --chrome-light: #F2F4F7;
  --chrome: #CFD5DB;
  --chrome-dark: #8B939E;

  /* paper and ink */
  --paper: #FFFFFF;
  --paper-tint: #F4F7FB;
  --paper-blush: #FDF2F9;
  --paper-sky: #EFF6FC;
  --card: #FFFFFF;
  --ink: #1B1D26;
  --ink-soft: #454A57;
  --ink-muted: rgba(27, 29, 38, 0.62);
  --line: rgba(27, 29, 38, 0.10);
  --line-strong: rgba(27, 29, 38, 0.18);
  --wash: rgba(27, 29, 38, 0.04);

  /* gradients */
  --brand-gradient: linear-gradient(135deg, #EC1C9D 0%, #DB1FA6 32%, #8E3BBB 56%, #3A6FC4 78%, #1785BD 100%);
  --action-gradient: linear-gradient(135deg, #C4177F 0%, #7B3AAF 55%, #10658F 100%);
  --glow-magenta: radial-gradient(circle, rgba(236, 28, 157, 0.20) 0%, rgba(236, 28, 157, 0) 70%);
  --glow-blue: radial-gradient(circle, rgba(23, 133, 189, 0.20) 0%, rgba(23, 133, 189, 0) 70%);

  /* depth — soft and colored, never hard gray */
  --shadow-sm: 0 4px 14px rgba(27, 29, 38, 0.06);
  --shadow-md: 0 12px 32px rgba(27, 29, 38, 0.09);
  --shadow-lg: 0 24px 56px rgba(27, 29, 38, 0.13);
  --shadow-magenta: 0 12px 30px rgba(236, 28, 157, 0.30);
  --shadow-blue: 0 12px 30px rgba(23, 133, 189, 0.26);

  /* shape — everything rounded */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 48px;
  --r-pill: 999px;
  --r-blob: 58% 42% 47% 53% / 49% 53% 47% 51%;
  --wrap: 1160px;

  /* motion — with a little overshoot, which is what makes it cheerful */
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* type */
  --font-head: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Base -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must always win. Without this, any class that sets its
   own display (a flex row, a grid) silently overrides the browser default and
   the element stays on screen while JavaScript believes it is hidden. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.2rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; }

/* Brand gradient as text fill — headings only, never body copy. */
.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--magenta-deep); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: 0.4em; }

hr { border: 0; border-top: 2px solid var(--line); margin: 40px 0; }

:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 8px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--magenta-deep); color: #fff;
  padding: 12px 22px; border-radius: 0 0 var(--r-md) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
  padding: 15px 30px; border-radius: var(--r-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
  transition: transform .28s var(--bounce), box-shadow .28s var(--ease), background-color .2s var(--ease), filter .2s var(--ease);
}
.btn-small { padding: 10px 22px; font-size: 0.98rem; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
  background: var(--action-gradient); color: #fff;
  box-shadow: var(--shadow-magenta);
}
.btn-primary:hover {
  color: #fff; transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 38px rgba(236, 28, 157, 0.36);
  filter: saturate(1.12);
}
.btn-primary:active { transform: translateY(-1px) scale(0.99); }

.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { color: var(--magenta-deep); border-color: var(--magenta); transform: translateY(-3px) scale(1.03); box-shadow: var(--shadow-md); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none;
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-logo {
  width: 46px; height: 46px; flex: none;
  transition: transform .5s var(--bounce);
}
.brand:hover .brand-logo { transform: rotate(-12deg) scale(1.08); }
.brand-name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.03em;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.main-nav { display: none; }
.main-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.main-nav li { margin: 0; }
.main-nav a {
  color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: 1rem;
  font-family: var(--font-head); padding: 6px 0; position: relative;
}
.main-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: var(--r-pill); background: var(--brand-gradient);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--bounce);
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  width: 50px; height: 50px; border-radius: var(--r-pill); border: 2px solid var(--line-strong);
  background: var(--card); cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: transform .28s var(--bounce), border-color .2s var(--ease);
}
.nav-toggle:hover { transform: scale(1.06); border-color: var(--magenta); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2.5px; background: var(--ink); border-radius: var(--r-pill); content: '';
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }

.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--paper); }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 10px 16px 18px; }
.mobile-nav li { margin: 0 0 6px; }
.mobile-nav a {
  display: block; padding: 14px 20px; color: var(--ink); text-decoration: none;
  font-weight: 700; font-family: var(--font-head); border-radius: var(--r-md);
}
.mobile-nav a:hover { background: var(--magenta-tint); color: var(--magenta-deep); }

@media (min-width: 940px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* --- Floating decorative blobs --------------------------------------- */

.blob {
  position: absolute; pointer-events: none; z-index: 0;
  border-radius: var(--r-blob);
  filter: blur(2px);
  animation: drift 18s ease-in-out infinite;
}
.blob--magenta { background: var(--glow-magenta); }
.blob--blue { background: var(--glow-blue); }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -22px, 0) rotate(8deg); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, var(--paper-blush) 0%, var(--paper) 45%, var(--paper-sky) 100%);
  padding: 76px 0 92px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.hero .blob--magenta { inset: -22% auto auto -12%; width: 620px; height: 620px; }
.hero .blob--blue { inset: auto -14% -30% auto; width: 680px; height: 680px; animation-delay: -7s; }

.hero-inner { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .hero-inner { grid-template-columns: 1.02fr 0.98fr; gap: 60px; } }

.hero p.lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero--page {
  padding: 58px 0 62px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.hero--page h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
.hero--page .lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 40em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-size: 0.86rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--magenta-deep); margin: 0 0 14px;
  background: var(--magenta-tint); border-radius: var(--r-pill); padding: 7px 18px;
}

.hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; list-style: none; padding: 0; }
.hero-facts li {
  margin: 0; display: inline-flex; align-items: center; gap: 9px;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 18px; font-size: 0.94rem; font-weight: 700; box-shadow: var(--shadow-sm);
  transition: transform .28s var(--bounce), border-color .2s var(--ease);
}
.hero-facts li:hover { transform: translateY(-3px) scale(1.04); border-color: var(--blue); }
.hero-facts .tick { color: var(--blue); flex: none; width: 18px; height: 18px; }

/* The furry ring from the logo, large and gently drifting behind the collage */
.hero-art { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hero-art::before {
  content: ''; position: absolute; inset: -14% -10%; z-index: 0;
  background: url('../img/digipaws-logo-furry.svg') center / contain no-repeat;
  opacity: 0.13; animation: drift 22s ease-in-out infinite;
}
.hero-art .tile { position: relative; z-index: 1; }
.hero-art .tile:nth-child(1) { transform: rotate(-3deg); animation: bob 7s ease-in-out infinite; }
.hero-art .tile:nth-child(2) { transform: rotate(2.5deg); margin-top: 26px; animation: bob 7s ease-in-out -1.8s infinite; }
.hero-art .tile:nth-child(3) { transform: rotate(2deg); animation: bob 7s ease-in-out -3.5s infinite; }
.hero-art .tile:nth-child(4) { transform: rotate(-2.5deg); margin-top: 26px; animation: bob 7s ease-in-out -5.2s infinite; }

/* --- Sections ------------------------------------------------------------ */

.section { position: relative; padding: 92px 0; }

/* Tinted sections are large rounded panels sitting on the white paper */
.section--panel {
  background: var(--paper-tint);
  border-radius: var(--r-xl);
  margin: 0 16px;
  padding: 84px 0;
}
.section--blush { background: var(--paper-blush); }
.section--sky { background: var(--paper-sky); }

.section-head { max-width: 42em; margin: 0 0 44px; }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { margin-left: auto; margin-right: auto; }

/* Furry wave as a cheerful rule under a section heading */
.fur-rule {
  display: block; width: 168px; height: 22px; margin: 18px 0 0;
  background: url('../img/fur-wave.svg') left center / 100% 100% no-repeat;
}
.section-head--center .fur-rule { margin-left: auto; margin-right: auto; }

@media (max-width: 780px) {
  .section { padding: 62px 0; }
  .section--panel { padding: 56px 0; margin: 0 10px; border-radius: var(--r-lg); }
  .hero { padding: 48px 0 62px; }
}

/* --- Steps (the homepage explainer) ------------------------------------ */

.howto { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .howto { grid-template-columns: repeat(3, 1fr); } }

.howto-step {
  position: relative; background: var(--card); border-radius: var(--r-lg); padding: 32px;
  box-shadow: var(--shadow-md); border: 2px solid var(--line);
  transition: transform .3s var(--bounce), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.howto-step:hover { transform: translateY(-8px) rotate(-0.8deg); box-shadow: var(--shadow-lg); border-color: var(--magenta); }
.howto-step h3 { margin-top: 16px; }
.howto-num {
  width: 54px; height: 54px; border-radius: var(--r-blob);
  background: var(--brand-gradient); color: #fff; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  box-shadow: var(--shadow-magenta);
}
.howto-step p { color: var(--ink-soft); margin: 0; }

/* --- Species chips ---------------------------------------------------- */

.species-switch { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }

.species-chip {
  display: inline-flex; align-items: center; gap: 11px; min-height: 56px;
  padding: 12px 26px; border-radius: var(--r-pill);
  background: var(--card); border: 2.5px solid var(--line-strong); color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 1.08rem;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .28s var(--bounce), border-color .2s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease);
}
.species-chip:hover { transform: translateY(-3px) scale(1.04); border-color: var(--violet); }
.species-chip[aria-selected="true"], .species-chip[aria-checked="true"], .species-chip.is-selected {
  background: var(--magenta-tint); border-color: var(--magenta); box-shadow: var(--shadow-magenta);
}
.species-chip svg { width: 24px; height: 24px; color: var(--magenta-deep); flex: none; }
.species-chip[aria-selected="true"] svg, .species-chip[aria-checked="true"] svg { color: var(--magenta); }

/* --- Gallery ------------------------------------------------------------ */

.gallery-panel[hidden] { display: none; }

.grid-tiles { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .grid-tiles { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow-md); border: 2px solid var(--line);
  transition: transform .3s var(--bounce), box-shadow .3s var(--ease);
}
.grid-tiles .tile:hover { transform: translateY(-6px) scale(1.03) rotate(-1deg); box-shadow: var(--shadow-lg); }
.tile img { width: 100%; height: 100%; object-fit: cover; }

.tile--placeholder { display: grid; place-items: center; text-align: center; padding: 16px; }
.tile--placeholder .tile-paw { width: 46%; opacity: 0.3; }
.tile-caption {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: rgba(255, 255, 255, 0.94); border-radius: var(--r-pill);
  padding: 7px 15px; font-size: 0.86rem; font-weight: 700; text-align: center;
  font-family: var(--font-head); box-shadow: var(--shadow-sm);
}

/* Label plus regel eronder: samen gestapeld en als blok onderaan verankerd,
   zodat het niet uitmaakt op hoeveel regels de tekst afbreekt. */
.tile-labels {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.tile-labels .tile-caption { position: static; left: auto; right: auto; bottom: auto; }
.tile-note {
  background: rgba(255, 255, 255, 0.94); border-radius: var(--r-sm);
  padding: 6px 12px; font-size: 0.72rem; line-height: 1.35; font-weight: 500;
  text-align: center; font-family: var(--font-body); box-shadow: var(--shadow-sm);
}
/* Onder 780px is een tegel nog maar ~160px breed en breekt deze regel in vier
   regels, die dan 63% van het portret bedekken. Het hero-raster is
   aria-hidden en dus decoratief, en dezelfde mededeling staat bij het
   naamveld op het bestelformulier — hier valt niets weg dat je nodig hebt. */
.tile-note { display: none; }
@media (min-width: 780px) { .tile-note { display: block; } }

.gallery-foot { margin-top: 26px; color: var(--ink-muted); font-size: 0.96rem; }

/* --- Packages ---------------------------------------------------------- */

/* stretch, not start: the cards carry different numbers of features and some
   lines wrap, so sizing each to its own content left them visibly uneven and
   made the wording a layout constraint. Equal heights mean catalog.json can
   say what it needs to say. .plan is already a column flexbox with
   .plan-features flex:1, so the buttons stay aligned along the bottom. */
.plans { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 880px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  position: relative; background: var(--card); border: 2px solid var(--line);
  border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  transition: transform .3s var(--bounce), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.plan:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--violet); }
.plan--featured { border-color: var(--magenta); box-shadow: var(--shadow-lg); }
.plan--featured::before {
  content: ''; position: absolute; inset: -2px; border-radius: var(--r-lg);
  background: var(--brand-gradient); z-index: -1;
}
.plan-badge {
  position: absolute; top: -16px; left: 30px;
  background: var(--brand-gradient); color: #fff;
  border-radius: var(--r-pill); padding: 7px 20px; font-size: 0.78rem; font-weight: 700;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.09em;
  box-shadow: var(--shadow-magenta);
}
.plan h3 { margin-bottom: 4px; font-size: 1.5rem; }
.plan-tagline { color: var(--ink-muted); font-size: 0.98rem; margin: 0 0 20px; }
.plan-amount {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 2.9rem); line-height: 1;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan-currency-note { font-size: 0.86rem; color: var(--ink-muted); margin: 10px 0 22px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.plan-features li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; font-size: 1rem; }
.plan-features .tick { color: var(--blue); flex: none; width: 20px; height: 20px; margin-top: 4px; }

/* --- Guarantee ----------------------------------------------------------- */

.guarantee {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--paper-blush), var(--paper-sky));
  border: 2px solid var(--line); border-radius: var(--r-xl); padding: 38px;
  display: grid; gap: 24px; align-items: center; box-shadow: var(--shadow-md);
}
@media (min-width: 780px) { .guarantee { grid-template-columns: 76px 1fr; padding: 44px 48px; } }
.guarantee h2, .guarantee h3 { margin-bottom: 10px; color: var(--ink); }
.guarantee p { color: var(--ink-soft); margin: 0; }
.guarantee-icon { width: 76px; height: 76px; color: var(--magenta-deep); }

/* --- Testimonials ------------------------------------------------------- */

.testimonials { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r-lg);
  padding: 32px; box-shadow: var(--shadow-md); display: flex; flex-direction: column;
  transition: transform .3s var(--bounce), box-shadow .3s var(--ease);
}
.testimonial:hover { transform: translateY(-6px) rotate(0.6deg); box-shadow: var(--shadow-lg); }
.stars { color: var(--magenta); font-size: 1.15rem; letter-spacing: 3px; margin-bottom: 14px; }
.stars span { color: var(--ink-muted); font-size: 0.84rem; letter-spacing: 0; margin-left: 8px; font-weight: 700; }
.testimonial blockquote { margin: 0 0 20px; font-size: 1.04rem; flex: 1; }
.testimonial-meta { display: flex; align-items: center; gap: 13px; }
.testimonial-photo { width: 52px; height: 52px; border-radius: var(--r-blob); object-fit: cover; flex: none; }
.testimonial-avatar {
  width: 52px; height: 52px; border-radius: var(--r-blob); flex: none;
  display: grid; place-items: center; background: var(--magenta-tint);
}
.testimonial-avatar svg { width: 28px; color: var(--magenta-deep); }
.testimonial-name { font-weight: 700; font-size: 0.98rem; margin: 0; }
.testimonial-source { font-size: 0.84rem; color: var(--ink-muted); margin: 0; }
.testimonial-source a { color: var(--ink-muted); }

.placeholder-note {
  background: var(--magenta-tint); border: 2.5px dashed var(--magenta);
  border-radius: var(--r-md); padding: 16px 22px; font-size: 0.94rem; font-weight: 700;
  color: var(--magenta-deep); margin-bottom: 28px;
}

/* --- FAQ ---------------------------------------------------------------- */

.faq { max-width: 48em; }
.faq details {
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r-md);
  padding: 4px 26px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.faq details:hover { border-color: var(--violet); box-shadow: var(--shadow-md); }
.faq details[open] { border-color: var(--magenta); }
.faq summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 1.14rem;
  padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex: none;
  width: 32px; height: 32px; border-radius: var(--r-pill);
  background: var(--magenta-tint); color: var(--magenta-deep);
  display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
  transition: transform .3s var(--bounce);
}
.faq details[open] summary::after { content: '−'; transform: rotate(180deg); }
.faq details > p { color: var(--ink-soft); padding-bottom: 20px; margin: 0; }

/* --- Order wizard ------------------------------------------------------- */

.order-layout { display: grid; gap: 34px; align-items: start; }
@media (min-width: 1000px) { .order-layout { grid-template-columns: 1fr 350px; gap: 42px; } }

.steps { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 34px; }
.steps li {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 0.94rem; font-weight: 700; font-family: var(--font-head); color: var(--ink-muted);
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 18px 7px 8px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .28s var(--bounce);
}
.steps .step-num {
  width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--wash);
  display: grid; place-items: center; font-size: 0.9rem; color: var(--ink);
}
.steps li[aria-current="step"] {
  color: var(--magenta-deep); border-color: var(--magenta); background: var(--magenta-tint); transform: scale(1.04);
}
.steps li[aria-current="step"] .step-num { background: var(--brand-gradient); color: #fff; }
.steps li.is-done { color: var(--blue-deep); border-color: var(--blue); }
.steps li.is-done .step-num { background: var(--blue-tint); color: var(--blue-deep); }

.order-step { display: none; }
.order-step.is-active { display: block; animation: pop .38s var(--bounce); }

@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.order-panel {
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r-lg);
  padding: 32px; box-shadow: var(--shadow-md); margin-bottom: 26px;
}
.order-panel p.hint { color: var(--ink-muted); font-size: 0.98rem; }

fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { padding: 0; }
/* The panel titles are real <h2> elements so the heading hierarchy holds
   (DESIGN.md chapter 11). The fieldsets point at them with aria-labelledby. */
.panel-title { font-size: 1.6rem; margin-bottom: 8px; }

/* style cards */
.style-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 660px) { .style-grid { grid-template-columns: repeat(4, 1fr); } }

.style-card {
  position: relative; border: 3px solid transparent; border-radius: var(--r-md);
  background: var(--card); padding: 0; cursor: pointer; overflow: hidden;
  text-align: left; font-family: var(--font-body); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--bounce), border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.style-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: var(--shadow-md); }
.style-card .tile { box-shadow: none; border: 0; border-radius: 0; }
.style-card .style-label { display: block; padding: 12px 14px 2px; font-weight: 700; font-family: var(--font-head); font-size: 1.02rem; }
.style-card .style-blurb { display: block; padding: 0 14px 14px; font-size: 0.84rem; color: var(--ink-muted); }
.style-card[aria-pressed="true"] { border-color: var(--magenta); box-shadow: var(--shadow-magenta); }
.style-card[aria-pressed="true"]::after {
  content: '✓'; position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--brand-gradient); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 1rem;
  box-shadow: var(--shadow-magenta);
}
.style-card[disabled] { opacity: .4; cursor: not-allowed; transform: none; }

.select-counter { font-size: 0.96rem; color: var(--ink-muted); margin: 16px 0 0; font-weight: 700; }

/* dropzone */
.dropzone {
  display: block; border: 3px dashed var(--line-strong); border-radius: var(--r-lg);
  padding: 44px 26px; text-align: center; background: var(--paper-tint); cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .28s var(--bounce);
}
.dropzone:hover { transform: scale(1.01); border-color: var(--violet); }
.dropzone.is-dragover { background: var(--magenta-tint); border-color: var(--magenta); transform: scale(1.02); }
.dropzone .dz-paw { display: block; width: 62px; margin: 0 auto 14px; color: var(--magenta); opacity: .8; animation: bob 6s ease-in-out infinite; }
.dropzone p { margin: 0 0 6px; font-weight: 700; font-family: var(--font-head); font-size: 1.1rem; }
.dropzone .dz-sub { font-weight: 400; color: var(--ink-muted); font-size: 0.94rem; font-family: var(--font-body); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.thumbs { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-top: 22px; }
@media (min-width: 640px) { .thumbs { grid-template-columns: repeat(6, 1fr); } }
.thumb {
  position: relative; aspect-ratio: 1/1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--wash); box-shadow: var(--shadow-sm);
  transition: transform .28s var(--bounce);
}
.thumb:hover { transform: scale(1.05) rotate(-2deg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button {
  position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border-radius: var(--r-pill);
  border: 0; background: rgba(255, 255, 255, 0.95); color: var(--ink); cursor: pointer;
  font-weight: 700; line-height: 1; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--bounce), background-color .2s var(--ease);
}
.thumb button:hover { transform: scale(1.15); background: var(--magenta); color: #fff; }

.photo-tips { background: var(--blue-tint); border-radius: var(--r-md); padding: 22px 26px; margin-top: 24px; }
.photo-tips h3 { color: var(--blue-deep); font-size: 1.08rem; margin-bottom: 10px; }
.photo-tips ul { margin: 0; padding-left: 1.2em; font-size: 0.96rem; }
.photo-tips li { margin-bottom: 5px; }

/* form fields */
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 1rem; font-family: var(--font-head); }
.field .help { font-size: 0.88rem; color: var(--ink-muted); font-weight: 400; margin-top: 6px; font-family: var(--font-body); }
input[type="text"], input[type="email"], textarea, select {
  width: 100%; padding: 15px 18px; border-radius: var(--r-sm);
  border: 2px solid var(--line-strong); background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, textarea:focus, select:focus { border-color: var(--magenta); box-shadow: 0 0 0 4px var(--magenta-tint); }
textarea { min-height: 104px; resize: vertical; }

.check { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; font-size: 0.98rem; }
.check input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--magenta); flex: none; }

/* Witte aftekeningen: drie vinkjes op een rij onder de kleurkeuze. Los van
   .check, want dat zijn de brede juridische vinkjes met veel witruimte. */
.field-label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 1rem; font-family: var(--font-head); }
.marking-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.marking { display: inline-flex; align-items: center; gap: 8px; font-size: 0.98rem; font-weight: 400; }
.marking input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--magenta); flex: none; }

.order-nav { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-top: 8px; }

/* summary */
.summary {
  position: sticky; top: 100px; background: var(--card); border: 2px solid var(--line);
  border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-md);
}
.summary h2 { font-size: 1.3rem; }
.summary dl { margin: 0 0 20px; }
.summary dt { font-size: 0.8rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.summary dd { margin: 3px 0 15px; font-weight: 700; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--line); padding-top: 18px; margin-bottom: 20px;
  font-family: var(--font-head); font-weight: 700;
}
.summary-total .plan-amount { font-size: 2rem; }
.summary-fine { font-size: 0.84rem; color: var(--ink-muted); margin-top: 16px; }

.pay-methods { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 18px; }
.pay-methods span {
  font-size: 0.78rem; font-weight: 700; background: var(--wash); border-radius: var(--r-pill);
  padding: 6px 14px; color: var(--ink-soft);
}

/* Officiele merktekens, elk in een tegel van gelijke maat.

   Eerder stonden ze zonder tegel, allemaal op dezelfde buitenhoogte. Dat leek
   logisch en zag er niet uit. De bestanden verschillen namelijk enorm in
   ingebouwde marge: bij Apple is bijna het hele bestand zichtbaar merk, bij
   Google maar 69% breed en 54% hoog. Op buitenmaat schalen maakte Google dus
   klein en bleek naast een groot en zwart Apple Pay. Een rij met wisselend
   gewicht leest als bij elkaar geraapt, en bij betaalmethodes is dat het laatste
   wat je wilt: het is precies de plek waar een bezoeker besluit of een onbekende
   webshop te vertrouwen is.

   Nu is het omgekeerd. De tegel is voor iedereen 52x34, en de afmetingen van elk
   teken zijn zo gekozen dat de ZICHTBARE inkt overal ongeveer even zwaar weegt.
   Die maten staan per teken in de html, niet hier, omdat ze per bestand zijn
   uitgerekend uit de verhouding inkt/bestand.

   Google's bestand is daardoor 61x41 en dus groter dan de tegel. Dat mag: wat
   eroverheen steekt is volledig transparante marge. Vandaar `overflow: visible`
   en het absoluut centreren, zodat die overloop de rij niet uit elkaar duwt.

   De witte tegel is ook een merkeis. Apple, Google, iDEAL, Visa, Mastercard en
   Bancontact schrijven alle zes een lichte ondergrond voor en verbieden het
   aanpassen van hun artwork. Dus geen filter, geen opacity, geen kleurcorrectie.
   Apple en Google brengen hun eigen kader mee, waardoor je een kader in een
   kader krijgt; dat is de gangbare uitruil en oogt rustiger dan een ongelijke
   rij.

   Padding en achtergrond worden expliciet teruggezet. De regel `.pay-methods
   span` hierboven geeft elke span een grijze pil met 6px/14px padding, en de
   tegels zijn ook spans. */
.pay-methods {
  /* Eén knop voor de hele rij. Tegel en teken moeten samen schalen, want de
     maten in de html zijn uitgerekend tegen een tegel van 52x34; verschuift er
     één van de twee, dan klopt de optische balans niet meer. */
  --pay-schaal: 1;
}
.pay-methods .pay-mark {
  position: relative; display: inline-flex; flex: none; padding: 0;
  width: calc(52px * var(--pay-schaal));
  height: calc(34px * var(--pay-schaal));
  background: #fff; border: 1.5px solid var(--line-strong);
  border-radius: calc(9px * var(--pay-schaal)); overflow: visible;
}
.pay-methods .pay-mark img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--pay-schaal));
  display: block; max-width: none;
}

/* Op een telefoon van 375px passen zes tegels van 52px net niet, en dan valt er
   één alleen op een tweede regel. Dat leest als een fout. Iets kleiner en de rij
   blijft heel. */
@media (max-width: 430px) {
  .pay-methods { --pay-schaal: 0.82; gap: 6px; }
}

/* alerts */
.alert { border-radius: var(--r-md); padding: 18px 24px; margin-bottom: 22px; font-size: 0.98rem; }
.alert--error { background: var(--magenta-tint); border: 2px solid var(--magenta); color: var(--magenta-deep); font-weight: 700; }
.alert--info { background: var(--blue-tint); border: 2px solid var(--blue); color: var(--ink); }
.alert[hidden] { display: none; }

.busy { display: inline-flex; align-items: center; gap: 10px; }
.spinner {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Thank-you page ----------------------------------------------------- */

.confirm-card {
  position: relative; background: var(--card); border: 2px solid var(--line);
  border-radius: var(--r-xl); padding: 48px;
  box-shadow: var(--shadow-lg); max-width: 48em; margin: 0 auto;
}
.confirm-icon { width: 84px; height: 84px; color: var(--magenta); margin-bottom: 22px; animation: bob 6s ease-in-out infinite; }
.timeline { list-style: none; padding: 0; margin: 30px 0 0; }
.timeline li { display: flex; gap: 16px; padding: 16px 0; border-top: 2px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline .t-when { font-weight: 700; font-family: var(--font-head); color: var(--magenta-deep); min-width: 9em; font-size: 0.96rem; }

/* --- Prose (legal pages) ---------------------------------------- */

.prose { max-width: 46em; }
.prose h2 { font-size: 1.7rem; margin-top: 48px; }
.prose h3 { font-size: 1.2rem; margin-top: 30px; }
.prose h2:first-child { margin-top: 0; }
.table-scroll {
  overflow-x: auto; margin: 0 0 26px;
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--card);
  -webkit-overflow-scrolling: touch;
}
.table-scroll table { margin: 0; min-width: 440px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 0.96rem; }
.prose th, .prose td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 700; background: var(--paper-tint); font-family: var(--font-head); }
.prose .table-scroll tr:last-child th,
.prose .table-scroll tr:last-child td { border-bottom: 0; }
.prose .callout {
  background: linear-gradient(135deg, var(--paper-blush), var(--paper-sky));
  border: 2px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 28px; margin: 0 0 28px;
}
.prose .callout h3 { margin-top: 0; color: var(--magenta-deep); }
.doc-meta { color: var(--ink-muted); font-size: 0.92rem; margin-bottom: 34px; }

/* --- 404 ---------------------------------------------------------------- */

.notfound { position: relative; text-align: center; padding: 92px 0 100px; }
.notfound-num {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(5.5rem, 17vw, 10rem);
  line-height: 1; margin: 0;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.notfound .paw-lost { width: 120px; margin: 0 auto 18px; animation: bob 6s ease-in-out infinite; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  position: relative; background: var(--paper-tint);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 62px 0 34px; margin-top: 40px;
}
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.site-footer h2 { font-size: 1.05rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; font-size: 0.98rem; }
.site-footer a:hover { color: var(--magenta-deep); text-decoration: underline; }
.footer-about p { color: var(--ink-muted); font-size: 0.96rem; max-width: 30em; }
/* Trader identity (art. 3:15d BW). Rendered on every page, above the
   copyright line. Plain, readable and never collapsed behind a link. */
.footer-legal { margin-top: 40px; }
.footer-legal address {
  font-style: normal; display: flex; flex-direction: column; gap: 5px;
  font-size: 0.92rem; color: var(--ink-muted); max-width: 34em;
}
.footer-legal address a { font-size: inherit; }

.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 2px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 0.9rem; color: var(--ink-muted);
}

/* --- Small screens ---------------------------------------------------- */

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .order-panel, .plan, .testimonial, .howto-step { padding: 24px; }
  .confirm-card { padding: 28px; border-radius: var(--r-lg); }
  .guarantee { padding: 26px; border-radius: var(--r-lg); }
  body { font-size: 16px; }
}

/* --- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .hero-art .tile, .blob, .hero-art::before { transform: none !important; animation: none !important; }
  .btn:hover, .plan:hover, .tile:hover, .testimonial:hover, .howto-step:hover,
  .style-card:hover, .species-chip:hover, .thumb:hover { transform: none !important; }
}

/* --- Free preview and reveal clip --------------------------------------- */

.preview-stage {
  border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--paper-tint);
  padding: 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.preview-stage[hidden] { display: none; }

.preview-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.preview-figure img {
  width: 100%; max-width: 340px; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--r-md); box-shadow: var(--shadow-md); background: var(--card);
}
.preview-figure figcaption { font-size: 0.9rem; color: var(--ink-muted); max-width: 34em; }

.preview-waiting { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0; }
.preview-waiting .spinner { border-color: var(--line-strong); border-top-color: var(--magenta); width: 30px; height: 30px; border-width: 3.5px; }
.preview-waiting p { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin: 0; }
.preview-waiting span { font-size: 0.9rem; color: var(--ink-muted); }

.preview-quota { font-size: 0.84rem; color: var(--ink-muted); }

.clip-frame {
  margin: 26px auto 0; max-width: 460px; aspect-ratio: 1/1;
  border-radius: var(--r-lg); overflow: hidden; background: var(--paper-tint);
  border: 2px solid var(--line); display: grid; place-items: center;
}
.clip-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-status { font-size: 0.95rem; color: var(--ink-muted); padding: 24px; margin: 0; }

/* Paired recovery actions under a failed preview: retrying and carrying on
   are given equal footing, so neither reads as the only way forward. */
.preview-actions {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 22px;
}
.preview-actions[hidden] { display: none; }
.preview-actions .btn { flex: 0 1 auto; }
.preview-actions-note {
  flex: 1 0 100%; margin: 0;
  font-size: 0.88rem; color: var(--ink-muted); line-height: 1.5;
}
.preview-actions-note[hidden] { display: none; }
.preview-actions .btn[disabled] { opacity: .5; }

/* De nudge onder de fototeller. Informatief, niet alarmerend: hij verschijnt
   wanneer iemand genoeg foto's heeft om door te gaan maar minder dan het
   aanbevolen aantal, en houdt niets tegen. */
.photo-nudge {
  margin-top: 12px;
  font-size: 0.94rem;
  line-height: 1.55;
}