/* NotchNook additions ported from getnotchnook.com (4 Nov 2026) in lo.cafe's own system:
   lilac headings, translucent purple panels, cream controls. Reuses products.css components. */

/* Classic vs Pro comparison on /notchnook/ */
.nn-compare{margin:48px 0 0}
.nn-compare-title{font-size:16px;line-height:1.5;font-weight:700;color:#fff;text-shadow:0 0 10px #d9a4f970;margin:0 0 16px}
.nn-compare-card{padding:8px 24px 16px;border-radius:24px;background:#a39fcd21}
.nn-compare-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;line-height:1.5}
.nn-compare-table th,.nn-compare-table td{padding:10px 0;border-top:1px solid #edd2fc1f;vertical-align:middle}
.nn-compare-table thead th,.nn-compare-table thead td{border-top:0;padding:10px 0 8px}
.nn-compare-table th[scope=row]{text-align:left;font-weight:400;color:#EDD2FC;padding-right:12px;overflow-wrap:break-word;hyphens:auto}
.nn-compare-table tr>:first-child{width:auto}
.nn-compare-table td,.nn-compare-table th[scope=col]{width:96px;text-align:center}
.nn-compare-table .nn-pro-col{background:#d9a4f912}
.nn-compare-table thead .nn-pro-col{border-radius:12px 12px 0 0}
.nn-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:5px;background:#9d8bce;color:#fff}
.nn-badge-pro{background:#EDD2FC;color:#33253f;box-shadow:0 0 10px #d9a4f966}
.nn-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;color:#EDD2FC;background:#edd2fc1f}
.nn-mark-pro{color:#fff;background:#d9a4f938;box-shadow:0 0 6px #d9a4f955}
.nn-none{color:#edd2fc59}
.nn-word{font-size:12px;font-weight:700;color:#edd2fc99}
.nn-word-pro{color:#fff;text-shadow:0 0 6px #d9a4f980}
.nn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nn-compare-more{margin:0}
.nn-compare-table .nn-quiet-head th,.nn-compare-table .nn-quiet-head td{padding:0;border:0;height:0}
.nn-compare-more>summary{list-style:none;display:flex;justify-content:center;align-items:center;gap:6px;margin:4px auto 0;padding:10px 0;color:#FADFA9;cursor:pointer;text-decoration:underline;text-underline-offset:4px;border-top:1px solid #edd2fc1f}
.nn-compare-more>summary::-webkit-details-marker{display:none}
.nn-compare-more>summary:hover{color:#fff;text-shadow:0 0 6px #fadfa980}
.nn-compare-more>summary:focus-visible{outline:2px solid #FADFA9;outline-offset:4px;border-radius:8px}
.nn-compare-more .nn-less,.nn-compare-more[open] .nn-more{display:none}
.nn-compare-more[open] .nn-less{display:inline}
.nn-caret{display:inline-block;transition:transform .18s ease;text-decoration:none}
.nn-compare-more[open] .nn-caret{transform:rotate(180deg)}
.nn-compare-more[open]>summary{order:2}
.nn-compare-more[open]{display:flex;flex-direction:column}
.nn-compare-note{margin:12px 0 0;padding-top:12px;border-top:1px solid #edd2fc1f;font-size:12px;line-height:1.6;color:#edd2fc99;text-align:center;text-wrap:balance}

/* Purchase button while its checkout opens */
.plan-button[aria-busy=true]{cursor:progress;opacity:.75}

/* Pages Stripe returns to */
.nn-return .product-hero-enter{margin-top:32px}
.nn-return .product-heading h1{font-size:20px}
.nn-return-download{margin:28px 0 0}
.nn-return .plan-actions{display:flex;flex-wrap:wrap;justify-content:flex-start}
.nn-return-download>p{margin:0;color:#EDD2FC}
.nn-return-download .plan-actions{justify-content:flex-start;margin-top:16px}
.nn-return-download .product-requirement{text-align:left;margin:16px 0 0}
.nn-return>.product-hero-enter>.plan-actions{justify-content:flex-start}
.nn-steps{margin:40px 0 0}
.nn-steps h2{font-size:16px;line-height:1.5;color:#fff;text-shadow:0 0 10px #d9a4f970;margin:0 0 16px}
.nn-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:nn-step}
.nn-steps li{counter-increment:nn-step;padding:16px 18px;border-radius:24px;background:#a39fcd21}
.nn-steps li::before{content:counter(nn-step);display:grid;place-items:center;width:28px;height:28px;border:2px solid #FADFA9;border-radius:50%;color:#FADFA9;font-weight:700;font-size:13px;margin-bottom:10px}
.nn-steps h3{font-size:14px;line-height:1.5;color:#EDD2FC;margin:0 0 4px}
.nn-steps p{font-size:13px;line-height:1.55;color:#edd2fcb3;margin:0}
.nn-return-more{margin-top:32px}
.nn-return .faq-card .faq-button{white-space:normal;height:auto;min-height:40px;max-width:100%;flex:0 1 auto;text-align:center;overflow-wrap:anywhere}
.nn-return .plan-button{white-space:normal;height:auto;min-height:40px;max-width:100%;text-align:center}

@media(max-width:640px){
 .nn-compare-card{padding:4px 14px 12px}
 .nn-compare-table{font-size:13px}
 .nn-compare-table td,.nn-compare-table th[scope=col]{width:64px}
 .nn-steps ol{grid-template-columns:1fr}
 .nn-return .product-hero-enter{margin-top:24px}
}
@media(max-width:360px){.nn-compare-table td,.nn-compare-table th[scope=col]{width:54px}.nn-badge{font-size:10px;padding:1px 5px}}
@media(prefers-reduced-motion:reduce){.nn-caret{transition:none}}
body:has(.nn-return){min-height:100vh}
.nn-return .plan-actions .plan-button{flex:0 1 auto;width:auto}
/* Return pages: the action sits under its text on every width */
.nn-return .faq-answer{flex-direction:column;align-items:flex-start;gap:12px}
.nn-return .faq-answer p{flex-basis:auto}
.nn-return .faq-card .faq-button{align-self:flex-start}
/* Pro film (4 Nov 2026 recording) is 20:9; show it whole at every width */
.notchnook-layout .nn-pro-film{aspect-ratio:20/9}
.notchnook-layout .nn-pro-film video{object-fit:cover}
/* Service pages (download, contribution, Pro license resend) */
.nn-service .nn-form-card{margin:28px 0 0;padding:24px 26px;max-width:560px}
.nn-form{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.nn-form[hidden],.nn-result[hidden]{display:none}
.nn-form fieldset{border:0;margin:0;padding:0;min-width:0;width:100%}
.nn-form legend,.nn-form label[for]{font-size:14px;line-height:1.5;font-weight:700;color:#EDD2FC;padding:0;margin:0 0 10px}
.nn-amounts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.nn-chip{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;border:2px solid #a39fcd59;border-radius:12px;color:#EDD2FC;font:500 14px/20px 'JetBrains Mono',monospace;cursor:pointer;text-align:center}
.nn-chip:last-child{grid-column:1/-1}
.nn-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.nn-chip:has(input:checked){border-color:#FADFA9;color:#FADFA9;box-shadow:0 0 12px #fadfa926}
.nn-chip:has(input:focus-visible){outline:2px solid #FADFA9;outline-offset:2px}
.nn-custom{display:none;width:100%}
.nn-form:has(input[value="other"]:checked) .nn-custom{display:block}
.nn-money{position:relative}
.nn-money span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#edd2fc99;font:500 14px 'JetBrains Mono',monospace;pointer-events:none}
.nn-form input[type="number"],.nn-form input[type="email"]{display:block;box-sizing:border-box;width:100%;min-height:48px;padding:10px 14px;border:2px solid #a39fcd59;border-radius:12px;background:#12081f66;color:#fff;font:16px/1.4 inherit}
.nn-form input[type="number"]:focus,.nn-form input[type="email"]:focus{outline:none;border-color:#FADFA9;box-shadow:0 0 12px #fadfa926}
.nn-form input[aria-invalid="true"]{border-color:#ffb3d9}
.nn-form .nn-money input{padding-left:50px}
.nn-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.nn-form label[for="recovery-email"]{margin:0}
.nn-form .plan-button{gap:8px;margin-top:4px;white-space:normal;height:auto;min-height:40px;max-width:100%;text-align:center}
.nn-form[aria-busy="true"] .plan-button{opacity:.7;pointer-events:none}
.nn-form-note{font-size:13px!important;line-height:1.5;color:#edd2fc99!important;margin:0}
.nn-form-alert{font-size:14px!important;line-height:1.5;color:#ffd6f6!important;margin:0}
.nn-form-status{font-size:14px!important;color:#EDD2FC!important;margin:0;padding:10px 14px;border-radius:12px;background:#a39fcd21}
.nn-result{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.nn-result h2{margin:0}
.nn-service .nn-return-more{max-width:none}
@media(max-width:640px){.nn-service .nn-form-card{padding:22px 18px}.nn-amounts{gap:8px}}