/* Kinoward pages layer (30 Oct 2026) for pricing.html and login.html.
   Loads after kinoward-theme.css (tokens, header, buttons, dialogs) and, on pricing, home.css (glass and closing card).
   Flat Ink and Graphite, Ember for emphasis only, no gradients, no translucent accent fills.
   The approved pricing layout stays: open plan columns, plan summaries in the opening view. */

.kw-page{overflow-x:clip;background:var(--bg)}
.kw-page footer .brand img{width:clamp(120px,10vw,150px)}

/* ---- Pricing ---------------------------------------------------------- */

/* Opening view: the lake at dusk behind the headline, held down by Ink so the copy reads. */
.kw-pricing .pricing-intro{position:relative;isolation:isolate;padding-block:clamp(36px,5vw,64px) clamp(28px,3vw,40px);margin-bottom:0}
.kw-pricing .pricing-intro:before{content:'';position:absolute;z-index:-2;inset:calc(-1 * clamp(28px,3vw,40px)) calc(50% - 50vw) 0;background:var(--bg) url('/landing/assets/hero-lake-panorama-wide.webp') 50% 46%/cover no-repeat}
.kw-pricing .pricing-intro:after{content:'';position:absolute;z-index:-1;inset:calc(-1 * clamp(28px,3vw,40px)) calc(50% - 50vw) 0;background:rgba(17,19,21,.72)}
.kw-pricing .pricing-page{padding-top:clamp(28px,3vw,40px)}
.kw-pricing .pricing-intro h1{letter-spacing:-.02em;line-height:.9}
.kw-pricing .pricing-intro h1 .kw-accent{color:var(--accent)}
.kw-pricing .pricing-intro-copy p{color:var(--text-2)}
.kw-pricing .pricing-intro-copy>#billing-summary{color:var(--accent)}

/* Billing period: open text tabs with the Ember line, as on the home page workflow tabs. */
.kw-pricing .billing-switch button{position:relative;border-bottom:0;font:500 14px 'Barlow',Arial,sans-serif;color:var(--muted);transition:color .25s}
.kw-pricing .billing-switch button:hover{color:var(--text)}
.kw-pricing .billing-switch button[aria-pressed=true]{color:var(--text);font-weight:600}
.kw-pricing .billing-switch button:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease,ease)}
.kw-pricing .billing-switch button[aria-pressed=true]:after{transform:scaleX(1)}
.kw-pricing .billing-switch small{color:var(--accent)}
.kw-pricing .billing-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

.kw-pricing .pricing-status{border-block-color:var(--line)}
.kw-pricing .pricing-status strong{color:var(--accent)}
.kw-pricing .pricing-trial .eyebrow,.kw-pricing .pricing-notes .eyebrow,.kw-pricing .pricing-faq .eyebrow{color:var(--accent)}
.kw-pricing .pricing-trial h2,.kw-pricing .pricing-notes h2,.kw-pricing .pricing-faq h2,.kw-pricing .comparison-heading h2{letter-spacing:-.02em;text-wrap:balance}

/* Plans: open columns on Ink, a Graphite rule over Story and the Ember rule over Film. */
.kw-pricing .plan{border-top:2px solid var(--surface-2)}
.kw-pricing .plan.film{border-top-color:var(--accent)}
.kw-pricing .plan h2{letter-spacing:-.02em}
.kw-pricing .plan-title>span{border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface);color:var(--text-2);padding:5px 9px}
.kw-pricing .price strong{color:var(--text)}
.kw-pricing .credits{color:var(--accent)}
.kw-pricing .plan li{border-bottom-color:var(--line)}
.kw-pricing .plan li:before{content:'';top:21px;width:10px;height:1px;background:var(--accent)}
.kw-pricing .plan>h3{color:var(--text-2)}

/* Credit capacity: a Graphite band across the full width, the table on Ink inside it. */
.kw-pricing .comparison{position:relative;isolation:isolate;border-bottom:0;margin-top:clamp(20px,3vw,40px)}
.kw-pricing .comparison:before{content:'';position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:var(--surface-2);border-block:1px solid var(--line)}
.kw-pricing .comparison-scroll{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg)}
.kw-pricing .comparison th,.kw-pricing .comparison td{border-bottom-color:var(--line)}
.kw-pricing .comparison tbody tr:last-child>*{border-bottom:0}
.kw-pricing .comparison thead th,.kw-pricing .comparison .capacity-group th{color:var(--accent)}
.kw-pricing .comparison-hint{color:var(--accent)}
.kw-pricing .comparison>.usage-assumptions,.kw-pricing .usage-assumptions{color:var(--muted)}

.kw-pricing .pricing-notes{border-bottom-color:var(--line)}
.kw-pricing .faq summary{cursor:pointer;font:500 17px 'Barlow',Arial,sans-serif;color:var(--text)}
.kw-pricing .faq summary:hover{color:var(--accent)}
.kw-pricing .faq summary::marker{color:var(--accent)}
.kw-pricing .faq details p{color:var(--text-2);font-size:14px}

/* Closing: the pier photograph with one centered glass card, as on the home page.
   Extra room above the card keeps Lena's and Elias's faces clear of it. */
.kw-pricing .kw-closing{padding-block:clamp(160px,18vw,260px) clamp(72px,10vw,140px)}
.kw-pricing .kw-closing h2{margin:16px 0 14px}
.kw-pricing .kw-closing p{color:var(--text-2)}
.kw-pricing .kw-closing .eyebrow{display:flex}
.kw-pricing .kw-closing .kw-actions{display:flex}

@media(max-width:760px){
 .kw-pricing .pricing-intro{padding-block:24px 28px}
 .kw-pricing .pricing-intro:before,.kw-pricing .pricing-intro:after{background-position:42% 46%}
 .kw-pricing .comparison-scroll{border-radius:10px}
}

/* ---- Log in ----------------------------------------------------------- */

.kw-login{--login-input:var(--input)}
.kw-login .login-header>a:last-child{color:var(--text-2)}
.kw-login .login-header>a:last-child:hover{color:var(--accent)}
.kw-login .login-header>a:last-child svg{color:var(--accent)}
/* Flat Ink scrim over the photograph instead of a gradient. */
.kw-login .login-context{background:var(--bg)}
.kw-login .login-context:after{inset:0;background:rgba(17,19,21,.38)}
.kw-login .login-context-copy{z-index:2;color:var(--text)}
.kw-login .login-context h1{letter-spacing:-.02em}
.kw-login .login-context h1 .kw-accent{color:var(--accent)}
.kw-login .login-context p{color:var(--text)}
.kw-login .login-form-panel{background:var(--bg)}
.kw-login .login-form-panel h2{letter-spacing:-.02em}
.kw-login .login-intro{color:var(--text-2)}

.kw-login .auth-provider{border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface);color:var(--text)}
.kw-login .auth-provider:hover:not(:disabled){background:var(--surface-2);border-color:var(--text-2);color:var(--text)}
.kw-login .auth-provider:disabled{opacity:1;color:var(--muted);border-color:var(--line)}
.kw-login .login-divider{color:var(--muted)}

.kw-login .login-form-panel label{color:var(--text-2)}
.kw-login .login-form-panel input{border:1px solid var(--line);border-radius:var(--radius-control);background:var(--login-input);color:var(--text)}
.kw-login .login-form-panel input:hover{border-color:var(--line-strong)}
.kw-login .login-form-panel input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--line-strong)}
.kw-login .login-form-panel input:user-invalid{border-color:var(--danger)}
.kw-login .login-form-panel input:-webkit-autofill{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 50px var(--login-input) inset}
.kw-login .password-field button{color:var(--text-2)}
.kw-login .password-field button:hover{color:var(--accent)}

/* Sign in: solid Ember with Ink text in every state (button contrast rule). */
.kw-login .login-submit{border:1px solid var(--accent);border-radius:var(--radius-control);background:var(--accent);color:var(--on-accent)}
.kw-login .login-submit:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent-soft);color:var(--on-accent)}
.kw-login .login-submit:active:not(:disabled){background:var(--accent-pressed);border-color:var(--accent-pressed)}
.kw-login .login-submit>.login-submit-arrow{color:var(--on-accent)}
.kw-login .login-submit:disabled{background:var(--surface-2);border-color:var(--line-strong);color:var(--text-2)}
.kw-login .login-submit:disabled>.login-submit-arrow{color:var(--text-2)}

.kw-login .password-help button:hover,.kw-login .login-account-note button:hover,.kw-login .login-footer button:hover{color:var(--accent)}
.kw-login .login-account-note button{color:var(--text-2)}
.kw-login .login-status{color:var(--text-2)}
.kw-login .login-status[data-state=error]{color:var(--danger)}
.kw-login .login-footer{color:var(--line-strong)}
.kw-login dialog{border:1px solid var(--line);border-radius:var(--radius-dialog);background:var(--bg-soft);color:var(--text)}