/* Owner brief: rounded surfaces, gradients, payment as the primary focus. */
:root {
  --bg: #f1eef3;
  --surface-sunk: #eeeaf0;
  --muted: #665d6b;
  --line: #ddd5e0;
  --line-strong: #bdb0c2;
  --accent-soft: #f3e3e9;
  --signal: #fb775f;
}
body { background: var(--bg); }
.wordmark { font-weight: 700; letter-spacing: -.04em; }
.wordmark img { border-radius: 11px; }
.top { background: transparent; }
.account-link { padding: 0 18px; min-height: 43px; border-radius: 30px; background: #e7e0e9; }
.account-link:hover { background: #ddd2e0; text-decoration: none; }

/* Quiet introduction; the purchase panel is larger and more contrasted. */
.fast-layout { grid-template-columns: .85fr 1.15fr; gap: 24px; }
.fast-intro { position: relative; overflow: hidden; padding: 40px; border-radius: 30px; background: #e6dfe9; color: #302435; }
.fast-intro h1 { font-size: 48px; font-weight: 700; letter-spacing: -.05em; }
.fast-intro > p { color: #302435; }
.fast-intro .compatible { color: #63546a; }
.fast-intro .fast-desktop-note { color: #615366; }
.fast-intro .fast-desktop-note a { color: #302435; }
.hero-happ-logo { border-radius: 21px; }
.fast-buy {
  padding: 30px;
  border: 2px solid transparent;
  border-radius: 30px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #c8a9cf, #fa8f78 64%, #f3bea9) border-box; /* taste-skill-ignore: owner requested gradients focused on purchase. */
}
.purchase-heading { color: #302435; font-weight: 650; }
.fast-buy .plan { border-radius: 12px; background: #f0ecf2; transition: background .15s; }
.fast-buy .plan:hover { background: #e7dfe9; }
.fast-buy .plan[aria-pressed=true] { background: #52334c; color: #fff; }
.fast-buy .plan[aria-pressed=true] .plan__term { color: #fff; }
.fast-buy .price-reading strong { color: #302435; letter-spacing: -.05em; }
.fast-buy .field input { background: #f8f6f9; border: 1px solid #dfd7e3; border-radius: 13px; color: #302435; transition: border-color .15s; }
.fast-buy .field input:hover { border-color: #bea6c3; }
.fast-buy .field input:focus { outline: 2px solid #a7597c; outline-offset: 2px; background: #fff; }
.fast-buy .ck-pass__eye { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.fast-buy .ck-pass input { padding-right: 50px; }
.fast-buy .pay { border-radius: 11px; background: #f0ecf2; box-shadow: none; } /* taste-skill-ignore: real form control; removes inherited shadow, adds none. */
.fast-buy .pay[aria-pressed=true] { background: #e7dbe6; color: #38283d; box-shadow: none; } /* taste-skill-ignore: real form control; removes inherited inset shadow. */
.fast-buy [data-submit], .btn--coral {
  border-radius: 15px;
  background: linear-gradient(105deg, #ff895a, #fa7168 55%, #e786b0); /* taste-skill-ignore: owner requested gradient primary purchase action. */
  color: #291c2b;
  transition: filter .18s, transform .18s;
}
.fast-buy [data-submit]:hover, .btn--coral:hover { background: linear-gradient(105deg, #ff956d, #fc8378 55%, #eb9cbe); color: #291c2b; filter: saturate(1.08); } /* taste-skill-ignore: owner requested primary action gradient hover. */
.fast-buy [data-submit]:active, .btn--coral:active { transform: scale(.985); }
.fast-buy [data-submit] { position: relative; }
.fast-buy [data-submit]::after { content: '↗'; position: absolute; right: 23px; font-size: 21px; line-height: 1; font-weight: 400; }
.login-help { color: #706574; }
.fast-buy .buy__fine, .fast-buy .buy__fine a { color: #6b626f; }
.reassurance { padding-top: 17px; padding-bottom: 20px; gap: 16px; }
.reassurance > p { display: flex; align-items: center; gap: 9px; }
.reassurance > p::before { content: '✓'; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e2d6e4; color: #543650; font-size: 14px; font-weight: 700; flex: none; } /* taste-skill-ignore: monochrome check symbol for real payment/access facts, not an emoji illustration. */
.reassurance > a { color: #66556b; font-weight: 500; }

/* One meaningful surface per section; questions belong to one connected sheet. */
.simple-section { padding: 12px 0 0; }
.install-details { padding: 24px 28px; border-radius: 26px; background: #f0dfd8; }
.install-details > summary { gap: 18px; }
.install-details > summary strong { color: #45312e; }
.install-details > summary > span:first-child > span { color: #735e59; }
.install-details > summary > span:last-child { display: grid; place-items: center; width: 39px; height: 39px; flex: none; border-radius: 50%; background: #dfc9c0; color: #634239; }
.install-details .device-tabs button { border-radius: 13px; background: #faf4f0; }
.install-details .device-tabs button[aria-selected=true] { background: #59424b; }
.install-details .device-panel { border-radius: 18px; background: #faf5f2; }
.install-details .device-actions .btn { border-radius: 14px; }
.simple-faq { padding: 24px 0; }
.subscription-panel { padding: 38px; gap: 6%; border-radius: 30px; background: #e3dae8; }
.subscription-summary h2 { margin: 0 0 20px; color: #34253d; font-weight: 650; letter-spacing: -.04em; }
.subscription-summary > p { color: #5a4b62; }
.subscription-summary > a { color: #52395c; font-size: 14px; }
.subscription-facts { margin: 26px 0; }
.subscription-facts > div { margin: 0 0 18px; }
.subscription-facts dt { color: #34253d; font-size: 18px; font-weight: 650; }
.subscription-facts dd { margin: 3px 0 0; color: #61516a; font-size: 14px; line-height: 1.5; }
.simple-faq .faq-list { padding: 8px 22px; border-radius: 22px; background: #f8f5fa; }
.simple-faq .faq-list details { margin: 0; padding: 21px 0; border-radius: 0; background: transparent; }
.simple-faq .faq-list details + details { border-top: 1px solid #e3dbe7; } /* taste-skill-ignore: semantic row separation inside the single FAQ sheet requested by owner; no standalone outlined cards. */
.simple-faq .faq-list details[open] { background: transparent; }
.simple-faq .faq-list summary { color: #392c42; font-size: 16px; line-height: 1.45; }
.simple-faq .faq-list summary > span { color: #8c6d94; }
.simple-faq .faq-list p { color: #625469; font-size: 15px; line-height: 1.65; }
.simple-guides { padding: 0 0 48px; }
.guides-panel { padding: 32px 38px; border-radius: 30px; background: #e7e4e9; }
.simple-guides-heading { margin-bottom: 22px; }
.simple-guides h2 { color: #3d3344; font-size: 27px; font-weight: 650; }
.simple-guides-heading > a { color: #6d5d76; }
.simple-guide-links { gap: 12px; }
.simple-guide-links > a { align-items: center; padding: 20px; border-radius: 18px; background: #f5f3f7; color: #4e3c5a; transition: background .18s; }
.simple-guide-links > a:hover { background: #fff; }
.guide-label { display: block; }
.guide-label strong { display: block; font-weight: 550; }
.guide-label small { display: block; margin-top: 5px; color: #7a6f80; font-size: 13px; line-height: 1.45; }
.bottom-buy { margin-top: 24px; padding-inline: 24px; border-radius: 15px; }
.compact-footer { margin-top: 0; border-radius: 30px 30px 0 0; background: #342b3a; }
.compact-footer .disclaimer, .compact-footer .footer-domain { color: #d9cfdd; }

/* Existing article, key and post-payment skin; contracts stay in checkout JS. */
.article-aside, .article-related, .prose .note { border-radius: 22px; background: #e7dfea; }
.article-aside .btn, .key-workspace .btn { border-radius: 14px; }
.article-video { border-radius: 22px; background: #e7dfea; }
.key-workspace .kp { border-radius: 24px; }
.key-workspace .field input { border-radius: 13px; }
.ck__sheet { border-radius: 24px; }
.ck .btn, .ck-btn { border-radius: 13px; }
.ck__backdrop { background: #1a101b88; }
.ck-apple-dialog { border-radius: 24px; }
.ck-apple-watch, .ck-apple-download, .ck-apple-return { border-radius: 13px; }
.ck-apple-watch, .ck-apple-download { background: linear-gradient(105deg, #ff8552, #f076a4) !important; color: #211720 !important; } /* taste-skill-ignore: owner requested rounded gradient instruction CTA. */
.new-site .ctg { border-radius: 18px; background: #f5e7ef; }
.new-site .ctg .ctg-go { border-radius: 24px; }
.new-site .ck-copyrow__input, .new-site .ck-copyrow__line > .ck-copy { border-radius: 12px; }
.ck-plans .plan { border-radius: 12px; }
.ck-pill { border-radius: 18px; }

@media (max-width: 850px) {
  .fast-intro { padding: 28px; }
  .fast-intro h1 { font-size: 39px; }
  .fast-buy { padding: 23px; }
  .fast-layout { gap: 18px; }
  .subscription-panel { padding: 28px; grid-template-columns: 1fr; gap: 26px; }
  .subscription-summary h2 br { display: none; }
  .subscription-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
  .subscription-facts > div { margin: 0; }
  .guides-panel { padding: 28px; }
}
@media (max-width: 600px) {
  .top { padding: 11px 0; }
  .wordmark img { border-radius: 10px; }
  .account-link { padding: 0 13px; min-height: 39px; font-size: 13px; }
  .fast-hero { padding-top: 4px; }
  .fast-layout { gap: 12px; }
  .fast-intro { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 3px 12px; padding: 12px 16px; border-radius: 22px; }
  .fast-intro .hero-happ-logo { display: block; grid-column: 1; grid-row: 1 / 3; width: 42px; height: 42px; margin: 0; border-radius: 12px; }
  .fast-intro h1 { grid-column: 2; margin: 0; font-size: 25px; line-height: 1.12; letter-spacing: -.045em; }
  .fast-intro > p { grid-column: 2; margin: 0; font-size: 13px; line-height: 1.4; }
  .fast-intro .compatible { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; line-height: 1.3; }
  .fast-intro .fast-desktop-note { display: none; }
  .fast-buy { padding: 14px; border-radius: 23px; }
  .fast-buy .purchase-heading { margin-bottom: 8px; }
  .fast-buy .plans { gap: 5px; }
  .fast-buy .plan { border-radius: 10px; }
  .fast-buy .field input { border-radius: 11px; }
  .fast-buy .pay { border-radius: 10px; }
  .fast-buy [data-submit] { border-radius: 13px; }
  .reassurance { padding-top: 6px; padding-bottom: 11px; gap: 6px; font-size: 13px; }
  .reassurance > p::before { width: 20px; height: 20px; font-size: 12px; }
  .install-details { padding: 20px 18px; border-radius: 23px; }
  .install-details > summary > span:last-child { width: 32px; height: 32px; font-size: 26px; }
  .simple-faq { padding: 18px 0; }
  .subscription-panel { display: block; padding: 22px 18px 18px; border-radius: 25px; }
  .subscription-summary h2 { margin-bottom: 15px; font-size: 26px; line-height: 1.15; }
  .subscription-summary > p { font-size: 15px; line-height: 1.65; }
  .subscription-facts { display: block; margin: 23px 0; }
  .subscription-facts > div { margin-bottom: 16px; }
  .subscription-facts dt { font-size: 17px; }
  .subscription-facts dd { font-size: 14px; }
  .simple-faq .faq-list { margin-top: 26px; padding: 2px 16px; border-radius: 18px; }
  .simple-faq .faq-list details { padding: 18px 0; }
  .simple-faq .faq-list summary { font-size: 15px; gap: 16px; }
  .simple-faq .faq-list p { font-size: 14px; }
  .simple-guides { padding-bottom: 28px; }
  .guides-panel { padding: 24px 18px; border-radius: 25px; }
  .simple-guides h2 { font-size: 25px; line-height: 1.2; margin-bottom: 10px; }
  .simple-guides-heading { margin-bottom: 22px; }
  .simple-guide-links { gap: 9px; }
  .simple-guide-links > a { padding: 17px 16px; border-radius: 14px; font-size: 15px; }
  .guide-label small { font-size: 13px; }
  .bottom-buy { width: 100%; justify-content: center; margin-top: 22px; }
  .compact-footer { border-radius: 24px 24px 0 0; }
  .ck__sheet { border-radius: 24px 24px 0 0; }
  .key-workspace .kp { border-radius: 22px; }
  .article-aside, .article-related, .article-video { border-radius: 18px; }
  .ck-apple-dialog { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .simple-guide-links > a, .fast-buy [data-submit], .fast-buy .plan { transition: none; }
}