/* Both variants share <main class="stage"> as the outer container. The
   default carries an extra .default-variant class; the Super markup does
   not. Gate the hide-guard on data-variant so it fires only when the
   default variant is active — otherwise its specificity beats super.css's
   own .stage rule and Super would render blank. super.css mirrors this
   the other way. */
:root:not([data-variant="super"]) main.stage:not(.default-variant){display:none}

/* -----------------------------------------------------------------------
   The default variant. Ported from docs/mockups/hubby-link-pages.html by
   scripts/generate-default.js — do not hand-edit; adjust the mockup and re-run. */


:root{
  --ink:#000000;
  --grey-1:#5F5F5F;
  --grey-2:#949494;
  --hubby:#FF8800;
  --wash:#FFF4E3;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* tuned to Inter: large x-height and tight apertures take more negative
     tracking and less line height than a geometric sans */
  --h1-track:-.035em; --h1-lh:1.08;
  --kick-track:.18em;
  --btn-track:-.015em;
}
*{box-sizing:border-box}
html,body{margin:0}
html,body{background:#FFFFFF}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}

/* ---------- language switcher (custom button + menu) ---------- */
.langsel{position:relative;font-family:var(--font)}
.langsel-trigger{
  appearance:none;-webkit-appearance:none;background:#fff;
  border:1px solid #E4E4E4;border-radius:9px;
  padding:7px 10px 7px 12px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink);
  line-height:1.2;min-height:40px;
}
.langsel-trigger:hover{border-color:var(--ink)}
.langsel-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.langsel-chev{flex:0 0 auto;transition:transform .16s ease}
.langsel.is-open .langsel-chev{transform:rotate(180deg)}
.langsel-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:20;
  min-width:180px;max-height:min(60vh, 380px);overflow-y:auto;
  background:#fff;border:1px solid #E4E4E4;border-radius:12px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.06);
  padding:4px;
}
.langsel-menu[hidden]{display:none}
.langsel-opt{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;
  width:100%;text-align:start;padding:9px 12px;border-radius:8px;
  font-family:var(--font);font-size:14px;font-weight:500;color:var(--ink);
  cursor:pointer;
}
.langsel-opt:hover{background:#F5F5F5}
.langsel-opt[aria-selected="true"]{background:#FFF4E3;font-weight:700}
.langsel-opt:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.langbar{display:flex;justify-content:flex-end;padding:12px 0 0;flex:0 0 auto}
.dhead .langsel{margin-left:14px}
.dhead__right{display:flex;align-items:center}
[dir="rtl"] .langsel-menu{right:auto;left:0}


/* ---------- scripts other than Latin ----------
   Inter carries no CJK, Thai or Arabic glyphs, so those locales get a stack that
   ends in the platform face rather than falling back unpredictably. Tracking is
   reset to zero: the negative values are tuned to Inter and damage these scripts. */
[lang="zh-CN"]{--font:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif}
[lang="ja"]{--font:'Inter','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif}
[lang="ko"]{--font:'Inter','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif}
[lang="th"]{--font:'Inter','Thonburi','Leelawadee UI','Noto Sans Thai',sans-serif}
[lang="ar"]{--font:'Inter','Geeza Pro','Segoe UI','Noto Sans Arabic',sans-serif}
[lang="zh-CN"],[lang="ja"],[lang="ko"],[lang="th"],[lang="ar"]{
  --h1-track:0;--kick-track:.06em;--btn-track:0;
}
[lang="zh-CN"] .h1,[lang="ja"] .h1,[lang="ko"] .h1,[lang="th"] .h1{--h1-lh:1.3}
[lang="th"] .sub,[lang="th"] .dsub,[lang="th"] .bdesc{line-height:1.75}

/* ---------- right to left ----------
   The layout was built with logical properties, so the mirroring is mostly free.
   These are the places that needed an explicit rule. */
[dir="rtl"] .dsteps{text-align:right}
[dir="rtl"] .benefits li,[dir="rtl"] .dsteps li{flex-direction:row}
[dir="rtl"] .langbar{justify-content:flex-start}
[dir="rtl"] .dhead{flex-direction:row-reverse}
[dir="rtl"] .dhead__right{flex-direction:row-reverse}
.stage{padding:14px 20px 24px;display:flex;justify-content:center}
/* Viewport decides which layout paints, no design-review device toggle. */
.desk{display:none}
@media (min-width:900px){
  .mobile{display:none}
  .desk{display:block}
}

/* ---------- mobile, at true width ---------- */
.mobile{width:100%;max-width:430px;flex:0 0 auto}
.screen{
  position:relative;width:100%;min-height:100vh;
  display:flex;flex-direction:column;background:#fff;color:var(--ink);font-family:var(--font);
}
.body{flex:1;display:flex;flex-direction:column;padding:0 24px 26px;min-height:0}

.brandbar{display:flex;align-items:center;justify-content:center;padding:30px 0 0;flex:0 0 auto}
.hubbymark{display:block;height:39px;width:auto;color:var(--hubby)}

.herowrap{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:30px 0 44px}
.hero{text-align:center}
.h1{
  font-size:clamp(31px,8.6vw,38px);font-weight:800;
  letter-spacing:var(--h1-track);line-height:var(--h1-lh);
  margin:0;text-wrap:balance;
}
.sub{font-size:15px;font-weight:400;line-height:1.58;color:var(--grey-1);margin:14px auto 0;max-width:30ch;text-wrap:balance}

/* ---------- actions ---------- */
.stack{display:flex;flex-direction:column;gap:11px;flex:0 0 auto}
.btn{
  display:flex;align-items:center;justify-content:center;gap:11px;min-height:56px;
  border-radius:14px;border:2px solid transparent;
  font-family:var(--font);font-size:16px;font-weight:700;letter-spacing:var(--btn-track);
  text-decoration:none;width:100%;cursor:pointer;padding:0 16px;color:#FFFFFF;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.4);transition:transform .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn--hubby{background:var(--hubby)}
.btn--ink{background:var(--ink)}
.num{
  width:24px;height:24px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:#FFFFFF;flex:0 0 auto;
}
.btn--hubby .num{color:var(--hubby)}
.btn--ink   .num{color:var(--ink)}
/* on a choice page the buttons are alternatives, so they carry no step number */
.stage[data-kind="choice"] .num{display:none}

.help{font-size:12px;font-weight:500;line-height:1.45;color:var(--grey-2);text-align:center;margin:7px auto 0;max-width:34ch}
.step1{display:flex;justify-content:center;margin:0}
/* the button hugs its label rather than filling the row, so the pair reads as
   one centred unit. It never exceeds the row: long labels wrap the pair. */
.step1 .btn{flex:0 1 auto;width:auto;max-width:100%;padding:0 32px}
.step2{
  display:flex;justify-content:center;flex-wrap:wrap;
  margin:20px 0 0;font-size:15px;line-height:1.5;color:var(--grey-1);text-align:center;
}
/* secondary action: a plain hyperlink in ink, so the orange belongs to the
   primary button and the footnote boxes only */
.lnk{
  color:var(--ink);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:2px;
  text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;
}
.lnk:hover{text-decoration-thickness:3px}
.lnk:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.step2__help{flex:1 1 100%;text-align:center;font-size:12.5px;color:var(--grey-2)}
.note{border-top:1px solid #EAEAE4;margin:26px 0 0;padding:20px 0 0;font-size:12.5px;font-weight:500;line-height:1.5;color:var(--grey-1);text-align:start;max-width:none}
.notebox__q{order:1;display:block;text-wrap:balance;font-size:12px;line-height:1.4;color:var(--grey-2);font-weight:500;text-decoration:none;margin:0 0 2px}
.noteboxes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:18px 12px;align-items:start;
}
/* icon on its own line, label and chevron beneath it */
.notebox{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  min-height:0;padding:0;border:0;background:none;border-radius:0;
  text-decoration:none;text-align:center;
}
.notebox::before{
  content:"";flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  background:var(--wash) no-repeat center;background-size:17px 17px;
}
.notebox--compat::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FF8800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cline x1='11' y1='18' x2='13' y2='18'/%3E%3C/svg%3E")}
.notebox--help::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FF8800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.2a2.6 2.6 0 0 1 5 .9c0 1.8-2.5 2-2.5 3.6'/%3E%3Cline x1='12' y1='17.4' x2='12' y2='17.5'/%3E%3C/svg%3E")}
.notebox__t{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--grey-1);font-size:13.5px;font-weight:600;line-height:1.35;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
  text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;
}
.notebox__t::after{
  content:"";flex:0 0 auto;width:6px;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' stroke='%235F5F5F' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.notebox:hover .notebox__t{color:var(--ink);text-decoration-thickness:2.5px}
.notebox:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.note a:hover{color:var(--ink)}
.note a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---------- desktop ---------- */
.desk{width:100%;max-width:1080px;font-family:var(--font)}

.dhead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 44px;border-bottom:1px solid #EFEFEF}
.dhead .hubbymark{height:45px}
.dhelp{font-size:13.5px;font-weight:500;color:var(--grey-1);text-decoration:none;border-bottom:1px solid #DADADA;padding-bottom:1px}
.dhelp:hover{color:var(--ink);border-color:var(--ink)}
.dhelp:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

.dbody{display:grid;grid-template-columns:1fr 372px;min-height:512px}
.dmain{padding:50px 44px 46px;text-align:center}
.daside{border-left:1px solid #EFEFEF;padding:46px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}

.dmain .h1--d{font-size:44px;margin-top:14px}
.dsub{font-size:16.5px;font-weight:400;line-height:1.6;color:var(--grey-1);margin:18px auto 0;max-width:40ch}
.drule{height:1px;background:#EFEFEF;border:0;margin:30px auto 20px;max-width:78%}

/* the sequence, left aligned inside a centred block so the numbers line up */
.dsteps{list-style:none;margin:0 auto;padding:0;display:inline-flex;flex-direction:column;gap:13px;text-align:start}
.dsteps li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--grey-1)}
.dsteps .n{
  flex:0 0 auto;width:23px;height:23px;border-radius:99px;background:var(--hubby);color:var(--ink);
  font-size:11.5px;font-weight:800;display:grid;place-items:center;margin-top:1px;
}

/* a choice page has an action that works on a desktop, so it gets a button */
.dact{display:inline-flex;width:auto;min-height:52px;padding:0 26px;margin:30px auto 0}
.dacthelp{font-size:12.5px;font-weight:500;color:var(--grey-2);margin:10px auto 0;max-width:36ch}

.qrbox{width:222px;height:222px;display:grid;place-items:center;flex:0 0 auto}
.qrsvg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.qrlabel .ico{color:var(--hubby);flex:0 0 auto;display:flex}
.qrlabel{margin:0;font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;justify-content:center;letter-spacing:var(--btn-track)}

@media (max-width:900px){
  .dbody{grid-template-columns:1fr}
  .daside{border-left:0;border-top:1px solid #EFEFEF}
  .dmain{padding:40px 30px 34px}
  .dhead{padding:20px 30px}
  .h1--d{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* -----------------------------------------------------------------
   Mobile language picker: bump touch target and give the row some
   breathing room. Selectors scoped under main.stage so they beat
   super.css's .langbar rule on specificity. */
@media (max-width: 899px) {
  main.stage .langbar { padding: 16px 0 8px; }
  main.stage .langsel-trigger { min-height: 44px; font-size: 14px; padding: 9px 12px 9px 14px; }
}