/* ==========================================================================
   CLIP KITCHEN BLUE (2026-10-07: "the website and everything, I want to
   have that nice blue with the gradient ... that is our brand").

   The colours are sampled from the App Store image: royal #1b43b8 at the top of
   the screen, #143080 through the middle, navy #0c1832 at the bottom. The app
   itself stays white; the website is blue.

   One file, loaded LAST on every page (scripts/blue-site.py puts the link in),
   so the brand colour lives in one place. It changes colour only: no layout,
   no copy, no script. Every surface is a pane of white glass on the blue, every
   main button is white with blue words, every word is white or pale blue.
   ========================================================================== */

:root,html.call-first{
  --ckb-top:#1b43b8; --ckb-mid:#143080; --ckb-low:#0f2462; --ckb-end:#0c1832;
  --ckb-glass:rgba(255,255,255,.075); --ckb-glass-2:rgba(255,255,255,.12);
  --ckb-edge:rgba(255,255,255,.14); --ckb-edge-2:rgba(255,255,255,.24);
  --ckb-well:rgba(6,16,52,.38);
  --ckb-ink:#ffffff; --ckb-ink-2:#d3dff9; --ckb-ink-3:#b8caf0; --ckb-pale:#9cc3ff;
  --ckb-btn-ink:#1638a8;

  /* the homepage, inner pages and pricing name their tokens these */
  --bg:#143080; --bg-2:rgba(255,255,255,.04); --card:var(--ckb-glass); --card-2:var(--ckb-glass-2);
  --ink:#ffffff; --ink-2:#d3dff9; --ink-3:#b8caf0;
  --line:var(--ckb-edge); --line-2:var(--ckb-edge-2);
  --accent-2:#9cc3ff; --accent-soft:rgba(255,255,255,.1); --accent-text:#9cc3ff;
  --blue-600:#9cc3ff; --blue-700:#bcd5ff; --blue-500:#9cc3ff; --blue-100:rgba(255,255,255,.12); --blue-50:rgba(255,255,255,.08);
  --white:#ffffff;
  --grad-soft:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  --shadow:none; --shadow-lg:0 24px 60px rgba(4,12,40,.35); --shadow-raised:0 10px 30px rgba(4,12,40,.28);
  /* /book names them these */
  --panel:var(--ckb-glass); --line2:var(--ckb-edge-2); --dim:#d3dff9; --faint:#b8caf0; --blue2:#9cc3ff;
}
/* /book's accent is a text colour on the blue (links, kickers); its buttons are white below */
html.call-first{--blue:#9cc3ff;--grad:#fff}

/* ---- the ground: the App Store gradient, pinned to the screen ---- */
html{background:var(--ckb-end)}
body{background:transparent !important;color:#fff}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(70% 55% at 50% -6%,rgba(46,98,236,.55),transparent 70%),
  linear-gradient(180deg,var(--ckb-top) 0%,#173da9 22%,var(--ckb-mid) 52%,var(--ckb-low) 78%,var(--ckb-end) 100%) !important}
html.call-first body::before{background:
  radial-gradient(70% 55% at 50% -6%,rgba(46,98,236,.55),transparent 70%),
  linear-gradient(180deg,var(--ckb-top) 0%,#173da9 22%,var(--ckb-mid) 52%,var(--ckb-low) 78%,var(--ckb-end) 100%) !important}
::selection{background:#fff;color:var(--ckb-btn-ink)}

/* ---- header ---- */
header,html.call-first .ck-head{background:rgba(22,56,158,.72) !important;border-bottom:1px solid rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.brand,.ck-brand,.logo,.logo span,html.call-first .logo,html.call-first .logo span{color:#fff !important}
.brand .mark,.ck-mark,.logo .mark{background:linear-gradient(135deg,#2563eb,#4f8dfb) !important;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.nav-links a,.ck-links a{color:#d3dff9 !important} .nav-links a:hover,.ck-links a:hover{color:#fff !important}
.btn-ghost,.btn-demo,.ck-hbtn.ghost{color:#fff !important;border-color:rgba(255,255,255,.35) !important;background:transparent !important}
.menu-btn{color:#fff}
@media(max-width:900px){.nav-links{background:#163a9e !important;border-bottom:1px solid rgba(255,255,255,.12) !important}}

/* ---- type ----
   Every heading breaks into even lines, so no second line is left holding one small word
   (2026-10-07: "double lines with only small words on the bottom just doesn't look good").
   Paragraphs avoid a lone last word. Browsers without text-wrap simply wrap as before. */
h1,h2,h3,.ck-h1,.ck-h2,.ck-pq,figcaption{text-wrap:balance}
p,.lead,.ck-lead,li{text-wrap:pretty}
/* a headline sentence is one unit (scripts/titles.py wraps them): side by side when they fit,
   stacked when not, never cut mid-sentence */
.ck-s{display:inline-block}
h1,h2,h3,h4,.ck-h1,.ck-h2,html.call-first .done h2{color:#fff}
p,.lead,.ck-lead{color:var(--ckb-ink-2)}
.eyebrow,.ck-kick,.ck-band-kick{color:var(--ckb-pale) !important}
a{color:var(--ckb-pale)}
.ck-tiny,.ck-tiny.light,.hero-note,.note,html.call-first .note{color:var(--ckb-ink-3) !important}

/* ---- the main buttons: white, blue words ---- */
.btn-primary,.btn-white,.ck-btn,.ck-hbtn:not(.ghost),html.call-first .btn,html.call-first #form .btn,.cta,.closer .cta,.appbtn,.offercard .btn{
  background:#fff !important;color:var(--ckb-btn-ink) !important;border-color:#fff !important;box-shadow:0 10px 28px rgba(4,12,40,.28) !important;background-image:none !important}
.btn-primary:hover,.btn-white:hover,.ck-btn:hover,.ck-hbtn:not(.ghost):hover,html.call-first .btn:hover{background:#e8efff !important}
.btn-primary svg,.ck-btn svg{color:var(--ckb-btn-ink)}
/* .ck-btn was written font:800 17px/1 inherit, which no browser accepts, so the words fell back to regular weight */
.ck-btn{font-weight:800;font-size:17px;line-height:1;font-family:inherit} .ck-btn.sm{font-size:14.5px}

/* ---- glass: every card, list, tile, table ---- */
.form-card,.price-card,.ck-pain,.ck-step,.ck-case,.ck-card,.ck-list,.ck-ptable,.ck-tile,.ck-incl,.ck-way,
.card,.tier,.step,.faq-item,.post-card,.blog-card,.case,.feature,.clip-tile,.shoot-card,.cta-band,
html.call-first #form .card{
  background:var(--ckb-glass) !important;border:1px solid var(--ckb-edge) !important;box-shadow:none !important;color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ck-case.dk{background:rgba(6,16,52,.45) !important;border:1px solid var(--ckb-edge) !important}
.ck-way.top,.price-card{border:2px solid rgba(255,255,255,.7) !important;background:var(--ckb-glass-2) !important}
.ck-pain:hover,.ck-case:hover{border-color:rgba(255,255,255,.45) !important}
.ck-pq,.ck-pa,.ck-cn b,.ck-feat b,.ck-step h3,.ck-way h3,.ck-bcopy b,.ck-ptr b,.ck-stick b,.ck-ticks span,.ck-incl span,
.form-card .check,.form-card .check b,.form-card .check span,.price-card .q,.price-card .v,.price-card .amt,.price-card .per{color:#fff !important}
.ck-pa,.ck-step p,.ck-way p,.ck-feat span,.ck-cb p,.ck-bcopy span,.ck-ptr,.ck-cn span,.ck-tile em,.price-card .ticks span,.ck-q p{color:var(--ckb-ink-2) !important}
.ck-cs,.ck-tile b,.ck-ptr span:nth-child(3),.ck-badd em,.ck-quiet,.ck-center .ck-quiet{color:#fff !important}
.ck-feat,.ck-ptr,.ck-q{border-color:rgba(255,255,255,.1) !important}
.ck-chip{background:rgba(255,255,255,.14) !important;color:#fff !important}
.ck-list.dk,.ck-list.dk .ck-feat{background:transparent;border-color:rgba(255,255,255,.1) !important}
.ck-list.dk{background:var(--ckb-glass) !important}
.ck-step>b{background:#fff !important;color:var(--ckb-btn-ink) !important}
.ck-cn img{background:#fff}
.ck-mono{background:#fff !important;color:var(--ckb-btn-ink) !important}
.ck-tag{background:rgba(255,255,255,.16) !important;color:#fff !important}
.ck-pth{background:rgba(255,255,255,.12) !important;color:#d3dff9 !important}
.ck-cf.lg{background:rgba(255,255,255,.92) !important}
.ck-cf.lg.dk{background:#0b1220 !important}
.ck-freepill{background:none !important;border:0 !important;padding:0 !important}
.ck-freepill b{color:#fff !important} .ck-freepill span{color:var(--ckb-ink-2) !important}
.ck-ind span{background:var(--ckb-glass) !important;border:1px solid var(--ckb-edge) !important;color:#fff !important}
.ck-ind em{color:var(--ckb-ink-3) !important}
.ck-q b{color:#fff}

/* ---- sections: the alternate band is a breath of white over the blue; the dark band is deep navy ---- */
.section.alt,.ck-sec.alt{background:rgba(255,255,255,.035) !important;border-color:rgba(255,255,255,.08) !important}
.ck-sec.dk{background:rgba(6,16,52,.42) !important}
.ck-band{background:rgba(6,16,52,.5) !important;border:1px solid rgba(255,255,255,.1)}
.ck-col{background:rgba(255,255,255,.07) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important}
.ck-odo .ck-comma{color:var(--ckb-ink-3) !important}
.ck-band-row{border-color:rgba(255,255,255,.12) !important} .ck-band-row span{color:var(--ckb-ink-3) !important}
.ck-band-sub{color:var(--ckb-ink-2) !important}

/* ---- forms: deep wells, white words ---- */
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],select,textarea,
.trial-form input[type=text],.trial-form input[type=email],.trial-form input[type=tel],.ck-flash input,
html.call-first input[type=text],html.call-first input[type=email],html.call-first input[type=tel],html.call-first select,
.shoot-form input,.shoot-form textarea,.offercard input[type=text],.offercard input[type=email],.offercard input[type=tel]{
  background:var(--ckb-well) !important;border:1px solid rgba(255,255,255,.22) !important;color:#fff !important;-webkit-text-fill-color:#fff !important}
input::placeholder,textarea::placeholder{color:#8ea6d8 !important;-webkit-text-fill-color:#8ea6d8 !important}
input:focus,select:focus,textarea:focus{border-color:#fff !important;outline:none}
select option{color:#0b1220;background:#fff}
.trial-form label,.f,html.call-first .f,.offercard label.f{color:#fff !important}
.trial-form .field-hint,.trial-form-note,html.call-first .consent{color:var(--ckb-ink-3) !important}
.trial-area-opt,html.call-first .opt span,.shoot-area-opt,.ck-bhrs button,.whorow button,.howrow button,.vh-opt,.ck-bt-opt{
  background:var(--ckb-glass) !important;border:1px solid rgba(255,255,255,.22) !important;color:#fff !important}
.trial-area-opt[aria-pressed=true],html.call-first .opt input:checked + span,.shoot-area-opt[aria-pressed="true"],.ck-bhrs button.on,
.whorow button[aria-pressed="true"],.howrow button[aria-pressed="true"],.vh-opt.active,.ck-bt-opt.active{
  background:#fff !important;border-color:#fff !important;color:var(--ckb-btn-ink) !important}
html.call-first .opt input:checked + span::before{border-color:var(--ckb-btn-ink) !important;background:var(--ckb-btn-ink) !important;box-shadow:inset 0 0 0 3px #fff !important}
html.call-first .opt span::before{border-color:rgba(255,255,255,.5) !important}
.ck-badd{background:var(--ckb-glass) !important;border:1px solid rgba(255,255,255,.22) !important}
.ck-badd.on{background:rgba(255,255,255,.16) !important;border-color:#fff !important}
.ck-bchk{background:transparent !important;border-color:rgba(255,255,255,.6) !important}
.ck-badd.on .ck-bchk{background-color:#fff !important;border-color:#fff !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231638a8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important}
.ck-brow i,.ck-bticks,.ck-btotal i,.ck-bper,.ck-bhrs>span{color:var(--ckb-ink-2) !important}
.ck-btotal{border-color:rgba(255,255,255,.14) !important} .ck-btotal span{color:var(--ckb-pale) !important} .ck-btotal b,.ck-brow em,.ck-brow b{color:#fff !important}
input[type=range]{accent-color:#fff !important}
.ck-err,.err,html.call-first .err{color:#fecaca !important}
.ck-after{border-color:rgba(255,255,255,.14) !important;color:var(--ckb-ink-2) !important}

/* ---- the bars that stick to the bottom stay white: they are the one thing to tap ---- */
.ck-stick{background:#fff !important}
.ck-stick b{color:#0b1220 !important} .ck-stick span{color:#475569 !important}
.ck-stick .ck-btn{background:var(--ckb-btn-ink) !important;color:#fff !important;box-shadow:none !important}

/* ---- footer + cookie bar: the navy at the bottom of the gradient ---- */
footer{background:#0a1430 !important;border-top:1px solid rgba(255,255,255,.08) !important}
footer,footer a,footer .foot-tag,footer .foot-base,footer h4,html.call-first footer{color:#9fb3e0 !important}
footer a:hover{color:#fff !important}
.cookie-bar,#cookieBar,.ckbar{background:#0a1430 !important;color:#fff !important;border-top:1px solid rgba(255,255,255,.1)}
.ck-quietline{border-color:rgba(255,255,255,.14) !important}

a.ck-btn,a.btn,a.cta{text-decoration:none !important}
/* words painted with the brand gradient were dark blue on light; on the blue they are white into pale blue */
.gradient-text,.big,.track-head{background:linear-gradient(120deg,#ffffff 0%,#bcd5ff 55%,#8fbaff 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important}
/* small green tags read on white; on the blue they need the lighter green */
.new-tag,.ck-save,.nc-pill,.pop-badge{color:#6ee7b7 !important}
.buy-now{color:#fff !important;border-color:rgba(255,255,255,.45) !important;background:transparent !important}

/* /book: the page is one centred column, so its tinted bands and its header reach the screen edges
   with a shadow + clip, instead of stopping at the column as hard-edged boxes */
html.call-first .ck-sec.alt,html.call-first .ck-sec.dk,html.call-first .ck-head{clip-path:inset(0 -100vmax)}
html.call-first .ck-sec.alt{box-shadow:0 0 0 100vmax rgba(255,255,255,.035)}
html.call-first .ck-sec.dk{box-shadow:0 0 0 100vmax rgba(6,16,52,.42)}
/* blur only paints inside the box, so the bar inside and the shadow outside would differ: no blur here */
html.call-first .ck-head{background:rgba(23,58,160,.94) !important;box-shadow:0 0 0 100vmax rgba(23,58,160,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
html.call-first footer{clip-path:inset(0 -100vmax);box-shadow:0 0 0 100vmax #0a1430}
/* the plan builder is a .ck-card, a class only the homepage ever defined: on /book it had no box at all */
.ck-card{border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px}
@media(min-width:1000px){html.call-first .ck-card{padding:24px}}

/* client logos (home, pricing, book): one centred row of same-size white chips on the blue,
   no full-width white bar. The marks are dark and drawn for white, so each gets its own chip. */
.ck-lstrip,.ck-strip,.ck-plogos{display:flex !important;justify-content:center !important;align-items:center !important;flex-wrap:nowrap;gap:10px !important;
  background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;max-width:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
.ck-lstrip img,.ck-strip img,.ck-plogos img{flex:1 1 0;min-width:0;max-width:84px;width:auto !important;height:50px !important;padding:7px 9px;border-radius:13px;background:#fff;object-fit:contain;box-sizing:border-box}
@media(min-width:720px){.ck-lstrip,.ck-strip,.ck-plogos{gap:22px !important} .ck-lstrip img,.ck-strip img,.ck-plogos img{flex:none;max-width:none;width:104px !important;height:58px !important;padding:8px 14px}}
footer{margin-top:0 !important}

/* anchor jumps land below the sticky header plus the orange promo strip (108px at most), not under them */
html{scroll-padding-top:120px}

/* the one layout rule in this file: on a phone the footer's long support email set its column's
   minimum width and pushed the homepage 70px wider than the screen (sideways scroll) */
.foot-grid>*{min-width:0} footer a{overflow-wrap:break-word}

/* industry pages: the three phone mockups would not shrink (a 606px minimum), so at laptop width the
   headline was squeezed into a 310px column, one word a line. Both columns may now shrink. */
@media(min-width:961px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important} .hero-grid h1{font-size:clamp(44px,4.4vw,64px)}}

/* ---- store buttons keep Apple's and Google's black ---- */
.ck-store{background:#000 !important;border-color:rgba(255,255,255,.25) !important}

/* tablet: a 3-up grid drops to 2 columns, so an odd last card spans the row instead of sitting alone */
@media(min-width:641px) and (max-width:940px){.grid-3>:last-child:nth-child(odd){grid-column:1/-1}}