/* ======================================================================
   glycoaiid.com — GlycoAid
   Class naming: PascalCase component names (PageBox, HeroUnit, PriceCard),
   with lowercase state words appended after a space (PriceCard chosen).
   No hyphens, no underscores, no BEM. Mobile first: 620 / 940 / 1220.
   Zero JavaScript.
   ====================================================================== */

:root{
  --deep:#10243F;
  --deeper:#081729;
  --steel:#2C5A8C;
  --sky:#DCE9F5;
  --grass:#3D8B4A;
  --grasslight:#EAF3EA;
  --sun:#E4A11B;
  --sundeep:#B87C05;
  --paper:#FFFFFF;
  --paperwarm:#F7F5F0;
  --stone:#ECE8E1;
  --line:#DCD6CC;
  --linedark:#C2B9AC;
  --text:#25313D;
  --textmid:#4E5A66;
  --textsoft:#78838E;
  --gutter:18px;
  --round:10px;
  --roundbig:20px;
  --lift:0 1px 3px rgba(16,36,63,.08),0 8px 24px rgba(16,36,63,.06);
  --liftbig:0 18px 44px rgba(8,23,41,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--textmid);
  font:400 19px/1.72 "Source Sans 3","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--steel);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
a:hover{color:var(--deep)}
h1,h2,h3,h4{margin:0 0 13px;color:var(--deep);
  font-family:Outfit,"Source Sans 3","Segoe UI",system-ui,Arial,sans-serif;
  font-weight:700;line-height:1.16;letter-spacing:-.015em}
h1{font-size:32px}
h2{font-size:27px}
h3{font-size:20.5px}
h4{font-size:16.5px}
p{margin:0 0 18px}
ul,ol{margin:0 0 20px;padding-left:1.15em}
li{margin-bottom:9px}
table{width:100%;border-collapse:collapse;font-size:16.5px}
th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--deep);font-weight:600}
thead th{background:var(--sky);border-bottom:2px solid var(--steel)}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
::selection{background:var(--steel);color:#fff}

/* ---------- frame ----------------------------------------------------- */
.PageBox{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.TextBox{max-width:820px}
.TextBox h2{margin-top:40px}
.TextBox h2:first-child{margin-top:0}
.TextBox h3{margin-top:26px;color:var(--steel)}
.ScrollBox{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:22px}
.PairGrid,.TrioGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.SplitRow{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center}
.JumpLink{position:absolute;left:-9999px;top:0;z-index:99;padding:12px 18px;
  background:var(--deeper);color:#fff}
.JumpLink:focus{left:0}

/* ---------- zones ----------------------------------------------------- */
.ZonePlain{padding:46px 0}
.ZoneWarm{padding:46px 0;background:var(--paperwarm)}
.ZoneSky{padding:46px 0;background:var(--sky)}
.ZoneGrass{padding:46px 0;background:var(--grasslight)}
.ZoneDeep{padding:46px 0;background:var(--deep);color:#C9D6E4}
.ZoneDeep h2,.ZoneDeep h3,.ZoneDeep h4{color:#fff}
.ZoneDeep a{color:#F2C463}
.ZoneCrumb{padding:30px 0 32px;background:var(--paperwarm);
  border-bottom:1px solid var(--line)}

/* section heading: left aligned with a rule, not centred */
.ZoneTitle{max-width:760px;margin:0 0 30px;padding-left:16px;
  border-left:4px solid var(--sun)}
.ZoneTitle h2{margin-bottom:10px}
.ZoneTitle p{margin:0;font-size:18.5px;color:var(--textsoft)}
.ZoneDeep .ZoneTitle p{color:#9FB2C6}
.EyeBrow{margin:0 0 8px;font:600 12.5px/1 Outfit,sans-serif;letter-spacing:.19em;
  text-transform:uppercase;color:var(--grass)}
.ZoneDeep .EyeBrow{color:var(--sun)}

/* ---------- notice bar & header --------------------------------------- */
.NoticeBar{background:var(--deeper);color:#B7C6D6}
.NoticeBar p{margin:0;padding:9px 0;text-align:center;font-size:14.5px;line-height:1.5}
.NoticeBar b{color:#fff;font-weight:600}
.NoticeBar i{font-style:normal;color:var(--sun);margin:0 9px}

.TopBar{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line)}
.TopRow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px}
.SiteMark{display:flex;align-items:center;gap:9px;color:var(--deep);text-decoration:none;
  font:700 22px/1 Outfit,sans-serif;letter-spacing:-.03em}
.SiteMark:hover{color:var(--deep)}
.SiteMark svg{width:31px;height:31px;flex:none}
.SiteMark i{font-style:normal;color:var(--grass)}
.MenuFlag{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.MenuKey{display:flex;flex-direction:column;justify-content:center;gap:5px;width:48px;height:42px;
  padding:0 10px;cursor:pointer;border-radius:8px;border:1px solid var(--line);
  background:var(--paperwarm)}
.MenuKey span{display:block;height:3px;border-radius:2px;background:var(--deep)}
.MenuList{display:none;position:absolute;left:0;right:0;top:100%;padding:4px var(--gutter) 18px;
  background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--lift)}
.MenuFlag:checked ~ .MenuList{display:block}
.MenuList a{display:block;padding:12px 2px;font-size:17.5px;font-weight:600;color:var(--deep);
  text-decoration:none;border-bottom:1px solid var(--line)}
.MenuList a[aria-current]{color:var(--grass)}
.MenuList .BuyKey{margin-top:14px;border-bottom:0}

/* ---------- buttons --------------------------------------------------- */
.BuyKey{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:16px 26px;border:0;border-radius:var(--round);cursor:pointer;text-decoration:none;
  background:var(--grass);color:#fff;font:700 18px/1.2 Outfit,sans-serif;letter-spacing:.005em;
  transition:background .14s,transform .14s}
.BuyKey:hover{background:#31703B;color:#fff;text-decoration:none;transform:translateY(-2px)}
.BuyKey i{font-style:normal}
.BuyKey.sun{background:linear-gradient(180deg,var(--sun),var(--sundeep));color:#33240A}
.BuyKey.sun:hover{background:var(--sundeep);color:#33240A}
.BuyKey.hollow{background:none;color:var(--deep);border:2px solid var(--deep)}
.BuyKey.hollow:hover{background:var(--deep);color:#fff}
.BuyKey.small{width:auto;padding:11px 18px;font-size:15px}
.BuyKey.inline{width:auto;display:inline-flex}

/* ---------- hero ------------------------------------------------------ */
.HeroUnit{position:relative;padding:0 0 40px;background:var(--paperwarm);
  border-bottom:1px solid var(--line)}
.HeroGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center}
.HeroText{padding-top:34px}
.HeroFlag{display:inline-block;margin-bottom:15px;padding:7px 14px;border-radius:5px;
  background:var(--deep);color:#fff;font:600 12px/1 Outfit,sans-serif;letter-spacing:.16em;
  text-transform:uppercase}
.HeroUnit h1{font-size:33px;text-wrap:balance}
.HeroUnit h1 em{font-style:normal;color:var(--grass)}
.HeroLede{font-size:19.5px;line-height:1.62;color:var(--textmid);margin-bottom:22px}
.HeroPoints{margin:0 0 24px;padding:0;list-style:none}
.HeroPoints li{position:relative;margin-bottom:11px;padding-left:31px;font-size:17.5px;
  line-height:1.5;color:var(--text)}
.HeroPoints li::before{content:"";position:absolute;left:0;top:3px;width:21px;height:21px;
  border-radius:50%;background:var(--grass) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}
.HeroNote{margin:13px 0 0;font-size:15px;line-height:1.6;color:var(--textsoft)}
.HeroShot{position:relative;text-align:center;padding-top:10px}
.HeroShot img{margin-inline:auto;max-width:290px}
.HeroSeal{position:absolute;right:2%;top:4%;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;
  background:var(--sun);color:#33240A;text-align:center;
  font:600 10.5px/1.25 Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.HeroSeal b{display:block;font-size:25px;letter-spacing:-.02em}

.FactRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:34px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--round);overflow:hidden}
.FactRow > div{padding:18px 16px;background:var(--paper);text-align:center}
.FactRow b{display:block;color:var(--deep);font:700 20px/1.2 Outfit,sans-serif}
.FactRow span{display:block;margin-top:5px;font-size:14.5px;line-height:1.45;color:var(--textsoft)}

/* ---------- cards ----------------------------------------------------- */
.NoteCard{padding:26px 22px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--round)}
.NoteCard svg{width:34px;height:34px;margin-bottom:12px;color:var(--grass)}
.NoteCard h3{margin-bottom:7px}
.NoteCard p{margin:0;font-size:17px;line-height:1.6;color:var(--textmid)}

.StepCard{position:relative;padding:24px 22px 22px 22px;background:var(--paper);
  border:1px solid var(--line);border-left:4px solid var(--steel);border-radius:var(--round)}
.StepCard em{display:block;margin-bottom:9px;color:var(--steel);
  font:700 13px/1 Outfit,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  font-style:normal}
.StepCard h3{margin-bottom:7px}
.StepCard p{margin:0;font-size:17px;line-height:1.6}

.GainCard{display:flex;gap:15px;padding:22px 20px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--round)}
.GainCard > span{flex:none;display:flex;align-items:center;justify-content:center;width:44px;
  height:44px;border-radius:8px;background:var(--sky);color:var(--steel)}
.GainCard svg{width:22px;height:22px}
.GainCard h3{margin-bottom:6px;font-size:18.5px}
.GainCard p{margin:0;font-size:16.5px;line-height:1.58}

.QuoteCard{padding:24px 22px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--round)}
.StarLine{display:flex;align-items:center;gap:9px;margin:0 0 12px;color:var(--sun);
  font-size:16px;letter-spacing:.09em}
.StarLine i{font-style:normal;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--grass);font-weight:600}
.QuoteCard > p{font-size:17px;line-height:1.62;color:var(--text)}
.WhoLine{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.WhoLine > span:first-child{flex:none;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:8px;background:var(--deep);color:#fff;
  font:700 15px/1 Outfit,sans-serif}
.WhoLine > span + span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.WhoLine b{color:var(--deep);font:700 16px/1.3 Outfit,sans-serif}
.WhoLine em{font-style:normal;font-size:14px;color:var(--textsoft)}

/* ---------- ingredient index ------------------------------------------ */
.NameGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.NameGrid a{display:block;padding:18px 20px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--round);text-decoration:none;transition:border-color .14s,transform .14s}
.NameGrid a:hover{border-color:var(--grass);transform:translateY(-2px);text-decoration:none}
.NameGrid b{display:block;margin-bottom:5px;color:var(--deep);font:700 17.5px/1.3 Outfit,sans-serif}
.NameGrid span{display:block;font-size:15.5px;line-height:1.52;color:var(--textsoft)}
.ZoneDeep .NameGrid a{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.ZoneDeep .NameGrid b{color:#fff}
.ZoneDeep .NameGrid span{color:#A9BACC}
.ZoneDeep .NameGrid a:hover{border-color:var(--sun)}

/* ---------- label panel ----------------------------------------------- */
.LabelPanel{max-width:640px;margin-inline:auto;border:2px solid var(--deep);
  border-radius:var(--round);overflow:hidden;background:var(--paper)}
.LabelHead{padding:15px 20px;background:var(--deep);color:#fff}
.LabelHead b{display:block;font:700 19px/1.2 Outfit,sans-serif;letter-spacing:.03em}
.LabelHead span{display:block;margin-top:5px;font-size:14.5px;color:#A9BACC}
.LabelPanel table{font-size:16px}
.LabelPanel th{width:38%;color:var(--deep)}
.LabelFoot{margin:0;padding:16px 20px;background:var(--paperwarm);border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.6;color:var(--textsoft)}

/* ---------- pricing --------------------------------------------------- */
.PriceGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.PriceCard{position:relative;background:var(--paper);border:1px solid var(--linedark);
  border-radius:var(--roundbig);overflow:hidden}
.PriceCard.chosen{border:2px solid var(--grass);box-shadow:var(--liftbig)}
.PriceTag{padding:11px 16px;background:var(--paperwarm);color:var(--deep);text-align:center;
  border-bottom:1px solid var(--line);font:700 12.5px/1.2 Outfit,sans-serif;letter-spacing:.17em;
  text-transform:uppercase}
.PriceCard.chosen .PriceTag{background:var(--grass);color:#fff;border-bottom-color:var(--grass)}
.PriceBody{padding:24px 22px 26px;text-align:center}
.PriceBody h3{margin-bottom:3px;font-size:25px}
.PriceSupply{margin:0 0 16px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--textsoft)}
.PriceBody figure{margin:0 0 16px}
.PriceBody figure img{margin-inline:auto;max-height:150px;width:auto}
.PriceNow{display:flex;align-items:baseline;justify-content:center;gap:4px;margin:0 0 4px;
  color:var(--deep);font-family:Outfit,sans-serif}
.PriceNow s{font-size:17px;color:var(--textsoft);margin-right:6px}
.PriceNow u{text-decoration:none;font-size:20px;font-weight:600;align-self:flex-start;
  margin-top:6px}
.PriceNow b{font-size:47px;font-weight:700;line-height:1}
.PriceNow span{font-size:13px;line-height:1.15;text-align:left;letter-spacing:.09em;
  text-transform:uppercase;color:var(--textsoft)}
.PriceSum{margin:0 0 14px;font:600 17px/1.3 Outfit,sans-serif;color:var(--deep)}
.PriceShip{display:inline-block;margin-bottom:16px;padding:6px 13px;border-radius:5px;
  background:var(--stone);font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--textmid)}
.PriceShip.free{background:var(--grasslight);color:#2C6636;font-weight:600}
.PriceGood{margin:0 0 20px;padding:0;list-style:none;text-align:left}
.PriceGood li{position:relative;margin-bottom:9px;padding-left:27px;font-size:15.5px;
  line-height:1.5}
.PriceGood svg{position:absolute;left:0;top:3px;width:18px;height:18px;color:var(--grass)}
.PayLine{margin:14px 0 0}
.PayLine img{margin-inline:auto;max-width:210px}
.PriceFine{margin:22px auto 0;max-width:760px;text-align:center;font-size:14.5px;line-height:1.6;
  color:var(--textsoft)}

/* ---------- promise --------------------------------------------------- */
.PromiseBox{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;
  padding:28px 24px;background:var(--sky);border:1px solid #BFD5E8;border-radius:var(--roundbig)}
.PromiseBox img{margin-inline:auto;max-width:124px}
.PromiseBox h2{margin-bottom:10px}
.PromiseBox p{margin:0;font-size:17.5px;line-height:1.62}

/* ---------- faq ------------------------------------------------------- */
.AskList{max-width:840px}
.AskList details{margin-bottom:11px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--round);overflow:hidden}
.AskList summary{padding:17px 48px 17px 20px;cursor:pointer;list-style:none;position:relative;
  color:var(--deep);font:600 17.5px/1.45 Outfit,sans-serif}
.AskList summary::-webkit-details-marker{display:none}
.AskList summary::after{content:"";position:absolute;right:18px;top:50%;width:13px;height:13px;
  margin-top:-7px;border-right:2.5px solid var(--grass);border-bottom:2.5px solid var(--grass);
  transform:rotate(45deg);transition:transform .16s}
.AskList details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.AskList details[open] summary{background:var(--paperwarm)}
.AskBody{padding:2px 20px 6px}
.AskBody p{margin:0 0 14px;font-size:17px;line-height:1.64}

/* ---------- misc content ---------------------------------------------- */
.PullBox{padding:20px 22px;background:var(--grasslight);border-left:4px solid var(--grass);
  border-radius:0 var(--round) var(--round) 0;margin-bottom:22px}
.PullBox p{margin:0;font-size:17.5px;line-height:1.62;color:var(--text)}
.WarnBox{padding:20px 22px;background:#FDF3E4;border-left:4px solid var(--sun);
  border-radius:0 var(--round) var(--round) 0;margin-bottom:22px}
.WarnBox p{margin:0;font-size:17.5px;line-height:1.62;color:#5A4110}

.TickList,.CrossList{margin:0 0 22px;padding:0;list-style:none}
.TickList li,.CrossList li{position:relative;margin-bottom:11px;padding-left:31px;
  font-size:17.5px;line-height:1.58}
.TickList li::before{content:"";position:absolute;left:0;top:4px;width:21px;height:21px;
  border-radius:5px;background:var(--grasslight) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D8B4A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}
.CrossList li::before{content:"";position:absolute;left:0;top:4px;width:21px;height:21px;
  border-radius:5px;background:#FBE9E7 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3392B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/12px no-repeat}

.MarkGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.MarkGrid > div{padding:18px 14px;text-align:center;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--round)}
.MarkGrid img{margin:0 auto 10px}
.MarkGrid b{display:block;margin-bottom:5px;color:var(--deep);font:700 15.5px/1.3 Outfit,sans-serif}
.MarkGrid span{display:block;font-size:14px;line-height:1.5;color:var(--textsoft)}

.GiftGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.GiftCard{background:var(--paper);border:1px solid var(--line);border-radius:var(--round);
  overflow:hidden}
.GiftFace{display:flex;align-items:flex-end;padding:22px 20px;min-height:132px;color:#fff;
  font:700 21px/1.24 Outfit,sans-serif}
.GiftOne{background:linear-gradient(150deg,#10243F,#2C5A8C)}
.GiftTwo{background:linear-gradient(150deg,#2C6636,#3D8B4A)}
.GiftThree{background:linear-gradient(150deg,#8A5A0B,#E4A11B)}
.GiftCard > div:last-child{padding:18px 20px 20px}
.GiftLabel{margin:0 0 6px;font:600 12.5px/1 Outfit,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grass)}
.GiftCard p:last-child{margin:0;font-size:16.5px;line-height:1.58}

.CiteList{max-width:860px;margin:0;padding-left:1.25em;font-size:17px}
.CiteList li{margin-bottom:15px;line-height:1.6}
.CiteList a{word-break:break-word}

.ReadGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.ReadGrid a{display:block;padding:20px 22px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--round);text-decoration:none;transition:border-color .14s}
.ReadGrid a:hover{border-color:var(--steel);text-decoration:none}
.ReadGrid b{display:block;margin-bottom:5px;color:var(--deep);font:700 18px/1.3 Outfit,sans-serif}
.ReadGrid span{display:block;font-size:16px;line-height:1.55;color:var(--textsoft)}

.CrumbLine{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px;
  font-size:14.5px;color:var(--textsoft)}
.CrumbLine li::after{content:"/";margin-left:7px;color:var(--linedark)}
.CrumbLine li:last-child::after{content:""}
.CrumbLine a{color:var(--steel)}
.MetaLine{margin:0 0 6px;font-size:15px;color:var(--textsoft)}
.LeadLine{font-size:20px;line-height:1.62;color:var(--text)}

.PostGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.PostCard{display:flex;flex-direction:column;padding:24px 22px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--round)}
.PostCard p:first-child{margin:0 0 9px;font:600 12.5px/1 Outfit,sans-serif;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grass)}
.PostCard h3{margin-bottom:9px}
.PostCard h3 a{color:var(--deep);text-decoration:none}
.PostCard h3 a:hover{color:var(--steel)}
.PostCard p:last-of-type{margin:0;font-size:16.5px;line-height:1.58;color:var(--textmid)}
.PostFoot{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);font-size:14.5px;
  color:var(--textsoft)}

.CloseZone{padding:44px 0;background:var(--deep);color:#C9D6E4}
.CloseZone h2{color:#fff}
.CloseGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
.CloseGrid img{margin-inline:auto;max-width:240px}
.CloseZone .TickList li{color:#DCE6EF}
.CloseZone .TickList li::before{background:rgba(255,255,255,.14) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2C463' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---------- footer ---------------------------------------------------- */
.FootZone{padding:42px 0 26px;background:var(--deeper);color:#93A6B8;font-size:16px}
.FootZone h4{color:#fff;margin-bottom:12px;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase}
.FootZone a{color:#C6D3E0;text-decoration:none}
.FootZone a:hover{color:#fff;text-decoration:underline}
.FootTop{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.FootTop .SiteMark{color:#fff;margin-bottom:14px}
.FootTop p{font-size:16px;line-height:1.62}
.FootMail{font:600 18px/1.4 Outfit,sans-serif;color:#F2C463!important}
.FootCols{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:26px 0}
.FootCols ul{margin:0;padding:0;list-style:none}
.FootCols li{margin-bottom:9px;font-size:15.5px}
.FootFine{padding:22px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;
  line-height:1.62;color:#7E93A6}
.FootFine p{margin:0 0 12px}
.FootFine b{color:#B7C6D6}
.FootEnd{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:14px}
.FootEnd nav{display:flex;flex-wrap:wrap;gap:8px 16px}

.StickyBuy{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:9px var(--gutter);
  background:rgba(8,23,41,.96);border-top:1px solid rgba(255,255,255,.14)}
.StickyBuy .BuyKey{max-width:520px;margin-inline:auto;padding:13px 20px;font-size:16.5px}

/* ---------- 620 ------------------------------------------------------- */
@media (min-width:620px){
  :root{--gutter:26px}
  h1{font-size:38px}
  h2{font-size:30px}
  .HeroUnit h1{font-size:40px}
  .PairGrid,.TrioGrid,.NameGrid,.GiftGrid,.ReadGrid,.PostGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .FactRow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .MarkGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .PromiseBox{grid-template-columns:150px minmax(0,1fr);gap:26px;padding:32px 30px}
  .FootCols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .CloseGrid{grid-template-columns:270px minmax(0,1fr);gap:34px}
  .HeroShot img{max-width:340px}
}

/* ---------- 940 ------------------------------------------------------- */
@media (min-width:940px){
  h1{font-size:44px}
  h2{font-size:34px}
  h3{font-size:22px}
  .ZonePlain,.ZoneWarm,.ZoneSky,.ZoneGrass,.ZoneDeep{padding:66px 0}
  .ZoneTitle{margin-bottom:38px;padding-left:20px}
  .HeroUnit{padding-bottom:56px}
  .HeroUnit h1{font-size:49px}
  .HeroGrid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px}
  .HeroText{padding-top:52px}
  .HeroShot img{max-width:380px}
  .HeroSeal{width:104px;height:104px;font-size:11px}
  .HeroSeal b{font-size:30px}
  .TrioGrid,.NameGrid,.GiftGrid,.PostGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ReadGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .PriceGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
  .SplitRow{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:44px}
  .SplitRow.flip > div:first-child{order:2}
  .FootTop{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px}
  .FootCols{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
  .MenuKey{display:none}
  .MenuList{display:flex;align-items:center;gap:20px;position:static;padding:0;background:none;
    border:0;box-shadow:none}
  .MenuList a{padding:6px 0;border:0;font-size:15.5px;white-space:nowrap}
  .MenuList a[aria-current]{box-shadow:inset 0 -2px 0 var(--grass)}
  .MenuList .BuyKey{margin-top:0}
  .StickyBuy{display:none}
  .CloseGrid{grid-template-columns:300px minmax(0,1fr);gap:46px}
}

/* ---------- 1220 ------------------------------------------------------ */
@media (min-width:1220px){
  body{font-size:19.5px}
  .HeroUnit h1{font-size:54px}
  .HeroShot img{max-width:410px}
  .MenuList{gap:26px}
  .MenuList a{font-size:16.5px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

@media print{
  .TopBar,.NoticeBar,.StickyBuy,.CloseZone,.BuyKey{display:none!important}
  body{font-size:12pt;color:#000}
  .ZoneDeep{background:#fff;color:#000}
}