.screen-content { background:#fff; }
.screen-content .app-main { width:100%; margin:0; padding:0; }
.story-page { position:relative; width:100%; min-height:calc(100dvh - var(--topbar-h)); margin:0; padding:clamp(28px,4vw,62px); overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.9fr); align-items:center; gap:clamp(30px,5vw,78px); }
.story-page::before,.story-page::after { content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.story-page::before { width:360px; height:360px; right:-160px; top:-170px; background:#f08170; opacity:.13; }
.story-page::after { width:310px; height:310px; left:-170px; bottom:-180px; border:54px solid rgba(23,32,58,.07); }
.story-page__copy { min-width:0; }
.story-page__kicker { color:#e37060; font-weight:900; }
.story-page__title { max-width:760px; margin:10px 0 18px; font-family:var(--font-title); font-size:clamp(3.3rem,7vw,7.2rem); line-height:.85; color:#17203a; }
.story-page__title em { color:#f08170; font-style:normal; }
.story-page__lead { max-width:58ch; color:#485169; font-size:clamp(1.02rem,1.7vw,1.3rem); line-height:1.65; }
.story-page__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.story-visual { position:relative; min-height:480px; display:grid; place-items:center; }
.story-visual__main { width:min(620px,100%); max-height:560px; object-fit:contain; mix-blend-mode:darken; }
.story-polaroid { position:absolute; width:180px; padding:8px 8px 26px; background:#fff; box-shadow:0 18px 42px rgba(23,32,58,.18); transform:rotate(var(--r,5deg)); }
.story-polaroid img { width:100%; aspect-ratio:1.3; object-fit:cover; }
.story-polaroid--one { right:0; top:5%; --r:7deg; }
.story-polaroid--two { left:0; bottom:2%; --r:-7deg; }
.story-points { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:22px; }
.story-point { display:flex; align-items:center; gap:10px; min-height:64px; padding:11px 13px; border:1px solid #e7e9ef; border-radius:12px; background:#fff; color:#17203a; font-weight:800; }
.story-point img,.story-point svg { width:38px; height:38px; object-fit:contain; flex:none; }

.how-page { grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); }
.how-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.how-card { position:relative; min-height:210px; padding:22px; border:1px solid #e5e8ef; border-radius:16px; background:#fff; overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }
.how-card:hover { transform:translateY(-5px); box-shadow:0 20px 45px rgba(23,32,58,.1); }
.how-card__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.how-card__top img { width:56px; height:72px; object-fit:contain; }
.how-card__num { font-family:var(--font-title); font-size:2.7rem; color:#f08170; -webkit-text-stroke:1px #17203a; }
.how-card h2 { margin:12px 0 7px; font-size:1.05rem; color:#17203a; }
.how-card p { color:#5a6276; font-size:.84rem; line-height:1.55; }

.support-page { grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr); }
.support-card { padding:clamp(22px,3vw,38px); border:1px solid #e4e7ed; border-radius:20px; background:#fff; box-shadow:0 26px 70px -48px rgba(23,32,58,.5); }
.support-card h2 { margin-bottom:5px; font-family:var(--font-title); font-size:2.2rem; color:#17203a; }
.support-card__hint { margin-bottom:18px; color:#687084; }
.support-card .fld { margin-bottom:11px; }
.support-fields { display:grid; gap:11px; }
.support-fields--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.support-hp { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; }
.support-errors,.support-success { margin:0 0 16px; padding:12px 15px; border-radius:12px; font-weight:750; line-height:1.5; }
.support-errors { border:1px solid #f2b5ad; background:#fff2ef; color:#9d3329; }
.support-errors p { margin:0; }
.support-errors p + p { margin-top:5px; }
.support-success { border:1px solid #b9dfcb; background:#effaf4; color:#17633d; }
.support-privacy { display:block; margin-top:12px; color:#747b8d; text-align:center; line-height:1.5; }
.support-privacy a { color:#17395f; text-decoration:underline; }
.support-upload { display:flex; flex-wrap:wrap; align-items:center; gap:9px; min-height:48px; margin:4px 0 10px; padding:10px 12px; border:1px dashed #cfd5df; border-radius:11px; background:#fafbfc; color:#17395f; cursor:pointer; }
.support-upload:hover { border-color:#f08170; background:#fff7f4; }
.support-upload input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.support-upload span { font-weight:900; }
.support-upload small { margin-inline-start:auto; color:#7a8191; }
.support-upload__names { flex:0 0 100%; display:grid; gap:6px; padding-top:2px; }
.support-upload__names:empty { display:none; }
.support-upload .support-upload__file { display:flex; align-items:center; gap:8px; min-width:0; padding:7px 9px; border-radius:8px; background:#fff; box-shadow:0 1px 4px rgba(23,32,58,.08); font-weight:500; }
.support-upload__file::before { content:"✓"; flex:none; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#e7f7ee; color:#19714a; font-size:12px; font-weight:900; }
.support-upload__file b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-upload .support-upload__file small { flex:none; margin-inline-start:auto; }
.support-thread-page { width:min(1040px,calc(100% - 36px)); min-height:calc(100dvh - var(--topbar-h)); margin:0 auto; padding:clamp(36px,5vw,72px) 0 80px; }
.support-thread-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:22px; border-bottom:1px solid #e7e9ef; }
.support-thread-head h1 { margin:5px 0 7px; font-family:var(--font-title); font-size:clamp(3rem,6vw,5.8rem); line-height:.9; color:#17203a; }
.support-thread-head p { margin:0; color:#687084; }
.support-status { flex:none; padding:8px 13px; border-radius:999px; background:#fff0ec; color:#aa493e; font-size:.82rem; font-weight:900; }
.support-status--resolved { background:#edf8f2; color:#23704b; }
.support-status--pending_customer { background:#eef4fb; color:#245b8d; }
.support-thread-messages { display:grid; gap:14px; padding:30px 0; }
.support-message { width:min(82%,760px); display:flex; align-items:flex-end; gap:9px; color:#30384e; }
.support-message--admin { margin-inline-start:auto; flex-direction:row-reverse; color:#fff; }
.support-message__bubble { flex:1; min-width:0; padding:18px 20px; border-radius:18px 18px 5px 18px; background:#f4f5f8; }
.support-message--admin .support-message__bubble { border-radius:18px 18px 18px 5px; background:#17395f; }
.support-message--system { width:100%; justify-content:center; color:#687084; text-align:center; }
.support-message--system .support-message__bubble { flex:0 1 620px; padding:10px 16px; border:1px dashed #cfd5df; border-radius:999px; background:#fff; }
.support-message--system header { display:none; }
.support-avatar { flex:none; width:37px; height:37px; display:grid; place-items:center; border-radius:50%; background:#f08170; color:#fff; font-weight:900; }
.support-avatar--brand { width:43px; height:43px; padding:6px; border:1px solid #e2e5ea; background:#fff; }
.support-avatar--brand img { width:100%; height:100%; object-fit:contain; }
.support-message header { display:flex; justify-content:space-between; gap:16px; margin-bottom:9px; font-size:.82rem; }
.support-message time { opacity:.68; font-weight:500; }
.support-message p { margin:0; line-height:1.75; }
.support-attachment { display:flex; align-items:center; gap:7px; margin-top:12px; padding:9px 11px; border-radius:10px; background:rgba(255,255,255,.72); color:#17395f; font-weight:850; text-decoration:none; }
.support-message--admin .support-attachment { background:rgba(255,255,255,.12); color:#fff; }
.support-attachment small { margin-inline-start:auto; opacity:.65; }
.support-attachments { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.support-attachments .support-attachment { grid-column:1/-1; margin-top:0; }
.support-image { position:relative; min-width:0; padding:0; overflow:hidden; border:0; border-radius:11px; background:#e8ebf0; color:#17203a; cursor:pointer; text-align:right; }
.support-image img { display:block; width:100%; height:150px; object-fit:cover; transition:transform .25s ease; }
.support-image:hover img { transform:scale(1.025); }
.support-image span { display:block; padding:7px 9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:rgba(255,255,255,.92); font-size:.78rem; font-weight:800; }
.support-lightbox[hidden] { display:none; }
.support-lightbox { position:fixed; z-index:10000; inset:0; display:grid; place-items:center; padding:30px; background:rgba(11,18,34,.88); backdrop-filter:blur(8px); }
.support-lightbox img { display:block; max-width:min(1100px,94vw); max-height:88vh; border-radius:12px; box-shadow:0 24px 80px rgba(0,0,0,.4); object-fit:contain; }
.support-lightbox button { position:fixed; top:18px; left:20px; width:44px; height:44px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(0,0,0,.3); color:#fff; font-size:30px; cursor:pointer; }
.support-lightbox-open { overflow:hidden; }
.support-reply-card { display:grid; gap:12px; padding:20px; border:1px solid #e3e6ec; border-radius:18px; background:#fff; box-shadow:0 20px 50px -40px rgba(23,32,58,.45); }
.support-reply-card label { color:#17203a; font-weight:900; }
.support-reply-card textarea { width:100%; resize:vertical; padding:14px; border:1px solid #dce0e8; border-radius:12px; background:#fafbfc; font:inherit; color:#17203a; }
.support-reply-card .btn { justify-self:start; min-width:180px; }
.support-thread-empty { max-width:650px; margin:80px auto; text-align:center; }
.support-thread-empty h1 { font-family:var(--font-title); font-size:clamp(3rem,7vw,6rem); color:#17203a; }
.support-meta { display:grid; gap:8px; margin-top:22px; }
.support-meta a,.support-meta span { min-height:46px; display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:11px; background:#f5f6f9; color:#17203a; font-weight:800; }

.pricing-page { grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr); }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.price-card { position:relative; min-height:340px; padding:24px; border:2px solid #e5e8ef; border-radius:18px; background:#fff; }
.price-card:first-child { border-color:#f08170; }
.price-card__badge { position:absolute; top:-12px; right:20px; padding:5px 11px; border-radius:999px; background:#f08170; color:#fff; font-size:.7rem; font-weight:900; }
.price-card__book { width:92px; margin:6px auto 18px; border-radius:5px 9px 9px 5px; background:linear-gradient(145deg,#f08170,#f2bd8d); box-shadow:0 15px 30px rgba(23,32,58,.18); }
.price-card h2 { text-align:center; color:#17203a; }
.price-card__price { display:block; margin:6px 0 14px; text-align:center; font-family:var(--font-title); font-size:2.7rem; color:#17203a; }
.price-card ul { padding-inline-end:20px; color:#4e566b; font-size:.84rem; line-height:1.65; }
.price-card .btn { width:100%; margin-top:18px; }
.pricing-note { grid-column:1/-1; color:#6d7485; font-size:.78rem; text-align:center; }

.cancel-card { max-width:650px; padding:clamp(22px,3vw,38px); border:1px solid #e4e7ed; border-radius:20px; background:#fff; }
.cancel-card ol { padding-inline-end:20px; color:#4e566b; line-height:1.75; }
.cancel-card .fld { margin:12px 0; }

@media(min-width:1000px) and (min-height:720px){
  .story-page { height:calc(100dvh - var(--topbar-h)); min-height:0; }
}
@media(max-width:900px){
  .story-page,.how-page,.support-page,.pricing-page { grid-template-columns:1fr; overflow:visible; }
  .story-visual { min-height:390px; }
  .story-page__title { font-size:clamp(3.2rem,12vw,5.4rem); }
}
@media(max-width:600px){
  .story-page { padding:25px 14px 70px; gap:26px; }
  .story-page__title { font-size:clamp(3rem,16vw,4.45rem); }
  .story-page__lead { font-size:.98rem; }
  .story-points,.how-grid,.pricing-grid { grid-template-columns:1fr; }
  .story-visual { min-height:300px; }
  .story-polaroid { width:115px; padding:5px 5px 16px; }
  .how-card { min-height:178px; }
  .support-card,.cancel-card { padding:20px 15px; border-radius:15px; }
  .support-fields--two { grid-template-columns:1fr; gap:0; }
  .support-thread-page { width:min(100% - 28px,1040px); padding-top:28px; }
  .support-thread-head { align-items:center; }
  .support-thread-head h1 { font-size:3.7rem; }
  .support-status { font-size:.7rem; }
  .support-message { width:91%; padding:15px; }
  .support-message { padding:0; }
  .support-message__bubble { padding:14px 15px; }
  .support-avatar { width:32px; height:32px; }
  .support-avatar--brand { width:36px; height:36px; }
  .support-message header { display:grid; gap:2px; }
  .support-reply-card { padding:15px; }
  .support-reply-card .btn { width:100%; }
  .story-page__actions .btn { width:100%; }
}

/* Pricing has three regions. Give each an explicit place so the type tabs
   cannot occupy the catalogue column or push cards into the narrow intro. */
.story-page.pricing-page {
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr);
  grid-template-areas: "intro catalogue" "tabs catalogue";
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 24px;
  width: min(100%, 1440px);
  height: auto;
  min-height: 0;
  margin-inline: auto;
  padding-block: clamp(40px, 5vw, 72px);
  overflow: visible;
  isolation: isolate;
}
.pricing-page > .story-page__copy { grid-area: intro; }
.pricing-page > .story-page__actions { grid-area: tabs; margin: 0; }
.pricing-page > .pricing-grid { grid-area: catalogue; min-width: 0; align-items: stretch; }
.pricing-page .story-page__title { font-size: clamp(3.4rem, 5.5vw, 5.8rem); }
.pricing-page .story-page__lead { font-size: 1.05rem; }
.pricing-page .price-card { display: flex; flex-direction: column; min-width: 0; padding: 24px 20px; }
.pricing-page .price-card h2 { font-size: 1.65rem; line-height: 1.2; overflow-wrap: anywhere; }
.pricing-page .price-card__book { flex: 0 0 auto; }
.pricing-page .price-card ul { padding-inline: 20px 0; font-size: .95rem; line-height: 1.75; margin-bottom: 20px; }
.pricing-page .price-card .btn { margin-top: auto; white-space: normal; }
.pricing-page .pricing-note { margin: 4px 0 0; line-height: 1.7; }
@media (max-width: 1000px) {
  .story-page.pricing-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "tabs" "catalogue";
    grid-template-rows: auto;
  }
  .pricing-page .story-page__copy { max-width: 720px; }
}
@media (max-width: 600px) {
  .story-page.pricing-page { padding: 28px 16px 48px; gap: 28px; }
  .pricing-page .story-page__title { font-size: clamp(3rem, 14vw, 4.2rem); }
  .pricing-page .price-card { padding: 28px 24px; }
  .pricing-page .story-page__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pricing-page .story-page__actions .btn { min-width: 0; padding-inline: 10px; white-space: normal; }
}