/* omz.ae — the public landing page (owner 2026-10-07, design handoff
   "OMZ Landing (Simple) with Pencil-Sketch Motion"). Two sections: the hero
   (statement + pencil sketch) and the plum partner band (enquiry form). */
:root{
  --bg:#FBF8F5;--ink:#1E1622;--body:#4F4555;--graphite:#3E3542;
  --plum:#882679;--plum-hover:#6E1E62;--tint:#F5ECF2;--on-plum:#F2E2EE;--divider:#A3519A;
  --input:#E2D7DF;--tile:#F8F7F7;--tile-bd:#ECE8EB;--error:#B42318;
}
*{box-sizing:border-box}
/* "hidden" always wins over a class's display (the sent form stayed on screen, 2026-10-07) */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--plum);text-decoration:none}
a:hover{color:#5C1852}
.page{min-height:100vh;display:flex;flex-direction:column}

/* ── Section 1: hero ── */
.hero{position:relative;overflow:hidden;flex:1;max-width:1240px;width:100%;margin:0 auto;padding:clamp(24px,4vw,40px) clamp(20px,5vw,56px) clamp(48px,6vw,80px);display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.hero header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{height:34px;width:auto;display:block}
.hero-row{flex:1;display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,64px)}
.hero-text{flex:1 1 440px;display:flex;flex-direction:column;gap:24px;max-width:640px}
h1{margin:0;font-size:clamp(40px,5.4vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.lede{margin:0;max-width:460px;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--body);text-wrap:pretty}
.sketch{flex:0 1 480px;min-width:0;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.sketch-art{width:100%;height:auto;display:block;overflow:visible}
.note{font-family:'Caveat',cursive;font-size:clamp(26px,2.6vw,34px);font-weight:500;line-height:1;color:var(--graphite);transform:rotate(-2deg);clip-path:inset(0 100% 0 0);animation:omz-write 1400ms cubic-bezier(.45,0,.2,1) 2600ms forwards}

/* the pencil draws itself once on load: each stroke (pathLength 1) from
   dashoffset 1 to 0, 70 ms apart (delays on the strokes), then the plum hatch
   and the handwritten note */
.sketch-art .s{stroke-dasharray:1;stroke-dashoffset:1;animation:omz-draw 900ms cubic-bezier(.45,0,.2,1) forwards}
.sketch-art .hatch{opacity:0;animation:omz-fade 900ms ease 2600ms forwards}
@keyframes omz-draw{to{stroke-dashoffset:0}}
@keyframes omz-fade{to{opacity:1}}
@keyframes omz-write{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .sketch-art .s{animation:none;stroke-dashoffset:0;stroke-dasharray:none}
  .sketch-art .hatch{animation:none;opacity:1}
  .note{animation:none;clip-path:none}
}
/* phones: the drawing goes, the note stays, left-aligned under the text */
@media (max-width:759px){
  .hero-row{flex-wrap:wrap;align-content:center}
  .sketch{align-items:flex-start}
  .sketch-art{display:none}
}

/* ── Section 2: partner band ── */
.partner{background:var(--plum);color:#fff}
.partner-inner{max-width:1240px;margin:0 auto;padding:clamp(56px,7vw,96px) clamp(20px,5vw,56px) 32px;display:flex;flex-direction:column;gap:clamp(48px,6vw,72px)}
.partner-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));align-items:center;gap:32px clamp(32px,5vw,72px)}
.partner-copy{display:flex;flex-direction:column;gap:20px}
h2{margin:0;font-size:clamp(32px,3.8vw,52px);line-height:1.05;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.partner-copy p{margin:0;max-width:480px;font-size:17px;line-height:1.55;color:var(--on-plum)}

.card{width:100%;max-width:500px;justify-self:end;background:#fff;color:var(--ink);border-radius:16px;padding:24px;box-shadow:0 30px 60px -36px rgba(30,4,26,.6)}
.pf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field .label{font-size:13px;font-weight:600;color:var(--body)}
.field input{height:44px;width:100%;border:1px solid var(--input);border-radius:10px;padding:0 12px;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.field input:focus{border-color:var(--plum);box-shadow:0 0 0 3px var(--on-plum)}
.field input[aria-invalid="true"]{border-color:var(--error)}
.err{font-size:12px;font-weight:600;color:var(--error)}
.err:empty{display:none}
.full{grid-column:1 / -1}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:8px}
.tile{height:46px;padding:0 8px;border-radius:12px;border:1px solid var(--tile-bd);background:var(--tile);color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tile[aria-pressed="true"]{background:var(--tint);border-color:var(--plum);color:var(--plum)}
.tile:focus-visible,.submit:focus-visible{outline:2px solid var(--plum);outline-offset:2px}
.submit{grid-column:1 / -1;height:48px;margin-top:4px;border:none;border-radius:10px;background:var(--plum);color:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s}
.submit:hover{background:var(--plum-hover)}
.submit:disabled{opacity:.75;cursor:progress}
.form-fail{grid-column:1 / -1;margin:0;padding:10px 12px;border-radius:10px;background:#FEF3F2;color:var(--error);font-size:13px;font-weight:600;line-height:1.45}
.form-fail[hidden]{display:none}
/* a field no person sees: a robot filling it is thanked and ignored */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.thanks{display:flex;flex-direction:column;gap:8px;padding:8px 0}
.thanks[hidden]{display:none}
.thanks b{font-size:20px;font-weight:700;letter-spacing:-.01em}
.thanks span{font-size:15px;line-height:1.55;color:var(--body)}
@media (max-width:400px){.pf{grid-template-columns:1fr}}

.bottom{display:flex;flex-direction:column;gap:28px}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 40px}
.logos img{width:auto;display:block;filter:brightness(0) invert(1)}
.logos .shopify{height:28px}
.logos .woo{height:22px}
.logos .wp{height:24px}
.logos .wix{height:20px}
.logos .salla{height:34px}
.logos .odoo{height:22px}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;border-top:1px solid var(--divider);font-size:13px;color:var(--on-plum)}
footer span{white-space:nowrap}

/* Shopify's password page only: the store password box (omz.ae/password#enter) */
.enter{display:none;align-items:center;gap:8px;flex-wrap:wrap}
.enter[data-open]{display:flex}
.enter label{font-size:13px;color:var(--on-plum)}
.enter input{height:36px;border:1px solid var(--divider);border-radius:8px;padding:0 10px;font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.enter button{height:36px;border:1px solid #fff;border-radius:8px;padding:0 14px;background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.enter .err{color:#FFD9D6}