/* by.kalua.im — page styles shared by the suite landing and the app sites.
   Every value comes from the design system's "App web page" and "Suite landing page"
   templates; the inline styles there became the classes here, nothing else changed. */

html,body{margin:0;padding:0;background:var(--paper)}
/* a page that scrolls must not sit a scrollbar's width further left than one that doesn't (the toggles would shift) */
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}
html[data-kaluaim-theme="dark"]{color-scheme:dark}
/* notch / rounded-corner phones in landscape */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
body{color:var(--ink);font-family:var(--font-sans)}
a{color:var(--accent-deep);text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a:hover{color:var(--accent)}
h1,h2,p{margin:0;font-weight:inherit;font-size:inherit}
button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.seg button:focus-visible{outline-offset:1px;border-radius:var(--r-pill)}

/* the other language's blocks stay out of the page */
html[lang="ar"] [data-lang="en"],html[lang="en"] [data-lang="ar"]{display:none !important}

.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:var(--font-sans)}
.band{background:var(--band)}

/* header band: name in the middle, toggles on the left, the kaluaim mark on the right (always LTR) */
.sh{position:relative;box-sizing:border-box;min-height:74px;max-width:1020px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:center;gap:10px}
.sh .name{font-size:21px;font-weight:700;letter-spacing:-0.2px}
.sh .home{display:flex;align-items:center;gap:8px}
.sh .home .name{font-size:18px;letter-spacing:0;color:var(--ink)}
.bk{position:absolute;right:24px;top:50%;transform:translateY(-50%);font:400 12.5px var(--font-brand);color:var(--text-3);text-decoration:underline dotted;text-underline-offset:3px}
.bk .by{font-family:var(--font-sans)}
.ctl{position:absolute;left:24px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px}
.seg{display:flex;align-items:center;background:var(--sheet-muted);border:1px solid var(--hair);border-radius:var(--r-pill);padding:2px}
.seg button{appearance:none;-webkit-appearance:none;box-sizing:content-box;margin:0;padding:0;background:none;border:1px solid transparent;border-radius:var(--r-pill);color:var(--text-4);cursor:pointer;display:flex;align-items:center;justify-content:center;height:26px;line-height:1}
.seg button[aria-pressed="true"]{background:var(--sheet);border-color:var(--accent-edge);color:var(--accent-deep);cursor:default}
.seg .sun,.seg .moon{width:34px}
.seg .sun img,.seg .moon img{width:16px;height:16px;display:block}
.seg button[aria-pressed="false"] img{filter:grayscale(1);opacity:.5}
.seg .en{width:38px;font-size:12px;font-weight:600}
.seg .ar{width:38px;font-size:14px;font-weight:600;box-sizing:border-box;padding-bottom:3px}

/* app icon plate: white squircle, tint band, one crest rim, glyph at 50% */
.plate{position:relative;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;background:var(--icon-plate);border:1px solid var(--icon-edge)}
.plate::before{content:"";position:absolute;top:0;left:0;right:0;height:46%;background:linear-gradient(180deg,var(--icon-band),rgba(255,255,255,0))}
.plate::after{content:"";position:absolute;top:0;left:0;right:0;height:9%;background:var(--icon-crest)}
.plate img{width:50%;height:50%;position:relative;z-index:1;filter:var(--glyph-edge)}
.plate--32{width:32px;height:32px;border-radius:8px}
.suite .plate--32 img{width:56%;height:56%} /* the suite mark sits a touch larger in its plate (template) */
.plate--26{width:26px;height:26px;border-radius:7px}
.plate--76{width:76px;height:76px;border-radius:17px;box-shadow:0 12px 28px -14px rgba(35,30,45,.3);margin-bottom:22px}
.plate--120{width:120px;height:120px;border-radius:var(--r-hero)}
.plate--120 img{width:58%;height:58%}
.glyph{flex:none;filter:var(--glyph-edge)}

/* landing hero */
.hero{max-width:1020px;margin:0 auto;padding:46px 24px 64px;display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.hero__copy{flex:1.2;min-width:300px}
.t1{font-size:46px;line-height:1.15;font-weight:700;letter-spacing:-0.8px}
.hero__sub{font-size:17px;line-height:1.55;color:var(--text-2);margin-top:14px;max-width:44ch}
.badges{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;align-items:stretch}
.badge{border-radius:var(--r-control);padding:10px 18px;display:inline-flex;align-items:center;gap:10px;line-height:1.25}
.badge--store{background:var(--plate-dark);border:1px solid var(--plate-dark-edge);color:#F4F2F7}
.badge--store:hover{color:#F4F2F7}
.badge--soon{border:1px solid var(--hair);color:var(--text-3);background:var(--sheet)}
.badge .col{display:inline-flex;flex-direction:column}
.badge .small{font-size:11px;opacity:.75}
.badge--soon .small{opacity:1;color:var(--text-4)}
.badge .big{font-size:16px;font-weight:600}
.ico{width:20px;height:20px;flex:none;background:currentColor;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-position:center;mask-repeat:no-repeat}
.ico--apple{-webkit-mask-image:url('/assets/icons/apple.svg');mask-image:url('/assets/icons/apple.svg')}
.ico--android{-webkit-mask-image:url('/assets/icons/android.svg');mask-image:url('/assets/icons/android.svg')}
.hero__phone{flex:1;min-width:280px;display:flex;justify-content:center}

/* the phone: Huna's Home screen, drawn */
.phone{width:306px;border:2px solid var(--text-4);border-radius:52px;padding:10px;background:var(--paper)}
.phone__screen{border:1.5px solid var(--hair);border-radius:42px;overflow:hidden;position:relative;background:var(--paper);color:var(--ink);font-family:var(--font-sans);min-height:614px;display:flex;flex-direction:column}
.phone__island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:84px;height:22px;border:1.5px solid var(--text-4);border-radius:999px}
.phone__bar{display:flex;justify-content:center;padding:14px 0 8px}
.phone__bar span{width:96px;height:4px;border-radius:999px;background:var(--text-4)}
.hu{flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--tint-lo) 0%,var(--paper) 30%)}
.hu__status{height:46px;flex:none;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.hu__time{font-size:13px;font-weight:600}
.hu__tray{display:flex;align-items:center;gap:4px}
.hu__bars{display:flex;align-items:flex-end;gap:1.5px;height:9px}
.hu__bars span{width:2.5px;border-radius:1px;background:currentColor}
.hu__wifi{width:12px;height:12px;background:currentColor;-webkit-mask:url('/assets/icons/wifi.svg') center/contain no-repeat;mask:url('/assets/icons/wifi.svg') center/contain no-repeat}
.hu__batt{width:20px;height:9.5px;border-radius:3px;background:currentColor}
.hu__head{padding:12px 14px 0 15px}
.hu__title{display:flex;align-items:center;gap:6px}
.hu__title img{width:25px;height:25px;flex:none;filter:var(--glyph-edge)}
.hu__name{font-size:25px;font-weight:700;letter-spacing:-0.5px;line-height:1}
.hu__adv{font-size:10.5px;font-weight:700;background:var(--accent);color:var(--on-accent);border-radius:5px;padding:3px 6px;line-height:1.2}
.hu__sp{flex:1}
.hu__gear{width:30px;height:30px;border-radius:50%;background:var(--sheet);display:flex;align-items:center;justify-content:center;flex:none}
.hu__gear i{width:16px;height:16px;background:var(--ink);-webkit-mask:url('/assets/icons/settings.svg') center/contain no-repeat;mask:url('/assets/icons/settings.svg') center/contain no-repeat}
.hu__plus{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.hu__plus i{width:17px;height:17px;background:var(--on-accent);-webkit-mask:url('/assets/icons/plus.svg') center/contain no-repeat;mask:url('/assets/icons/plus.svg') center/contain no-repeat}
.hu__kb{margin-top:12px;display:flex}
.hu__kb span{display:inline-flex;align-items:center;gap:7px;background:var(--sheet);border-radius:var(--r-pill);padding:6px 12px;font-size:12px;font-weight:500}
.hu__kb i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.hu__label{margin-top:13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.hu__label .saved{font-size:11.5px;font-weight:600;color:var(--text-3);letter-spacing:.2px}
.hu__label .reorder{font-size:11.5px;font-weight:600;background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r-pill);padding:6px 13px}
.hu__sheet{margin:12px 11px 0;background:var(--sheet);border-radius:24px;overflow:hidden}
.hu__row{display:flex;align-items:center;gap:11px;padding:10px 12px 10px 15px;border-bottom:0.5px solid var(--hair)}
.hu__row>img{width:24px;height:24px;flex:none}
.hu__row .txt{flex:1;min-width:0}
.hu__row .n{font-size:14px;font-weight:700;line-height:1.25}
.hu__row .c{font-size:11.5px;font-weight:600;color:var(--text-3);margin-top:1px}
.hu__photo{position:relative;width:34px;height:34px;flex:none}
.hu__photo img{width:34px;height:34px;border-radius:10px;object-fit:cover;display:block}
.hu__photo i{position:absolute;bottom:-5px;inset-inline-end:-6px;width:17px;height:17px;border-radius:50%;background:var(--sheet);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center}
.hu__photo i::after{content:"";width:8.5px;height:8.5px;background:var(--text-2);-webkit-mask:url('/assets/icons/copy.svg') center/contain no-repeat;mask:url('/assets/icons/copy.svg') center/contain no-repeat}
.hu__copy{width:29px;height:29px;border-radius:50%;border:1.5px solid var(--hair);display:flex;align-items:center;justify-content:center;flex:none}
.hu__copy::after{content:"";width:13px;height:13px;background:var(--text-2);-webkit-mask:url('/assets/icons/copy.svg') center/contain no-repeat;mask:url('/assets/icons/copy.svg') center/contain no-repeat}
.hu__add{display:flex;align-items:center;gap:11px;padding:12px 15px 14px;color:var(--accent)}
.hu__add i{width:24px;display:flex;justify-content:center;flex:none}
.hu__add i::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url('/assets/icons/plus.svg') center/contain no-repeat;mask:url('/assets/icons/plus.svg') center/contain no-repeat}
.hu__add span{font-size:14px;font-weight:600}
.hu__fill{flex:1}

/* features · privacy card · changelog column */
.main{max-width:1020px;margin:0 auto;padding:54px 24px 60px;display:flex;gap:48px;flex-wrap:wrap;align-items:flex-start}
.main__left{flex:1.9;min-width:320px;display:flex;flex-direction:column;gap:44px}
.feats{display:flex;flex-direction:column;gap:26px}
.feat{display:flex;gap:18px;align-items:flex-start}
.feat img{width:34px;height:34px;flex:none;filter:var(--glyph-edge)}
.feat .t{font-size:16.5px;font-weight:600}
.feat .s{font-size:14px;line-height:1.55;color:var(--text-3);margin-top:4px;max-width:52ch}
.card{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r-sheet)}
.privcard{padding:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.privcard>img{width:28px;height:28px;filter:var(--glyph-edge)}
.privcard .txt{flex:1;min-width:220px}
.privcard .t{font-size:16px;font-weight:600}
.privcard .s{font-size:13.5px;color:var(--text-3);margin-top:3px}
.privcard a{font-size:14px;font-weight:600}
.main__right{flex:1;min-width:280px}
.kicker{font:600 12px var(--font-mono);letter-spacing:.06em;color:var(--tint-text);text-transform:uppercase}
.log__title{font-size:26px;font-weight:700;letter-spacing:-0.4px;margin-top:6px}
.log{overflow:hidden;margin-top:18px}
.log__v{padding:15px 20px;border-bottom:0.5px solid var(--hair)}
.log__v:last-child{border-bottom:0}
.vh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vpill{font:700 12.5px var(--font-mono);background:var(--sheet-muted);color:var(--text-2);border-radius:var(--r-pill);padding:4px 11px}
.vpill--latest{background:var(--accent);color:var(--on-accent)}
.vdate{font:600 11px var(--font-mono);color:var(--text-faint)}
.log__items{font-size:14.5px;line-height:1.7;color:var(--text-2);margin-top:9px}
.log__all{margin-top:12px;text-align:end}
.log__all a{font-size:13.5px;font-weight:600}

/* footer */
.foot{margin-top:auto;border-top:1px solid var(--hair)}
.foot__in{max-width:1020px;margin:0 auto;padding:22px 24px calc(22px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot__in--narrow{max-width:760px}
.foot__in>a{font-size:13.5px;color:var(--text-3)}
.foot__in>a:hover{color:var(--accent)}
.foot__in>a.mail{font:400 13px var(--font-brand)}
.foot .sp{flex:1}
.credit{display:inline-flex;align-items:center;gap:5px;font:400 13px var(--font-sans);color:var(--text-3)}
.credit b{font-weight:700;color:var(--text-2)}
.credit a{color:var(--text-3);font:400 13px var(--font-brand);text-decoration:underline dotted;text-underline-offset:3px}
.credit a:hover{color:var(--accent)}
.credit--ar a{font-family:var(--font-sans)}

/* subpages: privacy · support · changelog (760 wide) */
.sub__head{max-width:760px;margin:0 auto;padding:34px 24px 30px}
.t2{font-size:36px;font-weight:700;letter-spacing:-0.6px;margin-top:8px}
.updated{font:600 11.5px var(--font-mono);color:var(--text-faint);margin-top:10px}
.sub__body{max-width:760px;margin:0 auto;padding:10px 24px 50px}
.leadcard{padding:24px 26px;display:flex;gap:14px;align-items:flex-start}
.leadcard>img{width:26px;height:26px;flex:none;filter:var(--glyph-edge)}
.leadcard .lead{font-size:16.5px;line-height:1.6;font-weight:600}
.sec{font-size:17px;font-weight:600;margin-top:28px}
.sec--first{margin-top:34px}
.sec+p{font-size:15px;line-height:1.65;color:var(--text-2);margin-top:8px}
.contact{padding:24px 26px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.contact>img{width:26px;height:26px;flex:none;filter:var(--glyph-edge)}
.contact .txt{flex:1;min-width:220px}
.contact .t{font-size:16px;font-weight:600}
.contact .s{font-size:13.5px;color:var(--text-3);margin-top:3px}
.contact .btn{background:var(--accent);color:var(--on-accent);border-radius:var(--r-control);padding:10px 18px;font-size:14px;font-weight:600}
.contact .btn:hover{color:var(--on-accent)}
.versions{display:flex;flex-direction:column;gap:16px}
.ver{padding:20px 24px}
.ver .vh{gap:10px}
.ver .vpill{font-size:13px;padding:4px 12px}
.ver .vdate{font-size:11.5px}
.ver .latest{font-size:12px;font-weight:600;color:var(--tint-text);border:1px solid var(--accent-edge);border-radius:var(--r-pill);padding:3px 10px}
.ver .items{font-size:15px;line-height:1.65;color:var(--text-2);margin-top:12px}

/* suite landing (by.kalua.im) */
.suite .brand{font:700 24px var(--font-brand);letter-spacing:-0.3px}
.suite__hero{max-width:760px;margin:0 auto;padding:64px 24px 56px;text-align:center}
.suite__hero .t1{font-size:44px;line-height:1.12}
.suite__hero .hero__sub{font-size:16px;line-height:1.6;margin-left:auto;margin-right:auto}
.apps{max-width:760px;margin:0 auto;padding:8px 24px 72px}
.apps__row{display:flex;flex-wrap:wrap;justify-content:center;gap:64px;padding:10px 0 20px}
.app{display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none}
.app .n{font-size:26px;font-weight:700;color:var(--ink)}
.app .h{font:600 12.5px var(--font-brand);color:var(--tint-text);text-decoration:underline dotted;text-underline-offset:3px}
.suite__foot{margin-top:auto;text-align:center;padding:22px 24px calc(22px + env(safe-area-inset-bottom))}
.suite__foot a{font:400 12px var(--font-brand);color:var(--text-faint)}
.suite__foot a:hover{color:var(--accent)}

@media (max-width:720px){
  .sh{justify-content:flex-start}
  .bk{display:none}
  .t1{font-size:34px;letter-spacing:-0.5px}
  .t2{font-size:28px}
  .hero{padding-top:28px;gap:32px}
  /* the toggles join the row instead of floating over the name */
  .ctl{position:static;transform:none;margin-left:auto}
  /* the template's flex:1.2 / flex:1 pairs have a 0 basis, so both columns land on one line
     and their min-widths overflow a phone: below the breakpoint each column takes the row */
  .hero__copy,.hero__phone,.main__left,.main__right{flex-basis:100%;min-width:0}
  .hero__phone{justify-content:flex-start}
  .hero__phone .phone{max-width:calc(100% - 24px)}
}

@media (max-width:480px){
  /* mark + wordmark + toggles = 423px: on a phone the mark alone carries the brand */
  .suite .brand{display:none}
}
@media (pointer:coarse){
  /* touch: 44px-tall hit areas (HIG / Material) around 32px-tall buttons, a little wider too */
  .seg button{height:32px;position:relative}
  .seg button::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}
  .seg .sun,.seg .moon{width:40px}
  .seg .en,.seg .ar{width:42px}
  .foot__in>a,.suite__foot a{padding:10px 8px;margin:-10px -8px}
}