/* =====================================================================
   CEEK — product scenes on the CEEK Care page. Built on the .svx scene system
   in services.css (base cards, chips, lists, motion); only this page loads this file.
   Rows are squares with one big rounded corner (odd rows top-right; even rows
   top-left on desktop, top-right on phones), so that corner stays background only.
   ===================================================================== */

/* shared: a card head, an icon disc, a bold line over a small one */
.svx-c-head{display:flex;align-items:center;gap:.6em}
.svx-c-ic{flex:none;display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--mist);color:var(--white)}
.svx-c-ic svg{width:50%;height:50%}
.svx-chip .svx-c-ic{width:1.5em;height:1.5em}
.svx-c-duo{flex:1;min-width:0;white-space:nowrap}
.svx-c-duo b{display:block}
.svx-c-duo em{display:block;margin-top:.18em;font-size:.72em;color:var(--text-3)}

/* B1 hosting: your site on a Swiss server, the keys in your name */
.svx--c-host{--a:#94A8B7;--b:#5F7689}
.svx-c-server{left:8%;top:13%;width:58%;padding:1.1em 1.15em 1.2em}
.svx-c-server .svx-c-head{margin-bottom:1em}
.svx-c-rack{display:flex;flex-direction:column;gap:.55em}
.svx-c-unit{display:flex;align-items:center;gap:.42em;height:3.3em;padding:0 .95em;border-radius:.65em;background:#F1ECE4}
.svx-c-unit>i{flex:none;width:.42em;height:.42em;border-radius:50%;background:rgba(18,20,23,.16)}
.svx-c-unit>i:first-child{background:var(--mist)}
.svx-c-vent{margin-left:auto;width:40%;height:1.05em;background:repeating-linear-gradient(90deg,rgba(18,20,23,.12) 0 .16em,transparent .16em .5em)}
.svx-c-unit--site{gap:.6em;background:var(--white);box-shadow:inset 0 0 0 .09em rgba(106,129,147,.5),0 .6em 1.2em -.7em rgba(30,42,54,.4)}
.svx-c-unit--site b{font-size:.9em}
.svx-c-unit--site svg{width:1.05em;height:1.05em;margin-left:auto;color:var(--text-3)}
.svx-c-keys{left:40%;top:57.5%;width:52%;display:flex;align-items:center;gap:.7em;padding:.85em 1em}
.svx-c-levels{left:8%;top:79%}

/* B2 updates & security: a month of care on the calendar */
.svx--c-month{--a:#F4ECE0;--b:#DACAB0;--dot:rgba(106,129,147,.24);--sh:0 .25cqw .5cqw rgba(74,58,36,.06),0 3cqw 6.5cqw -2.2cqw rgba(74,58,36,.34);
  background:radial-gradient(circle at 84% 10%,rgba(251,248,243,.45),rgba(251,248,243,0) 50%),linear-gradient(200deg,var(--a),var(--b))}
.svx-c-cal{right:8%;top:15%;width:58%;padding:1.05em 1.15em 1.1em}
.svx-c-cal .svx-c-head{margin-bottom:.9em}
.svx-c-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3em}
.svx-c-days i{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:.42em;background:#F1ECE4}
.svx-c-days i.svx-c-off{background:none}
.svx-c-days i.svx-c-task{background:var(--mist);color:var(--white)}
.svx-c-days svg{width:52%;height:52%}
.svx-c-legend{display:flex;justify-content:space-between;margin-bottom:.95em;padding-bottom:.85em;border-bottom:1px solid rgba(18,20,23,.08);font-size:.8em}
.svx-c-legend span{display:flex;align-items:center;gap:.45em}
.svx-c-legend i{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:.4em;background:var(--mist);color:var(--white)}
.svx-c-legend svg{width:62%;height:62%}
.svx-c-safe{left:8%;top:70.5%}

/* B3 uptime & report: checked online, the month's report, a small change done */
.svx--c-uptime{--a:#B1BFCA;--b:#8194A4}
.svx-c-mon{left:8%;top:12%;width:58%;padding:1.05em 1.2em 1.15em}
.svx-c-mon .svx-c-head{margin-bottom:.9em}
.svx-c-mon .svx-pill{display:flex;align-items:center;gap:.45em}
.svx-c-dot{width:.5em;height:.5em;border-radius:50%;background:var(--mist)}
.svx-c-mon .svx-label{margin-bottom:.5em}
.svx-c-graph{position:relative}
.svx-c-graph svg{display:block;width:100%;height:auto;overflow:visible}
.svx-c-gridl{fill:none;stroke:rgba(18,20,23,.09);stroke-width:1;stroke-dasharray:2 4}
.svx-c-beat{fill:none;stroke:var(--mist);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.svx-c-now{position:absolute;right:-.3em;top:calc(34 / 60 * 100% - .3em);width:.6em;height:.6em;border-radius:50%;background:var(--mist)}
.svx-c-now::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0}
.svx-c-doc{left:54%;top:40%;width:37%;padding:1.1em 1.15em 1.25em}
.svx-c-doc-title{margin:.35em 0 .25em;font-family:var(--serif);font-size:1.6em;font-style:italic;line-height:1;letter-spacing:-.01em}
.svx-c-doc-site{display:block;font-size:.72em;color:var(--text-3)}
.svx-c-doc-lines{display:flex;flex-direction:column;gap:.45em;margin:1em 0 .9em;padding-top:.9em;border-top:1px solid rgba(18,20,23,.08)}
.svx-c-doc-lines i{height:.34em;border-radius:99px;background:rgba(18,20,23,.13)}
.svx-c-doc-lines i:nth-child(2){width:86%}
.svx-c-doc-lines i:nth-child(3){width:64%}
.svx-c-doc-rows{display:flex;flex-direction:column;gap:.5em}
.svx-c-doc-rows i{display:flex;align-items:center;gap:.5em}
.svx-c-doc-rows svg{flex:none;width:1.1em;height:1.1em;padding:.2em;border-radius:50%;background:var(--mist);color:var(--white)}
.svx-c-doc-rows i::after{content:"";width:60%;height:.34em;border-radius:99px;background:rgba(18,20,23,.13)}
.svx-c-doc-rows i+i::after{width:44%}
.svx-c-change{left:8%;top:79%}

/* B4 be found: searched and found, the Google Business Profile, priority for your requests */
.svx--c-found{--a:#E7DED2;--b:#C0B2A1;--dot:rgba(106,129,147,.24);--sh:0 .25cqw .5cqw rgba(74,58,36,.06),0 3cqw 6.5cqw -2.2cqw rgba(74,58,36,.36);
  background:radial-gradient(circle at 84% 10%,rgba(251,248,243,.4),rgba(251,248,243,0) 50%),linear-gradient(200deg,var(--a),var(--b))}
.svx-c-search{right:8%;top:12%;width:58%;padding:.95em 1.1em 1.1em}
.svx-c-field{display:flex;align-items:center;gap:.5em;margin-bottom:1em;padding:.62em .95em;border-radius:99px;background:#F1ECE4;font-size:.92em}
.svx-c-field svg{flex:none;width:1.05em;height:1.05em;color:var(--text-3)}
.svx-c-query{max-width:6.7em;overflow:hidden;white-space:nowrap}
.svx-c-caret{flex:none;width:.09em;height:1.15em;margin-left:-.35em;background:var(--mist)}
.svx-c-search .svx-label{margin-bottom:.55em}
.svx-c-hit{display:flex;gap:.6em;padding:.75em .8em;border-radius:.7em;background:#F6F1EA;box-shadow:inset 0 0 0 1px rgba(106,129,147,.22)}
.svx-c-hit p{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4em}
.svx-c-hit em{font-size:.72em;color:var(--text-2)}
.svx-c-fav{flex:none;width:1.25em;height:1.25em;border-radius:50%;background:var(--mist)}
.svx-c-hit-t{width:72%;height:.62em;border-radius:99px;background:var(--mist)}
.svx-c-gbp{left:8%;top:43.8%;width:44%;overflow:hidden}
.svx-c-map{position:relative;height:4.8em;background:
  linear-gradient(105deg,transparent 47%,#FBF8F3 47% 50.5%,transparent 50.5%),
  linear-gradient(12deg,transparent 58%,#FBF8F3 58% 61%,transparent 61%),
  radial-gradient(ellipse 34% 46% at 14% 88%,rgba(138,157,171,.38) 98%,transparent),
  #ECE5DA}
.svx-c-pin{position:absolute;left:50%;top:50%;width:2em;height:2em;margin:-1.75em 0 0 -1em;color:var(--mist)}
.svx-c-pin svg{display:block;width:100%;height:100%;filter:drop-shadow(0 .2em .25em rgba(30,42,54,.3))}
.svx-c-pin::before,.svx-c-pin::after{content:"";position:absolute;z-index:-1;left:50%;bottom:-.22em;width:.9em;height:.34em;margin-left:-.45em;border-radius:50%;background:rgba(30,42,54,.25)}
.svx-c-pin::after{background:rgba(106,129,147,.6);opacity:0}
.svx-c-gbp-body{padding:.85em 1em 1em}
.svx-c-gbp-body b{display:block}
.svx-c-gbp-body em{display:block;margin-top:.2em;font-size:.72em;color:var(--text-3)}
.svx-c-acts{display:flex;gap:.45em;margin-top:.8em}
.svx-c-acts i{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(106,129,147,.4);color:var(--mist)}
.svx-c-acts svg{width:46%;height:46%}
.svx-c-prio{right:8%;top:81%}

/* phones: a touch larger type in the row scenes */
@media (max-width:560px){
  :is(.svx--c-host,.svx--c-month,.svx--c-uptime,.svx--c-found) .svx-card{font-size:3.2cqw}
  :is(.svx--c-host,.svx--c-month,.svx--c-uptime,.svx--c-found) .svx-chip{font-size:2.9cqw}
  .svx-c-search{top:10%}
  .svx-c-gbp{top:44.2%}
  .svx-c-map{height:4.4em}
  .svx-c-prio{top:83%}
}

/* even rows: on phones the rounded corner moves to the top-right, so the scene mirrors */
@media (max-width:768px){
  .svx-c-cal,.svx-c-search{right:auto;left:8%}
  .svx-c-safe,.svx-c-gbp{left:auto;right:8%}
  .svx-c-prio{right:auto;left:8%}
  .svx--c-month,.svx--c-found{background:radial-gradient(circle at 16% 10%,rgba(251,248,243,.42),rgba(251,248,243,0) 50%),linear-gradient(160deg,var(--a),var(--b))}
}

/* the deck: one plan card per level, the levels it includes peeking out behind it.
   The visual is as tall as its card on desktop and 4:3 below 900px, so the scene is a
   4:3 stage fitted inside it, and everything sizes off the stage. */
.svx--c-plan{container-type:size;display:grid;place-items:center}
.svx--c-care{--a:#9EB0BE;--b:#6D8396}
.svx--c-plus{--a:#F4ECE0;--b:#D9C9AE;--dot:rgba(106,129,147,.24);--sh:0 .25cqw .5cqw rgba(74,58,36,.06),0 3cqw 6.5cqw -2.2cqw rgba(74,58,36,.34)}
.svx--c-pro{--a:#E7DED2;--b:#BFB1A0;--dot:rgba(106,129,147,.24);--sh:0 .25cqw .5cqw rgba(74,58,36,.06),0 3cqw 6.5cqw -2.2cqw rgba(74,58,36,.36)}
.svx-c-stage{position:relative;width:min(100cqw,133.33cqh);aspect-ratio:4/3;container-type:inline-size}
.svx-c-pile{position:absolute;left:9%;top:0;bottom:0;width:18.5em;height:fit-content;margin-block:auto;font-size:3.3cqw}
.svx--c-plan .svx-card{font-size:3.3cqw}
.svx-c-tier{position:relative;padding:1em 1.15em 1.05em}
.svx-c-tier-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6em;margin-bottom:.75em}
.svx-c-tier-head b{display:block;margin-top:.15em;font-size:1.5em;line-height:1.05;letter-spacing:-.03em}
.svx-c-tier-head .svx-pill{margin:0;background:var(--mist);color:var(--white)}
.svx-c-tier-sub{margin-bottom:.35em;font-size:.72em;color:var(--text-3)}
.svx-c-tier .svx-list li:nth-child(4){--k:3}
.svx-c-tier .svx-list em{display:flex}
.svx-c-tier .svx-cross{width:1.05em;height:1.05em;border-radius:.24em}
.svx-c-under{position:absolute;left:0;right:0;top:0;height:6em;padding:.42em 1.15em;border-radius:2.4cqw;background:#EFE8DE;box-shadow:0 .25cqw .5cqw rgba(30,42,54,.05),0 1.5cqw 3cqw -1.5cqw rgba(30,42,54,.3);color:var(--text-3);transform-origin:50% 0}
.svx-c-under em{font-size:.78em}
.svx--c-plus .svx-c-tier{margin-top:1.7em}
.svx--c-pro .svx-c-tier{margin-top:3.4em}
.svx--c-plus .svx-c-under{scale:.94 1}
.svx--c-pro .svx-c-under:first-child{scale:.88 1}
.svx--c-pro .svx-c-under:nth-child(2){top:1.7em;scale:.94 1}
.svx-c-moment{right:-6.2em;bottom:-1.1em;display:flex;align-items:center;gap:.65em;padding:.8em 1.1em .8em .85em}

/* motion: the house rules in services.css (armed: hidden, live: plays in, then breathes) */
@keyframes svx-c-blink{50%{opacity:.3}}
@keyframes svx-c-caret{50%{opacity:0}}
@keyframes svx-c-drop{0%{opacity:0;transform:translate3d(0,-2.2em,0)}55%{opacity:1;transform:translate3d(0,.12em,0)}100%{opacity:1;transform:none}}
@keyframes svx-c-insert{from{opacity:0;transform:translate3d(-.5em,0,0)}}
.svx-c-keys,.svx-c-doc,.svx-c-gbp,.svx-c-moment{animation:svx-bob 7s ease-in-out infinite paused}
:where(.svx-c-unit>i:first-child){animation:svx-c-blink 2.8s ease-in-out infinite paused}
:where(.svx-c-unit:nth-child(3)>i:first-child){animation-delay:-1.4s}
.svx-c-caret{animation:svx-c-caret 1.05s steps(1) infinite paused}
.svx-c-now::after,.svx-c-pin::after{animation:svx-ping 2.4s var(--e-out) infinite paused}

.svx.is-armed :where(.svx-c-unit,.svx-c-keys,.svx-c-days i,.svx-c-days svg,.svx-c-search .svx-label,.svx-c-mon .svx-pill,.svx-c-doc,.svx-c-hit,.svx-c-gbp,.svx-c-under,.svx-c-moment,.svx-c-tier .svx-pill){transition:opacity .8s var(--e-out),transform 1.1s var(--e-out)}
.svx.is-armed:not(.is-live) :is(.svx-c-keys,.svx-c-moment){opacity:0;transform:translate3d(0,5cqw,0)}
.svx.is-armed:not(.is-live) :is(.svx-c-doc,.svx-c-gbp){opacity:0;transform:translate3d(0,14cqw,0)}
.svx.is-armed:not(.is-live) :is(.svx-c-unit,.svx-c-hit,.svx-c-search .svx-label){opacity:0;transform:translate3d(0,.7em,0)}
.svx.is-armed:not(.is-live) .svx-c-days i:not(.svx-c-off){opacity:0;transform:scale(.55)}
.svx.is-armed:not(.is-live) .svx-c-days svg{opacity:0;transform:scale(.3)}
.svx.is-armed:not(.is-live) :is(.svx-c-mon .svx-pill,.svx-c-tier .svx-pill){opacity:0;transform:scale(.7)}
.svx.is-armed:not(.is-live) .svx-c-beat{stroke-dashoffset:100}
.svx.is-armed:not(.is-live) .svx-c-now{opacity:0}
.svx.is-armed:not(.is-live) .svx-c-query{max-width:0}
.svx.is-armed:not(.is-live) .svx-c-under{transform:translate3d(0,var(--tuck,1.7em),0)}

.svx.is-live .svx-c-unit{transition-delay:calc(.3s + var(--k,0) * .12s)}
.svx.is-live .svx-c-unit:nth-child(2){--k:1}
.svx.is-live .svx-c-unit:nth-child(3){--k:2}
.svx.is-live .svx-c-keys{transition-delay:1s}
.svx.is-live .svx-c-key svg{animation:svx-c-insert .7s var(--e-out) 1.3s both}
.svx.is-live .svx-c-levels{transition-delay:1.55s}
.svx.is-live .svx-c-days i{transition-delay:calc(.25s + var(--i,0) * 16ms)}
.svx.is-live .svx-c-days svg{transition:opacity .4s var(--e-out),transform .7s var(--e-spring);transition-delay:1.15s}
.svx.is-live .svx-c-task--b svg{transition-delay:1.3s}
.svx.is-live .svx-c-task--s svg{transition-delay:1.45s}
.svx.is-live .svx-c-safe{transition-delay:1.75s}
.svx.is-live .svx-c-beat{transition:stroke-dashoffset 1.5s cubic-bezier(.45,0,.25,1) .3s}
.svx.is-live .svx-c-now{transition:opacity .3s 1.75s}
.svx.is-live .svx-c-mon .svx-pill{transition-delay:1.85s}
.svx.is-live .svx-c-doc{transition-delay:.85s}
.svx.is-live .svx-c-change{transition-delay:2.2s}
.svx.is-live .svx-c-query{transition:max-width .9s steps(13,end) .45s}
.svx.is-live .svx-c-search .svx-label{transition-delay:1.4s}
.svx.is-live .svx-c-hit{transition-delay:1.5s}
.svx.is-live .svx-c-gbp{transition-delay:1.2s}
.svx.is-live .svx-c-pin{animation:svx-c-drop .9s var(--e-out) 2s both}
.svx.is-live .svx-c-prio{transition-delay:2.45s}
.svx--c-plan{--t0:.75s}
.svx.is-live .svx-c-under{transition-delay:.3s}
.svx--c-pro .svx-c-under:first-child{--tuck:3.4em}
.svx.is-live.svx--c-pro .svx-c-under:first-child{transition-delay:.42s}
.svx.is-live .svx-c-tier .svx-pill{transition:opacity .4s var(--e-out),transform .7s var(--e-spring);transition-delay:1.1s}
.svx.is-live .svx-c-moment{transition-delay:1.35s}