/* Shared public offer banner, guide and post-order sharing controls. */
.friends-guide-body {margin:0;background:#faf9f5;color:#26483e;font-family:Arial,"Noto Sans TC",sans-serif;line-height:1.8}
.friends-guide {max-width:1200px;margin:auto;padding:24px 24px 72px}
.friends-guide *, .friends-offer-banner *, .friends-share-card * {box-sizing:border-box;min-width:0}
.friends-breadcrumb {display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:#728277;margin-bottom:32px}
.friends-breadcrumb a {color:inherit}
.friends-eyebrow {display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:#94753d}
.friends-guide h1,.friends-guide h2 {font-family:"Noto Serif TC","PMingLiU",serif;letter-spacing:.025em;font-weight:600;line-height:1.45}
.friends-guide h1 {font-size:clamp(32px,4vw,48px);margin:18px 0}
.friends-guide h2 {font-size:clamp(23px,2.5vw,31px);margin:10px 0 24px}
.friends-guide p {color:#667769;font-size:14px}
.friends-guide-hero {display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;padding:36px 0 62px}
.friends-guide-hero p {line-height:2.1;margin-bottom:28px}
.friends-button {display:inline-flex;justify-content:center;align-items:center;gap:18px;border:1px solid #245347;border-radius:5px;background:#245347;color:white!important;text-decoration:none;padding:13px 20px;font-size:14px;font-weight:700;min-height:46px;cursor:pointer}
.friends-button:hover {background:#183f34}
.friends-text-link {display:inline-block;color:#34594b;margin:12px 18px;font-size:13px;text-underline-offset:5px}
.friends-rate-card {position:relative;overflow:hidden;padding:32px;background:#f0f2e9;border:1px solid #dce1d0;border-radius:12px;box-shadow:0 12px 32px #244b3a08}
.friends-rate-card>div {display:grid;grid-template-columns:1fr 1fr;margin:28px 0 20px;gap:20px}
.friends-rate-card>div>span {font-size:13px;color:#6c7968}
.friends-rate-card strong {display:block;font-size:14px;color:#2c5142}
.friends-rate-card b {display:block;font:58px/1.3 Georgia,serif;color:#245347}
.friends-rate-card p {border-top:1px solid #d7ddcf;padding-top:18px}
.friends-rate-card small {font-size:12px;color:#78806e}
.friends-card-sprig {position:absolute;right:-12px;top:-5px;transform:rotate(-25deg);opacity:.08;width:100px;height:120px;pointer-events:none}
.friends-card-sprig svg,.friends-offer-ornament svg {width:100%;height:100%}
.friends-how {border-top:1px solid #dfe4d8;padding:44px 0}
.friends-steps {list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:32px}
.friends-steps li {position:relative;border-left:1px solid #d5ddce;padding:0 24px}
.friends-step-number {font:36px Georgia,serif;color:#ad9564}
.friends-steps h3 {font-size:17px;margin:12px 0}
.friends-section-heading {display:flex;justify-content:space-between;align-items:end;gap:30px}
.friends-section-heading p {font-size:12px;max-width:260px}
.friends-screenshots {display:grid;grid-template-columns:1fr 1fr;gap:26px}
.friends-screenshots figure {margin:0;padding:18px;border:1px solid #dfe4d8;border-radius:12px;background:#fff}
.friends-screenshots img {width:100%;height:auto;display:block;border:1px solid #eef0e8;border-radius:6px}
.friends-screen-label {font-size:14px;font-weight:700;margin-bottom:16px;display:flex;gap:12px;align-items:center}
.friends-screen-label span {display:grid;place-items:center;border-radius:50%;background:#eff2e7;width:28px;height:28px;color:#7f6b40}
.friends-screenshots figcaption {font-size:12px;color:#74816f;line-height:1.8;margin-top:14px}
.friends-example {display:grid;grid-template-columns:1fr 1fr;gap:50px;background:#f1eee3;border:1px solid #e6dfcc;border-radius:10px;padding:36px;margin:48px 0}
.friends-example h2 {font-size:26px}
.friends-example-note {border-left:2px solid #b99b5b;padding-left:24px;align-self:center}
.friends-example small {font-size:12px;color:#7f816f}
.friends-faq {max-width:850px;margin:60px auto}
.friends-faq details {border-bottom:1px solid #dce2d6;padding:18px 0;font-size:14px}
.friends-faq summary {cursor:pointer;font-weight:600;min-height:28px}
.friends-faq p {line-height:2}
.friends-guide-help {display:flex;justify-content:space-between;align-items:center;gap:24px;background:#edf2e9;border-radius:10px;padding:28px 36px}
.friends-guide-help h2 {font-size:24px;margin:0}
.friends-guide-help p {margin:10px 0 0}
.friends-offer-banner {position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:30px;align-items:center;background:#edf1e7;border:1px solid #d9dfcd;border-radius:9px;margin:26px 0 36px;padding:28px 32px 28px 62px;overflow:hidden;color:#264b3d}
.friends-offer-banner h2 {font-family:"Noto Serif TC",serif;font-size:23px;line-height:1.5;margin:7px 0}
.friends-offer-banner p {font-size:12px;line-height:1.8;margin:0;color:#6e7a69}
.friends-offer-ornament {position:absolute;left:-12px;bottom:-12px;width:68px;height:100px;opacity:.17;transform:rotate(20deg);pointer-events:none}
.friends-banner-rates {display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;text-align:center}
.friends-banner-rates>span {display:flex;flex-direction:column}
.friends-banner-rates small {font-size:12px;color:#68775e}
.friends-banner-rates strong {font:39px/1.3 Georgia,serif;color:#245347}
.friends-banner-rates em {font-size:21px;font-style:normal}
.friends-banner-rates>small {grid-column:1/-1;font-size:12px}
.friends-banner-link {font-size:12px;font-weight:700;color:#345b49;text-decoration:none;border-bottom:1px solid #acb79a;padding:8px 0;white-space:nowrap}
.friends-banner-link span {margin-left:12px}
.friends-share-card {background:linear-gradient(135deg,#f2f3e9,#faf8f1)!important;border:1px solid #dce0ce!important;border-top:3px solid #b69a60!important;border-radius:12px;padding:24px!important;color:#2f5144}
.friends-share-card h2 {font-family:"Noto Serif TC",serif;font-size:23px!important;line-height:1.5;margin:8px 0 12px!important;color:#2a5141}
.friends-share-card p {font-size:13px;line-height:1.9;color:#66765f}
.friends-share-code {display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;margin:18px 0 8px}
.friends-share-code strong {font-family:monospace;letter-spacing:.04em;font-size:14px}
.friends-share-card input,.friends-share-card textarea {width:100%;border:1px solid #d5ddca;border-radius:5px;padding:11px 12px;background:#fffefa;color:#3b574b;font-size:12px;line-height:1.7}
.friends-share-card textarea {min-height:160px;resize:vertical}
.friends-share-actions {display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.friends-share-actions button {min-height:44px;padding:10px 13px;border:1px solid #b9c7ac;border-radius:5px;background:white;color:#315441;cursor:pointer;font-size:12px;font-weight:600}
.friends-share-actions button:first-child {background:#245347;color:white;border-color:#245347;flex:1 1 190px}
.friends-share-actions button:hover {filter:brightness(.95)}
.friends-share-card details {font-size:12px;line-height:1.9;margin-top:12px}
.friends-share-card summary {cursor:pointer}
.friends-share-card [role=status] {font-size:12px;min-height:20px;margin:6px 0}
.friends-share-guide {display:inline-block;color:#547552;font-size:12px;margin-top:10px;text-underline-offset:4px}
.friends-share-card a:focus-visible,.friends-guide a:focus-visible,.friends-offer-banner a:focus-visible,.friends-share-card button:focus-visible {outline:3px solid #b59b60;outline-offset:4px}
@media(max-width:1000px) {.friends-offer-banner {grid-template-columns:1fr auto;gap:18px}.friends-banner-link {grid-column:1/-1;justify-self:start}.friends-guide-hero {gap:30px}}
@media(max-width:650px) {.friends-guide {padding:18px 20px 42px}.friends-breadcrumb {font-size:12px;margin-bottom:10px}.friends-guide-hero {grid-template-columns:1fr;gap:24px;padding:24px 0 36px}.friends-guide h1 {font-size:34px}.friends-rate-card {padding:24px}.friends-rate-card b {font-size:45px}.friends-steps {grid-template-columns:1fr;gap:18px}.friends-steps li {padding:0 0 0 18px}.friends-step-number {font-size:28px}.friends-steps h3 {display:inline;margin-left:14px}.friends-screenshots {grid-template-columns:1fr;gap:18px}.friends-screenshots figure {padding:14px}.friends-section-heading {display:block}.friends-section-heading p {max-width:none}.friends-example {grid-template-columns:1fr;padding:24px;gap:18px;margin:30px 0}.friends-guide-help {display:block;padding:24px}.friends-guide-help .friends-button {margin-top:18px}.friends-offer-banner {padding:23px 22px 23px 34px;gap:20px;grid-template-columns:1fr}.friends-offer-banner h2 {font-size:22px}.friends-banner-rates {justify-self:start;column-gap:38px;text-align:left}.friends-banner-rates>span {flex-direction:row;align-items:baseline;gap:12px}.friends-banner-rates strong {font-size:34px}.friends-banner-rates>small {font-size:12px}.friends-banner-link {grid-column:auto}.friends-share-card {padding:20px!important}.friends-share-code {flex-wrap:wrap}.friends-share-actions button {flex:1 1 110px}}
@media(prefers-reduced-motion:no-preference) {.friends-share-actions button,.friends-button {transition:background .18s,filter .18s}}

.friends-guide-body .friends-guide h1 {color:#26483e;font-size:44px;line-height:1.45}
.friends-guide-body .friends-guide h2,.friends-guide-body .friends-guide h3 {color:#26483e}
.friends-rate-card p strong {display:inline}
.friends-screenshots {align-items:start}
@media(max-width:650px) {.friends-guide-body .friends-guide h1 {font-size:clamp(27px,8vw,34px)}}

.friends-share-terms {margin-top:20px;padding:16px;background:#fffdf6;border:1px solid #e4deca;border-radius:6px;font-size:12px;line-height:1.9}
.friends-share-terms p {font-size:12px;margin:8px 0 0}
.friends-share-consent {display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:16px 0 6px;cursor:pointer;font-size:13px;line-height:1.8}
.friends-share-card .friends-share-consent input {width:18px;height:18px;flex:0 0 18px;margin:3px 0 0;accent-color:#245347}
.friends-share-actions button:disabled {opacity:.45;cursor:not-allowed;filter:grayscale(.5)}

.friends-discount-explanation{margin:24px 0;padding:clamp(18px,3vw,30px);border:1px solid #bed1bf;border-radius:12px;background:#fff;line-height:1.85;color:#254c3d}
.friends-discount-explanation h2{margin:0 0 12px;font-size:clamp(21px,3vw,27px)}
.friends-discount-explanation p{margin:10px 0}.friends-discount-explanation ul{margin:8px 0 12px;padding-left:23px}.friends-discount-explanation li{padding:4px 0}
.friends-discount-explanation .friends-discount-notice{padding:12px 14px;background:#fff9e9;border-left:3px solid #b08a42;border-radius:4px}
.friends-banner-rates>p,.friends-rate-card>div>p{grid-column:1/-1;margin:0;min-width:0;font-size:14px;line-height:1.8}

/* Compact, server-rendered homepage promotion; pricing remains in VolumeDiscount. */
.friends-offer-banner.friends-offer-banner--compact{grid-template-columns:minmax(0,1fr) 286px auto;gap:20px;max-width:1100px;margin:24px auto;padding:18px 24px;border:1px solid var(--hkf-e-line,#d5dfd3);border-radius:var(--hkf-e-radius,14px);background:var(--hkf-e-ivory,#faf8f2);color:var(--hkf-e-forest,#214e40);box-shadow:none;overflow:visible}
.friends-offer-banner--compact .friends-eyebrow{display:flex;align-items:center;gap:7px;margin:0;font-size:12px;line-height:1.5;letter-spacing:.03em;font-weight:600}
.friends-offer-banner--compact .friends-offer-ornament{position:static;display:inline-flex;align-items:center;justify-content:center;width:20px;height:22px;opacity:1;transform:none;flex:0 0 20px;color:var(--hkf-e-leaf,#587963)}
.friends-offer-banner--compact .friends-offer-ornament :is(.public-icon,svg){width:20px;height:20px}
.friends-offer-banner--compact h2{margin:5px 0;font-size:22px;line-height:1.45;color:var(--hkf-e-forest,#214e40);letter-spacing:.01em}
.friends-offer-banner--compact .friends-banner-introduction{margin:0;font-size:14px;line-height:1.65;color:var(--hkf-e-muted,#53695c)}
.friends-offer-banner--compact .friends-banner-rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;text-align:center}
.friends-offer-banner--compact .friends-banner-rates>li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 8px;border:1px solid var(--hkf-e-line,#d5dfd3);border-radius:var(--hkf-radius-control,6px);background:var(--hkf-e-sage,#edf2eb)}
.friends-offer-banner--compact .friends-tier-range{font-size:12px;line-height:1.5;color:var(--hkf-e-muted,#53695c);white-space:nowrap}
.friends-offer-banner--compact .friends-banner-rates strong{font-family:inherit;font-weight:650;font-size:22px;line-height:1.35;color:var(--hkf-e-forest,#214e40);white-space:nowrap}
.friends-offer-banner--compact .friends-banner-link{display:inline-flex;align-items:center;justify-self:end;gap:10px;min-height:44px;padding:6px 0;border:0;font-size:14px;line-height:1.5;color:var(--hkf-e-forest,#214e40);text-decoration:underline;text-decoration-color:#a0b4a2;text-underline-offset:5px}
.friends-offer-banner--compact .friends-banner-link span{margin:0}
.friends-offer-banner--compact .friends-banner-link:hover{text-decoration-color:currentColor}
.friends-offer-banner--compact .friends-banner-link:focus-visible{outline:3px solid var(--hkf-e-focus,#216c59);outline-offset:4px;border-radius:3px}
@media(max-width:1050px){.friends-offer-banner.friends-offer-banner--compact{grid-template-columns:minmax(0,1fr) 270px;grid-template-areas:"copy rates" "link rates";gap:8px 20px}.friends-offer-banner--compact .friends-offer-banner-copy{grid-area:copy}.friends-offer-banner--compact .friends-banner-rates{grid-area:rates;justify-self:stretch}.friends-offer-banner--compact .friends-banner-link{grid-area:link;justify-self:start}}
@media(max-width:680px){.friends-offer-banner.friends-offer-banner--compact{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "rates" "link";gap:12px;margin:20px auto;padding:18px 20px}.friends-offer-banner--compact h2{font-size:20px}.friends-offer-banner--compact .friends-banner-rates{gap:7px;justify-self:stretch;text-align:center}.friends-offer-banner--compact .friends-banner-rates>li{padding:8px 6px}.friends-offer-banner--compact .friends-banner-rates strong{font-size:21px}.friends-offer-banner--compact .friends-banner-link{min-height:44px;padding:5px 0}}

/* A distinct homepage campaign, scoped away from the offer-details page. */
.friends-offer-banner.friends-offer-banner--promotion{
 position:relative;isolation:isolate;overflow:hidden;
 grid-template-columns:minmax(0,1.4fr) minmax(290px,1fr);
 grid-template-areas:"copy rates" "link rates";gap:16px 32px;
 width:100%;max-width:none;box-sizing:border-box;
 padding:30px 36px;margin:26px 0;border:1px solid #d6ccb6;
 border-radius:14px;background:#f7f4e9;color:#214e40;
}
.friends-offer-banner--promotion:before{
 content:"";position:absolute;inset:7px;border:1px solid #ded5be99;
 border-radius:9px;pointer-events:none;z-index:-1;
}
.friends-offer-banner--promotion:after{
 content:"";position:absolute;top:0;left:36px;width:68px;height:3px;
 background:#dcc591;pointer-events:none;
}
.friends-offer-banner--promotion .friends-promo-botanical{
 position:absolute;right:-45px;bottom:-95px;width:270px;height:330px;
 color:#6d856a;opacity:.17;transform:rotate(-24deg);pointer-events:none;z-index:-1;
}
.friends-offer-banner--promotion .friends-promo-botanical :is(.public-icon,svg){width:100%;height:100%}
.friends-offer-banner--promotion .friends-offer-banner-copy{grid-area:copy;min-width:0}
.friends-offer-banner--promotion .friends-eyebrow{color:#806b3f;font-size:13px;letter-spacing:.08em;gap:9px}
.friends-offer-banner--promotion .friends-offer-ornament{color:#806b3f}
body#top.hkf-public-design.page-home .friends-offer-banner--promotion h2{
 color:#214e40!important;font-size:clamp(24px,2.25vw,31px);line-height:1.45;
 font-weight:600;margin:10px 0 9px;letter-spacing:.025em;text-wrap:balance;
}
.friends-offer-banner--promotion .friends-banner-introduction{font-size:16px;line-height:1.75;color:#52634f}
.friends-offer-banner--promotion .friends-banner-rates{grid-area:rates;align-self:center;gap:10px;justify-self:stretch}
.friends-offer-banner--promotion .friends-banner-rates>li{
 min-width:0;min-height:110px;padding:16px 10px;gap:10px;
 border:1px solid #d4dfce;border-radius:7px;background:#fdfdf7;
}
.friends-offer-banner--promotion .friends-tier-range{font-size:14px;color:#52634f;font-weight:400}
.friends-offer-banner--promotion .friends-banner-rates strong{font-size:30px;color:#214e40;font-weight:600;letter-spacing:.04em}
.friends-offer-banner--promotion .friends-banner-rates>li:last-child{border-color:#c5ae74;background:#ece3cc}
.friends-offer-banner--promotion .friends-banner-rates>li:last-child .friends-tier-range{color:#4b5b42}
.friends-offer-banner--promotion .friends-banner-rates>li:last-child strong{color:#214e40}
.friends-offer-banner--promotion .friends-banner-link{
 grid-area:link;justify-self:start;align-self:start;min-height:46px;
 padding:10px 17px;gap:20px;border:1px solid #285344;border-radius:5px;
 background:#285344;color:#fffdf5;font-size:15px;font-weight:600;
 text-decoration:none;transition:background .15s,border-color .15s;
}
.friends-offer-banner--promotion .friends-banner-link:hover{background:#183e31;border-color:#183e31}
.friends-offer-banner--promotion .friends-banner-link:focus-visible{outline:3px solid #ead9af;outline-offset:4px}
@media(max-width:1050px){
 .friends-offer-banner.friends-offer-banner--promotion{grid-template-columns:minmax(0,1fr) 290px;gap:14px 24px;padding:26px 28px}
 .friends-offer-banner--promotion .friends-banner-rates strong{font-size:27px}
}
@media(max-width:680px){
 .friends-offer-banner.friends-offer-banner--promotion{
  grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "rates" "link";
  padding:26px 24px;gap:20px;margin:24px 0;
 }
 body#top.hkf-public-design.page-home .friends-offer-banner--promotion h2{font-size:26px;line-height:1.5;margin:9px 0}
 .friends-offer-banner--promotion .friends-banner-rates{gap:8px}
 .friends-offer-banner--promotion .friends-banner-rates>li{min-height:96px;padding:13px 6px;gap:8px}
 .friends-offer-banner--promotion .friends-tier-range{font-size:13px}
 .friends-offer-banner--promotion .friends-banner-rates strong{font-size:25px;letter-spacing:0}
 .friends-offer-banner--promotion .friends-banner-link{justify-self:stretch;justify-content:space-between}
 .friends-offer-banner--promotion .friends-promo-botanical{right:-80px;bottom:30px;width:240px;height:280px}
}
@media(prefers-reduced-motion:reduce){.friends-offer-banner--promotion .friends-banner-link{transition:none}}
/* Preserve readable campaign copy against shared homepage paragraph rules. */
body#top.hkf-public-design.page-home .friends-offer-banner--promotion .friends-eyebrow{color:#806b3f!important}
body#top.hkf-public-design.page-home .friends-offer-banner--promotion .friends-banner-introduction{color:#52634f!important}
@media(max-width:380px){.friends-offer-banner--promotion .friends-banner-rates strong{font-size:23px}}
@media(max-width:680px){html:lang(en) .friends-offer-banner--promotion .friends-banner-rates strong{font-size:clamp(19px,5.2vw,23px);letter-spacing:-.02em}}
@media(max-width:680px){html:lang(en) .friends-offer-banner--promotion .friends-tier-range{white-space:normal;text-wrap:balance;line-height:1.4}}
@media(min-width:681px) and (max-width:1050px){
 html:lang(en) .friends-offer-banner--promotion .friends-banner-rates strong{font-size:22px;letter-spacing:0}
 html:lang(en) .friends-offer-banner--promotion .friends-tier-range{font-size:13px;white-space:normal;text-wrap:balance}
}