/* Built by tools/make_friday.py. Edit the design files or legacy.css, not this file. */
/* ---- older pages: legal, contact, price, company home ---- */
:root{--teal: #0A6B6B;
  --teal-hover: #085A5A;
  --teal-soft: #E6F4F2;
  --ink: #1F2726;
  --ink-heading: #1A202C;
  --ink-second: #454F4E;
  --ink-muted: #4B5563;
  --page: #F0F7F7;
  --card: #FFFFFF;
  --line: #E3EBEA;
  --field-line: #D4DCDB;
  --due: #8A4B00;
  --late: #B42318;
  --chat-bg: #E9F0EF;
  --bubble-out: #D9EFEB;
  --tg-bg: #EEF2F5;
  --tg-head: #2B3A44;
  --radius-control: 10px;
  --radius-card: 12px;
  --font: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial,
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  
  --font-zh: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC",
          "Source Han Sans SC", "Microsoft YaHei", system-ui, "Segoe UI", Roboto, sans-serif;}
*, body:not(.fx):not(.try) *::before, body:not(.fx):not(.try) *::after{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}}
body:not(.fx):not(.try){margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;}
body:not(.fx):not(.try) img, body:not(.fx):not(.try) svg{max-width: 100%;}
body:not(.fx):not(.try) a{color: var(--teal); text-underline-offset: 2px;}
body:not(.fx):not(.try) a:hover{color: var(--teal-hover);}
body:not(.fx):not(.try) :focus-visible{outline: 2px solid var(--teal);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
  border-radius: 4px;}
body:not(.fx):not(.try) h1, body:not(.fx):not(.try) h2, body:not(.fx):not(.try) h3{color: var(--ink-heading); line-height: 1.2; margin: 0 0 .5em;}
body:not(.fx):not(.try) h1{font-size: 30px; font-weight: 700; letter-spacing: -.01em;}
body:not(.fx):not(.try) h2{font-size: 24px; font-weight: 700;}
body:not(.fx):not(.try) h3{font-size: 18px; font-weight: 600;}
body:not(.fx):not(.try) p{margin: 0 0 1em;}
body:not(.fx):not(.try) .wrap{max-width: 1120px; margin: 0 auto; padding: 0 16px;}
body:not(.fx):not(.try) .narrow{max-width: 760px;}
body:not(.fx):not(.try) .skip{position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--teal); color: #fff; padding: 10px 14px; border-radius: var(--radius-control);}
body:not(.fx):not(.try) .skip:focus{top: 8px; color: #fff;}
body:not(.fx):not(.try) .nowrap{white-space: nowrap;}
body:not(.fx):not(.try) .muted{color: var(--ink-second);}
body:not(.fx):not(.try) .small{font-size: 14px;}
body:not(.fx):not(.try) .center{text-align: center;}
body:not(.fx):not(.try) :lang(zh){font-family: var(--font-zh);}
html:lang(zh) body{line-height: 1.7;}
html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3{letter-spacing: 0; line-height: 1.35;}
html:lang(zh) .eyebrow, html:lang(zh) .tg-card .k{letter-spacing: 0;}
html:lang(zh) .lead{font-size: 17px;}
html:lang(zh) .notice a{white-space: nowrap;}
body:not(.fx):not(.try) .btn{display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px;
  border-radius: var(--radius-control);
  font-weight: 600; font-size: 16px; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, transform .1s ease;}
body:not(.fx):not(.try) .btn:active{transform: scale(.98);}
body:not(.fx):not(.try) .btn-main{background: var(--teal); color: #fff;}
body:not(.fx):not(.try) .btn-main:hover{background: var(--teal-hover); color: #fff;}
body:not(.fx):not(.try) .btn-quiet{background: var(--card); color: var(--teal); border-color: var(--field-line);}
body:not(.fx):not(.try) .btn-quiet:hover{background: var(--teal-soft); color: var(--teal-hover);}
body:not(.fx):not(.try) .btn-row{display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px;}
body:not(.fx):not(.try) .btn-row .btn{flex: 1 1 220px;}
body:not(.fx):not(.try) .notice{font-size: 14px; color: var(--ink-second); margin-top: 8px;}
@media (max-width: 459px){}
@media (max-width: 459px){}
body:not(.fx):not(.try) main{display: block;}
body:not(.fx):not(.try) .section{padding: 40px 0;}
body:not(.fx):not(.try) .section-white{background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
body:not(.fx):not(.try) .eyebrow{font-size: 14px; font-weight: 600; color: var(--teal); margin: 0 0 8px; letter-spacing: .02em;}
body:not(.fx):not(.try) .lead{font-size: 18px; color: var(--ink);}
body:not(.fx):not(.try) .hero{padding: 28px 0 32px;}
body:not(.fx):not(.try) .hero h1{font-size: 32px;}
body:not(.fx):not(.try) .ticks{list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px;}
body:not(.fx):not(.try) .ticks li{position: relative; padding-left: 30px;}
body:not(.fx):not(.try) .ticks li::before{content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230A6B6B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;}
body:not(.fx):not(.try) .price-line{background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 12px 14px; margin: 16px 0 0;}
body:not(.fx):not(.try) .price-line strong{color: var(--ink-heading);}
body:not(.fx):not(.try) .text-link{display: inline-flex; align-items: center; min-height: 44px; font-weight: 600;}
body:not(.fx):not(.try) .hero-grid, body:not(.fx):not(.try) .two-col{display: grid; gap: 28px;}
body:not(.fx):not(.try) .card{background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 20px; box-shadow: 0 1px 2px rgba(16, 40, 40, .04);}
body:not(.fx):not(.try) .cards{display: grid; gap: 14px;}
body:not(.fx):not(.try) .cards .card h3{margin-bottom: 6px;}
body:not(.fx):not(.try) .cards .card p:last-child{margin-bottom: 0;}
body:not(.fx):not(.try) .moments{list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;}
body:not(.fx):not(.try) .moments li{background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px;}
body:not(.fx):not(.try) .moments .when{display: block; font-weight: 700; color: var(--teal); margin-bottom: 2px;}
body:not(.fx):not(.try) .steps{list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: step;}
body:not(.fx):not(.try) .steps li{position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px 18px 18px 64px; counter-increment: step;}
body:not(.fx):not(.try) .steps li::before{content: counter(step); position: absolute; left: 18px; top: 18px;
  width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;}
body:not(.fx):not(.try) .steps h3{margin-bottom: 4px;}
body:not(.fx):not(.try) .steps .step-cost{margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--teal);}
body:not(.fx):not(.try) .steps p{margin: 0;}
body:not(.fx):not(.try) .does{list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;}
body:not(.fx):not(.try) .does li{background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 16px 14px 46px; position: relative;}
body:not(.fx):not(.try) .does li::before{content: ""; position: absolute; left: 14px; top: 16px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230A6B6B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;}
body:not(.fx):not(.try) .chip{display: inline-block; margin-top: 14px; padding: 6px 12px; border-radius: 10px;
  background: #EEF1F1; color: var(--ink-second); font-size: 14px; border: 1px solid var(--line);}
body:not(.fx):not(.try) .never{border-left: 4px solid var(--teal);}
body:not(.fx):not(.try) .never ul{margin: 0; padding-left: 20px;}
body:not(.fx):not(.try) .never li{margin-bottom: 6px;}
body:not(.fx):not(.try) .price-grid{display: grid; gap: 16px;}
body:not(.fx):not(.try) .price-card{border: 2px solid var(--teal);}
body:not(.fx):not(.try) .price-big{font-size: 34px; font-weight: 700; color: var(--ink-heading); line-height: 1.1; margin: 4px 0;}
body:not(.fx):not(.try) .price-big span{font-size: 18px; font-weight: 600; color: var(--ink-second);}
body:not(.fx):not(.try) .price-list, body:not(.fx):not(.try) .legal .price-list{list-style: none; padding: 0; margin: 14px 0 0;}
body:not(.fx):not(.try) .price-list li{padding: 10px 0; border-top: 1px solid var(--line);}
body:not(.fx):not(.try) .founding{background: var(--teal-soft); border-color: #C9E4E0;}
body:not(.fx):not(.try) .info-table{width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card);}
body:not(.fx):not(.try) .info-table th, body:not(.fx):not(.try) .info-table td{text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line);}
body:not(.fx):not(.try) .info-table th{width: 38%; font-weight: 600; color: var(--ink-second);}
body:not(.fx):not(.try) .table-scroll{overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card);}
body:not(.fx):not(.try) .founder{display: grid; gap: 16px; align-items: start;}
body:not(.fx):not(.try) .founder-face{width: 88px; height: 88px; border-radius: 50%; background: var(--teal-soft); border: 1px dashed var(--teal);
  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--teal); padding: 6px;}
body:not(.fx):not(.try) .faq details{background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); margin-bottom: 10px;}
body:not(.fx):not(.try) .faq summary{cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; min-height: 52px;
  font-weight: 600; position: relative; color: var(--ink-heading);}
body:not(.fx):not(.try) .faq summary::-webkit-details-marker{display: none;}
body:not(.fx):not(.try) .faq summary::after{content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--teal);}
body:not(.fx):not(.try) .faq details[open] summary::after{content: "\2212";}
body:not(.fx):not(.try) .faq .answer{padding: 0 16px 14px;}
body:not(.fx):not(.try) .faq .answer p:last-child{margin-bottom: 0;}
body:not(.fx):not(.try) .faq .faq-group{font-size: 15px; font-weight: 700; color: var(--teal); margin: 26px 0 10px; letter-spacing: .02em;}
body:not(.fx):not(.try) .faq .faq-group:first-of-type{margin-top: 8px;}
body:not(.fx):not(.try) .call-box{margin-top: 20px;}
body:not(.fx):not(.try) .call-box h3{margin-bottom: 6px;}
body:not(.fx):not(.try) .agenda{margin: 0 0 4px; padding-left: 20px;}
body:not(.fx):not(.try) .agenda li{margin-bottom: 4px;}
body:not(.fx):not(.try) .time-pick{display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 6px;}
body:not(.fx):not(.try) .time-pick .btn{padding: 0 6px; min-width: 0; font-size: 15px;}
body:not(.fx):not(.try) .time-label{font-weight: 600; margin: 14px 0 0;}
body:not(.fx):not(.try) .final{text-align: center;}
body:not(.fx):not(.try) .final .btn-row{justify-content: center; max-width: 560px; margin-left: auto; margin-right: auto;}
body:not(.fx):not(.try) .phone{max-width: 340px; margin: 0 auto; border: 10px solid #1F2726; border-radius: 34px;
  background: var(--chat-bg); overflow: hidden; box-shadow: 0 10px 30px rgba(16, 40, 40, .15);}
body:not(.fx):not(.try) .phone-head{display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #0A6B6B; color: #fff;}
body:not(.fx):not(.try) .phone-head .face{width: 34px; height: 34px; border-radius: 50%; background: #E6F4F2; color: #0A6B6B;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none;}
body:not(.fx):not(.try) .phone-head .who{line-height: 1.2;}
body:not(.fx):not(.try) .phone-head .who strong{display: block; font-size: 15px;}
body:not(.fx):not(.try) .phone-head .who span{font-size: 12px; opacity: .95;}
body:not(.fx):not(.try) .chat{padding: 12px 10px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4;}
body:not(.fx):not(.try) .msg{max-width: 84%; padding: 7px 10px 5px; border-radius: 10px; background: #fff; color: #1F2726; box-shadow: 0 1px 1px rgba(0,0,0,.06);}
body:not(.fx):not(.try) .msg .t{display: block; text-align: right; font-size: 11px; color: #4B5563; margin-top: 2px;}
body:not(.fx):not(.try) .msg.in{align-self: flex-start; border-top-left-radius: 3px;}
body:not(.fx):not(.try) .msg.out{align-self: flex-end; background: var(--bubble-out); border-top-right-radius: 3px;}
body:not(.fx):not(.try) .msg.out .t{color: #3F4A49;}
body:not(.fx):not(.try) .day{align-self: center; background: #fff; color: #454F4E; font-size: 12px; padding: 3px 10px; border-radius: 8px;}
body:not(.fx):not(.try) .handover{align-self: center; text-align: center; font-size: 12px; color: #6B3E00;
  background: #FFF4E5; border: 1px solid #F3D9B1; padding: 5px 10px; border-radius: 8px; max-width: 92%;}
body:not(.fx):not(.try) .sample-label{text-align: center; font-size: 14px; color: var(--ink-second); margin-top: 12px;}
body:not(.fx):not(.try) .phone.tg{background: var(--tg-bg);}
body:not(.fx):not(.try) .phone.tg .phone-head{background: var(--tg-head);}
body:not(.fx):not(.try) .phone.tg .phone-head .face{background: #0A6B6B; color: #fff;}
body:not(.fx):not(.try) .tg-card{background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; color: #1F2726; box-shadow: 0 1px 1px rgba(0,0,0,.06);}
body:not(.fx):not(.try) .tg-card .k{display: block; font-size: 12px; font-weight: 700; color: #0A6B6B; margin-bottom: 4px; letter-spacing: .02em;}
body:not(.fx):not(.try) .tg-card .t{display: block; text-align: right; font-size: 11px; color: #4B5563; margin-top: 4px;}
body:not(.fx):not(.try) .tg-btns{display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px;}
body:not(.fx):not(.try) .tg-btns span{display: block; text-align: center; padding: 8px 6px; border-radius: 8px; background: #E6F4F2; color: #0A6B6B; font-weight: 600; font-size: 14px;}
body:not(.fx):not(.try) .tg-btns span.no{background: #F3F4F6; color: #454F4E;}
body:not(.fx):not(.try) .tg-card ul{margin: 4px 0 0; padding-left: 18px;}
body:not(.fx):not(.try) .legal{padding: 28px 0 48px;}
body:not(.fx):not(.try) .legal h1{font-size: 28px;}
body:not(.fx):not(.try) .legal h2{font-size: 21px; margin-top: 1.6em;}
body:not(.fx):not(.try) .legal h3{font-size: 17px; margin-top: 1.2em;}
body:not(.fx):not(.try) .legal ul, body:not(.fx):not(.try) .legal ol{padding-left: 22px;}
body:not(.fx):not(.try) .legal li{margin-bottom: 6px;}
body:not(.fx):not(.try) .draft{background: #FFF4E5; border: 1px solid #F3D9B1; color: #5C3600; border-radius: var(--radius-card);
  padding: 12px 14px; font-weight: 600; margin: 0 0 20px;}
body:not(.fx):not(.try) .lang-block{background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; margin-bottom: 20px;}
body:not(.fx):not(.try) .lang-block > h2:first-child{margin-top: 0;}
body:not(.fx):not(.try) .toc{font-size: 15px;}
body:not(.fx):not(.try) .toc a{display: inline-flex; min-height: 44px; align-items: center;}
body:not(.fx):not(.try) .updated{color: var(--ink-second); font-size: 14px;}
body:not(.fx):not(.try) .contact-list, body:not(.fx):not(.try) .legal .contact-list{list-style: none; padding: 0; margin: 0;}
body:not(.fx):not(.try) .contact-list li{padding: 12px 0; border-top: 1px solid var(--line);}
body:not(.fx):not(.try) .contact-list li:first-child{border-top: 0;}
body:not(.fx):not(.try) .contact-list .label{display: block; font-size: 14px; color: var(--ink-second);}
body:not(.fx):not(.try) .notfound{padding: 60px 0; text-align: center;}
@media (min-width: 560px){body:not(.fx):not(.try) .cards.three{grid-template-columns: 1fr 1fr;}
body:not(.fx):not(.try) .does{grid-template-columns: 1fr 1fr;}
body:not(.fx):not(.try) .does li:last-child:nth-child(odd){grid-column: 1 / -1;}}
@media (min-width: 900px){body:not(.fx):not(.try) h1{font-size: 40px;}
body:not(.fx):not(.try) h2{font-size: 28px;}
body:not(.fx):not(.try) .hero h1{font-size: 44px;}
body:not(.fx):not(.try) .wrap{padding: 0 32px;}
body:not(.fx):not(.try) .section{padding: 64px 0;}
body:not(.fx):not(.try) .hero{padding: 56px 0 64px;}
body:not(.fx):not(.try) .hero-grid{grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px;}
body:not(.fx):not(.try) .two-col{grid-template-columns: 1fr 1fr; align-items: center; gap: 48px;}
body:not(.fx):not(.try) .moments{grid-template-columns: repeat(3, 1fr);}
body:not(.fx):not(.try) .steps{grid-template-columns: repeat(3, 1fr);}
body:not(.fx):not(.try) .cards.three{grid-template-columns: repeat(3, 1fr);}
body:not(.fx):not(.try) .does{grid-template-columns: repeat(3, 1fr);}
body:not(.fx):not(.try) .does li:last-child:nth-child(odd){grid-column: auto;}
body:not(.fx):not(.try) .does li:last-child:nth-child(3n+1){grid-column: 1 / -1;}
body:not(.fx):not(.try) .price-grid{display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start;}
body:not(.fx):not(.try) .founder{grid-template-columns: 88px 1fr; gap: 24px;}
body:not(.fx):not(.try) .legal h1{font-size: 34px;}
body:not(.fx):not(.try) .price-line{display: inline-block;}}
body:not(.fx):not(.try) .final .call-box{text-align: left; margin-top: 28px;}
/* ---- Friday product pages ---- */
:root{--primary: #0A6B6B; --primary-hover: #085A5A; --navy: #0D2B3E; --soft: #4A9B9B;
    --page: #FAFBFC; --card: #fff; --line: #E5EAEC; --row-line: #EDF1F2; --table-head: #F7FAFA;
    --heading: #111827; --ink: #1F2937; --second: #4B5563; --head: #6B7280;
    --paid: #1B7F55; --due: #A15C00; --late: #B42318;
    --mint: #F0F9F9; --mint-2: #DBF5F2; --mint-line: #CFEAE6;
    --deep: linear-gradient(155deg, #0B4A52 0%, #0A6B6B 48%, #2FA39B 100%);
    --face: linear-gradient(135deg, #FFC48F, #FF9248);}
*{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
body.fx{margin: 0; background: var(--page); color: var(--ink); font: 17px/1.55 ui-sans-serif, -apple-system, system-ui, "Segoe UI", sans-serif;}
::selection{background: #BFE3DF; color: var(--heading);}
.fx h1, .fx h2, .fx h3, .fx p, .fx ul, .fx ol, .fx dl, .fx dd{margin: 0; padding: 0;}
.fx ul, .fx ol{list-style: none;}
.fx a{color: var(--primary); text-underline-offset: 3px;}
.fx .wrap{width: min(1180px, 100% - 40px); margin: 0 auto;}
.fx :focus-visible{outline: 2px solid var(--primary); outline-offset: 2px;}
.fx .btn{display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 10px; font-weight: 600; font-size: 16.5px; text-decoration: none; border: 1px solid transparent; transition: background-color .15s ease, transform .1s ease;}
.fx .btn.small{height: 40px; padding: 0 16px; font-size: 15px;}
.fx .btn.main{background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(10,107,107,.25);}
.fx .btn.main:hover{background: var(--primary-hover);}
.fx .btn.navy{background: var(--navy); color: #fff;}
.fx .btn.navy:hover{background: #123A52;}
.fx .btn.white{background: #fff; color: var(--primary);}
.fx .btn.white:hover{background: var(--mint);}
.fx .btn.quiet{background: #fff; border-color: var(--line); color: var(--ink);}
.fx .btn:active{transform: translateY(1px);}
.fx .play{width: 14px; height: 14px;}
.fx section{padding-top: 112px;}
.fx .head{text-align: center; margin-bottom: 48px;}
.fx .label{display: block; font-size: 13.5px; font-weight: 600; letter-spacing: .06em; color: var(--soft); margin-bottom: 12px;}
.fx h2{font-size: clamp(30px, 3.8vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--heading); text-wrap: balance;}
.fx .head p{margin: 14px auto 0; font-size: 18px; color: var(--head); max-width: 34em;}
.fx .card{background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.04);}
.fx .hero{position: relative; text-align: center; padding-top: 72px;}
.fx .hero::before{content: ""; position: absolute; z-index: -1; left: 50%; top: -40px; width: 900px; max-width: 100%; height: 460px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(159,227,220,.5), transparent 72%); pointer-events: none;}
.fx .badge{display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid var(--mint-line); font-size: 14.5px; font-weight: 600; color: var(--primary);}
.fx h1{margin: 22px auto 0; max-width: 13em; font-size: clamp(38px, 5.4vw, 68px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; color: var(--heading); text-wrap: balance;}
.fx h1 span{color: var(--primary);}
.fx .hero .sub{margin: 20px auto 0; font-size: 19px; color: var(--second); max-width: 31em;}
.fx .ctas{display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px;}
.fx .prefer{margin-top: 16px; font-size: 15.5px; color: var(--head);}
.fx .prefer a{font-weight: 600;}
.fx .assure{display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 15px; color: var(--second);}
.fx .assure li::before, .fx .ticks li::before{content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='%230A6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;}
.fx .stage{position: relative; margin: 64px auto 0; max-width: 1040px; padding: 48px 56px; border-radius: 28px; background: var(--deep); box-shadow: 0 40px 80px -30px rgba(10,74,82,.55); display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; text-align: left;}
.fx .float{position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border-radius: 12px; background: #fff; box-shadow: 0 14px 32px rgba(4,40,44,.28); font-size: 14.5px; font-weight: 600; color: var(--heading);}
.fx .float i{width: 8px; height: 8px; border-radius: 50%; background: #1F9D55; box-shadow: 0 0 0 4px rgba(31,157,85,.18);}
.fx .float.one{left: 28px; top: -22px;}
.fx .float.two{right: 28px; top: -22px;}
.fx .waphone{border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(4,40,44,.35);}
.fx .wa-top{display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #008069; color: #fff;}
.fx .wa-top .back{width: 10px; height: 18px;}
.fx .avatar{width: 36px; height: 36px; border-radius: 50%; background: #DFE5E7; color: #54656F; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none;}
.fx .wa-top b{display: block; font-size: 16px; font-weight: 600; line-height: 1.25;}
.fx .wa-top small{font-size: 12.5px;}
.fx .chat{background: #EFEAE2; padding: 14px; display: flex; flex-direction: column; gap: 8px; height: 506px; overflow: hidden; font-size: 14.5px; line-height: 1.4;}
.fx .chat > *{flex-shrink: 0;}
.fx .chat{justify-content: flex-end;}
.fx .m{position: relative; max-width: 82%; padding: 7px 10px 6px; border-radius: 8px; background: #fff; color: #111B21; box-shadow: 0 1px .5px rgba(11,20,26,.13);}
.fx .m.in{align-self: flex-start; border-top-left-radius: 0;}
.fx .m.out{align-self: flex-end; border-top-right-radius: 0; background: #D9FDD3;}
.fx .m small{display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11px; color: #5E6E77; margin-top: 2px; font-variant-numeric: tabular-nums;}
.fx .tk{width: 16px; height: 11px;}
.fx .day{align-self: center; background: #fff; color: #54656F; box-shadow: 0 1px .5px rgba(11,20,26,.13); border-radius: 7px; padding: 4px 11px; font-size: 12px;}
.fx .typing{align-self: flex-end; flex: none; height: 34px; display: flex; align-items: center; background: #D9FDD3; border-radius: 8px; padding: 0 12px; overflow: hidden;}
.fx .typing i{display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: #6E8F86; animation: bob 1s ease-in-out infinite;}
.fx .typing i:nth-child(2){animation-delay: .15s;}
.fx .typing i:nth-child(3){animation-delay: .3s;}
@keyframes bob{ 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.fx .wa-bar{display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #F0F2F5;}
.fx .wa-bar span{flex: 1; background: #fff; border-radius: 20px; padding: 8px 14px; font-size: 14.5px; color: #667781;}
.fx .wa-bar i{width: 38px; height: 38px; border-radius: 50%; background: #00A884;}
.fx .you h3{font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: #fff;}
.fx .you > p{margin-top: 8px; font-size: 16.5px; color: rgba(255,255,255,.82);}
.fx .owner{margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 14px 32px rgba(4,40,44,.28);}
.fx .owner small{display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--head); margin-bottom: 4px;}
.fx .face{width: 12px; height: 12px; border-radius: 50%; background: var(--face);}
.fx .owner b{display: block; font-size: 16px; color: var(--heading);}
.fx .owner span{font-size: 14px; color: var(--second);}
.fx .whofor{display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 40px; font-size: 15px; color: var(--head); align-items: center;}
.fx .whofor b{font-weight: 400; margin-right: 6px;}
.fx .whofor span{height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600;}
.fx .three{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.fx .step{overflow: hidden;}
.fx .pic{position: relative; height: 236px; padding: 48px 22px 20px; display: grid; place-items: center; background: radial-gradient(120% 100% at 50% 0%, #F7FCFB, var(--mint-2)); border-bottom: 1px solid var(--mint-line);}
.fx .stepno{position: absolute; left: 14px; top: 14px; height: 28px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 8px; background: #fff; border: 1px solid var(--mint-line); font-size: 13px; font-weight: 600; color: var(--primary);}
.fx .step .txt{padding: 22px 24px 26px;}
.fx .step h3{font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--heading);}
.fx .step p{margin-top: 6px; font-size: 16px; color: var(--head);}
.fx .pill{display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px; background: #E3F4EA; border: 1px solid #B9E0C8; color: var(--paid); font-size: 13.5px; font-weight: 600;}
.fx .sendlist{display: grid; justify-items: end; gap: 10px; width: min(230px, 100%);}
.fx .photo{width: 150px; max-width: none; padding: 12px 12px 6px;}
.fx .photo i{display: block; height: 6px; border-radius: 3px; background: #B7DDB0; margin-bottom: 8px;}
.fx .photo i:nth-child(even){width: 68%;}
.fx .connect{display: grid; justify-items: center; gap: 16px;}
.fx .connect .link{display: flex; align-items: center;}
.fx .connect .link i{width: 20px; border-top: 2px solid #9CCFC9;}
.fx .chip{background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--heading); white-space: nowrap; line-height: 1.3;}
.fx .chip small{display: block; font-weight: 400; font-size: 12.5px; color: var(--head); font-variant-numeric: tabular-nums;}
.fx .connect .logo{width: 36px; height: 36px; border-radius: 10px;}
.fx .connect .logo svg{width: 22px; height: 22px;}
.fx .log{width: min(300px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14.5px;}
.fx .log > div{display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--row-line);}
.fx .log > div:last-child{border-bottom: 0;}
.fx .log em{font-style: normal; font-weight: 600; color: var(--paid);}
.fx .log .dim, .fx .log .dim em{color: var(--head); font-weight: 400;}
.fx .stats{display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 900px; margin: 40px auto 0;}
.fx .stats > div{padding: 20px 12px; text-align: center;}
.fx .stats dt{font-size: 30px; font-weight: 700; letter-spacing: -.025em; color: var(--primary); line-height: 1.1;}
.fx .stats dd{margin-top: 6px; font-size: 14.5px; color: var(--head);}
.fx .band{margin-top: 112px; padding: 112px 0; background: #fff; border-block: 1px solid var(--line);}
.fx .band section{padding-top: 0;}
.fx .six{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.fx .feat{padding: 26px; background: var(--page); box-shadow: none;}
.fx .ico{width: 42px; height: 42px; border-radius: 10px; background: #EEF2F3; color: var(--heading); display: grid; place-items: center;}
.fx .ico svg{width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}
.fx .feat h3{margin-top: 18px; font-size: 19px; font-weight: 700; color: var(--heading); letter-spacing: -.01em;}
.fx .feat p{margin-top: 6px; font-size: 15.5px; color: var(--head);}
.fx .plans{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 0 auto; align-items: stretch;}
.fx .plan{position: relative; padding: 30px; display: flex; flex-direction: column; background: var(--page);}
.fx .plan small{font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--head);}
.fx .amount{margin-top: 10px; font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--heading); font-variant-numeric: tabular-nums;}
.fx .amount span{font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--head);}
.fx .plan > p{margin-top: 8px; font-size: 15.5px; color: var(--second); min-height: 3em;}
.fx .ticks{margin: 20px 0 26px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 11px; font-size: 15.5px; color: var(--ink);}
.fx .ticks li{padding-left: 24px; text-indent: -24px;}
.fx .plan .btn{margin-top: auto;}
.fx .plan.top{background: var(--deep); border: 0; box-shadow: 0 30px 60px -24px rgba(10,74,82,.55); color: #fff;}
.fx .plan.top small, .fx .plan.top .amount span{color: rgba(255,255,255,.75);}
.fx .plan.top .amount{color: #fff;}
.fx .plan.top > p{color: rgba(255,255,255,.85);}
.fx .plan.top .ticks{border-top-color: rgba(255,255,255,.2); color: #fff;}
.fx .plan.top .ticks li::before{filter: brightness(0) invert(1);}
.fx .rec{position: absolute; top: -14px; right: 22px; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 8px; background: #fff; border: 1px solid var(--mint-line); font-size: 13px; font-weight: 600; color: var(--primary);}
.fx .compare{display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); grid-template-rows: repeat(5, auto); overflow: hidden; font-size: 15.5px; font-variant-numeric: tabular-nums; max-width: 1040px; margin: 0 auto;}
.fx .col{display: grid; grid-template-rows: subgrid; grid-row: span 5;}
.fx .col > *{padding: 16px 20px; border-bottom: 1px solid var(--row-line); margin: 0;}
.fx .col > :last-child{border-bottom: 0;}
.fx .col > h3{background: var(--table-head); color: var(--head); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--line); display: flex; align-items: center; min-height: 46px; padding-block: 0;}
.fx .col.labelcol > div{color: var(--second);}
.fx .col.fri{background: var(--mint);}
.fx .col.fri > h3{background: var(--primary); color: #fff;}
.fx .col [data-l]::before{content: attr(data-l); display: none; color: var(--second);}
.fx .yes{color: var(--paid); font-weight: 600;}
.fx .no{color: var(--late);}
.fx .part{color: var(--due);}
.fx .four{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.fx .gain{padding: 26px; text-align: center;}
.fx .gain b{display: block; font-size: 40px; font-weight: 700; line-height: 1; color: var(--primary); letter-spacing: -.02em;}
.fx .gain h3{margin-top: 10px; font-size: 19px; font-weight: 700; color: var(--heading);}
.fx .gain p{margin-top: 6px; font-size: 15.5px; color: var(--head);}
.fx h2 .a{color: var(--primary);}
.fx .faq{max-width: 820px; margin: 0 auto;}
.fx details{border-bottom: 1px solid var(--row-line); padding: 0 26px;}
.fx details:last-child{border-bottom: 0;}
.fx summary{cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 17.5px; color: var(--heading); display: flex; justify-content: space-between; gap: 16px;}
.fx summary::-webkit-details-marker{display: none;}
.fx summary::after{content: "+"; color: var(--primary); font-size: 22px; line-height: 1;}
.fx details[open] summary::after{content: "−";}
.fx details p{margin: 0 0 20px; color: var(--second); font-size: 16.5px; max-width: 44em;}
.fx .closing{margin-top: 112px; padding: 88px 24px; border-radius: 28px; text-align: center; background: var(--deep); box-shadow: 0 40px 80px -30px rgba(10,74,82,.55);}
.fx .closing h2{color: #fff; font-size: clamp(34px, 5vw, 60px);}
.fx .closing p{margin: 16px auto 0; font-size: 18px; color: rgba(255,255,255,.85); max-width: 30em;}
.fx .closing .btn.navy{border-color: rgba(255,255,255,.3);}
.fx .stage{grid-template-columns: 1fr 348px 1fr; gap: 44px; padding: 64px 48px 0; overflow: hidden; align-items: center; background: linear-gradient(180deg, #0B4A52 0%, #0A6B6B 62%, #17827D 62%, #2FA39B 100%);}
.fx .stage{overflow: visible;}
.fx .stage::after{content: ""; position: absolute; left: 50%; bottom: 18px; width: 420px; height: 46px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(2,30,34,.55), transparent); pointer-events: none;}
.fx .device{position: relative; z-index: 1; padding: 12px 12px 22px; border-radius: 46px 46px 0 0; background: linear-gradient(145deg, #2B3338, #0C1114); box-shadow: 0 0 0 1.5px #4A555B inset, 0 30px 60px rgba(2,30,34,.5); margin-bottom: 0; align-self: end;}
.fx .device .waphone{border-radius: 0; box-shadow: none;}
.fx .island{position: absolute; left: 50%; top: 22px; width: 92px; height: 26px; margin-left: -46px; border-radius: 14px; background: #05080A; z-index: 2;}
.fx .statusbar{display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 26px 0 30px; background: #008069; color: #fff; border-radius: 34px 34px 0 0; font-size: 14.5px;}
.fx .statusbar span{display: flex; align-items: center; gap: 5px;}
.fx .statusbar i{display: block; background: #fff;}
.fx .sig{width: 16px; height: 10px; clip-path: polygon(0 100%, 0 70%, 22% 70%, 22% 100%, 26% 100%, 26% 45%, 48% 45%, 48% 100%, 52% 100%, 52% 22%, 74% 22%, 74% 100%, 78% 100%, 78% 0, 100% 0, 100% 100%);}
.fx .wifi{width: 14px; height: 10px; clip-path: polygon(50% 100%, 0 30%, 18% 12%, 50% 0, 82% 12%, 100% 30%);}
.fx .bat{width: 23px; height: 11px; border-radius: 3px;}
.fx .device .chat{height: 452px; font-size: 13.5px; padding: 12px;}
.fx .device .wa-top{padding-top: 6px;}
.fx .homebar{display: none;}
.fx .you, .fx .side{color: #fff; align-self: center; padding-bottom: 64px;}
.fx .you{text-align: right;}
.fx .you h3, .fx .side h3{font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: #fff;}
.fx .you p, .fx .side p{margin-top: 8px; font-size: 16px; color: rgba(255,255,255,.82);}
.fx .side .owner{margin-top: 20px;}
@media (max-width: 900px){.fx .stage{grid-template-columns: 1fr; padding: 30px 14px 0; gap: 0; background: linear-gradient(180deg, #0B4A52 0%, #0A6B6B 70%, #17827D 70%, #2FA39B 100%);}
.fx .stage::after{display: none;}
.fx .you{display: none;}
.fx .device{width: min(320px, 100%); margin: 0 auto; order: 2; border-radius: 40px 40px 0 0; padding: 10px 10px 0;}
.fx .device .chat{height: 330px;}
.fx .side{order: 1; padding: 0 4px 22px; text-align: left;}
.fx .side h3, .fx .side p{display: none;}
.fx .side .owner{margin-top: 0;}
.fx .float.one{top: -18px;}}
.fx .hero{text-align: left; padding-top: 56px;}
.fx .hero::before{left: 24%; top: 40px; width: 720px; height: 620px;}
.fx .herogrid{display: grid; grid-template-columns: 440px 1fr; gap: 72px; align-items: center;}
.fx .copy h1{margin: 22px 0 0; max-width: none; font-size: clamp(38px, 4.8vw, 64px);}
.fx .copy .sub{margin: 20px 0 0;}
.fx .copy .ctas, .fx .copy .assure{justify-content: flex-start;}
.fx .visual{position: relative; display: grid; place-items: center; padding: 28px 0 36px;}
.fx .visual::before{content: ""; position: absolute; inset: 6% 2% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(47,163,155,.42), rgba(159,227,220,.25) 55%, transparent 75%); z-index: 0;}
.fx .device{width: 318px; padding: 11px; border-radius: 48px; align-self: auto; transform: perspective(1500px) rotateY(13deg) rotateX(3deg) rotate(-1.5deg); transform-origin: 50% 50%; box-shadow: 0 0 0 1.5px #5B666C inset, -28px 36px 60px -18px rgba(4,40,44,.45), -6px 8px 16px rgba(4,40,44,.18); background: linear-gradient(145deg, #D9DEE1, #8E989D 40%, #C8CED1);}
.fx .device .waphone{border-radius: 0 0 38px 38px; overflow: hidden;}
.fx .statusbar{border-radius: 38px 38px 0 0;}
.fx .island{top: 21px;}
.fx .device .chat{height: 436px;}
.fx .device .wa-bar{padding-bottom: 22px; position: relative;}
.fx .device .wa-bar::after{content: ""; position: absolute; left: 50%; bottom: 7px; width: 110px; height: 4px; margin-left: -55px; border-radius: 2px; background: #111B21; opacity: .8;}
.fx .float.one{left: -104px; top: 150px; right: auto;}
.fx .visual .owner{position: absolute; right: -58px; bottom: 6px; width: 232px; margin: 0; z-index: 2; border: 1px solid var(--line);}
.fx .whofor{margin-top: 56px;}
.fx .plans{grid-template-columns: 1fr 1fr; max-width: 820px;}
.fx .addon{max-width: 820px; margin: 20px auto 0; padding: 26px 30px; display: flex; justify-content: space-between; align-items: center; gap: 28px; background: linear-gradient(120deg, #fff, var(--mint));}
.fx .addon small{font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--primary);}
.fx .addon h3{margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: var(--heading);}
.fx .addon p{margin-top: 4px; font-size: 15.5px; color: var(--second);}
.fx .addon ul{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;}
.fx .addon li{height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink);}
.fx .addon > div:last-child{text-align: right; flex: none;}
.fx .addon .amount{margin: 0 0 12px;}
.fx .addon .btn{border-color: #9CCFC9; color: var(--primary);}
.fx .faq{background: none; border: 0; box-shadow: none; display: grid; gap: 14px;}
.fx .faq details{background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 26px; box-shadow: 0 1px 2px rgba(17,24,39,.04);}
.fx .faq details:last-child{border-bottom: 1px solid var(--line);}
.fx .faq summary{padding: 22px 0; align-items: center; font-size: 18px;}
.fx .faq summary::after{content: ""; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #F1F4F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23111827' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; transition: transform .2s ease;}
.fx .faq details[open] summary::after{content: ""; transform: rotate(180deg);}
.fx .faq details p{margin-bottom: 24px;}
@media (max-width: 900px){.fx .hero{padding-top: 32px;}
.fx .herogrid{grid-template-columns: 1fr; gap: 20px;}
.fx .copy{order: -1;}
.fx .copy h1{font-size: 38px; margin-top: 16px;}
.fx .visual{padding: 20px 0 8px;}
.fx .device{width: min(300px, 86%); transform: none; margin: 0 auto; border-radius: 44px; padding: 10px;}
.fx .device .chat{height: 330px;}
.fx .float.one{left: 0; top: -2px; height: 36px; font-size: 13px;}
.fx .visual .owner{position: relative; right: auto; bottom: auto; width: 100%; margin-top: 14px; order: 3;}
.fx .visual .float.one{top: 2px;}
.fx .whofor{margin-top: 30px;}
.fx .plans{grid-template-columns: 1fr;}
.fx .addon{flex-direction: column; align-items: stretch; padding: 22px 20px; gap: 18px;}
.fx .addon > div:last-child{text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.fx .addon .amount{margin: 0; font-size: 32px;}
.fx .faq details{padding: 0 18px; border-radius: 16px;}
.fx .faq summary{font-size: 16.5px; padding: 18px 0;}
.fx .faq summary::after{width: 36px; height: 36px;}}
.fx .keep{margin-top: 20px; padding: 14px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; background: var(--page); box-shadow: none;}
.fx .pair{display: flex; align-items: flex-start; justify-content: center; padding: 32px 24px 26px; border-radius: 14px; border: 1px solid #DCEEEB; background: radial-gradient(120% 90% at 50% 0%, #F7FCFB, var(--mint-2));}
.fx .mini{width: 216px;}
.fx .mini-top{display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; background: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; font-size: 14.5px; color: var(--heading);}
.fx .mini-top .avatar{width: 24px; height: 24px; font-size: 11px;}
.fx .live{margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #1F9D55; box-shadow: 0 0 0 4px rgba(31,157,85,.18);}
.fx .mini-chat{display: flex; flex-direction: column; gap: 7px; padding: 12px; background: #EFEAE2; border: 1px solid var(--line); border-radius: 0 0 18px 18px; font-size: 13px; line-height: 1.35;}
.fx .mini-chat .m{max-width: 90%; padding: 6px 10px;}
.fx .pair .cap{display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--heading);}
.fx .pair .cap svg{width: 18px; height: 18px;}
.fx .dots{width: 44px; margin-top: 108px; border-top: 2px dotted #7FBDB6; flex: none;}
.fx .keeptxt{padding: 8px 20px 8px 0;}
.fx .keeptxt h3{font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--heading);}
.fx .keeptxt p{margin-top: 8px; font-size: 16.5px; color: var(--head);}
.fx .keeptxt .ticks{border-top: 0; padding-top: 0; margin: 18px 0 0;}
@media (max-width: 900px){.fx .keep{grid-template-columns: 1fr; gap: 6px; padding: 10px; margin-top: 12px;}
.fx .pair{padding: 18px 8px 16px;}
.fx .mini{width: 46%;}
.fx .dots{width: 8%; margin-top: 92px;}
.fx .mini-chat{font-size: 11.5px; padding: 8px; gap: 5px;}
.fx .mini-chat .m{padding: 5px 7px;}
.fx .mini-top{height: 40px; padding: 0 10px; font-size: 13px;}
.fx .pair .cap{font-size: 13px;}
.fx .keeptxt{padding: 14px 10px 10px;}
.fx .keeptxt h3{font-size: 20px;}
.fx .keeptxt p{display: none;}}
.fx .stats dt{font-size: 28px;}
.fx .wachip{display: inline-flex; align-items: center; gap: 9px;}
.fx .wai{width: 22px; height: 22px; flex: none;}
.fx .chip small{font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;}
.fx .mini-chat{height: 158px; justify-content: flex-end; overflow: hidden;}
.fx .mini-chat > *{flex-shrink: 0;}
@media (max-width: 900px){.fx .stats dt{font-size: 21px;}
.fx .mini-chat{height: 176px;}}
.fx .field{position: relative; overflow: hidden; white-space: nowrap;}
.fx .field em{font-style: normal;}
.fx .field .ty{position: absolute; left: 14px; right: 10px; top: 8px; color: #111B21; opacity: 0; overflow: hidden; text-overflow: clip;}
.fx .typing, .fx .dot{display:none}
.fx .p1, .fx .p2, .fx .p3{opacity:0;visibility:hidden}
.fx .labels .l0{color:#0A6B6B;border-color:#0A6B6B}
.fx .sent{opacity:0}
.fx .f0 .node, .fx .f1 .node, .fx .f2 .node, .fx .f3 .node{background:#0A6B6B;color:#fff;border-color:#0A6B6B}
@media (prefers-reduced-motion: reduce){*{animation: none !important;}
.fx .typing{display: none;}
html{scroll-behavior: auto;}}
@media (max-width: 900px){.fx section{padding-top: 72px;}
.fx .head{margin-bottom: 28px;}
.fx .head p{font-size: 16.5px;}
.fx .hero{padding-top: 36px;}
.fx h1{font-size: 38px; margin-top: 16px;}
.fx .hero .sub{font-size: 17.5px; margin-top: 14px;}
.fx .ctas{margin-top: 22px;}
.fx .ctas .btn{flex: 1 1 100%;}
.fx .assure{font-size: 14.5px; gap: 4px 16px;}
.fx .stage{margin-top: 44px; padding: 14px; border-radius: 20px; grid-template-columns: 1fr; gap: 14px;}
.fx .float.one{left: 10px; top: -18px; height: 36px; font-size: 13px; padding: 0 12px;}
.fx .float.two{display: none;}
.fx .chat{height: 372px; font-size: 14px;}
.fx .you h3, .fx .you > p{display: none;}
.fx .owner{margin-top: 0;}
.fx .whofor{margin-top: 26px; gap: 8px;}
.fx .whofor b{flex: 1 1 100%; text-align: center; margin: 0;}
.fx .three, .fx .six, .fx .four{grid-template-columns: 1fr; gap: 12px;}
.fx .pic{height: 210px;}
.fx .step .txt{padding: 18px 20px 20px;}
.fx .stats{grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px;}
.fx .stats dt{font-size: 24px;}
.fx .band{margin-top: 72px; padding: 72px 0;}
.fx .feat{padding: 18px; display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; align-items: center;}
.fx .feat h3{margin-top: 0; font-size: 17.5px;}
.fx .feat p{display: none;}
.fx .plans{grid-template-columns: 1fr; gap: 14px;}
.fx .plan.top{order: -1;}
.fx .plan > p{min-height: 0;}
.fx .compare{display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -20px; padding: 0 20px 6px; scrollbar-width: none; background: none; border: 0; border-radius: 0; box-shadow: none;}
.fx .compare::-webkit-scrollbar{display: none;}
.fx .col{display: block; flex: 0 0 80%; scroll-snap-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;}
.fx .col.labelcol{display: none;}
.fx .col.fri{order: -1; border-color: var(--primary);}
.fx .col > h3{font-size: 13px;}
.fx .col > div{display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; text-align: right;}
.fx .col [data-l]::before{display: block; text-align: left; font-weight: 400;}
.fx .four{grid-template-columns: 1fr 1fr;}
.fx .gain{padding: 18px 12px;}
.fx .gain b{font-size: 30px;}
.fx .gain h3{font-size: 17px; margin-top: 6px;}
.fx .gain p{display: none;}
.fx details{padding: 0 18px;}
.fx .closing{margin-top: 72px; padding: 52px 20px; border-radius: 20px;}}
html.night body.fx header.hd{background: #0A1B29; border-bottom-color: rgba(255,255,255,.08);}
html.night body.fx header.hd .hd-brand, html.night body.fx header.hd .hd-nav a, html.night body.fx header.hd .lang-switch a, html.night body.fx header.hd .hd-signin{color: #E6EEF2;}
html.night body.fx header.hd .lang-switch a[aria-current]{color: #6FD8CB; border-bottom-color: #6FD8CB;}
.fx .act{padding-top: 0;}
.fx .pin{position: relative;}
.fx .stick{position: relative;}
.fx .hero.act{display: grid; grid-template-columns: 440px 1fr; column-gap: 72px; align-items: start; padding-top: 24px;}
.fx .hero .copy{grid-column: 2; grid-row: 1; padding-top: 120px;}
.fx .hero .night-pin{grid-column: 1; grid-row: 1;}
.fx .night-pin .stick{padding: 40px 0; display: grid; place-items: center;}
.fx .field .ty{display: none; color: #111B21; white-space: nowrap; overflow: hidden;}
.fx .field.is-typing .ph{visibility: hidden;}
.fx .field .ty.on{display: block; opacity: 1; clip-path: inset(0 calc((1 - var(--t, 1)) * 100%) 0 0);}
.fx .whofor{margin: 24px 0 0;}
.fx .tense{background: #fff; border-block: 1px solid var(--line); margin-top: 96px;}
.fx .tense-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 88px 0;}
.fx .tense h2{font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -.035em; margin-top: 4px;}
.fx .kin span{display: block; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);}
.fx .kin span + span{color: var(--soft);}
.fx .tense .sub{margin: 18px 0 0; font-size: 18px; color: var(--second); max-width: 28em; transition: opacity .45s ease;}
.fx .inbox{border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 18px 40px rgba(17,24,39,.08);}
.fx .inbox-top{display: flex; justify-content: space-between; padding: 11px 18px; background: var(--table-head); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--head);}
.fx .inbox .row{display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--row-line); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);}
.fx .inbox .row:last-child{border-bottom: 0;}
.fx .inbox .avatar{width: 42px; height: 42px; background: #E8EDED; color: #54656F;}
.fx .inbox .row > div:nth-child(2){min-width: 0;}
.fx .inbox b{display: block; font-size: 15.5px; color: var(--heading); font-weight: 600;}
.fx .inbox p{margin: 0; font-size: 14.5px; color: var(--second); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.fx .inbox p.ok{color: var(--paid); font-weight: 600;}
.fx .inbox .when{text-align: right; font-size: 12.5px; color: var(--paid); font-variant-numeric: tabular-nums;}
.fx .inbox .when.dim{color: var(--head);}
.fx .inbox .badge{display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: #1F9D55; color: #fff; font-size: 11.5px; font-weight: 700; margin-top: 4px;}
.fx .inbox .row.gone{background: #FEF6F5;}
.fx .inbox .row.gone p{color: var(--late); font-weight: 600;}
.fx .inbox .row.gone .when{color: var(--head);}
.fx .turn .stick{padding: 96px 0 72px;}
.fx .wipe{position: relative; max-width: 600px; margin: 0 auto;}
.fx .layer .tag{display: inline-flex; height: 28px; align-items: center; padding: 0 11px; margin-bottom: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; background: #FDECEA; color: var(--late);}
.fx .layer.after .tag{background: var(--mint-2); color: var(--primary);}
.fx .layer.after{margin-top: 28px;}
.fx .seam{display: none;}
.fx .rail-act.band{margin-top: 112px; padding: 0;}
.fx .rail-act .stick{padding: 96px 0;}
.fx .rail-window{overflow-x: auto; scrollbar-width: none;}
.fx .rail-window::-webkit-scrollbar{display: none;}
.fx .rail{display: flex; gap: 20px; width: max-content; padding: 0 max(20px, calc((100vw - 1180px) / 2)); transform: translateX(var(--x, 0px)); will-change: transform;}
.fx .rail .feat{width: 340px; flex: none; background: #fff;}
.fx .sysline{margin: 14px auto 0 !important; font-size: 16px !important; font-weight: 600; color: var(--primary) !important;}
.fx .tilt{transition: transform .25s ease; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));}
html.sc .night-pin{height: 280vh;}
html.sc .stick{position: sticky; top: 68px;}
html.sc .night-pin .stick{height: calc(100vh - 68px); padding: 0;}
html.sc .hero .copy{position: sticky; top: 68px; align-self: start; min-height: calc(100vh - 68px); display: flex; flex-direction: column; justify-content: center; padding-top: 0;}
html.sc .chat .m:not(.on), html.sc .chat .day[data-at]:not(.on){display: none;}
html.sc .float[data-at], html.sc .owner[data-at]{transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);}
html.sc .float[data-at]:not(.on), html.sc .owner[data-at]:not(.on){opacity: 0; transform: translateY(10px);}
html.sc .tense .pin{height: 210vh;}
html.sc .tense .stick{min-height: calc(100vh - 68px); align-content: center;}
html.sc .tense-grid{padding: 0; width: min(1180px, 100% - 40px);}
html.sc .kin span:not(.on), html.sc .tense .sub:not(.on){opacity: .14;}
html.sc .tense .row:not(.on){opacity: 0; transform: translateY(12px);}
html.sc .turn .pin{height: 280vh;}
html.sc .turn .stick{min-height: calc(100vh - 68px); padding: 40px 0; display: flex; flex-direction: column; justify-content: center;}
html.sc .turn .head{margin-bottom: 32px;}
html.sc .wipe .layer.after{position: absolute; inset: 0; margin: 0; clip-path: inset(0 calc((1 - var(--w, 0)) * 100%) 0 0);}
html.sc .wipe .layer.after .inbox{box-shadow: 0 18px 40px rgba(10,107,107,.16);}
html.sc .seam{display: block; position: absolute; top: 28px; bottom: -10px; left: calc(var(--w, 0) * 100%); width: 2px; background: var(--primary); opacity: calc(var(--w, 0) * 40);}
html.sc .seam::after{content: ""; position: absolute; top: 50%; left: -12px; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 6px rgba(10,107,107,.15);}
html.sc .rail-act .stick{height: calc(100vh - 68px); padding: 0; display: flex; flex-direction: column; justify-content: center;}
html.sc .rail-window{overflow: hidden;}
@media (max-width: 900px){.fx .hero.act{grid-template-columns: 1fr; padding-top: 8px;}
.fx .hero .copy, html.sc .hero .copy{grid-column: 1; grid-row: 1; position: static; min-height: 0; padding-top: 28px;}
.fx .hero .night-pin{grid-column: 1; grid-row: 2;}
html.sc .night-pin{height: 230vh;}
html.sc .stick{top: 58px;}
html.sc .night-pin .stick, html.sc .tense .stick, html.sc .turn .stick, html.sc .rail-act .stick{height: auto; min-height: calc(100vh - 58px);}
.fx .tense{margin-top: 56px;}
.fx .tense-grid{grid-template-columns: 1fr; gap: 24px; padding: 56px 0;}
html.sc .tense .pin{height: 190vh;}
html.sc .turn .pin{height: 240vh;}
.fx .turn .stick, .fx .rail-act .stick{padding: 56px 0;}
.fx .inbox .row{padding: 11px 14px;}
.fx .rail .feat{width: 80vw;}
.fx .rail-act.band{margin-top: 64px;}
.fx .tilt{transform: none;}}
.fx .copy h1{animation: arrive .45s cubic-bezier(.2,.7,.2,1) both;}
@keyframes arrive{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fx .notice{margin-top: 14px; font-size: 13.5px; color: var(--head);}
.fx .notice.c{text-align: center; margin-top: 22px;}
.fx .systemline{text-align: center;}
.fx .systemline h2{font-size: clamp(30px, 4.6vw, 58px); max-width: 15em; margin: 0 auto;}
.fx .systemline p{margin-top: 16px; font-size: 19px; color: var(--head);}
.fx .who{max-width: 820px; margin: 0 auto; padding: 30px; display: grid; grid-template-columns: 96px 1fr; gap: 26px; align-items: center;}
.fx .who-face{width: 96px; height: 96px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: #fff; box-shadow: 0 0 0 6px var(--mint-2);}
.fx .who-cta{margin-top: 18px;}
.fx .who p{font-size: 16.5px; color: var(--second);}
.fx .who p + p{margin-top: 8px; font-size: 14.5px; color: var(--head);}
.fx .who strong{color: var(--heading);}
.fx .plan .btn, .fx .addon .btn{width: 100%;}
.fx .addon .btn{width: auto;}
@media (prefers-reduced-motion: reduce){.fx .copy h1{animation: none;}}
@media (max-width: 900px){.fx .who{grid-template-columns: 1fr; padding: 22px 20px; gap: 16px; justify-items: start;}
.fx .who-face{width: 72px; height: 72px; font-size: 26px;}
.fx .systemline p{font-size: 17px;}}
.fx .calc{display: grid; grid-template-columns: 1.1fr .9fr; max-width: 1040px; margin: 0 auto; align-items: stretch;}
.fx .calc-in{background: #fff; border: 1px solid var(--line); border-right: 0; border-radius: 20px 0 0 20px; padding: 40px 44px; display: grid; gap: 30px; align-content: center;}
.fx .slide{display: grid; grid-template-columns: 1fr auto; row-gap: 12px; align-items: baseline; cursor: pointer;}
.fx .slide .q{font-size: 16.5px; font-weight: 600; color: var(--heading);}
.fx .slide output{font-size: 22px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -.02em;}
.fx .slide input{grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; accent-color: var(--primary); cursor: pointer;}
.fx .calc-out{position: relative; margin: -22px 0; padding: 44px 40px; border-radius: 20px; background: var(--deep); color: #fff; box-shadow: 0 30px 60px -24px rgba(10,74,82,.6); display: flex; flex-direction: column; justify-content: center;}
.fx .calc-out small{font-size: 14px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.78);}
.fx .calc-out .big{margin: 6px 0 14px; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;}
.fx .calc-out .big b{font-size: clamp(52px, 6vw, 76px); letter-spacing: -.045em; margin-left: 4px;}
.fx .calc-out .big span{font-size: 16px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.75); margin-left: 6px;}
.fx .calc-out p{margin: 0 0 24px; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 24em;}
.fx .calc-out .btn{align-self: flex-start; box-shadow: 0 10px 24px -8px rgba(0,0,0,.35);}
.fx .calc-out .fine{margin-top: 16px; font-weight: 400; font-size: 13px; color: rgba(255,255,255,.65);}
@media (max-width: 900px){.fx .calc{grid-template-columns: 1fr;}
.fx .calc-in{border-right: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 28px 22px 36px; gap: 24px;}
.fx .calc-out{margin: -14px 0 0; padding: 30px 22px;}
.fx .calc-out .btn{align-self: stretch;}}
.fx .howline{position: relative; height: 4px; border-radius: 2px; background: var(--mint-line); margin: -20px 0 28px; overflow: hidden;}
.fx .howline i{position: absolute; inset: 0; background: var(--primary); transform-origin: left; transform: scaleX(var(--hp, 1));}
html.sc .wipe .layer.after{background: var(--page);}
html.sc .keep-act .mini-chat > [data-at], html.sc .compare .fri > [data-at], html.sc .how-act [data-at]{transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);}
html.sc .keep-act .mini-chat > [data-at]:not(.on){opacity: 0; transform: translateY(10px);}
html.sc .compare .fri > [data-at]:not(.on){opacity: 0; transform: translateX(-10px);}
html.sc .how-act .step:not(.on){opacity: .35; transform: translateY(14px);}
html.sc .how-act .pic [data-at]:not(.on){opacity: 0; transform: translateY(8px) scale(.96);}
html.sc .how-act .connect .link i[data-at]{transform-origin: left;}
html.sc .how-act .connect .link i[data-at]:not(.on){opacity: 1; transform: scaleX(0);}
@media (min-width: 901px){.fx .float.one{left: auto; right: -44px; top: 70px;}}
@media (min-width: 901px) and (min-height: 720px){html.sc .how-act .pin{height: 230vh;}
html.sc .how-act .stick{min-height: calc(100vh - 68px); display: flex; flex-direction: column; justify-content: center;}}
html.sc .night-pin, html.sc .tense .pin, html.sc .how-act .pin, html.sc .rail-act .pin{height: auto !important;}
html.sc .stick{position: relative; top: auto;}
.fx .hero.act{align-items: center;}
html.sc .hero .copy{position: static; min-height: 0; display: block; padding-top: 0;}
html.sc .night-pin .stick{height: auto; padding: 48px 0;}
html.sc .tense .stick{min-height: 0;}
html.sc .tense-grid{padding: 96px 0;}
html.sc .how-act .stick{min-height: 0; display: block;}
html.sc .rail-act .stick{height: auto; padding: 96px 0; display: block;}
.fx .tense .wipe{max-width: 520px; width: 100%; margin: 0 0 0 auto;}
.fx .tense .wipe .layer.after{margin-top: 18px;}
html.sc .tense .wipe .layer.after{margin-top: 0;}
.fx .tense .then{margin: 22px 0 0; font-size: 19px; font-weight: 600; color: var(--primary); max-width: 26em;}
.fx .tense .then b{font-weight: 700;}
html.sc .tense .then{transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);}
html.sc .tense .then:not(.on){opacity: 0; transform: translateY(8px);}
html.sc .tense .layer.after .row{opacity: 1; transform: none;}
html.sc .tense .wipe.done .seam{opacity: 0; transition: opacity .4s ease;}
@media (min-width: 901px){.fx .rail-window, html.sc .rail-window{overflow: visible;}
.fx .rail{display: grid; grid-template-columns: repeat(3, 1fr); width: auto; max-width: 1180px; margin: 0 auto; padding: 0 20px; transform: none;}
.fx .rail .feat{width: auto;}}
@media (max-width: 900px){html.sc .night-pin .stick{padding: 28px 0 8px;}
html.sc .tense-grid{padding: 56px 0;}
.fx .tense .wipe{margin: 0 auto;}
html.sc .rail-act .stick{padding: 56px 0;}}
html.sc .chat .m.on, html.sc .chat .day.on{animation: bubble .42s cubic-bezier(.2,.8,.25,1) backwards;}
html.sc .chat .m.in.on{transform-origin: 0 100%;}
html.sc .chat .m.out.on{transform-origin: 100% 100%;}
@keyframes bubble{ from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
html.sc .chat .glide{transition: transform .42s cubic-bezier(.2,.8,.25,1);}
@media (prefers-reduced-motion: reduce){.fx .copy h1{animation: none;}}
.fx .closing{display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; text-align: left !important; padding: 64px 64px !important;}
.fx .closing p{margin-left: 0 !important;}
.fx .closing .ctas{justify-content: flex-start;}
.fx .closing{margin-bottom: 96px;}
.fx .cl-chat{position: relative; background: #EFEAE2; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.45);}
.fx .cl-tag{position: absolute; top: 12px; right: 12px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; color: var(--primary);}
.fx .cl-top{display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #008069; color: #fff;}
.fx .cl-top b{display: block; font-size: 15px;}
.fx .cl-top small{font-size: 11.5px; opacity: .8;}
.fx .cl-logo{width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none;}
.fx .cl-logo svg{width: 18px; height: 18px;}
.fx .cl-logo svg path, .fx .cl-logo svg circle{fill: var(--primary);}
.fx .cl-body{display: grid; grid-template-columns: 1fr; gap: 8px; padding: 16px 14px 10px; min-height: 190px; align-content: end;}
.fx .cl-body .b.in, .fx .cl-body .dots{grid-row: 2; grid-column: 1; justify-self: start; align-self: start;}
.fx .cl-body .dots{margin: 0; width: auto;}
.fx .cl-body .b{max-width: 86%; padding: 8px 11px; border-radius: 10px; background: #fff; color: #111B21; font-size: 14.5px; line-height: 1.4; box-shadow: 0 1px .5px rgba(11,20,26,.13);}
.fx .cl-body .b.out{justify-self: end; background: #D9FDD3;}
.fx .cl-body .b small{display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 2px;}
.fx .cl-body .b .tk{width: 16px; height: 11px; vertical-align: -1px;}
.fx .cl-body .dots{display: none; align-self: flex-start; gap: 3px; padding: 9px 11px; border-radius: 10px; background: #fff;}
.fx .cl-body .dots i{width: 6px; height: 6px; border-radius: 50%; background: #8696A0; animation: dot 1s infinite ease-in-out;}
.fx .cl-body .dots i:nth-child(2){animation-delay: .15s;}
.fx .cl-body .dots i:nth-child(3){animation-delay: .3s;}
html.sc .cl-body .dots.on{display: inline-flex;}
html.sc .cl-body .b[data-at]{transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.25,1);}
html.sc .cl-body .b[data-at]:not(.on){visibility: hidden; opacity: 0; transform: translateY(6px);}
.fx .cl-note{display: block; padding: 0 14px 14px; font-size: 12.5px; color: #54656F;}
@media (max-width: 900px){.fx .closing{grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 20px !important; text-align: center !important;}
.fx .closing p{margin-left: auto !important;}
.fx .closing .ctas{justify-content: center;}
.fx .closing{margin-bottom: 56px;}
.fx .cl-body{min-height: 0;}
.fx .cl-chat{text-align: left;}
.fx .cl-tag{position: static; display: block; width: max-content; margin: 10px auto;}}
.fx #faq .faq{display: block; columns: 2; column-gap: 16px; max-width: 1080px;}
.fx #faq .faq details{break-inside: avoid; margin: 0 0 12px; display: block;}
.fx #faq .faq p{font-size: 15.5px; line-height: 1.65; color: var(--second);}
@media (max-width: 900px){.fx #faq .faq{columns: 1;}}
.fx .tiers{display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 18px; max-width: 1080px; margin: 0 auto; align-items: stretch;}
.fx .tier{position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px 22px; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.04);}
.fx .tier small{font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--head);}
.fx .tier .amount{margin: 10px 0 6px; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--heading); font-variant-numeric: tabular-nums;}
.fx .tier .amount span{font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--head);}
.fx .tier p{font-size: 14.5px; color: var(--second); min-height: 3em;}
.fx .tier p b{color: var(--heading);}
.fx .tier .ticks{display: grid; gap: 8px; margin: 16px 0 22px; padding-top: 16px; border-top: 1px solid var(--row-line); font-size: 14.5px; color: var(--ink);}
.fx .tier .btn{margin-top: auto; width: 100%;}
.fx .tier.top{border: 2px solid var(--primary); background: var(--mint); box-shadow: 0 18px 40px -20px rgba(10,107,107,.45); transform: translateY(-8px);}
.fx .tier.top small, .fx .tier.top .amount{color: var(--primary);}
.fx .tier.top .ticks{border-top-color: var(--mint-line);}
.fx .tier .rec{position: absolute; top: -13px; left: 24px; right: auto; width: auto; transform: none; margin: 0; height: 26px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 8px; background: var(--primary); color: #fff; font-size: 12.5px; font-weight: 700;}
@media (max-width: 900px){.fx .tiers{grid-template-columns: 1fr; gap: 16px;}
.fx .tier.top{order: -1; transform: none; margin-top: 10px;}
.fx .tier{padding: 22px 18px 18px;}
.fx .tier p{min-height: 0;}
.fx .tier .amount{font-size: 36px;}}
.fx .built{width: 100%; max-width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; font-size: 13px; box-shadow: 0 10px 24px -16px rgba(17,24,39,.25);}
.fx .built > b{font-size: 13px; color: var(--heading); padding-bottom: 6px; border-bottom: 1px solid var(--row-line); margin-bottom: 2px;}
.fx .built > div{display: flex; justify-content: space-between; gap: 10px; padding: 4px 0;}
.fx .built > div span{color: var(--head);}
.fx .built > div em{font-style: normal; font-weight: 600; color: var(--paid);}
.fx .built .num{align-items: center; justify-content: flex-start; gap: 8px; margin-top: 4px; padding: 8px; border-radius: 9px; background: var(--mint);}
.fx .built .num .wai{width: 18px; height: 18px; flex: none;}
.fx .built .num span{display: grid; font-weight: 600; color: var(--heading); line-height: 1.25;}
.fx .built .num small{font-weight: 400; font-size: 11.5px; color: var(--head); font-family: ui-monospace, "SF Mono", Menlo, monospace;}
.fx .built .num i{margin-left: auto; font-style: normal; font-weight: 700; font-size: 12px; color: var(--paid); white-space: nowrap;}
.fx .how-act .pic{height: 252px;}
@media (max-width: 900px){.fx .how-act .pic{height: auto; min-height: 210px; padding-bottom: 22px;}}
html.sc .how-act .built [data-at]{transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);}
html.sc .how-act .built [data-at]:not(.on){opacity: 0; transform: translateY(8px);}
.fx .op .dots{display: none; align-self: flex-end; gap: 3px; padding: 8px 10px; border-radius: 9px; background: #D9FDD3;}
.fx .op .dots i{width: 5px; height: 5px; border-radius: 50%; background: #5E8C6A; animation: dot 1s infinite ease-in-out;}
.fx .op .dots i:nth-child(2){animation-delay: .15s;}
.fx .op .dots i:nth-child(3){animation-delay: .3s;}
@keyframes dot{ 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
html.sc .op .dots.on{display: inline-flex;}
html.sc .op [data-at]{transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.25,1);}
html.sc .op .b[data-at]:not(.on), html.sc .op .sys:not(.on), html.sc .op .stamp:not(.on){opacity: 0; transform: translateY(8px) scale(.97);}
html.sc .op .b[data-at]:not(.on){position: absolute; visibility: hidden;}
html.sc .op .setup .bar i{width: calc(4% + var(--pg, 1) * 17%);}
.fx .copy h1{font-size: clamp(38px, 4.2vw, 56px) !important;}
.fx section .head h2, .fx .tense h2, .fx .systemline h2{font-size: clamp(30px, 3.1vw, 40px) !important; line-height: 1.12; letter-spacing: -.03em;}
.fx section .head p, .fx .tense .sub{font-size: 17px !important;}
.fx .head{margin-bottom: 44px;}
.fx .closing h2{font-size: clamp(32px, 3.6vw, 46px) !important;}
.fx .feat h3, .fx .step h3, .fx .addon h3, .fx .keeptxt h3{font-size: 18px !important;}
.fx .feat p, .fx .step p, .fx .keeptxt p{font-size: 15px !important;}
.fx .faq summary{font-size: 17px !important;}
.fx .stages + .tense{margin-top: 0;}
html:not(.night) .stages + .tense{margin-top: 48px;}
.fx .opts{display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1180px; margin: 0 auto; align-items: stretch;}
.fx .opt{display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.04);}
.fx .opt .op{height: 150px;}
.fx .opt h3{margin: 16px 6px 10px; font-size: 17px; font-weight: 700; color: var(--heading); letter-spacing: -.01em;}
.fx .opt ul{display: grid; margin: 0 6px;}
.fx .opt li{display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--row-line); font-size: 14px;}
.fx .opt li span{color: var(--head);}
.fx .opt li b{display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); text-align: right;}
.fx .opt li b i{display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10.5px; font-style: normal; font-weight: 700; color: #fff; flex: none;}
.fx .opt li b.yes{color: var(--paid);}
.fx .opt li b.yes i{background: var(--paid);}
.fx .opt li b.no{color: var(--late);}
.fx .opt li b.no i{background: var(--late);}
.fx .opt li b.part{color: var(--due);}
.fx .opt li b.part i{background: var(--due);}
.fx .opt-price{display: flex; justify-content: space-between; align-items: baseline; margin: auto 6px 0; padding-top: 12px; border-top: 1px solid var(--line);}
.fx .opt-price span{font-size: 13px; color: var(--head);}
.fx .opt-price b{font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--heading); font-variant-numeric: tabular-nums;}
.fx .opt.fri{border: 2px solid var(--primary); background: var(--mint); box-shadow: 0 18px 40px -20px rgba(10,107,107,.45); transform: translateY(-6px);}
.fx .opt.fri h3, .fx .opt.fri .opt-price b{color: var(--primary);}
.fx .opt.fri li{border-top-color: var(--mint-line);}
.fx .opt.fri .opt-price{border-top-color: var(--mint-line);}
@media (max-width: 1100px) and (min-width: 901px){.fx .opts{grid-template-columns: repeat(2, 1fr);}
.fx .opt.fri{transform: none;}}
@media (max-width: 900px){.fx .head{margin-bottom: 28px;}
.fx .opts{display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -20px; padding: 10px 20px 8px; scrollbar-width: none;}
.fx .opts::-webkit-scrollbar{display: none;}
.fx .opt{flex: 0 0 78%; scroll-snap-align: center;}
.fx .opt.fri{order: -1; transform: none;}
.fx .opt .op{height: 136px;}}
.fx .scale{max-width: 640px; margin: -8px auto 40px; padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 12px 32px -18px rgba(17,24,39,.18); display: grid; gap: 12px;}
.fx .scale small{font-size: 13px; font-weight: 600; color: var(--head);}
.fx .sc-row{display: grid; grid-template-columns: 150px 1fr 96px; align-items: center; gap: 14px;}
.fx .sc-row span{font-size: 15px; font-weight: 600; color: var(--heading);}
.fx .sc-row i{height: 14px; border-radius: 7px; background: #EEF2F3; overflow: hidden;}
.fx .sc-row b{display: block; height: 100%; width: 100%; border-radius: 7px; transition: width .5s cubic-bezier(.2,.7,.2,1);}
.fx .sc-row.lose b{background: #E0605A;}
.fx .sc-row.fri b{background: var(--primary); width: 20%;}
.fx .sc-row em{font-style: normal; text-align: right; font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;}
.fx .sc-row.lose em{color: var(--late);}
.fx .sc-row.fri em{color: var(--primary);}
.fx .scale p{margin: 4px 0 0; font-size: 18px; font-weight: 700; color: var(--heading); letter-spacing: -.01em;}
.fx .scale a{justify-self: start; font-size: 14px; font-weight: 600;}
@media (prefers-reduced-motion: reduce){.fx .sc-row b{transition: none;}}
@media (max-width: 900px){.fx .scale{margin: -4px 0 28px; padding: 18px;}
.fx .sc-row{grid-template-columns: 1fr auto; gap: 6px 10px;}
.fx .sc-row i{grid-column: 1 / -1; grid-row: 2;}
.fx .scale p{font-size: 16.5px;}}
.fx .decide.act, .fx #price.act{padding-top: 112px;}
.fx .how-act + #price, .fx #how + #price{margin-top: 0;}
.fx .stages{position: sticky; top: 68px; z-index: 5; height: 0; overflow: visible;}
.fx .stages-in{display: flex; align-items: center; gap: 4px; width: max-content; margin: 0 auto; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid var(--line); box-shadow: 0 10px 30px -12px rgba(17,24,39,.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(12px); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);}
.fx .stages.on .stages-in{opacity: 1; pointer-events: auto; transform: translateY(12px);}
.fx .stages a{display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 8px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--second); text-decoration: none; white-space: nowrap;}
.fx .stages a i{width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-style: normal; background: #EEF2F3; color: var(--head);}
.fx .stages a:hover{color: var(--heading);}
.fx .stages a.now{background: var(--primary); color: #fff;}
.fx .stages a.now i{background: rgba(255,255,255,.22); color: #fff;}
.fx .stages a.done i{background: var(--mint-2); color: var(--primary);}
.fx .stages a.st-price{padding: 0 14px; margin-left: 4px; border-left: 1px solid var(--line); border-radius: 0 999px 999px 0;}
.fx .stages a.st-price.now{border-radius: 999px; border-color: transparent;}
@media (prefers-reduced-motion: reduce){.fx .stages-in{transition: none;}}
.fx .compare{grid-template-rows: repeat(6, auto) !important; grid-template-columns: .8fr repeat(4, 1fr) !important; max-width: 1180px !important;}
.fx .compare .col{grid-row: span 6 !important;}
.fx .compare .col > .opic{padding: 14px 14px 0; border-bottom: 0;}
.fx .compare .col.labelcol > .opic{padding: 0;}
.fx .compare .col.fri > .opic{background: var(--mint);}
.fx .op{position: relative; height: 164px; border-radius: 12px; background: #F4F6F7; padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 7px; overflow: hidden; font-size: 13px; line-height: 1.35; text-transform: none; letter-spacing: 0;}
.fx .op.chatbg{background: #EFEAE2;}
.fx .op .b{max-width: 88%; padding: 6px 9px; border-radius: 9px; background: #fff; color: #111B21; box-shadow: 0 1px .5px rgba(11,20,26,.13);}
.fx .op .b.out{align-self: flex-end; background: #D9FDD3;}
.fx .op .b.auto{background: #EDEDED; color: var(--second); font-size: 12px;}
.fx .op .b .tk{width: 15px; height: 10px; margin-left: 3px;}
.fx .op .sys{align-self: center; padding: 2px 9px; border-radius: 7px; background: #FDECEA; color: var(--late); font-size: 11.5px; font-weight: 600;}
.fx .op .stamp{align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 11.5px; font-weight: 600; color: var(--primary);}
.fx .op .stamp i{width: 6px; height: 6px; border-radius: 50%; background: #1F9D55;}
.fx .op .staff{display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px;}
.fx .op .staff .moon{position: relative; width: 34px; height: 34px; border-radius: 50%; background: #2B3A4A; flex: none; overflow: hidden;}
.fx .op .staff .moon::after{content: ""; position: absolute; left: 9px; top: 7px; width: 16px; height: 16px; border-radius: 50%; box-shadow: -5px 3px 0 0 #F6D776;}
.fx .op .staff b{display: block; font-size: 13px; color: var(--heading);}
.fx .op .staff small{font-size: 12px; color: var(--head);}
.fx .op .unread{align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--second);}
.fx .op .unread b{display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: #1F9D55; color: #fff; font-size: 11px;}
.fx .op .setup{background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 5px;}
.fx .op .setup small{font-size: 11.5px; color: var(--head); font-weight: 600;}
.fx .op .setup b{font-size: 13px; color: var(--heading);}
.fx .op .setup .bar{height: 5px; border-radius: 3px; background: #EEF2F3; overflow: hidden;}
.fx .op .setup .bar i{display: block; width: 21%; height: 100%; background: var(--due);}
.fx .op .setup .lines{display: grid; gap: 4px; margin-top: 3px;}
.fx .op .setup .lines i{height: 6px; border-radius: 3px; background: #EEF2F3;}
.fx .op .setup .lines i:nth-child(2){width: 80%;}
.fx .op .setup .lines i:nth-child(3){width: 60%;}
@media (max-width: 900px){.fx .stages{top: 58px;}
.fx .stages-in{width: auto; margin: 0 10px; justify-content: space-between; gap: 2px; padding: 4px;}
.fx .stages a{height: 32px; padding: 0 9px 0 5px; gap: 5px; font-size: 13px;}
.fx .stages a i{width: 20px; height: 20px; font-size: 11px;}
.fx .stages a.st-price{display: none;}
.fx .compare .col > .opic{display: block; padding: 12px 12px 0; text-align: left; border-bottom: 0;}
.fx .op{height: 136px;}}
.fx .rail .feat{padding: 14px 14px 22px; background: #fff;}
.fx .rail .feat h3{margin: 16px 8px 0;}
.fx .rail .feat p{margin: 6px 8px 0;}
.fx .fp{position: relative; height: 172px; border-radius: 12px; background: var(--mint); padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; overflow: hidden; font-size: 14px; line-height: 1.35;}
.fx .fp.chatbg{background: #EFEAE2;}
.fx .fp.tgbg{background: #E7EEF4;}
.fx .fp .b{max-width: 82%; padding: 7px 10px; border-radius: 10px; background: #fff; color: #111B21; box-shadow: 0 1px .5px rgba(11,20,26,.13);}
.fx .fp .b.out{align-self: flex-end; background: #D9FDD3;}
.fx .fp .b .tk{width: 16px; height: 11px; margin-left: 4px; vertical-align: -1px;}
.fx .fp .b.small{font-size: 13px;}
.fx .fp .stamp{align-self: center; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; color: var(--primary);}
.fx .fp .stamp i{width: 7px; height: 7px; border-radius: 50%; background: #1F9D55;}
.fx .fp .ok{display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: var(--paid); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; vertical-align: 1px;}
.fx .fp .cal{background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;}
.fx .fp .cal b{display: block; font-size: 12.5px; color: var(--head); font-weight: 600; margin-bottom: 4px;}
.fx .fp .slot{display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 7px; color: var(--head);}
.fx .fp .slot span{font-variant-numeric: tabular-nums; font-weight: 600; color: var(--second);}
.fx .fp .slot.on{background: var(--mint-2); color: var(--heading); font-weight: 600;}
.fx .fp .slot.on span{color: var(--primary);}
.fx .fp .inv{display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;}
.fx .fp .inv small{display: block; font-size: 12.5px; color: var(--head);}
.fx .fp .inv b{font-size: 22px; letter-spacing: -.02em; color: var(--heading); font-variant-numeric: tabular-nums;}
.fx .fp .paid{padding: 4px 10px; border-radius: 999px; background: #E3F5EC; color: var(--paid); font-weight: 700; font-size: 13px;}
.fx .fp .note{display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--second); padding-left: 4px;}
.fx .fp .note .wai{width: 16px; height: 16px;}
.fx .fp .tg{background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.08); display: grid; gap: 3px;}
.fx .fp .tg small{font-size: 12px; color: #2AABEE; font-weight: 600;}
.fx .fp .tg b{font-size: 14.5px; color: var(--heading);}
.fx .fp .tg span{color: var(--second); font-size: 13.5px;}
.fx .fp .tgb{margin-top: 6px;}
.fx .fp .tgb em{display: block; text-align: center; padding: 6px; border-radius: 8px; background: #EAF4FB; color: #1E88C8; font-style: normal; font-weight: 600; font-size: 13px;}
.fx .fp.langs{gap: 6px;}
.fx .fp.langs .b{max-width: none; align-self: flex-start;}
.fx .fp.langs .b:nth-child(2){margin-left: 18px;}
.fx .fp.langs .b:nth-child(3){margin-left: 36px;}
.fx .fp .wk{background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;}
.fx .fp .wk small{font-size: 12.5px; color: var(--head); font-weight: 600;}
.fx .fp .wk .nums{display: flex; gap: 22px; margin: 2px 0 8px;}
.fx .fp .wk .nums span{display: grid; font-size: 12.5px; color: var(--second);}
.fx .fp .wk .nums b{font-size: 26px; line-height: 1.15; letter-spacing: -.03em; color: var(--primary);}
.fx .fp .wk p{display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--head); border-top: 1px solid var(--row-line); padding-top: 8px;}
.fx .fp .wk .face{width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 9.5px; font-weight: 700; font-style: normal; display: grid; place-items: center;}
@media (max-width: 900px){.fx .rail .feat, .fx .fx .rail .feat{display: block; padding: 12px 12px 18px;}
.fx .rail .feat h3{margin: 14px 6px 0; font-size: 17.5px;}
.fx .rail .feat p{display: block; margin: 4px 6px 0; font-size: 14.5px;}
.fx .fp{height: 160px;}}
:root{--go: #0A6B6B; --go-hover: #085A5A;}
.fx .btn.go{background: var(--go); color: #fff; box-shadow: 0 10px 24px -10px rgba(10,107,107,.55), 0 2px 6px rgba(10,107,107,.2);}
.fx .btn.go:hover{background: var(--go-hover);}
.fx .btn.go:focus-visible{outline: 2px solid var(--go); outline-offset: 3px;}
.fx .plan .btn.white, .fx .calc-out .btn.white, .fx .closing .btn.white{font-weight: 700; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45);}
.fx .closing .btn.navy{background: transparent; border-color: rgba(255,255,255,.45);}
.fx .hero .ctas .btn.quiet{color: var(--navy);}
.fx .copy .whofor{justify-content: flex-start; margin: 0 0 26px; gap: 8px; font-size: 14px;}
.fx .copy .whofor b{font-weight: 600; color: var(--primary); margin-right: 4px;}
.fx .copy .whofor span{height: 32px; padding: 0 12px; font-size: 14px;}
.fx .copy h1, .fx .copy h1 span{animation: none !important; opacity: 1 !important;}
html.sc .kin span:not(.on), html.sc .tense .sub:not(.on){opacity: 1;}
html.sc .tense .then:not(.on){opacity: 1; transform: none;}
html.sc .how-act .step:not(.on){opacity: 1; transform: none;}
.fx .cost-up #cost{margin-top: 0;}
.fx .cost-up + .rail-act.band{margin-top: 72px;}
.fx .motion{position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 3; height: 32px; padding: 0 14px 0 30px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.92); color: var(--second); font: 600 13px/1 inherit; font-family: inherit; cursor: pointer;}
.fx .motion::before{content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 10px; margin-top: -5px; border-inline: 3px solid currentColor; box-sizing: border-box;}
.fx .motion.is-off::before{width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-block: 5.5px solid transparent;}
.fx .motion:hover{color: var(--heading); border-color: #C9D3D6;}
.fx .night-pin .stick{position: relative;}
@media (max-width: 900px){.fx .copy .whofor{justify-content: flex-start; margin-bottom: 18px;}
.fx .copy .whofor{gap: 6px; margin-bottom: 16px;}
.fx .copy .whofor b{flex: 0 0 auto; margin-right: 2px; font-size: 13px;}
.fx .copy .whofor span{height: 28px; padding: 0 9px; font-size: 13px; border-radius: 8px;}
.fx .cost-up #cost{margin-top: 0;}
.fx .motion{position: relative; left: auto; bottom: auto; transform: none; display: block; margin: 14px auto 0;}}
.fx .now{display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 14px 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--mint-line); font-size: 15px; font-weight: 600; color: var(--heading);}
.fx .now i{width: 9px; height: 9px; border-radius: 50%; background: #1F9D55; box-shadow: 0 0 0 4px rgba(31,157,85,.16); flex: none;}
.fx .copy .now + h1{margin-top: 18px;}
.fx .sky{position: relative;}
html.night .sky{background: radial-gradient(1200px 600px at 75% 10%, #12405A 0%, transparent 60%), linear-gradient(180deg, #0A1B29 0%, #0D2B3E 78%, #0F3346 100%); color: #E6EEF2; padding-bottom: 72px; margin-bottom: -24px;}
html.night .sky::before{content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 46% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 64% 6%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 82% 16%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 44%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 38% 40%, #fff 50%, transparent 51%);}
html.night .sky .hero{position: relative;}
html.night .copy h1{color: #fff;}
html.night .copy h1 span{color: #6FD8CB;}
html.night .copy .sub{color: rgba(230,238,242,.86);}
html.night .now{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff;}
html.night .now i{background: #6FD8CB; box-shadow: 0 0 0 4px rgba(111,216,203,.2);}
html.night .copy .whofor b{color: #6FD8CB;}
html.night .copy .whofor span{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff;}
html.night .hero .btn.go{background: #12857F; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 14px 40px -6px rgba(47,163,155,.6);}
html.night .hero .btn.go:hover{background: #0A6B6B;}
html.night .hero .ctas .btn.quiet{background: transparent !important; border-color: rgba(255,255,255,.35) !important; color: #fff !important;}
html.night .hero .btn.quiet:hover{background: rgba(255,255,255,.08);}
html.night .prefer, html.night .assure, html.night .copy .notice{color: rgba(230,238,242,.78);}
html.night .prefer a, html.night .copy .notice a{color: #8FE6DA;}
html.night .assure li::before{filter: brightness(2.4) saturate(.6);}
html.night .visual::before{background: radial-gradient(closest-side, rgba(111,216,203,.30), rgba(47,163,155,.12) 55%, transparent 75%);}
html.night .motion{background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #E6EEF2;}
@media (max-width: 900px){.fx .now{font-size: 14px; padding: 6px 12px 6px 10px;}
html.night .sky{padding-bottom: 48px;}}
.fx .tense{position: relative; z-index: 2; border: 0; color: #E6EEF2;
  background:
    radial-gradient(760px 420px at 72% calc(96% - var(--w, 1) * 30%), rgba(143,230,218,calc(.04 + var(--w, 1) * .22)), transparent 68%),
    linear-gradient(180deg, #0F3346 0%, #0E2F42 10%, #0B1F2F 30%, #0D2B3E 52%, #11475A 68%, #17706F 80%, #4FB3A8 88%, #BDE8E1 95%, var(--page) 100%); background-repeat: no-repeat; background-color: var(--page);}
.fx .tense::before{content: ""; position: absolute; inset: 0 0 35% 0; pointer-events: none; opacity: calc(.7 - var(--w, 1) * .45); transition: opacity .2s linear;
  background-image: radial-gradient(1.3px 1.3px at 8% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 19% 38%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 33% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 41% 62%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 52% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 61% 44%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 71% 7%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 26%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 94% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 4% 70%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 26% 82%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 57% 88%, #fff 50%, transparent 51%);}
.fx .tense::after{content: none;}
.fx .tense .pin, .fx .tense .stick{position: relative; z-index: 1;}
.fx .tense .label{color: #6FD8CB;}
.fx .tense h2{color: #fff;}
.fx .tense h2 span + span{background: linear-gradient(90deg, #8FE6DA, #F6E3B4); -webkit-background-clip: text; background-clip: text; color: transparent;}
.fx .tense .sub{color: rgba(230,238,242,.84);}
.fx .tense .then{color: #8FE6DA;}
.fx .tense .wipe{margin-bottom: -110px;}
.fx .tense .inbox{border-color: rgba(255,255,255,.14); box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 28px 60px -24px rgba(8,58,66,.38), 0 0 0 1px rgba(255,255,255,.04);}
.fx .tense .layer .tag{box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);}
html.sc .tense .seam{background: #F6E3B4;}
html.sc .tense .seam::after{background: #F6E3B4; box-shadow: 0 0 0 6px rgba(246,227,180,.22), 0 0 30px rgba(255,221,160,.8);}
.fx .tense + .cost-up{padding-top: 72px;}
html.sc .wipe .layer.after{background: transparent;}
html.sc .tense .layer.before .tag{opacity: calc(1 - var(--w, 0) * 3);}
@media (max-width: 900px){.fx .tense .wipe{margin-bottom: -56px;}
.fx .tense + .cost-up{padding-top: 40px;}}
html.sc .tense{--w: 0;}
.fx .whofor.trades button{font: inherit; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .15s ease;}
.fx .whofor.trades button:hover{border-color: var(--ink);}
.fx .whofor.trades button:active{transform: scale(.97);}
.fx .whofor.trades button:focus-visible{outline: 2px solid #0A6B6B; outline-offset: 2px;}
.fx .whofor.trades button[aria-pressed="true"]{background: var(--ink); border-color: var(--ink); color: #fff;}
.fx .whofor.trades button[aria-pressed="true"]::before{content: ""; width: 6px; height: 6px; border-radius: 50%; background: #25D366;}
html.night .copy .whofor.trades button{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff;}
html.night .copy .whofor.trades button:hover{border-color: rgba(255,255,255,.6);}
html.night .copy .whofor.trades button[aria-pressed="true"]{background: #fff; border-color: #fff; color: #0A1B29;}
.fx .night-pin .chat, .fx .night-pin .owner b, .fx .night-pin .owner span, .fx .night-pin .wa-top{transition: opacity .18s ease;}
.fx .night-pin.swap .chat, .fx .night-pin.swap .owner b, .fx .night-pin.swap .owner span, .fx .night-pin.swap .wa-top{opacity: 0;}
@media (max-width: 900px){.fx .whofor.trades button{height: 36px; padding: 0 10px; font-size: 13px; border-radius: 8px;}}
@media (prefers-reduced-motion: reduce){.fx .whofor.trades button, .fx .night-pin .chat, .fx .night-pin .owner b, .fx .night-pin .owner span, .fx .night-pin .wa-top{transition: none;}}
.fx .connect .logo { width: 36px; height: 36px; border-radius: 10px; background: #0A6B6B; display: grid; place-items: center; }
.fx .connect .logo svg { width: 22px; height: 22px; }
/* ---- demo page ---- */
:root{--primary: #0A6B6B; --primary-hover: #085A5A; --page: #FAFBFC; --card: #fff; --line: #E5EAEC; --row-line: #EDF1F2;
    --heading: #111827; --ink: #1F2937; --second: #4B5563; --head: #6B7280; --quiet: #4A9B9B; --paid: #1B7F55; --due: #A15C00;
    --mint: #F0F9F9; --mint-2: #DBF5F2; --deep: linear-gradient(155deg, #0B4A52 0%, #0A6B6B 48%, #2FA39B 100%);
    --face: linear-gradient(135deg, #FFC48F, #FF9248);}
*{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%;}
body.try{margin: 0; background: var(--page); color: var(--ink); font: 17px/1.55 ui-sans-serif, -apple-system, system-ui, "Segoe UI", sans-serif;}
::selection{background: #BFE3DF;}
body.try h1, body.try h2, body.try h3, body.try p{margin: 0;}
body.try a{color: var(--primary); text-underline-offset: 3px;}
body.try .wrap{width: min(1200px, 100% - 40px); margin: 0 auto;}
body.try .btn{display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, transform .1s ease;}
body.try .btn.small{height: 40px; padding: 0 16px; font-size: 15px;}
body.try .btn.main{background: var(--primary); color: #fff;}
body.try .btn.main:hover{background: var(--primary-hover);}
body.try .btn.quiet{background: #fff; border-color: var(--line); color: var(--ink);}
body.try .btn:active{transform: translateY(1px);}
body.try :focus-visible{outline: 2px solid var(--primary); outline-offset: 2px;}
body.try main{display: grid; grid-template-columns: 1fr 440px 300px; gap: 40px; align-items: start; padding: 64px 0 96px;}
body.try h1{font-size: clamp(34px, 4vw, 54px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; color: var(--heading); text-wrap: balance;}
body.try h1 span{display: block; color: var(--quiet);}
body.try .sub{margin-top: 16px; font-size: 18px; color: var(--second); max-width: 26em;}
body.try .asklabel{margin-top: 32px; font-size: 14.5px; font-weight: 600; color: var(--head);}
body.try .asks{display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px;}
body.try .asks button{font: inherit; font-size: 16px; text-align: left; padding: 11px 16px; min-height: 48px; border-radius: 10px; border: 1px solid #CFEAE6; background: #fff; color: var(--heading); cursor: pointer; transition: background-color .15s ease, border-color .15s ease;}
body.try .asks button:hover{background: var(--mint); border-color: #9CCFC9;}
body.try .asks button[disabled]{opacity: .45; cursor: default;}
body.try .fine{margin-top: 28px; font-size: 14px; color: var(--head); max-width: 30em;}
body.try .stage{padding: 24px 24px 28px; border-radius: 24px; background: var(--deep); box-shadow: 0 30px 60px -20px rgba(10,74,82,.45);}
body.try .waphone{border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(4,40,44,.35);}
body.try .wa-top{display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #008069; color: #fff;}
body.try .avatar{width: 36px; height: 36px; border-radius: 50%; background: #DFE5E7; color: #54656F; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none;}
body.try .wa-top b{display: block; font-size: 16px; font-weight: 600; line-height: 1.25;}
body.try .wa-top small{font-size: 12.5px;}
body.try .chat{background: #EFEAE2; padding: 14px; display: flex; flex-direction: column; gap: 8px; height: 440px; overflow-y: auto; font-size: 15px; line-height: 1.4; scroll-behavior: smooth;}
body.try .chat > *{flex-shrink: 0;}
body.try .m{position: relative; max-width: 82%; padding: 7px 10px 6px; border-radius: 8px; background: #fff; color: #111B21; box-shadow: 0 1px .5px rgba(11,20,26,.13); animation: pop .22s cubic-bezier(.2,.8,.2,1);}
body.try .m.them{align-self: flex-start; border-top-left-radius: 0;}
body.try .m.me{align-self: flex-end; border-top-right-radius: 0; background: #D9FDD3;}
body.try .m small{display: block; text-align: right; font-size: 11px; color: #5E6E77; margin-top: 2px;}
body.try .day{align-self: center; background: #fff; color: #54656F; box-shadow: 0 1px .5px rgba(11,20,26,.13); border-radius: 7px; padding: 4px 11px; font-size: 12px;}
body.try .typing{align-self: flex-start; height: 34px; display: flex; align-items: center; background: #fff; border-radius: 8px; padding: 0 12px;}
body.try .typing i{width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: #8696A0; animation: bob 1s ease-in-out infinite;}
body.try .typing i:nth-child(2){animation-delay: .15s;}
body.try .typing i:nth-child(3){animation-delay: .3s;}
@keyframes bob{ 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes pop{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.try .wa-bar{display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #F0F2F5;}
body.try .wa-bar input{flex: 1; min-width: 0; height: 42px; border: 0; border-radius: 21px; padding: 0 16px; font: inherit; font-size: 16px; background: #fff; color: #111B21;}
body.try .wa-bar input::placeholder{color: #667781;}
body.try .wa-bar button{width: 42px; height: 42px; border: 0; border-radius: 50%; background: #00A884; cursor: pointer; display: grid; place-items: center;}
body.try .wa-bar svg{width: 20px; height: 20px; fill: #fff;}
body.try .stage-note{margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.85); text-align: center;}
body.try .owner h2{font-size: 15px; font-weight: 600; color: var(--head); display: flex; align-items: center; gap: 8px;}
body.try .face{width: 14px; height: 14px; border-radius: 50%; background: var(--face);}
body.try .owner .empty{margin-top: 12px; padding: 18px; border: 1px dashed #C9D8D6; border-radius: 12px; font-size: 15px; color: var(--head);}
body.try .note{margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(17,24,39,.06); animation: pop .3s cubic-bezier(.2,.8,.2,1);}
body.try .note small{font-size: 12.5px; color: var(--head);}
body.try .note b{display: block; font-size: 16px; color: var(--heading); margin-top: 2px;}
body.try .note span{font-size: 14px; color: var(--second);}
body.try .note em{display: inline-block; margin-top: 10px; font-style: normal; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--primary); border-radius: 8px; padding: 6px 12px;}
body.try .next{grid-column: 1 / -1; margin-top: 24px; padding: 40px; border-radius: 24px; border: 1px solid #CFEAE6; background: radial-gradient(90% 140% at 50% 0%, var(--mint-2), #F4FBFA 60%, #fff); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;}
body.try .next h2{font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.025em; color: var(--heading); line-height: 1.1;}
body.try .next p{margin-top: 6px; color: var(--second);}
body.try .next div:last-child{display: flex; gap: 12px; flex-wrap: wrap;}
@media (prefers-reduced-motion: reduce){*{animation: none !important;}
body.try .chat{scroll-behavior: auto;}}
@media (max-width: 1000px){body.try main{grid-template-columns: 1fr; gap: 24px; padding: 32px 0 110px;}
body.try h1{font-size: 34px;}
body.try .sub{font-size: 17px; margin-top: 12px;}
body.try .asklabel{margin-top: 20px;}
body.try .asks{flex-direction: row; overflow-x: auto; margin-inline: -20px; padding: 2px 20px 6px; scrollbar-width: none;}
body.try .asks::-webkit-scrollbar{display: none;}
body.try .asks button{white-space: nowrap; flex: none;}
body.try .fine{display: none;}
body.try .stage{padding: 12px 12px 14px; border-radius: 18px;}
body.try .chat{height: 380px;}
body.try .next{padding: 26px 20px;}
body.try .next .btn{flex: 1 1 100%;}}

/* ---- header, footer and phone bar: the same on every page ---- */
header.hd { position: sticky; top: 0; z-index: 6; background: rgba(226,246,243,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #CFEAE6; font: 15.5px/1.5 ui-sans-serif, -apple-system, system-ui, "Segoe UI", sans-serif; }
header.hd .hd-row { display: flex; align-items: center; gap: 24px; height: 68px; width: min(1180px, 100% - 40px); margin: 0 auto; }
header.hd .hd-brand { display: flex; align-items: center; gap: 9px; color: #111827; font-weight: 700; font-size: 19px; text-decoration: none; }
header.hd .hd-logo { width: 30px; height: 30px; border-radius: 8px; background: #0A6B6B; display: grid; place-items: center; flex: none; }
header.hd .hd-logo svg { width: 19px; height: 19px; }
header.hd .hd-nav { display: flex; gap: 30px; margin: 0 auto 0 28px; }
header.hd .hd-nav a, header.hd .lang-switch a { color: #374151; text-decoration: none; }
header.hd .hd-nav a:hover { color: #0A6B6B; }
header.hd .hd-right { display: flex; align-items: center; gap: 16px; }
header.hd .lang-switch { display: flex; }
header.hd .lang-switch span { display: none; }
header.hd .lang-switch a { padding: 6px 7px; border-bottom: 2px solid transparent; }
header.hd .lang-switch a[aria-current] { color: #0A6B6B; font-weight: 600; border-bottom-color: #0A6B6B; }
header.hd .hd-signin { font-weight: 600; color: #0A6B6B; text-decoration: none; }
header.hd .hd-cta, .dock2 a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; background: #0A6B6B; color: #fff; box-shadow: 0 2px 6px rgba(10,107,107,.25); }
header.hd .hd-row a.hd-cta, html body .dock2 a.dock-wa { color: #fff; text-decoration: none; }
header.hd .hd-cta:hover, .dock2 a.dock-wa:hover { background: #085A5A; }
header.hd a:focus-visible, footer.ft a:focus-visible, .dock2 a:focus-visible { outline: 2px solid #0A6B6B; outline-offset: 2px; }
footer.ft { padding: 48px 0 0; font: 15px/1.55 ui-sans-serif, -apple-system, system-ui, "Segoe UI", sans-serif; background: #F2FAF8; color: #4B5563; border-top: 1px solid #DCEFEB; }
footer.ft .ft-grid { display: grid; grid-template-columns: 1.9fr .85fr .85fr .85fr 1fr; gap: 32px; width: min(1180px, 100% - 40px); margin: 0 auto; padding-bottom: 36px; }
footer.ft.ft .ft-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #0B3F3F; text-decoration: none; }
footer.ft .ft-logo { width: 30px; height: 30px; border-radius: 8px; background: #0A6B6B; display: grid; place-items: center; flex: none; }
footer.ft .ft-logo svg { width: 18px; height: 18px; }
footer.ft .ft-tag { margin: 16px 0 0; max-width: 30em; font-size: 15px; line-height: 1.65; }
footer.ft.ft .ft-tag a { color: #0A6B6B; text-decoration: none; }
footer.ft .ft-warm { margin: 14px 0 0; font-size: 16px; color: #4B5563; }
footer.ft b { display: block; font-size: 15px; font-weight: 700; color: #0B2530; margin-bottom: 12px; }
footer.ft.ft nav a, footer.ft.ft .ft-hours { display: block; padding: 0 0 9px; color: #4B5563; text-decoration: none; }
footer.ft.ft nav a.ft-mail { color: #0A6B6B; font-weight: 700; }
footer.ft .ft-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; width: min(1180px, 100% - 40px); margin: 0 auto; padding: 22px 0 32px; border-top: 1px solid #DCEFEB; font-size: 13.5px; color: #6B7280; }
footer.ft.ft .ft-base a { color: inherit; text-decoration: none; }
footer.ft.ft a:hover, footer.ft.ft nav a.ft-mail:hover { color: #085A5A; text-decoration: underline; text-underline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 20; background: #fff; color: #0A6B6B; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.dock2 { display: none; }
.dock2 .dock-demo { background: #fff; border: 1px solid #E5EAEC; box-shadow: none; flex: 0 1 auto; padding: 0 18px; }
html body .dock2 a.dock-demo { color: #0D2B3E; }
.dock2 .play { width: 14px; height: 14px; }
@media (max-width: 900px) {
  header.hd .hd-row { height: 58px; }
  header.hd .hd-nav, header.hd .hd-signin, header.hd .hd-cta { display: none; }
  header.hd .hd-right { margin-left: auto; }
  footer.ft { padding: 48px 0 92px; }
  footer.ft .ft-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 36px; }
  footer.ft .ft-grid > div:first-child { grid-column: 1 / -1; }
  footer.ft .ft-base { flex-direction: column; padding-bottom: 8px; }
  .dock2 { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid #E5EAEC; }
  .dock2 a { flex: 1; height: 48px; font-size: 15.5px; }
}