/* UI-021 "Advertising 2.0" finish (31 Oct 2026). Loaded straight after desk-v56.css; only visual rules, no copy, no flow.
   Remove this one <link> (main.php, views/signup.php) and the Desk looks exactly like 0.5.6-rc1-020 again.
   Rules: 1 flat surfaces (no glow blobs, no gradient text, no button glow), 2 a radius scale (4 data and tags, 8 controls and
   containers, 0 rows), 3 hairline rules instead of floating cards, 4 lists not card grids when options are compared,
   5 type with a clear scale and tabular numbers, 6 one accent (red) for action and selection, 7 left-aligned, 8 purposeful motion.
   Colour tokens are unchanged from desk-v56.css, so every WCAG AA ratio checked there still holds. */
.k56{--r:8px;--rc:8px;--rs:4px;--glow1:transparent;--glow2:transparent;--glow3:transparent;--glow4:transparent;--btnshadow:transparent;
  --rule:var(--line);background:var(--bg);font-feature-settings:"ss01","cv11";letter-spacing:-.005em}
html[data-k56-theme=dark] .k56,.k56{--line:#2A2A36}
@media(prefers-color-scheme:light){html:not([data-k56-theme=dark]) .k56{--line:#DCDCE3}}
html[data-k56-theme=light] .k56{--line:#DCDCE3}
html[data-k56-theme=dark] .k56{--line:#2A2A36}
/* 5 type: one display weight, quieter labels, tabular numbers wherever money or a count is shown */
.k56 h1{font-weight:800;letter-spacing:-.035em;line-height:1.02}
.k56 h2{font-weight:700;letter-spacing:-.015em}
.k56 h3{font-weight:700}
.k56 .sub{font-size:16px;margin-bottom:24px}
.k56-hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text)}
.k56-pricehero .v,.k56-stat .v,.k56-trio__i .v,.k56-kv b,.k56-walletstrip__i b,.k56-price .line b,.k56-price .total,.k56-table td,.k56-ops td,
.k56-money input,.k56-facts dd,.k56o-stat__n,.k56-count,.k56-timer{font-variant-numeric:tabular-nums}
.k56 a{color:var(--text);text-decoration:underline;text-decoration-color:var(--tick);text-underline-offset:3px;text-decoration-thickness:1px}
.k56 a:hover{text-decoration-color:var(--hot)}
/* links that are not plain links keep their own colour (desk-v56.css set these with one class) */
.k56 .k56-nav a{color:var(--muted)}.k56 .k56-nav a.on{color:var(--text)}.k56 a.k56-onb__go{color:var(--hot)}.k56 a.k56-btn--text{color:var(--muted)}
.k56 a.k56-btn,.k56 a.k56-card,.k56 a.k56-walletstrip,.k56-nav a,.k56-tabs a,.k56 a.k56-logo,.k56 a.k56-brand,.k56 a.k56o-stat,.k56o-links a{text-decoration:none}
/* header: a ruled bar, text tabs with an underline for "you are here", square utility buttons */
.k56-top{border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:18px}
.k56-nav{gap:2px}
.k56-nav a{border-radius:0;padding:0 10px;font-weight:600;box-shadow:none;background:none}
.k56-nav a.on{background:none;color:var(--text);box-shadow:inset 0 -2px 0 var(--hot)}
.k56-theme{border-radius:var(--rc);background:transparent;box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.k56-testbar{font-size:12px}
/* 6 buttons: rectangles, one red, no glow */
.k56-btn{border-radius:var(--rc);box-shadow:none;font-weight:700;letter-spacing:0}
.k56-btn--ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--tick)}
.k56-btn--text{box-shadow:none}
.k56-btn:not(:disabled):active{transform:translateY(1px)}
/* 1+3 surfaces: flat panels with a hairline, small radius; no card inside a card */
.k56-card,.k56 details,.k56-walletstrip,.k56-trio__i,.k56-stat,.k56-onb__card{box-shadow:inset 0 0 0 1px var(--rule)}
.k56-card{border-radius:var(--r);padding:20px}
.k56 details{border-radius:var(--r)}
.k56-card .k56-card{box-shadow:none;padding:0;background:none}
/* My ads: ad cards read like a media plan row (name, status, numbers), not a floating tile */
.k56-adcard{border-radius:var(--r)}
.k56-adcard:hover{background:var(--panel)}
.k56-adcard:hover{box-shadow:inset 0 0 0 1px var(--tick)}
.k56-adcard--action{box-shadow:inset 3px 0 0 var(--hot),inset 0 0 0 1px var(--rule)}
.k56-adcard .name{font-weight:700;font-size:18px;letter-spacing:-.01em}
.k56-bar{height:3px;border-radius:0;margin:16px 0 14px}
.k56-bar i{background:var(--hot)}
.k56-kv{gap:10px 22px;border-top:1px solid var(--rule);padding-top:12px;margin-bottom:16px}
@media(min-width:640px){.k56-kv{gap:0}
  .k56-kv>span,.k56-kv>div{padding-right:22px;margin-right:22px;border-right:1px solid var(--rule)}
  .k56-kv>span:last-child,.k56-kv>div:last-child{border-right:0;margin-right:0;padding-right:0}}
.k56-adcard .k56-kv{margin-bottom:0}
.k56-kv b{font-weight:700}
.k56-group{font-size:15px;font-weight:700;text-transform:none;margin:28px 0 12px}
.k56-count{border-radius:var(--rs)}
/* status: small square-cornered tags, not candy pills */
.k56-pill,.k56o-pill,.k56-timer,.k56-prov,.k56 .k56-badge{border-radius:var(--rs);font-weight:700;letter-spacing:.01em}
.k56-pill--needs{background:var(--btn);color:var(--onbtn)}
/* wallet: one ruled strip, the number you can spend leads */
.k56-walletstrip{border-radius:var(--r);background:transparent;padding:12px 16px;gap:6px 0}
.k56-walletstrip__i{padding:0 18px;border-left:1px solid var(--rule)}
.k56-walletstrip__ccy{padding-right:18px}
@media(max-width:639px){.k56-walletstrip__i:first-of-type{padding-left:0;border-left:0}}
.k56-walletstrip__i b{font-weight:700}
.k56-trio{gap:0;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--rule);background:var(--panel);overflow:hidden}
.k56-trio__i{background:transparent;border-radius:0;box-shadow:none;padding:18px 20px}
.k56-trio__i+.k56-trio__i{box-shadow:inset 0 1px 0 var(--rule)}
@media(min-width:640px){.k56-trio__i+.k56-trio__i{box-shadow:inset 1px 0 0 var(--rule)}}
.k56-w--total{background:transparent;box-shadow:none}
.k56-trio__i .l,.k56-stat .l,.k56-pricehero .l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.k56-trio__i .v{font-weight:800;font-size:32px}
.k56-w--avail .v{font-size:40px}
/* steps: a thin ruler with numbers */
.k56-steps li{border-top-width:2px;font-weight:700;letter-spacing:.01em}
/* forms: quiet fields, a hairline edge (3:1, WCAG 1.4.11), the red ring only on focus */
.k56 input[type=text],.k56 input[type=url],.k56 input[type=tel],.k56 input[type=number],.k56 input[type=date],.k56 select,.k56 input[type=file],
.k56 input[type=email],.k56 input[type=search],.k56 input[type=password],.k56 textarea{background:var(--panel);border-radius:var(--rc)}
.k56 input:focus,.k56 select:focus,.k56 textarea:focus,.k56 input[type=email]:focus,.k56 input[type=search]:focus{outline:2px solid var(--hot);outline-offset:0;border-color:transparent}
.k56-money{background:var(--panel);border-radius:var(--rc)}
.k56-money:focus-within{box-shadow:inset 0 0 0 2px var(--hot)}
.k56-money--hero{background:transparent;box-shadow:none;border-bottom:2px solid var(--tick);border-radius:0;padding-left:0}
.k56-money--hero:focus-within{box-shadow:none;border-bottom-color:var(--hot)}
.k56-money--hero input{font-weight:800;outline:none!important}
.k56 label.f{font-weight:700;font-size:16px}
/* 4 choices: a ruled list (WhatsApp Flows feel), one row per option; picked = red edge + tint */
.k56-choices{gap:0;border-top:1px solid var(--rule)}
@media(min-width:640px){.k56-choices--2{column-gap:28px}}
.k56-choice span{background:transparent;border-radius:0;padding:14px 40px 14px 12px;box-shadow:inset 0 -1px 0 var(--rule);transition:background .12s}
.k56-choice:hover span{background:var(--panel)}
.k56-choice span b{font-weight:700}
.k56-choice input:checked+span{background:var(--sel);box-shadow:inset 3px 0 0 var(--hot),inset 0 -1px 0 var(--rule)}
.k56-choice input:checked+span::after{content:"";position:absolute;right:14px;top:18px;width:6px;height:11px;border:solid var(--hot);border-width:0 2px 2px 0;transform:rotate(45deg)}
.k56-choice span .k56-pill--booking{display:table;margin-top:8px}
.k56-choice input:focus-visible+span{outline:2px solid var(--hot);outline-offset:-2px}
.k56-chips{gap:6px;border:0}
.k56-chips .k56-choice span{border-radius:var(--rs);padding:0 14px;box-shadow:inset 0 0 0 1px var(--tick);font-weight:600}
.k56-chips .k56-choice input:checked+span{background:var(--text);color:var(--bg);box-shadow:none}
.k56-chips .k56-choice input:checked+span::after{content:none}
.k56-chips .k56-choice span small{color:inherit}
.k56-ccrow,.k56-phone__cc{border-radius:var(--rc)}
/* approve / price: left aligned, the number does the talking */
.k56-pricehero{text-align:left;padding:22px 20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--rule);border-radius:var(--r)}
.k56-pricehero .v{font-weight:800;letter-spacing:-.045em}
.k56-price .total{font-weight:800}
.k56-price .line>b{white-space:nowrap;flex:none}
.k56-msg{border-radius:var(--rs);background:transparent;box-shadow:inset 3px 0 0 var(--sun),inset 0 0 0 1px var(--rule)}
.k56-msg--bad{box-shadow:inset 3px 0 0 var(--hot),inset 0 0 0 1px var(--rule)}
.k56-msg--good{box-shadow:inset 3px 0 0 var(--ok),inset 0 0 0 1px var(--rule)}
.k56-sticky{background:linear-gradient(transparent,var(--bg) 24%)}
/* ad page: the facts become a spec sheet (ruled grid), the lead number leads */
.k56-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0;border-top:1px solid var(--rule);margin:18px 0}
.k56-facts>div{background:transparent;border-radius:0;padding:10px 14px 10px 0;box-shadow:inset 0 -1px 0 var(--rule)}
.k56-facts dt{font-weight:700;color:var(--muted)}
.k56-facts dd{font-weight:600}
.k56-stats{gap:0;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--rule);background:var(--panel);overflow:hidden}
.k56-stat{background:transparent!important;border-radius:0;box-shadow:inset 0 -1px 0 var(--rule),inset -1px 0 0 var(--rule)}
.k56-stat .v{font-weight:800}
.k56-stat--lead .v{font-weight:800;letter-spacing:-.04em}
.k56-bk-steps li::before{border-radius:2px}
.k56-table th,.k56-ops th{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11px}
.k56-table td{box-shadow:0 -1px 0 var(--rule)}
/* first-run sheet: same flat language */
.k56-onb__card{border:0;border-radius:var(--r) var(--r) 0 0;box-shadow:inset 0 0 0 1px var(--rule),0 -10px 30px rgba(0,0,0,.25)}
@media(min-width:768px){.k56-onb__card{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--rule),0 16px 40px rgba(0,0,0,.28)}}
.k56-onb__x{border-radius:var(--rc);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.k56-onb__dots li{border-radius:0;height:3px}
.k56-onb__t{font-weight:800;letter-spacing:-.02em}
/* sign-up buttons */
.k56-sso__b{border-radius:var(--rc)}
/* Studio (views/studio.php keeps its own inline block; these win by specificity) */
.k56.k56-studio .k56-st-list{gap:0;border-top:1px solid var(--rule)}
.k56.k56-studio .k56-st-list a{background:transparent;border-radius:0;padding:14px 4px;box-shadow:inset 0 -1px 0 var(--rule);text-decoration:none}
.k56.k56-studio .k56-st-list a:hover{background:var(--panel)}
.k56.k56-studio .k56-st-media{border-radius:var(--rs)}
.k56.k56-studio .k56-st-test{box-shadow:inset 3px 0 0 var(--sun),inset 0 0 0 1px var(--rule)}
/* 8 motion: only colour and the first-step reveal; nothing floats */
@media(prefers-reduced-motion:reduce){.k56 *{transition:none!important}.k56-btn:active{transform:none!important}}

/* UI-021b (Jared, phone, 31 Oct 13:04): screens form at 390 wide */
/* option groups: an even grid, never a ragged wrap; numbers are one segmented control; long labels are list rows */
.k56-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.k56-chips .k56-choice span{justify-content:center;text-align:center;height:100%}
.k56-chips--seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:0;border-radius:var(--rs);box-shadow:inset 0 0 0 1px var(--tick)}
.k56-chips--seg .k56-choice{min-width:0}
.k56-chips--seg .k56-choice span{border-radius:0;box-shadow:inset 1px 0 0 var(--line);padding:6px 8px;line-height:1.25}
.k56-chips--seg .k56-choice:first-child span{box-shadow:none}
.k56-chips--seg .k56-choice:first-child span{border-radius:var(--rs) 0 0 var(--rs)}
.k56-chips--seg .k56-choice:last-child span{border-radius:0 var(--rs) var(--rs) 0}
.k56-chips--rows{grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
.k56-chips--rows .k56-choice span{justify-content:flex-start;text-align:left;border-radius:0;box-shadow:inset 0 -1px 0 var(--rule);padding:0 44px 0 4px;font-weight:600}
.k56-chips--rows .k56-choice input:checked+span{background:transparent;color:var(--text);box-shadow:inset 0 -1px 0 var(--rule),inset 3px 0 0 var(--hot);padding-left:14px}
.k56-chips--rows .k56-choice input:checked+span::after{content:"";position:absolute;right:14px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid var(--hot);border-width:0 2px 2px 0;transform:rotate(45deg)}
.k56-chips--rows .k56-choice{position:relative}
/* dates: two fields that always fit the screen (iOS gives date fields a wide minimum) */
.k56-two>div{min-width:0}
.k56 input[type=date]{display:block;width:100%;max-width:100%;min-width:0;-webkit-appearance:none;appearance:none;text-align:left}
.k56 input[type=date]::-webkit-date-and-time-value{text-align:left}
@media(max-width:340px){.k56-two{grid-template-columns:1fr}}
/* the Back / See my price bar: a solid bar with a hairline, room under the form, errors never hidden under it */
@media(max-width:767px){
  .k56-sticky{background:var(--bg);box-shadow:0 -1px 0 var(--rule);padding:10px 0 max(10px,env(safe-area-inset-bottom));margin-top:20px}
  .k56-panel{padding-bottom:24px}
  html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  #k56-err2,#k56-err3{scroll-margin-bottom:calc(110px + env(safe-area-inset-bottom))}
}
@media(orientation:landscape) and (max-height:500px){.k56-sticky{background:none;box-shadow:none}}
/* a way forward for a wrong-size screen file */
.k56-fix{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.k56-fix p{margin:0 0 8px}
.k56-fix__row{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:640px){.k56-fix__row{grid-template-columns:repeat(3,auto);justify-content:start}}
.k56-fix__row .k56-btn{width:100%;text-align:center}
.k56-fix__pv{display:block;width:100%;max-width:360px;margin-top:10px;border-radius:var(--rs);box-shadow:inset 0 0 0 1px var(--rule)}
.k56-msg .k56-btn--text{margin-left:4px}
.k56 a.k56-btn{text-decoration:none}.k56 a.k56-btn--ghost{color:var(--text)}
/* the one-tap earliest date fix sits on its own line under the message */
.k56 .k56-msg [data-k56=use-earliest]{display:flex;margin:8px 0 0;padding-left:0;padding-right:0;min-height:48px}