/* QUERENCIA / standalone conversation app concept
   No property photography. Original question logic and content retained.
   Color and generous type signal the purpose of a card rather than an image.
*/
:root{
 --ink:#273c43;--ink-soft:#68767a;--ink-quiet:#86918e;
 --paper:#fbfaf7;--paper-soft:#f5f3ee;--paper-soft-2:#e9ebe6;
 --line:rgba(41,61,67,.12);--line-strong:rgba(41,61,67,.21);
 --accent:#2b6660;--accent-dark:#275450;
 --complete:#e5efe9;--shadow:0 20px 64px rgba(27,53,56,.10);
 --serif:Georgia,"Iowan Old Style",Baskerville,serif;
 --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif;
}
html,body{background:#e8e6e1;color:var(--ink)}
.phone{background:var(--paper)}
.topbar{background:rgba(251,250,247,.97);border-bottom:1px solid #e8e9e4;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px;min-height:69px}
.brand-lockup-new{display:flex;align-items:center;gap:11px}
.brand-symbol{width:37px;height:37px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:35px;line-height:1;letter-spacing:-.12em;color:#fff;background:#2b5c5a;border-radius:12px;padding:0 5px 7px 1px}
.brand-symbol span{font-family:var(--sans);font-size:23px;color:#e2b892;letter-spacing:0;margin-left:1px;align-self:flex-end;padding-bottom:4px}
.brand-name-wrap{display:flex;flex-direction:column;align-items:start;justify-content:center;gap:1px}
.brand-name{font-family:var(--serif);font-size:22px;letter-spacing:-.07em;color:#28454a;line-height:1.05}
.brand-slogan{font-size:8.5px;color:#78918d;letter-spacing:.17em;line-height:1.4;font-weight:780}
.icon-button{color:#38575b}.icon-button:hover{background:#e8f0ea}
.main{padding-bottom:38px}
h1,h2,.home-section-label{color:#263d44}
.kicker{color:#5f817d}
/* Homepage: an abstract conversational motif in place of landscape photography. */
.home-intro{background:#ecf0e9;color:#28484a;min-height:236px;align-items:center;margin-bottom:20px}
.home-hero-scene{position:absolute;inset:0;background:radial-gradient(circle at 97% -15%, #f2d8c7 0 24%, transparent 24.3%),linear-gradient(118deg,#e7eeea 0%,#f3efe6 100%);transform:none}
.hero-orbit{position:absolute;display:block;border-radius:50%;border:1.5px solid rgba(50,100,91,.23)}
.orbit-one{width:250px;height:250px;right:-125px;top:6px;border-width:32px;border-color:rgba(83,137,126,.13)}
.orbit-two{width:190px;height:190px;right:-75px;top:44px;border-width:1.5px}
.orbit-three{width:24px;height:24px;right:83px;top:38px;border:0;background:#d4a885}
.home-hero-copy{padding:34px 26px 34px;max-width:330px}
.home-intro .kicker{color:#527e78;font-size:9.5px;letter-spacing:.14em;margin-bottom:15px}
.home-intro h1{font-size:clamp(36px,10vw,48px);line-height:1.06;letter-spacing:-.058em;color:#263f44;text-shadow:none;max-width:310px}
.home-intro .lead{font-size:13px;line-height:1.55;color:#58716d;max-width:258px;margin-top:15px}
.global-filters{background:#f4f3ee;border:1px solid #eeede8;border-radius:18px;padding:12px 13px 15px;margin:12px 0 25px;gap:6px}
.filter-label{color:#667b76;letter-spacing:.055em;font-size:10px;margin:6px 3px 3px}
.segment,.depth-segments{background:#e9e9e3;border-color:#e6e6df;border-radius:12px}
.segment button,.depth-segment{color:#71807c;min-height:34px;font-size:11.5px}
.segment button.active,.segment button[aria-checked="true"],.depth-segment.active,.depth-segment[aria-checked="true"]{color:#2e625b;background:#fff;box-shadow:0 2px 8px rgba(39,68,64,.085)}
.home-set-section{margin-top:24px}.home-set-section+.home-set-section{margin-top:30px}
.home-section-label{font-size:27px;letter-spacing:-.043em}
.section-helper{color:#81908b}
/* Quick starts are paper-like cards, each with an abstract signal colour */
#quickStartList{gap:13px;padding-bottom:15px}
#quickStartList .deck-card{flex-basis:178px;width:178px;border:1px solid #e8e6e0;border-radius:19px;background:#fff;box-shadow:0 6px 18px rgba(33,61,65,.052)}
#quickStartList .deck-card-thumb{position:relative;background-image:none!important;background:#dcebe5!important;height:100px;min-height:100px;overflow:hidden}
#quickStartList .deck-card-thumb:before{content:'';position:absolute;top:-36px;right:-34px;width:145px;height:145px;border:26px solid rgba(31,102,90,.14);border-radius:50%}
#quickStartList .deck-card-thumb:after{content:'↗';position:absolute;left:15px;bottom:7px;font-family:var(--serif);font-size:43px;color:#337067;line-height:1}
#quickStartList .deck-card:nth-child(2n) .deck-card-thumb{background:#eee3d8!important}
#quickStartList .deck-card:nth-child(2n) .deck-card-thumb:before{border-color:rgba(170,111,82,.16)}
#quickStartList .deck-card:nth-child(2n) .deck-card-thumb:after{content:'✳';color:#a77050}
#quickStartList .deck-card:nth-child(3n) .deck-card-thumb{background:#e9e6f1!important}
#quickStartList .deck-card:nth-child(3n) .deck-card-thumb:before{border-color:rgba(121,110,162,.16)}
#quickStartList .deck-card:nth-child(3n) .deck-card-thumb:after{content:'○';color:#776da2}
#quickStartList .deck-card-copy{padding:14px 14px 17px;min-height:112px}
#quickStartList .title{font-size:16px;color:#283e43}
#quickStartList .sub{color:#72807e;font-size:11.5px}
#quickStartList .pill,#quickStartList .done{background:#f2f3ee;color:#73817a}
/* Topic picker: colored geometric marks, not a photo library */
#deckList{gap:10px}
#deckList .deck-card,#categoryList .topic-card{grid-template-columns:76px minmax(0,1fr);padding:9px 13px 9px 9px;gap:14px;border-color:#e8e8e2;background:white!important;min-height:94px;border-radius:17px;box-shadow:0 3px 11px rgba(34,57,59,.032)}
#deckList .deck-card-thumb,#categoryList .topic-card-thumb{position:relative;min-height:73px;height:73px;overflow:hidden;border-radius:12px;background:#e4efe9!important;background-image:none!important}
#deckList .deck-card-thumb:before,#categoryList .topic-card-thumb:before{content:'';position:absolute;width:72px;height:72px;top:-31px;left:21px;border:15px solid rgba(35,112,105,.17);border-radius:50%}
#deckList .deck-card-thumb:after,#categoryList .topic-card-thumb:after{content:'·';position:absolute;left:22px;bottom:6px;font-family:var(--serif);font-size:52px;line-height:.65;color:#377c75}
#deckList .deck-card:nth-child(3n + 2) .deck-card-thumb,#categoryList .topic-card:nth-child(3n + 2) .topic-card-thumb{background:#f2e5d9!important}
#deckList .deck-card:nth-child(3n + 2) .deck-card-thumb:before,#categoryList .topic-card:nth-child(3n + 2) .topic-card-thumb:before{border-color:rgba(189,131,90,.18)}
#deckList .deck-card:nth-child(3n + 2) .deck-card-thumb:after,#categoryList .topic-card:nth-child(3n + 2) .topic-card-thumb:after{content:'✳';color:#a8795f;font-size:32px;bottom:11px;left:21px}
#deckList .deck-card:nth-child(3n) .deck-card-thumb,#categoryList .topic-card:nth-child(3n) .topic-card-thumb{background:#e8e6f1!important}
#deckList .deck-card:nth-child(3n) .deck-card-thumb:before,#categoryList .topic-card:nth-child(3n) .topic-card-thumb:before{border-color:rgba(131,117,175,.17)}
#deckList .deck-card:nth-child(3n) .deck-card-thumb:after,#categoryList .topic-card:nth-child(3n) .topic-card-thumb:after{content:'↗';font-size:35px;color:#8271aa;bottom:11px}
#deckList .title,#categoryList .title{color:#283f45;font-size:16px}
#deckList .sub,#categoryList .sub{color:#778381}
#deckList .pill,#categoryList .pill,#deckList .done,#categoryList .done{background:#f2f4ef;color:#68847b}
.continue-card{background:#e9f1ed;border-color:#ccded5;border-left-color:#398578}
.continue-kicker,.continue-title,.continue-preview{color:#2d605b}
.utility-panel{background:#f5f3ed;border-color:#eeede7}
.intro-row-title{color:#35615a}
/* Deck page: a label and geometric ink motif replace the banner landscape. */
#screen-categories .deck-banner{background:#dceae4!important;background-image:none!important;height:125px;position:relative;overflow:hidden;margin:0 0 25px}
#screen-categories .deck-banner:before{content:'';position:absolute;right:-28px;top:-112px;width:250px;height:250px;border:39px solid rgba(42,110,99,.13);border-radius:50%}
#screen-categories .deck-banner:after{content:'Questions to discover';position:absolute;left:19px;bottom:17px;font-size:11px;letter-spacing:.06em;color:#406b62;font-weight:750}
#screen-categories #deckTitle{color:#273f44}
#screen-categories .global-filters{background:#f4f3ee;border:1px solid #eeece6}
#categoryList .topic-card{border-color:#eae8e3!important}
#categoryList .topic-card .title{color:#293f46}
/* Main question: an intimate, light paper card with its natural depth exposed. */
#screen-question.question-screen{background:transparent!important;color:#273f45;overflow:visible}
.question-card-banner{height:99px;background:#e6eeea!important;background-image:none!important;position:relative;align-items:flex-end}
.question-card-banner .question-banner-decoration{position:absolute;right:-25px;top:-71px;width:190px;height:190px;border:25px solid rgba(67,133,119,.13);border-radius:50%;transform:rotate(12deg)}
.question-card-banner .question-banner-decoration:before{content:'';position:absolute;inset:30px;border-radius:50%;border:1px solid rgba(73,132,118,.19)}
.question-photo-content{padding:20px 27px 20px}
#screen-question .question-photo .kicker{color:#48766c;text-shadow:none;font-size:11px;letter-spacing:.07em}
.question-progress-head{margin:15px 26px 7px;color:#66827b;font-size:10.5px}
.question-progress-track{background:#e7ebe5;height:3px}
.question-progress-track span{background:#458378}
#screen-question .q-present{background:#e9eeea;border-color:#dfe7df;color:#45776d}
#screen-question .question-card{padding:23px 26px 0}
#screen-question .question-card-top{margin-bottom:16px}
#screen-question .badge{border-radius:30px;padding:6px 12px;font-size:9.5px;font-weight:800;background:#eff2ec;border:1px solid #dde6dc;color:#537b6d}
#screen-question .question-text{font-size:clamp(34px,9.25vw,45px);line-height:1.13;letter-spacing:-.047em;color:#283f46;margin:0 0 26px}
#screen-question .deeper{background:#f0f2ed;border:1px solid #e7ebe3;border-radius:16px;padding:19px 18px 3px;margin:0 -2px 14px}
#screen-question .deeper h3{font-size:10px;letter-spacing:.135em;color:#618379;margin:0 0 16px}
#screen-question .deeper li{color:#52696a;font-size:15.5px;line-height:1.45;padding-bottom:16px;grid-template-columns:28px 1fr;gap:8px}
#screen-question .deeper li:before{color:#88a299;font-size:16px}
#screen-question details.notes{border-top:0;margin:3px 0 15px}
#screen-question details.notes summary{color:#57776e;font-size:12px;min-height:42px}
#screen-question .notes-summary-icon{color:#5f8d7d}
#screen-question .question-action-row{border-top:1px solid #e6eae5;padding:14px 0 9px}
#screen-question .action-button,#screen-question .question-action-row .save-question-btn.action-button{background:#f0f2ee;border-color:#e3e9e4;color:#587971;border-radius:11px;min-height:44px}
#screen-question .question-action-row .save-question-btn.saved{color:#8d684f!important;background:#f5eae1!important}
#screen-question .question-nav{background:#fbfaf7}
#screen-question .question-nav .primary{background:#2c675e;color:#fff;border-color:#2c675e}
#screen-question .question-nav .secondary{background:#f0f2ee;border-color:#e2e8e2;color:#59726e}
#screen-question .question-return{color:#708882}
/* Reading mode is a strong ink surface; no immersive landscape photography. */
.focus-overlay{background-color:#263f46!important;background-image:radial-gradient(circle at 100% 0%,rgba(208,159,115,.17) 0 12%,transparent 13%),radial-gradient(circle at -5% 105%,rgba(110,169,152,.11) 0 23%,transparent 24%)!important}
.focus-overlay:before{background:linear-gradient(180deg,rgba(24,51,55,.18),rgba(21,48,53,.35))}
.focus-question{font-size:clamp(36px,9.6vw,59px);letter-spacing:-.045em;text-shadow:none}
.focus-deeper{border-color:rgba(234,241,229,.27)}
.focus-deeper h3{color:#bdd8d0}
.focus-exit,.focus-nav,.focus-return{border-color:rgba(233,243,234,.36);background:rgba(13,32,37,.25);border-radius:13px}
.focus-foot{color:#c6d7cf}
/* Native-feeling simplified introduction: no advertising or photographic cover. */
#screen-onboarding .hero{background:#e9eee8!important;background-image:none!important;justify-content:center;align-items:center;min-height:calc(100dvh - 140px);padding:30px 22px}
#screen-onboarding .hero-card{background:#dfeee6;color:#29474a;border:1px solid #d7e6dc;min-height:420px;box-shadow:none;align-content:center;gap:10px;border-radius:25px}
#screen-onboarding .hero-eyebrow{color:#41766f;font-family:var(--serif);font-size:24px;text-transform:lowercase;letter-spacing:-.04em}
#screen-onboarding .hero-middle{font-family:var(--serif);font-size:42px;line-height:1.13;letter-spacing:-.05em;color:#304d50;margin:20px 0}
#screen-onboarding .hero-sub{color:#69817a;font-size:12px;font-weight:680;letter-spacing:.06em}
#screen-onboarding .hero-enter{font-size:13px;color:#2d625a;margin-top:24px}
/* Existing pathway UI, when enabled in future versions. */
.pathway-thumb{background-color:#e6eee8!important;background-image:none!important}
#screen-pathway .pathway-tile{background:#fafaf7}
.history-card,.saved-entry,.learn-card,.onboarding-card,.skill-card,.accordion-item,.summary-card{border-color:#e8e9e1}
/* Tight phones */
@media(max-width:390px){
 .topbar{padding-top:calc(9px + env(safe-area-inset-top));padding-bottom:9px}
 .brand-symbol{width:34px;height:34px;font-size:32px}
 .brand-name{font-size:20px}
 .brand-slogan{font-size:8px}
 .home-intro{min-height:217px}
 .home-hero-copy{padding:30px 22px}
 .home-intro h1{font-size:clamp(34px,9.6vw,43px)}
 .global-filters{padding:10px 11px 13px}
 #quickStartList .deck-card{flex-basis:165px;width:165px}
 #screen-question .question-card{padding:21px 21px 0}
 #screen-question .question-text{font-size:clamp(34px,9.25vw,41px)}
 .question-card-banner{height:90px}
 .question-photo-content{padding:18px 21px}
 #screen-question .deeper{padding:17px 15px 2px}
 #screen-question .deeper li{font-size:15px}
}
@media(max-width:355px){
 .brand-symbol{width:32px;height:32px}
 .brand-name{font-size:19px}
 #screen-question .action-button,#screen-question .question-action-row .save-question-btn.action-button{font-size:10.5px}
}

/* Original Querencia Q retained as the identity in the refreshed layout. */
.brand-symbol-original{display:block;width:39px;height:39px;object-fit:cover;border-radius:12px;flex:0 0 39px}
@media(max-width:390px){.brand-symbol-original{width:35px;height:35px;flex-basis:35px}}
@media(max-width:355px){.brand-symbol-original{width:33px;height:33px;flex-basis:33px}}