@layer base, parts, pages;

@layer base {
  :root {
    --grape: #6a45c2; --deep: #3e2a8c; --ink: #2b1b5e; --pink: #f056be; --magenta: #c040e0;
    --sun: #ffb028; --teal: #20c8d8; --lime: #8ed63a; --cream: #fff8f0; --navy: #1d1650; --sand: #f3c98a;
    --disp: "Lilita One", "Arial Black", sans-serif; --hand: "Boogaloo", "Lilita One", sans-serif;
    --text: "Nunito", system-ui, sans-serif; --r: 26px; --wrap: 1240px;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; font: 400 17px/1.6 var(--text); color: var(--ink); overflow-x: hidden;
    background-color: var(--grape);
    background-image: radial-gradient(ellipse 60px 22px at 20% 30%, rgba(255,255,255,.07) 98%, transparent),
      radial-gradient(ellipse 22px 60px at 70% 60%, rgba(40,10,110,.14) 98%, transparent),
      radial-gradient(ellipse 50px 18px at 85% 15%, rgba(255,255,255,.06) 98%, transparent),
      radial-gradient(ellipse 18px 50px at 35% 80%, rgba(40,10,110,.12) 98%, transparent);
    background-size: 190px 170px, 210px 190px, 170px 150px, 230px 210px; }
  img { max-inline-size: 100%; block-size: auto; display: block; }
  a { color: inherit; }
  h1, h2, h3 { font-family: var(--disp); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: .01em; }
  p { margin: 0 0 1em; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
  main { display: block; }
}

@layer parts {
  .fy-strip { margin: 0; display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; padding: 6px 16px;
    background: var(--navy); color: #fff; font: 400 16px/1.3 var(--hand); letter-spacing: .06em; text-transform: uppercase; }
  .fy-strip span + span { color: var(--sun); }
  .fy-top { display: flex; align-items: center; gap: 18px; max-inline-size: var(--wrap); margin: 14px auto 0; padding: 8px 22px;
    background: #fff; border-radius: 999px; box-shadow: 0 6px 0 rgba(43,27,94,.35); position: relative; inline-size: calc(100% - 28px); }
  .fy-top__logo img { inline-size: 112px; }
  .fy-top__nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-inline: auto; justify-content: center; }
  .fy-top__nav a, .fy-top__menu div a { font: 400 19px/1 var(--hand); text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
    padding: 9px 13px; border-radius: 999px; color: var(--deep); }
  .fy-top__nav a:hover { background: var(--grape); color: #fff; }
  .fy-top__cta img { inline-size: 190px; transition: transform .15s; }
  .fy-top__cta:hover img, .fy-go:hover img { transform: translateY(3px); }
  .fy-top__menu { display: none; }
  .fy-top__menu summary { list-style: none; inline-size: 46px; block-size: 46px; border-radius: 50%; background: var(--grape);
    display: grid; place-content: center; gap: 5px; cursor: pointer; }
  .fy-top__menu summary::-webkit-details-marker { display: none; }
  .fy-top__menu summary i { display: block; inline-size: 22px; block-size: 3px; border-radius: 3px; background: #fff; }
  .fy-top__menu div { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 10px); z-index: 20; background: #fff;
    border-radius: var(--r); padding: 14px; display: grid; gap: 4px; box-shadow: 0 10px 30px rgba(43,27,94,.4); }

  .fy-pill { display: inline-flex; align-items: center; gap: 10px; font: 400 21px/1 var(--hand); text-transform: uppercase; letter-spacing: .05em;
    text-decoration: none; padding: 14px 26px 15px; border-radius: 999px; background: var(--pink); color: #fff;
    box-shadow: 0 6px 0 var(--magenta); transition: transform .15s, box-shadow .15s; }
  .fy-pill:hover { transform: translateY(4px); box-shadow: 0 2px 0 var(--magenta); }
  .fy-pill i { font-style: normal; }
  .fy-pill--sun { background: var(--sun); color: var(--ink); box-shadow: 0 6px 0 #d9860a; }
  .fy-pill--sun:hover { box-shadow: 0 2px 0 #d9860a; }
  .fy-pill--ghost { background: transparent; box-shadow: inset 0 0 0 3px #fff; }
  .fy-pill--ghost:hover { box-shadow: inset 0 0 0 3px #fff; background: rgba(255,255,255,.15); }
  .fy-pill--ink { background: var(--ink); box-shadow: 0 6px 0 #0f0838; }
  .fy-chip { display: inline-block; font: 400 17px/1 var(--hand); text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
    padding: 8px 16px; border-radius: 999px; border: 2px solid var(--grape); color: var(--grape); background: #fff; }
  .fy-chip:hover, .fy-chip.is-on { background: var(--grape); color: #fff; }

  .fy-sec { max-inline-size: var(--wrap); margin: 34px auto; padding: 44px clamp(18px, 4vw, 48px); border-radius: 40px; color: #fff; }
  .fy-sec--cream { background: var(--cream); color: var(--ink); box-shadow: 0 8px 0 rgba(43,27,94,.3); inline-size: calc(100% - 28px); }
  .fy-hd { text-align: center; margin-block-end: 30px; }
  .fy-hd h2 { font-size: clamp(34px, 5vw, 56px); text-shadow: 0 4px 0 rgba(43,27,94,.25); }
  .fy-sec--cream .fy-hd h2 { color: var(--grape); text-shadow: none; }
  .fy-hd p { font: 400 22px/1.2 var(--hand); letter-spacing: .04em; margin: 8px 0 0; color: var(--sun); }
  .fy-sec--cream .fy-hd p { color: var(--magenta); }

  .fy-rate { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
  .fy-rate i { inline-size: 92px; block-size: 17px; background: linear-gradient(90deg, var(--sun) var(--w), #dcd3ee var(--w));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6 .7-4.4 4.2 1.1 6-5.3-3-5.3 3 1.1-6L1.4 7.8l6-.7z'/%3E%3C/svg%3E") 0 0/18.4px 17px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6 .7-4.4 4.2 1.1 6-5.3-3-5.3 3 1.1-6L1.4 7.8l6-.7z'/%3E%3C/svg%3E") 0 0/18.4px 17px repeat-x; }
  .fy-rate b { font-weight: 800; }
  .fy-rate small { color: #7a6aa8; font-size: 13px; }

  .fy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
  .fy-card { background: #fff; border-radius: var(--r); padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 8px;
    border: 3px solid #eadff9; transition: border-color .15s, transform .15s; }
  .fy-card:hover { border-color: var(--pink); transform: rotate(-.6deg); }
  .fy-card__pic { position: relative; display: block; border-radius: 18px; overflow: hidden; background: #fff; }
  .fy-card__pic em { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; background: var(--sun); color: var(--ink);
    font: 400 15px/1 var(--hand); text-transform: uppercase; letter-spacing: .05em; padding: 6px 10px; border-radius: 999px; }
  .fy-card h3 { font: 800 16px/1.25 var(--text); color: var(--ink); min-block-size: 2.5em; }
  .fy-card h3 a { text-decoration: none; }
  .fy-card__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-start: auto; }
  .fy-card__row strong { font: 400 24px/1 var(--disp); color: var(--magenta); }
  .fy-card__row .fy-rate small { display: none; }
  .fy-go { display: block; inline-size: 100%; }
  .fy-go img { inline-size: 100%; transition: transform .15s; }
  .fy-go--pdp { max-inline-size: 420px; margin-block: 8px 22px; }

  .fy-says { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
  .fy-say { margin: 0; background: #fff; border-radius: var(--r); padding: 22px; border: 3px dashed #d9c8f5; display: flex; flex-direction: column; gap: 8px; }
  .fy-say h3 { font: 800 18px/1.25 var(--text); }
  .fy-say blockquote { margin: 0; font-size: 15.5px; }
  .fy-say figcaption { margin-block-start: auto; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
  .fy-say figcaption span { color: #7a6aa8; }
  .fy-say figcaption a { flex-basis: 100%; color: var(--magenta); font-weight: 700; }

  .fy-faq { max-inline-size: 860px; margin-inline: auto; display: grid; gap: 12px; }
  .fy-faq details { background: #fff; border-radius: 22px; border: 3px solid #eadff9; padding: 0 20px; }
  .fy-faq summary { cursor: pointer; font: 800 18px/1.3 var(--text); padding: 16px 30px 16px 0; list-style: none; position: relative; }
  .fy-faq summary::-webkit-details-marker { display: none; }
  .fy-faq summary::after { content: "+"; position: absolute; inset-inline-end: 0; inset-block-start: 8px; font: 400 32px/1 var(--disp); color: var(--pink); }
  .fy-faq details[open] summary::after { content: "–"; }
  .fy-faq details p { color: #4a3a7a; }

  .fy-time { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; counter-reset: t; }
  .fy-time li { background: rgba(255,255,255,.12); border-radius: 22px; padding: 18px; border-block-start: 6px solid var(--sun); }
  .fy-time li:nth-child(even) { border-color: var(--pink); }
  .fy-time b { font: 400 34px/1 var(--disp); color: var(--sun); }
  .fy-time h3 { font: 400 23px/1.1 var(--hand); text-transform: uppercase; letter-spacing: .04em; margin-block: 6px; }
  .fy-time p { font-size: 15px; margin: 0; }

  .fy-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .fy-words li { background: #fff; color: var(--ink); border-radius: 20px; padding: 14px 16px; text-align: center; box-shadow: 0 5px 0 rgba(43,27,94,.3); }
  .fy-words li:nth-child(3n+1) { transform: rotate(-1.5deg); } .fy-words li:nth-child(3n) { transform: rotate(1.2deg); }
  .fy-words b { display: block; font: 400 26px/1.1 var(--disp); color: var(--magenta); }
  .fy-words span { font: 400 19px/1.2 var(--hand); letter-spacing: .04em; text-transform: uppercase; }

  .fy-trail { font-size: 14px; margin: 0 0 14px; }
  .fy-trail i { font-style: normal; opacity: .6; margin-inline: 4px; }
  .fy-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 0; grid-column: 1 / -1; }
  .fy-filters span { font: 400 19px/1 var(--hand); text-transform: uppercase; letter-spacing: .05em; }

  .fy-tabs { display: flex; gap: 6px; overflow: hidden; margin-block-start: 60px; padding-inline: 4px; }
  .fy-tabs i { flex: 1 0 44px; block-size: 24px; border-radius: 12px 12px 0 0; background: var(--teal); }
  .fy-tabs i:nth-child(5n+2) { background: var(--sun); } .fy-tabs i:nth-child(5n+3) { background: var(--lime); }
  .fy-tabs i:nth-child(5n+4) { background: var(--pink); } .fy-tabs i:nth-child(5n) { background: #4aa8f0; }
  .fy-sand { background: var(--sand); color: var(--ink); text-align: center; padding: 34px 20px 40px; border-block-end: 12px solid #ef8c00; }
  .fy-sand p { font: 400 clamp(30px, 5vw, 50px)/1.05 var(--disp); margin: 0 0 6px; }
  .fy-sand span { display: block; margin-block-end: 18px; }
  .fy-foot { background: var(--navy); color: #fff; padding: 46px clamp(18px, 5vw, 70px) 26px; display: grid; grid-template-columns: 240px 1fr; gap: 30px 50px; }
  .fy-foot__brand p { font-size: 15px; margin-block-start: 14px; opacity: .85; }
  .fy-foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px 0; }
  .fy-foot__cols section { padding-inline: 22px; border-inline-start: 2px solid #ef8c00; display: flex; flex-direction: column; gap: 7px; }
  .fy-foot__cols h2 { font: 400 20px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: var(--sun); margin-block-end: 6px; }
  .fy-foot__cols a { text-decoration: none; font-size: 15px; font-weight: 700; }
  .fy-foot__cols a:hover { color: var(--sun); }
  .fy-foot address { font-style: normal; font-size: 15px; line-height: 1.7; }
  .fy-foot__legal { grid-column: 1 / -1; font-size: 13px; opacity: .7; margin: 10px 0 0; border-block-start: 1px solid rgba(255,255,255,.2); padding-block-start: 18px; }
}

@layer pages {
  .fy-hero { max-inline-size: var(--wrap); margin: 30px auto 10px; padding-inline: clamp(18px, 4vw, 40px); display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px; align-items: center; color: #fff; }
  .fy-hero h1 { font-size: clamp(34px, 4.4vw, 58px); text-shadow: 0 5px 0 rgba(43,27,94,.35); }
  .fy-hero h1 span { display: block; font-size: 2.1em; color: var(--sun); line-height: .95; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
  .fy-hero__say > p { font-size: 19px; margin-block: 18px 22px; max-inline-size: 30em; }
  .fy-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }
  .fy-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-block-start: 26px; font: 400 19px/1 var(--hand); text-transform: uppercase; letter-spacing: .05em; }
  .fy-hero__facts li::before { content: ""; display: inline-block; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--sun); margin-inline-end: 8px; }
  .fy-hero__pic img { border-radius: 34px; box-shadow: 0 10px 0 rgba(43,27,94,.4); border: 5px solid #fff; }

  .fy-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
  .fy-tile { position: relative; border-radius: 30px; padding: 14px 14px 18px; text-decoration: none; color: #fff; text-align: center;
    background: var(--deep); box-shadow: 0 7px 0 rgba(43,27,94,.4); transition: transform .15s; }
  .fy-tile:hover { transform: translateY(-5px) rotate(1deg); }
  .fy-tile img { border-radius: 22px; margin-block-end: 10px; }
  .fy-tile span { display: block; font: 400 17px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
  .fy-tile b { display: block; font: 400 25px/1.05 var(--disp); margin-block-start: 4px; }
  .fy-tile--grape { background: #8e5cf0; } .fy-tile--pink { background: var(--pink); } .fy-tile--teal { background: #12aebe; }
  .fy-tile--sun { background: var(--sun); color: var(--ink); } .fy-tile--magenta { background: var(--magenta); } .fy-tile--lime { background: #6cb81e; }

  .fy-doors { max-inline-size: 1000px; margin: 44px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border-radius: 34px;
    overflow: hidden; border: 4px solid #fff; inline-size: calc(100% - 28px); box-shadow: 0 10px 0 rgba(43,27,94,.4); }
  .fy-door { padding: 46px 30px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .fy-door--0 { background: radial-gradient(circle at 50% 80%, #1f5fc0, #0c1f5c); }
  .fy-door--1 { background: radial-gradient(circle at 50% 80%, #a02a8a, #5c1750); }
  .fy-door h3 { font-size: 34px; } .fy-door p { margin: 0 0 8px; max-inline-size: 24em; }
  .fy-door .fy-pill { background: #fff; color: var(--ink); box-shadow: 0 6px 0 var(--teal); }
  .fy-door--1 .fy-pill { box-shadow: 0 6px 0 var(--pink); }

  .fy-split { max-inline-size: var(--wrap); margin: 34px auto; padding-inline: 14px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 30px; align-items: center; color: #fff; }
  .fy-split__pic img { border-radius: 34px; border: 5px solid #fff; }
  .fy-split__txt em { font: 400 22px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: var(--sun); font-style: normal; }
  .fy-split__txt h2 { font-size: clamp(40px, 6vw, 72px); margin-block: 6px 14px; text-shadow: 0 5px 0 rgba(43,27,94,.35); }

  .fy-1998__pic img, .fy-wide img, .fy-seo__pic img { border-radius: 30px; margin-inline: auto; }
  .fy-1998__pic { margin-block-end: 30px; }
  .fy-more { text-align: center; margin: 26px 0 0; }
  .fy-news { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-block-end: 24px; }
  .fy-new { display: flex; gap: 12px; align-items: center; text-decoration: none; background: #fff; border-radius: 22px; padding: 10px; border: 3px solid #eadff9; }
  .fy-new img { inline-size: 84px; border-radius: 14px; }
  .fy-new span { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
  .fy-new em { align-self: flex-start; background: var(--teal); color: #fff; font: 400 14px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: 999px; font-style: normal; }
  .fy-new b { font-size: 15px; line-height: 1.25; } .fy-new small { font: 400 19px/1 var(--disp); color: var(--magenta); }
  .fy-wide { display: block; }

  .fy-cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
  .fy-cmp__c { background: #fff; border-radius: var(--r); padding: 20px; border-block-start: 10px solid var(--pink); display: flex; flex-direction: column; gap: 12px; }
  .fy-cmp__c:nth-child(2) { border-color: var(--teal); } .fy-cmp__c:nth-child(3) { border-color: var(--sun); } .fy-cmp__c:nth-child(4) { border-color: var(--lime); }
  .fy-cmp__c h3 { font-size: 28px; color: var(--grape); } .fy-cmp__c h3 a { text-decoration: none; }
  .fy-cmp dl { margin: 0; display: grid; gap: 8px; } .fy-cmp dl div { border-block-end: 2px dotted #d9c8f5; padding-block-end: 6px; }
  .fy-cmp dt { font: 400 16px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: var(--magenta); }
  .fy-cmp dd { margin: 2px 0 0; font-weight: 700; } .fy-cmp .fy-chip { align-self: flex-start; margin-block-start: auto; }

  .fy-mosaic { max-inline-size: var(--wrap); margin: 34px auto; padding-inline: 14px; display: grid; gap: 18px; }
  .fy-mosaic img { border-radius: 30px; inline-size: 100%; }

  .fy-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
  .fy-why li { background: rgba(255,255,255,.12); border-radius: var(--r); padding: 24px; }
  .fy-why b { font: 400 54px/1 var(--disp); color: var(--sun); }
  .fy-why h3 { font-size: 26px; margin-block: 8px; } .fy-why p { margin: 0; }

  .fy-seo { background: rgba(29,22,80,.45); inline-size: calc(100% - 28px); }
  .fy-seo h2 { font-size: clamp(30px, 4.4vw, 46px); margin-block: 26px 16px; color: var(--sun); }
  .fy-seo__cols { columns: 2 340px; column-gap: 40px; } .fy-seo__cols p { break-inside: avoid; }

  .fy-lessons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
  .fy-lesson { background: #fff; color: var(--ink); border-radius: var(--r); padding: 14px 14px 20px; text-decoration: none; box-shadow: 0 7px 0 rgba(43,27,94,.35); }
  .fy-lesson img { border-radius: 18px; aspect-ratio: 4/3; object-fit: cover; inline-size: 100%; }
  .fy-lesson em { display: block; margin-block: 12px 4px; font: 400 17px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: var(--magenta); font-style: normal; }
  .fy-lesson h3 { font-size: 24px; color: var(--grape); margin-block-end: 8px; } .fy-lesson p { font-size: 15px; margin: 0; }

  .fy-merch { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
  .fy-merch img { border-radius: 26px; transition: transform .15s; } .fy-merch a:hover img { transform: rotate(-2deg) scale(1.02); }

  .fy-end { max-inline-size: var(--wrap); margin: 44px auto 0; padding-inline: 14px; text-align: center; color: #fff; }
  .fy-end img { border-radius: 30px; margin-block-end: 28px; }
  .fy-end h2 { font-size: clamp(40px, 7vw, 84px); text-shadow: 0 6px 0 rgba(43,27,94,.35); }
  .fy-end p { font-size: 20px; margin-block: 10px 22px; }

  .fy-lead { max-inline-size: var(--wrap); margin: 30px auto 0; padding-inline: clamp(18px, 4vw, 40px); color: #fff; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 34px; align-items: center; }
  .fy-lead .fy-trail { grid-column: 1 / -1; }
  .fy-lead__txt em { font: 400 22px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: var(--sun); font-style: normal; }
  .fy-lead h1 { font-size: clamp(34px, 4.6vw, 58px); margin-block: 8px 14px; text-shadow: 0 5px 0 rgba(43,27,94,.35); }
  .fy-lead__txt p { font-size: 18.5px; }
  .fy-lead__pic img { border-radius: 30px; border: 5px solid #fff; max-block-size: 420px; inline-size: 100%; object-fit: cover; }
  .fy-lead .fy-chip { border-color: #fff; }
  .fy-count { font: 400 21px/1 var(--hand); text-transform: uppercase; letter-spacing: .05em; color: var(--magenta); margin-block-end: 18px; }
  .fy-notes__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-block-end: 26px; }
  .fy-notes__list li { background: rgba(255,255,255,.13); border-radius: 22px; padding: 18px 18px 18px 54px; position: relative; }
  .fy-notes__list li::before { content: "♥"; position: absolute; inset-inline-start: 18px; inset-block-start: 14px; font-size: 24px; color: var(--pink); }
  .fy-notes__pics { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .fy-notes__pics figure { margin: 0; } .fy-notes__pics img { border-radius: 26px; inline-size: 100%; }

  .fy-pdp { max-inline-size: var(--wrap); margin: 30px auto; inline-size: calc(100% - 28px); background: var(--cream); border-radius: 40px;
    padding: 30px clamp(18px, 4vw, 46px) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 44px; box-shadow: 0 8px 0 rgba(43,27,94,.3); }
  .fy-pdp .fy-trail { grid-column: 1 / -1; }
  .fy-shots__main img { border-radius: 30px; border: 4px solid #eadff9; background: #fff; inline-size: 100%; }
  .fy-shots__row { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 12px; }
  .fy-shots__t { border-radius: 16px; overflow: hidden; border: 3px solid #eadff9; inline-size: 78px; }
  .fy-shots__t.is-on { border-color: var(--pink); }
  .fy-pdp h1 { font-size: clamp(30px, 3.8vw, 46px); color: var(--grape); margin-block: 14px 10px; }
  .fy-pdp__price { margin: 14px 0; } .fy-pdp__price b { font: 400 42px/1 var(--disp); color: var(--magenta); }
  .fy-pdp__price small { color: #7a6aa8; }
  .fy-pdp__blurb { font-size: 18px; }
  .fy-pdp__info h2 { font: 400 24px/1 var(--hand); text-transform: uppercase; letter-spacing: .05em; color: var(--magenta); margin-block-end: 10px; }
  .fy-pdp__list { display: grid; gap: 8px; margin-block-end: 22px; }
  .fy-pdp__list li { padding-inline-start: 30px; position: relative; }
  .fy-pdp__list li::before { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: .45em; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--sun); }
  .fy-pdp__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  .fy-pdp__facts div { background: #fff; border-radius: 16px; padding: 10px 14px; border: 2px solid #eadff9; }
  .fy-pdp__facts dt { font: 400 15px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: #7a6aa8; }
  .fy-pdp__facts dd { margin: 3px 0 0; font-weight: 800; }

  .fy-doc { max-inline-size: 900px; margin: 30px auto; inline-size: calc(100% - 28px); background: var(--cream); border-radius: 40px; padding: 34px clamp(20px, 5vw, 60px) 46px; box-shadow: 0 8px 0 rgba(43,27,94,.3); }
  .fy-doc > em { font: 400 21px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: var(--magenta); font-style: normal; }
  .fy-doc h1 { font-size: clamp(34px, 5vw, 56px); color: var(--grape); margin-block: 8px 16px; }
  .fy-doc h2 { font-size: 28px; color: var(--grape); margin-block: 28px 10px; }
  .fy-doc__lead { font-size: 20px; font-weight: 600; }
  .fy-doc__pic { margin: 22px 0; } .fy-doc__pic img { border-radius: 26px; inline-size: 100%; max-block-size: 460px; object-fit: cover; }
  .fy-doc__small { font-size: 14px; color: #7a6aa8; margin-block-start: 24px; }
  .fy-doc .fy-time li { background: #fff; border: 2px solid #eadff9; border-block-start: 6px solid var(--sun); }
  .fy-doc .fy-time b { color: var(--magenta); } .fy-doc .fy-time h3 { color: var(--ink); margin-block: 6px; }
  .fy-doc .fy-words { margin-block: 24px; } .fy-doc .fy-words li { border: 2px solid #eadff9; }
  .fy-doc .fy-filters { margin-block: 26px 22px; }
  .fy-desk { margin: 26px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
  .fy-desk div { background: var(--grape); color: #fff; border-radius: 22px; padding: 18px; }
  .fy-desk dt { font: 400 18px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: var(--sun); }
  .fy-desk dd { margin: 6px 0 0; font-weight: 700; overflow-wrap: anywhere; }
  .fy-steps { counter-reset: s; display: grid; gap: 14px; margin-block: 20px; }
  .fy-steps li { counter-increment: s; background: #fff; border-radius: 22px; padding: 16px 18px 16px 70px; position: relative; border: 2px solid #eadff9; }
  .fy-steps li::before { content: counter(s); position: absolute; inset-inline-start: 16px; inset-block-start: 14px; inline-size: 40px; block-size: 40px; border-radius: 50%;
    background: var(--pink); color: #fff; font: 400 24px/40px var(--disp); text-align: center; }
  .fy-steps p { margin: 4px 0 0; }
  .fy-rules { display: grid; gap: 14px; margin-block: 24px; }
  .fy-rules li { border-inline-start: 8px solid var(--teal); background: #fff; border-radius: 0 22px 22px 0; padding: 16px 20px; }
  .fy-rules li:nth-child(2n) { border-color: var(--pink); } .fy-rules li:nth-child(3n) { border-color: var(--sun); }
  .fy-rules h2 { margin: 0 0 6px; font-size: 23px; } .fy-rules p { margin: 0; }

  [hidden] { display: none !important; }
  .fy-card__badge { align-self: flex-start; font: 400 14px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; padding: 5px 10px; border-radius: 6px;
    background: #e6f0ff; color: #0b4fc4; min-block-size: 24px; }
  .fy-card__badge--new { background: #d8f7fa; color: #0a7f8c; } .fy-card__badge--top { background: #fff0cc; color: #9a5b00; }
  .fy-card__badge--none { visibility: hidden; }
  .fy-refine { grid-column: 1 / -1; display: grid; gap: 14px; margin-block-start: 8px; }
  .fy-find { display: flex; background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 6px 0 rgba(43,27,94,.35); max-inline-size: 760px; inline-size: 100%; margin-inline: auto; }
  .fy-find input { flex: 1; min-inline-size: 0; border: 0; background: none; font: 600 17px var(--text); color: var(--ink); padding: 10px 18px; outline: none; }
  .fy-find button { font: 400 19px/1 var(--hand); text-transform: uppercase; letter-spacing: .05em; background: var(--sun); color: var(--ink); border-radius: 999px; padding: 12px 24px; }
  .fy-refine__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; }
  .fy-chip--dot { display: inline-flex; align-items: center; gap: 7px; }
  .fy-chip--dot i, .fy-rail label i { inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2px solid #d9c8f5; display: inline-block; }
  .fy-know__list { max-inline-size: 900px; margin-inline: auto; display: grid; gap: 10px; }
  .fy-know details { background: rgba(255,255,255,.13); border-radius: 22px; padding: 0 22px; }
  .fy-know summary { cursor: pointer; list-style: none; padding: 16px 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
  .fy-know summary::-webkit-details-marker { display: none; }
  .fy-know summary b { font: 400 25px/1 var(--disp); color: var(--sun); min-inline-size: 150px; }
  .fy-know summary span { font-weight: 700; }
  .fy-know details p { margin: 0 0 18px; }
  .fy-watch { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
  .fy-watch figure { margin: 0; } .fy-watch figcaption { margin-block-start: 8px; font-weight: 800; text-align: center; }
  .fy-video { inline-size: 100%; aspect-ratio: 16/9; border-radius: 24px; background: #1d1650; border: 4px solid #eadff9; }
  .fy-clip .fy-video { max-inline-size: 860px; display: block; margin-inline: auto; }
  .fy-lead--all { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .fy-lead--all .fy-trail { text-align: start; } .fy-lead--all p { max-inline-size: 44em; margin-inline: auto; }
  .fy-shop { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; align-items: start; }
  .fy-rail summary { font: 400 26px/1 var(--disp); color: var(--grape); list-style: none; margin-block-end: 12px; cursor: pointer; }
  .fy-rail summary::-webkit-details-marker { display: none; }
  .fy-rail summary::after { content: '+'; float: inline-end; color: var(--pink); } .fy-rail details[open] summary::after { content: '–'; }
  .fy-rail fieldset { border: 0; border-block-start: 2px solid #eadff9; margin: 0; padding: 14px 0; display: grid; gap: 8px; }
  .fy-rail legend { font: 400 19px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: var(--magenta); padding: 0; margin-block-end: 8px; float: inline-start; inline-size: 100%; }
  .fy-rail label { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15.5px; cursor: pointer; clear: both; }
  .fy-rail label span { display: inline-flex; align-items: center; gap: 7px; }
  .fy-rail input { inline-size: 19px; block-size: 19px; accent-color: var(--grape); }
  .fy-shop__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-block-end: 16px; }
  .fy-shop__bar .fy-count { margin: 0; }
  .fy-sort { font-weight: 800; } .fy-sort select { font: 700 15px var(--text); padding: 8px 12px; border-radius: 999px; border: 2px solid var(--grape); background: #fff; color: var(--ink); }
  .fy-none { font: 400 24px/1.3 var(--hand); text-align: center; padding: 40px 0; color: var(--magenta); }
  .fy-kinds { margin: 0 0 18px; } .fy-kinds button.fy-chip { cursor: pointer; }
  .fy-info { margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 3px solid #eadff9; border-radius: 20px; overflow: hidden; background: #fff; }
  .fy-info div { padding: 9px 14px; border-block-end: 2px solid #f3ecfc; } .fy-info div:nth-child(odd) { border-inline-end: 2px solid #f3ecfc; }
  .fy-info__wide { grid-column: 1 / -1; border: 0 !important; }
  .fy-info dt { font: 400 15px/1 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: #7a6aa8; }
  .fy-info dd { margin: 3px 0 0; font-weight: 800; font-size: 15.5px; }
  .fy-pdp__how { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 18px; }
  .fy-shots__t { inline-size: 64px; }
  .fy-words--dict { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .fy-words--dict li { transform: none !important; padding: 10px; }
  .fy-words--dict b { font-size: 20px; } .fy-words--dict span { font-size: 16px; }
  .fy-steps--say b { font: 400 22px/1.1 var(--disp); color: var(--magenta); }
  @media (max-width: 1080px) {
    .fy-top__nav { display: none; }
    .fy-top__cta { margin-inline-start: auto; }
    .fy-top__cta img { inline-size: 170px; }
    .fy-top__menu { display: block; }
    .fy-top { border-radius: 30px; gap: 10px; padding-inline: 12px; }
    .fy-top__logo img { inline-size: 84px; }
  }
  @media (max-width: 860px) {
    .fy-hero, .fy-split, .fy-lead, .fy-pdp, .fy-foot, .fy-shop { grid-template-columns: minmax(0, 1fr); }
    .fy-find button { padding-inline: 16px; }
    .fy-hero__pic { order: -1; }
    .fy-foot__cols section { padding-inline: 14px; }
    .fy-strip { gap: 14px; font-size: 14px; }
    .fy-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
    .fy-sec { padding: 30px 14px; border-radius: 28px; margin-block: 22px; }
    .fy-card__row strong { font-size: 21px; }
  }
}