:root{
  --brand-bg:#050817;
  --brand-bg-deep:#020617;
  --brand-panel:rgba(21,20,49,.86);
  --brand-panel-soft:rgba(255,255,255,.055);
  --brand-line:rgba(205,125,255,.24);
  --brand-text:#fbf9ff;
  --brand-muted:rgba(244,238,255,.72);
  --brand-purple:#b43cff;
  --brand-pink:#f34da8;
  --brand-orange:#ff8f4d;
  --brand-gold:#ffc57d;
  --brand-radius:8px;
  --brand-font:"Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --brand-page-width:1680px;
  --brand-page-gutter:48px;
}

body,
body:not(.vitrine-page){
  color:var(--brand-text);
  font-family:var(--brand-font);
}

body:not(.vitrine-page){
  background:
    radial-gradient(900px 520px at 78% 8%,rgba(187,64,176,.18),transparent 68%),
    radial-gradient(720px 440px at 8% 24%,rgba(79,80,190,.16),transparent 70%),
    linear-gradient(150deg,var(--brand-bg-deep),var(--brand-bg) 55%,#12071c);
}

body.weekly-page,
body.legal-page,
body.love-page{
  padding:0;
}

body:not(.vitrine-page)::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.58) 0 1px,transparent 1.5px),
    radial-gradient(circle at 75% 35%,rgba(255,197,125,.66) 0 1px,transparent 1.5px);
  background-size:280px 280px,360px 360px;
}

/* Every top-level page uses the same responsive rail as the homepage. */
.landing,
.weekly-shell,
.pricing-shell,
.connexion-shell,
.identity-shell,
.legal-shell,
.faq-shell,
.about-shell,
.admin-shell,
body.love-page .shell{
  width:min(var(--brand-page-width),calc(100% - var(--brand-page-gutter)))!important;
  max-width:var(--brand-page-width)!important;
  margin-right:auto!important;
  margin-left:auto!important;
}

/* The questionnaire keeps a comfortable reading width below its full-width brand rail. */
.form-shell{
  width:min(var(--brand-page-width),calc(100% - var(--brand-page-gutter)))!important;
  max-width:var(--brand-page-width)!important;
}

.form-shell>.flash,
.form-shell>.form-card,
.form-shell>.legal-footer{
  width:min(820px,100%);
  margin-right:auto;
  margin-left:auto;
}

.form-shell>.form-top{
  width:100%;
}

.brand-link,.legal-brand,.brand-link:visited,.legal-brand:visited,
.brand,.weekly-brand,.reader-back--brand,.public-loading-brand,.admin-header .brand-link{
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  font-family:var(--brand-font);
  font-size:1.18rem;
  font-weight:900;
  letter-spacing:.20em;
  line-height:1;
}

.site-header .brand{
  gap:12px;
  font-family:var(--brand-font);
  font-size:1.18rem;
  font-weight:900;
  letter-spacing:.20em;
  line-height:1;
}

.site-header .brand>span:last-child{
  color:#fff;
}

.brand-link>span:first-child,.legal-brand>span:first-child,.brand__mark,
.weekly-brand>span:first-child,.public-loading-brand>span:first-child,
.admin-header .brand-link>span:first-child{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  color:var(--brand-gold);
  font-size:1.9rem;
  line-height:1;
  text-shadow:0 0 22px rgba(255,143,77,.62);
}

.site-header .brand__mark{
  width:34px;
  height:34px;
  color:var(--brand-gold);
  font-size:1.9rem;
  line-height:1;
}

.reader-brand-action{display:inline-flex!important;align-items:center;gap:9px;text-decoration:none!important}
.reader-brand-action>span:first-child{width:28px;height:28px;color:var(--brand-gold);font-size:1.45rem}
.reader-brand-action>span:last-child{display:grid;line-height:1.05}
.reader-brand-action strong{color:#fff;font-family:var(--brand-font);text-transform:uppercase;letter-spacing:.20em;font-size:.88rem}
.reader-brand-action small{margin-top:4px;color:var(--brand-muted);font-size:.68rem;font-weight:700;letter-spacing:0}

body:not(.vitrine-page) .btn,
body:not(.vitrine-page) button,
body:not(.vitrine-page) input,
body:not(.vitrine-page) textarea,
body:not(.vitrine-page) select{
  border-radius:var(--brand-radius);
}

body:not(.vitrine-page) .btn--primary,
body:not(.vitrine-page) button.btn--primary{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(135deg,var(--brand-purple),var(--brand-pink) 52%,var(--brand-orange));
  box-shadow:0 14px 36px rgba(218,65,174,.22);
}

body:not(.vitrine-page) .kicker{
  color:#f18ed1;
  letter-spacing:.12em;
}

.identity-card,.form-card,.reader-hero-card,.premium-panel,.pricing-card,.plan,
.connexion-card,.legal-card,.faq-card,.about-section,.story-card,.final-cta,
.admin-card,.card,.weekly-sign-card,.weekly-cta,.weekly-empty{
  border-radius:var(--brand-radius)!important;
  border-color:var(--brand-line)!important;
}

.identity-card,.form-card,.reader-hero-card,.pricing-card,.plan,.connexion-card,
.legal-card,.faq-card,.about-section,.story-card,.admin-card,.card{
  background-color:var(--brand-panel);
}

.legal-footer,.about-footer,.faq-footer,.site-footer,.reader-bottom-nav .legal-footer{
  color:var(--brand-muted);
}

.legal-footer a,.about-footer a,.faq-footer a,.site-footer a{
  color:inherit;
}

.identity-shell>.site-header{
  grid-column:1 / -1;
  width:100%;
}

@media(max-width:1500px){
  :root{
    --brand-page-width:1360px;
    --brand-page-gutter:40px;
  }
}

@media(max-width:1180px){
  :root{
    --brand-page-width:980px;
  }
}

@media(max-width:720px){
  :root{
    --brand-page-width:440px;
    --brand-page-gutter:28px;
  }
}

@media(max-width:620px){
  .brand-link,.legal-brand,.brand,.weekly-brand,.site-header .brand{font-size:.94rem;letter-spacing:.13em}
  .brand-link>span:first-child,.legal-brand>span:first-child,.brand__mark,
  .weekly-brand>span:first-child,.public-loading-brand>span:first-child,
  .admin-header .brand-link>span:first-child{
    width:28px;
    height:28px;
    font-size:1.5rem;
  }
  .site-header .brand__mark{
    width:28px;
    height:28px;
    font-size:1.5rem;
  }
}
