/* ------------------------------------------------------------------
   components.css - pieces of the pink / lavender design that more than one
   page uses: plan cards, the month steps and the FAQ list.

   A page asks for it with fr_modern_look( 'name', array( 'components' ) ). It
   loads after modern.css and before the page's own sheet, so a page can still
   adjust any of this.
   ------------------------------------------------------------------ */

.modern .tint{color:#a36ab3}
.modern .sec-title{margin:8px 0;color:#261f31;font-size:clamp(24px,2.2vw,29px);font-weight:720;line-height:1.16;letter-spacing:-.042em}
.plan-card.featured :focus-visible{outline-color:#d6b8ff}

/* --- the short hero every inner page uses ---------------------------
   A title, one short line and a call to action, nothing else, so the page's
   own content starts inside the first screen. The header sits over it. */
.top-hero :focus-visible{outline-color:#d6b8ff}
.top-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(115deg,#171320,#23182f 64%,#1c1730)}
.top-hero:before{content:"";position:absolute;z-index:-1;width:550px;height:550px;right:-130px;top:-230px;background:radial-gradient(circle,#b874bc50,transparent 66%);filter:blur(30px);animation:breathe 9s ease-in-out infinite alternate}
.top-hero:after{content:"";position:absolute;z-index:-1;width:330px;height:330px;left:-210px;bottom:-210px;border-radius:50%;background:#9474d737;filter:blur(70px)}
.top-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px;min-height:calc(var(--hh) + 158px);padding-block:calc(var(--hh) + 19px) 23px}
.top-hero .eyebrow{color:#cdb2e6;font-size:10px;letter-spacing:2.1px}
.top-hero .twinkle{margin-right:9px;color:var(--rose);font-size:18px;line-height:1}
.top-hero h1{max-width:960px;margin:10px 0 0;color:#fff;font-size:clamp(30px,3vw,38px);font-weight:750;line-height:1.13;letter-spacing:-.047em}
.top-hero .accent{background:linear-gradient(110deg,#ffd6e8,#d8c1ff);-webkit-background-clip:text;background-clip:text;color:transparent}
/* A heading that wraps breaks into even lines, not a long one and a stray word. */
.top-hero.balance h1{text-wrap:balance}
.top-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:11px}
.top-hero .btn{font-size:12px}
.top-hero .btn-primary{gap:18px;padding:15px 22px;background:linear-gradient(110deg,#f4aeca,#dbc4ff);color:#2b1a2e;box-shadow:0 10px 34px #d87baf18}
.top-hero .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 38px #d87baf33}
.top-hero .btn-secondary{padding:7px 0;gap:9px;border:0;border-bottom:1px solid #8e779b;border-radius:0;background:none;box-shadow:none;color:#d5c2df;transition:color .25s,border-color .25s}
.top-hero .btn-secondary:hover{transform:none;color:#fff;border-color:#fff}

/* --- plan cards ----------------------------------------------------- */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.plan-card{position:relative;min-width:0;display:flex;flex-direction:column;isolation:isolate;padding:30px 28px 26px;border:1px solid #e8e0ec;border-radius:23px;background:#fff;box-shadow:0 16px 45px rgba(59,28,73,.07)}
.modern .plan-card.reveal{transition:opacity .75s ease,transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s,border-color .35s}
.modern .plan-card.reveal.visible:hover{transform:translateY(-9px);border-color:#c6a9d1;box-shadow:0 27px 65px #4a28551c}
.plan-card.featured{border-color:#755184;background:linear-gradient(145deg,#281b38,#21182e 63%,#2e1a3f);color:#fff;box-shadow:0 20px 60px #4d2e6540}
.plan-card.featured:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(circle at 100% 0%,#9e539633,transparent 45%)}
.modern .plan-card.featured.reveal.visible:hover{border-color:#755184;box-shadow:0 30px 65px #4d2e6560}
.reco{position:absolute;top:17px;right:21px;padding:6px 11px;border-radius:30px;background:#f2bfd8;color:#552d50;font-size:10px;font-weight:850;letter-spacing:.2px}
.plan-top{min-height:148px}
.plan-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#f6ecfa;color:#8f5aa5;font-size:18px;box-shadow:0 4px 14px #9563a318}
.featured .plan-icon{background:#a264a351;color:#ffdaec}
.plan-top h3{margin:14px 0 7px;color:#281e2d;font-size:28px;line-height:1.2;letter-spacing:-.04em}
.featured .plan-top h3{color:#fff}
.plan-description{max-width:300px;margin:0;color:#6b6575;font-size:12px;line-height:1.75}
.featured .plan-description{color:#cbbfd4}
.price-block{margin-bottom:1px;padding:16px 0 17px;border-bottom:1px solid #ece6ef}
.featured .price-block{border-color:#ffffff25}
.from{display:block;color:#766f82;font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.featured .from{color:#cfb5d4}
.cost{display:flex;align-items:baseline;gap:2px;line-height:1}
.currency{font-size:29px;font-weight:700;letter-spacing:-1px;transform:translateY(-11px)}
.cost strong{font-size:clamp(47px,4.7vw,64px);font-weight:770;letter-spacing:-.056em}
.cost .cost-text{font-size:30px;letter-spacing:-.03em}
.per{margin-left:8px;color:#6f6879;font-size:12px;font-weight:650}
.featured .per{color:#cbbdd4}
.plan-button{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;padding:15px 19px;border-radius:12px;background:#2b2135;color:#fff;font-size:12px;font-weight:800;transition:transform .2s,box-shadow .2s}
.plan-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px #8c57972f}
.featured .plan-button{background:linear-gradient(115deg,#f2b7d2,#ddc8fc);color:#2c2032}
.inclusion-label{margin:26px 0 14px;color:#7a7283;font-size:10px;font-weight:850;letter-spacing:1.45px;text-transform:uppercase}
.featured .inclusion-label{color:#bb9fc3}
.feature-list{display:flex;flex-direction:column;gap:13px;margin:0;padding:0;list-style:none}
.feature-list li{display:flex;align-items:flex-start;gap:11px;color:#4d4656;font-size:12px;line-height:1.6}
.featured .feature-list li{color:#ebe0ed}
.check{flex:0 0 19px;display:grid;place-items:center;width:19px;height:19px;margin-top:1px;border-radius:50%;background:#f4e7f5;color:#8f4f99;font-size:10px;font-weight:900}
.featured .check{background:#b477af29;color:#f5c1e0}
.addon{margin-top:auto;padding-top:23px;color:#6d6979;font-size:11px;line-height:1.65}
.addon a{display:block;color:#83589c;text-decoration:underline;text-underline-offset:3px}
.featured .addon{color:#c8bcd1}
.featured .addon a{color:#f5c0da}

/* --- the steps of a month, or of a build ---------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.step{min-height:220px;padding:27px 23px;border:1px solid #e9e3eb;border-radius:18px;background:#fff}
.modern .step.reveal{transition:opacity .75s ease,transform .3s,box-shadow .3s}
.modern .step.reveal.visible:hover{transform:translateY(-5px);box-shadow:0 16px 45px rgba(59,28,73,.07)}
.step-number{color:#8c6f95;font-size:11px;font-weight:850;letter-spacing:1.5px}
.step-symbol{margin:17px 0 4px;color:#aa75b9;font-size:28px;line-height:1.4}
.step h3{margin:0 0 6px;color:#2e2736;font-size:20px;letter-spacing:-.03em}
.step p{margin:0;color:#6a6270;font-size:12px;line-height:1.75}

/* --- questions ------------------------------------------------------ */
.faq-list{border-top:1px solid #dfd6e5}
.faq-item{border-bottom:1px solid #dfd6e5}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 3px;color:#261f31;font-size:14px;font-weight:740;line-height:1.55;list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{flex:0 0 27px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#f0e8f5;color:#7d5390;font-size:19px;line-height:1;transition:transform .25s,background .25s}
.faq-item[open] .faq-plus{transform:rotate(45deg);background:#edd6f0}
.faq-answer{max-width:800px;padding:0 55px 23px 3px;color:#665e6e;font-size:13px;line-height:1.85}

/* --- the closing panel as a row: text on the left, one button on the right -- */
.cta-row{align-items:center;justify-content:space-between;gap:32px;padding:clamp(30px,4.8vw,62px)}
.cta-row h2{margin:0 0 12px;font-size:clamp(26px,2.8vw,36px);line-height:1.16;letter-spacing:-.038em}
.cta-row p{max-width:none;margin:0;color:#685873;font-size:13px;line-height:1.7}
.cta-row .btn{flex:none}

/* --- smaller screens ------------------------------------------------ */
@media(max-width:1100px){
  .top-hero-grid{gap:25px}
  .plan-card{padding:26px 20px 24px}
}
@media(max-width:830px){
  .top-hero-grid{grid-template-columns:1fr;gap:15px;min-height:0;padding-block:calc(var(--hh) + 22px) 26px}
  .top-hero h1{max-width:650px;font-size:clamp(28px,4.4vw,34px)}
  .cta-row{flex-direction:column;align-items:flex-start}
  .plan-grid{grid-template-columns:1fr 1fr}
  /* The recommended plan is the middle one; on two columns it leads, full width,
     so the other two sit side by side under it instead of leaving gaps. */
  .plan-card.featured{order:-1;grid-column:span 2}
  .plan-top{min-height:125px}
  .steps{grid-template-columns:1fr 1fr}
}
@media(max-width:570px){
  .top-hero-grid{gap:13px;padding-block:calc(var(--hh) + 20px) 23px}
  .top-hero h1{font-size:clamp(27px,7.6vw,32px);line-height:1.13;letter-spacing:-.036em}
  .top-hero .btn-primary{padding:12px 17px}
  .plan-grid{grid-template-columns:1fr;gap:17px}
  .plan-card.featured{order:0;grid-column:span 1}
  .plan-card{padding:25px 23px}
  .plan-top{min-height:auto}
  .price-block{padding:20px 0}
  .steps{gap:9px}
  .step{min-height:205px;padding:19px 17px}
  .step-symbol{margin:10px 0 3px}
  .step h3{font-size:18px}
  .step p{font-size:11px}
  .faq-item summary{padding:20px 0;font-size:13px}
  .faq-answer{padding-right:10px}
}
@media(max-width:380px){
  .top-hero-actions{gap:8px}
  .steps{grid-template-columns:1fr}
  .step{min-height:0}
}

/* --- the rhythm of an inner page's content ---------------------------
   Blocks of page content sit close under the short hero, so the first one is on
   screen without scrolling, and breathe from there on. .band-tint is the same
   block on the pale lavender band; .cta-section is the closing panel's row. */
.modern .band{padding-block:44px 40px}
.modern .band-tint{padding-block:66px 72px;background:#f3eff7;border-block:1px solid #e8deed}
.modern .band .section-head,.modern .band-tint .section-head{margin-bottom:26px}
.modern .cta-section{padding-block:30px 82px}
@media(max-width:740px){
  .modern .band{padding-block:34px 30px}
  .modern .band-tint{padding-block:48px 52px}
  .modern .cta-section{padding-block:24px 60px}
}