/* CHARM website theme. Loaded after site.css, story.css and pricing-visuals.css.
   Fonts are self-hosted (SIL Open Font License, see assets/fonts/OFL-*.txt). */
@font-face{font-family:"Instrument Sans";src:url(/charm/assets/fonts/InstrumentSans-latin.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/charm/assets/fonts/InstrumentSerif-Italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/charm/assets/fonts/InstrumentSerif-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --paper:#faf8f3;--paper-2:#f3f0e8;--card:#fff;
  --ink:#1b1c19;--text:#3a3d36;--muted:#62665d;--soft:#878a7f;
  --line:#e7e3d9;--line-strong:#d4cfc2;
  --accent:#c0634a;--accent-ink:#9f4c36;--accent-wash:#f7e4da;
  --sage:#5f7555;--sage-wash:#e3eadc;--blue:#56658a;--blue-wash:#e6e9f2;
  --dark:#1e201c;
  --radius:22px;
  --shadow-sm:0 1px 2px #1b1c190d,0 3px 10px #1b1c190a;
  --shadow:0 2px 6px #1b1c190f,0 22px 44px -18px #1b1c1933;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
}

.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}

/* Type and colour */
body{font-family:var(--sans);background:var(--paper);color:var(--ink);letter-spacing:-.004em;text-rendering:optimizeLegibility}
p{color:var(--muted)}
h1,h2,h3{font-weight:600;letter-spacing:-.034em;color:var(--ink)}
h1{line-height:.98}
h2{line-height:1.03}
h1 em,h2 em,h3 em,.story-intro h1 span,.hero h1 span{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.012em;color:var(--accent)}
h1 em,h2 em,.story-intro h1 span{font-size:1.06em;line-height:.9}
.eyebrow{font-size:11.5px;letter-spacing:.15em;font-weight:600;color:var(--soft)}
small,.fine{color:var(--soft)}
::selection{background:#f2cfc0;color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Navigation */
.site-nav{background:rgba(250,248,243,.86);border-bottom-color:#1b1c1912}
.brand{font-weight:650;letter-spacing:.16em;color:var(--ink)}
.brand img{border-radius:10px}
.nav-links{font-size:14px}
.nav-links a{color:var(--text);font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--accent-ink)}

/* Buttons and links */
.button{background:var(--dark);font-weight:550;letter-spacing:-.005em;box-shadow:inset 0 1px 0 #ffffff1c,0 8px 18px -10px #1e201c99;transition:background .2s,transform .2s,box-shadow .2s}
.button:hover{background:#34372f;transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff1c,0 12px 24px -12px #1e201ca6}
.button.light{background:var(--card);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.button.light:hover{background:#fff;border-color:#b9b4a6}
.text-link{font-weight:550;color:var(--ink);border-bottom:1.5px solid currentColor;transition:color .2s}
.text-link:hover{color:var(--accent-ink)}

/* Hero */
.hero-news{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:5px 14px 5px 5px;margin-bottom:28px;border:1px solid var(--line);border-radius:100px;background:#ffffffc4;box-shadow:var(--shadow-sm);font-size:13px;line-height:1.35;color:var(--text);transition:border-color .2s,color .2s,transform .2s}
.hero-news:hover{border-color:var(--line-strong);color:var(--ink);transform:translateY(-1px)}
.hero-news-tag{flex:none;padding:4px 10px;border-radius:100px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.hero-news-arrow{color:var(--soft)}
.hero-trust{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13.5px;color:var(--text)}
.hero-trust li{display:flex;align-items:center;gap:8px}
.hero-trust svg{flex:none;width:17px;height:17px;color:var(--sage)}
.story-intro .chapter-body{color:var(--muted)}
.story-scroll{color:var(--soft)}

/* Chapters */
.story-chapter .eyebrow{display:flex;align-items:center;gap:10px}
.story-chapter .eyebrow b{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 9px;border-radius:100px;background:var(--act-wash,var(--paper-2));color:var(--act-ink,var(--accent-ink));font-size:11.5px;font-weight:650;letter-spacing:.03em}
.story-choice{background:#ffffffd9;border-color:var(--line);color:var(--text);font-weight:500;box-shadow:var(--shadow-sm)}
.story-choice:hover{background:#fff;border-color:var(--line-strong)}
.story-choice[aria-pressed=true]{background:var(--dark);border-color:var(--dark);color:#fff;box-shadow:0 10px 20px -12px #1e201cb3}
.story-packs .pack{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-sm)}
.choice-hint{color:var(--soft)}

/* Preview controls */
.live-caption .style-switch{background:#ece9e0}
.live-column .live-caption{color:var(--soft)}

/* On your screen */
.desktop-scene{background:linear-gradient(180deg,var(--paper) 0,#eef1ec 22%,#e6ebe7 100%)}
.desktop-scene-copy .eyebrow{color:#5c6e6b}
.desktop-scene-copy p{color:#55625f}
.desktop-frame{padding:10px;border-radius:26px;background:#fbfbf8;box-shadow:0 44px 90px -36px #2c3d3c66,0 12px 30px -14px #2c3d3c33}
.desktop-frame-screen{border-radius:17px}
.desktop-frame-screen::after{content:"";position:absolute;inset:0 0 auto;height:24px;z-index:2;background:#ffffff6b;border-bottom:1px solid #ffffff8c;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.desktop-window{top:20%;border-radius:14px}

/* Sections added in the refresh */
.section-head{max-width:640px;margin-bottom:46px}
.section-head h2{font-size:clamp(40px,5vw,66px)}
.section-head p{margin-top:18px;font-size:18px;line-height:1.6;max-width:470px}
.features{padding-top:128px;padding-bottom:40px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 30px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.feature-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:22px;border-radius:15px;background:var(--accent-wash);color:var(--accent-ink)}
.feature-icon svg{width:22px;height:22px}
.feature:nth-child(3n+2) .feature-icon{background:var(--sage-wash);color:var(--sage)}
.feature:nth-child(3n) .feature-icon{background:var(--blue-wash);color:var(--blue)}
.feature h3{font-size:21px;letter-spacing:-.02em;line-height:1.2}
.feature p{margin-top:10px;font-size:15px;line-height:1.6}

.section.faq{padding-top:36px;padding-bottom:72px}
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(30px,6vw,90px);align-items:start}
.faq .section-head{position:sticky;top:110px;margin-bottom:0}
.faq-list{display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:0 24px;box-shadow:var(--shadow-sm);transition:border-color .2s}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 0;font-size:17.5px;font-weight:550;letter-spacing:-.012em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq details p{padding:0 0 22px;margin-top:-4px;line-height:1.7;font-size:15.5px}
.faq details a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Pricing */
.pricing-header h2{font-size:clamp(40px,5vw,66px)}
.price-card{background:var(--card);border-color:var(--line);border-radius:28px;box-shadow:var(--shadow-sm)}
.price-card.pro{background:linear-gradient(180deg,#f2f4ee,#e8ede3);border-color:#dde3d4;box-shadow:var(--shadow)}
.price-card h3{font-weight:650;letter-spacing:.01em}
.price{font-weight:600;color:var(--ink)}
.price-card li{color:var(--text)}
.price-card li:before{color:var(--sage)}
.pricing-note,.pricing-preview-note{color:var(--soft)}

/* Newsletter and footer */
.newsletter{background:var(--paper);border-top:0;padding:40px 0 80px}
.wrap.newsletter-inner{padding:clamp(34px,5vw,58px) clamp(26px,5vw,62px);border-radius:32px;background:linear-gradient(118deg,#f7e3d9 0%,#f4ede3 48%,#e5ebdf 100%);border:1px solid #eedfd5}
.newsletter h2{font-size:clamp(34px,4vw,50px)}
.newsletter p{color:#5d5a52}
.inline-form input{background:#fffdf9;border-color:#e2d6cb}
.check-label{color:#6c675f}

.site-footer{background:var(--dark);color:#e7e4db;padding:66px 0 30px}
.site-footer .brand{color:#fff}
.site-footer .fine{color:#a9a69c}
.site-footer .fine a{color:#e7e4db;text-decoration:underline;text-underline-offset:3px}
.footer-tagline{margin-top:16px;max-width:300px;color:#bebab0;font-size:15px;line-height:1.6}
.footer-top h3{color:#9c998f;font-weight:600}
.footer-top a:not(.brand){color:#d9d6cc;font-size:14px;transition:color .2s}
.footer-top a:not(.brand):hover{color:#fff}
.footer-top a.social-link{display:inline-flex;align-items:center;gap:10px;margin:24px 0 18px;padding:9px 16px 9px 10px;border:1px solid #ffffff2b;border-radius:100px;color:#fff;font-size:14px;transition:background .2s,border-color .2s}
.footer-top a.social-link:hover{background:#ffffff14;border-color:#ffffff47}
.social-link svg{flex:none;width:20px;height:20px}
.footer-bottom{border-top-color:#ffffff1f;color:#8e8b81}
.footer-bottom button{color:#b3b0a6}

/* Supporting pages */
.page-hero{padding:100px 0 50px}
.page-hero h1{font-size:clamp(50px,7.4vw,92px)}
.page-hero p{font-size:20px;line-height:1.55;color:var(--muted)}
.page-content{font-size:16.5px}
.page-content h2{font-size:clamp(26px,3vw,32px);letter-spacing:-.025em;margin:52px 0 14px}
.page-content p,.page-content ul,.page-content ol{color:var(--text)}
.page-content a:not(.button):not(.action-card){color:var(--ink);text-decoration-thickness:1px}
.action-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 48px}
.page-content a.action-card{display:block;padding:24px 22px 26px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.page-content a.action-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.action-card .feature-icon{margin-bottom:18px}
.action-card h3{font-size:19px;letter-spacing:-.02em}
.action-card p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.notice{background:var(--accent-wash);color:#7a4a3b;border-radius:16px}
.card{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-sm)}
.update{border-bottom:0;margin-bottom:14px;padding:26px 28px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm)}
.press-item{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.form input,.form select,.form textarea{border-color:var(--line-strong);border-radius:14px}
.form label{color:var(--text);font-size:13px}

/* Dialogs and consent */
dialog{background:var(--paper);border-color:var(--line);border-radius:28px;box-shadow:0 40px 90px -30px #1b1c1966}
.consent-bar{border-color:var(--line);box-shadow:var(--shadow)}

/* Where to get CHARM: Microsoft Store badge, coming soon and the Mac panel */
.offer-state{display:inline-block;font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.offer-state.soon{color:var(--muted)}
.price-card .store-badge{display:block;width:min(100%,214px);margin:0 auto;border-radius:9px;transition:transform .2s}
.price-card .store-badge:hover{transform:translateY(-1px)}
.price-card .store-badge img{display:block;width:100%;height:auto}
.offer-note{font-size:12px;color:var(--soft);text-align:center;margin-top:12px}
/* An edition sold on the Microsoft Store for Windows and here for Mac: a switch between the two, like the hero's style switch. */
.platform-switch{display:flex;width:max-content;gap:2px;margin:0 0 16px;padding:3px;border-radius:20px;background:#ece9e0}
.platform-switch button{height:30px;padding:0 14px;border:0;border-radius:15px;background:none;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.platform-switch button:hover{background:#faf9f680;color:var(--ink)}
.platform-switch button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 4px #2829261f}
.platform-switch button:focus-visible{outline:2px solid #7c9170;outline-offset:1px}
.offer-note.mac-note,.site-option .offer-note,.offer-windows .offer-note{line-height:1.55;text-wrap:pretty}
/* Store versions first; this website's checkout as a labelled second option, or the way to get it early. */
.offer-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.site-option{display:grid;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.site-option-title{font-size:13px;font-weight:550;color:var(--text);text-align:center}
.offer-note a,.mac-open-help a{text-decoration:underline;text-underline-offset:3px}
/* CHARM PRO's Microsoft Store price for the visitor's country, and the country picker under it. */
.store-region{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin-top:12px;font-size:12px;color:var(--soft)}
.store-region select{field-sizing:content;max-width:100%;padding:2px 18px 3px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2373766d' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none}
.store-region select:hover{border-bottom-color:var(--ink)}
.store-region select:focus-visible{outline:2px solid #7c9170;outline-offset:3px;border-radius:2px}
.platform-soon{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:20px;padding:clamp(28px,4vw,44px);background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm)}
.platform-soon .eyebrow{margin-bottom:14px}
.platform-soon h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em}
.platform-soon p{margin-top:12px;color:var(--muted);font-size:14px;max-width:420px}
.platform-soon .check-label{margin-top:12px}
.platform-soon .inline-form .button{flex:none;white-space:nowrap}
@media(max-width:800px){.platform-soon{grid-template-columns:1fr;gap:22px}}
@media(prefers-reduced-motion:reduce){.price-card .store-badge{transition:none}}

@media(max-width:900px){
  .feature-grid{grid-template-columns:1fr 1fr}
  .faq{grid-template-columns:1fr}
  .faq .section-head{position:static}
}
@media(max-width:580px){
  .hero-news{font-size:12px;margin-bottom:22px;max-width:min(290px,74vw)}
  .section.faq{padding-top:20px;padding-bottom:48px}
  .hero-trust{gap:9px 16px;font-size:12.5px;margin-top:22px}
  .story-chapter .eyebrow b{min-width:26px;height:26px;font-size:10.5px}
  .features{padding-top:84px;padding-bottom:20px}
  .feature-grid{grid-template-columns:1fr}
  .section-head{margin-bottom:30px}
  .section-head p{font-size:16px}
  .faq summary{font-size:16px;padding:18px 0}
  .faq details{padding:0 18px}
  .wrap.newsletter-inner{border-radius:24px}
  .newsletter{padding:24px 0 56px}
  .site-footer{padding-top:48px}
  .page-hero{padding:56px 0 34px}
  .page-hero p{font-size:17px}
  .action-cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.feature,.page-content a.action-card,.hero-news{transition:none}}