/* YakaDo marketing site. Brand: indigo #2b1f5c, orange #f07c3a, tint #ece8f8. */
:root{
  --bg:#ffffff; --bg-soft:#f7f6fb; --surface:#ffffff; --ink:#1d1640; --muted:#5d5878; --line:#e2dfee;
  --brand:#2b1f5c; --brand-2:#3b2d7a; --accent:#f07c3a; --accent-ink:#c2551a; --tint:#ece8f8;
  --plan:#4a3aa8; --make:#d9661f; --money:#2e7b3a;
  --inv-fill:#f0edfb; --inv-line:#8f84cf;
  --shadow:0 1px 2px rgba(29,22,64,.06), 0 12px 32px -12px rgba(29,22,64,.22);
  --shadow-lg:0 2px 4px rgba(29,22,64,.08), 0 30px 70px -20px rgba(29,22,64,.35);
  --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand-2); }
h1,h2,h3,h4{ letter-spacing:-0.022em; line-height:1.12; margin:0; color:var(--ink); }
.wrap{ max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width:720px){ .wrap{ padding-left:28px; padding-right:28px; } }
.skip{ position:absolute; left:-9999px; top:8px; background:var(--brand); color:#fff; padding:8px 14px; border-radius:8px; z-index:100; }
.skip:focus{ left:12px; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:12px; border:1.5px solid transparent;
  font:700 16px/1 var(--font); text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 8px 20px -8px rgba(43,31,92,.6); }
.btn-primary:hover{ background:var(--brand-2); }
.btn-accent{ background:var(--accent); color:#fff; box-shadow:0 8px 20px -8px rgba(240,124,58,.7); }
.btn-accent:hover{ background:#e36d2a; }
.btn-ghost{ background:#fff; color:var(--brand); border-color:#cfc9e6; }
.btn-ghost:hover{ border-color:var(--brand); }
.btn-sm{ min-height:40px; padding:0 16px; font-size:14.5px; border-radius:10px; }

/* Header */
.top{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(1.6) blur(12px); backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s; }
.top.scrolled{ border-bottom-color:var(--line); }
.top-in{ display:flex; align-items:center; gap:24px; height:68px; }
.logo{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.logo .mascot{ width:34px; height:38px; flex:none; }
.wm{ font-weight:800; font-size:25px; letter-spacing:-0.025em; color:var(--brand); line-height:1; }
.wm span{ color:var(--accent); }
.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{ color:var(--ink); text-decoration:none; font-weight:500; font-size:15.5px; }
.nav a:hover{ color:var(--brand-2); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; text-decoration-color:var(--accent); }
@media (max-width:820px){ .nav{ display:none; } .top-cta{ margin-left:auto; } }
@media (max-width:380px){ .top-cta{ padding:0 12px; font-size:13.5px; } .wm{ font-size:22px; } }

/* Hero */
.hero{ position:relative; overflow:hidden; padding:72px 0 0; background:
  radial-gradient(900px 420px at 85% -10%, rgba(240,124,58,.12), transparent 60%),
  radial-gradient(900px 520px at 10% 0%, rgba(74,58,168,.12), transparent 60%),
  linear-gradient(180deg, #faf9fd 0%, #f3f1fa 100%); }
.hero-in{ text-align:center; max-width:900px; }
.hero-logo{ display:block; width:min(404px, 86vw); height:auto; margin:0 auto 12px; }
.eyebrow{ display:inline-block; margin:0 0 22px; padding:7px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(29,22,64,.05);
  font-weight:700; font-size:15px; color:var(--brand); }
.eyebrow span{ color:var(--accent); }
.hero h1{ font-weight:800; font-size:clamp(38px, 6.4vw, 70px); letter-spacing:-0.035em; line-height:1.03; color:var(--brand); text-wrap:balance; }
.sub{ font-size:clamp(18px, 2.2vw, 22px); color:var(--muted); margin:22px auto 0; max-width:42ch; text-wrap:balance; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px; }
.fine{ margin:14px 0 0; font-size:14px; color:var(--muted); }
.hero-shot{ margin:56px auto -1px; max-width:1100px; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:0; }
@media (max-width:600px){ .hero{ padding-top:44px; } .cta-row .btn{ flex:1 1 100%; } .hero-shot{ margin-top:40px; } }

/* Browser frame */
.frame{ display:block; background:#fff; border:1px solid #d9d5e8; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-lg); padding:0; }
.frame-bar{ display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; background:#f4f2fa; border-bottom:1px solid #e2dfee; }
.frame-bar i{ width:11px; height:11px; border-radius:50%; background:#d6d1e8; }
.frame-bar i:nth-child(1){ background:#f3a07a; } .frame-bar i:nth-child(2){ background:#f5cf7c; } .frame-bar i:nth-child(3){ background:#9fd3a4; }
.frame-bar span{ margin:0 auto; padding:3px 14px; border-radius:7px; background:#fff; border:1px solid #e2dfee; font-size:12.5px; color:var(--muted); transform:translateX(-24px); }
@media (max-width:600px){ .frame-bar span{ display:none; } }

/* Capability strip */
.strip{ background:var(--brand); color:#fff; }
.strip-in{ display:grid; grid-template-columns:repeat(5, 1fr); gap:0; padding-top:26px; padding-bottom:26px; }
.strip-in div{ padding:4px 18px; border-left:1px solid rgba(255,255,255,.16); }
.strip-in div:first-child{ border-left:0; padding-left:0; }
.strip b{ display:block; font-size:17px; font-weight:700; }
.strip span{ display:block; font-size:14px; color:#cfc8ef; }
@media (max-width:900px){ .strip-in{ grid-template-columns:repeat(2, 1fr); gap:16px 0; } .strip-in div{ border-left:0; padding-left:0; } .strip-in div:last-child{ grid-column:1 / -1; } }

/* Section heads */
section{ padding:96px 0; }
.hero{ padding-bottom:0; } .strip{ padding:0; }
@media (max-width:600px){ section{ padding:64px 0; } }
.sec-head{ max-width:720px; margin:0 auto 44px; text-align:center; }
.kicker{ margin:0 0 10px; font-size:13.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.sec-head h2, .contact h2, .demo-band h2{ font-weight:800; font-size:clamp(30px, 4vw, 46px); color:var(--brand); text-wrap:balance; }
.sec-head p:last-child{ margin:16px 0 0; color:var(--muted); font-size:18px; text-wrap:pretty; }

/* Operating model */
.how{ background:var(--bg-soft); border-bottom:1px solid var(--line); }
.model{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 14px; box-shadow:var(--shadow); overflow-x:auto; -webkit-overflow-scrolling:touch; }
svg.flow{ display:block; width:100%; min-width:900px; height:auto; color:var(--ink); }
.on-touch{ display:none; }
@media (hover:none), (max-width:900px){ .on-desk{ display:none; } .on-touch{ display:inline; } }
.node{ fill:#fff; stroke-width:2; transition:fill .15s, stroke-width .15s; }
.n-plan{ stroke:var(--plan); } .n-make{ stroke:var(--make); } .n-money{ stroke:var(--money); }
.num{ stroke:none; } .num-plan{ fill:var(--plan); } .num-make{ fill:var(--make); } .num-money{ fill:var(--money); }
.num-t{ fill:#fff; font:700 13px var(--font); pointer-events:none; }
.t-title{ fill:var(--ink); font:800 17px var(--font); letter-spacing:-0.01em; }
.t-screen{ fill:var(--muted); font:500 12.5px var(--font); }
.t-out{ fill:var(--ink); font:400 12.5px var(--font); }
.t-edge{ fill:var(--muted); font:500 11.5px var(--font); }
.t-group{ font:700 11.5px var(--font); letter-spacing:.12em; }
.g-plan{ fill:var(--plan); } .g-make{ fill:var(--make); } .g-money{ fill:var(--money); }
.edge{ stroke:currentColor; stroke-width:1.6; fill:none; opacity:.55; }
.band{ fill:var(--inv-fill); stroke:var(--inv-line); stroke-width:2; transition:fill .15s; }
.t-inv{ fill:var(--ink); font:800 21px var(--font); letter-spacing:-0.01em; }
.t-invsub{ fill:var(--muted); font:400 13px var(--font); }
.t-formula{ fill:var(--ink); font:500 13px var(--font); }
.chip{ fill:#fff; stroke:var(--inv-line); stroke-width:1.2; }
.t-chip{ fill:var(--ink); font:500 12.5px var(--font); }
.hit{ cursor:pointer; outline:none; }
.hit text{ pointer-events:none; }
.hit:hover .node, .hit:focus-visible .node, .hit.on .node{ stroke-width:3.2; }
.hit:hover .n-plan, .hit:focus-visible .n-plan, .hit.on .n-plan{ fill:#f3f1fc; }
.hit:hover .n-make, .hit:focus-visible .n-make, .hit.on .n-make{ fill:#fdf3ec; }
.hit:hover .n-money, .hit:focus-visible .n-money, .hit.on .n-money{ fill:#eef7ef; }
.hit:hover .band, .hit:focus-visible .band, .hit.on .band{ fill:#e7e2fa; }
.hit:focus-visible .node, .hit:focus-visible .band{ stroke:var(--accent); }

/* Phones: the diagram as a timeline down the page (built by site.js from the diagram's own text; 2026-11-02, option B) */
.fl{ display:none; position:relative; }
.fl::before{ content:""; position:absolute; left:12px; top:44px; bottom:34px; width:2px; background:#c9c2e4; }
@media (max-width:900px){ .how.has-fl .model{ display:none; } .how.has-fl .fl{ display:block; } }
.fl-grp{ margin:18px 0 4px 40px; font-size:12px; font-weight:700; letter-spacing:.12em; }
.fl-grp:first-child{ margin-top:0; }
.fl-grp.plan{ color:var(--plan); } .fl-grp.make{ color:var(--make); } .fl-grp.money{ color:var(--money); }
.fl-row{ display:flex; gap:14px; width:100%; padding:9px 0; background:none; border:0; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.fl-num{ position:relative; z-index:1; flex:none; width:26px; height:26px; margin-top:1px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:700; }
.fl-row.plan .fl-num{ background:var(--plan); } .fl-row.make .fl-num{ background:var(--make); } .fl-row.money .fl-num{ background:var(--money); }
.fl-body{ flex:1; min-width:0; }
.fl-t{ display:block; font-size:17px; font-weight:800; letter-spacing:-0.01em; line-height:1.3; }
.fl-s{ display:block; font-size:13px; font-weight:500; color:var(--muted); line-height:1.4; }
.fl-o{ display:block; margin-top:2px; font-size:15px; line-height:1.45; }
.fl-row:focus-visible .fl-t, .fl-row:active .fl-t{ text-decoration:underline; text-underline-offset:3px; }
.fl-inv{ position:relative; z-index:1; display:block; width:100%; margin:8px 0; padding:14px 16px; background:var(--inv-fill); border:2px solid var(--inv-line); border-radius:14px; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.fl-inv .fl-t{ font-size:20px; }
.fl-inv .fl-o{ margin:2px 0 10px; font-size:14px; font-weight:500; }
.fl-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.fl-chips span{ background:#fff; border:1.2px solid var(--inv-line); border-radius:13px; padding:2px 10px; font-size:13px; font-weight:500; }
.fl-row:focus-visible, .fl-inv:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }

.rails{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:22px; }
@media (max-width:1000px){ .rails{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .rails{ grid-template-columns:1fr; } }
.rail{ display:flex; flex-direction:column; justify-content:flex-start; text-align:left; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
.rail:hover, .rail.on{ border-color:var(--inv-line); box-shadow:var(--shadow); transform:translateY(-2px); }
.rail-k{ display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:17px; color:var(--brand); margin-bottom:4px; }
.rail-k::after{ content:"→"; color:var(--accent); font-weight:700; }
.rail-t{ display:block; font-size:14.5px; color:var(--muted); line-height:1.5; }

/* Features */
.feat{ display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:center; padding:36px 0; }
.feat + .feat{ border-top:1px solid var(--line); }
.feat.flip .feat-text{ order:2; }
.feat h3{ font-weight:800; font-size:clamp(25px, 3vw, 32px); color:var(--brand); }
.feat-text p{ margin:14px 0 0; color:var(--muted); font-size:17.5px; text-wrap:pretty; }
.ticks{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.ticks li{ position:relative; padding-left:32px; font-weight:500; }
.ticks li::before{ content:""; position:absolute; left:0; top:3px; width:21px; height:21px; border-radius:50%; background:var(--tint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23f07c3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }
.feat-shot{ cursor:zoom-in; max-height:520px; transition:transform .2s ease, box-shadow .2s; }
.feat-shot img{ width:100%; height:100%; max-height:520px; object-fit:cover; object-position:top left; }
.feat-shot:hover{ transform:translateY(-3px); }
/* wide full-screen captures: show the top-left of the screen larger so it reads; click opens the whole screen */
.feat-shot.zoom{ height:440px; max-height:none; position:relative; }
.feat-shot.zoom img{ position:absolute; top:0; left:0; width:170%; max-width:none; height:auto; max-height:none; object-fit:initial; }
@media (max-width:900px){ .feat-shot.zoom{ height:340px; } .feat-shot.zoom img{ width:240%; } }
@media (max-width:900px){ .feat{ grid-template-columns:1fr; gap:28px; } .feat.flip .feat-text{ order:0; } .feat-shot, .feat-shot img{ max-height:420px; } }

.cards{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:44px; }
@media (max-width:1000px){ .cards{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }
.card{ background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.card h4{ font-weight:800; font-size:17px; color:var(--brand); }
.card p{ margin:6px 0 0; font-size:15px; color:var(--muted); line-height:1.5; }

/* Demo band */
.demo-band{ padding:0; }
.demo-in{ display:flex; align-items:center; justify-content:space-between; gap:32px; padding-top:56px; padding-bottom:56px; border-radius:24px; color:#fff;
  background:radial-gradient(600px 300px at 100% 0%, rgba(240,124,58,.35), transparent 60%), linear-gradient(135deg, #2b1f5c, #3e2f86); }
@media (min-width:720px){ .demo-in{ padding-left:56px; padding-right:56px; } }
.demo-band h2{ color:#fff; }
.demo-band p{ margin:12px 0 0; color:#d9d3f3; max-width:56ch; font-size:17.5px; }
@media (max-width:800px){ .demo-in{ flex-direction:column; align-items:flex-start; border-radius:0; } }

/* Contact */
.contact-in{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:start; }
.contact-text p:last-child{ margin:14px 0 0; color:var(--muted); font-size:18px; }
@media (max-width:860px){ .contact-in{ grid-template-columns:1fr; gap:28px; } }
.form{ display:grid; gap:16px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:var(--shadow); }
@media (max-width:560px){ .form{ padding:20px; } }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
.form label{ display:block; font-weight:600; font-size:14.5px; color:var(--ink); }
.form label input, .form label textarea{ display:block; margin-top:6px; }
.form em{ font-style:normal; font-weight:400; color:var(--muted); margin-left:4px; }
.form input, .form textarea{ width:100%; font:400 16px var(--font); color:var(--ink); background:#fff; border:1.5px solid #d6d2e6; border-radius:10px; padding:12px 14px; min-height:48px; }
.form textarea{ resize:vertical; min-height:110px; }
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--plan); box-shadow:0 0 0 4px rgba(74,58,168,.14); }
.form .btn{ justify-self:start; min-width:160px; }
.form .btn:disabled{ opacity:.7; cursor:default; transform:none; }
.form-msg{ margin:-6px 0 0; font-size:14.5px; font-weight:600; color:#b42318; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Footer */
.foot{ border-top:1px solid var(--line); padding:44px 0 28px; background:var(--bg-soft); margin-top:0; }
.foot-in{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.foot-nav{ display:flex; gap:22px; flex-wrap:wrap; }
.foot-nav a{ color:var(--ink); text-decoration:none; font-weight:500; font-size:15px; }
.foot-nav a:hover{ text-decoration:underline; }
.foot-legal{ margin-top:28px; font-size:13.5px; color:var(--muted); }

/* Hover peek */
.peek{ position:fixed; z-index:60; width:min(520px, 46vw); background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; pointer-events:none;
  opacity:0; transform:translateY(6px); transition:opacity .14s ease, transform .14s ease; }
.peek.show{ opacity:1; transform:none; }
.peek-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 16px 0; }
.peek-t{ font-weight:800; color:var(--brand); font-size:16px; }
.peek-hint{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
.peek-c{ margin:4px 16px 10px; font-size:13.5px; color:var(--muted); line-height:1.45; }
.peek-shot{ border-top:1px solid var(--line); overflow:hidden; }
.peek-img{ width:100%; max-height:300px; object-fit:cover; object-position:top left; }
/* tall windows (order, buy, BOL, invoice) shown zoomed out: most of the window, centered on a tinted mat */
.peek.tall .peek-shot{ height:min(430px, 54vh); background:#f1eff7; padding:14px 0 0; }
.peek.tall .peek-img{ width:68%; max-height:none; margin:0 auto; object-fit:initial; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 18px -8px rgba(29,22,64,.3); }

/* Pinned view */
.pin{ width:min(1180px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; color:var(--ink); }
.pin[open]{ display:flex; flex-direction:column; }
.pin::backdrop{ background:rgba(20,14,46,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.pin-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.pin-head b{ font-weight:800; font-size:20px; color:var(--brand); }
.pin-c{ margin:4px 0 0; color:var(--muted); font-size:15px; max-width:80ch; }
.pin-x{ flex:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:#fff; font:400 26px/1 var(--font); color:var(--ink); cursor:pointer; }
.pin-x:hover{ background:var(--bg-soft); border-color:var(--inv-line); }
.pin-body{ overflow:auto; background:#f1eff7; padding:16px; display:grid; gap:16px; justify-items:center; }
.pin-body img{ max-width:100%; width:auto; height:auto; border-radius:10px; border:1px solid var(--line); box-shadow:var(--shadow); background:#fff;
  max-height:calc(100dvh - 190px); }   /* whole window fits on screen, like the hover; no blow-up past life size */
@media (max-width:700px){ .pin-head b{ font-size:18px; } }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }