/* ===========================================================
   Dr. Fixit — The Perfect Challenge
   Brand layer on top of Bootstrap 5.3.
   Palette sampled directly from the Dr. Fixit master logo.

   One look, not two. The brand constants and every surface the
   system is allowed to paint both live on :root, so a component
   never hard-codes a colour and the page is lit one way only.
   =========================================================== */

:root{
  /* --- brand, exact from logo --- */
  --df-yellow:#FFDE00;          /* logo field yellow          */
  --df-yellow-hi:#FFE23A;       /* hero field, top            */
  --df-yellow-deep:#FBCF00;     /* hero field, foot           */
  --df-yellow-soft:#FFF9D6;     /* derived tint               */
  --df-blue:#004681;            /* WATERPROOFING EXPERT bar   */
  --df-blue-lt:#1E6FBF;
  --df-blue-deep:#00305B;
  --df-blue-ink:#00294B;
  --df-black:#000000;

  /* --- ground, hue-locked to the brand blue --- */
  --df-navy:#00294B;
  --df-navy-deep:#00305B;
  --df-navy-mid:#0B2B50;

  /* --- reward --- */
  --df-foil:#F6C453;
  --df-foil-hi:#FFF0BE;

  /* --- semantic, kept clear of the accent --- */
  --df-ok:#22C55E;
  --df-bad:#FF4D5E;

  /* --- geometry, shared --- */
  --df-r-sm:12px;
  --df-r:16px;
  --df-r-lg:20px;
  --df-r-xl:26px;
  --bs-border-radius:14px;
  --bs-border-radius-lg:18px;
  --bs-body-font-family:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --bs-primary:#004681;
  --bs-primary-rgb:0,70,129;
  --bs-focus-ring-color:rgba(0,70,129,.28);
}

/* -----------------------------------------------------------
   ONE LOOK — the bold hero. Paper ground, navy ink, the logo
   yellow carrying the page head and the blue doing the work.
   There is no second theme: the campaign is lit one way, and
   every surface below resolves through this block alone.
   ----------------------------------------------------------- */
:root{
  color-scheme:light;

  --df-bg:#FFFFFF;
  --df-bg-deep:#F5F8FC;
  --df-elev:#FFFFFF;

  --df-text:#0C2039;
  --df-muted:#5A7290;
  --df-dim:#8A9DB4;
  --df-line:#EAF0F7;
  --df-line-2:#D9E4F0;

  --df-surface:#FFFFFF;
  --df-surface-2:#F4F8FD;
  --df-surface-3:#E7EFF9;
  --df-glass:#FFFFFF;
  --df-track:rgba(12,32,57,.13);
  --df-panel-bg:#FFFFFF;
  --df-role-bg:#FFFFFF;
  --df-plinth-bg:linear-gradient(180deg,#E6EFFA,#F7FAFE);

  /* The accent as *ink*. Logo yellow is a fill colour; on a pale ground it
     fails contrast, so every emphasised word resolves through the blue. */
  --df-ink-accent:#004681;
  --df-ink-accent-2:#00305B;
  --df-ink-ok:#12793B;
  --df-ink-bad:#BE1C2C;
  --df-ic-bg:#FFFFFF;
  --df-ic-line:#E4EDF7;

  /* the yellow field behind every page head */
  --df-sky:linear-gradient(180deg,var(--df-yellow-hi) 0%,var(--df-yellow) 40%,var(--df-yellow-deep) 100%);
  --df-drop:rgba(255,255,255,.85);

  --df-shadow-1:0 2px 10px -5px rgba(0,25,60,.22);
  --df-shadow-2:0 14px 30px -18px rgba(0,25,60,.32);
  --df-shadow-3:0 40px 80px -34px rgba(0,25,60,.45);

  --df-header-bg:#FFFFFF;
  --df-nav-bg:linear-gradient(180deg,#FFFFFF,#F1F6FC);
  --df-on-accent:#FFFFFF;

  --bs-body-bg:var(--df-bg);
  --bs-body-color:var(--df-text);
  --bs-border-color:var(--df-line);
  --bs-link-color:#004681;
  --bs-link-hover-color:#00305B;
  --bs-emphasis-color:var(--df-text);
  --bs-secondary-color:var(--df-muted);
  --bs-code-color:var(--df-ink-accent);
}

/* The one section that stands on the water rather than the paper: the
   blue the hero's wave pours into. It borrows the night-side neutrals
   below so its cards and their type read on a deep ground. */
.df-onnight{ background:var(--df-blue-deep); }

/* Panels that stay night-side against the daylight page — the film and its
   stand-in. They re-declare the neutrals locally so their children read
   correctly on a dark ground the rest of the site never uses. */
.df-onnight,
.df-player,
.df-placeholder{
  --df-text:#E9F0FA;
  --df-muted:#9DB4D2;
  --df-dim:#6B85A7;
  --df-line:rgba(157,180,210,.18);
  --df-line-2:rgba(157,180,210,.32);
  --df-surface:rgba(255,255,255,.055);
  --df-surface-2:rgba(255,255,255,.085);
  --df-surface-3:rgba(255,255,255,.13);
  --df-track:rgba(255,255,255,.14);
  --df-glass:rgba(255,255,255,.06);
  --df-elev:#0A2244;
  --df-panel-bg:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  --df-role-bg:linear-gradient(140deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  --df-plinth-bg:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));

  /* accent as *text*. Logo yellow is a fill colour; on a pale ground it
     fails contrast, so every yellow word resolves through this instead. */
  --df-ink-accent:var(--df-yellow);
  --df-ink-accent-2:#FFEE8A;
  --df-ink-ok:#6EE79B;
  --df-ink-bad:#FF9AA5;
  --df-ic-bg:linear-gradient(160deg,rgba(255,222,0,.2),rgba(0,70,129,.45));
  --df-ic-line:rgba(255,222,0,.28);
  color:var(--df-text);
}

html{ -webkit-text-size-adjust:100%; }
/* Bootstrap display utilities carry !important, so [hidden] must too. */
[hidden]{ display:none !important; }
body{
  background:var(--df-bg); color:var(--df-text);
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
}
h1,h2,h3,.df-display{
  font-family:"Archivo Black","Archivo",sans-serif; font-weight:400;
  letter-spacing:-.025em; line-height:1.04; text-wrap:balance; margin:0;
}
:focus-visible{ outline:3px solid var(--df-blue); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--df-yellow); color:var(--df-blue-ink); }
.df-main{ flex:1 0 auto; display:flex; flex-direction:column; }
/* Puts the remaining vertical space around the content instead of below it. */
.df-grow{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
/* A pass-through column, so .df-grow deeper down still has room to expand into. */
.df-stack{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }

/* ===========================================================
   1. THE SKY — the yellow field every page head sits on
   -----------------------------------------------------------
   The campaign's ground: a yellow gradient carrying the same two
   drawings the landing sheet does, so a step in the journey and
   the hero read as one field. The membrane below closes it off.
   =========================================================== */
.df-sky{ position:relative; overflow:hidden; }
/* The hero's own art, carried by every page head so a step in the
   journey and the landing sheet read as the same field: the bead
   cluster on the left, the town the film is set in on the right.
   The town is sized off the band's height so it always stands on
   its own baseline, capped so a full-height field does not turn it
   into a backdrop; the beads are sized off the width and clip at
   the edges, which is what beads do.
   Both are drawn into .df-sky itself rather than into an element,
   so a page gets them from the class alone — the .df-rain divs the
   markup still carries are the old weather and stay out of the way. */
.df-sky{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20620%27%3E%3Cg%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.34%27%20stroke%3D%27%23FFFFFF%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%272.4%27%3E%3Ccircle%20cx%3D%2786%27%20cy%3D%2796%27%20r%3D%2734%27%2F%3E%3Ccircle%20cx%3D%27168%27%20cy%3D%27176%27%20r%3D%2720%27%2F%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%27212%27%20r%3D%2714%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%27286%27%20r%3D%2727%27%2F%3E%3Ccircle%20cx%3D%2746%27%20cy%3D%27340%27%20r%3D%2710%27%2F%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%27368%27%20r%3D%2715%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%27430%27%20r%3D%2722%27%2F%3E%3Ccircle%20cx%3D%27180%27%20cy%3D%2786%27%20r%3D%2711%27%2F%3E%3Ccircle%20cx%3D%27238%27%20cy%3D%27248%27%20r%3D%278%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%27140%27%20r%3D%277%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23FFFFFF%27%20opacity%3D%27.9%27%3E%3Ccircle%20cx%3D%2774%27%20cy%3D%2784%27%20r%3D%278%27%2F%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%27168%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%27130%27%20cy%3D%27276%27%20r%3D%277%27%2F%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%27422%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left center/clamp(120px,26%,300px) auto no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20900%20420%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23C99A00%27%20stroke-width%3D%273.4%27%20opacity%3D%27.4%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M520%20400V150h160v250M520%20210h160M520%20270h160M520%20330h160M560%20150v250M600%20150v250M640%20150v250%27%2F%3E%3Cpath%20d%3D%27M700%20400V240h120v160M700%20290h120M700%20340h120%27%2F%3E%3Cpath%20d%3D%27M760%20240V60h-8M660%2078h230M760%2060l-100%2018M760%2060l150%2018M860%2078v56M860%20134h-30M845%20134v24%27%2F%3E%3Cpath%20d%3D%27M380%20400V210M430%20400V210M380%20245h50M380%20290h50M380%20335h50%27%2F%3E%3Cpath%20d%3D%27M150%20400V300h120v100M150%20340h120M190%20300v100M230%20300v100%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right bottom/auto clamp(120px,100%,420px) no-repeat,
    var(--df-sky);
}
.df-rain,.df-rain-slow{ display:none; }

/* droplets that bead and fall */
.df-drops{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.df-drops i{
  position:absolute; width:5px; height:5px; border-radius:50% 50% 55% 55%;
  background:var(--df-drop); animation:df-bead 3.4s ease-in infinite;
}
@keyframes df-bead{ 0%{transform:translateY(0) scale(.6);opacity:0} 18%{opacity:.9} 100%{transform:translateY(64px) scale(1.15);opacity:0} }

@media (prefers-reduced-motion:reduce){
  .df-drops i{ animation:none; }
}

/* ===========================================================
   2. THE MEMBRANE — the campaign's signature device
   -----------------------------------------------------------
   It used to be a yellow seam. On a yellow field it would be
   invisible, so it is now the shape that ends the field: the
   wave the page ground breaks through. Every head that is
   followed by white content closes on one of these.
   =========================================================== */
.df-membrane{
  position:relative; z-index:3; height:clamp(30px,4vw,62px);
  background:var(--df-yellow-deep);
}
.df-membrane::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0,120H1440V44C1180,114 980,20 720,62 460,104 250,20 0,74Z'/%3E%3C/svg%3E") 50% 100%/100% 100% no-repeat;
}
.df-membrane--thick{ height:clamp(44px,6vw,92px); }


/* ===========================================================
   3. LOGO — see section 24. The old CSS lockup is gone: every
   position now carries the supplied master artwork instead.
   =========================================================== */

/* ===========================================================
   4. THE BAR / FOOTER
   -----------------------------------------------------------
   There is no sticky header any more: the lockup rides the
   yellow field on every page, the way it does on the landing.
   What is left here is the bar's own grid and the crumb, step
   pips and back control that sit in it. See section 32.
   =========================================================== */
.df-crumb{ font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--df-muted); }
.df-crumb b{ color:var(--df-text); font-weight:800; }
.df-steps{ display:flex; gap:5px; align-items:center; }
.df-steps i{ width:24px; height:4px; border-radius:3px; background:rgba(0,41,75,.22); display:block; }
.df-steps i.on{ background:var(--df-blue); }
.df-footer{ border-top:1px solid var(--df-line); padding:1.4rem 0; font-size:.78rem; color:var(--df-dim); }
.df-footer a{ color:var(--df-muted); text-decoration:none; }
.df-footer a:hover{ color:var(--df-ink-accent); }

/* ===========================================================
   5. TYPE HELPERS
   =========================================================== */
.df-kicker{ font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--df-ink-accent); }
.df-kicker--mut{ color:var(--df-dim); }
.df-lede{ color:var(--df-muted); line-height:1.62; }
.df-tiny{ font-size:.78rem; color:var(--df-dim); line-height:1.55; }
.df-num{ font-family:"Archivo Black",sans-serif; font-variant-numeric:tabular-nums; }
.df-tabular{ font-variant-numeric:tabular-nums; }
.df-h1{ font-size:clamp(2.1rem,5.4vw,3.6rem); }
.df-h2{ font-size:clamp(1.6rem,3.6vw,2.4rem); }
.df-h3{ font-size:clamp(1.15rem,2.2vw,1.5rem); }
.df-hl{ background:linear-gradient(180deg,transparent 76%,var(--df-yellow) 76%,var(--df-yellow) 97%,transparent 97%); padding:0 .06em; }
.df-y{ color:var(--df-ink-accent); }
.df-mut{ color:var(--df-muted); }

/* ===========================================================
   6. SURFACES
   =========================================================== */
.df-card{ background:var(--df-glass); border:1px solid var(--df-line); border-radius:18px; padding:1.25rem; }
.df-card--solid{ background:var(--df-elev); }
.df-panel{
  background:var(--df-panel-bg);
  border:1px solid var(--df-line-2); border-radius:24px;
}
.df-chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border-radius:20px;
  background:var(--df-surface-2); border:1px solid var(--df-line-2);
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--df-muted);
}
/* The one chip that lands on the yellow field, so it cannot be a yellow tint. */
.df-chip--y{ background:#fff; border-color:rgba(0,70,129,.35); color:var(--df-blue); box-shadow:var(--df-shadow-1); }
.df-chip--ok{ background:#E7F8ED; border-color:rgba(34,197,94,.5); color:var(--df-ink-ok); }
.df-chip--bad{ background:#FFECEE; border-color:rgba(255,77,94,.5); color:var(--df-ink-bad); }

/* ===========================================================
   7. BUTTONS
   =========================================================== */
.btn{ font-weight:800; letter-spacing:.01em; border-radius:14px; padding:.85rem 1.4rem; }
.btn-df{
  background:var(--df-blue); color:#fff; border:0;
  box-shadow:0 14px 30px -16px rgba(0,70,129,.85);
  transition:transform .12s, box-shadow .12s, background-color .12s;
}
.btn-df:hover{ background:#00538F; color:#fff; box-shadow:0 16px 32px -14px rgba(0,70,129,.9); }
.btn-df:active{ transform:translateY(2px); box-shadow:0 8px 18px -14px rgba(0,70,129,.9); }
.btn-df:disabled,.btn-df.disabled{ background:#D9E4F0; color:#8A9DB4; box-shadow:none; opacity:1; }
/* The second way out: white, on the blue's own outline. */
.btn-df-ghost{ background:#fff; color:var(--df-blue); border:1.5px solid var(--df-line-2); box-shadow:var(--df-shadow-1); }
.btn-df-ghost:hover{ background:#F4F8FD; color:var(--df-blue); border-color:rgba(0,70,129,.45); }
/* WhatsApp — the badge's own way out, in WhatsApp's green so it reads as
   the thing it is. */
.btn-df-wa{
  background:#25D366; color:#0B3D22; border:0;
  box-shadow:0 14px 30px -16px rgba(37,211,102,.9);
  transition:transform .12s, box-shadow .12s, background-color .12s;
}
.btn-df-wa:hover{ background:#1EBE5A; color:#0B3D22; box-shadow:0 16px 32px -14px rgba(37,211,102,.95); }
.btn-df-wa:active{ transform:translateY(2px); box-shadow:0 8px 18px -14px rgba(37,211,102,.9); }
.btn-df-wa:disabled,.btn-df-wa.disabled{ background:#CFEBD9; color:#6E8C7B; box-shadow:none; opacity:1; }
.btn-df-lg{ padding:1rem 1.7rem; font-size:1.05rem; }
.df-dock{ padding-top:1.25rem; }
@media (max-width:767.98px){
  .df-dock--sticky{
    position:sticky; bottom:0; z-index:1020; padding:1.5rem 0 1rem;
    background:linear-gradient(180deg,transparent,var(--df-bg) 34%);
  }
}

/* ===========================================================
   8. ROLE CHOICE
   =========================================================== */
.df-role{
  position:relative; display:flex; align-items:center; gap:1rem; width:100%; height:100%;
  text-align:left; text-decoration:none; color:var(--df-text); overflow:hidden;
  background:var(--df-role-bg);
  border:1px solid var(--df-line-2); border-radius:20px; padding:1.15rem 1.1rem;
  transition:border-color .15s, transform .12s;
}
.df-role::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--df-blue); transform:scaleY(0); transform-origin:top; transition:transform .2s; }
.df-role:hover,.df-role:focus-visible,.df-role.active{ border-color:rgba(0,70,129,.6); color:var(--df-text); }
.df-role.active{ background:#F4F8FD; }
.df-role:hover::before,.df-role.active::before{ transform:scaleY(1); }
.df-role:active{ transform:scale(.99); }
.df-role-ic{ width:56px; height:56px; border-radius:16px; flex:0 0 auto; display:grid; place-items:center; background:var(--df-ic-bg); border:1px solid var(--df-ic-line); box-shadow:0 12px 24px -18px rgba(0,40,80,.55); }
.df-role-ic svg{ width:27px; height:27px; stroke:var(--df-ink-accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.df-role-t{ font-family:"Archivo Black",sans-serif; font-size:1.1rem; letter-spacing:-.01em; }
.df-role-s{ font-size:.82rem; color:var(--df-muted); margin-top:.15rem; }
.df-role-chev{ margin-left:auto; color:var(--df-dim); font-size:1.3rem; line-height:1; }

/* ===========================================================
   9. FORMS
   =========================================================== */
.df-label{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--df-muted); margin-bottom:.5rem; }
.form-control.df-input{
  background:var(--df-surface); border:1.5px solid var(--df-line-2); border-radius:14px;
  padding:.95rem 1rem; color:var(--df-text); font-size:1.1rem; font-weight:700; letter-spacing:.06em;
}
.form-control.df-input::placeholder{ color:#54688A; letter-spacing:.02em; font-weight:600; }
.form-control.df-input:focus{ background:#fff; border-color:var(--df-blue); color:var(--df-text); box-shadow:0 0 0 .2rem rgba(0,70,129,.16); }
.df-help{ font-size:.78rem; color:var(--df-dim); margin-top:.5rem; }
/* The same line, saying what is wrong with what was just typed. */
.df-help--bad{ color:var(--df-bad); font-weight:700; }

/* ===========================================================
   10. LANGUAGE TILES
   =========================================================== */
.df-lang{
  position:relative; display:block; width:100%; height:100%; text-align:left; text-decoration:none;
  background:var(--df-surface); border:1.5px solid var(--df-line); border-radius:16px;
  padding:1rem .9rem; color:var(--df-text); transition:.15s;
}
.df-lang:hover{ border-color:var(--df-line-2); background:var(--df-surface-2); color:var(--df-text); }
.df-lang-n{ display:block; font-family:"Archivo Black","Archivo",sans-serif; font-size:1.3rem; line-height:1.2; }
.df-lang-e{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--df-muted); margin-top:.3rem; }
.df-lang.active{ border-color:var(--df-yellow-deep); background:rgba(255,222,0,.18); }
.df-lang.active .df-lang-e{ color:var(--df-ink-accent); }
.df-lang-tick{ position:absolute; top:.7rem; right:.7rem; width:19px; height:19px; border-radius:50%; background:var(--df-yellow); display:none; place-items:center; }
.df-lang.active .df-lang-tick{ display:grid; }
.df-lang-tick svg{ width:11px; height:11px; stroke:#14100A; stroke-width:3.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ===========================================================
   11. VIDEO PLAYER
   =========================================================== */
.df-player{
  position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/9;
  background:radial-gradient(90% 120% at 30% 20%, #123A6B, #040E1F);
  border:1px solid var(--df-line-2);
}
.df-player iframe,.df-player video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.df-player-face{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; text-align:center; padding:1rem; }
.df-player-drip{ position:absolute; inset:0; opacity:.26; background-image:repeating-linear-gradient(76deg,rgba(200,224,255,.5) 0 1px,transparent 1px 9px); animation:df-rain 1.4s linear infinite; }
.df-play{
  width:72px; height:72px; border-radius:50%; border:0; background:var(--df-yellow);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 0 0 12px rgba(255,222,0,.16), 0 12px 30px -8px rgba(0,0,0,.8);
  transition:transform .15s, box-shadow .15s;
}
.df-play:hover{ transform:scale(1.06); box-shadow:0 0 0 16px rgba(255,222,0,.2), 0 12px 30px -8px rgba(0,0,0,.8); }
.df-play svg{ width:26px; height:26px; fill:#14100A; margin-left:4px; }
.df-player-bar{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:2.2rem .9rem .7rem; background:linear-gradient(180deg,transparent,rgba(0,0,0,.85)); }
.df-track{ height:5px; border-radius:3px; background:rgba(255,255,255,.24); overflow:hidden; }
.df-track i{ display:block; height:100%; width:0; background:var(--df-yellow); border-radius:3px; transition:width .25s linear; }
.df-player-meta{ display:flex; justify-content:space-between; margin-top:.5rem; font-size:.72rem; font-weight:700; color:#D8E4F5; font-variant-numeric:tabular-nums; }
.df-noskip{ position:absolute; top:.75rem; right:.75rem; z-index:4; }

/* Full screen. Two routes: the real Fullscreen API where the browser has
   it, and a fixed-to-the-viewport stand-in for iOS Safari, which refuses
   requestFullscreen on anything that is not a <video>. Both land on the
   same painted state, so the styling is written once against
   :fullscreen and .is-fs together. */
.df-fs{
  position:absolute; top:.75rem; left:.75rem; z-index:4;
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  border:1px solid rgba(233,240,250,.28); background:rgba(4,14,31,.55);
  color:#E9F0FA; cursor:pointer; backdrop-filter:blur(6px);
  transition:background .15s, border-color .15s, transform .15s;
}
.df-fs:hover{ background:rgba(4,14,31,.8); border-color:rgba(255,222,0,.6); transform:scale(1.05); }
.df-fs svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.df-fs .df-fs-out{ display:none; }
.df-player:fullscreen .df-fs .df-fs-in,
.df-player.is-fs .df-fs .df-fs-in{ display:none; }
.df-player:fullscreen .df-fs .df-fs-out,
.df-player.is-fs .df-fs .df-fs-out{ display:block; }

.df-player:fullscreen{
  width:100%; height:100%; max-width:none; aspect-ratio:auto; border-radius:0; border:0;
}
.df-player.is-fs{
  position:fixed; inset:0; z-index:1050; width:100vw; height:100dvh;
  aspect-ratio:auto; border-radius:0; border:0;
}
/* The bar and the two chips sit clear of a notch when the panel goes
   edge to edge. */
.df-player:fullscreen .df-player-bar,
.df-player.is-fs .df-player-bar{ padding:3rem 1.6rem 1.4rem; padding-bottom:max(1.4rem,env(safe-area-inset-bottom)); }
.df-player:fullscreen .df-fs,
.df-player:fullscreen .df-noskip,
.df-player.is-fs .df-fs,
.df-player.is-fs .df-noskip{ top:max(1rem,env(safe-area-inset-top)); }
.df-player:fullscreen .df-scene-t,
.df-player.is-fs .df-scene-t{ font-size:clamp(1.4rem,4vw,3rem); }
.df-player:fullscreen .df-placeholder-in,
.df-player.is-fs .df-placeholder-in{ max-width:46ch; }

/* ===========================================================
   12. QUIZ
   =========================================================== */
.df-dial{ position:relative; width:66px; height:66px; flex:0 0 auto; }
.df-dial svg{ transform:rotate(-90deg); width:66px; height:66px; }
.df-dial circle{ fill:none; stroke-width:6; stroke-linecap:round; }
.df-dial .tr{ stroke:rgba(0,41,75,.2); }
.df-dial .pr{ stroke:var(--df-blue); transition:stroke-dashoffset .3s linear, stroke .3s; }
.df-dial.is-t1 .pr{ stroke:var(--df-blue); }
.df-dial.is-t2 .pr{ stroke:#1E6FBF; }
.df-dial.is-t3 .pr{ stroke:#C99A00; }
.df-dial.is-t0 .pr{ stroke:var(--df-dim); }
.df-dial b{ position:absolute; inset:0; display:grid; place-items:center; font-family:"Archivo Black",sans-serif; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.df-qsegs{ display:flex; gap:6px; }
.df-qsegs i{ flex:1; height:5px; border-radius:3px; background:rgba(0,41,75,.2); display:block; }
.df-qsegs i.done{ background:var(--df-blue); }
.df-qsegs i.now{ background:rgba(0,70,129,.45); }
.df-question{ font-size:clamp(1.25rem,2.6vw,1.9rem); line-height:1.25; }

.df-opt{
  position:relative; display:flex; align-items:center; gap:.9rem; width:100%; text-align:left;
  background:var(--df-surface); border:1.5px solid var(--df-line-2); border-radius:16px;
  padding:1rem 1.05rem; color:var(--df-text); font-size:1.02rem; font-weight:700;
  transition:background .16s, border-color .16s, opacity .16s; cursor:pointer;
}
.df-opt:hover:not(:disabled){ background:var(--df-surface-2); border-color:rgba(0,70,129,.45); }
.df-opt-k{
  width:32px; height:32px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--df-surface-2); border:1px solid var(--df-line-2);
  font-size:.8rem; font-weight:800; color:var(--df-muted);
}
.df-opt-mk{ margin-left:auto; width:24px; height:24px; border-radius:50%; display:none; place-items:center; flex:0 0 auto; }
.df-opt-mk svg{ width:13px; height:13px; stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.df-opt.is-right{ border-color:var(--df-ok); background:#E7F8ED; }
.df-opt.is-right .df-opt-k{ background:var(--df-ok); border-color:var(--df-ok); color:#04240F; }
.df-opt.is-right .df-opt-mk{ display:grid; background:var(--df-ok); }
.df-opt.is-right .df-opt-mk svg{ stroke:#04240F; }
.df-opt.is-wrong{ border-color:var(--df-bad); background:#FFECEE; animation:df-shake .34s; }
.df-opt.is-wrong .df-opt-k{ background:var(--df-bad); border-color:var(--df-bad); color:#2B0308; }
.df-opt.is-wrong .df-opt-mk{ display:grid; background:var(--df-bad); }
.df-opt.is-wrong .df-opt-mk svg{ stroke:#2B0308; }
.df-opt.is-mute{ opacity:.4; }
@keyframes df-shake{ 20%{transform:translateX(-6px)} 45%{transform:translateX(5px)} 70%{transform:translateX(-3px)} 100%{transform:translateX(0)} }
@media (prefers-reduced-motion:reduce){ .df-opt.is-wrong{ animation:none; } }

.df-verdict{ display:flex; align-items:flex-start; gap:.7rem; border-radius:16px; padding:1rem 1.05rem; font-size:.9rem; line-height:1.55; }
.df-verdict b{ display:block; font-family:"Archivo Black",sans-serif; font-weight:400; letter-spacing:0; font-size:1rem; margin-bottom:.15rem; }
.df-verdict-mk{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; margin-top:.42rem; }
.df-verdict--ok .df-verdict-mk{ background:var(--df-ok); box-shadow:0 0 0 4px rgba(34,197,94,.18); }
.df-verdict--no .df-verdict-mk{ background:var(--df-bad); box-shadow:0 0 0 4px rgba(255,77,94,.18); }
.df-verdict--ok{ background:#EDFAF2; border:1px solid rgba(34,197,94,.45); }
.df-verdict--ok b{ color:var(--df-ink-ok); }
.df-verdict--no{ background:#FFF1F2; border:1px solid rgba(255,77,94,.42); }
.df-verdict--no b{ color:var(--df-ink-bad); }
.df-countdown{ font-family:"Archivo Black",sans-serif; font-size:clamp(5rem,18vw,9rem); line-height:1; color:var(--df-blue); text-shadow:0 14px 30px rgba(0,70,129,.25); }

/* ===========================================================
   13. SCORE LEDGER
   =========================================================== */
.df-tally{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--df-line); border:1px solid var(--df-line); border-radius:18px; overflow:hidden; }
.df-tally > div{ background:var(--df-elev); padding:1rem .5rem; text-align:center; }
.df-tally b{ display:block; font-family:"Archivo Black",sans-serif; font-size:1.7rem; font-variant-numeric:tabular-nums; line-height:1; }
.df-tally span{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--df-muted); margin-top:.4rem; }

.df-ledger{ display:flex; flex-direction:column; }
.df-ledger-row{ display:flex; align-items:center; gap:.9rem; padding:.85rem 0; border-bottom:1px dashed var(--df-line); }
.df-ledger-row:last-child{ border-bottom:0; }
.df-ledger-t{ font-size:.95rem; font-weight:700; }
.df-ledger-s{ font-size:.76rem; color:var(--df-dim); margin-top:.1rem; }
.df-ledger-v{ margin-left:auto; font-family:"Archivo Black",sans-serif; font-size:1.1rem; font-variant-numeric:tabular-nums; color:var(--df-ink-accent); }
.df-ledger-row.is-zero .df-ledger-v{ color:var(--df-dim); }
.df-total{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.15rem; border-radius:18px;
  background:linear-gradient(100deg,rgba(255,222,0,.16),rgba(255,222,0,.04));
  border:1px solid rgba(255,222,0,.42);
}
.df-total span{ font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--df-ink-accent-2); }
.df-total b{ font-family:"Archivo Black",sans-serif; font-size:clamp(2rem,5vw,2.6rem); font-variant-numeric:tabular-nums; color:var(--df-ink-accent); line-height:1; }

.df-tier{ display:flex; align-items:center; gap:.7rem; font-size:.85rem; padding:.65rem .85rem; border-radius:12px; background:var(--df-surface); border:1px solid var(--df-line); color:var(--df-muted); }
.df-tier b{ margin-left:auto; font-family:"Archivo Black",sans-serif; font-size:.95rem; color:var(--df-muted); font-variant-numeric:tabular-nums; }
.df-tier.is-hit{ border-color:rgba(255,222,0,.55); background:rgba(255,222,0,.1); color:var(--df-text); }
.df-tier.is-hit b{ color:var(--df-ink-accent); }

/* ===========================================================
   14. BADGE — the frame the certificate sits in
   The certificate itself is not built here. It is one 1080x1920 PNG
   the server draws from the supplied artwork (see BadgeRenderService),
   and this is only the frame that holds it at whatever width the
   column has — on the badge page and on a shared badge alike.
   =========================================================== */
.df-cert-fit{
  position:relative; width:100%; max-width:430px; margin-inline:auto;
  aspect-ratio:1080/1920; overflow:hidden; border-radius:18px;
  box-shadow:0 26px 54px -26px rgba(0,0,0,.75);
}
/* When the drawing failed, the frame carries the apology instead. */
.df-cert-missing{
  position:absolute; inset:0; margin:0; display:grid; place-content:center;
  padding:1.4rem; text-align:center; font-size:.9rem; line-height:1.5;
  color:var(--df-muted); background:var(--df-surface); border:1px solid var(--df-line);
}

/* ===========================================================
   15. CELEBRATION
   =========================================================== */
.df-confetti{ position:fixed; inset:0; pointer-events:none; z-index:1040; }
/* The foil rosette. It survives the badge redesign because the
   congratulations screen still turns on it. */
.df-rosette{
  position:relative; width:108px; height:108px; margin:.6rem auto 0; border-radius:50%;
  background:conic-gradient(from 0deg,#C9963A,#FFF0BE 12%,#E0AE4C 25%,#FFF0BE 38%,#C9963A 50%,#FFF0BE 62%,#E0AE4C 75%,#FFF0BE 88%,#C9963A);
  display:grid; place-items:center; box-shadow:0 10px 26px -8px rgba(246,196,83,.7);
}
.df-rosette-in{ width:86px; height:86px; border-radius:50%; background:radial-gradient(circle at 34% 28%, #16447A, #071A38); border:1.5px solid rgba(255,240,190,.6); display:grid; place-items:center; }
.df-rosette-in svg{ width:38px; height:38px; fill:none; stroke:var(--df-foil-hi); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.df-burst{ position:relative; width:150px; height:150px; margin-inline:auto; display:grid; place-items:center; }
.df-burst-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(0,70,129,.35); animation:df-pulse 2.4s ease-out infinite; }
.df-burst-ring:nth-child(2){ animation-delay:.8s; }
.df-burst-ring:nth-child(3){ animation-delay:1.6s; }
@keyframes df-pulse{ 0%{transform:scale(.55);opacity:.9} 100%{transform:scale(1.5);opacity:0} }
@media (prefers-reduced-motion:reduce){ .df-burst-ring{ animation:none; opacity:.3; } }

/* ===========================================================
   16. LEADERBOARD
   =========================================================== */
.df-tabs{ display:inline-flex; gap:4px; padding:4px; background:#fff; border:1px solid var(--df-line); border-radius:14px; box-shadow:var(--df-shadow-1); }
.df-tab{
  border:0; background:transparent; color:var(--df-muted); font-weight:800; font-size:.88rem;
  letter-spacing:.04em; padding:.6rem 1.4rem; border-radius:11px; transition:.15s; cursor:pointer;
}
.df-tab.active{ background:var(--df-blue); color:#fff; }

/* The plinths are open-bottomed, so the podium carries its own floor line —
   it must not borrow the membrane for one. */
.df-podium{
  display:grid; grid-template-columns:1fr 1.18fr 1fr; align-items:end; gap:.7rem;
  border-bottom:3px solid var(--df-blue);
}
.df-pod{ position:relative; text-align:center; min-width:0; }
.df-pod-av{
  width:56px; height:56px; border-radius:50%; margin:0 auto .6rem; display:grid; place-items:center;
  font-family:"Archivo Black",sans-serif; font-size:1.1rem; color:#061A31;
  background:linear-gradient(160deg,#BFD0E6,#8098B8); border:2px solid rgba(255,255,255,.35);
}
.df-pod--1 .df-pod-av{ width:72px; height:72px; font-size:1.4rem; background:linear-gradient(160deg,var(--df-foil-hi),var(--df-foil) 55%,#C9963A); border-color:var(--df-foil-hi); box-shadow:0 0 0 6px rgba(246,196,83,.16); }
.df-pod-n{ font-size:.8rem; font-weight:800; color:var(--df-blue-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.df-pod-p{ font-family:"Archivo Black",sans-serif; font-size:.9rem; color:var(--df-ink-accent); font-variant-numeric:tabular-nums; margin-top:.1rem; }
.df-pod-plinth{
  margin-top:.6rem; border-radius:12px 12px 0 0; display:grid; place-items:center;
  background:#fff;
  border:1px solid rgba(0,70,129,.2); border-bottom:0; box-shadow:var(--df-shadow-1);
  font-family:"Archivo Black",sans-serif; font-size:1.35rem; color:#22507E;
}
.df-pod--1 .df-pod-plinth{ height:96px; background:var(--df-blue); border-color:var(--df-blue); color:#fff; }
.df-pod--2 .df-pod-plinth{ height:70px; }
.df-pod--3 .df-pod-plinth{ height:52px; }
.df-pod-crown{ position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:1.1rem; }

.df-lrow{ display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:15px; background:var(--df-surface); border:1px solid var(--df-line); }
.df-lrow-rk{ width:28px; flex:0 0 auto; text-align:center; font-family:"Archivo Black",sans-serif; font-size:1rem; color:var(--df-dim); font-variant-numeric:tabular-nums; }
.df-lrow-av{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:.8rem; font-weight:800; color:#061A31; background:linear-gradient(160deg,#BFD0E6,#8098B8); }
.df-lrow-txt{ flex:1 1 auto; min-width:0; }
.df-lrow-n{ display:block; font-size:.95rem; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.df-lrow-s{ display:block; font-size:.74rem; color:var(--df-dim); margin-top:.05rem; font-variant-numeric:tabular-nums; }
.df-lrow-p{ margin-left:auto; text-align:right; flex:0 0 auto; }
.df-lrow-p b{ display:block; font-family:"Archivo Black",sans-serif; font-size:1.05rem; color:var(--df-ink-accent); font-variant-numeric:tabular-nums; line-height:1.15; }
.df-lrow-p span{ display:block; font-size:.58rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--df-dim); }
.df-lrow.is-me{ background:linear-gradient(100deg,rgba(255,222,0,.16),rgba(255,222,0,.05)); border-color:rgba(255,222,0,.55); }
.df-lrow.is-me .df-lrow-rk{ color:var(--df-ink-accent); }
.df-lrow.is-me .df-lrow-av{ background:linear-gradient(160deg,var(--df-yellow-soft),var(--df-yellow-deep)); }
/* This is the one row the participant cares about — never truncate it. */
.df-lrow.is-me .df-lrow-n{ white-space:normal; overflow:visible; text-overflow:clip; }
.df-lrow.is-me{ align-items:flex-start; }
.df-lrow.is-me .df-lrow-rk,
.df-lrow.is-me .df-lrow-av,
.df-lrow.is-me .df-lrow-p{ margin-top:.1rem; }

/* ===========================================================
   17. NOTICES
   =========================================================== */
.df-notice{ display:flex; gap:1rem; padding:1.15rem; border-radius:18px; background:#FFF3F4; border:1px solid rgba(255,77,94,.4); box-shadow:var(--df-shadow-1); }
.df-notice-ic{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; background:#FFE1E4; }
.df-notice-ic svg{ width:20px; height:20px; stroke:var(--df-ink-bad); fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.df-notice b{ font-family:"Archivo Black",sans-serif; font-weight:400; color:var(--df-ink-bad); font-size:1.05rem; }

/* ===========================================================
   18. (was HERO CREATIVE) — the drawn quiz-card-and-rosette stage
   is gone with the landing rebuild. The hero is now sections 30
   and 31; nothing referenced .df-heroart any more.
   =========================================================== */

/* ===========================================================
   19. UTILITIES — declared last so they win over components
   =========================================================== */
.df-y{ color:var(--df-ink-accent); }
.df-mut{ color:var(--df-muted); }
.df-dimmed{ color:var(--df-dim); }
/* A value lifted out of a muted sentence — never an absolute white. */
.df-strong{ color:var(--df-text); }

/* ===========================================================
   20. PLAYER STAGE — real film, or a designed stand-in
   =========================================================== */
.df-player-stage{ position:absolute; inset:0; z-index:1; }
.df-player-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* The placeholder shown until Pidilite supplies the films. It has to look
   deliberate, because a plain navy rectangle for sixty seconds reads as broken. */
.df-placeholder{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:1.5rem;
  background:
    radial-gradient(120% 90% at 70% -10%, rgba(30,111,191,.5), transparent 60%),
    radial-gradient(90% 80% at 10% 110%, rgba(0,70,129,.55), transparent 60%),
    linear-gradient(160deg,#0C2A50,#050F22);
}
.df-placeholder-in{ position:relative; z-index:2; max-width:34ch; }
.df-scene-k{
  font-size:.6rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--df-yellow); margin-bottom:.6rem;
}
.df-scene-t{
  font-family:"Archivo Black",sans-serif; font-size:clamp(1.05rem,2.4vw,1.6rem);
  letter-spacing:-.02em; line-height:1.2; color:var(--df-text);
}
.df-scene-t.is-in{ animation:df-scene .5s ease-out both; }
@keyframes df-scene{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .df-scene-t.is-in{ animation:none; } }
.df-placeholder-note{ margin-top:1.1rem; }
.df-placeholder .df-logo{ margin:0 auto 1.1rem; }
.df-player.is-placeholder .df-player-drip{ opacity:.16; }

/* ===========================================================
   21. QR — a live code, with a labelled stand-in if it can't render
   =========================================================== */
.df-qr{
  width:52px; height:52px; border-radius:6px; flex:0 0 auto; overflow:hidden;
  background:repeating-conic-gradient(#E9F0FA 0% 25%, #061A31 0% 50%);
  background-size:8px 8px; border:2px solid #E9F0FA;
}
.df-qr.is-live{ background:#fff; padding:1px; }
.df-qr svg{ display:block; width:100%; height:100%; }

/* ===========================================================
   22. LEADERBOARD — viewing someone else's board
   =========================================================== */
.df-off-board{
  display:flex; align-items:flex-start; gap:.7rem; margin-top:.75rem;
  padding:.75rem .9rem; border-radius:12px; font-size:.8rem; line-height:1.5;
  background:rgba(30,111,191,.14); border:1px solid rgba(30,111,191,.42); color:var(--df-muted);
}
.df-off-board b{ color:var(--df-text); font-weight:800; }

/* ===========================================================
   23. QUIZ SCORE CHIP — replaces the duplicate logo in the header
   =========================================================== */
.df-scorechip{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  padding:.4rem .8rem; border-radius:12px; min-width:88px;
  background:#fff; border:1px solid rgba(0,70,129,.2); box-shadow:var(--df-shadow-1);
}
.df-scorechip span{
  font-size:.55rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--df-muted);
}
.df-scorechip b{
  font-family:"Archivo Black",sans-serif; font-size:1.25rem; line-height:1.1;
  color:var(--df-ink-accent); font-variant-numeric:tabular-nums;
}
@media (max-width:400px){
  .df-scorechip{ min-width:0; padding:.3rem .6rem; }
  .df-scorechip b{ font-size:1.05rem; }
}

/* ===========================================================
   24. THE MASTER LOGO — the real asset, at a size you can read
   -----------------------------------------------------------
   This replaced a CSS reproduction of the lockup. One artwork,
   four heights, so header, certificate, film stand-in and the
   admin sign-in all show the same mark.
   =========================================================== */
.df-logo{
  display:block; width:auto; height:var(--df-logo-h,44px);
  image-rendering:auto; -webkit-user-drag:none; user-select:none;
}
.df-logo--sm{ --df-logo-h:38px; }
.df-logo--lg{ --df-logo-h:74px; }
.df-logo--xl{ --df-logo-h:110px; }
.df-logo-link{ display:inline-flex; align-items:center; flex:0 0 auto; border-radius:8px; }
.df-logo-link:focus-visible{ outline-offset:5px; }
@media (min-width:768px){ .df-logo{ --df-logo-h:52px; } .df-logo--sm{ --df-logo-h:46px; } .df-logo--lg{ --df-logo-h:96px; } .df-logo--xl{ --df-logo-h:150px; } }

/* ===========================================================
   25. HEADER BAR — one grid for every page
   =========================================================== */
.df-bar{ display:flex; align-items:center; gap:.75rem; min-height:56px; }
.df-bar-end{ margin-left:auto; display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.df-bar-sep{ width:1px; align-self:stretch; margin:.35rem .15rem; background:var(--df-line-2); flex:0 0 auto; }
.df-back{
  display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 auto;
  border-radius:12px; border:1px solid var(--df-line-2); background:var(--df-surface-2);
  color:var(--df-text); text-decoration:none; font-size:1.15rem; line-height:1;
  transition:background .15s, border-color .15s, transform .12s;
}
.df-back:hover{ background:var(--df-surface-3); color:var(--df-text); border-color:var(--df-line-2); }
.df-back:active{ transform:scale(.94); }

/* ===========================================================
   27. IDENTITY — who is signed in, on every page after verify
   =========================================================== */
.df-id{
  display:inline-flex; align-items:center; gap:.6rem; max-width:min(56vw,320px);
  padding:.32rem .7rem .32rem .32rem; border-radius:999px;
  background:var(--df-surface-2); border:1px solid var(--df-line-2);
  color:var(--df-text); text-align:left; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.df-id:hover{ background:var(--df-surface-3); border-color:rgba(255,222,0,.5); }
.df-id-av{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-family:"Archivo Black",sans-serif; font-size:.78rem; color:#14100A;
  background:linear-gradient(160deg,var(--df-yellow-soft),var(--df-yellow) 55%,var(--df-yellow-deep));
}
.df-id-txt{ min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.df-id-n{ font-size:.82rem; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.df-id-s{ font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--df-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:575.98px){
  .df-id{ padding:.28rem; gap:0; }
  .df-id .df-id-txt{ display:none; }
}

/* The panel the chip opens — the full record, and the way out of it. */
.df-idpop{
  position:absolute; top:calc(100% + .5rem); right:0; z-index:1060; width:min(310px,calc(100vw - 2rem));
  background:var(--df-elev); border:1px solid var(--df-line-2); border-radius:var(--df-r-lg);
  box-shadow:var(--df-shadow-2); padding:1rem; text-align:left;
}
.df-idpop[hidden]{ display:none !important; }
.df-idpop-h{ display:flex; align-items:center; gap:.7rem; }
.df-idpop-h .df-id-av{ width:44px; height:44px; font-size:1rem; }
.df-idpop-n{ font-family:"Archivo Black",sans-serif; font-size:1rem; letter-spacing:-.01em; line-height:1.2; }
.df-idpop-r{ font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--df-ink-accent); margin-top:.2rem; }
.df-idpop-rows{ margin-top:.9rem; border-top:1px dashed var(--df-line); }
.df-idpop-row{ display:flex; gap:1rem; align-items:baseline; padding:.5rem 0; border-bottom:1px dashed var(--df-line); }
.df-idpop-row:last-child{ border-bottom:0; }
.df-idpop-row dt{ font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--df-dim); flex:0 0 102px; margin:0; }
.df-idpop-row dd{ margin:0; margin-left:auto; text-align:right; font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; word-break:break-word; }
.df-idpop-out{ display:block; width:100%; margin-top:.9rem; }
.df-bar-end{ position:relative; }

/* ===========================================================
   28. POLISH PASSES
   =========================================================== */
.df-card{ transition:border-color .18s, transform .18s, box-shadow .18s; }
.df-card--hover:hover{ transform:translateY(-3px); border-color:var(--df-line-2); box-shadow:var(--df-shadow-2); }
.df-step-n{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center; margin-bottom:.9rem;
  font-family:"Archivo Black",sans-serif; font-size:.95rem; color:#14100A;
  background:linear-gradient(160deg,var(--df-yellow-soft),var(--df-yellow) 60%,var(--df-yellow-deep));
}
.df-panel{ box-shadow:var(--df-shadow-2); }
.df-role{ box-shadow:var(--df-shadow-1); }
.df-role:hover{ transform:translateY(-2px); box-shadow:var(--df-shadow-2); }
.df-role:active{ transform:translateY(0) scale(.99); }

/* A paper ground wants edge definition a glass panel never needed. */
.df-card,.df-lrow{ box-shadow:var(--df-shadow-1); }
.form-control.df-input::placeholder{ color:#93A7C0; }
.df-tab.active{ box-shadow:0 6px 16px -10px rgba(0,70,129,.8); }
.df-total{ background:linear-gradient(100deg,rgba(255,222,0,.34),rgba(255,222,0,.12)); border-color:rgba(232,162,0,.6); }
.df-lrow.is-me{ background:linear-gradient(100deg,rgba(255,222,0,.3),rgba(255,222,0,.1)); border-color:rgba(232,162,0,.6); }
.df-hl{ background:linear-gradient(180deg,transparent 74%,var(--df-yellow) 74%,var(--df-yellow) 97%,transparent 97%); }

/* The narrowest handsets: the bar keeps back, mark and identity. */
@media (max-width:400px){
  .df-bar{ gap:.45rem; }
  .df-logo--sm{ --df-logo-h:34px; }
  .df-back{ width:34px; height:34px; }
}

/* ===========================================================
   29. THE BRAND LOCKUP — Pidilite alongside Dr. Fixit
   -----------------------------------------------------------
   The header used to carry the Dr. Fixit mark alone on a night
   sky. On the yellow field it needs a white plate to sit on,
   and the campaign is a Pidilite programme, so the parent mark
   travels with it.
   =========================================================== */
.df-lock{
  display:inline-flex; align-items:center; gap:clamp(.6rem,2vw,1.1rem); flex:0 0 auto;
  background:#fff; padding:.5rem clamp(.7rem,2vw,1.35rem); border-radius:16px;
  box-shadow:0 12px 28px -18px rgba(0,40,80,.5); text-decoration:none;
}
.df-lock-pid{ height:clamp(22px,4vw,34px); width:auto; display:block; }
.df-lock-sep{ width:1px; align-self:stretch; margin:.15rem 0; background:rgba(0,41,75,.22); flex:0 0 auto; }
.df-lock .df-logo{ --df-logo-h:clamp(28px,5vw,44px); }
.df-lock:focus-visible{ outline-offset:5px; }
/* On the landing field the lockup is the page's only mark, so it runs at
   the sheet's full size rather than the header bar's reduced one. */
.df-hero .df-lock{ gap:clamp(.7rem,2vw,18px); padding:10px clamp(12px,2vw,22px); }
.df-hero .df-lock-pid{ height:clamp(26px,4vw,44px); }
.df-hero .df-lock .df-logo{ --df-logo-h:clamp(34px,6vw,56px); }

/* The way back in, for somebody who has played before. */
.df-login{
  display:inline-flex; align-items:center; gap:.55rem; flex:0 0 auto; text-decoration:none;
  font-size:.82rem; font-weight:800; letter-spacing:.06em;
  padding:.72rem 1.15rem; border-radius:12px;
  background:#fff; color:var(--df-blue); border:0;
  box-shadow:0 10px 24px -16px rgba(0,40,80,.6);
  transition:transform .12s, box-shadow .12s;
}
.df-login:hover{ color:var(--df-blue); box-shadow:0 12px 26px -14px rgba(0,40,80,.7); }
.df-login svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:575.98px){ .df-login span{ display:none; } .df-login{ padding:.72rem .85rem; } }

/* ===========================================================
   30. THE HERO — the yellow field, and what stands on it
   -----------------------------------------------------------
   One screen that has to say what the challenge is and open
   the only door a signed-out visitor can use. The art is four
   SVG layers behind the copy: a white wave off the top, a
   skyline drawn in the field's own shadow, a drift of beads,
   and the blue water the page settles into.
   =========================================================== */
.df-hero{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--df-sky);
}
.df-hero-art{ position:absolute; inset:0; pointer-events:none; z-index:0; }
/* The mockup's own frame: 880 tall, 54px of air at the sides, the copy
   column a shade wider than the card's. Everything below is that sheet,
   with the fixed values kept as the ceiling of a clamp so the same
   composition survives down to a handset. */
.df-hero{ min-height:880px; }
.df-hero-grid{ position:relative; z-index:3; }
/* The bar sits above the working sheet, not level with it: the identity
   popup drops out of the bar and has to clear whatever card is under it. */
.df-hero-top{
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; row-gap:.6rem;
  padding:22px clamp(18px,4vw,54px) 0;
}

/* Both waves span the full field: an <svg> with an intrinsic ratio would
   otherwise size itself off its own viewBox and leave the edge bare. */
.df-hero-wtop{ inset:0 0 auto; width:100%; height:clamp(56px,8vw,120px); z-index:1; }
.df-hero-wbot{ inset:auto 0 0; width:100%; height:clamp(140px,22vw,280px); z-index:1; }
/* The town the film is set in, drawn in the field's own deeper yellow. */
/* Both are sized as a share of the field, uncapped, so the town and the
   beads keep the sheet's proportions on a wide screen instead of
   shrinking into a corner. */
.df-hero-site{ inset:auto 0 clamp(90px,13vw,170px) auto; width:58%; z-index:0; opacity:.5; }
.df-hero-bub{ inset:clamp(90px,13vw,150px) auto 0 0; width:32%; z-index:1; opacity:.85; }
@media (max-width:767.98px){ .df-hero-site,.df-hero-bub{ display:none; } }

.df-hero-grid{
  flex:1 1 auto; display:grid; gap:clamp(2rem,4vw,56px); align-items:center;
  width:100%; max-width:1440px; margin-inline:auto;
  padding:26px clamp(18px,4vw,54px) clamp(9rem,18vw,150px);
}
@media (min-width:992px){ .df-hero-grid{ grid-template-columns:1.08fr .92fr; } }

.df-hero-kick{
  font-size:clamp(13px,1.3vw,15px); font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--df-blue-deep); margin:0 0 10px;
}
.df-hero-h1{ margin:0 0 20px; line-height:1.02; letter-spacing:-.015em; }
.df-hero-h1 .a{ display:block; font-size:clamp(2.4rem,6vw,60px); color:var(--df-blue); }
.df-hero-h1 .b{ display:block; font-size:clamp(1.8rem,4.4vw,44px); color:var(--df-blue-ink); margin-top:4px; }
.df-hero-sub{
  font-size:clamp(15px,1.6vw,17px); line-height:1.62; font-weight:500; color:#0F3055;
  max-width:44ch; margin:0 0 34px;
}

/* What the next three minutes hold, as three marks rather than a list. */
.df-feats{ display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,42px); }
.df-feat{ text-align:center; max-width:150px; }
.df-feat-ic{
  width:56px; height:56px; margin:0 auto 10px; border-radius:16px; display:grid; place-items:center;
  background:#fff; box-shadow:0 12px 24px -18px rgba(0,40,80,.55);
}
.df-feat-ic svg{ width:28px; height:28px; fill:none; stroke:var(--df-blue); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.df-feat b{ display:block; font-size:15px; font-weight:800; color:var(--df-blue-ink); margin-bottom:2px; }
/* The caption only. A bare `.df-feat span` also matched the icon tile,
   whose display:grid it then beat on specificity — which is what was
   dropping every glyph to the top of its box. */
.df-feat b + span{ display:block; font-size:12.5px; font-weight:500; color:#22507E; }

/* ===========================================================
   31. THE WELCOME CARD — the single door onto the challenge
   =========================================================== */
.df-welcome{
  background:#fff; border-radius:22px; padding:30px clamp(20px,3vw,36px);
  width:100%; max-width:440px; justify-self:center; text-align:center; position:relative;
  box-shadow:var(--df-shadow-3),0 2px 0 rgba(0,25,60,.05);
}
.df-welcome-badge{
  width:clamp(118px,22vw,150px); aspect-ratio:1; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 50% 38%,var(--df-yellow-soft) 0%,#fff 62%);
  border:3px solid var(--df-yellow); box-shadow:0 12px 26px -16px rgba(0,70,129,.5);
}
.df-welcome-badge::after{
  content:""; position:absolute; inset:-11px; border-radius:50%;
  border:2px dashed rgba(0,70,129,.28);
}
.df-welcome-badge .df-logo{ --df-logo-h:auto; width:72%; height:auto; }
.df-welcome h2{ margin:0 0 6px; font-size:clamp(1.7rem,3.2vw,31px); color:var(--df-blue); }
.df-welcome-q{ margin:0 0 8px; font-size:17px; font-weight:800; color:var(--df-text); }
.df-welcome-s{ margin:0 0 22px; font-size:14.5px; font-weight:500; color:var(--df-muted); }
.df-welcome .btn{ width:100%; }
.df-welcome .btn{ padding:17px 20px; font-size:16px; font-weight:900; letter-spacing:.06em; }
.df-welcome-best{ margin:16px 0 0; font-size:14px; font-weight:700; color:var(--df-blue); }
.df-proof{
  margin:12px 0 0; padding-top:13px; border-top:1px solid var(--df-line);
  display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap;
  font-size:12.5px; font-weight:600; color:#6B839F;
}
.df-proof svg{ width:16px; height:16px; fill:none; stroke:var(--df-blue); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.df-proof b{ color:var(--df-blue); }
.df-welcome-note{ margin:9px 0 0; font-size:11.5px; font-weight:600; color:var(--df-dim); }

/* ===========================================================
   32. THE SHEET — the landing's frame, carried by every page
   -----------------------------------------------------------
   The journey used to be a sticky bar over a short yellow head
   that gave way to a white page. It is now one composition on
   every screen, the landing's: the white wave off the top, the
   bead cluster, the town, and the blue water the page settles
   into — all four drawn straight into the background, so a page
   gets the whole frame from one class and none of them can
   drift apart. The lockup rides the field; the working content
   sits on white over it.
   =========================================================== */
.df-sheet{
  position:relative; overflow:hidden; flex:1 0 auto;
  display:flex; flex-direction:column; min-height:880px;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%23FFFFFF%27%20d%3D%27M0%2C0H1440V34C1180%2C104%20980%2C10%20720%2C52%20460%2C94%20250%2C10%200%2C64Z%27%2F%3E%3C%2Fsvg%3E") top center/100% clamp(56px,8vw,120px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%20620%27%3E%3Cg%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.34%27%20stroke%3D%27%23FFFFFF%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%272.4%27%3E%3Ccircle%20cx%3D%2786%27%20cy%3D%2796%27%20r%3D%2734%27%2F%3E%3Ccircle%20cx%3D%27168%27%20cy%3D%27176%27%20r%3D%2720%27%2F%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%27212%27%20r%3D%2714%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%27286%27%20r%3D%2727%27%2F%3E%3Ccircle%20cx%3D%2746%27%20cy%3D%27340%27%20r%3D%2710%27%2F%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%27368%27%20r%3D%2715%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%27430%27%20r%3D%2722%27%2F%3E%3Ccircle%20cx%3D%27180%27%20cy%3D%2786%27%20r%3D%2711%27%2F%3E%3Ccircle%20cx%3D%27238%27%20cy%3D%27248%27%20r%3D%278%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%27140%27%20r%3D%277%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23FFFFFF%27%20opacity%3D%27.9%27%3E%3Ccircle%20cx%3D%2774%27%20cy%3D%2784%27%20r%3D%278%27%2F%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%27168%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%27130%27%20cy%3D%27276%27%20r%3D%277%27%2F%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%27422%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left 0 top clamp(90px,13vw,150px)/32% auto no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20900%20420%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23C99A00%27%20stroke-width%3D%273.4%27%20opacity%3D%27.4%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M520%20400V150h160v250M520%20210h160M520%20270h160M520%20330h160M560%20150v250M600%20150v250M640%20150v250%27%2F%3E%3Cpath%20d%3D%27M700%20400V240h120v160M700%20290h120M700%20340h120%27%2F%3E%3Cpath%20d%3D%27M760%20240V60h-8M660%2078h230M760%2060l-100%2018M760%2060l150%2018M860%2078v56M860%20134h-30M845%20134v24%27%2F%3E%3Cpath%20d%3D%27M380%20400V210M430%20400V210M380%20245h50M380%20290h50M380%20335h50%27%2F%3E%3Cpath%20d%3D%27M150%20400V300h120v100M150%20340h120M190%20300v100M230%20300v100%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right 0 bottom clamp(90px,13vw,170px)/58% auto no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20260%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%231E6FBF%27%20opacity%3D%27.95%27%20d%3D%27M0%2C118C250%2C58%20470%2C168%20760%2C120%201040%2C74%201230%2C158%201440%2C110V260H0Z%27%2F%3E%3Cpath%20fill%3D%27%23004681%27%20d%3D%27M0%2C168C260%2C120%20470%2C214%20760%2C172%201040%2C132%201240%2C196%201440%2C160V260H0Z%27%2F%3E%3Cpath%20fill%3D%27%2300305B%27%20d%3D%27M0%2C214C280%2C182%20500%2C244%20780%2C216%201060%2C188%201250%2C228%201440%2C206V260H0Z%27%2F%3E%3C%2Fsvg%3E") bottom center/100% clamp(140px,22vw,280px) no-repeat,
    var(--df-sky);
}
/* The two drawings are sized off the field's width, so they are the
   same size on a short step and on a long board — only the copy over
   them changes. On a handset there is no room for either. */
@media (max-width:767.98px){
  .df-sheet{
    background:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%23FFFFFF%27%20d%3D%27M0%2C0H1440V34C1180%2C104%20980%2C10%20720%2C52%20460%2C94%20250%2C10%200%2C64Z%27%2F%3E%3C%2Fsvg%3E") top center/100% clamp(56px,8vw,120px) no-repeat,
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20260%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%231E6FBF%27%20opacity%3D%27.95%27%20d%3D%27M0%2C118C250%2C58%20470%2C168%20760%2C120%201040%2C74%201230%2C158%201440%2C110V260H0Z%27%2F%3E%3Cpath%20fill%3D%27%23004681%27%20d%3D%27M0%2C168C260%2C120%20470%2C214%20760%2C172%201040%2C132%201240%2C196%201440%2C160V260H0Z%27%2F%3E%3Cpath%20fill%3D%27%2300305B%27%20d%3D%27M0%2C214C280%2C182%20500%2C244%20780%2C216%201060%2C188%201250%2C228%201440%2C206V260H0Z%27%2F%3E%3C%2Fsvg%3E") bottom center/100% clamp(140px,22vw,280px) no-repeat,
      var(--df-sky);
  }
}

/* The bar. Same lockup, same air, same place as the landing's. */
.df-sheet > .df-hero-top{ z-index:20; }
.df-sheet .df-crumb{ color:var(--df-blue-deep); }
.df-sheet .df-bar-sep{ background:rgba(0,41,75,.28); align-self:center; height:26px; }

.df-sheet-body{
  position:relative; z-index:3; flex:1 1 auto;
  width:100%; max-width:1440px; margin-inline:auto;
  /* The water is up to 280px deep; the body clears it so nothing but a
     card's own corner ever floats over the blue. */
  padding:26px clamp(18px,4vw,54px) clamp(160px,21vw,268px);
}
/* Two columns where the working panel is narrow enough to sit beside
   the copy, the way the welcome card sits beside the headline. */
.df-sheet-grid{ display:grid; gap:clamp(2rem,4vw,56px); align-items:center; }
@media (min-width:992px){ .df-sheet-grid{ grid-template-columns:1.08fr .92fr; } }

/* The copy, on the field. The landing's kicker and headline exactly. */
.df-sheet-head{ margin-bottom:clamp(1.5rem,3vw,34px); }
.df-sheet-grid .df-sheet-head{ margin-bottom:0; }
.df-sheet-kick{
  font-size:clamp(13px,1.3vw,15px); font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--df-blue-deep); margin:0 0 10px;
}
.df-sheet-h1{
  margin:0; line-height:1.04; letter-spacing:-.018em;
  font-size:clamp(2rem,4.6vw,46px); color:var(--df-blue);
}
.df-sheet-h1 .b{ display:block; color:var(--df-blue-ink); }
.df-sheet-sub{
  font-size:clamp(15px,1.6vw,17px); line-height:1.62; font-weight:500; color:#0F3055;
  max-width:52ch; margin:14px 0 0;
}

/* The working surface: one white sheet over the field, whatever the
   page is asking for. Cards inside it step down to the pale surface
   so white does not stack on white. */
.df-sheet-card{
  background:#fff; border-radius:22px; padding:clamp(1.4rem,3vw,34px);
  box-shadow:var(--df-shadow-3),0 2px 0 rgba(0,25,60,.05);
}
.df-sheet-card--narrow{ width:100%; max-width:520px; justify-self:center; }
.df-sheet-card > :last-child{ margin-bottom:0; }
.df-sheet-card .df-card,
.df-sheet-card .df-panel{ background:var(--df-surface-2); box-shadow:none; }
.df-sheet-card .df-panel{ border-color:var(--df-line); }

/* The footer stands on the water rather than under it, so the page
   still ends the way the landing does. */
.df-sheet > .df-footer{
  position:relative; z-index:3; border-top:0; margin-top:auto;
  padding:0 clamp(18px,4vw,54px) 1.1rem; color:rgba(233,240,250,.65);
}
.df-sheet > .df-footer a{ color:rgba(233,240,250,.8); }
.df-sheet > .df-footer a:hover{ color:#fff; }
.df-sheet > .df-footer .container{ max-width:1440px; padding-inline:0; }

/* -----------------------------------------------------------
   Ink, on the field versus on the card
   -----------------------------------------------------------
   Copy that used to sit on paper now sits on yellow, where the
   pale neutrals disappear. Rather than re-colour every component,
   the neutrals are re-pointed for the field and handed straight
   back inside any white surface — so one component reads correctly
   in both places without knowing which it is in.
   ----------------------------------------------------------- */
.df-sheet-body{
  --df-text:#00294B;
  --df-muted:#22507E;
  --df-dim:#3D6491;
  --df-line:rgba(0,41,75,.22);
  --df-line-2:rgba(0,41,75,.3);
  color:var(--df-text);
}
.df-sheet-card,
.df-sheet-body .df-card,
.df-sheet-body .df-panel,
.df-sheet-body .df-role,
.df-sheet-body .df-lang,
.df-sheet-body .df-lrow,
.df-sheet-body .df-tally,
.df-sheet-body .df-opt,
.df-sheet-body .df-tier{
  --df-text:#0C2039;
  --df-muted:#5A7290;
  --df-dim:#8A9DB4;
  --df-line:#EAF0F7;
  --df-line-2:#D9E4F0;
  color:var(--df-text);
}

/* The way back. On the field it needs the same white plate the
   lockup and the login button stand on. */
.df-sheet .df-back{
  background:#fff; border:0; color:var(--df-blue);
  box-shadow:0 10px 24px -16px rgba(0,40,80,.6);
}
.df-sheet .df-back:hover{ background:#fff; color:var(--df-blue-deep); }

/* -----------------------------------------------------------
   Server-rendered controls
   -----------------------------------------------------------
   The picker and the answer list are now real form controls
   rather than scripted buttons, so the journey works with
   JavaScript off. These rules give the native input the tile
   it used to draw for itself.
   ----------------------------------------------------------- */

/* The language radio lives behind its tile — reachable by keyboard,
   invisible on screen. */
.df-lang-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.df-lang-input:checked + .df-lang{ border-color:var(--df-yellow-deep); background:rgba(255,222,0,.18); }
.df-lang-input:checked + .df-lang .df-lang-tick{ display:grid; }
.df-lang-input:checked + .df-lang .df-lang-e{ color:var(--df-ink-accent); }
.df-lang-input:focus-visible + .df-lang{ outline:3px solid var(--df-blue); outline-offset:3px; }

/* The answer text, so a long option wraps inside the row rather than
   pushing the tick off the end. */
.df-opt-t{ flex:1 1 auto; min-width:0; }

/* The role fork's cards are submit buttons inside their own form; the
   form must not add a box of its own around them. */
.df-role{ font:inherit; }

/* The identity chip and its panel share a positioning context. */
.df-id-wrap{ position:relative; }

/* A control that is waiting on the network says so. */
.btn.is-busy{ opacity:.75; cursor:progress; }

/* -----------------------------------------------------------
   The role fork, matched
   -----------------------------------------------------------
   The two cards sit in one row and must read as a pair. Equal
   height comes from the row; what was breaking it was the text
   column having no min-width, so a longer subtitle pushed the
   chevron out instead of wrapping inside the card.
   ----------------------------------------------------------- */
.df-role-txt{ flex:1 1 auto; min-width:0; }
.df-role-s{ text-wrap:pretty; }
/* A floor, so a one-line card and a two-line card still match when the
   row is not stretching them — a single card, or a narrow column. */
.df-role{ min-height:88px; }

/* An unclaimed podium place. Drawn rather than left blank, so a board with
   one or two finishers reads as "these spots are open" instead of broken. */
.df-pod.is-open{ opacity:.55; }
.df-pod.is-open .df-pod-av{
  background:transparent; border:2px dashed rgba(0,41,75,.35);
  color:var(--df-blue-deep); font-weight:800;
}
.df-pod.is-open .df-pod-n{ color:#22507E; font-weight:600; }
.df-pod.is-open .df-pod-plinth{
  background:rgba(255,255,255,.5); border-style:dashed; box-shadow:none; color:#22507E;
}