/* Optimy Kit — every selector scoped under .optimy-kit */
.optimy-kit{
  --ink:#12343B; --ink-deep:#0A2429; --ink-soft:#4A6B70; --ink-faint:#7B979B;
  --teal:#0E8A80; --teal-deep:#0B5F63; --teal-dark:#083E45;
  --mint:#D6ECE2; --mint-pale:#EDF6F1;
  --cream:#F6F0E0; --cream-pale:#FBF7EC;
  --amber:#E4A03C; --amber-pale:#F7E4C4;
  --white:#fff;
  --display:'Baloo 2',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --wrap:1160px;
}
.optimy-kit *, .optimy-kit *::before, .optimy-kit *::after{box-sizing:border-box;}
.optimy-kit img{max-width:100%;display:block;}
.optimy-kit a{color:inherit;}
.optimy-kit h1, .optimy-kit h2, .optimy-kit h3, .optimy-kit h4{font-family:var(--display);font-weight:800;line-height:1.1;letter-spacing:-.01em;margin:0;}
.optimy-kit .o-wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
.optimy-kit .o-eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
}
.optimy-kit .o-eyebrow::before{content:"";width:26px;height:2px;background:var(--amber);border-radius:2px;flex:none;}
.optimy-kit .o-eyebrow--onDark{color:var(--mint);}
.optimy-kit .o-h2{font-size:clamp(28px,4.2vw,46px);margin-bottom:14px;}
.optimy-kit .o-lede{max-width:52ch;color:var(--ink-soft);font-size:clamp(15px,1.6vw,17px);margin:0;}
.optimy-kit .o-section{padding:clamp(64px,8vw,110px) 0;}
.optimy-kit .o-btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;
  font-size:15px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-family:var(--body);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.optimy-kit .o-btn svg{width:16px;height:16px;fill:currentColor;flex:none;}
.optimy-kit .o-btn:hover{transform:translateY(-2px);}
.optimy-kit .o-btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px;}
.optimy-kit .o-btn--amber{background:var(--amber);color:#3A2607;box-shadow:0 10px 24px -10px rgba(228,160,60,.9);}
.optimy-kit .o-btn--amber:hover{background:#D8942F;}
.optimy-kit .o-btn--teal{background:var(--teal);color:#fff;box-shadow:0 10px 22px -10px rgba(14,138,128,.8);}
.optimy-kit .o-btn--teal:hover{background:var(--teal-deep);}
.optimy-kit .o-btn--ghostLight{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);}
.optimy-kit .o-btn--ghostLight:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);}
.optimy-kit .o-btn--ghostDark{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(18,52,59,.16);}
.optimy-kit .o-btn--ghostDark:hover{box-shadow:inset 0 0 0 2px rgba(18,52,59,.42);}
.optimy-kit .o-topbar{background:var(--teal-dark);color:rgba(255,255,255,.72);font-size:13px;}
.optimy-kit .o-topbar .o-wrap{display:flex;gap:22px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;}
.optimy-kit .o-topbar a{text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:color .15s;}
.optimy-kit .o-topbar a:hover{color:#fff;}
.optimy-kit .o-topbar svg{width:13px;height:13px;fill:currentColor;opacity:.7;}
.optimy-kit .o-topbar__spacer{margin-left:auto;}
.optimy-kit .o-header{position:sticky;top:0;z-index:60;background:var(--teal-deep);}
.optimy-kit .o-header .o-wrap{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px;}
.optimy-kit .o-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.02em;}
.optimy-kit .o-logo__mark{width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,#5FCBB0,#0E8A80 60%,#0B5F63);display:grid;place-items:center;flex:none;}
.optimy-kit .o-logo__mark span{width:11px;height:11px;border-radius:50% 50% 45% 45%;background:#fff;}
.optimy-kit .o-nav{display:flex;gap:4px;margin-left:14px;}
.optimy-kit .o-nav a{
  text-decoration:none;color:rgba(255,255,255,.82);font-size:14.5px;font-weight:600;
  padding:9px 14px;border-radius:999px;transition:background .15s,color .15s;
}
.optimy-kit .o-nav a:hover{background:rgba(255,255,255,.1);color:#fff;}
.optimy-kit .o-header__cta{margin-left:auto;display:flex;gap:10px;align-items:center;}
.optimy-kit .o-header__cta .o-btn{padding:11px 20px;font-size:14px;}
.optimy-kit .o-burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;}
.optimy-kit .o-burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;margin:4px 0;}
.optimy-kit .o-hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 78% 12%,#17A08F 0%,#0E8A80 38%,#0B5F63 72%,#083E45 100%);
}
.optimy-kit .o-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:64px;
  background:var(--cream);
  clip-path:polygon(0 62%,100% 0,100% 100%,0 100%);
}
.optimy-kit .o-hero .o-wrap{
  position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);
  align-items:center;padding-top:clamp(52px,7vw,88px);padding-bottom:clamp(88px,10vw,132px);
}
.optimy-kit .o-hero__kicker{
  display:inline-block;margin-bottom:20px;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;
}
.optimy-kit .o-hero h1{font-size:clamp(38px,5.6vw,64px);line-height:1.02;margin-bottom:20px;}
.optimy-kit .o-hero h1 em{font-style:normal;color:var(--amber);}
.optimy-kit .o-hero__sub{max-width:46ch;font-size:clamp(15.5px,1.7vw,18px);color:rgba(255,255,255,.86);margin:0 0 30px;}
.optimy-kit .o-hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px;}
.optimy-kit .o-hero__trust{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:rgba(255,255,255,.72);}
.optimy-kit .o-hero__trust span{display:inline-flex;align-items:center;gap:7px;}
.optimy-kit .o-hero__trust svg{width:14px;height:14px;fill:var(--amber);flex:none;}
.optimy-kit .o-ticket{
  position:relative;background:#fff;color:var(--ink);border-radius:4px;
  padding:26px 24px 30px;font-family:var(--mono);font-size:13px;line-height:1.85;
  box-shadow:0 30px 60px -22px rgba(4,32,36,.6);
  max-width:370px;margin-left:auto;
  transform:rotate(-1.1deg);
}
.optimy-kit .o-ticket::before, .optimy-kit .o-ticket::after{
  content:"";position:absolute;left:0;right:0;height:9px;
  background:
    radial-gradient(circle at 5px 0, transparent 0 5px, #fff 5px) repeat-x;
  background-size:10px 9px;
}
.optimy-kit .o-ticket::before{top:-8px;transform:rotate(180deg);}
.optimy-kit .o-ticket::after{bottom:-8px;}
.optimy-kit .o-ticket__head{text-align:center;border-bottom:1px dashed #C9D6D6;padding-bottom:12px;margin-bottom:12px;}
.optimy-kit .o-ticket__brand{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.02em;line-height:1.2;}
.optimy-kit .o-ticket__meta{font-size:11.5px;color:var(--ink-soft);}
.optimy-kit .o-ticket__row{display:flex;justify-content:space-between;gap:12px;}
.optimy-kit .o-ticket__row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.optimy-kit .o-ticket__rule{border-top:1px dashed #C9D6D6;margin:12px 0;}
.optimy-kit .o-ticket__total{
  display:flex;justify-content:space-between;font-weight:700;font-size:17px;
  font-family:var(--body);letter-spacing:-.01em;
}
.optimy-kit .o-ticket__stamp{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:6px;font-size:11.5px;font-weight:700;
}
.optimy-kit .o-ticket__stamp b{color:var(--teal);display:inline-flex;align-items:center;gap:5px;}
.optimy-kit .o-ticket__stamp svg{width:12px;height:12px;fill:var(--teal);}
.optimy-kit .o-ticket__lhdn{
  margin-top:14px;padding:9px 12px;border-radius:6px;background:var(--mint-pale);
  border:1px dashed rgba(14,138,128,.4);font-size:11px;line-height:1.5;color:var(--teal-deep);
  display:flex;align-items:center;gap:8px;font-weight:700;
}
.optimy-kit .o-ticket__lhdn svg{width:15px;height:15px;fill:var(--teal);flex:none;}
.optimy-kit .o-ticket .o-line{opacity:0;animation:oIn .34s ease forwards;}
@keyframes oIn{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
.optimy-kit .o-ticket .o-line:nth-child(1){animation-delay:.20s}
.optimy-kit .o-ticket .o-line:nth-child(2){animation-delay:.38s}
.optimy-kit .o-ticket .o-line:nth-child(3){animation-delay:.54s}
.optimy-kit .o-ticket .o-line:nth-child(4){animation-delay:.68s}
.optimy-kit .o-ticket .o-line:nth-child(5){animation-delay:.82s}
.optimy-kit .o-ticket .o-line:nth-child(6){animation-delay:.96s}
.optimy-kit .o-ticket .o-line:nth-child(7){animation-delay:1.10s}
.optimy-kit .o-ticket .o-line:nth-child(8){animation-delay:1.24s}
.optimy-kit .o-ticket .o-line:nth-child(9){animation-delay:1.40s}
.optimy-kit .o-ticket .o-line:nth-child(10){animation-delay:1.58s}
.optimy-kit .o-ticket .o-line:nth-child(11){animation-delay:1.76s}
.optimy-kit .o-ticket .o-line:nth-child(12){animation-delay:1.96s}
.optimy-kit .o-proof{background:var(--cream);padding:clamp(34px,4vw,52px) 0;}
.optimy-kit .o-proof .o-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.optimy-kit .o-proof__n{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1;color:var(--teal-deep);}
.optimy-kit .o-proof__l{font-size:13.5px;color:var(--ink-soft);margin-top:7px;}
.optimy-kit .o-outlets{background:var(--white);}
.optimy-kit .o-outlets__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:38px;}
.optimy-kit .o-outlet{
  padding:26px 18px;border-radius:16px;background:var(--cream-pale);
  border:1px solid rgba(18,52,59,.07);text-align:center;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.optimy-kit .o-outlet:hover{transform:translateY(-4px);background:var(--mint-pale);box-shadow:0 16px 30px -18px rgba(11,95,99,.5);}
.optimy-kit .o-outlet__ico{width:42px;height:42px;margin:0 auto 14px;fill:var(--teal);}
.optimy-kit .o-outlet__n{font-family:var(--display);font-weight:700;font-size:17px;}
.optimy-kit .o-outlet__d{font-size:12.5px;color:var(--ink-faint);margin-top:5px;line-height:1.45;}
.optimy-kit .o-flow{background:var(--cream);}
.optimy-kit .o-flow__head{margin-bottom:clamp(28px,4vw,40px);}
.optimy-kit .o-stage{
  position:relative;border-radius:20px;overflow:hidden;
  aspect-ratio:16/9;background:transparent;
}
.optimy-kit .o-stage video{display:block;width:100%;height:100%;object-fit:cover;}
.optimy-kit .o-hud{
  position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:9px;
  padding:7px 13px 7px 8px;border-radius:999px;background:rgba(18,52,59,.52);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s;
}
.optimy-kit .o-stage:hover .o-hud, .optimy-kit .o-stage:focus-within .o-hud, .optimy-kit .o-flow.is-paused .o-hud{opacity:1;transform:none;}
.optimy-kit .o-hud__btn{width:26px;height:26px;border:0;border-radius:50%;background:#fff;color:var(--teal-deep);cursor:pointer;display:grid;place-items:center;padding:0;flex:none;}
.optimy-kit .o-hud__btn svg{width:11px;height:11px;fill:currentColor;}
.optimy-kit .o-hud__btn .i-pause{display:none;}
.optimy-kit .o-flow.is-playing .o-hud__btn .i-play{display:none;}
.optimy-kit .o-flow.is-playing .o-hud__btn .i-pause{display:block;}
.optimy-kit .o-hud__t{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.92);}
.optimy-kit .o-hud__s{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);padding-left:9px;border-left:1px solid rgba(255,255,255,.25);}
.optimy-kit .o-bigplay{
  position:absolute;inset:0;margin:auto;width:70px;height:70px;border:0;border-radius:50%;
  background:#fff;color:var(--teal-deep);cursor:pointer;display:none;place-items:center;
  box-shadow:0 10px 30px -8px rgba(11,95,99,.55);transition:transform .18s;
}
.optimy-kit .o-bigplay svg{width:22px;height:22px;fill:currentColor;margin-left:4px;}
.optimy-kit .o-bigplay:hover{transform:scale(1.06);}
.optimy-kit .o-flow.is-idle .o-bigplay{display:grid;}
.optimy-kit .o-rail{list-style:none;margin:clamp(26px,3.4vw,38px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;}
/* v1.46 — the line starts at the middle of the first node and runs the full
   width of the video above it. The old 12.5%/87.5% assumed each node was
   centred in its column; they sit at the left of it, so the line began well
   past the first circle and stopped short of the right edge. 18px is half a
   node — keep the two in step if .o-node ever changes size. */
.optimy-kit .o-rail::before{content:"";position:absolute;top:17px;left:18px;right:0;border-top:2px dashed rgba(14,138,128,.28);}
.optimy-kit .o-rail__fill{position:absolute;top:17px;left:18px;height:2px;width:0;background:var(--teal);border-radius:2px;transition:width .25s linear;}
.optimy-kit .o-step{position:relative;}
.optimy-kit .o-node{
  position:relative;z-index:2;display:block;width:36px;height:36px;margin:0 0 14px;border-radius:50%;
  border:2px solid rgba(14,138,128,.35);background:var(--cream);color:var(--teal);
  font-family:var(--body);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;padding:0;
  transition:background .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s;
}
.optimy-kit .o-step.is-done .o-node{background:var(--teal);border-color:var(--teal);color:#fff;}
.optimy-kit .o-step.is-live .o-node{background:var(--amber);border-color:var(--amber);color:#3A2607;transform:scale(1.14);box-shadow:0 0 0 6px rgba(228,160,60,.2);}
.optimy-kit .o-node:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px;}
.optimy-kit .o-step__n{margin:0 0 6px;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);transition:color .22s;}
.optimy-kit .o-step.is-live .o-step__n, .optimy-kit .o-step.is-done .o-step__n{color:var(--ink);}
.optimy-kit .o-step__d{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft);opacity:.78;transition:opacity .22s;}
.optimy-kit .o-step.is-live .o-step__d{opacity:1;}
.optimy-kit .o-features{background:var(--white);}
.optimy-kit .o-group{margin-top:clamp(38px,5vw,58px);}
.optimy-kit .o-group__bar{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;border-bottom:2px solid var(--mint);margin-bottom:22px;}
.optimy-kit .o-group__k{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--amber);letter-spacing:.06em;}
.optimy-kit .o-group__t{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.3vw,25px);}
.optimy-kit .o-group__s{margin-left:auto;font-size:13px;color:var(--ink-faint);text-align:right;}
.optimy-kit .o-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.optimy-kit .o-card{
  padding:22px 20px;border-radius:14px;background:var(--cream-pale);
  border:1px solid rgba(18,52,59,.07);transition:transform .18s,box-shadow .18s;
}
.optimy-kit .o-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(11,95,99,.55);}
.optimy-kit .o-card__ico{width:30px;height:30px;fill:var(--teal);margin-bottom:13px;}
.optimy-kit .o-card__t{font-family:var(--display);font-weight:700;font-size:16.5px;margin-bottom:6px;}
.optimy-kit .o-card__d{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0;}
.optimy-kit .o-screens{background:var(--teal-dark);color:#fff;}
.optimy-kit .o-screens .o-h2{color:#fff;}
.optimy-kit .o-screens .o-lede{color:rgba(255,255,255,.72);}
.optimy-kit .o-tabs{display:inline-flex;gap:5px;padding:5px;border-radius:999px;background:rgba(255,255,255,.1);margin:26px 0 34px;}
.optimy-kit .o-tab{
  border:0;background:none;color:rgba(255,255,255,.7);font-family:var(--body);font-weight:700;font-size:14px;
  padding:10px 24px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s;
}
.optimy-kit .o-tab[aria-selected="true"]{background:#fff;color:var(--teal-dark);}
.optimy-kit .o-tab:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}
.optimy-kit .o-panel[hidden]{display:none;}

.optimy-kit .o-screens__note{margin-top:22px;font-size:13px;color:rgba(255,255,255,.5);text-align:center;}
.optimy-kit .o-clients{background:var(--cream);text-align:center;}
.optimy-kit .o-clients .o-eyebrow{justify-content:center;}
.optimy-kit .o-logos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:38px;}
.optimy-kit .o-logos div{
  height:74px;border-radius:12px;background:rgba(255,255,255,.75);border:1px dashed rgba(18,52,59,.14);
  display:grid;place-items:center;font-size:11px;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;font-weight:600;
}
.optimy-kit .o-cta{background:var(--white);}
.optimy-kit .o-cta__box{
  background:radial-gradient(120% 120% at 12% 10%,#17A08F 0%,#0E8A80 42%,#0B5F63 100%);
  border-radius:26px;padding:clamp(32px,5vw,58px);color:#fff;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center;
}
.optimy-kit .o-cta__box h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:14px;}
.optimy-kit .o-cta__box p{color:rgba(255,255,255,.82);margin:0 0 24px;max-width:40ch;}
.optimy-kit .o-cta__ways{display:flex;flex-direction:column;gap:11px;font-size:14.5px;}
.optimy-kit .o-cta__ways a{text-decoration:none;display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.9);}
.optimy-kit .o-cta__ways a:hover{color:#fff;}
.optimy-kit .o-cta__ways svg{width:17px;height:17px;fill:var(--amber);flex:none;}
.optimy-kit .o-form{background:#fff;border-radius:18px;padding:26px;color:var(--ink);}
.optimy-kit .o-form h3{font-size:20px;margin-bottom:5px;}
.optimy-kit .o-form__sub{font-size:13px;color:var(--ink-faint);margin:0 0 18px;}
.optimy-kit .o-field{margin-bottom:12px;}
.optimy-kit .o-field label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px;}
.optimy-kit .o-field input, .optimy-kit .o-field select{
  width:100%;padding:11px 13px;border-radius:10px;border:1px solid rgba(18,52,59,.14);
  font-family:var(--body);font-size:14.5px;color:var(--ink);background:#fff;
}
.optimy-kit .o-field input:focus, .optimy-kit .o-field select:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,138,128,.14);}
.optimy-kit .o-form .o-btn{width:100%;justify-content:center;margin-top:6px;}
.optimy-kit .o-form__fine{font-size:11.5px;color:var(--ink-faint);text-align:center;margin:12px 0 0;}
.optimy-kit .o-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.optimy-kit .o-footer{background:var(--ink-deep);color:rgba(255,255,255,.62);font-size:14px;padding:clamp(48px,6vw,72px) 0 0;}
.optimy-kit .o-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:44px;}
.optimy-kit .o-footer h4{color:#fff;font-size:13px;font-family:var(--body);font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px;}
.optimy-kit .o-footer a{text-decoration:none;transition:color .15s;}
.optimy-kit .o-footer a:hover{color:#fff;}
.optimy-kit .o-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.optimy-kit .o-footer__tag{margin:14px 0 20px;max-width:30ch;line-height:1.6;}
.optimy-kit .o-social{display:flex;gap:9px;}
.optimy-kit .o-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.09);display:grid;place-items:center;}
.optimy-kit .o-social a:hover{background:var(--teal);}
.optimy-kit .o-social svg{width:16px;height:16px;fill:#fff;}
.optimy-kit .o-footer__contact li{display:flex;gap:10px;line-height:1.55;}
.optimy-kit .o-footer__contact svg{width:15px;height:15px;fill:var(--teal);flex:none;margin-top:4px;}
.optimy-kit .o-footer__base{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:12.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
@media (max-width:1000px){.optimy-kit .o-hero .o-wrap{grid-template-columns:1fr;}
.optimy-kit .o-ticket{margin:0 auto;}
.optimy-kit .o-outlets__grid{grid-template-columns:repeat(3,1fr);}
.optimy-kit .o-cards{grid-template-columns:repeat(2,1fr);}
.optimy-kit .o-logos{grid-template-columns:repeat(3,1fr);}
.optimy-kit .o-cta__box{grid-template-columns:1fr;}
.optimy-kit .o-footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:780px){.optimy-kit .o-nav, .optimy-kit .o-header__cta{display:none;}
.optimy-kit .o-burger{display:block;}
.optimy-kit .o-header.is-open .o-nav{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--teal-deep);padding:12px 22px 20px;gap:2px;margin:0;
  }
.optimy-kit .o-header.is-open .o-header__cta{display:flex;position:absolute;top:100%;left:22px;right:22px;margin:0;transform:translateY(210px);}
.optimy-kit .o-proof .o-wrap{grid-template-columns:repeat(2,1fr);gap:22px;}
.optimy-kit .o-outlets__grid{grid-template-columns:repeat(2,1fr);}
.optimy-kit .o-group__s{display:none;}
.optimy-kit .o-rail{grid-template-columns:1fr;gap:0;padding-left:4px;}
.optimy-kit .o-rail::before{top:18px;bottom:30px;left:21px;right:auto;width:0;border-top:0;border-left:2px dashed rgba(14,138,128,.28);}
.optimy-kit .o-rail__fill{top:18px;left:21px;width:2px!important;height:0;max-width:none;transition:height .25s linear;}
.optimy-kit .o-step{display:grid;grid-template-columns:36px 1fr;column-gap:16px;padding-bottom:26px;}
.optimy-kit .o-node{margin-bottom:0;grid-row:1/span 2;}
.optimy-kit .o-step__n{align-self:center;margin-top:8px;}
.optimy-kit .o-step__d{grid-column:2;}
.optimy-kit .o-row2{grid-template-columns:1fr;}
.optimy-kit .o-footer__grid{grid-template-columns:1fr;gap:30px;}
.optimy-kit .o-topbar__spacer{display:none;}}
@media (max-width:520px){.optimy-kit .o-cards, .optimy-kit .o-logos{grid-template-columns:1fr 1fr;}
.optimy-kit .o-hero__btns .o-btn{flex:1 1 100%;justify-content:center;}}
@media (prefers-reduced-motion:reduce){.optimy-kit html{scroll-behavior:auto;}
.optimy-kit *, .optimy-kit *::before, .optimy-kit *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
.optimy-kit .o-ticket .o-line{opacity:1;}}

/* ===== pricing + hardware ===== */
.optimy-kit .o-phero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 78% 10%,#17A08F 0%,#0E8A80 40%,#0B5F63 74%,#083E45 100%);
  padding:clamp(46px,6vw,78px) 0 clamp(56px,7vw,92px);
}
.optimy-kit .o-phero .o-eyebrow{color:var(--mint);}
.optimy-kit .o-phero h1{font-size:clamp(32px,4.8vw,52px);line-height:1.05;margin-bottom:16px;max-width:18ch;}
.optimy-kit .o-phero p{max-width:52ch;color:rgba(255,255,255,.84);font-size:clamp(15px,1.6vw,17.5px);margin:0;}
.optimy-kit .o-phero__note{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:13.5px;font-weight:600;
}
.optimy-kit .o-phero__note svg{width:15px;height:15px;fill:var(--amber);flex:none;}
.optimy-kit .o-plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px;align-items:start;}
/* No border on the card. It used to carry `border:1.5px solid` — a half
   pixel, which lands between device pixels on a phone and left a pale hairline
   across the card on real handsets. The card is cream on a white section, so
   it still reads as a card without an outline; the amber "most complete" ring
   is drawn as an inset shadow instead, on whole pixels, so it never
   reintroduces the same rounding. */
.optimy-kit .o-plan{
  position:relative;border-radius:20px;padding:30px 28px;background:var(--cream-pale);
  border:0;
}
.optimy-kit .o-plan--best{
  background:#fff;
  box-shadow:inset 0 0 0 2px var(--amber), 0 20px 44px -24px rgba(11,95,99,.5);
}
.optimy-kit .o-plan__tag{
  position:absolute;top:-13px;right:24px;padding:6px 15px;border-radius:999px;
  background:var(--amber);color:#3A2607;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.optimy-kit .o-plan__name{font-family:var(--display);font-weight:800;font-size:27px;margin-bottom:3px;}
.optimy-kit .o-plan__for{font-size:13.5px;color:var(--ink-faint);margin:0 0 20px;}
.optimy-kit .o-plan__prices{display:flex;align-items:flex-end;gap:11px;flex-wrap:wrap;}
.optimy-kit .o-plan__was{font-family:var(--mono);font-size:17px;color:var(--ink-faint);text-decoration:line-through;padding-bottom:6px;}
.optimy-kit .o-plan__now{font-family:var(--display);font-weight:800;font-size:46px;line-height:1;color:var(--teal-deep);}
.optimy-kit .o-plan__per{font-size:14px;color:var(--ink-soft);padding-bottom:7px;}
.optimy-kit .o-plan__year{
  margin:12px 0 22px;padding:9px 14px;border-radius:9px;background:rgba(14,138,128,.09);
  font-size:13px;font-weight:600;color:var(--teal-deep);display:inline-block;
}
.optimy-kit .o-plan .o-btn{width:100%;justify-content:center;}
.optimy-kit .o-plan__list{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px dashed rgba(18,52,59,.16);display:flex;flex-direction:column;gap:11px;}
.optimy-kit .o-plan__list li{display:flex;gap:11px;font-size:14.5px;line-height:1.45;}
.optimy-kit .o-plan__list svg{width:16px;height:16px;fill:var(--teal);flex:none;margin-top:3px;}
.optimy-kit .o-plan__list li.is-extra{font-weight:700;color:var(--ink);}
.optimy-kit .o-plan__list li.is-extra svg{fill:var(--amber);}
.optimy-kit .o-plan__listhead{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:-2px;}
.optimy-kit .o-calc{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.5vw,44px);margin-top:38px;align-items:start;}
.optimy-kit .o-calc__controls{display:flex;flex-direction:column;gap:24px;}
.optimy-kit .o-cgroup__t{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;}
.optimy-kit .o-opts{display:flex;flex-direction:column;gap:9px;}
.optimy-kit .o-opt{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;
  background:#fff;border:1px solid rgba(18,52,59,.11);cursor:pointer;transition:border-color .16s,background .16s;
}
.optimy-kit .o-opt:hover{border-color:rgba(14,138,128,.5);}
.optimy-kit .o-opt input{margin:3px 0 0;accent-color:var(--teal);width:17px;height:17px;flex:none;cursor:pointer;}
.optimy-kit .o-opt input:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}
.optimy-kit .o-opt__b{flex:1;min-width:0;}
.optimy-kit .o-opt__n{font-weight:700;font-size:14.5px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.optimy-kit .o-opt__p{font-family:var(--mono);font-size:13.5px;color:var(--teal);white-space:nowrap;}
.optimy-kit .o-opt__d{font-size:12.5px;color:var(--ink-faint);margin-top:3px;line-height:1.45;}
.optimy-kit .o-opt:has(input:checked){border-color:var(--teal);background:var(--mint-pale);}
.optimy-kit .o-opt.is-off{opacity:.45;pointer-events:none;}
.optimy-kit .o-quote{
  position:sticky;top:96px;background:#fff;border-radius:4px;padding:26px 24px 28px;
  font-family:var(--mono);font-size:13px;line-height:1.9;
  box-shadow:0 22px 48px -22px rgba(4,32,36,.45);border:1px solid rgba(18,52,59,.08);
}
.optimy-kit .o-quote::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:9px;
  background:radial-gradient(circle at 5px 0,transparent 0 5px,#fff 5px) repeat-x;background-size:10px 9px;
}
.optimy-kit .o-quote__h{text-align:center;border-bottom:1px dashed #C9D6D6;padding-bottom:13px;margin-bottom:13px;}
.optimy-kit .o-quote__h b{font-family:var(--display);font-size:19px;display:block;}
.optimy-kit .o-quote__h span{font-size:11px;color:var(--ink-faint);}
.optimy-kit .o-quote__row{display:flex;justify-content:space-between;gap:12px;}
.optimy-kit .o-quote__row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.optimy-kit .o-quote__row.is-muted{color:var(--ink-faint);}
.optimy-kit .o-quote__rule{border-top:1px dashed #C9D6D6;margin:13px 0;}
.optimy-kit .o-quote__total{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--body);font-weight:800;font-size:23px;letter-spacing:-.01em;}
.optimy-kit .o-quote__then{
  margin-top:15px;padding:11px 13px;border-radius:8px;background:var(--mint-pale);
  border:1px dashed rgba(14,138,128,.35);font-family:var(--body);font-size:12.5px;line-height:1.5;color:var(--teal-deep);
}
.optimy-kit .o-quote__then b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;}
.optimy-kit .o-quote .o-btn{width:100%;justify-content:center;margin-top:16px;font-family:var(--body);}
.optimy-kit .o-quote__fine{font-family:var(--body);font-size:11px;color:var(--ink-faint);text-align:center;line-height:1.5;margin:12px 0 0;}
.optimy-kit .o-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;}
.optimy-kit .o-pack{
  display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid rgba(18,52,59,.1);transition:transform .18s,box-shadow .18s;
}
.optimy-kit .o-pack:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(11,95,99,.55);}
/* The box owns the shape; the picture fills it and letterboxes itself.
   It used to size the image with `max-height:100%`, a percentage measured
   against a height that comes from `aspect-ratio` — Chrome quietly grew the
   box to fit instead, and Safari kept the 4/3 box and let the image spill out
   the bottom over the card body, which is what showed on the iPhone. Giving
   the image a definite width and height plus object-fit:contain removes the
   percentage entirely, so every engine draws the same 4/3 box. overflow is
   the guard if any future content tries to escape. Same on .o-dev__img. */
.optimy-kit .o-pack__img{position:relative;background:var(--mint-pale);aspect-ratio:4/3;overflow:hidden;}
.optimy-kit .o-pack__img img{
  position:absolute;inset:0;width:100%;height:100%;
  padding:18px;box-sizing:border-box;object-fit:contain;display:block;
}
.optimy-kit .o-pack__b{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.optimy-kit .o-pack__k{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);margin-bottom:5px;}
.optimy-kit .o-pack__n{font-family:var(--display);font-weight:800;font-size:24px;margin-bottom:14px;}
.optimy-kit .o-pack__spec{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.45;}
.optimy-kit .o-pack__spec li{display:flex;gap:10px;}
.optimy-kit .o-pack__spec svg{width:15px;height:15px;fill:var(--teal);flex:none;margin-top:3px;}
.optimy-kit .o-pack__spec b{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}
.optimy-kit .o-pack__price{margin-top:auto;padding-top:16px;border-top:1px dashed rgba(18,52,59,.16);}
.optimy-kit .o-pack__was{font-family:var(--mono);font-size:15px;color:var(--ink-faint);text-decoration:line-through;}
.optimy-kit .o-pack__now{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;color:var(--teal-deep);margin:2px 0 4px;}
.optimy-kit .o-pack__fine{font-size:11.5px;color:var(--ink-faint);margin:0 0 15px;}
.optimy-kit .o-pack .o-btn{width:100%;justify-content:center;}
.optimy-kit .o-items{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
.optimy-kit .o-item{
  display:flex;gap:16px;padding:20px;border-radius:14px;background:var(--cream-pale);
  border:1px solid rgba(18,52,59,.07);align-items:flex-start;
}
.optimy-kit .o-item__img{width:64px;height:64px;flex:none;border-radius:10px;background:#fff;display:grid;place-items:center;padding:7px;border:1px solid rgba(18,52,59,.06);}
.optimy-kit .o-item__img img{max-width:100%;max-height:100%;object-fit:contain;}
.optimy-kit .o-item__n{font-family:var(--display);font-weight:700;font-size:16.5px;margin-bottom:4px;}
.optimy-kit .o-item__d{font-size:13px;color:var(--ink-soft);margin:0 0 8px;line-height:1.5;}
.optimy-kit .o-item__p{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--teal-deep);
  display:flex;flex-direction:column;gap:2px;}
.optimy-kit .o-item__pl{display:block;}
.optimy-kit .o-item__pl ~ .o-item__pl{font-size:13.5px;color:var(--teal);}
.optimy-kit .o-devs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;}
.optimy-kit .o-dev{border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(18,52,59,.1);display:flex;flex-direction:column;}
.optimy-kit .o-dev__img{position:relative;background:var(--mint-pale);aspect-ratio:1/1;overflow:hidden;}
.optimy-kit .o-dev__img img{
  position:absolute;inset:0;width:100%;height:100%;
  padding:24px;box-sizing:border-box;object-fit:contain;display:block;
}
.optimy-kit .o-dev__b{padding:22px;flex:1;display:flex;flex-direction:column;}
.optimy-kit .o-dev__n{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:3px;}
.optimy-kit .o-dev__sz{font-size:13px;color:var(--teal);font-weight:700;margin-bottom:16px;}
.optimy-kit .o-dev__specs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.optimy-kit .o-dev__specs li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed rgba(18,52,59,.12);font-size:13.5px;}
.optimy-kit .o-dev__specs li:last-child{border:0;}
.optimy-kit .o-dev__specs span:first-child{color:var(--ink-faint);}
.optimy-kit .o-dev__specs b{font-weight:700;text-align:right;}
.optimy-kit .o-band{background:var(--teal-dark);color:#fff;border-radius:22px;padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.optimy-kit .o-band__i{width:30px;height:30px;fill:var(--amber);margin-bottom:12px;}
.optimy-kit .o-band__t{font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:6px;}
.optimy-kit .o-band__d{font-size:14px;color:rgba(255,255,255,.75);margin:0;line-height:1.55;}
@media (max-width:1000px){.optimy-kit .o-plans, .optimy-kit .o-calc{grid-template-columns:1fr;}
/* Not `static`. The box only needs to stop sticking here, but going static
   also removed the containing block for .o-quote::after — the perforated
   edge — which is absolutely positioned. It then anchored to <body> and drew
   a 9px white strip right across the page at left:0/right:0, nowhere near the
   receipt. `relative` stops the sticking and keeps the edge attached. */
.optimy-kit .o-quote{position:relative;top:auto;}
.optimy-kit .o-packs, .optimy-kit .o-devs, .optimy-kit .o-items{grid-template-columns:repeat(2,1fr);}
.optimy-kit .o-band{grid-template-columns:1fr;gap:22px;}}
@media (max-width:640px){.optimy-kit .o-packs, .optimy-kit .o-devs, .optimy-kit .o-items{grid-template-columns:1fr;}}

/* Narrow phones: the package card was eating the width. Card body padding 22
   plus a 15px icon plus a 10px gap put the spec text 47px inside a card that
   already sits 22px in — so on a 320px screen the words started 70px from the
   edge while the page heading started at 22px, which is what reads as the
   card being pushed to the right. Trimmed to 61px, and the right-hand padding
   comes back as line length. Untouched above 480px. */
@media (max-width:480px){
  .optimy-kit .o-pack__b{padding:20px 16px 22px;}
  .optimy-kit .o-pack__spec li{gap:9px;}
  .optimy-kit .o-pack__spec svg{width:14px;height:14px;}
}

/* ===== real logo + WordPress menu in the kit header ===== */
.optimy-kit .o-logo__img{height:34px;width:auto;display:block;max-width:180px;object-fit:contain;}
.optimy-kit .o-footer .o-logo__img{height:38px;}
.optimy-kit .o-nav__list{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center;}
.optimy-kit .o-nav--wp{display:flex;margin-left:14px;}
.optimy-kit .o-nav--wp a{
  text-decoration:none;color:rgba(255,255,255,.82);font-size:14.5px;font-weight:600;
  padding:9px 14px;border-radius:999px;display:block;transition:background .15s,color .15s;
}
.optimy-kit .o-nav--wp a:hover,.optimy-kit .o-nav--wp .current-menu-item>a{background:rgba(255,255,255,.1);color:#fff;}
@media (max-width:780px){
  .optimy-kit .o-nav--wp{display:none;}
  .optimy-kit .o-header.is-open .o-nav--wp{
    display:flex;position:absolute;top:100%;left:0;right:0;
    background:var(--teal-deep);padding:12px 22px 20px;margin:0;
  }
  .optimy-kit .o-header.is-open .o-nav__list{flex-direction:column;align-items:stretch;gap:2px;}
}

/* ===== v1.4 — real-content layouts ===== */
.optimy-kit .o-proof--three{grid-template-columns:repeat(3,1fr);gap:26px;}
.optimy-kit .o-proof__t{font-family:var(--display);font-weight:800;font-size:clamp(19px,2.3vw,24px);line-height:1.15;color:var(--teal-deep);}
.optimy-kit .o-proof__l{font-size:14px;color:var(--ink-soft);margin-top:8px;line-height:1.55;}

.optimy-kit .o-outlets__grid .o-outlet{padding:30px 16px;}

.optimy-kit .o-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.optimy-kit .o-shot{
  aspect-ratio:3/4;border-radius:14px;background:rgba(255,255,255,.07);
  border:1px dashed rgba(255,255,255,.28);display:grid;place-items:center;
  font-size:12px;color:rgba(255,255,255,.6);text-align:center;padding:12px;
}
.optimy-kit .o-shot--wide{aspect-ratio:4/3;}

.optimy-kit .o-apps{display:grid;gap:18px;margin-top:38px;}
.optimy-kit .o-app{
  display:flex;gap:22px;padding:26px;border-radius:18px;background:var(--cream-pale);
  border:1px solid rgba(18,52,59,.08);align-items:flex-start;
}
.optimy-kit .o-app__ico{
  width:58px;height:58px;flex:none;border-radius:14px;background:var(--teal);
  display:grid;place-items:center;
}
.optimy-kit .o-app__ico svg{width:28px;height:28px;fill:#fff;}
.optimy-kit .o-app__n{font-family:var(--display);font-weight:800;font-size:21px;margin-bottom:5px;}
.optimy-kit .o-app__d{font-size:14.5px;color:var(--ink-soft);margin:0 0 18px;line-height:1.55;max-width:52ch;}
.optimy-kit .o-app__btns{display:flex;flex-wrap:wrap;gap:11px;}
.optimy-kit .o-app__btns .o-btn{padding:12px 22px;font-size:14px;}

@media (max-width:900px){
  /* the three-up stacks further down the file, at the selector that wins */
  .optimy-kit .o-shots{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .optimy-kit .o-app{flex-direction:column;gap:16px;}
  .optimy-kit .o-app__btns .o-btn{flex:1 1 100%;justify-content:center;}
}

/* ===== v1.5 fixes ===== */
/* 1. Text colour. Light sections first, dark sections override with
      higher specificity so ordering can never flip them again. */
.optimy-kit .o-section h2,
.optimy-kit .o-section h3,
.optimy-kit .o-section .o-h2{color:var(--ink);}

.optimy-kit .o-hero,
.optimy-kit .o-hero h1,
.optimy-kit .o-hero h2,
.optimy-kit .o-phero,
.optimy-kit .o-phero h1,
.optimy-kit .o-phero h2,
.optimy-kit .o-section.o-screens h2,
.optimy-kit .o-section.o-screens .o-h2,
.optimy-kit .o-section.o-cta .o-cta__box,
.optimy-kit .o-section.o-cta .o-cta__box h2,
.optimy-kit .o-band,
.optimy-kit .o-band .o-band__t,
.optimy-kit .o-footer h4{color:#fff;}

.optimy-kit .o-hero h1 em{color:var(--amber);}
.optimy-kit .o-hero__sub,
.optimy-kit .o-phero p,
.optimy-kit .o-section.o-cta .o-cta__box p{color:rgba(255,255,255,.85);}
.optimy-kit .o-hero__trust,
.optimy-kit .o-section.o-screens .o-lede,
.optimy-kit .o-band .o-band__d{color:rgba(255,255,255,.75);}
.optimy-kit .o-phero .o-eyebrow,
.optimy-kit .o-section.o-screens .o-eyebrow{color:var(--mint);}

/* the demo form is a white card sitting on the dark box */
.optimy-kit .o-section.o-cta .o-form,
.optimy-kit .o-section.o-cta .o-form h3,
.optimy-kit .o-section.o-cta .o-form label,
.optimy-kit .o-section.o-cta .o-form input,
.optimy-kit .o-section.o-cta .o-form select{color:var(--ink);}
.optimy-kit .o-section.o-cta .o-form__sub,
.optimy-kit .o-section.o-cta .o-form__fine{color:var(--ink-faint);}

/* 2. Basic and Advance the same height, buttons lined up */
.optimy-kit .o-plans{align-items:stretch;}
.optimy-kit .o-plan{display:flex;flex-direction:column;}
.optimy-kit .o-plan__list{margin-top:auto;}
.optimy-kit .o-plan .o-btn{margin-top:4px;}

/* One column — phone and portrait tablet. Each card is its own grid row, so
   the auto margin above has no free space to hand out and collapses to zero.
   That put the feature list's dashed top border hard against the bottom edge
   of the Get-a-quote button, and since the button is a rounded outline the
   line appeared to run straight across the card. Restores the 22px gap from
   the base rule. This has to stay *after* the auto-margin rule — same
   specificity, so whichever comes last wins. */
@media (max-width:1000px){
  .optimy-kit .o-plan__list{margin-top:22px;}
}

/* 3. Download hero — split layout with the device shot */
.optimy-kit .o-phero--split .o-wrap{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px);align-items:center;
}
.optimy-kit .o-dl__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
/* 520px, not 420 — the monitor shot is landscape where the old D4 was
   upright, so the smaller cap left it floating in its column. The column is
   about 475px at 1280, so this fills it and the cap only bites on wider
   screens. */
.optimy-kit .o-dl__shot img{width:100%;height:auto;max-width:520px;margin-left:auto;filter:drop-shadow(0 24px 44px rgba(4,32,36,.45));}
@media (max-width:900px){
  .optimy-kit .o-phero--split .o-wrap{grid-template-columns:1fr;}
  .optimy-kit .o-dl__btns .o-btn{flex:1 1 100%;justify-content:center;}

  /* Stacked download hero leads with the terminal, then the words and the
     store buttons — same idea as the homepage hero. Scoped to .o-dl__shot on
     purpose: the receipt section shares .o-phero--split and must not flip.
     The gap below is the breathing room between the shot and the heading;
     it sits on the shot rather than the wrap's row-gap for the same reason. */
  .optimy-kit .o-dl__shot{order:-1;margin-bottom:24px;}

  /* Edge to edge on a phone. Capped at 320 the landscape shot was small, and
     the column is only 331 wide — so the picture bleeds through the wrap's
     22px padding and uses the whole screen. calc(100% + 44px) is exactly the
     viewport, so it stops at the edge and nothing scrolls sideways.
     The 520px cap matters: without it a stacked 880px tablet would have shown
     an 880px-wide monitor. Above ~520px the cap wins and it simply centres.
     Centring is done by the flex parent, not auto margins — auto margins
     collapse to zero on a box wider than its container and it would sit
     off to one side. */
  .optimy-kit .o-dl__shot{display:flex;justify-content:center;}
  .optimy-kit .o-dl__shot img{max-width:none;width:min(calc(100% + 44px),520px);margin:0;}
}

/* ===== v1.6 fixes ===== */
/* Top bar: theme link colours were winning, leaving dark text on dark teal */
.optimy-kit .o-topbar,
.optimy-kit .o-topbar a,
.optimy-kit .o-topbar a:link,
.optimy-kit .o-topbar a:visited,
.optimy-kit .o-topbar span{
  color:rgba(255,255,255,.82)!important;
  text-transform:none!important;
  text-decoration:none!important;
}
.optimy-kit .o-topbar a:hover{color:#fff!important;}
.optimy-kit .o-topbar svg{fill:rgba(255,255,255,.7);}

/* Header links too */
.optimy-kit .o-header .o-nav a,
.optimy-kit .o-header .o-nav--wp a,
.optimy-kit .o-logo{color:rgba(255,255,255,.88)!important;text-transform:none!important;}
.optimy-kit .o-header .o-nav a:hover,
.optimy-kit .o-header .o-nav--wp a:hover{color:#fff!important;}

/* Footer links */
.optimy-kit .o-footer,
.optimy-kit .o-footer a{color:rgba(255,255,255,.65);text-transform:none;}
.optimy-kit .o-footer a:hover{color:#fff;}

/* Hero hardware shot (replaces the receipt on the homepage) */
.optimy-kit .o-hero__shot{display:flex;justify-content:center;align-items:center;}
.optimy-kit .o-hero__shot img{
  width:100%;height:auto;max-width:520px;
  filter:drop-shadow(0 28px 50px rgba(4,32,36,.45));
}
@media (max-width:1000px){
  /* Matches the Download page: edge to edge on a phone, capped at 520 so a
     stacked tablet centres it instead of blowing it up to the full width.
     .o-hero__shot is already a centred flex box, which is what keeps the
     overflow even on both sides. */
  .optimy-kit .o-hero__shot img{max-width:none;width:min(calc(100% + 44px),520px);}

  /* Stacked hero leads with the hardware, then the words. The wrap is a grid
     at every width and goes single-column here, so `order` on the shot is
     what swaps the two cells — the markup order is unchanged, which keeps the
     h1 first for screen readers and search engines. Nothing else in the kit
     sets `order`, so this rule alone decides it. The margin is the breathing
     room between the shot and the eyebrow chip, on top of the wrap's gap. */
  .optimy-kit .o-hero__shot{order:-1;margin-bottom:24px;}
}

/* Receipt as a standalone split section */
.optimy-kit .o-phero--split .o-ticket{margin:0 auto;}

/* ===== v1.7 ===== */
/* FIX: the "force white" rule was turning the receipt's own text white too */
.optimy-kit .o-ticket,
.optimy-kit .o-ticket span,
.optimy-kit .o-ticket div,
.optimy-kit .o-ticket b{color:var(--ink)!important;}
.optimy-kit .o-ticket .o-ticket__meta,
.optimy-kit .o-ticket .o-ticket__meta span{color:var(--ink-soft)!important;}
.optimy-kit .o-ticket .o-ticket__stamp b,
.optimy-kit .o-ticket .o-ticket__lhdn,
.optimy-kit .o-ticket .o-ticket__lhdn span{color:var(--teal-deep)!important;}
.optimy-kit .o-ticket .o-ticket__brand{color:var(--ink)!important;}

/* client logo cells */
.optimy-kit .o-logo-cell{
  height:88px;border-radius:12px;background:rgba(255,255,255,.8);
  display:grid;place-items:center;padding:14px;overflow:hidden;
}
.optimy-kit .o-logo-cell img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.optimy-kit .o-logo-cell.is-empty{
  border:1px dashed rgba(18,52,59,.18);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;color:var(--ink-faint);text-align:center;
}


/* ===== drawn POS mock-up — icon rail switches screens =====
   v1.40 — the frame is 840px, down from 980. Everything inside is sized in
   fixed px, so a wide frame fits more in and the mock-up reads like a screen
   running too high a resolution: small type, small dish tiles. A narrower
   frame at the same 16:10 makes the same UI larger in proportion. Change the
   max-width and the tile count in the min-width:641px block together. */
.optimy-kit .o-device{
  background:#0A2429;border:9px solid #16383E;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px -26px rgba(0,0,0,.8);max-width:840px;margin:30px auto 0;
}
.optimy-kit .o-shell{display:grid;grid-template-columns:64px 1fr;background:#EDF6F1;min-height:460px;font-size:12px;}

.optimy-kit .o-navrail{background:var(--teal-deep);padding:14px 0;display:flex;flex-direction:column;gap:6px;align-items:center;}
.optimy-kit .o-nav-i{
  position:relative;width:44px;height:44px;border:0;border-radius:11px;cursor:pointer;padding:0;
  background:rgba(255,255,255,.1);display:grid;place-items:center;transition:background .16s;
}
.optimy-kit .o-nav-i svg{width:19px;height:19px;fill:rgba(255,255,255,.75);transition:fill .16s;}
.optimy-kit .o-nav-i:hover{background:rgba(255,255,255,.2);}
.optimy-kit .o-nav-i.is-on{background:var(--amber);}
.optimy-kit .o-nav-i.is-on svg{fill:#3A2607;}
.optimy-kit .o-nav-i:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}
.optimy-kit .o-nav-i__t{
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px);
  background:var(--ink);color:#fff;font-size:11px;font-weight:700;white-space:nowrap;
  padding:5px 10px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;z-index:5;
}
.optimy-kit .o-nav-i:hover .o-nav-i__t,
.optimy-kit .o-nav-i:focus-visible .o-nav-i__t{opacity:1;transform:translateY(-50%) translateX(0);}

.optimy-kit .o-scrs{position:relative;}
.optimy-kit .o-scr{display:none;grid-template-columns:1fr 240px;min-height:460px;}
.optimy-kit .o-scr.is-on{display:grid;}
.optimy-kit .o-scr__main{padding:16px;min-width:0;}
.optimy-kit .o-scr__side{background:#fff;border-left:1px solid rgba(18,52,59,.08);padding:16px 15px;display:flex;flex-direction:column;}

.optimy-kit .o-pos__bar{display:flex;align-items:center;gap:14px;margin-bottom:13px;}
.optimy-kit .o-pos__title{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);}
.optimy-kit .o-pos__search{flex:1;height:30px;border-radius:999px;background:#fff;border:1px solid rgba(18,52,59,.09);}
.optimy-kit .o-pos__search--sm{max-width:150px;flex:none;margin-left:auto;}
.optimy-kit .o-pos__mini{margin-left:auto;background:var(--teal);color:#fff;border-radius:8px;padding:7px 14px;font-size:11.5px;font-weight:700;}
.optimy-kit .o-pos__chips{
  display:flex;gap:7px;flex-wrap:nowrap;overflow:hidden;position:relative;
  margin-bottom:13px;padding-right:38px;min-width:0;
}
.optimy-kit .o-pos__chip{flex:none;}
.optimy-kit .o-pos__chip{padding:6px 14px;border-radius:999px;background:#fff;color:var(--ink-soft);font-weight:600;font-size:11.5px;border:1px solid rgba(18,52,59,.08);}
.optimy-kit .o-pos__chip.on{background:var(--teal);color:#fff;border-color:var(--teal);}

.optimy-kit .o-pos__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.optimy-kit .o-pos__item{background:#fff;border-radius:10px;padding:9px;border:1px solid rgba(18,52,59,.07);}
.optimy-kit .o-pos__thumb{aspect-ratio:1/1;border-radius:7px;overflow:hidden;background:linear-gradient(135deg,var(--mint),#BFE2D4);margin-bottom:8px;}
.optimy-kit .o-pos__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.optimy-kit .o-pos__nm{font-weight:700;font-size:11.5px;color:var(--ink);line-height:1.3;}
.optimy-kit .o-pos__pr{font-family:var(--mono);font-size:11px;color:var(--teal);margin-top:3px;}

.optimy-kit .o-tbl__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;}
/* v1.43 — a table tile as the app draws it. A seated table carries how long
   it has been open, a cutlery mark in a colour of its own, and its running
   total. A free table shows nothing but its number — no "Empty", no colour.
   Only the selected tile has anything behind it. */
.optimy-kit .o-tbl{
  position:relative;background:#fff;border:1px solid rgba(18,52,59,.10);border-radius:10px;
  padding:8px;text-align:center;min-height:94px;
  display:flex;align-items:center;justify-content:center;
}
.optimy-kit .o-tbl b{font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);}
/* the total is taken out of the flow, so a seated table's number sits in the
   middle of the tile exactly where a free one's does */
.optimy-kit .o-tbl__rm{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;color:var(--ink-soft);
  background:rgba(18,52,59,.06);border-radius:999px;padding:2px 6px;white-space:nowrap;
}
.optimy-kit .o-tbl.on{background:var(--mint-pale);border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);}
/* the mark that says someone is sitting there — a colour per table, the way
   the app tells them apart at a glance */
.optimy-kit .o-tbl__eat{
  position:absolute;top:6px;right:6px;width:17px;height:17px;padding:3.5px;
  border-radius:50%;fill:#fff;
}
.optimy-kit .o-tbl__eat--c1{background:#C08552;}
.optimy-kit .o-tbl__eat--c2{background:#EC5FA8;}
.optimy-kit .o-tbl__eat--c3{background:#7C6BD6;}
.optimy-kit .o-tbl__eat--c4{background:#2FBF9B;}
.optimy-kit .o-tbl__eat--c5{background:#E0824A;}
.optimy-kit .o-tbl__eat--c6{background:#4C8FE0;}
.optimy-kit .o-tbl__eat--c7{background:#9B2C3C;}
.optimy-kit .o-tbl__eat--c8{background:#B08D22;}

.optimy-kit .o-list{display:flex;flex-direction:column;gap:8px;}
.optimy-kit .o-card2{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid rgba(18,52,59,.07);border-radius:10px;padding:11px 13px;}
.optimy-kit .o-card2__i{width:30px;height:30px;border-radius:8px;background:var(--mint);flex:none;}
.optimy-kit .o-card2__t{font-weight:700;font-size:12.5px;color:var(--ink);}
.optimy-kit .o-card2__s{font-size:10.5px;color:var(--ink-faint);margin-top:2px;}
.optimy-kit .o-pill{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--teal-deep);background:var(--mint-pale);border-radius:999px;padding:4px 10px;white-space:nowrap;}


.optimy-kit .o-pos__okey{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}
.optimy-kit .o-pos__okey u{text-decoration:none;font-family:var(--mono);letter-spacing:.04em;}
.optimy-kit .o-pos__ohead{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);margin:2px 0 12px;}
.optimy-kit .o-pos__otabs{display:flex;gap:3px;background:var(--mint-pale);border-radius:8px;padding:3px;margin-bottom:12px;}
.optimy-kit .o-pos__otabs span{flex:1;text-align:center;padding:6px 4px;border-radius:6px;font-size:10.5px;font-weight:700;color:var(--ink-soft);}
.optimy-kit .o-pos__otabs span.on{background:var(--teal);color:#fff;}
.optimy-kit .o-pos__line{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:8px 0;border-bottom:1px dashed rgba(18,52,59,.1);color:var(--ink-soft);}
/* the direct child only — an item's name sits in a .o-pos__nmw of its own so
   the modifiers under it stack instead of joining the row. */
.optimy-kit .o-pos__line > span{display:flex;gap:8px;align-items:center;min-width:0;}
.optimy-kit .o-pos__nmw{display:block;min-width:0;}
.optimy-kit .o-pos__nmw em{display:block;font-style:normal;font-size:10px;color:var(--ink-faint);margin-top:1px;}
.optimy-kit .o-pos__line i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-faint);background:var(--mint-pale);border-radius:5px;padding:2px 5px;}
.optimy-kit .o-pos__line b{font-family:var(--mono);font-weight:400;color:var(--ink);white-space:nowrap;}
.optimy-kit .o-pos__pay{margin-top:auto;padding-top:14px;}
.optimy-kit .o-pos__tot{display:flex;justify-content:space-between;font-weight:800;font-size:15px;color:var(--ink);margin-bottom:11px;}
.optimy-kit .o-pos__btns{display:flex;gap:8px;}
.optimy-kit .o-pos__btn{flex:1;background:var(--teal);color:#fff;border-radius:9px;padding:10px;text-align:center;font-weight:700;font-size:12px;}
.optimy-kit .o-pos__btn--ghost{background:var(--teal-dark);}

.optimy-kit .o-pos__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:13px;}
.optimy-kit .o-pos__stat{background:#fff;border-radius:10px;padding:12px;border:1px solid rgba(18,52,59,.07);}
.optimy-kit .o-pos__stat span{display:block;font-size:10.5px;color:var(--ink-faint);margin-bottom:4px;}
.optimy-kit .o-pos__stat b{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);}
.optimy-kit .o-pos__chart{display:flex;align-items:flex-end;gap:10px;height:170px;background:#fff;border-radius:10px;padding:14px;border:1px solid rgba(18,52,59,.07);}
.optimy-kit .o-pos__chart span{flex:1;background:linear-gradient(180deg,var(--teal),#5FCBB0);border-radius:5px 5px 0 0;display:block;}

.optimy-kit .o-screens__note{margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.5);text-align:center;}

@media (max-width:900px){
  /* every screen, not just the visible one — they share a grid cell now, so
     a hidden screen still holding its sidebar column would set the width for
     all of them and push the frame off the side of the phone. */
  .optimy-kit .o-scr{grid-template-columns:minmax(0,1fr);}
  .optimy-kit .o-scr__side{display:none;}
  .optimy-kit .o-pos__grid{grid-template-columns:repeat(3,1fr);}
  .optimy-kit .o-tbl__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .optimy-kit .o-pos__stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .optimy-kit .o-shell{grid-template-columns:52px 1fr;}
  .optimy-kit .o-nav-i{width:38px;height:38px;}
  .optimy-kit .o-pos__grid{grid-template-columns:repeat(2,1fr);}
  .optimy-kit .o-tbl__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  }

/* ===== v1.17 — circular client logos on a looping track ===== */
/* Matches optimy.com.my: the logo is cropped to fill the whole circle rather
   than sitting inside white padding. A square logo therefore reaches the
   edge. If a wide wordmark ever gets cut off badly, change `cover` to
   `contain` and put the padding back on .o-dot. */
.optimy-kit .o-dot{
  flex:none;width:112px;height:112px;border-radius:50%;background:#fff;
  display:grid;place-items:center;padding:0;overflow:hidden;
  box-shadow:0 6px 18px -10px rgba(11,95,99,.35);
  border:1px solid rgba(18,52,59,.05);
}
.optimy-kit .o-dot img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
.optimy-kit .o-dot.is-empty{
  padding:10px;
  border:1px dashed rgba(18,52,59,.2);box-shadow:none;background:rgba(255,255,255,.6);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--ink-faint);text-align:center;
}
.optimy-kit .o-logos{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:34px;}
.optimy-kit .o-clients__hint{margin-top:18px;font-size:13px;color:var(--ink-faint);text-align:center;}

.optimy-kit .o-marquee{
  margin-top:38px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.optimy-kit .o-marquee__track{
  display:flex;gap:22px;width:max-content;
  animation:optimy-scroll 42s linear infinite;
}
.optimy-kit .o-marquee:hover .o-marquee__track{animation-play-state:paused;}
@keyframes optimy-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:640px){
  .optimy-kit .o-dot{width:88px;height:88px;padding:0;}
  .optimy-kit .o-marquee__track{gap:16px;animation-duration:30s;}
}
@media (prefers-reduced-motion:reduce){
  .optimy-kit .o-marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
}

/* the "with a package" upgrade hint only shows when a package is selected */
.optimy-kit .o-opt__up{display:none;}
.optimy-kit #ocPlanGroup.with-pack .o-opt__up{display:block;color:var(--teal-deep);}
.optimy-kit #ocPlanGroup.with-pack .o-opt__p{opacity:.45;text-decoration:line-through;}
.optimy-kit .o-plans[data-count="1"]{grid-template-columns:minmax(0,460px);justify-content:center;}
.optimy-kit .o-plans[data-count="3"]{grid-template-columns:repeat(3,1fr);}
.optimy-kit .o-plans[data-count="4"]{grid-template-columns:repeat(2,1fr);}
@media (max-width:1000px){
  .optimy-kit .o-plans[data-count]{grid-template-columns:1fr;}
}

/* ===== v1.18 — contact block: WhatsApp only, centred, no form ===== */
.optimy-kit .o-cta__box--simple{
  display:block;text-align:center;
}
.optimy-kit .o-cta__box--simple h2{
  margin:0 auto 14px;max-width:22ch;
}
.optimy-kit .o-cta__box--simple p{
  margin:0 auto;max-width:48ch;
}
.optimy-kit .o-cta__btns{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px;
}
.optimy-kit .o-cta__btns .o-btn svg{width:16px;height:16px;fill:currentColor;flex:none;}
.optimy-kit .o-cta__map{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  font-size:14px;font-weight:600;text-decoration:none;
  color:rgba(255,255,255,.82);
}
.optimy-kit .o-cta__map:hover{color:#fff;}
/* the pin was filling the box because the SVG had no size */
.optimy-kit .o-cta__map svg{
  width:16px;height:16px;min-width:16px;fill:var(--amber);flex:none;display:inline-block;
}
/* belt and braces: no loose SVG in this section can ever balloon again */
.optimy-kit .o-cta svg{max-width:24px;max-height:24px;}
@media (max-width:560px){
  .optimy-kit .o-cta__btns .o-btn{flex:1 1 100%;justify-content:center;}
}


/* ===== v1.20 — mock-up promoted to third on the homepage ===== */
/* it now follows the cream callout strip, so give it a little more room
   above and a softer join */
.optimy-kit .o-screens{padding-top:clamp(56px,7vw,88px);}
.optimy-kit .o-screens .o-device{margin-top:clamp(22px,3vw,34px);}
/* the callout strip above it reads better a touch tighter */
.optimy-kit .o-proof{padding-bottom:clamp(30px,3.5vw,44px);}

/* ===== v1.21 — floating contact button, bottom right ===== */
.optimy-kit-float{
  --f-navy:#0C1F30;
  --f-orange:#F66828;
  position:fixed;right:6px;bottom:16px;z-index:9998;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
}
.optimy-kit-float .o-float{
  display:flex;align-items:flex-end;text-decoration:none;
  animation:o-float-in .5s cubic-bezier(.2,.8,.2,1) .9s both;
}
.optimy-kit-float .o-float__pill{
  display:flex;align-items:center;gap:10px;
  background:var(--f-navy);border:3px solid var(--f-orange);
  border-radius:999px;padding:8px 44px 8px 8px;
  box-shadow:0 10px 26px -10px rgba(4,16,26,.55);
  transition:transform .18s ease;
}
.optimy-kit-float .o-float:hover .o-float__pill{transform:translateY(-3px);}
.optimy-kit-float .o-float__ico{
  width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--f-orange);display:grid;place-items:center;
  animation:o-float-ring 2.6s ease-out infinite;
}
.optimy-kit-float .o-float__ico svg{width:17px;height:17px;fill:#fff;}
.optimy-kit-float .o-float__txt{display:flex;flex-direction:column;line-height:1.15;}
.optimy-kit-float .o-float__t{
  color:#fff;font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.optimy-kit-float .o-float__s{
  color:rgba(255,255,255,.72);font-size:11px;font-weight:500;margin-top:2px;
}
/* The artwork is traced to the mascot's own outline — its hand and sleeve
   are included, but none of the pill behind them. The negative margin lays
   the hand back on the pill the way the original picture has it, stopping
   short of the words. */
.optimy-kit-float .o-float__mascot{
  width:89px;height:auto;margin-left:-44px;margin-bottom:-4px;
  pointer-events:none;flex:none;
  animation:o-float-bob 3.4s ease-in-out infinite;
  filter:drop-shadow(0 8px 14px rgba(4,16,26,.3));
}

@keyframes o-float-in{
  from{opacity:0;transform:translateY(18px) scale(.94);}
  to{opacity:1;transform:none;}
}
@keyframes o-float-bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}
@keyframes o-float-ring{
  0%{box-shadow:0 0 0 0 rgba(246,104,40,.6);}
  70%{box-shadow:0 0 0 13px rgba(246,104,40,0);}
  100%{box-shadow:0 0 0 0 rgba(246,104,40,0);}
}

/* Small screens: everything stays — the words and the mascot both — just
   scaled down. It comes to about 199px, a little over half a 375px screen,
   so nothing is cut off at the edge. */
@media (max-width:640px){
  .optimy-kit-float{right:8px;bottom:35px;}
  .optimy-kit-float .o-float__pill{padding:7px 32px 7px 7px;gap:8px;}
  .optimy-kit-float .o-float__ico{width:30px;height:30px;}
  .optimy-kit-float .o-float__ico svg{width:15px;height:15px;}
  .optimy-kit-float .o-float__t{font-size:12.5px;}
  .optimy-kit-float .o-float__s{font-size:10px;margin-top:1px;}
  .optimy-kit-float .o-float__mascot{width:64px;margin-left:-31px;margin-bottom:-3px;}
}
@media (prefers-reduced-motion:reduce){
  .optimy-kit-float .o-float,
  .optimy-kit-float .o-float__ico,
  .optimy-kit-float .o-float__mascot{animation:none;}
}
/* don't sit on top of the WordPress admin bar on mobile */
body.admin-bar .optimy-kit-float{bottom:35px;}

/* ===== v1.22 — client showcase slider ===== */
.optimy-kit .o-show{background:var(--cream-pale);overflow:hidden;}
.optimy-kit .o-show__wrap{
  position:relative;margin-top:clamp(26px,3.5vw,40px);
  /* A lane down each side for the arrows. The scrolling row stops at the
     inside of this padding and clips its cards there, so an arrow never has
     a card underneath it — which it always did while the row ran to the
     window edge. */
  padding:0 clamp(56px,4vw,68px);
}
.optimy-kit .o-show__track{
  /* scroll-padding matters as much as padding here: with mandatory snapping
     the browser aligns a card to the snapport edge, so without it the
     padding is scrolled straight back out of view and the first card ends
     up jammed against the edge. */
  display:flex;gap:18px;
  padding:4px 16px;
  scroll-padding-left:16px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.optimy-kit .o-show__track::-webkit-scrollbar{display:none;}
.optimy-kit .o-show__card{
  /* "start", not "center": centred snapping drags the row off the first
     card on load, so the slider opened part-way through the set. */
  flex:0 0 clamp(230px,25vw,300px);scroll-snap-align:start;
  border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 12px 30px -16px rgba(11,95,99,.5);
  transition:transform .2s ease,box-shadow .2s ease;
}
.optimy-kit .o-show__card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(11,95,99,.6);}
.optimy-kit .o-show__card img{width:100%;height:auto;display:block;}
.optimy-kit .o-show__card a{display:block;}

/* Bare chevrons, no disc behind them. They live in the wrap's side lane, so
   they always sit on the section background, never on a card. */
.optimy-kit .o-show__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;padding:0;border:0;cursor:pointer;
  background:transparent;color:var(--ink-soft);
  display:grid;place-items:center;transition:color .16s,transform .16s;
}
.optimy-kit .o-show__nav svg{width:28px;height:28px;fill:currentColor;}
.optimy-kit .o-show__nav:hover{color:var(--ink-deep);transform:translateY(-50%) scale(1.14);}
.optimy-kit .o-show__nav:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:50%;}
/* Inside the lane, outside the cards. The offset plus the 40px button must
   stay under the lane width above, or the arrow creeps back over a card. */
.optimy-kit .o-show__nav--prev{left:clamp(4px,.8vw,12px);}
.optimy-kit .o-show__nav--next{right:clamp(4px,.8vw,12px);}
.optimy-kit .o-show__nav[disabled]{opacity:.3;pointer-events:none;}

.optimy-kit .o-show__dots{display:flex;gap:7px;justify-content:center;margin-top:22px;}
.optimy-kit .o-show__dot{
  width:8px;height:8px;border:0;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(18,52,59,.2);transition:background .16s,transform .16s;
}
.optimy-kit .o-show__dot.is-on{background:var(--teal);transform:scale(1.35);}

@media (max-width:640px){
  /* No arrows here, so the lane is not needed — give the width to the cards. */
  .optimy-kit .o-show__nav{display:none;}
  .optimy-kit .o-show__wrap{padding:0;}
  .optimy-kit .o-show__track{
    gap:12px;padding-left:16px;padding-right:16px;scroll-padding-left:16px;
  }
}

/* ===== v1.22.2 — clean edge on the video ===== */
/* The stage used to have a dark teal background and a teal-tinted shadow.
   Where the rounded corner clipped the video, browsers left a sub-pixel
   fringe of that background, which read as a faint green line against the
   cream. Both are gone; the video's own corners are rounded instead. */
.optimy-kit .o-stage video{border-radius:inherit;background:transparent;}

/* ===== v1.23 — the page you are on, marked in the header =====
   Higher specificity than the plain link rules above, and !important on the
   colour because the theme-proofing block forces .88 white on every header
   link. Background alone is too subtle on dark teal, so there is an amber
   bar under the word as well. */
.optimy-kit .o-header .o-nav a.is-current,
.optimy-kit .o-header .o-nav--wp .current-menu-item > a,
.optimy-kit .o-header .o-nav--wp .current_page_item > a{
  position:relative;
  background:rgba(255,255,255,.16);
  color:#fff!important;
  font-weight:800;
}
.optimy-kit .o-header .o-nav a.is-current::after,
.optimy-kit .o-header .o-nav--wp .current-menu-item > a::after,
.optimy-kit .o-header .o-nav--wp .current_page_item > a::after{
  content:"";
  position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  border-radius:2px;background:var(--amber);
}

/* ===== v1.23.3 — keep the slider arrows the kit's colours =====
   The customer's theme styles bare <button> elements, and its focus/active
   colours were landing on these after a click — the arrow and the card
   behind it went dark. Same shape as the top-bar and CTA bugs: the theme
   wins on equal specificity, so these are pinned. */
.optimy-kit .o-show__wrap .o-show__nav,
.optimy-kit .o-show__wrap .o-show__nav:focus,
.optimy-kit .o-show__wrap .o-show__nav:active{
  background:transparent!important;color:var(--ink-soft)!important;
  border:0!important;box-shadow:none!important;
}
.optimy-kit .o-show__wrap .o-show__nav:hover{
  background:transparent!important;color:var(--ink-deep)!important;
}
.optimy-kit .o-show__wrap .o-show__nav svg{fill:currentColor!important;}
.optimy-kit .o-show .o-show__card{background:#fff!important;}
.optimy-kit .o-show .o-show__dot{border:0!important;}

/* ===== v1.25.1 — top bar on a phone, one row =====
   v1.24.1 let all three items wrap, which turned the bar into three stacked
   lines taking up a third of the first screen. The phone number and the
   address fit side by side at 11.5px if the padding and gap come in, and
   "Free demo account" is dropped — the hero's own Get Started button goes
   to the same place. Each item is kept whole so neither breaks mid-address. */
@media (max-width:640px){
  /* The size has to be set on the links, not just on the bar around them.
     The theme puts its own font-size on <a>, so the container's size is
     inherited by nothing and 1.25.2 still rendered at the theme's ~13px and
     wrapped onto two lines. Pinned, like the colours before it. */
  .optimy-kit .o-topbar,
  .optimy-kit .o-topbar a,
  .optimy-kit .o-topbar a:link,
  .optimy-kit .o-topbar a:visited,
  .optimy-kit .o-topbar span{font-size:12px!important;line-height:1.35!important;}

  /* Phone to the left edge, address to the right. Only those two are left
     here — the spacer and the demo link are both hidden — so
     space-between pushes them apart on its own.
     nowrap is what guarantees the single line. overflow:hidden on the row
     is the safety net: if anything ever forces the text wider again it gets
     clipped here rather than putting a horizontal scrollbar across the
     whole page. */
  .optimy-kit .o-topbar .o-wrap{
    flex-wrap:nowrap;align-items:center;overflow:hidden;
    justify-content:space-between;
    gap:10px;padding:6px 12px;
  }
  .optimy-kit .o-topbar a{white-space:nowrap;gap:5px;min-width:0;}
  .optimy-kit .o-topbar svg{width:12px;height:12px;flex:none;}

  /* Two ways of finding the same link. The class is the clear one, but it
     only exists in markup rendered by 1.25.1 or later — on a cached page
     the browser has the new stylesheet and the old HTML, and the class
     matches nothing. The spacer has been in the markup since the start, so
     the sibling selector lands either way. Keep both. */
  .optimy-kit .o-topbar__demo,
  .optimy-kit .o-topbar__spacer + a{display:none;}
}
/* 12px runs out of room at about 344px, so the oldest small phones step
   down one point rather than losing the end of the address. */
@media (max-width:360px){
  .optimy-kit .o-topbar,
  .optimy-kit .o-topbar a,
  .optimy-kit .o-topbar a:link,
  .optimy-kit .o-topbar a:visited,
  .optimy-kit .o-topbar span{font-size:11px!important;}
  .optimy-kit .o-topbar .o-wrap{gap:8px;padding-left:10px;padding-right:10px;}
  .optimy-kit .o-topbar svg{width:11px;height:11px;}
}

/* ===== v1.25.0 — a pass over the phone layout ===== */

/* Stop iOS and Android inflating body text when the phone is turned. */
.optimy-kit{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

@media (max-width:640px){
  /* iOS Safari zooms the whole page in when you tap a field smaller than
     16px, and will not zoom back out. The field has to be 16px; nothing
     else prevents it. */
  .optimy-kit .o-field input,
  .optimy-kit .o-field select,
  .optimy-kit .o-field textarea{font-size:16px;padding:12px 13px;}

  /* Tighter rhythm — the desktop spacing turns a phone page into a lot of
     scrolling past empty cream. */
  .optimy-kit .o-section{padding:56px 0;}
  .optimy-kit .o-hero .o-wrap{padding-bottom:64px;}
  .optimy-kit .o-proof{padding:30px 0;}

  /* The menu button was a 38px target. 44px is the smallest comfortable
     one to hit with a thumb. */
  .optimy-kit .o-burger{padding:11px;}

  /* The slider dots were 8px across — hard to hit. Same size to look at,
     a 22px target to tap, using a spacer ring rather than a bigger dot. */
  .optimy-kit .o-show__dots{gap:2px;margin-top:16px;}
  .optimy-kit .o-show__dot{width:22px;height:22px;background:transparent;position:relative;}
  .optimy-kit .o-show__dot::after{
    content:"";position:absolute;inset:7px;border-radius:50%;
    background:rgba(18,52,59,.22);transition:background .16s,transform .16s;
  }
  .optimy-kit .o-show__dot.is-on{background:transparent;transform:none;}
  .optimy-kit .o-show__dot.is-on::after{background:var(--teal);transform:scale(1.3);}
}

/* Narrow phones: the big hero headline was wrapping into a wall of words. */
@media (max-width:420px){
  .optimy-kit .o-hero h1{font-size:34px;}
  .optimy-kit .o-phero h1{font-size:29px;}
  .optimy-kit .o-outlets__grid{gap:10px;}
  .optimy-kit .o-btn{padding:13px 20px;font-size:14.5px;}
}

/* ===== v1.25.1 — button wording, every state =====
   The theme colours <a> on hover, and that was landing on the kit's buttons:
   on the Download page the wording turned dark against the teal and vanished
   under the cursor. Each variant is pinned across link, visited, hover,
   focus and active. This is the same fight as the top bar and the header
   links — the theme wins on equal specificity, so these are deliberately
   heavy-handed. */
.optimy-kit .o-btn,
.optimy-kit a.o-btn:link,
.optimy-kit a.o-btn:visited,
.optimy-kit a.o-btn:hover,
.optimy-kit a.o-btn:focus,
.optimy-kit a.o-btn:active{text-decoration:none!important;}

.optimy-kit .o-btn--amber,
.optimy-kit .o-btn--amber:link,
.optimy-kit .o-btn--amber:visited,
.optimy-kit .o-btn--amber:hover,
.optimy-kit .o-btn--amber:focus,
.optimy-kit .o-btn--amber:active{color:#3A2607!important;}

.optimy-kit .o-btn--teal,
.optimy-kit .o-btn--teal:link,
.optimy-kit .o-btn--teal:visited,
.optimy-kit .o-btn--teal:hover,
.optimy-kit .o-btn--teal:focus,
.optimy-kit .o-btn--teal:active{color:#fff!important;}

.optimy-kit .o-btn--ghostLight,
.optimy-kit .o-btn--ghostLight:link,
.optimy-kit .o-btn--ghostLight:visited,
.optimy-kit .o-btn--ghostLight:hover,
.optimy-kit .o-btn--ghostLight:focus,
.optimy-kit .o-btn--ghostLight:active{color:#fff!important;}

.optimy-kit .o-btn--ghostDark,
.optimy-kit .o-btn--ghostDark:link,
.optimy-kit .o-btn--ghostDark:visited,
.optimy-kit .o-btn--ghostDark:hover,
.optimy-kit .o-btn--ghostDark:focus,
.optimy-kit .o-btn--ghostDark:active{color:var(--ink)!important;}

/* the icons inside follow whatever the wording is doing */
.optimy-kit .o-btn svg{fill:currentColor!important;}

/* ===== v1.25.5 — the open mobile menu =====
   It used to float the list and the WhatsApp button as two separate
   absolutely-positioned blocks, both pinned to the bottom of the header,
   with the button pushed clear of the list by a hardcoded
   translateY(210px). Nothing kept that number in step with the real height
   of the list, so the button landed on top of the hero.

   Now the header simply grows: the top row wraps and both pieces become
   full-width rows beneath the logo. Nothing needs to know how tall
   anything is, and the header's own background covers the whole panel, so
   it works with any number of menu items. */
@media (max-width:780px){
  /* row-gap 0 — the 18px gap between logo and menu is set below instead */
  .optimy-kit .o-header.is-open .o-wrap{flex-wrap:wrap;row-gap:0;}

  .optimy-kit .o-header.is-open .o-nav,
  .optimy-kit .o-header.is-open .o-nav--wp{
    display:flex;flex-direction:column;align-items:stretch;
    position:static;flex:1 0 100%;order:3;
    margin:10px 0 0;padding:10px 0 0;gap:2px;
    background:transparent;
    border-top:1px solid rgba(255,255,255,.12);
    transform:none;left:auto;right:auto;top:auto;
  }
  .optimy-kit .o-header.is-open .o-nav__list{
    flex-direction:column;align-items:stretch;gap:2px;
  }
  .optimy-kit .o-header.is-open .o-nav a,
  .optimy-kit .o-header.is-open .o-nav--wp a{padding:12px 14px;border-radius:12px;}

  .optimy-kit .o-header.is-open .o-header__cta{
    display:flex;position:static;flex:1 0 100%;order:4;
    margin:12px 0 2px;padding:0;
    transform:none;left:auto;right:auto;top:auto;
  }
  .optimy-kit .o-header.is-open .o-header__cta .o-btn{
    width:100%;justify-content:center;padding:13px 20px;
  }

  /* stacked full-width items: an amber bar down the left edge reads better
     than an underline running the whole width of the row */
  .optimy-kit .o-header.is-open .o-nav a.is-current::after,
  .optimy-kit .o-header.is-open .o-nav--wp .current-menu-item > a::after,
  .optimy-kit .o-header.is-open .o-nav--wp .current_page_item > a::after{
    left:0;right:auto;top:8px;bottom:8px;width:3px;height:auto;border-radius:3px;
  }
}

/* ===== v1.31 — blog =====
   Cards borrow from the package and hardware cards already on the site:
   white on cream, rounded, the same soft teal shadow and lift on hover.
   The date rides on the photo as a pill, matching the pill shapes used
   elsewhere, which keeps the text block clean. */
.optimy-kit .o-blog{background:var(--cream-pale);}
.optimy-kit .o-posts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;margin-top:clamp(28px,4vw,44px);
}
.optimy-kit .o-post{
  background:#fff;border-radius:20px;overflow:hidden;
  border:1px solid rgba(18,52,59,.07);
  box-shadow:0 14px 34px -20px rgba(11,95,99,.55);
  transition:transform .2s ease,box-shadow .2s ease;
}
.optimy-kit .o-post:hover{transform:translateY(-5px);box-shadow:0 26px 48px -22px rgba(11,95,99,.65);}
.optimy-kit .o-post__a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;}
.optimy-kit .o-post__img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--mint-pale);}
.optimy-kit .o-post__img img{width:100%;height:100%;object-fit:cover;display:block;}
.optimy-kit .o-post__date{
  position:absolute;left:14px;bottom:14px;
  background:rgba(255,255,255,.94);color:var(--teal-deep);
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px -8px rgba(11,95,99,.5);
}
.optimy-kit .o-post__b{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.optimy-kit .o-post__k{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);margin:0 0 9px;
}
/* the date only sits here when the post has no picture to put it on */
.optimy-kit .o-post__k span{color:var(--ink-faint);}
.optimy-kit .o-post__k span::before{content:"\00b7";margin:0 6px;}
.optimy-kit .o-post__t{
  font-family:var(--display);font-weight:800;font-size:20px;line-height:1.24;
  color:var(--ink);margin:0 0 10px;
}
.optimy-kit .o-post__x{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 18px;}
.optimy-kit .o-post__more{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;
  font-size:13.5px;font-weight:800;color:var(--teal-deep);
}
.optimy-kit .o-post__more svg{width:16px;height:16px;fill:currentColor;transition:transform .16s;}
.optimy-kit .o-post:hover .o-post__more svg{transform:translateX(4px);}
.optimy-kit .o-blog__none{margin-top:24px;color:var(--ink-faint);font-size:14px;}

/* newest post across the full width, picture beside the words */
.optimy-kit .o-post.is-feat{grid-column:1 / -1;}
.optimy-kit .o-post.is-feat .o-post__a{flex-direction:row;align-items:stretch;}
.optimy-kit .o-post.is-feat .o-post__img{flex:0 0 46%;aspect-ratio:auto;}
.optimy-kit .o-post.is-feat .o-post__b{padding:34px 38px;justify-content:center;}
.optimy-kit .o-post.is-feat .o-post__t{font-size:30px;line-height:1.15;margin-bottom:14px;max-width:22ch;}
.optimy-kit .o-post.is-feat .o-post__x{font-size:15px;max-width:54ch;}

@media (max-width:820px){
  .optimy-kit .o-post.is-feat .o-post__a{flex-direction:column;}
  .optimy-kit .o-post.is-feat .o-post__img{flex:none;aspect-ratio:16/10;}
  .optimy-kit .o-post.is-feat .o-post__b{padding:22px;}
  .optimy-kit .o-post.is-feat .o-post__t{font-size:22px;}
}
@media (max-width:600px){
  .optimy-kit .o-posts{grid-template-columns:1fr;gap:18px;}
}

/* ===== v1.33 — the menu button =====
   The theme styles bare <button> elements, and its focus/active colours
   were landing on the burger: tapping it turned the whole thing into a
   black square. Same fight as the slider arrows and the CTA buttons — the
   theme wins on equal specificity, so the transparent background and the
   white bars are pinned across every state. */
.optimy-kit .o-header .o-burger,
.optimy-kit .o-header .o-burger:hover,
.optimy-kit .o-header .o-burger:focus,
.optimy-kit .o-header .o-burger:active,
.optimy-kit .o-header .o-burger[aria-expanded="true"]{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0;
}
.optimy-kit .o-header .o-burger:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}
.optimy-kit .o-header .o-burger span{background:#fff!important;}

/* ===== v1.33.1 — room for the three selling points =====
   In a 1160px lane the three columns come to 355px each, and the longest
   title needs about 324px at 24px type — 31px of slack, so it wrapped onto
   a second line and the block read as cramped. A wider lane, a bigger gap
   and slightly smaller type give every title one line and every
   description two. */
/* The lane stays at the site's own width — widening it pushed the first
   column left of every other section's left edge. The room comes from the
   gap and the type size instead. */
.optimy-kit .o-proof{padding:clamp(42px,4.6vw,62px) 0;}
/* .o-wrap inside .o-proof sets four columns at (0,3,0). The plain
   .o-proof--three rule is only (0,2,0), so it never won and this block has
   always been a four-column grid holding three items — which is why the
   third title kept wrapping. Matching the wrap in the selector fixes it. */
.optimy-kit .o-proof .o-wrap.o-proof--three{grid-template-columns:repeat(3,1fr);gap:38px;}
.optimy-kit .o-proof__t{font-size:clamp(19px,1.9vw,22px);line-height:1.2;}
.optimy-kit .o-proof__l{font-size:14px;line-height:1.6;margin-top:10px;}
/* v1.48 — one point per row on a phone. This has to carry the same
   .o-proof .o-wrap.o-proof--three selector as the rule above it: the plain
   .o-proof--three form is (0,2,0) and lost, which is why three columns kept
   surviving down to 365px and every title broke into four lines. */
@media (max-width:780px){
  .optimy-kit .o-proof .o-wrap.o-proof--three{grid-template-columns:minmax(0,1fr);gap:22px;}
}

/* ===== v1.35 — the Counter screen =====
   The real till has no cart on this screen: a row of actions, the day's
   receipts, and the takings along the bottom. The screen therefore drops
   the side column. Written as .o-scr.o-scr--wide (0,3,0) so it beats
   .optimy-kit .o-scr's own two-column rule at (0,2,0) — the same trap that
   left the selling points on a four-column grid. */
.optimy-kit .o-scr.o-scr--wide{grid-template-columns:minmax(0,1fr);}
.optimy-kit .o-cnt__sel{
  margin-left:auto;background:#fff;border:1px solid rgba(18,52,59,.14);
  border-radius:8px;padding:6px 12px;font-size:11px;font-weight:600;color:var(--ink-soft);
}
.optimy-kit .o-cnt__acts{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 13px;}
.optimy-kit .o-cnt__act{
  background:var(--teal);color:#fff;border-radius:8px;padding:7px 12px;
  font-size:10.5px;font-weight:700;white-space:nowrap;
}
.optimy-kit .o-cnt__act:nth-child(even){background:var(--teal-deep);}
/* the payment method, as a coloured chip like the icons on the real screen */
.optimy-kit .o-card2__i--visa{background:#1A1F71;}
.optimy-kit .o-card2__i--cash{background:#D7E6E2;}
.optimy-kit .o-card2__i--baijia{background:#F5C518;}
.optimy-kit .o-cnt__sum{
  display:flex;justify-content:flex-end;gap:26px;margin-top:12px;
  background:var(--mint-pale);border-radius:10px;padding:12px 16px;
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--teal-deep);
}
@media (max-width:560px){
  .optimy-kit .o-cnt__sum{flex-direction:column;gap:4px;align-items:flex-end;}
}

/* ===== v1.38 — the mock-up on a phone =====
   Modelled on the app itself: a white bar with the logo, the day, the table
   chip and search; the rail becomes a drawer, so it is hidden; the cart
   floats bottom-right. The frame takes the phone's own shape (18/39, the
   ratio of his screenshots) and clips, so it reads as a handset rather
   than a tall web panel. */
.optimy-kit .o-mtop{display:none;}
.optimy-kit .o-mcart{display:none;}

@media (max-width:640px){
  .optimy-kit .o-shell{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    aspect-ratio:18/32;overflow:hidden;min-height:0;
  }
  .optimy-kit .o-navrail{display:none;}
  .optimy-kit .o-scrs{min-height:0;overflow:hidden;}
  .optimy-kit .o-scr{min-height:0;height:100%;overflow:hidden;}
  .optimy-kit .o-scr__main,
  .optimy-kit .o-scr__side{overflow:hidden;}

  .optimy-kit .o-mtop{
    display:flex;align-items:center;gap:9px;
    background:#fff;padding:10px 12px;border-bottom:1px solid rgba(18,52,59,.07);
  }
  .optimy-kit .o-mtop__logo{
    width:34px;height:34px;border-radius:50%;flex:none;
    background:linear-gradient(140deg,#5FCBB0,#0E8A80 60%,#0B5F63);
  }
  /* v1.41 — the screen name lives here, over the date, as it does in the app.
     The row inside each screen that used to carry it is hidden below, so the
     name is printed once. optimy.js keeps this in step with the open tab. */
  .optimy-kit .o-mtop__txt{display:flex;flex-direction:column;margin-right:auto;min-width:0;line-height:1.15;}
  .optimy-kit .o-mtop__nm{
    font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .optimy-kit .o-mtop__txt i{font-style:normal;font-size:10px;font-weight:600;color:var(--ink-faint);margin-top:1px;}
  .optimy-kit .o-mtop__tbl{
    display:inline-flex;align-items:center;gap:5px;flex:none;
    background:var(--mint-pale);border-radius:9px;padding:6px 10px;
    font-size:11px;font-weight:800;color:var(--teal-deep);
  }
  .optimy-kit .o-mtop__tbl svg{width:13px;height:13px;fill:var(--teal-deep);}
  .optimy-kit .o-mtop__find{
    width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
    border:1px solid rgba(18,52,59,.14);
  }
  .optimy-kit .o-mtop__find svg{width:15px;height:15px;fill:var(--ink-soft);}

  /* three across, as the app shows on a handset */
  .optimy-kit .o-pos__grid{grid-template-columns:repeat(3,1fr);gap:7px;}
  .optimy-kit .o-tbl__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
  .optimy-kit .o-tbl{padding:16px 6px;}

  .optimy-kit .o-scr__main{position:relative;}

  /* The dish and table lists are longer than the frame and get clipped, which
     is the point — a real screen shows the top of a longer list. But with the
     frame shortened the floating cart landed on a dish photo and its price.
     The bottom of the list now fades into the screen's own background
     (#EDF6F1, from .o-shell), so the button has clean ground under it and
     nothing readable sits beneath it. Only Menu and Table: the other four
     screens fit inside the frame and have nothing to fade. Kept under the
     cart's z-index:4, and pointer-events:none so it never eats a tap. */
  .optimy-kit .o-scr[data-scr="menu"] .o-scr__main::after,
  .optimy-kit .o-scr[data-scr="table"] .o-scr__main::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:96px;z-index:3;
    background:linear-gradient(to bottom,rgba(237,246,241,0) 0%,#EDF6F1 38%);
    pointer-events:none;
  }

  .optimy-kit .o-mcart{
    display:grid;place-items:center;position:absolute;right:12px;bottom:12px;z-index:4;
    width:44px;height:44px;border-radius:50%;background:var(--teal-deep);
    box-shadow:0 10px 22px -8px rgba(11,95,99,.7);
  }
  .optimy-kit .o-mcart svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.9;}
  .optimy-kit .o-mcart i{
    position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;border-radius:999px;
    background:#E5484D;color:#fff;font-style:normal;font-size:10px;font-weight:800;
    display:grid;place-items:center;padding:0 4px;
  }
}

/* ===== v1.36 — one height for every tab =====
   The tabs used to be display:none / display:grid, so the frame resized to
   whatever was showing and the page jumped when you switched — Receipts is
   about 150px taller than the rest. Every screen now sits in the same grid
   cell, so the frame is always as tall as the tallest one and switching
   changes nothing but which is visible. No fixed height to keep in step
   with the content. visibility:hidden also keeps the hidden tabs out of the
   accessibility tree, which display:none did for free. */
/* minmax(0,1fr) and min-width:0 matter here: with every screen sharing one
   cell, the widest screen's minimum content would otherwise set the width
   for all of them and push the frame past the phone's edge. */
.optimy-kit .o-scrs{display:grid;grid-template-columns:minmax(0,1fr);}
.optimy-kit .o-scr{
  display:grid;grid-area:1/1;min-width:0;
  visibility:hidden;opacity:0;pointer-events:none;
}
.optimy-kit .o-scr.is-on{visibility:visible;opacity:1;pointer-events:auto;}

/* ===== v1.37 — the mock-up keeps a screen's shape =====
   Once every tab shared one cell the frame grew to the tallest of them and
   the thing looked nothing like a tablet. It now holds the shape of the
   real till and clips, the way a screen shows the top of a longer list.
   16:10, not 16:9 — the owner's tablet is 1280x800, and 16:9 was visibly
   too short. Phones keep their own height, where either would be far too
   short to read. */
@media (min-width:641px){
  .optimy-kit .o-scrs{aspect-ratio:16/10;overflow:hidden;}
  .optimy-kit .o-shell{min-height:0;}
  .optimy-kit .o-scr{min-height:0;height:100%;overflow:hidden;}
  .optimy-kit .o-scr__main,
  .optimy-kit .o-scr__side{overflow:hidden;}
  /* v1.40 — four across, not five. The frame came down to 840px and the type
     inside is fixed px, so five columns left the dish tiles at ~85px and the
     whole thing read like a screen running too high a resolution. Four keeps
     a tile near 115px, the size it was in the old, larger frame. */
  .optimy-kit .o-pos__grid{grid-template-columns:repeat(4,1fr);}
}

/* ===== v1.39 — the phone drawer and the order sheet =====
   Both slide over the screen inside the frame, so the mock-up behaves the
   way the app does: tap the logo for the menu, tap the cart for the order.
   .o-shell is the positioning context and carries the two state classes. */
.optimy-kit .o-mdrawer{display:none;}
.optimy-kit .o-mx{display:none;}

@media (max-width:640px){
  .optimy-kit .o-shell{position:relative;}

  .optimy-kit .o-mtop__logo{
    padding:0;border:0;background:none;cursor:pointer;
    width:30px;height:30px;border-radius:50%;overflow:hidden;flex:none;
  }
  .optimy-kit .o-mtop__logo img{width:100%;height:100%;display:block;}

  /* --- the drawer --- */
  .optimy-kit .o-mdrawer{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;inset:0 26% 0 0;z-index:8;
    background:var(--teal-deep);padding:16px 12px;
    transform:translateX(-102%);transition:transform .22s ease;
  }
  .optimy-kit .o-shell.is-drawer .o-mdrawer{transform:none;}
  .optimy-kit .o-mdrawer__head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .optimy-kit .o-mdrawer__head img{width:34px;height:34px;border-radius:50%;}
  .optimy-kit .o-mdrawer__head span{display:flex;flex-direction:column;line-height:1.2;}
  .optimy-kit .o-mdrawer__head b{color:#fff;font-size:13px;font-weight:800;}
  .optimy-kit .o-mdrawer__head i{color:rgba(255,255,255,.65);font-style:normal;font-size:10.5px;}
  .optimy-kit .o-mdrawer__i{
    text-align:left;border:0;cursor:pointer;background:none;
    color:rgba(255,255,255,.82);font-family:var(--body);font-size:12.5px;font-weight:700;
    padding:9px 12px;border-radius:9px;
  }
  .optimy-kit .o-mdrawer__i.is-on{background:rgba(255,255,255,.16);color:#fff;}
  .optimy-kit .o-mdrawer__x{
    margin-top:auto;text-align:left;border:0;cursor:pointer;background:none;
    color:#fff;font-family:var(--body);font-size:12px;font-weight:800;
    padding:10px 12px;border-top:1px solid rgba(255,255,255,.18);
  }

  /* --- the order, as a sheet over the screen --- */
  /* v1.41 — the order fills the screen, as the app's own sheet does: a grab
     handle and a close cross at the top, then the whole order under it. It
     used to start 34% down, which read as a half-sheet the app never shows.
     .o-scrs drops out of the positioning below so `inset:0` reaches the top
     bar too — the app's sheet covers that as well. */
  .optimy-kit .o-shell.is-cart .o-scr.is-on .o-scr__side{
    display:flex;position:absolute;inset:0;z-index:9;
    border-radius:0;border-left:0;padding:30px 14px 14px;
    box-shadow:0 -14px 40px -12px rgba(4,16,26,.5);
    overflow:auto;
  }
  .optimy-kit .o-shell.is-cart .o-scr.is-on .o-scr__side::before{
    content:"";flex:none;width:44px;height:4px;border-radius:2px;
    background:rgba(18,52,59,.22);margin:-14px auto 14px;
  }
  .optimy-kit .o-shell.is-cart .o-mx{
    display:grid;place-items:center;position:absolute;right:10px;top:8px;z-index:10;
    width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;
    background:none;color:var(--ink);font-size:22px;line-height:1;
  }
}

/* ===== v1.41 — the phone mock-up, closer to the app =====
   Three things his screenshots showed and the mock-up did not:
   the screen name belongs in the top bar, not in a row of its own; a rail of
   categories is one row deep with the rest tucked behind a button; and the
   order sheet is the whole screen, not a half-height panel. */

/* the round "show every category" button only exists on the phone */
.optimy-kit .o-pos__more{
  display:grid;place-items:center;position:absolute;right:0;top:50%;
  transform:translateY(-50%);width:30px;height:30px;padding:0;
  border:0;border-radius:50%;background:var(--teal-deep);cursor:pointer;
}
.optimy-kit .o-pos__more svg{width:15px;height:15px;fill:#fff;}

@media (max-width:640px){
  /* the name is printed once, in the top bar. The rows that carried nothing
     but a name and a search box go; the QR and Counter rows stay, because
     they also hold a control the screen needs. */
  .optimy-kit .o-pos__bar--plain{display:none;}
  .optimy-kit .o-pos__title{display:none;}
  .optimy-kit .o-pos__bar{margin-bottom:10px;}

  /* one row of categories, never two. The overflow is clipped and the button
     sits over the right edge, so a part-chip disappearing behind it reads as
     "there are more" — the way the app shows it. */
  .optimy-kit .o-pos__chips{
    position:relative;flex-wrap:nowrap;overflow:hidden;
    padding-right:38px;margin-bottom:10px;
  }
  .optimy-kit .o-pos__chip{flex:none;}
  .optimy-kit .o-pos__more{
    display:grid;place-items:center;position:absolute;right:0;top:50%;
    transform:translateY(-50%);width:30px;height:30px;padding:0;
    border:0;border-radius:50%;background:var(--teal-deep);cursor:pointer;
  }
  .optimy-kit .o-pos__more svg{width:15px;height:15px;fill:#fff;}

  /* the counter's actions, same treatment — one row, the rest behind a fade.
     A fade rather than the categories' button: there is nothing to expand
     into on this screen, so a control would promise something untrue. */
  .optimy-kit .o-cnt__acts{flex-wrap:nowrap;overflow:hidden;position:relative;}
  .optimy-kit .o-cnt__act{flex:none;}
  .optimy-kit .o-cnt__acts::after{
    content:"";position:absolute;right:0;top:0;bottom:0;width:54px;pointer-events:none;
    background:linear-gradient(90deg,rgba(237,246,241,0),var(--mint-pale) 62%);
  }
  .optimy-kit .o-cnt__sum{margin-top:10px;}

  /* the drawer's icons */
  .optimy-kit .o-mdrawer__i{display:flex;align-items:center;gap:11px;}
  .optimy-kit .o-mdrawer__i svg{width:17px;height:17px;fill:rgba(255,255,255,.8);flex:none;}
  .optimy-kit .o-mdrawer__i.is-on svg{fill:#fff;}

  /* so the order sheet's inset:0 reaches the app bar as well */
  .optimy-kit .o-scrs{position:static;}

  /* the order sheet reads at arm's length, like the app's */
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__okey{font-size:11px;}
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__ohead{font-size:22px;margin:2px 0 14px;}
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__otabs{padding:4px;margin-bottom:14px;}
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__otabs span{padding:11px 4px;font-size:12.5px;}
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__line{padding:12px 0;font-size:13px;}
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__line i{
    width:28px;height:28px;padding:0;border-radius:50%;flex:none;
    display:grid;place-items:center;font-size:11px;
  }
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__nmw em{font-size:11px;}
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__line b{font-size:13px;}
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__pay{
    border-top:1px dashed rgba(18,52,59,.18);margin-top:auto;padding-top:14px;
  }
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__tot{font-size:18px;margin-bottom:12px;}
  .optimy-kit .o-shell.is-cart .o-scr__side .o-pos__btn{padding:14px;font-size:13.5px;border-radius:11px;}
}

/* ===== v1.42 — the order's buttons cannot be pushed off =====
   The frame holds a screen's shape and clips, so a long order used to take
   the total and the two buttons with it. The lines now sit in a box that
   gives up its height first, and the pay block never moves. */
.optimy-kit .o-scr__side{min-height:0;}
.optimy-kit .o-pos__items{flex:1 1 auto;min-height:0;overflow:hidden;}
.optimy-kit .o-pos__pay{flex:none;}

/* the Table screen's own top-bar controls are the phone's — see below */
.optimy-kit .o-mtop__all,
.optimy-kit .o-mtop__dots{display:none;}

@media (max-width:640px){
  /* the Table screen swaps the table chip and search for the floor picker
     and the overflow dots, the way the app does */
  .optimy-kit .o-shell[data-scr="table"] .o-mtop__tbl,
  .optimy-kit .o-shell[data-scr="table"] .o-mtop__find{display:none;}
  .optimy-kit .o-shell[data-scr="table"] .o-mtop__all{
    display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
    flex:1 1 auto;min-width:0;max-width:190px;
    border:1px solid rgba(18,52,59,.14);border-radius:999px;padding:7px 12px;
    font-size:12px;font-weight:700;color:var(--ink);
  }
  .optimy-kit .o-shell[data-scr="table"] .o-mtop__all svg{width:14px;height:14px;fill:var(--ink-soft);flex:none;}
  .optimy-kit .o-shell[data-scr="table"] .o-mtop__dots{
    display:grid;place-items:center;width:30px;height:30px;flex:none;
    border:1px solid rgba(18,52,59,.14);border-radius:50%;
  }
  .optimy-kit .o-shell[data-scr="table"] .o-mtop__dots svg{width:15px;height:15px;fill:var(--ink-soft);}
  /* the floors live in that picker now, so the chip row goes */
  .optimy-kit .o-scr[data-scr="table"] .o-pos__chips{display:none;}

  /* Only Menu carries a table number. Qr Order, Receipt, Counter and Report
     have no table behind them in the app, so the chip has nothing to say —
     Table is handled above, where it becomes the floor picker instead. */
  .optimy-kit .o-shell[data-scr="qr"] .o-mtop__tbl,
  .optimy-kit .o-shell[data-scr="receipt"] .o-mtop__tbl,
  .optimy-kit .o-shell[data-scr="cash"] .o-mtop__tbl,
  .optimy-kit .o-shell[data-scr="report"] .o-mtop__tbl{display:none;}

  /* Counter and Report have nothing to search — they are a drawer count and
     a day's totals, not a list you look through. Qr Order and Receipt keep
     their search. */
  .optimy-kit .o-shell[data-scr="cash"] .o-mtop__find,
  .optimy-kit .o-shell[data-scr="report"] .o-mtop__find{display:none;}

  /* square tiles, as the app draws them. Fewer fit, which is the point —
     they are the size of a thumb, not of a row in a list. */
  .optimy-kit .o-tbl__grid{gap:8px;}
  .optimy-kit .o-tbl{
    aspect-ratio:1/1;position:relative;padding:10px;border-radius:16px;
    display:flex;align-items:center;justify-content:center;
  }
  .optimy-kit .o-tbl b{font-size:21px;}
  .optimy-kit .o-tbl__rm{font-size:9px;padding:2px 7px;bottom:6px;}
  .optimy-kit .o-tbl__eat{top:7px;right:7px;width:22px;height:22px;padding:4.5px;}
}

/* the Counter's totals are a footer too — same rule as the order's buttons:
   the list gives up its height, the line under it always shows. */
.optimy-kit .o-scr[data-scr="cash"] .o-scr__main{display:flex;flex-direction:column;min-height:0;}
.optimy-kit .o-scr[data-scr="cash"] .o-list{flex:1 1 auto;min-height:0;overflow:hidden;}
.optimy-kit .o-scr[data-scr="cash"] .o-cnt__acts,
.optimy-kit .o-scr[data-scr="cash"] .o-pos__bar,
.optimy-kit .o-cnt__sum{flex:none;}

/* ===== v1.43 — the headers, as the app draws them =====
   Menu carries the date under its name, the table it is ringing up and a
   search field; Table keeps its floors on the same line and ends in the
   overflow dots and search; Receipt searches by number, price or remark and
   offers a filter and a date range. */
.optimy-kit .o-pos__title{display:flex;flex-direction:column;line-height:1.12;flex:none;}
.optimy-kit .o-pos__title i{
  font-family:var(--body);font-style:normal;font-weight:600;
  font-size:10.5px;color:var(--ink-faint);margin-top:3px;
}
.optimy-kit .o-pos__tbl{
  display:inline-flex;align-items:center;gap:6px;flex:none;margin-right:auto;
  background:var(--mint-pale);border-radius:10px;padding:8px 13px;
  font-size:12px;font-weight:800;color:var(--teal-deep);
}
.optimy-kit .o-pos__tbl svg{width:15px;height:15px;fill:var(--teal-deep);}
/* the search field: an icon and its placeholder, not an empty box */
.optimy-kit .o-pos__search{
  display:flex;align-items:center;gap:9px;height:34px;padding:0 14px;
  flex:1 1 auto;min-width:0;max-width:330px;margin-left:auto;
  border-radius:999px;background:#fff;border:1px solid rgba(18,52,59,.09);
}
.optimy-kit .o-pos__search svg{width:15px;height:15px;fill:var(--ink-faint);flex:none;}
.optimy-kit .o-pos__search span{
  font-size:11.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.optimy-kit .o-pos__search--sm{max-width:150px;}
.optimy-kit .o-pos__rnd{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:50%;background:#fff;border:1px solid rgba(18,52,59,.09);
}
.optimy-kit .o-pos__rnd svg{width:16px;height:16px;fill:var(--ink-soft);}
/* Table keeps its floors on the header line */
.optimy-kit .o-pos__bar--tbl .o-pos__chips{flex:1 1 auto;min-width:0;margin-bottom:0;}

/* ===== v1.45 — no order panel on the tablet's QR screen =====
   The app's QR page is the full width of the screen: you open an order from
   the list, you do not keep one beside it. The phone keeps the panel, since
   that is what its cart button opens. */
@media (min-width:641px){
  .optimy-kit .o-scr[data-scr="qr"]{grid-template-columns:minmax(0,1fr);}
  .optimy-kit .o-scr[data-scr="qr"] .o-scr__side{display:none;}
}

/* ===== v1.47 — sentence case, not Title Case =====
   The theme title-cases running text, so "Guest scans the QR at the table"
   came out as "Guest Scans The QR At The Table". The kit writes its own
   sentences and wants its own capitals, so it turns the transform off for
   everything it draws, then puts it back where the design actually means an
   all-caps label. Anything new that should be uppercase has to be added to
   the second list below, or the reset will flatten it. */
.optimy-kit,
.optimy-kit *,
.optimy-kit-float,
.optimy-kit-float *{text-transform:none!important;}

.optimy-kit .o-eyebrow,
.optimy-kit .o-hud__s,
.optimy-kit .o-step__n,
.optimy-kit .o-logos div,
.optimy-kit .o-field label,
.optimy-kit .o-footer h4,
.optimy-kit .o-plan__tag,
.optimy-kit .o-plan__listhead,
.optimy-kit .o-cgroup__t,
.optimy-kit .o-quote__then b,
.optimy-kit .o-pack__k,
.optimy-kit .o-pack__spec b,
.optimy-kit .o-logo-cell.is-empty,
.optimy-kit .o-pos__okey,
.optimy-kit .o-dot.is-empty,
.optimy-kit .o-post__date,
.optimy-kit .o-post__k,
.optimy-kit-float .o-float__t{text-transform:uppercase!important;}

/* ===== single post =====
   One design for every article, drawn by [optimy_post] inside a theme
   builder's single-post template. The body is whatever the editor produced,
   so this is the only place in the kit that styles bare h2/p/ul/blockquote —
   all of it kept under .o-single__body so it cannot reach the rest of the
   page or the customer's theme. */
.optimy-kit .o-single{background:#fff;}

/* Dark band. Colours are set here with the extra class rather than relying on
   the light rules coming first — same reason as the CTA box. */
.optimy-kit .o-single__head{
  position:relative;color:#fff;
  background:radial-gradient(120% 120% at 78% 10%,#17A08F 0%,#0E8A80 40%,#0B5F63 74%,#083E45 100%);
  padding:clamp(44px,6vw,74px) 0 clamp(64px,8vw,104px);
}
.optimy-kit .o-single__head h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px,4.2vw,50px);line-height:1.08;margin:0 0 16px;max-width:22ch;color:#fff;
}
.optimy-kit .o-single__head .o-single__cat{color:var(--mint);}
.optimy-kit .o-single__meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0;
  font-size:13.5px;color:rgba(255,255,255,.75);
}
.optimy-kit .o-single__dot{color:rgba(255,255,255,.4);}

/* The picture lifts into the dark band, the way the receipt does */
.optimy-kit .o-single__wrap{position:relative;z-index:2;padding-bottom:clamp(48px,6vw,80px);}
.optimy-kit .o-single__shot{
  position:relative;margin-top:clamp(-72px,-6vw,-40px);border-radius:16px;overflow:hidden;
  aspect-ratio:16/9;background:var(--mint-pale);
  box-shadow:0 26px 54px -26px rgba(4,32,36,.55);
}
.optimy-kit .o-single__shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}

/* The article itself. 68ch is about 12 words a line, which is the comfortable
   range for reading; the column is centred and everything inside inherits. */
.optimy-kit .o-single__body{
  max-width:68ch;margin:clamp(30px,4vw,52px) auto 0;
  font-size:16.5px;line-height:1.75;color:var(--ink);
}
.optimy-kit .o-single__body > *:first-child{margin-top:0;}
.optimy-kit .o-single__body p{margin:0 0 20px;}
.optimy-kit .o-single__body h2{
  font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,29px);
  line-height:1.2;margin:40px 0 12px;color:var(--ink);
}
.optimy-kit .o-single__body h3{
  font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,22px);
  line-height:1.25;margin:30px 0 10px;color:var(--ink);
}
.optimy-kit .o-single__body h4{font-weight:800;font-size:16.5px;margin:24px 0 8px;color:var(--ink);}
.optimy-kit .o-single__body ul,
.optimy-kit .o-single__body ol{margin:0 0 20px;padding-left:22px;}
.optimy-kit .o-single__body li{margin-bottom:8px;}
.optimy-kit .o-single__body a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:2px;}
.optimy-kit .o-single__body a:hover{color:var(--teal);}
.optimy-kit .o-single__body strong{font-weight:800;}
.optimy-kit .o-single__body img{max-width:100%;height:auto;border-radius:12px;display:block;}
.optimy-kit .o-single__body figure{margin:26px 0;}
.optimy-kit .o-single__body figcaption{
  font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:8px;
}
.optimy-kit .o-single__body blockquote{
  margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--amber);
  font-size:18px;line-height:1.6;color:var(--ink);
}
.optimy-kit .o-single__body blockquote p:last-child{margin-bottom:0;}
.optimy-kit .o-single__body hr{
  border:0;border-top:1px dashed rgba(18,52,59,.18);margin:32px 0;
}
.optimy-kit .o-single__body pre{
  background:var(--mint-pale);border-radius:12px;padding:16px 18px;overflow-x:auto;
  font-family:var(--mono);font-size:13px;line-height:1.6;margin:0 0 20px;
}
.optimy-kit .o-single__body code{font-family:var(--mono);font-size:.92em;}
/* a wide table scrolls inside its own box rather than widening the page */
.optimy-kit .o-single__body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;}
.optimy-kit .o-single__body th,
.optimy-kit .o-single__body td{
  text-align:left;padding:10px 12px;border-bottom:1px solid rgba(18,52,59,.1);
}
.optimy-kit .o-single__body th{font-weight:800;background:var(--mint-pale);}

.optimy-kit .o-single__back{max-width:68ch;margin:36px auto 0;}
.optimy-kit .o-single__back a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--teal-deep);text-decoration:none;
}
.optimy-kit .o-single__back a:hover{color:var(--teal);}
.optimy-kit .o-single__back svg{width:16px;height:16px;fill:currentColor;flex:none;}

@media (max-width:640px){
  .optimy-kit .o-single__shot{aspect-ratio:4/3;margin-top:-32px;}
  .optimy-kit .o-single__body{font-size:16px;}
}