/* Light only (Roshan, 2026-11-05: "I prefer white"): no dark palette, whatever the visitor's device setting.
   Brand: blue leads with hints of teal (Roshan, 2026-11-05 pm; replaces "teal leads" of the morning). Blue #185FA5 / #0C447C for
   the hero, headings, links and buttons; teal #0F6E56 / #5DCAA5 only as accents (eyebrows, card tops, menu underline, the
   kite in the logo); navy #0C2A4A for body text; coral #D85A30 for the focus ring. See brand/README.md.
   System fonts on purpose: no font download, faster first paint. */
:root{--bg:#f5f8fc;--surface:#fff;--ink:#0c2a4a;--muted:#4c6278;--line:#d6e2ee;--blue:#185fa5;--blue-deep:#0c447c;--btn-ink:#fff;--teal:#0f6e56;--teal-soft:#e1f5ee;--hero:#185fa5;--hero-eyebrow:#9fe1cb;--hero-lead:#e6f1fb;--coral:#d85a30;--navy:#0c2a4a;--note:#fdf1d8;--note-ink:#6b4700;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--blue)}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px;z-index:9}
.in{max-width:980px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left))}
.top{border-bottom:1px solid var(--line);background:var(--surface)}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:12px}
.brand{display:block;line-height:0}
.logo-d{display:none}
nav{display:flex;align-items:center;gap:4px 20px;flex-wrap:wrap}
nav a{color:var(--ink);text-decoration:none;font-weight:600;padding:6px 0;background:linear-gradient(var(--teal),var(--teal)) no-repeat 0 100%/0 2px;transition:background-size .3s cubic-bezier(.2,.7,.2,1)}
nav a:hover,nav a[aria-current]{background-size:100% 2px}
main{max-width:980px;margin:0 auto;padding:40px max(16px,env(safe-area-inset-left)) 64px}
main.wide{max-width:none;padding:0 0 64px}
main.wide>section{padding-block:28px}
h1{font-size:clamp(32px,6vw,52px);line-height:1.05;margin:0 0 16px;text-wrap:balance}
h2{font-size:26px;line-height:1.2;margin:36px 0 12px}
h3{font-size:19px;margin:0 0 6px}
main.wide h2{margin-top:0}
p{margin:0 0 14px;max-width:70ch}
ul,ol{max-width:70ch;padding-left:22px}li+li{margin-top:6px}
.eyebrow{font:600 13px ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.lead{font-size:20px;color:var(--muted)}
.small{font-size:14px;color:var(--muted)}
.muted{color:var(--muted);font-weight:400;font-size:.7em}
.hero{background:var(--hero);color:#fff;padding:56px 0 60px !important}
.hero .eyebrow{color:var(--hero-eyebrow)}.hero .lead{color:var(--hero-lead)}
h2{color:var(--blue-deep)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.card p:last-child{margin-bottom:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
/* Four plan cards (Paperwind with Volume, 2026-11-10): 4 across, 2 x 2, then 1, never 3 + 1 alone */
.grid4{display:grid;grid-template-columns:1fr;gap:16px}@media(min-width:560px){.grid4{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.grid4{grid-template-columns:repeat(4,1fr)}}
.prod{display:block;color:var(--ink);text-decoration:none;border-top:4px solid var(--teal)}
.prod:hover{border-color:var(--blue)}
.prod h2{margin:10px 0 8px}
.more{color:var(--blue);font-weight:600}
.btn{display:inline-block;background:var(--blue);color:var(--btn-ink);text-decoration:none;font-weight:600;padding:12px 22px;border-radius:10px}
.btn:hover{background:var(--blue-deep)}
.cta{text-align:left}
.note{background:var(--note);color:var(--note-ink);border-radius:10px;padding:10px 14px;font-size:15px}
/* Under-construction strip under the menu on every page (2026-11-13): soft amber note colours, light and dark */
.building{background:var(--note);color:var(--note-ink);border-bottom:1px solid var(--line);font-size:14px;line-height:1.45}
.building .in{padding-block:8px;text-align:center}
.plan .price{font-size:30px;font-weight:700;margin:0}
.plan ul{padding-left:18px;margin:10px 0 0;font-size:15px}
footer{border-top:1px solid var(--line);background:var(--surface);padding:28px 0 20px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:16px}
footer p{margin:4px 0}
footer a{color:var(--ink)}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
/* Pricing: currency switch and tables (2026-11-05). Tables scroll inside their box on a phone, never the page. */
.curbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.curbtn{font:inherit;font-weight:600;font-size:15px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.curbtn[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--btn-ink)}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:9px 14px;border-top:1px solid var(--line)}
@media (max-width:480px){.tbl{font-size:14px}.tbl th,.tbl td{padding:8px 10px}}
.tbl thead th{border-top:0;color:var(--muted);font-weight:600;font-size:14px}
.tbl td+td,.tbl th+th{text-align:right;font-variant-numeric:tabular-nums}
/* Comparison tables hold sentences, not prices: keep every column left-aligned (compare page, 2026-11-08) */
.cmp .tbl td,.cmp .tbl th{text-align:left;vertical-align:top}
.cmp .tbl td:first-child{font-weight:600}
/* Motion (2026-11-05). Inspired by the feel of mobiwork.tech (moving hero, fixed see-through header, sections that rise
   into view), in Kitewind's own idea: a kite in a breeze, papers blowing away. Everything here is switched off for visitors
   who ask their device for reduced motion (last block). Without JavaScript the page is complete, just still. */
@view-transition{navigation:auto}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);view-transition-name:top;transition:box-shadow .3s}
.top.scrolled{box-shadow:0 6px 24px rgba(12,42,74,.14)}
main{view-transition-name:main}
::view-transition-old(main){animation:vt-out .2s ease both}
::view-transition-new(main){animation:vt-in .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
/* The reveal moves with "translate", so the hover lift ("transform") still works on revealed cards. */
.js .rv{opacity:0;translate:0 22px;transition:opacity .7s ease var(--d,0s),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.js .rv.on{opacity:1;translate:none}
.card,.btn,.curbtn{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .2s,border-color .2s}
.prod:hover,.plan:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(12,42,74,.14)}
.prod img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.prod:hover img{transform:rotate(-8deg) translateY(-4px)}
.prod .more{display:inline-block;transition:transform .25s}
.prod:hover .more{transform:translateX(4px)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,95,165,.3)}
.btn:active{transform:none}
.cur.flip{display:inline-block;animation:flip .4s cubic-bezier(.2,.7,.2,1)}
@keyframes flip{from{opacity:0;transform:translateY(8px)}}
/* Home hero: kite, gusts and papers. Decorative only (aria-hidden), clipped to the hero so nothing scrolls sideways. */
.hero{position:relative;overflow:hidden}
.hero .in{position:relative;z-index:1}
.sky{position:absolute;inset:0;pointer-events:none}
.gust{position:absolute;left:-40%;width:34%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:gust 7s linear infinite}
.g1{top:22%;animation-duration:6s}.g2{top:38%;animation-duration:8s;animation-delay:-3s}.g3{top:56%;animation-duration:5.5s;animation-delay:-1.5s}
.g4{top:71%;animation-duration:9s;animation-delay:-5s}.g5{top:84%;animation-duration:7s;animation-delay:-2s;width:22%}.g6{top:12%;animation-duration:10s;animation-delay:-7s;width:20%}
@keyframes gust{to{transform:translateX(520%)}}
.sheet{position:absolute;bottom:-40px;width:20px;height:26px;border-radius:3px;background:#fff linear-gradient(#85b7eb,#85b7eb) no-repeat 4px 7px/12px 2px;box-shadow:0 2px 6px rgba(0,0,0,.2);opacity:0;animation:blow 11s linear infinite}
.sheet::after{content:"";position:absolute;left:4px;top:13px;width:9px;height:2px;background:#85b7eb;box-shadow:0 5px 0 #b5d4f4}
.s1{left:6%}.s2{left:30%;animation-delay:-4s;animation-duration:13s}.s3{left:52%;animation-delay:-8s}.s4{left:18%;animation-delay:-2s;animation-duration:15s;transform:scale(.8)}
@keyframes blow{0%{transform:translate(0,0) rotate(-12deg);opacity:0}8%{opacity:.6}70%{opacity:.45}100%{transform:translate(55vw,-420px) rotate(260deg);opacity:0}}
.kite{position:absolute;right:9%;top:16%;width:clamp(110px,15vw,180px);height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.25));animation:float 6s ease-in-out infinite;transform-origin:50% 90%;transition:translate .6s cubic-bezier(.2,.7,.2,1)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(5deg)}}
/* Keep the hero text clear of the kite: on wide screens the text stops before it; on phones the kite shrinks to a corner. */
@media (min-width:761px){.hero h1,.hero .lead{max-width:min(62ch,calc(100% - 230px))}}
@media (max-width:760px){.kite{right:4%;top:10%;width:72px;opacity:.55}.sheet{display:none}}
.totop{position:fixed;right:18px;bottom:18px;z-index:30;width:44px;height:44px;border-radius:12px;border:0;background:var(--blue);color:var(--btn-ink);font-size:20px;line-height:44px;cursor:pointer;box-shadow:0 8px 20px rgba(12,42,74,.25);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,::before,::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;translate:none}
  .sheet,.gust{display:none}
}
/* Pricing dropdowns (2026-11-05): one per product, native <details>, so they open without JavaScript and with the
   keyboard; the page script opens the one named in the address (#paperwind, #voxkite). */
.acc{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;transition:box-shadow .3s,border-color .3s}
.acc[open]{box-shadow:0 14px 34px rgba(12,42,74,.12);border-color:color-mix(in srgb,var(--blue) 35%,var(--line))}
.acc>summary{list-style:none;display:flex;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;border-top:4px solid var(--teal)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{background:color-mix(in srgb,var(--blue) 6%,var(--surface))}
.acc>summary img{flex:none;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.acc[open]>summary img,.acc>summary:hover img{transform:rotate(-8deg)}
.acc-t{flex:1;min-width:0}
.acc-t h2{margin:0;font-size:24px}
.acc-s{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.chev{flex:none;width:34px;height:34px;border-radius:10px;background:var(--teal-soft);position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .2s}
.chev::before{content:"";position:absolute;left:12px;top:10px;width:9px;height:9px;border-right:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);transform:rotate(45deg)}
.acc[open] .chev{transform:rotate(180deg)}
.acc-body{padding:4px 20px 22px}
.acc[open] .acc-body{animation:acc-in .45s cubic-bezier(.2,.7,.2,1)}
@keyframes acc-in{from{opacity:0;transform:translateY(-10px)}}
#voxkite{padding-top:0!important}
@media (prefers-reduced-motion:reduce){.acc[open] .acc-body{animation:none}}
/* Second button (2026-11-05): the other product's sign-up, outlined so the two calls to action stay distinct. */
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn2{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
.btn2:hover{background:var(--blue);color:var(--btn-ink)}
/* Pricing menu dropdown (2026-11-05). Opens on hover, keyboard focus or a tap; on phones it spans the header width so it
   never runs off the screen (the header's backdrop filter makes it the box that "fixed" positions against). */
.dd{position:relative}
.dd-top::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.dd.open .dd-top::after{transform:translateY(0) rotate(225deg)}
.dd-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:250px;padding:8px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px rgba(12,42,74,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.2,1),visibility .2s;z-index:40}
.dd.open .dd-menu,.dd:focus-within .dd-menu,.dd:hover .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:none;color:var(--ink)}
.dd-menu a:hover,.dd-menu a:focus-visible{background:color-mix(in srgb,var(--blue) 8%,var(--surface))}
.dd-menu strong{display:block;font-size:15px}
.dd-menu small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.dd-menu img{flex:none;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.dd-menu a:hover img{transform:rotate(-8deg)}
@media (max-width:600px){.dd{position:static}.dd-menu{position:fixed;left:16px;right:16px;top:100%;min-width:0}}
/* Big home hero (2026-11-05, like the full-screen opening of mobiwork.tech): fills the first screen, large headline,
   the kite in a soft glow with Paperwind and Voxkite orbiting it, a scroll cue at the bottom. */
/* 75% of the screen height (Roshan, 2026-11-05), so the products show below it on the first screen. */
.hero-big{min-height:75svh;display:flex;align-items:center;padding:64px 0 96px !important;
  /* Deep navy chosen by Roshan 2026-11-07 (darker than --hero, which the other pages' banners keep); glows softened to match */
  background:radial-gradient(60% 70% at 78% 45%,rgba(133,183,235,.18),transparent 70%),radial-gradient(40% 50% at 10% 90%,rgba(93,202,165,.14),transparent 70%),
  radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px) 0 0/22px 22px,#072544}
.hero-big .in{width:100%}
.hero-big h1{font-size:clamp(42px,7.2vw,80px);letter-spacing:-.02em;margin-bottom:22px}
.hero-big .lead{font-size:clamp(18px,2vw,22px)}
@media (min-width:761px){.hero-big h1,.hero-big .lead,.hero-big .eyebrow,.hero-big .hero-btns{max-width:min(640px,calc(100% - 400px))}}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn-light{background:#fff;color:var(--blue-deep)}
.btn-light:hover{background:#e6f1fb}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.kitewrap{position:absolute;right:7%;top:50%;width:clamp(260px,30vw,380px);aspect-ratio:1;translate:0 -50%;display:grid;place-items:center}
.hero-big .kite{position:relative;right:auto;top:auto;width:52%;z-index:2}
.ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(255,255,255,.28)}
.r2{inset:16%;border-style:solid;border-color:rgba(159,225,203,.25);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06);opacity:.5}}
.orbit{position:absolute;inset:0;animation:spin 28s linear infinite}
.moon{position:absolute;width:64px;height:64px;margin:-32px;border-radius:18px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25);animation:spin 28s linear infinite reverse}
.m1{left:50%;top:0}.m2{left:50%;top:100%}
@keyframes spin{to{transform:rotate(360deg)}}
.cue{position:absolute;left:50%;bottom:22px;width:30px;height:46px;margin-left:-15px;border-radius:16px;border:2px solid rgba(255,255,255,.6);z-index:2}
.cue::after{content:"";position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media (max-width:760px){.hero-big{min-height:75svh}.kitewrap{right:-6%;top:15%;width:200px;opacity:.5;translate:none}.moon{width:44px;height:44px;margin:-22px;border-radius:12px}.moon img{width:30px;height:auto}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero-big .kite{opacity:1}
/* Phones: kite moved to the top corner, small and faint, so it never sits under the headline. */
@media (max-width:760px){.hero-big{align-items:flex-end}.kitewrap{right:4%;top:4%;width:130px;opacity:.6}.ring{display:none}.moon{width:34px;height:34px;margin:-17px;border-radius:10px}.moon img{width:22px}}
/* The Pricing entry is a block that holds the link and its menu: line its link up with the other menu links. */
.dd{display:flex;align-items:center}
.dd-top::after{vertical-align:middle}
/* Voice in the breeze (2026-11-05): speech bubbles with talking bars drift up with the papers (Voxkite beside
   Paperwind), and the orbiting Voxkite logo sends out sound ripples. */
.bubble{position:absolute;bottom:-40px;height:26px;padding:0 8px;border-radius:13px;background:#fff;display:flex;align-items:center;gap:3px;box-shadow:0 3px 10px rgba(0,0,0,.2);opacity:0;animation:drift 13s linear infinite}
.bubble::after{content:"";position:absolute;left:8px;bottom:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}
.bubble i{display:block;width:3px;height:13px;border-radius:2px;background:#ef9f27;animation:talk .9s ease-in-out infinite}
.bubble i:nth-child(2){animation-delay:.15s;background:#ba7517}.bubble i:nth-child(3){animation-delay:.3s}.bubble i:nth-child(4){animation-delay:.45s;background:#fac775}
.b1{left:12%;animation-delay:-6s}.b2{left:40%;animation-delay:-1s;animation-duration:15s}.b3{left:63%;animation-delay:-10s;animation-duration:12s}
@keyframes talk{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes drift{0%{transform:translate(0,0) rotate(-6deg);opacity:0}10%{opacity:.9}75%{opacity:.65}100%{transform:translate(42vw,-440px) rotate(8deg);opacity:0}}
.m2::before,.m2::after{content:"";position:absolute;inset:-3px;border-radius:21px;border:2px solid rgba(239,159,39,.75);animation:ping 2.4s ease-out infinite}
.m2::after{animation-delay:1.2s}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
@media (max-width:760px){.bubble{display:none}}
@media (prefers-reduced-motion:reduce){.bubble{display:none}}
/* Coloured header (Roshan, 2026-11-05, after mobiwork.tech): deep blue that flows into the home hero, the white logo,
   white menu links, and a teal bar at the top of the header over the current page (hover still slides an underline). */
.top{background:linear-gradient(90deg,rgba(12,42,74,.94),rgba(12,68,124,.92));border-bottom:1px solid rgba(255,255,255,.08)}
.top.scrolled{box-shadow:0 8px 28px rgba(4,20,40,.35)}
.logo-l{display:none}.logo-d{display:block}
nav a{color:#fff;position:relative;background-image:linear-gradient(#5dcaa5,#5dcaa5)}
nav a:hover{color:#e6f1fb}
nav a[aria-current]{background-size:0 2px}
nav a[aria-current]:hover{background-size:100% 2px}
nav a[aria-current]::before{content:"";position:absolute;left:-4px;right:-4px;top:-18px;height:3px;border-radius:0 0 3px 3px;background:#5dcaa5}
.dd-menu a::before{content:none}
.dd-menu a{color:var(--ink)}
/* Text in teal, not blue (Roshan, 2026-11-05): headings, links, "See ..." links and the outlined button. Filled buttons,
   the header and the hero stay blue. */
:root{--teal-deep:#085041}
a{color:var(--teal)}
h2{color:var(--teal-deep)}
.more{color:var(--teal)}
.btn2{color:var(--teal);box-shadow:inset 0 0 0 2px var(--teal)}
.btn2:hover{background:var(--teal);color:#fff}
/* Scrollbar (2026-11-05): where the browser shows one (Windows, or a Mac with "always show"), slim and in brand colours,
   so its strip next to the blue header is less noticeable. Browsers draw the track themselves; this is the most a page
   can change. */
html{scrollbar-width:thin;scrollbar-color:#5dcaa5 #0c2a4a}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0c2a4a}
::-webkit-scrollbar-thumb{background:#5dcaa5;border-radius:6px;border:2px solid #0c2a4a}
::-webkit-scrollbar-thumb:hover{background:#9fe1cb}