/* CreatorTogether — publication layer
   Loaded after ct-refine.css. Covers, the free-edition offer, membership,
   the three-layer explainer, publication cards and the landing page. */

.ct-anchor{display:block;position:relative;top:-90px;visibility:hidden;}

/* ------------------------------------------------------------- COVERS */
/* Book-shaped and typographic until a real designed cover exists. The
   proportions are a trade paperback rather than a square, so the artwork
   reads as a publication and not as a social card. */
.ct-pcover{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  aspect-ratio:1/1.38;border-radius:4px 10px 10px 4px;
  box-shadow:var(--ct-shadow-lg);
}
.ct-pcover--img img{width:100%;height:100%;object-fit:cover;display:block;}
/* The spine. One inset shadow does the whole job. */
.ct-pcover--gen::before{
  content:"";position:absolute;inset:0 auto 0 0;width:13px;
  background:linear-gradient(90deg,rgba(0,0,0,.26),rgba(0,0,0,.04));
}
.ct-pcover--gen{padding:30px 26px 24px 34px;color:#fff;justify-content:flex-start;}
.ct-pcover__kicker{
  font-size:.54rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  opacity:.82;margin-bottom:auto;
}
.ct-pcover__title{
  font-size:1.5rem;font-weight:800;line-height:1.14;letter-spacing:-.035em;
  margin:18px 0 0;text-wrap:balance;
}
.ct-pcover__sub{font-size:.78rem;line-height:1.45;opacity:.9;margin-top:10px;font-weight:500;}
.ct-pcover__rule{height:2px;width:38px;background:rgba(255,255,255,.7);margin:16px 0 12px;border-radius:2px;}
.ct-pcover__mark{font-size:.63rem;font-weight:800;letter-spacing:.04em;opacity:.9;}
.ct-pcover--blank .ct-pcover__title{font-size:1.15rem;opacity:.85;}
.ct-pcover--lg{max-width:330px;}
.ct-pcover--lg .ct-pcover__title{font-size:1.85rem;}
.ct-pcover--hero{width:298px;}

/* ---------------------------------------------------------- HERO (PUB) */
.ct-hero__grid--pub{grid-template-columns:1.1fr .9fr;}
.ct-hero__art--pub{display:flex;align-items:center;justify-content:center;min-height:460px;}
.ct-hero__book{position:relative;display:block;transform:rotate(-4deg);transition:transform .35s ease;}
.ct-hero__book:hover{transform:rotate(-1.5deg) translateY(-6px);}
.ct-hero__booktag{
  position:absolute;top:-14px;right:-18px;z-index:2;
  background:var(--ct-grad-45);color:#fff;font-size:.72rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border-radius:999px;
  box-shadow:var(--ct-shadow);
}
.ct-hero__book--empty{transform:rotate(-4deg);cursor:default;}

/* ------------------------------------------------- THE FREE PUBLICATION */
.ct-sec--pfree{padding:92px 0;}
.ct-pfree{
  display:grid;grid-template-columns:330px 1fr;gap:56px;align-items:center;
  background:#fff;border-radius:var(--ct-radius);padding:48px;
  box-shadow:inset 0 0 0 1px var(--ct-line),var(--ct-shadow);
}
.ct-pfree__media{display:flex;justify-content:center;}
.ct-pfree__label{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ct-violet);margin-bottom:12px;
}
.ct-site .ct-pfree__title{font-size:2rem;font-weight:800;letter-spacing:-.035em;line-height:1.14;margin:0 0 12px;}
.ct-site .ct-pfree__title a{color:var(--ct-ink);}
.ct-site .ct-pfree__title a:hover{color:var(--ct-violet);}
.ct-pfree__promise{font-size:1.06rem;line-height:1.6;color:var(--ct-ink-soft);margin:0 0 20px;}
.ct-pfree__meta{font-size:.8rem;font-weight:700;color:var(--ct-ink-soft);margin:0 0 22px;letter-spacing:.01em;}
.ct-pfree__form{margin:0 0 10px;}
.ct-pfree__dl{margin:18px 0 0;}

/* The demonstration marker. Deliberately plain: it has to be unmistakable
   on staging and it must never be mistaken for part of the design. */
.ct-demo-note{
  font-size:.76rem;font-weight:700;color:#9A3412;background:#FFF7ED;
  border-left:3px solid #F97316;padding:8px 12px;border-radius:0 6px 6px 0;
  margin:0 0 18px;line-height:1.45;
}
/* --------------------------------------------------------- MEMBERSHIP */
.ct-sec--memb .ct-grid--memb{gap:22px;}
.ct-mcard{
  background:#fff;border-radius:var(--ct-radius-sm);padding:26px 24px 24px;
  box-shadow:inset 0 0 0 1px var(--ct-line);
}
.ct-mcard__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;margin-bottom:16px;
  background:var(--ct-grad-45);color:#fff;
}
.ct-site .ct-mcard__title{font-size:1rem;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--ct-ink);}
.ct-mcard__desc{font-size:.88rem;line-height:1.55;color:var(--ct-ink-soft);margin:0;}
.ct-memb__foot{margin-top:40px;text-align:center;}
.ct-cta-row--mid{justify-content:center;margin-top:0;}
.ct-memb__note{font-size:.86rem;color:var(--ct-ink-soft);margin:20px 0 0;}

/* ----------------------------------------------------- THE THREE LAYERS */
/* The pipeline strip. It names the engine in one line so the three cards
   below it read as stages of one business rather than three products. */
.ct-flow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px;list-style:none;margin:0 0 48px;padding:0;
}
.ct-flow__step span{
  display:inline-block;background:#fff;box-shadow:inset 0 0 0 1px var(--ct-line);
  border-radius:999px;padding:9px 18px;font-size:.78rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ct-ink);
}
.ct-flow__step:last-child span{background:var(--ct-grad-45);color:#fff;box-shadow:none;}
.ct-flow__arrow{display:inline-flex;color:var(--ct-ink-soft);opacity:.5;}

.ct-layer{
  display:flex;flex-direction:column;height:100%;background:#fff;
  border-radius:var(--ct-radius-sm);padding:30px 28px 26px;
  box-shadow:inset 0 0 0 1px var(--ct-line);position:relative;overflow:hidden;
}
.ct-layer::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--ct-grad-45);}
.ct-layer--stories::before{background:linear-gradient(90deg,#2563EB,#7C3AED);}
.ct-layer--pubs::before{background:linear-gradient(90deg,#7C3AED,#EC4899);}
.ct-layer--together::before{background:linear-gradient(90deg,#EC4899,#F97316);}
.ct-layer__tag{
  align-self:flex-start;font-size:.64rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ct-ink-soft);
  background:var(--ct-mist);padding:6px 12px;border-radius:999px;margin-bottom:16px;
}
.ct-site .ct-layer__name{font-size:1.16rem;font-weight:800;letter-spacing:-.025em;margin:0 0 6px;color:var(--ct-ink);}
.ct-layer__line{font-size:.95rem;font-weight:700;color:var(--ct-ink);margin:0 0 10px;}
.ct-layer__desc{font-size:.9rem;line-height:1.6;color:var(--ct-ink-soft);margin:0 0 20px;}
.ct-layer__cta{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:.88rem;font-weight:700;color:var(--ct-violet);
}
.ct-layer__cta:hover{gap:11px;}

/* --------------------------------------------------- PUBLICATION CARDS */
.ct-pcard{display:flex;flex-direction:column;height:100%;}
.ct-pcard__media{display:block;margin-bottom:18px;transition:transform .22s ease;}
.ct-pcard:hover .ct-pcard__media{transform:translateY(-5px);}
.ct-pcard__media .ct-pcover{max-width:none;}
.ct-pcard__body{display:flex;flex-direction:column;flex:1;}
.ct-pcard__badge{
  align-self:flex-start;font-size:.62rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:11px;
}
.ct-pcard__badge--free{background:var(--ct-grad-45);color:#fff;}
.ct-pcard__badge--member{background:var(--ct-mist);color:var(--ct-ink-soft);box-shadow:inset 0 0 0 1px var(--ct-line);}
.ct-pcard__title{font-size:1.1rem;font-weight:800;letter-spacing:-.025em;line-height:1.28;color:var(--ct-ink);margin-bottom:7px;}
.ct-pcard:hover .ct-pcard__title{color:var(--ct-violet);}
.ct-pcard__sub{font-size:.88rem;line-height:1.55;color:var(--ct-ink-soft);margin-bottom:12px;}
.ct-pcard__meta{margin-top:auto;font-size:.74rem;font-weight:700;color:var(--ct-ink-soft);}

/* ------------------------------------------------ PUBLICATION LANDING */
.ct-phead{padding:70px 0 64px;background:var(--ct-mist);}
.ct-phead__grid{display:grid;grid-template-columns:330px 1fr;gap:56px;align-items:center;}
.ct-phead__media{display:flex;justify-content:center;}
.ct-phead__series{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ct-violet);margin-bottom:14px;
}
.ct-site .ct-phead__title{font-size:2.9rem;font-weight:800;letter-spacing:-.04em;line-height:1.08;margin:0 0 16px;}
.ct-phead__sub{font-size:1.14rem;line-height:1.58;color:var(--ct-ink-soft);margin:0 0 18px;}
.ct-phead__meta{font-size:.82rem;font-weight:700;color:var(--ct-ink-soft);margin:0 0 26px;}
.ct-phead__get{margin-top:6px;}
.ct-phead__locked{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ct-ink);margin:0;}
.ct-site .ct-pub__h{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin:0 0 20px;}
.ct-pub__prov{
  font-size:.8rem;line-height:1.6;color:var(--ct-ink-soft);
  border-top:1px solid var(--ct-line);padding-top:20px;margin-top:40px;
}

/* Astra underlines every link inside content, so each new anchor component
   has to opt out explicitly. */
.ct-site .ct-pcard,.ct-site .ct-layer__cta,.ct-site .ct-hero__book,
.ct-site .ct-pfree__title a,.ct-site .ct-pfree__media a,.ct-site .ct-anchor{
  text-decoration:none!important;
}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width:1024px){
  .ct-hero__grid--pub{grid-template-columns:1fr;gap:40px;}
  .ct-hero__art--pub{min-height:0;}
  .ct-pfree,.ct-phead__grid{grid-template-columns:260px 1fr;gap:36px;}
  .ct-pfree{padding:34px;}
  .ct-grid--memb{grid-template-columns:repeat(2,1fr);}
  .ct-grid--pubs,.ct-grid--layers{grid-template-columns:repeat(2,1fr);}
  .ct-site .ct-phead__title{font-size:2.3rem;}
}
@media (max-width:760px){
  .ct-pfree,.ct-phead__grid{grid-template-columns:1fr;}
  .ct-pfree__media,.ct-phead__media{justify-content:flex-start;}
  .ct-pcover--lg{max-width:240px;}
  .ct-grid--pubs,.ct-grid--layers,.ct-grid--memb{grid-template-columns:1fr!important;}
  .ct-pcover--hero{width:230px;}
  .ct-hero__art--pub{justify-content:flex-start;}
  .ct-flow{gap:7px;margin-bottom:34px;}
  .ct-flow__step span{padding:7px 13px;font-size:.68rem;}
  .ct-site .ct-phead__title{font-size:1.95rem;}
  .ct-hero__booktag{right:-6px;}
}
/* Two calls to action in the Created Together invitation, not one. */
.ct-await--invite .ct-await__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.ct-await--invite p{max-width:62ch;margin-left:auto;margin-right:auto;}

/* --------------------------------------------------------- HEADER FIT */
/* Six primary items plus the CTA button no longer fit between Astra's desktop
   breakpoint and roughly 1200px, so the nav tightens instead of wrapping the
   button onto a second row. Scoped away from .ast-header-break-point, which is
   the stacked mobile menu and has its own sizing. */
@media (min-width:922px) and (max-width:1200px){
  body.ct-site:not(.ast-header-break-point) .ast-builder-menu-1 .main-header-menu>.menu-item>.menu-link{
    font-size:.9rem;padding-left:11px!important;padding-right:11px!important;}
  body.ct-site:not(.ast-header-break-point) .main-header-menu>.menu-item.ct-nav-cta>.menu-link{
    padding:10px 17px!important;}
}
@media (min-width:922px) and (max-width:1050px){
  body.ct-site:not(.ast-header-break-point) .ast-builder-menu-1 .main-header-menu>.menu-item>.menu-link{
    font-size:.78rem;padding-left:6px!important;padding-right:6px!important;letter-spacing:-.01em;}
  body.ct-site:not(.ast-header-break-point) .main-header-menu>.menu-item.ct-nav-cta>.menu-link{
    padding:8px 13px!important;font-size:.78rem;}
  /* The logo is the other big consumer of the row at this width. */
  body.ct-site:not(.ast-header-break-point) .ct-logo img,
  body.ct-site:not(.ast-header-break-point) .site-branding img{max-width:168px;}
}