/* KAIT marketing subpages — shared shell (features/pricing/compare/faq/docs/ contact). Reuses the landing palette; simpler canvas (no mountain art) so these pages stay light and readable. */ :root{ --canvas-sunken:#030509;--canvas:#05080C;--surface-1:#11161E;--surface-2:#161C26; --border-subtle:#252B35;--border-strong:#313947; --text-primary:#F5F5F5;--text-secondary:#A0A6AE;--text-tertiary:#6A727D; --profit:#3FBF87;--loss:#F0564E; --brand:#F2C75B;--brand-hi:#F7DC85;--brand-dark:#B98522; --f:Inter,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; --ease:cubic-bezier(.4,0,.2,1); /* THE ONE HEADER MEASUREMENT. .bar's height, and therefore the distance anything that scrolls under the pinned bar has to clear. It was written three times -- 64 in .bar, 58 in the 420 step-down and 84 (= 64 + 20) in .doc-nav's sticky offset -- so the doc rail was already carrying a stale copy of a number it could not see change. */ --public-header-h:64px; } *{box-sizing:border-box;margin:0;padding:0} /* ANCHORS CLEAR THE PINNED BAR. scroll-padding-top is set on the SCROLL CONTAINER, so it applies to every anchor jump, every :target and every scrollIntoView on the page at once -- a section added tomorrow is correct without touching this file, which a per-target scroll-margin list is not. The 20px is the same breathing gap .doc-nav already sits at. */ html{scroll-behavior:smooth; scroll-padding-top:calc(var(--public-header-h) + 20px)} body{background:var(--canvas);color:var(--text-primary);font-family:var(--f); font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 1;min-height:100svh;display:flex; flex-direction:column; /* The page does not stop at the last footer pixel. This is the breathing room BELOW the footer -- padding on the flex CONTAINER, so it is outside footer.site's own box and the footer stays the last element in flow rather than growing a bigger bottom edge. main.page keeps flex:1, so on a short page the footer still settles at the bottom and this gap sits under it; on a long one it is simply the end of the document. */ padding-bottom:var(--public-footer-bottom-breathing-room)} .num{font-variant-numeric:tabular-nums} a{color:inherit;text-decoration:none} button{font-family:var(--f)} .wrap{max-width:1120px;margin:0 auto;padding:0 26px;width:100%} .gold-text{background:linear-gradient(180deg,var(--brand-hi),var(--brand) 55%,var(--brand-dark)); -webkit-background-clip:text;background-clip:text;color:transparent} /* header */ header.site{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px); background:rgba(5,8,12,.82);border-bottom:1px solid var(--border-subtle)} /* Header chrome is direction-INDEPENDENT: brand left, controls right, in every locale. Pinning the bar to ltr is what makes that true — no auto-margin can, because in an RTL flex row the main-axis start IS the right, so the same rule would migrate the control to the left the moment Arabic is selected. Text still renders per-script: bidi applies to inline content; only the BOX layout is frozen here. */ .bar{display:flex;align-items:center;gap:26px;height:var(--public-header-h); direction:ltr} /* ONE brand unit: mark + word behave as a single object at every width. flex-none stops the lockup being squeezed by the nav, and the word never wraps -- "Goka / it" is the failure this prevents on 360px phones. */ .brandblk{display:flex;align-items:center;gap:10px;flex:none;min-width:0} .brandblk .mark{width:30px;height:30px;flex:none} .brandblk .word{font-weight:700;font-size:20px;letter-spacing:.005em; white-space:nowrap;line-height:1} .brandblk .tag{display:block;font-size:9.5px;letter-spacing:.14em; color:var(--text-tertiary);text-transform:uppercase} nav.site{display:flex;gap:4px;margin-left:auto} nav.site a{padding:8px 12px;border-radius:8px;font-size:13.5px; color:var(--text-secondary);transition:color .15s var(--ease),background .15s var(--ease)} nav.site a:hover{color:var(--text-primary);background:var(--surface-1)} nav.site a[aria-current="page"]{color:var(--brand)} footer.site .fbrand{font-weight:700;letter-spacing:.005em; color:var(--text-primary)} /* mobile hamburger — hidden on desktop, shown <=860px; morphs to an X */ .navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px; width:42px;height:42px;padding:10px;margin-left:auto;border:0;border-radius:9px; background:none;cursor:pointer;transition:background .2s var(--ease)} .navtoggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--brand); transition:transform .28s var(--ease),opacity .2s var(--ease)} .navtoggle:hover{background:var(--surface-1)} .navtoggle:focus-visible{outline:1px solid var(--brand-dark);outline-offset:2px} .navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navtoggle.open span:nth-child(2){opacity:0} .navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .btn-gold{display:inline-flex;align-items:center;gap:8px;background: linear-gradient(180deg,var(--brand-hi),var(--brand) 60%,var(--brand-dark)); color:#1A1200;font-weight:700;font-size:14px;border-radius:10px; padding:10px 18px;border:0;cursor:pointer; box-shadow:0 4px 18px rgba(242,199,91,.22)} .btn-gold:hover{filter:brightness(1.06)} .btn-outline{display:inline-flex;align-items:center;gap:8px;font-size:14px; border:1px solid var(--border-strong);border-radius:10px;padding:10px 18px; color:var(--text-primary);background:transparent} .btn-outline:hover{border-color:var(--brand);color:var(--brand)} /* page scaffold */ main.page{flex:1;padding:56px 0 80px} .crumbs{font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--text-tertiary);margin-bottom:14px} h1.pg{font-size:clamp(30px,4.4vw,44px);line-height:1.12;font-weight:800; letter-spacing:-.01em;margin-bottom:14px} p.lede{font-size:17px;color:var(--text-secondary);max-width:640px; margin-bottom:44px} section.blk{margin-bottom:52px} section.blk h2{font-size:22px;font-weight:700;margin-bottom:14px} section.blk h3{font-size:16px;font-weight:700;margin:22px 0 8px} section.blk p{color:var(--text-secondary);max-width:720px;margin-bottom:12px} section.blk ul,section.blk ol{color:var(--text-secondary);max-width:700px; margin:0 0 12px 22px} section.blk li{margin-bottom:7px} section.blk li b,section.blk p b{color:var(--text-primary);font-weight:600} /* cards */ .grid{display:grid;gap:18px} .grid.c3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .card{background:var(--surface-1);border:1px solid var(--border-subtle); border-radius:14px;padding:24px} .card h3{font-size:16px;font-weight:700;margin-bottom:8px} .card p{font-size:14px;color:var(--text-secondary)} .card .ic{width:34px;height:34px;border-radius:9px;display:flex; align-items:center;justify-content:center;background:rgba(242,199,91,.1); margin-bottom:14px} .card .ic svg{width:18px;height:18px;stroke:var(--brand);fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* pricing */ .plans{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:stretch} .plan{background:var(--surface-1);border:1px solid var(--border-subtle); border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:10px; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .plan:hover{transform:translateY(-4px);border-color:var(--border-strong, var(--border-subtle));box-shadow:0 14px 40px rgba(0,0,0,.28)} .plan.hot{border-color:var(--brand);box-shadow:0 0 34px rgba(242,199,91,.10)} .plan.hot:hover{box-shadow:0 14px 44px rgba(242,199,91,.16)} .plan li.addon{color:var(--brand);font-weight:600} @media (prefers-reduced-motion: reduce){.plan{transition:none} .plan:hover{transform:none}} .plan .pk{font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--text-tertiary)} .plan .pname{font-size:20px;font-weight:800} .plan .price{font-size:32px;font-weight:800;letter-spacing:-.01em} .plan .price small{font-size:13px;font-weight:500;color:var(--text-tertiary)} .plan .pdesc{font-size:13.5px;color:var(--text-secondary);min-height:52px} .plan ul{list-style:none;margin:8px 0 16px;display:grid;gap:8px;font-size:13.5px} .plan li{display:flex;gap:9px;align-items:baseline;color:var(--text-secondary)} .plan li::before{content:"";width:6px;height:6px;border-radius:50%; background:var(--brand);flex:none;transform:translateY(-1px)} .plan .cta{margin-top:auto} .plan .cta a{width:100%;justify-content:center} /* ---- MOST POPULAR: a boundary tab, not a row ---------------------------- MEASURED DEFECT (1280px): the badge sat in normal flow, so Hybrid Plus began 35px lower than its neighbours -- name 394 -> 429, price 444 -> 479, description 505 -> 540. The cards were already equal height and the CTAs already aligned; it was only the header rows that drifted, and only on the one card carrying the badge. Taking it OUT of flow is the whole fix: absolutely positioned and centred on the card's own top border, it marks the card without occupying any of its content height, so all three names, prices and descriptions share a baseline again. It is also why a longer translation is now free -- Russian's "Самый популярный" simply makes the tab wider, and no card geometry moves. */ .plan{position:relative} /* the grid reserves the tab's overhang so it can never be clipped */ .plans{padding-top:12px} .pbadge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%); z-index:2;overflow:hidden; font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700; white-space:nowrap;max-width:calc(100% - 36px);text-overflow:ellipsis; padding:4px 13px;border-radius:99px; color:var(--brand);background:linear-gradient(180deg,#171a20,#0f1216); border:1px solid rgba(242,199,91,.42); box-shadow:0 0 0 3px var(--surface-1),0 2px 14px rgba(242,199,91,.18)} /* A slow travelling glint -- the only motion. It is a transform on a pseudo element, so it stays on the compositor and costs no layout or paint. */ .pbadge::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.16) 50%, transparent 62%); transform:translateX(-140%);animation:pbadge-glint 7s ease-in-out infinite} @keyframes pbadge-glint{0%,62%{transform:translateX(-140%)} 100%{transform:translateX(140%)}} @media (prefers-reduced-motion:reduce){ .pbadge::after{animation:none;opacity:0} } /* compare table */ .cmp-wrap{overflow-x:auto;border:1px solid var(--border-subtle); border-radius:14px;background:var(--surface-1)} table.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:640px} table.cmp th,table.cmp td{padding:13px 18px;text-align:center; border-bottom:1px solid var(--border-subtle)} table.cmp th{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--text-tertiary);font-weight:600} /* the row-label column reads from the table's own edge, so the compare grid keeps the same shape in Arabic as in English */ table.cmp td:first-child,table.cmp th:first-child{text-align:start; color:var(--text-secondary)} table.cmp tr:last-child td{border-bottom:0} table.cmp .yes{color:var(--profit);font-weight:700} table.cmp .no{color:var(--text-tertiary)} table.cmp .pname{color:var(--text-primary);font-weight:700;font-size:14px; text-transform:none;letter-spacing:0} table.cmp .pprice{display:block;font-size:12px;color:var(--text-tertiary); font-weight:500;margin-top:3px} /* FAQ + docs */ details.qa{border:1px solid var(--border-subtle);border-radius:12px; background:var(--surface-1);padding:0 20px;margin-bottom:10px} details.qa summary{cursor:pointer;list-style:none;display:flex; align-items:center;justify-content:space-between;gap:14px;padding:16px 0; font-weight:600;font-size:15px} details.qa summary::after{content:"+";color:var(--brand);font-size:19px; font-weight:400;transition:transform .18s var(--ease)} details.qa[open] summary::after{transform:rotate(45deg)} details.qa .a{padding:0 0 16px;color:var(--text-secondary);font-size:14.5px; max-width:760px} .doc-cols{display:grid;grid-template-columns:220px 1fr;gap:40px; align-items:start} .doc-nav{position:sticky;top:calc(var(--public-header-h) + 20px); display:grid;gap:2px} .doc-nav a{padding:8px 12px;border-radius:8px;font-size:13.5px; color:var(--text-secondary);border-left:2px solid transparent} .doc-nav a:hover{color:var(--text-primary);background:var(--surface-1)} .note{border:1px solid var(--border-subtle);border-left:3px solid var(--brand); border-radius:10px;background:var(--surface-1);padding:14px 18px; font-size:14px;color:var(--text-secondary);max-width:720px;margin:14px 0} .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;font-size:14.5px; max-width:560px} .kv dt{color:var(--text-tertiary)} .kv dd{color:var(--text-secondary)} .state{padding:14px 0 0} .state span{display:inline-block;font-size:12px;font-weight:700; letter-spacing:.06em;border-radius:7px;padding:3px 10px;margin:0 8px 8px 0} .st-ok{background:rgba(63,191,135,.12);color:var(--profit)} .st-warn{background:rgba(242,199,91,.12);color:var(--brand)} .st-bad{background:rgba(240,86,78,.12);color:var(--loss)} .loading{color:var(--text-tertiary);font-size:14px;padding:28px 0} /* footer */ footer.site{border-top:1px solid var(--border-subtle);padding:30px 0 40px; font-size:13px;color:var(--text-tertiary)} footer.site .frow{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center} footer.site a:hover{color:var(--text-secondary)} footer.site .disc{flex-basis:100%;font-size:11.5px;line-height:1.6; max-width:860px;margin-top:8px} @media (max-width:860px){ .bar{position:relative} .navtoggle{display:flex} nav.site{display:none;position:absolute;top:100%;left:0;right:0;margin:0; flex-direction:column;gap:0;padding:6px; background:rgba(6,9,13,.98);backdrop-filter:blur(16px); border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle); box-shadow:0 24px 48px rgba(0,0,0,.6)} nav.site.open{display:flex} nav.site a{width:100%;padding:14px 16px;font-size:15px;border-radius:0} nav.site a:not(:last-child){border-bottom:1px solid rgba(242,199,91,.15)} /* gold separator */ .doc-cols{grid-template-columns:1fr} .doc-nav{position:static;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} } /* The shared public background used to be defined here. It now lives in public-shell.css, which every public page loads -- including the app shell and /pay, which this stylesheet never reached. One definition. */ /* ---- narrow phones: the header stays a header --------------------------- At 360px the bar carries mark + word + toggle and nothing else, so the only thing that can break it is the word growing. It is stepped down rather than allowed to shrink the mark, which would make the logo look wrong. */ @media (max-width:420px){ :root{--public-header-h:58px} .bar{gap:12px} .brandblk{gap:8px} .brandblk .mark{width:26px;height:26px} .brandblk .word{font-size:18px} .navtoggle{width:40px;height:40px} } @media (max-width:340px){ .brandblk .word{font-size:16.5px} } /* The public shell must never scroll sideways. Every public surface is a column of blocks inside .wrap, so any horizontal overflow is a bug in a child, not an intended scroller -- clip it at the root and it cannot silently ship. */ html{overflow-x:clip} /* ==== DIRECTION CONTRACT (subpages) ===================================== The same three layers the homepage and the dashboard use. Arabic changes the language, not the physical product: a visitor comparing plans must find the SAME plan in the same position whichever language they read, otherwise the commercial comparison itself changes shape. 1. a container is pinned to a fixed geometry ONLY when its physical order carries meaning a visitor compares across languages -- the plan grid, the compare table's columns, the header and footer rows. A container that merely sets a width, a padding or a background carries no order, so it is NOT pinned; 2. inside such a container, TEXT ELEMENTS return to the locale's direction -- never the container itself -- and are aligned to their own reading edge with text-align:start (one rule, not a left/right pair); 3. canonical values -- prices, entitlement numbers, currency codes -- are isolated so bidi cannot reorder a figure or detach its sign. WHY LAYER 2 IS STRUCTURAL AND NOT A LIST. It used to name the elements to return -- .plan h2, .card p, .kv dt and so on. Two things went wrong with that. It was applied to .wrap, which is the wrapper EVERY subpage puts its whole content in, so the default for all prose became LTR; and the list that undid it could only ever name the elements that existed when it was written. Measured in Arabic before this change: 89 of 139 text nodes on /docs, 52 of 84 on /faq and 24 of 118 on /compare rendered LTR, which with text-align:start puts Arabic on the left edge with its punctuation stranded. Naming the TEXT ELEMENTS instead of naming the elements to restore makes a new heading, cell, list item or paragraph correct by construction -- and it is deliberately not "everything inside", because `direction` on a grid or a row reverses that row, and a rule wide enough to catch every paragraph would also have turned the plan grid and the compare columns around. ===================================================================== */ [dir="rtl"] .bar,[dir="rtl"] .brandblk,[dir="rtl"] nav.site, [dir="rtl"] .grid,[dir="rtl"] .plans,[dir="rtl"] .cmp-wrap, [dir="rtl"] table.cmp,[dir="rtl"] .doc-cols,[dir="rtl"] .kv, [dir="rtl"] .frow,[dir="rtl"] footer.site{direction:ltr} /* Inside a pinned container, TEXT is the locale's again -- but only text. `direction` on a flex or grid container reverses the order of its children, so naming the text elements rather than "everything inside" is what keeps the plan grid, the compare columns and the footer rows physical while a heading, paragraph, cell or list item reads right-to-left. A
,
    ,