/* "One roof. One price." global fee, owner-approved and locked 2026-10-28 (Codex family-c/global-fee-v002, APPROVED-LOCK.json;
   Daniel: "perfect- lock it in and have claude post it").
   Site placement of the locked style.css: every rule scoped to .dio-global-fee, ids prefixed gf-, the review page shell, review note,
   font-face and no-script rules dropped (the site mounts it from script, and Nunito Sans comes from the site's fonts.css), h1 shown
   as the component title (h3). The brand variables and the aluminium button finish it relied on (brand/styles.css,
   brand/button-finish.css) are copied in here, scoped, so no second global stylesheet loads. Values are unchanged.
   Breakpoints follow the component's own width (container queries), not the screen: it sits in the answer header box, about 390 px
   wide beside the question on a computer, so it takes its phone layout there. Phone scene height uses cqw where the lock used vw.
   A few rules carry a doubled class only to outrank the answer header's own figure img rule (story-editorial.css). */
.dio-global-fee{--navy:#2f4452;--ink:#203846;--steel:#4c7288;--orange:#ed873c;--muted:#506875;--mist:#dce6ec;--mineral:#f5f7f7;--rule:#cad5da;--font:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;--ease:cubic-bezier(.22,.7,.25,1);color:var(--ink);background:#fff;font:18px/1.65 var(--font);-webkit-font-smoothing:antialiased;container-type:inline-size}
.dio-global-fee *{box-sizing:border-box}
.dio-global-fee [hidden]{display:none!important}
html body .dio-global-fee :is(p,h3,figure){margin:0;color:inherit}
.dio-global-fee .fee-animation{margin:0}.dio-global-fee .scene{height:600px;position:relative;background:var(--mineral);overflow:hidden;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);isolation:isolate}.dio-global-fee .gf-title{position:absolute;top:28px;left:20px;right:20px;margin:0;text-align:center;font:500 26px/1.3 var(--font);letter-spacing:-.025em;color:var(--ink);z-index:8}.dio-global-fee :is(.world,.roof-layer){position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.dio-global-fee .world{z-index:0}.dio-global-fee .roof-layer{z-index:4}.dio-global-fee .office{position:absolute;width:30%;top:36%;z-index:2;will-change:transform}.dio-global-fee .office-a{left:30%}.dio-global-fee .office-b{left:50%;z-index:3}.dio-global-fee.dio-global-fee .office img{width:100%;height:auto;max-width:none;object-fit:fill;border-radius:0;display:block}.dio-global-fee.dio-global-fee .office .door-wall{position:absolute;inset:0;width:100%;height:auto;opacity:1;pointer-events:none}.dio-global-fee .office-label{margin:0;background:var(--mineral);position:absolute;top:auto;bottom:calc(80% + 10px);left:-6%;width:100%;font:500 18px/1.3 var(--font);text-align:center;color:var(--ink);opacity:0}.dio-global-fee .bill{position:absolute;top:16%;width:21%;height:100px;padding:12px 18px;background:linear-gradient(130deg,#fff 55%,#f5f7f8);border:1px solid #bdccd3;box-shadow:0 8px 16px #2038460b;opacity:0;z-index:6;transform-origin:50% 85%;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 5px),95% 100%,90% calc(100% - 5px),85% 100%,80% calc(100% - 5px),75% 100%,70% calc(100% - 5px),65% 100%,60% calc(100% - 5px),55% 100%,50% calc(100% - 5px),45% 100%,40% calc(100% - 5px),35% 100%,30% calc(100% - 5px),25% 100%,20% calc(100% - 5px),15% 100%,10% calc(100% - 5px),5% 100%,0 calc(100% - 5px))}.dio-global-fee .bill::after{content:'';position:absolute;top:0;right:0;width:15px;height:15px;background:#dce6ec;clip-path:polygon(0 0,100% 100%,0 100%)}.dio-global-fee .bill-a{left:23%}.dio-global-fee .bill-b{left:63%}.dio-global-fee .bill-number{font:600 21px/1.25 var(--font);color:var(--ink)}.dio-global-fee .bill-purpose{font:400 16px/1.35 var(--font);margin-top:5px!important;color:var(--muted)}.dio-global-fee .bill i{position:absolute;right:17px;bottom:23px;width:30px;border-top:1px solid #bbccd5}.dio-global-fee .later{position:absolute;right:13px;bottom:15px;color:#203846;font:500 15px/1.2 var(--font);background:#f4e2d2;padding:4px 7px}.dio-global-fee .bill-b:has(.later) i{display:none}.dio-global-fee .price-panel{position:absolute;top:15.5%;left:50%;transform:translateX(-50%);width:430px;max-width:80%;z-index:7;text-align:center;background:linear-gradient(120deg,#fff,#f7f9f9);border:1px solid #c2d0d7;box-shadow:0 7px 20px #20384608;padding:15px 22px 17px}.dio-global-fee .price-heading{font:500 16px/1.3 var(--font);color:var(--muted)}.dio-global-fee .prices{display:flex;justify-content:center;gap:42px;margin-top:8px}.dio-global-fee .prices p{margin:0;white-space:nowrap}.dio-global-fee .prices strong{display:block;font:600 30px/1.1 var(--font);letter-spacing:-.03em;color:var(--ink)}.dio-global-fee .prices span{display:block;font:400 16px/1.4 var(--font);margin-top:4px;color:var(--muted)}.dio-global-fee .patient-label{margin:0!important;z-index:5;position:absolute;top:88%;left:9%;transform:translateX(-50%);font:500 16px/1.2 var(--font);color:var(--muted)}.dio-global-fee .controls{display:flex;align-items:center;gap:18px;padding:20px 0 18px;border-bottom:1px solid var(--rule);flex-wrap:wrap}.dio-global-fee .controls .button{min-height:48px;padding:11px 22px}.dio-global-fee .pause{font:500 16px/1.25 var(--font);background:#fff;border:1px solid var(--steel);color:var(--ink);min-height:48px;padding:10px 22px;cursor:pointer}.dio-global-fee .still{display:flex;align-items:center;gap:8px;min-height:48px;font:400 15px/1.4 var(--font);cursor:pointer;color:var(--muted)}.dio-global-fee .still input{width:18px;height:18px;accent-color:var(--steel)}.dio-global-fee #gf-status{font:400 14px/1.4 var(--font);color:var(--muted);margin-left:auto}.dio-global-fee .fee-animation figcaption{margin-top:22px;padding:0;text-align:center}.dio-global-fee .promise{font:500 19px/1.4 var(--font);color:var(--ink)}.dio-global-fee .exceptions{font:400 16px/1.5 var(--font);color:var(--muted);margin-top:7px!important}.dio-global-fee .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The site's approved static anodized aluminium button (brand/styles.css .button + brand/button-finish.css .call), scoped. */
.dio-global-fee button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dio-global-fee .button{display:inline-flex;justify-content:center;align-items:center;position:relative;isolation:isolate;overflow:hidden;min-height:52px;padding:14px 25px;text-decoration:none;font-size:16px;font-weight:500;line-height:1.25;border:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.dio-global-fee .button.call{background:linear-gradient(180deg,#e6e8e8 0%,#d4d7d7 38%,#c9cdcd 100%);color:#1c3341;text-shadow:0 1px 0 rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,40,52,.28),inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(20,40,52,.12)}
.dio-global-fee .button::before{content:'';position:absolute;inset:0;z-index:-1;transform:translateX(-101%);transition:transform var(--dio-cta-retract-duration,1.2s) var(--ease);background:linear-gradient(180deg,#f4a165 0%,#ed873c 40%,#e9853b 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(110,45,0,.32),inset 1px 0 0 rgba(255,255,255,.2),inset -1px 0 0 rgba(110,45,0,.12)}
.dio-global-fee .button::after{content:'';display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");box-shadow:none;animation:none;transition:none;transform:none}
.dio-global-fee .button:is(:active,:focus-visible){color:#203846;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.dio-global-fee .button:is(:active,:focus-visible)::before{transform:translateX(0)}
.dio-global-fee .button:active::before{transition-duration:var(--dio-cta-wipe-duration,.45s)}
.dio-global-fee .button:focus-visible,.dio-global-fee .button:focus-visible::before{outline:0;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px #203846}
@media(hover:hover){.dio-global-fee .button:not(:disabled):hover{color:#203846;text-shadow:0 1px 0 rgba(255,255,255,.35)}.dio-global-fee .button:hover::before{transform:translateX(0)}}
.dio-global-fee .pause:focus-visible,.dio-global-fee .still input:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.dio-global-fee .dio-button-shadow{display:inline-flex;align-items:stretch;max-width:100%;min-width:0;vertical-align:middle;filter:drop-shadow(0 1px 1px rgba(16,32,42,.22)) drop-shadow(0 6px 10px rgba(16,32,42,.16))}
.dio-global-fee .dio-button-shadow>.button{min-width:0}
.dio-global-fee .dio-button-shadow:has(>[hidden]){display:none!important}
/* site copy (GPT r37 review): on narrow components the scene is tall enough that the building's solid platform clears the person's head by 12px
   at every width (bottom .47H+.44W*226/300 vs head top .89H-53); 248/320/400 stay 480, 488 becomes about 540; above 700px unchanged */
@container (max-width:700px){.dio-global-fee .scene{height:max(480px,100cqw,calc(78.920635cqw + 154.761905px));clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}.dio-global-fee .gf-title{top:23px;left:12px;right:12px;font-size:22px}.dio-global-fee .office{width:44%;top:47%}.dio-global-fee .office-a{left:16%}.dio-global-fee .office-b{left:42%}.dio-global-fee .office-label{font-size:15px;top:auto;bottom:calc(80% + 10px);left:-4%}.dio-global-fee .bill{top:18%;width:41%;height:95px;padding:12px 13px}.dio-global-fee .bill-a{left:5%}.dio-global-fee .bill-b{left:54%}.dio-global-fee .bill-number{font-size:19px}.dio-global-fee .bill-purpose{font-size:15px}.dio-global-fee .later{font-size:14px;bottom:12px;right:10px;padding:3px 5px}.dio-global-fee .price-panel{top:18%;width:88%;max-width:none;padding:14px 10px 15px}.dio-global-fee .price-heading{font-size:16px}.dio-global-fee .prices{gap:25px}.dio-global-fee .prices strong{font-size:28px}.dio-global-fee .prices span{font-size:15px}.dio-global-fee .patient-label{top:94%;left:50%;font-size:15px}.dio-global-fee .controls{gap:10px 16px;padding-block:15px}.dio-global-fee .controls .button{font-size:16px;padding:12px 18px}.dio-global-fee #gf-status{flex-basis:100%;margin:0;font-size:14px}.dio-global-fee .fee-animation figcaption{margin-top:18px;text-align:left}.dio-global-fee .promise{font-size:18px}.dio-global-fee .exceptions{font-size:16px}}
@media(prefers-reduced-motion:reduce){.dio-global-fee .scene *,.dio-global-fee .button::before{transition:none!important;animation:none!important}}
html:is(.reduce-motion,.dio-alive-off) .dio-global-fee .scene *,html:is(.reduce-motion,.dio-alive-off) .dio-global-fee .button::before{transition:none!important;animation:none!important}
@media print{.dio-global-fee .controls{display:none!important}.dio-global-fee .scene{clip-path:none}}

/* Owner revision: authentic navy block logo appears only on the joined centre wall. */
.dio-global-fee.dio-global-fee .joined-logo{position:absolute;width:0;height:auto;max-width:none;object-fit:contain;opacity:0;z-index:5;pointer-events:none}
/* Protect the longer owner-requested line above the prices on narrow components. */
@container(max-width:700px){.dio-global-fee .price-panel{top:15%}}
/* site copy (GPT r34 follow-up): on the narrowest phones (component about 250 px at a 320 px screen) both amounts stay inside the price panel */
@container(max-width:300px){.dio-global-fee .prices{gap:12px}.dio-global-fee .prices strong{font-size:24px}}
/* Script-free copy (GPT option A, 2026-10-29): frozen complete stills built only during the launch-build snapshot (global-fee.js staticCopy).
   The live scene hides; exactly one still shows per component-width band and scales uniformly through its own viewBox. Each still keeps
   the container context it was painted in (.gf-ref is a fixed-width .dio-global-fee container). The running page never has these. */
.dio-global-fee .gf-static-scene{display:none;width:100%;height:auto;overflow:hidden}
.dio-global-fee.gf-static>.fee-animation>.scene{display:none}
@container (width <= 284px){.dio-global-fee.gf-static .gf-static-scene[data-ref="248"]{display:block}}
@container (284px < width <= 360px){.dio-global-fee.gf-static .gf-static-scene[data-ref="320"]{display:block}}
@container (360px < width <= 444px){.dio-global-fee.gf-static .gf-static-scene[data-ref="400"]{display:block}}
@container (444px < width <= 534px){.dio-global-fee.gf-static .gf-static-scene[data-ref="488"]{display:block}}
@container (534px < width <= 620px){.dio-global-fee.gf-static .gf-static-scene[data-ref="580"]{display:block}}
@container (620px < width <= 700px){.dio-global-fee.gf-static .gf-static-scene[data-ref="660"]{display:block}}
@container (700px < width <= 940px){.dio-global-fee.gf-static .gf-static-scene[data-ref="820"]{display:block}}
@container (width > 940px){.dio-global-fee.gf-static .gf-static-scene[data-ref="1060"]{display:block}}
/* 2026-11-11 audit, animation controls: one look and one place on every animation. The row is a right-aligned row above the figure, 12px above it; each control has the
   finish of the site's animation toggle (answer-anim.css .ans-anim-toggle): 44px tall, 2px steel border, white ground, 6px corners, ink focus ring,
   mist fill when "Still view" is on. Looks and placement only: no markup, wording, timing or logic changes. The doubled root class outranks the
   widget's older control rules above, which stay as they were. */
.dio-global-fee.dio-global-fee .controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:auto;min-height:0;margin:0 0 12px;padding:0;border:0}
.dio-global-fee.dio-global-fee .controls[hidden]{display:none}
.dio-global-fee.dio-global-fee .controls button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;clip-path:none;cursor:pointer}
.dio-global-fee.dio-global-fee .controls button:hover{background:#f1f5f6;border-color:#4c7288;color:#203846;text-shadow:none;text-decoration:none}
.dio-global-fee.dio-global-fee .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-global-fee.dio-global-fee .controls button[aria-pressed=true]{background:#e6edf0;border-color:#4c7288}
.dio-global-fee.dio-global-fee .controls button:disabled{opacity:.55;color:#203846;cursor:default}
/* the row is drawn above the scene although it follows it in the markup. Play loses the cut-corner aluminium finish (that finish is for page
   actions); "Still view" stays a real labelled checkbox, drawn as the same button: the label is the 44px target, the box itself is hidden the
   screen-reader way and still takes focus and Space; the status line is for screen readers only. */
.dio-global-fee.dio-global-fee .fee-animation{display:flex;flex-direction:column}
.dio-global-fee.dio-global-fee .controls{order:-1}
/* Play was the page's cut-corner aluminium button; that finish is for page actions. An id inside :is() is the only way past the shared
   button-finish.css rules (body :is(.button,#next.btn,...)); #dio-anim-control matches nothing and is there for its weight alone. */
.dio-global-fee.dio-global-fee .controls .dio-button-shadow{filter:none}
.dio-global-fee.dio-global-fee .controls :is(.button,#dio-anim-control){font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;clip-path:none;cursor:pointer;overflow:visible;isolation:auto}
.dio-global-fee.dio-global-fee .controls :is(.button,#dio-anim-control)::before,.dio-global-fee.dio-global-fee .controls :is(.button,#dio-anim-control)::after{content:none}
.dio-global-fee.dio-global-fee .controls :is(.button,#dio-anim-control):hover{background:#f1f5f6;color:#203846;text-shadow:none}
.dio-global-fee.dio-global-fee .controls :is(.button,#dio-anim-control):is(:active,:focus-visible){color:#203846;text-shadow:none;box-shadow:none}
.dio-global-fee.dio-global-fee .controls :is(.button,#dio-anim-control):focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-global-fee.dio-global-fee .controls :is(.button,#dio-anim-control):disabled{opacity:.55;cursor:default}
.dio-global-fee.dio-global-fee .controls .still{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;position:relative;gap:0;font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;clip-path:none;cursor:pointer}
.dio-global-fee.dio-global-fee .controls .still:hover{background:#f1f5f6}
.dio-global-fee.dio-global-fee .controls .still input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dio-global-fee.dio-global-fee .controls .still:has(input:checked){background:#e6edf0}
.dio-global-fee.dio-global-fee .controls .still:has(input:focus-visible){outline:3px solid #203846;outline-offset:2px}
.dio-global-fee.dio-global-fee .controls .still:has(input:disabled){opacity:.55;cursor:default}
.dio-global-fee.dio-global-fee #gf-status{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media print{.dio-global-fee.dio-global-fee .controls{display:none!important}}
/* end animation controls */