/* ============================================================================
   Panda new-homepage — SHARED styles for the hero-direction mockups
   Built from design-concepts/DESIGN-LIKES-AND-DISLIKES.md (2026-07-27 review).
   Decided elements that are IDENTICAL across every direction live here; each
   direction file adds only its own hero-composition CSS.
   ========================================================================== */

:root{
  /* soft, warm bone backgrounds — NOT stark white (Graeme's Arcadia preference) */
  --canvas:#E7E3DA;          /* outer page canvas */
  --panel:#F5F2EB;           /* lighter hero panel */
  --card:#FCFBF8;            /* cards — lighter than the background, not white */
  --ink:#17263B;
  --muted:#5A6B82;
  --faint:#8494A8;
  --hair:#E0DBD0;            /* hairline on bone */
  --hair2:#EAE6DC;
  /* brand blue + a DARKER blue for the dark nav/footer bands (review §footer) */
  --blue:#185FBF;
  --blue-hover:#124C9C;
  --navy:#0E2C55;           /* dark band base (announcement / nav / footer) */
  --navy-2:#12356A;
  --red:#C0392B;
  --amber:#F2C200;
  --green:#2E9E4F;
  --sh-card:0 1px 2px rgba(15,40,85,.05), 0 10px 30px rgba(15,40,85,.07);
  --sh-lift:0 24px 55px rgba(15,40,85,.16), 0 4px 12px rgba(15,40,85,.07);
  --maxw:1120px;            /* the mockups run a touch wider than the 900 text column */
}

*{box-sizing:border-box}
html{margin:0; scrollbar-gutter:stable; scroll-behavior:smooth;}  /* reserve the scrollbar gutter so a toggling scrollbar can't reflow the page (a shudder that shows with classic scrollbars); smooth in-page anchor scrolling */
section[id]{scroll-margin-top:84px;}  /* anchor jumps land below the sticky nav, not under it */
body{margin:0; overflow-x:clip;}          /* clip stray horizontal overflow WITHOUT breaking position:sticky (overflow-x:hidden would) */
body{
  background:var(--canvas); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}

/* ---------- announcement bar (rotating message; hides on scroll) ---------- */
.announce{
  background:var(--navy); color:#DCE6F4; font-size:13px; letter-spacing:.01em;
  transition:opacity .25s ease;
}
/* grow to fit the message (esp. when it wraps to 2–3 lines on a phone) — a fixed
   height + overflow:hidden used to clip the last line ("…the new rates") on mobile. */
.announce .wrap{display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:8px 32px; text-align:center}
.announce b{color:#fff; font-weight:600}
.announce .dot{color:#5C79A6; font-size:2em; line-height:0; vertical-align:-0.12em; margin:0 3px}
/* announcement bar scrolls away naturally under the sticky nav — NO height-changing
   collapse (the old max-height:0 on scroll fed back into scroll position and caused the
   manic shudder at the trigger point). */

/* ---------- nav (dark navy, reversed text; becomes fixed on scroll) ------- */
.nav{background:var(--navy); color:#EAF1FB; position:sticky; top:0; z-index:60;
     box-shadow:0 1px 0 rgba(255,255,255,.04) inset;}
/* sticky (not fixed) reserves the nav's box in flow, so sticking causes NO height jump.
   Scrolled state only adds a shadow — no layout change, so no scroll jitter. */
body.scrolled .nav{box-shadow:0 8px 26px rgba(9,24,48,.28);}
.nav .wrap{display:flex; align-items:center; gap:30px; height:64px}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:20px; letter-spacing:-.02em; color:#fff; margin-right:6px}
.brand .bolt{color:var(--blue); font-size:22px; line-height:1}
.menu{display:flex; align-items:center; gap:4px; margin-left:auto}  /* group links to the right, next to the CTA (no stretched middle gap) */
.menu > .item{position:relative}
/* invisible hover-bridge across the 10px gap so the mega-menu doesn't close as the cursor moves into it */
.menu > .item:hover::after{content:""; position:absolute; top:100%; left:-10px; right:-10px; height:16px; z-index:69}
.menu > .item > a{display:inline-flex; align-items:center; gap:6px; padding:10px 13px; border-radius:8px;
   font-size:14.5px; font-weight:500; color:#D6E1F1; cursor:pointer; transition:background .15s, color .15s}
.menu > .item > a .car{font-size:14px; opacity:.85; transform:translateY(1px)}  /* bigger caret (was reading as a dot) */
.menu > .item:hover > a{background:rgba(255,255,255,.09); color:#fff}
.nav .cta-mini{white-space:nowrap; flex:none; padding:10px 18px; font-size:13.5px; justify-content:center}  /* sits right after the menu group; base padding so the pill isn't jammed */
.menu > .item > a{white-space:nowrap}
.navtoggle{display:none; background:transparent; border:0; color:#EAF1FB; font-size:23px; line-height:1;
   cursor:pointer; padding:6px 10px; border-radius:8px}
.navtoggle:hover{background:rgba(255,255,255,.09)}
.btn{display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; font-weight:600;
     font-family:inherit; border-radius:10px; transition:background .15s, transform .05s, box-shadow .15s;}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue); color:#fff; padding:11px 18px; font-size:14.5px; box-shadow:0 6px 16px rgba(24,95,191,.28)}
.btn-primary:hover{background:var(--blue-hover)}
.btn-nav{background:var(--blue); color:#fff; padding:9px 15px; font-size:13.5px}
.btn-nav:hover{background:var(--blue-hover)}
.btn-ghost{background:transparent; color:var(--blue); padding:11px 8px; font-size:14.5px; font-weight:600}
.btn-ghost:hover{color:var(--blue-hover)}

/* ---------- mega-menu card (opens under a nav item on hover) -------------- */
.mega{position:absolute; top:calc(100% + 10px); left:0; width:560px; background:var(--card); color:var(--ink);
   border-radius:16px; box-shadow:var(--sh-lift); padding:20px; opacity:0; visibility:hidden;
   transform:translateY(6px); transition:opacity .16s ease, transform .16s ease; z-index:70;}
.menu > .item:hover .mega{opacity:1; visibility:visible; transform:translateY(0)}
.mega::before{content:""; position:absolute; top:-9px; left:26px; width:16px; height:16px; background:var(--card);
   transform:rotate(45deg); border-radius:3px}
.mega .mega-hd{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin:2px 4px 4px}
.mega .mega-sub{font-size:13px; color:var(--muted); margin:0 4px 14px}
.mega-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.mega-item{display:flex; gap:11px; padding:10px; border-radius:11px; transition:background .13s; cursor:pointer}
.mega-item:hover{background:#F1EEE6}
.mega-ic{flex:none; width:34px; height:34px; border-radius:9px; background:#E7F0FF; color:var(--blue);
   display:flex; align-items:center; justify-content:center; font-size:17px}
.mega-item h4{margin:1px 0 2px; font-size:13.5px; font-weight:650}
.mega-item p{margin:0; font-size:12px; color:var(--muted); line-height:1.35}
.mega.small{width:360px}
.mega.small .mega-grid{grid-template-columns:1fr}

/* ---------- hero shared bits --------------------------------------------- */
.hero{position:relative; background:
     radial-gradient(120% 90% at 80% -10%, #FBFAF6 0%, rgba(251,250,246,0) 55%),
     linear-gradient(180deg, var(--panel) 0%, var(--panel) 62%, var(--canvas) 100%);
     overflow:hidden;}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700;
   letter-spacing:.1em; text-transform:uppercase; color:var(--blue);}
.eyebrow .pip{width:7px; height:7px; border-radius:50%; background:var(--blue)}
h1.head{font-weight:800; letter-spacing:-.022em; color:#0F2E5C; margin:0;}
.sub{color:var(--muted); margin:0;}
/* rotating sub-line: all lines STACKED IN ONE GRID CELL (grid-area:1/1). The grid track's
   height = the tallest line (hidden lines still size the track), so the container height is
   STABLE at every viewport width — rotation can never change the layout height. This kills the
   scroll-shudder the old (position:absolute + fixed min-height) approach allowed when a line
   rendered taller than the slot at some widths. */
.subrot{display:grid;}
.subrot .line{grid-area:1 / 1; opacity:0; transform:translateY(8px);
   transition:opacity .5s ease, transform .5s ease; pointer-events:none;}
.subrot .line.on{opacity:1; transform:translateY(0); pointer-events:auto;}
/* clickable progress dots under the rotating sub-line (click to jump back to a message) */
.subdots{display:flex; justify-content:center; gap:9px; margin:0 0 26px; padding:2px 0}
.subdot{width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
   background:var(--hair); transition:background .2s ease, transform .2s ease}
.subdot:hover{background:var(--muted)}
.subdot.on{background:var(--blue); transform:scale(1.2)}
.cta-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.cta-hint{font-size:15.5px; color:var(--muted)}
.trust{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); flex-wrap:wrap}
.trust .sep{color:var(--hair); }

/* the "what we find in your bills" card — replaces the meaningless stat cards */
.issues{background:var(--card); border:1px solid var(--hair2); border-radius:16px; box-shadow:var(--sh-card); padding:20px 22px;}
.issues h3{margin:0 0 3px; font-size:15px; font-weight:750; color:var(--ink)}
.issues .isub{margin:0 0 14px; font-size:12.5px; color:var(--muted)}
.issues ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.issues li{display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:#2B3A4F}
.issues li .fi{flex:none; width:20px; height:20px; border-radius:6px; background:#FBEBEB; color:var(--red);
   display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; margin-top:1px}

/* placeholder for the (later) realistic product graphic — intentional, not broken */
.gfx{position:relative; background:var(--card); border:1px solid var(--hair2); border-radius:16px;
   box-shadow:var(--sh-lift); overflow:hidden;}
.gfx .chrome{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--hair2); background:#FBFAF6}
.gfx .tl{width:11px; height:11px; border-radius:50%}
.gfx .tl.r{background:#E5867F} .gfx .tl.y{background:#E8C471} .gfx .tl.g{background:#8FC79A}
.gfx .urlpill{margin-left:10px; font-size:11.5px; color:var(--faint); background:#F1EEE6; padding:3px 12px; border-radius:20px}
.gfx .body{padding:18px; display:grid; gap:12px}
.gfx .wire-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gfx .wire-card{height:58px; border-radius:10px; background:linear-gradient(180deg,#F3EFE6,#F7F4EE); border:1px solid var(--hair2)}
.gfx .wire-chart{height:150px; border-radius:12px; background:
   linear-gradient(180deg,#F5F1E9,#FAF7F1); border:1px solid var(--hair2); position:relative; overflow:hidden}
.gfx .wire-chart::after{content:""; position:absolute; left:0; right:0; bottom:0; height:66%;
   background:repeating-linear-gradient(90deg, rgba(24,95,191,.14) 0 12px, transparent 12px 34px)}
.gfx .wire-table{height:96px; border-radius:10px; background:
   repeating-linear-gradient(#FAF7F1 0 23px, #F1ECE3 23px 24px); border:1px solid var(--hair2)}
.gfx .stub{position:absolute; inset:auto 0 0 0; display:flex; justify-content:center; padding:9px;
   font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
   background:linear-gradient(180deg, rgba(252,251,248,0), var(--card) 60%)}
.gfx .stub span{background:#EFEBE2; padding:4px 12px; border-radius:20px}

/* small floating meaningful card (used over a graphic in some directions) */
.floatcard{position:absolute; background:var(--card); border:1px solid var(--hair2);
   border-radius:14px; box-shadow:var(--sh-lift); padding:14px 16px;}

footer.tag{padding:26px 0 40px; text-align:center; color:var(--faint); font-size:12.5px}

/* ---- responsive header: hamburger menu below 1100px; hero stacks below 820px ---- */
@media (max-width:1100px){
  .wrap{padding:0 48px}   /* below the 1120 max-width the wrap is full-width, so give it generous side margins */
}
/* collapse to a hamburger only once the menu genuinely needs it — keep the full menu down to a narrow width */
@media (max-width:860px){
  .navtoggle{display:block; margin-left:6px}
  .nav .cta-mini{margin-left:auto; margin-right:4px}
  .menu{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
        align-items:stretch; gap:0; background:var(--navy); padding:6px 14px 16px;
        border-top:1px solid rgba(255,255,255,.08); box-shadow:0 14px 30px rgba(9,24,48,.4)}
  .nav.open .menu{display:flex}
  .menu > .item{border-bottom:1px solid rgba(255,255,255,.06)}
  .menu > .item:last-child{border-bottom:0}
  .menu > .item > a{padding:14px 8px; font-size:16px; width:100%}
  /* mobile: the hover mega-menus become tap-to-expand accordions inside the stacked menu.
     JS adds .open to the tapped .item; the sub-links render as a compact light-on-navy list. */
  .menu > .item > a{justify-content:space-between}          /* label left, caret right */
  .menu > .item > a .car{font-size:28px; transition:transform .2s ease}   /* 2× bigger dropdown triangle on mobile */
  .menu > .item.open > a .car{transform:rotate(180deg)}     /* flip the caret when open */
  .mega{display:none; position:static; width:auto; max-width:none; background:transparent;
        box-shadow:none; border:0; opacity:1; visibility:visible; transform:none; padding:0 0 8px}
  .mega::before{display:none}                               /* remove the desktop pointer */
  .menu > .item.open > .mega{display:block}
  .mega .mega-hd, .mega .mega-sub{display:none}             /* redundant inside the accordion */
  .mega .mega-grid{display:block; gap:0}
  .mega .mega-item{padding:12px 10px 12px 16px; border-radius:8px}
  .mega .mega-item:hover{background:rgba(255,255,255,.06)}
  .mega .mega-ic{display:none}                              /* clean text list, no icon tiles */
  .mega .mega-item h4{color:#EAF1FB; font-size:15px; font-weight:600; margin:0 0 2px}
  .mega .mega-item p{color:#9FB3D1; font-size:12.5px; line-height:1.35}
}
/* stack the hero to one column earlier so the medium range isn't a cramped 2-column */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr !important; gap:30px; padding-top:32px; padding-bottom:50px}  /* keep horizontal gutter */
  /* keep the stacked hero text at a READABLE width instead of sprawling full-width */
  .hcol-l{max-width:640px}
  .hcol-l .sub{max-width:none}          /* align the rotating line with the heading/statement/CTA */
  .hcol-r{max-width:640px}              /* card matches the text column width when stacked */
}
@media (max-width:640px){
  .wrap{padding:0 24px}   /* smaller phones: ease the side margins back so content isn't over-squeezed */
  .hcol-l h1.page-title{font-size:26px}
  .hcol-l .page-lede{font-size:19px}
  .hcol-l h1.head{font-size:28px !important; white-space:normal !important}
}
@media (max-width:520px){
  .nav .cta-mini{font-size:12.5px; padding:.5rem .75rem}
  .nav .wrap{gap:10px}
}
/* default: the cross-page button shows its full label; the short label is mobile-only */
.cta-mini .cta-short{display:none}
/* phones: the FULL cross-page CTA was too wide and pushed the ☰ hamburger off the edge.
   Keep BOTH — a COMPACT button (short label) next to a slightly smaller logo, with the ☰
   still pinned right — so there's a one-tap link to the sister page AND a visible menu. */
@media (max-width:600px){
  .nav .wrap{gap:8px}
  .nav .brand img{height:24px !important}                 /* trim the logo to free width */
  .nav .cta-mini{margin-left:auto; margin-right:6px; padding:7px 10px; font-size:11.5px; flex:none; letter-spacing:0}
  .nav .cta-mini .cta-full{display:none}
  .nav .cta-mini .cta-short{display:inline}
  .navtoggle{margin-left:0; margin-right:0}
}

/* ============================================================================
   FULL-PAGE SECTIONS (below the hero) — direction-neutral; reused by any
   direction's full build. Added 2026-07-29 for new-homepage-full-dir3-v01.
   ========================================================================== */
.section{padding:72px 0;}
.section.alt{background:var(--panel);}
.section.tint{background:linear-gradient(180deg,var(--canvas),var(--panel));}
.sec-head{max-width:760px; margin:0 0 34px;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head h2{font-size:32px; line-height:1.12; letter-spacing:-.02em; color:#0F2E5C; margin:0 0 12px;}
.sec-head p{font-size:16.5px; color:var(--muted); margin:0; line-height:1.5;}

/* solution cards (3-up) — lighter than the section bg, icon tile + title + copy */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.scard{background:var(--card); border:1px solid var(--hair2); border-radius:16px; padding:24px; box-shadow:var(--sh-card);
   display:flex; flex-direction:column; gap:10px;}
.scard .ic{width:44px; height:44px; border-radius:11px; background:#E7F0FF; color:var(--blue);
   display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:4px;}
.scard h3{margin:0; font-size:17px; font-weight:700; color:var(--ink);}
.scard p{margin:0; font-size:14px; color:var(--muted); line-height:1.5; flex:1;}
.scard .more{font-size:13.5px; font-weight:600; color:var(--blue); margin-top:4px;}
.grouptag{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-top:6px;}

/* other solution groups — compact teaser row */
.grouprow{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px;}
.gcard{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px dashed var(--hair);
   border-radius:14px; padding:18px 20px;}
.gcard .ic{flex:none; width:38px; height:38px; border-radius:10px; background:#EFEBE2; color:var(--blue);
   display:flex; align-items:center; justify-content:center; font-size:19px;}
.gcard h4{margin:0 0 3px; font-size:15px; font-weight:700}
.gcard p{margin:0; font-size:13px; color:var(--muted); line-height:1.45}
.gcard .soon{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}

/* WHO IT'S FOR — Arcadia clean layout: sticky heading left, vertical list right */
.who{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px; align-items:start;}
.who .stick{position:sticky; top:90px;}
.who-list{border-top:1px solid var(--hair);}
.who-row{display:flex; align-items:center; gap:18px; padding:22px 4px; border-bottom:1px solid var(--hair);}
.who-row .arr{flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--blue); color:var(--blue);
   display:flex; align-items:center; justify-content:center; font-size:15px; transition:background .15s,color .15s;}
.who-row:hover .arr{background:var(--blue); color:#fff;}
.who-row h4{margin:0 0 3px; font-size:17px; font-weight:650;}
.who-row p{margin:0; font-size:14px; color:var(--muted); line-height:1.45;}

/* how-it-works — Arcadia vertical numbered list */
.steps{display:grid; gap:0; max-width:820px; border-top:1px solid var(--hair);}
.step{display:flex; gap:20px; padding:22px 4px; border-bottom:1px solid var(--hair);}
.step .n{flex:none; width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff;
   font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px;}
.step h4{margin:0 0 4px; font-size:17px; font-weight:650;}
.step p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.5;}

/* proof band + case studies */
.nums{display:flex; gap:44px; flex-wrap:wrap; margin-bottom:34px; align-items:flex-start;}
.num{display:flex; flex-direction:column;}
.num .big{font-size:33px; font-weight:800; color:var(--blue); letter-spacing:-.02em; line-height:1.1;}
.num .cap{font-size:14px; color:var(--muted); line-height:1.35; margin-top:6px;}
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.case{background:var(--card); border:1px solid var(--hair2); border-radius:16px; overflow:hidden; box-shadow:var(--sh-card);}
.case .ph{height:130px; background:linear-gradient(135deg,#EAF1FB,#F3EFE6); border-bottom:1px solid var(--hair2);
   display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:12px; letter-spacing:.05em; text-transform:uppercase;}
.case .body{padding:26px 22px;}
.case .k{font-size:40px; line-height:1.05; font-weight:800; color:var(--blue); margin:0 0 10px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.case h4{margin:0 0 10px; font-size:21px; line-height:1.22; font-weight:800; letter-spacing:-.015em; color:#0F2E5C;}
.case p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.45;}

/* testimonials */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.quote{background:var(--card); border:1px solid var(--hair2); border-radius:16px; padding:24px; box-shadow:var(--sh-card);}
.quote .q{font-size:15px; line-height:1.55; color:#2B3A4F; margin:0 0 16px;}
.quote .who2{display:flex; align-items:center; gap:12px;}
.quote .av{width:40px; height:40px; border-radius:50%; background:#E7F0FF; color:var(--blue); font-weight:700;
   display:flex; align-items:center; justify-content:center; font-size:15px;}
.quote .nm{font-size:14px; font-weight:650;} .quote .rl{font-size:12.5px; color:var(--muted);}

/* footer — dark navy, reversed, Arcadia-style columns */
footer.site{background:var(--navy); color:#C3D2E8; padding:54px 0 30px; margin-top:0;}
footer.site .cols{display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:30px; margin-bottom:36px;}
footer.site .brand{font-size:22px; margin-bottom:12px;}
footer.site .blurb{font-size:13.5px; color:#9DB2D2; line-height:1.5; max-width:260px; margin-bottom:16px;}
footer.site .wa{display:inline-flex; align-items:center; gap:8px; background:#1F8A4C; color:#fff; padding:9px 15px;
   border-radius:10px; font-size:13.5px; font-weight:600;}
footer.site h5{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#8FA6C8; margin:0 0 14px;}
footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
footer.site ul a{font-size:13.5px; color:#C3D2E8;}
footer.site ul a:hover{color:#fff;}
footer.site .foot-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:20px; display:flex;
   justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#7E95BA;}

@media (max-width:900px){
  .cards3,.cases,.quotes,.grouprow{grid-template-columns:1fr}
  .who{grid-template-columns:1fr} .who .stick{position:static}
  footer.site .cols{grid-template-columns:1fr 1fr}
}