/* contest.css — SecurityForMe contest page (public LIGHT theme) v1
   Brand: navy #0B2D5A, gold #D4AF37, page bg #f0f3f8
   Breakpoints match the site: 760px (nav collapse) and 600px. */

.ct-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px 20px 72px;
}

/* ── Two-column body ──────────────────────────────────────── */
.ct-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}
.ct-main { min-width: 0; }
.ct-side { min-width: 0; position: sticky; top: 88px; }

/* ── The contest scenario card (the concrete "ask") ───────── */
.ct-scn-card {
    background: #fff;
    border: 1px solid #dde4ee;
    outline: 2px solid #D4AF37;
    outline-offset: 2px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
}
.ct-scn-ribbon {
    background: linear-gradient(90deg, #D4AF37, #f0cf6b);
    color: #0B2D5A;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 9px 16px;
    text-align: center;
}
.ct-scn-img { aspect-ratio: 16 / 9; background: #eef2f8; }
.ct-scn-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-scn-body { padding: 18px 20px 20px; }
.ct-scn-body h3 {
    margin: 0 0 10px;
    font-size: 1.12rem;
    line-height: 1.35;
    color: #0B2D5A;
}
.ct-scn-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.ct-chip {
    font-size: .74rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: #0B2D5A;
    color: #fff;
    white-space: nowrap;
}
.ct-chip-soft { background: #eef2f8; color: #3d4d63; font-weight: 600; }
.ct-scn-sum {
    margin: 0;
    color: #5b6b82;
    font-size: .9rem;
    line-height: 1.6;
}

/* ── Library depth strip ──────────────────────────────────── */
.ct-more {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid #dde4ee;
}
.ct-more h2 { font-size: 1.1rem; color: #0B2D5A; margin: 0 0 6px; }
.ct-more-sub { color: #5b6b82; font-size: .9rem; margin: 0 0 18px; }
.ct-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.ct-mini {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 11px;
    padding: 12px;
    opacity: .82;
}
.ct-mini img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 7px;
    display: block;
    filter: saturate(.7);
}
.ct-mini-ico { font-size: 1.5rem; text-align: center; }
.ct-mini-t {
    font-size: .8rem;
    font-weight: 600;
    color: #3d4d63;
    line-height: 1.4;
}
.ct-more-all { margin: 18px 0 0; font-size: .88rem; }
.ct-more-all a { color: #0B2D5A; font-weight: 700; }

/* ── Hero ─────────────────────────────────────────────────── */
.ct-hero { text-align: center; margin-bottom: 32px; }

.ct-eyebrow {
    display: inline-block;
    background: #fdf6e3;
    border: 1px solid #e8d9a8;
    color: #8a6d1f;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.ct-hero h1 {
    font-size: clamp(1.7rem, 5vw, 2.6rem);
    line-height: 1.2;
    color: #0B2D5A;
    margin: 0 0 20px;
}

.ct-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    background: #0B2D5A;
    color: #fff;
    border-radius: 12px;
    padding: 12px 22px;
    margin-bottom: 14px;
}
.ct-cd-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.ct-cd-clock {
    font-size: 1.5rem;
    font-weight: 800;
    color: #D4AF37;
    font-variant-numeric: tabular-nums;
}

.ct-entrants { color: #5b6b82; font-size: .9rem; }
.ct-entrants strong { color: #0B2D5A; }

/* ── Prize ────────────────────────────────────────────────── */
.ct-prize {
    background: linear-gradient(135deg, #fffdf5, #fdf6e3);
    border: 1px solid #e8d9a8;
    border-radius: 16px;
    padding: 26px;
    margin-bottom: 28px;
}
.ct-prize h2 { margin: 0 0 12px; font-size: 1.15rem; color: #8a6d1f; }
.ct-prize-body { color: #3d4d63; line-height: 1.65; }

/* ── Steps ────────────────────────────────────────────────── */
.ct-steps { margin-bottom: 28px; }
.ct-steps h2 { font-size: 1.05rem; color: #0B2D5A; margin: 0 0 14px; }
.ct-steps ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ct-steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid #dde4ee;
    border-radius: 12px;
    padding: 14px 18px;
    transition: border-color .15s, background .15s;
}
.ct-steps li.active { border-color: #D4AF37; background: #fffdf5; }
.ct-steps li.done   { opacity: .62; }
.ct-step-n {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #0B2D5A;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ct-steps li.active .ct-step-n { background: #D4AF37; color: #0B2D5A; }
.ct-steps li strong { display: block; color: #0B2D5A; font-size: .95rem; }
.ct-steps li em { display: block; color: #5b6b82; font-size: .84rem; font-style: normal; margin-top: 2px; }

/* ── Action panel ─────────────────────────────────────────── */
.ct-action {
    background: #fff;
    border: 1px solid #dde4ee;
    border-radius: 16px;
    padding: 28px;
    text-align: center;
}

.ct-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    padding: 12px 26px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s, transform .1s;
}
.ct-btn:hover  { opacity: .9; transform: translateY(-1px); }
.ct-btn:active { transform: none; }
.ct-btn-lg { padding: 15px 34px; font-size: 1rem; width: 100%; max-width: 380px; }
.ct-btn-primary   { background: #D4AF37; color: #0B2D5A; }
.ct-btn-secondary { background: #eef2f8; color: #0B2D5A; border: 1px solid #dde4ee; }

.ct-link { display: block; margin-top: 14px; color: #5b6b82; font-size: .88rem; }
.ct-sub  { color: #5b6b82; font-size: .88rem; margin-top: 12px; }

/* Sets expectations at the exact moment someone decides to sign up.
   Deliberately informational, not a warning — a red box here would read
   as a problem when it's just how the queue works. */
.ct-note {
    max-width: 460px;
    margin: 14px auto 0;
    background: #f7f9fc;
    border: 1px solid #dde4ee;
    border-radius: 10px;
    padding: 11px 15px;
    color: #3d4d63;
    font-size: .85rem;
    line-height: 1.55;
    text-align: start;
}

/* ── Score progress (in_progress state) ───────────────────── */
.ct-score { margin-bottom: 22px; text-align: start; }
.ct-score-row { display: flex; justify-content: space-between; font-size: .9rem; color: #3d4d63; margin-bottom: 8px; }
.ct-score-row strong { color: #0B2D5A; font-size: 1.1rem; }
.ct-score-track {
    position: relative;
    height: 10px;
    background: #e6ecf5;
    border-radius: 5px;
    overflow: hidden;
}
.ct-score-fill {
    height: 100%;
    background: linear-gradient(90deg, #0B2D5A, #D4AF37);
    border-radius: 5px;
    transition: width .5s ease;
}
.ct-score-goal {
    position: absolute;
    top: -3px;
    width: 2px; height: 16px;
    background: #0B2D5A;
}

.ct-qualified-badge {
    display: inline-block;
    background: #ecfdf3;
    border: 1px solid #86efac;
    color: #15803d;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 8px 20px;
    border-radius: 999px;
    margin-bottom: 22px;
}

/* ── Congratulations block ────────────────────────────────── */
/* Shown the moment they pass. Scroll target for #enter, so arriving from the
   quiz puts the entry form on screen instead of the top of the page. */
.ct-congrats {
    scroll-margin-top: 90px;      /* clears the sticky site header */
    background: linear-gradient(135deg, #f0fdf4, #ecfdf3);
    border: 1px solid #86efac;
    border-radius: 14px;
    padding: 24px 22px 20px;
    margin-bottom: 24px;
    animation: ct-pop .45s cubic-bezier(.2, .8, .3, 1);
}
.ct-congrats-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.ct-congrats h2 {
    margin: 0 0 8px;
    font-size: 1.3rem;
    color: #14532d;
}
.ct-congrats p {
    margin: 0 0 16px;
    color: #3f6212;
    font-size: .93rem;
    line-height: 1.6;
}
.ct-congrats .ct-qualified-badge { margin-bottom: 0; }

@keyframes ct-pop {
    from { opacity: 0; transform: scale(.94) translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Retake prompt — amber, not green. They have not succeeded yet, and a green
   panel here would read as "you are in" when they still have a step to do. */
.ct-retake {
    background: linear-gradient(135deg, #fffdf5, #fdf6e3);
    border-color: #e8d9a8;
}
.ct-retake h2 { color: #8a6d1f; }
.ct-retake p  { color: #6b5a24; }

/* Brief ring when scrolled to, so the eye lands in the right place. */
.ct-flash { animation: ct-pop .45s cubic-bezier(.2,.8,.3,1), ct-ring 1.6s ease .45s; }
@keyframes ct-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    30%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, .22); }
}

/* ── Entry form ───────────────────────────────────────────── */
.ct-form { text-align: start; }
.ct-field { margin-bottom: 14px; }
.ct-field label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: #3d4d63;
    margin-bottom: 5px;
}
.ct-field input,
.ct-field select,
.ct-skill input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dde4ee;
    border-radius: 9px;
    padding: 11px 13px;
    font-size: 16px;              /* 16px stops iOS zoom-on-focus */
    color: #0B2D5A;
    background: #fff;
    font-family: inherit;
}
.ct-field input:focus,
.ct-field select:focus,
.ct-skill input:focus { outline: 2px solid #D4AF37; outline-offset: 1px; border-color: #D4AF37; }

.ct-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ct-skill {
    background: #f7f9fc;
    border: 1px solid #dde4ee;
    border-radius: 12px;
    padding: 16px;
    margin: 18px 0;
}
.ct-skill label { display: block; font-size: .8rem; font-weight: 700; color: #3d4d63; margin-bottom: 6px; }
.ct-skill-q { margin: 0 0 10px; color: #0B2D5A; font-size: .95rem; }
.ct-skill-q strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.ct-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .86rem;
    color: #3d4d63;
    line-height: 1.5;
    margin-bottom: 10px;
    cursor: pointer;
}
.ct-check input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }
.ct-check a { color: #0B2D5A; }

.ct-form-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    border-radius: 9px;
    padding: 11px 14px;
    font-size: .88rem;
    margin: 14px 0;
}

.ct-form .ct-btn-lg { margin-top: 8px; }

/* ── Terminal states ──────────────────────────────────────── */
.ct-done { padding: 12px 0; }
.ct-done-icon { font-size: 3rem; margin-bottom: 10px; }
.ct-done h2 { color: #0B2D5A; margin: 0 0 10px; font-size: 1.4rem; }
.ct-done p { color: #5b6b82; margin: 0 0 8px; }
.ct-entry-id {
    display: inline-block;
    background: #eef2f8;
    color: #0B2D5A;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 6px 16px;
    border-radius: 8px;
    margin: 10px 0 18px !important;
}
.ct-winner-name { font-size: 1.3rem; font-weight: 800; color: #0B2D5A !important; }

.ct-empty { text-align: center; padding: 60px 20px; }
.ct-empty-icon { font-size: 3.5rem; margin-bottom: 12px; }
.ct-empty h1 { color: #0B2D5A; font-size: 1.4rem; margin-bottom: 20px; }

/* ── Rules ────────────────────────────────────────────────── */
.ct-rules {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #dde4ee;
}
.ct-rules h2 { font-size: 1rem; color: #0B2D5A; margin: 0 0 12px; }
.ct-rules .rich-content { color: #5b6b82; font-size: .86rem; line-height: 1.65; }

/* ── Actionable steps ─────────────────────────────────────
   Only the step you can actually do right now becomes a link. It gets a
   hover lift and an arrow so it reads as clickable; the others stay plain
   text, because a live link on a step you cannot do yet is worse than none. */
.ct-steps li.is-link { padding: 0; }
.ct-steps li.is-link .ct-step-a {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-radius: inherit;
    transition: background .15s, transform .12s;
}
.ct-steps li.is-link .ct-step-a:hover {
    background: rgba(212, 175, 55, .10);
    transform: translateX(2px);
    text-decoration: none;
}
.ct-step-go {
    margin-inline-start: auto;
    font-size: 1.15rem;
    font-weight: 800;
    color: #D4AF37;
    flex-shrink: 0;
}
[dir=rtl] .ct-step-go { transform: scaleX(-1); }
.ct-steps li.is-link:hover .ct-step-go { color: #b8912a; }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 940px) {
    /* ORDER MATTERS MORE THAN ANYTHING ELSE HERE.
       This page's traffic is ~90% phones arriving from an ad, and the first
       version put the scenario card first — a 16:9 hero image that filled the
       screen and pushed the register button clean out of view. Nobody scrolls
       past a photo to look for a button they have not been shown.
       Correct order on a phone: the ASK, then WHAT YOU WIN, then the detail.
       display:contents lets .ct-action and .ct-steps be ordered separately
       even though they share a parent. */
    .ct-cols   { display: flex; flex-direction: column; gap: 22px; }
    .ct-main   { display: contents; }

    .ct-action { order: 1; }   /* register button — first thing after the countdown */
    .ct-side   { order: 2; position: static; }   /* prize + scenario card */
    .ct-steps  { order: 3; }   /* how it works, for anyone still reading */

    .ct-scn-card { margin-bottom: 0; }

    /* A full 16:9 hero eats most of a phone screen. Crop it hard — it is
       decoration, not information. */
    .ct-scn-img { aspect-ratio: 21 / 9; max-height: 150px; }
}

/* Safety net: if display:contents is unsupported, the layout still stacks
   sensibly rather than collapsing — the button just sits with its siblings. */
@supports not (display: contents) {
    @media (max-width: 940px) {
        .ct-main { display: block; }
        .ct-side { order: 2; }
    }
}

@media (max-width: 760px) {
    .ct-wrap   { padding: 22px 16px 56px; }
    .ct-action { padding: 20px 16px; }
    .ct-prize  { padding: 20px 16px; }
    .ct-grid2  { grid-template-columns: 1fr; gap: 0; }
    .ct-btn-lg { max-width: none; }
    .ct-more-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
}

@media (max-width: 600px) {
    .ct-countdown { width: 100%; justify-content: center; box-sizing: border-box; }
    .ct-cd-clock  { font-size: 1.3rem; }
    .ct-steps li  { padding: 12px 14px; gap: 10px; }
    .ct-done-icon { font-size: 2.5rem; }
}

/* ── Motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ct-btn, .ct-score-fill, .ct-steps li { transition: none; }
    .ct-btn:hover { transform: none; }
    .ct-congrats, .ct-flash { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   Public contest history — /contests
   ═══════════════════════════════════════════════════════════ */
.ct-hist-h {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5b6b82;
    margin: 30px 0 14px;
}
.ct-hist-h:first-of-type { margin-top: 6px; }
.ct-hist-h span {
    background: #e6ecf5;
    color: #3d4d63;
    font-size: .72rem;
    letter-spacing: 0;
    padding: 2px 9px;
    border-radius: 999px;
}

.ct-hist-card h3 {
    margin: 0 0 6px;
    font-size: 1.08rem;
    line-height: 1.35;
    color: #0B2D5A;
}

/* The prize is the reason anyone reads this page — show it. */
.ct-hist-prize {
    margin: 0 0 12px;
    font-size: .86rem;
    line-height: 1.5;
    color: #6b5a24;
    background: #fffdf5;
    border: 1px solid #e8d9a8;
    border-radius: 9px;
    padding: 9px 12px;
}
.ct-hist-prize span {
    font-weight: 700;
    color: #8a6d1f;
}

.ct-history {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 360px));
    justify-content: center;
    gap: 18px;
}

/* The live contest is the one thing on this page anyone can act on —
   give it one wide card instead of a lonely third of a row. */
.ct-history--open {
    grid-template-columns: minmax(0, 620px);
}
.ct-history--open .ct-hist-card { padding: 26px 28px; }
.ct-history--open .ct-hist-card h3 { font-size: 1.35rem; }
.ct-history--open .ct-hist-prize { font-size: .95rem; padding: 12px 15px; }
.ct-history--open .ct-hist-cta { align-self: stretch; text-align: center; padding: 14px 26px; }

.ct-hist-card {
    background: #fff;
    border: 1px solid #dde4ee;
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
}
.ct-hist-card.is-live {
    outline: 2px solid #D4AF37;
    outline-offset: 2px;
}

.ct-hist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ct-hist-badge {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.b-live   { background: #ecfdf3; color: #15803d; border: 1px solid #86efac; }
.b-closed { background: #eef2f8; color: #5b6b82; border: 1px solid #dde4ee; }
.b-drawn  { background: #fdf6e3; color: #8a6d1f; border: 1px solid #e8d9a8; }

.ct-hist-dates { font-size: .78rem; color: #7b8794; white-space: nowrap; }

.ct-hist-card h2 {
    margin: 0 0 6px;
    font-size: 1.08rem;
    line-height: 1.35;
    color: #0B2D5A;
}
.ct-hist-tag  { margin: 0 0 12px; color: #5b6b82; font-size: .88rem; line-height: 1.5; }
.ct-hist-meta { font-size: .84rem; color: #5b6b82; margin-bottom: 14px; }
.ct-hist-meta strong { color: #0B2D5A; }

.ct-hist-winner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #fffdf5, #fdf6e3);
    border: 1px solid #e8d9a8;
    border-radius: 11px;
    padding: 13px 15px;
    margin-top: auto;
}
.ct-hist-w-ico   { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.ct-hist-w-label {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a6d1f;
    margin-bottom: 2px;
}
.ct-hist-winner strong { color: #0B2D5A; font-size: 1rem; }
.ct-hist-w-date { color: #7b8794; font-size: .78rem; }

.ct-hist-pending {
    margin-top: auto;
    background: #f7f9fc;
    border: 1px solid #dde4ee;
    border-radius: 11px;
    padding: 12px 15px;
    color: #5b6b82;
    font-size: .86rem;
}
.ct-hist-cta { margin-top: auto; align-self: flex-start; }

.ct-hist-note {
    text-align: center;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid #dde4ee;
    color: #7b8794;
    font-size: .82rem;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .ct-history   { grid-template-columns: 1fr; gap: 14px; }
    .ct-hist-card { padding: 16px 16px; }
    .ct-hist-cta  { align-self: stretch; text-align: center; }
}

/* ── Video embed (/contests) ──────────────────────────────────
   padding-top:56.25% is the classic 16:9 box — it holds the space
   before the iframe loads, so the page below does not jump. */
.ct-video-sec { margin-bottom: 34px; }
.ct-video {
    position: relative;
    width: 100%;
    max-width: 760px;      /* full 1080 is overbearing; 760 reads as deliberate */
    margin: 0 auto;
    padding-top: 56.25%;
    background: #0B2D5A;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11, 45, 90, .14);
}
.ct-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 600px) {
    .ct-video { border-radius: 11px; }
    .ct-video-sec { margin-bottom: 22px; }
}