:root{
  --deep:#06382f;
  --deep-2:#032821;
  --deep-3:#0a4a3b;
  --green:#0a8f4d;
  --green-2:#2e7d55;
  --sage:#77977f;
  --cream:#f5f0e5;
  --paper:#fffdf7;
  --ink:#153d34;
  --muted:#71847d;
  --line:rgba(21,61,52,.12);
  --shadow:0 24px 70px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:'Readex Pro',Tahoma,Arial,sans-serif}
button,input,textarea{font:inherit}
button{color:inherit}
a{color:inherit}
img{max-width:100%;display:block}
body{background:var(--deep-2)}

/* ---------- Public journey v4: mobile first ---------- */
.landing-body{color:#fff;overflow:hidden}
.journey,.step{min-height:100svh}
.step{display:none;position:relative;min-height:100svh;overflow:hidden}
.step.is-active{display:block;animation:stepIn .44s ease both}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.saudi-title,.saudi-mini{font-family:'saudi-font','Readex Pro',Tahoma,sans-serif}
.saudi-title{font-weight:600;letter-spacing:0}

.public-header{position:absolute;z-index:30;top:0;left:0;right:0;padding:14px 15px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.public-header>*{pointer-events:auto}
.national-day-logo{width:132px;height:auto;object-fit:contain;filter:drop-shadow(0 5px 14px rgba(0,0,0,.16))}
.national-day-logo--paper{filter:none}
.school-logo-button{border:0;background:transparent!important;padding:0;cursor:default;width:58px;border-radius:0;box-shadow:none!important;transition:transform .18s ease}
.school-logo-button:active{transform:scale(.93)}
.school-logo-button img{width:100%;height:auto;filter:drop-shadow(0 5px 11px rgba(0,0,0,.22))}
.school-logo-button--paper img{filter:drop-shadow(0 4px 9px rgba(24,64,55,.13))}

.eyebrow{margin:0;font-size:.71rem;letter-spacing:.045em;font-weight:400;opacity:.66}
.eyebrow--ink{color:#42655b;opacity:1}
.eyebrow--green{color:#4c7368;opacity:1}
.ornament{display:inline-block;margin:13px 0 10px;font-size:.8rem;opacity:.56}
.lead-line{font-size:.97rem;margin:0 0 2px;font-weight:300;color:#42655b}
.support-copy{font-size:.91rem;line-height:1.9;margin:0 auto;max-width:520px;font-weight:300}
.support-copy--ink{color:#5f756e}
.micro-note{font-size:.65rem;opacity:.48;margin:14px 0 0;font-weight:300}

.journey-btn{border:0;border-radius:999px;padding:12px 22px;margin-top:22px;cursor:pointer;background:var(--deep);color:#fff;font-weight:500;box-shadow:0 10px 26px rgba(3,40,33,.14);transition:transform .18s ease,box-shadow .18s ease}
.journey-btn span{display:inline-block;margin-right:6px;transition:transform .18s ease}
.journey-btn:active{transform:scale(.985)}
.journey-btn--green{background:#0b5a48}
.text-back{display:block;margin:15px auto 0;border:0;background:transparent;color:#71847d;font-size:.74rem;cursor:pointer;padding:6px 10px}
.text-back--green{color:#6e817a}

/* Shared calm green scene */
.scene{min-height:100svh;display:grid;place-items:center;padding:102px 16px 30px;position:relative;background:
  radial-gradient(circle at 8% 8%,rgba(105,164,119,.16),transparent 31%),
  radial-gradient(circle at 92% 86%,rgba(34,118,80,.18),transparent 34%),
  linear-gradient(155deg,#063c32 0%,#052f28 54%,#03261f 100%)}
.scene:before{content:"";position:absolute;inset:0;opacity:.065;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at center,black 20%,transparent 78%);pointer-events:none}

.soft-pattern{position:absolute;pointer-events:none;opacity:.13}
.soft-pattern--top{top:82px;right:-52px;width:190px;height:190px;border:1px solid rgba(255,255,255,.25);transform:rotate(45deg)}
.soft-pattern--top:before,.soft-pattern--top:after{content:"";position:absolute;inset:26px;border:1px solid rgba(255,255,255,.24)}
.soft-pattern--top:after{inset:54px}
.soft-pattern--bottom{left:-44px;bottom:-28px;width:170px;height:210px;background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(255,255,255,.34) 13px 15px)}

.invitation-card{position:relative;z-index:3;width:min(100%,560px);text-align:center;background:rgba(255,253,247,.975);color:var(--ink);padding:34px 22px 30px;border-radius:22px;box-shadow:0 24px 68px rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.8)}
.invitation-card:before{content:"";position:absolute;inset:9px;border:1px solid rgba(21,61,52,.08);border-radius:15px;pointer-events:none}
.card-thread{position:absolute;top:0;left:50%;width:90px;height:5px;transform:translate(-50%,-50%);border-radius:999px;background:repeating-linear-gradient(90deg,#0b644e 0 9px,#7da27f 9px 16px)}
.invitation-card .saudi-title{font-size:clamp(2.8rem,13.5vw,4.65rem);line-height:1.05;margin:.04em 0 .23em}
.invitation-card .support-copy{color:#5e746c}

/* STEP 1 - not an ad: quiet invitation card */
.step--opening{background:var(--deep)}
.invitation-card--opening{padding-top:39px}
.invitation-card--opening .saudi-title{color:#0b4a3c}

/* STEP 2 - green-on-green, different composition without color shock */
.step--story{background:var(--deep)}
.scene--story{background:
  radial-gradient(circle at 84% 20%,rgba(126,163,130,.24),transparent 27%),
  radial-gradient(circle at 15% 84%,rgba(16,109,70,.24),transparent 33%),
  linear-gradient(135deg,#0c4b3c,#06372e 56%,#042b24)}
.story-motif{position:absolute;z-index:1;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.story-motif--one{width:150px;height:280px;right:-64px;top:23%;background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(255,255,255,.1) 12px 14px);transform:rotate(-4deg)}
.story-motif--two{width:140px;height:140px;left:-42px;bottom:8%;transform:rotate(45deg)}
.story-motif--two:before{content:"";position:absolute;inset:24px;border:1px solid rgba(255,255,255,.2)}
.invitation-card--story{text-align:right;padding-top:48px}
.story-number{position:absolute;left:22px;top:18px;font-size:1.22rem;color:#91a39d;opacity:.7}
.invitation-card--story .saudi-title{font-size:clamp(2.6rem,12vw,4.4rem);margin:.13em 0 .25em}
.invitation-card--story .support-copy{margin-right:0;max-width:480px}
.invitation-card--story .journey-btn{display:block;margin-right:0}
.invitation-card--story .text-back{margin-right:0;margin-left:auto;padding-right:0}

/* STEP 3 - form */
.step--write{background:var(--cream);color:var(--ink);overflow:auto}
.step--write.is-active{display:block}
.public-header--paper{position:absolute}
.write-page{min-height:100svh;padding:106px 16px 38px;background:radial-gradient(circle at 95% 6%,rgba(34,118,80,.08),transparent 24%),#f4f0e6;position:relative}
.write-identity-band{height:7px;position:absolute;top:89px;right:16px;left:16px;display:grid;grid-template-columns:1.2fr .7fr 1fr .55fr .85fr;gap:4px;border-radius:999px;overflow:hidden;opacity:.78}
.write-identity-band span:nth-child(1){background:#0a5f49}.write-identity-band span:nth-child(2){background:#8ba176}.write-identity-band span:nth-child(3){background:#1b794f}.write-identity-band span:nth-child(4){background:#b2a36c}.write-identity-band span:nth-child(5){background:#446d59}
.write-wrap{width:min(100%,780px);margin:0 auto}
.write-intro{text-align:center;margin:0 auto 20px;max-width:640px}
.write-intro .saudi-title{font-size:clamp(2.55rem,11.5vw,4.2rem);line-height:1.08;margin:.13em 0 .15em;color:var(--ink)}
.write-intro>p:last-child{margin:0;color:#71827c;font-size:.84rem;line-height:1.75}

.letter-card{position:relative;background:var(--paper);border:1px solid var(--line);padding:23px 18px;border-radius:20px;box-shadow:0 18px 52px rgba(18,63,54,.075)}
.letter-card:before{content:"";position:absolute;inset:8px;border:1px solid rgba(21,61,52,.055);border-radius:14px;pointer-events:none}
.letter-topline{display:flex;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;margin-bottom:8px;color:#31594f}
.saudi-mini{font-size:1.17rem;font-weight:600}
.letter-star{font-size:.82rem;color:var(--green);opacity:.62}
.letter-card textarea,.letter-card input{width:100%;border:0;border-bottom:1px solid rgba(20,59,52,.18);background:transparent;border-radius:0;padding:11px 2px;color:var(--ink);outline:none}
.letter-card textarea{min-height:155px;resize:vertical;font-size:1rem;line-height:1.9}
.letter-card textarea::placeholder,.letter-card input::placeholder{color:#9aa8a3}
.letter-card textarea:focus,.letter-card input:focus{border-bottom-color:#2d765f}
.counter{text-align:left;color:#91a099;font-size:.7rem;margin-top:4px}
.form-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:end;margin-top:15px}
.field-label{display:block;font-size:.81rem;color:#5c736b}
.field-label small{font-weight:300;opacity:.7}
.field-label input{display:block;margin-top:4px;font-size:.93rem}
.check{display:flex;align-items:center;gap:9px;color:#61756e;font-size:.79rem;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--deep);flex:0 0 auto}
.privacy-note{font-size:.68rem;color:#82918c;text-align:center;margin:20px 0 9px}
.submit-letter{display:block;width:100%;border:0;border-radius:999px;background:#083f35;color:#fff;padding:13px 20px;cursor:pointer;font-weight:500;transition:transform .18s ease,opacity .18s ease}
.submit-letter:active{transform:scale(.99)}
.submit-letter:disabled{opacity:.6;cursor:wait}
.submit-letter span{margin-right:6px}
.form-error{min-height:20px;margin:7px 0 0;text-align:center;color:#a22d49;font-size:.78rem}
.text-back--green{margin:12px auto 0}

/* STEP 4 */
.step--thanks{background:var(--deep)}
.scene--thanks{background:linear-gradient(145deg,#073c32,#032720 72%)}
.soft-pattern--thanks{width:260px;height:260px;left:-100px;top:18%;border:1px solid rgba(255,255,255,.16);transform:rotate(45deg)}
.soft-pattern--thanks:before,.soft-pattern--thanks:after{content:"";position:absolute;inset:32px;border:1px solid rgba(255,255,255,.12)}
.soft-pattern--thanks:after{inset:65px}
.invitation-card--thanks .saudi-title{font-size:clamp(2.6rem,11.7vw,4.35rem)}

/* ---------- Display / TV screen ---------- */
.display-body{background:#032821;color:#fff;overflow:hidden}
.display-shell{height:100dvh;min-height:100vh;position:relative;padding:22px 28px 18px;display:grid;grid-template-rows:auto 1fr auto;background:
  radial-gradient(circle at 10% 12%,rgba(126,163,130,.17),transparent 26%),
  radial-gradient(circle at 88% 84%,rgba(38,128,83,.18),transparent 28%),
  linear-gradient(145deg,#073d33,#03251f 72%)}
.display-texture{position:absolute;inset:0;opacity:.055;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at 50% 48%,black 18%,transparent 80%);pointer-events:none}
.display-shell:before,.display-shell:after{content:"";position:absolute;top:15%;bottom:15%;width:12px;opacity:.42;background:repeating-linear-gradient(0deg,#799a7b 0 14px,#0b6f50 14px 28px,#b1a06d 28px 42px)}
.display-shell:before{right:0;border-radius:10px 0 0 10px}.display-shell:after{left:0;border-radius:0 10px 10px 0}
.display-header,.display-footer{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:3}
.display-national-logo{width:clamp(145px,15vw,230px);filter:drop-shadow(0 5px 14px rgba(0,0,0,.16))}
.display-school-logo{width:clamp(74px,7vw,120px);background:transparent;padding:0;filter:drop-shadow(0 7px 16px rgba(0,0,0,.24))}
.display-stage{display:grid;place-items:center;align-content:center;gap:16px;position:relative;z-index:3;padding:12px 0}
.display-kicker{font-family:'saudi-font','Readex Pro',sans-serif;font-size:clamp(1.15rem,2vw,2rem);opacity:.76;margin:0;text-align:center}
.display-letter{width:min(1060px,83vw);min-height:42vh;background:rgba(255,253,247,.98);color:var(--ink);border-radius:24px;padding:clamp(34px,6vh,76px) clamp(28px,6vw,78px);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-shadow:0 32px 90px rgba(0,0,0,.3);opacity:0;transform:translateY(8px) scale(.99);transition:.58s ease}
.display-letter.show{opacity:1;transform:none}
.display-letter:before{content:"";position:absolute;inset:11px;border:1px solid rgba(6,47,42,.09);border-radius:16px}
.display-letter:after{content:"";position:absolute;top:0;left:50%;width:130px;height:5px;transform:translate(-50%,-50%);border-radius:999px;background:repeating-linear-gradient(90deg,#0b644e 0 13px,#7da27f 13px 23px,#b2a36c 23px 31px)}
.display-letter p{font-size:clamp(1.65rem,3.1vw,3.35rem);line-height:1.72;margin:0;text-align:center;font-weight:400;max-width:900px}
.display-letter footer{margin-top:20px;text-align:center;font-size:clamp(.86rem,1.2vw,1.12rem);color:#74867f}
.display-spark{position:absolute;top:24px;left:28px;color:#0a7b50;opacity:.38;font-size:.95rem}
.trait-strip{min-width:240px;text-align:center;padding:8px 22px;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);font-family:'saudi-font','Readex Pro',sans-serif;font-size:clamp(.9rem,1.25vw,1.2rem);opacity:.82}
.display-footer{font-size:clamp(.7rem,.95vw,.88rem);opacity:.68}
.display-footer strong{font-size:1.3em;font-weight:500}
.live-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#73a86c;margin-left:8px;box-shadow:0 0 0 5px rgba(115,168,108,.08)}
body[data-trait="0"] .trait-strip{color:#c7d9b8}
body[data-trait="1"] .trait-strip{color:#9fc7ae}
body[data-trait="2"] .trait-strip{color:#d4c792}
body[data-trait="3"] .trait-strip{color:#a8c5a6}
body[data-trait="4"] .trait-strip{color:#c2d4c1}
body[data-trait="5"] .trait-strip{color:#b2c39e}

/* Public larger screens */
@media(min-width:760px){
  .public-header{padding:20px clamp(28px,4vw,58px);align-items:flex-start}
  .national-day-logo{width:clamp(160px,17vw,230px)}
  .school-logo-button{width:clamp(72px,7vw,92px)}
  .scene{padding:122px 30px 52px}
  .invitation-card{width:min(660px,86vw);padding:clamp(42px,5vw,62px) clamp(38px,5vw,62px);border-radius:26px}
  .invitation-card .saudi-title{font-size:clamp(3.7rem,6.5vw,6rem)}
  .support-copy{font-size:clamp(.98rem,1.5vw,1.13rem)}
  .invitation-card--story{margin-right:18vw;width:min(650px,68vw)}
  .story-motif--one{width:240px;height:440px;right:4vw;top:20%}
  .story-motif--two{width:200px;height:200px;left:5vw;bottom:10%}
  .write-page{padding:126px 26px 58px}
  .write-identity-band{top:106px;right:clamp(28px,5vw,70px);left:clamp(28px,5vw,70px)}
  .write-wrap{width:min(900px,82vw)}
  .write-intro{text-align:right;margin-right:0}
  .write-intro .saudi-title{font-size:clamp(3.5rem,5.3vw,5rem)}
  .letter-card{padding:clamp(30px,4vw,46px);border-radius:22px}
  .form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
  .check{padding-bottom:10px}
  .text-back--green{margin-right:0;margin-left:auto}
}

@media(max-width:680px){
  .display-shell{padding:14px 16px 12px}
  .display-header{align-items:center}
  .display-national-logo{width:126px}
  .display-school-logo{width:58px}
  .display-stage{gap:12px}
  .display-kicker{font-size:1.15rem}
  .display-letter{width:92vw;min-height:47vh;border-radius:20px;padding:34px 24px}
  .display-letter p{font-size:clamp(1.35rem,6vw,2rem);line-height:1.8}
  .display-letter footer{font-size:.8rem;margin-top:16px}
  .trait-strip{min-width:200px;font-size:.9rem;padding:7px 14px}
  .display-footer{font-size:.65rem}
  .display-shell:before,.display-shell:after{width:6px;opacity:.32}
}

@media(max-width:380px){
  .public-header{padding:12px}
  .national-day-logo{width:118px}
  .school-logo-button{width:52px}
  .scene{padding-right:13px;padding-left:13px}
  .invitation-card{padding-right:17px;padding-left:17px}
  .letter-card{padding-right:15px;padding-left:15px}
}
/* ---------- Admin ---------- */
.admin-body,.admin-login-body{background:#f4f5f1;color:#173b34;min-height:100vh}
.admin-layout{min-height:100vh;display:grid;grid-template-columns:230px 1fr}
.admin-sidebar{background:#082f29;color:#fff;padding:28px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.admin-logo{display:block;width:108px;margin:0 auto 36px;background:transparent;padding:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}
.admin-nav{display:flex;flex-direction:column;gap:6px}
.admin-nav a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;padding:12px 13px;border-radius:12px;color:rgba(255,255,255,.72);font-size:.86rem;transition:.18s ease}
.admin-nav a:hover,.admin-nav a.active{background:rgba(255,255,255,.09);color:#fff}
.admin-nav a b{font-weight:500;background:rgba(255,255,255,.12);padding:2px 7px;border-radius:999px;font-size:.74rem}
.nav-arrow{opacity:.55}
.admin-nav .nav-logout{margin-top:12px;color:#ffd4dc}
.admin-main{padding:46px clamp(24px,4vw,60px) 70px;min-width:0}
.admin-main--narrow{max-width:980px}
.admin-page-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:30px}
.admin-page-header h1{font-size:clamp(2rem,4vw,3rem);line-height:1.2;margin:.15em 0 .2em;font-weight:500;letter-spacing:-.03em}
.admin-page-header p{margin:0;color:#73857f;line-height:1.8}
.admin-kicker{font-size:.72rem!important;letter-spacing:.04em;color:#82948d!important;margin:0!important}
.admin-display-btn{background:#0a5546;color:#fff;text-decoration:none;padding:11px 17px;border-radius:999px;font-size:.82rem;white-space:nowrap}
.status-tabs{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 24px}
.status-tabs a{padding:10px 14px;background:#fff;border:1px solid #dde4df;border-radius:999px;text-decoration:none;color:#36594f;font-size:.82rem}
.status-tabs a.active{background:#0a5546;color:#fff;border-color:#0a5546}
.status-tabs b{margin-right:7px;font-weight:500}
.messages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:15px}
.admin-message{background:#fff;border:1px solid #e0e6e1;border-radius:18px;padding:20px;box-shadow:0 5px 18px rgba(11,54,45,.045)}
.admin-message .meta{display:flex;justify-content:space-between;color:#8c9a95;font-size:.72rem}
.admin-message>p{line-height:1.9;font-size:1rem;min-height:108px;color:#24473f}
.sender{color:#6d7f79;font-size:.82rem}
.message-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.message-actions button{border:1px solid #d2dbd7;background:#fff;padding:8px 13px;border-radius:999px;cursor:pointer;color:#36584f;font-size:.78rem}
.message-actions .approve{background:#0a624c;color:#fff;border-color:#0a624c}
.message-actions .danger{color:#a22b45}
.empty{grid-column:1/-1;padding:50px;text-align:center;background:#fff;border-radius:18px;color:#71817a;border:1px solid #e1e6e2}
.settings-card{background:#fff;border:1px solid #e0e6e1;border-radius:20px;padding:26px;max-width:620px}
.settings-card label{display:block;color:#557067;font-size:.85rem}
.settings-card input{width:100%;margin-top:8px;border:1px solid #d8e0dc;border-radius:12px;padding:12px 13px;outline:none}
.settings-card input:focus{border-color:#75a393;box-shadow:0 0 0 3px rgba(33,112,86,.07)}

.admin-login-body{display:grid;place-items:center;background:radial-gradient(circle at 20% 12%,rgba(90,186,28,.08),transparent 25%),#f2f4f0;padding:32px}
.admin-login-wrap{width:min(460px,100%)}
.login-logo{display:block;width:112px;margin:0 auto 22px}
.login-card{background:#fff;border:1px solid #e0e6e1;border-radius:24px;padding:30px;box-shadow:0 22px 70px rgba(10,67,55,.08)}
.login-card h1{font-size:2rem;margin:.1em 0 .22em;font-weight:500}
.login-subtitle{margin:0 0 22px;color:#748780;line-height:1.75;font-size:.9rem}
.login-card label{display:block;margin:14px 0;color:#4f695f;font-size:.84rem}
.login-card input{display:block;width:100%;margin-top:7px;border:1px solid #d8e0dc;border-radius:12px;padding:12px 13px;outline:none}
.login-card input:focus{border-color:#75a393;box-shadow:0 0 0 3px rgba(33,112,86,.07)}
.admin-login-btn{width:100%;border:0;background:#0a5546;color:#fff;border-radius:999px;padding:12px 18px;margin-top:9px;cursor:pointer;font-weight:500}
.login-back{display:block;text-align:center;margin-top:18px;color:#75877f;text-decoration:none;font-size:.78rem}
.alert{background:#fff0f3;color:#902642;padding:11px 13px;border-radius:12px;font-size:.82rem;margin:15px 0}
.alert--success{background:#eef8f2;color:#246743}

@media(max-width:860px){
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{position:relative;height:auto;padding:15px 18px;flex-direction:row;align-items:center;gap:20px;overflow:auto}
  .admin-logo{width:66px;margin:0;flex:0 0 auto}
  .admin-nav{flex-direction:row;gap:5px;white-space:nowrap}
  .admin-nav a{padding:10px 12px}
  .admin-nav .nav-logout{margin-top:0}
  .admin-main{padding:30px 20px 60px}
}

@media(max-width:760px){
  .admin-page-header{flex-direction:column}
  .admin-display-btn{align-self:flex-start}
  .messages-grid{grid-template-columns:1fr}
}

@media(max-width:520px){
  .admin-sidebar{align-items:flex-start}
  .admin-nav{overflow-x:auto;padding-bottom:2px}
  .admin-nav a span:last-child.nav-arrow{display:none}
  .admin-nav a b{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* ======================================================================
   V5 — richer identity backgrounds, still quiet enough for readable text
   Motifs are cropped from the supplied Saudi National Day identity guide.
   ====================================================================== */

/* ---------- Shared public backdrop ---------- */
.scene{
  isolation:isolate;
  background:
    radial-gradient(circle at 18% 12%,rgba(118,159,116,.18),transparent 28%),
    radial-gradient(circle at 88% 82%,rgba(30,121,77,.20),transparent 32%),
    linear-gradient(145deg,#0a4a3b 0%,#06382f 54%,#032821 100%);
}
.scene:before{
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,.25));
}

/* thin woven rails keep the screen from feeling empty */
.scene:after{
  content:"";
  position:absolute;
  z-index:0;
  left:0;right:0;bottom:0;
  height:34px;
  opacity:.48;
  background:
    linear-gradient(90deg,transparent 0 3%,rgba(255,255,255,.03) 3% 97%,transparent 97%),
    repeating-linear-gradient(90deg,
      rgba(136,165,117,.95) 0 9px,
      rgba(8,101,74,.95) 9px 18px,
      rgba(191,178,119,.86) 18px 24px,
      rgba(13,67,56,.96) 24px 34px);
  clip-path:polygon(0 45%,2% 45%,3% 0,4% 45%,96% 45%,97% 0,98% 45%,100% 45%,100% 100%,0 100%);
  pointer-events:none;
}

/* ---------- Step 1: textile + rosette around a calm paper card ---------- */
.step--opening{background:#043027}
.step--opening .scene--opening{overflow:hidden}
.step--opening .scene--opening:before{opacity:.11}

.soft-pattern--top{
  top:14%;right:-70px;
  width:220px;height:360px;
  border:0;
  transform:rotate(-4deg);
  opacity:.34;
  background:url('../img/identity/motif-green-dark.png') center/cover no-repeat;
  filter:saturate(.88) contrast(.96);
  border-radius:4px;
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.soft-pattern--top:before,.soft-pattern--top:after{display:none}

.soft-pattern--bottom{
  left:-118px;bottom:5%;
  width:250px;height:250px;
  opacity:.22;
  background:url('../img/identity/motif-rosette.png') center/contain no-repeat;
  transform:rotate(-9deg);
  filter:saturate(.78);
}

.invitation-card{
  backdrop-filter:blur(2px);
  box-shadow:0 28px 84px rgba(0,0,0,.24);
}
.invitation-card--opening{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.88);
}
.invitation-card--opening:after{
  content:"";
  position:absolute;
  right:18px;left:18px;bottom:16px;
  height:7px;
  opacity:.52;
  border-radius:999px;
  background:repeating-linear-gradient(90deg,#0b6f50 0 13px,#799a7b 13px 24px,#b6a46d 24px 32px,#0b6f50 32px 42px);
}

/* ---------- Step 2: a different composition, same palette ---------- */
.scene--story{
  background:
    radial-gradient(circle at 84% 16%,rgba(133,162,115,.18),transparent 24%),
    linear-gradient(120deg,#0a4c3c 0%,#06382f 60%,#032b25 100%);
}
.story-motif--one{
  width:180px;height:380px;
  right:-58px;top:18%;
  border:0;
  border-radius:4px;
  opacity:.40;
  background:url('../img/identity/motif-olive.png') center/cover no-repeat;
  transform:rotate(-3deg);
  box-shadow:0 18px 56px rgba(0,0,0,.14);
}
.story-motif--two{
  width:210px;height:210px;
  left:-92px;bottom:2%;
  border:0;
  opacity:.18;
  transform:rotate(13deg);
  background:url('../img/identity/motif-rosette.png') center/contain no-repeat;
}
.story-motif--two:before{display:none}
.invitation-card--story{
  position:relative;
  overflow:hidden;
}
.invitation-card--story:after{
  content:"";
  position:absolute;
  left:-15px;top:0;bottom:0;
  width:25px;
  opacity:.68;
  background:url('../img/identity/motif-green-light.png') center/cover no-repeat;
}

/* ---------- Step 3: cream paper with real identity pieces at the edges ---------- */
.write-page{
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 12%,rgba(12,102,70,.09),transparent 23%),
    radial-gradient(circle at 10% 88%,rgba(126,145,92,.10),transparent 24%),
    #f4f0e6;
}
.write-page:before{
  content:"";
  position:absolute;
  z-index:0;
  top:118px;right:-84px;
  width:180px;height:310px;
  opacity:.17;
  background:url('../img/identity/motif-green-light.png') center/cover no-repeat;
  transform:rotate(4deg);
  box-shadow:0 18px 50px rgba(25,63,53,.08);
  pointer-events:none;
}
.write-page:after{
  content:"";
  position:absolute;
  z-index:0;
  left:-112px;bottom:-64px;
  width:260px;height:260px;
  opacity:.10;
  background:url('../img/identity/motif-rosette.png') center/contain no-repeat;
  pointer-events:none;
}
.write-wrap{position:relative;z-index:2}
.write-identity-band{
  height:11px;
  border-radius:2px;
  opacity:.92;
  background:url('../img/identity/motif-green-dark.png') center 21%/cover no-repeat;
  display:block;
}
.write-identity-band span{display:none!important}
.letter-card{
  background:rgba(255,253,247,.965);
  box-shadow:0 22px 68px rgba(18,63,54,.10);
}
.letter-card:after{
  content:"";
  position:absolute;
  right:11px;left:11px;bottom:10px;
  height:5px;
  opacity:.34;
  border-radius:999px;
  background:repeating-linear-gradient(90deg,#0b6f50 0 11px,#8ba176 11px 19px,#b2a36c 19px 26px,#0b6f50 26px 38px);
  pointer-events:none;
}

/* ---------- Step 4: celebratory but controlled ---------- */
.scene--thanks{
  background:
    radial-gradient(circle at 75% 25%,rgba(70,139,83,.16),transparent 24%),
    linear-gradient(145deg,#0a4a3a,#032720 74%);
}
.soft-pattern--thanks{
  width:380px;height:380px;
  left:-160px;top:14%;
  border:0;
  opacity:.20;
  transform:rotate(-8deg);
  background:url('../img/identity/motif-rosette.png') center/contain no-repeat;
}
.soft-pattern--thanks:before,.soft-pattern--thanks:after{display:none}
.scene--thanks:after{opacity:.60}

/* ---------- Display: identity lives in the room, message stays readable ---------- */
.display-shell{
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 45%,rgba(58,135,91,.13),transparent 38%),
    linear-gradient(145deg,#0b493a 0%,#05342b 58%,#02251f 100%);
}
.display-texture{opacity:.10}
.display-texture:before,
.display-texture:after{
  content:"";
  position:absolute;
  top:11%;bottom:11%;
  width:min(15vw,210px);
  opacity:.36;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border-radius:5px;
  box-shadow:0 24px 70px rgba(0,0,0,.16);
}
.display-texture:before{
  right:-4vw;
  background-image:url('../img/identity/motif-green-dark.png');
  transform:rotate(-2deg);
}
.display-texture:after{
  left:-4vw;
  background-image:url('../img/identity/motif-olive.png');
  transform:rotate(2deg);
}
.display-shell:before,.display-shell:after{display:none}
.display-stage:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(36vw,520px);height:min(36vw,520px);
  left:50%;top:50%;transform:translate(-50%,-50%);
  opacity:.075;
  background:url('../img/identity/motif-rosette.png') center/contain no-repeat;
  pointer-events:none;
}
.display-letter{
  width:min(980px,76vw);
  background:rgba(255,253,247,.985);
  border-radius:20px;
  box-shadow:0 30px 90px rgba(0,0,0,.28);
}
.display-letter:before{inset:10px;border-color:rgba(6,47,42,.11)}
.display-letter:after{
  width:180px;height:7px;
  border-radius:2px;
  background:url('../img/identity/motif-green-dark.png') center 20%/cover no-repeat;
}
.trait-strip{
  border:0;
  background:rgba(0,0,0,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  border-radius:999px;
}

/* ---------- Mobile-first tuning: decoration stays at the edges ---------- */
@media(max-width:680px){
  .scene{padding-top:94px;padding-bottom:38px}
  .scene:after{height:24px;opacity:.42}
  .soft-pattern--top{width:145px;height:250px;right:-64px;top:14%;opacity:.30}
  .soft-pattern--bottom{width:190px;height:190px;left:-94px;bottom:2%;opacity:.18}
  .invitation-card{width:min(92vw,520px);padding:33px 21px 31px}
  .invitation-card--story{width:min(90vw,520px)}
  .story-motif--one{width:120px;height:285px;right:-55px;top:20%;opacity:.34}
  .story-motif--two{width:165px;height:165px;left:-78px;bottom:0;opacity:.14}
  .write-page:before{width:120px;height:230px;right:-61px;top:126px;opacity:.14}
  .write-page:after{width:210px;height:210px;left:-110px;bottom:-52px;opacity:.075}
  .write-identity-band{right:16px;left:16px;height:9px}

  .display-texture:before,.display-texture:after{
    width:72px;
    top:16%;bottom:16%;
    opacity:.24;
  }
  .display-texture:before{right:-33px}
  .display-texture:after{left:-33px}
  .display-stage:before{width:68vw;height:68vw;opacity:.055}
  .display-letter{width:88vw;min-height:45vh;padding:34px 25px}
}

@media(min-width:760px){
  .soft-pattern--top{width:310px;height:520px;right:-70px;top:14%;opacity:.34}
  .soft-pattern--bottom{width:390px;height:390px;left:-145px;bottom:-6%;opacity:.20}
  .invitation-card--opening{margin-left:7vw}
  .invitation-card--story{margin-right:11vw;width:min(650px,68vw)}
  .story-motif--one{width:260px;height:520px;right:2vw;top:19%;opacity:.40}
  .story-motif--two{width:300px;height:300px;left:-105px;bottom:-6%;opacity:.15}
  .write-page:before{right:clamp(-95px,-4vw,-50px);width:245px;height:440px;top:150px}
  .write-page:after{left:-120px;bottom:-95px;width:380px;height:380px}
  .soft-pattern--thanks{width:520px;height:520px;left:-180px;top:10%}
}