/* TechNext Drip Studio — the drip design system.
   Every drip is a 1080 x 1080 (or 1080 x 1350) canvas. All sizes below are canvas pixels.
   Brand: blue #3167CA (typed, never sampled), ink #1F1F3D, Plus Jakarta Sans headings, Inter body,
   Caveat for the handwritten callouts. Odoo app icons are the official flat SVGs, never on a coloured tile. */

@import url("assets/fonts.css");

.drip{
  --blue:#3167CA; --blue-700:#1E4691; --blue-900:#132F66; --blue-300:#6FA0F5; --blue-100:#DDE7F8; --blue-050:#EAF0FB;
  --azure:#2F7BF5; --azure-2:#1F5FD6; --cyan:#5FD0F5;
  --ink:#1F1F3D; --body:#3E3E58; --label:#5C5C73; --muted:#8888A0; --line:#E4E7EF; --paper:#FFFFFF;
  --ok:#137A4A; --ok-050:#E8F5EE; --warn:#FFC83D; --red:#D93A30;
  --odoo:#714B67; --odoo-teal:#21B799;
  --font-display:"Plus Jakarta Sans",Inter,"Segoe UI",sans-serif;
  --font-body:Inter,"Segoe UI",system-ui,sans-serif;
  --font-hand:Caveat,"Segoe Print",cursive;
  --shadow-card:0 2px 6px rgba(31,31,61,.06),0 34px 60px -30px rgba(19,47,102,.45);
  --shadow-float:0 30px 60px -28px rgba(19,47,102,.55),0 8px 18px -10px rgba(19,47,102,.25);
  position:relative; width:1080px; height:1080px; overflow:hidden; isolation:isolate;
  font-family:var(--font-body); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision;
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.95) 40%,rgba(255,255,255,0) 55%),
    linear-gradient(118deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.75) 66%,rgba(255,255,255,0) 76%),
    radial-gradient(130% 95% at 50% 0%,#FFFFFF 0%,#F1F3F8 58%,#E7EBF4 100%);
}
.drip.r45{height:1350px}
.drip *,.drip *::before,.drip *::after{box-sizing:border-box}
.drip img{display:block;max-width:none}
.drip.bg-plain{background:#FFFFFF}
.drip.bg-sky{background:radial-gradient(120% 90% at 50% 10%,#FFFFFF 0%,#E9F0FD 55%,#D5E3FA 100%)}
.drip.bg-navy{background:radial-gradient(120% 100% at 50% 0%,#24418F 0%,#162C63 60%,#0E1D44 100%);color:#fff}

/* ---------- decorative ground ---------- */
.d-ground{position:absolute;inset:0;z-index:0;pointer-events:none}
.d-ground svg{position:absolute;left:0;bottom:0;width:1080px;height:auto}
.d-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(49,103,202,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(49,103,202,.07) 1px,transparent 1px);
  background-size:54px 54px;-webkit-mask-image:radial-gradient(70% 60% at 50% 55%,#000 30%,transparent 80%);mask-image:radial-gradient(70% 60% at 50% 55%,#000 30%,transparent 80%)}

/* ---------- header ---------- */
.d-logo{position:absolute;left:64px;top:58px;height:50px;z-index:40}
.bg-navy .d-logo{filter:brightness(0) invert(1)}
.d-badge{position:absolute;right:64px;top:46px;z-index:40}
.d-badge.ready img{height:74px}
.d-badge.o20{display:grid;grid-template-columns:auto auto;align-items:end;column-gap:10px;row-gap:0;height:84px;top:36px}
.d-badge.o20 .meet{grid-column:1 / 3;justify-self:end;margin:0 38px -16px 0;font:700 42px/1 var(--font-hand);color:var(--odoo);transform:rotate(-4deg)}
.d-badge.o20 .wm{height:42px}
.d-badge.o20 .v{height:44px;min-width:50px;padding:0 8px;border:3.5px solid #8F8F8F;border-radius:10px;display:grid;place-items:center;
  font:800 30px/1 var(--font-display);color:#8F8F8F;letter-spacing:-.02em;transform:translateY(2px)}

/* ---------- copy ---------- */
.d-copy{position:absolute;left:64px;right:64px;top:148px;z-index:30;text-align:center}
.d-copy.left{text-align:left;right:360px}
.d-kicker{display:inline-block;margin:0 0 14px;padding:8px 18px;background:var(--blue);color:#fff;font:800 38px/1.05 var(--font-display);letter-spacing:-.02em}
.d-head{margin:0;font:800 80px/1.0 var(--font-display);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.d-head.s-l{font-size:92px}.d-head.s-m{font-size:72px}.d-head.s-s{font-size:62px;letter-spacing:-.035em}
.bg-navy .d-head{color:#fff}
.d-head em,.d-sub em{font-style:normal;color:var(--blue)}
.bg-navy .d-head em{color:#8CB6FF}
.d-head .odoo{color:var(--odoo)}
.d-head u{text-decoration:none;position:relative;white-space:nowrap}
.d-head u::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-.1em;height:.26em;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M6 26 C 80 12, 190 8, 392 16 L 390 30 C 250 22, 120 26, 10 36 Z' fill='%23FFC83D'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.d-head mark{background:none;color:inherit;position:relative;white-space:nowrap}
.d-head mark::before{content:"";position:absolute;left:-.12em;right:-.12em;top:.14em;bottom:.02em;z-index:-1;background:var(--warn);border-radius:.08em;transform:rotate(-1.6deg)}
.d-head .hl{color:#fff;background:var(--blue);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.d-sub{margin:20px auto 0;max-width:860px;font:500 29px/1.36 var(--font-body);color:var(--body);text-wrap:balance}
.d-copy.left .d-sub{margin-left:0}
.bg-navy .d-sub{color:#D6E2FA}
.d-quote{display:block;height:64px;margin:0 0 6px;color:var(--blue);font:800 150px/.8 var(--font-display)}

.d-cta{position:absolute;left:50%;bottom:44px;z-index:45;transform:translateX(-50%);display:inline-flex;align-items:center;gap:14px;
  padding:14px 18px 14px 30px;border-radius:999px;background:#fff;box-shadow:var(--shadow-float);font:700 26px/1 var(--font-display);color:var(--ink);white-space:nowrap}
.d-cta b{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700}

/* ---------- layers ---------- */
.L{position:absolute;z-index:10;transform-origin:50% 50%}
.L > .in{position:relative;width:100%}

/* image-like layers */
.L-img img,.L-nexi img,.L-person img{width:100%;height:auto}
.L-person.sticker img{filter:drop-shadow(0 0 0 #fff) drop-shadow(6px 0 0 #fff) drop-shadow(-6px 0 0 #fff) drop-shadow(0 6px 0 #fff) drop-shadow(0 -6px 0 #fff) drop-shadow(0 30px 30px rgba(19,47,102,.35))}
.L-person .fade{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(rgba(233,238,248,0),#E6ECF7 85%)}
.L-nexi .glow{position:absolute;left:-18%;right:-18%;top:0;bottom:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(111,160,245,.55),rgba(111,160,245,.18) 55%,rgba(111,160,245,0) 100%);z-index:-1}
.placeholder{display:grid;place-items:center;aspect-ratio:3/4;border:4px dashed rgba(49,103,202,.45);border-radius:28px;background:rgba(234,240,251,.7);
  color:var(--blue-700);font:700 30px/1.25 var(--font-display);text-align:center;padding:30px}

/* screenshot in frames */
.shot{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card);background:#fff}
.shot img{width:100%;height:auto}
.frame-browser{border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow-card);border:1px solid #DCE2EE}
.frame-browser .bar{height:38px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#F2F4F9;border-bottom:1px solid #E1E6F0}
.frame-browser .bar i{width:12px;height:12px;border-radius:50%;background:#D4D9E4}
.frame-browser .bar span{margin-left:14px;flex:1;height:22px;border-radius:11px;background:#fff;border:1px solid #E1E6F0;font:500 13px/20px var(--font-body);color:var(--muted);padding:0 12px}
.frame-laptop .lid{border-radius:26px 26px 0 0;background:#0F1320;padding:18px 18px 22px;box-shadow:var(--shadow-card)}
.frame-laptop .lid img{border-radius:6px;width:100%}
.frame-laptop .base{height:26px;margin:0 -7%;border-radius:0 0 30px 30px;background:linear-gradient(#D9DDE6,#AEB5C4);box-shadow:0 30px 40px -20px rgba(19,47,102,.5)}
.frame-tablet{border-radius:44px;background:#11141D;padding:22px;box-shadow:var(--shadow-card)}
.frame-tablet img{border-radius:24px;width:100%}

/* phone */
.phone{position:relative;width:100%;aspect-ratio:9/18.6;border-radius:64px;padding:14px;background:linear-gradient(145deg,#2A2F3D,#0C0E14 60%);
  box-shadow:inset 0 0 0 2px #3A4052,0 50px 80px -34px rgba(19,47,102,.7),0 14px 28px -12px rgba(19,47,102,.35)}
.phone::before{content:"";position:absolute;left:50%;top:26px;width:112px;height:32px;margin-left:-56px;border-radius:20px;background:#07080C;z-index:5}
.phone .scr{position:relative;height:100%;border-radius:52px;overflow:hidden;background:#F6F7FB;display:flex;flex-direction:column}
.phone .scr > img{width:100%;height:100%;object-fit:cover;object-position:top}
.ph-status{display:flex;align-items:center;justify-content:space-between;padding:24px 30px 12px 40px;font:700 19px/1 var(--font-body);color:var(--ink)}
.ph-status .sig{display:flex;align-items:center;gap:8px}
.ph-status .bars{display:flex;align-items:flex-end;gap:3px;height:16px}
.ph-status .bars i{width:5px;border-radius:2px;background:#C9CEDA}
.ph-status .bars i:nth-child(1){height:5px}.ph-status .bars i:nth-child(2){height:8px}.ph-status .bars i:nth-child(3){height:12px}.ph-status .bars i:nth-child(4){height:16px}
.ph-status .x{color:var(--red);font-weight:800}
.ph-top{display:flex;align-items:center;gap:12px;padding:14px 22px 14px;background:#fff;border-bottom:1px solid var(--line)}
.ph-top .oi{width:36px;height:36px}
.ph-top b{font:700 19px/1.1 var(--font-display);color:var(--ink)}
.ph-top small{display:block;font:500 14px/1.2 var(--font-body);color:var(--muted)}
.ph-offline{display:flex;align-items:center;gap:10px;margin:14px 16px 4px;padding:10px 14px;border-radius:14px;background:#FFF4D6;color:#7A5200;font:600 15px/1.25 var(--font-body)}
.ph-offline svg{width:22px;height:22px;flex:none}
.ph-body{padding:10px 16px;display:flex;flex-direction:column;gap:10px}
.ph-field{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.ph-field small{display:block;font:600 12px/1.2 var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ph-field span{display:block;margin-top:3px;font:600 17px/1.25 var(--font-body);color:var(--ink)}
.ph-line{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;font:600 15.5px/1.2 var(--font-body);color:var(--ink)}
.ph-line .q{margin-left:auto;white-space:nowrap;font:700 15px/1 var(--font-body);color:var(--label);font-variant-numeric:tabular-nums}
.ph-line .ck{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;flex:none}
.ph-line .ck.todo{background:#fff;border:2px solid #C9CEDA}
.ph-line .ck svg{width:14px;height:14px}
.ph-btn{margin:6px 16px 14px;padding:15px;border-radius:14px;background:var(--odoo);color:#fff;text-align:center;font:700 18px/1 var(--font-display)}
.ph-toast{margin:0 16px 22px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#1F1F3D;color:#fff;font:600 14.5px/1.3 var(--font-body)}
.ph-toast svg{width:22px;height:22px;flex:none;color:#8CB6FF}

/* Odoo record card */
.rec{background:#fff;border-radius:24px;box-shadow:var(--shadow-card);border:1px solid #E3E7F0;overflow:hidden}
.rec-top{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line);background:#FBFCFE}
.rec-top .oi{width:44px;height:44px}
.rec-top b{font:700 22px/1.15 var(--font-display);color:var(--ink)}
.rec-top small{display:block;font:500 16px/1.2 var(--font-body);color:var(--muted)}
.rec-top .st{margin-left:auto;padding:7px 14px;border-radius:999px;background:var(--blue-050);color:var(--blue-700);font:700 15px/1 var(--font-body)}
.rec-top .st.ok{background:var(--ok-050);color:var(--ok)}
.rec-rows{padding:10px 24px 6px}
.rec-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed #E3E7F0;font:500 19px/1.2 var(--font-body)}
.rec-row:last-child{border-bottom:0}
.rec-row .k{width:150px;flex:none;color:var(--muted);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.05em}
.rec-row .v{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.rec-row.ai .v{background:linear-gradient(90deg,rgba(111,160,245,.22),rgba(111,160,245,.06));border-radius:8px;padding:4px 10px;margin:-4px 0}
.rec-row .flag{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--ok);font:700 15px/1 var(--font-body)}
.rec-row .flag svg,.rec-row .spark svg{width:20px;height:20px}
.rec-row .spark{margin-left:auto;color:var(--blue)}
.rec-foot{display:flex;align-items:center;gap:12px;padding:16px 24px 20px}
.rec-foot .ai{display:inline-flex;align-items:center;gap:8px;font:600 16px/1.2 var(--font-body);color:var(--blue-700)}
.rec-foot .ai svg{width:20px;height:20px}
.rec-foot .btn{margin-left:auto;padding:12px 22px;border-radius:10px;background:var(--odoo);color:#fff;font:700 18px/1 var(--font-display);box-shadow:0 10px 20px -10px rgba(113,75,103,.8)}

/* workflow */
.flow{position:relative;width:100%}
.flow svg.wires{position:absolute;inset:0;overflow:visible;z-index:0}
.fnode{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:22px 16px 18px;background:#fff;border-radius:24px;border:1px solid #E3E7F0;box-shadow:var(--shadow-card)}
.fnode .n{position:absolute;left:-12px;top:-12px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#fff;font:800 20px/1 var(--font-display);box-shadow:0 8px 16px -6px rgba(49,103,202,.7)}
.fnode .oi{width:64px;height:64px}
.fnode .t{font:800 30px/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.fnode .h{font:500 18px/1.25 var(--font-body);color:var(--label)}
.fnode .app{font:700 13px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--odoo)}
.fnode.hot{border:3px solid var(--blue);box-shadow:0 0 0 10px rgba(49,103,202,.12),var(--shadow-card)}

/* app cloud */
.apps{display:grid;gap:22px 18px;justify-items:center}
.apps .a{display:flex;flex-direction:column;align-items:center;gap:8px;font:600 17px/1.1 var(--font-body);color:var(--ink);text-align:center}
.apps .a .oi{width:76px;height:76px;filter:drop-shadow(0 10px 12px rgba(19,47,102,.18))}

/* handwritten + pills */
.pill{display:inline-flex;align-items:center;gap:12px;padding:14px 32px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(180deg,#3F86F7,#1F5FD6);color:#fff;font:700 44px/1 var(--font-hand);letter-spacing:.01em;
  box-shadow:0 18px 30px -14px rgba(31,95,214,.75),inset 0 2px 0 rgba(255,255,255,.28)}
.pill.white{background:#fff;color:var(--blue-700);box-shadow:var(--shadow-float)}
.pill.ok{background:linear-gradient(180deg,#22A06B,#137A4A)}
.pill.sans{font:700 24px/1 var(--font-display);padding:14px 24px;letter-spacing:-.01em}
.pill svg{width:30px;height:30px;flex:none}
.pill.sans svg{width:24px;height:24px}
.note{display:inline-block;font:700 44px/1.05 var(--font-hand);color:var(--blue);white-space:nowrap}
.note.red{color:var(--red)}
.note.strike span{position:relative}
.note.strike span::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:5px;border-radius:3px;background:var(--red);transform:rotate(-3deg)}
.note .small{display:block;font-size:.72em;opacity:.9}
.chip{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border-radius:18px;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-float);
  font:600 22px/1.2 var(--font-body);color:var(--ink);white-space:nowrap}
.chip .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--blue-050);color:var(--blue)}
.chip .ico.ok{background:var(--ok-050);color:var(--ok)}
.chip .ico svg{width:24px;height:24px}
.chip small{display:block;font:500 16px/1.2 var(--font-body);color:var(--muted)}
.bubble{position:relative;display:inline-block;padding:18px 26px;border-radius:28px;background:#fff;box-shadow:var(--shadow-float);font:700 30px/1.2 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.bubble::after{content:"";position:absolute;left:44px;bottom:-16px;border:16px solid transparent;border-top-color:#fff;border-bottom:0}

/* effects */
.fx svg{width:100%;height:auto;overflow:visible}
.fx-burst .in{aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(49,103,202,.16) 0 7deg,rgba(49,103,202,0) 7deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}
.fx-burst.yellow .in{background:repeating-conic-gradient(from 0deg,rgba(255,200,61,.45) 0 7deg,rgba(255,200,61,0) 7deg 18deg)}
.fx-glow .in{aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(111,160,245,.6),rgba(111,160,245,0))}
.fx-halftone .in{aspect-ratio:1;border-radius:50%;background-image:radial-gradient(rgba(31,31,61,.85) 30%,transparent 32%);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);mask-image:radial-gradient(closest-side,#000 20%,transparent 100%)}
.fx-sphere .in{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 30%,#DFF7FF 0%,#7FD8F6 26%,#2FA7E6 62%,#1E6FC8 100%);box-shadow:0 20px 30px -14px rgba(19,47,102,.5)}
.fx-scan .in{height:110px;background:linear-gradient(180deg,rgba(111,160,245,0),rgba(111,160,245,.35) 70%,rgba(160,200,255,.95) 97%,rgba(255,255,255,1) 100%);
  border-bottom:3px solid #fff;box-shadow:0 8px 26px rgba(79,134,238,.9);border-radius:6px}

/* ---------- phone: info banner ---------- */
.ph-offline.info{background:var(--blue-050);color:var(--blue-700)}

/* ---------- website design elements ---------- */
.web{--acc:#3167CA;border-radius:20px;overflow:hidden;background:#fff;border:1px solid #DCE2EE;box-shadow:var(--shadow-card);font-family:var(--font-body)}
.web-bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#F2F4F9;border-bottom:1px solid #E1E6F0}
.web-bar i{width:12px;height:12px;border-radius:50%;background:#D4D9E4}
.web-bar span{margin-left:12px;flex:1;height:24px;border-radius:12px;background:#fff;border:1px solid #E1E6F0;font:500 13px/22px var(--font-body);color:var(--muted);padding:0 12px;white-space:nowrap;overflow:hidden}
.web-nav{display:flex;align-items:center;gap:22px;padding:18px 28px;border-bottom:1px solid #EEF1F6;font:600 15px/1 var(--font-body);color:var(--label)}
.web-nav b{display:flex;align-items:center;gap:9px;margin-right:auto;font:800 19px/1 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.web-nav .dot{width:22px;height:22px;border-radius:7px;background:var(--acc)}
.web-nav em{font-style:normal;padding:10px 16px;border-radius:9px;background:var(--acc);color:#fff}
.web-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;padding:30px 28px 22px;align-items:center}
.web-copy h4{margin:0;font:800 38px/1.04 var(--font-display);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.web-copy h4 em{font-style:normal;color:var(--acc)}
.web-copy p{margin:12px 0 0;font:500 16px/1.45 var(--font-body);color:var(--body)}
.web-btns{display:flex;gap:10px;margin-top:18px}
.web-btns span{padding:12px 18px;border-radius:10px;font:700 15px/1 var(--font-display)}
.web-btns .b1{background:var(--acc);color:#fff}
.web-btns .b2{border:1.5px solid #D5DBE8;color:var(--ink)}
.web-img{position:relative;aspect-ratio:1/.86;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,var(--blue-050),#D3E1FA)}
.web-img img{width:100%;height:100%;object-fit:cover}
.web-img .s1{position:absolute;left:12%;top:14%;width:48%;height:48%;border-radius:50%;background:var(--acc);opacity:.85}
.web-img .s2{position:absolute;right:10%;bottom:12%;width:44%;height:36%;border-radius:18px;background:#fff;box-shadow:0 18px 30px -18px rgba(19,47,102,.5)}
.web-img .s3{position:absolute;left:18%;bottom:16%;width:26%;height:10%;border-radius:8px;background:#FFC83D}
.web-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 28px 28px}
.web-cards span{display:grid;gap:8px;padding:16px;border-radius:14px;background:#F6F8FC;border:1px solid #EAEEF5}
.web-cards i{width:30px;height:30px;border-radius:9px;background:var(--blue-100)}
.web-cards b{height:10px;border-radius:5px;background:#D5DBE8;width:80%}
.web-cards b.s{width:55%;background:#E4E8F0}

.devs{position:relative;padding-bottom:8%}
.devs .lap .lid{border-radius:24px 24px 0 0;background:#0F1320;padding:16px 16px 20px;box-shadow:var(--shadow-card)}
.devs .lap .lid img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px}
.devs .lap .base{height:24px;margin:0 -7%;border-radius:0 0 30px 30px;background:linear-gradient(#DADEE7,#AEB5C4);box-shadow:0 30px 40px -20px rgba(19,47,102,.5)}
.devs .phone.mini{position:absolute;right:-6%;bottom:0;width:27%;border-radius:34px;padding:8px}
.devs .phone.mini::before{top:14px;width:30%;height:14px;margin-left:-15%;border-radius:10px}
.devs .phone.mini .scr{border-radius:27px}
.devs-tag{position:absolute;left:4%;top:-3.2%;padding:10px 18px;border-radius:999px;background:#fff;box-shadow:var(--shadow-float);font:700 20px/1 var(--font-display);color:var(--blue-700);white-space:nowrap}

.L-cursor svg{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(19,47,102,.35))}
.code{border-radius:18px;overflow:hidden;background:#171B2E;box-shadow:var(--shadow-card)}
.code-bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#0F1322}
.code-bar i{width:12px;height:12px;border-radius:50%;background:#3B4158}
.code-bar i:nth-child(1){background:#FF6B5F}.code-bar i:nth-child(2){background:#FFC83D}.code-bar i:nth-child(3){background:#2ACB6B}
.code-bar span{margin-left:10px;font:600 14px/1 var(--font-body);color:#8C93AE}
.code-body{padding:18px 20px 22px;font:500 21px/1.55 ui-monospace,"Cascadia Code",Consolas,monospace;color:#D7DCEE}
.code .cl{display:flex;gap:18px;white-space:pre}
.code .ln{width:22px;text-align:right;color:#4E5673;flex:none}
.code .tg{color:#7FB0FF}.code .at{color:#5FD0C0}.code .st{color:#FFC86B}
.pal{display:flex;gap:14px;padding:18px;border-radius:22px;background:#fff;box-shadow:var(--shadow-card)}
.pal span{flex:1;display:grid;gap:10px}
.pal i{display:block;aspect-ratio:1;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(31,31,61,.08)}
.pal b{font:700 14px/1 ui-monospace,Consolas,monospace;color:var(--label);text-align:center}
.wf{display:grid;gap:14px;padding:20px;border-radius:20px;background:#fff;border:2px dashed #C9D3EA}
.wf b,.wf i,.wf em,.wf span{display:block;border-radius:8px;background:#E6EBF3}
.wf-nav{display:flex;align-items:center;gap:12px}
.wf-nav i{width:34px;height:34px;border-radius:10px;background:#C9D6F0}
.wf-nav b{width:70px;height:12px}
.wf-nav em{margin-left:auto;width:90px;height:30px;background:#C9D6F0}
.wf-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:center}
.wf-hero > div{display:grid;gap:12px}
.wf-hero b.l{height:22px}.wf-hero b.l.s{width:70%}.wf-hero b.m{height:12px;width:85%}
.wf-hero span{width:120px;height:34px;background:#C9D6F0}
.wf-hero > i{aspect-ratio:1/.8;background:#EEF2F8}
.wf-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wf-cols i{height:70px}
.gauge{display:grid;justify-items:center;gap:10px;padding:20px 18px;border-radius:22px;background:#fff;box-shadow:var(--shadow-card)}
.gauge-ring{position:relative;width:100%}
.gauge-ring svg{display:block;width:100%;height:auto}
.gauge .gv{position:absolute;inset:0;display:grid;place-items:center;font:800 40px/1 var(--font-display);letter-spacing:-.03em}
.gauge .gv svg{width:38%;height:auto}
.gauge b{font:700 20px/1.1 var(--font-display);color:var(--ink);text-align:center}
.serp{border-radius:22px;background:#fff;box-shadow:var(--shadow-card);overflow:hidden;font-family:Arial,var(--font-body)}
.serp-q{display:flex;align-items:center;gap:14px;margin:18px;padding:12px 18px;border-radius:999px;border:1px solid #DFE1E5;box-shadow:0 2px 6px rgba(32,33,36,.12);font:400 20px/1.2 Arial,sans-serif;color:#202124}
.serp-q .g{font:800 24px/1 var(--font-display);color:#4285F4}
.serp-q svg{margin-left:auto;width:22px;height:22px;color:#4285F4}
.serp-r{padding:4px 26px 24px}
.serp-site{display:flex;align-items:center;gap:12px}
.serp-site i{width:34px;height:34px;border-radius:50%;background:#F1F3F4;display:grid;place-items:center}
.serp-site i img{width:60%}
.serp-site b{display:block;font:400 16px/1.2 Arial,sans-serif;color:#202124}
.serp-site small{display:block;font:400 14px/1.3 Arial,sans-serif;color:#4D5156}
.serp h5{margin:10px 0 6px;font:400 25px/1.25 Arial,sans-serif;color:#1A0DAB}
.serp p{margin:0;font:400 17px/1.5 Arial,sans-serif;color:#4D5156}

/* ---------- workflows and panels from technext.asia ---------- */
.aflow{border-radius:24px;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card);padding:0 0 22px}
.af-top{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line);background:#FBFCFE;border-radius:24px 24px 0 0}
.af-top .oi{width:46px;height:46px}
.af-top b{display:block;font:800 24px/1.15 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.af-top small{display:block;font:600 15px/1.2 var(--font-body);color:var(--odoo)}
.af-rail{position:relative;display:grid;gap:10px;padding:26px 20px 6px}
.af-rail::before{content:"";position:absolute;left:10%;right:10%;top:47px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,#3167CA 0 10px,transparent 10px 18px)}
.af-st{position:relative;display:grid;justify-items:center;align-content:start;gap:8px;text-align:center}
.af-dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid var(--blue);color:var(--blue);font:800 19px/1 var(--font-display);z-index:1}
.af-st.hot .af-dot{background:var(--blue);color:#fff;box-shadow:0 0 0 9px rgba(49,103,202,.15)}
.af-st b{font:800 19px/1.15 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.af-st small{font:500 14.5px/1.3 var(--font-body);color:var(--label)}
.af-hand{display:flex;flex-wrap:wrap;gap:10px;padding:16px 24px 0}
.af-hand span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:var(--blue-050);font:600 15px/1.2 var(--font-body);color:var(--ink)}
.af-hand .oi{width:24px;height:24px}
.af-hand em{font-style:normal;font-weight:800;color:var(--blue-700)}
.orbit{position:relative;aspect-ratio:1}
.orbit .ring{position:absolute;border-radius:50%;border:3px dashed rgba(49,103,202,.35)}
.orbit .r1{inset:8%}.orbit .r2{inset:26%;border-style:solid;border-color:rgba(49,103,202,.14);border-width:18px}
.ob-core{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:var(--shadow-card);display:grid;place-items:center;align-content:center;gap:6px}
.ob-core small{font:700 15px/1 var(--font-body);color:var(--blue-700);letter-spacing:.02em}
.ob-app{position:absolute;width:15%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:22px;background:#fff;box-shadow:0 14px 26px -14px rgba(19,47,102,.45);display:grid;place-items:center}
.ob-app .oi{width:62%;height:62%}
.dash{border-radius:24px;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card);padding:22px 24px 44px}
.dash-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.dash-top b{font:800 23px/1.2 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.dash-tag{margin-left:auto;padding:5px 10px;border-radius:999px;background:#EEF1F6;font:600 12.5px/1 var(--font-body);color:var(--muted)}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.dash-kpis span{padding:14px 16px;border-radius:14px;background:#F6F8FC;border:1px solid #EAEEF5}
.dash-kpis small{display:block;font:600 13.5px/1.2 var(--font-body);color:var(--label)}
.dash-kpis b{display:block;margin-top:6px;font:800 30px/1 var(--font-display);color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dash-bars{display:flex;align-items:flex-end;gap:12px;height:170px;padding-top:8px;border-bottom:2px solid #E4E7EF}
.dash-bars span{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.dash-bars i{display:block;width:100%;border-radius:8px 8px 0 0;background:linear-gradient(#5DA4FF,#3167CA)}
.dash-bars small{position:absolute;bottom:-26px;font:600 13px/1 var(--font-body);color:var(--label);white-space:nowrap}
.clist{border-radius:24px;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card);padding:20px 24px 22px}
.cl-top{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.cl-top .oi{width:40px;height:40px}
.cl-top b{font:800 25px/1.2 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.cl-tag{margin-left:auto;padding:6px 12px;border-radius:999px;background:var(--blue-050);color:var(--blue-700);font:700 13px/1 var(--font-body);white-space:nowrap}
.clist ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.clist li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;font:500 21px/1.35 var(--font-body);color:var(--ink)}
.clist .ck,.bat .ck{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ok-050);color:var(--ok);margin-top:1px}
.clist .ck svg,.bat .ck svg{width:16px;height:16px}
.cl-apps{display:flex;gap:12px;padding-top:12px;margin-top:8px;border-top:1px solid var(--line)}
.cl-apps .oi{width:38px;height:38px}
.phs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ph{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 20px 20px;border-radius:24px;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card)}
.ph-n{align-self:flex-start;padding:7px 12px;border-radius:999px;background:var(--blue);color:#fff;font:800 14px/1 var(--font-display);letter-spacing:.02em}
.ph b{font:800 22px/1.15 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.ph-apps{display:flex;gap:8px}
.ph-apps .oi{width:34px;height:34px}
.ph ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ph li{position:relative;padding-left:18px;font:500 15.5px/1.35 var(--font-body);color:var(--body)}
.ph li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--blue-300)}
.bat{border-radius:24px;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card);overflow:hidden}
.bat-h,.bat-r{display:grid;grid-template-columns:.8fr 1fr 1.1fr;gap:18px;align-items:center;padding:16px 26px}
.bat-r{padding:26px}
.bat-h{background:#F6F8FC;border-bottom:1px solid var(--line);font:700 14px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bat-h span:last-child{color:var(--ok)}
.bat-r{border-bottom:1px dashed #E3E7F0}
.bat-r:last-child{border-bottom:0}
.bat-r b{font:800 23px/1.2 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.bat-r .o{font:500 20px/1.3 var(--font-body);color:#9A4B45;text-decoration:line-through;text-decoration-color:rgba(217,58,48,.7);text-decoration-thickness:2px}
.bat-r .n{display:flex;align-items:flex-start;gap:10px;font:600 20px/1.3 var(--font-body);color:var(--ink)}

/* ================= v3: inside-Odoo screens (sizes in cqw of the component; --k scales for phones) ================= */
.ow{--k:1;--o-pri:#714B67;--o-link:#017E84;--o-bg:#F4F5F8;container-type:inline-size;position:relative;border-radius:1.6cqw;overflow:hidden;background:var(--o-bg);
  border:1px solid rgba(31,31,61,.1);box-shadow:0 2px 6px rgba(31,31,61,.06),0 40px 70px -34px rgba(19,47,102,.5);font-family:var(--font-body);color:var(--ink);text-align:left}
.ow *{box-sizing:border-box}
.ow-bar{height:4.2cqw;display:flex;align-items:center;gap:1cqw;padding:0 1.8cqw;background:#ECEEF3;border-bottom:1px solid #DFE3EA}
.ow-bar i{width:1.15cqw;height:1.15cqw;border-radius:50%;background:#CDD3DE}
.ow-bar i:nth-child(1){background:#FF6B5F}.ow-bar i:nth-child(2){background:#FFC83D}.ow-bar i:nth-child(3){background:#2ACB6B}
.ow-bar span{margin-left:1.6cqw;flex:0 1 46cqw;height:2.5cqw;border-radius:1.3cqw;background:#fff;font:500 1.3cqw/2.5cqw var(--font-body);color:var(--muted);padding:0 1.4cqw;white-space:nowrap;overflow:hidden}
.ow-nav{height:5.6cqw;display:flex;align-items:center;gap:2.2cqw;padding:0 2.2cqw;background:#fff;border-bottom:1px solid #E6E8EE;font:500 1.65cqw/1 var(--font-body);color:#4C4C63}
.ow-nav .oi{width:3.1cqw;height:3.1cqw;margin-right:-1cqw}
.ow-nav b{font:700 1.95cqw/1 var(--font-body);color:var(--ink)}
.ow-nav span.on{color:var(--ink);font-weight:600}
.ow-me{margin-left:auto;display:flex;align-items:center;gap:1.4cqw;font-style:normal}
.ow-me i{width:2.2cqw;height:2.2cqw;border-radius:50%;background:#E6E8EE}
.ow-me u{text-decoration:none;width:3cqw;height:3cqw;border-radius:50%;display:grid;place-items:center;background:var(--o-pri);color:#fff;font:700 1.25cqw/1 var(--font-body)}
.ow-cp{display:flex;align-items:center;gap:2cqw;padding:1.5cqw 2.2cqw;background:#fff;border-bottom:1px solid #E6E8EE}
.ow-bc{display:flex;align-items:center;gap:.9cqw;font:600 2.1cqw/1.1 var(--font-body);color:var(--o-link);white-space:nowrap;min-width:0;overflow:hidden}
.ow-bc .cur{color:var(--ink);font-weight:700}
.ow-bc i{font-style:normal;color:#B0B4C2;font-weight:400}
.ow-srch{margin-left:auto;display:flex;align-items:center;gap:1cqw;width:32cqw;height:3.8cqw;padding:0 1.3cqw;border:1px solid #DDE1E8;border-radius:.6cqw;font:500 1.45cqw/1 var(--font-body);color:var(--muted)}
.ow-srch svg{width:1.8cqw;height:1.8cqw;flex:none}
.ow-vs{display:flex;gap:.4cqw}
.ow-vs i{width:3.4cqw;height:3.4cqw;border-radius:.5cqw;background:#EEF0F4}
.ow-vs i.on{background:#E3DAE1;box-shadow:inset 0 0 0 2px var(--o-pri)}
.ow-body{position:relative}

/* form */
.ow-form{padding:1.6cqw 2.2cqw 2.4cqw}
.ow-bb{display:flex;align-items:center;justify-content:space-between;gap:1.6cqw;margin-bottom:1.6cqw}
.ow-btns{display:flex;gap:.8cqw}
.obtn{padding:1cqw 1.7cqw;border-radius:.55cqw;background:#E7E9EE;font:600 calc(1.55cqw*var(--k))/1 var(--font-body);color:#2D2D45;white-space:nowrap}
.obtn.pri{background:var(--o-pri);color:#fff}
.ow-sb{display:flex;border:1px solid #DDE1E8;border-radius:.6cqw;overflow:hidden;background:#fff}
.ow-sb span{position:relative;padding:1cqw 1.8cqw 1cqw 2.4cqw;font:600 calc(1.45cqw*var(--k))/1 var(--font-body);color:#9A9CB0;white-space:nowrap}
.ow-sb span:first-child{padding-left:1.6cqw}
.ow-sb span+span{border-left:1px solid #E6E8EE}
.ow-sb span.past{color:#6E7085}
.ow-sb span.on{background:#EFE6EC;color:var(--o-pri);font-weight:800}
.ow-sheet{position:relative;background:#fff;border:1px solid #E3E6EC;border-radius:.8cqw;padding:2.6cqw 3cqw 2.4cqw;box-shadow:0 1px 3px rgba(31,31,61,.05)}
.ow-ribbon{position:absolute;top:1.6cqw;right:-1px;padding:.8cqw 2.2cqw;background:#137A4A;color:#fff;font:800 calc(1.4cqw*var(--k))/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;border-radius:.4cqw 0 0 .4cqw}
.ow-title{font:800 calc(3.4cqw*var(--k))/1.05 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin-bottom:1.8cqw}
.ow-fields{display:grid;grid-template-columns:1fr 1fr;gap:1cqw 3.4cqw;margin-bottom:1.8cqw}
.of{display:grid;grid-template-columns:40% 1fr;align-items:center;gap:1cqw;padding:.7cqw .9cqw;margin:0 -.9cqw;border-radius:.6cqw}
.of span{font:600 calc(1.5cqw*var(--k))/1.2 var(--font-body);color:#6E7085}
.of b{display:flex;align-items:center;gap:.8cqw;font:600 calc(1.65cqw*var(--k))/1.25 var(--font-body);color:var(--ink);min-width:0}
.of.hl{background:rgba(49,103,202,.1);box-shadow:inset 0 0 0 2px rgba(49,103,202,.55)}
.of .ai{margin-left:auto;width:2.2cqw;height:2.2cqw;color:var(--blue);flex:none}
.ow-tabs{display:flex;gap:2.4cqw;border-bottom:1px solid #E3E6EC;margin-bottom:.4cqw}
.ow-tabs span{padding:1cqw 0;font:600 calc(1.5cqw*var(--k))/1 var(--font-body);color:#7C7E92}
.ow-tabs span.on{color:var(--ink);box-shadow:inset 0 -3px 0 var(--o-pri)}
.ow-tbl{width:100%;border-collapse:collapse;font:500 calc(1.5cqw*var(--k))/1.3 var(--font-body)}
.ow-tbl th{padding:1cqw .8cqw;text-align:left;font-weight:700;color:#4C4C63;border-bottom:2px solid #E3E6EC;white-space:nowrap}
.ow-tbl td{padding:1.05cqw .8cqw;border-bottom:1px solid #EEF0F4;color:var(--ink);white-space:nowrap}
.ow-tbl .n{text-align:right;font-variant-numeric:tabular-nums}
.ow-tbl tr.hl td{background:#EAF0FB}
.ow-total{display:flex;justify-content:flex-end;align-items:baseline;gap:2.4cqw;margin-top:1.6cqw;font:600 calc(1.6cqw*var(--k))/1 var(--font-body);color:#6E7085}
.ow-total b{font:800 calc(2.4cqw*var(--k))/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.ow-chat{display:flex;align-items:center;gap:1.2cqw;margin:1.6cqw 0 0;padding:1.3cqw 1.6cqw;border-radius:.8cqw;background:#fff;border:1px solid #D7E2F7;font:500 calc(1.5cqw*var(--k))/1.35 var(--font-body);color:var(--blue-700)}
.ow-chat i{width:2.4cqw;height:2.4cqw;flex:none;color:var(--blue)}

/* list */
.ow-list{padding:0 0 1.4cqw;background:#fff}
.ow-tbl.lst th,.ow-tbl.lst td{padding:1.25cqw 1.2cqw}
.ow-tbl.lst th{background:#fff}
.ow-tbl .cb{width:3.6cqw;padding-right:0}
.ow-tbl .cb i{display:block;width:1.9cqw;height:1.9cqw;border-radius:.4cqw;border:2px solid #C7CBD6}
.ow-tbl .cb i.on{background:var(--o-pri);border-color:var(--o-pri)}
.ow-tbl.lst tr.hl td{background:#EFF4FD;box-shadow:inset 0 1px 0 #C9D8F5,inset 0 -1px 0 #C9D8F5}
.ob{display:inline-block;padding:.55cqw 1.2cqw;border-radius:99px;font:700 calc(1.3cqw*var(--k))/1 var(--font-body);white-space:nowrap}
.ob-g{background:#EDEEF2;color:#5C5E73}.ob-b{background:#DDE7F8;color:#1E4691}.ob-o{background:#FDEFD6;color:#8A5A00}.ob-ok{background:#DDF3E7;color:#137A4A}.ob-r{background:#FCE3E1;color:#B3271E}
.ow-sum{display:flex;justify-content:flex-end;padding:1.2cqw 2cqw 0;font:700 calc(1.55cqw*var(--k))/1 var(--font-body);color:var(--ink)}

/* kanban */
.ow-kb{display:grid;gap:1.4cqw;padding:1.6cqw 2cqw 2cqw}
.kb-col{display:flex;flex-direction:column;gap:1cqw;min-width:0}
.kb-h{display:flex;align-items:center;justify-content:space-between;font:700 calc(1.7cqw*var(--k))/1 var(--font-body)}
.kb-h span{font-weight:600;color:var(--muted)}
.kb-bar{height:.7cqw;border-radius:.4cqw;background:#E6E8EE;overflow:hidden}
.kb-bar i{display:block;height:100%;background:linear-gradient(90deg,#21B799 0 60%,#FFC83D 60% 85%,#E4574B 85%)}
.kb-card{display:grid;gap:.7cqw;padding:1.3cqw 1.4cqw;border-radius:.8cqw;background:#fff;border:1px solid #E3E6EC;box-shadow:0 1px 2px rgba(31,31,61,.05)}
.kb-card b{font:700 calc(1.6cqw*var(--k))/1.25 var(--font-body);color:var(--ink)}
.kb-card > span{font:500 calc(1.4cqw*var(--k))/1.3 var(--font-body);color:#6E7085}
.kb-ft{display:flex;align-items:center;justify-content:space-between}
.kb-ft em{font:700 calc(1.45cqw*var(--k))/1 var(--font-body);font-style:normal;color:var(--ink)}
.kb-ft i{width:2.8cqw;height:2.8cqw;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 calc(1.1cqw*var(--k))/1 var(--font-body);font-style:normal}
.kb-card.hl{border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,103,202,.22),0 24px 30px -16px rgba(19,47,102,.5);transform:rotate(-2.5deg) translateY(-.6cqw)}

/* dashboard + charts */
.ow-dash{position:relative;display:grid;gap:1.6cqw;padding:1.8cqw 2.2cqw 2.4cqw}
.od-kpis{display:grid;gap:1.2cqw}
.od-kpis > div,.kp{padding:1.5cqw 1.7cqw;border-radius:1cqw;background:#fff;border:1px solid #E3E6EC}
.od-kpis span,.kp span{display:block;font:600 calc(1.4cqw*var(--k))/1.2 var(--font-body);color:#6E7085}
.od-kpis b,.kp b{display:block;margin-top:.8cqw;font:800 calc(3cqw*var(--k))/1 var(--font-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.od-kpis em,.kp em{display:inline-block;margin-top:.8cqw;font:700 calc(1.3cqw*var(--k))/1 var(--font-body);font-style:normal;color:#137A4A}
.od-kpis em.dn,.kp em.dn{color:#B3271E}
.od-chart{padding:1.6cqw 1.8cqw 1cqw;border-radius:1cqw;background:#fff;border:1px solid #E3E6EC}
.od-ct{font:700 calc(1.65cqw*var(--k))/1 var(--font-body);color:var(--ink);margin-bottom:.8cqw}
.od-demo{position:absolute;right:2.2cqw;bottom:.8cqw;font:600 1.1cqw/1 var(--font-body);color:#A3A6B8;letter-spacing:.04em}
svg.chart{display:block;width:100%;height:auto;overflow:visible}
svg.chart .gl{stroke:#E8EBF1;stroke-width:2}
svg.chart .cx{font:600 17px var(--font-body);fill:#6E7085}
svg.chart .cx.b{font-weight:800;fill:#1F1F3D}
svg.chart .cx.w{fill:#fff;font-weight:700}
svg.chart .cv{font:800 44px var(--font-display);fill:#1F1F3D;letter-spacing:-1px}
svg.chart .cl{font:600 16px var(--font-body);fill:#6E7085}
svg.chart .tip{font:800 17px var(--font-body);fill:#fff}
.pbars{display:grid;gap:1.6cqw;padding:.6cqw 0 1cqw}
.pb{display:grid;grid-template-columns:1fr auto;gap:.8cqw 1.2cqw;align-items:center}
.pb span{font:600 calc(1.55cqw*var(--k))/1.2 var(--font-body);color:var(--ink)}
.pb b{font:800 calc(1.6cqw*var(--k))/1 var(--font-body);color:var(--ink)}
.pb i{grid-column:1 / 3;height:1.5cqw;border-radius:1cqw;background:#E9EDF4;overflow:hidden}
.pb i em{display:block;height:100%;border-radius:1cqw;background:linear-gradient(90deg,#6FA0F5,#3167CA)}
.pb.hl i em{background:linear-gradient(90deg,#21B799,#137A4A)}

/* planning */
.ow-pl{padding:1.4cqw 2cqw 2cqw;background:#fff}
.pl-h,.pl-r{display:grid;grid-template-columns:24cqw 1fr;align-items:center}
.pl-h{grid-template-columns:24cqw repeat(auto-fit,minmax(0,1fr));padding-bottom:1cqw;border-bottom:2px solid #E3E6EC;font:700 calc(1.45cqw*var(--k))/1 var(--font-body);color:#6E7085;text-align:center}
.pl-r{height:6cqw;border-bottom:1px solid #EEF0F4}
.pl-n{display:flex;align-items:center;gap:1cqw;font:600 calc(1.5cqw*var(--k))/1.1 var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden}
.pl-n i{flex:none;width:3cqw;height:3cqw;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 calc(1.1cqw*var(--k))/1 var(--font-body);font-style:normal}
.pl-t{display:grid;gap:.5cqw;height:100%;align-items:center;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),#EEF0F4 calc(20% - 1px) 20%)}
.pl-t em{grid-row:1;height:4cqw;border-radius:.7cqw;display:flex;align-items:center;padding:0 1.2cqw;font:700 calc(1.3cqw*var(--k))/1 var(--font-body);font-style:normal;color:#fff;white-space:nowrap;overflow:hidden;box-shadow:0 6px 12px -8px rgba(19,47,102,.6)}

/* pos + kds */
.ow-pos{display:grid;grid-template-columns:1fr 36cqw;min-height:48cqw}
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw;padding:1.8cqw;align-content:start;background:#F4F5F8}
.pos-p{display:grid;gap:.6cqw;padding:1cqw;border-radius:1cqw;background:#fff;border:1px solid #E3E6EC}
.pos-p i{display:block;aspect-ratio:4/3;border-radius:.7cqw}
.pos-p b{font:700 calc(1.4cqw*var(--k))/1.2 var(--font-body);color:var(--ink)}
.pos-p span{font:600 calc(1.3cqw*var(--k))/1 var(--font-body);color:#6E7085}
.pos-o{display:flex;flex-direction:column;background:#fff;border-left:1px solid #E3E6EC;padding:1.8cqw}
.pos-oh{font:800 calc(1.9cqw*var(--k))/1 var(--font-display);margin-bottom:1.2cqw}
.pos-l{display:flex;justify-content:space-between;gap:1cqw;padding:1cqw 0;border-bottom:1px dashed #E3E6EC}
.pos-l b{display:block;font:700 calc(1.5cqw*var(--k))/1.2 var(--font-body)}
.pos-l small{font:500 calc(1.3cqw*var(--k))/1.2 var(--font-body);color:#6E7085}
.pos-l em{font:700 calc(1.5cqw*var(--k))/1.2 var(--font-body);font-style:normal}
.pos-t{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:1.4cqw;font:600 calc(1.6cqw*var(--k))/1 var(--font-body);color:#6E7085}
.pos-t b{font:800 calc(2.8cqw*var(--k))/1 var(--font-display);color:var(--ink)}
.pos-pay{margin-top:1.4cqw;padding:1.6cqw;border-radius:.8cqw;background:var(--o-pri);color:#fff;text-align:center;font:800 calc(1.8cqw*var(--k))/1 var(--font-display)}
.ow-kds{display:grid;gap:1.4cqw;padding:1.8cqw;background:#2B2F3E}
.kds-t{border-radius:1cqw;background:#fff;overflow:hidden}
.kds-h{display:flex;justify-content:space-between;align-items:center;padding:1.2cqw 1.4cqw;color:#fff;font:800 calc(1.7cqw*var(--k))/1 var(--font-display)}
.kds-h span{font:600 calc(1.3cqw*var(--k))/1 var(--font-body);opacity:.9}
.kds-t.cook .kds-h{background:#E8A33D}.kds-t.ok .kds-h{background:#137A4A}.kds-t.late .kds-h{background:#D93A30}
.kds-i{display:flex;gap:1cqw;padding:1cqw 1.4cqw;border-bottom:1px solid #EEF0F4;font:600 calc(1.5cqw*var(--k))/1.25 var(--font-body)}
.kds-i em{font-style:normal;font-weight:800;color:var(--blue)}
.kds-f{padding:1cqw 1.4cqw;font:700 calc(1.3cqw*var(--k))/1 var(--font-body);color:#6E7085;text-transform:uppercase;letter-spacing:.06em}

/* apps home + discuss */
.ow-home{display:grid;grid-template-columns:repeat(6,1fr);gap:2.4cqw 1.6cqw;padding:5cqw 4cqw;background:linear-gradient(135deg,#F6F1F5,#E9EFFA)}
.oh-a{display:grid;justify-items:center;gap:1cqw;text-align:center}
.oh-a span{width:8.4cqw;height:8.4cqw;border-radius:1.8cqw;background:#fff;display:grid;place-items:center;box-shadow:0 10px 18px -12px rgba(19,47,102,.45)}
.oh-a .oi{width:5.6cqw;height:5.6cqw}
.oh-a b{font:600 calc(1.35cqw*var(--k))/1.2 var(--font-body);color:var(--ink)}
.oh-a.hl span{box-shadow:0 0 0 .5cqw rgba(49,103,202,.35),0 16px 24px -14px rgba(19,47,102,.6)}
.ow-disc{display:grid;grid-template-columns:22cqw 1fr;min-height:40cqw;background:#fff}
.dc-side{display:grid;align-content:start;gap:.4cqw;padding:1.8cqw 1.2cqw;background:#F6F7FA;border-right:1px solid #E6E8EE}
.dc-side span{padding:1cqw 1.2cqw;border-radius:.6cqw;font:600 calc(1.45cqw*var(--k))/1 var(--font-body);color:#4C4C63}
.dc-side span.on{background:#E3DAE1;color:var(--o-pri)}
.dc-main{display:grid;align-content:start;gap:1.6cqw;padding:2cqw}
.dc-m{display:flex;gap:1.3cqw;align-items:flex-start}
.dc-m > i{flex:none;width:3.6cqw;height:3.6cqw;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 calc(1.2cqw*var(--k))/1 var(--font-body);font-style:normal}
.dc-m > i svg{width:55%;height:55%}
.dc-m b{display:block;font:700 calc(1.45cqw*var(--k))/1.2 var(--font-body);margin-bottom:.4cqw}
.dc-m p{margin:0;font:500 calc(1.55cqw*var(--k))/1.4 var(--font-body);color:#2D2D45}
.dc-m.bot > div{padding:1.2cqw 1.5cqw;border-radius:1cqw;background:#EFF4FD;border:1px solid #D2DFF6}
.dc-att{display:inline-block;margin-top:.8cqw;padding:.7cqw 1.1cqw;border-radius:.6cqw;background:#fff;border:1px solid #D7DCE6;font:600 calc(1.3cqw*var(--k))/1 var(--font-body);color:#4C4C63}

/* phone with an Odoo view */
.phone.op .scr{background:#F4F5F8}
.op-status{display:flex;justify-content:space-between;align-items:center;padding:7% 9% 2%;font:700 calc(100cqw/20) var(--font-body)}
.phone.op{container-type:inline-size}
.op-status{font-size:4.6cqw}
.op-sig{display:flex;gap:1.2cqw;align-items:flex-end}.op-sig i{width:1.6cqw;background:#1F1F3D;border-radius:1px}
.op-sig i:nth-child(1){height:1.8cqw}.op-sig i:nth-child(2){height:2.6cqw}.op-sig i:nth-child(3){height:3.4cqw}.op-sig i:nth-child(4){height:4.2cqw}
.op-nav{display:flex;align-items:center;gap:3cqw;padding:3cqw 5cqw;background:#fff;border-bottom:1px solid #E6E8EE}
.op-nav .oi{width:8cqw;height:8cqw}
.op-nav b{font:800 5.4cqw/1.1 var(--font-display);color:var(--ink);white-space:nowrap;overflow:hidden}
.op-body.ow{--k:2.3;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
.op-body .ow-form{padding:2.4cqw}
.op-body .ow-fields{grid-template-columns:1fr}
.op-body .ow-bb{flex-direction:column;align-items:stretch}
.op-body .ow-sb span{flex:1;padding:1.6cqw 1cqw;text-align:center}
.op-body .ow-sheet{padding:3.2cqw}
.op-body .ow-kb{grid-template-columns:1fr!important}
.op-body .ow-kb .kb-col:nth-child(n+2){display:none}
.op-body .ow-pos{grid-template-columns:1fr}.op-body .pos-grid{grid-template-columns:1fr 1fr}.op-body .pos-o{border-left:0}
.op-body .ow-kds{grid-template-columns:1fr!important}.op-body .kds-t:nth-child(n+3){display:none}
.op-body .ow-home{grid-template-columns:repeat(3,1fr)}
.op-body .od-kpis{grid-template-columns:1fr 1fr!important}
.op-body .ow-disc{grid-template-columns:1fr}.op-body .dc-side{display:none}
.op-body .ow-tbl th:nth-child(n+4),.op-body .ow-tbl td:nth-child(n+4){display:none}

/* ================= v3: cards ================= */
.gcard,.kpis,.tl,.stp,.cht,.rcp,.ntf,.stt,.rte{container-type:inline-size;font-family:var(--font-body);color:var(--ink);text-align:left}
.glass{background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 30px 60px -30px rgba(19,47,102,.45),inset 0 1px 0 rgba(255,255,255,.9)!important}
.gcard{position:relative;padding:4cqw 4.4cqw 3.4cqw;border-radius:4.4cqw;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card)}
.gc-h{display:flex;align-items:center;gap:2.4cqw;margin-bottom:2.4cqw}
.gc-h b{font:800 5.2cqw/1.15 var(--font-display);letter-spacing:-.02em}
.gc-h span{margin-left:auto;padding:1.2cqw 2.4cqw;border-radius:99px;background:var(--blue-050);color:var(--blue-700);font:700 3cqw/1 var(--font-body);white-space:nowrap}
.gc-note{margin-top:2cqw;font:600 3.4cqw/1.35 var(--font-body);color:var(--label)}
.gcard .od-demo{font-size:2.2cqw;right:4.4cqw;bottom:1.6cqw}
.gcard svg.chart .cx{font-size:19px}
.kpis{display:grid;gap:2.4cqw}
.kpis .kp{padding:4cqw 4.4cqw;border-radius:4cqw;box-shadow:var(--shadow-card);border:1px solid #E3E7F0}
.kpis .kp .oi{width:8cqw;height:8cqw;margin-bottom:2cqw}
.kpis .kp span{font-size:3.6cqw}.kpis .kp b{font-size:9cqw;margin-top:1.6cqw}.kpis .kp em{font-size:3.2cqw}
.kpis[style*="repeat(2"] .kp span{font-size:3.2cqw}.kpis[style*="repeat(2"] .kp b{font-size:7cqw}
.kpis[style*="repeat(3"] .kp span,.kpis[style*="repeat(4"] .kp span{font-size:2.4cqw}.kpis[style*="repeat(3"] .kp b{font-size:5cqw}.kpis[style*="repeat(4"] .kp b{font-size:4cqw}
.kpis[style*="repeat(3"] .kp em,.kpis[style*="repeat(4"] .kp em{font-size:2.2cqw}.kpis[style*="repeat(3"] .kp,.kpis[style*="repeat(4"] .kp{padding:3cqw}
.tl{position:relative;display:grid;gap:3cqw;padding:5cqw;border-radius:5cqw;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card)}
.tl-h{font:800 5.4cqw/1.15 var(--font-display);letter-spacing:-.02em;margin-bottom:1cqw}
.tl-i{position:relative;display:grid;grid-template-columns:17cqw 9cqw 1fr;align-items:center;gap:2.4cqw}
.tl-i:not(:last-child)::after{content:"";position:absolute;left:calc(17cqw + 2.4cqw + 4.5cqw);top:9cqw;bottom:-3cqw;width:.7cqw;margin-left:-.35cqw;background:repeating-linear-gradient(#A9C6F6 0 1.4cqw,transparent 1.4cqw 2.6cqw)}
.tl-w{font:700 3.4cqw/1.1 var(--font-body);color:var(--label);text-align:right}
.tl-i > i{width:9cqw;height:9cqw;border-radius:50%;background:#fff;border:.8cqw solid var(--blue-100);display:grid;place-items:center}
.tl-i > i .oi{width:5cqw;height:5cqw}
.tl-i.hot > i{border-color:var(--blue);box-shadow:0 0 0 2cqw rgba(49,103,202,.15)}
.tl-i b{display:block;font:700 4cqw/1.2 var(--font-body)}
.tl-i small{display:block;margin-top:.6cqw;font:500 3.2cqw/1.3 var(--font-body);color:var(--label)}
.stp{display:flex;align-items:center;gap:1.4cqw}
.stp.v{flex-direction:column;align-items:stretch}
.stp .st{flex:1;display:grid;justify-items:center;gap:1.4cqw;padding:3cqw 2cqw;border-radius:3.4cqw;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card);text-align:center;min-width:0}
.stp.v .st{grid-template-columns:auto 1fr;justify-items:start;text-align:left;align-items:center}
.stp.v .st small{grid-column:2}
.st-ic{width:10cqw;height:10cqw;border-radius:3cqw;background:var(--blue-050);display:grid;place-items:center}
.stp.v .st-ic{grid-row:1 / 3;width:8cqw;height:8cqw}
.st-ic .oi{width:65%;height:65%}
.st-ic b{font:800 4.6cqw/1 var(--font-display);color:var(--blue)}
.stp .st > b{font:800 3.6cqw/1.15 var(--font-display);letter-spacing:-.01em}
.stp.v .st > b{font-size:4.4cqw}
.stp .st small{font:500 2.6cqw/1.3 var(--font-body);color:var(--label)}
.stp.v .st small{font-size:3.3cqw}
.stp .st.hot{border-color:var(--blue);box-shadow:0 0 0 1cqw rgba(49,103,202,.16),var(--shadow-card)}
.st-ar{flex:none;width:3cqw;height:3cqw;border-top:.7cqw solid var(--blue);border-right:.7cqw solid var(--blue);transform:rotate(45deg);margin:0 .6cqw}
.stp.v .st-ar{align-self:center;transform:rotate(135deg);margin:.2cqw 0}
.cht{border-radius:5cqw;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card);overflow:hidden}
.cht-h{display:flex;align-items:center;gap:3cqw;padding:3.6cqw 4.4cqw;background:#F6F8FC;border-bottom:1px solid #E6E9F0}
.cht.whatsapp .cht-h{background:#0F7A62;color:#fff}.cht.whatsapp .cht-h small{color:#CDEDE4}
.cht-h > i{width:9cqw;height:9cqw;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;font:800 4.4cqw/1 var(--font-display);font-style:normal}
.cht.web .cht-h > i{background:var(--blue)}.cht.odoo .cht-h > i{background:var(--odoo)}
.cht-h > i svg{width:55%;height:55%}
.cht-h b{display:block;font:700 4.6cqw/1.2 var(--font-body)}
.cht-h small{display:block;font:500 3cqw/1.2 var(--font-body);color:var(--label)}
.cht-b{display:grid;gap:2.4cqw;padding:4cqw;background:#EEF2F7}
.cht.whatsapp .cht-b{background:#EFEAE2}
.cm{position:relative;max-width:82%;padding:2.6cqw 3.4cqw;border-radius:3cqw;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.cm p{margin:0;font:500 4cqw/1.4 var(--font-body);color:#1F1F2E}
.cm small{display:block;margin-top:.8cqw;font:500 2.6cqw/1 var(--font-body);color:#8A8D9E;text-align:right}
.cm.out{justify-self:end;background:#D9FDD3}.cht.web .cm.out,.cht.odoo .cm.out{background:#DDE7F8}
.cm.bot{display:flex;gap:2cqw;align-items:flex-start;background:#fff;border:1px solid #D2DFF6}
.cm.bot > i{flex:none;width:6cqw;height:6cqw;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}.cm.bot > i svg{width:60%;height:60%}
.rcp{position:relative;padding:6cqw 6cqw 8cqw;background:#FFFEFB;border-radius:1.4cqw;box-shadow:0 30px 50px -26px rgba(19,47,102,.5),0 2px 4px rgba(31,31,61,.08)}
.rcp-h{padding-bottom:4cqw;margin-bottom:3cqw;border-bottom:.6cqw dashed #D8DCE5}
.rcp-h b{display:block;font:800 5cqw/1.15 var(--font-display)}
.rcp-h small{display:block;margin-top:1cqw;font:700 3cqw/1 var(--font-body);letter-spacing:.2em;color:var(--muted)}
.rcp-l{display:flex;justify-content:space-between;gap:3cqw;padding:1.8cqw 0;font:500 3.8cqw/1.25 ui-monospace,Consolas,monospace;color:#2D2D45}
.rcp-t{display:flex;justify-content:space-between;margin-top:3cqw;padding-top:3cqw;border-top:.6cqw solid #1F1F3D;font:800 4.6cqw/1 ui-monospace,Consolas,monospace}
.rcp-s{position:absolute;right:6cqw;top:32%;padding:2cqw 4cqw;border:1cqw solid #137A4A;border-radius:2cqw;color:#137A4A;font:900 7cqw/1 var(--font-display);letter-spacing:.08em;transform:rotate(-14deg);opacity:.85}
.rcp-z{position:absolute;left:0;right:0;bottom:-3cqw;height:4cqw;background:radial-gradient(circle at 3cqw -1cqw,transparent 3cqw,#FFFEFB 3.1cqw) 0 0/6cqw 4cqw repeat-x}
.ntf{display:flex;align-items:center;gap:4cqw;padding:4cqw 5cqw;border-radius:6cqw;background:rgba(255,255,255,.94);border:1px solid #E3E7F0;box-shadow:0 30px 50px -26px rgba(19,47,102,.55)}
.ntf .oi{width:12cqw;height:12cqw;flex:none}
.ntf b{display:block;font:800 5cqw/1.15 var(--font-display);letter-spacing:-.01em}
.ntf span{display:block;margin-top:1cqw;font:500 3.8cqw/1.3 var(--font-body);color:var(--label)}
.ntf em{align-self:flex-start;margin-left:auto;font:600 3.2cqw/1 var(--font-body);font-style:normal;color:var(--muted);white-space:nowrap}
.stt{display:grid;gap:1.6cqw;padding:6cqw 7cqw;border-radius:7cqw;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card)}
.stt b{font:800 22cqw/.95 var(--font-display);letter-spacing:-.05em;color:var(--blue)}
.stt span{font:600 6cqw/1.2 var(--font-body);color:var(--ink)}
.rte{border-radius:4cqw;overflow:hidden;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card)}
.rte svg{display:block;width:100%;height:auto}
.rte .rn{font:800 20px var(--font-display);fill:#3167CA}.rte .rn.w{fill:#fff}
.rte-l{display:grid;gap:1.6cqw;padding:3.4cqw 4cqw}
.rte-l span{display:grid;grid-template-columns:6cqw 1fr auto;align-items:center;gap:2cqw;font:600 3.4cqw/1.2 var(--font-body)}
.rte-l em{width:6cqw;height:6cqw;border-radius:50%;display:grid;place-items:center;background:var(--blue-050);color:var(--blue);font:800 3cqw/1 var(--font-display);font-style:normal}
.rte-l span.hot em{background:var(--blue);color:#fff}
.rte-l small{font:600 3cqw/1 var(--font-body);color:var(--label)}

/* connector between two elements */
.L-link svg{display:block;width:100%;height:100%;overflow:visible}
.lk-lab{position:absolute;transform:translate(-50%,-50%);padding:10px 18px;border-radius:999px;background:#1F1F3D;color:#fff;font:700 21px/1 var(--font-display);white-space:nowrap;box-shadow:0 14px 24px -14px rgba(19,47,102,.8)}
.lk-lab.blue{background:var(--blue)}
.lk-lab.white{background:#fff;color:var(--blue-700)}

/* ================= v3: backgrounds, camera floor, brand ================= */
.bgx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgx .au{position:absolute;border-radius:50%}
.bgx .grid{position:absolute;inset:0}
.bgx .floor{position:absolute;left:-40%;right:-40%;bottom:-8%;height:70%;transform-origin:50% 100%}
.bgx .spot{position:absolute;border-radius:50%}
.bgx .ray{position:absolute;top:-20%;height:140%;transform-origin:50% 0}
.bgx .ring{position:absolute;border-radius:50%}
.bgx .dotf{position:absolute;inset:0}
.drip.dark{color:#fff}
.drip.dark .d-head{color:#fff}.drip.dark .d-head em{color:#8CB6FF}.drip.dark .d-sub{color:#C9D6F2}
.d-brand{position:absolute;z-index:40;display:flex;align-items:center;gap:16px}
.d-brand img.lg{height:40px;width:auto}
.d-brand .url{font:600 17px/1 var(--font-body);color:var(--label);letter-spacing:.01em;padding-left:16px;border-left:2px solid rgba(31,31,61,.14)}
.d-brand.chip{padding:12px 20px 12px 16px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);box-shadow:0 14px 30px -18px rgba(19,47,102,.5)}
.drip.dark .d-brand img.lg{filter:brightness(0) invert(1)}
.drip.dark .d-brand .url{color:#C9D6F2;border-color:rgba(255,255,255,.25)}
.drip.dark .d-brand.chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.pbadge{position:absolute;z-index:40}
.pbadge img{height:48px;width:auto}
.pbadge.o20 .d-badge{position:static;transform:scale(.72);transform-origin:right top}
.drip.dark .pbadge{padding:8px 12px;border-radius:14px;background:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.drip.dark .pbadge.o20{padding:4px 8px 0}
.d-copy.free{right:auto}
.d-copy.free .d-sub{margin-left:0;margin-right:0}
.d-copy.free.ctr .d-sub{margin-left:auto;margin-right:auto}

.pos-p i{display:grid!important;place-items:center;font:800 calc(2.4cqw*var(--k))/1 var(--font-display);font-style:normal}
svg.chart .cx.fz{font-size:26px}
.L-link{pointer-events:none}.L-link path,.L-link .lk-lab{pointer-events:auto}
.ow{font-size:calc(1.5cqw*var(--k))}

/* standard frame on dark backgrounds */
.drip.dark .d-logo{filter:brightness(0) invert(1)}
.drip.dark .d-badge.ready{padding:8px 12px;border-radius:14px;background:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.drip.dark .d-badge.ready img{height:62px}
.drip.dark .d-badge.o20{padding:10px 14px 6px;border-radius:14px;background:#fff}

/* ================= simple style (v4): the look of the first drips on a clean background ================= */
.d-ground .haze{position:absolute;left:0;right:0;bottom:0;height:36%;
  background:linear-gradient(180deg,rgba(214,227,249,0) 0%,rgba(178,203,245,.42) 52%,rgba(132,168,238,.72) 100%)}
/* one Odoo view as a card */
.apc{border-radius:26px;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card);overflow:hidden;text-align:left}
.apc-top{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line);background:#FBFCFE}
.apc-top .oi{width:44px;height:44px;flex:none}
.apc-top b{display:block;font:800 24px/1.15 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.apc-top small{display:block;margin-top:2px;font:500 16px/1.2 var(--font-body);color:var(--muted)}
.apc-tag{margin-left:auto;padding:8px 14px;border-radius:999px;background:var(--blue-050);color:var(--blue-700);font:700 15px/1 var(--font-body);white-space:nowrap}
.apc-body.ow{border:0;border-radius:0;box-shadow:none;background:#F7F8FB}
.apc-body .ow-list,.apc-body .ow-pl{background:#fff}
/* checklist: the old way */
.clist.old{background:#F3F4F8;border-color:#E1E4EC;box-shadow:0 2px 6px rgba(31,31,61,.05),0 28px 50px -30px rgba(19,47,102,.35)}
.clist.old .cl-top b{color:#55556D}
.clist.old .cl-tag{background:#FCE3E1;color:#B3271E}
.clist.old li{color:#62627A}
.clist .ck.x{background:#FCE3E1;color:var(--red)}
/* QR card */
.qrc{display:grid;justify-items:center;gap:12px;padding:22px 22px 20px;border-radius:26px;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-float);text-align:center}
.qr-t{font:800 23px/1.15 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.qr-box{position:relative;width:100%;aspect-ratio:1}
.qr-box svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}
.qr-logo{position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:14px;background:#fff;display:grid;place-items:center}
.qr-logo .oi{width:72%;height:72%}
.qr-x{font:600 17px/1.3 var(--font-body);color:var(--label)}
/* cards sized in cqw measure their own padding and corners against the layer, so the studio and the export match */
.L-graph > .in,.L-kpis > .in,.L-timeline > .in,.L-steps > .in,.L-chat > .in,.L-receipt > .in,.L-notif > .in,.L-stat > .in,.L-route > .in,.L-window > .in{container-type:inline-size}
.clist.big{padding:24px 28px 24px}
.clist.big .cl-top b{font-size:28px}
.clist.big li{font-size:24px;padding:13px 0}
.clist.big .ck{width:34px;height:34px}.clist.big .ck svg{width:19px;height:19px}
.clist.big .cl-apps .oi{width:44px;height:44px}
.stt.big{justify-items:center;text-align:center;padding:9cqw 6cqw 8cqw}
.stt.big b{font-size:36cqw}
.stt.big span{font-size:8cqw}

/* ================= v5: Odoo cards, elements, background patterns, industry props ================= */
/* shared Odoo card */
.oc{position:relative;border-radius:24px;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card);overflow:hidden;text-align:left;font-family:var(--font-body);color:var(--ink)}
.oc-top{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);background:#FBFCFE}
.oc-top .oi{width:44px;height:44px;flex:none}
.oc-top > div{min-width:0}
.oc-top b{display:block;font:800 23px/1.15 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.oc-top small{display:block;font:600 15px/1.25 var(--font-body);color:var(--muted)}
.oc-top small + b{margin-top:2px}
.oc-st{margin-left:auto;flex:none;padding:7px 14px;border-radius:999px;background:var(--blue-050);color:var(--blue-700);font:700 15px/1 var(--font-body);white-space:nowrap}
.oc-st.ok{background:var(--ok-050);color:var(--ok)}.oc-st.o{background:#FDEFD6;color:#8A5A00}.oc-st.r{background:#FCE3E1;color:#B3271E}
.av{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;color:#fff;font:800 13px/1 var(--font-body);letter-spacing:.02em}
.av.xl{width:84px;height:84px;font-size:28px}

/* documents: quotation, sales order, invoice, bill, purchase order, delivery, receipt */
.od-bar{display:flex;margin:16px 22px 2px;border:1px solid #DDE1E8;border-radius:10px;overflow:hidden;background:#fff}
.od-bar span{flex:1;padding:9px 6px;text-align:center;font:700 14px/1.1 var(--font-body);color:#9A9CB0;white-space:nowrap}
.od-bar span+span{border-left:1px solid #E6E8EE}
.od-bar span.past{color:#6E7085}
.od-bar span.on{background:#EFE6EC;color:var(--odoo)}
.od-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding:14px 22px 4px}
.od-fields small{display:block;font:600 13px/1.2 var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.od-fields b{display:block;margin-top:3px;font:600 18px/1.25 var(--font-body)}
.od-lines{margin:12px 22px 0;border-top:2px solid #E3E6EC}
.od-lh,.od-l{display:grid;grid-template-columns:1fr auto 118px;gap:14px;align-items:center;padding:9px 0}
.od-lh{font:700 13px/1 var(--font-body);color:#6E7085;text-transform:uppercase;letter-spacing:.05em}
.od-l{border-top:1px solid #EEF0F4;font:500 17px/1.25 var(--font-body)}
.od-l.hl{background:#EAF0FB;margin:0 -10px;padding:9px 10px;border-radius:8px}
.od-l span:nth-child(2){color:var(--label);font-variant-numeric:tabular-nums;white-space:nowrap}
.od-l span:nth-child(3),.od-lh span:nth-child(3){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.od-tot{display:flex;justify-content:flex-end;align-items:baseline;gap:18px;padding:14px 22px 2px;font:600 16px/1 var(--font-body);color:var(--label)}
.od-tot b{font:800 28px/1 var(--font-display);color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.od-btns{display:flex;align-items:center;gap:10px;padding:16px 22px 20px}
.od-btns > span{padding:11px 18px;border-radius:10px;background:#E7E9EE;font:700 16px/1 var(--font-display);color:#2D2D45;white-space:nowrap}
.od-btns > span.pri{background:var(--odoo);color:#fff;box-shadow:0 10px 18px -10px rgba(113,75,103,.8)}
.od-btns em{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 14px/1.25 var(--font-body);font-style:normal;color:var(--blue-700);text-align:right}
.od-btns em svg{width:18px;height:18px;flex:none}
.od-rib{position:absolute;top:30px;right:-46px;width:190px;padding:8px 0;text-align:center;transform:rotate(38deg);background:#137A4A;color:#fff;font:800 16px/1 var(--font-body);letter-spacing:.14em;box-shadow:0 6px 12px -6px rgba(0,0,0,.4)}
.odoc.compact .od-fields{grid-template-columns:1fr;padding-bottom:0}
.odoc.compact .od-tot{padding-bottom:18px}

/* product */
.pr-img{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-bottom:1px solid var(--line)}
.pr-img svg{width:30%;height:auto}
.pr-bdg{position:absolute;left:14px;top:14px;padding:7px 12px;border-radius:999px;background:#fff;color:var(--ink);font:700 14px/1 var(--font-body);box-shadow:0 6px 14px -8px rgba(19,47,102,.5)}
.pr-b{padding:18px 22px 22px}
.pr-b > b{display:block;font:800 26px/1.15 var(--font-display);letter-spacing:-.02em}
.pr-b > small{display:block;margin-top:4px;font:600 15px/1.2 var(--font-body);color:var(--muted)}
.pr-price{margin-top:10px;font:800 26px/1 var(--font-display);color:var(--blue);letter-spacing:-.02em}
.pr-q{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin-top:16px}
.pr-q div{padding:10px 12px;border-radius:12px;background:#F6F8FC;border:1px solid #EAEEF5;min-width:0}
.pr-q small{display:block;font:600 13px/1.2 var(--font-body);color:var(--label)}
.pr-q b{display:block;margin-top:4px;font:800 20px/1.05 var(--font-display);font-variant-numeric:tabular-nums}
.pr-bar{height:10px;margin-top:14px;border-radius:6px;background:#E9EDF4;overflow:hidden}
.pr-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#21B799,#137A4A)}
.pr-bar.low i{background:linear-gradient(90deg,#FFB547,#D93A30)}
.pr-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pr-tags span{padding:7px 12px;border-radius:999px;background:var(--blue-050);color:var(--blue-700);font:700 14px/1 var(--font-body)}

/* work order */
.wo-t{display:flex;align-items:center;gap:12px;margin:16px 22px 0;padding:14px 16px;border-radius:16px;background:#1F1F3D;color:#fff}
.wo-t svg{width:30px;height:30px;color:#8CB6FF;flex:none}
.wo-t b{font:800 32px/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wo-t small{margin-left:auto;font:600 15px/1.2 var(--font-body);color:#C9D6F2}
.wo-s{display:grid;gap:8px;padding:14px 22px 4px}
.wo-s > div{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#F6F8FC;font:600 18px/1.2 var(--font-body)}
.wo-s i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid #C9CEDA;color:#fff}
.wo-s i svg{width:15px;height:15px}
.wo-s .done i{background:var(--ok);border-color:var(--ok)}
.wo-s .now{background:#EAF0FB;box-shadow:inset 0 0 0 2px rgba(49,103,202,.35)}
.wo-s .now i{background:var(--blue);border-color:var(--blue)}
.wo-s .todo span{color:var(--label)}
.wo-s em{margin-left:auto;font:600 15px/1 var(--font-body);font-style:normal;color:var(--muted);white-space:nowrap}
.wo-p{display:grid;gap:8px;padding:14px 22px 8px;font:700 16px/1 var(--font-body);color:var(--label)}
.wo-p i{display:block;height:12px;border-radius:8px;background:#E9EDF4;overflow:hidden}
.wo-p em{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#6FA0F5,#3167CA)}

/* helpdesk ticket */
.tk-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px 0}
.tk-stars{display:inline-flex;gap:2px;color:#F5B400}
.tk-stars svg{width:24px;height:24px}
.tk-sla{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font:700 15px/1 var(--font-body);background:#FDEFD6;color:#8A5A00}
.tk-sla.ok{background:var(--ok-050);color:var(--ok)}.tk-sla.r{background:#FCE3E1;color:#B3271E}
.tk-sla svg{width:18px;height:18px}
.tk-ch{padding:7px 12px;border-radius:999px;background:#EDEEF2;color:#4C4C63;font:700 14px/1 var(--font-body)}
.tk-x{margin:12px 22px 0;padding:14px 16px;border-radius:14px;background:#F6F8FC;border:1px solid #EAEEF5;font:500 18px/1.4 var(--font-body);color:var(--body)}
.tk-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 22px 20px}
.tk-as{font:700 16px/1 var(--font-body)}
.tk-tag{padding:6px 12px;border-radius:999px;background:var(--blue-050);color:var(--blue-700);font:700 14px/1 var(--font-body)}
.tk-as + .tk-tag{margin-left:auto}

/* calendar week */
.cal-h{display:grid;padding:12px 16px 8px;font:700 15px/1 var(--font-body);color:var(--label);text-align:center}
.cal-h span.on{color:var(--blue)}
.cal-g{display:grid;grid-template-columns:58px 1fr;padding:0 16px 16px}
.cal-t span{display:block;padding-right:10px;text-align:right;font:600 13px/1 var(--font-body);color:var(--muted);transform:translateY(-6px)}
.cal-b{position:relative;border-left:1px solid #E6E9F0;background-image:linear-gradient(90deg,#EEF0F4 1px,transparent 1px),linear-gradient(#EEF0F4 1px,transparent 1px)}
.cal-b em{position:absolute;display:grid;align-content:start;gap:3px;padding:7px 9px;border-radius:10px;font-style:normal;color:#fff;overflow:hidden;box-shadow:0 8px 14px -10px rgba(19,47,102,.7)}
.cal-b em b{font:700 15px/1.15 var(--font-body)}
.cal-b em small{font:600 12px/1 var(--font-body);opacity:.85}
.cal-b em.hl{z-index:2;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--blue),0 16px 24px -12px rgba(19,47,102,.7)}

/* employee */
.em-hd{display:flex;align-items:center;gap:18px;padding:22px 22px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#F6F9FF,#fff)}
.em-hd b{display:block;font:800 26px/1.15 var(--font-display);letter-spacing:-.02em}
.em-hd small{display:block;margin-top:3px;font:600 17px/1.25 var(--font-body);color:var(--label)}
.em-dp{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--blue-050);color:var(--blue-700);font:700 14px/1 var(--font-body)}
.em-dp .oi{width:22px;height:22px}
.em-rows{display:grid;padding:6px 22px 14px}
.em-rows > div{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed #E3E7F0}
.em-rows > div:last-child{border-bottom:0}
.em-rows small{width:120px;flex:none;font:600 13.5px/1.2 var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.em-rows b{font:600 18px/1.25 var(--font-body)}

/* email campaign */
.om-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:#FBFCFE}
.om-h .oi{width:40px;height:40px;flex:none}
.om-h small{display:block;font:600 14px/1.2 var(--font-body);color:var(--muted)}
.om-h b{display:block;margin-top:2px;font:700 19px/1.25 var(--font-body)}
.om-b{display:grid;gap:10px;padding:16px 20px}
.om-hero{display:grid;gap:14px;justify-items:start;padding:24px 22px;border-radius:14px;color:#fff}
.om-hero b{font:800 30px/1.08 var(--font-display);letter-spacing:-.025em}
.om-hero b em{font-style:normal;color:#FFE27A}
.om-hero span{padding:10px 18px;border-radius:10px;background:#fff;color:var(--ink);font:700 16px/1 var(--font-display)}
.om-b > i{display:block;height:10px;border-radius:5px;background:#E6EAF1;width:92%}
.om-b > i.s{width:74%}.om-b > i.m{width:84%}
.om-st{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.om-st span{display:grid;gap:4px;padding:14px 12px;text-align:center}
.om-st span+span{border-left:1px solid var(--line)}
.om-st b{font:800 26px/1 var(--font-display);color:var(--blue);letter-spacing:-.02em}
.om-st small{font:600 14px/1.2 var(--font-body);color:var(--label)}

/* eCommerce page */
.sh-nav{display:flex;align-items:center;gap:20px;padding:14px 20px;border-bottom:1px solid #EEF1F6;font:600 15px/1 var(--font-body);color:var(--label)}
.sh-nav b{display:flex;align-items:center;gap:8px;margin-right:auto;font:800 19px/1 var(--font-display);color:var(--ink)}
.sh-nav .dot{width:20px;height:20px;border-radius:6px;background:var(--blue)}
.sh-nav em{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#F2F5FA;color:var(--ink);font-style:normal}
.sh-nav em svg{width:24px;height:24px}
.sh-nav em u{position:absolute;right:-7px;top:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#D93A30;color:#fff;font:800 13px/22px var(--font-body);text-decoration:none;text-align:center}
.sh-m{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px}
.sh-img{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:16px}
.sh-img svg{width:48%;height:auto}
.sh-i{display:flex;flex-direction:column;gap:9px;min-width:0}
.sh-i small{font:700 13px/1 var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.sh-i b{font:800 27px/1.1 var(--font-display);letter-spacing:-.02em}
.sh-r{display:flex;align-items:center;gap:2px;color:#F5B400}.sh-r svg{width:20px;height:20px}.sh-r span{margin-left:6px;font:600 14px/1 var(--font-body);color:var(--label)}
.sh-p{font:800 28px/1 var(--font-display);color:var(--blue);letter-spacing:-.02em}
.sh-s{display:inline-flex;align-items:center;gap:6px;font:700 15px/1.2 var(--font-body);color:var(--ok)}.sh-s svg{width:18px;height:18px;flex:none}
.sh-opt{display:flex;flex-wrap:wrap;gap:8px}
.sh-opt span{padding:8px 12px;border-radius:10px;border:2px solid #DDE2EC;font:700 15px/1 var(--font-body)}
.sh-opt span.on{border-color:var(--blue);color:var(--blue)}
.sh-btn{margin-top:auto;padding:14px;border-radius:12px;background:var(--blue);color:#fff;text-align:center;font:800 18px/1 var(--font-display);box-shadow:0 12px 20px -12px rgba(49,103,202,.9)}

/* bank reconciliation */
.rc-l{display:flex;align-items:center;gap:14px;margin:14px 22px 0;padding:14px 16px;border-radius:16px;border:1px solid #E3E7F0;background:#FAFBFD}
.rc-l i{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.rc-l i svg{width:24px;height:24px}
.rc-l i.bk{background:#E7F0FF;color:var(--blue)}.rc-l i.iv{background:#EFE6EC;color:var(--odoo)}
.rc-l > div{min-width:0}
.rc-l small{display:block;font:600 14px/1.2 var(--font-body);color:var(--muted)}
.rc-l b{display:block;margin-top:2px;font:700 18px/1.25 var(--font-body)}
.rc-l em{margin-left:auto;font:800 20px/1 var(--font-display);font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-k{position:relative;height:42px;margin:0 22px}
.rc-k::before{content:"";position:absolute;left:38px;top:0;bottom:0;border-left:3px dashed #21B799}
.rc-k > span{position:absolute;left:62px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--ok-050);color:var(--ok);font:700 14px/1 var(--font-body);white-space:nowrap}
.rc-k > span svg{width:16px;height:16px}

/* approvals */
.ap-f{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:14px 22px 4px}
.ap-f small{display:block;font:600 13px/1.2 var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ap-f b{display:block;margin-top:3px;font:700 18px/1.25 var(--font-body)}
.ap-a{display:grid;gap:10px;margin:12px 22px 0;padding:14px 16px;border-radius:16px;background:#F6F8FC}
.ap-a > small{font:700 13px/1 var(--font-body);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ap-a > div{display:flex;align-items:center;gap:12px;font:600 17px/1.2 var(--font-body)}
.ap-a em{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font:700 14px/1 var(--font-body);font-style:normal;white-space:nowrap}
.ap-a em svg{width:16px;height:16px}
.ap-a em.ok{background:var(--ok-050);color:var(--ok)}.ap-a em.w{background:#FDEFD6;color:#8A5A00}

/* spreadsheet */
.sh-tb{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#FBFCFE;border-bottom:1px solid var(--line)}
.sh-tb .oi{width:36px;height:36px}
.sh-tb b{font:800 21px/1.2 var(--font-display);letter-spacing:-.01em}
.sh-fx{display:flex;align-items:center;gap:10px;padding:8px 18px;border-bottom:1px solid var(--line);font:500 16px/1.2 ui-monospace,Consolas,monospace;color:#2D2D45}
.sh-fx i{font:italic 700 15px/1 Georgia,serif;color:var(--muted)}
.sh-g{width:100%;border-collapse:collapse;font:500 16px/1.2 var(--font-body)}
.sh-g th{padding:7px;border:1px solid #E3E6EC;background:#F2F4F8;color:#8A8DA0;font:600 13px/1 var(--font-body)}
.sh-g td{padding:9px 10px;border:1px solid #E6E9EF;white-space:nowrap;font-variant-numeric:tabular-nums}
.sh-g td:first-child{width:34px;background:#F2F4F8;color:#8A8DA0;font:600 13px/1 var(--font-body);text-align:center}
.sh-g tr.hd td:not(:first-child){font-weight:800;background:#F7F9FD}
.sh-g tr.tot td:not(:first-child){font-weight:800;border-top:2px solid #1F1F3D}
.sh-g td.hl{outline:3px solid var(--blue);outline-offset:-2px;background:#EAF1FD;font-weight:800}

/* Documents */
.dc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 18px 20px}
.dc-f{display:grid;justify-items:start;gap:8px;padding:14px;border-radius:14px;border:1px solid #E3E7F0;background:#FAFBFD;min-width:0}
.dc-f.hl{border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,103,202,.18)}
.dc-i{display:grid;place-items:center;width:50px;height:60px;border-radius:8px 18px 8px 8px;background:var(--c);color:#fff;font:800 14px/1 var(--font-body);letter-spacing:.04em}
.dc-f b{font:600 15px/1.25 var(--font-body);overflow-wrap:anywhere}
.dc-f em{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--blue-050);color:var(--blue-700);font:700 12.5px/1.15 var(--font-body);font-style:normal}
.dc-f em svg{width:13px;height:13px;flex:none}

/* rating */
.ort{padding:20px 22px}
.rt-s{display:flex;gap:4px;color:#F5B400}.rt-s svg{width:30px;height:30px}
.ort p{margin:12px 0 14px;font:600 21px/1.4 var(--font-body);color:var(--ink)}
.rt-w{display:flex;align-items:center;gap:12px}
.rt-w b{display:block;font:700 17px/1.2 var(--font-body)}
.rt-w small{display:block;margin-top:2px;font:500 14px/1.2 var(--font-body);color:var(--muted)}

/* one lead or task card */
.okc{padding:20px 22px;border-left:6px solid var(--blue)}
.kc-h{display:flex;align-items:center;gap:12px}
.kc-h .oi{width:40px;height:40px;flex:none}
.kc-h b{display:block;font:800 24px/1.15 var(--font-display);letter-spacing:-.02em}
.kc-h small{display:block;margin-top:3px;font:600 16px/1.2 var(--font-body);color:var(--label)}
.kc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.kc-tags span{padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);font:700 14px/1 var(--font-body)}
.kc-f{display:flex;align-items:center;gap:12px;margin-top:16px}
.kc-f b{margin-left:auto;font:800 24px/1 var(--font-display);font-variant-numeric:tabular-nums}
.kc-a{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px dashed #E3E7F0;font:600 15px/1.2 var(--font-body);color:var(--label)}
.kc-a svg{width:18px;height:18px;color:#E8A33D;flex:none}

/* ---------- elements ---------- */
.stamp{display:inline-grid;justify-items:center;padding:10px 24px;border:6px solid currentColor;border-radius:14px;color:#137A4A;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),inset 0 0 0 6px currentColor;font:900 44px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:.92}
.stamp small{margin-top:5px;font:800 14px/1.2 var(--font-body);letter-spacing:.16em}
.stamp.r{color:var(--red)}.stamp.b{color:var(--blue)}.stamp.o{color:var(--odoo)}
.L-sticker > .in,.L-ring > .in,.L-scanner > .in{container-type:inline-size}
.stk{position:relative;display:grid;place-items:center;align-content:center;gap:2cqw;width:100%;aspect-ratio:1;border-radius:50%;background:#FFC83D;color:#1F1F3D;text-align:center;padding:14%;box-shadow:0 22px 34px -18px rgba(19,47,102,.6)}
.stk::after{content:"";position:absolute;inset:6%;border-radius:50%;border:2px dashed rgba(31,31,61,.28);pointer-events:none}
.stk b{display:block;font:900 16cqw/.95 var(--font-display);letter-spacing:-.03em}
.stk b em{font-style:normal;color:var(--blue)}
.stk small{display:block;font:700 8.5cqw/1.1 var(--font-body)}
.stk.blue{background:var(--blue);color:#fff}.stk.blue::after{border-color:rgba(255,255,255,.45)}.stk.blue b em{color:#FFE27A}
.stk.white{background:#fff}.stk.mint{background:#8EE3C8}.stk.pink{background:#FFB8CF}
.rng{display:grid;justify-items:center;gap:5cqw;padding:10cqw 9cqw 9cqw;border-radius:14cqw;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card);text-align:center}
.rng.plain{padding:0;border:0;background:none;box-shadow:none}
.rng-c{position:relative;width:100%}
.rng-c svg{display:block;width:100%;height:auto}
.rng-c b{position:absolute;inset:0;display:grid;place-items:center;font:800 17cqw/1 var(--font-display);letter-spacing:-.03em}
.rng > span{font:700 8.5cqw/1.2 var(--font-display);color:var(--ink)}
.avs{display:inline-flex;align-items:center;padding:10px 20px 10px 12px;border-radius:999px;background:#fff;box-shadow:var(--shadow-float);white-space:nowrap}
.avs .av{width:50px;height:50px;margin-left:-14px;border:3px solid #fff;font-size:16px}
.avs .av:first-child{margin-left:0}
.avs .av.more{background:#1F1F3D}
.avs b{margin-left:14px;font:700 20px/1 var(--font-display)}
.sty{position:relative;padding:30px 26px 32px;border-radius:4px 4px 22px 4px;background:#FFE58A;color:#3D3200;font:700 38px/1.08 var(--font-hand);box-shadow:0 24px 30px -20px rgba(19,47,102,.55)}
.sty::before{content:"";position:absolute;left:50%;top:-14px;width:96px;height:28px;margin-left:-48px;background:rgba(255,255,255,.7);box-shadow:0 1px 2px rgba(0,0,0,.08);transform:rotate(-4deg)}
.sty.blue{background:#D8E6FF;color:#12306E}.sty.mint{background:#CFF3E5;color:#0D4A36}.sty.pink{background:#FFD9E6;color:#6A1233}
.tgl{display:inline-flex;align-items:center;gap:14px;padding:14px 24px 14px 16px;border-radius:999px;background:#fff;box-shadow:var(--shadow-float);font:700 24px/1 var(--font-display);white-space:nowrap}
.tgl i{position:relative;width:64px;height:36px;border-radius:999px;background:#21B799;flex:none}
.tgl i u{position:absolute;right:4px;top:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.tgl.off i{background:#C9CEDA}.tgl.off i u{right:auto;left:4px}
.bigbtn{display:inline-flex;align-items:center;gap:12px;padding:20px 34px;border-radius:16px;background:var(--odoo);color:#fff;font:800 30px/1 var(--font-display);box-shadow:0 22px 34px -18px rgba(113,75,103,.9);white-space:nowrap}
.bigbtn.blue{background:var(--blue);box-shadow:0 22px 34px -18px rgba(49,103,202,.9)}.bigbtn.white{background:#fff;color:var(--ink);box-shadow:var(--shadow-float)}.bigbtn.green{background:var(--ok)}
.srch{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:16px;background:#fff;border:2px solid #D5DCEA;box-shadow:var(--shadow-float);font:500 22px/1.2 var(--font-body);color:var(--ink)}
.srch > svg{width:26px;height:26px;color:var(--label);flex:none}
.srch .q{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.srch .q::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;background:var(--blue);vertical-align:-3px}
.srch .f{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;background:#EFE6EC;color:var(--odoo);font:700 16px/1 var(--font-body);white-space:nowrap}
.srch .f i{font-style:normal;opacity:.7}
.bcd{display:grid;gap:8px;padding:18px 20px 14px;border-radius:18px;background:#fff;box-shadow:var(--shadow-float);text-align:center}
.bcd svg{display:block;width:100%;height:84px;fill:#1F1F3D}
.bcd span{font:600 18px/1 ui-monospace,Consolas,monospace;letter-spacing:.2em;color:var(--ink)}
.bcd b{font:700 17px/1.2 var(--font-body);color:var(--label)}
.pin{display:inline-flex;align-items:flex-start;gap:10px}
.pin svg{width:64px;height:auto;flex:none;filter:drop-shadow(0 12px 12px rgba(19,47,102,.35))}
.pin > span{margin-top:10px;padding:9px 14px;border-radius:12px;background:#fff;box-shadow:var(--shadow-float);font:700 19px/1 var(--font-display);white-space:nowrap}
.tmr{display:inline-flex;align-items:center;gap:14px;padding:14px 24px 14px 16px;border-radius:20px;background:#1F1F3D;color:#fff;box-shadow:var(--shadow-float);white-space:nowrap}
.tmr > svg{width:40px;height:40px;color:#8CB6FF;flex:none}
.tmr b{display:block;font:800 34px/1 var(--font-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tmr small{display:block;margin-top:4px;font:600 15px/1 var(--font-body);color:#C9D6F2}
.tmr.light{background:#fff;color:var(--ink)}.tmr.light > svg{color:var(--blue)}.tmr.light small{color:var(--label)}
.scrb{display:block;width:100%;height:auto;overflow:visible}
.scn{position:relative}
.scn svg{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(19,47,102,.45))}
.scn-s{position:absolute;left:13%;right:13%;top:22%;height:28%;display:grid;align-content:center;gap:2cqw;padding:0 5%;text-align:center}
.scn-s b{font:800 9.5cqw/1.05 var(--font-display);color:var(--ok)}
.scn-s span{font:600 6.5cqw/1.2 var(--font-body);color:var(--ink)}

/* industry props: flat illustrations */
.prop{position:relative;display:grid;justify-items:center;gap:10px}
.prop > svg{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 20px rgba(19,47,102,.26))}
.prop.tile{padding:16%;border-radius:24%;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card)}
.prop.tile > svg{filter:none}
.prop > b{padding:8px 14px;border-radius:999px;background:#fff;box-shadow:var(--shadow-float);font:700 18px/1 var(--font-display);white-space:nowrap}

/* depth: one or two paper sheets behind a card */
.L.stack > .in::before,.L.stack2 > .in::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:24px;background:#fff;border:1px solid #E3E7F0;box-shadow:0 20px 40px -26px rgba(19,47,102,.45)}
.L.stack > .in::before{transform:rotate(-5deg) translate(-16px,12px);opacity:.9}
.L.stack2 > .in::after{transform:rotate(4.5deg) translate(18px,18px);opacity:.7}

/* background patterns: light, and faded out behind the logo and headline */
.d-pat{position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 22%,rgba(0,0,0,.42) 40%,#000 60%);mask-image:linear-gradient(180deg,transparent 22%,rgba(0,0,0,.42) 40%,#000 60%)}
.pat-dots{background-image:radial-gradient(rgba(49,103,202,.32) 2px,transparent 2.5px);background-size:30px 30px;background-position:15px 15px}
.pat-grid{background-image:linear-gradient(rgba(49,103,202,.14) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(49,103,202,.14) 1.5px,transparent 1.5px);background-size:60px 60px;background-position:30px 30px}
.pat-fine{background-image:linear-gradient(rgba(49,103,202,.16) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(49,103,202,.16) 1.5px,transparent 1.5px),linear-gradient(rgba(49,103,202,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(49,103,202,.07) 1px,transparent 1px);background-size:90px 90px,90px 90px,18px 18px,18px 18px}
.pat-diagonal{background-image:repeating-linear-gradient(135deg,rgba(49,103,202,.12) 0 2px,transparent 2px 24px)}
.pat-rings{background-image:repeating-radial-gradient(circle at 50% 70%,transparent 0 62px,rgba(49,103,202,.15) 62px 64.5px)}
.pat-plus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 15v14M15 22h14' stroke='%233167CA' stroke-opacity='.22' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");background-size:44px 44px}
.pat-hex{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v34' fill='none' stroke='%233167CA' stroke-opacity='.15' stroke-width='1.6'/%3E%3C/svg%3E");background-size:56px 100px}
.pat-waves{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34'%3E%3Cpath d='M0 17c20-12 40-12 60 0s40 12 60 0' fill='none' stroke='%233167CA' stroke-opacity='.17' stroke-width='2'/%3E%3C/svg%3E");background-size:120px 34px}
.pat-spots{-webkit-mask-image:none;mask-image:none;background:radial-gradient(520px 420px at 12% 80%,rgba(111,160,245,.32),transparent 70%),radial-gradient(600px 460px at 90% 58%,rgba(33,183,153,.16),transparent 70%),radial-gradient(460px 340px at 66% 100%,rgba(255,200,61,.2),transparent 70%)}
.pat-floor{-webkit-mask-image:none;mask-image:none}
.pat-floor::before{content:"";position:absolute;left:-45%;right:-45%;bottom:-2%;height:56%;background-image:linear-gradient(rgba(49,103,202,.3) 2px,transparent 2px),linear-gradient(90deg,rgba(49,103,202,.3) 2px,transparent 2px);background-size:84px 84px;transform:perspective(860px) rotateX(63deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 62%);mask-image:linear-gradient(transparent,#000 62%)}
.drip.tint-sky{background:linear-gradient(118deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.9) 40%,rgba(255,255,255,0) 55%),radial-gradient(130% 95% at 50% 0%,#FFFFFF 0%,#EAF1FE 58%,#DAE6FB 100%)}
.drip.tint-mint{background:linear-gradient(118deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.9) 40%,rgba(255,255,255,0) 55%),radial-gradient(130% 95% at 50% 0%,#FFFFFF 0%,#E9F7F1 58%,#D5EEE4 100%)}
.drip.tint-lilac{background:linear-gradient(118deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.9) 40%,rgba(255,255,255,0) 55%),radial-gradient(130% 95% at 50% 0%,#FFFFFF 0%,#F1EEFC 58%,#E3DCF6 100%)}
.drip.tint-sand{background:linear-gradient(118deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.9) 40%,rgba(255,255,255,0) 55%),radial-gradient(130% 95% at 50% 0%,#FFFFFF 0%,#FBF5EC 58%,#F1E6D4 100%)}
/* growth pyramid */
.pyr{position:relative;width:100%;aspect-ratio:1.3}
.pyr svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 22px 26px rgba(19,47,102,.32))}
.pyr-l{position:absolute;left:0;right:0;display:grid;place-content:center;justify-items:center;text-align:center;color:#fff}
.pyr-l b{font:800 25px/1.05 var(--font-display);letter-spacing:-.02em;white-space:nowrap}
.pyr-l small{margin-top:4px;font:700 12.5px/1.15 var(--font-body);letter-spacing:.07em;text-transform:uppercase;opacity:.88}
.pyr-l.dk{color:#132F66}
.pyr-l.hot b{padding:4px 14px;border-radius:999px;background:#FFC83D;color:#1F1F3D;box-shadow:0 8px 16px -8px rgba(0,0,0,.4)}
.pyr-n{margin:14px 0 0;text-align:center;font:600 18px/1.4 var(--font-body);color:var(--label)}
/* one operating system */
.grp{position:relative;display:grid;gap:18px}
.grp-c{display:grid;align-content:start;gap:12px;padding:18px;border-radius:22px;background:#fff;border:1px solid #E3E7F0;box-shadow:var(--shadow-card)}
.grp-h{display:flex;align-items:center;gap:10px}
.grp-h span{width:12px;height:12px;border-radius:4px;flex:none}
.grp-h b{font:800 17px/1.15 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.grp-a{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grp-a.one{grid-template-columns:1fr}
.grp-a span{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#F6F8FC;border:1px solid #EAEEF5;min-width:0}
.grp-a .oi{width:30px;height:30px;flex:none}
.grp-a em{font:700 15.5px/1.15 var(--font-body);font-style:normal;color:var(--ink);min-width:0}
.grp-c small{font:600 14px/1.35 var(--font-body);color:var(--label)}
.grp-base{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;border-radius:18px;background:linear-gradient(90deg,#1E4691,#3167CA);color:#fff;font:800 22px/1 var(--font-display);letter-spacing:-.01em;box-shadow:var(--shadow-card)}
.grp-base img{height:26px;width:auto;filter:brightness(0) invert(1)}

/* ================= v6: looks, accent colours and headline decorations ================= */
/* accent colour: pills, handwriting, chip icons, sparkles and big numbers follow it; the frame stays brand blue */
.drip{--acc-1:#3F86F7;--acc-2:#1F5FD6;--acc:#3167CA;--acc-soft:#EAF0FB;--acc-ink:#fff}
.drip.acc-navy{--acc-1:#3A4B7A;--acc-2:#1F1F3D;--acc:#1F1F3D;--acc-soft:#E6E9F2}
.drip.acc-teal{--acc-1:#34D0AE;--acc-2:#12946F;--acc:#137A4A;--acc-soft:#E3F6EF}
.drip.acc-coral{--acc-1:#FF8A72;--acc-2:#D93A30;--acc:#D93A30;--acc-soft:#FDE7E3}
.drip.acc-purple{--acc-1:#A57BE0;--acc-2:#714B67;--acc:#714B67;--acc-soft:#F0E8F3}
.drip.acc-yellow{--acc-1:#FFD65C;--acc-2:#F2B000;--acc:#B67D00;--acc-soft:#FFF3CC;--acc-ink:#1F1F3D}
.pill{background:linear-gradient(180deg,var(--acc-1),var(--acc-2));color:var(--acc-ink)}
.note{color:var(--acc)}
.chip .ico{background:var(--acc-soft);color:var(--acc)}
.L-sparkles{color:var(--acc-1)}
.stt b{color:var(--acc)}
.lk-lab.blue{background:var(--acc)}
.tk-stars,.sh-r,.rt-s{color:#F5B400}

/* panels behind the visual */
.d-panel{position:absolute;z-index:1;pointer-events:none}
.d-panel.band{left:0;right:0;bottom:0;border-radius:64px 64px 0 0;background:linear-gradient(180deg,#4A90F8 0%,#2F72EA 45%,#1E4691 100%)}
.d-panel.navy{left:0;right:0;bottom:0;border-radius:64px 64px 0 0;background:linear-gradient(180deg,#2E3F6E 0%,#1F2A4D 50%,#141A33 100%)}
.d-panel.corner{top:auto;right:-170px;bottom:-170px;width:720px;height:720px;border-radius:150px;background:linear-gradient(135deg,#63A8FF,#2F72EA 55%,#1E4691)}
.d-panel.spot{left:50%;width:960px;height:960px;margin-left:-480px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,61,.42),rgba(255,200,61,.14) 45%,transparent 72%)}
.d-wm{position:absolute;z-index:0;right:-130px;bottom:-70px;width:760px;opacity:.15;pointer-events:none}
.d-wm svg{display:block;width:100%;height:auto}

/* on a colour panel: white pills, sticker-style handwriting, white sparkles */
.look-band .pill,.look-navy .pill,.look-corner .pill{background:#fff;color:var(--blue-700);box-shadow:0 18px 30px -14px rgba(0,0,0,.4),inset 0 -2px 0 rgba(31,31,61,.06)}
.look-navy .pill{background:linear-gradient(180deg,#FFD65C,#F2B000);color:#1F1F3D}
.look-band .note,.look-navy .note,.look-corner .note{padding:6px 18px;border-radius:16px;background:#fff;color:var(--blue-700);box-shadow:0 14px 24px -14px rgba(0,0,0,.4)}
.look-band .L-sparkles,.look-navy .L-sparkles{color:#fff}
.look-band .stk.blue,.look-navy .stk.blue,.look-corner .stk.blue{background:#FFC83D;color:#1F1F3D}
.look-band .stk.blue b em,.look-navy .stk.blue b em,.look-corner .stk.blue b em{color:var(--blue-700)}
.look-band .stk,.look-navy .stk{box-shadow:0 22px 34px -16px rgba(0,0,0,.6)}
.look-band .bubble,.look-navy .bubble{box-shadow:0 22px 36px -18px rgba(0,0,0,.5)}
.look-band .fx-sphere .in,.look-navy .fx-sphere .in{background:radial-gradient(circle at 34% 30%,#fff 0%,#FFE9A8 30%,#FFC83D 70%,#E8A33D 100%)}
.look-band :is(.oc,.clist,.rec,.gcard,.kp,.tl,.st,.cht,.rcp,.ntf,.stt,.rte,.apc,.qrc,.fnode,.ph,.bat,.aflow,.dash,.grp-c),.look-navy :is(.oc,.clist,.rec,.gcard,.kp,.tl,.st,.cht,.rcp,.ntf,.stt,.rte,.apc,.qrc,.fnode,.ph,.bat,.aflow,.dash,.grp-c){box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
.look-navy .L-glow .in{background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0))}

/* outline: printed sticker look, hard shadows */
.look-outline :is(.oc,.clist,.rec,.gcard,.kp,.tl,.st,.cht,.rcp,.ntf,.stt,.rte,.apc,.qrc,.fnode,.ph,.bat,.aflow,.dash,.web,.code,.pal,.wf,.gauge,.serp,.grp-c,.grp-base,.chip,.bubble,.avs,.tgl,.srch,.bcd,.sty,.tmr,.rng,.frame-browser,.shot){border:3px solid #1F1F3D;box-shadow:9px 9px 0 #1F1F3D}
.look-outline .clist.old{border:3px solid #1F1F3D;box-shadow:9px 9px 0 #1F1F3D}
.look-outline .pill{background:#fff;color:#1F1F3D;border:3px solid #1F1F3D;box-shadow:7px 7px 0 #1F1F3D}
.look-outline .L-sparkles{color:#1F1F3D}
.look-outline .chip .ico{background:#1F1F3D;color:#fff}
.look-outline .note{color:#1F1F3D}
.look-outline .fx-sphere .in{background:#FFC83D;box-shadow:6px 6px 0 #1F1F3D;border:3px solid #1F1F3D}
.look-outline .L.stack > .in::before,.look-outline .L.stack2 > .in::after{border:3px solid #1F1F3D;box-shadow:none}
.look-outline .d-pat{opacity:1.25}

/* paper: warm cream cards, coral handwriting */
.look-paper :is(.oc,.clist,.rec,.gcard,.kp,.tl,.st,.cht,.rcp,.ntf,.stt,.rte,.apc,.qrc,.fnode,.ph,.bat,.aflow,.dash,.grp-c,.chip,.bubble,.avs,.tgl,.srch,.bcd){background:#FFFDF6;border-color:#E9DFCA}
.look-paper :is(.oc-top,.rec-top,.af-top,.cl-top,.apc-top,.em-hd,.om-h,.sh-tb){background:#FBF6EA;border-color:#EFE6D3}
.look-paper .L-sparkles{color:#E5534B}
.look-paper .fx-sphere .in{background:radial-gradient(circle at 34% 30%,#FFE9E4 0%,#FFB4A5 30%,#E5534B 70%,#B83B34 100%)}
.look-paper .d-pat{filter:sepia(.6) hue-rotate(-20deg)}

/* headline decorations on the last blue phrase */
.d-head em{position:relative}
.hd-circle .d-head em:last-of-type{display:inline-block}
.hd-circle .d-head em:last-of-type::before{content:"";position:absolute;left:-.18em;right:-.18em;top:-.14em;bottom:-.12em;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M28 52C22 28 68 12 108 13C158 14 188 30 186 54C184 78 134 92 86 89C40 86 10 70 22 44' fill='none' stroke='%23E5534B' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hd-underline .d-head em:last-of-type{display:inline-block}
.hd-underline .d-head em:last-of-type::after{content:"";position:absolute;left:-3%;right:-3%;bottom:-.1em;height:.26em;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M6 26 C 80 12, 190 8, 392 16 L 390 30 C 250 22, 120 26, 10 36 Z' fill='%23FFC83D'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hd-marker .d-head em:last-of-type{display:inline-block}
.hd-marker .d-head em:last-of-type::before{content:"";position:absolute;left:-.12em;right:-.12em;top:.14em;bottom:.02em;z-index:-1;background:var(--warn);border-radius:.08em;transform:rotate(-1.6deg)}
.hd-strokes .d-head em:last-of-type{display:inline-block}
.hd-strokes .d-head em:last-of-type::after{content:"";position:absolute;right:-.78em;top:-.55em;width:.92em;height:.92em;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23FFC83D' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M8 50 22 30'/%3E%3Cpath d='M28 46 38 14'/%3E%3Cpath d='M44 42 56 30'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.hd-box .d-head em:last-of-type{color:#fff;background:var(--blue);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}